/* ============================================================
   app.css — dark UI, one accent, a four-step surface ramp.

   THEMES. Everything colour lives in the blocks below and nowhere
   else: components reference variables only, so a theme is a
   palette swap and never a component rewrite. The admin picks one
   under Admin → Appearance, which sets data-theme on <html>.
   Aurora is the default and is what :root carries, so a page that
   somehow renders without the attribute still looks deliberate.

   Adding a theme = one more [data-theme="..."] block with the same
   keys, plus an entry in AppTheme (Domain/Enums).
   ============================================================ */

:root {
  /* ── Aurora — violet on a blue-black ramp (default) ─────────────
     The accent is an ACCENT: primary buttons, the active nav
     marker, focus rings. Never body copy, never money figures —
     those stay white so gains and losses read on colour alone. */
  --primary: #7C5CFF;
  --primary-dark: #6544E6;
  --primary-light: #9B83FF;
  --on-primary: #FFFFFF;       /* text/icon colour on top of the accent */

  /* Surfaces — a deliberate 4-step ramp so panels read against the page */
  --white: #ffffff;
  --bg: #08070E;               /* page background */
  --surface: #12111A;          /* card / panel */
  --surface-2: #1B1926;        /* raised: hover, thead, inputs */
  --surface-3: #262336;        /* highest: toasts, modals, popovers */
  --card-bg: #12111A;

  /* Text — real hierarchy, not three shades of white */
  --text: #ffffff;
  --text-muted: #A1A1A1;
  --text-dim: #6E6E6E;

  /* Lines */
  --border: #232131;
  --border-strong: #3A3650;

  /* Status */
  --success: #21C87A;
  --danger: #FF4D4D;
  --warning: #FFB020;
  --info: #4DA3FF;
  --frozen: #FF8A00;

  /* Neutral tints for badges, so not everything is the accent */
  --tint: rgba(255,255,255,0.06);
  --tint-strong: rgba(255,255,255,0.10);

  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 3px rgba(0,0,0,0.6);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.8);
  --nav-height: 60px;
}

/* Named explicitly as well, so the admin page can preview it. */
[data-theme="aurora"] { }

/* ── Sapphire — blue on navy. Reads institutional. ─────────────── */
[data-theme="sapphire"] {
  --primary: #2E8BFF;
  --primary-dark: #1C73E0;
  --primary-light: #63A9FF;
  --on-primary: #04121F;
  --bg: #060A12;
  --surface: #101724;
  --surface-2: #182233;
  --surface-3: #223047;
  --card-bg: #101724;
  --border: #1F2A3D;
  --border-strong: #33445F;
  --success: #22C58A;
}

/* ── Ember — amber on warm black. Reads like an exchange. ──────── */
[data-theme="ember"] {
  --primary: #FF8A3D;
  --primary-dark: #E5731F;
  --primary-light: #FFA86B;
  --on-primary: #1A0C02;
  --bg: #0C0705;
  --surface: #17100C;
  --surface-2: #211812;
  --surface-3: #2E211A;
  --card-bg: #17100C;
  --border: #2A1E17;
  --border-strong: #45332A;
  --frozen: #FFC24D;
}

/* ── Emerald — green on deep teal-black. ───────────────────────── */
[data-theme="emerald"] {
  --primary: #22C58A;
  --primary-dark: #17A874;
  --primary-light: #4FD8A6;
  --on-primary: #04140D;
  --bg: #050B09;
  --surface: #0F1714;
  --surface-2: #16211D;
  --surface-3: #1F2E28;
  --card-bg: #0F1714;
  --border: #1D2B26;
  --border-strong: #2E4239;
  --success: #3BE0A0;
}

/* ── Citrus — the original lime-on-black, kept so the look that
      shipped first is still one click away. ─────────────────────── */
