/* TrackMe — bahasa visual v2 (tb30)
   Urutan: token → dasar → shell → kontrol → primitif → kartu & tabel → lapisan → layar → responsif.
   Aturan yang dijaga (lihat design-style/KERNEL-PROMPT.md): warna hanya lewat token · skala font 12/13/14/16/20/24/32
   (bobot 400/500/600, tak pernah < 12px) · spasi kelipatan 4px · radius 6/8/12/pil · kartu & tabel = garis 1px TANPA
   bayangan; bayangan hanya untuk lapisan melayang · kedua tema lewat token (bukan override per komponen) ·
   status = ikon + teks + warna, tak pernah warna saja. */

/* ---------- 1. TOKEN ---------- */
:root{
  color-scheme:light;
  /* permukaan */
  --bg:#F6F8FB; --card:#FFFFFF; --bg2:#EEF2F7; --bg-hover:#E8EDF4; --track:#E3E9F1;
  /* garis: --line = pemisah halus; --line-ctl = batas kontrol (≥ 3:1) */
  --line:#DDE4EE; --line-ctl:#7B8AA0;
  /* teks (semua ≥ 4.5:1 di permukaan) */
  --ink:#10243B; --muted:#475A73; --faint:#5A6B84;
  /* aksen biru TUNGGAL: --brand2 = isian tombol/penanda; --accent-fg = teks/ikon/grafik di atas permukaan */
  --brand:#0E3A5D; --brand2:#1B6FAA; --accent-hover:#165E92; --on-accent:#FFFFFF;
  --brand-ghost:#E8F1FA; --accent-fg:#1B6FAA; --link:#165E92;
  --brand-ring:#1B6FAA33; --brand-line:#1B6FAA55;
  /* semantik */
  --ok:#146C3F; --ok-soft:#E6F4EC; --ok-line:#BFE0CC;
  --warn:#7A4F00; --gold-soft:#FFF3D6; --gold-line:#E2C87E;
  --danger:#B42318; --danger-soft:#FDECEA; --danger-line:#F0C4BD;
  --info:#0B5CAD; --info-soft:#E7F0FB; --info-line:#B9D2EA;
  --review:#5B3FA6; --review-soft:#F0EBFA;
  /* ikon/grafik status (≥ 3:1) */
  --st-todo:#8593A8; --st-doing:#2F7CC0; --st-review:#7A5AC8; --st-done:#2E8B57; --st-warn:#B7791F; --st-danger:#D0442F;
  /* dekoratif saja: garis logo, medali (bukan teks/status) */
  --gold:#A6861F; --gold-ink:#7A4F00;
  /* lapisan */
  --scroll:#C3CEDB; --toast:#0E2440; --scrim:rgb(16 36 59/.45);
  /* konstan lintas tema: teks/garis di atas isian berwarna tetap (avatar, logo, toast gelap) */
  --on-fill:#FFFFFF; --toast-ink:#FFFFFF; --toast-line:rgb(255 255 255/.12);
  --sh-pop:0 8px 24px rgb(16 36 59/.12),0 1px 2px rgb(16 36 59/.06);
  --sh-dlg:0 16px 48px rgb(16 36 59/.20);
  /* leaderboard */
  --lb-e:#0B7C71; --lb-o:#1B6FAA; --lb-l:#B42318;
  --lb-m1-bg:#7A4F00; --lb-m1-fg:#FFFFFF; --lb-m1-line:#A6861F;
  --lb-m2-bg:#475467; --lb-m2-fg:#FFFFFF; --lb-m2-line:#667085;
  --lb-m3-bg:#8A4E1F; --lb-m3-fg:#FFFFFF; --lb-m3-line:#9A5B25;
  --lb-t5:rgb(27 111 170/.06); --lb-t3:rgb(166 134 31/.09);
  --lb-lead-bg:#0E3A5D; --lb-lead-fg:#FFFFFF; --lb-lead-mut:#C2D3E6; --lb-lead-line:rgb(255 255 255/.14); --lb-lead-glow:rgb(43 134 197/.35);
  --lb-lead-arc:#D4B84A; --lb-lead-track:rgb(255 255 255/.18); --lb-lead-e:#33C2AE; --lb-lead-o:#6DB3EA; --lb-lead-l:#F28B80;
  /* tipografi (rem agar mengikuti pengaturan ukuran font pengguna) */
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --fs-12:.75rem; --fs-13:.8125rem; --fs-14:.875rem; --fs-16:1rem; --fs-20:1.25rem; --fs-24:1.5rem; --fs-32:2rem;
  /* isian: 14/13px di desktop; 16px pada pointer kasar (iOS memperbesar halaman saat fokus bila isian < 16px) */
  --fs-ctl:var(--fs-14); --fs-ctl-sm:var(--fs-13);
  /* spasi (kelipatan 4px) */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.25rem; --sp-6:1.5rem; --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem;
  /* bentuk */
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-full:999px; --radius:12px;
  /* tinggi kontrol */
  --h-sm:28px; --h-md:36px; --h-lg:44px;
  /* gerak */
  --dur-1:100ms; --dur-2:160ms; --dur-3:240ms; --ease:cubic-bezier(.2,0,0,1);
  /* tata letak */
  --side-w:248px; --rail-w:64px; --top-h:56px;
}
[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0B1220; --card:#111B2E; --bg2:#17243B; --bg-hover:#1E2D47; --track:#22314A;
  --line:#26364F; --line-ctl:#5C6F8C;
  --ink:#E7EDF6; --muted:#A9B8CE; --faint:#8C9DB6;
  --brand:#0E3A5D; --brand2:#2271AE; --accent-hover:#2877B4; --on-accent:#FFFFFF;
  --brand-ghost:#112238; --accent-fg:#6DB3EA; --link:#6DB3EA;
  --brand-ring:#2B86C555; --brand-line:#2B86C555;
  --ok:#5BD19A; --ok-soft:#10291F; --ok-line:#2FA36B55;
  --warn:#F0C24B; --gold-soft:#2D2410; --gold-line:#D4B84A50;
  --danger:#F28B80; --danger-soft:#32161A; --danger-line:#E4695E55;
  --info:#7DB9F0; --info-soft:#112238; --info-line:#2B86C555;
  --review:#B7A3F0; --review-soft:#231B3F;
  --st-todo:#7D8DA8; --st-doing:#4B9BE0; --st-review:#9C84E0; --st-done:#3DBA7E; --st-warn:#E3B341; --st-danger:#EF6F61;
  --gold:#D4B84A; --gold-ink:#D4B84A;
  --scroll:#2A4A6B; --toast:#16294A; --scrim:rgb(2 6 14/.66);
  --sh-pop:0 8px 24px rgb(0 0 0/.45),0 1px 2px rgb(0 0 0/.3);
  --sh-dlg:0 16px 48px rgb(0 0 0/.6);
  --lb-e:#33C2AE; --lb-o:#6DB3EA; --lb-l:#F28B80;
  --lb-m1-bg:#D4B84A; --lb-m1-fg:#0B1220; --lb-m1-line:#A6861F;
  --lb-m2-bg:#98A2B3; --lb-m2-fg:#0B1220; --lb-m2-line:#667085;
  --lb-m3-bg:#D08A4E; --lb-m3-fg:#0B1220; --lb-m3-line:#A66B35;
  --lb-t5:rgb(109 179 234/.09); --lb-t3:rgb(212 184 74/.09);
  --lb-lead-bg:#0E3A5D; --lb-lead-fg:#FFFFFF; --lb-lead-mut:#C2D3E6; --lb-lead-line:rgb(255 255 255/.14); --lb-lead-glow:rgb(43 134 197/.35);
  --lb-lead-arc:#D4B84A; --lb-lead-track:rgb(255 255 255/.18); --lb-lead-e:#33C2AE; --lb-lead-o:#6DB3EA; --lb-lead-l:#F28B80;
}
/* sentuhan: kontrol 44px agar mudah ditekan (tinggi > lebar pun lolos) */
@media (pointer:coarse){ :root{ --h-sm:44px; --h-md:44px; --h-lg:48px; --fs-ctl:var(--fs-16); --fs-ctl-sm:var(--fs-16) } }

