*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    background:var(--space);
    color-scheme:dark;
}

body{
    margin:0;
    min-height:100vh;
    background:
        radial-gradient(circle at 60% 0%,color-mix(in srgb,var(--accent) 4%,transparent),transparent 38%),
        linear-gradient(180deg,#07080c 0%,#090a0f 55%,#07080b 100%);
    color:var(--text);
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    overflow-x:hidden;
}

button,
input,
select{
    font:inherit;
}

button,
a{
    -webkit-tap-highlight-color:transparent;
}

svg{
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.ambient-space{
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    overflow:hidden;
}

.ambient-orb{
    position:absolute;
    width:520px;
    height:520px;
    border-radius:50%;
    filter:blur(90px);
    opacity:.14;
    background:var(--accent);
    animation:orb-drift 16s var(--ease) infinite alternate;
}

.orb-a{
    top:-340px;
    right:8%;
}

.orb-b{
    bottom:-400px;
    left:25%;
    opacity:.07;
    animation-delay:-7s;
}

.ambient-grid{
    position:absolute;
    inset:0;
    opacity:.065;
    background-image:
        linear-gradient(color-mix(in srgb,var(--text) 12%,transparent) 1px,transparent 1px),
        linear-gradient(90deg,color-mix(in srgb,var(--text) 12%,transparent) 1px,transparent 1px);
    background-size:42px 42px;
    mask-image:linear-gradient(to bottom,transparent,black 16%,black 85%,transparent);
}

@keyframes orb-drift{
    to{
        transform:translate3d(-110px,80px,0) scale(1.15);
    }
}

/* ---------------- APP SHELL ---------------- */

.app-shell{
    min-height:100vh;
    padding-left:100px;
}

.nav-rail{
    position:fixed;
    inset:0 auto 0 0;
    width:100px;
    z-index:30;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:18px 10px 16px;
    background:
        linear-gradient(180deg,rgba(7,8,12,.96),rgba(8,9,13,.90));
    border-right:1px solid var(--line);
    backdrop-filter:blur(18px);
}

.brand-mark{
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    border-radius:17px;
    color:var(--text);
    text-decoration:none;
    font-size:18px;
    font-weight:950;
    letter-spacing:-.03em;
    border:1px solid var(--line-accent);
    background:var(--soft-accent);
    box-shadow:var(--glow);
}

.brand-mark .brand-slash{
    color:var(--accent);
    font-size:11px;
    margin-top:-12px;
    margin-left:17px;
}

.rail-links{
    width:100%;
    display:grid;
    gap:9px;
    margin-top:28px;
}

.rail-link{
    position:relative;
    display:grid;
    place-items:center;
    gap:5px;
    min-height:63px;
    color:var(--muted);
    text-decoration:none;
    border-radius:16px;
    transition:
        color .22s var(--ease),
        background .22s var(--ease),
        transform .22s var(--ease);
}

.rail-link svg{
    width:22px;
    height:22px;
}

.rail-link span{
    font-size:8px;
    font-weight:800;
    letter-spacing:.06em;
}

.rail-link:hover{
    color:var(--text);
    transform:translateX(2px);
}

.rail-link.active{
    color:var(--accent);
    background:
        linear-gradient(135deg,var(--soft-accent),transparent);
    box-shadow:
        inset 0 0 0 1px var(--line-accent),
        0 0 30px color-mix(in srgb,var(--accent) 8%,transparent);
}



.rail-account{
    margin-top:auto;
    display:grid;
    justify-items:center;
}


.rail-account{
    margin-top:auto;
    display:grid;
    justify-items:center;
}

.rail-avatar{
    width:48px;
    height:48px;
    padding:0;
    display:grid;
    place-items:center;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.13);
    border-radius:50%;
    background:#111218;
    color:#fff;
    font:inherit;
    font-weight:950;
    cursor:pointer;
    box-shadow:0 7px 20px rgba(0,0,0,.26);
    transition:
        transform .18s var(--ease),
        border-color .18s var(--ease),
        box-shadow .18s var(--ease);
}

.rail-avatar:hover,
.rail-avatar[aria-expanded="true"]{
    transform:translateY(-1px);
    border-color:var(--accent);
    box-shadow:
        0 7px 20px rgba(0,0,0,.28),
        0 0 0 2px color-mix(in srgb,var(--accent) 14%,transparent);
}

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

.rail-avatar span{
    display:grid;
    place-items:center;
    width:100%;
    height:100%;
}

.mobile-top,
.mobile-bottom{
    display:none;
}

.dashboard{
    width:min(1680px,calc(100% - 48px));
    margin:0 auto;
    padding:20px 0 54px;
}

/* ---------------- COMMON ---------------- */

.toast{
    position:fixed;
    top:20px;
    left:50%;
    z-index:80;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    gap:9px;
    max-width:min(680px,calc(100vw - 32px));
    padding:11px 15px;
    border:1px solid var(--line-accent);
    border-radius:999px;
    background:rgba(10,11,16,.92);
    backdrop-filter:blur(18px);
    color:var(--text);
    font-size:12px;
    font-weight:850;
    box-shadow:var(--glow);
    animation:toast-in .35s var(--ease) both;
}

.toast-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 12px var(--accent);
}

@keyframes toast-in{
    from{opacity:0;transform:translate(-50%,-12px)}
}

.eyebrow,
.module-label{
    color:var(--text);
    font-size:12px;
    font-weight:900;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.eyebrow span,
.module-label span,
.desktop-brand span,
.mobile-brand span,
.drawer-brand span,
.last-session-title span,
.quest-from span,
.waiting-panel strong span{
    color:var(--accent);
}

.muted-copy{
    color:var(--muted);
    line-height:1.55;
}

.module-enter{
    animation:
        module-enter .55s var(--ease) both;
}

.module-grid > .module-enter:nth-child(2){animation-delay:.035s}
.module-grid > .module-enter:nth-child(3){animation-delay:.07s}
.module-grid > .module-enter:nth-child(4){animation-delay:.105s}
.module-grid > .module-enter:nth-child(5){animation-delay:.14s}
.module-grid > .module-enter:nth-child(6){animation-delay:.175s}

@keyframes module-enter{
    from{
        opacity:0;
        transform:translateY(12px) scale(.99);
        filter:blur(3px);
    }
    to{
        opacity:1;
        transform:none;
        filter:none;
    }
}

/* ---------------- STOPPED ---------------- */

.stopped-layout{
    min-height:calc(100vh - 80px);
    display:grid;
    grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr);
    gap:18px;
    align-content:center;
}

.stopped-hero,
.last-session{
    position:relative;
    overflow:hidden;
    border-radius:28px;
    background:
        linear-gradient(145deg,rgba(255,255,255,.032),rgba(255,255,255,.012));
    border:1px solid var(--line);
    box-shadow:
        0 24px 80px rgba(0,0,0,.22),
        inset 0 1px rgba(255,255,255,.04);
}

.stopped-hero{
    min-height:560px;
    display:grid;
    align-content:center;
    justify-items:center;
    padding:42px;
}

.stopped-hero::after{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:radial-gradient(circle,var(--soft-accent),transparent 68%);
    filter:blur(12px);
    opacity:.58;
    pointer-events:none;
}

.stopped-hero .eyebrow{
    position:absolute;
    left:28px;
    top:26px;
}

.stopped-symbol{
    position:relative;
    z-index:1;
    width:120px;
    height:120px;
    display:grid;
    place-items:center;
    color:var(--accent);
    animation:power-breathe 3.3s ease-in-out infinite;
}

.stopped-symbol svg{
    width:100%;
    height:100%;
    stroke-width:1.4;
    filter:drop-shadow(0 0 18px color-mix(in srgb,var(--accent) 35%,transparent));
}

@keyframes power-breathe{
    50%{transform:scale(1.04);filter:brightness(1.15)}
}

.hero-action{
    position:relative;
    z-index:2;
    min-width:min(420px,90vw);
    min-height:66px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-top:16px;
    padding:0 26px;
    border:1px solid color-mix(in srgb,var(--accent) 70%,transparent);
    border-radius:17px;
    color:#fff;
    background:
        linear-gradient(90deg,color-mix(in srgb,var(--accent) 88%,#000),var(--accent));
    box-shadow:
        0 14px 40px color-mix(in srgb,var(--accent) 22%,transparent),
        inset 0 1px rgba(255,255,255,.2);
    font-weight:950;
    letter-spacing:.02em;
    cursor:pointer;
    transition:
        transform .22s var(--ease),
        box-shadow .22s var(--ease);
}

.hero-action svg{
    width:20px;
    height:20px;
    fill:currentColor;
    stroke:none;
}

.hero-action:hover{
    transform:translateY(-2px);
    box-shadow:
        0 20px 60px color-mix(in srgb,var(--accent) 30%,transparent),
        inset 0 1px rgba(255,255,255,.25);
}

.stopped-hint{
    position:relative;
    z-index:2;
    margin-top:14px;
    color:var(--muted);
    font-size:11px;
    letter-spacing:.09em;
}

.waiting-panel{
    position:relative;
    z-index:2;
    width:min(580px,100%);
    display:flex;
    gap:16px;
    align-items:center;
    padding:22px;
    border-radius:18px;
    background:rgba(255,255,255,.025);
    border:1px solid var(--line);
}

.waiting-icon{
    flex:0 0 54px;
    width:54px;
    height:54px;
    display:grid;
    place-items:center;
    border-radius:16px;
    color:var(--accent);
    background:var(--soft-accent);
}

.waiting-icon svg{
    width:28px;
}

.waiting-panel strong{
    font-size:16px;
}

.waiting-panel p{
    margin:6px 0 0;
    color:var(--muted);
    line-height:1.5;
    font-size:13px;
}

.last-session{
    align-self:center;
    padding:30px;
}

.last-session-title{
    margin-top:22px;
    font-size:30px;
    font-weight:900;
}

.metric-row{
    display:grid;
    gap:14px;
    margin-top:28px;
}

.metric-row > div{
    display:flex;
    align-items:center;
    gap:9px;
    color:var(--muted);
    font-size:13px;
    font-weight:760;
}

.metric-row svg{
    width:19px;
    height:19px;
    color:var(--accent);
}

.text-link,
.inline-action{
    margin-top:28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    color:var(--accent);
    text-decoration:none;
    font-size:11px;
    font-weight:900;
    letter-spacing:.05em;
}

.text-link svg,
.inline-action svg{
    width:16px;
    height:16px;
    transition:transform .2s var(--ease);
}

.text-link:hover svg,
.inline-action:hover svg{
    transform:translateX(3px);
}

/* ---------------- LIVE HEADER ---------------- */

.live-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    min-height:62px;
    padding:0 2px 14px;
}

.desktop-brand{
    font-size:20px;
    font-weight:900;
    letter-spacing:.04em;
}

.live-meta{
    display:flex;
    align-items:center;
    gap:11px;
    margin-top:7px;
    color:var(--muted);
    font-size:11px;
    font-weight:800;
    letter-spacing:.04em;
}

.live-pill{
    display:inline-flex;
    align-items:center;
    gap:7px;
    color:var(--accent);
}

.live-pill i{
    width:8px;
    height:8px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 12px var(--accent);
    animation:live-pulse 1.8s ease-in-out infinite;
}

@keyframes live-pulse{
    50%{opacity:.42;transform:scale(.86)}
}

.divider{
    width:1px;
    height:13px;
    background:var(--line);
}

.session-clock{
    color:var(--text);
    font-variant-numeric:tabular-nums;
}

.header-actions{
    display:flex;
    gap:9px;
    align-items:center;
}

.header-actions form{
    margin:0;
}

.focus-button{
    min-height:43px;
    display:flex;
    align-items:center;
    gap:9px;
    padding:0 15px;
    border:1px solid var(--line-accent);
    border-radius:13px;
    color:var(--text);
    background:rgba(255,255,255,.025);
    cursor:pointer;
    font-size:11px;
    font-weight:850;
    letter-spacing:.04em;
    transition:
        border-color .25s var(--ease),
        box-shadow .25s var(--ease),
        background .25s var(--ease);
}

.focus-button strong{
    color:var(--accent);
}

.focus-eye{
    color:var(--accent);
}

.focus-eye svg{
    width:21px;
    height:21px;
}

.eye-slash{
    opacity:0;
    stroke-dasharray:23;
    stroke-dashoffset:23;
    transition:
        stroke-dashoffset .35s var(--ease),
        opacity .2s;
}

.focus-button.active{
    background:var(--soft-accent);
    box-shadow:var(--glow);
}

.focus-button.active .eye-pupil{
    transform-origin:center;
    transform:scale(.1);
    opacity:.25;
}

.focus-button.active .eye-slash{
    opacity:1;
    stroke-dashoffset:0;
}

.eye-pupil{
    transition:
        transform .3s var(--ease),
        opacity .3s var(--ease);
}

.icon-button{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid var(--line);
    border-radius:13px;
    color:var(--text);
    background:rgba(255,255,255,.022);
    cursor:pointer;
}

.icon-button svg{
    width:21px;
    height:21px;
}

.focus-banner{
    display:flex;
    align-items:center;
    gap:15px;
    margin:4px 0 15px;
    padding:15px 17px;
    border-radius:17px;
    background:
        linear-gradient(90deg,var(--soft-accent),rgba(255,255,255,.016));
    border:1px solid var(--line-accent);
    box-shadow:var(--glow);
}

.focus-banner-icon{
    width:45px;
    height:45px;
    display:grid;
    place-items:center;
    flex:0 0 45px;
    color:var(--accent);
    border-radius:14px;
    background:color-mix(in srgb,var(--accent) 10%,transparent);
}

.focus-banner-icon svg{
    width:25px;
}

.focus-banner strong{
    font-size:13px;
}

.focus-banner strong span{
    color:var(--accent);
}

.focus-banner p{
    margin:5px 0 0;
    color:var(--muted);
    font-size:12px;
    line-height:1.45;
}

/* ---------------- TELEMETRY ---------------- */

.telemetry-strip{
    position:relative;
    display:grid;
    grid-template-columns:1.25fr .8fr .9fr 1fr .8fr;
    overflow:hidden;
    margin-bottom:14px;
    border:1px solid var(--line);
    border-radius:20px;
    background:
        linear-gradient(145deg,rgba(255,255,255,.032),rgba(255,255,255,.013));
    backdrop-filter:blur(18px);
    box-shadow:0 20px 60px rgba(0,0,0,.14);
}

.telemetry-item{
    min-height:118px;
    position:relative;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:18px 20px;
}

.telemetry-item + .telemetry-item::before{
    content:"";
    position:absolute;
    left:0;
    top:20%;
    width:1px;
    height:60%;
    background:var(--line);
}

.level-item{
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:17px;
}

.level-crystal{
    width:54px;
    height:68px;
    flex:0 0 54px;
    color:var(--accent);
}

.level-crystal svg{
    width:100%;
    height:100%;
    stroke-width:1.2;
    filter:drop-shadow(0 0 13px color-mix(in srgb,var(--accent) 45%,transparent));
    animation:crystal-float 4s ease-in-out infinite;
}

@keyframes crystal-float{
    50%{transform:translateY(-3px) rotate(.5deg)}
}

.telemetry-label{
    color:var(--muted);
    font-size:9px;
    font-weight:850;
    letter-spacing:.09em;
}

.telemetry-value{
    margin-top:4px;
    font-size:25px;
    line-height:1;
    font-weight:780;
    font-variant-numeric:tabular-nums;
}

.telemetry-value small{
    font-size:10px;
    color:var(--muted);
    font-weight:700;
}

.telemetry-sub{
    margin-top:6px;
    color:var(--muted);
    font-size:9px;
}

.xp-mini{
    width:150px;
    height:4px;
    overflow:hidden;
    margin-top:10px;
    border-radius:999px;
    background:rgba(255,255,255,.06);
}

.xp-mini span{
    display:block;
    height:100%;
    border-radius:inherit;
    background:var(--accent);
    box-shadow:0 0 9px var(--accent);
    transform-origin:left;
    animation:bar-grow .9s var(--ease) both;
}

@keyframes bar-grow{
    from{transform:scaleX(.12);opacity:.3}
}

.sparkline{
    width:112px;
    height:24px;
    margin-top:8px;
    color:var(--accent);
}

.sparkline path{
    vector-effect:non-scaling-stroke;
    stroke-width:1.5;
    filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 45%,transparent));
}

