/* MaterialFlow app layer — Factory-Flow Design Specification V1.1 (shell, tiers, components). */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--surface-app);color:var(--text);font:400 14px/1.45 var(--font-body);-webkit-font-smoothing:antialiased}
a{color:var(--accent)} button{font:inherit;color:inherit;cursor:pointer}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--focus-outline-color);outline-offset:2px}
.ff-dark :focus-visible{outline-color:var(--rail-accent);outline-offset:-3px}
.sr-only,.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;left:var(--space-4);top:var(--space-4);width:auto;height:auto;clip:auto;z-index:100;
  background:var(--surface-raised);padding:var(--space-4) var(--space-7);border-radius:var(--radius-control);border:1px solid var(--control-border)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:var(--tracking-mono)}
.label{font:600 11px/1 var(--font-label);letter-spacing:var(--tracking-label);text-transform:uppercase}
.code{font:400 13px/1 var(--font-mono);letter-spacing:var(--tracking-mono);white-space:nowrap;color:var(--accent)}
.dash{color:var(--text-ghost)}

/* shell */
.shell{display:flex;height:100%}
.col{flex:1;min-width:0;display:flex;flex-direction:column;height:100%}
main{flex:1;min-height:0;overflow:auto}
html[data-ff-tier="narrow"] .shell{display:block;height:auto;min-height:100%}
html[data-ff-tier="narrow"] .col{height:auto}
html[data-ff-tier="narrow"] main{overflow:visible}

/* chrome (dark) */
.ff-dark{--text:#f2f0ef;--text-body:rgba(242,240,239,.82);--text-meta:rgba(242,240,239,.62)}
.sidebar{width:var(--shell-sidebar-w);flex:none;background:var(--chrome-bg);color:var(--chrome-ink-nav);display:flex;flex-direction:column}
.rail{width:var(--shell-rail-w);flex:none;background:var(--chrome-bg);display:none;flex-direction:column;align-items:stretch}
.phone{display:none}
html[data-ff-tier="wide"] .rail,html[data-ff-tier="compact"] .sidebar,html[data-ff-tier="medium"] .sidebar,html[data-ff-tier="narrow"] .sidebar{display:none}
html[data-ff-tier="compact"] .rail,html[data-ff-tier="medium"] .rail{display:flex}
html[data-ff-tier="narrow"] .rail{display:none}
html[data-ff-tier="narrow"] .phone{display:block}
.lockup{display:flex;align-items:center;gap:var(--space-6);height:var(--shell-header-h);padding:0 var(--space-11);border-bottom:1px solid var(--chrome-rule);flex:none}
.lockup svg{height:28px;width:auto;display:block}
.lockup b{font:600 13.5px/1 var(--font-label);letter-spacing:.18em;text-transform:uppercase;color:var(--chrome-ink)}
.nav{overflow-y:auto;padding:var(--space-8) 0;display:flex;flex-direction:column;gap:var(--space-8)}
.nav section{display:flex;flex-direction:column;gap:1px}
.gh{display:flex;align-items:center;gap:var(--space-4);padding:0 var(--space-11) var(--space-3);font:600 11px/1 var(--font-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--chrome-ink-dim)}
.gh svg{width:13px;height:13px}
.ni{display:flex;align-items:center;gap:var(--space-6);min-height:var(--sidebar-row-h);padding:var(--space-3) var(--space-8) var(--space-3) 41px;text-decoration:none;color:var(--chrome-ink-nav);font:400 13px/1.15 var(--font-body);letter-spacing:-.005em}
.ni.top{padding-left:var(--space-10)}
.ni:hover{background:rgba(242,240,239,.06);color:var(--chrome-ink)}
.ni[aria-current=page]{background:var(--rail-fill-active);box-shadow:inset var(--rail-bar-w) 0 0 var(--rail-accent);color:var(--rail-accent);font-weight:600}
.ni .cnt{margin-left:auto;font:400 11px/1 var(--font-mono);letter-spacing:.06em;color:var(--queue-count)}
.ni .soon{margin-left:auto;font:600 11px/1 var(--font-label);letter-spacing:.1em;text-transform:uppercase;color:var(--chrome-ink-dim)}
.ni.off{opacity:1;color:var(--chrome-ink-dim)}
.ni svg{width:13px;height:13px}

/* rail */
.rail .rh{height:var(--shell-header-h);display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--chrome-rule)}
.rail .rh svg{height:30px}
.rc{height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;text-decoration:none;color:var(--chrome-ink-dim);font:400 11px/1 var(--font-body)}
.rc svg{width:19px;height:19px}
.rc:hover{color:var(--chrome-ink)}
.rc[aria-current=page]{background:var(--rail-fill-active);box-shadow:inset var(--rail-bar-w) 0 0 var(--rail-accent);color:var(--rail-accent)}

