/* ==========================================================================
   ALAA — Earn. Play. Reward.
   Premium dark design system · gold accents · glass · glow
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --bg: #07080a;
  --bg-soft: #0c0e12;
  --bg-card: #111319;
  --bg-card-2: #151821;
  --bg-elevated: #171a24;
  --bg-input: #0e1014;

  --gold: #f5c518;
  --gold-soft: #ffd95e;
  --gold-deep: #c99c13;
  --gold-grad: linear-gradient(135deg, #ffe08a 0%, #f5c518 45%, #c99c13 100%);

  --green: #26d07c;
  --green-soft: #4ade80;
  --green-dim: rgba(38, 208, 124, 0.12);

  --red: #ef4d64;
  --red-soft: #ff6b81;
  --red-dim: rgba(239, 77, 100, 0.12);

  --amber: #fbbf24;
  --blue: #60a5fa;
  --blue-dim: rgba(96, 165, 250, 0.12);
  --violet: #8b5cf6;
  --rose: #fb7185;

  --text: #f4f5f7;
  --text-soft: #b6bcc9;
  --text-muted: #7c8394;
  --text-faint: #565d6e;

  --border: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.13);
  --glass: rgba(255, 255, 255, 0.045);
  --glass-strong: rgba(17, 19, 25, 0.72);

  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --radius-full: 999px;

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
  --glow-gold: 0 0 24px rgba(245, 197, 24, 0.22);
  --glow-green: 0 0 22px rgba(38, 208, 124, 0.18);

  --font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Cascadia Code', monospace;

  --sidebar-w: 252px;
  --nav-h: 68px;
  --ll-h: 40px;
  --ll-gap: 20px;
  --mn-h: 64px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(245, 197, 24, 0.05), transparent 60%),
    radial-gradient(1000px 500px at 0% 0%, rgba(38, 208, 124, 0.03), transparent 55%),
    var(--bg);
  color: var(--text);
  line-height: 1.55;
  min-height: 100vh;
  font-size: 15px;
  letter-spacing: 0.01em;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--gold); text-decoration: none; transition: color 0.2s var(--ease); }
a:hover { color: var(--gold-soft); }

h1, h2, h3, h4 { font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
h1 { font-size: clamp(1.9rem, 4.2vw, 3rem); }
h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }

::selection { background: rgba(245, 197, 24, 0.28); color: #fff; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #23262f; border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #303440; }

/* ---------- Utilities ---------- */
.container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 20px; }
.container-narrow { max-width: 760px; }

.hidden { display: none !important; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--text-muted); }
.text-soft { color: var(--text-soft); }
.text-gold { color: var(--gold); }
.text-green { color: var(--green); }
.text-red { color: var(--red); }
.text-sm { font-size: 0.85rem; }
.text-xs { font-size: 0.75rem; }
.text-lg { font-size: 1.15rem; }
.font-mono { font-family: var(--font-mono); }
.font-bold { font-weight: 700; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: 0.5rem; } .mb-1 { margin-bottom: 0.5rem; }
.mt-2 { margin-top: 1rem; } .mb-2 { margin-bottom: 1rem; }
.mt-3 { margin-top: 1.5rem; } .mb-3 { margin-bottom: 1.5rem; }
.mt-4 { margin-top: 2rem; } .mb-4 { margin-bottom: 2rem; }
.flex { display: flex; }.inline-flex { display: inline-flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.flex-wrap { flex-wrap: wrap; }
.gap-1 { gap: 0.5rem; } .gap-2 { gap: 1rem; } .gap-3 { gap: 1.5rem; }
.grid { display: grid; }
.grow { flex: 1 1 auto; }
.w-full { width: 100%; }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--bg-card-2);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.72rem 1.25rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--btn-bg);
  color: var(--text);
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition: all 0.22s var(--ease);
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
  text-align: center;
}

.btn:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-primary {
  background: var(--gold-grad);
  color: #17140a;
  border-color: transparent;
  box-shadow: var(--glow-gold);
}
.btn-primary:hover { filter: brightness(1.05); box-shadow: 0 0 34px rgba(245, 197, 24, 0.34); }
.btn-primary:disabled { box-shadow: none; }

.btn-ghost { background: transparent; border-color: var(--border-strong); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.04); }

.btn-green { background: linear-gradient(135deg, #2fe387 0%, #1fb96a 100%); color: #06220f; border-color: transparent; }
.btn-green:hover { box-shadow: var(--glow-green); }

.btn-danger { background: var(--red-dim); color: var(--red-soft); border-color: rgba(239, 77, 100, 0.25); }
.btn-danger:hover { box-shadow: 0 0 24px rgba(239, 77, 100, 0.18); }

.btn-sm { padding: 0.42rem 0.85rem; font-size: 0.82rem; border-radius: 8px; }
.btn-lg { padding: 0.95rem 1.6rem; font-size: 1rem; }
.btn-block { width: 100%; }
.btn-icon { padding: 0.55rem; border-radius: 10px; }
.btn svg, .btn i { flex: 0 0 auto; }

/* Button loading animation — landing + auth (join free, login, create account) */
.btn.is-loading { pointer-events: none; position: relative; color: transparent !important; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255,255,255,0.32);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: btn-spin 0.65s linear infinite;
}
.btn-primary.is-loading::after { border-color: rgba(23,20,10,0.22); border-top-color: #17140a; }
.btn-ghost.is-loading::after { border-color: rgba(255,255,255,0.18); border-top-color: var(--text); }
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* Ripple */
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  transform: scale(0);
  animation: ripple 0.6s var(--ease);
  pointer-events: none;
}
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

/* ---------- Forms ---------- */
.form { display: grid; gap: 1.1rem; }

.field { display: grid; gap: 0.4rem; }

.field label, .f-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-soft);
  letter-spacing: 0.02em;
}

.field .hint { font-size: 0.75rem; color: var(--text-muted); }

.field input[type='text'],
.field input[type='email'],
.field input[type='password'],
.field input[type='number'],
.field input[type='search'],
.field input[type='tel'],
.field input[type='url'],
.field select,
.field textarea,
.input {
  width: 100%;
  padding: 0.78rem 0.95rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
}

/* Standalone native <select> (period pickers, filters, portals) — keep it
   readable on the sheet and fully visible on the dark admin shell. Without a
   base rule the native control renders as a white box until it is opened. */
.select {
  width: 100%;
  padding: 0.78rem 0.95rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a93a8' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.4rem;
  background-color: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
}

.select:focus {
  outline: none;
  border-color: rgba(245, 197, 24, 0.55);
  box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.12);
}

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238a93a8' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.4rem;
}

.field input:focus, .field select:focus, .field textarea:focus, .input:focus {
  outline: none;
  border-color: rgba(245, 197, 24, 0.55);
  box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.12);
}

.field select { padding-right: 2.4rem; }

.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: rgba(245, 197, 24, 0.55);
  box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.12);
}

.field textarea { resize: vertical; min-height: 110px; }

/* Flat native <select>: keep every period/sort/filter dropdown looking native
   on the light sheet but fully readable on the dark admin shell. */
.input, .select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
}
.input:focus, .select:focus {
  outline: none;
  border-color: rgba(245, 197, 24, 0.55);
  box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.12);
}

.field .error { font-size: 0.78rem; color: var(--red-soft); }

.checkbox {
  display: flex; align-items: flex-start; gap: 0.6rem;
  cursor: pointer; font-size: 0.88rem; color: var(--text-soft);
}
.checkbox input { accent-color: var(--gold); width: 1.05rem; height: 1.05rem; margin-top: 0.1rem; cursor: pointer; }

.toggle { position: relative; display: inline-block; width: 42px; height: 24px; flex: 0 0 auto; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle .track {
  position: absolute; inset: 0; background: #2a2e38; border-radius: var(--radius-full);
  transition: background 0.2s; cursor: pointer; border: 1px solid var(--border);
}
.toggle .track::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  background: #8a93a8; border-radius: 50%; transition: all 0.25s var(--ease);
}
.toggle input:checked + .track { background: rgba(245, 197, 24, 0.9); }
.toggle input:checked + .track::after { transform: translateX(18px); background: #17140a; }

.input-group { display: flex; gap: 0.5rem; }
.input-group .input { flex: 1; }
.input-group .btn { flex: 0 0 auto; }

/* ---------- Alerts ---------- */
.alert {
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--glass);
  font-size: 0.9rem;
  display: flex; gap: 0.6rem; align-items: flex-start;
}
.alert-success { border-color: rgba(38, 208, 124, 0.3); background: var(--green-dim); color: var(--green-soft); }
.alert-danger { border-color: rgba(239, 77, 100, 0.3); background: var(--red-dim); color: var(--red-soft); }
.alert-info { border-color: rgba(96, 165, 250, 0.3); background: var(--blue-dim); color: #93c5fd; }
.alert-gold { border-color: rgba(245, 197, 24, 0.28); background: rgba(245, 197, 24, 0.08); color: var(--gold); }

/* ---------- Push opt-in prompt (floating popup, never shifts the page) ---------- */
.push-banner {
  position: fixed; z-index: 140;
  right: 1.25rem; bottom: 1.25rem;
  width: min(340px, calc(100vw - 2rem));
  display: flex; align-items: flex-start; gap: 0.7rem;
  padding: 0.85rem 2.1rem 0.85rem 0.9rem;
  border: 1px solid rgba(245, 197, 24, 0.28);
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  color: var(--text-soft);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  animation: pushBannerIn 0.35s var(--ease) both;
}
.push-banner[hidden] { display: none; }
.push-banner-ico { flex: 0 0 auto; color: var(--gold); display: inline-flex; }
.push-banner-copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.push-banner-copy b { font-size: 0.85rem; color: var(--text); }
.push-banner-copy span { font-size: 0.78rem; color: var(--text-muted); line-height: 1.45; }
.push-banner .btn { flex: 0 0 auto; align-self: flex-start; margin-top: 0.2rem; }
.push-banner-dismiss {
  position: absolute; top: 0.45rem; right: 0.45rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--text-faint); cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.push-banner-dismiss:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }
.push-banner-dismiss svg { width: 13px; height: 13px; }
@keyframes pushBannerIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 768px) {
  .push-banner { left: 0.85rem; right: 0.85rem; bottom: calc(var(--mn-h) + env(safe-area-inset-bottom) + 0.85rem); width: auto; }
}
@media (prefers-reduced-motion: reduce) { .push-banner { animation: none; } }

.push-optin { cursor: pointer; }
.push-optin:hover { border-color: var(--border-strong); background: var(--bg-card-2); }
.push-optin .mm-switch { pointer-events: none; }
.push-optin-note {
  margin: 0.15rem 0 0; padding: 0 0.3rem;
  font-size: 0.74rem; color: var(--text-faint); line-height: 1.45;
}

/* ---------- Cards ---------- */
.card {
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem;
}
.card-solid { background: var(--bg-card); }

.card-hover { transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s; }
.card-hover:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.card-pad-sm { padding: 1rem; }
.card-pad-lg { padding: 1.8rem; }

.card-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.card-title { font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: 0.6rem; }

/* Stat cards */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }

/* Responsive content grids (replace fixed inline `grid-template-columns` so
   columns collapse on narrow screens). */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
.grid-2-tight { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }

/* Grid items default to min-width:auto, so a card wrapping a table with
   min-width:640px would refuse to shrink and blow the page sideways. Reset
   it so .table-wrap can actually scroll instead of overflowing the viewport. */
.grid-2 > *, .grid-3 > *, .grid-2-tight > * { min-width: 0; }

/* Grid items also default to align-items:stretch, which forces an empty card
   ("No data in period") to match its tallest sibling — huge dead space.
   Size each card to its own content instead. */
.grid-2, .grid-3, .grid-2-tight { align-items: start; }

@media (max-width: 1080px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
/* Stack table cards early: a 640px-min table inside a half-width tablet
   column would only scroll horizontally. */
@media (max-width: 768px) {
  .grid-3, .grid-2, .grid-2-tight { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2, .grid-2-tight { grid-template-columns: 1fr; }
}
.stat {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--bg-card-2), var(--bg-card));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
  transition: transform 0.25s var(--ease), border-color 0.25s;
}
.stat:hover { transform: translateY(-3px); border-color: rgba(245, 197, 24, 0.25); }
.stat::before {
  content: ''; position: absolute; top: -60px; right: -40px; width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(245, 197, 24, 0.09), transparent 70%); border-radius: 50%;
}
.stat .stat-label { color: var(--text-muted); font-size: 0.76rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.stat .stat-value { font-size: 1.55rem; font-weight: 800; letter-spacing: -0.02em; margin-top: 0.3rem; }
.stat .stat-value.gold { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat .stat-value.green { color: var(--green); }
.stat .stat-delta { font-size: 0.75rem; margin-top: 0.2rem; color: var(--text-muted); }
.stat .stat-icon {
  position: absolute; top: 1rem; right: 1rem; width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; background: rgba(255, 255, 255, 0.05); color: var(--gold);
}

/* ---------- Badges / pills ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.28rem 0.7rem;
  border-radius: var(--radius-full);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.03em; text-transform: uppercase;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-soft);
  white-space: nowrap;
}
.badge-gold { background: rgba(245, 197, 24, 0.12); color: var(--gold); border-color: rgba(245, 197, 24, 0.3); }
.badge-green { background: var(--green-dim); color: var(--green); border-color: rgba(38, 208, 124, 0.3); }
.badge-red { background: var(--red-dim); color: var(--red-soft); border-color: rgba(239, 77, 100, 0.3); }
.badge-blue { background: var(--blue-dim); color: #93c5fd; border-color: rgba(96, 165, 250, 0.3); }
.badge-amber { background: rgba(251, 191, 36, 0.1); color: var(--amber); border-color: rgba(251, 191, 36, 0.28); }
.badge-dim { opacity: 0.65; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--glass); }
table.table { width: 100%; border-collapse: collapse; min-width: 640px; }
.table thead th {
  text-align: left; padding: 0.85rem 1.1rem;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted); background: rgba(255, 255, 255, 0.02);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table tbody td { padding: 0.95rem 1.1rem; border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background 0.15s; }
.table tbody tr:hover { background: rgba(255, 255, 255, 0.025); }
.table .num { font-variant-numeric: tabular-nums; }

/* ---------- Avatar ---------- */
.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: linear-gradient(135deg, rgba(245, 197, 24, 0.25), rgba(245, 197, 24, 0.05));
  color: var(--gold); font-weight: 800; font-size: 0.95rem;
  border: 1px solid rgba(245, 197, 24, 0.24);
  flex: 0 0 auto;
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
/* The shared silhouette carries no intrinsic size, so every avatar box scales
   it to fit rather than relying on per-call width/height attributes. */
.avatar > svg { width: 58%; height: 58%; }
.avatar-sm { width: 30px; height: 30px; font-size: 0.75rem; }
.avatar-lg { width: 60px; height: 60px; font-size: 1.4rem; }
.avatar-default { background: linear-gradient(135deg, #232838, #14161d); color: var(--text-soft); border-color: var(--border); }

/* ---------- Navbar (guest + app) ---------- */
.navbar {
  position: sticky; top: 0; z-index: 60;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(7, 8, 10, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.navbar-inner { display: flex; align-items: center; gap: 0.8rem; width: 100%; }

.brand { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 800; font-size: 1.22rem; letter-spacing: 0.02em; }
.brand .logo {
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--gold-grad); color: #17140a;
  font-weight: 900; font-size: 1.08rem;
  box-shadow: var(--glow-gold);
  flex: 0 0 auto;
}
.brand .logo svg { width: 22px; height: 22px; }

/* Header logo — fills the navbar height (keeps a 4px total breathing margin,
   so it never pokes outside the header) and derives its width from the height.
   No fixed pixel width -> the ratio is preserved and it scales with --nav-h.
   The button box (.navbar .brand) and every logo child are hard-capped to the
   navbar height so nothing can exceed the header's outer bounds. */
.navbar .brand { max-height: calc(var(--nav-h) - 4px); }
.navbar .brand .logo {
  height: calc(var(--nav-h) - 4px);
  max-height: calc(var(--nav-h) - 4px);
  width: auto;
  aspect-ratio: 1;
  border-radius: 16px;
  font-size: 1.25rem;
}
.navbar .brand .logo svg { width: 30px; height: 30px; }
.brand-mark { color: var(--text); text-decoration: none; }
.brand-mark:hover { color: var(--text); }
.brand-badge { font-size: 0.62rem !important; padding: 0.22rem 0.5rem !important; vertical-align: middle; margin-left: 0.35rem; }

.nav-links { display: flex; align-items: center; gap: 0.2rem; }
.nav-links a {
  padding: 0.55rem 0.85rem; border-radius: 10px;
  color: var(--text-soft); font-size: 0.92rem; font-weight: 600;
  text-decoration: none;
  transition: color 0.16s ease, background 0.16s ease;
}
.nav-links a:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.nav-links a.active { color: var(--gold); background: rgba(245, 197, 24, 0.08); }
.nav-links a:focus-visible { outline: 2px solid rgba(245, 197, 24, 0.7); outline-offset: -2px; }

.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 0.7rem; }

/* Hamburger — present in the DOM always, shown only inside the app/admin shell */
.burger {
  display: none;
  align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.burger svg { width: 22px; height: 22px; }
.burger:hover { border-color: rgba(245, 197, 24, 0.5); background: rgba(245, 197, 24, 0.08); color: var(--gold); }
.burger:active { transform: scale(0.94); }
.burger:focus-visible { outline: 2px solid rgba(245, 197, 24, 0.7); outline-offset: 2px; }

/* Header avatar chip */
.nb-avatar {
  width: 36px; height: 36px; font-size: 0.8rem;
  border: 1px solid rgba(245, 197, 24, 0.28);
  box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.5);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.nb-avatar:hover { border-color: rgba(245, 197, 24, 0.7); box-shadow: 0 0 18px -6px rgba(245, 197, 24, 0.55); transform: translateY(-1px); }
.nb-avatar:focus-visible { outline: 2px solid rgba(245, 197, 24, 0.7); outline-offset: 2px; }

/* Header points counter */
.pts-counter {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.85rem 0.42rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(245, 197, 24, 0.28);
  background:
    linear-gradient(135deg, rgba(245, 197, 24, 0.14), rgba(245, 197, 24, 0.04));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.pts-counter::before {
  content: ''; position: absolute; top: -20px; right: -16px; width: 56px; height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 197, 24, 0.12), transparent 70%);
  pointer-events: none;
}
.pts-ico {
  width: 18px; height: 18px; flex: 0 0 auto;
  color: var(--gold);
  filter: drop-shadow(0 0 6px rgba(245, 197, 24, 0.4));
}
.pts-num {
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.pts-counter:hover {
  border-color: rgba(245, 197, 24, 0.6);
  background:
    linear-gradient(135deg, rgba(245, 197, 24, 0.19), rgba(245, 197, 24, 0.06));
  box-shadow: 0 0 24px -10px rgba(245, 197, 24, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transform: translateY(-1px);
}
.pts-counter:active { transform: scale(0.97); }
.pts-counter:focus-visible { outline: 2px solid rgba(245, 197, 24, 0.7); outline-offset: 2px; }

@media (max-width: 480px) {
  .pts-counter { padding: 0.38rem 0.7rem 0.38rem 0.5rem; gap: 0.4rem; }
  .pts-num { font-size: 0.88rem; }
  .navbar-inner { gap: 0.6rem; }
  .nav-actions { gap: 0.5rem; }
}

/* ---------- App shell ----------
   The Live Leads bar sits in-flow directly below the sticky navbar, so the
   shell naturally starts below it — no fixed-offset padding hacks. The sticky
   offsets below account for the compact bar only while it is actually present
   in the DOM. */
.shell { display: flex; min-height: calc(100vh - var(--nav-h)); }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 auto;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--border);
  background: rgba(10, 11, 14, 0.55);
  position: sticky; top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  overflow: hidden;
}

.sidebar-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1.1rem 0.9rem 1.4rem;
}
.sidebar-head {
  display: none;
  align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.95rem 1rem;
  border-bottom: 1px solid var(--border);
  background: rgba(10, 11, 14, 0.8);
}
.sidebar-close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--border); border-radius: 11px;
  background: rgba(255, 255, 255, 0.04); color: var(--text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}
.sidebar-close svg { width: 18px; height: 18px; }
.sidebar-close:hover { border-color: rgba(245, 197, 24, 0.5); color: var(--gold); background: rgba(245, 197, 24, 0.08); }
.sidebar-close:active { transform: scale(0.94); }
.sidebar-close:focus-visible { outline: 2px solid rgba(245, 197, 24, 0.7); outline-offset: 2px; }

.side-group { margin-bottom: 1.6rem; }
.side-label { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-faint); padding: 0 0.7rem; margin-bottom: 0.5rem; }

.side-link {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.6rem 0.7rem;
  border-radius: 10px;
  color: var(--text-soft); font-size: 0.9rem; font-weight: 600;
  text-decoration: none;
  margin-bottom: 0.15rem;
  transition: color 0.16s ease, background 0.16s ease;
  position: relative;
}
.side-link svg { width: 18px; height: 18px; flex: 0 0 auto; opacity: 0.85; }
.side-link:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.side-link:hover svg { opacity: 1; }
.side-link:focus-visible { outline: 2px solid rgba(245, 197, 24, 0.55); outline-offset: -2px; }
.side-link.active {
  color: var(--gold);
  background: linear-gradient(90deg, rgba(245, 197, 24, 0.12), rgba(245, 197, 24, 0.04));
}
.side-link.active::before {
  content: ''; position: absolute; left: -0.9rem; top: 7px; bottom: 7px; width: 3px;
  border-radius: 4px; background: var(--gold-grad);
}

/* Withdrawals dropdown in admin sidebar */
.side-dropdown { margin-bottom: 0.15rem; }
.side-dropdown-head { width: 100%; cursor: pointer; border: 0; background: transparent; text-align: left; }
.side-dropdown-head .side-arrow { transition: transform 0.2s ease; }
.side-dropdown.is-open .side-arrow { transform: rotate(180deg); }
.side-dropdown-body { display: flex; flex-direction: column; padding: 0.25rem 0 0.35rem 0.6rem; gap: 0.08rem; }
.side-dropdown-body[hidden] { display: none !important; }
.side-link--sub { padding: 0.5rem 0.7rem 0.5rem 1.4rem; font-size: 0.86rem; font-weight: 500; margin-bottom: 0.08rem; }
.side-link--sub .side-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); flex: 0 0 auto; }
.side-link--sub.active .side-dot { background: var(--gold); box-shadow: 0 0 8px rgba(245,197,24,0.5); }

.content { flex: 1 1 auto; padding: 1.6rem 1.8rem 3rem; min-width: 0; }

/* Mobile bottom navigation — shown only on small screens (see the media block
   below); hidden here so huge desktop pages never render the bar. */
.mobile-nav { display: none; }

.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.page-title { font-size: 1.35rem; font-weight: 800; }
.page-sub { color: var(--text-muted); font-size: 0.87rem; margin-top: 0.15rem; }

/* ---------- Offer cards ---------- */
.offer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.1rem; }

.offer-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--glass);
  backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.offer-card:hover { transform: translateY(-5px); border-color: rgba(245, 197, 24, 0.3); box-shadow: var(--shadow-lg); }
.offer-card:hover .offer-art { transform: scale(1.05); }

.offer-art {
  height: 132px;
  background:
    radial-gradient(140px 90px at 20% 0%, rgba(245, 197, 24, 0.16), transparent 70%),
    linear-gradient(150deg, #1b1f2a, #0f1117);
  display: grid; place-items: center;
  transition: transform 0.5s var(--ease);
}
.offer-art img { width: 100%; height: 100%; object-fit: cover; }
.offer-art .art-icon { font-size: 2.6rem; opacity: 0.9; }

.offer-body { padding: 1.05rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }

.offer-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.offer-title { font-size: 0.98rem; font-weight: 700; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.offer-reward {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-weight: 800; color: var(--gold); font-size: 0.98rem;
  background: rgba(245, 197, 24, 0.1);
  border: 1px solid rgba(245, 197, 24, 0.25);
  padding: 0.32rem 0.8rem; border-radius: var(--radius-full);
  white-space: nowrap;
}

.offer-footer { margin-top: auto; display: grid; gap: 0.6rem; }

/* Trending card (hero mock) */
.trend-card {
  position: relative;
  display: flex; gap: 0.9rem; align-items: center;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
  transition: all 0.25s var(--ease);
}
.trend-card:hover { border-color: rgba(245, 197, 24, 0.3); transform: translateX(4px); }
.trend-card .rank { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-weight: 800; font-size: 0.75rem; background: rgba(255, 255, 255, 0.06); color: var(--text-soft); flex: 0 0 auto; }
.trend-card .rank.gold { background: var(--gold-grad); color: #17140a; }

/* ---------- Progress ---------- */
.progress { height: 8px; background: #1d212b; border-radius: var(--radius-full); overflow: hidden; }
.progress .bar { height: 100%; border-radius: var(--radius-full); background: var(--gold-grad); transition: width 0.8s var(--ease); width: 0; }
.progress .bar.green { background: linear-gradient(90deg, #1fb96a, #2fe387); }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 0.3rem; border-bottom: 1px solid var(--border); margin-bottom: 1.4rem; overflow-x: auto; }
.tab {
  padding: 0.65rem 1.1rem; border-radius: 10px 10px 0 0;
  color: var(--text-muted); font-weight: 600; font-size: 0.9rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--gold); border-bottom-color: var(--gold); }

/* ---------- Landing hero ---------- */
.hero { position: relative; padding: 4.5rem 0 3rem; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(700px 380px at 75% 18%, rgba(245, 197, 24, 0.09), transparent 65%),
    radial-gradient(520px 300px at 8% 30%, rgba(38, 208, 124, 0.05), transparent 60%);
}
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 3rem; align-items: center; }

/* Admin-uploaded banner behind the landing hero (optional). */
.hero-banner { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-banner img { width: 100%; height: 100%; object-fit: cover; opacity: 0.32; display: block; }
.hero-banner::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 10, 14, 0.15) 0%, rgba(8, 10, 14, 0.45) 55%, rgba(8, 10, 14, 0.88) 100%);
}

.hero-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.42rem 0.95rem; border-radius: var(--radius-full);
  background: rgba(245, 197, 24, 0.09); border: 1px solid rgba(245, 197, 24, 0.28);
  color: var(--gold); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em;
}

.hero h1 { margin: 1.1rem 0 1rem; }
.hero h1 .grad { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero .lead { color: var(--text-soft); font-size: 1.06rem; max-width: 34rem; }

.hero-stats { display: flex; gap: 2.4rem; margin-top: 2.2rem; flex-wrap: wrap; }
.hero-stat .v { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; }
.hero-stat .v.gold { color: var(--gold); }
.hero-stat .v.green { color: var(--green); }
.hero-stat .l { color: var(--text-muted); font-size: 0.8rem; }

/* Dashboard mock */
.mock-wrap {
  position: relative;
  perspective: 1400px;
}
@media (prefers-reduced-motion: no-preference) {
  .mock-wrap.tilted { transition: transform 0.2s ease-out; transform-style: preserve-3d; }
}
.mock {
  position: relative;
  background: var(--glass-strong);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  padding: 1.15rem;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.mock::before {
  content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
}
.mock .mock-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.9rem; }
.mock .mock-dots { display: flex; gap: 4px; }
.mock .mock-dots i { width: 8px; height: 8px; border-radius: 50%; background: #2b2f3a; }
.mock .mock-dots i:first-child { background: var(--red); }
.mock .mock-dots i:nth-child(2) { background: var(--amber); }
.mock .mock-dots i:nth-child(3) { background: var(--green); }

.mock .mock-balance { text-align: center; padding: 0.4rem 0 1rem; }
.mock .mock-balance .l { color: var(--text-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; }
.mock .mock-balance .v { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.03em; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mock .mock-balance .d { color: var(--green); font-size: 0.8rem; }

.mock .mock-gauge { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 0.9rem; }
.mock .mock-chip { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); border-radius: 12px; padding: 0.6rem 0.75rem; }
.mock .mock-chip .l { font-size: 0.66rem; color: var(--text-muted); }
.mock .mock-chip .v { font-size: 0.95rem; font-weight: 700; }

.mock .mock-rows { display: grid; gap: 0.5rem; }
.mock .mock-row {
  display: flex; align-items: center; gap: 0.7rem;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border);
  border-radius: 11px; padding: 0.55rem 0.7rem;
  animation: mockPulse 3.4s ease-in-out infinite;
}
.mock .mock-row:nth-child(2) { animation-delay: 0.7s; }
.mock .mock-row:nth-child(3) { animation-delay: 1.4s; }
.mock .mock-row:nth-child(4) { animation-delay: 2.1s; }
.mock .mock-row .ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(245, 197, 24, 0.12); color: var(--gold); flex: 0 0 auto; }
.mock .mock-row .ttl { flex: 1; font-size: 0.75rem; font-weight: 600; }
.mock .mock-row .ttl small { display: block; color: var(--text-muted); font-weight: 400; font-size: 0.66rem; }
.mock .mock-row .pty { font-size: 0.78rem; font-weight: 800; color: var(--gold); }
.mock .mock-row .ok { font-size: 0.78rem; font-weight: 800; color: var(--green); }

@keyframes mockPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.65; } }

/* Floating glow orbs */
.orb {
  position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; z-index: 0;
  animation: orbFloat 9s ease-in-out infinite;
}
.orb-gold { width: 240px; height: 240px; background: rgba(245, 197, 24, 0.10); top: -60px; right: -40px; }
.orb-green { width: 200px; height: 200px; background: rgba(38, 208, 124, 0.07); bottom: -60px; left: -30px; animation-delay: 3s; }
@keyframes orbFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }

/* ---------- Reveal / animation ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }

@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.floaty { animation: floaty 5s ease-in-out infinite; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.fade-up { animation: fadeUp 0.5s var(--ease) both; }

/* Living feed */
.feed { display: grid; gap: 0.55rem; }
.feed-item {
  display: flex; align-items: center; gap: 0.75rem;
  background: var(--glass); border: 1px solid var(--border);
  border-radius: 11px; padding: 0.6rem 0.8rem;
  font-size: 0.85rem;
  animation: feedIn 0.5s var(--ease) both;
}
.feed-item .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
@keyframes feedIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* Pulsing status dot (used by Live badges and status pills). */
.dot-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  display: inline-block; background: var(--green);
  box-shadow: 0 0 8px rgba(38, 208, 124, 0.8);
  animation: dotPulse 1.8s ease-in-out infinite;
}
.dot-dot.gold { background: var(--gold); box-shadow: 0 0 8px rgba(245, 197, 24, 0.8); }
@keyframes dotPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .dot-dot { animation: none; } }
.feed-label { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ---------- Landing: How it works ---------- */
.hiw-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.hiw-step { position: relative; overflow: hidden; }
.hiw-num {
  position: absolute; top: -0.4rem; right: 0.4rem;
  font-size: 3.4rem; font-weight: 900; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(245, 197, 24, 0.28);
  pointer-events: none; user-select: none;
}
.hiw-ico {
  width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: 0.8rem;
  background: linear-gradient(135deg, #ffe08a, #f5c518 45%, #c99c13);
  color: #17140a; box-shadow: 0 6px 18px -8px rgba(245, 197, 24, 0.7);
}
.hiw-step h3 { margin: 0 0 0.4rem; font-size: 1rem; }
@media (min-width: 640px) { .hiw-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .hiw-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---------- Landing: activity + earners split ---------- */
.land-split { display: grid; gap: 1.2rem; align-items: start; grid-template-columns: 1fr; }
@media (min-width: 900px) { .land-split { grid-template-columns: 1fr 1fr; gap: 1.4rem; } }

/* ---------- Landing: Future Offers & Our Partners marquee ---------- */
.mq-label {
  margin: 1.1rem 0 0.55rem;
  font-size: 0.72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-muted);
}
.mq-label:first-of-type { margin-top: 0; }

/* Packed marquee train: items sit edge-to-edge in one endless strip that the
   script recycles node-by-node, so the row is always dense with no gaps and
   no overlapping. Future deals travel right-to-left, partners left-to-right. */
.mq-flow {
  position: relative; overflow: hidden;
  padding: 0.15rem 0 0.7rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.mq-flow--fo { height: 158px; }
.mq-flow--partners { height: 62px; }
.mq-flow + .mq-label { margin-top: 0.9rem; }

.mq-train { display: flex; align-items: stretch; height: 100%; width: max-content; will-change: transform; }
.mq-train > * { flex: 0 0 auto; margin-right: 0.85rem; }
.mq-flow .mq-card, .mq-flow .mq-brand { height: 100%; }
.mq-flow .mq-title { flex: 1; }

/* Future offer card in the marquee (site design language). */
.mq-card {
  flex: 0 0 auto; width: 178px;
  display: flex; flex-direction: column;
  padding: 0; cursor: pointer; font: inherit; text-align: left;
  text-decoration: none; color: inherit;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden;
  transition: transform 0.22s var(--ease), border-color 0.22s, box-shadow 0.22s;
}
.mq-card:hover { transform: translateY(-4px); border-color: rgba(245, 197, 24, 0.4); box-shadow: var(--shadow-lg); }
.mq-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mq-art {
  position: relative; height: 96px;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(90px 60px at 20% 0%, rgba(245, 197, 24, 0.18), transparent 70%),
    linear-gradient(150deg, #1b1f2a, #0f1117);
}
.mq-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mq-art-icon { font-size: 1.7rem; opacity: 0.9; }
.mq-reward {
  position: absolute; right: 0.45rem; bottom: 0.45rem;
  font-size: 0.72rem; font-weight: 800; color: var(--gold); white-space: nowrap;
  background: rgba(8, 10, 14, 0.78);
  border: 1px solid rgba(245, 197, 24, 0.35);
  padding: 0.18rem 0.5rem; border-radius: 999px;
}
.mq-title {
  padding: 0.55rem 0.65rem 0.65rem;
  font-size: 0.8rem; font-weight: 700; line-height: 1.35; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.9em;
}

/* Partner brand chip in the marquee. */
.mq-brand {
  flex: 0 0 auto; min-width: 172px;
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 0.95rem 0.6rem 0.6rem;
  text-decoration: none; color: inherit;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: transform 0.22s var(--ease), border-color 0.22s, box-shadow 0.22s;
}
.mq-brand:hover { transform: translateY(-3px); border-color: rgba(245, 197, 24, 0.4); box-shadow: var(--shadow-lg); }
.mq-brand:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mq-brand img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: block; flex-shrink: 0; background: #0b0d11; }
.mq-brand-fallback {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-size: 0.72rem; font-weight: 900; color: #17140a;
  background: linear-gradient(135deg, #ffe08a, #f5c518 45%, #c99c13);
}
.mq-brand-name { font-size: 0.84rem; font-weight: 700; color: #fff; white-space: nowrap; }

@media (max-width: 640px) {
  .mq-flow--fo { height: 140px; }
  .mq-flow--partners { height: 56px; }
  .mq-card { width: 148px; }
  .mq-art { height: 80px; }
  .mq-brand { min-width: 150px; padding: 0.5rem 0.8rem 0.5rem 0.5rem; }
  .mq-train > * { margin-right: 0.65rem; }
}

/* ---------- Landing: CTA ---------- */
.cta-card {
  background: linear-gradient(150deg, rgba(245, 197, 24, 0.08), var(--glass) 55%);
  border: 1px solid rgba(245, 197, 24, 0.25);
  box-shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.8), 0 0 40px -18px rgba(245, 197, 24, 0.35);
}
.cta-badge { margin-bottom: 0.8rem; }
.cta-actions { display: flex; align-items: center; justify-content: center; gap: 0.9rem; flex-wrap: wrap; }
@media (max-width: 560px) {
  .cta-actions { flex-direction: column; align-items: stretch; }
  .cta-actions .btn { width: 100%; }
}

/* ---------- Small-screen tightening (feed + leaderboard) ---------- */
@media (max-width: 480px) {
  .feed-item { font-size: 0.8rem; padding: 0.55rem 0.7rem; gap: 0.55rem; }
  .feed-when { display: none; }
  .lb-row { gap: 0.6rem; padding: 0.6rem 0.65rem; }
  .lb-name { font-size: 0.84rem; }
  .lb-points { font-size: 0.82rem; white-space: nowrap; }
}

/* ---------- Toast ---------- */
#toasts { position: fixed; top: 1rem; right: 1rem; z-index: 200; display: grid; gap: 0.6rem; max-width: 360px; }
.toast {
  display: flex; gap: 0.7rem; align-items: flex-start;
  padding: 0.85rem 1rem;
  background: var(--glass-strong); backdrop-filter: blur(18px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  font-size: 0.88rem;
  animation: toastIn 0.35s var(--ease) both;
}
.toast.out { animation: toastOut 0.3s var(--ease) both; }
.toast .t-icon { flex: 0 0 auto; margin-top: 0.1rem; }
.toast-success { border-left: 3px solid var(--green); }
.toast-error { border-left: 3px solid var(--red); }
.toast-info { border-left: 3px solid var(--gold); }
@keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(40px); } }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(5, 6, 8, 0.72);
  backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center; padding: 1rem;
  overflow-y: auto; overscroll-behavior: contain;
  animation: fadeIn 0.25s var(--ease) both;
}
.modal-backdrop[hidden] { display: none; }
.modal { width: min(520px, calc(100vw - 1.5rem)); max-height: calc(100vh - 2rem); overflow-y: auto; overscroll-behavior: contain; margin: auto 0; animation: modalIn 0.3s var(--ease) both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(-14px) scale(0.97); } to { opacity: 1; transform: none; } }

/* ---------- Page (public / FAQ / legal) ---------- */
.page-shell { padding: 3.5rem 0 5rem; }
.page-hero { margin-bottom: 2.2rem; }

.legal h2 { margin-top: 2.2rem; font-size: 1.2rem; }
.legal p, .legal li { color: var(--text-soft); font-size: 0.95rem; }
.legal ul { padding-left: 1.2rem; }

.faq-item { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--glass); margin-bottom: 0.7rem; overflow: hidden; }
.faq-item .q { padding: 1rem 1.2rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; cursor: pointer; font-weight: 600; }
.faq-item .q .chev { transition: transform 0.3s var(--ease); color: var(--text-muted); }
.faq-item.open .q .chev { transform: rotate(180deg); }
.faq-item .a { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--ease); }
.faq-item .a-inner { padding: 0 1.2rem 1.1rem; color: var(--text-soft); font-size: 0.92rem; }

