/* ============================================================
   ADMIN — KPI cards, revenue chart, fee sliders, data table
   ============================================================ */

/* ---- KPI grid ---- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.kpi-card {
  padding: 18px;
  border-radius: 16px;
  border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--surface), var(--bg2));
}

.kpi-card__label {
  color: var(--faint);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 7px;
}

.kpi-card__val {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 700;
  margin-top: 8px;
  line-height: 1.2;
}
.kpi-card__val--warn { color: var(--gold); }

.kpi-card__trend {
  font-size: 12px;
  font-weight: 700;
  margin-top: 5px;
}
.kpi-card__trend--up   { color: var(--green); }
.kpi-card__trend--down { color: var(--red); }

/* Top row (label + badge) + sparkline — badge/spark chỉ hiện ở Nebula (Neon byte-nguyên) */
.kpi-card__top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.kpi-card__badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 100px; }
.kpi-card__badge[hidden] { display: none; }
.kpi-card__spark { display: none; }

/* ---- Admin 2-col grid ---- */
.admin-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 16px;
  margin-top: 16px;
}

/* ---- Revenue bar chart ---- */
.bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 170px;
  margin-top: 14px;
}

.bar-chart__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  height: 100%;
  justify-content: flex-end;
}

.bar-chart__bar {
  width: 100%;
  border-radius: 7px 7px 3px 3px;
  background: linear-gradient(180deg, var(--pink), var(--violet));
  transition: height .6s cubic-bezier(.2,.8,.2,1);
  min-height: 6px;
}
.bar-chart__bar--today { background: linear-gradient(180deg, var(--cyan), var(--cyan2)); }

.bar-chart__label { font-size: 11px; color: var(--faint); min-height: 14px; }

/* ---- Biểu đồ cột đôi: Nạp vs Donate stream ---- */
.bar-chart--multi { gap: 5px; overflow-x: auto; padding-bottom: 4px; }
.bar-chart--multi .bar-chart__col { min-width: 16px; gap: 6px; }
.bar-chart__pair {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 3px; width: 100%; height: 100%;
}
.bar-chart__pair .bar-chart__bar { width: 46%; min-height: 0; }
.bar-chart__bar--topup  { background: linear-gradient(180deg, var(--cyan), var(--cyan2)); }
.bar-chart__bar--donate { background: linear-gradient(180deg, var(--pink), var(--violet)); }

.chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.chart-legend { display: flex; gap: 14px; }
.chart-legend__item { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.chart-legend__dot { width: 10px; height: 10px; border-radius: 3px; }

/* ---- Khối thống kê tách riêng (Donate stream) ---- */
.stat-block { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); padding: 16px 18px; }
.stat-block__head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.stat-block__icon { font-size: 26px; line-height: 1; }
.stat-block__title { font-weight: 700; }
.stat-block__sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.stat-block__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mini-kpi { background: var(--bg2); border-radius: 12px; padding: 12px 14px; }
.mini-kpi__label { font-size: 12.5px; color: var(--muted); }
.mini-kpi__val { font-family: var(--font-mono); font-size: 20px; font-weight: 700; margin-top: 4px; }
.mini-kpi__note { font-size: 11px; margin-top: 3px; }
@media (max-width: 480px) { .stat-block__grid { grid-template-columns: 1fr; } }

/* ---- Lọc vai trò NGAY tại cột "Vai trò" (không cần dropdown riêng) ---- */
.th-role { padding: 0 !important; }
.th-rolesel {
  appearance: none; -webkit-appearance: none; margin: 0; cursor: pointer;
  background: transparent; border: 0; color: inherit;
  font: inherit; font-weight: 700; font-size: 11px; letter-spacing: .5px; text-transform: uppercase;
  padding: 8px 22px 8px 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%238a83b8' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 6px center;
}
.th-rolesel:hover { color: var(--ink); }
.th-rolesel.is-filtered { color: var(--ink); }
.th-rolesel option { text-transform: none; letter-spacing: normal; }

/* ---- Nút hàng bảng (Thông tin + Sửa cạnh nhau) ---- */
.acp-rowbtns { display: flex; gap: 6px; }
.abtn--ghost { background: var(--surface2); color: var(--muted); }
.abtn--ghost:hover { background: var(--surface); color: var(--ink); }

/* ---- Modal "Thông tin" đầy đủ thành viên / streamer (thiết kế NHỎ GỌN) ---- */
.acp-info__box { width: 680px; max-width: 94vw; max-height: 88vh; overflow-y: auto; font-size: 13px; }
.acp-info__loading { padding: 36px 8px; text-align: center; color: var(--muted); }
.acp-info__head { display: flex; align-items: center; gap: 11px; margin: 2px 30px 14px 0; }
.acp-info__av {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 11px; overflow: hidden;
  display: grid; place-items: center; font-size: 22px; background: var(--surface2);
}
.acp-info__av img { width: 100%; height: 100%; object-fit: cover; }
.acp-info__head .story-create__title { font-size: 16px; }
.acp-info__id { min-width: 0; }
.acp-info__meta { font-size: 11.5px; margin-top: 3px; display: flex; flex-wrap: wrap; gap: 3px 7px; align-items: center; }

/* Ô KPI gọn hơn bản Tổng quan */
.acp-info__grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin-bottom: 2px; }
.acp-info__grid .mini-kpi { padding: 8px 10px; border-radius: 9px; }
.acp-info__grid .mini-kpi__label { font-size: 11px; }
.acp-info__grid .mini-kpi__val { font-size: 15px; margin-top: 2px; }

