/* fonts.css is linked directly from index.php — an @import here made it a SERIAL second
   round-trip on the render-blocking critical path. */

* {
    box-sizing: border-box;
}

:root {
    /* Light-Mode Cosmic Theme */
    --bg-color: #F3ECFB; /* Dawn periwinkle */
    --bg-gradient: linear-gradient(160deg, #E8E6FB 0%, #F3ECFB 45%, #FCEDE3 100%);
    --text-color: #2A2740;
    --text-muted: #7A7596;
    
    /* Vibrant Celestial Accents */
    --primary: #6F5FE4; /* Aurora Violet */
    --primary-hover: #5B4BD0;
    --primary-glow: rgba(111, 95, 228, 0.3);
    
    --secondary: #F4825C; /* Sunrise Coral */
    --secondary-hover: #E36A43;
    --secondary-glow: rgba(244, 130, 92, 0.3);
    
    --accent: #F4A23C; /* Solar Gold */
    --accent-hover: #E08A2A;
    --accent-glow: rgba(244, 162, 60, 0.3);

    --tertiary: #AF70A2; /* Nebula Plum — neutral gauge/meta accent (never a warning colour) */

    --success: #10b981; /* Mint / Earth */
    
    --danger: #ef4444; /* Solar Flare Red */
    --danger-hover: #dc2626;
    --danger-glow: rgba(239, 68, 68, 0.3);
    
    --card-bg: #ffffff;
    --card-glass: rgba(255, 255, 255, 0.8); /* translucent card fill so the starfield shows through */
    --card-border: #E4DEF5;
    /* Surface roles default to the established public palette. Authenticated, non-study routes
       override them below without changing the public site or immersive lesson/study surfaces. */
    --surface-raised-bg:var(--card-bg);
    --surface-base-bg:var(--card-bg);
    --surface-flush-bg:transparent;
    --surface-edge-lit:rgba(255,255,255,0.9);
    --surface-edge-shade:var(--card-border);
    --surface-shadow-raised:0 24px 60px -34px rgba(42,31,104,0.38),inset 0 1px rgba(255,255,255,0.92);
    --surface-shadow-base:0 14px 34px -30px rgba(42,31,104,0.3),inset 0 1px rgba(255,255,255,0.82);
    --surface-item-bg:rgba(111,95,228,0.055);
    --surface-item-bg-hover:rgba(255,255,255,0.78);
    --surface-item-bg-promoted:rgba(255,255,255,0.94);
    --surface-item-edge:rgba(79,62,143,0.16);
    --surface-item-edge-hover:rgba(79,62,143,0.25);
    --surface-item-keyline:rgba(111,95,228,0.32);
    --surface-item-shadow:0 10px 24px -24px rgba(40,28,91,0.48),inset 0 1px rgba(255,255,255,0.74);
    --surface-item-shadow-hover:0 15px 30px -23px rgba(40,28,91,0.42),inset 0 1px rgba(255,255,255,0.9);
    --instrument-line-cool:rgba(111,95,228,0.34);
    --instrument-line-warm:rgba(244,130,92,0.25);
    --signal-cyan:#0B7180;
    --signal-cyan-strong:#075966;
    --signal-cyan-soft:rgba(11,113,128,0.1);
    --signal-cyan-edge:rgba(11,113,128,0.31);
    --signal-cyan-glow:rgba(25,197,211,0.22);
    --nav-bg: rgba(255, 255, 255, 0.9);
    --app-header-height:70px;
    --app-content-max:1380px;
    --app-content-gutter:clamp(18px,2.4vw,36px);
    --app-content-top:24px;
    --lframe-rail-width:260px;
    --shell-aurora:linear-gradient(90deg,var(--primary),var(--secondary),var(--accent));
    --shell-glass:linear-gradient(100deg,rgba(246,243,255,0.9),rgba(255,255,255,0.78) 52%,rgba(255,245,241,0.86));
    --shell-midnight:#17142E;
    --shell-midnight-raised:#242044;
    --shell-nav-text:#2F2A48;
    --shell-nav-muted:#68627F;
    --shell-nav-line:rgba(111,95,228,0.2);
    --shell-nav-corner-width:24px;
    --shell-nav-corner-height:13px;
    --shell-nav-corner-radius:8px;
    --shell-nav-corner-cool:rgba(126,108,235,0.3);
    --shell-nav-corner-warm:rgba(244,130,92,0.21);
    --shell-nav-interface-cool:rgba(76,61,158,0.17);
    --shell-nav-interface-warm:rgba(188,83,53,0.12);
    --shell-panel:linear-gradient(145deg,rgba(255,255,255,0.9),rgba(248,245,254,0.82) 58%,rgba(255,247,243,0.78));
    --shell-subpanel:linear-gradient(145deg,rgba(255,255,255,0.78),rgba(244,241,252,0.66));
    --shell-panel-border:rgba(101,84,196,0.18);
    --shell-panel-shadow:0 28px 70px -38px rgba(35,27,78,0.46),0 8px 28px rgba(65,48,130,0.08),inset 0 1px 0 rgba(255,255,255,0.94);
    --shell-grid-line:rgba(111,95,228,0.045);

    /* Aliases for references that were previously undefined (silent fallbacks) */
    --background: #ffffff;
    --text: var(--text-color);
    --warning: #E8983F;

    /* Rounded display font for headings (self-hosted) */
    --font-display: 'Baloo 2', 'Trebuchet MS', sans-serif;

    /* Shared deep-space backdrop: soft nebula washes over a tiled constellation starfield. */
    --space-backdrop:
        radial-gradient(1000px circle at 12% 16%, rgba(111, 95, 228, 0.18), transparent 55%),
        radial-gradient(900px circle at 88% 8%, rgba(244, 162, 60, 0.16), transparent 50%),
        radial-gradient(820px circle at 72% 90%, rgba(244, 130, 92, 0.13), transparent 60%),
        url("/assets/img/constellations.svg"),
        var(--bg-gradient);
    --space-backdrop-size: 100% 100%, 100% 100%, 100% 100%, 540px 540px, 100% 100%;
    /* Nebula washes stay anchored to the viewport; the constellations scroll with the page. */
    --space-backdrop-attach: fixed, fixed, fixed, scroll, fixed;
}

::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: var(--bg-color);
}
::-webkit-scrollbar-thumb {
    background: var(--card-border);
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* html carries the same backdrop as body: iOS Safari pans the fixed layout when the software
   keyboard opens (and animates its toolbars), exposing pixels OUTSIDE body — without this they
   render as a default grey/white band above the keyboard and under the bottom toolbar. */
html{background:var(--bg-color);background-image:var(--bg-gradient);background-attachment:fixed;}

body {
    margin: 0;
    font-family: 'Nunito', sans-serif;
    background: var(--bg-color);
    /* Soft Sunrise glows over the base gradient add depth without motion or distraction. */
    background-image:
        radial-gradient(900px circle at 12% 16%, rgba(111, 95, 228, 0.10), transparent 55%),
        radial-gradient(820px circle at 88% 10%, rgba(244, 162, 60, 0.10), transparent 50%),
        var(--bg-gradient);
    background-attachment: fixed;
    color: var(--text-color);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: background 0.5s, background-image 0.5s;
    overflow-x: hidden;
}

body.session-active {
    position: fixed;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
}

body.session-active #app-root {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

body.session-active:not(.hyper-theme) {
    background-image: var(--space-backdrop);
    background-size: var(--space-backdrop-size);
    background-attachment: var(--space-backdrop-attach);
}

body.hyper-theme {
    background: #020617 !important;
    background-image: radial-gradient(circle at center, #0f172a 0%, #020617 100%) !important;
    --card-bg: rgba(15, 23, 42, 0.8);
    --card-glass: rgba(15, 23, 42, 0.55);
    --card-border: #1e293b;
    --text-muted: #94a3b8;
    --bg-color: #020617;
    --text-color: #f8fafc;
}

body.hyper-theme>header{--shell-nav-text:#F7F5FF;--shell-nav-muted:#C7C2DE;--shell-nav-corner-cool:rgba(184,174,255,0.4);--shell-nav-corner-warm:rgba(244,130,92,0.3);--shell-nav-interface-cool:rgba(205,198,255,0.2);--shell-nav-interface-warm:rgba(255,174,145,0.16);background:linear-gradient(100deg,var(--shell-midnight-raised),var(--shell-midnight) 62%,#121127);border-color:rgba(190,181,255,0.16);}

.hyper-theme .site-footer{background:rgba(2,6,23,0.4);border-top-color:#1e293b;}

body>header {
    background:
        radial-gradient(ellipse 520px 210px at 14% -75%,rgba(111,95,228,0.34),transparent 72%),
        radial-gradient(ellipse 470px 190px at 88% 165%,rgba(244,130,92,0.24),transparent 74%),
        radial-gradient(circle,rgba(111,95,228,0.13) 0.7px,transparent 1px),
        linear-gradient(105deg,rgba(230,224,255,0.82),rgba(250,247,255,0.76) 52%,rgba(255,235,227,0.8));
    background-size:auto,auto,42px 38px,auto;
    backdrop-filter:blur(24px) saturate(145%);
    -webkit-backdrop-filter:blur(24px) saturate(145%);
    border:0;
    position:sticky;
    top:0;
    z-index:100;
    width:100%;
    isolation:isolate;
    box-shadow:0 12px 32px rgba(43,33,94,0.1),inset 0 1px rgba(255,255,255,0.92);
}
body.lframe-active:not(.hyper-theme)>header{z-index:101;}
body>header.public-shell-header{background:radial-gradient(ellipse 480px 180px at 12% -72%,rgba(111,95,228,0.26),transparent 72%),radial-gradient(ellipse 420px 170px at 90% 160%,rgba(244,130,92,0.18),transparent 74%),radial-gradient(circle,rgba(111,95,228,0.1) 0.7px,transparent 1px),linear-gradient(105deg,rgba(235,231,255,0.88),rgba(251,249,255,0.84) 52%,rgba(255,241,235,0.88));background-size:auto,auto,48px 44px,auto;box-shadow:0 10px 30px rgba(43,33,94,0.08),inset 0 1px rgba(255,255,255,0.94);}
body>header.public-shell-header::after{content:none;}
body.lframe-active:not(.hyper-theme)>header::before {
    content:'';
    position:absolute;
    inset:0 auto 0 0;
    z-index:0;
    width:308px;
    background:linear-gradient(90deg,rgba(230,224,250,0.96),rgba(239,234,251,0.94) 260px,rgba(239,234,251,0) 100%);
    pointer-events:none;
}
body.lframe-active.hyper-theme>header{isolation:isolate;z-index:101;}
.shell-nav-corners {
    position:absolute;
    inset:7px;
    z-index:4;
    filter:drop-shadow(0 0 3px rgba(111,95,228,0.12));
    opacity:0.72;
    pointer-events:none;
}
.shell-nav-corner{position:absolute;width:var(--shell-nav-corner-width);height:var(--shell-nav-corner-height);border:0 solid transparent;}
.shell-nav-corner--tl{top:0;left:0;border-top:1px solid var(--shell-nav-corner-cool);border-left:1px solid var(--shell-nav-corner-cool);border-radius:var(--shell-nav-corner-radius) 0 0 0;}
.shell-nav-corner--tr{top:0;right:0;border-top:1px solid var(--shell-nav-corner-cool);border-right:1px solid var(--shell-nav-corner-cool);border-radius:0 var(--shell-nav-corner-radius) 0 0;}
.shell-nav-corner--br{right:0;bottom:0;border-right:1px solid var(--shell-nav-corner-warm);border-bottom:1px solid var(--shell-nav-corner-warm);border-radius:0 0 var(--shell-nav-corner-radius) 0;}
.shell-nav-corner--bl{bottom:0;left:0;border-bottom:1px solid var(--shell-nav-corner-warm);border-left:1px solid var(--shell-nav-corner-warm);border-radius:0 0 0 var(--shell-nav-corner-radius);}
body>header::after {
    content:'· 03 · ◇ · 07 / 78 · ◌ · 12 · ◇ · 24 / 05 · ◌ · 31 · ◇ · 48 / 12 · ◌ · 64 · ◇ · 80 / 16 ·';
    position:absolute;
    top:7px;
    bottom:1px;
    right:clamp(76px,4.5vw,88px);
    left:clamp(76px,4.5vw,88px);
    z-index:2;
    overflow:hidden;
    color:var(--shell-nav-interface-cool);
    font-family:'Cascadia Mono','Segoe UI Symbol',monospace;
    font-size:0.54rem;
    font-weight:400;
    letter-spacing:0.2em;
    line-height:1;
    text-align:justify;
    text-align-last:justify;
    text-shadow:0 52px var(--shell-nav-interface-warm);
    white-space:nowrap;
    pointer-events:none;
}

#main-nav {
    display:flex;
    padding:10px 14px;
    align-items:center;
    justify-content:space-between;
    min-height:var(--app-header-height);
    width:100%;
    position:relative;
    z-index:3;
}

/* Links must NEVER shrink or wrap internally: the "More" overflow logic (main.js) measures their
   true right edges to decide what to park in the dropdown — squishable items report false widths
   (icon-over-label two-liners) and the menu ends up empty while everything crushes.
   Spacing is deliberately compact (gap/padding/letter-spacing) so six primary links fit before
   the More dropdown has to engage on typical laptop widths. */
.nav-links{display:flex;gap:3px;align-items:center;padding:0;}
.nav-public .nav-links{margin-inline:auto;}
.nav-links > a{flex-shrink:0;white-space:nowrap;}
#main-nav .nav-logo-container{flex-shrink:0;}

#main-nav a{color:var(--shell-nav-muted);text-decoration:none;font-weight:700;letter-spacing:0.15px;transition:color 0.2s,background 0.2s,box-shadow 0.2s,transform 0.2s;}
#main-nav .nav-links>a,#main-nav .nav-more-btn {
    min-height:44px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:7px 10px;
    border:0;
    border-radius:10px;
    background:transparent;
    color:var(--shell-nav-muted);
    font-family:inherit;
    font-size:0.9rem;
    font-weight:700;
    letter-spacing:0.15px;
    line-height:1;
    cursor:pointer;
    position:relative;
    overflow:visible;
    white-space:nowrap;
    transition:color 0.2s,background 0.2s,box-shadow 0.2s,transform 0.2s;
}

/* Faux-bold the active link via text-shadow instead of font-weight:900 — a heavier weight
   changes glyph metrics and shifts neighbouring links a pixel or two; a shadow thickens the
   glyphs without affecting layout, so the row stays perfectly still. */
#main-nav .nav-links>a.active{color:var(--primary-hover);background:transparent;box-shadow:none;text-shadow:0.2px 0 0 currentColor,-0.2px 0 0 currentColor;}
.nav-public .nav-login-btn{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:7px 12px;border:1px solid rgba(111,95,228,0.15);border-radius:11px;background:rgba(255,255,255,0.46);box-shadow:inset 0 1px rgba(255,255,255,0.82),0 7px 18px -16px rgba(72,57,150,0.55);}
.nav-public .nav-login-btn:hover,.nav-public .nav-login-btn:focus-visible{color:var(--primary-hover);border-color:rgba(111,95,228,0.28);background:rgba(111,95,228,0.08);transform:translateY(-1px);}
#main-nav .nav-links>a>i,#main-nav .nav-more-btn>i {
    width:19px;
    flex:0 0 19px;
    display:inline-block;
    margin:0;
    color:rgba(111,95,228,0.72);
    font-size:0.92rem;
    text-align:center;
    transition:color 0.2s,filter 0.2s,transform 0.2s;
}
#main-nav .nav-links>a:hover,#main-nav .nav-links>a:focus-visible,#main-nav .nav-more-btn:hover,#main-nav .nav-more-btn:focus-visible{color:var(--primary);background:rgba(111,95,228,0.055);box-shadow:none;}
#main-nav .nav-links>a:hover>i,#main-nav .nav-links>a:focus-visible>i,#main-nav .nav-more-btn:hover>i,#main-nav .nav-more-btn:focus-visible>i{color:var(--primary);filter:drop-shadow(0 0 7px rgba(111,95,228,0.28));transform:translateY(-1px);}
#main-nav .nav-links>a.active>i{color:var(--primary-hover);filter:drop-shadow(0 0 8px rgba(111,95,228,0.3));}
#main-nav .nav-links>a.active:hover,#main-nav .nav-links>a.active:focus-visible,#main-nav .nav-links>a.active:hover>i,#main-nav .nav-links>a.active:focus-visible>i{color:var(--primary-hover);}

#main-nav .nav-links>a::after,#main-nav .nav-more-btn::after {
    content: '';
    position: absolute;
    bottom:1px;
    left:50%;
    width:30px;
    height:2px;
    background:var(--shell-aurora);
    border-radius:999px;
    opacity:0;
    transform:translateX(-50%) scaleX(0.35);
    transform-origin:center;
    transition:opacity 0.2s,transform 0.2s;
}
#main-nav .nav-links>a.active::after{opacity:0.86;transform:translateX(-50%) scaleX(1);}
#main-nav .nav-links>a:hover::after,#main-nav .nav-links>a:focus-visible::after,#main-nav .nav-more-btn:hover::after,#main-nav .nav-more-btn:focus-visible::after{opacity:0.38;transform:translateX(-50%) scaleX(0.72);}
#main-nav .dropdown-menu a{color:var(--text-color);}
body.hyper-theme>header #main-nav .nav-links>a,body.hyper-theme>header #main-nav .nav-more-btn{background:transparent;}
body.hyper-theme>header #main-nav .nav-links>a.active{color:#C3BAFF;background:transparent;}
body.hyper-theme>header #main-nav .nav-links>a>i,body.hyper-theme>header #main-nav .nav-more-btn>i{color:#B9B0FF;}