/* ---------- Divider ---------- */
.divider { height: 1px; background: var(--border); margin: 1.4rem 0; border: 0; }
.divider-soft { height: 1px; background: rgba(255, 255, 255, 0.04); margin: 1rem 0; border: 0; }

/* ---------- Empty state ---------- */
.empty { text-align: center; padding: 3.5rem 1.5rem; }
.empty .empty-icon { font-size: 2.4rem; opacity: 0.35; margin-bottom: 0.9rem; }
.empty h3 { color: var(--text-soft); font-size: 1.05rem; }
.empty p { color: var(--text-muted); font-size: 0.88rem; margin-top: 0.35rem; }

/* ---------- Leaderboard ---------- */
.lb-row { display: flex; align-items: center; gap: 0.85rem; padding: 0.7rem 0.8rem; border-radius: 11px; border: 1px solid transparent; }
.lb-row:hover { background: rgba(255, 255, 255, 0.03); }
.lb-row + .lb-row { border-top-color: rgba(255, 255, 255, 0.04); }
.lb-name { flex: 1; min-width: 0; font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-points { font-weight: 800; color: var(--gold); font-size: 0.9rem; }

/* ---------- Chat / messages ---------- */
.msg { display: flex; gap: 0.7rem; margin-bottom: 0.9rem; }
.msg-customer { flex-direction: row-reverse; }
.msg .bubble { max-width: 78%; padding: 0.75rem 0.95rem; border-radius: 14px; font-size: 0.9rem; background: var(--bg-card-2); border: 1px solid var(--border); }
.msg-customer .bubble { background: rgba(245, 197, 24, 0.1); border-color: rgba(245, 197, 24, 0.22); }
.msg .meta { font-size: 0.7rem; color: var(--text-faint); margin-top: 0.3rem; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--border); padding: 2.4rem 0 2rem; margin-top: 4rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; }
.footer h5 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: 0.8rem; }
.footer a { display: block; color: var(--text-soft); font-size: 0.86rem; padding: 0.22rem 0; }
.footer a:hover { color: var(--gold); }
.footer-lower { margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--text-faint); font-size: 0.8rem; }

/* ---------- Auth pages ---------- */
.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; position: relative; overflow: hidden; background: radial-gradient(600px 400px at 20% 10%, rgba(245,197,24,0.06), transparent 60%), radial-gradient(500px 300px at 90% 90%, rgba(38,208,124,0.05), transparent 60%), var(--bg); }
.auth-card { width: min(440px, 100%); background: linear-gradient(165deg, rgba(255,255,255,0.025), var(--bg-card)); border: 1px solid rgba(245,197,24,0.14); box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 32px rgba(245,197,24,0.06); border-radius: 20px; position: relative; overflow: hidden; }
.auth-card::before { content: ""; position: absolute; top: -80px; right: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(245,197,24,0.1), transparent 70%); pointer-events: none; }
.auth-card.card-pad-lg { padding: 2rem 1.8rem; }
.auth-card--wide { width: min(520px, 100%); }

.auth-icon { width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 1.1rem; display: grid; place-items: center; background: var(--gold-grad); color: #17140a; box-shadow: var(--glow-gold), 0 8px 20px rgba(245,197,24,0.22); position: relative; }
.auth-icon::after { content: ""; position: absolute; inset: 0; border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,0.22), transparent 55%); pointer-events: none; }
.auth-icon svg { width: 30px; height: 30px; }
.input-wrap { position: relative; }
.input-wrap svg { position: absolute; left: 0.95rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-muted); pointer-events: none; z-index: 1; }
.input-wrap .input { padding-left: 2.9rem !important; padding-inline-start: 2.9rem !important; }
.input-wrap:focus-within svg { color: var(--gold); }
.auth-trust { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px dashed var(--border); font-size: 0.76rem; color: var(--text-muted); flex-wrap: wrap; }
.auth-trust span { display: inline-flex; align-items: center; gap: 0.35rem; }

/* Avatar picker — register */
.avatar-picker { display: flex; gap: 0.6rem; justify-content: center; align-items: center; padding: 0.75rem 1rem; border: 1px solid rgba(245,197,24,0.18); border-radius: 999px; background: rgba(0,0,0,0.35); flex-wrap: wrap; }
.avatar-option { position: relative; cursor: pointer; }
.avatar-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.avatar-option .avatar { width: 52px; height: 52px; border-radius: 50%; border: 3px solid transparent; display: grid; place-items: center; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; flex: 0 0 auto; }
.avatar-option input:checked + .avatar { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(245,197,24,0.25), 0 4px 14px rgba(245,197,24,0.32); transform: scale(1.06); }
.avatar-option:hover .avatar { transform: scale(1.04); }
.avatar--1 { background: linear-gradient(135deg, #a78bfa, #7c3aed); color: #fff; }
.avatar--2 { background: linear-gradient(135deg, #60a5fa, #2563eb); color: #fff; }
.avatar--3 { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #78350f; }
.avatar--4 { background: linear-gradient(135deg, #fda4af, #ef4444); color: #fff; }
.avatar--5 { background: linear-gradient(135deg, #6ee7b7, #0d9488); color: #fff; }
.avatar--6 { background: linear-gradient(135deg, #c4b5fd, #6d28d9); color: #fff; }
.avatar-picker .avatar svg { width: 26px; height: 26px; }
@media (max-width: 480px) { .avatar-picker { gap: 0.45rem; padding: 0.6rem 0.75rem; } .avatar-option .avatar { width: 46px; height: 46px; } }

/* ---------- Small screens ---------- */
@media (max-width: 1080px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .hero { padding-top: 3rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .burger { display: inline-flex; }

  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: min(320px, 86vw);
    height: auto;
    z-index: 80;
    padding: 0;
    background: #0a0b0f;
    border-right: 1px solid var(--border);
    transform: translateX(-102%);
    visibility: hidden;
    transition: transform 0.3s var(--ease), visibility 0.3s;
  }
  .sidebar.open {
    transform: translateX(0);
    visibility: visible;
    box-shadow: 24px 0 60px rgba(0, 0, 0, 0.45);
  }

  .sidebar-head { display: flex; }

  .sidebar-scroll { padding: 0.9rem 1rem 1.5rem; }

  body.sidebar-open { overflow: hidden; }

  .content { padding: 1.2rem 1rem 3rem; }
  .nav-links { display: none; }
}

.sidebar-scrim {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(4, 5, 7, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.sidebar-scrim.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }

@media (max-width: 560px) {
  .stat-grid { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  .stat { padding: 0.9rem 1rem; }
  .stat .stat-value { font-size: 1.25rem; }
  .offer-grid { grid-template-columns: 1fr; }
  .auth-card .card { padding: 1.2rem; }
  .hero-stats { gap: 1.4rem; }
  .footer-grid { grid-template-columns: 1fr; }

  .btn { padding: 0.66rem 1rem; }
  .table-wrap { margin-inline: -0.25rem; }
}

/* ---------- Mobile app shell ----------
   On small screens the desktop sidebar is removed entirely and replaced by a
   fixed bottom navigation. Everything here is scoped to the authenticated app
   shell (body.app-shell) so the admin layout and guest pages keep their own
   responsive behaviour. */
@media (max-width: 768px) {
  body.app-shell {
    overflow-x: clip;
    padding-bottom: calc(var(--mn-h) + env(safe-area-inset-bottom));
  }

  body.app-shell .burger,
  body.app-shell .sidebar,
  body.app-shell .sidebar-scrim { display: none; }

  body.app-shell .shell { display: block; }
  body.app-shell .content {
    padding: 1.1rem 1rem calc(var(--mn-h) + env(safe-area-inset-bottom) + 1rem);
  }

  /* Notification & account panels stay anchored just below the header and
     never grow past the bottom navigation. */
  .nb-pop, .mm-pop, .av-pop {
    position: fixed;
    top: calc(var(--nav-h) + 10px);
    left: auto;
    z-index: 120;
    max-height: calc(100vh - var(--nav-h) - var(--mn-h) - 2rem);
    overflow-y: auto;
  }
  /* Mobile: allow the panel to sit centrally when it can't fit in the right
     margin and extend to the left edge as well, so no content is ever
     clipped by the viewport. */
  @media (max-width: 640px) {
    .nb-pop { left: 0.75rem; right: 0.75rem; width: auto; }
  }
  .mm-pop { right: 0.75rem; width: min(300px, calc(100vw - 1.5rem)); }
  .av-pop { right: 0.75rem; width: min(240px, calc(100vw - 1.5rem)); }

  /* Bottom navigation */
  .mobile-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    background: rgba(8, 10, 13, 0.94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid var(--border-strong);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mn-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.18rem;
    padding: 0.5rem 0.2rem;
    color: var(--text-soft); font-size: 0.6rem; font-weight: 700;
    text-decoration: none;
    background: none; border: 0; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    white-space: nowrap;
    transition: color 0.15s ease;
  }
  .mn-item svg { width: 21px; height: 21px; opacity: 0.85; }
  .mn-item:hover { color: var(--text); }
  .mn-item.active { color: var(--gold); }
  .mn-item.active::before {
    content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
    width: 34px; height: 3px; border-radius: 0 0 4px 4px;
    background: var(--gold-grad);
  }
  .mn-item:focus-visible { outline: 2px solid rgba(245, 197, 24, 0.7); outline-offset: -2px; }

  /* "More" sheet */
  .mn-more { position: fixed; inset: 0; z-index: 110; display: flex; align-items: flex-end; justify-content: center; }
  .mn-more[hidden] { display: none; }
  .mn-more-scrim {
    position: absolute; inset: 0; width: 100%;
    background: rgba(4, 5, 7, 0.6);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: 0; cursor: default;
  }
  .mn-more-sheet {
    position: relative;
    width: 100%; max-width: 460px;
    background: #0d0f14;
    border-top: 1px solid var(--border-strong);
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    padding: 0.9rem 1rem calc(env(safe-area-inset-bottom) + 0.9rem);
    box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.6);
    animation: mn-sheet-in 0.28s var(--ease);
  }
  @keyframes mn-sheet-in {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
  .mn-more-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.1rem 0 0.4rem; }
  .mn-more-head span { font-weight: 800; font-size: 1rem; }
  .mn-more-sheet .side-group { margin-bottom: 0; }
  .mn-more-sheet .side-group + .side-group { margin-top: 1rem; }
}

@media (max-width: 420px) {
  .navbar .brand-mark .brand-name { display: none; }
}

/* ---------- Print ---------- */
@media print {
  .navbar, .sidebar, .footer { display: none !important; }
  body { background: #fff; color: #000; }
  .card, .table-wrap { border-color: #ddd; box-shadow: none; }
}
/* ---------- Page headers ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.page-head .page-title { margin: 0; font-size: 1.7rem; }
.page-head .page-sub { margin: .35rem 0 0; color: var(--text-muted); }

/* ---------- List rows ---------- */
.list { display: flex; flex-direction: column; }
.list-row { display: flex; align-items: center; gap: .9rem; padding: .8rem .25rem; border-bottom: 1px solid var(--border); }
.list-row:hover { background: rgba(255,255,255,.02); }
.list-row:last-child { border-bottom: 0; }
.list-title { font-weight: 600; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-sub { color: var(--text-muted); font-size: .78rem; margin-top: .15rem; }
.list-end { font-weight: 800; white-space: nowrap; }

/* ---------- Transaction icons ---------- */
.tx-ico { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; }
.tx-in { background: var(--green-dim); color: var(--green); }
.tx-out { background: var(--red-dim); color: var(--red-soft); }

/* ---------- Mini stats ---------- */
.mini-stat { padding: .7rem .8rem; border-radius: var(--radius); border: 1px solid var(--border); background: rgba(255,255,255,.02); text-align: center; }
.mini-stat .v { font-size: 1.3rem; font-weight: 800; }
.mini-stat .l { font-size: .7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }

/* ---------- Offer feed ---------- */
.offer-tools { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--glass); }
.offer-tag { position: absolute; top: .6rem; left: .6rem; padding: .22rem .6rem; border-radius: var(--radius-full); background: linear-gradient(135deg, #ffe08a, #f5c518 45%, #c99c13); color: #17140a; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.offer-art-list { width: 46px; height: 46px; border-radius: 12px; overflow: hidden; flex-shrink: 0; display: grid; place-items: center; background: rgba(245,197,24,.08); font-size: 1.4rem; }
.offer-art-list img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Chat ---------- */
.chat { display: flex; flex-direction: column; gap: 1rem; }
.chat-msg { max-width: 82%; border-radius: 16px; padding: .85rem 1rem; font-size: .9rem; line-height: 1.65; }
.chat-user { align-self: flex-start; background: rgba(255,255,255,.05); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.chat-staff { align-self: flex-end; background: linear-gradient(150deg, rgba(245,197,24,.14), rgba(245,197,24,.05)); border: 1px solid rgba(245,197,24,.25); border-bottom-right-radius: 4px; }
.chat-meta { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; font-size: .8rem; }
.chat-body { white-space: pre-wrap; word-break: break-word; }

/* ---------- Admin log viewer ---------- */
.log-meta {
  display: flex; flex-wrap: wrap; gap: .25rem 1.3rem; align-items: baseline;
  padding: .5rem .85rem; margin: 0 0 .8rem;
  font-size: .76rem; color: var(--text-muted);
  background: var(--glass); border: 1px solid var(--border); border-radius: 12px;
}
.log-meta strong { color: var(--text-soft); font-weight: 600; }
.log-meta code { color: var(--text-soft); font-family: var(--font-mono); }

.log-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: 0 0 .8rem;
}
.log-toolbar .field { margin: 0; }
.log-toolbar .input, .log-toolbar .select { padding: .5rem .7rem; font-size: .82rem; }
.log-toolbar .btn { padding: .48rem .8rem; font-size: .82rem; }
.log-toolbar .spacer { flex: 1 1 auto; }

.log-list { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--glass); }
.log-row {
  display: grid;
  grid-template-columns: minmax(66px, 84px) minmax(88px, 110px) minmax(145px, 180px) minmax(0, 1fr);
  gap: .6rem 1rem; align-items: baseline;
  padding: .45rem .85rem;
  border-bottom: 1px solid var(--border); border-left: 2px solid var(--border);
  font-size: .79rem; line-height: 1.45;
  transition: background .12s ease;
}
.log-row:last-child { border-bottom: 0; }
.log-row:hover { background: rgba(255, 255, 255, .03); }
.log-level { font-weight: 700; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.log-channel { font-family: var(--font-mono); font-size: .72rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.log-time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: .72rem; color: var(--text-muted); white-space: nowrap; }
.log-cell { min-width: 0; max-height: 9.5rem; overflow-y: auto; }
.log-msg-text { display: block; white-space: pre-wrap; word-break: break-word; font-size: .79rem; line-height: 1.5; color: var(--text); }
.log-context-details { margin-top: .35rem; }
.log-context-details summary { cursor: pointer; font-size: .7rem; color: var(--text-muted); }
.log-context {
  margin: .35rem 0 0; padding: .55rem .75rem; font-size: .71rem; line-height: 1.45;
  background: rgba(0, 0, 0, .32); border: 1px solid var(--border); border-radius: 6px;
  overflow-x: auto; white-space: pre-wrap; word-break: break-word; color: var(--text-soft);
  font-family: var(--font-mono);
}

/* Subtle per-level treatment: left accent + tinted label, no chunky pills. */
.log-row.lv-error { border-left-color: var(--red-soft); background: rgba(239, 77, 100, .04); }
.log-row.lv-error .log-level { color: var(--red-soft); }
.log-row.lv-warning { border-left-color: var(--amber); }
.log-row.lv-warning .log-level { color: var(--amber); }
.log-row.lv-notice { border-left-color: var(--gold-soft); }
.log-row.lv-notice .log-level { color: var(--gold-soft); }
.log-row.lv-info { border-left-color: rgba(245, 197, 24, .55); }
.log-row.lv-info .log-level { color: var(--gold); }
.log-row.lv-debug { border-left-color: var(--border-strong); }
.log-row.lv-debug .log-level { color: var(--text-faint); }
.log-row.lv-error:hover { background: rgba(239, 77, 100, .07); }
.log-row.lv-warning:hover, .log-row.lv-notice:hover, .log-row.lv-info:hover { background: rgba(245, 197, 24, .035); }

/* Tablet: drop the least important column (channel). */
@media (max-width: 1024px) {
  .log-row { grid-template-columns: minmax(60px, 74px) minmax(140px, 175px) minmax(0, 1fr); }
  .log-channel { display: none; }
}

/* Mobile: stack each entry cleanly — no horizontal overflow. */
@media (max-width: 640px) {
  .log-meta { gap: .2rem .9rem; font-size: .7rem; padding: .45rem .7rem; }
  .log-row { grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; gap: .1rem .6rem; padding: .5rem .7rem; font-size: .76rem; }
  .log-level { grid-column: 1; grid-row: 1; align-self: center; }
  .log-time { grid-column: 2; grid-row: 1; justify-self: end; align-self: center; }
  .log-channel { display: block; grid-column: 1 / -1; grid-row: 2; font-size: .68rem; }
  .log-cell { grid-column: 1 / -1; grid-row: 3; max-height: none; }
}

.log-pagination { margin-top: .9rem; }
.log-pagination .pagination, .log-pagination nav .flex { font-size: .78rem; }

/* ---------- Admin activity logs ---------- */
.mono { font-family: var(--font-mono); }
.act-filterbar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem;
  margin: 0 0 .9rem;
}
.act-filterbar .field { margin: 0; }
.act-filterbar .input, .act-filterbar .select { padding: .5rem .7rem; font-size: .82rem; }
.act-user { font-weight: 600; color: var(--text-soft); }
.act-action { font-weight: 600; color: var(--text); }

/* Activity feed (redesigned index) */
.act-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.act-svg { width: 18px; height: 18px; }

.act-panel { border: 1px solid var(--border); border-radius: var(--radius); background: var(--glass); overflow: hidden; }

.act-feed { list-style: none; margin: 0; padding: 0; }

.act-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .7rem 1.1rem;
  align-items: start;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--border);
  transition: background .15s ease;
}
.act-item:last-child { border-bottom: 0; }
.act-item:hover { background: rgba(255, 255, 255, .025); }
.act-item--fail { background: rgba(239, 77, 100, .03); }
.act-item--fail:hover { background: rgba(239, 77, 100, .06); }

.act-icon {
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: 12px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--border);
}
.act-icon--gold   { color: var(--gold);      background: rgba(245, 197, 24, .1);  border-color: rgba(245, 197, 24, .28); }
.act-icon--green  { color: var(--green);     background: var(--green-dim);        border-color: rgba(38, 208, 124, .28); }
.act-icon--blue   { color: var(--blue);      background: var(--blue-dim);         border-color: rgba(96, 165, 250, .28); }
.act-icon--red    { color: var(--red-soft);  background: var(--red-dim);          border-color: rgba(239, 77, 100, .3); }
.act-icon--amber  { color: var(--amber);     background: rgba(251, 191, 36, .1);  border-color: rgba(251, 191, 36, .26); }
.act-icon--soft   { color: var(--text-soft); background: rgba(255, 255, 255, .04); }
.act-icon--muted  { color: var(--text-faint); background: rgba(255, 255, 255, .03); }

.act-body { min-width: 0; }
.act-titleline { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .6rem; }
.act-title { font-weight: 600; color: var(--text); font-size: .9rem; }
.act-raw { font-size: .68rem; color: var(--text-faint); }
.act-chip {
  font-size: .68rem; font-weight: 600; letter-spacing: .02em; color: var(--text-soft);
  padding: .1rem .5rem; border: 1px solid var(--border); border-radius: 999px; background: rgba(255, 255, 255, .03);
}
.act-desc { margin: .25rem 0 0; color: var(--text-muted); font-size: .82rem; }

.act-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; margin-top: .45rem; font-size: .78rem; color: var(--text-muted); }
.act-actor { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: var(--text-soft); }
.act-actor .avatar { width: 22px; height: 22px; font-size: .6rem; }
.act-actor a { color: var(--text-soft); text-decoration: none; }
.act-actor a:hover { color: var(--gold); }
.act-when { font-variant-numeric: tabular-nums; white-space: nowrap; }

.act-end { display: flex; flex-direction: column; align-items: flex-end; gap: .45rem; }

.act-empty { text-align: center; padding: 2.6rem 1.2rem; }
.act-empty-icon {
  width: 52px; height: 52px; margin: 0 auto .8rem;
  border-radius: 16px; display: grid; place-items: center;
  color: var(--text-faint); background: rgba(255, 255, 255, .035); border: 1px solid var(--border);
}
.act-empty-icon .act-svg { width: 24px; height: 24px; }
.act-empty h3 { margin: 0 0 .25rem; font-size: 1rem; }
.act-empty p { margin: 0 0 1rem; color: var(--text-muted); font-size: .86rem; }

/* ---------- Ledger (transactions) ---------- */
.tx-stats { margin-bottom: 1.1rem; }
.stat .stat-value--red { color: var(--red-soft); }
.stat .stat-value--green { color: var(--green); }
.stat .stat-icon--green { color: var(--green); background: var(--green-dim); }
.stat .stat-icon--red { color: var(--red-soft); background: var(--red-dim); }
.stat .stat-icon--blue { color: var(--blue); background: var(--blue-dim); }

.led-ico { width: 32px; height: 32px; flex: 0 0 auto; border-radius: 10px; display: inline-grid; place-items: center; border: 1px solid var(--border); }
.led-ico svg { width: 16px; height: 16px; }
.led-ico--gold   { color: var(--gold);      background: rgba(245, 197, 24, .1);  border-color: rgba(245, 197, 24, .28); }
.led-ico--green  { color: var(--green);     background: var(--green-dim);        border-color: rgba(38, 208, 124, .28); }
.led-ico--blue   { color: var(--blue);      background: var(--blue-dim);         border-color: rgba(96, 165, 250, .28); }
.led-ico--red    { color: var(--red-soft);  background: var(--red-dim);          border-color: rgba(239, 77, 100, .3); }
.led-ico--amber  { color: var(--amber);     background: rgba(251, 191, 36, .1);  border-color: rgba(251, 191, 36, .26); }
.led-ico--soft   { color: var(--text-soft); background: rgba(255, 255, 255, .04); }

.tx-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1rem;
  padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--glass); margin-bottom: 1rem;
}
.tx-bar-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .55rem; }
.tx-bar-filters .field { margin: 0; }
.tx-bar-filters .input, .tx-bar-filters .select { padding: .62rem .85rem; font-size: .86rem; }
.tx-count { font-size: .8rem; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.tx-card { padding: 0; overflow: hidden; }
.tx-pagination { margin-top: 1.4rem; }

.tx-table { display: block; }
.tx-row {
  display: grid;
  align-items: center;
  padding: 0 1.1rem;
  transition: background .15s ease;
}
.tx-row--head { background: rgba(255, 255, 255, .02); border-bottom: 1px solid var(--border); }
.tx-row + .tx-row { border-top: 1px solid var(--border); }
.tx-row:hover { background: rgba(255, 255, 255, .025); }
.tx-row--debit { background: rgba(239, 77, 100, .012); }
.tx-row--debit:hover { background: rgba(239, 77, 100, .04); }
.tx-row--credit { background: rgba(38, 208, 124, .012); }
.tx-row--credit:hover { background: rgba(38, 208, 124, .04); }

.tx-th {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); padding: .85rem .5rem; white-space: nowrap;
}
.tx-cell { min-width: 0; padding: .95rem .5rem; }
.tx-th--num, .tx-num { text-align: right; }

.tx-table--user .tx-row { grid-template-columns: 112px minmax(185px, 215px) minmax(0, 1fr) 116px 92px 84px; }
.tx-table--admin .tx-row { grid-template-columns: minmax(225px, 260px) minmax(180px, 210px) minmax(0, 1fr) 118px 96px 80px 56px; }

.tx-date { display: block; font-weight: 600; font-size: .9rem; white-space: nowrap; }
.tx-time { display: block; font-size: .76rem; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.tx-type { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.tx-type-body { min-width: 0; }
.tx-type-label { display: block; font-weight: 600; font-size: .9rem; white-space: nowrap; }
.tx-chips { display: inline-flex; flex-wrap: wrap; gap: .3rem; margin-top: .15rem; }
.tx-chips .act-chip { padding: .08rem .5rem; font-size: .66rem; }
.tx-chips a.act-chip { text-decoration: none; }
.tx-chips a.act-chip:hover { color: var(--gold); border-color: rgba(245, 197, 24, .4); }

.tx-desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: .87rem; line-height: 1.45; color: var(--text-soft);
}
.tx-desc--none { color: var(--text-faint); font-style: italic; }

.tx-none { color: var(--text-faint); }

.tx-amt { font-size: .95rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: .01em; }
.tx-amt--up { color: var(--green); }
.tx-amt--down { color: var(--red-soft); }
.tx-amt--xl { font-size: 2rem; }

.tx-bal { font-size: .86rem; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tx-bal-label { display: none; }

.tx-member { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.tx-member .avatar { width: 34px; height: 34px; font-size: .78rem; flex: 0 0 auto; }
.tx-member-main { min-width: 0; }
.tx-member-name { display: block; font-weight: 600; font-size: .88rem; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-member-name:hover { color: var(--gold); }
.tx-member-name--ghost { color: var(--text-muted); }
.tx-member-sub { display: block; font-size: .74rem; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.tx-action {
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
  width: 34px; height: 34px;
  border: 1px solid var(--border); border-radius: 10px;
  background: rgba(255, 255, 255, .03); color: var(--text-soft);
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.tx-action:hover { border-color: rgba(245, 197, 24, .45); color: var(--gold); background: rgba(245, 197, 24, .08); }
.tx-action svg { width: 16px; height: 16px; }
.tx-action-label { display: none; }

/* Tablet: admin ledger drops the secondary columns */
@media (max-width: 1099px) and (min-width: 761px) {
  .tx-table--admin .tx-row { grid-template-columns: minmax(220px, 1fr) 200px 116px 94px 56px; }
  .tx-table--admin .tx-th-desc, .tx-table--admin .tx-th-bal { display: none; }
}

/* Mobile: each row becomes a card — no horizontal scroll */
@media (max-width: 760px) {
  .tx-row--head { display: none; }
  .tx-row { padding: 1rem .95rem; }
  .tx-cell { padding: 0; }

  .tx-table--user .tx-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "type type amt"
      "desc desc desc"
      "date status bal";
    gap: .55rem .75rem;
  }
  .tx-table--user .tx-th-date { grid-area: date; }
  .tx-table--user .tx-th-type { grid-area: type; }
  .tx-table--user .tx-th-desc { grid-area: desc; }
  .tx-table--user .tx-th-status { grid-area: status; }
  .tx-table--user .tx-th-amt { grid-area: amt; }
  .tx-table--user .tx-th-bal { grid-area: bal; }

  .tx-table--admin .tx-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "member member amt"
      "type type act"
      "desc desc desc"
      "status status bal";
    gap: .55rem .75rem;
  }
  .tx-table--admin .tx-th-member { grid-area: member; }
  .tx-table--admin .tx-th-type { grid-area: type; }
  .tx-table--admin .tx-th-desc { grid-area: desc; }
  .tx-table--admin .tx-th-status { grid-area: status; }
  .tx-table--admin .tx-th-amt { grid-area: amt; }
  .tx-table--admin .tx-th-bal { grid-area: bal; }
  .tx-table--admin .tx-th-act { grid-area: act; }

  .tx-bal-label { display: inline; color: var(--text-faint); }
  .tx-amt { font-size: 1rem; }
  .tx-bal { font-size: .82rem; }

  .tx-action { width: auto; height: auto; padding: .42rem .75rem; border-radius: 999px; }
  .tx-action-label { display: inline; font-size: .76rem; font-weight: 600; }
}

/* Ledger split (admin) + transaction detail */
.tx-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.2rem; align-items: start; }
.tx-side { position: sticky; top: 1rem; }
.tx-side .card-title { gap: .5rem; }
.tx-side .card-title .act-svg { width: 17px; height: 17px; color: var(--gold); }

.tx-show { max-width: 52rem; }
.tx-show > .card + .card { margin-top: 1.2rem; }
.tx-back { display: inline-flex; align-items: center; gap: .4rem; color: var(--text-muted); font-size: .85rem; text-decoration: none; margin-bottom: 1rem; transition: color .15s ease; }
.tx-back:hover { color: var(--gold); }
.tx-back svg { width: 16px; height: 16px; }
.tx-hero { position: relative; overflow: hidden; padding: 1.5rem 1.6rem; margin-bottom: 1.2rem; }
.tx-hero::before {
  content: ''; position: absolute; top: -80px; right: -50px; width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(245, 197, 24, .09), transparent 70%); pointer-events: none;
}
.tx-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.tx-hero-tier { display: flex; align-items: center; gap: .8rem; }
.tx-hero-type { font-size: 1.05rem; font-weight: 800; }
.tx-hero-raw { font-size: .72rem; color: var(--text-faint); margin-top: .15rem; }
.tx-hero-amount { display: flex; align-items: baseline; gap: .9rem; flex-wrap: wrap; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px dashed var(--border); }
.tx-hero-balance { color: var(--text-muted); font-size: .88rem; }
.tx-hero-balance strong { color: var(--text-soft); }

@media (max-width: 1024px) {
  .tx-split { grid-template-columns: 1fr; }
  .tx-side { position: static; }
}

@media (max-width: 640px) {
  .tx-bar { padding: .85rem .9rem; }
  .tx-bar-filters { width: 100%; }
  .tx-count { width: 100%; }
  .tx-hero { padding: 1.2rem 1.1rem; }
}

@media (max-width: 640px) {
  .act-item { grid-template-columns: auto minmax(0, 1fr); gap: .55rem .8rem; padding: .85rem .85rem; }
  .act-icon { width: 36px; height: 36px; border-radius: 10px; }
  .act-svg { width: 16px; height: 16px; }
  .act-end {
    grid-column: 1 / -1;
    flex-direction: row; align-items: center; justify-content: space-between;
    padding-top: .6rem; border-top: 1px dashed var(--border);
  }
}
.det-grid {
  display: grid; grid-template-columns: 150px minmax(0, 1fr);
  gap: .85rem 1.2rem; padding: .5rem 0;
}
.det-label { color: var(--text-muted); font-size: .74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; padding-top: .15rem; }
@media (max-width: 640px) { .det-grid { grid-template-columns: 1fr; gap: .4rem; } .det-grid .det-label { margin-top: .7rem; } }

/* ---------- Typography helpers ---------- */
.gold-grad-text { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.display-lg { font-size: clamp(2.6rem, 6vw, 4rem); font-weight: 900; letter-spacing: -.03em; line-height: 1; }
.text-green { color: var(--green); }
.text-red { color: var(--red-soft); }
.text-soft { color: var(--text-soft); }
.text-faint { color: var(--text-faint); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.prose { line-height: 1.8; }
.card-gold-border { border-color: rgba(245,197,24,.35); }
.avatar-xl { width: 84px; height: 84px; font-size: 2rem; border-radius: 24px; }

/* ---------- Empty states ---------- */
.empty { text-align: center; padding: 2.2rem 1rem; }
.empty-icon { font-size: 2rem; margin-bottom: .6rem; opacity: .8; }
.empty h3 { margin: 0 0 .3rem; }
.empty p { color: var(--text-muted); font-size: .88rem; margin: 0 0 1rem; }

/* ---------- Admin/report helpers ---------- */
.btn-xs { padding: .2rem .55rem; font-size: .7rem; border-radius: 8px; }
.offer-link { color: var(--text-soft); font-weight: 600; text-decoration: none; }
.offer-link:hover { color: var(--gold); }
.code-block { background: #0c0e12; border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1rem; font-family: 'Cascadia Code', Consolas, monospace; color: #c9cfe0; line-height: 1.55; max-height: 400px; overflow-y: auto; }
.offer-price { margin: .35rem 0 .6rem; }
.mb-2 { margin-bottom: .6rem; }
.mt-2 { margin-top: .6rem; }
summary { cursor: pointer; }
.fraud-resolve summary::-webkit-details-marker { display: none; }


/* ---------- Offerwall cards: compact partner logo grid ---------- */
.ow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
  align-items: stretch;
}

/* === Offerwall card === */
.ow-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.045) 0%, rgba(17, 19, 25, 0.96) 55%, rgba(10, 12, 16, 0.98) 100%);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.22s ease, box-shadow 0.22s ease;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  cursor: pointer;
  user-select: none;
}

/* Gold hairline along the top edge; widens and brightens on hover */
.ow-topline {
  position: absolute;
  top: 0;
  left: 50%;
  width: 42%;
  height: 2px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(245, 197, 24, 0.55), transparent);
  opacity: 0.45;
  transition: width 0.3s ease, opacity 0.3s ease;
  z-index: 5;
}
.ow-card:hover .ow-topline {
  width: 82%;
  opacity: 1;
}

.ow-card:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 197, 24, 0.5);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.52), 0 0 24px rgba(245, 197, 24, 0.16);
}
.ow-card:active {
  transform: translateY(-1px) scale(0.985);
}

/* SUPER tier card: a look of its own — warm top wash, double gold rim and a
   crown watermark behind the logo, so featured never reads as "another card". */
.ow-card.is-featured {
  border: 1.5px solid rgba(245, 197, 24, 0.65);
  box-shadow:
    0 0 0 1px rgba(245, 197, 24, 0.18),
    0 0 25px rgba(245, 197, 24, 0.18),
    0 8px 24px rgba(0, 0, 0, 0.4);
  background:
    radial-gradient(150px 84px at 50% -8%, rgba(245, 197, 24, 0.16), transparent 74%),
    radial-gradient(220px 120px at 50% 118%, rgba(245, 197, 24, 0.07), transparent 70%),
    linear-gradient(170deg, rgba(52, 42, 14, 0.55) 0%, rgba(17, 19, 25, 0.97) 52%, rgba(10, 12, 16, 0.99) 100%);
}

/* Crown watermark drifting slowly behind the featured logo */
.ow-card.is-featured .ow-media-stage::before {
  content: "";
  position: absolute;
  top: 8%;
  right: 8%;
  width: 40px;
  height: 40px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5c518' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21h18M4.2 18.4 3 8.4l5.3 4.1L12 4.6l3.7 7.9L21 8.4l-1.2 10z'/></svg>") center / contain no-repeat;
  opacity: 0.22;
  z-index: 2;
  pointer-events: none;
  animation: ow-crown-drift 6s ease-in-out infinite;
}

@keyframes ow-crown-drift {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.18; }
  50% { transform: translateY(-5px) rotate(-6deg); opacity: 0.3; }
}

/* Decorative sparkles orbiting the featured media */
.ow-featured-glow::before,
.ow-featured-glow::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(245, 197, 24, 0.9);
}

.ow-featured-glow::before {
  top: 26px;
  left: 26%;
  animation: ow-sparkle-a 3.2s ease-in-out infinite;
}

.ow-featured-glow::after {
  top: 40px;
  right: 24%;
  animation: ow-sparkle-b 4.1s ease-in-out infinite;
}

@keyframes ow-sparkle-a {
  0%, 100% { opacity: 0.15; transform: scale(0.7); }
  50% { opacity: 1; transform: scale(1.25); }
}
@keyframes ow-sparkle-b {
  0%, 100% { opacity: 0.1; transform: scale(0.6); }
  50% { opacity: 0.9; transform: scale(1.15); }
}

/* HOT tier card: ember pressure instead of the gold treatment */
.ow-card.is-hot {
  border-color: rgba(239, 110, 64, 0.38);
}
.ow-card.is-hot .ow-topline {
  width: 70%;
  opacity: 0.75;
  background: linear-gradient(90deg, transparent, rgba(255, 148, 51, 0.75), transparent);
}
.ow-card.is-hot:hover {
  border-color: rgba(255, 148, 51, 0.65);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.52), 0 0 24px rgba(255, 122, 51, 0.2);
}
.ow-card.is-hot .ow-media {
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 120, 40, 0.12) 0%, transparent 60%),
    radial-gradient(circle at 50% 55%, rgba(255, 255, 255, 0.04) 0%, rgba(12, 10, 9, 0.98) 100%);
}
.ow-card.is-hot:hover .ow-media-img {
  transform: scale(1.07) translateY(-2px) rotate(-2deg);
}

