/* Admin Project — tema white-label.
   Warna utama/aksen & font judul diatur dari Pengaturan (variabel --brand, --brand-accent, --font-head
   dipasang inline di <head>). Gaya bawaan mengikuti identitas "navy monokrom, garis tiang diagonal,
   sudut layar asimetris" — mudah disesuaikan dengan situs web masing-masing usaha. */
@font-face{font-family:"Poppins";src:url(fonts/poppins-light.woff) format("woff");font-weight:300;font-display:swap}
@font-face{font-family:"Poppins";src:url(fonts/poppins-medium.woff) format("woff");font-weight:400 500;font-display:swap}
@font-face{font-family:"Poppins";src:url(fonts/poppins-bold.woff) format("woff");font-weight:600 800;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/Inter-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/Inter-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/Inter-SemiBold.woff2) format("woff2");font-weight:600 700;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(fonts/PlusJakartaSans-Bold.woff) format("woff");font-weight:600 700;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(fonts/PlusJakartaSans-ExtraBold.woff) format("woff");font-weight:800;font-display:swap}
:root{
  --brand:#0f1c38; --brand-accent:#2457c5; --font-head:"Poppins",system-ui,sans-serif;
  --navy:var(--brand); --navy-2:color-mix(in srgb,var(--brand) 82%,#fff);
  --brand-hi:color-mix(in srgb,var(--brand-accent) 35%,#fff);
  --bg:#F6F8FB; --surface:#FFFFFF; --sunk:#EEF2F8; --line:#DDE3EC; --line-soft:#E7ECF3;
  --fg:#141C2B; --muted:#4B5567; --accent:var(--brand-accent); --accent-ink:#FFFFFF; --accent-soft:color-mix(in srgb,var(--brand-accent) 10%,#fff);
  --good:#146C43; --good-soft:#E3F2EA; --warn:#8A5A00; --warn-soft:#FBF0D9; --bad:#B42318; --bad-soft:#FBE7E5;
  --info:#1F3D74; --info-soft:#E6ECF7; --mute-soft:#EEF1F5;
  --radius:14px; --shadow:0 1px 2px color-mix(in srgb,var(--brand) 6%,transparent),0 10px 28px color-mix(in srgb,var(--brand) 9%,transparent); --shadow-sm:0 1px 2px color-mix(in srgb,var(--brand) 6%,transparent),0 4px 12px color-mix(in srgb,var(--brand) 5%,transparent);
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"SFMono-Regular",monospace;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#070D1A; --surface:#0E1729; --sunk:#141F36; --line:#22314F; --line-soft:#1A2741;
  --fg:#E6ECF5; --muted:#9EAAC0; --accent:color-mix(in srgb,var(--brand-accent) 55%,#fff); --accent-ink:#06101F; --accent-soft:color-mix(in srgb,var(--brand-accent) 22%,#0E1729);
  --good:#6BD19B; --good-soft:#123323; --warn:#EDB65A; --warn-soft:#352812; --bad:#F08A7C; --bad-soft:#3B1D19;
  --info:#8FB0EE; --info-soft:#16264A; --mute-soft:#18233A; --shadow:0 10px 30px rgba(0,0,0,.35); --shadow-sm:0 2px 8px rgba(0,0,0,.3);
  color-scheme:dark;
}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font:14px/1.55 var(--font);-webkit-font-smoothing:antialiased}
::selection{background:var(--brand-accent);color:#fff}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--font-head);line-height:1.25;margin:0;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:1.55rem;font-weight:800}
h2{font-size:1.1rem;font-weight:700}
h3{font-size:.95rem;font-weight:700}
code,.mono{font-family:var(--mono);font-size:.92em}

/* kerangka: sidebar navy seperti header website */
.shell{display:grid;grid-template-columns:236px minmax(0,1fr);min-height:100vh}
.side{background:var(--navy);color:#fff;padding:20px 14px;display:flex;flex-direction:column;gap:22px;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:10px;padding:0 6px;color:#fff;text-decoration:none}
.brand:hover{text-decoration:none}
.brand img{width:38px;height:38px;background:#fff;border-radius:10px;padding:3px;object-fit:contain}
.brand b{display:block;font-family:var(--font-head);font-weight:800;font-size:.98rem;letter-spacing:.02em;line-height:1.15}
.brand span{display:block;font-size:.72rem;color:rgba(255,255,255,.65);letter-spacing:.04em}
.nav{display:grid;gap:3px}
.nav a{display:block;padding:9px 12px;border-radius:10px;color:rgba(255,255,255,.82);font-weight:500;transition:background .2s ease,color .2s ease}
.nav a:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.nav a.on{background:var(--brand-accent);color:#fff;font-weight:600;box-shadow:0 8px 20px color-mix(in srgb,var(--brand-accent) 35%,transparent)}
.side .me{margin-top:auto;font-size:.8rem;color:rgba(255,255,255,.7);padding:12px 6px 0;border-top:1px solid rgba(255,255,255,.12);display:grid;gap:6px}
.side .me a{color:var(--brand-hi)}
.side .me .btn.plain{background:transparent;color:#fff;border-color:rgba(255,255,255,.3);box-shadow:none}
.main{padding:26px max(16px,2.6vw) 60px;min-width:0;display:grid;gap:20px;align-content:start}
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;padding:12px 16px;gap:12px}
  .nav{display:flex;overflow-x:auto;gap:4px;flex:1 1 100%}
  .nav a{white-space:nowrap}
  .side .me{margin:0;flex:1 1 100%;grid-auto-flow:column;justify-content:start;align-items:center;border-top:0;padding-top:0}
}
.head{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between}
.head .sub{color:var(--muted);margin-top:4px}
.crumb{font-size:.8rem;color:var(--muted);margin-bottom:4px}

/* kartu & panel */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;min-width:0}
.panel>h2,.panel>.ph{margin-bottom:12px}
.ph{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cols{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:1100px){.cols{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.grid2,.grid3{grid-template-columns:minmax(0,1fr)}}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
.kpi .l{font-size:.78rem;color:var(--muted)}
.kpi .v{font-size:1.35rem;font-weight:700;font-variant-numeric:tabular-nums;margin-top:2px}
.kpi .s{font-size:.78rem;color:var(--muted)}

/* tabel */
.tw{overflow-x:auto;margin:0 -16px;padding:0 16px}
table.t{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.t th{font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);text-align:left;font-weight:600;padding:8px;border-bottom:1px solid var(--line);white-space:nowrap}
.t td{padding:8px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.t tr:last-child td{border-bottom:0}
.t .r{text-align:right;white-space:nowrap}
.t .nw{white-space:nowrap}
.t tfoot td{font-weight:700;border-top:1px solid var(--line)}
.t tr.dim td{color:var(--muted)}
.empty{color:var(--muted);padding:14px 0}

/* badge */
.badge{display:inline-block;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap;background:var(--mute-soft);color:var(--muted)}
.badge.good{background:var(--good-soft);color:var(--good)}
.badge.warn{background:var(--warn-soft);color:var(--warn)}
.badge.bad{background:var(--bad-soft);color:var(--bad)}
.badge.info{background:var(--info-soft);color:var(--info)}
.tag{font-family:var(--mono);font-size:.75rem;background:var(--sunk);padding:1px 6px;border-radius:4px}

/* tombol & form */
.btn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-weight:600;padding:8px 14px;border-radius:6px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{filter:brightness(1.07);text-decoration:none}
.btn.ghost{background:transparent;color:var(--accent)}
.btn.plain{background:var(--surface);color:var(--fg);border-color:var(--line)}
.btn.danger{background:transparent;color:var(--bad);border-color:var(--bad)}
.btn.sm{padding:4px 10px;font-size:.82rem}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
form.inline{display:inline}
label{display:grid;gap:4px;font-weight:600;font-size:.85rem}
label .hint,.hint{font-weight:400;color:var(--muted);font-size:.8rem}
input,select,textarea{font:inherit;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:8px 10px;width:100%;min-width:0}
textarea{min-height:90px;resize:vertical}
input[type=checkbox],input[type=radio]{width:auto}
.check{display:flex;gap:8px;align-items:center;font-weight:500}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 16px}
.fgrid .full{grid-column:1/-1}
.err{color:var(--bad);font-weight:500;font-size:.8rem}
.form-foot{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;border-top:1px solid var(--line);padding-top:14px;margin-top:6px}
fieldset{border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin:0;min-width:0}
legend{font-weight:700;padding:0 6px}

/* item editor */
.items-ed td{padding:4px}
.items-ed input{padding:6px 8px}
.items-ed .c-desc{min-width:260px}
.items-ed .c-num{width:110px}
.items-ed .c-unit{width:80px}
.items-ed .c-amt{width:130px;text-align:right;font-variant-numeric:tabular-nums;padding-right:8px;white-space:nowrap}
.totbox{display:grid;grid-template-columns:auto 160px;gap:6px 12px;justify-content:end;align-items:center;margin-top:10px;font-variant-numeric:tabular-nums}
.totbox .v{text-align:right}
.totbox .g{font-weight:800;font-size:1.05rem}

/* lain-lain */
.flash{padding:10px 14px;border-radius:6px;font-weight:500}
.flash.good{background:var(--good-soft);color:var(--good)}
.flash.bad{background:var(--bad-soft);color:var(--bad)}
.flash.warn{background:var(--warn-soft);color:var(--warn)}
.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 16px;margin:0}
.kv dt{color:var(--muted)}
.kv dd{margin:0;overflow-wrap:anywhere}
.pipe{display:flex;flex-wrap:wrap;gap:6px}
.pipe a,.pipe span{font-size:.8rem;padding:4px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--fg)}
.pipe .on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700}
.pipe .lost{border-color:var(--bad);color:var(--bad)}
.pipe b{font-variant-numeric:tabular-nums;margin-left:4px}
.docgroup{display:grid;gap:6px}
.docrow{display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line-soft);border-radius:6px}
.docrow .num{font-family:var(--mono);font-size:.82rem;overflow-wrap:anywhere}
@media (max-width:640px){.docrow{grid-template-columns:minmax(0,1fr) auto}.docrow .mid{grid-column:1/-1;order:3}}
.secthead{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700;margin:14px 0 4px}
details>summary{cursor:pointer;font-weight:600}
details.box{border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px;background:var(--surface)}
details.box[open]>summary{margin-bottom:12px}
.thumbs{display:flex;flex-wrap:wrap;gap:8px}
.thumbs a{display:block;width:96px}
.thumbs img{width:96px;height:72px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
.thumbs .f{font-size:.72rem;color:var(--muted);overflow-wrap:anywhere}
.timeline{display:grid;gap:8px;font-size:.85rem}
.timeline div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:8px}
.timeline time{color:var(--muted);font-size:.78rem}
.preview-frame{width:100%;height:78vh;border:1px solid var(--line);border-radius:var(--radius);background:#fff}
.login{min-height:100vh;display:grid;place-items:center;padding:16px}
.login .panel{width:min(380px,100%);display:grid;gap:14px}
.note{background:var(--accent-soft);padding:10px 14px;border-radius:6px;font-size:.88rem}
.muted{color:var(--muted)}
.right{text-align:right}
.big{font-size:1.25rem;font-weight:800;font-variant-numeric:tabular-nums}
@media print{.side,.actions,.btn{display:none!important}.shell{display:block}}
.docrow>.badge{justify-self:end}
@media (max-width:640px){.docrow>.badge{justify-self:start}}
.items-ed textarea{min-height:0;resize:vertical;line-height:1.4;padding:6px 8px}
label input,label select,label textarea{font-weight:400}

/* ---- penyelarasan dengan website utama ---- */
.panel,.kpi,details.box,fieldset{border-color:var(--line-soft);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.panel{padding:18px 20px}
.kpi{padding:14px 16px;position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--brand-accent)}
.kpi .v{font-family:var(--font-head);font-weight:800}
.btn{border-radius:10px;font-weight:600;letter-spacing:.2px;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.btn:not(.plain):not(.ghost):not(.danger){background:var(--brand-accent);border-color:var(--brand-accent);color:#fff;box-shadow:0 8px 18px color-mix(in srgb,var(--brand-accent) 28%,transparent)}
.btn:not(.plain):not(.ghost):not(.danger):hover{transform:translateY(-1px);box-shadow:0 12px 24px color-mix(in srgb,var(--brand-accent) 36%,transparent);filter:none}
.btn.ghost{color:var(--accent);border-color:var(--accent)}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--brand-hi);outline-offset:2px}
input,select,textarea{border-radius:10px;border-color:var(--line)}
input:focus,select:focus,textarea:focus{border-color:var(--brand-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-accent) 15%,transparent);outline:none}
.pipe a,.pipe span{border-color:var(--line);border-radius:999px}
.pipe .on{background:var(--navy);border-color:var(--navy);color:#fff}
.t th{color:var(--muted);letter-spacing:.06em}
.note{background:var(--accent-soft);border-left:4px solid var(--brand-accent);border-radius:10px}
legend{font-family:var(--font-head);font-weight:700}
.head h1{color:var(--fg)}
@media (prefers-color-scheme: dark){.pipe .on{background:var(--brand-accent);border-color:var(--brand-accent)}}
.login{background:linear-gradient(135deg,var(--brand) 0%,var(--navy-2) 100%)}
.login .panel{box-shadow:0 18px 44px rgba(0,0,0,.35);border:0}
.login .logo{width:52px;height:52px;background:#fff;border-radius:14px;padding:4px}
.login .btn{justify-content:center}

/* ===================== LAPORAN: grafik & audit ===================== */
:root{--s1:#1f87ae;--s2:#e0961f;--s3:#7a5bc7;--s-mute:#9AA8B5;--s-warn:#d08a00;--s-bad:#c4473a;--track:#E8EEF3}
@media (prefers-color-scheme: dark){:root{--s1:#2b92bb;--s2:#b97a12;--s3:#8c73da;--s-mute:#4E6378;--s-warn:#c58a1c;--s-bad:#d0624f;--track:#18324B}}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:thin}
.tabs a{padding:9px 14px;color:var(--muted);font-weight:600;font-size:.88rem;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a:hover{color:var(--fg);text-decoration:none}
.tabs a.on{color:var(--accent);border-bottom-color:var(--accent)}
.yearpick label{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--muted)}
.yearpick select{width:auto;padding:6px 28px 6px 10px}
.kpis6{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.kpis6{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.kpis6{grid-template-columns:minmax(0,1fr)}}
.kpi .s b.tx-bad,.tx-bad{color:var(--bad)}
.grid-rpt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.grid-rpt .span2{grid-column:span 2}
.grid-rpt .span3{grid-column:1/-1}
.stack{display:grid;gap:16px;align-content:start}
@media (min-width:901px){.shell{background:linear-gradient(to right,var(--navy) 236px,transparent 236px)}}
@media (max-width:1100px){.grid-rpt{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.grid-rpt{grid-template-columns:minmax(0,1fr)}.grid-rpt .span2{grid-column:auto}}
.chart{width:100%;overflow:hidden}
svg.viz{width:100%;height:auto;display:block;font-family:var(--font)}
svg.viz .grid{stroke:var(--line-soft);stroke-width:1}
svg.viz .base{stroke:var(--line);stroke-width:1}
svg.viz .ax{fill:var(--muted);font-size:10.5px;font-variant-numeric:tabular-nums}
svg.viz .bar.s1{fill:var(--s1)} svg.viz .bar.s2{fill:var(--s2)} svg.viz .bar.s3{fill:var(--s3)}
svg.viz .hit{fill:transparent;cursor:default}
svg.viz .hit:hover{fill:var(--accent);fill-opacity:.06}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.8rem;color:var(--muted);margin:-4px 0 8px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sw{width:10px;height:10px;border-radius:3px;display:inline-block}
.sw.s1,.hbars i.s1,.prog i.s1{background:var(--s1)} .sw.s2,.hbars i.s2{background:var(--s2)} .sw.s3{background:var(--s3)}
.hbars i.warn{background:var(--s-warn)} .hbars i.bad{background:var(--s-bad)} .hbars i.mute{background:var(--s-mute)}
.hbars{display:grid;gap:8px}
.hb{display:grid;grid-template-columns:minmax(90px,38%) minmax(0,1fr) auto;gap:10px;align-items:center;font-size:.84rem}
.hb .hl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb .hl a{color:var(--fg)}
.hb .ht,.prog{height:8px;border-radius:4px;background:var(--track);overflow:hidden}
.hb .ht i,.prog i{display:block;height:100%;border-radius:4px}
.hb .hv{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.hb .hv small{display:block;font-weight:400;color:var(--muted);font-size:.74rem}
.progrow{display:flex;align-items:center;gap:8px}
.progrow .prog{flex:1}
.progrow span{font-size:.8rem;font-weight:700;font-variant-numeric:tabular-nums;min-width:36px;text-align:right}
.small{font-size:.75rem}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.checks li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:.85rem}
.checks li:last-child{border-bottom:0}
.checks .ic{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:800}
.checks li.ok .ic{background:var(--good-soft);color:var(--good)}
.checks li.warn .ic{background:var(--warn-soft);color:var(--warn)}
.checks li.bad .ic{background:var(--bad-soft);color:var(--bad)}
.checks li a{white-space:nowrap;font-size:.8rem}
.checks li.bad a{color:var(--bad)} .checks li.warn a{color:var(--warn)}
.hero{margin-bottom:14px}
.hero .l{font-size:.78rem;color:var(--muted)} .hero .v{font-family:var(--font-head);font-weight:800;font-size:1.6rem;font-variant-numeric:tabular-nums}
.hero .s{font-size:.8rem;color:var(--muted)}
.viz-tip{position:fixed;z-index:50;pointer-events:none;background:var(--navy);color:#fff;font-size:.78rem;line-height:1.45;padding:7px 10px;border-radius:8px;box-shadow:var(--shadow);white-space:pre-line;max-width:280px}
.print-only{display:none}
@media print{
  body{background:#fff;color:#000;font-size:11px}
  .tabs,.yearpick,.viz-tip,.ph a,.ph .btn{display:none!important}
  .print-only{display:block;font-weight:700;margin-bottom:6px}
  .main{padding:0;gap:10px}
  .panel,.kpi{box-shadow:none!important;break-inside:avoid}
  .grid-rpt{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-rpt .span2{grid-column:span 2}
  .hb .ht,.prog{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  svg.viz .bar,.sw,.hbars i,.prog i{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ===================== UI v8: navigasi, daftar, dasbor, riwayat ===================== */
.ico{flex:none;display:inline-block;vertical-align:-3px}
.nav-h{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45);padding:0 12px 6px;font-weight:700}
.nav a{display:flex;align-items:center;gap:11px}
.nav a .ico{opacity:.8}
.nav a.on .ico{opacity:1}
.side .me{gap:10px}
.me-id{display:flex;align-items:center;gap:10px}
.me-id b{display:block;color:#fff;font-size:.85rem;line-height:1.2}
.me-id small{display:block;color:rgba(255,255,255,.6);font-size:.72rem}
.me-links{display:flex;gap:14px;align-items:center;font-size:.8rem}
.me-links form{display:inline}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:rgba(255,255,255,.75);cursor:pointer}
.linkbtn:hover{color:#fff;text-decoration:underline}
.avatar{width:34px;height:34px;border-radius:50%;display:inline-grid;place-items:center;font-weight:700;font-size:.78rem;background:var(--brand-accent);color:#fff;flex:none;letter-spacing:.02em;font-family:var(--font-head)}
.avatar.sm{width:32px;height:32px;font-size:.72rem}
.avatar.lg{width:64px;height:64px;font-size:1.25rem;border-radius:18px}
.avatar.t-perorangan{background:#1f87ae}.avatar.t-perusahaan{background:var(--navy-2)}.avatar.t-instansi{background:#7a5bc7}
.pill{display:inline-block;font-size:.72rem;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--sunk);color:var(--fg)}
.pill.t-perorangan{background:var(--accent-soft);color:var(--accent)}
.pill.t-perusahaan{background:var(--info-soft);color:var(--info)}
.pill.t-instansi{background:#EEE8FA;color:#5B3FB0}
@media (prefers-color-scheme: dark){.pill.t-instansi{background:#2A2147;color:#BCA9F2}}
.tx-warn{color:var(--warn)}
.small{font-size:.78rem}

/* kepala halaman dasbor */
.hero-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px}
.hero-head h1{font-size:1.75rem}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.hero-head .sub{color:var(--muted);margin-top:4px}
.kpi-ic .kpi{display:block;color:var(--fg);text-decoration:none;padding-left:62px;transition:transform .15s ease,box-shadow .15s ease}
.kpi-ic .kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow);text-decoration:none}
.kpi-ic .kic{position:absolute;left:16px;top:16px;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.kpi-ic .kpi::before{display:none}
.stages{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
@media (max-width:900px){.stages{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.stages{grid-template-columns:minmax(0,1fr)}}
.stage{background:var(--sunk);border-radius:12px;padding:12px;position:relative}
.stage:not(:last-child)::after{content:"";position:absolute;right:-8px;top:22px;border:6px solid transparent;border-left-color:var(--line);display:none}
@media (min-width:901px){.stage:not(:last-child)::after{display:block}}
.st-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;font-weight:700;font-size:.85rem}
.st-h b{font-family:var(--font-head);font-size:1.4rem;color:var(--navy)}
@media (prefers-color-scheme: dark){.st-h b{color:var(--accent)}}
.st-list{display:grid;gap:4px}
.st-list a{display:flex;justify-content:space-between;font-size:.82rem;color:var(--fg);padding:3px 8px;border-radius:7px;background:var(--surface)}
.st-list a:hover{background:var(--accent-soft);text-decoration:none}
.st-list a span{font-weight:700;font-variant-numeric:tabular-nums}
.st-list a.zero{color:var(--muted)}
.stage-foot{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:12px;font-size:.84rem;color:var(--muted)}
.stage-foot b{color:var(--fg)}
.stage-foot .lost,.stage-foot .lost b{color:var(--bad)}
.dash-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:1000px){.dash-grid{grid-template-columns:minmax(0,1fr)}}
.todo{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.todo a{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 12px;border:1px solid var(--line-soft);border-radius:10px;color:var(--fg)}
.todo a:hover{border-color:var(--accent);text-decoration:none;background:var(--accent-soft)}
.todo b{display:block;font-size:.86rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.todo small{display:block;color:var(--muted);font-size:.76rem}
.todo .dotb{width:8px;height:8px;border-radius:50%;background:var(--info)}
.todo .bad .dotb{background:var(--bad)} .todo .warn .dotb{background:var(--s-warn)}
.todo .ico{color:var(--muted)}

/* toolbar, segmen, ringkasan angka */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius);padding:10px 12px;box-shadow:var(--shadow-sm)}
.tb-field{display:flex;flex-direction:column;gap:2px;font-size:.72rem;font-weight:600;color:var(--muted)}
.tb-field input,.tb-field select{padding:6px 10px;min-width:130px}
.tb-search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;padding:0 10px;background:var(--surface);min-width:220px;font-weight:400}
.tb-search.grow{flex:1}
.tb-search .ico{color:var(--muted)}
.tb-search input{border:0;box-shadow:none!important;padding:7px 0;background:transparent}
.seg{display:inline-flex;gap:2px;background:var(--sunk);border-radius:10px;padding:3px;overflow-x:auto;max-width:100%}
.seg.wrap{display:flex;flex-wrap:wrap;background:transparent;padding:0;gap:6px}
.seg a{padding:6px 12px;border-radius:8px;font-size:.82rem;font-weight:600;color:var(--muted);white-space:nowrap}
.seg.wrap a{background:var(--surface);border:1px solid var(--line-soft)}
.seg a:hover{color:var(--fg);text-decoration:none}
.seg a.on{background:var(--surface);color:var(--fg);box-shadow:var(--shadow-sm)}
.seg.wrap a.on{background:var(--navy);border-color:var(--navy);color:#fff}
@media (prefers-color-scheme: dark){.seg.wrap a.on{background:var(--brand-accent);border-color:var(--brand-accent)}}
.seg a span{margin-left:6px;font-variant-numeric:tabular-nums;opacity:.75}
.statline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.statline>div{padding:12px 16px;border-left:1px solid var(--line-soft)}
.statline>div:first-child{border-left:0}
.statline span{display:block;font-size:.76rem;color:var(--muted)}
.statline b{font-family:var(--font-head);font-size:1.15rem;font-weight:800;font-variant-numeric:tabular-nums}
@media (max-width:760px){.statline{grid-template-columns:repeat(2,minmax(0,1fr))}.statline>div:nth-child(3){border-left:0}.statline>div:nth-child(n+3){border-top:1px solid var(--line-soft)}}

/* daftar */
.panel.flush{padding:4px 0 0}
.panel.flush .tw{margin:0;padding:0}
.panel.flush .t th:first-child,.panel.flush .t td:first-child{padding-left:20px}
.panel.flush .t th:last-child,.panel.flush .t td:last-child{padding-right:20px}
.ph.pad{padding:14px 20px 4px}
.t.list td{padding-top:11px;padding-bottom:11px;vertical-align:middle}
.t.list tbody tr{transition:background .12s ease}
.t.list tbody tr:hover{background:var(--sunk)}
.rowlink{display:block;color:var(--fg)}
.rowlink:hover{text-decoration:none}
.rowlink:hover b{color:var(--accent)}
.rowlink .code{display:inline-block;font-family:var(--mono);font-size:.72rem;color:var(--muted);margin-bottom:1px}
.rowlink b{display:block;font-weight:600}
.rowlink.who{display:flex;align-items:center;gap:12px}
.rowlink.who small{display:block;font-size:.76rem}
.wa{display:inline-flex;align-items:center;gap:5px;color:var(--good)}
.typegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.tg{display:flex;flex-direction:column;gap:4px;padding:10px 12px;background:var(--surface);border:1px solid var(--line-soft);border-radius:12px;color:var(--fg);box-shadow:var(--shadow-sm)}
.tg span{font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:6px}
.tg b{font-family:var(--font-head);font-size:1.2rem;font-variant-numeric:tabular-nums}
.tg:hover{border-color:var(--accent);text-decoration:none}
.tg.on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--brand-accent) 20%,transparent)}
.tg.draft span{color:var(--warn)}
.dtype{display:inline-block;font-style:normal;font-family:var(--mono);font-size:.66rem;font-weight:700;padding:1px 6px;border-radius:5px;background:var(--sunk);color:var(--fg);min-width:30px;text-align:center}
.dtype.t-p,.dtype.t-sd{background:var(--accent-soft);color:var(--accent)}
.dtype.t-spk,.dtype.t-ktr{background:#EEE8FA;color:#5B3FB0}
.dtype.t-pi,.dtype.t-i,.dtype.t-k{background:var(--good-soft);color:var(--good)}
.dtype.t-bapp,.dtype.t-sj,.dtype.t-bast,.dtype.t-g{background:var(--warn-soft);color:var(--warn)}
@media (prefers-color-scheme: dark){.dtype.t-spk,.dtype.t-ktr{background:#2A2147;color:#BCA9F2}}
.empty-state{display:grid;justify-items:center;text-align:center;gap:6px;padding:36px 16px;color:var(--muted)}
.empty-state .ico{width:34px;height:34px;color:var(--accent);background:var(--accent-soft);border-radius:12px;padding:7px;box-sizing:content-box}
.empty-state b{color:var(--fg);font-size:1rem}
.empty-state.small{padding:18px 8px}
.pager{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 20px;border-top:1px solid var(--line-soft);font-size:.84rem}
.profile{display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.profile .pf-main{flex:1;min-width:220px}
.profile h1{font-size:1.45rem}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;padding:3px 10px;border-radius:999px;background:var(--sunk);color:var(--muted)}

/* riwayat aktivitas */
.feed-panel{padding:6px 0 0}
.feed{list-style:none;margin:0;padding:0}
.feed-day{position:sticky;top:0;z-index:1;background:var(--surface);padding:12px 20px 6px;font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);border-bottom:1px solid var(--line-soft)}
.feed-item{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 20px;border-bottom:1px solid var(--line-soft);position:relative}
.feed-item:last-child{border-bottom:0}
.feed-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--sunk);color:var(--muted)}
.feed-ic.surat{background:var(--accent-soft);color:var(--accent)}
.feed-ic.keuangan{background:var(--good-soft);color:var(--good)}
.feed-ic.proyek{background:var(--warn-soft);color:var(--warn)}
.feed-ic.klien{background:var(--info-soft);color:var(--info)}
.feed-text{font-weight:500;line-height:1.45;overflow-wrap:anywhere}
.feed-meta{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:3px;font-size:.76rem;color:var(--muted)}
.feed-meta time{font-variant-numeric:tabular-nums;color:var(--fg);opacity:.75}
.feed-tag{font-size:.68rem;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--sunk);color:var(--muted);white-space:nowrap}
.feed-tag.surat{color:var(--accent)} .feed-tag.keuangan{color:var(--good)} .feed-tag.proyek{color:var(--warn)} .feed-tag.klien{color:var(--info)}
@media (max-width:640px){.feed-item{grid-template-columns:30px minmax(0,1fr)}.feed-tag{display:none}}
.feed.compact .feed-item{padding:9px 0;grid-template-columns:30px minmax(0,1fr)}
.feed.compact .feed-ic{width:28px;height:28px;border-radius:8px}
.feed.compact .feed-text{font-size:.85rem}
@media (max-width:900px){.nav-h{display:none}.nav a{gap:6px}}
@media (max-width:640px){
  .toolbar>*{flex:1 1 100%}
  .tb-field input,.tb-field select,.tb-search{min-width:0}
  .seg{width:100%}
}
@media (max-width:900px){.side{max-width:100vw}.nav{min-width:0;max-width:100%}.main{max-width:100vw}}
.main{grid-template-columns:minmax(0,1fr)}

/* ===================== Template surat ===================== */
.tpl-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:900px){.tpl-layout{grid-template-columns:minmax(0,1fr)}}
.tpl-nav{padding:10px;position:sticky;top:16px;display:grid;gap:2px}
@media (max-width:900px){.tpl-nav{position:static}}
.tpl-group{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:10px 8px 4px}
.tpl-nav a,.tpl-auto{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px 8px;border-radius:10px;color:var(--fg)}
.tpl-nav a:hover{background:var(--sunk);text-decoration:none}
.tpl-nav a.on{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.tpl-nav .tn b{display:block;font-size:.86rem;font-weight:600}
.tpl-nav .tn small{display:block;font-size:.72rem;color:var(--muted)}
.tpl-auto{opacity:.65}
.tpl-nav .cust{width:8px;height:8px;border-radius:50%;background:var(--accent)}
.tpl-main{display:grid;gap:16px;min-width:0}
.varbar{background:var(--sunk);border-radius:12px;padding:10px 12px;margin-top:4px}
.vars{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.var{font:inherit;font-family:var(--mono);font-size:.76rem;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:3px 8px;cursor:pointer;color:var(--accent);display:inline-flex;gap:6px;align-items:baseline}
.var small{font-family:var(--font);color:var(--muted);font-size:.7rem}
.var:hover{border-color:var(--accent)}
.sample dd.pre{white-space:pre-wrap;font-size:.86rem;line-height:1.55;background:var(--sunk);padding:10px 12px;border-radius:10px}
#tpl_terms,#tpl_body{font-size:.88rem;line-height:1.55}

/* ===================== Halaman proyek ===================== */
.phead{padding:20px 22px}
.phead-top{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:flex-start}
.phead-title{min-width:240px;flex:1}
.phead h1{font-size:1.6rem}
.chips a.chip{color:var(--fg)} .chips a.chip:hover{color:var(--accent);text-decoration:none}
details.menu{position:relative}
details.menu>summary{list-style:none}
details.menu>summary::-webkit-details-marker{display:none}
.menu-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:min(380px,92vw);max-height:70vh;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 48px color-mix(in srgb,var(--brand) 18%,transparent);padding:8px}
.menu-h{font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:10px 10px 4px}
.menu-pop a{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:center;padding:8px 10px;border-radius:10px;color:var(--fg);font-size:.88rem}
.menu-pop a:hover,.menu-pop a:focus-visible{background:var(--accent-soft);text-decoration:none}
.menu-pop a small{display:block;color:var(--muted);font-size:.74rem}
@media (max-width:640px){.menu-pop{position:fixed;left:12px;right:12px;top:auto;bottom:12px;width:auto}}
.stepper{list-style:none;margin:18px 0 0;padding:0;display:flex;gap:0;overflow-x:auto}
.stepper li{flex:1;min-width:92px;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;font-size:.76rem;color:var(--muted);text-align:center}
.stepper li::before{content:"";position:absolute;top:13px;left:-50%;right:50%;height:2px;background:var(--line)}
.stepper li:first-child::before{display:none}
.stepper li.done::before,.stepper li.now::before{background:var(--accent)}
.stepper .sd{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:2px solid var(--line);font-weight:700;font-size:.74rem;position:relative;z-index:1}
.stepper li.done .sd{background:var(--accent);border-color:var(--accent);color:#fff}
.stepper li.now .sd{border-color:var(--accent);color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.stepper li.now .sl{color:var(--fg);font-weight:700}
.nextstep{display:flex;align-items:center;gap:12px;margin-top:16px;padding:12px 14px;border-radius:12px;background:var(--accent-soft);border-left:4px solid var(--brand-accent)}
.nextstep>div{flex:1;min-width:0}
.nextstep b{display:block;font-size:.8rem;color:var(--accent)}
.nextstep span{font-size:.9rem}
.nextstep .ns-ic{color:var(--accent);flex:none}
.statline small{display:block;font-size:.72rem}
.ptabs{display:grid;gap:12px;min-width:0;align-content:start}
.ptabs .tabs{background:var(--surface);border:1px solid var(--line-soft);border-radius:12px;padding:4px 6px;box-shadow:var(--shadow-sm)}
.ptabs .tabs a{border-bottom:0;border-radius:8px;margin:0;padding:8px 12px}
.ptabs .tabs a.on{background:var(--accent-soft);color:var(--accent)}
.ptabs .cnt{font-size:.72rem;font-weight:700;color:var(--muted);margin-left:4px}
.ptabs:not(.js-tabs) .tabs{display:none}
.slot-empty{font-size:.82rem;color:var(--muted);padding:8px 12px;border:1px dashed var(--line);border-radius:10px}
.docrow2{display:grid;grid-template-columns:48px minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line-soft);border-radius:10px;color:var(--fg)}
.docrow2:hover{border-color:var(--accent);background:var(--accent-soft);text-decoration:none}
.docrow2.dim{opacity:.6}
.docrow2 .dr-main b{display:block;font-weight:600;font-size:.9rem;overflow:hidden;text-overflow:ellipsis}
.docrow2 .dr-main small{display:block;color:var(--muted);font-size:.74rem}
.docrow2 .dr-val{font-variant-numeric:tabular-nums;font-size:.86rem;white-space:nowrap}
@media (max-width:640px){.docrow2{grid-template-columns:44px minmax(0,1fr)}.docrow2 .dr-val,.docrow2>.badge{grid-column:2}}
.terms{display:grid;gap:8px}
.termcard{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto auto;gap:12px;align-items:center;padding:12px;border:1px solid var(--line-soft);border-radius:12px}
.termcard.st-lunas{background:var(--good-soft);border-color:transparent}
.tc-no{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-weight:800;background:var(--sunk);font-family:var(--font-head)}
.st-lunas .tc-no{background:var(--good);color:#fff}
.st-ditagih .tc-no,.st-sebagian .tc-no{background:var(--info-soft);color:var(--info)}
.tc-main b{display:block;font-size:.9rem}
.tc-main small{display:block;color:var(--muted);font-size:.76rem}
.tc-amt{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.tc-act{display:flex;gap:6px}
@media (max-width:760px){.termcard{grid-template-columns:40px minmax(0,1fr)}.tc-amt,.tc-st,.tc-act{grid-column:2}}
.terms-total{display:flex;justify-content:space-between;padding:10px 12px 0;font-size:.88rem;color:var(--muted)}
.terms-total b{color:var(--fg);font-variant-numeric:tabular-nums}
.pside{display:grid;gap:16px;min-width:0;align-content:start}
details.box-acc>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
details.box-acc>summary::-webkit-details-marker{display:none}
details.box-acc>summary::after{content:"+";font-size:1.2rem;color:var(--muted)}
details.box-acc[open]>summary::after{content:"–"}
details.box-acc summary b{display:block} details.box-acc summary small{display:block;color:var(--muted);font-size:.76rem;font-weight:400}
[hidden]{display:none!important}
.ptabs{scroll-margin-top:12px}
.set-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:16px;align-items:start}@media (max-width:1100px){.set-grid{grid-template-columns:minmax(0,1fr)}}
.errbox{display:flex;gap:20px;align-items:flex-start;max-width:720px}
.errcode{font-family:var(--font-head);font-weight:800;font-size:2.4rem;color:var(--accent);line-height:1;opacity:.85}
.checks li.ok .ic{background:var(--good-soft);color:var(--good)}
.checks.hc .cl b{display:block;font-weight:600}
.checks.hc .cl small{display:block;color:var(--muted);font-size:.78rem;overflow-wrap:anywhere}
.checks.hc .cl small.fix{color:var(--fg);margin-top:2px}
.tx-good{color:var(--good)}

/* ===================== Gaya identitas: navy monokrom, garis tiang, sudut layar ===================== */
h1,h2,h3,legend,.kpi .v,.statline b,.hero .v,.st-h b,.tg b,.errcode{font-family:var(--font-head);letter-spacing:-.01em}
h1{font-weight:700} h2,h3{font-weight:600}
.side{background:var(--brand);position:sticky;overflow:hidden;isolation:isolate}
.side::before{content:"";position:absolute;inset:auto -40px -30px auto;width:260px;height:260px;z-index:-1;opacity:.07;
  background:repeating-linear-gradient(-50deg,#fff 0 2px,transparent 2px 26px);border-radius:120px 8px 120px 8px}
@media (min-width:901px){.shell{background:linear-gradient(to right,var(--brand) 236px,transparent 236px)}}
.brand img{border-radius:10px 3px 10px 3px}
.brand b{font-weight:700;letter-spacing:.01em;text-transform:none;font-size:1rem}
.nav-h{display:flex;align-items:center;gap:8px}
.nav-h::before{content:"";width:16px;height:2px;border-radius:2px;background:currentColor;transform:rotate(-40deg)}
.nav a{border-radius:10px 4px 10px 4px}
.nav a.on{background:#fff;color:var(--brand);box-shadow:none;font-weight:600}
.nav a.on .ico{color:var(--brand)}
.side .me a,.me-links a{color:var(--brand-hi)}
.avatar{background:var(--brand-accent)}
.btn{font-family:var(--font-head);font-weight:500;border-radius:10px;border-width:2px}
.btn:not(.plain):not(.ghost):not(.danger){background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:none}
.btn:not(.plain):not(.ghost):not(.danger):hover{background:var(--navy-2);border-color:var(--navy-2);transform:none;box-shadow:var(--shadow-sm)}
.btn.ghost{color:var(--brand);border-color:var(--brand);background:transparent}
.btn.ghost:hover{background:var(--brand);color:#fff}
@media (prefers-color-scheme: dark){
  .btn:not(.plain):not(.ghost):not(.danger){background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
  .btn.ghost{color:var(--accent);border-color:var(--accent)}
  .nav a.on{background:var(--accent);color:var(--accent-ink)} .nav a.on .ico{color:var(--accent-ink)}
}
.kpi::before{background:var(--brand)}
.kpi-ic .kic{background:var(--sunk);color:var(--brand)}
@media (prefers-color-scheme: dark){.kpi-ic .kic{color:var(--accent)} .kpi::before{background:var(--accent)}}
.panel.phead,.hero-head,.profile{border-radius:22px 6px 22px 6px}
.eyebrow{display:flex;align-items:center;gap:10px;color:var(--muted);letter-spacing:.14em}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:currentColor;transform:rotate(-40deg)}
.stepper li.done .sd{background:var(--brand);border-color:var(--brand)}
.stepper li.done::before,.stepper li.now::before{background:var(--brand)}
.stepper li.now .sd{border-color:var(--brand);color:var(--brand);box-shadow:0 0 0 4px var(--sunk)}
.nextstep{border-left-color:var(--brand);background:var(--sunk)} .nextstep b,.nextstep .ns-ic{color:var(--brand)}
@media (prefers-color-scheme: dark){.nextstep b,.nextstep .ns-ic,.stepper li.now .sd{color:var(--accent)}}
.tabs a.on{color:var(--brand);border-bottom-color:var(--brand)}
.ptabs .tabs a.on{background:var(--sunk);color:var(--brand)}
.seg.wrap a.on,.pipe .on{background:var(--brand);border-color:var(--brand)}
.note{border-left-color:var(--brand)}
.login{background:linear-gradient(135deg,var(--brand) 0%,var(--navy-2) 100%);position:relative;overflow:hidden}
.login::before{content:"";position:absolute;right:-80px;bottom:-80px;width:420px;height:420px;opacity:.08;
  background:repeating-linear-gradient(-50deg,#fff 0 2px,transparent 2px 30px);border-radius:200px 10px 200px 10px}
.login .panel{border-radius:24px 8px 24px 8px;position:relative}
.login .logo{border-radius:12px 4px 12px 4px}
.colorrow{display:flex;align-items:center;gap:10px}
.colorrow input[type=color]{width:52px;height:38px;padding:3px;cursor:pointer}
.colorrow code{font-size:.8rem;color:var(--muted)}
::selection{background:var(--brand);color:#fff}

/* Pengaturan: logo, tanda tangan, stempel */
.asset{display:flex;flex-direction:column;gap:6px}
.asset>label{font-weight:600}
.asset-cur{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--line);border-radius:12px;
  background:repeating-conic-gradient(#f1f4f9 0 25%,#fff 0 50%) 0 0/14px 14px}
.asset-cur img{display:block;max-height:64px;max-width:200px;object-fit:contain}
.asset-cur .check{margin:0;background:var(--card,#fff);padding:4px 10px;border-radius:8px;border:1px solid var(--line)}
.asset-cur .check.danger{color:var(--bad)}
.editrow td{background:var(--mist,#f6f8fb);padding:14px 16px}