/* ============================================================
   ACS Portal — dark NOC theme
   ============================================================ */
:root {
  --bg: #070b14;
  --bg-soft: #0b1120;
  --panel: rgba(19, 27, 45, 0.72);
  --panel-solid: #111a2b;
  --panel-hi: rgba(30, 41, 64, 0.72);
  --line: rgba(148, 163, 184, 0.14);
  --line-strong: rgba(148, 163, 184, 0.24);
  --text: #e8edf7;
  --text-dim: #aebbd2;
  --muted: #7f8ea8;
  --accent: #22d3ee;
  --accent-2: #6366f1;
  --green: #34d399;
  --red: #f87171;
  --amber: #fbbf24;
  --violet: #a78bfa;
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.9), 0 2px 8px -4px rgba(0, 0, 0, 0.6);
  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.015em; }
p { margin: 0; }
button { font-family: inherit; }

.bg-glow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(700px 420px at 12% -6%, rgba(99, 102, 241, 0.20), transparent 62%),
    radial-gradient(680px 380px at 92% 0%, rgba(34, 211, 238, 0.13), transparent 60%),
    radial-gradient(760px 520px at 70% 108%, rgba(139, 92, 246, 0.13), transparent 62%);
}

.app { position: relative; z-index: 1; display: flex; min-height: 100vh; }

/* tombol menu (hanya tampil di mobile) */
.nav-burger, .nav-close {
  display: none;
  align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: 0 0 auto;
  border-radius: 12px; cursor: pointer;
  color: var(--text); background: rgba(148, 163, 184, .10);
  border: 1px solid var(--line-strong);
}
.nav-burger:active, .nav-close:active { background: rgba(148, 163, 184, .2); }
.nav-scrim { display: none; }

/* ---------------- sidebar ---------------- */
.sidebar {
  width: 254px;
  flex: 0 0 254px;
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(13, 20, 35, 0.92), rgba(9, 14, 26, 0.86));
  backdrop-filter: blur(18px);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: thin;
}

.brand { display: flex; align-items: center; gap: 11px; padding: 2px 8px; }
.brand-mark {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 12px;
  color: #04121a;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 24px -8px rgba(34, 211, 238, 0.7);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text strong { font-size: 15px; letter-spacing: -0.02em; }
.brand-text small { color: var(--muted); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; }

.nav { display: flex; flex-direction: column; gap: 4px; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 13.5px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
  border: 1px solid transparent;
}
.nav-item:hover { background: rgba(148, 163, 184, 0.08); color: var(--text); }
.nav-item.active {
  color: var(--text);
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.16), rgba(99, 102, 241, 0.10));
  border-color: rgba(34, 211, 238, 0.24);
  box-shadow: inset 2px 0 0 var(--accent);
}
.nav-item .ic { opacity: 0.9; }

.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.mode-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: rgba(148, 163, 184, 0.05);
  font-size: 12px;
}
.mode-card strong { display: block; font-size: 12.5px; }
.mode-card small { color: var(--muted); font-size: 11px; }
.mode-card .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.14); }
.mode-card.is-live .dot { background: var(--green); box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.14); }

.user-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--panel);
}
.avatar {
  width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 600;
  color: #06121f;
  background: linear-gradient(135deg, var(--accent), var(--violet));
}
.user-meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.user-meta strong { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-meta small { color: var(--muted); font-size: 10.5px; text-transform: capitalize; }
.user-chip form { margin-left: auto; }
.icon-btn {
  background: transparent; border: 0; color: var(--muted);
  width: 28px; height: 28px; border-radius: 8px; cursor: pointer;
  display: grid; place-items: center;
}
.icon-btn:hover { background: rgba(248, 113, 113, 0.14); color: var(--red); }

/* ---------------- main ---------------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 32px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(9, 14, 26, 0.6), transparent);
  position: sticky; top: 0; z-index: 20;
  backdrop-filter: blur(14px);
}
.page-title h1 { font-size: 21px; }
.page-title p { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.topbar-ic { color: var(--muted); }
.content { padding: 24px 32px 56px; display: flex; flex-direction: column; gap: 24px; max-width: 1560px; width: 100%; }

/* ---------------- cards ---------------- */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
  padding: 20px;
  min-width: 0;
}
.card.tight { padding: 0; overflow: hidden; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.card-h h2, .card-h h3 { font-size: 14.5px; }
.card-h p { color: var(--muted); font-size: 12px; margin-top: 2px; }
.card-sub { color: var(--muted); font-size: 12px; }

.grid { display: grid; gap: 20px; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.grid-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }

/* ---------------- stat ---------------- */
.stat { position: relative; overflow: hidden; }
.stat .label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; letter-spacing: 0.02em; text-transform: uppercase; }
.stat .value { font-size: 30px; font-weight: 650; letter-spacing: -0.03em; font-family: var(--mono); margin-top: 10px; }
.stat .value small { font-size: 14px; color: var(--muted); font-weight: 500; margin-left: 6px; font-family: var(--font); }
.stat .foot { margin-top: 8px; font-size: 12px; color: var(--text-dim); display: flex; align-items: center; gap: 6px; }
.stat .accent-bar { position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(180deg, var(--accent), transparent); opacity: 0.8; }
.stat.up .accent-bar { background: linear-gradient(180deg, var(--green), transparent); }
.stat.down .accent-bar { background: linear-gradient(180deg, var(--red), transparent); }
.stat.warn .accent-bar { background: linear-gradient(180deg, var(--amber), transparent); }
.trend { font-size: 11.5px; padding: 2px 7px; border-radius: 999px; font-family: var(--mono); }
.trend.pos { color: var(--green); background: rgba(52, 211, 153, 0.12); }
.trend.neg { color: var(--red); background: rgba(248, 113, 113, 0.12); }

/* ---------------- pills / badges ---------------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 550;
  border: 1px solid transparent;
  white-space: nowrap;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-online { color: var(--green); background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.24); }
.pill-offline { color: var(--red); background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.24); }
.pill-never { color: var(--muted); background: rgba(148, 163, 184, 0.10); border-color: var(--line); }
.pill-missing { color: var(--violet); background: rgba(167, 139, 250, 0.12); border-color: rgba(167, 139, 250, 0.28); }
.pill-pending { color: var(--amber); background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.24); }
.pill-sukses { color: var(--green); background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.24); }
.pill-gagal { color: var(--red); background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.24); }
.pill-demo { color: var(--amber); background: rgba(251, 191, 36, 0.10); border-color: rgba(251, 191, 36, 0.28); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; }
.pill-live { color: var(--green); background: rgba(52, 211, 153, 0.10); border-color: rgba(52, 211, 153, 0.28); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; }
.pill-brand { color: var(--accent); background: rgba(34, 211, 238, 0.10); border-color: rgba(34, 211, 238, 0.22); }
.tag { font-size: 11px; color: var(--text-dim); background: rgba(148, 163, 184, 0.09); border: 1px solid var(--line); padding: 2px 8px; border-radius: 7px; font-family: var(--mono); }
.dot-lg { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 15px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: rgba(148, 163, 184, 0.08);
  color: var(--text);
  font-size: 13px; font-weight: 550;
  cursor: pointer;
  transition: 0.15s;
  white-space: nowrap;
}
.btn:hover { background: rgba(148, 163, 184, 0.14); border-color: rgba(148, 163, 184, 0.34); }
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent; color: #04121a; font-weight: 650;
  box-shadow: 0 10px 24px -12px rgba(34, 211, 238, 0.9);
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-danger { color: #ffd9d9; background: rgba(248, 113, 113, 0.14); border-color: rgba(248, 113, 113, 0.32); }
.btn-danger:hover { background: rgba(248, 113, 113, 0.22); }
.btn-sm { padding: 6px 11px; font-size: 12px; border-radius: 8px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-dim); }
.btn-ghost:hover { background: rgba(148, 163, 184, 0.10); color: var(--text); }

/* ---------------- tables ---------------- */
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; min-width: 720px; }
table.tbl th {
  text-align: left;
  font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(148, 163, 184, 0.04);
  white-space: nowrap;
  position: sticky; top: 0;
}
table.tbl td { padding: 13px 16px; border-bottom: 1px solid rgba(148, 163, 184, 0.07); vertical-align: middle; }
table.tbl tbody tr { transition: background 0.12s; }
table.tbl tbody tr:hover { background: rgba(34, 211, 238, 0.045); }
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl td.num, table.tbl th.num { text-align: right; }
.mono { font-family: var(--mono); font-size: 12.5px; }
.cell-main { display: flex; flex-direction: column; gap: 2px; }
.cell-main strong { font-size: 13px; font-weight: 550; }
.cell-main small { color: var(--muted); font-size: 11.5px; font-family: var(--mono); }
.muted { color: var(--muted); }
.dim { color: var(--text-dim); }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.flex { display: flex; align-items: center; gap: 8px; }
.spacer { flex: 1; }

.sig { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.sig-bar { width: 44px; height: 5px; border-radius: 999px; background: rgba(148, 163, 184, 0.16); overflow: hidden; display: inline-block; }
.sig-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--green); }
.sig-warn .sig-bar > span { background: var(--amber); }
.sig-bad .sig-bar > span { background: var(--red); }
.sig .mono { font-size: 12px; }

/* ---------------- filters ---------------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.filters .search { position: relative; flex: 1; min-width: 220px; }
.filters .search .ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.filters .search input { padding-left: 36px; }
input, select, textarea {
  width: 100%;
  padding: 9px 12px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: rgba(8, 13, 24, 0.72);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  outline: none;
  transition: 0.15s;
}
input:focus, select:focus, textarea:focus {
  border-color: rgba(34, 211, 238, 0.55);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.12);
}
input::placeholder, textarea::placeholder { color: #5e6b83; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
/*
 * DAFTAR PILIHAN <option> WAJIB diberi warna sendiri.
 * Tanpa ini, tema gelap membuat teks opsi berwarna terang sementara popup daftar
 * memakai latar putih bawaan sistem → opsi tampak PUTIH dan tidak terbaca
 * (keluhan nyata: "pilihannya warna putih tidak kelihatan").
 * `color-scheme: dark` pada select membuat Chrome/Edge memakai popup gelap.
 */
select { color-scheme: dark; }
select option, select optgroup { background-color: #0f1726; color: #e6edf9; }
select option:checked, select option:hover { background-color: #1d4ed8; color: #ffffff; }
/* fallback untuk browser yang mengabaikan warna option (mis. Safari lama): */
@supports not (background-color: color-mix(in srgb, red, blue)) {
  select, select option { color: #e6edf9; }
}
textarea { font-family: var(--mono); font-size: 12px; line-height: 1.6; resize: vertical; }
.filters select { width: auto; min-width: 132px; }
label.lbl { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 6px; letter-spacing: 0.03em; text-transform: uppercase; font-weight: 600; }
.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
.hint { font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.check { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-dim); cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }
.radio-group { display: flex; gap: 8px; flex-wrap: wrap; }
.radio-group input { display: none; }
.radio-group .opt {
  padding: 8px 13px; border-radius: 9px; border: 1px solid var(--line-strong);
  background: rgba(148, 163, 184, 0.06); cursor: pointer; font-size: 12.5px; color: var(--text-dim);
}
.radio-group input:checked + .opt { border-color: rgba(34, 211, 238, 0.6); color: var(--text); background: rgba(34, 211, 238, 0.12); }

/* ---------------- chart ---------------- */
.chart-box { position: relative; margin-top: 6px; }
.chart-box svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-legend { display: flex; gap: 16px; font-size: 11.5px; color: var(--muted); }
.chart-legend i { width: 8px; height: 8px; border-radius: 3px; display: inline-block; margin-right: 6px; }

/* ---------------- bars ---------------- */
.bar-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.bar-row:last-child { margin-bottom: 0; }
.bar-top { display: flex; justify-content: space-between; font-size: 12.5px; }
.bar-top span:last-child { color: var(--text-dim); font-family: var(--mono); font-size: 12px; }
.bar { height: 7px; border-radius: 999px; background: rgba(148, 163, 184, 0.14); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.bar.green > span { background: linear-gradient(90deg, #34d399, #10b981); }
.bar.violet > span { background: linear-gradient(90deg, #a78bfa, #6366f1); }

/* ---------------- list / feed ---------------- */
.list { display: flex; flex-direction: column; }
.list-item { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(148, 163, 184, 0.08); }
.list-item:last-child { border-bottom: 0; }
.list-item:first-child { padding-top: 0; }
.li-ic {
  width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px;
  display: grid; place-items: center;
  background: rgba(148, 163, 184, 0.10); color: var(--text-dim);
}
.li-ic.wan { color: var(--accent); background: rgba(34, 211, 238, 0.12); }
.li-ic.wifi { color: var(--violet); background: rgba(167, 139, 250, 0.12); }
.li-ic.reboot { color: var(--amber); background: rgba(251, 191, 36, 0.12); }
.li-ic.fault { color: var(--red); background: rgba(248, 113, 113, 0.12); }
.li-ic.refresh { color: var(--green); background: rgba(52, 211, 153, 0.12); }
.li-body { min-width: 0; flex: 1; }
.li-body strong { font-size: 12.8px; font-weight: 550; display: block; }
.li-body small { color: var(--muted); font-size: 11.5px; font-family: var(--mono); }
.li-time { color: var(--muted); font-size: 11px; white-space: nowrap; }

/* ---------------- tabs ---------------- */
.tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.tab {
  padding: 10px 14px; font-size: 13px; color: var(--muted); cursor: pointer;
  border-bottom: 2px solid transparent; background: none; border-top: 0; border-left: 0; border-right: 0;
  font-weight: 550;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--accent); }

/* ---------------- definition lists ---------------- */
.kv { display: grid; grid-template-columns: 170px 1fr; gap: 10px 16px; font-size: 13px; }
.kv dt { color: var(--muted); font-size: 12px; }
.kv dd { margin: 0; font-family: var(--mono); font-size: 12.5px; word-break: break-all; }
.param-table td { padding: 8px 16px; font-family: var(--mono); font-size: 12px; }
.param-table td:first-child { color: var(--text-dim); word-break: break-all; }
.param-table td:last-child { color: var(--text); }
.param-scroll { max-height: 460px; overflow: auto; }

/* ---------------- code ---------------- */
pre.code {
  margin: 0; padding: 15px 16px; border-radius: 12px;
  background: rgba(4, 8, 16, 0.85);
  border: 1px solid var(--line);
  color: #cfe3ff; font-family: var(--mono); font-size: 11.5px; line-height: 1.65;
  overflow: auto; max-height: 360px;
}
pre.code .k { color: #7dd3fc; }
pre.code .s { color: #a7f3d0; }

/* ---------------- flash / notice ---------------- */
.flash { padding: 12px 16px; border-radius: 12px; font-size: 13px; border: 1px solid; }
.flash.ok { color: #c9f7e3; background: rgba(52, 211, 153, 0.10); border-color: rgba(52, 211, 153, 0.28); }
.flash.err { color: #ffd9d9; background: rgba(248, 113, 113, 0.10); border-color: rgba(248, 113, 113, 0.28); }
.flash.info { color: #d5ecff; background: rgba(34, 211, 238, 0.08); border-color: rgba(34, 211, 238, 0.24); }
.flash.warn { color: #fde68a; background: rgba(251, 191, 36, 0.10); border-color: rgba(251, 191, 36, 0.3); }
/* petunjuk diagnosa di halaman login: ikon + teks sejajar, teks boleh membungkus */
.login-hint { display: flex; align-items: flex-start; gap: 9px; text-align: left; line-height: 1.5; }
.login-hint .ic { flex: 0 0 auto; margin-top: 1px; }
.login-hint div { min-width: 0; }
.notice {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 15px; border-radius: 12px;
  background: rgba(251, 191, 36, 0.07);
  border: 1px solid rgba(251, 191, 36, 0.22);
  color: #f7e9c3; font-size: 12.5px;
}
.notice .ic { color: var(--amber); flex: 0 0 auto; margin-top: 1px; }
.notice.info { background: rgba(34, 211, 238, 0.06); border-color: rgba(34, 211, 238, 0.2); color: #d3ecf7; }
.notice.info .ic { color: var(--accent); }

/* ---------------- pager ---------------- */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--line); font-size: 12.5px; }
.pg-group { display: flex; gap: 5px; }
.pg {
  min-width: 30px; height: 30px; padding: 0 9px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid var(--line);
  color: var(--text-dim); font-size: 12.5px; font-family: var(--mono);
}
.pg:hover { background: rgba(148, 163, 184, 0.10); color: var(--text); }
.pg.active { background: rgba(34, 211, 238, 0.14); border-color: rgba(34, 211, 238, 0.4); color: #dffbff; }
.pg.disabled { opacity: 0.35; pointer-events: none; }

/* ---------------- empty ---------------- */
.empty { text-align: center; padding: 44px 20px; color: var(--muted); font-size: 13px; }
.empty .ic { color: rgba(148, 163, 184, 0.5); margin-bottom: 10px; }

/* ---------------- modal ---------------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(4, 7, 14, 0.72);
  backdrop-filter: blur(6px);
  display: none; align-items: flex-start; justify-content: center;
  padding: 48px 20px;
  overflow: auto;
}
.modal-backdrop.open { display: flex; }
.modal {
  width: 100%; max-width: 660px;
  background: linear-gradient(180deg, #131c2e, #0e1626);
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.95);
  padding: 22px;
  animation: pop 0.16s ease-out;
}
.modal.wide { max-width: 860px; }
@keyframes pop { from { transform: translateY(8px) scale(0.99); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.modal-h h3 { font-size: 16px; }
.modal-h p { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.modal-f { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }

/* ---------------- toast ---------------- */
.toast-area { position: fixed; right: 22px; bottom: 22px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast {
  min-width: 240px; max-width: 380px;
  padding: 12px 15px; border-radius: 12px;
  background: #16202f; border: 1px solid var(--line-strong);
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.9);
  font-size: 12.8px;
  display: flex; gap: 9px; align-items: flex-start;
  animation: slidein 0.2s ease-out;
}
@keyframes slidein { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.toast.ok { border-color: rgba(52, 211, 153, 0.4); }
.toast.ok .ic { color: var(--green); }
.toast.err { border-color: rgba(248, 113, 113, 0.4); }
.toast.err .ic { color: var(--red); }
.toast.info .ic { color: var(--accent); }

/* ---------------- login ---------------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 32px 20px; position: relative; z-index: 1; }
.login-card {
  width: 100%; max-width: 404px;
  background: rgba(17, 25, 40, 0.82);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  padding: 30px;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 1);
  backdrop-filter: blur(20px);
}
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.login-brand .brand-mark { width: 42px; height: 42px; }
.login-card h1 { font-size: 19px; margin-bottom: 6px; }
.login-card > p { color: var(--muted); font-size: 13px; margin-bottom: 22px; }
.demo-creds { margin-top: 18px; padding: 12px 14px; border-radius: 11px; background: rgba(34, 211, 238, 0.06); border: 1px dashed rgba(34, 211, 238, 0.28); font-size: 12px; color: var(--text-dim); }
.demo-creds strong { color: var(--text); font-family: var(--mono); }
.demo-creds code { font-family: var(--mono); color: var(--accent); }
.login-foot { margin-top: 20px; font-size: 11.5px; color: var(--muted); text-align: center; }

/* ---------------- helpers ---------------- */
.stack { display: flex; flex-direction: column; gap: 20px; }
.stack-sm { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.sep { height: 1px; background: var(--line); margin: 4px 0; }
.mt-0 { margin-top: 0; }
.w-full { width: 100%; }
.small { font-size: 12px; }
.hidden { display: none !important; }
.progress { height: 8px; border-radius: 999px; background: rgba(148, 163, 184, 0.14); overflow: hidden; }
.progress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 0.4s ease; }

/* ---------------- device detail ---------------- */
.device-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.device-hero h2 { font-size: 19px; letter-spacing: -0.02em; }
.device-hero .sub { color: var(--muted); font-size: 12px; font-family: var(--mono); margin-top: 4px; }
.actions { display: flex; gap: 9px; flex-wrap: wrap; }

/* ---------------- responsive ---------------- */
@media (max-width: 1280px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2-1, .grid-1-2 { grid-template-columns: minmax(0, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .app { flex-direction: column; }
  .sidebar {
    width: 100%; flex: none; height: auto; position: static;
    flex-direction: row; align-items: center; gap: 14px;
    padding: 12px 16px; overflow-x: auto;
  }
  .brand-text, .sidebar-foot { display: none; }
  .nav { flex-direction: row; gap: 4px; }
  .nav-item span { display: none; }
  .nav-item { padding: 9px; }
  .topbar, .content { padding-left: 16px; padding-right: 16px; }
  .grid-4, .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .kv dd { margin-bottom: 8px; }
}

/* status "menunggu ONT" — task sudah dikirim ke GenieACS, menunggu device inform */
.pill-menunggu {
  color: #93c5fd;
  background: rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.28);
}
.pill-menunggu .dot { animation: pulse-dot 1.6s ease-in-out infinite; }
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.75); }
}

/* ============================================================
   DETAIL ONU (kartu metrik + grid info + tab WLAN/LAN/WAN)
   ============================================================ */
.onu-card { padding: 18px 20px 20px; }
.onu-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.onu-metric {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 18px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(148, 163, 184, 0.045);
  text-align: center;
}
.onu-metric-ic { color: var(--muted); }
.onu-metric.good .onu-metric-ic { color: var(--accent); }
.onu-metric.warn .onu-metric-ic { color: var(--amber); }
.onu-metric.bad .onu-metric-ic { color: var(--red); }
.onu-metric-label {
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
}
.onu-metric-value { font-size: 24px; font-weight: 650; font-family: var(--mono); letter-spacing: -0.02em; }
.onu-metric-value small { font-size: 12px; color: var(--muted); margin-left: 3px; font-family: var(--font); font-weight: 500; }
.onu-metric.good .onu-metric-value { color: #6ee7b7; }
.onu-metric.warn .onu-metric-value { color: var(--amber); }
.onu-metric.bad .onu-metric-value { color: var(--red); }

.onu-info {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 28px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.onu-col { display: flex; flex-direction: column; gap: 9px; }
.onu-kv { display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; align-items: baseline; }
.onu-k { color: var(--muted); white-space: nowrap; }
.onu-v { color: var(--text); text-align: right; word-break: break-word; }
.onu-v.mono { font-family: var(--mono); font-size: 12px; }

/* tabs di halaman ONU */
.onu-tabs { padding: 0 20px; margin-bottom: 0; gap: 2px; }
.onu-tabs .tab {
  text-transform: uppercase; font-size: 11px; letter-spacing: 0.07em; font-weight: 600;
  padding: 13px 16px;
}
.tab-panel .pad { padding: 18px 20px 20px; }
.tab-panel.hidden { display: none; }
table.tbl td.center, table.tbl th.center { text-align: center; }
.wlan-ssid, .wlan-pass { padding: 6px 10px; font-size: 12.5px; font-family: var(--mono); min-width: 120px; }
.wlan-pass { min-width: 110px; }

/* kartu WAN */
.wan-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(148, 163, 184, 0.04);
  overflow: hidden;
}
.wan-card.is-off { opacity: 0.72; }
.wan-card-h {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px;
  background: rgba(34, 211, 238, 0.06);
  border-bottom: 1px solid var(--line);
}
.wan-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 8px 22px;
  padding: 14px 16px;
}
.wan-kv { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
.wan-kv > span { color: var(--muted); }
.wan-kv > b { font-weight: 550; font-family: var(--mono); font-size: 12px; text-align: right; }
.wan-card-foot {
  padding: 8px 16px 10px; border-top: 1px dashed var(--line);
  font-size: 10.5px; color: var(--muted);
}

@media (max-width: 1100px) {
  .onu-metrics { grid-template-columns: minmax(0, 1fr); }
  .onu-info { grid-template-columns: minmax(0, 1fr); }
  .wan-card-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- WAN ringkas + binding ---- */
.wan-card-grid--mini { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.wan-bind { border-top: 1px dashed var(--line); }
.wan-bind > summary {
  padding: 9px 16px; cursor: pointer; font-size: 11.5px; color: var(--text-dim);
  display: flex; align-items: center; gap: 6px; list-style: none; user-select: none;
}
.wan-bind > summary::-webkit-details-marker { display: none; }
.wan-bind > summary:hover { color: var(--text); background: rgba(148,163,184,.06); }
.bind-row { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 4px 16px 10px; align-items: center; }
.bind-label { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); min-width: 42px; }
.bind-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--text-dim);
  padding: 3px 9px; border-radius: 8px;
  border: 1px solid var(--line); background: rgba(148,163,184,.06);
  cursor: pointer;
}
.bind-chip:hover { border-color: var(--line-strong); color: var(--text); }
.bind-chip input { width: 13px; height: 13px; accent-color: var(--accent); margin: 0; }
.bind-chip:has(input:checked) { border-color: rgba(34,211,238,.45); background: rgba(34,211,238,.12); color: #dffbff; }

/* ---- switch (DHCP on/off) ---- */
.switch { display: inline-flex; align-items: center; cursor: pointer; }
.switch input { display: none; }
.switch-track {
  width: 44px; height: 24px; border-radius: 999px; background: rgba(148,163,184,.25);
  position: relative; transition: background .16s; display: inline-block;
}
.switch-knob {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: #e2e8f5; transition: transform .16s;
}
.switch input:checked + .switch-track { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.switch input:checked + .switch-track .switch-knob { transform: translateX(20px); }

/* ============================================================
   DAFTAR DEVICE — kartu ringkasan + tabel padat + operasi massal
   ============================================================ */
.onu-sums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.onu-sum {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--panel);
  box-shadow: var(--shadow); backdrop-filter: blur(14px);
}
.onu-sum-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.onu-sum-label { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.onu-sum-value { font-size: 26px; font-weight: 700; font-family: var(--mono); letter-spacing: -.02em; line-height: 1.15; }
.onu-sum-sub { font-size: 11px; color: var(--muted); }
.onu-sum-ic { color: rgba(148,163,184,.5); }
.onu-sum.good .onu-sum-value { color: #6ee7b7; }
.onu-sum.good .onu-sum-ic { color: var(--green); }
.onu-sum.warn .onu-sum-value { color: var(--amber); }
.onu-sum.warn .onu-sum-ic { color: var(--amber); }
.onu-sum.bad .onu-sum-value { color: var(--red); }
.onu-sum.bad .onu-sum-ic { color: var(--red); }

.bulkbar {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--line);
  background: rgba(34, 211, 238, .05);
}
.bulkbar-label { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-right: 6px; }
.btn-xs { padding: 4px 9px; font-size: 10.5px; letter-spacing: .04em; border-radius: 7px; font-weight: 600; }

table.tbl-compact { min-width: 1500px; }
table.tbl-compact th { padding: 9px 10px; font-size: 9.5px; letter-spacing: .06em; }
table.tbl-compact td { padding: 9px 10px; font-size: 12px; }
table.tbl-compact td.col-check, table.tbl-compact th.col-check { width: 34px; padding-right: 0; }
table.tbl-compact td.col-status { width: 22px; padding-left: 0; padding-right: 0; }
table.tbl-compact .cell-main strong { font-size: 12px; }
table.tbl-compact .cell-main small { font-size: 10.5px; }
.dot-on { color: var(--green); }
.dot-off { color: var(--red); }
.dot-never { color: var(--muted); }
.dot-missing { color: var(--violet); }
/* kolom PON: ONLINE hijau / OFFLINE merah (pengganti checkbox) */
/* ---------------- MikroTik / PPPoE ---------------- */
.mt-list { display: flex; flex-direction: column; gap: 12px; }
.mt-card {
  padding: 13px 15px; border-radius: 12px;
  background: rgba(15, 23, 39, .72); border: 1px solid var(--line);
}
.mt-card-top { display: flex; align-items: center; gap: 10px; }
.mt-card-title { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.mt-card-title strong { font-size: 13px; }
.mt-card-title .mono { font-size: 10.5px; }
.mt-card-sub { margin-top: 7px; font-size: 11.5px; color: var(--muted); word-break: break-word; }
.mt-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.mt-dot.is-on { background: var(--green); box-shadow: 0 0 0 3px rgba(52, 211, 153, .16); }
.mt-dot.is-off { background: var(--red); box-shadow: 0 0 0 3px rgba(248, 113, 113, .16); }
.mt-dot.is-na { background: var(--muted); box-shadow: 0 0 0 3px rgba(148, 163, 184, .12); }
.mt-card .pill { margin-left: auto; }

/* kartu PPPoE di halaman detail ONU */
.pppoe-box { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pppoe-box .mono { font-size: 12px; }

/* strip status ringkas di atas tabel (pengganti notice besar) */
.status-strip {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 8px 14px; border-radius: 11px;
  background: rgba(19, 27, 45, 0.6); border: 1px solid var(--line);
  font-size: 11.8px; line-height: 1.5;
}
.status-strip .pill { font-size: 9.5px; padding: 2px 8px; }
.strip-txt { color: var(--text-dim); }
.strip-txt.dim { color: var(--muted); font-family: var(--mono); font-size: 10.8px; }
.strip-sep { width: 1px; height: 14px; background: var(--line-strong); }
.strip-warn { display: inline-flex; align-items: center; gap: 5px; color: var(--amber); font-weight: 600; }
.strip-warn .ic { color: var(--amber); }
.strip-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.strip-link:hover { color: #7ee7f7; }
.strip-btn {
  padding: 2px 9px; border-radius: 7px; cursor: pointer;
  font: inherit; font-size: 10.5px; font-weight: 600;
  color: var(--red); background: rgba(248, 113, 113, .1);
  border: 1px solid rgba(248, 113, 113, .3);
}
.strip-btn:hover { background: rgba(248, 113, 113, .18); }

/* opsi sekalian buat akun PPPoE di form WAN */
.mt-inline {
  padding: 14px 16px; border-radius: 12px; margin-bottom: 16px;
  background: rgba(34, 174, 194, .06); border: 1px solid rgba(34, 174, 194, .22);
}
.mt-inline .hint { margin-top: 6px; }
.text-ok { color: var(--green); }
#mt-check-result { line-height: 1.45; }

.pon-tag {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em; line-height: 1.6;
  border: 1px solid transparent; white-space: nowrap;
}
.pon-tag.is-on { color: var(--green); background: rgba(52, 211, 153, .13); border-color: rgba(52, 211, 153, .3); }
.pon-tag.is-off { color: var(--red); background: rgba(248, 113, 113, .13); border-color: rgba(248, 113, 113, .3); }
.pon-tag.is-na { color: var(--muted); background: rgba(148, 163, 184, .1); border-color: var(--line); }
.text-bad { color: var(--red); }
.text-warn { color: var(--amber); }
table.tbl-compact tr.is-selected { background: rgba(34,211,238,.08); }
table.tbl-compact td input[type=checkbox] { width: 14px; height: 14px; accent-color: var(--accent); }

@media (max-width: 1280px) {
  .onu-sums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Kartu indikator dibuat RAMPING di HP: 2 kolom, padding & font lebih kecil,
   teks penjelas disembunyikan supaya tidak memakan satu layar penuh. */
@media (max-width: 760px) {
  .onu-sums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .onu-sum { padding: 8px 11px; gap: 6px; border-radius: 11px; }
  .onu-sum-body { gap: 0; }
  .onu-sum-label { font-size: 8.5px; letter-spacing: .05em; }
  .onu-sum-value { font-size: 18px; line-height: 1.1; }
  .onu-sum-sub { display: none; }
  .onu-sum-ic svg, .onu-sum-ic .ic { width: 15px; height: 15px; }
}

/* ============================================================
   Form WAN sederhana (segmented, port chips, advanced)
   ============================================================ */
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg label { flex: 1 1 0; min-width: 92px; }
.seg input { display: none; }
.seg .opt {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 10px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line-strong); background: rgba(148,163,184,.06);
  font-size: 12.5px; font-weight: 550; color: var(--text-dim);
  transition: .15s; text-align: center;
}
.seg .opt:hover { border-color: var(--line-strong); color: var(--text); background: rgba(148,163,184,.11); }
.seg input:checked + .opt {
  border-color: rgba(34,211,238,.6); color: #eafcff;
  background: linear-gradient(135deg, rgba(34,211,238,.18), rgba(99,102,241,.14));
  box-shadow: inset 0 0 0 1px rgba(34,211,238,.25);
}

.port-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.port-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line-strong); background: rgba(148,163,184,.06);
  font-size: 12.5px; font-weight: 600; color: var(--text-dim);
  transition: .15s;
}
.port-chip input { display: none; }
.port-num { display: inline-flex; align-items: center; gap: 5px; }
.port-chip:has(input:checked) {
  border-color: rgba(34,211,238,.6); color: #eafcff;
  background: linear-gradient(135deg, rgba(34,211,238,.2), rgba(99,102,241,.14));
}
.port-chip:hover { color: var(--text); }

details.adv {
  margin: 4px 0 0; border: 1px solid var(--line); border-radius: var(--radius);
  background: rgba(148,163,184,.035);
}
details.adv > summary {
  padding: 11px 14px; cursor: pointer; font-size: 12px; color: var(--text-dim);
  display: flex; align-items: center; gap: 7px; list-style: none; user-select: none;
}
details.adv > summary::-webkit-details-marker { display: none; }
details.adv > summary:hover { color: var(--text); }
details.adv[open] > summary { border-bottom: 1px solid var(--line); }
.adv-body { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.adv-body .field { margin-bottom: 0; }

/* ============================================================
   RESPONSIVE — HP & tablet
   ============================================================ */
@media (max-width: 900px) {
  .seg { display: grid; grid-template-columns: 1fr 1fr; }
  .seg label { min-width: 0; }
  .seg .opt { padding: 12px 8px; font-size: 12px; }
  .port-chip { flex: 1 1 40%; justify-content: center; padding: 12px 8px; }
  .onu-metrics { gap: 10px; }
  .onu-metric { padding: 14px 8px; }
  .onu-metric-value { font-size: 20px; }
  .onu-tabs { padding: 0 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .onu-tabs .tab { padding: 12px 12px; font-size: 10.5px; white-space: nowrap; }
  .tab-panel .pad { padding: 14px 12px 16px; }
  .bulkbar { overflow-x: auto; flex-wrap: nowrap; padding: 10px 12px; }
  .bulkbar-label, #sel-count { display: none; }
  .btn-xs { white-space: nowrap; }
  .onu-sum { padding: 14px; }
  .onu-sum-value { font-size: 22px; }
  .wan-card-h { flex-direction: column; align-items: flex-start; gap: 8px; }
  .wan-card-grid, .wan-card-grid--mini { grid-template-columns: 1fr; gap: 6px; }
  .modal { padding: 16px; }
  .modal-f { flex-direction: column-reverse; }
  .modal-f .btn { width: 100%; }
  .topbar { padding: 16px 12px 12px; }
  .page-title h1 { font-size: 18px; }
  .content { padding: 14px 12px 40px; gap: 16px; }
}
@media (max-width: 560px) {
  /* tetap 2 kolom: label pendek (PPPoE/DHCP/Statik/Bridge) muat di HP */
  .seg { grid-template-columns: 1fr 1fr; }
  .seg .opt { font-size: 11.5px; padding: 11px 6px; }
  .onu-metrics { grid-template-columns: 1fr; }
  .onu-info { gap: 8px; }
  .onu-kv { font-size: 12px; }
  table.tbl { min-width: 0; }
  table.tbl-compact { min-width: 900px; }
  .filters select, .filters .search { min-width: 100%; }
  .filters { flex-direction: column; align-items: stretch; }
  .pager { flex-direction: column; gap: 10px; align-items: stretch; }
  .pg-group { justify-content: center; }
}

/* ============================================================
   VERSI MOBILE — kartu device + tab bawah
   ============================================================ */
.only-mobile { display: none; }
.only-desktop { display: block; }

@media (max-width: 820px) {
  .only-mobile { display: block; }
  .only-desktop { display: none !important; }

  /* kartu device */
  .mobile-device-list { padding: 12px; display: flex; flex-direction: column; gap: 12px; }
  .mdev {
    border: 1px solid var(--line); border-radius: 14px;
    background: rgba(148,163,184,.045); padding: 14px;
    display: flex; flex-direction: column; gap: 9px;
  }
  .mdev.is-on { border-color: rgba(52,211,153,.28); background: rgba(52,211,153,.05); }
  .mdev-top { display: flex; align-items: center; gap: 8px; }
  .mdev-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
  .mdev-sn { font-family: var(--mono); font-size: 13px; font-weight: 600; flex: 1; color: var(--text); }
  .mdev-sub { font-size: 11.5px; color: var(--muted); }
  .mdev-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px;
    padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  }
  .mdev-grid > div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
  .mdev-grid span { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .mdev-grid b { font-family: var(--mono); font-size: 11.5px; font-weight: 600; }
  .mdev-ssid { font-size: 11.5px; color: var(--text-dim); display: flex; align-items: center; gap: 6px; }
  .mdev-actions { display: flex; gap: 8px; }
  .mdev-actions .btn { flex: 1; justify-content: center; padding: 10px; }

  /* NAVIGASI MOBILE = DRAWER dari kiri (bukan tab bawah).
     Tab bawah dulu bertumpuk 8 menu, kecil-kecil, dan ketutup navigation bar
     Android → sulit ditekan. Sekarang: tombol hamburger di topbar. */
  .nav-burger { display: inline-flex; }
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0;
    width: min(84vw, 300px); height: 100%;
    flex: none; padding: 16px 14px calc(18px + env(safe-area-inset-bottom, 0px));
    flex-direction: column; align-items: stretch; gap: 18px;
    overflow-y: auto; overflow-x: hidden;
    border-right: 1px solid var(--line-strong);
    border-top: 0;
    background: linear-gradient(180deg, rgba(13,20,35,.985), rgba(9,14,26,.985));
    backdrop-filter: blur(18px);
    z-index: 210;
    transform: translateX(-102%);
    transition: transform .24s cubic-bezier(.4, 0, .2, 1);
    box-shadow: 26px 0 60px -30px rgba(0, 0, 0, .95);
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
  }
  body.nav-open .sidebar { transform: translateX(0); }
  .sidebar .brand { display: flex; }
  .sidebar .nav { flex-direction: column; gap: 6px; width: 100%; flex: 0 0 auto; }
  .sidebar .nav-item {
    flex-direction: row; justify-content: flex-start; gap: 13px;
    padding: 14px 14px; flex: none;
    border-radius: 12px; font-size: 14.5px; font-weight: 500;
    border: 1px solid transparent;
  }
  .sidebar .nav-item .ic { width: 20px; height: 20px; }
  .sidebar .nav-item span { display: block; font-size: 14.5px; }
  .sidebar .nav-item.active {
    background: linear-gradient(90deg, rgba(34,211,238,.18), rgba(99,102,241,.10));
    border-color: rgba(34,211,238,.26);
    box-shadow: inset 3px 0 0 var(--accent);
  }
  .sidebar-foot { display: flex; margin-top: auto; }
  /* target sentuh lebih besar di drawer */
  .sidebar .user-chip { padding: 12px; }
  .sidebar .user-chip .icon-btn { width: 40px; height: 40px; border-radius: 10px; background: rgba(248,113,113,.08); color: var(--red); }
  .sidebar .user-chip .icon-btn svg, .sidebar .user-chip .icon-btn .ic { width: 18px; height: 18px; }
  .nav-close { display: inline-flex; align-self: flex-end; margin-bottom: -6px; }

  .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 200;
    background: rgba(3, 7, 14, .62); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .24s ease;
  }
  body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }

  /* topbar: hamburger + judul sejajar, aman dari status bar & poni layar */
  .topbar {
    position: sticky; top: 0; z-index: 30;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px;
    gap: 10px; justify-content: flex-start;
    background: rgba(9, 14, 26, .92);
  }
  .page-title { min-width: 0; flex: 1; }
  .page-title h1 { font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .page-title p { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar-right { gap: 8px; flex: 0 0 auto; }
  .topbar-ic { display: none; }

  .app { padding-bottom: 0; }
  .content { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
  .toast-area { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); left: 12px; right: 12px; }
  .toast { min-width: 0; max-width: none; width: 100%; }
}

@media (min-width: 821px) {
  .mobile-device-list { display: none; }
}

/* kartu WAN kosong (sisa addObject yang gagal) */
.wan-card.is-blank { border-color: rgba(248,113,113,.35); background: rgba(248,113,113,.05); }

/* tombol status WLAN (bisa diklik untuk enable/disable) */
.pill-toggle {
  border: 1px solid transparent; cursor: pointer; font-family: inherit;
  font-size: 11.5px; font-weight: 550; padding: 3px 9px; border-radius: 999px;
  transition: .15s; display: inline-flex; align-items: center; gap: 6px;
}
.pill-toggle.is-on {
  color: var(--green); background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.28);
}
.pill-toggle.is-off {
  color: var(--amber); background: rgba(251,191,36,.12); border-color: rgba(251,191,36,.28);
}
.pill-toggle:hover { filter: brightness(1.25); }
.pill-toggle::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.pill-toggle:disabled { opacity: .6; cursor: wait; }

/* ============================================================
   Logo brand (Dinamika Mediakom) + peringatan idle
   ============================================================ */
.brand-logo { display: block; }
/* Piring logo: gradasi gelap, BUKAN putih — logo transparan jadi menyatu dengan tema. */
.brand-mark--logo {
  background: linear-gradient(150deg, #16223a 0%, #101a2c 60%, #1b1424 100%);
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 10px 24px -14px rgba(34, 174, 194, 0.6);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.brand-mark--logo svg { width: 26px; height: 26px; }

.brand-lockup { display: flex; align-items: center; gap: 14px; }
.brand-wordmark { display: flex; flex-direction: column; line-height: 1; }
.brand-wordmark .bw-top {
  font-size: 18px; font-weight: 800; letter-spacing: .13em; color: #dfe7f3;
}
.brand-wordmark .bw-bottom {
  font-size: 20px; font-weight: 800; letter-spacing: .09em; margin-top: 2px;
  background: linear-gradient(92deg, #e2313c, #c01c2a 60%, #8e1220);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-wordmark .bw-tag {
  font-size: 9.5px; letter-spacing: .04em; color: var(--muted); margin-top: 6px; font-weight: 500;
}

/* logo kustom hasil unggah (PNG/SVG) — jangan dipaksa masuk kotak persegi */
.brand-img { display: block; height: auto; }
.brand-img--side { max-height: 38px; max-width: 100%; object-fit: contain; }
.brand-img--login { max-width: 100%; max-height: 96px; object-fit: contain; }
.brand-lockup--img { gap: 16px; }
.logo-preview {
  display: grid; place-items: center;
  min-width: 210px; min-height: 92px; padding: 14px 18px;
  border-radius: 12px; border: 1px dashed rgba(148, 163, 184, .28);
  background: linear-gradient(140deg, #101a2b, #0c1421);
}
.logo-preview img { max-height: 74px; max-width: 260px; object-fit: contain; }

.login-card--brand { max-width: 430px; }
/* Panel logo di kartu login — latar gelap bergradasi, tidak putih. */
.login-logo {
  display: flex; justify-content: center; align-items: center;
  margin: -4px 0 24px; padding: 20px 18px;
  border-radius: 16px;
  background:
    radial-gradient(120% 140% at 12% 0%, rgba(34, 174, 194, 0.16), transparent 58%),
    radial-gradient(120% 140% at 92% 100%, rgba(226, 49, 60, 0.16), transparent 60%),
    linear-gradient(150deg, #16223a 0%, #0e1728 58%, #1a1320 100%);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 22px 48px -32px rgba(0, 0, 0, 0.95);
}

/* tautan unduh APK di halaman login */
.apk-link {
  display: flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap;
  margin-top: 18px; padding: 10px 12px; border-radius: 11px;
  font-size: 12.5px; font-weight: 600; color: var(--text-dim);
  background: rgba(34, 174, 194, .07); border: 1px dashed rgba(34, 174, 194, .28);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.apk-link:hover { color: #cdeff7; background: rgba(34, 174, 194, .13); border-color: rgba(34, 174, 194, .45); }
.apk-link .ic { color: var(--accent); }
.apk-link-sub { flex-basis: 100%; text-align: center; font-weight: 400; font-size: 10.8px; color: var(--muted); }

/* peringatan sebelum auto-logout */
.idle-warn {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 26px; z-index: 300;
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px; border-radius: 12px;
  background: #16202f; border: 1px solid rgba(251, 191, 36, .4);
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .95);
  font-size: 12.8px; color: #f7e9c3; max-width: calc(100vw - 32px);
}
.idle-warn strong { color: var(--amber); }
@media (max-width: 820px) {
  .idle-warn { bottom: 70px; flex-direction: column; align-items: stretch; text-align: center; }
  .idle-warn .btn { width: 100%; }
}

/* ============================================================
   DASHBOARD & AUTO-CONFIG — tampilan RAMPING (v1.15.0)
   Tujuan: satu layar HP cukup. Kartu besar diganti tile kecil,
   panel sekunder digabung / dilipat, tabel diganti kartu di HP.
   ============================================================ */
.dash-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dash-actions .btn { flex: 0 1 auto; }

.card.slim { padding: 15px 16px; }
.card.slim .card-h { margin-bottom: 12px; }
.card.slim .card-h h2 { font-size: 13.5px; }
.card.slim .empty { padding: 22px 10px; font-size: 12.5px; }

/* dua kolom mini di dalam satu kartu (vendor | paket) */
.mini-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mini-h {
  font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-bottom: 10px;
}
.mini-2 .bar-row { margin-bottom: 10px; gap: 4px; }
.mini-2 .bar-top { font-size: 11.5px; }
.mini-2 .bar { height: 5px; }

/* baris chip info ringkas */
.chips-row {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
}
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(148, 163, 184, .06);
  font-size: 11.5px; color: var(--text-dim); white-space: nowrap;
}
a.chip { text-decoration: none; cursor: pointer; }
a.chip:hover { border-color: rgba(139, 92, 246, .5); }
a.chip.is-on { background: rgba(139, 92, 246, .18); border-color: var(--brand2); color: var(--text); }
.chip b { color: var(--text); font-family: var(--mono); font-weight: 600; }
.chip .ic { color: var(--muted); }

/* checkbox aktif/nonaktif di kartu profil HP */
.mdev-toggle {
  flex: 0 0 auto; align-self: center;
  padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line);
  background: rgba(148, 163, 184, .06);
}

@media (max-width: 820px) {
  /* aksi cepat dashboard: 2x2 tombol besar & mudah ditekan */
  .dash-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .dash-actions .btn {
    justify-content: center; text-align: center; padding: 10px 8px;
    font-size: 11.5px; white-space: normal; line-height: 1.25;
  }
  .mini-2 { grid-template-columns: 1fr; gap: 16px; }
  .card.slim { padding: 13px 14px; }
  .card.slim .card-h p { display: none; }
  .card.tight > .card-h { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
  .card.tight > .card-h .row { width: 100%; }
  .card.tight > .card-h .row .btn { flex: 1; justify-content: center; }
  .chips-row { margin-top: 12px; padding-top: 10px; }
  .chip { font-size: 10.8px; padding: 4px 9px; }
  .list-item { padding: 9px 0; }
  .li-ic { width: 26px; height: 26px; flex: 0 0 26px; }
}

/* kartu profil auto-config di HP — 3 baris, ±110 px, tanpa grid */
.mobile-device-list.heal-list { gap: 8px; padding: 10px; }
.heal-card {
  border: 1px solid var(--line); border-radius: 12px;
  background: rgba(148, 163, 184, .045); padding: 11px 12px;
  display: flex; flex-direction: column; gap: 7px;
}
.heal-card.is-on { border-color: rgba(52, 211, 153, .26); background: rgba(52, 211, 153, .045); }
.heal-top { display: flex; align-items: center; gap: 8px; }
.heal-sn {
  flex: 1; min-width: 0; color: var(--text);
  font-family: var(--mono); font-size: 12.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.heal-top .pill { font-size: 10px; padding: 2px 8px; }
.heal-meta {
  display: flex; gap: 10px; flex-wrap: wrap;
  font-size: 11px; color: var(--muted);
}
.heal-meta b { color: var(--text-dim); font-family: var(--mono); font-weight: 600; }
.heal-actions { display: flex; align-items: center; gap: 6px; }
.heal-actions .btn { padding: 8px 11px; min-height: 34px; font-size: 11.5px; border-radius: 9px; }
.heal-actions .js-heal-run { flex: 1; justify-content: center; }
.heal-actions .mdev-toggle { padding: 7px 9px; min-height: 34px; }

/* ============================================================
   JAM LIVE + AUTO REFRESH (v1.16.0)
   Tombol kecil di topbar: jam server, indikator pembaruan otomatis,
   dan pause/resume. Titik berdenyut = pembaruan otomatis aktif.
   ============================================================ */
.live-clock {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px 5px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(148, 163, 184, .07);
  color: var(--text-dim); font: inherit; font-size: 11.5px;
  font-variant-numeric: tabular-nums; transition: .15s;
}
.live-clock:hover { background: rgba(148, 163, 184, .13); color: var(--text); }
.live-clock .live-time { font-family: var(--mono); font-weight: 600; letter-spacing: .02em; color: var(--text); }
.live-clock .live-note {
  font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--green); font-weight: 700;
}
.live-clock .live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); animation: live-pulse 2s infinite;
}
.live-clock.is-paused .live-dot { background: var(--amber); animation: none; box-shadow: none; }
.live-clock.is-paused .live-note { color: var(--amber); }
.live-clock.is-fail .live-dot { background: var(--red); animation: none; box-shadow: none; }
.live-clock.is-fail .live-note { color: var(--red); }
@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .5); }
  70% { box-shadow: 0 0 0 5px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

@media (max-width: 820px) {
  .live-clock { padding: 5px 8px; gap: 6px; font-size: 11px; }
  .live-clock .live-note { display: none; } /* di HP cukup titik + jam */
  /* …kecuali saat jeda/gagal: status itu penting dan harus kelihatan */
  .live-clock.is-paused .live-note,
  .live-clock.is-fail .live-note { display: inline; font-size: 9px; }
  .topbar-right { gap: 8px; }
}

/* ============================================================
   HALAMAN TAMBAH WAN — desain premium (v1.17.0)
   Kolom tunggal, hero perangkat, 3 seksi bernomor, action bar.
   Semua selektor di-scope ke .wanx agar halaman lain tidak terpengaruh.
   ============================================================ */
.wanx-page {
  display: flex; flex-direction: column; gap: 20px;
  max-width: 1040px; width: 100%; margin: 0 auto;
}
.wanx-page .tabs { margin-bottom: 0; }
.wanx-back { margin-bottom: 0 !important; }
.wanx { display: flex; flex-direction: column; gap: 20px; }

/* ---------- hero: identitas perangkat target ---------- */
.wanx-hero {
  position: relative; overflow: hidden;
  border-radius: 18px; padding: 22px 24px 20px;
  border: 1px solid rgba(148, 163, 184, .2);
  background:
    radial-gradient(120% 150% at 0% 0%, rgba(34, 211, 238, .14), transparent 55%),
    radial-gradient(120% 150% at 100% 0%, rgba(99, 102, 241, .16), transparent 58%),
    linear-gradient(160deg, rgba(24, 34, 54, .95), rgba(13, 19, 32, .95));
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.wanx-hero::after {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, .55), rgba(99, 102, 241, .45), transparent);
}
.wanx-hero-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.wanx-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(174, 187, 210, .85);
}
.wanx-eyebrow .ic { color: var(--accent); }
.wanx-hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .04em;
  color: #9fe9f5; background: rgba(34, 211, 238, .1);
  border: 1px solid rgba(34, 211, 238, .24);
}

/* pemilih perangkat: bidang besar, ikon di kiri, chevron di kanan */
.wanx-device { position: relative; display: flex; align-items: center; gap: 0; }
.wanx-device-ic {
  position: absolute; left: 16px; z-index: 2; pointer-events: none;
  color: var(--accent); display: grid; place-items: center;
}
.wanx-select {
  width: 100%; appearance: none; -webkit-appearance: none;
  padding: 15px 46px 15px 48px; border-radius: 14px; cursor: pointer;
  font-family: var(--font); font-size: 14.5px; font-weight: 600; color: var(--text);
  background: rgba(9, 14, 26, .72);
  border: 1px solid rgba(148, 163, 184, .26);
  transition: border-color .15s, box-shadow .15s, background .15s;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(174, 187, 210, .75) 50%),
    linear-gradient(135deg, rgba(174, 187, 210, .75) 50%, transparent 50%);
  background-position: right 22px top 50%, right 16px top 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.wanx-select:hover { border-color: rgba(34, 211, 238, .38); background-color: rgba(12, 20, 34, .9); }
.wanx-select:focus {
  outline: none; border-color: rgba(34, 211, 238, .7);
  box-shadow: 0 0 0 4px rgba(34, 211, 238, .13);
}

.wanx-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.wanx-chips .chip {
  background: rgba(148, 163, 184, .09);
  border-color: rgba(148, 163, 184, .2);
  font-size: 11.5px;
}
.wanx-hint { margin-top: 12px; }

/* ---------- badan form: satu kartu, tiga seksi bernomor ---------- */
.wanx-body {
  border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(23, 32, 51, .82), rgba(15, 22, 37, .82));
  box-shadow: var(--shadow); backdrop-filter: blur(16px);
}
.wan-sec { padding: 22px 24px; border-bottom: 1px solid var(--line); }
.wan-sec:last-child { border-bottom: 0; }
.wan-sec-h { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 16px; }
.wan-step {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 9px;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 12.5px; font-weight: 700;
  color: #0a1622; background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 20px -12px rgba(34, 211, 238, .95);
}
.wan-sec-h h3 { font-size: 14.5px; letter-spacing: -.01em; }
.wan-sec-h p { color: var(--muted); font-size: 12px; margin-top: 2px; }

/* input lebih lega di halaman ini saja */
.wanx .field { margin-bottom: 16px; }
.wanx .field:last-child { margin-bottom: 0; }
.wanx .lbl {
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-bottom: 7px; display: block;
}
.wanx input[type=text], .wanx input[type=number], .wanx input[type=password],
.wanx select:not(.wanx-select), .wanx textarea {
  width: 100%; padding: 11px 13px; border-radius: 11px;
  background: rgba(9, 14, 26, .6); color: var(--text);
  border: 1px solid rgba(148, 163, 184, .22);
  font-family: var(--font); font-size: 13.5px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.wanx input[type=text]:focus, .wanx input[type=number]:focus,
.wanx select:not(.wanx-select):focus, .wanx textarea:focus {
  outline: none; border-color: rgba(34, 211, 238, .6);
  background: rgba(10, 17, 29, .85);
  box-shadow: 0 0 0 4px rgba(34, 211, 238, .1);
}

/* ---------- seg tipe layanan: kartu ikon + judul + keterangan ---------- */
.seg--cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.seg--cards label { min-width: 0; }
.seg--cards .opt {
  flex-direction: column; align-items: flex-start; gap: 5px;
  padding: 14px 14px 13px; border-radius: 13px; text-align: left;
  min-height: 88px; justify-content: center;
}
.seg--cards .opt .ic { color: var(--text-dim); transition: color .15s; }
.seg--cards .opt strong { font-size: 13px; font-weight: 650; color: var(--text); letter-spacing: -.01em; }
.seg--cards .opt small { font-size: 10.5px; color: var(--muted); line-height: 1.35; font-weight: 500; }
.seg--cards input:checked + .opt {
  border-color: rgba(34, 211, 238, .62);
  background: linear-gradient(150deg, rgba(34, 211, 238, .16), rgba(99, 102, 241, .13));
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .22), 0 16px 34px -26px rgba(34, 211, 238, .9);
}
.seg--cards input:checked + .opt .ic { color: var(--accent); }
.seg--cards input:checked + .opt small { color: #bfeaf5; }

/* ---------- saklar NAT ---------- */
.wan-switch {
  margin-top: 16px; padding: 14px 16px; border-radius: 13px;
  border: 1px solid rgba(148, 163, 184, .2);
  background: rgba(148, 163, 184, .05);
  transition: border-color .15s, background .15s;
}
.wan-switch:has(input:checked) {
  border-color: rgba(52, 211, 153, .3); background: rgba(52, 211, 153, .06);
}
.wan-switch-main { display: flex; align-items: flex-start; gap: 13px; cursor: pointer; }
.wan-switch-main input { position: absolute; opacity: 0; width: 0; height: 0; }
.wan-switch-ui {
  position: relative; flex: 0 0 42px; width: 42px; height: 24px; margin-top: 1px;
  border-radius: 999px; background: rgba(148, 163, 184, .28);
  transition: background .18s; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
}
.wan-switch-ui::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #e9eef8; box-shadow: 0 2px 5px rgba(0, 0, 0, .45);
  transition: transform .18s ease;
}
.wan-switch-main input:checked + .wan-switch-ui {
  background: linear-gradient(135deg, var(--green), #10b981);
}
.wan-switch-main input:checked + .wan-switch-ui::after { transform: translateX(18px); }
.wan-switch-main input:focus-visible + .wan-switch-ui { box-shadow: 0 0 0 3px rgba(52, 211, 153, .28); }
.wan-switch-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wan-switch-text strong { font-size: 13px; font-weight: 600; }
.wan-switch-text small { color: var(--muted); font-size: 11.5px; line-height: 1.45; }

/* pengaturan lanjutan di dalam seksi */
.wanx details.adv { margin: 0; background: rgba(148, 163, 184, .04); }

/* ---------- action bar ---------- */
.wanx-actions {
  position: sticky; bottom: 12px; z-index: 15;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, .22);
  background: rgba(14, 21, 35, .92);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 26px 50px -30px rgba(0, 0, 0, .98);
}
.wanx-submit {
  padding: 12px 22px; font-size: 13.5px; border-radius: 11px; font-weight: 650;
}
.wanx-reset { border-radius: 11px; padding: 12px 18px; }
.wanx-actions-note {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto; font-size: 11px; color: var(--muted); max-width: 340px;
}
.wanx-actions-note .ic { color: var(--amber); flex: 0 0 auto; }

@media (max-width: 900px) {
  .seg--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wanx-hero { padding: 18px 16px 16px; border-radius: 16px; }
  .wan-sec { padding: 18px 16px; }
  .wanx-body { border-radius: 16px; }
}
@media (max-width: 560px) {
  .seg--cards .opt { min-height: 82px; padding: 12px 12px; }
  .wanx-select { font-size: 13.5px; padding: 13px 40px 13px 44px; }
  .wanx-actions { bottom: 8px; gap: 9px; }
  .wanx-submit { flex: 1; justify-content: center; }
  .wanx-reset { flex: 0 0 auto; }
  .wanx-actions-note { display: none; }
}

/* ---------- modal review task (ringkasan, bukan dump JSON) ---------- */
.rv { display: flex; flex-direction: column; gap: 14px; }
.rv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rv-item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 11px 13px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(148, 163, 184, .05);
}
.rv-k { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.rv-v { font-size: 13.5px; font-weight: 600; color: var(--text); word-break: break-word; }
.rv-s { font-size: 10.8px; color: var(--muted); }
.rv-json { border: 1px solid var(--line); border-radius: 12px; background: rgba(148, 163, 184, .035); }
.rv-json > summary {
  padding: 10px 13px; cursor: pointer; font-size: 11.5px; color: var(--text-dim);
  list-style: none; user-select: none;
}
.rv-json > summary::-webkit-details-marker { display: none; }
.rv-json > summary:hover { color: var(--text); }
.rv-json[open] > summary { border-bottom: 1px solid var(--line); }
.rv-json .code { margin: 0; border-radius: 0 0 12px 12px; max-height: 300px; }
@media (max-width: 560px) {
  .rv-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   DHCP OPTION 43 — generator auto-provisioning TR-069 (v1.22.0)
   ============================================================ */
.d43 { display: flex; flex-direction: column; gap: 16px; max-width: 980px; width: 100%; margin: 0 auto; }
.d43-head {
  display: flex; align-items: center; gap: 15px;
  padding: 18px 20px; border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, .2);
  background:
    radial-gradient(120% 150% at 0% 0%, rgba(34, 211, 238, .12), transparent 55%),
    radial-gradient(120% 150% at 100% 0%, rgba(99, 102, 241, .14), transparent 58%),
    linear-gradient(160deg, rgba(24, 34, 54, .95), rgba(13, 19, 32, .95));
  box-shadow: 0 26px 54px -34px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.d43-head-ic {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center; color: #0a1622;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 12px 26px -14px rgba(34, 211, 238, .9);
}
.d43-head h2 { font-size: 16.5px; letter-spacing: -.01em; }
.d43-head p { color: var(--muted); font-size: 12px; margin-top: 3px; line-height: 1.5; }
.d43-head p b { color: var(--text-dim); }

.d43-warn {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 15px; border-radius: 12px; font-size: 12px; line-height: 1.55;
  color: #f2e3bf; background: rgba(251, 191, 36, .07);
  border: 1px solid rgba(251, 191, 36, .24);
}
.d43-warn .ic { color: var(--amber); flex: 0 0 auto; margin-top: 1px; }

.d43-tabs { margin-bottom: 0; }
.d43-tabs .tab { cursor: pointer; background: none; border: 0; font: inherit; }

.d43-panel { display: flex; flex-direction: column; gap: 14px; }
.d43-form {
  padding: 18px 20px; border-radius: 16px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(23, 32, 51, .82), rgba(15, 22, 37, .82));
  box-shadow: var(--shadow); backdrop-filter: blur(16px);
}
.d43-form .field { margin-bottom: 14px; }
.d43-form .lbl {
  display: block; margin-bottom: 7px;
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.d43-form input, .d43-form select, .d43-panel textarea {
  width: 100%; padding: 10px 13px; border-radius: 11px;
  background: rgba(9, 14, 26, .6); color: var(--text);
  border: 1px solid rgba(148, 163, 184, .22);
  font-family: var(--font); font-size: 13.5px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.d43-form input:focus, .d43-form select:focus, .d43-panel textarea:focus {
  outline: none; border-color: rgba(34, 211, 238, .6);
  background: rgba(10, 17, 29, .85); box-shadow: 0 0 0 4px rgba(34, 211, 238, .1);
}
.d43-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 4px; }

.d43-warns { display: flex; flex-direction: column; gap: 8px; }
.d43-warns .d43-warn { font-size: 11.5px; }

.d43-out {
  border-radius: 13px; overflow: hidden;
  border: 1px solid var(--line); background: rgba(148, 163, 184, .045);
}
.d43-out-h {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border-bottom: 1px solid var(--line);
  background: rgba(148, 163, 184, .05);
}
.d43-out-t {
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.d43-out-t small { text-transform: none; letter-spacing: 0; margin-left: 6px; font-weight: 500; }
.d43-val { padding: 12px 13px; font-size: 12.5px; word-break: break-all; }
.d43-val.d43-break { font-size: 11.5px; line-height: 1.65; }
.d43-script {
  margin: 0; padding: 13px; border-radius: 0; border: 0;
  font-size: 11.5px; line-height: 1.65; max-height: 260px; overflow: auto;
  background: transparent;
}
.d43-copy { flex: 0 0 auto; }

.d43-help {
  padding: 14px 16px; border-radius: 13px; font-size: 12px; line-height: 1.6;
  border: 1px solid rgba(34, 211, 238, .2); background: rgba(34, 211, 238, .055);
  color: #d3ecf7;
}
.d43-help-h {
  display: flex; align-items: center; gap: 7px;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: var(--accent); margin-bottom: 8px;
}
.d43-help ol { margin: 0; padding-left: 18px; }
.d43-help li { margin-bottom: 4px; }
.d43-help-note { margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(34, 211, 238, .18); color: var(--muted); }

.d43-dec-out { display: flex; flex-direction: column; gap: 12px; }
.d43-kv { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 6px 14px; padding: 12px 13px; }
.d43-kv dt { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.d43-kv dd { margin: 0; font-size: 12.5px; word-break: break-all; }
.d43-sub-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.d43-sub-table th {
  text-align: left; font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); padding: 8px 12px; border-bottom: 1px solid var(--line);
}
.d43-sub-table td { padding: 9px 12px; border-bottom: 1px solid rgba(148, 163, 184, .07); word-break: break-all; }
.d43-sub-table tr:last-child td { border-bottom: 0; }

@media (max-width: 820px) {
  .d43-head { padding: 15px 16px; gap: 12px; }
  .d43-head h2 { font-size: 15px; }
  .d43-head-ic { flex-basis: 38px; width: 38px; height: 38px; border-radius: 11px; }
  .d43-form { padding: 14px 14px; }
  .d43-actions .btn { flex: 1; justify-content: center; }
  .d43-kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .d43-kv dd { margin-bottom: 8px; }
  .d43-tabs { overflow-x: auto; }
}

/* catatan sumber IP ACS di halaman DHCP 43 */
.d43-src {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 9px 12px; border-radius: 10px; font-size: 11.5px; line-height: 1.5;
  color: #cdeff7; background: rgba(34, 211, 238, .06);
  border: 1px solid rgba(34, 211, 238, .2);
}
.d43-src .ic { color: var(--accent); flex: 0 0 auto; margin-top: 1px; }
.d43-src.is-warn { color: #f2e3bf; background: rgba(251, 191, 36, .07); border-color: rgba(251, 191, 36, .24); }
.d43-src.is-warn .ic { color: var(--amber); }
.d43-src a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }




/* daftar percobaan perintah saat inventaris gagal */

/* kotak saran preset saat inventaris gagal */

/* sorotan pada saklar yang perlu dicentang saat izin tulis dimatikan */
.wan-switch.is-attention {
  border-color: rgba(251, 191, 36, .65) !important;
  background: rgba(251, 191, 36, .1) !important;
  animation: attn-pulse 1.3s ease-in-out 2;
}
@keyframes attn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251, 191, 36, 0); }
  50% { box-shadow: 0 0 0 4px rgba(251, 191, 36, .22); }
}

/* banner izin tulis dengan tombol aksi */
.d43-warn.is-action { align-items: center; border-color: rgba(251, 191, 36, .4); }
@media (max-width: 820px) {
  .d43-warn.is-action { flex-wrap: wrap; }
  .d43-warn.is-action .btn { width: 100%; justify-content: center; margin-top: 4px; }
}

/* ============================================================
   HASIL KIRIM WAN — indikator proses & hasil (v1.29.0)
   Menggantikan redirect ke halaman Tasks setelah tambah WAN.
   ============================================================ */
.wr-load {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 16px; border-radius: 13px;
  border: 1px solid var(--line); background: rgba(148, 163, 184, .05);
}
.wr-spin {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid rgba(34, 211, 238, .22);
  border-top-color: var(--accent);
  animation: wr-rot .8s linear infinite;
}
@keyframes wr-rot { to { transform: rotate(360deg); } }
.wr-load-txt strong { font-size: 13px; display: block; }
.wr-load-txt .small { margin-top: 3px; font-family: var(--mono); }

.wr-result {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 16px; border-radius: 13px; border: 1px solid var(--line);
  background: rgba(148, 163, 184, .05);
}
.wr-result .wr-ic {
  flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 16px; font-weight: 700; line-height: 1;
}
.wr-result.is-ok { border-color: rgba(52, 211, 153, .34); background: rgba(52, 211, 153, .07); }
.wr-result.is-ok .wr-ic { color: #06251b; background: linear-gradient(135deg, var(--green), #10b981); }
.wr-result.is-err { border-color: rgba(248, 113, 113, .36); background: rgba(248, 113, 113, .07); }
.wr-result.is-err .wr-ic { color: #2a0b0b; background: linear-gradient(135deg, #f87171, #ef4444); }
.wr-result.is-wait { border-color: rgba(251, 191, 36, .34); background: rgba(251, 191, 36, .07); }
.wr-result.is-wait .wr-ic { color: #2a1e05; background: linear-gradient(135deg, var(--amber), #f59e0b); }
.wr-result-txt { min-width: 0; font-size: 12.5px; line-height: 1.55; }
.wr-result-txt strong { font-size: 13px; }

@media (max-width: 560px) {
  .wr-load { padding: 14px 12px; gap: 11px; }
  .wr-result { padding: 13px 12px; gap: 10px; }
  .wr-result .wr-ic { flex-basis: 26px; width: 26px; height: 26px; font-size: 14px; }
}

/* ============================================================
   DETAIL ONU — versi RAMPING (v1.30.0)
   Kartu metrik setinggi ±56 px (dulu ±90), info grid lebih padat,
   kartu "Akun PPPoE" dihapus (pengelolaan PPPoE ada di menunya sendiri).
   ============================================================ */
.onu-metrics--flat { gap: 12px; margin-bottom: 16px; }
.onu-metrics--flat .onu-metric {
  flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 8px 13px; text-align: left;
}
.onu-metric-head { display: inline-flex; align-items: center; gap: 6px; }
.onu-metrics--flat .onu-metric-label { font-size: 9.5px; letter-spacing: .07em; }
.onu-metrics--flat .onu-metric-value { font-size: 18px; line-height: 1.15; }
.onu-metrics--flat .onu-metric-value small { font-size: 11px; }

.onu-card { padding: 16px 18px 16px; }
.onu-info { gap: 6px 24px; padding-top: 12px; }
.onu-col { gap: 6px; }
.onu-kv { font-size: 12px; }

@media (max-width: 560px) {
  .onu-metrics--flat { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .onu-metrics--flat .onu-metric { padding: 9px 11px; }
  .onu-metrics--flat .onu-metric-value { font-size: 16px; }
}

/* ============================================================
   DASHBOARD: tile ringkasan bisa diklik + tab ONU bergaya pill
   ============================================================ */
.onu-sum.is-link {
  position: relative; text-decoration: none; color: inherit;
  transition: border-color .15s, transform .15s, box-shadow .15s, background .15s;
  cursor: pointer;
}
.onu-sum.is-link:hover {
  border-color: rgba(34, 211, 238, .45);
  background: rgba(34, 211, 238, .06);
  transform: translateY(-1px);
  box-shadow: 0 18px 34px -26px rgba(34, 211, 238, .8);
}
.onu-sum.is-link:focus-visible {
  outline: none; border-color: rgba(34, 211, 238, .7);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .18);
}
.onu-sum-go {
  position: absolute; right: 10px; bottom: 10px;
  display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  color: var(--muted); background: rgba(148, 163, 184, .12);
  opacity: 0; transform: translateX(-3px);
  transition: opacity .15s, transform .15s, color .15s, background .15s;
}
.onu-sum.is-link:hover .onu-sum-go { opacity: 1; transform: translateX(0); color: #06232b; background: var(--accent); }
.onu-sum.is-link .onu-sum-ic { transition: color .15s; }
.onu-sum.is-link:hover .onu-sum-ic { color: var(--accent); }

/* ---- tab ONU: pill dengan ikon + angka ---- */
.onu-tabs {
  padding: 12px 16px 0; margin-bottom: 0; gap: 8px;
  border-bottom: 1px solid var(--line);
}
.onu-tabs .tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px 9px; font-size: 12.5px; font-weight: 600;
  letter-spacing: .01em; text-transform: none;
  border: 1px solid transparent; border-bottom: 2px solid transparent;
  border-radius: 10px 10px 0 0; color: var(--muted);
  transition: color .15s, background .15s, border-color .15s;
}
.onu-tabs .tab .ic { opacity: .8; }
.onu-tabs .tab:hover { color: var(--text); background: rgba(148, 163, 184, .07); }
.onu-tabs .tab.active {
  color: #eafcff; border-bottom-color: transparent;
  background: linear-gradient(180deg, rgba(34, 211, 238, .16), rgba(34, 211, 238, .04));
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .28), 0 6px 18px -14px rgba(34, 211, 238, .9);
}
.onu-tabs .tab.active .ic { opacity: 1; color: var(--accent); }
.tab-n {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 999px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  color: var(--muted); background: rgba(148, 163, 184, .16);
}
.onu-tabs .tab.active .tab-n { color: #06232b; background: var(--accent); }

@media (max-width: 820px) {
  .onu-tabs { padding: 10px 10px 0; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .onu-tabs .tab { padding: 7px 10px 8px; font-size: 11.5px; white-space: nowrap; }
  .tab-n { min-width: 16px; height: 16px; font-size: 10px; }
}
@media (max-width: 560px) {
  .onu-tabs .tab span:not(.tab-n) { display: inline; }
}

/* ============================================================
   Kolom USER (dari TR-069) & ACTIVE di daftar device
   ============================================================ */
.user-cell { display: inline-block; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.user-cell.is-synced { color: var(--text-dim); }
.active-n {
  display: inline-grid; place-items: center; min-width: 20px; height: 19px;
  padding: 0 6px; border-radius: 999px;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: #06251b; background: linear-gradient(135deg, var(--green), #10b981);
}
.active-n.is-zero { color: var(--muted); background: rgba(148, 163, 184, .14); font-weight: 600; }
.mdev-user { color: var(--muted); font-size: 11.5px; }
.mdev-active { margin-left: auto; }
.mdev-active .active-n { height: 17px; min-width: 17px; font-size: 10px; }

/* ============================================================
   CETAK LABEL — pemilih jenis, antrean, pratinjau ukuran asli
   ============================================================ */
.print-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.strip-spacer { flex: 1; }

/* kartu pilihan jenis label */
.ptypes { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ptype { position: relative; cursor: pointer; }
.ptype input { position: absolute; opacity: 0; pointer-events: none; }
.ptype-in {
  display: block; height: 100%; padding: 12px 13px;
  border-radius: 12px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, .03);
  transition: border-color .15s, background .15s, box-shadow .15s;
  min-width: 0;
}
.ptype-in strong { display: block; font-size: 12.5px; line-height: 1.3; }
.ptype-in small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.ptype-paper {
  display: inline-block; margin-top: 8px; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-family: var(--mono); color: var(--text-dim);
  background: rgba(148, 163, 184, .13);
}
.ptype:hover .ptype-in { border-color: rgba(139, 92, 246, .45); }
.ptype.is-on .ptype-in {
  border-color: var(--brand2); background: rgba(139, 92, 246, .13);
  box-shadow: 0 0 0 1px rgba(139, 92, 246, .35) inset;
}
.ptype input:focus-visible + .ptype-in { outline: 2px solid var(--brand2); outline-offset: 2px; }

/* opsi centang */
.pt-opt { display: grid; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.pt-opt .check { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); }

/* antrean label */
.pt-queue { display: grid; gap: 10px; max-height: 460px; overflow: auto; padding-right: 2px; }
.pl-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr) 30px;
  gap: 12px; align-items: center;
  padding: 10px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .025);
}
/* ukuran .pl-view ditentukan JS (hasil skala pratinjau) — jangan diberi
   max-width, karena transform scale pada .pl-paper akan terpotong */
.pl-view { display: flex; align-items: flex-start; overflow: hidden; border-radius: 4px; justify-content: center; }
.pl-meta { min-width: 0; }
.pl-meta strong { display: block; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-meta small { color: var(--muted); font-size: 11px; font-family: var(--mono); }

/* pratinjau = ukuran kertas asli (mm → px), latar putih seperti kertas */
.pl-paper {
  background: #fff; color: #111; box-sizing: border-box;
  padding: 6px 7px; overflow: hidden; box-shadow: 0 1px 0 rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .35);
  display: flex; flex-direction: column; gap: 1px;
}
.pl-title { font-weight: 800; font-size: 11px; line-height: 1.15; letter-spacing: -.1px; }
.pl-line { font-size: 9px; line-height: 1.25; }
.pl-line.pl-sm { font-size: 7.5px; color: #333; }
.pl-line.pl-lg { font-size: 12px; font-weight: 700; }
.pl-code { margin-top: auto; font-family: var(--mono); font-size: 7px; letter-spacing: .2px; color: #222; }

/* aksi cetak */
.pt-send { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.pt-actions { flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pt-actions .btn { min-height: 38px; }

@media (max-width: 1100px) {
  .print-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .ptypes { grid-template-columns: minmax(0, 1fr); }
  .pt-queue { max-height: none; }
}
@media (max-width: 560px) {
  .status-strip { flex-wrap: wrap; row-gap: 6px; }
  .strip-spacer { display: none; }
  /* pratinjau label mendapat satu baris penuh supaya tidak terpotong */
  .pl-item { grid-template-columns: minmax(0, 1fr) 30px; }
  .pl-view { grid-column: 1 / -1; }
  .pt-actions .btn { min-height: 44px; flex: 1 1 100%; justify-content: center; }
  .pl-item { gap: 8px; }
}

/* ============================================================
   AKSES PENGGUNA — pilih server GenieACS & router MikroTik
   ============================================================ */
.acc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.acc-col {
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
  padding: 12px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .02);
}
.acc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.acc-head strong { display: block; font-size: 12.5px; }
.acc-head small { display: block; color: var(--muted); font-size: 11px; }
.acc-head .btn { flex: 0 0 auto; }
.acc-list { display: grid; gap: 8px; max-height: 46vh; overflow: auto; padding-right: 2px; }
.acc-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .03);
  cursor: pointer; min-width: 0;
}
.acc-item:hover { border-color: rgba(139, 92, 246, .45); }
/* checkbox WAJIB diberi ukuran eksplisit: `input, select, textarea` global
   memakai width:100% sehingga checkbox melar 345px dan teksnya terhimpit ke 0. */
.acc-item input { width: 16px; height: 16px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--accent); }
/* flex:1 1 auto WAJIB — tanpa ini teks terhimpit sampai 0px dan terbaca satu
   huruf per baris (bug nyata di modal Akses Pengguna). */
.acc-txt { flex: 1 1 auto; min-width: 0; }
.acc-item strong { display: block; font-size: 12.5px; line-height: 1.35; word-break: break-word; }
.acc-item small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; word-break: break-all; }
.acc-item:has(input:checked) { border-color: var(--brand2); background: rgba(139, 92, 246, .12); }
.acc-empty { padding: 14px; border-radius: 10px; border: 1px dashed var(--line); color: var(--muted); font-size: 11.5px; text-align: center; }
@media (max-width: 760px) {
  .acc-grid { grid-template-columns: minmax(0, 1fr); }
  .acc-list { max-height: none; }
}

/* ---------- halaman Pengguna (kartu HP + tabel desktop) ---------- */
/* .u-cards hanya flex di layar kecil; di desktop .only-mobile yang menyembunyikan.
   Jangan menaruh display di markup (inline style mengalahkan .only-mobile). */
.u-cards { flex-direction: column; gap: 12px; padding: 12px; }
@media (max-width: 820px) { .u-cards { display: flex; } }
.u-card { gap: 6px; }
.u-access { margin: 2px 0 4px; }
.u-access .chips-row { margin: 0; }

/* ringkasan akses pengguna (badge yang bisa diklik) */
.acc-sum {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; max-width: 100%;
  font-size: 11px; font-weight: 600; letter-spacing: .2px;
  color: var(--text-dim); background: rgba(148, 163, 184, .13);
  border: 1px solid var(--line); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acc-sum .ic { color: var(--muted); flex: 0 0 auto; }
button.acc-sum:hover { border-color: rgba(139, 92, 246, .5); color: var(--text); }

/* ============================================================
   BILLING ISP — komponen tambahan
   (memakai variabel & tombol dasar tema gelap portal ACS di atas)
   ============================================================ */

/* ---------- form ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.form-grid .span2 { grid-column: 1 / -1; }
.fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fld > span { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.fld > span small { text-transform: none; letter-spacing: 0; color: var(--text-dim); }
.fld input, .fld select, .fld textarea { width: 100%; }
/* checkbox di dalam .fld JANGAN ikut melebar (aturan `input{width:100%}` di atas) —
   tanpa ini kotak centang memenuhi baris dan teksnya terdorong ke luar. */
.fld .check { display: flex; align-items: center; gap: 9px; }
.fld .check input { width: 16px; height: 16px; flex: 0 0 auto; }
.fld .check span { flex: 1 1 auto; min-width: 0; font-size: 12.5px; }
.form-foot { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 4px; }
/* checkbox: WAJIB diberi ukuran eksplisit — aturan global `input {width:100%}` membuatnya melar */
.check { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--text-dim); cursor: pointer; }
.check input { width: 16px; height: 16px; flex: 0 0 16px; margin: 1px 0 0; accent-color: #22d3ee; }
.check span { flex: 1 1 auto; min-width: 0; }

/* ---------- toolbar ---------- */
.toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.filters .grow { flex: 1 1 220px; min-width: 160px; }

/* ---------- tombol varian billing ---------- */
.btn.primary, .btn.primary:hover { background: linear-gradient(135deg, #22d3ee, #6366f1); color: #05121d; border-color: transparent; font-weight: 650; }
.btn.ghost { background: transparent; border-color: var(--line-strong); color: var(--text-dim); }
.btn.ghost:hover { background: rgba(148, 163, 184, 0.10); color: var(--text); }
.btn.danger { color: #ffd9d9; background: rgba(248, 113, 113, 0.14); border-color: rgba(248, 113, 113, 0.32); }
.btn.danger:hover { background: rgba(248, 113, 113, 0.22); }
.btn.xs { padding: 5px 10px; font-size: 11.5px; border-radius: 8px; }
.btn.sm { padding: 6px 11px; font-size: 12px; border-radius: 9px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------- kartu ---------- */
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card-head h3 { font-size: 14.5px; }
.card-head p { color: var(--muted); font-size: 12px; margin-top: 2px; }
.card-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.card-body.tight { padding: 0; }
.card.tight > .card-head { padding: 14px 16px; margin-bottom: 0; border-bottom: 1px solid var(--line); }
.card.tight > .card-body { padding: 0; }
.card.tight table.tbl th { background: rgba(148, 163, 184, 0.05); }

/* ---------- tile ringkasan ---------- */
.btiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.btile {
  position: relative; display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--panel); backdrop-filter: blur(14px); box-shadow: var(--shadow);
}
.btile.is-link:hover, a.btile:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.bt-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; flex: 0 0 38px; background: rgba(148,163,184,.10); color: var(--text-dim); }
.bt-ic.cyan { color: #22d3ee; background: rgba(34,211,238,.12); }
.bt-ic.green { color: #34d399; background: rgba(52,211,153,.12); }
.bt-ic.amber { color: #fbbf24; background: rgba(251,191,36,.12); }
.bt-ic.red { color: #f87171; background: rgba(248,113,113,.12); }
.bt-txt { display: flex; flex-direction: column; min-width: 0; }
.bt-txt small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.bt-txt strong { font-size: 17px; font-family: var(--mono); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-txt em { font-style: normal; font-size: 11.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bt-go { margin-left: auto; color: var(--muted); }

/* ---------- status pill billing ---------- */
.st { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 550; border: 1px solid transparent; white-space: nowrap; }
.st-ok { color: #a7f3d0; background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.28); }
.st-warn { color: #fde68a; background: rgba(251,191,36,.12); border-color: rgba(251,191,36,.28); }
.st-err { color: #fecaca; background: rgba(248,113,113,.12); border-color: rgba(248,113,113,.28); }
.st-muted { color: var(--text-dim); background: rgba(148,163,184,.10); border-color: var(--line-strong); }
.chip-ok { display: inline-flex; padding: 1px 8px; border-radius: 999px; font-size: 11px; color: #a7f3d0; background: rgba(52,211,153,.12); }

/* ---------- tabel ---------- */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ta-r { text-align: right; }
.cell-strong { font-weight: 600; color: var(--text); }
.cell-strong:hover { color: #22d3ee; }
.cell-sub { font-size: 11.5px; color: var(--muted); }
td.num, th.num { text-align: right; font-family: var(--mono); }

/* ---------- daftar ringkas ---------- */
.mini-list { display: flex; flex-direction: column; }
.mini-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line); }
.mini-row:last-child { border-bottom: 0; }
.mini-main { display: flex; flex-direction: column; min-width: 0; }
.mini-main strong { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-main small { color: var(--muted); font-size: 11.5px; }
.mini-side { text-align: right; flex: 0 0 auto; }
.mini-side strong { font-size: 13px; font-family: var(--mono); }
.mini-side small { display: block; color: var(--muted); font-size: 11px; }

/* ---------- kv (label + nilai) ---------- */
.kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
.kv > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kv span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.kv strong { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.kv strong.ok { color: var(--green); }
.kv strong.warn { color: var(--amber); }
.kv strong.err { color: var(--red); }
.kv small { color: var(--text-dim); font-size: 11.5px; overflow-wrap: anywhere; }
.kv-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kv .span3 { grid-column: 1 / -1; }

/* ---------- kartu pelanggan (mobile) ---------- */
.m-cards { flex-direction: column; gap: 10px; padding: 12px; }
.m-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: rgba(148,163,184,.04); }
.m-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.m-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.m-grid > div { display: flex; flex-direction: column; min-width: 0; }
.m-grid small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.m-grid strong { font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.m-actions { display: flex; gap: 8px; margin-top: 10px; }

/* ---------- rincian tagihan ---------- */
.inv-lines { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; }
.inv-line { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.inv-line strong { font-family: var(--mono); }
.inv-line.total { border-bottom: 0; margin-top: 6px; font-size: 15px; }
.inv-line.total strong { font-size: 17px; }
.inv-line.due { border-bottom: 0; color: #fca5a5; }

/* ---------- kotak peringatan ---------- */
.alert-box { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: 14px; margin-bottom: 18px; border: 1px solid var(--line-strong); background: rgba(148,163,184,.06); }
.alert-box.is-off { border-color: rgba(52,211,153,.28); background: rgba(52,211,153,.07); }
.alert-box.is-on { border-color: rgba(251,191,36,.32); background: rgba(251,191,36,.08); }
.alert-box strong { font-size: 14px; }
.alert-box p { color: var(--text-dim); font-size: 12.5px; margin-top: 4px; }
.ab-ic { color: var(--amber); flex: 0 0 auto; }
.alert-box.is-off .ab-ic { color: var(--green); }

/* ---------- pilihan massal ---------- */
.pick-list { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow: auto; margin: 14px 0; padding-right: 4px; }
.pick { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.pick:hover { border-color: var(--line-strong); background: rgba(148,163,184,.05); }
.pick input { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; accent-color: #22d3ee; }
.pick span { display: flex; flex-direction: column; min-width: 0; }
.pick strong { font-size: 12.5px; }
.pick small { color: var(--muted); font-size: 11.5px; }

.steps { margin: 0 0 10px; padding-left: 18px; color: var(--text-dim); font-size: 12.5px; display: flex; flex-direction: column; gap: 5px; }
.steps code, .kv code { font-family: var(--mono); font-size: 11.5px; background: rgba(148,163,184,.10); padding: 1px 5px; border-radius: 5px; }
.row-gap { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }

/* ---------- grafik dashboard ---------- */
.bchart { display: block; margin-bottom: 6px; }
.legend { display: flex; gap: 16px; font-size: 11.5px; color: var(--muted); }
.lg-lg { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; }
.lg-lg.grey { background: rgba(148,163,184,.45); }
.lg-lg.cyan { background: linear-gradient(180deg, #22d3ee, #6366f1); }

/* ---------- modal billing (wrapper + box) ---------- */
.modal[hidden] { display: none !important; }
.modal {
  position: fixed; inset: 0; z-index: 80; width: auto; max-width: none;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 34px 16px; overflow: auto; background: rgba(3, 7, 15, 0.74);
  border: 0; border-radius: 0; box-shadow: none; backdrop-filter: blur(3px); animation: none;
}
.modal-box { width: 100%; max-width: 660px; background: linear-gradient(180deg, #131c2e, #0e1626);
  border: 1px solid var(--line-strong); border-radius: 16px; padding: 22px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.95); animation: pop 0.16s ease-out; }
.modal-box.wide { max-width: 900px; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.modal-head h3 { font-size: 16px; }
.modal-body { font-size: 13px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }

/* ---------- notifikasi ---------- */
.toast-wrap { position: fixed; right: 16px; bottom: 16px; z-index: 120; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.toast { display: flex; gap: 9px; align-items: flex-start; padding: 11px 14px; border-radius: 11px;
  background: #101a2b; border: 1px solid var(--line-strong); box-shadow: var(--shadow); font-size: 12.5px; animation: pop .16s ease-out; }

/* ---------- mobile ---------- */
@media (max-width: 900px) {
  .btiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bt-txt em { display: none; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .form-grid .span2 { grid-column: auto; }
  .kv, .kv-3 { grid-template-columns: minmax(0, 1fr); }
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar-actions .btn { flex: 1 1 auto; justify-content: center; }
  .filters { flex-direction: column; align-items: stretch; }
  .filters select, .filters input { width: 100%; min-width: 0; }
  .modal { padding: 12px; }
  .modal-box { padding: 16px; }
  .only-desktop { display: none !important; }
  .only-mobile { display: block; }
  .m-cards { padding: 10px; }
}
@media (max-width: 560px) {
  /* tetap 2 kolom di HP: 4 tile menumpuk 1 kolom membuat dashboard terlalu panjang */
  .btiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .btile { padding: 11px 12px; gap: 9px; }
  .bt-ic { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; }
  .bt-txt strong { font-size: 14.5px; }
  .bt-txt small { font-size: 9.5px; }
  .bt-go { display: none; }
}

/* ---------- blok unggah snapshot DB portal (Settings) ---------- */
.acs-upload { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line-strong); display: flex; flex-direction: column; gap: 12px; }
.acs-upload input[type=file] { font-size: 12px; color: var(--text-dim); background: transparent; border: 0; padding: 0; }
.acs-upload input[type=file]::file-selector-button { font: inherit; font-size: 12px; margin-right: 10px; padding: 7px 12px; border-radius: 9px; border: 1px solid var(--line-strong); background: rgba(148,163,184,.10); color: var(--text); cursor: pointer; }

/* baris Auth-Type := Reject (pelanggan terisolir) di tabel radcheck */
table.tbl tr.row-reject td { background: rgba(248, 113, 113, 0.07); }

/* =============================================================
   PANTAU JARINGAN (peta) + SERVER MIKROTIK/GENIEACS  (v1.2.0)
   ============================================================= */

.ok-txt { color: #4ade80; font-weight: 600; }
.err-txt { color: #f87171; font-weight: 600; }
.muted-txt { color: var(--text-dim); }

.net-strip {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 18px;
  border: 1px solid var(--line); border-radius: 14px;
  background: rgba(148, 163, 184, 0.06);
}
.net-strip .strip-txt { font-size: 12.5px; color: var(--text-dim); }
.net-strip .strip-txt strong { color: var(--text); }
.net-strip .strip-warn { font-size: 12px; color: var(--text-dim); margin-left: auto; }
.net-strip .strip-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pill-err { background: rgba(248, 113, 113, .14); border-color: rgba(248, 113, 113, .4); color: #fca5a5; }
.pill-err .dot { background: #f87171; }

.map-card { padding: 0; overflow: hidden; }
.map-card .card-body { padding: 0; }
.map-toolbar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 12px 14px; border-bottom: 1px solid var(--line);
}
.map-toolbar .grow { flex: 1 1 190px; min-width: 0; }
.map-wrap { position: relative; }
.map-canvas {
  width: 100%; height: 440px; position: relative; overflow: hidden;
  background: #0e131c; touch-action: none; cursor: grab;
  user-select: none;
}
.map-canvas.is-drag { cursor: grabbing; }
.map-canvas.is-pick { cursor: crosshair; }
.map-hint {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
  background: rgba(15, 23, 42, .92); border: 1px solid rgba(99, 102, 241, .5);
  color: #e2e8f0; font-size: 12.5px; padding: 8px 14px; border-radius: 10px;
  z-index: 6; max-width: 90%; text-align: center;
}
.nm-tiles, .nm-markers { position: absolute; inset: 0; }
.nm-tile {
  position: absolute; width: 256px; height: 256px; pointer-events: none;
  border-radius: 1px; opacity: .92;
}
.nm-markers { pointer-events: none; }
.nm-marker {
  position: absolute; transform: translate(-50%, -50%);
  background: transparent; border: 0; padding: 0; cursor: pointer;
  display: flex; align-items: center; gap: 5px; pointer-events: auto;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5));
}
.nm-dot {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--nmc, #8b93a7); color: #08121e;
  display: grid; place-items: center;
  border: 2px solid rgba(255, 255, 255, .75);
  font-size: 11px; font-weight: 700; line-height: 1;
}
.nm-marker.is-cust .nm-dot { width: 15px; height: 15px; font-size: 8px; border-width: 2px; }
.nm-marker.st-down .nm-dot { animation: nmPulse 1.8s infinite; }
.nm-marker.is-iso .nm-dot { box-shadow: 0 0 0 3px rgba(248, 113, 113, .35); }
.nm-lbl {
  font-size: 10.5px; color: #e8eefc; background: rgba(9, 14, 24, .72);
  padding: 2px 6px; border-radius: 6px; white-space: nowrap;
  max-width: 150px; overflow: hidden; text-overflow: ellipsis;
}
.nm-marker.is-cust .nm-lbl { display: none; }
.nm-marker:hover .nm-lbl, .nm-marker:focus-visible .nm-lbl { display: block; }
@keyframes nmPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(248, 113, 113, .55); } 50% { box-shadow: 0 0 0 7px rgba(248, 113, 113, 0); } }

.nm-ctrl { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 5; }
.nm-btn {
  width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--line-strong);
  background: rgba(15, 23, 42, .85); color: #e2e8f0; font-size: 16px;
  cursor: pointer; display: grid; place-items: center; padding: 0;
}
.nm-btn-wide { width: auto; padding: 0 10px; font-size: 11px; height: 28px; white-space: nowrap; }
.nm-btn:hover { background: rgba(79, 70, 229, .35); }
.nm-readout {
  position: absolute; left: 10px; bottom: 10px; z-index: 5;
  font-size: 10.5px; font-family: ui-monospace, monospace; color: #b9c4d8;
  background: rgba(9, 14, 24, .72); padding: 3px 8px; border-radius: 7px;
}
.nm-attrib {
  position: absolute; right: 10px; bottom: 8px; z-index: 5;
  font-size: 9.5px; color: #b9c4d8; background: rgba(9, 14, 24, .72);
  padding: 2px 7px; border-radius: 6px;
}
.nm-attrib a { color: #b9c4d8; }
.nm-notice {
  position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%);
  z-index: 6; max-width: 88%; text-align: center;
  font-size: 11.5px; color: #fbd38d; background: rgba(120, 53, 15, .85);
  border: 1px solid rgba(251, 211, 141, .35); padding: 7px 11px; border-radius: 9px;
}
.nm-popup {
  position: absolute; z-index: 8; width: 240px;
  background: rgba(13, 19, 30, .97); border: 1px solid var(--line-strong);
  border-radius: 12px; padding: 10px; box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
  font-size: 12px;
}
.nm-p-head { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 6px; }
.nm-p-head strong { display: block; font-size: 12.5px; }
.nm-p-head small { color: var(--text-dim); font-size: 10.5px; }
.nm-p-head .icon-btn { margin-left: auto; width: 22px; height: 22px; }
.nm-p-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: 0 0 auto; }
.nm-p-status { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 6px; margin-bottom: 6px; }
.nm-p-status.st-up { background: rgba(47, 191, 113, .18); color: #6ee7a8; }
.nm-p-status.st-down { background: rgba(239, 77, 90, .18); color: #fca5a5; }
.nm-p-status.st-unknown { background: rgba(139, 147, 167, .18); color: #c3cad9; }
.nm-p-row { display: flex; justify-content: space-between; gap: 8px; padding: 1px 0; color: var(--text-dim); }
.nm-p-row strong { color: var(--text); font-weight: 600; text-align: right; word-break: break-word; }
.nm-p-detail { margin-top: 6px; font-size: 11px; color: #fca5a5; line-height: 1.35; }
.nm-p-foot { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.map-foot { display: flex; gap: 12px; justify-content: space-between; padding: 9px 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }

.area-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.area-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.area-list li { display: flex; align-items: center; gap: 8px; }
.area-list li .btn { margin-left: auto; }
.area-note { margin-top: 10px; }
.bad-list { display: flex; flex-direction: column; gap: 9px; }
.bad-item { display: flex; gap: 9px; align-items: flex-start; }
.bad-ic {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: rgba(148, 163, 184, .12); flex: 0 0 auto;
}
.bad-ic.err { background: rgba(248, 113, 113, .14); color: #fca5a5; }
.bad-item strong { display: block; font-size: 12.5px; }
.bad-item small { display: block; font-size: 11px; color: var(--text-dim); line-height: 1.4; }
.bad-sep { height: 1px; background: var(--line); margin: 14px 0; }
.pick-coords { display: flex; flex-wrap: wrap; gap: 7px; }
.mini-title { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin: 0; }
.nm-kind { display: inline-flex; align-items: center; color: var(--text-dim); margin-right: 3px; }

/* baris inline (ubah jalur autentikasi) */
.row-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.row-inline select { flex: 1 1 150px; min-width: 0; }
.kv strong .chip-ok, .kv strong .warn { font-weight: 600; }

@media (max-width: 820px) {
  .map-canvas { height: 320px; }
  .net-strip { padding: 9px 11px; gap: 8px; }
  .net-strip .strip-warn { margin-left: 0; width: 100%; order: 5; }
  .net-strip .strip-actions { width: 100%; }
  .map-toolbar { padding: 10px; gap: 8px; }
  .nm-popup { width: 210px; }
  .nm-lbl { display: none !important; }
  .map-foot { padding: 8px 10px; }
}

/* ============================================================
   DASHBOARD — tata letak ringkasan (mengikuti dashboard NOC)
   Tema tetap gelap. Struktur: aksi → ringkasan 6 petak →
   grid 2:1 (log | kapasitas+info) → grid 2 (tagihan | grafik).
   ============================================================ */
.vstack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.vstack > .card { min-width: 0; }

.dash-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.dash-actions .btn { padding: 7px 12px; font-size: 12.5px; border-radius: 10px; }

/* kartu ringkasan: header + 6 petak bergaris pemisah */
.sum-card { padding: 0; overflow: hidden; }
.sum-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  background: rgba(148, 163, 184, 0.04);
}
.sum-head h2 {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-dim);
}
.sum-head h2 .ic { color: var(--accent); }
.sum-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sum-cell {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 18px; min-width: 0;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.sum-cell:nth-child(3n) { border-right: 0; }
.sum-cell:nth-last-child(-n + 3) { border-bottom: 0; }
a.sum-cell { transition: background 0.15s; }
a.sum-cell:hover { background: rgba(148, 163, 184, 0.06); }
.sum-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sum-txt small { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); }
.sum-txt strong {
  font-size: 21px; font-family: var(--mono); letter-spacing: -0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sum-txt em {
  font-style: normal; font-size: 11.5px; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sum-ic {
  display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px;
  border-radius: 50%; color: var(--text-dim); background: rgba(148, 163, 184, 0.10);
}
.sum-ic.cyan { color: #22d3ee; background: rgba(34, 211, 238, 0.11); }
.sum-ic.green { color: #34d399; background: rgba(52, 211, 153, 0.11); }
.sum-ic.amber { color: #fbbf24; background: rgba(251, 191, 36, 0.11); }
.sum-ic.red { color: #f87171; background: rgba(248, 113, 113, 0.11); }
.sum-ic.violet { color: #a78bfa; background: rgba(167, 139, 250, 0.11); }

/* log aplikasi */
.log-list { display: flex; flex-direction: column; }
.log-row { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.log-row:last-child { border-bottom: 0; }
.log-av {
  display: grid; place-items: center; width: 33px; height: 33px; flex: 0 0 33px;
  border-radius: 50%; font-size: 12.5px; font-weight: 700; color: #05121c;
  background: linear-gradient(135deg, #94a3b8, #64748b);
}
.log-av.cyan { background: linear-gradient(135deg, #22d3ee, #6366f1); }
.log-av.green { background: linear-gradient(135deg, #34d399, #22d3ee); }
.log-av.amber { background: linear-gradient(135deg, #fbbf24, #f97316); }
.log-av.violet { background: linear-gradient(135deg, #a78bfa, #6366f1); }
.log-main { flex: 1; min-width: 0; }
.log-main strong {
  display: block; font-size: 12.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.log-main p { font-size: 12px; color: var(--text-dim); overflow-wrap: anywhere; }
.log-side {
  flex: 0 0 auto; text-align: right; font-size: 10.5px; color: var(--muted);
  font-family: var(--mono); line-height: 1.5;
}
.log-side em { font-style: normal; opacity: 0.75; }

/* batang kapasitas */
.cap-list { display: flex; flex-direction: column; gap: 14px; }
.cap-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--text-dim); }
.cap-top strong { font-family: var(--mono); font-size: 12px; color: var(--text); font-weight: 600; }
.cap-top strong em { font-style: normal; font-family: var(--font); font-size: 11px; color: var(--muted); }
.cap-line { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.cap-bar { flex: 1; height: 7px; border-radius: 999px; background: rgba(148, 163, 184, 0.14); overflow: hidden; }
.cap-bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #34d399, #22d3ee); }
.cap.cyan .cap-bar > i { background: linear-gradient(90deg, #22d3ee, #6366f1); }
.cap.violet .cap-bar > i { background: linear-gradient(90deg, #a78bfa, #6366f1); }
.cap-pct { flex: 0 0 36px; text-align: right; font-style: normal; font-family: var(--mono); font-size: 11.5px; color: var(--text-dim); }
.cap-status { margin-top: 16px; padding-top: 6px; border-top: 1px solid var(--line); }
.stat-line {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 0; font-size: 12.5px;
  border-bottom: 1px dashed var(--line);
}
.stat-line:last-child { border-bottom: 0; }
.stat-line > span:first-child { color: var(--text-dim); }

/* kartu identitas aplikasi */
.appnote { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.appnote-mark {
  display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: 12px; color: var(--accent);
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.16), rgba(99, 102, 241, 0.14));
  border: 1px solid rgba(34, 211, 238, 0.24);
}
.appnote-txt { min-width: 0; }
.appnote-txt h3 { font-size: 14px; }
.appnote-txt small { color: var(--muted); font-size: 11.5px; }
.kv-app { gap: 10px 18px; }
.kv-app strong { font-size: 12.5px; }

/* jam server di topbar */
#srv-clock { gap: 6px; }
.clock-txt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; }

@media (max-width: 1080px) {
  .sum-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sum-cell:nth-child(3n) { border-right: 1px solid var(--line); }
  .sum-cell:nth-last-child(-n + 3) { border-bottom: 1px solid var(--line); }
  .sum-cell:nth-child(2n) { border-right: 0; }
  .sum-cell:nth-last-child(-n + 2) { border-bottom: 0; }
}
@media (max-width: 900px) {
  .log-side em { display: none; }
  .dash-actions .btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 640px) {
  .sum-grid { grid-template-columns: minmax(0, 1fr); }
  .sum-cell { border-right: 0; border-bottom: 1px solid var(--line); padding: 13px 14px; }
  .sum-cell:nth-child(2n) { border-right: 0; }
  .sum-cell:nth-last-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .sum-cell:last-child { border-bottom: 0; }
  .sum-ic { width: 38px; height: 38px; flex: 0 0 38px; }
  .sum-txt strong { font-size: 17px; }
  .sum-head h2 { font-size: 11px; }
  #srv-clock { display: none; }
}

/* jaga nilai status (mis. hostname panjang) tidak melebar keluar kartu */
.stat-line .st { max-width: 62%; overflow: hidden; text-overflow: ellipsis; }

/* ============================================================
   HALAMAN ROUTER (MikroTik API) — v1.3.1
   Tabel router ala dashboard NOC: nama · tipe koneksi · IP ·
   secret · online · status · aksi. Plus kartu sesi API.
   ============================================================ */
.st-info { color: #bfdbfe; background: rgba(96, 165, 250, .12); border-color: rgba(96, 165, 250, .3); }

.status-strip .strip-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

.rt-table td { vertical-align: top; }
/* ---------- struktur induk-anak: router VPN di bawah ROUTER BILLING ---------- */
.rt-table tr.rt-parent > td { background: rgba(56, 189, 248, .06); }
.rt-table tr.rt-parent > td:first-child { box-shadow: inset 3px 0 0 rgba(56, 189, 248, .55); }
.rt-table tr.rt-child > td { background: rgba(148, 163, 184, .03); }
.rt-table tr.rt-child > td:nth-child(2) { padding-left: 26px; position: relative; }
.rt-branch {
  position: absolute; left: 10px; top: 10px; color: var(--muted); font-size: 13px; line-height: 1;
}
.rt-card--child { margin-left: 16px; border-left: 2px solid rgba(56, 189, 248, .35); }
.rt-card-sub { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: -4px 0 10px; }
/* banner "ROUTER BILLING belum diatur" (instalasi baru) */
.hub-banner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 14px; margin: 10px 0 4px;
  border: 1px solid rgba(251, 191, 36, .38); border-radius: 12px;
  background: rgba(251, 191, 36, .09);
}
.hub-banner-main { display: flex; gap: 9px; align-items: flex-start; flex: 1 1 320px; min-width: 0; }
.hub-banner-main .ic { color: var(--amber, #fbbf24); flex: 0 0 auto; margin-top: 2px; }
.hub-banner-main strong { color: var(--text); }
.hub-banner-main div { font-size: 12px; line-height: 1.55; color: var(--text-dim); }
.hub-banner .btn { flex: 0 0 auto; }

/* skrip hasil simpan, ditampilkan di dalam form tambah (bukan modal terpisah) */
.rt-inline-script {
  margin: 12px 0 4px; padding: 12px; border-radius: 12px;
  border: 1px solid rgba(56, 189, 248, .35); background: rgba(56, 189, 248, .06);
}
.rt-inline-note { font-size: 11.5px; color: var(--text-dim); margin: 0 0 8px; line-height: 1.5; }
.rt-inline-script .rt-script { margin-bottom: 10px; }
/* alur: router baru → Router Billing → billing */
.rt-flow {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; margin: 10px 0 12px;
  border: 1px solid var(--line); border-radius: 12px;
  background: rgba(148, 163, 184, .05);
  font-size: 12px; color: var(--text-dim);
}
.rt-flow-node { display: inline-flex; align-items: center; gap: 6px; }
.rt-flow-node .ic { color: var(--muted); }
.rt-flow-node.is-hub { color: var(--text); }
.rt-flow-node.is-hub .ic { color: #38bdf8; }
.rt-flow-arrow { color: var(--muted); }
.rt-flow-note { margin-left: auto; font-size: 11px; color: var(--muted); }
.rt-route-note {
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 11.5px; color: var(--text-dim); line-height: 1.5;
  padding: 9px 12px; margin: 0 0 12px;
  border: 1px dashed rgba(56, 189, 248, .35); border-radius: 10px;
  background: rgba(56, 189, 248, .06);
}
.rt-route-note .ic { color: #38bdf8; flex: 0 0 auto; margin-top: 1px; }
@media (max-width: 820px) {
  .rt-flow { gap: 7px; font-size: 11px; padding: 9px 11px; }
  .rt-flow-note { margin-left: 0; width: 100%; }
}
.rt-table th.num, .rt-table td.num { text-align: center; }
.rt-secret { font-family: var(--mono); letter-spacing: .14em; color: var(--text-dim); }
.rt-online {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; padding: 2px 10px; border-radius: 8px;
  font-family: var(--mono); font-size: 13px; font-weight: 700;
}
.rt-online.is-on { color: #a7f3d0; background: rgba(52, 211, 153, .14); border: 1px solid rgba(52, 211, 153, .32); }
.rt-online.is-off { color: var(--muted); background: rgba(148, 163, 184, .08); border: 1px solid var(--line); }
.rt-online.is-none { color: var(--muted); background: transparent; border: 1px dashed var(--line-strong); }
.rt-actions { display: flex; gap: 5px; justify-content: flex-end; flex-wrap: wrap; }

/* kartu router untuk HP */
.rt-cards { flex-direction: column; gap: 10px; padding: 12px; }
.rt-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: rgba(148, 163, 184, .04); }
.rt-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.rt-card-head strong { font-size: 13.5px; }
.rt-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 12px; }
.rt-card-grid > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rt-card-grid small { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.rt-card-grid strong { font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.rt-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; flex-wrap: wrap; }

/* pilihan jalur autentikasi (kartu radio) */
.rt-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.rt-mode-opt { display: block; cursor: pointer; }
.rt-mode-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.rt-mode-card {
  display: flex; align-items: flex-start; gap: 11px; height: 100%;
  padding: 13px 14px; border-radius: 12px;
  border: 1px solid var(--line-strong); background: rgba(148, 163, 184, .05);
  transition: .15s;
}
.rt-mode-opt:hover .rt-mode-card { background: rgba(148, 163, 184, .1); }
.rt-mode-opt input:checked + .rt-mode-card {
  border-color: rgba(34, 211, 238, .55);
  background: linear-gradient(135deg, rgba(34, 211, 238, .16), rgba(99, 102, 241, .12));
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .22);
}
.rt-mode-opt input:focus-visible + .rt-mode-card { outline: 2px solid var(--accent); outline-offset: 2px; }
.rt-mode-ic { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; color: var(--accent); background: rgba(34, 211, 238, .1); }
.rt-mode-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rt-mode-txt strong { font-size: 13px; }
.rt-mode-txt small { color: var(--muted); font-size: 11.5px; line-height: 1.45; }

.rt-mode-grid { margin-bottom: 4px; }

/* daftar sesi API (bukti login tidak berulang) */
.pool-list { display: flex; flex-direction: column; }
.pool-row { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pool-row:last-child { border-bottom: 0; }
.pool-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: var(--muted); }
.pool-dot.is-live { background: var(--green); box-shadow: 0 0 0 4px rgba(52, 211, 153, .14); }
.pool-dot.is-wait { background: var(--amber); box-shadow: 0 0 0 4px rgba(251, 191, 36, .14); }
.pool-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pool-main strong { font-size: 12.5px; }
.pool-main small { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.pool-side { text-align: right; flex: 0 0 auto; }
.pool-side strong { display: block; font-family: var(--mono); font-size: 13px; }
.pool-side small { color: var(--muted); font-size: 10.5px; }

.rt-script {
  width: 100%; margin: 10px 0 4px; padding: 12px;
  /* `pre` tidak membungkus baris panjang → halaman bisa melebar di HP (kasus nyata:
     halaman RADIUS 581px pada layar 390px karena satu perintah panjang). */
  white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; box-sizing: border-box;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.6;
  color: var(--text); background: #0a1120;
  border: 1px solid var(--line-strong); border-radius: 10px;
  resize: vertical;
}

@media (max-width: 900px) {
  .status-strip .strip-actions { margin-left: 0; width: 100%; }
  .status-strip .strip-actions .btn { flex: 1 1 auto; justify-content: center; }
  .rt-mode { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- halaman Router: kartu aturan jalur otomatis ---------- */
.rt-rule { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.rt-rule-row {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; border-radius: 11px;
  border: 1px solid var(--line); background: rgba(148, 163, 184, .04);
}
.rt-rule-row.is-mt { border-color: rgba(34, 211, 238, .22); background: rgba(34, 211, 238, .05); }
.rt-rule-row.is-radius { border-color: rgba(96, 165, 250, .22); background: rgba(96, 165, 250, .05); }
.rt-rule-ic { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; color: var(--accent); background: rgba(34, 211, 238, .1); }
.rt-rule-row.is-radius .rt-rule-ic { color: #bfdbfe; background: rgba(96, 165, 250, .12); }
.rt-rule-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.rt-rule-txt strong { font-size: 12.5px; }
.rt-rule-txt small { color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.rt-rule-row .st { flex: 0 0 auto; }
.rt-auto-result { margin-top: 10px; }
.rt-auto-result:empty { display: none; }
.rt-auto-box {
  padding: 11px 13px; border-radius: 11px; font-size: 12px;
  border: 1px solid var(--line-strong); background: rgba(148, 163, 184, .06);
}
.rt-auto-box strong { font-family: var(--mono); }
.rt-auto-box ul { margin: 6px 0 0; padding-left: 18px; color: var(--text-dim); }

@media (max-width: 560px) {
  .rt-rule-row { flex-wrap: wrap; }
  .rt-rule-row .st { margin-left: 43px; }
}

/* ============================================================
   Form pelanggan: pilihan PPPoE / DHCP + hasil kirim WAN
   ============================================================ */
.svc-pick > span { display: block; margin-bottom: 6px; }
.svc-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.svc-opt { display: block; cursor: pointer; }
.svc-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.svc-card {
  display: flex; align-items: flex-start; gap: 10px; height: 100%;
  padding: 12px 13px; border-radius: 12px;
  border: 1px solid var(--line-strong); background: rgba(148, 163, 184, .05);
  transition: .15s;
}
.svc-opt:hover .svc-card { background: rgba(148, 163, 184, .1); }
.svc-opt input:checked + .svc-card {
  border-color: rgba(34, 211, 238, .55);
  background: linear-gradient(135deg, rgba(34, 211, 238, .16), rgba(99, 102, 241, .12));
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .22);
}
.svc-opt input:focus-visible + .svc-card { outline: 2px solid var(--accent); outline-offset: 2px; }
.svc-ic { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; color: var(--accent); background: rgba(34, 211, 238, .1); }
.svc-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.svc-txt strong { font-size: 13px; }
.svc-txt small { color: var(--muted); font-size: 11.5px; line-height: 1.45; }

/* hasil kirim WAN (form & modal) */
.wan-result {
  padding: 13px 15px; border-radius: 12px; font-size: 12.5px;
  border: 1px solid var(--line-strong); background: rgba(148, 163, 184, .06);
}
.wan-result.is-ok { border-color: rgba(52, 211, 153, .35); background: rgba(52, 211, 153, .08); }
.wan-result.is-err { border-color: rgba(248, 113, 113, .35); background: rgba(248, 113, 113, .08); }
.wan-res-head { font-weight: 650; margin-bottom: 6px; }
.wan-result .steps { margin-top: 8px; }
.wan-result details { margin-top: 8px; }
.wan-result summary { cursor: pointer; color: var(--text-dim); font-size: 12px; }
.wan-result code { font-family: var(--mono); font-size: 11.5px; background: rgba(148, 163, 184, .12); padding: 1px 5px; border-radius: 5px; }
.wan-result .warn { color: var(--amber); }

@media (max-width: 560px) {
  .svc-seg { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   Halaman MITRA — daftar mitra, hak akses, mutasi saldo
   ============================================================ */
.mv-cards { flex-direction: column; gap: 10px; padding: 12px; }
.mv-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: rgba(148, 163, 184, .04); }
.mv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.mv-head strong { font-size: 13.5px; }
.mv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin-bottom: 8px; }
.mv-grid > div { display: flex; flex-direction: column; min-width: 0; }
.mv-grid small { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.mv-grid strong { font-size: 12.5px; }
.mv-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* modal hak akses: dua kolom berisi daftar centang */
.acc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.acc-col { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; min-width: 0; background: rgba(148, 163, 184, .03); }
.acc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 11px; border-bottom: 1px solid var(--line); background: rgba(148, 163, 184, .05); }
.acc-head h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); }
.acc-head small { font-size: 10.5px; color: var(--muted); }
.acc-list { max-height: 46vh; overflow: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.acc-row { display: flex; align-items: flex-start; gap: 9px; padding: 7px 8px; border-radius: 9px; cursor: pointer; }
.acc-row:hover { background: rgba(148, 163, 184, .08); }
/* checkbox JANGAN ikut aturan global `input { width:100% }` — kalau melar, teks jadi 0px */
.acc-row input[type=checkbox] { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; accent-color: var(--accent); }
.acc-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.acc-txt strong { font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.acc-txt small { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .acc-grid { grid-template-columns: minmax(0, 1fr); }
  .acc-list { max-height: 34vh; }
}

/* ============================================================
   Halaman UPDATE — langkah, ringkasan zip, hasil
   ============================================================ */
.up-steps { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.up-step { display: flex; align-items: flex-start; gap: 11px; }
.up-n {
  display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px;
  border-radius: 50%; font-size: 12px; font-weight: 700;
  color: var(--accent); background: rgba(34, 211, 238, .12); border: 1px solid rgba(34, 211, 238, .28);
}
.up-step div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.up-step strong { font-size: 12.5px; }
.up-step small { color: var(--muted); font-size: 11.5px; line-height: 1.45; }
.up-pick { align-items: center; gap: 10px; flex-wrap: wrap; }
.up-pick input[type=file] {
  flex: 1 1 240px; min-width: 0; padding: 9px 11px; font-size: 12px;
  color: var(--text-dim); background: rgba(148, 163, 184, .06);
  border: 1px dashed var(--line-strong); border-radius: 10px; cursor: pointer;
}
.up-inspect { margin-top: 14px; }
.up-ver { font-family: var(--mono); font-size: 13px; margin-bottom: 10px; }
.up-ver strong { color: var(--accent); }
.up-log {
  max-height: 260px; overflow: auto; margin: 8px 0 0; padding: 11px 13px;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.6; white-space: pre-wrap;
  color: var(--text-dim); background: #0a1120; border: 1px solid var(--line-strong); border-radius: 10px;
}
#up-apply-row { margin-top: 14px; align-items: flex-end; gap: 10px; flex-wrap: wrap; }

/* ============================================================
   MENU BERGRUP (Langganan → Profile/Data/Stop/Online/Offline)
   Parent = .nav-item.nav-parent, anak = .nav-sub-item
   ============================================================ */
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-parent { width: 100%; cursor: pointer; font: inherit; text-align: left; }
.nav-parent .nav-caret { margin-left: auto; opacity: .6; transition: transform .18s; }
.nav-group.is-open .nav-parent .nav-caret { transform: rotate(180deg); }
.nav-sub { display: none; flex-direction: column; gap: 2px; margin: 2px 0 4px; padding-left: 10px; }
.nav-group.is-open .nav-sub { display: flex; }
.nav-sub-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px 7px 12px; border-radius: 9px;
  font-size: 12.5px; color: var(--text-dim);
  border-left: 2px solid var(--line);
}
.nav-sub-item:hover { background: rgba(148, 163, 184, .08); color: var(--text); }
.nav-sub-item.active {
  color: var(--text); border-left-color: var(--accent);
  background: linear-gradient(90deg, rgba(34, 211, 238, .14), rgba(99, 102, 241, .06));
}
.nav-sub-item .ic { opacity: .8; flex: 0 0 auto; }

@media (max-width: 900px) {
  /* drawer HP: sub-menu tetap tampil sebagai daftar (bukan disembunyikan) */
  .nav-sub { padding-left: 14px; }
  .nav-sub-item { font-size: 13.5px; padding: 8px 10px; }
}

/* ============================================================
   PROFILE LANGGANAN (dulu "Paket") — tabel ala portal ISP acuan
   ============================================================ */
.pf-strip {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 14px; border-radius: 11px; font-size: 11.8px;
  background: rgba(19, 27, 45, .6); border: 1px solid var(--line);
}
.pf-strip .pill { font-size: 9.5px; padding: 2px 8px; }

.pf-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.pf-toolbar .btn { padding: 8px 13px; font-size: 12.5px; }
.pf-sel, .pf-search {
  padding: 8px 11px; font-size: 12.5px; font-family: inherit;
  color: var(--text); background: rgba(148, 163, 184, .07);
  border: 1px solid var(--line-strong); border-radius: 9px; min-width: 0;
}
.pf-search { flex: 1 1 200px; }
.pf-sel:focus, .pf-search:focus { outline: none; border-color: rgba(34, 211, 238, .5); }

.pf-table th { white-space: nowrap; }
.pf-table td { vertical-align: middle; }
.pf-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pf-dot { width: 13px; height: 13px; flex: 0 0 13px; border-radius: 50%; display: inline-block; }
.pf-rate { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.pf-price {
  display: inline-block; padding: 3px 9px; border-radius: 7px;
  font-family: var(--mono); font-size: 11.5px; border: 1px solid var(--line-strong);
  background: rgba(148, 163, 184, .08);
}
.pf-count {
  display: inline-block; min-width: 26px; padding: 2px 8px; border-radius: 7px; text-align: center;
  font-family: var(--mono); font-size: 12px; color: #062c33;
  background: linear-gradient(135deg, #22d3ee, #67e8f9);
}
.pf-foot { padding: 10px 14px; font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--line); }

.pf-cards { flex-direction: column; gap: 10px; padding: 12px; }
.pf-card { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: rgba(148, 163, 184, .04); }
.pf-card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; flex-wrap: wrap; }
.pf-card-head strong { font-size: 13.5px; }
.pf-card-head .pf-price { margin-left: auto; }
.pf-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.pf-card-grid > div { display: flex; flex-direction: column; min-width: 0; }
.pf-card-grid small { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.pf-card-grid strong { font-size: 12px; overflow-wrap: anywhere; }
.pf-card-grid strong.small { font-size: 10.5px; }
.pf-card-foot { display: flex; gap: 6px; margin-top: 9px; }

@media (max-width: 560px) {
  .pf-toolbar { flex-direction: column; align-items: stretch; }
  .pf-toolbar .btn, .pf-sel, .pf-search { width: 100%; }
}

/* ============================================================
   Halaman GENIEACS — kartu ONT, toolbar aksi, tabel padat
   ============================================================ */
.ga-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ga-card {
  display: flex; align-items: center; gap: 14px; min-width: 0;
  padding: 16px 18px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}
a.ga-card:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.ga-ic { display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px; border-radius: 13px; color: var(--text-dim); background: rgba(148,163,184,.10); }
.ga-ic.cyan { color: #22d3ee; background: rgba(34,211,238,.12); }
.ga-ic.green { color: #34d399; background: rgba(52,211,153,.12); }
.ga-ic.amber { color: #fbbf24; background: rgba(251,191,36,.12); }
.ga-ic.red { color: #f87171; background: rgba(248,113,113,.12); }
.ga-txt { display: flex; flex-direction: column; min-width: 0; }
.ga-txt small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.ga-txt strong { font-size: 21px; font-family: var(--mono); letter-spacing: -.02em; }
.ga-txt em { font-style: normal; font-size: 11.5px; color: var(--text-dim); }

.ga-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.ga-toolbar .btn { padding: 7px 12px; font-size: 12px; font-weight: 650; letter-spacing: .02em; }
.ga-toolbar .btn[disabled] { opacity: .45; }
.ga-reset {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px; border-radius: 8px; font-size: 11.5px;
  color: var(--muted); background: rgba(148,163,184,.06);
  border: 1px dashed var(--line-strong); cursor: not-allowed;
}
.ga-picked { margin-left: auto; font-size: 11.5px; color: var(--muted); font-family: var(--mono); }

.ga-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ga-sel, .ga-search {
  padding: 8px 11px; font-size: 12.5px; font-family: inherit;
  color: var(--text); background: rgba(148,163,184,.07);
  border: 1px solid var(--line-strong); border-radius: 9px; min-width: 0;
}
.ga-sel--sm { max-width: 90px; }
.ga-search { flex: 1 1 220px; }
.ga-sel:focus, .ga-search:focus { outline: none; border-color: rgba(34,211,238,.5); }

.ga-table th { white-space: nowrap; font-size: 10.5px; }
.ga-table td { vertical-align: middle; white-space: nowrap; }
.ga-table tbody tr:hover { background: rgba(148,163,184,.05); }
.ga-table input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--accent); }
.ga-ssid { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.ga-pon {
  display: inline-block; padding: 1px 7px; border-radius: 6px;
  font-family: var(--mono); font-size: 10.5px;
  color: #bfdbfe; background: rgba(96,165,250,.12); border: 1px solid rgba(96,165,250,.28);
}

.ga-mcards { flex-direction: column; gap: 10px; padding: 12px; }
.ga-mcard { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: rgba(148,163,184,.04); }
.ga-mhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.ga-pick { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.ga-pick input { width: 16px; height: 16px; accent-color: var(--accent); }
.ga-mgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.ga-mgrid > div { display: flex; flex-direction: column; min-width: 0; }
.ga-mgrid small { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ga-mgrid strong { font-size: 12px; overflow-wrap: anywhere; }
.ga-mfoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; flex-wrap: wrap; }

.ga-detail h4 { margin-top: 16px; }
.ga-detail .mini-title { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin-bottom: 8px; }

@media (max-width: 1200px) {
  .ga-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ga-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .ga-card { padding: 12px; gap: 10px; }
  .ga-txt strong { font-size: 17px; }
  .ga-txt em { display: none; }
  .ga-filters { flex-direction: column; align-items: stretch; }
  .ga-filters .btn, .ga-sel, .ga-search { width: 100%; max-width: none; }
  .ga-picked { margin-left: 0; width: 100%; }
}

/* ============================================================
   BILLING — Invoice unpaid/paid, TopUp saldo, Mutasi saldo
   ============================================================ */
.iv-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.iv-card {
  display: flex; align-items: center; gap: 14px; min-width: 0;
  padding: 15px 17px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}
.iv-txt { display: flex; flex-direction: column; min-width: 0; }
.iv-txt small { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.iv-txt strong { font-size: 20px; font-family: var(--mono); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iv-txt em { font-style: normal; font-size: 11px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iv-ic { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; color: var(--text-dim); background: rgba(148,163,184,.10); }
.iv-ic.cyan { color: #22d3ee; background: rgba(34,211,238,.12); }
.iv-ic.green { color: #34d399; background: rgba(52,211,153,.12); }
.iv-ic.red { color: #f87171; background: rgba(248,113,113,.12); }
.iv-ic.teal { color: #2dd4bf; background: rgba(45,212,191,.12); }

.iv-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 11px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.iv-toolbar .btn { padding: 7px 12px; font-size: 11.5px; font-weight: 650; letter-spacing: .02em; }
.iv-picked { margin-left: auto; font-size: 11.5px; color: var(--muted); font-family: var(--mono); }

.iv-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.iv-sel, .iv-search {
  padding: 8px 11px; font-size: 12.5px; font-family: inherit;
  color: var(--text); background: rgba(148,163,184,.07);
  border: 1px solid var(--line-strong); border-radius: 9px; min-width: 0;
}
.iv-sel--sm { max-width: 88px; }
.iv-search { flex: 1 1 220px; }
.iv-sel:focus, .iv-search:focus { outline: none; border-color: rgba(34,211,238,.5); }

.iv-table th { white-space: nowrap; font-size: 10px; }
.iv-table td { vertical-align: middle; white-space: nowrap; }
.iv-table input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--accent); }
.iv-price {
  display: inline-block; margin-top: 2px; padding: 1px 7px; border-radius: 6px;
  font-family: var(--mono); font-size: 10.5px; color: #a7f3d0;
  background: rgba(52,211,153,.12); border: 1px solid rgba(52,211,153,.28);
}
.iv-pick { display: flex; align-items: center; gap: 8px; min-width: 0; }
.iv-pick input { width: 16px; height: 16px; accent-color: var(--accent); }

@media (max-width: 1200px) { .iv-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .iv-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .iv-card { padding: 12px; gap: 10px; }
  .iv-txt strong { font-size: 16px; }
  .iv-txt em { display: none; }
  .iv-filters { flex-direction: column; align-items: stretch; }
  .iv-filters .btn, .iv-sel, .iv-search { width: 100%; max-width: none; }
  .iv-picked { margin-left: 0; width: 100%; }
}

/* ============================================================
   VOUCHER — kartu ringkasan, toolbar, tabel stok voucher
   ============================================================ */
.vc-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.vc-card {
  display: flex; align-items: center; gap: 14px; min-width: 0;
  padding: 16px 18px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
}
.vc-txt { display: flex; flex-direction: column; min-width: 0; }
.vc-txt small { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.vc-txt strong { font-size: 20px; font-family: var(--mono); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-txt em { font-style: normal; font-size: 11px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-ic { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 13px; color: var(--text-dim); background: rgba(148,163,184,.10); }
.vc-ic.cyan { color: #22d3ee; background: rgba(34,211,238,.12); }
.vc-ic.green { color: #34d399; background: rgba(52,211,153,.12); }
.vc-ic.amber { color: #fbbf24; background: rgba(251,191,36,.12); }
.vc-ic.teal { color: #2dd4bf; background: rgba(45,212,191,.12); }

.vc-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 11px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.vc-toolbar .btn { padding: 7px 12px; font-size: 11.5px; font-weight: 650; letter-spacing: .02em; }
.vc-picked { margin-left: auto; font-size: 11.5px; color: var(--muted); font-family: var(--mono); }

.vc-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vc-sel, .vc-search {
  padding: 8px 11px; font-size: 12.5px; font-family: inherit;
  color: var(--text); background: rgba(148,163,184,.07);
  border: 1px solid var(--line-strong); border-radius: 9px; min-width: 0;
}
.vc-search { flex: 1 1 220px; }
.vc-sel:focus, .vc-search:focus { outline: none; border-color: rgba(34,211,238,.5); }

.vc-table th { white-space: nowrap; font-size: 10px; }
.vc-table td { vertical-align: middle; white-space: nowrap; }
.vc-table input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--accent); }
.vc-price {
  display: inline-block; margin-top: 2px; padding: 1px 7px; border-radius: 6px;
  font-family: var(--mono); font-size: 10.5px; color: #bfdbfe;
  background: rgba(96,165,250,.12); border: 1px solid rgba(96,165,250,.28);
}
.vc-pick { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vc-pick input { width: 16px; height: 16px; accent-color: var(--accent); }

@media (max-width: 1200px) { .vc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .vc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .vc-card { padding: 12px; gap: 10px; }
  .vc-txt strong { font-size: 16px; }
  .vc-txt em { display: none; }
  .vc-filters { flex-direction: column; align-items: stretch; }
  .vc-filters .btn, .vc-sel, .vc-search { width: 100%; }
  .vc-picked { margin-left: 0; width: 100%; }
}

/* ============================================================
   VOUCHER — toolbar MENU dropdown + filter + tabel
   ============================================================ */
.vc-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 11px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.vc-toolbar .btn { padding: 7px 12px; font-size: 11.5px; font-weight: 650; letter-spacing: .02em; }
.vc-picked { margin-left: auto; font-size: 11.5px; color: var(--muted); font-family: var(--mono); }

/* dropdown MENU */
.vc-menu-wrap { position: relative; }
.vc-menu {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; min-width: 210px;
  display: flex; flex-direction: column; padding: 6px;
  border-radius: 12px; border: 1px solid var(--line-strong);
  background: #101a2b; box-shadow: 0 24px 60px -24px rgba(0,0,0,.9);
}
.vc-menu[hidden] { display: none; }
.vc-menu button {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 11px; border: 0; border-radius: 9px; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--text-dim); background: transparent; text-align: left;
}
.vc-menu button:hover { background: rgba(148,163,184,.10); color: var(--text); }
.vc-menu button.is-danger { color: #fecaca; }
.vc-menu button.is-danger:hover { background: rgba(248,113,113,.14); }

/* filter: satu baris, select kecil, input cari melebar */
.vc-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vc-sel, .vc-search {
  padding: 8px 11px; font-size: 12.5px; font-family: inherit;
  color: var(--text); background: rgba(148,163,184,.07);
  border: 1px solid var(--line-strong); border-radius: 9px; min-width: 0;
}
.vc-sel--sm { max-width: 84px; }
.vc-search { flex: 1 1 200px; }
.vc-sel:focus, .vc-search:focus { outline: none; border-color: rgba(34,211,238,.5); }

.vc-table th { white-space: nowrap; font-size: 10px; }
.vc-table td { vertical-align: middle; white-space: nowrap; }
.vc-table input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--accent); }

@media (max-width: 560px) {
  .vc-filters { flex-direction: column; align-items: stretch; }
  .vc-filters .btn, .vc-sel, .vc-search { width: 100%; max-width: none; }
  .vc-picked { margin-left: 0; width: 100%; }
  .vc-menu { left: 0; right: auto; min-width: 200px; }
}

/* ============================================================
   TAMBAH router — form gaya acuan (label kiri, input kanan)
   ============================================================ */
.mt-hint { margin-bottom: 12px; }
.mt-hint div { line-height: 1.6; }
.mt-auto-note { color: var(--text-dim); margin-bottom: 14px; line-height: 1.6; }
.mt-auto-note .ic { color: var(--green); vertical-align: -2px; }
.mt-form-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.mt-row {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; gap: 12px;
}
/*
 * `[hidden]` HARUS menang atas aturan display lain (mis. `.mt-row{display:grid}`,
 * `.row-gap{display:flex}`). Tanpa ini, elemen yang disembunyikan JS tetap tampil:
 * bug nyata pada kolom "IP Address" saat tipe koneksi WireGuard/VPN dipilih
 * (kolom manual tetap terlihat padahal Host memakai IP tunnel).
 */
[hidden] { display: none !important; }
.mt-row > span { font-size: 12.5px; color: var(--text-dim); }
.mt-row > input, .mt-row > select {
  width: 100%; padding: 9px 12px; font-size: 13px; font-family: inherit;
  color: var(--text); background: rgba(148,163,184,.07);
  border: 1px solid var(--line-strong); border-radius: 9px;
}
.mt-row > input:focus, .mt-row > select:focus { outline: none; border-color: rgba(34,211,238,.55); }
@media (max-width: 560px) {
  .mt-row { grid-template-columns: minmax(0, 1fr); gap: 4px; align-items: start; }
}

/* ============================================================
   KARTU MOBILE HANYA DI LAYAR SEMPIT
   ------------------------------------------------------------
   Wadah kartu mobile memakai dua kelas: `only-mobile` + `.X-cards`.
   Kalau `.X-cards` menaruh `display: flex` di aturan ROOT, nilainya
   mengalahkan `.only-mobile { display: none }` (spesifisitas sama, urutan
   lebih bawah) sehingga kartu ikut tampil di desktop — daftar jadi DOBEL
   (tabel + kartu). Bug nyata di /routers, /packages, /genieacs, /mitra,
   dan daftar pelanggan. Karena itu `display` hanya dipasang di sini.
   ============================================================ */
@media (max-width: 900px) {
  .rt-cards, .pf-cards, .ga-mcards, .mv-cards, .m-cards { display: flex; }
}

/* ============================================================
   ITEM MENU BERGRUP (Voucher / Langganan / Billing)
   ------------------------------------------------------------
   Parent grup dirender sebagai <button>, sedangkan item lain <a>. Tanpa reset,
   browser memberi latar terang + bingkai bawaan sehingga item ini terlihat
   "timbul" seperti tombol (tidak konsisten di sidebar gelap).
   `:not(.active)` dipakai supaya gaya item AKTIF (gradient + garis aksen) tetap.
   ============================================================ */
.sidebar .nav-parent {
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
}
.sidebar .nav-parent:not(.active) {
  background: transparent;
  box-shadow: none;
  border-color: transparent;
}
.sidebar .nav-parent:not(.active):hover { background: rgba(148, 163, 184, 0.08); }
/* grup yang sedang terbuka tetap terbaca keadaannya tanpa efek timbul */
.sidebar .nav-group.is-open > .nav-parent:not(.active) {
  background: rgba(148, 163, 184, 0.06);
  color: var(--text);
}

/* ============================================================
   PROFIL VOUCHER — form ala portal ISP acuan (label kiri, input kanan)
   ------------------------------------------------------------
   Nilai tampilan (warna hex, mode kuota, durasi + satuan) diterjemahkan ke
   field server oleh public/app.js (initVoucherProfiles). `.vc-dot` = titik
   warna profil di tabel & kartu.
   ============================================================ */
.vc-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18) inset;
}
.pf-form { display: flex; flex-direction: column; gap: 10px; }
.pf-row {
  display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 6px 14px;
  align-items: center; font-size: 12.5px;
}
.pf-row > span:first-child { color: var(--text-dim); }
.pf-row > small { grid-column: 2; color: var(--muted); font-size: 11px; margin-top: -2px; }
.pf-row input, .pf-row select { width: 100%; min-width: 0; }
.pf-inline { display: flex; gap: 8px; align-items: center; min-width: 0; }
.pf-inline input { flex: 1 1 auto; min-width: 0; }
.pf-inline select { flex: 0 0 132px; }
.pf-color { display: flex; gap: 8px; align-items: center; min-width: 0; }
.pf-color input[type=color] {
  width: 46px; height: 32px; padding: 2px; border-radius: 8px;
  border: 1px solid var(--line); background: rgba(148, 163, 184, .08); cursor: pointer;
}
.pf-color input[name=color_hex] { flex: 1 1 auto; min-width: 0; max-width: 140px; }
.pf-swatches { display: flex; gap: 6px; flex-wrap: wrap; grid-column: 2; margin-top: 4px; }
.pf-swatch {
  width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25);
  cursor: pointer; padding: 0;
}
.pf-swatch:hover { transform: scale(1.12); }
.pf-table td { vertical-align: middle; }
.pf-table .mono { font-family: var(--mono); font-size: 11px; }
@media (max-width: 640px) {
  .pf-row { grid-template-columns: minmax(0, 1fr); }
  .pf-row > small, .pf-swatches { grid-column: 1; }
}

/* ============================================================
   TOOLBAR VOUCHER: select & pencarian JANGAN melar
   ------------------------------------------------------------
   Aturan global `input, select, textarea { width: 100% }` membuat <select> di dalam
   `.vc-toolbar` mengambil 100% lebar baris → filter turun ke baris sendiri dan
   menyisakan lubang besar (bug nyata di halaman Profil Voucher). Lebar di sini
   dipatok eksplisit supaya semua kontrol tetap satu baris seperti portal acuan.
   ============================================================ */
.vc-toolbar .vc-filters { flex: 1 1 auto; min-width: 0; }
.vc-toolbar .vc-sel { width: auto; flex: 0 0 auto; min-width: 140px; }
.vc-toolbar .vc-sel--sm { width: 86px; min-width: 86px; flex: 0 0 86px; }
.vc-toolbar .vc-search { width: auto; flex: 1 1 220px; min-width: 150px; }
.vc-toolbar .btn.ghost { flex: 0 0 auto; }
@media (max-width: 720px) {
  /* HP: kontrol menumpuk rapi, semua selebar baris */
  .vc-toolbar .vc-filters { flex: 1 1 100%; order: 3; }
  .vc-toolbar .vc-sel,
  .vc-toolbar .vc-sel--sm,
  .vc-toolbar .vc-search { width: 100%; flex: 1 1 100%; min-width: 0; }
  .vc-toolbar .btn.ghost { width: 100%; justify-content: center; }
}

/* ============================================================
   MODAL VOUCHER — tata letak "label kiri, input kanan" (acuan portal ISP)
   Dipakai BUAT VOUCHER MASSAL, BUAT USER, dan SETTING HOTSPOT.
   ============================================================ */
.modal-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; margin-right: 9px;
  background: linear-gradient(135deg, rgba(59, 130, 246, .22), rgba(99, 102, 241, .16));
  color: #93c5fd; flex: 0 0 auto;
}
.modal-head h3 { display: flex; align-items: center; }

.vf { display: flex; flex-direction: column; gap: 10px; }
.vf-2col {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px 26px; align-items: start;
}
.vf-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vf-col--right { border-left: 1px solid var(--line); padding-left: 22px; }

.vf-row {
  display: grid; grid-template-columns: 150px minmax(0, 1fr);
  gap: 3px 12px; align-items: start; font-size: 12.5px;
}
.vf-row > .lbl { color: var(--text-dim); padding-top: 9px; line-height: 1.25; }
.vf-row > .lbl i { color: #f87171; font-style: normal; }
.vf-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vf-cell > input, .vf-cell > select, .vf-cell > textarea { width: 100%; min-width: 0; }
.vf-help { font-size: 10.5px; color: var(--muted); line-height: 1.35; }
.vf-note { font-size: 10.5px; color: var(--muted); display: flex; align-items: center; gap: 5px; }
.vf-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; flex: 0 0 7px; }

.vf-search { display: flex; gap: 6px; }
.vf-search input { flex: 1 1 auto; min-width: 0; }
.vf-search .btn { flex: 0 0 auto; }

/* Kolom kanan acuan: label DI ATAS input */
.vf-stack { display: flex; flex-direction: column; gap: 4px; }
.vf-stack > span { font-size: 11px; color: var(--muted); }
.vf-stack > input, .vf-stack > textarea { width: 100%; }
.vf-stack > textarea { resize: vertical; }

/* toggle "Kunci MAC ADDR" */
.vf-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; position: relative; }
.vf-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vf-switch .vf-track {
  width: 42px; height: 22px; border-radius: 999px; background: rgba(148, 163, 184, .28);
  position: relative; transition: background .15s; flex: 0 0 42px;
}
.vf-switch .vf-track::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: #e5e7eb; transition: transform .15s;
}
.vf-switch input:checked + .vf-track { background: linear-gradient(90deg, #10b981, #22c55e); }
.vf-switch input:checked + .vf-track::after { transform: translateX(20px); }
.vf-switch-txt { font-size: 11.5px; color: var(--text-dim); }
.vf-switch.is-disabled { opacity: .55; cursor: not-allowed; }

/* pratinjau logo hotspot */
.vf-logo-prev {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 8px 12px; border-radius: 10px; background: #fff; max-width: 220px;
}
.vf-logo-prev img { max-width: 190px; max-height: 64px; display: block; }
.vf-logo-empty {
  display: inline-flex; align-items: center; gap: 7px; padding: 10px 12px;
  border: 1px dashed var(--line-strong); border-radius: 10px;
  font-size: 11.5px; color: var(--muted);
}

.vf-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  border-top: 1px solid var(--line); padding-top: 12px; margin-top: 2px;
}
@media (max-width: 760px) {
  .vf-2col { grid-template-columns: minmax(0, 1fr); }
  .vf-col--right { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 12px; }
  .vf-row { grid-template-columns: minmax(0, 1fr); }
  .vf-row > .lbl { padding-top: 0; }
  .vf-foot .btn { flex: 1 1 auto; justify-content: center; }
}

/* ============================================================
   FORM MITRA — bagian HAK AKSES & PROFILE (mengikuti portal acuan)
   Label kiri/input kanan memakai .vf-row (blok MODAL VOUCHER), jadi di sini
   hanya bagian kotak centang dan judul seksi.
   ============================================================ */
.mt-sec {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: 2px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mt-sec-h {
  display: flex; align-items: center; gap: 7px;
  margin: 0; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim);
}
.mt-acc-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}
.mt-acc-box {
  border: 1px solid var(--line); border-radius: 10px;
  background: rgba(148, 163, 184, .04);
  padding: 8px; max-height: 168px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.mt-acc-box .acc-row { padding: 5px 6px; border-radius: 7px; }
.mt-acc-box .acc-row:hover { background: rgba(148, 163, 184, .07); }
.mt-acc-box .mt-all {
  border-bottom: 1px solid var(--line);
  margin-bottom: 3px; padding-bottom: 7px; border-radius: 0;
}
.mt-acc-box .mt-all strong { letter-spacing: .03em; }
@media (max-width: 760px) {
  .mt-acc-grid { grid-template-columns: minmax(0, 1fr); }
  .mt-acc-box { max-height: 150px; }
}

/* ============================================================
   TABEL MITRA — panel terang (gaya portal acuan)
   Warna di-scope ke .mk-panel saja, jadi tema gelap aplikasi
   di halaman lain tidak berubah.
   ============================================================ */
.mk-panel {
  --mk-bg: #ffffff;
  --mk-soft: #f6f7f9;
  --mk-line: #e3e6ec;
  --mk-line-2: #eef1f5;
  --mk-ink: #1f2937;
  --mk-ink-2: #475569;
  --mk-dim: #8a94a6;
  --mk-blue: #2563eb;
  --mk-blue-soft: #e8f1fe;
  --mk-green: #16a34a;
  --mk-green-soft: #e8f7ee;
  --mk-red: #dc2626;
  --mk-red-soft: #fdeaea;
  --mk-amber: #b45309;
  background: var(--mk-bg);
  color: var(--mk-ink);
  border: 1px solid var(--mk-line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px -22px rgba(15, 23, 42, .45);
}
.mk-panel h2 { margin: 0; font-size: 16px; letter-spacing: .02em; color: var(--mk-ink); }
.mk-panel a { color: inherit; }

.mk-panel-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--mk-line); background: var(--mk-soft);
}
.mk-logo {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  background: var(--mk-blue-soft); color: var(--mk-blue);
}
.mk-total { margin-left: auto; font-size: 11.5px; color: var(--mk-dim); display: flex; gap: 6px; flex-wrap: wrap; }
.mk-total b { color: var(--mk-red); }

.mk-note {
  margin: 14px 16px 0; padding: 12px 14px 12px 36px; position: relative;
  background: var(--mk-blue-soft); border: 1px solid #cfe0fb; border-radius: 9px;
  color: #1e3a8a; font-size: 12.5px; line-height: 1.65;
}
.mk-note > b { display: inline-flex; align-items: center; gap: 6px; color: #1d4ed8; }
.mk-note > b .ic { position: absolute; left: 13px; top: 13px; color: #1d4ed8; }
.mk-note ul { margin: 6px 0 0; padding-left: 16px; }
.mk-note li { margin-bottom: 3px; }
.mk-note li b { color: #1e40af; }

/* ---------------------------------------------------------- toolbar */
.mk-bar { display: flex; align-items: center; gap: 8px; padding: 14px 16px 12px; flex-wrap: wrap; }
.mk-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--mk-line); background: #fff; color: var(--mk-ink-2);
  font-size: 12px; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
}
.mk-btn:hover { background: var(--mk-soft); }
.mk-btn .ic { opacity: .85; }
.mk-btn-menu { background: var(--mk-green); border-color: var(--mk-green); color: #fff; }
.mk-btn-menu:hover { background: #15803d; }
.mk-btn-add { background: var(--mk-blue); border-color: var(--mk-blue); color: #fff; }
.mk-btn-add:hover { background: #1d4ed8; }
.mk-btn-go { height: 32px; }
.mk-danger { background: var(--mk-red); border-color: var(--mk-red); color: #fff; }
.mk-danger:hover { background: #b91c1c; }

.mk-menu-wrap { position: relative; }
.mk-dropdown {
  position: absolute; z-index: 30; top: 36px; left: 0; min-width: 210px;
  background: #fff; border: 1px solid var(--mk-line); border-radius: 8px;
  box-shadow: 0 16px 34px -18px rgba(15, 23, 42, .5); padding: 5px; display: flex; flex-direction: column;
}
.mk-dropdown[hidden] { display: none; }
.mk-dropdown button {
  text-align: left; padding: 8px 10px; border: 0; background: none; border-radius: 6px;
  font-size: 12.5px; color: var(--mk-ink-2); cursor: pointer;
}
.mk-dropdown button:hover { background: var(--mk-soft); color: var(--mk-ink); }
.mk-dropdown button.mk-danger { background: none; color: var(--mk-red); font-weight: 600; }
.mk-dropdown button.mk-danger:hover { background: var(--mk-red-soft); }

.mk-search { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.mk-per {
  height: 32px; border-radius: 6px; border: 1px solid var(--mk-line); background: #fff;
  color: var(--mk-ink-2); font-size: 12px; padding: 0 6px; cursor: pointer;
}
.mk-find { display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px;
  border: 1px solid var(--mk-line); border-radius: 6px; background: #fff; min-width: 240px; }
.mk-find .ic { color: var(--mk-dim); }
.mk-find input {
  border: 0; outline: none; background: none; color: var(--mk-ink); font-size: 12.5px;
  width: 100%; min-width: 0;
}
.mk-find input::placeholder { color: var(--mk-dim); }

/* ---------------------------------------------------------- rail + tabel */
.mk-main { display: flex; gap: 0; border-top: 1px solid var(--mk-line-2); }
.mk-rail {
  display: flex; flex-direction: column; gap: 4px; padding: 8px;
  border-right: 1px solid var(--mk-line-2); background: var(--mk-soft); min-width: 118px; flex: 0 0 auto;
}
.mk-rail-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border-radius: 6px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em;
  color: var(--mk-green); text-decoration: none; background: #fff; border: 1px solid var(--mk-line);
  cursor: pointer; text-align: left;
}
.mk-rail-btn b { font-weight: 700; color: var(--mk-dim); font-size: 10.5px; }
.mk-rail-btn:hover { border-color: #cfd6e2; }
.mk-rail-btn.is-on { background: var(--mk-green-soft); border-color: #b7e4c7; color: #15803d; }
.mk-rail-del { color: var(--mk-red); }
.mk-rail-del:hover { background: var(--mk-red-soft); border-color: #f3c2c2; }

.mk-content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.mk-table-wrap { overflow-x: auto; }
.mk-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.mk-table th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; font-size: 10px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--mk-dim); font-weight: 700; padding: 9px 10px; white-space: nowrap;
  background: var(--mk-soft); border-bottom: 1px solid var(--mk-line);
}
.mk-table td { padding: 9px 10px; border-bottom: 1px solid var(--mk-line-2); vertical-align: middle; white-space: nowrap; }
.mk-table tbody tr:hover { background: #fafbfd; }
.mk-table tbody tr.is-selected { background: var(--mk-blue-soft); }
.mk-table .ta-r { text-align: right; }
.mk-check { width: 34px; text-align: center; }
.mk-check input { width: 15px; height: 15px; accent-color: var(--mk-blue); cursor: pointer; }
.mk-id { color: var(--mk-dim); }
.mk-name strong { display: block; font-size: 12.5px; color: var(--mk-ink); }
.mk-name small { display: block; font-size: 10.5px; color: var(--mk-dim); }
.mk-addr { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.mk-dim { color: var(--mk-dim); }
.mk-small { font-size: 11px; }
.mk-neg { color: var(--mk-red); font-weight: 700; }

.mk-status { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; }
.mk-status i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--mk-dim); }
.mk-status.on i { background: var(--mk-green); }
.mk-status.off { color: var(--mk-red); }
.mk-status.off i { background: var(--mk-red); }
.mk-status.none { color: var(--mk-dim); }
.mk-status.none i { background: #cbd5e1; }

.mk-cat {
  display: inline-block; padding: 2px 8px; border-radius: 5px;
  background: var(--mk-blue-soft); color: #1d4ed8; font-size: 10px; font-weight: 800; letter-spacing: .05em;
}
.mk-vc {
  display: inline-block; min-width: 34px; text-align: center; padding: 2px 8px; border-radius: 5px;
  background: var(--mk-blue-soft); color: #1d4ed8; font-family: var(--mono); font-size: 11.5px; font-weight: 700;
}
.mk-vc.zero { background: #f1f3f7; color: var(--mk-dim); }

.mk-actions { position: relative; text-align: right; }
.mk-more {
  width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--mk-line);
  background: #fff; color: var(--mk-ink-2); cursor: pointer; display: inline-grid; place-items: center;
}
.mk-more:hover { background: var(--mk-soft); }
.mk-menu {
  position: absolute; right: 8px; top: 34px; z-index: 25; min-width: 170px;
  background: #fff; border: 1px solid var(--mk-line); border-radius: 8px; padding: 5px;
  box-shadow: 0 16px 34px -18px rgba(15, 23, 42, .5); display: flex; flex-direction: column; gap: 2px;
}
.mk-menu[hidden] { display: none; }
.mk-menu .btn { justify-content: flex-start; text-align: left; width: 100%; }

/* bar pemilihan massal */
.mk-selection {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 16px; border-top: 1px solid var(--mk-line);
  background: var(--mk-blue-soft); color: #1e40af; font-size: 12px;
}
.mk-selection[hidden] { display: none; }
.mk-selection b { font-family: var(--mono); }

/* kartu HP di dalam panel terang */
.mk-panel .mv-cards { display: none; }
.mk-panel .mv-card {
  background: #fff; border: 1px solid var(--mk-line); border-radius: 10px; padding: 12px;
  color: var(--mk-ink);
}
.mk-panel .mv-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.mk-panel .mv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.mk-panel .mv-grid small { display: block; font-size: 10px; color: var(--mk-dim); text-transform: uppercase; letter-spacing: .05em; }
.mk-panel .mv-grid strong { font-size: 13px; }
.mk-panel .mv-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.mk-panel .mv-actions .btn { border-color: var(--mk-line); color: var(--mk-ink-2); background: #fff; }

@media (max-width: 1000px) {
  .mk-search { margin-left: 0; width: 100%; }
  .mk-find { flex: 1 1 200px; min-width: 0; }
}
@media (max-width: 760px) {
  .mk-main { flex-direction: column; }
  .mk-rail {
    flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--mk-line-2);
    min-width: 0; padding: 8px; gap: 6px;
  }
  .mk-rail-btn { flex: 0 0 auto; }
  .mk-table-wrap { display: none; }
  .mk-panel .mk-content .pager { display: none; }
  .mk-panel .mv-cards { display: flex; flex-direction: column; gap: 10px; padding: 12px 16px 16px; }
  .mk-note { margin: 12px 12px 0; }
  .mk-bar { padding: 12px; }
  .mk-panel-head { padding: 10px 12px; }
  .mk-total { margin-left: 0; width: 100%; }
  .mk-selection { padding: 10px 12px; }
}

/* kolom tabel MITRA: disembunyikan bertahap supaya tidak perlu scroll jauh */
@media (max-width: 1500px) { .mk-c-dev { display: none; } }
@media (max-width: 1350px) { .mk-c-email { display: none; } }
@media (max-width: 1180px) { .mk-c-addr, .mk-c-ip { display: none; } }
@media (max-width: 1040px) { .mk-c-phone, .mk-c-login { display: none; } }
.mk-table th, .mk-table td { padding: 8px 9px; }

.mk-rail-head {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--mk-dim);
  padding: 4px 2px 6px; line-height: 1.5;
}
.mk-rail-head b { color: var(--mk-ink-2); }
.mk-rail-link { color: var(--mk-dim); font-weight: 700; justify-content: center; text-decoration: none; }
.mk-rail-link:hover { color: var(--mk-blue); }

/* rapatkan tabel supaya muat tanpa scroll panjang (acuan: font kecil & padat) */
.mk-table { font-size: 11.5px; }
.mk-table th { font-size: 9.5px; padding: 8px; }
.mk-table td { padding: 7px 8px; }
.mk-ellipsis { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.mk-name strong { font-size: 12px; }
@media (max-width: 1300px) { .mk-c-code { display: none; } }
@media (max-width: 1150px) { .mk-c-login { display: none; } }

/* tahap akhir kerapatan tabel MITRA */
.mk-table { font-size: 11px; }
.mk-table th { font-size: 9px; padding: 7px; letter-spacing: .05em; }
.mk-table td { padding: 6px 7px; }
.mk-ellipsis { max-width: 118px; }
.mk-addr { max-width: 118px; }
.mk-table td.mk-c-ip, .mk-table td.mk-c-phone { max-width: 108px; overflow: hidden; text-overflow: ellipsis; }
.mk-cat, .mk-vc { font-size: 9.5px; padding: 1px 6px; }
.mk-vc { min-width: 28px; }
.mk-name small { font-size: 9.5px; }

/* ============================================================
   PROFILE LANGGANAN — panel terang (gaya portal ISP acuan)
   ------------------------------------------------------------
   Panel ini memakai variabel --mk-* dari `.mk-panel` (tema terang
   yang di-scope), lalu menimpa bagian yang berbeda: kepala putih,
   toolbar filter, tabel bergaris, dan modal terang.

   Kelas sengaja BERPREFIKS `pk-` (profile langganan) dan TIDAK
   memakai `.pf-*` milik halaman Profil Voucher — dua halaman itu
   tabelnya berbeda tema, jadi jangan disatukan.
   ============================================================ */
/*
 * `overflow: visible` WAJIB: `.mk-panel` memakai `overflow:hidden` (untuk sudut tumpul),
 * dan itu MEMOTONG dropdown MENU di toolbar. Sudut tumpul bawah dipertahankan lewat
 * pembulatan pada wadah tabel.
 */
.pk-panel { overflow: visible; }
.pk-panel .pk-head {
  background: #fff; padding: 12px 16px; gap: 9px; border-radius: 12px 12px 0 0;
}
.pk-panel .pk-table-wrap { border-radius: 0 0 12px 12px; }
.pk-logo {
  width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  background: #2f3440; color: #e8edf7; flex: 0 0 auto;
}
.pk-panel .pk-head h2 {
  font-size: 13px; font-weight: 800; letter-spacing: .09em; color: #334155;
}

/* ---------------------------------------------------------- toolbar */
.pk-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--mk-line-2); background: #fff;
}
.pk-tools { display: contents; }
.pk-f {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 8px;
  border: 1px solid var(--mk-line); border-radius: 6px; background: #fff; color: #94a3b8;
  flex: 0 0 auto;
}
.pk-f .ic { flex: 0 0 auto; }
.pk-f select {
  width: auto; min-width: 0; max-width: 168px; height: 100%; padding: 0 2px;
  border: 0; background: transparent; color: var(--mk-ink-2); font-size: 12px;
  font-family: inherit; cursor: pointer;
}
.pk-f select:focus, .pk-per:focus { outline: none; }
.pk-f:hover { border-color: #cfd6e2; }
.pk-per { width: 62px; min-width: 62px; flex: 0 0 62px; }
.pk-bar .mk-search { margin-left: auto; }
.pk-bar .mk-find { min-width: 230px; }

/* dropdown MENU */
.pk-dd {
  position: absolute; z-index: 30; top: 36px; left: 0; min-width: 218px;
  background: #fff; border: 1px solid var(--mk-line); border-radius: 8px; padding: 6px;
  box-shadow: 0 16px 34px -18px rgba(15, 23, 42, .5); display: flex; flex-direction: column; gap: 2px;
}
.pk-dd[hidden] { display: none; }
.pk-dd button {
  display: flex; align-items: center; gap: 8px; text-align: left;
  padding: 8px 10px; border: 0; border-radius: 6px; background: none; cursor: pointer;
  font-size: 10.5px; font-weight: 800; letter-spacing: .06em; color: #15803d;
}
.pk-dd button:hover { background: var(--mk-soft); }
.pk-dd button .ic { opacity: .9; }
.pk-dd .is-warn { color: var(--mk-amber); }
.pk-dd .is-del { color: var(--mk-red); }
.pk-dd .is-plain { color: var(--mk-ink-2); font-size: 12px; font-weight: 600; letter-spacing: 0; }

/* ---------------------------------------------------------- tabel */
.pk-table-wrap { overflow-x: auto; }
.pk-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 11.5px; }
.pk-table th {
  text-align: left; padding: 8px 8px; white-space: nowrap;
  background: #f7f8fa; border-top: 1px solid var(--mk-line-2); border-bottom: 1px solid var(--mk-line);
  color: var(--mk-dim); font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.pk-table th.ta-r, .pk-table td.ta-r { text-align: right; }
.pk-table th + th, .pk-table td + td { border-left: 1px solid #f1f3f8; }
.pk-table td { padding: 6px 8px; border-bottom: 1px solid var(--mk-line-2); white-space: nowrap; vertical-align: middle; }
.pk-table tbody tr:hover { background: #fafbfd; }
.pk-table tbody tr.is-selected { background: var(--mk-blue-soft); }
.pk-table .pk-check { width: 34px; text-align: center; }
.pk-table .pk-check input { width: 14px; height: 14px; accent-color: var(--mk-blue); cursor: pointer; }

/* header yang bisa diurutkan (panah dua arah seperti acuan) */
.pk-th { display: inline-flex; align-items: center; gap: 5px; color: inherit; text-decoration: none; }
.pk-th:hover { color: var(--mk-ink-2); }
.pk-th-plain { color: inherit; }
.pk-sa { position: relative; width: 7px; height: 11px; display: inline-block; opacity: .55; }
.pk-sa::before, .pk-sa::after {
  content: ''; position: absolute; left: 0;
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
}
.pk-sa::before { top: 0; border-bottom: 4px solid #b9c1cd; }
.pk-sa::after { bottom: 0; border-top: 4px solid #b9c1cd; }
.pk-th.is-asc { color: var(--mk-blue); }
.pk-th.is-asc .pk-sa::before { border-bottom-color: var(--mk-blue); }
.pk-th.is-desc { color: var(--mk-blue); }
.pk-th.is-desc .pk-sa::after { border-top-color: var(--mk-blue); }

/* isi sel */
.pk-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pk-name a { color: #1f2a44; font-weight: 600; text-decoration: none; }
.pk-name a:hover { color: var(--mk-blue); text-decoration: underline; }
.pk-dot { width: 11px; height: 11px; flex: 0 0 11px; border-radius: 50%; display: inline-block; }
.pk-sub { display: block; color: var(--mk-dim); font-size: 10px; margin-top: 2px; }
.pk-off {
  display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 8.5px; font-weight: 800;
  letter-spacing: .05em; background: #f1f3f7; color: #8a94a6;
}
.pk-mono { font-family: var(--mono); font-size: 10.5px; color: #475569; }
.pk-dim { color: var(--mk-dim); }
.pk-rate { font-family: var(--mono); font-size: 10.5px; color: #475569; }
.pk-price {
  display: inline-block; padding: 2px 8px; border-radius: 5px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .01em;
}
.pk-n {
  display: inline-block; min-width: 28px; padding: 1px 6px; border-radius: 5px; text-align: center;
  background: var(--mk-blue-soft); color: #1d4ed8; font-family: var(--mono); font-size: 10px; font-weight: 700;
}
.pk-n.zero { background: #f1f3f7; color: var(--mk-dim); }
.pk-actions { position: relative; text-align: right; width: 38px; }
.pk-panel .mk-menu .btn { color: var(--mk-ink-2); border-color: var(--mk-line); background: #fff; font-size: 11.5px; }
.pk-panel .mk-menu .btn:hover { background: var(--mk-soft); }
.pk-panel .pager { border-top: 1px solid var(--mk-line-2); padding: 8px 16px; color: var(--mk-dim); }
.pk-panel .pager .pg { color: var(--mk-ink-2); border-color: var(--mk-line); background: #fff; }
.pk-panel .pager .pg.active { background: var(--mk-blue); border-color: var(--mk-blue); color: #fff; }
.pk-empty { padding: 6px 16px 16px; }

/* kartu HP (hanya tampil di layar sempit) */
.pk-card { background: #fff; border: 1px solid var(--mk-line); border-radius: 10px; padding: 12px; }
.pk-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 9px; }
.pk-card-head strong { font-size: 12.5px; color: var(--mk-ink); }
.pk-card-head .pk-price { margin-left: auto; }
.pk-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; }
.pk-card-grid > div { min-width: 0; }
.pk-card-grid small { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--mk-dim); }
.pk-card-grid strong { font-size: 11.5px; color: var(--mk-ink); overflow-wrap: anywhere; white-space: normal; }
.pk-card-foot { display: flex; gap: 6px; margin-top: 10px; }
.pk-card-foot .btn { border-color: var(--mk-line); color: var(--mk-ink-2); background: #fff; }

@media (max-width: 900px) {
  .pk-bar { padding: 10px 12px; }
  .pk-bar .mk-search { margin-left: 0; width: 100%; }
  .pk-bar .mk-find { min-width: 0; flex: 1 1 160px; }
  .pk-f { flex: 1 1 46%; }
  .pk-f select { max-width: none; flex: 1 1 auto; }
  .pk-cards { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
  .pk-table-wrap { display: none; }
  .pk-panel .pager { display: none; }
}

/* ---------------------------------------------------------- modal terang */
.modal-box.pk-modal {
  padding: 0; overflow: hidden; background: #fff; border: 1px solid #e3e6ec; color: #1f2937;
  --line: #e3e6ec; --line-strong: #d8dee8; --text: #1f2937; --text-dim: #5b6577; --muted: #8a94a6;
  box-shadow: 0 40px 90px -34px rgba(15, 23, 42, .55);
}
.pk-modal .modal-head {
  margin: 0; padding: 15px 18px; border-bottom: 1px solid #e9ecf2; align-items: center;
}
.pk-modal .modal-head h3 {
  font-size: 13px; font-weight: 800; letter-spacing: .07em; color: #334155; text-transform: uppercase;
}
.pk-modal .icon-btn { color: #94a3b8; width: 28px; height: 28px; }
.pk-modal .icon-btn:hover { background: #f1f3f7; color: #dc2626; }
.pk-modal .modal-body { padding: 16px 18px 14px; }

.pk-form { display: flex; flex-direction: column; gap: 9px; }
.pk-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 2px 14px; align-items: start; font-size: 12.5px; }
.pk-row > .lbl { color: #5b6577; padding-top: 9px; line-height: 1.3; }
.pk-row > .cell { min-width: 0; }
.pk-help { display: block; color: #9aa4b5; font-size: 10.8px; line-height: 1.45; margin-top: 4px; }
.pk-modal input:not([type=color]):not([type=hidden]),
.pk-modal select {
  width: 100%; min-width: 0; height: 34px; padding: 0 10px;
  border: 1px solid #dbe0e9; border-radius: 5px; background: #fff; color: #1f2937;
  font-size: 12.5px; font-family: inherit;
}
.pk-modal input:not([type=color]):not([type=hidden]):focus,
.pk-modal select:focus {
  outline: none; border-color: #93b4f7; box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.pk-modal input::placeholder { color: #b6bfcc; }
.pk-color { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pk-color input[type=color] {
  width: 42px; height: 32px; flex: 0 0 42px; padding: 2px; border: 1px solid #dbe0e9;
  border-radius: 5px; background: #fff; cursor: pointer;
}
.pk-modal .pk-hex { max-width: 130px; font-family: var(--mono); text-transform: lowercase; }
.pk-sw { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.pk-sw-b {
  width: 16px; height: 16px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px solid rgba(15, 23, 42, .14);
}
.pk-sw-b:hover { transform: scale(1.15); }
.pk-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid #e9ecf2;
}
.pk-btn-close, .pk-btn-save {
  height: 32px; padding: 0 18px; border-radius: 5px; border: 1px solid transparent;
  font-size: 12px; font-weight: 600; cursor: pointer; letter-spacing: .01em;
}
.pk-btn-close { background: #8b93a1; border-color: #8b93a1; color: #fff; }
.pk-btn-close:hover { background: #77808f; }
.pk-btn-save { background: var(--mk-blue, #2563eb); border-color: var(--mk-blue, #2563eb); color: #fff; }
.pk-btn-save:hover { background: #1d4ed8; }

@media (max-width: 700px) {
  .pk-row { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .pk-row > .lbl { padding-top: 0; }
  .pk-modal .modal-body { padding: 14px; }
  .pk-btn-close, .pk-btn-save { flex: 1 1 auto; }
}

/* ============================================================
   LANGGANAN — daftar pelanggan (gaya portal ISP acuan, tema gelap)
   ------------------------------------------------------------
   Struktur mengikuti screenshot acuan: 4 kartu ringkasan → toolbar aksi →
   baris filter → tabel padat 19 kolom → footer "Menampilkan …" + pager.
   Tema GELAP (bukan panel putih seperti Mitra/Profil langganan) sesuai permintaan.
   ============================================================ */
.lg-page {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 14px;
}

/* ---------------------------------------------------------- kartu ringkasan */
.lg-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.lg-tile {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px; min-width: 0;
  background: rgba(148, 163, 184, .05);
  border: 1px solid var(--line); border-left: 3px solid var(--line-strong);
  border-radius: 12px;
}
.lg-tile-txt { min-width: 0; }
.lg-tile small { display: block; font-size: 9.5px; letter-spacing: .09em; color: var(--text-dim); font-weight: 700; }
.lg-tile strong { display: block; font-size: 22px; line-height: 1.25; font-family: var(--mono); color: var(--text); }
.lg-tile em { display: block; font-size: 11px; font-style: normal; color: var(--muted); }
.lg-tile-ic { flex: 0 0 auto; opacity: .9; }
.lg-tile.blue { border-left-color: #5b8cff; } .lg-tile.blue .lg-tile-ic { color: #5b8cff; }
.lg-tile.green { border-left-color: #2fbf71; } .lg-tile.green .lg-tile-ic { color: #2fbf71; }
.lg-tile.amber { border-left-color: #e8a33d; } .lg-tile.amber .lg-tile-ic { color: #e8a33d; }
.lg-tile.red { border-left-color: #ef4d5a; } .lg-tile.red .lg-tile-ic { color: #ef4d5a; }

/* ---------------------------------------------------------------- toolbar */
.lg-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.lg-page .mk-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px;
  border-radius: 6px; border: 1px solid var(--line-strong);
  background: rgba(148, 163, 184, .08); color: var(--text-dim);
  font-size: 11.5px; font-weight: 700; letter-spacing: .03em; white-space: nowrap; cursor: pointer;
}
.lg-page .mk-btn:hover { background: rgba(148, 163, 184, .16); color: var(--text); }
.lg-page .mk-btn .ic { opacity: .9; }
.lg-page .mk-btn-menu { background: #1f8a4c; border-color: #1f8a4c; color: #fff; }
.lg-page .mk-btn-menu:hover { background: #17703d; }
.lg-page .mk-btn-add { background: #2f6fed; border-color: #2f6fed; color: #fff; }
.lg-page .mk-btn-add:hover { background: #265ecb; }
.lg-page .mk-danger { background: #b5323c; border-color: #b5323c; color: #fff; }
.lg-page .mk-danger:hover { background: #982a32; }
.lg-count { margin-left: auto; font-size: 11.5px; color: var(--muted); }

/* dropdown toolbar: panel terang bawaan di-override jadi gelap di halaman ini */
.lg-page .mk-menu-wrap { position: relative; }
.lg-page .mk-dropdown {
  position: absolute; z-index: 40; top: 34px; left: 0; min-width: 224px;
  display: flex; flex-direction: column; gap: 2px; padding: 5px;
  background: #111a29; border: 1px solid var(--line-strong); border-radius: 9px;
  box-shadow: 0 18px 36px -18px rgba(0, 0, 0, .9);
}
.lg-page .mk-dropdown[hidden] { display: none; }
.lg-page .mk-dropdown button, .lg-page .mk-dropdown .lg-dd-link {
  display: flex; align-items: center; gap: 7px; text-align: left; width: 100%;
  padding: 8px 10px; border: 0; border-radius: 6px; background: none; cursor: pointer;
  color: var(--text-dim); font-size: 12px; font-family: inherit; text-decoration: none;
}
.lg-page .mk-dropdown button:hover, .lg-page .mk-dropdown .lg-dd-link:hover {
  background: rgba(148, 163, 184, .14); color: var(--text);
}
.lg-page .mk-dropdown .mk-danger { background: none; color: #f4777f; font-weight: 700; }
.lg-page .mk-dropdown .mk-danger:hover { background: rgba(248, 113, 113, .14); }

/* ----------------------------------------------------------------- filter */
.lg-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.lg-f {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px;
  border: 1px solid var(--line-strong); border-radius: 6px;
  background: rgba(148, 163, 184, .06); color: var(--muted); flex: 0 0 auto;
}
.lg-f select {
  width: auto; min-width: 0; max-width: 168px; height: 100%; padding: 0 2px; border: 0;
  background: transparent; color: var(--text-dim); font-size: 11.5px; font-family: inherit; cursor: pointer;
}
.lg-f select:focus { outline: none; }
.lg-per {
  height: 30px; width: 72px; padding: 0 6px; border-radius: 6px;
  border: 1px solid var(--line-strong); background: rgba(148, 163, 184, .06);
  color: var(--text-dim); font-size: 11.5px; font-family: inherit; cursor: pointer;
}
.lg-find {
  display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px;
  border: 1px solid var(--line-strong); border-radius: 6px;
  background: rgba(148, 163, 184, .06); color: var(--muted);
  flex: 1 1 210px; min-width: 150px;
}
.lg-find input { border: 0; outline: none; background: none; color: var(--text); font-size: 12px; width: 100%; min-width: 0; }
.lg-find input::placeholder { color: var(--muted); }

/* ------------------------------------------------------------------ tabel */
.lg-scroll {
  overflow-x: auto; overflow-y: hidden;
  border: 1px solid var(--line); border-radius: 10px;
  /* scrollbar tipis supaya tidak memakan tinggi seperti acuan */
  scrollbar-width: thin;
}
.lg-scroll::-webkit-scrollbar { height: 9px; }
.lg-scroll::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, .3); border-radius: 9px; }
.lg-table { width: 100%; min-width: 1180px; border-collapse: separate; border-spacing: 0; font-size: 11.5px; }
.lg-table th {
  position: sticky; top: 0; z-index: 2;
  text-align: left; padding: 8px 8px; white-space: nowrap;
  background: #16202f; border-bottom: 1px solid var(--line-strong);
  color: var(--text-dim); font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.lg-table td {
  padding: 7px 8px; border-bottom: 1px solid var(--line);
  white-space: nowrap; vertical-align: middle; color: var(--text);
}
.lg-table tbody tr:hover { background: rgba(148, 163, 184, .06); }
.lg-table tbody tr.is-selected { background: rgba(91, 140, 255, .12); }
.lg-table .ta-r, .lg-table th.ta-r { text-align: right; }
.lg-check { width: 30px; text-align: center; }
.lg-check input { width: 14px; height: 14px; accent-color: #2f6fed; cursor: pointer; }
.lg-inet { width: 36px; text-align: center; }
.lg-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.lg-dot.is-on { background: #2fbf71; box-shadow: 0 0 0 3px rgba(47, 191, 113, .15); }
.lg-dot.is-off { background: #ef4d5a; box-shadow: 0 0 0 3px rgba(239, 77, 90, .15); }
.lg-mono { font-family: var(--mono); font-size: 10.5px; }
.lg-mono--user { color: #8fb3ff; }
.lg-name a { color: var(--text); font-weight: 600; text-decoration: none; }
.lg-name a:hover { color: #8fb3ff; text-decoration: underline; }
.lg-name small { display: block; font-size: 9.5px; color: var(--muted); }
.lg-profile { display: inline-flex; align-items: center; gap: 6px; }
.lg-price {
  display: inline-block; padding: 1px 6px; border-radius: 4px; font-family: var(--mono);
  font-size: 9.5px; font-weight: 700; color: #062c33; background: linear-gradient(135deg, #22d3ee, #67e8f9);
}
.lg-dim { color: var(--muted); }
.lg-due { color: #f4777f; font-weight: 700; }
.lg-ip { color: #8fb3ff; }
.lg-acs { font-size: 9.5px; font-weight: 800; letter-spacing: .04em; padding: 1px 6px; border-radius: 4px; }
.lg-acs.is-on { background: rgba(47, 191, 113, .16); color: #4ede92; }
.lg-acs.is-off { background: rgba(239, 77, 90, .16); color: #ff8b93; }
.lg-addr { max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.lg-actions { position: relative; text-align: right; width: 40px; }
.lg-actions .mk-menu {
  position: absolute; right: 8px; top: 30px; z-index: 30; min-width: 172px;
  display: flex; flex-direction: column; gap: 3px; padding: 5px;
  background: #111a29; border: 1px solid var(--line-strong); border-radius: 9px;
  box-shadow: 0 18px 36px -18px rgba(0, 0, 0, .9);
}
.lg-actions .mk-menu[hidden] { display: none; }
.lg-actions .mk-menu .btn { justify-content: flex-start; text-align: left; width: 100%; }

/* kolom sekunder disembunyikan bertahap supaya tidak perlu geser jauh */
@media (max-width: 1500px) { .lg-c-addr { display: none; } }
@media (max-width: 1350px) { .lg-c-area, .lg-c-acs { display: none; } }
@media (max-width: 1200px) { .lg-c-server, .lg-c-router { display: none; } }
@media (max-width: 1050px) { .lg-c-ip, .lg-c-media { display: none; } }

/* ----------------------------------------------------------------- footer */
.lg-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 12px 2px 2px;
}
.lg-foot-txt { font-size: 11.5px; color: var(--muted); }
.lg-foot-txt b { color: var(--text-dim); }
.lg-pager { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.lg-pg {
  min-width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 8px; border-radius: 5px; font-size: 11.5px; font-family: var(--mono);
  border: 1px solid var(--line-strong); background: rgba(148, 163, 184, .06);
  color: var(--text-dim); text-decoration: none;
}
.lg-pg:hover { background: rgba(148, 163, 184, .16); color: var(--text); }
.lg-pg.is-on { background: #2f6fed; border-color: #2f6fed; color: #fff; }
.lg-pg--wide { font-family: inherit; }
.lg-pg.is-off { opacity: .45; pointer-events: none; }
.lg-gap { color: var(--muted); padding: 0 2px; }
.lg-empty { padding: 8px 0 4px; }

/* kartu HP */
.lg-mcard {
  background: rgba(148, 163, 184, .05); border: 1px solid var(--line);
  border-radius: 11px; padding: 12px;
}
.lg-mhead { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.lg-mhead a { color: var(--text); font-size: 13px; text-decoration: none; }
.lg-mcode { margin-left: auto; font-size: 10px; font-family: var(--mono); color: var(--muted); }
.lg-mgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 10px; }
.lg-mgrid small { display: block; font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.lg-mgrid strong { font-size: 11.5px; overflow-wrap: anywhere; }
.lg-mfoot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; font-size: 10.5px; }
.lg-mactions { display: flex; gap: 6px; }

/* bar pilihan massal di halaman gelap */
.lg-page .mk-selection {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding: 9px 12px; border-radius: 9px;
  background: rgba(47, 111, 237, .14); border: 1px solid rgba(47, 111, 237, .4);
  color: #b9cdff; font-size: 12px;
}
.lg-page .mk-selection[hidden] { display: none; }
.lg-page .mk-selection b { font-family: var(--mono); }

@media (max-width: 900px) {
  .lg-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lg-tile { padding: 11px 12px; }
  .lg-tile strong { font-size: 18px; }
  .lg-tile-ic .ic { width: 20px; height: 20px; }
  .lg-page { padding: 10px; }
  .lg-bar { gap: 6px; }
  .lg-page .mk-btn { padding: 0 9px; font-size: 11px; }
  .lg-count { display: none; }
  .lg-f { flex: 1 1 46%; }
  .lg-f select { max-width: none; flex: 1 1 auto; }
  .lg-scroll { display: none; }
  .lg-cards { display: flex; flex-direction: column; gap: 10px; }
  .lg-foot { flex-direction: column; align-items: flex-start; }
}

/* cetak daftar: jangan boros tinta (halaman lain tidak terpengaruh) */
@media print {
  .lg-page { background: #fff !important; border: 0; box-shadow: none; padding: 0; }
  .lg-bar, .lg-filters, .lg-foot, .lg-check, .lg-actions, .lg-tiles, .sidebar, .topbar { display: none !important; }
  .lg-page, .lg-table td, .lg-table th, .lg-name a, .lg-mono { color: #111 !important; }
  .lg-table th { background: #f1f5f9 !important; border-color: #cbd5e1 !important; }
  .lg-table td { border-color: #e2e8f0 !important; }
  .lg-scroll { overflow: visible !important; border: 0; }
  .lg-table { min-width: 0 !important; }
  .lg-c-addr, .lg-c-area, .lg-c-acs, .lg-c-server, .lg-c-router, .lg-c-ip, .lg-c-media { display: table-cell !important; }
}

/* ============================================================
   TAMBAH / EDIT LANGGANAN — halaman penuh (gaya portal ISP acuan, tema gelap)
   ============================================================ */
.cn-page {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 16px;
}
.cn-notice {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 10px 12px; margin-bottom: 14px; border-radius: 9px;
  background: rgba(47, 191, 113, .1); border: 1px solid rgba(47, 191, 113, .38);
  color: #b7e9c9; font-size: 12px; line-height: 1.55;
}
.cn-notice .ic { color: #4ede92; flex: 0 0 auto; margin-top: 1px; }
.cn-notice b { color: #eafff2; }

.cn-form { display: flex; flex-direction: column; gap: 4px; }
.cn-sec {
  display: flex; align-items: center; gap: 9px;
  margin: 16px 0 10px; padding-bottom: 7px; border-bottom: 1px solid var(--line);
}
.cn-sec:first-of-type { margin-top: 0; }
.cn-num {
  width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: #2f6fed; color: #fff; font-size: 11.5px; font-weight: 800; flex: 0 0 auto;
}
.cn-sec-t { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; color: var(--text-dim); }

.cn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 22px; }
.cn-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 2px 12px; align-items: start; min-width: 0; }
.cn-row--full { grid-column: 1 / -1; }
.cn-lbl { color: var(--text-dim); font-size: 12px; padding-top: 8px; line-height: 1.3; }
.cn-lbl i { color: #f4777f; font-style: normal; }
.cn-cell { min-width: 0; }
.cn-help { display: block; font-size: 10.5px; color: var(--muted); line-height: 1.45; margin-top: 4px; }
.cn-form input:not([type=checkbox]), .cn-form select, .cn-form textarea {
  width: 100%; min-width: 0; height: 32px; padding: 0 9px;
  border: 1px solid var(--line-strong); border-radius: 6px;
  background: rgba(148, 163, 184, .07); color: var(--text);
  font-size: 12.5px; font-family: inherit;
}
.cn-form textarea { height: auto; padding: 7px 9px; resize: vertical; line-height: 1.5; }
.cn-form input:focus, .cn-form select:focus, .cn-form textarea:focus {
  outline: none; border-color: rgba(91, 140, 255, .7); background: rgba(91, 140, 255, .09);
}
.cn-form input::placeholder, .cn-form textarea::placeholder { color: var(--muted); }
.cn-form input[readonly] { color: var(--text-dim); background: rgba(148, 163, 184, .04); }
.cn-coord { display: flex; gap: 8px; }
.cn-coord input { flex: 1 1 0; min-width: 0; }
.cn-search { display: flex; gap: 7px; }
.cn-search input { flex: 1 1 auto; min-width: 0; }
.cn-find-out {
  margin-top: 7px; max-height: 190px; overflow: auto;
  border: 1px solid var(--line-strong); border-radius: 8px; background: #111a29; padding: 4px;
}
.cn-find-out[hidden] { display: none; }
.cn-hit {
  display: block; width: 100%; text-align: left; padding: 7px 9px; border: 0; border-radius: 6px;
  background: none; color: var(--text); cursor: pointer; font-family: inherit;
}
.cn-hit:hover { background: rgba(148, 163, 184, .14); }
.cn-hit strong { display: block; font-size: 12.5px; }
.cn-hit small { display: block; font-size: 10.5px; color: var(--muted); }
/*
 * `position: relative` WAJIB: NetMap menaruh lapisan tile/marker dengan
 * `position:absolute; inset:0`. Tanpa induk berposisi, lapisan itu menempel ke
 * halaman dan MENUTUPI seluruh form (klik pada field lain tertahan oleh peta).
 */
.cn-map {
  position: relative; height: 260px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line-strong); background: #0e131c;
}

/* ------------------------------------------------------------ item invoice */
.cn-inv { border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; }
.cn-invtable { width: 100%; border-collapse: collapse; font-size: 12px; }
.cn-invtable th {
  background: #17708a; color: #eafcff; text-align: left;
  padding: 8px 10px; font-size: 10px; font-weight: 800; letter-spacing: .07em;
}
.cn-invtable td { padding: 8px 10px; border-bottom: 1px solid var(--line); color: var(--text); }
.cn-invtable .cn-qty, .cn-invtable .cn-cut { text-align: center; }
.cn-invtable .cn-harga, .cn-invtable .cn-total { text-align: right; font-family: var(--mono); font-size: 11.5px; }
.cn-invtable tbody tr:nth-child(odd) { background: rgba(148, 163, 184, .04); }
.cn-inv-empty { color: var(--muted); font-style: italic; }
.cn-del {
  margin-left: 8px; width: 20px; height: 20px; border-radius: 5px; cursor: pointer;
  border: 1px solid rgba(248, 113, 113, .4); background: rgba(248, 113, 113, .12); color: #ff9aa2;
  font-size: 13px; line-height: 1;
}
.cn-totals { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; padding: 10px 12px; }
.cn-totals > div { display: flex; align-items: center; gap: 14px; font-size: 11.5px; color: var(--text-dim); }
.cn-totals b { font-family: var(--mono); min-width: 110px; text-align: right; color: var(--text); }
.cn-totals .cn-grand { font-size: 12.5px; color: var(--text); font-weight: 800; }
.cn-totals .cn-grand b { font-size: 17px; }
.cn-inv-actions {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end;
  padding: 10px 12px 12px; border-top: 1px solid var(--line);
}
.cn-btn {
  height: 32px; padding: 0 14px; border-radius: 6px; cursor: pointer;
  border: 1px solid transparent; font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
  color: #fff; font-family: inherit;
}
.cn-btn--blue { background: #2f6fed; border-color: #2f6fed; }
.cn-btn--blue:hover { background: #265ecb; }
.cn-btn--teal { background: #17708a; border-color: #17708a; }
.cn-btn--teal:hover { background: #125b70; }
.cn-btn[disabled] { opacity: .6; cursor: default; }

@media (max-width: 1000px) {
  .cn-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cn-row { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .cn-lbl { padding-top: 0; }
  .cn-page { padding: 12px; }
  .cn-map { height: 220px; }
  .cn-inv-actions .cn-btn { flex: 1 1 46%; justify-content: center; }
  .cn-invtable th, .cn-invtable td { padding: 7px 6px; font-size: 11px; }
}

/* ============================================================
   KATEGORI LAYANAN di form langganan (PPP / DHCP / HOTSPOT)
   ------------------------------------------------------------
   Badge kolom KTG pada tabel + blok kolom yang muncul sesuai kategori.
   ============================================================ */
.lg-ktg {
  display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 9.5px;
  font-weight: 800; letter-spacing: .05em;
  background: rgba(148, 163, 184, .14); color: var(--text-dim);
}
.lg-ktg.is-pppoe { background: rgba(47, 191, 113, .16); color: #4ede92; }
.lg-ktg.is-dhcp { background: rgba(91, 140, 255, .18); color: #9dbcff; }
.lg-ktg.is-hotspot { background: rgba(232, 163, 61, .18); color: #f0b95f; }

.cn-grid--svc { margin-bottom: 2px; }
.cn-mode[hidden] { display: none !important; }
/* Baris milik ONT (SN, ODP, port, slot, ONT portal ACS) — disembunyikan bila media
   pelanggan = wireless. `hidden` WAJIB menang atas `display:grid` milik .cn-row. */
.cn-row.cn-ont[hidden] { display: none !important; }

/* ============================================================
   WEB ISOLIR — halaman PUBLIK "Cek Tagihan" (pelanggan)
   ------------------------------------------------------------
   Halaman ini dibuka pelanggan dari walled garden hotspot MikroTik,
   jadi TIDAK memakai sidebar portal dan harus nyaman di HP.
   ============================================================ */
.iso-body { min-height: 100vh; }
.iso-wrap {
  position: relative; z-index: 1; width: 100%; max-width: 560px;
  margin: 0 auto; padding: 26px 16px 40px; display: flex; flex-direction: column; gap: 16px;
}
.iso-brand { display: flex; align-items: center; gap: 11px; }
.iso-logo {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, #0f2b46, #123047); border: 1px solid var(--line-strong);
}
.iso-brand strong { display: block; font-size: 14.5px; color: var(--text); }
.iso-brand small { display: block; font-size: 11.5px; color: var(--muted); }

.iso-card {
  background: rgba(17, 25, 40, .82); border: 1px solid var(--line-strong);
  border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 30px 70px -40px rgba(0, 0, 0, .95); backdrop-filter: blur(18px);
}
.iso-card h1 { font-size: 19px; line-height: 1.25; }
.iso-sub { color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.iso-sub strong { color: var(--text-dim); }
.iso-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.iso-head h1 { font-size: 17px; }

.iso-total {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px 16px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(239, 77, 90, .14), rgba(239, 77, 90, .05));
  border: 1px solid rgba(239, 77, 90, .4);
}
.iso-total small { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: #ffb3b9; }
.iso-total strong { font-size: 26px; font-family: var(--mono); color: #fff; line-height: 1.2; }
.iso-total em { font-size: 11px; font-style: normal; color: var(--muted); }
.iso-total.is-ok {
  background: linear-gradient(135deg, rgba(47, 191, 113, .14), rgba(47, 191, 113, .05));
  border-color: rgba(47, 191, 113, .4);
}
.iso-total.is-ok small { color: #9ef0c2; }

.iso-tbl { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.iso-tbl table { margin: 0; }

.iso-pay { display: flex; flex-direction: column; gap: 8px; }
.iso-pay h3 { font-size: 13px; display: flex; align-items: center; gap: 7px; color: var(--text); }
.iso-pre {
  margin: 0; padding: 12px 14px; border-radius: 10px; white-space: pre-wrap; word-break: break-word;
  background: rgba(148, 163, 184, .07); border: 1px solid var(--line);
  font-family: inherit; font-size: 12.5px; line-height: 1.7; color: var(--text-dim);
}
.iso-note { font-size: 11.5px; color: var(--muted); }
.iso-actions { display: flex; flex-direction: column; gap: 8px; }
.iso-wa {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 12px; border-radius: 10px; font-size: 12.5px; font-weight: 600;
  color: #9ef0c2; background: rgba(47, 191, 113, .12); border: 1px solid rgba(47, 191, 113, .35);
  text-decoration: none;
}
.iso-wa:hover { background: rgba(47, 191, 113, .2); }
.iso-foot { font-size: 11px; color: var(--muted); text-align: center; line-height: 1.6; }

/* tombol tautan di status-strip admin (bukan tombol bahaya) */
.strip-btn--go {
  color: var(--accent); background: rgba(34, 211, 238, .1);
  border-color: rgba(34, 211, 238, .32); text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
}
.strip-btn--go:hover { background: rgba(34, 211, 238, .2); }

@media (max-width: 560px) {
  .iso-wrap { padding: 18px 12px 32px; }
  .iso-card { padding: 16px; border-radius: 14px; }
  .iso-total strong { font-size: 22px; }
}

/* cetak halaman pelanggan (dipakai bila pelanggan mencetak bukti tagihan) */
@media print {
  .iso-body { background: #fff; }
  .iso-card, .iso-total, .iso-pre, .iso-tbl { background: #fff !important; color: #111 !important; border-color: #cbd5e1 !important; }
  .iso-actions, .iso-brand small, .iso-foot, .iso-wa { display: none !important; }
  .iso-card h1, .iso-sub, .iso-pre, .iso-total strong { color: #111 !important; }
}

/* ============================================================
   WHATSAPP GATEWAY (menu WA) — struktur portal acuan, TEMA GELAP
   ------------------------------------------------------------
   Permintaan user: "buat sama persis, latar belakang jangan putih".
   Jadi kepala panel gelap, tabel bergaris gelap, dan toolbar berwarna
   (biru/merah) seperti acuan — tetapi tidak ada panel putih.
   ============================================================ */
.wa-panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); overflow: visible;
}
.wa-head {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 11px 15px; border-bottom: 1px solid var(--line);
}
.wa-logo {
  width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  background: #1f8a4c; color: #fff; flex: 0 0 auto;
}
.wa-head h2 { font-size: 13px; font-weight: 800; letter-spacing: .09em; color: var(--text); margin: 0; }
.wa-head-total { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); flex-wrap: wrap; }

/* ---------------------------------------------------------- toolbar */
.wa-bar { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 12px 15px; }
.wa-bar .btn { font-size: 11px; font-weight: 700; letter-spacing: .03em; padding: 7px 11px; }
.wa-bar .btn.warn { background: #b5462f; border-color: #b5462f; color: #fff; }
.wa-bar .btn.warn:hover { background: #9c3b27; }
.wa-count { margin-left: auto; font-size: 11px; color: var(--muted); }
.wa-count b.wa-neg { color: #f4777f; }

/* ---------------------------------------------------------- peringatan */
.wa-warn {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 0 15px 12px; padding: 10px 12px; border-radius: 9px;
  background: rgba(232, 163, 61, .1); border: 1px solid rgba(232, 163, 61, .38);
  color: #f0c98a; font-size: 11.5px; line-height: 1.55;
}
.wa-warn .ic { color: #e8a33d; flex: 0 0 auto; margin-top: 1px; }
.wa-warn strong { display: block; font-size: 10px; letter-spacing: .08em; color: #ffd79a; margin-bottom: 2px; }
.wa-warn p { margin: 0; }

/* ---------------------------------------------------------- filter */
.wa-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 15px 12px; }
.wa-f {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px;
  border: 1px solid var(--line-strong); border-radius: 6px;
  background: rgba(148, 163, 184, .06); color: var(--muted); flex: 0 0 auto;
}
.wa-f select {
  width: auto; min-width: 0; max-width: 150px; height: 100%; padding: 0 2px; border: 0;
  background: transparent; color: var(--text-dim); font-size: 11.5px; font-family: inherit; cursor: pointer;
}
.wa-f select:focus { outline: none; }
.wa-per { width: 72px; min-width: 72px; flex: 0 0 72px; }
.wa-find { flex: 1 1 220px; min-width: 150px; }

/* ---------------------------------------------------------- tabel */
.wa-table-wrap { overflow-x: auto; }
.wa-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 11.5px; }
.wa-table th {
  text-align: left; padding: 8px 10px; white-space: nowrap;
  background: #16202f; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line-strong);
  color: var(--text-dim); font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.wa-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.wa-table tbody tr:hover { background: rgba(148, 163, 184, .06); }
.wa-table tbody tr.is-selected { background: rgba(47, 111, 237, .14); }
.wa-check { width: 32px; text-align: center; }
.wa-check input { width: 14px; height: 14px; accent-color: #2f6fed; cursor: pointer; }
.wa-gw { font-family: var(--mono); font-size: 10px; color: var(--text-dim); white-space: nowrap; }
.wa-phone { white-space: nowrap; }
.wa-phone .mono { font-family: var(--mono); font-size: 10.5px; color: #8fb3ff; }
.wa-wa {
  display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px;
  border-radius: 50%; background: rgba(47, 191, 113, .18); color: #4ede92; margin-right: 5px;
  text-decoration: none; vertical-align: middle;
}
.wa-wa:hover { background: rgba(47, 191, 113, .32); }
.wa-msg {
  max-width: 640px; color: var(--text-dim); line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wa-err { color: #f4777f; font-size: 10.5px; white-space: normal; margin-top: 2px; }
.wa-kind {
  display: inline-block; padding: 1px 6px; border-radius: 4px; margin-right: 4px;
  background: rgba(148, 163, 184, .14); color: var(--text-dim);
  font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
}
.wa-date { font-family: var(--mono); font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.wa-status { white-space: nowrap; }
.wa-st { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); }
.wa-st i { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; display: inline-block; }
.wa-st.is-ok { color: #4ede92; } .wa-st.is-ok i { background: #2fbf71; }
.wa-st.is-err { color: #f4777f; } .wa-st.is-err i { background: #ef4d5a; }
.wa-st.is-warn { color: #f0b95f; } .wa-st.is-warn i { background: #e8a33d; }

/* urutkan kolom */
.wa-th { display: inline-flex; align-items: center; gap: 5px; color: inherit; text-decoration: none; }
.wa-th:hover { color: var(--text-dim); }
.wa-sa { position: relative; width: 7px; height: 11px; display: inline-block; opacity: .5; }
.wa-sa::before, .wa-sa::after {
  content: ''; position: absolute; left: 0;
  border-left: 3.5px solid transparent; border-right: 3.5px solid transparent;
}
.wa-sa::before { top: 0; border-bottom: 4px solid #b9c1cd; }
.wa-sa::after { bottom: 0; border-top: 4px solid #b9c1cd; }
.wa-th.is-asc { color: #8fb3ff; } .wa-th.is-asc .wa-sa::before { border-bottom-color: #8fb3ff; }
.wa-th.is-desc { color: #8fb3ff; } .wa-th.is-desc .wa-sa::after { border-top-color: #8fb3ff; }

.wa-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 11px 15px; }
.wa-empty { padding: 6px 15px 16px; }
.wa-panel .mk-selection { margin: 0 15px 12px; }

/* kartu HP */
.wa-card { background: rgba(148, 163, 184, .05); border: 1px solid var(--line); border-radius: 11px; padding: 12px; }
.wa-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.wa-card-head strong { font-family: var(--mono); font-size: 11.5px; color: #8fb3ff; }
.wa-card-head .wa-st { margin-left: auto; }
.wa-card-msg { font-size: 11.5px; color: var(--text-dim); line-height: 1.5; white-space: pre-wrap; margin: 0 0 8px; }
.wa-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

@media (max-width: 900px) {
  .wa-bar { padding: 10px 12px; }
  .wa-bar .btn { flex: 1 1 46%; justify-content: center; }
  .wa-count { flex: 1 1 100%; margin-left: 0; }
  .wa-warn { margin: 0 12px 10px; }
  .wa-filters { padding: 0 12px 10px; }
  .wa-f { flex: 1 1 44%; }
  .wa-f select { max-width: none; flex: 1 1 auto; }
  .wa-table-wrap { display: none; }
  .wa-cards { display: flex; flex-direction: column; gap: 10px; padding: 0 12px 12px; }
  .wa-foot { padding: 10px 12px; }
  .wa-panel .mk-selection { margin: 0 12px 10px; }
}

/* ---------------------------------------------------------- modal perangkat */
.wa-dev { display: flex; flex-direction: column; gap: 10px; }
.wa-sec { display: flex; align-items: center; gap: 9px; padding-bottom: 6px; border-bottom: 1px solid var(--line); margin-top: 4px; }
.wa-num {
  width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: #2f6fed; color: #fff; font-size: 11px; font-weight: 800; flex: 0 0 auto;
}
.wa-sec-t { font-size: 11px; font-weight: 800; letter-spacing: .09em; color: var(--text-dim); }
.wa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.wa-inline { display: flex; align-items: center; gap: 7px; }
.wa-inline input { flex: 1 1 auto; min-width: 0; }
.wa-help { display: block; font-size: 10.5px; color: var(--muted); line-height: 1.45; margin-top: 3px; }
.wa-auto { display: flex; flex-direction: column; gap: 5px; }
.wa-test { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 9px; background: rgba(148, 163, 184, .06); border: 1px solid var(--line); }
.wa-format { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wa-emoji-wrap { display: flex; flex-direction: column; gap: 6px; }
.wa-emoji { display: flex; flex-wrap: wrap; gap: 2px; max-height: 96px; overflow: auto; padding: 6px; border-radius: 9px; background: rgba(148, 163, 184, .06); border: 1px solid var(--line); }
.wa-emoji button {
  width: 24px; height: 24px; border: 0; border-radius: 5px; background: none; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0;
}
.wa-emoji button:hover { background: rgba(148, 163, 184, .22); }

.wa-tpl { border: 1px solid var(--line-strong); border-radius: 9px; overflow: hidden; }
.wa-tpl summary {
  padding: 9px 12px; cursor: pointer; font-size: 11px; font-weight: 800; letter-spacing: .06em;
  color: var(--text-dim); background: rgba(148, 163, 184, .06); list-style: none;
}
.wa-tpl summary::-webkit-details-marker { display: none; }
.wa-tpl[open] summary { border-bottom: 1px solid var(--line); color: var(--text); }
.wa-tpl-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; }
.wa-tpl textarea {
  width: 100%; min-height: 96px; padding: 9px 10px; border-radius: 7px;
  border: 1px solid var(--line-strong); background: rgba(148, 163, 184, .07); color: var(--text);
  font-family: var(--mono); font-size: 11.5px; line-height: 1.6; resize: vertical;
}
.wa-tpl textarea:focus { outline: none; border-color: rgba(91, 140, 255, .7); }

.wa-preview {
  padding: 10px 12px; border-radius: 9px; border: 1px solid var(--line);
  background: rgba(148, 163, 184, .06); max-height: 250px; overflow: auto; white-space: pre-wrap;
  font-size: 11.5px; line-height: 1.6;
}
.wa-preview b { color: var(--text); }
.wa-pick { max-height: 170px; overflow: auto; border: 1px solid var(--line-strong); border-radius: 8px; padding: 4px; }
.wa-pick label {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px;
  font-size: 12px; color: var(--text-dim); cursor: pointer;
}
.wa-pick label:hover { background: rgba(148, 163, 184, .12); }
.wa-pick input { width: 15px; height: 15px; flex: 0 0 15px; accent-color: #2f6fed; }
.wa-pick small { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }

@media (max-width: 760px) {
  .wa-grid { grid-template-columns: minmax(0, 1fr); }
  .wa-emoji { max-height: 72px; }
}

/* ============================================================
   PEMBAYARAN — QRIS dinamis & cek mutasi (TEMA GELAP)
   ============================================================ */
.qr-amt { font-family: var(--mono); color: #8fb3ff; }
.qr-code {
  display: inline-block; min-width: 34px; padding: 1px 7px; border-radius: 5px;
  background: rgba(232, 163, 61, .18); color: #f0b95f;
  font-family: var(--mono); font-size: 11.5px; font-weight: 700; text-align: center;
}
.qr-actions { white-space: nowrap; }
.qr-actions .btn + .btn { margin-left: 4px; }
.qr-table td { vertical-align: middle; }

/* kartu HP */
.qr-cards { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.qr-card { background: rgba(148, 163, 184, .05); border: 1px solid var(--line); border-radius: 11px; padding: 12px; }
.qr-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.qr-card-head strong { font-size: 13px; color: var(--text); }
.qr-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 10px; margin: 9px 0; }
.qr-card-grid small { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.qr-card-grid strong { font-size: 12px; color: var(--text); }
.qr-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }

/* modal QR */
.qr-box { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.qr-img {
  flex: 0 0 auto; width: 262px; height: 262px; padding: 8px;
  background: #fff; border-radius: 12px; display: grid; place-items: center;
  border: 1px solid var(--line-strong);
}
.qr-img svg { width: 100%; height: 100%; display: block; }
.qr-info { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.qr-info > div { display: flex; flex-direction: column; gap: 1px; }
.qr-info span { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.qr-info strong { font-size: 13px; color: var(--text); }
.qr-info strong.qr-amt { font-size: 19px; }
@media (max-width: 560px) {
  .qr-box { flex-direction: column; }
  .qr-img { width: 100%; height: auto; aspect-ratio: 1 / 1; }
}

/* blok QRIS di halaman publik "Cek Tagihan" */
.iso-qr { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.iso-qr-img {
  flex: 0 0 auto; width: 190px; height: 190px; padding: 6px; background: #fff;
  border-radius: 10px; border: 1px solid var(--line-strong); display: grid; place-items: center;
}
.iso-qr-img svg { width: 100%; height: 100%; display: block; }
.iso-qr-info { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.iso-qr-info small { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.iso-qr-info strong { font-size: 22px; font-family: var(--mono); color: #fff; }
.iso-qr-info span { font-size: 11.5px; color: var(--text-dim); }
@media (max-width: 560px) {
  .iso-qr-img { width: 100%; height: auto; aspect-ratio: 1 / 1; }
}

/* unggah file mutasi (internet banking) */
.mut-file {
  flex: 1 1 auto; min-width: 0; height: 32px; padding: 4px 8px;
  border: 1px solid var(--line-strong); border-radius: 7px;
  background: rgba(148, 163, 184, .07); color: var(--text-dim); font-size: 11.5px;
}
.mut-file::file-selector-button {
  margin-right: 8px; padding: 3px 10px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--line-strong); background: rgba(148, 163, 184, .14); color: var(--text);
  font-size: 11.5px; font-family: inherit;
}

/* ---------------------------------------------------------------------------
   RADIUS lewat API (modal SCRIPT) + pemilih versi RouterOS
   Dua input ini sengaja TIDAK memakai width:100% dari aturan global supaya
   barisnya tidak pecah seperti kasus toolbar voucher.
   --------------------------------------------------------------------------- */
.mt-os-pick { width: auto !important; min-width: 170px; }
.mt-radius-ip { width: auto !important; flex: 1 1 200px; min-width: 160px; }
#mt-radius-result { margin-top: 6px; }
#mt-radius-result .steps { margin: 6px 0 0 18px; }
#mt-radius-result .steps li { margin: 2px 0; }
@media (max-width: 700px) {
  .mt-os-pick, .mt-radius-ip { width: 100% !important; flex: 1 1 100%; }
}

/* Toggle "Tampilkan penjelasan (#)" pada modal skrip router */
.vc-clean-toggle { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.vc-clean-toggle input { width: 16px !important; height: 16px !important; flex: 0 0 auto; }
.vc-clean-toggle code { font-size: 11px; padding: 0 3px; }
#mt-script-hint { margin: 4px 0 0; }

/* Isian IP pool di modal skrip router */
.mt-pool-box { margin: 8px 0; }
.mt-pool-fields { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.mt-pool-fields input { width: auto !important; flex: 1 1 170px; min-width: 140px; }
.mt-pool-fields .btn { flex: 0 0 auto; }
@media (max-width: 700px) {
  .mt-pool-fields input, .mt-pool-fields .btn { flex: 1 1 100%; }
}

/* ============================================================
   PEMBERITAHUAN ISOLIR (publik) — /isolir/info & kotak di /isolir/pelanggan
   Struktur mengikuti contoh portal ISP: ikon peringatan besar → judul → kalimat
   → kotak merah "Cara Mengaktifkan Kembali" → tombol aksi → footer.
   ============================================================ */
.nt-wrap { max-width: 520px; }
.nt-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 0; padding: 30px 26px 26px;
}
.nt-ic { color: #f5a623; display: flex; justify-content: center; margin-bottom: 6px; }
.nt-title {
  font-size: 25px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700;
  color: var(--text); margin: 2px 0 14px;
}
.nt-text { font-size: 13.5px; line-height: 1.75; color: var(--muted); margin: 0 0 18px; }
.nt-ident { font-size: 12px; color: var(--muted); margin: -6px 0 16px; }
.nt-ident strong { color: var(--text); }

/* Kotak langkah: merah lembut, judul tegas — sama seperti contoh */
.nt-steps {
  width: 100%; text-align: left; border-radius: 12px; padding: 14px 16px;
  background: rgba(239, 68, 68, .1); border: 1px solid rgba(239, 68, 68, .32);
}
.nt-steps h2 {
  font-size: 13px; font-weight: 700; color: #ffb3b9; margin: 0 0 8px;
  display: flex; align-items: center; gap: 7px;
}
.nt-steps ul { margin: 0; padding-left: 18px; }
.nt-steps li { font-size: 12.5px; line-height: 1.7; color: var(--text-dim); }
.nt-steps li + li { margin-top: 3px; }
/* versi di dalam kartu cek tagihan: sejajar kiri, tanpa jarak berlebih */
.nt-steps--inline { margin: -2px 0 4px; padding: 12px 14px; }

.nt-actions { width: 100%; display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.nt-note { font-size: 11.5px; color: var(--muted); line-height: 1.6; margin: 14px 0 0; }
.nt-body .iso-foot { margin-top: 18px; }
.nt-body .iso-foot strong { color: var(--text-dim); }

@media (max-width: 560px) {
  .nt-card { padding: 24px 18px 20px; border-radius: 16px; }
  .nt-title { font-size: 21px; }
  .nt-text { font-size: 13px; }
  .nt-ic svg { width: 58px; height: 58px; }
}
/* Cetak (dipakai petugas untuk menempel/menunjukkan ke pelanggan) */
@media print {
  .nt-body { background: #fff; }
  .nt-body .bg-glow, .nt-body .iso-foot, .nt-actions { display: none !important; }
  .nt-card, .nt-steps {
    background: #fff !important; color: #111 !important; border-color: #cbd5e1 !important;
    box-shadow: none !important;
  }
  .nt-title, .nt-text, .nt-ident, .nt-steps li, .nt-note { color: #111 !important; }
  .nt-steps { border-color: #e11d48 !important; }
  .nt-steps h2 { color: #b91c1c !important; }
}

/* ============================================================
   MENU ACUAN: halaman "SEGERA HADIR" (.soon-*) & About (.about-*)
   Tema tetap GELAP (permintaan user) — hanya susunan & tata letaknya
   yang mengikuti portal acuan.
   ============================================================ */
.soon-card {
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: 16px;
  padding: 26px 24px; display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 0; box-shadow: 0 30px 70px -50px rgba(0, 0, 0, .9);
}
.soon-ic {
  display: flex; align-items: center; justify-content: center;
  width: 66px; height: 66px; border-radius: 50%;
  background: rgba(99, 102, 241, .14); border: 1px solid rgba(99, 102, 241, .34);
  color: #a5b4fc; margin-bottom: 12px;
}
.soon-card h2 { font-size: 19px; margin: 0 0 8px; color: var(--text); }
.soon-lead { font-size: 13px; line-height: 1.7; color: var(--muted); max-width: 620px; margin: 0 0 20px; }
.soon-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; text-align: left;
  align-items: start;
}
.soon-box {
  background: rgba(11, 17, 32, .55); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; min-width: 0;
}
.soon-box--alt { background: rgba(99, 102, 241, .08); border-color: rgba(99, 102, 241, .3); }
.soon-box h3 {
  display: flex; align-items: center; gap: 7px; font-size: 12.5px; margin: 0 0 10px;
  color: var(--text); text-transform: none;
}
.soon-box ul { margin: 0; padding-left: 18px; }
.soon-box li { font-size: 12.5px; line-height: 1.7; color: var(--text-dim); }
.soon-box li + li { margin-top: 4px; }
.soon-links { display: flex; flex-direction: column; gap: 8px; }
.soon-links .btn { justify-content: flex-start; text-align: left; white-space: normal; line-height: 1.45; }
.soon-note {
  font-size: 11.5px; color: var(--muted); line-height: 1.6; margin: 18px 0 0;
  max-width: 620px; border-top: 1px dashed var(--line); padding-top: 12px;
}
@media (max-width: 820px) {
  .soon-card { padding: 20px 16px; border-radius: 14px; }
  .soon-grid { grid-template-columns: minmax(0, 1fr); }
  .soon-ic { width: 56px; height: 56px; }
  .soon-card h2 { font-size: 17px; }
}

/* About: daftar label→nilai memakai .kv, ditambah penjelasan kecil */
.about-kv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; }
.about-kv > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 8px 11px; border-radius: 9px; background: rgba(11, 17, 32, .5);
  border: 1px solid var(--line); min-width: 0; flex-wrap: wrap;
}
.about-kv span { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.about-kv strong { font-size: 12.5px; color: var(--text); font-family: var(--mono); }
.about-kv small { flex: 1 1 100%; font-size: 11px; color: var(--muted); }
.about-status .stat-line { font-size: 12.5px; }
@media (max-width: 560px) {
  .about-kv > div { flex-direction: column; align-items: flex-start; gap: 3px; }
}

/* Footer jumlah entri tabel router (gaya acuan: "Menampilkan 1 sampai N dari N router") */
.rt-foot { padding: 10px 14px 12px; border-top: 1px solid var(--line); }

/* ---------------------------------------------------------------
   Tabel Router: baris PADAT seperti portal acuan (±40 px per baris).
   Informasi tambahan (jumlah pelanggan, port/relay, jumlah secret, ms)
   tetap ada sebagai baris kecil — bukan dihapus — hanya dibuat rapat.
   --------------------------------------------------------------- */
.rt-table.tbl-compact th { padding-top: 9px; padding-bottom: 9px; }
.rt-table.tbl-compact td { padding-top: 6px; padding-bottom: 6px; vertical-align: middle; }
.rt-table .cell-sub {
  font-size: 10px; line-height: 1.15; margin-top: 1px; opacity: .85;
}
.rt-table .cell-strong { font-size: 12.5px; }
.rt-table .st { font-size: 10px; padding: 1px 5px; }
.rt-table .btn.xs { padding: 3px 7px; font-size: 11px; }

/* Pengaturan router dilipat agar toolbar + tabel langsung terlihat (gaya acuan) */
.rt-settings { margin-top: 14px; }
.rt-settings > summary {
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text-dim);
  padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 10px;
  background: rgba(11, 17, 32, .55); display: flex; align-items: center; gap: 8px;
  list-style: none;
}
.rt-settings > summary::-webkit-details-marker { display: none; }
.rt-settings > summary:hover { background: rgba(99, 102, 241, .12); }
.rt-settings[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.rt-settings-body { display: flex; flex-direction: column; gap: 14px; padding-top: 14px; }

/* ============================================================
   MITRA — PANEL GELAP (permintaan pemilik: "latar belakang hitam")
   Struktur & fitur panel acuan TIDAK berubah; hanya paletnya.
   Caranya: timpa variabel --mk-* (semua komponen .mk-* memakai
   variabel itu), lalu timpa beberapa warna yang di aturan aslinya
   ditulis literal (#fff / biru muda) — itu yang membuat panel ini
   tetap terang kalau hanya variabelnya yang diganti.
   ============================================================ */
.mk-panel.mk-panel--dark {
  --mk-bg: #0d1424;
  --mk-soft: rgba(148, 163, 184, 0.06);
  --mk-line: rgba(148, 163, 184, 0.20);
  --mk-line-2: rgba(148, 163, 184, 0.12);
  --mk-ink: #e8edf7;
  --mk-ink-2: #c3cee2;
  --mk-dim: #7f8ea8;
  --mk-blue: #6366f1;
  --mk-blue-soft: rgba(99, 102, 241, 0.16);
  --mk-green: #34d399;
  --mk-green-soft: rgba(52, 211, 153, 0.14);
  --mk-red: #f87171;
  --mk-red-soft: rgba(248, 113, 113, 0.14);
  --mk-amber: #fbbf24;
  background: var(--mk-bg);
  border-color: var(--mk-line);
  box-shadow: var(--shadow);
}
/* kepala & strip: sedikit lebih terang dari badan panel */
.mk-panel--dark .mk-panel-head { background: rgba(148, 163, 184, 0.05); }
.mk-panel--dark .mk-rail { background: rgba(148, 163, 184, 0.04); }

/* kotak "Perhatian" — biru gelap, bukan biru muda */
.mk-panel--dark .mk-note {
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(99, 102, 241, 0.34);
  color: var(--mk-ink-2);
}
.mk-panel--dark .mk-note > b,
.mk-panel--dark .mk-note > b .ic,
.mk-panel--dark .mk-note li b { color: #a5b4fc; }

/* kontrol yang semula berlatar putih */
.mk-panel--dark .mk-btn,
.mk-panel--dark .mk-per,
.mk-panel--dark .mk-find,
.mk-panel--dark .mk-rail-btn,
.mk-panel--dark .mk-more,
.mk-panel--dark .mk-panel .mv-card,
.mk-panel--dark .mv-card {
  background: rgba(148, 163, 184, 0.07);
  border-color: var(--mk-line);
  color: var(--mk-ink-2);
}
.mk-panel--dark .mk-btn:hover,
.mk-panel--dark .mk-per:hover,
.mk-panel--dark .mk-more:hover,
.mk-panel--dark .mk-rail-btn:hover { background: rgba(148, 163, 184, 0.14); }
/* tombol berwarna tetap berwarna (MENU hijau, TAMBAH biru, HAPUS merah) */
.mk-panel--dark .mk-btn-menu { background: #16a34a; border-color: #16a34a; color: #fff; }
.mk-panel--dark .mk-btn-menu:hover { background: #15803d; }
.mk-panel--dark .mk-btn-add { background: #2563eb; border-color: #2563eb; color: #fff; }
.mk-panel--dark .mk-btn-add:hover { background: #1d4ed8; }
.mk-panel--dark .mk-btn.mk-danger,
.mk-panel--dark .mk-danger { background: #dc2626; border-color: #dc2626; color: #fff; }
.mk-panel--dark .mk-danger:hover { background: #b91c1c; }
.mk-panel--dark .mk-rail-btn.is-on {
  background: var(--mk-green-soft); border-color: rgba(52, 211, 153, .45); color: #6ee7b7;
}
.mk-panel--dark .mk-rail-del:hover {
  background: var(--mk-red-soft); border-color: rgba(248, 113, 113, .45);
}

/* dropdown, menu titik-tiga, input cari */
.mk-panel--dark .mk-dropdown,
.mk-panel--dark .mk-menu {
  background: #131c2e; border-color: var(--mk-line);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .85);
}
.mk-panel--dark .mk-dropdown button { color: var(--mk-ink-2); }
.mk-panel--dark .mk-dropdown button:hover { background: rgba(148, 163, 184, .12); color: var(--mk-ink); }
.mk-panel--dark .mk-dropdown button.mk-danger { background: none; color: var(--mk-red); }
.mk-panel--dark .mk-dropdown button.mk-danger:hover { background: var(--mk-red-soft); }
.mk-panel--dark .mk-find input { color: var(--mk-ink); }
.mk-panel--dark .mk-find input::placeholder { color: var(--mk-dim); }
/* opsi <select> jumlah per halaman */
.mk-panel--dark select, .mk-panel--dark option { color-scheme: dark; }

/* tabel */
.mk-panel--dark .mk-table th {
  background: rgba(148, 163, 184, 0.06);
  border-bottom-color: var(--mk-line);
  color: #93a3bd;
}
.mk-panel--dark .mk-table td { border-bottom-color: var(--mk-line-2); }
.mk-panel--dark .mk-table tbody tr:hover { background: rgba(148, 163, 184, 0.06); }
.mk-panel--dark .mk-table tbody tr.is-selected { background: rgba(99, 102, 241, 0.16); }

/* badge & label */
.mk-panel--dark .mk-cat,
.mk-panel--dark .mk-vc { background: var(--mk-blue-soft); color: #a5b4fc; }
.mk-panel--dark .mk-vc.zero { background: rgba(148, 163, 184, 0.12); color: var(--mk-dim); }
.mk-panel--dark .mk-status.none i { background: #64748b; }
.mk-panel--dark .mk-status.on { color: #6ee7b7; }
.mk-panel--dark .mk-status.off { color: var(--mk-red); }
.mk-panel--dark .mk-total b { color: var(--mk-red); }

/* bar pilihan massal */
.mk-panel--dark .mk-selection {
  background: rgba(99, 102, 241, 0.14);
  border-top-color: var(--mk-line);
  color: #a5b4fc;
}
/* tombol di kartu HP */
.mk-panel--dark .mv-actions .btn {
  background: rgba(148, 163, 184, 0.08); border-color: var(--mk-line); color: var(--mk-ink-2);
}
.mk-panel--dark .mv-grid small { color: var(--mk-dim); }

/* ============================================================
   PROFILE LANGGANAN — PANEL GELAP (permintaan pemilik)
   Panel & modal form-nya semula TERANG (varian .mk-panel pk-panel).
   Struktur, toolbar, sortir 11 kolom, dan modal 10 baris TIDAK berubah —
   hanya palet. Aturan .pk-* di atas banyak yang menulis warna literal
   (#fff, #fafbfd, #1f2a44, #475569, #f1f3f7, #b9c1cd), jadi semuanya
   ditimpa di sini. Kalau menambah komponen .pk-* baru, periksa hal sama.
   ============================================================ */
.mk-panel.pk-panel.pk-panel--dark {
  --mk-bg: #0d1424;
  --mk-soft: rgba(148, 163, 184, 0.06);
  --mk-line: rgba(148, 163, 184, 0.20);
  --mk-line-2: rgba(148, 163, 184, 0.12);
  --mk-ink: #e8edf7;
  --mk-ink-2: #c3cee2;
  --mk-dim: #7f8ea8;
  --mk-blue: #6366f1;
  --mk-blue-soft: rgba(99, 102, 241, 0.16);
  --mk-red: #f87171;
  --mk-amber: #fbbf24;
  background: #0d1424;
  border-color: var(--mk-line);
  box-shadow: var(--shadow);
}
/* kepala panel */
.pk-panel--dark .pk-head {
  background: rgba(148, 163, 184, 0.05);
  border-bottom: 1px solid var(--mk-line);
}
.pk-panel--dark .pk-head h2 { color: var(--mk-ink); }
.pk-panel--dark .pk-logo { background: rgba(148, 163, 184, 0.12); color: var(--mk-ink); }
.pk-panel--dark .mk-total { color: var(--mk-dim); }

/* toolbar & filter */
.pk-panel--dark .pk-bar {
  background: rgba(148, 163, 184, 0.03);
  border-bottom-color: var(--mk-line-2);
}
.pk-panel--dark .pk-f,
.pk-panel--dark .pk-f select,
.pk-panel--dark .pk-per,
.pk-panel--dark .mk-per,
.pk-panel--dark .mk-find {
  background: rgba(148, 163, 184, 0.07);
  border-color: var(--mk-line);
  color: var(--mk-ink-2);
}
.pk-panel--dark .pk-f:hover { border-color: rgba(148, 163, 184, .45); }
.pk-panel--dark .pk-f select,
.pk-panel--dark .pk-per,
.pk-panel--dark .mk-per { color-scheme: dark; }
.pk-panel--dark .mk-per option,
.pk-panel--dark .pk-per option { background: #0f1726; color: #e6edf9; }
.pk-panel--dark .pk-dd {
  background: #131c2e; border-color: var(--mk-line);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .85);
}
.pk-panel--dark .pk-dd button { color: var(--mk-ink-2); }
.pk-panel--dark .pk-dd button:hover { background: rgba(148, 163, 184, .12); color: var(--mk-ink); }
.pk-panel--dark .pk-dd .is-del { color: var(--mk-red); }
.pk-panel--dark .pk-dd .is-warn { color: var(--mk-amber); }

/* tabel */
.pk-panel--dark .pk-table th {
  background: rgba(148, 163, 184, 0.06);
  border-bottom-color: var(--mk-line);
  color: #93a3bd;
}
.pk-panel--dark .pk-table th + th,
.pk-panel--dark .pk-table td + td { border-left-color: var(--mk-line-2); }
.pk-panel--dark .pk-table td { border-bottom-color: var(--mk-line-2); }
.pk-panel--dark .pk-table tbody tr:hover { background: rgba(148, 163, 184, 0.06); }
.pk-panel--dark .pk-table tbody tr.is-selected { background: rgba(99, 102, 241, 0.16); }
.pk-panel--dark .pk-name a { color: var(--mk-ink); }
.pk-panel--dark .pk-name a:hover { color: #a5b4fc; }
.pk-panel--dark .pk-mono,
.pk-panel--dark .pk-rate { color: var(--mk-ink-2); }
.pk-panel--dark .pk-off { background: rgba(148, 163, 184, 0.14); color: var(--mk-dim); }
.pk-panel--dark .pk-n { background: var(--mk-blue-soft); color: #a5b4fc; }
.pk-panel--dark .pk-n.zero { background: rgba(148, 163, 184, 0.12); color: var(--mk-dim); }
.pk-panel--dark .pk-sa::before { border-bottom-color: #64748b; }
.pk-panel--dark .pk-sa::after { border-top-color: #64748b; }
.pk-panel--dark .pk-th.is-asc,
.pk-panel--dark .pk-th.is-desc { color: #a5b4fc; }

/* aksi baris + pager + kartu HP
   CATATAN: jangan menulis `.pk-panel--dark .pk-panel ...` — `.mk-menu` adalah anak
   LANGSUNG `.pk-panel`, jadi selektor itu tidak cocok dan menu tetap putih. */
.pk-panel--dark .mk-more { background: rgba(148, 163, 184, 0.07); border-color: var(--mk-line); color: var(--mk-ink-2); }
.pk-panel--dark .mk-more:hover { background: rgba(148, 163, 184, 0.14); }
.pk-panel--dark .mk-menu {
  background: #131c2e; border-color: var(--mk-line);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .85);
}
.pk-panel--dark .mk-menu .btn {
  background: transparent; border-color: var(--mk-line); color: var(--mk-ink-2);
}
.pk-panel--dark .mk-menu .btn:hover { background: rgba(148, 163, 184, .12); color: var(--mk-ink); }
/* bar pilihan massal (muncul setelah baris dicentang) */
.pk-panel--dark .mk-selection {
  background: rgba(99, 102, 241, 0.14); border-top-color: var(--mk-line); color: #a5b4fc;
}
.pk-panel--dark .mk-selection .mk-btn { background: rgba(148, 163, 184, .10); border-color: var(--mk-line); color: var(--mk-ink); }
.pk-panel--dark .mk-selection .mk-btn-add { background: #2563eb; border-color: #2563eb; color: #fff; }
.pk-panel--dark .mk-selection .mk-danger { background: #dc2626; border-color: #dc2626; color: #fff; }
.pk-panel--dark .pager { color: var(--mk-dim); border-top-color: var(--mk-line-2); }
.pk-panel--dark .pager .pg { background: rgba(148, 163, 184, .07); border-color: var(--mk-line); color: var(--mk-ink-2); }
.pk-panel--dark .pager .pg.active { background: #6366f1; border-color: #6366f1; color: #fff; }
.pk-panel--dark .pk-card { background: rgba(148, 163, 184, 0.05); border-color: var(--mk-line); }
.pk-panel--dark .pk-card-head strong,
.pk-panel--dark .pk-card-grid strong { color: var(--mk-ink); }
.pk-panel--dark .pk-card-foot .btn { background: rgba(148, 163, 184, .08); border-color: var(--mk-line); color: var(--mk-ink-2); }

/* ---------------------------------------------- modal form (10 baris) */
.modal-box.pk-modal.pk-modal--dark {
  background: #0f1726; border-color: var(--mk-line); color: var(--mk-ink);
  --line: rgba(148, 163, 184, .20); --line-strong: rgba(148, 163, 184, .28);
  --text: #e8edf7; --text-dim: #c3cee2; --muted: #7f8ea8;
  --mk-line: rgba(148, 163, 184, .20); --mk-ink: #e8edf7; --mk-ink-2: #c3cee2;
  --mk-dim: #7f8ea8; --mk-blue: #6366f1; --mk-soft: rgba(148, 163, 184, .08);
  box-shadow: 0 40px 90px -34px rgba(0, 0, 0, .9);
}
.pk-modal--dark .modal-head { border-bottom-color: var(--mk-line); }
.pk-modal--dark .modal-head h3 { color: var(--mk-ink); }
.pk-modal--dark .icon-btn { color: var(--mk-dim); }
.pk-modal--dark .icon-btn:hover { background: rgba(248, 113, 113, .14); color: var(--mk-red); }
.pk-modal--dark .pk-row > .lbl { color: var(--mk-ink-2); }
.pk-modal--dark .pk-help { color: var(--mk-dim); }
.pk-modal--dark input:not([type=color]):not([type=hidden]),
.pk-modal--dark select {
  background: rgba(148, 163, 184, .08); border-color: var(--mk-line); color: var(--mk-ink);
}
.pk-modal--dark select { color-scheme: dark; }
.pk-modal--dark option { background: #0f1726; color: #e6edf9; }
.pk-modal--dark input::placeholder { color: #6b7a94; }
.pk-modal--dark input[type=color] { background: rgba(148,163,184,.08); border-color: var(--mk-line); }
.pk-modal--dark .pk-foot { border-top-color: var(--mk-line); }
.pk-modal--dark .pk-btn-close { background: rgba(148, 163, 184, .18); border-color: transparent; color: var(--mk-ink); }
.pk-modal--dark .pk-btn-close:hover { background: rgba(148, 163, 184, .28); }
.pk-modal--dark .pk-btn-save { background: #6366f1; border-color: #6366f1; color: #fff; }
.pk-modal--dark .pk-btn-save:hover { background: #4f46e5; }

/* ---------------------------------------------------------------
   MENU (dropdown) halaman Data langganan — aksi massal v1.13.33
   Tema gelap; tiap kelompok dipisah garis tipis. Ikon berwarna agar
   mudah dibedakan (aktif hijau, non aktif oranye, isolir merah, buka biru).
   --------------------------------------------------------------- */
.lg-dropdown { min-width: 232px; padding: 6px; }
.lg-dropdown button {
  display: flex; align-items: center; gap: 8px; padding: 8px 9px; border-radius: 7px;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
}
.lg-dropdown button .ic { opacity: .9; }
.lg-dd-sep { height: 1px; background: var(--mk-line, rgba(148,163,184,.2)); margin: 5px 4px; }
.lg-dropdown .lg-ok { color: #34d399; }
.lg-dropdown .lg-warn { color: #fbbf24; }
.lg-dropdown .lg-danger { color: #f87171; }
.lg-dropdown .lg-info { color: #60a5fa; }
.lg-dropdown .mk-danger { color: #f87171; }

/* ============================================================
   BERHENTI LANGGANAN (sub-menu Langganan → Stop langganan)
   Tata letak mengikuti portal acuan, TEMA TETAP GELAP.
   ============================================================ */
.lg-page--stop { display: flex; flex-direction: column; gap: 14px; }

/* banner penjelasan: hijau lembut di atas latar gelap */
.lg-stop-note {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 16px; border-radius: 10px;
  background: rgba(52, 211, 153, .10);
  border: 1px solid rgba(52, 211, 153, .32);
  color: var(--text-dim); font-size: 12.5px; line-height: 1.6;
}
.lg-stop-note .ic { color: #34d399; flex: 0 0 auto; margin-top: 2px; }
.lg-stop-note b { color: #6ee7b7; font-weight: 600; }

/* toolbar: tombol di kiri, filter+cari di kanan */
.lg-stop-filters { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.lg-stop-filters .lg-per {
  height: 32px; min-width: 64px; padding: 0 8px; border-radius: 7px;
  background: rgba(148, 163, 184, .07); border: 1px solid var(--line-strong);
  color: var(--text); font: inherit; font-size: 12px; color-scheme: dark;
}
.lg-stop-filters .lg-per option { background: #0f1726; color: #e6edf9; }
.lg-stop-filters .lg-find {
  display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px;
  border-radius: 7px; background: rgba(148, 163, 184, .07);
  border: 1px solid var(--line-strong); min-width: 240px;
}
.lg-stop-filters .lg-find .ic { color: var(--muted); }
.lg-stop-filters .lg-find input {
  border: 0; background: none; outline: none; color: var(--text);
  font: inherit; font-size: 12.5px; width: 100%; min-width: 0;
}
.lg-stop-filters .lg-find input::placeholder { color: var(--muted); }

/* tabel berhenti langganan */
.lg-page--stop .lg-table-wrap {
  border: 1px solid var(--line-strong); border-radius: 12px; overflow: auto;
  background: rgba(11, 17, 32, .55);
}
.lg-table--stop { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.lg-table--stop th {
  position: sticky; top: 0; z-index: 1; text-align: left; white-space: nowrap;
  font-size: 10px; letter-spacing: .07em; text-transform: uppercase; font-weight: 700;
  color: var(--muted); padding: 10px 12px;
  background: rgba(148, 163, 184, .07); border-bottom: 1px solid var(--line-strong);
}
.lg-table--stop td {
  padding: 11px 12px; border-bottom: 1px solid var(--line); white-space: nowrap;
  vertical-align: middle; color: var(--text-dim);
}
.lg-table--stop tbody tr:hover { background: rgba(148, 163, 184, .06); }
.lg-table--stop tbody tr.is-selected { background: rgba(99, 102, 241, .16); }
.lg-table--stop .lg-name small { display: block; font-size: 10.5px; color: var(--muted); }
.lg-table--stop .lg-check { width: 38px; text-align: center; }
.lg-table--stop .lg-check input { width: 15px; height: 15px; accent-color: #6366f1; cursor: pointer; }
.lg-stop-empty { padding: 18px 14px; }

@media (max-width: 760px) {
  .lg-stop-filters { margin-left: 0; width: 100%; }
  .lg-stop-filters .lg-find { min-width: 0; flex: 1 1 160px; }
  .lg-stop-note { font-size: 12px; padding: 11px 13px; }
  .lg-page--stop .lg-bar { flex-wrap: wrap; }
}

/* ============================================================
   LANGGANAN ONLINE & OFFLINE (sub-menu Langganan)
   Tata letak mengikuti portal acuan, TEMA TETAP GELAP.
   ============================================================ */
.lg-table--online, .lg-table--offline { font-size: 11.5px; }
.lg-table--online td, .lg-table--offline td { padding: 10px 12px; }

/* kolom angka/sesi: chip berwarna seperti acuan, versi gelap */
.lg-table--online .on-ip {
  color: #93c5fd; font-weight: 600;
}
.lg-table--online .on-up {
  display: inline-block; padding: 2px 8px; border-radius: 5px;
  background: rgba(251, 191, 36, .14); color: #fcd34d;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
}
.lg-table--online .on-down {
  display: inline-block; padding: 2px 8px; border-radius: 5px;
  background: rgba(96, 165, 250, .14); color: #93c5fd;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
}
.lg-table--online .lg-name a { color: var(--text); }
.lg-table--online .lg-name a:hover { color: #a5b4fc; }

/* offline: telepon (tautan WhatsApp), alamat, tanggal isolir, alasan */
.lg-table--offline .off-wa {
  display: inline-flex; align-items: center; gap: 5px;
  color: #34d399; text-decoration: none; font-family: var(--mono);
}
.lg-table--offline .off-wa:hover { text-decoration: underline; }
.lg-table--offline .off-addr { max-width: 170px; overflow: hidden; text-overflow: ellipsis; }
.lg-table--offline .off-due { color: #f87171; font-family: var(--mono); font-weight: 600; }
.lg-table--offline .off-reason { color: var(--text-dim); font-size: 11px; }
.lg-table--online .lg-name a, .lg-table--offline .lg-name a { text-decoration: none; }

/* =====================================================================
   SERVER VPN (halaman TIPS VPN) — ringkasan keadaan router hub
   Semua angka berasal dari ROUTER, jadi tabel dibuat rapat & mudah dipindai.
   ===================================================================== */
.vs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
  margin-top: 10px;
}
.vs-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
}
.vs-row span {
  color: var(--muted);
  font-size: 12px;
}
.vs-row strong {
  font-size: 12.5px;
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}
.vs-accts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
}
.vs-acct {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 7px 10px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12px;
}
.vs-acct-name {
  font-weight: 700;
  min-width: 120px;
}
@media (max-width: 760px) {
  .vs-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .vs-row strong {
    text-align: left;
  }
  .vs-acct-name {
    min-width: 0;
  }
}

/* =====================================================================
   ROUTER SERVER (ROUTER BILLING) — kartu terpisah di atas tabel router.
   Tabel /routers hanya berisi router YANG DI-BILLING; hub punya kartu ini.
   ===================================================================== */
.rt-srv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin: 14px 0;
  border-radius: 13px;
  background: linear-gradient(120deg, rgba(56, 189, 248, 0.1), rgba(147, 51, 234, 0.08));
  border: 1px solid rgba(120, 170, 255, 0.22);
}
.rt-srv-main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.rt-srv-ic {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(96, 165, 250, 0.18);
  color: #bfdbfe;
}
.rt-srv-txt {
  min-width: 0;
}
.rt-srv-txt strong {
  display: block;
  font-size: 13.5px;
}
.rt-srv-txt small {
  display: block;
  color: var(--muted);
  font-size: 11.5px;
  margin-top: 2px;
  overflow-wrap: anywhere;
}
.rt-srv-side {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
@media (max-width: 720px) {
  .rt-srv {
    padding: 11px 12px;
  }
  .rt-srv-side {
    width: 100%;
  }
  .rt-srv-side .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* Hasil "Uji jalur" portal → router (halaman TIPS VPN) */
.acc-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.07);
  font-size: 12px;
}
.acc-row code {
  overflow-wrap: anywhere;
}

/* =====================================================================
   Kotak galat DI DALAM form (validasi klien & galat server).
   Tanpa ini, form panjang (mis. MITRA) bisa "tidak bereaksi" sama sekali
   karena validasi bawaan browser membatalkan submit tanpa pesan terlihat.
   ===================================================================== */
.form-error {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: 11px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #fecaca;
  background: rgba(220, 38, 38, 0.14);
  border: 1px solid rgba(248, 113, 113, 0.45);
}
.form-error strong {
  color: #fee2e2;
  margin-right: 6px;
}
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
  border-color: rgba(248, 113, 113, 0.75) !important;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.12);
}

/* =====================================================================
   Modal SERVER GenieACS — satu kolom, mengikuti portal acuan
   (Nama Server · Host/IP · Port NBI · Username · Password + Hubungkan)
   ===================================================================== */
.modal-box.acs-modal {
  max-width: 520px;
}
.acs-form {
  grid-template-columns: minmax(0, 1fr);
}
.acs-form .span2 {
  grid-column: auto;
}
.acs-form .form-foot {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.acs-form .form-foot .btn {
  flex: 1 1 auto;
  justify-content: center;
}
#acs-probe-result .wan-result {
  margin-top: 4px;
}

/* =====================================================================
   GENIEACS — toolbar berwarna (mengikuti portal acuan) + daftar server
   + generator DHCP Option 43.
   Warna tombol SENGAJA sama dengan acuan: SUMMON hijau, REBOOT biru,
   DELETE merah, RESET kuning, SINKRON hijau tua, DHCP43 merah, SERVER biru.
   ===================================================================== */
.ga-toolbar .ga-b-summon {
  background: linear-gradient(180deg, #22c55e, #16a34a);
  border-color: #15803d;
  color: #fff;
}
.ga-toolbar .ga-b-reboot {
  background: linear-gradient(180deg, #3b82f6, #2563eb);
  border-color: #1d4ed8;
  color: #fff;
}
.ga-toolbar .ga-b-delete {
  background: linear-gradient(180deg, #ef4444, #dc2626);
  border-color: #b91c1c;
  color: #fff;
}
.ga-toolbar .ga-b-sync {
  background: linear-gradient(180deg, #14b8a6, #0d9488);
  border-color: #0f766e;
  color: #fff;
}
.ga-toolbar .ga-b-dhcp {
  background: linear-gradient(180deg, #e11d48, #be123c);
  border-color: #9f1239;
  color: #fff;
}
.ga-toolbar .ga-b-server {
  background: linear-gradient(180deg, #60a5fa, #3b82f6);
  border-color: #2563eb;
  color: #06121f;
}
.ga-toolbar .ga-b-reset {
  background: linear-gradient(180deg, #fbbf24, #f59e0b);
  border: 1px solid #b45309;
  color: #241a02;
  border-radius: 9px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 650;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: not-allowed;
  opacity: .85;
}
.ga-toolbar .btn[disabled] {
  filter: saturate(.35);
}
/* Kolom FLAG: checkbox + label huruf kecil seperti acuan */
.ga-table th.ga-flag {
  white-space: nowrap;
}
.ga-table th.ga-flag span {
  margin-left: 8px;
  font-size: 10px;
  letter-spacing: .06em;
}

/* ---------- DAFTAR SERVER GENIEACS ---------- */
.modal-box.acs-list-modal {
  max-width: 700px;
}
.ga-warn {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 11px;
  background: rgba(250, 204, 21, 0.12);
  border: 1px solid rgba(250, 204, 21, 0.4);
  font-size: 12.5px;
}
.ga-warn strong {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #fde68a;
  font-size: 13px;
}
.ga-warn p {
  margin: 6px 0 0;
  color: #f6e6b4;
  line-height: 1.55;
}
.ga-srv-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.ga-srv-add {
  background: linear-gradient(180deg, #22c55e, #16a34a);
  border-color: #15803d;
  color: #fff;
  font-weight: 700;
}
.ga-srv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--muted);
}
.ga-srv-head select {
  width: auto;
  margin: 0 6px;
}
.ga-srv-search input {
  width: 200px;
  display: inline-block;
}
.ga-srv-table td,
.ga-srv-table th {
  vertical-align: middle;
}
.ga-srv-table .btn.xs {
  padding: 4px 10px;
  font-size: 11px;
}
.ga-srv-table .ga-srv-dl {
  background: rgba(125, 211, 252, 0.16);
  border-color: rgba(125, 211, 252, 0.4);
  color: #bae6fd;
  text-decoration: none;
}
.ga-srv-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.ga-srv-pager {
  display: inline-flex;
  gap: 4px;
}
.ga-pg {
  min-width: 34px;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 11.5px;
  cursor: pointer;
}
.ga-pg[disabled] {
  opacity: .45;
  cursor: not-allowed;
}
.ga-pg.is-active {
  background: #2563eb;
  border-color: #1d4ed8;
  color: #fff;
}

/* ---------- DHCP Option 43 ---------- */
.d43-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
  font-size: 12px;
}
.d43-row > span:first-child {
  min-width: 84px;
  color: var(--muted);
}
.d43-row code {
  overflow-wrap: anywhere;
  flex: 1 1 220px;
}
#d43-result .rt-script {
  margin: 6px 0;
  max-height: 220px;
  overflow: auto;
}
@media (max-width: 720px) {
  .ga-srv-search input {
    width: 100%;
  }
  .ga-srv-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .ga-srv-foot {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* =====================================================================
   DETAIL ONT (halaman GenieACS) — aksi setara portal GenieACS:
   Refresh/Reboot, Tambah WAN, aktif-nonaktifkan & hapus WAN,
   ubah SSID / sandi WiFi per instance.
   ===================================================================== */
.ont-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.ont-actions #ont-action-note {
  margin-left: auto;
}
.ont-form {
  margin: 10px 0 14px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(96, 165, 250, 0.07);
  border: 1px solid rgba(120, 170, 255, 0.22);
}
.ont-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}
.ont-form-grid .span2 {
  grid-column: span 2;
}
.ont-tbl th,
.ont-tbl td {
  vertical-align: middle;
}
.ont-tbl .nowrap,
.ont-tbl td:last-child {
  white-space: nowrap;
}
.ont-inp {
  width: 100%;
  min-width: 90px;
  padding: 5px 8px;
  font-size: 12px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}
.ont-inp:focus {
  outline: none;
  border-color: #60a5fa;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
}
#ont-action-result .wan-result {
  margin: 0 0 12px;
}
@media (max-width: 760px) {
  .ont-form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ont-form-grid .span2 {
    grid-column: auto;
  }
  .ont-actions #ont-action-note {
    margin-left: 0;
    width: 100%;
  }
}

/* =====================================================================
   MASTER DATA PELANGGAN (/clients) — toolbar, tabel, form modal, pager.
   Tema GELAP (sama dengan aplikasi ini); kolom mengikuti portal acuan tetapi
   hanya kolom yang datanya benar-benar ada.
   ===================================================================== */
.cl-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.cl-toolbar .btn { padding: 7px 12px; font-size: 12px; font-weight: 650; }
.cl-menu-btn { background: linear-gradient(180deg, #38bdf8, #0284c7); border-color: #0369a1; color: #04121c; }
.cl-export { background: linear-gradient(180deg, #ef4444, #dc2626); border-color: #b91c1c; color: #fff; }
.cl-pw { background: linear-gradient(180deg, #3b82f6, #2563eb); border-color: #1d4ed8; color: #fff; }
.cl-empty { background: linear-gradient(180deg, #fbbf24, #f59e0b); border-color: #b45309; color: #241a02; }
.cl-add { background: linear-gradient(180deg, #22c55e, #16a34a); border-color: #15803d; color: #fff; }
.cl-picked {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--muted);
  font-family: var(--mono);
}
.cl-filters-wrap { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.cl-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cl-filters .cl-per { width: auto; }
.cl-filters .cl-search { flex: 1 1 240px; min-width: 160px; }
.cl-picked-inline { font-size: 11.5px; color: var(--muted); }

.cl-table th { white-space: nowrap; }
.cl-table td { vertical-align: middle; }
.cl-table tbody tr:hover { background: rgba(96, 165, 250, 0.06); cursor: pointer; }
.cl-addr { max-width: 220px; }
.cl-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  letter-spacing: 0.03em;
  background: rgba(148, 163, 184, 0.18);
  border: 1px solid rgba(148, 163, 184, 0.3);
}
.cl-route {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: #bae6fd;
}
.cl-foot-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 12px;
}
.cl-pager { display: inline-flex; gap: 4px; align-items: center; }
.cl-pg {
  min-width: 34px;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 11.5px;
  cursor: pointer;
}
.cl-pg[disabled] { opacity: 0.45; cursor: not-allowed; }
.cl-pg.is-active { background: #2563eb; border-color: #1d4ed8; color: #fff; }
.cl-dots { color: var(--muted); padding: 0 4px; }

.cl-tiles { display: inline-flex; gap: 10px; flex-wrap: wrap; }
.cl-tile {
  display: inline-flex;
  flex-direction: column;
  padding: 5px 10px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
}
.cl-tile small { font-size: 9.5px; letter-spacing: 0.06em; color: var(--muted); }
.cl-tile strong { font-size: 14px; font-family: var(--mono); }

/* kartu HP */
.cl-cards { display: none; }
.cl-card {
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  margin-bottom: 10px;
}
.cl-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cl-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin-top: 8px; }
.cl-card-grid small { display: block; color: var(--muted); font-size: 10px; }
.cl-card-sub { margin-top: 8px; font-size: 11.5px; color: var(--muted); }

/* ---------------- form modal PELANGGAN (acuan: label kiri) ---------------- */
.modal-box.cl-modal { max-width: 460px; }
.cl-form { display: flex; flex-direction: column; gap: 10px; }
.cl-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 4px 12px; align-items: start; }
.cl-lbl { font-size: 12.5px; color: var(--text); padding-top: 7px; }
.cl-lbl .req { color: #f87171; font-style: normal; }
.cl-cell { min-width: 0; }
.cl-cell input,
.cl-cell select,
.cl-cell textarea { width: 100%; }
.cl-help { display: block; margin-top: 3px; font-size: 10.5px; color: var(--muted); }
.cl-help.ok { color: #34d399; }
.cl-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

/* ---------------- pemilih data pelanggan di form Tambah langganan ---------------- */
.cn-pick { display: flex; gap: 7px; flex-wrap: wrap; }
.cn-pick input { flex: 1 1 220px; min-width: 0; }
.cn-client-info {
  margin-top: 6px;
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 11.5px;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.28);
  color: #bbf7d0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.cn-access {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  padding: 5px 9px;
  border-radius: 8px;
  font-size: 11px;
}
.cn-access.is-full { background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.25); color: #bbf7d0; }
.cn-access.is-limited { background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.3); color: #fde68a; }

@media (max-width: 900px) {
  .cl-cards { display: block; }
  .cl-picked-inline { display: none; }
}
@media (max-width: 560px) {
  .cl-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .cl-lbl { padding-top: 0; }
  .cl-foot { flex-direction: column-reverse; }
  .cl-foot .btn { width: 100%; justify-content: center; }
}

/* =====================================================================
   DATA PELANGGAN — panel TERANG persis portal acuan (clx-*)
   Di-scope ke .clx-panel saja; tema gelap aplikasi tidak berubah.
   ===================================================================== */
.clx-panel {
  --clx-bg: #ffffff;
  --clx-ink: #1f2937;
  --clx-dim: #6b7280;
  --clx-line: #e5e7eb;
  --clx-head: #f8fafc;
  background: var(--clx-bg);
  color: var(--clx-ink);
  border-radius: 12px;
  border: 1px solid #dfe3ea;
  overflow: hidden;
  box-shadow: 0 20px 45px -30px rgba(2, 6, 23, 0.45);
}
.clx-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-bottom: 1px solid var(--clx-line);
}
.clx-head h2 {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.03em;
  color: var(--clx-ink);
  display: flex;
  align-items: center;
  gap: 8px;
}
.clx-head h2 svg { color: #111827; }
.clx-count { font-size: 11.5px; color: var(--clx-dim); }

/* toolbar tombol berwarna (MENU biru · EXPORT merah · PW MASSAL biru ·
   KOSONGKAN PW oranye · TAMBAH hijau) */
.clx-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 16px; }
.clx-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border-radius: 5px;
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.5;
}
.clx-btn--menu { background: #2563eb; border-color: #1d4ed8; }
.clx-btn--export { background: #dc2626; border-color: #b91c1c; }
.clx-btn--pw { background: #2563eb; border-color: #1d4ed8; }
.clx-btn--empty { background: #f59e0b; border-color: #d97706; color: #3b2401; }
.clx-btn--add { background: #16a34a; border-color: #15803d; }
.clx-btn:hover { filter: brightness(1.06); }
.clx-menu-wrap { position: relative; display: inline-flex; }
.clx-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 220px;
  padding: 6px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #d8dee8;
  box-shadow: 0 22px 44px -22px rgba(15, 23, 42, 0.4);
  display: flex;
  flex-direction: column;
}
.clx-menu[hidden] { display: none; }
.clx-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #1f2937;
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
}
.clx-menu button:hover { background: #f1f5f9; }
.clx-menu button.is-danger { color: #b91c1c; }
.clx-picked { margin-left: auto; font-size: 11px; color: var(--clx-dim); }

/* filter */
.clx-filter {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  padding: 0 16px 10px;
  border-bottom: 1px solid var(--clx-line);
}
.clx-per,
.clx-search {
  padding: 6px 9px;
  border-radius: 6px;
  border: 1px solid #cfd6e2;
  background: #fff;
  color: var(--clx-ink);
  font-size: 12px;
}
.clx-per { width: 68px; }
.clx-search { flex: 1 1 240px; min-width: 160px; }
.clx-go {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #cfd6e2;
  background: #f8fafc;
  color: #1f2937;
  cursor: pointer;
}
.clx-reset-link { font-size: 11.5px; color: #2563eb; }
.clx-meta { font-size: 11px; color: var(--clx-dim); margin-left: auto; }

/* tabel */
.clx-table-wrap { overflow-x: auto; }
.clx-table { width: 100%; border-collapse: collapse; font-size: 12px; color: var(--clx-ink); }
.clx-table thead th {
  background: var(--clx-head);
  border-bottom: 1px solid var(--clx-line);
  border-top: 1px solid var(--clx-line);
  padding: 9px 10px;
  text-align: left;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: #374151;
  font-weight: 700;
  white-space: nowrap;
}
.clx-table tbody td {
  padding: 11px 10px;
  border-bottom: 1px solid #eef1f6;
  vertical-align: middle;
}
.clx-table tbody tr:hover { background: #f8fafc; cursor: pointer; }
.clx-pick { width: 34px; }
.clx-uid { font-family: var(--mono); font-size: 11.5px; color: #374151; white-space: nowrap; }
.clx-name { font-size: 12px; }
.clx-sub { font-size: 10px; color: var(--clx-dim); }
.clx-addr { max-width: 240px; }
.clx-dim { color: #9ca3af; }
.clx-num { text-align: right; white-space: nowrap; font-family: var(--mono); font-size: 11.5px; }
.clx-center { text-align: center; }
.clx-nowrap { white-space: nowrap; font-size: 11px; color: #4b5563; }
.clx-tag {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9.5px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
}
.clx-sort { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.clx-sort.is-on { color: #1d4ed8; }
.clx-arrow { font-size: 10px; opacity: 0.65; }
.clx-sort.is-on .clx-arrow { opacity: 1; }

/* nomor HP: tautan WhatsApp hijau (seperti acuan) */
.clx-wa {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #16a34a;
  font-family: var(--mono);
  font-size: 11.5px;
  text-decoration: none;
}
.clx-wa:hover { text-decoration: underline; }

/* AUTO LOGIN: tombol kotak biru saat aktif, "-" saat mati */
.clx-auto {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border-radius: 5px;
  border: 1px solid #cfd6e2;
  background: #fff;
  color: #6b7280;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}
.clx-auto.is-on { background: #2563eb; border-color: #1d4ed8; color: #fff; }
.clx-auto[disabled] { opacity: 0.6; cursor: wait; }

/* RESET PW: tombol ikon oranye */
.clx-reset-btn { border: 0; background: transparent; padding: 0; cursor: pointer; }
.clx-reset {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 5px;
  background: #f59e0b;
  color: #fff;
  border: 1px solid #d97706;
}
.clx-reset-btn:hover .clx-reset { filter: brightness(1.08); }

/* footer + pager */
.clx-foot-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-top: 1px solid var(--clx-line);
  font-size: 11.5px;
  color: var(--clx-dim);
}
.clx-pager { display: inline-flex; gap: 0; }
.clx-pg {
  min-width: 34px;
  padding: 6px 10px;
  border: 1px solid #cfd6e2;
  border-left: 0;
  background: #fff;
  color: #1f2937;
  font-size: 11.5px;
  text-decoration: none;
  text-align: center;
}
.clx-pg:first-child { border-left: 1px solid #cfd6e2; border-radius: 5px 0 0 5px; }
.clx-pg:last-child { border-radius: 0 5px 5px 0; }
.clx-pg.is-active { background: #2563eb; border-color: #1d4ed8; color: #fff; }
.clx-pg.is-dis { color: #c1c7d2; pointer-events: none; }
.clx-dots { padding: 6px 8px; color: #9ca3af; }

/* hasil pencarian di form Tambah langganan */
.cn-hit-head {
  padding: 6px 2px 3px;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
}
@media (max-width: 900px) {
  .clx-head { padding: 12px; }
  .clx-bar { padding: 8px 10px; }
  .clx-filter { padding: 0 10px 8px; }
  .clx-meta { display: none; }
  .clx-table { font-size: 11px; }
}

/* kotak hasil aksi di halaman Data Pelanggan (di dalam panel terang) */
.clx-panel .clx-result { padding: 0 16px; }
.clx-panel .clx-result:not(:empty) { padding: 10px 16px; }
.clx-panel .wan-result { margin: 0; }
.clx-panel .wan-res-head { color: #0f172a; }
.clx-panel .wan-result.is-ok { background: rgba(22, 163, 74, 0.1); border-color: rgba(22, 163, 74, 0.35); }
.clx-panel .wan-result.is-err { background: rgba(220, 38, 38, 0.1); border-color: rgba(220, 38, 38, 0.35); }
.clx-panel .wan-result .small { color: #334155; }

/* =====================================================================
   PELANGGAN (form Tambah langganan) — kotak "Cari pelanggan" + kaca pembesar
   yang membuka HALAMAN daftar pelanggan (gaya portal acuan).
   ===================================================================== */
.cn-pick2 { display: flex; align-items: stretch; gap: 0; }
.cn-pick2 input {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0;
}
.cn-pick2-btn {
  display: inline-grid;
  place-items: center;
  width: 48px;
  border: 1px solid #2563eb;
  border-radius: 0 9px 9px 0;
  background: linear-gradient(180deg, #3b82f6, #2563eb);
  color: #fff;
  cursor: pointer;
}
.cn-pick2-btn:hover { filter: brightness(1.06); }
.cn-pick2-btn svg { pointer-events: none; }

/* baris ID pelanggan (readonly) + Phone dalam satu baris */
.cn-pg2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}
.cn-pg2-lbl {
  font-size: 12.5px;
  color: var(--text);
  white-space: nowrap;
}
.cn-pg2 input[readonly] {
  background: rgba(148, 163, 184, 0.14);
  color: var(--muted);
  cursor: default;
}

/* banner mode pilih di halaman Data Pelanggan */
.clx-pickbar {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 16px;
  background: #eff6ff;
  border-bottom: 1px solid #bfdbfe;
  color: #1e3a8a;
  font-size: 12.5px;
}
.clx-pickbar svg { flex: 0 0 auto; margin-top: 1px; color: #2563eb; }
.clx-pickbar-back {
  margin-left: 8px;
  color: #1d4ed8;
  font-weight: 700;
  text-decoration: underline;
  white-space: nowrap;
}
.clx-panel.is-pick .clx-row { cursor: pointer; }
.clx-panel.is-pick .clx-row:hover { background: #eff6ff; }

@media (max-width: 700px) {
  .cn-pg2 { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .cn-pg2-lbl { padding-top: 2px; }
}

/* =====================================================================
   DATA PELANGGAN — PANEL GELAP (permintaan pemilik: "latar belakang jadi hitam")
   Blok ini menimpa palet TERANG `.clx-*` di atas (dibaca terakhir → menang).
   Tombol toolbar tetap BERWARNA (MENU biru · EXPORT merah · PW MASSAL biru ·
   KOSONGKAN PW oranye · TAMBAH hijau) seperti acuan.
   ===================================================================== */
.clx-panel {
  --clx-bg: #0d1420;
  --clx-ink: #e6edf9;
  --clx-dim: #93a0b8;
  --clx-line: rgba(255, 255, 255, 0.08);
  --clx-head: #101a29;
  background: var(--clx-bg);
  color: var(--clx-ink);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 24px 60px -40px rgba(0, 0, 0, 0.95);
}
.clx-head { border-bottom-color: var(--clx-line); }
.clx-head h2 { color: var(--clx-ink); }
.clx-head h2 svg { color: #a5b4fc; }
.clx-count { color: var(--clx-dim); }

.clx-menu {
  background: #111b2b;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 22px 44px -22px rgba(0, 0, 0, 0.9);
}
.clx-menu button { color: var(--clx-ink); }
.clx-menu button:hover { background: rgba(255, 255, 255, 0.06); }
.clx-menu button.is-danger { color: #fca5a5; }

.clx-filter { border-bottom-color: var(--clx-line); }
.clx-per,
.clx-search,
.clx-go {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--clx-ink);
  color-scheme: dark;
}
.clx-search::placeholder { color: #7e8ba3; }
.clx-go { color: var(--clx-ink); }
.clx-reset-link { color: #93c5fd; }

.clx-table { color: var(--clx-ink); }
.clx-table thead th {
  background: var(--clx-head);
  border-top-color: var(--clx-line);
  border-bottom-color: var(--clx-line);
  color: #b9c4d8;
}
.clx-table tbody td { border-bottom-color: rgba(255, 255, 255, 0.06); }
.clx-table tbody tr:hover { background: rgba(96, 165, 250, 0.08); }
.clx-uid { color: #c7d2e4; }
.clx-sub { color: var(--clx-dim); }
.clx-dim { color: #6b7a92; }
.clx-nowrap { color: #a9b6cc; }
.clx-sort.is-on { color: #93c5fd; }
.clx-tag {
  background: rgba(251, 191, 36, 0.16);
  color: #fcd34d;
  border-color: rgba(251, 191, 36, 0.4);
}
.clx-auto {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
  color: #8b9bb4;
}
.clx-auto.is-on { background: #2563eb; border-color: #1d4ed8; color: #fff; }

.clx-foot-bar { border-top-color: var(--clx-line); color: var(--clx-dim); }
.clx-pg {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--clx-ink);
}
.clx-pg:first-child { border-left-color: rgba(255, 255, 255, 0.12); }
.clx-pg.is-active { background: #2563eb; border-color: #1d4ed8; color: #fff; }
.clx-pg.is-dis { color: #4b5972; }

/* banner mode pilih (dibuka dari form Tambah langganan) */
.clx-pickbar {
  background: rgba(37, 99, 235, 0.14);
  border-bottom-color: rgba(96, 165, 250, 0.3);
  color: #cfe0fb;
}
.clx-pickbar svg { color: #93c5fd; }
.clx-pickbar-back { color: #93c5fd; }
.clx-panel.is-pick .clx-row:hover { background: rgba(96, 165, 250, 0.1); }

/* kotak hasil aksi di dalam panel gelap */
.clx-panel .wan-res-head { color: #e6edf9; }
.clx-panel .wan-result .small { color: #b9c4d8; }
.clx-panel .wan-result.is-ok { background: rgba(22, 163, 74, 0.14); border-color: rgba(34, 197, 94, 0.35); }
.clx-panel .wan-result.is-err { background: rgba(220, 38, 38, 0.14); border-color: rgba(248, 113, 113, 0.35); }

/* tombol di toolbar tetap berwarna (pastikan tidak ikut tertimpa) */
.clx-btn--menu, .clx-btn--pw { color: #fff; }
.clx-btn--export { color: #fff; }
.clx-btn--empty { color: #241a02; }
.clx-btn--add { color: #fff; }

/* ============================================================
   BILLING → INVOICE PAID (tata letak portal acuan, TEMA GELAP)
   Semua kelas berawalan `ip-`. Jangan pakai `display` di aturan root untuk
   kelas yang dipasangkan dengan `.only-mobile` (kartu HP) — akibatnya kartu
   ikut tampil di desktop karena `.only-mobile{display:none}` kalah urutan.
   ============================================================ */
.ip-page { display: flex; flex-direction: column; gap: 14px; }

.ip-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.ip-head h2 {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
}
.ip-head h2 svg { color: var(--accent); }
.ip-count { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }

/* ---- 4 kartu ringkasan ---- */
.ip-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ip-card {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 16px 18px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(23, 32, 52, .92), rgba(14, 21, 35, .92));
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.ip-txt { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.ip-txt small { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.ip-txt strong {
  font-size: 21px; font-family: var(--mono); font-weight: 700; letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ip-txt em { font-style: normal; font-size: 11px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ip-ic {
  display: grid; place-items: center; width: 46px; height: 46px; flex: 0 0 46px;
  border-radius: 13px; background: rgba(148, 163, 184, .10); color: var(--text-dim);
}
.ip-ic.blue { color: #60a5fa; background: rgba(96, 165, 250, .14); }
.ip-ic.green { color: #34d399; background: rgba(52, 211, 153, .14); }
.ip-ic.orange { color: #fbbf24; background: rgba(251, 191, 36, .14); }
.ip-ic.teal { color: #2dd4bf; background: rgba(45, 212, 191, .14); }

/* ---- toolbar aksi ---- */
.ip-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 11px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.ip-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px; border-radius: 8px; border: 1px solid transparent;
  font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: #0b1120; background: rgba(148, 163, 184, .18); cursor: pointer;
  white-space: nowrap; line-height: 1;
}
.ip-btn:hover { filter: brightness(1.08); }
.ip-btn--dark { background: #334155; color: #e8edf7; }
.ip-btn--wa { background: #16a34a; color: #fff; }
.ip-btn--teal { background: #0d9488; color: #fff; }
.ip-btn--blue { background: #2563eb; color: #fff; }
.ip-btn--green { background: #15803d; color: #fff; }
.ip-btn--orange { background: #d97706; color: #1b1300; }
.ip-btn--ghost { background: rgba(148, 163, 184, .14); color: var(--text); border-color: var(--line-strong); }
.ip-picked { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }

/* ---- filter ---- */
.ip-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ip-sel, .ip-search {
  width: auto; padding: 8px 11px; font-size: 12.5px; font-family: inherit;
  color: var(--text); background: rgba(148, 163, 184, .08);
  border: 1px solid var(--line-strong); border-radius: 9px; min-width: 0;
}
.ip-sel { min-width: 130px; }
.ip-sel--sm { min-width: 76px; max-width: 90px; }
.ip-search { flex: 1 1 220px; min-width: 160px; }
.ip-sel:focus, .ip-search:focus { outline: none; border-color: rgba(34, 211, 238, .5); }

/* ---- tabel ---- */
.ip-cardwrap {
  border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, rgba(23, 32, 52, .92), rgba(13, 20, 34, .92));
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.ip-scroll { overflow-x: auto; }
.ip-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ip-table th {
  position: sticky; top: 0; z-index: 1;
  padding: 10px 12px; text-align: left; white-space: nowrap;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  background: rgba(13, 20, 34, .98); border-bottom: 1px solid var(--line-strong);
}
.ip-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.ip-table tbody tr:hover td { background: rgba(148, 163, 184, .05); }
.ip-table tbody tr:last-child td { border-bottom: none; }
.ip-chk { width: 34px; }
.ip-table input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--accent); }
.ip-sub { font-size: 10.5px; color: var(--muted); }

/* ---- footer + pager ---- */
.ip-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-top: 1px solid var(--line);
}
.ip-showing { font-size: 11.5px; color: var(--muted); font-family: var(--mono); }
.ip-pager { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.ip-pg {
  padding: 6px 11px; border-radius: 7px; font-size: 11.5px; font-weight: 600;
  color: var(--text-dim); background: rgba(148, 163, 184, .10);
  border: 1px solid var(--line);
}
.ip-pg:hover { background: rgba(148, 163, 184, .18); color: var(--text); }
.ip-pg.active { background: #2563eb; color: #fff; border-color: #2563eb; }
.ip-pg.disabled { opacity: .45; pointer-events: none; }
.ip-empty { padding: 26px 16px; }

/* ---- kartu HP (hanya tampil < 900px — lihat aturan media di bawah) ---- */
.ip-mcard {
  padding: 12px; border-radius: 11px;
  background: var(--panel); border: 1px solid var(--line);
}
.ip-mhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ip-pick { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
.ip-pick input { width: 16px; height: 16px; accent-color: var(--accent); }
.ip-mgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ip-mgrid small { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ip-mgrid strong { font-size: 12px; font-weight: 600; }

@media (max-width: 1200px) { .ip-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .ip-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ip-card { padding: 12px; gap: 9px; }
  .ip-txt strong { font-size: 16px; }
  .ip-txt em { display: none; }
  .ip-ic { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 11px; }
  .ip-toolbar, .ip-filters { align-items: stretch; }
  .ip-btn { flex: 1 1 auto; justify-content: center; }
  .ip-picked { margin-left: 0; width: 100%; }
  .ip-sel, .ip-search { width: 100%; max-width: none; }
}
/* Breakpoint kartu HP WAJIB sama dengan .only-mobile (820px). Kalau berbeda,
   antara 821-900px tabel desktop DAN kartu HP tampil bersamaan. */
@media (max-width: 820px) {
  .ip-mcards { display: flex; flex-direction: column; gap: 10px; padding: 10px; }
}
@media (max-width: 420px) {
  .ip-cards { grid-template-columns: minmax(0, 1fr); }
  .ip-mgrid { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   INVOICE PAID — modal detail tagihan (klik nomor invoice / pelanggan)
   Header biru seperti portal acuan; isi tetap TEMA GELAP agar konsisten
   dengan halaman lain. Jangan memberi `display` pada elemen yang dipasangkan
   dengan atribut `hidden` (modal memakai `hidden`, bukan class).
   ============================================================ */
.modal-box.ivp-box { width: 100%; max-width: 760px; padding: 0; overflow: hidden; }
.ivp-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; background: linear-gradient(90deg, #1d6fe8, #2f86f6);
}
.ivp-head h3 {
  flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 700; letter-spacing: .06em;
  color: #fff; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ivp-x {
  width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 30px;
  border-radius: 8px; border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer;
}
.ivp-x:hover { background: rgba(255, 255, 255, .22); }
.ivp-body { padding: 16px; max-height: min(72vh, 720px); overflow-y: auto; }
.ivp-load { padding: 18px 4px; font-size: 12.5px; color: var(--muted); }

.ivp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ivp-card {
  padding: 14px; border-radius: 12px;
  background: rgba(148, 163, 184, .06); border: 1px solid var(--line);
}
.ivp-card-h {
  display: flex; align-items: center; gap: 7px; margin-bottom: 10px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim);
}
.ivp-who { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.ivp-who strong { font-size: 14.5px; }
.ivp-phone { font-family: var(--mono); font-size: 12px; color: var(--text-dim); }
.ivp-kv { display: flex; gap: 8px; font-size: 12px; padding: 2px 0; }
.ivp-kv span { flex: 0 0 108px; color: var(--muted); }
.ivp-kv strong { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.ivp-badge {
  display: inline-block; margin-top: 10px; padding: 3px 10px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; color: #052e1b;
  background: #34d399;
}

.ivp-desc { margin-top: 14px; border-radius: 12px; border: 1px solid var(--line); overflow: hidden; }
.ivp-desc-h {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 9px 14px; background: rgba(148, 163, 184, .10);
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: var(--text-dim);
}
.ivp-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 14px; font-size: 12.5px; border-bottom: 1px solid var(--line);
}
.ivp-row span:first-child { min-width: 0; overflow-wrap: anywhere; }
.ivp-row span:last-child, .ivp-tot span:last-child { font-family: var(--mono); white-space: nowrap; }
.ivp-tot {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 6px 14px; font-size: 12.5px; color: var(--text-dim);
}
.ivp-tot:first-of-type { padding-top: 10px; }
.ivp-grand {
  padding: 10px 14px 12px; font-size: 14px; font-weight: 700; color: var(--text);
  border-top: 1px solid var(--line-strong);
}

.ivp-linkbox { margin-top: 14px; }
.ivp-link-h { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; color: var(--text-dim); margin-bottom: 6px; }
.ivp-link-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ivp-link-row input {
  flex: 1 1 260px; min-width: 0; padding: 9px 11px; font-family: var(--mono); font-size: 11.5px;
  color: var(--text); background: rgba(148, 163, 184, .08);
  border: 1px solid var(--line-strong); border-radius: 9px;
}
.ivp-link-row input:focus { outline: none; border-color: rgba(34, 211, 238, .5); }

.ivp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 14px; border-radius: 9px; border: 1px solid var(--line-strong);
  font-size: 12px; font-weight: 650; line-height: 1; cursor: pointer; white-space: nowrap;
  background: rgba(148, 163, 184, .12); color: var(--text);
}
.ivp-btn:disabled { opacity: .55; cursor: not-allowed; }
.ivp-btn--copy { background: #2563eb; border-color: #2563eb; color: #fff; }
.ivp-btn--open { width: 38px; padding: 9px 0; background: rgba(37, 99, 235, .18); color: #93c5fd; }
.ivp-btn--print { background: #2563eb; border-color: #2563eb; color: #fff; }
.ivp-btn--ghost { background: transparent; }
.ivp-btn--rb { background: transparent; border-color: rgba(248, 113, 113, .6); color: #f87171; }
.ivp-btn--rb:hover:not(:disabled) { background: rgba(248, 113, 113, .12); }

.ivp-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
}
.ivp-foot-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.ivp-note { font-size: 11px; color: var(--muted); flex: 1 1 160px; }

.ivp-rbbox {
  flex: 1 1 100%; padding: 12px; border-radius: 10px;
  background: rgba(248, 113, 113, .08); border: 1px solid rgba(248, 113, 113, .35);
}
.ivp-rbbox strong { display: block; font-size: 12.5px; color: #fca5a5; }
.ivp-rbbox p { margin: 6px 0 10px; font-size: 11.5px; color: var(--text-dim); line-height: 1.45; }
.ivp-rbbox code { font-family: var(--mono); background: rgba(248, 113, 113, .18); padding: 1px 5px; border-radius: 4px; }
.ivp-rbbox label { display: block; font-size: 11.5px; color: var(--text-dim); }
.ivp-rbbox input {
  width: 100%; margin-top: 6px; padding: 8px 10px; font-family: var(--mono); font-size: 12.5px;
  color: var(--text); background: rgba(11, 18, 32, .8);
  border: 1px solid rgba(248, 113, 113, .45); border-radius: 8px;
}
.ivp-rbact { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

@media (max-width: 720px) {
  .ivp-grid { grid-template-columns: minmax(0, 1fr); }
  .ivp-body { padding: 12px; }
  .ivp-kv span { flex: 0 0 92px; }
  .ivp-foot-r { margin-left: 0; width: 100%; }
  .ivp-foot-r .ivp-btn { flex: 1 1 auto; }
  .ivp-btn--rb { width: 100%; }
}

/* ============================================================
   STOP BERLANGGANAN — modal dari tombol TAMBAH (sub-menu Langganan → Stop langganan)
   Tema GELAP (permintaan pemilik). Struktur mengikuti portal acuan:
   No. Layanan + tombol cari · identitas readonly · tanggal · alasan · catatan ·
   perkiraan tagihan · 3 poin info · tombol Tutup / Reset / Stop Berlangganan.
   ============================================================ */
.modal-box.stopf-modal { width: 100%; max-width: 520px; padding: 0; overflow: hidden; }
.stopf-modal .modal-head {
  padding: 14px 16px; border-bottom: 1px solid var(--line-strong);
  background: rgba(148, 163, 184, .07);
}
.stopf-modal .modal-head h3 { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.stopf-modal .modal-body { padding: 16px; max-height: min(74vh, 720px); overflow-y: auto; }

.stopf { display: flex; flex-direction: column; gap: 8px; }
.stopf-lbl { font-size: 11.5px; font-weight: 600; color: var(--text-dim); margin-top: 6px; }

.stopf-find { display: flex; gap: 6px; }
.stopf-find input {
  flex: 1 1 auto; min-width: 0; padding: 9px 11px; font-family: var(--mono); font-size: 12.5px;
  color: var(--text); background: rgba(148, 163, 184, .08);
  border: 1px solid var(--line-strong); border-radius: 8px;
}
.stopf-find input:focus { outline: none; border-color: rgba(34, 211, 238, .55); }
.stopf-search {
  flex: 0 0 40px; width: 40px; display: grid; place-items: center;
  border-radius: 8px; border: 1px solid #2563eb; background: #2563eb; color: #fff; cursor: pointer;
}
.stopf-search:hover { filter: brightness(1.08); }

.stopf-hint { font-size: 10.5px; color: var(--muted); margin: 0; }

/* daftar hasil pencarian */
.stopf-list {
  display: flex; flex-direction: column; gap: 4px; max-height: 190px; overflow-y: auto;
  padding: 6px; border-radius: 9px;
  background: rgba(11, 18, 32, .9); border: 1px solid var(--line-strong);
}
.stopf-list[hidden] { display: none; }
.stopf-load { padding: 8px 6px; font-size: 11.5px; color: var(--muted); }
.stopf-opt {
  display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 2px 10px;
  padding: 7px 9px; border-radius: 7px; border: 1px solid transparent;
  background: transparent; color: var(--text); text-align: left; cursor: pointer;
}
.stopf-opt:hover { background: rgba(37, 99, 235, .16); border-color: rgba(37, 99, 235, .45); }
.stopf-opt b { font-family: var(--mono); font-size: 11.5px; }
.stopf-opt span { font-size: 12.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.stopf-opt small { grid-column: 2; font-size: 10.5px; color: var(--muted); }

/* baris identitas readonly */
.stopf-kv {
  display: flex; gap: 10px; align-items: baseline;
  padding: 6px 0; border-bottom: 1px dashed var(--line);
  font-size: 12px;
}
.stopf-kv span { flex: 0 0 132px; color: var(--muted); }
.stopf-kv b { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }

.stopf select, .stopf textarea, .stopf input[type=date], #stopf-est {
  width: 100%; padding: 9px 11px; font-family: inherit; font-size: 12.5px;
  color: var(--text); background: rgba(148, 163, 184, .08);
  border: 1px solid var(--line-strong); border-radius: 8px;
}
.stopf select:focus, .stopf textarea:focus, .stopf input[type=date]:focus {
  outline: none; border-color: rgba(34, 211, 238, .55);
}
.stopf textarea { resize: vertical; min-height: 66px; }
#stopf-est { font-family: var(--mono); color: var(--text-dim); }

/* 3 poin info (gaya kotak hijau di acuan → versi gelap) */
.stopf-info {
  margin: 10px 0 2px; padding: 11px 14px 11px 30px; border-radius: 9px;
  background: rgba(52, 211, 153, .09); border: 1px solid rgba(52, 211, 153, .28);
  font-size: 11.5px; line-height: 1.55; color: #a7f3d0;
}
.stopf-info li::marker { color: #34d399; }

.stopf-result:empty { display: none; }
.stopf-ok, .stopf-err { padding: 10px 12px; border-radius: 9px; font-size: 11.5px; line-height: 1.5; }
.stopf-ok { background: rgba(52, 211, 153, .10); border: 1px solid rgba(52, 211, 153, .32); color: #a7f3d0; }
.stopf-ok p { margin: 4px 0 0; color: var(--text-dim); }
.stopf-err { background: rgba(248, 113, 113, .10); border: 1px solid rgba(248, 113, 113, .34); color: #fca5a5; }

.stopf-foot {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
}
.stopf-btn {
  padding: 9px 15px; border-radius: 8px; border: 1px solid var(--line-strong);
  font-size: 12px; font-weight: 650; line-height: 1; cursor: pointer; white-space: nowrap;
  background: rgba(148, 163, 184, .14); color: var(--text);
}
.stopf-btn:disabled { opacity: .5; cursor: not-allowed; }
.stopf-btn--ghost { background: transparent; }
.stopf-btn--reset { background: #d97706; border-color: #d97706; color: #1b1300; }
.stopf-btn--go { background: #dc2626; border-color: #dc2626; color: #fff; }
.stopf-btn--go:hover:not(:disabled) { filter: brightness(1.08); }

/* sub-teks alasan berhenti di tabel (kolom TGL STOP) */
.lg-table .lg-sub { display: block; font-size: 10px; color: var(--muted); margin-top: 2px; max-width: 180px; }

@media (max-width: 560px) {
  .stopf-kv span { flex: 0 0 104px; }
  .stopf-foot .stopf-btn { flex: 1 1 auto; }
  .stopf-opt { grid-template-columns: minmax(0, 1fr); }
  .stopf-opt small { grid-column: 1; }
}

/* ============================================================
   DIAGNOSA AKUN PELANGGAN (halaman detail pelanggan)
   Menampilkan tiap langkah pemeriksaan: jaringan → login → izin → akun.
   ============================================================ */
.acct-diag:empty { display: none; }
.acct-diag-card {
  border-radius: 12px; border: 1px solid var(--line-strong);
  background: rgba(148, 163, 184, .05); padding: 14px 16px; margin-bottom: 4px;
}
.acct-diag-card.is-ok { border-color: rgba(52, 211, 153, .38); background: rgba(52, 211, 153, .06); }
.acct-diag-card.is-err { border-color: rgba(248, 113, 113, .38); background: rgba(248, 113, 113, .06); }
.acct-diag-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.acct-diag-head strong { font-size: 13px; }
.acct-diag-route { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.acct-diag-head .btn { margin-left: auto; }
.acct-diag-steps { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.acct-diag-steps li { display: flex; gap: 9px; font-size: 12px; line-height: 1.5; }
.acct-diag-ic {
  flex: 0 0 18px; width: 18px; height: 18px; display: grid; place-items: center;
  border-radius: 50%; font-size: 10px; font-weight: 700;
}
.acct-diag-steps li.ok .acct-diag-ic { background: rgba(52, 211, 153, .18); color: #34d399; }
.acct-diag-steps li.err .acct-diag-ic { background: rgba(248, 113, 113, .18); color: #f87171; }
.acct-diag-txt { min-width: 0; overflow-wrap: anywhere; }
.acct-diag-txt small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.acct-diag-fix {
  border-radius: 9px; border: 1px solid rgba(251, 191, 36, .35);
  background: rgba(251, 191, 36, .08); padding: 10px 12px; font-size: 11.5px; line-height: 1.55;
}
.acct-diag-fix ol { margin: 6px 0 0; padding-left: 18px; }
.acct-diag-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.acct-diag-steps li.warn .acct-diag-ic { background: rgba(251, 191, 36, .18); color: #fbbf24; }

/* Sorotan kolom "Alamat server RADIUS" saat dibuka dari tombol strip halaman Router. */
input.is-attention {
  animation: attn 0.9s ease-in-out 2;
  border-color: rgba(34, 211, 238, .8) !important;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .18);
}
@keyframes attn { 0%, 100% { box-shadow: 0 0 0 3px rgba(34,211,238,.10); } 50% { box-shadow: 0 0 0 5px rgba(34,211,238,.30); } }

/* =====================================================================
   NAMA ROUTER sebagai tombol Edit (v1.13.79)
   ---------------------------------------------------------------------
   Nama router di tabel dijadikan <button class="linklike"> supaya bisa diklik
   untuk membuka modal Edit. Tanpa aturan ini, <button> memakai gaya bawaan
   browser: LATAR PUTIH + border → nama router tampak sebagai blok putih dan
   teksnya tidak terbaca (bug yang dilaporkan lewat screenshot).
   ===================================================================== */
button.linklike {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
button.linklike:hover,
button.linklike:focus-visible { color: #22d3ee; text-decoration: underline; }
button.linklike:focus-visible { outline: 2px solid rgba(34, 211, 238, .55); outline-offset: 2px; border-radius: 4px; }

/* Tombol kecil EDIT di kolom aksi tabel router */
.btn.xs.is-edit { padding: 2px 7px; font-size: 11px; }

/* =====================================================================
   LANGGANAN — BARIS BISA DIKLIK + JENDELA DETAIL (v1.13.88)
   ---------------------------------------------------------------------
   Menu titik-tiga per baris DIHAPUS (permintaan pemilik): satu klik pada baris
   membuka jendela detail. Baris harus terlihat "bisa diklik" (cursor + hover)
   tanpa mengganggu checkbox dan tautan di dalamnya.
   ===================================================================== */
.lg-table tbody tr.lg-row { cursor: pointer; }
.lg-table tbody tr.lg-row:hover { background: rgba(91, 140, 255, .10); }
.lg-table tbody tr.lg-row:hover .lg-name strong { color: #9dbcff; }
.lg-table tbody tr.lg-row:focus-visible { outline: 2px solid rgba(91, 140, 255, .6); outline-offset: -2px; }
.lg-table tbody tr.lg-row.is-selected { background: rgba(91, 140, 255, .14); }
.lg-mcard { cursor: pointer; }
.lg-mcard:focus-visible { outline: 2px solid rgba(91, 140, 255, .6); outline-offset: 2px; }

.lgd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.lgd-name { font-size: 16px; font-weight: 700; color: var(--text); display: block; }
.lgd-sub { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.lgd-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.lgd-kv { margin-bottom: 14px; }
.lgd-kv .lgd-addr { grid-column: 1 / -1; }

.lgd-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
.lgd-sum > div {
  border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px 12px;
  background: rgba(148, 163, 184, .06); min-width: 0;
}
.lgd-sum span { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.lgd-sum strong { display: block; font-size: 14px; margin-top: 2px; overflow-wrap: anywhere; }
.lgd-sum strong.ok { color: #4ede92; }
.lgd-sum strong.err { color: #f4777f; }
.lgd-sum small { display: block; font-size: 11px; color: var(--text-dim); margin-top: 2px; }

.lgd-h4 { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); margin: 16px 0 8px; }
.lgd-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-strong); }

@media (max-width: 720px) {
  /*
   * Di HP, `.kv` global jadi SATU kolom → jendela detail menjadi sangat panjang
   * (24 baris). Untuk jendela ini dipakai 2 kolom sempit supaya tinggi tinggal separuh
   * dan tetap terbaca (label 10,5px, nilai 13,5px + overflow-wrap).
   */
  .lgd-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
  .lgd-sum { grid-template-columns: minmax(0, 1fr); }
  .lgd-actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* =====================================================================
   HAK AKSES MITRA — BILLER hanya memilih ROUTER (v1.13.89)
   ---------------------------------------------------------------------
   Cakupan pelanggan mitra biller DITURUNKAN dari router: satu kolom daftar
   router + baris keterangan jumlah pelanggan yang akan terlihat.
   ===================================================================== */
.acc-grid--one { grid-template-columns: minmax(0, 1fr); }
#mitra-scope-hint { margin-top: 10px; line-height: 1.5; }

/* =====================================================================
   MITRA: NAMA/KATEGORI = TAUTAN PROFIL + HALAMAN PROFIL MITRA (v1.13.90)
   ---------------------------------------------------------------------
   Menu titik-tiga per baris DIHAPUS (menunya terpotong wadah tabel sehingga
   teksnya tidak terbaca). Aksi per baris = tombol EDIT; aksi lain (saldo,
   akun, hak akses, mutasi, rekap) ada di halaman /mitra/:id.
   ===================================================================== */
.mk-panel .mk-name-link,
.mk-panel .mk-cat {
  text-decoration: none;
}
.mk-panel .mk-name-link {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--mk-ink);
}
.mk-panel .mk-name-link:hover { color: var(--mk-blue); text-decoration: underline; }
.mk-panel .mk-cat:hover { text-decoration: underline; }

/* ---------- halaman PROFIL MITRA (tema gelap, konsisten dengan panel mitra) ---------- */
.mp-wrap { display: block; }
.mp-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 20px; align-items: start; }
.mp-left, .mp-right { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.mp-card { padding: 18px; }

.mp-eyebrow { font-size: 10.5px; letter-spacing: .1em; font-weight: 800; color: #7dd3fc; text-transform: uppercase; }
.mp-name { font-size: 22px; font-weight: 800; margin: 6px 0 8px; color: var(--text); }
.mp-meta { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-dim); }
.mp-meta span { display: flex; align-items: center; gap: 6px; }

.mp-saldo {
  margin-top: 14px; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--line-strong); background: rgba(148, 163, 184, .06);
}
.mp-saldo.is-minus { border-color: rgba(244, 119, 127, .45); background: rgba(244, 119, 127, .10); }
.mp-saldo-lbl { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.mp-saldo-val { font-size: 26px; font-weight: 800; font-family: var(--mono); margin-top: 2px; color: var(--text); }
.mp-saldo.is-minus .mp-saldo-val { color: #f4777f; }

.mp-hint {
  margin-top: 10px; display: flex; gap: 7px; align-items: flex-start;
  font-size: 11.5px; line-height: 1.5; color: #fde68a;
  background: rgba(251, 191, 36, .10); border: 1px solid rgba(251, 191, 36, .28);
  border-radius: 9px; padding: 8px 10px;
}
.mp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.mp-sec-t { font-size: 12.5px; font-weight: 800; letter-spacing: .04em; color: var(--text-dim); margin-bottom: 4px; display: flex; align-items: center; gap: 7px; }
.mp-small { font-size: 11.5px; color: var(--muted); margin: 0 0 12px; line-height: 1.5; }
.mp-reps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mp-rep {
  display: block; text-align: center; padding: 8px 10px; border-radius: 8px;
  font-size: 12px; font-weight: 600; text-decoration: none;
  border: 1px solid var(--line-strong); background: rgba(148, 163, 184, .06); color: var(--text);
}
.mp-rep:hover { border-color: rgba(91, 140, 255, .55); }
.mp-rep.is-blue { color: #9dbcff; border-color: rgba(91, 140, 255, .35); }
.mp-rep.is-green { color: #6ee7b7; border-color: rgba(52, 211, 153, .35); }

.mp-sum { display: flex; flex-direction: column; gap: 2px; }
.mp-sum > div {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 2px; border-bottom: 1px dashed var(--line); font-size: 12.5px;
}
.mp-sum > div span { color: var(--text-dim); }
.mp-sum > div.is-total { border-bottom: 0; font-weight: 700; }
.mp-sum > div.is-total span { color: var(--text); }
.tag {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  font-family: var(--mono); white-space: nowrap;
}
.tag.is-blue { background: rgba(91, 140, 255, .18); color: #bfdbfe; }
.tag.is-green { background: rgba(52, 211, 153, .16); color: #a7f3d0; }
.tag.is-amber { background: rgba(251, 191, 36, .16); color: #fde68a; }
.tag.is-dark { background: var(--text); color: #0b1220; }

.mp-mut-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.mp-mut-head h3 { font-size: 14px; letter-spacing: .05em; }
.mp-mut-tools { display: flex; gap: 8px; flex-wrap: wrap; }
.btn.is-tambah { background: #0ea5b7; color: #04131a; border-color: transparent; font-weight: 700; }
.btn.is-debet { background: #e5484d; color: #fff; border-color: transparent; font-weight: 700; }

.mp-mut-filter { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin: 14px 0 10px; }
.mp-fld { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted); }
.mp-fld select { width: auto; min-width: 150px; }
.mp-mut-sum { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-dim); margin-bottom: 10px; }
.mp-mut-sum b { color: var(--text); font-family: var(--mono); }

.mp-scroll { overflow-x: auto; border: 1px solid var(--line-strong); border-radius: 10px; }
.mp-table { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 12px; }
.mp-table th {
  text-align: left; padding: 9px 10px; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim); background: rgba(148, 163, 184, .07); border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.mp-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.mp-table tbody tr:last-child td { border-bottom: 0; }
.mp-table .mp-num { color: var(--text-dim); width: 34px; }
.mp-table .mp-note small { display: block; font-size: 10.5px; color: var(--muted); }
.mp-table .mp-empty { text-align: center; color: var(--muted); padding: 18px 10px; }
.mp-cat {
  display: inline-block; padding: 1px 7px; border-radius: 5px; font-size: 9.5px; font-weight: 800;
  letter-spacing: .05em; background: rgba(148, 163, 184, .14); color: var(--text-dim);
}
.mp-cat.charge { background: rgba(91, 140, 255, .18); color: #bfdbfe; }
.mp-cat.topup { background: rgba(52, 211, 153, .16); color: #a7f3d0; }
.mp-cat.adjust { background: rgba(251, 191, 36, .16); color: #fde68a; }
.mp-cat.refund { background: rgba(244, 119, 127, .16); color: #fecaca; }

.mp-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 12px; font-size: 11.5px; color: var(--text-dim);
}
.mp-pager { display: flex; gap: 4px; flex-wrap: wrap; }
.mp-pg {
  display: inline-block; padding: 4px 10px; border-radius: 6px; font-size: 11.5px;
  border: 1px solid var(--line-strong); color: var(--text); text-decoration: none;
}
.mp-pg.is-on { background: #2563eb; border-color: #2563eb; color: #fff; font-weight: 700; }
.mp-pg.is-off { opacity: .45; pointer-events: none; }

@media (max-width: 900px) {
  .mp-cols { grid-template-columns: minmax(0, 1fr); }
  .mp-reps { grid-template-columns: minmax(0, 1fr); }
  .mp-mut-tools .btn { flex: 1 1 100%; justify-content: center; }
  .mp-mut-filter .mp-fld { flex: 1 1 auto; }
  .mp-fld select { width: 100%; min-width: 0; }
  .mp-name { font-size: 19px; }
  .mp-saldo-val { font-size: 22px; }
}

/* ============================================================
   METODE SETORAN SALDO MITRA (v1.13.91)
   Permintaan pemilik: "tambah saldo mitra: tunai, transfer bank, hutang".
   Dipakai di modal Tambah saldo (/billing/topup + Profil mitra) dan rekap metode
   di halaman TopUp/Mutasi saldo. Tema tetap gelap seperti halaman lain.
   ============================================================ */
.pay-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pay-opt {
  display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px;
  border: 1px solid var(--line-strong); border-radius: 10px; cursor: pointer;
  background: rgba(148, 163, 184, .05);
}
.pay-opt:hover { border-color: rgba(148, 163, 184, .45); }
.pay-opt input { width: 16px; height: 16px; margin: 2px 0 0; flex: 0 0 16px; accent-color: #6366f1; }
.pay-opt span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pay-opt strong { font-size: 12.5px; color: var(--text); }
.pay-opt small { font-size: 11px; color: var(--muted); line-height: 1.3; }
.pay-opt:has(input:checked) { border-color: #6366f1; background: rgba(99, 102, 241, .14); }

/* rekap setoran per metode (halaman TopUp & Mutasi saldo) */
.pay-sum {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--panel);
}
.pay-sum > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pay-sum small { font-size: 10px; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }
.pay-sum b { font-family: var(--mono); font-size: 14px; color: var(--text); }
.pay-sum em { font-style: normal; font-size: 10.5px; color: var(--muted); }
.pay-sum > div.is-open b { color: var(--red); }

/* kartu piutang di Profil mitra */
.mp-debt {
  display: flex; flex-direction: column; gap: 2px; margin-top: 10px;
  padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line-strong);
  background: rgba(148, 163, 184, .06);
}
.mp-debt > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mp-debt span { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.mp-debt b { font-family: var(--mono); font-size: 14px; }
.mp-debt small { font-size: 10.5px; color: var(--muted); }
.mp-debt.is-open { border-color: rgba(248, 113, 113, .45); background: rgba(248, 113, 113, .10); }
.mp-debt.is-open b { color: var(--red); }
.mp-debt.is-done b { color: var(--green); }
.mp-method { display: block; margin-top: 3px; font-size: 10px; color: var(--muted); letter-spacing: .02em; }
.iv-ic.amber { color: #fbbf24; background: rgba(251, 191, 36, .12); }

@media (max-width: 900px) {
  .pay-opts { grid-template-columns: minmax(0, 1fr); }
  .pay-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

/* Penanda PIUTANG mitra di daftar Mitra (v1.13.92).
   Baris kecil di bawah nama: "hutang Rp 250.000" — supaya admin tahu siapa yang
   masih punya setoran metode "hutang" tanpa membuka profil. Tombol pelunasannya
   ada di kolom aksi (desktop) & kartu (HP): `.js-mitra-settle`. */
/*
 * Tombol kecil "hutang Rp X · bayar" di bawah NAMA mitra. Ini TOMBOL (bukan <small>)
 * supaya bisa diklik dan tidak mewarisi warna `--mk-dim` milik `.mk-name small`.
 * Diletakkan di sel NAMA, BUKAN di kolom aksi: menambah tombol kedua di kolom aksi
 * membuat tabel makin lebar dan tombolnya terdorong ke luar layar.
 */
.mk-debt-tag {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 3px;
  padding: 2px 8px; border-radius: 999px; font-family: inherit; cursor: pointer;
  font-size: 10px; font-weight: 600; line-height: 1.3; white-space: nowrap;
  color: #fca5a5; background: rgba(248, 113, 113, 0.14);
  border: 1px solid rgba(248, 113, 113, 0.35);
}
.mk-debt-tag:hover { background: rgba(248, 113, 113, 0.24); color: #fecaca; }
.mk-debt-tag svg { flex: 0 0 auto; }

/* ============================================================
   JENIS TAGIHAN (v1.13.93): PASCABAYAR / PRABAYAR
   `.cn-bill` adalah pembungkus sel grid BIAYA yang bergantian: pascabayar
   menampilkan "Jadwal tagihan" (due_day), prabayar menampilkan "Masa aktif (hari)".
   `hidden` WAJIB menang atas `display` milik `.cn-row` di dalamnya.
   ============================================================ */
.cn-bill { min-width: 0; }
.cn-bill[hidden] { display: none !important; }
/* badge jenis tagihan di daftar & detail pelanggan */
.bill-flag {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: .03em; white-space: nowrap;
}
.bill-flag.is-pre { color: #6ee7b7; background: rgba(52, 211, 153, .14); border: 1px solid rgba(52, 211, 153, .35); }
.bill-flag.is-post { color: #93c5fd; background: rgba(59, 130, 246, .14); border: 1px solid rgba(59, 130, 246, .35); }

/* TANGGAL ISOLIR (v1.13.94) — penanda kecil di kolom TGL ISOLIR bila tanggalnya
   diisi manual (rencana), bukan hasil hitungan jatuh tempo. */
.lg-plan {
  display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 999px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: #fbbf24; background: rgba(251, 191, 36, .14); border: 1px solid rgba(251, 191, 36, .35);
  vertical-align: 1px;
}

/* IP ADDRESS di daftar langganan (v1.13.95).
   `.is-mgmt` = alamat itu IP MANAJEMEN TR-069 (bukan IP layanan pelanggan) dan
   wajib diberi label kecil supaya tidak salah dibaca sebagai IP pelanggan. */
.lg-ip { color: #8fb3ff; }
.lg-ip.is-mgmt { color: #fbbf24; }
.lg-ip-tag {
  display: inline-block; margin-left: 4px; padding: 0 4px; border-radius: 4px;
  font-size: 9px; font-weight: 700; letter-spacing: .02em;
  color: #fbbf24; background: rgba(251, 191, 36, .14); border: 1px solid rgba(251, 191, 36, .32);
}

/* BILLER: penjelasan cakupan pelanggan mengikuti ROUTER (v1.13.96).
   Muncul di form Mitra saat Jenis Mitra = Biller; angkanya dihitung dari data
   pelanggan yang dikirim server (`#mitra-data`), bukan tebakan. */
.mt-hint {
  display: block; margin-top: 8px; padding: 8px 10px; border-radius: 9px;
  font-size: 11.5px; line-height: 1.45; color: var(--text-dim);
  background: rgba(99, 102, 241, 0.10); border: 1px solid rgba(99, 102, 241, 0.28);
}
.mt-hint[hidden] { display: none !important; }
.mt-hint b { color: var(--text); }
.mt-hint .mt-hint-warn { display: block; margin-top: 3px; color: var(--amber); }
.mt-rcust { color: var(--muted); }

/* Centang "Buat tagihan otomatis" di form Tambah langganan (v1.13.99).
   Terpisah dari baris tombol supaya tidak terlihat seperti tombol keempat. */
.cn-autoinv {
  display: flex; align-items: flex-start; gap: 9px; margin: 12px 0 4px;
  padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px;
  background: rgba(148, 163, 184, .06); font-size: 12.5px; color: var(--text-dim);
  cursor: pointer;
}
.cn-autoinv input { width: 16px; height: 16px; margin: 2px 0 0; flex: 0 0 16px; accent-color: #6366f1; }
.cn-autoinv span { min-width: 0; }

/* ============================================================
   ROUTER → SERVER: "DATA MASTER SERVER" (v1.14.2)
   Tata letak mengikuti portal acuan: panel dengan kepala, kotak panduan,
   baris tambah (SERVER NAME + tombol Tambah Data), lalu tabel SERVER NAME | AKSI.
   Tema tetap GELAP seperti halaman lain.
   ============================================================ */
.ds-filter {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 12px; font-size: 12px; color: var(--muted);
}
.ds-filter select {
  width: auto; min-width: 150px; height: 32px; padding: 0 8px;
  background: var(--panel-solid); border: 1px solid var(--line-strong);
  border-radius: 8px; color: var(--text); font-size: 12px;
}
.ds-link { color: var(--accent); text-decoration: none; font-size: 12px; }
.ds-link:hover { text-decoration: underline; }

.ds-wrap {
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--panel); overflow: hidden;
}
.ds-head {
  display: flex; align-items: center; gap: 9px;
  padding: 13px 16px; border-bottom: 1px solid var(--line);
  background: rgba(148, 163, 184, .05);
}
.ds-head h2 { margin: 0; font-size: 13.5px; letter-spacing: .04em; font-weight: 700; color: var(--text); }
.ds-head svg { color: var(--accent); flex: 0 0 auto; }
.ds-count { margin-left: auto; font-size: 11px; color: var(--muted); }

.ds-guide { padding: 12px 16px 6px; border-bottom: 1px solid var(--line); }
.ds-guide-t {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: #93c5fd; margin-bottom: 6px;
}
.ds-guide-t svg { color: #60a5fa; }
.ds-guide ul { margin: 0; padding-left: 18px; }
.ds-guide li { font-size: 12px; line-height: 1.55; color: var(--text-dim); margin-bottom: 3px; }
.ds-guide li b { color: var(--text); }
.ds-guide-sub { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 2px 4px; }
.ds-guide-sub span { font-size: 11.5px; color: var(--muted); }
.ds-guide code {
  font-family: var(--mono); font-size: 11px; padding: 1px 5px; border-radius: 5px;
  background: rgba(148, 163, 184, .14); color: var(--text);
}

.ds-add { padding: 14px 16px 12px; border-bottom: 1px solid var(--line); }
.ds-add-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10.5px; letter-spacing: .07em; color: var(--muted); margin-bottom: 6px;
}
.ds-add-aksi { text-align: right; }
.ds-add-row { display: flex; gap: 10px; align-items: stretch; }
.ds-input {
  flex: 1 1 auto; min-width: 0; height: 38px; padding: 0 11px;
  background: rgba(148, 163, 184, .07); border: 1px solid var(--line-strong);
  border-radius: 8px; color: var(--text); font-size: 13px;
}
.ds-input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, .18); }
.ds-add-meta {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 8px 10px; margin-top: 9px; align-items: end;
}
.ds-add-meta label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 10.5px; letter-spacing: .04em; color: var(--muted); min-width: 0;
}
.ds-add-meta select,
.ds-add-meta input {
  width: 100%; height: 32px; padding: 0 8px; font-size: 12px;
  background: rgba(148, 163, 184, .07); border: 1px solid var(--line-strong);
  border-radius: 7px; color: var(--text);
}
.ds-check {
  flex-direction: row !important; align-items: center; gap: 6px !important;
  height: 32px; font-size: 12px; color: var(--text-dim); white-space: nowrap;
}
.ds-check input { width: 16px !important; height: 16px !important; flex: 0 0 16px; accent-color: #2563eb; }

.ds-btn {
  border: 1px solid transparent; border-radius: 7px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1;
  padding: 10px 16px; color: #fff; transition: filter .12s ease;
}
.ds-btn:hover { filter: brightness(1.08); }
.ds-btn--add { background: #2563eb; flex: 0 0 auto; }
.ds-btn--edit { background: #2563eb; padding: 8px 14px; }
.ds-btn--del { background: #dc2626; padding: 8px 14px; }
.ds-btn[disabled] { opacity: .6; cursor: default; }

.ds-table { width: 100%; border-collapse: collapse; }
.ds-table th {
  text-align: left; font-size: 10.5px; letter-spacing: .07em; font-weight: 600;
  color: var(--muted); padding: 9px 16px; background: rgba(148, 163, 184, .04);
  border-bottom: 1px solid var(--line);
}
.ds-table td { padding: 9px 16px; border-bottom: 1px solid var(--line-2, rgba(148,163,184,.10)); }
.ds-table tbody tr:last-child td { border-bottom: 0; }
.ds-table tbody tr:hover { background: rgba(148, 163, 184, .05); }
.ds-name strong { font-size: 12.5px; color: var(--text); font-weight: 600; }
.ds-sub { display: block; margin-top: 2px; font-size: 10.5px; color: var(--muted); line-height: 1.5; }
.ds-aksi { text-align: right; white-space: nowrap; width: 1%; }
.ds-aksi .ds-btn + .ds-btn { margin-left: 6px; }
.ds-dim { color: var(--muted); }
.ds-empty { padding: 22px 16px !important; text-align: center; color: var(--muted); font-size: 12px; }

/* status server (bisa diklik untuk aktif/nonaktif) */
.ds-pill {
  display: inline-block; padding: 1px 6px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 9.5px; font-weight: 700; letter-spacing: .03em;
  border: 1px solid transparent; vertical-align: 1px;
}
.ds-pill.is-on { color: #6ee7b7; background: rgba(52, 211, 153, .14); border-color: rgba(52, 211, 153, .35); }
.ds-pill.is-off { color: #fca5a5; background: rgba(248, 113, 113, .14); border-color: rgba(248, 113, 113, .35); }
.ds-pill:hover { filter: brightness(1.12); }

@media (max-width: 820px) {
  .ds-add-row { flex-direction: column; }
  .ds-btn--add { width: 100%; }
  .ds-add-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-check { grid-column: 1 / -1; }
  .ds-table th, .ds-table td { padding: 8px 11px; }
  .ds-aksi .ds-btn { padding: 8px 10px; font-size: 12px; }
  .ds-guide { padding: 10px 13px 4px; }
  .ds-add, .ds-head { padding-left: 13px; padding-right: 13px; }
}

/* ============================================================
   VOUCHER — halaman DAFTAR (stok / terjual / online / offline): filter ringkas
   ------------------------------------------------------------
   Keluhan pemilik: filter di 4 halaman ini "melar" — setiap kontrol selebar baris
   lalu menumpuk jadi 6 baris, karena aturan global `input, select { width: 100% }`
   menang atas `.vc-sel` (yang tidak menyetel lebar). Sekarang tiap kontrol dibungkus
   `.lg-f` (chip ikon + kontrol) yang lebarnya dipatok, sama seperti halaman
   Data langganan / Profil langganan. Tampilan = satu baris di desktop.
   ============================================================ */
.vc-filters.lg-filters { margin-bottom: 12px; }
.vc-filters .lg-f { max-width: 100%; }
.vc-filters .lg-f select { max-width: 190px; }
.vc-filters .lg-f input[type='date'] {
  width: 118px; height: 100%; padding: 0; border: 0; background: transparent;
  color: var(--text-dim); font-size: 11.5px; font-family: inherit; cursor: pointer;
}
.vc-filters .lg-f input[type='date']:focus { outline: none; color: var(--text); }
.vc-filters .lg-f input[type='date']::-webkit-calendar-picker-indicator {
  opacity: .55; cursor: pointer; filter: invert(1) brightness(1.4);
}
.vc-filters .lg-find { max-width: 340px; }
.vc-reset {
  font-size: 11.5px; color: var(--muted); text-decoration: none; white-space: nowrap;
  padding: 0 2px;
}
.vc-reset:hover { color: var(--text); text-decoration: underline; }

/* kanan toolbar: jumlah data (dulu hanya "0 dipilih") */
.vc-count { margin-left: auto; font-size: 11.5px; color: var(--muted); font-family: var(--mono); white-space: nowrap; }
.vc-count + .vc-picked { margin-left: 12px; }

/* tabel daftar voucher: kepala tetap terlihat saat digeser & saat scroll halaman */
.vc-scroll {
  overflow-x: auto; overflow-y: hidden; border-radius: 10px;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.vc-table { min-width: 100%; }
.vc-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: #101a2b; /* wajib solid: header transparan akan tembus saat sticky */
}
.vc-table td { border-bottom: 1px solid var(--line-2, rgba(148, 163, 184, .08)); }
.vc-table tbody tr:hover { background: rgba(148, 163, 184, .05); }

@media (max-width: 900px) {
  /* tablet: chip jadi 2 kolom rapi seperti halaman lain */
  .vc-filters .lg-f { flex: 1 1 46%; }
  .vc-filters .lg-f select { max-width: none; width: 100%; }
  .vc-filters .lg-find { flex: 1 1 100%; max-width: none; }
  .vc-count { display: none; }
}
@media (max-width: 560px) {
  .vc-filters .lg-f,
  .vc-filters .lg-f input[type='date'] { width: 100%; }
  .vc-filters .lg-per { width: 100%; }
  .vc-count { display: none; }
  .vc-picked { margin-left: 0; }
}

/* ============================================================
   VOUCHER TERJUAL / ONLINE / OFFLINE — tata letak acuan, TEMA GELAP
   ------------------------------------------------------------
   Struktur mengikuti portal acuan (4 kartu + toolbar + tabel 18 kolom /
   tabel sesi 14–10 kolom + footer "Showing a – b of n entries").
   Warna memakai tema gelap aplikasi (permintaan pemilik: "latar belakang
   seperti yang lain") — JANGAN diganti panel putih.
   Kelas `.lg-*`, `.mk-btn`, `.lg-tile` dipinjam dari halaman Langganan agar
   konsisten; yang baru hanya `.vc-page`, `.vc-table*`, `.vc-foot`, `.vc-chip`,
   `.vc-pg`, `.vc-reset`.
   ============================================================ */
.vc-page { padding: 0; }

/* ------- tabel: satu wadah scroll, kepala sticky, baris padat ------- */
.vc-table-wrap {
  border: 1px solid var(--line-strong); border-radius: 12px; overflow: auto;
  background: rgba(11, 17, 32, .55);
  max-height: none;
}
.vc-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 11.5px;
}
.vc-table th {
  position: sticky; top: 0; z-index: 2; text-align: left; white-space: nowrap;
  font-size: 9.5px; letter-spacing: .07em; font-weight: 700; text-transform: uppercase;
  color: var(--muted); padding: 10px 12px;
  background: #101a2b; border-bottom: 1px solid var(--line-strong);
}
.vc-table td {
  padding: 9px 12px; border-bottom: 1px solid var(--line); white-space: nowrap;
  vertical-align: middle; color: var(--text-dim);
}
.vc-table tbody tr:last-child td { border-bottom: 0; }
.vc-table tbody tr:hover { background: rgba(148, 163, 184, .06); }
.vc-table .num { text-align: right; font-family: var(--mono); }
.vc-table .mono, .vc-table .vc-mono { font-family: var(--mono); font-size: 10.5px; }
.vc-table .vc-user { color: var(--text); font-weight: 600; }
.vc-table .vc-pass { font-family: var(--mono); font-size: 10.5px; color: var(--muted); letter-spacing: .06em; }
.vc-table .vc-exp { color: #fca5a5; }
.vc-table .lg-check { width: 38px; text-align: center; }
.vc-table .lg-check input { width: 15px; height: 15px; accent-color: #6366f1; cursor: pointer; }
.vc-empty { padding: 26px 14px !important; text-align: center; color: var(--muted); font-size: 12px; }
.vc-table .vc-price {
  display: inline-block; margin-top: 3px; padding: 1px 7px; border-radius: 6px;
  font-family: var(--mono); font-size: 10px; color: #bfdbfe;
  background: rgba(96, 165, 250, .14); border: 1px solid rgba(96, 165, 250, .3);
}

/* chip kecil: SALDO Yes/No, REASON */
.vc-chip {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
}
.vc-chip--green { color: #6ee7b7; background: rgba(52, 211, 153, .15); border: 1px solid rgba(52, 211, 153, .35); }
.vc-chip--blue { color: #93c5fd; background: rgba(96, 165, 250, .15); border: 1px solid rgba(96, 165, 250, .35); }
.vc-chip--amber { color: #fcd34d; background: rgba(251, 191, 36, .15); border: 1px solid rgba(251, 191, 36, .35); }
.vc-chip--red { color: #fca5a5; background: rgba(248, 113, 113, .15); border: 1px solid rgba(248, 113, 113, .35); }
.vc-chip--muted { color: var(--muted); background: rgba(148, 163, 184, .12); border: 1px solid var(--line-strong); }

/* ------- footer "Showing a to b of n entries" + pager ------- */
.vc-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; padding: 12px 2px 2px;
}
.vc-foot-txt { font-size: 11.5px; color: var(--muted); }
.vc-foot-txt b { color: var(--text-dim); font-family: var(--mono); }
.vc-foot-note { margin-left: 6px; }
.vc-pager { display: flex; align-items: center; gap: 4px; }
.vc-pg {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 28px; padding: 0 8px; border-radius: 6px;
  border: 1px solid var(--line-strong); background: rgba(148, 163, 184, .06);
  color: var(--text-dim); font-size: 11.5px; text-decoration: none; font-family: inherit;
}
.vc-pg:hover { background: rgba(148, 163, 184, .14); color: var(--text); }
.vc-pg.is-on { background: #2f6fed; border-color: #2f6fed; color: #fff; font-weight: 700; }
.vc-pg.is-off { opacity: .45; pointer-events: none; }
.vc-pg--wide { min-width: 74px; }
.vc-gap { color: var(--muted); padding: 0 2px; }
.vc-reset { font-size: 11.5px; color: var(--muted); text-decoration: none; white-space: nowrap; }
.vc-reset:hover { color: var(--text); text-decoration: underline; }
.vc-sep { height: 1px; margin: 4px 6px; background: var(--line); }

/* tombol SINKRONKAN (hijau tua seperti acuan) */
.mk-btn-olive { background: #1f8a4c; border-color: #1f8a4c; color: #fff; }
.mk-btn-olive:hover { background: #17703d; }

/* toolbar halaman ini memakai .lg-bar; pastikan form filter ikut satu baris */
.vc-page .lg-bar { margin-bottom: 10px; }
.vc-page .lg-filters { margin-bottom: 10px; }

/* REKAP penjualan (modal) */
.vc-rekap-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.vc-rekap-table th {
  text-align: left; font-size: 10px; letter-spacing: .06em; color: var(--muted);
  padding: 8px 10px; border-bottom: 1px solid var(--line-strong);
}
.vc-rekap-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); color: var(--text-dim); }
.vc-rekap-table td.num, .vc-rekap-table th.num { text-align: right; font-family: var(--mono); }
.vc-rekap-table tr.tot td { border-top: 1px solid var(--line-strong); color: var(--text); font-weight: 700; }

@media (max-width: 900px) {
  .vc-foot { flex-direction: column; align-items: flex-start; gap: 8px; }
  .vc-page .lg-count { display: none; }
}
@media print {
  .lg-bar, .lg-filters, .vc-foot, .topbar, .sidebar { display: none !important; }
}

/* ============================================================
   QUICK PRINT VOUCHER (modal dari tombol PRINT di Stok voucher)
   ------------------------------------------------------------
   Tata letak "label kiri, input kanan" seperti contoh pemilik.
   Tema tetap GELAP (aplikasi ini bertema gelap) — modal cetak di tab baru tetap putih.
   ============================================================ */
.modal-box.vc-quick-modal { width: 560px; max-width: 96vw; }
.qf { display: flex; flex-direction: column; gap: 10px; padding: 2px 0 6px; }
.qf-row {
  display: grid; grid-template-columns: 150px minmax(0, 1fr);
  gap: 4px 14px; align-items: start;
}
.qf-row > .lbl {
  font-size: 12px; font-weight: 600; color: var(--text-dim);
  padding-top: 9px; line-height: 1.3;
}
.qf-req { color: #f87171; }
.qf-cell { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.qf-cell input, .qf-cell select {
  width: 100%; height: 38px; padding: 0 11px;
  background: rgba(148, 163, 184, .07); border: 1px solid var(--line-strong);
  border-radius: 9px; color: var(--text); font-size: 13px; font-family: inherit;
}
.qf-cell input:focus, .qf-cell select:focus {
  outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, .18);
}
.qf-cell .qf-code { font-size: 19px; font-family: var(--mono); letter-spacing: .01em; }
.qf-help { font-size: 10.5px; color: var(--muted); line-height: 1.4; }
.qf-help b { color: var(--text-dim); }
.modal-box.vc-quick-modal .vf-foot {
  display: flex; gap: 8px; justify-content: flex-end; padding-top: 4px;
}
@media (max-width: 560px) {
  .qf-row { grid-template-columns: minmax(0, 1fr); }
  .qf-row > .lbl { padding-top: 0; }
  .modal-box.vc-quick-modal .vf-foot { flex-direction: column-reverse; }
  .modal-box.vc-quick-modal .vf-foot .btn { width: 100%; justify-content: center; }
}

/* =====================================================================
   GENIEACS — tata letak acuan, TEMA HITAM (permintaan pemilik)
   Struktur: 4 kartu ringkasan → toolbar berwarna → filter 1 baris →
   tabel padat (header bisa diurutkan) → footer "Showing a to b of n entries".
   Latar dibuat nyaris hitam supaya kontras dengan sidebar/topbar aplikasi.
   ===================================================================== */
.ga-page {
  background: #070b13;
  border: 1px solid #162033;
  border-radius: 14px;
  padding: 16px 16px 6px;
}
.ga-page > .flash { margin-bottom: 12px; }

/* ---------------- kartu ringkasan ---------------- */
.ga-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ga-card {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 20px; min-width: 0;
  background: #0c1420; border: 1px solid #18233a; border-radius: 12px;
  text-decoration: none; color: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
a.ga-card:hover { border-color: #2b3f63; transform: translateY(-1px); }
.ga-txt { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.ga-txt small { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8b98ad; }
.ga-txt strong { font-size: 25px; line-height: 1.15; font-family: var(--mono); font-weight: 800; letter-spacing: -.02em; }
.ga-txt strong.cyan { color: #38bdf8; }
.ga-txt strong.green { color: #34d399; }
.ga-txt strong.amber { color: #fbbf24; }
.ga-txt strong.red { color: #f87171; }
.ga-txt em { font-style: normal; font-size: 11.5px; color: #7b8aa3; }
.ga-ic {
  display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 52px;
  border-radius: 14px; color: #94a3b8; background: rgba(148, 163, 184, .08);
}
.ga-ic.cyan { color: #38bdf8; background: rgba(56, 189, 248, .10); }
.ga-ic.green { color: #34d399; background: rgba(52, 211, 153, .10); }
.ga-ic.amber { color: #fbbf24; background: rgba(251, 191, 36, .10); }
.ga-ic.red { color: #f87171; background: rgba(248, 113, 113, .10); }

/* ---------------- toolbar aksi ---------------- */
.ga-toolbar { margin-top: 16px; }
.ga-toolbar .btn, .ga-toolbar .ga-reset { border-radius: 6px; }
.ga-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.ga-toolbar .ga-b-reset { opacity: .9; }
.ga-picked { color: #8b98ad; }

/* ---------------- filter satu baris ---------------- */
.ga-filters { margin: 12px 0; }
.ga-page .lg-f, .ga-page .lg-per, .ga-page .lg-find {
  background: #0c1420; border-color: #1b2740; color: #93a2b8; height: 32px;
}
.ga-page .lg-f select { color: #cbd5e1; max-width: 200px; }
.ga-page .lg-find input { color: #e2e8f0; }
.ga-page .lg-find input::placeholder { color: #6b7c93; }

/* ---------------- tabel ---------------- */
.ga-table-wrap { border-top: 1px solid #162033; padding-top: 2px; }
.ga-scroll { overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.ga-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.ga-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: #0a111c; border-bottom: 1px solid #1b2740; border-top: 1px solid #1b2740;
  padding: 9px 9px; text-align: left; white-space: nowrap;
  font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #8593a8;
}
.ga-table thead th a.ga-th {
  display: inline-flex; align-items: center; gap: 5px;
  color: inherit; text-decoration: none; font: inherit; letter-spacing: inherit;
}
.ga-table thead th a.ga-th:hover { color: #e2e8f0; }
.ga-sa { font-size: 9px; color: #56657e; line-height: 1; }
.ga-sa.is-on { color: #38bdf8; }
.ga-sa.is-off { opacity: .45; }
.ga-table tbody td {
  padding: 8px 9px; border-bottom: 1px solid #131d2e; white-space: nowrap;
  color: #b7c3d4; vertical-align: middle;
}
.ga-table tbody tr:hover { background: #0d1626; }
.ga-table tbody tr:last-child td { border-bottom: 0; }
.ga-table .num { text-align: LEFT; }
.ga-dim { color: #55647c; }
.ga-user { color: #67b6f5; font-size: 11.5px; }
.ga-sn { color: #8fb6e6; font-size: 10.5px; }
.ga-flagcell { width: 1%; white-space: nowrap; }
.ga-flagcell input[type=checkbox] { vertical-align: -2px; }
.ga-flagcell > span:last-child:not(.ga-dot) {
  margin-left: 7px; font-size: 9.5px; letter-spacing: .07em;
}

/* status online/offline di kolom FLAG */
.ga-dot {
  display: inline-block; width: 9px; height: 9px; margin-left: 7px;
  border-radius: 50%; vertical-align: 0;
}
.ga-dot.is-on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .16); }
.ga-dot.is-off { background: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .14); }

/* badge IP/PON/USER/RX/TEMP */
.ga-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 7px; border-radius: 5px; border: 1px solid transparent;
  font-family: var(--mono); font-size: 10.5px; line-height: 1.5; white-space: nowrap;
}
.ga-badge--ip { background: rgba(56, 189, 248, .13); border-color: rgba(56, 189, 248, .26); color: #93d7f7; }
.ga-badge--user { background: rgba(59, 130, 246, .16); border-color: rgba(59, 130, 246, .3); color: #93c5fd; }
.ga-badge--good { background: rgba(52, 211, 153, .14); border-color: rgba(52, 211, 153, .28); color: #6ee7b7; }
.ga-badge--warn { background: rgba(251, 191, 36, .14); border-color: rgba(251, 191, 36, .28); color: #fcd34d; }
.ga-badge--bad { background: rgba(248, 113, 113, .14); border-color: rgba(248, 113, 113, .28); color: #fca5a5; }
.ga-badge--muted { background: rgba(148, 163, 184, .1); border-color: rgba(148, 163, 184, .2); color: #94a3b8; }
.ga-copy {
  display: inline-flex; align-items: center; border: 0; background: none; padding: 0;
  color: inherit; opacity: .65; cursor: pointer;
}
.ga-copy:hover { opacity: 1; }

/* ---------------- footer ---------------- */
.ga-foot { padding: 12px 2px 10px; }
.ga-foot .vc-pg { background: #0c1420; border-color: #1b2740; color: #a9b6c8; }
.ga-foot .vc-pg:hover { background: #142034; color: #e2e8f0; }
.ga-foot .vc-pg.is-on { background: #2563eb; border-color: #2563eb; color: #fff; }
.ga-foot .vc-pg.is-off { opacity: .4; }
.ga-foot .vc-foot-txt b { color: #cbd5e1; }

@media (max-width: 1100px) {
  .ga-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .ga-page { padding: 12px 12px 4px; border-radius: 12px; }
  .ga-cards { gap: 10px; }
  .ga-card { padding: 12px 13px; }
  .ga-txt strong { font-size: 20px; }
  .ga-txt em { display: none; }
  .ga-ic { width: 42px; height: 42px; flex-basis: 42px; border-radius: 12px; }
  .ga-filters { flex-direction: column; align-items: stretch; }
  .ga-page .lg-f, .ga-page .lg-per, .ga-page .lg-find { width: 100%; }
  .ga-page .lg-f select { max-width: none; }
  .ga-toolbar { flex-wrap: wrap; }
  .ga-foot { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Kolom DEVICE ID: tampil UTUH (acuan pun menampilkan penuh); tombolnya tetap bisa diklik
   dan seluruh tabel bisa digeser ke samping bila layar sempit. */
.ga-table .ga-devid {
  padding: 2px 4px; border: 0; background: none; color: #8fb6e6;
  max-width: 320px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;
}
.ga-table .ga-devid:hover { color: #cfe6ff; background: rgba(56, 189, 248, .08); border-radius: 5px; }

/* =====================================================================
   Latar HITAM penuh untuk halaman tertentu (GenieACS).
   `body.page-dark` membuat area konten gelap rata, tanpa gradient ungu,
   supaya halaman terlihat seperti panel hitam pada contoh acuan.
   ===================================================================== */
body.page-dark .main { background: #05080e; }
body.page-dark .content { background: #05080e; padding-top: 10px; }
body.page-dark .topbar {
  background: #05080e; border-bottom-color: #101a2a;
}
body.page-dark .topbar h1 { color: #e6edf9; }
body.page-dark .topbar p { color: #73839a; }

/* =====================================================================
   WHATSAPP — PENGAMAN ANTI-BAN
   Strip ringkasan (jam tenang, kuota, jeda, istirahat, opt-out) + panel
   pengaturan di modal SET PERANGKAT + daftar nomor berhenti.
   ===================================================================== */
.wa-safety-strip {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 10px 12px; border-radius: 10px;
  background: rgba(148, 163, 184, .05); border: 1px solid var(--line-strong);
}
.wa-safe-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 999px; font-size: 11.5px;
  color: var(--text-dim); background: rgba(148, 163, 184, .10);
  border: 1px solid var(--line-strong); white-space: nowrap;
}
.wa-safe-chip .ic { opacity: .85; }
.wa-safe-chip.is-ok { color: #6ee7b7; background: rgba(52, 211, 153, .12); border-color: rgba(52, 211, 153, .32); }
.wa-safe-chip.is-warn { color: #fcd34d; background: rgba(251, 191, 36, .12); border-color: rgba(251, 191, 36, .32); }
.wa-safe-chip.is-err { color: #fca5a5; background: rgba(248, 113, 113, .13); border-color: rgba(248, 113, 113, .34); }
.wa-chip-btn {
  border: 0; background: none; cursor: pointer; font: inherit; font-size: 11px;
  color: inherit; text-decoration: underline; opacity: .85; padding: 0 0 0 2px;
}
.wa-chip-btn:hover { opacity: 1; }

/* panel pengaturan pengaman di modal SET PERANGKAT */
.wa-safety {
  border: 1px solid var(--line-strong); border-radius: 10px;
  padding: 12px 14px; background: rgba(56, 189, 248, .05);
}
.wa-safety > span {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #93c5fd; margin-bottom: 10px;
}
.wa-safe-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 12px; margin-bottom: 10px;
}
.wa-safe-grid label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wa-safe-grid label > span { font-size: 10.5px; letter-spacing: .03em; color: var(--muted); }
.wa-safe-grid input {
  width: 100%; height: 34px; padding: 0 9px; font-size: 12.5px;
  background: rgba(148, 163, 184, .07); border: 1px solid var(--line-strong);
  border-radius: 8px; color: var(--text); font-family: var(--mono);
}
@media (max-width: 760px) {
  .wa-safe-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* daftar nomor berhenti */
.wa-optout-list { padding: 0 18px 18px; max-height: 320px; overflow: auto; }
.wa-optout-list .tbl { width: 100%; }
.wa-optout-list th {
  text-align: left; font-size: 10px; letter-spacing: .06em; color: var(--muted);
  padding: 8px 8px; border-bottom: 1px solid var(--line-strong);
}
.wa-optout-list td { padding: 7px 8px; border-bottom: 1px solid var(--line); }

/* =====================================================================
   WHATSAPP — TAUTKAN PERANGKAT (DMKRADIUS, modul WA API sendiri)
   Metode tautkan (QR / nomor telefon), kotak QR, dan status perangkat.
   ===================================================================== */
.wa-link {
  border: 1px solid var(--line-strong); border-radius: 10px;
  padding: 12px 14px; background: rgba(139, 92, 246, .06);
}
.wa-link.is-hidden { display: none; }
.wa-link > span:first-child {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #c4b5fd; margin-bottom: 8px;
}
.wa-link-on {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 7px 10px; margin-bottom: 10px; border-radius: 8px;
  font-size: 12px; color: #6ee7b7;
  background: rgba(52, 211, 153, .12); border: 1px solid rgba(52, 211, 153, .32);
}
.wa-link-off {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 7px 10px; margin-bottom: 10px; border-radius: 8px;
  font-size: 12px; color: var(--text-dim);
  background: rgba(148, 163, 184, .08); border: 1px solid var(--line-strong);
}
.wa-link-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px; margin-bottom: 10px;
}
.wa-link-grid label { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wa-link-grid label > span { font-size: 10.5px; letter-spacing: .03em; color: var(--muted); }
.wa-link-grid input, .wa-link-grid select {
  width: 100%; height: 34px; padding: 0 9px; font-size: 12.5px;
  background: rgba(148, 163, 184, .07); border: 1px solid var(--line-strong);
  border-radius: 8px; color: var(--text);
}
.wa-link-grid .wa-dmk-phone[hidden] { display: none; }
.wa-qrbox {
  display: flex; justify-content: center; padding: 10px; margin: 10px 0;
  border-radius: 10px; background: #fff;
}
.wa-qrbox[hidden] { display: none; }
.wa-qrbox img { width: 240px; height: 240px; display: block; }
@media (max-width: 760px) {
  .wa-link-grid { grid-template-columns: minmax(0, 1fr); }
  .wa-qrbox img { width: 200px; height: 200px; }
}

/* ---------- TAUTKAN PERANGKAT WA: pesan & petunjuk di area QR ---------- */
/* Kotak pesan di tempat barcode muncul — supaya "barcode tidak muncul" SELALU punya
   penjelasan yang terlihat (bukan baris kecil di bawah tombol). */
.wa-qrmsg {
  width: 100%; margin: 0 auto; padding: 12px 14px; border-radius: 8px;
  background: #fff8e6; border: 1px solid #f0c166; color: #6b4b00;
  font-size: 12.5px; line-height: 1.55; text-align: left;
}
.wa-qrmsg b { color: #4a3300; }
.wa-qrmsg code {
  font-family: var(--mono); font-size: 11.5px;
  background: rgba(0, 0, 0, .07); padding: 1px 5px; border-radius: 4px;
}
.wa-dmk-tip {
  display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap;
  padding: 9px 11px; margin-bottom: 10px; border-radius: 8px;
  font-size: 12px; line-height: 1.5; color: #fcd34d;
  background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .38);
}
.wa-dmk-tip[hidden] { display: none; }
.wa-dmk-tip > span { flex: 1 1 240px; min-width: 0; }

/* ══════════ TAUTKAN WHATSAPP (satu klik → barcode → selesai) ══════════ */
/* Kartu ini adalah SATU-SATUNYA hal yang perlu dilihat admin di modal SET PERANGKAT.
   Semua pengaturan gateway disembunyikan di dalam <details> supaya tidak "bikin pusing". */
.wa-linkcard {
  margin: 4px 0 16px; padding: 14px 16px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(37, 99, 235, .13), rgba(37, 99, 235, .05));
  border: 1px solid rgba(96, 165, 250, .34);
}
.wa-linkcard.is-on {
  background: linear-gradient(180deg, rgba(16, 185, 129, .15), rgba(16, 185, 129, .05));
  border-color: rgba(52, 211, 153, .42);
}
.wa-linkcard.is-off {
  background: rgba(148, 163, 184, .07); border-color: var(--line-strong);
}
.wa-lc-lead { margin: 0 0 10px; font-size: 12.5px; color: var(--text-dim); }
.wa-lc-btn { height: 46px; font-size: 14px; padding: 0 22px; width: 100%; max-width: 320px; }
.wa-lc-steps {
  margin: 12px 0 0; padding-left: 18px; font-size: 12px; line-height: 1.7; color: var(--text-dim);
}
.wa-lc-steps b { color: var(--text); }
.wa-lc-err, .wa-lc-warn {
  display: flex; gap: 6px; align-items: flex-start; margin-top: 10px;
  font-size: 11.5px; line-height: 1.5; border-radius: 8px; padding: 7px 9px;
}
.wa-lc-err { color: #fca5a5; background: rgba(239, 68, 68, .1); border: 1px solid rgba(239, 68, 68, .3); }
.wa-lc-warn { color: #fcd34d; background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .3); }
.wa-lc-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13.5px; color: #6ee7b7; margin-bottom: 6px;
}
.wa-lc-head span { color: var(--text); font-weight: 700; }
.wa-lc-note { margin: 0 0 10px; font-size: 12px; line-height: 1.55; color: var(--text-dim); }
.wa-lc-off { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: #fcd34d; }
.wa-lc-off p { margin: 5px 0 0; font-size: 12px; color: var(--text-dim); line-height: 1.55; }
.wa-lc-off code { font-family: var(--mono); background: rgba(0,0,0,.28); padding: 1px 5px; border-radius: 4px; }
/* <details> pengaturan gateway: ringkas, tidak menarik perhatian */
.wa-adv { margin-top: 6px; }
.wa-adv > summary { font-size: 12px; }

/* ---------- halaman ISOLIR: strip kesiapan notifikasi WA ---------- */
.iso-wa-strip { margin-top: -4px; }
.iso-wa-strip.is-ok { border-color: rgba(52, 211, 153, .34); }
.iso-wa-strip.is-warn { border-color: rgba(245, 158, 11, .38); }
.iso-wa-why { display: inline-flex; align-items: center; gap: 6px; color: #fcd34d; }
@media (max-width: 720px) {
  .iso-wa-strip .strip-txt { flex: 1 1 100%; }
  .iso-wa-strip .strip-btn { flex: 1 1 auto; justify-content: center; }
}

/* ==========================================================================================
 * PORTAL PELANGGAN (`/portal`) — TEMA TERANG, SATU KOLOM, DIOPTIMALKAN UNTUK HP
 * ==========================================================================================
 * Diminta pemilik: "Terang & sederhana (paling mudah dibaca di HP)".
 *
 * ATURAN: seluruh gaya portal ditulis di bawah `body.cp-body` supaya tema gelap
 * halaman petugas TIDAK tersentuh. Jangan menaruh selector `.cp-*` di luar
 * `body.cp-body` — kelas ini juga dipakai di halaman ini saja.
 */
body.cp-body {
  --cp-bg: #f4f6fb;
  --cp-card: #ffffff;
  --cp-ink: #12203a;
  --cp-ink-2: #55627a;
  --cp-line: #e5eaf3;
  --cp-primary: #2563eb;
  --cp-ok: #0f9d58;
  --cp-warn: #b45309;
  --cp-err: #dc2626;
  margin: 0;
  background: var(--cp-bg);
  color: var(--cp-ink);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.cp-body::before { display: none; }
body.cp-body .bg-glow { display: none; }

.cp-wrap { max-width: 680px; margin: 0 auto; padding: 0 14px 104px; }

.cp-top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 0 10px;
  background: linear-gradient(#f4f6fb 78%, rgba(244, 246, 251, 0));
}
.cp-brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.cp-logo {
  width: 36px; height: 36px; border-radius: 11px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #1d4ed8, #0f766e);
}
.cp-brand-txt { display: flex; flex-direction: column; min-width: 0; }
.cp-brand-txt strong { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-brand-txt small { font-size: 11px; color: var(--cp-ink-2); letter-spacing: .04em; text-transform: uppercase; }
.cp-logout button {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--cp-line); color: var(--cp-ink-2);
  border-radius: 999px; padding: 7px 12px; font: inherit; font-size: 12.5px; cursor: pointer;
}
.cp-logout button .ic { width: 15px; height: 15px; }

.cp-idline {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--cp-card); border: 1px solid var(--cp-line); border-radius: 14px;
  padding: 10px 13px; margin-bottom: 12px;
}
.cp-idline small { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--cp-ink-2); }
.cp-idline strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.cp-idline-r { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cp-name { font-size: 13px; color: var(--cp-ink-2); max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cp-main { display: flex; flex-direction: column; gap: 12px; }

.cp-card {
  background: var(--cp-card); border: 1px solid var(--cp-line); border-radius: 16px;
  padding: 15px 15px 16px; box-shadow: 0 1px 2px rgba(18, 32, 58, .05);
}
.cp-card--soft { background: #fbfcfe; }
.cp-card--hero { padding: 20px 16px; }
.cp-card h1 { font-size: 21px; margin: 0 0 6px; letter-spacing: -.01em; }
.cp-card h2 { font-size: 14.5px; margin: 0 0 4px; display: flex; align-items: center; gap: 7px; }
.cp-card h2 .ic { width: 17px; height: 17px; color: var(--cp-primary); }
.cp-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cp-card-head h2 { margin: 0; }
.cp-lead { margin: 0 0 16px; color: var(--cp-ink-2); font-size: 13.5px; }
.cp-hint { margin: 12px 0 0; font-size: 12px; color: var(--cp-ink-2); }
.cp-muted { color: var(--cp-ink-2); font-size: 13px; }
.cp-muted.small, .cp-muted .small { font-size: 12px; }
.cp-warn { color: var(--cp-err); font-size: 12px; }
.cp-link { color: var(--cp-primary); font-size: 12.5px; text-decoration: none; font-weight: 600; }
.cp-link:hover { text-decoration: underline; }
.cp-mini {
  font-size: 11.5px; color: var(--cp-primary); text-decoration: none;
  border: 1px solid #dbe6ff; background: #f2f6ff; border-radius: 999px; padding: 2px 9px;
}

/* kartu besar total tagihan */
.cp-hero {
  border-radius: 18px; padding: 18px 16px 16px; color: #fff;
  background: linear-gradient(135deg, #1e40af, #2563eb 55%, #0e7490);
  box-shadow: 0 8px 22px rgba(37, 99, 235, .22);
}
.cp-hero--late { background: linear-gradient(135deg, #b91c1c, #dc2626 60%, #f97316); box-shadow: 0 8px 22px rgba(220, 38, 38, .22); }
.cp-hero--due { background: linear-gradient(135deg, #b45309, #d97706 60%, #f59e0b); box-shadow: 0 8px 22px rgba(217, 119, 6, .22); }
.cp-hero--ok { background: linear-gradient(135deg, #047857, #0f9d58 60%, #14b8a6); box-shadow: 0 8px 22px rgba(15, 157, 88, .22); }
.cp-hero small { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; opacity: .88; }
.cp-hero-amount { display: block; font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.cp-hero-due { display: block; font-size: 12.5px; opacity: .92; }
.cp-hero-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }

.cp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border-radius: 11px; border: 1px solid transparent; padding: 10px 14px;
  font: inherit; font-size: 13.5px; font-weight: 600; text-decoration: none; cursor: pointer;
  background: #eef2f9; color: var(--cp-ink);
}
.cp-btn .ic { width: 16px; height: 16px; }
.cp-btn--block { width: 100%; margin-top: 4px; }
.cp-btn--primary { background: var(--cp-primary); color: #fff; }
.cp-btn--primary:hover { background: #1d4ed8; }
.cp-btn--ghost { background: #fff; border-color: var(--cp-line); color: var(--cp-ink); }
.cp-btn--light { background: #fff; color: #12203a; }
.cp-btn--outline { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .55); color: #fff; }

/* kotak angka kecil */
.cp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cp-stat {
  background: var(--cp-card); border: 1px solid var(--cp-line); border-radius: 14px;
  padding: 12px 13px; display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.cp-stat small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--cp-ink-2); }
.cp-stat strong { font-size: 16px; font-weight: 700; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; }
.cp-stat em { font-size: 11.5px; color: var(--cp-ink-2); font-style: normal; }
.cp-stat--warn strong { color: var(--cp-warn); }
.cp-stat--ok strong { color: var(--cp-ok); }

/* daftar baris (tagihan/pembayaran/tiket) */
.cp-lrow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--cp-line);
  text-decoration: none; color: inherit;
}
.cp-lrow:last-child { border-bottom: 0; padding-bottom: 2px; }
.cp-lrow:first-of-type { padding-top: 4px; }
a.cp-lrow:active { background: #f6f8fd; }
.cp-lrow-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cp-lrow-main strong { font-size: 14px; font-weight: 700; }
.cp-lrow-main small { font-size: 11.5px; color: var(--cp-ink-2); overflow: hidden; text-overflow: ellipsis; }
.cp-lrow-end { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; flex: 0 0 auto; }
.cp-lrow-end strong { font-size: 14px; font-variant-numeric: tabular-nums; }
.cp-lrow-end small { font-size: 11.5px; color: var(--cp-ink-2); }

.cp-badge {
  display: inline-flex; align-items: center; gap: 4px; border-radius: 999px;
  padding: 2px 9px; font-size: 11px; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
}
.cp-badge--ok { background: #e7f7ee; color: #0b7a45; }
.cp-badge--warn { background: #fef3d7; color: #92400e; }
.cp-badge--err { background: #fde8e8; color: #b91c1c; }
.cp-badge--info { background: #e6efff; color: #1d4ed8; }
.cp-badge--muted { background: #eef1f6; color: #55627a; }

.cp-list { margin: 8px 0 10px; padding-left: 18px; font-size: 13px; color: var(--cp-ink); }
.cp-list li { margin-bottom: 4px; }

.cp-kv { margin: 10px 0 0; display: flex; flex-direction: column; gap: 7px; }
.cp-kv > div { display: flex; gap: 10px; justify-content: space-between; border-bottom: 1px dashed var(--cp-line); padding-bottom: 6px; }
.cp-kv > div:last-child { border-bottom: 0; padding-bottom: 0; }
.cp-kv dt { font-size: 12.5px; color: var(--cp-ink-2); flex: 0 0 auto; }
.cp-kv dd { margin: 0; font-size: 13px; text-align: right; word-break: break-word; }

/* formulir terang */
.cp-form { display: flex; flex-direction: column; gap: 11px; margin-top: 10px; }
.cp-field { display: flex; flex-direction: column; gap: 5px; }
.cp-field > span { font-size: 12px; font-weight: 600; color: var(--cp-ink-2); }
body.cp-body input, body.cp-body select, body.cp-body textarea {
  width: 100%; box-sizing: border-box;
  background: #fff; border: 1px solid #cfd8e6; border-radius: 11px;
  padding: 11px 12px; font: inherit; font-size: 14px; color: var(--cp-ink);
}
body.cp-body textarea { resize: vertical; min-height: 88px; }
body.cp-body input:focus, body.cp-body select:focus, body.cp-body textarea:focus {
  outline: none; border-color: var(--cp-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}
body.cp-body select option { background: #fff; color: var(--cp-ink); }

.cp-flash {
  border-radius: 12px; padding: 11px 13px; font-size: 13px; margin-bottom: 4px;
  border: 1px solid transparent;
}
.cp-flash--ok { background: #e7f7ee; border-color: #b5e6c9; color: #0b7a45; }
.cp-flash--err { background: #fdeaea; border-color: #f6c6c6; color: #a71d1d; }
.cp-flash--info { background: #e8f0ff; border-color: #c8dbff; color: #1d4ed8; }

.cp-row-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

/* percakapan tiket */
.cp-thread { display: flex; flex-direction: column; gap: 9px; margin-bottom: 6px; }
.cp-msg { display: flex; flex-direction: column; gap: 3px; max-width: 88%; }
.cp-msg small { font-size: 11px; color: var(--cp-ink-2); }
.cp-msg--me { align-self: flex-end; align-items: flex-end; }
.cp-msg--staff { align-self: flex-start; }
.cp-bubble { border-radius: 13px; padding: 9px 12px; font-size: 13.5px; }
.cp-msg--me .cp-bubble { background: #e6efff; border: 1px solid #cfe0ff; }
.cp-msg--staff .cp-bubble { background: #f3f5f9; border: 1px solid var(--cp-line); }
.cp-sys { align-self: center; font-size: 11px; color: var(--cp-ink-2); background: #f3f5f9; border-radius: 999px; padding: 3px 10px; }
.cp-close-form { margin-top: 10px; }

/* tab bawah */
.cp-tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(255, 255, 255, .97); border-top: 1px solid var(--cp-line);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  backdrop-filter: blur(8px);
}
.cp-tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-decoration: none; color: #7d8aa1; font-size: 11px; font-weight: 600;
  padding: 5px 2px; border-radius: 10px;
}
.cp-tab .ic { width: 19px; height: 19px; }
.cp-tab.is-active { color: var(--cp-primary); background: #eef4ff; }
.cp-foot { text-align: center; font-size: 11.5px; color: #93a0b6; margin: 16px 4px 0; }

@media (max-width: 380px) {
  .cp-hero-amount { font-size: 26px; }
  .cp-grid2 { grid-template-columns: 1fr; }
  .cp-name { display: none; }
}

/* ==========================================================================================
 * MENU TIKET (sisi petugas) — kartu HP + percakapan
 * ========================================================================================== */
.fld-inline { display: inline-flex; flex-direction: column; gap: 4px; min-width: 140px; }
.fld-inline > span { font-size: 11.5px; color: var(--text-dim); }
.tk-cards { display: flex; flex-direction: column; gap: 9px; padding: 10px 0; }
.tk-card {
  display: block; text-decoration: none; color: inherit;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line, rgba(255, 255, 255, .09));
  border-radius: 12px; padding: 11px 12px;
}
.tk-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tk-card-sub { font-size: 13.5px; margin-top: 3px; }
.tk-card-meta { font-size: 11.5px; color: var(--text-dim); margin-top: 3px; }
.tk-thread { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; max-height: 56vh; overflow: auto; }
.tk-msg { display: flex; flex-direction: column; gap: 3px; max-width: 86%; }
.tk-msg small { font-size: 11px; color: var(--text-dim); }
.tk-msg--cust { align-self: flex-start; }
.tk-msg--staff { align-self: flex-end; align-items: flex-end; }
.tk-bubble { border-radius: 12px; padding: 8px 11px; font-size: 13.5px; line-height: 1.5; }
.tk-msg--cust .tk-bubble { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
.tk-msg--staff .tk-bubble { background: rgba(59, 130, 246, .18); border: 1px solid rgba(59, 130, 246, .4); }
.tk-sys { align-self: center; font-size: 11px; color: var(--text-dim); background: rgba(255, 255, 255, .05); border-radius: 999px; padding: 3px 10px; }
.tk-reply { display: flex; flex-direction: column; gap: 9px; }
.tk-reply textarea { width: 100%; box-sizing: border-box; }

/* ---------- DATA PELANGGAN: tombol salin tautan auto-login (v1.34.0) ----------
 * Ikon rantai biru (sama seperti portal acuan). Kolom AUTO LOGIN sekarang berisi
 * tombol SALIN, bukan saklar: tautannya dipakai pelanggan untuk masuk portal tanpa
 * mengetik nomor layanan.
 */
.clx-copy {
  width: 26px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border-radius: 5px;
  border: 1px solid #2563eb;
  background: #fff;
  color: #2563eb;
  cursor: pointer;
  padding: 0;
}
.clx-copy:hover { background: #2563eb; color: #fff; }
.clx-copy[disabled] {
  border-color: #cfd6e2;
  color: #aeb6c4;
  background: #f6f8fb;
  cursor: not-allowed;
}
.clx-copy[disabled]:hover { background: #f6f8fb; color: #aeb6c4; }

/* ==========================================================================================
 * SETTINGS BERTAB + INTEGRASI PEMBAYARAN (v1.35.0)
 * ==========================================================================================
 * Tab halaman: Pengaturan Utama · Portal Pelanggan · Integrasi Pembayaran.
 * Sub-tab integrasi: Moota.co · MutasiBank · Payment Gateway (Tripay).
 * Tema GELAP (aplikasi ini bertema gelap) — jangan diganti panel putih.
 */
.set-tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  margin: 0 0 16px;
  padding-bottom: 0;
}
.set-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 15px; font-size: 13.5px; font-weight: 600;
  color: var(--text-dim); text-decoration: none;
  border-bottom: 2px solid transparent; border-radius: 8px 8px 0 0;
}
.set-tab .ic { width: 16px; height: 16px; }
.set-tab:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
.set-tab.is-active {
  color: #fff;
  background: linear-gradient(180deg, rgba(37, 99, 235, .28), rgba(37, 99, 235, .05));
  border-bottom-color: #3b82f6;
}

/* kop halaman integrasi */
.ig-head { margin: 4px 0 14px; }
.ig-head h2 {
  display: flex; align-items: center; gap: 9px;
  font-size: 19px; margin: 0 0 4px; letter-spacing: -.01em;
}
.ig-head h2 .ic { width: 18px; height: 18px; color: #60a5fa; }
.ig-head p { margin: 0; }

/* sub-tab */
.ig-tabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 11px; padding: 4px; margin-bottom: 16px;
}
.ig-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--text-dim); text-decoration: none;
}
.ig-tab .ic { width: 15px; height: 15px; }
.ig-tab:hover { color: var(--text); background: rgba(255, 255, 255, .05); }
.ig-tab.is-active {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff; box-shadow: 0 2px 8px rgba(37, 99, 235, .35);
}

.ig-strip { margin-bottom: 14px; }
.ig-steps { margin: 6px 0 0; padding-left: 20px; font-size: 13px; line-height: 1.75; color: var(--text); }
.ig-steps li { margin-bottom: 4px; }
.ig-steps ul { margin: 4px 0 6px; padding-left: 18px; }
.ig-steps ul li { margin-bottom: 2px; font-size: 12.5px; color: var(--text-dim); }
.ig-steps code, .ig-steps .mono { font-family: var(--mono); font-size: 12px; }

/* contoh JSON: harus membungkus (jangan melebarkan halaman di HP) */
.ig-panel pre.rt-script { margin: 8px 0 4px; max-width: 100%; }

@media (max-width: 720px) {
  .set-tabs { gap: 2px; }
  .set-tab { padding: 9px 10px; font-size: 12.5px; flex: 1 1 auto; justify-content: center; }
  .ig-tab { flex: 1 1 auto; justify-content: center; padding: 8px 10px; font-size: 12.5px; }
  .ig-head h2 { font-size: 17px; }
}

/* ==========================================================================================
 * LOGO APLIKASI di Settings (v1.36.0) — pratinjau + unggah
 * ========================================================================================== */
.brand-logo-row { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.brand-logo-prev {
  flex: 0 0 auto; min-width: 132px; height: 92px; border-radius: 12px;
  display: grid; place-items: center; padding: 10px;
  background: linear-gradient(135deg, rgba(37, 99, 235, .18), rgba(15, 118, 110, .18));
  border: 1px solid rgba(255, 255, 255, .1);
}
.brand-logo-prev img { max-width: 118px; max-height: 72px; object-fit: contain; display: block; }
.brand-logo-empty { font-size: 12px; color: var(--text-dim); text-align: center; line-height: 1.4; }
.brand-logo-side { flex: 1 1 320px; min-width: 0; }

/* logo kustom di sidebar / halaman publik: tanpa kotak gelap, biar transparan */
.brand-img--box { max-width: 34px; max-height: 34px; object-fit: contain; display: block; }
.brand-mark--logo .brand-img--box { border-radius: 8px; }

/* ================================================================
   KEUANGAN + AKUN SAYA + GenieACS hanya-lihat
   Dipakai views/keuangan.js, views/akun.js, dan toolbar GenieACS yang
   ditampilkan hanya-baca untuk mitra (tanpa tombol aksi ke ONT).
   ================================================================ */
.sum-note {
  margin: 0; padding: 10px 18px 14px;
  font-size: 11.5px; color: var(--muted); border-top: 1px solid var(--line);
}
.ga-readonly {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 9px;
  font-size: 12px; color: var(--text-dim);
  background: rgba(148, 163, 184, 0.1);
  border: 1px dashed rgba(148, 163, 184, 0.35);
}