.ow-card.is-featured:hover {
  border-color: var(--gold);
  box-shadow:
    0 0 0 1px rgba(245, 197, 24, 0.25),
    0 0 36px rgba(245, 197, 24, 0.4),
    0 14px 36px rgba(0, 0, 0, 0.6);
}
.ow-card.is-featured .ow-topline {
  width: 100%;
  opacity: 0.85;
  height: 2.5px;
  background: linear-gradient(90deg, rgba(245, 197, 24, 0.15), var(--gold), rgba(245, 197, 24, 0.15));
}
.ow-card.is-featured .ow-topline::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  animation: ow-shine 3.4s ease-in-out infinite;
}

@keyframes ow-shine {
  0%, 60% { left: -60%; }
  100% { left: 130%; }
}

.ow-featured-glow {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 150px;
  height: 84px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 197, 24, 0.25), transparent 70%);
  pointer-events: none;
  z-index: 1;
}

.ow-card.is-locked {
  cursor: not-allowed;
  border-color: rgba(255, 255, 255, 0.05);
  background: rgba(13, 15, 21, 0.85);
}
.ow-card.is-locked .ow-topline {
  width: 100%;
  opacity: 0.3;
  background: linear-gradient(90deg, transparent, rgba(239, 77, 100, 0.5), transparent);
}
.ow-card.is-locked:hover {
  transform: none;
  border-color: rgba(239, 77, 100, 0.3);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

/* Image-led media container: textured dark stage with a soft radial glow */
.ow-media {
  position: relative;
  height: clamp(104px, 13vw, 132px);
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 22%, rgba(245, 197, 24, 0.07) 0%, transparent 62%),
    radial-gradient(circle at 50% 55%, rgba(255, 255, 255, 0.045) 0%, rgba(9, 11, 15, 0.97) 100%);
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* Dotted texture on the stage so flat logos never feel pasted on */
.ow-media-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 0.9rem 1.3rem;
  background-image: radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1.4px);
  background-size: 11px 11px;
  background-position: center;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 42%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 42%);
}

.ow-media-stage::after {
  content: "";
  position: absolute;
  inset: auto 12% 14%;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5), transparent 72%);
  filter: blur(2px);
  opacity: 0.55;
  transition: opacity 0.3s ease;
}

.ow-media-img {
  position: relative;
  z-index: 1;
  max-width: 74%;
  max-height: 62%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1), filter 0.3s ease;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55));
}
.ow-card:hover .ow-media-img {
  transform: scale(1.07) translateY(-2px);
}
.ow-card:hover .ow-media-stage::after {
  opacity: 0.3;
}
.ow-card.is-locked .ow-media-img {
  filter: grayscale(85%) opacity(0.45);
}

.ow-media-fallback {
  position: relative;
  z-index: 1;
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--gold);
  text-shadow: 0 0 12px rgba(245, 197, 24, 0.3);
}

.ow-media-shade {
  display: none;
}

/* Overlaid badges ride the top edge of the media band */
.ow-media-badges {
  position: absolute;
  top: 0.5rem;
  left: 0.55rem;
  right: 0.55rem;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
}

.ow-meta-badges {
  display: none;
}

.ow-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border-radius: 20px;
  font-size: 0.64rem;
  font-weight: 700;
  color: #26d07c;
  background: rgba(10, 14, 12, 0.72);
  border: 1px solid rgba(38, 208, 124, 0.3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  white-space: nowrap;
}

/* SUPER tier: the crown badge for manually-featured walls — animated gold
   gradient with a continuous light sweep, so it always feels premium. */
.ow-super-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.22rem 0.6rem;
  border-radius: 20px;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #221a04;
  background: linear-gradient(115deg, #ffe9a8, #f5c518 42%, #d9a614 60%, #ffe9a8);
  background-size: 220% 100%;
  box-shadow: 0 0 12px rgba(245, 197, 24, 0.5);
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  animation: ow-super-shift 5s linear infinite, ow-super-glow 2.6s ease-in-out infinite;
}

.ow-super-pill svg { flex-shrink: 0; }

@keyframes ow-super-shift {
  from { background-position: 220% 50%; }
  to { background-position: 0% 50%; }
}
@keyframes ow-super-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(245, 197, 24, 0.4); }
  50% { box-shadow: 0 0 16px rgba(245, 197, 24, 0.7); }
}

/* HOT tier: earned automatically by live-offer volume (20+), a flame that
   flickers instead of sitting flat. */
.ow-hot-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.22rem 0.6rem;
  border-radius: 20px;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(115deg, #ff9433, #ef4d64 55%, #d43a52);
  box-shadow: 0 0 12px rgba(239, 100, 64, 0.45);
  white-space: nowrap;
  animation: ow-hot-flicker 1.8s ease-in-out infinite;
}

.ow-hot-pill svg { flex-shrink: 0; }

@keyframes ow-hot-flicker {
  0%, 100% { box-shadow: 0 0 8px rgba(239, 100, 64, 0.35); background: linear-gradient(115deg, #ff9433, #ef4d64 55%, #d43a52); }
  50% { box-shadow: 0 0 18px rgba(239, 122, 64, 0.65); background: linear-gradient(115deg, #ffba4d, #f5536c 55%, #e04058); }
}

.ow-feat-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  border-radius: 20px;
  font-size: 0.65rem;
  font-weight: 800;
  color: #17140a;
  background: linear-gradient(135deg, #ffe08a, #f5c518 45%, #c99c13);
  box-shadow: 0 0 10px rgba(245, 197, 24, 0.4);
  white-space: nowrap;
}

/* FUTURE tier: an indigo badge + a soft tint; the card itself stays fully
   functional — it opens like any other card. */
.ow-future-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.22rem 0.6rem;
  border-radius: 20px;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a5b4fc;
  background: rgba(10, 11, 20, 0.72);
  border: 1px solid rgba(129, 140, 248, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  white-space: nowrap;
}

.ow-card.is-future,
.sv-card.is-future {
  border-color: rgba(129, 140, 248, 0.28);
}
.ow-card.is-future:hover,
.sv-card.is-future:hover {
  border-color: rgba(129, 140, 248, 0.5);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.52), 0 0 24px rgba(129, 140, 248, 0.25);
}
.ow-card.is-future .ow-media {
  background:
    radial-gradient(circle at 50% 30%, rgba(129, 140, 248, 0.12) 0%, transparent 62%),
    radial-gradient(circle at 50% 55%, rgba(255, 255, 255, 0.04) 0%, rgba(10, 11, 18, 0.97) 100%);
}

.ow-locked-pill-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.55rem;
  border-radius: 20px;
  font-size: 0.65rem;
  font-weight: 700;
  color: #ef4d64;
  background: rgba(11, 10, 12, 0.72);
  border: 1px solid rgba(239, 77, 100, 0.28);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  white-space: nowrap;
}

/* Hover Overlay Button (pointer devices only) */
.ow-hover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 13, 17, 0.4), rgba(11, 13, 17, 0.78));
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 3;
}
.ow-card:hover .ow-hover-overlay {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
@media (hover: none) {
  .ow-hover-overlay { display: none; }
}

.ow-hover-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.76rem;
  font-weight: 800;
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(245, 197, 24, 0.4);
  pointer-events: none;
}

/* Card Content Area */
.ow-content {
  padding: 0.85rem 0.95rem 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
  text-align: center;
  min-width: 0;
}

.ow-name {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ow-tagline {
  margin: 0;
  font-size: 0.76rem;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
  min-height: 2.05em;
}

.ow-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: center;
  margin-top: 0.15rem;
}
.ow-cat-badge {
  font-size: 0.64rem;
  padding: 0.15rem 0.5rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-soft);
  border-radius: 20px;
}

/* Always-visible action footer (touch devices have no hover) */
.ow-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.55rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.09);
}

.ow-count-badge {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 700;
  white-space: nowrap;
}
.ow-count-num {
  font-weight: 800;
  color: var(--gold);
}

.ow-go {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.34rem 0.7rem;
  border-radius: 10px;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--gold);
  background: rgba(245, 197, 24, 0.09);
  border: 1px solid rgba(245, 197, 24, 0.28);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}
.ow-card:hover .ow-go,
.ow-card:focus-visible .ow-go {
  color: #17140a;
  background: linear-gradient(135deg, #ffe08a, #f5c518 45%, #c99c13);
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(245, 197, 24, 0.45);
  transform: translateX(2px);
}
/* A SUPER card keeps its CTA permanently lit */
.ow-card.is-featured .ow-go,
.ow-card.is-hot .ow-go {
  color: #17140a;
  background: linear-gradient(135deg, #ffe08a, #f5c518 45%, #c99c13);
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(245, 197, 24, 0.4);
}
.ow-card.is-hot .ow-go {
  background: linear-gradient(135deg, #ffba4d, #ef4d64);
  box-shadow: 0 4px 14px rgba(239, 100, 64, 0.4);
  color: #fff;
}
.ow-go svg { display: block; }

/* Small phones: cards go two-up and everything tightens */
@media (max-width: 560px) {
  .ow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
  }
  .ow-card { border-radius: 15px; }
  .ow-media { height: 96px; }
  .ow-media-stage { padding: 0.6rem 0.6rem 1rem; background-size: 9px 9px; }
  .ow-media-img { max-width: 64%; max-height: 54%; }
  .ow-media-badges { top: 0.4rem; left: 0.4rem; right: 0.4rem; gap: 0.25rem; }
  .ow-live-pill, .ow-feat-pill, .ow-locked-pill-inline, .ow-super-pill, .ow-hot-pill, .ow-future-pill { padding: 0.14rem 0.42rem; font-size: 0.56rem; }
  .ow-content { padding: 0.7rem 0.7rem 0.8rem; gap: 0.22rem; }
  .ow-name { font-size: 0.86rem; }
  .ow-tagline { font-size: 0.66rem; }
  .ow-cats { gap: 0.22rem; }
  .ow-cat-badge { font-size: 0.56rem; padding: 0.12rem 0.4rem; }
  .ow-foot { gap: 0.35rem; padding-top: 0.45rem; }
  .ow-count-badge { font-size: 0.62rem; }
  .ow-go { font-size: 0.66rem; padding: 0.3rem 0.55rem; }
  .ow-lock-title { font-size: 0.62rem; }
  .ow-lock-sub { font-size: 0.56rem; }
  .ow-lock-icon-wrap { width: 18px; height: 18px; }
  .ow-lock-banner { padding: 0.35rem 0.5rem; gap: 0.35rem; }
}

/* Locked card: dimmed identity keeps the wall recognisable, while the banner
   below turns the lock into a countdown you can feel. */
.ow-card.is-locked .ow-media-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(239, 77, 100, 0.05) 0 10px,
    transparent 10px 22px
  );
  pointer-events: none;
  z-index: 2;
}

.ow-card.is-locked .ow-media-stage::after {
  background: radial-gradient(ellipse at center, rgba(239, 77, 100, 0.28), transparent 72%);
  opacity: 1;
  inset: auto 22% 16%;
}

/* Level lock banner with a real progress bar */
.ow-lock-banner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.7rem;
  background: linear-gradient(180deg, rgba(24, 10, 15, 0.88), rgba(10, 12, 16, 0.95));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-top: 1px solid rgba(239, 77, 100, 0.35);
}

.ow-lock-icon-wrap {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(160deg, rgba(239, 77, 100, 0.4), rgba(239, 77, 100, 0.14));
  color: #ff8b9c;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(239, 77, 100, 0.35), inset 0 0 0 1px rgba(239, 77, 100, 0.35);
  animation: ow-lock-pulse 2.4s ease-in-out infinite;
}

@keyframes ow-lock-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(239, 77, 100, 0.3), inset 0 0 0 1px rgba(239, 77, 100, 0.35); }
  50% { box-shadow: 0 0 18px rgba(239, 77, 100, 0.55), inset 0 0 0 1px rgba(239, 77, 100, 0.5); }
}

.ow-lock-info {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  min-width: 0;
  text-align: left;
  flex: 1;
}

.ow-lock-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
}

.ow-lock-title {
  font-size: 0.7rem;
  font-weight: 800;
  color: #ff8b9c;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ow-lock-pct {
  font-size: 0.6rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.ow-lock-track {
  height: 4px;
  border-radius: 4px;
  background: rgba(239, 77, 100, 0.16);
  overflow: hidden;
  flex-shrink: 0;
}

.ow-lock-bar {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #ef4d64, #ff8b9c);
  box-shadow: 0 0 8px rgba(239, 77, 100, 0.6);
}

.ow-lock-sub {
  font-size: 0.6rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Offerwall iframe ---------- */
.ow-iframe-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .8rem 1rem; border-bottom: 1px solid var(--border); }

/* Full-viewport partner offerwall frame */
.offerwall-frame { width: 100%; min-height: calc(100vh - 180px); border-radius: 20px; overflow: hidden; background: #0b0d11; }
.offerwall-frame__iframe { width: 100%; min-height: calc(100vh - 180px); height: 100%; border: 0; display: block; background: #0b0d11; }
.offerwall-frame--pending { display: grid; place-items: center; padding: 3rem 1.5rem; }
.offerwall-pending { text-align: center; max-width: 460px; }
.offerwall-pending .ow-icon-lg { opacity: .5; }
@media (max-width: 640px) {
    .offerwall-frame { min-height: calc(100vh - 130px); border-radius: 12px; }
    .offerwall-frame__iframe { min-height: calc(100vh - 130px); }
}

/* ---------- Offerwall modal (premium lightbox popup on /offers) ---------- */
.ow-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: clamp(.6rem, 3vw, 1.6rem); overflow: hidden; }
.ow-modal[hidden] { display: none; }
.ow-modal-backdrop { position: absolute; inset: 0; background: rgba(3,5,9,.74); backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); animation: ow-fade .22s ease; }
.ow-modal-dialog { position: relative; width: min(1120px, 96vw); height: min(86vh, 860px); height: min(86dvh, 860px); max-width: 100%; max-height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; border: 1px solid rgba(245,197,24,.42); background: linear-gradient(170deg, #211c10 0%, #14171e 34%, #0e1117 100%); box-shadow: 0 40px 100px -24px rgba(0,0,0,.9), 0 0 70px -20px rgba(245,197,24,.4), inset 0 1px 0 rgba(255,255,255,.06); animation: ow-pop .26s cubic-bezier(.2,.9,.3,1.15); transition: width .25s ease, height .25s ease; }
.ow-modal.is-fullscreen .ow-modal-dialog { width: 98vw; height: 96vh; height: 96dvh; }
.ow-modal.is-closing .ow-modal-dialog { animation: ow-out .18s ease forwards; }
.ow-modal.is-closing .ow-modal-backdrop { animation: ow-fade-out .18s ease forwards; }
@keyframes ow-pop { from { transform: translateY(14px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ow-out { to { transform: translateY(10px) scale(.98); opacity: 0; } }
@keyframes ow-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ow-fade-out { to { opacity: 0; } }
.ow-hub-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .95rem 1.1rem; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, rgba(245,197,24,.08), transparent); flex-wrap: wrap; flex-shrink: 0; }
.ow-hub-id { display: flex; align-items: center; gap: .85rem; min-width: 0; flex: 1 1 auto; }
.ow-hub-name { margin: 0; font-size: 1.2rem; font-weight: 800; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ow-hub-actions { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; flex-shrink: 0; }
.ow-icon-btn { width: 38px; height: 38px; padding: 0; border-radius: 50%; display: grid; place-items: center; font-size: 1.05rem; cursor: pointer; color: var(--text-soft); text-decoration: none; background: rgba(255,255,255,.05); border: 1px solid var(--border); transition: transform .15s ease, border-color .15s ease, color .15s ease; }
.ow-icon-btn svg { width: 16px; height: 16px; display: block; }
.ow-icon-btn[hidden] { display: none; }
/* Swap must out-specify .ow-icon-btn svg { display: block }, otherwise both glyphs stack. */
.ow-icon-btn .ow-ico-collapse { display: none; }
.ow-modal.is-fullscreen .ow-icon-btn .ow-ico-expand { display: none; }
.ow-modal.is-fullscreen .ow-icon-btn .ow-ico-collapse { display: block; }
.ow-icon-btn:hover { transform: scale(1.06); border-color: rgba(245,197,24,.5); color: var(--gold); }
.ow-modal-x { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: .95rem; font-weight: 800; cursor: pointer; color: #17140a; background: linear-gradient(135deg, #ffe08a, #f5c518 45%, #c99c13); border: 0; box-shadow: 0 6px 20px -8px rgba(245,197,24,.7); transition: transform .15s ease, box-shadow .15s ease; }
.ow-modal-x:hover { transform: scale(1.08) rotate(90deg); box-shadow: 0 8px 26px -8px rgba(245,197,24,.9); }
.ow-hub-status { display: flex; align-items: center; gap: .5rem; padding: .55rem 1.1rem; border-bottom: 1px solid var(--border); font-size: .76rem; color: var(--text-muted); flex-shrink: 0; min-width: 0; }
.ow-hub-status span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ow-hub-frame { position: relative; flex: 1 1 auto; min-height: 0; border-radius: 0; overflow: hidden; background: #0b0d11; }
.ow-hub-frame .offerwall-frame__iframe { min-height: 100%; height: 100%; width: 100%; max-width: 100%; border: 0; display: block; background: #0b0d11; }
/* While loading, keep the iframe in layout (so its load event reliably fires)
   but visually hidden beneath the loader overlay. */
.ow-hub-frame .offerwall-frame__iframe.is-loading { display: block; min-height: 100%; }
.ow-hub-loader { position: absolute; inset: 0; display: grid; place-content: center; gap: .9rem; text-align: center; padding: 1.5rem; background: radial-gradient(420px 200px at 50% 30%, rgba(245,197,24,.08), transparent 70%), #0b0d11; z-index: 2; }
.ow-hub-loader[hidden] { display: none; }
.ow-spinner { width: 46px; height: 46px; margin: 0 auto; border-radius: 50%; border: 3px solid rgba(245,197,24,.18); border-top-color: var(--gold); animation: ow-spin .8s linear infinite; box-shadow: 0 0 24px -6px rgba(245,197,24,.5); }
@keyframes ow-spin { to { transform: rotate(360deg); } }
/* Phones (portrait or landscape) and small tablets already get the whole screen,
   so the header stays a single row and the actions stay pinned to the top-right. */
@media (max-width: 768px), (max-height: 620px) {
    .ow-modal { padding: 0; place-items: stretch; }
    .ow-modal-dialog, .ow-modal.is-fullscreen .ow-modal-dialog { width: 100vw; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; border-radius: 0; border-left: 0; border-right: 0; }
    .ow-hub-frame, .ow-hub-frame .offerwall-frame__iframe { min-height: 0; }
    .ow-hub-head { flex-direction: row; align-items: center; flex-wrap: nowrap; gap: .6rem; padding: .65rem .8rem; }
    .ow-hub-id { gap: .6rem; }
    .ow-hub-name { font-size: 1rem; }
    .ow-hub-head .badge { display: none; }
    .ow-hub-actions { flex-wrap: nowrap; gap: .35rem; }
    .ow-icon-btn, .ow-modal-x { width: 36px; height: 36px; }
    .ow-icon-btn svg { width: 15px; height: 15px; }
    /* Already edge to edge here, so the fullscreen toggle has nothing left to do. */
    .ow-hub-expand { display: none; }
    .ow-hub-status { padding: .45rem .8rem; }
}
@media (prefers-reduced-motion: reduce) {
    .ow-modal-dialog, .ow-modal-backdrop, .ow-card, .ow-modal-x, .ow-icon-btn { animation: none; transition: none; }
}

/* ---------- Provider form (admin Add/Edit, premium) ---------- */
.pf-wrap { max-width: 880px; margin: 0 auto; width: 100%; }
.admin-narrow { max-width: 880px; margin: 0 auto; width: 100%; }
.pf-section { background: linear-gradient(170deg, rgba(255,255,255,.035), rgba(255,255,255,.012)); border: 1px solid var(--border); border-radius: 18px; padding: 1.2rem 1.2rem 1.3rem; margin-bottom: 1.1rem; box-shadow: 0 16px 40px -24px rgba(0,0,0,.8); }
.pf-sec-head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.1rem; }
.pf-sec-num { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: .8rem; font-weight: 800; color: #17140a; background: linear-gradient(135deg, #ffe08a, #f5c518 45%, #c99c13); flex-shrink: 0; box-shadow: 0 4px 14px -6px rgba(245,197,24,.7); }
.pf-sec-title { margin: 0; font-size: 1rem; font-weight: 800; }
.pf-sec-sub { margin: .15rem 0 0; color: var(--text-muted); font-size: .78rem; }
.pf-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.pf-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-bottom: 1rem; }
.pf-check { display: flex; align-items: center; gap: .5rem; padding-top: 1.7rem; }
.pf-upload { display: flex; gap: 1rem; align-items: center; background: rgba(0,0,0,.25); border: 1px dashed rgba(245,197,24,.35); border-radius: 14px; padding: .9rem 1rem; transition: border-color .2s ease; }
.pf-upload:hover { border-color: rgba(245,197,24,.6); }
.pf-preview { width: 84px; height: 84px; border-radius: 16px; overflow: hidden; flex-shrink: 0; border: 1px solid var(--border); background: #0b0d11; display: grid; place-items: center; }
.pf-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-preview-empty { font-size: 1.6rem; font-weight: 900; color: #17140a; width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(135deg, #ffe08a, #f5c518 45%, #c99c13); }
.pf-upload-body { display: flex; flex-direction: column; gap: .45rem; align-items: flex-start; min-width: 0; }
.pf-upload-body .help { margin: 0; }
.pf-remove { display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; color: var(--text-soft); cursor: pointer; }
.pf-advanced { border: 1px solid var(--border); border-radius: 14px; margin-bottom: 1.1rem; background: rgba(255,255,255,.012); }
.pf-advanced summary { cursor: pointer; padding: .9rem 1.2rem; font-weight: 700; font-size: .86rem; color: var(--text-soft); list-style: none; display: flex; align-items: center; gap: .5rem; }
.pf-advanced summary::-webkit-details-marker { display: none; }
.pf-advanced summary::before { content: "+"; color: var(--gold); font-weight: 900; }
.pf-advanced[open] summary::before { content: "–"; }
.pf-advanced-body { padding: 0 1.2rem 1.2rem; }
.pf-actions { display: flex; gap: .7rem; align-items: center; padding: .4rem 0 1.5rem; }
@media (max-width: 640px) {
    .pf-section { padding: 1rem; border-radius: 14px; }
    .pf-grid-2, .pf-grid-3 { grid-template-columns: 1fr; }
    .pf-check { padding-top: 0; }
    .pf-upload { flex-direction: column; align-items: stretch; text-align: center; }
    .pf-preview { margin: 0 auto; }
    .pf-upload-body { align-items: center; }
    .pf-actions { flex-direction: column; align-items: stretch; }
    .pf-actions .btn { width: 100%; text-align: center; }
}

/* ---------- Form field hint ---------- */
.help { color: var(--text-muted); font-size: .78rem; line-height: 1.5; margin: .35rem 0 0; }

/* ---------- Dashboard redesign ---------- */
.dash-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 1.4rem; flex-wrap: wrap; }
.dash-hero-copy { min-width: 0; }
.dash-hero .page-title { margin: 0; }
.qa-actions { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }

.dash-section { margin-top: 1.7rem; }
.dash-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; flex-wrap: wrap; }
.dash-sec-title { font-size: 1rem; font-weight: 800; margin: 0; }
.dash-sec-title::before { content: ""; display: inline-block; width: 6px; height: 14px; border-radius: 4px; background: var(--gold-grad); margin-right: .6rem; vertical-align: -2px; }

.dash-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 1.1rem; margin-top: 1.7rem; align-items: stretch; }

@media (max-width: 1024px) {
  .dash-split { grid-template-columns: 1fr; }
  .dash-split > .daily-card { order: 2; }
  .dash-split > .dash-activity-card { order: 1; }
}

@media (max-width: 640px) {
  .dash-split { gap: 1rem; margin-top: 1.4rem; }
  .cycle-cell { height: 38px; border-radius: 10px; }
  .cycle-num { font-size: .62rem; }
  .daily-medal { width: 54px; height: 54px; border-radius: 15px; }
  .daily-amount { font-size: 1.3rem; }
  .daily-main { gap: .8rem; }
}

/* Daily login reward card — premium refreshed */
.daily-card { display: flex; flex-direction: column; position: relative; overflow: hidden; border-radius: 18px; }
.daily-card.is-ready {
  border-color: rgba(245,197,24,.42);
  background:
    radial-gradient(420px 220px at 100% -10%, rgba(245,197,24,.14), transparent 65%),
    radial-gradient(300px 180px at -10% 0%, rgba(255,107,53,.07), transparent 60%),
    linear-gradient(165deg, rgba(245,197,24,.09), var(--bg-card) 58%);
  box-shadow: 0 12px 36px rgba(0,0,0,.45), 0 0 28px rgba(245,197,24,.1);
}
.daily-card.is-ready::before { content: ""; position: absolute; top: -70px; right: -46px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(245,197,24,.18), transparent 70%); pointer-events: none; }
.daily-card.is-ready::after { content: ""; position: absolute; inset: 0; border-radius: 18px; background: linear-gradient(135deg, rgba(245,197,24,.12) 0%, transparent 45%); pointer-events: none; opacity: .6; }
.daily-card.is-claimed { background: linear-gradient(165deg, rgba(255,255,255,.02), var(--bg-card)); border-color: var(--border); }
.daily-card.is-claimed .daily-medal { background: linear-gradient(135deg, #2a2e3a, #1a1d27); color: var(--text-muted); box-shadow: none; border: 1px solid var(--border); }
.daily-head-ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: rgba(245,197,24,.12); border: 1px solid rgba(245,197,24,.22); color: var(--gold); }
.daily-card.is-ready .daily-head-ico { background: var(--gold-grad); color: #17140a; box-shadow: var(--glow-gold); border-color: transparent; }
.daily-main { display: flex; align-items: center; gap: 1rem; position: relative; }
.daily-medal { width: 72px; height: 72px; flex: 0 0 auto; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: #17140a; background: var(--gold-grad); box-shadow: var(--glow-gold), 0 8px 20px rgba(245,197,24,.25); position: relative; overflow: hidden; }
.daily-medal::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.22), transparent 55%); pointer-events: none; }
.daily-medal svg { width: 28px; height: 28px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.15)); }
.daily-medal-day { font-size: .58rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: rgba(23, 20, 10, .75); position: relative; }
.daily-amount-col { min-width: 0; }
.daily-amount { font-size: 1.65rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.1; }
.daily-streak { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--text-soft); margin-top: .35rem; padding: 0.22rem 0.55rem; border-radius: 999px; background: rgba(245,197,24,.08); border: 1px solid rgba(245,197,24,.18); }
.daily-streak svg { color: #ff6b35; filter: drop-shadow(0 0 6px rgba(255,107,53,.4)); }
.daily-card.is-claimed .daily-streak { background: rgba(255,255,255,.04); border-color: var(--border); }
.daily-cycle { display: grid; grid-template-columns: repeat(7, 1fr); gap: .42rem; margin: 1.2rem 0 1rem; }
.cycle-cell { position: relative; height: 48px; border-radius: 13px; display: grid; place-items: center; background: rgba(255,255,255,.04); border: 1px solid var(--border); transition: border-color .2s ease, background .2s ease, transform .2s ease, box-shadow .2s ease; overflow: hidden; }
.cycle-cell::before { content: ""; position: absolute; inset: 0; border-radius: 13px; background: linear-gradient(180deg, rgba(255,255,255,.06), transparent); pointer-events: none; opacity: 0; transition: opacity .2s; }
.cycle-cell:hover::before { opacity: 1; }
.cycle-cell.is-filled { background: linear-gradient(135deg, rgba(245,197,24,.18), rgba(245,197,24,.06)); border-color: rgba(245,197,24,.48); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.cycle-cell.is-today { border-color: var(--gold); background: rgba(245,197,24,.1); box-shadow: 0 0 0 3px rgba(245,197,24,.18), 0 6px 18px -6px rgba(245,197,24,.5); transform: translateY(-2px); }
.cycle-cell.is-today.is-filled { background: linear-gradient(135deg, rgba(245,197,24,.22), rgba(245,197,24,.1)); }
.cycle-num { font-size: .7rem; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; position: relative; }
.cycle-cell.is-filled .cycle-num { color: var(--gold); }
.cycle-cell.is-today:not(.is-filled) .cycle-num { color: var(--gold); }
.cycle-check { color: var(--gold); position: absolute; top: 5px; right: 5px; background: rgba(245,197,24,.15); border-radius: 50%; padding: 1px; }
.cycle-now { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px rgba(245,197,24,.9); position: absolute; top: 5px; right: 5px; animation: daily-pulse 1.6s ease-in-out infinite; }
.daily-progress { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; }
.daily-progress-track { flex: 1; height: 8px; border-radius: var(--radius-full); background: rgba(255,255,255,.07); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.2); }
.daily-progress-fill { height: 100%; border-radius: var(--radius-full); background: var(--gold-grad); transition: width .8s var(--ease); position: relative; overflow: hidden; }
.daily-progress-fill::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); animation: daily-shimmer 2.2s ease-in-out infinite; }
.daily-progress-label { font-size: .72rem; color: var(--text-muted); text-align: right; flex: 0 0 auto; max-width: 55%; }
@media (max-width: 640px) {
  .daily-progress { flex-wrap: wrap; gap: .45rem; }
  .daily-progress-label { max-width: none; text-align: left; }
  .daily-medal { width: 62px; height: 62px; border-radius: 16px; }
  .daily-amount { font-size: 1.4rem; }
  .cycle-cell { height: 42px; border-radius: 11px; }
}
@keyframes daily-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.75); } }
@keyframes daily-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.daily-note { text-align: center; margin: .55rem 0 0; font-size: .78rem; }
.daily-card .btn-primary { box-shadow: 0 6px 20px rgba(245,197,24,.25); }
.daily-card .btn-primary:hover { box-shadow: 0 8px 26px rgba(245,197,24,.35); transform: translateY(-1px); }

/* Dashboard v2.1 — compact level strip, kept-gold claimed medal, tighter rows */
.lvl-card { padding: 1rem 1.15rem; gap: 1rem; }
.lvlc-medal {
  width: auto;
  min-width: 54px;
  height: 56px;
  padding: 0 0.9rem;
  border-radius: 15px;
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  justify-content: center;
}
.lvlc-medal-kicker { font-size: 0.55rem; color: rgba(23, 20, 10, 0.72); }
.lvlc-medal-n { font-size: 1.2rem; white-space: nowrap; transform: translateY(-1px); }
.lvlc-medal-n::selection { color: #17140a; }
.lvlc-head > b { font-size: 1.08rem; letter-spacing: -0.01em; }
.lvlc-next { white-space: nowrap; }
.lvlc-barline { display: flex; align-items: center; gap: 0.6rem; }
.lvlc-track { flex: 1; margin: 0; }
.lvlc-fill { min-width: 6%; box-shadow: 0 0 10px rgba(245, 197, 24, 0.5); }
.lvlc-pct { flex: none; min-width: 2.4rem; text-align: right; font-size: 0.78rem; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.lvlc-scale { margin-top: 0.25rem; gap: 1rem; }
.lvlc-sub { margin-top: 0.2rem; font-size: 0.78rem; color: var(--text-soft); max-width: 62ch; }
.lvlc-cta { align-self: center; padding: 0.55rem 1rem; border-radius: var(--radius-full); border: 1px solid rgba(245, 197, 24, 0.28); color: var(--gold); font-weight: 700; }
.lvlc-cta:hover { background: rgba(245, 197, 24, 0.08); color: var(--gold); }

.daily-card.is-claimed .daily-medal {
  background: var(--gold-grad);
  color: #17140a;
  box-shadow: var(--glow-gold), inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 0 1px var(--border);
}
.daily-card.is-claimed .daily-medal svg { opacity: 0.9; }
.daily-card.is-claimed .daily-amount { color: var(--text-soft); background: none; -webkit-text-fill-color: currentcolor; }

.dash-tx-item { padding: 0.55rem 0.75rem; gap: 0.75rem; border-radius: 12px; }
.dash-tx-ico { width: 34px; height: 34px; border-radius: 10px; }
.dash-tx-ico .act-svg { width: 16px; height: 16px; }
.dash-tx-title { font-size: 0.85rem; }
.dash-tx-type { font-size: 0.62rem; padding: 0.12rem 0.45rem; }
.dash-tx-val { font-size: 0.82rem; padding: 0.2rem 0.55rem; }

/* Future offers placeholder */
.future-card { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem 1.5rem; border-color: rgba(245,197,24,.3); background: linear-gradient(170deg, rgba(245,197,24,.06), rgba(255,255,255,.012)); }
.future-glow { position: absolute; top: -60px; left: 50%; transform: translateX(-50%); width: 220px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(245,197,24,.12), transparent 70%); pointer-events: none; }
.future-icon { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; color: var(--gold); background: rgba(245,197,24,.1); border: 1px solid rgba(245,197,24,.3); margin-bottom: 1rem; position: relative; }
.future-title { margin: 0; font-size: 1.05rem; font-weight: 800; }
.future-text { max-width: 320px; margin: .5rem auto 1.1rem; font-size: .88rem; line-height: 1.6; }

/* Recent activity empty state (compact) */
.dash-empty { padding: 2rem 1rem; }

/* ---------- Account center (Profile) ---------- */
.dot-dot.status-ok { background: var(--green); box-shadow: 0 0 8px rgba(38, 208, 124, .8); }
.dot-dot.status-bad { background: var(--red); box-shadow: 0 0 8px rgba(239, 77, 100, .8); }

.stat-pts { font-size: .72rem; font-weight: 800; color: var(--text-muted); letter-spacing: .05em; }

#wallet { scroll-margin-top: 5.2rem; }

/* ---------- Admin: devices & browsers ---------- */
.dev-row-banned td { background: rgba(239, 77, 100, .045); }
.dev-row-banned td:last-child { border-radius: 0 10px 10px 0; }
.dev-row-banned td:first-child { border-radius: 10px 0 0 10px; }
.devices-note { font-size: .78rem; color: var(--text-muted); }

/* ---------- Referral program ---------- */
.ref-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 1.4rem; margin-top: 1.4rem; align-items: start; }

.ref-card { position: relative; }
.card-header-wrap { flex-wrap: wrap; }

.ref-chip {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px;
  display: grid; place-items: center;
  color: #17140a;
  background: var(--gold-grad);
  box-shadow: var(--glow-gold);
}
.ref-chip svg { width: 17px; height: 17px; }
.ref-chip--subtle { color: var(--gold); background: rgba(245, 197, 24, 0.12); box-shadow: none; border: 1px solid rgba(245, 197, 24, 0.25); }

.ref-stat-sub { font-size: 0.85rem; font-weight: 600; color: var(--text-muted); }

.ref-sub { margin: 0.2rem 0 1.15rem; color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; }

.ref-fields { display: grid; gap: 1.05rem; }
.ref-field .label { margin-bottom: 0.4rem; display: block; }

.copy-row { display: flex; gap: 0.6rem; }
.copy-row.is-copied .copy-input { border-color: rgba(38, 208, 124, 0.55); box-shadow: 0 0 0 3px rgba(38, 208, 124, 0.12); }