.mini-bars{
    height:27px;
    display:flex;
    align-items:end;
    gap:4px;
    margin-top:7px;
}

.mini-bars i{
    width:4px;
    height:30%;
    border-radius:3px 3px 0 0;
    background:var(--accent);
    box-shadow:0 0 7px color-mix(in srgb,var(--accent) 35%,transparent);
    animation:bar-dance 2.2s ease-in-out infinite alternate;
}

.mini-bars i:nth-child(2){height:45%;animation-delay:-.3s}
.mini-bars i:nth-child(3){height:65%;animation-delay:-.6s}
.mini-bars i:nth-child(4){height:82%;animation-delay:-.9s}
.mini-bars i:nth-child(5){height:100%;animation-delay:-1.2s}

@keyframes bar-dance{
    to{filter:brightness(1.25);transform:scaleY(.85)}
}

/* ---------------- MODULES ---------------- */

.module-grid{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:12px;
    align-items:start;
}

.module-card{
    position:relative;
    overflow:hidden;
    min-width:0;
    border-radius:20px;
    padding:18px;
    border:1px solid var(--line);
    background:
        linear-gradient(145deg,rgba(255,255,255,.033),rgba(255,255,255,.012));
    box-shadow:
        0 18px 54px rgba(0,0,0,.14),
        inset 0 1px rgba(255,255,255,.025);
    backdrop-filter:blur(18px);
    transition:
        transform .28s var(--ease),
        border-color .28s var(--ease),
        box-shadow .28s var(--ease);
}

.module-card:hover{
    transform:translateY(-2px);
    border-color:color-mix(in srgb,var(--accent) 24%,var(--line));
}

.priority-card{
    border-color:var(--line-accent);
}

.quest-module{
    grid-column:span 5;
    min-height:312px;
}

.poll-module,
.decision-module{
    grid-column:span 4;
    min-height:312px;
}

.chaos-module,
.chaos-charge-module{
    grid-column:span 3;
    min-height:312px;
}

.viewer-queue-module{
    grid-column:span 4;
}

.activity-module{
    grid-column:span 5;
}

.quick-module{
    grid-column:span 3;
}

.module-glow{
    position:absolute;
    width:280px;
    height:280px;
    right:-130px;
    top:-145px;
    border-radius:50%;
    background:
        radial-gradient(circle,color-mix(in srgb,var(--accent) 18%,transparent),transparent 70%);
    pointer-events:none;
}

.module-pulse{
    position:absolute;
    inset:0;
    pointer-events:none;
    border-radius:inherit;
    box-shadow:inset 0 0 0 1px transparent;
    animation:pending-pulse 2.6s ease-in-out infinite;
}

@keyframes pending-pulse{
    50%{
        box-shadow:inset 0 0 0 1px var(--line-accent),0 0 30px color-mix(in srgb,var(--accent) 8%,transparent);
    }
}

.module-head{
    min-height:27px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}

.header-symbol{
    width:24px;
    height:24px;
    color:var(--accent);
    opacity:.78;
}

.module-link-icon{
    color:var(--muted);
    transition:color .2s,transform .2s;
}

.module-link-icon:hover{
    color:var(--accent);
    transform:translateX(2px);
}

.module-link-icon svg{
    width:20px;
}

.module-card h2{
    margin:17px 0 0;
    max-width:95%;
    font-size:clamp(19px,1.55vw,28px);
    line-height:1.2;
    font-weight:690;
    letter-spacing:-.025em;
}

.module-card p{
    margin:9px 0 0;
    color:var(--muted);
    line-height:1.5;
    font-size:12px;
}

.rarity-chip{
    width:max-content;
    display:flex;
    align-items:center;
    gap:7px;
    margin-top:7px;
    padding:5px 8px;
    border:1px solid var(--line-accent);
    border-radius:999px;
    color:color-mix(in srgb,var(--accent) 75%,var(--text));
    background:var(--soft-accent);
    font-size:9px;
    font-weight:900;
    letter-spacing:.06em;
}

.rarity-chip svg{
    width:13px;
    height:13px;
    fill:currentColor;
    stroke:none;
    filter:drop-shadow(0 0 7px currentColor);
}

.quest-from{
    margin-top:13px;
    color:var(--muted);
    font-size:10px;
    font-weight:850;
    letter-spacing:.06em;
}

.quest-actions{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin-top:22px;
}

.quest-actions .wide{
    grid-column:1/-1;
}

.quest-actions form{
    margin:0;
}

.primary-action,
.secondary-action,
.decision-pick{
    width:100%;
    min-height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:0 13px;
    border-radius:12px;
    cursor:pointer;
    font-weight:900;
    font-size:11px;
    letter-spacing:.03em;
    transition:
        transform .2s var(--ease),
        box-shadow .2s var(--ease),
        background .2s var(--ease);
}

.primary-action{
    color:#fff;
    border:1px solid var(--accent);
    background:
        linear-gradient(90deg,color-mix(in srgb,var(--accent) 88%,#000),var(--accent));
    box-shadow:0 10px 28px color-mix(in srgb,var(--accent) 17%,transparent);
}

.primary-action svg{
    width:17px;
    height:17px;
    stroke-width:2.3;
}

.primary-action:hover{
    transform:translateY(-1px);
    box-shadow:0 14px 34px color-mix(in srgb,var(--accent) 25%,transparent);
}

.secondary-action{
    color:var(--accent);
    border:1px solid var(--line-accent);
    background:rgba(255,255,255,.018);
}

.danger-action{
    color:var(--danger);
    border-color:color-mix(in srgb,var(--danger) 40%,transparent);
}

.accept-actions{
    grid-template-columns:2fr 1fr;
}

.accept-actions .wide{
    grid-column:auto;
}

/* Poll */

.poll-time{
    color:var(--muted);
    font-size:10px;
    font-weight:850;
    font-variant-numeric:tabular-nums;
}

.poll-options{
    display:grid;
    gap:11px;
    margin-top:20px;
}

.poll-option-meta{
    display:flex;
    justify-content:space-between;
    gap:10px;
    color:var(--muted);
    font-size:10px;
}

.poll-option-meta strong{
    color:var(--text);
    font-size:11px;
}

.poll-bar{
    height:5px;
    overflow:hidden;
    margin-top:6px;
    border-radius:999px;
    background:rgba(255,255,255,.055);
}

.poll-bar span{
    display:block;
    width:0;
    height:100%;
    border-radius:inherit;
    background:var(--accent);
    box-shadow:0 0 9px var(--accent);
    transition:width .85s var(--ease);
}

/* Decision */

.decision-list{
    display:grid;
    gap:7px;
    margin-top:17px;
}

.decision-list form,
.decision-footer form{
    margin:0;
}

.decision-pick{
    justify-content:flex-start;
    text-align:left;
    color:var(--text);
    border:1px solid var(--line);
    background:rgba(255,255,255,.018);
}

.decision-pick span{
    color:var(--accent);
    font-size:9px;
    flex:0 0 auto;
}

.decision-footer{
    display:flex;
    gap:7px;
    flex-wrap:wrap;
    margin-top:12px;
}

/* Chaos */

.chaos-bolt{
    width:55px;
    height:55px;
    margin-top:18px;
    display:grid;
    place-items:center;
    color:var(--accent);
    filter:drop-shadow(0 0 13px color-mix(in srgb,var(--accent) 40%,transparent));
    animation:chaos-energy 2.6s ease-in-out infinite;
}

.chaos-bolt svg{
    width:42px;
    height:42px;
    fill:currentColor;
    stroke:none;
}

@keyframes chaos-energy{
    50%{transform:translateY(-2px) scale(1.035);filter:drop-shadow(0 0 22px color-mix(in srgb,var(--accent) 65%,transparent))}
}

.chaos-progress{
    position:absolute;
    left:18px;
    right:18px;
    bottom:18px;
    height:5px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,.055);
}

.chaos-progress span{
    display:block;
    height:100%;
    border-radius:inherit;
    background:var(--accent);
    box-shadow:0 0 9px var(--accent);
}

.chaos-charge-ring{
    position:relative;
    width:146px;
    aspect-ratio:1;
    margin:34px auto 0;
    display:grid;
    place-items:center;
    border-radius:50%;
    filter:drop-shadow(0 0 16px color-mix(in srgb,var(--accent) 18%,transparent));
    animation:ring-breathe 3s ease-in-out infinite;
}

.chaos-charge-ring::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    background:
        conic-gradient(
            var(--accent) calc(var(--charge) * 1%),
            rgba(255,255,255,.055) 0
        );
    -webkit-mask:radial-gradient(circle at center,transparent 56%,black 57%);
    mask:radial-gradient(circle at center,transparent 56%,black 57%);
}

.chaos-charge-ring > div{
    position:relative;
    z-index:1;
    width:64%;
    height:64%;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(255,255,255,.012);
}

.chaos-charge-ring svg{
    width:43px;
    height:43px;
    color:var(--accent);
    fill:currentColor;
    stroke:none;
    filter:drop-shadow(0 0 12px color-mix(in srgb,var(--accent) 45%,transparent));
}

@keyframes ring-breathe{
    50%{filter:drop-shadow(0 0 26px color-mix(in srgb,var(--accent) 25%,transparent))}
}

/* Queue */

.module-count{
    margin-top:4px;
    color:var(--muted);
    font-size:9px;
    font-weight:800;
}

.queue-preview{
    display:grid;
    gap:9px;
    margin-top:18px;
}

.queue-preview > div{
    display:grid;
    grid-template-columns:8px 1fr;
    gap:10px;
    padding-bottom:9px;
    border-bottom:1px solid var(--line);
}

.queue-dot{
    width:7px;
    height:7px;
    margin-top:5px;
    border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 8px var(--accent);
}

.queue-preview strong{
    font-size:10px;
}

.queue-preview p{
    margin:2px 0 0;
    font-size:10px;
}

.empty-state{
    padding:26px 0;
    color:var(--muted);
    font-size:9px;
    font-weight:800;
    letter-spacing:.07em;
}

/* Activity */

.live-feed{
    color:var(--muted);
    font-size:9px;
    font-weight:800;
}

.activity-feed{
    display:grid;
    gap:8px;
    margin-top:14px;
}

.activity-row{
    display:grid;
    grid-template-columns:31px 1fr auto;
    align-items:center;
    gap:9px;
}

.activity-icon{
    width:31px;
    height:31px;
    display:grid;
    place-items:center;
    border-radius:10px;
    color:var(--accent);
    background:var(--soft-accent);
}

.activity-icon svg{
    width:16px;
}

.activity-row small{
    display:block;
    color:var(--muted);
    font-size:8px;
    letter-spacing:.04em;
}

.activity-row strong{
    display:block;
    margin-top:1px;
    font-size:10px;
    font-weight:760;
}

.activity-row time{
    color:var(--muted);
    font-size:8px;
}

/* Quick actions */

.expand-action{
    width:100%;
    min-height:64px;
    display:grid;
    grid-template-columns:42px 1fr 18px;
    gap:10px;
    align-items:center;
    margin-top:12px;
    padding:10px;
    border:1px solid var(--line-accent);
    border-radius:14px;
    color:var(--text);
    background:var(--soft-accent);
    text-align:left;
    cursor:pointer;
}

