:root{
  /* EcoSync — Digital Fluidity palette (MD3) */
  --bg:#f8f9ff;--bg1:#ffffff;--bg2:#eff4ff;--bg3:#e5eeff;--bg4:#dce9ff;
  --bdr:rgba(187,203,185,.35);--bdr2:#bbcbb9;--bdr3:#a0a09e;
  --t0:#0b1c30;--t1:#3c4a3d;--t2:#6c7b6c;--t3:#9aab9b;
  --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(3,1fr);gap:12px;margin-bottom:1.25rem}
.ph-card{background:var(--bg2);border:1px solid rgba(187,203,185,.18);border-radius:var(--r2);padding:1.375rem 1.5rem;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-tag{font-size:10px;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:18px;font-weight:700;font-family:'Space Grotesk',sans-serif;color:var(--t0);margin-bottom:4px;letter-spacing:-.3px}
.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:22px;font-weight:700;color:var(--t0);line-height:1.05;letter-spacing:-.4px}
.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)}

/* ── 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-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-ok .la-title{color:var(--f3)}
.la-body{font-size:10.5px;color:var(--t1);line-height:1.6}
.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}

/* ── STRAVA BADGE + CARD ── */
.strava-badge{display:inline-flex;align-items:center;gap:3px;background:#FC4C02;color:#fff;font-size:9.5px;font-weight:800;padding:2px 8px;border-radius:8px;letter-spacing:.3px;white-space:nowrap}
.strava-card{background:linear-gradient(135deg,rgba(252,76,2,.06),rgba(252,76,2,.02));border:1px solid rgba(252,76,2,.2);border-radius:var(--r2);padding:.875rem 1rem;margin-bottom:1rem;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.strava-card-icon{font-size:22px;background:#FC4C02;color:#fff;width:38px;height:38px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.strava-card-title{font-size:13px;font-weight:800;color:var(--t0);margin-bottom:2px}
.strava-card-sub{font-size:10.5px;color:var(--t2)}
.btn-strava{background:#FC4C02;color:#fff;border:1px solid #FC4C02;padding:7px 14px;border-radius:6px;font-weight:700;font-size:12px;cursor:pointer;font-family:inherit;transition:.15s;white-space:nowrap}
.btn-strava:hover{background:#E04400}
.btn-strava:disabled{opacity:.6;cursor:not-allowed}
.btn-strava-ghost{background:transparent;color:#FC4C02;border:1.5px solid #FC4C02;padding:6px 13px;border-radius:6px;font-weight:700;font-size:11.5px;cursor:pointer;font-family:inherit}
.btn-strava-ghost:hover{background:#FC4C02;color:#fff}

/* ── NEW LAYOUT CLASSES (replace inline JS grids) ── */
.qsel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:1rem}
.today-split{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.prog-bars-row{display:flex;gap:1px;align-items:flex-end;overflow-x:auto;padding-bottom:4px}
.prog-bars-row > div{flex:1 1 0;min-width:0}

/* ── MOBILE-FIRST RESPONSIVE OVERRIDES ── */
@media(max-width:900px){
  .qsel-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .today-split{grid-template-columns:1fr;gap:10px}
}
@media(max-width:600px){
  .qsel-grid{grid-template-columns:repeat(2,1fr);gap:6px}
  .ph-card{padding:.625rem .75rem}
  .ph-name{font-size:13px}
  .ph-stat-v{font-size:14px}
  .ph-desc{font-size:9.5px}
  .ph-grid{grid-template-columns:1fr 1fr;gap:6px}
  /* Progress overload: bars jadi fixed-width + scroll horizontal */
  .prog-bars-row > div{flex:0 0 28px}
  /* Ov-card lebih compact */
  .ov-card{padding:.75rem .875rem}
  .ov-v{font-size:20px}
  /* Topbar tighter */
  .topbar-brand{gap:8px}
  .topbar-ico{width:30px;height:30px;font-size:16px}
  .topbar-title{font-size:12.5px}
  .auth-wrap{gap:6px}
}
@media(max-width:420px){
  .qsel-grid{grid-template-columns:1fr 1fr;gap:5px}
  .ph-card{padding:.5rem .6rem}
  .ph-tag{font-size:9.5px}
  .ph-name{font-size:12px}
  .ph-desc{font-size:9px;line-height:1.35}
  .ph-grid{grid-template-columns:1fr 1fr;gap:4px}
  .ph-stat-v{font-size:13px}
  .ph-stat-l{font-size:8.5px}
  /* Tab nav lebih kecil di phone */
  .tab-btn{padding:6px 6px;font-size:10px}
  /* Card padding */
  .card{padding:.875rem 1rem}
  /* Today's split: tetap stack, inner cards compact */
  .today-split{gap:8px}
  /* Progress bars: lebih kecil */
  .prog-bars-row > div{flex:0 0 24px}
}

/* ── 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 250px;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 220px}
  .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:100%;font-size:14px}
  .vf-btn{padding:4px 9px;font-size:10.5px}
  .auth-user{max-width:80px;font-size:10px}
  .btn,.modal-btn{min-height:44px}
  .save-ind{bottom:90px}
}

/* ── 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}

/* ════════════════════════════════════════════════════════════
   EXERCISE LIBRARY (Phase 1)
   ════════════════════════════════════════════════════════════ */

/* ── FILTER BAR ── */
.lib-filter-bar{background:var(--bg1);border:1px solid var(--bdr);border-radius:var(--r2);padding:.875rem 1rem;margin-bottom:1rem;box-shadow:var(--shadow-sm)}
.lib-search{display:flex;gap:8px;margin-bottom:.875rem}
.lib-search-inp{flex:1;background:var(--bg2);border:1.5px solid var(--bdr2);border-radius:var(--r);color:var(--t0);padding:9px 14px;outline:none;font-family:'Inter',sans-serif;font-size:13px;transition:.15s}
.lib-search-inp:focus{border-color:var(--acc);background:#fff}
.lib-search-inp::placeholder{color:var(--t3)}
.lib-reset-btn{background:var(--warn-bg);border:1px solid var(--warn-bdr);color:var(--warn);padding:8px 14px;border-radius:var(--r);font-family:'Inter',sans-serif;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap}
.lib-reset-btn:hover{background:var(--warn);color:#fff}

.lib-chip-group{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin-bottom:.5rem}
.lib-chip-lbl{font-size:9.5px;font-weight:800;color:var(--t3);text-transform:uppercase;letter-spacing:.6px;margin-right:6px;min-width:65px}
.lib-chip{background:var(--bg2);border:1.5px solid var(--bdr2);border-radius:20px;color:var(--t2);padding:5px 11px;font-family:'Inter',sans-serif;font-size:11px;font-weight:700;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.lib-chip:hover{border-color:var(--acc);color:var(--acc)}
.lib-chip.act{background:var(--acc);color:#fff;border-color:var(--acc);box-shadow:0 2px 6px rgba(0,109,50,.22)}
.lib-chip-sm{font-size:10.5px;padding:4px 10px}
.lib-chip-cnt{background:rgba(0,0,0,.08);padding:1px 6px;border-radius:10px;font-size:9px;font-weight:800}
.lib-chip.act .lib-chip-cnt{background:rgba(255,255,255,.25)}

/* Per-category chip color when active */
.lib-chip.chip-f1.act{background:var(--f1);border-color:var(--f1);box-shadow:0 2px 6px rgba(255,107,53,.25)}
.lib-chip.chip-acc.act{background:var(--acc);border-color:var(--acc)}
.lib-chip.chip-f3.act{background:var(--f3);border-color:var(--f3);box-shadow:0 2px 6px rgba(16,185,129,.25)}
.lib-chip.chip-cns.act{background:var(--cns);border-color:var(--cns);box-shadow:0 2px 6px rgba(139,92,246,.25)}
.lib-chip.chip-inf.act{background:var(--inf);border-color:var(--inf);box-shadow:0 2px 6px rgba(14,165,233,.25)}
.lib-chip.chip-t1.act{background:var(--t1);border-color:var(--t1)}

.lib-result-count{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--bdr);font-size:10.5px;color:var(--t3);font-weight:700;letter-spacing:.3px}

/* ── CARD GRID ── */
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}

.lib-card{background:var(--bg1);border:1px solid var(--bdr);border-radius:var(--r2);padding:.875rem 1rem;box-shadow:var(--shadow-sm);transition:all .2s;border-left:4px solid var(--bdr2)}
.lib-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--bdr3)}
.lib-card-f1{border-left-color:var(--f1)}
.lib-card-acc{border-left-color:var(--acc)}
.lib-card-f3{border-left-color:var(--f3)}
.lib-card-cns{border-left-color:var(--cns)}
.lib-card-inf{border-left-color:var(--inf)}
.lib-card-t1{border-left-color:var(--t1)}

.lib-card-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.lib-cat-pill{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:800;padding:3px 9px;border-radius:20px;letter-spacing:.6px;background:var(--bg2);color:var(--t2);border:1px solid var(--bdr)}
.lib-cat-pill.chip-f1{background:var(--f1-bg);color:var(--f1);border-color:var(--f1-bdr)}
.lib-cat-pill.chip-acc{background:var(--acc-bg);color:var(--acc);border-color:var(--acc-bdr)}
.lib-cat-pill.chip-f3{background:var(--f3-bg);color:var(--f3);border-color:var(--f3-bdr)}
.lib-cat-pill.chip-cns{background:var(--cns-bg);color:var(--cns);border-color:var(--cns-bdr)}
.lib-cat-pill.chip-inf{background:var(--inf-bg);color:var(--inf);border-color:var(--inf-bdr)}
.lib-risk-pill{font-size:9px;font-weight:800;padding:3px 8px}

.lib-card-name{font-size:14px;font-weight:800;color:var(--t0);margin-bottom:2px;line-height:1.25}
.lib-card-sub{font-size:10px;color:var(--t3);margin-bottom:.625rem;text-transform:capitalize}

.lib-musc-row{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:.625rem}
.lib-musc{display:inline-block;font-size:9.5px;font-weight:600;padding:2px 8px;border-radius:10px;background:var(--bg2);color:var(--t2);text-transform:capitalize;border:1px solid var(--bdr)}
.lib-musc-pri{background:var(--acc-bg);color:var(--acc);font-weight:700;border-color:var(--acc-bdr)}

.lib-defaults{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:.625rem;padding:.5rem .625rem;background:var(--bg2);border-radius:var(--r);border:1px solid var(--bdr)}
.lib-d-item{display:flex;flex-direction:column;gap:1px;min-width:60px}
.lib-d-l{font-size:8.5px;font-weight:800;color:var(--t3);text-transform:uppercase;letter-spacing:.4px}
.lib-d-v{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;color:var(--t0)}

.lib-mech{font-size:11px;color:var(--t2);line-height:1.5;margin-bottom:.5rem}
.lib-cues,.lib-balance,.lib-contra{font-size:10.5px;color:var(--t1);line-height:1.45;padding:5px 8px;border-radius:var(--r);margin-top:5px}
.lib-cues{background:var(--bg2);border-left:2px solid var(--acc)}
.lib-balance{background:var(--cns-bg);border-left:2px solid var(--cns);color:var(--cns)}
.lib-contra{background:var(--warn-bg);border-left:2px solid var(--warn);color:var(--warn)}
.lib-cues b,.lib-balance b,.lib-contra b{font-weight:800;color:inherit}

/* ── MOBILE ── */
@media(max-width:480px){
  .lib-grid{grid-template-columns:1fr;gap:10px}
  .lib-filter-bar{padding:.75rem .875rem}
  .lib-chip-lbl{min-width:auto;width:100%;margin-bottom:3px}
  .lib-chip{font-size:10.5px;padding:4px 10px}
  .lib-card{padding:.75rem .875rem}
}

/* ════════════════════════════════════════════════════════════
   BODY MAP
   ════════════════════════════════════════════════════════════ */
.lib-view-toggle{display:flex;gap:6px;margin-bottom:1rem;background:var(--bg1);border:1px solid var(--bdr);border-radius:var(--r2);padding:.375rem;box-shadow:var(--shadow-sm);width:fit-content}
.lib-vtgl{padding:7px 16px;border-radius:var(--r);border:1.5px solid transparent;background:transparent;color:var(--t2);cursor:pointer;font-family:'Inter',sans-serif;font-size:12px;font-weight:700;transition:all .15s}
.lib-vtgl:hover:not(.act){background:var(--bg2);color:var(--t1)}
.lib-vtgl.act{background:var(--acc-bg);border-color:var(--acc);color:var(--acc)}

.bm-container{background:var(--bg1);border:1px solid var(--bdr);border-radius:var(--r2);padding:1.25rem 1.5rem;box-shadow:var(--shadow-sm)}
.bm-view-header{margin-bottom:1.25rem}
.bm-title{font-size:13px;font-weight:800;color:var(--t0);margin-bottom:3px}
.bm-subtitle{font-size:10.5px;color:var(--t3)}

.bm-svgs{display:flex;gap:3rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.25rem}
.bm-svg-wrap{display:flex;flex-direction:column;align-items:center;gap:.5rem}
.bm-svg-lbl{font-size:9px;font-weight:800;color:var(--t3);text-transform:uppercase;letter-spacing:.8px}
.bm-svg{width:160px;height:auto;max-width:100%}

.bm-muscle{transition:opacity .15s,filter .15s}
.bm-muscle:hover{opacity:.75;filter:brightness(1.15) drop-shadow(0 0 4px rgba(67,97,238,.4))}

.bm-legend{border-top:1px solid var(--bdr);padding-top:1rem}
.bm-legend-scale{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-bottom:.75rem}
.bm-legend-item{display:flex;align-items:center;gap:5px}
.bm-legend-dot{width:14px;height:14px;border-radius:4px;border:1px solid var(--bdr2);display:inline-block;flex-shrink:0}
.bm-legend-txt{font-size:10.5px;font-weight:700;color:var(--t2)}

.bm-top-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.bm-top-lbl{font-size:9.5px;font-weight:800;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;margin-right:4px}
.bm-top-muscle{background:var(--bg2);border:1.5px solid var(--bdr2);border-radius:20px;color:var(--t1);padding:4px 10px;font-family:'Inter',sans-serif;font-size:10.5px;font-weight:700;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:5px;text-transform:capitalize}
.bm-top-muscle:hover{border-color:var(--acc);color:var(--acc);background:var(--acc-bg)}
.bm-top-cnt{background:rgba(0,0,0,.08);padding:1px 6px;border-radius:10px;font-size:9px;font-weight:800}

@media(max-width:600px){.bm-svgs{gap:1.5rem}.bm-svg{width:130px}.bm-container{padding:.875rem 1rem}}
@media(max-width:360px){.bm-svgs{flex-direction:column;align-items:center}.bm-svg{width:150px}}

/* ── LIBRARY SPLIT LAYOUT (Grid 60% + Body Map 40%) ── */
.lib-split{display:grid;grid-template-columns:60% 40%;gap:1rem;align-items:start}
.lib-split-main{min-width:0}
.lib-split-aside{position:sticky;top:1rem}
.lib-split-aside .bm-container{padding:1rem 1.125rem}
.lib-split-aside .bm-svgs{gap:1.5rem;margin-bottom:.875rem}
.lib-split-aside .bm-svg{width:120px}
.lib-split-aside .bm-title{font-size:12px}
.lib-split-aside .bm-subtitle{font-size:10px}
.lib-split-aside .bm-legend{padding-top:.625rem}
.lib-split-aside .bm-legend-scale{gap:.5rem;margin-bottom:.5rem}
.lib-split-aside .bm-legend-txt{font-size:9.5px}
.lib-split-aside .bm-top-muscle{font-size:9.5px;padding:3px 8px}
.lib-split-aside .lib-grid{grid-template-columns:1fr}
@media(max-width:900px){
  .lib-split{grid-template-columns:1fr}
  .lib-split-aside{position:static}
}

/* ── ADD EXERCISE BUTTON & MODAL ── */
.lib-add-btn{padding:7px 14px;border-radius:var(--r);border:1.5px solid var(--f3);background:var(--f3-bg);color:var(--f3);cursor:pointer;font-family:'Inter',sans-serif;font-size:11.5px;font-weight:800;transition:all .15s;white-space:nowrap;margin-left:6px}
.lib-add-btn:hover{background:var(--f3);color:#fff;box-shadow:0 2px 8px rgba(16,185,129,.3)}

.add-lib-modal .modal-box{width:520px;max-width:calc(100vw - 32px);max-height:90vh;overflow-y:auto}
.add-lib-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.add-lib-form-grid .full{grid-column:1/-1}
.add-lib-label{font-size:10px;font-weight:800;color:var(--t2);text-transform:uppercase;letter-spacing:.4px;margin-bottom:3px;display:block}
.add-lib-select{width:100%;background:var(--bg2);border:1.5px solid var(--bdr2);border-radius:var(--r);padding:8px 10px;font-size:12.5px;font-family:'Inter',sans-serif;color:var(--t0);outline:none}
.add-lib-select:focus{border-color:var(--acc)}
.add-lib-musc-grid{display:flex;flex-wrap:wrap;gap:5px;padding:8px;background:var(--bg2);border:1.5px solid var(--bdr2);border-radius:var(--r);max-height:140px;overflow-y:auto}
.add-lib-musc-chip{font-size:10px;font-weight:700;padding:4px 10px;border-radius:14px;background:var(--bg1);border:1.5px solid var(--bdr);color:var(--t2);cursor:pointer;transition:.12s;font-family:'Inter',sans-serif}
.add-lib-musc-chip:hover{border-color:var(--acc);color:var(--acc)}
.add-lib-musc-chip.sel{background:var(--acc);color:#fff;border-color:var(--acc)}
.add-lib-slug-preview{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--t3);margin-top:3px;padding:3px 6px;background:var(--bg2);border-radius:4px}

/* ════════════════════════════════════════════════════════════
   OVERVIEW
   ════════════════════════════════════════════════════════════ */
.ov-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.ov-card{background:var(--bg1);border:1px solid var(--bdr);border-radius:var(--r2);padding:1rem 1.25rem;box-shadow:var(--shadow-sm)}
.ov-l{font-size:10px;font-weight:800;color:var(--t3);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px}
.ov-v{font-size:28px;font-weight:800;color:var(--t0);line-height:1}
.ov-sub{font-size:12px;font-weight:600;color:var(--t2)}
.ov-meta{font-size:11px;color:var(--t2);margin-top:6px}
.ov-sel-list{display:flex;flex-direction:column;gap:6px}
.ov-sel-item{display:grid;grid-template-columns:1fr auto auto;gap:10px;padding:8px 10px;background:var(--bg2);border-radius:var(--r);align-items:center}
.ov-sel-name{font-size:12px;font-weight:700;color:var(--t0)}
.ov-sel-cat{font-size:10px;color:var(--t2);text-transform:uppercase;letter-spacing:.4px}
.ov-sel-tgt{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;color:var(--acc)}

/* ════════════════════════════════════════════════════════════
   BUILDER (drag & drop cart)
   ════════════════════════════════════════════════════════════ */
.bld-bar{display:flex;justify-content:space-between;align-items:center;background:var(--bg1);border:1px solid var(--bdr);border-radius:var(--r2);padding:.625rem 1rem;margin-bottom:1rem;box-shadow:var(--shadow-sm)}
.bld-bar-l{display:flex;align-items:center;gap:8px}
.bld-bar-lbl{font-size:10px;font-weight:800;color:var(--t3);text-transform:uppercase;letter-spacing:.5px}
.bld-bar-q{font-size:13px;font-weight:800;color:var(--acc)}
.bld-bar-cnt{font-size:11.5px;font-weight:700;color:var(--t1);background:var(--acc-bg);padding:4px 10px;border-radius:14px}

.bld-2col{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-height:60vh}
.bld-side{background:var(--bg1);border:1px solid var(--bdr);border-radius:var(--r2);padding:.75rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;min-height:0}
.bld-side-hdr{font-size:13px;font-weight:800;color:var(--t0);padding:0 4px 8px;border-bottom:1px solid var(--bdr);margin-bottom:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bld-search{flex:1;min-width:120px;background:var(--bg2);border:1.5px solid var(--bdr2);border-radius:var(--r);color:var(--t0);padding:5px 9px;outline:none;font-size:11.5px}
.bld-search:focus{border-color:var(--acc)}
.bld-cat-row{display:flex;flex-wrap:wrap;gap:4px;padding:0 4px 8px;border-bottom:1px solid var(--bdr);margin-bottom:6px}
.bld-chip{padding:3px 9px;border-radius:14px;border:1px solid var(--bdr2);background:var(--bg2);color:var(--t2);cursor:pointer;font-size:10px;font-weight:700;text-transform:capitalize;transition:.15s}
.bld-chip:hover{border-color:var(--acc);color:var(--acc)}
.bld-chip.act{background:var(--acc);color:#fff;border-color:var(--acc)}

.bld-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:2px;max-height:60vh}
.bld-card{background:var(--bg2);border:1.5px solid var(--bdr2);border-radius:var(--r);padding:8px 10px;cursor:grab;transition:.15s;position:relative}
.bld-card:hover{border-color:var(--acc);background:var(--acc-bg);transform:translateX(2px)}
.bld-card:active{cursor:grabbing}
.bld-card.selected{opacity:.55;background:var(--bg3)}
.bld-card-cat{display:inline-block;padding:1px 7px;border-radius:10px;font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}
.bld-card-cat.compound{background:var(--f1-bg);color:var(--f1)}
.bld-card-cat.isolation{background:var(--acc-bg);color:var(--acc)}
.bld-card-cat.run,.bld-card-cat.bike{background:var(--f3-bg);color:var(--f3)}
.bld-card-cat.swim{background:var(--inf-bg);color:var(--inf)}
.bld-card-cat.mobility{background:var(--cns-bg);color:var(--cns)}
.bld-card-cat.stability{background:var(--inf-bg);color:var(--inf)}
.bld-card-name{font-size:12.5px;font-weight:700;color:var(--t0);line-height:1.2}
.bld-card-meta{font-size:10px;color:var(--t2);margin-top:2px;text-transform:capitalize}
.bld-card-on{position:absolute;top:8px;right:10px;font-size:9.5px;font-weight:800;color:var(--f3)}

.bld-drop{transition:background .15s,border-color .15s}
.bld-drop.drag-over{background:var(--acc-bg);border-color:var(--acc);border-style:dashed}
.bld-sel-list{display:flex;flex-direction:column;gap:8px;flex:1;overflow-y:auto;max-height:60vh;padding:2px}
.bld-sel-item{background:var(--bg2);border:1.5px solid var(--bdr2);border-radius:var(--r);padding:8px 10px}
.bld-sel-row1{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.bld-sel-cat-pip{width:8px;height:8px;border-radius:4px;flex-shrink:0;background:var(--t3)}
.bld-sel-cat-pip.compound{background:var(--f1)}
.bld-sel-cat-pip.isolation{background:var(--acc)}
.bld-sel-cat-pip.run,.bld-sel-cat-pip.bike{background:var(--f3)}
.bld-sel-cat-pip.swim{background:var(--inf)}
.bld-sel-cat-pip.mobility{background:var(--cns)}
.bld-sel-cat-pip.stability{background:var(--inf)}
.bld-sel-name{flex:1;font-size:12.5px;font-weight:700;color:var(--t0)}
.bld-sel-x{background:transparent;border:none;color:var(--t3);font-size:18px;cursor:pointer;padding:0 4px;line-height:1;font-weight:700}
.bld-sel-x:hover{color:var(--warn)}
.bld-sel-row2{display:flex;gap:5px;flex-wrap:wrap}
.bld-tgt-val{width:70px;background:var(--bg1);border:1.5px solid var(--bdr2);border-radius:var(--r);padding:4px 7px;font-size:11px;outline:none;font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--t0)}
.bld-tgt-val:focus{border-color:var(--acc)}
.bld-tgt-unit{background:var(--bg1);border:1.5px solid var(--bdr2);border-radius:var(--r);padding:4px 7px;font-size:11px;color:var(--t0);cursor:pointer;outline:none}
.bld-tgt-note{flex:1;min-width:120px;background:var(--bg1);border:1.5px solid var(--bdr2);border-radius:var(--r);padding:4px 7px;font-size:11px;outline:none;color:var(--t0)}
.bld-tgt-note:focus{border-color:var(--acc)}

/* Mobile tab switcher — hidden di desktop */
.bld-tabs{display:none}
.bld-tab{flex:1;padding:8px 12px;border-radius:var(--r);border:1.5px solid transparent;background:transparent;color:var(--t2);cursor:pointer;font-family:'Inter',sans-serif;font-size:12px;font-weight:700;transition:all .15s}
.bld-tab:hover:not(.act){background:var(--bg2);color:var(--t1)}
.bld-tab.act{background:var(--acc-bg);border-color:var(--acc);color:var(--acc)}

@media(max-width:680px){
  .bld-2col{grid-template-columns:1fr}
  .bld-tabs{display:flex;gap:6px;margin-bottom:.75rem;background:var(--bg1);border:1px solid var(--bdr);border-radius:var(--r2);padding:.375rem;box-shadow:var(--shadow-sm)}
  .bld-2col[data-view="lib"] .bld-side-sel{display:none}
  .bld-2col[data-view="sel"] .bld-side-lib{display:none}
  .bld-list,.bld-sel-list{max-height:none}
  .bld-sel-row2{flex-direction:column;align-items:stretch}
  .bld-tgt-val,.bld-tgt-unit,.bld-tgt-note{width:100%;min-width:0;box-sizing:border-box}
}

/* ════════════════════════════════════════════════════════════
   PLAN (week × exercise grid)
   ════════════════════════════════════════════════════════════ */
.plan-tbl{width:100%;border-collapse:collapse;font-size:11px}
.plan-tbl th,.plan-tbl td{border:1px solid var(--bdr);padding:5px 8px;text-align:center}
.plan-tbl th{background:var(--bg2);color:var(--t1);font-weight:800;font-size:10px;text-transform:uppercase;position:sticky;top:0}
.plan-tbl td:first-child,.plan-tbl th:first-child{text-align:left;background:var(--bg2);min-width:140px}
.plan-cell{color:var(--t3);font-family:'JetBrains Mono',monospace}

/* ════════════════════════════════════════════════════════════
   LOG SUB-TABS
   ════════════════════════════════════════════════════════════ */
.log-subtab-row{display:flex;gap:6px;margin-bottom:1rem;background:var(--bg1);border:1px solid var(--bdr);border-radius:var(--r2);padding:.375rem;width:fit-content;box-shadow:var(--shadow-sm)}
.log-stab{padding:7px 16px;border-radius:var(--r);border:1.5px solid transparent;background:transparent;color:var(--t2);cursor:pointer;font-family:'Inter',sans-serif;font-size:12px;font-weight:700;transition:all .15s}
.log-stab:hover:not(.act){background:var(--bg2);color:var(--t1)}
.log-stab.act{background:var(--acc-bg);border-color:var(--acc);color:var(--acc)}