:root {
  --bg: #0a0d12;
  --surface: #12151b;
  --surface-2: #171b23;
  --line: #242833;
  --text: #e7e9ee;
  --muted: #8a92a3;
  --green: #22c55e;
  --red: #ef4444;
  --blue: #3b82f6;
  --blue-dim: #2563eb;
  --amber: #f59e0b;
  --shadow-card: inset 0 1px 0 rgba(255, 255, 255, .03), 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-float: inset 0 1px 0 rgba(255, 255, 255, .04), 0 16px 40px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  font-family: Inter, sans-serif;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

/* --- Topbar --- */

.topbar {
  height: 64px;
  width: calc(100% - 264px);
  margin-left: 264px;
  padding-left: 28px;
  padding-right: max(24px, calc((100vw - 1440px) / 2));
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: rgba(10, 13, 18, .92);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 24px rgba(0, 0, 0, .2);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar .brand { display: none; }

.brand {
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .02em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.brand > span:last-child span { color: var(--blue); }
.brand-mark {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: white;
  background: var(--blue);
  border-radius: 8px;
  font-weight: 700;
}

.nav { align-self: stretch; display: flex; gap: 30px; margin-left: 70px; }
.nav a { color: var(--muted); text-decoration: none; display: flex; align-items: center; position: relative; font-size: 13px; }
.nav a:hover, .nav a.active { color: var(--text); }
.nav a.active::after { content: ""; height: 2px; background: var(--blue); position: absolute; left: 0; right: 0; bottom: 0; }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.icon-button { border: 0; border-radius: 8px; background: none; color: var(--muted); width: 34px; height: 34px; position: relative; cursor: pointer; transition: background .15s ease, color .15s ease; }
.icon-button:hover { color: var(--text); background: var(--surface-2); }
.icon-button svg, .primary-button svg, .search svg { fill: none; stroke: currentColor; stroke-width: 1.7; }
.notification-dot { position: absolute; width: 6px; height: 6px; background: var(--red); border: 2px solid var(--bg); border-radius: 50%; right: 5px; top: 4px; }

.avatar, .header-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  color: #c7d2fe;
  background: #1e2635;
  border: 1px solid var(--line);
}

/* --- Main layout --- */

main {
  max-width: none;
  margin-left: 264px;
  padding: 32px clamp(22px, 4vw, 48px) 64px;
}

.page-path { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; color: var(--muted); font-size: 11px; }
.page-path b, .page-path span { color: var(--muted); font-weight: 500; }
.page-path strong { color: var(--text); font-weight: 500; }

/* --- Hero / page header --- */

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  position: relative;
}

.eyebrow { color: var(--blue); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 8px; }
h1 { font-size: clamp(22px, 3vw, 28px); line-height: 1.15; letter-spacing: -.02em; margin: 0; font-weight: 700; color: var(--text); }
.subtitle { color: var(--muted); margin: 8px 0 0; font-size: 13px; line-height: 1.6; max-width: 520px; }

.refresh-area { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }
.refresh-time { padding-right: 18px; text-align: right; border-right: 1px solid var(--line); }
.refresh-time span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.refresh-time strong { display: block; color: var(--text); font-family: "DM Mono", monospace; font-size: 11px; font-weight: 500; white-space: nowrap; }

.primary-button {
  height: 38px;
  padding: 0 16px;
  color: #fff;
  border: 1px solid var(--blue);
  background: var(--blue);
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(59, 130, 246, .22);
  transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
}
.primary-button:hover { background: var(--blue-dim); box-shadow: 0 6px 18px rgba(59, 130, 246, .3); }
.primary-button:active { transform: scale(.98); }
.primary-button svg { width: 15px; }
.primary-button.loading svg { animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Stats --- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 28px 0 18px;
}

.stats.stats-compact { grid-template-columns: repeat(auto-fit, minmax(220px, 280px)); }

.stat-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px;
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 12px;
  box-shadow: var(--shadow-card);
  transition: border-color .15s ease, transform .15s ease;
}
.stat-card:hover { border-color: #333a48; transform: translateY(-1px); }

.stat-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; font-family: "DM Mono", monospace; }
.stat-icon.green { color: var(--green); background: rgba(34, 197, 94, .1); }
.stat-icon.blue { color: var(--blue); background: rgba(59, 130, 246, .12); }
.stat-icon.red { color: var(--red); background: rgba(239, 68, 68, .1); }
.stat-icon.amber { color: var(--amber); background: rgba(245, 158, 11, .1); }
.stat-card span { color: var(--muted); display: block; font-size: 11px; margin-bottom: 5px; }
.stat-card strong { font-family: "DM Mono", monospace; font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: var(--text); }
.stat-card strong.loss { color: var(--red); }
.stat-card small { grid-column: 1 / -1; color: #616a78; font-size: 10px; margin-left: 48px; margin-top: -8px; }

/* --- Panel / table --- */

.panel { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-card); }
.panel-header { min-height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--line); }
h2 { font-size: 13px; margin: 0 0 5px; color: var(--text); font-weight: 600; }
.panel-header p { margin: 0; font-size: 10px; color: var(--muted); }
.live-dot { display: inline-block; width: 6px; height: 6px; background: var(--green); border-radius: 50%; margin-right: 5px; }

.panel-tools { display: flex; align-items: center; gap: 10px; }
/* Aksi massal (stop all / archive all) di header panel worker. */
.bulk-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  background: var(--surface-2);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.bulk-button:hover:not(:disabled) { color: var(--text); }
.bulk-start:hover:not(:disabled) { border-color: var(--green); color: var(--green); }
.bulk-stop:hover:not(:disabled) { border-color: var(--red, #ef4444); color: var(--red, #ef4444); }
.bulk-archive:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); }
.bulk-button:disabled { opacity: .45; cursor: not-allowed; }