[data-theme="citrus"] {
  --primary: #CCFF00;
  --primary-dark: #B8E600;
  --primary-light: #D9FF4D;
  --on-primary: #0A0A0A;
  --bg: #000000;
  --surface: #131313;
  --surface-2: #1C1C1C;
  --surface-3: #262626;
  --card-bg: #131313;
  --border: #262626;
  --border-strong: #3D3D3D;
  --success: #00C805;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* The browser's own [hidden] { display: none } is an author-stylesheet
   loser: any class further down that sets `display` beats it. Without this,
   `hidden` silently does nothing on elements like .nav-badge (display:flex)
   and an empty badge sits there looking like an unread item. */
[hidden] { display: none !important; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  padding-bottom: calc(var(--nav-height) + 16px);
}

a { color: var(--text); text-decoration: none; }
a:hover { color: var(--primary); }

img { max-width: 100%; height: auto; }

/* Tight, confident headings; money always tabular so columns line up */
h1, h2, h3, h4 { letter-spacing: -0.02em; line-height: 1.25; }
.amount, .money, .balance-amount, .stat-value, .asc-value { font-variant-numeric: tabular-nums; }

::selection { background: var(--primary); color: var(--on-primary); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ── Inline alerts (non-toast) ──────────────────────────────── */
.alert {
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--text-muted);
  background: var(--surface-3);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}
.alert-danger  { border-left-color: var(--danger);  border-color: rgba(255,77,77,0.45);  background: #2A1A1A; }
.alert-success { border-left-color: var(--success); border-color: rgba(0,200,5,0.40);    background: #122113; }
.alert-warning { border-left-color: var(--warning); border-color: rgba(255,176,32,0.40); background: #2A2213; }
.alert-info    { border-left-color: var(--info);    border-color: rgba(77,163,255,0.40); background: #15202B; }

/* ── Layout ─────────────────────────────────── */
.page-content {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 0 16px;
}

/* ── Top Header Bar ─────────────────────────── */
.top-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  color: var(--white);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  max-width: 480px;
  margin: 0 auto;
}
.top-bar .title { font-size: 16px; font-weight: 600; }
.top-bar .back-btn { background: none; border: none; color: var(--white); font-size: 18px; cursor: pointer; padding: 4px; }
.top-bar .action-btn { background: none; border: none; color: var(--white); font-size: 14px; cursor: pointer; }

/* ── Profile / Mine Page ────────────────────── */
.profile-header {
  background: linear-gradient(135deg, var(--surface-2) 0%, var(--surface) 100%);
  border-bottom: 1px solid var(--border);
  padding: 24px 16px 32px;
  color: var(--white);
  text-align: center;
  position: relative;
}
.avatar-wrap {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  overflow: hidden;
  margin: 0 auto 10px;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  color: var(--text);
}
.avatar-wrap img { width: 100%; height: 100%; object-fit: cover; }
.profile-name { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.profile-id { font-size: 12px; opacity: 0.8; margin-bottom: 8px; }
/* Outlined, not filled — a filled lime pill next to every name was noise */
.vip-badge {
  display: inline-block;
  background: var(--tint);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.4px;
}

/* ── Balance Card ───────────────────────────── */
.balance-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 16px;
  margin: -16px 16px 12px;
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.balance-label { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.balance-amount {
  font-size: 34px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
.balance-currency { font-size: 14px; color: var(--text-muted); }
.balance-row {
  display: flex;
  justify-content: space-around;
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 12px;
}
.balance-item { text-align: center; }
.balance-item .val { font-weight: 600; font-size: 15px; color: var(--text); }
.balance-item .lbl { font-size: 11px; color: var(--text-muted); }

/* ── Action Buttons ─────────────────────────── */
/* auto-fit so the row always fills, whatever the tile count */
.action-btns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 8px;
  padding: 0 16px;
  margin-bottom: 12px;
}
.action-btn-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  background: var(--card-bg);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform 0.1s;
  text-decoration: none;
  color: var(--text);
}
.action-btn-item:hover { transform: scale(1.04); color: var(--text); }
/* Circular wrapper for quick-action buttons. Named separately from the generic
   .icon SVG class so the two can never collide. */
.action-btn-item .ab-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--tint);
  display: flex; align-items: center; justify-content: center;
}
.action-btn-item .ab-icon .icon { width: 19px; height: 19px; }
.action-btn-item .lbl { font-size: 11px; color: var(--text-muted); }

/* Legacy square wrappers used by menu rows and cards */
.menu-item .mi-icon .icon { width: 17px; height: 17px; }
.pm-icon .icon, .choice-icon .icon, .channel-icon .icon,
.settings-group-icon .icon, .m-icon .icon { width: 1em; height: 1em; }

/* ── Menu List ──────────────────────────────── */
.menu-section {
  background: var(--card-bg);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin: 0 16px 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.menu-section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  padding: 10px 16px 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.menu-item {
  display: flex;
  align-items: center;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
  text-decoration: none;
  color: var(--text);
}
.menu-item:last-child { border-bottom: none; }
.menu-item:hover { background: var(--surface-2); }
.menu-item .mi-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--tint);
  display: flex; align-items: center; justify-content: center;
  margin-right: 12px;
  font-size: 16px;
  flex-shrink: 0;
}
.menu-item .mi-text { flex: 1; font-size: 14px; }
.menu-item .mi-arrow { color: var(--text-muted); font-size: 12px; }
.menu-item .mi-badge {
  background: var(--danger);
  color: white;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 10px;
  margin-right: 6px;
}

/* ── Stats Grid ─────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 0 16px;
  margin-bottom: 12px;
}
.stat-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 14px;
  box-shadow: var(--shadow);
}
.stat-card .stat-label { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.stat-card .stat-value { font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat-card .stat-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* ── Section Card ───────────────────────────── */
.section-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin: 0 16px 12px;
  padding: 14px;
  box-shadow: var(--shadow);
}
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.section-title { font-size: 15px; font-weight: 600; color: var(--text); }
.section-link { font-size: 12px; color: var(--text-muted); }

/* ── Platform Cards ─────────────────────────── */
.platform-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.platform-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 6px;
  background: var(--bg);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  color: var(--text);
  transition: all 0.15s;
  border: 1.5px solid transparent;
}
.platform-card:hover, .platform-card.active { border-color: var(--border-strong); background: var(--tint); }
.platform-card .plat-icon { font-size: 28px; margin-bottom: 4px; }
.platform-card .plat-name { font-size: 11px; font-weight: 600; color: var(--text-muted); }