.acp-info__sec { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.acp-info__sectitle { font-weight: 700; font-size: 13.5px; margin-bottom: 9px; }
.acp-info__subtitle { font-weight: 700; font-size: 12px; color: var(--muted); margin: 12px 0 6px; }

/* Bảng hoá đơn gọn */
.acp-info__table { margin-top: 10px; }
.acp-info__table .data-table th,
.acp-info__table .data-table td { padding: 6px 8px; font-size: 12px; }

/* Danh sách GD / donate gọn */
.acp-info__list { display: flex; flex-direction: column; gap: 5px; }
.acp-info__list .sd-row { padding: 7px 9px; gap: 8px; }
.acp-info__list .sd-row__amt { font-size: 12.5px; min-width: 78px; }
.acp-info__list .sd-row__name { font-size: 12.5px; }
.acp-info__list .sd-row__msg { font-size: 11.5px; }
.acp-info__list .sd-row__time { font-size: 11px; }
.acp-info__empty { color: var(--faint); font-size: 12.5px; padding: 8px 2px; }

/* Pager trong modal */
.acp-info__pager { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }

/* ---- Bộ lọc trang Giao dịch — đồng bộ chiều cao/viền/bo cho cả select lẫn ô tìm ---- */
#acp-transactions .tx-filters { align-items: center; }
#acp-transactions .tx-sel,
#acp-transactions .tx-search {
  height: 44px; padding: 0 14px; font-size: 13.5px; line-height: normal;
  border: 1.5px solid var(--line-soft); border-radius: 12px;
  background: var(--surface); color: var(--ink);
}
#acp-transactions .tx-search { flex: 2; min-width: 0; }
#acp-transactions .tx-sel:focus,
#acp-transactions .tx-search:focus { border-color: var(--pink); outline: none; }

/* ---- Header bảng có thể sort ---- */
.th-sort { cursor: pointer; user-select: none; white-space: nowrap; transition: color var(--ease); }
.th-sort:hover { color: var(--ink); }
.th-sort::after { content: '⇅'; opacity: .35; margin-left: 5px; font-size: 11px; }
.th-sort.is-sorted[data-dir="asc"]::after  { content: '↑'; opacity: 1; color: var(--pink); }
.th-sort.is-sorted[data-dir="desc"]::after { content: '↓'; opacity: 1; color: var(--pink); }

/* ---- Chọn khoảng ngày tuỳ chọn ("Khác…") ---- */
.tx-daterange { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.tx-date-lb { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.tx-date {
  height: 40px; padding: 0 12px; font-size: 13.5px; color: var(--ink); color-scheme: dark;
  border: 1.5px solid var(--line-soft); border-radius: 11px; background: var(--surface);
  font-family: var(--font-mono);
}
.tx-date:focus { border-color: var(--pink); outline: none; }
.tx-date-sep { color: var(--faint); }

/* ---- Thống kê nhanh trang Giao dịch ---- */
.tx-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.tx-stat { flex: 1; min-width: 130px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.tx-stat__label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.tx-stat__val { font-family: var(--font-mono); font-weight: 700; font-size: 16px; }

/* ---- Fee configuration ---- */
/* ---- Quản lý thể loại game ---- */
.acp-game-add { display: flex; gap: 8px; align-items: center; }
.acp-game-add__icon { width: 64px; text-align: center; flex-shrink: 0; }
.acp-game-add__name { flex: 1; }
.acp-game-list { display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.acp-game-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 12px;
}
.acp-game-row__icon { font-size: 20px; width: 28px; text-align: center; flex-shrink: 0; }
.acp-game-row--edit { gap: 8px; }
.acp-ge__icon { width: 56px; text-align: center; flex-shrink: 0; padding: 7px 4px; }
.acp-ge__name { flex: 1; padding: 7px 10px; }
.acp-ge__pick { width: 34px; height: 34px; flex-shrink: 0; font-size: 14px; }
.acp-game-row__name { flex: 1; font-weight: 700; font-size: 14px; }
.acp-game-row__ord { display: flex; gap: 4px; }
.acp-ico-btn {
  width: 26px; height: 26px; border-radius: 7px; cursor: pointer; font-size: 10px;
  border: 1px solid var(--line-soft); background: var(--surface2); color: var(--ink); transition: var(--ease);
}
.acp-ico-btn:hover:not(:disabled) { border-color: var(--violet); color: var(--violet); }
.acp-ico-btn:disabled { opacity: .35; cursor: default; }

.fee-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px 0;
}

.fee-row__label {
  font-size: 13.5px;
  font-weight: 600;
  width: 150px;
  flex-shrink: 0;
}

.fee-row input[type="range"] {
  flex: 1;
  accent-color: var(--pink);
  cursor: pointer;
}

.fee-row__val {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--cyan);
  width: 48px;
  text-align: right;
  flex-shrink: 0;
}

/* ---- Editor gói nạp Xu ---- */
.packs-head, .pack-edit-row {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr) 68px 68px 96px 92px 30px;
  gap: 8px;
  align-items: center;
}
.packs-head {
  font-size: 11px; font-weight: 700; color: var(--faint);
  text-transform: uppercase; letter-spacing: .3px;
  padding: 0 2px 6px;
}
.packs-head span:nth-child(3), .packs-head span:nth-child(4),
.packs-head span:nth-child(5), .packs-head span:nth-child(6) { text-align: right; }
.packs-editor { display: flex; flex-direction: column; gap: 8px; }
.pack-edit-row .inp { padding: 8px 9px; font-size: 13px; }
.pack-edit-row .pk-icon { text-align: center; padding: 8px 4px; }
.pack-edit-row .pk-num { text-align: right; font-family: var(--font-mono); }
.pk-rate {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  color: var(--green); text-align: right; white-space: nowrap;
}
.pk-rate.is-bad { color: var(--red); }
.pk-del {
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line-soft); background: var(--surface2);
  color: var(--faint); font-size: 13px; transition: var(--ease);
}
.pk-del:hover { color: var(--red); border-color: var(--red); }
@media (max-width: 680px) {
  .packs-head { display: none; }
  .pack-edit-row { grid-template-columns: 44px 1fr 30px; grid-auto-rows: auto; }
  .pack-edit-row .pk-num, .pack-edit-row .pk-rate { grid-column: span 1; }
}

