/* ==== MarselNET Ops — huruf lokal (offline, OFL di vendor/fonts) ==== */
@font-face { font-family: "Inter"; src: url(/vendor/fonts/inter-latin-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/vendor/fonts/inter-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/vendor/fonts/inter-latin-600-normal.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url(/vendor/fonts/inter-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url(/vendor/fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2"); font-weight: 500; font-display: swap; }

/* ---- tema Terang (bawaan; kunci "serat" dipertahankan agar pilihan lama tetap jalan) ---- */
:root {
  --bg: #f4f6f8; --card: #ffffff; --ink: #17212b; --muted: #5f6b77; --line: #dde3e8; --line-2: #c5ced6;
  --head: #0f3d5e; --head-2: #164a6f; --head-ink: #ffffff; --head-muted: #b9cddc; --head-line: #2a5677;
  --brand: #1b6fa8; --brand-ink: #ffffff; --brand-2: #1b6fa8; --brand-soft: #e8f1fb; --accent: #f0a030;
  --ok: #1d7a46; --warn: #a86400; --bad: #b3261e; --info: #1b6fa8;
  --r: 12px; --r-sm: 9px; --tap: 44px; --bw: 1px; --base: 15px; --side: 248px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --c12: #1e5fd0 0.000% 8.333%, #f08a24 8.333% 16.667%, #1e9e50 16.667% 25.000%, #8a5a2b 25.000% 33.333%, #7a8794 33.333% 41.667%, #f4f4f4 41.667% 50.000%, #d93a3a 50.000% 58.333%, #1a1a1a 58.333% 66.667%, #f2c618 66.667% 75.000%, #7e4cc9 75.000% 83.333%, #ee7fb0 83.333% 91.667%, #2cc4d4 91.667% 100.000%;
  --cores: #1e5fd0, #f08a24, #1e9e50, #8a5a2b, #7a8794, #f4f4f4, #d93a3a, #1a1a1a, #f2c618, #7e4cc9, #ee7fb0, #2cc4d4;
  color-scheme: light;
}
/* ---- tema Malam (NOC) ---- */
:root[data-theme="malam"] {
  --bg: #111a22; --card: #19242f; --ink: #e6ebf2; --muted: #93a3b4; --line: #2a3846; --line-2: #3a4a5a;
  --head: #0a1620; --head-2: #12273a; --head-ink: #e6ebf2; --head-muted: #8fa9bf; --head-line: #1f3a52;
  --brand: #4c9fd8; --brand-ink: #071825; --brand-2: #6fb4e4; --brand-soft: #16324a; --accent: #f0a030;
  --ok: #53c983; --warn: #f0a640; --bad: #f27a7a; --info: #7fb2f5;
  color-scheme: dark;
}
/* ---- tema Terik (kontras maksimum, lapangan siang hari) ---- */
:root[data-theme="terik"] {
  --bg: #ffffff; --card: #ffffff; --ink: #000000; --muted: #2f3a48; --line: #6b7686; --line-2: #3d4652;
  --head: #000000; --head-2: #1a1a1a; --head-ink: #ffffff; --head-muted: #d0d0d0; --head-line: #444;
  --brand: #0040c0; --brand-ink: #ffffff; --brand-2: #0040c0; --brand-soft: #e3ebff; --accent: #ffc400;
  --ok: #006b2b; --warn: #8a4b00; --bad: #b00000; --info: #0040c0;
  --bw: 2px; --base: 16.5px; --tap: 48px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: var(--base)/1.45 var(--font); background: var(--bg); color: var(--ink); padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
a { color: var(--brand-2); text-decoration: none; }
h1 { font: 700 1.5rem/1.2 var(--display); margin: 0; letter-spacing: -.01em; }
h2 { font: 700 1.3rem/1.2 var(--display); margin: 0; letter-spacing: -.005em; }
h3 { font: 600 1.05rem/1.25 var(--display); margin: 0 0 .6rem; }
h4 { font: 600 .92rem/1.25 var(--display); margin: .5rem 0 0; color: var(--muted); }
p { margin: 0; }
code { font-family: var(--mono); font-size: .9em; }
.boot { padding: 40vh 0; text-align: center; color: var(--muted); }

/* ---- logo ---- */
.brand { display: flex; align-items: center; gap: 10px; color: var(--head-ink); flex: 1; min-width: 0; }
.brand .logo { width: 32px; height: 32px; border-radius: 9px; background: var(--brand); color: #fff; display: grid; place-items: center; font: 700 16px var(--font); flex: none; }
.brand .bt { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand .bt b { font-weight: 700; font-size: 1rem; white-space: nowrap; }
.brand .bt small { font-size: .74rem; color: var(--head-muted); white-space: nowrap; }
.brand.big { color: var(--ink); margin-bottom: 6px; }
.brand.big .bt b { font-size: 1.35rem; } .brand.big .bt small { color: var(--muted); font-size: .82rem; }
.brand.big .logo { width: 42px; height: 42px; font-size: 20px; border-radius: 11px; }

/* ---- header HP ---- */
header.top { position: sticky; top: 0; z-index: 1000; display: flex; align-items: center; gap: 8px; padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top)); background: var(--head); color: var(--head-ink); }
.pill { font-size: .75rem; padding: 4px 10px; border-radius: 99px; background: rgba(255,255,255,.14); color: #fff; white-space: nowrap; }
.pill.ok::before, .pill.off::before, .pill.bad::before { content: "●"; margin-right: 5px; }
.pill.ok::before { color: #6ee7a0; } .pill.off::before { color: #f2b75a; } .pill.bad { background: #c23030; } .pill.bad::before { color: #fff; }
.iconbtn { background: none; border: 0; color: inherit; font-size: 20px; width: var(--tap); height: 36px; border-radius: 8px; cursor: pointer; }
.iconbtn:active { background: rgba(255,255,255,.15); }

/* ---- navigasi bawah HP ---- */
nav.tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--card); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
nav.tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 0 7px; color: var(--muted); font-size: .7rem; font-weight: 500; }
nav.tabbar a svg { width: 22px; height: 22px; }
nav.tabbar a.on { color: var(--brand-2); font-weight: 700; }
nav.tabbar a.on::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--brand-2); }
.badge { position: absolute; top: 4px; right: calc(50% - 22px); min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: #17212b; font-size: .68rem; font-weight: 700; line-height: 18px; text-align: center; }

/* ---- sidebar desktop ---- */
aside.side { display: none; }
.topbar { display: none; }
@media (min-width: 1024px) {
  body { padding-bottom: 0; }
  header.top, nav.tabbar { display: none; }
  aside.side { display: flex; flex-direction: column; gap: 2px; position: fixed; top: 0; bottom: 0; left: 0; width: var(--side); z-index: 1000; overflow-y: auto; background: var(--head); color: var(--head-ink); padding: 18px 14px; }
  aside.side .brand { flex: none; padding: 2px 8px 16px; }
  aside.side a.nav { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: #dfe9f1; font-size: .93rem; }
  aside.side a.nav svg { width: 18px; height: 18px; flex: none; opacity: .85; }
  aside.side a.nav span { flex: 1; }
  aside.side a.nav:hover { background: var(--head-2); }
  aside.side a.nav.on { background: var(--brand); color: #fff; font-weight: 600; }
  aside.side a.nav.on svg { opacity: 1; }
  aside.side a.nav b { background: var(--accent); color: #17212b; font-size: .72rem; font-weight: 700; padding: 1px 8px; border-radius: 10px; }
  aside.side .sep { height: 1px; background: var(--head-line); margin: 10px 4px; }
  aside.side .grp { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--head-muted); padding: 8px 12px 4px; }
  aside.side .who { margin-top: auto; padding: 12px; border-radius: 10px; background: var(--head-2); font-size: .85rem; display: flex; flex-direction: column; gap: 2px; }
  aside.side .who .r { color: var(--head-muted); font-size: .8rem; }
  aside.side .who .row { margin-top: 6px; }
  aside.side .who a { color: #dfe9f1; font-size: .8rem; }
  .topbar { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 900; margin-left: var(--side); padding: 10px 28px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
  .topbar .crumb { flex: 1; color: var(--muted); font-size: .88rem; }
  .topbar .crumb b { color: var(--ink); font-weight: 600; }
  .topbar .pill { background: var(--card); color: var(--ink); border: 1px solid var(--line); }
  .topbar .pill.bad { background: #c23030; color: #fff; }
  .topbar .iconbtn { color: var(--muted); }
  main#view { margin-left: var(--side); }
}

/* ---- sub-menu modul (Aset) ---- */
nav.subnav { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: -2px 0 2px; padding-bottom: 2px; }
nav.subnav::-webkit-scrollbar { display: none; }
nav.subnav a { flex: none; padding: 7px 13px; border-radius: 9px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font-size: .86rem; font-weight: 600; white-space: nowrap; }
nav.subnav a.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
nav.subnav a.add { border-style: dashed; color: var(--brand-2); }
.pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; }
.pagehead .sub { color: var(--muted); font-size: .9rem; margin-top: 2px; }

main#view { max-width: 980px; margin: 0 auto; padding: 14px; }
main#view.wide { max-width: 1400px; }
@media (min-width: 1024px) { main#view { max-width: none; margin: 0 0 0 var(--side); padding: 22px 28px 40px; } main#view.wide { max-width: none; } main#view:not(.wide) > * { max-width: 980px; } }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.grow { flex: 1; min-width: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.muted { color: var(--muted); } .small { font-size: .82rem; } .center { text-align: center; } .mono { font-family: var(--mono); font-size: .85em; }
.err { color: var(--bad); font-size: .85rem; }

.card { background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r); padding: 14px; }
.card.inner { background: var(--bg); padding: 10px; }
.card.head h2 a { color: inherit; }
.back { color: var(--muted); font-size: .9rem; align-self: flex-start; padding: 4px 0; }
.empty { padding: 32px 12px; text-align: center; color: var(--muted); }

/* ---- buttons & forms ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tap); padding: 0 16px; border-radius: var(--r-sm); border: var(--bw) solid var(--line); background: var(--card); color: var(--ink); font: 600 .92rem var(--font); cursor: pointer; white-space: nowrap; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; }
.btn.sm { min-height: 36px; padding: 0 12px; font-size: .85rem; }
.btn.block { width: 100%; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn.ghost { background: transparent; }
.btn.ok { border-color: var(--ok); color: var(--ok); }
.btn.warn { border-color: var(--warn); color: var(--warn); }
.btn.danger { border-color: var(--bad); color: var(--bad); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

input, select, textarea { width: 100%; min-height: var(--tap); padding: 8px 10px; border: var(--bw) solid var(--line); border-radius: var(--r-sm); background: var(--card); color: var(--ink); font: 16px var(--font); }
textarea { min-height: 70px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand-2); outline-offset: 1px; }
input[type=checkbox] { width: 20px; min-height: 20px; height: 20px; accent-color: var(--brand-2); }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lbl { font-size: .8rem; font-weight: 600; color: var(--muted); }
.hint { color: var(--muted); font-size: .75rem; }
.field .row input { flex: 1; }
.check { display: inline-flex; align-items: center; gap: 6px; margin-right: 12px; min-height: 32px; }
.checks { display: flex; flex-wrap: wrap; }
.filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.filters .search { grid-column: 1 / -1; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--line); border-radius: 10px; padding: 3px; gap: 3px; }
.seg button { border: 0; background: transparent; min-height: 38px; border-radius: 8px; font: 600 .9rem var(--font); color: var(--muted); cursor: pointer; }
.seg button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* ---- list ---- */
.list { display: flex; flex-direction: column; }
.list.card { padding: 0 14px; }
.row-item { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); color: inherit; min-height: 56px; }
.list > .row-item:last-child { border-bottom: 0; }
.row-item .title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.row-item .sub { color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-item .note { font-size: .85rem; margin-top: 4px; white-space: pre-wrap; }
.row-item.static { align-items: flex-start; }
.chev { color: var(--muted); font-size: 1.4rem; }
.type { flex: none; display: inline-grid; place-items: center; min-width: 46px; height: 26px; padding: 0 7px; border-radius: 6px; color: #fff; font: 700 .85rem var(--display); letter-spacing: .04em; }
.type.cable { background: #475569; } .type.pon { background: var(--brand-2); min-width: 34px; }
.dot-pending { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }

.chip { flex: none; font-size: .74rem; font-weight: 700; padding: 3px 9px; border-radius: 99px; white-space: nowrap; border: 1px solid currentColor; }
.st-rencana { color: var(--muted); } .st-usulan { color: #8b3fd9; } :root[data-theme="malam"] .st-usulan { color: #c39bf5; } .st-menunggu { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.st-revisi { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); } .st-terpasang { color: var(--info); } .st-verif { color: var(--ok); }

.callout { display: block; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--info) 10%, var(--card)); border-left: 4px solid var(--info); color: var(--ink); font-size: .9rem; }
.callout.warn { background: color-mix(in srgb, var(--warn) 12%, var(--card)); border-color: var(--warn); }
.callout.bad { background: color-mix(in srgb, var(--bad) 10%, var(--card)); border-color: var(--bad); }

.hello h2 { font-size: 1.45rem; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; color: inherit; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat b { font-size: 1.6rem; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat b.mono { font: 600 1.05rem/1.9 var(--mono); }
.stat span { font-size: .8rem; color: var(--muted); }
.stat.warn { background: color-mix(in srgb, var(--accent) 14%, var(--card)); border-color: color-mix(in srgb, var(--accent) 55%, var(--card)); }
.stat.warn b { color: var(--warn); }
a.stat:hover { border-color: var(--brand-2); }
@media (min-width: 1024px) { .stats.six { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: .92rem; }
dl.kv dt { color: var(--muted); } dl.kv dd { margin: 0; overflow-wrap: anywhere; }

.tbl { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tbl th, .tbl td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { color: var(--muted); font-weight: 600; font-size: .78rem; }
.tbl tr.click { cursor: pointer; } .tbl tr.click:active { background: var(--bg); }
.opm { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ok); }
.opm.warn { color: var(--warn); } .opm.bad { color: var(--bad); }

/* ---- foto ---- */
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.thumbs.sm { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); margin-top: 6px; }
.thumbs img, .gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; background: var(--line); display: block; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 10px; }
.gallery figure { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.shot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.shot .thumbs { width: 100%; }

/* ---- core ---- */
.sw { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0,0,0,.35); flex: none; vertical-align: -3px; }
.sw-mark { box-shadow: inset 0 0 0 3px rgba(0,0,0,.45); }
.tube h4 { margin: 12px 0 6px; display: flex; align-items: center; gap: 6px; text-transform: none; }
.cores { display: flex; flex-direction: column; gap: 4px; }
.core { display: grid; grid-template-columns: 28px 18px 64px 1fr 70px 1fr 12px; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 8px; border-left: 4px solid transparent; }
.core .no { font: 700 .85rem var(--mono); text-align: right; }
.core .cname { font-size: .82rem; color: var(--muted); }
.core select, .core input { min-height: 36px; padding: 4px 6px; font-size: .88rem; }
.core.st-aktif { border-left-color: var(--ok); background: color-mix(in srgb, var(--ok) 7%, transparent); }
.core.st-rusak { border-left-color: var(--bad); background: color-mix(in srgb, var(--bad) 7%, transparent); }
.core.st-cadangan { border-left-color: var(--info); }
.flag { color: var(--warn); font-size: .8rem; } .flag.bad { color: var(--bad); }
.legend { font-size: .72rem; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--line); }
.legend.st-aktif { color: var(--ok); } .legend.st-rusak { color: var(--bad); } .legend.st-cadangan { color: var(--info); }
@media (max-width: 560px) {
  .core { position: relative; grid-template-columns: 26px 18px 1fr 1fr; row-gap: 4px; padding-right: 14px; }
  .core .cname { display: none; }
  .core select, .core .state { grid-column: 3 / span 2; }
  .core .pon { grid-column: 3; } .core .cnote { grid-column: 4; }
  .core .flag { position: absolute; right: 2px; top: 6px; }
}
.savebar { position: sticky; bottom: calc(64px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--card); border: 2px solid var(--accent); border-radius: var(--r); box-shadow: 0 6px 18px rgba(0,0,0,.15); z-index: 900; }
.savebar[hidden] { display: none; }

/* ---- PON progress ---- */
.prog { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; margin-top: 6px; }
.prog i { display: block; height: 100%; background: var(--ok); }

/* ---- log / diff ---- */
.log { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.log.reverted { opacity: .55; }
.diff { font-size: .82rem; border-collapse: collapse; }
.diff th { text-align: left; color: var(--muted); font-weight: 500; padding: 2px 8px 2px 0; white-space: nowrap; }
.diff td { padding: 2px 4px; overflow-wrap: anywhere; }
.diff .old { color: var(--bad); text-decoration: line-through; } .diff .new { color: var(--ok); }
.vitem { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.vitem:last-child { border-bottom: 0; }
.vitem .row-item { border: 0; padding: 0; min-height: 0; }

/* ---- peta ---- */
.mapwrap { position: fixed; top: calc(56px + env(safe-area-inset-top)); bottom: calc(58px + env(safe-area-inset-bottom)); left: 0; right: 0; display: flex; flex-direction: column; }
@media (min-width: 1024px) { .mapwrap { top: 57px; bottom: 0; left: var(--side); } }
.mapbar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 6px; background: var(--card); border-bottom: 1px solid var(--line); }
.mapbar select { min-height: 38px; font-size: .9rem; padding: 4px 6px; }
#map { flex: 1; }
.maplegend { display: flex; align-items: center; gap: 10px; padding: 6px 10px; font-size: .75rem; background: var(--card); border-top: 1px solid var(--line); flex-wrap: wrap; }
.lg { display: inline-flex; align-items: center; gap: 4px; } .lg i { width: 12px; height: 12px; border-radius: 50%; border: 3px solid; background: #555; }
.mapbtn { width: 34px; height: 34px; background: #fff; border: 0; font-size: 18px; cursor: pointer; color: #0e1a2b; }
.leaflet-popup-content { font: 13px/1.5 var(--font); }

/* ---- modal & toast ---- */
.modal { position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,.45); display: grid; place-items: center; padding: 16px; }
.modal-box { background: var(--card); border-radius: 14px; padding: 18px; width: min(460px, 100%); max-height: 90vh; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.toast { position: fixed; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; z-index: 4000; background: var(--ink); color: var(--card); padding: 10px 16px; border-radius: 10px; font-size: .9rem; transition: .25s; max-width: 90vw; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { background: #c23030; }

/* ---- login ---- */
body.is-login { padding: 0; }
.login { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 40%), var(--bg); }
.login form { width: min(360px, 100%); display: flex; flex-direction: column; gap: 10px; padding: 24px; }

/* ---- label QR ---- */
.lprev { display: flex; flex-wrap: wrap; gap: 12px; }
.lprev figure { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.lprev img { border: 1px solid var(--line); border-radius: 4px; background: #fff; image-rendering: pixelated; height: auto; }
.lprint { display: none; }
@media print {
  .lprint { display: block; }
  .lprint img { display: block; page-break-after: always; break-after: page; }
  body { background: #fff; padding: 0; }
  header.top, nav.tabbar, aside.side, .topbar, .noprint, .toast { display: none !important; }
  main#view { max-width: none; padding: 0; margin: 0; }
}

form.inline-add { display: grid; grid-template-columns: 90px 1fr auto; gap: 6px; margin-top: 8px; }
.stack.tight { gap: 6px; }

/* ---- v1.2: splitter, output, pohon PON, kelompok ---- */
.type.sp { background: #0f766e; min-width: 40px; } .type.pon { color: var(--brand-ink); }
.spcard { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 10px 0; display: flex; flex-direction: column; gap: 6px; }
.spcard .title { font-weight: 700; }
.spcard .sub { color: var(--muted); font-size: .8rem; }
.spcard .actions { display: flex; gap: 8px; }
table.outs td { padding: 7px 6px; vertical-align: top; }
table.outs td:first-child { width: 44px; color: var(--muted); }
table.outs tr.click { cursor: pointer; }
.linkbtn { border: 0; background: none; color: var(--brand-2); font: 600 .82rem var(--font); cursor: pointer; padding: 0 4px; text-decoration: underline; }
ol.trace { margin: 4px 0; padding-left: 20px; font-size: .85rem; }
ol.trace li { margin: 2px 0; }
ol.trace li.pon { font-weight: 700; color: var(--brand-2); }
.tree { display: flex; flex-direction: column; }
.tnode { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); color: inherit; }
.tnode .title { font-weight: 600; } .tnode .sub { color: var(--muted); font-size: .78rem; }
details.group { border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; background: var(--card); }
details.group + details.group { margin-top: 8px; }
details.group > summary { padding: 11px 0; cursor: pointer; }
.grid2 > * { min-width: 0; }
.warnmark { color: var(--bad); font-weight: 700; cursor: help; }
textarea.paste { white-space: pre; overflow: auto; font: .78rem/1.4 var(--mono); }
.row-item .sub b.bad { color: var(--bad); } .row-item .sub b.warn { color: var(--warn); } .row-item .sub b { font-weight: 600; }
.list.pick { max-height: 46vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; }
button.pickrow { width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); color: inherit; font: inherit; cursor: pointer; }
button.pickrow.on { background: color-mix(in srgb, var(--brand-2) 14%, transparent); }
.row-item.click { cursor: pointer; }

/* ---- pilihan tema (Akun) ---- */
.themes { display: flex; flex-direction: column; gap: 8px; }
.theme-opt { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: var(--bw) solid var(--line); border-radius: var(--r-sm); cursor: pointer; }
.theme-opt:has(input:checked) { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.theme-opt .grow { display: flex; flex-direction: column; }
.theme-opt input { width: 18px; min-height: 18px; height: 18px; accent-color: var(--brand); flex: none; }
.swatch-t { width: 44px; height: 30px; border-radius: 6px; flex: none; border: 1px solid #0003; position: relative; overflow: hidden; }

.swatch-t[data-t="serat"] { background: linear-gradient(#0f3d5e 0 9px, #f4f6f8 9px); }
.swatch-t[data-t="malam"] { background: linear-gradient(#0a1620 0 9px, #19242f 9px); }
.swatch-t[data-t="terik"] { background: linear-gradient(#000 0 9px, #fff 9px); border: 2px solid #000; }
.swatch-t[data-t="auto"] { background: linear-gradient(#0f3d5e 0 9px, #f4f6f8 9px 50%, #19242f 50%); }

/* ---- beranda: meter status box ---- */
.meter { display: flex; flex-direction: column; gap: 12px; }
.meter-head { display: flex; align-items: baseline; gap: 4px; }
.meter-head .big { font: 700 2.4rem/1 var(--display); font-variant-numeric: tabular-nums; }
.meter-head span { color: var(--muted); }
.bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--line); }
.bar i { display: block; min-width: 4px; }
.mlegend { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; }
.lrow { display: flex; align-items: center; gap: 8px; padding: 6px 0; color: var(--ink); border-bottom: 1px solid var(--line); }
.lrow i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.lrow b { font: 700 1.1rem var(--display); font-variant-numeric: tabular-nums; }
.lrow.zero { color: var(--muted); } .lrow.zero b { font-weight: 500; }
.counts { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.counts a { color: var(--muted); } .counts b { color: var(--ink); font: 700 1.1rem var(--display); }
.counts .bad { color: var(--bad); }
.sb-terverifikasi { background: var(--ok); } .sb-terpasang { background: var(--info); } .sb-menunggu_verifikasi { background: var(--warn); }
.sb-usulan { background: #8b3fd9; } .sb-perlu_revisi { background: var(--bad); } .sb-rencana { background: var(--muted); }
@media (max-width: 380px) { .mlegend { grid-template-columns: 1fr; } }
form.inline-add.m4 { grid-template-columns: 1fr 1fr 80px auto; }
@media (max-width: 480px) { form.inline-add.m4 { grid-template-columns: 1fr 1fr; } }

/* ---- impor data pelanggan ---- */
.tblwrap { overflow-x: auto; padding: 4px 10px; }
table.bill td { vertical-align: top; } table.bill select { min-height: 36px; font-size: .9rem; }
table.bill tr.lv-saran { background: color-mix(in srgb, var(--warn) 12%, transparent); }
table.bill tr.lv-none td:first-child b { color: var(--muted); }
b.warn { color: var(--warn); } .small.bad { color: var(--bad); }

/* ---- analisis PON ---- */
#pamap { height: 58vh; min-height: 320px; border-radius: var(--r-sm); margin-top: 10px; }
.mapcard { padding: 10px; }
.pdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; border: 1px solid #fff8; }
table.pa td.bad { color: var(--bad); font-weight: 700; } table.pa td.warn { color: var(--warn); font-weight: 700; }
table.pa tr.on td { background: color-mix(in srgb, var(--brand) 12%, transparent); }
table.pa.cust tr.mv td { background: color-mix(in srgb, var(--warn) 9%, transparent); }
table.pa.cust td { white-space: nowrap; } table.pa.cust td:nth-child(2) { white-space: normal; min-width: 140px; }
.seg.sm button { min-height: 32px; font-size: .82rem; padding: 0 10px; }
.ponlbl span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; font: 700 13px var(--display); border: 2px solid #fff; box-shadow: 0 1px 3px #0006; }
.ponlbl span.olt { width: 36px; height: 22px; border-radius: 6px; background: #000; font-size: 11px; }

/* ---- isian koordinat ---- */
.coordpick { display: flex; flex-direction: column; gap: 6px; }
.coordpick .hint.bad { color: var(--bad); }
.coordmap { height: 260px; border-radius: var(--r-sm); border: var(--bw) solid var(--line); }

/* ---- kerja lapangan ---- */
#tmap { height: 55vh; min-height: 300px; border-radius: var(--r-sm); }
.stack.tight { gap: 6px; flex: none; }
.muted-card { opacity: .92; } p.warn, .small.warn { color: var(--warn); }
.row-item .sub.bad { color: var(--bad); }

.cand { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.cand-head { display: flex; align-items: flex-start; gap: 10px; }
.cand-head .title { font-weight: 700; } .cand-head .sub { color: var(--muted); font-size: .82rem; }
.cand-act { display: grid; grid-template-columns: 1fr auto; gap: 8px; }

.mod-psb a{color:var(--brand2)}
.mod-psb .pad{padding:var(--pad)}
.mod-psb .muted{color:var(--muted)}
.mod-psb .small{font-size:12.5px}
.mod-psb h1{font-size:20px;margin:4px 0 12px}
.mod-psb h2{font-size:16px;margin:0 0 10px}
.mod-psb .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:var(--pad);margin-bottom:12px}
.mod-psb label{display:block;font-size:13px;font-weight:600;margin:10px 0 4px}
.mod-psb label .req{color:var(--bad)}
.mod-psb input,.mod-psb select,.mod-psb textarea{width:100%;font:inherit;padding:10px 11px;border:1px solid var(--line-2);border-radius:9px;background:var(--card);color:var(--ink)}
.mod-psb input:focus,.mod-psb select:focus,.mod-psb textarea:focus{outline:2px solid var(--brand2);outline-offset:0;border-color:var(--brand2)}
.mod-psb input[readonly],.mod-psb input:disabled,.mod-psb select:disabled,.mod-psb textarea:disabled{background:var(--bg);color:var(--muted)}
.mod-psb textarea{min-height:70px;resize:vertical}
.mod-psb .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mod-psb .row3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mod-psb .row5{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.mod-psb .row5 label{font-weight:500;font-size:11.5px}
@media (max-width:420px){
.mod-psb .row{grid-template-columns:1fr}
.mod-psb .row5{grid-template-columns:repeat(3,1fr)}
}
.mod-psb button,.mod-psb .btn{appearance:none;border:1px solid var(--brand2);background:var(--card);color:var(--brand2);font:inherit;font-weight:600;
  padding:10px 14px;border-radius:9px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;justify-content:center}
.mod-psb button.primary,.mod-psb .btn.primary{background:var(--brand2);color:#fff}
.mod-psb button.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.mod-psb button.danger{border-color:var(--bad);color:var(--bad)}
.mod-psb button.ghost{border-color:transparent;background:transparent}
.mod-psb button.sm{padding:6px 10px;font-size:13px}
.mod-psb button:disabled{opacity:.5;cursor:not-allowed}
.mod-psb .actions{position:fixed;left:0;right:0;bottom:0;z-index:900;background:color-mix(in srgb, var(--card) 96%, transparent);border-top:1px solid var(--line);
  padding:10px var(--pad) calc(10px + env(safe-area-inset-bottom));display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.mod-psb .actions button,.mod-psb .actions .btn{flex:1 1 140px;max-width:260px}
.mod-psb .tabs{display:flex;gap:6px;overflow-x:auto;margin-bottom:10px}
.mod-psb .tabs button{flex:0 0 auto;padding:7px 12px;font-size:13px;border-radius:20px}
.mod-psb .tabs button.on{background:var(--brand2);color:#fff}
.mod-psb .list .item{display:block;text-decoration:none;color:inherit}
.mod-psb .item .t{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.mod-psb .item .n{font-weight:650}
.mod-psb .badge{display:inline-block;font-size:11.5px;font-weight:650;padding:2px 8px;border-radius:20px;background:#e8edf2;color:#33414e;white-space:nowrap}
.mod-psb .b-survey{background:#eef1f4}
.mod-psb .b-instalasi{background:#e3efff;color:#174a8b}
.mod-psb .b-verifikasi{background:#fff1d6;color:#7a4b00}
.mod-psb .b-setoran{background:#ffe3d6;color:#8a3200}
.mod-psb .b-aktivasi{background:#ece3ff;color:#4b2a8a}
.mod-psb .b-menunggu_online{background:#e0f4f7;color:#0d5f6b}
.mod-psb .b-aktif{background:#ddf3e4;color:#145c34}
.mod-psb .b-batal{background:#f3e0e0;color:#7d1f1a}
.mod-psb #map{height:300px;border-radius:10px;border:1px solid var(--line);margin:8px 0}
.mod-psb .gpsbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mod-psb .coord{font-family:ui-monospace,Menlo,monospace;font-size:13px}
.mod-psb .acc-ok{color:var(--ok)}
.mod-psb .acc-bad{color:var(--bad)}
.mod-psb .odps{display:grid;gap:6px;margin-top:6px}
.mod-psb .odp{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:9px;padding:8px 10px;cursor:pointer}
.mod-psb .odp input{width:auto}
.mod-psb .odp.on{border-color:var(--brand2);background:#f0f7fd}
.mod-psb .photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.mod-psb .ph{border:1px dashed #b9c3cc;border-radius:10px;padding:6px;text-align:center;background:#fafbfc;position:relative}
.mod-psb .ph.done{border-style:solid;border-color:#9fd2b2;background:#f3fbf6}
.mod-psb .ph img{width:100%;height:110px;object-fit:cover;border-radius:7px;display:block;margin-bottom:4px;background:#ddd}
.mod-psb .ph .k{font-size:12.5px;font-weight:600;margin:4px 0}
.mod-psb .ph .req{color:var(--bad)}
.mod-psb .sig{border:1px solid var(--line-2);border-radius:9px;background:var(--card);touch-action:none;width:100%;height:150px;display:block}
.mod-psb .sigimg{max-width:100%;height:110px;border:1px solid var(--line);border-radius:9px;background:var(--card)}
.mod-psb .msg{border-radius:10px;padding:10px 12px;margin:8px 0;font-size:13.5px}
.mod-psb .msg.bad{background:#fdecea;color:#7d1f1a}
.mod-psb .msg.warn{background:#fff4e0;color:#6b4200}
.mod-psb .msg.ok{background:#e6f5ec;color:#145c34}
.mod-psb .msg.info{background:#e8f1fb;color:#174a8b}
.mod-psb .msg ul{margin:4px 0 0 18px;padding:0}
.mod-psb .fr-step{border:1px solid var(--line);border-radius:10px;margin-bottom:10px;overflow:hidden}
.mod-psb .fr-step h3{margin:0;padding:9px 12px;font-size:14px;background:var(--bg)}
.mod-psb .fr-f{display:grid;grid-template-columns:42% 1fr auto;gap:8px;align-items:center;padding:7px 12px;border-top:1px solid #eef1f4}
.mod-psb .fr-f .l{font-size:12.5px;color:var(--muted)}
.mod-psb .fr-f .v{font-family:ui-monospace,Menlo,monospace;font-size:13px;word-break:break-all}
.mod-psb .fr-f .v.sel::before{content:"pilih: ";color:var(--muted);font-family:system-ui}
.mod-psb .total{display:flex;justify-content:space-between;font-weight:700;padding:10px 12px;background:#e6f5ec;border-radius:10px}
.mod-psb .ktpimg{max-width:100%;border-radius:9px;border:1px solid var(--line)}
.mod-psb .kv{display:grid;grid-template-columns:40% 1fr;gap:4px 10px;font-size:14px}
.mod-psb .kv div:nth-child(odd){color:var(--muted)}
.mod-psb .check{display:flex;gap:8px;align-items:center;font-weight:500}
.mod-psb .check input{width:auto}
.mod-psb .spin{display:inline-block;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:s .7s linear infinite}
@keyframes s{to{transform:rotate(360deg)}}
.mod-psb .wotable{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.mod-psb .wotable th{text-align:left;font-size:12px;font-weight:650;color:var(--muted);background:var(--bg);padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.mod-psb .wotable td{padding:9px 10px;border-bottom:1px solid #eef1f4;font-size:14px;vertical-align:top}
.mod-psb .wotable tr[data-href]{cursor:pointer}
.mod-psb .wotable tbody tr:hover,.mod-psb .wotable tbody tr:focus{background:#f3f8fc;outline:none}
.mod-psb .wotable .c-wo{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;white-space:nowrap}
.mod-psb .wotable .c-n{font-weight:650}
.mod-psb .wotable .c-ad{color:var(--muted);max-width:260px}
.mod-psb .wotable .c-up{white-space:nowrap;color:var(--muted);font-size:12.5px}
@media (max-width:899px){
.mod-psb .wotable,.mod-psb .wotable tbody{display:block;border:0;background:transparent}
.mod-psb .wotable thead{display:none}
.mod-psb .wotable tr{display:grid;grid-template-columns:1fr auto;gap:2px 8px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px var(--pad);margin-bottom:10px}
.mod-psb .wotable td{border:0;padding:0;font-size:13px}
.mod-psb .wotable .c-n{order:1;font-size:15px}
.mod-psb .wotable .c-st{order:2;text-align:right}
.mod-psb .wotable .c-wo{order:3;color:var(--muted)}
.mod-psb .wotable .c-up{order:4;text-align:right}
.mod-psb .wotable .c-pk{order:5;color:var(--muted)}
.mod-psb .wotable .c-tk{order:6;text-align:right;color:var(--muted)}
.mod-psb .wotable .c-ad{order:7;grid-column:1/-1;max-width:none}
}
.mod-psb .wo-grid{display:flex;flex-direction:column}
.mod-psb .wo-side:empty{display:none}
@media (min-width:900px){
.mod-psb .home-acts{position:static;background:transparent;border:0;padding:0;justify-content:flex-end;margin:-4px 0 12px}
.mod-psb .home-acts button,.mod-psb .home-acts .btn{flex:0 0 auto}
.mod-psb .wo-grid{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:18px;align-items:start}
.mod-psb .wo-main{grid-column:1;grid-row:1}
.mod-psb .wo-side{grid-column:2;grid-row:1;position:sticky;top:64px;max-height:calc(100vh - 80px);overflow:auto;padding-right:2px}
.mod-psb .wo-side .actions{position:static;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:10px;margin-bottom:12px;justify-content:stretch}
.mod-psb .wo-side .actions button{max-width:none;flex:1 1 45%}
.mod-psb .wo-side{display:flex;flex-direction:column}
.mod-psb .wo-side #acts{order:0}
.mod-psb .wo-side #checkbox{order:1}
.mod-psb .wo-side #adminBox{order:2}
.mod-psb #map{height:420px}
.mod-psb .photos{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.mod-psb .ph img{height:130px}
.mod-psb .row5{grid-template-columns:repeat(5,1fr)}
.mod-psb .ktpimg{max-height:300px;object-fit:contain;width:100%;background:#f1f3f5}
.mod-psb .fr-f{grid-template-columns:38% 1fr auto}
}
@media (min-width:1280px){
.mod-psb .wo-grid{grid-template-columns:minmax(0,1fr) 460px}
}
.mod-psb .kbd{font:11px ui-monospace,Menlo,monospace;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:4px;padding:0 4px;color:var(--muted)}
@media (max-width:899px){
.mod-psb .desk-only{display:none}
}
.mod-psb a.btn{text-decoration:none}

/* ==== Modul PSB (dirender di dalam shell; semua aturan terlingkup .mod-psb) ==== */
.mod-psb{--brand2:var(--brand-2);--radius:var(--r);--pad:14px;padding-bottom:110px}
.mod-psb .pagehead{margin-bottom:14px}
.mod-psb h1{margin:0;font-size:1.5rem}
.mod-psb .home-acts{display:flex;gap:8px;flex-wrap:wrap}
.mod-psb .actions{bottom:calc(64px + env(safe-area-inset-bottom))}
@media (min-width:1024px){.mod-psb{padding-bottom:0}.mod-psb .actions{bottom:0}.mod-psb .wo-side{top:76px}}
.mod-psb .badge{position:static;line-height:1.4;min-width:0}
.mod-psb .tabs{margin-top:4px}

/* ==== Halaman Ops: beranda, generator ID, pelanggan, coverage ==== */
.cols { display: grid; gap: 14px; align-items: start; }
.cols > * { min-width: 0; }
@media (min-width: 1100px) { .cols { grid-template-columns: minmax(0, 1fr) 400px; } .cols.gen { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.cardhead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.cardhead h3 { margin: 0; }
.card > .stack > .callout:first-child { margin-top: 4px; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); color: var(--ink); font-size: .85rem; text-align: center; }
.tile:first-child { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.ico svg, .tile svg { width: 24px; height: 24px; display: block; }
.wost { flex: none; font-size: .74rem; font-weight: 700; padding: 2px 9px; border-radius: 99px; white-space: nowrap; background: var(--bg); color: var(--muted); }
.st-instalasi { background: #e3efff; color: #174a8b; } .st-verifikasi { background: #fff1d6; color: #7a4b00; } .st-setoran { background: #ffe3d6; color: #8a3200; }
.st-aktivasi { background: #ece3ff; color: #4b2a8a; } .st-menunggu_online { background: #e0f4f7; color: #0d5f6b; } .st-aktif, .cs-aktif { background: #ddf3e4; color: #145c34; }
.st-batal, .cs-batal { background: #f3e0e0; color: #7d1f1a; } .cs-reserved { background: #fff1d6; color: #7a4b00; } .cs-aktivasi { background: #ece3ff; color: #4b2a8a; }
:root[data-theme="malam"] .wost { filter: brightness(.85) saturate(1.2); }
.typegrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 560px) { .typegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.typebtn { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px 12px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font: inherit; font-size: .88rem; cursor: pointer; min-height: 58px; }
.typebtn span { color: var(--muted); font-size: .78rem; }
.typebtn.on { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: var(--brand-soft); }
.idbox { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-radius: var(--r); background: var(--head); color: var(--head-ink); }
.idbox .small { color: var(--head-muted); font-size: .78rem; }
.bigid { font: 600 2rem/1.2 var(--mono); letter-spacing: .04em; }
.bigid .t { color: var(--accent); }
.idbox .btn.primary { background: var(--accent); border-color: var(--accent); color: #17212b; }
td.right { text-align: right; white-space: nowrap; }
.linkbtn.bad { color: var(--bad); }
.tbl td.mono { font-family: var(--mono); font-size: .85rem; white-space: nowrap; }
.tbl.cust td { vertical-align: middle; }
#covmap { height: 52vh; min-height: 300px; border-radius: var(--r-sm); }
.lbl { text-transform: none; }
main#view > .mapwrap { max-width: none; }
@media (min-width: 1024px) { .mapbar { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .stats.seven { grid-template-columns: repeat(7, minmax(0, 1fr)); } }