:root{
  --cream:#FFF8EE; --paper:#FFFDF8; --terra:#C8553D; --terra-d:#9E3E2A; --kunyit:#E9A03B;
  --pandan:#4F7942; --char:#2B2522; --muted:#7A6A60; --line:#EADCC9; --warn:#B4442E;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--cream);color:var(--char);font-family:'Figtree',sans-serif;font-size:17px;line-height:1.5}
body{background-image:radial-gradient(rgba(200,85,61,.07) 1.2px,transparent 1.3px);background-size:22px 22px}
.disp{font-family:'Fraunces',serif;letter-spacing:-.01em}
.hdr{background:var(--terra);color:#fff;background-image:radial-gradient(rgba(255,255,255,.14) 2px,transparent 2.5px),radial-gradient(rgba(233,160,59,.35) 1.5px,transparent 2px);background-size:18px 18px,18px 18px;background-position:0 0,9px 9px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:16px;box-shadow:0 2px 0 rgba(158,62,42,.06),0 8px 24px -16px rgba(80,40,20,.25)}
.btn{min-height:48px;padding:10px 16px;border-radius:12px;font-weight:700;border:2px solid transparent;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:transform .1s,background .2s}
.btn:active{transform:scale(.97)}
.btn-p{background:var(--terra);color:#fff}.btn-p:hover{background:var(--terra-d)}
.btn-s{background:#fff;border-color:var(--line);color:var(--char)}.btn-s:hover{border-color:var(--terra)}
.btn-g{background:var(--pandan);color:#fff}
.btn-k{background:var(--kunyit);color:#3a2500}
.btn-sm{min-height:38px;padding:6px 12px;font-size:15px}
.btn:disabled{opacity:.45;cursor:not-allowed}
input,select,textarea{font:inherit;color:inherit;background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;min-height:46px;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--terra);box-shadow:0 0 0 3px rgba(200,85,61,.15)}
.numwrap{display:flex;align-items:stretch;border:1.5px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}
.numwrap input{border:none;min-width:0;box-shadow:none!important}
.numwrap:focus-within{border-color:var(--terra)}
.affix{padding:0 10px;display:flex;align-items:center;color:var(--muted);background:#FBF3E6;font-size:15px;white-space:nowrap}
.badge{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:700;padding:2px 9px;border-radius:999px;white-space:nowrap}
.b-acuan{background:#DCE9F7;color:#1F4E7A}
.b-beli{background:#DDEED6;color:#2F5A24}
.b-contoh{color:#555;background:repeating-linear-gradient(45deg,#eee,#eee 5px,#e0e0e0 5px,#e0e0e0 10px)}
.b-missing{background:#FCE8C3;color:#7A4A00}
.b-check{background:#FFE1CF;color:#9A3A12}
.b-ok{background:#DDEED6;color:#2F5A24}
.b-stale{background:#F6D3CC;color:#8A2A18}
.unsure{background:linear-gradient(transparent 60%,rgba(233,160,59,.45) 60%)}
.hl-warn{border-color:var(--kunyit)!important;background:#FFF6E3}
.tabbar{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);display:flex;z-index:40;padding-bottom:env(safe-area-inset-bottom)}
.tabbar button{flex:1;min-height:62px;font-size:12.5px;font-weight:700;color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:none;border:none;cursor:pointer}
.tabbar button.on{color:var(--terra)}
.tabbar button.on .ico{background:var(--terra);color:#fff}
.ico{width:34px;height:26px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:16px}
.fade{animation:fade .35s ease both}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.stagger>*{animation:fade .4s ease both}
.stagger>*:nth-child(2){animation-delay:.05s}.stagger>*:nth-child(3){animation-delay:.1s}.stagger>*:nth-child(4){animation-delay:.15s}.stagger>*:nth-child(5){animation-delay:.2s}
.struk{font-family:'Courier New',monospace;font-size:13.5px;white-space:pre-wrap;background:#fff;border:1px dashed #bbb;padding:14px;border-radius:6px;background-image:linear-gradient(#fff 0 0);box-shadow:0 6px 18px -12px #0005}
.origbox{white-space:pre-wrap;font-size:15px;background:#FBF3E6;border-radius:12px;padding:14px;max-height:420px;overflow:auto;border:1px solid var(--line)}
.seg{display:flex;background:#F3E6D3;border-radius:12px;padding:4px;gap:4px;overflow-x:auto}
.seg button{flex:1;min-height:42px;border-radius:9px;font-weight:700;font-size:15px;border:none;background:none;color:var(--muted);cursor:pointer;white-space:nowrap;padding:0 10px}
.seg button.on{background:#fff;color:var(--terra);box-shadow:0 1px 3px #0002}
.row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line)}
.row:last-child{border-bottom:none}
.chk{width:26px;height:26px;min-height:26px;accent-color:var(--pandan);flex-shrink:0}
.toast{position:fixed;left:50%;bottom:84px;transform:translateX(-50%);background:var(--char);color:#fff;padding:12px 18px;border-radius:12px;z-index:60;font-weight:600;max-width:92vw;animation:fade .3s}
a{color:var(--terra-d)}
input[type=range]{padding:0;min-height:30px;border:none;accent-color:var(--terra)}