/* ============================================================
   PLANT CELL EXPLORER — holographic lab design system
   Palette: deep teal void, holo green #57f0b8, ion blue #5ad7ff,
   violet #9d8cff (processes), amber #ffc36b (osmosis), magenta #ff7ad9 (animal)
   ============================================================ */

:root{
  --bg-0:#020a0e; --bg-1:#04141a; --bg-2:#062028;
  --glass:rgba(8,28,36,.78);
  --glass-soft:rgba(8,28,36,.55);
  --line:rgba(90,215,255,.22);
  --line-bright:rgba(90,215,255,.55);
  --green:#57f0b8; --green-dim:rgba(87,240,184,.14);
  --blue:#5ad7ff; --blue-dim:rgba(90,215,255,.12);
  --violet:#9d8cff; --amber:#ffc36b; --magenta:#ff7ad9; --red:#ff7a8a;
  --ink:#dcf6ff; --ink-2:#9fc6d2; --ink-3:#5f8794;
  --font-display:'Orbitron',ui-sans-serif,system-ui;
  --font-body:'Inter',ui-sans-serif,system-ui,-apple-system;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --r-lg:14px; --r-md:10px; --r-sm:7px;
  --glow-green:0 0 18px rgba(87,240,184,.28),0 0 46px rgba(87,240,184,.12);
  --glow-blue:0 0 18px rgba(90,215,255,.30),0 0 46px rgba(90,215,255,.12);
  --topbar-h:62px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 50% 30%,rgba(14,64,66,.35),transparent 60%),
    radial-gradient(900px 500px at 85% 90%,rgba(20,52,88,.28),transparent 60%),
    linear-gradient(180deg,#041016 0%,#020a0e 55%,#02080b 100%);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* global hologram scanline + shimmer layers */
body::before{
  content:"";position:fixed;inset:0;z-index:60;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(140,255,235,.014) 2px 4px);
  mix-blend-mode:screen;
}
body::after{
  content:"";position:fixed;inset:0;z-index:61;pointer-events:none;opacity:.5;
  background:radial-gradient(120% 90% at 50% 45%,transparent 55%,rgba(1,6,9,.55) 100%);
}
@keyframes holo-shimmer{0%{transform:translateY(-30vh)}100%{transform:translateY(130vh)}}
body .global-shimmer{position:fixed;left:0;right:0;height:26vh;z-index:59;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(120,240,255,.028) 45%,rgba(120,240,255,.05) 50%,rgba(120,240,255,.028) 55%,transparent);
  animation:holo-shimmer 9s linear infinite;}
.mono{font-family:var(--font-mono)}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input{font:inherit;color:inherit}
small{font-size:.72em}
sub,sup{font-size:.68em}

/* ============================ BOOT ============================ */
#boot{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(900px 600px at 50% 40%,#06222a,#020a0e 75%);
  transition:opacity .7s ease,visibility .7s;}
#boot.done{opacity:0;visibility:hidden}
.boot-inner{width:min(420px,84vw);text-align:center}
.boot-mark{width:72px;height:72px;margin:0 auto 18px;filter:drop-shadow(0 0 14px rgba(87,240,184,.5));animation:boot-pulse 2.2s ease-in-out infinite}
@keyframes boot-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.boot-title{font-family:var(--font-display);font-weight:900;font-size:22px;letter-spacing:.34em;color:var(--ink);text-shadow:0 0 24px rgba(90,215,255,.45)}
.boot-sub{margin-top:8px;color:var(--ink-2);font-size:13px;letter-spacing:.12em}
.boot-sub em{color:var(--green);font-style:italic;font-family:var(--font-body)}
.boot-bar{margin:26px auto 12px;height:4px;width:100%;border-radius:99px;background:rgba(90,215,255,.12);overflow:hidden}
.boot-bar-fill{height:100%;width:0%;border-radius:99px;background:linear-gradient(90deg,var(--green),var(--blue));box-shadow:var(--glow-green);transition:width .3s ease}
.boot-status{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);letter-spacing:.08em;min-height:16px}

/* ============================ APP FRAME ============================ */
.app{position:fixed;inset:0;display:flex;flex-direction:column;z-index:10}
.app[data-booting="true"]{visibility:hidden}

