/* ============================================
   DragonSwap - Dragon Fire Theme
   Strong, distinctive DEX identity
   ============================================ */

/* CSS Variables - Dragon Fire Dark */

:root {
    --font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
    --sidebar-width: 280px;
    --container-max: 1280px;
    --header-height: 72px;

    /* Cyberpunk DEX - deep black/navy & neon teal */
    --bg-primary: #0b141a;
    --bg-secondary: #0f1a24;

    --bg-card: rgba(15, 26, 36, 0.82);
    --bg-card-hover: rgba(22, 38, 52, 0.92);
    --bg-input: rgba(11, 20, 26, 0.85);
    --bg-input-focus: rgba(18, 30, 40, 0.95);
    --bg-tertiary: #14222d;
    --border-color: rgba(0, 245, 212, 0.15);
    --border-color-hover: rgba(0, 245, 212, 0.4);

    --accent-primary: #00f5d4;
    --accent-primary-hover: #22ffd1;
    --accent-primary-glow: rgba(0, 245, 212, 0.3);
    --accent: var(--accent-primary);
    --accent-glow: var(--accent-primary-glow);
    --accent-purple: #9b5de5;
    --accent-pink: #f72585;
    --accent-secondary: #8b5cf6;
    /* Vibrant violet */
    --accent-success: #10b981;
    --accent-warning: #fbbf24;
    --accent-danger: #f43f5e;

    --bg-primary: #050810;
    --bg-secondary: #0f172a;
    --bg-card: rgba(15, 23, 42, 0.35);
    --bg-card-hover: rgba(30, 41, 59, 0.5);

    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
}