/* ---- Data table ---- */
.table-wrap { overflow-x: auto; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 560px;
}

.data-table th {
  text-align: left;
  color: var(--faint);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 8px;
  border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}

.data-table td {
  padding: 11px 8px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: 0; }

/* ============================================================
   ADMIN CP — bố cục có danh mục bên trái
   ============================================================ */
.acp { display: grid; grid-template-columns: 210px 1fr; gap: 18px; align-items: start; }

.acp__nav {
  position: sticky; top: 12px;
  display: flex; flex-direction: column; gap: 4px;
  background: linear-gradient(180deg, var(--surface), var(--bg2));
  border: 1px solid var(--line-soft); border-radius: 16px; padding: 14px 10px;
}
.acp__brand { font-size: 16px; font-weight: 800; padding: 6px 10px 14px; }
.acp__brand span { color: var(--pink); }
.acp__navbtn {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 0; background: transparent; color: var(--muted);
  font-weight: 600; font-size: 14px; padding: 11px 12px; border-radius: 10px; cursor: pointer;
  transition: background var(--ease), color var(--ease);
}
.acp__navbtn span { width: 20px; text-align: center; }
.acp__navbtn:hover { background: var(--surface); color: var(--ink); }
.acp__navbtn.is-active { background: linear-gradient(90deg, rgba(var(--pink-rgb), .18), transparent); color: var(--ink); }

.acp__main { min-width: 0; }
.acp__title { font-size: 20px; font-weight: 800; margin: 0 0 14px; }
.acp-panel { display: none; animation: fade-in .25s ease; }
.acp-panel.is-active { display: block; }
/* DOM chỉ-Nebula (chrome dashboard) — ẩn ở Neon */
.acp__navfoot, .acp__topbar { display: none; }

/* Nút đặt hạng nhanh trong bảng player */
.rank-set { display: inline-flex; gap: 5px; }
.rank-set button {
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 7px; cursor: pointer;
}
.rank-set button.is-active { border-color: var(--pink); color: var(--ink); background: var(--surface2); }

.rank-tag { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.rank-tag--vip { background: rgba(var(--gold-rgb), .16); color: var(--gold); }
.rank-tag--hot { background: rgba(var(--pink-rgb), .16); color: var(--pink); }
.rank-tag--norm { color: var(--faint); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .kpi-grid   { grid-template-columns: repeat(2, 1fr); }
  .admin-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .acp { grid-template-columns: minmax(0, 1fr); }
  /* Nav dọc → 1 hàng tab ngang cuộn được (như Studio streamer) */
  .acp__nav {
    position: static; flex-direction: row; flex-wrap: nowrap;
    overflow-x: auto; scrollbar-width: none; gap: 6px; padding: 8px;
  }
  .acp__nav::-webkit-scrollbar { display: none; }
  .acp__navbtn { width: auto; white-space: nowrap; flex-shrink: 0; }
  .acp-panel { min-width: 0; }

  /* Bảng giữ nguyên form, cuộn ngang gọn trong khung (không nát cột) */
  .table-wrap .data-table { min-width: 560px; }

  /* Bộ lọc: ô tìm chiếm cả hàng, select chia đôi */
  #acp-transactions .tx-filters { flex-wrap: wrap; }
  #acp-transactions .tx-search { flex: 1 1 100%; }
  #acp-transactions .tx-sel { flex: 1 1 45%; min-width: 0; }
  .tx-daterange { flex-wrap: wrap; }

  /* KPI + biểu đồ gọn */
  .kpi-grid { gap: 10px; }
  .kpi-card__val { font-size: 19px; }
}

/* ---- Duyệt Player (hồ sơ đăng ký) ---- */
.acp__badge {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 9px; background: var(--red); color: var(--on-accent);
  font-size: 11px; font-weight: 800; margin-left: 4px;
}
.app-card { margin-bottom: 12px; }
.app-card__head { display: flex; align-items: center; gap: 10px; }
.app-card__svcs { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.app-svc {
  font-size: 12.5px; padding: 6px 11px; border-radius: 9px;
  background: var(--surface2); border: 1px solid var(--line-soft); color: var(--cyan);
}
.app-svc b { color: var(--gold); font-family: var(--font-mono); }
.app-card__intro { font-size: 13px; color: var(--muted); margin: 8px 0; line-height: 1.5; white-space: pre-line; }
.app-card__skills { display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.app-skill { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line-soft); }
.app-card__btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }

/* ---- Cấu hình thanh toán: trạng thái khoá ---- */
.pay-keystate { font-weight: 700; font-size: 11px; margin-left: 6px; }

/* ---- Test IPN giả lập ---- */
.pay-test[hidden] { display: none; }
.pay-test {
  margin-top: 16px; padding: 14px;
  border: 1px dashed var(--line-soft); border-radius: 14px;
  background: rgba(var(--violet-rgb), .06);
}
.pay-test__result[hidden] { display: none; }
.pay-test__result { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.pay-test__row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 10px; border-radius: 10px; font-size: 13px; line-height: 1.45;
  background: var(--surface2);
}
.pay-test__row.is-ok   { border-left: 3px solid var(--green); }
.pay-test__row.is-fail { border-left: 3px solid var(--red); }
.pay-test__mark { flex: none; }
.pay-test__verdict {
  margin-top: 4px; padding: 10px 12px; border-radius: 10px;
  font-weight: 700; font-size: 13.5px;
}
.pay-test__verdict.is-ok   { background: rgba(var(--green-rgb), .14); color: var(--green); }
.pay-test__verdict.is-fail { background: rgba(var(--red-rgb), .14); color: var(--red); }
.wd-note {
  display: inline-block; max-width: 260px; white-space: normal;
  line-height: 1.45; font-size: 12.5px;
}

/* Cần gạt khoá mềm trong bảng Streamer — select nhỏ gọn nằm cạnh nút Tắt/Mở */
.acp-locksel {
  width: auto; min-width: 118px; padding: 5px 8px;
  font-size: 12px; margin-right: 6px; vertical-align: middle;
}

/* Cấu hình phí streamer — 4 ô 1 hàng + chân (checkbox trái · nút phải) */
.fee-cfg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 900px) { .fee-cfg-grid { grid-template-columns: 1fr 1fr; } }

