@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
:root{
  /* Synectics design tokens */
  --bg:#f3f5f9;--panel:#fff;--panel2:#f6f8fb;--text:#15294b;--muted:#6c7a92;--line:#e7ebf2;
  --navy:#17375e;--pink:#a9453b;--pink-soft:#f5dcd8;--sky:#e9a23b;--sky-soft:#fcecd0;--accent-ink:#fff;--on-pink:#fff;--on-sky:#3a2208;
  --danger:#c93b66;--warn:#a4640f;--ok:#1f8f5f;--info:#2a6fa3;
  --shadow:0 1px 2px rgba(23,55,94,.04),0 6px 20px rgba(23,55,94,.05);--radius:16px;
  --ok-soft:color-mix(in srgb,#1f8f5f 16%,transparent);--warn-soft:color-mix(in srgb,#a4640f 16%,transparent);--bad-soft:var(--pink-soft);--info-soft:var(--sky-soft);
  /* aliases used by SIPAD markup */
  --surface:var(--panel);--surface2:var(--panel2);--ink:var(--text);--brand:var(--navy);--brand-ink:var(--accent-ink);--brand-soft:var(--sky-soft);--accent:var(--navy);--bad:var(--danger);--r:var(--radius);
  --font:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
:root[data-theme="dark"]{
  --bg:#0c1626;--panel:#13213a;--panel2:#182a47;--text:#e8eef8;--muted:#93a3bb;--line:#243656;
  --navy:#f0c987;--accent-ink:#0c1626;--pink:#c0574c;--pink-soft:#3d2220;--sky:#e9a23b;--sky-soft:#3a2c14;
  --danger:#ff8fb0;--warn:#e8b25c;--ok:#5fcf9d;--info:#7cc0ee;--shadow:none;
  --ok-soft:color-mix(in srgb,#5fcf9d 16%,transparent);--warn-soft:color-mix(in srgb,#e8b25c 16%,transparent)}
@media (prefers-color-scheme:dark){:root:not([data-theme]){
  --bg:#0c1626;--panel:#13213a;--panel2:#182a47;--text:#e8eef8;--muted:#93a3bb;--line:#243656;
  --navy:#f0c987;--accent-ink:#0c1626;--pink:#c0574c;--pink-soft:#3d2220;--sky:#e9a23b;--sky-soft:#3a2c14;
  --danger:#ff8fb0;--warn:#e8b25c;--ok:#5fcf9d;--info:#7cc0ee;--shadow:none;
  --ok-soft:color-mix(in srgb,#5fcf9d 16%,transparent);--warn-soft:color-mix(in srgb,#e8b25c 16%,transparent)}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 var(--font);-webkit-font-smoothing:antialiased}
h1,h2,h3{line-height:1.25;margin:0;letter-spacing:-.01em;color:var(--text)}h1{font-size:1.6rem;font-weight:800}h2{font-size:1.15rem;font-weight:800}h3{font-size:1rem;font-weight:800}
a{color:var(--brand)}p{margin:.3rem 0}
.muted{color:var(--muted)}.small{font-size:.82rem}.right{text-align:right}.center{text-align:center}.nowrap{white-space:nowrap}
.num{font-variant-numeric:tabular-nums}
button,.btn{font:inherit;font-weight:600;border:0;border-radius:11px;padding:.65rem 1rem;font-weight:800;background:var(--pink);color:var(--on-pink);cursor:pointer;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;text-decoration:none}
button:disabled{opacity:.5;cursor:not-allowed}
button.ghost,.btn.ghost{background:var(--sky);color:var(--on-sky);border:0}
button.sm{min-height:34px;padding:.35rem .7rem;font-size:.85rem}
button.danger{background:var(--panel);color:var(--danger);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--danger) 45%,transparent)}
input,select,textarea{font:inherit;width:100%;padding:.65rem .8rem;border:1px solid var(--line);border-radius:11px;background:var(--panel);color:var(--ink);min-height:44px}
input:focus,select:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
label{display:block;font-weight:600;font-size:.85rem;margin:.7rem 0 .25rem}
.card{background:linear-gradient(160deg,var(--panel) 0%,color-mix(in srgb,var(--panel) 93%,var(--sky-soft)) 100%);border-radius:var(--radius);box-shadow:var(--shadow),inset 0 1px 0 color-mix(in srgb,#fff 55%,transparent);padding:1.2rem}
.chip{display:inline-block;padding:.12rem .6rem;border-radius:99px;font-size:.78rem;font-weight:800;background:var(--panel2);color:var(--muted)}
.chip.ok{background:var(--ok-soft);color:var(--ok)}.chip.warn{background:var(--warn-soft);color:var(--warn)}.chip.bad{background:var(--pink-soft);color:var(--danger)}.chip.info{background:var(--info-soft);color:var(--info)}.chip.brand{background:var(--sky);color:var(--on-sky)}
.row{display:flex;gap:.6rem;align-items:center}.row.between{justify-content:space-between}.row.wrap{flex-wrap:wrap}
.stack>*+*{margin-top:.75rem}
table{width:100%;border-collapse:collapse;font-size:.88rem}
th{text-align:left;font-size:.8rem;color:var(--muted);padding:.65rem .75rem;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);font-weight:800;white-space:nowrap}
td{padding:.65rem .75rem;border-bottom:1px solid var(--line);vertical-align:middle}
tr:hover td{background:color-mix(in srgb,var(--surface2) 55%,transparent)}
.bar{height:8px;border-radius:99px;background:var(--sky-soft);overflow:hidden;position:relative;min-width:80px}
.bar>i{display:block;height:100%;background:var(--navy);border-radius:99px}
.bar>b{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--ink);opacity:.55}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:var(--navy);color:var(--accent-ink);padding:.7rem 1.1rem;border-radius:12px;z-index:99;max-width:90vw;font-weight:600;box-shadow:var(--shadow)}
.toast.bad{background:var(--danger);color:#fff}
.empty{padding:1.5rem;text-align:center;color:var(--muted)}
.sandbox{background:var(--warn-soft);color:var(--warn);font-size:.78rem;font-weight:600;padding:.35rem .7rem;text-align:center}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Synectics-style brand mark: overlapping pink + sky pills */
.logo{width:30px;height:30px;position:relative;flex:none}.logo i{position:absolute;width:20px;height:14px;border-radius:7px}
.logo i:first-child{left:0;top:2px;background:var(--pink)}.logo i:last-child{right:0;bottom:2px;background:var(--sky)}
.brandrow{display:flex;align-items:center;gap:10px}.brandrow b{font-size:1.35rem;font-weight:800;color:var(--navy);letter-spacing:.02em}
.pilltabs{display:flex;gap:6px;overflow:auto}.pilltabs button{background:var(--panel);color:var(--muted);box-shadow:var(--shadow);border-radius:99px;min-height:38px;padding:.4rem 1rem}
.pilltabs button[aria-pressed=true],.pilltabs button[aria-current=true]{background:var(--pink);color:var(--on-pink)}
.icon-circle{width:42px;height:42px;border-radius:50%;padding:0;background:var(--sky);color:var(--on-sky)}

.pwmodal{position:fixed;inset:0;background:rgba(12,22,38,.65);z-index:100;display:grid;place-items:center;padding:1rem}.pwmodal>.card{max-width:420px;width:100%}
.logo{width:34px;height:36px;background:url(/img/logo-malra-256.png) center/contain no-repeat}.logo i{display:none}

/* ===== Design system seragam (gradasi, ikon, brand) ===== */
button,.btn{background:linear-gradient(135deg,var(--pink),color-mix(in srgb,var(--pink) 72%,#000));color:var(--on-pink);box-shadow:0 2px 8px color-mix(in srgb,var(--pink) 28%,transparent)}
button.ghost,.btn.ghost{background:linear-gradient(135deg,var(--sky),color-mix(in srgb,var(--sky) 70%,#fff));color:var(--on-sky);box-shadow:none;border:0}
button:disabled{box-shadow:none}
.brandstack{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;text-decoration:none;color:var(--text)}
.brandstack img{width:84px;height:auto;filter:drop-shadow(0 2px 4px rgba(0,0,0,.18))}
.brandstack b{font-size:1.5rem;font-weight:800;letter-spacing:.06em;color:var(--navy);margin-top:.25rem;line-height:1.1}
.brandstack span{font-size:.8rem;color:var(--muted);font-weight:600;line-height:1.2}
.band .brandstack b,.band .brandstack span{color:#fff}.band .brandstack span{opacity:.85}
.band{background:linear-gradient(160deg,#17375e 0%,#1d2f55 55%,#3a2a4a 100%);color:#fff;position:relative;overflow:hidden}
.band::before,.band::after{content:'';position:absolute;border-radius:999px;pointer-events:none}
.band::before{right:-50px;top:-16px;width:230px;height:110px;background:linear-gradient(135deg,var(--pink),color-mix(in srgb,var(--pink) 70%,#000));opacity:.9}
.band::after{right:70px;top:46px;width:150px;height:76px;background:linear-gradient(135deg,var(--sky),color-mix(in srgb,var(--sky) 70%,#fff));opacity:.88}
.band>*{position:relative;z-index:1}
.kic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none;color:var(--on-sky);background:linear-gradient(135deg,var(--sky),color-mix(in srgb,var(--sky) 70%,#fff));box-shadow:0 3px 8px color-mix(in srgb,var(--sky) 40%,transparent)}
.kic.red{color:var(--on-pink);background:linear-gradient(135deg,var(--pink),color-mix(in srgb,var(--pink) 72%,#000));box-shadow:0 3px 8px color-mix(in srgb,var(--pink) 35%,transparent)}
.kic svg,.ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tabnav button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tabnav{position:fixed;bottom:0;left:0;right:0;background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--panel) 90%,var(--sky-soft)));border-top:1px solid var(--line);display:flex;padding-bottom:env(safe-area-inset-bottom);z-index:20;overflow-x:auto}
.tabnav button{flex:1;min-width:60px;background:none;color:var(--muted);border-radius:0;flex-direction:column;gap:2px;font-size:.72rem;min-height:62px;box-shadow:none;font-weight:600}
.tabnav button[aria-current=true]{color:var(--text);background:linear-gradient(180deg,transparent,var(--pink-soft));box-shadow:inset 0 3px 0 var(--pink)}
.tabnav button[aria-current=true] svg{color:var(--pink)}