/* Milton Imaging — MRI Safety Training */
:root{
  --baby:#DDFCFB;
  --ocean:#3FF9D9;
  --teal:#79C6C2;
  --teal-deep:#2E6F69;
  --ink:#194036;
  --ink-2:#0E2A24;
  --coral:#FF9291;
  --coral-deep:#E25C5B;
  --paper:#F4FBFA;
  --glass: rgba(255,255,255,0.55);
  --glass-strong: rgba(255,255,255,0.75);
  --glass-dark: rgba(25,64,54,0.35);
  --stroke: rgba(25,64,54,0.12);
  --stroke-strong: rgba(25,64,54,0.22);
  --shadow-1: 0 1px 2px rgba(25,64,54,0.06), 0 8px 24px rgba(25,64,54,0.06);
  --shadow-2: 0 24px 60px -20px rgba(25,64,54,0.25), 0 8px 24px rgba(25,64,54,0.08);
  --radius: 18px;
  --radius-lg: 28px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: 'Figtree', system-ui, -apple-system, Segoe UI, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 800px at 85% -10%, #DDFCFB 0%, transparent 55%),
    radial-gradient(1000px 700px at -10% 110%, #C9F4EE 0%, transparent 55%),
    linear-gradient(180deg, #F2FBF9 0%, #E8F6F3 100%);
  min-height:100vh;
  -webkit-font-smoothing: antialiased;
  letter-spacing:-0.005em;
}

/* ---------- Layout chrome ---------- */
.app{
  min-height:100vh;
  display:grid;
  grid-template-columns: 260px 1fr;
}
.sidebar{
  position:sticky; top:0; align-self:start;
  height:100vh;
  padding:22px 18px;
  border-right:1px solid var(--stroke);
  background: rgba(255,255,255,0.5);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display:flex; flex-direction:column; gap:18px;
}
.brand{display:flex; align-items:center; gap:10px; padding:6px 6px 14px}
.brand img{height:28px}
.brand .label{font-size:11px; color:var(--teal-deep); letter-spacing:0.14em; text-transform:uppercase; font-weight:600}

.nav{display:flex; flex-direction:column; gap:4px; margin-top:4px}
.nav .item{
  display:grid; grid-template-columns: 28px 1fr auto; align-items:center; gap:10px;
  padding:10px 12px; border-radius:12px; cursor:pointer;
  font-size:13.5px; font-weight:500; color:var(--ink);
  border:1px solid transparent;
  transition: background .2s, border-color .2s, transform .2s;
}
.nav .item:hover{background:rgba(255,255,255,0.6)}
.nav .item.active{background:rgba(63,249,217,0.18); border-color:rgba(63,249,217,0.5)}
.nav .item .num{
  width:24px; height:24px; border-radius:7px;
  display:grid; place-items:center;
  font-size:11px; font-weight:700;
  background:var(--ink); color:var(--baby);
  font-variant-numeric: tabular-nums;
}
.nav .item.done .num{background:var(--ocean); color:var(--ink-2)}
.nav .item .check{font-size:12px; color:var(--teal-deep); opacity:0}
.nav .item.done .check{opacity:1}
.nav .item.locked{opacity:.45; cursor:not-allowed}

.sidebar .footer{margin-top:auto; font-size:11px; color:var(--teal-deep); padding:10px 6px; line-height:1.45}
.progress{
  height:6px; border-radius:99px; background:rgba(25,64,54,0.08); overflow:hidden;
}
.progress > span{display:block; height:100%; background:linear-gradient(90deg, var(--ocean), var(--teal)); border-radius:99px; transition:width .5s ease}

.main{padding:28px 36px 80px; min-width:0}

.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:10px 16px; border-radius:14px;
  background: var(--glass);
  border:1px solid var(--stroke);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  margin-bottom:22px;
}
.topbar .crumbs{font-size:12px; color:var(--teal-deep); letter-spacing:0.06em; text-transform:uppercase; font-weight:600}
.topbar .crumbs b{color:var(--ink)}
.topbar .meta{display:flex; align-items:center; gap:14px; font-size:12px; color:var(--teal-deep)}
.topbar .pill{
  padding:5px 10px; border-radius:99px; font-weight:600;
  background:rgba(63,249,217,0.18); color:var(--ink); border:1px solid rgba(63,249,217,0.4);
}
.topbar .avatar{
  width:30px; height:30px; border-radius:50%;
  background:linear-gradient(135deg, var(--ocean), var(--teal)); color:var(--ink); display:grid; place-items:center; font-weight:700; font-size:12px;
  border:1px solid rgba(255,255,255,0.6);
}

/* ---------- Common card ---------- */
.card{
  background: var(--glass-strong);
  border:1px solid var(--stroke);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-2);
}
.card-pad{padding:28px}
.eyebrow{
  font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:var(--teal-deep); font-weight:700;
}
.h1{font-size:44px; line-height:1.05; letter-spacing:-0.02em; font-weight:700; color:var(--ink-2); margin:6px 0 12px; text-wrap:balance}
.h2{font-size:30px; line-height:1.1; letter-spacing:-0.02em; font-weight:700; color:var(--ink-2); margin:0 0 8px}
.h3{font-size:18px; line-height:1.25; letter-spacing:-0.01em; font-weight:600; color:var(--ink-2); margin:0 0 6px}
.lead{font-size:16px; line-height:1.5; color:var(--ink); max-width:62ch}
.muted{color:var(--teal-deep)}
.kicker{font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--teal-deep); font-weight:700}

