:root{
  --paper:#F5F6F0; --surface:#FFFFFF; --surface-2:#ECEEE3;
  --ink:#1E2117; --ink-2:#59614C; --line:#D7DAC9; --line-soft:#E4E7D9;
  --pasture:#3E7A34; --pasture-strong:#2E5C26; --amber:#B76F2B;
  --good:#3E7A34; --warn:#9A7413; --crit:#AF4229;
  --shadow:0 18px 40px -28px rgba(30,33,23,.35);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#131509; --surface:#1B1E12; --surface-2:#242819;
    --ink:#E9EBDD; --ink-2:#9BA286; --line:#333927; --line-soft:#2A2F1F;
    --pasture:#82BD6E; --pasture-strong:#9BD489; --amber:#DBA35C;
    --good:#82BD6E; --warn:#D6B45E; --crit:#E0765A;
    --shadow:0 18px 44px -26px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --paper:#131509; --surface:#1B1E12; --surface-2:#242819;
  --ink:#E9EBDD; --ink-2:#9BA286; --line:#333927; --line-soft:#2A2F1F;
  --pasture:#82BD6E; --pasture-strong:#9BD489; --amber:#DBA35C;
  --good:#82BD6E; --warn:#D6B45E; --crit:#E0765A;
  --shadow:0 18px 44px -26px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"Fraunces",Georgia,serif;font-weight:500;line-height:1.2;margin:0;text-wrap:balance}
h1{font-size:1.7rem} h2{font-size:1.3rem} h3{font-size:1.05rem;font-family:"IBM Plex Sans",sans-serif;font-weight:600}
a{color:var(--pasture-strong)}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--ink-2)}
.right{text-align:right}

/* layout */
.topbar{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:.8rem clamp(1rem,4vw,2.5rem); background:var(--surface);
  border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10;
}
.brand{display:flex;align-items:center;gap:.5rem;font-weight:600}
.brand svg{display:block}
.nav{display:flex;gap:.3rem;flex-wrap:wrap;flex:1}
.nav a{
  font-size:.85rem;text-decoration:none;color:var(--ink-2);
  padding:.4rem .7rem;border-radius:8px;
}
.nav a:hover{background:var(--surface-2);color:var(--ink)}
.nav a.on{background:var(--ink);color:var(--paper)}
.who{display:flex;align-items:center;gap:.6rem;font-size:.82rem}
.badge-role{
  font-family:"IBM Plex Mono",monospace;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;
  border:1px solid var(--line);border-radius:999px;padding:.12rem .5rem;color:var(--ink-2);
}
.linkbtn{background:none;border:0;color:var(--ink-2);cursor:pointer;font:inherit;font-size:.82rem;text-decoration:underline;text-underline-offset:3px}
main{max-width:1080px;margin:0 auto;padding:clamp(1.1rem,4vw,2.4rem)}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem}
.page-head p{margin:.2rem 0 0;color:var(--ink-2);font-size:.9rem}

/* cards & stats */
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.2rem 1.3rem;margin-bottom:1.2rem}
.card > h3{margin-bottom:.9rem}
.grid{display:grid;gap:1.2rem}
@media(min-width:760px){ .grid.two{grid-template-columns:1fr 1fr} }
.stat-grid{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:1.2rem}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:.9rem 1rem}
.stat b{display:block;font-family:"Fraunces",serif;font-size:1.5rem;font-weight:500;font-variant-numeric:tabular-nums}
.stat span{font-size:.78rem;color:var(--ink-2)}

/* table */
.tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
table.tbl{border-collapse:collapse;width:100%;font-size:.86rem}
.tbl th,.tbl td{text-align:left;padding:.6rem .8rem;border-bottom:1px solid var(--line-soft);white-space:nowrap}
.tbl thead th{background:var(--surface-2);font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2)}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl td.n,.tbl th.n{text-align:right;font-variant-numeric:tabular-nums;font-family:"IBM Plex Mono",monospace}
.tbl tr.clickable{cursor:pointer}
.tbl tr.clickable:hover td{background:var(--surface-2)}

