/* ==========================================================================
   ASH Handball — shared design system
   Loaded by every view. Page-specific <style> blocks handle layout only;
   this file owns color, elevation, and the components repeated across pages
   (header/nav, buttons, cards, inputs, badges, tables, tabs, empty states).
   ========================================================================== */

:root{
    --bg:#08090c;
    --bg-soft:#0b0d12;
    --surface:#111827;
    --surface-2:#161f2e;
    --field:#1b2534;
    --border:#232f42;
    --border-soft:rgba(255,255,255,.07);

    --text:#f7f9fc;
    --text-dim:#cbd3e1;
    --text-faint:#8b96a8;
    --text-muted:#5f6b7d;

    --accent:#22c55e;
    --accent-dark:#16a34a;
    --accent-light:#4ade80;
    --accent-glow:rgba(34,197,94,.45);
    --accent-soft:rgba(34,197,94,.14);
    --accent-border:rgba(34,197,94,.35);

    --danger:#ef4444;
    --danger-dark:#dc2626;
    --danger-soft:rgba(239,68,68,.14);

    --warning:#f59e0b;
    --warning-soft:rgba(245,158,11,.14);

    --violet:#a78bfa;
    --violet-soft:rgba(124,58,237,.18);

    --radius-sm:8px;
    --radius-md:12px;
    --radius-lg:16px;
    --radius-xl:24px;

    --shadow-sm:0 2px 10px rgba(0,0,0,.28);
    --shadow-md:0 10px 30px rgba(0,0,0,.38);
    --shadow-lg:0 24px 70px rgba(0,0,0,.5);
    --shadow-glow:0 0 0 1px var(--accent-border), 0 8px 24px var(--accent-soft);

    --ease:cubic-bezier(.4,0,.2,1);
}

/* ---------- base ---------- */

*{
    box-sizing:border-box;
}

html{
    max-width:100%;
    overflow-x:hidden;
}

body{
    background-color:var(--bg);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    position:relative;
    max-width:100%;
    overflow-x:hidden;
}

img, video{
    max-width:100%;
}

/* Generic responsive container used across app pages (planning, matches,
   stats, admin, coach...). Individual pages may override max-width. */
.wrap{
    width:100%;
}

@media (max-width:480px){
    .wrap{
        padding-left:16px !important;
        padding-right:16px !important;
    }

    h2{
        font-size:20px !important;
    }
}

/* ==========================================================================
   App-wide background — every page that loads theme.css gets this for free.
   Two layers on the fixed viewport canvas, both behind normal content
   (negative z-index paints above the body's own background-color but below
   everything else): a soft multi-tone "mesh" of glows for depth/richness,
   then a very faint dot-grid + grain texture for material quality. Kept
   deliberately low-contrast so it never competes with cards/tables/text —
   it should read as ambience, not decoration.
   ========================================================================== */

body::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:-2;
    pointer-events:none;
    background:
        radial-gradient(900px circle at 10% -10%, rgba(34,197,94,.16), transparent 55%),
        radial-gradient(760px circle at 106% -6%, rgba(56,189,248,.07), transparent 55%),
        radial-gradient(820px circle at 100% 92%, rgba(34,197,94,.10), transparent 55%),
        radial-gradient(680px circle at -6% 82%, rgba(124,58,237,.07), transparent 55%),
        radial-gradient(1500px circle at 50% 40%, transparent 45%, rgba(0,0,0,.35) 100%);
}

body::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
        radial-gradient(rgba(255,255,255,.055) 1px, transparent 1.4px);
    background-size:140px 140px, 26px 26px;
    background-position:0 0, -3px -3px;
}

@media (prefers-contrast: more){
    body::before, body::after{
        opacity:.4;
    }
}

a{ color:inherit; }

::selection{
    background:var(--accent-soft);
    color:var(--accent-light);
}

:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
    border-radius:4px;
}

/* scrollbar */
*{
    scrollbar-color:var(--border) transparent;
    scrollbar-width:thin;
}

::-webkit-scrollbar{
    width:10px;
    height:10px;
}

::-webkit-scrollbar-track{
    background:transparent;
}

::-webkit-scrollbar-thumb{
    background:var(--border);
    border-radius:10px;
    border:2px solid transparent;
    background-clip:padding-box;
}