/* Modal credit streamer (AdminCP): hàng cộng/trừ + số tiền */
.ac-adjust { display: grid; grid-template-columns: 118px 1fr; gap: 9px; margin-top: 12px; }
/* Bộ lọc kỳ trong modal Thông tin (chip tái dùng .ov-period của Studio) */
.acp-info__subtitle .ov-period { display: inline-flex; margin-left: 10px; vertical-align: middle; }
#acpIpCustom { margin: 8px 0 10px; }
#acpIpCustom .inp { color-scheme: dark; }
.acp-modesel { width: auto; min-width: 118px; padding: 5px 8px; font-size: 12px; margin: 4px 6px 0 0; vertical-align: middle; }
.fee-cfg-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 14px; flex-wrap: wrap;
}
.fee-cfg-foot .chk { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }

/* ---- Chọn giao diện (theme) ---- */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; max-width: 720px; }
.theme-card {
  text-align: left; cursor: pointer; padding: 0; overflow: hidden;
  background: var(--surface); border: 1.5px solid var(--line-soft);
  border-radius: var(--r-md); transition: border-color var(--ease), transform var(--ease), box-shadow var(--ease);
}
.theme-card:hover { transform: translateY(-2px); border-color: var(--line); }
.theme-card.is-selected { border-color: var(--pink); box-shadow: 0 6px 20px -8px rgba(var(--pink-rgb), .55); }
.theme-card__swatches { display: flex; height: 56px; }
.theme-card__swatches span { flex: 1; }
.theme-card__body { padding: 10px 12px 12px; position: relative; }
.theme-card__name { font-weight: 600; font-size: 14.5px; color: var(--ink); display: flex; align-items: center; gap: 7px; }
.theme-card__badge { font-size: 10.5px; font-weight: 700; color: var(--on-accent); background: var(--pink); padding: 1px 7px; border-radius: 999px; }
.theme-card__desc { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.theme-card__check { position: absolute; top: 10px; right: 12px; color: var(--pink); font-weight: 700; opacity: 0; transition: opacity var(--ease); }
.theme-card.is-selected .theme-card__check { opacity: 1; }

/* ============================================================================
   NEBULA skin — ADMINCP (#admin): chrome dashboard riêng (sidebar tối + topbar),
   giống Studio .is-studio. Full-bleed, ẩn top-nav app. Neon BYTE-NGUYÊN (gate
   :root[data-theme=nebula] + .is-admin).
   ============================================================================ */
/* ---- Full-bleed: ẩn top-nav, nền dashboard tối, #admin tràn viền ---- */
:root[data-theme="nebula"] .app.is-neb.is-admin { background: var(--bg-dash); }
:root[data-theme="nebula"] .app.is-admin .gl-atmos .o1 { background: radial-gradient(circle, rgba(var(--violet-rgb), .16), transparent 62%); }
:root[data-theme="nebula"] .app.is-admin .gl-atmos .o2 { background: radial-gradient(circle, rgba(var(--pink-rgb), .1), transparent 64%); }
:root[data-theme="nebula"] .app.is-neb.is-admin .glnav { display: none; }
:root[data-theme="nebula"] .app.is-neb.is-admin #content { padding: 0; max-width: none; }
:root[data-theme="nebula"] .app.is-neb.is-admin #content > #admin.screen { max-width: none; margin: 0; padding: 0; }

/* ---- Shell = flex full-viewport: sidebar + main ---- */
:root[data-theme="nebula"] #admin .acp {
  display: flex; gap: 0; min-height: 100vh; align-items: stretch;
}