/* page header */
.ph{height:var(--shell-header-h);flex:none;display:flex;align-items:center;gap:var(--space-14);padding:0 var(--gutter);border-bottom:1px solid var(--hairline-strong);background:var(--surface-app)}
.ph h1{font:700 21px/1 var(--font-display);letter-spacing:-.02em;white-space:nowrap}
.ph .sub{font:600 11px/1 var(--font-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-index);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ph .titles{display:flex;align-items:baseline;gap:var(--space-8);min-width:0;flex:1}
.ph .right{display:flex;align-items:center;gap:var(--space-10);margin-left:auto}
.ph .clock{font:400 12.5px/1 var(--font-mono);letter-spacing:var(--tracking-mono);color:var(--text-meta)}
.avatar{width:var(--control-h);height:var(--control-h);display:grid;place-items:center;border:1px solid var(--control-border);border-radius:var(--radius-control);font:600 11px/1 var(--font-label);letter-spacing:.08em;background:transparent}
.user{display:flex;align-items:center;gap:var(--space-4);font:400 13.5px/1 var(--font-body);color:var(--text-body)}
html[data-ff-tier="medium"] .ph .user span,html[data-ff-tier="medium"] .ph .clock,html[data-ff-tier="compact"] .ph .user span.role{display:none}
html[data-ff-tier="narrow"] .ph{display:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-4);height:var(--control-h);padding:0 var(--space-9);border-radius:var(--radius-control);
  border:1px solid var(--control-border);background:var(--surface-raised);font:600 12px/1 var(--font-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text);text-decoration:none;white-space:nowrap}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent-lift);border-color:var(--accent-lift);color:#fff}
.btn svg{width:16px;height:16px}

/* in-page tabs (MaterialFlow extension: screens of the current group) */
.tabs{display:none;gap:0;padding:0 var(--gutter);border-bottom:1px solid var(--hairline-strong);overflow-x:auto;flex:none}
html[data-ff-tier="compact"] .tabs,html[data-ff-tier="medium"] .tabs,html[data-ff-tier="narrow"] .tabs{display:flex}
.tabs a{display:flex;align-items:center;min-height:var(--control-h);padding:0 var(--space-9);text-decoration:none;white-space:nowrap;color:var(--text-label);font:600 11px/1 var(--font-label);letter-spacing:var(--tracking-label);text-transform:uppercase}
.tabs a[aria-current=page]{color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent)}

/* filter bar */
.fb{flex:none;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-9);min-height:52px;padding:var(--space-4) var(--gutter);border-bottom:1px solid var(--hairline)}
.fb .f{display:flex;align-items:center;gap:var(--space-5)}
.fb .f .label{color:var(--text-index)}
.sel{height:28px;padding:0 var(--space-6);border:1px solid var(--input-border);border-radius:var(--radius-control);background:var(--surface-raised);font:600 12px/1 var(--font-label);letter-spacing:var(--tracking-label);text-transform:uppercase}
html[data-ff-tier="medium"] .sel,html[data-ff-tier="narrow"] .sel{height:var(--control-h-touch)}
.fb .grow{margin-left:auto;display:flex;gap:var(--space-6)}