/* ---------- top bar ---------- */
.topbar{height:var(--topbar-h);flex:0 0 auto;display:flex;align-items:center;gap:18px;padding:0 18px;
  background:linear-gradient(180deg,rgba(7,24,31,.92),rgba(7,24,31,.55));
  border-bottom:1px solid var(--line);backdrop-filter:blur(10px);position:relative;z-index:40;}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(87,240,184,.5),rgba(90,215,255,.5),transparent);}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-mark{width:40px;height:40px;flex:0 0 auto;filter:drop-shadow(0 0 10px rgba(87,240,184,.4))}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-title{font-family:var(--font-display);font-weight:700;font-size:15.5px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.brand-tag{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.24em;color:var(--ink-3);margin-top:3px}

.tabs{display:flex;align-items:center;gap:4px;margin:0 auto;position:relative;padding:4px;border-radius:12px;
  background:rgba(4,16,22,.6);border:1px solid var(--line);}
.tab{position:relative;z-index:2;display:flex;align-items:center;gap:8px;padding:9px 18px;border-radius:9px;
  font-family:var(--font-display);font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);transition:color .25s,background .25s,box-shadow .3s,transform .18s;}
.tab svg{width:17px;height:17px;opacity:.85}
.tab:hover{color:var(--ink);background:rgba(90,215,255,.07)}
.tab:active{transform:scale(.96)}
.tab.is-active{color:#03231b;background:linear-gradient(135deg,var(--green),#79e6ff);box-shadow:var(--glow-green),inset 0 0 0 1px rgba(255,255,255,.25);font-weight:700}
.tab:focus-visible,.seg-btn:focus-visible,.ctl:focus-visible,.btn:focus-visible,.icon-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

.topbar-status{display:flex;align-items:center;gap:8px}
.status-chip{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:99px;font-size:10px;letter-spacing:.14em;
  border:1px solid var(--line);color:var(--ink-2);background:rgba(8,28,36,.5)}
.status-chip .dot{width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:blink 2.4s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
.status-species{color:var(--green);border-color:rgba(87,240,184,.35)}

/* ---------- tab panels ---------- */
.tabpanel{flex:1;min-height:0;position:relative;display:none}
.tabpanel.is-active{display:flex;animation:panel-in .45s cubic-bezier(.22,.9,.3,1)}
@keyframes panel-in{from{opacity:0;transform:translateY(10px) scale(.995)}to{opacity:1;transform:none}}

/* ---------- generic panels ---------- */
.panel{position:relative;background:var(--glass);border:1px solid var(--line);border-radius:var(--r-lg);
  backdrop-filter:blur(14px);box-shadow:0 14px 40px rgba(0,0,0,.35),inset 0 0 30px rgba(20,80,90,.07);}
.panel::before,.panel::after{content:"";position:absolute;width:14px;height:14px;pointer-events:none;opacity:.9}
.panel::before{top:-1px;left:-1px;border-top:1.5px solid var(--green);border-left:1.5px solid var(--green);border-top-left-radius:var(--r-lg)}
.panel::after{bottom:-1px;right:-1px;border-bottom:1.5px solid var(--blue);border-right:1.5px solid var(--blue);border-bottom-right-radius:var(--r-lg)}
.panel-header{display:flex;align-items:baseline;justify-content:space-between;padding:14px 16px 10px;border-bottom:1px solid rgba(90,215,255,.14)}
.panel-header h2{font-family:var(--font-display);font-size:12.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.panel-kicker{font-size:9.5px;letter-spacing:.18em;color:var(--ink-3)}

/* ============================ STRUCTURE TAB ============================ */
#panel-structure{display:none;gap:14px;padding:14px}
#panel-structure.is-active{display:grid;grid-template-columns:308px minmax(0,1fr) 336px}

.sidepanel{display:flex;flex-direction:column;gap:14px;min-height:0;overflow:hidden}
.sidepanel .panel{display:flex;flex-direction:column;min-height:0}
.panel-dossier{flex:0 1 auto;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(90,215,255,.3) transparent}
.panel-controls{flex:0 0 auto}
.sidepanel::-webkit-scrollbar,.library-list::-webkit-scrollbar,.dossier-body::-webkit-scrollbar{width:6px}
.sidepanel::-webkit-scrollbar-thumb,.library-list::-webkit-scrollbar-thumb,.dossier-body::-webkit-scrollbar-thumb{background:rgba(90,215,255,.25);border-radius:99px}

.dossier-body{padding:14px 16px 16px;overflow-y:auto}
.dossier-name{font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:.04em;line-height:1.25}
.dossier-latin{font-style:italic;color:var(--green);font-size:13px;margin-top:3px;font-family:Georgia,serif;letter-spacing:.02em}
.dossier-aka{font-family:var(--font-mono);font-size:10px;color:var(--ink-3);letter-spacing:.08em;margin-top:4px}
.dossier-divider{height:1px;margin:12px 0;background:linear-gradient(90deg,rgba(87,240,184,.4),transparent)}
.dossier-sec{margin-bottom:12px}
.dossier-sec h3{font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.22em;color:var(--blue);margin-bottom:5px;text-transform:uppercase}
.dossier-sec p{font-size:12.5px;line-height:1.55;color:var(--ink-2)}
.stat-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:5.5px 0;border-bottom:1px dashed rgba(90,215,255,.12)}
.stat-row:last-child{border-bottom:none}
.stat-k{font-size:11.5px;color:var(--ink-2)}
.stat-v{font-family:var(--font-mono);font-size:11.5px;color:var(--ink);text-align:right;white-space:nowrap}
.stat-v.hl{color:var(--green)}
.field-note{font-size:11.5px;line-height:1.55;color:var(--ink-2);border-left:2px solid rgba(87,240,184,.4);padding-left:10px}
.field-note b{color:var(--ink)}

/* stage toggles */
.stage-toggles{padding:12px 16px 14px;display:flex;flex-direction:column;gap:11px}
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.toggle-label{font-size:12px;color:var(--ink-2);letter-spacing:.04em}
.seg{display:inline-flex;background:rgba(4,16,22,.65);border:1px solid var(--line);border-radius:8px;padding:2.5px;gap:2px}
.seg-btn{padding:4.5px 10px;border-radius:6px;font-size:10.5px;letter-spacing:.05em;color:var(--ink-2);transition:all .22s;font-family:var(--font-mono)}
.seg-btn:hover{color:var(--ink)}
.seg-btn.is-active{color:#01241c;background:linear-gradient(135deg,var(--green),#7ce9ff);font-weight:600;box-shadow:0 0 12px rgba(87,240,184,.35)}
.seg-btn.compact{padding:4px 8px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:8px 14px;border-radius:9px;
  border:1px solid var(--line-bright);color:var(--ink);font-size:12px;letter-spacing:.06em;
  background:linear-gradient(180deg,rgba(90,215,255,.10),rgba(90,215,255,.03));transition:all .22s}
.btn:hover{background:linear-gradient(180deg,rgba(90,215,255,.2),rgba(90,215,255,.08));box-shadow:var(--glow-blue);transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.btn-toggle{justify-content:flex-start;width:100%;text-transform:uppercase;font-family:var(--font-display);font-size:11px;font-weight:500;letter-spacing:.14em}
.btn-toggle svg{width:16px;height:16px}
.btn-toggle[aria-pressed="true"]{border-color:rgba(87,240,184,.65);background:linear-gradient(180deg,rgba(87,240,184,.16),rgba(87,240,184,.05));color:var(--green);box-shadow:var(--glow-green)}
.btn-state{margin-left:auto;font-size:9.5px;letter-spacing:.16em;color:var(--ink-3)}
.btn-toggle[aria-pressed="true"] .btn-state{color:var(--green)}
.hint-text{font-size:10.5px;color:var(--ink-3);line-height:1.5;letter-spacing:.02em}

/* ---------- stage ---------- */
.stage-wrap{min-width:0;min-height:0;display:flex}
.stage-frame{position:relative;flex:1;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:radial-gradient(90% 90% at 50% 42%,#07333c 0%,#04222b 48%,#020d13 100%);
  box-shadow:inset 0 0 80px rgba(0,0,0,.5),0 18px 50px rgba(0,0,0,.4);}
.stage-frame::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(130,255,235,.016) 3px 6px);}
#stageCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
#stageCanvas.grabbing{cursor:grabbing}
#stageCanvas.pick{cursor:pointer}
.leader-svg{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none;overflow:visible}
.label-layer{position:absolute;inset:0;z-index:7;pointer-events:none;overflow:hidden}
.stage-caption{position:absolute;top:12px;left:14px;z-index:8;font-size:9.5px;letter-spacing:.22em;color:rgba(160,220,232,.55);pointer-events:none}

.org-label{position:absolute;transform:translate(-50%,-100%);pointer-events:auto;cursor:pointer;
  background:rgba(5,20,26,.82);border:1px solid rgba(90,215,255,.35);border-radius:7px;padding:4px 9px 4.5px;
  backdrop-filter:blur(6px);white-space:nowrap;transition:opacity .25s,border-color .25s,box-shadow .25s,transform .18s;}
.org-label .ol-name{font-family:var(--font-display);font-size:9.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.org-label .ol-sub{font-family:var(--font-mono);font-size:8.5px;color:var(--ink-3);letter-spacing:.06em;margin-top:1px}
.org-label:hover{border-color:var(--green);box-shadow:var(--glow-green)}
.org-label.is-selected{border-color:var(--green);box-shadow:var(--glow-green);color:#eafff6}
.org-label.is-selected .ol-name{color:var(--green)}
.org-label.far-side{opacity:.42}
.org-label.hidden-lbl{opacity:0;pointer-events:none;transform:translate(-50%,-100%) translateY(6px)}

/* cross-section HUD */
.stage-hud{position:absolute;left:14px;bottom:14px;z-index:8;background:rgba(5,20,26,.78);border:1px solid rgba(87,240,184,.3);
  border-radius:10px;padding:10px 12px;backdrop-filter:blur(8px);animation:panel-in .4s ease}
.hud-title{font-size:9px;letter-spacing:.24em;color:var(--green);margin-bottom:7px}
.layer-stack{list-style:none;display:flex;flex-direction:column;gap:5px}
.layer-stack li{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--ink-2)}
.layer-stack .lw{width:34px;height:7px;border-radius:2px;flex:0 0 auto;box-shadow:0 0 8px currentColor;opacity:.9}
.layer-stack .lz{font-family:var(--font-mono);font-size:9.5px;color:var(--ink-3);margin-left:auto}

/* control cluster */
.control-cluster{position:absolute;right:14px;bottom:14px;z-index:9;display:flex;flex-direction:column;gap:8px;padding:9px;
  background:rgba(5,20,26,.72);border:1px solid var(--line);border-radius:13px;backdrop-filter:blur(10px);}
.ctl{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(90,215,255,.25);color:var(--ink-2);background:rgba(90,215,255,.05);transition:all .2s;position:relative}
.ctl svg{width:19px;height:19px}
.ctl:hover{color:var(--ink);border-color:var(--line-bright);box-shadow:var(--glow-blue);background:rgba(90,215,255,.12)}
.ctl:active{transform:scale(.94)}
.ctl[aria-pressed="true"]{color:var(--green);border-color:rgba(87,240,184,.6);box-shadow:var(--glow-green)}
.ctl:disabled{opacity:.35;cursor:not-allowed;box-shadow:none}
.ctl-play .ic-pause{display:none}
.playing .ctl-play .ic-play{display:none}
.playing .ctl-play .ic-pause{display:block}

/* info card */
.info-card{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:10;width:min(480px,86%);
  background:linear-gradient(160deg,rgba(9,32,40,.94),rgba(6,22,28,.94));border:1px solid var(--line-bright);
  border-radius:14px;padding:15px 17px 13px;backdrop-filter:blur(14px);
  box-shadow:0 18px 50px rgba(0,0,0,.5),var(--glow-blue);animation:card-in .38s cubic-bezier(.2,.9,.25,1.15)}
@keyframes card-in{from{opacity:0;transform:translateX(-50%) translateY(18px) scale(.96)}to{opacity:1;transform:translateX(-50%)}}
.info-card[hidden]{display:none}
.info-accent{position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:99px;background:var(--green);box-shadow:0 0 10px var(--green)}
.info-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.info-kicker{font-size:9px;letter-spacing:.26em;color:var(--blue)}
.info-title{font-family:var(--font-display);font-size:16.5px;font-weight:700;letter-spacing:.06em;margin-top:3px}
.info-latin{font-size:9.5px;color:var(--ink-3);letter-spacing:.1em;margin-top:2px}
.icon-btn{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--ink-3);border:1px solid transparent;transition:all .2s}
.icon-btn svg{width:15px;height:15px}
.icon-btn:hover{color:var(--ink);border-color:var(--line);background:rgba(90,215,255,.08)}
.info-desc{font-size:12.5px;line-height:1.6;color:var(--ink-2);margin:10px 0 10px}
.info-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:6px;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;
  background:rgba(90,215,255,.07);border:1px solid rgba(90,215,255,.2);color:var(--ink-2)}
.chip .cdot{width:5px;height:5px;border-radius:50%;background:var(--blue);box-shadow:0 0 6px var(--blue)}
.chip.green{border-color:rgba(87,240,184,.3);background:rgba(87,240,184,.07)}
.chip.green .cdot{background:var(--green);box-shadow:0 0 6px var(--green)}
.chip.amber .cdot{background:var(--amber);box-shadow:0 0 6px var(--amber)}
.chip.violet .cdot{background:var(--violet);box-shadow:0 0 6px var(--violet)}
.chip.magenta .cdot{background:var(--magenta);box-shadow:0 0 6px var(--magenta)}
.info-actions{display:flex;gap:8px}
.btn-mini{padding:6.5px 12px;border-radius:8px;font-size:11px;border:1px solid var(--line-bright);
  background:linear-gradient(180deg,rgba(90,215,255,.12),rgba(90,215,255,.04));transition:all .2s;letter-spacing:.04em}
.btn-mini:hover{box-shadow:var(--glow-blue);transform:translateY(-1px)}
.btn-ghost{border-color:rgba(160,220,232,.25);background:transparent;color:var(--ink-2)}
.btn-ghost:hover{color:var(--ink)}

/* diff strip */
.diff-strip{position:absolute;top:12px;right:14px;z-index:9;max-width:46%;display:flex;align-items:center;gap:10px;
  background:rgba(5,20,26,.78);border:1px solid rgba(157,140,255,.35);border-radius:11px;padding:8px 12px;backdrop-filter:blur(8px);
  animation:panel-in .4s ease}
.diff-title{font-size:8.5px;letter-spacing:.2em;color:var(--violet);white-space:nowrap}
.diff-chips{display:flex;flex-wrap:wrap;gap:5px}
.diff-chip{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.04em;padding:3.5px 8px;border-radius:6px;
  border:1px solid rgba(157,140,255,.3);color:var(--ink-2);transition:all .22s}
.diff-chip .tag{font-weight:600}
.diff-chip .tag.plant{color:var(--green)}
.diff-chip .tag.animal{color:var(--magenta)}
.diff-chip .tag.both{color:var(--blue)}
.diff-chip:hover,.diff-chip.pulsing{border-color:var(--violet);box-shadow:0 0 12px rgba(157,140,255,.35);color:var(--ink)}

/* ---------- library ---------- */
.panel-library{flex:1 1 auto;min-height:0}
.library-search{display:flex;align-items:center;gap:9px;margin:11px 14px 4px;padding:7px 11px;border-radius:9px;
  background:rgba(4,16,22,.6);border:1px solid var(--line)}
.library-search svg{width:14px;height:14px;color:var(--ink-3);flex:0 0 auto}
.library-search input{flex:1;background:none;border:none;outline:none;font-size:12px;color:var(--ink);letter-spacing:.02em}
.library-search input::placeholder{color:var(--ink-3)}
.library-list{flex:1;overflow-y:auto;padding:9px 10px 12px;display:flex;flex-direction:column;gap:3px;min-height:0}
.lib-group{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.24em;color:var(--ink-3);padding:10px 6px 5px}
.lib-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;border:1px solid transparent;transition:all .2s;cursor:pointer;text-align:left;width:100%}
.lib-item:hover{background:rgba(90,215,255,.06);border-color:var(--line)}
.lib-item.is-selected{background:linear-gradient(90deg,rgba(87,240,184,.1),rgba(90,215,255,.06));border-color:rgba(87,240,184,.45);box-shadow:0 0 14px rgba(87,240,184,.15)}
.lib-dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 7px currentColor}
.lib-name{font-size:12.5px;color:var(--ink);flex:1;letter-spacing:.02em}
.lib-size{font-family:var(--font-mono);font-size:9px;color:var(--ink-3);white-space:nowrap}
.lib-locate{width:24px;height:24px;border-radius:7px;display:none;align-items:center;justify-content:center;color:var(--blue);border:1px solid rgba(90,215,255,.3)}
.lib-item:hover .lib-locate,.lib-item.is-selected .lib-locate{display:flex}
.lib-locate:hover{box-shadow:var(--glow-blue)}
.lib-locate svg{width:12px;height:12px}
.library-empty{padding:22px;text-align:center;color:var(--ink-3);font-size:12px}
.empty-glyph{font-size:26px;margin-bottom:6px;color:rgba(90,215,255,.4)}