/* ---------- 2. DASAR ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0;overflow-x:clip}
body{
  background:var(--bg); color:var(--ink); min-height:100vh;
  font:400 var(--fs-14)/1.4286 var(--font);
  font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:600;color:var(--ink);letter-spacing:-.01em}
h1{font-size:var(--fs-24);line-height:2rem;letter-spacing:-.02em}
h2{font-size:var(--fs-16);line-height:1.5rem}
h3,h4,h5,h6{font-size:var(--fs-14);line-height:1.25rem}
p{margin:0}
b,strong{font-weight:600}
small{font-size:var(--fs-12);line-height:1rem}
hr{border:0;border-top:1px solid var(--line);margin:var(--sp-4) 0}
a{color:var(--link)}
.muted{color:var(--muted)}
.tiny{font-size:var(--fs-12);line-height:1rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.row{display:flex;align-items:center}
.gap{gap:var(--sp-3)}
.wrap{flex-wrap:wrap}
.end{justify-content:flex-end}
.stack{display:flex;flex-direction:column;gap:var(--sp-2)}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3)}
.grid-2.gap,.grid-3.gap{gap:var(--sp-3) var(--sp-4)}
::selection{background:var(--brand-ring)}
::placeholder{color:var(--faint);opacity:1}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--accent-fg);outline-offset:2px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:var(--r-full);border:2px solid var(--bg)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
@media (forced-colors:active){:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline-color:Highlight}.prog i,.lb-stk,.lb-ring-a,.health-track i{forced-color-adjust:none}}

/* ---------- 3. SHELL: topbar · sidebar · main ---------- */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:var(--sp-3);height:var(--top-h);padding:0 var(--sp-4) 0 0;background:var(--card);border-bottom:1px solid var(--line)}
.top-left{display:flex;align-items:center;gap:var(--sp-2);width:var(--side-w);flex:none;align-self:stretch;padding:0 var(--sp-4) 0 var(--sp-5);border-right:1px solid var(--line);min-width:0}
.top-left .menu-btn{display:none}
.logo{display:flex;align-items:center;gap:10px;min-width:0}
.logo b{font-size:var(--fs-16);line-height:1.5rem;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.logo-hit{display:grid;place-items:center;flex:none;width:var(--h-md);height:var(--h-md);padding:0;border:0;border-radius:var(--r-md);background:transparent;cursor:pointer}
.logo-mark{display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-md);background:linear-gradient(135deg,var(--brand),var(--brand2));color:var(--on-fill);font:600 var(--fs-14)/1 var(--font);box-shadow:inset 0 -3px 0 var(--gold)}
.top-search{position:relative;flex:1 1 240px;max-width:480px;min-width:0;display:flex;align-items:center;min-height:var(--h-md);padding:0;background:var(--bg);border:1px solid var(--line-ctl);border-radius:var(--r-md);transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.top-search:focus-within{border-color:var(--accent-fg);box-shadow:0 0 0 3px var(--brand-ring)}
/* ikon di atas isian (tak menangkap klik): seluruh kotak = area ketuk kolom cari */
.top-search>span{position:absolute;left:var(--sp-3);top:50%;display:flex;color:var(--faint);transform:translateY(-50%);pointer-events:none}
.top-search input{flex:1;min-width:0;height:var(--h-md);padding:0 var(--sp-3) 0 calc(var(--sp-3) + 18px + var(--sp-2));border:0;border-radius:inherit;background:transparent;outline:0;color:var(--ink);font:inherit;font-size:var(--fs-ctl)}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:var(--sp-2)}
.top-actions .lang-btn{min-width:var(--h-md);padding:0 var(--sp-2)}

