/* Page Entry Animation */
main#app-root > *{animation:fadeSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;}

@keyframes fadeSlideUp {
    0% { opacity:0;transform:translateY(20px);}
    100% { opacity:1;transform:translateY(0);}
}

.site-footer{background:rgba(255,255,255,0.6);border-top:1.5px solid var(--card-border);padding:40px 20px 20px;margin-top:auto;}
.footer-content{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;text-align:left;}
.footer-brand{display:flex;flex-direction:column;gap:12px;}
.footer-logo-link{align-self:flex-start;display:flex;align-items:center;gap:10px;text-decoration:none;}
.footer-logo{height:38px;width:38px;object-fit:contain;}
.footer-logo-word{font-family:var(--font-display),sans-serif;font-weight:800;font-size:1.5rem;letter-spacing:-.5px;color:var(--text-color);line-height:1;}
.footer-desc{font-size:0.95rem;line-height:1.6;color:var(--text-muted);max-width:350px;margin:0;}
.footer-links-group{display:flex;flex-direction:column;gap:10px;}
.footer-links-title{font-size:1.05rem;font-weight:800;color:var(--text-color);margin:0 0 5px;}
.footer-link{color:var(--text-muted);text-decoration:none;font-size:0.95rem;transition:color 0.2s;font-weight:600;}
.footer-link:hover{color:var(--primary);}
.footer-bottom {
    max-width:1200px;
    margin:30px auto 0;
    padding-top:20px;
    border-top:1px solid rgba(111,95,228,0.08);
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:15px;
}
.hyper-theme .footer-bottom{border-top-color:rgba(255,255,255,0.05);}
.footer-copy{font-size:0.9rem;color:var(--text-muted);margin:0;}
.footer-version{background:none;border:none;padding:4px 8px;margin:0;font-family:ui-monospace,monospace;font-size:0.78rem;color:var(--text-muted);opacity:0.6;cursor:pointer;border-radius:8px;transition:opacity 0.2s,background 0.2s;display:inline-flex;gap:8px;align-items:center;}
.footer-version:hover{opacity:1;background:rgba(111,95,228,0.08);}
.fv-detail{color:var(--primary);}
.fv-detail.fv-stale{color:var(--secondary);}

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