.panel-detail{flex:0 0 auto;max-height:56%;animation:panel-in .35s ease}
.panel-detail[hidden]{display:none}
.detail-body{padding:13px 16px 15px;overflow-y:auto}
.detail-body p{font-size:12.5px;line-height:1.62;color:var(--ink-2);margin-bottom:9px}
.detail-body .fact-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:10px 0}
.detail-body .fact{background:rgba(90,215,255,.05);border:1px solid rgba(90,215,255,.14);border-radius:8px;padding:8px 10px}
.detail-body .fact .fk{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.18em;color:var(--ink-3);margin-bottom:3px}
.detail-body .fact .fv{font-family:var(--font-mono);font-size:12px;color:var(--ink)}
.detail-body .fact .fv.hl{color:var(--green)}

/* ============================ PROCESSES TAB ============================ */
.process-grid{flex:1;min-width:0;min-height:0;display:grid;grid-template-columns:360px minmax(0,1fr);gap:14px;padding:14px}
.proc-narrative{display:flex;flex-direction:column;min-height:0;overflow-y:auto}
.equation{margin:12px 14px 4px;padding:10px 12px;border-radius:9px;font-size:12px;letter-spacing:.04em;color:var(--ink);
  background:rgba(157,140,255,.06);border:1px solid rgba(157,140,255,.25);text-align:center}
