/* Tema Registri Lisensi UPA TIK — token disalin dari css.py situs upatik.polibatam.ac.id.
   Berkas statis, tidak melalui Vite: cukup rsync lalu naikkan ?v= di layout. */
/* ============ TOKENS — disalin dari css.py situs upatik.polibatam.ac.id ============ */
:root{
  --ground:#ffffff;
  --ground-alt:#f2f5f8;
  --ground-sunk:#e6ecf1;
  --surface:#ffffff;
  --line:#d3dce4;
  --line-soft:#e6ecf1;

  --ink:#0f2231;
  --ink-soft:#40596c;
  --ink-mute:#6a8194;

  --navy:#123a5c;
  --navy-deep:#08202f;
  --navy-mid:#0d2c44;
  --amber:#c98219;
  --amber-bright:#e0a338;
  --cyan:#1d7f8c;
  --ok:#1d7f5f;
  --warn:#a9711a;
  --dot-ok:#12996a;
  --dot-down:#c3282d;
  --dot-warn:#a9711a;
  --dot-tunggu:#4d6579;

  --bar-bg:#e7edf3;
  --bar-ink:#40596c;
  --bar-ink-kuat:#0f2231;
  --bar-line:rgba(15,34,49,.18);
  --hero-ink:#0f2231;
  --hero-mute:#40596c;
  --hero-g4:#e6eef5;
  --hero-line:rgba(15,34,49,.30);
  --hero-inv-bg:#0f2231;
  --hero-inv-ink:#ffffff;
  --status-bg:#d9e4ee;
  --status-ink:#1c3346;
  --status-mute:#4d6579;
  --status-ring:rgba(15,34,49,.10);
  --foot-bg:#dfe7ee;
  --foot-ink:#3b536a;
  --foot-line:rgba(15,34,49,.16);
  --on-navy:#ffffff;
  --aksen-ink:#8a5a10;
  --on-dark:#eef4f8;
  --on-dark-mute:#a9c0d1;

  --shadow:0 1px 2px rgba(8,32,47,.06), 0 12px 28px -18px rgba(8,32,47,.35);
  --shadow-lift:0 2px 4px rgba(8,32,47,.08), 0 22px 44px -22px rgba(8,32,47,.45);

  --wrap:1280px;
  --gut:clamp(1rem,3.4vw,2.25rem);

  --f-display:"Oswald","Arial Narrow",Impact,sans-serif;
  --f-body:"Source Sans 3","Segoe UI",Helvetica,Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;

  /* --- alias untuk komponen aplikasi registri --- */
  --page:var(--ground-alt);
  --card:var(--surface);
  --card-2:var(--ground-alt);
  --ink-2:var(--ink-soft);
  --muted:var(--ink-mute);
  --line-2:var(--line-soft);
  --navy-soft:var(--ground-sunk);
  --st-ok:var(--dot-ok);
  --st-warn:var(--dot-warn);
  --st-crit:var(--dot-down);
  --st-neu:var(--dot-tunggu);
  --meter-track:var(--ground-sunk);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0a1622;
    --ground-alt:#0f2030;
    --ground-sunk:#132738;
    --surface:#122335;
    --line:#26415a;
    --line-soft:#1c3346;
    --ink:#e7f0f7;
    --ink-soft:#b3c8d8;
    --ink-mute:#8ba5b9;
    --navy:#8fc0e0;
    --navy-deep:#061621;
    --navy-mid:#0b2233;
    --amber:#e0a338;
    --amber-bright:#f0bc5c;
    --cyan:#5cc0cd;
    --ok:#4cc596;
    --warn:#d9a441;
    --dot-ok:#3ecf94;
    --dot-down:#e5484d;
    --dot-warn:#f0bc5c;
    --dot-tunggu:#a9c0d1;
    --bar-bg:#061621;
    --bar-ink:#a9c0d1;
    --bar-ink-kuat:#ffffff;
    --bar-line:rgba(255,255,255,.26);
    --hero-ink:#ffffff;
    --hero-mute:#a9c0d1;
    --hero-g4:#08202f;
    --hero-line:rgba(255,255,255,.70);
    --hero-inv-bg:#ffffff;
    --hero-inv-ink:#0b2233;
    --status-bg:#0b2233;
    --status-ink:#eef4f8;
    --status-mute:#a9c0d1;
    --status-ring:rgba(255,255,255,.09);
    --foot-bg:#061621;
    --foot-ink:#a9c0d1;
    --foot-line:rgba(255,255,255,.14);
    --on-navy:#08202f;
    --aksen-ink:#f0bc5c;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 30px -18px rgba(0,0,0,.8);
    --shadow-lift:0 2px 6px rgba(0,0,0,.5), 0 26px 50px -22px rgba(0,0,0,.9);
    --page:var(--ground);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#0a1622;
  --ground-alt:#0f2030;
  --ground-sunk:#132738;
  --surface:#122335;
  --line:#26415a;
  --line-soft:#1c3346;
  --ink:#e7f0f7;
  --ink-soft:#b3c8d8;
  --ink-mute:#8ba5b9;
  --navy:#8fc0e0;
  --navy-deep:#061621;
  --navy-mid:#0b2233;
  --amber:#e0a338;
  --amber-bright:#f0bc5c;
  --cyan:#5cc0cd;
  --ok:#4cc596;
  --warn:#d9a441;
  --dot-ok:#3ecf94;
  --dot-down:#e5484d;
  --dot-warn:#f0bc5c;
  --dot-tunggu:#a9c0d1;
  --bar-bg:#061621;
  --bar-ink:#a9c0d1;
  --bar-ink-kuat:#ffffff;
  --bar-line:rgba(255,255,255,.26);
  --hero-ink:#ffffff;
  --hero-mute:#a9c0d1;
  --hero-g4:#08202f;
  --hero-line:rgba(255,255,255,.70);
  --hero-inv-bg:#ffffff;
  --hero-inv-ink:#0b2233;
  --status-bg:#0b2233;
  --status-ink:#eef4f8;
  --status-mute:#a9c0d1;
  --status-ring:rgba(255,255,255,.09);
  --foot-bg:#061621;
  --foot-ink:#a9c0d1;
  --foot-line:rgba(255,255,255,.14);
  --on-navy:#08202f;
  --aksen-ink:#f0bc5c;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 30px -18px rgba(0,0,0,.8);
  --shadow-lift:0 2px 6px rgba(0,0,0,.5), 0 26px 50px -22px rgba(0,0,0,.9);
  --page:var(--ground);
  color-scheme:dark;
}