/* ---- Sidebar dọc (brand · nav · footer) ---- */
:root[data-theme="nebula"] #admin .acp__nav {
  width: 240px; flex: none; position: sticky; top: 0; height: 100vh; overflow-y: auto;
  gap: 0; padding: 0; border-radius: 0;
  background: var(--bg-dash-panel); border: 0; border-right: 1px solid rgba(var(--hl-rgb), .07);
}
:root[data-theme="nebula"] #admin .acp__brand {
  display: flex; align-items: center; gap: 8px; height: 66px; flex: none;
  padding: 0 20px 0 18px; margin: 0; font-size: 17px;
  border-bottom: 1px solid rgba(var(--hl-rgb), .07);
}
:root[data-theme="nebula"] #admin .acp__navbtn {
  color: var(--n-nav); border: 1px solid transparent; border-radius: 10px; margin: 0 12px 4px;
  font-size: 14px; font-weight: 500; padding: 10px 12px; gap: 11px;
}
:root[data-theme="nebula"] #admin .acp__navbtn:first-of-type { margin-top: 14px; }
:root[data-theme="nebula"] #admin .acp__navbtn [data-ic] svg { width: 17px; height: 17px; }
:root[data-theme="nebula"] #admin .acp__navbtn:hover { background: rgba(var(--hl-rgb), .05); color: var(--ink); }
:root[data-theme="nebula"] #admin .acp__navbtn.is-active {
  background: rgba(var(--violet-rgb), .2); border-color: rgba(var(--violet-rgb), .28);
  color: #fff; font-weight: 600;
}
/* Footer sidebar: đẩy xuống đáy */
:root[data-theme="nebula"] #admin .acp__navfoot {
  display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding: 12px;
  border-top: 1px solid rgba(var(--hl-rgb), .07);
}
:root[data-theme="nebula"] #admin .acp__navhome {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 10px;
  font-size: 13.5px; color: var(--muted); cursor: pointer; text-decoration: none;
}
:root[data-theme="nebula"] #admin .acp__navhome [data-ic] svg { width: 15px; height: 15px; }
:root[data-theme="nebula"] #admin .acp__navhome:hover { background: rgba(var(--hl-rgb), .05); color: var(--ink); }
:root[data-theme="nebula"] #admin .acp__navuser { display: flex; align-items: center; gap: 10px; padding: 4px 6px; }
:root[data-theme="nebula"] #admin .acp__navuser-av {
  width: 34px; height: 34px; border-radius: 10px; flex: none; overflow: hidden;
  display: grid; place-items: center; font-size: 17px;
  background: linear-gradient(135deg, var(--pink), var(--violet));
}
:root[data-theme="nebula"] #admin .acp__navuser-av img { width: 100%; height: 100%; object-fit: cover; }
:root[data-theme="nebula"] #admin .acp__navuser-tx { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
:root[data-theme="nebula"] #admin .acp__navuser-tx b { font-size: 13.5px; font-weight: 700; }
:root[data-theme="nebula"] #admin .acp__navuser-tx small { font-size: 11px; color: var(--n-label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Main + topbar ---- */
:root[data-theme="nebula"] #admin .acp__main { flex: 1; min-width: 0; padding: 0 30px 90px; }
:root[data-theme="nebula"] #admin .acp__topbar {
  display: flex; align-items: center; gap: 16px; height: 66px; margin: 0 -30px 22px; padding: 0 30px;
  position: sticky; top: 0; z-index: 30;
  background: rgba(var(--bg-dash-rgb), .85); backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(var(--hl-rgb), .07);
}
:root[data-theme="nebula"] #admin .acp__tbtitle { font-size: 18px; font-weight: 700; color: var(--ink); }
:root[data-theme="nebula"] #admin .acp__tbright { margin-left: auto; display: flex; align-items: center; gap: 12px; }
:root[data-theme="nebula"] #admin .acp__tbdate {
  font-size: 13px; font-weight: 600; color: var(--ink-soft); white-space: nowrap;
  border: 1px solid rgba(var(--hl-rgb), .1); background: rgba(var(--hl-rgb), .05);
  padding: 8px 13px; border-radius: 10px;
}
/* Tiêu đề panel trùng topbar → ẩn ở Nebula (giữ hàng điều khiển bên cạnh) */
:root[data-theme="nebula"] #admin .acp__title { display: none; }
/* Nút reload lẻ (mockup gọn, dữ liệu tự nạp khi mở tab) */
:root[data-theme="nebula"] #admin .reload-btn { display: none; }

/* ---- Thẻ chung → kính phẳng ---- */
:root[data-theme="nebula"] #admin .card { background: rgba(var(--hl-rgb), .04); border: 1px solid rgba(var(--hl-rgb), .09); box-shadow: none; }

