/* STAGR admin design system (RULE 15). Hand-authored source until the Tailwind
   standalone CLI is reachable in the build env; semantic classes map cleanly to
   Tailwind @layer components later. Fintech-clean: minimal palette, no gradient,
   shadow only on floating elements, spreadsheet tables. */
:root {
  --primary: #4f46e5;
  --primary-hover: #4338ca;
  --bg: #f8fafc;
  --surface: #ffffff;
  --border: #e2e8f0;
  --text: #0f172a;
  --text-muted: #64748b;
  --sidebar-bg: #1e293b;
  --sidebar-text: #cbd5e1;
  --sidebar-active: #334155;
  --success: #16a34a;
  --warning: #d97706;
  --danger: #dc2626;
  --radius: 6px;
}

* { box-sizing: border-box; }
[x-cloak] { display: none !important; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
}
a { color: inherit; text-decoration: none; }

/* layout */
.app { display: flex; min-height: 100vh; }
.sidebar { width: 220px; flex-shrink: 0; background: var(--sidebar-bg); color: var(--sidebar-text); display: flex; flex-direction: column; }
/* Sidebar header + topbar share one height (56px) so their bottom borders form a
   single straight line; box-sizing keeps the 1px border inside that height. */
.sidebar { transition: width 150ms ease; }
.sidebar .brand { height: 56px; flex-shrink: 0; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 12px 0 16px; color: #fff; border-bottom: 1px solid var(--sidebar-active); overflow: hidden; }
.sidebar .brand .brand-wrap { display: inline-flex; align-items: center; min-width: 0; overflow: hidden; }
.sidebar .brand .brand-name { font-size: 19px; font-weight: 600; line-height: 1; white-space: nowrap; }
.sidebar .brand .brand-logo { max-width: 140px; max-height: 36px; object-fit: contain; display: block; }
/* nav owns the vertical scroll (sidebar stays overflow:visible so collapsed
   hover tooltips can escape to the right). Collapsed: overflow visible so the
   tooltip isn't clipped — icon-only menu rarely needs to scroll. */
.sidebar nav { flex: 1; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(148,163,184,.25) transparent; }
.sidebar nav::-webkit-scrollbar { width: 6px; }
.sidebar nav::-webkit-scrollbar-track { background: transparent; }
.sidebar nav::-webkit-scrollbar-thumb { background: rgba(148,163,184,.22); border-radius: 3px; }
.sidebar nav:hover::-webkit-scrollbar-thumb { background: rgba(148,163,184,.4); }
/* Collapsed: overflow visible so the hover tooltip can escape to the right
   (icon-only menu is short, rarely needs to scroll). */
.app.collapsed .sidebar nav { overflow: visible; }
.sidebar nav a, .nav-group-toggle { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 16px; color: var(--sidebar-text); }
.nav-group-toggle { list-style: none; cursor: pointer; }
.nav-group-toggle::-webkit-details-marker { display: none; }
.sidebar nav a:hover, .sidebar nav a.active, .nav-group-toggle:hover, .nav-group-toggle.active { background: var(--sidebar-active); color: #fff; }
.nav-group-items {
  --nav-tree-x: 25px;
  --nav-tree-color: rgba(203, 213, 225, .42);
  position: relative;
  padding: 2px 0 4px;
}
/* Dropdown children form a compact tree. The parent keeps its icon; child
   entries use a shared vertical stem and one horizontal branch instead. */
.nav-group-items::before {
  content: "";
  position: absolute;
  left: var(--nav-tree-x);
  top: 2px;
  /* Stop before the last elbow; its own border continues the stem. This keeps
     the final segment from being drawn twice and looking thicker. */
  bottom: 27px;
  width: 1px;
  background: var(--nav-tree-color);
  pointer-events: none;
}
.nav-group-items .nav-sub-link {
  min-height: 34px;
  width: calc(100% - 40px);
  margin-left: 40px;
  padding: 8px 16px 8px 10px;
  border-radius: var(--radius) 0 0 var(--radius);
  font-size: 13px;
}
.nav-group-items .nav-sub-link::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 50%;
  width: 15px;
  height: 1px;
  background: var(--nav-tree-color);
  pointer-events: none;
}
.nav-group-items .nav-sub-link:last-child::before {
  content: "";
  top: calc(50% - 6px);
  height: 7px;
  background: transparent;
  border-left: 1px solid var(--nav-tree-color);
  border-bottom: 1px solid var(--nav-tree-color);
  border-bottom-left-radius: 4px;
}
.nav-chevron { flex: 0 0 auto; margin-left: auto; transition: transform 120ms ease; }
.nav-group[open] > .nav-group-toggle .nav-chevron { transform: rotate(180deg); }
/* Icons inherit currentColor → follow the link colour incl. active/hover. */
.sidebar .nav-icon { width: 18px; height: 18px; flex-shrink: 0; }

/* Collapse toggle — in the sidebar header, right side, always visible */
.sb-toggle { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; background: none; border: none; border-radius: var(--radius); color: var(--sidebar-text); cursor: pointer; }
.sb-toggle:hover { color: #fff; background: var(--sidebar-active); }

/* Collapsed: 64px rail, icons only; header shows just the toggle (brand hidden).
   Desktop-only: below 769px the sidebar is an off-canvas drawer, where a 64px
   icon rail and its hover flyouts make no sense (and there is no hover). */
@media (min-width: 769px) {
.app.collapsed .sidebar { width: 64px; }
.app.collapsed .sidebar .brand { padding: 0; justify-content: center; }
.app.collapsed .sidebar .brand .brand-wrap { display: none; }
.app.collapsed .sidebar nav a, .app.collapsed .nav-group-toggle { justify-content: center; gap: 0; }
/* Collapsed: the inline label becomes a floating tooltip that appears to the
   right on hover/focus (the accessible name stays in the DOM — no title attr). */
.app.collapsed .nav-text {
	position: absolute;
	left: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%);
	white-space: nowrap;
	background: #1e293b;
	color: #fff;
	padding: 5px 9px;
	border-radius: var(--radius);
	font-size: 12px;
	font-weight: 500;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	z-index: 60;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
	transition: opacity .12s ease;
}
.app.collapsed .sidebar nav a:hover .nav-text,
.app.collapsed .sidebar nav a:focus-visible .nav-text,
.app.collapsed .nav-group-toggle:hover .nav-text,
.app.collapsed .nav-group-toggle:focus-visible .nav-text { opacity: 1; visibility: visible; }
.app.collapsed .nav-group { position: relative; }
.app.collapsed .nav-group-items {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  z-index: 80;
  width: 200px;
  padding: 6px 0;
  border: 1px solid rgba(148, 163, 184, .22);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--sidebar-bg);
  box-shadow: 8px 10px 24px rgba(15, 23, 42, .28);
}
/* In rail mode a dropdown is a hover/focus flyout, attached directly to the
   sidebar so the pointer can move into it without crossing a dead gap. */
.app.collapsed .nav-group:hover > .nav-group-items,
.app.collapsed .nav-group:focus-within > .nav-group-items { display: block; }
.app.collapsed .sidebar .nav-group-items .nav-sub-link {
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  margin-left: 0;
  padding: 8px 14px;
  border-radius: 0;
}
.app.collapsed .nav-group-items::before,
.app.collapsed .nav-group-items .nav-sub-link::before { display: none; }
.app.collapsed .nav-group-items .nav-text {
  position: static;
  transform: none;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: 13px;
  font-weight: 400;
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  box-shadow: none;
  transition: none;
}
.app.collapsed .nav-group-items .nav-badge {
  position: static;
  min-width: 18px;
  height: 18px;
  margin-left: auto;
  padding: 0 5px;
  border-radius: 9px;
  font-size: 10.5px;
}
/* The flyout already communicates the group, so suppress the small parent
   tooltip that would otherwise overlap its first submenu entry. */
.app.collapsed .nav-group:hover > .nav-group-toggle .nav-text,
.app.collapsed .nav-group:focus-within > .nav-group-toggle .nav-text {
  opacity: 0;
  visibility: hidden;
}
.app.collapsed .nav-chevron { display: none; }
}
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { height: 56px; box-sizing: border-box; background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; padding: 0 20px; }
.content { flex: 1; padding: 20px; }
/* Sticky shell: fixed full-height sidebar (scrolls on its own), sticky topbar,
   page-scrolling content. Main offsets by the sidebar width and follows collapse. */
.sidebar { position: fixed; top: 0; left: 0; height: 100vh; z-index: 30; }
.main { margin-left: 220px; transition: margin-left 150ms ease; }
.app.collapsed .main { margin-left: 64px; }
.topbar { position: sticky; top: 0; z-index: 20; }

/* auth */
.auth-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; }
.auth-card { width: 100%; max-width: 360px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; }
.auth-card-wide { max-width: 460px; padding: 32px 36px; }
.auth-card h1 { margin: 0 0 12px; font-size: 18px; }
.auth-head { margin-bottom: 20px; }
.auth-head h1 { margin: 0 0 6px; }
.auth-sub { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.auth-form .fg { margin-bottom: 16px; }
.auth-form label { margin-bottom: 6px; }
.auth-form .field { margin-bottom: 6px; }
.auth-qr { display: flex; justify-content: center; margin: 6px 0 12px; }
.auth-qr img { border: 1px solid var(--border); border-radius: var(--radius); background: #fff; padding: 8px; }
.auth-secret { text-align: center; margin-bottom: 14px; }
.auth-secret code { display: inline-block; padding: 6px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; letter-spacing: 1px; word-break: break-all; }
/* reusable custom select */
.select { position: relative; display: inline-block; }
/* Trigger matches .field/.input exactly: same border, font-size, normal weight,
   and the same primary border + focus ring on focus/open (consistency, item 3). */
.select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 160px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); font-size: 14px; font-weight: 400; cursor: pointer; }
.select-trigger:focus, .select-trigger.is-open { outline: none; border-color: var(--primary); }
.select-chevron { color: var(--text-muted); flex-shrink: 0; }
/* A long option (plan spec, OS name) must not wrap: a two-line trigger makes
   one grid row taller than its neighbour and the form stops looking aligned. */
.select-trigger > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-menu { position: absolute; left: 0; top: calc(100% + 4px); z-index: 20; min-width: 100%; width: max-content; max-width: 320px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px; max-height: 240px; overflow-y: auto; }
.select-option { padding: 8px 10px; border-radius: var(--radius); cursor: pointer; font-size: 14px; white-space: nowrap; }
.select-option:hover { background: var(--bg); }
.select-search { width: 100%; box-sizing: border-box; padding: 7px 9px; margin-bottom: 4px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 14px; }
.select-search:focus { outline: none; border-color: var(--primary); }
.select-scroll { max-height: 200px; overflow-y: auto; }
.select-searchable .select-menu { max-height: none; overflow: visible; max-width: 360px; }
.select-searchable .select-option { white-space: normal; }
/* Searchable selects carry long names (company brands, VPS plans) that the 160px
   base trigger truncates to an ellipsis before the search box is even useful.
   Doubled-up .select.select-searchable on purpose: the per-page overrides below
   (.toolbar-right, .topup-picker, .pg-picker) are also two classes deep, so at
   equal specificity they win on source order alone. */
.select.select-searchable .select-trigger { min-width: 260px; }
/* …but not inside a modal, where the trigger is deliberately full-width and
   shrinkable (see `.modal .select-trigger`). Raising the specificity above put
   this rule ahead of that one; a narrow modal would otherwise overflow. */
.modal .select.select-searchable .select-trigger { min-width: 0; }

/* form */
label { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }
.field { display: block; width: 100%; padding: 8px 10px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 14px; font-weight: 400; }
.field:focus { outline: none; border-color: var(--primary); }