.plus-orbit{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:var(--accent);
    border:1px solid var(--line-accent);
    transition:transform .35s var(--ease);
}

.plus-orbit svg{
    width:18px;
}

.expand-action[aria-expanded="true"] .plus-orbit{
    transform:rotate(135deg);
}

.expand-action strong{
    display:block;
    color:var(--accent);
    font-size:11px;
}

.expand-action small{
    display:block;
    margin-top:2px;
    color:var(--muted);
    font-size:9px;
}

.chevron{
    width:17px;
    color:var(--muted);
    transition:transform .3s var(--ease);
}

.expand-action[aria-expanded="true"] .chevron{
    transform:rotate(90deg);
}

.expand-panel{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .35s var(--ease);
}

.expand-panel > *{
    overflow:hidden;
}

.expand-panel.open{
    grid-template-rows:1fr;
}

.expand-panel{
    grid-template-columns:repeat(3,1fr);
    gap:6px;
}

.expand-panel a{
    min-height:58px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    margin-top:7px;
    border:1px solid var(--line);
    border-radius:12px;
    color:var(--muted);
    text-decoration:none;
    font-size:8px;
    font-weight:850;
}

.expand-panel a:hover{
    color:var(--accent);
    border-color:var(--line-accent);
}

.expand-panel svg{
    width:19px;
    height:19px;
}

.quick-links{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
    margin-top:8px;
}

.quick-links a{
    min-height:61px;
    display:flex;
    align-items:center;
    gap:9px;
    padding:10px;
    border:1px solid var(--line);
    border-radius:12px;
    color:var(--text);
    text-decoration:none;
    background:rgba(255,255,255,.012);
}

.quick-links a:hover{
    border-color:var(--line-accent);
}

.quick-links svg{
    width:21px;
    color:var(--accent);
}

.quick-links strong{
    display:block;
    color:var(--accent);
    font-size:9px;
}

.quick-links small{
    display:block;
    margin-top:2px;
    color:var(--muted);
    font-size:8px;
}

/* End session */

.end-session-zone{
    margin-top:16px;
    padding-top:24px;
    border-top:1px solid var(--line);
}

.end-session-trigger{
    width:100%;
    min-height:47px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:1px solid color-mix(in srgb,var(--danger) 28%,transparent);
    border-radius:15px;
    color:color-mix(in srgb,var(--danger) 75%,var(--text));
    background:color-mix(in srgb,var(--danger) 4%,transparent);
    cursor:pointer;
    font-weight:900;
    font-size:10px;
    letter-spacing:.07em;
}

.end-session-trigger svg{
    width:17px;
}


/* ---------------- PROFILE CONTROL PANEL ---------------- */
.account-popover-backdrop{
    position:fixed;
    inset:0;
    z-index:88;
    display:none;
    background:transparent;
}

.account-popover-backdrop.open{display:block}

.account-popover{
    position:fixed;
    z-index:89;
    left:112px;
    bottom:18px;
    width:330px;
    max-width:calc(100vw - 136px);
    padding:14px;
    border:1px solid var(--line-accent);
    border-radius:18px;
    background:linear-gradient(150deg,rgba(35,31,38,.985),rgba(23,21,27,.985));
    box-shadow:0 20px 65px rgba(0,0,0,.46),var(--glow);
    opacity:0;
    visibility:hidden;
    transform:translateX(-8px) scale(.985);
    transform-origin:left bottom;
    transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
}

.account-popover.open{
    opacity:1;
    visibility:visible;
    transform:none;
}

.account-popover-title{
    color:var(--accent);
    font-size:12px;
    font-weight:950;
    letter-spacing:.08em;
}

.account-workspaces{
    display:grid;
    gap:6px;
    margin-top:12px;
    padding-top:12px;
    border-top:1px solid var(--line);
}

.account-workspaces > small{
    color:var(--muted);
    font-size:9px;
    font-weight:900;
    letter-spacing:.08em;
}

.account-workspaces a{
    min-height:38px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:0 10px;
    border:1px solid var(--line);
    border-radius:10px;
    color:var(--text);
    text-decoration:none;
    font-size:11px;
    font-weight:850;
}

.account-workspaces a.current-workspace{border-color:var(--line-accent)}
.account-workspaces em{color:var(--accent);font-size:8px;font-style:normal;font-weight:950}

/* ---------------- DRAWERS / SHEETS ---------------- */

.account-mini-card{
    display:flex;
    align-items:center;
    gap:13px;
    margin-top:18px;
    padding:14px;
    border:1px solid var(--line);
    border-radius:16px;
    background:rgba(255,255,255,.025);
}

.account-mini-avatar{
    width:50px;
    height:50px;
    flex:0 0 50px;
    overflow:hidden;
    display:grid;
    place-items:center;
    border:1px solid var(--line-accent);
    border-radius:50%;
    color:var(--accent);
    background:var(--soft-accent);
    font-weight:950;
}

.account-mini-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.account-mini-card strong{
    display:block;
    font-size:15px;
}

.account-mini-card small{
    display:block;
    margin-top:4px;
    color:var(--muted);
    font-size:10px;
    font-weight:850;
}

.account-quick-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
    margin-top:10px;
}

.account-quick-actions a,
.account-quick-actions button,
.account-action-static{
    min-height:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 9px;
    border:1px solid var(--line-accent);
    border-radius:11px;
    color:var(--accent);
    background:transparent;
    text-decoration:none;
    font-size:10px;
    font-weight:900;
    cursor:pointer;
}

.account-quick-actions form{
    display:flex;
    margin:0;
}

.account-quick-actions form button{
    width:100%;
}

.account-action-static{
    color:var(--text);
    border-color:var(--line);
    cursor:default;
}

.workspace-switcher a{
    justify-content:space-between;
}

.workspace-switcher a.current-workspace{
    color:var(--accent);
}

.workspace-switcher em{
    color:var(--accent);
    font-size:8px;
    font-style:normal;
    font-weight:900;
}


.drawer-backdrop,
.create-sheet-backdrop,
.modal-backdrop{
    position:fixed;
    inset:0;
    z-index:90;
    opacity:0;
    visibility:hidden;
    background:rgba(0,0,0,.58);
    backdrop-filter:blur(4px);
    transition:
        opacity .3s var(--ease),
        visibility .3s;
}

.drawer-backdrop.open,
.create-sheet-backdrop.open,
.modal-backdrop.open{
    opacity:1;
    visibility:visible;
}

.nav-drawer{
    position:fixed;
    top:12px;
    right:12px;
    bottom:12px;
    z-index:100;
    width:min(390px,calc(100vw - 24px));
    overflow:auto;
    padding:20px;
    border:1px solid var(--line-accent);
    border-radius:22px;
    background:rgba(10,11,16,.95);
    backdrop-filter:blur(28px);
    box-shadow:-28px 0 80px rgba(0,0,0,.35),var(--glow);
    transform:translateX(calc(100% + 28px));
    transition:transform .38s var(--ease);
}

.nav-drawer.open{
    transform:none;
}

.drawer-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.drawer-brand{
    font-size:16px;
    font-weight:900;
}

.drawer-section{
    display:grid;
    margin-top:24px;
}

.drawer-section small{
    margin-bottom:7px;
    color:var(--accent);
    font-size:9px;
    font-weight:900;
    letter-spacing:.08em;
}

.drawer-section a{
    display:flex;
    align-items:center;
    min-height:44px;
    padding:0 4px;
    border-bottom:1px solid var(--line);
    color:var(--text);
    text-decoration:none;
    font-size:13px;
    font-weight:720;
}

.create-sheet{
    position:fixed;
    left:50%;
    bottom:16px;
    z-index:101;
    width:min(500px,calc(100vw - 22px));
    padding:12px 14px 16px;
    border:1px solid var(--line-accent);
    border-radius:22px;
    background:rgba(10,11,16,.97);
    backdrop-filter:blur(26px);
    box-shadow:0 -25px 70px rgba(0,0,0,.38),var(--glow);
    transform:translate(-50%,calc(100% + 40px));
    transition:transform .38s var(--ease);
}

.create-sheet.open{
    transform:translate(-50%,0);
}

.sheet-grabber{
    width:38px;
    height:4px;
    margin:0 auto 14px;
    border-radius:999px;
    background:var(--line-accent);
}

.sheet-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:7px;
    margin-top:14px;
}

.sheet-grid a{
    min-height:82px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:7px;
    border:1px solid var(--line);
    border-radius:15px;
    color:var(--muted);
    text-decoration:none;
    font-size:9px;
    font-weight:850;
}

.sheet-grid a:hover{
    color:var(--accent);
    border-color:var(--line-accent);
}

.sheet-grid svg{
    width:23px;
    height:23px;
}

/* Modal */

.riv-modal{
    position:fixed;
    left:50%;
    top:50%;
    z-index:110;
    width:min(430px,calc(100vw - 28px));
    padding:26px;
    border:1px solid color-mix(in srgb,var(--danger) 36%,var(--line));
    border-radius:24px;
    background:
        linear-gradient(150deg,rgba(19,20,28,.98),rgba(9,10,15,.98));
    box-shadow:0 36px 100px rgba(0,0,0,.52);
    transform:translate(-50%,-45%) scale(.96);
    opacity:0;
    visibility:hidden;
    transition:
        transform .34s var(--ease),
        opacity .25s,
        visibility .25s;
}

.riv-modal.open{
    transform:translate(-50%,-50%) scale(1);
    opacity:1;
    visibility:visible;
}

.modal-close{
    position:absolute;
    right:14px;
    top:14px;
}

.modal-icon{
    width:52px;
    height:52px;
    display:grid;
    place-items:center;
    margin-bottom:22px;
    border-radius:16px;
}

.modal-icon.danger{
    color:var(--danger);
    background:color-mix(in srgb,var(--danger) 8%,transparent);
}

.modal-icon svg{
    width:25px;
}

.riv-modal h2{
    margin:9px 0 0;
    font-size:28px;
    letter-spacing:-.03em;
}

.riv-modal p{
    color:var(--muted);
    font-size:12px;
    line-height:1.55;
}

.modal-danger-action,
.modal-cancel{
    width:100%;
    min-height:50px;
    margin-top:13px;
    border-radius:13px;
    cursor:pointer;
    font-weight:900;
}