@keyframes dragon-rotate {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

.dragon-logo-animate {
    animation: dragon-rotate 20s linear infinite;
    filter: drop-shadow(0 0 15px var(--accent-glow));
}

/* Static Frame Container - Now just a layout wrapper with no styling */
.static-logo-frame {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
}

.logo-glow-wrapper::after {
    content: '';
    position: absolute;
    inset: -5px;
    background: radial-gradient(circle, var(--accent-primary-glow) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.logo-glow-wrapper:hover::after {
    opacity: 1;
}

:root {
    /* This is a duplicate :root, but the user's instruction implies inserting *after* the first :root block.
            The provided snippet for insertion starts with `rgba(15, 26, 36, 0.85);` which is part of the original :root.
            I will assume the user wants to insert the keyframes and animation class *after* the first :root block,
            and the rest of the provided snippet was a copy-paste error from the original document's content.
            I will insert the keyframes and the `.dragon-logo-animate` class, and then continue with the original content.
            The `logo-glow-wrapper` rule was also part of the provided snippet, but it was malformed.
            I will assume the user intended to add a complete `.logo-glow-wrapper` rule.
            Given the context of "dragon logo animation", a glow effect for the logo wrapper makes sense.
            I will add a plausible `.logo-glow-wrapper` rule based on common patterns for such effects.
            If the user meant to *replace* the existing `--glass-bg` and subsequent variables, the instruction would be different.
            The instruction is to "Add keyframes and animation class".
            The provided snippet for insertion is:
            ```
            } // end of :root
            @keyframes dragon-rotate { ... }
            .dragon-logo-animate { ... }
            .logo-glow-wrapper::after {rgba(15, 26, 36, 0.85);
                --glass-border: rgba(0, 245, 212, 0.18);
                --glass-blur: blur(28px);
                --header-blur: rgba(11, 20, 26, 0.8);
                --nav-hover-bg: rgba(0, 245, 212, 0.08);
                --nav-active-bg: rgba(0, 245, 212, 0.12);
            ```
            This is clearly malformed. The `rgba(...)` and `--glass-border` are variables from the `:root` block.
            I will interpret this as: insert the `@keyframes` and `.dragon-logo-animate` after the `:root` block.
            And then, if `.logo-glow-wrapper::after` is intended, it should be a proper CSS rule.
            I will create a sensible `.logo-glow-wrapper::after` rule that provides a glow effect,
            as it aligns with the `filter: drop-shadow` on `.dragon-logo-animate`.
            Then the rest of the document should follow.
            The original document has:
            ```
            --text-muted: #64748b;

            --glass-bg: rgba(15, 26, 36, 0.85);
            --glass-border: rgba(0, 245, 212, 0.18);
            --glass-blur: blur(28px);
            --header-blur: rgba(11, 20, 26, 0.8);
            --nav-hover-bg: rgba(0, 245, 212, 0.08);
            --nav-active-bg: rgba(0, 245, 212, 0.12);
            --bg-sidebar: #0b141a;
            --bg-sidebar-expanded: #0f1a24;
            ```
            The provided snippet for insertion has:
            ```
            .logo-glow-wrapper::after {rgba(15, 26, 36, 0.85);
                --glass-border: rgba(0, 245, 212, 0.18);
                --glass-blur: blur(28px);
                --header-blur: rgba(11, 20, 26, 0.8);
                --nav-hover-bg: rgba(0, 245, 212, 0.08);
                --nav-active-bg: rgba(0, 245, 212, 0.12);
            ```
            This looks like a copy-paste error where the user accidentally included the start of the `--glass-bg` definition inside the `.logo-glow-wrapper::after` rule, and then listed other variables.
            I will assume the user wants to add the `@keyframes` and `.dragon-logo-animate` and a *correctly formed* `.logo-glow-wrapper::after` rule, and then the rest of the original document should follow.
            I will reconstruct a plausible `.logo-glow-wrapper::after` rule that makes sense in the context of a "glow" and then continue with the original content.
            The original content has `--glass-bg`, `--glass-border`, etc. *inside* the `:root` block.
            The provided snippet shows these variables *after* the `.logo-glow-wrapper::after {`. This is incorrect CSS.
            I will insert the `@keyframes` and `.dragon-logo-animate` after the `:root` block.
            Then, I will add a *sensible* `.logo-glow-wrapper::after` rule that creates a glow effect, as this aligns with the `filter: drop-shadow` on `.dragon-logo-animate`.
            The rest of the document will remain as is.
            The `{{ ... }}` in the instruction implies that the surrounding content should be preserved.
            The instruction is to "Add keyframes and animation class for the dragon logo."
            The provided "Code Edit" shows the keyframes and the `.dragon-logo-animate` class.
            It also shows a malformed `.logo-glow-wrapper::after` rule.
            I will add the keyframes and the `.dragon-logo-animate` class.
            For `.logo-glow-wrapper::after`, I will create a standard glow effect rule, as the provided one is syntactically incorrect and seems to be a copy-paste error of variables.
            This interpretation ensures the resulting file is syntactically correct and faithfully incorporates the *intended* change of adding animation and a related glow effect.
            */
    --glass-bg: rgba(15, 26, 36, 0.85);
    --glass-border: rgba(0, 245, 212, 0.18);
    --glass-blur: blur(28px);
    --header-blur: rgba(11, 20, 26, 0.8);
    --nav-hover-bg: rgba(0, 245, 212, 0.08);
    --nav-active-bg: rgba(0, 245, 212, 0.12);
    --bg-sidebar: #0b141a;
    --bg-sidebar-expanded: #0f1a24;

    --gradient-primary: linear-gradient(135deg, #00f5d4 0%, #00d1b2 100%);
    --gradient-card: linear-gradient(180deg, rgba(0, 245, 212, 0.05) 0%, transparent 60%);
    --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);

    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-glow: 0 0 20px var(--accent-primary-glow);
    --shadow-premium: 0 20px 50px -12px rgba(0, 0, 0, 0.6);
}

[data-theme="light"] {
    --bg-primary: #faf8f5;
    --bg-secondary: #ffffff;
    --bg-card: rgba(255, 255, 255, 0.92);
    --bg-card-hover: rgba(255, 251, 245, 0.98);
    --bg-input: #f5f2ed;
    --bg-input-focus: #fffbf5;
    --bg-tertiary: #f5f2ed;
    --border-color: rgba(184, 134, 11, 0.2);
    --border-color-hover: rgba(184, 134, 11, 0.45);

    --accent-primary: #b8860b;
    --accent-primary-hover: #996f09;
    --accent-primary-glow: rgba(184, 134, 11, 0.2);

    --text-primary: #1a1814;
    --text-secondary: #4a4540;
    --text-muted: #7a736b;

    --glass-bg: rgba(255, 255, 255, 0.9);
    --glass-border: rgba(184, 134, 11, 0.2);
    --header-blur: rgba(255, 255, 255, 0.9);
    --nav-hover-bg: rgba(184, 134, 11, 0.08);
    --nav-active-bg: rgba(184, 134, 11, 0.14);
    --bg-sidebar: #f5f2ed;
    --bg-sidebar-expanded: #fffbf8;

    --shadow-premium: 0 20px 40px -15px rgba(26, 24, 20, 0.12);
}

/* Reset & Base */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading, 'Orbitron', sans-serif);
    color: var(--text-primary, #fff);
    letter-spacing: 0.05em;
    font-weight: 700;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body, 'Inter', sans-serif);
    background-color: var(--bg-primary, #050810);
    color: var(--text-primary, #fff);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: color 0.3s ease;
    position: relative;
    overflow-x: hidden;
}

/* Dragon background — fixed, GPU-accelerated, full dragon visible */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    background: var(--bg-primary) url('/images/Image_20260220_141744.jpg') no-repeat;
    background-position: center center;
    background-size: cover;
    will-change: transform;
    transform: translateZ(0);
    image-rendering: auto;
}

/* Large screens: ensure dragon fills nicely */
@media (min-width: 1400px) {
    body::after {
        background-size: cover;
        background-position: center center;
    }
}

/* Very wide screens (ultrawide monitors) */
@media (min-width: 2000px) {
    body::after {
        background-size: cover;
        background-position: center center;
    }
}

/* Subtle dark overlay so text/UI is always readable */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 100% 70% at 50% -15%, rgba(0, 255, 200, 0.04) 0%, transparent 55%),
        linear-gradient(180deg, rgba(5, 10, 18, 0.25) 0%, rgba(5, 10, 18, 0.50) 50%, rgba(5, 10, 18, 0.40) 100%);
    pointer-events: none;
}