/* ============ BASE ============ */
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; background:var(--page); color:var(--ink);
  font-family:var(--f-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--f-display); font-weight:600; line-height:1.04; margin:0; text-wrap:balance; letter-spacing:.005em}
p{margin:0}
img{max-width:100%; display:block}
button{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--amber-bright); outline-offset:2px}
.mono{font-family:var(--f-mono); font-size:.92em}
.num{font-variant-numeric:tabular-nums}
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut)}
.rule{height:2px; width:112px; background:var(--amber); border:0; margin:0}
.eyebrow{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--aksen-ink)}

/* ============ BAR UTILITAS ============ */
.util{background:var(--bar-bg); color:var(--bar-ink); font-family:var(--f-mono); font-size:.72rem; letter-spacing:.04em}
.util .wrap{display:flex; flex-wrap:wrap; gap:.35rem 1.1rem; align-items:center; min-height:38px; padding-block:.35rem}
.util-lab{display:inline-flex; align-items:center; gap:.45rem; color:var(--aksen-ink); text-transform:uppercase; letter-spacing:.14em}
.util-lab::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--amber-bright)}
.util-alat{margin-left:auto; display:flex; align-items:center; gap:.8rem}
.tema{display:inline-flex; align-items:center; gap:2px; border:1px solid var(--bar-line); padding:2px; background:none}
.tema button{
  display:inline-flex; align-items:center; gap:.35rem; background:none; border:0; cursor:pointer;
  color:var(--bar-ink); font-family:var(--f-mono); font-size:.66rem; letter-spacing:.11em;
  text-transform:uppercase; padding:.25rem .5rem;
}
.tema button svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.7; flex:none}
.tema button:hover{color:var(--bar-ink-kuat)}
.tema button[aria-pressed="true"]{background:var(--amber-bright); color:#08202f}

/* ============ MASTHEAD ============ */
.mast{
  background:var(--hero-g4); color:var(--hero-ink); border-bottom:1px solid var(--hero-line);
  position:sticky; top:env(safe-area-inset-top,0px); z-index:30;
}
.mast .wrap{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:78px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:.85rem; text-decoration:none; color:var(--hero-ink)}
.brand svg{flex:none; display:block; width:auto; height:40px}
.brand svg path{fill:currentColor}
.brand-text{display:flex; flex-direction:column; line-height:1}
.brand-text b{font-family:var(--f-display); font-weight:600; font-size:1.5rem; letter-spacing:.02em; text-transform:uppercase}
.brand-text span{font-family:var(--f-mono); font-size:.6rem; letter-spacing:.17em; color:var(--hero-mute); text-transform:uppercase; margin-top:.35rem}
.nav-list{display:flex; align-items:center; gap:0; list-style:none; padding:0; margin:0; flex-wrap:wrap}
.nav-list li+li::before{content:"/"; color:var(--amber); opacity:.85; padding-inline:.6rem; font-family:var(--f-display)}
.nav-list li{display:flex; align-items:center}
.navbtn{
  font-family:var(--f-display); text-transform:uppercase; font-size:.95rem; letter-spacing:.045em;
  background:none; border:0; border-bottom:2px solid transparent; padding:.3rem 0 .25rem; cursor:pointer;
  color:var(--hero-ink); display:inline-flex; align-items:baseline; gap:.4rem;
}
.navbtn:hover{border-bottom-color:var(--amber-bright)}
.navbtn[aria-current="true"]{border-bottom-color:var(--amber); color:var(--aksen-ink)}
.navbtn .count{font-family:var(--f-mono); font-size:.62rem; letter-spacing:.06em; color:var(--hero-mute); font-variant-numeric:tabular-nums}

/* ============ STRIP KEADAAN ============ */
.status{background:var(--status-bg); color:var(--status-ink); border-bottom:2px solid var(--amber)}
.status .wrap{display:flex; flex-wrap:wrap; gap:.5rem 2rem; align-items:baseline; padding-block:.7rem}
.status-lab{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--status-mute)}
.status ul{display:flex; flex-wrap:wrap; gap:.45rem 1.6rem; list-style:none; padding:0; margin:0}
.status li{display:flex; align-items:baseline; gap:.5rem; font-size:.85rem; font-family:var(--f-mono)}
.dot{display:inline-block; width:9px; height:9px; border-radius:50%; flex:none; box-shadow:0 0 0 3px var(--status-ring); position:relative; top:-.05em}
.dot.ok{background:var(--st-ok)} .dot.warn{background:var(--st-warn)}
.dot.crit,.dot.down{background:var(--st-crit)} .dot.neu{background:var(--st-neu)}

