:root{
  /* GENO brand — logo teal + gold accent */
  --geno-teal:#0089A3; --geno-teal-d:#006B80; --geno-teal-l:#00A3C0;
  --geno-gold:#FFD54F; --geno-gold-d:#E6B800;
  --geno-black:#0A0A0A;
  --navy:#003D73; --navy-d:#002B52;
  --teal:var(--geno-teal); --teal-l:var(--geno-teal-l);
  --ink:#1A2B3C; --body:#33475B; --mute:#6B7C8D; --faint:#9AAAB8;
  --canvas:#F4F7FA; --card:#FFFFFF; --line:#E2E9F0; --line-d:#CBD8E4;
  --tealbg:#E6F4F7; --navybg:#EAF1F7; --goldbg:#FFF8E1; --warnbg:#FBEFD9; --warn:#C8860D;
  --okbg:#E4F3E8; --ok:#2E8B4E;
  --mode-advanced:#9E2A2B; --mode-advanced-d:#7A1F20; --mode-advanced-bg:#FAECEC;
  --shadow:0 1px 3px rgba(0,80,96,.06),0 6px 24px rgba(0,80,96,.08);
  --shadow-l:0 1px 2px rgba(0,80,96,.05); --r:14px; --r-s:9px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:var(--canvas);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.55}
button{font-family:inherit;cursor:pointer;border:none;background:none}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-d);border-radius:6px}

/* ---- proto banner ---- */
.proto-bar{background:var(--geno-black);color:#b8d4dc;font-size:12px;text-align:center;
  padding:7px 16px;letter-spacing:.3px;border-bottom:2px solid var(--geno-gold)}