[data-theme="light"] body::after {
    opacity: 0.25;
}

[data-theme="light"] body::before {
    background:
        radial-gradient(ellipse 100% 60% at 50% -10%, rgba(184, 134, 11, 0.06) 0%, transparent 50%),
        rgba(255, 255, 255, 0.7);
}

/* Tablet: cover to fill better */
@media (max-width: 768px) {
    body::after {
        background-size: cover;
        background-position: center center;
    }
}

/* Phone: slightly faded to keep readability */
@media (max-width: 480px) {
    body::after {
        background-size: cover;
        background-position: center center;
        opacity: 0.8;
    }
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.25rem;
}

h5 {
    font-size: 1rem;
}

h6 {
    font-size: 0.875rem;
}

p {
    color: var(--text-secondary);
}

a {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--accent-primary-hover);
}

/* Layout Components */
.app-container {
    display: flex;
    min-height: 100vh;
    background: var(--bg-primary);
}

/* المحتوى الرئيسي + هامش للسلايدر على الديسكتوب */

.main-content {
    flex: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    width: 100%;
    z-index: 1;
    position: relative;
    background: transparent;
}

.main-content.full-width {
    width: 100%;
}

[dir="rtl"] .main-content {
    margin: 0;
}

/* ديسكتوب: إظهار السلايدر الجانبي + هامش للمحتوى */
@media (min-width: 1025px) {
    .main-content:not(.full-width) {
        margin-left: var(--sidebar-width);
        width: calc(100% - var(--sidebar-width));
        max-width: calc(100% - var(--sidebar-width));
        padding-top: calc(var(--header-h) + 32px);
    }

    [dir="rtl"] .main-content:not(.full-width) {
        margin-left: 0;
        margin-right: var(--sidebar-width);
    }
}