/* ============ TOOLBAR ============ */
.toolbar{background:var(--surface); border-bottom:1px solid var(--line); position:relative; z-index:20}
.toolbar .wrap{display:flex; gap:.7rem; align-items:center; flex-wrap:wrap; padding-block:.75rem}
.search{position:relative; flex:1; min-width:190px; max-width:420px}
.search input{
  width:100%; padding:.5rem .7rem .5rem 2rem; border:1px solid var(--line); background:var(--ground);
  color:var(--ink); font:inherit; font-size:.9rem; border-radius:0;
}
.search svg{position:absolute; left:.55rem; top:50%; transform:translateY(-50%); width:14px; height:14px; stroke:var(--muted); fill:none; stroke-width:1.8}
.btn{
  display:inline-flex; align-items:center; gap:.45rem; font-family:var(--f-display); text-transform:uppercase;
  letter-spacing:.06em; font-size:.85rem; padding:.45rem .9rem; border:2px solid var(--line);
  background:transparent; color:var(--ink); cursor:pointer; border-radius:0; text-decoration:none;
}
.btn:hover{border-color:var(--amber); color:var(--aksen-ink)}
.btn-primary{background:var(--amber); border-color:var(--amber); color:#0b2233}
.btn-primary:hover{background:var(--hero-inv-bg); border-color:var(--hero-inv-bg); color:var(--hero-inv-ink)}
.btn .ic{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2}

/* ============ ISI ============ */
.content{padding-block:2rem 4rem}
.view[hidden]{display:none!important}
.page-head{margin-bottom:1.6rem; display:flex; flex-direction:column; gap:.55rem; max-width:62rem}
.page-head h1{font-size:clamp(1.6rem,3.6vw,2.35rem); text-transform:uppercase; font-weight:600}
.page-head p{color:var(--ink-soft); font-size:.98rem; max-width:64ch}

/* ============ KPI ============ */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; margin-bottom:1.75rem}
.kpi{background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); padding:1rem 1.1rem 1.15rem; border-top:3px solid var(--navy)}
.kpi .lab{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute)}
.kpi .val{font-family:var(--f-display); font-weight:600; font-size:2.1rem; line-height:1.05; margin-top:.5rem; font-variant-numeric:tabular-nums}
.kpi .sub{font-size:.85rem; color:var(--ink-soft); margin-top:.3rem}
.kpi.alert{border-top-color:var(--amber)}
.kpi.alert .val{color:var(--aksen-ink)}

