/* SIP Nikah — Sistem Informasi Pendaftaran Nikah */
:root{
  --g900:#053a28;--g800:#075234;--g700:#0a6a45;--g600:#0e8458;--g500:#12a06d;--g100:#dff3e8;--g50:#eefaf3;
  --bg:#f5f8f6;--card:#fff;--line:#e6ede9;--line2:#d5dfd9;--ink:#1c2a24;--muted:#6b7d74;--faint:#98a8a0;
  --blue:#2f7be5;--amber:#f59e0b;--teal:#10b3a0;--purple:#a83cf0;--pink:#e0489a;--red:#e04a4a;--redbg:#fdecec;
  --shadow:0 1px 2px rgba(10,50,35,.05),0 4px 14px rgba(10,50,35,.05);
  --f:'Plus Jakarta Sans','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --sbw:232px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--f);background:var(--bg);color:var(--ink);font-size:13.5px;line-height:1.5;-webkit-text-size-adjust:100%}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--g600)}
.hidden{display:none!important}
.ic{flex:none;vertical-align:middle}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.muted{color:var(--muted)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}
.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.col2{grid-column:span 2}.col3{grid-column:span 3}.colall{grid-column:1/-1}

/* ---------- LOGIN ---------- */
#login{position:fixed;inset:0;z-index:100;display:flex;background:#fff}
.lg-art{flex:1.15;position:relative;overflow:hidden;color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:34px 44px;background:
  radial-gradient(900px 500px at 15% 105%,rgba(18,160,109,.55),transparent 60%),
  radial-gradient(700px 500px at 100% 0,rgba(14,132,88,.55),transparent 55%),
  linear-gradient(160deg,#04301f,#06503a 55%,#0a6a55)}
.lg-art:before{content:"";position:absolute;inset:0;opacity:.18;background-image:
  linear-gradient(60deg,transparent 48%,#fff 48.5%,#fff 50%,transparent 50.5%),
  linear-gradient(-60deg,transparent 48%,#fff 48.5%,#fff 50%,transparent 50.5%);background-size:74px 128px;pointer-events:none}
.lg-art>*{position:relative}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:.14em;font-size:21px}
.brand .logo{width:38px;height:38px;flex:none}
.lg-art h2{font-size:34px;line-height:1.15;margin:0 0 12px;max-width:520px}
.lg-art p{margin:0 0 26px;max-width:520px;color:#cfe8dc;font-size:14.5px}
.lg-feats{display:flex;gap:28px;border-top:1px solid rgba(255,255,255,.16);padding-top:18px;flex-wrap:wrap}
.lg-feats b{display:block;font-size:11px;letter-spacing:.1em;color:#f6c75a}
.lg-feats span{font-size:12.5px;color:#d8efe3}
.lg-tag{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(246,199,90,.5);background:rgba(246,199,90,.1);color:#f6e2a8;border-radius:99px;padding:5px 13px;font-size:11px;letter-spacing:.09em;font-weight:700;margin-bottom:14px}
.lg-form{flex:.85;display:flex;align-items:center;justify-content:center;padding:30px;min-width:360px}
.lg-box{width:100%;max-width:380px}
.lg-box h1{font-size:23px;margin:0 0 4px}
.lg-box>p{margin:0 0 22px;color:var(--muted)}
.lg-box .foot{margin-top:60px;text-align:center;color:var(--faint);font-size:11px}
.demo-note{margin-top:14px;font-size:12px;background:#fff8e6;border:1px solid #f3dfa4;color:#7a5a05;border-radius:10px;padding:9px 12px}

/* ---------- FORM CONTROLS ---------- */
.fl{display:flex;flex-direction:column;gap:5px;min-width:0}
.fl>label,.lbl{font-size:12px;font-weight:700;color:#34463d}
.fl>label.req:after,.lbl.req:after{content:" *";color:var(--red)}
.fl .hint{font-size:11.5px;color:var(--muted)}
input[type=text],input[type=password],input[type=date],input[type=time],input[type=tel],input[type=email],input[type=number],input[type=search],input:not([type]),select,textarea{
  width:100%;background:#fff;border:1px solid var(--line2);border-radius:10px;padding:9px 12px;min-height:40px;outline:none;transition:border-color .15s,box-shadow .15s}
textarea{min-height:64px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--g500);box-shadow:0 0 0 3px rgba(18,160,109,.16)}
input::placeholder,textarea::placeholder{color:#a5b3ac}
input[readonly],textarea[readonly]{background:#f3f7f5;color:#335}
input:disabled,select:disabled,textarea:disabled{background:#f0f3f2;color:#8a9a92;cursor:not-allowed}
input.uc,textarea.uc{text-transform:uppercase}
.err{border-color:var(--red)!important;box-shadow:0 0 0 3px rgba(224,74,74,.14)!important}
.iwrap{position:relative}
.iwrap>.ic{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--faint);pointer-events:none}
.iwrap>input{padding-left:38px}
.chk{display:flex;gap:8px;align-items:center;font-size:12.5px;font-weight:600;cursor:pointer}
.chk input{width:17px;height:17px;accent-color:var(--g600)}

/* ---------- BUTTONS ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line2);background:#fff;border-radius:10px;padding:8px 15px;min-height:38px;font-weight:700;font-size:13px;color:#2b3b33;transition:.15s;white-space:nowrap;text-decoration:none}
.btn:hover{border-color:var(--g500);color:var(--g700)}
.btn.pri{background:var(--g600);border-color:var(--g600);color:#fff}
.btn.pri:hover{background:var(--g700);border-color:var(--g700);color:#fff}
.btn.sec{background:var(--g50);border-color:#bfe5d0;color:var(--g700)}
.btn.dng{color:var(--red);border-color:#f0c5c5}
.btn.dng:hover{background:var(--red);color:#fff;border-color:var(--red)}
.btn.vio{background:#8d3de0;border-color:#8d3de0;color:#fff}
.btn.sm{min-height:32px;padding:4px 11px;font-size:12px;border-radius:8px}
.btn.lg{min-height:46px;font-size:14.5px;width:100%}
.btn:disabled{opacity:.55;cursor:not-allowed}
.ibtn{width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid var(--line2);background:#fff;color:#4b5d54;transition:.15s;padding:0}
.ibtn:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,.08)}
.ibtn.ed{color:var(--blue)}.ibtn.pr{color:var(--g600)}.ibtn.dl{color:var(--red)}.ibtn.vf{color:#0b8f5f}.ibtn.nt{color:var(--amber)}

/* ---------- SHELL ---------- */
#app{display:flex;height:100vh;padding:10px;gap:12px}
aside.sb{width:var(--sbw);flex:none;background:linear-gradient(180deg,var(--g800),var(--g900));border-radius:18px;color:#d6ece0;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 8px 24px rgba(5,58,40,.25);transition:width .2s}
.sb-head{display:flex;align-items:center;gap:10px;padding:16px 16px 14px;color:#fff;font-weight:800;font-size:19px;letter-spacing:.02em}
.sb-head .logo{width:30px;height:30px;flex:none}
.sb-nav{flex:1;overflow-y:auto;padding:4px 10px 10px}
.sb-grp{font-size:10.5px;font-weight:800;letter-spacing:.12em;color:#7fb39b;padding:14px 10px 6px}
.sb-item{display:flex;align-items:center;gap:11px;width:100%;border:0;background:none;color:#d6ece0;padding:9px 12px;border-radius:10px;font-weight:600;font-size:13px;text-align:left;position:relative;text-decoration:none;margin-bottom:1px}
.sb-item:hover{background:rgba(255,255,255,.07);color:#fff}
.sb-item.on{background:rgba(255,255,255,.1);color:#fff}
.sb-item.on:after{content:"";position:absolute;right:-10px;top:6px;bottom:6px;width:4px;border-radius:4px 0 0 4px;background:#f6c75a}
.sb-item .bdg{margin-left:auto;background:#f6c75a;color:#4a3500;border-radius:99px;font-size:10.5px;font-weight:800;padding:1px 7px}
.sb-foot{padding:10px;border-top:1px solid rgba(255,255,255,.08)}
.sb-collapse{width:34px;height:34px;border-radius:9px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 8px}
.sb-copy{text-align:center;font-size:10px;color:#6fa28a;letter-spacing:.03em}
body.sbmini{--sbw:68px}
body.sbmini .sb-head span,body.sbmini .sb-item span,body.sbmini .sb-grp,body.sbmini .sb-item .bdg,body.sbmini .sb-copy{display:none}
body.sbmini .sb-item{justify-content:center;padding:11px}
body.sbmini .sb-collapse .ic{transform:rotate(180deg)}
.main{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
.topbar{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px 14px;box-shadow:var(--shadow);flex:none}
.top-chip{background:var(--g100);color:var(--g700);font-weight:800;font-size:11px;letter-spacing:.08em;border-radius:8px;padding:6px 12px}
.top-year{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);font-weight:600}
.top-year select{width:auto;min-height:30px;padding:3px 8px;background:var(--g50);border-color:#bfe5d0;color:var(--g700);font-weight:800}
.userchip{display:flex;align-items:center;gap:9px;background:var(--g900);color:#fff;border-radius:11px;padding:5px 13px 5px 6px;border:0;font-weight:700;font-size:12.5px}
.userchip .av{width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;overflow:hidden}
.userchip .av img{width:100%;height:100%;object-fit:cover}
.userchip small{display:block;font-weight:600;font-size:10px;color:#9fd2b9;line-height:1.1}
#menuBtn{display:none}
.content{flex:1;overflow-y:auto;padding:2px 4px 24px 2px}
.page{max-width:1500px;margin:0 auto}
.phead{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.phead .pico{width:42px;height:42px;border-radius:12px;background:var(--g100);color:var(--g600);display:flex;align-items:center;justify-content:center;flex:none}
.phead h1{font-size:19px;margin:0;line-height:1.2}
.phead p{margin:0;color:var(--muted);font-size:12.5px}

/* ---------- CARDS ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.card.p{padding:16px}
.card h3{margin:0 0 3px;font-size:14.5px}
.card .sub{color:var(--muted);font-size:12px;margin-bottom:10px}
.chead{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line)}
.chead h3{margin:0;font-size:14px}
.chead .ci{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:var(--g100);color:var(--g600)}
.banner{border-radius:16px;color:#fff;padding:22px 26px;position:relative;overflow:hidden;background:linear-gradient(120deg,#0a8a5c,#13a06e 60%,#27b383);min-height:132px;box-shadow:0 8px 20px rgba(14,132,88,.25)}
.banner h2{margin:0 0 6px;font-size:21px}
.banner p{margin:0 0 12px;max-width:520px;color:#e2f8ec;font-size:13px}
.banner .today{display:inline-block;background:rgba(0,0,0,.2);border-radius:8px;padding:4px 11px;font-size:11.5px;font-weight:700}
.banner .art{position:absolute;right:20px;bottom:-14px;width:200px;opacity:.95}
.agenda{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:9px 14px;margin-bottom:12px;font-size:12.5px;box-shadow:var(--shadow)}
.agenda .tag{background:var(--redbg);color:var(--red);font-weight:800;font-size:10.5px;letter-spacing:.06em;border-radius:7px;padding:4px 9px;display:inline-flex;align-items:center;gap:5px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stat{background:#fff;border:1px solid var(--line);border-left:4px solid var(--c,var(--g500));border-radius:14px;padding:14px 16px;box-shadow:var(--shadow);position:relative;overflow:hidden;cursor:pointer;transition:.15s}
.stat:hover{transform:translateY(-2px)}
.stat .si{width:38px;height:38px;border-radius:11px;background:color-mix(in srgb,var(--c) 14%,#fff);color:var(--c);display:flex;align-items:center;justify-content:center}
.stat .n{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:34px;font-weight:800}
.stat b{display:block;margin-top:12px;font-size:11.5px;letter-spacing:.06em;color:#364a40}
.stat small{color:var(--muted);font-size:11px}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:12px;margin-top:12px}
.cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:12px}
.cal{overflow:hidden}
.cal-h{display:flex;align-items:center;gap:8px;color:#fff;padding:12px 14px;background:linear-gradient(120deg,#a43cf0,#d255e8);font-weight:800}
.cal-h .t{flex:1}
.cal-h button{width:26px;height:26px;border-radius:7px;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.15);color:#fff;display:flex;align-items:center;justify-content:center;padding:0}
.cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;padding:10px 12px 12px;text-align:center}
.cal-w{font-size:9.5px;font-weight:800;color:var(--faint);letter-spacing:.06em;padding:2px 0 4px}
.cal-d{aspect-ratio:1/.92;display:flex;align-items:center;justify-content:center;border-radius:9px;font-weight:600;font-size:12px;position:relative;border:0;background:none;color:var(--ink);padding:0}
.cal-d.off{color:var(--red)}
.cal-d.hol{background:var(--redbg);color:var(--red);font-weight:800}
.cal-d.has{background:#ffe9ef;color:#c4235f;font-weight:800}
.cal-d.has:after{content:"";position:absolute;bottom:3px;width:4px;height:4px;border-radius:50%;background:currentColor}
.cal-d.today{background:var(--g700);color:#fff;font-weight:800}
.cal-d.sel{outline:2px solid var(--purple)}
.cal-d.blank{pointer-events:none}
.cal-leg{font-size:11px;color:var(--muted);padding:0 14px 12px;display:flex;gap:12px;flex-wrap:wrap}
.cal-leg i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.jd{display:flex;gap:11px;align-items:center;padding:10px 12px;border-radius:11px;background:#faf6ff;border:1px solid #efe4fb;margin-bottom:8px}
.jd .heart{width:30px;height:30px;border-radius:50%;background:#fff;border:1px solid #e5d5f6;display:flex;align-items:center;justify-content:center;color:#7a4ba8;flex:none}
.jd b{display:block;font-size:12.5px;line-height:1.3}
.jd small{color:var(--muted);font-size:11.5px}
.jd .when{margin-left:auto;font-size:10px;font-weight:800;background:#dbf5e7;color:#0a7a4f;padding:3px 8px;border-radius:7px;white-space:nowrap}
.jd .when.soon{background:#ffe9d6;color:#b25a00}
.purple-h{background:linear-gradient(120deg,#a43cf0,#d255e8);color:#fff;border-radius:14px 14px 0 0;padding:12px 16px;font-weight:800;font-size:12.5px;letter-spacing:.05em;display:flex;align-items:center;gap:8px}
.todo{display:flex;gap:10px;align-items:center;padding:9px 12px;border-radius:10px;background:#fffaf0;border:1px solid #f6e5bd;margin-bottom:7px;font-size:12.5px}
.todo.red{background:var(--redbg);border-color:#f3c4c4}
.todo b{font-weight:800}
.todo .go{margin-left:auto}
.leg{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:#41544a;justify-content:center;margin-top:6px}
.leg i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px}
.chart-box{width:100%}
.chart-box svg{width:100%;height:auto;display:block}
.bars{display:flex;flex-direction:column;gap:7px}
.bar-r{display:grid;grid-template-columns:110px 1fr 28px;gap:8px;align-items:center;font-size:12px}
.bar-r .bt{height:9px;border-radius:9px;background:#eaf1ed;overflow:hidden}
.bar-r .bt i{display:block;height:100%;background:linear-gradient(90deg,var(--g500),#52c79a);border-radius:9px}

/* ---------- TABLES ---------- */
.tw{overflow-x:auto}
table.t{width:100%;border-collapse:collapse;font-size:12.5px}
table.t th{background:#f6f9f7;color:#40554a;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
table.t td{padding:10px 12px;border-bottom:1px solid #eef3f0;vertical-align:middle}
table.t tr:hover td{background:#fafdfb}
table.t td.tgl{background:#fffbe3}
.ppl{display:flex;gap:9px;align-items:center;min-width:170px}
.ppl .ph{width:36px;height:36px;border-radius:9px;background:var(--g50);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--faint);overflow:hidden;flex:none}
.ppl .ph.f{background:#fdeef6;color:#d98bb5}
.ppl .ph img{width:100%;height:100%;object-fit:cover}
.ppl b{display:block;line-height:1.25;font-size:12.5px}
.ppl small{color:var(--muted);font-size:11px;display:block}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;border-radius:6px;padding:2px 8px;white-space:nowrap}
.c-g{background:#dff3e8;color:#0a7a4f}.c-b{background:#e1edff;color:#1f5fc4}.c-p{background:#fde6f1;color:#c2307c}.c-a{background:#fff0d3;color:#a76200}.c-r{background:var(--redbg);color:#c23a3a}.c-n{background:#eceff0;color:#53635b}.c-v{background:#efe3fc;color:#7a2fc4}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;background:var(--red)}
.dot.g{background:#9aa9a1}
.tfoot{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);flex-wrap:wrap}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;padding:12px 14px}
.filters .fl{min-width:130px}
.filters .fl.grow{flex:1;min-width:180px}
.empty{padding:40px 16px;text-align:center;color:var(--muted)}
.empty .ic{color:var(--line2);margin-bottom:8px}

/* ---------- STEPPER / FORM ---------- */
.stepper{display:flex;align-items:flex-start;gap:0;padding:6px 6px 0;overflow-x:auto}
.stp{flex:1;min-width:92px;display:flex;flex-direction:column;align-items:center;position:relative;border:0;background:none;padding:0 2px;gap:6px}
.stp:before{content:"";position:absolute;top:15px;left:-50%;right:50%;height:2px;background:var(--line2);z-index:0}
.stp:first-child:before{display:none}
.stp.done:before,.stp.on:before{background:var(--g500)}
.stp .no{width:32px;height:32px;border-radius:50%;border:2px solid var(--line2);background:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12.5px;z-index:1;color:#6f8179}
.stp.on .no{border-color:var(--g600);color:var(--g600);box-shadow:0 0 0 4px rgba(18,160,109,.15)}
.stp.done .no{background:var(--g600);border-color:var(--g600);color:#fff}
.stp.bad .no{border-color:var(--red);color:var(--red)}
.stp span{font-size:9.5px;font-weight:800;letter-spacing:.06em;color:#7b8c84;text-align:center}
.stp.on span{color:var(--g700)}
.fpanel{padding:20px 24px}
.fpanel h3{font-size:15px;margin:0 0 14px}
.fnav{display:flex;justify-content:space-between;gap:10px;padding:14px 24px;border-top:1px solid var(--line);margin-top:6px}
.alert{border-radius:11px;padding:10px 14px;font-size:12.5px;display:flex;gap:10px;align-items:flex-start;margin-bottom:10px;border:1px solid}
.alert .ic{margin-top:2px}
.a-w{background:#fff8e6;border-color:#f3dfa4;color:#7a5a05}
.a-e{background:var(--redbg);border-color:#f2c0c0;color:#a73030}
.a-i{background:#eaf3ff;border-color:#c7dcf7;color:#245aa5}
.a-ok{background:#e8f7ef;border-color:#bfe5d0;color:#0a6a45}
.sect{border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:14px;background:#fcfdfc}
.sect>h4{margin:0 0 10px;font-size:12.5px;color:#2c4a3b}
.photo-up{display:flex;gap:12px;align-items:center}
.photo-up .pv{width:70px;height:92px;border-radius:9px;border:1px dashed var(--line2);background:#f7faf8;display:flex;align-items:center;justify-content:center;color:var(--faint);overflow:hidden;flex:none}
.photo-up .pv img{width:100%;height:100%;object-fit:cover}

/* ---------- CETAK ---------- */
.cetak{display:grid;grid-template-columns:340px minmax(0,1fr);gap:14px}
.pcat{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pc{border:1px solid var(--line);border-radius:12px;padding:10px;text-align:center;background:#f9fcfa}
.pc.f{background:#fff7fb}
.pc .im{width:86px;height:112px;border-radius:9px;margin:0 auto 8px;background:#eef3f0;display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--faint)}
.pc .im img{width:100%;height:100%;object-fit:cover}
.pc .rl{font-size:8.5px;font-weight:800;letter-spacing:.07em;border-radius:99px;padding:2px 9px;display:inline-block;margin-bottom:5px;color:#fff;background:#3b82f6}
.pc.f .rl{background:#e0489a}
.pc b{display:block;font-size:12px;line-height:1.3}
.pc small{color:var(--muted);font-size:10.5px;display:block}
.docs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.dtile{display:flex;gap:10px;align-items:center;text-align:left;border:1px solid var(--line);background:#fff;border-radius:11px;padding:9px 11px;position:relative;transition:.15s;min-height:50px}
.dtile:hover{border-color:var(--g500);box-shadow:0 4px 12px rgba(18,160,109,.12);transform:translateY(-1px)}
.dtile .di{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;flex:none;background:var(--c,#6366f1)}
.dtile b{display:block;font-size:12.5px;line-height:1.2}
.dtile small{display:block;font-size:10px;color:var(--muted);line-height:1.25}
.dtile.sel{border-color:var(--g600);background:var(--g50)}
.dtile .rq{position:absolute;top:-7px;right:8px;background:#f59e0b;color:#fff;font-size:8.5px;font-weight:800;letter-spacing:.05em;padding:1px 7px;border-radius:99px}
.dtile .ck{position:absolute;top:7px;right:7px}
.dtile .ck input{width:15px;height:15px;accent-color:var(--g600)}

/* ---------- VIEWER ---------- */
#viewer{position:fixed;inset:0;z-index:300;background:#0f1b2a;display:flex;flex-direction:column}
.v-bar{display:flex;align-items:center;gap:10px;padding:10px 16px;color:#fff;background:#0b1522;border-bottom:1px solid rgba(255,255,255,.08)}
.v-bar .ttl{flex:1;min-width:0;font-size:12px;color:#aab8c8}
.v-bar .ttl b{display:block;color:#fff;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-bar .vb{border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.07);color:#fff;border-radius:9px;padding:6px 13px;font-weight:700;font-size:12.5px;display:inline-flex;gap:6px;align-items:center}
.v-bar .vb:hover{background:rgba(255,255,255,.16)}
.v-bar .vb.go{background:#14a46f;border-color:#14a46f}
.v-bar .vb:disabled{opacity:.35;cursor:default}
.v-body{flex:1;overflow:auto;padding:22px 10px 40px;display:flex;justify-content:center}
.v-paper{background:#fff;width:210mm;max-width:100%;min-height:297mm;box-shadow:0 10px 40px rgba(0,0,0,.5);padding:0}

/* ---------- DOKUMEN (kertas) ---------- */
.doc{font-family:'Times New Roman',Times,serif;color:#000;font-size:12pt;line-height:1.35;padding:18mm 20mm}
.doc *{box-sizing:border-box}
.doc .kop{text-align:center;border-bottom:3px double #000;padding-bottom:6px;margin-bottom:12px;line-height:1.25}
.doc .kop .k1{font-size:13pt;font-weight:700;text-transform:uppercase}
.doc .kop .k2{font-size:12pt;font-weight:700;text-transform:uppercase}
.doc .kop .k3{font-size:10pt}
.doc h1,.doc .jdl{font-size:12.5pt;text-align:center;text-decoration:underline;font-weight:700;margin:10px 0 2px;text-transform:uppercase}
.doc .nomor{text-align:center;margin:0 0 10px}
.doc p{margin:0 0 7px;text-align:justify}
.doc table.kv{border-collapse:collapse;width:100%;margin:3px 0 7px}
.doc table.kv td{vertical-align:top;padding:1.5px 3px}
.doc table.kv td.n{width:22px}
.doc table.kv td.k{width:41%}
.doc table.kv td.s{width:12px}
.doc table.bd{border-collapse:collapse;width:100%}
.doc table.bd td,.doc table.bd th{border:1px solid #000;padding:4px 6px;vertical-align:top}
.doc .ttd{display:flex;justify-content:flex-end;margin-top:16px;page-break-inside:avoid}
.doc .ttd.two{justify-content:space-between}
.doc .ttd>div{width:46%;text-align:center}
.doc .ttd .sp{height:64px}
.doc .right{text-align:right}.doc .center{text-align:center}
.doc .pb{page-break-after:always}
.doc ol,.doc ul{margin:2px 0 7px;padding-left:22px}
.doc .box{border:1px solid #000;padding:6px 9px;margin:6px 0}
.doc .small{font-size:10pt}

/* ---------- LAPORAN ---------- */
table.rep{width:100%;border-collapse:collapse;font-size:11.5px}
table.rep th{background:#f6f9f7;font-size:10px;letter-spacing:.05em;text-transform:uppercase;padding:9px 8px;border:1px solid var(--line);text-align:center}
table.rep td{border:1px solid var(--line);padding:9px 10px;vertical-align:top}
table.rep .nm{font-weight:800;text-transform:uppercase;font-size:11.5px}
table.rep .nk{font-family:ui-monospace,monospace;color:#8a9a92;font-size:10.5px}
table.rep .vt{writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;font-family:ui-monospace,monospace;font-size:10.5px;white-space:nowrap;margin:0 auto}
table.rep .pf{width:54px;height:72px;border-radius:5px;background:#eef3f0;object-fit:cover;display:block;margin:0 auto}
table.rep .sm{font-size:10.5px;color:#4a5d53}

/* ---------- MODAL & TOAST ---------- */
#modalRoot .ov{position:fixed;inset:0;background:rgba(10,25,18,.5);z-index:200;display:flex;align-items:center;justify-content:center;padding:16px;animation:fade .15s}
#modalRoot .mb{background:#fff;border-radius:16px;width:100%;max-width:560px;max-height:92vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:up .18s}
#modalRoot .mb.wide{max-width:900px}
#modalRoot .mh{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
#modalRoot .mh h3{margin:0;font-size:15px;flex:1}
#modalRoot .mc{padding:16px 18px;overflow-y:auto}
#modalRoot .mf{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
@keyframes fade{from{opacity:0}}@keyframes up{from{transform:translateY(14px);opacity:.5}}
#toasts{position:fixed;right:16px;top:16px;z-index:500;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:#17382b;color:#fff;border-radius:11px;padding:10px 16px;font-weight:600;font-size:12.5px;box-shadow:0 8px 24px rgba(0,0,0,.25);animation:up .2s;max-width:340px;display:flex;gap:9px;align-items:center}
.toast.err{background:#b03030}.toast.warn{background:#a76200}
#loading{position:fixed;inset:0;z-index:450;background:rgba(255,255,255,.65);display:flex;align-items:center;justify-content:center}
.spin{width:38px;height:38px;border-radius:50%;border:4px solid var(--g100);border-top-color:var(--g600);animation:rot .7s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.tab{border:1px solid var(--line2);background:#fff;border-radius:10px;padding:7px 14px;font-weight:700;font-size:12.5px;color:#41544a}
.tab.on{background:var(--g600);border-color:var(--g600);color:#fff}
.kvl{display:grid;grid-template-columns:150px 1fr;gap:6px 12px;font-size:12.5px}
.kvl dt{color:var(--muted)}.kvl dd{margin:0;font-weight:600}
.pill-info{display:inline-block;background:var(--g50);border:1px solid #cfe9db;border-radius:99px;padding:2px 10px;font-size:11px;font-weight:700;color:var(--g700)}
.tpl-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:12px}
.tpl-list{max-height:70vh;overflow:auto}
.tpl-it{display:block;width:100%;text-align:left;border:0;background:none;padding:9px 12px;border-bottom:1px solid #eef3f0;font-size:12.5px}
.tpl-it.on{background:var(--g50);font-weight:800}
.tokbox{display:flex;flex-wrap:wrap;gap:4px;max-height:120px;overflow:auto;padding:6px;border:1px solid var(--line);border-radius:9px;background:#fafcfb}
.tok{font:600 10.5px ui-monospace,monospace;border:1px solid var(--line2);background:#fff;border-radius:6px;padding:2px 6px;cursor:pointer}
.tok:hover{background:var(--g50);border-color:var(--g500)}
textarea.code{font:12px/1.45 ui-monospace,Menlo,Consolas,monospace;min-height:340px;white-space:pre;tab-size:2}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1180px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .cols{grid-template-columns:1fr}
  .cetak{grid-template-columns:1fr}
  .docs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  #app{padding:0;gap:0;height:100dvh}
  aside.sb{position:fixed;left:0;top:0;bottom:0;z-index:120;border-radius:0 18px 18px 0;transform:translateX(-105%);transition:transform .22s;width:260px}
  body.sbopen aside.sb{transform:none}
  body.sbopen:after{content:"";position:fixed;inset:0;background:rgba(5,30,20,.5);z-index:110}
  body.sbmini{--sbw:232px}
  body.sbmini .sb-head span,body.sbmini .sb-item span,body.sbmini .sb-grp,body.sbmini .sb-copy{display:revert}
  #menuBtn{display:inline-flex}
  .sb-collapse{display:none}
  .main{gap:8px;padding:8px}
  .top-chip,.top-year small{display:none}
  .userchip small{display:none}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .col2,.col3{grid-column:auto}
  .cols2{grid-template-columns:1fr}
  .stats{gap:8px}
  .stat{padding:11px 12px}
  .stat .n{font-size:26px;right:12px}
  .banner{padding:16px}
  .banner .art{display:none}
  .fpanel{padding:14px}.fnav{padding:12px 14px}
  .docs{grid-template-columns:1fr}
  .lg-art{display:none}.lg-form{min-width:0}
  .tpl-grid{grid-template-columns:1fr}
  .kvl{grid-template-columns:110px 1fr}
  .stp{min-width:70px}
}

/* ---------- CETAK (browser) ---------- */
@page{size:A4;margin:0}
@media print{
  body{background:#fff}
  #app,#login,#modalRoot,#toasts,#loading{display:none!important}
  #viewer{position:static;background:#fff;display:block}
  .v-bar{display:none}
  .v-body{padding:0;display:block}
  .v-paper{box-shadow:none;width:auto;min-height:0}
}

/* ---------- tambahan viewer multi-halaman ---------- */
.v-stack{display:flex;flex-direction:column;gap:18px;align-items:center;width:100%}
.doc .dots{color:#555;letter-spacing:.5px}
.v-paper.f4{width:215mm;min-height:330mm}
@media print{
  .v-stack{display:block}
  .v-paper{break-after:page;page-break-after:always;min-height:0!important;width:auto!important}
  .v-paper:last-child{break-after:auto;page-break-after:auto}
  .doc{padding:0}
}
.dtile{padding-right:30px}

/* ---------- perbaikan responsif ---------- */
.formcols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:12px}
.userchip{white-space:nowrap}
@media(max-width:1180px){.formcols{grid-template-columns:minmax(0,1fr)}#side{position:static!important}}
@media(max-width:860px){
  .userchip span:last-child{display:none}.userchip{padding:5px}
  .stat .n{font-size:26px;right:12px;top:14px;transform:none}
  .fpanel{padding:14px}.fnav{padding:12px 14px}
  .grid.g2{grid-template-columns:minmax(0,1fr)}.col2{grid-column:auto}
  .phead h1{font-size:17px}
}
@media(max-width:860px){
  table.t.resp,table.t.resp tbody{display:block}
  table.t.resp thead{display:none}
  table.t.resp tr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:11px 12px;border-bottom:1px solid #eef3f0}
  table.t.resp td{border:0!important;padding:0!important;background:none!important}
  table.t.resp td.tgl{background:#fffbe3!important;padding:3px 8px!important;border-radius:8px}
  table.t.resp td:nth-child(2){order:-1;flex:1 0 100%}
  table.t.resp td:last-child{flex:1 0 100%}
}