/* Disalin otomatis dari asli/SIMBARA.html oleh tools/ekstrak-login.py. Jangan diedit manual. */

/* Tata letak: rel navigasi berkelompok di kiri, lembar kerja di kanan. Tema putih; kedalaman dibangun dari lempeng bertepi dan bayangan berlapis, bukan warna latar. */
:root{
  color-scheme:light;
  --bg:#fbfdfc; --bg2:#eef4f1; --panel:#ffffff; --ink:#16241d; --muted:#5f6d66; --line:#dde4e0; --edge:#cfd8d3; --soft:#f1f5f3;
  --accent:#0f6b4c; --accent-d:#0a4a35; --accent-ink:#ffffff; --accent-soft:#e2f2ea; --calc:#f4f7f5;
  --ok:#1b7a4c; --warn:#a15c00; --warn-soft:#fdf1dc; --err:#b3261e; --err-soft:#fde7e5; --auto:#1f5f96;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-disp:"IBM Plex Sans Condensed","IBM Plex Sans",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --slab:10px 14px 28px rgba(118,146,134,.30),inset -7px -8px 14px rgba(118,146,134,.17),inset 7px 8px 14px rgba(255,255,255,.98);
  --slab-s:6px 8px 16px rgba(118,146,134,.26),inset -4px -5px 9px rgba(118,146,134,.15),inset 4px 5px 9px rgba(255,255,255,.98);
  --well:inset 3px 4px 8px rgba(118,146,134,.30),inset -3px -3px 7px rgba(255,255,255,.95);
  --puff:5px 7px 14px rgba(118,146,134,.34),inset -3px -4px 7px rgba(0,0,0,.13),inset 3px 4px 7px rgba(255,255,255,.6);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
nav>*{flex:none}
html,body{height:100%;margin:0}
body{background:radial-gradient(900px 500px at 85% -10%,#e3f1ff 0,transparent 60%),radial-gradient(700px 480px at -5% 100%,#fdeedd 0,transparent 60%),linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%) fixed;color:var(--ink);font:14px/1.45 var(--f-body);display:flex;flex-direction:column}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--f-disp);font-weight:600;margin:0;text-wrap:balance}
h1{font-size:23px} h2{font-size:17px} h3{font-size:14px;letter-spacing:.02em}
p{margin:0}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.top{display:flex;gap:10px;align-items:center;padding:10px 18px;background:var(--panel);border-bottom:1px solid var(--line);box-shadow:0 3px 0 var(--soft),0 8px 16px -10px rgba(18,40,30,.25);flex-wrap:wrap;position:relative;z-index:6}
.brand{font-family:var(--f-disp);font-weight:600;font-size:17px;margin-right:auto;display:flex;gap:10px;align-items:center}
.brand .logo{width:30px;height:30px;border-radius:9px;background:linear-gradient(160deg,#18906a,var(--accent-d));box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 3px 0 #073526,0 6px 10px -4px rgba(10,74,53,.6);display:grid;place-items:center;color:#fff;font-size:13px;letter-spacing:.02em}
.brand small{font-family:var(--f-body);font-weight:400;color:var(--muted);font-size:12px}
.wrap{flex:1;display:flex;min-height:0}
nav{width:282px;flex:none;overflow:auto;padding:14px 12px 30px;display:flex;flex-direction:column;gap:10px}
nav details,nav .grp{background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--slab-s);overflow:hidden}
nav summary{list-style:none;cursor:pointer;padding:8px 12px;font-family:var(--f-disp);font-weight:600;font-size:13px;display:flex;align-items:center;gap:8px;background:linear-gradient(180deg,#fff,var(--soft));border-bottom:1px solid transparent}
nav summary::-webkit-details-marker{display:none}
nav summary::after{content:"";margin-left:auto;width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(-45deg)}
nav details[open] summary{border-bottom-color:var(--line)} nav details[open] summary::after{transform:rotate(45deg)}
nav summary .cnt{font-family:var(--f-mono);font-weight:500;font-size:10.5px;padding:1px 6px;border-radius:999px;background:var(--soft);box-shadow:var(--well);color:var(--muted)}
nav summary .cnt.warn{background:var(--warn-soft);color:var(--warn)} nav summary .cnt.err{background:var(--err-soft);color:var(--err)} nav summary .cnt.ok{background:var(--accent-soft);color:var(--ok)}
nav .items{padding:5px;display:flex;flex-direction:column;gap:2px}
nav a{display:flex;gap:8px;align-items:center;padding:6px 8px;text-decoration:none;color:var(--ink);border-radius:8px;font-size:13px;border:1px solid transparent}
nav a>span:nth-child(2){min-width:0;overflow-wrap:anywhere}
nav a:hover{background:var(--soft)}
nav a.on{background:linear-gradient(180deg,#fff,var(--accent-soft));border-color:#b9dccb;box-shadow:0 2px 0 #b9dccb,0 4px 8px -4px rgba(15,107,76,.35);font-weight:600;color:var(--accent-d)}
nav a.dim{color:var(--muted)}
nav a .cd{font-family:var(--f-mono);font-size:10.5px;color:var(--muted);flex:none;width:36px;padding:1px 0;text-align:center;border-radius:5px;background:var(--soft);box-shadow:var(--well)}
nav a .dot{margin-left:auto;flex:none;width:9px;height:9px;border-radius:50%;background:var(--line);box-shadow:inset 0 -2px 2px rgba(0,0,0,.18),0 1px 0 #fff}
nav a .dot.ok{background:#2fa66c} nav a .dot.warn{background:#e09a1f} nav a .dot.err{background:#d6443b}
nav a .tag{margin-left:auto;font-size:10px;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 4px}
main{flex:1;min-width:0;overflow:auto;padding:18px 22px 70px}
.navsel{display:none}
@media (max-width:860px){ nav{display:none} .navsel{display:block;width:100%} main{padding:14px 16px 60px} }
.head{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:14px}
.head .sub{color:var(--muted);max-width:72ch}
.head .sp{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.btn{border:1px solid var(--edge);background:linear-gradient(180deg,#fff,#eef2f0);padding:6px 13px;border-radius:9px;cursor:pointer;white-space:nowrap;box-shadow:0 1px 0 #fff inset,0 3px 0 var(--edge),0 5px 8px -4px rgba(18,40,30,.25);text-decoration:none;color:var(--ink);display:inline-block;position:relative;top:0}
.btn:hover{border-color:#9db8ab}
.btn:active{top:3px;box-shadow:0 1px 0 #fff inset,0 0 0 var(--edge)}
.btn.pri{background:linear-gradient(180deg,#19916b,var(--accent));border-color:var(--accent-d);color:var(--accent-ink);font-weight:600;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 3px 0 #073526,0 7px 12px -5px rgba(10,74,53,.6)}
.btn.pri:active{box-shadow:0 1px 0 rgba(255,255,255,.35) inset}
.btn.ai{background:linear-gradient(180deg,#2f7fbf,#1f5f96);border-color:#174a76;color:#fff;font-weight:600;box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 3px 0 #123a5d,0 7px 12px -5px rgba(23,74,118,.6)}
.btn.sm{padding:4px 9px;font-size:12px;border-radius:7px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:15px 17px;box-shadow:var(--slab)}
.stack{display:flex;flex-direction:column;gap:16px}
.row{display:flex;gap:14px;flex-wrap:wrap}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr));gap:14px}
.tile{background:linear-gradient(180deg,#fff,#f6f9f7);border:1px solid var(--line);border-radius:14px;padding:11px 14px 12px;box-shadow:var(--slab)}
.tile .k{color:var(--muted);font-size:12px}
.tile .v{font-family:var(--f-disp);font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
.tile .d{font-size:12px;color:var(--muted)}
.tile.ok{border-color:#b9dccb;box-shadow:0 1px 0 #fff inset,0 3px 0 #a9d3bf,0 10px 22px -8px rgba(15,107,76,.3)}
.tile.warn{border-color:#ecd3a1;box-shadow:0 1px 0 #fff inset,0 3px 0 #e6c480,0 10px 22px -8px rgba(161,92,0,.28)}
.tile.err{border-color:#efb9b4;box-shadow:0 1px 0 #fff inset,0 3px 0 #e9a39d,0 10px 22px -8px rgba(179,38,30,.28)}
.note{border-left:4px solid var(--accent);background:var(--accent-soft);padding:9px 13px;border-radius:0 10px 10px 0;box-shadow:var(--well)}
.note.warn{border-color:var(--warn);background:var(--warn-soft)}
.note.err{border-color:var(--err);background:var(--err-soft)}
.pill{display:inline-block;padding:1px 9px;border-radius:999px;font-size:12px;font-weight:600;background:var(--soft);box-shadow:0 1px 0 #fff inset,0 1px 0 var(--edge);white-space:nowrap}
.pill.ok{background:var(--accent-soft);color:var(--ok)} .pill.warn{background:var(--warn-soft);color:var(--warn)} .pill.err{background:var(--err-soft);color:var(--err)}
.field{display:flex;flex-direction:column;gap:4px;min-width:200px;flex:1}
.field label,.lbl{font-size:12px;color:var(--muted);font-weight:500}
.field .hint{font-size:12px;color:var(--muted)}
input[type=text],select,textarea{border:1px solid var(--edge);background:#fff;border-radius:8px;padding:6px 9px;width:100%;box-shadow:var(--well)}
textarea{min-height:74px;resize:vertical;line-height:1.45}
.gridwrap{overflow:auto;border:1px solid var(--line);border-radius:14px;background:var(--panel);max-height:calc(100vh - 215px);box-shadow:var(--slab)}
table.grid{border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums;font-size:12.5px}
.grid th,.grid td{border-bottom:1px solid var(--soft);border-right:1px solid var(--soft);padding:0;white-space:nowrap}
.grid thead th{position:sticky;top:0;z-index:3;background:linear-gradient(180deg,#fff,#edf2ef);padding:7px 8px;text-align:right;font-weight:600;font-size:12px;border-bottom:1px solid var(--edge);box-shadow:0 2px 0 var(--soft)}
.grid thead th.act{color:var(--accent)}
.grid .c0{position:sticky;left:0;z-index:2;background:var(--panel);width:74px;min-width:74px;padding:4px 8px;font-family:var(--f-mono);font-size:11px;color:var(--muted);text-align:left}
.grid .c1{position:sticky;left:74px;z-index:2;background:var(--panel);min-width:290px;max-width:360px;white-space:normal;text-align:left;padding:3px 8px;border-right:1px solid var(--edge)}
.grid thead .c0,.grid thead .c1{z-index:4;text-align:left;background:linear-gradient(180deg,#fff,#edf2ef)}
.grid tr.sec td{background:var(--soft);font-family:var(--f-disp);font-weight:600;letter-spacing:.03em;padding:5px 8px}
.grid tr.sec td.c0,.grid tr.sec td.c1{background:var(--soft)}
.grid tr.tot td{font-weight:600}
.grid td.calc{background:var(--calc);text-align:right;padding:4px 8px;min-width:118px}
.grid td.off{background:var(--calc);color:var(--muted);text-align:center}
.grid td.neg{color:var(--err)}
.grid td input{border:0;border-radius:0;background:transparent;text-align:right;padding:4px 8px;width:118px;font-variant-numeric:tabular-nums;box-shadow:none}
.grid td input:focus{background:var(--accent-soft)}
.grid td input.auto{color:var(--auto);font-style:italic}
.grid td.txt input,.grid td.txt select{text-align:left;width:100%;min-width:150px;border:0;background:transparent;padding:4px 8px;box-shadow:none}
.grid td.txt{min-width:160px}
.grid .rowbtn{border:0;background:none;padding:0;text-align:left;cursor:pointer;color:inherit;width:100%}
.grid .rowbtn:hover{color:var(--accent);text-decoration:underline}
.grid tr.bal td{position:sticky;bottom:0;z-index:2;background:var(--panel);border-top:2px solid var(--edge);font-weight:600}
.grid tr.bal td.calc{background:var(--accent-soft);color:var(--ok)}
.grid tr.bal td.calc.bad{background:var(--err-soft);color:var(--err)}
.i1{padding-left:14px} .i2{padding-left:28px} .i3{padding-left:42px} .i4{padding-left:56px}
ul.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
ul.checks li{display:flex;gap:10px;align-items:baseline;padding:8px 11px;border:1px solid var(--line);border-radius:10px;background:var(--panel);border-left-width:5px;box-shadow:var(--slab-s)}
ul.checks li.ok{border-left-color:#2fa66c} ul.checks li.warn{border-left-color:#e09a1f} ul.checks li.err{border-left-color:#d6443b}
ul.checks li a{margin-left:auto;white-space:nowrap}
.board{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px;align-items:start}
.col{border-radius:14px;border:1px solid var(--line);background:var(--panel);box-shadow:var(--slab);overflow:hidden}
.col>header{display:flex;align-items:center;gap:8px;padding:10px 14px;font-family:var(--f-disp);font-weight:600;font-size:15px;border-bottom:1px solid var(--line)}
.col>header .n{margin-left:auto;font-family:var(--f-mono);font-size:12px;padding:1px 9px;border-radius:999px;background:#fff;box-shadow:var(--well)}
.col.ok>header{background:linear-gradient(180deg,#f2faf6,var(--accent-soft));color:var(--ok)}
.col.warn>header{background:linear-gradient(180deg,#fffaf0,var(--warn-soft));color:var(--warn)}
.col.err>header{background:linear-gradient(180deg,#fff6f5,var(--err-soft));color:var(--err)}
.col ul{list-style:none;margin:0;padding:8px;display:flex;flex-direction:column;gap:6px;max-height:330px;overflow:auto}
.col li{padding:7px 9px;border-radius:9px;background:var(--soft);box-shadow:var(--well);font-size:13px;display:flex;gap:8px;align-items:baseline}
.col li a{margin-left:auto;white-space:nowrap;font-size:12px}
.col li.none{color:var(--muted);background:none;box-shadow:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:flex;flex-direction:column;align-items:center;min-width:66px;padding:5px 8px 6px;border-radius:10px;border:1px solid #b9dccb;background:linear-gradient(180deg,#fff,var(--accent-soft));box-shadow:0 2px 0 #a9d3bf,0 5px 8px -5px rgba(15,107,76,.4);font-size:11px;color:var(--muted);text-decoration:none}
.chip b{font-size:12px;color:var(--ok);font-variant-numeric:tabular-nums}
.chip.bad{border-color:#efb9b4;background:linear-gradient(180deg,#fff,var(--err-soft));box-shadow:0 2px 0 #e9a39d,0 5px 8px -5px rgba(179,38,30,.4)} .chip.bad b{color:var(--err)}
table.rt{border-collapse:collapse;width:100%;font-variant-numeric:tabular-nums}
table.rt th,table.rt td{padding:6px 8px;border-bottom:1px solid var(--soft);text-align:right;white-space:nowrap}
table.rt th:first-child,table.rt td:first-child{text-align:left;white-space:normal}
table.rt th{font-size:12px;color:var(--muted);font-weight:600}
.rk{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;font-size:11px;font-weight:700;margin-left:6px;color:#fff;box-shadow:inset 0 -2px 0 rgba(0,0,0,.22)}
.rk.r1,.rk.r2{background:#2fa66c} .rk.r3{background:#e09a1f} .rk.r4,.rk.r5{background:#d6443b} .rk.r0{background:#b9c4be}
dialog{border:1px solid var(--line);border-radius:16px;background:var(--panel);color:var(--ink);padding:18px 20px;max-width:min(560px,92vw);width:100%;box-shadow:0 4px 0 var(--edge),0 30px 60px -20px rgba(18,40,30,.5)}
dialog::backdrop{background:rgba(22,36,29,.35)}
dialog .acts{display:flex;gap:8px;justify-content:flex-end;margin-top:14px}
.opts{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.opts label{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.opts input[type=text]{width:130px}
.log{font-family:var(--f-mono);font-size:12px;max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:9px 11px;background:var(--calc);white-space:pre-wrap;box-shadow:var(--well)}
.steps{counter-reset:s;display:flex;flex-direction:column;gap:14px}
.steps>.card{counter-increment:s;position:relative;padding-left:56px}
.steps>.card::before{content:counter(s);position:absolute;left:15px;top:14px;width:28px;height:28px;border-radius:9px;background:linear-gradient(160deg,#18906a,var(--accent-d));color:#fff;display:grid;place-items:center;font-weight:700;box-shadow:0 3px 0 #073526,0 6px 10px -4px rgba(10,74,53,.6)}
svg text{fill:var(--muted);font:11px var(--f-body)}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:9px 15px;border-radius:10px;z-index:20;max-width:90vw;box-shadow:0 10px 24px -8px rgba(0,0,0,.5)}
.muted{color:var(--muted)}
ol.plain{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:5px;max-width:78ch}

/* ---- claymorphism: bentuk membulat, lembut, mengembang ---- */
.card,.tile,.gridwrap,.col{border:0;border-radius:26px}
.tile{background:#fff}
.tile.ok{background:linear-gradient(160deg,#fff,#e6f6ee);box-shadow:var(--slab)} .tile.warn{background:linear-gradient(160deg,#fff,#fff0d9);box-shadow:var(--slab)} .tile.err{background:linear-gradient(160deg,#fff,#ffe6e3);box-shadow:var(--slab)}
.top{border:0;border-radius:0 0 26px 26px;box-shadow:0 10px 24px rgba(118,146,134,.25),inset 0 -6px 10px rgba(118,146,134,.10);margin:0 10px}
.brand .logo{border-radius:14px;width:36px;height:36px;box-shadow:var(--puff)}
nav{gap:14px;padding:16px 14px 34px}
nav details,nav .grp{border:0;border-radius:22px;box-shadow:var(--slab-s);background:#fff}
nav summary{background:none;padding:11px 14px 9px;border:0}
nav details[open] summary{border:0}
nav .items{padding:4px 8px 10px;gap:5px}
nav a{border-radius:15px;padding:6px 8px;border:0}
nav a:hover{background:var(--soft)}
nav a.on{background:linear-gradient(160deg,#fff,var(--g,#bfe6d2));border:0;box-shadow:var(--puff);color:var(--ink)}
nav a .cd,nav a .ic{flex:none;width:34px;height:26px;display:grid;place-items:center;border-radius:10px;background:var(--g,#bfe6d2);box-shadow:var(--puff);color:#24382f;font-family:var(--f-mono);font-size:10.5px;font-weight:500;padding:0}
nav a .ic{font-family:var(--f-disp);font-size:13px;font-weight:600;width:28px;height:28px;border-radius:50%}
nav a .dot{width:11px;height:11px;box-shadow:inset -2px -2px 3px rgba(0,0,0,.22),inset 2px 2px 3px rgba(255,255,255,.6),2px 3px 5px rgba(118,146,134,.4)}
nav summary .cnt{box-shadow:var(--well)}
.btn{border:0;border-radius:16px;background:#fff;box-shadow:var(--puff);padding:8px 15px}
.btn:hover{filter:brightness(1.03)}
.btn:active{top:0;transform:scale(.96);box-shadow:var(--well)}
.btn.pri{background:linear-gradient(160deg,#2cb486,#0f7a56);box-shadow:5px 7px 14px rgba(15,107,76,.42),inset -3px -4px 7px rgba(0,0,0,.2),inset 3px 4px 7px rgba(255,255,255,.4)}
.btn.pri:active,.btn.ai:active{box-shadow:inset 3px 4px 8px rgba(0,0,0,.3)}
.btn.ai{background:linear-gradient(160deg,#5aa6e6,#2468a8);border:0;box-shadow:5px 7px 14px rgba(36,104,168,.42),inset -3px -4px 7px rgba(0,0,0,.2),inset 3px 4px 7px rgba(255,255,255,.4)}
.btn.sm{border-radius:12px;padding:5px 11px}
.btn.big{font-size:16px;padding:14px 26px;border-radius:22px;font-family:var(--f-disp)}
input[type=text],select,textarea{border:0;border-radius:14px;box-shadow:var(--well);background:#fbfdfc;padding:8px 11px}
.grid td input,.grid td.txt input,.grid td.txt select{border-radius:0;box-shadow:none;background:transparent;padding:4px 8px}
.note{border:0;border-radius:18px;box-shadow:var(--well)}
.pill{box-shadow:var(--puff);padding:2px 10px}
ul.checks li{border:0;border-radius:18px;box-shadow:var(--slab-s)}
.col>header{border:0} .col li{border-radius:14px}
.chip{border:0;border-radius:16px;box-shadow:var(--puff);background:linear-gradient(160deg,#fff,#dff3e8)} .chip.bad{border:0;box-shadow:var(--puff);background:linear-gradient(160deg,#fff,#ffdcd8)}
.rk{border-radius:8px;box-shadow:var(--puff)}
dialog{border:0;border-radius:28px;box-shadow:20px 28px 60px rgba(60,90,78,.45),inset -8px -9px 16px rgba(118,146,134,.16),inset 8px 9px 16px #fff}
.steps>.card::before{border-radius:50%;box-shadow:var(--puff)}
.log{border:0;border-radius:16px}

.slogo{flex:none;filter:drop-shadow(4px 6px 8px rgba(15,107,76,.35))}
#blogo{height:34px;max-width:120px;object-fit:contain;border-radius:10px;background:#fff;box-shadow:var(--puff);padding:3px}
.per{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)} .per select{width:auto;padding:5px 9px}
input[type=password]{border:0;border-radius:14px;box-shadow:var(--well);background:#fbfdfc;padding:8px 11px;width:100%;font:inherit}
.grid td input.bad{background:var(--err-soft)}
#login{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;overflow:auto;background:radial-gradient(700px 500px at 80% 0,#d9ecff 0,transparent 60%),radial-gradient(700px 520px at 10% 100%,#ffe9d2 0,transparent 60%),linear-gradient(160deg,#f7fbf9,#e3f1ea)}
.lgcard{width:min(420px,100%);background:#fff;border-radius:34px;padding:30px 30px 24px;display:flex;flex-direction:column;gap:12px;align-items:stretch;text-align:center;box-shadow:18px 26px 50px rgba(90,125,110,.38),inset -9px -10px 18px rgba(118,146,134,.16),inset 9px 10px 18px #fff}
.lgcard .slogo{align-self:center}
.lgcard h1{font-size:34px;letter-spacing:.06em}
.lgsub{color:var(--muted);margin-top:-6px} .lgmode{font-weight:600;color:var(--accent)} .lgcard .field{text-align:left;min-width:0}
.lgerr{color:var(--err);min-height:1.2em;font-size:13px} .lgnote{font-size:11.5px;color:var(--muted)} #lg-reset{align-self:center}
.clogo{float:right;height:64px;max-width:150px;object-fit:contain;background:#fff;border-radius:12px;padding:5px;margin-left:12px}
.logobox{display:flex;gap:14px;align-items:center;flex-wrap:wrap} .logobox img{height:74px;max-width:190px;object-fit:contain;border-radius:16px;background:#fff;box-shadow:var(--slab-s);padding:6px}
.logobox .ph{height:74px;width:120px;border-radius:16px;box-shadow:var(--well);display:grid;place-items:center;color:var(--muted);font-size:12px}

.grid th.gro{color:var(--auto);background:linear-gradient(180deg,#fff,#e6f0fb)} .grid td.gro{background:#f3f8fe;min-width:96px;font-style:italic;color:#1f4f7a} .grid td.gro.neg{color:var(--err)}
.lgwrap{display:grid;grid-template-columns:minmax(320px,440px) 1fr;width:min(980px,100%);border-radius:38px;overflow:hidden;background:#fff;box-shadow:22px 30px 60px rgba(60,100,84,.42),inset -9px -10px 18px rgba(118,146,134,.14),inset 9px 10px 18px #fff}
.lgwrap .lgcard{width:auto;box-shadow:none;border-radius:0;padding:30px 34px 24px;gap:11px}
.lgart{position:relative;min-height:560px;background:#0b3a2a} .lgart .lion{position:absolute;inset:0;width:100%;height:100%}
.lgmods{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;text-align:left} .lgmods legend{font-size:12px;color:var(--muted);font-weight:500;margin-bottom:5px}
.lgmod{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:18px;box-shadow:var(--slab-s);cursor:pointer;background:#fff}
.lgmod:has(input:checked){background:linear-gradient(160deg,#fff,#cfeede);box-shadow:var(--puff),0 0 0 3px var(--accent)}
.lgmod input{margin-top:3px;accent-color:var(--accent)} .lgmod span{display:flex;flex-direction:column} .lgmod small{color:var(--muted);font-size:12px}
.lgrow{display:flex;gap:12px} .lgrow .field{flex:1;min-width:0}
#lg-sandi{font-family:var(--f-mono);font-size:18px;letter-spacing:.2em;text-align:center}
#lg-sandi::placeholder{letter-spacing:0;font-size:13px;font-family:var(--f-body)}
.lion text{fill:#fff;font-size:30px;font-family:var(--f-disp)} .lion text+text{fill:#d9f5e3;font-size:14px;font-family:var(--f-body)}
@media (max-width:760px){.lgwrap{grid-template-columns:1fr} .lgart{display:none}}
nav .gt{font-family:var(--f-disp);font-weight:600;font-size:13px;padding:10px 14px 2px}
.scopes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.scope{border-radius:22px;padding:14px 16px;background:#fff;box-shadow:var(--well);display:flex;flex-direction:column;gap:8px;opacity:.62}
.scope.on{opacity:1;background:linear-gradient(160deg,#fff,#cfeede);box-shadow:var(--puff),0 0 0 3px var(--accent)}
.scope ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:3px} .scope .pill{align-self:flex-start}
.stepsrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.step{display:flex;flex-direction:column;gap:5px;padding:11px 13px;border-radius:20px;background:#fff;box-shadow:var(--slab-s);text-decoration:none;color:var(--ink)}
.step span{font-size:12px;color:var(--muted)} .step .pill{align-self:flex-start;color:inherit}
.step.ok{background:linear-gradient(160deg,#fff,#e2f4ea)} .step.warn{background:linear-gradient(160deg,#fff,#fff0d9)} .step.err{background:linear-gradient(160deg,#fff,#ffe4e0)} .step.skip{opacity:.6}
.step.now{box-shadow:var(--puff),0 0 0 3px var(--accent)}

/* ---- nuansa syariah: pola geometri bintang delapan dan aksen emas ---- */
body{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%230f6b4c' stroke-width='1' opacity='.07'%3E%3Crect x='18' y='18' width='44' height='44'/%3E%3Crect x='18' y='18' width='44' height='44' transform='rotate(45 40 40)'/%3E%3Cpath d='M0 40h18M62 40h18M40 0v18M40 62v18'/%3E%3Ccircle cx='40' cy='40' r='9'/%3E%3C/g%3E%3C/svg%3E"),radial-gradient(900px 500px at 85% -10%,#e2f5ea 0,transparent 60%),radial-gradient(700px 480px at -5% 100%,#fbf1d6 0,transparent 60%),linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%) fixed}
.top{border-bottom:4px solid #e3c468}
#login{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%230f6b4c' stroke-width='1' opacity='.07'%3E%3Crect x='18' y='18' width='44' height='44'/%3E%3Crect x='18' y='18' width='44' height='44' transform='rotate(45 40 40)'/%3E%3Cpath d='M0 40h18M62 40h18M40 0v18M40 62v18'/%3E%3Ccircle cx='40' cy='40' r='9'/%3E%3C/g%3E%3C/svg%3E"),radial-gradient(700px 500px at 80% 0,#dcf3e6 0,transparent 60%),radial-gradient(700px 520px at 10% 100%,#fbefcf 0,transparent 60%),linear-gradient(160deg,#f7fbf9,#e3f1ea)}
.lgwrap{outline:3px solid #e3c468;outline-offset:-3px}
.btn.out{background:linear-gradient(160deg,#fff,#ffe1dc);color:#8a1f15;font-weight:600}
nav .exit{margin-top:4px}
/* ---- generate ---- */
table.hdr{border-collapse:separate;border-spacing:6px 0;width:100%;min-width:900px}
table.hdr th{background:linear-gradient(160deg,#a9c3f5,#7f9fe0);color:#12244d;font-family:var(--f-disp);font-size:13px;padding:8px 10px;border-radius:14px 14px 0 0;box-shadow:inset 3px 4px 6px rgba(255,255,255,.5),inset -3px -3px 6px rgba(0,0,0,.12);white-space:nowrap}
table.hdr td{padding:6px 0 0}
table.hdr td input,table.hdr td select{text-align:center;font-variant-numeric:tabular-nums;min-width:110px}
#g-nama{min-width:210px}
table.hdr td input[readonly]{background:var(--soft);color:var(--muted)}
.folder{display:flex;flex-direction:column;gap:2px}
.mono{font-family:var(--f-mono);font-size:12px}
.pbar{height:18px;border-radius:999px;background:#eef3f0;box-shadow:var(--well);overflow:hidden}
.pbar i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#34c38f,#3fa9f5,#a56bf0,#f59f3f);background-size:200% 100%;box-shadow:inset 0 3px 5px rgba(255,255,255,.55),inset 0 -3px 5px rgba(0,0,0,.18);transition:width .25s}
.mini{width:92px;height:11px;border-radius:999px;background:#eef3f0;box-shadow:var(--well);overflow:hidden}
.mini i{display:block;height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#3fa9f5,#a56bf0,#f59f3f)}
.mini.run i{width:60%} .mini.done i{width:100%;background:linear-gradient(90deg,#34c38f,#1b9a66)}
@media (prefers-reduced-motion:no-preference){.pbar i{animation:flow 1.6s linear infinite} .mini.run i{animation:slide .7s ease-in-out infinite alternate}}
@keyframes flow{to{background-position:-200% 0}} @keyframes slide{from{margin-left:0}to{margin-left:40%}}
table.gen{border-collapse:collapse;width:100%;font-size:13px}
table.gen th{position:sticky;top:0;background:linear-gradient(160deg,#f0796d,#d9483c);color:#fff;font-family:var(--f-disp);padding:9px 10px;text-align:left;white-space:nowrap;z-index:2}
table.gen.ref th{background:linear-gradient(160deg,#2cb486,#0f7a56)}
table.gen td{padding:6px 10px;border-bottom:1px solid var(--soft);vertical-align:middle}
table.gen td.nm{white-space:nowrap}
table.gen tr.done td{background:#f1faf5}
.ft{display:inline-block;padding:2px 9px;border-radius:9px;font-family:var(--f-mono);font-size:11px;font-weight:500;box-shadow:var(--puff)}
.ft.txt{background:#d7e7ff;color:#173b73} .ft.pdf{background:#ffd9d4;color:#8a1f15}
/* ---- template narasi dan sampul ---- */
.tplrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.tpl{border:0;text-align:left;cursor:pointer;border-radius:20px;padding:12px 14px;background:#fff;box-shadow:var(--slab-s);display:flex;flex-direction:column;gap:4px}
.tpl span{color:var(--muted);font-size:12.5px}
.tpl.on{background:linear-gradient(160deg,#fff,#cfeede);box-shadow:var(--puff),0 0 0 3px var(--accent)}
.swatches{display:flex;gap:12px;flex-wrap:wrap}
.sw{border:0;cursor:pointer;width:118px;height:86px;border-radius:18px;padding:0;position:relative;overflow:hidden;background:linear-gradient(180deg,var(--c) 0 46%,var(--c2) 46% 52%,#fff 52%);box-shadow:var(--puff)}
.sw span{position:absolute;left:8px;bottom:6px;font-size:11px;color:#33413a}
.sw.on{box-shadow:var(--puff),0 0 0 3px #fff,0 0 0 6px var(--c)}
/* ---- pratinjau laporan ---- */
.paper{background:#fff;border-radius:26px;box-shadow:var(--slab);padding:34px clamp(18px,5vw,64px);max-width:900px;margin:0 auto;font-size:13.5px;line-height:1.6}
.paper .cover{margin:-34px calc(-1*clamp(18px,5vw,64px)) 30px;border-radius:26px 26px 0 0;overflow:hidden;padding-bottom:26px;border-bottom:1px dashed var(--line)}
.paper .cover .band{background:var(--c);color:#fff;padding:44px clamp(18px,5vw,64px) 30px;border-bottom:10px solid var(--c2)}
.paper .cover .kick{font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:12px}
.paper .cover .ttl{font-family:var(--f-disp);font-weight:600;font-size:clamp(28px,5vw,42px);text-transform:uppercase;line-height:1.1;margin:8px 0}
.paper .cover .bank{font-family:var(--f-disp);font-weight:600;font-size:24px;text-transform:uppercase;color:var(--c);padding:26px clamp(18px,5vw,64px) 6px}
.paper .cover .ln,.paper .cover .ft{padding:0 clamp(18px,5vw,64px);color:#33413a}
.paper .cover .ft{margin-top:18px;font-weight:600;color:var(--c)}
.rh1{font-size:19px;border-left:6px solid;padding-left:12px;margin:34px 0 12px;padding-top:2px;padding-bottom:2px}
.rh2{font-size:15px;margin:18px 0 6px}
.rtitle{font-family:var(--f-disp);font-weight:600;font-size:18px;text-align:center;margin:30px 0 4px} .rsub{text-align:center;margin-bottom:14px}
.rp{margin:0 0 10px;text-align:justify;max-width:none}
.rp[contenteditable]{outline:1px dashed #c3cfc9;outline-offset:3px;border-radius:6px}
.rp[contenteditable]:focus{outline:2px solid var(--accent);background:#f6fbf8}
.rul{margin:0 0 10px;padding-left:20px}
.rcap{font-weight:600;font-size:12.5px;margin:12px 0 4px}
table.rtab{border-collapse:collapse;width:100%;font-size:11.5px;font-variant-numeric:tabular-nums;margin-bottom:12px}
table.rtab th{color:#fff;padding:5px 7px;text-align:left;font-weight:600}
table.rtab td{padding:4px 7px;border-bottom:1px solid #dfe6e2;white-space:pre-wrap}
table.rtab tr.b td{font-weight:600;background:#eef3f0}
.rtoc>div{display:flex;gap:6px;align-items:baseline;padding:2px 0} .rtoc .h1{font-weight:600;margin-top:5px} .rtoc .h2{padding-left:18px}
.rtoc i{flex:1;border-bottom:1px dotted #9aa7a0}
.rsign{display:grid;grid-template-columns:repeat(2,1fr);gap:10px 30px;margin:6px 0 18px;text-align:center}
.rsign .sl{height:56px;border-bottom:1px solid #333;margin:0 14% 5px}
@media (prefers-reduced-motion:no-preference){.btn{transition:transform .08s,box-shadow .08s} nav a{transition:background .12s}}