.eq-light{color:#ffe9a8;text-shadow:0 0 10px rgba(255,220,120,.5)}
.step-list{list-style:none;padding:10px 14px;display:flex;flex-direction:column;gap:6px}
.step-item{display:flex;gap:11px;padding:10px 12px;border-radius:10px;border:1px solid transparent;cursor:pointer;transition:all .25s;position:relative}
.step-item:hover{background:rgba(157,140,255,.05)}
.step-item.is-current{background:linear-gradient(90deg,rgba(157,140,255,.12),transparent);border-color:rgba(157,140,255,.4);box-shadow:0 0 16px rgba(157,140,255,.15)}
.step-item.is-done{opacity:.75}
.step-num{width:24px;height:24px;flex:0 0 auto;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:10.5px;border:1px solid rgba(157,140,255,.4);color:var(--violet);margin-top:1px}
.step-item.is-current .step-num{background:var(--violet);color:#150e35;box-shadow:0 0 12px rgba(157,140,255,.6);font-weight:600}
.step-item.is-done .step-num{border-color:rgba(87,240,184,.5);color:var(--green)}
.step-name{font-size:12.5px;font-weight:600;color:var(--ink);letter-spacing:.02em}
.step-desc{font-size:11px;line-height:1.5;color:var(--ink-2);margin-top:2px}
.ledger{margin-top:auto;padding:12px 14px 15px;border-top:1px solid rgba(157,140,255,.16)}
.ledger-title{font-size:9px;letter-spacing:.24em;color:var(--violet);margin-bottom:9px}
.ledger-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.ledger-cell{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;border-radius:8px;
  border:1px solid rgba(90,215,255,.15);background:rgba(90,215,255,.04);transition:all .4s}
.ledger-cell.out{border-color:rgba(87,240,184,.22);background:rgba(87,240,184,.05)}
.ledger-cell.lit{border-color:rgba(157,140,255,.55);box-shadow:0 0 14px rgba(157,140,255,.25)}
.ledger-cell .lk{font-size:10.5px;color:var(--ink-2)}
.ledger-cell .lv{font-family:var(--font-mono);font-size:11px;color:var(--ink)}
.ledger-cell .lv .arrow{color:var(--violet);margin-right:4px}

.proc-stage{display:flex;flex-direction:column;min-width:0;min-height:0}
.diagram-frame{position:relative;flex:1;min-height:0;border-radius:var(--r-lg);border:1px solid var(--line);overflow:hidden;
  background:radial-gradient(80% 90% at 50% 40%,rgba(20,34,52,.5),rgba(4,12,20,.85));
  box-shadow:inset 0 0 70px rgba(0,0,0,.45)}
.diagram-scan{position:absolute;inset:0;pointer-events:none;z-index:3;
  background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(157,190,255,.012) 3px 6px)}
.diagram-scan::after{content:"";position:absolute;left:0;right:0;height:60px;top:-60px;
  background:linear-gradient(180deg,transparent,rgba(140,200,255,.045),transparent);animation:holo-shimmer 7s linear infinite}
#psnSvg{position:absolute;inset:0;width:100%;height:100%;display:block}
.diagram-note{position:absolute;left:14px;bottom:12px;z-index:4;font-size:9.5px;letter-spacing:.14em;color:rgba(190,215,255,.65);pointer-events:none}

.playbar{flex:0 0 auto;display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px 16px;
  background:var(--glass);border:1px solid var(--line);border-radius:var(--r-lg);backdrop-filter:blur(12px)}
.play-progress{flex:1;display:flex;align-items:center;gap:12px;min-width:0}
.progress-track{flex:1;height:5px;border-radius:99px;background:rgba(157,140,255,.14);overflow:hidden}
.progress-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--violet),#c7b3ff);box-shadow:0 0 12px rgba(157,140,255,.5);transition:width .2s linear;border-radius:99px}
.progress-steps{font-size:10px;letter-spacing:.18em;color:var(--ink-2);white-space:nowrap}
.seg-speed .seg-btn{padding:4px 9px}

