/* ══════════════════════════════════════════════════════════════════
   CMK Produksi — prototipe.
   Gaya mengikuti referensi rondesignlabs (22 Okt 2026), dipakai sama persis:
   - Huruf: Inter (sumbu opsz, jadi judul besar otomatis memakai potongan Display), grotesk
     rapat. Judul berat 500, angka besar berat 300 dengan jarak huruf rapat, label kapital kecil
     berjarak lebar.
   - Kaca buram: kartu, panel, laci, dan bilah atas tembus pandang dengan blur di atas latar
     "aura" (gumpalan limau, kuning, peach, merah muda yang buram).
   - Aksen limau neon, pil hitam untuk pilihan aktif (terang) / pil putih (gelap), sudut 28 px.
   Tema: gelap adalah nilai bawaan token. Terang dipakai bila sistem minta terang
   dan pengguna belum memilih, atau bila pengguna memilih Terang.
   ══════════════════════════════════════════════════════════════════ */
:root{
  color-scheme:dark;
  /* Tema gelap mengikuti referensi yang sama dengan tema terang, dibalik: latar arang hangat, kartu
     arang membulat besar dengan bayangan dalam, tombol utama pil putih, menu aktif pil limau, sorotan
     limau, gradien lembut limau -> peach di kartu utama. Tema terang menimpa token-token ini. */
  --basalt-0:#111210; --basalt-1:#161715; --basalt-2:#1b1c19; --basalt-3:#232420; --basalt-4:#2e2f2b;
  --veil-1:rgba(240,240,232,.04); --veil-2:rgba(240,240,232,.07); --veil-3:rgba(240,240,232,.09);
  --veil-4:rgba(240,240,232,.14); --veil-5:rgba(240,240,232,.24);
  --steam-0:#ffffff; --steam-1:#f2f2ee; --steam-2:#c9cbc3; --steam-3:#a3a69d; --steam-4:#959890;
  --spring:#d8f24c; --iris:#9fe07a; --sulfur:#f6c897;
  --ok:#c7ea4a; --warn:#f5b46a; --danger:#ff7a6b; --info:#8ab8ff;

  --bg:var(--basalt-0);
  --surface:rgba(34,35,31,.52); --surface-2:rgba(44,45,40,.55); --surface-3:rgba(52,53,48,.58);
  --pop:rgba(26,27,24,.82);
  --border:var(--veil-3); --border-2:var(--veil-4); --border-3:var(--veil-5);
  --ink:var(--steam-1); --ink-2:var(--steam-2); --muted:var(--steam-3); --dim:var(--steam-4);
  --accent:var(--steam-0); --accent-deep:#e4e4de; --accent-bg:rgba(255,255,255,.08);
  --on-accent:#111210;
  --mist:linear-gradient(115deg,#dcf552,#9fe07a 52%,#f6c897);
  --glow:0 8px 18px -10px rgba(0,0,0,.65);
  --shadow-pop:0 28px 70px -24px rgba(0,0,0,.75);
  --scrim:rgba(0,0,0,.5);
  --topbar-fade:rgba(17,18,16,.72);
  --light-1:rgba(206,240,60,.20); --light-2:rgba(246,170,120,.16); --light-3:rgba(242,214,90,.12); --light-4:rgba(236,140,150,.12);
  --ok-bg:rgba(216,242,76,.14); --warn-bg:rgba(245,180,106,.14); --danger-bg:rgba(255,122,107,.14); --info-bg:rgba(138,184,255,.14);

  /* Token bentuk & permukaan (nilai gelap; tema terang menimpanya). */
  --cell-bg:rgba(34,35,31,.52); --card-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 48px -26px rgba(0,0,0,.8); --btn-shadow:0 6px 14px -8px rgba(0,0,0,.6);
  --r-btn:999px; --r-btn-sm:999px; --r-ctl:14px; --r-nav:999px; --r-icon:999px;
  --nav-on-bg:#d8f24c; --nav-on-ink:#111210; --nav-on-ico:#111210; --nav-on-ring:none;
  --seg-on-bg:#ffffff; --seg-on-ink:#111210; --seg-on-bd:transparent;
  --chip-bg:rgba(44,45,40,.5); --chip-bd:rgba(255,255,255,.10);
  --ctl-bg:rgba(20,21,18,.5); --ctl-bd:rgba(240,240,232,.13); --focus-ring:rgba(216,242,76,.45);
  --btn-bg:rgba(44,45,40,.5); --btn-bd:rgba(255,255,255,.10);
  --notice-bg:rgba(34,35,31,.52);
  --drawer-gap:12px; --drawer-r:32px; --drawer-bd:rgba(240,240,232,.08);
  --topbar-bg:rgba(13,14,12,.38); --topbar-bd:transparent; --side-bd:transparent;
  --toast-bg:#ffffff; --toast-ink:#111210; --toast-bd:transparent;
  --stat-gap-bg:rgba(255,255,255,.07);
  --run-c:#b9e04c;
  --lime:#d8f24c; --lime-ink:#1b2200; --on-danger:#1f0905;
  --wash:linear-gradient(135deg,rgba(216,242,76,.22) 0%,rgba(34,35,31,.2) 50%,rgba(246,170,120,.22) 100%),rgba(34,35,31,.5);
  --wash-2:var(--wash);
  --mist-strong:var(--mist);
  --toast-ico:#3b6a00; --toast-pad:12px 20px; --r-toast:999px;
  --nav-on-sub:rgba(17,18,16,.72); --r-chip:999px;
  --nav-pad:10px 14px; --btn-px:20px; --btn-sm-px:16px; --seg-px:16px; --ctl-px:14px;
  --toggle-sz:40px; --switch-w:40px; --switch-h:22px; --knob:16px; --knob-x:18px; --topbar-blur:24px;
  --glass-blur:blur(26px) saturate(160%); --glass-bd:rgba(255,255,255,.09); --glass-hi:rgba(255,255,255,.06);
  --aura-base:#0d0e0c;

  --g-xs:8px; --g-sm:12px; --g-md:18px; --g-lg:28px; --g-xl:44px;
  --r-sm:14px; --r-md:20px; --r-lg:28px; --r-pill:999px;
  --sidenav-w:268px;
  /* --serif dipertahankan sebagai nama token judul (dipakai halaman), kini grotesk yang sama. */
  --serif:"Inter","Inter Display","SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --sans:"Inter","SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --z-nav:50; --z-sidebar:100; --z-scrim:300; --z-drawer:400; --z-menu:700; --z-toast:850;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    color-scheme:light;
    /* Terang mengikuti referensi: latar abu hangat, kartu putih, aksen hitam + hijau limau. */
    --basalt-0:#eeeeeb; --basalt-1:#f5f5f2; --basalt-2:#f3f3f0; --basalt-3:#e7e7e3; --basalt-4:#d9d9d4;
    --veil-1:rgba(17,17,15,.03); --veil-2:rgba(17,17,15,.05); --veil-3:rgba(17,17,15,.07);
    --veil-4:rgba(17,17,15,.12); --veil-5:rgba(17,17,15,.22);
    --steam-0:#111211; --steam-1:#161715; --steam-2:#3d403b; --steam-3:#545850; --steam-4:#62665e;
    --spring:#3b6a00; --iris:#9fe07a; --sulfur:#f6c897;
    --mist:linear-gradient(115deg,#dcf552,#9fe07a 52%,#f6c897);
    --ok:#1b2200; --warn:#9a5200; --danger:#b42318; --info:#1f5fbf;
    --ok-bg:#d9f34c; --warn-bg:#fde8cf; --danger-bg:#fde3df; --info-bg:#e2ecfb;
    --surface:rgba(255,255,255,.56); --surface-2:rgba(255,255,255,.66); --surface-3:rgba(255,255,255,.74); --pop:rgba(250,250,247,.86);
    --accent-deep:#2c2d2b; --accent-bg:rgba(17,17,15,.06); --on-accent:#ffffff;
    --glow:0 8px 18px -10px rgba(17,17,15,.55);
    --shadow-pop:0 28px 70px -24px rgba(17,17,15,.28);
    --scrim:rgba(30,30,28,.28); --topbar-fade:rgba(238,238,235,.72);
    --light-1:rgba(206,240,60,.62); --light-2:rgba(246,170,120,.55); --light-3:rgba(244,224,110,.5); --light-4:rgba(240,160,170,.42);
    --r-sm:14px; --r-md:20px; --r-lg:28px;
    --cell-bg:rgba(255,255,255,.56); --card-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(17,17,15,.03),0 20px 44px -24px rgba(17,17,15,.22);
    --btn-shadow:0 1px 2px rgba(17,17,15,.05),0 6px 14px -8px rgba(17,17,15,.18);
    --r-btn:999px; --r-btn-sm:999px; --r-ctl:14px; --r-nav:999px; --r-icon:999px;
    --nav-on-bg:#111211; --nav-on-ink:#ffffff; --nav-on-ico:#dcf552; --nav-on-ring:none;
    --seg-on-bg:#111211; --seg-on-ink:#ffffff; --seg-on-bd:transparent;
    --chip-bg:rgba(255,255,255,.6); --chip-bd:rgba(255,255,255,.75);
    --ctl-bg:rgba(255,255,255,.62); --ctl-bd:rgba(17,17,15,.08); --focus-ring:rgba(216,242,76,.75);
    --wash:linear-gradient(135deg,rgba(220,246,110,.75) 0%,rgba(255,255,255,.45) 50%,rgba(250,196,150,.7) 100%);
    --wash-2:var(--wash);
    --mist-strong:linear-gradient(115deg,#3b6a00,#111211);
    --toast-ico:#dcf552; --toast-pad:12px 20px; --r-toast:999px;
    --nav-on-sub:rgba(255,255,255,.75); --r-chip:999px; --on-danger:#ffffff;
    --nav-pad:10px 14px; --btn-px:20px; --btn-sm-px:16px; --seg-px:16px; --ctl-px:14px;
    --toggle-sz:40px; --switch-w:40px; --switch-h:22px; --knob:16px; --knob-x:18px; --topbar-blur:24px;
    --btn-bg:rgba(255,255,255,.62); --btn-bd:rgba(255,255,255,.8);
  --glass-bd:rgba(255,255,255,.78); --glass-hi:rgba(255,255,255,.7); --aura-base:#e6e6e2;
    --notice-bg:rgba(255,255,255,.56);
    --drawer-gap:12px; --drawer-r:32px; --drawer-bd:rgba(255,255,255,.8);
    --topbar-bg:rgba(240,240,236,.42); --topbar-bd:transparent; --side-bd:transparent;
    --toast-bg:#111211; --toast-ink:#ffffff; --toast-bd:transparent;
    --stat-gap-bg:rgba(255,255,255,.6);
    --run-c:#5f8c12;
  }
}
:root[data-theme="light"]{
  color-scheme:light;
  /* Terang mengikuti referensi: latar abu hangat, kartu putih, aksen hitam + hijau limau. */
  --basalt-0:#eeeeeb; --basalt-1:#f5f5f2; --basalt-2:#f3f3f0; --basalt-3:#e7e7e3; --basalt-4:#d9d9d4;
  --veil-1:rgba(17,17,15,.03); --veil-2:rgba(17,17,15,.05); --veil-3:rgba(17,17,15,.07);
  --veil-4:rgba(17,17,15,.12); --veil-5:rgba(17,17,15,.22);
  --steam-0:#111211; --steam-1:#161715; --steam-2:#3d403b; --steam-3:#545850; --steam-4:#62665e;
  --spring:#3b6a00; --iris:#9fe07a; --sulfur:#f6c897;
  --mist:linear-gradient(115deg,#dcf552,#9fe07a 52%,#f6c897);
  --ok:#1b2200; --warn:#9a5200; --danger:#b42318; --info:#1f5fbf;
  --ok-bg:#d9f34c; --warn-bg:#fde8cf; --danger-bg:#fde3df; --info-bg:#e2ecfb;
  --surface:rgba(255,255,255,.56); --surface-2:rgba(255,255,255,.66); --surface-3:rgba(255,255,255,.74); --pop:rgba(250,250,247,.86);
  --accent-deep:#2c2d2b; --accent-bg:rgba(17,17,15,.06); --on-accent:#ffffff;
  --glow:0 8px 18px -10px rgba(17,17,15,.55);
  --shadow-pop:0 28px 70px -24px rgba(17,17,15,.28);
  --scrim:rgba(30,30,28,.28); --topbar-fade:rgba(238,238,235,.72);
  --light-1:rgba(206,240,60,.62); --light-2:rgba(246,170,120,.55); --light-3:rgba(244,224,110,.5); --light-4:rgba(240,160,170,.42);
  --r-sm:14px; --r-md:20px; --r-lg:28px;
  --cell-bg:rgba(255,255,255,.56); --card-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 2px rgba(17,17,15,.03),0 20px 44px -24px rgba(17,17,15,.22);
  --btn-shadow:0 1px 2px rgba(17,17,15,.05),0 6px 14px -8px rgba(17,17,15,.18);
  --r-btn:999px; --r-btn-sm:999px; --r-ctl:14px; --r-nav:999px; --r-icon:999px;
  --nav-on-bg:#111211; --nav-on-ink:#ffffff; --nav-on-ico:#dcf552; --nav-on-ring:none;
  --seg-on-bg:#111211; --seg-on-ink:#ffffff; --seg-on-bd:transparent;
  --chip-bg:rgba(255,255,255,.6); --chip-bd:rgba(255,255,255,.75);
  --ctl-bg:rgba(255,255,255,.62); --ctl-bd:rgba(17,17,15,.08); --focus-ring:rgba(216,242,76,.75);
  --wash:linear-gradient(135deg,rgba(220,246,110,.75) 0%,rgba(255,255,255,.45) 50%,rgba(250,196,150,.7) 100%);
  --wash-2:var(--wash);
  --mist-strong:linear-gradient(115deg,#3b6a00,#111211);
  --toast-ico:#dcf552; --toast-pad:12px 20px; --r-toast:999px;
  --nav-on-sub:rgba(255,255,255,.75); --r-chip:999px; --on-danger:#ffffff;
  --nav-pad:10px 14px; --btn-px:20px; --btn-sm-px:16px; --seg-px:16px; --ctl-px:14px;
  --toggle-sz:40px; --switch-w:40px; --switch-h:22px; --knob:16px; --knob-x:18px; --topbar-blur:24px;
  --btn-bg:rgba(255,255,255,.62); --btn-bd:rgba(255,255,255,.8);
  --glass-bd:rgba(255,255,255,.78); --glass-hi:rgba(255,255,255,.7); --aura-base:#e6e6e2;
  --notice-bg:rgba(255,255,255,.56);
  --drawer-gap:12px; --drawer-r:32px; --drawer-bd:rgba(255,255,255,.8);
  --topbar-bg:rgba(240,240,236,.42); --topbar-bd:transparent; --side-bd:transparent;
  --toast-bg:#111211; --toast-ink:#ffffff; --toast-bd:transparent;
  --stat-gap-bg:rgba(255,255,255,.6);
  --run-c:#5f8c12;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--aura-base);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.55;
  font-optical-sizing:auto;font-feature-settings:"cv11","ss01";letter-spacing:-.006em;
  font-variant-numeric:lining-nums;
  -webkit-font-smoothing:antialiased;
  /* Latar aura: gumpalan warna buram, diam di tempat saat digulir. */
  background-image:
    radial-gradient(48vw 42vw at 6% 4%,var(--light-1),transparent 70%),
    radial-gradient(40vw 36vw at 96% 10%,var(--light-2),transparent 70%),
    radial-gradient(44vw 40vw at 70% 96%,var(--light-3),transparent 70%),
    radial-gradient(36vw 32vw at 14% 92%,var(--light-4),transparent 70%);
  background-repeat:no-repeat;background-attachment:fixed;
}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
::selection{background:var(--veil-4)}
:focus-visible{outline:2px solid var(--spring);outline-offset:2px;border-radius:4px}
.num{font-variant-numeric:tabular-nums}
.serif{font-family:var(--serif)}
.mist-text{background:var(--mist);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.label{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.hint{color:var(--muted);font-size:14px;line-height:1.55}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── kerangka ─────────────────────────────────────────────────────── */
.shell{display:grid;grid-template-columns:var(--sidenav-w) minmax(0,1fr);min-height:100%}
.sidenav{position:sticky;top:0;height:100vh;overflow-y:auto;background:transparent;border-right:1px solid var(--side-bd);
  display:flex;flex-direction:column;gap:2px;padding:var(--g-md) var(--g-sm) var(--g-sm);z-index:var(--z-sidebar)}
.brand{display:flex;align-items:baseline;gap:7px;padding:4px 12px 22px}
.brand b{font-weight:600;font-size:19px;letter-spacing:-.03em}
.brand span{font-family:var(--serif);font-style:normal;font-weight:300;font-size:19px;letter-spacing:-.03em;color:var(--ink-2)}
.brand i{width:6px;height:6px;border-radius:50%;background:var(--mist);align-self:center;margin-left:auto}
.nav-group{padding:16px 12px 6px}
.nav-item{display:flex;align-items:center;gap:11px;padding:var(--nav-pad);border-radius:var(--r-nav);color:var(--ink-2);font-weight:400;font-size:15px;transition:background .15s,color .15s}
.nav-item svg{width:17px;height:17px;flex:none;opacity:.8}
.nav-item:hover{background:var(--surface);color:var(--ink)}
.nav-item[aria-current="page"]{background:var(--nav-on-bg);color:var(--nav-on-ink);box-shadow:var(--nav-on-ring)}
.nav-item[aria-current="page"] svg{opacity:1;color:var(--nav-on-ico)}
.nav-item.soon{color:var(--dim)}
.nav-item.soon:hover{background:transparent;color:var(--muted)}
.nav-item .tag{margin-left:auto;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.nav-spacer{flex:1;min-height:16px}
.acct{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border);box-shadow:var(--card-shadow)}
.av{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;font-size:13px;font-weight:600;
  background:var(--basalt-3);color:var(--ink);border:1px solid var(--border)}
.av.mist{background:var(--mist);color:#0b0d0f;border:0}
.acct .who{font-size:14px;font-weight:600;line-height:1.3}
.acct .role{font-size:13px;color:var(--muted)}
.acct{transition:border-color .15s;width:100%;text-align:left}
.acct:hover{border-color:var(--border-3)}
.acct .chev{margin-left:auto;color:var(--muted)} .acct .chev svg{width:15px;height:15px}
.acct-wrap{position:relative}
.persona-menu{position:absolute;left:0;right:0;bottom:calc(100% + 8px);background:var(--pop);border:1px solid var(--border-2);border-radius:var(--r-md);box-shadow:var(--shadow-pop);padding:8px;display:flex;flex-direction:column;gap:2px;z-index:var(--z-menu)}
.persona-menu .label{padding:4px 8px 6px;font-size:12.5px}
.persona-menu button,.persona-menu a{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:8px;text-align:left;font-size:14.5px;color:var(--ink-2)}
.persona-menu button:hover,.persona-menu a:hover{background:var(--veil-1);color:var(--ink)}
.persona-menu button[aria-pressed="true"]{background:var(--nav-on-bg);color:var(--nav-on-ink);box-shadow:var(--nav-on-ring)}
.persona-menu button[aria-pressed="true"] small{color:var(--nav-on-sub)}
.persona-menu .av{width:28px;height:28px;font-size:12.5px;border-radius:8px}
.persona-menu b{display:block;font-weight:600;line-height:1.25}
.persona-menu small{display:block;font-size:13px;color:var(--muted)}
.persona-menu a{border-top:1px solid var(--border);border-radius:0;margin-top:4px;padding-top:10px}
.persona-menu a + a{border-top:0;margin-top:0;padding-top:7px}
.persona-menu a svg{width:15px;height:15px}
a.proto-note:hover{color:var(--ink-2)}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:var(--z-nav);display:flex;align-items:center;gap:var(--g-sm);flex-wrap:wrap;
  padding:14px var(--g-lg);border-bottom:1px solid var(--topbar-bd);
  background:var(--topbar-bg);backdrop-filter:blur(var(--topbar-blur))}
.crumbs{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);min-width:0}
.crumbs b{color:var(--ink);font-weight:500}
.topbar .grow{flex:1}
.navtoggle{display:none;width:var(--toggle-sz);height:var(--toggle-sz);place-items:center;border:1px solid var(--border);border-radius:var(--r-icon);background:var(--surface);color:var(--ink);box-shadow:var(--btn-shadow)}
.navtoggle svg{width:18px;height:18px}

.seg-toggle{display:inline-flex;gap:2px;padding:3px;border-radius:var(--r-pill);background:var(--surface);border:1px solid var(--border);box-shadow:var(--btn-shadow)}
.seg-toggle button{height:36px;min-width:40px;padding:0 10px;border-radius:var(--r-pill);font-size:13.5px;font-weight:600;color:var(--ink-2);display:inline-flex;align-items:center;justify-content:center;gap:6px}
.seg-toggle button svg{width:14px;height:14px}
.seg-toggle button:hover{color:var(--ink)}
.seg-toggle button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}

.page{width:100%;max-width:1240px;margin:0 auto;padding:var(--g-lg) var(--g-lg) 96px;display:flex;flex-direction:column;gap:var(--g-lg)}
.page-head{display:flex;align-items:flex-end;gap:var(--g-md);flex-wrap:wrap}
.page-head .titles{flex:1;min-width:240px}
.page-head h1{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4vw,48px);letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
.page-head p{color:var(--ink-2);margin-top:8px;max-width:64ch}
.page-head .actions{display:flex;gap:8px;flex-wrap:wrap}

/* ── tombol & isian ───────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 var(--btn-px);border-radius:var(--r-btn);
  border:1px solid var(--btn-bd);background:var(--btn-bg);color:var(--ink-2);font-size:15px;font-weight:500;white-space:nowrap;box-shadow:var(--btn-shadow);
  transition:color .16s,border-color .16s,background .16s}
.btn svg{width:16px;height:16px}
.btn:hover{color:var(--ink);border-color:var(--border-3);background:var(--veil-1)}
.btn-primary{background:var(--accent);color:var(--on-accent);border-color:transparent;box-shadow:var(--glow)}
.btn-primary:hover{background:var(--accent-deep);color:var(--on-accent);border-color:transparent}
.btn-ghost{border-color:transparent;background:transparent;box-shadow:none}
.btn-danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,transparent)}
.btn-danger:hover{color:var(--danger);background:var(--danger-bg);border-color:var(--danger)}
.btn-sm{min-height:40px;padding:0 var(--btn-sm-px);font-size:14.5px;border-radius:var(--r-btn-sm)}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.icon-btn{width:40px;height:40px;display:inline-grid;place-items:center;border-radius:var(--r-icon);color:var(--muted);border:1px solid transparent}
.icon-btn:hover{color:var(--ink);background:var(--veil-1);border-color:var(--border)}
.icon-btn svg{width:16px;height:16px}

.input,.select,.textarea{width:100%;height:44px;background:var(--ctl-bg);border:1px solid var(--ctl-bd);border-radius:var(--r-ctl);
  padding:0 var(--ctl-px);font-size:16px;color:var(--ink);transition:border-color .15s,box-shadow .15s}
.textarea{height:auto;min-height:76px;padding:10px 12px;resize:vertical;line-height:1.55}
.input::placeholder,.textarea::placeholder{color:var(--muted)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--focus-ring)}
.input:disabled,.select:disabled,.textarea:disabled{opacity:.55}
.select{appearance:none;padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a8f96' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
select option{background:var(--basalt-2);color:var(--ink)}
.field{display:flex;flex-direction:column;gap:7px}
.field > label{font-size:14.5px;font-weight:500;color:var(--ink-2)}
.field .err{font-size:13.5px;color:var(--danger)}
.search{position:relative;flex:1;min-width:200px;max-width:340px}
.search svg{position:absolute;left:12px;top:50%;width:15px;height:15px;transform:translateY(-50%);color:var(--muted)}
.search .input{padding-left:36px;border-radius:var(--r-pill)}

.seg{display:inline-flex;flex-wrap:wrap;gap:6px}
.seg button{min-height:40px;padding:0 var(--seg-px);border-radius:var(--r-chip);font-size:14.5px;font-weight:500;color:var(--ink-2);background:var(--chip-bg);border:1px solid var(--chip-bd);box-shadow:var(--btn-shadow)}
.seg button:hover{color:var(--ink);border-color:var(--border-2)}
.seg button[aria-pressed="true"]{color:var(--seg-on-ink);background:var(--seg-on-bg);border-color:var(--seg-on-bd)}

.switch{position:relative;display:inline-flex;flex:none;width:var(--switch-w);height:var(--switch-h)}
.switch input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0;z-index:1}
.switch .track{position:absolute;inset:0;border-radius:var(--r-pill);background:var(--veil-3);border:1px solid var(--border-2);transition:background .15s}
.switch .track::after{content:"";position:absolute;top:2px;left:2px;width:var(--knob);height:var(--knob);border-radius:50%;background:var(--steam-2);transition:transform .15s,background .15s}
.switch input:checked + .track{background:var(--accent);border-color:transparent}
.switch input:checked + .track::after{transform:translateX(var(--knob-x));background:var(--on-accent)}
.switch input:focus-visible + .track{outline:2px solid var(--spring);outline-offset:2px}
.switch input:disabled{cursor:not-allowed}
.switch input:disabled + .track{opacity:.5}

/* ── chip status & label ──────────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:var(--r-pill);font-size:13px;font-weight:500;
  border:1px solid var(--border);color:var(--ink-2);background:var(--veil-1);white-space:nowrap}
.pill svg{width:12px;height:12px}
.pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{color:var(--ok);background:var(--ok-bg);border-color:transparent}
.pill.warn{color:var(--warn);background:var(--warn-bg);border-color:transparent}
.pill.danger{color:var(--danger);background:var(--danger-bg);border-color:transparent}
.pill.info{color:var(--info);background:var(--info-bg);border-color:transparent}
.pill.muted{color:var(--muted)}
.pill.sys{color:var(--ink);border-color:var(--border-2);background:transparent}
.dept{display:inline-flex;align-items:center;gap:6px;font-size:14.5px;color:var(--ink-2);white-space:nowrap}
.dept::before{content:"";width:8px;height:8px;border-radius:2px;border:1.5px solid currentColor}
.dept.cm::before{border-radius:50%}
.dept.all{color:var(--muted)}
.dept.all::before{background:linear-gradient(90deg,currentColor 50%,transparent 50%)}

/* ── panel, tabel, ringkasan ──────────────────────────────────────── */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg)}
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.toolbar .select{width:auto;min-width:150px;border-radius:var(--r-pill)}
.toolbar .count{margin-left:auto;font-size:14px;color:var(--muted)}
.table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}
table.tbl{width:100%;border-collapse:collapse;min-width:760px}
.tbl th{text-align:left;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:12px 16px;border-bottom:1px solid var(--border);white-space:nowrap}
.tbl td{padding:12px 16px;border-bottom:1px solid var(--border);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr.click{cursor:pointer;transition:background .12s}
.tbl tbody tr.click:hover{background:var(--veil-1)}
.tbl tr.off td:not(:last-child){opacity:.55}
.tbl .r{text-align:right}
.person{display:flex;align-items:center;gap:11px;min-width:0}
.person .n{font-weight:500;line-height:1.3}
.person .u{font-size:13.5px;color:var(--muted)}
.empty{padding:48px 16px;text-align:center;color:var(--muted)}

.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--stat-gap-bg);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.stat{background:var(--cell-bg);padding:18px 20px;display:flex;flex-direction:column;gap:4px}
.stat .v{font-size:38px;font-weight:300;letter-spacing:-.04em;font-variant-numeric:tabular-nums;line-height:1.2}
.stat .k{font-size:14px;color:var(--muted)}

.notice{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--notice-bg);font-size:14.5px;color:var(--ink-2)}
.notice svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--muted)}
.notice.warn{border-color:color-mix(in srgb,var(--warn) 35%,transparent);background:var(--warn-bg)}
.notice.warn svg{color:var(--warn)}
.notice.info svg{color:var(--info)}