/* ── Order / Task Cards ─────────────────────── */
.order-info-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  margin: 0 16px 12px;
  padding: 14px;
  box-shadow: var(--shadow);
}
.order-stats-row {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.order-stats-row:last-child { border-bottom: none; padding-bottom: 0; }
.order-stats-row .osr-lbl { color: var(--text-muted); font-size: 13px; }
.order-stats-row .osr-val { font-weight: 600; font-size: 13px; }

.btn-grab {
  display: block;
  width: calc(100% - 32px);
  margin: 0 16px 12px;
  padding: 14px;
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.5px;

  transition: all 0.2s;
}
.btn-grab:hover { background: var(--primary-light); color: var(--on-primary); }
.btn-grab:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ── Task Detail / Product Card ─────────────── */
.product-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  margin: 0 16px 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.product-card .prod-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}
.product-card .prod-body { padding: 14px; }
.product-card .prod-name { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.product-card .prod-platform { font-size: 12px; color: var(--text-muted); margin-bottom: 10px; }
.product-card .prod-detail-row {
  display: flex; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.product-card .prod-detail-row:last-child { border-bottom: none; }
.product-card .prod-detail-row .pdr-lbl { color: var(--text-muted); }
.product-card .prod-detail-row .pdr-val { font-weight: 600; }
.product-card .pdr-val.commission { color: var(--success); font-size: 16px; }
.product-card .pdr-val.amount { color: var(--text); }

/* ── Freeze Warning ─────────────────────────── */
.freeze-warning {
  background: rgba(255,138,0,0.12);
  border: 1.5px solid var(--frozen);
  border-radius: var(--radius);
  margin: 0 16px 12px;
  padding: 16px;
}
.freeze-warning .fw-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--warning);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.freeze-warning .fw-msg { font-size: 13px; color: var(--text-muted); margin-bottom: 12px; line-height: 1.6; }
.freeze-warning .fw-amount {
  font-size: 22px;
  font-weight: 700;
  color: var(--frozen);
  margin-bottom: 12px;
}
.btn-deposit-now {
  display: block;
  background: var(--frozen);
  color: white;
  padding: 12px;
  border-radius: 24px;
  text-align: center;
  font-weight: 600;
  text-decoration: none;
}
.btn-deposit-now:hover { background: var(--frozen); color: var(--on-primary); }

/* ── Deposit / Withdrawal Forms ─────────────── */
.method-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.method-item {
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
}
.method-item:hover, .method-item.selected {
  border-color: var(--primary);
  background: var(--tint);
}
.method-item .m-icon { font-size: 24px; margin-bottom: 4px; }
.method-item .m-name { font-size: 12px; font-weight: 600; }
.method-item .m-limit { font-size: 10px; color: var(--text-muted); }

/* Browsers colour form text near-black by default, which is invisible on this
   theme's dark surfaces. Anything that does not opt into .form-control still
   gets legible text — a field must never swallow what the user typed. */
input, textarea, select {
  color: var(--text);
  caret-color: var(--text);
}
input::placeholder, textarea::placeholder { color: var(--text-dim); }

.form-group { margin-bottom: 16px; }
.form-group label {
  display: block; font-size: 13px; font-weight: 500;
  margin-bottom: 6px; color: var(--text-muted);
}
.form-control {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 14px;
  background: var(--surface-2);
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}
.form-control:focus {
  border-color: var(--primary);
  /* Follows the theme. The rgba line is the fallback for browsers
     without color-mix; both are cheap so both stay. */
  box-shadow: 0 0 0 3px rgba(255,255,255,0.12);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}
.form-control::placeholder { color: var(--text-dim); }
.form-select { appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23D9D9D9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px; padding-right: 36px; }

.input-group { position: relative; }
.input-group .input-suffix {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); font-size: 13px;
}

.btn-primary {
  display: block;
  width: 100%;
  padding: 14px;
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s;
}
.btn-primary:hover { background: var(--primary-light); }
.btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

/* Secondary = neutral outline. A lime outline on every minor button
   was what made the UI feel loud; lime now marks one action per view. */
.btn-outline {
  display: inline-block;
  padding: 9px 20px;
  border: 1px solid var(--border-strong);
  color: var(--text);
  background: transparent;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.btn-outline:hover { background: var(--tint); border-color: var(--text-dim); color: var(--text); }

.btn-sm {
  padding: 6px 14px;
  font-size: 12px;
  border-radius: 16px;
}

/* ── Wallet Address Box ──────────────────────── */
.wallet-address-box {
  background: var(--bg);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-bottom: 12px;
  word-break: break-all;
  font-size: 13px;
  font-family: monospace;
  position: relative;
}
.wallet-address-box .copy-btn {
  position: absolute; top: 8px; right: 8px;
  background: var(--primary); color: var(--on-primary);
  border: none; border-radius: 6px;
  padding: 3px 8px; font-size: 11px; cursor: pointer;
}
.qr-placeholder {
  width: 120px; height: 120px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 48px; margin: 0 auto 12px;
}

/* ── Transaction List ───────────────────────── */
.tx-list { }
.tx-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.tx-item:last-child { border-bottom: none; }
.tx-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--tint);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; margin-right: 12px; flex-shrink: 0;
}
.tx-body { flex: 1; }
.tx-title { font-size: 13px; font-weight: 500; }
.tx-date { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.tx-amount { font-size: 14px; font-weight: 700; }
.tx-amount.credit { color: var(--success); }
.tx-amount.debit { color: var(--danger); }

/* ── Status Badges ──────────────────────────── */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}
.badge-pending { background: rgba(255,210,76,0.16); color: var(--warning); }
.badge-approved, .badge-completed { background: rgba(0,200,5,0.16); color: var(--success); }
.badge-rejected, .badge-cancelled { background: rgba(255,80,0,0.16); color: var(--danger); }
.badge-frozen { background: rgba(255,138,0,0.16); color: var(--frozen); }
.badge-processing { background: rgba(77,163,255,0.16); color: var(--info); }

/* ── Team / Referral ────────────────────────── */
.referral-card {
  background: linear-gradient(135deg, var(--surface-2), var(--surface));
  border-radius: var(--radius);
  padding: 16px;
  margin: 0 16px 12px;
  color: white;
}
.referral-card .ref-label { font-size: 12px; opacity: 0.8; margin-bottom: 4px; }
.referral-code {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.referral-link-box {
  background: rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 11px;
  word-break: break-all;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.team-level-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 14px;
  margin: 0 16px 10px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.team-level-card .level-badge {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700;
}
.team-level-info { flex: 1; padding: 0 12px; }
.team-level-info .level-title { font-size: 14px; font-weight: 600; }
.team-level-info .level-sub { font-size: 12px; color: var(--text-muted); }
.team-level-card .level-count { font-size: 22px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }

/* ── Announcement Banner ────────────────────── */
.announcement-banner {
  background: var(--tint);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 10px 14px;
  margin: 0 16px 10px;
  font-size: 13px;
  color: var(--text-muted);
}

/* ── Bottom Navigation ──────────────────────── */
.footer-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--nav-height);
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  z-index: 200;
  max-width: 480px;
  margin: 0 auto;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
}
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 0;
  cursor: pointer;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 500;
  transition: color 0.15s;
  position: relative;
}
.nav-item .nav-icon { font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.nav-item .nav-icon .icon { width: 21px; height: 21px; vertical-align: middle; }
.nav-item.active {
  color: var(--primary);
  font-weight: 700;
}
.nav-item.active::before {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 3px;
  background: var(--primary);
  border-radius: 0 0 3px 3px;
}
.nav-item.active .nav-icon {
  transform: scale(1.2);

}
.nav-badge {
  position: absolute;
  top: 2px; right: calc(50% - 18px);
  background: var(--danger);
  color: white;
  font-size: 9px;
  min-width: 16px; height: 16px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
}

/* ── Live market panel ───────────────────────
   Sits at the top of the home screen. Colour follows direction: the accent for
   a rising window, the danger colour for a falling one, so the chart reads
   before any of the numbers do. */
.market-panel {
  margin: 8px 16px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  --market-accent: var(--primary);
}
.market-panel.is-down { --market-accent: var(--danger); }
.market-panel #marketLine { stroke: var(--market-accent); }

.market-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px 0;
}
.market-select {
  flex: 1; min-width: 0;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 12px; font-size: 13px; font-weight: 600;
  outline: none; appearance: none;
}
.market-live {
  display: flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--text-dim); flex-shrink: 0;
}
.market-live.is-on { color: var(--success); }
.market-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
}
.market-live.is-on .market-dot { animation: marketPulse 1.8s ease-in-out infinite; }
@keyframes marketPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

