:root{
  /* LIGHT PALETTE — cerah, optimistis */
  --bg:#F4F6FA;--bg1:#FFFFFF;--bg2:#F0F2F8;--bg3:#E8ECF5;--bg4:#DDE3F0;
  --bdr:#D8DFF0;--bdr2:#C4CCE4;--bdr3:#A8B4D4;
  --t0:#1A2140;--t1:#3A4A6B;--t2:#6B7AA0;--t3:#9AAAC8;
  --acc:#006d32;--acc-bg:#e6f4eb;--acc-bdr:rgba(0,109,50,.2);
  --f1:#FF6B35;--f1-bg:#FFF3EF;--f1-bdr:rgba(255,107,53,.2);
  --f2:#F59E0B;--f2-bg:#FFFBEB;--f2-bdr:rgba(245,158,11,.2);
  --f3:#10B981;--f3-bg:#ECFDF5;--f3-bdr:rgba(16,185,129,.2);
  --hor:#6366F1;--hor-bg:#EEF2FF;--hor-bdr:rgba(99,102,241,.2);
  --cns:#8B5CF6;--cns-bg:#F5F3FF;--cns-bdr:rgba(139,92,246,.2);
  --inf:#0EA5E9;--inf-bg:#F0F9FF;--inf-bdr:rgba(14,165,233,.2);
  --warn:#ba1a1a;--warn-bg:#ffdad6;--warn-bdr:rgba(186,26,26,.2);
  --ok:#006d32;
  --shadow-sm:0 1px 4px rgba(11,28,48,.07),0 1px 2px rgba(11,28,48,.04);
  --shadow:0 4px 20px rgba(11,28,48,.09),0 2px 6px rgba(11,28,48,.05);
  --shadow-lg:0 8px 32px rgba(11,28,48,.10),0 4px 8px rgba(11,28,48,.06);
  --r:8px;--r2:14px;--r3:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--t0);font-family:'Inter',system-ui,sans-serif;font-size:14px;line-height:1.6;min-height:100vh}
.mono{font-family:'JetBrains Mono',monospace}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg2)}
::-webkit-scrollbar-thumb{background:var(--bdr2);border-radius:3px}

/* ── LAYOUT ── */
.app{max-width:1320px;margin:0 auto;padding:1.75rem 1.5rem 5rem}