.panel,.table-wrap,.stats,.card,.tile,.kpi,.task,.sc,.ac,.feed,.forms,.pareto,.matrix-wrap,.queue,.gc,.effchart,.done,
.state,.filters,.sync,.tot,.facts,.sum,.kpis,.editor,details.late,details.reopen,fieldset.prod,.notice,.dbox,.sk-tbl,.sk-stats,.closebar{box-shadow:var(--card-shadow);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-color:var(--glass-bd)}
/* Kaca juga untuk lapisan melayang dan kontrol. */
.drawer,.modal,.persona-menu,.pita-baru,.acct,.btn:not(.btn-primary):not(.btn-ghost),.seg button,.seg-toggle,.input,.select,.textarea,.navtoggle{
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.topbar{-webkit-backdrop-filter:blur(var(--topbar-blur)) saturate(160%)}

/* ── laci samping (drawer) ────────────────────────────────────────── */
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:var(--z-scrim);backdrop-filter:blur(2px)}
.drawer{position:fixed;top:var(--drawer-gap);right:var(--drawer-gap);bottom:var(--drawer-gap);width:min(480px,calc(100% - var(--drawer-gap) * 2));z-index:var(--z-drawer);background:var(--pop);border-left:1px solid var(--drawer-bd);border-radius:var(--drawer-r);overflow:hidden;
  box-shadow:var(--shadow-pop);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .22s cubic-bezier(.2,.7,.2,1)}