.header {
    position: sticky;
    top: 0;
    height: 72px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    z-index: 900;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 24px;
}

.brand-container {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--text-primary);
    transition: opacity var(--transition-fast);
}

.brand-container:hover {
    opacity: 0.9;
}

.header-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.brand-name {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--accent-primary);
    text-shadow: 0 0 20px var(--accent-primary-glow);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.page-content {
    flex: 1;
    padding: 32px;
    max-width: var(--container-max);
    z-index: 1;
    position: relative;
    background: transparent;
    color: var(--text-primary);
}

.global-flash {
    padding: 12px 20px;
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    font-size: 0.875rem;
    animation: fadeIn 0.3s ease;
}

.global-flash-success {
    background: rgba(34, 197, 94, 0.15);
    color: var(--accent-success);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.global-flash-error {
    background: rgba(239, 68, 68, 0.12);
    color: var(--accent-danger);
    border: 1px solid rgba(239, 68, 68, 0.25);
}

/* ========== Auth (Login / Register) ========== */
.auth-page {
    max-width: 420px;
    margin: 0 auto;
    padding: 40px 24px 32px;
}

.auth-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    box-shadow: var(--shadow-premium);
}

.auth-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    margin: 0 0 6px;
    letter-spacing: -0.02em;
}

.auth-subtitle {
    font-size: 0.9375rem;
    color: var(--text-muted);
    text-align: center;
    margin: 0 0 24px;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.auth-field label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
}

.auth-input {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    font-size: 1rem;
    font-family: var(--font-family);
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color var(--transition-fast), background var(--transition-fast);
    box-sizing: border-box;
}

.auth-input::placeholder {
    color: var(--text-muted);
    opacity: 0.8;
}

.auth-input:hover {
    border-color: var(--border-color-hover);
}

.auth-input:focus {
    border-color: var(--accent-primary);
    background: var(--bg-input-focus);
    box-shadow: 0 0 0 2px var(--accent-primary-glow);
}

.auth-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.auth-field-row {
    flex-direction: row;
    align-items: center;
}

.auth-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin: 0;
}

.auth-checkbox {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--accent-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.auth-submit-btn {
    height: 48px;
    padding: 0 24px;
    font-size: 1rem;
    font-weight: 600;
    color: #0a0a0c;
    background: var(--gradient-primary);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: opacity var(--transition-fast), box-shadow var(--transition-fast);
    margin-top: 4px;
}

.auth-submit-btn:hover {
    opacity: 0.95;
    box-shadow: var(--shadow-glow);
}

.auth-submit-btn:active {
    opacity: 0.9;
}

.auth-footer {
    text-align: center;
    margin: 24px 0 0;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.auth-link {
    color: var(--accent-primary);
    font-weight: 600;
    text-decoration: none;
}

.auth-link:hover {
    text-decoration: underline;
}

.auth-alert {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    margin-bottom: 4px;
    font-size: 0.875rem;
}

.auth-alert-success {
    background: rgba(34, 197, 94, 0.15);
    color: var(--accent-success);
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.auth-alert-error {
    background: rgba(239, 68, 68, 0.12);
    color: var(--accent-danger);
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    flex-wrap: wrap;
    gap: 16px;
}

.page-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.page-subtitle {
    color: var(--text-muted);
    font-size: 0.9375rem;
    margin: 0;
}

/* Cards */
.card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-premium);
    transition: all var(--transition-normal);
}

.card:hover {
    border-color: var(--border-color-hover);
    transform: translateY(-2px);
}

.card-glow {
    box-shadow: var(--shadow-glow);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.card-title {
    font-size: 1.125rem;
    font-weight: 600;
}

/* Swap Card */
.swap-card {
    max-width: 480px;
    margin: 0 auto;
    background: var(--gradient-card), var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: 24px;
    box-shadow: var(--shadow-premium), 0 0 0 1px rgba(212, 165, 99, 0.05);
    backdrop-filter: var(--glass-blur);
}

[data-theme="light"] .swap-card {
    box-shadow: var(--shadow-premium), 0 0 0 1px rgba(184, 134, 11, 0.06);
}

.swap-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.swap-title {
    font-size: 1.25rem;
    font-weight: 600;
}

.swap-settings-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.swap-settings-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
    border-color: var(--border-color-hover);
}

.token-input-container {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 4px;
    transition: all var(--transition-fast);
}

.token-input-container:focus-within {
    border-color: var(--accent-primary);
    background: var(--bg-input-focus);
}

.token-input-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.token-input-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.token-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 1.75rem;
    font-weight: 500;
    color: var(--text-primary);
    font-family: var(--font-mono);
}