::-webkit-scrollbar-thumb:hover{
    background:var(--accent-dark);
    background-clip:padding-box;
}

/* ---------- header / nav (chat, planning, admin, coach) ---------- */

header{
    background:rgba(11,13,18,.82);
    backdrop-filter:blur(18px) saturate(160%);
    -webkit-backdrop-filter:blur(18px) saturate(160%);
    border-bottom:1px solid var(--border-soft);
    box-shadow:0 1px 0 rgba(255,255,255,.02), 0 12px 30px rgba(0,0,0,.25);
}

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

.logo img{
    box-shadow:0 0 0 2px var(--border-soft), 0 4px 14px rgba(0,0,0,.4);
}

.logo h1{
    color:var(--accent);
    letter-spacing:.3px;
    background:linear-gradient(135deg,var(--accent-light),var(--accent));
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

.main-nav a{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:var(--text-dim);
    font-size:14px;
    font-weight:600;
    text-decoration:none;
    padding:9px 15px;
    border-radius:999px;
    white-space:nowrap;
    transition:color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}

.main-nav a:hover{
    color:var(--text);
    background:rgba(255,255,255,.06);
}

.nav-ico{
    display:inline-flex;
    width:15px;
    height:15px;
    flex-shrink:0;
    opacity:.85;
}

.nav-ico svg{
    width:100%;
    height:100%;
}

.main-nav a.active .nav-ico{
    opacity:1;
}

.main-nav a.active{
    color:#06170d;
    background:linear-gradient(135deg,var(--accent),var(--accent-dark));
    box-shadow:0 6px 16px rgba(34,197,94,.3), inset 0 1px 0 rgba(255,255,255,.2);
}

.badge{
    background:var(--field);
    color:var(--accent-light);
    border:1px solid var(--border-soft);
    font-weight:700;
    letter-spacing:.3px;
}

/* ---------- buttons ---------- */

.btn{
    border:none;
    background:linear-gradient(135deg,var(--accent),var(--accent-dark));
    color:#06170d;
    font-weight:700;
    letter-spacing:.2px;
    cursor:pointer;
    box-shadow:0 6px 16px rgba(34,197,94,.25), inset 0 1px 0 rgba(255,255,255,.25);
    transition:transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease);
}

.btn:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(34,197,94,.35), inset 0 1px 0 rgba(255,255,255,.25);
    filter:brightness(1.05);
}

.btn:active{
    transform:translateY(0);
    box-shadow:0 4px 10px rgba(34,197,94,.3);
}

.btn:disabled{
    opacity:.5;
    cursor:not-allowed;
    transform:none;
    filter:none;
}