/* Phase 82: authenticated command shell. The rail is the stable global navigation surface;
   the top bar carries route context, learning status, and account utilities only. */
.app-command-rail {
    position:fixed;
    inset:0 auto 0 0;
    z-index:110;
    width:var(--app-rail-width,var(--lframe-rail-width));
    overflow:hidden;
    color:#F8F7FF;
    background:radial-gradient(circle at 12% 2%,rgba(111,95,228,0.34),transparent 230px),radial-gradient(circle at 92% 96%,rgba(244,130,92,0.18),transparent 260px),linear-gradient(180deg,var(--shell-midnight-raised),var(--shell-midnight));
    border-right:1px solid rgba(167,153,255,0.2);
    box-shadow:inset -1px 0 rgba(255,255,255,0.06),18px 0 48px -40px rgba(23,20,46,0.92);
    transition:width 0.24s cubic-bezier(0.16,1,0.3,1),transform 0.28s cubic-bezier(0.16,1,0.3,1);
}
.app-command-rail[hidden]{display:none!important;}
.app-command-rail::before,.app-command-rail::after{content:'';position:absolute;z-index:0;pointer-events:none;background-repeat:no-repeat;}
.app-command-rail::before {
    inset:0;
    background-image:
        radial-gradient(circle at 17% 3%,rgba(194,187,255,0.34) 0 1.15px,transparent 1.7px),
        radial-gradient(circle at 46% 2.4%,rgba(255,255,255,0.18) 0 0.7px,transparent 1.2px),
        radial-gradient(circle at 74% 4.1%,rgba(140,124,238,0.3) 0 0.85px,transparent 1.35px),
        radial-gradient(circle at 58% 6.7%,rgba(194,187,255,0.28) 0 0.75px,transparent 1.25px),
        radial-gradient(circle at 91% 8.7%,rgba(194,187,255,0.3) 0 0.75px,transparent 1.25px),
        radial-gradient(circle at 4% 10.6%,rgba(255,255,255,0.16) 0 0.65px,transparent 1.1px),
        radial-gradient(circle at 52% 11.4%,rgba(140,124,238,0.27) 0 0.7px,transparent 1.2px),
        radial-gradient(circle at 29% 12.8%,rgba(140,124,238,0.28) 0 0.8px,transparent 1.3px),
        radial-gradient(circle at 68% 15.4%,rgba(255,255,255,0.16) 0 0.65px,transparent 1.1px),
        radial-gradient(circle at 11% 18.6%,rgba(194,187,255,0.3) 0 0.9px,transparent 1.4px),
        radial-gradient(circle at 37% 19.3%,rgba(140,124,238,0.26) 0 0.7px,transparent 1.2px),
        radial-gradient(circle at 82% 22.1%,rgba(140,124,238,0.3) 0 0.75px,transparent 1.25px),
        radial-gradient(circle at 44% 25.7%,rgba(194,187,255,0.34) 0 1.25px,transparent 1.8px),
        radial-gradient(circle at 55% 28.1%,rgba(255,255,255,0.15) 0 0.65px,transparent 1.1px),
        radial-gradient(circle at 93% 29.9%,rgba(255,255,255,0.17) 0 0.7px,transparent 1.15px),
        radial-gradient(circle at 2.8% 30.7%,rgba(140,124,238,0.28) 0 0.75px,transparent 1.25px),
        radial-gradient(circle at 21% 33.8%,rgba(140,124,238,0.3) 0 0.8px,transparent 1.3px),
        radial-gradient(circle at 75% 35.9%,rgba(194,187,255,0.3) 0 0.8px,transparent 1.3px),
        radial-gradient(circle at 61% 37.2%,rgba(194,187,255,0.3) 0 0.9px,transparent 1.4px),
        radial-gradient(circle at 31% 39.4%,rgba(255,255,255,0.15) 0 0.65px,transparent 1.1px),
        radial-gradient(circle at 8% 41.6%,rgba(255,255,255,0.15) 0 0.65px,transparent 1.1px),
        radial-gradient(circle at 48% 43.1%,rgba(140,124,238,0.28) 0 0.75px,transparent 1.25px),
        radial-gradient(circle at 87% 44.3%,rgba(140,124,238,0.3) 0 0.8px,transparent 1.3px),
        radial-gradient(circle at 36% 47.9%,rgba(194,187,255,0.32) 0 1.2px,transparent 1.75px),
        radial-gradient(circle at 99% 50.2%,rgba(194,187,255,0.28) 0 0.7px,transparent 1.2px),
        radial-gradient(circle at 72% 52.6%,rgba(255,255,255,0.16) 0 0.7px,transparent 1.15px),
        radial-gradient(circle at 45% 53.8%,rgba(140,124,238,0.27) 0 0.7px,transparent 1.2px),
        radial-gradient(circle at 15% 55.1%,rgba(140,124,238,0.28) 0 0.75px,transparent 1.25px),
        radial-gradient(circle at 53% 59.8%,rgba(194,187,255,0.3) 0 0.85px,transparent 1.35px),
        radial-gradient(circle at 33% 62.1%,rgba(255,255,255,0.15) 0 0.65px,transparent 1.1px),
        radial-gradient(circle at 96% 63.4%,rgba(140,124,238,0.28) 0 0.7px,transparent 1.2px),
        radial-gradient(circle at 27% 67.3%,rgba(255,255,255,0.15) 0 0.65px,transparent 1.1px),
        radial-gradient(circle at 79% 70.9%,rgba(194,187,255,0.3) 0 0.8px,transparent 1.3px),
        radial-gradient(circle at 62% 73.4%,rgba(140,124,238,0.28) 0 0.75px,transparent 1.25px),
        radial-gradient(circle at 24% 74.2%,rgba(194,187,255,0.28) 0 0.7px,transparent 1.2px),
        radial-gradient(circle at 6% 75.8%,rgba(140,124,238,0.28) 0 0.7px,transparent 1.2px),
        radial-gradient(circle at 42% 79.2%,rgba(194,187,255,0.3) 0 1.25px,transparent 1.8px),
        radial-gradient(circle at 11% 82.3%,rgba(194,187,255,0.28) 0 0.75px,transparent 1.25px),
        radial-gradient(circle at 66% 84.6%,rgba(255,255,255,0.15) 0 0.65px,transparent 1.1px),
        radial-gradient(circle at 36% 86.8%,rgba(140,124,238,0.27) 0 0.7px,transparent 1.2px),
        radial-gradient(circle at 19% 88.7%,rgba(140,124,238,0.28) 0 0.75px,transparent 1.25px),
        radial-gradient(circle at 89% 92.3%,rgba(194,187,255,0.3) 0 1.15px,transparent 1.7px),
        radial-gradient(circle at 72% 95%,rgba(255,255,255,0.15) 0 0.65px,transparent 1.1px),
        radial-gradient(circle at 8% 95.7%,rgba(194,187,255,0.28) 0 0.7px,transparent 1.2px),
        radial-gradient(circle at 49% 96.1%,rgba(140,124,238,0.28) 0 0.7px,transparent 1.2px);
    opacity:0.65;
    animation:appRailParticleDrift 13.4s ease-in-out infinite;
}
.app-command-rail::after {
    inset:48% 0 0;
    background-image:
        radial-gradient(circle at 48% 3%,rgba(250,169,108,0.24) 0 0.7px,transparent 1.2px),
        radial-gradient(circle at 31% 7%,rgba(244,130,92,0.28) 0 0.75px,transparent 1.25px),
        radial-gradient(circle at 68% 8.4%,rgba(244,130,92,0.27) 0 0.7px,transparent 1.2px),
        radial-gradient(circle at 81% 11%,rgba(180,151,255,0.2) 0 0.7px,transparent 1.2px),
        radial-gradient(circle at 97% 15%,rgba(244,130,92,0.28) 0 0.75px,transparent 1.25px),
        radial-gradient(circle at 13% 18%,rgba(250,169,108,0.26) 0 0.8px,transparent 1.3px),
        radial-gradient(circle at 38% 19.6%,rgba(244,130,92,0.28) 0 0.75px,transparent 1.25px),
        radial-gradient(circle at 59% 22%,rgba(244,130,92,0.32) 0 1.15px,transparent 1.7px),
        radial-gradient(circle at 4% 26%,rgba(180,151,255,0.2) 0 0.7px,transparent 1.2px),
        radial-gradient(circle at 94% 28%,rgba(250,169,108,0.24) 0 0.7px,transparent 1.2px),
        radial-gradient(circle at 21% 30.7%,rgba(250,169,108,0.25) 0 0.7px,transparent 1.2px),
        radial-gradient(circle at 42% 33%,rgba(180,151,255,0.2) 0 0.75px,transparent 1.25px),
        radial-gradient(circle at 83% 35%,rgba(244,130,92,0.3) 0 0.8px,transparent 1.3px),
        radial-gradient(circle at 7% 39%,rgba(244,130,92,0.3) 0 0.85px,transparent 1.35px),
        radial-gradient(circle at 91% 40.8%,rgba(244,130,92,0.27) 0 0.7px,transparent 1.2px),
        radial-gradient(circle at 34% 44%,rgba(250,169,108,0.24) 0 0.7px,transparent 1.2px),
        radial-gradient(circle at 72% 43%,rgba(250,169,108,0.26) 0 0.8px,transparent 1.3px),
        radial-gradient(circle at 24% 49%,rgba(244,130,92,0.32) 0 1.2px,transparent 1.75px),
        radial-gradient(circle at 88% 52%,rgba(180,151,255,0.2) 0 0.7px,transparent 1.2px),
        radial-gradient(circle at 63% 54%,rgba(244,130,92,0.3) 0 0.8px,transparent 1.3px),
        radial-gradient(circle at 35% 56.2%,rgba(244,130,92,0.27) 0 0.75px,transparent 1.25px),
        radial-gradient(circle at 51% 58%,rgba(250,169,108,0.28) 0 0.85px,transparent 1.35px),
        radial-gradient(circle at 9% 59%,rgba(250,169,108,0.24) 0 0.7px,transparent 1.2px),
        radial-gradient(circle at 16% 64%,rgba(244,130,92,0.3) 0 0.8px,transparent 1.3px),
        radial-gradient(circle at 56% 65.8%,rgba(250,169,108,0.26) 0 0.7px,transparent 1.2px),
        radial-gradient(circle at 84% 65%,rgba(244,130,92,0.3) 0 0.8px,transparent 1.3px),
        radial-gradient(circle at 67% 68%,rgba(180,151,255,0.2) 0 0.75px,transparent 1.25px),
        radial-gradient(circle at 44% 72%,rgba(250,169,108,0.26) 0 0.75px,transparent 1.25px),
        radial-gradient(circle at 96% 73%,rgba(250,169,108,0.26) 0 0.8px,transparent 1.3px),
        radial-gradient(circle at 13% 75.1%,rgba(244,130,92,0.29) 0 0.75px,transparent 1.25px),
        radial-gradient(circle at 37% 77%,rgba(244,130,92,0.34) 0 1.25px,transparent 1.8px),
        radial-gradient(circle at 68% 80.4%,rgba(250,169,108,0.26) 0 0.7px,transparent 1.2px),
        radial-gradient(circle at 5% 84%,rgba(180,151,255,0.2) 0 0.7px,transparent 1.2px),
        radial-gradient(circle at 77% 87%,rgba(244,130,92,0.3) 0 0.85px,transparent 1.35px),
        radial-gradient(circle at 27% 89%,rgba(244,130,92,0.28) 0 0.75px,transparent 1.25px),
        radial-gradient(circle at 94% 90.8%,rgba(244,130,92,0.28) 0 0.75px,transparent 1.25px),
        radial-gradient(circle at 54% 93%,rgba(250,169,108,0.28) 0 0.8px,transparent 1.3px),
        radial-gradient(circle at 92% 96%,rgba(180,151,255,0.2) 0 0.7px,transparent 1.2px),
        radial-gradient(circle at 22% 97%,rgba(244,130,92,0.32) 0 1.15px,transparent 1.7px);
    opacity:0.72;
    -webkit-mask-image:linear-gradient(transparent,rgba(0,0,0,0.48) 20%,#000 55%);
    mask-image:linear-gradient(transparent,rgba(0,0,0,0.48) 20%,#000 55%);
    animation:appRailWarmParticleDrift 10.9s ease-in-out infinite;
}
@keyframes appRailParticleDrift{0%,100%{transform:translate3d(0,0,0);opacity:0.61;}23%{transform:translate3d(2px,-3px,0);opacity:0.68;}57%{transform:translate3d(4px,-8px,0);opacity:0.58;}82%{transform:translate3d(1px,-5px,0);opacity:0.66;}}
@keyframes appRailWarmParticleDrift{0%,100%{transform:translate3d(0,0,0);opacity:0.66;}29%{transform:translate3d(-1px,-4px,0);opacity:0.75;}63%{transform:translate3d(-3px,-10px,0);opacity:0.62;}84%{transform:translate3d(1px,-6px,0);opacity:0.72;}}
@media(prefers-reduced-motion:reduce){.app-command-rail::before,.app-command-rail::after{animation:none;}}
.app-command-rail::before,.app-command-rail::after{display:none;}
.app-rail-particles{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.app-rail-particle {
    position:absolute;
    top:var(--particle-y);
    left:var(--particle-x);
    width:var(--particle-size);
    height:var(--particle-size);
    border-radius:50%;
    background:var(--particle-color);
    box-shadow:0 0 3px var(--particle-color);
    opacity:var(--particle-alpha);
    animation:appRailParticleFloat var(--particle-duration) linear var(--particle-delay) infinite;
    will-change:transform,opacity;
}
@keyframes appRailParticleFloat{0%,100%{transform:translate3d(0,0,0);opacity:var(--particle-alpha);}19%{transform:translate3d(var(--particle-dx-a),var(--particle-dy-a),0);opacity:var(--particle-alpha-a);}53%{transform:translate3d(var(--particle-dx-b),var(--particle-dy-b),0);opacity:var(--particle-alpha-b);}81%{transform:translate3d(var(--particle-dx-c),var(--particle-dy-c),0);opacity:var(--particle-alpha-c);}}
@media(prefers-reduced-motion:reduce){.app-rail-particle{animation:none;}}
#cosmic-canvas{display:none!important;}
.app-command-rail.has-surface-corners>.surface-corners{--surface-corner-size:25px;--surface-corner-cool:rgba(184,174,255,0.34);--surface-corner-warm:rgba(244,130,92,0.28);inset:7px;opacity:0.7;}
.app-rail-nav {
    position:relative;
    z-index:1;
    height:100%;
    display:flex;
    flex-direction:column;
    gap:3px;
    padding:12px 10px max(14px,env(safe-area-inset-bottom));
    overflow:hidden;
}
.app-rail-brand-row{display:flex;align-items:center;gap:5px;min-height:48px;margin:0 2px 8px;padding:2px 3px;}
.app-rail-brand{min-width:0;display:flex;align-items:center;gap:10px;flex:1;color:#F8F7FF;text-decoration:none;}
.app-rail-brand img{width:34px;height:34px;flex:0 0 34px;filter:drop-shadow(0 0 10px rgba(133,116,255,0.32));}
.app-rail-brand span{overflow:hidden;font-family:var(--font-display),sans-serif;font-size:1.35rem;font-weight:800;line-height:1;white-space:nowrap;}
.app-rail-collapse,.app-rail-close {
    width:36px;
    height:36px;
    flex:0 0 36px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid rgba(190,181,255,0.12);
    border-radius:10px;
    background:rgba(255,255,255,0.045);
    color:#BEB8DD;
    cursor:pointer;
}
.app-rail-close{display:none;}
.app-rail-collapse:hover,.app-rail-collapse:focus-visible,.app-rail-close:hover,.app-rail-close:focus-visible{background:rgba(130,111,255,0.18);border-color:rgba(190,181,255,0.25);color:#fff;}
.app-rail-stage{position:relative;min-height:0;flex:1;overflow:hidden;}
.app-rail-panel {
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:rgba(190,181,255,0.18) transparent;
    transition:transform 0.24s cubic-bezier(0.16,1,0.3,1);
}
.app-rail-panel-main{transform:translateX(0);}
.app-rail-panel-module{transform:translateX(100%);}
.app-command-rail.is-drilled .app-rail-panel-main{transform:translateX(-100%);}
.app-command-rail.is-drilled .app-rail-panel-module{transform:translateX(0);}
@media(prefers-reduced-motion:reduce){.app-rail-panel{transition:none;}}
.app-rail-group-label{margin:5px 12px 4px;color:#9690B6;font-size:0.66rem;font-weight:800;letter-spacing:0.12em;text-transform:uppercase;white-space:nowrap;}
.app-rail-global{display:flex;flex-direction:column;gap:3px;}
.app-rail-link {
    position:relative;
    min-height:43px;
    display:flex;
    align-items:center;
    gap:11px;
    padding:8px 11px;
    border:1px solid transparent;
    border-radius:11px;
    color:#AAA5C6;
    font-size:0.91rem;
    font-weight:700;
    line-height:1;
    text-decoration:none;
    white-space:nowrap;
    transition:color 0.2s,background 0.2s,border-color 0.2s;
}
.app-rail-link>i{width:22px;flex:0 0 22px;color:#9891BC;font-size:1rem;text-align:center;transition:color 0.2s,filter 0.2s;}
.app-rail-link[href="/vocabulary"]>i{transform:translateY(-2px);}
.app-rail-link:hover,.app-rail-link:focus-visible{color:#F8F7FF;background:rgba(255,255,255,0.055);border-color:rgba(190,181,255,0.055);}
.app-rail-link.active{color:#fff;background:linear-gradient(90deg,rgba(130,111,255,0.35),rgba(130,111,255,0.13));border-color:rgba(190,181,255,0.095);box-shadow:inset 0 1px rgba(255,255,255,0.06);}
.app-rail-link.active::before{content:'';position:absolute;top:9px;bottom:9px;left:-1px;width:3px;border-radius:999px;background:linear-gradient(var(--primary),var(--secondary));box-shadow:0 0 12px rgba(130,111,255,0.5);}
.app-rail-link.active>i{color:#C7BFFF;filter:drop-shadow(0 0 7px rgba(130,111,255,0.45));}
.app-rail-secondary-wrap{margin-top:auto;padding-top:12px;}
.app-rail-secondary{display:flex;align-items:center;justify-content:center;gap:7px;}
.app-rail-dock-btn {
    width:42px;
    min-height:42px;
    flex:0 0 42px;
    justify-content:center;
    padding:0;
    font-family:inherit;
}
.app-rail-dock-btn>i{margin:0;}
.app-rail-logout {
    appearance:none;
    border-color:transparent;
    background:transparent;
    box-shadow:none;
    color:#AAA5C6;
    cursor:pointer;
}
.app-rail-logout:hover,.app-rail-logout:focus-visible{color:#FFD7CF;background:rgba(244,130,92,0.1);border-color:rgba(244,130,92,0.1);}
.app-rail-logout:hover,.app-rail-logout:focus-visible,.app-rail-logout:active{box-shadow:none;}
.app-rail-logout:hover>i,.app-rail-logout:focus-visible>i{color:#FF9A78;}
.app-rail-panel-divider{height:1px;margin:2px 9px 9px;background:linear-gradient(90deg,transparent,rgba(190,181,255,0.18),transparent);}
.app-rail-back{margin-bottom:7px;color:#D8D3F2;}
.app-rail-back>i{color:#BEB7E8;}
.app-rail-context{display:flex;min-height:0;flex-direction:column;}
.app-rail-context button,.app-rail-context .admin-tab-btn,.app-rail-context .profile-tab-btn{font-family:inherit;}
.app-rail-context .sidebar-menu-card {
    position:static;
    width:100%;
    max-height:none;
    flex:0 0 auto;
    gap:3px;
    padding:0;
    overflow:visible;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    color:#F8F7FF;
    --text-color:#F8F7FF;
    --text-muted:#AAA5C6;
    --card-border:rgba(190,181,255,0.16);
    backdrop-filter:none;
}
.app-rail-context .sidebar-menu-card:hover{border:0!important;box-shadow:none!important;}
.app-rail-context .admin-tab-btn,.app-rail-context .profile-tab-btn{min-height:40px;}
.app-rail-context .admin-tab-btn:not(.admin-acc-item),.app-rail-context .profile-tab-btn:not(.admin-acc-item) {
    min-height:43px;
    gap:11px;
    padding:8px 11px;
    border:1px solid transparent;
    border-radius:11px;
    background:transparent;
    color:#AAA5C6;
    font-size:0.91rem;
    font-weight:700;
    font-family:inherit;
    line-height:1;
    transition:color 0.2s,background 0.2s,border-color 0.2s;
}
.app-rail-context .admin-tab-btn:not(.admin-acc-item)>.admin-nav-icon,.app-rail-context .profile-tab-btn:not(.admin-acc-item)>.admin-nav-icon{width:22px;flex:0 0 22px;margin:0;color:#9891BC;font-size:1rem;text-align:center;transition:color 0.2s,filter 0.2s;}
.app-rail-context .admin-tab-btn:not(.admin-acc-item):hover,.app-rail-context .admin-tab-btn:not(.admin-acc-item):focus-visible,.app-rail-context .profile-tab-btn:not(.admin-acc-item):hover,.app-rail-context .profile-tab-btn:not(.admin-acc-item):focus-visible{color:#F8F7FF;background:rgba(255,255,255,0.055);border-color:rgba(190,181,255,0.055);}
.app-rail-context .admin-tab-btn:not(.admin-acc-item):hover>.admin-nav-icon,.app-rail-context .profile-tab-btn:not(.admin-acc-item):hover>.admin-nav-icon{transform:none;}
.app-rail-context .admin-tab-btn:not(.admin-acc-item).active,.app-rail-context .profile-tab-btn:not(.admin-acc-item).active{color:#FFF;background:linear-gradient(90deg,rgba(130,111,255,0.35),rgba(130,111,255,0.13));border-color:rgba(190,181,255,0.095);box-shadow:inset 0 1px rgba(255,255,255,0.06)!important;}
.app-rail-context .admin-tab-btn:not(.admin-acc-item).active>.admin-nav-icon,.app-rail-context .profile-tab-btn:not(.admin-acc-item).active>.admin-nav-icon{color:#C7BFFF;filter:drop-shadow(0 0 7px rgba(130,111,255,0.45));}
.app-rail-context .admin-tab-btn:not(.admin-acc-item)::before,.app-rail-context .profile-tab-btn:not(.admin-acc-item)::before{top:9px;bottom:9px;left:-1px;width:3px;height:auto;border-radius:999px;background:linear-gradient(var(--primary),var(--secondary));box-shadow:0 0 12px rgba(130,111,255,0.5);}
.app-rail-context .admin-tab-btn:not(.admin-acc-item):hover::before,.app-rail-context .profile-tab-btn:not(.admin-acc-item):hover::before{height:auto;}
.app-rail-context .admin-tab-btn:not(.admin-acc-item).active::before,.app-rail-context .profile-tab-btn:not(.admin-acc-item).active::before{height:auto;}
.app-rail-context .admin-acc-item:hover,.app-rail-context .admin-acc-item:focus-visible{color:#F8F7FF;background:rgba(255,255,255,0.07);}
.app-rail-context .admin-acc-item.active{color:#FFF;background:rgba(111,95,228,0.18);box-shadow:inset 0 1px rgba(255,255,255,0.06)!important;}
.app-rail-context .admin-acc-parent.is-open:not(.active){color:#ECE9FF;background:rgba(167,153,255,0.1);box-shadow:inset 0 1px rgba(255,255,255,0.045)!important;}

body.app-shell-auth{--app-rail-width:var(--lframe-rail-width);}
body.app-shell-active:not(.app-shell-public-route):not(.hyper-theme) {
    --auth-canvas-base:#E2DCE8;
    --auth-canvas-cool:#DDD9E9;
    --auth-canvas-warm:#E5D0CD;
    --auth-constellation-image:url("/assets/img/constellations.svg");
    --surface-raised-bg:rgba(253,252,255,0.93);
    --surface-base-bg:rgba(249,247,252,0.95);
    --surface-flush-bg:rgba(85,68,154,0.035);
    --surface-edge-lit:rgba(255,255,255,0.92);
    --surface-edge-shade:rgba(79,62,143,0.2);
    --surface-shadow-raised:0 34px 76px -42px rgba(40,28,91,0.52),0 12px 28px -24px rgba(63,45,132,0.28),inset 0 1px rgba(255,255,255,0.95);
    --surface-shadow-base:0 20px 42px -36px rgba(40,28,91,0.42),inset 0 1px rgba(255,255,255,0.86);
    --surface-item-bg:rgba(85,68,154,0.075);
    --surface-item-bg-hover:rgba(255,255,255,0.72);
    --surface-item-bg-promoted:rgba(255,255,255,0.9);
    --surface-item-edge:rgba(79,62,143,0.18);
    --surface-item-edge-hover:rgba(79,62,143,0.29);
    --surface-item-keyline:rgba(111,95,228,0.38);
    --surface-item-shadow:0 10px 24px -23px rgba(40,28,91,0.38),inset 0 1px rgba(255,255,255,0.76);
    --surface-item-shadow-hover:0 17px 34px -24px rgba(40,28,91,0.42),inset 0 1px rgba(255,255,255,0.92);
    /* Phase 92 constellation roles. Warm light is achieved progress; cyan remains the one live
       signal. These values mirror the approved proof and are shared by SVG and HTML controls. */
    --galaxy-field-base:#F7F5FC;
    --galaxy-nebula-violet:#7B6BE0;
    --galaxy-nebula-coral:#F0845C;
    --galaxy-nebula-cyan:#2F97AC;
    --galaxy-nebula-magenta:#C8639E;
    --galaxy-star:#33295E;
    --galaxy-star-warm:#A9691F;
    --galaxy-star-cyan:#1C7A8C;
    --galaxy-charted:#E9A139;
    --galaxy-charted-edge:#E9B23C;
    --galaxy-charted-lit:#FFF7E0;
    --galaxy-current:var(--signal-cyan);
    --galaxy-current-edge:var(--signal-cyan-strong);
    --galaxy-current-bright:#0FA5B8;
    --galaxy-current-soft:#5FC2CE;
    --galaxy-uncharted:#8A7FB2;
    --galaxy-uncharted-edge:rgba(86,74,126,0.6);
    --galaxy-core-void:#17131F;
    --galaxy-core-void-centre:#020206;
    --galaxy-core-void-horizon:#090712;
    --galaxy-core-void-rim:#3A234D;
    --galaxy-core-ring:#A76C12;
    --galaxy-core-light:#F4A23C;
    --galaxy-core-photon:#FFE4AD;
    --galaxy-route-charted:#F2B93B;
    --galaxy-route-projected:#5C4C8E;
    --auth-space-backdrop:
        radial-gradient(980px circle at 12% 13%,rgba(111,95,228,0.16),transparent 56%),
        radial-gradient(860px circle at 88% 9%,rgba(244,162,60,0.13),transparent 53%),
        radial-gradient(780px circle at 72% 92%,rgba(244,130,92,0.11),transparent 62%),
        var(--auth-constellation-image),
        linear-gradient(158deg,var(--auth-canvas-cool),var(--auth-canvas-base) 48%,var(--auth-canvas-warm));
    --auth-space-backdrop-size:100% 100%,100% 100%,100% 100%,540px 540px,100% 100%;
    --auth-space-backdrop-attach:fixed,fixed,fixed,scroll,fixed;
    background-color:var(--auth-canvas-base);
}
body.app-shell-active:not(.app-shell-public-route):not(.hyper-theme).cosmic-theme {
    background-image:var(--auth-space-backdrop);
    background-size:var(--auth-space-backdrop-size);
    background-attachment:var(--auth-space-backdrop-attach);
}
body.app-shell-active>header {
    width:calc(100% - var(--app-rail-width));
    margin-left:var(--app-rail-width);
    transition:width 0.24s cubic-bezier(0.16,1,0.3,1),margin-left 0.24s cubic-bezier(0.16,1,0.3,1);
}
body.app-shell-active>header::before{content:none;}
body.app-shell-active main#app-root {
    width:calc(100% - var(--app-rail-width));
    max-width:none;
    margin-left:var(--app-rail-width);
    transition:opacity 0.2s ease,transform 0.2s ease,width 0.24s cubic-bezier(0.16,1,0.3,1),margin-left 0.24s cubic-bezier(0.16,1,0.3,1);
}
body.app-shell-active .site-footer{width:100%;padding-left:calc(var(--app-rail-width) + 20px);transition:padding-left 0.24s cubic-bezier(0.16,1,0.3,1);}
body.app-rail-collapsed{--app-rail-width:68px;}
.app-rail-collapsed .app-rail-brand span,.app-rail-collapsed .app-rail-group-label,.app-rail-collapsed .app-rail-link span,.app-rail-collapsed .app-rail-panel-divider,.app-rail-collapsed .app-rail-context .admin-acc-sub{display:none;}
.app-rail-collapsed .app-rail-brand-row{justify-content:center;padding-inline:0;}
.app-rail-collapsed .app-rail-brand{display:none;}
.app-rail-collapsed .app-rail-collapse{display:grid;}
.app-rail-collapsed .app-rail-link{justify-content:center;gap:0;padding-inline:8px;}
.app-rail-collapsed .app-rail-secondary{flex-direction:column;gap:3px;}
.app-rail-collapsed .app-rail-secondary .app-rail-link{width:42px;padding-inline:0;}
.app-rail-collapsed .app-rail-secondary .app-rail-link>i{margin:0;}
.app-rail-collapsed .app-rail-context .admin-tab-btn,.app-rail-collapsed .app-rail-context .profile-tab-btn{justify-content:center;gap:0;padding-inline:8px;font-size:0;}
.app-rail-collapsed .app-rail-context .admin-nav-icon{margin:0;font-size:1rem;}
.app-rail-collapsed .app-rail-context .admin-acc-chev,.app-rail-collapsed .app-rail-context .admin-nav-badge{display:none;}

#main-nav.nav-auth-utility{gap:18px;justify-content:flex-start;}
.shell-mobile-brand{display:none;}
.shell-route-context{min-width:180px;display:flex;align-items:center;gap:10px;color:var(--shell-nav-text);}
.shell-context-icon{width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(111,95,228,0.14);border-radius:12px;background:linear-gradient(145deg,rgba(111,95,228,0.13),rgba(244,130,92,0.08));color:var(--primary);box-shadow:inset 0 1px rgba(255,255,255,0.7);}
.shell-route-context>span:last-child{min-width:0;display:flex;flex-direction:column;line-height:1.05;}
.shell-context-area{color:var(--text-muted);font-size:0.62rem;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;}
.shell-context-label{max-width:220px;overflow:hidden;color:var(--shell-nav-text);font-size:0.92rem;text-overflow:ellipsis;white-space:nowrap;}
/* Phase 118 — dictionary search in the top nav. A QUIET utility: it borrows .shell-stat's surface
   (same border, same translucent fill) rather than introducing an accent, because AGENTS.md allows
   one primary action per view and this is not it. Rows inside the popover are dictionary.css's
   .dict-ac-item, unchanged — only the container is repositioned for the nav. */
.shell-search{position:relative;min-width:0;}
.shell-search-shell{position:relative;display:flex;align-items:center;}
.shell-search-icon{position:absolute;left:11px;color:var(--shell-nav-muted);font-size:0.82rem;pointer-events:none;}
/* Phase 120 (Defect 2): width is fixed here, not part of either state below. It used to grow
   212px->288px on :focus (and 152px->224px in the tighter responsive.css pair) — reflowing a flex
   child by that much could displace or squeeze the neighbouring nav links/status strip. The width is
   now reserved at the larger (former-focus) size at rest, so focusing the field only ever changes the
   visual treatment — border, background, shadow — and never triggers layout. */
.shell-search-input{width:288px;min-height:38px;padding:5px 32px 5px 32px;border:1px solid rgba(111,95,228,0.1);border-radius:11px;background:rgba(255,255,255,0.32);color:var(--shell-nav-text);font:inherit;font-size:0.84rem;transition:border-color 0.2s,background 0.2s;}
@media(prefers-reduced-motion:reduce){.shell-search-input{transition:none;}}
.shell-search-input::placeholder{color:var(--shell-nav-muted);}
.shell-search-input::-webkit-search-cancel-button{display:none;}
.shell-search-input:hover{border-color:rgba(111,95,228,0.2);}
/* Two focus treatments on purpose, matching the two idioms already in the codebase: a soft ring for
   pointer focus (the /word search shell's .dict-search-shell:focus-within), and the app's explicit
   keyboard indicator for :focus-visible (academy.css uses this exact outline ~20 times). The blanket
   `outline:none` a search field usually gets would be a WCAG 2.4.7 regression on its own. */
.shell-search-input:focus{border-color:rgba(111,95,228,0.4);background:rgba(255,255,255,0.62);outline:none;box-shadow:0 0 0 3px rgba(111,95,228,0.12);}
.shell-search-input:focus-visible{outline:3px solid var(--signal-cyan);outline-offset:2px;}
.shell-search-key{position:absolute;right:9px;padding:1px 6px;border:1px solid rgba(111,95,228,0.14);border-radius:5px;background:rgba(255,255,255,0.5);color:var(--shell-nav-muted);font-family:inherit;font-size:0.66rem;font-weight:800;line-height:1.5;pointer-events:none;}
.shell-search-input:focus~.shell-search-key,.shell-search-input:not(:placeholder-shown)~.shell-search-key{opacity:0;}
/* ⚠️ Two classes deep on purpose. dictionary.css loads AFTER variables.css (index.php), and its
   .dict-autocomplete sets left:0;right:0 at the same specificity — a single-class override here would
   lose the cascade and leave the nav popover as wide as the 288px field. */
.shell-search .shell-search-listbox{top:calc(100% + 9px);right:auto;left:0;width:340px;max-width:min(340px,calc(100vw - 32px));}
body.hyper-theme .shell-search-input{background:rgba(255,255,255,0.08);border-color:rgba(190,181,255,0.18);}
body.hyper-theme .shell-search-key{background:rgba(255,255,255,0.1);border-color:rgba(190,181,255,0.2);}
/* Study surfaces stay undisturbed: /review and an open lesson hide the field, so a learner mid-drill
   is not offered a way out of the exercise in the chrome. The `/` shortcut asks the same question
   through navSearchAvailable(), so the two can never disagree. */
body.app-shell-study .shell-search{display:none;}
/* Phase 120: the mobile dictionary search row. index.php renders it EMPTY and OUTSIDE the sticky
   <header> so it scrolls away with the page while the nav stays put; app-shell.js moves the ONE
   mounted field in and out of it at 768px rather than rendering a second one, which would mean
   duplicate ids and two live combobox instances. `:empty` collapses it entirely — that is what keeps
   it costing nothing on desktop, and for a guest while the public dictionary is switched off.
   It replaced a 44px trigger button: a field you can see beats a button that reveals one. */
.nav-search-bar{display:none;}
.nav-search-bar:empty{display:none!important;}
.shell-status-strip{display:flex;align-items:center;gap:5px;margin-left:auto;}
.shell-status-strip[hidden],.shell-stat[hidden]{display:none!important;}
body.app-shell-workspace .shell-status-strip{display:none;}
.shell-stat{min-height:38px;display:flex;align-items:center;gap:6px;padding:5px 9px;border:1px solid rgba(111,95,228,0.1);border-radius:11px;background:rgba(255,255,255,0.32);color:var(--shell-nav-muted);}
.shell-stat>i{color:var(--secondary);font-size:0.85rem;}
.shell-stat strong{color:var(--shell-nav-text);font-size:0.84rem;line-height:1;}
.shell-stat small{font-size:0.63rem;line-height:1;white-space:nowrap;}
.shell-level-wrap{position:relative;display:flex;}
.shell-level-wrap[hidden]{display:none!important;}
.shell-stat-level {
    min-width:126px;
    display:grid;
    grid-template-columns:auto 1fr;
    gap:3px 7px;
    border-color:rgba(111,95,228,0.1);
    font:inherit;
    text-align:left;
    cursor:pointer;
    transition:border-color 0.2s,background 0.2s,box-shadow 0.2s,transform 0.2s;
}
.shell-stat-level:hover,.shell-stat-level:focus-visible,.shell-stat-level[aria-expanded="true"]{border-color:rgba(111,95,228,0.24);background:rgba(255,255,255,0.52);box-shadow:0 9px 24px -20px rgba(64,48,145,0.72);}
.shell-stat-level:hover{transform:translateY(-1px);}
.shell-stat-level:focus-visible{outline:3px solid var(--primary-glow);outline-offset:1px;}
.shell-stat-level>i{grid-row:1 / 3;color:var(--primary);}
.shell-level-copy{display:flex;align-items:baseline;gap:5px;}
.shell-level-track{grid-column:2;height:3px;overflow:hidden;border-radius:999px;background:rgba(77,67,119,0.12);}
.shell-level-fill{display:block;width:0;height:100%;border-radius:inherit;background:var(--shell-aurora);transition:width 0.3s ease;}
.shell-level-popover {
    position:absolute;
    top:calc(100% + 12px);
    right:0;
    z-index:20;
    width:310px;
    padding:17px;
    visibility:hidden;
    border:1px solid rgba(111,95,228,0.17);
    border-radius:17px;
    background:radial-gradient(circle at 10% 0%,rgba(111,95,228,0.13),transparent 150px),radial-gradient(circle at 100% 100%,rgba(244,130,92,0.11),transparent 150px),rgba(252,250,255,0.96);
    box-shadow:inset 0 1px rgba(255,255,255,0.88),0 24px 58px -26px rgba(42,31,104,0.58);
    color:var(--text-color);
    opacity:0;
    pointer-events:none;
    transform:translateY(-8px) scale(0.97);
    transform-origin:top right;
    transition:opacity 0.22s ease,transform 0.22s cubic-bezier(0.16,1,0.3,1),visibility 0.22s;
}
.shell-level-popover.is-open{visibility:visible;opacity:1;pointer-events:auto;transform:translateY(0) scale(1);}
@media(prefers-reduced-motion:reduce){.shell-level-popover{transition:none;}}
.shell-level-popover-kicker{display:block;margin-bottom:10px;color:var(--primary);font-size:0.61rem;font-weight:850;letter-spacing:0.13em;text-transform:uppercase;}
.shell-level-popover-head{display:grid;grid-template-columns:54px minmax(0,1fr);align-items:center;gap:15px;}
.shell-level-popover-icon{width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(111,95,228,0.14);border-radius:13px;background:linear-gradient(145deg,rgba(111,95,228,0.16),rgba(255,255,255,0.64));color:var(--primary);box-shadow:inset 0 1px rgba(255,255,255,0.8);}
.shell-level-popover-head>div{display:flex;min-width:0;flex-direction:column;gap:3px;}
.shell-level-popover-head strong{overflow:hidden;font-family:var(--font-display),sans-serif;font-size:0.96rem;text-overflow:ellipsis;white-space:nowrap;}
.shell-level-popover-head small{color:var(--text-muted);font-size:0.68rem;}
.shell-level-detail-meter{display:flex;flex-direction:column;gap:7px;margin-top:15px;padding:12px;border:1px solid rgba(111,95,228,0.1);border-radius:12px;background:rgba(111,95,228,0.045);}
.shell-level-detail-meter>div{display:flex;align-items:baseline;justify-content:space-between;gap:10px;color:var(--text-muted);font-size:0.68rem;font-weight:700;}
.shell-level-detail-meter>div strong{color:var(--text-color);font-size:0.72rem;}
.shell-level-detail-track{height:5px;overflow:hidden;border-radius:999px;background:rgba(77,67,119,0.12);}
.shell-level-detail-fill{display:block;width:0;height:100%;border-radius:inherit;background:var(--shell-aurora);transition:width 0.3s ease;}
.shell-level-detail-meter>small{color:var(--text-muted);font-size:0.65rem;text-align:right;}
.shell-level-detail-facts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px;}
.shell-level-detail-facts>div{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;border:1px solid rgba(111,95,228,0.09);border-radius:10px;background:rgba(255,255,255,0.44);}
.shell-level-detail-facts span{color:var(--text-muted);font-size:0.64rem;font-weight:700;}
.shell-level-detail-facts strong{font-size:0.7rem;white-space:nowrap;}
body.hyper-theme .shell-level-popover{border-color:rgba(190,181,255,0.2);background:radial-gradient(circle at 10% 0%,rgba(111,95,228,0.24),transparent 150px),rgba(17,18,40,0.97);box-shadow:0 24px 58px -24px rgba(0,0,0,0.8);}
body.hyper-theme .shell-level-detail-meter,body.hyper-theme .shell-level-detail-facts>div{border-color:rgba(190,181,255,0.13);background:rgba(255,255,255,0.045);}
.shell-stat-daily{min-width:112px;flex-direction:column;align-items:stretch;gap:4px;}
.shell-stat-daily>span:first-child{display:flex;align-items:baseline;}
.shell-daily-track{height:3px;overflow:hidden;border-radius:999px;background:rgba(77,67,119,0.12);}
.shell-daily-fill{display:block;width:0;height:100%;border-radius:inherit;background:var(--shell-aurora);transition:width 0.3s ease;}
.shell-stat-daily.is-complete .shell-daily-fill{background:var(--success);}
.nav-auth-utility .nav-right-actions{margin-left:0;}
body.app-shell-workspace .nav-auth-utility .nav-right-actions,.nav-auth-utility .shell-status-strip[hidden]+.nav-right-actions{margin-left:auto;}
.nav-auth-utility .nav-lang-btn,.nav-auth-utility .nav-user-avatar{padding:0;font-family:inherit;cursor:pointer;}
.nav-auth-utility .lang-option{width:100%;border:0;background:transparent;font:inherit;text-align:left;}
.app-rail-backdrop{display:none;}
body.app-rail-drawer-open{overflow:hidden;}
body.app-shell-study>header,body.app-shell-study>.app-command-rail,body.app-shell-study>.site-footer{display:none!important;}
body.app-shell-study main#app-root,body.chat-immersive main#app-root,body.lesson-immersive main#app-root{width:100%!important;margin-left:0!important;}
body.chat-immersive>.app-command-rail,body.lesson-immersive>.app-command-rail{display:none!important;}

main#app-root {
    flex: 1;
    max-width: 1200px;
    margin: 20px auto 40px auto;
    padding: 0 20px;
    width: 100%;
}

.hidden{display:none !important;}
.text-center{text-align:center;}
.pos-relative{position:relative;}
.font-lg{font-size:1.5rem;}
.mr-8{margin-right:8px;}
.text-danger{color:var(--danger)!important;}
.text-success{color:var(--success)!important;}
.container{width:100%;margin-left:auto;margin-right:auto;}
.strength-weak{color:#7A7596;}

/* Accessibility: honor reduced-motion — freeze decorative animation and hide the cosmic field */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    #cosmic-canvas, .floating-icon, .header-particle,
    .landing-floating-orb, .dash-floating-orb, .vocab-floating-orb,
    .landing-finale-glow { display: none !important; }
}