.proto-bar b{color:#fff}
.proto-bar em{color:var(--geno-gold);font-style:normal;font-weight:600}

/* ---- shell ---- */
.app{display:flex;min-height:100vh}
.sidebar{width:248px;background:var(--geno-black);color:#dce7f0;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;flex-shrink:0;border-right:1px solid rgba(255,213,79,.12)}
.brand{padding:20px 20px 16px}
.brand-logo{height:34px;width:auto;max-width:168px;display:block;margin-bottom:8px}
.sidebar .brand-logo{max-width:140px;height:34px}
.brand .sub{font-size:11px;color:#7a9fb0;margin-top:2px;letter-spacing:.4px}
.nav{padding:8px 12px;flex:1}
.nav-label{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#6f93b3;
  padding:14px 12px 6px}
.nav-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  padding:10px 12px;border-radius:var(--r-s);color:#c4d6e6;font-size:13.5px;font-weight:500;
  margin-bottom:2px;transition:.13s}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.active{background:var(--geno-teal);color:#fff;font-weight:600;box-shadow:0 2px 12px rgba(0,137,163,.45)}
.nav-item svg{width:18px;height:18px;flex-shrink:0}
.nav-item .dot{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--geno-gold)}
.nav-item.active .dot{background:var(--geno-gold);box-shadow:0 0 6px rgba(255,213,79,.6)}
.side-foot{padding:16px 20px;border-top:1px solid rgba(255,255,255,.09);font-size:11px;color:#7e9fbd}
.partner-chip{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--geno-teal);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
  border:2px solid rgba(255,213,79,.35)}
.partner-chip .pn{font-size:12.5px;color:#dce7f0;font-weight:600;line-height:1.2}
.partner-chip .pr{font-size:10.5px;color:#7e9fbd}

/* ---- main ---- */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{background:var(--card);border-bottom:1px solid var(--line);padding:15px 32px;
  display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:20}
.topbar h1{font-size:19px;font-weight:700;color:var(--navy)}
.topbar .crumb{font-size:12px;color:var(--faint);margin-left:2px}
.topbar .spacer{flex:1}
.ruo{font-size:10px;font-weight:700;letter-spacing:.5px;color:var(--mute);
  border:1px solid var(--line-d);border-radius:20px;padding:4px 11px}
.content{padding:30px 32px 60px;max-width:1080px;width:100%;margin:0 auto}
.screen{display:none;animation:fade .25s ease}
.screen.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---- generic ---- */
.page-intro{margin-bottom:22px}
.page-intro h2{font-size:22px;font-weight:700;color:var(--navy);letter-spacing:-.2px}
.page-intro p{font-size:13.5px;color:var(--mute);margin-top:4px;max-width:620px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-l);padding:22px;margin-bottom:18px}
.card-h{display:flex;align-items:center;gap:9px;margin-bottom:16px}
.card-h h3{font-size:15px;font-weight:700;color:var(--ink)}
.card-h svg{width:17px;height:17px;color:var(--teal)}
.card-h .badge{margin-left:auto}
.badge{font-size:10.5px;font-weight:700;letter-spacing:.3px;padding:3px 9px;border-radius:20px}
.badge.teal{background:var(--tealbg);color:var(--teal)}
.badge.navy{background:var(--navybg);color:var(--navy)}
.badge.ok{background:var(--okbg);color:var(--ok)}
.badge.warn{background:var(--warnbg);color:var(--warn)}
.badge.opt{background:#EEF1F4;color:var(--mute)}
.badge.gold{background:var(--goldbg);color:#8A6D00}
.muted{color:var(--mute)}
.spec-strip{background:var(--goldbg);border:1px solid rgba(255,213,79,.45);border-radius:var(--r-s);
  padding:12px 16px;margin-bottom:20px;font-size:12.5px;color:#5C4A00;line-height:1.5}
.spec-strip strong{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font-size:13px;font-weight:600;border-radius:var(--r-s);padding:10px 18px;transition:.13s}
.btn-primary{background:var(--geno-teal);color:#fff;box-shadow:0 2px 10px rgba(0,137,163,.32)}
.btn-primary:hover{background:var(--geno-teal-l)}
.btn-accent{background:var(--geno-gold);color:var(--geno-black);box-shadow:0 2px 8px rgba(255,213,79,.35)}
.btn-accent:hover{background:#ffe082}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-d)}
.btn-ghost{background:transparent;color:var(--body);border:1px solid var(--line-d)}
.btn-ghost:hover{background:var(--canvas);border-color:var(--mute)}
.btn-sm{padding:7px 13px;font-size:12px}
.row{display:flex;gap:12px;flex-wrap:wrap}

/* ---- workbench ---- */
.wb-hello{font-size:25px;font-weight:700;color:var(--navy);letter-spacing:-.3px}
.wb-hello span{color:var(--teal)}
.wb-date{font-size:13px;color:var(--mute);margin:3px 0 24px}
.wb-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:18px}
@media(max-width:880px){.wb-grid{grid-template-columns:1fr}}
.continue-card{background:linear-gradient(135deg,var(--geno-teal-d),var(--geno-teal));color:#fff;
  border-radius:var(--r);padding:24px;box-shadow:var(--shadow);position:relative;overflow:hidden;
  border-bottom:3px solid var(--geno-gold)}
.continue-card::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;
  background:rgba(255,213,79,.08);border-radius:50%}
.continue-card .lbl{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--geno-gold)}
.continue-card h3{font-size:19px;font-weight:700;margin:7px 0 3px}
.continue-card .meta{font-size:12.5px;color:#bcd4e4}
.stage-track{display:flex;gap:6px;margin:18px 0 20px}
.stage-pip{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.18)}
.stage-pip.done{background:rgba(255,255,255,.55)}
.stage-pip.now{background:var(--geno-gold)}
.continue-card .nextline{font-size:12.5px;color:#cfe0ee;margin-bottom:16px}
.continue-card .btn-primary{background:#fff;color:var(--navy)}
.continue-card .btn-primary:hover{background:#eaf1f7}
.side-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:20px;box-shadow:var(--shadow-l)}
.side-panel h4{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  color:var(--mute);margin-bottom:14px;display:flex;align-items:center;gap:7px}
.side-panel h4 svg{width:14px;height:14px;color:var(--teal)}
.prn-item{padding:12px;border-radius:var(--r-s);background:var(--tealbg);margin-bottom:9px}
.prn-item.navy{background:var(--navybg)}
.prn-item .pt{font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:2px}
.prn-item .pd{font-size:12px;color:var(--body);line-height:1.5}
.prn-item .ptag{font-size:10.5px;font-weight:700;color:var(--teal);margin-top:6px;display:inline-block}
.prn-item.navy .ptag{color:var(--navy)}
.prn-item .prn-response-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--teal);margin-top:8px;margin-bottom:4px}
.prn-item .prn-response{margin-top:0;padding:8px 10px;background:#fff;border:1px solid var(--line);border-radius:var(--r-s);font-size:12px;line-height:1.55;color:var(--ink)}
.prn-item .prn-response-missing{background:var(--warnbg);border-color:#e8d4a8;color:var(--body);font-size:11.5px}
.prn-item .prn-link-entry{margin-top:8px;font-size:12px}
.act-item{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--line)}
.act-item:last-child{border-bottom:none}
.act-ic{width:32px;height:32px;border-radius:8px;background:var(--canvas);display:flex;
  align-items:center;justify-content:center;flex-shrink:0}
.act-ic svg{width:15px;height:15px;color:var(--mute)}
.act-item .at{font-size:12.5px;font-weight:600;color:var(--ink)}
.act-item .as{font-size:11.5px;color:var(--faint)}
.act-item .astage{margin-left:auto;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:20px}
.act-item.clickable{cursor:pointer;border-radius:var(--r-s);margin:0 -8px;padding:10px 8px;transition:.14s}
.act-item.clickable:hover{background:var(--canvas);border-color:transparent;box-shadow:inset 0 0 0 1px var(--teal)}
.wb-quick{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-top:18px}
@media(max-width:880px){.wb-quick{grid-template-columns:1fr}}
.quick-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:18px;text-align:left;box-shadow:var(--shadow-l);transition:.14s}
.quick-card:hover{border-color:var(--teal);transform:translateY(-2px);box-shadow:var(--shadow)}
.quick-card svg{width:22px;height:22px;color:var(--teal);margin-bottom:10px}
.quick-card .qt{font-size:14px;font-weight:700;color:var(--ink)}
.quick-card .qd{font-size:12px;color:var(--mute);margin-top:2px}

/* ---- inventory ---- */
.seg{display:inline-flex;background:var(--canvas);border:1px solid var(--line);
  border-radius:var(--r-s);padding:3px;margin-bottom:20px}
.seg button{padding:8px 16px;font-size:13px;font-weight:600;color:var(--mute);border-radius:7px}
.seg button.active{background:var(--card);color:var(--navy);box-shadow:var(--shadow-l)}
.flow-steps{display:flex;align-items:center;gap:4px;margin-bottom:20px;flex-wrap:wrap}
.flow-step{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);
  border-radius:30px;padding:6px 14px 6px 6px}
.flow-step .n{width:22px;height:22px;border-radius:50%;background:var(--navybg);color:var(--navy);
  font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center}
.flow-step.on .n{background:var(--teal);color:#fff}
.flow-step .t{font-size:12px;font-weight:600;color:var(--body)}
.flow-arrow{color:var(--line-d);font-size:15px}
table.tbl{width:100%;border-collapse:collapse;font-size:12.5px}
table.tbl th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--mute);font-weight:700;padding:9px 12px;border-bottom:2px solid var(--line)}
table.tbl td{padding:11px 12px;border-bottom:1px solid var(--line);color:var(--body)}
table.tbl tr:last-child td{border-bottom:none}
table.tbl tr:hover td{background:var(--canvas)}
.lot{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  background:var(--canvas);padding:2px 7px;border-radius:5px;color:var(--ink)}
.mix-card{border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-bottom:14px;
  background:var(--card);box-shadow:var(--shadow-l)}
.mix-card .mh{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.mix-card .mh .mn{font-size:14.5px;font-weight:700;color:var(--ink)}
.comp-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px dashed var(--line)}
.comp-row .cname{font-size:12.5px;font-weight:600;color:var(--body);min-width:140px}
.comp-row .cmeta{font-size:11.5px;color:var(--faint)}
.comp-row .cpct{margin-left:auto;font-size:12px;font-weight:700;color:var(--teal)}
.chip-row{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.chip{font-size:12px;font-weight:600;padding:7px 13px;border-radius:30px;
  border:1.5px solid var(--line-d);color:var(--body);background:var(--card);transition:.12s}
.chip:hover{border-color:var(--teal)}
.chip.sel{background:var(--teal);border-color:var(--teal);color:#fff}
.chip.add{border-style:dashed;color:var(--mute)}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:600;color:var(--body);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;font-family:inherit;font-size:13px;
  padding:9px 11px;border:1px solid var(--line-d);border-radius:var(--r-s);color:var(--ink);
  background:var(--card)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--geno-teal);
  box-shadow:0 0 0 3px rgba(0,137,163,.12)}
.field input.is-locked,.field select.is-locked,.field textarea.is-locked{
  background:var(--canvas);
  border-color:var(--line);
  color:var(--mute);
  cursor:not-allowed;
  box-shadow:none;
}
.field input.is-locked:focus,.field select.is-locked:focus,.field textarea.is-locked:focus{
  border-color:var(--line);
  box-shadow:none;
}
.field .hint{font-size:11px;color:var(--faint);margin-top:4px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
@media(max-width:680px){.grid2,.grid3{grid-template-columns:1fr}}

/* ---- notebook list ---- */
.entry-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 20px;margin-bottom:13px;box-shadow:var(--shadow-l);transition:.14s;cursor:pointer}
.entry-card:hover{border-color:var(--teal);box-shadow:var(--shadow);transform:translateY(-1px)}
.entry-top{display:flex;align-items:center;gap:12px;margin-bottom:13px}
.entry-top .etitle{font-size:15px;font-weight:700;color:var(--ink)}
.entry-top .edate{font-size:12px;color:var(--faint);margin-left:auto}
.mini-track{display:flex;gap:14px;align-items:center}
.mini-stage{display:flex;align-items:center;gap:7px}
.ms-dot{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:800;flex-shrink:0}
.ms-dot.done{background:var(--teal);color:#fff}
.ms-dot.now{background:var(--card);border:2px solid var(--teal);color:var(--teal)}
.ms-dot.todo{background:var(--canvas);border:1.5px solid var(--line-d);color:var(--faint)}
.ms-lbl{font-size:11.5px;font-weight:600}
.ms-lbl.done{color:var(--body)} .ms-lbl.now{color:var(--teal)} .ms-lbl.todo{color:var(--faint)}
.ms-conn{width:18px;height:2px;background:var(--line-d)}
.entry-foot{margin-top:13px;padding-top:12px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:9px}
.invite{font-size:12px;color:var(--teal);font-weight:600;display:flex;align-items:center;gap:6px}
.invite svg{width:14px;height:14px}

/* ---- entry detail (stages) ---- */
.stage-nav{display:flex;gap:0;border:1px solid var(--line);border-radius:var(--r-s);
  overflow:hidden;margin-bottom:22px}
.stage-tab{flex:1;padding:13px 8px;text-align:center;background:var(--card);transition:.13s;
  border-right:1px solid var(--line);position:relative}
.stage-tab:last-child{border-right:none}
.stage-tab:hover{background:var(--canvas)}
.stage-tab.active{background:var(--navy)}
.stage-tab .sn{font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--faint)}
.stage-tab .sl{font-size:13px;font-weight:700;color:var(--body);margin-top:2px}
.stage-tab.active .sn{color:#8fc5ce} .stage-tab.active .sl{color:#fff}
.stage-tab .sc{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%}
.stage-tab .sc.done{background:var(--ok)} .stage-tab .sc.empty{background:var(--line-d)}
.stage-body{display:none}
.stage-body.active{display:block;animation:fade .2s}
.readout{background:var(--canvas);border-radius:var(--r-s);padding:14px 16px;margin-bottom:8px}
.readout-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px 20px}
@media(max-width:680px){.readout-grid{grid-template-columns:1fr 1fr}}
.ro-item .rk{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--mute);font-weight:700}
.ro-item .rv{font-size:14px;font-weight:700;color:var(--ink);margin-top:2px}
.collapse{border:1px solid var(--line);border-radius:var(--r-s);margin-top:10px;overflow:hidden}
.collapse-h{display:flex;align-items:center;gap:9px;padding:13px 15px;background:var(--canvas);width:100%}
.collapse-h .ct{font-size:13px;font-weight:600;color:var(--body)}
.collapse-h .chev{margin-left:auto;color:var(--mute);transition:.2s}
.collapse.open .chev{transform:rotate(180deg)}
.collapse-body{display:none;padding:16px 15px}
.collapse.open .collapse-body{display:block}
.q-block{margin-bottom:18px}
.q-block .ql{font-size:13.5px;font-weight:600;color:var(--ink);margin-bottom:9px}
.q-block .qsub{font-size:11.5px;color:var(--faint);font-weight:400}
.twoin{display:flex;align-items:center;gap:9px;background:var(--tealbg);border-radius:var(--r-s);
  padding:11px 14px;margin:10px 0}
.twoin svg{width:16px;height:16px;color:var(--teal);flex-shrink:0}
.twoin .tt{font-size:12px;color:var(--body)}
.toggle{position:relative;width:38px;height:22px;background:var(--line-d);border-radius:20px;
  flex-shrink:0;transition:.15s}
.toggle.on{background:var(--teal)}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;
  background:#fff;border-radius:50%;transition:.15s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.toggle.on::after{left:18px}
.app-banner{display:flex;align-items:center;gap:11px;background:var(--navybg);
  border-radius:var(--r-s);padding:12px 15px;margin-bottom:18px}
.app-banner svg{width:18px;height:18px;color:var(--navy);flex-shrink:0}
.app-banner .ab-t{font-size:12.5px;color:var(--body)}
.app-banner .ab-t b{color:var(--navy)}
.app-banner .chg{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--teal)}
.outcome-hero{background:linear-gradient(135deg,var(--geno-teal-d),var(--geno-teal));color:#fff;border-radius:var(--r);
  padding:22px;margin-bottom:18px;border-bottom:3px solid var(--geno-gold)}
.outcome-hero .oh-q{font-size:17px;font-weight:700;line-height:1.4}
.outcome-hero .oh-s{font-size:12.5px;color:#bce3e6;margin-top:4px}
.big-choice{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-top:14px}
@media(max-width:680px){.big-choice{grid-template-columns:1fr}}
.bc{background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.25);border-radius:var(--r-s);
  padding:13px;text-align:center;color:#fff;transition:.13s}
.bc:hover{background:rgba(255,255,255,.2)}
.bc.sel{background:#fff;color:var(--teal);border-color:#fff}
.bc .bct{font-size:13.5px;font-weight:700}
.bc .bcs{font-size:11px;opacity:.8;margin-top:1px}
.add-detail{font-size:12.5px;font-weight:600;color:var(--teal);display:flex;align-items:center;gap:6px;
  padding:8px 0;margin-top:4px}
.add-detail svg{width:15px;height:15px}
.detail-zone{display:none;border-top:1px dashed var(--line);margin-top:12px;padding-top:14px}
.detail-zone.open{display:block;animation:fade .2s}
.stage-foot{display:flex;gap:10px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.note{font-size:11.5px;color:var(--faint);display:flex;align-items:center;gap:6px;margin-top:8px}
.note svg{width:13px;height:13px;flex-shrink:0}

/* toast */
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(80px);
  background:var(--navy);color:#fff;font-size:13px;font-weight:500;padding:12px 22px;
  border-radius:30px;box-shadow:var(--shadow);transition:.28s;z-index:90;display:flex;align-items:center;gap:9px}
.toast.show{transform:translateX(-50%) translateY(0)}
.toast svg{width:16px;height:16px;color:var(--geno-gold)}

@media(max-width:768px){
  .sidebar{width:100%;height:auto;position:relative;border-right:none;border-bottom:1px solid rgba(255,213,79,.12)}
  .app{flex-direction:column}
  .nav{display:flex;flex-wrap:wrap;gap:4px;padding:8px}
  .nav-label{width:100%}
  .nav-item{width:auto;flex:1;min-width:120px;justify-content:center;font-size:12px;padding:8px}
  .side-foot{display:none}
}

.disclaimer{display:flex;align-items:flex-start;gap:8px;background:var(--warnbg);
  border-radius:var(--r-s);padding:9px 12px;margin:10px 0;border:1px solid #ecd9ab}
.disclaimer svg{width:14px;height:14px;color:var(--warn);flex-shrink:0;margin-top:1px}
.disclaimer .dt{font-size:11.5px;color:#8a6212;line-height:1.45}
.reveal{display:none;margin-top:10px;padding-left:14px;border-left:2px solid var(--line)}
.reveal.open{display:block;animation:fade .2s}
.method-opt{display:flex;align-items:flex-start;gap:11px;border:1.5px solid var(--line-d);
  border-radius:var(--r-s);padding:13px 14px;margin-bottom:9px;transition:.12s;width:100%;text-align:left}
.method-opt:hover{border-color:var(--teal)}
.method-opt.sel{border-color:var(--teal);background:var(--tealbg)}
.method-radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--line-d);flex-shrink:0;
  margin-top:1px;position:relative}
.method-opt.sel .method-radio{border-color:var(--teal)}
.method-opt.sel .method-radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--teal)}
.method-opt .mo-t{font-size:13px;font-weight:700;color:var(--ink)}
.method-opt .mo-d{font-size:11.5px;color:var(--mute);margin-top:1px}
.placeholder{text-align:center;padding:70px 20px;color:var(--faint)}
.placeholder svg{width:46px;height:46px;margin-bottom:12px;opacity:.5}
.placeholder h3{font-size:15px;color:var(--mute);font-weight:600}
.placeholder p{font-size:13px;margin-top:4px}

/* login */
#login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--canvas)}
.login-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:40px;width:100%;max-width:420px;text-align:center}
.login-card .brand-logo{height:42px;margin:0 auto 12px}
.login-card h2{font-size:18px;font-weight:700;margin-bottom:6px}
.login-card p{font-size:13px;color:var(--mute);margin-bottom:24px;line-height:1.6}
.pin-input-wrap{position:relative;margin-bottom:16px;text-align:left}
.pin-input-wrap label{display:block;font-size:12px;font-weight:600;color:var(--mute);margin-bottom:6px}
.pin-input-wrap input{width:100%;padding:12px 16px;border:1px solid var(--line-d);border-radius:var(--r-s);font-size:16px;letter-spacing:4px;text-align:center}
#login-error{display:none;background:#fdf2f2;border:1px solid #f5c6c2;color:#c0392b;font-size:13px;padding:10px 14px;border-radius:var(--r-s);margin-bottom:16px}
.login-footer{margin-top:24px;font-size:12px;color:var(--faint);border-top:1px solid var(--line);padding-top:16px}
.topbar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
#logout-btn{font-size:12px;font-weight:600;color:var(--mute);padding:6px 12px;border-radius:var(--r-s);border:1px solid var(--line-d)}
#offline-banner,#sync-pending-badge{display:none;font-size:11px;font-weight:600;padding:4px 10px;border-radius:20px}
#offline-banner.visible{display:inline-flex;background:var(--warnbg);color:var(--warn)}
#sync-pending-badge.visible{display:inline-flex;background:var(--navybg);color:var(--navy);cursor:pointer}
.link-btn{color:var(--geno-teal);font-weight:600;font-size:11px;background:none;border:none;padding:0;cursor:pointer}
.row-inline{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.row-inline label{margin:0;font-size:13px}
.checkbox-row{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.checkbox-row input[type=checkbox]{width:16px;height:16px;flex-shrink:0;margin:0;accent-color:var(--geno-teal)}
.checkbox-row label{margin:0;font-size:13px;font-weight:500;color:var(--body);cursor:pointer;line-height:1.4}
.readonly-val{padding:9px 11px;background:var(--canvas);border:1px solid var(--line-d);border-radius:var(--r-s);font-size:13px;font-weight:600;color:var(--ink)}
.checklist-item{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.checklist-item:last-child{border-bottom:none}
.checklist-item input[type=checkbox]{width:16px;height:16px;margin-top:2px;flex-shrink:0;accent-color:var(--geno-teal)}
.checklist-item label{font-size:13px;color:var(--body);cursor:pointer;line-height:1.5;margin:0}
.checklist-item.checked label{text-decoration:line-through;color:var(--mute)}
.ratio-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.ratio-name{flex:1;font-size:13px;font-weight:600;min-width:120px}
.ratio-row input{width:80px;padding:7px 9px;border:1px solid var(--line-d);border-radius:var(--r-s);font-size:13px}
.ratio-unit{font-size:12px;color:var(--mute)}
.row-actions{white-space:nowrap}
.btn-xs{font-size:11px;padding:4px 8px}
.btn-xs.danger{color:#c0392b}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:768px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
.stat-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;text-align:center}
.stat-n{font-size:28px;font-weight:800;color:var(--navy)}
.stat-l{font-size:12px;color:var(--mute);margin-top:4px}
.result-box{background:var(--tealbg);border:1px solid rgba(0,137,163,.25);border-radius:var(--r-s);padding:18px;margin-top:12px}
.result-box h3{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:10px}
.result-instruction{background:var(--navybg);border-left:3px solid var(--navy);padding:12px 14px;font-size:13px;margin-top:8px;border-radius:0 var(--r-s) var(--r-s) 0}
.warn-box{background:var(--warnbg);color:var(--warn);padding:10px 14px;border-radius:var(--r-s);margin-bottom:10px;font-size:13px}
.studio-mode-toggle{display:inline-flex;background:var(--canvas);border:1px solid var(--line);border-radius:var(--r-s);padding:3px;margin-bottom:18px}
.advanced-run-toggle{display:inline-flex;margin-bottom:10px;border-style:dashed;border-color:var(--line-d);background:transparent;padding:2px}
.advanced-run-toggle .studio-mode-btn{font-size:12px;padding:6px 12px}
.studio-mode-btn{padding:8px 16px;font-size:13px;font-weight:600;color:var(--mute);border-radius:7px;transition:.12s}
.studio-mode-btn.active{background:var(--card);color:var(--navy);box-shadow:var(--shadow-l)}

/* ---- mode shell (Inventory + Studio lane separation) ---- */
.screen-mode-sm102{background:linear-gradient(180deg,rgba(228,243,232,.35) 0%,var(--canvas) 220px)}
.screen-mode-advanced{background:linear-gradient(180deg,rgba(250,236,236,.75) 0%,var(--canvas) 240px)}
.mode-shell{margin-bottom:20px}
.screen-mode-advanced .mode-switch{border-color:rgba(158,42,43,.28);box-shadow:0 2px 12px rgba(158,42,43,.08)}
.mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--card);border:2px solid var(--line);
  border-radius:var(--r);padding:4px;box-shadow:var(--shadow-l)}
.mode-switch-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;
  font-size:13.5px;font-weight:700;color:var(--mute);border-radius:calc(var(--r-s) + 2px);transition:.15s;text-align:center}