.modal-danger-action{
    border:1px solid var(--danger);
    color:#fff;
    background:linear-gradient(90deg,color-mix(in srgb,var(--danger) 75%,#000),var(--danger));
    box-shadow:0 12px 34px color-mix(in srgb,var(--danger) 18%,transparent);
}

.modal-cancel{
    border:1px solid var(--line);
    color:var(--text);
    background:rgba(255,255,255,.02);
}


/* ---------------- DESKTOP READABILITY V1.3 ---------------- */
@media(min-width:901px){
    /* Top telemetry sizing intentionally unchanged. */

    .module-grid{gap:14px}

    .module-card{
        padding:24px 26px;
        border-radius:20px;
    }

    .module-label{
        font-size:16px;
        line-height:1.1;
        letter-spacing:.055em;
    }

    .module-count,
    .poll-time,
    .live-feed{font-size:13px}

    .module-card h2{
        margin-top:20px;
        font-size:clamp(29px,1.75vw,38px);
        line-height:1.06;
    }

    .module-card p{
        font-size:17px;
        line-height:1.52;
    }

    .rarity-chip{
        margin-top:10px;
        padding:7px 11px;
        font-size:13px;
    }

    .quest-from{
        margin-top:16px;
        font-size:14px;
    }

    .quest-actions{
        margin-top:28px;
        gap:10px;
    }

    .primary-action,
    .secondary-action,
    .decision-pick{
        min-height:55px;
        padding:0 16px;
        font-size:15px;
        border-radius:14px;
    }

    .poll-option-meta{font-size:14px}
    .poll-option-meta strong{font-size:15px}
    .poll-bar{height:7px}
    .empty-state{font-size:14px}

    .queue-preview strong{font-size:14px}
    .queue-preview p{font-size:14px}
    .inline-action{font-size:13px}

    .activity-row{
        grid-template-columns:44px 1fr auto;
        gap:13px;
        min-height:52px;
    }

    .activity-icon{
        width:44px;
        height:44px;
        border-radius:12px;
    }

    .activity-row small{font-size:12px}
    .activity-row strong{margin-top:2px;font-size:15px}
    .activity-row time{font-size:12px}

    .expand-action{
        min-height:78px;
        padding:13px 15px;
    }

    .expand-action strong{font-size:15px}
    .expand-action small{font-size:13px}
    .expand-panel a{min-height:62px;font-size:13px}
    .quick-links a strong{font-size:13px}
    .quick-links a small{font-size:12px}
    .rail-link span{font-size:10px}
    .end-session-trigger{min-height:52px;font-size:13px}

    /* Restore the V1 desktop row: Chaos | Viewer Quests | Recent Activity. */
    .viewer-queue-module{grid-column:span 4}
    .activity-module{grid-column:span 5}
    .quick-module{grid-column:span 3}

    /* Dashboard cards are directly movable/resizable on desktop. */
    .module-card[data-layout-id]{
        --drag-handle-opacity:0;
    }

    .module-card[data-layout-id]::after{
        content:"";
        position:absolute;
        left:50%;
        top:7px;
        width:38px;
        height:3px;
        border-radius:999px;
        background:color-mix(in srgb,var(--text) 22%,transparent);
        opacity:var(--drag-handle-opacity);
        transform:translateX(-50%);
        pointer-events:none;
        transition:opacity .16s var(--ease),background .16s var(--ease);
    }

    .module-card[data-layout-id]:hover{
        --drag-handle-opacity:1;
        cursor:grab;
    }

    .module-card[data-layout-id]:active{
        cursor:grabbing;
    }

    .module-card.dragging{
        opacity:.42;
        transform:scale(.988);
    }

    .module-card.drag-over{
        box-shadow:
            0 0 0 1px var(--accent),
            0 0 30px color-mix(in srgb,var(--accent) 14%,transparent);
    }

    .layout-resize-handle{
        position:absolute;
        right:7px;
        bottom:7px;
        z-index:8;
        width:18px;
        height:18px;
        cursor:ew-resize;
        opacity:0;
        transition:opacity .16s var(--ease);
    }

    .layout-resize-handle::before,
    .layout-resize-handle::after{
        content:"";
        position:absolute;
        right:0;
        bottom:0;
        border-right:1px solid var(--accent);
        border-bottom:1px solid var(--accent);
    }

    .layout-resize-handle::before{
        width:13px;
        height:13px;
        opacity:.55;
    }

    .layout-resize-handle::after{
        width:7px;
        height:7px;
    }

    .module-card[data-layout-id]:hover .layout-resize-handle{
        opacity:.85;
    }

    .module-card[data-layout-id] button,
    .module-card[data-layout-id] a,
    .module-card[data-layout-id] input,
    .module-card[data-layout-id] select,
    .module-card[data-layout-id] textarea{
        cursor:pointer;
    }

}

/* ---------------- MOBILE ---------------- */

@media(max-width:900px){
    .app-shell{
        padding-left:0;
        padding-top:58px;
        padding-bottom:66px;
    }

    .nav-rail,
    .desktop-brand,
    .desktop-menu-button{
        display:none;
    }

    .mobile-top{
        position:fixed;
        left:0;
        right:0;
        top:0;
        z-index:40;
        height:58px;
        display:grid;
        grid-template-columns:42px 1fr 42px;
        align-items:center;
        gap:7px;
        padding:
            max(8px,env(safe-area-inset-top))
            10px
            8px;
        border-bottom:1px solid var(--line);
        background:rgba(7,8,12,.90);
        backdrop-filter:blur(22px);
    }

    .mobile-top .icon-button{
        width:38px;
        height:38px;
        border:0;
        background:transparent;
    }

    .mobile-brand{
        text-align:center;
        font-size:13px;
        font-weight:900;
        letter-spacing:.04em;
    }

    .dashboard{
        width:100%;
        padding:9px 8px 20px;
    }

    .live-header{
        min-height:45px;
        padding:0 3px 8px;
    }

    .live-identity{
        width:100%;
    }

    .live-meta{
        justify-content:flex-start;
        margin:0;
        gap:8px;
    }

    .header-actions{
        position:absolute;
        right:9px;
        top:65px;
        z-index:10;
    }

    .focus-button{
        min-height:36px;
        padding:0 10px;
        border-radius:10px;
        font-size:9px;
        background:rgba(9,10,15,.88);
        backdrop-filter:blur(14px);
    }

    .focus-eye svg{
        width:17px;
        height:17px;
    }

    .focus-banner{
        margin:1px 0 8px;
        padding:10px 11px;
        border-radius:13px;
    }

    .focus-banner-icon{
        width:35px;
        height:35px;
        flex-basis:35px;
        border-radius:11px;
    }

    .focus-banner strong{
        font-size:10px;
    }

    .focus-banner p{
        font-size:9px;
        margin-top:3px;
    }

    .telemetry-strip{
        grid-template-columns:1.1fr .95fr .95fr;
        margin-bottom:8px;
        border-radius:15px;
    }

    .telemetry-item{
        min-height:68px;
        padding:9px 10px;
    }

    .level-item{
        gap:8px;
    }

    .level-crystal{
        width:31px;
        height:41px;
        flex-basis:31px;
    }

    .telemetry-label{
        font-size:7px;
    }

    .telemetry-value{
        font-size:17px;
    }

    .telemetry-sub{
        font-size:7px;
        margin-top:3px;
    }

    .xp-mini{
        width:74px;
        margin-top:5px;
        height:3px;
    }

    .desktop-only-stat{
        display:none;
    }

    .mobile-stat{
        display:flex;
    }

    .mini-bars{
        height:16px;
        margin-top:3px;
    }

    .module-grid{
        display:flex;
        flex-direction:column;
        gap:7px;
    }

    .module-card{
        width:100%;
        min-height:0 !important;
        padding:12px;
        border-radius:15px;
        box-shadow:0 10px 30px rgba(0,0,0,.11);
    }

    .priority-card{
        order:-4;
    }

    .poll-module{
        order:-3;
    }

    .chaos-module{
        order:-2;
    }

    .viewer-queue-module{
        order:-1;
    }

    .desktop-support-module{
        order:3;
    }

    .activity-module{
        order:4;
    }

    .quick-module{
        display:none;
    }

    .module-head{
        min-height:21px;
    }

    .module-label{
        font-size:9px;
    }

    .module-card h2{
        margin-top:10px;
        font-size:18px;
        line-height:1.18;
    }

    .module-card p{
        margin-top:6px;
        font-size:10px;
    }

    .rarity-chip{
        margin-top:5px;
        padding:3px 6px;
        font-size:7px;
    }

    .rarity-chip svg{
        width:10px;
        height:10px;
    }

    .quest-from{
        margin-top:8px;
        font-size:8px;
    }

    .quest-actions{
        gap:6px;
        margin-top:12px;
    }

    .primary-action,
    .secondary-action,
    .decision-pick{
        min-height:38px;
        border-radius:10px;
        font-size:9px;
    }

    .poll-options{
        gap:7px;
        margin-top:12px;
    }

    .poll-option-meta{
        font-size:8px;
    }

    .poll-option-meta strong{
        font-size:9px;
    }

    .poll-bar{
        height:4px;
        margin-top:4px;
    }

    .inline-action{
        margin-top:12px;
        font-size:8px;
    }

    .chaos-bolt{
        width:38px;
        height:38px;
        margin-top:9px;
    }

    .chaos-bolt svg{
        width:29px;
        height:29px;
    }

    .chaos-progress{
        position:relative;
        left:auto;
        right:auto;
        bottom:auto;
        margin-top:10px;
    }

    .chaos-charge-module{
        display:none;
    }

    .queue-preview{
        gap:6px;
        margin-top:9px;
    }

    .queue-preview > div{
        padding-bottom:6px;
    }

    .queue-preview strong{
        font-size:8px;
    }

    .queue-preview p{
        font-size:8px;
        margin-top:1px;
    }

    .activity-feed{
        grid-template-columns:1fr 1fr;
        gap:6px;
        margin-top:9px;
    }

    .activity-row{
        grid-template-columns:25px 1fr;
        gap:6px;
        padding:6px;
        border-radius:9px;
        background:rgba(255,255,255,.012);
    }

    .activity-icon{
        width:25px;
        height:25px;
        border-radius:8px;
    }

    .activity-icon svg{
        width:13px;
    }

    .activity-row time{
        display:none;
    }

    .activity-row strong{
        font-size:8px;
    }

    .activity-row small{
        font-size:7px;
    }

    .end-session-zone{
        margin-top:12px;
        padding-top:12px;
    }

    .end-session-trigger{
        min-height:42px;
        border-radius:12px;
        font-size:8px;
    }

    .mobile-bottom{
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        z-index:45;
        height:62px;
        display:grid;
        grid-template-columns:repeat(5,1fr);
        align-items:center;
        padding:
            5px
            9px
            max(5px,env(safe-area-inset-bottom));
        border-top:1px solid var(--line);
        background:rgba(7,8,12,.92);
        backdrop-filter:blur(24px);
    }

    .mobile-bottom a{
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:3px;
        color:var(--muted);
        text-decoration:none;
        font-size:7px;
        font-weight:750;
    }

    .mobile-bottom a.active{
        color:var(--accent);
    }

    .mobile-bottom svg{
        width:19px;
        height:19px;
    }

    .mobile-create{
        width:48px;
        height:48px;
        justify-self:center;
        display:grid;
        place-items:center;
        margin-top:-26px;
        border:0;
        border-radius:50%;
        color:#fff;
        background:
            linear-gradient(145deg,var(--accent),color-mix(in srgb,var(--accent) 70%,#721344));
        box-shadow:
            0 8px 28px color-mix(in srgb,var(--accent) 32%,transparent),
            0 0 0 5px rgba(7,8,12,.92);
        cursor:pointer;
    }

    .mobile-create svg{
        width:22px;
        height:22px;
    }

    .stopped-layout{
        min-height:calc(100vh - 144px);
        grid-template-columns:1fr;
        align-content:center;
        gap:8px;
    }

    .stopped-hero{
        min-height:350px;
        padding:24px 15px;
        border-radius:19px;
    }

    .stopped-hero .eyebrow{
        left:17px;
        top:17px;
        font-size:9px;
    }

    .stopped-symbol{
        width:82px;
        height:82px;
    }

    .hero-action{
        min-width:0;
        width:min(330px,88vw);
        min-height:52px;
        border-radius:13px;
        font-size:11px;
    }

    .last-session{
        padding:16px;
        border-radius:17px;
    }

    .last-session-title{
        margin-top:10px;
        font-size:21px;
    }

    .metric-row{
        grid-template-columns:repeat(3,1fr);
        gap:5px;
        margin-top:13px;
    }

    .metric-row > div{
        gap:5px;
        font-size:8px;
    }

    .metric-row svg{
        width:14px;
        height:14px;
    }

    .text-link{
        margin-top:13px;
        font-size:8px;
    }

    .sheet-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(min-width:901px){
    .mobile-stat{
        display:flex;
    }
}

@media(min-width:1400px){
    .dashboard{
        width:min(1640px,calc(100% - 48px));
    }

    .telemetry-strip{
        grid-template-columns:1.3fr .8fr .9fr 1fr .8fr;
    }

    .module-card{
        padding:20px;
    }

    .quest-module{
        grid-column:span 5;
    }

    .poll-module,
    .decision-module{
        grid-column:span 4;
    }

    .chaos-module,
    .chaos-charge-module{
        grid-column:span 3;
    }
}

/* Reduced motion is respected even though motion is a major part of the design. */
@media(prefers-reduced-motion:reduce){
    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
    }
}


/* V1.4 explicit split-colour safeguard */
.chaos-charge-module .module-label{
    color:var(--text)!important;
}
.chaos-charge-module .module-label span{
    color:var(--accent)!important;
}


/* ---------------- LIVE POLL DASHBOARD ---------------- */
.dashboard-poll-results{
    margin-top:22px;
}

.poll-total{
    margin-top:15px;
    color:var(--muted);
    font-size:12px;
    font-weight:900;
    letter-spacing:.05em;
}

.poll-total span{
    color:var(--accent);
}

.poll-dashboard-actions{
    display:grid;
    grid-template-columns:1.35fr 1fr 1fr;
    gap:8px;
    margin-top:20px;
}

.poll-dashboard-actions form{
    margin:0;
}

.poll-control{
    min-height:48px;
    white-space:nowrap;
}

.poll-page-link{
    margin-top:14px;
}

.poll-symbol{
    filter:drop-shadow(0 0 8px color-mix(in srgb,var(--accent) 40%,transparent));
}

@media(min-width:901px){
    .poll-module{
        min-height:380px;
    }

    .dashboard-poll-results .poll-option-meta strong{
        font-size:16px;
    }

    .dashboard-poll-results .poll-option-meta span{
        font-size:13px;
        font-weight:850;
    }
}


/* Direct-layout drop targeting */
@media(min-width:901px){
    .module-card.drop-column-preview{
        box-shadow:
            inset 0 0 0 1px var(--accent),
            0 0 28px color-mix(in srgb,var(--accent) 13%,transparent);
    }
}


/* ============================================================
   V1.6 // DIRECT FREEFORM DESKTOP MODULES
   ============================================================ */

@media(min-width:901px){
    .module-grid.freeform-ready{
        position:relative;
        display:block;
        min-height:620px;
        overflow:visible;
    }

    .module-grid.freeform-ready .module-card[data-layout-id]{
        position:absolute;
        margin:0;
        grid-column:auto!important;
        order:initial!important;
        touch-action:none;
        transition:
            border-color .18s var(--ease),
            box-shadow .18s var(--ease),
            filter .18s var(--ease);
    }

    .module-grid.freeform-ready .module-card[data-layout-id]:hover{
        transform:none;
    }

    .module-grid.freeform-ready .module-card.dragging{
        z-index:30;
        opacity:.88;
        box-shadow:
            0 24px 70px rgba(0,0,0,.42),
            0 0 0 1px color-mix(in srgb,var(--accent) 48%,transparent),
            0 0 36px color-mix(in srgb,var(--accent) 13%,transparent);
    }

    .module-grid.freeform-ready .layout-resize-handle{
        cursor:nwse-resize;
    }

    .module-card[data-layout-id]::after{
        width:34px;
        height:3px;
    }
}

/* Quick Actions closed really means CLOSED. */
.quick-module .expand-panel{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
    max-height:0;
    margin-top:0;
    opacity:0;
    overflow:hidden;
    pointer-events:none;
    transform:translateY(-5px);
    transition:
        max-height .28s var(--ease),
        opacity .2s var(--ease),
        transform .28s var(--ease),
        margin-top .28s var(--ease);
}

.quick-module .expand-panel.open{
    max-height:120px;
    margin-top:7px;
    opacity:1;
    pointer-events:auto;
    transform:none;
}

.quick-module .expand-panel a{
    margin-top:0;
}

/* Timer quests */
.quest-timer{
    width:max-content;
    max-width:100%;
    display:flex;
    align-items:center;
    gap:9px;
    margin-top:18px;
    padding:9px 12px;
    border:1px solid var(--line-accent);
    border-radius:12px;
    background:var(--soft-accent);
    color:var(--muted);
    font-size:12px;
    font-weight:900;
    letter-spacing:.05em;
}

.quest-timer svg{
    width:18px;
    height:18px;
    color:var(--accent);
}

.quest-timer span{
    color:var(--muted);
}

.quest-timer strong{
    color:var(--accent);
    font-size:18px;
    font-variant-numeric:tabular-nums;
}

/* Poll live-results display */
.dashboard-poll-results{
    display:grid;
    gap:13px;
}

.dashboard-poll-results .poll-option{
    padding:0;
}

.dashboard-poll-results .poll-option-meta strong b{
    color:var(--accent);
    font-weight:950;
}

.dashboard-poll-results .poll-bar{
    height:9px;
    background:rgba(255,255,255,.075);
}

.dashboard-poll-results .poll-bar span{
    background:
        linear-gradient(
            90deg,
            color-mix(in srgb,var(--accent) 70%,#000),
            var(--accent)
        );
}

.poll-vote-instruction{
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid var(--line);
    color:var(--muted);
    font-size:11px;
    font-weight:900;
    letter-spacing:.07em;
}

.poll-dashboard-actions{
    grid-template-columns:1fr 1fr!important;
}

.poll-dashboard-actions form:first-child{
    grid-column:1 / -1;
}

.poll-dashboard-actions .poll-control{
    width:100%;
    min-width:0;
    white-space:normal;
    line-height:1.15;
    padding:9px 12px;
}

/* No black/fade transition during live module refresh. */
.module-grid.live-updating,
.module-card.live-updating{
    animation:none!important;
    filter:none!important;
}


/* ============================================================
   V1.7 // FREEFORM COLLISION + NATURAL CONTENT HEIGHT
   ============================================================ */

@media(min-width:901px){
    .module-grid.freeform-ready .module-card[data-layout-id]{
        overflow:visible;
    }

    .module-card.snap-nearby{
        box-shadow:
            0 0 0 1px color-mix(in srgb,var(--accent) 42%,transparent),
            0 0 26px color-mix(in srgb,var(--accent) 10%,transparent);
    }

    .module-card.collision-blocked{
        box-shadow:
            0 0 0 1px rgba(255,112,135,.58),
            0 0 28px rgba(255,112,135,.10);
    }
}

/* Quick Actions changes height with its open/closed content. */
.quick-module{
    min-height:0!important;
}

.quick-module .expand-panel{
    will-change:max-height,opacity,transform;
}

/* Poll options must always be visible when there are real options. */
.poll-module .dashboard-poll-results:not(:empty){
    margin-top:20px;
}

.poll-module .dashboard-poll-results .poll-option{
    display:block;
}

.poll-module .dashboard-poll-results .poll-option + .poll-option{
    margin-top:13px;
}


/* ============================================================
   V1.8 // POLISH
   ============================================================ */

/* Poll action buttons: identical second-row box size regardless of wrapping. */
.poll-dashboard-actions form{
    display:flex;
}

.poll-dashboard-actions form:nth-child(2),
.poll-dashboard-actions form:nth-child(3){
    min-width:0;
}

.poll-dashboard-actions form:nth-child(2) .poll-control,
.poll-dashboard-actions form:nth-child(3) .poll-control{
    height:58px;
    min-height:58px;
    flex:1 1 auto;
    padding:8px 12px;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* 30-second winner state */
.poll-result-module{
    border-color:var(--line-accent);
    background:
        radial-gradient(
            circle at 80% 8%,
            color-mix(in srgb,var(--accent) 10%,transparent),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.033),
            rgba(255,255,255,.012)
        );
}

.poll-result-hold{
    margin-top:6px;
    color:var(--muted);
    font-size:11px;
    font-weight:900;
    font-variant-numeric:tabular-nums;
}

.poll-result-trophy{
    width:31px;
    height:31px;
    color:var(--accent);
    filter:drop-shadow(
        0 0 12px
        color-mix(in srgb,var(--accent) 40%,transparent)
    );
}

.poll-winner-kicker{
    margin-top:24px;
    color:var(--muted);
    font-size:12px;
    font-weight:950;
    letter-spacing:.10em;
}

.poll-winner-title{
    margin-top:7px!important;
    font-size:clamp(34px,2.5vw,52px)!important;
}

.poll-winner-title span{
    color:var(--accent);
}

.poll-winner-stats{
    display:flex;
    align-items:baseline;
    gap:10px;
    margin-top:17px;
}

.poll-winner-stats strong{
    color:var(--accent);
    font-size:27px;
    line-height:1;
}

.poll-winner-stats span{
    color:var(--muted);
    font-size:12px;
    font-weight:900;
}

.poll-winner-bar{
    height:9px;
    margin-top:15px;
}

.poll-result-note{
    margin-top:13px;
    color:var(--muted);
    font-size:10px;
    font-weight:900;
    letter-spacing:.07em;
}


/* ============================================================
   V1.9 // NO-REFRESH STATES + AUTO HEIGHT
   ============================================================ */

/*
 * Quick Actions is content-height driven. The freeform canvas controls x/y/w,
 * but the shell itself follows the expanding contents immediately.
 */
@media(min-width:901px){
    .module-grid.freeform-ready .quick-module[data-layout-id="quick-actions"]{
        height:auto!important;
        min-height:0!important;
    }
}

/* Equal poll buttons and keep labels on one line. */
.poll-dashboard-actions form:nth-child(2) .poll-control,
.poll-dashboard-actions form:nth-child(3) .poll-control{
    width:100%;
    height:58px;
    min-height:58px;
    white-space:nowrap;
    font-size:12px;
    line-height:1;
}

/* 30-second timed-quest failure state */
.quest-failed-module{
    border-color:color-mix(in srgb,var(--danger) 45%,var(--line));
    background:
        radial-gradient(
            circle at 78% 12%,
            color-mix(in srgb,var(--danger) 9%,transparent),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.033),
            rgba(255,255,255,.012)
        );
}

.quest-failed-module .module-label{
    color:var(--text);
}

.quest-failed-module .module-label span{
    color:var(--danger);
}

.quest-failed-symbol{
    width:30px;
    height:30px;
    color:var(--danger);
}

.failure-glow{
    background:
        radial-gradient(
            circle,
            color-mix(in srgb,var(--danger) 15%,transparent),
            transparent 70%
        );
}

.quest-result-hold{
    margin-top:7px;
    color:var(--muted);
    font-size:11px;
    font-weight:900;
    font-variant-numeric:tabular-nums;
}

.quest-result-kicker{
    margin-top:25px;
    color:var(--danger);
    font-size:12px;
    font-weight:950;
    letter-spacing:.10em;
}

.quest-failed-state{
    width:max-content;
    max-width:100%;
    margin-top:20px;
    padding:10px 13px;
    border:1px solid color-mix(in srgb,var(--danger) 38%,transparent);
    border-radius:12px;
    background:color-mix(in srgb,var(--danger) 7%,transparent);
    color:var(--danger);
    font-size:14px;
    font-weight:950;
}

.quest-failed-state span{
    color:var(--muted);
}

.quest-result-note{
    margin-top:12px;
    color:var(--muted);
    font-size:10px;
    font-weight:900;
    letter-spacing:.07em;
}


/* ============================================================
   V1.12 // QUICK ACTION COMMAND OVERLAY
   ============================================================ */
.quick-command-backdrop{
    position:fixed;inset:0;z-index:118;
    background:rgba(4,5,8,.72);
    backdrop-filter:blur(12px) saturate(.8);
    opacity:0;visibility:hidden;
    transition:opacity .22s var(--ease),visibility .22s;
}
.quick-command-backdrop.open{opacity:1;visibility:visible}

.quick-command-modal{
    position:fixed;z-index:119;left:50%;top:50%;
    width:min(1080px,calc(100vw - 80px));
    max-height:calc(100vh - 72px);overflow:auto;padding:22px;
    border:1px solid var(--line-accent);border-radius:26px;
    background:
        radial-gradient(circle at 80% 0%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 33%),
        linear-gradient(145deg,rgba(34,32,39,.992),rgba(18,19,24,.992));
    box-shadow:0 40px 120px rgba(0,0,0,.62),0 0 65px color-mix(in srgb,var(--accent) 9%,transparent);
    opacity:0;visibility:hidden;
    transform:translate(-50%,-47%) scale(.975);
    transition:opacity .24s var(--ease),transform .32s var(--ease),visibility .24s;
}
.quick-command-modal.open{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}

.quick-command-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:4px 2px 19px}
.quick-command-brand{color:var(--text);font-size:15px;font-weight:950;letter-spacing:.06em}
.quick-command-brand span{color:var(--accent)}
.quick-command-head h2{margin:8px 0 0;color:var(--text);font-size:clamp(20px,1.55vw,28px);line-height:1.05}

.quick-command-close{
    width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;padding:0;
    border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.018);
    color:var(--muted);cursor:pointer;transition:.18s var(--ease)
}
.quick-command-close:hover{border-color:var(--line-accent);color:var(--accent);background:var(--soft-accent)}
.quick-command-close svg{width:19px;height:19px}

.quick-poll-presets{
    display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:15px;
    border:1px solid var(--line);border-radius:19px;background:rgba(255,255,255,.018)
}
.quick-preset-group{min-width:0}
.quick-field-label{margin-bottom:9px;color:var(--muted);font-size:10px;font-weight:950;letter-spacing:.095em}
.quick-preset-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.quick-preset-button{
    min-height:56px;padding:0 11px;border:1px solid var(--line);border-radius:14px;
    background:rgba(255,255,255,.018);color:var(--text);font:inherit;font-size:14px;
    font-weight:950;cursor:pointer;transition:transform .16s var(--ease),border-color .16s var(--ease),color .16s var(--ease),background .16s var(--ease)
}
.quick-preset-button span{color:var(--accent)}
.quick-preset-button:hover{transform:translateY(-1px);border-color:var(--line-accent)}
.quick-preset-button.active{
    border-color:var(--accent);color:var(--accent);
    background:color-mix(in srgb,var(--accent) 10%,rgba(255,255,255,.018));
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent)
}

.quick-poll-workspace{margin-top:12px;padding:17px;border:1px solid var(--line);border-radius:19px;background:rgba(255,255,255,.014)}
.quick-poll-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px}
.quick-field{display:grid;gap:7px;min-width:0}
.quick-field.wide{grid-column:1 / -1}
.quick-field>span{color:var(--accent);font-size:10px;font-weight:950;letter-spacing:.075em}
.quick-field input,.quick-field select,.quick-choice-input{
    width:100%;min-height:48px;padding:0 13px;border:1px solid var(--line);border-radius:12px;
    outline:none;background:rgba(255,255,255,.025);color:var(--text);font:inherit;font-size:14px;font-weight:800;
    transition:border-color .16s var(--ease),box-shadow .16s var(--ease),background .16s var(--ease)
}
.quick-field input:focus,.quick-field select:focus,.quick-choice-input:focus{
    border-color:var(--accent);background:rgba(255,255,255,.038);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 9%,transparent)
}