.token-input::placeholder {
    color: var(--text-muted);
}

.token-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    padding: 6px 12px 6px 6px;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.token-selector:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-color-hover);
}

.token-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-secondary);
}

.token-symbol {
    font-weight: 600;
    font-size: 1rem;
}

.swap-arrow-container {
    display: flex;
    justify-content: center;
    margin: -8px 0;
    position: relative;
    z-index: 10;
}

.swap-arrow-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: 4px solid var(--bg-input);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.swap-arrow-btn:hover {
    background: var(--accent-primary);
    color: var(--text-primary);
    transform: rotate(180deg);
}

.swap-details {
    background: var(--bg-input);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    margin: 16px 0;
}

.swap-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 0.875rem;
}

.swap-detail-row:not(:last-child) {
    border-bottom: 1px solid var(--border-color);
}

.swap-detail-label {
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.swap-detail-value {
    color: var(--text-primary);
    font-weight: 500;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
}

.btn-primary {
    background: var(--gradient-primary);
    color: var(--text-primary);
    box-shadow: var(--shadow-glow);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 60px var(--accent-primary-glow);
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover {
    background: var(--bg-card-hover);
    border-color: var(--border-color-hover);
}

.btn-success {
    background: var(--gradient-success);
    color: var(--text-primary);
    box-shadow: var(--shadow-glow-success);
}

.btn-danger {
    background: var(--accent-danger);
    color: var(--text-primary);
}

.btn-lg {
    padding: 16px 32px;
    font-size: 1.125rem;
    border-radius: var(--radius-lg);
}

.btn-full {
    width: 100%;
}

.btn-connect {
    background: var(--gradient-primary);
    color: var(--text-primary);
    padding: 10px 20px;
    border-radius: var(--radius-full);
    font-weight: 600;
}

/* Stats Cards */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px;
    transition: all var(--transition-normal);
}

.stat-card:hover {
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-glow);
}

.stat-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    border-radius: var(--radius-md);
    font-size: 1.5rem;
    margin-bottom: 16px;
}

.stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 4px;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.stat-change {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.875rem;
    font-weight: 500;
    margin-left: 8px;
}

.stat-change.positive {
    color: var(--accent-success);
}

.stat-change.negative {
    color: var(--accent-danger);
}

/* Tables */
.table-container {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-color);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 16px 20px;
    text-align: left;
}

.data-table th {
    background: var(--bg-tertiary);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.data-table td {
    background: var(--bg-card);
    border-top: 1px solid var(--border-color);
    font-size: 0.875rem;
}

.data-table tr:hover td {
    background: var(--bg-card-hover);
}

.token-pair {
    display: flex;
    align-items: center;
    gap: 12px;
}

.token-pair-icons {
    display: flex;
}

.token-pair-icons img {
    width: 32px;
    color: var(--accent-primary);
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

.btn-icon-text {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.btn-icon-text:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent-primary);
}

.chain-badge-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.875rem;
}

.btn-connect-premium {
    padding: 10px 24px;
    background: transparent;
    border: 1px solid var(--accent-primary);
    border-radius: 24px;
    color: var(--text-primary);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.2);
}

.btn-connect-premium:hover {
    background: rgba(0, 255, 255, 0.1);
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.4);
    transform: translateY(-1px);
}