.col-menu { position: relative; }
.col-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  background: var(--surface-2);
  font-size: 11px;
  cursor: pointer;
}
.col-toggle svg { stroke: currentColor; fill: none; stroke-width: 2; }
.col-toggle:hover { border-color: var(--blue); color: var(--text); }
.col-dropdown {
  position: absolute;
  right: 0;
  top: 42px;
  z-index: 40;
  width: 200px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  box-shadow: var(--shadow-float);
}
.col-dropdown-title { margin: 2px 4px 8px; color: #727a89; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.col-option { display: flex; align-items: center; gap: 9px; padding: 6px 6px; border-radius: 6px; color: #c3c9d3; font-size: 11px; cursor: pointer; }
.col-option:hover { background: var(--surface); }
.col-option input { accent-color: var(--blue); width: 14px; height: 14px; }
.th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.th-sort:hover { color: #c3c9d3; }
.th-sort-active { color: var(--blue); }
.sort-arrow { font-size: 9px; margin-left: 2px; }

.search {
  width: 220px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  color: var(--muted);
  background: var(--bg);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.search:focus-within { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59, 130, 246, .14); }
.search svg { width: 15px; flex: 0 0 auto; }
.search input { width: 100%; border: 0; outline: 0; color: var(--text); background: transparent; font-size: 11px; }

.table-wrap {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: #2c313d transparent;
}
.table-wrap::-webkit-scrollbar { height: 8px; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
.table-wrap::-webkit-scrollbar-thumb { background: #2c313d; border-radius: 8px; }
.table-wrap::-webkit-scrollbar-thumb:hover { background: #3a4150; }

table { width: 100%; border-collapse: collapse; min-width: max-content; }
thead { background: var(--surface-2); }
th {
  color: #7d8494;
  padding: 12px 17px;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 9px;
  font-weight: 600;
  border-bottom: 1px solid var(--line);
}

td {
  height: 50px;
  padding: 0 17px;
  color: #aeb4c0;
  border-bottom: 1px solid var(--line);
  font-family: "DM Mono", monospace;
  font-size: 12px;
  white-space: nowrap;
}

tbody tr { transition: background .12s; }
tbody tr:nth-child(even) { background: rgba(255, 255, 255, .012); }
/* Aksen kiri dipasang di baris, bukan di td:first-child, supaya tetap muncul
   walau kolom pertama disembunyikan lewat menu Kolom. */
tbody tr:hover { background: linear-gradient(to right, var(--blue) 0 2px, var(--surface-2) 2px); }

.sort { color: var(--blue); font-size: 8px; margin-left: 3px; }
.account { display: flex; align-items: center; gap: 9px; }
.account-number { color: #727a89; }

.badge { border-radius: 6px; padding: 3px 8px; font-family: Inter, sans-serif; font-size: 9px; font-weight: 600; letter-spacing: .02em; }
.badge.member { color: #4ade80; background: rgba(34, 197, 94, .1); border: 1px solid rgba(34, 197, 94, .18); }
.badge.guest { color: #fbbf24; background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .18); }
.badge.idpass { color: #4ade80; background: rgba(34, 197, 94, .1); border: 1px solid rgba(34, 197, 94, .18); }
.badge.vip { color: #fcd34d; background: rgba(234, 179, 8, .12); border: 1px solid rgba(234, 179, 8, .3); }
.badge.bind-yes { color: #38bdf8; background: rgba(56, 189, 248, .12); border: 1px solid rgba(56, 189, 248, .3); font-family: ui-monospace, monospace; }
td.bind-no { color: #64748b; }

/* Status recovery password akun finished. Warna mengikuti konvensi .badge:
   hijau = beres, kuning = menunggu/berjalan, merah = gagal. */
.recover-badge { border-radius: 6px; padding: 3px 8px; font-family: Inter, sans-serif; font-size: 9px; font-weight: 600; letter-spacing: .02em; margin-right: 6px; white-space: nowrap; }
.recover-queued { color: #fbbf24; background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .18); }
.recover-running { color: #60a5fa; background: rgba(59, 130, 246, .1); border: 1px solid rgba(59, 130, 246, .18); }
.recover-recovered { color: #4ade80; background: rgba(34, 197, 94, .1); border: 1px solid rgba(34, 197, 94, .18); }
.recover-failed { color: #f87171; background: rgba(239, 68, 68, .1); border: 1px solid rgba(239, 68, 68, .18); }
/* Tombol Recover: labelnya multi-kata, jadi TIDAK boleh pakai .account-action
   (dipatok 28x28px untuk ikon satu karakter -- teks akan tumpah keluar).
   Tingginya disamakan dengan badge di sebelahnya, lebarnya ikut teks. */
.recover-action {
  display: inline-flex; align-items: center; height: 26px; padding: 0 11px;
  border-radius: 7px; font-family: Inter, sans-serif; font-size: 11px;
  font-weight: 600; white-space: nowrap; cursor: pointer;
  color: #4ade80; background: transparent; border: 1px solid currentColor;
  transition: background .12s ease, color .12s ease;
}
.recover-action:hover:not(:disabled) { background: currentColor; color: #0a0d12; }
.recover-action:disabled { cursor: wait; opacity: .5; }

/* Tombol Pindahkan: bentuknya ikut .recover-action, cuma warnanya beda.
   WAJIB ditulis SESUDAH .recover-action -- spesifisitasnya sama (satu class),
   jadi kalau ditaruh di atas, `color: #4ade80` di atas yang menang dan
   tombolnya jadi hijau, tak bisa dibedakan dari Recover PW. */
.transfer-action { color: #7dd3fc; }

.profit { color: var(--green); }
.loss { color: var(--red); }
.status { font-family: Inter, sans-serif; color: #b2b9c6; }
.status-dot { color: #8a92a3; font-size: 15px; vertical-align: -1px; margin-right: 5px; }
.status-indicator { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; vertical-align: 1px; background: currentColor; }
.status-running { color: #4ade80; }
.status-stopped { color: #f87171; }
.status-disconnected { color: #6b7280; }

.worker-number {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .01em;
  color: #93c5fd;
  background: rgba(59, 130, 246, .1);
  border: 1px solid rgba(59, 130, 246, .18);
  white-space: nowrap;
}

/* Rename label node (page Servers): pensil kecil di samping label, baru menyala
   saat baris di-hover supaya tabel tidak ramai. */
.label-edit {
  margin-left: 6px;
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease, color .12s ease, border-color .12s ease;
}
tr:hover .label-edit, .label-edit:focus-visible { opacity: 1; }
.label-edit:hover { color: var(--text); border-color: var(--line); }
/* Dua node bernama sama: gampang salah pilih saat assign worker. */
.label-dup {
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #fbbf24;
  background: rgba(245, 158, 11, .1);
  border: 1px solid rgba(245, 158, 11, .22);
  white-space: nowrap;
}

.game-select {
  width: 88px;
  max-width: 100%;
  padding: 6px 20px 6px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  background: var(--surface-2);
  font: inherit;
}
.game-select:disabled { cursor: wait; opacity: .6; }

.bet-input {
  width: 92px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  outline: 0;
  color: var(--text);
  background: var(--surface-2);
  font: inherit;
}
.bet-input:focus { border-color: var(--blue); }
.bet-input:disabled { cursor: wait; opacity: .6; }
.bet-auto {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 7px;
  background: var(--surface-2);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.bet-auto::before {
  content: "⌁";
  color: var(--blue);
  font-size: 12px;
}

/* Kolom Delay: dua input (min–max detik), bisa diubah saat worker Running. */
.delay-cell { white-space: nowrap; }
.delay-inputs { display: inline-flex; align-items: center; gap: 4px; }
.delay-input {
  width: 52px;
  padding: 6px 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  background: var(--surface-2);
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.delay-input:focus { border-color: var(--blue); }
.delay-input:disabled { cursor: wait; opacity: .6; }
.delay-sep { color: var(--muted); }
.target-input {
  width: 124px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  outline: 0;
  color: var(--text);
  background: var(--surface-2);
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.target-input:focus { border-color: var(--blue); }
.target-input:disabled { cursor: wait; opacity: .6; }
.target-input::placeholder { color: var(--muted); font-size: 12px; }
.delay-unit { color: var(--muted); font-size: 12px; }

.bet-result { font-weight: 600; }
.bet-win { color: #4ade80; }
.bet-lose { color: #f87171; }
.bet-draw { color: #6b7280; }
.balance-win { color: #4ade80; font-weight: 600; }
.balance-lose { color: #f87171; font-weight: 600; }
.balance-draw { color: #b2b9c6; }

.account-action {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 7px;
  background: transparent;
  font-size: 12px;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background .12s ease, color .12s ease;
}
.action-stop { color: #f87171; }
.action-play { color: #4ade80; }
.action-archive { color: #93c5fd; }
.action-unassign { color: #fbbf24; }
.action-finish { color: #a78bfa; }
.account-action:hover { background: currentColor; color: #0a0d12; }
.account-action:disabled { cursor: wait; opacity: .5; }
.account-action + .account-action { margin-left: 6px; }
/* JANGAN pakai `display: flex` di sini. Ini dipasang pada <td>; begitu
   display-nya bukan `table-cell`, browser membungkus td itu dalam anonymous
   table-cell, dan dua td semacam itu yang BERSEBELAHAN melebur jadi satu sel
   (isinya menumpuk, kolom sesudahnya kosong). Perataan kanan + jarak antar
   tombol dikerjakan tanpa mengubah `display` td. */
.cell-actions { text-align: right; white-space: nowrap; }
.cell-actions > * { display: inline-grid; place-items: center; vertical-align: middle; }
.cell-actions > * + * { margin-left: 6px; }
/* Badge sudah punya margin-right sendiri (dipakai juga di luar sel aksi);
   di dalam sel ini jaraknya sudah diatur aturan di atas, jadi jangan dobel. */
.cell-actions .recover-badge { margin-right: 0; }

.menu-button { color: #727a89; background: none; border: 0; cursor: pointer; font-size: 18px; }
.empty { text-align: center; color: var(--muted); height: 130px; }

.panel-footer { padding: 13px 20px; display: flex; justify-content: space-between; color: #616a78; font-size: 9px; border-top: 1px solid var(--line); }
.pager { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pager-btn { min-width: 26px; height: 26px; padding: 0 7px; border-radius: 6px; font-size: 11px; font-weight: 700; color: #aeb4c0; background: var(--bg); border: 1px solid var(--line); cursor: pointer; transition: border-color .12s ease, background .12s ease, color .12s ease; }
.pager-btn:hover:not(:disabled) { border-color: var(--blue); color: var(--text); background: #1c212b; }
.pager-btn.active { border-color: var(--blue); color: #fff; background: var(--blue); cursor: default; }
.pager-btn:disabled { opacity: .4; cursor: default; }
.pager-gap { color: #616a78; padding: 0 2px; font-size: 11px; }
.panel-footer .link-button { background: none; border: none; color: var(--blue); font-size: 9px; font-weight: 700; cursor: pointer; padding: 0; text-decoration: underline; }
.panel-footer .link-button:hover { color: var(--text); }
.panel-footer .link-button:disabled { color: #616a78; cursor: default; text-decoration: none; }

/* --- Sidebar --- */

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 264px;
  z-index: 20;
  display: flex;
  flex-direction: column;
  color: var(--text);
  background: var(--surface);
  border-right: 1px solid var(--line);
  box-shadow: 4px 0 24px rgba(0, 0, 0, .22);
}

.sidebar-brand { min-height: 64px; padding: 0 18px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }
.sidebar-logo { width: 32px; height: 32px; display: grid; place-items: center; color: #fff; font-weight: 700; background: var(--blue); border-radius: 8px; }
.sidebar-brand div { display: flex; flex-direction: column; gap: 3px; }
.sidebar-brand strong { font-size: 12px; letter-spacing: .06em; }
.sidebar-brand small { color: var(--muted); font-size: 7px; letter-spacing: .16em; }
.sidebar-close { display: block; margin-left: auto; border: 0; color: var(--muted); background: transparent; font-size: 22px; cursor: pointer; }

.sidebar-nav { flex: 1; padding: 12px 10px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2c313d transparent; }
.nav-group { margin-bottom: 18px; }
.nav-group p { margin: 0; padding: 8px 12px; color: #5b6472; font-size: 8px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }

.sidebar-link {
  min-height: 38px;
  margin: 2px 0;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--muted);
  text-decoration: none;
  border-radius: 7px;
  font-size: 12px;
  transition: color .15s, background .15s;
}
.sidebar-link:hover { color: var(--text); background: var(--surface-2); }
.sidebar-link.active { color: #fff; background: rgba(59, 130, 246, .12); box-shadow: inset 2px 0 var(--blue); }

.nav-icon { width: 20px; color: #6b7280; font-family: "DM Mono", monospace; font-size: 16px; text-align: center; }
.sidebar-link.active .nav-icon { color: var(--blue); }
.active-pulse { width: 5px; height: 5px; margin-left: auto; border-radius: 50%; background: var(--blue); }

.nav-count, .nav-pill { margin-left: auto; color: #93c5fd; background: rgba(59, 130, 246, .12); border-radius: 8px; padding: 3px 7px; font-size: 8px; font-weight: 700; }
.nav-pill { color: #fbbf24; background: rgba(245, 158, 11, .12); letter-spacing: .05em; }

.system-card { margin: 0 12px 12px; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); box-shadow: var(--shadow-card); }
.system-card > div:first-child { display: flex; align-items: center; gap: 8px; }
.system-card strong { font-size: 10px; font-weight: 600; }
.system-card small { display: block; margin: 6px 0 10px 16px; color: var(--muted); font-size: 8px; }
.system-orbit { width: 7px; height: 7px; border: 2px solid var(--green); border-radius: 50%; }
.system-orbit.is-idle { border-color: var(--muted); }
.health-track { height: 3px; overflow: hidden; border-radius: 4px; background: #252a34; }
.health-track span { display: block; width: 100%; height: 100%; background: var(--green); }

.sidebar-profile { min-height: 64px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); }
.sidebar-profile .avatar { flex: 0 0 auto; width: 34px; height: 34px; }
.sidebar-profile > div:nth-child(2) { min-width: 0; display: flex; flex: 1; flex-direction: column; gap: 4px; }
.sidebar-profile strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-profile small { color: var(--muted); font-size: 8px; }
.sidebar-profile button { border: 0; color: var(--muted); background: none; cursor: pointer; }

.sidebar, .topbar, main { transition: transform .2s ease, margin-left .2s ease, width .2s ease; }

.mobile-menu { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: var(--surface-2); cursor: pointer; }
.mobile-menu:hover { border-color: var(--blue); }
.sidebar-overlay { display: none; }

body.sidebar-hidden .sidebar { transform: translateX(-105%); }
body.sidebar-hidden .topbar { width: 100%; margin-left: 0; }
body.sidebar-hidden main { margin-left: 0; }

/* --- Account creator page --- */

.creator-main { padding-top: 28px; }

.creator-heading {
  min-height: 100px;
  padding: 26px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.creator-heading h1 { font-size: 22px; }
.creator-heading-mark {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  color: var(--blue);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(59, 130, 246, .1);
  font-size: 26px;
}

.creator-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 18px; margin-top: 18px; }

.creator-card, .creator-info, .results-card { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-card); }
.creator-card { padding: 24px; }
.section-title { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.section-title h2, .results-header h2 { margin: 0 0 4px; color: var(--text); font-size: 13px; }
.section-title p, .results-header p { margin: 0; color: var(--muted); font-size: 9px; }
.section-number {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--blue);
  border-radius: 8px;
  background: rgba(59, 130, 246, .1);
  font-family: "DM Mono", monospace;
  font-size: 10px;
}

.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; color: #a8afbc; font-size: 10px; }
.field small { color: #616a78; font-size: 8px; }
.field input, .field select {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  outline: 0;
  color: var(--text);
  background: var(--surface-2);
  border-radius: 7px;
  font-size: 11px;
}
.field input:focus, .field select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59, 130, 246, .14); }
.delay-range { display: flex; align-items: center; gap: 8px; }
.delay-range input { text-align: center; }
.delay-sep { color: #616a78; font-size: 12px; }

.toggle-field {
  margin-top: 20px;
  padding: 14px;
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-2);
  cursor: pointer;
}
.toggle-field > span { display: flex; flex: 1; flex-direction: column; gap: 4px; }
.toggle-field strong { color: #c3c9d3; font-size: 10px; }
.toggle-field small { color: #616a78; font-size: 8px; }
.toggle-field input { position: absolute; opacity: 0; }
.toggle-field i { width: 34px; height: 19px; position: relative; border-radius: 10px; background: #2c313d; transition: .15s; }
.toggle-field i::after {
  content: "";
  width: 13px;
  height: 13px;
  position: absolute;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: #8a92a3;
  transition: .15s;
}
.toggle-field input:checked + i { background: var(--blue); }
.toggle-field input:checked + i::after { left: 18px; background: white; }

.field-toggle { justify-content: flex-start; }
.switch { display: flex; align-items: center; gap: 10px; height: 40px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch-track { width: 34px; height: 19px; flex: 0 0 auto; position: relative; border-radius: 10px; background: #2c313d; transition: .15s; }
.switch-track::after {
  content: "";
  width: 13px;
  height: 13px;
  position: absolute;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: #8a92a3;
  transition: .15s;
}
.switch input:checked + .switch-track { background: var(--blue); }
.switch input:checked + .switch-track::after { left: 18px; background: white; }
.switch-label { color: #c3c9d3; font-size: 10px; }

.pass-cell { color: #fbbf24; font-family: "DM Mono", monospace; margin-right: 8px; }
td .copy-button { height: 26px; padding: 0 10px; font-size: 9px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.secondary-button, .create-button, .copy-button {
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: #c3c9d3;
  background: var(--surface-2);
  font-size: 10px;
  cursor: pointer;
}
.secondary-button:hover, .copy-button:hover { border-color: var(--blue); }
.secondary-button:disabled { opacity: .4; cursor: not-allowed; }

.create-button { border: 1px solid var(--blue); color: #fff; background: var(--blue); box-shadow: 0 4px 14px rgba(59, 130, 246, .22); transition: background .15s ease, box-shadow .15s ease; }
.create-button:hover { background: var(--blue-dim); box-shadow: 0 6px 18px rgba(59, 130, 246, .3); }
.create-button:disabled { opacity: .6; cursor: wait; }

.creator-info { padding: 24px; }
.info-icon { width: 38px; height: 38px; display: grid; place-items: center; color: var(--blue); border-radius: 9px; background: rgba(59, 130, 246, .1); }
.creator-info h2 { margin: 20px 0 10px; font-size: 14px; }
.creator-info p { color: var(--muted); font-size: 10px; line-height: 1.7; }
.creator-info ul { padding: 0; margin: 22px 0 0; list-style: none; }
.creator-info li { margin: 11px 0; color: #b0b7c2; font-size: 9px; }
.creator-info li span { margin-right: 8px; color: var(--green); }

.results-card { margin-top: 18px; overflow: hidden; }
.results-header { padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.results-empty { min-height: 160px; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #5b6472; }
.results-empty span { font-size: 22px; }
.results-empty strong { margin: 10px 0 4px; color: #8a92a3; font-size: 11px; }
.results-empty p { margin: 0; font-size: 8px; }

.result-row {
  min-height: 62px;
  padding: 10px 22px;
  display: grid;
  grid-template-columns: 36px minmax(180px, 1fr) 200px auto;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--line);
}
.result-number { color: #5b6472; font-family: "DM Mono", monospace; font-size: 9px; }
.result-credentials { display: flex; flex-direction: column; gap: 5px; }
.result-credentials strong { color: var(--text); font-size: 11px; }
.result-credentials code { color: #8a92a3; font-size: 9px; }
.result-meta { display: flex; gap: 8px; }
.result-meta span { padding: 4px 8px; color: #a8afbc; border-radius: 8px; background: var(--surface-2); font-size: 8px; }
.copy-button { height: 32px; }

.queue-status { min-width: 76px; padding: 6px 10px; border-radius: 8px; text-align: center; text-transform: uppercase; font-size: 8px; font-weight: 700; letter-spacing: .06em; }
.queue-pending { color: #fbbf24; background: rgba(245, 158, 11, .12); }
.queue-processing { color: #93c5fd; background: rgba(59, 130, 246, .13); }
.queue-done { color: #4ade80; background: rgba(34, 197, 94, .12); }
.queue-failed { color: #f87171; background: rgba(239, 68, 68, .12); }

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 50;
  padding: 12px 16px;
  color: #bbf7d0;
  border: 1px solid rgba(34, 197, 94, .3);
  border-radius: 8px;
  background: #0f2419;
  font-size: 10px;
  opacity: 0;
  box-shadow: var(--shadow-float);
  transform: translateY(10px);
  pointer-events: none;
  transition: .2s;
}
.toast.show { opacity: 1; transform: translateY(0); }

.confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 8, 12, .68);
  backdrop-filter: blur(2px);
}
.confirm-box {
  width: 100%;
  max-width: 420px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-float);
}
.confirm-box h3 {
  margin: 0 0 4px;
  font-size: 16px;
  color: var(--text);
}
.confirm-desc {
  margin: 0 0 16px;
  font-size: 12px;
  color: var(--muted);
}
.confirm-list {
  margin: 0 0 20px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
}
.confirm-list dt {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}
.confirm-list dd {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.confirm-actions button {
  padding: 9px 16px;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--line);
}
.confirm-cancel {
  background: var(--surface-2);
  color: var(--text);
}
.confirm-cancel:hover { border-color: var(--muted); }
.confirm-ok {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue-dim);
}
.confirm-ok:hover { background: var(--blue-dim); }

@media (max-width: 950px) {
  .creator-layout { grid-template-columns: 1fr; }
  .creator-info { display: none; }
}

@media (max-width: 600px) {
  .page-path { display: none; }
  .creator-main { padding-top: 20px; }
  .creator-heading { min-height: 0; padding: 22px 20px; }
  .creator-heading-mark { display: none; }
  .form-grid { grid-template-columns: 1fr; }
  .creator-card { padding: 18px; }
  .result-row { grid-template-columns: 28px 1fr auto; }
  .result-meta { display: none; }
}

/* --- Accessibility / motion --- */

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* --- Responsive --- */

@media (max-width: 1100px) {
  .sidebar { width: 230px; }
  .topbar { width: calc(100% - 230px); margin-left: 230px; }
  main { margin-left: 230px; }
}

@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .nav { display: none; }
}

@media (max-width: 760px) {
  .sidebar {
    width: min(284px, 86vw);
    transform: translateX(-105%);
    transition: transform .2s ease;
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay {
    position: fixed;
    inset: 0;
    z-index: 19;
    background: rgba(0, 0, 0, .6);
  }
  .sidebar-overlay.show { display: block; }
  .topbar { width: 100%; margin-left: 0; }
  main { margin-left: 0; }
}

@media (max-width: 600px) {
  main { padding: 24px 16px 48px; }
  .topbar { padding-right: 16px; }
  .hero { flex-direction: column; align-items: flex-start; }
  .primary-button { width: 100%; justify-content: center; }
  .refresh-area { width: 100%; align-items: stretch; flex-direction: column; gap: 10px; }
  .refresh-time { padding: 0; text-align: left; border-right: 0; }
  .stats { grid-template-columns: 1fr; margin-top: 20px; }
  .panel-header { align-items: stretch; flex-direction: column; gap: 12px; }
  .search { width: 100%; }
  .panel-footer { gap: 10px; flex-direction: column; }
}

/* --- Halaman login --- */

.login-body {
  position: relative;
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  /* Halaman login berdiri sendiri: tidak ada sidebar/topbar. */
  grid-template-columns: 1fr;
}

.login-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(560px 360px at 18% 12%, rgba(59, 130, 246, .10), transparent 60%),
    radial-gradient(480px 320px at 88% 82%, rgba(59, 130, 246, .07), transparent 60%),
    linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 100% 42px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 42px 100%;
  -webkit-mask-image: radial-gradient(760px 560px at 50% 40%, #000, transparent 78%);
  mask-image: radial-gradient(760px 560px at 50% 40%, #000, transparent 78%);
  opacity: .5;
}

.login-shell { position: relative; z-index: 1; width: 100%; max-width: 380px; }

.login-card {
  padding: 32px 28px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-float);
}

.login-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 28px; }
.login-brand > div { display: flex; flex-direction: column; gap: 3px; }
.login-brand strong { font-size: 12px; letter-spacing: .08em; }
.login-brand small { color: var(--muted); font-size: 8px; letter-spacing: .14em; }

.login-card h1 { margin: 0 0 6px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.login-sub { margin: 0 0 22px; color: var(--muted); font-size: 11px; }

.login-card form { display: flex; flex-direction: column; gap: 16px; }

.login-alert {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 18px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--surface-2);
  font-size: 11px;
  line-height: 1.5;
}
.login-alert-icon { flex: 0 0 auto; margin-top: 2px; opacity: .85; }
.login-alert-error {
  border-color: rgba(239, 68, 68, .4);
  color: #fca5a5;
  background: rgba(239, 68, 68, .08);
}

.field-icon .field-input {
  position: relative;
  display: flex;
  align-items: center;
}
.field-icon .field-input > svg:first-child {
  position: absolute;
  left: 12px;
  color: var(--muted);
  pointer-events: none;
}
.field-icon .field-input input {
  width: 100%;
  height: 40px;
  padding: 0 12px 0 34px;
  border: 1px solid var(--line);
  outline: 0;
  color: var(--text);
  background: var(--surface-2);
  border-radius: 7px;
  font-size: 11px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field-icon .field-input input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(59, 130, 246, .14); }
.field-icon .field-input input[name="password"] { padding-right: 34px; }

.field-toggle-visibility {
  position: absolute;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  color: var(--muted);
  background: none;
  cursor: pointer;
}
.field-toggle-visibility:hover { color: var(--text); }
.field-toggle-visibility.is-visible { color: var(--blue); }

.login-button {
  position: relative;
  height: 42px;
  margin-top: 4px;
  border: 0;
  border-radius: 8px;
  color: #fff;
  background: var(--blue);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}
.login-button:hover { background: var(--blue-dim); }
.login-button:active { transform: translateY(1px); }
.login-button.is-loading { color: transparent; cursor: default; }
.login-button.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 15px;
  height: 15px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: login-spin .7s linear infinite;
}
@keyframes login-spin { to { transform: rotate(360deg); } }

.login-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 22px 0 0;
  color: #616a78;
  font-size: 9px;
  text-align: center;
}

/* Tombol logout di kartu profil sidebar. */
.logout-form { margin: 0; flex: 0 0 auto; }
.logout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--muted);
  background: none;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.logout-button:hover { border-color: rgba(239, 68, 68, .4); color: var(--red); background: rgba(239, 68, 68, .08); }

/* --- Topbar bersama: profil + notifikasi (topbar.js) --- */
.header-actions .header-avatar { cursor: pointer; transition: box-shadow .15s ease, transform .1s ease; }
.header-actions .header-avatar:hover { box-shadow: 0 0 0 2px rgba(59, 130, 246, .35); }
.header-actions .header-avatar:active { transform: scale(.96); }

.rd-anchor { position: relative; display: inline-flex; }

.rd-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 224px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: var(--shadow-float);
  padding: 6px;
  z-index: 70;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .13s ease, transform .13s ease, visibility .13s;
}
.rd-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }

.rd-menu-head { display: flex; align-items: center; gap: 11px; padding: 8px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.rd-menu-avatar {
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 600;
  color: #c7d2fe; background: #1e2635; border: 1px solid var(--line);
}
.rd-menu-id { min-width: 0; }
.rd-menu-id strong { display: block; font-size: 13px; color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-menu-id small { font-size: 11px; color: var(--muted); }

.rd-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; border-radius: 8px;
  background: none; color: var(--text); font-size: 13px; font-weight: 500;
  text-align: left; cursor: pointer; transition: background .12s ease, color .12s ease;
}
.rd-menu-item:hover { background: var(--surface-2); }
.rd-menu-item .rd-mi-ic { width: 18px; text-align: center; color: var(--muted); font-size: 13px; }
.rd-menu-item.danger:hover { background: rgba(239, 68, 68, .1); color: var(--red); }
.rd-menu-item.danger:hover .rd-mi-ic { color: var(--red); }

/* Notifikasi */
.rd-notif-menu { min-width: 300px; padding: 0; overflow: hidden; }
.rd-notif-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.rd-notif-head strong { font-size: 13px; color: var(--text); }
.rd-notif-seen { border: 0; background: none; color: var(--blue); font-size: 11px; font-weight: 600; cursor: pointer; padding: 0; }
.rd-notif-seen:hover { text-decoration: underline; }
.rd-notif-list { max-height: 340px; overflow-y: auto; }
.rd-notif-empty { padding: 26px 14px; text-align: center; color: var(--muted); font-size: 12px; }
.rd-notif-item { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.rd-notif-item:last-child { border-bottom: 0; }
.rd-notif-item.unread { background: rgba(59, 130, 246, .06); }
.rd-notif-ic {
  width: 28px; height: 28px; flex: 0 0 auto; border-radius: 8px;
  display: grid; place-items: center; font-size: 12px;
  color: var(--green); background: rgba(34, 197, 94, .12); border: 1px solid rgba(34, 197, 94, .22);
}
.rd-notif-txt { min-width: 0; }
.rd-notif-txt strong { display: block; font-size: 12px; color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rd-notif-txt small { font-size: 11px; color: var(--muted); font-family: "DM Mono", monospace; }

/* Modal ganti password */
.rd-modal {
  position: fixed; inset: 0; z-index: 80; padding: 20px;
  display: none; align-items: center; justify-content: center;
  background: rgba(5, 7, 11, .72); backdrop-filter: blur(3px);
}
.rd-modal.open { display: flex; animation: rdFade .12s ease; }
@keyframes rdFade { from { opacity: 0; } to { opacity: 1; } }
.rd-modal-card {
  width: 100%; max-width: 420px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-float); overflow: hidden;
  max-height: calc(100vh - 40px); display: flex; flex-direction: column;
}
.rd-modal-head { padding: 20px 22px 16px; border-bottom: 1px solid var(--line); }
.rd-modal-head h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.rd-modal-head p { margin: 5px 0 0; font-size: 11px; color: var(--muted); }
.rd-modal-body { padding: 20px 22px; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.rd-field { margin-bottom: 15px; }
.rd-field label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 7px; font-weight: 600; }
.rd-field input {
  width: 100%; height: 40px; padding: 0 13px; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px;
  font-size: 13px; outline: none; transition: border-color .12s ease;
}
.rd-field input:focus { border-color: var(--blue); }
.rd-pw-msg { margin: 4px 0 0; font-size: 12px; min-height: 16px; color: var(--muted); }
.rd-pw-msg.err { color: var(--red); }
.rd-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px 20px; border-top: 1px solid var(--line); }
.rd-btn {
  height: 38px; padding: 0 18px; border-radius: 8px; font-size: 13px; font-weight: 600;
  cursor: pointer; border: 1px solid var(--line); transition: background .12s ease, border-color .12s ease, opacity .12s ease;
}
.rd-btn.ghost { background: var(--surface-2); color: var(--muted); }
.rd-btn.ghost:hover { color: var(--text); }
.rd-btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.rd-btn.primary:hover { background: var(--blue-dim); }
.rd-btn:disabled { opacity: .6; cursor: default; }

/* Toast bersama */
.rd-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px);
  z-index: 90; max-width: 90vw; padding: 12px 18px; border-radius: 10px;
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
  font-size: 13px; font-weight: 500; box-shadow: var(--shadow-float);
  opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.rd-toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.rd-toast.ok { border-color: rgba(34, 197, 94, .4); }
.rd-toast.err { border-color: rgba(239, 68, 68, .4); }

/* --- Live monitor per-node (1 card = 1 IP) --- */
.node-groups { display: flex; flex-direction: column; gap: 22px; padding: 20px; }
.node-empty {
  padding: 40px 20px; text-align: center; color: var(--muted);
  font-size: 12px; border: 1px dashed var(--line); border-radius: 12px;
}
.node-card {
  border: 1px solid #2c313d;
  border-radius: 12px;
  background: var(--bg);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}
.node-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 18px 22px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  user-select: none;
  transition: background .12s ease;
}
.node-card-head:hover { background: #1c212b; }
/* Card collapsed: sembunyikan tabel, kecilkan border bawah header. */
.node-card.collapsed .table-wrap { display: none; }
.node-card.collapsed .node-card-head { border-bottom: 0; }
.node-caret {
  color: var(--muted); font-size: 10px; width: 12px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
}
.node-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.node-title strong { font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: .01em; }
.node-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
}
.node-dot.on { background: var(--green); box-shadow: 0 0 0 3px rgba(34, 197, 94, .15); }
.node-dot.off { background: #4b5262; }
/* Node tak mengirim heartbeat >120 dtk: status worker-nya tak bisa dipercaya. */
.node-dot.stale { background: var(--red); box-shadow: 0 0 0 3px rgba(248, 113, 113, .15); }
.node-ip {
  font-family: "DM Mono", monospace; font-size: 11px; color: var(--muted);
  padding: 2px 8px; border-radius: 6px; background: var(--bg); border: 1px solid var(--line);
}
.node-stats { display: flex; align-items: center; gap: 8px; font-size: 11px; flex-wrap: wrap; }
/* Set delay semua worker satu node, langsung dari header card. */
.node-delay { position: relative; display: inline-flex; align-items: center; gap: 6px; cursor: default; }
/* .node-card di-clip (overflow:hidden) demi sudut membulat -- box delay yang
   keluar dari header akan kepotong. Saat box terbuka, clip dilepas. */
.node-card.delay-open { overflow: visible; }
.node-delay-open {
  height: 24px; padding: 0 10px; border-radius: 6px; font-size: 11px; font-weight: 600;
  color: #aeb4c0; background: var(--bg); border: 1px solid var(--line);
  cursor: pointer; transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.node-delay-open:hover { border-color: var(--blue); color: var(--text); background: #1c212b; }
.node-delay.open .node-delay-open { border-color: var(--blue); color: var(--text); background: #1c212b; }
/* Tombol arsip massal di card "Belum di-assign" -- aksen merah, aksi destruktif. */
.node-archive-unassigned { color: #e8846b; border-color: #5a2f28; }
.node-archive-unassigned:hover { border-color: var(--red, #e05252); color: #fff; background: #3a201c; }
/* Box input muncul di bawah tombol. */
.node-delay-pop {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
  min-width: 250px; padding: 12px; cursor: default; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: var(--shadow-float);
}
.node-delay-pop-head {
  font-size: 11px; font-weight: 600; color: var(--text);
  margin-bottom: 9px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.node-delay-row { display: flex; align-items: center; gap: 6px; }
.node-delay-label { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.node-delay .delay-input { width: 62px; height: 26px; font-size: 12px; }
/* Target balance angkanya panjang (miliaran) -> input sendiri yang lebih lebar. */
.node-delay .target-input { width: 148px; text-align: right; }
.node-delay-hint { display: block; margin-top: 8px; font-size: 10px; line-height: 1.45; color: var(--muted); }
.node-delay-foot { display: flex; justify-content: flex-end; gap: 7px; margin-top: 10px; }
.node-delay-apply, .node-delay-cancel {
  height: 26px; padding: 0 12px; border-radius: 6px; font-size: 11px; font-weight: 600;
  cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.node-delay-apply { color: #fff; background: var(--blue); border: 1px solid var(--blue); }
.node-delay-apply:hover:not(:disabled) { filter: brightness(1.08); }
.node-delay-cancel { color: #aeb4c0; background: var(--surface-2); border: 1px solid var(--line); }
.node-delay-cancel:hover:not(:disabled) { border-color: var(--blue); color: var(--text); }
.node-delay-apply:disabled, .node-delay-cancel:disabled { cursor: wait; opacity: .6; }
.node-delay-mixed {
  font-size: 10px; font-weight: 600; color: var(--amber);
  padding: 2px 7px; border-radius: 5px;
  background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .22);
}
.node-cap {
  font-family: "DM Mono", monospace; color: #aeb4c0;
  padding: 3px 9px; border-radius: 6px; background: var(--bg); border: 1px solid var(--line);
}
.node-active {
  font-family: Inter, sans-serif; font-weight: 600; color: #4ade80;
  padding: 3px 9px; border-radius: 6px;
  background: rgba(34, 197, 94, .1); border: 1px solid rgba(34, 197, 94, .18);
}
.node-stale {
  font-family: Inter, sans-serif; font-weight: 600; color: #f87171;
  padding: 3px 9px; border-radius: 6px;
  background: rgba(248, 113, 113, .1); border: 1px solid rgba(248, 113, 113, .2);
}
/* Card yang belum di-assign ke node dibedakan warnanya. */
.node-card[data-server="null"] .node-dot.off { background: var(--amber); }
.node-card[data-server="null"] .node-card-head { background: rgba(245, 158, 11, .06); }

/* --- Modal Node Creator --- */
.rd-modal-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rd-modal-x {
  background: transparent; border: 0; color: var(--muted); font-size: 22px;
  line-height: 1; cursor: pointer; padding: 0 2px; margin-top: -2px;
}
.rd-modal-x:hover { color: var(--text); }
.rd-field select {
  width: 100%; height: 38px; padding: 0 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg); color: var(--text);
  font-size: 13px; outline: 0; cursor: pointer;
}
.rd-field select:focus { border-color: var(--blue); }
.rd-hint { display: block; margin-top: 6px; font-size: 10px; color: var(--muted); }
.rd-modal-warn {
  margin: 4px 0 0; padding: 10px 12px; border-radius: 8px; font-size: 11px;
  color: #fbbf24; background: rgba(245, 158, 11, .08);
  border: 1px solid rgba(245, 158, 11, .2);
}
.rd-pw-msg.ok { color: var(--green); }
.rd-key-status {
  margin: 0; font-family: "DM Mono", monospace; font-size: 13px; color: var(--text);
  padding: 9px 12px; border-radius: 8px; background: var(--surface-2);
  border: 1px solid var(--line); letter-spacing: .05em;
}
.rd-key-status.empty { color: var(--amber); letter-spacing: normal; }

/* Daftar multi-key */
.rd-key-list { display: flex; flex-direction: column; gap: 8px; }
.rd-key-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border-radius: 8px; background: var(--surface-2);
  border: 1px solid var(--line);
}
.rd-key-item.active { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, var(--surface-2)); }
.rd-key-info { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.rd-key-info strong { font-size: 13px; font-weight: 600; color: var(--text); }
.rd-key-mask { font-family: "DM Mono", monospace; font-size: 12px; color: var(--muted); letter-spacing: .05em; }
.rd-key-badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: #fff; background: var(--blue); padding: 2px 7px; border-radius: 999px;
}
.rd-key-actions { display: flex; gap: 6px; flex-shrink: 0; }
/* Tombol aksi baris (Servers): ghost halus, seragam, warna cuma aksen teks+hover.
   Hierarki bahaya: netral (Kosongkan) → amber (Hapus DB, VPS hidup) → merah (Destroy VPS). */
.rd-btn.sm {
  height: 30px; padding: 0 11px; font-size: 12px; font-weight: 500; letter-spacing: .01em;
  color: var(--muted); background: var(--surface-2); border-color: var(--line);
}
.rd-btn.sm:hover:not(:disabled) { color: var(--text); border-color: var(--muted); }
.rd-btn.warn.sm { color: var(--amber); }
.rd-btn.warn.sm:hover:not(:disabled) { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 55%, var(--line)); background: rgba(245, 158, 11, .08); }
.rd-btn.danger.sm { color: color-mix(in srgb, var(--red) 82%, var(--muted)); }
.rd-btn.danger.sm:hover:not(:disabled) { color: var(--red); border-color: color-mix(in srgb, var(--red) 55%, var(--line)); background: rgba(239, 68, 68, .08); }
.rd-btn.sm:disabled { opacity: .4; }

/* --- Provision overlay: fullscreen, tak bisa dibatalkan selama proses --- */
.rd-provision {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(5, 7, 11, .88); backdrop-filter: blur(6px);
}
.rd-provision.open { display: flex; animation: rdFade .15s ease; }
.rd-provision-box {
  width: 100%; max-width: 440px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 16px; padding: 30px 28px;
  box-shadow: var(--shadow-float); text-align: center;
}
.rd-provision-spinner {
  width: 46px; height: 46px; margin: 0 auto 18px; border-radius: 50%;
  border: 3px solid var(--line); border-top-color: var(--blue);
  animation: rdSpin .8s linear infinite;
}
@keyframes rdSpin { to { transform: rotate(360deg); } }
.rd-provision.done .rd-provision-spinner { border-color: var(--green); border-top-color: var(--green); animation: none; }
.rd-provision.error .rd-provision-spinner { border-color: var(--red); border-top-color: var(--red); animation: none; }
.rd-provision-box h3 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--text); }
.rd-provision-sub { margin: 0 0 20px; font-size: 12px; color: var(--muted); min-height: 16px; }
.rd-provision-steps { list-style: none; margin: 0 0 18px; padding: 0; text-align: left; }
.rd-provision-steps li {
  display: flex; align-items: center; gap: 12px; padding: 9px 0;
  font-size: 13px; color: var(--muted); transition: color .2s ease;
}
.rd-provision-steps li::before {
  content: ""; width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid var(--line); background: transparent; transition: all .2s ease;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.rd-provision-steps li.active { color: var(--text); font-weight: 600; }
.rd-provision-steps li.active::before { border-color: var(--blue); box-shadow: inset 0 0 0 3px var(--blue); animation: rdPulse 1s ease-in-out infinite; }
@keyframes rdPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.rd-provision-steps li.done { color: var(--text); }
.rd-provision-steps li.done::before { content: "✓"; border-color: var(--green); background: var(--green); color: #05121a; font-size: 11px; font-weight: 700; }
.rd-provision-steps li.failed { color: var(--text); }
.rd-provision-steps li.failed::before { content: "✕"; border-color: var(--red); background: var(--red); color: #fff; font-size: 10px; font-weight: 700; }
.rd-provision-elapsed { font-family: "DM Mono", monospace; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.rd-provision-note { margin: 14px 0 0; font-size: 10px; color: var(--muted); opacity: .75; }
.rd-provision-close {
  display: none; margin: 18px auto 0; height: 38px; padding: 0 22px; border-radius: 8px;
  font-size: 13px; font-weight: 600; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
}
.rd-provision.error .rd-provision-close,
.rd-provision.done .rd-provision-close { display: inline-flex; align-items: center; justify-content: center; }

/* --- Halaman Manage Akun (manage-account.php) --- */
.primary-button.ghost {
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--text); box-shadow: none; text-decoration: none;
}
.primary-button.ghost:hover { background: #1d2230; box-shadow: none; }

/* Header akun */
.mg-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 20px; margin-bottom: 16px;
}
.mg-id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.mg-avatar {
  width: 52px; height: 52px; flex: none; border-radius: 12px;
  display: grid; place-items: center; font-family: "DM Mono", monospace;
  font-size: 18px; font-weight: 500; color: var(--blue);
  background: rgba(59, 130, 246, .12); border: 1px solid rgba(59, 130, 246, .25);
}
.mg-id-text { min-width: 0; }
.mg-id-text h2 { margin: 0; font-size: 18px; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.mg-id-text p { margin: 3px 0 0; font-size: 12px; }
.mg-head-tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.mg-badge {
  display: inline-flex; align-items: center; height: 26px; padding: 0 12px;
  border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; border: 1px solid currentColor;
}
.mg-badge.ok { color: var(--green); background: rgba(34, 197, 94, .1); }
.mg-badge.warn { color: var(--amber); background: rgba(245, 158, 11, .1); }
.mg-badge.subtle { color: var(--muted); background: var(--surface-2); border-color: var(--line); text-transform: none; }

.mg-label { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }

/* Grid saldo + kredensial */
.mg-grid {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; margin-bottom: 16px;
}
@media (max-width: 860px) { .mg-grid { grid-template-columns: 1fr; } }

/* Kartu saldo */
.mg-balance { padding: 22px; display: grid; gap: 18px; }
.mg-balance-top { display: grid; gap: 6px; }
.mg-balance-num {
  font-family: "DM Mono", monospace; font-size: 34px; line-height: 1.1;
  color: var(--green); font-weight: 500; word-break: break-all;
}
.mg-substats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  padding-top: 18px; border-top: 1px solid var(--line);
}
.mg-substats > div { display: grid; gap: 5px; }
.mg-substats b { font-size: 15px; color: var(--text); font-family: "DM Mono", monospace; font-weight: 500; }

/* Modal QR top-up VIP (popup) */
.mg-topup-card { max-width: 360px; }
.mg-topup-body {
  display: grid; gap: 14px; justify-items: center; text-align: center;
}

/* Kotak QR top-up VIP */
.mg-topup {
  margin-top: 16px; padding: 18px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line);
  display: grid; gap: 14px; justify-items: center; text-align: center;
}
.mg-topup-head { display: grid; gap: 4px; justify-items: center; }
.mg-topup-head strong { font-size: 15px; color: var(--text); }
.mg-topup-qr {
  width: 220px; height: 220px; display: grid; place-items: center;
  background: #ffffff; border-radius: 12px; padding: 10px;
}
.mg-topup-qr img { width: 100%; height: 100%; image-rendering: pixelated; }
.mg-topup-msg { font-size: 12px; color: var(--muted); margin: 0; }
.mg-topup-link {
  font-size: 13px; color: var(--blue); text-decoration: none;
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); transition: border-color .15s ease;
}
.mg-topup-link:hover { border-color: var(--blue); }

/* Kartu kredensial */
.mg-cred-body { padding: 6px 20px 18px; display: grid; gap: 0; }
.mg-cred-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid var(--line);
}
.mg-cred-row:last-child { border-bottom: 0; }
.mg-cred-val { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mg-cred-val code {
  font-family: "DM Mono", monospace; font-size: 13px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px;
}
.mg-cred-val code.mg-device { white-space: normal; font-size: 11px; color: var(--muted); text-align: right; }

/* Aksi */
.mg-actions-panel .panel-header { flex-wrap: wrap; gap: 8px; }
.mg-note-inline { color: var(--amber); font-size: 11px; }
.manage-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 18px 20px; }
.manage-action { text-decoration: none; }

/* Modal Bind Phone (popup 2 langkah OTP) */
.mg-bind-card { max-width: 360px; }
.mg-bind-body { display: grid; gap: 14px; }
.mg-bind-step { display: grid; gap: 8px; }
.mg-bind-lbl { font-size: 13px; opacity: .8; }
.mg-bind-input {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  border-radius: 10px; border: 1px solid rgba(148,163,184,.35);
  background: rgba(15,23,42,.35); color: inherit; font-size: 15px;
  letter-spacing: .04em;
}
.mg-bind-input:focus { outline: none; border-color: rgba(99,102,241,.7); }
.mg-bind-msg { font-size: 13px; opacity: .85; min-height: 1em; margin: 0; }

/* Bind Phone: aksi resend / ubah nomor di step OTP */
.mg-bind-otp-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}
.mg-bind-link {
  background: none;
  border: none;
  padding: 4px 2px;
  font-size: 13px;
  color: #6aa8ff;
  cursor: pointer;
}
.mg-bind-link:hover:not(:disabled) { text-decoration: underline; }
.mg-bind-link:disabled { color: #6b7280; cursor: default; }

/* Nomor telepon terikat di panel Kredensial */
.mg-phone-tag {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #34d399;
  background: rgba(52,211,153,.12);
  border: 1px solid rgba(52,211,153,.35);
  border-radius: 999px;
  padding: 2px 8px;
}

/* Send Chip modal */
.mg-chip-card { max-width: 380px; }
.mg-chip-body { display: grid; gap: 12px; }
.mg-chip-avail {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(52,211,153,.08);
  border: 1px solid rgba(52,211,153,.25);
}
.mg-chip-avail-lbl { font-size: 13px; opacity: .8; }
.mg-chip-avail-val {
  font-size: 18px; font-weight: 700; color: #34d399;
  margin-left: auto; letter-spacing: .02em;
}
.mg-chip-avail .mg-bind-link { margin-left: 0; }
.mg-chip-msg { font-size: 13px; opacity: .85; min-height: 1em; margin: 0; }

/* Send Chip: tautan (all) di label jumlah */
.mg-chip-all {
  background: none;
  border: none;
  padding: 0 2px;
  font-size: 12px;
  font-weight: 600;
  color: #6aa8ff;
  cursor: pointer;
}
.mg-chip-all:hover { text-decoration: underline; }

/* Riwayat Chip Terkirim — samakan dgn tabel data global (th/td) */
.mg-chiplog-panel { margin-top: 16px; }
.mg-chiplog-wrap {
  overflow-x: auto;
  border-top: 1px solid var(--line);
}
.mg-chiplog-wrap::-webkit-scrollbar { height: 8px; }
.mg-chiplog-wrap::-webkit-scrollbar-track { background: transparent; }
.mg-chiplog-wrap::-webkit-scrollbar-thumb { background: #2c313d; border-radius: 8px; }
.mg-chiplog-wrap::-webkit-scrollbar-thumb:hover { background: #3a4150; }
.mg-chiplog { width: 100%; border-collapse: collapse; }
.mg-chiplog thead { background: var(--surface-2); }
.mg-chiplog thead th {
  color: #7d8494;
  padding: 12px 20px;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 9px;
  font-weight: 600;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.mg-chiplog tbody td {
  height: 50px;
  padding: 0 20px;
  color: #aeb4c0;
  border-bottom: 1px solid var(--line);
  font-family: "DM Mono", monospace;
  font-size: 12px;
  white-space: nowrap;
}
.mg-chiplog tbody tr { transition: background .12s; }
.mg-chiplog tbody tr:nth-child(even) { background: rgba(255, 255, 255, .012); }
.mg-chiplog tbody tr:last-child td { border-bottom: 0; }
.mg-chiplog tbody tr:hover { background: linear-gradient(to right, var(--blue) 0 2px, var(--surface-2) 2px); }
.mg-chiplog th.mg-chiplog-amt,
.mg-chiplog td.mg-chiplog-amt {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--green);
  font-weight: 600;
}
.mg-chiplog-empty { padding: 18px 20px; color: var(--muted); font-size: 12px; margin: 0; }

/* ==== Start Bet panel + modal ==== */
.mg-bet-panel { margin-top: 16px; }
.mg-bet-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: 4px 10px;
  border-radius: 999px; text-transform: uppercase; border: 1px solid var(--line);
  color: var(--muted); background: var(--surface-2);
}
.mg-bet-badge[data-state="on"] {
  color: var(--green); background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.35);
}
.mg-bet-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; margin: 16px 20px;
}
.mg-bet-stat { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--surface); }
.mg-bet-k { font-size: 9px; text-transform: uppercase; letter-spacing: .08em; color: #7d8494; }
.mg-bet-v { font-family: "DM Mono", monospace; font-size: 14px; color: var(--text); }
.mg-bet-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 0 20px 18px; }
.mg-bet-msg { margin: 0; padding: 0 20px 16px; font-size: 12px; color: var(--muted); min-height: 1em; }

.mg-betcfg-card { max-width: 460px; }
.mg-betcfg-body { display: flex; flex-direction: column; gap: 14px; }
.mg-betcfg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mg-betcfg-field { display: flex; flex-direction: column; gap: 6px; }
.mg-betcfg-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); cursor: pointer; }
.mg-betcfg-check input { width: 15px; height: 15px; accent-color: var(--green); }
@media (max-width: 480px) { .mg-betcfg-row { grid-template-columns: 1fr; } }

.mg-betcfg-field-full { grid-column: 1 / -1; }

.mg-topup-expiry { margin: 6px 0 0; font-size: 12px; font-weight: 600; color: #4ade80; text-align: center; }
.mg-topup-expiry.expired { color: #f87171; }

.mg-bind-step[hidden] { display: none; }

/* Akun diblokir/freeze server (status hall 306) -> badge merah. */
.badge.blocked { color: #fca5a5; background: rgba(239, 68, 68, .14); border: 1px solid rgba(239, 68, 68, .4); }
.mg-badge.blocked { color: #fecaca; background: rgba(239, 68, 68, .16); border: 1px solid rgba(239, 68, 68, .45); }

/* Send Chip: loading overlay + centang berhasil */
.mg-chip-card { position: relative; }
.mg-chip-overlay[hidden] { display: none; }
.mg-chip-overlay {
  position: absolute; inset: 0; z-index: 6;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  background: rgba(15, 17, 22, .84);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  border-radius: inherit;
}
.mg-chip-spinner {
  width: 46px; height: 46px; border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, .14);
  border-top-color: var(--blue, #4c8dff);
  animation: mgChipSpin .8s linear infinite;
}
@keyframes mgChipSpin { to { transform: rotate(360deg); } }
.mg-chip-overlay-txt {
  margin: 0; font-size: 14px; font-weight: 600;
  color: #e9edf4; letter-spacing: .2px;
}
.mg-chip-check, .mg-chip-check-svg { width: 56px; height: 56px; }
.mg-chip-check-svg circle {
  fill: none; stroke: #2fbf71; stroke-width: 3;
  stroke-dasharray: 151; stroke-dashoffset: 151;
  animation: mgChipCircle .4s ease forwards;
}
.mg-chip-check-svg path {
  fill: none; stroke: #2fbf71; stroke-width: 4;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 36; stroke-dashoffset: 36;
  animation: mgChipTick .3s .35s ease forwards;
}
@keyframes mgChipCircle { to { stroke-dashoffset: 0; } }
@keyframes mgChipTick { to { stroke-dashoffset: 0; } }
.mg-chip-overlay.done .mg-chip-overlay-txt { color: #2fbf71; }

/* Send Chip: mini spinner inline saat refresh available */
.mg-chip-mini-spin {
  display: inline-block; width: 16px; height: 16px; vertical-align: -3px;
  border: 2px solid rgba(255, 255, 255, .18);
  border-top-color: var(--blue, #4c8dff);
  border-radius: 50%; animation: mgChipSpin .7s linear infinite;
}

/* --- Progress Worker (halaman baca-saja) ---------------------------------
   Card saja: tak ada tabel worker, tak ada kontrol. Header tak bisa diklik
   (tak ada collapse), jadi cursor dikembalikan normal. Grid kotak rapat:
   isi card cuma nama node + saldo, jadi tak perlu card selebar layar. */
.progress-nodes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}
.progress-card {
  /* Kotak: tinggi mengikuti lebar kolom. Isi ditaruh di tengah supaya card
     tetap rapi walau nama node pendek/panjang. */
  aspect-ratio: 1 / 1;
}
.progress-card .node-card-head {
  cursor: default;
  border-bottom: 0;
  height: 100%;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 16px 14px;
}
.progress-card .node-card-head:hover { background: var(--surface-2); }
.progress-card[data-server="null"] .node-card-head:hover { background: rgba(245, 158, 11, .06); }
.progress-card .node-title { flex-wrap: wrap; justify-content: center; }
.progress-card .node-title strong { font-size: 14px; }
/* Baris sendiri di bawah label node, bukan badge di sampingnya. */
.node-top-balance {
  font-family: "DM Mono", monospace; font-size: 13px; font-weight: 500;
  color: #d8b26a; white-space: nowrap;
}
@media (max-width: 480px) {
  .progress-nodes { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* --- Finished, tampilan supervisor ---
   Kolomnya cuma 5 (Player ID / VIP / Bind Phone / Balance / Manage), jadi
   Manage jadi kolom TERAKHIR dan melar mengisi sisa lebar tabel. Aturan umum
   `.cell-actions { text-align: right }` (dibuat waktu masih ada kolom Transfer
   di sebelahnya) membuat tombolnya terlempar ke ujung kanan, tak sejajar lagi
   dengan header "MANAGE" yang rata kiri. Di tampilan ini sel aksi diratakan
   kiri supaya kembali segaris dengan headernya.
   Tampilan admin/superadmin TIDAK terpengaruh -- dipagari kelas di <body>. */
.role-supervisor-view #dataTable .cell-actions { text-align: left; }
/* `table` dipatok width:100% (:281). Dengan 14 kolom sisa lebarnya habis
   sendiri, tapi dengan 5 kolom sisa itu dibagi RATA ke semua kolom -> tiap
   kolom melar dan isinya renggang. Jadi satu kolom ditunjuk MENYERAP seluruh
   sisa: Manage (paling kanan) diberi width:100%, kolom lain menciut seukuran
   isinya. Hasilnya kolom rapat di kiri, ruang kosong menumpuk di kanan --
   bukan disisipkan di antara kolom.
   Jangan diganti width:1%: itu menyusutkan Manage dan melemparkan sisanya
   kembali ke 4 kolom lain (persis gejala yang diperbaiki di sini). */
.role-supervisor-view #dataTable th[data-col="manage"],
.role-supervisor-view #dataTable td[data-col="manage"] { width: 100%; white-space: nowrap; }
.role-supervisor-view #dataTable th:not([data-col="manage"]),
.role-supervisor-view #dataTable td:not([data-col="manage"]) { white-space: nowrap; }