.btn-danger{
    background:linear-gradient(135deg,#f87171,var(--danger-dark));
    color:#2a0a0a;
    box-shadow:0 6px 16px rgba(239,68,68,.25), inset 0 1px 0 rgba(255,255,255,.25);
}

.btn-danger:hover{
    box-shadow:0 10px 24px rgba(239,68,68,.35), inset 0 1px 0 rgba(255,255,255,.25);
}

.btn-stop{
    background:var(--field);
    color:var(--text);
    box-shadow:none;
}

.btn-stop:hover{
    background:var(--surface-2);
    box-shadow:none;
    filter:none;
}

.btn-start{
    background:linear-gradient(135deg,#f87171,var(--danger-dark));
    color:white;
    box-shadow:0 6px 20px rgba(220,38,38,.35), inset 0 1px 0 rgba(255,255,255,.2);
}

.btn-start:hover{
    box-shadow:0 10px 28px rgba(220,38,38,.45), inset 0 1px 0 rgba(255,255,255,.2);
}

/* ---------- cards ---------- */

.card{
    background:linear-gradient(180deg, var(--surface), var(--bg-soft));
    border:1px solid var(--border-soft);
    box-shadow:var(--shadow-sm);
    transition:box-shadow .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}

.card:hover{
    border-color:var(--border);
    box-shadow:var(--shadow-md);
}

.session{
    background:linear-gradient(180deg, var(--surface), var(--bg-soft));
    border:1px solid var(--border-soft);
    box-shadow:var(--shadow-sm);
    transition:box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}

.session:hover{
    transform:translateY(-2px);
    box-shadow:var(--shadow-md);
    border-color:var(--border);
}

/* ---------- inputs ---------- */

input,
select,
textarea{
    background:var(--field);
    color:var(--text);
    border:1px solid transparent;
    transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}

input::placeholder,
textarea::placeholder{
    color:var(--text-muted);
}

input:hover,
select:hover,
textarea:hover{
    background:var(--surface-2);
}

input:focus,
select:focus,
textarea:focus{
    outline:none;
    border-color:var(--accent);
    background:var(--surface-2);
    box-shadow:0 0 0 3px var(--accent-soft);
}

/* ---------- status pills / tags / badges ---------- */

.status-tag,
.status-btn,
.role-tag,
.category-tag{
    border:1px solid transparent;
}

.status-present,
input:checked + .status-btn.present{
    background:var(--accent-soft) !important;
    color:var(--accent-light) !important;
    border-color:var(--accent-border);
}

.status-late,
input:checked + .status-btn.late{
    background:var(--warning-soft) !important;
    color:#fbbf24 !important;
    border-color:rgba(245,158,11,.35);
}

.status-absent,
input:checked + .status-btn.absent{
    background:var(--danger-soft) !important;
    color:#f87171 !important;
    border-color:rgba(239,68,68,.35);
}

.role-admin{ background:var(--violet-soft); color:var(--violet); border-color:rgba(124,58,237,.35); }
.role-coach{ background:var(--accent-soft); color:var(--accent-light); border-color:var(--accent-border); }
.role-player{ background:var(--field); color:var(--text-faint); border-color:var(--border-soft); }
.role-finance{ background:var(--warning-soft); color:var(--warning); border-color:rgba(245,158,11,.35); }
.role-parent{ background:rgba(56,189,248,.14); color:#38bdf8; border-color:rgba(56,189,248,.35); }
.role-user{ background:rgba(148,163,184,.14); color:#94a3b8; border-color:rgba(148,163,184,.35); }
.role-administration{ background:rgba(244,114,182,.14); color:#f472b6; border-color:rgba(244,114,182,.35); }

.category-tag{
    background:var(--field);
    color:var(--accent-light);
    border-color:var(--border-soft);
}

.status-pill{
    border:1px solid transparent;
}

.status-live{
    background:var(--danger-soft);
    color:#f87171;
    border-color:rgba(220,38,38,.4);
    box-shadow:0 0 20px rgba(220,38,38,.15);
}

.status-off{
    background:rgba(107,114,128,.12);
    color:var(--text-faint);
    border-color:var(--border-soft);
}

/* ---------- tables ---------- */

table{
    border-collapse:separate;
    border-spacing:0;
}

th{
    color:var(--text-faint);
    letter-spacing:.6px;
    border-bottom:1px solid var(--border-soft);
}

td{
    border-bottom:1px solid var(--border-soft);
    transition:background .15s var(--ease);
}

tbody tr:hover td{
    background:rgba(255,255,255,.02);
}

/* ---------- tabs ---------- */

.tab-btn{
    background:var(--field);
    color:var(--text-faint);
    transition:all .2s var(--ease);
}

.tab-btn:hover{
    color:var(--text);
}

.tab-btn.active{
    background:linear-gradient(135deg,var(--accent),var(--accent-dark));
    color:#06170d;
    box-shadow:0 6px 16px rgba(34,197,94,.3);
}

.cat-switch a{
    background:var(--field);
    color:var(--text-faint);
    transition:all .2s var(--ease);
    border:1px solid transparent;
}

.cat-switch a:hover{
    color:var(--text);
    border-color:var(--border);
}

.cat-switch a.active{
    background:linear-gradient(135deg,var(--accent),var(--accent-dark));
    color:#06170d;
    box-shadow:0 6px 16px rgba(34,197,94,.3);
}

/* ---------- misc shared components ---------- */

.link-btn{
    background:var(--field);
    color:var(--accent-light);
    transition:all .2s var(--ease);
    border:1px solid transparent;
}

.link-btn:hover{
    background:linear-gradient(135deg,var(--accent),var(--accent-dark));
    color:#06170d;
    border-color:transparent;
}

.empty{
    background:linear-gradient(180deg, var(--surface), var(--bg-soft));
    border:1px dashed var(--border);
    color:var(--text-faint);
}

.empty-icon{
    width:44px;
    height:44px;
    margin:0 auto 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:var(--field);
    border:1px solid var(--border-soft);
    color:var(--text-muted);
}

.empty-icon svg{
    width:22px;
    height:22px;
}

/* ---------- motion & feedback utilities (shared across every page) ---------- */

/* Scroll-reveal: add `.reveal` to any element, optionally with an inline
   `style="--d:N"` to stagger a group. JS toggles `.visible` via
   IntersectionObserver (see partials/header.ejs / each page's own script);
   a page that never wires the observer still shows content because there's
   no default JS requirement baked into markup expectations. */
.reveal{
    opacity:0;
    transform:translateY(24px);
    transition:opacity .6s var(--ease), transform .6s var(--ease);
    transition-delay:calc(var(--d, 0) * 80ms);
}

.reveal.visible{
    opacity:1;
    transform:translateY(0);
}

/* Entrance pop for a single container on load (auth cards, dialogs...). */
.rise-in{
    animation:themeRiseIn .5s var(--ease);
}

@keyframes themeRiseIn{
    from{ opacity:0; transform:translateY(14px); }
    to{ opacity:1; transform:translateY(0); }
}

@media(prefers-reduced-motion: reduce){
    .reveal, .rise-in, .skeleton{
        opacity:1 !important;
        transform:none !important;
        animation:none !important;
        transition:none !important;
    }
}

/* Loading placeholders: <div class="skeleton" style="width:...;height:..."></div> */
.skeleton{
    position:relative;
    overflow:hidden;
    border-radius:var(--radius-sm);
    background:var(--field);
    isolation:isolate;
}

.skeleton::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.06) 50%, transparent 70%);
    animation:skeletonShimmer 1.4s ease-in-out infinite;
}

@keyframes skeletonShimmer{
    from{ transform:translateX(-100%); }
    to{ transform:translateX(100%); }
}

.skeleton-text{
    height:14px;
    border-radius:6px;
    margin-bottom:8px;
}

.skeleton-circle{
    border-radius:50%;
}

/* Circular ghost icon button — notification bells, close/toggle actions. */
.icon-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border-radius:50%;
    background:var(--field);
    border:1px solid var(--border-soft);
    color:var(--text-dim);
    cursor:pointer;
    flex-shrink:0;
    transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease), transform .18s var(--ease);
}