.layout{display:flex;min-height:calc(100vh - var(--top-h))}
#sidebar{width:var(--side-w);flex:none;display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--sp-4);background:var(--card);border-right:1px solid var(--line);overflow-x:clip;transition:width var(--dur-2) var(--ease)}
#sidebar.hidden{display:none}
.ic{width:18px;height:18px;flex:none}
.ic-14{width:14px;height:14px;vertical-align:-2px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav-label{display:flex;justify-content:space-between;align-items:center;margin:var(--sp-1) 0 var(--sp-1);padding:0 var(--sp-2);font-size:var(--fs-12);line-height:1rem;font-weight:600;letter-spacing:.06em;color:var(--faint)}
.nav-item{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:var(--h-md);padding:0 var(--sp-3);border:0;border-radius:var(--r-md);background:transparent;color:var(--muted);font:500 var(--fs-14)/1.25rem var(--font);text-align:left;cursor:pointer;transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.nav-item:hover{background:var(--bg-hover);color:var(--ink)}
.nav-item.active{background:var(--brand-ghost);color:var(--link);font-weight:600}
.nav-item.active::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 var(--r-full) var(--r-full) 0;background:var(--accent-fg)}
.side-foot{display:flex;flex-direction:column;gap:var(--sp-2);padding-bottom:var(--sp-4);border-bottom:1px solid var(--line)}
.side-foot .btn.help-side{display:none}
.drawer-head{display:none}
.side-collapse{margin-top:auto;display:flex;justify-content:center;padding-top:var(--sp-3);border-top:1px solid var(--line)}
#collapseBtn{width:100%;min-height:var(--h-sm);gap:var(--sp-2);border-color:transparent;background:var(--bg2);color:var(--muted);font-size:var(--fs-13)}
#collapseBtn .ic{width:16px;height:16px}
#collapseBtn:hover{color:var(--ink);background:var(--bg-hover)}
#collapseBtn svg{transition:transform var(--dur-2) var(--ease)}
/* kartu cakupan proyek */
.scope-card{padding:var(--sp-3);background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg)}
.scope-card .nav-label{padding:0;margin:0 0 var(--sp-2)}
.scope-card select{width:100%;font-weight:500}
.scope-info{margin-top:var(--sp-3);min-width:0;font-size:var(--fs-12);line-height:1rem;color:var(--muted)}
.scope-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;font-size:var(--fs-14);line-height:1.25rem;font-weight:600;color:var(--ink)}
.scope-meta{margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scope-dates{display:flex;gap:var(--sp-1);align-items:baseline;margin-top:var(--sp-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.scope-dates i{font-style:normal;color:var(--faint)}
.scope-info .scope-chips{display:flex;flex-wrap:wrap;gap:var(--sp-1);margin:var(--sp-2) 0}
.scope-info .prog{margin-top:0}
.scope-info .prog+small{display:block;margin-top:var(--sp-1)}
#main{flex:1;width:100%;min-width:0;max-width:1280px;margin:0 auto;padding:var(--sp-8) var(--sp-6) var(--sp-6)}
.app-foot{display:flex;justify-content:flex-end;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:1px solid var(--line);color:var(--faint);font-size:var(--fs-12);line-height:1rem}
.side-scrim{display:none}
@media (min-width:901px){
  .topbar{flex-wrap:nowrap}
  #sidebar{position:sticky;top:var(--top-h);height:calc(100vh - var(--top-h));height:calc(100dvh - var(--top-h));align-self:flex-start;overflow-y:auto;scrollbar-width:thin}
  body.side-collapsed #sidebar{width:var(--rail-w);padding:var(--sp-3) var(--sp-2)}
  body.side-collapsed .top-left{width:var(--rail-w);padding:0;justify-content:center}
  body.side-collapsed .logo b,body.side-collapsed nav .nav-label,body.side-collapsed .scope-card .nav-label span,body.side-collapsed .nav-item span,body.side-collapsed .side-foot span,body.side-collapsed #scopeInfo,body.side-collapsed #projectScope,body.side-collapsed #collapseBtn span{display:none}
  body.side-collapsed .scope-card .nav-label{display:flex;justify-content:center;margin:0}
  body.side-collapsed .scope-card{padding:0;background:transparent;border:0}
  body.side-collapsed .nav-item{justify-content:center;padding:0}
  body.side-collapsed .nav-item.active::before{top:6px;bottom:6px}
  body.side-collapsed .side-foot{padding:0 0 var(--sp-3)}
  body.side-collapsed .side-foot .btn{padding:0}
  body.side-collapsed .side-collapse{border-top:0;padding-top:var(--sp-2)}
  body.side-collapsed #collapseBtn svg{transform:rotate(180deg)}
}

/* ---------- 4. KONTROL ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:var(--h-md);padding:0 var(--sp-4);border:1px solid var(--line-ctl);border-radius:var(--r-md);background:var(--card);color:var(--ink);font:500 var(--fs-14)/1.25rem var(--font);white-space:nowrap;cursor:pointer;transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.btn:hover{background:var(--bg-hover)}
.btn:active{background:var(--track)}
.btn.primary{background:var(--brand2);border-color:var(--brand2);color:var(--on-accent)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn.tonal{background:var(--brand-ghost);border-color:transparent;color:var(--link);font-weight:600}
.btn.tonal:hover{background:var(--brand-line)}
.btn.ghost{background:transparent;border-color:transparent}
.btn.ghost:hover{background:var(--bg-hover)}
.btn.danger{background:var(--danger-soft);border-color:var(--danger);color:var(--danger)}
.btn.danger:hover{background:var(--danger-soft);border-width:1px;box-shadow:inset 0 0 0 1px var(--danger)}
.btn.small{min-height:var(--h-sm);padding:0 var(--sp-3);gap:var(--sp-1);font-size:var(--fs-13);line-height:1.125rem}
.btn.block{width:100%}
.btn[disabled],.btn:disabled{opacity:.5;cursor:not-allowed}
.btn .ic,.icon-btn .ic{flex:none}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--h-md);height:var(--h-md);padding:0;border:1px solid transparent;border-radius:var(--r-md);background:transparent;color:var(--muted);cursor:pointer;transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.icon-btn:hover{background:var(--bg-hover);color:var(--ink)}
.icon-btn.danger:hover{background:var(--danger-soft);color:var(--danger)}
.icon-btn.small{width:var(--h-sm);height:var(--h-sm);border-radius:var(--r-sm)}
.link{display:inline-flex;align-items:center;min-height:var(--h-sm);padding:0 var(--sp-1);border:0;border-radius:var(--r-sm);background:none;color:var(--link);font:600 var(--fs-13)/1.125rem var(--font);cursor:pointer;text-decoration:none}
.link:hover{text-decoration:underline;text-underline-offset:.18em}
.mini-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--h-sm);height:var(--h-sm);padding:0;border:0;border-radius:var(--r-sm);background:var(--bg2);color:var(--muted);font:600 var(--fs-14)/1 var(--font);cursor:pointer}
.mini-btn:hover{background:var(--bg-hover);color:var(--ink)}
/* sakelar segmen (Kartu/Daftar, geser linimasa) */
.seg{display:inline-flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg2)}
.seg button{min-width:var(--h-sm);min-height:var(--h-sm);padding:0 var(--sp-3);border:1px solid transparent;border-radius:var(--r-sm);background:transparent;color:var(--muted);font:500 var(--fs-13)/1.125rem var(--font);cursor:pointer;white-space:nowrap}
.seg button:hover{color:var(--ink)}
.seg button.active{background:var(--card);border-color:var(--line-ctl);color:var(--ink);font-weight:600}
/* isian */
input,select,textarea{font-family:inherit}
select{max-width:100%;min-height:var(--h-md);padding:0 2.25rem 0 var(--sp-3);border:1px solid var(--line-ctl);border-radius:var(--r-md);background-color:var(--card);color:var(--ink);font-size:var(--fs-ctl);appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2310243B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8rem center}
[data-theme="dark"] select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23D9E3F0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
select::-ms-expand{display:none}
select:hover:not(:disabled){border-color:var(--muted)}
.modal input:not([type=checkbox]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden]),.modal select,.modal textarea,.open-panel input,.sync-url{width:100%;min-height:var(--h-md);padding:0 var(--sp-3);border:1px solid var(--line-ctl);border-radius:var(--r-md);background:var(--card);color:var(--ink);font-size:var(--fs-ctl);transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.modal select{padding-right:2.25rem}
.modal textarea{padding:var(--sp-2) var(--sp-3);min-height:calc(var(--h-md) * 2);line-height:1.25rem;resize:vertical}
.modal input:focus,.modal select:focus,.modal textarea:focus,.open-panel input:focus{outline:0;border-color:var(--accent-fg);box-shadow:0 0 0 3px var(--brand-ring)}
.modal input:disabled,.modal select:disabled,.modal textarea:disabled{opacity:.5;background:var(--bg2);cursor:not-allowed}
.modal input[type=color]{width:100%;height:var(--h-md);padding:2px;border:1px solid var(--line-ctl);border-radius:var(--r-md);background:var(--card);cursor:pointer}
.modal input[type=checkbox],.xfer input[type=checkbox]{width:18px;height:18px;margin:0;flex:none;accent-color:var(--brand2);cursor:pointer}
.modal input[type=range]{width:100%;height:var(--h-sm);margin:0;accent-color:var(--brand2);cursor:pointer}
#loginUrl,#syncUrl{flex:1 1 200px;min-width:0}
#userSearch{min-width:0}
.list-search{max-width:320px;margin-bottom:var(--sp-4)}
.or{margin:var(--sp-2) 0;text-align:center}

/* ---------- 5. PRIMITIF: chip · tag · titik · avatar · progres ---------- */
.tag{display:inline-flex;align-items:center;gap:var(--sp-1);min-height:22px;padding:0 var(--sp-2);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);color:var(--muted);font-size:var(--fs-12);line-height:1rem;font-weight:500;white-space:nowrap}
.tag.hi{background:var(--gold-soft);border-color:var(--gold-line);color:var(--warn)}
.status-chip{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0 var(--sp-2) 0 10px;border:1px solid var(--line);border-radius:var(--r-full);background:var(--bg2);color:var(--muted);font-size:var(--fs-12);line-height:1rem;font-weight:500;white-space:nowrap}
.status-chip::before{content:'';flex:none;width:6px;height:6px;border-radius:50%;background:currentColor}
.status-chip.Berjalan{background:var(--info-soft);border-color:var(--info-line);color:var(--info)}
.status-chip.Selesai{background:var(--ok-soft);border-color:var(--ok-line);color:var(--ok)}
.status-chip.Perencanaan{background:var(--gold-soft);border-color:var(--gold-line);color:var(--warn)}
.status-chip.Tertunda{background:var(--danger-soft);border-color:var(--danger-line);color:var(--danger)}
.pill{display:inline-flex;align-items:center;gap:var(--sp-1);min-height:24px;padding:0 var(--sp-2);border:1px solid var(--danger-line);border-radius:var(--r-full);background:var(--danger-soft);color:var(--danger);font-size:var(--fs-12);line-height:1rem;font-weight:500;white-space:nowrap}
.pill.warn{background:var(--gold-soft);border-color:var(--gold-line);color:var(--warn)}
.pill.ok{background:var(--ok-soft);border-color:var(--ok-line);color:var(--ok)}
.code-chip{display:inline-block;min-height:22px;padding:0 var(--sp-2);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg);color:var(--muted);font:500 var(--fs-12)/20px ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap}
.count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-full);background:var(--bg2);color:var(--muted);font-size:var(--fs-12);line-height:1;font-weight:600}
.stat-inline{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.s-todo .ic,.col--todo .col-head .ic{color:var(--st-todo)}
.s-doing .ic,.col--doing .col-head .ic{color:var(--st-doing)}
.s-review .ic,.col--review .col-head .ic{color:var(--st-review)}
.s-done .ic,.col--done .col-head .ic{color:var(--st-done)}
.dot{display:inline-block;flex:none;width:8px;height:8px;margin-right:6px;border-radius:50%}
.qdot{display:inline-block;flex:none;width:8px;height:8px;margin-right:6px;border-radius:50%;vertical-align:middle}
.dot-track{background:var(--st-doing)}.dot-done{background:var(--st-done)}.dot-soon{background:var(--st-warn)}.dot-late{background:var(--st-danger)}
.overdue{color:var(--danger);font-weight:600}
.due-soon{color:var(--warn);font-weight:600}
.user-ava{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;color:var(--on-fill);font-size:var(--fs-12);line-height:1;font-weight:600;letter-spacing:.02em}
.avatar-stack{display:flex;align-items:center}
.avatar-stack span{display:inline-grid;place-items:center;width:24px;height:24px;margin-left:-6px;border:2px solid var(--card);border-radius:50%;color:var(--on-fill);font-size:var(--fs-12);line-height:1;font-weight:600}
.avatar-stack span:first-child{margin-left:0}
.prog{height:6px;margin-top:var(--sp-2);border-radius:var(--r-full);background:var(--track);overflow:hidden}
.prog i{display:block;height:100%;border-radius:inherit;background:var(--accent-fg)}

/* ---------- 6. KARTU · KEPALA HALAMAN · FILTER · KOSONG ---------- */
.view{display:none}
.view.active{display:block;animation:view-in var(--dur-3) var(--ease)}
@keyframes view-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-6)}
.page-head>div:first-child{min-width:0}
.page-head p{margin-top:var(--sp-1)}
.page-head p.muted{color:var(--muted)}
.eyebrow{margin:0 0 var(--sp-1);font-size:var(--fs-12);line-height:1rem;font-weight:600;letter-spacing:.08em;color:var(--accent-fg)}
.card{min-width:0;margin-bottom:var(--sp-4);padding:var(--sp-5);background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.card-head>b,.card-title{font-size:var(--fs-16);line-height:1.5rem;font-weight:600;letter-spacing:-.01em}
.card-head small{color:var(--faint)}
.empty{padding:var(--sp-8) var(--sp-4);text-align:center;color:var(--muted);font-size:var(--fs-14)}
.empty.tiny{padding:var(--sp-6) var(--sp-2);font-size:var(--fs-12)}
.inview-filters{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-4);min-width:0}
.inview-filters select{flex:0 1 200px;min-width:0;width:auto}
.inview-filters .filter-count{margin-left:auto;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--faint)}
.fb-label{margin-right:var(--sp-1);font-size:var(--fs-12);line-height:1rem;font-weight:600;letter-spacing:.06em;color:var(--faint);text-transform:uppercase}
label.sel-lab{display:inline-flex;align-items:center;gap:var(--sp-2);margin:0;white-space:nowrap;color:var(--muted);font-size:var(--fs-12);line-height:1rem;font-weight:600}
label.sel-lab select{width:auto;min-height:var(--h-sm);font-size:var(--fs-ctl-sm)}
.ctrl-row{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-2)}
.ctrl-row .sel-lab{margin-left:auto}

/* ---------- 7. TABEL ---------- */
.table-card{padding:0;overflow:hidden}
.table-wrap{position:relative;overflow:auto;max-width:100%}
.table-wrap table,.spec-table{width:100%;border-collapse:collapse;font-size:var(--fs-14)}
.table-wrap th,.spec-table th{height:var(--h-lg);padding:0 var(--sp-3);border-bottom:1px solid var(--line);background:var(--bg);color:var(--muted);font-size:var(--fs-12);line-height:1rem;font-weight:600;text-align:left;white-space:nowrap}
.table-wrap td,.spec-table td{padding:var(--sp-3) var(--sp-3);border-bottom:1px solid var(--line);vertical-align:middle;overflow-wrap:normal}
.table-wrap tbody tr:last-child td,.spec-table tbody tr:last-child td{border-bottom:0}
.table-wrap tbody tr:hover,.spec-table tbody tr:hover{background:var(--brand-ghost)}
#taskTable{min-width:1080px}
#taskTable td:nth-child(8),#taskTable td:nth-child(3){white-space:nowrap}
#taskTable td:nth-child(1){min-width:220px}
#taskTable th[data-sort]{cursor:pointer;user-select:none}
#taskTable th[data-sort]:hover{color:var(--ink)}
.spec-card{padding:0;overflow:hidden}
.spec-card .card-head{margin:0;padding:var(--sp-5) var(--sp-5) var(--sp-4)}
.spec-table{min-width:960px}
.spec-table td b{font-weight:600}
.spec-table td small{color:var(--muted)}
.range2{display:flex;flex-direction:column;gap:2px}
.range2 span{display:flex;align-items:baseline;gap:var(--sp-2);white-space:nowrap}
.range2 small{min-width:44px;color:var(--faint)}
.range2 b{font-size:var(--fs-13);line-height:1.125rem;font-weight:500}
.table-wrap td .prog{margin-top:0;min-width:88px}
.table-wrap td .prog+small{display:block;margin-top:var(--sp-1);color:var(--muted)}
td .user-ava{display:inline-grid;margin-right:var(--sp-2);vertical-align:middle}