/* ============ PANEL ============ */
.panel{background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); margin-bottom:1.6rem}
.panel-head{padding:1rem 1.15rem .9rem; border-bottom:1px solid var(--line-soft); display:flex; gap:.6rem 1rem; align-items:baseline; flex-wrap:wrap}
.panel-head h2{font-size:1.15rem; text-transform:uppercase; letter-spacing:.02em}
.panel-head::before{content:""; height:2px; width:52px; background:var(--amber); flex:none; align-self:center}
.panel-head .note{font-family:var(--f-mono); font-size:.72rem; letter-spacing:.06em; color:var(--ink-mute); margin-left:auto}
.panel-body{padding:1.15rem}

/* ============ TABEL ============ */
.tablewrap{overflow-x:auto}
table{border-collapse:collapse; width:100%; min-width:680px; font-size:.92rem}
th{
  text-align:left; background:var(--navy-deep); color:var(--on-dark); font-family:var(--f-mono);
  font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; font-weight:400;
  padding:.6rem .95rem; white-space:nowrap;
}
td{padding:.7rem .95rem; border-bottom:1px solid var(--line-soft); vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr.clickable{cursor:pointer}
tbody tr.clickable:hover{background:var(--ground-alt)}
td.r, th.r{text-align:right}
td.r{white-space:nowrap}
.appcell{display:flex; flex-direction:column; gap:1px}
.appcell b{font-weight:600}
.appcell span{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.06em; color:var(--ink-mute); text-transform:uppercase}

/* ============ PIL & METER ============ */
.pill{
  display:inline-flex; align-items:center; gap:.4rem; padding:.15rem .5rem; border:1px solid;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.06em; white-space:nowrap; text-transform:uppercase;
}
.pill .dot{width:7px; height:7px; box-shadow:none; top:0}
.pill.ok{color:var(--st-ok); border-color:color-mix(in srgb, var(--st-ok) 45%, transparent); background:color-mix(in srgb, var(--st-ok) 10%, var(--surface))}
.pill.ok .dot{background:var(--st-ok)}
.pill.warn{color:var(--aksen-ink); border-color:color-mix(in srgb, var(--st-warn) 55%, transparent); background:color-mix(in srgb, var(--st-warn) 12%, var(--surface))}
.pill.warn .dot{background:var(--st-warn)}
.pill.crit{color:var(--st-crit); border-color:color-mix(in srgb, var(--st-crit) 45%, transparent); background:color-mix(in srgb, var(--st-crit) 10%, var(--surface))}
.pill.crit .dot{background:var(--st-crit)}
.pill.neu{color:var(--ink-soft); border-color:var(--line); background:var(--ground-alt)}
.pill.neu .dot{background:var(--st-neu)}
.tag{display:inline-block; padding:.1rem .45rem; background:var(--ground-alt); border:1px solid var(--line-soft); font-family:var(--f-mono); font-size:.68rem; letter-spacing:.05em; color:var(--ink-soft)}

.meter{display:flex; align-items:center; gap:.55rem; min-width:136px}
.meter .track{flex:1; height:8px; background:var(--meter-track)}
.meter .fill{height:100%; background:var(--navy)}
.meter .fill.hot{background:var(--amber)}
.meter .txt{font-family:var(--f-mono); font-size:.72rem; color:var(--ink-soft); font-variant-numeric:tabular-nums; white-space:nowrap}

/* ============ FILTER ============ */
.filters{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-bottom:.9rem}
.filters select{
  padding:.4rem .5rem; border:1px solid var(--line); background:var(--surface); color:var(--ink);
  font-family:var(--f-body); font-size:.86rem; border-radius:0;
}
.filters .lab{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute)}
.chipbar{display:flex; gap:.35rem; flex-wrap:wrap}
.chip{
  padding:.32rem .7rem; border:1px solid var(--line); background:var(--surface); cursor:pointer;
  font-family:var(--f-display); text-transform:uppercase; letter-spacing:.05em; font-size:.78rem; border-radius:0;
}
.chip:hover{border-color:var(--amber)}
.chip[aria-pressed="true"]{background:var(--amber); border-color:var(--amber); color:#0b2233}

/* ============ LINIMASA ============ */
.tl{display:grid; grid-template-columns:minmax(160px,1.1fr) 3fr auto; gap:0 1rem; align-items:center; min-width:640px}
.tl-axis{position:relative; height:20px; border-bottom:1px solid var(--line); margin-bottom:.5rem}
.tl-axis span{position:absolute; top:2px; transform:translateX(-50%); font-family:var(--f-mono); font-size:.62rem; letter-spacing:.06em; color:var(--ink-mute); white-space:nowrap; text-transform:uppercase}
.tl-name{font-size:.86rem; padding:.3rem 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tl-lane{position:relative; height:26px}
.tl-lane::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(to right, var(--line-soft) 0, var(--line-soft) 1px, transparent 1px, transparent 8.333%)}
.tl-bar{position:absolute; top:9px; height:9px; z-index:1; box-shadow:0 0 0 2px var(--surface)}
.tl-bar.ok{background:var(--st-ok)} .tl-bar.warn{background:var(--st-warn)}
.tl-bar.crit{background:var(--st-crit)} .tl-bar.neu{background:var(--st-neu)}
.tl-now{position:absolute; top:0; bottom:0; width:0; border-left:2px solid var(--amber); z-index:2}
.tl-legend{display:flex; gap:.4rem 1.5rem; flex-wrap:wrap; margin-top:1rem; font-family:var(--f-mono); font-size:.72rem; color:var(--ink-mute)}
.tl-legend i{display:inline-block; width:10px; height:10px; margin-right:.45rem; vertical-align:-1px}
.tl-end{font-family:var(--f-mono); font-size:.72rem; color:var(--ink-soft); white-space:nowrap; font-variant-numeric:tabular-nums; text-align:right}
.tl-end.gone{color:var(--st-crit)}

/* ============ PANEL RINCIAN ============ */
.scrim{position:fixed; inset:0; background:rgba(8,32,47,.55); z-index:40; opacity:0; transition:opacity .18s}
.scrim.on{opacity:1}
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(580px,100%); background:var(--page); z-index:41;
  border-left:2px solid var(--amber); display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform .22s ease;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
.drawer.on{transform:none}
.drawer-head{padding:1rem 1.15rem; border-bottom:1px solid var(--line); background:var(--surface); display:flex; gap:.9rem; align-items:flex-start}
.drawer-head h2{font-size:1.3rem; text-transform:uppercase; margin-top:.35rem}
.drawer-body{overflow:auto; padding:1.15rem 1.15rem 3rem; display:flex; flex-direction:column; gap:1.1rem}
.iconbtn{margin-left:auto; border:1px solid var(--line); background:var(--surface); width:32px; height:32px; display:grid; place-items:center; cursor:pointer; border-radius:0; flex:none}
.iconbtn:hover{border-color:var(--amber); color:var(--aksen-ink)}
.iconbtn svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2}
.dl{display:grid; grid-template-columns:auto 1fr; gap:.4rem 1rem; font-size:.9rem}
.dl dt{color:var(--ink-mute); font-size:.82rem; white-space:nowrap}
.dl dd{margin:0; text-align:right; font-weight:600}
.sect{background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); padding:1rem 1.1rem}
.sect h3{display:flex; align-items:center; gap:.6rem; margin-bottom:.8rem; font-size:1rem}
.doclist{display:flex; flex-direction:column; gap:.4rem; margin-top:.7rem}
.docitem{display:flex; align-items:center; gap:.6rem; padding:.5rem .65rem; border:1px solid var(--line-soft); background:var(--ground-alt); font-size:.82rem}
.docitem svg{width:14px; height:16px; stroke:var(--amber); fill:none; stroke-width:1.6; flex:none}
.docitem .meta{margin-left:auto; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em; color:var(--ink-mute)}