.quick-choice-head{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:18px}
.quick-choice-head small{display:block;margin-top:-4px;color:var(--muted);font-size:9px;font-weight:800}
.quick-add-choice{
    min-height:38px;display:inline-flex;align-items:center;gap:7px;padding:0 11px;
    border:1px solid var(--line-accent);border-radius:11px;background:transparent;color:var(--accent);
    font:inherit;font-size:10px;font-weight:950;cursor:pointer
}
.quick-add-choice svg{width:15px;height:15px}
.quick-choice-list{display:grid;gap:8px;margin-top:10px}
.quick-choice-row{
    display:grid;grid-template-columns:44px 1fr 38px;align-items:center;gap:8px;min-height:54px;padding:7px;
    border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.012);
    animation:quick-choice-in .2s var(--ease) both
}
@keyframes quick-choice-in{from{opacity:0;transform:translateY(5px)}}
.quick-choice-number{
    display:grid;place-items:center;width:38px;height:38px;border:1px solid var(--line-accent);
    border-radius:50%;color:var(--accent);font-size:12px;font-weight:950
}
.quick-choice-remove{
    width:34px;height:34px;display:grid;place-items:center;padding:0;border:0;border-radius:10px;
    background:transparent;color:var(--muted);cursor:pointer;transition:.16s var(--ease)
}
.quick-choice-remove:hover{color:var(--danger);background:color-mix(in srgb,var(--danger) 8%,transparent)}
.quick-choice-remove svg{width:16px;height:16px}

.quick-command-error{
    display:none;margin-top:12px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--danger) 42%,transparent);
    border-radius:11px;background:color-mix(in srgb,var(--danger) 7%,transparent);
    color:var(--danger);font-size:12px;font-weight:900
}
.quick-command-error.visible{display:block}

.quick-command-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;padding-top:15px;border-top:1px solid var(--line)}
.quick-advanced-link{display:inline-flex;align-items:center;gap:8px;color:var(--muted);text-decoration:none;font-size:11px;font-weight:900;transition:.16s var(--ease)}
.quick-advanced-link:hover{color:var(--accent)}
.quick-advanced-link svg{width:14px;height:14px}