/* ---------- 8. LAPISAN: modal · toast · hasil cari ---------- */
.overlay{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:var(--sp-4);background:var(--scrim);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.overlay.hidden{display:none}
.modal{display:flex;flex-direction:column;width:min(640px,100%);max-height:90vh;max-height:90dvh;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);box-shadow:var(--sh-dlg);overflow:hidden}
.modal.small{width:min(420px,100%)}
.modal.big{width:min(820px,100%)}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);flex:none;min-height:calc(var(--h-md) + 2 * var(--sp-3));padding:var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-5);border-bottom:1px solid var(--line)}
.modal-head h3{font-size:var(--fs-16);line-height:1.5rem;letter-spacing:-.01em}
.modal-body{display:flex;flex-direction:column;gap:var(--sp-3);flex:1;min-height:0;padding:var(--sp-4) var(--sp-5) var(--sp-5);overflow:auto}
.modal-foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-2);flex:none;flex-wrap:wrap;padding:var(--sp-3) var(--sp-5);border-top:1px solid var(--line);background:var(--card)}
.modal-foot .foot-left{margin-right:auto}
.modal-foot .foot-left:empty{display:none}
.modal label{display:block;margin:0}
.modal label>span:first-child{display:block;margin-bottom:var(--sp-1);font-size:var(--fs-13);line-height:1.125rem;font-weight:500;color:var(--muted)}
.modal label.check-line{display:flex;align-items:center;gap:var(--sp-2);cursor:pointer;color:var(--ink);font-size:var(--fs-14);font-weight:500}
.modal label.check-line>span:first-child{display:inline;margin:0;font-size:inherit;line-height:inherit;color:inherit;font-weight:inherit}
.modal label.btn,.modal label.sel-lab{display:inline-flex;align-items:center;margin:0}
.modal label.btn>span:first-child,.modal label.sel-lab>span:first-child{display:inline;margin:0;font:inherit;color:inherit}
.modal label.sel-lab>span:first-child{color:var(--muted);font-size:var(--fs-12);line-height:1rem;font-weight:600}
.fld-cap{display:block;margin-bottom:var(--sp-1);font-size:var(--fs-13);line-height:1.125rem;font-weight:500;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:var(--sp-6);z-index:200;transform:translateX(-50%);max-width:min(560px,calc(100vw - 32px));padding:var(--sp-3) var(--sp-4);border:1px solid var(--toast-line);border-left:3px solid var(--st-doing);border-radius:var(--r-md);background:var(--toast);color:var(--toast-ink);font-size:var(--fs-14);line-height:1.25rem;text-align:left;box-shadow:var(--sh-pop)}
.toast.hidden{display:none}
.sr-drop{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:80;max-height:340px;padding:var(--sp-1);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);box-shadow:var(--sh-pop);overflow:auto}
.sr-group{padding:var(--sp-2) var(--sp-3) var(--sp-1);font-size:var(--fs-12);line-height:1rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.sr-item{display:flex;align-items:center;gap:var(--sp-3);min-width:0;min-height:var(--h-lg);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-md);cursor:pointer;font-size:var(--fs-14)}
.sr-item:hover{background:var(--bg-hover)}
.sr-item .sr-main{flex:1;min-width:0}
.sr-item .sr-main b{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--fs-14);font-weight:600}
.sr-item .sr-main small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--muted)}
.sr-item mark{padding:0 1px;border-radius:4px;background:var(--gold-line);color:inherit}
.sr-empty{padding:var(--sp-3);text-align:center;color:var(--muted);font-size:var(--fs-13)}

/* ---------- 9. FORM KHUSUS: transfer ganda · tugas rutin · tim proyek ---------- */
.member-box{padding:var(--sp-3) var(--sp-4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg)}
.member-box>b{font-size:var(--fs-13);font-weight:600}
.xfer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2);min-width:0;margin-top:var(--sp-2)}
.xfer-col{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);overflow:hidden}
.xfer-cap{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--line);background:var(--bg2);color:var(--muted);font-size:var(--fs-12);line-height:1rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.xfer-n{min-width:20px;padding:0 6px;border-radius:var(--r-full);background:var(--card);border:1px solid var(--line);color:var(--ink);font-style:normal;font-size:var(--fs-12);line-height:18px;text-align:center}
.xfer-grp{padding:var(--sp-2) var(--sp-3) var(--sp-1);color:var(--faint);font-size:var(--fs-12);line-height:1rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.xfer-list{display:flex;flex-direction:column;align-content:flex-start;gap:2px;height:228px;padding:var(--sp-1);overflow-x:hidden;overflow-y:auto;scrollbar-width:thin}
.xfer-opt{display:flex;align-items:center;gap:var(--sp-2);flex:none;width:100%;min-height:40px;padding:var(--sp-1) var(--sp-2);border:1px solid transparent;border-radius:var(--r-md);background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.xfer-opt:hover{background:var(--brand-ghost);border-color:var(--brand-line)}
.xfer-opt:focus-visible{outline:2px solid var(--accent-fg);outline-offset:-2px}
.xfer-opt .user-ava{width:24px;height:24px}
.xfer-opt .member-txt{display:flex;flex-direction:column;flex:1;min-width:0}
.xfer-opt .member-txt b{font-size:var(--fs-13);line-height:1.125rem}
.xfer-opt .member-txt small{color:var(--muted)}
.xfer-empty{padding:var(--sp-5) var(--sp-2);text-align:center;color:var(--muted);font-size:var(--fs-13)}
.member-txt{flex:1;min-width:0}
.member-txt b{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--fs-14)}
.member-txt small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--muted)}
.routine-box{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border:1px dashed var(--line-ctl);border-radius:var(--r-md);background:var(--bg)}
.day-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--sp-1)}
.month-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--sp-1)}
.modal label.day-opt{display:flex;align-items:center;justify-content:center;min-height:var(--h-sm);padding:0;border:1px solid var(--line-ctl);border-radius:var(--r-md);background:var(--card);color:var(--muted);font-size:var(--fs-12);line-height:1rem;font-weight:600;white-space:nowrap;overflow:hidden;cursor:pointer}
.day-opt:has(input:checked){background:var(--brand2);border-color:var(--brand2);color:var(--on-accent)}
.day-opt input{display:none}
.help-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5) var(--sp-6);font-size:var(--fs-14)}
.help-grid h4{margin-bottom:var(--sp-2);color:var(--accent-fg)}
.help-grid ul{margin:0;padding-left:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-1)}