/* ============ MODAL ============ */
.modal{
  position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:1rem;
  padding-top:calc(1rem + env(safe-area-inset-top,0px)); padding-bottom:calc(1rem + env(safe-area-inset-bottom,0px));
}
.modal-card{background:var(--page); border:1px solid var(--line); border-top:3px solid var(--amber); width:min(640px,100%); max-height:100%; overflow:auto; box-shadow:var(--shadow-lift)}
.modal-head{padding:.9rem 1.15rem; border-bottom:1px solid var(--line); background:var(--surface); display:flex; align-items:center; gap:.7rem; position:sticky; top:0; z-index:1}
.modal-head h2{font-size:1.15rem; text-transform:uppercase}
.form{padding:1.15rem; display:grid; grid-template-columns:1fr 1fr; gap:.9rem}
.form .full{grid-column:1/-1}
.field{display:flex; flex-direction:column; gap:.3rem}
.field label{font-family:var(--f-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute)}
.field input, .field select, .field textarea{
  padding:.5rem .6rem; border:1px solid var(--line); background:var(--surface); color:var(--ink);
  font-family:var(--f-body); font-size:.92rem; width:100%; border-radius:0;
}
.field .hint{font-size:.78rem; color:var(--ink-mute)}
.form-foot{grid-column:1/-1; display:flex; gap:.6rem; justify-content:flex-end; border-top:1px solid var(--line-soft); padding-top:.9rem; flex-wrap:wrap}
.notice{grid-column:1/-1; border-left:4px solid var(--amber); background:var(--ground-alt); padding:.7rem .9rem; color:var(--ink-soft); font-size:.85rem}