.drawer.open{transform:none}
.drawer:not(.open){transform:translateX(calc(100% + 24px))}
.drawer:focus{outline:none}
.drawer-head{display:flex;align-items:flex-start;gap:12px;padding:20px 22px 16px;border-bottom:1px solid var(--border)}
.drawer-head h2{font-family:var(--serif);font-weight:500;font-size:26px;letter-spacing:-.03em;line-height:1.2}
.drawer-head .grow{flex:1;min-width:0}
.drawer-body{flex:1;overflow-y:auto;padding:20px 22px;display:flex;flex-direction:column;gap:18px}
.drawer-foot{display:flex;gap:8px;align-items:center;padding:14px 22px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border)}
.drawer-foot .grow{flex:1}
.divider{height:1px;background:var(--border)}
.perm-preview{display:flex;flex-wrap:wrap;gap:6px}

/* ── toast ────────────────────────────────────────────────────────── */
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,20px);opacity:0;z-index:var(--z-toast);
  display:flex;align-items:center;gap:10px;padding:var(--toast-pad);border-radius:var(--r-toast);background:var(--toast-bg);color:var(--toast-ink);border:1px solid var(--toast-bd);
  box-shadow:var(--shadow-pop);font-size:15px;transition:.2s;pointer-events:none;max-width:calc(100% - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast svg{width:16px;height:16px;color:var(--toast-ico);flex:none}

/* ── PWA: tombol pasang, panduan, pita pembaruan ─────────────────── */
.pasang-btn svg{transform:rotate(0)}
.modal-wrap{position:fixed;inset:0;z-index:var(--z-toast);background:var(--scrim);display:grid;place-items:center;padding:16px;backdrop-filter:blur(3px)}
.modal{width:min(560px,100%);max-height:calc(100vh - 32px);overflow-y:auto;background:var(--pop);border:1px solid var(--drawer-bd);border-radius:max(20px,var(--r-lg));box-shadow:var(--shadow-pop);padding:22px;display:flex;flex-direction:column;gap:16px}
.modal-h{display:flex;gap:14px;align-items:flex-start}
.modal-h img{border-radius:12px;flex:none}
.modal-h .grow{flex:1;min-width:0}
.modal-h h2{font-family:var(--serif);font-weight:500;font-size:26px;letter-spacing:-.03em;line-height:1.2}
.modal-f{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.modal-f .grow{flex:1}
.langkah{display:flex;flex-direction:column;gap:10px;padding-left:0;list-style:none;counter-reset:l}
.langkah li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:start;font-size:16px;line-height:1.5;counter-increment:l}
.langkah li::before{content:counter(l);width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14.5px;background:var(--lime);color:var(--lime-ink)}
.pita-baru{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:var(--z-toast);display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:10px 10px 10px 18px;border-radius:var(--r-toast);background:var(--pop);border:1px solid var(--border-2);box-shadow:var(--shadow-pop);font-size:15px;max-width:calc(100% - 32px)}
.pita-baru > svg{width:18px;height:18px;color:var(--ok);flex:none}
.proto-note{font-size:13px;color:var(--dim);display:flex;align-items:center;gap:6px}
.proto-note::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--mist)}