.quick-start-button{
    min-width:210px;min-height:50px;display:inline-flex;align-items:center;justify-content:center;gap:9px;
    padding:0 20px;border:1px solid var(--accent);border-radius:13px;
    background:linear-gradient(100deg,color-mix(in srgb,var(--accent) 84%,#000),var(--accent));
    color:#fff;font:inherit;font-size:13px;font-weight:950;cursor:pointer;
    box-shadow:0 12px 32px color-mix(in srgb,var(--accent) 13%,transparent)
}
.quick-start-button svg{width:17px;height:17px;fill:currentColor;stroke:none}

.quick-module .expand-panel button{
    min-height:62px;display:grid;place-items:center;gap:6px;padding:8px;border:1px solid var(--line);
    border-radius:12px;background:rgba(255,255,255,.012);color:var(--text);font:inherit;font-size:13px;
    font-weight:900;cursor:pointer;transition:.16s var(--ease)
}
.quick-module .expand-panel button:hover{border-color:var(--line-accent);color:var(--accent);background:var(--soft-accent)}
.quick-module .expand-panel button svg{width:19px;height:19px}

body.quick-command-open{overflow:hidden}

@media(max-width:900px){
    .quick-command-modal{width:calc(100vw - 20px);max-height:calc(100vh - 20px);padding:15px;border-radius:20px}
    .quick-poll-presets,.quick-poll-grid{grid-template-columns:1fr}
    .quick-command-footer{align-items:stretch;flex-direction:column-reverse}
    .quick-start-button{width:100%}
}


/* V1.12.1 // native select dropdown readability */
.quick-command-modal .quick-field select{
    color-scheme:dark;
    background-color:#202126;
    color:var(--text);
}

.quick-command-modal .quick-field select option{
    background:#202126;
    color:#f2f0f3;
}

/* V1.13 // QUICK QUEST */
.quick-quest-actions{display:grid;grid-template-columns:280px 1fr;gap:12px}
.quick-random-quest-form{display:flex}
.quick-random-quest{width:100%;min-height:100%;display:flex;align-items:center;justify-content:center;gap:14px;padding:24px 18px;border:1px solid var(--line-accent);border-radius:18px;background:radial-gradient(circle at 50% 20%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 55%),rgba(255,255,255,.018);color:var(--text);font:inherit;cursor:pointer;transition:.18s var(--ease)}
.quick-random-quest:hover{transform:translateY(-2px);border-color:var(--accent);background-color:var(--soft-accent)}
.quick-random-quest>svg{width:34px;height:34px;color:var(--accent)}
.quick-random-quest span{display:grid;gap:5px;text-align:left}.quick-random-quest strong{font-size:15px}.quick-random-quest small{color:var(--muted);font-size:9px;font-weight:900}
.quick-quest-picker{min-width:0;padding:15px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.014)}
.quick-quest-search{display:grid;grid-template-columns:28px 1fr;align-items:center;gap:6px;min-height:46px;padding:0 10px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02)}
.quick-quest-search svg{width:17px;height:17px;color:var(--muted)}.quick-quest-search input{width:100%;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:13px;font-weight:800}
.quick-quest-list{display:grid;gap:6px;max-height:220px;overflow:auto;margin-top:9px;padding-right:3px}
.quick-quest-option{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.012);color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:.16s var(--ease)}
.quick-quest-option:hover{border-color:var(--line-accent);background:var(--soft-accent)}.quick-quest-option.selected{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,rgba(255,255,255,.012))}
.quick-quest-copy{display:grid;gap:3px;min-width:0}.quick-quest-copy strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.quick-quest-copy small{color:var(--muted);font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quick-quest-meta{flex:0 0 auto;color:var(--muted);font-size:9px;font-weight:950}.quick-quest-meta b{color:var(--accent)}
.quick-start-existing-form{display:flex;justify-content:flex-end;margin-top:10px}.quick-start-existing-form .quick-start-button{min-height:42px;min-width:200px}.quick-start-button:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}
.quick-command-divider{display:flex;align-items:center;gap:12px;margin:17px 0;color:var(--muted);font-size:9px;font-weight:950;letter-spacing:.09em}.quick-command-divider:before,.quick-command-divider:after{content:"";height:1px;flex:1;background:var(--line)}
.quick-create-quest-form{padding:17px;border:1px solid var(--line);border-radius:19px;background:rgba(255,255,255,.014)}
@media(max-width:900px){.quick-quest-actions{grid-template-columns:1fr}.quick-random-quest{min-height:88px}.quick-quest-list{max-height:180px}}


/* V1.13.1 // Quick Quest search */
.quick-quest-option[hidden]{
    display:none!important;
}


/* ==========================================================================
   V1.14 // DASHBOARD COMMAND SURFACES
   ========================================================================== */

.inline-action-button{
    width:100%;
    border:0;
    background:transparent;
    padding:0;
    font:inherit;
    text-align:left;
    cursor:pointer;
}

.dashboard-viewer-queue-list{
    display:grid;
    gap:12px;
    max-height:min(58vh,620px);
    overflow:auto;
    padding:2px 4px 4px 0;
}

.dashboard-viewer-quest-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:18px;
    align-items:center;
    padding:18px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:16px;
    background:rgba(255,255,255,.025);
}

.dashboard-viewer-quest-row.selected{
    border-color:color-mix(in srgb,var(--accent) 58%,transparent);
    background:color-mix(in srgb,var(--accent) 8%,rgba(255,255,255,.025));
    box-shadow:inset 0 0 28px color-mix(in srgb,var(--accent) 5%,transparent);
}

.dashboard-viewer-quest-copy{
    min-width:0;
}

.dashboard-viewer-quest-meta{
    margin-bottom:7px;
    color:var(--accent);
    font-size:11px;
    font-weight:900;
    letter-spacing:.08em;
}

.dashboard-viewer-quest-copy strong{
    display:block;
    color:#fff;
    font-size:18px;
    line-height:1.1;
}

.dashboard-viewer-quest-copy p{
    margin:7px 0 0;
    color:var(--muted);
    font-size:13px;
    line-height:1.35;
}

.dashboard-viewer-quest-actions{
    display:flex;
    gap:8px;
    align-items:center;
}

.dashboard-viewer-quest-actions form{
    margin:0;
}

.dashboard-viewer-quest-actions button{
    min-height:42px;
    white-space:nowrap;
    padding:0 16px;
}

.quick-danger-button{
    min-height:42px;
    border:1px solid rgba(255,112,137,.58);
    border-radius:12px;
    background:rgba(255,112,137,.06);
    color:#ff8ca1;
    font:inherit;
    font-weight:900;
    cursor:pointer;
}

.dashboard-viewer-queue-empty{
    min-height:190px;
    display:grid;
    place-items:center;
    align-content:center;
    gap:8px;
    color:var(--muted);
    text-align:center;
}

.dashboard-viewer-queue-empty svg{
    width:38px;
    height:38px;
    fill:none;
    stroke:var(--accent);
    stroke-width:1.7;
}

.dashboard-viewer-queue-empty strong{
    color:#fff;
    font-size:18px;
}

.dashboard-viewer-queue-empty span{
    font-size:12px;
    font-weight:800;
}

.quick-chaos-status{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    padding:18px;
    margin-bottom:18px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    background:rgba(255,255,255,.02);
}

.quick-chaos-orbit{
    width:86px;
    height:86px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:
        radial-gradient(circle at center,rgba(255,255,255,.025) 0 53%,transparent 54%),
        conic-gradient(var(--accent) calc(var(--charge) * 1%),rgba(255,255,255,.08) 0);
    box-shadow:0 0 35px color-mix(in srgb,var(--accent) 10%,transparent);
}

.quick-chaos-orbit::before{
    content:"";
    grid-area:1/1;
    width:70px;
    height:70px;
    border-radius:50%;
    background:#1c1c21;
}

.quick-chaos-orbit svg{
    grid-area:1/1;
    position:relative;
    z-index:1;
    width:32px;
    height:32px;
    fill:var(--accent);
}

.quick-chaos-status span,
.quick-chaos-active span{
    display:block;
    color:var(--accent);
    font-size:11px;
    font-weight:900;
    letter-spacing:.09em;
}

.quick-chaos-status strong{
    display:block;
    margin-top:3px;
    color:#fff;
    font-size:32px;
    line-height:1;
}

.quick-chaos-charge-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
    margin:8px 0 14px;
}

.quick-chaos-charge-grid form{
    margin:0;
}

.quick-chaos-charge-grid button{
    width:100%;
    min-height:58px;
    border:1px solid color-mix(in srgb,var(--accent) 42%,rgba(255,255,255,.08));
    border-radius:14px;
    background:color-mix(in srgb,var(--accent) 7%,rgba(255,255,255,.025));
    color:var(--accent);
    font:inherit;
    font-size:17px;
    font-weight:900;
    cursor:pointer;
    transition:transform .16s ease,border-color .16s ease,background .16s ease;
}

.quick-chaos-charge-grid button:hover{
    transform:translateY(-2px);
    border-color:var(--accent);
    background:color-mix(in srgb,var(--accent) 13%,rgba(255,255,255,.025));
}

.quick-chaos-trigger-form{
    margin:0;
}

.quick-chaos-trigger{
    width:100%;
    min-height:58px;
}

.quick-chaos-trigger svg{
    width:18px;
    height:18px;
    fill:currentColor;
}

.quick-chaos-active{
    padding:20px;
    border:1px solid color-mix(in srgb,var(--accent) 48%,transparent);
    border-radius:16px;
    background:color-mix(in srgb,var(--accent) 8%,transparent);
}

.quick-chaos-active strong{
    display:block;
    margin-top:7px;
    color:#fff;
    font-size:24px;
}

.quick-chaos-active p{
    margin:8px 0 0;
    color:var(--muted);
}

@media(max-width:720px){
    .dashboard-viewer-quest-row{
        grid-template-columns:1fr;
    }

    .dashboard-viewer-quest-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .dashboard-viewer-quest-actions button{
        width:100%;
    }

    .quick-chaos-charge-grid{
        grid-template-columns:1fr 1fr;
    }
}


/* ==========================================================================
   V1.15 // QUICK ACHIEVEMENTS
   ========================================================================== */

.quick-links .quick-link-button{
    width:100%;
    min-height:100%;
    display:flex;
    align-items:center;
    gap:10px;
    padding:11px 12px;
    border:1px solid var(--line);
    border-radius:12px;
    background:rgba(255,255,255,.012);
    color:var(--text);
    font:inherit;
    text-align:left;
    cursor:pointer;
    transition:.16s var(--ease);
}

.quick-links .quick-link-button:hover{
    border-color:var(--line-accent);
    background:var(--soft-accent);
}

.quick-links .quick-link-button > svg{
    width:19px;
    height:19px;
    flex:0 0 19px;
    color:var(--accent);
}

.quick-links .quick-link-button span{
    display:grid;
    gap:2px;
}

.quick-links .quick-link-button strong{
    color:var(--accent);
}

.quick-links .quick-link-button small{
    color:var(--muted);
}

.quick-achievement-search{
    display:grid;
    grid-template-columns:28px minmax(0,1fr) auto;
    align-items:center;
    gap:8px;
    min-height:54px;
    padding:0 12px;
    border:1px solid var(--line-accent);
    border-radius:14px;
    background:
        color-mix(in srgb,var(--accent) 4%,rgba(255,255,255,.018));
}

.quick-achievement-search > svg{
    width:18px;
    height:18px;
    color:var(--accent);
}

.quick-achievement-search input{
    width:100%;
    border:0;
    outline:0;
    background:transparent;
    color:var(--text);
    font:inherit;
    font-size:14px;
    font-weight:850;
}

.quick-achievement-search > span{
    color:var(--muted);
    font-size:10px;
    font-weight:950;
    letter-spacing:.06em;
}

.quick-achievement-list{
    display:grid;
    gap:8px;
    max-height:min(46vh,500px);
    overflow:auto;
    margin-top:12px;
    padding-right:4px;
}

.quick-achievement-row{
    display:grid;
    grid-template-columns:46px minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
    padding:12px;
    border:1px solid var(--line);
    border-radius:14px;
    background:rgba(255,255,255,.014);
    transition:
        opacity .22s var(--ease),
        transform .22s var(--ease),
        border-color .16s var(--ease),
        background .16s var(--ease);
}

.quick-achievement-row:hover{
    border-color:color-mix(in srgb,var(--accent) 40%,var(--line));
    background:color-mix(in srgb,var(--accent) 3%,rgba(255,255,255,.014));
}

.quick-achievement-row[hidden]{
    display:none!important;
}

.quick-achievement-row.unlocking-away{
    opacity:0;
    transform:
        translateX(12px)
        scale(.985);
}

.quick-achievement-icon{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border:1px solid var(--line-accent);
    border-radius:13px;
    background:var(--soft-accent);
    color:var(--accent);
}

.quick-achievement-icon svg{
    width:21px;
    height:21px;
}

.quick-achievement-copy{
    min-width:0;
}

.quick-achievement-copy > strong{
    display:block;
    color:#fff;
    font-size:14px;
    line-height:1.15;
}

.quick-achievement-copy p{
    margin:5px 0 0;
    color:var(--muted);
    font-size:11px;
    line-height:1.35;
}

.quick-achievement-meta{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    margin-top:7px;
    color:var(--muted);
    font-size:9px;
    font-weight:900;
}

.quick-achievement-meta b{
    color:var(--accent);
}

.quick-achievement-unlock{
    min-width:104px;
    min-height:42px;
    padding:0 14px;
    border:1px solid var(--accent);
    border-radius:11px;
    background:var(--accent);
    color:#fff;
    font:inherit;
    font-size:11px;
    font-weight:950;
    cursor:pointer;
    box-shadow:
        0 10px 24px
        color-mix(in srgb,var(--accent) 11%,transparent);
}

.quick-achievement-unlock:disabled{
    opacity:.45;
    cursor:default;
}

.quick-achievement-empty{
    min-height:170px;
    display:grid;
    place-items:center;
    align-content:center;
    gap:7px;
    color:var(--muted);
    text-align:center;
}

.quick-achievement-empty svg{
    width:35px;
    height:35px;
    color:var(--accent);
}