.market-price-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 10px 14px 6px;
}
.market-price { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.market-price.tick-up { animation: marketTickUp 0.6s ease-out; }
.market-price.tick-down { animation: marketTickDown 0.6s ease-out; }
@keyframes marketTickUp { from { color: var(--success); } to { color: var(--text); } }
@keyframes marketTickDown { from { color: var(--danger); } to { color: var(--text); } }

.market-change { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.market-change.is-up { color: var(--success); }
.market-change.is-down { color: var(--danger); }
.market-range {
  display: flex; flex-direction: column; gap: 2px; text-align: right;
  font-size: 11px; color: var(--text-dim); white-space: nowrap;
}

.market-chart-wrap { position: relative; height: 150px; }
.market-chart { width: 100%; height: 100%; display: block; }
.market-empty {
  position: absolute; inset: 0; display: none;
  align-items: center; justify-content: center;
  font-size: 12px; color: var(--text-dim);
}

.market-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 14px 12px;
  border-top: 1px solid var(--border);
}
.market-intervals { display: flex; gap: 4px; flex-wrap: wrap; }
.market-interval {
  background: none; border: 1px solid transparent; color: var(--text-muted);
  border-radius: 8px; padding: 5px 9px; font-size: 11px; font-weight: 600;
  cursor: pointer;
}
.market-interval:hover { color: var(--text); }
.market-interval.is-active {
  background: var(--tint); border-color: var(--border-strong); color: var(--text);
}
.market-trade-btn {
  background: var(--market-accent); color: var(--on-primary);
  border-radius: 20px; padding: 8px 20px;
  font-size: 13px; font-weight: 700; text-decoration: none; flex-shrink: 0;
}

/* ── Simulation ribbon & disclaimer ──────────
   Both are compliance surface, not decoration: the ribbon says which kind of
   account this is, the footer note says what the product is. Neither is
   allowed to look like something you can dismiss and forget. */
.sim-ribbon {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: color-mix(in srgb, var(--warning) 16%, var(--surface));
  border-bottom: 1px solid color-mix(in srgb, var(--warning) 40%, transparent);
  color: var(--warning);
  font-size: 12px; line-height: 1.4;
  text-decoration: none;
  position: sticky; top: 0; z-index: 50;
}
.sim-ribbon strong { color: var(--warning); }
.sim-ribbon span { color: var(--text); }
.sim-ribbon .icon { width: 15px; height: 15px; flex-shrink: 0; }

.app-disclaimer {
  padding: 16px 16px calc(var(--nav-height) + 20px);
  font-size: 11px; line-height: 1.7;
  color: var(--text-dim);
  text-align: center;
}
.app-disclaimer a { color: var(--text-muted); text-decoration: underline; margin-left: 4px; }
/* Auth screens set their own spacing — no bottom nav to clear there. */
.auth-page .app-disclaimer { padding-bottom: 16px; }

/* ── Auth Pages ─────────────────────────────── */
.auth-page {
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  position: relative;
  z-index: 1;
}

/* ── Sign-in backdrop ───────────────────────────
   Sign-in is the one screen a new user judges the product on, so it gets a
   moving backdrop. Two layers, both optional:
     · a looping MP4 at wwwroot/media/login-bg.mp4, used only if that file
       exists — the markup falls back on its own when it does not;
     · a pure-CSS market animation that costs no bandwidth and always works,
       including where autoplay is blocked (iOS Low Power Mode, data saver).
   Everything sits behind a veil so the card never loses contrast. */
.auth-bg {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; background: var(--bg);
  pointer-events: none;
}
.auth-bg-video {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Muted so it reads as texture, not as something demanding attention. */
  opacity: 0.55; filter: saturate(0.85);
}
/* Slow drifting light. Transform/opacity only — the compositor handles both,
   so this does not cost a repaint on a low-end phone. */
.auth-bg-glow {
  position: absolute; border-radius: 50%;
  filter: blur(70px); opacity: 0.5;
  will-change: transform;
}
.auth-bg-glow.one {
  width: 60vmax; height: 60vmax; top: -22vmax; left: -18vmax;
  background: radial-gradient(circle, color-mix(in srgb, var(--primary) 30%, transparent), transparent 70%);
  animation: authDrift 26s ease-in-out infinite alternate;
}
.auth-bg-glow.two {
  width: 52vmax; height: 52vmax; bottom: -20vmax; right: -16vmax;
  background: radial-gradient(circle, color-mix(in srgb, var(--info) 28%, transparent), transparent 70%);
  animation: authDrift 34s ease-in-out infinite alternate-reverse;
}
@keyframes authDrift {
  from { transform: translate3d(0,0,0) scale(1); }
  to   { transform: translate3d(6vmax, 5vmax, 0) scale(1.12); }
}

/* A market line that draws itself, loops, and stays out of the way. */
.auth-bg-chart {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: 42vh; opacity: 0.5;
}
.auth-bg-chart .line {
  fill: none; stroke: var(--primary); stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1400; stroke-dashoffset: 1400;
  animation: authDraw 9s ease-in-out infinite;
}
.auth-bg-chart .fill { fill: url(#authFade); opacity: 0.5; }
@keyframes authDraw {
  0%   { stroke-dashoffset: 1400; }
  55%  { stroke-dashoffset: 0; }
  85%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Readability first: without this the form sits on moving light. */
.auth-bg-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 40%, rgba(0,0,0,0.35), rgba(0,0,0,0.82) 70%),
    linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0.75));
}

