:root {
  --studio-ink:#202823; --studio-lime:#baff63; --studio-paper:#fbfcf8;
  --desk:#eff1eb; --panel:#fff; --panel-2:#f3f5ee; --text:#202823; --muted:#778074;
  --line:#e0e5da; --field:#fff; --field-line:#d7ded0; --danger:#b94138; --ok:#367244;
  --warn:#a16b1e; color-scheme:light;
  --ui:"Figtree",sans-serif; --display:"Bricolage Grotesque",sans-serif;
}
body { background:var(--desk); }
.app { display:grid; grid-template-columns:218px minmax(0,1fr); grid-template-rows:minmax(0,1fr); height:100dvh; }
.bar { position:relative; display:flex; flex-direction:column; flex-wrap:nowrap; align-items:stretch; gap:0; padding:32px 22px 22px; border:0; background:#202823; color:#f2f5eb; z-index:20; }
.brand { margin:0 0 45px; }
.brand img { width:143px; height:auto; display:block; }
.workspace-label { color:#9aa697; letter-spacing:.15em; font-size:10px; margin:0 0 19px 10px; }
.workspace-label span { display:block; color:#d4dccf; letter-spacing:.05em; margin-top:8px; font-size:11px; }
.nav { flex-direction:column; gap:6px; }
.nav a { display:flex; gap:13px; align-items:center; padding:13px 12px; border-radius:8px; color:#abb6a6; font-size:13px; font-weight:500; }
.nav a:hover { background:#2c362d; color:#fff; }
.nav a[aria-current=page] { background:var(--studio-lime); color:#202823; font-weight:700; }
.nav-icon { font-size:19px; width:20px; text-align:center; line-height:1; }
.nav-arrow { margin-left:auto; opacity:.6; }
.bar .spacer { min-height:42px; }
.sidebar-note { padding:0 4px 28px; font-size:8px; letter-spacing:.12em; color:#b5c0ad; }
.sidebar-note p { font-size:12px; line-height:1.8; letter-spacing:0; color:#83917c; margin:12px 0 0; }
.live-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--studio-lime); margin-right:5px; }
.who { border-top:1px solid #3c4639; padding-top:24px; display:flex; align-items:center; gap:10px; color:#e2e7dd; font-size:12px; }
.who small { display:block; font-size:10px; color:#889881; margin-top:3px; }
.avatar { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#394832; color:var(--studio-lime); font-family:var(--display); }
.bar #bLogout { color:#9fae98; justify-content:center; margin-top:14px; font-size:11px; }
.content { min-width:0; }
.btn { border-radius:7px; padding:10px 15px; font-size:12px; font-weight:600; letter-spacing:.01em; transition:background .15s; }
.btn.primary { background:#263729; color:var(--studio-lime); border-color:#263729; box-shadow:0 3px 0 #19251c; }
.btn.primary:hover { background:#344e37; filter:none; }
.btn.ghost { color:#697462; }
.btn.danger { color:#ae5a50; }
.page { max-width:1260px; padding:48px 52px 80px; }
.section-eyebrow { font-size:10px; letter-spacing:.17em; color:#88927f; margin-bottom:28px; font-weight:600; }
.head { margin-bottom:34px; align-items:center; }
.page h1 { font:500 43px/1.12 var(--display); letter-spacing:-.045em; }
.page h1 em { font-style:normal; color:#6b8651; }
.page-description { font-size:13px; color:#7a8472; margin:14px 0 0; max-width:420px; line-height:1.65; }
.stats { gap:14px; border:0; background:none; border-radius:0; margin:0 0 30px; overflow:visible; }
.stat { border:1px solid #e0e5da; border-radius:12px; padding:20px; position:relative; transition:transform .2s; }
.stat:hover { transform:translateY(-3px); }
.stat:first-child { background:#e6eddc; border-color:#dde6d2; }
.stat .n { font-size:34px; font-weight:500; margin:16px 0 5px; }
.stat .l { font-size:11px; }
.stat .t { font-size:11px; }
.invoice-stats { grid-template-columns:repeat(3,minmax(0,1fr)); }
.invoice-stats .n { font-size:25px; overflow-wrap:anywhere; }
.stat[aria-pressed=true] { box-shadow:0 0 0 2px #6a8c50; }
.filters { margin-bottom:18px; }
input.search { background:#fff; border-radius:8px; padding:12px 16px; font-size:12px; }
.tbl { border-radius:12px; border:0; box-shadow:0 0 0 1px #e0e5da; }
.tbl th { background:#e9ede3; color:#6d7764; letter-spacing:.06em; text-transform:uppercase; font-size:9px; padding:15px 18px; }
.tbl td { padding:21px 18px; font-size:12px; }
.tbl .sub { font-size:11px; margin-top:4px; }
.tbl .no { font-family:var(--display); }
.pill { font-size:10px; padding:5px 8px; background:#f3f5ee; border-radius:5px; }
.empty { padding:65px 28px; background:rgba(255,255,255,.7); font-size:13px; border-radius:14px; }
.invoice-card { border-radius:10px; padding:23px; transition:transform .15s; font-size:13px; align-items:center; color:#354330; }
.invoice-card:hover { transform:translateX(3px); border-color:#85a46c; }
.invoice-card small { color:#8a9580; }
.card { border-color:#e0e5da; padding:25px; border-radius:14px; }
.card h2 { font-size:21px; font-weight:500; }
.ed-wrap { display:flex; flex-direction:column; height:100%; min-height:0; }
.ebar,.tabs,.banner { flex-shrink:0; }
.ebar { padding:19px 27px; gap:12px; background:#fcfdf9; border-color:#e1e5d9; }
.ebar .title { font-size:14px; letter-spacing:-.02em; }
.ebar .back-link { padding:6px; margin-right:0; }
.ebar .btn { font-size:11px; padding:9px 11px; }
.ebar .sel { font-size:10px; padding:6px 8px; border-radius:5px; }
.saved { font-size:10px; min-width:80px; color:#74916a; }
.saved:not(.err)::before { content:""; width:5px; height:5px; display:inline-block; background:currentColor; border-radius:50%; margin-right:6px; }
.tabs { display:flex; align-items:center; gap:18px; padding:10px 31px; background:#fcfdf9; border-bottom:1px solid #dde3d5; }
.view-switch { display:flex; gap:2px; background:#eef1e7; border:1px solid #e1e7d8; padding:3px; border-radius:7px; }
.tabs button { padding:7px 13px; font-size:11px; background:none; border:0; border-radius:5px; cursor:pointer; color:#77846c; font-weight:500; }
.view-switch button[aria-pressed=true] { background:#fff; color:#2e4125; box-shadow:0 1px 4px #dce2d2; }
.editing-hint { font-size:10px; color:#909a85; }
#bDetails { margin-left:auto; border:1px solid #dce3d2; color:#4f6441; padding:8px 11px; }
#bDetails span { margin-left:12px; }
#bDetails[aria-expanded=true] { background:#e5edda; }
.ed-main { position:relative; flex:1; min-height:0; grid-template-columns:minmax(0,1fr); }
.editor { display:none; padding:0 0 40px; border-left:1px solid #dce3d2; border-right:0; grid-column:2; grid-row:1; width:330px; background:#fcfdf9; }
.ed-wrap[data-panel=open] .ed-main { grid-template-columns:minmax(0,1fr) 330px; }
.ed-wrap[data-panel=open] .editor { display:block; }
.viewer { display:block!important; grid-column:1; grid-row:1; padding:24px 35px 50px; background-color:#eef0e8; background-image:radial-gradient(#ccd3bf .65px,transparent .65px); background-size:14px 14px; }
.canvas-caption { max-width:794px; margin:0 auto 16px; display:flex; justify-content:space-between; font-size:8px; letter-spacing:.1em; color:#89947c; }
.canvas-caption i { display:inline-block; width:5px; height:5px; margin-right:5px; background:#8da36d; border-radius:50%; }
.canvas-footer { text-align:center; color:#929e84; font-size:10px; margin-top:25px; letter-spacing:.02em; }
.canvas-footer span { color:#4e7040; margin-left:8px; }
details.grp>summary { font-size:12px; padding:18px 20px; }
.grp-body { gap:13px; }
label.f { font-size:11px; }
label.f input,label.f textarea,label.f select,.mini input { font-size:12px; padding:9px; }
.payment-panel { background:#eef4e4; font-size:12px; padding:22px 18px; }
.payment-panel h2 { font:500 24px var(--display); }
.payment-panel p { line-height:1.8; }
.sheet { color:#253027; font-size:12px; box-shadow:0 3px 8px #2532200a,0 20px 45px #29392412; padding-bottom:0; border:1px solid #dde1d6; }
.sheet .pad { padding:38px 46px 0; }
.paper-topline { padding:12px 46px; background:#233127; color:#d4e5c6; display:flex; justify-content:space-between; font-size:7px; letter-spacing:.13em; }
.sheet .top { align-items:flex-start; gap:24px; }
.sheet .iss { max-width:48%; min-width:220px; }
.paper-logo { background:#233127; display:inline-flex; padding:10px 14px; border-radius:5px; margin-bottom:15px; }
.paper-logo.custom-logo { background:#fff; padding:0; }
.sheet .paper-logo img { max-width:104px; max-height:52px; margin:0; border:0; border-radius:0; }
.sheet .iss .co { font:600 14px var(--display); margin-bottom:6px; }
.sheet .iss .sm { color:#6f7c65; font-size:11px; }
.paper-eyebrow { font-size:7px; letter-spacing:.16em; color:#8e9a85; margin-top:4px; margin-bottom:12px; }
.sheet .doc h1 { color:#263629; font:500 47px/.98 var(--display); letter-spacing:-.055em; }
.doc-period { color:var(--a,#84a85d); }
.sheet .doc .no { color:#6e7e62; font-size:10px; margin-top:14px; font-weight:500; }
.paper-status { font-size:8px; margin:10px 0 0 auto; width:fit-content; padding:4px 9px; background:#e9f0df; color:#577245; border-radius:3px; }
.sheet .meta { margin-top:29px; padding:20px 0; gap:17px; grid-template-columns:1.5fr 1fr 1fr; border-color:#e4e8dd; }
.sheet .k { font-size:8px; letter-spacing:.1em; color:#7c8b6f; font-weight:500; margin-bottom:9px; }
.sheet .v { font-size:11px; color:#526149; line-height:1.8; }
.sheet .v.client-company { font-size:13px; color:#253a22; font-weight:600; margin-bottom:4px; }
.client-address { max-width:250px; }
.sheet .subj { font:600 17px var(--display); margin:24px 0 8px; color:#30442a; }
.sheet .intro { font-size:11px; color:#6f7d64; line-height:1.8; }
.sheet table { margin-top:22px; table-layout:fixed; }
.sheet thead th { background:#e9efdf; color:#586c47; font-size:8px; text-transform:uppercase; letter-spacing:.06em; padding:11px 9px; }
.sheet thead th:first-child { width:35px; border-radius:4px 0 0 4px; }
.sheet thead th:nth-child(2) { width:42%; }
.sheet thead th:nth-child(3) { width:12%; }
.sheet thead th:last-child { border-radius:0 4px 4px 0; }
.sheet td { padding:16px 9px; border-bottom:1px solid #edf0e8; font-size:10px; }
.sheet td .nm { color:#34472c; font-weight:600; font-size:11px; }
.sheet td .ds { font-size:10px; color:#738365; line-height:1.7; margin-top:4px; }
.sheet td.r { font-size:11px; }
.sheet td.c { position:relative; font-size:9px; color:#9ca68f; }
.sheet .qty-cell small { display:block; font-size:8px; color:#9aa58e; }
.sheet .line-total { font-weight:600; color:#3b5130; }
.sheet .sum { gap:35px; margin-top:26px; }
.sheet .words { font-size:9px; color:#89957d; padding-top:6px; line-height:1.7; }
.sheet .words i { color:#697a59; font-style:normal; max-width:230px; }
.paper-note { font-size:9px; line-height:1.8; margin-top:24px; color:#a1ab97; }
.sheet .tot { width:280px; font-size:10px; color:#7a896c; }
.sheet .tot>div { padding:7px 0; align-items:baseline; }
.sheet .tot .grand { border-radius:5px; padding:15px; margin:10px -1px 5px; background:#273b29; color:#eaf4df; font:500 11px/1.4 var(--ui); }
.sheet .grand [data-total=total] { color:#baff63; font:500 22px var(--display); }
.sheet .balance-row { font-weight:600; color:#3b5130; }
.sheet .tot .note { font-size:7px; color:#9fa991; }
.sheet .cols { gap:40px; margin-top:32px; }
.sheet h3 { font:600 10px var(--ui); border:0; padding-bottom:0; color:#586c47; margin-bottom:12px; }
.sheet .pay { font-size:9px; color:#829174; }
.sheet .bank { background:#f5f7f0; border:1px solid #e8eddc; border-radius:5px; padding:13px; line-height:1.9; color:#5c734a; }
.terms-text { white-space:pre-line; font-size:10px; line-height:1.8; color:#728265; }
.sheet .sign { margin-top:32px; gap:80px; }
.sheet .sign .line { height:42px; border-color:#dce3d2; }
.sheet .sign .nm { font-size:10px; color:#5a6f4a; }
.sheet .sign .role { font-size:8px; color:#9aa68d; }
.sheet .foot { display:flex; justify-content:space-between; align-items:center; font-size:7px; letter-spacing:.1em; color:#8d9a80; margin-top:30px; padding:18px 0; border-top:1px solid #e8eddf; }
.sheet .foot b { margin-left:4px; color:#54783b; font-size:15px; }
[data-inline] { border-radius:3px; overflow-wrap:anywhere; white-space:pre-wrap; }
[contenteditable] { cursor:text; outline:0; transition:background .12s,box-shadow .12s; }
[contenteditable]:hover { background:#eff6e4; box-shadow:0 0 0 3px #eff6e4; }
[contenteditable]:focus { background:#f2f9e5; box-shadow:0 0 0 2px #83ad53; color:#253a22; outline:0; }
[contenteditable]:empty { display:inline-block; min-width:35px; min-height:1em; }
[contenteditable]:empty::before { content:attr(data-placeholder); color:#8c9c7c; font-weight:400; pointer-events:none; font-style:italic; }
[contenteditable][aria-invalid=true] { box-shadow:0 0 0 2px #b84d44; }
.paper-editable [data-inline] { min-height:1em; }
.has-date-input { position:relative; }
.has-date-input>span { display:none; }
.inline-date { width:100%; padding:0; border:0; background:transparent; color:#526149; font-size:10px; cursor:pointer; }
.inline-date:hover,.inline-date:focus { background:#edf5df; outline:1px solid #93b773; border-radius:3px; }
.remove-line { position:absolute; top:26px; left:5px; padding:0; width:23px; height:23px; border-radius:4px; border:1px solid #e2b4ab; background:#fff7f4; color:#b35040; opacity:0; cursor:pointer; }
tr:hover .remove-line,.remove-line:focus-visible { opacity:1; }
.add-paper-line { display:block; width:100%; padding:12px; margin:9px 0 0; border:1px dashed #dce8ce; border-radius:5px; font-size:10px; color:#6c8b52; background:#f9fcf3; cursor:pointer; }
.add-paper-line:hover { background:#eff7df; border-color:#a4c67e; }
.paper-export { min-height:1123px!important; width:794px!important; border:0; }
.paper-export .inline-only { display:none!important; }
.paper-export [data-inline]:empty { display:none; }
.login { background:#eef1e7; display:grid; grid-template-columns:1.1fr 1fr; padding:0; }
.login::before { content:"Kerja hebat.\a Dokumen\a berkelas."; white-space:pre-line; align-self:stretch; display:flex; align-items:center; padding:80px; background:#233127; color:#baff63; font:500 clamp(40px,5vw,80px)/1.04 var(--display); letter-spacing:-.06em; }
.login form { justify-self:center; border:0; background:transparent; max-width:380px; padding:35px; gap:20px; }
.login h1 { font-size:36px; font-weight:500; letter-spacing:-.04em; }
.login .hint { color:#8d9880; }
.login label.f input { padding:13px; background:#fff; border-radius:7px; }
.login .btn { justify-content:center; padding:14px; }
@keyframes studio-enter { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:translateY(0); } }
.page,.stage { animation:studio-enter .35s ease-out both; }
@media screen and (min-width:901px) and (max-width:1200px) {
  .app { grid-template-columns:175px minmax(0,1fr); }
  .bar { padding:25px 15px; }
  .brand img { width:125px; }
  .ebar { padding:14px 20px; gap:7px; }
  .ebar .btn { padding:8px; }
  .editing-hint { display:none; }
  .page { padding:35px; }
}
@media screen and (max-width:900px) {
  .app { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); }
  .bar { padding:10px 15px; flex-direction:row; align-items:center; gap:12px; overflow-x:auto; }
  .brand { margin:0 8px 0 0; }
  .brand img { width:85px; }
  .workspace-label,.sidebar-note,.who,.bar .spacer { display:none; }
  .nav { flex-direction:row; gap:3px; }
  .nav a { padding:8px 10px; font-size:11px; gap:0; white-space:nowrap; }
  .nav-icon,.nav-arrow { display:none; }
  .bar #bLogout { margin:0 0 0 auto; font-size:10px; padding:6px; }
  .page { padding:28px 20px 55px; }
  .page h1 { font-size:34px; }
  .section-eyebrow { font-size:8px; margin-bottom:20px; }
  .page-description { font-size:12px; }
  .head { gap:20px; }
  .stats { gap:10px; }
  .stat { padding:17px; }
  .stat .n { font-size:29px; }
  .tbl td { padding:15px 9px; font-size:10px; }
  .tbl th { padding:12px 9px; font-size:8px; }
  .tbl .no { white-space:normal; overflow-wrap:anywhere; }
  .tbl .num { white-space:normal; }
  .tbl .sub { font-size:9px; }
  .pill { font-size:8px; padding:3px; }
  .ebar { padding:12px 15px; gap:9px; }
  .ebar .title { font-size:12px; }
  .ebar .spacer { flex-basis:auto; }
  .ebar .btn { padding:7px 9px; font-size:10px; }
  .ebar .saved { display:inline-block; margin-left:auto; font-size:8px; min-width:0; }
  .tabs { padding:9px 14px; gap:8px; }
  .tabs button { flex:none; padding:7px 8px; font-size:10px; }
  .editing-hint { display:none; }
  .view-switch { gap:0; }
  #bDetails { font-size:9px; padding:8px; }
  #bDetails span { margin-left:5px; }
  .ed-wrap[data-panel=open] .ed-main { grid-template-columns:minmax(0,1fr); }
  .ed-wrap[data-panel=open] .editor { display:block!important; position:absolute; right:0; top:0; bottom:0; z-index:10; width:min(350px,92vw); box-shadow:-12px 0 35px #1d2c2224; }
  .viewer { padding:16px 13px 35px; }
  .canvas-caption { font-size:6px; }
  .canvas-footer { font-size:8px; }
  .ed-wrap[data-view=edit] .sheet { width:100%; min-height:0; }
  .ed-wrap[data-view=edit] .sheet .pad { padding:25px 18px 0; }
  .ed-wrap[data-view=edit] .paper-topline { padding:10px 18px; font-size:5px; letter-spacing:.05em; }
  .ed-wrap[data-view=edit] .sheet .top { gap:10px; }
  .ed-wrap[data-view=edit] .sheet .iss { min-width:0; max-width:48%; }
  .ed-wrap[data-view=edit] .paper-logo { padding:8px; }
  .ed-wrap[data-view=edit] .sheet .paper-logo img { max-width:80px; }
  .ed-wrap[data-view=edit] .sheet .doc h1 { font-size:32px; }
  .ed-wrap[data-view=edit] .paper-eyebrow { font-size:5px; }
  .ed-wrap[data-view=edit] .sheet .doc .no { font-size:8px; }
  .ed-wrap[data-view=edit] .sheet .meta { grid-template-columns:1fr 1fr; gap:18px; }
  .ed-wrap[data-view=edit] .sheet .meta>div:first-child { grid-column:1 / -1; }
  .ed-wrap[data-view=edit] .sheet .v { font-size:12px; }
  .ed-wrap[data-view=edit] .sheet .sm { font-size:10px; }
  .ed-wrap[data-view=edit] .inline-date { font-size:12px; }
  .ed-wrap[data-view=edit] .sheet .subj { font-size:17px; }
  .ed-wrap[data-view=edit] .sheet .intro { font-size:11px; }
  .ed-wrap[data-view=edit] .line-items,.ed-wrap[data-view=edit] .line-items tbody { display:block; }
  .ed-wrap[data-view=edit] .line-items thead { display:none; }
  .ed-wrap[data-view=edit] .line-items tr { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:14px; border:1px solid #e3e9d9; border-radius:7px; margin-bottom:12px; background:#fcfdf9; }
  .ed-wrap[data-view=edit] .line-items td { border:0; padding:0; text-align:left; white-space:normal; font-size:12px; }
  .ed-wrap[data-view=edit] .line-items td.c { grid-column:1 / -1; padding-bottom:5px; color:#89a56e; font-size:9px; }
  .ed-wrap[data-view=edit] .line-items td:nth-child(2) { grid-column:1 / -1; }
  .ed-wrap[data-view=edit] .line-items .nm { font-size:14px; }
  .ed-wrap[data-view=edit] .line-items .ds { font-size:11px; }
  .ed-wrap[data-view=edit] .line-items .qty-cell::before { content:"QTY / SATUAN"; display:block; font-size:7px; color:#9aa88d; margin:7px 0; }
  .ed-wrap[data-view=edit] .line-items td:nth-child(4)::before { content:"HARGA SATUAN"; display:block; font-size:7px; color:#9aa88d; margin:7px 0; }
  .ed-wrap[data-view=edit] .line-items .line-total { grid-column:1 / -1; text-align:right; border-top:1px solid #e5ecd9; padding-top:10px; }
  .ed-wrap[data-view=edit] .remove-line { opacity:1; left:auto; right:0; top:-4px; }
  .ed-wrap[data-view=edit] .sheet .sum { display:flex; flex-direction:column-reverse; gap:20px; }
  .ed-wrap[data-view=edit] .sheet .tot { width:100%; font-size:12px; }
  .ed-wrap[data-view=edit] .sheet .words { font-size:10px; }
  .ed-wrap[data-view=edit] .paper-note { display:none; }
  .ed-wrap[data-view=edit] .sheet .cols { grid-template-columns:1fr; gap:24px; }
  .ed-wrap[data-view=edit] .sheet .pay,.ed-wrap[data-view=edit] .terms-text { font-size:11px; }
  .ed-wrap[data-view=edit] .sheet .sign { gap:25px; }
  .ed-wrap[data-view=edit] .sheet .foot { font-size:5px; }
  .invoice-card { grid-template-columns:1fr 1fr; font-size:11px; padding:18px; }
  .login { grid-template-columns:1fr; align-content:center; }
  .login::before { display:none; }
}
@media(prefers-reduced-motion:reduce) { .page,.stage { animation:none; } * { transition:none!important; } }
@media print {
  .bar,.tabs,.ebar,.canvas-caption,.canvas-footer,.editor,.inline-only { display:none!important; }
  .app,.content,.ed-wrap,.ed-main,.viewer { display:block!important; height:auto!important; overflow:visible!important; background:#fff; }
  .sheet { width:794px!important; border:0; }
  [contenteditable] { background:none!important; box-shadow:none!important; }
  [contenteditable]:empty::before { content:none; }
}