/* ── gauge busur (referensi: busur bergerigi dengan penanda limau) ── */
.gauge{display:block;width:100%;max-width:240px;height:auto;overflow:visible}
.gauge .tk{stroke:var(--veil-5);stroke-width:2;stroke-linecap:round}
.gauge .tk.on{stroke:var(--ink)}
.gauge .tk.bad{stroke:var(--danger)}
.gauge .tg{stroke:var(--ink);stroke-width:2;stroke-dasharray:2 3}
.gauge .mk{fill:var(--lime);stroke:var(--ink);stroke-width:1.5}
.gauge .mk.bad{fill:var(--danger)}
.gauge text{fill:var(--muted);font-size:10px;letter-spacing:.08em}

@keyframes rise{from{opacity:.001;transform:translateY(8px)}to{opacity:1;transform:none}}
.reveal{animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* ── layar sempit ─────────────────────────────────────────────────── */
@media (max-width:1024px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .sidenav{position:fixed;inset:0 auto 0 0;width:var(--sidenav-w);transform:translateX(-100%);transition:transform .2s;background:var(--pop)}
  .sidenav.open{transform:none;box-shadow:var(--shadow-pop)}
  .navtoggle{display:inline-grid}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .topbar{padding:12px 16px}
  .page{padding:var(--g-md) 16px 80px}
  .crumbs .lvl{display:none}
  .proto-note{display:none}
  .pasang-btn span{display:none}
  .pasang-btn{padding:0 12px}
  .toolbar .select{flex:1}
  .search{max-width:none;flex-basis:100%}
  .toolbar .count{margin-left:0}
}