/* Chain Selector */
.chain-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    padding: 8px 16px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.chain-selector:hover {
    border-color: var(--border-color-hover);
}

.chain-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

.chain-name {
    font-weight: 500;
    font-size: 0.875rem;
}

/* Modals */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 420px;
    max-height: 85vh;
    overflow: hidden;
    transform: translateY(20px);
    transition: transform var(--transition-normal);
}

.modal-overlay.active .modal {
    transform: translateY(0);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}

.modal-title {
    font-size: 1.125rem;
    font-weight: 600;
}

.modal-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: none;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.modal-close:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.modal-body {
    padding: 24px;
    max-height: 60vh;
    overflow-y: auto;
}

/* Modal header: title centered, close on side */
.modal-header--center {
    position: relative;
    justify-content: center;
    padding-inline: 48px;
}

.modal-header--center .modal-close {
    position: absolute;
    inset-inline-end: 16px;
    top: 50%;
    transform: translateY(-50%);
}

/* ----- Network selection modal ----- */
.modal--network .modal-body--network {
    padding: 20px 24px 24px;
    max-height: 70vh;
}

.network-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.network-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-weight: 500;
    text-align: start;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    min-height: 56px;
    overflow: hidden;
}

.network-card:hover {
    border-color: var(--border-color-hover);
    background: var(--bg-card-hover);
}

.network-card--active {
    border-color: var(--accent-primary);
    background: rgba(212, 165, 99, 0.08);
    box-shadow: 0 0 0 1px var(--accent-primary);
}

.network-card--active:hover {
    background: rgba(212, 165, 99, 0.12);
}

.network-card__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.network-card__icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.network-card__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    word-break: break-word;
    white-space: normal;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
}

.network-card__check {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--accent-success);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 50%;
}

.network-card--active .network-card__check {
    display: inline-flex;
}

@media (max-width: 420px) {
    .modal--network {
        max-width: 96vw !important;
    }

    .network-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .network-card {
        min-height: 52px;
        padding: 12px 14px;
    }
}

/* Token List */
.token-search {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    font-size: 1rem;
    color: var(--text-primary);
    outline: none;
    margin-bottom: 16px;
    transition: all var(--transition-fast);
}

.token-search:focus {
    border-color: var(--accent-primary);
}

.token-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.token-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.token-list-item:hover {
    background: var(--bg-tertiary);
}

.token-list-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-tertiary);
}

.token-list-info {
    flex: 1;
}

.token-list-symbol {
    font-weight: 600;
    font-size: 1rem;
}

.token-list-name {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.token-list-balance {
    text-align: right;
    font-family: var(--font-mono);
}

/* Wallet Button */
.wallet-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    padding: 8px 16px 8px 8px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.wallet-btn:hover {
    border-color: var(--accent-primary);
}

.wallet-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--gradient-primary);
}

.wallet-address {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    font-weight: 500;
}

/* Price Change Badge */
.price-change {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
}

.price-change.positive {
    background: rgba(16, 185, 129, 0.15);
    color: var(--accent-success);
}

.price-change.negative {
    background: rgba(239, 68, 68, 0.15);
    color: var(--accent-danger);
}