.icon-btn svg{
    width:17px;
    height:17px;
}

.icon-btn:hover{
    background:var(--surface-2);
    border-color:var(--border);
    color:var(--text);
}

.icon-btn:active{
    transform:scale(.94);
}

.icon-btn.active{
    background:var(--accent-soft);
    border-color:var(--accent-border);
    color:var(--accent-light);
}

/* Lightweight toast — fixed-position status message. Reuses .toast-title/
   .toast-body/.toast-link naming already established by chat.ejs so any
   page can drop in a consistent success/error notice. */
.toast{
    position:fixed;
    right:20px;
    bottom:20px;
    max-width:340px;
    background:linear-gradient(180deg, var(--surface-2), var(--surface));
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
    padding:16px 18px;
    z-index:500;
    transform:translateY(16px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}

.toast.visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    pointer-events:auto;
}

.toast-title{
    font-weight:700;
    font-size:13.5px;
    margin-bottom:4px;
    color:var(--text);
}

.toast-body{
    font-size:13px;
    color:var(--text-faint);
    line-height:1.5;
}

.toast-link{
    display:inline-block;
    margin-top:8px;
    color:var(--accent-light);
    font-weight:700;
    font-size:13px;
    text-decoration:none;
}

.toast.toast-danger{
    border-color:rgba(220,38,38,.4);
    box-shadow:0 0 0 1px rgba(220,38,38,.15), var(--shadow-lg);
}

.toast.toast-success{
    border-color:var(--accent-border);
    box-shadow:0 0 0 1px var(--accent-soft), var(--shadow-lg);
}

/* ---------- language toggle (English / Tunisian Arabic) ---------- */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap');

html[dir="rtl"] *{
    font-family:'Tajawal', sans-serif;
}

html[dir="rtl"] .section-eyebrow,
html[dir="rtl"] .hero-badge,
html[dir="rtl"] .logo span,
html[dir="rtl"] .badge,
html[dir="rtl"] .status-tag,
html[dir="rtl"] .category-tag{
    letter-spacing:normal;
}

