:root{
  --desk:#E3E7EC; --panel:#FFFFFF; --panel-2:#F4F6F8; --text:#17202A; --muted:#5B6672; --line:#D3D9E0;
  --field:#FFFFFF; --field-line:#C6CDD6; --danger:#B42318; --ok:#0F7A5C; --warn:#B4690E;
  --accent:#2747C9; --on-accent:#FFFFFF;
  --ui:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --display:"Bricolage Grotesque","Figtree",system-ui,sans-serif;
  color-scheme:light; box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
[hidden]{display:none!important}
@media (prefers-color-scheme:dark){
  :root{--desk:#101419;--panel:#181E25;--panel-2:#1F262E;--text:#E6EAEE;--muted:#97A2AD;--line:#2B333C;
    --field:#12171D;--field-line:#36404A;--danger:#F07167;--ok:#4FC79F;--warn:#E9A23B;color-scheme:dark}
}
*,*::before,*::after{box-sizing:inherit}
html{height:100%}
body{margin:0;height:100%;background:var(--desk);color:var(--text);font:15px/1.5 var(--ui);-webkit-font-smoothing:antialiased}
button,input,textarea,select{font:inherit;color:inherit;box-sizing:border-box}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.boot,#root{height:100%}
.boot{display:grid;place-items:center;height:100%;color:var(--muted)}
a{color:inherit}

/* layout */
.app{display:grid;grid-template-rows:auto 1fr;height:100%}
.bar{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap;position:sticky;top:0;z-index:5}
.brand{font:700 18px/1 var(--display);letter-spacing:-.01em;display:flex;align-items:center;gap:8px;text-decoration:none;margin-right:8px}
.brand i{width:12px;height:16px;background:var(--accent);border-radius:2px;display:inline-block;clip-path:polygon(0 0,70% 0,100% 25%,100% 100%,0 100%)}
.nav{display:flex;gap:2px}
.nav a{padding:7px 12px;border-radius:8px;text-decoration:none;font-weight:600;font-size:14px;color:var(--muted)}
.nav a[aria-current="page"]{color:var(--text);background:var(--panel-2)}
.spacer{flex:1}
.who{font-size:13px;color:var(--muted)}
.content{overflow:auto;min-height:0}
.content:has(.ed-wrap){overflow:hidden}

/* controls */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:8px;border:1px solid var(--field-line);background:var(--panel);cursor:pointer;font-weight:600;font-size:14px;white-space:nowrap;text-decoration:none}
.btn:hover{background:var(--panel-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{border-color:transparent;background:transparent}
.btn.danger{color:var(--danger)}
.btn svg{width:16px;height:16px}
.btn[disabled]{opacity:.55;cursor:progress}
label.f{min-width:0;display:grid;gap:4px;font-size:13px;color:var(--muted);font-weight:500}
label.f input,label.f textarea,label.f select,.mini input,select.sel,input.search{padding:8px 10px;border:1px solid var(--field-line);border-radius:7px;background:var(--field);font-size:14px;width:100%;min-width:0}
label.f textarea{resize:vertical;min-height:64px;line-height:1.45}
.hint{font-size:12px;color:var(--muted);margin:-4px 0 0}
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.check{display:flex;align-items:center;gap:8px;font-size:14px}
.check input{width:18px;height:18px;accent-color:var(--accent)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(20px);background:var(--text);color:var(--panel);padding:10px 16px;border-radius:8px;font-weight:600;font-size:14px;opacity:0;pointer-events:none;transition:.2s;z-index:50;max-width:90vw}
.toast.on{opacity:1;transform:translateX(-50%)}

/* login */
.login{min-height:100%;display:grid;place-items:center;padding:24px}
.login form{width:100%;max-width:360px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:28px;display:grid;gap:14px}
.login h1{margin:0 0 4px;font:700 26px/1.1 var(--display);letter-spacing:-.02em}
.login .err{color:var(--danger);font-size:14px;min-height:1.2em;margin:0}

/* list */
.page{max-width:1100px;margin:0 auto;padding:24px 20px 60px}
.page h1{font:700 28px/1.1 var(--display);letter-spacing:-.02em;margin:0}
.head{display:flex;align-items:end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:18px}
.stat{background:var(--panel);padding:14px 16px;text-align:left;border:0;cursor:pointer}
.stat[aria-pressed="true"]{box-shadow:inset 0 -3px 0 var(--accent)}
.stat .l{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px}
.stat .n{font:700 22px/1.2 var(--display);margin-top:4px}
.stat .t{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.filters{display:flex;gap:10px;margin-bottom:12px}
.filters .search{max-width:380px}
.tbl{width:100%;border-collapse:collapse;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tbl th{font-size:12px;color:var(--muted);text-align:left;padding:10px 14px;background:var(--panel-2);font-weight:600}
.tbl td{padding:12px 14px;border-top:1px solid var(--line);vertical-align:top}
.tbl tbody tr{cursor:pointer}
.tbl tbody tr:hover td{background:var(--panel-2)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tbl .no{font-weight:600;white-space:nowrap}
.tbl .sub{font-size:13px;color:var(--muted)}
.empty{padding:48px 20px;text-align:center;color:var(--muted);background:var(--panel);border:1px dashed var(--field-line);border-radius:12px}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;white-space:nowrap}
.s-draft{background:var(--muted)} .s-sent{background:var(--accent)} .s-approved{background:var(--ok)} .s-rejected{background:var(--danger)}

/* editor */
.ebar{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap}
.ebar .title{font:700 16px/1.2 var(--display);margin-right:4px}
.ebar select{width:auto}
.saved{font-size:13px;color:var(--muted);min-width:90px}
.saved.err{color:var(--danger)}
.banner[hidden]{display:none}
.banner{background:color-mix(in srgb,var(--warn) 15%,var(--panel));border-bottom:1px solid var(--line);padding:10px 16px;font-size:14px;display:flex;gap:12px;align-items:center}
.ed-wrap{display:grid;grid-template-rows:auto auto auto 1fr;height:100%;min-height:0}
.ed-main{display:grid;grid-template-columns:minmax(360px,440px) 1fr;min-height:0}
.editor{overflow:auto;background:var(--panel);border-right:1px solid var(--line);padding:4px 0 40px}
.viewer{overflow:auto;padding:28px 24px 60px}
.tabs{display:none}
details.grp{border-bottom:1px solid var(--line)}
details.grp>summary{list-style:none;cursor:pointer;padding:14px 20px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
details.grp>summary::-webkit-details-marker{display:none}
details.grp>summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s}
details.grp[open]>summary::after{transform:rotate(-135deg)}
.grp-body{padding:0 20px 18px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.sw{width:30px;height:30px;border-radius:50%;border:2px solid var(--panel);box-shadow:0 0 0 1px var(--field-line);cursor:pointer}
.sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--text)}
.logo-box{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.logo-box img{max-height:42px;max-width:120px;object-fit:contain;border:1px solid var(--line);border-radius:6px;padding:4px;background:#fff}
.item{border:1px solid var(--line);border-radius:10px;padding:12px;display:grid;gap:8px;background:var(--panel-2)}
.item-head{display:flex;align-items:center;gap:8px}
.item-head .n{font:700 13px var(--display);color:var(--muted);width:22px}
.item .nums{display:grid;grid-template-columns:64px 88px minmax(0,1fr);gap:8px}
.mini{min-width:0}
.item-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.item-foot strong{font-variant-numeric:tabular-nums}
.icon-btns{display:flex;gap:2px}
.ib{width:30px;height:30px;display:grid;place-items:center;border-radius:6px;border:0;background:transparent;cursor:pointer;color:var(--muted)}
.ib:hover{background:var(--line);color:var(--text)}
.ib[disabled]{opacity:.35;cursor:default}
.ib.del:hover{color:var(--danger)}
.ib svg{width:16px;height:16px}
.add{border:1px dashed var(--field-line);background:transparent;border-radius:10px;padding:10px;cursor:pointer;font-weight:600;color:var(--muted)}
.add:hover{color:var(--text);border-color:var(--text)}
.seg{display:inline-flex;border:1px solid var(--field-line);border-radius:7px;overflow:hidden}
.seg button{border:0;background:var(--field);padding:7px 12px;cursor:pointer;font-size:13px;font-weight:600}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.activity{font-size:13px;color:var(--muted);display:grid;gap:4px;margin:0;padding:0;list-style:none}
.stage{margin:0 auto;width:fit-content}
.scaler{transform-origin:top left}

/* settings */
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-bottom:18px}
.card h2{margin:0;font:700 18px/1.2 var(--display)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.users td,.users th{padding:8px 10px}

/* ---------- PAPER (selalu terang) ---------- */
.sheet{--a:#2747C9;width:794px;min-height:1123px;background:#fff;color:#1A2129;font:13px/1.55 "Figtree",system-ui,sans-serif;padding:0 0 48px;position:relative;box-shadow:0 1px 2px rgba(16,24,40,.08),0 12px 32px -8px rgba(16,24,40,.18)}
.sheet .band{height:10px;background:var(--a)}
.sheet .pad{padding:40px 56px 0}
.sheet .top{display:flex;justify-content:space-between;gap:24px;align-items:flex-start}
.sheet .iss{max-width:52%}
.sheet .iss img{max-height:52px;max-width:180px;object-fit:contain;display:block;margin-bottom:12px}
.sheet .iss .co{font:700 17px/1.25 "Bricolage Grotesque",sans-serif;color:#10161D}
.sheet .iss .sm{color:#5A6470;font-size:12px;white-space:pre-line}
.sheet .doc{text-align:right}
.sheet .doc h1{margin:0;font:700 40px/1 "Bricolage Grotesque",sans-serif;letter-spacing:-.025em;color:var(--a)}
.sheet .doc .no{margin-top:8px;font-weight:600;color:#10161D;font-variant-numeric:tabular-nums}
.sheet .meta{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:20px;margin-top:32px;padding:16px 0;border-top:1px solid #DDE2E8;border-bottom:1px solid #DDE2E8}
.sheet .k{font-size:11px;color:#6B7580;font-weight:600;margin-bottom:2px}
.sheet .v{color:#10161D;white-space:pre-line}
.sheet .subj{margin:22px 0 4px;font:600 15px/1.35 "Bricolage Grotesque",sans-serif;color:#10161D}
.sheet .intro{color:#3A444F;white-space:pre-line;margin:0}
.sheet table{width:100%;border-collapse:collapse;margin-top:20px}
.sheet thead th{font-size:11px;font-weight:700;color:#fff;background:var(--a);text-align:left;padding:9px 10px}
.sheet thead th:first-child{border-radius:6px 0 0 6px;width:30px;text-align:center}
.sheet thead th:last-child{border-radius:0 6px 6px 0}
.sheet td{padding:11px 10px;border-bottom:1px solid #E6EAEE;vertical-align:top}
.sheet td.c{text-align:center;color:#6B7580;font-variant-numeric:tabular-nums}
.sheet td.r,.sheet th.r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.sheet td .nm{font-weight:600;color:#10161D}
.sheet td .ds{color:#5A6470;font-size:12px;white-space:pre-line}
.sheet tr{page-break-inside:avoid}
.sheet .sum{display:flex;justify-content:space-between;gap:28px;margin-top:20px;align-items:flex-start;page-break-inside:avoid}
.sheet .words{flex:1;font-size:12px;color:#3A444F;padding-top:4px}
.sheet .words i{display:block;color:#10161D;margin-top:2px}
.sheet .tot{width:300px;font-variant-numeric:tabular-nums}
.sheet .tot div{display:flex;justify-content:space-between;padding:5px 0}
.sheet .tot .grand{margin-top:6px;padding:12px 14px;border-radius:8px;background:#edf1fa;color:var(--a);font:700 18px/1.2 "Bricolage Grotesque",sans-serif}
.sheet .tot .note{font-size:11px;color:#8A939C;justify-content:flex-end}
.sheet .cols{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:30px;page-break-inside:avoid}
.sheet h3{font:700 13px/1.3 "Bricolage Grotesque",sans-serif;margin:0 0 8px;color:#10161D;padding-bottom:6px;border-bottom:2px solid var(--a);display:inline-block}
.sheet .pay div{display:flex;justify-content:space-between;gap:12px;padding:3px 0;font-variant-numeric:tabular-nums}
.sheet .bank{margin-top:10px;padding:10px 12px;background:#F4F6F8;border-radius:6px;font-size:12px;display:block!important}
.sheet ol{margin:0;padding-left:18px;color:#3A444F;font-size:12px}
.sheet ol li{margin-bottom:4px}
.sheet .sign{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:40px;page-break-inside:avoid}
.sheet .sign .line{height:72px;border-bottom:1px solid #9AA3AD}
.sheet .sign .nm{margin-top:6px;font-weight:700;color:#10161D}
.sheet .sign .role{font-size:12px;color:#6B7580}
.sheet .foot{margin-top:36px;font-size:11px;color:#8A939C;text-align:center}

@media (max-width:900px){
  .ed-main{grid-template-columns:1fr}
  .tabs{display:flex;gap:4px;padding:8px 16px;background:var(--panel);border-bottom:1px solid var(--line)}
  .tabs button{flex:1;padding:8px;border:1px solid var(--field-line);background:var(--panel);border-radius:8px;font-weight:600;cursor:pointer}
  .tabs button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
  .ed-wrap[data-view="edit"] .viewer{display:none}
  .ed-wrap[data-view="preview"] .editor{display:none}
  .editor{border-right:0}
  .viewer{padding:16px 12px 40px}
  .hide-sm{display:none!important}
  .bar{flex-wrap:nowrap;gap:4px;padding:8px 10px}
  .brand{font-size:16px;margin-right:2px}
  .nav a{padding:6px 8px}
  .bar .btn{padding:7px 8px}
  .ebar{gap:4px 6px;padding:6px 10px;flex-wrap:wrap}
  .ebar .spacer{flex-basis:100%;height:0}
  .ed-wrap{overflow:hidden}
  .ebar .btn{padding:7px 8px}
  .ebar .title{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  .saved{display:none}
  .stats{grid-template-columns:1fr 1fr}
  .grid2{grid-template-columns:1fr}
  .tbl .hide-sm{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media print{
  @page{size:A4;margin:0}
  body{background:#fff}
  .bar,.ebar,.tabs,.editor,.toast,.banner[hidden]{display:none}
.banner{display:none!important}
  .ed-main{display:block}.viewer{padding:0;overflow:visible;display:block!important}
  .scaler{transform:none!important}.stage{height:auto!important;width:auto!important}
  .sheet{box-shadow:none}
}
 .invoice-card { display:grid; grid-template-columns:2fr 2fr 1fr 1fr; gap:12px; padding:22px; margin:12px 0; border:1px solid #d8dfe7; border-radius:12px; background:#fff; color:#253448; text-decoration:none; }
 .invoice-card:hover { border-color:#2747c9; }
 .payment-panel { padding:20px; background:#f3f6fc; border-top:1px solid #d8dfe7; }
 .payment-panel form { display:grid; gap:12px; }
 @media(max-width:700px) { .invoice-card { grid-template-columns:1fr 1fr; } .bar { flex-wrap:wrap; } .ebar { flex-wrap:wrap; } }