/* ================================================================
   Keuangan SBT — UI mengikuti token desain template Saffra
   ================================================================ */
:root{
  /* Token desain mengikuti template Merrin */
  --accent:#5f6e14;--accent-hi:#6b7b18;--accent-ink:#fff;--accent-soft:#5f6e1421;--accent-text:#4b580c;--accent-glow:#5f6e1459;
  --bg:#e6e7ea;--card:#fbfbfc;--card-2:#f2f3f5;--card-3:#e4e5e9;--panel:#fbfbfc;
  --ink:#17181c;--ink-2:#363840;--muted:#5d606a;--line:#17181c14;--line-2:#17181c26;--rim:#17181c26;
  --good:#1b7746;--good-soft:#1b77461f;--bad:#b5381a;--bad-soft:#b5381a1c;--warn:#875700;--warn-soft:#c484122b;--info:#23559f;--info-soft:#23559f1c;
  --tile-1:#e5e8cd;--tile-2:#d9e8e1;--tile-3:#f0e4cc;--tile-4:#dbe3ef;--tile-5:#e4e5e9;--tile-ink:#17181c;--tile-muted:#17181ca8;
  --side-bg:#fbfbfc;--side-card:#f2f3f5;--side-hover:#17181c0b;--side-ink:#17181c;--side-line:#17181c14;--side-muted:#5d606a;--side-tile:#edf0dc;--side-w:256px;--rail-w:88px;
  --s1:#64761a;--s2:#3a63b5;--s3:#c4602f;--s4:#9a6fbf;--s-other:#8b8e96;
  --font:"Urbanist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-2xs:11px;--fs-xs:12px;--fs-sm:12.5px;--fs-md:13.5px;--fs-base:14px;--fs-lg:15px;--fs-xl:17px;--fs-2xl:20px;--fs-3xl:22px;--fs-4xl:26px;--fs-display:34px;
  --r-sm:10px;--r-md:14px;--r-lg:18px;--r-xl:24px;
  --shadow:0 1px 2px #17181c0d,0 10px 26px -16px #17181c33;--shadow-sm:0 1px 2px #17181c0d;--shadow-lg:0 2px 6px #17181c12,0 28px 60px -24px #17181c52;
  --ease:cubic-bezier(.22,1,.36,1);--row-hover:#f3f4f5;
  color-scheme:light;
}
[data-theme="dark"]{
  --accent:#b9c95c;--accent-hi:#c6d56c;--accent-ink:#1b1f05;--accent-soft:#b9c95c26;--accent-text:#c9d879;--accent-glow:#b9c95c40;
  --bg:#111214;--card:#1a1b1e;--card-2:#16171a;--card-3:#27282c;--panel:#1a1b1e;
  --ink:#eeeef0;--ink-2:#cfd0d5;--muted:#a2a4ac;--line:#eeeef014;--line-2:#eeeef029;--rim:#ffffff26;
  --good:#69c792;--good-soft:#69c79224;--bad:#f2967a;--bad-soft:#f2967a24;--warn:#e3ae58;--warn-soft:#e3ae5824;--info:#8bb2ee;--info-soft:#8bb2ee24;
  --tile-1:#2a2e1a;--tile-2:#1d2d27;--tile-3:#32291b;--tile-4:#1f2735;--tile-5:#27282c;--tile-ink:#eeeef0;--tile-muted:#eeeef0ad;
  --side-bg:#0c0d0f;--side-card:#16171a;--side-hover:#ffffff0b;--side-ink:#eceef0;--side-line:#ffffff12;--side-muted:#9b9ea6;--side-tile:#1e2414;
  --s1:#7f9230;--s2:#5f84d2;--s3:#c96a41;--s4:#9a7fd0;--s-other:#80838b;
  --shadow:0 1px 2px #0000004d,0 12px 30px -16px #0009;--shadow-sm:0 1px 2px #0006;--shadow-lg:0 2px 6px #0006,0 30px 70px -24px #000c;
  --row-hover:#202125;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:var(--font);font-size:var(--fs-base);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.45}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent-text)}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.hidden{display:none!important}
svg.i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Shell ---------- */
.app{display:grid;grid-template-columns:var(--side-w) 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;background:var(--side-bg);color:var(--side-ink);display:flex;flex-direction:column;padding:16px 12px;gap:4px;overflow-y:auto;z-index:40}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 14px}
.brand-logo{width:38px;height:38px;border-radius:11px;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700;font-size:19px}
.brand b{display:block;font-size:var(--fs-lg)}.brand small{color:var(--side-muted);font-size:var(--fs-xs)}
.nav-sec{font-size:var(--fs-2xs);letter-spacing:.08em;text-transform:uppercase;color:var(--side-muted);padding:14px 10px 6px}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:10px;color:var(--side-ink);text-decoration:none;font-size:var(--fs-md);transition:background .15s}
.nav a:hover{background:var(--side-hover)}
.nav a.active{background:var(--accent);color:#fff}
.nav a .badge{margin-left:auto;font-size:var(--fs-2xs);background:#ffffff1c;padding:1px 7px;border-radius:99px}
.side-foot{margin-top:auto;border-top:1px solid var(--side-line);padding-top:12px;display:flex;align-items:center;gap:10px}
.avatar{width:34px;height:34px;border-radius:50%;background:#ffffff1f;display:grid;place-items:center;font-weight:600;font-size:var(--fs-sm);flex:none}
.side-foot .who{min-width:0;flex:1}.side-foot .who b{display:block;font-size:var(--fs-md);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.side-foot .who small{color:var(--side-muted);font-size:var(--fs-xs);text-transform:capitalize}
.side-foot button{background:none;border:0;color:var(--side-muted);cursor:pointer;padding:6px;border-radius:8px}.side-foot button:hover{background:var(--side-hover);color:#fff}

.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;padding:12px 28px;background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.crumb{font-size:var(--fs-md);color:var(--muted)}.crumb b{color:var(--ink);font-weight:600}
.top-r{margin-left:auto;display:flex;align-items:center;gap:8px}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:99px;padding:6px 12px;font-size:var(--fs-sm);color:var(--ink-2)}
.icon-btn{width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;cursor:pointer;color:var(--ink-2)}
.icon-btn:hover{border-color:var(--line-2)}
.burger{display:none}
.page{padding:24px 28px 48px;max-width:1520px;width:100%}
.page-h{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.page-h h1{margin:0;font-size:var(--fs-display);line-height:1.1;font-weight:700;letter-spacing:-.01em}
.page-h p{margin:6px 0 0;color:var(--muted)}
.page-h .acts{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

/* ---------- Buttons / inputs ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 16px;border-radius:var(--r-md);border:1px solid var(--line-2);background:var(--card);cursor:pointer;font-weight:600;font-size:var(--fs-md);white-space:nowrap;transition:transform .1s,background .15s}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:0 8px 18px -10px var(--accent)}
.btn.primary:hover{background:var(--accent-hi)}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.ghost{background:transparent;border-color:transparent}
.btn.sm{padding:6px 11px;font-size:var(--fs-sm);border-radius:10px}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.input,.select,textarea.input{width:100%;padding:9px 12px;border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--card);outline:none;font-size:var(--fs-md);min-height:38px}
.input:focus,.select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.input[readonly],.input:disabled,.select:disabled{background:var(--card-2);color:var(--ink-2)}
.input.err,.select.err{border-color:var(--bad);box-shadow:0 0 0 3px var(--bad-soft)}
.search{position:relative;flex:1;min-width:200px}.search svg{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--muted)}.search .input{padding-left:36px}
.seg{display:inline-flex;background:var(--card-2);border:1px solid var(--line);border-radius:11px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:none;padding:6px 12px;border-radius:8px;cursor:pointer;font-size:var(--fs-sm);color:var(--muted);font-weight:500}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
label.f{display:block;font-size:var(--fs-sm);font-weight:600;margin-bottom:5px;color:var(--ink-2)}
label.f .req{color:var(--bad)}
.help{font-size:var(--fs-xs);color:var(--muted);margin-top:4px}.ferr{font-size:var(--fs-xs);color:var(--bad);margin-top:4px}

/* ---------- Cards / tiles ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow)}
.card-h{display:flex;align-items:center;gap:12px;padding:16px 18px 6px}.card-h h3{margin:0;font-size:var(--fs-lg);font-weight:600}.card-h small{color:var(--muted);font-size:var(--fs-sm)}
.card-b{padding:12px 18px 18px}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}
.tile{border-radius:var(--r-lg);padding:16px 18px;color:var(--tile-ink);border:1px solid var(--line)}
.tile .t-l{display:flex;align-items:center;gap:8px;font-size:var(--fs-md);color:var(--tile-muted)}
.tile .t-v{font-size:var(--fs-3xl);font-weight:700;margin:8px 0 6px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .t-f{font-size:var(--fs-sm);color:var(--tile-muted);display:flex;align-items:center;gap:6px}
.t1{background:var(--tile-1)}.t2{background:var(--tile-2)}.t3{background:var(--tile-3)}.t4{background:var(--tile-4)}.t5{background:var(--tile-5)}
.chg{display:inline-flex;align-items:center;gap:3px;background:#ffffffa6;padding:1px 7px;border-radius:99px;font-weight:600;font-size:var(--fs-xs)}
[data-theme="dark"] .chg{background:#0000003d}
.chg.up{color:var(--bad)}.chg.down{color:var(--good)}
.grid2{display:grid;grid-template-columns:1.35fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.mt{margin-top:16px}

/* ---------- Tags ---------- */
.tag{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:99px;font-size:var(--fs-xs);font-weight:600;background:var(--card-2);border:1px solid var(--line);white-space:nowrap}
.tag.week{background:var(--accent-soft);color:var(--accent-text);border-color:transparent}
.tag.on{background:var(--good-soft);color:var(--good);border-color:transparent}
.tag.off{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.tag.imp{background:var(--tile-5);color:var(--tile-muted);border-color:transparent;font-weight:500}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}

/* ---------- Toolbar & filters ---------- */
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 16px;border-bottom:1px solid var(--line)}
.filters{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--card-2)}
.filters .span2{grid-column:span 2}
.filters label{font-size:var(--fs-xs);color:var(--muted);display:block;margin-bottom:4px;font-weight:600}
.chips{display:flex;gap:6px;flex-wrap:wrap;padding:10px 16px 0}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--accent-soft);color:var(--accent-text);border-radius:99px;padding:3px 6px 3px 10px;font-size:var(--fs-xs);font-weight:600}
.chip button{border:0;background:none;color:inherit;cursor:pointer;padding:0 2px;font-size:14px;line-height:1}

/* ---------- Table ---------- */
.tbl-wrap{overflow:auto}
table.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--fs-md)}
.tbl th{position:sticky;top:0;background:var(--card);text-align:left;font-size:var(--fs-xs);letter-spacing:.04em;color:var(--muted);font-weight:700;padding:11px 12px;border-bottom:1px solid var(--line);white-space:nowrap;user-select:none;z-index:1}
.tbl th.sort{cursor:pointer}.tbl th.sort:hover{color:var(--ink)}
.tbl th .ar{opacity:.35;margin-left:4px}.tbl th.sorted .ar{opacity:1;color:var(--accent-text)}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl tbody tr{transition:background .12s;cursor:pointer}
.tbl tbody tr:hover{background:var(--row-hover)}
.tbl .r{text-align:right}
.tbl .ur{min-width:260px;max-width:440px}
.tbl .ur div{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tbl .acts{white-space:nowrap;text-align:right}
.tbl .acts button{background:none;border:0;padding:6px;border-radius:8px;color:var(--muted);cursor:pointer}
.tbl .acts button:hover{background:var(--card-3);color:var(--ink)}
.tbl .acts button.del:hover{color:var(--bad);background:var(--bad-soft)}
.tbl tfoot td{font-weight:700;background:var(--card-2);position:sticky;bottom:0}
.sub{display:block;font-size:var(--fs-xs);color:var(--muted);margin-top:2px}
.inactive{color:var(--muted)}.inactive::after{content:" (nonaktif)";font-size:var(--fs-2xs)}
.pager{display:flex;align-items:center;gap:10px;padding:12px 16px;flex-wrap:wrap;font-size:var(--fs-sm);color:var(--muted)}
.pager .pages{display:flex;gap:4px;margin-left:auto}
.pager .pages button{min-width:34px;height:34px;border-radius:10px;border:1px solid var(--line);background:var(--card);cursor:pointer}
.pager .pages button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.pager .pages button:disabled{opacity:.45;cursor:default}
.empty{padding:48px 16px;text-align:center;color:var(--muted)}
.empty svg{width:34px;height:34px;margin-bottom:6px}

/* ---------- Skeleton / loading ---------- */
.skel{background:linear-gradient(90deg,var(--card-2) 25%,var(--card-3) 50%,var(--card-2) 75%);background-size:300% 100%;animation:sk 1.3s infinite;border-radius:8px;height:14px}
@keyframes sk{0%{background-position:100% 0}100%{background-position:0 0}}
.spin{width:18px;height:18px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:rot .7s linear infinite;display:inline-block}
@keyframes rot{to{transform:rotate(360deg)}}
.topbar-load{position:fixed;left:0;top:0;height:3px;background:var(--accent);z-index:200;width:0;transition:width .3s var(--ease),opacity .3s}
.tbl-loading{position:relative}.tbl-loading::after{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--card) 55%,transparent)}

