*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#E6E1D6;color:#22211D;font-family:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
a{color:#1E3A8A}
button{font:inherit}
.desk{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.top{width:100%;max-width:520px;margin:0 auto;padding:14px 20px 10px;display:flex;align-items:center;gap:10px}
.logo{width:28px;height:28px;border-radius:8px;background:#22211D;color:#F2C230;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.brand{font-weight:500;font-size:18px;letter-spacing:-.02em;flex-grow:1}
.brand b{font-weight:800}
.route{font-family:'Courier Prime',monospace;font-weight:700;font-size:12px;color:#4A463C;background:#F6F2E9;border:1px solid #D3CBB9;padding:4px 9px;border-radius:7px;white-space:nowrap}
.folder{width:100%;max-width:520px;margin:0 auto;padding:0 12px 18px;flex-grow:1;display:flex;flex-direction:column}

/* Pembatas map: warnanya sama dengan emoji di pesan WA */
.tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:0 12px}
.tab{appearance:none;position:relative;border:0;border-radius:10px 10px 0 0;height:48px;padding:8px 4px 0;font-size:12.5px;font-weight:800;line-height:1.15;display:flex;flex-direction:column;align-items:center;transform:translateY(9px);transition:transform .18s ease;cursor:pointer;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.tab .tk{position:absolute;top:-7px;right:-3px;width:18px;height:18px;border-radius:99px;background:#FFFDF7;color:var(--c);display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(60,45,20,.3)}
.tab.on{transform:translateY(0)}
.tab.off{background:#F1ECE1;color:#5E5A4F;box-shadow:inset 0 4px 0 var(--c)}
.tab:disabled{cursor:default}
.t1{background:#6B3FC8;--c:#6B3FC8}.t2{background:#17804A;--c:#17804A}.t3{background:#C0530E;--c:#C0530E}.t4{background:#2361C6;--c:#2361C6}

.fbody{position:relative;flex-grow:1;display:flex;flex-direction:column;background:#C99B5E;border-radius:14px;padding:10px 10px 12px;box-shadow:0 12px 26px rgba(70,50,20,.20),inset 0 1px 0 rgba(255,255,255,.28),inset 0 -2px 0 rgba(0,0,0,.08)}
.stack{position:relative;flex-grow:1;display:flex;flex-direction:column}
.sheet-b{position:absolute;left:6px;right:-3px;top:5px;bottom:-5px;background:#F4EFE3;border-radius:6px;box-shadow:0 1px 3px rgba(60,45,20,.15)}
.sheet-c{position:absolute;left:2px;right:2px;top:2px;bottom:-2px;background:#FAF6EC;border-radius:6px;box-shadow:0 1px 2px rgba(60,45,20,.12)}
.paper{position:relative;flex-grow:1;display:flex;flex-direction:column;background:#FFFDF7;border-radius:6px;padding:16px 18px 18px;min-height:calc(100vh - 250px);min-height:calc(100dvh - 250px);box-shadow:0 1px 2px rgba(0,0,0,.06),0 6px 14px rgba(70,50,20,.10);overflow:hidden}
.page{display:flex;flex-direction:column;flex-grow:1}
.in-f{animation:inF .32s cubic-bezier(.2,.7,.2,1)}
.in-b{animation:inB .32s cubic-bezier(.2,.7,.2,1)}
@keyframes inF{from{opacity:0;transform:translateX(36px) rotate(.6deg)}to{opacity:1;transform:none}}
@keyframes inB{from{opacity:0;transform:translateX(-36px) rotate(-.6deg)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.in-f,.in-b,.mark,.tab{animation:none;transition:none}}

.ph{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-bottom:10px;border-bottom:1.5px solid #ECE5D5;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#6B6658}
.ph-l{display:flex;align-items:center;gap:7px}
.dot{width:9px;height:9px;border-radius:99px;display:inline-block;flex-shrink:0}
.q{font-size:23px;font-weight:800;letter-spacing:-.02em;line-height:1.22;margin:18px 0 6px}
.qh{font-size:14px;line-height:1.5;color:#5E5A4F;margin:0 0 18px}

.line{width:100%;border:0;border-bottom:2px solid #BDB4A1;border-radius:0;background:transparent;font-family:'Courier Prime',monospace;font-weight:700;font-size:22px;letter-spacing:.05em;padding:8px 2px;color:#1E3A8A}
.line:focus{outline:none;border-bottom-color:#1E3A8A;background:#F7F4EA}
.line::placeholder{color:#B3AB98;font-weight:400}
.line:disabled{color:#9A927F;border-bottom-style:dashed}
.line.sm{font-size:18px;letter-spacing:0}
.ruled{width:100%;min-height:144px;border:0;background-color:transparent;background-image:repeating-linear-gradient(transparent 0 35px,#E3DBC9 35px 36px);line-height:36px;font-family:'Courier Prime',monospace;font-weight:700;font-size:19px;color:#1E3A8A;padding:0 2px;resize:none;text-transform:uppercase}
.ruled:focus{outline:none;background-color:#F9F6EE}
.fl{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#6B6658;margin:18px 0 2px}
.fl .opt-t{font-weight:600;letter-spacing:0;text-transform:none}
.cnt{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:#6B6658;margin-top:6px}
.ok{color:#17804A;font-weight:800}
.bad{color:#A8431A;font-weight:700}

.big{display:flex;flex-direction:column;gap:10px}
.opt{appearance:none;display:flex;align-items:flex-start;gap:14px;width:100%;text-align:left;padding:16px 14px;border-radius:12px;border:1.5px solid #DDD4C2;background:#FFFEFA;color:#22211D;cursor:pointer;box-shadow:0 2px 0 #E6DECC;transition:transform .12s}
.opt:active{transform:translateY(2px);box-shadow:none}
.opt.on{border-color:#1E3A8A;background:#F2F4FB;box-shadow:0 2px 0 #C7CFE6}
.box{width:24px;height:24px;border:2px solid #6B6658;border-radius:5px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#1E3A8A;background:#fff;margin-top:1px}
.on .box{border-color:#1E3A8A}
.ot{font-size:16px;font-weight:800;display:block}
.od{font-size:13px;color:#5E5A4F;line-height:1.45;display:block;margin-top:3px}
.mono{font-family:'Courier Prime',monospace;font-weight:700;font-size:13px;color:#6B6658}
.rows{display:flex;flex-direction:column}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px}
.row{appearance:none;display:flex;align-items:center;gap:11px;width:100%;min-height:52px;padding:8px 2px;border:0;border-bottom:1px dashed #E0D8C6;background:transparent;font-size:14.5px;font-weight:700;color:#22211D;text-align:left;cursor:pointer}
.row:hover{background:#FAF7EF}
.row .box{width:22px;height:22px}
.row .rl{flex-grow:1;min-width:0;overflow-wrap:anywhere}
.row .rc{font-family:'Courier Prime',monospace;font-size:12px;font-weight:700;color:#8A8370}
.scroll{max-height:52vh;overflow:auto;margin:0 -4px;padding:0 4px}
/* Di HP nama wilayah panjang (mis. BONTOLANGKASA SELATAN) tidak muat dua kolom:
   satu kolom penuh, dan halaman yang menggulir, bukan kotak di dalamnya */
@media (max-width:480px){
  .grid2{grid-template-columns:minmax(0,1fr)}
  .scroll{max-height:none;overflow:visible}
}
.seg{display:flex;align-items:center;gap:4px;margin:-6px 0 12px;font-size:12px;font-weight:700;color:#6B6658}
.seg span{margin-right:4px}
.seg button{appearance:none;border:1.5px solid #D3CBB9;background:#FFFEFA;border-radius:99px;padding:6px 12px;min-height:34px;font-size:12.5px;font-weight:800;color:#3A372F;cursor:pointer}
.seg button.on{background:#22211D;border-color:#22211D;color:#FFFDF7}
.fine{margin-top:auto;padding-top:16px;font-size:12px;line-height:1.5;color:#6B6658;border-top:1px solid #ECE5D5}
.fine b{color:#3A372F}

.auto{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:22px;padding:12px 14px;border:1.5px dashed #BDB4A1;border-radius:10px;background:#FAF6EC}
.auto .al{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#6B6658}
.auto .av{font-family:'Courier Prime',monospace;font-weight:700;font-size:20px;color:#1E3A8A}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.nikh{display:flex;justify-content:space-between;align-items:center}
.lnk{appearance:none;border:0;background:transparent;font-size:13px;font-weight:800;color:#A8431A;cursor:pointer;min-height:44px;padding:0 4px;display:inline-flex;align-items:center;gap:4px}
.lnk.blue{color:#1E3A8A}
.add{appearance:none;margin-top:14px;width:100%;height:48px;border:1.5px dashed #A79E8A;border-radius:10px;background:transparent;font-size:14px;font-weight:800;color:#3A372F;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.add:hover{background:#FAF6EC}
.shb{padding:12px 0 14px;border-bottom:1px dashed #E0D8C6}
.shbh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;font-size:13px;font-weight:800}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{appearance:none;border:1.5px solid #D3CBB9;background:#FFFEFA;border-radius:8px;padding:8px 11px;min-height:40px;font-size:12.5px;font-weight:700;color:#22211D;cursor:pointer;box-shadow:0 2px 0 #E6DECC}
.chip.on{background:#1E3A8A;border-color:#1E3A8A;color:#fff;box-shadow:0 2px 0 #142966}
.check{display:flex;align-items:center;gap:11px;margin-top:14px;min-height:44px;font-size:14px;font-weight:700;color:#3A372F;cursor:pointer}
.check input{width:22px;height:22px;margin:0;accent-color:#1E3A8A}
.card{display:flex;align-items:center;gap:12px;padding:14px;border:1.5px solid #D3CBB9;border-radius:12px;background:#FFFEFA;box-shadow:0 2px 0 #E6DECC}
.ini{width:42px;height:42px;border-radius:10px;background:#C73434;color:#fff;font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cn{font-size:15px;font-weight:800;line-height:1.3}
.cp{font-family:'Courier Prime',monospace;font-size:13px;font-weight:700;color:#6B6658;margin-top:2px}
.saved{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:#17804A;background:#E7F3EC;padding:4px 9px;border-radius:99px;margin-bottom:12px;align-self:flex-start}
.auto .saved{margin:0}

.nav{display:flex;gap:10px;margin-top:14px}
.btn{appearance:none;height:56px;border:0;border-radius:14px;font-size:16px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .08s,box-shadow .08s;text-decoration:none}
.next{flex-grow:1;background:#22211D;color:#FFFDF7;box-shadow:0 4px 0 #000}
.next:active{transform:translateY(3px);box-shadow:0 1px 0 #000}
.next.dis{background:#D8D1C1;color:#5E5A4F;box-shadow:0 4px 0 #B9B09C;cursor:default}
.next.dis:active{transform:none;box-shadow:0 4px 0 #B9B09C}
.back{width:56px;flex-shrink:0;background:#FFFDF7;color:#3A372F;box-shadow:0 4px 0 #A6966F}
.back:active{transform:translateY(3px);box-shadow:0 1px 0 #A6966F}
.why{text-align:center;font-size:12.5px;font-weight:600;color:#4A3A1A;margin-top:10px;min-height:18px}

.sg{font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#6B6658;display:flex;align-items:center;gap:7px;margin:16px 0 2px}
.sr{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px dashed #E0D8C6}
.sl{font-size:11.5px;font-weight:700;color:#6B6658;width:78px;flex-shrink:0}
.sv{flex-grow:1;min-width:0;font-family:'Courier Prime',monospace;font-weight:700;font-size:14px;color:#1E3A8A;word-break:break-word}
.su{appearance:none;border:0;background:transparent;font-size:12.5px;font-weight:800;color:#1E3A8A;cursor:pointer;min-height:40px;padding:0 4px;text-decoration:underline;text-underline-offset:3px}
.stampzone{display:flex;align-items:center;gap:18px;margin-top:22px;padding:16px;border-radius:14px;background:#F4EFE3;border:1px solid #E3DBC9}
.stamp{flex-shrink:0;width:118px;height:118px;border-radius:50%;border:6px double #B3302A;color:#B3302A;display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;transform:rotate(-9deg);background:#FFFDF7;box-shadow:0 5px 0 #8E2621,0 8px 16px rgba(120,30,20,.25);transition:transform .1s,box-shadow .1s}
.stamp:active{transform:rotate(-9deg) translateY(4px);box-shadow:0 1px 0 #8E2621}
.stamp .s1{font-size:21px;font-weight:800;letter-spacing:.14em}
.stamp .s2{font-size:9.5px;font-weight:800;letter-spacing:.12em;margin-top:2px}
.sz{font-size:13px;line-height:1.5;color:#4A463C}
.sz b{display:block;font-size:15px;color:#22211D;margin-bottom:2px}
.mark{position:absolute;top:70px;right:18px;padding:8px 14px;border:4px solid #B3302A;border-radius:8px;color:#B3302A;font-weight:800;font-size:22px;letter-spacing:.14em;transform:rotate(-12deg);opacity:.85;animation:stampIn .35s cubic-bezier(.3,1.6,.5,1);pointer-events:none;background:rgba(255,253,247,.6)}
@keyframes stampIn{from{transform:rotate(-12deg) scale(1.8);opacity:0}to{transform:rotate(-12deg) scale(1);opacity:.85}}
.wa{margin-top:12px;background:#E9E2D8;border-radius:12px;padding:12px}
.bub{margin:0;background:#D9FDD3;border-radius:10px 10px 3px 10px;padding:10px 12px;font-family:system-ui,sans-serif;font-size:12.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word;color:#111B21}
.foot{text-align:center;font-size:11.5px;color:#6B6658;padding:0 16px 14px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}