/* ============================ EXPERIMENTS TAB ============================ */
.exp-grid{flex:1;min-width:0;min-height:0;display:grid;grid-template-columns:minmax(430px,1.05fr) minmax(430px,1fr);gap:14px;padding:14px}
.exp-lab{display:flex;flex-direction:column;min-width:0;min-height:0;overflow-y:auto}
.exp-blurb{font-size:12px;line-height:1.55;color:var(--ink-2);padding:11px 16px 2px}
.exp-controls{padding:10px 16px 4px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.slider-block{display:flex;flex-direction:column;gap:6px;min-width:0}
.slider-head{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.slider-head label{font-size:11.5px;color:var(--ink-2);letter-spacing:.03em}
.slider-head output{font-family:var(--font-mono);font-size:12px;color:var(--green)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:5px;border-radius:99px;background:linear-gradient(90deg,rgba(87,240,184,.5),rgba(90,215,255,.35));box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-5.5px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#eafff6,#57f0b8 60%,#2ea886);border:1px solid rgba(255,255,255,.5);box-shadow:0 0 10px rgba(87,240,184,.6)}
input[type=range]::-moz-range-track{height:5px;border-radius:99px;background:linear-gradient(90deg,rgba(87,240,184,.5),rgba(90,215,255,.35))}
input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:#57f0b8;border:1px solid #eafff6;box-shadow:0 0 10px rgba(87,240,184,.6)}
input[type=range]:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:8px}
.slider-scale{display:flex;justify-content:space-between;font-size:8.5px;color:var(--ink-3);letter-spacing:.04em;line-height:1.3}
.preset-row{grid-column:1 / -1;display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding-top:4px;border-top:1px dashed rgba(90,215,255,.12);margin-top:2px}
.preset-label{font-size:8.5px;letter-spacing:.2em;color:var(--ink-3)}

.rate-readout{display:flex;align-items:stretch;gap:14px;margin:10px 16px 0;padding:13px 16px;border-radius:12px;
  background:linear-gradient(120deg,rgba(87,240,184,.07),rgba(90,215,255,.04));border:1px solid rgba(87,240,184,.28)}
.rate-main{min-width:150px}
.rate-value{font-size:37px;font-weight:600;color:var(--green);text-shadow:0 0 22px rgba(87,240,184,.4);line-height:1}
.rate-unit{font-size:9.5px;color:var(--ink-2);letter-spacing:.1em;margin-top:6px}
.rate-side{flex:1;display:flex;flex-direction:column;gap:9px;justify-content:center;min-width:0}
.rate-limit span{display:block;font-size:8.5px;letter-spacing:.22em;color:var(--ink-3)}
.rate-limit strong{font-family:var(--font-display);font-size:13px;letter-spacing:.1em;color:var(--amber);text-transform:uppercase}
.rate-limit strong.ok{color:var(--green)}
.rate-gauge{display:flex;align-items:center;gap:10px}
.gauge-track{flex:1;height:6px;border-radius:99px;background:rgba(90,215,255,.12);overflow:hidden}
.gauge-fill{height:100%;width:0%;border-radius:99px;background:linear-gradient(90deg,#2ea886,var(--green),#9df5d4);box-shadow:0 0 12px rgba(87,240,184,.5);transition:width .35s ease}
.rate-gauge .mono{font-size:9.5px;color:var(--ink-3);white-space:nowrap}

.rate-viz{display:grid;grid-template-columns:1fr 148px;gap:12px;margin:12px 16px 0;min-height:0;flex:1}
.chart-wrap{position:relative;min-width:0;border:1px solid var(--line);border-radius:11px;background:rgba(4,16,22,.45);overflow:hidden;display:flex;flex-direction:column}
.chart-tabs{position:absolute;top:8px;left:8px;z-index:2}
.chart-tabs .seg-btn{padding:3px 8px;font-size:9px}
#rateChart{width:100%;height:100%;display:block;min-height:190px}
.bubble-col-wrap{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:11px;background:rgba(4,16,22,.45);overflow:hidden}
.bubble-col-title{font-size:8.5px;letter-spacing:.2em;color:var(--ink-3);padding:8px 10px;border-bottom:1px dashed rgba(90,215,255,.14)}
#bubbleCol{flex:1;width:100%;min-height:0}
.exp-foot{padding:9px 16px 13px;font-size:9.5px;letter-spacing:.08em;color:var(--ink-3)}

.tonicity-stage{position:relative;margin:12px 16px 0;border-radius:11px;border:1px solid var(--line);overflow:hidden;
  background:radial-gradient(85% 100% at 50% 30%,#0a3038,#041a21 70%);height:400px;flex:0 0 auto}
#tonicityCanvas{display:block;width:100%;height:100%;touch-action:none}
.tonicity-gauge{position:absolute;right:10px;bottom:8px;width:150px;text-align:center;pointer-events:none}
.gauge-read{display:flex;flex-direction:column;line-height:1.15;margin-top:-4px}
.gauge-read span:first-child{font-size:19px;color:var(--ink)}
.gauge-unit{font-size:8px;letter-spacing:.16em;color:var(--ink-3)}
.tonicity-state{position:absolute;left:10px;top:9px;font-size:9px;letter-spacing:.2em;padding:4px 9px;border-radius:6px;
  background:rgba(5,20,26,.75);border:1px solid rgba(90,215,255,.3);color:var(--blue)}
.tonicity-state.turgid{color:var(--green);border-color:rgba(87,240,184,.5)}
.tonicity-state.plasmolysed{color:var(--red);border-color:rgba(255,122,138,.5)}
.tonicity-controls{display:flex;align-items:center;gap:10px;margin:12px 16px 0;flex-wrap:wrap}
.seg-tonicity{flex:1;display:flex}
.seg-tonicity .seg-btn{flex:1;padding:7px 8px;line-height:1.35;text-align:center;font-size:10.5px}
.seg-tonicity .seg-btn small{display:block;color:inherit;opacity:.65;letter-spacing:.02em;margin-top:1px}
.tonicity-narration{margin:12px 16px 0;padding:11px 13px;border-radius:10px;background:rgba(255,195,107,.05);border:1px solid rgba(255,195,107,.22);flex:1;min-height:84px;overflow-y:auto}
.narr-title{font-size:8.5px;letter-spacing:.24em;color:var(--amber);margin-bottom:7px}
.narr-body{font-size:12px;line-height:1.62;color:var(--ink-2)}
.narr-body p{margin-bottom:7px;animation:narr-in .5s ease}
.narr-body p:last-child{margin-bottom:0}
.narr-body .st{color:var(--amber);font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;margin-right:6px}
@keyframes narr-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.narr-body b{color:var(--ink)}
.narr-body .warn{color:var(--red)}

/* ============================ SVG diagram bits ============================ */
#psnSvg text{font-family:var(--font-body);fill:#cfeaff}
#psnSvg .svg-mono{font-family:var(--font-mono)}
#psnSvg .psn-label{font-size:12.5px;letter-spacing:.04em}
#psnSvg .psn-kicker{font-family:var(--font-mono);font-size:9px;letter-spacing:.2em}
#psnSvg .dim{opacity:.16;transition:opacity .6s ease}
#psnSvg .softdim{opacity:.45;transition:opacity .6s ease}
#psnSvg .undim{opacity:1;transition:opacity .6s ease}

/* ============================ responsive (16:9 first) ============================ */
@media (max-width:1279px){
  #panel-structure.is-active{grid-template-columns:260px minmax(0,1fr) 280px}
  .exp-controls{grid-template-columns:1fr 1fr}
  .exp-grid{grid-template-columns:1fr;overflow-y:auto}
}
@media (max-width:980px){
  body{overflow:auto}
  .app{position:static;min-height:100vh}
  #panel-structure.is-active{grid-template-columns:1fr;grid-auto-rows:auto}
  .stage-frame{min-height:480px}
  .sidepanel{overflow:visible}
  .process-grid{grid-template-columns:1fr}
  .proc-stage .diagram-frame{min-height:420px}
  .brand-tag{display:none}
  .status-species{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}