/* ---- KPI ---- */
:root[data-theme="nebula"] #admin .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-top: 0; }
:root[data-theme="nebula"] #admin .kpi-card {
  background: linear-gradient(180deg, rgba(var(--hl-rgb), .06), rgba(var(--hl-rgb), .022));
  border: 1px solid rgba(var(--hl-rgb), .1); border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(var(--hl-rgb), .08), 0 14px 30px -18px rgba(var(--shadow-rgb), .6);
}
:root[data-theme="nebula"] #admin .kpi-card__label { color: var(--muted); }
/* Mockup KPI = label + badge ▲% + value 21px + sparkline (bỏ caption) */
:root[data-theme="nebula"] #admin .kpi-card__trend { display: none; }
:root[data-theme="nebula"] #admin .kpi-card__val { font-size: 21px; margin-top: 6px; }
:root[data-theme="nebula"] #admin .kpi-card__badge.is-up   { color: var(--green);     background: rgba(var(--green-rgb), .12); }
:root[data-theme="nebula"] #admin .kpi-card__badge.is-down { color: var(--pink-tint); background: rgba(var(--pink-rgb), .12); }
/* Số tiền rút: tăng = cảnh báo hồng (như mockup) */
:root[data-theme="nebula"] #admin .kpi-card[data-kpi="withdraw"] .kpi-card__badge { color: var(--pink-tint); background: rgba(var(--pink-rgb), .12); }
/* Sparkline: hiện + màu theo KPI khớp mockup */
:root[data-theme="nebula"] #admin .kpi-card__spark { display: block; width: 100%; height: 22px; margin-top: 8px; }
:root[data-theme="nebula"] #admin .kpi-card__spark polyline { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme="nebula"] #admin .kpi-card[data-kpi="revenue"]  .kpi-card__spark polyline { stroke: var(--cyan); }
:root[data-theme="nebula"] #admin .kpi-card[data-kpi="revenue"]  .kpi-card__spark polygon  { fill: rgba(var(--cyan-rgb), .1); }
:root[data-theme="nebula"] #admin .kpi-card[data-kpi="profit"]   .kpi-card__spark polyline { stroke: var(--green); }
:root[data-theme="nebula"] #admin .kpi-card[data-kpi="profit"]   .kpi-card__spark polygon  { fill: rgba(var(--green-rgb), .1); }
:root[data-theme="nebula"] #admin .kpi-card[data-kpi="withdraw"] .kpi-card__spark polyline { stroke: var(--pink-tint); }
:root[data-theme="nebula"] #admin .kpi-card[data-kpi="withdraw"] .kpi-card__spark polygon  { fill: rgba(var(--pink-rgb), .1); }
:root[data-theme="nebula"] #admin .kpi-card[data-kpi="users"]    .kpi-card__spark polyline { stroke: var(--violet); }
:root[data-theme="nebula"] #admin .kpi-card[data-kpi="users"]    .kpi-card__spark polygon  { fill: rgba(var(--violet-rgb), .12); }
:root[data-theme="nebula"] #admin .kpi-card[data-kpi="tx"]       .kpi-card__spark polyline { stroke: var(--gold); }
:root[data-theme="nebula"] #admin .kpi-card[data-kpi="tx"]       .kpi-card__spark polygon  { fill: rgba(var(--gold-rgb), .1); }
/* Hiệu ứng vẽ đường (glDraw) — JS thêm .is-draw khi vào Tổng quan */
@keyframes acp-spark-draw { from { stroke-dashoffset: 300; } to { stroke-dashoffset: 0; } }
:root[data-theme="nebula"] #admin .kpi-card__spark polyline { stroke-dasharray: 300; stroke-dashoffset: 300; }
:root[data-theme="nebula"] #admin .kpi-grid.is-draw .kpi-card__spark polyline { animation: acp-spark-draw 1.2s ease-out forwards; }
:root[data-theme="nebula"] #admin .kpi-grid.is-draw .kpi-card:nth-child(2) .kpi-card__spark polyline { animation-delay: .06s; }
:root[data-theme="nebula"] #admin .kpi-grid.is-draw .kpi-card:nth-child(3) .kpi-card__spark polyline { animation-delay: .12s; }
:root[data-theme="nebula"] #admin .kpi-grid.is-draw .kpi-card:nth-child(4) .kpi-card__spark polyline { animation-delay: .18s; }
:root[data-theme="nebula"] #admin .kpi-grid.is-draw .kpi-card:nth-child(5) .kpi-card__spark polyline { animation-delay: .24s; }

/* ---- Stat-block (Donate stream / Số dư) ---- */
:root[data-theme="nebula"] #admin .stat-block {
  background: linear-gradient(180deg, rgba(var(--hl-rgb), .05), rgba(var(--hl-rgb), .02));
  border: 1px solid rgba(var(--hl-rgb), .09); border-radius: 16px;
}
:root[data-theme="nebula"] #admin .stat-block__icon {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 20px;
  background: rgba(var(--violet-rgb), .16);
}
:root[data-theme="nebula"] #admin .mini-kpi { background: rgba(var(--hl-rgb), .04); border: 1px solid rgba(var(--hl-rgb), .07); }

/* ---- Biểu đồ ---- */
:root[data-theme="nebula"] #admin .chart-legend__item { color: var(--muted); }
:root[data-theme="nebula"] #admin .bar-chart__label { color: var(--faint); }

/* ---- Tab pill (period / member / streamer / tx / rank filter) ---- */
:root[data-theme="nebula"] #admin .itabs { background: rgba(var(--hl-rgb), .05); border-radius: 12px; padding: 4px; gap: 2px; display: inline-flex; }
:root[data-theme="nebula"] #admin .itab {
  border: 0; background: transparent; color: var(--n-nav); border-radius: 9px;
  padding: 7px 13px; font-size: 13px; font-weight: 500;
}
:root[data-theme="nebula"] #admin .itab:hover { color: var(--ink); }
:root[data-theme="nebula"] #admin .itab.is-active { background: rgba(var(--violet-rgb), .22); color: #fff; font-weight: 600; }