.quick-achievement-empty strong{
    color:#fff;
    font-size:16px;
}

.quick-achievement-empty span{
    font-size:10px;
    font-weight:850;
}

.quick-achievement-feedback{
    display:none;
    margin-top:10px;
    padding:10px 12px;
    border:1px solid var(--line-accent);
    border-radius:11px;
    background:var(--soft-accent);
    color:var(--accent);
    font-size:11px;
    font-weight:900;
}

.quick-achievement-feedback.visible{
    display:block;
    animation:
        achievement-feedback-in .2s var(--ease)
        both;
}

@keyframes achievement-feedback-in{
    from{
        opacity:0;
        transform:translateY(-4px);
    }
}

.quick-create-achievement-form{
    padding:16px;
    border:1px solid var(--line);
    border-radius:18px;
    background:rgba(255,255,255,.014);
}

.quick-achievement-create-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.quick-achievement-create-grid .wide{
    grid-column:1 / -1;
}

.quick-achievement-create-note{
    display:flex;
    align-items:center;
    gap:9px;
    min-height:48px;
    padding:8px 11px;
    border:1px solid var(--line);
    border-radius:12px;
    color:var(--muted);
    font-size:9px;
    font-weight:850;
    line-height:1.25;
}

.quick-achievement-create-note svg{
    width:17px;
    height:17px;
    flex:0 0 17px;
    color:var(--accent);
}

@media(max-width:720px){
    .quick-achievement-row{
        grid-template-columns:42px minmax(0,1fr);
    }

    .quick-achievement-row form{
        grid-column:1 / -1;
    }

    .quick-achievement-unlock{
        width:100%;
    }

    .quick-achievement-create-grid{
        grid-template-columns:1fr;
    }

    .quick-achievement-create-grid .wide{
        grid-column:auto;
    }
}


/* V1.16 // growing freeform modules */
@media(min-width:901px){
    .module-grid.freeform-ready .quick-module{
        transition:
            border-color .18s var(--ease),
            box-shadow .18s var(--ease);
    }
}


/* ==========================================================================
   V1.17 // QUICK LINK BUTTON PARITY
   ========================================================================== */

.quick-links > a,
.quick-links > .quick-link-button{
    width:100%;
    min-width:0;
    min-height:61px;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    gap:9px;
    padding:10px;
    border:1px solid var(--line);
    border-radius:12px;
    background:rgba(255,255,255,.012);
    color:var(--text);
    text-decoration:none;
}

.quick-links > .quick-link-button{
    justify-content:flex-start;
}

.quick-links > a > svg,
.quick-links > .quick-link-button > svg{
    width:21px;
    height:21px;
    flex:0 0 21px;
    color:var(--accent);
}

.quick-links > a strong,
.quick-links > .quick-link-button strong{
    display:block;
    color:var(--accent);
    font-size:13px;
    line-height:1.05;
}

.quick-links > a small,
.quick-links > .quick-link-button small{
    display:block;
    margin-top:3px;
    color:var(--muted);
    font-size:12px;
    line-height:1.05;
}

/* Leaving modules fade visually but are already ignored by collision layout. */
.module-card.module-leaving{
    z-index:1!important;
}


/* ==========================================================================
   V1.18 // RESIZED MODULE CONTENT BEHAVIOUR
   ========================================================================== */

/*
 * A manually-resized card is a viewport. Its contents must never paint outside
 * its shell. Scroll internally when the streamer makes it smaller than the
 * content needs.
 *
 * The resize corner remains visible because it is absolutely positioned inside
 * the card itself.
 */
@media(min-width:901px){
    .module-grid.freeform-ready .module-card[data-layout-id]{
        overflow:auto;
        overscroll-behavior:contain;
        scrollbar-gutter:stable;
    }

    .module-grid.freeform-ready .module-card[data-layout-id]::-webkit-scrollbar{
        width:8px;
        height:8px;
    }

    .module-grid.freeform-ready .module-card[data-layout-id]::-webkit-scrollbar-track{
        background:transparent;
    }

    .module-grid.freeform-ready .module-card[data-layout-id]::-webkit-scrollbar-thumb{
        border-radius:999px;
        background:rgba(255,255,255,.13);
    }

    .module-grid.freeform-ready .module-card[data-layout-id]::-webkit-scrollbar-thumb:hover{
        background:color-mix(in srgb,var(--accent) 42%,rgba(255,255,255,.13));
    }

    /*
     * Quick Actions remains content-height driven rather than internally
     * scrolling, because opening CREATE is an intentional expansion.
     */
    .module-grid.freeform-ready .quick-module[data-layout-id="quick-actions"]{
        overflow:visible;
        scrollbar-gutter:auto;
    }
}


/* V1.19 // no visual redesign; live control cards now pack horizontally. */


/* V1.20 // dynamic live cards may compact to the remaining control-row width. */

/* V1.21 // corrected live-row blocker detection. */

/* V1.22 // commit valid packed live-row slots without upper-row veto. */

/* V1.23 // true row-first dynamic module packing. */


/* V1.24 // Desktop/Gamer telemetry */
.telemetry-achievement-marks,
.telemetry-quest-bars{
    display:flex;
    align-items:flex-end;
    gap:4px;
    height:22px;
    margin-top:7px;
}

.telemetry-achievement-marks i{
    width:6px;
    height:6px;
    border:1px solid var(--accent);
    transform:rotate(45deg);
    opacity:.9;
}

.telemetry-achievement-marks i:nth-child(2),
.telemetry-achievement-marks i:nth-child(4){
    opacity:.35;
}

.telemetry-quest-bars i{
    width:5px;
    background:var(--accent);
    opacity:.9;
}

.telemetry-quest-bars i:nth-child(1){height:6px}
.telemetry-quest-bars i:nth-child(2){height:10px}
.telemetry-quest-bars i:nth-child(3){height:14px}
.telemetry-quest-bars i:nth-child(4){height:18px}
.telemetry-quest-bars i:nth-child(5){height:22px}

.telemetry-value small{
    font-size:.36em;
    vertical-align:middle;
    letter-spacing:.04em;
}


/* V1.25 // telemetry alignment + focus visual sync */
.telemetry-strip{
    align-items:stretch;
}

.telemetry-item{
    min-height:118px;
    justify-content:flex-start;
    padding-top:26px;
    padding-bottom:20px;
}

.telemetry-item.level-item{
    justify-content:center;
    padding-top:18px;
    padding-bottom:18px;
}

/*
 * All non-level telemetry now shares the same vertical anchors:
 * label -> value -> subline -> visual.
 * This stops Achievements / Quests sitting visibly higher than XP / Time.
 */
.telemetry-item:not(.level-item) .telemetry-label{
    min-height:11px;
}

.telemetry-item:not(.level-item) .telemetry-value{
    min-height:27px;
}

.telemetry-item:not(.level-item) .telemetry-sub{
    min-height:14px;
    margin-top:6px;
}

.telemetry-achievement-marks,
.telemetry-quest-bars,
.telemetry-xp-pulse,
.sparkline,
.mini-bars{
    margin-top:auto;
}

.telemetry-xp-pulse{
    display:flex;
    align-items:flex-end;
    gap:4px;
    height:22px;
}

.telemetry-xp-pulse i{
    width:18px;
    height:3px;
    border-radius:99px;
    background:var(--accent);
    opacity:.28;
}

.telemetry-xp-pulse i:nth-child(2){height:5px;opacity:.45}
.telemetry-xp-pulse i:nth-child(3){height:8px;opacity:.95}
.telemetry-xp-pulse i:nth-child(4){height:5px;opacity:.55}
.telemetry-xp-pulse i:nth-child(5){height:3px;opacity:.3}









/* V1.30 // IRL cash-spent downward spend line */
.cash-downtrend{
    width:112px;
    height:28px;
    margin-top:auto;
    overflow:visible;
}
.cash-downtrend path{
    vector-effect:non-scaling-stroke;
    fill:none;
    stroke:var(--accent);
    stroke-linecap:round;
    stroke-linejoin:round;
}
.cash-downtrend-line{
    stroke-width:2;
}
.cash-downtrend-arrow{
    stroke-width:2;
}


/* ==========================================================================
   V1.31 // QUICK ACTION LOWER TILE TEXT FIT
   ========================================================================== */

.quick-links > a,
.quick-links > .quick-link-button{
    overflow:hidden;
}

.quick-links > a > span,
.quick-links > .quick-link-button > span{
    min-width:0;
    width:100%;
    max-width:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:2px;
    overflow:hidden;
}

.quick-links > a strong,
.quick-links > .quick-link-button strong{
    max-width:100%;
    font-size:12px;
    line-height:1.05;
    letter-spacing:-.015em;
    white-space:nowrap;
}

.quick-links > a small,
.quick-links > .quick-link-button small{
    max-width:100%;
    margin-top:1px;
    font-size:11px;
    line-height:1.08;
    white-space:nowrap;
}

.quick-links > a > svg,
.quick-links > .quick-link-button > svg{
    width:20px;
    height:20px;
    flex:0 0 20px;
}


/* ==========================================================================
   V1.32 // QUICK ACTION LOWER TILE FINAL FIT
   ========================================================================== */

/*
 * Keep the full ACHIEVEMENTS label visible without clipping.
 * Give the text a little more room by tightening icon/gap/padding slightly
 * instead of shrinking the whole tile visually.
 */
.quick-links > a,
.quick-links > .quick-link-button{
    gap:7px;
    padding-left:8px;
    padding-right:8px;
}

.quick-links > a > svg,
.quick-links > .quick-link-button > svg{
    width:18px;
    height:18px;
    flex:0 0 18px;
}

.quick-links > a strong,
.quick-links > .quick-link-button strong{
    font-size:11.5px;
    letter-spacing:-.03em;
    overflow:visible;
    text-overflow:clip;
}

.quick-links > a small,
.quick-links > .quick-link-button small{
    font-size:10.5px;
    letter-spacing:-.015em;
    overflow:visible;
    text-overflow:clip;
}


/* ==========================================================================
   V1.33 // SHARED RIV // PLATFORM SIDEBAR
   Dashboard now uses the exact sidebar component used by Content.
   ========================================================================== */

@media(min-width:901px){
    .app-shell{
        padding-left:var(--backend-sidebar-width)!important;
    }

    .dashboard{
        width:min(1680px,calc(100% - 48px));
    }

    /* The old narrow rail is no longer rendered, but keep it suppressed if
       stale cached markup ever appears during deployment. */
    .nav-rail{
        display:none!important;
    }
}

@media(max-width:900px){
    /*
     * Dashboard keeps its existing mobile top/bottom navigation for now.
     * The shared desktop sidebar naturally slides off-canvas at this width.
     */
    .backend-sidebar{
        display:none!important;
    }

    .app-shell{
        padding-left:0!important;
    }
}


/* ==========================================================================
   RIV // DASHBOARD FULL DESKTOP CANVAS V1.4

   Dashboard is structurally different from other backend pages: its
   <main class="dashboard"> lives directly inside .app-shell rather than
   .backend-main. Therefore it owns its own full-width desktop rule.

   After the shared sidebar, use the available canvas with a 24px gutter.
   ========================================================================== */
@media(min-width:901px){
    .app-shell > .dashboard{
        width:calc(100% - 48px)!important;
        max-width:none!important;
        margin-left:24px!important;
        margin-right:24px!important;
    }
}


/* ==========================================================================
   RIV // QUICK OVERLAY V1
   ========================================================================== */

.quick-overlay-modal{
    width:min(820px,calc(100vw - 80px));
}

.quick-overlay-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