.lang-btn{
    background:var(--field);
    color:var(--text-dim);
    border:1px solid var(--border-soft);
    padding:10px 18px;
    border-radius:var(--radius-md);
    font-weight:700;
    font-size:14px;
    cursor:pointer;
    transition:all .18s var(--ease);
}

.lang-btn:hover{
    color:var(--text);
    border-color:var(--border);
}

/* ---------- language dropdown switcher (EN / FR / Tunisian Arabic) ---------- */

.lang-switch{
    position:relative;
}

.lang-switch-btn{
    display:flex;
    align-items:center;
    gap:6px;
    background:var(--field);
    color:var(--text-dim);
    border:1px solid var(--border-soft);
    padding:9px 14px;
    border-radius:var(--radius-md);
    font-weight:700;
    font-size:13px;
    letter-spacing:.2px;
    cursor:pointer;
    transition:all .18s var(--ease);
    white-space:nowrap;
}

.lang-switch-btn:hover{
    color:var(--text);
    border-color:var(--border);
}

.lang-switch-btn .chev{
    font-size:10px;
    opacity:.7;
    transition:transform .18s var(--ease);
}

.lang-switch.open .lang-switch-btn .chev{
    transform:rotate(180deg);
}

.lang-switch-menu{
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    min-width:150px;
    background:linear-gradient(180deg, var(--surface-2), var(--surface));
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-lg);
    padding:6px;
    display:none;
    flex-direction:column;
    gap:2px;
    z-index:200;
}

html[dir="rtl"] .lang-switch-menu{
    right:auto;
    left:0;
}

.lang-switch.open .lang-switch-menu{
    display:flex;
}

.lang-switch-menu button{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    background:none;
    border:none;
    color:var(--text-dim);
    padding:9px 12px;
    border-radius:8px;
    font-size:13.5px;
    font-weight:600;
    text-align:left;
    cursor:pointer;
    transition:background .15s var(--ease), color .15s var(--ease);
}

html[dir="rtl"] .lang-switch-menu button{
    text-align:right;
}

.lang-switch-menu button:hover{
    background:var(--field);
    color:var(--text);
}

.lang-switch-menu button.active{
    background:var(--accent-soft);
    color:var(--accent-light);
}

.lang-switch-menu button.active::after{
    content:"✓";
    font-weight:700;
}

/* ==========================================================================
   Dismissible "get the Android app" banner — shared by every authenticated
   page via views/partials/header.ejs, shown only to Android browsers that
   aren't already the Capacitor app itself (see the script at the bottom of
   that partial).
   ========================================================================== */

.app-banner{
    background:linear-gradient(135deg,var(--accent),var(--accent-dark));
    color:#06170d;
}

.app-banner[hidden]{display:none;}

.app-banner-inner{
    max-width:1180px;
    margin:0 auto;
    padding:10px 20px;
    display:flex;
    align-items:center;
    gap:12px;
}

.app-banner-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    border-radius:9px;
    background:rgba(6,23,13,.14);
    flex-shrink:0;
}

.app-banner-icon svg{width:17px;height:17px;}

.app-banner-text{
    display:flex;
    flex-direction:column;
    line-height:1.25;
    min-width:0;
    flex:1;
}

.app-banner-text strong{font-size:13px;font-weight:700;}
.app-banner-text span{font-size:11.5px;opacity:.82;}

.app-banner-cta{
    flex-shrink:0;
    background:rgba(6,23,13,.14);
    color:#06170d;
    text-decoration:none;
    font-size:12.5px;
    font-weight:700;
    padding:7px 14px;
    border-radius:20px;
    transition:background .15s var(--ease);
}

.app-banner-cta:hover{background:rgba(6,23,13,.24);}

.app-banner-close{
    display:flex;
    align-items:center;
    justify-content:center;
    width:26px;
    height:26px;
    flex-shrink:0;
    background:none;
    border:none;
    color:#06170d;
    opacity:.7;
    cursor:pointer;
    border-radius:50%;
    transition:background .15s var(--ease), opacity .15s var(--ease);
}

.app-banner-close:hover{background:rgba(6,23,13,.14);opacity:1;}
.app-banner-close svg{width:15px;height:15px;display:block;}

@media(max-width:480px){
    .app-banner-text span{display:none;}
}