/* ---- Bảng dữ liệu ---- */
:root[data-theme="nebula"] #admin .data-table th { color: var(--n-label); border-bottom-color: rgba(var(--hl-rgb), .09); }
:root[data-theme="nebula"] #admin .data-table td { border-bottom-color: rgba(var(--hl-rgb), .06); }
:root[data-theme="nebula"] #admin .data-table tbody tr { transition: background .12s ease; }
:root[data-theme="nebula"] #admin .data-table tbody tr:hover > td { background: rgba(var(--hl-rgb), .035); }

/* ---- Inputs / select / filter ---- */
:root[data-theme="nebula"] #admin .inp,
:root[data-theme="nebula"] #admin .tx-date,
:root[data-theme="nebula"] #admin #acp-transactions .tx-sel,
:root[data-theme="nebula"] #admin #acp-transactions .tx-search {
  background: rgba(var(--hl-rgb), .05); border: 1px solid rgba(var(--hl-rgb), .1); color: var(--ink); color-scheme: dark;
}
:root[data-theme="nebula"] #admin .inp:focus,
:root[data-theme="nebula"] #admin .tx-date:focus,
:root[data-theme="nebula"] #admin #acp-transactions .tx-sel:focus,
:root[data-theme="nebula"] #admin #acp-transactions .tx-search:focus { border-color: rgba(var(--violet-rgb), .5); }
:root[data-theme="nebula"] #admin select.inp,
:root[data-theme="nebula"] #admin #acp-transactions .tx-sel {
  appearance: none; -webkit-appearance: none; padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a83b8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
:root[data-theme="nebula"] #admin select.inp option { background: var(--surface2); color: var(--ink); }
:root[data-theme="nebula"] #admin .tx-stat { background: rgba(var(--hl-rgb), .04); border: 1px solid rgba(var(--hl-rgb), .08); }

/* ---- Nút chính = violet · ghost = kính (gold/cyan giữ accent) ---- */
:root[data-theme="nebula"] #admin .btn--block:not(.btn--gold):not(.btn--cyan),
:root[data-theme="nebula"] #admin #saveStreamerFeeBtn { background: var(--violet2); color: #fff; }
:root[data-theme="nebula"] #admin .btn--ghost,
:root[data-theme="nebula"] #admin .abtn--ghost {
  background: rgba(var(--hl-rgb), .05); border: 1px solid rgba(var(--hl-rgb), .12); color: var(--ink);
}

/* ---- Toggle chính (bật tính năng) = pill switch xanh (checkin/email/khoá mềm) ---- */
:root[data-theme="nebula"] #admin #ciEnabled,
:root[data-theme="nebula"] #admin #mailEnabled,
:root[data-theme="nebula"] #admin #feeSoftLockChk {
  appearance: none; -webkit-appearance: none; position: relative; flex: none;
  width: 44px; height: 26px; border-radius: 100px; cursor: pointer;
  background: rgba(var(--hl-rgb), .12); border: 1px solid rgba(var(--hl-rgb), .14); transition: background .18s ease;
}
:root[data-theme="nebula"] #admin #ciEnabled::after,
:root[data-theme="nebula"] #admin #mailEnabled::after,
:root[data-theme="nebula"] #admin #feeSoftLockChk::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; transition: transform .18s ease;
}
:root[data-theme="nebula"] #admin #ciEnabled:checked,
:root[data-theme="nebula"] #admin #mailEnabled:checked,
:root[data-theme="nebula"] #admin #feeSoftLockChk:checked { background: var(--green); border-color: transparent; }
:root[data-theme="nebula"] #admin #ciEnabled:checked::after,
:root[data-theme="nebula"] #admin #mailEnabled:checked::after,
:root[data-theme="nebula"] #admin #feeSoftLockChk:checked::after { transform: translateX(18px); }
/* checkbox phụ còn lại → accent tím */
:root[data-theme="nebula"] #admin .ci-admin__toggle input,
:root[data-theme="nebula"] #admin .chk input { accent-color: var(--violet); }

/* ---- Duyệt Player (thẻ đăng ký) ---- */
:root[data-theme="nebula"] #admin .app-card { background: rgba(var(--hl-rgb), .04); border: 1px solid rgba(var(--hl-rgb), .09); border-radius: 14px; padding: 16px; }
:root[data-theme="nebula"] #admin .app-svc { background: rgba(var(--hl-rgb), .05); border: 1px solid rgba(var(--hl-rgb), .09); }

/* ---- Rank tag / rank-set ---- */
:root[data-theme="nebula"] #admin .rank-set button { background: rgba(var(--hl-rgb), .05); border: 1px solid rgba(var(--hl-rgb), .12); color: var(--n-nav); }
:root[data-theme="nebula"] #admin .rank-set button.is-active { border-color: var(--violet); color: #fff; background: rgba(var(--violet-rgb), .2); }

/* ---- Fee config / packs / game rows ---- */
:root[data-theme="nebula"] #admin .fee-row input[type="range"] { accent-color: var(--violet); }
:root[data-theme="nebula"] #admin .fee-row__val { color: var(--cyan); }
:root[data-theme="nebula"] #admin .acp-game-row,
:root[data-theme="nebula"] #admin .pk-del,
:root[data-theme="nebula"] #admin .acp-ico-btn { background: rgba(var(--hl-rgb), .05); border-color: rgba(var(--hl-rgb), .1); }

/* ---- Thẻ giao diện (theme) ---- */
:root[data-theme="nebula"] #admin .theme-card { background: rgba(var(--hl-rgb), .04); border-color: rgba(var(--hl-rgb), .12); }
:root[data-theme="nebula"] #admin .theme-card.is-selected { border-color: var(--violet); box-shadow: 0 6px 20px -8px rgba(var(--violet-rgb), .55); }
:root[data-theme="nebula"] #admin .theme-card__check { color: var(--violet-tint); }