/* KPI band */
.kpis{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));border-bottom:1px solid var(--hairline-strong);flex:none}
.kpi{padding:var(--space-10) var(--space-13) var(--space-17) var(--space-13);padding-bottom:17px;border-left:1px solid var(--hairline);box-shadow:inset 0 3px 0 var(--rule-group)}
.kpi:first-child{border-left:0}
.kpi.risk-late{box-shadow:inset 0 3px 0 var(--risk-late)} .kpi.risk-watch{box-shadow:inset 0 3px 0 var(--risk-watch)}
.kpi.risk-urgent{box-shadow:inset 0 3px 0 var(--risk-urgent)} .kpi.risk-safe{box-shadow:inset 0 3px 0 var(--risk-safe)}
.kpi .label{color:var(--text-label)}
.kpi .fig{margin-top:13px;font:400 34px/1 var(--font-mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
html[data-ff-wide1500="true"][data-ff-tier="wide"] .kpi .fig{font-size:40px}
.kpi .fig small{font:600 11px/1 var(--font-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-meta);margin-left:var(--space-4)}
.kpi.risk-late .fig{color:var(--risk-late-ink)} .kpi.risk-watch .fig{color:var(--risk-watch-ink)}
.kpi.risk-urgent .fig{color:var(--risk-urgent-ink)} .kpi.risk-safe .fig{color:var(--risk-safe-ink)}
.kpi .note{margin-top:11px;font:400 13px/1.45 var(--font-body);color:var(--text-label)}
html[data-ff-tier="compact"] .kpi{padding:var(--space-9) var(--space-12)}
html[data-ff-tier="medium"] .kpis,html[data-ff-tier="narrow"] .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-ff-tier="medium"] .kpi{padding:var(--space-9) var(--space-17)}
html[data-ff-tier="narrow"] .kpi{padding:13px 20px 14px}
html[data-ff-tier="narrow"] .kpi .fig{font-size:28px;margin-top:10px}
html[data-ff-tier="narrow"] .kpi .note{display:none}
html[data-ff-tier="medium"] .kpi:nth-child(odd),html[data-ff-tier="narrow"] .kpi:nth-child(odd){border-left:0}
html[data-ff-tier="medium"] .kpi:nth-child(n+3),html[data-ff-tier="narrow"] .kpi:nth-child(n+3){border-top:1px solid var(--hairline)}

/* body panes */
.page{display:grid;grid-template-columns:minmax(0,1fr) var(--side,0);min-height:0}
.page.has-side{--side:420px}
html[data-ff-tier="compact"] .page.has-side,html[data-ff-tier="medium"] .page.has-side,html[data-ff-tier="narrow"] .page.has-side{--side:0;display:block}
.pane{padding:0 var(--gutter) var(--space-14)}
.pane.side{border-left:1px solid var(--rule-pane)}
html[data-ff-tier="compact"] .pane.side,html[data-ff-tier="medium"] .pane.side,html[data-ff-tier="narrow"] .pane.side{border-left:0;border-top:1px solid var(--rule-pane)}
.st{display:flex;align-items:baseline;gap:var(--space-7);padding:var(--space-14) 0 var(--space-7);flex-wrap:wrap}
.st h2{font:600 12px/1 var(--font-label);letter-spacing:var(--tracking-label);text-transform:uppercase}
.st .meta{font:400 12.5px/1 var(--font-mono);letter-spacing:var(--tracking-mono);color:var(--text-meta);text-transform:uppercase}
.hint{font:400 11.5px/1.3 var(--font-mono);letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--text-label);margin:0 0 var(--space-7)}
.long{font:400 14px/1.6 var(--font-body);color:var(--text-body)}