/* ── TOP BAR ── */
.topbar{background:rgba(248,249,255,.88);border-bottom:1px solid rgba(187,203,185,.2);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);margin:-1.75rem -1.5rem 1.5rem;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;z-index:100}
.topbar-brand{display:flex;align-items:center;gap:10px}
.topbar-ico{width:36px;height:36px;background:var(--acc);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;box-shadow:0 2px 8px rgba(0,109,50,.25)}
.topbar-title{font-size:16px;font-weight:700;color:var(--t0);font-family:'Space Grotesk',sans-serif;letter-spacing:-.3px}
.topbar-sub{font-size:10px;color:var(--t2);margin-top:1px}
.topbar-badges{display:flex;gap:5px;flex-wrap:wrap}
.bdg{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px;letter-spacing:.2px}
.bdg-acc{background:var(--acc-bg);color:var(--acc);border:1px solid var(--acc-bdr)}
.bdg-f1{background:var(--f1-bg);color:var(--f1);border:1px solid var(--f1-bdr)}
.bdg-f2{background:var(--f2-bg);color:var(--f2);border:1px solid var(--f2-bdr)}
.bdg-f3{background:var(--f3-bg);color:var(--f3);border:1px solid var(--f3-bdr)}
.bdg-warn{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-bdr)}
.dl-btn{background:var(--acc);color:#fff;border:none;padding:8px 16px;border-radius:var(--r);font-family:'Inter',sans-serif;font-size:11px;font-weight:700;cursor:pointer;transition:all .15s;white-space:nowrap;box-shadow:0 2px 8px rgba(0,109,50,.28)}
.dl-btn:hover{background:#005224;transform:translateY(-1px)}


/* ── PHASE CARDS ── */
.phase-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:1.25rem}
.phase-row .ph-card{padding:1.25rem 1.375rem}
.phase-row .ph-card .ph-name{font-size:15px}
.phase-row .ph-card .ph-desc{font-size:10.5px}
.phase-row .ph-stat-l{font-size:10px;font-weight:700}
.phase-row .ph-stat-v{font-size:18px;letter-spacing:-.3px}
.ph-card{background:var(--bg2);border:1px solid rgba(187,203,185,.18);border-radius:var(--r2);padding:1.25rem 1.375rem;cursor:pointer;transition:all .2s;box-shadow:var(--shadow-sm)}
.ph-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(0,109,50,.22)}
.ph-card.sel-f1{border-color:var(--f1);background:var(--f1-bg);box-shadow:0 0 0 3px rgba(255,107,53,.12),var(--shadow)}
.ph-card.sel-f2{border-color:var(--f2);background:var(--f2-bg);box-shadow:0 0 0 3px rgba(245,158,11,.12),var(--shadow)}
.ph-card.sel-f3{border-color:var(--f3);background:var(--f3-bg);box-shadow:0 0 0 3px rgba(16,185,129,.12),var(--shadow)}
.ph-card.sel-all{border-color:var(--acc);background:var(--acc-bg);box-shadow:0 0 0 3px rgba(0,109,50,.12),var(--shadow)}
.ph-card.sel-quarter{border-color:var(--acc);background:var(--acc-bg);box-shadow:0 0 0 3px rgba(0,109,50,.15),var(--shadow)}
.ph-card.empty{opacity:.55}
.ph-card.empty:hover{opacity:.85}
.ph-card.sel-all-active{border-color:var(--acc);background:var(--acc-bg);box-shadow:0 0 0 4px rgba(0,109,50,.22),var(--shadow);transform:translateY(-1px)}
.ph-card.dim{opacity:.45}
.ph-card.dim:hover{opacity:.75}
.ph-tgl.tacc{background:var(--acc);color:#fff;border-color:var(--acc)}

/* ════════════════════════════════════════════════════════════
   COMPOUNDS LIST VIEW (horizontal table, static/dynamic tagged)
   ════════════════════════════════════════════════════════════ */
.cmp-legend{font-size:10.5px;color:var(--t2);padding:.5rem .75rem;background:var(--bg1);border:1px solid var(--bdr);border-radius:var(--r);margin-bottom:.625rem;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.cmp-tag{display:inline-block;font-size:9px;font-weight:800;padding:1px 6px;border-radius:8px;letter-spacing:.4px}
.cmp-tag-S{background:var(--inf-bg);color:var(--inf);border:1px solid var(--inf-bdr)}
.cmp-tag-D{background:var(--f1-bg);color:var(--f1);border:1px solid var(--f1-bdr)}
.cmp-tag-L{background:#FEE2E2;color:#991B1B;border:1px solid #FCA5A5}

.cmp-tbl-wrap{overflow-x:auto;background:var(--bg1);border:1px solid var(--bdr);border-radius:var(--r2);box-shadow:var(--shadow-sm);max-width:100%}
.cmp-tbl{border-collapse:collapse;font-size:11px;width:max-content;min-width:100%}
.cmp-tbl thead{background:var(--bg2);position:sticky;top:0;z-index:5}
.cmp-tbl-grp-row th{padding:6px 10px;font-size:10px;font-weight:800;text-align:left;color:#fff;border-right:1px solid rgba(255,255,255,.2)}
.cmp-tbl-grp-row th.cmp-grp-id{background:var(--inf)}
.cmp-tbl-grp-row th.cmp-grp-static{background:var(--f3)}
.cmp-tbl-grp-row th.cmp-grp-dynamic{background:var(--f1)}
.cmp-tbl-grp-row th.cmp-grp-action{background:var(--t1)}
.cmp-tbl-hdr-row th{padding:7px 10px;font-size:10.5px;font-weight:800;color:var(--t1);text-align:left;border-bottom:2px solid var(--bdr2);white-space:nowrap;background:var(--bg2)}
.cmp-tbl tbody tr{transition:background .12s;border-bottom:1px solid var(--bdr)}
.cmp-tbl tbody tr:hover{background:var(--acc-bg)}
.cmp-tbl tbody td{padding:7px 10px;color:var(--t1);vertical-align:middle;white-space:nowrap}
.cmp-tbl-sticky{position:sticky;left:0;background:var(--bg1);z-index:3;border-right:2px solid var(--bdr2);min-width:130px;max-width:160px}
.cmp-tbl tbody tr:hover .cmp-tbl-sticky{background:var(--acc-bg)}
.cmp-tbl-hdr-row th.cmp-tbl-sticky{background:var(--bg2);z-index:6}
.cmp-tbl-grp-row th.cmp-tbl-sticky{z-index:6}

.cmp-tbl .ellipsis-cell{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmp-tbl .dyn-cell{background:rgba(255,107,53,.05)}
.cmp-tbl tbody tr:hover .dyn-cell{background:rgba(255,107,53,.1)}

.cmp-score-cell{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:11px}

/* Mini sport profile dots */
.sport-dots-row{display:inline-flex;gap:3px;align-items:center}
.sp-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--bg3);border:1px solid var(--bdr2)}
.sp-dot.sp-0{background:var(--bg3)}
.sp-dot.sp-1{background:#DBEAFE;border-color:#93C5FD}
.sp-dot.sp-2{background:var(--inf);border-color:var(--inf);opacity:.7}
.sp-dot.sp-3{background:var(--acc);border-color:var(--acc)}
.sp-dot.sp-4{background:var(--f2);border-color:var(--f2)}
.sp-dot.sp-5{background:var(--f1);border-color:var(--f1)}

.cmp-edit-btn{padding:5px 12px;border-radius:6px;border:1px solid var(--acc);background:var(--acc-bg);color:var(--acc);font-size:11px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;transition:.12s}
.cmp-edit-btn:hover{background:var(--acc);color:#fff}

.cmp-info-footer{font-size:11px;color:var(--t2);padding:.625rem .875rem;background:var(--bg1);border:1px solid var(--bdr);border-radius:var(--r);margin-top:.5rem;line-height:1.55}
.cmp-info-footer strong{color:var(--t0)}

.ph-tag{font-size:9.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.ph-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.ph-name{font-size:16px;font-weight:800;color:var(--t0);margin-bottom:3px;font-family:'Space Grotesk',sans-serif;letter-spacing:-.2px}
.ph-desc{font-size:11px;color:var(--t2);margin-bottom:12px}
.ph-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ph-stat{background:rgba(255,255,255,.55);border-radius:var(--r);padding:.625rem;border:1px solid rgba(0,0,0,.05)}
.ph-stat-l{font-size:10px;color:var(--t2);text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px;font-weight:700}
.ph-stat-v{font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:700;color:var(--t0);letter-spacing:-.3px;line-height:1.1}
.ph-bar{height:5px;border-radius:3px;background:rgba(0,0,0,.08);margin-top:12px;overflow:hidden}
.ph-bar-fill{height:100%;border-radius:3px}

/* ── TAB NAV ── */
.tab-nav{display:flex;gap:4px;background:var(--bg1);border:1px solid var(--bdr);border-radius:var(--r2);padding:4px;margin-bottom:1.25rem;overflow-x:auto;box-shadow:var(--shadow-sm)}
.tab-btn{flex:1;min-width:max-content;padding:8px 14px;font-size:11.5px;font-weight:700;cursor:pointer;border:1px solid transparent;border-radius:var(--r);color:var(--t2);background:transparent;text-align:center;transition:all .15s;white-space:nowrap;font-family:'Inter',sans-serif;display:flex;align-items:center;justify-content:center;gap:5px}
.tab-btn:hover:not(.act){color:var(--t1);background:var(--bg2)}
.tab-btn.act{color:#fff;background:var(--acc);border-color:var(--acc);box-shadow:0 2px 8px rgba(0,109,50,.28)}

/* ── PANEL ── */
.panel{display:none}.panel.act{display:block}

/* ── CARD ── */
.card{background:var(--bg1);border:1px solid var(--bdr);border-radius:var(--r2);padding:1rem 1.125rem;box-shadow:var(--shadow-sm)}
.card-title{font-size:10.5px;font-weight:800;color:var(--t1);text-transform:uppercase;letter-spacing:.6px;margin-bottom:.875rem;display:flex;align-items:center;gap:6px}
.card-title .ico{font-size:14px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}

/* ── LAYER BADGE ── */
.lb{display:inline-block;font-size:9px;font-weight:800;padding:2px 7px;border-radius:20px;letter-spacing:.3px;text-transform:uppercase;white-space:nowrap}
.l-off{background:var(--f1-bg);color:var(--f1);border:1px solid var(--f1-bdr)}
.l-met{background:var(--f2-bg);color:var(--f2);border:1px solid var(--f2-bdr)}
.l-def{background:var(--f3-bg);color:var(--f3);border:1px solid var(--f3-bdr)}
.l-hor{background:var(--hor-bg);color:var(--hor);border:1px solid var(--hor-bdr)}
.l-cns{background:var(--cns-bg);color:var(--cns);border:1px solid var(--cns-bdr)}
.l-inf{background:var(--inf-bg);color:var(--inf);border:1px solid var(--inf-bdr)}

/* ── SCORE PILLS ── */
.spill{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;padding:2px 7px;border-radius:6px;min-width:32px;text-align:center}
.sp-h{background:#DCFCE7;color:#15803D}
.sp-m{background:#FEF9C3;color:#92400E}
.sp-l{background:#FEE2E2;color:#B91C1C}
.sp-o{background:var(--bg3);color:var(--t3)}
.status-pill{font-size:9px;font-weight:800;padding:3px 8px;border-radius:20px;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}
.st-wajib{background:#DCFCE7;color:#15803D}
.st-opsional{background:#FEF9C3;color:#92400E}
.st-rendah{background:#FEE2E2;color:#B91C1C}
.st-off{background:var(--bg3);color:var(--t3)}
.dm-sep{width:1px;height:14px;background:var(--bdr);display:inline-block;vertical-align:middle}

/* ── SROW ── */
.srow{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.srow-lbl{font-size:11px;font-weight:500;color:var(--t1);width:140px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srow-bar{flex:1;height:18px;background:var(--bg3);border-radius:4px;overflow:hidden}
.srow-fill{height:100%;border-radius:4px;display:flex;align-items:center;padding-left:8px;transition:width .5s ease}
.srow-txt{font-family:'JetBrains Mono',monospace;font-size:9.5px;color:rgba(255,255,255,.9);font-weight:600}
.srow-val{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;min-width:34px;text-align:right;color:var(--t1)}

/* ── TABLE ── */
.tbl-wrap{overflow-x:auto;border:1px solid var(--bdr);border-radius:var(--r2)}
table{width:100%;border-collapse:collapse;font-size:12px}
thead th{padding:8px 10px;font-size:9.5px;font-weight:800;color:var(--t2);background:var(--bg2);border-bottom:1px solid var(--bdr2);white-space:nowrap;text-align:left;text-transform:uppercase;letter-spacing:.4px}
th.r,td.r{text-align:right}th.c,td.c{text-align:center}
tbody td{padding:8px 10px;border-bottom:1px solid var(--bdr);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--bg2)}
.tbl-foot td{background:var(--bg2);border-top:2px solid var(--bdr2);font-weight:700}
.cost-v{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;color:var(--acc)}
.zero{color:var(--t3)}

/* ── VIAL CARDS ── */
.vial-filter-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:1rem;align-items:center;background:var(--bg1);border:1px solid var(--bdr);border-radius:var(--r2);padding:.75rem 1rem;box-shadow:var(--shadow-sm)}
.vf-lbl{font-size:10px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.5px;flex-shrink:0;margin-right:4px}
.vf-btn{padding:5px 12px;border-radius:20px;font-size:11px;font-weight:700;border:1.5px solid var(--bdr2);background:var(--bg2);color:var(--t2);cursor:pointer;transition:all .15s;font-family:'Inter',sans-serif}
.vf-btn:hover{border-color:var(--acc);color:var(--acc)}
.vf-btn.act{background:var(--acc);color:#fff;border-color:var(--acc);box-shadow:0 2px 6px rgba(0,109,50,.22)}
.vf-sep{width:1px;height:20px;background:var(--bdr2);margin:0 4px}
.vial-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.vcard{background:var(--bg1);border:2px solid var(--bdr);border-radius:var(--r2);overflow:hidden;transition:all .2s;box-shadow:var(--shadow-sm)}
.vcard:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--bdr2)}
.vcard-hdr{padding:.75rem 1rem;border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between}
.vcard-name{font-size:13px;font-weight:800;color:var(--t0)}
.vcard-price{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;color:var(--t2)}
.vcard-price strong{color:var(--acc);font-size:13px}
.vcard-body{padding:.75rem 1rem}
.vcard-spec{display:flex;align-items:center;gap:6px;margin-bottom:.75rem;flex-wrap:wrap}
.spec-tag{font-size:10px;font-weight:700;padding:3px 8px;border-radius:6px;background:var(--bg2);color:var(--t1);border:1px solid var(--bdr)}
.vcard-phase-row{display:flex;gap:6px;margin-bottom:.625rem}
.vph{flex:1;border-radius:var(--r);padding:.5rem;text-align:center;border:1px solid transparent}
.vph.has{border-color:var(--bdr2);background:var(--bg2)}
.vph.none{opacity:.35;background:var(--bg3)}
.vph-name{font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px}
.vph-v{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700}
.vph-sub{font-size:8.5px;color:var(--t2);margin-top:1px}
.vcard-totbar{margin-top:.625rem}
.vcard-totbar-lbl{display:flex;justify-content:space-between;margin-bottom:3px}
.vcard-totbar-lbl span{font-size:10px;color:var(--t2)}
.vcard-totbar-lbl strong{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;color:var(--t0)}
.vbar{height:6px;background:var(--bg3);border-radius:3px;overflow:hidden}
.vbar-fill{height:100%;border-radius:3px}
.eff-badge{display:inline-flex;align-items:center;gap:3px;font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:20px;margin-top:5px}
.eff-hi{background:#DCFCE7;color:#15803D}
.eff-mid{background:#FEF9C3;color:#92400E}
.eff-lo{background:#FEE2E2;color:#B91C1C}

/* ── VIAL SUMMARY ── */
.vial-summary-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:1rem}
.vs-card{background:var(--bg1);border:1px solid var(--bdr);border-radius:var(--r2);padding:.875rem 1rem;box-shadow:var(--shadow-sm)}
.vs-l{font-size:9.5px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.vs-v{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:700;color:var(--t0);line-height:1}
.vs-s{font-size:10px;color:var(--t2);margin-top:3px}

/* ── GANTT ── */
.gantt-wrap{overflow-x:auto}
.gantt-grid{min-width:860px}
.gantt-ph-row{display:flex;margin-left:152px;gap:1px;margin-bottom:5px}
.gantt-ph-seg{border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;letter-spacing:.4px;height:18px}
.gantt-wk-row{display:flex;margin-left:152px;gap:1px;margin-bottom:6px}
.gantt-wk{flex:1;font-size:7.5px;color:var(--t3);text-align:center}
.g-row{display:flex;align-items:center;gap:1px;margin-bottom:2px}
.g-lbl{width:152px;font-size:10.5px;font-weight:600;color:var(--t1);flex-shrink:0;padding-right:8px;display:flex;align-items:center;gap:4px;overflow:hidden}
.g-cells{display:flex;gap:1px;flex:1}
.g-cell{flex:1;height:18px;border-radius:2px;min-width:0;cursor:default;position:relative}
.g-cell:hover .g-tip{display:block}
.g-tip{display:none;position:absolute;bottom:calc(100%+4px);left:50%;transform:translateX(-50%);background:var(--t0);color:#fff;font-size:9.5px;padding:3px 7px;border-radius:4px;white-space:nowrap;z-index:50;pointer-events:none}
.g-off{background:var(--bg3)}
.g-1{background:rgba(255,107,53,.35)}
.g-2{background:rgba(245,158,11,.35)}
.g-3{background:rgba(16,185,129,.35)}
.g-1.w{background:var(--f1)}
.g-2.w{background:var(--f2)}
.g-3.w{background:var(--f3)}

/* ── TIMELINE (per-quarter scope v=21) ── */
.tl-wrap{overflow-x:auto;border:1px solid var(--bdr);border-radius:var(--r2);padding:10px;background:var(--bg1)}
.tl-grid{min-width:900px}
.tl-wk-row{display:flex;margin-left:280px;margin-right:130px;gap:2px;margin-bottom:6px}
.tl-wk{flex:1;font-size:10px;color:var(--t2);text-align:center;min-width:42px;font-weight:700;font-family:'JetBrains Mono',monospace}
.tl-row{display:flex;align-items:stretch;gap:2px;margin-bottom:5px;min-height:52px}
.tl-lbl{width:300px;padding-right:10px;display:flex;flex-direction:column;justify-content:center;gap:4px;flex-shrink:0;font-size:11px;border-right:1px solid var(--bdr)}
.tl-lbl-top{display:flex;align-items:center;gap:6px}
.tl-name{font-weight:700;color:var(--t0);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.tl-cycle-input{display:grid;grid-template-columns:1fr 1fr;gap:3px 8px;font-size:9.5px;color:var(--t2);font-weight:700;align-items:center}
.tl-cycle-input>span.tl-input-cell{display:flex;align-items:center;gap:4px;white-space:nowrap}
.tl-cycle-input input{width:46px;font-size:11px;font-weight:700;padding:3px 5px;border:1px solid var(--bdr);border-radius:4px;font-family:'JetBrains Mono',monospace;text-align:center;color:var(--t0)}
.tl-unit-hint{font-size:9px;color:var(--t3);font-weight:700;margin-left:2px}
.tl-cycle-input input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 2px rgba(67,97,238,.15)}
.tl-cells{display:flex;gap:2px;flex:1}
.tl-cell{flex:1;min-width:42px;height:46px;border-radius:4px;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;font-family:'JetBrains Mono',monospace;color:var(--t0);text-shadow:0 1px 2px rgba(255,255,255,.7),0 0 4px rgba(255,255,255,.4);transition:transform .1s,opacity .1s}
.tl-cell:hover{transform:scale(1.08);z-index:5;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.tl-on{opacity:.95}
.tl-off{background:var(--bg3);opacity:.55;color:var(--t3)}
.tl-inactive{background:rgba(150,150,150,.1);color:var(--t3)}
.tl-custom{outline:2px solid var(--hor);outline-offset:-2px}
.tl-custom::after{content:'✎';position:absolute;top:1px;right:2px;font-size:9px;color:var(--hor);line-height:1;font-weight:800}
.tl-sum{width:120px;padding:0 10px;display:flex;flex-direction:column;justify-content:center;align-items:flex-end;font-family:'JetBrains Mono',monospace;border-left:1px solid var(--bdr);gap:2px}
.tl-sum-d{font-size:22px;font-weight:800;color:var(--t0);line-height:1}
.tl-sum-d small{font-size:11px;font-weight:700;color:var(--t2);margin-left:2px}
.tl-sum-v{font-size:11px;color:var(--acc);font-weight:700;letter-spacing:.2px}
.tl-sum-empty{color:var(--t3);font-size:14px}
.tl-legend{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:10px;font-size:10.5px;color:var(--t2);align-items:center;padding:8px 12px 0}
.tl-legend>span{display:inline-flex;align-items:center}
.tl-sw{display:inline-block;width:11px;height:11px;border-radius:2px;vertical-align:middle;margin-right:4px}
.tl-sw-on{background:var(--f1)}
.tl-sw-off{background:var(--bg3);opacity:.5}
.tl-sw-inactive{background:rgba(150,150,150,.3)}
/* ── TIMELINE allMode (v=83) ── */
.tl-chip-row{display:flex;gap:5px;flex-wrap:wrap;padding:8px 0 10px;align-items:center}
.tl-chip{padding:5px 12px;border-radius:20px;border:1.5px solid var(--bdr2);background:var(--bg2);color:var(--t2);font-size:11px;font-weight:700;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:4px;font-family:'Inter',sans-serif}
.tl-chip:hover{border-color:var(--acc);color:var(--acc)}
.tl-chip.act{background:var(--acc);color:#fff;border-color:var(--acc);box-shadow:0 2px 6px rgba(67,97,238,.25)}
.tl-chip-dot{width:6px;height:6px;border-radius:50%;background:var(--acc);flex-shrink:0}
.tl-chip-dot.act{background:#fff}
.tl-qhdr-row{display:flex;align-items:stretch;gap:2px;margin-bottom:2px}
.tl-lbl-ph{width:300px;flex-shrink:0}
.tl-sum-ph{width:120px;flex-shrink:0}
.tl-qhdr{text-align:center;font-size:9px;font-weight:800;color:var(--t0);padding:3px 0;background:var(--bg2);border-radius:3px 3px 0 0;letter-spacing:.3px}
.tl-wk-sep{border-left:2px solid var(--bdr)!important}
.tl-lbl-q{display:flex;align-items:center;gap:5px;font-size:9px;margin-top:2px}
.tl-lbl-ql{color:var(--t3);font-weight:700;min-width:50px}
.tl-lbl-qc{color:var(--t1);font-weight:700;font-family:'JetBrains Mono',monospace;font-size:9px}
.tl-lbl-name{font-weight:700;color:var(--t0);font-size:13px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-sum-l{font-size:9px;color:var(--t3);font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.tl-cell-dose{font-size:9px;color:inherit;font-weight:800;pointer-events:none}
.tl-legend-item{display:inline-flex;align-items:center;gap:5px}
.tl-legend-dot{display:inline-block;width:11px;height:11px;border-radius:3px}
.tl-legend-dot.tl-on{background:var(--acc)}
.tl-legend-dot.tl-off{background:var(--bg3);opacity:.7}
.tl-legend-dot.tl-inactive{background:rgba(150,150,150,.2)}
.tl-legend-right{margin-left:auto;font-size:9.5px;color:var(--t3)}

/* ── BUDGET ── */
.bud-controls{background:var(--bg1);border:1px solid var(--bdr);border-radius:var(--r2);padding:1rem;margin-bottom:12px;box-shadow:var(--shadow-sm)}
.bud-val-row{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.bud-val{font-family:'JetBrains Mono',monospace;font-size:28px;font-weight:700;color:var(--acc);line-height:1}
.bud-lbl{font-size:11px;color:var(--t2)}
input[type=range]{width:100%;accent-color:var(--acc);cursor:pointer;height:4px}
.ph-toggle-row{display:flex;gap:5px;margin-top:10px;flex-wrap:wrap;align-items:center}
.ph-tgl{padding:6px 14px;border-radius:20px;font-size:11px;font-weight:700;border:1.5px solid var(--bdr2);background:var(--bg2);color:var(--t2);cursor:pointer;transition:all .15s;font-family:'Inter',sans-serif}
.ph-tgl.tf1{background:var(--f1-bg);color:var(--f1);border-color:var(--f1)}
.ph-tgl.tf2{background:var(--f2-bg);color:var(--f2);border-color:var(--f2)}
.ph-tgl.tf3{background:var(--f3-bg);color:var(--f3);border-color:var(--f3)}
.auto-btn{margin-left:auto;background:var(--acc);color:#fff;border:none;padding:6px 14px;border-radius:20px;font-size:11px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;box-shadow:0 2px 6px rgba(0,109,50,.22)}
.bud-progress{background:var(--bg2);border:1px solid var(--bdr);border-radius:var(--r2);padding:.875rem 1rem;margin-bottom:12px}
.bud-prog-bar{height:12px;border-radius:6px;background:var(--bg3);overflow:hidden;margin:8px 0 4px}
.bud-prog-fill{height:100%;border-radius:6px;transition:width .3s,background .3s}

/* CONFLICT BANNER */
.conflict-banner{padding:.875rem 1rem;border-radius:var(--r2);margin-bottom:12px;display:flex;align-items:flex-start;gap:10px;border:1.5px solid transparent}
.cb-ok{background:var(--f3-bg);border-color:var(--f3-bdr)}
.cb-warn{background:var(--warn-bg);border-color:var(--warn-bdr)}
.cb-ico{font-size:20px;flex-shrink:0}
.cb-title{font-size:12px;font-weight:800;margin-bottom:3px}
.cb-ok .cb-title{color:var(--f3)}.cb-warn .cb-title{color:var(--warn)}
.cb-list{font-size:11px;color:var(--t1)}

/* BOPT ROW */
.bopt-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--bdr)}
.bopt-row:last-child{border-bottom:none}
.bopt-row.in-conflict{background:rgba(239,68,68,.04);border-radius:var(--r);padding:7px 8px;margin:0 -8px;border-bottom:1px solid var(--bdr)}
.chk{flex-shrink:0;width:18px;height:18px;border-radius:5px;border:2px solid var(--bdr2);background:var(--bg2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.chk.on{background:var(--acc);border-color:var(--acc)}
.chk.on::after{content:'✓';font-size:11px;color:#fff;font-weight:800}
.bopt-info{flex:1;min-width:0}
.bopt-name{font-size:12px;font-weight:700;color:var(--t0)}
.bopt-sub{font-size:10px;color:var(--t2);display:flex;gap:6px;margin-top:2px;flex-wrap:wrap;align-items:center}
.bopt-cost{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:600;color:var(--acc);flex-shrink:0}

/* LIVE ALERT */
.live-alert{border-radius:var(--r);padding:.75rem .875rem;margin-bottom:7px;border-left:3px solid transparent}
.la-high{background:var(--warn-bg);border-color:var(--warn)}
.la-med{background:var(--f2-bg);border-color:var(--f2)}
.la-low{background:var(--hor-bg);border-color:var(--hor)}
.la-info{background:var(--inf-bg);border-color:var(--inf)}
.la-critical{background:var(--warn-bg);border-color:var(--warn);border-left-width:5px;animation:critPulse 2s infinite}
.la-ok{background:var(--f3-bg);border-color:var(--f3);opacity:.6}
.la-title{font-size:11.5px;font-weight:800;margin-bottom:3px}
.la-high .la-title{color:var(--warn)}.la-med .la-title{color:var(--f2)}.la-low .la-title{color:var(--hor)}.la-info .la-title{color:var(--inf)}.la-critical .la-title{color:var(--warn);font-weight:900}.la-ok .la-title{color:var(--f3)}
.la-body{font-size:10.5px;color:var(--t1);line-height:1.6}
.la-body strong{color:var(--t0);font-weight:700}
@keyframes critPulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.4)}50%{box-shadow:0 0 0 4px rgba(239,68,68,.1)}}
.la-rec{font-size:10.5px;color:var(--f3);font-weight:600;margin-top:4px}
.la-cmps{display:flex;gap:3px;flex-wrap:wrap;margin-top:5px}
.la-cmp{font-size:10px;padding:2px 7px;border-radius:4px;background:var(--bg3);color:var(--t1);font-weight:600}
.la-cmp.hit{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-bdr)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;animation:pulse 1.5s infinite}

/* SPORT DIMS */
.sport-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:10px}
.sp-card{background:var(--bg1);border:1px solid var(--bdr);border-radius:var(--r2);padding:.875rem;text-align:center;box-shadow:var(--shadow-sm)}
.sp-ico{font-size:22px;margin-bottom:5px}
.sp-name{font-size:10px;font-weight:700;color:var(--t1);text-transform:uppercase;letter-spacing:.4px;margin-bottom:2px}
.sp-sub{font-size:9px;color:var(--t2);margin-bottom:8px}
.sp-val{font-family:'JetBrains Mono',monospace;font-size:24px;font-weight:700;color:var(--acc)}
.sp-bar{height:4px;background:var(--bg3);border-radius:2px;overflow:hidden;margin-top:6px}
.sp-bar-fill{height:100%;border-radius:2px;background:var(--acc)}
.sp-top{font-size:9px;color:var(--t3);margin-top:5px;line-height:1.5}

/* CMP CARD */
.cmp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.cmp-card{background:var(--bg1);border:2px solid var(--bdr);border-radius:var(--r2);overflow:hidden;transition:all .2s;box-shadow:var(--shadow-sm)}
.cmp-card:hover{border-color:var(--bdr2);transform:translateY(-2px);box-shadow:var(--shadow)}
.cmp-hdr{padding:.75rem 1rem;border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;gap:8px}
.cmp-name{font-size:12.5px;font-weight:800;color:var(--t0);margin-top:3px}
.cmp-body{padding:.75rem 1rem}
.cmp-scores{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:.625rem}
.cmp-sc{background:var(--bg2);border-radius:var(--r);padding:.4rem;text-align:center;border:1px solid var(--bdr)}
.cmp-sc-lbl{font-size:8.5px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.3px;margin-bottom:2px}
.cmp-sc-v{font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:700}
.pips{display:flex;gap:2px}
.pip{width:10px;height:10px;border-radius:3px}
.pip-on{background:var(--acc)}.pip-off{background:var(--bg3);border:1px solid var(--bdr)}
.cmp-sport-row{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.cmp-sl{font-size:9.5px;color:var(--t2);width:62px;flex-shrink:0}
.cmp-mech{font-size:10px;color:var(--t2);line-height:1.6;border-top:1px solid var(--bdr);padding-top:.5rem;margin-top:.5rem}
.tag{font-size:9.5px;font-weight:600;padding:2px 7px;border-radius:20px;background:var(--bg3);color:var(--t2)}
.tag-ok{background:#DCFCE7;color:#15803D}
.tag-warn{background:var(--warn-bg);color:var(--warn)}

/* ── FILTER BAR ── */
.filter-bar{display:flex;gap:5px;margin-bottom:.875rem;flex-wrap:wrap;align-items:center}
.fl{font-size:9.5px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.5px;flex-shrink:0}
.fp{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;border:1.5px solid var(--bdr2);background:var(--bg2);color:var(--t2);cursor:pointer;transition:all .15s}
.fp.act{background:var(--acc);color:#fff;border-color:var(--acc)}
.fp .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.srch{background:var(--bg1);border:1.5px solid var(--bdr2);border-radius:var(--r);padding:5px 12px;font-size:12px;color:var(--t0);font-family:'Inter',sans-serif;outline:none;width:180px;transition:.15s}
.srch:focus{border-color:var(--acc)}
.srch::placeholder{color:var(--t3)}

/* ── LW VIZ ── */
.lw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lw-card{background:var(--bg2);border-radius:var(--r);padding:.75rem;border:1px solid var(--bdr)}
.lw-ph{font-size:10px;font-weight:800;margin-bottom:.5rem}
.lw-row{display:flex;align-items:center;gap:5px;margin-bottom:4px}
.lw-n{font-size:9.5px;font-weight:600;color:var(--t1);width:62px;flex-shrink:0}
.lw-bar{flex:1;height:7px;background:var(--bg4);border-radius:3px;overflow:hidden}
.lw-fill{height:100%;border-radius:3px}
.lw-pct{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:600;color:var(--t1);min-width:24px;text-align:right}

/* ── NOTE ── */
.note{font-size:10.5px;color:var(--t2);padding:.625rem .875rem;background:var(--bg2);border-radius:var(--r);border:1px solid var(--bdr);line-height:1.6;margin-top:.75rem}
.note-warn{background:var(--warn-bg);border-color:var(--warn-bdr);color:var(--t1)}
.sep{height:1px;background:var(--bdr);margin:.875rem 0}

/* ── RESPONSIVE ── */
@media(max-width:1000px){
  .phase-row{grid-template-columns:1fr}
  .grid2{grid-template-columns:1fr}
  .grid3{grid-template-columns:repeat(2,1fr)}
  .grid4{grid-template-columns:repeat(2,1fr)}
  .sport-grid{grid-template-columns:repeat(3,1fr)}
  .vial-summary-strip{grid-template-columns:repeat(2,1fr)}
  .lw-grid{grid-template-columns:1fr}
}
@media(max-width:768px){
  .app{padding:1rem .875rem 6.5rem}
  .topbar{padding:.75rem 1rem;margin:-1rem -1rem 1rem}
  .topbar-title{font-size:14px}
  .topbar-sub{display:none}
  /* Bottom nav — EcoSync style */
  .tab-nav{
    position:fixed;bottom:0;left:0;right:0;z-index:90;
    background:rgba(248,249,255,.94);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-top:1px solid rgba(187,203,185,.25);
    border-radius:0;margin:0;padding:6px 6px 20px;
    box-shadow:0 -4px 20px rgba(11,28,48,.07);
    gap:2px;overflow-x:auto
  }
  .tab-btn{padding:9px 6px;font-size:10px;border-radius:10px;flex:1;min-width:52px}
  .sport-grid{grid-template-columns:repeat(2,1fr)}
  .grid3{grid-template-columns:1fr}
  .grid4{grid-template-columns:repeat(2,1fr)}
  .vial-grid{grid-template-columns:1fr}
  .cmp-grid{grid-template-columns:1fr}
  .gantt-grid{min-width:600px}
  .srch{width:140px}
  .phase-row{display:flex;overflow-x:auto;gap:12px;padding-bottom:8px;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
  .phase-row::-webkit-scrollbar{display:none}
  .ph-card{flex:0 0 230px;scroll-snap-align:start}
  .vial-summary-strip{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  .app{padding:.75rem .75rem 7rem}
  .ph-card{flex:0 0 200px}
  .topbar{padding:.5rem .75rem;margin:-.75rem -.75rem .75rem}
  .topbar-badges{display:none}
  .topbar-ico{width:32px;height:32px;font-size:14px}
  .topbar-title{font-size:13.5px}
  .tab-btn{padding:8px 4px;font-size:9.5px;min-width:44px;min-height:44px}
  .card{padding:.75rem .875rem}
  .grid4{grid-template-columns:repeat(2,1fr)}
  .sport-grid{grid-template-columns:repeat(2,1fr)}
  .vial-summary-strip{grid-template-columns:repeat(2,1fr)}
  .vs-v{font-size:18px}
  .phase-row{grid-template-columns:1fr}
  .ph-grid{grid-template-columns:repeat(2,1fr)}
  /* Modal sheet — slides from bottom */
  .modal-overlay{align-items:flex-end;padding:0}
  .modal-box{width:100%;border-radius:20px 20px 0 0;max-height:88vh;padding:1.25rem 1rem}
  .bud-val{font-size:22px}
  table{font-size:11px}
  thead th{padding:6px 8px;font-size:9px}
  tbody td{padding:6px 8px}
  .srow-lbl{width:110px;font-size:10.5px}
  .filter-bar{gap:4px}
  .fp{padding:4px 8px;font-size:10.5px}
  .srch{width:120px;font-size:11px}
  .vf-btn{padding:4px 9px;font-size:10.5px}
  .auth-user{max-width:90px;font-size:10px}
}

/* ── AUTH ── */
.auth-btn{background:transparent;color:var(--t1);border:1.5px solid var(--bdr2);padding:6px 14px;border-radius:var(--r);font-family:'Inter',sans-serif;font-size:11px;font-weight:700;cursor:pointer;transition:all .15s;white-space:nowrap}
.auth-btn:hover{border-color:var(--acc);color:var(--acc)}
.auth-btn.logout{border-color:var(--warn-bdr);color:var(--warn)}
.auth-btn.logout:hover{background:var(--warn-bg)}
.auth-user{font-size:11px;color:var(--t2);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auth-wrap{display:flex;align-items:center;gap:8px}
.save-ind{font-size:10px;color:var(--f3);font-weight:700;opacity:0;transition:opacity .3s}
.save-ind.show{opacity:1}
/* Modal overlay */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(11,28,48,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:500;align-items:center;justify-content:center}
.modal-overlay.open{display:flex}
.modal-box{background:var(--bg1);border:1px solid var(--bdr);border-radius:var(--r3);padding:2rem;width:360px;box-shadow:var(--shadow-lg);position:relative}
.modal-title{font-size:16px;font-weight:800;color:var(--t0);margin-bottom:4px}
.modal-sub{font-size:11px;color:var(--t2);margin-bottom:1.25rem}
.modal-input{width:100%;background:var(--bg2);border:1.5px solid var(--bdr2);border-radius:var(--r);padding:9px 12px;font-size:13px;font-family:'Inter',sans-serif;color:var(--t0);outline:none;transition:.15s;margin-bottom:10px}
.modal-input:focus{border-color:var(--acc)}
.modal-err{font-size:11px;color:var(--warn);margin-bottom:8px;min-height:16px}
.modal-row{display:flex;gap:8px}
.modal-btn{flex:1;padding:9px;border-radius:var(--r);font-family:'Inter',sans-serif;font-size:12px;font-weight:700;cursor:pointer;border:none;transition:all .15s}
.modal-btn.primary{background:var(--acc);color:#fff;box-shadow:0 2px 8px rgba(0,109,50,.28)}
.modal-btn.primary:hover{background:#005224}
.modal-btn.secondary{background:var(--bg2);color:var(--t1);border:1.5px solid var(--bdr2)}
.modal-btn.secondary:hover{border-color:var(--acc);color:var(--acc)}
.modal-close{position:absolute;top:12px;right:14px;background:none;border:none;font-size:18px;cursor:pointer;color:var(--t3);line-height:1}
.modal-close:hover{color:var(--t1)}
/* Dose edit modal */
.de-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.de-input{flex:1;background:var(--bg2);border:2px solid var(--acc);border-radius:var(--r);padding:10px 12px;font-size:20px;font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--t0);outline:none;text-align:center}
.de-unit{font-size:14px;font-weight:700;color:var(--t2);min-width:28px}
.de-default{font-size:11px;color:var(--t2);margin-bottom:12px}
.de-custom-badge{display:inline-block;font-size:9px;font-weight:800;padding:2px 8px;border-radius:20px;background:var(--hor-bg);color:var(--hor);border:1px solid var(--hor-bdr);margin-left:6px}
/* Gantt clickable cell */
.g-cell{cursor:pointer}
.g-cell:hover{opacity:.75;transform:scaleY(1.15)}
.g-custom{outline:2px solid var(--hor);outline-offset:-2px}
.g-custom::after{content:'✎';position:absolute;top:0;right:1px;font-size:7px;color:var(--hor);line-height:18px}

/* ════════════════════════════════════════════════════════════
   DECISION MATRIX — Drag-drop Builder (Library + 3 Stage Zones)
   ════════════════════════════════════════════════════════════ */
.dm-2col{display:grid;grid-template-columns:30% 70%;gap:12px;align-items:start;margin-top:10px}
.dm-lib{background:var(--bg1);border:1px solid var(--bdr);border-radius:var(--r2);padding:.875rem;max-height:calc(100vh - 260px);overflow-y:auto;box-shadow:var(--shadow-sm)}
.dm-lib-hdr{font-size:12px;font-weight:800;color:var(--t0);margin-bottom:.625rem;display:flex;align-items:center;gap:6px}
.dm-lib-search{width:100%;background:var(--bg2);border:1.5px solid var(--bdr2);border-radius:var(--r);padding:7px 10px;font-size:11.5px;font-family:'Inter',sans-serif;color:var(--t0);outline:none;margin-bottom:8px}
.dm-lib-search:focus{border-color:var(--acc)}
.dm-lib-filters{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--bdr)}
.dm-lib-chip{font-size:9.5px;font-weight:700;padding:3px 8px;border-radius:14px;background:var(--bg2);border:1px solid var(--bdr2);color:var(--t2);cursor:pointer;transition:.12s;font-family:'Inter',sans-serif}
.dm-lib-chip:hover{border-color:var(--acc);color:var(--acc)}
.dm-lib-chip.act{background:var(--acc);color:#fff;border-color:var(--acc)}
.dm-zone{background:var(--bg2);border:1.5px solid var(--bdr);border-radius:var(--r2);padding:.875rem 1rem;min-height:340px;transition:all .15s}
.dm-zone.drag-over{background:var(--acc-bg);border-color:var(--acc);border-style:dashed;transform:scale(1.003)}
.dm-zone-hdr{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;padding-bottom:8px;margin-bottom:10px;border-bottom:1px solid var(--bdr);display:flex;justify-content:space-between;align-items:center}
.dm-zone.selected-zone .dm-zone-hdr{color:var(--acc)}
.dm-zone.selected-zone{max-height:calc(100vh - 260px);overflow-y:auto}
.dm-zone.selected-zone .dm-card{display:grid;grid-template-columns:1fr auto;gap:8px}
.dm-zone-cnt{background:rgba(0,0,0,.08);padding:1px 7px;border-radius:10px;font-size:9px;font-weight:800}
.dm-zone-empty{font-size:10px;color:var(--t3);text-align:center;padding:1rem .5rem;font-style:italic}
.dm-card{background:var(--bg1);border:1px solid var(--bdr);border-left:3px solid var(--bdr2);border-radius:var(--r);padding:.5rem .625rem;margin-bottom:5px;cursor:grab;display:flex;justify-content:space-between;align-items:center;gap:6px;transition:.12s}
.dm-card:hover{box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.dm-card:active{cursor:grabbing}
.dm-card.in-stage{opacity:.45}
.dm-card-name{font-size:11px;font-weight:700;color:var(--t0);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.dm-card-meta{display:flex;align-items:center;gap:4px;flex-shrink:0}
.dm-card-cost{font-family:'JetBrains Mono',monospace;font-size:9.5px;font-weight:700;color:var(--t2)}
.dm-card-sport{font-size:9.5px;font-weight:700;color:var(--f2);min-width:22px;text-align:right}
.dm-card-remove{background:none;border:none;color:var(--warn);cursor:pointer;font-size:13px;padding:0 2px;line-height:1;opacity:.65}
.dm-card-remove:hover{opacity:1}
.dm-cat-pill{font-size:8px;font-weight:800;padding:2px 6px;border-radius:10px;letter-spacing:.3px;text-transform:uppercase}
.dm-cat-pill.off{background:var(--f1-bg);color:var(--f1)}
.dm-cat-pill.met{background:var(--f2-bg);color:var(--f2)}
.dm-cat-pill.def{background:var(--f3-bg);color:var(--f3)}
.dm-cat-pill.hor{background:var(--hor-bg);color:var(--hor)}
.dm-cat-pill.cns{background:var(--cns-bg);color:var(--cns)}
.dm-cat-pill.inf{background:var(--inf-bg);color:var(--inf)}
.dm-seed-banner{font-size:10.5px;color:var(--t2);padding:.45rem .7rem;background:var(--acc-bg);border:1px solid var(--acc-bdr);border-radius:6px;margin-bottom:.6rem;display:flex;align-items:center;gap:8px}
.dm-seed-banner button{background:transparent;border:1px solid var(--bdr);color:var(--t2);padding:2px 8px;border-radius:4px;font-size:10px;cursor:pointer;font-family:inherit}
.dm-phase-prompt{padding:2rem;text-align:center;color:var(--t3);font-size:13px}
@media(max-width:900px){.dm-2col{grid-template-columns:1fr}.dm-lib{max-height:400px}.dm-zone.selected-zone{max-height:600px}}