/* ==========================================================================
   Responsive app header / nav — shared by every authenticated page via
   views/partials/header.ejs. Collapses into a hamburger-triggered drawer
   below --nav-breakpoint.
   ========================================================================== */

.site-header{
    position:sticky;
    top:0;
    z-index:100;
    transition:box-shadow .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}

.site-header.scrolled{
    background:rgba(9,11,15,.92);
    box-shadow:0 1px 0 rgba(255,255,255,.03), 0 16px 40px rgba(0,0,0,.4);
}

.header-inner{
    padding:12px 25px;
    display:flex;
    align-items:center;
    gap:18px;
}

.site-header .logo{
    display:flex;
    align-items:center;
    gap:11px;
    flex-shrink:0;
    text-decoration:none;
    color:inherit;
}

.site-header .logo img{
    width:42px;
    height:42px;
    border-radius:50%;
    object-fit:cover;
    box-shadow:0 0 0 2px var(--border-soft), 0 4px 14px rgba(0,0,0,.4);
    transition:box-shadow .2s var(--ease);
}

.site-header .logo:hover img{
    box-shadow:0 0 0 2px var(--accent-border), 0 4px 14px rgba(0,0,0,.4);
}

.site-header .logo-text{
    font-size:17px;
    font-weight:700;
    white-space:nowrap;
    color:var(--accent);
    background:linear-gradient(135deg,var(--accent-light),var(--accent));
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

/* ---------- nav links (desktop: inline row / mobile: collapsible drawer) ---------- */

.nav-drawer{
    flex:1;
    min-width:0;
    display:flex;
}

.site-header .main-nav{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
    row-gap:8px;
}

/* ---------- right-side cluster: notify bell, account menu, mobile toggle ---------- */

.header-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
    margin-left:auto;
}

.nav-toggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:5px;
    width:40px;
    height:40px;
    border-radius:10px;
    background:var(--field);
    border:1px solid var(--border-soft);
    cursor:pointer;
    flex-shrink:0;
    transition:background .18s var(--ease), border-color .18s var(--ease);
}

.nav-toggle:hover{
    background:var(--surface-2);
    border-color:var(--border);
}

.nav-toggle span{
    display:block;
    width:18px;
    height:2px;
    border-radius:2px;
    background:var(--text-dim);
    transition:transform .22s var(--ease), opacity .22s var(--ease);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2){
    opacity:0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
}

.nav-overlay{
    position:fixed;
    inset:0;
    background:rgba(3,4,6,.55);
    backdrop-filter:blur(2px);
    z-index:90;
    opacity:0;
    pointer-events:none;
    transition:opacity .25s var(--ease);
}

.nav-overlay.visible{
    opacity:1;
    pointer-events:auto;
}

/* ---------- account menu (avatar trigger + dropdown) ---------- */

.avatar{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:50%;
    font-size:13px;
    font-weight:700;
    color:#06170d;
    box-shadow:0 0 0 2px rgba(255,255,255,.08), 0 4px 10px rgba(0,0,0,.35);
    flex-shrink:0;
    letter-spacing:.2px;
}

.avatar-lg{
    width:48px;
    height:48px;
    font-size:16px;
}

.avatar-img{
    padding:0;
    overflow:hidden;
}

.avatar-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.account-menu{
    position:relative;
}

.account-trigger{
    display:flex;
    align-items:center;
    gap:10px;
    background:var(--field);
    border:1px solid var(--border-soft);
    border-radius:999px;
    padding:5px 12px 5px 5px;
    cursor:pointer;
    transition:background .18s var(--ease), border-color .18s var(--ease);
}

.account-trigger:hover{
    background:var(--surface-2);
    border-color:var(--border);
}

.account-menu.open .account-trigger{
    background:var(--surface-2);
    border-color:var(--accent-border);
}

.account-meta{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    line-height:1.25;
    max-width:130px;
}

.account-name{
    font-size:13px;
    font-weight:700;
    color:var(--text);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:100%;
}

.account-role{
    font-size:11px;
    color:var(--text-faint);
    text-transform:capitalize;
}

.account-trigger .chev{
    font-size:10px;
    color:var(--text-faint);
    opacity:.8;
    transition:transform .2s var(--ease);
    margin-right:2px;
}