/* ---- Test IPN ---- */
:root[data-theme="nebula"] #admin .pay-test { border-color: rgba(var(--hl-rgb), .14); background: rgba(var(--violet-rgb), .06); }
:root[data-theme="nebula"] #admin .pay-test__row { background: rgba(var(--hl-rgb), .05); }

/* ---- Modal Sửa thành viên: chip Vai trò/Hạng active = tím (đồng bộ Nebula, bỏ hồng base) ---- */
:root[data-theme="nebula"] #adminEdit .chip-pick button { background: rgba(var(--hl-rgb), .05); border-color: rgba(var(--hl-rgb), .12); color: var(--n-nav); }
:root[data-theme="nebula"] #adminEdit .chip-pick button:hover { border-color: rgba(var(--violet-rgb), .5); color: var(--ink); }
:root[data-theme="nebula"] #adminEdit .chip-pick button.is-selected {
  border-color: var(--violet); background: rgba(var(--violet-rgb), .18); color: #fff;
}

/* ---- Mobile: về xếp dọc, hiện lại top-nav app ---- */
@media (max-width: 860px) {
  :root[data-theme="nebula"] .app.is-neb.is-admin .glnav { display: flex; }
  :root[data-theme="nebula"] .app.is-neb.is-admin #content { padding: 16px 0 70px; }
  :root[data-theme="nebula"] #admin .acp { display: block; min-height: 0; }
  :root[data-theme="nebula"] #admin .acp__nav {
    position: static; height: auto; width: auto; flex-direction: row; overflow-x: auto;
    border-right: 0; border-bottom: 1px solid rgba(var(--hl-rgb), .07); margin: 0 16px 14px; border-radius: 12px;
  }
  :root[data-theme="nebula"] #admin .acp__brand { display: none; }
  :root[data-theme="nebula"] #admin .acp__navbtn { white-space: nowrap; flex: none; width: auto; margin: 6px 2px; }
  :root[data-theme="nebula"] #admin .acp__navbtn:first-of-type { margin-top: 6px; }
  :root[data-theme="nebula"] #admin .acp__navfoot { display: none; }
  :root[data-theme="nebula"] #admin .acp__topbar { display: none; }
  :root[data-theme="nebula"] #admin .acp__main { padding: 0 16px; }
}

/* ============================================================
   📄 QUẢN LÝ TRANG — danh sách bài theo danh mục + editor
   (token hoá toàn bộ → chạy đúng cả Neon lẫn Nebula)
   ============================================================ */
.pg-toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.pg-cat { margin-bottom: 20px; }
.pg-cat__head { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.pg-cat__n { font-size: 11px; font-weight: 500; color: var(--faint); }
.pg-row {
  display: grid; grid-template-columns: minmax(150px, 1.1fr) auto 1fr auto; gap: 12px; align-items: center;
  width: 100%; text-align: left; padding: 10px 14px; margin-bottom: 6px; cursor: pointer;
  background: var(--surface); border: 1px solid rgba(var(--hl-rgb), .07); border-radius: 10px;
  color: var(--ink); font: inherit; transition: transform .15s var(--ease), border-color .15s var(--ease);
}
.pg-row:hover { transform: translateY(-1px); border-color: rgba(var(--hl-rgb), .18); }
.pg-row.is-off { opacity: .55; }
.pg-row__title { font-weight: 600; font-size: 13.5px; }
.pg-row__slug { font-family: var(--font-mono); font-size: 11px; color: var(--faint);
  background: rgba(var(--hl-rgb), .05); padding: 2px 7px; border-radius: 6px; }
.pg-row__meta { font-size: 11.5px; color: var(--muted); text-align: right; }
.pg-row__edit { font-size: 12px; color: var(--cyan); white-space: nowrap; }

/* ---- Editor (modal) ---- */
.pg-box { max-width: min(1060px, 94vw); width: min(1060px, 94vw); }
.pg-form__row { display: flex; gap: 10px; margin-bottom: 10px; }
.pg-field { min-width: 0; }
.pg-field--grow { flex: 1; }
.pg-field--sm { width: 92px; }
.pg-snips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 2px 0 10px; }
.pg-snips__lb { font-size: 12px; color: var(--muted); margin-right: 2px; }
.pg-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pg-pane { min-width: 0; display: flex; flex-direction: column; }
.pg-pane__lb { font-size: 11px; color: var(--faint); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .4px; }
.pg-editor { font-family: var(--font-mono); font-size: 12px; line-height: 1.55; min-height: 380px;
  flex: 1; resize: vertical; white-space: pre-wrap; }
.pg-preview { border: 1px solid rgba(var(--hl-rgb), .08); border-radius: 10px;
  background: var(--bg2); padding: 14px 16px; height: 380px; overflow: auto; }
.pg-preview .docs__content { max-width: none; }
.pg-actions { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.pg-visible { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--muted);
  margin-right: auto; cursor: pointer; }
.pg-del { color: var(--red); }

@media (max-width: 760px) {
  .pg-split { grid-template-columns: 1fr; }
  .pg-editor { min-height: 220px; }
  .pg-preview { height: 260px; }
  .pg-row { grid-template-columns: 1fr auto; }
  .pg-row__slug { display: none; }
  .pg-row__meta { grid-column: 1 / -1; text-align: left; }
}