/* Someone who asked the OS for less motion gets a still image of the same
   scene rather than nothing. */
@media (prefers-reduced-motion: reduce) {
  .auth-bg-glow, .auth-bg-chart .line { animation: none; }
  .auth-bg-chart .line { stroke-dashoffset: 0; }
  .auth-bg-video { display: none; }
}
.auth-logo {
  text-align: center;
  margin-bottom: 28px;
}
.auth-logo .logo-icon { font-size: 40px; margin-bottom: 10px; }
.auth-logo .logo-text {
  font-size: 22px; font-weight: 700; color: var(--text);
  letter-spacing: -0.02em;
}
.auth-logo .logo-sub { font-size: 13px; color: var(--text-muted); }
.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: var(--shadow-lg);
}
.auth-card h2 {
  font-size: 24px; font-weight: 700; margin-bottom: 6px;
  color: var(--text); letter-spacing: -0.02em;
}
.auth-card .auth-sub { font-size: 14px; color: var(--text-muted); margin-bottom: 24px; }
.auth-footer { text-align: center; margin-top: 16px; font-size: 13px; color: var(--text-muted); }
.auth-footer a { color: var(--primary); font-weight: 600; text-decoration: none; }

/* ── Validation ─────────────────────────────── */
/* ── Inline field errors ────────────────────── */
.field-validation-error {
  color: #FF8A8A;
  font-size: 12px;
  margin-top: 5px;
  display: block;
  font-weight: 500;
}
.form-control.input-validation-error { border-color: var(--danger); }

/* ── Validation summary ─────────────────────────────────────────
   Sits on a raised surface with a full border and a solid accent
   bar so it is unmistakable against the black page. */
.validation-summary-errors {
  background: var(--surface-3);
  border: 1px solid rgba(255,77,77,0.45);
  border-left: 4px solid var(--danger);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
  color: var(--text);
  font-size: 13px;
  line-height: 1.55;
  box-shadow: var(--shadow-lg);
}
.validation-summary-errors ul { margin: 0; padding-left: 18px; }
.validation-summary-errors li { margin: 2px 0; color: #FFD5D5; }
.validation-summary-errors ul:empty { display: none; }
.validation-summary-valid { display: none; }

/* ── Toast Notifications ────────────────────── */
.toast-container {
  position: fixed;
  top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 9999;
  width: calc(100% - 32px);
  max-width: 400px;
}
/* Raised above the page with a full outline — on pure black a bare
   panel with only a shadow is effectively invisible. */
.toast {
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: flex-start;
  gap: 11px;
  color: var(--text);
  animation: slideDown 0.3s ease;
}
.toast.success { border-left-color: var(--success); }
.toast.error   { border-left-color: var(--danger);  background: #2A1A1A; border-color: rgba(255,77,77,0.45); }
.toast.warning { border-left-color: var(--warning); background: #2A2213; border-color: rgba(255,176,32,0.40); }
.toast-icon { display: flex; align-items: center; line-height: 1; flex-shrink: 0; padding-top: 1px; }
.toast-icon .icon { width: 17px; height: 17px; }
.toast.success .toast-icon { color: var(--success); }
.toast.error .toast-icon { color: var(--danger); }
.toast.warning .toast-icon { color: var(--warning); }
.toast-msg { flex: 1; font-size: 13px; line-height: 1.55; color: var(--text); }
.toast-close {
  background: none; border: none; color: var(--text-dim);
  cursor: pointer; font-size: 18px; line-height: 1;
  padding: 0 2px; flex-shrink: 0;
}
.toast-close:hover { color: var(--text); }

/* A toast that offers somewhere to go — used by the support-reply alert,
   which drops the user straight into the conversation. */
.toast.support-toast { border-left-color: var(--primary); align-items: center; }
.toast.support-toast .toast-icon { color: var(--primary); }
.toast .toast-sub {
  display: block; font-size: 12px; color: var(--text-muted);
  margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.toast-action {
  flex-shrink: 0;
  background: var(--primary); color: var(--on-primary);
  font-size: 12px; font-weight: 700;
  padding: 6px 12px; border-radius: 14px;
  text-decoration: none;
}
.toast-action:hover { background: var(--primary-light); }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* ── Loading Overlay ────────────────────────── */
.loading-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 9998;
}
.spinner {
  width: 40px; height: 40px;
  border: 4px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Empty State ────────────────────────────── */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
}
.empty-state .empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.5; }
.empty-state p { font-size: 14px; }

/* ── Admin Layout ───────────────────────────── */
.admin-wrapper { display: flex; min-height: 100vh; }
.admin-sidebar {
  width: 220px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  color: var(--text);
  flex-shrink: 0;
  padding: 0;
}
.admin-sidebar .sidebar-brand {
  padding: 16px;
  font-size: 15px;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.admin-sidebar .sidebar-nav button {
  display: flex; align-items: center; gap: 10px;
}
.admin-sidebar .sidebar-nav a .icon,
.admin-sidebar .sidebar-nav button .icon { opacity: 0.85; }
.admin-sidebar .sidebar-nav a.active .icon { opacity: 1; }
.admin-sidebar .sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  font-size: 13px;
  transition: all 0.15s;
  border-left: 3px solid transparent;
}
.admin-sidebar .sidebar-nav a:hover {
  background: var(--tint);
  color: var(--text);
  border-left-color: var(--primary);
}
.admin-sidebar .sidebar-nav a.active {
  background: var(--tint-strong);
  color: var(--primary);
  border-left-color: var(--primary);
  font-weight: 700;
}
.admin-main {
  flex: 1;
  background-color: var(--bg);
  overflow: auto;
}
.admin-topbar {
  background: var(--surface);
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.admin-content { padding: 20px; }
.admin-card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 16px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}
.admin-card-title { font-size: 15px; font-weight: 600; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.admin-stat-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  border-left: 4px solid var(--primary);
}
.admin-stat-card.green { border-left-color: var(--success); }
.admin-stat-card.blue { border-left-color: var(--info); }
.admin-stat-card.orange { border-left-color: var(--frozen); }
.admin-stat-card .asc-label { font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.admin-stat-card .asc-value { font-size: 22px; font-weight: 700; color: var(--text); }

/* ── Table ──────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  background: var(--surface-2);
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1.5px solid var(--border);
  white-space: nowrap;
}
tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
tbody tr:hover { background: var(--surface-2); }

/* ── Pagination ─────────────────────────────── */
.pagination {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-top: 16px;
  flex-wrap: wrap;
}
.page-btn {
  padding: 6px 12px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  font-size: 13px;
  text-decoration: none;
  color: var(--text);
  transition: all 0.15s;
}
.page-btn:hover, .page-btn.active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

/* ── Utility ─────────────────────────────────── */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--text-muted); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-primary { color: var(--primary); }
.fw-bold { font-weight: 700; }
.fs-sm { font-size: 12px; }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; }
.d-flex { display: flex; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; }
.p-3 { padding: 12px; }
.divider { border: none; border-top: 1px solid var(--border); margin: 12px 0; }
.hidden { display: none; }

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

/* ── VIP Level Management ──────────────────────────── */
.vip-card { padding: 16px; transition: box-shadow 0.2s; }
.vip-card:hover { box-shadow: var(--shadow-lg); }
.vip-stat { background: var(--bg); border-radius: 8px; padding: 8px 10px; }
.vip-stat-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; margin-bottom: 2px; }
.vip-stat-value { font-size: 13px; font-weight: 600; }