/* ---------- Modal ---------- */
.ov{position:fixed;inset:0;background:#0d0f1180;backdrop-filter:blur(2px);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;animation:fi .15s}
.modal{background:var(--card);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);width:min(720px,100%);max-height:calc(100vh - 40px);display:flex;flex-direction:column;animation:pop .22s var(--ease)}
.modal.sm{width:min(440px,100%)}
.modal-h{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--line)}
.modal-h h3{margin:0;font-size:var(--fs-xl)}
.modal-h .x{margin-left:auto}
.modal-b{padding:18px 22px;overflow:auto}
.modal-f{display:flex;gap:8px;justify-content:flex-end;padding:14px 22px;border-top:1px solid var(--line)}
@keyframes fi{from{opacity:0}}@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98)}}
.fgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.fgrid .c2{grid-column:span 2}.fgrid .c3{grid-column:span 3}.fgrid .c4{grid-column:span 4}.fgrid .c6{grid-column:span 6}
.auto{display:flex;align-items:center;gap:8px;background:var(--accent-soft);color:var(--accent-text);padding:9px 12px;border-radius:var(--r-sm);font-weight:600;font-size:var(--fs-md);min-height:38px}
.auto small{font-weight:500;opacity:.8}
.rp{position:relative}.rp span{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:600}.rp .input{padding-left:38px;font-variant-numeric:tabular-nums;font-weight:600;font-size:var(--fs-lg)}
.dl{display:grid;grid-template-columns:150px 1fr;gap:0;font-size:var(--fs-md)}
.dl dt{color:var(--muted);padding:9px 0;border-bottom:1px solid var(--line);font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em}
.dl dd{margin:0;padding:9px 0;border-bottom:1px solid var(--line)}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.checks label{display:flex;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:10px;cursor:pointer;font-size:var(--fs-md)}
.checks label:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}

