/* SEMESTA GROUP | Project Control — design system (premium industrial SaaS; grid 8px) */
@font-face{font-family:Inter;font-weight:400;font-display:swap;src:url(inter-Regular.woff) format("woff")}
@font-face{font-family:Inter;font-weight:500;font-display:swap;src:url(inter-Medium.woff) format("woff")}
@font-face{font-family:Inter;font-weight:600;font-display:swap;src:url(inter-SemiBold.woff) format("woff")}
@font-face{font-family:Inter;font-weight:700;font-display:swap;src:url(inter-Bold.woff) format("woff")}
:root{
  --side:#0B1117;--side-2:#141C25;--side-ink:#C6CED8;--bg:#F3F4F6;--card:#fff;--line:#E5E7EB;--line-2:#D5DAE1;
  --ink:#17202A;--muted:#5B6672;--accent:#00CBD7;--accent-ink:#00727C;--accent-soft:#E2F8FA;
  --ok:#0B7F5C;--ok-soft:#E3F5EE;--warn:#9A5B00;--warn-soft:#FFF3D6;--bad:#B4291F;--bad-soft:#FDE9E7;--mute-soft:#EEF0F3;
  --r:10px;--shadow:0 1px 2px rgba(11,17,23,.05);--tap:40px
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 14px/1.5 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-feature-settings:"tnum" 1,"calt" 1}
body.noscroll{overflow:hidden}
h1,h2,h3,p,ul,dl,dd{margin:0}ul{padding:0;list-style:none}
h1{font-size:22px;font-weight:700;letter-spacing:-.01em;line-height:1.25}h2{font-size:16px;font-weight:600;line-height:1.35}h3{font-size:14px;font-weight:600}
a{color:var(--accent-ink);text-decoration:none}a:hover{text-decoration:underline}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}button:disabled{opacity:.55;cursor:not-allowed}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}
.ic{width:18px;height:18px;flex:none}
.muted{color:var(--muted)}.small{font-size:12px}.nowrap{white-space:nowrap}.spacer{flex:1}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;word-break:break-all}
.t-bad{color:var(--bad);font-weight:600}.t-warn{color:var(--warn);font-weight:600}.t-ok{color:var(--ok);font-weight:600}
.clamp1,.clamp2{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.clamp1{-webkit-line-clamp:1}.clamp2{-webkit-line-clamp:2}
.boot{padding:48px;text-align:center;color:var(--muted)}
.na{color:var(--muted);font-weight:500;font-size:14px}

/* tombol & form */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);padding:0 16px;border:1px solid var(--line-2);border-radius:8px;background:#fff;font-weight:600;font-size:13px;color:var(--ink);text-decoration:none!important;white-space:nowrap}
.btn:hover{background:#F8F9FB}.btn-primary{background:var(--accent-ink);border-color:var(--accent-ink);color:#fff}.btn-primary:hover{background:#005F68}
.btn-danger{color:var(--bad);border-color:#E8B9B4}.btn-sm{min-height:32px;padding:0 12px;font-size:12px}.btn-block{width:100%}
.linkbtn{border:0;background:none;padding:0;color:var(--accent-ink);font-weight:600;text-align:left}.linkbtn:hover{text-decoration:underline}
.iconbtn{position:relative;display:inline-grid;place-items:center;width:var(--tap);height:var(--tap);border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
.iconbtn .dot{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--bad);color:#fff;font:600 10px/18px Inter,sans-serif;font-style:normal;text-align:center}
label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:16px}
input,select,textarea{width:100%;min-height:var(--tap);padding:8px 12px;border:1px solid var(--line-2);border-radius:8px;background:#fff;font-size:14px;font-weight:400;color:var(--ink)}
textarea{resize:vertical;line-height:1.45}input[type=checkbox]{width:18px;min-height:18px;height:18px;padding:0;flex:none;accent-color:var(--accent-ink)}
input[type=range]{padding:0;border:0;accent-color:var(--accent-ink)}input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;min-height:0}
label.check{flex-direction:row;align-items:flex-start;gap:8px;font-weight:500;color:var(--ink);font-size:13px;margin-bottom:8px;min-height:28px}
label.inline{flex-direction:row;align-items:center;gap:8px;margin:0;white-space:nowrap}label.inline select,label.inline input{width:auto}
.filebtn{position:relative;overflow:hidden;margin:0;flex-direction:row;color:var(--ink)}
fieldset{border:1px solid var(--line);border-radius:8px;margin:0 0 16px;padding:8px 12px}legend{font-size:12px;font-weight:600;color:var(--muted);padding:0 4px}
.checks{max-height:168px;overflow:auto}.checks.tall{max-height:50vh;margin-bottom:16px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.row.end{justify-content:flex-end}
.stack>*:last-child{margin-bottom:0}.pad{padding:16px}.pre{white-space:pre-wrap}
.inlineform{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.inlineform input,.inlineform select{flex:1 1 160px;width:auto}
output{float:right;color:var(--ink);font-weight:700}

/* chip */
.chip{display:inline-flex;align-items:center;min-height:24px;padding:2px 10px;border-radius:12px;font-size:12px;font-weight:600;line-height:1.3;border:0;background:var(--mute-soft);color:#475160}
.chip-ok{background:var(--ok-soft);color:var(--ok)}.chip-info{background:var(--accent-soft);color:var(--accent-ink)}.chip-warn{background:var(--warn-soft);color:var(--warn)}.chip-bad{background:var(--bad-soft);color:var(--bad)}.chip-wait{background:#EDE9FE;color:#5B3FB8}
.prio{display:inline-grid;place-items:center;min-width:32px;height:24px;border-radius:6px;font-size:12px;font-weight:700;flex:none}
.prio-P1{background:var(--bad-soft);color:var(--bad)}.prio-P2{background:var(--warn-soft);color:var(--warn)}.prio-P3{background:var(--accent-soft);color:var(--accent-ink)}
.tid{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.02em;white-space:nowrap}
.phase{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.04em;margin-right:4px}
.bar{height:6px;border-radius:3px;background:#E8EBEF;overflow:hidden}.bar i{display:block;height:100%;border-radius:3px;background:var(--accent)}.bar.lg{height:10px;border-radius:5px}
.avatar{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#22303D;color:#fff;font-size:12px;font-weight:700;border:0;flex:none}.avatar.sm{width:28px;height:28px;font-size:11px}
.count,.tab i,.fchip i{font-style:normal;font-size:12px;font-weight:600;color:var(--muted);background:var(--mute-soft);border-radius:10px;padding:1px 8px;margin-left:4px}

/* layar masuk */
.auth{min-height:100vh;display:grid;grid-template-columns:minmax(320px,5fr) 7fr}
.auth-brand{background:var(--side);color:#fff;padding:64px 48px;display:flex;flex-direction:column;gap:8px}
.wordmark{font-weight:700;font-size:20px;letter-spacing:.06em;color:#fff}.product{font-size:14px;font-weight:500;color:var(--accent)}
.auth-brand p{color:var(--side-ink);margin-top:16px;max-width:36ch}
.unit{margin-top:auto;display:flex;flex-direction:column;gap:8px}.unit span,.side-unit span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#7C8896}
.logo-ev{display:block;width:176px;height:auto;mix-blend-mode:screen}
.auth-card{align-self:center;justify-self:center;width:min(400px,100% - 48px);background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:32px;box-shadow:var(--shadow)}
.auth-card h1{margin-bottom:16px}.auth-card p{margin-bottom:16px}.auth-alt{margin:16px 0 0!important;font-size:13px}.envtag{margin:16px 0 0!important;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}

/* shell */
.shell{min-height:100vh}
.side{position:fixed;inset:0 auto 0 0;width:248px;background:var(--side);color:var(--side-ink);display:flex;flex-direction:column;padding:24px 16px 16px;z-index:30;overflow:auto}
.side-brand{padding:0 8px 24px}.side-nav{display:flex;flex-direction:column;gap:4px}
.side-nav a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:8px;color:var(--side-ink);font-weight:500;text-decoration:none}
.side-nav a:hover{background:var(--side-2);color:#fff}.side-nav a.on{background:#0F2A30;color:#fff;box-shadow:inset 3px 0 0 var(--accent)}.side-nav a.on .ic{color:var(--accent)}
.side-unit{margin-top:auto;padding:24px 8px 16px;display:flex;flex-direction:column;gap:8px}.side-unit .logo-ev{width:144px}
.side-user{display:flex;align-items:center;gap:12px;padding:12px 8px;border:0;border-top:1px solid #1E2833;background:none;color:#fff;text-align:left;width:100%}
.side-user b{display:block;font-size:13px}.side-user small{color:#7C8896;font-size:12px}
.scrim{display:none}
.main{margin-left:248px;min-width:0}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;padding:16px 32px;background:rgba(243,244,246,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.top-title{min-width:0;flex:1}.eyebrow{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.top-act{display:flex;align-items:center;gap:8px}.sync{font-size:12px;color:var(--muted);margin-right:8px}.rel{position:relative}
.view{padding:24px 32px 64px;max-width:1440px}
.bottom{display:none}.only-mobile{display:none!important}
.lead{color:var(--muted);margin-bottom:16px;max-width:80ch}
.backlink{display:inline-flex;align-items:center;gap:4px;font-weight:600;margin-bottom:16px;min-height:32px}

/* kartu & grid */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden}
.card-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;padding:16px 16px 8px}
.card-sub{border-top:1px solid var(--line);padding:16px}.card-sub h3{margin-bottom:16px}
.grid2{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:16px;align-items:start}.grid2.even{grid-template-columns:1fr 1fr}.col{min-width:0}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.dists{display:flex;flex-wrap:wrap;gap:8px 24px}.dist{display:flex;align-items:center;gap:8px;font-size:13px}.dist span{color:var(--muted)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(136px,1fr));gap:16px;margin-bottom:16px}
.tile{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow)}
.tile-v{font-size:28px;font-weight:700;line-height:1.1;letter-spacing:-.02em}.tile-l{font-size:13px;color:var(--muted);margin-top:4px}.tile-s{font-size:12px;color:var(--muted)}
.tile.accent{border-top:3px solid var(--accent)}.tile.bad .tile-v{color:var(--bad)}.tile.warn .tile-v{color:var(--warn)}
.note{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:8px;background:#fff;margin-bottom:16px;font-size:13px}
.note.warn{border-left-color:#E0A100;background:#FFFBEF}.note .ic{margin-top:2px;color:var(--warn)}
.empty{padding:32px 16px;text-align:center;color:var(--muted)}.empty b{display:block;color:var(--ink);font-size:14px;margin-bottom:4px}

/* dashboard */
.prows{padding:0 16px 8px}
.prow{display:grid;grid-template-columns:32px minmax(0,1fr) 120px 44px;gap:8px 16px;align-items:center;padding:12px 0;border-top:1px solid var(--line);color:var(--ink);text-decoration:none!important}
.prow:first-child{border-top:0}.prow:hover b{color:var(--accent-ink)}.prow-name b{display:block;font-weight:600}.prow-name small{color:var(--muted);font-size:12px}
.prow-pct{font-weight:700;text-align:right}.prow-flags{grid-column:2/-1;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:12px}
.atts{padding:0 8px 8px}.att{display:block;width:100%;text-align:left;border:0;background:none;padding:12px 8px;border-top:1px solid var(--line);border-radius:0}
.att:first-child{border-top:0}.att:hover{background:#F8F9FB}.att b{display:block;font-weight:600;margin:4px 0 2px}.att small{color:var(--muted);font-size:12px}
.feed{padding:0 16px 8px}.feed li{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line)}.feed li:first-child{border-top:0}.feed div{min-width:0;flex:1}.feed small{color:var(--muted);font-size:12px}
.quote{border-left:2px solid var(--line-2);padding-left:8px;color:#3B4654;margin:4px 0;white-space:pre-wrap;overflow-wrap:anywhere}

/* proyek */
.pcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.pcard{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px;color:var(--ink);text-decoration:none!important;box-shadow:var(--shadow)}
.pcard:hover{border-color:var(--accent)}.pcard-top{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.pcard h3{font-size:16px;line-height:1.35}
.pcard-foot{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}.pcard-foot b{color:var(--ink)}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin:8px 0}.kv.kv5{grid-template-columns:repeat(5,minmax(0,1fr))}.kv dt{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}.kv dd{font-weight:500;overflow-wrap:anywhere}
.phead{padding:16px}.phead-top{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}.phead h2{font-size:20px;font-weight:700}.target{color:#3B4654;margin:4px 0 8px;max-width:90ch}
.pprog{margin-top:8px;padding-top:16px;border-top:1px solid var(--line)}.pprog-l{display:flex;justify-content:space-between;font-weight:600;margin-bottom:8px}.pprog p{margin-top:8px}
.pdcas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:16px}
.pdca{display:grid;grid-template-columns:auto 1fr auto;gap:2px 8px;align-items:center;text-align:left;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:12px 16px;box-shadow:var(--shadow)}
.pdca.on{border-color:var(--accent-ink);box-shadow:0 0 0 1px var(--accent-ink)}.pdca-l{grid-row:span 2;font-size:24px;font-weight:700;width:28px}.pdca-n{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--muted)}.pdca b{font-size:16px}.pdca small{grid-column:2/-1;color:var(--muted);font-size:12px}.pdca .bar{grid-column:1/-1;margin-top:8px}
.pdca-PLAN .pdca-l{color:var(--ok)}.pdca-DO .pdca-l{color:#1D6FD6}.pdca-CHECK .pdca-l{color:#C77700}.pdca-ACT .pdca-l{color:var(--ink)}
.tabs,.phasetabs{display:flex;gap:4px;overflow-x:auto;margin-bottom:16px;border-bottom:1px solid var(--line);scrollbar-width:none}.phasetabs{margin:0;padding:8px 16px 0}
.tab{flex:none;min-height:var(--tap);padding:0 12px;border:0;border-bottom:2px solid transparent;background:none;font-weight:600;color:var(--muted);white-space:nowrap}.tab.on{color:var(--ink);border-bottom-color:var(--accent-ink)}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}.card>.filters{padding:16px 16px 0}.filters input[type=search]{flex:1 1 200px;width:auto}.filters select{width:auto;flex:0 1 auto}
.fchips{display:flex;gap:8px;overflow-x:auto;flex:1 1 100%;scrollbar-width:none}.fchip{flex:none;min-height:36px;padding:0 12px;border:1px solid var(--line-2);border-radius:18px;background:#fff;font-weight:600;font-size:13px}.fchip.on{background:var(--side);border-color:var(--side);color:#fff}.fchip.on i{background:#22303D;color:#fff}
.tablewrap{overflow-x:auto}
table.swi{width:100%;border-collapse:collapse;font-size:13px}.swi th{position:sticky;top:0;background:#F8F9FB;text-align:left;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:8px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.swi td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top}.swi tbody tr{cursor:pointer}.swi tbody tr:hover{background:#F8FBFC}.swi tr.static{cursor:default}.swi tr.static:hover{background:none}
.swi .num{text-align:right;white-space:nowrap}.swi th.num{text-align:right}.swi .desc{font-weight:500}
.blockline{margin-top:4px;font-size:12px;color:var(--warn)}
.tcards{display:grid;gap:8px;padding:8px}.tcards.wide{padding:0;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.tcard{display:flex;flex-direction:column;gap:8px;width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px}
.tcard:hover{border-color:var(--accent)}.tcard-top,.tcard-foot{display:flex;justify-content:space-between;align-items:center;gap:8px}.tcard-title{font-weight:600;font-size:14px;line-height:1.4}
.tcard-meta{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13px}.tcard-meta span{display:inline-flex;align-items:center;gap:4px}.tcard-meta .ic{width:14px;height:14px;color:var(--muted)}.pct{font-weight:700}
.tcard .cta{align-self:stretch;margin-top:4px;min-height:44px}
.mlist li,.dlist li,.ulist li{display:flex;gap:12px;align-items:center;padding:12px 16px;border-top:1px solid var(--line)}.mlist li:first-child,.dlist li:first-child,.ulist li:first-child{border-top:0}
.mlist div,.dlist div{flex:1;min-width:0}.mlist small,.dlist small,.slist small{display:block;color:var(--muted);font-size:12px}.dlist p{margin:4px 0}
.mdot{width:10px;height:10px;border-radius:50%;background:var(--line-2);flex:none}.mdot.ok{background:var(--ok)}.mdot.bad{background:var(--bad)}
.slist li{display:flex;gap:12px;padding:12px 16px;border-top:1px solid var(--line)}
.ulist form{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;width:100%}.u-id{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 240px}.u-id small{display:block;color:var(--muted);font-size:12px;overflow-wrap:anywhere}
.u-ctl{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}.u-ctl label{margin:0}.u-ctl select,.u-row select{width:auto}.u-row{justify-content:space-between}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1px;background:var(--line)}.kpi{background:#fff;padding:16px;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.kpi-l{font-size:13px;font-weight:600;color:var(--muted)}.kpi-v{font-size:22px;font-weight:700;letter-spacing:-.01em}.kpi-m{font-size:12px;color:var(--muted)}.kpi .btn{margin-top:8px}

/* drawer & modal */
.overlay{position:fixed;inset:0;z-index:50;background:rgba(11,17,23,.48);display:flex;align-items:center;justify-content:center;padding:16px}
.modal{width:min(520px,100%);max-height:calc(100vh - 32px);overflow:auto;background:#fff;border-radius:12px;padding:24px}.modal h2{font-size:18px;margin-bottom:16px}
.drawer-ov{padding:0;justify-content:flex-end;align-items:stretch}
.drawer{width:min(560px,100%);background:#fff;display:flex;flex-direction:column;box-shadow:-8px 0 32px rgba(11,17,23,.16)}
.grab{display:none}.drawer-h{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:16px 24px;border-bottom:1px solid var(--line)}.drawer-h>div{min-width:0}
.drawer-b{flex:1;overflow:auto;padding:16px 24px 32px;overscroll-behavior:contain}.drawer-b>h2{font-size:18px;font-weight:700;margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.dod{background:#F8F9FB;border:1px solid var(--line);border-radius:8px;padding:12px 16px;margin-bottom:16px}.dod b{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}.dod p{margin-top:4px;white-space:pre-wrap}
.sec{border-top:1px solid var(--line)}.sec summary{display:flex;align-items:center;min-height:48px;font-weight:600;font-size:14px;cursor:pointer;list-style:none}.sec summary::-webkit-details-marker{display:none}
.sec summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg)}.sec[open] summary::after{transform:rotate(-135deg)}
.sec-b{padding:4px 0 16px}.sec .feed{padding:0}
.evlist li{display:flex;gap:8px;padding:8px 0;border-bottom:1px solid var(--line)}.evlist div{min-width:0}.evlist a,.evlist .linkbtn{overflow-wrap:anywhere}.evlist small{display:block;color:var(--muted);font-size:12px}.evlist{margin-bottom:16px}
.pop{position:absolute;right:0;top:48px;width:min(380px,calc(100vw - 32px));max-height:70vh;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 12px 32px rgba(11,17,23,.16);z-index:40}
.pop-h{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}.pop-empty{padding:24px;text-align:center;color:var(--muted)}
.notif-i{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:#fff;padding:12px 16px}.notif-i.unread{background:#F2FBFC;box-shadow:inset 3px 0 0 var(--accent)}
.notif-i b,.notif-i span,.notif-i small{display:block}.notif-i span{color:#3B4654;font-size:13px}.notif-i small{color:var(--muted);font-size:12px}
#toast-root{position:fixed;left:50%;bottom:88px;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;align-items:center;width:max-content;max-width:calc(100vw - 32px)}
.toast{background:var(--side);color:#fff;padding:12px 16px;border-radius:8px;font-weight:500;font-size:13px;box-shadow:0 8px 24px rgba(11,17,23,.24)}.toast.err{background:var(--bad)}

/* tablet & HP */
@media (max-width:1100px){.grid2,.grid2.even{grid-template-columns:1fr}.kv.kv5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){
  :root{--tap:44px}
  .only-desktop{display:none!important}.only-mobile{display:inline-grid!important}div.only-mobile{display:grid!important}
  .side{transform:translateX(-100%);transition:transform .2s ease;width:280px}.nav-open .side{transform:none}
  .nav-open .scrim{display:block;position:fixed;inset:0;background:rgba(11,17,23,.48);z-index:25}
  .main{margin-left:0}.top{padding:8px 16px;gap:8px}.top h1{font-size:18px}.eyebrow{display:none}
  .view{padding:16px 16px 96px}
  .bottom{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:22;background:#fff;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  .bottom a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;font-size:11px;font-weight:600;color:var(--muted);text-decoration:none}.bottom a.on{color:var(--accent-ink)}.bottom a.on .ic{color:var(--accent-ink)}
  .tiles{grid-template-columns:1fr 1fr;gap:8px}.tile{padding:12px}.tile-v{font-size:24px}
  .pdcas{grid-template-columns:1fr 1fr;gap:8px}.kv.kv5{grid-template-columns:1fr 1fr}
  .prow{grid-template-columns:32px minmax(0,1fr) 44px}.prow-bar{grid-column:2/-1;grid-row:2}.prow-flags{grid-row:3}
  .pcards,.tcards.wide{grid-template-columns:1fr}
  .auth{grid-template-columns:1fr;grid-template-rows:auto 1fr}.auth-brand{padding:32px 24px}.auth-brand p{display:none}.unit{margin-top:16px}.auth-card{align-self:start;margin:24px 0;padding:24px}
  .drawer-ov{align-items:flex-end}.drawer{width:100%;max-height:92vh;border-radius:16px 16px 0 0}.grab{display:block;width:40px;height:4px;border-radius:2px;background:var(--line-2);margin:8px auto 0}
  .drawer-h{padding:8px 16px 12px}.drawer-b{padding:16px 16px 24px}
  .sticky-cta{position:sticky;bottom:0;box-shadow:0 -8px 16px #fff}
  .overlay:not(.drawer-ov){align-items:flex-end;padding:0}.modal{border-radius:16px 16px 0 0;max-height:92vh;width:100%}
  .filters select{flex:1 1 140px}.two{gap:8px}
  .phead-top .btn{flex:1}
}
@media print{
  .side,.top,.bottom,.noprint,#toast-root,#drawer-root,#modal-root{display:none!important}.main{margin:0}.view{padding:0;max-width:none}body{background:#fff}.card{box-shadow:none;break-inside:avoid}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* lebar progress bar (tanpa inline style agar CSP ketat tetap berlaku) */
.w-0{width:0%}.w-1{width:1%}.w-2{width:2%}.w-3{width:3%}.w-4{width:4%}.w-5{width:5%}.w-6{width:6%}.w-7{width:7%}.w-8{width:8%}.w-9{width:9%}.w-10{width:10%}.w-11{width:11%}.w-12{width:12%}.w-13{width:13%}.w-14{width:14%}.w-15{width:15%}.w-16{width:16%}.w-17{width:17%}.w-18{width:18%}.w-19{width:19%}.w-20{width:20%}.w-21{width:21%}.w-22{width:22%}.w-23{width:23%}.w-24{width:24%}.w-25{width:25%}.w-26{width:26%}.w-27{width:27%}.w-28{width:28%}.w-29{width:29%}.w-30{width:30%}.w-31{width:31%}.w-32{width:32%}.w-33{width:33%}.w-34{width:34%}.w-35{width:35%}.w-36{width:36%}.w-37{width:37%}.w-38{width:38%}.w-39{width:39%}.w-40{width:40%}.w-41{width:41%}.w-42{width:42%}.w-43{width:43%}.w-44{width:44%}.w-45{width:45%}.w-46{width:46%}.w-47{width:47%}.w-48{width:48%}.w-49{width:49%}.w-50{width:50%}.w-51{width:51%}.w-52{width:52%}.w-53{width:53%}.w-54{width:54%}.w-55{width:55%}.w-56{width:56%}.w-57{width:57%}.w-58{width:58%}.w-59{width:59%}.w-60{width:60%}.w-61{width:61%}.w-62{width:62%}.w-63{width:63%}.w-64{width:64%}.w-65{width:65%}.w-66{width:66%}.w-67{width:67%}.w-68{width:68%}.w-69{width:69%}.w-70{width:70%}.w-71{width:71%}.w-72{width:72%}.w-73{width:73%}.w-74{width:74%}.w-75{width:75%}.w-76{width:76%}.w-77{width:77%}.w-78{width:78%}.w-79{width:79%}.w-80{width:80%}.w-81{width:81%}.w-82{width:82%}.w-83{width:83%}.w-84{width:84%}.w-85{width:85%}.w-86{width:86%}.w-87{width:87%}.w-88{width:88%}.w-89{width:89%}.w-90{width:90%}.w-91{width:91%}.w-92{width:92%}.w-93{width:93%}.w-94{width:94%}.w-95{width:95%}.w-96{width:96%}.w-97{width:97%}.w-98{width:98%}.w-99{width:99%}.w-100{width:100%}
.u-ctl .u-title{width:160px}
@media (max-width:900px){.u-ctl .u-title{width:100%}}
.gbtn{gap:12px;margin-bottom:16px}.or{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px;margin-bottom:16px}.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.side-brand .logo-ev{width:168px;margin:0 0 4px -6px}.side-brand .product{padding-left:2px}.auth-brand .logo-ev{width:240px;margin-left:-8px}.auth-brand .product{font-size:16px}.side{background:#05080B}.auth-brand{background:#05080B}
@media (max-width:900px){.auth-brand .logo-ev{width:190px}}