/* ---------- 10. BERANDA ---------- */
.dash-top{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);margin-bottom:var(--sp-4)}
.dash-top>.card{display:flex;flex-direction:column;margin-bottom:0}
.quad-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:var(--sp-3);flex:1}
.qcell{display:flex;flex-direction:column;justify-content:space-between;gap:var(--sp-2);min-width:0;padding:var(--sp-3) var(--sp-4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg)}
.qhead{display:flex;align-items:center;min-width:0}
.qhead .qdot{margin-right:var(--sp-2)}
.qhead h3{font-size:var(--fs-13);line-height:1.125rem;font-weight:600;color:var(--ink)}
.qrow{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-2)}
.qnum{font-size:var(--fs-32);line-height:2.5rem;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.qpct{font-size:var(--fs-13);line-height:1.125rem;font-weight:600;color:var(--muted)}
.qcell small{display:block;color:var(--muted)}
.q-critical .qdot{background:var(--st-danger)}.q-strategic .qdot{background:var(--st-doing)}.q-reactive .qdot{background:var(--st-warn)}.q-low .qdot{background:var(--st-todo)}
.pie-wrap{display:flex;align-items:center;gap:var(--sp-6);flex:1;min-width:0}
.donut-chart{position:relative;flex:none;width:160px;height:160px}
.pie-chart{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.pie-total{font-size:var(--fs-32);line-height:2.5rem;font-weight:600;letter-spacing:-.02em}
.donut-center small{color:var(--muted)}
.pie-legend{display:flex;flex-direction:column;flex:1;min-width:0;margin:0;padding:0;list-style:none}
.pie-legend li{display:grid;grid-template-columns:auto minmax(0,1fr) auto 3.5ch;align-items:center;gap:var(--sp-3);padding:var(--sp-3) 0;border-bottom:1px solid var(--line)}
.pie-legend li:last-child{border-bottom:0}
.pie-legend .dot{margin:0}
.pie-legend span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--fs-14);line-height:1.25rem}
.pie-legend b{font-size:var(--fs-20);line-height:1.75rem;font-weight:600;text-align:right}
.pie-legend em{font-style:normal;font-size:var(--fs-13);line-height:1.125rem;font-weight:500;color:var(--muted);text-align:right}
.pl-todo .dot{background:var(--st-todo)}.pl-active .dot{background:var(--st-doing)}.pl-done .dot{background:var(--st-done)}
/* detail proyek terpilih */
.detail-card{position:relative;margin-bottom:var(--sp-4);padding:var(--sp-5);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);overflow:hidden}
.detail-card::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;background:var(--pc,var(--accent-fg))}
.pd-tags{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-3)}
.pd-title{font-size:var(--fs-20);line-height:1.75rem}
.pd-sub{margin:var(--sp-1) 0 var(--sp-4)}
.pd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--sp-4);margin-bottom:var(--sp-4)}
.pd-grid>div>small{display:block;margin-bottom:2px;font-size:var(--fs-12);line-height:1rem;font-weight:600;color:var(--faint)}
.pd-grid b{font-size:var(--fs-14);line-height:1.25rem;font-weight:500}
.pd-prog{display:flex;align-items:center;gap:var(--sp-3);margin:0 0 var(--sp-4)}
.pd-prog .prog{flex:1;margin:0}
.pd-prog b{min-width:4ch;text-align:right}
.pd-team{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-4);font-size:var(--fs-13)}
.grid-2{margin-bottom:0}
.grid-2>.card{margin-bottom:var(--sp-4)}
.health-row{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(72px,1fr) 4ch;align-items:center;gap:var(--sp-3);padding:var(--sp-2) 0;font-size:var(--fs-13);line-height:1.125rem}
.health-row>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#healthRows{margin-top:var(--sp-5)}
.health-track{height:6px;border-radius:var(--r-full);background:var(--track);overflow:hidden}
.health-track i{display:block;height:100%;border-radius:inherit;background:var(--accent-fg)}
.health-row .pct{text-align:right;font-weight:600}
.donut-wrap{position:relative;width:148px;margin:0 auto}
.donut{width:148px;transform:rotate(-90deg)}
.donut-bg{fill:none;stroke:var(--track);stroke-width:10}
.donut-fg{fill:none;stroke:var(--accent-fg);stroke-width:10;stroke-linecap:round;stroke-dasharray:314;stroke-dashoffset:314;transition:stroke-dashoffset 1s var(--ease)}
.donut-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.donut-label b{font-size:var(--fs-24);line-height:2rem;font-weight:600;letter-spacing:-.02em}
.donut-label small{color:var(--muted)}
.urgent{display:flex;align-items:center;gap:var(--sp-3);min-width:0;padding:var(--sp-3) var(--sp-4);border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg)}
.urgent>div:first-child{flex:1;min-width:0}
.urgent b{overflow-wrap:anywhere;font-size:var(--fs-14);line-height:1.25rem;font-weight:600}
.urgent small{display:block;margin-top:2px;color:var(--muted)}
.urgent .d{margin-left:auto;text-align:right;flex:none}
.urgent .d small{margin-top:var(--sp-1)}
.urgent.u-late{box-shadow:inset 3px 0 0 var(--st-danger)}.urgent.u-soon{box-shadow:inset 3px 0 0 var(--st-warn)}.urgent.u-ok{box-shadow:inset 3px 0 0 var(--st-doing)}
.mini-timeline{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.mt-row{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);align-items:center;gap:var(--sp-4);font-size:var(--fs-13);line-height:1.125rem}
.mt-row>span{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mt-scale{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));color:var(--faint);font-size:var(--fs-12);line-height:1rem}
.mt-scale span{text-align:center}
.mt-track{position:relative;height:28px;min-width:0;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg);overflow:hidden}
.mt-bar{position:absolute;top:3px;bottom:3px;display:flex;align-items:center;padding:0 var(--sp-2);border-radius:var(--r-sm);overflow:hidden;white-space:nowrap;font-size:var(--fs-12);line-height:1rem;font-weight:600}
/* tabel spesifikasi proyek */
.spec-table td:nth-child(1){min-width:220px}
.spec-table td:nth-child(1) .code-chip{display:inline-block;margin-bottom:var(--sp-1)}
.spec-table td:nth-child(1) b,.spec-table td:nth-child(1) small{display:block}
.spec-table td:nth-child(2){white-space:nowrap}
.spec-table td:nth-child(3){min-width:112px}
.spec-table td:nth-child(7){white-space:nowrap}
.spec-table td:nth-child(9){width:1%;padding-left:0}
.spec-table .avatar-stack+small{display:block;margin-top:var(--sp-1)}
.spec-table tbody tr[data-action]{cursor:pointer}

/* ---------- 11. PAPAN ---------- */
.board{display:grid;grid-template-columns:repeat(4,minmax(260px,1fr));align-items:start;gap:var(--sp-4);padding-bottom:var(--sp-2);overflow-x:auto;scrollbar-width:thin}
.col{min-height:280px;padding:var(--sp-2);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg2)}
.col-head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-2) var(--sp-2) var(--sp-3)}
.col-head h2{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-14);line-height:1.25rem;font-weight:600}
.col-body{display:flex;flex-direction:column;gap:var(--sp-2);min-height:120px;border-radius:var(--r-md)}
.col-body.dragover{outline:2px dashed var(--accent-fg);outline-offset:-2px;background:var(--brand-ghost)}
.task-card{position:relative;display:flex;flex-direction:column;gap:var(--sp-2);min-width:0;padding:var(--sp-3) var(--sp-3) var(--sp-3) calc(var(--sp-3) + 3px);border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);overflow-wrap:anywhere;cursor:grab;transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.task-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:var(--r-md) 0 0 var(--r-md);background:var(--st-doing)}
.task-card:hover{border-color:var(--line-ctl)}
.task-card:focus-visible{outline-offset:1px}
.task-card.st-done::before{background:var(--st-done)}
.task-card.st-overdue::before{background:var(--st-danger)}
.task-card.st-soon::before{background:var(--st-warn)}
.task-card.st-track::before{background:var(--st-doing)}
.task-card.dragging{opacity:.55;box-shadow:var(--sh-pop);cursor:grabbing}
.tc-top{display:flex;align-items:center;gap:var(--sp-2);min-width:0;color:var(--muted);font-size:var(--fs-12);line-height:1rem;font-weight:500}
.tc-top .qdot{margin:0}
.tc-proj{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tc-flags{display:inline-flex;align-items:center;gap:var(--sp-1);flex:none;margin-left:auto}
.tc-title{font-size:var(--fs-14);line-height:1.25rem;font-weight:600;color:var(--ink)}
.task-card.st-done .tc-title{color:var(--muted)}
.tc-desc{color:var(--muted);font-size:var(--fs-13);line-height:1.125rem}
.tc-tags{display:flex;flex-wrap:wrap;gap:var(--sp-1)}
.card-part{display:flex;align-items:center;gap:var(--sp-1);min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--muted);font-size:var(--fs-12);line-height:1rem;font-weight:500}
.tc-prog{display:flex;align-items:center;gap:var(--sp-2);color:var(--muted);font-size:var(--fs-12);line-height:1rem;font-weight:500}
.tc-prog .prog{flex:1;margin:0;height:4px}
.tc-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);color:var(--muted);font-size:var(--fs-12);line-height:1rem}
.tc-pic{display:inline-flex;align-items:center;gap:6px;min-width:0}
.tc-pic .user-ava{width:20px;height:20px;font-size:var(--fs-12)}
.tc-pic span:last-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tc-due{display:inline-flex;align-items:center;gap:4px;flex:none;white-space:nowrap}
.edit-hint{display:inline-flex;color:var(--faint);opacity:0;transition:opacity var(--dur-1) var(--ease)}
.task-card:hover .edit-hint,.task-card:focus-visible .edit-hint{opacity:1}

/* ---------- 12. LINIMASA ---------- */
.g-summary{display:flex;align-items:center;gap:var(--sp-4);margin:0 0 var(--sp-4)}
.g-summary b{font-size:var(--fs-32);line-height:2.5rem;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.g-sum-txt{display:flex;flex-direction:column;gap:2px;min-width:0;padding-left:var(--sp-4);border-left:2px solid var(--line)}
.g-sum-txt span{font-size:var(--fs-12);line-height:1rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.g-sum-txt small{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.legend{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2) var(--sp-5);margin-bottom:var(--sp-3)}
.legend>span{display:inline-flex;align-items:center}
.gantt-card{padding:var(--sp-2) var(--sp-5) var(--sp-3);overflow:auto}
.gantt{min-width:980px}
.g-row{display:grid;grid-template-columns:28px minmax(0,96px) minmax(0,190px) minmax(0,140px) minmax(0,132px) minmax(0,1fr);align-items:center;gap:var(--sp-3);padding:var(--sp-2) 0;border-bottom:1px solid var(--line);font-size:var(--fs-13);line-height:1.125rem}
.g-row:last-child{border-bottom:0}
.g-row>span{min-width:0;overflow:hidden}
.g-row>span small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.g-head{padding:var(--sp-3) 0 var(--sp-2);color:var(--muted);font-size:var(--fs-12);line-height:1rem;font-weight:600}
.g-no{text-align:right;color:var(--faint);font-size:var(--fs-12);font-weight:500}
.g-code{display:flex;align-items:center;min-width:0;overflow:hidden}
.g-code .code-chip{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.g-name b{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--fs-13);line-height:1.125rem;font-weight:600}
.g-date{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--muted)}
.g-pic{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;min-width:0}
.g-pic .upline{display:flex;align-items:center;gap:var(--sp-2);min-width:0;max-width:100%}
.g-pic .user-ava{width:24px;height:24px;font-size:var(--fs-12)}
.g-pic .upline span:last-child{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--fs-13);font-weight:500}
.g-pic .cp-line{max-width:100%;padding-left:32px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--muted);font-size:var(--fs-12);line-height:1rem}
.g-scale{position:relative;height:40px;overflow:hidden}
.g-scale span{position:absolute;bottom:0;white-space:nowrap;color:var(--muted);font-size:var(--fs-12);line-height:1rem}
.g-scale .yr{position:absolute;top:0;white-space:nowrap;color:var(--accent-fg);font-size:var(--fs-12);line-height:1rem;font-weight:600;letter-spacing:.04em}
.g-track{position:relative;height:28px;min-width:0;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg);overflow:hidden}
.g-today{position:absolute;top:0;bottom:0;z-index:2;width:2px;background:var(--st-danger)}
.g-bar{position:absolute;top:4px;bottom:4px;min-width:12px;border:1px solid var(--brand-line);border-radius:var(--r-sm);background:var(--brand-ghost);overflow:hidden;cursor:pointer}
.g-bar i{position:absolute;top:0;bottom:0;left:0}
.g-bar b{position:absolute;top:50%;right:4px;transform:translateY(-50%);padding:0 6px;border-radius:var(--r-sm);background:var(--card);color:var(--ink);font-size:var(--fs-12);line-height:1rem;font-weight:600;white-space:nowrap}
.g-out{position:absolute;top:50%;transform:translateY(-50%);color:var(--muted);font-size:var(--fs-12);line-height:1rem;font-weight:600;white-space:nowrap}
.g-bar.late{outline:2px solid var(--st-danger);outline-offset:-1px}
.g-bar.routine{border-style:dashed}
#gantt{cursor:grab}
#gantt.grabbing{cursor:grabbing;user-select:none}
#gantt .g-scale{cursor:inherit}