.copy-input { flex: 1; min-width: 0; }
.copy-input-link { font-size: 0.86rem; }
.copy-input-code { font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

.btn-copy { flex: 0 0 auto; padding: 0.72rem 1rem; }
.btn-copy svg { width: 15px; height: 15px; }
.copy-row.is-copied .btn-copy.btn-primary { color: #06220f; }
.copy-row.is-copied .btn-copy:not(.btn-primary) { border-color: rgba(38, 208, 124, 0.55); color: var(--green); }

.ref-steps { list-style: none; margin: 0.2rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.ref-step { display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.75rem; border-radius: 12px; background: rgba(255, 255, 255, 0.025); border: 1px solid var(--border); transition: border-color 0.18s ease, background 0.18s ease; }
.ref-step:hover { border-color: rgba(245, 197, 24, 0.28); background: rgba(245, 197, 24, 0.04); }
.ref-step-num {
  width: 28px; height: 28px; flex: 0 0 auto; border-radius: 9px;
  display: grid; place-items: center;
  font-weight: 800; font-size: 0.8rem; color: #17140a;
  background: var(--gold-grad); box-shadow: var(--glow-gold);
}
.ref-step strong { display: block; font-size: 0.92rem; }
.ref-step p { margin: 0.15rem 0 0; font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; }

/* Referral/reward list cards */
.ref-list-card { margin-top: 1.4rem; }
.ref-list-card .card-header { margin-bottom: 0.9rem; }

.ref-table { display: grid; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--glass); }
.ref-table--people { grid-template-columns: minmax(0, 1fr) 150px 150px; }
.ref-table--rewards { grid-template-columns: minmax(0, 1fr) 125px 120px 120px 140px; }

.ref-grid-head, .ref-row { display: grid; gap: 0.75rem; align-items: center; padding: 0.85rem 1rem; }
.ref-grid-head { background: rgba(255, 255, 255, 0.025); border-bottom: 1px solid var(--border); }
.ref-th { font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-muted); }
.ref-row { border-bottom: 1px solid var(--border); transition: background 0.15s ease; }
.ref-row:last-child { border-bottom: 0; }
.ref-row:hover { background: rgba(255, 255, 255, 0.02); }

.ref-member { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.ref-member-info { min-width: 0; }
.ref-member-name { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ref-member-sub { font-size: 0.74rem; color: var(--text-muted); margin-top: 0.12rem; }

.ref-source { min-width: 0; }
.ref-source-name { font-weight: 600; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ref-source-sub { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.12rem; }

.ref-date { font-size: 0.82rem; color: var(--text-muted); }
.ref-pts-cell { text-align: right; }
.ref-pts-val { font-weight: 800; color: var(--green); font-variant-numeric: tabular-nums; }
.ref-pts-val--none { color: var(--text-faint); font-weight: 500; }

.dot-sep { margin: 0 0.35rem; color: var(--text-faint); }

.ref-empty { text-align: center; padding: 3rem 1.5rem; }
.ref-empty-icon {
  width: 72px; height: 72px; margin: 0 auto 1.1rem;
  border-radius: 22px; display: grid; place-items: center;
  color: var(--gold);
  background: linear-gradient(150deg, rgba(245, 197, 24, 0.14), rgba(245, 197, 24, 0.04));
  border: 1px dashed rgba(245, 197, 24, 0.35);
}
.ref-empty h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.ref-empty p { color: var(--text-muted); font-size: 0.9rem; max-width: 34rem; margin: 0 auto 1.2rem; line-height: 1.6; }
.ref-empty-actions { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; }

@media (max-width: 640px) {
  .ref-fields .copy-row { flex-wrap: wrap; }
  .copy-input { flex: 1 1 100%; }
  .btn-copy { flex: 1 1 auto; justify-content: center; }
}

/* Sweet spot: slim tablets before full mobile */
@media (max-width: 1099px) and (min-width: 861px) {
  .ref-table--people { grid-template-columns: minmax(0, 1fr) 130px 120px; }
  .ref-table--rewards { grid-template-columns: minmax(0, 1fr) 115px 105px 105px 120px; }
}

/* Mobile: rows become cards, header hidden */
@media (max-width: 860px) {
  .ref-grid { grid-template-columns: 1fr; }

  .ref-table { border: 0; border-radius: 0; background: transparent; overflow: visible; }
  .ref-grid-head { display: none; }

  .ref-table--people .ref-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "member pts" "status status";
    row-gap: 0.6rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 0.7rem;
    background: var(--glass);
    padding: 0.9rem 1rem;
  }
  .ref-table--people .ref-row .ref-member { grid-area: member; }
  .ref-table--people .ref-row .ref-cell-status { grid-area: status; }
  .ref-table--people .ref-row .ref-pts-cell { grid-area: pts; }

  .ref-table--rewards .ref-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "source amt" "kind status" "date date";
    row-gap: 0.55rem; column-gap: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 0.7rem;
    background: var(--glass);
    padding: 0.9rem 1rem;
  }
  .ref-table--rewards .ref-row .ref-source { grid-area: source; }
  .ref-table--rewards .ref-row .ref-cell-kind { grid-area: kind; }
  .ref-table--rewards .ref-row .ref-cell-status { grid-area: status; }
  .ref-table--rewards .ref-row .ref-date { grid-area: date; }
  .ref-table--rewards .ref-row .ref-pts-cell { grid-area: amt; text-align: right; }
}

/* ---------- Flag chips (shared: profile, referrals, admin) ---------- */
.pcountry-flag {
  width: 32px; height: 32px; flex: 0 0 auto; border-radius: 9px;
  display: grid; place-items: center; font-weight: 800; font-size: 0.74rem; letter-spacing: 0.06em;
  color: var(--gold);
  background: linear-gradient(150deg, rgba(245, 197, 24, 0.16), rgba(245, 197, 24, 0.05));
  border: 1px solid rgba(245, 197, 24, 0.3);
}
.pcountry-flag--na { color: var(--text-muted); border-color: var(--border); background: rgba(255, 255, 255, 0.03); }
.pcountry-flag--lg { width: 58px; height: 58px; border-radius: 16px; font-size: 1.05rem; letter-spacing: 0.08em; }

/* ---------- Points & levels ---------- */
.lvl-card { margin-top: 0; }

.lvl-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.34rem 0.7rem; border-radius: 999px;
  font-size: 0.82rem; font-weight: 800; letter-spacing: 0.04em;
  color: var(--gold);
  background: rgba(245, 197, 24, 0.1); border: 1px solid rgba(245, 197, 24, 0.3);
}
.lvl-chip svg { color: var(--gold); }

.lvl { padding: 0.4rem 1.1rem 1.2rem; }
.lvl-head { display: flex; align-items: center; gap: 0.9rem; }
.lvl-badge {
  flex: 0 0 auto; padding: 0.45rem 0.85rem; border-radius: 14px;
  font-size: 0.95rem; font-weight: 900; letter-spacing: 0.03em; color: #17140a;
  background: var(--gold-grad); box-shadow: var(--glow-gold);
}
.lvl-copy { flex: 1 1 auto; min-width: 0; }
.lvl-title { font-weight: 800; font-size: 1.05rem; line-height: 1.25; }
.lvl-sub { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.15rem; }
.lvl-to-next { flex: 0 0 auto; text-align: right; }
.lvl-to-next-val { display: block; font-weight: 800; font-size: 0.9rem; color: var(--gold); }
.lvl-to-next-label { display: block; font-size: 0.72rem; color: var(--text-muted); margin-top: 0.1rem; }
.lvl-track {
  height: 10px; margin-top: 1rem; border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border);
  overflow: hidden;
}
.lvl-fill { height: 100%; border-radius: var(--radius-full); background: var(--gold-grad); transition: width 0.7s var(--ease); }

@media (max-width: 480px) {
  .lvl { padding: 0.3rem 1rem 1.1rem; }
  .lvl-head { flex-wrap: wrap; gap: 0.7rem; }
  .lvl-to-next { text-align: left; flex: 1 1 100%; }
}

/* Locked provider cards */
.ow-locked-tag {
  position: absolute; top: 0.5rem; right: 0.5rem;
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.2rem 0.55rem; border-radius: var(--radius-full);
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--red); background: rgba(20, 10, 12, 0.6);
  border: 1px solid rgba(239, 77, 100, 0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ow-card.is-locked .ow-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 12, 16, 0.08), rgba(10, 12, 16, 0.36));
}
.ow-card.is-locked .ow-media-body { position: relative; z-index: 1; }
.ow-lock {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.6rem; border-radius: 12px;
  border: 1px dashed rgba(239, 77, 100, 0.4); background: rgba(239, 77, 100, 0.05);
}
.ow-lock-ico {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px;
  display: grid; place-items: center; color: var(--red);
  background: rgba(239, 77, 100, 0.12);
}
.ow-lock-copy { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.ow-lock-title { font-size: 0.82rem; font-weight: 800; color: #fff; }
.ow-lock-sub { font-size: 0.74rem; color: var(--text-muted); line-height: 1.4; }

/* ---------- Admin: user details redesign ---------- */

/* Tab bar */
.det-tabs {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin: 1.3rem 0 1.1rem;
  padding: 0.3rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--glass);
}
.det-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 0.95rem; border: 0; border-radius: 11px;
  font: inherit; font-size: 0.84rem; font-weight: 700; color: var(--text-muted);
  background: transparent; cursor: pointer; transition: all 0.18s var(--ease);
}
.det-tab:hover { color: var(--text-soft); background: rgba(255, 255, 255, 0.04); }
.det-tab.is-active { color: var(--text); background: rgba(245, 197, 24, 0.12); }
.det-tab-badge {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-full);
  display: inline-grid; place-items: center;
  font-size: 0.64rem; font-weight: 800; color: var(--text-soft);
  background: rgba(255, 255, 255, 0.07); border: 1px solid var(--border);
}
.det-tab-badge--low { color: var(--green); background: var(--green-dim); border-color: rgba(38, 208, 124, 0.3); }
.det-tab-badge--medium { color: var(--amber); background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.3); }
.det-tab-badge--high { color: var(--red-soft); background: var(--red-dim); border-color: rgba(239, 77, 100, 0.3); }
.det-tab-badge--critical { color: #ff8ba0; background: rgba(194, 46, 68, 0.22); border-color: rgba(194, 46, 68, 0.5); }

.det-panel { display: none; }
.det-panel.is-active { display: block; animation: detfade 0.25s var(--ease); }
@keyframes detfade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Risk badge */
.risk-badge {
  display: inline-flex; align-items: baseline; gap: 0.35rem;
  padding: 0.22rem 0.65rem; border-radius: var(--radius-full);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em;
  border: 1px solid var(--border); white-space: nowrap;
}
.risk-badge b { font-size: 0.84rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.risk-badge-lbl { opacity: 0.9; }
.risk-badge--low { color: var(--green); background: var(--green-dim); border-color: rgba(38, 208, 124, 0.32); }
.risk-badge--medium { color: var(--amber); background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.32); }
.risk-badge--high { color: var(--red-soft); background: var(--red-dim); border-color: rgba(239, 77, 100, 0.34); }
.risk-badge--critical { color: #ff8ba0; background: rgba(194, 46, 68, 0.18); border-color: rgba(194, 46, 68, 0.5); box-shadow: 0 0 16px rgba(194, 46, 68, 0.18); }

/* Risk gauge */
.risk-gauge {
  width: 128px; height: 128px; border-radius: 50%;
  background: conic-gradient(var(--c) var(--p), rgba(255, 255, 255, 0.06) 0);
  display: grid; place-items: center;
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.35);
}
.risk-gauge-in {
  width: 92px; height: 92px; border-radius: 50%;
  background: var(--bg-card); border: 1px solid var(--border);
  display: grid; place-content: center; text-align: center; gap: 0.1rem;
}
.risk-gauge-in b { font-size: 1.9rem; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; }
.risk-gauge-in span { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.risk-gauge-note { max-width: 19rem; text-align: center; font-size: 0.78rem; line-height: 1.55; color: var(--text-muted); }

/* Risk reasons + settings chips */
.risk-reason {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.45rem 0; border-bottom: 1px dashed var(--border);
}
.risk-reason:last-child { border-bottom: 0; }
.risk-reason-chip { color: var(--text-soft); }
.risk-reason-w { margin-left: auto; font-size: 0.72rem; font-weight: 800; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.risk-signal { color: var(--amber); border-color: rgba(251, 191, 36, 0.3); background: rgba(251, 191, 36, 0.07); }
[data-hide-if-off] { color: var(--text-muted); }

/* IP cards */
.ip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.ip-card {
  padding: 1rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--glass);
  display: flex; flex-direction: column; gap: 0.75rem;
}
.ip-head { display: flex; align-items: center; gap: 0.7rem; }
.ip-addr { min-width: 0; }
.ip-addr .mono { font-size: 0.88rem; font-weight: 700; word-break: break-all; }
.ip-flags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.risk-flag {
  padding: 0.12rem 0.5rem; border-radius: var(--radius-full);
  font-size: 0.64rem; font-weight: 800; letter-spacing: 0.03em;
}
.risk-flag--vpn, .risk-flag--residential { color: var(--blue); background: var(--blue-dim); border: 1px solid rgba(96, 165, 250, 0.32); }
.risk-flag--proxy, .risk-flag--anon { color: var(--amber); background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.32); }
.risk-flag--tor, .risk-flag--hosting { color: #c084fc; background: rgba(192, 132, 252, 0.1); border: 1px solid rgba(192, 132, 252, 0.32); }
.risk-flag--malicious, .risk-flag--abuse { color: var(--red-soft); background: var(--red-dim); border: 1px solid rgba(239, 77, 100, 0.36); }
.ip-meta { display: grid; gap: 0.3rem; font-size: 0.8rem; }
.ip-meta > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 0.6rem; }
.ip-meta-label { color: var(--text-faint); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding-top: 0.12rem; }
.ip-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; border-top: 1px dashed var(--border); padding-top: 0.65rem; }

/* Flag size variant */
.pcountry-flag--sm { width: 24px; height: 24px; border-radius: 7px; font-size: 0.62rem; }
.pcountry-flag--sm.pcountry-flag--na { font-size: 0.6rem; }

/* Settings: risk card */
.risk-settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.1rem 1.3rem; }
.risk-settings-toggles { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; }
.risk-settings-toggles label {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.84rem; font-weight: 600; color: var(--text-soft);
}
.risk-settings-warning {
  margin-bottom: 1.2rem; padding: 0.75rem 1rem; border-radius: var(--radius-sm);
  border: 1px solid rgba(251, 191, 36, 0.4); background: rgba(251, 191, 36, 0.08);
  color: var(--amber); font-size: 0.84rem; line-height: 1.55;
}
.risk-settings-label {
  grid-column: 1 / -1; margin-top: 0.35rem; padding-top: 0.9rem;
  border-top: 1px dashed var(--border);
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-faint);
}
.risk-settings-label:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.risk-check-row { display: flex; align-items: center; gap: 0.6rem; grid-column: 1 / -1; }
.risk-check-row .label { margin: 0; }
/* display:contents lets the cluster fields sit in the parent grid; is-hidden removes them when off */
.risk-cluster-fields { display: contents; }
.risk-cluster-fields.is-hidden { display: none; }
.risk-intro { margin: 0 0 1rem; color: var(--text-soft); font-size: 0.88rem; line-height: 1.55; }
.risk-step { margin-bottom: 1.1rem; padding: 1rem 1.05rem; border: 1px solid var(--border); border-radius: var(--radius-sm, 12px); background: rgba(255,255,255,0.02); }
.risk-step-head { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.85rem; }
.risk-step-num { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.82rem; color: #fff; background: var(--accent, #7c5cff); }
.risk-step-head b { display: block; font-size: 0.95rem; color: var(--text); }
.risk-step-head small { display: block; color: var(--text-faint); font-size: 0.8rem; margin-top: 0.15rem; }

@media (max-width: 560px) {
  .det-tabs { gap: 0.25rem; }
  .det-tab { flex: 1 1 auto; justify-content: center; padding: 0.5rem 0.6rem; font-size: 0.78rem; }
  .ip-grid { grid-template-columns: 1fr; }
  .risk-gauge { width: 108px; height: 108px; }
  .risk-gauge-in { width: 78px; height: 78px; }
  .risk-gauge-in b { font-size: 1.5rem; }
}

/* ---------- Withdrawal administration ---------- */
.wd-table, .wd-card-list { display: none; }
.wd-table { display: block; }

/* Responsive mobile cards take over below the table breakpoint */
@media (max-width: 900px) {
  .wd-table { display: none; }
  .wd-card-list { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 1.2rem; }
}

.wd-card { display: flex; flex-direction: column; gap: 0.85rem; }
.wd-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.wd-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1rem; border-top: 1px dashed var(--border); padding-top: 0.8rem; }
.wd-card-grid > div { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.wd-card-label { color: var(--text-faint); font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.wd-card-val { font-size: 0.9rem; font-weight: 700; }
.wd-card-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; border-top: 1px dashed var(--border); padding-top: 0.8rem; }

/* Withdrawal list: make Payment details clearly visible outside */
.wd-paycell .mono { color: var(--text); font-weight: 700; letter-spacing: 0.01em; }
.wd-paycell { display: flex; align-items: center; gap: 0.5rem; }

/* Approve modal — prominent amount + payment details box */
.wd-approve-modal { width: min(560px, calc(100vw - 1.5rem)); max-width: 560px; }
.wd-approve-hero { text-align: center; padding: 1rem 1.2rem 1.1rem; border-radius: 12px; background: linear-gradient(135deg, rgba(245, 197, 24, 0.12), rgba(245, 197, 24, 0.04)); border: 1px solid rgba(245, 197, 24, 0.28); margin-bottom: 1rem; }
.wd-approve-hero .wd-approve-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.wd-approve-hero .wd-approve-amount { display: block; font-size: 1.9rem; font-weight: 800; color: var(--gold); margin-top: 0.2rem; letter-spacing: -0.02em; }
.wd-approve-hero .wd-approve-breakdown { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.3rem; }
.wd-approve-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-bottom: 0.9rem; }
.wd-approve-block { padding: 0.7rem 0.8rem; border: 1px solid var(--border); border-radius: 10px; background: rgba(255, 255, 255, 0.015); }
.wd-approve-details { margin-bottom: 0.7rem; }
.wd-approve-paybox { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.4rem; padding: 0.8rem; border-radius: 10px; border: 1px solid rgba(245, 197, 24, 0.22); background: rgba(255, 255, 255, 0.02); max-height: 220px; overflow-y: auto; overscroll-behavior: contain; }
.wd-approve-payrow { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.85rem; align-items: flex-start; }
.wd-approve-payrow span:first-child { color: var(--text-muted); flex: 0 0 35%; min-width: 0; }
.wd-approve-payrow b { font-weight: 700; flex: 1 1 auto; text-align: right; min-width: 0; }
.wd-approve-ledger { max-height: 200px; overflow-y: auto; overscroll-behavior: contain; }
.wd-approve-reuse { padding: 0.7rem 0.8rem; border-radius: 10px; border: 1px dashed rgba(251, 191, 36, 0.3); background: rgba(251, 191, 36, 0.06); font-size: 0.8rem; }
@media (max-width: 600px) { .wd-approve-grid { grid-template-columns: 1fr; } .wd-approve-payrow { flex-direction: column; gap: 0.25rem; } .wd-approve-payrow b { text-align: left; } }

/* Withdrawal details page */
.wd-show-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; align-items: start; margin-top: 1.1rem; }
@media (max-width: 900px) { .wd-show-cols { grid-template-columns: 1fr; } }
.wd-action-card { margin-top: 1.1rem; }
.wd-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.2rem 1.2rem 1.2rem; }

/* Required-fields editor */
.pf-fields-head { display: none; }
@media (min-width: 900px) {
  .pf-fields-head { display: grid; grid-template-columns: 1.1fr 1.4fr 0.9fr 1.2fr 64px 44px; gap: 0.6rem; padding: 0 0.2rem 0.4rem; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint); }
}
.pf-field-row {
  display: grid; gap: 0.6rem; align-items: center;
  grid-template-columns: 1fr; margin-bottom: 0.7rem;
  padding: 0.8rem; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,0.015);
}
@media (min-width: 900px) {
  .pf-field-row { grid-template-columns: 1.1fr 1.4fr 0.9fr 1.2fr 64px 44px; margin-bottom: 0.55rem; }
}
.pf-field-row .field { margin: 0; min-width: 0; }
.pf-field-row .field input, .pf-field-row .field select { width: 100%; }
.pf-field-req, .pf-field-del { display: flex; align-items: center; justify-content: center; }
.pf-field-req input { width: 18px; height: 18px; accent-color: var(--gold); }

/* ---------- Reject modal ---------- */
.reject-box { margin-top: .7rem; padding: .9rem 1.2rem; background: rgba(255,255,255,.015); border: 1px dashed var(--border); border-radius: 12px; }
.reject-box .det-grid { margin: 0; }
.reject-foot { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.1rem; }


/* ---------- User manage card / moderation modals ---------- */
.manage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; padding-top: .7rem; }
.manage-box { border: 1px solid var(--border); background: rgba(255,255,255,.02); border-radius: 12px; padding: .9rem 1rem; }
.manage-box-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); margin-bottom: .6rem; }
.manage-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.manage-note { font-size: .78rem; color: var(--text-muted); margin-top: .6rem; line-height: 1.5; }
.modal-x { border: 0; background: transparent; color: var(--text-muted); font-size: 1rem; cursor: pointer; width: 32px; height: 32px; border-radius: 8px; margin-left: auto; }
.modal-x:hover { background: rgba(255,255,255,.06); color: var(--text); }
.pts-preview { margin: .2rem 1rem 0; padding: .7rem .9rem; border: 1px dashed var(--border); border-radius: 10px; background: rgba(245,197,24,.04); display: grid; grid-template-columns: 1fr auto; gap: .35rem .8rem; font-size: .85rem; }
.pts-preview .det-label { color: var(--text-muted); }
.pts-preview .nr { font-weight: 800; color: var(--text); }
.pts-preview .nr.neg { color: var(--red-soft); }
.pts-preview.is-invalid { border-color: rgba(239,77,100,.5); background: rgba(239,77,100,.05); }
.pts-preview.is-invalid .nr { color: var(--red-soft); }

/* ==========================================================================
   Admin · User details dashboard (v3) — compact, developer-grade overview
   ========================================================================== */

/* ---------- Sections ---------- */
.ud-section { margin-top: 1.6rem; }
.ud-sec-head { margin-bottom: .85rem; display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.ud-sec-title { font-size: 1.05rem; letter-spacing: -.01em; margin: 0; }
.ud-sec-sub { font-size: .8rem; color: var(--text-muted); margin: .2rem 0 0; }
.ud-sub-count { color: var(--text-soft); font-weight: 600; }

/* ---------- Profile header ---------- */
.ud-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem; flex-wrap: wrap; }
.ud-banner-main { display: flex; align-items: center; gap: .95rem; min-width: 0; flex: 1 1 auto; }
.ud-avatar { border-radius: 16px !important; flex: 0 0 auto; }
.ud-banner-copy { min-width: 0; }
.ud-banner-name { font-size: 1.32rem; font-weight: 750; letter-spacing: -.02em; line-height: 1.2; margin: 0; }
.ud-banner-sub { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; color: var(--text-muted); font-size: .85rem; margin-top: .3rem; min-width: 0; }
.ud-banner-sub .mono { color: var(--text-soft); overflow-wrap: anywhere; }
.ud-dot { color: var(--text-faint); }
.ud-banner-side { display: flex; flex-direction: column; align-items: flex-end; gap: .55rem; flex: 0 0 auto; }
.ud-banner-badges { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }

/* ---------- Actions dropdown ---------- */
.ud-act { position: relative; }
.ud-acts { display: inline-flex; align-items: center; gap: .45rem; }
.ud-chev { width: 14px; height: 14px; opacity: .8; }
.ud-dd { position: absolute; top: calc(100% + .55rem); right: 0; min-width: 280px; max-height: 70vh; overflow: auto;
  padding: .55rem; border: 1px solid var(--border); border-radius: 14px; background: var(--glass);
  backdrop-filter: blur(14px); box-shadow: 0 18px 44px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3); z-index: 90;
  display: flex; flex-direction: column; }
.ud-dd[hidden] { display: none; }
.ud-dd-title { font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); padding: .25rem .55rem .4rem; }
.ud-dd-grade { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); padding: .45rem .55rem .25rem; }
.ud-dd-grade--danger { color: var(--red-soft); }
.ud-dd-item { display: flex; align-items: center; gap: .5rem; width: 100%; padding: .5rem .55rem; margin: 0; border: 0; border-radius: 9px;
  font: inherit; font-size: .85rem; font-weight: 600; color: var(--text); background: transparent; cursor: pointer; text-align: left; transition: background .15s var(--ease); }
.ud-dd-item:hover { background: rgba(255,255,255,.05); }
.ud-dd-item--danger { color: var(--red-soft); }
.ud-dd-item--danger:hover { background: rgba(239,77,100,.1); color: #ff8ba0; }
.ud-dd-i { width: 15px; height: 15px; flex: 0 0 auto; opacity: .85; }
.ud-dd-form { margin: 0; }
.ud-dd-sep { height: 1px; background: var(--border); margin: .45rem .4rem; }
.ud-dd-note { padding: .5rem .55rem; font-size: .78rem; color: var(--text-muted); }

/* ---------- Stats row ---------- */
.ud-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-top: 1.1rem; }
.ud-statcard { display: flex; align-items: center; gap: .75rem; padding: .85rem .95rem; border: 1px solid var(--border);
  border-radius: 14px; background: var(--glass); }
