*{box-sizing:border-box}
:root{--bg:#f5f6f8;--ink:#14161a;--mute:#8a8f98;--acc:#1e9e6a;--acc-soft:#e7f5ee;--line:#f0f1f3;--red:#e5484d}
html,body{margin:0}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:14px;color:var(--ink);background:var(--bg);overflow-x:hidden}
a{color:inherit;text-decoration:none}
.logo{font-weight:800;font-size:18px;letter-spacing:-.5px}
.logo span{color:var(--acc)}

/* hero */
.hero{height:250px;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.55)),var(--cover) center/cover,#3b6d5a;color:#fff;padding:18px 18px 34px;display:flex;flex-direction:column;position:relative}
.hero h1{margin:auto 0 2px;font-size:26px;font-weight:800;letter-spacing:-.5px}
.hero .kicker{opacity:.85;font-weight:600;text-transform:uppercase}
.hero .acts{display:flex;gap:8px;margin-bottom:auto}
.btn{background:rgba(255,255,255,.22);backdrop-filter:blur(8px);color:#fff;border-radius:12px;padding:8px 14px;font:inherit;font-weight:600;border:0;cursor:pointer}
.btn.pr{background:var(--acc)}
.avs{display:flex;margin-top:8px;align-items:center;gap:10px}
.avs .s{display:flex}
.av{width:26px;height:26px;border-radius:50%;border:2px solid #fff;margin-right:-7px;font-size:10px;display:grid;place-items:center;font-weight:700;color:var(--ink)}
.sheet{background:var(--bg);border-radius:26px 26px 0 0;margin-top:-22px;position:relative;padding:16px 16px 150px;min-height:60vh}

/* cards */
.card{background:#fff;border-radius:20px;padding:16px;margin-bottom:12px;box-shadow:0 2px 10px rgba(20,22,26,.05)}
.lbl{font-size:11px;color:var(--mute);font-weight:700;text-transform:uppercase;letter-spacing:.6px;display:flex;justify-content:space-between}
.lbl a{color:var(--acc);text-transform:none;letter-spacing:0}
.big{font-size:22px;font-weight:800;margin:4px 0}
.page-title{margin:0 0 12px;font-size:20px;font-weight:800}

/* top bar (non-trip pages and mobile trip pages) */
.top{display:flex;justify-content:space-between;align-items:center;padding:14px 16px}
.page{max-width:720px;margin:0 auto;padding:0 16px 150px}

/* mobile bottom menu */
.nav{position:fixed;left:14px;right:14px;bottom:14px;background:var(--ink);border-radius:24px;display:flex;justify-content:space-between;align-items:center;padding:8px 6px;z-index:10}
.nav a{color:#9aa0a8;font-size:11.5px;font-weight:700;display:flex;align-items:center;gap:6px;padding:9px 10px;border-radius:14px}
.nav a svg{width:22px;height:22px;flex-shrink:0}
.nav a span{display:none}
.nav a.on{color:#fff;background:var(--acc);padding:9px 14px}
.nav a.on span{display:inline}
.side{display:none}

/* switcher (prototype only) */
.switch{border:1.5px dashed #b6bcc6;border-radius:12px;padding:8px 10px;font-size:11px;color:var(--mute);display:flex;flex-direction:column;gap:4px}
.switch select{font:inherit;font-size:13px;font-weight:600;color:var(--ink);border:0;background:transparent;padding:0}
.menu a{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);font-weight:600}
.menu a:last-child{border:0}

/* desktop */
@media (min-width:900px){
  .nav,.top.trip-top{display:none}
  .shell{display:flex;min-height:100vh}
  .side{display:flex;flex-direction:column;gap:2px;width:220px;flex-shrink:0;background:#fff;padding:20px 14px;border-right:1px solid #eceef1;position:sticky;top:0;height:100vh;overflow-y:auto}
  .side .logo{margin:0 8px 18px}
  .trip{display:flex;gap:10px;align-items:center;padding:8px;border-radius:12px;background:var(--bg);margin-bottom:14px}
  .trip i{width:34px;height:34px;border-radius:10px;background:var(--cover) center/cover,#3b6d5a;flex-shrink:0}
  .trip small{display:block;color:var(--mute);font-size:11px}
  .nv{padding:9px 10px;border-radius:10px;color:#5b616b;font-weight:600;display:flex;align-items:center;gap:10px}
  .nv svg{width:18px;height:18px;flex-shrink:0}
  .nv.on{background:var(--acc-soft);color:var(--acc)}
  .grp{font-size:10px;color:#a3a8b0;font-weight:700;letter-spacing:.8px;margin:12px 10px 4px}
  .side .foot{margin-top:auto;display:flex;flex-direction:column;gap:2px}
  .main{flex:1;min-width:0;padding:18px 28px 22px;max-width:1440px;margin:0 auto}
  .hero{height:200px;border-radius:22px;padding:24px;background:linear-gradient(90deg,rgba(0,0,0,.6),rgba(0,0,0,.05)),var(--cover) center/cover,#3b6d5a}
  .hero h1{font-size:34px;letter-spacing:-1px;margin-top:auto}
  .hero .acts{position:absolute;top:18px;right:18px;margin:0}
  .sheet{margin-top:0;border-radius:0;padding:16px 0 0;min-height:0}
  .main .page-title{margin-top:6px}
  .page{padding-bottom:40px}
  .main .page{max-width:none;margin:0;padding:16px 0 110px}
}

/* auth, landing, trips */
.landing{min-height:100vh;min-height:100svh;min-height:100dvh;background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.65)),var(--cover) center/cover;color:#fff;display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:24px;padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left))}
.landing .logo{font-size:26px}
.cta{display:flex;flex-direction:column;gap:10px;max-width:360px;width:100%;margin:0 auto 24px}
.cta .btn{text-align:center;padding:14px}
.auth{max-width:420px;margin:24px auto}
.fld{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:.6px;margin-bottom:12px}
.fld input{font:inherit;font-size:15px;font-weight:500;color:var(--ink);text-transform:none;letter-spacing:0;border:1.5px solid #e3e6ea;border-radius:12px;padding:10px 12px}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.fld input,.fld select{min-width:0;width:100%}
.fld select,.panel select{font:inherit;font-size:15px;font-weight:500;color:var(--ink);text-transform:none;letter-spacing:0;border:1.5px solid #e3e6ea;border-radius:12px;padding:10px 12px;background:#fff}
.wide{width:100%;padding:12px;margin-top:4px}
.err{color:var(--red);font-weight:600;min-height:18px;margin-bottom:6px}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin:8px 0 18px}
.tcard{background:#fff;border-radius:20px;overflow:hidden;box-shadow:0 2px 10px rgba(20,22,26,.05)}
.tcover{height:110px;background:center/cover #3b6d5a}
.tbody{padding:12px 14px}
.tbody .avs{margin-top:10px}
.badge{background:var(--acc-soft);color:var(--acc);border-radius:8px;padding:2px 8px;font-size:11px;font-weight:700;margin-left:6px}
.mute{color:var(--mute);margin-top:4px}

/* ringkasan */
.row{display:flex;justify-content:space-between}
.tl{display:flex;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.tl:last-child,.tr:last-child{border:0}
.tl b{color:var(--acc);width:40px;flex-shrink:0}
.tl small{display:block;color:var(--mute)}
.tr{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.amt{font-weight:800}
.red{color:var(--red)}
.pos{color:var(--acc)}
.bar{height:6px;background:#eceef1;border-radius:6px;overflow:hidden;margin:6px 0 10px}
.bar i{display:block;height:100%;background:var(--acc);border-radius:6px}
.tick{font-size:11px;background:var(--acc-soft);color:var(--acc);border-radius:8px;padding:2px 8px;font-weight:700}
.tick.off{background:var(--line);color:#5b616b}
.cat{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.cat div{flex:1;min-width:90px;background:var(--bg);border-radius:12px;padding:8px}
.cat small{color:var(--mute);display:block}
@media (min-width:900px){.grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:14px;align-items:start}.grid .card{margin:0}.span2{grid-column:span 2}}

/* rundown */
.rdhead{display:flex;justify-content:space-between;align-items:center}
.rd{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.rd:last-child{border:0}
.rd-t{width:92px;flex-shrink:0}.rd-t b{color:var(--acc);display:block}.rd-t small{color:var(--mute)}
.rd-b{flex:1;min-width:150px;overflow-wrap:anywhere}.rd-b small{display:block;color:var(--mute)}
.rd-a{display:flex;gap:2px;align-items:flex-start;margin-left:auto}
.rd-a button,.rd-a a{background:none;border:0;font:inherit;cursor:pointer;padding:4px 7px;border-radius:8px;color:var(--ink)}
.rd-a button:disabled{opacity:.25;cursor:default}
.rd-c{width:100%;text-align:right}.rd-c .btn{color:var(--ink);background:var(--line)}.rd-c .btn.pr{color:#fff;background:var(--red)}
.rd-a[hidden],.rd-c[hidden]{display:none}
.scrim{position:fixed;inset:0;background:rgba(20,22,26,.45);z-index:20}
.panel{position:fixed;z-index:21;left:0;right:0;bottom:0;max-height:88vh;overflow:auto;margin:0;border-radius:20px 20px 0 0}
.btn.ghost{display:block;text-align:center;background:var(--line);color:var(--ink);margin-top:8px}
@media (min-width:900px){.panel{left:auto;top:0;width:400px;max-height:none;border-radius:20px 0 0 20px}}

/* barang */
.tabs{display:flex;gap:6px;margin-bottom:12px;overflow-x:auto}
.tabs a{padding:8px 14px;border-radius:12px;background:#fff;font-weight:600;white-space:nowrap}
.tabs a.on{background:var(--acc);color:#fff}
.acts{display:flex;gap:8px;margin-bottom:12px}
.acts .btn:not(.pr){background:#fff;color:var(--ink);box-shadow:0 2px 10px rgba(20,22,26,.05)}
.it{display:flex;gap:8px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.it:last-child{border:0}
.it .nm{font-weight:600}
.ck{display:flex;gap:10px;align-items:center;cursor:pointer;padding:6px 0;margin:-6px 0}
.ck input{width:20px;height:20px;accent-color:var(--acc);flex-shrink:0}
.ck input:checked+.nm{color:var(--mute);text-decoration:line-through}
.pk{padding:8px 0}.pk-h{margin-top:10px}
button.badge{border:0;font:inherit;font-size:11px;font-weight:700;cursor:pointer}
.badge.off{background:var(--line);color:#5b616b}
.rd-a .txt{font-size:12px;color:var(--acc);font-weight:600}
.mr{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.mr:last-child{border:0}
.mr .av{margin-right:0;width:30px;height:30px;font-size:12px;border-color:transparent;flex-shrink:0}
.mr small{color:var(--mute)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;align-items:center}
.chip{border:1.5px solid #e3e6ea;background:#fff;border-radius:999px;padding:4px 12px;font:inherit;font-size:12px;font-weight:700;color:#5b616b;cursor:pointer}
.chip.on{border-color:var(--acc);color:var(--acc);background:var(--acc-soft)}
.chip.ok{border-color:var(--acc);background:var(--acc);color:#fff}
.chip:disabled,.pic select:disabled{cursor:default}
.pic{display:flex;align-items:center;gap:4px;border:1.5px solid #e3e6ea;border-radius:999px;padding:2px 8px 2px 4px}
.pic .av{margin:0;width:22px;height:22px;border-color:transparent}
.pic select{font:inherit;font-size:12px;font-weight:700;border:0;background:transparent;color:var(--ink);padding:2px}

/* uang */
.chip{position:relative}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip:has(input:checked){border-color:var(--acc);color:var(--acc);background:var(--acc-soft)}
.warn{color:var(--red);font-weight:600;font-size:12px}
input.rate{width:100px;font:inherit;font-weight:700;border:1.5px solid #e3e6ea;border-radius:10px;padding:6px 8px}
.rd .avs{margin-top:6px}.rd .avs .av{width:22px;height:22px;font-size:9px}
[hidden]{display:none!important}
.fld input::placeholder{color:#b3b8c0}

/* anggota */
.cp{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.cp input{flex:1;min-width:120px;font:inherit;border:1.5px solid #e3e6ea;border-radius:12px;padding:10px 12px}
.cp .code{font-size:32px;font-weight:800;letter-spacing:4px;flex:1}.cp .lnk{flex:1;min-width:0;overflow-wrap:anywhere;font-size:13px}
.rd-b>.av{display:inline-grid;vertical-align:middle;margin-right:4px}
.panel .lbl,.auth .lbl{margin-bottom:10px}
.top .btn{background:var(--acc-soft);color:var(--acc);padding:6px 10px;font-size:12px}
.switch button{font:inherit;font-size:13px;font-weight:600;color:var(--ink);background:none;border:0;padding:0;cursor:pointer;text-align:left}
.tr .mute{flex:1}

.ltitle{margin:18px 0 0;font-size:30px;font-weight:800;line-height:1.1;letter-spacing:-.5px}
.cta .lmasuk{color:#fff;text-align:center;font-weight:700;font-size:13px;padding:4px}
.mail{width:64px;height:64px;border-radius:20px;background:var(--acc-soft);display:grid;place-items:center;font-size:30px;margin:20px auto 14px}
.c{text-align:center}
.bigcode{font-size:34px;font-weight:800;letter-spacing:6px;margin:6px 0 8px}
.stack{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.stack .btn,.auth .btn{text-align:center}
.demo{border:2px dashed #c9ccd2;background:transparent;color:#5b616b}
.rrow{display:flex;justify-content:space-between;padding:8px 0}
.prow{padding:4px 0}
.stack .btn:not(.pr){background:var(--line);color:var(--ink);padding:12px;backdrop-filter:none}
.stack .btn.demo{background:transparent;color:#5b616b}

/* barang pribadi */
.cg{font-size:10px;color:#a3a8b0;font-weight:700;letter-spacing:.6px;margin:10px 0 2px;text-transform:uppercase}
.it.bi{align-items:center;flex-wrap:nowrap;gap:10px}
.bi .nm{flex:1;min-width:0;overflow-wrap:anywhere}
.bi .q{color:var(--mute);font-size:12px}
.it.w{box-shadow:inset 3px 0 0 #f59f00;padding-left:10px;margin-left:-10px}
.it.r{box-shadow:inset 3px 0 0 #4b5bd6;padding-left:10px;margin-left:-10px}
.it.done .nm{color:var(--mute)}
.cbw{display:grid;place-items:center;width:32px;height:32px;margin:-6px;flex-shrink:0}
.cb{width:20px;height:20px;accent-color:var(--acc);flex-shrink:0;margin:0}
.lg{display:flex;gap:14px;margin:0 2px 10px;font-size:11px;color:var(--mute);font-weight:600}
.lg span{display:flex;align-items:center}
.lg i{display:inline-block;width:3px;height:11px;border-radius:2px;margin-right:5px}
.card .bar:last-child{margin-bottom:0}
.card.pv{background:#f7f7f9;border:1px dashed #d9dce1;box-shadow:none}
.back{display:inline-block;color:var(--acc);font-weight:600;margin-bottom:8px}
a.mem{display:block;border-bottom:1px solid var(--line);padding:10px 0}
a.mem:last-child{border:0}
.mh{display:flex;justify-content:space-between;align-items:center}
.mem .av,.page-title .av{margin:0 8px 0 0;border-color:transparent;display:inline-grid;vertical-align:middle;width:30px;height:30px;font-size:12px}
.cnt{font-weight:800}.cnt.pos{color:var(--acc)}
.mini{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 0 38px}
.mini span{font-size:11px;font-weight:600;padding:2px 8px;border-radius:8px;background:var(--bg);color:#5b616b}
.mini .w{background:#fff4e0;color:#c27a00;box-shadow:inset 3px 0 0 #f59f00}
.mini .r{box-shadow:inset 3px 0 0 #4b5bd6}
.mini .more{background:none;color:#a3a8b0}
button.dot{width:22px;height:22px;border-radius:50%;border:2px solid #d9dce1;padding:0;cursor:pointer;flex-shrink:0;background:#fff;position:relative}
button.dot:after{content:'';position:absolute;inset:-6px}
button.dot.w{background:#f59f00;border-color:#f59f00}button.dot.r{background:#4b5bd6;border-color:#4b5bd6}
button.sg{width:100%;background:none;border:0;border-bottom:1px solid var(--line);font:inherit;font-weight:700;color:var(--acc);text-align:left;cursor:pointer}
.card .chips a.chip{display:inline-block}
.btn.dng{background:#fdecec;color:var(--red);padding:12px;backdrop-filter:none}
.two .btn{padding:12px;text-align:center}
.btn:disabled{opacity:.4;cursor:default}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:92px;z-index:30;background:var(--ink);color:#fff;border-radius:14px;padding:12px 16px;display:flex;gap:6px;align-items:center;width:max-content;max-width:calc(100vw - 32px);box-shadow:0 6px 20px rgba(0,0,0,.3)}
.toast button{background:none;border:0;color:#7be0b2;font:inherit;font-weight:700;cursor:pointer;padding:0}
@media (min-width:900px){.toast{bottom:24px}}
.toast span{overflow-wrap:anywhere}.toast button{flex-shrink:0;white-space:nowrap}

/* barang sharing */
.chips.fl{margin:0 0 12px;flex-wrap:nowrap;overflow-x:auto}
.chips.fl{gap:4px}.chips.fl .chip{white-space:nowrap;display:inline-block;padding:4px 9px;font-size:11px}
.srow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.srow:last-child{border:0}
.srow.mine{background:#f3fbf7;border-radius:10px;padding:8px 6px;margin:0 -6px}
.srow .m{flex:1;min-width:0;overflow-wrap:anywhere}.srow .m b{display:block}.srow .m small{color:var(--mute)}
.av.none{background:#fff;border:2px dashed #c9ccd2;color:#a3a8b0;margin:0;flex-shrink:0}
.srow .av,.st .av{margin-right:0;width:26px;height:26px;border-color:transparent;flex-shrink:0}
.av.none{border-color:#c9ccd2}
.chip .av.none{width:16px;height:16px;font-size:8px;margin-right:4px;vertical-align:middle;display:inline-grid}
.tog{display:inline-block;width:34px;height:20px;border-radius:10px;background:#d9dce1;position:relative;flex-shrink:0;border:0;padding:0;cursor:pointer}
.tog:before{content:'';position:absolute;inset:-6px}
.tog:after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff}
.tog.on{background:var(--acc)}.tog.on:after{left:17px}
.tog:disabled{cursor:default}
.sc{display:inline-block;border-radius:8px;padding:2px 7px;font-size:10px;font-weight:700;margin-top:2px}
.sc.sewa{background:#eef0ff;color:#4b5bd6}.sc.beli{background:#fff4e0;color:#c27a00}.sc.punya{background:var(--line);color:#5b616b}
.srow .sc{margin-right:6px}
.dsk,.dk-only{display:none}
.st{width:100%;border-collapse:collapse;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 2px 10px rgba(20,22,26,.05)}
.st th{font-size:10px;color:var(--mute);text-transform:uppercase;letter-spacing:.6px;text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.st td{padding:9px 12px;border-bottom:1px solid #f5f6f8}
.st tr.grp td{background:#fafbfc;font-size:10px;color:#a3a8b0;font-weight:700;letter-spacing:.6px;text-transform:uppercase;padding:6px 12px}
.st td .av{display:inline-grid;vertical-align:middle;margin-right:6px}
@media (min-width:900px){.mob{display:none}.dsk{display:block}.dk-only{display:inline-block}}

/* kebutuhan barang v3 */
.bi .nm b{display:block;font-weight:600}
.bi .nm small{display:block;font-size:11px;font-weight:500;margin-top:1px;color:var(--mute)}
.bi .nm small.kt{font-style:italic}
.bi .nm small.cn{color:var(--acc);font-weight:600}
.bi .q2,.q2{color:var(--mute);font-size:12px;font-weight:700;min-width:16px;text-align:right}
.mini span small{display:block;font-weight:500;font-size:10px;color:var(--mute)}
.mini span small.kt{font-style:italic}.mini span small.cn{color:var(--acc)}
a.dash,.dash{display:block;border:1.5px dashed #c9ccd2;border-radius:12px;padding:9px;text-align:center;color:#5b616b;font-weight:700;font-size:12.5px;margin-top:6px}
.ptitle{font-weight:800;font-size:17px;margin-bottom:12px}
.ro{background:#fafbfc;border-radius:12px;padding:10px 12px;font-style:italic;font-weight:500;color:var(--mute);text-transform:none;letter-spacing:0;font-size:14px}
.f{margin-bottom:12px}.f .lbl{margin-bottom:6px}
.qs{display:inline-flex;align-items:center;background:var(--bg);border-radius:12px;overflow:hidden}
.qs button{border:0;background:none;font:inherit;font-size:18px;font-weight:700;color:var(--acc);padding:8px 16px;cursor:pointer}
.qs input{width:44px;border:0;background:none;text-align:center;font:inherit;font-weight:800;padding:0}
.mk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:6px}
.mkc{position:relative}
.mkc input{position:absolute;opacity:0;pointer-events:none}
.mkc span{display:block;text-align:center;border-radius:12px;padding:11px 2px;font-weight:700;font-size:12px;background:var(--bg);color:#5b616b;border:2px solid transparent;cursor:pointer}
.mkc.w input:checked+span{border-color:#f59f00;background:#fff8ec;color:#b07400}
.mkc.r input:checked+span{border-color:#4b5bd6;background:#eef0ff;color:#4b5bd6}
.mkc.o input:checked+span{border-color:#8a8f98;background:#f0f1f3;color:#14161a}
.mkc input:focus-visible+span{outline:2px solid var(--acc)}
.ibtns{display:flex;gap:8px;margin-top:8px}
.ibtn{display:grid;place-items:center;padding:12px;background:var(--line);color:var(--ink);backdrop-filter:none}
.ibtns .ibtn{flex:1}
.ibtn.pr{background:var(--acc);color:#fff}
.two .ibtn{margin:0}
.st tr.tadd td{color:#5b616b;font-weight:700}
.st tr.tadd a{display:block}
.st td.w{box-shadow:inset 3px 0 0 #f59f00}.st td.r{box-shadow:inset 3px 0 0 #4b5bd6}

.t1{display:flex;margin:0 0 12px;border-bottom:1px solid #e4e6ea}
.t1 a{flex:1;text-align:center;padding:10px 0 11px;font-weight:700;font-size:14px;color:var(--mute);position:relative}
.t1 a.on{color:var(--acc)}.t1 a.on:after{content:'';position:absolute;left:22%;right:22%;bottom:-1px;height:3px;border-radius:3px 3px 0 0;background:var(--acc)}
.all{display:grid;place-items:center;color:var(--mute)}.all svg{width:15px;height:15px}
[hidden]{display:none!important}
/* barang panel: one vertical rhythm (20px between blocks), 8px chip gaps, 12px between buttons */
.panel[data-mode]{display:flex;flex-direction:column;gap:20px;padding:24px 20px calc(24px + env(safe-area-inset-bottom,0px))}
.panel[data-mode]>*{margin:0}
.panel[data-mode] .ptitle{margin:0}
.panel[data-mode] .fld{margin:0;gap:8px}
.panel[data-mode] .pg .lbl{margin-bottom:8px}
.panel[data-mode] .chips{margin:0;gap:8px}
.panel[data-mode] .chip{padding:9px 16px;font-size:13px}
.panel[data-mode] .mk{gap:8px;margin:0}
.panel[data-mode] .ibtns,.panel[data-mode] .two{margin-top:4px;gap:12px}
.panel[data-mode] .ibtns .ibtn,.panel[data-mode] .two .btn{height:48px;padding:0;display:grid;place-items:center}
.psec{border-top:1px solid #e3e6ea;padding-top:20px;font-size:11px;font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:.6px}

/* floating + : right edge of the bottom nav, 12px above it; bottom-right of the main column on desktop */
.fab{position:fixed;right:14px;bottom:82px;width:52px;height:52px;border-radius:18px;background:var(--acc);color:#fff;display:grid;place-items:center;box-shadow:0 8px 20px rgba(30,158,106,.4);z-index:9}
.fab svg{width:24px;height:24px;stroke-width:2.4}
@media (max-width:899px){.fab.low{bottom:20px}}
@media (min-width:900px){.fab{right:32px;bottom:32px}}
.catqty{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}
.catqty select,.catqty>.pg>input{width:100%;box-sizing:border-box;height:44px;font:inherit;font-size:15px;font-weight:500;color:var(--ink);border:1.5px solid #e3e6ea;border-radius:12px;padding:0 12px;background:#fff}
.catqty .qs{height:44px;display:flex}
.panel:not([data-mode]) .catqty{margin-bottom:12px}

/* status panel: title + pencil, summary box with sifat bar */
.phd{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.pen{width:36px;height:36px;flex:none;border-radius:12px;background:var(--bg);display:grid;place-items:center;color:var(--ink)}
.pen svg{width:17px;height:17px}
.inf{background:var(--bg);border-radius:14px;padding:11px 12px}
.inf .m{font-size:12px;font-weight:700;color:#5b616b}.inf .k{font-style:italic;color:#5b616b;font-size:13px;margin-top:3px}
.inf.w{box-shadow:inset 3px 0 0 #f59f00}.inf.w .m{color:#b07400}
.inf.r{box-shadow:inset 3px 0 0 #4b5bd6}.inf.r .m{color:#4b5bd6}

/* rundown timeline */
.days{display:flex;gap:6px;margin:0 0 14px;overflow-x:auto;scrollbar-width:none}
.days a{flex-shrink:0;padding:8px 13px;border-radius:12px;background:#fff;font-weight:700;font-size:12px;color:#5b616b;box-shadow:0 1px 4px rgba(0,0,0,.05);white-space:nowrap}
.days a.on{background:var(--ink);color:#fff}
.tlw{position:relative}
.ev,.leg{display:flex;gap:10px;position:relative;min-width:0}
.ev.tap,.leg.tap{cursor:pointer}
.tm{width:42px;flex-shrink:0;font-weight:800;font-size:13px;text-align:right}
.ev .tm{padding-top:12px}
.leg .tm{color:var(--mute);font-weight:700;font-size:11.5px;padding-top:9px}
.ln{width:14px;flex-shrink:0;position:relative}
.ev .ln:before{content:"";position:absolute;left:6px;top:0;bottom:0;width:2px;background:#dfe2e6}
.ev .ln i{position:absolute;left:1px;top:15px;width:12px;height:12px;border-radius:50%;background:#fff;border:2.5px solid var(--acc)}
.leg .ln:before{content:"";position:absolute;left:6px;top:0;bottom:0;border-left:2px dashed #c9ccd2}
.ev .bx{flex:1;min-width:0;background:#fff;border-radius:14px;padding:10px 12px;margin-bottom:8px;box-shadow:0 2px 8px rgba(20,22,26,.05);overflow-wrap:anywhere}
.bx b,.leg .tx b{display:block;font-size:14px}
.bx small,.leg .tx small{display:block;color:var(--mute);font-weight:500;font-size:12px;margin-top:1px}
.bx small a,.leg small a{color:var(--acc);text-decoration:underline}
.bx small.amt,.leg small.amt{color:#5b616b;font-weight:700}
.leg .tx{flex:1;min-width:0;display:flex;gap:8px;align-items:flex-start;padding:4px 0 12px;color:#5b616b;overflow-wrap:anywhere}
.leg .tx>span{width:28px;height:28px;border-radius:9px;background:#eef0fc;color:#4b5bd6;display:grid;place-items:center;flex-shrink:0}
.leg .tx>span svg{width:15px;height:15px}
.leg .tx b{font-size:12.5px;font-weight:700}
.tag{display:inline-block;background:var(--acc-soft);color:var(--acc);font-size:10px;font-weight:800;padding:2px 6px;border-radius:6px;margin-left:6px;vertical-align:1px}
.tag.x{background:#eceef1;color:#8a8f98}
.ev.past .ln i{border-color:#c9ccd2;background:#c9ccd2}
.ev.past .bx,.leg.past .tx{opacity:.55}
.ev.cur .ln i{background:var(--acc);box-shadow:0 0 0 4px #cdeedd}
.ev.cur .bx{box-shadow:0 0 0 2px var(--acc)}
.leg.cur .tx>span{box-shadow:0 0 0 2px #4b5bd6}
.ev.cx .bx,.leg.cx .tx{color:#8a8f98}
.ev.cx .bx{background:#f3f4f6;opacity:.8}
.cx b{text-decoration:line-through;color:#8a8f98}
.ev.cx .ln i{border:2.5px dashed #c9ccd2;background:#fff}
.three{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr);gap:8px}
.three input,.three select{min-width:0;width:100%;padding-left:8px;padding-right:6px}
.kp{display:flex;flex-direction:column;gap:20px}
.panel[data-mode] .ibtns .btn:not(.ibtn){flex:1;height:48px;padding:0;display:grid;place-items:center;margin:0}
.panel[data-mode] .ibtns .btn:not(.ibtn):not(.dng){background:var(--line);color:var(--ink)}
.three input,.three select{font-size:14px}
.three input[type=time]{padding-left:8px;padding-right:2px}
.three input[type=time]::-webkit-calendar-picker-indicator{display:none}

/* kartu Sekarang + mundur */
.now{background:#1e9e6a;color:#fff;border-radius:20px;padding:12px 14px;margin:0 0 12px;box-shadow:0 8px 20px rgba(30,158,106,.3)}
.now .k{font-size:10px;font-weight:800;letter-spacing:.6px;opacity:.85;text-transform:uppercase}
.now b{display:block;font-size:17px;margin:3px 0 2px;letter-spacing:-.3px;overflow-wrap:anywhere}
.now small{display:block;opacity:.9;font-weight:500;font-size:12.5px}
.now .pb{height:6px;background:rgba(255,255,255,.3);border-radius:6px;margin:10px 0 5px;overflow:hidden}.now .pb i{display:block;height:100%;background:#fff}
.now .ft{display:flex;justify-content:space-between;gap:10px;font-size:11px;font-weight:700;opacity:.92}.now .ft span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.now .ft span:last-child{white-space:nowrap}
.now .hb{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.now .mb{background:rgba(255,255,255,.2);border-radius:10px;padding:6px 10px;font-size:11px;font-weight:800;white-space:nowrap;color:#fff}
.tm.late{display:flex;flex-direction:column;color:#e5484d;font-weight:800}.tm.late s{color:#a3a8b0;font-weight:600;font-size:10.5px}
.tag.late{background:#fde8e9;color:#e5484d}
.tm.early{display:flex;flex-direction:column;color:#1e9e6a;font-weight:800}.tm.early s{color:#a3a8b0;font-weight:600;font-size:10.5px}
.tag.early{background:#e7f5ee;color:#1e9e6a}
.tgl small{margin-left:auto;font-weight:800}.tgl .ok,.rpv .ok{color:#1e9e6a}.tgl .bad{color:#e5484d}
.rpv{background:#f5f6f8;border-radius:12px;padding:8px 12px}.rpv div{display:flex;justify-content:space-between;gap:10px;padding:4px 0;font-weight:600;font-size:13px}.rpv s{color:#a3a8b0;margin-right:8px}
.panel[data-mode] .ibtns .btn.dk:not(.ibtn):not(.dng){background:var(--ink);color:#fff}
.tgl{display:flex;align-items:center;gap:10px;font-weight:600;font-size:14px;cursor:pointer}
.tgl input{position:absolute;opacity:0;pointer-events:none}
.tgl i{width:38px;height:22px;border-radius:12px;background:#c9ccd2;position:relative;flex-shrink:0;transition:background .15s}
.tgl i:after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:left .15s}
.tgl input:checked+i{background:var(--acc)}.tgl input:checked+i:after{left:19px}
.tgl input:focus-visible+i{outline:2px solid var(--acc);outline-offset:2px}

/* uang: anggaran, kas, utang */
.kas .row2{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px}
.kas .avs{margin:0}
.kas small{color:var(--mute);font-weight:600;font-size:12px}
.kas small+small{display:block;margin-top:2px}
.av.off{background:#eceef1!important;color:#a3a8b0}
.psr{display:block;padding:9px 0;border-bottom:1px solid var(--line)}
.psr:last-child{border:0}
.psr .h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.psr .h b{min-width:0;overflow-wrap:anywhere}
.psr .h span{font-weight:800;white-space:nowrap}
.psr small{display:block;color:var(--mute);font-weight:600;margin-top:2px}
.chip .av{width:18px;height:18px;font-size:9px;margin:0 6px 0 0;border:0;display:inline-grid;vertical-align:middle}
.inf b{display:block;font-size:16px;margin-top:2px}
.iur{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:7px 0;border-bottom:1px solid var(--line)}
.iur:last-child{border:0}
.iur .av{margin:0;border-color:transparent;width:30px;height:30px;font-size:12px;flex-shrink:0}
.iur .n{flex:1;min-width:0;font-weight:700;overflow-wrap:anywhere}
.iur .sv{font:inherit;font-weight:800;background:none;border:0;padding:4px 2px;cursor:pointer;color:var(--ink);text-align:right}
.iur .sv.pos{color:var(--acc)}
.iur .sv.over,.iur .sv.over small{color:#b07400}
.iur .ret{margin-top:6px;width:100%;color:#b07400;border:1.5px solid #f6e3bd;background:#fff8ec}
.iur .sv small{color:var(--mute);font-weight:600}
.iur .add{width:30px;height:30px;flex-shrink:0;border-radius:9px;border:1.5px solid var(--acc);color:var(--acc);background:#fff;font:inherit;font-weight:800;line-height:1;cursor:pointer}
.iur .inl{flex-basis:100%;display:flex;gap:8px;padding-left:38px}
.iur .inl input{flex:1;min-width:0;font:inherit;border:1.5px solid #e3e6ea;border-radius:12px;padding:8px 12px}
.iur .inl button{border:0;border-radius:12px;background:var(--acc);color:#fff;font:inherit;font-weight:800;padding:0 16px;cursor:pointer}
.iur .det{flex-basis:100%;padding-left:38px}
.iur .det .inl{padding:0;align-items:stretch;margin-bottom:4px}
.iur .det .m{align-self:center}
.iur .det .m{color:var(--mute);font-size:12px;font-weight:700;width:48px}
.iur .dep{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:13px;color:var(--mute)}
.iur .dep b{margin-left:auto;color:var(--ink)}
.iur .dep button{border:0;background:none;color:var(--mute);font:inherit;font-size:16px;cursor:pointer;padding:0 4px}
.trf{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line)}
.trf:last-child,.pd:last-child{border:0}
.trf .av,.pd .av{margin:0;border-color:transparent;width:30px;height:30px;font-size:12px;flex-shrink:0}
.trf .nm{flex:1;min-width:0;overflow-wrap:anywhere;font-weight:600}
.trf .l{flex-shrink:0;border:1.5px solid var(--acc);color:var(--acc);background:#fff;border-radius:9px;padding:4px 10px;font:inherit;font-weight:800;font-size:12px;cursor:pointer}
.pd{border-bottom:1px solid var(--line)}
.pd summary{display:flex;align-items:center;gap:8px;padding:8px 0;cursor:pointer;list-style:none}
.pd summary::-webkit-details-marker{display:none}
.pd .n{flex:1;min-width:0;overflow-wrap:anywhere}
.pd .n small span{white-space:nowrap}
.pd .n b{display:block}
.pd .n small{color:var(--mute);font-weight:600;font-size:11.5px}
.pd .s{font-weight:800;white-space:nowrap}
.pd.me{background:var(--acc-soft);border-radius:10px;padding:0 8px;margin:0 -8px}
.pd .dt{padding:0 0 6px 38px;overflow-wrap:anywhere}
.pd .dt .tr{font-size:12.5px;padding:5px 0}
.chips .chip{max-width:100%;overflow-wrap:anywhere;text-align:left}
.kas .lbl{gap:8px;overflow-wrap:anywhere}
.kas .lbl a{flex-shrink:0}

/* uang: realisasi + catat pengeluaran */
.sumc small{color:var(--mute);font-weight:600}
.sumc .big{margin:2px 0 0}
.sumc .bar{margin:10px 0}
.split{display:flex;gap:8px}
.split div{flex:1;min-width:0;background:var(--bg);border-radius:12px;padding:8px 10px;font-size:11px;color:var(--mute);font-weight:700}
.split div b{display:block;color:var(--ink);font-size:14px;overflow-wrap:anywhere}
.bar.over i{background:var(--red)}
.over-t{color:var(--red);font-weight:800}
.tag.o{background:#fff3e0;color:#b07400}
.seg{display:flex;background:#e8eaed;border-radius:12px;padding:3px;margin-bottom:12px}
.seg a,.seg label{position:relative;flex:1;text-align:center;padding:8px 4px;border-radius:9px;font-weight:700;font-size:13px;color:#5b616b;cursor:pointer}
.seg a.on,.seg label:has(input:checked){background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label:has(input:focus-visible){outline:2px solid var(--acc)}
.rp{border-bottom:1px solid var(--line)}
.rp:last-child{border:0}
.rp summary,.rp .rs{display:block;padding:9px 0;cursor:pointer;list-style:none}
.rp .rs{cursor:default}
.rp summary::-webkit-details-marker{display:none}
.rp .h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.rp .h b{min-width:0;overflow-wrap:anywhere}
.rp .h>span{font-weight:800;white-space:nowrap}
.rp .bar{height:5px;margin:6px 0 4px}
.rp .m{display:flex;justify-content:space-between;gap:8px;color:var(--mute);font-weight:600;font-size:12px}
.rp .m>span:last-child{text-align:right}
.rp .fds{padding:0 0 6px 10px;margin-bottom:6px;border-left:2px solid var(--line)}
.day{font-size:11px;color:#a3a8b0;font-weight:800;letter-spacing:.6px;margin:14px 2px 6px;text-transform:uppercase}
.fd{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.fd:last-child{border:0}
.fd .ic{width:30px;height:30px;border-radius:10px;background:var(--acc-soft);color:var(--acc);display:grid;place-items:center;flex-shrink:0}
.fd .ic svg{width:16px;height:16px}
.fd .n{flex:1;min-width:0}
.fd .n b{display:block;overflow-wrap:anywhere}
.fd .n small{display:block;color:var(--mute);font-weight:600;font-size:12px;overflow-wrap:anywhere}
.fd .v{font-weight:800;text-align:right;max-width:48%;overflow-wrap:anywhere}
.fd .v .warn{display:block;font-weight:600}
/* panel catat */
.panel[data-mode=exp] .err:empty{display:none}
.pg>select{width:100%;text-overflow:ellipsis}
.np{display:flex;gap:8px}
.np input{flex:1;min-width:0;height:44px;font:inherit;font-size:15px;font-weight:500;color:var(--ink);border:1.5px solid #e3e6ea;border-radius:12px;padding:0 12px;background:#fff}
.np .x{flex:none;width:44px;height:44px;border:0;border-radius:12px;background:var(--bg);color:var(--mute);font:inherit;font-size:22px;line-height:1;cursor:pointer}
.hint{margin-top:8px;background:var(--bg);border-radius:12px;padding:8px 10px;font-size:12px;font-weight:700;color:#5b616b}
.hint .hl{display:flex;justify-content:space-between;gap:8px}
.hint .bar{height:5px;margin:6px 0 0}
.chip svg{width:16px;height:16px;margin:-3px 6px -3px 0;vertical-align:middle}
.dv{display:flex;flex-direction:column;gap:12px}
.mg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.cf{display:flex;flex-direction:column;gap:12px}
.cf>span{font-weight:700}
.panel[data-mode=exp]>.ibtns,.panel[data-mode=exp]>.cf{position:sticky;bottom:calc(-24px - env(safe-area-inset-bottom,0px));background:#fff;padding:8px 0 calc(24px + env(safe-area-inset-bottom,0px));margin-bottom:calc(-24px - env(safe-area-inset-bottom,0px))}
.panel[data-mode=exp] .ptitle{overflow-wrap:anywhere}
/* split bill per item + scan */
.mg .fld{min-width:0;overflow-wrap:anywhere;justify-content:flex-end}
.dv>*{min-width:0}
.scan{position:relative;flex:none;display:flex;align-items:center;gap:6px;background:var(--ink);color:#fff;border-radius:12px;padding:8px 12px;font-weight:800;font-size:13px;cursor:pointer}
.scan svg{width:15px;height:15px}
.scan input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.scan:has(input:focus-visible){outline:2px solid var(--acc);outline-offset:2px}
[data-split-item]{display:flex;flex-direction:column;gap:12px}
.okb{display:flex;align-items:center;gap:8px;background:var(--acc-soft);color:#16784f;border-radius:12px;padding:9px 12px;font-weight:700;font-size:13px}
.okb svg{width:16px;height:16px;flex:none;stroke-width:2.4}
[data-rows]{display:flex;flex-direction:column}
.itm{display:flex;flex-direction:column;gap:8px;padding:12px 0;border-bottom:1px solid var(--line)}
.itm:first-child{padding-top:0}
.ir{display:flex;align-items:center;gap:8px;min-width:0}
.itm input[data-in],.itm input[data-ip]{flex:1;min-width:0;height:40px;font:inherit;font-size:15px;font-weight:500;color:var(--ink);border:1.5px solid #e3e6ea;border-radius:12px;padding:0 12px;background:#fff}
.itm input:invalid:not(:placeholder-shown){border-color:var(--red)}
.itm .qs{flex:none;height:40px}
.itm .qs button{padding:0 12px;height:100%}
.itm .qs input{width:34px}
.itm .x{flex:none;width:40px;height:40px;border:0;border-radius:12px;background:var(--bg);color:var(--mute);font:inherit;font-size:22px;line-height:1;cursor:pointer}
.itm [data-lt]{flex:none;max-width:40%;text-align:right;overflow-wrap:anywhere}
.tk{display:flex;flex-wrap:wrap;gap:6px}
.ta{position:relative;display:block;cursor:pointer}
.ta input{position:absolute;opacity:0;pointer-events:none}
.ta .av{margin:0;width:34px;height:34px;font-size:13px;border-color:transparent}
.ta input:not(:checked)+.av{background:#eceef1!important;color:#a3a8b0}
.ta input:focus-visible+.av{outline:2px solid var(--acc);outline-offset:2px}
.iadd{display:block;width:100%;border:1.5px dashed #c9ccd2;border-radius:12px;padding:10px;background:none;color:#5b616b;font:inherit;font-weight:700;font-size:13px;cursor:pointer}
.tot{display:flex;justify-content:space-between;gap:10px;font-size:13px;font-weight:600;color:#5b616b;padding:3px 0}
.tot span{min-width:0;overflow-wrap:anywhere}
.tot span:last-child{text-align:right}
.tot.b{font-weight:800;color:var(--ink);font-size:15px;border-top:1px solid var(--line);padding-top:8px;margin-top:3px}
.po{display:flex;flex-wrap:wrap;gap:8px}
.pc{display:flex;align-items:center;gap:6px;min-width:0;background:var(--bg);border-radius:12px;padding:4px 10px 4px 4px;font-weight:800;font-size:13px;overflow-wrap:anywhere}
.pc .av{margin:0;width:24px;height:24px;font-size:10px;border-color:transparent;flex:none}
[data-split-item] .fld input:invalid{border-color:var(--red)}

.card>.ch{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:15px}
.card>.ch b{font-weight:800}.card>.ch span{font-weight:800}
.card>.ch+.bar{margin:8px 0 4px}.card>.ch~.m{font-size:12px;color:var(--mute);font-weight:600;text-align:right;margin-bottom:4px}
.card>.ch{font-size:16px;padding-bottom:2px}
.card>.ch~.m{border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:2px}
.card>.ch+.psr,.card>.ch+.rp{border-top:1px solid var(--line);margin-top:8px}
.card>.ch~.rp .h b,.card>.ch~.psr .h b{font-weight:600;font-size:14px}
.card>.ch~.rp .h span,.card>.ch~.psr .h span{font-weight:700;font-size:14px}
.card>.ch~.rp .bar{height:4px}
.nc{margin-top:10px}
/* bucket list */
.bfl{display:flex;gap:6px;overflow-x:auto;margin:0 0 12px;scrollbar-width:none}
.bfl a{padding:7px 12px;border-radius:12px;background:#fff;font-weight:700;font-size:12px;color:var(--mute);white-space:nowrap;box-shadow:0 1px 4px rgba(0,0,0,.05)}
.bfl a.on{background:var(--ink);color:#fff}
.city{font-size:15px;font-weight:800;margin:4px 2px 6px}
.area{font-size:10.5px;font-weight:800;color:#a3a8b0;letter-spacing:.6px;text-transform:uppercase;margin:8px 0 2px}
.card>.area:first-child{margin-top:0}
.bk{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}
.bk:last-child{border:0}
.bk .ic{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;flex-shrink:0}
.bk .ic svg{width:17px;height:17px}
.k-wisata{background:#e7f5ee;color:#1e9e6a}.k-kuliner{background:#fff3e0;color:#b07400}.k-belanja{background:#eef0fc;color:#4b5bd6}.k-lainnya{background:#f0f1f3;color:#5b616b}
.bk .n{flex:1;min-width:0;display:block}.bk .n b{font-size:14px;overflow-wrap:anywhere}
.bk .n small{display:block;color:var(--mute);font-weight:600;font-size:12px;margin-top:1px}
.bk.x .n b{text-decoration:line-through;color:#a3a8b0}
.bst{font-size:10px;font-weight:800;padding:2px 6px;border-radius:6px;margin-left:6px;vertical-align:2px}
.bst.in{background:var(--acc-soft);color:var(--acc)}.bst.no{background:#eceef1;color:var(--mute)}
.bk .ft{display:flex;align-items:center;gap:10px;margin-top:5px;font-size:11.5px;font-weight:700;color:var(--mute)}
.bk .ft>span{display:flex;align-items:center;gap:3px}
.bk .ft svg{width:13px;height:13px}
.vt.me{color:var(--acc)}
.bk .avs{margin:0 0 0 2px}.bk .avs .av{width:17px;height:17px;font-size:8px}
.who{font-size:12px;color:var(--mute);font-weight:600;margin:2px 0 12px;overflow-wrap:anywhere}
.ig{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.ig div{background:var(--bg);border-radius:12px;padding:8px 11px;font-size:11px;font-weight:700;color:var(--mute)}
.ig div b{display:block;color:var(--ink);font-size:14px;margin-top:1px;overflow-wrap:anywhere}
.mp{display:flex;align-items:center;justify-content:center;gap:6px;border:1.5px solid #e3e6ea;border-radius:12px;padding:10px;font-weight:800;font-size:13px;margin-bottom:12px}
.mp svg{width:16px;height:16px}
.bnote{margin:0 0 12px;color:#3a3f47;font-size:13px;overflow-wrap:anywhere}
.vb{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.btnv{display:inline-flex;align-items:center;gap:6px;border:2px solid #e3e6ea;background:#fff;border-radius:12px;padding:7px 12px;font:inherit;font-weight:800;font-size:13px;color:var(--ink);cursor:pointer}
.btnv svg{width:16px;height:16px}.btnv.on{border-color:var(--acc);background:var(--acc-soft);color:var(--acc)}
.vb .avs{margin:0}
.cm{padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.cm b{font-size:12.5px}.cm small{color:#a3a8b0;font-weight:600;font-size:11px;margin-left:6px}
.cm p{margin:2px 0 0;color:#3a3f47;overflow-wrap:anywhere}
.cm0{font-size:13px;padding:4px 0}
.ci{display:flex;gap:8px;margin:10px 0 4px}
.ci input{flex:1;min-width:0;font:inherit;border:1.5px solid #e3e6ea;border-radius:12px;padding:9px 12px}
.chip svg{width:14px;height:14px;vertical-align:-2px;margin-right:4px}
/* perbandingan (F1) */
.gh{display:flex;justify-content:space-between;align-items:center;margin:6px 2px 8px}
.gh b{font-size:16px;font-weight:800;overflow-wrap:anywhere}
.fw{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 12px;margin:0 -16px 8px;padding-left:16px;scroll-padding-left:16px;scrollbar-width:none}
.fw::after{content:"";flex:0 0 6px}
.fc{flex:0 0 calc(50% - 30px);min-width:150px;max-width:230px;scroll-snap-align:start;background:#fff;border-radius:18px;padding:12px;box-shadow:0 2px 10px rgba(20,22,26,.06);display:flex;flex-direction:column}
.fc.chs{box-shadow:inset 0 0 0 2px var(--acc),0 2px 10px rgba(20,22,26,.06)}
.fca{display:block;flex:1}
.fc h5{margin:0;font-size:14px;line-height:1.25;height:36px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.fc .r{height:44px;border-top:1px solid var(--line);padding-top:6px;overflow:hidden}
.fc .r small{display:block;font-size:10px;font-weight:800;color:#a3a8b0;text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc .r b{display:flex;align-items:center;gap:4px;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fc .r b svg{width:14px;height:14px;flex:none}
.best{color:var(--acc)}.best::after{content:"★";font-size:10px;margin-left:3px}
.pkb{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:8px;border:1.5px solid var(--acc);color:var(--acc);background:#fff;border-radius:11px;padding:7px;font:inherit;font-weight:800;font-size:12.5px;cursor:pointer;width:100%}
.pkb.d{background:var(--acc);color:#fff}.pkb svg{width:14px;height:14px}
.fc.add{align-items:center;justify-content:center;gap:6px;flex-direction:row;background:none;box-shadow:none;border:1.5px dashed #c9ccd2;color:var(--mute);font-weight:800;font-size:13px}
.fc.add svg{width:16px;height:16px}
a.lnk{display:inline-flex;align-items:center;gap:4px;color:var(--acc)}
.ig div b .lnk svg{width:13px;height:13px}
.kf{display:grid;grid-template-columns:1fr auto auto 36px;gap:6px;margin-bottom:6px}
.kf input,.kf select{min-width:0;height:40px;font:inherit;font-size:13px;border:1.5px solid #e3e6ea;border-radius:11px;padding:0 8px;background:#fff}
.kf select[hidden]{display:none!important}
.kf .x{border:0;border-radius:11px;background:var(--bg);color:var(--mute);font:inherit;font-size:20px;cursor:pointer}
.btn.wide svg{width:15px;height:15px;vertical-align:-2px;margin-right:4px}
.fx{font-size:12px;margin:10px 0 0}
@media (min-width:900px){.fw{margin:0 0 8px;padding-left:2px}.fc{flex-basis:210px}}
.panel .ptitle,.ig div b,.fc h5{overflow-wrap:anywhere}
/* referensi */
.rf{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line)}
.rf:last-child{border:0}
.rfa{flex:1;min-width:0;display:block;padding:11px 0}
.rfa .n b{display:block;font-size:14px;overflow-wrap:anywhere}
.rfa .n small{display:block;color:var(--mute);font-weight:600;font-size:12px;margin-top:1px;overflow-wrap:anywhere}
.rfo{width:36px;height:36px;flex:none;border-radius:11px;background:var(--acc-soft);color:var(--acc);display:grid;place-items:center}
.rfo svg{width:17px;height:17px}
.rfa .n small.url{color:var(--acc);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* perbandingan: vote di kartu, pita dipilih */
.fw{padding-top:12px}
.fc{position:relative}
.rib{position:absolute;top:-10px;left:12px;display:flex;align-items:center;gap:3px;background:var(--acc);color:#fff;font-size:10.5px;font-weight:800;padding:3px 9px 3px 7px;border-radius:8px;letter-spacing:.3px;box-shadow:0 2px 6px rgba(30,158,106,.3)}
.rib svg{width:12px;height:12px}
.vt3{display:flex;align-items:center;justify-content:space-between;gap:6px;border-top:1px solid var(--line);padding-top:8px;min-height:40px}
.thumb{display:inline-flex;align-items:center;gap:4px;border:1.5px solid #e3e6ea;background:#fff;border-radius:10px;padding:5px 9px;font:inherit;font-weight:800;font-size:12.5px;color:var(--ink);cursor:pointer}
.thumb svg{width:14px;height:14px}.thumb.on{border-color:var(--acc);background:var(--acc-soft);color:var(--acc)}
span.thumb{cursor:default}
.vt3 .avs{margin:0}.vt3 .avs .av{width:18px;height:18px;font-size:8px}
.fc .pkb{margin-top:8px}
.fc.chs .pkb{border-color:#e3e6ea;color:var(--mute)}
/* export */
.hero .acts .btn.ic{width:38px;padding:0;display:grid;place-items:center}.hero .acts .btn.ic svg{width:18px;height:18px}
.xo{display:flex;gap:10px;margin:4px 0 12px}
.xopt{flex:1;border:2px solid #e3e6ea;border-radius:16px;padding:14px 10px;text-align:center;cursor:pointer;position:relative}
.xopt input{position:absolute;opacity:0}
.xopt:has(input:checked){border-color:var(--acc);background:var(--acc-soft)}
.xopt .ic2{width:42px;height:42px;border-radius:12px;margin:0 auto 6px;display:grid;place-items:center;font-weight:900;font-size:12px;color:#fff}
.xopt .ic2.x{background:#1d6f42}.xopt .ic2.p{background:#e5484d}
.xopt b{display:block;font-size:14px}
.xinc{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px}
.xinc span{background:var(--bg);border-radius:8px;padding:3px 9px;font-size:12px;font-weight:700;color:#5b616b}
.btn.wide svg{width:16px;height:16px;vertical-align:-3px;margin-right:6px}
.rpt-bar{display:flex;justify-content:space-between;gap:8px;margin-bottom:14px}
.rpt-bar .btn svg{width:16px;height:16px;vertical-align:-3px;margin-right:6px}
.report{background:#fff;border-radius:16px;padding:22px 20px;box-shadow:0 2px 10px rgba(20,22,26,.05);font-size:12px;color:#14161a;overflow-x:auto}
.report h1{margin:0;font-size:22px}.report header{margin-bottom:6px}
.report h2{font-size:13px;color:var(--acc);text-transform:uppercase;letter-spacing:.6px;border-bottom:2px solid var(--acc);padding-bottom:3px;margin:22px 0 8px}
.report h4{margin:12px 0 4px;font-size:12px}
.report table{width:100%;border-collapse:collapse;margin-bottom:6px}
.report th{font-size:10px;color:var(--mute);text-transform:uppercase;letter-spacing:.3px;text-align:left;padding:5px 6px;border-bottom:1.5px solid var(--line)}
.report td{padding:4px 6px;border-bottom:1px solid var(--line);vertical-align:top}
.report .n{text-align:right;white-space:nowrap}.report .neg{color:var(--red)}
.report tr.grp td{font-weight:800;background:#fafbfc}
.report td.best{color:var(--acc);font-weight:800}.report td.best::after{content:" ★";font-size:9px}
@media print{
  @page{size:A4;margin:14mm}
  body{background:#fff!important}
  body *{visibility:hidden}
  .report,.report *{visibility:visible}
  .report{position:absolute;left:0;top:0;width:100%;box-shadow:none;padding:0;border-radius:0;overflow:visible;font-size:10px}
  .report section{break-inside:auto}.report h2{break-after:avoid}.report tr{break-inside:avoid}
}
.panel[data-mode=export] .ibtns .btn.pr:not(.ibtn):not(.dng){background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;gap:6px}
.panel[data-mode=export] .ibtns .btn.pr svg{margin:0}
.rpt-bar .btn:not(.pr){background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.06)}
/* export v2: pilih bagian + PDF ringkas */
.lbl.xl{display:flex;justify-content:space-between;align-items:center}
.lnkb{border:0;background:none;color:var(--acc);font:inherit;font-size:12px;font-weight:800;cursor:pointer;text-transform:none;letter-spacing:0}
.xinc label{cursor:pointer}.xinc input{position:absolute;opacity:0}
.xinc span{display:inline-block;border:1.5px solid #e3e6ea;background:#fff;border-radius:9px;padding:4px 10px;font-size:12px;font-weight:700;color:var(--mute)}
.xinc input:checked+span{border-color:var(--acc);background:var(--acc-soft);color:var(--acc)}
.xinc input:focus-visible+span{outline:2px solid var(--acc)}
.panel[data-mode=export] .ibtns .btn.pr:disabled{opacity:.45}
.report{max-width:820px}
.report table{table-layout:auto}
.report td small{display:block;color:var(--mute);font-size:.9em;font-weight:500}
.report td b{font-weight:700}
.report tr.x td{color:#a3a8b0;text-decoration:line-through}
.report tr.chs td{background:var(--acc-soft)}
.report .best{color:var(--acc);font-weight:800}.report .best::after{content:" ★";font-size:.8em}
.report .ind{padding-left:12px}.report small.o{display:inline;color:#b07400;font-weight:700}
.report .ok{color:var(--acc);font-weight:700}
.report .url{color:var(--acc);overflow-wrap:anywhere}
.report td{overflow-wrap:anywhere}
.report .itin td:first-child{white-space:nowrap;font-weight:700;width:1%}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin:4px 0 8px}
.kpi div{background:var(--bg);border-radius:10px;padding:8px 10px}
.kpi small{display:block;color:var(--mute);font-weight:700;font-size:11px}.kpi b{font-size:16px}
.report .meta{margin:4px 0;color:#3a3f47}
.warnb{background:#fdecec;color:#c53030;border-radius:10px;padding:8px 12px;font-weight:700;margin:10px 0}
.mb{break-inside:avoid;margin-bottom:6px}.mb h4 small{color:var(--mute);font-weight:600;margin-left:6px}
.ck{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px 16px}
.ck li{padding:1px 0;break-inside:avoid;color:#3a3f47}.ck li.on{color:#8a8f98}
@media print{
  .report{max-width:none;font-size:9.5pt}
  .report h2{font-size:11pt;margin-top:14pt}
  .report th{font-size:7.5pt}
  .kpi div{border:1px solid #e3e6ea;background:none}
  .warnb{border:1px solid #c53030;background:none}
  .report tr.grp td,.report tr.chs td{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
.report table.itin{table-layout:fixed}
.report table.itin th:nth-child(1){width:17%}.report table.itin th:nth-child(2){width:45%}.report table.itin th:nth-child(3){width:26%}.report table.itin th:nth-child(4){width:12%}
@media (max-width:600px){.ck{grid-template-columns:repeat(2,minmax(0,1fr))}}