.account-menu.open .chev{
    transform:rotate(180deg);
}

.account-dropdown{
    position:absolute;
    top:calc(100% + 12px);
    right:0;
    width:280px;
    max-width:calc(100vw - 32px);
    background:linear-gradient(180deg, var(--surface-2), var(--surface));
    border:1px solid var(--border);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
    padding:16px;
    z-index:200;
    transform-origin:top right;
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px) scale(.97);
    transition:opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
    pointer-events:none;
}

html[dir="rtl"] .account-dropdown{
    right:auto;
    left:0;
    transform-origin:top left;
}

.account-menu.open .account-dropdown{
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
    pointer-events:auto;
}

.account-dropdown-head{
    display:flex;
    align-items:center;
    gap:12px;
}

.account-dropdown-id{
    min-width:0;
}

.account-dropdown-name{
    font-size:15px;
    font-weight:700;
    color:var(--text);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.account-dropdown-email{
    font-size:12px;
    color:var(--text-faint);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    margin-top:1px;
}

.account-dropdown-tags{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
    margin-top:8px;
}

.account-dropdown-divider{
    height:1px;
    background:var(--border-soft);
    margin:14px 0;
}

.account-dropdown-section{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.account-dropdown-label{
    font-size:12px;
    font-weight:600;
    color:var(--text-faint);
}

.lang-seg{
    display:flex;
    background:var(--field);
    border:1px solid var(--border-soft);
    border-radius:999px;
    padding:3px;
    gap:2px;
}

.lang-seg button{
    background:none;
    border:none;
    color:var(--text-faint);
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.3px;
    padding:6px 11px;
    border-radius:999px;
    cursor:pointer;
    transition:background .18s var(--ease), color .18s var(--ease);
}

.lang-seg button:hover{
    color:var(--text);
}

.lang-seg button.active{
    background:linear-gradient(135deg,var(--accent),var(--accent-dark));
    color:#06170d;
    box-shadow:0 3px 10px rgba(34,197,94,.3);
}

.account-dropdown-menu{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.account-dropdown-item{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 10px;
    border-radius:10px;
    color:var(--text-dim);
    font-size:13.5px;
    font-weight:600;
    text-decoration:none;
    transition:background .15s var(--ease), color .15s var(--ease);
}

.account-dropdown-item:hover{
    background:var(--field);
    color:var(--text);
}

.account-dropdown-item-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    flex-shrink:0;
}

.account-dropdown-item-icon svg{
    width:16px;
    height:16px;
}

.account-dropdown-item.danger{
    color:#f87171;
}

.account-dropdown-item.danger:hover{
    background:var(--danger-soft);
    color:#f87171;
}

@media (max-width:900px){

    .header-actions{
        gap:8px;
    }

    .nav-toggle{
        display:flex;
    }

    .account-meta{
        display:none;
    }

    .account-trigger{
        padding:3px;
    }

    .account-trigger .chev{
        display:none;
    }

    .nav-drawer{
        position:fixed;
        top:var(--header-h, 68px);
        left:0;
        right:0;
        flex:none;
        max-height:0;
        overflow:hidden;
        background:linear-gradient(180deg, var(--surface-2), var(--bg-soft) 90%);
        border-bottom:1px solid var(--border-soft);
        box-shadow:0 20px 40px rgba(0,0,0,.4);
        z-index:95;
        transition:max-height .3s var(--ease);
    }

    .nav-drawer.open{
        max-height:calc(100vh - var(--header-h, 68px));
        overflow-y:auto;
    }

    .site-header .main-nav{
        flex-direction:column;
        align-items:stretch;
        gap:4px;
        padding:14px 18px 22px;
    }

    .site-header .main-nav a{
        padding:13px 14px;
        border-radius:12px;
    }

    .site-header .main-nav a.active{
        box-shadow:none;
    }

    .account-dropdown{
        position:fixed;
        top:var(--header-h, 68px);
        right:12px;
        left:12px;
        width:auto;
        max-width:none;
        margin-top:10px;
    }
}

@media (max-width:480px){
    .header-inner{
        padding:10px 16px;
    }

    .site-header .logo-text{
        font-size:15px;
    }

    .site-header .logo img{
        width:36px;
        height:36px;
    }

    .account-dropdown{
        right:8px;
        left:8px;
    }
}