.ud-ic { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 11px; display: grid; place-items: center; background: rgba(255,255,255,.04); color: var(--text-soft); }
.ud-ic svg { width: 19px; height: 19px; }
.ud-ic--gold { color: var(--gold); background: rgba(245,197,24,.1); }
.ud-ic--green { color: var(--green); background: rgba(38,208,124,.1); }
.ud-ic--blue { color: #5aa5ff; background: rgba(90,165,255,.12); }
.ud-ic--soft { color: var(--text-soft); }
.ud-statcard-c { min-width: 0; display: flex; flex-direction: column; }
.ud-statcard-c b { font-size: 1.18rem; font-weight: 750; letter-spacing: -.01em; line-height: 1.15; }
.ud-statcard-c span { font-size: .72rem; color: var(--text-muted); margin-top: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 2-col grid ---------- */
.ud-grid2 { display: grid; grid-template-columns: 1.45fr 1fr; gap: 1rem; align-items: start; margin-top: 1rem; }

/* ---------- Account overview rows ---------- */
.ud-aorows { padding: .3rem 1.1rem 1rem; }

/* ---------- Points & level ---------- */
.ud-lvl-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; padding: 0 1.1rem 1.1rem; }
.ud-lvl-stat { padding: .7rem .8rem; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.02); }
.ud-lvl-stat span { display: block; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.ud-lvl-stat b { display: block; font-size: .95rem; font-weight: 750; margin-top: .25rem; }

/* ---------- Security ---------- */
.ud-sec-risk { display: flex; align-items: center; gap: .8rem; }
.ud-sec-hint { margin: .65rem 0 .9rem; font-size: .78rem; color: var(--text-muted); }
.ud-sec-ind { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.ud-sec-chip { display: flex; flex-direction: column; gap: .1rem; padding: .55rem .7rem; border-radius: 10px; border: 1px solid var(--border); background: rgba(255,255,255,.02); font-size: .72rem; color: var(--text-muted); }
.ud-sec-chip b { font-size: .78rem; font-weight: 650; color: var(--text); }
.ud-sec-chip.is-on { border-color: rgba(239,77,100,.35); background: rgba(239,77,100,.07); }
.ud-sec-chip.is-on b { color: #ff8ba0; }
.ud-sec-chip:not(.is-on) b { color: var(--green); }

/* ---------- IP intelligence ---------- */
.ud-ips { padding: .3rem .9rem .9rem; display: flex; flex-direction: column; gap: .55rem; }
.ud-ip { border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.02); padding: .6rem .75rem; }
.ud-ip-top { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.ud-ip-addr { min-width: 0; display: flex; flex-direction: column; }
.ud-ip-addr b { font-size: .85rem; font-weight: 650; overflow-wrap: anywhere; }
.ud-ip-addr span { font-size: .74rem; color: var(--text-muted); }
.ud-ip-more summary { cursor: pointer; font-size: .76rem; color: var(--text-muted); margin-top: .35rem; text-align: left; }
.ud-ip-more[open] summary { margin-bottom: .4rem; }
.ud-ip-flags { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0 .5rem; }
.ud-ip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .9rem; margin-top: .3rem; }
.ud-ip-grid div { display: flex; justify-content: space-between; gap: .6rem; font-size: .74rem; }
.ud-ip-grid span { color: var(--text-muted); }
.ud-ip-grid b { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.ud-ip-foot { margin-top: .45rem; font-size: .72rem; }
.ud-ip-empty { padding: 1rem; text-align: center; color: var(--text-muted); font-size: .82rem; border: 1px dashed var(--border); border-radius: 12px; }

/* ---------- Devices / sessions (desktop table · mobile cards) ---------- */
.ud-dev-cards, .ud-sess-cards { display: none; }

/* fingerprint / details (device ids, raw event data) */
.ud-fp { margin-top: .2rem; }
.ud-fp summary { cursor: pointer; font-size: .7rem; color: var(--text-muted); text-align: left; }
.ud-fp code { display: block; max-width: 100%; overflow-wrap: anywhere; font-size: .68rem; margin-top: .2rem; }

/* ---------- Activity ---------- */
.ud-a-det { margin-top: .35rem; }
.ud-a-det summary { cursor: pointer; font-size: .74rem; color: var(--text-muted); text-align: left; }
.ud-a-det-meta { display: grid; grid-template-columns: auto 1fr; gap: .28rem 1rem; margin: .45rem 0 .15rem; padding: .6rem .7rem;
  border: 1px solid var(--border); border-radius: 10px; background: rgba(0,0,0,.18); font-size: .75rem; }
.ud-a-det-meta span { color: var(--text-muted); }
.ud-a-det-meta b { font-weight: 600; overflow-wrap: anywhere; }

/* ---------- Transactions ---------- */
.ud-tx { padding: .4rem .9rem .9rem; }
.ud-tx-head, .ud-tx-row { display: grid; grid-template-columns: minmax(150px,1.4fr) 130px 110px 120px; gap: .8rem; align-items: center; }
.ud-tx-head { padding: .7rem .3rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); }
.ud-tx-row { padding: .6rem .3rem; border-top: 1px solid var(--border); }
.ud-tx-main { min-width: 0; display: flex; flex-direction: column; }
.ud-tx-main .tt { font-size: .86rem; font-weight: 650; }
.ud-tx-main .tt-sub { font-size: .74rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ud-tx-amt { display: flex; flex-direction: column; }
.ud-tx-amt .pos { color: var(--green); }
.ud-tx-amt .neg { color: #ff8ba0; }
.ud-tx-amt .bal { font-size: .7rem; color: var(--text-muted); }
.ud-tx-when { display: flex; flex-direction: column; font-size: .82rem; color: var(--text-soft); }
.ud-tx-when span { font-size: .7rem; color: var(--text-muted); }
.ud-tx-empty { padding: 1.4rem; text-align: center; color: var(--text-muted); font-size: .84rem; }

/* ---------- Financials tabs ---------- */
.ud-tabc .ud-tabs { margin: .6rem .9rem 0; }
.ud-tabc .det-panel { padding: 0 .6rem .6rem; }

/* ---------- Device modal rows ---------- */
.ud-dev-modal-item { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .45rem 0; border-bottom: 1px solid var(--border); }
.ud-dev-modal-item:last-child { border-bottom: 0; }
.ud-dev-modal-name { min-width: 0; display: flex; flex-direction: column; }
.ud-dev-modal-name b { font-size: .86rem; }
.ud-dev-modal-name span { font-size: .74rem; overflow-wrap: anywhere; }
.ud-dev-modal-form { display: inline-flex; gap: .4rem; align-items: center; flex: 0 0 auto; }
.ud-dev-modal-form .input { width: 170px; }

/* ---------- Responsive ---------- */
@media (max-width: 1120px) {
  .ud-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .ud-grid2 { grid-template-columns: 1fr; }
  .ud-dev-table, .ud-sess-table { display: none; }
  .ud-dev-cards, .ud-sess-cards { display: flex; flex-direction: column; gap: .8rem; padding: .9rem; }
}
@media (max-width: 640px) {
  .ud-banner { flex-direction: column; }
  .ud-banner-side { align-items: flex-start; width: 100%; }
  .ud-stats { gap: .6rem; }
  .ud-statcard { padding: .7rem; }
  .ud-lvl-stats { grid-template-columns: 1fr; }
  .ud-sec-ind { grid-template-columns: 1fr; }
  .ud-ip-grid { grid-template-columns: 1fr; }
  .ud-tx-head { display: none; }
  .ud-tx-row { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .ud-dev-modal-form { flex-direction: column; align-items: stretch; }
  .ud-dev-modal-form .input { width: auto; }
}

/* ---------- Device / session cards (mobile) ---------- */
.ud-card { border: 1px solid var(--border); border-radius: 14px; padding: .8rem .9rem; background: var(--glass); }
.ud-card--red { border-color: rgba(239,77,100,.4); }
.ud-card-top { display: flex; align-items: center; gap: .7rem; }
.ud-card-title { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.ud-card-title > div { font-weight: 650; font-size: .92rem; overflow-wrap: anywhere; }
.ud-card-top > .badge { flex: 0 0 auto; }
.ud-dev-ico { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 10px; display: grid; place-items: center; background: rgba(245,197,24,.1); color: var(--gold); }
.ud-dev-ico--soft { background: rgba(255,255,255,.05); color: var(--text-soft); }
.ud-dev-ico svg { width: 18px; height: 18px; }
.ud-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem .9rem; margin-top: .75rem; }
.ud-card-grid div { display: flex; flex-direction: column; }
.ud-card-grid span { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.ud-card-grid b { font-size: .84rem; font-weight: 650; overflow-wrap: anywhere; }
.ud-card-note { margin: .6rem 0 0; font-size: .78rem; color: var(--text-muted); }
.ud-card-actions { margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--border); }
.ud-card-actions form { display: inline-flex; }
.ud-dev-ban-form { display: flex; align-items: center; gap: .5rem; }
.ud-dev-ban-form .input { flex: 1 1 auto; }
.ud-sess-empty { padding: 1.2rem; text-align: center; color: var(--text-muted); font-size: .84rem; }
.dev-row-banned { opacity: .62; }

@media (max-width: 640px) {
  .ud-card-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Admin User Profile — rebuilt layout
   Dark page · subtle surfaces · clean separators · gold as accent only
   ========================================================================== */

.up-profile { max-width: 1360px; margin: 0 auto; min-width: 0; }

/* ---------- Profile header shell ---------- */
.up-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
              var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  box-shadow: var(--shadow-md);
}

.up-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.75rem;
  padding: 1.9rem 2rem 1.6rem;
}
.up-header-main { display: flex; align-items: center; gap: 1.35rem; min-width: 0; flex: 1 1 auto; }

.up-avatar-wrap { position: relative; flex: 0 0 auto; }
.up-avatar {
  width: 92px; height: 92px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 2.25rem; font-weight: 800; color: var(--text);
  background: radial-gradient(120% 130% at 30% 18%, #242a3a, #11131a);
  position: relative;
}
/* The member icon sits inside the ring, so the ring keeps its own dark plate
   and only the palette colour moves in. Sized just under the plate so the
   gradient edge never touches the gold ring. */
.avatar-up { width: 84px; height: 84px; font-size: 2rem; border-radius: 50%; }
.up-avatar::before {
  content: ''; position: absolute; inset: -3px; border-radius: 50%; padding: 2px;
  background: linear-gradient(135deg, rgba(245, 197, 24, 0.9), rgba(245, 197, 24, 0.16) 42%, rgba(255, 255, 255, 0.14) 78%, rgba(245, 197, 24, 0.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.up-avatar-status {
  position: absolute; right: 0; bottom: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-faint);
  border: 3px solid var(--bg-card);
}
.up-avatar-status.active { background: var(--green); box-shadow: 0 0 0 3px rgba(38, 208, 124, 0.16); }
.up-avatar-status.suspended { background: var(--amber); box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.16); }
.up-avatar-status.banned { background: var(--red); box-shadow: 0 0 0 3px rgba(239, 77, 100, 0.16); }

.up-header-copy { min-width: 0; }
.up-name-row { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; }
.up-name { font-size: clamp(1.5rem, 2.1vw, 1.8rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.18; margin: 0; }
.up-meta {
  display: flex; align-items: center; gap: .42rem; flex-wrap: wrap;
  color: var(--text-muted); font-size: .86rem; line-height: 1.45;
  margin-top: .55rem; min-width: 0;
}
.up-meta .mono { color: var(--text-soft); font-size: .9rem; overflow-wrap: anywhere; }
.up-dot { color: var(--text-faint); }
.up-country { display: inline-flex; align-items: center; gap: .35rem; }

.up-header-side { display: flex; align-items: center; gap: 1.1rem; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.up-badges { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* ---------- Compact stat strip ---------- */
.up-strip { border-top: 1px solid var(--border); }
.up-statstrip { display: flex; align-items: stretch; overflow-x: auto; scrollbar-width: none; }
.up-statstrip::-webkit-scrollbar { display: none; }
.up-statstrip-item {
  flex: 1 1 0;
  min-width: max-content;
  display: flex; align-items: baseline; justify-content: center; gap: .55rem;
  padding: .85rem 1.25rem;
}
.up-statstrip-item + .up-statstrip-item { border-left: 1px solid var(--border); }
.up-statstrip-item b { font-size: 1.06rem; font-weight: 800; letter-spacing: -.01em; color: var(--text); font-variant-numeric: tabular-nums; }
.up-statstrip-item b.gold { color: var(--gold); }
.up-statstrip-item span { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); white-space: nowrap; }

/* ---------- Profile navigation ---------- */
.up-nav { display: flex; align-items: stretch; gap: .2rem; border-top: 1px solid var(--border); padding: 0 1.5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.up-nav::-webkit-scrollbar { display: none; }
.up-nav-btn {
  flex: 0 0 auto; padding: .95rem 1.05rem; margin-bottom: -1px;
  border: 0; border-bottom: 3px solid transparent;
  font: inherit; font-size: .95rem; font-weight: 650; color: var(--text-muted);
  background: transparent; cursor: pointer; white-space: nowrap;
  transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
.up-nav-btn:hover { color: var(--text); }
.up-nav-btn.is-active { color: var(--gold); border-bottom-color: var(--gold); }

/* ---------- Panels ---------- */
.up-panel { display: none; padding: 1.9rem 0 0; }
.up-panel.is-active { display: block; animation: upfade .25s var(--ease); }
.up-panel > * + * { margin-top: 1.5rem; }
@keyframes upfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Overview — balanced two-column ---------- */
.up-overview {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(310px, 1fr);
  column-gap: clamp(1.5rem, 2.4vw, 2.5rem);
  row-gap: 1.5rem;
  align-items: start;
}
.up-col { min-width: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.up-col-main { grid-column: 1; }
.up-col-side { grid-column: 2; }

/* ---------- Section surfaces (subtle, one tone per group) ---------- */
.up-block,
.up-section {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.032), rgba(255, 255, 255, 0.013));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.4rem 1.5rem 1.35rem;
}
.up-block-title,
.up-section-title {
  position: relative;
  font-size: 1.02rem; font-weight: 750; letter-spacing: -.01em; color: var(--text);
  margin: 0 0 1.05rem;
  padding-left: .75rem;
}
.up-block-title::before,
.up-section-title::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 1.02em; border-radius: 3px; background: var(--gold-grad);
}
.up-block-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.05rem; }
.up-block-head .up-block-title { margin: 0; }
.up-block-head .up-link { padding: 0; }

/* ---------- About — paired info rows ---------- */
.up-about-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.2rem; }
.up-field { min-width: 0; padding: .8rem 0; border-bottom: 1px solid var(--border); }
.up-field span { display: block; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: .25rem; }
.up-field b { display: block; font-size: .96rem; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.up-field--wide { grid-column: 1 / -1; }
.up-field .up-country { display: inline-flex; align-items: center; gap: .35rem; }

/* ---------- Key / value rows ---------- */
.up-rows { display: flex; flex-direction: column; }
.up-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .76rem 0; border-bottom: 1px solid var(--border); }
.up-row:last-child { border-bottom: 0; }
.up-row-label { font-size: .92rem; font-weight: 600; color: var(--text-muted); }
.up-row-value { display: flex; align-items: center; gap: .5rem; text-align: right; font-weight: 700; font-size: .95rem; }

/* ---------- Login token block ---------- */
.up-login-token { display: flex; flex-direction: column; gap: .6rem; padding: .2rem 0 .6rem; }
.up-login-token .copy-input { font-size: .8rem; letter-spacing: .02em; }
.up-login-token-actions { display: flex; }
.up-login-token-actions .btn { width: 100%; justify-content: center; }
.up-login-token-note { display: flex; align-items: flex-start; gap: .45rem; padding: .6rem .7rem; margin-top: .15rem; border-radius: 10px; background: rgba(251, 191, 36, 0.06); border: 1px solid rgba(251, 191, 36, 0.18); font-size: .74rem; line-height: 1.5; color: var(--text-muted); }
.up-login-token-note svg { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 2px; color: var(--amber); }

/* ---------- Points block ---------- */
.up-points .up-points-balance { font-size: clamp(1.75rem, 4vw, 2rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; color: var(--text); font-variant-numeric: tabular-nums; }
.up-points .up-points-unit { font-size: .8rem; color: var(--text-muted); margin: .2rem 0 .4rem; }
.up-points .lvl { padding: 0; margin-top: 1rem; }
.up-points .lvl-head { display: flex; align-items: center; gap: .8rem; }
.up-points .lvl-badge { font-size: .86rem; font-weight: 900; letter-spacing: .03em; padding: .42rem .8rem; border-radius: 12px; background: var(--gold-grad); color: #17140a; box-shadow: var(--glow-gold); flex: 0 0 auto; }
.up-points .lvl-title { font-size: .96rem; font-weight: 750; line-height: 1.25; }
.up-points .lvl-sub { font-size: .78rem; color: var(--text-muted); margin-top: .05rem; }
.up-points .lvl-to-next { display: none; }
.up-points .lvl-track { height: 8px; margin-top: .85rem; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.07); border: 1px solid var(--border); overflow: hidden; }
.up-points .lvl-fill { height: 100%; border-radius: var(--radius-full); background: var(--gold-grad); }
.up-points-more { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .65rem; font-size: .8rem; color: var(--text-muted); }
.up-points-more b { color: var(--gold); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Timeline ---------- */
.up-timeline { display: flex; flex-direction: column; }
.up-timeline-day { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); padding: .65rem 0 .3rem; margin-top: .5rem; }
.up-timeline-day:first-child { margin-top: 0; }
.up-tl-item { display: flex; align-items: flex-start; gap: .8rem; padding: .72rem 0; border-bottom: 1px solid var(--border); }
.up-tl-item:last-child { border-bottom: 0; }
.up-tl-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; margin-top: .48rem; background: var(--text-faint); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04); }
.up-tl-dot--green { background: var(--green); }
.up-tl-dot--red { background: var(--red); }
.up-tl-dot--gold { background: var(--gold); }
.up-tl-dot--blue { background: var(--blue); }
.up-tl-body { min-width: 0; flex: 1 1 auto; }
.up-tl-title { font-size: .95rem; font-weight: 650; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.up-tl-desc { font-size: .83rem; color: var(--text-muted); margin-top: .12rem; }
.up-tl-when { font-size: .78rem; color: var(--text-faint); flex: 0 0 auto; white-space: nowrap; margin-top: .3rem; font-variant-numeric: tabular-nums; }
.up-tl-det { margin-top: .3rem; }
.up-tl-det summary { cursor: pointer; font-size: .74rem; color: var(--text-muted); text-align: left; }
.up-tl-det-meta { display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; margin: .4rem 0 .1rem; padding: .6rem .75rem; font-size: .74rem; border: 1px solid var(--border); border-radius: 10px; background: rgba(0, 0, 0, 0.22); }
.up-tl-det-meta span { color: var(--text-muted); }
.up-tl-det-meta b { font-weight: 600; overflow-wrap: anywhere; }

/* ---------- Section links ---------- */
.up-link { border: 0; background: transparent; padding: .6rem 0 0; font: inherit; font-size: .88rem; font-weight: 650; color: var(--gold); cursor: pointer; text-align: left; }
.up-link:hover { color: var(--gold-soft); }

/* ---------- Empty state ---------- */
.up-empty { display: flex; flex-direction: column; gap: .3rem; padding: 1.6rem 1rem; text-align: center; color: var(--text-muted); font-size: .88rem; border: 1px dashed var(--border); border-radius: 12px; }
.up-empty b { font-size: .95rem; color: var(--text-soft); }
.up-empty span { font-size: .82rem; }

/* ---------- Device / session rows ---------- */
.up-device { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--border); }
.up-device:last-child { border-bottom: 0; }
.up-device--red .up-device-ico { background: var(--red-dim); color: var(--red-soft); }
.up-device-ico { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.05); color: var(--text-soft); border: 1px solid var(--border); }
.up-device-ico--soft { background: rgba(255, 255, 255, 0.035); color: var(--text-soft); }
.up-device-ico svg { width: 21px; height: 21px; }
.up-device-main { min-width: 0; flex: 1 1 auto; }
.up-device-name { font-size: 1rem; font-weight: 700; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.up-device-sub { font-size: .85rem; color: var(--text-soft); margin-top: .2rem; }
.up-device-sub.dim { color: var(--text-muted); font-size: .8rem; overflow-wrap: anywhere; }
.up-device-act { flex: 0 0 auto; display: flex; align-items: center; gap: .5rem; }
.up-device-ban { display: flex; align-items: center; gap: .5rem; }
.up-device-ban .input { width: 160px; }

/* ---------- Transactions ---------- */
.up-tx-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .9rem; }
.up-tx-head .up-block-title { margin: 0; }
.up-block .ud-tx { padding: .3rem .2rem .2rem; }
.ud-tx-empty { display: flex; flex-direction: column; gap: .25rem; }
.ud-tx-empty b { font-size: .95rem; color: var(--text); }
.ud-tx-empty span { font-size: .8rem; }

/* ---------- Security ---------- */
.up-risk { display: flex; align-items: center; gap: .75rem; margin: .2rem 0 1rem; }
.up-sec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.up-sec-chip { display: flex; flex-direction: column; gap: .1rem; padding: .6rem .75rem; border-radius: 10px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.02); font-size: .74rem; color: var(--text-muted); }
.up-sec-chip b { font-size: .82rem; font-weight: 650; color: var(--text); }
.up-sec-chip.is-on { border-color: rgba(239, 77, 100, 0.35); background: rgba(239, 77, 100, 0.07); }
.up-sec-chip.is-on b { color: #ff8ba0; }
.up-sec-chip:not(.is-on) b { color: var(--green); }

/* ---------- IP list ---------- */
.up-ip-list { display: flex; flex-direction: column; gap: .6rem; }
.up-ip-item { border: 1px solid var(--border); border-radius: 12px; background: rgba(255, 255, 255, 0.02); padding: .65rem .8rem; }
.up-ip-head { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.up-ip-addr { min-width: 0; display: flex; flex-direction: column; flex: 1 1 auto; }
.up-ip-addr b { font-size: .87rem; font-weight: 650; overflow-wrap: anywhere; }
.up-ip-addr span { font-size: .76rem; color: var(--text-muted); }
.up-ip-more summary { cursor: pointer; font-size: .76rem; color: var(--text-muted); margin-top: .3rem; text-align: left; }
.up-ip-more[open] summary { margin-bottom: .35rem; }
.up-ip-flags { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0 .45rem; }
.up-ip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem .8rem; margin-top: .25rem; }
.up-ip-grid div { display: flex; justify-content: space-between; gap: .5rem; font-size: .74rem; }
.up-ip-grid span { color: var(--text-muted); }
.up-ip-grid b { font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.up-ip-foot { margin-top: .4rem; font-size: .72rem; }

/* ---------- Earnings ---------- */
.up-earn-tabs { display: flex; gap: .35rem; margin-bottom: 0; flex-wrap: wrap; }
.up-earn-tabs + .up-earn-panel { margin-top: 1rem; }
.up-earn-tab { flex: 0 0 auto; padding: .5rem .95rem; border: 0; border-radius: 9px; font: inherit; font-size: .85rem; font-weight: 700; color: var(--text-muted); background: transparent; cursor: pointer; transition: all .15s var(--ease); }
.up-earn-tab:hover { color: var(--text-soft); background: rgba(255, 255, 255, 0.04); }
.up-earn-tab.is-active { color: var(--gold); background: rgba(245, 197, 24, 0.1); }
.up-earn-panel { display: none; }
.up-earn-panel.is-active { display: block; }

/* ---------- Actions dropdown refinements ---------- */
.ud-dd { min-width: 280px; width: max-content; max-width: calc(100vw - 32px); background: rgba(22, 24, 32, 0.94); border-color: var(--border-strong); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.ud-acts { white-space: nowrap; }

.up-panel .table-wrap { margin-top: .25rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1120px) {
  .up-overview { grid-template-columns: minmax(0, 1fr); }
  .up-col-main, .up-col-side { grid-column: auto; }
  .up-header { padding: 1.6rem 1.5rem 1.4rem; }
  .up-nav { padding: 0 1rem; }
}
@media (max-width: 900px) {
  .up-avatar { width: 72px; height: 72px; font-size: 1.8rem; }
  .up-avatar-status { width: 14px; height: 14px; }
  .up-name { font-size: 1.5rem; }
  .up-meta { font-size: .82rem; }
  .up-statstrip-item { padding: .75rem 1rem; }
  .up-panel { padding-top: 1.5rem; }
  .up-device { flex-wrap: wrap; }
  .up-device-act { width: 100%; }
  .up-device-ban { width: 100%; }
  .up-device-ban .input { flex: 1 1 auto; width: auto; }
}
@media (max-width: 640px) {
  .up-card { border-radius: 16px; }
  .up-header { flex-direction: column; align-items: stretch; padding: 1.25rem 1rem 1.1rem; gap: 1.1rem; }
  .up-header-main { gap: 1rem; }
  .up-avatar { width: 64px; height: 64px; font-size: 1.6rem; }
  .up-avatar-status { width: 13px; height: 13px; }
  .up-name { font-size: 1.4rem; }
  .up-header-side { width: 100%; justify-content: space-between; gap: .8rem; }
  .up-badges { justify-content: flex-start; }
  .up-nav { padding: 0 .4rem; }
  .up-nav-btn { padding: .85rem .85rem; font-size: .88rem; }
  .up-panel { padding-top: 1.25rem; }
  .up-block, .up-section { padding: 1.15rem 1rem 1.1rem; }
  .up-about-grid { grid-template-columns: 1fr; }
  .up-field--wide { grid-column: auto; }
  .up-tl-item { gap: .6rem; }
  .up-tl-when { white-space: normal; font-size: .72rem; text-align: right; }
  .up-sec-grid { grid-template-columns: 1fr 1fr; }
  .up-ip-grid { grid-template-columns: 1fr; }
  .up-points .up-points-balance { font-size: 1.7rem; }
  .up-points-more { align-items: flex-start; flex-direction: column; gap: .2rem; }
  .up-points-more b { white-space: normal; }
  .ud-dd { min-width: 0; width: min(280px, calc(100vw - 32px)); right: 0; }
}

/* ---------- Withdrawals v2: status chips, decision header, detail/listing layout ---------- */
.wd-page { max-width: 1180px; margin: 0 auto; width: 100%; }
.wd-page .page-head, .pf-wrap .page-head { max-width: 1180px; margin-left: auto; margin-right: auto; }

/* Status chip with signal dot */
.wd-status {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .28rem .72rem; border-radius: var(--radius-full);
  font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap; border: 1px solid transparent;
}
.wd-status i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; flex: 0 0 auto; }
.wd-status--pending { color: var(--amber); background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.32); }
.wd-status--approved { color: var(--blue); background: var(--blue-dim); border-color: rgba(96, 165, 250, 0.32); }
.wd-status--processing { color: var(--blue); background: var(--blue-dim); border-color: rgba(96, 165, 250, 0.32); }
.wd-status--completed { color: var(--green); background: var(--green-dim); border-color: rgba(38, 208, 124, 0.32); }
.wd-status--rejected { color: var(--red-soft); background: var(--red-dim); border-color: rgba(239, 77, 100, 0.34); }
.wd-status--cancelled { color: var(--text-muted); background: rgba(255, 255, 255, 0.05); border-color: var(--border); }

/* Decision header (details page) */
.wd-decision {
  position: relative;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1.4rem; flex-wrap: wrap;
  margin-top: 1.1rem; padding: 1.6rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, var(--bg-card-2), var(--bg-card));
  border: 1px solid var(--border);
  overflow: hidden;
}
.wd-decision::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
}
.wd-decision--pending::before { background: linear-gradient(90deg, var(--amber), rgba(251, 191, 36, 0.12)); }
.wd-decision--approved::before, .wd-decision--processing::before { background: linear-gradient(90deg, var(--blue), rgba(96, 165, 250, 0.12)); }
.wd-decision--completed::before { background: linear-gradient(90deg, var(--green), rgba(38, 208, 124, 0.12)); }
.wd-decision--rejected::before, .wd-decision--cancelled::before { background: linear-gradient(90deg, var(--red), rgba(239, 77, 100, 0.12)); }

.wd-decision-main { flex: 1 1 360px; min-width: 0; }
.wd-decision-top { display: flex; align-items: center; gap: .9rem; }
.wd-decision-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0; background: var(--blue-dim); color: var(--blue); }
.wd-decision-ico svg { width: 22px; height: 22px; }
.wd-decision-id { min-width: 0; }
.wd-decision-title { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.01em; }
.wd-decision-sub { color: var(--text-muted); font-size: .82rem; margin-top: .15rem; }
.wd-decision-top .wd-status { margin-left: auto; }

.wd-decision-money { margin-top: 1.1rem; }
.wd-money { display: flex; align-items: stretch; border: 1px solid var(--border); border-radius: var(--radius); background: rgba(255, 255, 255, 0.02); overflow: hidden; }
.wd-money-item { flex: 1 1 0; min-width: 0; padding: .85rem 1.15rem; display: flex; flex-direction: column; gap: .25rem; border-right: 1px solid var(--border); }
.wd-money-item:last-child { border-right: 0; }
.wd-money-label { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd-money-val { font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.wd-money-met { font-size: .72rem; color: var(--text-muted); }
.wd-money-fee { color: var(--red-soft); }
.wd-money-item--net { background: rgba(245, 197, 24, 0.06); }
.wd-money-net { font-size: 1.7rem; font-weight: 900; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.wd-decision-hint { margin-top: .8rem; color: var(--text-muted); font-size: .82rem; line-height: 1.55; max-width: 46rem; }

/* Decision bar (details page) */
.wd-actionbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: .9rem; padding: .95rem 1.3rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--glass); }
.wd-actionbar-label { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
.wd-actionbar-note { font-size: .8rem; color: var(--text-soft); margin-top: .1rem; }
.wd-actionbar-actions { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.wd-actionbar-actions form { margin: 0; }
.wd-actionbar .wd-act { min-width: 180px; }
.wd-actionbar-final { display: inline-flex; align-items: center; gap: .5rem; color: var(--text-muted); font-size: .82rem; font-weight: 600; }
.wd-actionbar-final i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); }

.wd-act { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font-weight: 700; }
.wd-act svg { width: 18px; height: 18px; flex: 0 0 auto; }
.wd-act-approve, .wd-act-reject, .wd-act-process { font-size: .95rem; padding: .8rem 1.3rem; border-radius: 12px; }
.wd-act-approve { background: linear-gradient(135deg, #2fe387 0%, #1fb96a 100%); color: #06220f; border-color: transparent; box-shadow: var(--glow-green); }
.wd-act-approve:hover { filter: brightness(1.06); box-shadow: 0 0 30px rgba(38, 208, 124, 0.35); }
.wd-act-reject { background: var(--red-dim); color: var(--red-soft); border-color: rgba(239, 77, 100, 0.4); }
.wd-act-reject:hover { box-shadow: 0 0 26px rgba(239, 77, 100, 0.22); background: rgba(239, 77, 100, 0.18); }
.wd-act-process { background: var(--gold-grad); color: #17140a; border-color: transparent; box-shadow: var(--glow-gold); }
.wd-act-process:hover { filter: brightness(1.05); }

/* Mark-as-paid panel */
.wd-pay { margin-top: 1.1rem; }

/* Two-column detail layout */
.wd-cols { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 360px); gap: 1.1rem; align-items: start; margin-top: 1.1rem; }
.wd-col-main { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }
.wd-col-side { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; }

/* Member card */
.wd-member { display: flex; align-items: center; gap: .9rem; padding: .2rem 0 1rem; }
.wd-member .avatar { flex-shrink: 0; }
.wd-member-id { min-width: 0; }
.wd-member-name { display: block; font-weight: 800; font-size: 1.05rem; color: var(--text); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd-member-name:hover { color: var(--gold); }
.wd-member-mail { display: block; color: var(--text-muted); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.wd-member-badges { display: flex; gap: .4rem; flex-wrap: wrap; padding: 0 0 .4rem; }

/* Combined summary card (Withdrawal & payment) */
.wd-summary { padding: 0; }
.wd-sum-sec { padding: 1.25rem 1.4rem; }
.wd-sum-sec + .wd-sum-sec { border-top: 1px solid var(--border); }
.wd-sum-title { margin: 0 0 1rem; display: flex; align-items: center; gap: .6rem; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
.wd-sum-title::before { content: ''; width: 3px; height: 14px; border-radius: 2px; background: var(--gold-grad); box-shadow: var(--glow-gold); }
.wd-sum-money { display: flex; flex-direction: column; }
.wd-sum-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem 0; }
.wd-sum-row + .wd-sum-row { border-top: 1px dashed var(--border); }
.wd-sum-row > span { color: var(--text-muted); font-size: .85rem; }
.wd-sum-row b { font-weight: 700; font-size: .95rem; text-align: right; overflow-wrap: anywhere; display: inline-flex; align-items: center; gap: .4rem; }
.wd-sum-row--fee b { color: var(--red-soft); }
.wd-sum-row--net { margin-top: .15rem; padding-left: .95rem; padding-right: .95rem; background: rgba(245, 197, 24, 0.05); border: 0; border-left: 3px solid var(--gold); border-radius: 6px; }
.wd-sum-row--net > span { text-transform: uppercase; font-size: .7rem; font-weight: 800; letter-spacing: .06em; color: var(--gold-soft); }
.wd-sum-row--net b { font-size: 1.3rem; font-weight: 900; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.wd-sum-row--reason { border-top-color: rgba(239, 77, 100, 0.35); }
.wd-sum-pairs { margin-top: .9rem; padding-top: .9rem; border-top: 1px dashed var(--border); }
.wd-sum-pairs-title { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); margin-bottom: .55rem; }
.wd-sum-note { margin-top: 1rem; padding: .8rem 1rem; border: 1px solid rgba(96, 165, 250, 0.25); background: var(--blue-dim); border-radius: var(--radius); }
.wd-sum-note-title { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: var(--blue); margin-bottom: .3rem; }
.wd-sum-note p { margin: 0; font-size: .84rem; line-height: 1.55; overflow-wrap: anywhere; }

/* Key/value list (member + history cards) */
.wd-kv { border-top: 1px solid var(--border); padding: .3rem 0 .8rem; display: flex; flex-direction: column; }
.wd-kv > div { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .45rem 0; border-bottom: 1px dashed var(--border); }
.wd-kv > div:last-child { border-bottom: 0; }
.wd-kv span { color: var(--text-muted); font-size: .82rem; flex-shrink: 0; }
.wd-kv b { font-weight: 700; font-size: .9rem; text-align: right; overflow-wrap: anywhere; display: inline-flex; align-items: center; gap: .4rem; }

/* Trust & risk card */
.wd-risk-sum { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .2rem 0; }
.wd-risk-label { color: var(--text-muted); font-size: .82rem; }
.wd-risk-reasons { display: flex; flex-wrap: wrap; gap: .4rem; padding: .65rem 0 .2rem; }
.wd-risk-tag { font-size: .72rem; font-weight: 600; padding: .26rem .6rem; border-radius: 8px; border: 1px solid rgba(245, 197, 24, 0.28); background: rgba(245, 197, 24, 0.07); color: var(--gold-soft); }
.wd-flags { display: flex; flex-direction: column; gap: .35rem; padding: .6rem 0 0; }
.wd-flag { display: inline-flex; align-items: center; gap: .45rem; font-size: .74rem; font-weight: 700; }
.wd-flag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.wd-flag--high { color: var(--red-soft); }
.wd-flag--med { color: var(--amber); }
.wd-risk-clean { padding: 0 0 .2rem; color: var(--text-muted); font-size: .82rem; }
.wd-review-link { display: inline-flex; align-items: center; gap: .45rem; margin: .9rem 0 .3rem; color: var(--text-soft); font-size: .82rem; font-weight: 600; text-decoration: none; }
.wd-review-link svg { width: 15px; height: 15px; }
.wd-review-link:hover { color: var(--gold); }

/* Listing page */
.wd-filters { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; margin: 1.2rem 0; padding: .9rem 1.1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--glass); }
.wd-filters .field { margin: 0; }

.wd-member-cell { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.wd-member-cell .avatar { flex-shrink: 0; }
.wd-member-link { white-space: nowrap; }
.wd-member-meta { display: block; color: var(--text-muted); font-size: .72rem; margin-top: .1rem; }

.wd-paycell { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .78rem; color: var(--text-soft); }
.wd-view { color: var(--gold); font-size: .72rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.wd-view:hover { text-decoration: underline; }

/* Stacked money cell (listing table + all contexts) */
.wd-money-cell { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.wd-mc-row { display: flex; align-items: baseline; gap: .45rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wd-mc-row b { font-weight: 800; font-size: .92rem; }
.wd-mc-row small { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.wd-mc-row--fee { color: var(--red-soft); font-size: .82rem; }
.wd-mc-row--net { color: var(--gold); font-size: .82rem; font-weight: 700; }

.wd-row-actions { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.wd-row-actions .btn { padding: .38rem .7rem; font-size: .76rem; border-radius: 8px; }
.wd-row-actions .btn svg { width: 13px; height: 13px; }
.wd-txref { display: flex; align-items: center; gap: .4rem; margin: 0; }
.wd-txref .input { width: 96px; padding: .32rem .5rem; font-size: .76rem; }

/* Mobile cards refinements */
.wd-card-list { margin-top: 1.2rem; }
.wd-card-actions .btn svg { width: 13px; height: 13px; }

@media (max-width: 960px) {
  .wd-cols { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .wd-decision { padding: 1.2rem 1rem 1.1rem; }
  .wd-decision-top { flex-wrap: wrap; }
  .wd-decision-top .wd-status { margin-left: 0; }
  .wd-decision-hint { font-size: .8rem; }
  .wd-money { flex-direction: column; }
  .wd-money-item { border-right: 0; border-bottom: 1px solid var(--border); }
  .wd-money-item:last-child { border-bottom: 0; }
  .wd-money-net { font-size: 1.45rem; }
  .wd-actionbar { align-items: stretch; }
  .wd-actionbar .wd-act { min-width: 0; flex: 1 1 auto; }
  .wd-actionbar-actions { width: 100%; }
  .wd-actionbar-actions .btn { flex: 1 1 auto; }
  .wd-sum-sec { padding: 1.1rem 1.15rem; }
  .wd-sum-row { align-items: flex-start; flex-direction: column; gap: .25rem; }
  .wd-sum-row b { text-align: left; }
  .wd-sum-row--net { margin-right: -1.15rem; margin-left: -1.15rem; padding-right: 1.15rem; padding-left: 1rem; }
}
@media (max-width: 520px) {
  .wd-money-net { font-size: 1.3rem; }
}

/* ============================================================
   Settings — redesign v2: accordions + section rail + setting rows
   ============================================================ */
.st-page { padding-bottom: 6.5rem; }

/* ---------- Header ---------- */
.st-hero {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.2rem; flex-wrap: wrap; margin-bottom: 1.1rem;
}
.st-hero-kicker {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .66rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); background: rgba(245, 197, 24, 0.08);
  border: 1px solid rgba(245, 197, 24, 0.22); border-radius: 999px; padding: .28rem .7rem;
}
.st-hero-title { margin: .5rem 0 0; font-size: 1.65rem; font-weight: 800; letter-spacing: -.02em; }
.st-hero-sub { margin: .3rem 0 0; color: var(--text-muted); font-size: .86rem; max-width: 46rem; line-height: 1.55; }
.st-hero-tip {
  display: flex; align-items: center; gap: .55rem; max-width: 22rem;
  padding: .65rem .85rem; border-radius: 12px;
  border: 1px dashed var(--border-strong); background: rgba(255, 255, 255, 0.02);
  color: var(--text-muted); font-size: .74rem; line-height: 1.5;
}
.st-hero-tip svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--gold); }

/* ---------- Section rail ---------- */
.st-rail {
  position: sticky; top: calc(var(--nav-h) + .75rem); z-index: 30;
  padding: .45rem; display: flex; flex-wrap: wrap; gap: .25rem;
  margin-bottom: 1rem; border-radius: 999px;
  box-shadow: var(--shadow-md);
  scroll-margin-top: var(--nav-h);
}
.st-rail-link {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem .8rem; border-radius: 999px;
  border: 1px solid transparent; background: transparent;
  color: var(--text-muted); font-size: .78rem; font-weight: 700; font-family: inherit;
  cursor: pointer; white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.st-rail-ico { width: 15px; height: 15px; flex: 0 0 auto; opacity: .8; }
.st-rail-txt { overflow: hidden; text-overflow: ellipsis; }
.st-rail-link:hover { background: rgba(255, 255, 255, 0.05); color: var(--text); }
.st-rail-link.active, .st-rail-link.active:hover {
  background: var(--gold-grad); color: #17140a;
  box-shadow: 0 4px 18px rgba(245, 197, 24, 0.3);
}

/* ---------- Accordions ---------- */
.st-accs { display: grid; gap: .85rem; }
.st-accs > form { display: grid; gap: .85rem; min-width: 0; }
.st-acc {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  scroll-margin-top: calc(var(--nav-h) + 4.75rem);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.st-acc { border-color: rgba(245, 197, 24, 0.16); box-shadow: 0 8px 34px rgba(0, 0, 0, 0.25); }
.st-acc-head {
  display: flex; align-items: center; gap: .9rem; width: 100%;
  padding: .95rem 1.1rem; text-align: left;
}
.st-acc-ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--text-soft); border: 1px solid var(--border); background: rgba(255, 255, 255, 0.03); transition: transform .2s ease; }
.st-acc-ico svg { width: 18px; height: 18px; display: block; }
.st-acc-tit { display: grid; gap: .1rem; min-width: 0; flex: 1; }
.st-acc-tit b { font-size: .98rem; font-weight: 800; letter-spacing: -.01em; }
.st-acc-tit small { color: var(--text-muted); font-size: .76rem; line-height: 1.45; }
.st-acc-state { flex: 0 0 auto; }
.st-acc-inner { padding: 1rem 1.15rem 1.2rem; display: grid; gap: 1rem; }
.st-acc-inner > * { min-width: 0; }

/* ---------- Rows: [description | control] table pattern ---------- */
.st-rows {
  border: 1px solid var(--border); border-radius: 12px;
  background: rgba(255, 255, 255, 0.015); overflow: hidden;
}
.st-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: 1rem; align-items: center; padding: .85rem 1rem;
}
.st-row + .st-row { border-top: 1px solid var(--border); }
.st-row:last-child { border-bottom: 0; }
.st-row--sm { grid-template-columns: minmax(0, 1fr) minmax(0, 220px); }
.st-row--block { display: grid; grid-template-columns: 1fr; gap: .55rem; align-items: start; }
.st-row--bg { background: rgba(255, 255, 255, 0.02); }
.st-row-info { display: grid; gap: .18rem; min-width: 0; }
.st-row-info b { font-size: .85rem; font-weight: 700; color: var(--text); }
.st-row-info small { color: var(--text-muted); font-size: .75rem; line-height: 1.55; overflow-wrap: anywhere; }
.st-row-info small code { font-family: var(--font-mono); font-size: .7rem; background: rgba(255, 255, 255, 0.06); padding: .05rem .3rem; border-radius: 5px; }
.st-row-info small a { color: var(--gold); text-decoration: none; border-bottom: 1px dashed rgba(245, 197, 24, 0.4); }
.st-row-ctl { min-width: 0; }
.st-row-ctl .input, .st-row-ctl .select, .st-row-ctl .textarea { width: 100%; }
.st-row-ctl.st-row-num { display: flex; justify-content: flex-end; }
.st-row-ctl.st-row-num .input { max-width: 200px; text-align: right; }
.st-row-switch { display: flex; justify-content: flex-end; }

/* ---------- Switches ---------- */
.st-switch { display: inline-flex; align-items: center; cursor: pointer; }
.st-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.st-switch-track {
  position: relative; width: 42px; height: 23px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.1); border: 1px solid var(--border-strong);
  transition: background .18s ease, border-color .18s ease;
  display: block;
}
.st-switch-track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 17px; height: 17px; border-radius: 50%;
  background: #8a93a8;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
  transition: transform .18s ease, background .18s ease;
}
.st-switch input:checked + .st-switch-track { background: var(--gold-grad); border-color: transparent; }
.st-switch input:checked + .st-switch-track::after { transform: translateX(19px); background: #241d07; }
.st-switch input:focus-visible + .st-switch-track { outline: 2px solid rgba(245, 197, 24, 0.6); outline-offset: 2px; }

/* ---------- Notes ---------- */
.st-note {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .8rem 1rem; border-radius: 12px; border: 1px solid transparent;
}
.st-note svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: .12rem; }
.st-note-copy { display: grid; gap: .1rem; min-width: 0; }
.st-note-copy b { font-size: .83rem; }
.st-note-copy span { font-size: .76rem; color: var(--text-muted); line-height: 1.55; }
.st-note-copy span code { font-family: var(--font-mono); font-size: .7rem; background: rgba(255, 255, 255, 0.06); padding: .05rem .3rem; border-radius: 5px; }
.st-note--ok { background: var(--green-dim); border-color: rgba(38, 208, 124, 0.22); color: var(--green); }
.st-note--warn { background: rgba(245, 197, 24, 0.07); border-color: rgba(245, 197, 24, 0.24); color: var(--gold); }

/* ---------- Hints ---------- */
.st-hint { color: var(--text-muted); font-size: .76rem; line-height: 1.55; margin: 0; }
.st-hint code { font-family: var(--font-mono); font-size: .7rem; color: var(--text-soft); background: rgba(255, 255, 255, 0.06); padding: .05rem .3rem; border-radius: 5px; }
.st-hint--lead { font-size: .8rem; color: var(--text-soft); padding: 0 .15rem; }

/* ---------- Live preview ---------- */
.st-preview {
  display: grid; gap: .65rem; padding: 1rem 1.1rem;
  border: 1px dashed var(--border-strong); border-radius: 12px; background: rgba(255, 255, 255, 0.02);
}
.st-preview-label { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; color: var(--text-faint); }
.st-preview-brand { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.st-preview-logo { display: inline-flex; align-items: center; }
.st-preview-copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; }
.st-preview-copy b { font-size: 1.05rem; font-weight: 800; overflow-wrap: anywhere; }
.st-preview-copy span { color: var(--text-muted); font-size: .78rem; overflow-wrap: anywhere; }

/* ---------- Upload tiles ---------- */
.st-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.st-tile {
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  background: rgba(255, 255, 255, 0.015);
  display: grid; grid-template-columns: 1fr; gap: .8rem;
}
.st-tile--wide { grid-column: 1 / -1; }
.st-tile-view {
  display: grid; place-items: center; padding: 1.4rem 1.1rem; min-height: 130px;
  border: 1px dashed var(--border-strong); border-radius: 10px;
  margin: .8rem .8rem 0;
  background-image: conic-gradient(rgba(255, 255, 255, 0.035) 25%, transparent 0 50%, rgba(255, 255, 255, 0.035) 0 75%, transparent 0);
  background-size: 16px 16px;
}
.st-tile-view img { max-width: 100%; max-height: 300px; object-fit: contain; border-radius: 8px; }
.st-tile-view--wide { min-height: 170px; }
.st-tile-view--wide img { max-height: 260px; }
.st-tile-view .logo, .st-preview-logo .logo {
  width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center;
  background: var(--gold-grad); color: #17140a; font-weight: 900; font-size: 1.4rem; box-shadow: var(--glow-gold);
}
.st-tile-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; padding: 0 .9rem; }
.st-tile-info { display: grid; gap: .12rem; min-width: 0; }
.st-tile-info b { font-size: .88rem; font-weight: 800; }
.st-tile-info small { color: var(--text-muted); font-size: .75rem; line-height: 1.5; }
.st-tile-actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: 0 .9rem; }
.st-tile-specs { font-size: .72rem; color: var(--text-faint); }
.st-tile-specs b { color: var(--gold-soft); }
.st-tile-ctl {
  display: grid; gap: .55rem; margin: 0 .8rem .8rem;
  padding: .75rem .8rem; border-radius: 10px;
  background: rgba(0, 0, 0, 0.22); border: 1px solid var(--border);
}
.st-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.st-file-btn { display: inline-flex; align-items: center; gap: .4rem; }
.st-remove { display: inline-flex; align-items: center; gap: .4rem; font-size: .76rem; font-weight: 600; color: var(--red-soft); cursor: pointer; }
.st-remove input { accent-color: var(--red); }
.st-remove.is-hidden { display: none; }
[data-risk-cluster-fields].is-hidden { display: none; }
.st-btn-danger { color: var(--red-soft) !important; border-color: rgba(239, 77, 100, 0.32) !important; }
.st-btn-danger:hover { background: rgba(239, 77, 100, 0.08) !important; }

/* ---------- Sliders ---------- */
.st-slider { display: flex; align-items: center; gap: .65rem; }
.st-slider-lbl { flex: 0 0 auto; width: 44px; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); }
.st-slider-unit { flex: 0 0 auto; font-size: .72rem; font-weight: 700; color: var(--text-muted); }
.st-slider input[type="number"] { width: 78px !important; flex: 0 0 auto; padding: .42rem .55rem !important; font-size: .84rem !important; }
.st-acc input[type="range"] {
  -webkit-appearance: none; appearance: none;
  flex: 1; width: 100%; min-width: 0; height: 5px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.1); border: none; cursor: pointer; padding: 0;
}
.st-acc input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--gold-grad); border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 10px rgba(245, 197, 24, 0.45); cursor: pointer;
}
.st-acc input[type="range"]::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.2);
  background: var(--gold); box-shadow: 0 0 10px rgba(245, 197, 24, 0.45); cursor: pointer;
}

/* ---------- Favicon tab previews ---------- */
.st-tabprev { display: inline-flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.st-tabprev-label { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); }
.st-tabprev-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .65rem; border-radius: 999px;
  background: rgba(0, 0, 0, 0.4); border: 1px solid var(--border);
  font-size: .66rem; font-weight: 700; color: var(--text-muted);
}

/* ---------- Points preview ---------- */
.st-pts-preview {
  display: grid; place-items: center; gap: .18rem; padding: 1.15rem 1rem;
  border: 1px dashed rgba(245, 197, 24, 0.35); border-radius: 12px;
  background:
    radial-gradient(120px 60px at 50% 100%, rgba(245, 197, 24, 0.08), transparent),
    rgba(255, 255, 255, 0.015);
}
.st-pts-preview .gold-grad-text { font-size: 1.6rem; font-weight: 900; }
.st-pts-preview small { color: var(--text-muted); font-size: .74rem; }

/* ---------- Risk steps ---------- */
.st-steps { display: grid; gap: .75rem; }
.st-step {
  border: 1px solid var(--border); border-radius: 12px;
  background: rgba(255, 255, 255, 0.015); padding: 1rem 1.1rem;
}
.st-step-head { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .9rem; }
.st-step-num {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .76rem; color: #17140a;
  background: var(--gold-grad); box-shadow: 0 2px 10px rgba(245, 197, 24, 0.28);
}
.st-step-head b { display: block; font-size: .88rem; color: var(--text); }
.st-step-head small { display: block; color: var(--text-faint); font-size: .75rem; margin-top: .12rem; line-height: 1.5; }
.st-step-body { display: grid; gap: .85rem; }