.quick-overlay-install,
.quick-overlay-manual{
    min-width:0;
    display:grid;
    align-content:start;
    gap:11px;
    padding:14px;
    border:1px solid var(--line);
    border-radius:17px;
    background:var(--riv-surface-deep,#1D1B1F);
}

.quick-overlay-install{
    border-color:var(--line-accent);
    background:
        linear-gradient(135deg,color-mix(in srgb,var(--accent) 6%,transparent),transparent 55%),
        var(--riv-surface-deep,#1D1B1F);
}

.quick-overlay-section-head{
    display:grid;
    gap:4px;
}

.quick-overlay-section-head > span{
    width:max-content;
    color:var(--accent);
    font-size:9px;
    font-weight:950;
    letter-spacing:.065em;
}

.quick-overlay-manual .quick-overlay-section-head > span{
    color:var(--muted);
}

.quick-overlay-section-head strong{
    color:var(--text);
    font-size:14px;
    font-weight:950;
}

.quick-overlay-section-head small{
    color:var(--muted);
    font-size:10px;
    line-height:1.4;
    font-weight:750;
}

.quick-overlay-drag{
    min-height:78px;
    display:grid;
    grid-template-columns:42px minmax(0,1fr) 20px;
    align-items:center;
    gap:10px;
    padding:11px;
    border:1px solid var(--accent);
    border-radius:13px;
    color:var(--text);
    background:var(--soft-accent);
    text-decoration:none;
    cursor:grab;
}

.quick-overlay-drag.is-dragging{
    cursor:grabbing;
    opacity:.7;
}

.quick-overlay-drag-icon{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border:1px solid var(--line-accent);
    border-radius:10px;
    color:var(--accent);
    background:color-mix(in srgb,var(--accent) 8%,transparent);
}

.quick-overlay-drag-icon svg{
    width:23px;
    height:23px;
}

.quick-overlay-drag > span:nth-child(2){
    display:grid;
    gap:3px;
}

.quick-overlay-drag b{
    color:var(--text);
    font-size:13px;
    font-weight:1000;
}

.quick-overlay-drag small{
    color:var(--accent);
    font-size:9px;
    font-weight:900;
}

.quick-overlay-drag-arrow{
    width:18px;
    height:18px;
    color:var(--accent);
}

.quick-overlay-guidance{
    display:grid;
    gap:3px;
    padding:8px 9px;
    border:1px solid var(--line-accent);
    border-radius:9px;
    background:var(--soft-accent);
}

.quick-overlay-guidance b{
    color:var(--accent);
    font-size:9px;
    font-weight:1000;
}

.quick-overlay-guidance span{
    color:var(--muted);
    font-size:9px;
    line-height:1.35;
    font-weight:800;
}

.quick-overlay-guidance strong{
    color:var(--text);
}

.quick-overlay-admin-note{
    margin:0;
    color:var(--muted);
    font-size:8px;
    line-height:1.35;
    font-weight:750;
}

.quick-overlay-url{
    display:grid;
    grid-template-columns:minmax(0,1fr) 38px auto;
    gap:6px;
}

.quick-overlay-url input{
    min-width:0;
    min-height:42px;
    padding:0 10px;
    border:1px solid var(--line);
    border-radius:10px;
    outline:none;
    background:#111218;
    color:var(--text);
    font:inherit;
    font-size:10px;
    font-weight:800;
}

.quick-overlay-url button{
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:0 10px;
    border:1px solid var(--line);
    border-radius:10px;
    background:rgba(255,255,255,.018);
    color:var(--text);
    font:inherit;
    font-size:9px;
    font-weight:950;
    cursor:pointer;
}

.quick-overlay-url button:hover,
.quick-overlay-url button.active{
    border-color:var(--line-accent);
    color:var(--accent);
    background:var(--soft-accent);
}

.quick-overlay-url button svg{
    width:15px;
    height:15px;
}

.quick-overlay-private{
    color:var(--text);
    font-size:9px;
    font-weight:900;
}

.quick-overlay-private em{
    color:var(--accent);
    font-style:normal;
}

.quick-overlay-verify{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-top:12px;
    padding:12px 14px;
    border:1px solid var(--line);
    border-radius:15px;
    background:var(--riv-surface-deep,#1D1B1F);
}

.quick-overlay-verify > div{
    min-width:0;
    display:grid;
    gap:3px;
}

.quick-overlay-verify > div > span{
    color:var(--accent);
    font-size:8px;
    font-weight:950;
}

.quick-overlay-verify > div > strong{
    color:var(--text);
    font-size:12px;
    font-weight:950;
}

.quick-overlay-verify > div > small{
    color:var(--muted);
    font-size:9px;
    line-height:1.35;
    font-weight:750;
}

.quick-overlay-test-button{
    min-height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:0 13px;
    border:1px solid var(--accent);
    border-radius:10px;
    background:var(--accent);
    color:#fff;
    font:inherit;
    font-size:10px;
    font-weight:1000;
    cursor:pointer;
    white-space:nowrap;
}

.quick-overlay-test-button svg{
    width:15px;
    height:15px;
}

.quick-overlay-test-status{
    display:none;
    margin-top:8px;
    padding:8px 10px;
    border:1px solid var(--line-accent);
    border-radius:9px;
    color:var(--accent);
    background:var(--soft-accent);
    font-size:9px;
    font-weight:950;
}

.quick-overlay-test-status.visible{
    display:block;
}

.quick-overlay-footer{
    color:var(--muted);
    font-size:8px;
    font-weight:800;
}

@media(max-width:760px){
    .quick-overlay-grid{
        grid-template-columns:1fr;
    }

    .quick-overlay-verify{
        align-items:stretch;
        flex-direction:column;
    }

    .quick-overlay-test-button{
        width:100%;
    }
}



/* Quick Overlay typography rule: white Y // accent X */
.quick-overlay-subtitle{
    color:var(--text);
}

.quick-overlay-subtitle span{
    color:var(--accent);
}






/* ==========================================================================
   RIV // FIRST BOOT SEQUENCE V1.1
   Fixed viewport portal. Never participates in Dashboard layout.
   ========================================================================== */

.riv-first-boot{
    position:fixed!important;
    z-index:2147483646!important;
    inset:0!important;
    width:100vw!important;
    height:100vh!important;
    margin:0!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    overflow:hidden!important;
    background:#0D0D11!important;
    isolation:isolate!important;
    opacity:1;
    visibility:visible;
    pointer-events:all;
    transition:opacity .55s ease,visibility .55s ease;
}

.riv-first-boot.is-leaving{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.riv-first-boot-backdrop{
    position:absolute;
    inset:0;
    z-index:-1;
    background:
        radial-gradient(
            circle at 50% 42%,
            color-mix(in srgb,var(--accent) 10%,transparent),
            transparent 30%
        ),
        linear-gradient(
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.018) 1px,
            transparent 1px
        ),
        #0D0D11;
    background-size:auto,48px 48px,48px 48px,auto;
}

.riv-first-boot-core{
    width:min(560px,calc(100vw - 44px));
    max-height:calc(100vh - 44px);
    overflow:auto;
    display:grid;
    gap:17px;
    padding:27px;
    border:1px solid var(--line-accent);
    border-radius:18px;
    background:#15151A;
    box-shadow:
        0 32px 90px rgba(0,0,0,.62),
        0 0 42px color-mix(in srgb,var(--accent) 9%,transparent);
}

.riv-first-boot-mark{
    display:flex;
    align-items:baseline;
    gap:8px;
    padding-bottom:16px;
    border-bottom:1px solid var(--line);
}

.riv-first-boot-mark strong{
    color:var(--text);
    font-size:32px;
    line-height:1;
    font-weight:1000;
    letter-spacing:-.04em;
}

.riv-first-boot-mark span{
    color:var(--accent);
    font-size:12px;
    font-weight:1000;
    letter-spacing:.08em;
}

.riv-first-boot-status{
    display:grid;
    gap:5px;
    min-height:46px;
}

.riv-first-boot-status strong{
    color:var(--text);
    font-size:15px;
    font-weight:1000;
}

.riv-first-boot-status span{
    color:var(--muted);
    font-size:10px;
    line-height:1.4;
    font-weight:800;
}

.riv-first-boot-track{
    height:5px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,.07);
}

.riv-first-boot-track i{
    display:block;
    width:0%;
    height:100%;
    border-radius:inherit;
    background:var(--accent);
    box-shadow:0 0 15px color-mix(in srgb,var(--accent) 65%,transparent);
    transition:width .38s ease;
}

.riv-first-boot-log{
    display:grid;
    gap:8px;
    padding:12px;
    border:1px solid var(--line);
    border-radius:11px;
    background:#101015;
}

.riv-first-boot-log > span{
    position:relative;
    padding-left:18px;
    color:color-mix(in srgb,var(--muted) 58%,transparent);
    font-size:9px;
    font-weight:950;
    letter-spacing:.05em;
}

.riv-first-boot-log > span::before{
    content:"";
    position:absolute;
    top:50%;
    left:0;
    width:7px;
    height:7px;
    border-radius:50%;
    background:rgba(255,255,255,.13);
    transform:translateY(-50%);
}

.riv-first-boot-log > span.is-active{
    color:var(--text);
}

.riv-first-boot-log > span.is-active::before,
.riv-first-boot-log > span.is-complete::before{
    background:var(--accent);
    box-shadow:0 0 10px color-mix(in srgb,var(--accent) 62%,transparent);
}

.riv-first-boot-ready{
    min-height:38px;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:0 14px;
    border:1px solid transparent;
    border-radius:9px;
    outline:none;
    color:transparent;
    background:transparent;
    font:inherit;
    font-size:10px;
    font-weight:1000;
    letter-spacing:.05em;
    cursor:default;
    pointer-events:none;
    transition:
        color .2s ease,
        border-color .2s ease,
        background .2s ease,
        transform .16s ease,
        box-shadow .16s ease;
}

.riv-first-boot-ready.is-ready{
    border-color:var(--accent);
    color:var(--text);
    background:var(--soft-accent);
    cursor:pointer;
    pointer-events:auto;
    box-shadow:
        0 0 18px color-mix(in srgb,var(--accent) 10%,transparent);
}

.riv-first-boot-ready.is-ready span{
    color:var(--accent);
}

.riv-first-boot-ready.is-ready:hover,
.riv-first-boot-ready.is-ready:focus-visible{
    transform:translateY(-1px);
    background:color-mix(in srgb,var(--accent) 14%,transparent);
    box-shadow:
        0 8px 24px rgba(0,0,0,.22),
        0 0 22px color-mix(in srgb,var(--accent) 16%,transparent);
}

@media(max-width:620px){
    .riv-first-boot-core{
        padding:21px;
    }

    .riv-first-boot-mark strong{
        font-size:27px;
    }
}

@media(prefers-reduced-motion:reduce){
    .riv-first-boot,
    .riv-first-boot-track i{
        transition:none!important;
    }
}


/* ==========================================================================
   RIV // FIRST BOOT V1.2 // ZERO-FLASH STARTUP
   Prevent Dashboard from painting before the boot portal exists.
   ========================================================================== */

html.riv-first-boot-pending{
    background:#0D0D11!important;
}

html.riv-first-boot-pending body{
    background:#0D0D11!important;
}

html.riv-first-boot-pending body > *:not(.riv-first-boot):not(script){
    visibility:hidden!important;
}

html.riv-first-boot-pending .riv-first-boot,
html.riv-first-boot-pending .riv-first-boot *{
    visibility:visible!important;
}


/* ==========================================================================
   RIV // FIRST BOOT V1.3 // PACED ONE-TIME STARTUP
   ========================================================================== */

.riv-first-boot-status strong,
.riv-first-boot-status span{
    transition:opacity .18s ease;
}

.riv-first-boot-log > span.is-active{
    text-shadow:
        0 0 12px color-mix(in srgb,var(--accent) 18%,transparent);
}

.riv-first-boot-ready.is-ready{
    animation:rivFirstBootReadyPulse 1.8s ease-in-out infinite;
}

@keyframes rivFirstBootReadyPulse{
    0%,100%{
        box-shadow:
            0 0 14px color-mix(in srgb,var(--accent) 8%,transparent);
    }
    50%{
        box-shadow:
            0 0 26px color-mix(in srgb,var(--accent) 20%,transparent);
    }
}

@media(prefers-reduced-motion:reduce){
    .riv-first-boot-ready.is-ready{
        animation:none!important;
    }
}


/* ==========================================================================
   RIV // DASHBOARD TEAM PERMISSION MODE
   ========================================================================== */
.dashboard-permission-mode{
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    min-height:42px;
    margin:0 0 16px;
    padding:10px 14px;
    box-sizing:border-box;
    border:1px solid var(--line-accent);
    border-radius:13px;
    background:color-mix(in srgb,var(--accent) 5%,rgba(255,255,255,.012));
    color:var(--muted);
    font-size:10px;
    font-weight:850;
    letter-spacing:.025em;
}
.dashboard-permission-mode i{
    width:7px;height:7px;flex:0 0 auto;border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 16px color-mix(in srgb,var(--accent) 50%,transparent);
}
.dashboard-permission-mode strong{
    color:var(--accent);font-size:10px;font-weight:1000;letter-spacing:.075em;
}
.dashboard-control-disabled,
button.dashboard-control-disabled,
.dashboard-control-disabled button:disabled{
    cursor:not-allowed!important;
}
button.dashboard-control-disabled:disabled,
.dashboard-control-disabled button:disabled,
.dashboard-control-disabled input[type="submit"]:disabled{
    opacity:.36!important;
    filter:saturate(.35);
    transform:none!important;
    box-shadow:none!important;
}
.riv-dashboard-layout-readonly .module-card[data-layout-id]{
    cursor:default!important;
}
.riv-dashboard-layout-readonly .layout-resize-handle{
    display:none!important;
}
@media(max-width:900px){
    .dashboard-permission-mode{align-items:flex-start;flex-wrap:wrap}
    .dashboard-permission-mode span{width:100%;padding-left:17px}
}


/* ==========================================================================
   DASHBOARD PERMISSIONS // V2 VISUAL ENFORCEMENT
   ========================================================================== */
.dashboard .dashboard-permission-mode{
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    width:100%!important;
    min-height:44px!important;
    margin:0 0 18px!important;
    padding:11px 14px!important;
    box-sizing:border-box!important;
    border:1px solid color-mix(in srgb,var(--accent) 55%,transparent)!important;
    border-radius:12px!important;
    background:color-mix(in srgb,var(--accent) 7%,var(--panel))!important;
    color:var(--muted)!important;
}

.dashboard .dashboard-permission-mode strong{
    color:var(--accent)!important;
    font-size:11px!important;
    font-weight:1000!important;
    letter-spacing:.07em!important;
}

.dashboard .dashboard-permission-mode span{
    color:var(--muted)!important;
    font-size:11px!important;
    font-weight:850!important;
}

.quick-module button.dashboard-control-disabled:disabled,
.quick-module button[aria-disabled="true"]:disabled,
.quick-module .expand-action:disabled,
.quick-module .expand-panel button:disabled,
.quick-module .quick-link-button:disabled{
    opacity:.28!important;
    filter:grayscale(.85) saturate(.15)!important;
    cursor:not-allowed!important;
    pointer-events:none!important;
    border-color:var(--line)!important;
    background:rgba(255,255,255,.018)!important;
    box-shadow:none!important;
    transform:none!important;
}

.quick-module button.dashboard-control-disabled:disabled *,
.quick-module button[aria-disabled="true"]:disabled *,
.quick-module .expand-action:disabled *,
.quick-module .expand-panel button:disabled *,
.quick-module .quick-link-button:disabled *{
    color:var(--muted)!important;
    stroke:currentColor!important;
}

.quick-module .expand-action:disabled .plus-orbit{
    border-color:var(--line)!important;
}

.quick-module .expand-action:disabled .chevron{
    opacity:.25!important;
}