/* chips */
.rchip{display:inline-flex;align-items:center;height:22px;padding:0 var(--space-4);border-radius:var(--radius-chip);font:600 11px/1 var(--font-label);letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.rchip.late{color:var(--risk-late-ink);background:color-mix(in srgb,var(--risk-late) var(--risk-chip-tint),transparent);border:1px solid color-mix(in srgb,var(--risk-late) var(--risk-chip-border-mix),transparent)}
.rchip.urgent{color:var(--risk-urgent-ink);background:color-mix(in srgb,var(--risk-urgent) var(--risk-chip-tint),transparent);border:1px solid color-mix(in srgb,var(--risk-urgent) var(--risk-chip-border-mix),transparent)}
.rchip.watch{color:var(--risk-watch-ink);background:color-mix(in srgb,var(--risk-watch) var(--risk-chip-tint-watch),transparent);border:1px solid color-mix(in srgb,var(--risk-watch) var(--risk-chip-border-watch),transparent)}
.rchip.safe{color:var(--risk-safe-ink);background:color-mix(in srgb,var(--risk-safe) var(--risk-chip-tint),transparent);border:1px solid color-mix(in srgb,var(--risk-safe) var(--risk-chip-border-mix),transparent)}
.schip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 var(--space-4);border-radius:var(--radius-chip);border:1px solid var(--status-chip-border);font:400 12px/1 var(--font-body);color:var(--text-body);white-space:nowrap}
.schip.strong{border-color:var(--status-chip-border-strong);background:var(--status-chip-fill-strong);color:var(--text);font-weight:600}
.pol{font:600 11px/1 var(--font-label);letter-spacing:.1em;text-transform:uppercase;color:var(--text-body);border:1px solid var(--status-chip-border);border-radius:var(--radius-chip);padding:5px var(--space-3)}

/* data table */
table{width:100%;border-collapse:collapse}
thead th{font:600 11px/1.2 var(--font-label);letter-spacing:var(--tracking-label-caps);text-transform:uppercase;color:var(--text-meta);text-align:left;vertical-align:bottom;padding:0 12px 10px;border-bottom:1px solid var(--rule-pane);white-space:normal;font-weight:600}
thead th:first-child,tbody td:first-child{padding-left:16px}
th.n,td.n{text-align:right}
tbody td{height:var(--row-h);padding:0 12px;border-bottom:1px solid var(--hairline);vertical-align:middle;font:400 14px/1.45 var(--font-body);color:var(--text-body)}
tbody td.n{font:400 13.5px/1 var(--font-mono);letter-spacing:var(--tracking-mono);color:var(--text);font-variant-numeric:tabular-nums}
tbody td b{font-weight:600;color:var(--text)}
tbody td small{display:block;font:400 12.5px/1.2 var(--font-body);color:var(--text-meta)}
tbody tr.r-late{box-shadow:inset var(--rail-w) 0 0 var(--risk-late)} tbody tr.r-urgent{box-shadow:inset var(--rail-w) 0 0 var(--risk-urgent)}
tbody tr.r-watch{box-shadow:inset var(--rail-w) 0 0 var(--risk-watch)} tbody tr.r-safe{box-shadow:inset var(--rail-w) 0 0 var(--risk-safe)}
tbody tr.sel{background:var(--row-selected-fill)}
html[data-ff-tier="compact"] [data-p="4"],html[data-ff-tier="medium"] [data-p="4"],html[data-ff-tier="medium"] [data-p="3"]{display:none}
.tscroll{overflow-x:auto}
/* narrow: rows become record cards (C-47) */
html[data-ff-tier="narrow"] table.cards,html[data-ff-tier="narrow"] table.cards tbody{display:block}
html[data-ff-tier="narrow"] table.cards thead{display:none}
html[data-ff-tier="narrow"] table.cards tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4) var(--space-9);background:var(--surface-raised);margin:0 0 var(--space-6);padding:var(--space-8) var(--space-9) var(--space-8) 23px;box-shadow:inset var(--card-rail-w) 0 0 var(--rule-group)}
html[data-ff-tier="narrow"] table.cards tbody tr.r-late{box-shadow:inset var(--card-rail-w) 0 0 var(--risk-late)}
html[data-ff-tier="narrow"] table.cards tbody tr.r-urgent{box-shadow:inset var(--card-rail-w) 0 0 var(--risk-urgent)}
html[data-ff-tier="narrow"] table.cards tbody tr.r-watch{box-shadow:inset var(--card-rail-w) 0 0 var(--risk-watch)}
html[data-ff-tier="narrow"] table.cards tbody tr.r-safe{box-shadow:inset var(--card-rail-w) 0 0 var(--risk-safe)}
html[data-ff-tier="narrow"] table.cards td{display:block;height:auto;padding:0;border:0;text-align:left!important}
html[data-ff-tier="narrow"] table.cards td[data-c="id"],html[data-ff-tier="narrow"] table.cards td[data-c="title"]{grid-column:1/-1}
html[data-ff-tier="narrow"] table.cards td[data-c="title"]{font:600 15px/1.25 var(--font-body)}
html[data-ff-tier="narrow"] table.cards td[data-c="fig"]::before{content:attr(data-l);display:block;font:600 11px/1 var(--font-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-label);margin-bottom:var(--space-2)}
html[data-ff-tier="narrow"] table.cards td[data-c="fig"]{font:400 14px/1 var(--font-mono)}
html[data-ff-tier="narrow"] [data-p="4"],html[data-ff-tier="narrow"] [data-p="3"]{display:block}