/* ---------- Inline checkboxes ---------- */
.st-checkrow { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.st-checkrow input { width: 17px; height: 17px; accent-color: var(--gold); flex: 0 0 auto; }
.st-checkrow label { font-size: .83rem; font-weight: 600; color: var(--text-soft); cursor: pointer; }
.st-checkrow label small { color: var(--text-muted); font-weight: 400; }

/* ---------- Chips ---------- */
.st-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.st-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .48rem .85rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: rgba(255, 255, 255, 0.03);
  font-size: .78rem; font-weight: 600; color: var(--text-soft);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.st-chip input { accent-color: var(--gold); margin: 0; }
.st-chip:has(input:checked) { border-color: rgba(245, 197, 24, 0.45); background: rgba(245, 197, 24, 0.08); color: var(--gold); }

/* ---------- Action blocks (test email / seed data) ---------- */
.st-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  border: 1px dashed var(--border-strong); border-radius: 12px; padding: .95rem 1rem;
  background: rgba(255, 255, 255, 0.02);
}
.st-actions-field { display: grid; gap: .35rem; max-width: 30rem; }
.st-actions .label { font-size: .78rem; }

/* ---------- Key/value table (FCM server) ---------- */
.st-table { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, 0.015); }
.st-table-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem 1rem; font-size: .78rem;
  border-bottom: 1px solid var(--border);
}
.st-table-row:last-child { border-bottom: 0; }
.st-table-row > span:first-child { color: var(--text-muted); flex: 0 0 auto; }
.st-table-row code { font-family: var(--font-mono); font-size: .7rem; color: var(--text-soft); overflow-wrap: anywhere; }

/* ---------- Sub cards (FCM server) ---------- */
.st-cards2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; align-items: stretch; }
.st-subcard {
  border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.1rem;
  background: rgba(255, 255, 255, 0.015); display: grid; gap: .75rem; align-content: start; min-width: 0;
}
.st-subcard-head { display: flex; align-items: center; gap: .6rem; font-size: .86rem; }
.st-subcard-ico {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  background: rgba(129, 140, 248, 0.1); border: 1px solid rgba(129, 140, 248, 0.25); color: #a5b4fc;
}
.st-subcard-ico svg { width: 15px; height: 15px; }
.st-subcard form { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.st-fcm-actions { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.st-cards2-note { line-height: 1.6; }
.st-cards2-note + * { margin-top: auto; }

/* ---------- Details / help ---------- */
.st-details {
  border: 1px dashed var(--border); border-radius: 10px;
  padding: .75rem .9rem; background: rgba(255, 255, 255, 0.02);
}
.st-details summary { display: flex; align-items: center; gap: .5rem; cursor: pointer; font-size: .8rem; font-weight: 700; color: var(--text-soft); list-style: none; }
.st-details summary::-webkit-details-marker { display: none; }
.st-details summary svg { width: 14px; height: 14px; color: var(--gold); }
.st-details[open] summary { margin-bottom: .55rem; }
.st-details-list { margin: 0; padding: 0 0 0 1.2rem; display: grid; gap: .28rem; font-size: .76rem; color: var(--text-muted); line-height: 1.5; }

/* ---------- Floating save dock ---------- */
.st-dock { position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%); z-index: 80; }
.st-dock-btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .85rem 1.6rem; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--gold-grad); color: #17140a;
  font-size: .92rem; font-weight: 800; font-family: inherit;
  box-shadow: 0 10px 40px rgba(245, 197, 24, 0.35), 0 4px 18px rgba(0, 0, 0, 0.4);
  transition: transform .15s ease, box-shadow .15s ease;
}
.st-dock-btn svg { width: 17px; height: 17px; }
.st-dock-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 46px rgba(245, 197, 24, 0.45), 0 6px 20px rgba(0, 0, 0, 0.4); }
.st-dock-btn:active { transform: translateY(0); }
.st-dock-dot { width: 0; height: 8px; border-radius: 999px; background: #17140a; transition: width .2s ease; }
.st-dock-btn.is-dirty .st-dock-dot { width: 8px; }

/* ---------- Section tint colors ---------- */
[data-tint="gold"] .st-acc-ico { color: var(--gold); background: rgba(245, 197, 24, 0.09); border-color: rgba(245, 197, 24, 0.28); }
[data-tint="violet"] .st-acc-ico { color: #c084fc; background: rgba(192, 132, 252, 0.09); border-color: rgba(192, 132, 252, 0.28); }
[data-tint="green"] .st-acc-ico { color: #26d07c; background: rgba(38, 208, 124, 0.09); border-color: rgba(38, 208, 124, 0.28); }
[data-tint="blue"] .st-acc-ico { color: #60a5fa; background: rgba(96, 165, 250, 0.09); border-color: rgba(96, 165, 250, 0.28); }
[data-tint="red"] .st-acc-ico { color: #ff5c74; background: rgba(239, 77, 100, 0.09); border-color: rgba(239, 77, 100, 0.28); }
[data-tint="amber"] .st-acc-ico { color: #fbbf24; background: rgba(251, 191, 36, 0.09); border-color: rgba(251, 191, 36, 0.28); }
[data-tint="pink"] .st-acc-ico { color: #f472b6; background: rgba(244, 114, 182, 0.09); border-color: rgba(244, 114, 182, 0.28); }
[data-tint="cyan"] .st-acc-ico { color: #22d3ee; background: rgba(34, 211, 238, 0.09); border-color: rgba(34, 211, 238, 0.28); }
[data-tint="lime"] .st-acc-ico { color: #a3e635; background: rgba(163, 230, 53, 0.09); border-color: rgba(163, 230, 53, 0.28); }
[data-tint="slate"] .st-acc-ico { color: #94a3b8; background: rgba(148, 163, 184, 0.09); border-color: rgba(148, 163, 184, 0.28); }
[data-tint="indigo"] .st-acc-ico { color: #818cf8; background: rgba(129, 140, 248, 0.09); border-color: rgba(129, 140, 248, 0.28); }
.st-rail-link[data-tint]:not(.active) .st-rail-ico { opacity: .9; }
[data-tint="gold"].st-rail-link:not(.active) .st-rail-ico { color: var(--gold); }
[data-tint="violet"].st-rail-link:not(.active) .st-rail-ico { color: #c084fc; }
[data-tint="green"].st-rail-link:not(.active) .st-rail-ico { color: #26d07c; }
[data-tint="blue"].st-rail-link:not(.active) .st-rail-ico { color: #60a5fa; }
[data-tint="red"].st-rail-link:not(.active) .st-rail-ico { color: #ff5c74; }
[data-tint="amber"].st-rail-link:not(.active) .st-rail-ico { color: #fbbf24; }
[data-tint="pink"].st-rail-link:not(.active) .st-rail-ico { color: #f472b6; }
[data-tint="cyan"].st-rail-link:not(.active) .st-rail-ico { color: #22d3ee; }
[data-tint="lime"].st-rail-link:not(.active) .st-rail-ico { color: #a3e635; }
[data-tint="slate"].st-rail-link:not(.active) .st-rail-ico { color: #94a3b8; }
[data-tint="indigo"].st-rail-link:not(.active) .st-rail-ico { color: #818cf8; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .st-tiles { grid-template-columns: 1fr; }
  .st-cards2 { grid-template-columns: 1fr; }
  .st-row { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
}
@media (max-width: 860px) {
  .st-row, .st-row--sm { grid-template-columns: 1fr; gap: .5rem; align-items: stretch; }
  .st-row-ctl .input, .st-row-ctl .select { max-width: 100%; }
  .st-row-switch { justify-content: flex-start; }
  .st-hero-tip { display: none; }
  .st-acc-head { padding: .9rem; }
  .st-acc-inner { padding: .95rem .9rem 1.05rem; }
}
@media (max-width: 640px) {
  .st-rail { position: sticky; top: calc(var(--nav-h) + .5rem); flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: .4rem; }
  .st-rail::-webkit-scrollbar { display: none; }
  .st-rail-txt { font-size: .74rem; }
  .st-hero-title { font-size: 1.35rem; }
  .st-tile-foot, .st-tile-actions { flex-wrap: wrap; }
  .st-dock { left: 1rem; right: 1rem; transform: none; }
  .st-dock-btn { width: 100%; justify-content: center; }
}
/* ==========================================================================
   Brand logo sizing — the header box tracks the image (width: auto) so the
   clickable brand region never exceeds the artwork. The navbar height itself
   adapts through --nav-h (set inline on <body> from logo_height); 50vw is a
   desktop safety cap, narrow viewports keep their own media caps below.
   ========================================================================== */
.brand .logo-img {
  display: inline-block;
  width: auto;
  height: auto;
  max-width: 112px;
  max-height: 40px;
  object-fit: contain;
  object-position: left center;
  flex: 0 0 auto;
  border-radius: 8px;
}
.navbar .brand .logo-img {
  height: auto;
  max-height: calc(var(--nav-h) - 4px);
  width: auto;
  max-width: 50vw;
  object-fit: contain;
}
@media (max-width: 860px) {
  .navbar .logo-img { max-width: 160px; }
}
@media (max-width: 480px) {
  .brand .logo-img { max-width: 92px; max-height: 38px; }
  .navbar .brand .logo-img { max-width: 130px; }
  .navbar .brand { font-size: 1.02rem; }
}

/* Mobile / tablet — a near-full-height mark looks heavy in the compact header,
   so the logo scales down while the navbar keeps its height. */
@media (max-width: 768px) {
  .navbar .brand .logo {
    height: 44px;
    border-radius: 12px;
    font-size: 1.05rem;
  }
  .navbar .brand .logo svg { width: 22px; height: 22px; }
  .navbar .brand .logo-img { height: 44px; max-height: 44px; max-width: 150px; }
}
@media (max-width: 420px) {
  .navbar .brand .logo { height: 40px; }
  .navbar .brand .logo-img { height: 40px; max-height: 40px; }
}

/* ==========================================================================
   Notifications — header bell, unread badge, live dropdown
   ========================================================================== */
.nb { position: relative; }

.nb-bell {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: 0 0 auto; padding: 0;
  border: 1px solid var(--border); border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.nb-bell svg { width: 18px; height: 18px; }
.nb-bell:hover { border-color: rgba(245, 197, 24, 0.5); background: rgba(245, 197, 24, 0.08); color: var(--gold); }
.nb-bell:active { transform: scale(0.94); }
.nb-bell:focus-visible { outline: 2px solid rgba(245, 197, 24, 0.7); outline-offset: 2px; }
.nb-bell.pulse { animation: nb-pulse 0.4s ease; }
@keyframes nb-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.nb-badge {
  position: absolute; top: -5px; right: -5px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--red); color: #fff;
  font-size: 0.66rem; font-weight: 800; line-height: 1;
  box-shadow: 0 0 0 2px var(--bg), 0 4px 10px rgba(239, 77, 100, 0.45);
}
.nb-badge[hidden] { display: none; }

.nb-pop {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 70;
  width: 372px; max-width: calc(100vw - 32px);
  display: flex; flex-direction: column;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--glass-strong);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform-origin: top right;
  animation: nb-in 0.16s var(--ease);
}
@keyframes nb-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to { opacity: 1; transform: none; }
}
.nb:not(.open) .nb-pop { display: none; }

.nb-pop-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  font-weight: 800; font-size: 0.95rem;
}
#nb-mark-all {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--gold); font-size: 0.8rem; font-weight: 700;
}
#nb-mark-all:hover { text-decoration: underline; }
#nb-mark-all:disabled { color: var(--text-faint); cursor: default; text-decoration: none; }

.nb-list { list-style: none; margin: 0; padding: 0; max-height: min(430px, 62vh); overflow-y: auto; }
.nb-list--page { max-height: none; }
.nb-item { border-bottom: 1px solid var(--border); }
.nb-item:last-child { border-bottom: 0; }
.nb-item-inner {
  display: flex; align-items: flex-start; gap: 0.75rem;
  padding: 0.8rem 0.95rem;
  color: var(--text); text-decoration: none;
  transition: background 0.14s ease;
}
.nb-item-inner:hover { background: rgba(255, 255, 255, 0.045); }
.nb-item-inner:focus-visible { outline: 2px solid rgba(245, 197, 24, 0.6); outline-offset: -2px; }
.nb-list--page .nb-item-inner { padding: 1rem 1.1rem; }

.nb-ic {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border);
}
.nb-ic svg { width: 18px; height: 18px; }
.nb-ic-reward svg, .nb-ic-referral svg, .nb-ic-bonus svg { color: var(--gold); }
.nb-ic-withdrawal svg { color: #8ab4ff; }
.nb-ic-ticket svg { color: var(--green-soft); }
.nb-ic-system svg { color: var(--text-soft); }

.nb-text { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 0.1rem; }
.nb-title { font-size: 0.86rem; font-weight: 700; line-height: 1.35; }
.nb-body { font-size: 0.78rem; color: var(--text-soft); line-height: 1.45; overflow-wrap: anywhere; }
.nb-time { font-size: 0.72rem; color: var(--text-muted); }
.nb-time-live { color: var(--text-faint); }

.nb-dot {
  flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%;
  margin-top: 0.5rem; background: var(--gold);
  box-shadow: 0 0 8px rgba(245, 197, 24, 0.7);
  opacity: 0;
}
.nb-item.is-unread .nb-dot { opacity: 1; }
.nb-item.is-read .nb-title { color: var(--text-muted); }
.nb-item.is-read .nb-ic { opacity: 0.55; }

/* New item slide-in */
.nb-item.is-new { animation: nb-item-in 0.3s var(--ease); }
@keyframes nb-item-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.nb-empty { text-align: center; padding: 1.6rem 1rem; color: var(--text-muted); }
.nb-empty svg { width: 34px; height: 34px; margin-bottom: 0.5rem; color: var(--text-faint); }
.nb-empty p { font-weight: 700; color: var(--text-soft); margin-bottom: 0.1rem; }
.nb-empty span { font-size: 0.78rem; }
.nb-empty[hidden] { display: none; }

.nb-foot {
  display: block; text-align: center;
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--border);
  color: var(--gold); font-size: 0.84rem; font-weight: 700; text-decoration: none;
}
.nb-foot:hover { background: rgba(245, 197, 24, 0.06); }
.nb-foot:focus-visible { outline: 2px solid rgba(245, 197, 24, 0.6); outline-offset: -2px; }

/* ---------- Header "More" menu (three dots) + avatar account menu ---------- */
.mm, .av { position: relative; display: inline-flex; }

.mm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: 0 0 auto; padding: 0;
  border: 1px solid var(--border); border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.mm-btn svg { width: 17px; height: 17px; }
.mm-btn:hover { border-color: rgba(245, 197, 24, 0.5); background: rgba(245, 197, 24, 0.08); color: var(--gold); }
.mm-btn:active { transform: scale(0.94); }
.mm-btn:focus-visible, .mm-link:focus-visible, .mm-switch:focus-visible { outline: 2px solid rgba(245, 197, 24, 0.7); outline-offset: 2px; }

.mm-pop, .av-pop {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 71;
  width: 286px; max-width: calc(100vw - 32px);
  display: flex; flex-direction: column; padding: 0.5rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--glass-strong);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-lg);
  transform-origin: top right;
  animation: nb-in 0.16s var(--ease);
}
.mm:not(.open) .mm-pop { display: none; }

.av:not(.open) .av-pop { display: none; }
.av-pop { width: 220px; }
.av-btn { cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; }

.mm-status {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.6rem 0.75rem 0.7rem;
}
.mm-level { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); letter-spacing: 0.02em; }
.mm-bal { display: inline-flex; align-items: baseline; gap: 0.28rem; font-weight: 800; }
.mm-pts { font-size: 1.05rem; color: var(--gold); }
.mm-pts-unit { font-size: 0.7rem; color: var(--text-soft); }

.mm-links { display: flex; flex-direction: column; padding: 0.25rem 0; }
.mm-link {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.55rem 0.7rem; border-radius: 0.65rem;
  color: var(--text-soft); font-size: 0.85rem; font-weight: 700;
  transition: background 0.15s ease, color 0.15s ease;
}
.mm-link svg { width: 17px; height: 17px; flex: 0 0 auto; }
.mm-link:hover { background: rgba(245, 197, 24, 0.08); color: var(--gold); }
.mm-link--btn button {
  display: flex; align-items: center; gap: 0.65rem; width: 100%;
  background: none; border: 0; padding: 0; margin: 0;
  color: inherit; font: inherit; cursor: pointer; text-align: left;
}

.mm-badge {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--red); color: #fff;
  font-size: 0.66rem; font-weight: 800; line-height: 1;
}
.mm-badge[hidden] { display: none; }

.mm-sep { height: 1px; background: var(--border); margin: 0.35rem 0.4rem; }

.mm-push { padding: 0.25rem 0.4rem 0.4rem; }
.mm-push[hidden] { display: none; }
.mm-toggle-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.4rem 0.3rem; }
.mm-toggle-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 0.05rem; }
.mm-toggle-copy b { font-size: 0.82rem; }
.mm-toggle-copy small { font-size: 0.74rem; color: var(--text-muted); line-height: 1.4; }
.mm-push-note { font-size: 0.72rem; color: var(--text-faint); line-height: 1.45; margin: 0; padding: 0 0.3rem 0.2rem; }

.mm-switch {
  position: relative; width: 42px; height: 24px; flex: 0 0 auto; padding: 0;
  border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--bg-card-2);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background 0.16s ease, border-color 0.16s ease;
}
.mm-switch .mm-switch-knob {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 999px; background: var(--text-muted);
  transition: transform 0.16s var(--ease), background 0.16s ease;
}
.mm-switch.is-on { border-color: rgba(245, 197, 24, 0.7); background: rgba(245, 197, 24, 0.18); }
.mm-switch.is-on .mm-switch-knob { transform: translateX(18px); background: var(--gold); }
.mm-switch:disabled { opacity: 0.5; cursor: not-allowed; }

/* Private Live Leads toggle (profile account card) */
.priv-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 1.1rem; padding: 0.85rem 1rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.025);
}
.priv-toggle-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 0.15rem; }
.priv-toggle-copy b { font-size: 0.88rem; color: var(--text); }
.priv-toggle-copy span { font-size: 0.76rem; color: var(--text-muted); line-height: 1.45; }
.priv-switch { position: relative; flex: 0 0 auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.priv-switch input { position: absolute; opacity: 0; pointer-events: none; }
.priv-switch .priv-switch-track {
  position: relative; display: block; width: 42px; height: 24px;
  border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--bg-card-2);
  transition: background 0.16s ease, border-color 0.16s ease;
}
.priv-switch .priv-switch-knob {
  position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 999px; background: var(--text-muted);
  transition: transform 0.16s var(--ease), background 0.16s ease;
}
.priv-switch input:checked + .priv-switch-track {
  border-color: rgba(245, 197, 24, 0.7); background: rgba(245, 197, 24, 0.18);
}
.priv-switch input:checked + .priv-switch-track .priv-switch-knob {
  transform: translateX(18px); background: var(--gold);
}
.priv-switch input:focus-visible + .priv-switch-track { outline: 2px solid rgba(245, 197, 24, 0.7); outline-offset: 2px; }

/* ---------- Push notification preferences (profile) ---------- */
.pref-list { display: grid; gap: 0.5rem; }
.pref-row {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card); cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.pref-row:hover { border-color: rgba(245, 197, 24, 0.45); background: rgba(245, 197, 24, 0.04); }
.pref-row input { accent-color: var(--gold); width: 17px; height: 17px; }
.pref-copy { display: flex; flex-direction: column; gap: 0.05rem; }
.pref-copy b { font-size: 0.86rem; }
.pref-copy span { font-size: 0.74rem; color: var(--text-muted); }

/* ---------- Admin: FCM / push settings banner & server status ---------- */
.fcm-status { display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1rem; border-radius: var(--radius); margin-bottom: 1.1rem; }
.fcm-status.ok { background: var(--green-soft); }
.fcm-status.warn { background: rgba(245, 197, 24, 0.1); }
.fcm-status.bad { background: rgba(239, 77, 100, 0.1); }
.fcm-status svg { width: 20px; height: 20px; flex: 0 0 auto; }
.fcm-status div { display: flex; flex-direction: column; gap: 0.1rem; }
.fcm-status b { font-size: 0.86rem; }
.fcm-status span { font-size: 0.76rem; color: var(--text-muted); }
.fcm-meta { font-size: 0.78rem; color: var(--text-muted); }
.fcm-meta code { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-soft); background: rgba(255, 255, 255, 0.05); padding: 0.1rem 0.35rem; border-radius: 6px; }
.fcm-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.2rem; border-bottom: 1px solid var(--border); }
.fcm-meta-row:last-child { border-bottom: 0; }

/* ---------- Admin: FCM server credentials (redesigned section) ---------- */
.st-fcm-status, .st-fcm-grid, .st-fcm-help { width: 100%; min-width: 0; box-sizing: border-box; }

.st-fcm-status {
  display: flex; align-items: flex-start; gap: .85rem;
  padding: 1rem 1.15rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.02); min-width: 0;
}
.st-fcm-status-ico {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center; background: rgba(255, 255, 255, 0.05);
}
.st-fcm-status-ico svg { width: 20px; height: 20px; }
.st-fcm-status.is-ok .st-fcm-status-ico { color: var(--green); background: var(--green-dim); }
.st-fcm-status.is-off .st-fcm-status-ico { color: var(--red-soft); background: var(--red-dim); }
.st-fcm-status-copy { display: grid; gap: .15rem; min-width: 0; overflow-wrap: anywhere; }
.st-fcm-status-title { font-size: .8rem; font-weight: 700; color: var(--text-muted); }
.st-fcm-status-value { font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; }
.st-fcm-status.is-ok .st-fcm-status-value { color: var(--green); }
.st-fcm-status.is-off .st-fcm-status-value { color: var(--red-soft); }
.st-fcm-status-copy .badge { justify-self: start; margin-top: .3rem; }
.st-fcm-status-note { font-size: .78rem; color: var(--text-muted); line-height: 1.5; margin-top: .15rem; min-width: 0; }

.st-fcm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 1.15rem; align-items: stretch; min-width: 0;
}
.st-fcm-subcard {
  display: flex; flex-direction: column; gap: 1rem; padding: 1.1rem 1.15rem;
  min-width: 0; width: 100%; box-sizing: border-box;
  background: var(--bg-card-2);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.st-fcm-subcard-head { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.st-fcm-subcard-ico {
  width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto;
  display: grid; place-items: center; background: rgba(255, 255, 255, 0.05); color: var(--gold);
}
.st-fcm-subcard-ico .act-svg { width: 16px; height: 16px; }
.st-fcm-subcard-head b { font-size: .92rem; font-weight: 800; }

.st-fcm-meta { margin-top: -.35rem; min-width: 0; }
.st-fcm-meta .fcm-meta-row { align-items: flex-start; flex-wrap: nowrap; }
.st-fcm-meta .fcm-meta-row > span:first-child { flex: 0 0 auto; white-space: nowrap; }
.st-fcm-meta .fcm-meta-row code {
  flex: 1 1 auto; min-width: 0; max-width: 100%;
  overflow-wrap: anywhere; word-break: break-word; text-align: right;
}

.st-fcm-lock {
  display: flex; align-items: flex-start; gap: .5rem; margin: auto 0 0;
  font-size: .76rem; color: var(--text-muted); line-height: 1.5; min-width: 0;
}
.st-fcm-lock svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: .1rem; color: var(--text-faint); }

.st-fcm-manage form:first-of-type {
  display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; margin: 0;
  width: 100%; min-width: 0; box-sizing: border-box;
}
.st-fcm-manage .st-file-btn { align-self: flex-start; }
.st-fcm-upload-btn { margin-top: .6rem; }

.st-fcm-ok {
  display: flex; align-items: flex-start; gap: .5rem; width: 100%; min-width: 0; box-sizing: border-box;
  padding: .6rem .75rem; border-radius: var(--radius-sm);
  border: 1px solid rgba(38, 208, 124, 0.22); background: var(--green-soft);
  font-size: .8rem; color: var(--green); line-height: 1.45;
}
.st-fcm-ok svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: .1rem; }

.st-fcm-note { margin: 0; font-size: .76rem; color: var(--text-muted); line-height: 1.5; min-width: 0; }
.st-fcm-note code {
  font-family: var(--font-mono); font-size: .72rem; color: var(--text-soft);
  background: rgba(255, 255, 255, 0.05); padding: .1rem .35rem; border-radius: 6px;
  overflow-wrap: anywhere;
}

.st-fcm-actions {
  display: flex; flex-wrap: wrap; gap: .6rem;
  padding-top: 1rem; border-top: 1px dashed var(--border);
}
.st-fcm-action { margin: 0; min-width: 0; }
.st-btn-danger { color: var(--red-soft); border-color: rgba(239, 77, 100, 0.4); }
.st-btn-danger:hover { background: rgba(239, 77, 100, 0.08); }

.st-fcm-help {
  width: 100%; min-width: 0; box-sizing: border-box;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.02);
}
.st-fcm-help summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: .5rem;
  padding: .8rem 1rem; font-size: .82rem; font-weight: 700; color: var(--text-soft); min-width: 0;
}
.st-fcm-help summary::-webkit-details-marker { display: none; }
.st-fcm-help summary:hover { color: var(--text); }
.st-fcm-help summary .act-svg { width: 16px; height: 16px; color: var(--gold); flex: 0 0 auto; }
.st-fcm-help[open] summary { border-bottom: 1px dashed var(--border); }
.st-fcm-steps {
  margin: .9rem 1rem 1rem; padding: 0; list-style: none;
  counter-reset: fcm; display: grid; gap: .5rem;
}
.st-fcm-steps li {
  counter-increment: fcm; list-style: none;
  display: grid; grid-template-columns: 20px minmax(0, 1fr);
  align-items: flex-start; gap: .6rem;
  font-size: .82rem; color: var(--text-soft); line-height: 1.5;
}
.st-fcm-steps li::before {
  content: counter(fcm); width: 20px; height: 20px; border-radius: 50%;
  background: rgba(245, 197, 24, 0.12); color: var(--gold);
  font-size: .7rem; font-weight: 800; display: grid; place-items: center; justify-self: start;
}
.st-fcm-steps b { color: var(--text); font-weight: 700; }

/* ==========================================================================
   Live Leads Bar
   Compact ribbon rendered IN FLOW at the top of the main content column
   (to the right of the sidebar), never overlapping it or the header. Its
   height is fixed (--ll-h) so page content never shifts when leads change.
   On guest pages (no sidebar) it is a full-width ribbon under the navbar.
   ========================================================================== */
.live-leads-bar {
  height: var(--ll-h);
  margin-bottom: var(--ll-gap);
  display: flex;
  align-items: center;
  background:
    linear-gradient(180deg, rgba(17, 19, 25, 0.97) 0%, rgba(12, 14, 18, 0.97) 100%),
    var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.live-leads-bar[hidden] {
  display: none !important;
}

/* Guest (public) ribbon: full-bleed strip directly under the navbar and flush
   with the landing hero below, so the hero banner starts exactly under the
   live ticker with no empty gap. App shell keeps its card style + gap. */
body:not(.app-shell) > .live-leads-bar {
  margin-bottom: 0;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
}

.live-lock {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.16rem 0.55rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.live-lock svg { flex: 0 0 auto; }

/* Full-bleed inside the ribbon: it spans the whole content column (from the
   sidebar's edge to the end of the page), so its inner row must not be capped
   by the global .container max-width. */
.live-leads-bar > .container {
  max-width: none;
  width: 100%;
}

.live-leads-inner {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  height: var(--ll-h);
  min-width: 0;
}

.live-leads-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.18rem 0.55rem;
  border-radius: var(--radius-full);
  background: var(--green-dim);
  color: var(--green);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

.live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px rgba(38, 208, 124, 0.6);
  animation: live-pulse 1.6s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.82); }
}

.live-count {
  font-size: 0.66rem;
  color: var(--text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.live-leads-track {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 0.3rem 0;
  overflow: hidden;
}

/* Seamless marquee, pure CSS. The strip is LEFT-anchored and repeats the lead
   list in identical copies; the keyframes shift it by exactly one half (one
   whole set of copies), so the loop wraps with no gap or jump.

   NOTE: placing this strip in an rtl/direction:rtl container (or anchoring it
   to the right) makes it overflow to the LEFT, so as it scrolls every frame
   leaves an empty band at the track's right edge and the whole strip eventually
   empties out. Left-anchoring is what keeps the loop seamless, so the RTL
   reading order is instead produced per copy by row-reverse (newest chip sits
   at the copy's right edge). */
.ll-ticker {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  width: max-content;
  will-change: transform;
  animation: ticker-scroll 30s linear infinite;
}

/* Pause the marquee while the user aims at a chip, so clicking a moving
   target is not a gamble. Pausing the animation does not rebuild the DOM,
   so the click handler stays attached. */
.live-leads-track:hover .ll-ticker {
  animation-play-state: paused;
}

/* One identical set of chips. row-reverse lays the first (newest) chip at the
   RIGHT edge and the oldest on the left, so the stream reads right-to-left.
   All spacing lives INSIDE the copy (chip gap + a leading pad that doubles as
   the gap to the previous copy) so every copy is exactly the same width and
   the strip is strictly periodic — a prerequisite for a jump-free -50% loop. */
.ll-copy {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  flex-shrink: 0;
  gap: 0.5rem;
  padding-left: 0.5rem;
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.ll-measure {
  position: fixed;
  left: -9999px;
  top: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: -1;
  animation: none;
}

.ll-empty {
  color: var(--text-muted);
  font-size: 0.72rem;
  padding: 0 0.25rem;
  white-space: nowrap;
}

.ll-item {
  flex: 0 0 auto;
  height: 26px;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0 0.7rem 0 0.3rem;
  border-radius: 8px;
  background: var(--bg-card-2);
  border: 1px solid var(--border);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
  cursor: default;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.ll-item.ll-clickable {
  cursor: pointer;
}

.ll-item.ll-clickable:hover {
  border-color: rgba(245, 197, 24, 0.45);
  background: linear-gradient(135deg, rgba(245, 197, 24, 0.08), rgba(245, 197, 24, 0.02));
}

.ll-item.ll-clickable:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.ll-item.ll-new {
  animation: ll-in 0.5s var(--ease);
}

@keyframes ll-in {
  0% { opacity: 0; transform: translateX(6px); box-shadow: inset 0 0 0 1px rgba(245, 197, 24, 0.55), 0 0 12px rgba(245, 197, 24, 0.16); }
  60% { opacity: 1; transform: none; box-shadow: inset 0 0 0 1px rgba(245, 197, 24, 0.32); }
  100% { box-shadow: none; }
}

.ll-avatar {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--bg-input);
  border: 1px solid rgba(245, 197, 24, 0.25);
  display: grid;
  place-items: center;
}

.ll-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ll-avatar-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.62rem;
  color: var(--gold);
  background: linear-gradient(135deg, rgba(245, 197, 24, 0.16), rgba(245, 197, 24, 0.05));
}

/* Palette token: the member's picked avatar. The gradient and white silhouette
   come from the shared avatar--N modifier, exactly as on the profile page. */
.ll-avatar-token,
.ll-detail-avatar .ll-avatar-token {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.ll-avatar-token svg { width: 64%; height: 64%; }
.ll-detail-avatar .ll-avatar-token svg { width: 56%; height: 56%; }

.ll-info {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.ll-username {
  font-weight: 700;
  font-size: 0.72rem;
  min-width: 0;
  max-width: 130px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ll-amount {
  flex: 0 0 auto;
  font-weight: 800;
  font-size: 0.7rem;
  font-family: var(--font-mono);
  color: var(--gold);
  white-space: nowrap;
}

.ll-chev {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  color: var(--gold);
  opacity: 0.45;
  transition: opacity 0.18s ease, transform 0.18s var(--ease);
}

.ll-item.ll-clickable:hover .ll-chev {
  opacity: 1;
  transform: translateX(1px);
}

/* Detail modal */
.live-lead-detail {
  padding: 1.3rem 1.5rem 1.5rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.live-lead-modal {
  width: min(560px, 100%);
  max-height: min(84vh, 720px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.live-lead-modal .card-header {
  flex: 0 0 auto;
  margin: 0;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

@media (max-width: 480px) {
  .live-lead-modal { max-height: 90vh; }
  .live-lead-modal .card-header { padding: 0.85rem 1.1rem; }
  .live-lead-detail { padding: 1.1rem 1.1rem 1.2rem; }
}

.ll-detail-hero {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.1rem;
  margin-bottom: 1.15rem;
  border-bottom: 1px solid var(--border);
}

.ll-detail-avatar {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background: var(--bg-input);
  border: 1px solid rgba(245, 197, 24, 0.3);
  display: grid;
  place-items: center;
}

.ll-detail-avatar img { width: 100%; height: 100%; object-fit: cover; }

.ll-detail-username {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0 0 0.4rem;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ll-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.live-badge {
  background: var(--green-dim) !important;
  color: var(--green) !important;
  animation: live-pulse 1.6s ease-in-out infinite;
}

/* Prominent points figure */
.ll-detail-points {
  margin-left: auto;
  text-align: right;
  flex-shrink: 0;
}

.ll-detail-points .ll-px-value {
  font-family: var(--font-mono);
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1.1;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}

.ll-detail-points .ll-px-sub {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* Source card (offer / partner / activity) */
.ll-det-card {
  border: 1px solid var(--border);
  background: linear-gradient(150deg, var(--bg-card-2), var(--bg-card));
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 1.15rem;
}

.ll-det-card-muted {
  opacity: 0.85;
}

.ll-lock { flex: 0 0 auto; color: var(--text-faint); }
.ll-private-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.ll-private-note-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
}
.ll-private-note { opacity: 0.9; }

.ll-det-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
}

.ll-det-logo {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-input);
  display: grid;
  place-items: center;
}

.ll-det-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ll-det-logo-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1rem;
  color: var(--gold);
  background: linear-gradient(135deg, rgba(245, 197, 24, 0.16), rgba(245, 197, 24, 0.04));
}

.ll-det-card-copy {
  min-width: 0;
  flex: 1;
}

.ll-det-offer-title {
  font-size: 0.98rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.35;
}

.ll-det-offer-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

.ll-det-partner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--text-soft);
  margin-top: 0.35rem;
}

.ll-det-partner b { color: var(--text); font-weight: 700; }

.ll-det-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.ll-det-card-foot {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding-top: 0.7rem;
  font-size: 0.8rem;
}

.ll-det-card-foot .ll-px-reward {
  font-family: var(--font-mono);
  font-weight: 800;
  color: var(--gold);
}

.ll-detail-section {
  margin-bottom: 1.2rem;
}

.ll-detail-section:last-of-type {
  margin-bottom: 0.5rem;
}

.ll-detail-section-title {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.7rem;
}

.ll-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.85rem;
}

.ll-detail-grid > div {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.ll-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.ll-detail-grid b {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  overflow-wrap: anywhere;
}

.ll-detail-grid code {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-soft);
  background: var(--bg-input);
  padding: 0.2rem 0.4rem;
  border-radius: 6px;
  overflow-wrap: anywhere;
  width: fit-content;
}

.ll-description {
  font-size: 0.85rem;
  color: var(--text-soft);
  line-height: 1.6;
  margin: 0;
  padding: 0.75rem;
  background: var(--bg-input);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.ll-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  margin-top: 0.5rem;
}

.ll-detail-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Responsive */
@media (max-width: 900px) {
  .live-leads-inner { gap: 0.6rem; }
  .ll-copy { gap: 0.45rem; padding-left: 0.45rem; }
}

@media (max-width: 640px) {
  .live-leads-inner { gap: 0.5rem; }
  .ll-copy { gap: 0.4rem; padding-left: 0.4rem; }
  .ll-item { padding-right: 0.55rem; }
  .ll-username { max-width: 90px; }
  .ll-detail-points .ll-px-value { font-size: 1.2rem; }
  .ll-detail-avatar { flex-basis: 52px; width: 52px; height: 52px; }
}

@media (max-width: 480px) {
  .ll-chev { display: none; }
  .live-count { display: none; }
}

/* Mobile Live Leads: single-line ticker — avatar, username and points only.
   Secondary info (chevron, counter) is dropped so the newest lead gets
   maximum room to enter from the right edge. */
@media (max-width: 768px) {
  .live-leads-inner { gap: 0.45rem; }
  .ll-copy { gap: 0.4rem; padding-left: 0.4rem; }
  .ll-item { padding: 0 0.55rem 0 0.3rem; border-radius: 7px; }
  .ll-chev, .live-count { display: none; }
  .ll-username { max-width: 84px; }
}

@media (max-width: 560px) {
  .ll-username { max-width: 60px; }
}

/* ==========================================================================
   Desktop (>= 1024px): the sticky navbar keeps the brand/logo on top and the
   Live Leads bar sticks directly beneath it, so the logo row + live ticker
   stay visible together while the page scrolls. On smaller screens the bar
   keeps its in-flow behaviour below the navbar.
   ========================================================================== */
@media (min-width: 1024px) {
  .live-leads-bar {
    position: sticky;
    top: var(--nav-h);
    z-index: 55;
  }
  .content > .live-leads-bar {
    margin-top: -1.6rem;
    margin-bottom: var(--ll-gap);
  }
}

/* ==========================================================================
   PROFILE - Account center (premium gold)
   ========================================================================== */
.pp-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  width: 100%;
}

/* ----- Identity hero ----- */
.pp-hero-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(620px 280px at 6% -30%, rgba(245, 197, 24, 0.16), transparent 60%),
    radial-gradient(480px 220px at 104% 140%, rgba(245, 197, 24, 0.1), transparent 60%),
    linear-gradient(160deg, #1b170a, var(--bg-card) 60%);
  border: 1px solid rgba(245, 197, 24, 0.28);
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.5), 0 0 26px rgba(245, 197, 24, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: 1.6rem 1.5rem;
}
.pp-hero-card::before {
  content: "";
  position: absolute;
  top: -150px;
  right: -70px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 197, 24, 0.13), transparent 70%);
  pointer-events: none;
}
.pp-hero-glow { position: absolute; inset: 0; pointer-events: none; }
.pp-hero-body {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.3rem;
  flex-wrap: wrap;
}
.pp-avatar-wrap { position: relative; flex: 0 0 auto; }
.pp-avatar-ring {
  padding: 5px;
  border-radius: 999px;
  line-height: 0;
  background: var(--gold-grad);
  box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.18), var(--glow-gold);
}
.pp-avatar-ring .avatar {
  border: 3px solid #10131a;
  font-size: 1.6rem;
  width: 72px;
  height: 72px;
}
.pp-status-dot {
  position: absolute;
  right: 6px;
  bottom: 8px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 3px solid #10131a;
  background: var(--text-muted);
  box-sizing: content-box;
}
.pp-status-dot.status-ok { background: var(--green); box-shadow: 0 0 12px var(--green); }
.pp-status-dot.status-bad { background: var(--red); box-shadow: 0 0 12px var(--red); }