/* buttons */
.btn { display: inline-block; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); cursor: pointer; font-size: 14px; white-space: nowrap; }
.btn:hover { background: var(--bg); }
.btn-sm { padding: 4px 10px; font-size: 13px; line-height: 1.4; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-block { width: 100%; text-align: center; }
.btn-outline-danger { border-color: var(--danger); color: var(--danger); }
.btn-outline-danger:hover { background: #fee2e2; }
.btn-outline-success { border-color: var(--success); color: var(--success); }
.btn-outline-success:hover { background: #dcfce7; }
.muted-italic { color: var(--text-muted); font-style: italic; }
.shield { margin-left: 5px; font-size: 12px; cursor: help; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.risk-action-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.icon-unlimited { color: var(--text-muted); vertical-align: middle; display: inline-block; }
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat-card.stat-warning { border-left: 3px solid var(--warning); }
.stat-card.stat-danger { border-left: 3px solid var(--danger); }
.stat-card.stat-danger .stat-value { color: var(--danger); }
.stat-card.stat-muted { border-left: 3px solid var(--border); }
.row-link:hover { background: var(--bg); }
.export-mini { float: right; }
.kpi-delta { margin-left: 6px; font-size: 11px; font-weight: 600; }
.kpi-up { color: var(--success); }
.kpi-down { color: var(--danger); }
.stat-card-link { text-decoration: none; color: inherit; }
.stat-card-link:hover { border-color: var(--primary); }
.kpi-currency { font-size: 12px; font-weight: 600; margin: 4px 0 6px; }
/* Report analysis rows: exactly two equal-width cards per row, equal height
   (grid stretch), content top-aligned. Analysis is read section by section —
   never five cards squeezed into one line. */
.report-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 16px; align-items: stretch; }
.report-cols > .card { margin-bottom: 0; display: flex; flex-direction: column; }
@media (max-width: 900px) { .report-cols { grid-template-columns: 1fr; } }
.data-table.mini td { padding: 6px 8px; font-size: 13px; }
.data-table.mini { margin: 0; }
.card-metric { font-size: 11px; font-weight: 400; color: var(--text-muted); text-transform: none; }
.data-table.mini .col-num { width: 28px; }


/* badge */
.badge { display: inline-block; vertical-align: middle; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; }
.badge-success { background: #dcfce7; color: var(--success); }
.badge-warning { background: #fef3c7; color: var(--warning); }
.badge-danger { background: #fee2e2; color: var(--danger); }
.badge-muted, .badge-neutral { background: #f1f5f9; color: var(--text-muted); }
.badge-info { background: #dbeafe; color: #2563eb; }
.badge-new { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 1px 5px; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: #fff; background: #dc2626; border-radius: 9999px; }
.detail-head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.detail-head .page-title { display: flex; align-items: center; gap: 8px; margin: 0; }
.back-arrow { display: inline-flex; align-items: center; color: var(--text-muted); text-decoration: none; }
.back-arrow:hover { color: var(--text); }
.copy-btn { display: inline-flex; align-items: center; border: none; background: none; cursor: pointer; color: var(--text-muted); padding: 0 4px; line-height: 1; }
.copy-btn:hover { color: var(--primary); }
.copy-wrap { display: inline-flex; align-items: center; gap: 2px; }
/* Player username: obvious clickable link → detail, with copy icon attached. */
.uname-cell { display: inline-flex; align-items: center; }
.player-link { color: var(--primary); font-weight: 500; }
.player-link:hover { text-decoration: underline; }
.name-link { color: var(--primary); font-weight: 500; }
.name-link:hover { text-decoration: underline; }
.tab-toolbar { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.ck-label { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0; }
.bonus-active { border-left: 3px solid var(--primary); margin-top: 16px; }
.bonus-row { margin: 8px 0; }
.bonus-bar { height: 8px; background: var(--bg); border-radius: 9999px; overflow: hidden; margin-top: 4px; }
.bonus-bar-fill { height: 100%; background: var(--primary); }
.bonus-meta { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--text-muted); margin-top: 8px; }

/* spreadsheet table */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--surface); }
.data-table th { text-align: left; font-weight: 600; font-size: 12px; color: #64748b; background: #f1f5f9; border: none; border-bottom: 1px solid #f1f5f9; padding: 10px 12px; }
.data-table td { border: none; border-bottom: 1px solid #f1f5f9; padding: 10px 12px; }
.data-table.roomy td, .data-table.roomy th { padding-top: 16px; padding-bottom: 16px; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .col-rank { width: 36px; }
.data-table .col-sev { width: 92px; }
.data-table .col-time { width: 96px; white-space: nowrap; }
.data-table tbody tr:hover td { background: var(--bg); }
.data-table .col-action { width: 44px; text-align: right; }
.data-table .col-num { width: 40px; color: var(--text-muted); }
.data-table .amount-neg { color: var(--danger); }
.data-table td.ta-right { text-align: right; }
.data-table .amount-pos { color: var(--success); }
/* Tenant list: fixed layout so 11 columns stay even and nothing overflows off the
   right edge (action menu included). Long cells ellipsis with a hover title; the
   action cell keeps overflow visible so its dropdown isn't clipped. */
.tenant-table { table-layout: fixed; }
.tenant-table th, .tenant-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tenant-table .col-action { overflow: visible; }
.tenant-table th:nth-child(1), .tenant-table td:nth-child(1) { width: 40px; }
.tenant-table th:nth-child(2), .tenant-table td:nth-child(2) { width: 16%; }
.tenant-table th:nth-child(3), .tenant-table td:nth-child(3) { width: 17%; }
.tenant-table th:nth-child(4), .tenant-table td:nth-child(4) { width: 7%; }
.tenant-table th:nth-child(5), .tenant-table td:nth-child(5) { width: 10%; }
.tenant-table th:nth-child(6), .tenant-table td:nth-child(6) { width: 8%; }
.tenant-table th:nth-child(7), .tenant-table td:nth-child(7) { width: 13%; }
.tenant-table th:nth-child(8), .tenant-table td:nth-child(8) { width: 12%; }
.tenant-table th:nth-child(9), .tenant-table td:nth-child(9) { width: 11%; }
.tenant-table th:nth-child(10), .tenant-table td:nth-child(10) { width: 8%; }
/* Expiry hint states */
.exp-warn { color: var(--warning); }
.exp-danger { color: var(--danger); }
.exp-trial { color: var(--primary); }
/* Row action kebab menu */
.row-menu { position: relative; display: inline-block; }
.row-menu-btn { width: 28px; height: 28px; padding: 0; background: none; border: none; border-radius: var(--radius); color: var(--text-muted); font-size: 18px; line-height: 1; cursor: pointer; }
.row-menu-btn:hover { background: var(--bg); color: var(--text); }
.row-menu-pop { position: absolute; right: 0; top: calc(100% + 2px); z-index: 20; min-width: 168px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px; }
.row-menu-pop a, .row-menu-pop button { display: block; width: 100%; text-align: left; padding: 8px 10px; font-size: 13px; color: var(--text); background: none; border: none; border-radius: var(--radius); cursor: pointer; text-decoration: none; }
.row-menu-pop a:hover, .row-menu-pop button:hover { background: var(--bg); }
/* Read-only key/value table (tenant detail) */
.kv-table td:first-child { width: 200px; color: var(--text-muted); }
/* Tenant detail page */
.detail-head { display: flex; justify-content: space-between; align-items: center; margin: -4px 0 16px; gap: 12px; }
.detail-title { display: flex; align-items: center; gap: 10px; }
.detail-title .page-title { margin: 0; }
.detail-actions { display: flex; gap: 8px; }
.tenant-stats { grid-template-columns: repeat(6, 1fr); margin: 16px 0; }
.detail-tabs { margin-top: 16px; }
/* Overlay centers the dialog in the viewport (all modals). Padding keeps tall
   dialogs off the edges; the card scrolls internally if it exceeds the height. */
.modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 1000; overflow-y: auto; }
/* overflow visible so in-modal dropdowns aren't clipped; the overlay scrolls
   instead (margin:auto keeps tall modals reachable from the top). */
.modal { background: var(--surface); border-radius: 8px; padding: 20px; width: 480px; max-width: 92vw; margin: auto; overflow: visible; }
/* Wider create dialog → 2-column field grid (item 2). */
.modal:has(.modal-create) { width: 640px; }
/* Wide variant for forms whose 2-column grid holds long option labels
   (plan specs, OS names) — reusable, not tied to one page. */
.modal:has(.modal-wide) { width: 820px; }
/* Inside a dialog the section rule is noise: the heading alone separates the
   groups, and the extra line competes with the field borders. */
.modal .form-section { border-bottom: none; }

/* A select whose options are still being fetched shows a spinner where its
   chevron sits and refuses clicks — opening it mid-swap used to close itself
   the moment the new options landed. */
.fg-cell.htmx-request .select-trigger { pointer-events: none; color: var(--text-muted); }
.fg-cell.htmx-request .select-chevron { display: none; }
.fg-cell.htmx-request .select-trigger::after {
  content: ''; width: 14px; height: 14px; flex-shrink: 0; border: 2px solid var(--border);
  border-top-color: var(--primary); border-radius: 50%; animation: spin-plain .6s linear infinite;
}
@keyframes spin-plain { to { transform: rotate(360deg); } }
.modal:has(.rate-modal) { width: 560px; }
.modal:has(.promo-modal) { width: 800px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.modal-title { font-size: 14px; font-weight: 600; margin: 0; }
.modal-x { background: none; border: none; font-size: 22px; line-height: 1; color: var(--text-muted); cursor: pointer; padding: 0 4px; }
.modal-x:hover { color: var(--text); }
.modal-text { font-size: 13px; color: var(--text); margin: 0 0 8px; }
/* Balance-adjustment preview: current balance, delta, resulting balance. */
.adj-preview { margin: 12px 0 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); font-size: 13px; }
.adj-row { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 0; }
.adj-row span { color: var(--text-muted); }
.adj-after { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 15px; }
.adj-after b { font-weight: 700; }
.adj-delta { font-weight: 600; }
.adj-pos { color: var(--success); }
.adj-neg { color: var(--danger); }
/* Reset-password result: username + password as labelled fields, each with an
   inline copy button, plus Copy All. */
/* Crypto checkout modal — looks like a real "pay with crypto" screen */
.cpay { text-align: center; }
.cpay-sub { font-size: 13px; color: var(--text-muted); margin: -4px 0 14px; }
.cpay-amount { display: inline-flex; align-items: baseline; gap: 8px; justify-content: center; margin-bottom: 16px; }
.cpay-amt-val { font-size: 30px; font-weight: 800; color: var(--text); letter-spacing: -.5px; }
.cpay-amt-coin { font-size: 14px; font-weight: 700; color: var(--text-muted); }
.cpay-qr { display: flex; justify-content: center; margin: 4px 0 12px; }
.cpay-qr img { border: 1px solid var(--border); border-radius: 12px; padding: 8px; background: #fff; width: 200px; height: 200px; }
.cpay-warn { font-size: 12.5px; color: var(--warning); background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 8px 10px; margin: 0 0 10px; }
.cpay-addr { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); overflow: hidden; margin-bottom: 12px; }
.cpay-addr-val { flex: 1; padding: 10px 12px; font-size: 12.5px; color: var(--text); word-break: break-all; text-align: left; }
.cpay-timer { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); margin-bottom: 14px; }
.cpay-timer-label { font-size: 12px; color: var(--text-muted); }
.cpay-timer-val { font-size: 15px; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }
.cpay-info { text-align: left; background: var(--bg); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; }
.cpay-info p { margin: 0; font-size: 12px; color: var(--text-muted); }
.cpay-info p + p { margin-top: 5px; }
.cpay-foot { font-size: 12px; margin-bottom: 6px; }

.cred-list { display: flex; flex-direction: column; gap: 12px; margin: 14px 0 4px; }
.cred-field { display: flex; flex-direction: column; gap: 5px; }
.cred-label { font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text-muted); }
.cred-input { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); overflow: hidden; }
.cred-val { flex: 1; padding: 10px 12px; font-size: 15px; font-weight: 600; color: var(--text); word-break: break-all; }
.cred-val.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.02em; }
.cred-copy { display: flex; align-items: center; justify-content: center; padding: 0 13px; border: none; border-left: 1px solid var(--border); background: none; color: var(--text-muted); cursor: pointer; }
.cred-copy:hover { color: var(--primary); background: var(--surface); }
.field-err { font-size: 12px; color: var(--danger); margin: 4px 0 0; }
/* Provider catalog */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.data-table .col-icon { width: 44px; }
.prov-icon { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; display: block; }
.prov-icon-empty { background: var(--bg); border: 1px solid var(--border); }
.tag-cell { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.danger-text { color: var(--danger); }
/* Reusable custom checkbox */
.ck-row { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.ck { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 400; cursor: pointer; }
.ck input { appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 0; flex-shrink: 0; border: 1px solid var(--border); border-radius: 3px; background: #fff; cursor: pointer; position: relative; }
.ck input:checked { background: var(--primary); border-color: var(--primary); }
.ck input:checked::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ck-label { color: var(--text); }
.ck .ck-label { display: inline; margin: 0; gap: 0; }

/* Bulk-action bar: appears when rows are checked. Compact toolbar of independent
   action forms, each acting on the checked rows of its page (.prov-select on the
   provider catalog, .wd-select on the head withdrawal queue). */
.col-check { width: 32px; text-align: center; }
.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); }
.bulk-count { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.bulk-act { display: flex; align-items: center; gap: 6px; }
.bulk-act .ck-row { margin: 0; gap: 10px; }
.bulk-act .select { min-width: 150px; }
.bulk-act .input { min-width: 220px; }
.bulk-sep { width: 1px; align-self: stretch; background: var(--border); }
.agg-allow-list { display: flex; flex-direction: column; gap: 12px; margin: 12px 0 4px; }
/* Wide report tables scroll inside their own container (RULE 15). Every cell
   nowraps so columns size to their longest value (billions stay on one line). */
.table-scroll { overflow-x: auto; }
.table-scroll .data-table { min-width: 1400px; }
.table-scroll .data-table th, .table-scroll .data-table td { white-space: nowrap; }
/* Inside a horizontal scroll box the container itself is the scroll ancestor,
   so the sticky header must pin to top:0 of the box — the 56px topbar offset
   would shove it down over the first rows. */
.table-scroll .data-table--sticky thead th { top: 0; }
.row-total td { font-weight: 600; background: var(--bg); border-bottom: 2px solid var(--border); }
.section-title-rpt { margin-top: 26px; font-size: 15px; }
/* Clickable Daily Summary rows → detail modal. */
.row-click { cursor: pointer; }
.row-click:hover td { background: var(--bg); }
/* Daily detail modal: boxed groups flowed into two balanced columns so the
   dialog stays wide-and-short instead of one tall list. */
.modal:has(.rpt-detail) { width: 780px; }
.rpt-detail { column-count: 2; column-gap: 16px; }
.rpt-detail-sec { break-inside: avoid; margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.rpt-detail-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 0 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.rpt-detail .pg-info > div { padding: 7px 0; font-size: 13px; }
.rpt-detail-strong dt, .rpt-detail-strong dd { font-size: 14px; font-weight: 700; }
.rpt-detail-sub { color: var(--text-muted); font-weight: 400; font-size: 12px; margin-left: 8px; }
@media (max-width: 720px) { .rpt-detail { column-count: 1; } }
/* Switch is a <label>; `.modal label` (0,1,1: display:block, margin:16px) would
   break its flex layout — two classes (0,2,0) win, same trick as .check-inline. */
.agg-allow-list .switch { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 13px; font-weight: 400; }
.agg-allow-list .switch-label { font-size: 13px; }
.field.invalid, .invalid .select-trigger { border-color: var(--danger); }
.temp-pw { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.5px; }
/* Consistent modal form: every control full-width, even 16px gaps, 12px medium
   labels, footer right-aligned (no separator). Applies to all modals. */
.modal label { display: block; font-size: 12px; font-weight: 500; color: var(--text); margin: 16px 0 6px; }
.modal label:first-of-type { margin-top: 0; }
.modal .field { width: 100%; margin-bottom: 0; }
.field-static { background: var(--bg); color: var(--text-muted); min-height: 37px; display: flex; align-items: center; }
/* Request transaction uses explicit field groups instead of label-dependent
   margins. Every visible block therefore keeps the same 16px vertical rhythm,
   including HTMX-swapped bonus content and Alpine bank/QRIS sections. */
.request-tx-form, .request-tx-section, .request-tx-method-fields { display: flex; flex-direction: column; gap: 16px; }
.request-tx-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.modal .request-tx-field > label { margin: 0; }
.request-tx-form .ct-modes, .request-tx-form .adj-preview, .request-tx-form .modal-actions { margin: 0; }
.request-tx-form .field-hint, .request-tx-form .field-err, .request-tx-form .bank-lim-note { margin: 0; }
.qris-result { text-align: center; }
.qris-img { display: block; margin: 0 auto 12px; background: #fff; padding: 14px; border: 1px solid var(--border); border-radius: 8px; image-rendering: pixelated; }
.qris-countdown { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-bottom: 12px; }
.qris-cd-label { font-size: 12px; color: var(--text-muted); }
.qris-cd-time { font-size: 22px; font-weight: 700; }
.qris-meta { text-align: left; margin-bottom: 12px; }
.qris-payload { font-size: 11px; word-break: break-all; text-align: left; }
.qris-success { text-align: center; padding: 12px 0; }
.qris-check { width: 72px; height: 72px; color: var(--success); margin: 0 auto 12px; display: block; }
.qris-check.qris-x { color: var(--danger); }
.qris-success-title { font-size: 17px; font-weight: 700; margin-bottom: 4px; }
.qris-success-amt { font-size: 15px; color: var(--text-muted); margin-bottom: 8px; }
.modal .select { display: block; width: 100%; margin: 0; }
.modal .select-trigger { width: 100%; min-width: 0; box-sizing: border-box; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-grid-2 .fg-cell { min-width: 0; }
.form-grid-2 .fg-full { grid-column: 1 / -1; }
.form-grid-2 .fg-cell label { margin-top: 0; }
.modal-sep { font-size: 12px; font-weight: 600; color: var(--text); margin: 18px 0 2px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
/* Two-column modal form (Area 3): logically-paired fields share a row so a
   ~10-field market form is ~6 rows tall instead of a long vertical scroll.
   Each field is a self-contained .fg cell → the two cells in a grid row start
   at the same baseline, keeping labels aligned. */
.modal:has(.form-grid) { width: 620px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.form-grid .fg { display: flex; flex-direction: column; min-width: 0; }
.form-grid .fg-full { grid-column: 1 / -1; }
.form-grid label { margin: 0 0 5px; }
.form-grid .field, .form-grid .select, .form-grid .select-trigger { margin: 0; width: 100%; }
.form-grid .ck-row { margin-top: 2px; }
/* Modal that overflows: body scrolls, header + actions stay put. */
.modal-scroll { max-height: 68vh; overflow-y: auto; padding-right: 4px; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn-danger:hover { background: var(--danger); color: #fff; filter: brightness(0.9); }
.btn-success { background: var(--success); border-color: var(--success); color: #fff; }
.btn-success:hover { background: var(--success); color: #fff; filter: brightness(0.9); }
.tab-bar { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.tab-btn { padding: 8px 14px; font-size: 13px; color: var(--text-muted); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }
.tab-content { min-height: 80px; }
/* Stacked blocks in a tab (basic info: identity / stats / bonus / banks) get
   vertical breathing room; single-table tabs have one child so are unaffected. */
.tab-content > * + * { margin-top: 16px; }

/* alert */
.alert { padding: 10px 12px; margin-bottom: 12px; border-radius: var(--radius); font-size: 13px; }
.alert-danger { background: #fee2e2; color: var(--danger); }
.alert-success { background: #dcfce7; color: var(--success); }
.alert-warning { background: #fef3c7; color: var(--warning); }

/* floating: the only elements allowed a shadow (toast, modal) */
.floating { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }

.text-muted { color: var(--text-muted); }
.page-title { font-size: 16px; font-weight: 600; margin: 0 0 16px; }
/* Heading row: symmetric, compact spacing (matches the dashboard heading). The
   title's own bottom margin is dropped so top and bottom space are even. */
.toolbar { display: flex; justify-content: space-between; align-items: center; margin: -4px 0 12px; min-height: 34px; }
.toolbar .page-title { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.form-narrow { max-width: 480px; }
.inline-form { display: inline; }
.toolbar-title { display: flex; align-items: center; gap: 10px; }
/* Togel result rendered as separate boxed digits (lottery style). */
.digit-row { display: inline-flex; gap: 3px; }
.digit-box { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 24px; border: 1px solid var(--border); border-radius: 4px; font-family: ui-monospace, monospace; font-weight: 600; font-size: 13px; background: var(--surface); }
.digit-inputs { display: flex; gap: 8px; margin: 4px 0 14px; justify-content: center; }
.digit-input { width: 44px; height: 52px; text-align: center; font-size: 22px; font-weight: 600; border: 1px solid var(--border); border-radius: var(--radius); }
.breakdown { margin: 0 0 12px; padding: 8px 10px; background: #f8fafc; border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; line-height: 1.7; }
.warn-box { margin: 0 0 12px; padding: 8px 10px; background: #fef3c7; border: 1px solid #fcd34d; border-radius: var(--radius); font-size: 13px; color: #92400e; }
.btn-sm { padding: 3px 9px; font-size: 12px; }
/* Market detail: three equal-height cards side by side, stacking when narrow.
   Grid stretches items to the tallest card (default grid align), so short
   cards keep their content top-aligned with whitespace at the bottom — not a
   ragged bottom edge. Each card is a flex column so its add-form/table flows
   from the top. */
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-bottom: 16px; align-items: stretch; }
.detail-grid > .card { margin-bottom: 0; display: flex; flex-direction: column; }
.card-title { font-size: 14px; font-weight: 600; margin: 0 0 12px; }
/* Fixed label column so every value starts on the same vertical line; roomier
   row gap so pairs are scannable at a glance. */
.kv { display: grid; grid-template-columns: 120px 1fr; gap: 10px 14px; font-size: 13px; margin: 0; align-items: baseline; }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; word-break: break-word; }
/* Add-slot form: each control labeled so a first-time operator knows which
   box is Open vs Close vs Result. Hidden behind a toggle so single-draw
   markets don't see a confusing empty form under their one existing slot. */
.slot-fields { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.slot-fields .fg { display: flex; flex-direction: column; }
.slot-fields label { font-size: 11px; margin: 0 0 3px; color: var(--text-muted); }
.slot-fields .input { width: 96px; }
.slot-fields .input.w-slot { width: 56px; }
.slot-actions { display: flex; gap: 8px; margin-top: 10px; }
.holiday-form { display: flex; gap: 8px; margin-top: auto; padding-top: 10px; flex-wrap: wrap; align-items: stretch; }
.ck-inline { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text); }

/* --- Interactive-element height parity (Area 1) ---------------------------
   .btn (36px) was taller than .input (30px), so any button beside an input in
   a row sat proud of it. One control height everywhere they share a line:
   inputs, the custom-select trigger, and buttons all resolve to 34px via
   box-sizing + matched vertical padding. Table rows and inline/slot forms
   are the shared-line contexts; the filter-bar already did this locally. */
.slot-form .input, .slot-form .select-trigger, .slot-form .btn,
.data-table td .input, .data-table td .btn, .data-table td .select-trigger,
.inline-form .btn {
	height: 34px;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	padding-top: 0;
	padding-bottom: 0;
}
.btn-sm, .data-table td .btn-sm, .slot-form .btn-sm { height: 28px; }
/* Adjacent action controls in a table cell must never touch: gap every
   button/inline-form that follows another in the same cell (Edit + Toggle,
   Settle + View, …). One rule for every admin table. */
.data-table td > .btn + .btn,
.data-table td > .btn + .inline-form,
.data-table td > .inline-form + .btn,
.data-table td > .inline-form + .inline-form,
.data-table td > form + .btn,
.data-table td > .btn + form,
.data-table td > form + form { margin-left: 8px; }

/* --- Web-settings › Domains ------------------------------------------------ */
/* Published CNAME target row: code + copy + badge on one aligned line. */
.dns-target { margin-bottom: 18px; }
.dns-target .field-label { display: block; margin-bottom: 6px; }
.dns-target-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dns-host { padding: 6px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); font-family: ui-monospace, monospace; font-size: 13px; word-break: break-all; }
/* Domain-row actions (Make primary / Deactivate): side by side, same height,
   right-aligned in the action cell. Each action is its own <form class="inline">
   which without this would stack as block elements. */
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.row-actions form, .row-actions .inline { display: inline-flex; margin: 0; }
/* Add-custom-domain form: separated from the table above, label not touching it,
   input + a roomy button on one aligned row, consistent vertical rhythm. */
.dns-add { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.dns-add .field-label { display: block; margin-bottom: 6px; }
.dns-add-row { display: flex; align-items: stretch; gap: 8px; }
.dns-add-row .field { flex: 1 1 auto; margin-bottom: 0; }
.dns-add-row .btn { flex: 0 0 auto; min-width: 150px; justify-content: center; }
.dns-add .field-hint { margin-top: 8px; }

/* Numeric config inputs sized to their DATA, not uniformly: a 0-100 discount
   needs less room than a 6-figure payout. Right-aligned so digits line up. */
.cfg-in { text-align: right; font-variant-numeric: tabular-nums; }
.cfg-in.w-pct { width: 64px; }   /* 0-100 (+ decimals) */
.cfg-in.w-payout { width: 92px; } /* up to 100000.00 */
.cfg-in.w-money { width: 96px; }

/* Sticky header for long config tables (bet types = 21 rows). Sits just under
   the 56px sticky topbar so the column labels never scroll away. */
.data-table--sticky thead th { position: sticky; top: 56px; z-index: 5; }
/* Group separator: a slightly heavier top border marks a new bet-type family. */
.data-table tr.group-start td, .data-table tr.group-start th { border-top: 2px solid var(--border); }
/* Read-only cells (Code/Name) vs editable inputs: muted, no input chrome. */
.data-table td.ro { color: var(--text-muted); }
/* Center the boolean toggle in its column. */
.data-table td.col-toggle { text-align: center; }
.data-table td.col-toggle input { margin: 0; }

/* Dirty-row Save: outlined until the row is edited, then it fills in — 21
   solid buttons were pure visual noise; now only changed rows stand out. */
.btn-save-dirty:not(.is-dirty) { background: var(--surface); color: var(--primary); border-color: var(--primary); }

/* Empty-state row: centered muted message instead of a header over nothing. */
.empty-state { text-align: center; color: var(--text-muted); padding: 28px 12px; }

/* Digit-input shake on invalid keystroke (non-digit rejected). */
@keyframes digit-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }
.digit-input.shake { animation: digit-shake 160ms ease; border-color: var(--danger); }

/* --- Toast (Area 5) ------------------------------------------------------- */
.toast-root { position: fixed; top: 16px; right: 16px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
.toast { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: var(--radius); font-size: 13px; box-shadow: 0 6px 20px rgba(15,23,42,.18); background: var(--surface); border-left: 3px solid var(--text-muted); animation: toast-in 140ms ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.toast-success { border-left-color: var(--success); }
.toast-error { border-left-color: var(--danger); }
.toast-warning { border-left-color: var(--warning); }
.toast-info { border-left-color: var(--primary); }
.toast-deposit, .toast-withdrawal { border-left-width: 4px; }
.toast-deposit { border-left-color: var(--success); }
.toast-withdrawal { border-left-color: var(--warning); }
.toast-deposit .toast-body, .toast-withdrawal .toast-body { font-weight: 600; }
.toast-deposit .toast-icon, .toast-withdrawal .toast-icon { display: inline-flex; }
.toast-deposit .toast-icon svg { width: 18px; height: 18px; color: var(--success); }
.toast-withdrawal .toast-icon svg { width: 18px; height: 18px; color: var(--warning); }
.toast-icon { flex-shrink: 0; font-weight: 700; }
.toast-success .toast-icon { color: var(--success); }
.toast-error .toast-icon { color: var(--danger); }
.toast-warning .toast-icon { color: var(--warning); }
.toast-body { flex: 1; }
.toast-close { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 0; }
/* Health card: red accent when the metric is non-zero (stuck settlement etc). */
.stat-card-alert { border-color: #fca5a5; background: #fef2f2; }
.stat-card-alert .stat-value { color: #b91c1c; }
.toolbar-actions { display: flex; gap: 8px; }
.toolbar-right { display: flex; align-items: center; gap: 10px; }
.toolbar-right .select-trigger { min-width: 150px; }
.badge-btn { border: none; cursor: pointer; margin-left: 6px; }
.link { color: var(--primary); }
.link:hover { text-decoration: underline; }

/* login extras */
.pw-wrap { position: relative; margin-bottom: 12px; }
.pw-wrap .field { margin-bottom: 0; padding-right: 40px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; padding: 4px; background: none; border: none; cursor: pointer; color: var(--text-muted); }
.pw-toggle:hover { color: var(--text); }
.pw-toggle svg { display: block; }
.otp-row { display: flex; gap: 8px; margin: 8px 0 12px; }
.otp-box { width: 44px; height: 48px; text-align: center; font-size: 20px; border: 1px solid var(--border); border-radius: var(--radius); }
.otp-box:focus { outline: none; border-color: var(--primary); }

/* player pages: filter bar, tabs, detail cards, notes (RULE 15) */
.filter-bar { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; }
.pm-benefits { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 4px; }
.pm-benefit-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.pm-benefit-row .field { flex: 1; }
.pm-benefit-row .btn { flex: 0 0 auto; }
.bet-turnover { margin-left: auto; align-self: flex-end; font-size: 13px; color: var(--text-muted); white-space: nowrap; padding-bottom: 8px; }
.bet-turnover b { color: var(--text); }
.filter-bar .filter-action { margin-left: auto; }
/* Labelled variant: each control stacks under a small label; the row wraps and
   aligns on the control baseline so the unlabelled action buttons line up. */
.filter-bar-labeled { flex-wrap: wrap; align-items: flex-end; gap: 10px 8px; }
.filter-bar-labeled .filter-field { display: flex; flex-direction: column; gap: 4px; }
.filter-bar-labeled .filter-label { font-size: 11px; font-weight: 500; color: var(--text-muted); }
.filter-bar-labeled .filter-actions { display: flex; gap: 8px; align-items: center; }
/* All toolbar controls share one height so they line up flush (search, custom
   select trigger, button). 34px, border-box so padding doesn't change it. */
.filter-bar .input, .filter-bar .select-trigger, .filter-bar .drp-trigger, .filter-bar .btn { height: 34px; box-sizing: border-box; }
.filter-bar .btn { display: inline-flex; align-items: center; padding-top: 0; padding-bottom: 0; }
.filter-bar .select-trigger, .filter-bar .drp-trigger { padding-top: 0; padding-bottom: 0; }
.filter-bar .input, .filter-bar .select { height: 34px; }
/* Date picker in a filter bar: fill the field width and push the caret to the
   right edge (like the select trigger), text stays vertically centered. */
.filter-bar .drp { display: flex; }
.filter-bar .drp-trigger { flex: 1; min-width: 168px; }
.filter-bar .drp-caret { margin-left: auto; line-height: 1; }
.input { padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; font-weight: 400; color: var(--text); background: var(--surface); }
.input:focus { outline: none; border-color: var(--primary); }
.muted { color: var(--text-muted); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.tab { padding: 8px 14px; background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; font-size: 13px; color: var(--text-muted); }
.tab:hover { color: var(--text); }
.tab-active { color: var(--text); border-bottom-color: var(--primary); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.field-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border); }
.field-row:last-child { border-bottom: none; }
.field-label { color: var(--text-muted); font-size: 13px; }
.field-value { font-size: 13px; }
.adjust-form, .note-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.adjust-form h3, .note-form h3 { font-size: 13px; font-weight: 600; margin: 0 8px 0 0; }
.check { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text-muted); }
/* Server Management: table cells + inline checkboxes (RULE 15 consistent). */
.cell-strong { font-weight: 600; color: var(--text); }
.cell-strong + .muted { margin-left: 6px; font-size: 12px; }
.cell-sub { display: block; font-size: 11px; margin-top: 2px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.check-row-group { display: flex; gap: 24px; margin-top: 14px; align-items: flex-start; }
/* Specificity must beat `.modal label` (display:block, margin:16px) which wins over
   a single `.check-inline`. Two classes → (0,2,0) beats (0,1,1). */
.check-row-group .check-inline { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13px; font-weight: 400; color: var(--text); cursor: pointer; flex: 1; line-height: 1.4; }
.check-row-group .check-inline input[type="checkbox"] { margin: 1px 0 0; flex-shrink: 0; width: auto; }
/* Server detail modal: status strip + brands count. */
.detail-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.detail-sep { font-size: 13px; color: var(--text); }
.detail-sep::before { content: "·"; margin-right: 8px; color: var(--text-muted); }
.detail-cap { margin-left: auto; font-size: 13px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.count-pill { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; background: var(--surface-2, rgba(127,127,127,.12)); color: var(--text-muted); vertical-align: middle; margin-left: 4px; }
.empty-hint { margin: 10px 0 0; font-size: 13px; }
/* Hosting tab: stack chips + subtle button. */
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: rgba(127,127,127,.12); color: var(--text); }
.chip-group { display: inline-flex; gap: 6px; }
.chip { padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: 12px; color: var(--text-muted); cursor: pointer; transition: all .12s; }
.chip:hover { color: var(--text); }
.chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.hosting-stack { display: flex; align-items: center; gap: 12px; margin: 8px 0 14px; }
.hosting-servers { margin-top: 8px; }
/* Create-company tier detail panel. */
.tier-detail { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: rgba(127,127,127,.05); }
.tier-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; font-size: 13px; }
.tier-detail-grid .muted { font-size: 12px; }
.kv-table code, .detail-head + .kv-table code { font-size: 12px; }
.cap-count { font-variant-numeric: tabular-nums; }
.modal-intro { font-size: 12px; color: var(--text-muted); margin: 0 0 14px; line-height: 1.5; }
.form-section { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 16px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.form-section:first-of-type { margin-top: 4px; }
.hint-eg { color: var(--text); opacity: .55; }
.check-row-group > div .field-hint { margin-top: 2px; }
/* Company-credit head page: per-currency overview + top-up/withdraw cards. */
.credit-overview { margin-bottom: 20px; }
.credit-ov-card { border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; background: var(--surface); }
.credit-ov-ccy { font-size: 13px; font-weight: 700; letter-spacing: .01em; color: var(--text); }
.credit-ov-note { font-size: 11px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-muted); margin-left: 6px; }
.credit-ov-l { font-size: 11px; letter-spacing: .01em; color: var(--text-muted); }
.credit-kpis { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.credit-kpis-3 { grid-template-columns: repeat(3, 1fr); }
.credit-kpis-4 { grid-template-columns: repeat(4, 1fr); }
.credit-ov-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.credit-ov-right { display: flex; align-items: center; gap: 10px; }
.credit-rate { font-size: 12px; color: var(--text-muted); white-space: nowrap; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 5px 10px; }
.credit-rate b { color: var(--text); font-variant-numeric: tabular-nums; }
.credit-flow-l { font-size: 11px; letter-spacing: .01em; color: var(--text-muted); margin: 16px 0 8px; }
.credit-kpi-usdt b { color: #7c3aed; }
.credit-kpi { padding: 14px 18px; display: flex; flex-direction: column; gap: 6px; background: var(--surface); }
.credit-kpi b { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); line-height: 1.1; }
.credit-kpi-ccy { font-size: 11px; font-weight: 500; color: var(--text-muted); margin-left: 2px; }
.credit-kpi-master { background: #eef2ff; }
.credit-kpi-master b { color: var(--primary); }
.credit-kpi-in b { color: var(--success); }
@media (max-width: 1000px) { .credit-kpis-3, .credit-kpis-4 { grid-template-columns: repeat(2, 1fr); } }
.credit-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.credit-form { flex: 1; min-width: 300px; margin: 0; }
.credit-form-title { margin: 0 0 12px; font-size: 14px; font-weight: 600; }
.credit-l { display: block; font-size: 12px; font-weight: 500; color: var(--text-muted); margin: 12px 0 5px; }
.credit-form > .credit-l:first-of-type { margin-top: 0; }
.credit-sub-title { margin-top: 22px; font-size: 15px; }
.credit-row-actions { display: flex; gap: 6px; justify-content: flex-end; }
/* Credit modals: full-width fields + a 2-up row for purchase amount / GGR. */
.modal .input { width: 100%; box-sizing: border-box; }
.modal .seg-full { margin-bottom: 14px; } /* breathing room between the mode toggle + first field */
.credit-mrow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.credit-mrow > div { display: flex; flex-direction: column; }
.credit-mrow label { margin-top: 0; }
.modal .credit-first-l { margin-top: 0; }
/* The reason label is the form's first DIRECT-child <label> (amount labels sit
   inside x-show divs), so :first-of-type wrongly zeroes its top margin and it
   sticks to the amount input. Restore the standard label gap. */
.modal label.credit-gap-l { margin-top: 16px; }
.req { color: var(--danger); }
.note { display: flex; justify-content: space-between; align-items: flex-start; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 8px; }
.note-body p { margin: 4px 0; font-size: 13px; }

/* dashboard: stat cards (RULE 15 — flat, monochrome, no decoration) */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 24px; }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.stat-label { font-size: 12px; color: var(--text-muted); }
.stat-value { font-size: 22px; font-weight: 600; }

/* pagination (RULE 15) */
.pager { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.pager-info { font-size: 12px; color: var(--text-muted); }
.pager-nav { display: flex; gap: 6px; }
.btn-disabled { opacity: 0.4; pointer-events: none; }

/* Bar chart (Task 7.13) */
.bar-chart { display: flex; align-items: flex-end; gap: 6px; height: 160px; padding: 8px 0; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.bar-fill { width: 70%; min-height: 2px; background: var(--primary); border-radius: 2px 2px 0 0; }
.bar-label { font-size: 10px; color: var(--text-muted); margin-top: 4px; white-space: nowrap; }

/* Tablet responsive (Task 8.10) */
@media (max-width: 1024px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .data-table { display: block; overflow-x: auto; }
  /* display:block + overflow makes the TABLE its own scroll box, which also makes
     it the sticky containing block: top:56px then pins the header 56px down from
     the table's own edge, parked squarely over the first row. Inside its own box
     the header belongs at the top — same correction .table-scroll already makes. */
  .data-table--sticky thead th { top: 0; }
}
/* Mobile shell lives at the end of this sheet (search "Mobile shell") — it has to
   come last so it beats the component rules declared below this point. */

/* Topbar zones. The whole ancestor chain is overflow:visible so corner
   notification badges sitting just outside their button are never clipped. */
.app, .main { overflow: visible; }
.topbar { gap: 16px; overflow: visible; }
.topbar-left, .topbar-right { display: flex; align-items: center; overflow: visible; }
.topbar-left { gap: 8px; }
.topbar-right { gap: 10px; }

/* Quick-access: equal-size bordered buttons + corner notification badge */
.qbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; line-height: 1; color: var(--text); text-decoration: none; white-space: nowrap; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.qbtn:hover { background: var(--bg); border-color: var(--text-muted); }
.qbtn-badge { position: absolute; top: -6px; right: -6px; z-index: 2; min-width: 15px; height: 15px; padding: 0 4px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; background: var(--danger); color: #fff; font-size: 10px; font-weight: 600; line-height: 1; border-radius: 8px; box-shadow: 0 0 0 1.5px var(--surface); }

/* Balances: mini-card, clickable → detail */
.bal-card { display: inline-flex; flex-direction: column; gap: 2px; padding: 5px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); text-decoration: none; line-height: 1.2; white-space: nowrap; }
.bal-card:hover { background: var(--bg); border-color: var(--text-muted); }
.bal-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.bal-value { font-size: 13px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

/* Vertical divider (slate, 24px) */
.vdiv { width: 1px; height: 24px; background: var(--sidebar-active); flex-shrink: 0; }

/* Monochrome icon button (bell/logout) — slate, subtle hover */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid transparent; border-radius: var(--radius); background: none; color: var(--text-muted); cursor: pointer; text-decoration: none; }
.icon-btn:hover { background: var(--bg); border-color: var(--border); color: var(--text); }

/* Language: 24px circular flag trigger (crops the emoji to a circle) */
.lang-dd { position: relative; display: inline-flex; }
/* Emoji flags clipped to a circle: the glyph is sized larger than the box so it
   overflows and the round overflow:hidden crops the rectangular flag into a disc
   (no square corners, no built-in glyph padding showing). */
.flag-circle, .flag-sq { border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; line-height: 1; flex: none; }
.flag-circle { width: 28px; height: 28px; padding: 0; background: none; font-size: 30px; border: 1px solid var(--border); cursor: pointer; }
.flag-circle:hover { border-color: var(--text-muted); }
.flag-sq { width: 24px; height: 24px; font-size: 25px; }
.flag-svg { width: 100%; height: 100%; display: block; }
.data-table tfoot .totals-row td { border-top: 2px solid var(--border); font-weight: 600; background: var(--surface-2, rgba(0,0,0,.02)); }
.totals-label { text-transform: uppercase; font-size: 11px; letter-spacing: .04em; color: var(--text-muted); }
.lang-menu { position: absolute; right: 0; top: 140%; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0,0,0,.12); min-width: 140px; z-index: 20; overflow: hidden; }
.lang-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-size: 13px; color: var(--text); text-decoration: none; }
.lang-item:hover, .lang-item.active { background: var(--bg); }

/* Notification bell (monochrome icon, red badge) */
.bell { position: relative; }
.bell-badge { position: absolute; top: -2px; right: -2px; min-width: 15px; height: 15px; padding: 0 3px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; background: var(--danger); color: #fff; font-size: 9px; font-weight: 600; line-height: 1; border-radius: 8px; }

.logout-form { display: flex; }

/* Dashboard home (iGaming backoffice, 16px dense spacing) */
.dash-head { display: flex; justify-content: space-between; align-items: center; margin: -4px 0 12px; }
.dash-head .page-title { margin: 0; }
.dash { display: flex; flex-direction: column; gap: 16px; }
.dash-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.dash-stats .stat-card { gap: 4px; }
.dash-stats .stat-value { font-size: 20px; }
.company-stats { margin: 16px 0; }
.stat-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; min-height: 14px; }
.delta { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; }
.delta.up { color: var(--success); }
.delta.down { color: var(--danger); }
.stat-sub { color: var(--text-muted); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 2px rgba(22,163,74,.2); }

/* Dashboard cards + grid */
.dash-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 16px; min-width: 0; }
.dash-card-title { font-size: 14px; font-weight: 600; margin: 0 0 12px; }
.dash-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.dash-card-head .dash-card-title { margin: 0; }
.dash-link { font-size: 12px; color: var(--primary); }
.dash-2col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }

/* Date-range segmented button group (shared border, primary active state) */
.seg { display: inline-flex; }
.seg-full { display: flex; width: 100%; }
.seg-full .seg-btn { flex: 1; text-align: center; }
.seg-btn { padding: 7px 14px; font-size: 13px; line-height: 1; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-left-width: 0; cursor: pointer; }
.seg-btn:first-child { border-left-width: 1px; border-radius: var(--radius) 0 0 var(--radius); }
.seg-btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.seg-btn:hover { background: var(--bg); color: var(--text); }
.seg-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* GGR trend (Chart.js canvas, RULE 15 monochrome + 1 primary) */
.line-chart { width: 100%; }
.lc-legend { display: flex; gap: 16px; margin-bottom: 12px; }
.lc-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
.lc-dot { width: 8px; height: 8px; border-radius: 2px; }
.lc-canvas-wrap { position: relative; height: 260px; width: 100%; }
.lc-empty { display: flex; align-items: center; justify-content: center; height: 200px; color: var(--text-muted); font-size: 13px; }
.games-bar { width: 100%; }
.gb-canvas-wrap { position: relative; height: 230px; width: 100%; }
.pager { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.pager-btn { padding: 5px 12px; font-size: 12px; }
.pager-btn:disabled { opacity: .45; cursor: default; }
.pager-page { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

@media (max-width: 1200px) { .dash-stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1024px) { .dash-2col { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .dash-stats { grid-template-columns: repeat(2, 1fr); } }

/* Promotion add/edit page: a constrained card of bordered sections, each a
   standard .form-grid of .fg cells (same tidy pattern as every other admin
   form — RULE 15). */
.promo-form { max-width: 760px; }
.promo-form .fsec { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.promo-form .fsec-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin-bottom: 12px; }
.promo-form textarea.field { resize: vertical; }
/* Banner preview under the URL field + thumbnail in the promo list. */
.promo-banner-preview { display: block; margin-top: 10px; max-width: 100%; max-height: 140px; border-radius: var(--radius); border: 1px solid var(--border); object-fit: contain; }
.promo-thumb { width: 40px; height: 26px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border); vertical-align: middle; margin-right: 8px; }
.input-error { border-color: var(--danger) !important; }
.field-error { display: block; font-size: 12px; color: var(--danger); margin: 4px 0 0; }
.promo-preview { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.promo-preview .preview-sim { max-width: 240px; margin-bottom: 4px; }
.preview-line { font-size: 14px; font-weight: 500; margin: 8px 0 0; word-break: break-word; }
.preview-warn { font-size: 12px; color: var(--warning); margin-top: 6px; }
.preview-warn::before { content: "⚠ "; }

/* Content tabs — underline style (Stripe/Linear, RULE 15). The active tab is a
primary-colored underline + bold label sitting on the divider; the panel below
is a clean bordered card. Clear active state, no overlapping borders. */
.ctabs { display: flex; flex-wrap: wrap; gap: 2px; margin: 4px 0 14px; border-bottom: 1px solid var(--border); }
.ctab { flex: 0 0 auto; padding: 10px 18px; font-size: 13px; font-weight: 500; color: var(--text-muted); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .12s ease; }
.ctab:hover { color: var(--text); }
.ctab.active { color: var(--primary); font-weight: 600; border-bottom-color: var(--primary); }
.ctab-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.ctab-panel .data-table td, .ctab-panel .data-table th { border-bottom-color: #f1f5f9; }

/* CMS tables: image thumbnails + spaced action buttons */
.thumb { width: 220px; height: 84px; object-fit: contain; border-radius: 6px; border: 1px solid var(--border); background: var(--bg); display: block; padding: 3px; box-sizing: border-box; }
.action-cell { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }

/* Image URL preview (JS fills src + dimensions on input) */
.img-preview { margin-top: 8px; padding: 8px; border: 1px dashed var(--border); border-radius: var(--radius); background: var(--bg); }
.img-preview img { max-width: 100%; max-height: 140px; border: 1px solid var(--border); border-radius: 4px; display: block; }
.img-preview .img-dims { display: inline-block; margin-top: 6px; font-size: 11px; color: var(--text-muted); }
.img-preview .img-missing { font-size: 12px; color: var(--warning); }

/* Full-page content editor (static pages, promo pages): bordered sections of
   .form-grid cells, a wide code editor, and a sticky action bar. */
.editor-form { max-width: 880px; }
.editor-form .fsec { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 16px; }
.editor-form .fsec-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 0 0 14px; }
.editor-form .fsec-title .fsec-hint { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 8px; }
.editor-form textarea.field { resize: vertical; }
.platform-baseline { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 4px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
.platform-baseline .check-inline { flex: 0 0 auto; margin: 0; }
.platform-baseline .field-hint { margin: 0; }
.platform-permission-grid { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.platform-permission-grid .check-inline { margin: 0; min-width: 0; }
.platform-permission-grid .mono { overflow-wrap: anywhere; }
.editor-actions { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 8px; padding: 12px 0; margin-top: 4px; background: linear-gradient(to top, var(--bg) 70%, transparent); }
.field-hint { display: block; font-size: 11px; color: var(--text-muted); margin-top: 4px; }

/* HTML code editor (light, VSCode-like) — a highlight layer behind a
transparent textarea. Both panes share identical font metrics so the caret
lines up with the highlighted text; the gutter and highlight track the
textarea's scroll. */
.code-editor { position: relative; display: flex; height: 420px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: #ffffff; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.55; }
.ce-gutter { flex: 0 0 auto; min-width: 44px; overflow: hidden; background: #f6f8fa; border-right: 1px solid var(--border); }
.ce-gutter-inner { padding: 10px 8px 10px 0; color: #94a3b8; text-align: right; white-space: pre; user-select: none; }
.ce-body { position: relative; flex: 1 1 auto; overflow: hidden; }
.ce-highlight, .ce-input { margin: 0; padding: 10px 12px; font: inherit; letter-spacing: 0; tab-size: 2; white-space: pre-wrap; overflow-wrap: anywhere; border: 0; }
.ce-highlight { position: absolute; top: 0; left: 0; width: 100%; color: var(--text); pointer-events: none; }
.ce-input { position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; color: transparent; caret-color: var(--text); resize: none; outline: none; overflow-x: hidden; overflow-y: auto; }
.ce-input::selection { background: #b6d7ff; }
/* HTML token colors (GitHub light) */
.ce-pun { color: #57606a; }
.ce-tag { color: #116329; }
.ce-attr { color: #0550ae; }
.ce-str { color: #0a3069; }
.ce-com { color: #6e7781; font-style: italic; }
.ce-ent { color: #953800; }
/* Hide the raw textarea only until JS wraps it (it becomes .ce-input then). */
.field[data-code-editor]:not(.ce-input) { display: none; }

/* Toggle switch (nicer than a bare checkbox) — components.Switch */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.switch-track { position: relative; flex: 0 0 auto; width: 38px; height: 22px; background: #cbd5e1; border-radius: 999px; transition: background .15s ease; }
.switch-thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(15,23,42,.25); transition: transform .15s ease; }
.switch input:checked + .switch-track { background: var(--primary); }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(16px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--primary); outline-offset: 2px; }
.switch-label { font-size: 13px; }
/* Status rows: one toggle + hint per line */
.status-list { display: flex; flex-direction: column; gap: 14px; }
.status-row { display: flex; flex-direction: column; gap: 2px; }
.status-row .field-hint { margin-top: 0; margin-left: 48px; }
/* Maintenance control: button + hint inline, divider before the toggle gates. */
.maint-action { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.maint-action .field-hint { margin: 0; }
.status-gates { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }

/* Website Settings: two-column card grid; the code section spans full width
   (the HTML editors need the room). Sections save in place (HTMX, no reload). */
.web-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; max-width: 1100px; }
.web-grid .fsec { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin: 0; }
/* Push Save to the card bottom so paired cards read as equal-height, no gap. */
.web-grid .fsec .editor-actions { margin-top: auto; }
.web-grid .fsec-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 0 0 14px; }
.web-grid .fsec-title .fsec-hint { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 8px; }
.web-grid .fsec-full { grid-column: 1 / -1; }
.web-grid textarea.field { resize: vertical; }
@media (max-width: 900px) { .web-grid { grid-template-columns: 1fr; } }

/* Deposit confirm modal — clean sectioned preview */
.depo-card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; }
.depo-hero { padding: 16px; text-align: center; background: var(--bg); border-bottom: 1px solid var(--border); border-top: 3px solid var(--border); }
.depo-hero-ok { background: #eef2ff; border-top-color: var(--primary); }
.depo-hero-ok .depo-amount { color: var(--primary); }
.depo-hero-danger { background: #fef2f2; border-top-color: var(--danger); }
.depo-hero-danger .depo-amount { color: #b91c1c; }
.depo-amount { font-size: 26px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.depo-cur { font-size: 14px; font-weight: 600; color: var(--text-muted); }
.depo-sub { margin-top: 4px; font-size: 15px; }
.depo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); }
.depo-cell { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; background: var(--surface); min-width: 0; }
.depo-cell--wide { grid-column: 1 / -1; }
/* A grid that ends on an odd cell leaves a coloured gap beside it, which reads
   as a value that failed to load. The last cell takes the whole row instead. */
.depo-grid > .depo-cell:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pg-head-tab { display: inline-flex; align-items: center; gap: 6px; }

/* Mobile-banking style transfer proof (Withdraw receipt) */
.mb-receipt { max-width: 420px; margin: 8px auto 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 22px 22px; text-align: center; box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.04)); }
.mb-badge { width: 84px; height: 84px; margin: 0 auto 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; }
.mb-badge svg { width: 42px; height: 42px; }
.mb-badge--success { background: var(--success); }
.mb-badge--danger { background: var(--danger); }
.mb-badge--warning { background: var(--warning); }
.mb-status { font-size: 18px; font-weight: 700; color: var(--text); }
.mb-when { margin-top: 4px; font-size: 12.5px; color: var(--text-muted); }
.mb-amount { margin: 12px 0 4px; font-size: 27px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.mb-rows { margin: 18px 0 0; text-align: left; }
.mb-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 2px; border-top: 1px solid var(--border); font-size: 13px; }
.mb-rows dt { color: var(--text-muted); white-space: nowrap; }
.mb-rows dd { margin: 0; text-align: right; color: var(--text); word-break: break-word; }
.mb-rows .mb-ref { font-size: 11px; color: var(--text-muted); }
/* Settlement approval modal: consistent vertical rhythm between fields/actions. */
.pg-modal-form { display: flex; flex-direction: column; gap: 12px; }
.pg-modal-form .modal-text { margin: 0; }
.pg-modal-form .modal-actions { margin-top: 4px; }
.depo-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.depo-value { font-size: 13px; word-break: break-word; }
.depo-total, .depo-noteblock { padding: 10px 16px; border-top: 1px solid var(--border); background: var(--surface); display: flex; flex-direction: column; gap: 3px; }
.depo-total { background: #eef2ff; }
.depo-sum { font-size: 15px; font-variant-numeric: tabular-nums; }
.depo-sum .op { color: var(--text-muted); margin: 0 3px; }
.depo-sum b { color: var(--primary); }
/* Approval balance preview: before → credit → after, as a card footer section. */
.depo-bal { border-top: 1px solid var(--border); background: var(--surface); }
.depo-bal-row { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 16px; font-size: 13px; }
.depo-bal-row + .depo-bal-row { border-top: 1px solid #f1f5f9; }
.depo-bal-v { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.depo-bal-cur { font-size: 11px; font-weight: 500; color: var(--text-muted); }
.depo-bal-plus .depo-bal-v { color: var(--success); }
.depo-bal-after { background: #eef2ff; padding-top: 11px; padding-bottom: 11px; }
.depo-bal-after .depo-label { font-size: 12px; color: var(--text); font-weight: 600; text-transform: none; letter-spacing: 0; }
.depo-bal-after .depo-bal-v { font-size: 16px; color: var(--primary); }
/* Sticky bonus: playable now, withdrawal gated by turnover — a small amber note
   under the balance breakdown makes the lock explicit without alarming. */
.depo-bal-note { padding: 8px 16px 2px; font-size: 12px; line-height: 1.4; color: #b45309; }
/* Player note — set off as a quote with a left accent, clean readable sans. */
.depo-noteblock .depo-note { margin: 4px 0 0; padding: 8px 12px; font-size: 13px; color: var(--text); background: var(--bg); border-left: 3px solid var(--border); border-radius: 0 var(--radius) var(--radius) 0; white-space: pre-wrap; }
.depo-proof { display: inline-block; padding: 10px 16px; border-top: 1px solid var(--border); font-size: 13px; }
.ip-flag { margin-left: 5px; font-size: 14px; }
.depo-note-cell { max-width: 200px; color: var(--text-muted); }
.withdrawal-bank-cell { min-width: max-content; white-space: nowrap; }
.withdrawal-bank-inline { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.withdrawal-bank-name { color: var(--text); font-size: 12.5px; font-weight: 500; }
.withdrawal-bank-holder { color: var(--text-muted); font-size: 12px; }
.withdrawal-bank-separator { color: #a1a1aa; }
.withdrawal-bank-number { color: var(--text); font-size: 12.5px; font-weight: 500; letter-spacing: .2px; white-space: nowrap; }
.nowrap { white-space: nowrap; }
.data-table .col-copy { width: 34px; text-align: center; }

/* Round icon action buttons (approve ✓ / reject ✗) — compact queue actions. */
.icon-btn { width: 30px; height: 30px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: var(--surface); cursor: pointer; }
.icon-btn-approve { background: var(--primary); border-color: var(--primary); color: #fff; }
.icon-btn-approve:hover { background: var(--primary-hover); }
.icon-btn-reject { background: #fff; border-color: var(--danger); color: var(--danger); }
.icon-btn-reject:hover { background: #fee2e2; }
.icon-btn-sm { width: 28px; height: 28px; }
.data-table td .icon-btn { vertical-align: middle; }

/* Payment method (bank catalog) */
.pm-icon { width: 20px; height: 20px; object-fit: contain; vertical-align: middle; margin-right: 6px; border-radius: 3px; }
.pm-name { display: inline-flex; align-items: center; }
.pm-icon-preview { max-height: 40px; margin: 4px 0 10px; border: 1px solid var(--border); border-radius: var(--radius); padding: 4px; background: #fff; }
.form-section { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 14px 0 4px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.form-section:first-child { margin-top: 0; }
.form-note { font-size: 11px; color: var(--text-muted); margin: 3px 0 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
/* Payment method modal — compact 2-column catalog form. */
.pm-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; align-items: start; }
.pm-form .fg { min-width: 0; }
.pm-form label { margin: 0 0 5px; }
.pm-form .field, .pm-form .select, .pm-form .select-trigger { width: 100%; }
.pm-form .form-section, .pm-form .pm-toggles, .pm-form .pm-icon-preview, .pm-form .modal-actions, .pm-form .fg-full { grid-column: 1 / -1; }
.pm-form textarea.field { resize: vertical; min-height: 40px; font-family: inherit; }
.opt-badge { font-size: 11px; font-weight: 400; color: var(--text-muted); }
.money-in { text-align: right; font-variant-numeric: tabular-nums; }
/* On/off capabilities — the checkbox IS the switch (appearance:none): a bordered
   grey track when off, solid green when on, so the state is obvious. Label sits
   clearly to the right, aligned to the switch, never overlapping. */
.pm-toggles { display: flex; flex-direction: column; gap: 16px; margin-top: 4px; }
.tgl { display: flex; align-items: center; gap: 12px; cursor: pointer; margin: 0; }
.tgl-sw { appearance: none; -webkit-appearance: none; position: relative; flex: 0 0 auto; width: 42px; height: 24px; margin: 0; background: #e2e8f0; border: 1px solid #cbd5e1; border-radius: 999px; cursor: pointer; transition: background 150ms, border-color 150ms; }
.tgl-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: left 150ms; }
.tgl-sw:checked { background: var(--primary); border-color: var(--primary); }
.tgl-sw:checked::after { left: 20px; }
.tgl-sw:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tgl-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.tgl-label { font-size: 13px; font-weight: 600; color: var(--text); }
.tgl-hint { font-size: 11px; color: var(--text-muted); }

/* Subscription (head) page */
.page-sub { margin: -6px 0 16px; font-size: 13px; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin: 22px 0 8px; }
.section-title { font-size: 15px; font-weight: 700; margin: 0; }
.section-title.mt { margin-top: 24px; margin-bottom: 8px; }
.stat-card.stat-ok { border-left: 3px solid var(--success); }
.stat-card.stat-ok .stat-value { color: var(--success); }
.stat-card.stat-info { border-left: 3px solid var(--primary); }
.stat-card.stat-info .stat-value { color: var(--primary); }

/* Audit log */
.audit-verb { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); font-size: 12px; text-transform: capitalize; }
.audit-reason { max-width: 240px; font-size: 12px; color: var(--text-muted); }

/* Sidebar user footer — a full-width clickable button that opens the account
   modal; flush like a nav row (the button itself carries the padding). */
.sb-foot { margin-top: auto; border-top: 1px solid var(--sidebar-active); }
.sb-user { width: 100%; display: flex; align-items: center; gap: 10px; min-width: 0; background: none; border: none; padding: 10px 12px; cursor: pointer; text-align: left; color: inherit; }
.sb-user:hover { background: var(--sidebar-active); }
.sb-user-avatar { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.sb-user-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; flex: 1 1 auto; }
.sb-user-name { font-size: 13px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-sub { font-size: 11px; color: var(--sidebar-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-plan { font-size: 10px; color: #a5b4fc; text-transform: uppercase; letter-spacing: .03em; }
.sb-user-caret { flex: 0 0 auto; margin-left: auto; color: var(--sidebar-text); opacity: .6; }
.app.collapsed .sb-user-info, .app.collapsed .sb-user-caret { display: none; }
.app.collapsed .sb-user { justify-content: center; padding: 10px 0; }

/* Account modal — a compact, tidy self-service hub. */
.acct-head { display: flex; align-items: center; gap: 12px; padding: 14px; margin: -4px 0 14px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); }
.acct-avatar { width: 44px; height: 44px; flex: 0 0 44px; font-size: 17px; }
.acct-name { font-size: 15px; font-weight: 700; }
.acct-meta { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.acct-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.acct-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px 12px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; font-weight: 600; color: var(--text); transition: border-color 120ms, background 120ms; }
.acct-link svg { color: var(--primary); }
.acct-link:hover { background: #eef2ff; border-color: var(--primary); }
.acct-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 10px; }
.acct-row-label { font-size: 13px; font-weight: 600; }
.acct-row-hint { font-size: 11px; color: var(--text-muted); }
.acct-section { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin: 16px 0 8px; }
.acct-pw .field { margin-bottom: 8px; }
.acct-signout { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }

/* Account change-password: labelled fields + toggle */
.acct-pw-label { display: block; font-size: 12px; font-weight: 500; color: var(--text); margin: 10px 0 5px; }
.acct-pw .pw-wrap { margin-bottom: 4px; }

.field-ok { font-size: 12px; color: var(--success); margin: 4px 0 0; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
/* Global request loader (AUDIT_BTN). admin.js adds .btn-loading immediately
   (dims + disables — instant click feedback, anti double-submit) and
   .btn-spinning only after ~120ms if still inflight. Spinner is an
   absolutely-centered overlay: content stays in place (invisible) so the
   button never changes size → no layout shift, no flash on fast updates. */
.btn-loading { pointer-events: none; opacity: .65; }
.btn-spinning { position: relative; color: transparent !important; }
.btn-spinning > * { visibility: hidden; }
.btn-spinning::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 14px;
  margin: -7px 0 0 -7px; box-sizing: border-box; border-radius: 50%;
  border: 2px solid rgba(0,0,0,.18); border-top-color: rgba(0,0,0,.6);
  animation: btnspin .6s linear infinite;
}
/* Solid colored buttons (white text) → white spinner. Outline/icon buttons sit on
   a light bg, so they keep the dark spinner above. */
.btn-primary.btn-spinning::after, .btn-danger.btn-spinning::after,
.btn-success.btn-spinning::after {
  border-color: rgba(255,255,255,.45); border-top-color: #fff;
}
@keyframes btnspin { to { transform: rotate(360deg); } }

/* Account 2FA row (button) + setup modal */
.acct-row-btn { width: 100%; background: none; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.acct-row-btn:hover { background: var(--bg); border-color: var(--primary); }
.acct-row-right { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); }
.tfa-lead { font-size: 13px; margin: 0 0 12px; }
.tfa-steps { font-size: 13px; color: var(--text); margin: 0 0 12px; padding-left: 18px; }
.tfa-steps li { margin-bottom: 4px; }
.tfa-qr { display: flex; justify-content: center; padding: 12px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; }
.tfa-secret { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; }
.tfa-secret code { font-size: 13px; letter-spacing: 1px; word-break: break-all; background: var(--bg); padding: 6px 8px; border-radius: var(--radius); border: 1px solid var(--border); }
.tfa-code { text-align: center; letter-spacing: 6px; font-size: 18px; font-variant-numeric: tabular-nums; }

/* Transaction history */
.tabbar { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.tab { padding: 8px 14px; font-size: 13px; font-weight: 500; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--text); }
.tab.tab-active { color: var(--primary); border-bottom-color: var(--primary); }
.money-in { color: var(--success); }
.money-out { color: var(--danger); }
.hist-detail { max-width: 260px; font-size: 12px; color: var(--text-muted); }

/* History filter bar */
.hist-filter { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.hist-filter .field { margin-bottom: 0; width: auto; }
.hist-filter .select-trigger { min-width: 150px; }

/* Reversed + window indicators */
.row-reversed td { opacity: .55; }
.row-reversed .num.mono { text-decoration: line-through; }
.rev-link { margin-left: 6px; font-size: 12px; color: var(--primary); }
.win-left { margin-left: 6px; font-size: 11px; color: var(--text-muted); white-space: nowrap; }

/* Summary bar */
.sum-bar { margin-bottom: 14px; }
.sum-cur { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-bottom: 6px; }
.sum-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.sum-card { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--surface); }
.sum-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.sum-amount { font-size: 17px; font-weight: 600; margin-top: 2px; }
.sum-ccy { font-size: 11px; font-weight: 400; color: var(--text-muted); }
.sum-count { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Advanced search */
.hist-adv { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; margin-top: 8px; }
.hist-adv .field { width: auto; margin-bottom: 0; }
[x-cloak] { display: none !important; }

/* Agent reconciliation */
.recon { border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; max-width: 520px; background: var(--surface); }
.recon-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 10px; }
.recon-line { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 0; font-size: 13px; }
.recon-mv { color: var(--text-muted); }
.recon-close { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 8px; }
.recon-ok { color: var(--success); font-size: 12px; margin-left: 8px; }
.recon-bad { color: var(--danger); font-size: 12px; margin-left: 8px; }

/* Player statement */
.stmt { border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; background: var(--surface); }
.stmt-title { font-size: 13px; margin-bottom: 10px; }
.stmt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.stmt-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.stmt-amount { font-size: 16px; font-weight: 600; margin-top: 2px; }
.stmt-ccy { font-size: 11px; font-weight: 400; color: var(--text-muted); }
.stmt-count { font-size: 11px; color: var(--text-muted); }

/* Jargon hint badge */
.hint-badge { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: 4px; border-radius: 50%; border: 1px solid var(--border); font-size: 9px; color: var(--text-muted); cursor: help; vertical-align: middle; }

/* System status */
.sys-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: 14px; }
.sys-card { border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; background: var(--surface); }
.sys-card-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 10px; }
.sys-line { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px; }
.sys-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; }
.sd-ok { background: var(--success); } .sd-warn { background: #d9a200; } .sd-crit { background: var(--danger); } .sd-pending { background: var(--text-muted); }
.sys-banner { padding: 10px 14px; border-radius: 8px; margin-bottom: 14px; font-size: 13px; font-weight: 500; }
.sys-crit { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); border: 1px solid var(--danger); }

/* Dashboard business alerts */
.dash-alert { display: flex; justify-content: space-between; align-items: center; padding: 9px 14px; border-radius: 8px; margin-bottom: 10px; font-size: 13px; font-weight: 500; }
.da-warn { background: color-mix(in srgb, #d9a200 12%, transparent); color: #8a6d00; border: 1px solid #d9a200; }
.da-crit { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); border: 1px solid var(--danger); }
.da-x { background: none; border: none; cursor: pointer; color: inherit; font-size: 12px; opacity: .7; }
.da-x:hover { opacity: 1; }

/* Date-range picker */
.drp { position: relative; display: inline-block; }
.drp-trigger { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-size: 13px; color: var(--text); cursor: pointer; }
.drp-trigger:hover { border-color: var(--primary); }
.drp-trigger svg { color: var(--text-muted); }
.drp-caret { color: var(--text-muted); font-size: 10px; }
.drp-pop { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(15,23,42,.14); padding: 12px; }
.drp-body { display: flex; gap: 12px; }
.drp-presets { display: flex; flex-direction: column; gap: 2px; min-width: 118px; border-right: 1px solid var(--border); padding-right: 10px; }
.drp-preset { text-align: left; padding: 6px 9px; border: none; background: none; border-radius: 6px; font-size: 12px; color: var(--text); cursor: pointer; white-space: nowrap; }
.drp-preset:hover { background: var(--bg); }
.drp-nav { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
.drp-nav-sp { flex: 1; }
.drp-a { border: 1px solid var(--border); background: var(--surface); border-radius: 6px; width: 26px; height: 26px; cursor: pointer; color: var(--text-muted); font-size: 13px; }
.drp-a:hover { border-color: var(--primary); color: var(--primary); }
.drp-pair { display: flex; gap: 16px; }
.drp-cal-head { text-align: center; font-size: 12px; font-weight: 600; margin-bottom: 6px; }
.drp-grid { display: grid; grid-template-columns: repeat(7, 30px); gap: 1px; }
.drp-wd { text-align: center; font-size: 10px; color: var(--text-muted); height: 22px; line-height: 22px; }
.drp-day { height: 30px; border: none; background: none; border-radius: 6px; font-size: 12px; color: var(--text); cursor: pointer; }
.drp-day:hover { background: var(--bg); }
.drp-day.out { color: var(--border); }
.drp-day.today { outline: 1px solid var(--primary); outline-offset: -3px; }
.drp-day.in { background: color-mix(in srgb, var(--primary) 14%, transparent); border-radius: 0; }
.drp-day.sel { background: var(--primary); color: #fff; }
.drp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.drp-tz { font-size: 11px; color: var(--text-muted); font-family: var(--mono, monospace); }
.drp-fields { display: flex; align-items: center; gap: 6px; }
.drp-fields input { width: 100px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; }
.drp-fields input.bad { border-color: var(--danger); }
.drp-arrow { color: var(--text-muted); }
.btn-sm { padding: 5px 12px; font-size: 12px; }
@media (max-width: 640px) { .drp-pair .drp-cal:first-child { display: none; } .drp-body { flex-direction: column; } .drp-presets { flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--border); padding: 0 0 8px; } }

/* Sidebar pending badge */
.sidebar nav { padding-top: 6px; }
.nav-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 600; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.nav-badge:empty { display: none; }

/* Collapsed sidebar: badge → corner dot */
.app.collapsed .nav-badge { position: absolute; top: 4px; right: 6px; min-width: 15px; height: 15px; margin: 0; font-size: 9px; }
.app.collapsed .sidebar nav a, .app.collapsed .nav-group-toggle { position: relative; }

.rate-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.rate-head, .rate-row { display: grid; grid-template-columns: 80px 1fr auto; gap: 12px; align-items: center; }
.rate-head { font-size: 10.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); padding: 0 2px; }
.rate-code { font-weight: 700; font-variant-numeric: tabular-nums; }
.rate-row .input { width: 100%; }
.rate-actions { display: flex; gap: 6px; justify-content: flex-end; }

.rate-src { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rate-coin { font-size: 10.5px; color: var(--text-muted); font-family: var(--mono, monospace); }
.rate-update { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.rate-update-note { font-size: 11px; color: var(--text-muted); }
.rate-add-row { display: grid; grid-template-columns: 100px 1fr auto; gap: 12px; align-items: center; }
.rate-add-row .input { width: 100%; }
.rate-add { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.toolbar-actions { display: flex; gap: 8px; align-items: center; }
/* Inside a toolbar row the filter form must not carry its standalone bottom
   margin — with align-items:center it would push the fields up and leave the
   export button sitting lower (misaligned). */
.toolbar-actions .hist-filter { margin-bottom: 0; }

.rate-modal { width: 100%; }
.rate-code { display: flex; align-items: center; gap: 8px; }
.rate-nf { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--danger); background: rgba(220,38,38,.1); padding: 2px 6px; border-radius: 5px; }

.pm-table th.pm-hpos, .pm-drag { width: 56px; white-space: nowrap; color: var(--text-muted); }
.pm-handle { cursor: grab; display: inline-flex; vertical-align: middle; opacity: .5; }
.pm-handle:active { cursor: grabbing; }
.pm-table tr:hover .pm-handle { opacity: 1; color: var(--primary); }
.pm-pos { display: inline-block; vertical-align: middle; margin-left: 5px; font-variant-numeric: tabular-nums; font-size: 12px; }
.pm-dragging { opacity: .4; background: var(--bg); }
.pm-actions { display: flex; gap: 4px; justify-content: flex-end; }

.bank-form { display: flex; flex-direction: column; gap: 12px; }
.bank-form label { display: block; margin: 0 0 5px; }
.bank-form .field, .bank-form .select, .bank-form .select-trigger { width: 100%; }
.bank-form .fg { display: flex; flex-direction: column; }
.bank-limits { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.bank-lim-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.bank-lim-l { color: var(--text-muted); }
.bank-lim-note { font-size: 11px; color: var(--text-muted); margin: 4px 0 0; }

.thumb { cursor: zoom-in; }
.img-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.82); display: none; align-items: center; justify-content: center; z-index: 2000; padding: 32px; cursor: zoom-out; }
.img-lightbox.open { display: flex; }
.img-lightbox img { max-width: 92vw; max-height: 90vh; object-fit: contain; border-radius: 6px; box-shadow: 0 12px 48px rgba(0,0,0,.5); }

.ws-layout { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }
.ws-menu { display: flex; flex-direction: column; gap: 8px; }
.ws-tile { display: flex; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; transition: background .12s, border-color .12s; }
.ws-tile:hover { border-color: var(--primary); }
.ws-tile.active { background: #eef2ff; border-color: var(--primary); }
.ws-tile-icon { width: 40px; height: 40px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--bg); color: var(--text-muted); }
.ws-tile.active .ws-tile-icon { background: #fff; color: var(--primary); }
.ws-tile-text { min-width: 0; }
.ws-tile-title { font-weight: 600; font-size: 13.5px; }
.ws-tile-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }
.ws-detail { min-width: 0; }
.ws-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 20px 22px; }
.ws-card .fsec { border: none; padding: 0; background: transparent; margin: 0; }
/* Section heading inside each website-settings card: divider + breathing room so
   the title doesn't sit flush against the first field. */
.ws-card .fsec-title { font-size: 13px; font-weight: 600; color: var(--text); margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.ws-card .fsec-title .fsec-hint { font-weight: 400; font-size: 12px; color: var(--text-muted); margin-left: 8px; }
@media (max-width: 820px) { .ws-layout { grid-template-columns: 1fr; } }

/* Create-company: one 16px rhythm. The grid drops its bottom margin so the next
   section's label margin (16px) is the sole gap — matching the owner fields below,
   so grid → server → owner are evenly spaced. */
/* Every section (grid rows, server block, owner grid) sits on one 16px rhythm.
   Each block owns its 16px BELOW; the following label drops its own top margin so
   the gaps never double up (grid margin + label margin). */
.modal-create .form-grid-2 { margin: 0 0 16px; }
.modal-create > .cc-server { margin: 0 0 16px; }
.modal-create > .cc-server > label,
.modal-create > label { margin-top: 0; }
.modal:has(.operator-create) .modal-head { margin-bottom: 16px; }
.operator-create .form-grid-2 { margin-bottom: 0; row-gap: 16px; }
.operator-create .pw-wrap { margin-bottom: 0; }
.operator-create .field-hint { margin-top: 4px; }
.operator-create .field-ok-text { margin: 4px 0 0; color: var(--success); font-size: 12px; }
.operator-create .modal-actions { margin-top: 20px; }
@media (max-width: 640px) {
  .operator-create .form-grid-2 { grid-template-columns: 1fr; }
}
.cc-server .field-hint { margin: 0 0 8px; }
.cc-server .chip-group { display: flex; margin: 0 0 8px; }
.cc-server #cc-servers { margin-bottom: 0; }

/* Platform settings page */
.settings-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.settings-tab { padding: 8px 14px; font-size: 13px; font-weight: 500; color: var(--text-muted); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; }
.settings-tab.active { color: var(--text); border-bottom-color: var(--primary); }
.settings-panel { width: 50%; max-width: none; }
/* Payment Gateway uses a master-detail layout — give it the full width, not
   the 50% column the form-only tabs want. */
.settings-panel:has(.ws-layout) { width: 100%; }
@media (max-width: 900px) { .settings-panel { width: 100%; } }

.add-link { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--primary); cursor: pointer; }
.add-link:hover { text-decoration: underline; }

.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.panel-head .modal-text { margin: 0; }

.np-toggle { margin: 4px 0 14px; }

.dash-card > .section-head:first-child { margin-top: 0; }
.sec-gap { margin-top: 16px; }

/* Masonry via CSS columns: uneven-height cards pack upward so a short card
   doesn't leave dead space under it (grid row-aligns, columns don't). */
.hh-grid { column-count: 2; column-gap: 16px; }
.hh-grid > .dash-card { break-inside: avoid; margin: 0 0 16px; }
.dash-card > .section-title { margin-bottom: 12px; }
.hh-grid + .dash-card { margin-top: 16px; }
@media (max-width: 900px) { .hh-grid { column-count: 1; } }

/* Head scope switcher: compact segmented pill under the brand. */
.sb-pill { display: flex; gap: 3px; margin: 8px 12px; padding: 3px; background: rgba(0,0,0,0.22); border-radius: 8px; }
.sb-pill-btn { flex: 1; padding: 6px 8px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.55); background: transparent; border: none; border-radius: 6px; cursor: pointer; transition: background 0.12s, color 0.12s; }
.sb-pill-btn:hover { color: rgba(255,255,255,0.85); }
.app.collapsed .sb-pill { display: none; }
/* Active segment + scope filter driven by html[data-menu-scope] (set pre-paint, no flash). */
html[data-menu-scope="tenant"] .sb-pill-btn[data-scope="tenant"],
html[data-menu-scope="head"] .sb-pill-btn[data-scope="head"] { background: var(--sidebar-active); color: #fff; }
html[data-menu-scope="tenant"] .nav-link.scope-head,
html[data-menu-scope="head"] .nav-link.scope-tenant,
html[data-menu-scope="tenant"] .nav-group.scope-head,
html[data-menu-scope="head"] .nav-group.scope-tenant { display: none; }

.pkg-hint { margin: -2px 0 12px; }

.data-table .col-usdt { width: 140px; text-align: left; }

.field:disabled, .field.is-disabled { background: var(--bg); color: var(--text-muted); cursor: not-allowed; opacity: 0.65; }

/* Input with an attached small button (e.g. rate + refresh). */
.input-btn { display: flex; margin-bottom: 12px; }
.input-btn .field { flex: 1; margin-bottom: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.rate-refresh { border-top-left-radius: 0; border-bottom-left-radius: 0; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; }
/* Spin the refresh icon while the fetch is in flight — keep it an icon, not the
   global overlay spinner. */
.rate-refresh.btn-loading svg { animation: btnspin .6s linear infinite; }
.rate-refresh.btn-spinning { color: #fff; }
.rate-refresh.btn-spinning > * { visibility: visible; }
.rate-refresh.btn-spinning::after { display: none; }

.ctopup-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; align-items: stretch; }
@media (max-width: 1400px) { .ctopup-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1040px) { .ctopup-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .ctopup-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ctopup-pkg { display: flex; flex-direction: column; gap: 10px; }
/* Subscription plan cards: wider than top-up packages so benefits stay readable. */
.plan-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important; }

/* Slim current-plan strip (not a full card — a quiet status line). */
.plan-current { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: var(--radius); margin-bottom: 16px; }
.plan-current-label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.plan-current-name { font-weight: 600; }
.plan-current-days { margin-left: auto; font-size: 12px; }

/* Card: centered header (name + tier pill + prominent price), key/value
   benefits, action pinned to the bottom. */
.plan-card { gap: 8px; }
.ctopup-pkg.plan-active { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.plan-top { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.plan-name { font-size: 15px; }
.plan-tier-wrap { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; }
.plan-price { margin-top: 2px; }
.plan-price-num { font-size: 26px; font-weight: 800; color: var(--primary); letter-spacing: -0.01em; }
.plan-price-ccy { font-size: 13px; font-weight: 600; color: var(--primary); }
.plan-price-dur { font-size: 12px; }
.plan-benefits { list-style: none; margin: 4px 0; padding: 0; display: flex; flex-direction: column; font-size: 13px; }
.plan-benefits li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.plan-benefits li:last-child { border-bottom: none; }
.plan-bval { font-weight: 600; }
.plan-usdt { font-size: 12px; }
.plan-action { margin-top: auto; padding-top: 4px; }
.plan-current-btn, .plan-current-btn:disabled { color: var(--primary); border-color: var(--primary); background: var(--surface); opacity: 1; cursor: default; font-weight: 600; }
.ctopup-usdt { text-align: center; line-height: 1; }
.ctopup-price-num { font-size: 28px; font-weight: 800; color: var(--text); letter-spacing: -.5px; }
.ctopup-price-ccy { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.ctopup-calc { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 10px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.ctopup-row { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; }
.ctopup-row dt { color: var(--text-muted); margin: 0; white-space: nowrap; }
.ctopup-row dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.ctopup-coin-label { font-size: 11px; color: var(--text-muted); text-align: center; }
.ctopup-coin { font-size: 24px; font-weight: 800; color: var(--primary); text-align: center; font-variant-numeric: tabular-nums; word-break: break-word; line-height: 1.15; }
.ctopup-coin-unit { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.ctopup-pay { margin-top: auto; }
.ctopup-links { display: flex; gap: 8px; }

.topup-picker { margin-left: auto; }
.topup-picker .select-trigger { min-width: 220px; }

.topup-sec { margin: 20px 0 12px; }
.topup-sec:first-child { margin-top: 0; }

.ctopup-price-label { font-size: 11px; color: var(--text-muted); text-align: center; text-transform: uppercase; letter-spacing: .04em; margin-bottom: -4px; }

.cf-list { margin: 0; }
.cf-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--border); font-size: 13px; }
.cf-row:first-child { border-top: 1px solid var(--border); }
.cf-row dt { color: var(--text-muted); margin: 0; }
.cf-row dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.topup-confirm-total { display: flex; justify-content: space-between; align-items: center; margin: 16px 0 4px; padding: 12px 2px 0; }
.topup-confirm-total span { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.topup-confirm-total b { font-size: 22px; font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; }

.ctopup-custom { border-style: dashed; justify-content: center; text-align: center; }
.ctopup-custom-title { font-size: 15px; font-weight: 700; }
.ctopup-custom-hint { font-size: 12px; color: var(--text-muted); margin: 6px 0 0; }

.ct-modes { display: flex; gap: 4px; padding: 3px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 12px; }
.ct-mode { flex: 1; padding: 7px; font-size: 13px; font-weight: 600; color: var(--text-muted); background: transparent; border: none; border-radius: 6px; cursor: pointer; }
.ct-mode.active { background: var(--primary); color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.ct-preview { margin: 12px 0; }
.field-err { color: var(--danger); font-size: 12px; margin: 6px 0 0; }

/* Skeleton loaders (components/skeleton.templ). Shown the instant a page or
   tab navigation starts, mirroring the shape of what will render (title, stat
   cards, table rows) — never a spinner over content. Buttons keep their own
   btn-loading spinner; content gets skeletons. */
.sk { background: var(--border); border-radius: 4px; animation: skpulse 1.2s ease-in-out infinite; }
@keyframes skpulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
/* Soft entrance: the skeleton is injected only after a 150ms delay (admin.js),
   and fades in instead of popping — no jarring flash on borderline latencies. */
.sk-wrap, .sk-table { animation: skfade .15s ease-out; }
@keyframes skfade { from { opacity: 0; } to { opacity: 1; } }
/* Fixed-height bars matching the real controls they stand in for:
   h14 card titles, h16 page title, h20 stat values, h28 pager buttons,
   h34 inputs/selects/range picker (filter-bar control height). */
.sk-h14 { height: 14px; } .sk-h16 { height: 16px; } .sk-h20 { height: 20px; }
.sk-h28 { height: 28px; } .sk-h34 { height: 34px; }
/* Table placeholder: same surface/border/padding rhythm as .data-table rows
   (10px padding, hairline separators). sk-table = bare fragment (tab panels);
   sk-table-card adds the card chrome list pages draw around their tables. */
.sk-table { background: var(--surface); padding: 2px 0; }
.sk-table-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
.sk-thead { height: 32px; border-radius: 6px; margin-bottom: 4px; }
.sk-row { display: flex; gap: 16px; padding: 12px 12px 12px 0; border-bottom: 1px solid #f1f5f9; }
.sk-line { height: 12px; flex: 1; }
.sk-w15 { max-width: 15%; } .sk-w20 { max-width: 20%; } .sk-w25 { max-width: 25%; }
.sk-w30 { max-width: 30%; }

/* --- Register-player modal (Task 10.14) --- */
.reg-form { display: flex; flex-direction: column; gap: 12px; }
.reg-cell { display: flex; flex-direction: column; gap: 4px; }
.reg-cell > label { font-size: 12px; font-weight: 600; color: var(--text); }
.req-star { color: var(--danger); }
.reg-section { margin: 6px 0 -2px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); border-top: 1px solid var(--border); padding-top: 12px; }
.reg-input { position: relative; display: flex; align-items: center; }
.reg-input .field { flex: 1; padding-right: 32px; }
.reg-ok { position: absolute; right: 9px; display: inline-flex; color: var(--success, #16a34a); pointer-events: none; }
.field.ok { border-color: var(--success, #16a34a); }
.field.invalid { border-color: var(--danger); }

/* Register-player dialog is a two-column form — a touch wider than the default
   480px modal so the paired fields breathe (Task 10.14 revision). */
.modal:has(.reg-form) { width: 500px; }

/* Referral type form (rev-5): a consistent 12px vertical rhythm — stacked
   .form-grid blocks and checkbox rows had no margins of their own, so labels
   hugged the field above them. */
.ref-form .form-grid { margin: 0 0 12px; }
.ref-form .ck-row { margin: 4px 0 12px; }
.ref-form .form-grid:last-child, .ref-form .ck-row:last-child { margin-bottom: 0; }
.ref-remarks { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; max-width: 720px; }
.ref-remarks h4 { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); margin: 0 0 12px; }
.ref-remarks b { display: block; font-size: 13px; margin-bottom: 3px; }
.ref-remarks p { font-size: 13.5px; color: var(--text); margin: 0 0 14px; line-height: 1.65; }
.ref-remarks p:last-child { margin-bottom: 0; }
/* Live preview: readable sizes; sticky offset clears the 56px topbar. */
.ref-preview { position: sticky; top: 72px; font-size: 14px; }
.ref-preview .section-title { font-size: 15px; }
.ref-preview .num { font-variant-numeric: tabular-nums; font-size: 15px; }
.money-wrap { display: flex; align-items: stretch; }
.money-wrap .money-prefix { display: flex; align-items: center; padding: 0 10px; background: var(--bg); border: 1px solid var(--border); border-right: 0; border-radius: var(--radius) 0 0 var(--radius); font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.money-wrap .field { border-radius: 0 var(--radius) var(--radius) 0; margin: 0; }

/* Referral affiliate list: pin toggle + review-queue inline forms. */
.data-table .col-pin { width: 34px; text-align: center; }
.pin-btn { border: none; background: none; cursor: pointer; font-size: 16px; line-height: 1; color: var(--text-muted); padding: 2px 4px; }
.pin-btn:hover { color: #f59e0b; }
.pin-btn.pinned { color: #f59e0b; }
.refreq-form { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.refreq-form .select { min-width: 170px; }
/* Row that just got (un)pinned: the view transition animates it to its new
   slot; this highlight fade marks WHICH row moved. */
@keyframes refRowFlash {
	from { background: #fef9c3; }
	to { background: transparent; }
}
.data-table tr.row-flash td { animation: refRowFlash .6s ease-out; }
/* Table-row identity-photo preview: small thumb, click opens the lightbox. */
.thumb-sm { width: auto; max-width: 72px; height: 36px; }

/* --- Affiliate portal (/affiliate/*) -------------------------------------
   This entire visual system is rooted at .affiliate-portal. It intentionally
   does not reuse the company/head .app, .sidebar, .topbar, or .content shell. */
.affiliate-portal {
	--aff-ink: #222224;
	--aff-canvas: #e8e8e6;
	--aff-lime: #d7fa4c;
	--aff-lavender: #b8adef;
	--aff-muted: #777779;
	height: 100vh;
	height: 100dvh;
	padding: 0;
	overflow: hidden;
	background: var(--aff-canvas);
	color: var(--aff-ink);
}
.affiliate-portal .aff-impersonate {
	margin: 9px 8px 0;
	padding: 6px 8px;
	border: 1px solid rgba(215, 250, 76, .25);
	border-radius: 7px;
	background: rgba(215, 250, 76, .1);
	color: var(--aff-lime);
	font-size: 8px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .35px;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
}
.affiliate-portal .aff-frame {
	display: grid;
	grid-template-columns: 238px minmax(0, 1fr);
	width: 100%;
	max-width: none;
	height: 100vh;
	height: 100dvh;
	min-height: 0;
	margin: 0;
	overflow: hidden;
	border: 0;
	border-radius: 0;
	background: var(--aff-ink);
	box-shadow: none;
}
.affiliate-portal .aff-sidebar {
	position: relative;
	display: flex;
	min-width: 0;
	flex-direction: column;
	padding: 24px 17px 18px;
	background: var(--aff-ink);
	color: #f8f8f5;
}
.affiliate-portal .aff-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 8px;
}
.affiliate-portal .aff-brand-mark {
	display: grid;
	width: 33px;
	height: 33px;
	flex: 0 0 33px;
	place-items: center;
	border-radius: 11px;
	background: var(--aff-lime);
	color: var(--aff-ink);
}
.affiliate-portal .aff-brand-mark svg { width: 21px; height: 21px; }
.affiliate-portal .aff-logo { display: block; color: #fff; font-size: 17px; font-weight: 750; line-height: 1.1; letter-spacing: -.2px; }
.affiliate-portal .aff-tag { display: block; margin-top: 4px; color: #929294; font-size: 9px; font-weight: 650; line-height: 1; letter-spacing: 1px; text-transform: uppercase; }
.affiliate-portal .aff-nav { display: grid; gap: 8px; margin-top: 36px; }
.affiliate-portal .aff-nav a {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 45px;
	padding: 0 13px;
	border-radius: 999px;
	color: #c7c7c6;
	font-size: 13px;
	font-weight: 560;
	transition: background-color .15s ease, color .15s ease;
}
.affiliate-portal .aff-nav a:hover { color: #fff; }
.affiliate-portal .aff-nav a.active { background: #f8f8f5; color: var(--aff-ink); }
.affiliate-portal .aff-nav-icon {
	display: grid;
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
	place-items: center;
	color: currentColor;
	transition: color .15s ease;
}
.affiliate-portal .aff-nav-icon svg { display: block; width: 20px; height: 20px; }
.affiliate-portal .aff-nav a.active .aff-nav-icon { color: var(--aff-ink); }
.affiliate-portal .aff-nav-label { line-height: 1.2; }
.affiliate-portal .aff-sidebar-spacer { flex: 1; min-height: 28px; }
.affiliate-portal .aff-user { display: flex; align-items: center; gap: 10px; padding: 14px 8px 0; border-top: 0; }
.affiliate-portal .aff-avatar {
	display: grid;
	width: 36px;
	height: 36px;
	flex: 0 0 36px;
	place-items: center;
	border-radius: 50%;
	background: var(--aff-lavender);
	color: var(--aff-ink);
}
.affiliate-portal .aff-avatar svg { width: 21px; height: 21px; }
.affiliate-portal .aff-user-copy { min-width: 0; flex: 1; }
.affiliate-portal .aff-user-copy strong,
.affiliate-portal .aff-user-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.affiliate-portal .aff-username { color: #fff; font-size: 12.5px; }
.affiliate-portal .aff-user-copy small { margin-top: 2px; color: #868688; font-size: 9.5px; }
.affiliate-portal .aff-user form { flex: 0 0 auto; }
.affiliate-portal .aff-logout {
	display: grid;
	width: 32px;
	height: 32px;
	padding: 0;
	place-items: center;
	border: 0;
	border-radius: 50%;
	background: #343436;
	color: #bcbcbc;
	cursor: pointer;
}
.affiliate-portal .aff-logout:hover { background: #464648; color: #fff; }
.affiliate-portal .aff-logout svg { width: 16px; height: 16px; }
.affiliate-portal .aff-workspace { display: flex; min-width: 0; min-height: 0; flex-direction: column; overflow: hidden; border-radius: 26px 0 0 26px; background: var(--aff-canvas); }
.affiliate-portal .aff-main { display: flex; width: 100%; max-width: 1680px; min-height: 0; flex: 1; flex-direction: column; margin: 0 auto; padding: 28px 28px 18px; overflow: hidden; }
.affiliate-portal .aff-footer { flex: 0 0 auto; padding: 2px 28px 12px; color: #999995; font-size: 10.5px; text-align: right; }
.affiliate-portal .aff-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.affiliate-portal .aff-hero h1 { margin: 0; font-size: clamp(27px, 3vw, 40px); font-weight: 520; line-height: 1.06; letter-spacing: -1.7px; }
.affiliate-portal .aff-hero-sub { margin: 7px 0 0; color: var(--aff-muted); font-size: 12px; }
.affiliate-portal .aff-code-chip {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 10px 15px;
	border: 1px solid #d2d2cf;
	border-radius: 999px;
	background: #f7f7f5;
}
.affiliate-portal .aff-code-label { color: var(--aff-muted); font-size: 10.5px; }
.affiliate-portal .aff-code-value { color: var(--aff-ink); font-family: ui-monospace, monospace; font-size: 14px; font-weight: 800; letter-spacing: 1.2px; cursor: copy; }
.affiliate-portal .aff-bento { display: grid; min-height: 0; flex: 1; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: minmax(0, 1.08fr) minmax(0, .92fr); gap: 12px; overflow: hidden; }
.affiliate-portal .aff-card,
.affiliate-portal .aff-stat { border: 1px solid #d7d7d3; border-radius: 22px; background: #f9f9f7; }
.affiliate-portal .aff-card { padding: 18px 20px; }
.affiliate-portal .aff-card-heading { display: flex; align-items: center; gap: 10px; color: #29292b; font-size: 13.5px; font-weight: 700; line-height: 1.2; }
.affiliate-portal .aff-card-icon { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border: 1px solid rgba(34, 34, 36, .08); border-radius: 11px; background: #3a3a3c; color: #fff; }
.affiliate-portal .aff-card-icon-lime { background: #efffc0; color: #333; }
.affiliate-portal .aff-card-icon-lavender { background: #e7e2ff; color: #403872; }
.affiliate-portal .aff-icon-svg { display: block; width: 18px; height: 18px; }
.affiliate-portal .aff-earnings-card { grid-column: span 7; min-height: 0; overflow: hidden; }
.affiliate-portal .aff-earnings-body { display: flex; height: calc(100% - 34px); min-height: 0; align-items: center; justify-content: space-between; gap: 20px; }
.affiliate-portal .aff-earnings-copy { position: relative; z-index: 1; display: flex; min-width: 0; flex-direction: column; gap: 7px; padding-left: 7px; }
.affiliate-portal .aff-earnings-value { max-width: 360px; overflow-wrap: anywhere; font-size: clamp(25px, 3.1vw, 42px); line-height: 1; letter-spacing: -1.7px; }
.affiliate-portal .aff-stat-sub { color: #6f6f72; font-size: 11.5px; font-weight: 500; line-height: 1.4; }
.affiliate-portal .aff-earnings-visual { position: relative; width: 238px; height: 180px; flex: 0 0 238px; }
.affiliate-portal .aff-ring { position: absolute; display: block; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(34, 34, 36, .08); }
.affiliate-portal .aff-ring-lavender { top: 1px; left: 0; width: 140px; height: 140px; background: var(--aff-lavender); }
.affiliate-portal .aff-ring-dark { top: 12px; right: 0; width: 126px; height: 126px; background: var(--aff-ink); }
.affiliate-portal .aff-ring-lime { right: 72px; bottom: 0; width: 84px; height: 84px; background: var(--aff-lime); }
.affiliate-portal .aff-quick-stats { display: grid; min-height: 0; grid-column: span 5; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; }
.affiliate-portal .aff-stat { display: grid; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; gap: 7px; padding: 13px 16px; overflow: hidden; }
.affiliate-portal .aff-stat:nth-child(3) { grid-column: 1 / -1; }
.affiliate-portal .aff-stat-lavender { background: #e3def8; border-color: #d4ceef; }
.affiliate-portal .aff-stat-lime { background: #edffc0; border-color: #dcefae; }
.affiliate-portal .aff-stat-top { display: flex; align-items: center; gap: 9px; }
.affiliate-portal .aff-stat-symbol { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border: 1px solid rgba(34, 34, 36, .1); border-radius: 10px; background: rgba(255, 255, 255, .55); color: #2d2d30; }
.affiliate-portal .aff-stat-symbol .aff-icon-svg { width: 16px; height: 16px; }
.affiliate-portal .aff-stat-label { color: #454548; font-size: 12px; font-weight: 650; line-height: 1.3; }
.affiliate-portal .aff-stat-value { align-self: center; overflow-wrap: anywhere; color: #18181a; font-size: clamp(22px, 2vw, 30px); font-weight: 720; line-height: 1.05; letter-spacing: -.9px; }
.affiliate-portal .aff-program-card { grid-column: span 5; min-height: 0; overflow: hidden; border-color: #2f2f31; background: var(--aff-ink); color: #f7f7f5; }
.affiliate-portal .aff-card-heading-dark { color: #f7f7f5; }
.affiliate-portal .aff-program-card .aff-card-heading { color: #fff; }
.affiliate-portal .aff-program-card .aff-card-icon { border-color: #525255; background: #3b3b3d; color: var(--aff-lime); }
.affiliate-portal .aff-program-name { margin: 24px 0 9px; color: var(--aff-lime); font-size: clamp(20px, 2.2vw, 29px); font-weight: 560; letter-spacing: -.8px; }
.affiliate-portal .aff-deal { margin: 0; }
.affiliate-portal .aff-deal div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid #3b3b3d; font-size: 12.5px; line-height: 1.25; }
.affiliate-portal .aff-deal div:last-child { border-bottom: 0; }
.affiliate-portal .aff-deal dt { color: #b1b1b4; }
.affiliate-portal .aff-deal dd { margin: 0; color: #fff; font-weight: 700; text-align: right; }
.affiliate-portal .aff-program-card .aff-muted { color: #9b9b9d; }
.affiliate-portal .aff-recent-card { display: flex; min-width: 0; min-height: 0; grid-column: span 7; flex-direction: column; overflow: hidden; }
.affiliate-portal .aff-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.affiliate-portal .aff-link { display: inline-flex; align-items: center; gap: 5px; color: #3f3f42; font-size: 12px; font-weight: 700; }
.affiliate-portal .aff-link:hover { color: #000; }
.affiliate-portal .aff-link-icon { display: inline-grid; place-items: center; }
.affiliate-portal .aff-link-icon .aff-icon-svg { width: 14px; height: 14px; }
.affiliate-portal .aff-table-wrap { width: 100%; min-height: 0; overflow: hidden; }
.affiliate-portal .aff-table { width: 100%; border-collapse: separate; border-spacing: 0; color: #2d2d30; font-size: 12.5px; }
.affiliate-portal .aff-table th { padding: 8px 9px 11px; border-bottom: 1px solid #d8d8d5; color: #737376; font-size: 10px; font-weight: 750; letter-spacing: .65px; text-align: left; text-transform: uppercase; white-space: nowrap; }
.affiliate-portal .aff-table thead th { position: sticky; z-index: 3; top: 0; background: #f9f9f7; box-shadow: 0 1px 0 #d8d8d5; }
.affiliate-portal .aff-table td { padding: 11px 9px; border-bottom: 1px solid #e2e2df; font-weight: 520; white-space: nowrap; }
.affiliate-portal .aff-table tbody tr:last-child td { border-bottom: 0; }
.affiliate-portal .aff-table tbody tr:hover td { background: #f4f4f0; }
.affiliate-portal .aff-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.affiliate-portal .aff-table .aff-col-number { width: 52px; min-width: 52px; color: #858588; text-align: center; font-variant-numeric: tabular-nums; }
.affiliate-portal .aff-empty-cell { padding: 28px 12px !important; color: #858588; text-align: center; }
.affiliate-portal .aff-mono { font-family: ui-monospace, monospace; font-size: 11.5px; font-weight: 650; }
.affiliate-portal .aff-cell-sub { margin-top: 3px; color: #858588; font-size: 10px; font-weight: 500; }
.affiliate-portal .aff-muted { color: #92928f; }
.affiliate-portal .aff-badge { display: inline-block; padding: 5px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 750; }
.affiliate-portal .aff-badge-success { background: #e5f9a7; color: #3e5313; }
.affiliate-portal .aff-badge-warning { background: #fff0b8; color: #775409; }
.affiliate-portal .aff-badge-danger { background: #ffe0dc; color: #8d3025; }
.affiliate-portal .aff-history-heading { align-items: center; }
.affiliate-portal .aff-history-filters {
	--primary: #222224;
	--primary-hover: #363638;
	--surface: #fff;
	--border: #d4d4d0;
	--bg: #f1f1ed;
	--text: #222224;
	--text-muted: #747477;
	display: flex;
	min-width: 0;
	flex: 0 0 auto;
	align-items: center;
	gap: 9px;
	margin-bottom: 12px;
	position: relative;
	z-index: 8;
}
.affiliate-portal .aff-history-search {
	display: flex;
	width: min(330px, 34vw);
	height: 44px;
	min-width: 220px;
	align-items: center;
	gap: 9px;
	padding: 0 13px;
	border: 1px solid #d4d4d0;
	border-radius: 12px;
	background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.affiliate-portal .aff-history-search:focus-within { border-color: #8d82ca; box-shadow: 0 0 0 3px rgba(184, 173, 239, .25); }
.affiliate-portal .aff-filter-icon { display: grid; flex: 0 0 auto; place-items: center; color: #77777a; }
.affiliate-portal .aff-filter-icon .aff-icon-svg { width: 17px; height: 17px; }
.affiliate-portal .aff-history-search input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: #222224; font: inherit; font-size: 12.5px; }
.affiliate-portal .aff-history-search input::placeholder { color: #929295; }
.affiliate-portal .aff-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.affiliate-portal .aff-history-filters .drp-trigger { min-width: 220px; height: 44px; justify-content: flex-start; padding: 0 13px; border-radius: 12px; font-size: 12.5px; font-weight: 600; }
.affiliate-portal .aff-history-filters .drp-caret { margin-left: auto; }
.affiliate-portal .aff-history-filters .drp-pop { z-index: 90; border-color: #cececa; border-radius: 16px; box-shadow: 0 18px 45px rgba(34, 34, 36, .18); }
.affiliate-portal .aff-history-filters .drp-day { border-radius: 8px; }
.affiliate-portal .aff-history-filters .drp-day.in { background: #e7e2ff; }
.affiliate-portal .aff-history-filters .drp-day.sel { background: #222224; color: #fff; }
.affiliate-portal .aff-history-filters .drp-day.today { outline-color: #8d82ca; }
.affiliate-portal .aff-history-filters .drp-preset:hover { background: #efffc0; }
.affiliate-portal .aff-history-filters .drp-apply { background: #222224; border-color: #222224; color: #fff; }
.affiliate-portal .aff-filter-submit,
.affiliate-portal .aff-filter-reset { display: inline-flex; height: 44px; align-items: center; justify-content: center; padding: 0 17px; border-radius: 12px; font-size: 12px; font-weight: 700; cursor: pointer; }
.affiliate-portal .aff-filter-submit { border: 1px solid #222224; background: #222224; color: #fff; }
.affiliate-portal .aff-filter-submit:hover { background: #363638; }
.affiliate-portal .aff-filter-reset { border: 1px solid #d4d4d0; background: #fff; color: #555558; }
.affiliate-portal .aff-filter-reset:hover { border-color: #99999c; color: #222224; }
.affiliate-portal .aff-history-card { display: flex; min-height: 0; flex: 1; flex-direction: column; overflow: hidden; }
.affiliate-portal .aff-history-card .aff-table-wrap { flex: 1; overflow: auto; }
.affiliate-portal .aff-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 20px; }
.affiliate-portal .aff-btn { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #d3d3cf; border-radius: 50%; background: #fff; color: var(--aff-ink); font-size: 13px; }
.affiliate-portal .aff-btn:hover { border-color: var(--aff-ink); }
.affiliate-portal .aff-btn .aff-icon-svg { width: 16px; height: 16px; }
.affiliate-portal .aff-member-filters { flex-wrap: wrap; }
.affiliate-portal .aff-member-segment { display: flex; height: 44px; min-width: 340px; gap: 3px; margin: 0; padding: 4px; border: 1px solid #d1d1cd; border-radius: 13px; background: #deded9; }
.affiliate-portal .aff-member-segment label { min-width: 0; flex: 1; cursor: pointer; }
.affiliate-portal .aff-member-segment input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.affiliate-portal .aff-member-segment label > span { display: flex; height: 34px; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border-radius: 9px; color: #69696c; font-size: 10.5px; font-weight: 700; line-height: 1; white-space: nowrap; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease; }
.affiliate-portal .aff-member-segment svg { width: 15px; height: 15px; flex: 0 0 15px; }
.affiliate-portal .aff-member-segment label:hover > span { color: #222224; }
.affiliate-portal .aff-member-segment input:checked + span { background: #222224; color: #fff; box-shadow: 0 3px 9px rgba(34, 34, 36, .18); }
.affiliate-portal .aff-member-segment input:focus-visible + span { outline: 2px solid #8d82ca; outline-offset: 1px; }
.affiliate-portal .aff-summary-grid { display: grid; flex: 0 0 auto; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.affiliate-portal .aff-summary-item { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 15px; border: 1px solid #d7d7d3; border-radius: 15px; background: rgba(249, 249, 247, .8); }
.affiliate-portal .aff-summary-item span { color: #6e6e71; font-size: 10.5px; font-weight: 650; }
.affiliate-portal .aff-summary-item strong { overflow-wrap: anywhere; color: #232325; font-size: 16px; font-weight: 750; text-align: right; }
.affiliate-portal .aff-summary-item small { color: #858588; font-size: 9px; font-weight: 650; }
.affiliate-portal .aff-list-card { min-height: 0; flex: 1; }
.affiliate-portal .aff-members-table { min-width: 980px; }
.affiliate-portal .aff-money-negative { color: #b13a31; }
/* Register-member action: the members hero's one button, sized like the filter
   controls so the row reads as a single toolbar. */
.affiliate-portal .aff-register-btn { display: inline-flex; height: 44px; align-items: center; gap: 9px; padding: 0 18px; border: 1px solid #222224; border-radius: 12px; background: #222224; color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
.affiliate-portal .aff-register-btn:hover { background: #363638; }
.affiliate-portal .aff-register-btn .aff-icon-svg { width: 16px; height: 16px; }
.affiliate-portal .aff-balance-chip { display: flex; align-items: center; gap: 12px; padding: 10px 15px; border: 1px solid #d4e99d; border-radius: 14px; background: #edffc0; }
.affiliate-portal .aff-balance-chip span { color: #596630; font-size: 10.5px; font-weight: 650; }
.affiliate-portal .aff-balance-chip strong { font-size: 17px; font-variant-numeric: tabular-nums; }
.affiliate-portal .aff-notice { flex: 0 0 auto; margin: -7px 0 12px; padding: 10px 13px; border: 1px solid; border-radius: 12px; font-size: 12px; font-weight: 600; }
.affiliate-portal .aff-notice-success { border-color: #cce78b; background: #efffc7; color: #415a16; }
.affiliate-portal .aff-notice-danger { border-color: #f0b9b3; background: #fff0ed; color: #8a3128; }
.affiliate-portal .aff-withdraw-grid { display: grid; min-height: 0; flex: 0 0 auto; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: 12px; margin-bottom: 12px; }
.affiliate-portal .aff-withdraw-form-card,
.affiliate-portal .aff-bank-detail-card { min-height: 210px; max-height: 270px; overflow: hidden; }
.affiliate-portal .aff-withdraw-form-card { display: flex; flex-direction: column; }
.affiliate-portal .aff-payout-mode { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 9px; padding: 8px 11px; border-radius: 10px; background: #f0f0ec; }
.affiliate-portal .aff-payout-mode span { color: #77777a; font-size: 10.5px; }
.affiliate-portal .aff-payout-mode strong { font-size: 11.5px; }
.affiliate-portal .aff-withdraw-form { display: grid; min-height: 0; grid-template-columns: minmax(190px, .7fr) minmax(250px, 1.3fr) auto; align-items: end; gap: 12px; }
.affiliate-portal .aff-withdraw-amount > span,
.affiliate-portal .aff-bank-choice-label { display: block; margin-bottom: 6px; color: #57575a; font-size: 10.5px; font-weight: 700; }
.affiliate-portal .aff-withdraw-amount div { display: flex; height: 44px; align-items: center; overflow: hidden; border: 1px solid #cececa; border-radius: 11px; background: #fff; }
.affiliate-portal .aff-withdraw-amount input { width: 100%; min-width: 0; height: 100%; padding: 0 11px; border: 0; outline: 0; background: transparent; font-size: 14px; font-weight: 700; }
.affiliate-portal .aff-withdraw-amount b { padding: 0 11px; color: #767679; font-size: 10px; }
.affiliate-portal .aff-form-hint { grid-column: 1; margin: -7px 0 0; color: #77777a; font-size: 9.5px; line-height: 1.35; }
.affiliate-portal .aff-bank-choice-label { grid-column: 2; grid-row: 1; align-self: start; }
.affiliate-portal .aff-bank-options { grid-column: 2; grid-row: 1 / span 2; max-height: 92px; margin-top: 20px; overflow: auto; }
.affiliate-portal .aff-bank-option { display: flex; min-width: 0; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid transparent; border-radius: 10px; cursor: pointer; }
.affiliate-portal .aff-bank-option:has(input:checked) { border-color: #b9adf0; background: #f0edff; }
.affiliate-portal .aff-bank-option:has(input:disabled) { opacity: .58; cursor: not-allowed; }
.affiliate-portal .aff-bank-option input { position: absolute; opacity: 0; pointer-events: none; }
.affiliate-portal .aff-bank-radio { width: 14px; height: 14px; flex: 0 0 14px; border: 1.5px solid #a3a3a6; border-radius: 50%; box-shadow: inset 0 0 0 3px #fff; }
.affiliate-portal .aff-bank-option input:checked + .aff-bank-radio { background: #6256a6; border-color: #6256a6; }
.affiliate-portal .aff-bank-option-copy { min-width: 0; flex: 1; }
.affiliate-portal .aff-bank-option-copy strong { display: flex; min-width: 0; align-items: baseline; overflow: hidden; font-size: 11px; white-space: nowrap; }
.affiliate-portal .aff-bank-option-holder { min-width: 0; overflow: hidden; color: #77777a; font-size: 9.5px; font-weight: 500; text-overflow: ellipsis; }
.affiliate-portal .aff-bank-option-number {
	display: block;
	margin-top: 3px;
	overflow-wrap: anywhere;
	color: #333336;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .45px;
	line-height: 1.25;
	white-space: normal;
}
.affiliate-portal .aff-verified,
.affiliate-portal .aff-unverified { flex: 0 0 auto; padding: 3px 6px; border-radius: 999px; font-size: 8.5px; font-weight: 750; }
.affiliate-portal .aff-verified { background: #e5f9a7; color: #3e5313; }
.affiliate-portal .aff-unverified { background: #fff0b8; color: #775409; }
.affiliate-portal .aff-withdraw-submit { height: 44px; padding: 0 16px; border: 0; border-radius: 11px; background: #222224; color: #fff; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.affiliate-portal .aff-withdraw-submit:hover { background: #363638; }
.affiliate-portal .aff-withdraw-submit:disabled { background: #aaa; cursor: not-allowed; }
.affiliate-portal .aff-inline-warning { margin-top: 12px; padding: 9px 11px; border-radius: 10px; background: #fff0c9; color: #76560a; font-size: 10.5px; line-height: 1.4; }
.affiliate-portal .aff-bank-detail-card { display: flex; flex-direction: column; padding: 16px; }
.affiliate-portal .aff-bank-section-heading { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 11px; }
.affiliate-portal .aff-bank-section-heading p { max-width: 220px; margin: 0; color: #77777a; font-size: 9.5px; line-height: 1.35; text-align: right; }
.affiliate-portal .aff-bank-card-list { display: flex; min-height: 0; flex: 1; gap: 9px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.affiliate-portal .aff-bank-visual { position: relative; display: flex; min-width: 100%; min-height: 150px; flex: 0 0 100%; flex-direction: column; justify-content: space-between; padding: 14px 15px 12px; overflow: hidden; scroll-snap-align: start; border: 1px solid #3d3d40; border-radius: 17px; background: linear-gradient(145deg, #202023 0%, #2d2d31 58%, #202023 100%); color: #fff; box-shadow: 0 10px 24px rgba(34, 34, 36, .15); }
.affiliate-portal .aff-bank-orbit { position: absolute; display: block; border-radius: 50%; pointer-events: none; }
.affiliate-portal .aff-bank-orbit-one { top: -54px; right: -35px; width: 132px; height: 132px; border: 26px solid rgba(184, 173, 239, .16); }
.affiliate-portal .aff-bank-orbit-two { right: 64px; bottom: -47px; width: 90px; height: 90px; background: rgba(215, 250, 76, .09); }
.affiliate-portal .aff-bank-visual-top,
.affiliate-portal .aff-bank-visual-bottom { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.affiliate-portal .aff-bank-brand { display: flex; min-width: 0; align-items: center; gap: 9px; }
.affiliate-portal .aff-bank-brand-icon { display: grid; width: 31px; height: 31px; flex: 0 0 31px; place-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(255,255,255,.08); color: var(--aff-lime); }
.affiliate-portal .aff-bank-brand-icon .aff-icon-svg { width: 16px; height: 16px; }
.affiliate-portal .aff-bank-brand > span:last-child { min-width: 0; }
.affiliate-portal .aff-bank-brand small,
.affiliate-portal .aff-bank-brand strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.affiliate-portal .aff-bank-brand small { margin-bottom: 2px; color: #a9a9ad; font-size: 7.5px; font-weight: 650; letter-spacing: .7px; text-transform: uppercase; }
.affiliate-portal .aff-bank-brand strong { font-size: 13px; font-weight: 750; }
.affiliate-portal .aff-bank-tags { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.affiliate-portal .aff-bank-tag { padding: 4px 7px; border: 1px solid transparent; border-radius: 999px; font-size: 7.5px; font-weight: 800; line-height: 1; }
.affiliate-portal .aff-bank-tag-primary { border-color: rgba(184,173,239,.28); background: rgba(184,173,239,.16); color: #dcd6ff; }
.affiliate-portal .aff-bank-tag-verified { border-color: rgba(215,250,76,.28); background: rgba(215,250,76,.13); color: #e7ff8a; }
.affiliate-portal .aff-bank-tag-warning { border-color: rgba(255,208,92,.25); background: rgba(255,208,92,.12); color: #ffe29a; }
.affiliate-portal .aff-bank-number-block { position: relative; z-index: 1; margin: 10px 0 8px; }
.affiliate-portal .aff-bank-number-block > span { display: block; margin-bottom: 3px; color: #8f8f94; font-size: 8px; font-weight: 650; }
.affiliate-portal .aff-bank-number-block > div { display: flex; align-items: center; justify-content: space-between; gap: 9px; }
.affiliate-portal .aff-bank-number-block .aff-bank-number-value { min-width: 0; overflow-wrap: anywhere; color: #fff; font-size: clamp(14px, 1.2vw, 18px); font-weight: 700; letter-spacing: 1.25px; line-height: 1.2; white-space: normal; }
.affiliate-portal .aff-bank-number-block button { display: grid; width: 28px; height: 28px; flex: 0 0 28px; padding: 0; place-items: center; border: 1px solid rgba(255,255,255,.12); border-radius: 9px; background: rgba(255,255,255,.07); color: #d4d4d7; cursor: pointer; }
.affiliate-portal .aff-bank-number-block button:hover { background: rgba(255,255,255,.13); color: #fff; }
.affiliate-portal .aff-bank-number-block button .aff-icon-svg { width: 14px; height: 14px; }
.affiliate-portal .aff-bank-visual-bottom > span:first-child { min-width: 0; }
.affiliate-portal .aff-bank-visual-bottom small,
.affiliate-portal .aff-bank-visual-bottom strong { display: block; }
.affiliate-portal .aff-bank-visual-bottom small { color: #8f8f94; font-size: 7.5px; }
.affiliate-portal .aff-bank-visual-bottom strong { max-width: 210px; margin-top: 2px; overflow: hidden; font-size: 10px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.affiliate-portal .aff-bank-security { display: flex; align-items: center; gap: 4px; color: #bdbdc1; }
.affiliate-portal .aff-bank-security .aff-icon-svg { width: 12px; height: 12px; color: var(--aff-lime); }
.affiliate-portal .aff-bank-history-number { color: #505053; letter-spacing: .25px; }
.affiliate-portal .aff-bank-empty { display: grid; min-height: 0; flex: 1; place-items: center; align-content: center; color: #858588; text-align: center; }
.affiliate-portal .aff-bank-empty .aff-icon-svg { width: 25px; height: 25px; margin-bottom: 7px; }
.affiliate-portal .aff-bank-empty strong { color: #444447; font-size: 12px; }
.affiliate-portal .aff-bank-empty p { max-width: 330px; margin: 5px 0 0; font-size: 9.5px; line-height: 1.4; }
.affiliate-portal .aff-withdraw-history { min-height: 0; flex: 1; }
.affiliate-portal .aff-withdraw-history .aff-section-heading { flex: 0 0 auto; }
.affiliate-portal .aff-withdraw-table { min-width: 800px; }
@media (max-width: 1120px) {
	.affiliate-portal .aff-frame { grid-template-columns: 210px minmax(0, 1fr); }
	.affiliate-portal .aff-earnings-card { grid-column: span 6; }
	.affiliate-portal .aff-quick-stats { grid-column: span 6; }
	.affiliate-portal .aff-earnings-visual { width: 190px; flex-basis: 190px; transform: scale(.88); transform-origin: center right; }
	.affiliate-portal .aff-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.affiliate-portal .aff-withdraw-form { grid-template-columns: minmax(170px, .8fr) minmax(220px, 1.2fr); }
	.affiliate-portal .aff-withdraw-submit { grid-column: 1 / -1; height: 38px; }
	.affiliate-portal .aff-withdraw-form-card,
	.affiliate-portal .aff-bank-detail-card { max-height: 300px; }
}
@media (max-width: 880px) {
	.affiliate-portal .aff-frame { display: block; }
	.affiliate-portal .aff-sidebar { display: grid; grid-template-columns: auto minmax(250px, 1fr) auto; align-items: center; gap: 18px; padding: 14px 18px; }
	.affiliate-portal .aff-workspace { height: calc(100dvh - 72px); border-radius: 0; }
	.affiliate-portal .aff-brand { padding: 0; }
	.affiliate-portal .aff-nav { display: flex; justify-content: center; margin: 0; }
	.affiliate-portal .aff-nav a { min-height: 40px; padding: 0 10px; font-size: 11px; }
	.affiliate-portal .aff-sidebar-spacer { display: none; }
	.affiliate-portal .aff-user { padding: 0; border: 0; }
	.affiliate-portal .aff-user-copy { display: none; }
	.affiliate-portal .aff-impersonate { position: absolute; top: 20px; right: 62px; margin: 0; padding: 5px 7px; }
	.affiliate-portal .aff-quick-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
	.affiliate-portal .aff-stat:nth-child(3) { grid-column: auto; }
	.affiliate-portal .aff-earnings-visual { width: 130px; flex-basis: 130px; transform: scale(.68); }
	.affiliate-portal .aff-withdraw-grid { grid-template-columns: minmax(0, 1fr) minmax(260px, .8fr); }
}
@media (max-width: 640px) {
	.affiliate-portal { padding: 0; background: var(--aff-canvas); }
	.affiliate-portal .aff-frame { height: 100dvh; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
	.affiliate-portal .aff-sidebar { grid-template-columns: 1fr auto; gap: 10px; padding: 12px 14px; }
	.affiliate-portal .aff-workspace { height: calc(100dvh - 104px); }
	.affiliate-portal .aff-brand-mark { width: 30px; height: 30px; flex-basis: 30px; }
	.affiliate-portal .aff-logo { font-size: 15px; }
	.affiliate-portal .aff-tag { font-size: 8px; }
	.affiliate-portal .aff-nav { grid-column: 1 / -1; grid-row: 2; justify-content: stretch; }
	.affiliate-portal .aff-nav a { flex: 1; justify-content: center; padding: 0 8px; }
	.affiliate-portal .aff-nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
	.affiliate-portal .aff-user { grid-column: 2; grid-row: 1; }
	.affiliate-portal .aff-avatar { display: none; }
	.affiliate-portal .aff-impersonate { top: 17px; right: 56px; }
	.affiliate-portal .aff-main { padding: 22px 14px; overflow-y: auto; }
	.affiliate-portal .aff-footer { padding-right: 14px; }
	.affiliate-portal .aff-hero { align-items: flex-start; flex-direction: column; }
	.affiliate-portal .aff-hero h1 { font-size: 29px; }
	.affiliate-portal .aff-code-chip { width: 100%; justify-content: space-between; }
	.affiliate-portal .aff-bento { display: flex; flex: 0 0 auto; flex-direction: column; overflow: visible; }
	.affiliate-portal .aff-quick-stats { display: flex; flex-direction: column; }
	.affiliate-portal .aff-stat { min-height: 102px; }
	.affiliate-portal .aff-earnings-card { min-height: 310px; }
	.affiliate-portal .aff-earnings-body { align-items: flex-start; flex-direction: column; padding-top: 26px; }
	.affiliate-portal .aff-earnings-visual { align-self: center; width: 230px; flex-basis: 150px; transform: scale(.85); transform-origin: top center; }
	.affiliate-portal .aff-table { min-width: 570px; }
	.affiliate-portal .aff-history-filters { align-items: stretch; flex-wrap: wrap; }
	.affiliate-portal .aff-history-search { width: 100%; min-width: 0; }
	.affiliate-portal .aff-history-filters .drp { min-width: 0; flex: 1 1 210px; }
	.affiliate-portal .aff-history-filters .drp-trigger { width: 100%; min-width: 0; }
	.affiliate-portal .aff-history-filters .drp-pop { max-width: calc(100vw - 28px); }
	.affiliate-portal .aff-filter-submit,
	.affiliate-portal .aff-filter-reset { flex: 1 1 auto; }
	.affiliate-portal .aff-member-segment { width: 100%; min-width: 0; order: 2; }
	.affiliate-portal .aff-member-filters .drp { order: 3; }
	.affiliate-portal .aff-member-filters .aff-filter-submit { order: 4; }
	.affiliate-portal .aff-summary-grid { grid-template-columns: 1fr 1fr; }
	.affiliate-portal .aff-summary-item { align-items: flex-start; flex-direction: column; gap: 5px; }
	.affiliate-portal .aff-summary-item strong { text-align: left; }
	.affiliate-portal .aff-list-card { min-height: 390px; flex: 0 0 auto; }
	.affiliate-portal .aff-list-card .aff-table-wrap {
		min-height: 280px;
		overflow-x: auto;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.affiliate-portal .aff-members-table { min-width: 920px; }
	.affiliate-portal .aff-balance-chip { width: 100%; justify-content: space-between; }
	.affiliate-portal .aff-withdraw-grid { display: flex; flex-direction: column; }
	.affiliate-portal .aff-withdraw-form-card,
	.affiliate-portal .aff-bank-detail-card { min-height: 0; max-height: none; }
	.affiliate-portal .aff-withdraw-form { display: flex; flex-direction: column; align-items: stretch; }
	.affiliate-portal .aff-bank-choice-label { margin-bottom: -4px; }
	.affiliate-portal .aff-bank-options { width: 100%; max-height: 150px; margin: 0; }
	.affiliate-portal .aff-form-hint { margin-top: -5px; }
	.affiliate-portal .aff-bank-section-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
	.affiliate-portal .aff-bank-section-heading p { max-width: none; text-align: left; }
	.affiliate-portal .aff-bank-visual { min-height: 170px; }
	.affiliate-portal .aff-withdraw-history { min-height: 320px; flex: 0 0 auto; }
}
@media (min-width: 641px) and (max-height: 740px) {
	.affiliate-portal .aff-main { padding-top: 14px; padding-bottom: 10px; }
	.affiliate-portal .aff-footer { display: none; }
	.affiliate-portal .aff-hero { margin-bottom: 12px; }
	.affiliate-portal .aff-hero h1 { font-size: 28px; }
	.affiliate-portal .aff-card { padding: 14px 16px; }
	.affiliate-portal .aff-earnings-visual { transform: scale(.74); transform-origin: center right; }
	.affiliate-portal .aff-program-name { margin-top: 12px; font-size: 20px; }
	.affiliate-portal .aff-deal div { padding: 5px 0; }
	.affiliate-portal .aff-section-heading { margin-bottom: 8px; }
	.affiliate-portal .aff-table th { padding-top: 4px; padding-bottom: 6px; }
	.affiliate-portal .aff-table td { padding-top: 7px; padding-bottom: 7px; }
}
/* Affiliate dialog — the portal's own, not the back office's. The shell class
   strips .modal's admin card so only .aff-modal below paints. */
.aff-modal-shell { max-width: 640px; padding: 0; border: 1px solid #d7d7d3; border-radius: 22px; background: #f9f9f7; color: #222224; }
.aff-modal { padding: 20px 22px 18px; }
.aff-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.aff-modal-head h2 { margin: 0; font-size: 17.5px; font-weight: 650; letter-spacing: -.4px; }
.aff-modal-x { display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid #d3d3cf; border-radius: 50%; background: #fff; color: #555558; font-size: 17px; line-height: 1; cursor: pointer; }
.aff-modal-x:hover { border-color: #222224; color: #222224; }
.aff-modal-code { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 15px; border: 1px solid #d4e99d; border-radius: 14px; background: #edffc0; }
.aff-modal-code span { color: #596630; font-size: 10.5px; font-weight: 650; }
.aff-modal-code strong { font-family: ui-monospace, monospace; font-size: 16px; font-weight: 800; letter-spacing: 1.2px; cursor: copy; }
.aff-modal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.aff-modal-form { display: flex; flex-direction: column; gap: 12px; }
.aff-modal .aff-field { margin: 0; }
.aff-modal .aff-field span { display: block; margin-bottom: 5px; color: #45454a; font-size: 11.5px; font-weight: 650; }
.aff-modal .aff-field span i { color: var(--aff-muted); font-style: normal; font-weight: 500; }
.aff-modal .aff-input { border: 1px solid #d7d7d3; border-radius: 11px; padding: 10px 12px; background: #fff; font-size: 13.5px; }
.aff-modal .aff-input:focus { border-color: #222224; box-shadow: 0 0 0 3px rgba(34, 34, 36, .08); }
.aff-modal .aff-input.invalid { border-color: #dc2626; box-shadow: none; }
.aff-modal .aff-input.ok { border-color: #8fb733; box-shadow: none; }
.aff-modal .aff-mono { font-family: ui-monospace, monospace; letter-spacing: .4px; }
.aff-modal-hint { display: block; margin: 5px 0 0; color: var(--aff-muted); font-size: 11px; }
.aff-modal-err { display: block; margin: 5px 0 0; color: #dc2626; font-size: 11px; }
.aff-modal-section { margin-top: 4px; padding-top: 12px; border-top: 1px solid #e2e2de; color: #45454a; font-size: 11.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; }
.aff-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.aff-modal-cancel,
.aff-modal-submit { display: inline-flex; height: 42px; align-items: center; padding: 0 20px; border-radius: 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.aff-modal-cancel { border: 1px solid #d4d4d0; background: #fff; color: #555558; }
.aff-modal-cancel:hover { border-color: #99999c; color: #222224; }
.aff-modal-submit { border: 1px solid #222224; background: #222224; color: #fff; }
.aff-modal-submit:hover { background: #363638; }
.aff-modal-submit:disabled { border-color: #d4d4d0; background: #e4e4e0; color: #a2a2a4; cursor: not-allowed; }
@media (max-width: 700px) {
	.aff-modal-grid { grid-template-columns: 1fr; }
	.aff-modal-actions { flex-direction: column-reverse; }
	.aff-modal-cancel,
	.aff-modal-submit { justify-content: center; width: 100%; }
}

/* Login */
.aff-login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #0f172a 0%, #134e4a 100%); padding: 20px; }
.aff-login-card { background: #fff; border-radius: 14px; padding: 34px 34px 26px; width: 100%; max-width: 400px; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.aff-login-brand { display: flex; align-items: baseline; gap: 8px; margin-bottom: 18px; }
.aff-login-brand .aff-logo { color: #0f172a; font-size: 16px; font-weight: 700; letter-spacing: .2px; }
.aff-login-brand .aff-tag { color: #059669; font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; }
.aff-login-card h1 { font-size: 20px; margin: 0 0 6px; }
.aff-login-sub { color: #6b7280; font-size: 13.5px; margin: 0 0 18px; }
.aff-login-err { background: #fee2e2; color: #991b1b; font-size: 13px; border-radius: 8px; padding: 9px 12px; margin-bottom: 14px; }
.aff-field { display: block; margin-bottom: 14px; }
.aff-field span { display: block; font-size: 12.5px; font-weight: 600; color: #374151; margin-bottom: 5px; }
.aff-input { width: 100%; box-sizing: border-box; border: 1px solid #d1d5db; border-radius: 8px; padding: 9px 12px; font-size: 14px; }
.aff-input:focus { outline: none; border-color: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,.15); }
.aff-btn-primary { width: 100%; background: #059669; color: #fff; border: none; border-radius: 8px; padding: 11px; font-size: 14.5px; font-weight: 600; cursor: pointer; margin-top: 4px; }
.aff-btn-primary:hover { background: #047857; }
.aff-login-note { font-size: 12px; color: #9ca3af; margin: 16px 0 0; line-height: 1.5; }

/* Company Payment Gateway pages (12.12). */
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.grid-2col.pg-onecol { grid-template-columns: 1fr; }
.grid-2col.pg-bank-grid { grid-template-columns: 35fr 65fr; }
.grid-2col.pg-bank-grid.pg-onecol { grid-template-columns: 1fr; }
@media (max-width: 1100px) { .grid-2col { grid-template-columns: 1fr; } }
/* Read-only config as a comfortable info card: roomy rows, muted labels. */
.pg-info { margin: 0; }
.pg-info > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.pg-info > div:last-child { border-bottom: none; padding-bottom: 0; }
.pg-info dt { color: var(--text-muted); }
.pg-info dd { margin: 0; text-align: right; font-weight: 500; }
.pg-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.pg-chip { display: inline-block; padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); font-size: 12px; font-weight: 500; }

.pg-statement { margin: 0; }
.pg-statement div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.pg-statement div:last-child { border-bottom: none; }
.pg-statement dt { color: var(--text-muted); }
.pg-statement dd { margin: 0; text-align: right; }
.pg-unlock { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.pg-channels { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.pg-method-list { display: grid; gap: 0; border-top: 1px solid var(--border); }
.pg-method-row { display: grid; grid-template-columns: minmax(110px, 1fr) minmax(170px, 1.5fr) auto; align-items: center; gap: 12px; min-height: 46px; border-bottom: 1px solid var(--border); }
.pg-method-code { font-size: 13px; }
.pg-method-fee { font-size: 12px; white-space: nowrap; }
.pg-method-toggle { margin: 0; justify-self: end; }
.pg-method-toggle .ck { margin: 0; white-space: nowrap; }
@media (max-width: 560px) {
	.pg-method-row { grid-template-columns: 1fr auto; gap: 6px 10px; padding: 9px 0; }
	.pg-method-fee { grid-column: 1 / -1; white-space: normal; }
}
/* Payment Methods as a spreadsheet-style table (RULE 15). Fixed layout so every
   row shares identical column widths (pixel-precise); Min/Max are numeric
   columns (right-aligned, tabular); Save is a compact icon at the row end. */
.pg-method-table { margin: 0; width: 100%; }
.pg-method-table td, .pg-method-table th { vertical-align: middle; white-space: nowrap; }
.pg-method-table .mono { font-family: var(--font-mono, ui-monospace, monospace); font-size: 12.5px; }
.pg-method-table .pg-col-toggle { width: 84px; text-align: center; }
.pg-method-table .pg-col-toggle .ck { margin: 0; justify-content: center; }
.pg-method-table .pg-col-limit { width: 132px; }
.pg-method-table .pg-col-save { width: 48px; text-align: center; }
/* Full-cell input so the box edges line up exactly with the column, every row.
   margin:0 kills the base .field margin-bottom that (under vertical-align:middle)
   shoved the box up out of line with the checkbox and Save icon. */
.pg-limit-input { width: 100%; margin: 0; text-align: right; font-variant-numeric: tabular-nums; padding: 5px 8px; height: 30px; }
.btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text-muted); cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.btn-icon:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
@media (max-width: 560px) {
	.pg-method-table .pg-col-limit { width: 96px; }
	.pg-method-table .pg-col-toggle { width: 60px; }
}

/* Payment Gateway settings: sub-tabs + tariff modal layout. */
.jp-tariff-detail { margin: 0; font-size: 12.5px; }
.jp-tariff-detail div { display: flex; justify-content: space-between; gap: 14px; padding: 1px 0; }
.jp-tariff-detail dt { color: var(--text-muted); }
.jp-tariff-detail dd { margin: 0; font-variant-numeric: tabular-nums; }
.jp-fixpct { display: flex; align-items: center; gap: 8px; }
.jp-plus { color: var(--text-muted); }
.jp-rp-wrap, .jp-pct-wrap { position: relative; display: inline-flex; align-items: center; flex: 1; }
.jp-prefix { position: absolute; left: 10px; color: var(--text-muted); font-size: 13px; pointer-events: none; }
.jp-suffix { position: absolute; right: 10px; color: var(--text-muted); font-size: 13px; pointer-events: none; }
.jp-rp-wrap .input { width: 100%; padding-left: 30px; text-align: right; }
.jp-pct-wrap .input { width: 100%; padding-right: 24px; text-align: right; }

/* Head navigation strip atop the per-company Monitor pages. */
.pg-headstrip { display: flex; gap: 8px; margin-bottom: 14px; }

/* Head Companies & Tariffs table: one fee per column, roomy rows. */
.jp-companies-table td { vertical-align: middle; padding-top: 10px; padding-bottom: 10px; }
.jp-co-name { font-weight: 500; }
.jp-co-cur { font-size: 12px; margin-left: 8px; }
.jp-search { display: flex; gap: 8px; flex-shrink: 0; }
.jp-search .input { width: 220px; }
.jp-companies-table .num { white-space: nowrap; font-size: 12.5px; }

/* The policy editor must fit its card; mobile rows reflow rather than scroll. */
.pg-policy-table-wrap { width: 100%; max-width: 100%; }
.pg-policy-table { width: 100%; min-width: 0; table-layout: fixed; margin: 0; }
.pg-policy-table th:nth-child(1) { width: 16%; }
.pg-policy-table th:nth-child(2) { width: 30%; }
.pg-policy-table th:nth-child(3), .pg-policy-table th:nth-child(4) { width: 27%; }
.pg-policy-table td { vertical-align: middle; }
.pg-policy-table .ck { min-width: 0; }
.pg-policy-table .ck-label { white-space: normal; }
.pg-policy-availability-head { display: flex; align-items: center; justify-content: flex-start; gap: 8px; }
.pg-policy-select-all { flex-shrink: 0; font-weight: 500; }
.pg-policy-fee-wrap { min-width: 0; width: 100%; }
.pg-policy-fee-wrap .input { min-width: 0; width: 100%; }
.pg-policy-fee-disabled { background: var(--bg); color: var(--text-muted); cursor: not-allowed; }
@media (max-width: 700px) {
	.promo-form { max-width: none; }
	.pg-policy-table thead { display: none; }
	.pg-policy-table, .pg-policy-table tbody { display: block; width: 100%; }
	.pg-policy-table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; padding: 12px; border-bottom: 1px solid var(--border); }
	.pg-policy-table td { display: flex; min-width: 0; flex-direction: column; gap: 4px; padding: 0; border: 0; text-align: left; }
	.pg-policy-table td::before { content: attr(data-label); color: var(--text-muted); font-size: 12px; font-weight: 500; }
	.pg-policy-table td:nth-child(1), .pg-policy-table td:nth-child(2) { grid-column: 1 / -1; }
}

/* Head company picker in the PG toolbar (custom Select, top-right). */
.pg-picker { margin-left: 4px; }
.pg-picker .select-trigger { min-width: 200px; }

/* PG settings form: section headers span the grid, tidy dividers between groups. */
.pg-set-head .section-title { margin: 0; }
.pg-set-head { padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--border); }
.pg-set-head:first-child { padding-top: 0; margin-top: 0; border-top: 0; }

/* Reconciliation header: title left, status + run button right. */
.jp-recon-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.jp-recon-status { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* Company payout-bank add: searchable select + PIN pad */
.bank-form .input { width: 100%; margin-bottom: 0; }
.bank-step label { display: block; font-size: 13px; color: var(--text-muted); margin: 14px 0 6px; }
.bank-step > label:first-child { margin-top: 0; }
.bank-form .btn-block { margin-top: 18px; }
.bank-select { position: relative; }
.bank-menu { position: absolute; left: 0; right: 0; top: calc(100% + 4px); max-height: 240px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); z-index: 30; box-shadow: 0 6px 20px rgba(15,23,42,.14); }
.bank-opt { padding: 9px 12px; font-size: 13px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bank-opt:hover { background: var(--bg); }
.bank-otp { letter-spacing: 6px; text-align: center; font-size: 16px; }
.bank-actions { display: flex; gap: 8px; margin-top: 18px; }
.bank-actions .btn { flex: 1; }
.input-spin-wrap { position: relative; }
.input-spin { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin-cw .6s linear infinite; }
.input-ok { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--success); font-weight: 700; font-size: 15px; line-height: 1; }
@keyframes spin-cw { to { transform: translateY(-50%) rotate(360deg); } }
.bank-verify { margin-top: 8px; font-size: 13px; }
.bank-ok { color: var(--success); font-weight: 600; }
.bank-fail { color: var(--danger); font-weight: 600; }
.pinpad-wrap { text-align: center; }
.pinpad-title { font-weight: 600; margin-bottom: 12px; }
.pin-dots { display: flex; justify-content: center; gap: 12px; margin-bottom: 18px; }
.pin-dots span { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border); }
.pin-dots span.filled { background: var(--primary); border-color: var(--primary); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 240px; margin: 0 auto; }
.pin-key { height: 52px; font-size: 20px; font-weight: 600; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; }
.pin-key:hover { background: var(--bg); }
.pin-key:active { background: var(--border); }
.pin-del { color: var(--text-muted); }
.pin-dots.err span { border-color: var(--danger); }
.pin-dots.err span.filled { background: var(--danger); }
.pin-dots.shake { animation: pin-shake .4s ease; }
@keyframes pin-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(2px); }
}
.pin-done { padding: 8px 0; }
.pin-check { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; background: var(--success); color: #fff; font-size: 30px; line-height: 56px; }

/* Head→company announcement marquee (Comms module). Thin bar under the topbar;
   one per active announcement, dismissible. Colour keyed to variant. */
#announce-bar { display: flex; flex-direction: column; }
/* Soft-tinted bar with dark, high-contrast text (easy to read, not loud). A
   left accent bar carries the variant colour; height kept compact. */
.marquee {
  display: flex; align-items: center; gap: 10px;
  padding: 0 14px; height: 28px; overflow: hidden;
  border-bottom: 1px solid var(--border); border-left: 3px solid transparent;
  font-size: 13px; font-weight: 600; letter-spacing: .005em;
}
.marquee-info { background: #e6ebff; color: #1e1b4b; border-left-color: var(--primary); border-bottom-color: #c7d2fe; }
.marquee-warning { background: #fef6e0; color: #713f12; border-left-color: var(--warning); border-bottom-color: #fde68a; }
.marquee-critical { background: #fdeaea; color: #7f1d1d; border-left-color: var(--danger); border-bottom-color: #fecaca; }
.marquee-track {
  flex: 1; overflow: hidden; white-space: nowrap;
  display: flex; gap: 3rem; min-width: 0;
}
.marquee-text {
  display: inline-block; padding-left: 100%;
  animation: marquee-scroll 22s linear infinite;
}
.marquee:hover .marquee-text { animation-play-state: paused; }
.marquee-close {
  flex: none; background: transparent; border: 0; color: inherit;
  font-size: 17px; line-height: 1; cursor: pointer; opacity: .5;
}
.marquee-close:hover { opacity: 1; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-text { animation: none; padding-left: 0; }
  .marquee-track { gap: 0; }
}

/* Head→company broadcast modal (Comms module): interruptive, must-ack. Sits
   above everything incl. the shared modal; only the Ack button closes it. */
.broadcast-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, .55); padding: 20px;
}
.broadcast-card {
  background: #fff; border-radius: 10px; width: 100%; max-width: 440px;
  padding: 22px 24px; box-shadow: 0 12px 40px rgba(15, 23, 42, .25);
  border-top: 4px solid var(--primary);
}
.broadcast-info { border-top-color: var(--primary); }
.broadcast-warning { border-top-color: var(--warning); }
.broadcast-critical { border-top-color: var(--danger); }
.broadcast-title { margin: 0 0 8px; font-size: 16px; font-weight: 650; color: var(--text); }
.broadcast-body { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: #334155; white-space: pre-wrap; }
.broadcast-actions { display: flex; justify-content: flex-end; }

/* Company News inbox (Comms module CM-3). Clean list; unread rows accented. */
.news-feed { display: flex; flex-direction: column; }
.news-item {
  display: flex; align-items: flex-start; gap: 12px; width: 100%;
  padding: 12px 14px; background: #fff; border: 1px solid var(--border);
  border-bottom: 0; text-align: left; cursor: pointer; font: inherit;
}
.news-feed .news-item:first-child { border-top-left-radius: 8px; border-top-right-radius: 8px; }
.news-feed .news-item:last-child { border-bottom: 1px solid var(--border); border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
.news-item:hover { background: #f8fafc; }
.news-item.unread { background: #f5f7ff; }
.news-dot { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--border); }
.news-item.unread .news-dot-info { background: var(--primary); }
.news-item.unread .news-dot-warning { background: var(--warning); }
.news-item.unread .news-dot-critical { background: var(--danger); }
.news-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.news-item-title { font-size: 14px; color: var(--text); }
.news-item.unread .news-item-title { font-weight: 650; }
.news-snippet { font-size: 12.5px; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.news-date { flex: none; font-size: 12px; color: #94a3b8; }
.news-detail .news-body { font-size: 14px; line-height: 1.55; color: #334155; white-space: pre-wrap; margin: 6px 0 18px; }

/* Comms image uploader + cover images. */
.img-upload { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.img-upload-preview { max-height: 72px; max-width: 140px; border-radius: 6px; border: 1px solid var(--border); object-fit: cover; }
.broadcast-image { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: 8px; margin-bottom: 12px; }
.news-image { display: block; width: 100%; max-height: 260px; object-fit: cover; border-radius: 8px; margin: 8px 0 14px; }

/* ============================ Support tickets ============================ */
/* Shared row-link + status filter chips (company list + head sidebar). */
tr.row-link { cursor: pointer; }
tr.row-link:hover td { background: #f8fafc; }
.filter-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.filter-chip { height: 28px; display: inline-flex; align-items: center; padding: 0 12px; font-size: 12.5px; border: 1px solid var(--border); background: #fff; border-radius: 999px; cursor: pointer; color: #475569; white-space: nowrap; }
.filter-chip:hover { background: #f8fafc; }
.filter-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* --- Thread (chat) panel: header, message list, reply bar --- */
/* Bound the panel to the viewport so the thread scrolls INTERNALLY and the reply
   bar stays pinned at the bottom (never sinks below a long conversation). The
   messenger pane overrides height to flex:1 (bounded by the pane instead). */
.ticket-panel { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; height: calc(100vh - 150px); max-height: calc(100vh - 150px); }
.ticket-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); background: #fff; flex: none; }
.ticket-head-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ticket-subject { margin: 0; font-size: 15px; font-weight: 650; color: var(--text); line-height: 1.3; }
.ticket-company { font-size: 12.5px; }
.ticket-head-badges { display: flex; align-items: center; gap: 6px; flex: none; }
.ticket-status-bar { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-bottom: 1px solid var(--border); background: #fafbfc; flex: none; }

/* min-height:0 lets the flex child shrink so overflow-y actually scrolls
   (without it a long thread overflows and hides behind the reply bar). */
.ticket-thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 20px 18px; background: #f7f9fc; }
.ticket-row { display: flex; align-items: flex-start; gap: 10px; max-width: 74%; }
.ticket-row.mine { flex-direction: row-reverse; align-self: flex-end; }
.ticket-avatar { flex: none; width: 34px; height: 34px; border-radius: 50%; background: #94a3b8; color: #fff; font-size: 14px; font-weight: 650; display: flex; align-items: center; justify-content: center; text-transform: uppercase; }
.ticket-avatar.av-mine { background: var(--primary); }
.ticket-bubble { min-width: 140px; max-width: 100%; padding: 8px 12px 9px; border-radius: 12px; background: #fff; border: 1px solid var(--border); box-shadow: 0 1px 1px rgba(15,23,42,.03); }
.ticket-row.mine .ticket-bubble { background: var(--primary); border-color: var(--primary); color: #fff; }
.ticket-msg-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.ticket-msg-sender { font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.ticket-msg-role { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; opacity: .6; }
.ticket-msg-time { font-size: 11px; opacity: .55; margin-left: auto; white-space: nowrap; }
.ticket-msg-body { font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }

.ticket-reply { display: flex; align-items: flex-end; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--border); background: #fff; flex: none; }
/* margin:0 overrides .field's margin-bottom, which otherwise pushed the textarea
   box up and left the send button sitting lower than it. */
.ticket-reply textarea { flex: 1; box-sizing: border-box; height: 44px; min-height: 44px; max-height: 140px; margin: 0; padding: 11px 12px; line-height: 1.4; resize: none; display: block; }
.ticket-send { flex: none; box-sizing: border-box; height: 44px; margin: 0; padding: 0 20px; display: inline-flex; align-items: center; }
.ticket-closed-note { padding: 14px 18px; margin: 0; border-top: 1px solid var(--border); }

/* --- Head messenger: sidebar + thread pane (WhatsApp-desktop) --- */
/* Fill the space left under the hub chrome (topbar + title + tabs). CRITICAL:
   grid-template-rows: minmax(0,1fr) forces the single row to the container's
   height (a grid row defaults to content height) AND lets the tracks shrink so
   the thread scrolls internally and the reply bar stays visible. */
.tk-messenger { display: grid; grid-template-columns: 336px 1fr; grid-template-rows: minmax(0, 1fr); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; height: calc(100vh - 210px); min-height: 380px; background: #fff; }
.tk-convos { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--border); background: #fff; }
.tk-filter { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; flex: none; }
.tk-chip { height: 28px; display: inline-flex; align-items: center; padding: 0 12px; font-size: 12px; border: 1px solid var(--border); background: #fff; border-radius: 999px; cursor: pointer; color: #475569; white-space: nowrap; }
.tk-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.tk-convo-scroll { overflow-y: auto; flex: 1; }
.tk-convo-empty { padding: 22px; }
.tk-convo { display: flex; gap: 11px; padding: 11px 13px; border-bottom: 1px solid var(--border); cursor: pointer; align-items: flex-start; }
.tk-convo:hover { background: #f5f7fa; }
.tk-convo.active { background: #eef2ff; }
.tk-avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--primary); color: #fff; font-size: 17px; font-weight: 650; display: flex; align-items: center; justify-content: center; text-transform: uppercase; }
.tk-convo-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tk-convo-top { display: flex; align-items: baseline; gap: 6px; }
.tk-convo-name { font-weight: 650; font-size: 13.5px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-convo-time { margin-left: auto; font-size: 11px; color: #94a3b8; flex: none; }
.tk-tier { flex: none; font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; background: #e2e8f0; color: #334155; padding: 1px 6px; border-radius: 4px; font-weight: 650; }
/* Row 2: ticket subject (title) + who opened it. */
.tk-convo-subject { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.tk-subject-text { font-size: 12.5px; font-weight: 600; color: #334155; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-convo-admin { font-size: 11.5px; color: #94a3b8; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Row 3: last-message preview + unread/pin end-cap. */
.tk-convo-line { display: flex; align-items: center; gap: 8px; }
.tk-convo-preview { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; font-size: 12px; color: #94a3b8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-convo-preview.unread { color: var(--text); font-weight: 650; }
.tk-replied { flex: none; color: #94a3b8; display: inline-flex; }
.tk-convo-endcap { flex: none; display: flex; align-items: center; gap: 6px; }
.tk-unread { background: var(--primary); color: #fff; font-size: 11px; font-weight: 650; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
/* Single pin icon: hidden until hover for unpinned rows, always shown (amber)
   when pinned. */
.tk-pin-btn { background: transparent; border: 0; color: #94a3b8; cursor: pointer; padding: 2px; line-height: 0; display: flex; opacity: 0; transition: opacity .1s; }
.tk-convo:hover .tk-pin-btn { opacity: 1; }
.tk-pin-btn:hover { color: var(--warning); }
.tk-pin-btn.on { opacity: 1; color: var(--warning); }
.tk-pane { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #f7f9fc; }
.tk-pane > .ticket-panel { border: 0; border-radius: 0; flex: 1; height: auto; max-height: none; min-height: 0; }
.tk-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 14px; }
@media (max-width: 900px) { .tk-messenger { grid-template-columns: 1fr; height: auto; } .tk-pane:empty, .tk-pane > .tk-empty { display: none; } }
/* Company support list: highlight tickets with unread head replies. */
tr.has-unread .sup-subject { font-weight: 700; color: var(--text); }
.sup-unread { display: inline-block; margin-left: 8px; background: var(--primary); color: #fff; font-size: 10.5px; font-weight: 650; padding: 1px 8px; border-radius: 999px; vertical-align: middle; }

/* Soft rise-in: applied by admin.js ONLY on a live update (SSE new message /
   pin), never on initial load or a plain refresh — so the list/thread doesn't
   animate every time it renders. */
@keyframes tkRiseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.tk-rise { animation: tkRiseIn .22s ease-out; }
@media (prefers-reduced-motion: reduce) { .tk-rise { animation: none; } }

/* ===== Communications / ticket modals: clean single-column form ===== */
.modal:has(.comms-modal) { width: 480px; }
.comms-modal { display: flex; flex-direction: column; gap: 15px; }
.comms-modal .fg { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.comms-modal label:not(.tgl) { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--text); }
.comms-modal .field { margin: 0; width: 100%; }
.comms-modal .select, .comms-modal .select-trigger { width: 100%; }
.comms-modal textarea.field { resize: vertical; min-height: 76px; font-family: inherit; line-height: 1.5; }
.comms-modal .form-note { margin: 0; }
.comms-modal .comms-toggle { padding: 11px 14px; border: 1px solid var(--border); border-radius: 8px; background: #fafbfc; }
.comms-modal .comms-toggle .tgl { margin: 0; }
.comms-modal .comms-companies { margin: 0; max-height: 190px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; gap: 9px; }
.comms-modal .modal-actions { margin: 2px 0 0; padding-top: 15px; border-top: 1px solid var(--border); }
.img-upload { gap: 12px; }

/* Company support table: numbering, preview, tidy column widths. */
.sup-table .sup-col-no { width: 46px; }
.sup-table .sup-col-badge { width: 108px; }
.sup-table .sup-col-time { width: 152px; white-space: nowrap; }
.sup-cell { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sup-subject { font-weight: 600; color: var(--text); }
.sup-preview { font-size: 12px; color: #94a3b8; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; }
.sup-empty { padding: 22px 12px; }

/* Website Settings — color-theme picker (RULE 15: composed from tokens) */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 6px; }
.theme-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease; }
.theme-card:hover { border-color: var(--primary); }
.theme-card input { position: absolute; opacity: 0; pointer-events: none; }
.theme-card.active { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
/* Pratinjau tema: tangkapan layar beranda template (template yang punya
   berkas pratinjau; sisanya tetap tampil sebagai swatch warna saja). */
/* Template dengan pratinjau: grid 3 kolom supaya gambarnya terbaca. */
.theme-grid:has(.theme-preview) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .theme-grid:has(.theme-preview) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .theme-grid:has(.theme-preview) { grid-template-columns: 1fr; } }
.theme-card:has(.theme-preview) .theme-swatch { height: 10px; }
.theme-preview { width: 100%; aspect-ratio: 16 / 8.33; object-fit: cover; object-position: top center; border-radius: 5px; border: 1px solid var(--border); background: var(--surface-2, #111); display: block; }
.theme-card:has(.theme-preview) { gap: 8px; }
.theme-swatch { display: flex; height: 42px; border-radius: 5px; overflow: hidden; border: 1px solid var(--border); }
.theme-swatch > span { flex: 1; }
.theme-name { font-size: 13px; font-weight: 500; color: var(--text); }
.theme-check { position: absolute; top: 10px; right: 10px; display: none; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--primary); color: #fff; }
.theme-card.active .theme-check { display: flex; }

/* Canonical catalog review (CANONICAL_CATALOG_PLAN T4/T4b). Reuses .tab-bar,
   .filter-bar-labeled, .data-table, .select; these are the page-specific bits. */
.canon-scope { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; padding: 5px 10px; font-size: 13px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); }
.canon-clear { cursor: pointer; color: var(--text-muted); font-size: 12px; }
.canon-clear:hover { color: var(--primary); }
.canon-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.canon-aggs { font-size: 12px; color: var(--text-muted); }
.canon-codes { font-size: 12px; color: var(--text-muted); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* merge suggestions */
.canon-suggest { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.canon-suggest-chip { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.canon-suggest-chip:hover { border-color: var(--primary); }
.canon-suggest-chip.active { border-color: var(--primary); background: var(--bg); }
.canon-suggest-name { flex: 1; font-size: 14px; color: var(--text); }
.canon-suggest-code { font-size: 12px; }
/* merge target combobox: empty until typed, results revealed on input */
.canon-combo { position: relative; margin-bottom: 12px; }
.canon-picklist { max-height: 220px; overflow-y: auto; margin-top: 4px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.canon-pick { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; font-size: 14px; cursor: pointer; border-bottom: 1px solid var(--border); }
.canon-pick-agg { font-size: 12px; flex-shrink: 0; }
.canon-pick:last-child { border-bottom: none; }
.canon-pick:hover { background: var(--bg); }
.canon-chosen { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 10px; font-size: 14px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); }
.canon-chosen-label { flex: 1; color: var(--text); }
.canon-chosen-clear { border: none; background: none; color: var(--text-muted); cursor: pointer; font-size: 13px; line-height: 1; }
.canon-chosen-clear:hover { color: var(--danger); }
/* variants modal — widen to fit the table, keep each row's actions on one line */
.modal:has(.canon-variants) { width: 780px; }
.canon-variants { width: 100%; table-layout: auto; }
.canon-variants td, .canon-variants th { vertical-align: middle; }
.canon-variants td.col-code { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.canon-variant-act { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 8px; }
.canon-variant-act > form { margin: 0; }
.canon-relink { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
/* override .modal .select (block/100%) so the picker sits inline beside its button */
.canon-variant-act .select { display: inline-block; width: auto; margin: 0; }
.canon-variant-act .select-trigger { width: auto; min-width: 150px; height: 32px; }
.canon-variant-act .btn { height: 32px; white-space: nowrap; }

/* Provider callback URL info (settings: aggregator + payment gateway) */
.callback-info { margin: 6px 0 14px; }
.callback-row { display: flex; align-items: center; gap: 8px; }
.callback-code { flex: 1; padding: 7px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); font-size: 13px; color: var(--text); overflow-x: auto; white-space: nowrap; }

/* Cloudflare domain tutorial (website settings → domains) */
.cf-tut { margin: 12px 0 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.cf-tut-summary { display: flex; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text); list-style: none; }
.cf-tut-summary::-webkit-details-marker { display: none; }
.cf-tut-summary svg { color: var(--primary); flex-shrink: 0; }
.cf-tut[open] .cf-tut-summary { border-bottom: 1px solid var(--border); }
.cf-tut-body { padding: 14px 16px; }
.cf-tut-intro { font-size: 13px; color: var(--text-muted); margin: 0 0 12px; }
.cf-tut-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: var(--text); }
.cf-tut-steps > li { line-height: 1.5; }
.cf-tut-steps code { padding: 1px 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; font-size: 12px; }
.cf-tut-fields { margin: 8px 0 0; padding-left: 16px; display: flex; flex-direction: column; gap: 5px; list-style: disc; }
.cf-tut-target { display: inline-flex; align-items: center; gap: 6px; }
.cf-tut-proxied { font-weight: 600; }
.cf-tut-fig { margin: 16px 0 0; }
.cf-tut-fig img { max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.cf-tut-fig figcaption { margin-top: 6px; font-size: 12px; color: var(--text-muted); }
.cf-tut-warn { margin-top: 14px; }

/* Callback Log payload viewer — collapsed by default so the table stays a table. */
.cb-payload > summary { cursor: pointer; color: var(--primary); font-size: 12px; }
.cb-payload-body { margin-top: 6px; max-width: 520px; }
.cb-payload-body h4 { margin: 8px 0 2px; font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.cb-payload-body pre { margin: 0; padding: 6px 8px; background: var(--surface-2, #f8fafc); border: 1px solid var(--border); border-radius: 4px; font-size: 11.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-all; max-height: 220px; overflow: auto; }

/* Mobile shell. The sidebar becomes an off-canvas drawer driven by .nav-open on
   .app: the topbar hamburger opens it, the backdrop or any nav tap closes it. The
   topbar keeps the menu toggle on the left and the identity icons on the right —
   the account button stands in for the sidebar footer (hidden behind the drawer),
   so 2FA and change-password stay one tap away exactly as on desktop.
   MUST stay last in this file: media queries add no specificity, so every rule
   here would otherwise lose to the same-specificity component rules above. */
.nav-toggle, .tb-profile { display: none; }
.nav-backdrop { display: none; }


/* Priced-order box: same height as a field so it lines up with the select in
   the neighbouring column. */
.quote-box { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 34px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); font-size: 14px; }
/* Build stamp under the sidebar brand — informative, never competing with it. */
.brand-version { font-size: 10px; line-height: 1; color: rgba(255,255,255,.45); letter-spacing: .02em;
  margin-left: 6px; align-self: flex-end; padding-bottom: 2px; white-space: nowrap; }
/* The rail collapses to icons only — a build stamp there would just clip. */
.app.collapsed .sidebar .brand-version { display: none; }
/* A failure reason belongs in the row, but a long one must not stretch the
   table — two lines, then ellipsis (the full text is the title). */
.row-error { max-width: 340px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* VPS list: a fixed column rhythm so an ordered machine (no address yet, no
   version yet) does not leave the header floating over empty space. */
.vps-table td { vertical-align: top; }
.vps-table th:nth-child(1), .vps-table td:nth-child(1) { width: 22%; }
.vps-table th:nth-child(2), .vps-table td:nth-child(2) { width: 12%; }
.vps-table th:nth-child(3), .vps-table td:nth-child(3) { width: 10%; }
.vps-table th:nth-child(5), .vps-table td:nth-child(5) { width: 16%; }
.vps-table th:last-child, .vps-table td:last-child { width: 1%; white-space: nowrap; }
/* Row buttons keep one line and one gap, whatever mix of actions a row has. */
.row-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
/* Per-template release readout inside the fleet dialog: a compact two-column
   list, not a page-sized table. */
.rel-table { margin: 0; }
.rel-table td { padding: 6px 10px; font-size: 13px; }
/* A dialog's opening sentence needs air before the first field. */
.modal-create .modal-text { margin: 0 0 14px; }

@media (max-width: 768px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; padding: 0; background: none; border: none; border-radius: var(--radius); color: var(--text); cursor: pointer; }
  .nav-toggle:hover { background: var(--bg); }
  .tb-profile { display: inline-flex; }
  /* dvh, not vh: the drawer must end at the visible viewport, not under the
     browser's collapsing address bar, or its footer sits off-screen. */
  .sidebar { width: 260px; height: 100dvh; transform: translateX(-100%); transition: transform 150ms ease; }
  .app.nav-open .sidebar { transform: translateX(0); box-shadow: 4px 0 18px rgba(15, 23, 42, .28); }
  /* Drawer open = the page behind is frozen; only the menu scrolls, and its own
     scroll never chains out to the page underneath. */
  html:has(.app.nav-open), body:has(.app.nav-open) { overflow: hidden; }
  .sidebar nav { overscroll-behavior: contain; }
  .main, .app.collapsed .main { margin-left: 0; }
  .app.nav-open .nav-backdrop { display: block; position: fixed; inset: 0; z-index: 25; background: rgba(15, 23, 42, .45); }
  /* The drawer has its own close affordances; the desktop collapse toggle would
     leave a 64px rail with no way back on a touch screen (no hover). */
  .sb-toggle { display: none; }
  /* Phone topbar carries navigation and identity only: quick buttons duplicate nav
     entries, sign-out lives in the account modal, and balances/alerts have their
     own pages (bal-card and the bell are links). Keeps the 56px bar from wrapping. */
  .qbtn, .logout-form, .bal-card, .icon-btn.bell, .vdiv { display: none; }
  .topbar { gap: 8px; padding: 0 12px; }
  .topbar-right { gap: 6px; }
  .topbar-left { min-width: 0; }
  .content { padding: 14px; }
  .toolbar { flex-wrap: wrap; gap: 8px; }
  /* .collapsed can still be set from localStorage; the drawer is always full
     width, so the desktop rail rules declared earlier are undone here. */
  .app.collapsed .sidebar nav { overflow-y: auto; }
  .app.collapsed .nav-badge { position: static; top: auto; right: auto; min-width: 18px; height: 18px; margin-left: auto; font-size: 10.5px; }
  .app.collapsed .sb-user-info { display: flex; }
  .app.collapsed .sb-user-caret { display: block; }
  .app.collapsed .sb-user { justify-content: flex-start; padding: 10px 12px; }
  .app.collapsed .sb-pill { display: flex; }
}