/* ---------- Toast ---------- */
.toasts{position:fixed;right:20px;bottom:20px;z-index:300;display:flex;flex-direction:column;gap:8px;max-width:min(400px,calc(100vw - 40px))}
.toast{display:flex;gap:10px;align-items:flex-start;background:var(--ink);color:var(--bg);padding:12px 14px;border-radius:14px;box-shadow:var(--shadow-lg);font-size:var(--fs-md);animation:pop .25s var(--ease)}
.toast.ok svg{color:#57d394}.toast.err svg{color:#ff7b6e}.toast.warn svg{color:#f3a850}
[data-theme="dark"] .toast.ok svg{color:#17744b}[data-theme="dark"] .toast.err svg{color:#b42318}

/* ---------- Charts ---------- */
.chart{width:100%;display:block;overflow:visible}
.chart text{font-family:var(--font);fill:var(--muted);font-size:11px}
.chart .grid line{stroke:var(--line)}
.chart .lbl{fill:var(--ink-2);font-size:11.5px;font-weight:600}
.hbar{display:grid;grid-template-columns:110px 1fr auto;align-items:center;gap:10px;padding:6px 4px;border-radius:8px;cursor:default}
.hbar:hover{background:var(--card-2)}
.hbar .n{font-size:var(--fs-md);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hbar .track{height:10px;background:var(--card-2);border-radius:4px;overflow:hidden}
.hbar .fill{height:100%;background:var(--s1);border-radius:0 4px 4px 0;transition:width .6s var(--ease)}
.hbar .v{font-size:var(--fs-sm);font-variant-numeric:tabular-nums;text-align:right;min-width:110px}
.hbar .v small{display:block;color:var(--muted);font-size:var(--fs-2xs)}
.stack{display:flex;height:14px;border-radius:4px;overflow:hidden;gap:2px;margin:8px 0 14px}
.stack div{height:100%}
.legend{display:flex;flex-direction:column;gap:8px}
.legend .li{display:flex;align-items:center;gap:8px;font-size:var(--fs-md)}
.legend .li .v{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:600}
.legend .li small{color:var(--muted);width:44px;text-align:right}
.tip{position:fixed;pointer-events:none;background:var(--ink);color:var(--bg);padding:8px 10px;border-radius:10px;font-size:var(--fs-sm);z-index:400;box-shadow:var(--shadow-lg);white-space:nowrap;transform:translate(-50%,calc(-100% - 10px))}
.tip b{display:block}
.recent .it{display:flex;gap:12px;align-items:center;padding:10px 4px;border-bottom:1px solid var(--line)}
.recent .it:last-child{border-bottom:0}
.recent .ic{width:36px;height:36px;border-radius:11px;background:var(--card-2);display:grid;place-items:center;color:var(--ink-2);flex:none}
.recent .tx{min-width:0;flex:1}.recent .tx b{display:block;font-size:var(--fs-md);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.recent .tx small{color:var(--muted);font-size:var(--fs-xs)}
.recent .am{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- Login ---------- */
.login{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.login-art{background:var(--side-bg);color:var(--side-ink);padding:48px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.login-art h2{font-size:40px;line-height:1.1;margin:0 0 12px;max-width:460px}
.login-art p{color:var(--side-muted);max-width:420px}
.login-art .tiles-art{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:460px}
.login-art .tiles-art div{border-radius:18px;padding:16px;color:#17160f}
.login-art .tiles-art b{display:block;font-size:22px;margin-top:6px}
.login-form{display:grid;place-items:center;padding:32px}
.login-form form{width:min(380px,100%)}
.login-form h1{font-size:var(--fs-4xl);margin:0 0 4px}
.fld{margin-bottom:14px}

/* ---------- Mobile nav ---------- */
.bnav{display:none}
.side-ov{display:none}

@media (max-width:1180px){
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid2,.grid3{grid-template-columns:1fr}
  .filters{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;width:min(290px,84vw);transform:translateX(-102%);transition:transform .28s var(--ease)}
  .app.nav-open .side{transform:none}
  .app.nav-open .side-ov{display:block;position:fixed;inset:0;background:#0007;z-index:35}
  .burger{display:grid}
  .top{padding:10px 16px}
  .page{padding:18px 16px 96px}
  .page-h h1{font-size:var(--fs-4xl)}
  .bnav{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;background:var(--card);border-top:1px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom));z-index:45}
  .bnav a{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:var(--fs-2xs);color:var(--muted);text-decoration:none;padding:6px;border-radius:12px}
  .bnav a.active{background:var(--accent-soft);color:var(--accent-text)}
  .toasts{bottom:86px}
  .login{grid-template-columns:1fr}.login-art{display:none}
  .top .pill.clock{display:none}
}
@media (max-width:720px){
  .tiles{gap:10px}.tile{padding:14px}.tile .t-v{font-size:var(--fs-2xl)}
  .filters{grid-template-columns:1fr 1fr}.filters .span2{grid-column:span 2}
  .fgrid{grid-template-columns:1fr 1fr}.fgrid>*{grid-column:span 2!important}.fgrid .half{grid-column:span 1!important}
  .dl{grid-template-columns:110px 1fr}
  /* Tabel menjadi kartu */
  table.tbl.cards thead{display:none}
  table.tbl.cards,table.tbl.cards tbody,table.tbl.cards tr,table.tbl.cards td{display:block;width:100%}
  table.tbl.cards tr{border-bottom:1px solid var(--line);padding:10px 14px}
  table.tbl.cards td{border:0;padding:3px 0;display:flex;gap:10px;max-width:none}
  table.tbl.cards td::before{content:attr(data-l);flex:0 0 96px;font-size:var(--fs-2xs);font-weight:700;color:var(--muted);letter-spacing:.04em;padding-top:2px}
  table.tbl.cards td.r{text-align:left}
  table.tbl.cards td.acts{justify-content:flex-end}table.tbl.cards td.acts::before{display:none}
  table.tbl.cards tfoot{display:block}table.tbl.cards tfoot tr{display:flex}
  .modal{max-height:calc(100vh - 20px);border-radius:18px}.ov{padding:10px;align-items:flex-end}
  .hbar{grid-template-columns:84px 1fr auto}.hbar .v{min-width:90px}
  .page-h .acts{margin-left:0;width:100%}.page-h .acts .btn{flex:1}
}
@media (forced-colors:active){.hbar .fill,.stack div{forced-color-adjust:none;border:1px solid CanvasText}}

/* ---------- Tambahan ---------- */
a.btn{text-decoration:none;color:inherit}a.btn.primary{color:var(--accent-ink)}
.dt{position:relative}.dt .input{padding-right:40px;font-variant-numeric:tabular-nums}
.dt-btn{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:32px;height:30px;border:0;background:none;border-radius:8px;color:var(--muted);cursor:pointer;display:grid;place-items:center}
.dt-btn:hover:not(:disabled){background:var(--card-3);color:var(--ink)}.dt-btn:disabled{opacity:.4;cursor:default}
.dt-native{position:absolute;left:0;bottom:0;width:100%;height:1px;opacity:0;pointer-events:none;border:0;padding:0}
.colchart{min-height:220px}
@media (max-width:720px){
  .tile .t-v{white-space:normal;font-size:var(--fs-xl);overflow-wrap:anywhere}
  .top .btn.primary span{display:none}.top .btn.primary{padding:9px 11px}
  .crumb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
}


/* ================= Merrin layout ================= */
.app{grid-template-columns:var(--side-w) 1fr;transition:grid-template-columns .38s var(--ease)}
.side{background:var(--side-bg);color:var(--side-ink);box-shadow:inset -1px 0 0 var(--side-line);padding:16px 12px 12px;overflow-x:hidden}
.brand{padding:2px 6px 14px;gap:10px;display:flex;align-items:center;text-decoration:none;color:inherit}
.brand b{color:var(--side-ink);white-space:nowrap}.brand small{color:var(--side-muted);white-space:nowrap}
.brand-logo{background:var(--accent);border-radius:11px;width:36px;height:36px;flex:none;box-shadow:inset 0 -2px 0 #00000026}
.collapse-btn{margin-left:auto;width:30px;height:30px;border-radius:9px;border:1px solid var(--side-line);background:transparent;color:var(--side-muted);display:grid;place-items:center;cursor:pointer;flex:none;transition:transform .38s var(--ease)}
.collapse-btn:hover{background:var(--side-hover);color:var(--side-ink)}
.nav-sec{color:var(--side-muted);font-weight:600;padding:14px 10px 6px;white-space:nowrap;transition:opacity .2s}
.nav{position:relative}
.nav a{color:var(--side-ink);font-weight:500;border-radius:12px;padding:0 10px;height:38px;position:relative;z-index:1;white-space:nowrap;transition:background .2s,color .2s}
.nav a svg{color:var(--side-muted);transition:color .2s}
.nav a:hover{background:var(--side-hover)}
.nav a.active{background:transparent;color:var(--side-ink);font-weight:600}
.nav a.active svg{color:var(--accent-text)}
.nav a span{transition:opacity .2s}
/* indikator aktif yang bergeser antar menu */
.nav-ind{position:absolute;left:0;right:0;height:38px;border-radius:12px;background:var(--side-tile);z-index:0;transition:transform .42s var(--ease),opacity .2s;pointer-events:none}
.side-foot{border-top:0;padding-top:10px;flex-direction:column;align-items:stretch;gap:8px}
.side-card{background:var(--side-card);border-radius:14px;padding:10px 12px;font-size:var(--fs-xs);color:var(--side-muted)}
.side-card b{display:block;color:var(--side-ink);font-size:var(--fs-md);margin-top:2px}
.user-card{display:flex;align-items:center;gap:10px;padding:6px 4px;border-radius:12px}
.user-card .avatar{background:var(--accent-soft);color:var(--accent-text)}
.user-card .who{min-width:0;flex:1}.user-card .who b{color:var(--side-ink);display:block;font-size:var(--fs-md);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-card .who small{color:var(--side-muted);text-transform:capitalize;font-size:var(--fs-xs)}
.user-card button{background:none;border:0;color:var(--side-muted);cursor:pointer;padding:6px;border-radius:8px}.user-card button:hover{background:var(--side-hover);color:var(--side-ink)}
/* sidebar ciut (rail) */
.app.rail{grid-template-columns:var(--rail-w) 1fr}
.app.rail .side .brand>div:not(.brand-logo),.app.rail .nav a span,.app.rail .nav a .badge,.app.rail .side-card,.app.rail .user-card .who,.app.rail .user-card button{opacity:0;pointer-events:none;width:0;overflow:hidden}
.app.rail .nav-sec{opacity:0;height:10px;padding:0}
.app.rail .nav a{justify-content:center;padding:0}
.app.rail .brand{flex-direction:column;gap:10px}
.app.rail .collapse-btn{margin:0;transform:rotate(180deg)}
.app.rail .user-card{justify-content:center}
.top{background:color-mix(in srgb,var(--bg) 88%,transparent);border-bottom:0;gap:12px}
.top-search{position:relative;width:min(380px,40vw)}
.top-search svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);width:17px;height:17px}
.top-search input{width:100%;height:40px;border-radius:12px;border:0;background:var(--card);box-shadow:var(--shadow);padding:0 44px 0 38px;font-size:var(--fs-md);outline:none}
.top-search input:focus{box-shadow:0 0 0 2px var(--accent),var(--shadow)}
.top-search kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%);font:600 10.5px var(--font);color:var(--muted);background:var(--card-2);border:1px solid var(--line);border-radius:7px;padding:2px 6px}
.search-pop{position:absolute;left:0;right:0;top:46px;background:var(--card);border-radius:14px;box-shadow:var(--shadow-lg);padding:6px;display:none;z-index:50}
.search-pop.open{display:block;animation:pop .18s var(--ease)}
.search-pop a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:var(--ink);text-decoration:none;font-size:var(--fs-md)}
.search-pop a.sel,.search-pop a:hover{background:var(--card-2)}
.search-pop small{margin-left:auto;color:var(--muted)}
.crumb{display:none}
.pill{background:var(--card);border:0;box-shadow:var(--shadow);font-weight:600;border-radius:12px;padding:7px 12px}
.pill .dotlive{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.icon-btn{background:var(--card);border:0;box-shadow:var(--shadow);border-radius:12px;width:40px;height:40px}
.page-h h1{font-weight:600;letter-spacing:-.025em;font-size:var(--fs-display)}
.page-crumb{font-size:var(--fs-sm);color:var(--muted);margin-bottom:6px;font-weight:500}
.card{border:0;box-shadow:var(--shadow);border-radius:20px}
.btn{border-radius:12px;font-weight:600;border:0;box-shadow:var(--shadow-sm),inset 0 0 0 1px var(--line-2);height:38px;padding:0 16px;background:var(--card)}
.btn.sm{height:32px;padding:0 11px}
.btn.primary{background:var(--accent);color:var(--accent-ink);box-shadow:inset 0 -2px 0 #00000026,0 8px 18px -12px var(--accent-glow)}
.btn.primary:hover{background:var(--accent-hi)}
.btn.danger{box-shadow:inset 0 -2px 0 #00000026}
.btn.ghost{box-shadow:none}
.input,.select{border-radius:12px;border-color:var(--line-2);background:var(--card)}
.seg{background:var(--card-2);border:0;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line)}.seg button.on{border-radius:9px;box-shadow:var(--shadow-sm),inset 0 0 0 1px var(--line)}
.tile{border:0;border-radius:var(--r-lg);position:relative;transition:box-shadow .2s,transform .2s var(--ease)}
.tile:hover{transform:translateY(-2px)}
.tile:first-child{box-shadow:inset 0 0 0 1.5px var(--ink-2)}
.tile .t-l{font-weight:600}
.tile .t-l svg{width:18px;height:18px}
.tile .t-v{font-weight:600}
.tag.week{background:var(--accent-soft);color:var(--accent-text)}
.tag.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.chip{background:var(--accent-soft);color:var(--accent-text)}
.bnav a.active{background:var(--accent-soft);color:var(--accent-text)}
.toast{border-radius:14px}
.modal{border-radius:var(--r-xl)}
.modal.lg{width:min(960px,100%)}
.fsec+.fsec{margin-top:18px}
.fsec-h{font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.fsec-h::after{content:"";flex:1;height:1px;background:var(--line)}
table.tbl.wide td{white-space:nowrap}
table.tbl.wide td.ur{white-space:normal;min-width:280px}
table.tbl.wide td.clip{max-width:220px;overflow:hidden;text-overflow:ellipsis}
table.tbl.wide td.pre{white-space:pre-line;font-variant-numeric:tabular-nums}
table.tbl td.strong{font-weight:700}
table.tbl.wide th:first-child,table.tbl.wide td:first-child{position:sticky;left:0;background:var(--card);z-index:2}
.tbl tbody tr:hover{background:var(--row-hover)}
table.tbl.wide tbody tr:hover td{background:var(--row-hover)}
.tbl tfoot td.ft-empty{background:var(--card-2)}
.login-art{background:var(--accent);color:#fff}.login-art p{color:#ffffffcc}.login-art .brand b,.login-art .brand small{color:#fff}
.login-art .brand-logo{background:#ffffff26}

/* ================= Gerak (dibuat ulang mengikuti perilaku template) ================= */
/* 1. Masuk halaman: elemen naik + memudar bertahap */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.enter{animation:rise .56s var(--ease) both;animation-delay:calc(var(--i,0) * 55ms)}
/* 2. Judul halaman tersingkap dari kiri ke kanan */
@keyframes reveal{from{clip-path:inset(0 100% 0 0);transform:translateY(6px)}to{clip-path:inset(0 0 0 0);transform:none}}
.page-h h1.enter-title{animation:reveal .7s var(--ease) both}
/* 3. Baris tabel muncul berurutan */
@keyframes rowin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
tbody.rows-in tr{animation:rowin .45s var(--ease) both;animation-delay:calc(min(var(--r,0),14) * 28ms + 120ms)}
/* 4. Tema: lingkaran menyebar dari tombol (View Transitions API) */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
/* 5. Konten berganti halaman: pudar silang singkat */
@keyframes pagein{from{opacity:.0}to{opacity:1}}
.page.swap{animation:pagein .25s ease both}
.tbl .acts button,.nav a,.btn{transition:background .2s,color .2s,box-shadow .2s,transform .12s}
@media (prefers-reduced-motion:reduce){
  .enter,.page-h h1.enter-title,tbody.rows-in tr,.page.swap{animation:none!important}
  .app,.nav-ind,.collapse-btn{transition:none!important}
}
@media (max-width:900px){
  .app,.app.rail{grid-template-columns:1fr}
  .side{box-shadow:var(--shadow-lg)}
  .collapse-btn{display:none}
  .top-search{width:auto;flex:1}
  .top .pill.clock{display:none}
}
@media (max-width:720px){
  table.tbl.wide td{white-space:normal}
  table.tbl.wide th:first-child,table.tbl.wide td:first-child{position:static}
  .bnav{grid-template-columns:repeat(5,1fr)}
  .top-search kbd{display:none}
}

/* ================= Tab dashboard (garis bawah) ================= */
.utabs{display:flex;gap:6px;border-bottom:1px solid var(--line-2);margin:4px 0 18px;overflow-x:auto;scrollbar-width:none}
.utabs a{position:relative;display:inline-flex;align-items:center;gap:8px;padding:10px 14px 12px;color:var(--muted);text-decoration:none;font-weight:600;font-size:var(--fs-md);white-space:nowrap;transition:color .2s}
.utabs a:hover{color:var(--ink)}
.utabs a.on{color:var(--ink)}
.utabs a::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transition:transform .35s var(--ease)}
.utabs a.on::after{transform:scaleX(1)}
.ubadge{font-size:var(--fs-2xs);font-weight:700;color:var(--ink-2);background:var(--card-3);border-radius:99px;padding:1px 7px;min-width:20px;text-align:center}
.utabs a.on .ubadge{background:var(--accent-soft);color:var(--accent-text)}
.toolbar-plain{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.toolbar-plain .select{width:auto}
/* tile gaya gambar: hero gelap & putih polos */
.tile.tile-hero{background:#1e3a5f;color:#fff;box-shadow:none}
.tile.tile-hero .t-l,.tile.tile-hero .t-f{color:#ffffffc7}
[data-theme="dark"] .tile.tile-hero{background:#29476d}
.tile.tile-plain{background:var(--card);box-shadow:var(--shadow)}
.tiles .tile.tile-hero:first-child{box-shadow:none}
.bad-text{color:var(--bad)}
td.alasan{min-width:240px;max-width:380px;white-space:normal;font-size:var(--fs-sm)}
/* small multiples */
.smx{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.smx-i{background:var(--card-2);border-radius:14px;padding:12px 12px 6px}
.smx-h{display:flex;align-items:baseline;gap:8px}.smx-h b{font-size:var(--fs-md)}.smx-h span{margin-left:auto;font-weight:700}
.smx-s{font-size:var(--fs-xs);color:var(--muted);margin:2px 0 4px}
.smx svg text{font-size:9.5px}
@media (max-width:720px){.utabs a{padding:10px 10px 12px}.smx{grid-template-columns:1fr}}

/* dashboard SPPD/PANJAR: angka tidak terpotong baris */
#d-tab td.r.num{white-space:nowrap}
#d-tab td.nm{white-space:nowrap}
.grid2.grid2r{grid-template-columns:1fr 1.15fr}
.card.rank .hbar{grid-template-columns:170px 1fr auto}
@media (max-width:1180px){.grid2.grid2r{grid-template-columns:1fr}}
@media (max-width:720px){.card.rank .hbar{grid-template-columns:110px 1fr auto}#d-tab td.nm{white-space:normal}}

/* ---------- Master › Role ---------- */
.ra-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;padding:18px 18px 12px}
.ra-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ra-tools .select{min-width:200px}
.ra-super{display:flex;gap:10px;align-items:center;margin:0 18px 12px;padding:10px 14px;border-radius:12px;background:var(--accent-soft);color:var(--accent-text);font-size:var(--fs-sm)}
.ra-t th.c,.ra-t td.c{text-align:center;width:96px}
.ra-super[hidden]{display:none}
.ra-t tr.ra-grp td{background:var(--card-2)}
.ra-t tr.ra-sub td:first-child b{font-weight:500}
.ra-t td:first-child{white-space:nowrap}
#r-body td.num{white-space:nowrap}
.ra-tree{color:var(--muted);margin-right:8px;font-weight:400}
.ra-na{opacity:.45}
.ra-sp{display:block;font-size:10px;color:var(--muted);margin-top:2px}
.ra-note{margin:0;padding:12px 18px 18px;color:var(--muted);font-size:var(--fs-sm);line-height:1.55}
#r-body tr.sel td{background:var(--accent-soft)}
.sw{position:relative;display:inline-block;width:36px;height:20px;cursor:pointer;vertical-align:middle}
.sw input{position:absolute;opacity:0;inset:0;margin:0;cursor:inherit;z-index:1;width:100%;height:100%}
.sw span{position:absolute;inset:0;border-radius:99px;background:var(--line);transition:background .2s}
.sw span::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .2s cubic-bezier(.65,0,.35,1)}
.sw input:checked+span{background:var(--accent)}
.sw input:checked+span::after{transform:translateX(16px)}
.sw input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.sw input:disabled+span{opacity:.5;cursor:not-allowed}
@media (max-width:760px){.ra-t thead{display:none}.ra-t tr{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px 12px;border-bottom:1px solid var(--line)}.ra-t td{border:0!important;padding:4px!important;width:auto!important}.ra-t td:first-child{grid-column:1/-1;text-align:left}.ra-t td.c::before{content:attr(data-l);display:block;font-size:10px;color:var(--muted)}.ra-t td.ra-na{display:none}}

/* ---------- Chat, telepon & video call ---------- */
.chat-top{display:flex;align-items:center;gap:8px}
.ch-tb{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px 0 6px;border-radius:12px;border:0;background:var(--card);box-shadow:var(--shadow);cursor:pointer;color:var(--ink);font:inherit}
.ch-tb b{font-size:var(--fs-sm)}.ch-tb-l{font-size:var(--fs-xs);color:var(--muted)}
.ch-stack{display:flex}.ch-stack .ch-av{margin-left:-8px;box-shadow:0 0 0 2px var(--card)}.ch-stack .ch-av:first-child{margin-left:0}
.ch-tb-chat{position:relative}
.ch-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--bad);color:#fff;font:700 10px/18px var(--font,system-ui);font-style:normal;text-align:center;box-shadow:0 0 0 2px var(--bg,#fff)}
.ch-av{--h:200;position:relative;width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;font-size:13px;color:hsl(var(--h) 45% 28%);background:hsl(var(--h) 60% 86%)}
[data-theme="dark"] .ch-av{color:hsl(var(--h) 70% 85%);background:hsl(var(--h) 30% 28%)}
.ch-av.a-xs{width:26px;height:26px;font-size:10px}.ch-av.a-sm{width:34px;height:34px;font-size:12px}.ch-av.a-lg{width:52px;height:52px;font-size:17px}.ch-av.a-xl{width:104px;height:104px;font-size:34px}
.ch-av.grp svg{width:20px;height:20px}.ch-av.ch-none{background:var(--card-2);color:var(--muted)}.ch-av.ch-none svg{width:14px;height:14px}
.ch-on{position:absolute;right:0;bottom:0;width:11px;height:11px;border-radius:50%;background:#22b35e;box-shadow:0 0 0 2px var(--card)}
.ch-av.a-xs .ch-on{width:8px;height:8px}
.ch-pop{position:fixed;z-index:90;width:320px;max-width:calc(100vw - 24px);background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 50px -20px #0006;overflow:hidden;animation:chIn .18s ease-out}
.ch-pop-h{display:flex;justify-content:space-between;align-items:baseline;padding:14px 16px 10px;border-bottom:1px solid var(--line)}.ch-pop-h span{color:var(--muted);font-size:var(--fs-xs)}
.ch-pop-l{max-height:320px;overflow:auto;padding:6px}
.ch-pop-i{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:10px}.ch-pop-i:hover{background:var(--card-2)}
.ch-pop-i span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.ch-pop-i button,.ch-acts button{width:32px;height:32px;border-radius:10px;border:0;background:var(--accent-soft);color:var(--accent-text);display:grid;place-items:center;cursor:pointer}
.ch-pop-i button:hover,.ch-acts button:hover{background:var(--accent);color:var(--accent-ink)}
.ch-pop-i svg,.ch-acts svg{width:16px;height:16px}
.ch-pop-all{width:100%;border:0;border-top:1px solid var(--line);background:none;padding:12px;font:inherit;font-weight:600;color:var(--accent-text);cursor:pointer}
.ch-panel{position:fixed;z-index:70;top:0;right:0;bottom:0;width:400px;max-width:100vw;background:var(--card);border-left:1px solid var(--line);box-shadow:-20px 0 50px -30px #0005;display:flex;flex-direction:column;transform:translateX(105%);transition:transform .32s cubic-bezier(.65,0,.35,1);visibility:hidden}
.ch-panel.open{transform:none;visibility:visible}
@media (min-width:1280px){body.ch-open .main{margin-right:400px;transition:margin .32s cubic-bezier(.65,0,.35,1)}}
.ch-h{display:flex;align-items:center;gap:8px;padding:14px 14px 10px;border-bottom:1px solid var(--line)}
.ch-h>b{font-size:18px}.ch-h .sp{flex:1}
.ch-ib{width:36px;height:36px;border-radius:11px;border:0;background:none;color:var(--ink-2);display:grid;place-items:center;cursor:pointer;flex:none}
.ch-ib:hover{background:var(--card-2);color:var(--ink)}
.ch-rh .ch-rt{flex:1;min-width:0;display:flex;flex-direction:column}
.ch-rt b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ch-rt small{color:var(--muted);font-size:var(--fs-xs)}
.ch-search{margin:10px 14px 4px;display:flex;align-items:center;gap:8px;padding:0 12px;height:38px;border-radius:12px;background:var(--card-2);border:1px solid var(--line);color:var(--muted)}
.ch-search input{flex:1;border:0;background:none;outline:none;color:var(--ink);font:inherit;min-width:0}
.ch-tabs{display:flex;gap:4px;padding:8px 14px 4px}
.ch-tabs button{border:0;background:none;padding:6px 12px;border-radius:99px;font:inherit;font-size:var(--fs-sm);color:var(--muted);cursor:pointer;font-weight:500}
.ch-tabs button.on{background:var(--accent-soft);color:var(--accent-text);font-weight:600}
.ch-orow{display:flex;gap:12px;padding:10px 14px;overflow-x:auto;border-bottom:1px solid var(--line);min-height:76px;align-items:center;scrollbar-width:none}
.ch-orow-i{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;color:var(--ink-2);font:inherit;font-size:11px;width:52px;flex:none}
.ch-orow-i span{max-width:52px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-muted{color:var(--muted);font-size:var(--fs-sm)}
.ch-list{flex:1;overflow:auto;padding:6px}
.ch-item{display:flex;gap:12px;align-items:center;padding:10px;border-radius:14px;cursor:pointer;position:relative}
.ch-item:hover,.ch-item:focus-visible{background:var(--card-2);outline:none}
.ch-item-m{flex:1;min-width:0}
.ch-item-t{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.ch-item-t b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.ch-item-t time{font-size:11px;color:var(--muted);flex:none}
.ch-item-s{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:var(--fs-sm);margin-top:2px}
.ch-item-s>span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-item.unread .ch-item-t b{font-weight:800}.ch-item.unread .ch-item-s>span{color:var(--ink);font-weight:600}.ch-item.unread time{color:var(--accent-text);font-weight:700}
.ch-cnt{min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--accent);color:var(--accent-ink);font:700 11px/20px var(--font,system-ui);font-style:normal;text-align:center}
.ch-star{border:0;background:none;color:var(--muted);cursor:pointer;padding:2px;opacity:0;display:grid}
.ch-star svg{width:15px;height:15px}
.ch-item:hover .ch-star,.ch-star.on{opacity:1}.ch-star.on{color:#e0a100}.ch-star.on svg{fill:currentColor}
.ch-ontxt{color:#22b35e;font-style:normal;font-weight:600}
.ch-acts{display:flex;gap:6px}
.ch-empty{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;color:var(--muted);padding:40px 24px;font-size:var(--fs-sm)}
.ch-empty svg{width:34px;height:34px;opacity:.5}.ch-empty.sm{padding:30px 10px}
.ch-tick{display:inline-flex;flex:none;color:var(--muted)}
.ch-tick svg{height:11px;width:auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ch-tick.ch-t1 svg{width:14px}.ch-tick.ch-t2 svg,.ch-tick.ch-t3 svg{width:18px}
.ch-tick.ch-t3{color:#2f86eb}
.ch-msgs{flex:1;overflow:auto;padding:12px 14px;background:var(--card-2);position:relative;overscroll-behavior:contain}
.ch-more{text-align:center;margin-bottom:8px}.ch-more button{border:1px solid var(--line);background:var(--card);border-radius:99px;padding:5px 12px;font:inherit;font-size:var(--fs-xs);cursor:pointer;color:var(--ink-2)}
.ch-day{text-align:center;margin:14px 0 8px}.ch-day span{background:var(--card);border:1px solid var(--line);color:var(--muted);font-size:11px;font-weight:600;padding:3px 10px;border-radius:99px}
.ch-msg{max-width:82%;width:fit-content;margin:3px 0;padding:7px 10px 5px;border-radius:14px 14px 14px 4px;background:var(--card);box-shadow:0 1px 1px #0000000d;position:relative;word-wrap:break-word;overflow-wrap:anywhere;animation:chMsg .2s ease-out}
.ch-msg.me{margin-left:auto;border-radius:14px 14px 4px 14px;background:color-mix(in srgb,var(--accent) 16%,var(--card))}
.ch-who{display:block;font-size:12px;color:hsl(var(--h) 55% 38%);margin-bottom:2px}
[data-theme="dark"] .ch-who{color:hsl(var(--h) 70% 72%)}
.ch-txt{font-size:14px;line-height:1.45;white-space:normal}.ch-txt a{color:var(--info);text-decoration:underline}
.ch-meta{display:flex;justify-content:flex-end;align-items:center;gap:4px;font-size:10.5px;color:var(--muted);margin-top:2px}
.ch-msg.img{padding:4px 4px 4px}.ch-msg.img .ch-txt{padding:4px 6px 0}.ch-msg.img .ch-meta{padding:0 6px 2px}
.ch-msg img{display:block;max-width:260px;max-height:260px;width:100%;object-fit:cover;border-radius:11px;cursor:zoom-in;background:var(--card-2);min-height:80px}
.ch-file{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;background:var(--card-2);color:var(--ink);text-decoration:none;min-width:200px;margin-bottom:2px}
.ch-file span{flex:1;min-width:0;display:flex;flex-direction:column}.ch-file b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ch-file small{color:var(--muted);font-size:11px}
.ch-sys{text-align:center;color:var(--muted);font-size:12px;margin:8px 20px;font-style:italic}
.ch-calllog{display:flex;align-items:center;gap:8px;width:fit-content;margin:8px auto;padding:6px 12px;border-radius:99px;background:var(--card);border:1px solid var(--line);font-size:12.5px;color:var(--ink-2)}
.ch-calllog svg{width:15px;height:15px;color:var(--good)}.ch-calllog.bad svg,.ch-calllog.bad span{color:var(--bad)}
.ch-calllog time{color:var(--muted);font-size:11px}
.ch-drop[hidden]{display:none!important}
.ch-drop{position:absolute;inset:120px 14px 80px;border:2px dashed var(--accent);border-radius:16px;background:color-mix(in srgb,var(--card) 85%,transparent);display:grid;place-items:center;font-weight:600;color:var(--accent-text);z-index:3}
.ch-comp{display:flex;align-items:flex-end;gap:6px;padding:10px 10px 12px;border-top:1px solid var(--line);background:var(--card)}
.ch-comp label.ch-ib{cursor:pointer}
.ch-comp textarea{flex:1;resize:none;border:1px solid var(--line);background:var(--card-2);color:var(--ink);border-radius:14px;padding:9px 12px;font:inherit;font-size:14px;line-height:1.4;max-height:140px;outline:none}
.ch-comp textarea:focus{border-color:var(--accent)}
.ch-send{width:40px;height:40px;border-radius:50%;border:0;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;cursor:pointer;flex:none;box-shadow:0 8px 16px -10px var(--accent)}
.ch-pick{max-height:280px;overflow:auto;border:1px solid var(--line);border-radius:12px;padding:4px}
.ch-pick label{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:9px;cursor:pointer}.ch-pick label:hover{background:var(--card-2)}
.ch-pick label span{flex:1}.ch-pick.ro label{cursor:default}
/* dering masuk */
.ch-ring{position:fixed;z-index:120;top:18px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;padding:12px 14px 12px 12px;border-radius:20px;background:#121a2e;color:#fff;box-shadow:0 26px 60px -20px #000a;min-width:320px;animation:chDrop .35s cubic-bezier(.2,.8,.2,1)}
.ch-ring .ch-av{animation:chRingPulse 1.4s ease-out infinite}
.cr-m{flex:1;display:flex;flex-direction:column}.cr-m span{font-size:12.5px;color:#ffffffb0}
.ch-ring button{width:46px;height:46px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;color:#fff}
.cr-no{background:#e5484d}.cr-ok{background:#22b35e}.cr-ok svg{animation:chWiggle 1.2s ease-in-out infinite}
.ch-ring svg,.cc-bar svg{width:22px;height:22px}
/* layar panggilan */
.ch-call{position:fixed;z-index:110;inset:0;background:radial-gradient(120% 90% at 50% 20%,#24345e,#0b1124);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;animation:chIn .25s ease-out;transition:all .3s cubic-bezier(.65,0,.35,1)}
.cc-rv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none;background:#000}
.ch-call.video.live .cc-rv{display:block}
.ch-call.video.live .cc-who{position:absolute;top:22px;left:22px;flex-direction:row;gap:12px;text-shadow:0 1px 3px #000a}
.ch-call.video.live .cc-who .ch-av{display:none}
.cc-lv{position:absolute;right:20px;bottom:110px;width:180px;aspect-ratio:4/3;object-fit:cover;border-radius:16px;background:#000;box-shadow:0 10px 30px #0008;display:none;transform:scaleX(-1)}
.ch-call.video .cc-lv{display:block}
.cc-who{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;z-index:1}
.cc-who b{font-size:24px}.cc-who span{color:#ffffffb8;font-variant-numeric:tabular-nums}
.ch-call:not(.live) .cc-who .ch-av{animation:chRingPulse 1.6s ease-out infinite}
.cc-top{position:absolute;top:16px;right:16px;z-index:2}
.cc-min{width:40px;height:40px;border-radius:12px;border:0;background:#ffffff1f;color:#fff;display:grid;place-items:center;cursor:pointer}
.cc-bar{position:absolute;bottom:32px;display:flex;gap:18px;z-index:2}
.cc-bar button{width:58px;height:58px;border-radius:50%;border:0;background:#ffffff26;color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(6px)}
.cc-bar button.off{background:#fff;color:#121a2e}
.cc-bar button.end{background:#e5484d}
.ch-call.mini{inset:auto 20px 20px auto;width:240px;height:140px;border-radius:20px;box-shadow:0 20px 50px -10px #000b;cursor:pointer;overflow:hidden}
.ch-call.mini .cc-who .ch-av{width:44px;height:44px;font-size:15px}.ch-call.mini .cc-who b{font-size:15px}
.ch-call.mini .cc-lv,.ch-call.mini .cc-bar button:not(.end),.ch-call.mini .cc-top{display:none}
.ch-call.mini .cc-bar{bottom:10px;right:10px}.ch-call.mini .cc-bar button{width:40px;height:40px}
.ch-call.mini.video.live .cc-who{top:10px;left:10px}
.ch-call.done .cc-bar{opacity:.4;pointer-events:none}
@keyframes chIn{from{opacity:0;transform:translateY(6px)}}
@keyframes chMsg{from{opacity:0;transform:translateY(4px)}}
@keyframes chDrop{from{opacity:0;transform:translate(-50%,-20px)}}
@keyframes chRingPulse{0%{box-shadow:0 0 0 0 #22b35e80}100%{box-shadow:0 0 0 22px #22b35e00}}
@keyframes chWiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-12deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(6deg)}}
@media (prefers-reduced-motion:reduce){.ch-panel,.ch-msg,.ch-ring,.ch-call{animation:none;transition:none}.cr-ok svg,.ch-ring .ch-av,.cc-who .ch-av{animation:none!important}}
@media (max-width:720px){.ch-tb-l{display:none}.ch-panel{width:100vw}.ch-ring{min-width:0;width:calc(100vw - 24px)}.cc-lv{width:120px;bottom:104px;right:12px}}

.clock{white-space:nowrap}

/* =====================================================================
   NIMBRA LAYER — token & perilaku mengikuti template Nimbra (dibuat ulang)
   ===================================================================== */
:root{
  --accent:#2f5cf0;--accent-from:#4f7bff;--accent-to:#2449d8;--accent-hi:#3d68f5;--accent-ink:#fff;--accent-soft:#2f5cf01f;--accent-text:#2346c4;--accent-glow:#2f5cf066;
  --aura-a:#6e96ff8c;--aura-b:#78c8ff80;--aura-c:#82e1d261;--aura-d:#a0b9ff73;
  --bg:#e9eef8;--card:#ffffff9e;--card-2:#14285a0a;--card-3:#14285a16;--panel:#fafcffe6;--paper:#fdfdff;
  --ink:#0d1630;--ink-2:#29344f;--muted:#55617c;--line:#14285a17;--line-2:#14285a29;--rim:#14285a29;
  --glass-hi:#fff9;--glass-rim:#ffffffbf;--glass-top:#fffffff2;--blur:26px;--sat:150%;--grain:.05;
  --good:#0f7347;--good-soft:#0f8c5a1f;--bad:#be2639;--bad-soft:#d2283c1a;--warn:#8a5600;--warn-soft:#dc96142b;--info:#1563b5;--info-soft:#1563b51a;
  --tile-1:#cddcffb3;--tile-2:#c8ecfab3;--tile-3:#c4eee0b3;--tile-4:#ffe8c4b3;--tile-5:#ffd9d4b3;--tile-ink:#0d1630;--tile-muted:#0d1630ad;
  --side-bg:transparent;--side-card:#14285a0a;--side-hover:#14285a0d;--side-ink:#0d1630;--side-line:#14285a17;--side-muted:#55617c;--side-tile:transparent;
  --side-w:256px;--rail-w:76px;--side-gap:14px;
  --s1:#2f62f0;--s2:#c27c0e;--s3:#0e9a78;--s4:#8a4fd6;--s-other:#7d88a3;
  --r-sm:10px;--r-md:14px;--r-lg:20px;--r-xl:26px;
  --shadow:0 1px 2px #14285a0d,0 14px 34px -18px #14286e42;--shadow-sm:0 1px 2px #14285a0d;--shadow-lg:0 2px 6px #14285a14,0 34px 70px -26px #14286e61;
  --row-hover:#14285a08;--field:#ffffffc7;
}
[data-theme="dark"]{
  --accent:#3d6bff;--accent-from:#6a93ff;--accent-to:#2b55f0;--accent-hi:#5580ff;--accent-ink:#fff;--accent-soft:#507dff2e;--accent-text:#9db9ff;--accent-glow:#3c6eff8c;
  --aura-a:#2c4bd07a;--aura-b:#1f7fd066;--aura-c:#1aa38c3d;--aura-d:#4f5fd066;
  --bg:#050a18;--card:#101a3680;--card-2:#96afff0b;--card-3:#96afff1a;--panel:#0b132ae0;--paper:#0e1730;
  --ink:#eef3ff;--ink-2:#cdd6ec;--muted:#95a2c2;--line:#aabeff17;--line-2:#aabeff2b;--rim:#aabeff2e;
  --glass-hi:#8caaff14;--glass-rim:#96b4ff21;--glass-top:#c8d7ff2b;--sat:160%;
  --good:#4fe0a0;--good-soft:#4fe0a024;--bad:#ff7d8d;--bad-soft:#ff7d8d24;--warn:#fbc35e;--warn-soft:#fbc35e24;--info:#6cc8ff;--info-soft:#6cc8ff24;
  --tile-1:#2a46a85c;--tile-2:#1f6a8a52;--tile-3:#1a7a6247;--tile-4:#8a641f4d;--tile-5:#8a3a3a47;--tile-ink:#eef3ff;--tile-muted:#eef3ffad;
  --side-card:#96afff0b;--side-hover:#96afff12;--side-ink:#eef3ff;--side-line:#aabeff17;--side-muted:#95a2c2;
  --s1:#5583ff;--s2:#b8801c;--s3:#159a80;--s4:#9a6ae8;--s-other:#8a96b4;
  --shadow:0 1px 2px #00000a66,0 18px 40px -20px #000414cc;--shadow-sm:0 1px 2px #00000a66;--shadow-lg:0 2px 6px #00000a80,0 34px 80px -26px #000414e6;
  --row-hover:#96afff0d;--field:#0e173099;
}
body{background:var(--bg);letter-spacing:.005em}
/* latar aura bergerak + grain */
.aura{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aura i{position:absolute;border-radius:50%}
.aura i::before{content:"";position:absolute;inset:0;border-radius:50%;animation:drift 38s ease-in-out infinite alternate}
.aura .a1{width:120vmax;height:40vmax;top:-6vmax;left:-30vmax;rotate:-22deg}.aura .a1::before{background:radial-gradient(ellipse at 50% 50%,var(--aura-a),transparent 64%)}
.aura .a2{width:110vmax;height:34vmax;bottom:-10vmax;right:-36vmax;rotate:-22deg}.aura .a2::before{background:radial-gradient(ellipse at 50% 50%,var(--aura-b),transparent 64%);animation-duration:46s;animation-delay:-12s}
.aura .a3{width:60vmax;height:50vmax;top:-22vmax;right:-18vmax}.aura .a3::before{background:radial-gradient(ellipse at 50% 50%,var(--aura-c),transparent 62%);animation-duration:52s;animation-delay:-30s}
.aura .a4{width:70vmax;height:50vmax;bottom:-36vmax;left:18vmax}.aura .a4::before{background:radial-gradient(ellipse at 50% 50%,var(--aura-d),transparent 62%);animation-duration:44s;animation-delay:-20s}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(4vmax,3vmax) scale(1.08)}100%{transform:translate(-3vmax,5vmax) scale(.96)}}
.app{position:relative;z-index:1}
.app::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:var(--grain);mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* kaca */
.side,.top,.card,.tile,.modal,.search-pop,.ch-pop,.ch-panel,.bnav{background:linear-gradient(160deg,var(--glass-hi),transparent 46%),var(--card);-webkit-backdrop-filter:blur(var(--blur)) saturate(var(--sat));backdrop-filter:blur(var(--blur)) saturate(var(--sat));box-shadow:inset 0 0 0 1px var(--glass-rim),inset 0 1px 0 var(--glass-top),var(--shadow)}
.tile{background:linear-gradient(160deg,var(--glass-hi),transparent 46%),var(--tile-1)}
.tile.t1{background-color:var(--tile-1)}.tile.t2{background:linear-gradient(160deg,var(--glass-hi),transparent 46%),var(--tile-2)}.tile.t3{background:linear-gradient(160deg,var(--glass-hi),transparent 46%),var(--tile-3)}.tile.t4{background:linear-gradient(160deg,var(--glass-hi),transparent 46%),var(--tile-4)}.tile.t5{background:linear-gradient(160deg,var(--glass-hi),transparent 46%),var(--tile-5)}
.tile:first-child{box-shadow:inset 0 0 0 1.5px var(--accent),inset 0 1px 0 var(--glass-top),var(--shadow)}
.modal{background:linear-gradient(160deg,var(--glass-hi),transparent 46%),var(--panel)}
.ch-panel{background:var(--panel)}
.ov{background:#050a1866;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
/* shell: sidebar melayang */
.app{grid-template-columns:calc(var(--side-w) + var(--side-gap)) 1fr}
.app.rail{grid-template-columns:calc(var(--rail-w) + var(--side-gap)) 1fr}
.side{position:sticky;top:var(--side-gap);margin:var(--side-gap) 0 var(--side-gap) var(--side-gap);height:calc(100vh - var(--side-gap) * 2);border-radius:var(--r-xl);padding:16px 12px 12px;scrollbar-width:none}
.side::-webkit-scrollbar{display:none}
.brand-logo{background:linear-gradient(135deg,var(--accent-from),var(--accent-to));border-radius:12px;box-shadow:0 8px 20px -8px var(--accent-glow),inset 0 1px 0 #ffffff40;color:#fff}
.collapse-btn{background:#ffffff0d;border:0;box-shadow:inset 0 0 0 1px var(--rim);color:var(--ink);border-radius:10px;width:32px;height:32px}
.collapse-btn:hover{background:var(--card-3)}
.nav-sec{font-size:10.5px;letter-spacing:.1em;color:var(--muted)}
.nav a{height:37px;border-radius:14px;color:var(--muted);font-weight:600;gap:12px;padding:0 12px}
.nav a svg{width:19px;height:19px;color:currentColor}
.nav a:hover{background:transparent;color:var(--ink)}
.nav a.active{color:var(--ink)}
.nav a.active svg{color:var(--accent-text)}
/* pil aktif: elemen setinggi nav, posisi via clip-path (meregang saat pindah) */
.nav-ind{top:0;left:0;right:0;height:100%;border-radius:0;transform:none!important;transition:opacity .2s;background:linear-gradient(120deg,var(--accent-soft),#ffffff05),var(--card-3);box-shadow:inset 0 0 0 1px var(--glass-rim);clip-path:inset(0 0 100% round 14px)}
.nav-ind::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--accent) 0 3px,transparent 3px)}
.app.rail .side{padding:16px 10px 12px}
.app.rail .nav a{height:44px}
.side-card{background:var(--card-2);box-shadow:inset 0 0 0 1px var(--line)}
.user-card .avatar{background:linear-gradient(135deg,var(--accent-from),var(--accent-to));color:#fff}
/* topbar kaca melayang */
.main{padding-right:var(--side-gap)}
.top{top:var(--side-gap);margin:var(--side-gap) 10px 0 10px;border-radius:var(--r-lg);padding:8px 10px 8px 12px;border:0}
.top-search input{background:var(--card-2);box-shadow:inset 0 0 0 1px var(--line);height:38px}
.top-search input:focus{box-shadow:0 0 0 2px var(--accent)}
.icon-btn,.pill,.ch-tb{background:var(--card-2);box-shadow:inset 0 0 0 1px var(--line);backdrop-filter:none}
.icon-btn:hover,.ch-tb:hover{background:var(--card-3)}
.pill .dotlive{background:var(--good);box-shadow:0 0 0 3px var(--good-soft);position:relative}
.pill .dotlive::after{content:"";position:absolute;inset:-5px;border-radius:50%;background:var(--good);opacity:.1;animation:breathe 2s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.1}50%{opacity:.45}}
.page{padding:22px 14px 48px 10px;max-width:1480px}
.page-h h1{font-weight:600;letter-spacing:-.02em}
/* tombol */
.btn{background:var(--card-2);box-shadow:inset 0 0 0 1px var(--line-2);border-radius:12px}
.btn:hover{background:var(--card-3)}
.btn.primary,a.btn.primary{background:linear-gradient(135deg,var(--accent-from),var(--accent-to));color:#fff;box-shadow:0 10px 22px -10px var(--accent-glow),inset 0 1px 0 #ffffff40}
.btn.primary:hover{filter:brightness(1.07);background:linear-gradient(135deg,var(--accent-from),var(--accent-to))}
.input,.select,textarea.input{background:var(--field);border:1px solid var(--line-2)}
.input:focus,.select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.seg{background:var(--card-2)}.seg button.on{background:var(--card-3);color:var(--ink);box-shadow:inset 0 0 0 1px var(--glass-rim)}
.tag.on{background:var(--good-soft);color:var(--good)}
.tbl th{background:transparent}
table.tbl.wide th:first-child,table.tbl.wide td:first-child{background:var(--paper)}
.utabs a::after{background:linear-gradient(90deg,var(--accent-from),var(--accent-to))}
.ch-msg.me{background:color-mix(in srgb,var(--accent) 20%,var(--paper))}
.ch-msg{background:var(--paper)}
.ch-msgs{background:transparent}
.ch-send{background:linear-gradient(135deg,var(--accent-from),var(--accent-to));color:#fff}
.ch-cnt{background:var(--accent);color:#fff}
.sw input:checked+span{background:linear-gradient(135deg,var(--accent-from),var(--accent-to))}
/* judul halaman: huruf demi huruf naik */
.page-h h1 .w{display:inline-block;white-space:nowrap}
.page-h h1 .ch{display:inline-block;animation:chUp .62s var(--ease) both;animation-delay:calc(var(--c) * 16ms)}
@keyframes chUp{from{opacity:0;transform:translateY(.45em);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.page-h h1.enter-title{animation:none}
/* konten halaman berganti */
@keyframes viewIn{from{opacity:0;transform:translateY(10px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.page.swap{animation:viewIn .5s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.aura i::before,.page-h h1 .ch,.pill .dotlive::after{animation:none!important}}
@media (max-width:900px){
  .app,.app.rail{grid-template-columns:1fr}
  .side{position:fixed;margin:0;top:var(--side-gap);left:var(--side-gap);bottom:var(--side-gap);height:auto;z-index:60;background:var(--panel)}
  .main{padding-right:0}
  .top{margin:10px 10px 0}
  .page{padding:18px 12px 96px}
  .bnav{left:10px;right:10px;bottom:10px;border-radius:var(--r-lg);border:0}
  .bnav a.active{background:linear-gradient(135deg,var(--accent-from),var(--accent-to));color:#fff}
}
@media (max-width:900px){.side{transform:translateX(calc(-100% - 30px))}.app.nav-open .side{transform:none}}

/* =====================================================================
   LOGIN — peta konektivitas Regional Sumbagteng (sama dengan DASI login.php)
   ===================================================================== */
.login-body{min-height:100vh;display:flex;background:#e9eef8;--b-batam:#0e9aa7;--b-bkt:#d9822b;--b-dumai:#2f5cf0;--b-padang:#d6456b;--b-pku:#1e9e5a;color:var(--ink)}
html[data-theme="dark"] .login-body{background:#0b1230;--b-batam:#3fd0d8;--b-bkt:#ffb455;--b-dumai:#7ea0ff;--b-padang:#ff8aa5;--b-pku:#5fe0a0}
.login-scene{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.login-scene .ls-sky{position:absolute;inset:0;width:100%;height:100%}
.login-scene .ls-senja{display:none}
html[data-theme="dark"] .login-scene .ls-siang{display:none}
html[data-theme="dark"] .login-scene .ls-senja{display:block}
.login-map{position:absolute;left:2.6vw;top:88px;width:min(52vw,780px);bottom:clamp(150px,22vh,230px)}
.login-map svg{position:absolute;inset:0;width:100%;height:100%;display:none;overflow:visible}
.login-map .lm.lm-siang{display:block}
html[data-theme="dark"] .login-map .lm.lm-siang{display:none}
html[data-theme="dark"] .login-map .lm.lm-senja{display:block}
.login-pano{position:absolute;left:0;right:0;bottom:0;height:clamp(210px,34vh,340px)}
.login-pano svg{position:absolute;inset:0;width:100%;height:100%;display:none}
.login-pano .lp-siang{display:block}
html[data-theme="dark"] .login-pano .lp-siang{display:none}
html[data-theme="dark"] .login-pano .lp-senja{display:block}
.login-scene .br{transition:opacity .35s}
.login-body[data-fokus="batam"] .login-scene .br:not(.b-batam),.login-body[data-fokus="bkt"] .login-scene .br:not(.b-bkt),.login-body[data-fokus="dumai"] .login-scene .br:not(.b-dumai),.login-body[data-fokus="padang"] .login-scene .br:not(.b-padang),.login-body[data-fokus="pku"] .login-scene .br:not(.b-pku){opacity:.14}
.login-wrap{flex:1 1 0%;display:grid;place-items:center;position:relative;z-index:2;justify-items:end;padding:24px max(16px,5vw) 24px 16px}
.login-card{width:min(410px,100%);border-radius:var(--r-xl);padding:30px 28px 24px;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);box-shadow:inset 0 0 0 1px var(--glass-rim),inset 0 1px 0 var(--glass-top),rgba(13,22,48,.45) 0 30px 60px -25px;animation:rise .6s var(--ease) both}
html[data-theme="dark"] .login-card{background:rgba(13,22,52,.78)}
.login-card .brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:16px;padding:0}
.login-card .brand small{display:block;font-size:12px;font-weight:500;color:var(--muted)}
.login-card .brand-logo{width:48px;height:48px;border-radius:14px;font-size:22px}
.login-card h1{margin:20px 0 6px;font-size:30px;font-weight:700;letter-spacing:-.02em}
.login-card>p{margin:0;color:var(--muted)}
.login-card label{display:block;font-size:12.5px;font-weight:600;margin:14px 0 0;color:var(--ink-2)}
.login-card input{display:block;margin-top:6px;font-size:14px;font-weight:500;color:var(--ink);background:var(--field);border:1px solid var(--line-2);border-radius:12px;height:42px;padding:0 14px;width:100%;outline:none;transition:border-color .15s,box-shadow .15s}
.login-card input::placeholder{color:var(--muted);opacity:.85}
.login-card input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.login-card input.err{border-color:var(--bad)}
.login-card .ferr{color:var(--bad);font-size:12px;font-weight:600;margin-top:5px}
.login-card .pw{position:relative;display:block}
.login-card .pw input{padding-right:48px}
.pw-eye{position:absolute;right:4px;top:8px;width:38px;height:38px;border:0;border-radius:10px;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer}
.pw-eye:hover{color:var(--ink);background:var(--card-3)}
.pw-eye .i-eyeoff,.pw-eye.is-shown .i-eye{display:none}
.pw-eye.is-shown .i-eyeoff{display:block}
.btn-lime{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;height:42px;padding:0 18px;border:0;border-radius:12px;cursor:pointer;color:#fff;font:600 14.5px var(--font);white-space:nowrap;margin-top:22px;background:linear-gradient(135deg,var(--accent-from),var(--accent-to));box-shadow:0 10px 22px -10px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.25);transition:filter .15s,transform .05s}
.btn-lime:hover{filter:brightness(1.07)}.btn-lime:active{transform:translateY(1px)}.btn-lime:disabled{opacity:.6;cursor:default}
.lc{margin-top:20px;padding-top:14px;border-top:1px solid var(--line-2)}
.lc-head{display:flex;justify-content:space-between;align-items:baseline;padding:0 2px 6px;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.lc-head span{font-size:12px;font-weight:600;color:var(--muted)}
.lc-row{display:flex;align-items:baseline;gap:2px 10px;width:100%;text-align:left;padding:7px 10px;margin-top:2px;border:1px solid transparent;border-radius:10px;background:none;cursor:pointer;font:inherit;color:var(--ink);transition:background .2s,border-color .2s}
.lc-row:hover{background:var(--accent-soft)}
.lc-row:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.lc-row[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent)}
.lc-row i{flex:0 0 auto;width:9px;height:9px;border-radius:50%;transform:translateY(-1px)}
.lc-row[data-b="batam"] i{background:var(--b-batam)}.lc-row[data-b="bkt"] i{background:var(--b-bkt)}.lc-row[data-b="dumai"] i{background:var(--b-dumai)}.lc-row[data-b="padang"] i{background:var(--b-padang)}.lc-row[data-b="pku"] i{background:var(--b-pku)}
.lc-row b{flex:0 0 auto;width:92px;font-size:12.5px;font-weight:800}
.lc-row span{font-size:12px;font-weight:500;line-height:1.45;color:var(--muted)}
.lc-legend{display:flex;flex-wrap:wrap;gap:4px 16px;margin:4px 0 0;padding:0;list-style:none;font-size:11.5px;font-weight:600;opacity:.85}
.lc-legend li{display:flex;align-items:center;gap:6px}
.login-foot{margin-top:22px;font-size:12px;color:var(--muted);text-align:center}
.login-caption{position:fixed;left:max(20px,3vw);top:24px;z-index:2;max-width:560px;font-size:12.5px;font-weight:500;color:#1b2b55;pointer-events:none}
.login-caption b{display:block;font-size:16px;font-weight:800;margin-bottom:2px}
.login-caption small{display:block;margin-top:2px;opacity:.7;font-size:11px}
html[data-theme="dark"] .login-caption{color:#dfe7ff}
.login-theme{position:fixed;top:16px;right:16px;z-index:3;width:40px;height:40px;border-radius:12px;border:0;display:grid;place-items:center;cursor:pointer;color:var(--ink);background:linear-gradient(160deg,var(--glass-hi),transparent 46%),var(--card);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:inset 0 0 0 1px var(--glass-rim),var(--shadow)}
.login-scene .beam{transform-origin:641px 548px;animation:ls-angguk 4.2s ease-in-out infinite}
.login-scene .crank{transform-origin:760px 650px;animation:ls-putar 4.2s linear infinite}
.login-scene .flow{stroke-dasharray:6,14;animation:ls-alir 2.6s linear infinite}
.login-scene .laut{animation:ls-alir 3.4s linear infinite}
.login-scene .pulse{transform-box:fill-box;transform-origin:center center;animation:ls-denyut 2.4s ease-out infinite}
.login-scene .wave{animation:ls-ombak 7s ease-in-out infinite alternate}
@keyframes ls-angguk{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes ls-putar{100%{transform:rotate(360deg)}}
@keyframes ls-alir{100%{stroke-dashoffset:-80}}
@keyframes ls-denyut{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.4);opacity:0}}
@keyframes ls-ombak{100%{transform:translateX(-40px)}}
@media (prefers-reduced-motion:reduce){.login-scene .beam,.login-scene .crank,.login-scene .flow,.login-scene .laut,.login-scene .pulse,.login-scene .wave,.login-card{animation:none}}
@media (max-width:1100px){.login-map{width:46vw}}
@media (max-width:760px){
  .login-wrap{justify-items:center;align-content:start;padding:330px 14px 24px}
  .login-map{inset:40px 0 auto;width:auto;height:296px}
  .login-map .lm{display:none!important}
  .login-map .lmh.lm-siang{display:block}
  html[data-theme="dark"] .login-map .lmh.lm-siang{display:none}
  html[data-theme="dark"] .login-map .lmh.lm-senja{display:block}
  .login-pano{height:150px}
  .login-caption{top:14px;left:18px}
  .login-caption b{font-size:13px}
  .login-caption span,.login-caption small,.lc-legend{display:none}
  .lc-row{flex-wrap:wrap}.lc-row b{width:auto}.lc-row span{flex:1 1 100%;padding-left:19px}
}
@media (min-width:761px) and (max-height:820px){
  .login-card{padding:22px 24px 18px}.login-card h1{margin:14px 0 4px;font-size:26px}.login-card label{margin-top:10px}
  .login-card .btn-lime{margin-top:16px}.lc{margin-top:14px;padding-top:10px}.lc-row{padding:5px 10px}.login-foot{margin-top:12px}
}

.navtip{position:fixed;z-index:200;transform:translate(-4px,-50%);opacity:0;pointer-events:none;padding:6px 10px;border-radius:9px;background:var(--ink);color:var(--bg);font-size:12px;font-weight:600;white-space:nowrap;box-shadow:var(--shadow);transition:opacity .15s,transform .2s var(--ease)}
.navtip.on{opacity:1;transform:translate(0,-50%)}
.app.rail .user-card{flex-direction:column;padding:4px 0;gap:6px}
.app.rail .user-card .avatar{margin:0 auto}
[data-theme="dark"]{--tile-1:#3d6bff2e;--tile-2:#2fa7d62b;--tile-3:#22b8902a;--tile-4:#d69a2e29;--tile-5:#d65a4a29}