/* Elegant Light Cards */
.card {
    background:var(--card-bg);
    border:1px solid var(--card-border);
    border-radius:20px;
    padding:35px;
    box-shadow:0 6px 22px -8px rgba(111, 95, 228, 0.16), 0 2px 6px rgba(0, 0, 0, 0.04);
    transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card:hover{transform:translateY(-5px);box-shadow:0 16px 36px -10px rgba(111, 95, 228, 0.22), 0 4px 10px rgba(0, 0, 0, 0.05);}

#exercise-card:hover{transform:none;box-shadow:0 4px 15px rgba(0,0,0,0.03);}

/* Authenticated surface hierarchy. Feature sheets can keep their geometry; these explicit roles own
   material and depth so nested content no longer becomes a stack of equally bright white boxes.
   Dialogs that position THEMSELVES fixed (no overlay wrapper) must stay in the :not() exclusions:
   this compound selector is (0,2,0) and would override their single-class position:fixed. */
.surface-raised,.surface-base,.surface-flush,.surface-item,.surface-quiet-frame,.instrument-frame:not(.shell-level-popover),.command-dialog:not(.shell-level-popover):not(.notification-panel){position:relative;}
body.app-shell-active:not(.app-shell-public-route):not(.hyper-theme) .surface-raised{border:1px solid var(--surface-edge-shade);background:var(--surface-raised-bg);box-shadow:var(--surface-shadow-raised);}
body.app-shell-active:not(.app-shell-public-route):not(.hyper-theme) .surface-base{border:1px solid var(--surface-edge-shade);background:var(--surface-base-bg);box-shadow:var(--surface-shadow-base);backdrop-filter:none;-webkit-backdrop-filter:none;}
body.app-shell-active:not(.app-shell-public-route):not(.hyper-theme) .surface-flush{border-color:transparent;background:var(--surface-flush-bg);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;}
body.app-shell-active:not(.app-shell-public-route):not(.hyper-theme) .surface-item{--surface-item-signal:var(--surface-item-keyline);border-color:var(--surface-item-edge);background:var(--surface-item-bg);box-shadow:inset 2px 0 var(--surface-item-signal),var(--surface-item-shadow);transition:transform 0.18s ease,border-color 0.18s ease,background 0.18s ease,box-shadow 0.18s ease;}
body.app-shell-active:not(.app-shell-public-route):not(.hyper-theme) .surface-item::before{content:'';position:absolute;top:-1px;left:18px;width:34px;height:2px;border-radius:0 0 999px 999px;background:linear-gradient(90deg,transparent,var(--surface-item-signal),transparent);opacity:0.68;pointer-events:none;}
body.app-shell-active:not(.app-shell-public-route):not(.hyper-theme) :is(a,button,[role="button"]).surface-item:hover{transform:translateY(-1px);border-color:var(--surface-item-edge-hover);background:var(--surface-item-bg-hover);box-shadow:inset 2px 0 var(--surface-item-signal),var(--surface-item-shadow-hover);}
body.app-shell-active:not(.app-shell-public-route):not(.hyper-theme) :is(a,button,[role="button"]).surface-item:focus-visible{outline:3px solid var(--primary-glow);outline-offset:2px;border-color:var(--primary);box-shadow:inset 2px 0 var(--surface-item-signal),var(--surface-item-shadow-hover);}
body.app-shell-active:not(.app-shell-public-route):not(.hyper-theme) .surface-item:is(.is-active,.is-recommended,[aria-pressed="true"],[aria-current="true"]){--surface-item-signal:var(--signal-cyan);border-color:var(--signal-cyan-edge);background:var(--surface-item-bg-promoted);box-shadow:inset 3px 0 var(--surface-item-signal),0 16px 34px -25px var(--signal-cyan-glow),inset 0 1px rgba(255,255,255,0.92);}
body.app-shell-active:not(.app-shell-public-route):not(.hyper-theme) .surface-item.is-done{--surface-item-signal:var(--success);border-color:rgba(16,185,129,0.26);}
body.app-shell-active:not(.app-shell-public-route):not(.hyper-theme) .surface-item:is(.surface-item-warm,.is-due){--surface-item-signal:var(--secondary);border-color:rgba(218,145,40,0.27);background:rgba(244,162,60,0.075);}
body.app-shell-active:not(.app-shell-public-route):not(.hyper-theme) .card{border-color:var(--surface-edge-shade);background:var(--surface-base-bg);box-shadow:var(--surface-shadow-base);}
body.app-shell-active:not(.app-shell-public-route):not(.hyper-theme) .card:hover{border-color:rgba(79,62,143,0.25);box-shadow:0 22px 48px -38px rgba(40,28,91,0.5),inset 0 1px rgba(255,255,255,0.88);}

/* Quiet instrument frame: large base sections get one inset edge and two compact circuit traces.
   It is intentionally calmer than an instrument frame and never auto-enrols repeated cards. */
body.app-shell-active:not(.app-shell-public-route):not(.hyper-theme) .surface-quiet-frame>.surface-quiet-overlay {
    position:absolute;
    inset:3px;
    z-index:0;
    display:block;
    overflow:hidden;
    border:1px solid rgba(96,78,169,0.155);
    border-radius:17px;
    background:radial-gradient(circle at 0 0,var(--surface-quiet-wash,rgba(111,95,228,0.035)),transparent 54%),linear-gradient(115deg,rgba(111,95,228,0.016),transparent 42%,rgba(244,130,92,0.018));
    box-shadow:inset 0 1px rgba(255,255,255,0.64),inset 0 -1px rgba(244,130,92,0.07),0 0 0 1px rgba(255,255,255,0.16);
    pointer-events:none;
}
body.app-shell-active:not(.app-shell-public-route):not(.hyper-theme) .surface-quiet-frame>.surface-quiet-overlay::before,body.app-shell-active:not(.app-shell-public-route):not(.hyper-theme) .surface-quiet-frame>.surface-quiet-overlay::after{content:'';position:absolute;width:96px;height:20px;opacity:0.7;}
body.app-shell-active:not(.app-shell-public-route):not(.hyper-theme) .surface-quiet-frame>.surface-quiet-overlay::before{top:-1px;left:18px;background:linear-gradient(var(--instrument-line-cool),var(--instrument-line-cool)) 0 0/38px 1px no-repeat,linear-gradient(135deg,transparent 46%,var(--instrument-line-cool) 47% 53%,transparent 54%) 38px 0/15px 15px no-repeat,linear-gradient(var(--instrument-line-cool),var(--instrument-line-cool)) 53px 14px/28px 1px no-repeat,radial-gradient(circle,var(--signal-cyan) 0 1.2px,transparent 1.7px) 80px 11px/5px 5px no-repeat;}
body.app-shell-active:not(.app-shell-public-route):not(.hyper-theme) .surface-quiet-frame>.surface-quiet-overlay::after{right:18px;bottom:-1px;background:linear-gradient(var(--instrument-line-warm),var(--instrument-line-warm)) 58px 19px/38px 1px no-repeat,linear-gradient(135deg,transparent 46%,var(--instrument-line-warm) 47% 53%,transparent 54%) 43px 5px/15px 15px no-repeat,linear-gradient(var(--instrument-line-warm),var(--instrument-line-warm)) 15px 5px/28px 1px no-repeat,radial-gradient(circle,var(--secondary) 0 1.2px,transparent 1.7px) 10px 2px/5px 5px no-repeat;}

/* Selective instrument frame: one inert overlay supplies the inset edge and two short trace
   clusters. It is opt-in—the shell's established corner language remains a separate motif. */
.instrument-frame>.instrument-frame-overlay {
    position:absolute;
    inset:8px;
    z-index:6;
    display:block;
    overflow:hidden;
    border:1px solid rgba(111,95,228,0.14);
    border-radius:16px;
    box-shadow:inset 0 1px var(--surface-edge-lit),inset 0 -1px rgba(244,130,92,0.11);
    pointer-events:none;
}
.instrument-frame>.instrument-frame-overlay::before,.instrument-frame>.instrument-frame-overlay::after{content:'';position:absolute;width:132px;height:28px;opacity:0.72;}
.instrument-frame>.instrument-frame-overlay::before{top:-1px;left:30px;background:linear-gradient(var(--instrument-line-cool),var(--instrument-line-cool)) 0 0/62px 1px no-repeat,linear-gradient(135deg,transparent 47%,var(--instrument-line-cool) 48% 52%,transparent 53%) 62px 0/22px 22px no-repeat,linear-gradient(var(--instrument-line-cool),var(--instrument-line-cool)) 84px 21px/42px 1px no-repeat,radial-gradient(circle,var(--signal-cyan) 0 1.5px,transparent 2px) 124px 18px/5px 5px no-repeat;}
.instrument-frame>.instrument-frame-overlay::after{right:30px;bottom:-1px;background:linear-gradient(var(--instrument-line-warm),var(--instrument-line-warm)) 70px 27px/62px 1px no-repeat,linear-gradient(135deg,transparent 47%,var(--instrument-line-warm) 48% 52%,transparent 53%) 48px 6px/22px 22px no-repeat,linear-gradient(var(--instrument-line-warm),var(--instrument-line-warm)) 6px 6px/42px 1px no-repeat,radial-gradient(circle,var(--secondary) 0 1.5px,transparent 2px) 1px 3px/5px 5px no-repeat;}
.instrument-frame.instrument-trace-bottom-left>.instrument-frame-overlay::after{right:auto;left:30px;transform:scaleX(-1);}
body.app-shell-active:not(.app-shell-public-route):not(.hyper-theme) .instrument-frame{box-shadow:var(--surface-shadow-raised),inset 0 1px var(--surface-edge-lit),inset 0 -1px rgba(244,130,92,0.13);}
@supports(backdrop-filter:blur(1px)){
    body.app-shell-active:not(.app-shell-public-route):not(.hyper-theme) .surface-raised.instrument-frame{backdrop-filter:blur(9px) saturate(108%);-webkit-backdrop-filter:blur(9px) saturate(108%);}
}

/* Shared command-dialog material and icon orbit. Existing dialog controllers retain ownership of
   focus, Escape, backdrop and action semantics. */
body.app-shell-active:not(.app-shell-public-route):not(.hyper-theme) .command-dialog{border:1px solid rgba(74,57,137,0.24);background-color:#FBF9FD;background-image:radial-gradient(circle at 13% 0,rgba(111,95,228,0.13),transparent 230px),radial-gradient(circle at 100% 100%,rgba(244,130,92,0.1),transparent 240px),linear-gradient(rgba(111,95,228,0.035) 1px,transparent 1px),linear-gradient(90deg,rgba(111,95,228,0.035) 1px,transparent 1px);background-size:auto,auto,22px 22px,22px 22px;box-shadow:0 34px 90px -28px rgba(20,14,48,0.72),inset 0 1px rgba(255,255,255,0.96);}
.command-dialog-orbit{position:relative;display:grid;place-items:center;flex:0 0 54px;width:54px;height:54px;border:1px solid var(--signal-cyan-edge);border-radius:17px;background:linear-gradient(145deg,var(--signal-cyan-soft),rgba(111,95,228,0.1));color:var(--primary);font-size:1.12rem;box-shadow:inset 0 1px rgba(255,255,255,0.88),0 10px 24px -18px var(--signal-cyan-glow);}
.command-dialog-orbit::before,.command-dialog-orbit::after{content:'';position:absolute;border:1px solid rgba(111,95,228,0.13);border-radius:50%;pointer-events:none;}
.command-dialog-orbit::before{inset:-8px;}
.command-dialog-orbit::after{inset:-15px;border-color:rgba(11,113,128,0.09);}
.command-dialog-title-row{display:flex;align-items:center;gap:17px;}
.command-dialog-title-row>div{min-width:0;}

/* One opt-in emphasized action per view/dialog. Cyan remains a live-signal accent; the action glow
   stays in the primary violet family. */
.btn-instrument-primary{position:relative;isolation:isolate;overflow:hidden;box-shadow:inset 0 1px rgba(255,255,255,0.36),0 0 0 1px rgba(111,95,228,0.13),0 10px 28px -13px rgba(111,95,228,0.72),0 0 24px rgba(111,95,228,0.17)!important;}
.btn-instrument-primary::after{content:'';position:absolute;right:20%;bottom:3px;left:20%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.58),transparent);opacity:0.8;pointer-events:none;}
.btn-instrument-primary:hover{box-shadow:inset 0 1px rgba(255,255,255,0.4),0 0 0 1px rgba(111,95,228,0.18),0 14px 32px -13px rgba(111,95,228,0.78),0 0 28px rgba(111,95,228,0.2)!important;}
.btn-instrument-secondary{border-color:rgba(188,91,59,0.22)!important;background:rgba(244,130,92,0.08)!important;box-shadow:inset 0 1px rgba(255,255,255,0.65)!important;color:#A8482E!important;}
.btn-instrument-secondary:hover{border-color:rgba(188,91,59,0.34)!important;background:rgba(244,130,92,0.13)!important;}

.module-focal-art{display:block;flex:none;width:clamp(92px,10vw,144px);height:clamp(92px,10vw,144px);object-fit:contain;filter:drop-shadow(0 18px 16px rgba(50,35,105,0.16));}

/* Four-corner shell instrumentation. Content surfaces now opt into the separate instrument frame
   above instead of being auto-enrolled by their class suffix. */
.surface-corners-anchor{position:relative;}
.has-surface-corners>.surface-corners {
    --surface-corner-size:27px;
    --surface-corner-cool:rgba(126,108,235,0.3);
    --surface-corner-warm:rgba(244,130,92,0.21);
    position:absolute;
    inset:10px;
    z-index:6;
    display:block;
    pointer-events:none;
    opacity:0.7;
    filter:drop-shadow(0 0 4px rgba(111,95,228,0.16));
}
.has-surface-corners>.surface-corners::before,.has-surface-corners>.surface-corners::after {
    content:'';
    position:absolute;
    right:0;
    left:0;
    height:var(--surface-corner-size);
    -webkit-mask:linear-gradient(90deg,#000 0 var(--surface-corner-size),transparent var(--surface-corner-size) calc(100% - var(--surface-corner-size)),#000 calc(100% - var(--surface-corner-size)));
    mask:linear-gradient(90deg,#000 0 var(--surface-corner-size),transparent var(--surface-corner-size) calc(100% - var(--surface-corner-size)),#000 calc(100% - var(--surface-corner-size)));
}
.has-surface-corners>.surface-corners::before{top:0;border-top:1px solid var(--surface-corner-cool);border-right:1px solid var(--surface-corner-cool);border-left:1px solid var(--surface-corner-cool);border-radius:8px 8px 0 0;}
.has-surface-corners>.surface-corners::after{bottom:0;border-right:1px solid var(--surface-corner-warm);border-bottom:1px solid var(--surface-corner-warm);border-left:1px solid var(--surface-corner-warm);border-radius:0 0 8px 8px;}
.surface-corners-subtle>.surface-corners{--surface-corner-size:20px;inset:8px;opacity:0.48;}
.admin-tab-content>.surface-corners,.profile-tab-content>.surface-corners{--surface-corner-size:30px;opacity:0.8;}
.site-footer>.surface-corners{--surface-corner-size:28px;inset:10px;opacity:0.62;}
.lframe-layout .sidebar-menu-card>.surface-corners{--surface-corner-size:24px;--surface-corner-cool:rgba(184,174,255,0.32);--surface-corner-warm:rgba(244,130,92,0.25);inset:8px;opacity:0.68;}
body.hyper-theme .has-surface-corners>.surface-corners{--surface-corner-cool:rgba(184,174,255,0.45);--surface-corner-warm:rgba(244,130,92,0.34);}

/* Grid Layouts */
/* Typography */
h1 {
    font-family:var(--font-display);
    font-size:2.8rem;
    font-weight:900;
    margin-bottom:15px;
    color:var(--text-color);
    letter-spacing:-0.5px;
}

/* Vibrant gradient for light mode */
h1.glow-text{background:linear-gradient(135deg, var(--primary), var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}

h2 {
    font-family:var(--font-display);
    font-size:1.6rem;
    margin-bottom:12px;
    font-weight:800;
    color:var(--text-color);
    display:flex;
    align-items:center;
    gap:10px;
}

h2 i{color:var(--primary);}

h3 {
    font-size:1.1rem;
    color:var(--text-muted);
    margin-bottom:8px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:1px;
}

p{font-size:1.15rem;color:var(--text-muted);margin-bottom:25px;font-weight:600;}

/* Quiet command controls: crisp keyline, shallow depth, no game-like ledge. */
.btn {
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:12px 28px;
    background:linear-gradient(135deg,#7567e2 0%,#6558d5 100%);
    color:white;
    text-decoration:none;
    border-radius:12px;
    font-weight:780;
    font-size:1rem;
    border:1px solid rgba(60,45,148,0.24);
    cursor:pointer;
    transition:background 0.2s ease,box-shadow 0.2s cubic-bezier(0.4,0,0.2,1),transform 0.2s cubic-bezier(0.4,0,0.2,1);
    box-shadow:inset 0 1px rgba(255,255,255,0.24),0 10px 22px -16px rgba(55,39,146,0.88);
}
.btn:disabled {
    background:#475569 !important;/* slate-600 */
    box-shadow:none !important;
    cursor:not-allowed;
    transform:none !important;
    opacity:0.6 !important;
    border-color:#475569 !important;
    color:#94a3b8 !important;
    filter:grayscale(100%) !important;
}
.btn:disabled i{color:#94a3b8!important;filter:grayscale(100%)!important;}

.btn:hover{background:linear-gradient(135deg,#7d70e8 0%,#6a5cda 100%);transform:translateY(-1px);box-shadow:inset 0 1px rgba(255,255,255,0.28),0 13px 25px -16px rgba(55,39,146,0.94);}

.btn:active{transform:translateY(0);box-shadow:inset 0 1px 3px rgba(39,27,108,0.24),0 6px 14px -12px rgba(55,39,146,0.8);}

.btn.secondary{background:linear-gradient(135deg,#F58A67 0%,#EE7550 100%);border-color:rgba(169,65,35,0.2);box-shadow:inset 0 1px rgba(255,255,255,0.25),0 10px 22px -16px rgba(176,65,34,0.75);}

.btn.secondary:hover{background:linear-gradient(135deg,#FA916E 0%,#F27A55 100%);box-shadow:inset 0 1px rgba(255,255,255,0.3),0 13px 25px -16px rgba(176,65,34,0.82);}

.btn.secondary:active{box-shadow:inset 0 1px 3px rgba(111,38,19,0.2),0 6px 14px -12px rgba(176,65,34,0.72);}

.btn.btn-success{background:var(--success);border-color:rgba(5,125,87,0.24);box-shadow:0 6px 15px rgba(16, 185, 129, 0.4);}

.btn.btn-success:hover{background:#059669;box-shadow:0 8px 20px rgba(16, 185, 129, 0.6);}

.btn.gold{background:var(--accent);border-color:rgba(174,99,13,0.22);box-shadow:0 6px 15px var(--accent-glow);}

.btn.gold:hover{background:var(--accent-hover);box-shadow:0 8px 20px var(--accent-glow);}

.btn.danger{background:var(--danger);border-color:rgba(154,24,24,0.22);box-shadow:0 6px 15px var(--danger-glow);}

.btn.danger:hover{background:var(--danger-hover);box-shadow:0 8px 20px var(--danger-glow);}

.btn-exit-session {
    position:fixed;
    top:20px;
    right:20px;
    z-index:10001;
    background:rgba(0,0,0,0.5);
    color:#fff;
    width:40px;
    height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    text-decoration:none;
    font-size:1.2rem;
    transition:background 0.2s;
    border:1px solid rgba(255,255,255,0.2);
    cursor:pointer;
}
.btn-exit-session:hover{background:rgba(239, 68, 68, 0.8);border-color:rgba(239, 68, 68, 1);}

.mobile-menu-toggle {
    display:none;
    place-items:center;
    width:40px;
    height:40px;
    padding:0;
    border:0;
    border-radius:10px;
    background:transparent;
    color:var(--primary);
    font-size:1.2rem;
    cursor:pointer;
    box-shadow:none;
    transition:background 0.2s,transform 0.2s;
}
.mobile-menu-toggle:hover,.mobile-menu-toggle:focus-visible{background:rgba(111,95,228,0.09);transform:translateY(-1px);}
.nav-logo-container{position:relative;display:flex;align-items:center;gap:9px;margin-right:8px;padding:5px 18px 5px 3px;text-decoration:none;}
.nav-logo-container::after{content:'';position:absolute;top:7px;right:0;bottom:7px;width:1px;background:linear-gradient(transparent,rgba(190,181,255,0.34),transparent);}
.nav-logo-img{height:34px;width:34px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(111,95,228,0.2));}
.nav-logo-word{font-family:var(--font-display),sans-serif;font-weight:800;font-size:1.4rem;letter-spacing:-.5px;color:var(--shell-nav-text);line-height:1;text-shadow:0 0 18px rgba(190,181,255,0.12);}
.deletion-banner-link{color:#fff;text-decoration:underline;font-weight:bold;margin-left:10px;}
.flag-icon-round {
    border-radius:50%;
    width:1em;
    height:1em;
    display:inline-block;
    flex-shrink:0;
    background-size:cover;
    background-position:center;
}
.flag-icon-round.large{font-size:1.2rem;}
.nojs-note{max-width:640px;margin:60px auto;padding:20px 24px;text-align:center;color:var(--text-muted);background:var(--card-glass);border:1.5px solid var(--card-border);border-radius:16px;}
.nav-right-actions{margin-left:auto;padding-left:14px;border-left:1px solid rgba(111,95,228,0.12);display:flex;align-items:center;gap:10px;flex-shrink:0;}
.nav-dropdown-trigger{position:relative;cursor:pointer;}
.nav-lang-btn {
    font-size:1.35rem;
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    overflow:hidden;
    border:1px solid rgba(111,95,228,0.16);
    border-radius:12px;
    background:rgba(255,255,255,0.62);
    box-shadow:inset 0 1px rgba(255,255,255,0.92),0 8px 22px -16px rgba(111,95,228,0.5);
    transition:background 0.2s,border-color 0.2s,transform 0.2s;
}
.nav-lang-btn:hover{border-color:rgba(111,95,228,0.3);background:rgba(111,95,228,0.1);transform:translateY(-1px);}
.dropdown-title{font-weight:bold;margin-bottom:10px;font-size:0.9rem;color:var(--text-muted);}
.lang-option{padding:8px;border-radius:4px;display:flex;align-items:center;gap:10px;color:var(--text-color);cursor:pointer;}
.lang-option.active-lang{cursor:default;opacity:0.5;pointer-events:none;}
.lang-option.lang-disabled{cursor:default;opacity:0.45;}
.lang-soon-icon{margin-left:auto;color:var(--text-muted);font-size:0.8rem;}
.lang-check-icon{margin-left:auto;color:var(--primary);font-size:0.9rem;}
.nav-user-avatar {
    position:relative;
    width:40px;
    height:40px;
    border:1px solid rgba(204,196,255,0.28);
    border-radius:12px;
    background:linear-gradient(145deg,#7968EB,#5948C8);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:bold;
    font-size:1.2rem;
    box-shadow:inset 0 1px rgba(255,255,255,0.22),0 8px 22px -14px rgba(111,95,228,0.9);
    transition:border-color 0.2s,box-shadow 0.2s,transform 0.2s;
}
.nav-user-avatar:hover{border-color:rgba(224,218,255,0.52);box-shadow:inset 0 1px rgba(255,255,255,0.24),0 0 18px rgba(111,95,228,0.28);transform:translateY(-1px);}
.nav-notification-btn {
    position:relative;
    display:grid; place-items:center;
    width:40px; height:40px; padding:0;
    border:1px solid rgba(111,95,228,0.16); border-radius:12px;
    background:rgba(255,255,255,0.62); color:var(--shell-nav-text);
    box-shadow:inset 0 1px rgba(255,255,255,0.92),0 8px 22px -16px rgba(111,95,228,0.5);
    cursor:pointer; font:inherit;
    transition:background 0.2s,border-color 0.2s,transform 0.2s,box-shadow 0.2s;
}
.nav-notification-btn:hover,.nav-notification-btn[aria-expanded="true"]{border-color:rgba(111,95,228,0.38);background:rgba(111,95,228,0.1);box-shadow:inset 0 1px rgba(255,255,255,0.92),0 10px 24px -16px rgba(111,95,228,0.6);transform:translateY(-1px);}
.nav-notification-btn:focus-visible,.notification-item:focus-visible,.notification-panel-close:focus-visible,.notification-mark-all:focus-visible,.notification-retry:focus-visible{outline:3px solid var(--primary-glow);outline-offset:2px;}
.nav-notification-badge {
    position:absolute; top:-5px; right:-5px;
    display:grid; place-items:center;
    min-width:18px; height:18px; padding:0 4px;
    border:2px solid var(--bg-color); border-radius:999px;
    background:var(--secondary); color:#fff;
    font-size:0.62rem; font-weight:800; line-height:1;
    pointer-events:none;
}
.notification-panel {
    position:fixed; top:calc(var(--app-header-height) + 10px); right:20px; z-index:3100;
    width:min(390px,calc(100vw - 32px)); max-height:min(560px,calc(100dvh - var(--app-header-height) - 24px));
    overflow:hidden;
    border:1px solid rgba(74,57,137,0.24); border-radius:18px;
    background:var(--card-bg); color:var(--text-color);
    box-shadow:0 30px 76px -30px rgba(20,14,48,0.68),inset 0 1px rgba(255,255,255,0.94);
}
.notification-panel[hidden]{display:none!important;}
.notification-panel-head {
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    min-height:58px; padding:11px 12px 10px 15px;
    border-bottom:1px solid rgba(111,95,228,0.12);
}
.notification-panel-title{margin:0;color:var(--text-color);font-size:1rem;}
.notification-panel-actions{display:flex;align-items:center;gap:4px;flex-shrink:0;}
.notification-mark-all,.notification-panel-close{border:0;background:transparent;color:var(--primary);font-family:inherit;font-weight:800;cursor:pointer;}
.notification-mark-all{min-height:36px;padding:6px 8px;border-radius:9px;font-size:0.76rem;}
.notification-mark-all:hover:not(:disabled){background:rgba(111,95,228,0.1);}
.notification-mark-all:disabled{color:var(--text-muted);cursor:default;opacity:0.65;}
.notification-panel-close{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;font-size:1rem;}
.notification-panel-close:hover{background:rgba(111,95,228,0.1);}
.notification-panel-body{min-height:128px;max-height:calc(min(560px,100dvh - var(--app-header-height) - 24px) - 59px);overflow-y:auto;overscroll-behavior:contain;}
.notification-state{min-height:128px;display:grid;place-content:center;justify-items:center;gap:10px;padding:22px;color:var(--text-muted);text-align:center;}
.notification-state p{margin:0;font-size:0.84rem;line-height:1.45;}
.notification-state.is-error{color:var(--danger);}
.notification-retry{min-height:36px;padding:7px 11px;border:1px solid var(--card-border);border-radius:9px;background:var(--bg-color);color:var(--text-color);font-family:inherit;font-weight:700;cursor:pointer;}
.notification-list{display:flex;flex-direction:column;padding:7px;}
.notification-item {
    display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:start; gap:9px;
    width:100%; padding:10px; border:1px solid transparent; border-radius:12px;
    background:transparent; color:var(--text-color); font-family:inherit; text-align:left; cursor:pointer;
    transition:border-color 0.16s,background 0.16s,transform 0.16s;
}
.notification-item:hover{border-color:rgba(111,95,228,0.2);background:rgba(111,95,228,0.07);transform:translateY(-1px);}
.notification-item.is-unread{border-color:rgba(111,95,228,0.16);background:linear-gradient(100deg,rgba(111,95,228,0.11),rgba(111,95,228,0.025));}
.notification-item-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:rgba(111,95,228,0.12);color:var(--primary);}
.notification-item-copy{min-width:0;display:flex;flex-direction:column;gap:3px;}
.notification-item-copy strong{overflow:hidden;color:var(--text-color);font-size:0.82rem;line-height:1.25;text-overflow:ellipsis;white-space:nowrap;}
.notification-item-copy>span{display:-webkit-box;overflow:hidden;color:var(--text-muted);font-size:0.74rem;line-height:1.35;-webkit-box-orient:vertical;-webkit-line-clamp:2;}
.notification-item-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;color:var(--text-muted);font-size:0.63rem;line-height:1.2;white-space:nowrap;}
.notification-item-count{padding:2px 5px;border-radius:999px;background:rgba(244,130,92,0.13);color:var(--secondary);font-weight:800;}
body.hyper-theme>header .nav-notification-btn{border-color:rgba(190,181,255,0.2);background:rgba(255,255,255,0.045);color:var(--shell-nav-text);box-shadow:inset 0 1px rgba(255,255,255,0.1),0 8px 22px -16px rgba(111,95,228,0.9);}
body.hyper-theme>header .mobile-menu-toggle{background:transparent;color:var(--shell-nav-text);box-shadow:none;}
body.hyper-theme>header .nav-lang-btn{border-color:rgba(190,181,255,0.2);background:rgba(255,255,255,0.045);color:var(--shell-nav-text);box-shadow:inset 0 1px rgba(255,255,255,0.1),0 8px 22px -16px rgba(111,95,228,0.9);}
body.hyper-theme>header .nav-right-actions{border-left-color:rgba(190,181,255,0.14);}
body.hyper-theme>header .nav-logo-img{filter:drop-shadow(0 0 10px rgba(133,116,255,0.34));}
.dropdown-item {
    display:block;
    padding:8px;
    color:var(--text-color);
    text-decoration:none;
    border-radius:4px;
    margin:0;
}
.dropdown-item-danger {
    display:block;
    padding:8px;
    color:var(--danger);
    text-decoration:none;
    border-radius:4px;
    margin:0;
    font-weight:bold;
}
.user-dropdown-menu{padding:8px;border-color:rgba(111,95,228,0.18);border-radius:14px;background:radial-gradient(circle at 92% 5%,rgba(111,95,228,0.09),transparent 90px),var(--card-bg);box-shadow:0 18px 38px -18px rgba(42,32,93,0.34),inset 0 1px rgba(255,255,255,0.78);}
#main-nav .user-dropdown-menu a {
    min-height:40px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:8px 10px;
    border-radius:9px;
    color:var(--text-color);
    font-weight:700;
    transition:background 0.2s,color 0.2s,transform 0.2s;
}
#main-nav .user-dropdown-menu a>i{width:18px;text-align:center;color:var(--primary);opacity:0.72;transition:color 0.2s,opacity 0.2s,transform 0.2s;}
#main-nav .user-dropdown-menu a:hover,#main-nav .user-dropdown-menu a:focus-visible,#main-nav .user-dropdown-menu a.active{background:rgba(111,95,228,0.1);color:var(--primary)!important;transform:translateX(2px);}
#main-nav .user-dropdown-menu a:hover>i,#main-nav .user-dropdown-menu a:focus-visible>i,#main-nav .user-dropdown-menu a.active>i{opacity:1;transform:scale(1.08);}
#main-nav .user-dropdown-menu .dropdown-item-danger{color:var(--text-color);}
#main-nav .user-dropdown-menu .dropdown-item-danger>i{color:var(--secondary);}
#main-nav .user-dropdown-menu .dropdown-item-logout{margin-top:4px;border-top:1px solid rgba(111,95,228,0.1);border-radius:0 0 9px 9px;}
#main-nav .user-dropdown-menu .dropdown-item-logout:hover,#main-nav .user-dropdown-menu .dropdown-item-logout:focus-visible{background:rgba(239,68,68,0.08);color:var(--danger)!important;}
#main-nav .user-dropdown-menu .dropdown-item-logout>i{color:var(--danger);}
/* Items INSIDE nav dropdowns (profile menu, the "More" overflow, the language picker) trade the
   nav's bottom underline for a vertical accent bar on the LEFT — a better fit for stacked rows.
   Top-level nav links keep their underline untouched. */
#main-nav .dropdown-menu a::after {
    bottom:auto;
    left:0;
    top:50%;
    width:3px;
    height:0;
    transform:translateY(-50%);
    background:linear-gradient(180deg,var(--primary),var(--secondary));
}
#main-nav .dropdown-menu a:hover::after,#main-nav .dropdown-menu a:focus::after,#main-nav .dropdown-menu a.active::after{width:3px;height:60%;}
.lang-option{position:relative;overflow:hidden;}
.lang-option::after {
    content:'';
    position:absolute;
    left:0;
    top:50%;
    width:3px;
    height:0;
    transform:translateY(-50%);
    background:linear-gradient(180deg,var(--primary),var(--secondary));
    transition:height 0.3s ease;
    border-radius:2px;
}
.lang-option:hover::after{height:60%;}
.lang-option.active-lang::after,.lang-option.lang-disabled::after{display:none;}
.nav-login-btn{margin-left:auto;color:var(--primary);}

#route-loading-bar {
    position:fixed;
    top:0;
    left:0;
    height:3px;
    background:var(--secondary);
    box-shadow:0 0 8px var(--secondary-glow);
    width:0;
    opacity:0;
    z-index:99999;
    pointer-events:none;
    transition:width 0.2s ease-out,opacity 0.2s ease-out;
}

.app-tooltip{position:absolute;z-index:99999;background:var(--text-color);color:#fff;padding:7px 11px;border-radius:9px;font-size:0.76rem;font-weight:700;letter-spacing:0.2px;white-space:normal;max-width:min(280px,80vw);line-height:1.45;text-align:center;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity 0.16s ease,transform 0.16s ease;box-shadow:0 8px 22px rgba(42,39,64,0.25);}
.app-tooltip.visible{opacity:1;transform:translateY(0);}
.app-tooltip::after{content:'';position:absolute;top:100%;left:var(--arrow-x,50%);transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--text-color);}
.app-tooltip.below::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--text-color);}
.app-tooltip.right{transform:translateX(-4px);}
.app-tooltip.right.visible{transform:translateX(0);}
.app-tooltip.right::after{top:var(--arrow-y,50%);right:100%;left:auto;transform:translateY(-50%);border-color:transparent;border-right-color:var(--text-color);}
.app-tooltip.left{transform:translateX(4px);}
.app-tooltip.left.visible{transform:translateX(0);}
.app-tooltip.left::after{top:var(--arrow-y,50%);right:auto;left:100%;transform:translateY(-50%);border-color:transparent;border-left-color:var(--text-color);}

/* FontAwesome loads DEFERRED on the SSR pages, so every <i> starts as a zero-size empty inline
   element and pops to glyph size when all.min.css flips live — PSI measured that pop as
   CLS 0.211 on the landing (desktop 97 → 88). Until html.fa-css is set (by the defer-flip
   script in index.php, or baked into the app shell where FA blocks), reserve ~an em per icon. */
html:not(.fa-css) i[class^="fa-"],html:not(.fa-css) i[class*=" fa-"]{display:inline-block;min-width:1em;min-height:1em;}

/* Cookie consent banner — critical CSS: the banner ships visible in the shell markup and must be
   fully styled at FIRST paint. It used to live in deferred pages.css behind a JS reveal, which
   made its late paint the mobile LCP (2.3 s render delay). .cookie-answered is set pre-paint by
   the inline script in index.php when a stored choice exists (main.js owns the buttons). */
.cookie-banner {
    position:fixed;
    bottom:24px;
    right:24px;
    max-width:420px;
    background:rgba(255,255,255,0.85);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border:2px solid var(--card-border);
    border-radius:24px;
    padding:24px;
    box-shadow:0 15px 35px rgba(111,95,228,0.12);
    z-index:9999;
    display:flex;
    flex-direction:column;
    gap:18px;
    transition:transform 0.4s cubic-bezier(0.16,1,0.3,1),opacity 0.4s;
}
.cookie-answered .cookie-banner{display:none;}
.hyper-theme .cookie-banner{background:rgba(15,23,42,0.85);box-shadow:0 15px 35px rgba(0,0,0,0.3);}
.cookie-banner.hidden{transform:translateY(120px) scale(0.95);opacity:0;pointer-events:none;}
.cookie-content{display:flex;gap:15px;align-items:flex-start;}
.cookie-icon{font-size:2.2rem;color:var(--primary);filter:drop-shadow(0 0 8px rgba(111,95,228,0.25));margin-top:2px;}
.cookie-text{display:flex;flex-direction:column;gap:5px;}
.cookie-text .cookie-title{font-size:1.1rem;font-weight:800;color:var(--text-color);margin:0;}
.cookie-text p{font-size:0.9rem;line-height:1.5;color:var(--text-muted);margin:0;}
.cookie-actions{display:flex;gap:10px;justify-content:flex-end;}
.cookie-btn{padding:8px 16px !important;font-size:0.95rem !important;font-weight:700 !important;border-radius:10px !important;}
/* Decline as a neutral ghost button: white-on-coral is ~2.5:1 (fails WCAG AA) and a quieter
   decline is honest cookie-banner UX anyway. Scoped here — the brand secondary stays coral. */
.cookie-btn.secondary{background:#fff;color:var(--text-color);border:1.5px solid var(--card-border);box-shadow:none;}
.cookie-btn.secondary:hover{background:var(--card-border);color:var(--text-color);box-shadow:none;}
/* hyper-theme flips --text-color near-white — on the hard-coded #fff ghost button that was
   white-on-white (label invisible until hover). Match the banner's dark skin instead. */
.hyper-theme .cookie-btn.secondary{background:rgba(15,23,42,0.6);color:#f8fafc;border-color:#334155;}
.hyper-theme .cookie-btn.secondary:hover{background:#1e293b;color:#f8fafc;}


/* ---------- Toasts (save/action feedback, lower right — the Vewport pattern) ---------- */
/* 64 — #corner-stack is THE fixed lower-right column — toasts on top, the job tracker pinned at the
   bottom (DOM order, toast.js inserts toasts first, genjobs-panel appends last). Neither child is
   position:fixed anymore, so they can never overlap. */
#corner-stack{position:fixed;bottom:1.5rem;right:1.5rem;z-index:3000;display:flex;flex-direction:column;align-items:flex-end;gap:0.6rem;pointer-events:none;}
#corner-stack > *{pointer-events:auto;}
.toast-stack {
    display:flex;
    flex-direction:column;
    gap:0.6rem;
    max-width:min(380px,92vw);
}
.toast {
    display:flex;
    align-items:center;
    gap:0.7rem;
    padding:0.85rem 1rem;
    border-radius:12px;
    background:var(--card-bg);
    color:var(--text-color);
    border:1px solid var(--card-border);
    box-shadow:0 10px 28px rgba(42,39,64,0.18);
    font-size:0.9rem;
    font-weight:600;
    cursor:pointer;
    opacity:0;
    transform:translateX(20px);
    transition:opacity 0.25s ease,transform 0.25s ease;
}
.toast.show{opacity:1;transform:none;}
.toast-icon{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;flex:none;font-size:0.72rem;color:#fff;}
.toast-success .toast-icon{background:var(--success);}
.toast-error .toast-icon{background:var(--danger);}
.toast-info .toast-icon{background:var(--primary);}
.toast-success{border-left:3px solid var(--success);}
.toast-error{border-left:3px solid var(--danger);}
.toast-info{border-left:3px solid var(--primary);}
.toast-msg{flex:1;}

/* ---------- Server-job status panel (Phase 60): polled lower-right run cards ---------- */
.genjobs-stack{display:flex;flex-direction:column;align-items:flex-end;gap:0.55rem;max-width:min(340px,92vw);}
.genjob-card {
    background:var(--card-bg);
    color:var(--text-color);
    border:1px solid var(--card-border);
    border-radius:12px;
    box-shadow:0 10px 28px rgba(42,39,64,0.18);
    padding:0.7rem 0.85rem;
    opacity:0;
    transform:translateX(20px);
    transition:opacity 0.25s ease,transform 0.25s ease;
}
.genjob-card.gj-in{opacity:1;transform:none;}
.genjob-card.gj-out{opacity:0;transform:translateX(20px);}
.gj-head{display:flex;align-items:center;gap:0.5rem;margin-bottom:0.45rem;}
.gj-label{flex:1;min-width:0;font-size:0.84rem;font-weight:700;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.gj-stop {
    flex:none;
    display:grid;
    place-items:center;
    width:24px;
    height:24px;
    border:none;
    border-radius:6px;
    background:var(--danger);
    color:#fff;
    font-size:0.66rem;
    cursor:pointer;
}
.gj-stop:hover{filter:brightness(1.08);}
.gj-expand {
    flex:none;
    display:grid;
    place-items:center;
    width:24px;
    height:24px;
    border:1px solid var(--card-border);
    border-radius:6px;
    background:var(--bg-color);
    color:var(--text-muted);
    font-size:0.66rem;
    cursor:pointer;
}
.gj-expand:hover{color:var(--text-color);}
.genjob-card.gj-open{max-width:min(340px,92vw);}
/* Expand/collapse animates max-height. The tidier grid-template-rows 0fr→1fr trick was tried first; it
   left a permanent ~9px sliver when CLOSED, because a grid ITEM is not clipped by a 0fr track — the
   inner wrapper's own padding+border still rendered. max-height with overflow:hidden on the OUTER box
   collapses to a true 0. It needs a ceiling instead — 280px clears the panel's real ~180px (8 detail
   rows) with room to spare, and the only cost of the slack is that the ease finishes slightly early.
   ⚠️ Measuring this in a BACKGROUND tab is worthless — transitions don't advance while document.hidden
   is true, so getComputedStyle just returns the start value (cost me a wrong diagnosis once). Verify
   with getAnimations() or a focused tab. */
.gj-details{max-height:0;opacity:0;margin-top:0;overflow:hidden;transition:max-height 0.3s ease,opacity 0.24s ease,margin-top 0.3s ease;}
.genjob-card.gj-open .gj-details{max-height:min(520px,65vh);opacity:1;margin-top:0.55rem;overflow-y:auto;}
.gj-details-in{padding-top:0.5rem;border-top:1px solid var(--card-border);display:flex;flex-direction:column;gap:0.28rem;}
.gj-expand i{transition:transform 0.3s ease;}
.genjob-card.gj-open .gj-expand i{transform:rotate(180deg);}
.gj-drow{display:flex;align-items:baseline;gap:0.5rem;font-size:0.75rem;line-height:1.35;}
.gj-dk{flex:none;min-width:74px;color:var(--text-muted);font-weight:700;}
.gj-dv{flex:1;min-width:0;color:var(--text-color);overflow-wrap:anywhere;font-variant-numeric:tabular-nums;}
.gj-bar{height:6px;border-radius:6px;background:var(--bg-color);overflow:hidden;}
.gj-fill{display:block;height:100%;width:0;border-radius:6px;background:var(--primary);transition:width 0.3s ease;}
.gj-sub{margin-top:0.4rem;font-size:0.76rem;color:var(--text-muted);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.genjob-card.gj-done .gj-fill{background:var(--success);}
.genjob-card.gj-stopped .gj-fill{background:var(--text-muted);}

/* ---------- Quiet button (59.1 design restraint: max 1-2 accent buttons per view) ---------- */
.btn-ghost {
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:7px 13px;
    border:1px solid var(--card-border);
    border-radius:8px;
    background:var(--bg-color);
    color:var(--text-color);
    font-size:0.83rem;
    font-weight:700;
    cursor:pointer;
    transition:all 0.15s ease;
}
.btn-ghost:hover{border-color:var(--primary);color:var(--primary);background:rgba(111,95,228,0.08);}
.btn-ghost.danger{color:var(--danger);}
.btn-ghost.danger:hover{border-color:var(--danger);color:var(--danger);background:rgba(239,68,68,0.08);}
.btn-ghost i{font-size:0.8em;}

/* ---------- Image lightbox (59.1) ---------- */
.lightbox-overlay {
    position:fixed;
    inset:0;
    z-index:4000;
    background:rgba(20,16,40,0.82);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:32px;
}
.lightbox-overlay.hidden{display:none;}
body.lightbox-open{overflow:hidden;}
.lightbox-frame{margin:0;max-width:min(1100px,94vw);max-height:90vh;display:flex;flex-direction:column;gap:10px;}
.lightbox-img{max-width:100%;max-height:80vh;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,0.5);object-fit:contain;background:#fff;}
.lightbox-caption{display:flex;justify-content:space-between;align-items:center;gap:14px;color:#fff;font-size:0.85rem;}
.lightbox-caption a{color:#cfc6ff;font-weight:700;}
.lightbox-close{position:absolute;top:18px;right:22px;width:40px;height:40px;border:none;border-radius:50%;background:rgba(255,255,255,0.14);color:#fff;font-size:1.1rem;cursor:pointer;}
.lightbox-close:hover{background:rgba(255,255,255,0.28);}

/* ---------- Stylized dropdown (59.2 — native <select> is banned in Profile/Admin) ---------- */
select[data-dd="1"]{display:none !important;}
.dd{position:relative;min-width:0;}
.dd-btn {
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
    padding:7px 11px;
    border:1px solid var(--card-border);
    border-radius:8px;
    background:var(--bg-color);
    color:var(--text-color);
    font-size:0.85rem;
    font-weight:700;
    cursor:pointer;
    text-align:left;
    transition:border-color 0.15s ease;
}
.dd-btn:hover{border-color:var(--primary);}
.dd-btn[aria-expanded="true"]{border-color:var(--primary);}
.dd-btn:disabled{opacity:0.45;cursor:default;}
/* Larger form-field variant (enhanced from a .theme-input select) — matches .theme-input metrics
   so settings dropdowns keep the padded look, while toolbar/compact .dd stay small. */
.dd--input .dd-btn{padding:12px;border-width:2px;border-radius:8px;font-size:1.05rem;font-weight:400;}
.dd--input .dd-opt{padding:11px 12px;font-size:1rem;}
.dd-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dd-caret{color:var(--text-muted);font-size:0.72rem;flex:none;}
.dd-menu {
    position:absolute;
    top:calc(100% + 5px);
    left:0;
    min-width:100%;
    z-index:120;
    max-height:260px;
    overflow-y:auto;
    padding:5px;
    background:var(--card-bg);
    border:1px solid var(--card-border);
    border-radius:10px;
    box-shadow:0 14px 34px rgba(0,0,0,0.16);
}
.dd-menu.hidden{display:none;}
/* 70: open menus are position:fixed (dropdown.js place()) so no modal/scroll ancestor clips them —
   they must therefore out-rank the modal overlays (z 2000) and the corner stack (z 3000 toasts). */
.dd-menu:not(.hidden){z-index:3200;overflow-y:auto;}
.dd-opt{display:block;width:100%;text-align:left;padding:8px 11px;border:none;border-radius:7px;background:none;color:var(--text-color);font-size:0.85rem;cursor:pointer;white-space:nowrap;}
.dd-opt:hover,.dd-opt:focus{background:rgba(111,95,228,0.08);outline:none;}
.dd-opt.is-active{background:var(--accent-glow);font-weight:700;}
.dd-opt:disabled{opacity:0.45;cursor:default;}

/* Pill dropdown (style 3 — language/chat pickers; auto-mapped from .chat-select) */
.dd--pill .dd-btn{padding:8px 14px;border:1px solid rgba(111,95,228,0.22);border-radius:999px;background:rgba(255,255,255,0.75);font-size:0.9rem;font-weight:600;transition:border-color 0.2s,box-shadow 0.2s;}
.dd--pill .dd-btn:hover,.dd--pill .dd-btn[aria-expanded="true"]{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow);}
.dd--pill .dd-menu,.dd-menu.dd--pill{border-radius:14px;} /* 71.7 — the open menu is portaled to <body> and carries the modifier itself */
.dd-opt .fi{margin-right:9px;flex:none;}
.dd-opt{display:flex;align-items:center;}
/* Multi variant — checkbox menu; the menu stays open while toggling */
.dd-opt--check{gap:9px;cursor:pointer;}
.dd-opt--check input{accent-color:var(--primary);width:15px;height:15px;flex:none;cursor:pointer;}

/* ---------- Numeric stepper (59.4 — grouped settings cards) ---------- */
.stepper{display:inline-flex;align-items:center;border:1px solid var(--card-border);border-radius:10px;background:var(--bg-color);overflow:hidden;}
.stepper button{border:none;background:none;width:32px;height:36px;font-size:1.1rem;line-height:1;color:var(--text-muted);cursor:pointer;font-family:inherit;transition:background 0.12s,color 0.12s;}
.stepper button:hover{background:rgba(111,95,228,0.1);color:var(--primary);}
.stepper button:active{background:rgba(111,95,228,0.18);}
.stepper input[type="number"]{width:52px;height:36px;border:none;border-left:1px solid var(--card-border);border-right:1px solid var(--card-border);background:transparent;text-align:center;font-family:var(--font-display);font-weight:800;font-size:0.95rem;color:var(--text-color);-moz-appearance:textfield;padding:0;}
.stepper input[type="number"]:focus{outline:none;background:rgba(111,95,228,0.06);}
.stepper input[type="number"]::-webkit-outer-spin-button,.stepper input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

/* Chips multi-select (dd--chips: inline toggle pills for small fixed sets — CEFR levels) */
.dd-chips{display:flex;gap:7px;flex-wrap:wrap;}
.dd-chip{font-family:var(--font-display);font-weight:700;font-size:0.82rem;padding:6px 14px;border-radius:999px;cursor:pointer;border:1px solid var(--card-border);background:var(--bg-color);color:var(--text-muted);transition:all 0.15s ease;}
.dd-chip:hover{border-color:var(--primary);color:var(--primary);}
.dd-chip.on{background:rgba(111,95,228,0.12);border-color:rgba(111,95,228,0.42);color:var(--primary-hover);}
.dd-chip:disabled{opacity:0.4;cursor:default;}
.dd-chip:disabled:hover{border-color:var(--card-border);color:var(--text-muted);}

/* ---------- media queries (house rule: always last) ---------- */
@media(max-width:520px){
    .instrument-frame>.instrument-frame-overlay::before,.instrument-frame>.instrument-frame-overlay::after{display:none;}
    .instrument-frame>.instrument-frame-overlay{inset:7px;border-radius:13px;}
    .module-focal-art{width:88px;height:88px;}
}
@media(prefers-reduced-motion:reduce){.genjob-card,.gj-details,.gj-expand i,.surface-item{transition:none!important;}}
@media(prefers-reduced-transparency:reduce){
    body.app-shell-active:not(.app-shell-public-route):not(.hyper-theme) .surface-raised,body.app-shell-active:not(.app-shell-public-route):not(.hyper-theme) .surface-base{background:#FBF9FD;}
    body.app-shell-active:not(.app-shell-public-route):not(.hyper-theme) .instrument-frame{backdrop-filter:none;-webkit-backdrop-filter:none;}
    .surface-quiet-frame>.surface-quiet-overlay::before,.surface-quiet-frame>.surface-quiet-overlay::after{display:none;}
}
@media(forced-colors:active){
    .instrument-frame>.instrument-frame-overlay,.surface-quiet-frame>.surface-quiet-overlay{border-color:CanvasText;box-shadow:none;}
    .instrument-frame>.instrument-frame-overlay::before,.instrument-frame>.instrument-frame-overlay::after,.surface-quiet-frame>.surface-quiet-overlay::before,.surface-quiet-frame>.surface-quiet-overlay::after,.btn-instrument-primary::after,.surface-item::before{display:none;}
    .command-dialog-orbit{border-color:CanvasText;background:Canvas;}
    .surface-item{border:1px solid CanvasText!important;box-shadow:none!important;}
}