:root{
  --navy:#11233f; --navy2:#1a3155; --steel:#5b7196; --steel2:#8499b8;
  --sand:#e9e2d3; --sand2:#f4efe5; --paper:#fbfaf6; --ink:#16202e;
  --line:#dcd6c8; --line2:#e7e2d6;
  --live:#2f7d6b; --livebg:#e7f1ee; --livedot:#34a085;
  --lock:#9a917f; --lockbg:#f1ede3;
  --alert:#a33a3a; --alertbg:#f7e6e6; --gold:#b08a3e; --warn:#9a6b1a; --warnbg:#f6ecd5;
  --shadow:0 1px 2px rgba(17,35,63,.04),0 8px 28px rgba(17,35,63,.07);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Inter',system-ui,sans-serif;background:var(--sand2);color:var(--ink);
  -webkit-font-smoothing:antialiased;line-height:1.5}
::selection{background:var(--navy);color:#fff}
button{font-family:inherit;cursor:pointer;border:none;background:none}
.app{display:grid;grid-template-columns:262px 1fr;min-height:100vh}

/* ============ RAIL ============ */
.rail{background:var(--navy);color:#cdd6e4;display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{padding:22px 22px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
.brand .mark{display:flex;align-items:baseline;gap:9px}
.brand .b{font-family:'Fraunces',serif;font-weight:600;font-size:22px;color:#fff;letter-spacing:-.01em}
.brand .by{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel2);font-weight:600}
.brand .sub{font-size:11px;color:var(--steel);margin-top:5px;letter-spacing:.02em}
.tenant{padding:13px 22px;border-bottom:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;gap:11px}
.tenant .av{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#27466f,#16294a);display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:13px;color:#dfe8f4;flex:none;border:1px solid rgba(255,255,255,.1)}
.tenant .who{min-width:0}
.tenant .who .n{font-size:13px;font-weight:600;color:#eef3fa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tenant .who .p{font-size:10.5px;color:var(--steel);margin-top:1px}

.navsec{padding:16px 14px 6px}
.navsec .lbl{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#6f84a6;
  padding:0 8px 7px;font-weight:600}
.nav{display:flex;flex-direction:column;gap:1px}
.nav button{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;
  width:100%;text-align:left;color:#bcc8db;font-size:13.5px;font-weight:500;transition:.13s;position:relative}
.nav button .ic{width:17px;height:17px;flex:none;opacity:.82}
.nav button .t{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav button:hover{background:rgba(255,255,255,.05);color:#eaf0f8}
.nav button.on{background:rgba(95,153,209,.16);color:#fff}
.nav button.on .ic{opacity:1}
.nav button.locked{color:#7f8ba0}
.nav button.locked .t{color:#8593a8}
.dotlive{width:6px;height:6px;border-radius:50%;background:var(--livedot);flex:none;
  box-shadow:0 0 0 3px rgba(52,160,133,.18)}
.lockic{width:13px;height:13px;flex:none;opacity:.6}
.railftr{margin-top:auto;padding:14px 22px;border-top:1px solid rgba(255,255,255,.08);
  font-size:11px;color:var(--steel);line-height:1.6}
.railftr a{color:var(--steel2);text-decoration:none}

/* ============ MAIN ============ */
.main{min-width:0;display:flex;flex-direction:column}
.topbar{height:58px;background:var(--paper);border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:20}
.crumb{font-size:13px;color:var(--steel);display:flex;align-items:center;gap:8px}
.crumb b{color:var(--ink);font-weight:600}
.crumb .sl{opacity:.4}
.topact{display:flex;align-items:center;gap:10px}
.pill{font-size:11px;font-weight:600;padding:5px 11px;border-radius:20px;letter-spacing:.02em}
.pill.live{background:var(--livebg);color:var(--live);display:inline-flex;align-items:center;gap:6px}
.pill.live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--livedot)}
.askbtn{background:var(--navy);color:#fff;font-size:13px;font-weight:600;padding:8px 15px;border-radius:9px;
  display:inline-flex;align-items:center;gap:7px;transition:.14s}
.askbtn:hover{background:var(--navy2)}
.askbtn .sp{width:7px;height:7px;border-radius:50%;background:var(--steel2);
  box-shadow:0 0 0 3px rgba(132,153,184,.3)}

.view{padding:28px;max-width:1180px;width:100%;margin:0 auto;flex:1}

/* ============ OVERVIEW ============ */
.ovhead{margin-bottom:24px}
.ovhead h1{font-family:'Fraunces',serif;font-weight:600;font-size:29px;letter-spacing:-.015em;color:var(--navy)}
.ovhead p{font-size:14px;color:#6a7689;margin-top:6px;max-width:620px}
.deptlbl{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--steel);
  font-weight:600;margin:26px 0 13px;display:flex;align-items:center;gap:10px}
.deptlbl::after{content:"";flex:1;height:1px;background:var(--line2)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:14px}
.mod{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px;
  display:flex;flex-direction:column;min-height:166px;transition:.16s;position:relative;overflow:hidden}
.mod .top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:13px}
.mod .glyph{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  background:var(--sand);color:var(--navy);flex:none}
.mod .glyph svg{width:20px;height:20px}
.mod h3{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.mod .desc{font-size:12.5px;color:#71798a;line-height:1.5;flex:1}
.mod .foot{margin-top:14px;display:flex;align-items:center;justify-content:space-between}
.tag{font-size:10.5px;font-weight:600;padding:4px 9px;border-radius:6px;letter-spacing:.02em;
  display:inline-flex;align-items:center;gap:5px}
.tag.live{background:var(--livebg);color:var(--live)}
.tag.live::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--livedot)}
.tag.avail{background:var(--lockbg);color:var(--lock)}
.mod.live{cursor:pointer;border-color:#cfdcd6;background:linear-gradient(180deg,#fbfdfc,var(--paper))}
.mod.live:hover{border-color:var(--livedot);box-shadow:var(--shadow);transform:translateY(-2px)}
.mod.live .glyph{background:var(--livebg);color:var(--live)}
.mod.locked .glyph{background:var(--lockbg);color:var(--lock)}
.mod.locked h3{color:#5f6675}
.mod .open{font-size:12px;font-weight:600;color:var(--live);display:inline-flex;align-items:center;gap:4px}
.mod.demo{cursor:pointer}
.mod.demo:hover{border-color:#aebdd4;box-shadow:var(--shadow);transform:translateY(-2px)}
.mod.demo .glyph{background:#eef1f7;color:#3a567f}
.mod.demo h3{color:var(--ink)}
.mod.demo .tag.avail{background:#eef1f7;color:#3a567f}
.mod .demolink{font-size:12px;font-weight:600;color:#3a567f;display:inline-flex;align-items:center;gap:4px}
.mod .req{font-size:12px;font-weight:600;color:var(--steel);display:inline-flex;align-items:center;gap:4px;
  padding:5px 0;transition:.13s}
.mod.locked:hover .req{color:var(--navy)}
.lockstripe{position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent,transparent 11px,rgba(154,145,127,.025) 11px,rgba(154,145,127,.025) 22px);pointer-events:none}

/* ============ CHARTERING MODULE ============ */
.modview{display:none}
.modview.on{display:block}
.modhead{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:6px}
.modhead h1{font-family:'Fraunces',serif;font-weight:600;font-size:26px;letter-spacing:-.015em;color:var(--navy)}
.modhead .lede{font-size:13.5px;color:#6a7689;margin-top:5px;max-width:560px}
.runbar{display:flex;align-items:center;gap:12px;margin:22px 0 20px;flex-wrap:wrap}
.runbtn{background:var(--navy);color:#fff;font-size:13.5px;font-weight:600;padding:10px 18px;border-radius:10px;
  display:inline-flex;align-items:center;gap:9px;transition:.14s}
.runbtn:hover{background:var(--navy2)}
.runbtn:disabled{opacity:.5;cursor:default}
.runbtn .d{width:8px;height:8px;border-radius:50%;background:#7fd4bd}
.muted{font-size:12.5px;color:#8a93a3}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:880px){.cols{grid-template-columns:1fr}}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:13px;overflow:hidden}
.panel .ph{padding:12px 15px;border-bottom:1px solid var(--line2);display:flex;align-items:center;
  justify-content:space-between;background:var(--sand2)}
.panel .ph h4{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--steel);font-weight:600}
.panel .ph .ct{font-size:11px;color:#9aa2b1;font-weight:500}
.list{max-height:340px;overflow-y:auto}
.row{padding:12px 15px;border-bottom:1px solid var(--line2);font-size:13px}
.row:last-child{border:none}
.row .r1{display:flex;align-items:center;justify-content:space-between;gap:10px}
.row .nm{font-weight:600;color:var(--ink)}
.row .meta{font-size:11.5px;color:#8a93a3;margin-top:3px;display:flex;gap:10px;flex-wrap:wrap}
.row .meta span{display:inline-flex;align-items:center;gap:4px}
.badge{font-size:10px;font-weight:700;padding:2px 7px;border-radius:5px;letter-spacing:.03em}
.badge.ship{background:#e8eef7;color:#3a567f}
.badge.cargo{background:#f4ecdc;color:#8a6a26}

.matchwrap{margin-top:18px}
.match{background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:16px;margin-bottom:12px;
  opacity:0;transform:translateY(8px);transition:.4s}
.match.show{opacity:1;transform:none}
.match.top{border-color:var(--livedot);background:linear-gradient(180deg,#fafdfb,var(--paper))}
.match .mh{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
.match .pair{font-weight:600;font-size:14.5px;color:var(--navy);display:flex;align-items:center;gap:9px}
.match .pair .vs{color:#b9c0cc;font-weight:400;font-size:12px}
.score{font-family:'Fraunces',serif;font-weight:600;font-size:21px;letter-spacing:-.01em}
.score.hi{color:var(--live)} .score.mid{color:var(--gold)} .score.lo{color:#b06a4e}
.score small{font-size:11px;font-family:'Inter';color:#9aa2b1;font-weight:500;margin-left:2px}
.facts{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:11px}
.fact{font-size:11px;padding:4px 9px;border-radius:6px;background:var(--sand2);color:#5d6577;
  border:1px solid var(--line2);display:inline-flex;align-items:center;gap:5px}
.fact.ok{background:var(--livebg);color:var(--live);border-color:#cfe5dd}
.fact.no{background:#f8ece6;color:#b0613e;border-color:#ecd5c8}
.rationale{font-size:12.5px;color:#5d6577;line-height:1.55;padding:11px 13px;background:var(--sand2);
  border-radius:9px;border-left:3px solid var(--steel2)}
.rationale.ruled{border-left-color:#cba}
.rationale b{color:var(--ink);font-weight:600}

/* ============ CHARTERING FLOW ============ */
.stepbar{display:flex;gap:6px;margin:6px 0 18px;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;color:#9aa2b1;
  padding:7px 13px 7px 9px;border-radius:9px;background:var(--paper);border:1px solid var(--line2);transition:.16s}
.step .sn{width:19px;height:19px;border-radius:50%;background:var(--sand);color:#9aa2b1;font-size:11px;
  font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.step.on{color:var(--navy);border-color:#cfdcd6;background:linear-gradient(180deg,#fbfdfc,var(--paper))}
.step.on .sn{background:var(--live);color:#fff}
.step.done{color:var(--live)}
.step.done .sn{background:var(--livebg);color:var(--live)}
.stage{display:none}
.stage.on{display:block;animation:fadein .35s ease}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.inbox{display:flex;flex-direction:column;gap:9px}
.mail{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 16px;transition:.3s;position:relative}
.mail .mtop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:5px}
.mail .from{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mail .time{font-size:11px;color:#aab1bf;flex:none}
.mail .subj{font-size:12.5px;color:#5d6577;font-weight:500;margin-bottom:6px}
.mail .body{font-size:12px;color:#808997;line-height:1.55;max-height:42px;overflow:hidden;position:relative}
.mail .body.full{max-height:none}
.mail .verdict{position:absolute;top:13px;right:14px;font-size:10px;font-weight:700;letter-spacing:.04em;
  padding:3px 8px;border-radius:5px;opacity:0;transform:scale(.9);transition:.3s}
.mail.tagged .verdict{opacity:1;transform:none}
.mail .verdict.ship{background:#e8eef7;color:#3a567f}
.mail .verdict.cargo{background:#f4ecdc;color:#8a6a26}
.mail .verdict.noise{background:#f0ede6;color:#a39a86}
.mail .verdict b{font-weight:700;opacity:.7;margin-left:3px;font-variant-numeric:tabular-nums}
.mail.noise.tagged{opacity:.52}
.mail.ship.tagged{border-color:#cdd9ec}
.mail.cargo.tagged{border-color:#e8dcc2}

.proclog{background:#0e1d34;border-radius:11px;padding:13px 15px;margin-bottom:16px;font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:11.5px;line-height:1.7;color:#9fb3d1;max-height:150px;overflow-y:auto}
.proclog .pl{opacity:0;animation:plin .25s forwards}
.proclog .pl .t{color:#5e7499}
.proclog .pl .g{color:#5ec9a8} .proclog .pl .a{color:#e3c98a} .proclog .pl b{color:#dce6f4;font-weight:600}
@keyframes plin{to{opacity:1}}

/* ============ MODULE DEMO SHARED ============ */
.pill.demo{background:#eef1f7;color:#3a567f}
.pill.demo::before{content:"";width:6px;height:6px;border-radius:50%;background:#5b7196}
.demohead{margin-bottom:6px}
.demohead h1{font-family:'Fraunces',serif;font-weight:600;font-size:26px;letter-spacing:-.015em;color:var(--navy)}
.demohead .lede{font-size:13.5px;color:#6a7689;margin-top:5px;max-width:600px}
.availnote{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--lock);
  background:var(--lockbg);border:1px solid #e6e0d2;padding:5px 11px;border-radius:7px;margin-top:12px}
.availnote svg{width:13px;height:13px}
.srcline{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:#7a8396;
  background:var(--sand2);border:1px solid var(--line2);padding:6px 12px;border-radius:8px;margin-top:12px;margin-right:10px}
.srcline svg{width:13px;height:13px;color:var(--steel);flex:none}
.srcline b{color:var(--navy);font-weight:600}
.demofoot{margin-top:22px;padding:16px 18px;background:linear-gradient(180deg,#fbfdfc,var(--paper));
  border:1px solid #cfdcd6;border-radius:13px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.demofoot .dt{font-size:13px;color:#475063;max-width:560px;line-height:1.5}
.demofoot .dt b{color:var(--navy);font-weight:600}
.demofoot button{background:var(--navy);color:#fff;font-size:13px;font-weight:600;padding:10px 17px;border-radius:9px;flex:none;transition:.14s}
.demofoot button:hover{background:var(--navy2)}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:11px;margin:18px 0}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:13px 15px}
.stat .v{font-family:'Fraunces',serif;font-weight:600;font-size:23px;color:var(--navy);letter-spacing:-.01em}
.stat .v.warn{color:var(--warn)} .stat .v.good{color:var(--live)} .stat .v.bad{color:#b0613e}
.stat .l{font-size:11px;color:#8a93a3;margin-top:3px;font-weight:500}

/* TRIAGE */
.tmail{background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:13px 15px;margin-bottom:8px;
  display:flex;gap:13px;align-items:flex-start;transition:.3s}
.tmail .prio{width:4px;align-self:stretch;border-radius:3px;background:var(--line);flex:none;min-height:38px}
.tmail.tagged.crit .prio{background:#c2553a} .tmail.tagged.high .prio{background:var(--warn)}
.tmail.tagged.norm .prio{background:var(--steel2)} .tmail.tagged.low .prio{background:#c3bdaf}
.tmail .tc{flex:1;min-width:0}
.tmail .th{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:3px}
.tmail .tfrom{font-size:13px;font-weight:600;color:var(--ink)}
.tmail .ttime{font-size:11px;color:#aab1bf;flex:none}
.tmail .tsubj{font-size:12.5px;color:#5d6577}
.tmail .tmeta{margin-top:8px;display:flex;gap:7px;flex-wrap:wrap;opacity:0;max-height:0;overflow:hidden;transition:.35s}
.tmail.tagged .tmeta{opacity:1;max-height:60px}
.tchip{font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:5px;letter-spacing:.02em}
.tchip.crit{background:#f8e8e3;color:#b04a30} .tchip.high{background:var(--warnbg);color:var(--warn)}
.tchip.norm{background:#eef1f7;color:#3a567f} .tchip.low{background:var(--lockbg);color:var(--lock)}
.tchip.route{background:var(--livebg);color:var(--live)}
.tchip.action{background:var(--sand2);color:#5d6577;border:1px solid var(--line2)}

/* NOON / SPLIT */
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:4px}
@media(max-width:880px){.split{grid-template-columns:1fr}}
.raw{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:12px;line-height:1.65;color:#5d6577;white-space:pre-wrap}
.fields{display:flex;flex-direction:column}
.fld{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line2);
  opacity:0;transform:translateX(6px);transition:.3s}
.fld.show{opacity:1;transform:none}
.fld:last-child{border:none}
.fld .fl{font-size:12px;color:#8a93a3}
.fld .fv{font-size:13px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:7px}
.fld .flag{font-size:10px;font-weight:700;padding:2px 7px;border-radius:5px}
.fld .flag.ok{background:var(--livebg);color:var(--live)}
.fld .flag.warn{background:var(--warnbg);color:var(--warn)}
.fld .flag.bad{background:#f8e8e3;color:#b04a30}
.noonalert{margin-top:14px;padding:12px 14px;border-radius:10px;font-size:12.5px;line-height:1.55;
  background:var(--warnbg);border:1px solid #e8d6ad;color:#6f5318}
.noonalert b{color:#5a420f}

/* PSC */
.pscvessel{display:flex;align-items:center;gap:13px;background:var(--paper);border:1px solid var(--line);
  border-radius:12px;padding:14px 16px;margin-bottom:4px}
.pscvessel .pv{flex:1}
.pscvessel .pv .pn{font-size:15px;font-weight:600;color:var(--navy)}
.pscvessel .pv .pm{font-size:12px;color:#8a93a3;margin-top:2px}
.pscvessel .port{text-align:right}
.pscvessel .port .pl{font-size:11px;color:#8a93a3}
.pscvessel .port .pp{font-size:14px;font-weight:600;color:var(--ink)}
.def{background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:14px 16px;margin-bottom:9px;
  opacity:0;transform:translateY(8px);transition:.4s}
.def.show{opacity:1;transform:none}
.def .dh{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:7px}
.def .dttl{font-size:13.5px;font-weight:600;color:var(--ink)}
.def .dcode{font-size:11px;color:#9aa2b1;font-weight:500;margin-top:2px}
.def .lik{text-align:right;flex:none}
.def .lik .lv{font-family:'Fraunces',serif;font-weight:600;font-size:18px}
.def .lik .lv.hi{color:#b0613e} .def .lik .lv.mid{color:var(--warn)} .def .lik .lv.lo{color:var(--steel)}
.def .lik .ll{font-size:10px;color:#9aa2b1}
.def .dwhy{font-size:12.5px;color:#5d6577;line-height:1.55;padding:10px 12px;background:var(--sand2);
  border-radius:8px;border-left:3px solid var(--steel2)}
.def .dwhy b{color:var(--ink);font-weight:600}
.def.crit .dwhy{border-left-color:#c2553a}

/* VOYAGE OPS */
.voygrid{display:grid;grid-template-columns:1.3fr 1fr;gap:16px;margin-top:4px}
@media(max-width:980px){.voygrid{grid-template-columns:1fr}}
.voymap{background:#0a1628;border-radius:13px;overflow:hidden;position:relative;min-height:300px;border:1px solid #1a3155}
.voymap svg{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover}
.voymap .mlbl{position:absolute;top:13px;left:15px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:#6f84a6;font-weight:600;z-index:2}
.voyship{position:absolute;transform:translate(-50%,-50%);cursor:pointer;z-index:3}
.voyship .vd{width:11px;height:11px;border-radius:50%;border:2px solid #0e1d34;transition:.2s}
.voyship .vd.ok{background:#5ec9a8} .voyship .vd.warn{background:#e3b85a} .voyship .vd.bad{background:#e07a5a}
.voyship:hover .vd{transform:scale(1.4)}
.voyship .vn{position:absolute;left:15px;top:-6px;font-size:10.5px;color:#aebfd6;white-space:nowrap;
  background:rgba(14,29,52,.88);padding:2px 6px;border-radius:4px;opacity:0;transition:.15s;pointer-events:none}
.voyship:hover .vn{opacity:1}
.voylist{display:flex;flex-direction:column;gap:9px}
.voycard{background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:13px 15px;
  opacity:0;transform:translateY(8px);transition:.4s}
.voycard.show{opacity:1;transform:none}
.voycard.alert{border-color:#e8d0a8;background:linear-gradient(180deg,#fdfaf3,var(--paper))}
.voycard .vh{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.voycard .vnm{font-size:13.5px;font-weight:600;color:var(--navy)}
.voycard .vst{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:5px}
.voycard .vst.ok{background:var(--livebg);color:var(--live)}
.voycard .vst.warn{background:var(--warnbg);color:var(--warn)}
.voycard .vst.bad{background:#f8e8e3;color:#b04a30}
.voycard .vroute{font-size:12px;color:#8a93a3;margin-bottom:8px}
.voycard .vbar{height:5px;background:var(--sand);border-radius:3px;overflow:hidden;margin-bottom:8px}
.voycard .vbar i{display:block;height:100%;background:var(--steel2);border-radius:3px;width:0;transition:1s ease}
.voycard .vmsg{font-size:12px;color:#5d6577;line-height:1.5}
.voycard .vmsg b{color:var(--ink);font-weight:600}
.voycard.alert .vmsg b{color:var(--warn)}

/* ============ DASHBOARD ============ */
.dashhead{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px;flex-wrap:wrap}
.dashhead h1{font-family:'Fraunces',serif;font-weight:600;font-size:29px;letter-spacing:-.015em;color:var(--navy)}
.dashhead p{font-size:14px;color:#6a7689;margin-top:6px;max-width:600px}
.dashcta{background:var(--navy);color:#fff;font-size:13px;font-weight:600;padding:10px 17px;border-radius:10px;flex:none;transition:.14s}
.dashcta:hover{background:var(--navy2)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:18px}
@media(max-width:900px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--paper);border:1px solid var(--line);border-radius:13px;padding:16px 17px;position:relative;overflow:hidden}
.kpi .klbl{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);font-weight:600;margin-bottom:11px;line-height:1.3;padding-right:62px;min-height:26px}
.kpi .ktag{position:absolute;top:15px;right:15px;font-size:10px;font-weight:700;padding:3px 8px;border-radius:5px;letter-spacing:.02em}
.kpi .ktag.ok{background:var(--livebg);color:var(--live)}
.kpi .ktag.warn{background:var(--warnbg);color:var(--warn)}
.kpi .ktag.bad{background:#f8e8e3;color:#b04a30}
.kpi .ktag.info{background:#eef1f7;color:#3a567f}
.kpi .kval{font-family:'Fraunces',serif;font-weight:600;font-size:30px;color:var(--navy);letter-spacing:-.02em;line-height:1}
.kpi .ksub{font-size:11.5px;color:#8a93a3;margin-top:7px}
.kpi .ksub.up{color:var(--live)} .kpi .ksub.down{color:#b06a4e}
.dashgrid{display:grid;grid-template-columns:1.25fr 1fr;gap:16px}
@media(max-width:980px){.dashgrid{grid-template-columns:1fr}}
.dashpanel{background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.dashpanel .dph{padding:14px 17px;border-bottom:1px solid var(--line2);display:flex;align-items:center;justify-content:space-between;background:var(--sand2)}
.dashpanel .dph h3{font-size:13px;letter-spacing:.04em;color:var(--navy);font-weight:600}
.dashpanel .dph .dphsub{font-size:11.5px;color:#9aa2b1;font-weight:500}
.dashmap{border-radius:0;border:none;min-height:340px;margin:0}
.excboard{max-height:354px;overflow-y:auto;padding-bottom:2px}
.exc{padding:14px 17px;border-bottom:1px solid var(--line2);border-left:3px solid var(--line);transition:.13s;cursor:pointer}
.exc:last-child{border-bottom:none}
.exc:hover{background:var(--sand2)}
.exc.crit{border-left-color:#c2553a} .exc.warn{border-left-color:var(--warn)} .exc.ok{border-left-color:var(--steel2)}
.exc .eh{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:4px}
.exc .etitle{font-size:13px;font-weight:600;color:var(--ink);line-height:1.35}
.exc .emod{font-size:10px;font-weight:700;letter-spacing:.03em;padding:2px 7px;border-radius:5px;flex:none;background:#eef1f7;color:#3a567f}
.exc .edesc{font-size:12px;color:#6a7280;line-height:1.5;margin-bottom:5px}
.exc .emeta{font-size:11px;color:#9aa2b1;display:flex;gap:8px;align-items:center}
.exc .emeta .dot{width:3px;height:3px;border-radius:50%;background:#c3cad6}

/* ============ COMMERCIAL-DESK DASHBOARD (Build 4) ============
   Replaces the World-B "Fleet at a glance" dashboard above (.dashhead/
   .kpis/.dashgrid/.dashmap/.excboard/.exc are left in place, unused, rather
   than risk collateral edits elsewhere -- nothing in v-dashboard's new
   markup references them anymore). Reuses existing tokens only, no new
   design system, per spec section 3. */
.dashgreet{margin-bottom:22px}
.dashgreet h1{font-family:'Fraunces',serif;font-weight:600;font-size:27px;letter-spacing:-.015em;color:var(--navy)}
.dashgreet p{font-size:14px;color:#6a7689;margin-top:6px}

.widgetgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:22px}
@media(max-width:980px){.widgetgrid{grid-template-columns:1fr}}
.widget{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:16px 18px;cursor:pointer;transition:.13s}
.widget:hover{border-color:var(--steel2)}
.widget.locked{background:transparent;border:none;padding:0;cursor:default}
.widget.subwidget{padding:14px 16px}
.wgttop{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.wgttop h3{font-family:'Fraunces',serif;font-weight:600;font-size:16px;color:var(--navy)}
.wgtlive{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:5px;background:var(--livebg);color:var(--live)}
.wgtcounts{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:13px}
.wgtcount{display:flex;flex-direction:column}
.wgtnum{font-family:'Fraunces',serif;font-weight:600;font-size:23px;color:var(--navy);line-height:1}
.wgtlbl{font-size:10.5px;letter-spacing:.03em;color:var(--steel);font-weight:600;margin-top:4px;max-width:120px}
.wgtrows{border-top:1px solid var(--line2)}
.wgtrow{padding:9px 0;border-bottom:1px solid var(--line2);display:flex;flex-direction:column;gap:3px;position:relative}
.wgtrow:last-child{border-bottom:none}
.wgtrow.rejection .wgtrowtitle{color:#b04a30}
.wgtrowtitle{font-size:12.5px;font-weight:600;color:var(--ink)}
.wgtrowsub{font-size:11.5px;color:#8a93a3;line-height:1.5}
.wgtimo{font-size:10.5px;color:#9aa2b1;font-weight:500;margin-left:4px}
.wgtchip{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.02em;padding:2px 8px;border-radius:5px;width:fit-content}
.wgtchip.ok{background:var(--livebg);color:var(--live)}
.wgtchip.warn{background:var(--warnbg);color:var(--warn)}
.wgtchip.bad{background:#f8e8e3;color:#b04a30}
.wgtchip.info{background:#eef1f7;color:#3a567f}
.wgtflag{font-size:9.5px;font-weight:600;color:var(--teal, #289CB4);margin-top:2px}
.wgtempty{font-size:12px;color:#9aa2b1;padding:10px 0}
.wgtfoot{margin-top:12px;padding-top:11px;border-top:1px solid var(--line2)}
.wgtopen{font-size:12px;font-weight:600;color:var(--navy)}

.attnpanel .attnboard{max-height:400px;overflow-y:auto}
.attn{padding:13px 17px;border-bottom:1px solid var(--line2);display:flex;align-items:center;gap:10px;cursor:pointer;transition:.13s}
.attn:last-child{border-bottom:none}
.attn:hover{background:var(--sand2)}
.attnmod{font-size:10px;font-weight:700;letter-spacing:.03em;padding:2px 8px;border-radius:5px;flex:none;background:#eef1f7;color:#3a567f}
.attntext{font-size:12.5px;color:var(--ink);flex:1;line-height:1.4}
.attngo{font-size:13px;color:#9aa2b1;flex:none}
.attnempty{padding:22px 17px;text-align:center;font-size:12.5px;color:#9aa2b1}

/* ---- Phase 2: live data. Trust bands (A1/A2), review queue, opportunity.
   Reuses the tokens above; no new design system. A trust band is REPORTED
   age, deliberately styled apart from the .st-* lifecycle chips so the two
   are not read as one thing -- they answer different questions and they
   disagree (see app/staleness.py). ---- */
.wgtpos{padding:7px 0;border-bottom:1px solid var(--line2);display:flex;align-items:center;gap:8px}
.wgtpos:last-child{border-bottom:none}
.wgtposlbl{font-size:12px;color:var(--ink);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.band{font-size:9.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:2px 7px;border-radius:5px;flex:none}
.band-full{background:var(--livebg);color:var(--live)}
.band-qualified{background:var(--warnbg);color:var(--warn)}
.band-stale{background:#f0eef1;color:#8a7f92}
.bandage{font-size:10.5px;color:#9aa2b1;flex:none}

.attn.held{border-left:3px solid var(--warn)}
.attnsub{font-size:11px;color:#9aa2b1;line-height:1.45;margin-top:3px}
.attnacts{display:flex;gap:6px;flex:none}

.oppmod{font-size:10px;font-weight:700;letter-spacing:.03em;padding:2px 8px;border-radius:5px;flex:none;background:#f3eee7;color:#8a6d3a}
.oppnum{font-family:'Fraunces',serif;font-weight:600;font-size:17px;color:var(--navy);flex:none}

/* "Unidentified" is the absence of a verdict, so it is deliberately the
   quietest chip on the board -- neutral, not a green/amber/red judgment. */
.wgtchip.none{background:#f0eef1;color:#7a7285}
.wgtrow.unidentified .wgtrowtitle{color:#8a7f92}

.firstrun{padding:26px 17px;text-align:center}
.firstrun b{display:block;font-size:13.5px;color:var(--ink);margin-bottom:6px}
.firstrun span{font-size:12.5px;color:#9aa2b1;line-height:1.6}

/* ============ ACTIVATION / PLACEHOLDER ============ */
.activate{max-width:560px;margin:8px auto;text-align:center;padding:30px 0}
.activate.wide{max-width:760px}
.activate .ico{width:62px;height:62px;border-radius:16px;background:var(--lockbg);color:var(--lock);
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px}
.procprev{max-width:720px;margin:6px auto 26px;text-align:left}
.procprev .ppt{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);font-weight:600;margin:0 0 12px;text-align:center}
.qcompare{background:var(--paper);border:1px solid var(--line);border-radius:13px;overflow:hidden;box-shadow:var(--shadow)}
.qcompare .qreq{padding:13px 16px;background:var(--sand2);border-bottom:1px solid var(--line2);font-size:12.5px;color:#5d6577}
.qcompare .qreq b{color:var(--navy);font-weight:600}
.qtable{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;font-size:12.5px}
.qtable .qc{padding:10px 14px;border-bottom:1px solid var(--line2)}
.qtable .qhrow .qc{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--steel);font-weight:600;background:#fafaf6}
.qtable .ql{color:#5d6577} .qtable .qc.win{background:var(--livebg)}
.qtable .qv{font-weight:600;color:var(--ink);text-align:right}
.qtable .qv.win{color:var(--live)}
.qaward{padding:13px 16px;background:linear-gradient(180deg,#fbfdfc,var(--paper));border-top:1px solid #cfdcd6;font-size:12.5px;color:#475063;line-height:1.55}
.qaward b{color:var(--live);font-weight:600}
/* PROCUREMENT DEMO (full flow) */
.reqcard{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:15px 17px;margin-bottom:16px}
.reqcard .rqh{display:flex;align-items:center;gap:9px;margin-bottom:10px;flex-wrap:wrap}
.reqcard .rqh .rqno{font-size:11px;font-weight:700;letter-spacing:.03em;background:var(--navy);color:#fff;padding:3px 9px;border-radius:6px}
.reqcard .rqh .rqv{font-size:13px;font-weight:600;color:var(--navy)}
.reqcard .rqitems{display:flex;flex-direction:column;gap:6px}
.reqcard .rqi{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:#5d6577;padding:6px 0;border-bottom:1px dashed var(--line2)}
.reqcard .rqi:last-child{border:none}
.reqcard .rqi b{color:var(--ink);font-weight:600}
.qarrivals{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:16px}
@media(max-width:820px){.qarrivals{grid-template-columns:1fr}}
.qarr{background:var(--paper);border:1px solid var(--line);border-radius:11px;padding:13px 15px;opacity:0;transform:translateY(8px);transition:.4s}
.qarr.show{opacity:1;transform:none}
.qarr .qa1{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;gap:8px}
.qarr .qsup{font-size:13px;font-weight:600;color:var(--navy)}
.qarr .qfmt{font-size:10px;font-weight:700;letter-spacing:.03em;padding:2px 7px;border-radius:5px;background:#eef1f7;color:#3a567f;flex:none}
.qarr .qmeta{font-size:11.5px;color:#8a93a3;line-height:1.6}
.qarr .qmeta b{color:var(--ink);font-weight:600}
.cmptable{background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:16px}
.cmptable .cmh{padding:12px 15px;background:var(--sand2);border-bottom:1px solid var(--line2);font-size:12px;letter-spacing:.04em;color:var(--navy);font-weight:600}
.cmpgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;font-size:12.5px}
.cmpgrid .cc{padding:11px 14px;border-bottom:1px solid var(--line2)}
.cmpgrid .chrow .cc{font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--steel);font-weight:600;background:#fafaf6}
.cmpgrid .cl{color:#5d6577}
.cmpgrid .cv{text-align:right;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.cmpgrid .cc.win{background:var(--livebg)}
.cmpgrid .cv.win{color:var(--live)}
.cmpgrid .cv.bad{color:#b0613e}
.cmpgrid .totalrow .cc{border-top:2px solid var(--line);background:#fafaf6;font-weight:700}
.cmpgrid .totalrow .cv{font-family:'Fraunces',serif;font-size:15px}
.recobox{background:linear-gradient(180deg,#fafdfb,var(--paper));border:1px solid #cfdcd6;border-radius:12px;padding:15px 17px}
.recobox .rt{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--live);font-weight:700;margin-bottom:9px}
.recobox .rt svg{width:15px;height:15px}
.recobox p{font-size:13px;color:#43506a;line-height:1.6}
.recobox p b{color:var(--navy);font-weight:600}
.recobox .flag{margin-top:10px;font-size:12.5px;color:#8a5a2a;background:var(--warnbg);border:1px solid #e8d6ad;border-radius:8px;padding:9px 12px;line-height:1.5}
.recobox .flag b{color:#6f4818}
/* PROCUREMENT — requisition front-half */
.reqflow{display:flex;gap:6px;margin:4px 0 18px;flex-wrap:wrap}
.reqstep{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:500;color:#9aa2b1;padding:7px 12px 7px 9px;border-radius:9px;background:var(--paper);border:1px solid var(--line2);transition:.16s}
.reqstep .rn{width:18px;height:18px;border-radius:50%;background:var(--sand);color:#9aa2b1;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.reqstep.on{color:var(--navy);border-color:#cfdcd6;background:linear-gradient(180deg,#fbfdfc,var(--paper))}
.reqstep.on .rn{background:var(--live);color:#fff}
.reqstep.done{color:var(--live)} .reqstep.done .rn{background:var(--livebg);color:var(--live)}
.origintoggle{display:flex;gap:9px;margin-bottom:15px}
.otog{flex:1;border:1.5px solid var(--line);border-radius:11px;padding:13px 15px;cursor:pointer;transition:.14s;background:var(--paper)}
.otog:hover{border-color:var(--steel2)}
.otog.sel{border-color:var(--live);background:var(--livebg)}
.otog .oth{display:flex;align-items:center;gap:9px;margin-bottom:5px}
.otog .oth svg{width:18px;height:18px;color:var(--navy)}
.otog.sel .oth svg{color:var(--live)}
.otog .ott{font-size:13.5px;font-weight:600;color:var(--navy)}
.otog .otd{font-size:11.5px;color:#8a93a3;line-height:1.5}
.catbox{background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:14px}
.catbox .cbh{padding:11px 15px;background:var(--sand2);border-bottom:1px solid var(--line2);display:flex;align-items:center;justify-content:space-between}
.catbox .cbh .cbt{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--steel);font-weight:600}
.catbox .cbh .cbsrc{font-size:11px;font-weight:600;color:#3a567f}
.catsearch{padding:11px 14px;border-bottom:1px solid var(--line2)}
.catsearch input{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 12px;font-family:inherit;font-size:13px;outline:none;background:var(--paper)}
.catsearch input:focus{border-color:var(--steel2)}
.catresults{max-height:190px;overflow-y:auto}
.catrow{padding:9px 14px;border-bottom:1px solid var(--line2);display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;transition:.1s}
.catrow:last-child{border:none}
.catrow:hover{background:var(--sand2)}
.catrow .ci{min-width:0}
.catrow .cin{font-size:13px;font-weight:600;color:var(--ink)}
.catrow .cic{font-size:11px;color:#8a93a3;margin-top:1px}
.catrow .cadd{font-size:11px;font-weight:700;color:var(--live);flex:none;padding:4px 9px;border-radius:6px;background:var(--livebg)}
.catempty{padding:20px;text-align:center;font-size:12.5px;color:#9aa2b1}
.reqlines{margin-bottom:14px}
.reqln{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--line2)}
.reqln:last-child{border:none}
.reqln .rli{flex:1;min-width:0}
.reqln .rln{font-size:13px;font-weight:600;color:var(--ink)}
.reqln .rlc{font-size:11px;color:#8a93a3;margin-top:1px}
.reqln .qty{display:flex;align-items:center;gap:8px;flex:none}
.reqln .qty button{width:24px;height:24px;border-radius:6px;border:1px solid var(--line);background:var(--paper);font-size:15px;color:var(--navy);display:flex;align-items:center;justify-content:center;line-height:1}
.reqln .qty span{font-size:13px;font-weight:600;min-width:30px;text-align:center;font-variant-numeric:tabular-nums}
.reqln .rmv{color:#b06a4e;font-size:11px;font-weight:600;flex:none;cursor:pointer}
.reqnote{font-size:11.5px;color:#8a93a3;background:var(--sand2);border:1px solid var(--line2);border-radius:8px;padding:9px 12px;line-height:1.5;margin-bottom:14px}
.reqnote b{color:var(--navy);font-weight:600}
.qchip{font-size:10px;font-weight:700;padding:2px 7px;border-radius:5px;letter-spacing:.02em}
.qchip.onboard{background:#e8eef7;color:#3a567f} .qchip.office{background:#f4ecdc;color:#8a6a26}
.activate .ico svg{width:28px;height:28px}
.activate h2{font-family:'Fraunces',serif;font-weight:600;font-size:24px;color:var(--navy);letter-spacing:-.01em}
.activate .role{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);
  font-weight:600;margin-bottom:8px}
.activate p{font-size:14px;color:#6a7689;margin-top:10px;line-height:1.6}
.activate .does{text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:13px;
  padding:18px 20px;margin:22px 0;box-shadow:var(--shadow)}
.activate .does h5{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);
  font-weight:600;margin-bottom:12px}
.activate .does ul{list-style:none;display:flex;flex-direction:column;gap:10px}
.activate .does li{display:flex;gap:11px;font-size:13.5px;color:#475063;line-height:1.5;text-align:left}
.activate .does li svg{width:17px;height:17px;color:var(--live);flex:none;margin-top:1px}
.actbtns{display:flex;gap:11px;justify-content:center;flex-wrap:wrap}
.actbtn{background:var(--navy);color:#fff;font-size:13.5px;font-weight:600;padding:11px 20px;border-radius:10px;transition:.14s}
.actbtn:hover{background:var(--navy2)}
.actbtn.ghost{background:transparent;color:var(--navy);border:1px solid var(--line)}
.actbtn.ghost:hover{background:var(--sand2)}
.actnote{font-size:12px;color:#9aa2b1;margin-top:16px;line-height:1.5}

/* ============ ENTITLEMENTS VIEW ============ */
.entcard{background:var(--paper);border:1px solid var(--line);border-radius:13px;overflow:hidden;box-shadow:var(--shadow)}
.entrow{display:flex;align-items:center;gap:14px;padding:15px 18px;border-bottom:1px solid var(--line2)}
.entrow:last-child{border:none}
.entrow .eg{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:none}
.entrow .eg.live{background:var(--livebg);color:var(--live)}
.entrow .eg.lock{background:var(--lockbg);color:var(--lock)}
.entrow .ei{flex:1;min-width:0}
.entrow .ei .en{font-size:14px;font-weight:600;color:var(--ink)}
.entrow .ei .ed{font-size:12px;color:#8a93a3;margin-top:2px}
.entrow .price{text-align:right;flex:none}
.entrow .price .amt{font-size:14px;font-weight:700;color:var(--navy)}
.entrow .price .amt small{font-size:11px;font-weight:500;color:#9aa2b1}
.entrow .price .st{font-size:11px;font-weight:600;margin-top:2px}
.entrow .price .st.live{color:var(--live)}
.entrow .price .st.lock{color:var(--lock)}
.enttotal{padding:16px 18px;background:var(--sand2);display:flex;align-items:center;justify-content:space-between}
.enttotal .lt{font-size:13px;color:#5d6577}
.enttotal .lv{font-family:'Fraunces',serif;font-weight:600;font-size:19px;color:var(--navy)}
.entnote{font-size:12px;color:#9aa2b1;margin-top:14px;line-height:1.6;max-width:640px}

/* ============ ASK DRAWER ============ */
.scrim{position:fixed;inset:0;background:rgba(17,35,63,.32);backdrop-filter:blur(2px);opacity:0;
  pointer-events:none;transition:.2s;z-index:40}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;height:100vh;width:392px;max-width:92vw;background:var(--paper);
  box-shadow:-12px 0 40px rgba(17,35,63,.16);transform:translateX(100%);transition:.24s cubic-bezier(.4,0,.2,1);
  z-index:41;display:flex;flex-direction:column}
.drawer.on{transform:none}
.dh{padding:17px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.dh .dt{display:flex;align-items:center;gap:10px}
.dh .dt .sp{width:9px;height:9px;border-radius:50%;background:var(--livedot);box-shadow:0 0 0 4px rgba(52,160,133,.16)}
.dh .dt b{font-size:14px;color:var(--navy);font-weight:600}
.dh .dt span{font-size:11px;color:#9aa2b1;display:block;margin-top:1px}
.dh .x{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#8a93a3}
.dh .x:hover{background:var(--sand2)}
.dbody{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:14px}
.msg{font-size:13.5px;line-height:1.55;max-width:88%}
.msg.u{align-self:flex-end;background:var(--navy);color:#fff;padding:10px 13px;border-radius:13px 13px 4px 13px}
.msg.a{align-self:flex-start;color:#3a4254}
.msg.a .ab{background:var(--sand2);border:1px solid var(--line2);padding:11px 13px;border-radius:13px 13px 13px 4px}
.msg.a .src{font-size:11px;color:#9aa2b1;margin-top:6px;padding-left:2px}
.dsugg{padding:12px 20px;border-top:1px solid var(--line2);display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:12px;color:var(--navy);background:var(--sand2);border:1px solid var(--line2);
  padding:6px 11px;border-radius:18px;transition:.12s}
.chip:hover{background:var(--sand);border-color:var(--line)}
.dform{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:9px}
.dform input{flex:1;border:1px solid var(--line);border-radius:10px;padding:10px 13px;font-family:inherit;
  font-size:13.5px;background:var(--paper);outline:none}
.dform input:focus{border-color:var(--steel2)}
.dform button{background:var(--navy);color:#fff;border-radius:10px;width:40px;display:flex;align-items:center;justify-content:center}

/* ============ TOAST ============ */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--navy);
  color:#fff;padding:13px 20px;border-radius:11px;font-size:13.5px;box-shadow:0 12px 32px rgba(17,35,63,.25);
  opacity:0;pointer-events:none;transition:.25s;z-index:60;display:flex;align-items:center;gap:11px;max-width:90vw}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast .ti{width:8px;height:8px;border-radius:50%;background:var(--livedot);flex:none}

@media(max-width:760px){
  .app{grid-template-columns:1fr}
  .rail{position:fixed;left:0;top:0;width:262px;transform:translateX(-100%);transition:.22s;z-index:50}
  .rail.open{transform:none}
  .menubtn{display:flex!important}
  .cols{grid-template-columns:1fr}
}
.menubtn{display:none;width:36px;height:36px;border-radius:8px;align-items:center;justify-content:center;color:var(--navy)}
.menubtn:hover{background:var(--sand2)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}