/* ---------- Buttons ---------- */
.btn{
  appearance:none; border:0; cursor:pointer; font-family:inherit;
  font-size:14px; font-weight:600;
  padding:12px 18px; border-radius:12px;
  display:inline-flex; align-items:center; gap:8px;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn:active{transform: translateY(1px)}
.btn-primary{
  background: var(--ink-2); color: var(--ocean);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 10px 22px -10px rgba(25,64,54,0.6);
}
.btn-primary:hover{background:#0a1f1a}
.btn-ghost{background: transparent; color: var(--ink); border:1px solid var(--stroke-strong)}
.btn-ghost:hover{background: rgba(255,255,255,0.6)}
.btn-coral{background:var(--coral); color:#3a0d0d}
.btn-coral:hover{background:#ff7a78}
.btn-lg{padding:16px 24px; font-size:15px; border-radius:14px}

.kbd{
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:11px; padding:2px 7px; border-radius:6px;
  background: rgba(25,64,54,0.06); border:1px solid var(--stroke); color:var(--ink);
}

/* ---------- Scene shell ---------- */
.scene{display:none; animation: fadeUp .5s ease both}
.scene.active{display:block}
@keyframes fadeUp{ from{opacity:0; transform: translateY(10px)} to{opacity:1; transform:none} }

.scene-foot{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:22px;
}

/* ---------- SCENE 1 — Command Center ---------- */
.cmd{
  position:relative; overflow:hidden;
  padding:44px 44px;
  background:
    radial-gradient(700px 400px at 90% -10%, rgba(63,249,217,0.45), transparent 60%),
    radial-gradient(500px 350px at -10% 110%, rgba(121,198,194,0.5), transparent 60%),
    var(--glass-strong);
}
.cmd-grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:36px; align-items:center}
.cmd .badge-row{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px}
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:99px; font-size:11px; font-weight:600;
  background: rgba(255,255,255,0.6); border:1px solid var(--stroke); color:var(--ink);
}
.badge .dot{width:6px;height:6px;border-radius:50%; background:var(--coral); box-shadow: 0 0 0 4px rgba(255,146,145,0.25)}
.cmd h1{font-size:60px; line-height:0.98; letter-spacing:-0.03em; font-weight:800; margin:0 0 14px; color:var(--ink-2); text-wrap:balance}
.cmd h1 em{font-style: normal; background: linear-gradient(180deg, var(--ink-2), var(--teal-deep)); -webkit-background-clip:text; background-clip:text; color:transparent}
.cmd .sub{font-size:17px; line-height:1.5; color:var(--ink); max-width:48ch}
.cmd .ctas{display:flex; gap:10px; margin-top:24px}
.cmd .stats{display:grid; grid-template-columns: repeat(3,1fr); gap:12px; margin-top:28px}
.stat{
  background: rgba(255,255,255,0.6);
  border:1px solid var(--stroke);
  border-radius:14px; padding:14px 14px 12px;
}
.stat .n{font-size:22px; font-weight:700; color:var(--ink-2); letter-spacing:-0.01em}
.stat .l{font-size:11px; color:var(--teal-deep); text-transform:uppercase; letter-spacing:0.1em; font-weight:600; margin-top:2px}

.portal{
  position:relative; aspect-ratio: 1/1; width:100%; max-width: 420px; margin-left:auto;
  padding: 12% 14%; /* room for outside labels */
}
.portal-inner{
  position:absolute; inset:12% 14%;
}
.portal .ring{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid rgba(25,64,54,0.18);
  animation: spin 30s linear infinite;
}
.portal .ring.r2{inset:8%; border-color: rgba(63,249,217,0.5); animation-duration: 22s; animation-direction: reverse}
.portal .ring.r3{inset:18%; border-style:dashed; border-color: rgba(25,64,54,0.18); animation-duration: 40s}
.portal .ring.r4{inset:28%; border-color: rgba(121,198,194,0.5); animation-duration: 18s; animation-direction: reverse}
@keyframes spin{ to{transform: rotate(360deg)} }
.portal .core{
  position:absolute; inset:36%;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.9), transparent 60%),
    radial-gradient(circle at 65% 70%, rgba(63,249,217,0.7), transparent 65%),
    linear-gradient(135deg, #79C6C2, #194036);
  box-shadow: 0 30px 70px -20px rgba(25,64,54,0.55), inset 0 0 40px rgba(255,255,255,0.25);
}
.portal .tick{
  position:absolute; left:50%; top:50%;
  width:2px; height:6px; background:var(--ink-2); border-radius:2px;
  transform-origin: 50% 50%;
  margin: -3px 0 0 -1px;
}
.portal .label{
  position:absolute;
  background: rgba(255,255,255,0.92); border:1px solid var(--stroke);
  font-size:10px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink);
  padding:5px 9px; border-radius:99px; white-space:nowrap;
  box-shadow: var(--shadow-1);
  z-index:2;
}
.portal .label.l1{top:0; left:0}
.portal .label.l2{top:30%; right:0}
.portal .label.l3{bottom:30%; left:0}
.portal .label.l4{bottom:0; right:6%}