/* pills */
.pill{display:inline-block;font-size:.7rem;font-family:"IBM Plex Mono",monospace;padding:.12rem .5rem;border-radius:999px;border:1px solid var(--line);color:var(--ink-2)}
.pill.s-dewasa,.pill.s-dibayar,.pill.s-terdistribusi{color:var(--good);border-color:var(--good)}
.pill.s-siap_jual,.pill.s-tertunda,.pill.s-draf{color:var(--warn);border-color:var(--warn)}
.pill.s-terjual{color:var(--ink-2)}
.pill.s-mati,.pill.s-hilang{color:var(--crit);border-color:var(--crit)}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.chip{font-size:.76rem;font-family:"IBM Plex Mono",monospace;border:1px solid var(--line);border-radius:999px;padding:.25rem .7rem;color:var(--ink-2);background:none;cursor:pointer}
.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* forms */
.form{display:grid;gap:.9rem}
.form .field{display:grid;gap:.3rem}
.form label{font-size:.78rem;font-weight:600;color:var(--ink-2)}
.form input,.form select,.form textarea{
  font:inherit;font-size:.9rem;color:var(--ink);background:var(--surface);
  border:1px solid var(--line);border-radius:9px;padding:.5rem .65rem;width:100%;
}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--pasture-strong);outline-offset:1px}
.form .row{display:grid;gap:.9rem}
@media(min-width:620px){ .form .row.c2{grid-template-columns:1fr 1fr} .form .row.c3{grid-template-columns:1fr 1fr 1fr} }

.btn{
  font:inherit;font-weight:600;font-size:.88rem;border:0;border-radius:9px;
  padding:.55rem 1rem;background:var(--pasture);color:#fff;cursor:pointer;
}
.btn:hover{background:var(--pasture-strong)}
.btn.secondary{background:transparent;color:var(--pasture-strong);border:1px solid var(--pasture)}
.btn.small{padding:.32rem .6rem;font-size:.78rem}
.btn:disabled{opacity:.5;cursor:default}
.btn-row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-top:.4rem}

/* login */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:1.5rem}
.login-stack{display:flex;flex-direction:column;align-items:center;width:100%;max-width:400px}
.login-mark{width:144px;margin-bottom:-46px;position:relative;z-index:2;filter:drop-shadow(0 7px 14px rgba(30,33,23,.24))}
.login-mark svg{display:block;width:100%;height:auto}
.login{position:relative;z-index:1;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:3.4rem 2rem 2rem;max-width:400px;width:100%}
.login h1{margin-bottom:.3rem}

.pager{display:flex;align-items:center;justify-content:center;gap:.9rem;margin-top:1rem;flex-wrap:wrap}
.pager:empty{display:none}
.pager__info{font-family:"IBM Plex Mono",monospace;font-size:.78rem;color:var(--ink-2);font-variant-numeric:tabular-nums}

.err{background:color-mix(in srgb,var(--crit) 12%,transparent);border:1px solid var(--crit);color:var(--crit);border-radius:9px;padding:.5rem .7rem;font-size:.84rem;margin-bottom:1rem}
.ok{background:color-mix(in srgb,var(--good) 14%,transparent);border:1px solid var(--good);color:var(--pasture-strong);border-radius:9px;padding:.5rem .7rem;font-size:.84rem;margin-bottom:1rem}
.toast{position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:.6rem 1rem;border-radius:10px;font-size:.85rem;z-index:50;box-shadow:var(--shadow)}

.track{display:flex;height:16px;border-radius:6px;overflow:hidden;border:1px solid var(--line-soft)}
.track i{display:block}
.track i.k-anakan{background:var(--surface-2)}
.track i.k-muda{background:var(--line)}
.track i.k-dewasa{background:var(--pasture);opacity:.55}
.track i.k-siap_jual{background:var(--amber)}
.legend{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin-top:.5rem;font-size:.74rem;color:var(--ink-2);font-family:"IBM Plex Mono",monospace}

.breakdown{font-family:"IBM Plex Mono",monospace;font-size:.86rem}
.breakdown div{display:flex;justify-content:space-between;padding:.35rem 0;border-bottom:1px dashed var(--line-soft)}
.breakdown div:last-child{border-bottom:0}
.breakdown .total{font-weight:600;border-top:1px solid var(--line);border-bottom:0}
.breakdown .split{color:var(--pasture-strong);font-weight:600}

:focus-visible{outline:2px solid var(--pasture-strong);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}