/* ---------- 13. PENGGUNA & UNIT ---------- */
.user-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--sp-4)}
.user-card{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0;padding:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);transition:border-color var(--dur-1) var(--ease)}
.user-card:hover{border-color:var(--line-ctl)}
.uc-head{display:flex;align-items:center;gap:var(--sp-3);min-width:0}
.uc-head .user-ava{width:40px;height:40px;font-size:var(--fs-14)}
.uc-id{flex:1;min-width:0}
.uc-id b{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--fs-14);line-height:1.25rem;font-weight:600}
.uc-id small{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--muted)}
.uc-load{flex:none;display:flex;flex-direction:column;align-items:flex-end;line-height:1}
.uc-load b{font-size:var(--fs-20);line-height:1.5rem;font-weight:600}
.uc-load small{color:var(--muted)}
.uc-projs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1);min-height:var(--sp-5)}
.uc-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2);margin-top:auto;padding-top:var(--sp-3);border-top:1px solid var(--line)}
.uc-contact{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--muted);font-size:var(--fs-12);line-height:1rem}
.uc-actions{display:flex;flex:none;gap:var(--sp-1)}
.u-cell{display:flex;align-items:center;gap:var(--sp-3);min-width:0}
.u-cell .user-ava{width:32px;height:32px;margin:0}
.u-cell b{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--fs-14);font-weight:600}
.user-detail,.unit-detail{min-width:720px}
.user-detail td,.unit-detail td{vertical-align:middle}
.user-detail th:nth-child(1){width:200px}.user-detail th:nth-child(4){width:120px}.user-detail th:nth-child(5){width:170px}.user-detail th:last-child{width:96px}
.unit-detail th:nth-child(1){width:260px}.unit-detail th:nth-child(4){width:120px}.unit-detail th:last-child{width:96px}
.up-list{display:flex;flex-direction:column;gap:var(--sp-2)}
.up-line,.um-item{display:flex;align-items:center;gap:var(--sp-3);min-width:0;padding:var(--sp-3);border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg)}
.up-line{cursor:pointer}
.up-line:hover{border-color:var(--accent-fg);background:var(--brand-ghost)}
.up-line b,.um-item b{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--fs-14)}
#userCount,#unitCount{margin:var(--sp-4) 0 0}
#view-users>.card,#view-units>.card{padding:0;border:0;background:transparent}
.user-grid+.table-card,.card>.table-card{margin-bottom:0}

/* ---------- 14. LEADERBOARD ---------- */
.lb-head-tools{display:flex;align-items:center;gap:var(--sp-2);align-self:flex-end}
.lb-period{display:inline-flex;align-items:center;gap:var(--sp-2);max-width:100%;min-height:var(--h-md);padding:0 var(--sp-3);border:1px solid var(--line);border-radius:var(--r-full);background:var(--card);color:var(--ink);font-size:var(--fs-12);line-height:1rem;font-weight:600}
.lb-period .ic{width:14px;height:14px;color:var(--muted)}
.lb-prog{flex:none;width:48px;height:4px;border-radius:var(--r-full);background:var(--track);overflow:hidden}
.lb-prog i{display:block;height:100%;background:var(--accent-fg)}
.lb-blank{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);padding:var(--sp-12) var(--sp-4);text-align:center}
.lb-blank-ic{width:44px;height:44px;color:var(--track)}
/* leaderboard v3: sorotan juara (kartu navy + cincin skor) + klasemen berbatang (tiap baris = batang skor) */
.lb-ring{--rs:44px;--rw:2.4;--ri:10px;position:relative;flex:none;display:grid;place-items:center;width:var(--rs);height:var(--rs)}
.lb-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.lb-ring circle{fill:none;stroke-width:var(--rw);stroke-linecap:round}
.lb-ring-t{stroke:var(--track)}
.lb-ring-a{stroke:var(--lb-arc,var(--accent-fg));animation:lb-draw calc(var(--dur-3) * 3) var(--ease) both}
@keyframes lb-draw{from{stroke-dasharray:0 100}}
.lb-ring .user-ava{width:calc(var(--rs) - var(--ri));height:calc(var(--rs) - var(--ri));font-size:var(--fs-12)}
.lb-ring--m1{--lb-arc:var(--lb-m1-bg)}.lb-ring--m2{--lb-arc:var(--lb-m2-bg)}.lb-ring--m3{--lb-arc:var(--lb-m3-bg)}
.lb-lead{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:var(--sp-5);margin-bottom:var(--sp-4);padding:var(--sp-6);border:1px solid var(--lb-lead-line);border-radius:var(--r-lg);background:var(--lb-lead-bg);color:var(--lb-lead-fg)}
.lb-lead::before{content:'';position:absolute;top:-50%;right:-10%;width:72%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--lb-lead-glow),transparent 68%);pointer-events:none}
.lb-lead>*{position:relative}
.lb-lead>.lb-mark{position:absolute;right:var(--sp-5);bottom:calc(var(--sp-4) * -1);width:136px;height:136px;color:var(--lb-lead-line);stroke-width:1.1;pointer-events:none}
.lb-lead-main{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--sp-5)}
.lb-lead .lb-ring{--rs:96px;--rw:2.2;--ri:18px;--lb-arc:var(--lb-lead-arc)}
.lb-lead .lb-ring-t{stroke:var(--lb-lead-track)}
.lb-lead .lb-ring .user-ava{font-size:var(--fs-24)}
.lb-lead-id{display:flex;flex-direction:column;gap:2px;min-width:0}
.lb-kick{color:var(--lb-lead-arc);font-size:var(--fs-12);line-height:1rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.lb-lead-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--fs-24);line-height:2rem;font-weight:600;letter-spacing:-.02em}
.lb-lead-unit{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--lb-lead-mut)}
.lb-stats{display:flex;gap:var(--sp-8);margin:0}
.lb-stat{min-width:0}
.lb-stat dt{color:var(--lb-lead-mut);font-size:var(--fs-12);line-height:1rem;font-weight:500}
.lb-stat dd{margin:0;font-size:var(--fs-20);line-height:2rem;font-weight:600;white-space:nowrap}
.lb-stat--score dd{font-size:var(--fs-32);line-height:2.5rem;letter-spacing:-.02em}
.lb-stat dd small{margin-left:var(--sp-1);color:var(--lb-lead-mut);font-size:var(--fs-12);font-weight:500}
.lb-lead-foot{display:flex;flex-direction:column;gap:var(--sp-2)}
.lb-lead .lb-stack{height:8px;margin:0;background:var(--lb-lead-track)}
.lb-lead .lb-stk--e{background:var(--lb-lead-e)}.lb-lead .lb-stk--o{background:var(--lb-lead-o)}.lb-lead .lb-stk--l{background:var(--lb-lead-l)}
.lb-counts{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);margin:0;color:var(--lb-lead-mut);font-size:var(--fs-12);line-height:1rem}
.lb-counts span{display:inline-flex;align-items:center;gap:6px}
.lb-counts b{color:var(--lb-lead-fg)}
.lb-counts .lb-dot--e{background:var(--lb-lead-e)}.lb-counts .lb-dot--o{background:var(--lb-lead-o)}.lb-counts .lb-dot--l{background:var(--lb-lead-l)}
.lb-counts .lb-gap{margin-left:auto;color:var(--lb-lead-arc);font-weight:600}
.lb-board{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
.lb-ledger{margin:0;padding:0 var(--sp-2) var(--sp-2);list-style:none}
.lb-head,.lb-row{display:grid;grid-template-columns:36px minmax(0,1.6fr) minmax(0,1.3fr) minmax(0,.8fr) 64px;align-items:center;gap:var(--sp-4);padding:0 var(--sp-4)}
.lb-head{min-height:var(--h-lg);color:var(--muted);font-size:var(--fs-12);line-height:1rem;font-weight:600}
.lb-head>span:first-child{text-align:center}.lb-head>span:last-child{text-align:right}
.lb-row{position:relative;isolation:isolate;min-height:56px;padding-top:var(--sp-2);padding-bottom:var(--sp-2)}
.lb-row::before{content:'';position:absolute;z-index:-1;inset:2px auto 2px 0;width:var(--w,0%);border-radius:var(--r-md);background:var(--lb-t5)}
.lb-rk{color:var(--muted);font-size:var(--fs-14);line-height:1.25rem;font-weight:600;text-align:center}
.lb-row--2 .lb-rk{color:var(--lb-m2-bg)}.lb-row--3 .lb-rk{color:var(--lb-m3-bg)}
.lb-who{display:flex;align-items:center;gap:var(--sp-3);min-width:0}
.lb-utxt{display:flex;flex-direction:column;min-width:0}
.lb-utxt b{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--fs-14);font-weight:600}
.lb-utxt small{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--muted)}
.lb-acc{display:flex;flex-direction:column;gap:6px;min-width:0;max-width:260px}
.lb-acc .lb-stack{height:4px;margin:0}
.lb-cnt{display:inline-flex;align-items:center;gap:var(--sp-2);color:var(--muted);font-size:var(--fs-12);line-height:1rem;font-weight:500;white-space:nowrap}
.lb-cnt>span:not(.sr-only){display:inline-flex;align-items:center;gap:6px;margin-right:var(--sp-1)}
.lb-load{min-width:0;color:var(--muted);font-size:var(--fs-12);line-height:1rem;font-weight:500;white-space:nowrap}
.lb-sco{font-size:var(--fs-16);line-height:1.5rem;font-weight:600;text-align:right;white-space:nowrap}
.lb-stack{position:relative;display:flex;height:6px;margin-bottom:var(--sp-2);border-radius:var(--r-full);background:var(--track);overflow:hidden}
.lb-stk{height:100%;min-width:2px}
.lb-stk--e{background:var(--lb-e)}.lb-stk--o{background:var(--lb-o)}.lb-stk--l{background:var(--lb-l)}
.lb-stk-empty{width:100%;text-align:center;color:var(--muted);font-size:var(--fs-12);line-height:6px}
.lb-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--muted)}
.lb-dot--e{background:var(--lb-e)}.lb-dot--o{background:var(--lb-o)}.lb-dot--l{background:var(--lb-l)}
.lb-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-4)}
.lb-legend{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4)}
.lb-lg{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:var(--fs-12);line-height:1rem;font-weight:500}
.lb-lg b{color:var(--ink)}
.lb-help{display:flex;flex-direction:column;gap:var(--sp-3)}
.lb-hcard{padding:var(--sp-3) var(--sp-4);border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg)}
.lb-hhead{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-1);font-size:var(--fs-14)}
.lb-hhead .ic{width:16px;height:16px;color:var(--accent-fg)}
.lb-hcard p{margin:var(--sp-1) 0;color:var(--muted);font-size:var(--fs-13);line-height:1.375rem}
.lb-hpill{display:inline-flex;margin-top:var(--sp-2);padding:2px var(--sp-3);border:1px solid var(--line);border-radius:var(--r-full);background:var(--card);color:var(--ink);font-size:var(--fs-12);line-height:1rem;font-weight:600}
.lb-formula{margin:var(--sp-1) 0 var(--sp-2);padding:var(--sp-2) var(--sp-3);border:1px dashed var(--brand2);border-radius:var(--r-md);background:var(--brand-ghost);color:var(--ink);font-size:var(--fs-14);font-weight:600;text-align:center}
.lb-hgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
.lb-hsub{min-width:0;padding:var(--sp-2) var(--sp-3);border:1px solid var(--line);border-radius:var(--r-md);background:var(--card)}
.lb-hsub b{font-size:var(--fs-13)}
.lb-hsub p{margin:var(--sp-1) 0 var(--sp-2);font-size:var(--fs-12);line-height:1rem}
.lb-wchips{display:flex;flex-wrap:wrap;gap:var(--sp-1)}
.lb-wchip{display:inline-flex;align-items:center;gap:6px;padding:0 var(--sp-2);border:1px solid var(--line);border-radius:var(--r-full);background:var(--bg2);color:var(--ink);font-size:var(--fs-12);line-height:20px;font-weight:600;white-space:nowrap}
.lb-wchip b{color:var(--accent-fg)}
.lb-rules{margin:0;padding-left:var(--sp-5);color:var(--muted);font-size:var(--fs-13);line-height:1.5rem}
.lb-arch{display:flex;flex-direction:column;gap:var(--sp-2);margin:0;padding:0;list-style:none}
.lb-arch li{display:flex;flex-direction:column;gap:2px;padding-left:var(--sp-3);border-left:2px solid var(--line-ctl);font-size:var(--fs-13)}
.lb-arch span{color:var(--muted);font-size:var(--fs-12)}