/* capacity-style meter (ink, never risk colour) */
.meter{position:relative;height:8px;background:var(--skeleton-fill);min-width:90px}
.meter i{position:absolute;left:0;top:0;bottom:0;background:var(--ink)}
.meter u{position:absolute;top:-3px;bottom:-3px;width:1px;background:var(--text-index)}

/* freshness dot + word (never colour alone) */
.fresh{display:inline-flex;align-items:center;gap:var(--space-2);font:400 12px/1 var(--font-body)}
.fresh::before{content:"";width:8px;height:8px;background:var(--risk-safe)}
.fresh.warn::before{background:var(--risk-watch)} .fresh.stale::before{background:var(--risk-late)}

/* bars (share bar) */
.sbar{display:flex;height:14px;width:100%}
.sbar i{display:block;height:100%}

/* phone chrome */
.phone{position:sticky;top:0;z-index:32;background:var(--chrome-bg);color:var(--chrome-ink)}
.phone .strip{height:var(--phone-strip-h);display:flex;align-items:center;gap:var(--space-5);padding:0 var(--space-9);border-bottom:1px solid var(--chrome-rule)}
.phone .strip svg{height:20px}
.phone .strip b{font:600 11.5px/1 var(--font-label);letter-spacing:.20em;text-transform:uppercase}
.phone .trow{height:var(--phone-title-h);display:flex;align-items:center;gap:var(--space-4);padding:0 var(--space-4) 0 var(--gutter)}
.phone .eyebrow{font:600 11px/1 var(--font-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--chrome-ink-dim);margin-bottom:5px}
.phone h1{font:700 19px/1.1 var(--font-display);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phone .tt{flex:1;min-width:0}
.pbtn{width:48px;height:48px;display:grid;place-items:center;border:0;background:transparent;color:var(--chrome-ink)}
.pbtn svg{width:22px;height:22px}
.menu-sheet{display:none;position:fixed;inset:104px 0 0 0;z-index:31;background:var(--chrome-sheet);overflow:auto;padding:var(--space-4) 0 var(--space-18)}
html[data-ff-view="menu"] .menu-sheet{display:block}
.menu-sheet .gh{padding-top:var(--space-9)}
.menu-sheet .ni{min-height:48px;padding-left:var(--space-17);font-size:15px;color:var(--chrome-ink-body)}
.menu-sheet .ni[aria-current=page]{color:var(--rail-accent)}

/* sticky action footer */
.foot{position:sticky;bottom:0;z-index:4;background:var(--surface-raised);border-top:1px solid var(--hairline-strong);padding:var(--space-7) var(--gutter);display:flex;gap:var(--space-6);align-items:center;flex-wrap:wrap}
.foot .long{flex:1;min-width:200px;font-size:13px}

/* roadmap placeholder */
.soon-card{max-width:640px;margin:var(--space-18) var(--gutter);padding:var(--space-14);border:1px solid var(--hairline-strong);background:var(--surface-raised)}
.soon-card h2{font:700 26px/1.1 var(--font-display);letter-spacing:-.02em;margin-bottom:var(--space-7)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
td.n,th.n{white-space:nowrap}

/* Blok 2 — perbaikan visual (hanya token/ukuran yang sudah ada) */
.kpi .fig{white-space:nowrap}
.kpi .fig small{white-space:nowrap}
html[data-ff-tier="wide"] .kpi{padding-left:var(--space-12);padding-right:var(--space-7)}
html[data-ff-tier="narrow"] .kpi{padding-left:var(--space-9);padding-right:var(--space-4)}
html[data-ff-tier="narrow"] .kpi .fig{font-size:21px}
html[data-ff-tier="wide"] thead th,html[data-ff-tier="wide"] tbody td{padding-left:var(--space-4);padding-right:var(--space-4)}
html[data-ff-tier="wide"] thead th:first-child,html[data-ff-tier="wide"] tbody td:first-child{padding-left:var(--space-9)}
.schip{white-space:normal;height:auto;min-height:22px;padding-top:var(--space-1);padding-bottom:var(--space-1);line-height:1.2}
html[data-ff-tier="narrow"] table.cards tbody tr{grid-template-columns:repeat(2,minmax(0,1fr))}
html[data-ff-tier="narrow"] table.cards td{min-width:0;overflow-wrap:anywhere}
html[data-ff-tier="narrow"] table.cards td.n,html[data-ff-tier="narrow"] table.cards td.code{white-space:normal}
html[data-ff-tier="narrow"] table.cards td[data-c="fig"]::before{line-height:1.25;white-space:normal}

/* Blok 3 - login, keluar, pesan status */
.logout{margin:auto 0 0;border-top:1px solid var(--chrome-rule);padding:var(--space-7) 0}
.logout .ni{width:100%;border:0;background:transparent;text-align:left;cursor:pointer}
.menu-sheet .logout{margin-top:var(--space-9)}
.logout-h{margin:0}
html[data-ff-tier="wide"] .logout-h,html[data-ff-tier="narrow"] .logout-h{display:none}
.flash{margin:0;padding:var(--space-7) var(--gutter);border-bottom:1px solid var(--hairline-strong);background:var(--surface-raised);font:400 13.5px/1.45 var(--font-body);color:var(--text-body);box-shadow:inset var(--rail-w) 0 0 var(--accent)}
.flash.error{box-shadow:inset var(--rail-w) 0 0 var(--risk-late);color:var(--text-danger)}
.flash.ok{box-shadow:inset var(--rail-w) 0 0 var(--risk-safe)}
.login{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-13);padding:var(--space-14) var(--space-9)}
.login-brand{display:flex;align-items:center;gap:var(--space-6);padding:var(--space-7) var(--space-11);background:var(--chrome-bg);color:var(--chrome-ink);border-radius:var(--radius-menu)}
.login-brand b{font:600 13.5px/1 var(--font-label);letter-spacing:.18em;text-transform:uppercase}
.login-card{width:100%;max-width:380px;display:flex;flex-direction:column;gap:var(--space-9);padding:var(--space-14);background:var(--surface-raised);border:1px solid var(--hairline-strong);border-radius:var(--radius-menu)}
.login-card h1{font:700 26px/1.1 var(--font-display);letter-spacing:-.02em}
.fld{display:flex;flex-direction:column;gap:var(--space-4)}
.fld .label{color:var(--text-label)}
.fld input{height:var(--control-h-touch);padding:0 var(--space-7);border:1px solid var(--input-border);border-radius:var(--radius-control);background:var(--surface-raised);font:400 14px/1 var(--font-body);color:var(--text)}
.login-card .btn{height:var(--control-h-touch)}

/* Blok 4 - dialog Kunci risiko, form aksi */
.dlg{border:1px solid var(--hairline-strong);border-radius:var(--radius-modal);padding:var(--space-14);width:min(480px,calc(100% - 2 * var(--space-9)));background:var(--surface-raised);color:var(--text)}
.dlg::backdrop{background:var(--scrim-menu)}
.dlg h2{font:700 21px/1.1 var(--font-display);letter-spacing:-.02em;margin-bottom:var(--space-7)}
.rk{display:grid;grid-template-columns:auto 1fr;gap:var(--space-7) var(--space-9);align-items:center;margin:var(--space-9) 0}
.rk dt{margin:0}.rk dd{margin:0;font:400 14px/1.4 var(--font-body);color:var(--text-body)}
.dlg-f{margin:var(--space-9) 0 0;display:flex;justify-content:flex-end}
.dlg-f .btn{min-width:96px}
.menu-sheet .ni.key{width:100%;border:0;background:transparent;text-align:left;cursor:pointer}
.act{display:flex;flex-wrap:wrap;gap:var(--space-9);align-items:flex-end;padding:var(--space-9) 0}
.act form{display:flex;flex-wrap:wrap;gap:var(--space-6);align-items:flex-end;margin:0}
.act .fld{min-width:140px}
.act .fld.grow{flex:1;min-width:200px}
.act select,.act input[type=text],.act input[type=number]{height:var(--control-h);padding:0 var(--space-6);border:1px solid var(--input-border);border-radius:var(--radius-control);background:var(--surface-raised);font:400 14px/1 var(--font-body);color:var(--text);width:100%}
.act .btn{height:var(--control-h)}
.foot form{margin:0;display:flex;gap:var(--space-6);align-items:center;flex-wrap:wrap}
.foot input[type=text]{height:var(--control-h);padding:0 var(--space-6);border:1px solid var(--input-border);border-radius:var(--radius-control);background:var(--surface-raised);font:400 14px/1 var(--font-body);min-width:220px}
.msgs{display:flex;flex-direction:column;gap:var(--space-7);margin:var(--space-7) 0}
.msg{padding:var(--space-8);background:var(--surface-raised);border:1px solid var(--hairline-strong);border-radius:var(--radius-menu);max-width:520px}
.msg pre{margin:var(--space-5) 0 0;font:400 13px/1.5 var(--font-mono);white-space:pre-wrap;color:var(--text-body)}
.msg .to{display:flex;gap:var(--space-5);align-items:center;flex-wrap:wrap}

/* Blok 6 - pengalih bahasa ID | EN */
.lang{display:inline-flex;border:1px solid var(--control-border);border-radius:var(--radius-control);overflow:hidden}
.lang a{display:flex;align-items:center;justify-content:center;min-width:var(--control-h);height:var(--control-h);padding:0 var(--space-5);text-decoration:none;color:var(--text-label);font:600 11px/1 var(--font-label);letter-spacing:var(--tracking-label)}
.lang a[aria-current]{background:var(--accent);color:#fff}
.lang a:hover:not([aria-current]){color:var(--accent)}
.lang-row{padding:var(--space-7) var(--space-11) 0}
.lang-row .lang{border-color:var(--chrome-control-border)}
.lang-row .lang a{color:var(--chrome-ink-nav);height:var(--control-h-touch);min-width:var(--control-h-touch)}
.lang-row .lang a[aria-current]{background:var(--rail-fill-active);color:var(--rail-accent)}
html[data-ff-tier="wide"] .lang-row .lang a{height:var(--control-h);min-width:var(--control-h)}
.login-lang{padding:0}
.login-lang .lang{border-color:var(--control-border)}
.login-lang .lang a{color:var(--text-label);height:var(--control-h-touch)}
.login-lang .lang a[aria-current]{background:var(--accent);color:#fff}

/* Blok 6 - teks Inggris lebih panjang: bar filter dan tabel lebar tetap muat tanpa scroll horizontal */
.fb .grow{flex-wrap:wrap;max-width:100%}
html[data-ff-tier="narrow"] .fb .grow{margin-left:0;width:100%}
html[data-ff-tier="narrow"] .fb .grow .btn{flex:1 1 auto;white-space:normal;line-height:1.2;height:auto;min-height:var(--control-h);padding-top:var(--space-4);padding-bottom:var(--space-4)}
html[data-ff-tier="wide"] thead th,html[data-ff-tier="wide"] tbody td{padding-left:var(--space-3);padding-right:var(--space-3)}
html[data-ff-tier="wide"] thead th:first-child,html[data-ff-tier="wide"] tbody td:first-child{padding-left:var(--space-9)}