.pp-identity { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; flex: 1 1 320px; }
.pp-title-row { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; }
.pp-display-name { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.025em; margin: 0; line-height: 1.15; }
.pp-verified {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  color: var(--green);
  border: 1px solid rgba(38, 208, 124, 0.35);
  background: rgba(38, 208, 124, 0.1);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.pp-handle { color: var(--gold-deep); font-weight: 700; font-size: 0.92rem; letter-spacing: 0.02em; }
.pp-meta { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; color: var(--text-muted); font-size: 0.83rem; }
.pp-meta svg { color: var(--text-faint); }
.pp-meta-sep { color: rgba(255, 255, 255, 0.2); }

.pp-chips { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.pp-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.38rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.045);
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--text-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.pp-chip .pcountry-flag { width: 25px; height: 25px; border-radius: 8px; font-size: 0.62rem; }
.pp-chip--muted { color: var(--text-muted); }
.pp-chip--level {
  color: var(--gold);
  border-color: rgba(245, 197, 24, 0.4);
  background: linear-gradient(120deg, rgba(245, 197, 24, 0.16), rgba(245, 197, 24, 0.05));
}
.pp-chip--level svg { color: var(--gold); }

.pp-id { margin-top: 0.9rem; max-width: 460px; }
.pp-id-head { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.35rem; }
.pp-id-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--text-soft);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pp-id-label svg { color: var(--text-faint); }
.pp-id-note { color: var(--text-faint); font-size: 0.74rem; }
.pp-id-copy { flex-wrap: nowrap; }
.pp-id-copy .copy-input { font-size: 0.78rem; letter-spacing: 0.01em; }

.pp-hero-actions {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}
.pp-hero-actions .btn { white-space: nowrap; }

/* ----- Wallet panel (shared) ----- */
.pp-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-strong);
}
.pp-panel::before { content: none; }

/* ----- Finance card: balance hero + colored metrics ----- */
.pp-finance { border-color: rgba(245, 197, 24, 0.2); }
.pp-finance::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -60px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 197, 24, 0.1), transparent 70%);
  pointer-events: none;
}
.pp-bal-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 -1.4rem;
  padding: 1.35rem 1.5rem;
  background:
    radial-gradient(520px 240px at 8% 0%, rgba(245, 197, 24, 0.16), transparent 62%),
    radial-gradient(380px 180px at 100% 120%, rgba(245, 197, 24, 0.12), transparent 60%),
    linear-gradient(115deg, rgba(245, 197, 24, 0.12), rgba(245, 197, 24, 0.025) 55%, transparent);
  border-top: 1px solid rgba(245, 197, 24, 0.18);
  border-bottom: 1px solid rgba(245, 197, 24, 0.18);
}
.pp-bal-hero::before {
  content: "";
  position: absolute;
  top: -80px;
  left: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 197, 24, 0.14), transparent 70%);
  pointer-events: none;
}
.pp-bal-info { position: relative; display: flex; flex-direction: column; gap: 0.2rem; }
.pp-bal-label { font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--gold-soft); }
.pp-bal-amount { font-size: 2.3rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
.pp-bal-meta { font-size: 0.8rem; color: var(--text-muted); }
.pp-bal-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(360px 160px at 92% 50%, rgba(245, 197, 24, 0.1), transparent 65%);
}
.pp-metrics {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
  padding: 1.1rem 0 0.3rem;
}
.pp-metric {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.85rem 0.95rem;
  border-radius: 14px;
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.03);
  min-width: 0;
  transition: transform 0.25s var(--ease), border-color 0.25s, box-shadow 0.25s;
}
.pp-metric:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md, 0 10px 30px rgba(0, 0, 0, 0.35));
}
.pp-metric-ico {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  border: 1px solid;
}
.pp-metric-body { min-width: 0; display: flex; flex-direction: column; gap: 0.12rem; }
.pp-m-label { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pp-m-val { font-size: 1.18rem; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; }
.pp-m-sub { font-size: 0.7rem; color: var(--text-faint); line-height: 1.35; }
.pp-metric--gold .pp-metric-ico { color: var(--gold); background: rgba(245, 197, 24, 0.12); border-color: rgba(245, 197, 24, 0.3); }
.pp-metric--gold .pp-m-val { color: var(--gold); }
.pp-metric--gold:hover { border-color: rgba(245, 197, 24, 0.4); }
.pp-metric--green .pp-metric-ico { color: var(--green); background: rgba(38, 208, 124, 0.12); border-color: rgba(38, 208, 124, 0.3); }
.pp-metric--green .pp-m-val { color: var(--green); }
.pp-metric--green:hover { border-color: rgba(38, 208, 124, 0.4); }
.pp-metric--violet .pp-metric-ico { color: var(--blue); background: rgba(96, 165, 250, 0.12); border-color: rgba(96, 165, 250, 0.3); }
.pp-metric--violet .pp-m-val { color: var(--blue); }
.pp-metric--violet:hover { border-color: rgba(96, 165, 250, 0.42); }
.pp-metric--rose .pp-metric-ico { color: var(--rose, #fb7185); background: rgba(244, 63, 94, 0.12); border-color: rgba(244, 63, 94, 0.3); }
.pp-metric--rose .pp-m-val { color: var(--rose, #fb7185); }
.pp-metric--rose:hover { border-color: rgba(244, 63, 94, 0.4); }

.pp-tx { padding-top: 0.2rem; }
.pp-tx-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.86rem; font-weight: 700; color: var(--text-soft); margin-bottom: 0.35rem; }
.pp-tx-list { gap: 0.1rem; }
.pp-tx-list .list-row { padding: 0.6rem 0.15rem; }
.pp-tx-info { flex: 1 1 auto; min-width: 0; }

/* ----- Bento grid ----- */
.pp-bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  align-items: start;
}
.pp-bento-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  background: linear-gradient(165deg, rgba(245, 197, 24, 0.06), var(--bg-card) 55%);
  border: 1px solid rgba(245, 197, 24, 0.16);
  transition: transform 0.25s var(--ease), border-color 0.25s, box-shadow 0.25s;
}
.pp-bento-card::before {
  content: "";
  position: absolute;
  top: -110px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 197, 24, 0.1), transparent 70%);
  pointer-events: none;
}
.pp-bento-card:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 197, 24, 0.4);
  box-shadow: var(--shadow-lg);
}
.pp-bento-card .card-header { position: relative; margin-bottom: 0.85rem; }
.pp-bento-body { position: relative; display: flex; flex-direction: column; gap: 0.9rem; }
.pp-bento-card .lvl { padding: 0.1rem 0 0; }
.pp-ref-hint { font-size: 0.8rem; color: var(--text-muted); line-height: 1.55; margin: 0; }
.pp-ref-copy { margin-top: 0.75rem; }
.pp-mini { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.pp-mini .mini-stat { padding: 0.65rem 0.4rem; border-radius: 12px; border-color: rgba(245, 197, 24, 0.14); background: rgba(245, 197, 24, 0.04); }
.pp-mini .mini-stat .v { font-size: 1.1rem; }
.pp-mini .mini-stat .l { font-size: 0.62rem; letter-spacing: 0.05em; }
.pp-bento-card--wide { grid-column: 1 / -1; }

/* ----- Merged Level + Referrals inside hero ----- */
.pp-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}
.pp-hero-side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.05rem 1.15rem;
  border-radius: 16px;
  border: 1px solid rgba(245, 197, 24, 0.28);
  background:
    radial-gradient(340px 200px at 110% -20%, rgba(245, 197, 24, 0.13), transparent 60%),
    radial-gradient(280px 160px at -20% 130%, rgba(245, 197, 24, 0.06), transparent 60%),
    rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  min-width: 0;
}
.pp-side-lvl, .pp-side-ref { display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; }
.pp-side-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.pp-side-kicker { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.pp-side-level {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pp-side-sub { font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; max-width: 42ch; }
.pp-side-sep {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, rgba(245, 197, 24, 0.28) 30%, rgba(245, 197, 24, 0.28) 70%, transparent);
}
.pp-hero-side .pp-ref-copy { margin-top: 0; }
.pp-hero-side .lvl { padding: 0.2rem 0 0; }
.pp-hero-side .pp-mini { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }

/* ----- Notifications card ----- */
.pp-notif-card { overflow: hidden; }
.pp-notif-form { position: relative; padding: 0 0 1.3rem; }
.pp-optin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  background: linear-gradient(120deg, rgba(245, 197, 24, 0.1), rgba(245, 197, 24, 0.03));
  border: 1px solid rgba(245, 197, 24, 0.28);
}
.pp-optin:hover { border-color: rgba(245, 197, 24, 0.5); background: rgba(245, 197, 24, 0.12); }
.pp-optin-info { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
.pp-optin-info b { font-size: 0.92rem; color: #fff; }
.pp-optin-info span { font-size: 0.78rem; color: var(--text-muted); }
.pp-form-actions { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-top: 0.95rem; }
.pp-prefs { margin-top: 1rem; }
.pp-prefs-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 0.5rem; }
.pp-notif-close {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted);
  cursor: pointer;
  flex: 0 0 auto;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease), background 0.15s var(--ease);
}
.pp-notif-close:hover { border-color: rgba(239, 77, 100, 0.4); color: var(--red-soft); background: rgba(239, 77, 100, 0.08); }
.pp-restore {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  align-self: flex-start;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  border: 1px dashed var(--border-strong);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-muted);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}
.pp-restore:hover { color: var(--violet); border-color: rgba(245, 197, 24, 0.4); }
.pp-restore[hidden] { display: none; }

/* ----- Settings / security (shared with profile sub-pages) ----- */
.settings-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; margin-top: 1.1rem; }
.settings-grid .card, .sec-grid .card {
  background: linear-gradient(165deg, rgba(245, 197, 24, 0.04), var(--bg-card) 55%);
  border: 1px solid rgba(245, 197, 24, 0.13);
}
.settings-card--renewed { position: relative; overflow: hidden; }
.settings-card--renewed::before {
  content: "";
  position: absolute;
  top: -90px;
  right: -60px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 197, 24, 0.09), transparent 70%);
  pointer-events: none;
}
.settings-card--renewed .card-header { position: relative; }
.settings-card .acc-edit-grid { padding: 0.35rem 0 0; position: relative; }
.acc-edit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1.4rem; }
.acc-edit-summary { min-width: 0; }
.acc-summary-title { font-size: 0.95rem; font-weight: 800; margin: 0 0 0.7rem; }
.acc-rows { display: flex; flex-direction: column; }
.acc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.86rem;
}
.acc-row:last-child { border-bottom: 0; }
.acc-row span { color: var(--text-muted); flex: 0 0 auto; }
.acc-row b { font-weight: 700; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.acc-edit-form { min-width: 0; }
.acc-edit-form .form { margin-top: 0; }
.prof-details-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
.field--location { grid-column: 1 / -1; }
.location-box {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.85rem 0.95rem;
  border-radius: 12px;
  border: 1px solid rgba(245, 197, 24, 0.28);
  background: linear-gradient(135deg, rgba(245, 197, 24, 0.09), rgba(245, 197, 24, 0.02));
  position: relative;
}
.location-box.is-mismatch {
  border-color: rgba(251, 113, 133, 0.42);
  background: linear-gradient(135deg, rgba(251, 113, 133, 0.14), rgba(245, 197, 24, 0.05));
}
.loc-main { display: flex; align-items: center; gap: 0.8rem; }
.loc-flag { flex: 0 0 auto; line-height: 0; }
.loc-copy { min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.loc-copy b { font-size: 0.92rem; font-weight: 800; }
.loc-copy span { font-size: 0.72rem; color: var(--text-muted); }
.loc-foot {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  color: var(--text-faint);
  border-top: 1px dashed rgba(245, 197, 24, 0.2);
  padding-top: 0.5rem;
}
.loc-alert {
  padding: 0.6rem 0.75rem;
  border-radius: 9px;
  background: rgba(251, 113, 133, 0.12);
  border: 1px solid rgba(251, 113, 133, 0.28);
  font-size: 0.78rem;
  color: #fecdd3;
  line-height: 1.45;
}
.loc-hint { font-size: 0.72rem; color: var(--text-faint); line-height: 1.45; }
.loc-mismatch-note {
  margin-top: 0.9rem;
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 0.78rem;
  line-height: 1.45;
}
.acc-row.loc-row.is-mismatch b { color: #fecdd3; }
.acc-row.loc-detected { padding-bottom: 0.15rem; }
.acc-row.loc-meta { border-bottom: 0; padding-top: 0; padding-bottom: 0.35rem; }
.pform-hint { font-size: 0.85rem; color: var(--text-muted); line-height: 1.55; margin: 0 0 1rem; }
.pform-actions { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.2rem; }
.sec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; margin-top: 1.1rem; }
.pp-form-pad { padding: 0.35rem 0 0.4rem; }
.pp-activity-body { flex: 1 1 auto; min-width: 0; }

/* ----- Responsive ----- */
@media (max-width: 1080px) {
  .pp-bento { grid-template-columns: 1fr; }
  .pp-bento-card--wide { grid-column: auto; }
}
@media (max-width: 900px) {
  .acc-edit-grid { grid-template-columns: 1fr; }
  .acc-edit-summary { padding-bottom: 0.4rem; }
  .sec-grid { grid-template-columns: 1fr; }
  .pp-hero-inner { grid-template-columns: 1fr; }
  .pp-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pp-hero-card { padding: 1.3rem 1.2rem; }
  .pp-hero-body { gap: 1rem; }
  .pp-display-name { font-size: 1.35rem; }
  .pp-avatar-ring .avatar { width: 64px; height: 64px; font-size: 1.4rem; }
  .pp-bal-hero { margin: 0 -1.2rem; padding: 1.1rem 1.3rem; }
  .pp-metrics { grid-template-columns: 1fr 1fr; gap: 0.65rem; }
  .prof-details-form { grid-template-columns: 1fr; }
  .pp-notif-form { padding: 0 0 1.2rem; }
}
@media (max-width: 400px) {
  .pp-metrics { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .pp-meta span:not(:first-child) { display: none; }
  .pp-hero-actions .btn { flex: 1 1 auto; }
}

/* ---------- Dashboard Redesign: Full-Width Future Offers & Recent Activity ---------- */
/* ---------- Dashboard Redesign: Full-Width Future Offers & Recent Activity ---------- */
.future-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(245, 197, 24, 0.08) 0%, rgba(17, 19, 25, 0.95) 45%, rgba(12, 14, 18, 0.98) 100%);
  border: 1px solid rgba(245, 197, 24, 0.28);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 24px rgba(245, 197, 24, 0.08);
  padding: 1.35rem 1.6rem;
  margin-bottom: 1.4rem;
}

.future-banner-glow {
  position: absolute;
  top: -60px;
  right: -40px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 197, 24, 0.18), transparent 70%);
  pointer-events: none;
}

.future-banner-inner {
  position: relative;
  z-index: 1;
}

.future-banner-main {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}

.future-banner-icon-wrap {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(245, 197, 24, 0.22), rgba(245, 197, 24, 0.06));
  border: 1px solid rgba(245, 197, 24, 0.4);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(245, 197, 24, 0.2);
}

.future-icon-glow {
  position: absolute;
  inset: -4px;
  border-radius: 20px;
  background: radial-gradient(circle, rgba(245, 197, 24, 0.3), transparent 70%);
  pointer-events: none;
}

.future-banner-copy {
  flex: 1;
  min-width: 0;
}

.future-banner-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}

.future-banner-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
  margin: 0;
}

.future-banner-desc {
  font-size: 0.88rem;
  color: var(--text-soft);
  line-height: 1.5;
  margin: 0 0 0.85rem;
  max-width: 50rem;
}

.future-tags {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.future-tag {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-soft);
}

/* ---------- Daily & Activity Header Icons & List ---------- */
.daily-head-ico, .act-head-ico {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.daily-head-ico {
  background: rgba(245, 197, 24, 0.12);
  color: var(--gold);
  border: 1px solid rgba(245, 197, 24, 0.3);
}
.act-head-ico {
  background: rgba(96, 165, 250, 0.12);
  color: var(--blue);
  border: 1px solid rgba(96, 165, 250, 0.3);
}

.dash-activity-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  border-radius: 18px;
  min-height: 420px;
  background: linear-gradient(165deg, rgba(255,255,255,0.018), var(--bg-card));
  border: 1px solid rgba(255,255,255,0.07);
}
.dash-activity-card .card-header { flex: 0 0 auto; padding: 1rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
.dash-activity-card .act-head-ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: rgba(245,197,24,0.1); border: 1px solid rgba(245,197,24,0.18); color: var(--gold); }

.dash-tx-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.4rem 0.6rem 0.6rem 0.2rem;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 380px;
  overflow-y: auto;
  overscroll-behavior: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(245,197,24,0.22) transparent;
}
.dash-tx-list::-webkit-scrollbar { width: 6px; }
.dash-tx-list::-webkit-scrollbar-thumb { background: rgba(245,197,24,0.18); border-radius: 999px; border: 1px solid rgba(0,0,0,0.2); }
.dash-tx-list::-webkit-scrollbar-thumb:hover { background: rgba(245,197,24,0.32); }
.dash-tx-list::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 999px; }

.dash-tx-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 0.85rem 0.7rem 0.9rem;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,255,255,0.028), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: all 0.18s var(--ease);
  min-width: 0;
  overflow: hidden;
  position: relative;
}
.dash-tx-item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 12px 0 0 12px; opacity: 0.95;
}
.dash-tx-item:has(.dash-tx-in)::before { background: var(--green); }
.dash-tx-item:has(.dash-tx-out)::before { background: var(--red); }
.dash-tx-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(245,197,24,0.14);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.16);
}

.dash-tx-ico {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dash-tx-in {
  background: rgba(38, 208, 124, 0.12);
  color: #26d07c;
  border: 1px solid rgba(38, 208, 124, 0.3);
}
.dash-tx-out {
  background: rgba(239, 77, 100, 0.12);
  color: #ef4d64;
  border: 1px solid rgba(239, 77, 100, 0.3);
}

.dash-tx-body {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.dash-tx-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  line-height: 1.35;
}
.dash-tx-time {
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-tx-val {
  font-size: 0.92rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex: 0 0 auto;
}
@media (max-width: 640px) {
  .dash-tx-item { padding: 0.6rem 0.7rem; gap: 0.6rem; }
  .dash-tx-ico { width: 32px; height: 32px; border-radius: 9px; }
  .dash-tx-title { font-size: 0.84rem; }
  .dash-tx-val { font-size: 0.88rem; }
  .dash-tx-list { max-height: 300px; }
}

/* Media Query for Future Banner Responsiveness */
@media (max-width: 640px) {
  .future-banner {
    padding: 1.15rem 1.1rem;
  }
  .future-banner-main {
    flex-direction: column;
    gap: 0.9rem;
  }
  .future-banner-icon-wrap {
    width: 46px;
    height: 46px;
  }
}

/* ---------- Referral Page Enhancements ---------- */
.ref-hero-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(245, 197, 24, 0.08) 0%, rgba(17, 19, 25, 0.96) 50%, rgba(12, 14, 18, 0.98) 100%);
  border: 1px solid rgba(245, 197, 24, 0.28);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.4rem;
}

.ref-social-shares {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--border);
}

.ref-social-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-soft);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
  transition: all 0.18s var(--ease);
}
.ref-social-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(245, 197, 24, 0.4);
  color: var(--gold);
  transform: translateY(-1px);
}

.ref-social-btn--wa:hover { border-color: rgba(38, 208, 124, 0.5); color: #26d07c; }
.ref-social-btn--tg:hover { border-color: rgba(96, 165, 250, 0.5); color: #60a5fa; }
.ref-social-btn--tw:hover { border-color: rgba(255, 255, 255, 0.4); color: #fff; }

/* ---------- Support Center Redesign ---------- */
.support-main-grid {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 1.4rem;
  align-items: start;
}

.support-form-card, .support-tickets-card {
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.support-ticket-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.4rem 0.2rem;
}

.support-ticket-item {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  text-decoration: none;
  color: inherit;
  transition: all 0.18s var(--ease);
}
.support-ticket-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(245, 197, 24, 0.3);
  transform: translateX(3px);
}

.support-ticket-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(96, 165, 250, 0.12);
  color: var(--blue);
  border: 1px solid rgba(96, 165, 250, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.support-ticket-info {
  flex: 1;
  min-width: 0;
}

.support-ticket-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.support-ticket-meta {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* Chat thread messaging bubbles */
.chat-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.1rem;
}

.chat-bubble {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1rem 1.15rem;
  border-radius: 16px;
  max-width: 90%;
  animation: chatFade 0.25s var(--ease);
}

@keyframes chatFade {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.chat-bubble--user {
  align-self: flex-end;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom-right-radius: 4px;
}

.chat-bubble--staff {
  align-self: flex-start;
  background: linear-gradient(135deg, rgba(245, 197, 24, 0.08) 0%, rgba(20, 24, 34, 0.95) 100%);
  border: 1px solid rgba(245, 197, 24, 0.35);
  border-bottom-left-radius: 4px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.chat-bubble-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.78rem;
}

.chat-bubble-author {
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.chat-bubble--staff .chat-bubble-author {
  color: var(--gold);
}

.chat-bubble--user .chat-bubble-author {
  color: var(--text-soft);
}

.chat-bubble-time {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.chat-bubble-content {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Responsive Support & Referral Media Queries */
@media (max-width: 900px) {
  .support-main-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .chat-bubble {
    max-width: 100%;
  }
  .ref-social-shares {
    justify-content: center;
  }
  .ref-social-btn {
    flex: 1 1 calc(50% - 0.5rem);
    justify-content: center;
  }
}

/* ---------- Future Offers (member views) ---------- */
.offer-art { position: relative; }

.fo-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.fo-step-item {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 0.85rem 0.95rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.fo-step-item.is-done {
  border-color: rgba(38, 208, 124, 0.35);
  background: rgba(38, 208, 124, 0.06);
}

.fo-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--gold);
  background: rgba(245, 197, 24, 0.12);
  border: 1px solid rgba(245, 197, 24, 0.3);
}

.fo-step-item.is-done .fo-step-num {
  color: #26d07c;
  background: rgba(38, 208, 124, 0.12);
  border-color: rgba(38, 208, 124, 0.35);
}

.fo-step-body { flex: 1; min-width: 0; }

.fo-step-title-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: baseline;
}

.fo-step-title { font-weight: 700; color: #fff; font-size: 0.92rem; }

.fo-step-points {
  font-weight: 800;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- Admin: Future Offer step repeater ---------- */
.fo-step {
  padding: 1rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  margin-bottom: 0.8rem;
}

.fo-step-grid {
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 0.8rem;
}

.fo-step-remove { margin-top: 0.6rem; }

@media (max-width: 640px) {
  .fo-step-grid { grid-template-columns: 1fr; }
}

/* ---------- Future Offers: compact rail + detail modal ---------- */
.fo-rail {
  display: flex;
  gap: 0.8rem;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.2rem 0.1rem 0.7rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
}

.fo-rail::-webkit-scrollbar { height: 6px; }
.fo-rail::-webkit-scrollbar-track { background: transparent; }
.fo-rail::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 999px; }

.fo-card {
  position: relative;
  flex: 0 0 auto;
  width: clamp(92px, 22vw, 128px);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  background:
    radial-gradient(90px 60px at 20% 0%, rgba(245, 197, 24, 0.18), transparent 70%),
    linear-gradient(150deg, #1b1f2a, #0f1117);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  scroll-snap-align: start;
  transition: transform 0.22s var(--ease), border-color 0.22s, box-shadow 0.22s;
}

.fo-card img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform 0.4s var(--ease); }
.fo-card:hover { transform: translateY(-4px); border-color: rgba(245, 197, 24, 0.35); box-shadow: var(--shadow-lg); }
.fo-card:hover img { transform: scale(1.06); }
.fo-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.fo-card-art-icon { font-size: 2rem; opacity: 0.9; }

/* Detail modal (reuses the offerwall modal shell) */
.fo-modal .fo-modal-dialog { width: min(380px, 94vw); height: auto; max-height: min(86vh, 660px); padding: 0; border-radius: 18px; }

.fo-modal-hero { position: relative; flex-shrink: 0; padding: 0.7rem 0.7rem 0; }

/* Dedicated media area: the image always fits fully inside its own framed box. */
.fo-modal-media {
  position: relative;
  height: clamp(108px, 22vh, 150px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  overflow: hidden;
  background:
    radial-gradient(140px 90px at 20% 0%, rgba(245, 197, 24, 0.14), transparent 70%),
    linear-gradient(150deg, #1b1f2a, #0f1117);
}

.fo-modal-media img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.fo-modal-media img[hidden] { display: none; }
.fo-modal-hero-fallback { font-size: 2rem; opacity: 0.9; }
.fo-modal-close { position: absolute; top: 0.92rem; right: 0.92rem; z-index: 2; }
.fo-badge-featured { display: inline-block; font-size: 0.6rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #17140a; background: linear-gradient(135deg, #ffe08a, #f5c518 45%, #c99c13); padding: 0.16rem 0.46rem; border-radius: 999px; }
.fo-modal-head { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; min-width: 0; }
.fo-modal-title { margin: 0; font-size: 0.98rem; font-weight: 800; color: #fff; line-height: 1.3; overflow-wrap: anywhere; }

.fo-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 0.8rem 0.9rem 0.9rem; display: flex; flex-direction: column; gap: 0.65rem; }
.fo-modal-reward { display: flex; align-items: baseline; gap: 0.4rem; }
.fo-modal-reward-val { font-size: 1.2rem; font-weight: 900; }
.fo-modal-reward-name { font-size: 0.72rem; color: var(--text-muted); }
.fo-modal-desc { margin: 0; font-size: 0.82rem; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.fo-modal-h { margin: 0 0 0.4rem; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-soft); }
.fo-modal-note { margin: 0; font-size: 0.8rem; line-height: 1.55; }
.fo-modal-terms { padding: 0.65rem 0.75rem; border-radius: 12px; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.07); }
.fo-modal-terms p { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }

/* Keep the shared step rows compact inside the modal. */
.fo-modal .fo-steps { gap: 0.45rem; }
.fo-modal .fo-step-item { padding: 0.55rem 0.65rem; border-radius: 10px; gap: 0.65rem; }
.fo-modal .fo-step-num { width: 22px; height: 22px; font-size: 0.68rem; }
.fo-modal .fo-step-title { font-size: 0.82rem; }
.fo-modal .fo-step-points { font-size: 0.82rem; }

.fo-modal-foot { flex-shrink: 0; padding: 0.7rem 0.9rem 0.8rem; border-top: 1px solid var(--border); background: rgba(0, 0, 0, 0.22); }
.fo-modal-footnote { margin: 0.45rem 0 0; text-align: center; line-height: 1.55; font-size: 0.7rem; }

@media (max-width: 640px) {
  .fo-modal { padding: 0.65rem; place-items: center; }
  .fo-modal-dialog { width: 100%; height: auto; max-height: 92vh; max-height: 92dvh; border-radius: 14px; }
  .fo-modal-media { height: clamp(100px, 20vh, 140px); }
}

/* ==========================================================================
   Preloader / Loading screen - "Logo + Spinner"
   A pure black stage in the site's brand palette (black + gold). The site
   logo rendered full, unstyled and uncropped, with a gold loading spinner
   spinning beside it - nothing else.
   JS contract: .is-done fades it out, .is-removed deletes the node.
   ========================================================================== */

.ld-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  overflow: hidden;
  background: #000;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease, visibility 0.45s ease;
}

html.ld-lock, body.ld-lock { overflow: hidden; }

.ld-overlay.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.ld-overlay.is-removed { display: none; }

/* Soft amber halo breathing behind the stage. */
.ld-overlay::before {
  content: '';
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 197, 24, 0.10), transparent 65%);
  animation: ldHalo 3.2s ease-in-out infinite;
  pointer-events: none;
}

/* Thin gold frame around the stage keeps it tight and premium. */
.ld-overlay::after {
  content: '';
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(245, 197, 24, 0.10);
  border-radius: 20px;
  pointer-events: none;
}

.ld-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 1.15rem;
  animation: ldFadeIn 0.5s ease both;
  transition: transform 0.45s ease, opacity 0.45s ease;
}

.ld-overlay.is-done .ld-inner { transform: scale(1.05); opacity: 0; }

/* ---- Site logo, full and uncropped -------------------------------------- */

.ld-mark { display: flex; align-items: center; }

.ld-logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 280px;
  max-height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 0 22px rgba(245, 197, 24, 0.28));
}

.ld-logo-letter {
  width: 62px;
  height: 62px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 1.9rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #17140a;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.2), 0 0 18px rgba(255, 233, 168, 0.45);
  background:
    radial-gradient(130% 130% at 30% 20%, rgba(255, 242, 196, 0.9), transparent 62%),
    var(--gold-grad, linear-gradient(135deg, #ffe08a, #f5c518 50%, #c99c13));
  box-shadow:
    0 0 0 1px rgba(245, 197, 24, 0.35),
    0 0 26px rgba(245, 197, 24, 0.3),
    0 14px 30px rgba(0, 0, 0, 0.6);
}

/* ---- Loading spinner (beside the logo) ---------------------------------- */

.ld-spinner {
  position: relative;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 4px solid rgba(245, 197, 24, 0.18);
  border-top-color: #f5c518;
  border-right-color: rgba(245, 197, 24, 0.55);
  animation: ldSpin 0.9s linear infinite;
}

.ld-spinner::before {
  content: '';
  position: absolute;
  top: -7px; left: -7px; right: -7px; bottom: -7px;
  border-radius: 50%;
  border: 1px solid rgba(245, 197, 24, 0.07);
}

.ld-overlay[data-ld-custom]:not([data-ld-custom=""]) .ld-spinner { display: none; }

/* The spinner must ALWAYS spin, even with reduced motion - a loader that
   does not rotate still conveys nothing at all. Only the decorative
   halo/frame/entrance are softened for reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
  .ld-overlay::before,
  .ld-overlay::after,
  .ld-inner {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- Keyframes ---------------------------------------------------------- */

@keyframes ldSpin { to { transform: rotate(360deg); } }

@keyframes ldHalo {
  0%, 100% { transform: scale(0.94); opacity: 0.75; }
  50% { transform: scale(1.05); opacity: 1; }
}

@keyframes ldFadeIn {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@media (max-width: 480px) {
  .ld-logo { max-width: 200px; max-height: 48px; }
  .ld-logo-letter { width: 54px; height: 54px; border-radius: 14px; font-size: 1.65rem; }
  .ld-spinner { width: 28px; height: 28px; border-width: 4px; }
}

/* ---------- Dynamic media (shared) ----------
   Used by <x-media-image>, which always emits width/height so the browser can
   reserve the box before a lazy-loaded image arrives. Consumers that size the
   image themselves (fixed height, aspect-ratio box, object-fit) keep full
   control of the rendered size; --media-ratio is only the safety net for a
   consumer that has not set one, and matches the configured fallback ratio. */
.media-img {
  aspect-ratio: var(--media-ratio, 4 / 3);
  height: auto;
}

.media-box {
  display: block;
  overflow: hidden;
  aspect-ratio: var(--media-ratio, 4 / 3);
}

.media-box > .media-img {
  width: 100%;
  height: 100%;
  object-fit: var(--media-fit, cover);
  display: block;
}

/* =============================================================
   Support Center (member + admin)
   ============================================================= */

.sc-card {
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.sc-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.3rem;
  border-bottom: 1px solid var(--border);
}

.sc-card-sub {
  color: var(--text-muted);
  font-size: 0.8rem;
  margin-top: 0.15rem;
}

/* ---------- Hero ---------- */
.sc-hero {
  position: relative;
  margin-bottom: 1.4rem;
  padding: 1.5rem 1.6rem;
  border-radius: var(--radius);
  border: 1px solid rgba(245, 197, 24, 0.22);
  background:
    radial-gradient(120% 140% at 8% 0%, rgba(245, 197, 24, 0.14), transparent 58%),
    linear-gradient(160deg, #141824, #0d0f15 70%);
  overflow: hidden;
}

.sc-hero-glow {
  position: absolute;
  top: -40%;
  right: -8%;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 197, 24, 0.16), transparent 62%);
  pointer-events: none;
}

.sc-hero-body {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.3rem;
  flex-wrap: wrap;
}

.sc-hero-icon {
  width: 54px;
  height: 54px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 16px;
  color: var(--gold);
  background: linear-gradient(140deg, rgba(245, 197, 24, 0.2), rgba(245, 197, 24, 0.05));
  border: 1px solid rgba(245, 197, 24, 0.3);
  box-shadow: var(--glow-gold);
}

.sc-hero-icon .act-svg {
  width: 26px;
  height: 26px;
}

.sc-hero-copy {
  flex: 1 1 320px;
  min-width: 0;
}

.sc-hero-title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.sc-hero-sub {
  color: var(--text-muted);
  font-size: 0.86rem;
  line-height: 1.6;
  margin-top: 0.3rem;
  max-width: 52ch;
}

.sc-hero-stats {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.sc-hero-stat {
  min-width: 96px;
  padding: 0.6rem 0.8rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  text-align: center;
}

.sc-hero-stat dt {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-faint);
}

.sc-hero-stat dd {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-top: 0.1rem;
}

/* ---------- Layout ---------- */
.sc-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 1.4rem;
  align-items: start;
}

.sc-thread-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 1.4rem;
  align-items: start;
}

.sc-side {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  position: sticky;
  top: calc(var(--nav-h) + 1rem);
}

/* ---------- Category picker ---------- */
.sc-cats {
  border: 0;
  padding: 0;
  margin: 0 0 1.1rem;
}

.sc-cats .label {
  display: block;
  margin-bottom: 0.5rem;
}

.sc-cat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.sc-cat {
  display: block;
  cursor: pointer;
}

.sc-cat-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.sc-cat-box {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  height: 100%;
  padding: 0.7rem 0.8rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border);
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease), transform 0.18s var(--ease);
}

.sc-cat:hover .sc-cat-box {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.16);
}

.sc-cat-ico {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  margin-bottom: 0.3rem;
  color: var(--text-soft);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
}

.sc-cat-ico .act-svg {
  width: 16px;
  height: 16px;
}

.sc-cat-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.sc-cat-hint {
  font-size: 0.72rem;
  color: var(--text-faint);
  line-height: 1.4;
}

.sc-cat-input:checked + .sc-cat-box {
  background: linear-gradient(150deg, rgba(245, 197, 24, 0.14), rgba(245, 197, 24, 0.04));
  border-color: rgba(245, 197, 24, 0.5);
  box-shadow: 0 6px 20px rgba(245, 197, 24, 0.08);
}

.sc-cat-input:checked + .sc-cat-box .sc-cat-ico {
  color: var(--gold);
  background: rgba(245, 197, 24, 0.16);
  border-color: rgba(245, 197, 24, 0.35);
}

.sc-cat-input:focus-visible + .sc-cat-box {
  outline: 2px solid rgba(245, 197, 24, 0.65);
  outline-offset: 2px;
}

/* ---------- Form bits ---------- */
.sc-form {
  padding: 1.2rem 1.3rem 1.3rem;
}

.sc-hint-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 0.35rem;
}

.sc-counter {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sc-counter.is-near {
  color: var(--amber);
}

/* ---------- Tabs ---------- */
.sc-list-head {
  padding: 0.9rem 1.1rem 0;
  border-bottom: 1px solid var(--border);
}

.sc-tabs {
  display: flex;
  gap: 0.2rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.sc-tabs::-webkit-scrollbar { display: none; }

.sc-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0.8rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.18s var(--ease);
}

.sc-tab:hover { color: var(--text-soft); }

.sc-tab.is-active {
  color: var(--text);
  border-bottom-color: var(--gold);
}

.sc-tab-count {
  min-width: 20px;
  padding: 0.05rem 0.35rem;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 800;
  text-align: center;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}

.sc-tab.is-active .sc-tab-count {
  color: #06220f;
  background: var(--gold);
  border-color: var(--gold);
}

/* ---------- Ticket list ---------- */
.sc-list {
  display: flex;
  flex-direction: column;
  padding: 0.7rem 0.6rem;
}

.sc-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.8rem 0.85rem;
  border-radius: 13px;
  border: 1px solid transparent;
  text-decoration: none;
  color: inherit;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.18s var(--ease);
}

.sc-item + .sc-item { margin-top: 0.2rem; }