.cmd .system-line{
  margin-top:22px; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size:12px; color:var(--teal-deep);
  display:flex; align-items:center; gap:10px;
}
.cmd .system-line .pulse{width:8px;height:8px;border-radius:50%; background:var(--ocean); box-shadow:0 0 0 4px rgba(63,249,217,0.25); animation: pulse 1.6s ease-in-out infinite}
@keyframes pulse{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.4)} }

/* ---------- SCENE 2 — Zone Explorer ---------- */
.zone-layout{display:grid; grid-template-columns: 1.25fr .9fr; gap:24px; align-items:stretch}
.zone-map{
  position:relative; padding:18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.55));
  border:1px solid var(--stroke);
  border-radius: var(--radius-lg);
  overflow:hidden;
  min-height:520px;
  box-shadow: var(--shadow-2);
}
.zone-map .grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(25,64,54,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(25,64,54,0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events:none;
  mask-image: radial-gradient(ellipse at center, black 50%, transparent 100%);
}
.zone-map svg{display:block; width:100%; height:auto}
.zone-card{display:flex; flex-direction:column; gap:14px}
.zone-info{
  background: var(--glass-strong);
  border:1px solid var(--stroke);
  border-radius: var(--radius-lg);
  padding:22px;
  flex:1;
  display:flex; flex-direction:column;
  box-shadow: var(--shadow-2);
}
.zone-tag{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:99px; font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
  align-self:flex-start;
}
.zone-tag.t1{background:rgba(46,111,105,0.15); color:#1f5048; border:1px solid rgba(46,111,105,0.3)}
.zone-tag.t2{background:rgba(60,120,200,0.12); color:#1d3a6e; border:1px solid rgba(60,120,200,0.25)}
.zone-tag.t3{background:rgba(255,200,60,0.18); color:#7a5a00; border:1px solid rgba(255,200,60,0.5)}
.zone-tag.t4{background:rgba(255,146,145,0.2); color:#a82a2a; border:1px solid rgba(255,146,145,0.5)}
.zone-info ul{margin:8px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px}
.zone-info li{
  display:grid; grid-template-columns: 22px 1fr; gap:10px; align-items:flex-start;
  font-size:14px; line-height:1.45;
}
.zone-info li::before{
  content:""; width:14px; height:14px; border-radius:4px;
  background:var(--ocean); margin-top:3px;
}
.zone-info.danger li::before{background:var(--coral)}
.zone-step{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px}
.zone-step .chip{
  cursor:pointer; padding:8px 12px; border-radius:10px; font-size:12px; font-weight:600;
  background: rgba(255,255,255,0.7); border:1px solid var(--stroke); color:var(--ink);
}
.zone-step .chip.active{background: var(--ink-2); color: var(--ocean); border-color: var(--ink-2)}
.zone-step .chip.danger{border-color: rgba(255,146,145,0.6)}
.zone-step .chip.danger.active{background: var(--coral); color:#3a0d0d; border-color:var(--coral)}

@keyframes pulseRed{
  0%,100%{ filter: drop-shadow(0 0 0 rgba(255,146,145,0)) }
  50%{ filter: drop-shadow(0 0 12px rgba(255,80,80,0.85)) }
}
.zone-poly{transition: opacity .25s ease, fill .25s ease}
.zone-poly.dim{opacity:0.55}
.zone-poly.danger{animation: pulseRed 1.6s ease-in-out infinite}

.legend{display:flex; gap:12px; flex-wrap:wrap; margin-top:10px}
.legend .li{display:flex; align-items:center; gap:6px; font-size:11px; color:var(--teal-deep)}
.legend .sw{width:12px;height:12px; border-radius:3px; border:1px solid var(--stroke)}

/* ---------- SCENE 3 — Bio-Scan ---------- */
.bio-layout{display:grid; grid-template-columns: 1.15fr 1fr; gap:24px}
.bio-stage{
  position:relative;
  background:
    radial-gradient(600px 500px at 50% 30%, rgba(63,249,217,0.18), transparent 65%),
    radial-gradient(500px 400px at 50% 110%, rgba(25,64,54,0.5), transparent 60%),
    linear-gradient(180deg, #0E2A24, #051914);
  border-radius: var(--radius-lg);
  border:1px solid rgba(63,249,217,0.25);
  overflow:hidden;
  min-height:560px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-2);
}
.bio-stage::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(63,249,217,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63,249,217,0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  pointer-events:none;
}
.bio-stage::after{
  content:""; position:absolute; left:10%; right:10%; height:2px; bottom:24%;
  background: linear-gradient(90deg, transparent, rgba(63,249,217,0.6), transparent);
  filter: blur(2px);
  animation: scan 4s ease-in-out infinite;
}
@keyframes scan{
  0%{ transform: translateY(-160px); opacity:.2 }
  50%{ transform: translateY(120px); opacity:1 }
  100%{ transform: translateY(-160px); opacity:.2 }
}
.body-wrap{
  position:relative;
  width: 320px; height: 520px;
  perspective: 1200px;
}
.body-stage{
  position:absolute; inset:0;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.body-stage img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain;
  filter: invert(1) hue-rotate(140deg) brightness(1.4) drop-shadow(0 0 12px rgba(63,249,217,0.45)) drop-shadow(0 0 30px rgba(63,249,217,0.25));
  user-select:none; pointer-events:none;
}
.body-stage .silhouette{
  position:absolute; inset:0;
  background: radial-gradient(closest-side at 50% 45%, rgba(63,249,217,0.18), transparent 70%);
  border-radius:50%;
}

.hotspot{
  position:absolute;
  width:32px; height:32px; border-radius:50%;
  background: rgba(63,249,217,0.25);
  border:2px solid var(--ocean);
  cursor:pointer;
  transform: translate(-50%, -50%);
  display:grid; place-items:center;
  transition: transform .2s ease, background .2s ease;
}
.hotspot::after{
  content:""; position:absolute; inset:-6px;
  border-radius:50%; border:2px solid rgba(63,249,217,0.5);
  animation: ringPulse 2s ease-in-out infinite;
}
@keyframes ringPulse{ 0%{transform:scale(0.8); opacity:0.9} 100%{transform:scale(1.6); opacity:0} }
.hotspot:hover, .hotspot.active{ background: var(--coral); border-color: var(--coral); transform: translate(-50%,-50%) scale(1.1) }
.hotspot .num{font-size:11px; font-weight:800; color:var(--ink-2)}

.bio-stage .controls{
  position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  display:flex; align-items:center; gap:10px;
  padding:8px; border-radius:99px;
  background: rgba(7,29,24,0.6); border:1px solid rgba(63,249,217,0.3);
  backdrop-filter: blur(10px);
}
.bio-stage .controls button{
  background:transparent; border:1px solid rgba(63,249,217,0.4); color:var(--ocean); cursor:pointer;
  width:36px; height:36px; border-radius:50%;
  display:grid; place-items:center;
  font-family:inherit; font-size:14px;
}
.bio-stage .controls button:hover{background: rgba(63,249,217,0.15)}
.bio-stage .controls .face{font-size:11px; color:var(--ocean); padding:0 8px; letter-spacing:0.14em; text-transform:uppercase; font-weight:700}

.scan-meta{
  position:absolute; top:18px; right:18px;
  display:flex; flex-direction:column; gap:6px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size:10.5px; color: rgba(63,249,217,0.85);
  letter-spacing:0.06em;
  text-align:right;
  z-index:3;
  pointer-events:none;
}
.scan-meta .row{display:flex; gap:8px; justify-content:flex-end}
.scan-meta .k{color: rgba(221,252,251,0.6)}
.scan-meta .v{color: var(--ocean)}

.bio-info{display:flex; flex-direction:column; gap:14px}
.bio-cards{display:flex; flex-direction:column; gap:10px}
.hazard{
  cursor:pointer;
  background: var(--glass-strong);
  border:1px solid var(--stroke);
  border-radius: 16px;
  padding:14px 16px;
  display:grid; grid-template-columns: 36px 1fr auto; align-items:center; gap:12px;
  transition: border-color .2s, background .2s, transform .2s;
}
.hazard:hover{border-color: rgba(63,249,217,0.6)}
.hazard.active{border-color: var(--coral); background: rgba(255,146,145,0.1)}
.hazard .num{
  width:30px; height:30px; border-radius:9px;
  display:grid; place-items:center;
  font-size:12px; font-weight:800;
  background: var(--ink-2); color: var(--ocean);
}
.hazard.active .num{background: var(--coral); color:#3a0d0d}
.hazard .ttl{font-size:14px; font-weight:600; color:var(--ink-2); margin:0; line-height:1.2}
.hazard .sub{font-size:12px; color:var(--teal-deep); margin-top:2px}
.hazard .arrow{font-size:14px; color:var(--teal-deep)}
.hazard-detail{
  background: var(--glass-strong);
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  padding:18px;
  font-size:13.5px; line-height:1.5;
}
.hazard-detail .label{font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--coral-deep); font-weight:700}

/* ---------- SCENE 4 — Magnetism Lab ---------- */
.lab-layout{display:grid; grid-template-columns: 1.3fr .9fr; gap:22px}
.lab-stage{
  position:relative;
  background: linear-gradient(180deg, #0F2D27 0%, #08201B 100%);
  border-radius: var(--radius-lg);
  border:1px solid rgba(63,249,217,0.18);
  overflow:hidden;
  height:560px;
  perspective:1200px;
  box-shadow: var(--shadow-2);
}
.lab-floor{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(63,249,217,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63,249,217,0.08) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: rotateX(58deg) translateY(40px);
  transform-origin: 50% 100%;
  mask-image: linear-gradient(to top, black 30%, transparent 90%);
}
.lab-magnet{
  position:absolute; left:50%; top:48%; transform:translate(-50%,-50%);
  width: 320px; height: auto; pointer-events:none; z-index:2;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.5));
}
.lab-magnet svg{width:100%; height:auto; display:block}
.magnet-field{
  position:absolute; left:50%; top:48%; transform:translate(-50%,-50%);
  width:520px; height:520px; border-radius:50%;
  background:
    radial-gradient(circle, rgba(63,249,217,0.2) 0%, transparent 50%);
  pointer-events:none;
  animation: fieldPulse 3s ease-in-out infinite;
}
@keyframes fieldPulse{ 0%,100%{transform:translate(-50%,-50%) scale(1); opacity:0.6} 50%{transform:translate(-50%,-50%) scale(1.15); opacity:1} }
.magnet-label{
  position:absolute; left:50%; top:14px; transform:translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size:11px; color:var(--ocean); letter-spacing:0.2em;
  background: rgba(7,29,24,0.6); border:1px solid rgba(63,249,217,0.3);
  padding:5px 12px; border-radius:99px; z-index:3;
}

.lab-item{
  position:absolute; cursor:pointer; user-select:none; z-index:4;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.4));
  transition: transform .15s ease, filter .2s ease;
}
.lab-item img{width:100%; height:auto; pointer-events:none; filter: brightness(0.95)}
.lab-item .ring{
  position:absolute; inset:-10px;
  border-radius: 50%;
  border:2px dashed rgba(63,249,217,0.6);
  animation: spin 8s linear infinite;
  pointer-events:none;
  opacity:0.85;
}
.lab-item:hover{filter: drop-shadow(0 0 18px rgba(63,249,217,0.7))}
.lab-item.secured{
  pointer-events:none;
}
.lab-item.secured .ring{border-color: rgba(63,249,217,0.9); border-style:solid; animation: none}
.lab-item.secured::after{
  content:"✓ SECURED";
  position:absolute; left:50%; top:-22px; transform:translateX(-50%);
  font-family:'JetBrains Mono', monospace; font-size:10px; font-weight:700; letter-spacing:0.16em;
  color: var(--ink-2); background: var(--ocean);
  padding:3px 8px; border-radius:99px; white-space:nowrap;
}
.lab-item.flying{
  pointer-events:none;
  transition: transform .55s cubic-bezier(.5,-0.2,.7,1), opacity .3s;
  z-index:5;
}
.clang{
  position:absolute; left:50%; top:48%; transform:translate(-50%,-50%) scale(0.5);
  font-family: 'Figtree', sans-serif; font-weight:900; font-style:italic;
  font-size: 80px; color: var(--coral);
  text-shadow: 0 0 30px rgba(255,80,80,0.8), 0 0 60px rgba(255,146,145,0.6);
  pointer-events:none; opacity:0; z-index:10;
  letter-spacing:-0.04em;
}
.clang.show{ animation: clangAnim .8s ease-out forwards }
@keyframes clangAnim{
  0%{ transform:translate(-50%,-50%) scale(0.3) rotate(-8deg); opacity:0 }
  30%{ transform:translate(-50%,-50%) scale(1.2) rotate(4deg); opacity:1 }
  60%{ transform:translate(-50%,-50%) scale(1) rotate(-2deg); opacity:1 }
  100%{ transform:translate(-50%,-50%) scale(0.95) rotate(0); opacity:0 }
}

.shake{ animation: shake .5s }
@keyframes shake{
  0%,100%{ transform: translate(0,0) }
  20%{ transform: translate(-6px, 4px) }
  40%{ transform: translate(8px, -3px) }
  60%{ transform: translate(-4px, 6px) }
  80%{ transform: translate(6px, -2px) }
}

.lab-hud{
  position:absolute; top:14px; left:14px; right:14px;
  display:flex; justify-content:space-between; align-items:center;
  font-family: 'JetBrains Mono', monospace; font-size:11px;
  color: rgba(221,252,251,0.85); letter-spacing:0.1em; z-index:6;
}
.lab-hud .timer{
  background: rgba(7,29,24,0.7); border:1px solid rgba(63,249,217,0.3);
  padding:6px 12px; border-radius:99px;
  color: var(--ocean); font-weight:600;
}
.lab-hud .timer.danger{color:var(--coral); border-color:var(--coral); animation: blink 0.6s ease-in-out infinite}
@keyframes blink{ 50%{opacity:.5} }
.lab-hud .score{display:flex; gap:8px; align-items:center}
.lab-hud .score .dot{
  width:10px; height:10px; border-radius:3px; background: rgba(63,249,217,0.2); border:1px solid rgba(63,249,217,0.5);
}
.lab-hud .score .dot.on{background: var(--ocean)}
.lab-hud .score .dot.miss{background: var(--coral); border-color: var(--coral)}

.lab-side{display:flex; flex-direction:column; gap:14px}
.lab-card{
  background: var(--glass-strong); border:1px solid var(--stroke);
  border-radius: var(--radius); padding:18px;
}
.briefing{
  background: var(--ink-2); color: var(--baby);
  border-radius: var(--radius); padding:18px;
  font-family: 'JetBrains Mono', monospace; font-size:12.5px; line-height:1.6;
}
.briefing .prompt{color: var(--ocean)}
.briefing .warn{color: var(--coral)}
.lab-list{margin:6px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px}
.lab-list li{display:grid; grid-template-columns: 18px 1fr auto; gap:8px; font-size:13px; color:var(--ink); align-items:center}
.lab-list li .check{width:14px; height:14px; border-radius:4px; border:1.5px solid var(--stroke-strong); display:grid; place-items:center; font-size:10px; color:var(--ink-2)}
.lab-list li.done .check{background:var(--ocean); border-color:var(--ocean)}
.lab-list li.miss .check{background:var(--coral); border-color:var(--coral); color:white}
.lab-list li .badge-mini{font-size:10px; padding:2px 7px; border-radius:99px; background:rgba(25,64,54,0.06); color:var(--teal-deep); font-weight:600; letter-spacing:.06em}

/* ---------- SCENE 5 — Clinical Decision ---------- */
.chat-layout{display:grid; grid-template-columns: 1fr .9fr; gap:24px; align-items:flex-start}
.chat-shell{
  background: var(--glass-strong);
  border:1px solid var(--stroke);
  border-radius: var(--radius-lg);
  overflow:hidden;
  display:flex; flex-direction:column;
  height: 600px;
  box-shadow: var(--shadow-2);
}
.chat-head{
  display:flex; align-items:center; gap:12px; padding:14px 18px;
  border-bottom:1px solid var(--stroke); background: rgba(255,255,255,0.5);
}
.chat-head .avatar{
  width:38px;height:38px;border-radius:50%; background: linear-gradient(135deg, #c8b39c, #8a6e54); color:white; display:grid; place-items:center; font-weight:700;
}
.chat-head .who{font-size:14px; font-weight:600; color:var(--ink-2); line-height:1.1}
.chat-head .who small{display:block; font-size:11px; color:var(--teal-deep); font-weight:500; margin-top:2px}
.chat-head .status{
  margin-left:auto; display:flex; align-items:center; gap:6px;
  font-size:11px; color:var(--teal-deep); padding:5px 10px; border-radius:99px;
  background: rgba(63,249,217,0.18); border:1px solid rgba(63,249,217,0.4);
}
.chat-head .status .dot{width:6px;height:6px;border-radius:50%; background:var(--ocean)}

.chat-body{flex:1; overflow:auto; padding:20px; display:flex; flex-direction:column; gap:12px; background: linear-gradient(180deg, rgba(255,255,255,0.4), rgba(221,252,251,0.4))}
.msg{
  max-width: 75%; padding:10px 14px; border-radius:16px; font-size:14px; line-height:1.45;
  animation: msgIn .35s ease both;
}
@keyframes msgIn{ from{opacity:0; transform: translateY(6px)} to{opacity:1; transform:none} }
.msg.them{align-self:flex-start; background: white; border:1px solid var(--stroke); border-top-left-radius:6px; color:var(--ink-2)}
.msg.you{align-self:flex-end; background: var(--ink-2); color: var(--baby); border-top-right-radius:6px}
.msg.system{align-self:center; background: rgba(255,146,145,0.18); border:1px solid rgba(255,146,145,0.5); color:var(--coral-deep); font-size:12px; font-weight:600; letter-spacing:0.06em; padding:6px 12px; border-radius:99px}
.msg .ts{font-size:10px; opacity:0.55; margin-top:4px; letter-spacing:0.04em}
.typing{align-self:flex-start; background:white; border:1px solid var(--stroke); padding:10px 14px; border-radius:16px; border-top-left-radius:6px; display:flex; gap:4px}
.typing span{width:6px;height:6px;border-radius:50%; background: var(--teal-deep); animation: typ 1.2s infinite ease-in-out}
.typing span:nth-child(2){animation-delay:.15s}
.typing span:nth-child(3){animation-delay:.3s}
@keyframes typ{ 0%,60%,100%{transform:translateY(0); opacity:.4} 30%{transform:translateY(-4px); opacity:1} }

.chat-foot{
  border-top:1px solid var(--stroke); background: rgba(255,255,255,0.6);
  padding:14px 16px;
}
.chat-foot .label{font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--teal-deep); font-weight:700; margin-bottom:8px}
.choices{display:flex; flex-direction:column; gap:8px}
.choice{
  text-align:left; cursor:pointer;
  background: white; border:1px solid var(--stroke);
  border-radius:12px; padding:10px 14px;
  font-family:inherit; font-size:13.5px; color:var(--ink-2); font-weight:500;
  transition: border-color .2s, background .2s, transform .15s;
  display:flex; gap:10px; align-items:center;
}
.choice:hover{border-color: var(--ink-2); transform: translateY(-1px)}
.choice .k{
  width:22px; height:22px; border-radius:6px; background: rgba(25,64,54,0.06); color: var(--ink-2);
  font-family: 'JetBrains Mono', monospace; font-size:11px; font-weight:700;
  display:grid; place-items:center; flex-shrink:0;
}

.decision-side{display:flex; flex-direction:column; gap:14px}
.scen-card{
  background: var(--glass-strong); border:1px solid var(--stroke);
  border-radius:var(--radius); padding:18px;
}
.scen-card .row{display:grid; grid-template-columns: 90px 1fr; gap:10px; padding:6px 0; font-size:13px; border-bottom: 1px dashed var(--stroke)}
.scen-card .row:last-child{border-bottom:0}
.scen-card .row .k{color:var(--teal-deep); font-weight:600; font-size:12px}
.scen-card .row .v{color:var(--ink-2)}
.audit{font-family:'JetBrains Mono', monospace; font-size:11.5px; line-height:1.7; color:var(--ink); background: rgba(255,255,255,0.5); border:1px dashed var(--stroke-strong); border-radius:12px; padding:10px 12px}
.audit .ok{color:#1f5048}
.audit .bad{color:var(--coral-deep)}

/* Critical warning overlay */
.warning-overlay{
  position:fixed; inset:0; z-index:100;
  background: radial-gradient(circle at 50% 50%, rgba(255,80,80,0.35), rgba(58,13,13,0.85));
  backdrop-filter: blur(10px);
  display:none; align-items:center; justify-content:center;
  animation: fadeIn .3s ease;
}
.warning-overlay.show{display:flex}
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.warning-card{
  max-width:520px; padding:36px;
  background: rgba(58,13,13,0.85);
  border:2px solid var(--coral);
  border-radius: var(--radius-lg);
  color: white;
  text-align:center;
  animation: shakeWarn .5s 2;
}
@keyframes shakeWarn{
  0%,100%{ transform: translateX(0) }
  25%{ transform: translateX(-8px) }
  75%{ transform: translateX(8px) }
}
.warning-card .label{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:0.2em;
  background: var(--coral); color:#3a0d0d; padding:6px 14px; border-radius:99px; font-weight:700;
}
.warning-card h2{font-size:34px; margin:18px 0 10px; letter-spacing:-0.01em}
.warning-card p{font-size:15px; line-height:1.5; opacity:.92; margin:0 0 22px}
.warning-card .actions{display:flex; gap:10px; justify-content:center}

/* ---------- Completion ---------- */
.complete-card{
  text-align:center; padding:48px 36px;
  background:
    radial-gradient(500px 350px at 50% 0%, rgba(63,249,217,0.35), transparent 65%),
    var(--glass-strong);
}
.complete-card .seal{
  width:100px; height:100px; border-radius:50%; margin: 0 auto 18px;
  background: conic-gradient(from 0deg, var(--ocean), var(--teal), var(--ink-2), var(--ocean));
  display:grid; place-items:center; color: var(--ink-2); font-weight:800; font-size:34px;
  box-shadow: 0 20px 50px -10px rgba(25,64,54,0.4);
}

/* ---------- Tweak modifiers ---------- */
.objectives{
  margin: 18px 0 22px; padding: 18px 20px;
  background: var(--glass-strong); border:1px solid var(--stroke);
  border-radius: 14px;
}
.obj-eyebrow{
  font-family: var(--mono); font-size:11px; letter-spacing:6px;
  color: var(--teal-deep); text-transform:uppercase; margin-bottom:10px; font-weight:600;
}
.obj-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; counter-reset:none }
.obj-list li{
  display:flex; gap:12px; align-items:flex-start;
  font-family: 'Figtree', sans-serif; font-weight:600; font-size:14px;
  line-height:1.45; color:var(--ink-2);
}
.obj-num{
  flex:0 0 30px; font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:1px; color:var(--ocean-deep);
  background: rgba(63,249,217,0.18);
  border:1px solid rgba(63,249,217,0.35);
  padding: 4px 6px; border-radius: 6px; text-align:center;
  margin-top:1px;
}
.safety-banner{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:#79C6C2; color:#0E2A24;
  font-family:'Figtree', sans-serif; font-weight:800;
  font-size:42px; letter-spacing:8px;
  padding:18px 48px; border-radius:14px;
  box-shadow: 0 18px 60px rgba(121,198,194,0.55), 0 0 0 1px rgba(255,255,255,0.4) inset;
  z-index:9; pointer-events:none;
  animation: bannerIn 400ms cubic-bezier(.2,.9,.3,1.4) both;
}
@keyframes bannerIn{
  from{ opacity:0; transform:translate(-50%,-50%) scale(0.8) }
  to{ opacity:1; transform:translate(-50%,-50%) scale(1) }
}

/* Login modal */
.login-overlay{
  position:fixed; inset:0; z-index:1000;
  background: radial-gradient(1200px 800px at 50% 40%, rgba(25,64,54,0.35) 0%, rgba(5,25,20,0.85) 70%);
  display:flex; align-items:center; justify-content:center;
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.login-card{
  width: min(460px, 92vw);
  background: rgba(242,251,249,0.82);
  border: 1px solid rgba(63,249,217,0.45);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(5,25,20,0.45), 0 0 0 1px rgba(255,255,255,0.5) inset;
  padding: 32px 30px;
  backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
}
.login-card .kicker{ margin-bottom:10px }
.login-card h2{ margin:0 0 10px; font-family:'Figtree',sans-serif; font-weight:700; font-size:24px; color:var(--ink-2); letter-spacing:-0.3px }
.login-card p{ margin:0 0 18px; font-size:13.5px; color:var(--ink); line-height:1.5 }
.login-card input{
  width:100%; padding:14px 16px; font-size:16px;
  font-family:'Figtree',sans-serif; font-weight:600;
  border-radius:12px; border:1px solid var(--stroke);
  background:rgba(255,255,255,0.7); color:var(--ink-2);
  outline:none; transition:border-color 200ms;
}
.login-card input:focus{ border-color: var(--ocean) }

/* Certificate (HTML render) */
.cert-stage{
  margin: 28px auto 0; padding: 18px;
  background: rgba(14,42,36,0.04); border:1px dashed var(--stroke);
  border-radius: 14px; max-width: 1136px;
  overflow: hidden;
}
.cert-fit{
  width: 100%;
  position: relative;
  /* height set dynamically via JS to match scaled cert */
}
.cert{
  position: absolute; top:0; left:0;
  width: 1100px; height: 850px;
  flex-shrink: 0;
  transform-origin: top left;
  /* transform set dynamically via JS */
  background:
    radial-gradient(700px 500px at 50% 50%, rgba(63,249,217,0.18) 0%, transparent 60%),
    linear-gradient(135deg, #0E2A24 0%, #194036 55%, #0A1F1A 100%);
  color:#DDFCFB;
  font-family: 'Figtree', sans-serif;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(5,25,20,0.45);
}
.cert::before{
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(63,249,217,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(63,249,217,0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events:none;
}
.cert-frame{ position:absolute; inset:30px; border:1px solid rgba(63,249,217,0.55); border-radius:14px; pointer-events:none }
.cert-frame.inner{ inset:42px; border-color: rgba(121,198,194,0.35); border-radius:10px }
.cert-corner{ position:absolute; width:50px; height:50px; pointer-events:none }
.cert-corner.tl{ top:18px; left:18px }
.cert-corner.tr{ top:18px; right:18px }
.cert-corner.bl{ bottom:18px; left:18px }
.cert-corner.br{ bottom:18px; right:18px }

.cert-head-l, .cert-head-r{
  position:absolute; top:80px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 4px; color: #3FF9D9;
}
.cert-head-l{ left:96px }
.cert-head-r{ right:96px }

.cert-mark{ position:absolute; top:130px; left:50%; transform:translateX(-50%); width:80px; text-align:center }
.cert-mark svg{ width:80px; height:80px }
.cert-mark-label{ font-weight:700; font-size:14px; letter-spacing:5px; color:#DDFCFB; margin-top:6px }

.cert-eyebrow{
  position:absolute; top:262px; left:0; right:0; text-align:center;
  font-family:'JetBrains Mono',monospace; font-size:13px; letter-spacing:7px; color:#79C6C2;
}
.cert-title{
  position:absolute; top:300px; left:0; right:0; text-align:center;
  font-weight:600; font-size:64px; letter-spacing:-1.5px;
  background: linear-gradient(90deg,#DDFCFB,#3FF9D9); -webkit-background-clip:text; background-clip:text; color:transparent;
  line-height:1.05;
}
.cert-subtitle{
  position:absolute; top:380px; left:0; right:0; text-align:center;
  font-size:18px; color:#DDFCFB; opacity:0.85;
}
.cert-awarded{
  position:absolute; top:445px; left:0; right:0; text-align:center;
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:5px; color:#79C6C2;
}
.cert-name{
  position:absolute; top:470px; left:0; right:0; text-align:center;
  font-weight:600; font-size:54px; color:#FFFFFF; letter-spacing:-0.5px;
}
.cert-rule{
  position:absolute; top:550px; left:280px; right:280px; height:1px;
  background: rgba(63,249,217,0.55);
}
.cert-opid{
  position:absolute; top:560px; left:0; right:0; text-align:center;
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:4px; color:#79C6C2;
}
.cert-body{
  position:absolute; top:600px; left:0; right:0; text-align:center;
  font-size:14px; color:#DDFCFB; opacity:0.9; line-height:1.5;
}
.cert-checks{
  position:absolute; top:680px; left:60px; right:60px;
  display:flex; justify-content:space-around;
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:2px; color:#3FF9D9;
}
.cert-seal{
  position:absolute; left:50%; transform:translateX(-50%); bottom:60px;
  width:80px; height:80px; text-align:center;
}
.cert-seal svg{ width:80px; height:80px; position:absolute; inset:0 }
.cert-seal .seal-top{ position:absolute; top:18px; left:0; right:0; font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:2px; color:#3FF9D9 }
.cert-seal .seal-mid{ position:absolute; top:30px; left:0; right:0; font-weight:700; font-size:18px; color:#3FF9D9 }
.cert-seal .seal-bot{ position:absolute; bottom:18px; left:0; right:0; font-family:'JetBrains Mono',monospace; font-size:7px; letter-spacing:2px; color:#3FF9D9 }
.cert-sigL, .cert-sigR{ position:absolute; bottom:74px; width:280px; text-align:center }
.cert-sigL{ left:80px }
.cert-sigR{ right:80px }
.cert-rule-sig{ height:1px; background: rgba(121,198,194,0.55); margin-bottom:10px }
.cert-sig-name{ font-size:15px; color:#DDFCFB }
.cert-sig-role{ font-size:11px; color:#79C6C2; margin-top:3px }
.cert-verify{
  position:absolute; bottom:30px; left:0; right:0; text-align:center;
  font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:3px; color:#3FF9D9; opacity:0.65;
}

.logout-btn{
  display:inline-block; margin-left:10px;
  background:transparent; border:1px solid var(--stroke);
  color: var(--teal-deep); font-family: var(--mono);
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px; cursor:pointer;
  transition: all 150ms;
}
.logout-btn:hover{ color: var(--ink-2); border-color: var(--ocean); background: rgba(63,249,217,0.1) }

body.no-pulse .zone-poly.danger{ animation: none !important }
body.no-pulse .magnet-field{ animation: none !important }
body.no-sidebar .app{ grid-template-columns: 1fr }
body.no-sidebar .sidebar{ display:none }
body.compact .main{ padding: 18px 22px 60px }
body.compact .card-pad, body.compact .cmd{ padding: 22px }
body.compact .h1, body.compact .cmd h1{ font-size: 38px }
body.compact .lead{ font-size: 14px }

/* ---------- responsive trims ---------- */
@media (max-width: 1080px){
  .app{grid-template-columns: 220px 1fr}
  .cmd-grid, .zone-layout, .bio-layout, .lab-layout, .chat-layout{grid-template-columns: 1fr}
  .portal{margin: 0 auto}
  .cmd h1{font-size:46px}
}
@media (max-width: 720px){
  .app{grid-template-columns: 1fr}
  .sidebar{position:relative; height:auto}
  .main{padding:18px}
}