:root{
    --void:#04070a; --panel:#0a1117; --panel-2:#0f1c25; --line:#173042;
    --phos:#39ff9e; --phos-dim:#1d9c63; --amber:#ffb23e; --ice:#6fd0ff;
    --red:#ff4d63; --mag:#ff5cf0; --txt:#aee6d4; --txt-dim:#4e6e69;
    --mono:'DM Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    background:var(--void); color:var(--txt); font-family:var(--mono);
    font-size:14px; line-height:1.5; overflow-x:hidden;
  }
  /* CRT scanlines + flicker */
  body::after{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:9000;
    background:repeating-linear-gradient(rgba(0,0,0,0) 0 2px, rgba(0,0,0,.22) 3px);
    mix-blend-mode:multiply;
  }
  body::before{
    content:"";position:fixed;inset:0;pointer-events:none;z-index:8999;
    background:radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.45) 100%);
  }
  /* CRT flicker — isolated on its own compositor layer.
     Deliberately NOT combined with mix-blend-mode: animating opacity on a
     blended layer forces a full-viewport re-blend every frame, which stutters
     on laptop / power-saving GPUs. This is a plain veil, so the flicker is a
     cheap opacity change on a promoted layer with nothing beneath to re-blend. */
  #crt{
    position:fixed;inset:0;pointer-events:none;z-index:9550;
    background:var(--void);
    opacity:0;
    will-change:opacity;
    transform:translateZ(0);
    animation:flicker 6s infinite;
  }
  @keyframes flicker{
    0%,100%{opacity:0}
    92%{opacity:0}
    93%{opacity:.10}
    94%{opacity:0}
    97%{opacity:.055}
    98%{opacity:0}
  }
  @media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
  /* matrix canvas */
  #matrix{position:fixed;inset:0;z-index:-1;opacity:.10}
  h1,h2,h3,.disp{font-family:'Chakra Petch',var(--mono);letter-spacing:.04em}
  a{color:var(--ice)}
  .wrap{max-width:1080px;margin:0 auto;padding:0 16px}

  /* glitch text */
  .glitch{position:relative;display:inline-block}
  .glitch::before,.glitch::after{content:attr(data-t);position:absolute;left:0;top:0;width:100%;overflow:hidden;clip-path:inset(0 0 0 0)}
  .glitch::before{color:var(--mag);transform:translate(-2px,0);animation:gl1 2.6s infinite linear alternate}
  .glitch::after{color:var(--ice);transform:translate(2px,0);animation:gl2 3.1s infinite linear alternate}
  @keyframes gl1{0%,92%,100%{clip-path:inset(0 0 100% 0)}93%{clip-path:inset(10% 0 60% 0)}96%{clip-path:inset(40% 0 20% 0)}}
  @keyframes gl2{0%,90%,100%{clip-path:inset(100% 0 0 0)}91%{clip-path:inset(60% 0 10% 0)}95%{clip-path:inset(20% 0 50% 0)}}

  /* ===== boot screen ===== */
  #boot{position:fixed;inset:0;background:var(--void);z-index:9500;padding:28px;overflow:hidden;font-size:13px;color:var(--phos)}
  #bootLog{white-space:pre-wrap;line-height:1.55;max-width:900px;text-shadow:0 0 8px rgba(57,255,158,.35)}
  #bootLog .ok{color:var(--phos)} #bootLog .w{color:var(--amber)} #bootLog .d{color:var(--txt-dim)}

  /* ===== login ===== */
  #login{position:fixed;inset:0;background:var(--void);z-index:9400;display:none;align-items:center;justify-content:center;padding:20px}
  .login-box{width:min(440px,100%);border:1px solid var(--line);border-radius:8px;background:linear-gradient(180deg,var(--panel),var(--void));padding:28px;box-shadow:0 0 40px rgba(57,255,158,.08)}
  .login-box .brand{font-family:'Chakra Petch';font-weight:700;font-size:30px;color:var(--phos);letter-spacing:.16em;text-shadow:0 0 18px rgba(57,255,158,.5);text-align:center}
  .login-box .tag{text-align:center;color:var(--txt-dim);font-size:11px;letter-spacing:.32em;text-transform:uppercase;margin:6px 0 22px}
  .field{margin-bottom:14px}
  .field label{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-dim);margin-bottom:5px}
  .field input{width:100%;background:#06101a;border:1px solid var(--line);border-radius:5px;color:var(--phos);font-family:var(--mono);font-size:14px;padding:11px 12px;outline:none}
  .field input:focus{border-color:var(--phos);box-shadow:0 0 0 1px var(--phos),0 0 16px rgba(57,255,158,.18)}
  .login-box .hint{font-size:10.5px;color:var(--txt-dim);margin-top:4px;letter-spacing:.04em}

  /* ===== status bar ===== */
  header{border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(10,17,23,.96),rgba(10,17,23,.7));position:sticky;top:0;z-index:50;backdrop-filter:blur(6px)}
  .bar{display:flex;align-items:center;gap:16px;padding:9px 16px;max-width:1080px;margin:0 auto;flex-wrap:wrap}
  .logo{font-family:'Chakra Petch';font-weight:700;font-size:17px;color:var(--phos);letter-spacing:.18em;text-shadow:0 0 12px rgba(57,255,158,.4)}
  .logo span{color:var(--txt-dim);font-weight:500}
  .dot{width:8px;height:8px;border-radius:50%;background:var(--phos);box-shadow:0 0 8px var(--phos);display:inline-block;animation:blink 1.4s steps(2) infinite}
  @keyframes blink{50%{opacity:.25}}
  .spacer{flex:1}
  .stat{display:flex;flex-direction:column;line-height:1.15}
  .stat b{font-family:'Chakra Petch';font-size:14px;color:var(--ice)}
  .stat small{color:var(--txt-dim);font-size:9px;letter-spacing:.14em;text-transform:uppercase}
  .stat.rank b{color:var(--amber)} .stat.xp b{color:var(--phos)}
  .who{color:var(--txt-dim);font-size:11px}.who b{color:var(--phos)}

  .rail{display:flex;gap:4px;padding:10px 16px;max-width:1080px;margin:0 auto;flex-wrap:wrap}
  .rail .seg{flex:1;min-width:84px;border:1px solid var(--line);border-radius:3px;padding:5px 8px;background:var(--panel);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-dim)}
  .rail .seg b{display:block;font-family:'Chakra Petch';font-size:11px;color:var(--txt)}
  .rail .seg.done{border-color:var(--phos-dim);color:var(--phos)} .rail .seg.done b{color:var(--phos)}
  .rail .seg.active{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber) inset,0 0 14px rgba(255,178,62,.15)} .rail .seg.active b{color:var(--amber)}
  /* .6 keeps the hierarchy against active/done while letting the strip read
     as a roadmap rather than one lit box and five switched-off ones. */
  .rail .seg.locked{opacity:.6}

  main.wrap{padding:24px 16px 48px}
  .panel{background:linear-gradient(180deg,var(--panel),rgba(10,17,23,.6));border:1px solid var(--line);border-radius:7px;padding:22px;margin-bottom:18px;position:relative}
  .panel::before{content:"";position:absolute;top:-1px;left:18px;width:34px;height:2px;background:var(--phos);box-shadow:0 0 10px var(--phos)}
  .eyebrow{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--phos-dim);margin-bottom:6px}
  .title{font-size:24px;font-weight:700;color:var(--txt);margin-bottom:4px}
  .title .ph{color:var(--amber)}

  .brief{border-left:2px solid var(--phos-dim);padding:10px 0 10px 16px;margin:16px 0;background:linear-gradient(90deg,rgba(57,255,158,.05),transparent)}
  .brief .from{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ice);margin-bottom:6px}
  .brief p{margin-bottom:8px}.brief p:last-child{margin-bottom:0}
  .brief em{font-style:normal;color:var(--phos)}.brief .hi{color:var(--amber)}

  .tool{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--panel-2);border-radius:4px;padding:2px 9px;font-size:11px;color:var(--ice);letter-spacing:.05em;margin:2px 4px 2px 0}
  .tool b{color:var(--txt-dim);font-size:9px;letter-spacing:.12em;text-transform:uppercase}

  /* terminal (shared style for evidence + live shell) */
  .term{background:#03070b;border:1px solid var(--line);border-radius:7px;margin:16px 0;overflow:hidden;box-shadow:inset 0 0 40px rgba(0,0,0,.5)}
  .term-head{display:flex;align-items:center;gap:8px;padding:7px 12px;background:var(--panel-2);border-bottom:1px solid var(--line);font-size:11px;color:var(--txt-dim);letter-spacing:.08em}
  .term-head .tl{display:flex;gap:5px}.term-head .tl i{width:9px;height:9px;border-radius:50%;background:#23404c;display:block}.term-head .tl i:first-child{background:#3a5560}
  .term-body{padding:13px 15px;font-size:13px;line-height:1.55;white-space:pre-wrap;color:var(--txt);min-height:40px;text-shadow:0 0 6px rgba(57,255,158,.12)}
  .term-body .cmd{color:var(--phos)} .term-body .cmd::before{content:"analyst@halcyon:~$ ";color:var(--phos-dim)}
  .term-body .out{color:var(--txt)} .term-body .hi{color:var(--amber)} .term-body .blu{color:var(--ice)} .term-body .rd{color:var(--red)} .term-body .dim{color:var(--txt-dim)} .term-body .mag{color:var(--mag)}
  .caret::after{content:"\2588";color:var(--phos);animation:blink 1s steps(2) infinite;margin-left:1px}

  /* live shell */
  #shell .term-body{min-height:300px;max-height:440px;overflow-y:auto}
  .sh-line{white-space:pre-wrap}
  .sh-prompt{color:var(--phos-dim)}
  .sh-input-row{display:flex;align-items:center;gap:0}
  .sh-input-row .ps{color:var(--phos-dim);white-space:pre}
  #shInput{flex:1;background:transparent;border:none;outline:none;color:var(--phos);font-family:var(--mono);font-size:13px;caret-color:var(--phos)}
  .idle-panel .term-body{min-height:120px;max-height:150px;overflow:hidden;opacity:.85}

  /* choices */
  .q{font-size:15px;color:var(--txt);margin:18px 0 12px;font-family:'Chakra Petch';font-weight:600}
  .q .num{color:var(--phos);margin-right:8px}
  .choices{display:grid;gap:10px}
  @media(min-width:620px){.choices.two{grid-template-columns:1fr 1fr}}
  .choice{text-align:left;background:var(--panel-2);border:1px solid var(--line);border-radius:5px;padding:12px 14px;color:var(--txt);font-family:var(--mono);font-size:13px;cursor:pointer;transition:border-color .15s,transform .08s,background .15s;display:flex;gap:11px;align-items:flex-start;line-height:1.45}
  .choice .k{font-family:'Chakra Petch';font-weight:700;color:var(--phos-dim);flex-shrink:0}
  .choice:hover{border-color:var(--phos);background:#10222c;transform:translateX(2px)}
  .choice:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
  .choice.correct{border-color:var(--phos);background:rgba(57,255,158,.1);box-shadow:0 0 16px rgba(57,255,158,.12)}.choice.correct .k{color:var(--phos)}
  .choice.wrong{border-color:var(--red);background:rgba(255,77,99,.08)}.choice.wrong .k{color:var(--red)}
  .choice.dimmed{opacity:.4}.choice:disabled{cursor:default}

  .fb{margin-top:14px;border-radius:5px;padding:13px 15px;font-size:13px;display:none;border:1px solid var(--line)}
  .fb.show{display:block;animation:rise .25s ease}
  @keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .fb.good{border-color:var(--phos-dim);background:rgba(57,255,158,.06)}
  .fb.bad{border-color:var(--red);background:rgba(255,77,99,.06)}
  .fb .verdict{font-family:'Chakra Petch';font-weight:700;letter-spacing:.08em;margin-bottom:6px}
  .fb.good .verdict{color:var(--phos)}.fb.bad .verdict{color:var(--red)}
  .fb .obj{margin-top:9px;font-size:11px;color:var(--ice);border-top:1px dashed var(--line);padding-top:8px}
  .fb .obj b{color:var(--txt-dim);text-transform:uppercase;letter-spacing:.14em;font-size:10px}

  .btn{font-family:'Chakra Petch';font-weight:600;letter-spacing:.1em;font-size:13px;background:var(--phos);color:#03140c;border:none;border-radius:5px;padding:11px 22px;cursor:pointer;transition:transform .08s,box-shadow .15s;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px}
  .btn:hover{box-shadow:0 0 18px rgba(57,255,158,.4);transform:translateY(-1px)}
  .btn:focus-visible{outline:2px solid var(--ice);outline-offset:3px}
  .btn.ghost{background:transparent;border:1px solid var(--line);color:var(--txt)}
  .btn.ghost:hover{border-color:var(--phos);box-shadow:none;color:var(--phos)}
  .btn[disabled]{opacity:.35;cursor:default;box-shadow:none;transform:none}
  .actions{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;align-items:center}
  .actions .note{color:var(--txt-dim);font-size:11px}

  .center{text-align:center}
  .hero-tag{font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--phos-dim);margin-bottom:14px}
  .hero h1{font-size:clamp(40px,9vw,76px);line-height:.95;font-weight:700;color:var(--txt);text-shadow:0 0 30px rgba(57,255,158,.2)}
  .hero h1 em{font-style:normal;color:var(--phos)}
  .hero .sub{max-width:640px;margin:18px auto 0;color:var(--txt-dim);font-size:14px}
  /* Slightly narrower than the 1080px structural width: this is prose, and
     full width pushes line length past a readable measure. Kept close to the
     structural width so the step reads as deliberate — 720px was too large a
     jump and looked like a third container. */
  .legal{margin:22px auto 0;max-width:900px;border:1px solid var(--line);border-radius:6px;padding:18px 22px;background:var(--panel);font-size:11.5px;color:var(--txt-dim);line-height:1.7}
  .legal b{color:var(--amber);letter-spacing:.1em}
  .grid-feats{display:grid;gap:12px;margin:26px 0;text-align:left}
  /* Two mode cards. Was repeat(3,1fr), which left an empty third column and
     made the cards look narrower and left-shifted against the rail above. */
  @media(min-width:620px){.grid-feats{grid-template-columns:repeat(2,1fr)}}
  .feat{border:1px solid var(--line);border-radius:6px;padding:14px;background:var(--panel)}
  .feat .n{font-family:'Chakra Petch';color:var(--phos-dim);font-size:11px;letter-spacing:.2em}
  .feat h4{font-family:'Chakra Petch';color:var(--txt);margin:6px 0 4px;font-size:14px}
  .feat p{color:var(--txt-dim);font-size:12px}
  .hidden{display:none!important}
  .meter{height:5px;background:var(--panel-2);border-radius:3px;overflow:hidden;margin-top:4px;border:1px solid var(--line)}
  .meter i{display:block;height:100%;background:linear-gradient(90deg,var(--phos-dim),var(--phos));width:0;transition:width .6s ease;box-shadow:0 0 10px var(--phos)}
  .ring{font-family:'Chakra Petch';font-size:60px;font-weight:700;color:var(--phos);text-shadow:0 0 24px rgba(57,255,158,.3)}
  footer{border-top:1px solid var(--line);color:var(--txt-dim);font-size:11px;text-align:center;padding:22px;letter-spacing:.05em}
  .tabs{display:flex;gap:6px;margin:0 0 4px}
  .tab{font-family:'Chakra Petch';font-size:12px;letter-spacing:.08em;padding:8px 14px;border:1px solid var(--line);border-bottom:none;border-radius:6px 6px 0 0;background:var(--panel);color:var(--txt-dim);cursor:pointer}
  .tab.on{color:var(--phos);border-color:var(--phos-dim);background:var(--panel-2)}
  .share{width:100%;background:#06101a;border:1px solid var(--line);border-radius:5px;color:var(--ice);font-family:var(--mono);font-size:12px;padding:9px 11px;margin-top:8px}

/* ===== v1.1.0 guided investigation ===== */
.objective{border:1px solid var(--line);border-left:3px solid var(--amber);background:linear-gradient(90deg,rgba(255,178,62,.07),transparent);border-radius:5px;padding:11px 14px;margin:16px 0 4px;font-size:13px;color:var(--txt);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.objective .ob-tag{font-family:'Chakra Petch';font-weight:700;font-size:10px;letter-spacing:.18em;color:var(--amber);border:1px solid var(--amber);border-radius:3px;padding:2px 7px;flex-shrink:0}
.objective .ob-status{margin-left:auto;font-size:10.5px;letter-spacing:.06em;color:var(--txt-dim);text-transform:uppercase}
.objective .ob-status.ok{color:var(--phos)}
.evidence-term.locked{opacity:.6;filter:saturate(.5)}
.evidence-term.locked .term-head{color:var(--amber)}
.q-locked{opacity:.4;pointer-events:none;filter:blur(.4px)}
.choices-locked{opacity:.35;pointer-events:none}
.choices-locked .choice{cursor:default}

/* ===== v2.0.0 live topology map ===== */
.netmap{border:1px solid var(--line);border-radius:7px;background:radial-gradient(ellipse at 50% 40%,rgba(57,255,158,.04),transparent 70%),#03070b;margin:16px 0;overflow:hidden}
.netmap-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;background:var(--panel-2);border-bottom:1px solid var(--line);flex-wrap:wrap}
.nm-title{font-family:'Chakra Petch';font-size:11px;letter-spacing:.2em;color:var(--ice)}
.nm-legend{font-size:9.5px;letter-spacing:.04em;color:var(--txt-dim);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.nm-legend i{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:2px;vertical-align:middle}
.lg-self{background:var(--ice)} .lg-disc{background:var(--txt-dim)} .lg-scan{background:var(--phos)} .lg-bad{background:var(--red)} .lg-hidden{background:#1a2a30;border:1px solid var(--line)}
#netsvg{width:100%;height:auto;display:block;max-height:320px}
.edge{stroke:var(--line);stroke-width:1.5;stroke-dasharray:4 4;opacity:.6}
.edge-on{stroke:var(--phos-dim);stroke-dasharray:none;opacity:.9}
.node-c{fill:#08131a;stroke:var(--txt-dim);stroke-width:2}
.node-name{fill:var(--txt);font-family:'Chakra Petch';font-size:13px;letter-spacing:.04em}
.node-ip{fill:var(--txt-dim);font-family:var(--mono);font-size:10px}
.node-glyph{fill:var(--txt-dim);font-size:18px}
.n-self .node-c{stroke:var(--ice);fill:#06161f} .n-self .node-glyph{fill:var(--ice)}
.n-disc .node-c{stroke:var(--txt-dim);stroke-dasharray:3 3}
.n-scan .node-c{stroke:var(--phos);fill:#06160f} .n-scan .node-glyph{fill:var(--phos)} .n-scan .node-name{fill:var(--phos)}
.n-bad .node-c{stroke:var(--red);fill:#1a0a0d} .n-bad .node-glyph{fill:var(--red)} .n-bad .node-name{fill:var(--red)}
.node-pulse{fill:none;stroke:var(--red);stroke-width:1.5;opacity:.6;animation:nmpulse 1.8s ease-out infinite}
@keyframes nmpulse{0%{r:24px;opacity:.7}100%{r:38px;opacity:0}}
.node{transition:transform .3s ease}
.nm-hint{padding:8px 12px;border-top:1px solid var(--line);font-size:11px;color:var(--txt-dim);letter-spacing:.03em}
.nm-hint span{color:var(--phos);font-family:var(--mono)}
@media (prefers-reduced-motion: reduce){.node-pulse{animation:none;opacity:.5}}

/* ===== v2.1.0 pivoting & lateral movement ===== */
.edge-pivot{stroke:var(--mag);stroke-width:2.5;stroke-dasharray:6 3;opacity:.85;animation:npulse-pivot 2s ease-out infinite}
@keyframes npulse-pivot{0%{opacity:.85}50%{opacity:.6}100%{opacity:.85}}
.n-compromised .node-c{stroke:var(--mag);fill:#1a0a15} .n-compromised .node-glyph{fill:var(--mag)} .n-compromised .node-name{fill:var(--mag)}
.n-pivot .node-c{stroke:var(--mag);fill:#2a0a25;stroke-width:2.5} .n-pivot .node-glyph{fill:var(--mag)} .n-pivot .node-name{fill:var(--mag);font-weight:bold}
.node-pivot-ring{fill:none;stroke:var(--mag);stroke-width:2;opacity:.7;animation:npulse-you 1.6s ease-out infinite}
@keyframes npulse-you{0%{r:26px;opacity:.8}100%{r:36px;opacity:0}}

/* ===== v2.2.0 segmentation lab ===== */
.vlan-box{fill:rgba(255,77,99,.05);stroke:var(--red);stroke-width:1.5;stroke-dasharray:7 4;animation:vlanpulse 2.4s ease-in-out infinite}
@keyframes vlanpulse{0%,100%{stroke-opacity:.5}50%{stroke-opacity:.9}}
.vlan-label{fill:var(--red);font-family:'Chakra Petch';font-size:11px;letter-spacing:.06em}
@media (prefers-reduced-motion: reduce){.vlan-box{animation:none;stroke-opacity:.7}}

/* ===== v2.3.0 sound toggle ===== */
.snd-toggle{background:transparent;border:1px solid var(--line);color:var(--phos);font-size:15px;line-height:1;width:34px;height:34px;border-radius:6px;cursor:pointer;transition:border-color .15s,color .15s,box-shadow .15s;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.snd-toggle:hover{border-color:var(--phos);box-shadow:0 0 12px rgba(57,255,158,.25)}
.snd-toggle:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
.snd-toggle.muted{color:var(--txt-dim);border-color:var(--line)}
.snd-toggle.muted:hover{box-shadow:none;color:var(--txt)}

/* ===== v2.4.0 mode select + free-explore sandbox ===== */
.mode-card{border:1px solid var(--line);border-radius:8px;padding:20px 18px 18px;background:linear-gradient(180deg,var(--panel),rgba(10,17,23,.5));position:relative;display:flex;flex-direction:column;gap:9px;transition:border-color .15s,box-shadow .15s,transform .1s}
.mode-card:hover{border-color:var(--phos-dim);box-shadow:0 0 26px rgba(57,255,158,.08);transform:translateY(-2px)}
.mode-badge{align-self:flex-start;font-family:'Chakra Petch';font-weight:700;font-size:10px;letter-spacing:.24em;color:#03140c;background:var(--phos);padding:3px 9px;border-radius:3px}
.mode-badge.alt{background:var(--mag);color:#1a0014}
.mode-card h3{font-family:'Chakra Petch';font-size:19px;color:var(--txt);letter-spacing:.02em}
.mode-card p{color:var(--txt-dim);font-size:12.5px;line-height:1.55;flex:1}
.mode-meta{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--phos-dim);margin-top:2px}
/* .mode-card .btn positioning now lives in .mode-actions (v2.18.0) */

/* sandbox layout: map+shell main column, objectives rail */
.sbx-layout{display:grid;gap:16px;margin-top:8px}
@media(min-width:860px){.sbx-layout{grid-template-columns:1fr 268px;align-items:start}}
.sbx-main{min-width:0}
.sbx-controls{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.sbx-btn{font-size:11px;padding:8px 14px}
.sbx-btn b{color:var(--txt-dim);font-weight:600;margin-left:2px}
#sbxSeg.on{border-color:var(--red);color:var(--red)} #sbxSeg.on b{color:var(--red)}
#sbxSeg.on:hover{box-shadow:0 0 12px rgba(255,77,99,.25)}

/* objectives rail */
.sbx-objectives{border:1px solid var(--line);border-radius:8px;background:linear-gradient(180deg,var(--panel-2),rgba(10,17,23,.5));padding:14px 14px 16px;position:sticky;top:96px}
@media(max-width:859px){.sbx-objectives{position:static}}
.sbx-obj-head{font-family:'Chakra Petch';font-size:11px;letter-spacing:.2em;color:var(--phos-dim);text-transform:uppercase;display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.sbx-obj-head span{color:var(--ice);font-size:13px}
.sbx-obj-row{display:flex;gap:9px;align-items:flex-start;padding:9px 0;border-bottom:1px solid rgba(23,48,66,.5)}
.sbx-obj-row:last-of-type{border-bottom:none}
.sbx-tick{font-family:'Chakra Petch';color:var(--txt-dim);flex-shrink:0;width:14px;text-align:center;font-size:13px;margin-top:1px}
.sbx-obj-row.ok .sbx-tick{color:var(--phos);text-shadow:0 0 8px rgba(57,255,158,.5)}
.sbx-obj-label{font-size:12px;line-height:1.4;color:var(--txt)}
.sbx-obj-row.ok .sbx-obj-label{color:var(--phos)}
.sbx-obj-hint{font-size:10.5px;color:var(--txt-dim);margin-top:3px;font-family:var(--mono)}
.sbx-obj-hint .cleared{color:var(--phos-dim);letter-spacing:.1em;text-transform:uppercase;font-size:9.5px}
.sbx-allclear{margin-top:12px;padding:10px;border:1px solid var(--phos-dim);border-radius:5px;background:rgba(57,255,158,.06);color:var(--phos);font-size:11px;line-height:1.5}

/* ===== v2.5.0 firewall ACL lab ===== */
.objective .ob-status.bad{color:var(--amber)}
#sbxFwLab:hover{border-color:var(--ice);color:var(--ice)}
.objective code,.fb code,.term-body code{font-family:var(--mono);background:rgba(111,208,255,.1);color:var(--ice);padding:0 4px;border-radius:3px;font-size:.92em}

/* ===== v2.6.0 defense-in-depth / DMZ lab ===== */
#sbxDidLab:hover{border-color:var(--mag);color:var(--mag)}
.did-grid{display:grid;gap:16px;margin:16px 0}
@media(min-width:760px){.did-grid{grid-template-columns:1fr 1fr;align-items:start}}
.did-layers,.did-attack{border:1px solid var(--line);border-radius:8px;background:linear-gradient(180deg,var(--panel-2),rgba(10,17,23,.5));padding:14px}
.did-layers-head,.did-attack-head{font-family:'Chakra Petch';font-size:11px;letter-spacing:.2em;color:var(--phos-dim);text-transform:uppercase;display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--line)}
.did-layers-head span{color:var(--ice);font-size:11px}
.did-layer{display:flex;gap:11px;align-items:flex-start;width:100%;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:11px 12px;margin-bottom:9px;cursor:pointer;color:var(--txt);font-family:var(--mono);transition:border-color .15s,background .15s,transform .08s}
.did-layer:last-child{margin-bottom:0}
.did-layer:hover{border-color:var(--phos-dim);transform:translateX(2px)}
.did-layer .did-toggle{font-size:16px;color:var(--txt-dim);flex-shrink:0;line-height:1.3}
.did-layer.on{border-color:var(--phos);background:rgba(57,255,158,.07)}
.did-layer.on .did-toggle{color:var(--phos);text-shadow:0 0 8px rgba(57,255,158,.5)}
.did-layer-body b{display:block;font-family:'Chakra Petch';font-size:12.5px;color:var(--txt);margin-bottom:2px}
.did-layer.on .did-layer-body b{color:var(--phos)}
.did-layer-body small{color:var(--txt-dim);font-size:11px;line-height:1.4;display:block}
/* attack path */
.did-stages{display:flex;flex-direction:column;align-items:flex-start;gap:0;margin-bottom:14px}
.did-stage{display:flex;align-items:center;gap:9px;padding:7px 0;font-size:12.5px;color:var(--txt-dim);width:100%}
.did-stage-icon{font-size:14px;width:18px;text-align:center;flex-shrink:0}
.did-stage-label{font-family:'Chakra Petch';letter-spacing:.04em}
.did-stage.reached{color:var(--amber)} .did-stage.reached .did-stage-icon{color:var(--amber)}
.did-stage.breached{color:var(--red)} .did-stage.breached .did-stage-icon{color:var(--red);text-shadow:0 0 10px rgba(255,77,99,.6)}
.did-stage.stopped{color:var(--phos)} .did-stage.stopped .did-stage-icon{color:var(--phos)}
.did-stage-stop{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--phos);margin-left:auto}
.did-arrow{color:var(--line);font-size:13px;margin-left:4px;line-height:1}
.did-arrow.live{color:var(--amber)}
.did-run{width:100%;justify-content:center;margin-bottom:12px}
.did-verdict{font-size:12px;line-height:1.5;border-radius:5px;padding:0;min-height:0}
.did-verdict.ok{background:rgba(57,255,158,.06);border:1px solid var(--phos-dim);color:var(--txt);padding:11px}
.did-verdict.bad{background:rgba(255,77,99,.06);border:1px solid var(--red);color:var(--txt);padding:11px}
.did-verdict b{font-family:'Chakra Petch';letter-spacing:.08em}
.did-verdict.ok b{color:var(--phos)} .did-verdict.bad b{color:var(--red)}
.did-verdict em{font-style:normal;color:var(--ice)}

/* ===== v2.6.1 persistent lab exit ===== */
.lab-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.lab-exit{flex-shrink:0;background:transparent;border:1px solid var(--line);color:var(--txt-dim);font-family:var(--mono);font-size:11px;letter-spacing:.06em;padding:5px 11px;border-radius:5px;cursor:pointer;transition:border-color .15s,color .15s}
.lab-exit:hover{border-color:var(--phos);color:var(--phos)}
.lab-exit:focus-visible{outline:2px solid var(--ice);outline-offset:2px}

/* ===== v2.6.2 global navigation ===== */
/* logo is now a button that goes home — strip button chrome, keep the look */
.logo-home{background:none;border:none;padding:0;margin:0;cursor:pointer;font-family:'Chakra Petch';font-weight:700;font-size:17px;color:var(--phos);letter-spacing:.18em;text-shadow:0 0 12px rgba(57,255,158,.4);transition:text-shadow .15s}
.logo-home span{color:var(--txt-dim);font-weight:500}
.logo-home:hover{text-shadow:0 0 18px rgba(57,255,158,.7)}
.logo-home:focus-visible{outline:2px solid var(--ice);outline-offset:3px;border-radius:3px}
/* explicit home button in the header */
.nav-home{background:transparent;border:1px solid var(--line);color:var(--phos);font-family:'Chakra Petch';font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;height:34px;padding:0 12px;border-radius:6px;cursor:pointer;transition:border-color .15s,box-shadow .15s,color .15s;display:flex;align-items:center;gap:5px;flex-shrink:0}
.nav-home:hover{border-color:var(--phos);box-shadow:0 0 12px rgba(57,255,158,.25)}
.nav-home:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
@media(max-width:560px){.nav-home{padding:0 9px;font-size:0}.nav-home::before{content:"⌂";font-size:15px}}

/* ===== v2.7.0 operator record + resume ===== */
.mode-restart{margin-top:8px;font-size:10px;padding:7px 14px;opacity:.85}
.op-record{margin:20px auto 0;max-width:1080px;border:1px solid var(--line);border-radius:6px;background:linear-gradient(180deg,var(--panel-2),rgba(10,17,23,.5));padding:14px 18px}
.op-record-head{font-family:'Chakra Petch';font-size:11px;letter-spacing:.2em;color:var(--phos-dim);text-transform:uppercase;display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.op-record-head span{color:var(--txt-dim);font-size:10px;letter-spacing:.06em;text-transform:none}
.op-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
@media(max-width:560px){.op-stats{grid-template-columns:repeat(2,1fr)}}
.op-stat{display:flex;flex-direction:column;gap:3px;text-align:center;align-items:center}
.op-stat b{font-family:'Chakra Petch';font-size:20px;color:var(--ice);line-height:1}
.op-stat small{color:var(--txt-dim);font-size:9.5px;letter-spacing:.04em;line-height:1.3}

/* ===== v2.8.0 rogue-host detection lab ===== */
#sbxRogueLab:hover{border-color:var(--amber);color:var(--amber)}
.rogue-tools{margin:14px 0 6px;font-size:11px;color:var(--txt-dim);letter-spacing:.03em;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.rogue-ind{margin:8px 0 0;padding:0 0 0 18px;color:var(--amber)}
.rogue-ind li{margin:3px 0;font-size:12px;line-height:1.45}

/* ===== v2.9.0 log-analysis lab ===== */
#sbxLogLab:hover{border-color:var(--ice);color:var(--ice)}
.log-timeline{margin:10px 0 0;border-left:2px solid var(--line);padding-left:14px;display:flex;flex-direction:column;gap:9px}
.log-timeline > div{font-size:12px;line-height:1.5;color:var(--txt-dim)}
.log-timeline b{color:var(--ice)}
.log-timeline code{font-family:var(--mono);background:rgba(111,208,255,.1);color:var(--ice);padding:0 4px;border-radius:3px;font-size:.92em}
.log-timeline em{font-style:normal;color:var(--amber)}

/* ===== v2.10.0 amber CRT theme (Konami) ===== */
body.amber{
  --void:#0a0600; --panel:#140c02; --panel-2:#1c1305; --line:#3a2a10;
  --phos:#ffb641; --phos-dim:#b3791d; --amber:#ffd27a; --ice:#ffcf8a;
  --red:#ff6a4d; --mag:#ffa23e; --txt:#ffcf94; --txt-dim:#7a5a2e;
}
body.amber #matrix{opacity:.06}
.theme-toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%);z-index:9600;
  background:var(--panel-2);border:1px solid var(--phos-dim);color:var(--phos);
  font-family:'Chakra Petch';font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  padding:10px 18px;border-radius:6px;box-shadow:0 0 24px rgba(255,182,65,.25);transition:opacity .4s,transform .4s}
.theme-toast.out{opacity:0;transform:translateX(-50%) translateY(8px)}

/* ===== v2.10.0 secret handle flair ===== */
.secret-line{max-width:640px;margin:16px auto 0;font-family:var(--mono);font-size:12px;color:var(--mag);
  letter-spacing:.03em;border-left:2px solid var(--mag);padding:6px 0 6px 12px;opacity:.92}
.op-title{font-style:normal;color:var(--mag);font-size:10px}

/* ===== v2.10.0 hidden Phase 07 · GHOST ===== */
.ghost-unlock{max-width:620px;margin:22px auto 0;border:1px solid var(--mag);border-radius:6px;
  background:linear-gradient(90deg,rgba(255,92,240,.10),transparent);padding:13px 16px;
  font-size:12.5px;line-height:1.55;color:var(--txt);text-align:left}
.ghost-unlock .ghost-tag{font-family:'Chakra Petch';color:var(--mag);letter-spacing:.14em;font-size:11px;margin-right:6px}
.ghost-unlock b{color:var(--mag)}
.ghost-btn{border-color:var(--mag)!important;color:var(--mag)!important}
.ghost-btn:hover{box-shadow:0 0 16px rgba(255,92,240,.3)!important}
.ghost-phase .title .ph{color:var(--mag)}
.ghost-q{max-width:640px;margin:22px auto 0;text-align:left}
.ghost-prompt{font-size:14px;line-height:1.6;color:var(--txt);margin-bottom:14px}
.ghost-phase .choices{display:flex;flex-direction:column;gap:9px}

/* ===== v2.12.0 IDS alert-triage lab ===== */
#sbxIdsLab:hover{border-color:var(--red);color:var(--red)}
.ids-metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:16px 0;border:1px solid var(--line);border-radius:8px;background:linear-gradient(180deg,var(--panel-2),rgba(10,17,23,.5));padding:14px}
@media(max-width:620px){.ids-metrics{grid-template-columns:repeat(3,1fr)}}
.ids-metric{display:flex;flex-direction:column;gap:3px;text-align:center;align-items:center}
.ids-metric b{font-family:'Chakra Petch';font-size:19px;color:var(--ice);line-height:1}
.ids-metric b.m-ok{color:var(--phos)} .ids-metric b.m-bad{color:var(--red);text-shadow:0 0 10px rgba(255,77,99,.5)} .ids-metric b.m-warn{color:var(--amber)}
.ids-metric small{color:var(--txt-dim);font-size:9.5px;letter-spacing:.04em;line-height:1.3}
.ids-queue{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.ids-alert{border:1px solid var(--line);border-left:3px solid var(--line);border-radius:6px;background:var(--panel);padding:12px 14px;transition:border-color .15s,opacity .15s}
.ids-alert.decided{border-left-color:var(--phos-dim);opacity:.96}
.ids-alert-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ids-sev{font-family:'Chakra Petch';font-size:9.5px;font-weight:700;letter-spacing:.12em;padding:2px 7px;border-radius:3px;flex-shrink:0}
.sev-crit{background:var(--red);color:#180003} .sev-high{background:var(--amber);color:#180f00}
.sev-med{background:var(--ice);color:#001018} .sev-low{background:var(--line);color:var(--txt-dim)}
.ids-sig{font-family:'Chakra Petch';font-size:13px;color:var(--txt);letter-spacing:.01em}
.ids-count{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--amber);background:rgba(255,178,62,.1);padding:1px 7px;border-radius:10px}
.ids-meta{font-family:var(--mono);font-size:11px;color:var(--ice);margin:5px 0 4px}
.ids-ctx{font-size:12px;color:var(--txt-dim);line-height:1.5;margin-bottom:9px}
.ids-choices{display:flex;gap:7px;flex-wrap:wrap}
.ids-btn{background:transparent;border:1px solid var(--line);color:var(--txt-dim);font-family:var(--mono);font-size:11px;padding:5px 12px;border-radius:5px;cursor:pointer;transition:border-color .12s,color .12s,background .12s}
.ids-btn:hover{border-color:var(--phos-dim);color:var(--txt)}
.ids-btn.on{border-color:var(--phos);color:var(--phos);background:rgba(57,255,158,.08)}
.ids-problems{margin:8px 0 0;padding:0 0 0 18px;color:var(--txt-dim)}
.ids-problems li{margin:6px 0;font-size:12px;line-height:1.5}
.ids-problems b{color:var(--red)}

/* ===== v2.13.0 phishing / email-header lab ===== */
#sbxPhishLab:hover{border-color:var(--mag);color:var(--mag)}
.phish-queue{display:flex;flex-direction:column;gap:14px;margin:16px 0 14px}
.phish-msg{border:1px solid var(--line);border-radius:8px;background:var(--panel);padding:14px 16px;transition:border-color .15s,opacity .15s}
.phish-msg.decided{border-color:var(--phos-dim)}
.phish-subject{font-family:'Chakra Petch';font-size:14px;color:var(--txt);margin-bottom:11px;line-height:1.4}
.phish-num{font-size:9.5px;letter-spacing:.14em;color:var(--ice);background:rgba(111,208,255,.1);padding:2px 7px;border-radius:3px;margin-right:8px;vertical-align:middle}
.phish-headers{background:var(--void);border:1px solid var(--line);border-radius:6px;padding:9px 11px;margin-bottom:10px;display:flex;flex-direction:column;gap:4px}
.ph-row{display:flex;gap:10px;font-size:12px;line-height:1.5}
.ph-k{flex:0 0 92px;color:var(--txt-dim);font-family:var(--mono);text-transform:uppercase;font-size:10px;letter-spacing:.06em;padding-top:1px}
.ph-v{color:var(--txt);font-family:var(--mono);word-break:break-word}
.ph-v.ph-flag{color:var(--amber)}
.ph-mono{font-family:var(--mono);color:var(--txt-dim)}
.auth-pill{display:inline-block;font-family:var(--mono);font-size:10.5px;padding:1px 7px;border-radius:10px;margin-right:4px;letter-spacing:.02em}
.auth-pass{background:rgba(57,255,158,.12);color:var(--phos);border:1px solid var(--phos-dim)}
.auth-warn{background:rgba(255,178,62,.12);color:var(--amber);border:1px solid rgba(255,178,62,.4)}
.auth-fail{background:rgba(255,77,99,.12);color:var(--red);border:1px solid rgba(255,77,99,.45)}
.phish-body{font-size:12.5px;color:var(--txt-dim);line-height:1.55;border-left:2px solid var(--line);padding:2px 0 2px 12px;margin-bottom:9px}
.phish-link{font-size:11.5px;color:var(--amber);font-family:var(--mono);margin-bottom:10px;word-break:break-all}
.phish-link em{color:var(--txt);font-style:normal}
.phish-choices{display:flex;gap:8px;flex-wrap:wrap}
.phish-btn{background:transparent;border:1px solid var(--line);color:var(--txt-dim);font-family:var(--mono);font-size:11.5px;padding:6px 14px;border-radius:5px;cursor:pointer;transition:border-color .12s,color .12s,background .12s}
.phish-btn:hover{border-color:var(--phos-dim);color:var(--txt)}
.phish-btn.on{border-color:var(--phos);color:var(--phos);background:rgba(57,255,158,.08)}
.phish-verdict-row{margin:12px 0;padding-top:10px;border-top:1px solid var(--line)}
.phish-verdict-row b{font-family:'Chakra Petch';color:var(--ice);font-size:12.5px;letter-spacing:.04em}
.phish-teach{font-size:12px;color:var(--txt-dim);line-height:1.55;margin-top:6px}

/* ============================================================
   ACCOUNTS & CLOUD SYNC (v2.15.0)
   Built on the existing token set — no new colours introduced.
   ============================================================ */

/* ---- auth tabs ---- */
.auth-tabs{display:flex;gap:2px;margin:0 0 18px;border-bottom:1px solid var(--line)}
.auth-tab{
  flex:1;background:none;border:none;border-bottom:2px solid transparent;
  color:var(--txt-dim);font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;padding:9px 4px;cursor:pointer;
  transition:color .3s cubic-bezier(.25,1,.5,1),border-color .3s cubic-bezier(.25,1,.5,1);
}
.auth-tab:hover{color:var(--txt)}
.auth-tab.is-on{color:var(--phos);border-bottom-color:var(--phos)}
.auth-tab:focus-visible{outline:2px solid var(--phos);outline-offset:2px}

.auth-pane{display:none}
.auth-pane.is-on{display:block;animation:rise .25s ease}

.auth-note{margin-top:14px;text-align:center;font-size:11px;color:var(--txt-dim);letter-spacing:.04em}
.linkish{
  background:none;border:none;padding:0;color:var(--ice);font-family:var(--mono);
  font-size:11px;cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}
.linkish:hover{color:var(--phos)}
.linkish:focus-visible{outline:2px solid var(--phos);outline-offset:2px}

.auth-err{
  display:none;margin:0 0 12px;padding:9px 11px;border-radius:5px;
  border:1px solid var(--red);background:rgba(255,77,99,.08);
  color:var(--red);font-size:11.5px;line-height:1.45;
}
.auth-err.show{display:block;animation:rise .2s ease}
.auth-ok{
  display:none;margin:0 0 12px;padding:9px 11px;border-radius:5px;
  border:1px solid var(--phos-dim);background:rgba(57,255,158,.07);
  color:var(--phos);font-size:11.5px;line-height:1.45;
}
.auth-ok.show{display:block;animation:rise .2s ease}

/* ---- header account chip ---- */
.acct-btn{
  background:none;border:1px solid var(--line);border-radius:4px;
  color:var(--txt-dim);font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  padding:4px 9px;cursor:pointer;white-space:nowrap;
  transition:color .3s cubic-bezier(.25,1,.5,1),border-color .3s cubic-bezier(.25,1,.5,1);
}
.acct-btn:hover{color:var(--phos);border-color:var(--phos-dim)}
.acct-btn:focus-visible{outline:2px solid var(--phos);outline-offset:2px}
.acct-btn.is-synced{color:var(--phos)}
.acct-btn.is-offline{color:var(--amber);border-color:var(--amber)}
.acct-btn.is-error{color:var(--red);border-color:var(--red)}

/* ---- modals (shared driver for conflict + account) ---- */
.modal-back{
  position:fixed;inset:0;z-index:9700;display:flex;align-items:center;justify-content:center;
  background:rgba(4,7,10,.82);padding:20px;
}
.modal-back[hidden]{display:none}
.modal-box{
  width:min(620px,100%);max-height:88vh;overflow:auto;
  border:1px solid var(--line);border-radius:8px;padding:26px;
  background:linear-gradient(180deg,var(--panel),var(--void));
  box-shadow:0 0 60px rgba(0,0,0,.6);
  animation:rise .28s cubic-bezier(.25,1,.5,1);
}
.modal-box h3{
  font-family:'Chakra Petch',var(--mono);font-size:19px;color:var(--phos);
  letter-spacing:.14em;margin-bottom:10px;
}
.modal-lead{font-size:12.5px;color:var(--txt);line-height:1.6;margin-bottom:18px}
.modal-foot{font-size:11px;color:var(--txt-dim);margin-top:16px;line-height:1.5}

/* ---- conflict cards ---- */
.cf-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.cf-grid{grid-template-columns:1fr}}
.cf-card{border:1px solid var(--line);border-radius:6px;padding:15px;background:rgba(15,28,37,.5)}
.cf-h{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--txt-dim);margin-bottom:8px;
}
.cf-sum{
  font-family:'Chakra Petch',var(--mono);font-size:15px;color:var(--ice);
  margin-bottom:14px;line-height:1.4;
}
.cf-card .btn{width:100%;justify-content:center}
.btn-ghost{background:none;border:1px solid var(--line);color:var(--txt)}
.btn-ghost:hover{border-color:var(--phos);color:var(--phos)}

/* ---- account panel rows ---- */
.ac-row{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--line);font-size:12px;
}
.ac-row:last-of-type{border-bottom:none}
.ac-k{color:var(--txt-dim);letter-spacing:.1em;text-transform:uppercase;font-size:10px}
.ac-v{color:var(--txt);text-align:right;word-break:break-all}
.ac-v.ok{color:var(--phos)}
.ac-v.warn{color:var(--amber)}
.ac-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.ac-danger{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  font-size:11px;color:var(--txt-dim);line-height:1.5;
}
.btn-danger{border-color:var(--red);color:var(--red);background:none}
.btn-danger:hover{background:rgba(255,77,99,.1)}

/* ---- verification landing page (api/verify.php) ---- */
.verify-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.verify-box{
  width:min(460px,100%);text-align:center;padding:34px 28px;
  border:1px solid var(--line);border-radius:8px;
  background:linear-gradient(180deg,var(--panel),var(--void));
}
.verify-box .brand{
  font-family:'Chakra Petch';font-weight:700;font-size:30px;color:var(--phos);
  letter-spacing:.16em;text-shadow:0 0 18px rgba(57,255,158,.5);
}
.verify-box .tag{
  color:var(--txt-dim);font-size:11px;letter-spacing:.32em;
  text-transform:uppercase;margin:6px 0 24px;
}
.verify-status{
  font-family:'Chakra Petch',var(--mono);font-size:17px;letter-spacing:.14em;margin-bottom:12px;
}
.verify-status.ok{color:var(--phos)}
.verify-status.bad{color:var(--amber)}
.verify-msg{font-size:12.5px;color:var(--txt);line-height:1.65;margin-bottom:22px}

/* ============================================================
   OPERATOR BOARD (v2.16.0)
   ============================================================ */

.board-link{
  background:none;border:none;padding:0;margin-left:auto;
  color:var(--ice);font-family:var(--mono);font-size:11px;letter-spacing:.08em;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;
  transition:color .3s cubic-bezier(.25,1,.5,1);
}
.board-link:hover{color:var(--phos)}
.board-link:focus-visible{outline:2px solid var(--phos);outline-offset:3px}

.board-wrap{padding:34px 0 48px;animation:rise .3s cubic-bezier(.25,1,.5,1)}
.board-head{margin-bottom:26px;max-width:640px}
.board-title{
  font-family:'Chakra Petch',var(--mono);font-size:clamp(28px,6vw,44px);
  color:var(--phos);letter-spacing:.1em;line-height:1;margin-bottom:10px;
  text-shadow:0 0 24px rgba(57,255,158,.28);
}
.board-sub{font-size:12.5px;color:var(--txt-dim);line-height:1.65}

.board-body{min-height:120px}
.board-load,.board-empty{
  padding:28px 16px;text-align:center;color:var(--txt-dim);font-size:12.5px;
  border:1px dashed var(--line);border-radius:6px;line-height:1.6;
}

.board-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.board-tbl thead th{
  text-align:left;font-weight:500;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--txt-dim);
  padding:0 10px 9px;border-bottom:1px solid var(--line);white-space:nowrap;
}
.board-tbl td{padding:10px;border-bottom:1px solid rgba(23,48,66,.5)}
.board-tbl tbody tr{transition:background .3s cubic-bezier(.25,1,.5,1)}
.board-tbl tbody tr:hover{background:rgba(15,28,37,.55)}
.board-tbl .c-rank{
  width:44px;color:var(--txt-dim);font-family:'Chakra Petch',var(--mono);
  font-size:14px;text-align:right;padding-right:14px;
}
.board-tbl .c-handle{color:var(--txt);word-break:break-all}
.board-tbl .c-num{width:64px;text-align:right;color:var(--ice);white-space:nowrap}
.board-tbl thead th.c-num,.board-tbl thead th.c-rank{text-align:right}

/* top three get a quiet nod, not a trophy */
.board-tbl tbody tr:nth-child(1) .c-rank{color:var(--phos)}
.board-tbl tbody tr:nth-child(2) .c-rank,
.board-tbl tbody tr:nth-child(3) .c-rank{color:var(--phos-dim)}

.board-tbl tr.is-me{background:rgba(57,255,158,.07)}
.board-tbl tr.is-me .c-handle{color:var(--phos)}
.board-tbl tr.is-me:hover{background:rgba(57,255,158,.11)}

.ghost-mark{color:var(--mag);font-size:10px;vertical-align:middle}

.board-you{margin-top:22px;padding-top:18px;border-top:1px dashed var(--line)}
.board-you-h{
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--txt-dim);margin-bottom:8px;
}

.board-optin{
  margin-top:24px;padding:18px;border:1px solid var(--line);border-radius:6px;
  background:rgba(15,28,37,.4);
}
.board-optin p{font-size:12px;color:var(--txt-dim);line-height:1.6;margin-bottom:12px}

.board-actions{margin-top:28px}

/* narrow screens: drop the two lowest-signal columns rather than squeeze */
@media (max-width:520px){
  .board-tbl thead th:nth-child(5),.board-tbl td:nth-child(5),
  .board-tbl thead th:nth-child(6),.board-tbl td:nth-child(6){display:none}
  .board-tbl .c-num{width:56px}
}

/* ============================================================
   MENU ALIGNMENT PASS (v2.18.0)
   Hero and header are deliberately untouched.
   ============================================================ */

/* ---- mode cards: shared action baseline ----
   Sandbox's meta line wraps to two lines while Campaign's fits on one, which
   used to push its button lower and make two equal-height cards look
   mismatched. Pinning the action row to the bottom decouples button
   alignment from how much copy sits above it. */
.mode-actions{
  margin-top:auto;padding-top:14px;
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
}
.mode-card .mode-actions .btn{align-self:auto;margin-top:0}

/* ---- phase rail: preview state ----
   Shown on the menu when there is no saved run. Distinct from `locked`,
   which means "you haven't reached this yet" and is correct mid-campaign
   but reads as a barrier to someone who has never played. */
.rail .seg.preview{
  opacity:1;
  border-color:var(--line);
  color:var(--txt-dim);
  transition:border-color .3s cubic-bezier(.25,1,.5,1),color .3s cubic-bezier(.25,1,.5,1);
}
.rail .seg.preview b{color:var(--txt)}
.rail .seg.preview:hover{border-color:var(--phos-dim)}
.rail .seg.preview:hover b{color:var(--phos)}

/* easter egg: full-spectrum sweep */
.rail.spectrum .seg{
  border-color:var(--phos);
  animation:spectrum-sweep .5s cubic-bezier(.25,1,.5,1) both;
}
.rail.spectrum .seg b{color:var(--phos)}
.rail.spectrum .seg:nth-child(1){animation-delay:0s}
.rail.spectrum .seg:nth-child(2){animation-delay:.06s}
.rail.spectrum .seg:nth-child(3){animation-delay:.12s}
.rail.spectrum .seg:nth-child(4){animation-delay:.18s}
.rail.spectrum .seg:nth-child(5){animation-delay:.24s}
.rail.spectrum .seg:nth-child(6){animation-delay:.30s}
@keyframes spectrum-sweep{
  0%{box-shadow:0 0 0 0 rgba(57,255,158,0)}
  40%{box-shadow:0 0 18px 0 rgba(57,255,158,.45)}
  100%{box-shadow:0 0 0 0 rgba(57,255,158,0)}
}

/* ---- operator record ---- */
.op-record-title{color:var(--phos-dim)}
.op-record-head{gap:12px}
.op-record-head .btn-sm{
  margin-left:auto;padding:5px 11px;font-size:10px;letter-spacing:.1em;
}

/* Stats span the panel so they share edges with the header above them.
   Capping and centring the row (as v2.18.0 did) left "OPERATOR RECORD" hard
   left and the board button hard right, with the numbers floating in a
   narrower band beneath — header and content not sharing edges. Breathing
   room comes from cell padding instead. */
.op-stats{width:100%;margin:0}
.op-stat{padding:0 6px}

/* Colour encodes state: dim at zero, ice in progress, phosphor at complete.
   Previously the row mixed blue/green/amber with no consistent meaning. */
.op-stat.zero b{color:var(--txt-dim)}
.op-stat.part b{color:var(--ice)}
.op-stat.full b{color:var(--phos)}

/* Fixed label height stops one- vs two-line labels raggeding the baseline. */
.op-stat small{display:block;min-height:2.4em;line-height:1.2}

/* ---- empty record state ---- */
.op-empty{
  text-align:center;padding:10px 6px 4px;
  display:flex;flex-direction:column;gap:6px;
}
.op-empty b{
  font-family:'Chakra Petch',var(--mono);font-size:13px;
  color:var(--txt);letter-spacing:.06em;cursor:default;
}
.op-empty span{font-size:11.5px;color:var(--txt-dim);line-height:1.6}
.op-empty b.zero-day{color:var(--mag);letter-spacing:.2em}

/* ---- record header + panel rhythm (v2.18.1) ---- */
/* The handle sat too far from its label once the board button took the
   right edge via margin-left:auto. Pin the pair together and let only the
   button push away. */
.op-record-head{align-items:center}
.op-record-head .op-record-title + span{margin-left:-4px;color:var(--txt-dim)}
.op-record{padding-top:14px;padding-bottom:16px}
.op-record-head{margin-bottom:12px}

/* ============================================================
   MOBILE PASS (v2.19.0)

   Audited at 375px and 414px. These address problems that only appear on a
   real phone — iOS input behaviour, touch targets and viewport scrolling —
   not just narrow layout.

   One block per breakpoint. Earlier drafts split these across several blocks
   sharing the same query, which is harder to reason about and easy to
   contradict later.
   ============================================================ */

/* ---------- touch devices (any width) ---------- */
@media (pointer:coarse){

  /* iOS zoom-on-focus — the blocking one.
     Safari zooms the viewport whenever a focused input renders below 16px,
     and with no maximum-scale (deliberately, since blocking zoom is an
     accessibility failure) it never zooms back out. The player is stranded
     in a magnified, horizontally scrolling view of the terminal — which is
     where the entire game happens. Scoped to coarse pointers so desktop
     density is untouched. */
  .field input,
  #shInput,
  input[type="text"],
  input[type="email"],
  input[type="password"]{ font-size:16px }

  #shInput{ letter-spacing:-.01em }   /* 16px mono is wider; claw back a little */

  /* Touch targets. 34px sound toggle and ~26px board button sat below the
     ~44px minimum, and the sound toggle is adjacent to the menu button, so
     mis-taps were likely. Desktop density is deliberately tighter. */
  .snd-toggle{ width:44px;height:44px;font-size:17px }
  .acct-btn{ min-height:44px;padding:6px 12px }
  .btn{ padding:13px 22px;min-height:44px }
  .btn-sm{ min-height:38px;padding:8px 14px }
  .auth-tab{ min-height:44px }
  .linkish{ min-height:32px;display:inline-block }
  .board-link{ min-height:38px;display:inline-flex;align-items:center }
}

/* ---------- phones and small tablets ---------- */
@media (max-width:620px){

  /* Phase rail: one scrollable row, not a wrapped slab.
     min-width:84px with flex-wrap gave three segments per row at 375px, so
     the rail became two rows and pushed the hero below the fold. A single
     scrollable row keeps the hero near the top and preserves the sense of a
     linear six-phase progression that wrapping destroys. */
  .rail{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
    padding-right:26px;
  }
  .rail::-webkit-scrollbar{ display:none }
  .rail .seg{ flex:0 0 auto;min-width:96px }
  .rail .seg.active{ scroll-margin-inline:16px }

  /* Breakpoint agreement: the mode grid goes two-column at 620px while the
     stat grid used to switch at 560px, so between the two the cards were
     single-column while the record had already reflowed. */
  .op-stats{ grid-template-columns:repeat(2,1fr) }

  /* Title, handle and board button cannot share one line at 375px. */
  .op-record-head{ flex-wrap:wrap;gap:6px }
  .op-record-head .btn-sm{ margin-left:0;width:100%;justify-content:center;margin-top:6px }

  /* 320px of topology is most of a phone screen. */
  #netsvg{ max-height:240px }

  /* The conflict modal only collapsed at 560px, leaving cramped buttons on a
     small phone. This is where someone chooses which saved run to keep, so
     it has to be unambiguous. */
  .cf-grid{ grid-template-columns:1fr }
  .modal-box{ padding:20px 18px }
}

/* ---------- narrow phones: board becomes cards ---------- */
@media (max-width:520px){

  /* Six columns with nowrap headers and fixed 64px numeric cells cannot fit
     375px. Hiding columns (the v2.16.0 approach) still overflowed once an
     18-character handle was in play, and threw away data in the process.
     Each row becomes a labelled card instead. */
  .board-tbl thead{ display:none }
  .board-tbl,
  .board-tbl tbody,
  .board-tbl tr,
  .board-tbl td{ display:block;width:100% }

  .board-tbl tr{
    border:1px solid var(--line);border-radius:6px;
    padding:12px 14px;margin-bottom:10px;
    background:rgba(15,28,37,.4);position:relative;
  }
  .board-tbl td{ border:none;padding:2px 0 }

  .board-tbl .c-rank{
    position:absolute;top:12px;right:14px;width:auto;
    font-size:16px;padding:0;
  }
  .board-tbl .c-handle{
    font-family:'Chakra Petch',var(--mono);font-size:15px;
    color:var(--ice);padding-right:44px;margin-bottom:8px;
  }

  /* Values regain their meaning through generated labels. */
  .board-tbl .c-num{
    display:flex;justify-content:space-between;align-items:baseline;
    width:100%;text-align:left;font-size:12.5px;padding:3px 0;
  }
  .board-tbl .c-num::before{
    content:attr(data-label);
    color:var(--txt-dim);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  }
  .board-tbl tr.is-me{ border-color:var(--phos-dim) }

  /* The column-hiding rules from v2.16.0 are obsolete under the card layout,
     and would otherwise blank two of the four values. */
  .board-tbl thead th:nth-child(5),.board-tbl td:nth-child(5),
  .board-tbl thead th:nth-child(6),.board-tbl td:nth-child(6){ display:flex }
}

/* ---------- very narrow ---------- */
@media (max-width:400px){
  .op-stats{ grid-template-columns:1fr 1fr;gap:8px }
  .op-stat small{ min-height:0 }
}

/* ---------- landscape phones ---------- */
@media (max-height:520px) and (orientation:landscape){
  #netsvg{ max-height:180px }
}

/* ---- noscript fallback (v2.20.0) ----
   The entire game is client-side, so with scripting off the page renders
   completely blank — which looks broken rather than explained. */
.noscript-wrap{
  position:fixed;inset:0;z-index:9800;display:flex;
  align-items:center;justify-content:center;padding:24px;
  background:var(--void);
}
.noscript-box{
  max-width:520px;padding:30px 28px;
  border:1px solid var(--line);border-radius:8px;
  background:linear-gradient(180deg,var(--panel),var(--void));
}
.noscript-brand{
  font-family:'Chakra Petch',var(--mono);font-weight:700;font-size:26px;
  color:var(--phos);letter-spacing:.18em;margin-bottom:18px;
}
.noscript-box p{
  font-family:var(--mono);font-size:13px;line-height:1.7;
  color:var(--txt-dim);margin-bottom:12px;
}
.noscript-box p b{color:var(--txt)}

/* ============================================================
   FIRST-RUN ONBOARDING (v2.21.0)
   Everything here is shown once and never again. Restrained on purpose:
   this audience includes people who already know the material.
   ============================================================ */

/* ---- welcome panel ---- */
.welcome{
  border:1px solid var(--phos-dim);border-radius:8px;
  padding:22px 24px;margin:26px 0 0;
  background:linear-gradient(180deg,rgba(57,255,158,.05),rgba(15,28,37,.35));
  overflow:hidden;
  animation:rise .4s cubic-bezier(.25,1,.5,1);
}
.welcome.closing{
  height:0!important;padding-top:0;padding-bottom:0;margin-top:0;
  opacity:0;border-width:0;
  transition:all .3s cubic-bezier(.25,1,.5,1);
}
.welcome-tag{
  font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--phos);margin-bottom:10px;
}
.welcome h3{
  font-family:'Chakra Petch',var(--mono);font-size:17px;color:var(--txt);
  letter-spacing:.02em;margin-bottom:10px;line-height:1.35;
}
.welcome p{font-size:12.5px;color:var(--txt-dim);line-height:1.7;margin-bottom:16px;max-width:70ch}
.welcome p b{color:var(--phos)}
.welcome-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px;
}
@media (max-width:620px){.welcome-grid{grid-template-columns:1fr}}
.welcome-grid > div{
  border-left:2px solid var(--line);padding-left:12px;
}
.welcome-grid b{
  display:block;font-size:11.5px;color:var(--ice);letter-spacing:.06em;margin-bottom:4px;
}
.welcome-grid span{display:block;font-size:11.5px;color:var(--txt-dim);line-height:1.6}

/* ---- progressive objective hint ---- */
.obj-hint{
  display:flex;align-items:flex-start;flex-wrap:wrap;gap:8px;
  margin:8px 0 0;padding:11px 13px;
  border:1px solid var(--line);border-left:2px solid var(--ice);
  border-radius:5px;background:rgba(110,200,255,.05);
  font-size:12px;line-height:1.6;color:var(--txt-dim);
  animation:rise .3s cubic-bezier(.25,1,.5,1);
}
.obj-hint.t2{border-left-color:var(--phos);background:rgba(57,255,158,.05)}
.obj-hint b{color:var(--txt)}
.hint-tag{
  font-size:9px;letter-spacing:.18em;color:var(--ice);
  border:1px solid var(--ice);border-radius:3px;padding:2px 6px;
  flex:0 0 auto;margin-top:1px;
}
.obj-hint.t2 .hint-tag{color:var(--phos);border-color:var(--phos)}
.hint-cmd{
  font-family:var(--mono);color:var(--phos);cursor:pointer;
  border-bottom:1px dashed var(--phos-dim);
}
.hint-cmd:hover{background:rgba(57,255,158,.1)}
.hint-dismiss{
  margin-left:auto;background:none;border:1px solid var(--line);border-radius:4px;
  color:var(--txt-dim);font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  padding:4px 9px;cursor:pointer;flex:0 0 auto;
  transition:color .3s cubic-bezier(.25,1,.5,1),border-color .3s cubic-bezier(.25,1,.5,1);
}
.hint-dismiss:hover{color:var(--phos);border-color:var(--phos-dim)}

/* ---- shell starter chips ---- */
.sh-starters{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px;
  padding:0 15px 10px;
}
.st-label{
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--txt-dim);margin-right:2px;
}
.st-chip{
  background:rgba(15,28,37,.7);border:1px solid var(--line);border-radius:4px;
  color:var(--ice);font-family:var(--mono);font-size:11px;
  padding:4px 9px;cursor:pointer;
  transition:color .3s cubic-bezier(.25,1,.5,1),border-color .3s cubic-bezier(.25,1,.5,1);
}
.st-chip:hover{color:var(--phos);border-color:var(--phos-dim)}
.st-chip:focus-visible{outline:2px solid var(--phos);outline-offset:2px}
@media (pointer:coarse){
  .st-chip{min-height:34px;padding:7px 11px}
  .hint-dismiss{min-height:34px}
}

/* ---- after-action "what's next" (v2.21.3) ---- */
.next-steps{
  max-width:620px;margin:26px auto 0;text-align:left;
  padding:16px 18px;border:1px solid var(--line);border-left:2px solid var(--phos-dim);
  border-radius:6px;background:rgba(15,28,37,.4);
}
.ns-tag{
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--phos);margin-bottom:10px;
}
.next-steps ul{list-style:none;margin:0;padding:0}
.next-steps li{
  font-size:12px;line-height:1.65;color:var(--txt-dim);
  padding:7px 0 7px 16px;position:relative;
}
.next-steps li+li{border-top:1px solid rgba(23,48,66,.6)}
.next-steps li::before{
  content:"▸";position:absolute;left:0;top:7px;color:var(--phos-dim);font-size:10px;
}
.next-steps b{color:var(--txt)}
.mono-hint{font-family:var(--mono);color:var(--ice)}

/* ---- career best beside the run XP (v2.21.5) ----
   Disambiguates a legitimate 0 (fresh run) from lost progress. */
.stat-best{
  display:block;font-style:normal;
  font-size:9px;letter-spacing:.1em;color:var(--txt-dim);
  margin-top:1px;white-space:nowrap;
}
.stat-best[hidden]{display:none}

/* ---- concept labs on the main menu (v2.21.7) ---- */
.labs-section{margin:32px 0 0}
.labs-head{
  display:flex;align-items:baseline;gap:12px;
  padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:12px;
}
.labs-head h3{
  font-family:'Chakra Petch',var(--mono);font-size:15px;color:var(--phos);
  letter-spacing:.14em;text-transform:uppercase;
}
.labs-count{
  margin-left:auto;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--txt-dim);
}
.labs-lead{font-size:12px;color:var(--txt-dim);line-height:1.6;margin-bottom:16px;max-width:70ch}

.labs-grid{
  display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.lab-card{
  display:flex;flex-direction:column;gap:5px;
  text-align:left;padding:14px 15px;cursor:pointer;
  border:1px solid var(--line);border-radius:6px;
  background:rgba(15,28,37,.45);
  transition:border-color .3s cubic-bezier(.25,1,.5,1),
             background .3s cubic-bezier(.25,1,.5,1),
             transform .3s cubic-bezier(.25,1,.5,1);
}
.lab-card:hover{
  border-color:var(--phos-dim);background:rgba(57,255,158,.06);
  transform:translateY(-2px);
}
.lab-card:focus-visible{outline:2px solid var(--phos);outline-offset:2px}
.lab-key{color:var(--phos);font-size:14px;line-height:1}
.lab-name{
  font-family:'Chakra Petch',var(--mono);font-size:13.5px;color:var(--txt);
  letter-spacing:.04em;display:flex;align-items:center;gap:7px;
}
.lab-blurb{font-size:11.5px;color:var(--txt-dim);line-height:1.55}
.lab-tick{font-style:normal;color:var(--phos);font-size:11px}
.lab-card.is-done{border-color:var(--phos-dim)}
.lab-card.is-done .lab-name{color:var(--phos)}
@media (pointer:coarse){ .lab-card{min-height:44px} }

/* ---- campaign completion badge (v2.21.9) ---- */
.badge-done{
  font-style:normal;margin-left:6px;font-size:10px;
  color:var(--void);opacity:.75;
}
.mode-card .mode-meta{line-height:1.6}

/* ---- tool chip tooltips (v2.23.0) ---- */
.tool.has-tip{position:relative;cursor:help}
.tool.has-tip::after{
  content:attr(data-tip);
  position:absolute;left:0;top:calc(100% + 8px);z-index:60;
  width:max-content;max-width:min(320px,80vw);
  padding:9px 11px;border:1px solid var(--line);border-radius:5px;
  background:var(--panel);color:var(--txt-dim);
  font-size:11.5px;line-height:1.55;letter-spacing:0;text-transform:none;
  box-shadow:0 6px 24px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .25s cubic-bezier(.25,1,.5,1),
             transform .25s cubic-bezier(.25,1,.5,1),
             visibility .25s;
  pointer-events:none;
}
.tool.has-tip:hover::after,
.tool.has-tip:focus::after,
.tool.has-tip:focus-visible::after{opacity:1;visibility:visible;transform:translateY(0)}
.tool.has-tip:focus-visible{outline:2px solid var(--phos);outline-offset:2px}
/* touch: no hover, so tapping focuses the chip and shows the tip */
@media (pointer:coarse){
  .tool.has-tip{min-height:32px;display:inline-flex;align-items:center}
  .tool.has-tip::after{left:auto;right:0;max-width:min(280px,86vw)}
}

/* ---- lab completion screen (v2.24.0) ---- */
.labdone{max-width:720px;margin:0 auto;animation:rise .35s cubic-bezier(.25,1,.5,1)}
.labdone-title{
  font-family:'Chakra Petch',var(--mono);font-size:clamp(22px,5vw,32px);
  color:var(--txt);letter-spacing:.04em;margin-bottom:20px;
}
.labdone-title .ph{color:var(--phos)}
.labdone-xp{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:16px 18px;margin-bottom:20px;
  border:1px solid var(--phos-dim);border-radius:6px;
  background:rgba(57,255,158,.06);
}
.labdone-xp b{font-family:'Chakra Petch',var(--mono);font-size:30px;color:var(--phos);line-height:1}
.labdone-xp span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-dim)}
.labdone-xp em{
  margin-left:auto;font-style:normal;font-size:11.5px;color:var(--ice);white-space:nowrap;
}
.labdone-body{margin-bottom:24px}
.ld-took{font-size:13px;color:var(--txt);line-height:1.7;margin-bottom:16px}
.ld-taught{
  border-left:2px solid var(--ice);padding:12px 0 12px 14px;margin-bottom:14px;
  background:rgba(110,200,255,.04);
}
.ld-tag{
  display:block;font-size:9.5px;letter-spacing:.2em;color:var(--ice);margin-bottom:6px;
}
.ld-taught p{font-size:12.5px;color:var(--txt-dim);line-height:1.7}
.ld-obj{font-size:11px;color:var(--txt-dim);letter-spacing:.04em}
.labdone-actions{display:flex;flex-wrap:wrap;gap:10px}
.labdone-all{
  margin-top:24px;padding-top:18px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:6px;
}
.labdone-all b{font-family:'Chakra Petch',var(--mono);font-size:14px;color:var(--phos);letter-spacing:.06em}
.labdone-all span{font-size:12px;color:var(--txt-dim);line-height:1.6}

/* ---- recommended next step (v2.24.0) ---- */
.next-step{
  margin:26px 0 0;padding:15px 18px;
  border:1px solid var(--line);border-left:2px solid var(--phos-dim);
  border-radius:6px;background:rgba(15,28,37,.45);
}
.ns-eyebrow{
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--phos);margin-bottom:8px;
}
.ns-main{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ns-main > div{flex:1;min-width:220px}
.ns-main b{
  display:block;font-family:'Chakra Petch',var(--mono);font-size:14px;
  color:var(--txt);letter-spacing:.03em;margin-bottom:4px;
}
.ns-main span{display:block;font-size:12px;color:var(--txt-dim);line-height:1.6}
.ns-main .btn{flex:0 0 auto;white-space:nowrap}
@media (max-width:620px){
  .ns-main .btn{width:100%;justify-content:center}
  .labdone-xp em{margin-left:0;width:100%}
  .labdone-actions .btn{width:100%;justify-content:center}
}

/* ---- defense-in-depth resilience breakdown (v2.30.0) ---- */
.did-resil{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.dr-head{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--txt-dim);margin-bottom:8px}
.dr-row{
  display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;
  font-size:11.5px;padding:5px 0;border-bottom:1px solid rgba(23,48,66,.5);
}
.dr-row:last-child{border-bottom:none}
.dr-name{color:var(--txt)}
.dr-out{text-align:right}
.dr-row.ok .dr-out{color:var(--phos)}
.dr-row.bad .dr-out{color:var(--red);font-weight:600}

/* ============================================================
   HEADER PROGRESS BAR (v2.31.0)
   Deliberately minimal: a percentage, a bar, and ONE line naming the
   current frontier. The full breakdown is the Operator Record's job —
   duplicating it here would make the header a dashboard nobody reads.
   ============================================================ */
.hdr-progress{
  display:flex;flex-direction:column;gap:3px;
  min-width:150px;max-width:230px;flex:0 1 auto;
}
.hp-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.hp-label{
  font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--txt-dim);
}
.hp-top b{
  font-family:'Chakra Petch',var(--mono);font-size:13px;color:var(--ice);line-height:1;
}
.hp-track{
  height:4px;border-radius:2px;background:rgba(23,48,66,.9);overflow:hidden;
}
.hp-fill{
  height:100%;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--phos-dim),var(--phos));
  transition:width .6s cubic-bezier(.25,1,.5,1);
}
.hp-next{
  font-size:9.5px;color:var(--txt-dim);letter-spacing:.04em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hdr-progress.is-complete .hp-top b{color:var(--phos)}
.hdr-progress.is-complete .hp-fill{box-shadow:0 0 10px rgba(57,255,158,.5)}

/* the rail now lives inside the campaign screen */
.rail-campaign{
  margin:0 0 18px;padding:0;max-width:none;
  border-bottom:1px solid var(--line);padding-bottom:12px;
}

@media (max-width:820px){
  /* the contextual line is the first thing to go when space is tight —
     the percentage still answers "am I done?" on its own */
  .hp-next{display:none}
  .hdr-progress{min-width:110px}
}
@media (max-width:620px){
  .hdr-progress{order:10;min-width:0;max-width:none;width:100%;margin-top:6px}
  .hp-next{display:block}
}

/* ============================================================
   LEARNING PATH (v2.32.0)
   ============================================================ */
.lp{max-width:860px;margin:0 auto;animation:rise .35s cubic-bezier(.25,1,.5,1)}
.lp-head{
  font-family:'Chakra Petch',var(--mono);font-size:clamp(22px,5vw,30px);
  color:var(--phos);letter-spacing:.06em;margin-bottom:10px;
}
.lp-lead{font-size:12.5px;color:var(--txt-dim);line-height:1.7;margin-bottom:22px;max-width:70ch}
.lp-lead b{color:var(--txt)}

/* domain coverage */
.lp-domains{
  display:grid;gap:10px;margin-bottom:26px;padding-bottom:22px;
  border-bottom:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.lp-dom-top{
  display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  font-size:11px;color:var(--txt-dim);margin-bottom:5px;
}
.lp-dom-top b{color:var(--ice)}
.lp-dom-top em{font-style:normal;color:var(--txt-dim);font-size:10px}
.lp-dom-track{height:3px;border-radius:2px;background:rgba(23,48,66,.9);overflow:hidden}
.lp-dom-fill{
  height:100%;border-radius:2px;background:var(--phos-dim);
  transition:width .6s cubic-bezier(.25,1,.5,1);
}

/* the route */
.lp-steps{display:flex;flex-direction:column;gap:6px}
.lp-step{
  display:flex;align-items:flex-start;gap:14px;text-align:left;width:100%;
  padding:13px 15px;cursor:pointer;
  border:1px solid var(--line);border-left:2px solid var(--line);border-radius:6px;
  background:rgba(15,28,37,.4);
  transition:border-color .3s cubic-bezier(.25,1,.5,1),
             background .3s cubic-bezier(.25,1,.5,1),
             transform .3s cubic-bezier(.25,1,.5,1);
}
.lp-step:hover{border-left-color:var(--phos);background:rgba(57,255,158,.05);transform:translateX(2px)}
.lp-step:focus-visible{outline:2px solid var(--phos);outline-offset:2px}
.lp-num{
  font-family:'Chakra Petch',var(--mono);font-size:13px;color:var(--txt-dim);
  flex:0 0 auto;padding-top:1px;
}
.lp-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.lp-title{
  font-family:'Chakra Petch',var(--mono);font-size:13.5px;color:var(--txt);
  letter-spacing:.03em;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.lp-teach{font-size:11.5px;color:var(--txt-dim);line-height:1.55}
.lp-obj{
  flex:0 0 auto;font-size:10px;letter-spacing:.08em;color:var(--ice);
  border:1px solid var(--line);border-radius:3px;padding:3px 7px;white-space:nowrap;
}
.lp-tick{font-style:normal;color:var(--phos);font-size:11px}
.lp-next-tag{
  font-style:normal;font-size:8.5px;letter-spacing:.18em;color:var(--void);
  background:var(--phos);border-radius:2px;padding:2px 6px;
}
.lp-step.is-done{border-left-color:var(--phos-dim)}
.lp-step.is-done .lp-title{color:var(--phos)}
.lp-step.is-next{border-left-color:var(--phos);background:rgba(57,255,158,.06)}
.lp-foot{margin-top:24px}

@media (max-width:620px){
  .lp-step{flex-wrap:wrap;gap:8px}
  .lp-obj{order:3;margin-left:34px}
}