/* ============ TOAST ============ */
.toast{
  position:fixed; left:50%; transform:translateX(-50%) translateY(20px); z-index:60;
  bottom:calc(1.25rem + env(safe-area-inset-bottom,0px));
  background:var(--navy-deep); color:#fff; padding:.6rem 1.1rem; font-family:var(--f-mono); font-size:.78rem;
  letter-spacing:.04em; opacity:0; transition:opacity .2s, transform .2s; pointer-events:none;
  box-shadow:var(--shadow-lift); max-width:calc(100% - 2rem); border-left:3px solid var(--amber);
}
.toast.on{opacity:1; transform:translateX(-50%) translateY(0)}

/* ============ SKEMA ============ */
.ent-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1rem}
.ent{background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow)}
.ent h4{padding:.55rem .85rem; background:var(--navy-deep); color:var(--on-dark); font-family:var(--f-mono); font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; font-weight:400}
.ent ul{list-style:none; margin:0; padding:.6rem .85rem .8rem; display:flex; flex-direction:column; gap:.2rem}
.ent li{font-family:var(--f-mono); font-size:.76rem; display:flex; gap:.6rem}
.ent li span{margin-left:auto; font-family:var(--f-body); font-size:.74rem; color:var(--ink-mute)}
.ent li b{font-weight:400}
.key{color:var(--aksen-ink); font-weight:600}
.rel{display:flex; flex-direction:column; gap:.5rem}
.rel div{display:flex; gap:.7rem; align-items:baseline; font-size:.88rem; padding:.55rem .75rem; background:var(--ground-alt); border-left:3px solid var(--amber)}
.rel code{font-family:var(--f-mono); font-size:.76rem; color:var(--cyan); white-space:nowrap}
pre.code{
  margin:0; background:var(--ground-sunk); border-left:3px solid var(--navy); padding:.85rem 1rem;
  overflow-x:auto; font-family:var(--f-mono); font-size:.76rem; line-height:1.65; color:var(--ink-soft);
}
.rolegrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1rem}
.role{border:1px solid var(--line); border-top:3px solid var(--navy); background:var(--surface); padding:.9rem 1rem; box-shadow:var(--shadow)}
.role h4{font-size:1rem; text-transform:uppercase; margin-bottom:.35rem}
.role p{font-size:.85rem; color:var(--ink-soft)}
.role ul{margin:.55rem 0 0; padding-left:1.1rem; font-size:.85rem; color:var(--ink-soft)}
.steps{counter-reset:s; display:flex; flex-direction:column; gap:.7rem; margin:0; padding:0; list-style:none}
.steps li{counter-increment:s; display:flex; gap:.8rem; font-size:.92rem; color:var(--ink-soft); border-top:3px solid var(--amber); padding-top:.65rem}
.steps li::before{
  content:counter(s,decimal-leading-zero); flex:none; font-family:var(--f-mono); font-size:.72rem;
  letter-spacing:.1em; color:var(--aksen-ink); padding-top:.15rem;
}
.steps li b{color:var(--ink); font-weight:600}

/* ============ FOOTER ============ */
.foot{background:var(--foot-bg); color:var(--foot-ink); border-top:1px solid var(--foot-line); font-family:var(--f-mono); font-size:.72rem; letter-spacing:.05em}
.foot .wrap{display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between; padding-block:1.1rem}

/* ============ RESPONSIF ============ */
@media (max-width: 900px){
  .mast .wrap{min-height:0; padding-block:.8rem; gap:.7rem}
  .brand svg{height:34px}
  .brand-text b{font-size:1.25rem}
  .navbtn{font-size:.85rem}
  .navbtn .count{display:none}
  .nav-list li+li::before{padding-inline:.45rem}
  .form{grid-template-columns:1fr}
  .dl dd{text-align:left}
  .tl{grid-template-columns:minmax(120px,1fr) 2.2fr auto; min-width:560px}
}
@media (prefers-reduced-motion: reduce){*{transition:none!important; animation:none!important}}