/* ── Modals ─────────────────────────────────────────────────────
   One shared implementation. `.vip-modal-*` are kept as aliases so
   existing screens keep working; new screens should use `.modal-*`. */
.modal-overlay,
.vip-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.72);
  backdrop-filter: blur(2px);
  z-index: 9000; display: flex; align-items: flex-start;
  justify-content: center; padding: 24px 16px; overflow-y: auto;
}
.modal-box,
.vip-modal {
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: 14px;
  width: 100%; max-width: 700px; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; max-height: 90vh;
  animation: modalIn 0.16s ease-out;
}
.modal-box.modal-sm { max-width: 420px; }
@keyframes modalIn { from { opacity: 0; transform: translateY(-8px) scale(0.99); } to { opacity: 1; transform: none; } }

.modal-header,
.vip-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--surface);
  border-radius: 14px 14px 0 0; z-index: 1;
  font-size: 16px; font-weight: 700;
}
.modal-header h3,
.vip-modal-header h3 { font-size: 16px; font-weight: 700; margin: 0; }

.modal-close,
.modal-close-btn {
  background: none; border: none; font-size: 20px; cursor: pointer;
  color: var(--text-muted); padding: 2px 8px; line-height: 1; border-radius: 6px;
}
.modal-close:hover,
.modal-close-btn:hover { color: var(--text); background: var(--tint); }

.modal-body,
.vip-modal-body { padding: 18px 20px; overflow-y: auto; flex: 1; }

.modal-footer,
.vip-modal-footer {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 14px 20px; border-top: 1px solid var(--border);
  position: sticky; bottom: 0; background: var(--surface);
  border-radius: 0 0 14px 14px;
}
body.modal-open { overflow: hidden; }

/* ── Icons ──────────────────────────────────────────────────────
   Inline SVG, inherits colour and scales with font-size. */
.icon {
  width: 1.15em; height: 1.15em;
  display: inline-block; vertical-align: -0.2em;
  flex-shrink: 0;
}
.icon-lg { width: 1.5em; height: 1.5em; }
.icon-xl { width: 2em; height: 2em; }

/* Ticker badge for assets without a bundled vector mark */
.icon-ticker {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.62em; font-weight: 700; letter-spacing: 0.02em;
  line-height: 1; padding: 0.28em 0.42em;
  border: 1px solid currentColor; border-radius: 5px;
  white-space: nowrap; flex-shrink: 0;
}