/* ---------- 15. GERBANG MASUK ---------- */
#loginPage{display:flex;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;padding:var(--sp-6);background:radial-gradient(900px 380px at 50% -10%,var(--brand-ghost),transparent),var(--bg)}
body:not(.logged-out) #loginPage{display:none}
body.logged-out .topbar,body.logged-out .layout{display:none}
.login-card{width:min(520px,100%);padding:var(--sp-8) var(--sp-8) var(--sp-6);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);box-shadow:var(--sh-pop);text-align:center}
.brand-mark{display:inline-grid;place-items:center;width:48px;height:48px;border-radius:var(--r-lg);background:linear-gradient(135deg,var(--brand),var(--brand2));color:var(--on-fill);font:600 var(--fs-24)/1 var(--font);box-shadow:inset 0 -4px 0 var(--gold)}
.login-card h1{margin:var(--sp-3) 0 var(--sp-1);font-size:var(--fs-32);line-height:2.5rem}
.tagline{margin:0 0 var(--sp-5);color:var(--muted);font-size:var(--fs-12);line-height:1rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.opt-row{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-3)}
#continueBox{margin-bottom:var(--sp-3)}
.opt{display:block;width:100%;padding:var(--sp-4);border:1px solid var(--line-ctl);border-radius:var(--r-lg);background:var(--card);color:var(--ink);font:inherit;text-align:center;cursor:pointer;transition:border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease)}
.opt:hover{border-color:var(--accent-fg);background:var(--bg)}
.opt b{display:block;font-size:var(--fs-16);line-height:1.5rem;font-weight:600}
.opt small{display:block;margin-top:2px;color:var(--muted);font-size:var(--fs-13);line-height:1.125rem}
.opt.primary{border-color:var(--brand2);background:var(--brand2);color:var(--on-accent)}
.opt.primary:hover{border-color:var(--accent-hover);background:var(--accent-hover)}
.opt.primary small{color:var(--on-accent)}
#loginPage.has-data .opt-row .opt.primary{border-color:var(--line-ctl);background:var(--card);color:var(--ink)}
#loginPage.has-data .opt-row .opt.primary:hover{border-color:var(--accent-fg);background:var(--bg)}
#loginPage.has-data .opt-row .opt.primary small{color:var(--muted)}
.login-alt{display:flex;align-items:center;justify-content:center;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-4)}
.open-panel{margin-top:var(--sp-3);padding:var(--sp-4);border:1px dashed var(--line-ctl);border-radius:var(--r-lg);background:var(--bg);text-align:center}
.open-panel .or{margin:var(--sp-3) 0;color:var(--muted);font-size:var(--fs-12);line-height:1rem;text-align:center}
.open-panel input{width:100%}