.sc-item:hover {
  background: rgba(255, 255, 255, 0.035);
  border-color: var(--border);
  transform: translateX(2px);
}

.sc-item-ico {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--blue);
  background: rgba(96, 165, 250, 0.12);
  border: 1px solid rgba(96, 165, 250, 0.24);
}

.sc-item-ico .act-svg { width: 19px; height: 19px; }

.sc-item-ico--offer { color: var(--gold); background: rgba(245, 197, 24, 0.12); border-color: rgba(245, 197, 24, 0.26); }
.sc-item-ico--withdrawal { color: var(--green); background: rgba(38, 208, 124, 0.12); border-color: rgba(38, 208, 124, 0.26); }
.sc-item-ico--verification { color: var(--violet); background: rgba(139, 92, 246, 0.14); border-color: rgba(139, 92, 246, 0.28); }
.sc-item-ico--billing { color: var(--rose); background: rgba(251, 113, 133, 0.12); border-color: rgba(251, 113, 133, 0.26); }
.sc-item-ico--other { color: var(--text-soft); background: rgba(255, 255, 255, 0.05); border-color: var(--border); }

.sc-item-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.sc-item-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sc-item-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  font-size: 0.74rem;
  color: var(--text-muted);
}

.sc-item-no {
  color: var(--text-faint);
  font-size: 0.72rem;
}

.sc-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-faint);
  flex: 0 0 auto;
}

.sc-item-wait {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  width: fit-content;
}

.sc-item-wait .act-svg { width: 13px; height: 13px; }
.sc-item-wait.is-staff { color: var(--gold); }
.sc-item-wait.is-member { color: var(--blue); }

.sc-item-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  flex: 0 0 auto;
}

.sc-item-time {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.71rem;
  color: var(--text-faint);
  white-space: nowrap;
}

.sc-item-time .act-svg { width: 12px; height: 12px; }

/* ---------- Pills & chips ---------- */
.sc-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.16rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
  border: 1px solid transparent;
}

.sc-pill--gold { color: var(--gold); background: rgba(245, 197, 24, 0.12); border-color: rgba(245, 197, 24, 0.3); }
.sc-pill--blue { color: var(--blue); background: rgba(96, 165, 250, 0.12); border-color: rgba(96, 165, 250, 0.3); }
.sc-pill--green { color: var(--green); background: rgba(38, 208, 124, 0.12); border-color: rgba(38, 208, 124, 0.3); }
.sc-pill--dim { color: var(--text-muted); background: rgba(255, 255, 255, 0.05); border-color: var(--border); }

.sc-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.24rem 0.55rem;
  border-radius: var(--radius-full);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  white-space: nowrap;
}

.sc-chip .act-svg { width: 13px; height: 13px; color: var(--text-faint); }

.sc-thread-chips {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-top: 0.45rem;
}

.sc-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  text-decoration: none;
}

.sc-back:hover { color: var(--gold); }
.sc-back .act-svg { width: 15px; height: 15px; }

.sc-thread-title {
  margin-top: 0.45rem;
  font-size: 1.35rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* ---------- Thread ---------- */
.sc-thread-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--border);
}

.sc-thread-body {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: 1.2rem;
  max-height: 62vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sc-msg {
  display: flex;
  gap: 0.7rem;
  max-width: 88%;
}

.sc-msg--member { align-self: flex-start; }
.sc-msg--staff { align-self: flex-end; flex-direction: row-reverse; }

.sc-msg-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 11px;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--text-soft);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
}

.sc-msg-avatar .act-svg { width: 16px; height: 16px; }
.sc-msg-avatar-box { width: 34px; height: 34px; }
.sc-msg-avatar--staff {
  color: var(--gold);
  background: rgba(245, 197, 24, 0.14);
  border-color: rgba(245, 197, 24, 0.3);
}

.sc-msg-main { min-width: 0; }

.sc-msg-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.3rem;
}

.sc-msg--staff .sc-msg-head { justify-content: flex-end; }

.sc-msg-author {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--text);
}

.sc-msg--staff .sc-msg-author { color: var(--gold); }

.sc-msg-time {
  font-size: 0.71rem;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.sc-msg-body {
  font-size: 0.89rem;
  line-height: 1.65;
  color: var(--text-soft);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: 0.75rem 0.95rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
}

.sc-msg--member .sc-msg-body {
  border-bottom-left-radius: 5px;
  color: var(--text);
}

.sc-msg--staff .sc-msg-body {
  background: linear-gradient(150deg, rgba(245, 197, 24, 0.13), rgba(245, 197, 24, 0.04));
  border-color: rgba(245, 197, 24, 0.28);
  border-bottom-right-radius: 5px;
  color: var(--text);
}

/* ---------- Composer ---------- */
.sc-composer {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.1rem 1.2rem 1.2rem;
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.015);
}

.sc-composer-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.35rem;
}

.sc-closed {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  padding: 1.1rem 1.2rem;
  border-top: 1px solid var(--border);
}

.sc-closed p {
  flex: 1 1 200px;
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 0;
}

.sc-closed-ico {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: var(--text-faint);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
}

.sc-closed-ico .act-svg { width: 15px; height: 15px; }

/* ---------- Facts / help cards ---------- */
.sc-facts,
.sc-help,
.sc-member-card {
  padding: 1.1rem 1.2rem;
}

.sc-facts .card-title,
.sc-help .card-title,
.sc-member-card .card-title {
  font-size: 0.95rem;
  margin-bottom: 0.85rem;
}

.sc-facts-list {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.sc-facts-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.5rem 0;
  border-bottom: 1px dashed var(--border);
}

.sc-facts-row:last-child { border-bottom: 0; padding-bottom: 0; }

.sc-facts-row dt {
  font-size: 0.78rem;
  color: var(--text-faint);
  white-space: nowrap;
}

.sc-facts-row dd {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  text-align: right;
  overflow-wrap: anywhere;
}

.sc-help-text {
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.6;
  margin-bottom: 0.85rem;
}

.sc-help-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* ---------- Member card (admin) ---------- */
.sc-member-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-bottom: 0.9rem;
  margin-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
}

.sc-member-avatar { flex: 0 0 auto; }

.sc-member-copy {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.sc-member-name {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--text);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.sc-member-name:hover { color: var(--gold); }

.sc-member-mail {
  font-size: 0.75rem;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.sc-member-uuid {
  font-size: 0.68rem;
  color: var(--text-faint);
  overflow-wrap: anywhere;
}

.sc-status-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sc-status-form .label { margin: 0; white-space: nowrap; }

.sc-empty { padding: 2.6rem 1.4rem; }

.sc-empty .empty-icon {
  display: grid;
  place-items: center;
}

.sc-empty .empty-icon .act-svg {
  width: 30px;
  height: 30px;
  color: var(--text-faint);
}

.sc-pager {
  margin-top: 1.1rem;
}

/* ---------- Admin queue ---------- */
.sc-admin-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.8rem;
  margin-bottom: 1.2rem;
}

.sc-admin-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: transform 0.18s var(--ease), border-color 0.18s var(--ease), background 0.18s var(--ease);
}

.sc-admin-stat:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.18);
}

.sc-admin-stat.is-active {
  border-color: rgba(245, 197, 24, 0.5);
  background: linear-gradient(160deg, rgba(245, 197, 24, 0.12), rgba(245, 197, 24, 0.03));
}

.sc-admin-stat-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

.sc-admin-stat.is-active .sc-admin-stat-label { color: var(--gold); }

.sc-admin-stat-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.sc-admin-stat-foot {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.71rem;
  font-weight: 700;
  color: var(--text-faint);
}

.sc-admin-stat-foot .act-svg { width: 13px; height: 13px; }

.sc-dot-live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.16);
}

.sc-admin-filters {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 1.1rem;
}

.sc-admin-search {
  position: relative;
  flex: 1 1 300px;
  display: flex;
  align-items: center;
}

.sc-admin-search .act-svg {
  position: absolute;
  left: 0.8rem;
  width: 16px;
  height: 16px;
  color: var(--text-faint);
  pointer-events: none;
}

.sc-admin-search .input { padding-left: 2.4rem; }

.sc-admin-table th { white-space: nowrap; }

.sc-admin-ticket {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  text-decoration: none;
}

.sc-admin-ticket-no {
  font-size: 0.72rem;
  color: var(--text-faint);
}

.sc-admin-ticket-subject {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
}

.sc-admin-ticket:hover .sc-admin-ticket-subject { color: var(--gold); }

.sc-admin-member {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: inherit;
}

.sc-admin-member-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sc-admin-member-name {
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}

.sc-admin-member-mail {
  font-size: 0.71rem;
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}

.sc-admin-member:hover .sc-admin-member-name { color: var(--gold); }

.sc-admin-activity {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  white-space: nowrap;
}

.sc-admin-activity-time { font-size: 0.8rem; color: var(--text-soft); }
.sc-admin-activity-count { font-size: 0.7rem; color: var(--text-faint); }

/* A ticket nobody has answered yet is the one the queue cannot live without. */
.sc-row-urgent td:first-child { box-shadow: inset 3px 0 0 var(--gold); }

/* =============================================================
   Footer (shared by the public, member and admin shells)
   ============================================================= */

.footer-brand { max-width: 34rem; }

.footer-brand .brand { margin-bottom: 0.8rem; }

.footer-tagline {
  display: inline-block;
  margin-top: 0.7rem;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gold);
}

.footer-lower-links {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

.footer-lower-links a {
  display: inline;
  color: var(--text-faint);
  text-decoration: none;
  transition: color 0.18s var(--ease);
}

.footer-lower-links a:hover { color: var(--gold); }

/* An icon and a short label, not a printed address: the footer stays quiet and
   the address only surfaces as the tooltip and the mailto target. The selector
   is prefixed with `.footer` because the bare `.footer a` rule is more specific
   and would otherwise re-declare display and padding, which is what left the
   glyph sitting on the text baseline instead of centred. */
.footer .footer-contact {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.9rem;
  padding: 0.44rem 0.85rem 0.44rem 0.62rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: linear-gradient(140deg, rgba(245, 197, 24, 0.12), rgba(245, 197, 24, 0.03));
  color: var(--text-soft);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.15;
  text-decoration: none;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease), transform 0.18s var(--ease);
}

.footer .footer-contact svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--gold); }

.footer .footer-contact:hover {
  border-color: rgba(245, 197, 24, 0.5);
  background: linear-gradient(140deg, rgba(245, 197, 24, 0.22), rgba(245, 197, 24, 0.07));
  transform: translateY(-2px);
}

.footer .footer-contact:focus-visible { outline: 2px solid rgba(245, 197, 24, 0.7); outline-offset: 2px; }

/* Inside the content column the footer is a card, not a page section, so it
   needs breathing room from the page above it and a hairline of its own. */
.content .footer {
  margin-top: 2.2rem;
  padding: 1.8rem 0 0.2rem;
  border-top: 1px solid var(--border);
}

.content .footer-grid {
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 1.6rem;
}

.content .footer h5 { margin-bottom: 0.6rem; }
.content .footer a { font-size: 0.83rem; }
.content .footer-lower { margin-top: 1.5rem; padding-top: 1rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .sc-grid { grid-template-columns: 1fr; }
  .sc-admin-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .content .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1080px) {
  .sc-thread-grid { grid-template-columns: 1fr; }
  .sc-side { position: static; flex-direction: row; flex-wrap: wrap; }
  .sc-side > * { flex: 1 1 280px; }
}

@media (max-width: 860px) {
  .sc-admin-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sc-side { flex-direction: column; }
}

@media (max-width: 768px) {
  .sc-hero { padding: 1.2rem 1.1rem; }
  .sc-hero-title { font-size: 1.28rem; }
  .sc-hero-body { gap: 1rem; }
  .sc-hero-stats { width: 100%; }
  .sc-hero-stat { flex: 1 1 0; min-width: 0; }
  .sc-cat-grid { grid-template-columns: 1fr; }
  .sc-item { flex-wrap: wrap; }
  .sc-item-side { flex-direction: row; align-items: center; gap: 0.5rem; width: 100%; justify-content: space-between; }
  .sc-msg { max-width: 100%; }
  .sc-thread-body { max-height: none; }
  .sc-admin-filters .btn { flex: 1 1 auto; justify-content: center; }
  .sc-composer-actions .btn { flex: 1 1 auto; justify-content: center; }
  .content .footer { margin-top: 1.6rem; }
  .content .footer-grid { grid-template-columns: 1fr; gap: 1.3rem; }
  .content .footer-lower { flex-direction: column; gap: 0.5rem; }
}

/* ==========================================================================
   SURVEYS — opinion partner section (distinct from the offerwall cards)
   Layout: horizontal rows with a circular logo chip, dashed gold edge and a
   subtle question-mark watermark — same tokens, a different shape language.
   ========================================================================== */
.sv-section {
  position: relative;
  overflow: hidden;
}
.sv-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(420px 190px at 100% -20%, rgba(96, 165, 250, 0.07), transparent 65%),
    radial-gradient(320px 170px at 0% 120%, rgba(245, 197, 24, 0.07), transparent 60%);
  pointer-events: none;
}
.sv-head-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-bottom: 1.15rem;
}
.sv-ico {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--gold);
  background: linear-gradient(135deg, rgba(245, 197, 24, 0.16), rgba(245, 197, 24, 0.04));
  border: 1px solid rgba(245, 197, 24, 0.3);
  box-shadow: 0 4px 14px rgba(245, 197, 24, 0.08);
  flex: 0 0 auto;
}
.sv-head-copy {
  min-width: 0;
  flex: 1 1 240px;
}
.sv-count {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px dashed var(--border-strong);
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  white-space: nowrap;
}
.sv-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0.9rem;
}
.sv-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.95rem;
  padding: 1rem 1.05rem 1rem 1.25rem;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008) 55%);
  cursor: pointer;
  overflow: hidden;
  min-width: 0;
  transition: transform 0.25s var(--ease), border-color 0.25s, box-shadow 0.25s;
}
.sv-card:hover,
.sv-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(245, 197, 24, 0.4);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 0 22px rgba(245, 197, 24, 0.07);
}
.sv-card.is-locked {
  cursor: default;
  opacity: 0.62;
}
/* Dashed gold edge on the left — the signature of the section */
.sv-edge {
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 10px;
  border-right: 2px dashed rgba(245, 197, 24, 0.35);
  border-radius: 0 6px 6px 0;
  opacity: 0.9;
}
.sv-card.is-locked .sv-edge { border-color: rgba(255, 255, 255, 0.14); }
.sv-media {
  position: relative;
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--gold-grad);
  box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.16), 0 6px 18px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.sv-media-img {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  object-fit: cover;
  border: 3px solid var(--bg-card);
}
.sv-media-fallback {
  font-size: 1.15rem;
  font-weight: 800;
  color: #17160b;
  letter-spacing: 0.03em;
}
.sv-media-watermark {
  position: absolute;
  right: -8px;
  bottom: -10px;
  width: 30px;
  height: 30px;
  color: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.sv-body {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.sv-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.sv-name {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.sv-star {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(245, 197, 24, 0.4);
  background: rgba(245, 197, 24, 0.1);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}
.sv-desc {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sv-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  margin-top: 0.35rem;
  flex-wrap: wrap;
}
.sv-go {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: var(--gold);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.sv-card:hover .sv-go,
.sv-card:focus-visible .sv-go {
  opacity: 1;
  transform: none;
}
.sv-inframe {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
  white-space: nowrap;
}
.sv-lock {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .sv-grid { grid-template-columns: 1fr; }
  .sv-media { width: 56px; height: 56px; }
  .sv-media-img { width: 50px; height: 50px; }
  .sv-card { padding: 0.9rem 0.95rem 0.9rem 1.15rem; }
  .sv-go, .sv-inframe { opacity: 1; transform: none; }
  .sv-foot { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .sv-go { opacity: 1; transform: none; }
}

/* Survey-card tiers: the horizontal sv-star chip hosts the pill classes, so
   the tier look has to be re-asserted after .sv-star in the cascade. */
.sv-star.ow-super-pill {
  color: #221a04;
  border: 0;
  background: linear-gradient(115deg, #ffe8a0, #f5c518 42%, #d9a614 60%, #ffe8a0);
  background-size: 220% 100%;
  animation: ow-super-shift 5s linear infinite, ow-super-glow 2.6s ease-in-out infinite;
}

.sv-star.ow-hot-pill {
  color: #fff;
  border: 0;
  background: linear-gradient(115deg, #ff9433, #ef4d64 55%, #d43a52);
  animation: ow-hot-flicker 1.8s ease-in-out infinite;
}

.sv-star.ow-future-pill {
  color: #a5b4fc;
  background: rgba(10, 11, 20, 0.72);
  border: 1px solid rgba(129, 140, 248, 0.35);
  animation: none;
}

.sv-star.ow-future-pill svg { stroke: #a5b4fc; }

/* Admin tier picker: three bold checkboxes with the tier semantics inline */
.pf-tier {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-soft);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.pf-tier:hover {
  border-color: rgba(245, 197, 24, 0.35);
  background: rgba(245, 197, 24, 0.03);
}
.pf-tier strong { color: #fff; }
.pf-tier .checkbox {
  align-items: center;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

/* Numbered pager (registered as the app's default paginator view):
   prev arrow / 1 2 3 � / next arrow, gap dots muted, active page gold. */
.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  margin-top: 1.2rem;
  padding-bottom: 0.2rem;
}
.pager-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 0.55rem;
  border-radius: 9px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text-soft);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.pager-item:hover {
  border-color: rgba(245, 197, 24, 0.45);
  color: var(--gold);
  transform: translateY(-1px);
}
.pager-item.is-active {
  background: var(--gold);
  border-color: var(--gold);
  color: #0b0c10;
  cursor: default;
  transform: none;
}
.pager-item.is-disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
}
.pager-item.is-disabled:hover {
  border-color: var(--border);
  color: var(--text-soft);
  transform: none;
}
.pager-item.is-gap {
  min-width: auto;
  border: 0;
  background: none;
  color: var(--text-muted);
  cursor: default;
}

/* ======================================================================
   Privacy Policy page (settings-driven body, TOC aside, contact card)
   ====================================================================== */
.privacy-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(640px 260px at 92% -40%, rgba(245, 197, 24, 0.13), transparent 60%),
    radial-gradient(480px 240px at -8% 130%, rgba(38, 208, 124, 0.06), transparent 55%),
    linear-gradient(180deg, var(--bg-card-2), var(--bg-card));
  padding: 2.5rem 2.4rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-md);
}
.privacy-hero-orn {
  position: absolute;
  right: -2.2rem;
  bottom: -2.4rem;
  width: 260px;
  height: 260px;
  color: var(--gold);
  opacity: 0.06;
  transform: rotate(8deg);
  pointer-events: none;
}
.privacy-hero-title { margin-top: 1rem; font-size: clamp(2rem, 3.6vw, 2.7rem); }
.privacy-hero-sub { color: var(--text-soft); max-width: 34rem; margin-top: 0.6rem; }

.privacy-chips { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.3rem; }
.privacy-chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.42rem 0.9rem; border-radius: var(--radius-full);
  border: 1px solid var(--border); background: var(--glass);
  color: var(--text-soft); font-size: 0.78rem; font-weight: 600;
}
.privacy-chip svg { width: 14px; height: 14px; color: var(--gold); }

.privacy-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 1.8rem;
  align-items: start;
  max-width: 1080px;
}

.privacy-aside {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  display: grid;
  gap: 1rem;
}

.privacy-toc {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: 1.1rem 0.9rem;
}
.privacy-toc > b { display: block; padding: 0 0.5rem; margin-bottom: 0.5rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.privacy-toc-nav { display: grid; gap: 0.15rem; }
.privacy-toc-link {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.45rem 0.6rem; border-radius: var(--radius-sm);
  color: var(--text-soft); font-size: 0.83rem; line-height: 1.3;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.privacy-toc-link span { color: var(--text-faint); font-size: 0.7rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.privacy-toc-link:hover { background: var(--glass); color: var(--text); }
.privacy-toc-link:hover span { color: var(--gold); }

.privacy-contact-card {
  border: 1px solid rgba(245, 197, 24, 0.25);
  border-radius: var(--radius);
  background:
    radial-gradient(220px 120px at 100% 0%, rgba(245, 197, 24, 0.08), transparent 65%),
    var(--bg-card);
  padding: 1.1rem 1.1rem 1.2rem;
  display: grid;
  gap: 0.35rem;
  justify-items: start;
}
.privacy-contact-ico {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  background: rgba(245, 197, 24, 0.12); color: var(--gold);
}
.privacy-contact-ico svg { width: 17px; height: 17px; }
.privacy-contact-card > b { margin-top: 0.2rem; }
.privacy-contact-card > p { color: var(--text-muted); font-size: 0.82rem; }
.privacy-contact-mail {
  margin-top: 0.3rem; font-size: 0.85rem; font-weight: 700;
  color: var(--gold); overflow-wrap: anywhere; text-align: start;
}

.privacy-body { display: grid; gap: 1rem; }
.privacy-body section { scroll-margin-top: calc(var(--nav-h) + 24px); }

.privacy-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: 1.5rem 1.7rem;
  transition: border-color 0.25s var(--ease);
}
.privacy-card:hover { border-color: var(--border-strong); }
.privacy-card--intro {
  border-color: rgba(245, 197, 24, 0.22);
  background:
    radial-gradient(420px 180px at 0% 0%, rgba(245, 197, 24, 0.07), transparent 60%),
    linear-gradient(180deg, var(--bg-card-2), var(--bg-card));
}
.privacy-card-head { display: flex; align-items: center; gap: 0.7rem; }
.privacy-card-head h2 { font-size: 1.12rem; }
.privacy-num {
  display: grid; place-items: center;
  width: 32px; height: 32px; flex: none; border-radius: 10px;
  background: var(--gold-grad); color: #17140a;
  font-size: 0.72rem; font-weight: 900; font-variant-numeric: tabular-nums;
  box-shadow: var(--glow-gold);
}
.privacy-card p { color: var(--text-soft); font-size: 0.95rem; margin-top: 0.65rem; }
.privacy-card p + p { margin-top: 0.55rem; }
.privacy-card p:first-of-type { margin-top: 0.8rem; }
.privacy-card ul { display: grid; gap: 0.45rem; margin-top: 0.8rem; padding: 0; list-style: none; }
.privacy-card li {
  display: flex; align-items: flex-start; gap: 0.6rem;
  color: var(--text-soft); font-size: 0.92rem; line-height: 1.55;
}
.privacy-dot {
  width: 7px; height: 7px; flex: none; margin-top: 0.5rem;
  border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 8px rgba(245, 197, 24, 0.4);
}

.privacy-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background:
    radial-gradient(420px 200px at 100% 0%, rgba(38, 208, 124, 0.07), transparent 60%),
    var(--bg-card);
  padding: 1.3rem 1.6rem;
}
.privacy-cta b { display: block; }
.privacy-cta p { color: var(--text-muted); font-size: 0.85rem; margin-top: 0.15rem; }

@media (max-width: 1080px) {
  .privacy-layout { grid-template-columns: 1fr; }
  .privacy-aside { position: static; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .privacy-hero { padding: 1.8rem 1.3rem; border-radius: var(--radius); }
  .privacy-aside { grid-template-columns: 1fr; }
  .privacy-card { padding: 1.2rem 1.2rem; }
  .privacy-cta { flex-direction: column; align-items: flex-start; }
}

/* ======================================================================
   FAQ page (help center accordion over the shared privacy design)
   ====================================================================== */
.faq-wrap { max-width: 860px; margin-inline: auto; display: grid; gap: 1.5rem; }

.faq-list { display: grid; gap: 0.8rem; }
.faq-list .faq-item {
  margin-bottom: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-card);
  transition: border-color 0.25s var(--ease);
}
.faq-list .faq-item:hover { border-color: var(--border-strong); }
.faq-list .faq-item.open { border-color: rgba(245, 197, 24, 0.3); }
.faq-list .faq-item .q { padding: 1.15rem 1.4rem; font-size: 1rem; }
.faq-list .faq-item .q .chev { color: var(--gold); }
.faq-list .faq-item .a-inner {
  padding: 0 1.4rem 1.2rem;
  font-size: 0.95rem;
  line-height: 1.65;
}
.faq-list .faq-item .a-inner a { font-weight: 600; }

.faq-q-badge {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; margin-right: 0.65rem; vertical-align: -4px;
  border-radius: 7px;
  background: var(--gold-grad); color: #17140a;
  font-size: 0.68rem; font-weight: 900;
}

.faq-cta { margin-top: 0.5rem; }

/* ======================================================================
   Dashboard v2 — level card, activity tone skin, daily reward polish
   ====================================================================== */

/* ---------- Your Level (full-width card inside .dash-split) ---------- */
.lvl-card {
  grid-column: 1 / -1;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.15rem 1.4rem;
  border-radius: 18px;
  border-color: rgba(245, 197, 24, 0.26);
  background:
    radial-gradient(420px 200px at 0% -20%, rgba(245, 197, 24, 0.12), transparent 60%),
    radial-gradient(360px 180px at 100% 130%, rgba(38, 208, 124, 0.05), transparent 55%),
    linear-gradient(180deg, var(--bg-card-2), var(--bg-card));
}
.lvlc-medal {
  width: 64px;
  height: 64px;
  flex: none;
  display: grid;
  place-content: center;
  gap: 1px;
  text-align: center;
  border-radius: 18px;
  background: var(--gold-grad);
  color: #17140a;
  box-shadow: var(--glow-gold), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.lvlc-medal-kicker { font-size: 0.55rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.75; }
.lvlc-medal-n { font-size: 1.5rem; font-weight: 900; line-height: 1; }

.lvlc-body { flex: 1; min-width: 0; display: grid; gap: 0.45rem; }
.lvlc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.lvlc-head > b { font-size: 1.02rem; }
.lvlc-next {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.78rem; font-weight: 700;
  color: var(--gold-soft);
  padding: 0.28rem 0.7rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(245, 197, 24, 0.3);
  background: rgba(245, 197, 24, 0.07);
}
.lvlc-next svg { width: 12px; height: 12px; flex: none; }

.lvlc-track {
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  overflow: hidden;
}
.lvlc-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--gold-grad);
  box-shadow: 0 0 12px rgba(245, 197, 24, 0.35);
  transition: width 0.6s var(--ease);
}
.lvlc-scale { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--text-muted); }
.lvlc-sub { margin-top: 0.1rem; font-size: 0.8rem; color: var(--text-muted); }

.lvlc-cta { flex: none; }

/* ---------- Recent Activity: typed icons, chip + amount pill ---------- */
.dash-tx-ico .act-svg { width: 17px; height: 17px; }
.dash-tx-t-gold  { color: var(--gold);      background: rgba(245, 197, 24, 0.1);  border-color: rgba(245, 197, 24, 0.28); }
.dash-tx-t-green { color: var(--green);     background: var(--green-dim);         border-color: rgba(38, 208, 124, 0.28); }
.dash-tx-t-blue  { color: var(--blue);      background: var(--blue-dim);          border-color: rgba(96, 165, 250, 0.28); }
.dash-tx-t-red   { color: var(--red-soft);  background: var(--red-dim);           border-color: rgba(239, 77, 100, 0.3); }
.dash-tx-t-amber { color: var(--amber);     background: rgba(251, 191, 36, 0.1);  border-color: rgba(251, 191, 36, 0.26); }
.dash-tx-t-soft  { color: var(--text-soft); background: rgba(255, 255, 255, 0.04); }

/* Left edge bar follows the real transaction type, not just in/out. */
.dash-tx-item.dash-tx-item--gold::before  { background: var(--gold); }
.dash-tx-item.dash-tx-item--green::before { background: var(--green); }
.dash-tx-item.dash-tx-item--blue::before  { background: var(--blue); }
.dash-tx-item.dash-tx-item--red::before   { background: var(--red); }
.dash-tx-item.dash-tx-item--amber::before { background: var(--amber); }
.dash-tx-item.dash-tx-item--soft::before  { background: var(--text-faint); }

.dash-tx-meta { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.dash-tx-type {
  flex: none;
  font-size: 0.66rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--gold-soft);
  padding: 0.14rem 0.5rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(245, 197, 24, 0.22);
  background: rgba(245, 197, 24, 0.06);
}
.dash-tx-type--blue  { color: #a8c8ff; border-color: rgba(96, 165, 250, 0.25); background: rgba(96, 165, 250, 0.07); }
.dash-tx-type--red   { color: #ffa3b2; border-color: rgba(239, 77, 100, 0.28); background: rgba(239, 77, 100, 0.08); }
.dash-tx-type--amber { color: #ffe08a; border-color: rgba(251, 191, 36, 0.24); background: rgba(251, 191, 36, 0.07); }
.dash-tx-type--green { color: #8ff0be; border-color: rgba(38, 208, 124, 0.24); background: rgba(38, 208, 124, 0.07); }

/* Amount becomes a soft tinted pill instead of a bare number. */
.dash-tx-val {
  flex: none;
  padding: 0.32rem 0.7rem;
  border-radius: var(--radius-full);
  background: var(--green-dim);
}
.dash-tx-val.text-red { background: var(--red-dim); }
.dash-tx-val > span { font-variant-numeric: tabular-nums; }

/* ---------- Daily reward polish ---------- */
.daily-card .daily-medal {
  width: 84px;
  height: 84px;
  border-radius: 22px;
}
.daily-card .daily-medal svg { width: 30px; height: 30px; }
.daily-card .daily-medal::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: inherit;
  border: 1px dashed rgba(255, 255, 255, 0.4);
  pointer-events: none;
}
.daily-card .daily-amount { font-size: 2.05rem; filter: drop-shadow(0 2px 14px rgba(245, 197, 24, 0.35)); }
.daily-card .daily-streak {
  color: #ffd7a8;
  border-color: rgba(255, 129, 53, 0.35);
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.16), rgba(245, 197, 24, 0.1));
}
.daily-card .daily-streak svg { color: #ff9558; }

.daily-card .cycle-cell { height: 52px; border-radius: 14px; }
.daily-card .cycle-cell.is-today {
  animation: cycle-glow 2.2s ease-in-out infinite;
}
@keyframes cycle-glow {
  0%, 100% { box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.12); }
  50% { box-shadow: 0 0 0 5px rgba(245, 197, 24, 0.28); }
}

.daily-card .btn-primary.btn-lg {
  background: var(--gold-grad);
  box-shadow: 0 10px 26px rgba(245, 197, 24, 0.28), var(--glow-gold);
}
.daily-card .btn-primary.btn-lg:hover { transform: translateY(-2px); }

.daily-card.is-claimed .daily-medal { filter: saturate(0.45) brightness(0.85); }
.daily-card.is-claimed::after { opacity: 0.4; }

/* ============================== Dashboard v3 � ring level banner, streak rail, timeline ============================== */
.lvl-card { padding: 1.15rem 1.35rem; }
.lvlr-card {
  background:
    radial-gradient(460px 220px at 0% 0%, rgba(245, 197, 24, 0.12), transparent 62%),
    radial-gradient(360px 200px at 100% 120%, rgba(139, 92, 246, 0.07), transparent 60%),
    linear-gradient(115deg, var(--bg-card-2) 0%, var(--bg-card) 70%);
  border-color: rgba(245, 197, 24, 0.18);
  overflow: hidden;
}
.lvlr-card::after {
  content: ""; position: absolute; right: -70px; top: -80px; width: 240px; height: 240px;
  border-radius: 50%; background: radial-gradient(circle, rgba(245, 197, 24, 0.14), transparent 70%); pointer-events: none;
}
.lvlr-ring { --p: 0; width: 108px; height: 108px; flex: none; border-radius: 50%; position: relative;
  background: conic-gradient(var(--gold) calc(var(--p) * 1%), rgba(255, 255, 255, 0.07) 0);
  transition: filter 0.4s ease, background 0.7s var(--ease); }
.lvlr-card:hover .lvlr-ring { filter: drop-shadow(0 0 14px rgba(245, 197, 24, 0.3)); }
.lvlr-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(245, 197, 24, 0.22); }
.lvlr-ring-in { position: absolute; inset: 8px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: linear-gradient(180deg, var(--bg-card-2), var(--bg-card)); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.lvlr-ring-k { font-size: 0.52rem; font-weight: 900; letter-spacing: 0.18em; color: var(--gold); }
.lvlr-ring-n { font-size: 1.45rem; font-weight: 900; line-height: 1; color: var(--text); }
.lvlr-ring-pct { font-size: 0.56rem; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.lvlr-info { flex: 1; min-width: 0; position: relative; z-index: 1; }
.lvlr-title { margin: 0 0 0.15rem; font-size: 1.12rem; font-weight: 800; letter-spacing: -0.01em; }
.lvlr-desc { margin: 0 0 0.65rem; font-size: 0.8rem; color: var(--text-soft); max-width: 58ch; }
.lvlr-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.lvlr-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.32rem 0.7rem; border-radius: var(--radius-full);
  font-size: 0.75rem; font-weight: 700; color: var(--gold); background: rgba(245, 197, 24, 0.08); border: 1px solid rgba(245, 197, 24, 0.24); }
.lvlr-chip svg { flex: none; }
.lvlr-chip-ghost { color: var(--text-soft); background: rgba(255, 255, 255, 0.035); border-color: var(--border); }
.lvlr-cta { flex: none; align-self: center; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.55rem 1.05rem; border-radius: var(--radius-full);
  border: 1px solid rgba(245, 197, 24, 0.3); color: var(--gold); font-weight: 700; position: relative; z-index: 1; transition: background 0.25s ease; }
.lvlr-cta:hover { background: rgba(245, 197, 24, 0.09); color: var(--gold); }

.daily-medal { border-radius: 50%; width: 74px; height: 74px; gap: 2px; }
.daily-medal::after { border-radius: 50%; }
.daily-rail { position: relative; display: flex; justify-content: space-between; margin: 1.15rem 4px 0.3rem; }
.rail-line { position: absolute; left: 18px; right: 18px; top: 50%; height: 3px; transform: translateY(-50%);
  border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; }
.rail-line span { display: block; height: 100%; background: var(--gold-grad); box-shadow: 0 0 8px rgba(245, 197, 24, 0.4); border-radius: inherit; transition: width 0.7s var(--ease); }
.rail-node { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-card-2); border: 1.5px solid var(--border-strong); color: var(--text-muted); font-weight: 800;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease, color 0.25s ease; }
.rail-node.is-filled { background: var(--gold-grad); border-color: transparent; color: #17140a;
  box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.16), 0 4px 12px -4px rgba(245, 197, 24, 0.5); }
.rail-node.is-today { border-color: var(--gold); color: var(--gold); }
.rail-node.is-today:not(.is-filled) { animation: rail-pulse 1.8s ease-in-out infinite; }
.rail-num { font-size: 0.72rem; }
.rail-now { position: absolute; top: 2px; right: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px rgba(245, 197, 24, 0.9); }
.daily-rail-note { text-align: center; margin: 0.55rem 0 0.9rem; font-size: 0.76rem; color: var(--text-muted); }
@keyframes rail-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.12); } 50% { box-shadow: 0 0 0 6px rgba(245, 197, 24, 0.2); } }

.dash-tl { display: flex; flex-direction: column; }
.tl-item { position: relative; display: flex; align-items: center; gap: 0.8rem; padding: 0.55rem 0.2rem 0.55rem 0; }
.tl-item:not(:last-child)::before { content: ""; position: absolute; left: 16px; top: 40px; height: calc(100% - 28px); width: 2px;
  background: linear-gradient(180deg, rgba(245, 197, 24, 0.18), rgba(255, 255, 255, 0.04)); border-radius: 2px; }
.tl-dot { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid; transition: transform 0.2s ease; }
.tl-item:hover .tl-dot { transform: scale(1.08); }
.tl-dot .act-svg { width: 14px; height: 14px; }
.tl-dot.dash-tx-t-gold  { color: var(--gold);      background: rgba(245, 197, 24, 0.09); border-color: rgba(245, 197, 24, 0.35); }
.tl-dot.dash-tx-t-green { color: var(--green);     background: var(--green-dim);         border-color: rgba(38, 208, 124, 0.35); }
.tl-dot.dash-tx-t-blue  { color: var(--blue);      background: var(--blue-dim);          border-color: rgba(96, 165, 250, 0.35); }
.tl-dot.dash-tx-t-red   { color: var(--red-soft);  background: var(--red-dim);           border-color: rgba(239, 77, 100, 0.35); }
.tl-dot.dash-tx-t-amber { color: var(--amber);     background: rgba(251, 191, 36, 0.09); border-color: rgba(251, 191, 36, 0.32); }
.tl-dot.dash-tx-t-soft  { color: var(--text-soft); background: rgba(255, 255, 255, 0.04); border-color: var(--border-strong); }
.tl-meta { display: flex; align-items: center; gap: 0.45rem; min-width: 0; margin-top: 0.15rem; }
.tl-item .dash-tx-val { flex: none; margin-left: auto; }
.tl-item .dash-tx-type { font-size: 0.62rem; padding: 0.12rem 0.45rem; }

@media (max-width: 640px) {
  .lvlr-card { flex-wrap: wrap; }
  .lvlr-ring { margin-inline: auto; }
  .lvlr-info { flex: 1 1 100%; }
  .lvlr-cta { width: 100%; justify-content: center; }
  .rail-node { width: 30px; height: 30px; }
  .rail-line { left: 15px; right: 15px; height: 2.5px; }
  .daily-medal { width: 64px; height: 64px; }
}