/* Brand tints */
.icon-whatsapp { color: #25D366; }
.icon-telegram { color: #2AABEE; }
.icon-bitcoin  { color: #F7931A; }
.icon-ethereum { color: #C0C0C8; }
.icon-bnb      { color: #F0B90B; }
.icon-usdt     { color: #26A17B; }
.icon-usdc     { color: #2775CA; }
.icon-tron     { color: #EF0027; }

/* Label + icon pairing used across nav, buttons and list rows */
.ico-row { display: inline-flex; align-items: center; gap: 8px; }

/* ── Shared form chrome (used by VIP + Payment Method modals) ──── */
/* ── Phone field ─────────────────────────────
   A country button and the number inside one bordered row. The <select> is the
   real control and shows when scripts are off; app.js hides it and swaps in the
   searchable panel below, because a native popup is drawn by the OS as a white
   list that no page CSS can reach. */
.phone-field { position: relative; }

.phone-row {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.phone-row:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
}

/* Scripts off: a plain, properly themed select. Options are coloured too, or
   the OS list renders white-on-white in a dark theme. */
.phone-country { border: none; border-radius: 0; width: 45%; flex-shrink: 0; }
.phone-country option { background: var(--surface-2); color: var(--text); }
.phone-country.is-enhanced { display: none; }

.phone-picker {
  display: flex; align-items: center; gap: 7px;
  padding: 0 12px 0 14px;
  background: none; border: none; border-right: 1px solid var(--border);
  color: var(--text); cursor: pointer; white-space: nowrap; flex-shrink: 0;
}
.phone-picker:hover { background: var(--tint); }
.phone-iso {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--text-muted);
  background: var(--tint); border-radius: 5px; padding: 2px 5px;
}
.phone-dial { font-size: 14px; color: var(--text); font-variant-numeric: tabular-nums; }
.phone-caret { font-size: 10px; color: var(--text-dim); }

.phone-row .phone-national {
  flex: 1; min-width: 0;
  border: none; background: none; border-radius: 0;
  padding-left: 12px;
}
.phone-row .phone-national:focus { box-shadow: none; }

/* ── Country panel ─────────────────────────── */
.phone-panel {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
  margin-top: 6px;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.phone-field.is-open .phone-panel { display: block; }

.phone-search-wrap { padding: 10px; border-bottom: 1px solid var(--border); }
.phone-search {
  width: 100%; padding: 9px 12px; font-size: 13px;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; outline: none;
}
.phone-search:focus { border-color: var(--primary); }

.phone-options { max-height: 260px; overflow-y: auto; }
.phone-option {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; background: none; border: none; cursor: pointer;
  color: var(--text); font-size: 13px; text-align: left;
}
.phone-option:hover { background: var(--tint); }
/* The chosen country carries the accent, like every other selected state in
   the app, so it is findable at a glance in a list of 75. */
.phone-option.is-active {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  box-shadow: inset 3px 0 0 var(--primary);
}
.phone-option.is-active .phone-option-name { font-weight: 600; }
.phone-option.is-active .phone-option-dial { color: var(--primary); }
.phone-option-iso {
  font-size: 10px; font-weight: 700; color: var(--text-muted);
  background: var(--tint); border-radius: 4px; padding: 2px 5px;
  min-width: 30px; text-align: center; flex-shrink: 0;
}
.phone-option.is-active .phone-option-iso {
  color: var(--on-primary); background: var(--primary);
}
.phone-option-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-option-dial { color: var(--text-muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.phone-empty { padding: 16px; text-align: center; font-size: 12px; color: var(--text-dim); }

.req { color: var(--danger); }
.form-hint { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.form-section-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 12px; letter-spacing: 0.5px;
}

.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0; background: var(--border-strong);
  border-radius: 24px; cursor: pointer; transition: 0.25s;
}
.toggle-slider::before {
  content: ""; position: absolute; width: 18px; height: 18px;
  left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: 0.25s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--success); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }

/* ── Destructive / success button fills ────────────────────────
   --danger is tuned for text on a dark background; as a button FILL
   it leaves white text at ~3.3:1, so these use a deeper shade. */
.btn-danger {
  background: #C42B2B !important;
  color: #fff !important;
  border-color: #C42B2B !important;
}
.btn-danger:hover { background: #A82424 !important; }

.btn-success {
  background: #077526 !important;
  color: #fff !important;
  border-color: #077526 !important;
}
.btn-success:hover { background: #066123 !important; }

/* ── Status filter pills ───────────────────────────────────────
   Purpose-built so the active pill can never inherit .btn-primary's
   display:block / width:100% and stretch across the row. */
.filter-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.filter-tab {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 7px 16px; border-radius: 999px;
  font-size: 12px; font-weight: 500; white-space: nowrap;
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border-strong);
  text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.filter-tab:hover { color: var(--text); border-color: var(--text-dim); background: var(--tint); }
.filter-tab.active {
  background: var(--primary); color: var(--on-primary);
  border-color: var(--primary); font-weight: 600;
}
.filter-tab .count {
  margin-left: 7px; font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: 8px;
  background: var(--tint-strong);
}
.filter-tab.active .count { background: rgba(0,0,0,0.18); }

/* ── Styled confirm dialog (App.confirm) ───────────────────────── */
.app-confirm { align-items: center; }
.app-confirm .modal-box { max-width: 440px; }
.app-confirm .modal-body { padding-top: 16px; padding-bottom: 16px; }
.app-confirm .alert { font-size: 13px; line-height: 1.6; }

/* Unsaved-changes indicator (settings) */
.dirty-flag {
  display: none;
  font-size: 12px; font-weight: 600;
  color: var(--warning);
  padding: 5px 11px; border-radius: 999px;
  background: rgba(255,176,32,0.12);
  border: 1px solid rgba(255,176,32,0.4);
  white-space: nowrap;
}
.dirty-flag.is-visible { display: inline-block; }

/* ── Sidebar live counters ─────────────────────────────────────── */
.nav-count {
  display: none;
  margin-left: auto;
  min-width: 20px; height: 19px; padding: 0 6px;
  border-radius: 10px;
  background: var(--danger); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 19px;
  text-align: center; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.nav-count.is-visible { display: inline-block; }

/* ── Shared connection-lost banner (App.poll) ──────────────────── */
.conn-banner {
  position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 140%);
  z-index: 9500;
  display: flex; align-items: center; gap: 9px;
  padding: 9px 16px; border-radius: 999px;
  background: var(--surface-3); border: 1px solid rgba(255,176,32,0.45);
  color: var(--text); font-size: 12px;
  box-shadow: var(--shadow-lg);
  transition: transform 0.25s ease; pointer-events: none;
}
.conn-banner.is-visible { transform: translate(-50%, 0); }
.conn-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--warning); flex-shrink: 0;
  animation: connPulse 1.2s ease-in-out infinite;
}
@keyframes connPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

/* ── Payment method cards ──────────────────────────────────────── */
.pm-icon {
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  color: var(--text); font-size: 17px; font-weight: 700;
  flex-shrink: 0;
}
.pm-network {
  display: inline-block; font-size: 11px; color: var(--text-muted);
  background: var(--tint); border-radius: 6px;
  padding: 3px 8px; margin-bottom: 10px;
}
.pm-field { background: var(--surface-2); border-radius: 8px; padding: 7px 10px; }
.pm-field-lbl { color: var(--text-muted); font-size: 10px; margin-bottom: 1px; }

/* ── Banking vs Crypto chooser (deposit / withdrawal step 1) ───── */
.channel-choice { margin: 0 16px 12px; display: flex; flex-direction: column; gap: 10px; }
.choice-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px;
  text-decoration: none; color: var(--text);
  transition: border-color .15s, background .15s;
}
.choice-card:hover { border-color: var(--primary); background: var(--surface-2); color: var(--text); }
.choice-card.is-disabled { opacity: 0.5; }
.choice-icon {
  width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0;
  border: 1px solid var(--border-strong); background: var(--surface-2);
  display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.choice-body { flex: 1; min-width: 0; }
.choice-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.choice-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.choice-meta { font-size: 11px; color: var(--text-dim); margin-top: 5px; }
.choice-arrow { color: var(--text-dim); font-size: 22px; flex-shrink: 0; }

/* ── Support / Help Center Chat UI ────────────────── */

/* Chat list (ticket index) */
.chat-list { display: flex; flex-direction: column; }
.chat-list-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  text-decoration: none; color: var(--text);
  transition: background 0.15s;
}
.chat-list-item:hover, .chat-list-item.has-unread { background: var(--tint); }
.chat-list-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--primary); color: var(--on-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.chat-list-body { flex: 1; min-width: 0; }
.chat-list-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.chat-list-name { font-weight: 600; font-size: 14px; }
.chat-list-time { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.chat-list-bottom { display: flex; align-items: center; justify-content: space-between; }
.chat-list-preview { font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.chat-unread-dot { width: 10px; height: 10px; background: var(--primary); border-radius: 50%; flex-shrink: 0; }

/* Full-screen chat page layout */
.chat-page {
  display: flex; flex-direction: column;
  height: 100vh; max-width: 480px; margin: 0 auto;
  background: var(--bg);
}

/* Chat header */
.chat-header {
  background: var(--surface); color: var(--text); border-bottom: 1px solid var(--border);
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  position: sticky; top: 0; z-index: 10; flex-shrink: 0;
}
.chat-back { color: white; font-size: 20px; text-decoration: none; padding: 4px 8px 4px 0; }
.chat-header-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;
}
.chat-header-info { flex: 1; min-width: 0; }
.chat-header-name { font-weight: 600; font-size: 14px; }
.chat-header-sub { font-size: 11px; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Messages scroll area */
.chat-messages {
  flex: 1; overflow-y: auto; padding: 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.admin-chat-messages {
  flex: 1; overflow-y: auto; padding: 12px;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--bg);
}

/* Date divider */
.chat-date-divider {
  text-align: center; margin: 8px 0;
  font-size: 11px; color: #666;
  background: rgba(255,255,255,0.7);
  padding: 3px 10px; border-radius: 12px;
  display: inline-block; align-self: center;
}

/* Bubble wrapper */
.chat-bubble-wrap {
  display: flex; align-items: flex-end; gap: 6px;
  max-width: 85%;
}
.chat-bubble-wrap.me { align-self: flex-end; flex-direction: row-reverse; }
.chat-bubble-wrap.them { align-self: flex-start; }

.chat-bubble-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--primary); color: var(--on-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0; margin-bottom: 2px;
}

/* Bubble */
.chat-bubble {
  padding: 8px 10px; border-radius: 12px;
  word-break: break-word; line-height: 1.45;
  max-width: 100%;
}
.bubble-me {
  background: var(--tint-strong);
  border-bottom-right-radius: 3px;
}
/* Incoming message. This was a hardcoded white left over from the light
   theme — body text is white, so every reply the other side sent was white
   on white and read as an empty bubble. Both chats share these classes, so
   it hid admin replies from users and user messages from admins alike. */
.bubble-them {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-bottom-left-radius: 3px;
}
.chat-bubble-text { font-size: 13px; white-space: pre-wrap; }
.chat-bubble-time {
  font-size: 10px; color: var(--text-dim);
  text-align: right; margin-top: 3px;
  display: flex; align-items: center; justify-content: flex-end; gap: 3px;
}
.chat-read-tick { color: var(--text-dim); font-size: 11px; }
.chat-read-tick.read { color: var(--info); }

/* Attachment in bubble */
.chat-attachment-img { display: block; }
.chat-attachment-img img {
  max-width: 220px; max-height: 220px;
  border-radius: 8px; object-fit: cover; display: block;
  margin-bottom: 4px;
}
.chat-attachment-file {
  display: flex; align-items: center; gap: 6px;
  /* Lightened, not darkened: a black wash disappears against these surfaces. */
  background: rgba(255,255,255,0.08); border-radius: 8px;
  padding: 8px 10px; margin-bottom: 4px;
  font-size: 12px; color: var(--text); text-decoration: none;
  max-width: 220px;
}
.chat-attachment-file span:last-child {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Input bar */
.chat-input-bar { background: var(--surface); border-top: 1px solid var(--border); flex-shrink: 0; }
.chat-input-row {
  display: flex; align-items: flex-end; gap: 6px;
  padding: 8px 10px;
}
.chat-attach-btn {
  font-size: 22px; cursor: pointer;
  padding: 6px; color: #555; flex-shrink: 0;
  line-height: 1;
}
.chat-textarea {
  flex: 1; border: 1px solid var(--border); border-radius: 20px;
  padding: 9px 14px; font-size: 13px;
  outline: none; resize: none;
  font-family: inherit; line-height: 1.4;
  /* Raised surface, not --surface: the bar behind it is --surface, so the
     field needs its own step on the ramp to read as a field at all. */
  background: var(--surface-2); color: var(--text);
  max-height: 120px;
}
.chat-textarea:focus { border-color: var(--primary); }
.chat-textarea::placeholder { color: var(--text-dim); }
.chat-send-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--primary); color: var(--on-primary);
  border: none; cursor: pointer; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.chat-closed-bar {
  padding: 14px 16px; background: var(--bg);
  border-top: 1px solid var(--border);
  text-align: center; font-size: 13px; color: var(--text-muted);
}

/* File upload area (NewTicket page) */
.file-upload-area {
  border: 2px dashed var(--border); border-radius: 10px;
  padding: 20px; cursor: pointer; text-align: center;
  transition: border-color 0.2s;
}
.file-upload-area:hover { border-color: var(--primary); }