/* ---------- 16. DATABASE: kartu status · penanda topbar · bagian data ---------- */
.db-card{margin:0 0 var(--sp-3);padding:var(--sp-4);border:1px solid var(--line);border-left:4px solid var(--brand2);border-radius:var(--r-lg);background:var(--bg)}
.db-main{display:flex;align-items:flex-start;gap:var(--sp-3)}
.db-dot{flex:none;width:10px;height:10px;margin-top:6px;border-radius:50%;background:var(--brand2)}
.db-txt{flex:1;min-width:0}
.db-txt>b{display:block;font-size:var(--fs-14);line-height:1.25rem;font-weight:600}
.db-txt p{margin:var(--sp-1) 0 0;line-height:1.25rem;overflow-wrap:anywhere}
.db-txt p b{font-size:inherit;font-weight:600}
.db-card .ctrl-row{margin-top:var(--sp-3)}
.db-card .db-dir{margin:var(--sp-3) 0 0;line-height:1.25rem}
.db-card.tone-ok{border-left-color:var(--st-done);background:var(--ok-soft)}.db-card.tone-ok .db-dot{background:var(--st-done)}
.db-card.tone-warn{border-left-color:var(--st-warn);background:var(--gold-soft)}.db-card.tone-warn .db-dot{background:var(--st-warn)}
.db-card.tone-bad{border-left-color:var(--st-danger);background:var(--danger-soft)}.db-card.tone-bad .db-dot{background:var(--st-danger)}
.sync-chip{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--h-md);padding:0 var(--sp-3);border:1px solid var(--line);border-radius:var(--r-full);background:var(--card);color:var(--muted);font:600 var(--fs-12)/1rem var(--font);white-space:nowrap;cursor:pointer;transition:border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease)}
.sync-chip:hover{border-color:var(--line-ctl)}
.sync-chip .dot{width:8px;height:8px;margin:0;background:var(--st-doing)}
.sync-chip.tone-ok .dot{background:var(--st-done)}
.sync-chip.tone-warn{border-color:var(--gold-line);background:var(--gold-soft);color:var(--warn)}.sync-chip.tone-warn .dot{background:var(--st-warn)}
.sync-chip.tone-bad{border-color:var(--danger-line);background:var(--danger-soft);color:var(--danger)}.sync-chip.tone-bad .dot{background:var(--st-danger)}
.data-sec{display:flex;gap:var(--sp-3);margin-bottom:var(--sp-3);padding:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg)}
.ds-ico{display:grid;place-items:center;flex:none;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:var(--card);color:var(--muted)}
.ds-body{flex:1;min-width:0}
.data-sec .ds-body>b{display:block;font-size:var(--fs-14);line-height:1.25rem;font-weight:600}
.data-sec p{margin:var(--sp-1) 0 var(--sp-3)}
.data-sec p b,.data-sec .hint-block b{display:inline;font-size:inherit}
.data-sec input[type=file]{display:none}
.hint-block{margin:var(--sp-3) 0 0;padding:var(--sp-3);border-left:3px solid var(--brand2);border-radius:0 var(--r-md) var(--r-md) 0;background:var(--brand-ghost);line-height:1.375rem}
.folder-line{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.sync-state{margin:var(--sp-2) 0 0;color:var(--muted)}
.brand-mark+h1{margin-top:var(--sp-3)}

/* ---------- 17. RESPONSIF ---------- */
@media (max-width:1100px){
  .help-grid,.dash-top,.grid-2:not(.gap){grid-template-columns:minmax(0,1fr)}
  .board{grid-template-columns:repeat(2,minmax(260px,1fr))}
  .lb-hgrid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  /* tablet potret & mobile: topbar ringkas + sidebar menjadi laci dengan tirai */
  .topbar{gap:var(--sp-2);padding-right:var(--sp-3)}
  .top-left .menu-btn{display:inline-flex}
  .top-left{width:auto;gap:var(--sp-1);padding:0 0 0 var(--sp-2);border-right:0}
  .top-search{flex:1 1 auto}
  .top-actions{gap:var(--sp-1)}
  #sidebar{position:fixed;z-index:60;left:0;top:0;bottom:0;width:min(288px,86vw);padding-top:0;overflow-y:auto;box-shadow:var(--sh-dlg);transform:translateX(-110%);transition:transform var(--dur-2) var(--ease)}
  #sidebar.open{transform:none}
  .side-scrim{position:fixed;inset:0;z-index:55;background:var(--scrim)}
  body.drawer-open .side-scrim{display:block}
  .side-collapse{display:none}
  .drawer-head{display:flex;align-items:center;gap:var(--sp-3);flex:none;height:var(--top-h);margin:0 calc(var(--sp-4) * -1);padding:0 var(--sp-3) 0 var(--sp-5);border-bottom:1px solid var(--line)}
  .drawer-head b{flex:1;font-size:var(--fs-16);line-height:1.5rem;font-weight:600;letter-spacing:-.01em}
  #main{padding:var(--sp-6) var(--sp-5)}
}
@media (max-width:900px){
  .lb-lead-main{grid-template-columns:auto minmax(0,1fr)}
  .lb-stats{grid-column:1/-1}
}
@media (max-width:760px){
  .lb-head-tools{align-self:flex-start}
}
@media (max-width:720px){
  .lb-lead{padding:var(--sp-5)}
  .lb-lead .lb-ring{--rs:72px;--ri:14px}
  .lb-lead>.lb-mark{width:96px;height:96px;right:var(--sp-3)}
  .lb-lead .lb-ring .user-ava{font-size:var(--fs-20)}
  .lb-stats{justify-content:space-between;gap:var(--sp-3)}
  .lb-counts .lb-gap{margin-left:0;flex-basis:100%}
  .lb-head{display:none}
  .lb-board{padding-top:var(--sp-2)}
  .lb-row{grid-template-columns:28px minmax(0,1fr) auto;grid-template-areas:"rk who sco" ". acc load";gap:var(--sp-2) var(--sp-3);padding:var(--sp-3)}
  .lb-rk{grid-area:rk}.lb-who{grid-area:who}.lb-acc{grid-area:acc}.lb-load{grid-area:load;text-align:right}.lb-sco{grid-area:sco}
}
@media (max-width:720px){
  .top-left .logo b{display:none}
  .top-actions .btn .lbl{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .top-actions .logout-btn{padding:0;width:var(--h-md)}
  .sync-chip #syncChipTxt{display:none}
  .sync-chip{padding:0 var(--sp-3)}
  #main{padding:var(--sp-4)}
  .page-head{margin-bottom:var(--sp-4)}
  .page-head>.row{width:100%}
  .board{grid-template-columns:minmax(0,1fr)}
  .grid-2,.grid-3,.pie-wrap{grid-template-columns:minmax(0,1fr)}
  .qcell{padding:var(--sp-3)}
  .qnum{font-size:var(--fs-24);line-height:2rem}
  .pie-wrap{flex-direction:column;align-items:stretch}
  .donut-chart{align-self:center}
  .mt-row{grid-template-columns:minmax(0,1fr)}
  .mt-row>span{display:none}
  .g-row{grid-template-columns:minmax(0,1fr) 32px minmax(0,1.3fr);gap:var(--sp-2)}
  .g-pic .upline span:last-child,.g-pic .cp-line,.g-date,.g-no,.g-code,.g-h-no,.g-h-code,.g-h-range{display:none}
  .inview-filters select{flex:1 1 140px;max-width:100%}
  .xfer{grid-template-columns:minmax(0,1fr)}
  /* tabel spesifikasi proyek -> kartu bertumpuk */
  .spec-card .table-wrap{overflow:visible}
  .spec-table{min-width:0;display:block}
  .spec-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .spec-table tbody{display:flex;flex-direction:column;gap:var(--sp-3);padding:0 var(--sp-4) var(--sp-4)}
  .spec-table tbody tr{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3) var(--sp-4);padding:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card)}
  .spec-table tbody td:nth-child(n){display:block;min-width:0;padding:0;border:0}
  .spec-table tbody td::before{content:attr(data-label);display:block;margin-bottom:2px;color:var(--faint);font-size:var(--fs-12);line-height:1rem;font-weight:600}
  .spec-table tbody td:nth-child(1),.spec-table tbody td:nth-child(4),.spec-table tbody td:nth-child(8){grid-column:1/-1}
  .spec-table tbody td:nth-child(1)::before,.spec-table tbody td:nth-child(9)::before{display:none}
  .spec-table tbody td:nth-child(1){padding-right:var(--sp-8)}
  .spec-table tbody td:nth-child(9){position:absolute;right:var(--sp-3);top:var(--sp-3);width:auto;padding:0}
  .user-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:360px){
  /* layar sangat sempit (320px): rapatkan jarak agar kolom cari tetap ≥ 100px */
  .topbar{gap:var(--sp-1);padding-right:var(--sp-2)}
  .top-left{padding-left:var(--sp-1)}
}
@media (max-width:520px){
  /* topbar sempit: logo (duplikat tombol menu) & Panduan pindah — Panduan ke laci — agar kolom cari tetap lega */
  .top-left .logo,#helpBtn{display:none}
  .side-foot .btn.help-side{display:flex}
  .login-card{padding:var(--sp-6) var(--sp-4)}
  .modal-head{padding-left:var(--sp-4)}
  .modal-body{padding:var(--sp-4)}
  .modal-foot{padding:var(--sp-3) var(--sp-4)}
  .modal-foot .btn{flex:1 1 auto}
  .ctrl-row .sel-lab{margin-left:0}
  .db-card{padding:var(--sp-3)}
}

/* ---------- 18. UX: fokus proyek · galat bidang · pencarian aktif · keadaan kosong · bantuan ---------- */
.scope-chip{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--h-md);padding:0 var(--sp-3);border:1px solid var(--brand-line);border-radius:var(--r-full);background:var(--brand-ghost);color:var(--link);font:600 var(--fs-13)/1.125rem var(--font);cursor:pointer}
.scope-chip:hover{border-color:var(--accent-fg)}
.scope-chip .dot{margin:0}
.field-error{display:flex;align-items:flex-start;gap:var(--sp-2);margin:calc(var(--sp-1) * -1) 0 0;color:var(--danger);font-size:var(--fs-13);line-height:1.125rem;font-weight:500}
.field-error .ic{margin-top:2px}
/* spesifisitas sengaja menyalin rantai :not() aturan isian umum agar batas merah menang walau bidang tak sedang fokus */
.modal input:not([type=checkbox]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden])[aria-invalid="true"],.modal select[aria-invalid="true"],.modal textarea[aria-invalid="true"]{border-color:var(--danger)}
.modal input:not([type=checkbox]):not([type=range]):not([type=file]):not([type=color]):not([type=hidden])[aria-invalid="true"]:focus,.modal select[aria-invalid="true"]:focus,.modal textarea[aria-invalid="true"]:focus{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-line)}
.sr-item.is-active{background:var(--brand-ghost);box-shadow:inset 3px 0 0 var(--accent-fg)}
th[data-sort]:focus-visible,tr[data-action]:focus-visible{outline-offset:-2px}
.empty-state{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);max-width:480px;margin:0 auto;padding:var(--sp-10) var(--sp-4);text-align:center}
.empty-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--bg2);color:var(--muted)}
.empty-ic .ic{width:24px;height:24px}
.empty-state h3{font-size:var(--fs-16);line-height:1.5rem}
.empty-state p{color:var(--muted)}
.empty-state .row{justify-content:center;margin-top:var(--sp-3)}

/* ---------- 19. KONFIRMASI (pengganti confirm() bawaan) ---------- */
.cf-title{display:flex;align-items:center;gap:var(--sp-2)}
.cf-title .ic{color:var(--danger)}
.cf-title .ic[hidden]{display:none}
.cf-body{margin:0;white-space:pre-line;overflow-wrap:anywhere;color:var(--ink);font-size:var(--fs-14);line-height:1.4286}

/* ---------- 20. LEWATI KE KONTEN (WCAG 2.4.1) ---------- */
.skip-link{position:fixed;left:var(--sp-3);top:var(--sp-2);z-index:300;padding:var(--sp-2) var(--sp-4);border-radius:var(--r-md);background:var(--brand2);color:var(--on-accent);font-size:var(--fs-14);line-height:1.25rem;font-weight:600;text-decoration:none;transform:translateY(-300%)}
.skip-link:focus{transform:none}
body.logged-out .skip-link{display:none}
#main:focus{outline:0}