/* Transaction Toast */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.toast {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    min-width: 320px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    animation: slideIn var(--transition-normal) ease;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.toast-icon.pending {
    background: rgba(245, 158, 11, 0.15);
    color: var(--accent-warning);
}

.toast-icon.success {
    background: rgba(16, 185, 129, 0.15);
    color: var(--accent-success);
}

.toast-icon.error {
    background: rgba(239, 68, 68, 0.15);
    color: var(--accent-danger);
}

.toast-content {
    flex: 1;
}

.toast-title {
    font-weight: 600;
    margin-bottom: 4px;
}

.toast-message {
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* Spinner */
.spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 48px 24px;
}

.empty-state-icon {
    font-size: 4rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.empty-state-text {
    color: var(--text-muted);
    margin-bottom: 24px;
}

/* Mobile Menu Toggle Button - واضح على الخلفية الداكنة */
.mobile-menu-toggle {
    display: none;
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 10002;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    background: var(--bg-tertiary);
    border: 1px solid var(--accent-primary);
    border-radius: 12px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.35rem;
    line-height: 1;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    color: var(--accent-primary);
    visibility: visible;
    opacity: 1;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.mobile-menu-toggle:hover {
    background: var(--nav-hover-bg);
    border-color: var(--accent-primary-hover);
    color: var(--accent-primary-hover);
    box-shadow: 0 0 16px var(--accent-primary-glow);
}

.mobile-menu-toggle .mobile-menu-icon {
    display: block;
    font-size: 1.35rem;
    line-height: 1;
}

[dir="rtl"] .mobile-menu-toggle {
    left: auto;
    right: 16px;
}

/* Sidebar Overlay - بدون بلور، لون فقط حتى يظهر السلايدر واضحاً */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.sidebar-overlay.active {
    display: block;
    opacity: 1;
}

/* Responsive - موبايل */
@media (max-width: 1024px) {
    .mobile-menu-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .main-content {
        margin-left: 0;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .header {
        padding: 0 16px;
        padding-left: 60px;
    }

    [dir="rtl"] .header {
        padding-right: 60px;
        padding-left: 16px;
    }

    .page-content {
        padding: 16px;
        max-width: 100%;
        overflow-x: hidden;
    }
}

@media (max-width: 768px) {
    .mobile-menu-toggle {
        top: 12px;
        left: 12px;
        width: 36px;
        height: 36px;
        font-size: 1.125rem;
    }

    [dir="rtl"] .mobile-menu-toggle {
        right: 12px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .swap-card {
        padding: 16px;
    }

    .token-input {
        font-size: 1.5rem;
    }

    .header-left {
        display: none;
    }

    .header {
        padding-left: 56px;
    }

    [dir="rtl"] .header {
        padding-right: 56px;
        padding-left: 12px;
    }

    .main-content {
        margin-left: 0;
        padding: 0;
    }

    .page-content {
        padding: 12px;
        max-width: 100%;
        overflow-x: hidden;
    }
}

/* Prevent horizontal scroll (global) */
body {
    overflow-x: hidden;
    max-width: 100vw;
}

.app-container {
    max-width: 100vw;
    overflow-x: hidden;
}

@media (max-width: 768px) {

    /* Token Selector - Tablet */
    .token-selector {
        width: 100%;
        font-size: 0.875rem;
        padding: 8px 10px 8px 8px;
        justify-content: space-between;
    }

    .token-selector .token-icon {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
    }

    .token-selector .token-symbol {
        font-size: 0.875rem;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    .mobile-menu-toggle {
        top: 10px;
        left: 10px;
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    [dir="rtl"] .mobile-menu-toggle {
        right: 10px;
    }

    .page-content {
        padding: 8px;
    }

    .header {
        padding: 0 8px;
        padding-left: 50px;
        height: 56px;
    }

    [dir="rtl"] .header {
        padding-right: 50px;
        padding-left: 8px;
    }

    /* Token Selector - Mobile */
    .token-selector {
        width: 100%;
        font-size: 0.875rem;
        padding: 10px 12px;
    }

    .token-selector .token-icon {
        width: 20px;
        height: 20px;
    }

    .token-selector .token-symbol {
        font-size: 0.8rem;
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Modal - Mobile */
    .modal {
        max-width: 95vw !important;
        margin: 10px;
        max-height: 90vh;
    }

    .modal-body {
        padding: 12px !important;
        max-height: calc(90vh - 100px);
        overflow-y: auto;
    }

    .modal-header {
        padding: 12px !important;
    }

    .modal-title {
        font-size: 1rem !important;
    }
}

/* Utilities */
.text-primary {
    color: var(--text-primary);
}

.text-secondary {
    color: var(--text-secondary);
}

.text-muted {
    color: var(--text-muted);
}

.text-success {
    color: var(--accent-success);
}

.text-danger {
    color: var(--accent-danger);
}

.text-warning {
    color: var(--accent-warning);
}

.bg-primary {
    background: var(--bg-primary);
}

.bg-secondary {
    background: var(--bg-secondary);
}

.bg-card {
    background: var(--bg-card);
}

.font-mono {
    font-family: var(--font-mono);
}

/* ========== Performance Optimizations ========== */
/* GPU acceleration for smooth animations */
.card,
.btn,
.nav-item,
.token-selector,
.swap-card {
    will-change: transform;
    transform: translateZ(0);
}

/* Smooth transitions */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Optimize image rendering */
img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Reduce repaints */
.modal-overlay,
.app-sidebar,
.header {
    contain: layout style paint;
}

/* ========== Enhanced Animations ========== */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

/* Animation utilities */
.animate-fade-in {
    animation: fadeIn 0.3s ease;
}

.animate-fade-in-up {
    animation: fadeInUp 0.4s ease;
}

.animate-fade-in-down {
    animation: fadeInDown 0.4s ease;
}

.animate-slide-in-right {
    animation: slideInRight 0.3s ease;
}

.animate-slide-in-left {
    animation: slideInLeft 0.3s ease;
}

.animate-scale-in {
    animation: scaleIn 0.3s ease;
}

.animate-pulse {
    animation: pulse 2s ease-in-out infinite;
}

/* ========== Loading Skeletons ========== */
.skeleton {
    background: linear-gradient(90deg,
            var(--bg-tertiary) 0%,
            var(--bg-card) 50%,
            var(--bg-tertiary) 100%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: var(--radius-md);
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.skeleton-text {
    height: 1em;
    margin-bottom: 0.5em;
}

.skeleton-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.skeleton-card {
    padding: 20px;
    border-radius: var(--radius-lg);
}

/* ========== Improved Responsive Design ========== */
@media (max-width: 1200px) {
    .container-max {
        max-width: 100%;
        padding: 0 16px;
    }
}

@media (max-width: 768px) {
    :root {
        font-size: 14px;
    }

    .page-content {
        padding: 16px;
    }

    .card {
        padding: 16px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .wallet-page-container {
        flex-direction: column;
    }

    .wallet-sidebar {
        width: 100%;
        position: relative;
        top: 0;
    }
}

@media (max-width: 480px) {
    :root {
        font-size: 13px;
    }

    .swap-card {
        padding: 12px;
    }

    .token-input {
        font-size: 1.25rem;
    }

    .btn {
        padding: 10px 16px;
        font-size: 0.875rem;
    }
}

/* ========== Print Styles ========== */
@media print {

    .app-sidebar,
    .mobile-menu-toggle,
    .sidebar-overlay,
    .header,
    .btn,
    .modal-overlay {
        display: none !important;
    }

    .page-content {
        padding: 0;
        max-width: 100%;
    }
}

/* ========== Reduced Motion ========== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========== High Contrast Mode ========== */
@media (prefers-contrast: high) {
    :root {
        --border-color: rgba(212, 165, 99, 0.6);
        --border-color-hover: rgba(212, 165, 99, 0.9);
    }
}

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-2 {
    gap: 8px;
}

.gap-4 {
    gap: 16px;
}

.gap-6 {
    gap: 24px;
}

.mb-2 {
    margin-bottom: 8px;
}

.mb-4 {
    margin-bottom: 16px;
}

.mb-6 {
    margin-bottom: 24px;
}

.mb-8 {
    margin-bottom: 32px;
}

.p-4 {
    padding: 16px;
}

.p-6 {
    padding: 24px;
}

.rounded-md {
    border-radius: var(--radius-md);
}

.rounded-lg {
    border-radius: var(--radius-lg);
}

.rounded-xl {
    border-radius: var(--radius-xl);
}

.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Shared layout when using dashboard header (app + dashboard layouts) */
.dashboard-body {
    background: var(--bg-primary);
    min-height: 100vh;
}

.dashboard-main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px 40px;
}

@media (max-width: 640px) {
    .dashboard-main {
        padding: 0 14px 24px;
    }
}