.mode-switch-btn .mode-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;opacity:.45;
  background:currentColor;transition:.15s}
.mode-switch-btn.mode-advanced:not(.is-active){color:#B85C5C}
.mode-switch-btn.is-active.mode-sm102{background:var(--okbg);color:var(--ok);box-shadow:inset 0 0 0 2px rgba(46,139,78,.25)}
.mode-switch-btn.is-active.mode-sm102 .mode-dot{background:var(--ok);opacity:1;box-shadow:0 0 0 3px rgba(46,139,78,.2)}
.mode-switch-btn.is-active.mode-advanced{background:var(--mode-advanced-bg);color:var(--mode-advanced);
  box-shadow:inset 0 0 0 2px rgba(158,42,43,.28)}
.mode-switch-btn.is-active.mode-advanced .mode-dot{background:var(--mode-advanced);opacity:1;
  box-shadow:0 0 0 3px rgba(158,42,43,.18)}
.mode-switch-btn:not(.is-active):hover{background:var(--canvas);color:var(--body)}
.mode-switch-btn.mode-advanced:not(.is-active):hover{background:var(--mode-advanced-bg);color:var(--mode-advanced-d)}
.mode-banner{display:flex;flex-direction:column;gap:4px;margin-top:12px;padding:12px 16px;border-radius:var(--r-s);
  font-size:13px;line-height:1.45;border-left:4px solid transparent}
.mode-banner strong{font-size:13.5px;font-weight:700;letter-spacing:-.01em}
.mode-banner span{color:var(--body);font-size:12.5px}
.mode-banner.mode-sm102{background:var(--okbg);border-left-color:var(--ok);color:var(--ok)}
.mode-banner.mode-sm102 span{color:#2a6640}
.mode-banner.mode-advanced{background:var(--mode-advanced-bg);border-left-color:var(--mode-advanced);color:var(--mode-advanced-d)}
.mode-banner.mode-advanced span{color:#7A3535}
.mode-scope{margin-top:16px;padding:16px;border-radius:var(--r);border:1px solid var(--line)}
.mode-scope.mode-sm102{background:rgba(228,243,232,.35);border-color:rgba(46,139,78,.22)}
.mode-scope.mode-advanced{background:rgba(250,236,236,.55);border-color:rgba(158,42,43,.22)}
.mode-scope.mode-sm102 > .card{border-left:3px solid var(--ok)}
.mode-scope.mode-advanced > .card{border-left:3px solid var(--mode-advanced)}
.mode-scope.mode-sm102 .card{border-left:3px solid var(--ok)}
.mode-scope.mode-advanced .card{border-left:3px solid var(--mode-advanced)}
.mode-scope .card[style*="border-left"]{border-left-width:3px!important}
.screen-mode-advanced .advanced-run-toggle{border-color:rgba(158,42,43,.22);background:rgba(250,236,236,.35)}
.screen-mode-advanced .advanced-run-toggle .studio-mode-btn.active{background:var(--mode-advanced-bg);color:var(--mode-advanced-d)}
.adv-lipid-card{margin-top:12px}
.ratio-total-indicator{font-size:13px;font-weight:600;padding:10px 14px;border-radius:var(--r-s);margin-top:12px;text-align:center;background:var(--canvas);color:var(--mute)}
.ratio-total-indicator.ok{background:var(--okbg);color:var(--ok)}
.ratio-total-indicator.warn{background:var(--warnbg);color:var(--warn)}
.ratio-total-indicator.err{background:#fdf2f2;color:#c0392b}
.readout-grid .ro-item.full{grid-column:1 / -1}

/* ---- field validation ---- */
.field-error > label{color:#c0392b}
.field-error input,.field-error select,.field-error textarea,
input.field-invalid,select.field-invalid,textarea.field-invalid{
  border-color:#c0392b!important;box-shadow:0 0 0 2px rgba(192,57,43,.14)!important}
.ratio-row.field-error input{border-color:#c0392b!important}
.chip-row.field-error{outline:2px solid rgba(192,57,43,.35);outline-offset:4px;border-radius:var(--r-s)}

/* ---- SM-102 mix prep ---- */
.sm102-stock-table{width:100%;border-collapse:collapse;font-size:12.5px;margin:12px 0}
.sm102-stock-table th,.sm102-stock-table td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left}
.sm102-stock-table th{font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--mute)}
.sm102-prep-step{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px;line-height:1.5}
.sm102-prep-step:last-child{border-bottom:none}
.sm102-prep-step .sn{width:24px;height:24px;border-radius:50%;background:var(--tealbg);color:var(--teal);
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.empty-state{text-align:center;padding:48px 24px;color:var(--mute)}
.empty-state h3{font-size:15px;font-weight:600;margin-bottom:6px}
.toast.success{background:var(--ok)}
.toast.error{background:#c0392b}
.toast.warn{background:var(--warn)}

/* v1 module compat (feedback + manual) */
:root{
  --surface:var(--card);--border:var(--line);--border-mid:var(--line-d);
  --text-primary:var(--ink);--text-body:var(--body);--text-muted:var(--mute);--text-faint:var(--faint);
  --teal-light:var(--tealbg);--navy-light:var(--navybg);--success:var(--ok);--success-bg:var(--okbg);
  --error:#c0392b;--error-bg:#fdf2f2;--warn-bg:var(--warnbg);
  --input-bg:#fffef8;--radius-sm:var(--r-s);--radius-md:var(--r);--radius-lg:var(--r);
  --shadow-sm:var(--shadow-l);--shadow-md:var(--shadow);--transition:150ms ease-out;
}
.page-header{margin-bottom:24px}
.page-header h1{font-size:22px;font-weight:800;color:var(--navy);margin-bottom:4px}
.page-header p{font-size:13px;color:var(--mute)}
.form-row{margin-bottom:16px}
.form-row label{display:block;font-size:12px;font-weight:600;color:var(--mute);margin-bottom:6px}
.form-row input,.form-row select,.form-row textarea{width:100%;padding:10px 12px;border:1px solid var(--line-d);border-radius:var(--r-s);background:var(--input-bg);font-size:14px}
.form-row .helper{font-size:11px;color:var(--faint);margin-top:4px}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.card-title{font-size:13px;font-weight:700;color:var(--navy);margin-bottom:14px;display:flex;align-items:center;gap:6px}
.card-title svg{width:14px;height:14px;flex-shrink:0}
.badge-teal{background:var(--tealbg);color:var(--teal)}
.badge-navy{background:var(--navybg);color:var(--navy)}
.badge-success{background:var(--okbg);color:var(--ok)}
.feedback-mode-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
.feedback-mode-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-s);padding:12px 10px;cursor:pointer;text-align:center}
.feedback-mode-card.active{border-color:var(--teal);box-shadow:0 0 0 2px rgba(0,137,163,.12)}
.feedback-mode-card svg{width:18px;height:18px;color:var(--teal);margin:0 auto 6px;display:block}
.feedback-mode-card h4{font-size:12px;font-weight:700;color:var(--ink);margin-bottom:3px;line-height:1.3}
.feedback-mode-card p{font-size:11px;color:var(--mute);line-height:1.45;margin:0}
.feedback-panel{display:none}.feedback-panel.active{display:block}
.rating-row{display:flex;gap:8px;flex-wrap:wrap}
.rating-btn{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-d);font-weight:700}
.rating-btn.selected{background:var(--teal);color:#fff;border-color:var(--teal)}
.quality-btn{padding:7px 14px;border-radius:20px;border:1px solid var(--line-d);font-size:12px;font-weight:600}
.quality-btn.selected.smooth{background:var(--okbg);border-color:var(--ok);color:var(--ok)}
.manual-layout{display:grid;grid-template-columns:220px 1fr;gap:20px;align-items:start}
.manual-nav{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px;position:sticky;top:80px;max-height:calc(100vh - 100px);overflow-y:auto}
.manual-nav-item{display:block;width:100%;padding:7px 10px;text-align:left;font-size:12px;color:var(--mute);border-radius:var(--r-s)}
.manual-nav-item.active{background:var(--tealbg);color:var(--teal);font-weight:600}
.manual-nav-section{font-size:10px;font-weight:700;color:var(--faint);text-transform:uppercase;padding:10px 10px 4px}
.manual-section{display:none}.manual-section.active{display:block}
.manual-section h2{font-size:20px;font-weight:800;color:var(--navy);margin-bottom:8px}
.manual-section p{font-size:14px;color:var(--body);line-height:1.7;margin-bottom:10px}
#manual-search{width:100%;padding:10px 14px;border:1px solid var(--line-d);border-radius:var(--r);margin-bottom:16px}
@media(max-width:768px){.feedback-mode-grid{grid-template-columns:repeat(2,1fr)}.form-grid-2,.form-grid-3{grid-template-columns:1fr}.manual-layout{grid-template-columns:1fr}}

/* ---- methods modal ---- */
.methods-modal{position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;padding:20px}
.methods-modal.open{display:flex}
.methods-modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.45)}
.methods-modal-panel{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);width:min(720px,100%);max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
.methods-modal-head{padding:20px 20px 12px;border-bottom:1px solid var(--line);position:relative;padding-right:48px}
.methods-modal-head h2{font-size:18px;font-weight:800;color:var(--navy);margin-bottom:4px}
.methods-modal-close{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:8px;font-size:22px;line-height:1;color:var(--mute)}
.methods-tabs{display:flex;gap:4px;padding:12px 20px 0;border-bottom:1px solid var(--line)}
.methods-tab{padding:8px 14px;font-size:13px;font-weight:600;color:var(--mute);border-bottom:2px solid transparent;margin-bottom:-1px}
.methods-tab.active{color:var(--teal);border-bottom-color:var(--teal)}
.methods-tab-panel{display:none;padding:16px 20px;overflow-y:auto;flex:1;min-height:120px;max-height:40vh}
.methods-tab-panel.active{display:block}
.methods-pre{font-family:var(--mono,ui-monospace,monospace);font-size:12px;line-height:1.55;color:var(--body);
  white-space:pre-wrap;word-break:break-word;margin:0;background:var(--canvas);padding:14px;border-radius:var(--r-s);border:1px solid var(--line)}
.methods-pre.compact{max-height:160px;overflow-y:auto}
.methods-actions{display:flex;flex-wrap:wrap;gap:8px;padding:14px 20px 20px;border-top:1px solid var(--line)}

/* ---- my pilot hub ---- */
.pilot-filter-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.pilot-chip{padding:7px 14px;font-size:12.5px;font-weight:600;border-radius:20px;border:1px solid var(--line-d);
  background:var(--card);color:var(--mute);transition:.12s}
.pilot-chip.active{background:var(--tealbg);border-color:var(--teal);color:var(--teal)}
.pilot-table .pilot-row{cursor:pointer;transition:background .12s}
.pilot-table .pilot-row:hover{background:var(--canvas)}
.pilot-table .pilot-row-selected{background:var(--tealbg)}
.pilot-detail{margin-top:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow-l)}
.pilot-detail.empty{padding:28px;text-align:center}
.pilot-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.pilot-detail-head h3{font-size:16px;font-weight:800;color:var(--navy)}
.pilot-stages{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.pilot-stage-dot{font-size:10.5px;font-weight:700;padding:4px 10px;border-radius:20px;background:var(--canvas);color:var(--faint);border:1px solid var(--line)}
.pilot-stage-dot.done{background:var(--okbg);color:var(--ok);border-color:transparent}
.pilot-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
@media(max-width:640px){.pilot-detail-grid{grid-template-columns:1fr}}
.pilot-block h4,.methods-block-head h4{font-size:12px;font-weight:700;color:var(--navy);margin-bottom:8px;text-transform:uppercase;letter-spacing:.03em}
.methods-block{border-top:1px solid var(--line);padding-top:16px}
.methods-block-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.methods-block-head h4{margin:0}
.methods-collapse{margin-bottom:8px;border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden}
.methods-collapse summary{padding:10px 12px;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;background:var(--canvas)}
.methods-collapse .methods-pre{border:none;border-radius:0;border-top:1px solid var(--line)}
.pilot-export-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pilot-advanced-export{position:relative}
.pilot-advanced-menu{position:absolute;top:100%;left:0;margin-top:4px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-s);box-shadow:var(--shadow);min-width:220px;z-index:10;padding:4px}
.pilot-advanced-menu button{display:block;width:100%;text-align:left;padding:10px 12px;font-size:13px;color:var(--body);border-radius:6px}
.pilot-advanced-menu button:hover{background:var(--canvas)}
.tbl-wrap{overflow-x:auto}