@import url("site-typography.php");
/* ============================================================
   KnownBoost – Neumorphism + Skeuomorphism Design System
   FIXED: contrast, focus rings, mobile nav, dashboard mobile,
          spinner animation, SVG icon support
   ============================================================ */

:root {
  --bg: #1a1d2e;
  --bg2: #1e2235;
  --bg3: #222640;
  --surface: #242840;
  --surface2: #2a2f4a;
  --surface3: #303560;

  --neu-shadow-dark:  #11131f;
  --neu-shadow-light: #2d3255;

  --gold:    #f5c842;
  --gold2:   #e8a800;
  --gold-glow: rgba(245,200,66,0.18);

  --accent:  #7c6af7;
  --accent2: #5c4bd4;
  --green:   #2ecc71;
  --red:     #e74c3c;
  --orange:  #e67e22;
  --blue:    #3498db;

  --text:      #e8eaf6;
  --text2:     #aab3d4;   /* FIXED: was #9ba3c7 */
  --text3:     #8890b8;   /* FIXED: was #5c6490 — now passes 4.5:1 */

  --border:    rgba(255,255,255,0.06);
  --border2:   rgba(255,255,255,0.12);

  --radius:    14px;
  --radius-sm: 8px;
  --radius-lg: 22px;

  --transition: 0.22s cubic-bezier(.4,0,.2,1);
  --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  /* Hard safety net: no single element (a too-wide flex row, an unbounded
     fixed-position panel, etc.) can ever force the whole page to scroll
     horizontally on mobile. This clips rather than allows runaway overflow. */
  overflow-x: hidden;
  max-width: 100%;
}
body {
  overflow-x: hidden;
  max-width: 100%;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
}

/* ── Spinner animation ──────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── Focus rings (FIXED) ────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* ── Neumorphism ────────────────────────────────────────── */
.neu {
  background: var(--surface);
  box-shadow: 6px 6px 16px var(--neu-shadow-dark), -4px -4px 12px var(--neu-shadow-light);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.neu-inset {
  background: var(--bg2);
  box-shadow: inset 4px 4px 10px var(--neu-shadow-dark), inset -3px -3px 8px var(--neu-shadow-light);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.neu-lg {
  background: var(--surface);
  box-shadow: 10px 10px 28px var(--neu-shadow-dark), -6px -6px 20px var(--neu-shadow-light);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

/* ── Skeuomorphic Card ──────────────────────────────────── */
.card-sku {
  background: linear-gradient(145deg, var(--surface2) 0%, var(--surface) 60%, #1e2035 100%);
  border: 1px solid var(--border2);
  border-top-color: rgba(255,255,255,0.18);
  border-left-color: rgba(255,255,255,0.10);
  border-radius: var(--radius);
  box-shadow: 0 2px 0 rgba(255,255,255,0.04) inset, 0 -1px 0 rgba(0,0,0,0.5) inset,
              6px 8px 24px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.04);
  position: relative; overflow: hidden;
}
.card-sku::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
}

/* ── SVG Icon system ────────────────────────────────────── */
.gv-icon {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; vertical-align: middle;
}
.gv-icon svg { display: block; }

/* ── Gold Button ────────────────────────────────────────── */
.btn-gold {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 24px;
  background: linear-gradient(145deg, #f5d060, #e8a800, #c87f00);
  color: #1a1200; font-weight: 700; font-size: 14px;
  border: none; border-radius: var(--radius-sm);
  cursor: pointer; text-decoration: none;
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 -1px 0 rgba(0,0,0,0.4) inset,
              0 4px 14px rgba(200,127,0,0.45), 0 1px 3px rgba(0,0,0,0.5);
  transition: var(--transition);
  position: relative; overflow: hidden; letter-spacing: 0.3px;
  touch-action: manipulation;
}
.btn-gold::before {
  content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.4s;
}
.btn-gold:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(200,127,0,0.6), 0 1px 3px rgba(0,0,0,0.5); }
.btn-gold:hover::before { left: 100%; }
.btn-gold:active { transform: translateY(1px); box-shadow: 0 2px 8px rgba(200,127,0,0.4); }
.btn-gold:disabled { opacity: 0.65; cursor: not-allowed; transform: none; }

/* ── Accent Button ──────────────────────────────────────── */
.btn-accent {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 11px 24px;
  background: linear-gradient(145deg, #8f7ef9, #7c6af7, #5c4bd4);
  color: #fff; font-weight: 600; font-size: 14px;
  border: none; border-radius: var(--radius-sm);
  cursor: pointer; text-decoration: none;
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 4px 16px rgba(92,75,212,0.5);
  transition: var(--transition);
  touch-action: manipulation;
}
.btn-accent:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(92,75,212,0.65); }
.btn-accent:active { transform: translateY(1px); }
.btn-accent:disabled { opacity: 0.65; cursor: not-allowed; transform: none; }

/* ── Ghost Button ───────────────────────────────────────── */
.btn-ghost {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 22px; background: transparent;
  color: var(--text2); font-weight: 500; font-size: 14px;
  border: 1px solid var(--border2); border-radius: var(--radius-sm);
  cursor: pointer; text-decoration: none; transition: var(--transition);
  touch-action: manipulation;
}
.btn-ghost:hover { background: var(--surface2); color: var(--text); border-color: var(--accent); }
.btn-ghost:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Spinner button state ───────────────────────────────── */
.btn-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn-loading::after {
  content: '';
  position: absolute; inset: 0; margin: auto;
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.btn-gold.btn-loading::after { border-top-color: #1a1200; border-color: rgba(26,18,0,0.25); }

/* ── Forms ──────────────────────────────────────────────── */
.form-group { margin-bottom: 18px; }
.form-label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--text2); margin-bottom: 7px;
  letter-spacing: 0.5px; text-transform: uppercase;
}
.form-control {
  width: 100%; padding: 12px 16px;
  background: var(--bg2); color: var(--text);
  border: 1px solid var(--border2); border-radius: var(--radius-sm);
  font-size: 15px; /* FIXED: min 15px to prevent iOS zoom */
  font-family: var(--font); outline: none; transition: var(--transition);
  box-shadow: inset 2px 2px 6px var(--neu-shadow-dark), inset -1px -1px 4px var(--neu-shadow-light);
  touch-action: manipulation;
}
.form-control:focus {
  border-color: var(--accent);
  box-shadow: inset 2px 2px 6px var(--neu-shadow-dark), 0 0 0 3px rgba(124,106,247,0.3);
  outline: none;
}
.form-control::placeholder { color: var(--text3); }
select.form-control {
  cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239ba3c7' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
}
textarea.form-control { resize: vertical; min-height: 100px; }

/* ── Layout ─────────────────────────────────────────────── */
.container { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.container-narrow { max-width: 760px; margin: 0 auto; padding: 0 20px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

@media(max-width:540px){ .grid-2{ grid-template-columns:1fr; } }

/* ── Navbar ─────────────────────────────────────────────── */
.navbar {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(26,29,46,0.94);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border2);
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
.navbar-inner {
  display: flex; align-items: center; gap: 20px;
  height: 64px; padding: 0 24px; max-width: 1240px; margin: 0 auto;
}
.navbar-logo {
  display: flex; align-items: center; gap: 10px;
  font-size: 20px; font-weight: 800; text-decoration: none;
  background: linear-gradient(135deg, var(--gold), var(--accent));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  flex-shrink: 0;
}
.navbar-logo svg { flex-shrink: 0; }
.navbar-nav { display: flex; align-items: center; gap: 4px; flex: 1; }
.navbar-nav a {
  padding: 8px 13px; font-size: 13px; font-weight: 500;
  color: var(--text2); text-decoration: none; border-radius: var(--radius-sm);
  transition: var(--transition); white-space: nowrap; min-height: 44px;
  display: flex; align-items: center;
}
.navbar-nav a:hover, .navbar-nav a.active { color: var(--text); background: var(--surface2); }
.navbar-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.navbar-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--gold));
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700; color: #fff;
  cursor: pointer; border: 2px solid var(--border2);
  text-decoration: none; min-width: 40px;
}
.nav-notif {
  position: relative; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface2); border-radius: 50%;
  color: var(--text2); cursor: pointer; text-decoration: none;
  transition: var(--transition);
}
.nav-notif:hover { background: var(--surface3); color: var(--text); }
.notif-dot {
  position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--red); border: 2px solid var(--bg);
}

/* ── Hamburger (FIXED - mobile nav) ────────────────────── */
.hamburger {
  display: none;
  background: none; border: 1px solid var(--border2);
  color: var(--text2); cursor: pointer; padding: 8px;
  border-radius: var(--radius-sm); transition: var(--transition);
  min-width: 44px; min-height: 44px;
  align-items: center; justify-content: center;
}
.hamburger:hover { background: var(--surface2); color: var(--text); }

@media(max-width:768px) {
  .hamburger { display: flex; }
  .navbar-nav {
    display: none;
    position: fixed;
    top: 64px; left: 0; right: 0; bottom: 0;
    background: var(--bg2);
    flex-direction: column;
    padding: 16px;
    gap: 4px;
    z-index: 999;
    overflow-y: auto;
    border-top: 1px solid var(--border2);
  }
  .navbar-nav.open { display: flex; }
  .navbar-nav a {
    padding: 14px 16px; font-size: 15px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
  }
  .navbar-nav a:hover { border-color: var(--border2); }
}

/* ── Hero ───────────────────────────────────────────────── */
.hero {
  padding: 80px 0 60px; text-align: center;
  background:
    radial-gradient(ellipse 70% 50% at 50% -10%, rgba(124,106,247,0.18), transparent),
    radial-gradient(ellipse 40% 30% at 80% 90%, rgba(245,200,66,0.10), transparent);
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface2); border: 1px solid var(--border2);
  padding: 5px 14px; border-radius: 20px;
  font-size: 12px; font-weight: 600; color: var(--gold);
  letter-spacing: 1px; text-transform: uppercase; margin-bottom: 22px;
}
.hero h1 {
  font-size: clamp(28px,5vw,60px); font-weight: 900;
  line-height: 1.1; margin-bottom: 18px;
}
.hero h1 span {
  background: linear-gradient(135deg, var(--gold), var(--accent));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero p { font-size: 17px; color: var(--text2); max-width: 540px; margin: 0 auto 32px; line-height: 1.7; }
.hero-actions { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.hero-stats { display: flex; align-items: center; justify-content: center; gap: 32px; margin-top: 48px; flex-wrap: wrap; }
.hero-stat { text-align: center; }
.hero-stat-num { font-size: 28px; font-weight: 800; color: var(--gold); }
.hero-stat-label { font-size: 12px; color: var(--text2); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }

/* ── Game Category Tabs ─────────────────────────────────── */
.cat-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 24px; scrollbar-width: none; }
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tab {
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 9px 16px; font-size: 13px; font-weight: 500; min-height: 44px;
  background: var(--surface); border: 1px solid var(--border2);
  color: var(--text2); border-radius: 20px; cursor: pointer;
  transition: var(--transition); text-decoration: none;
}
.cat-tab:hover, .cat-tab.active {
  background: var(--accent); border-color: var(--accent);
  color: #fff; box-shadow: 0 4px 14px rgba(92,75,212,0.4);
}

/* ── Listing Card ───────────────────────────────────────── */

/* ── Section ────────────────────────────────────────────── */
.section { padding: 48px 0; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.section-title { font-size: 22px; font-weight: 800; }
.section-title span { background: linear-gradient(135deg, var(--gold), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.section-link { font-size: 13px; color: var(--accent); text-decoration: none; font-weight: 500; display: flex; align-items: center; gap: 4px; }
.section-link:hover { color: #a59bf9; }

/* ── Search Bar ─────────────────────────────────────────── */
.search-bar {
  display: flex; align-items: center;
  background: var(--surface); border: 1px solid var(--border2);
  border-radius: var(--radius);
  box-shadow: 4px 4px 14px var(--neu-shadow-dark), -2px -2px 8px var(--neu-shadow-light);
  overflow: hidden; max-width: 580px; width: 100%;
}
.search-input {
  flex: 1; padding: 14px 18px; background: transparent;
  border: none; outline: none; color: var(--text); font-size: 15px; font-family: var(--font);
}
.search-input::placeholder { color: var(--text3); }
.search-select {
  padding: 14px 12px; background: var(--surface2);
  border: none; border-left: 1px solid var(--border2); border-right: 1px solid var(--border2);
  color: var(--text2); font-size: 13px; outline: none; cursor: pointer; font-family: var(--font);
}
.search-btn {
  padding: 14px 22px; background: linear-gradient(145deg, var(--gold), var(--gold2));
  border: none; color: #1a1200; font-weight: 700; font-size: 14px;
  cursor: pointer; transition: var(--transition); min-width: 54px; min-height: 54px;
  display: flex; align-items: center; justify-content: center;
}
.search-btn:hover { background: linear-gradient(145deg, #ffd85c, var(--gold)); }

/* ── Stat Cards ─────────────────────────────────────────── */
.stat-card {
  background: linear-gradient(145deg, var(--surface2), var(--surface));
  border: 1px solid var(--border2); border-top-color: rgba(255,255,255,0.12);
  border-radius: var(--radius); padding: 22px;
  box-shadow: 4px 6px 18px var(--neu-shadow-dark), -2px -2px 8px var(--neu-shadow-light);
  position: relative; overflow: hidden;
  animation: fadeIn 0.4s ease both;
}
.stat-card::after {
  content:''; position:absolute; top:0; right:0; width:80px; height:80px;
  background: radial-gradient(circle, var(--glow-color,rgba(124,106,247,0.12)), transparent 70%);
}
.stat-card-icon { margin-bottom: 10px; display: flex; align-items: center; }
.stat-card-num { font-size: 28px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.stat-card-label { font-size: 13px; color: var(--text2); margin-top: 3px; }
.stat-card-change { font-size: 12px; margin-top: 8px; font-weight: 600; }
.change-up { color: var(--green); }
.change-down { color: var(--red); }

/* ── Tags / Pills ───────────────────────────────────────── */
.tag {
  display: inline-block; padding: 4px 10px;
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: 20px; font-size: 12px; font-weight: 500; color: var(--text2);
}

/* ── Table ──────────────────────────────────────────────── */
/* .dash-main and .table-wrap both use overflow (hidden/auto) — per the CSS
   spec that strips a flex/block item's automatic min-width protection,
   letting it shrink toward 0 on a narrow window. Without a floor, the table
   (default table-layout:auto, no white-space:nowrap on cell text) gets
   squeezed so hard the browser resorts to breaking usernames/emails at
   ANY character just to fit — the single-letter vertical stack. min-width
   here restores a sane floor so .table-wrap's overflow-x:auto does what it
   was meant to: scroll horizontally, never crush the content vertically. */
.table-wrap { overflow-x: auto; border-radius: var(--radius); }
.gv-table { width: 100%; min-width: 720px; border-collapse: collapse; }
.gv-table th {
  padding: 13px 16px; text-align: left; font-size: 12px; font-weight: 700;
  color: var(--text3); text-transform: uppercase; letter-spacing: 0.6px;
  background: var(--bg2); border-bottom: 1px solid var(--border2);
}
.gv-table td {
  padding: 14px 16px; font-size: 13px; color: var(--text2);
  border-bottom: 1px solid var(--border); transition: background var(--transition);
}
.gv-table tbody tr:hover td { background: var(--surface2); }
.gv-table tbody tr:last-child td { border-bottom: none; }

/* ── Alerts ─────────────────────────────────────────────── */
.alert {
  padding: 12px 16px; border-radius: var(--radius-sm);
  font-size: 14px; margin-bottom: 16px;
  display: flex; align-items: flex-start; gap: 10px;
}
.alert-success { background: rgba(46,204,113,0.12); border: 1px solid rgba(46,204,113,0.25); color: #4ade80; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.alert-error   { background: rgba(231,76,60,0.12);  border: 1px solid rgba(231,76,60,0.25);  color: #f87171; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.alert-info    { background: rgba(52,152,219,0.12); border: 1px solid rgba(52,152,219,0.25); color: #60a5fa; }
.alert-warning { background: rgba(230,126,34,0.12); border: 1px solid rgba(230,126,34,0.25); color: #fbbf24; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* ── Auth Pages ─────────────────────────────────────────── */
.auth-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background:
    radial-gradient(ellipse 60% 40% at 20% 80%, rgba(92,75,212,0.15), transparent),
    radial-gradient(ellipse 40% 30% at 80% 20%, rgba(245,200,66,0.08), transparent),
    var(--bg);
}
.auth-card {
  width: 100%; max-width: 440px; padding: 40px 36px;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
}
.auth-logo { text-align: center; margin-bottom: 28px; }
.auth-logo a {
  font-size: 26px; font-weight: 900; text-decoration: none;
  background: linear-gradient(135deg, var(--gold), var(--accent));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.auth-title { font-size: 22px; font-weight: 800; margin-bottom: 6px; }
.auth-sub { color: var(--text2); font-size: 14px; margin-bottom: 28px; }
.auth-footer { text-align: center; margin-top: 20px; font-size: 14px; color: var(--text2); }
.auth-footer a { color: var(--accent); text-decoration: none; font-weight: 600; }
.auth-footer a:hover { color: #a59bf9; }
.divider-text {
  display: flex; align-items: center; gap: 12px;
  color: var(--text3); font-size: 13px; margin: 20px 0;
}
.divider-text::before, .divider-text::after { content: ''; flex: 1; height: 1px; background: var(--border2); }

/* ── Dashboard Layout ───────────────────────────────────── */
.dash-layout { display: flex; min-height: 100vh; }
.dash-sidebar {
  width: 250px; flex-shrink: 0;
  background: var(--bg2); border-right: 1px solid var(--border2);
  padding: 24px 0;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
/* min-width:0 is essential here: .dash-main is a flex item AND sets
   overflow-x:hidden. That combination otherwise lets it collapse below its
   content's natural width, which is what let tables/text inside it get
   crushed into vertical single-character stacks on narrow screens. The 0
   floor keeps it honest; inner components (.gv-table etc.) carry their own
   min-widths so they scroll instead of crush. */
.dash-main { flex: 1; min-width: 0; padding: 32px; overflow-x: hidden; }
.sidebar-logo {
  padding: 0 20px 24px; font-size: 18px; font-weight: 900;
  background: linear-gradient(135deg, var(--gold), var(--accent));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  border-bottom: 1px solid var(--border2); margin-bottom: 16px;
}
.sidebar-nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 20px; color: var(--text2); text-decoration: none;
  font-size: 14px; font-weight: 500; transition: var(--transition);
  border-right: 2px solid transparent; min-height: 44px;
}
.sidebar-nav-item svg { opacity: 0.7; flex-shrink: 0; }
.sidebar-nav-item:hover { background: var(--surface); color: var(--text); }
.sidebar-nav-item.active { color: var(--accent); background: rgba(124,106,247,0.08); border-right-color: var(--accent); }
.sidebar-nav-item.active svg { opacity: 1; }
.sidebar-section { padding: 10px 20px 5px; font-size: 11px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: 0.8px; margin-top: 10px; }
.sidebar-user { margin: 16px 14px 0; padding: 14px; background: var(--surface); border: 1px solid var(--border2); border-radius: var(--radius-sm); }
.sidebar-user-info { display: flex; align-items: center; gap: 10px; }
.sidebar-user-name { font-size: 13px; font-weight: 600; }
.sidebar-user-role { font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.5px; }
.sidebar-user-balance { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text2); }
.sidebar-user-balance strong { color: var(--gold); font-size: 15px; }

/* ── Dashboard mobile sidebar — slide-in drawer (was a cramped
   icon-only horizontal strip with no way to see full nav labels
   or open a proper menu; now matches the public navbar's pattern) ── */
.dash-mobile-topbar { display: none; }
.dash-sidebar-backdrop { display: none; }

@media(max-width:768px) {
  .dash-layout { flex-direction: column; }

  /* Fixed top bar with hamburger trigger — always visible on mobile */
  .dash-mobile-topbar {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 1500;
    background: var(--bg2); border-bottom: 1px solid var(--border2);
    padding: 12px 16px; height: 56px;
  }
  .dash-mobile-topbar .brand {
    font-size: 15px; font-weight: 800;
    background: linear-gradient(135deg, var(--gold), var(--accent));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    text-decoration: none;
  }
  .dash-hamburger-btn {
    background: none; border: 1px solid var(--border2); color: var(--text2);
    cursor: pointer; padding: 8px; border-radius: var(--radius-sm);
    min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center;
  }
  .dash-hamburger-btn:hover { background: var(--surface2); color: var(--text); }

  /* Sidebar becomes an off-canvas drawer */
  .dash-sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; width: 280px; max-width: 84vw;
    flex-direction: column; display: flex;
    transform: translateX(-100%); transition: transform .25s ease;
    z-index: 2000; overflow-y: auto;
    border-right: 1px solid var(--border2);
    padding: 0;
  }
  .dash-sidebar.open { transform: translateX(0); }
  .dash-sidebar-backdrop {
    display: none;
    position: fixed; inset: 0; background: rgba(0,0,0,.55);
    z-index: 1999;
  }
  .dash-sidebar-backdrop.open { display: block; }

  /* Restore full labeled nav inside the drawer (was hidden entirely before) */
  .sidebar-logo, .sidebar-section, .sidebar-user { display: block; }
  .sidebar-nav-item {
    flex-direction: row; padding: 12px 20px; gap: 11px;
    font-size: 14px; white-space: normal;
    border-right: 2px solid transparent; border-bottom: none;
    min-height: 44px; min-width: 0; text-align: left;
    justify-content: flex-start;
  }
  .sidebar-nav-item.active { border-bottom-color: transparent; border-right-color: var(--accent); }
  .dash-main { padding: 16px; }
}

/* ── Page Header ────────────────────────────────────────── */
.page-header { margin-bottom: 28px; }
.page-header h1 { font-size: 24px; font-weight: 800; margin-bottom: 4px; }
.page-header p { color: var(--text2); font-size: 14px; }
.breadcrumb { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text3); margin-bottom: 8px; flex-wrap: wrap; }
.breadcrumb a { color: var(--text2); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }

/* ── Status Badges ──────────────────────────────────────── */
.status { display: inline-block; padding: 3px 9px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.status-pending   { background: rgba(230,126,34,0.15); color: #fbbf24; }
.status-active    { background: rgba(46,204,113,0.15); color: #4ade80; }
.status-completed { background: rgba(52,152,219,0.15); color: #60a5fa; }
.status-cancelled { background: rgba(231,76,60,0.15);  color: #f87171; }
.status-disputed  { background: rgba(245,200,66,0.15); color: var(--gold); }
.status-paid      { background: rgba(46,204,113,0.15); color: #4ade80; }

/* ── Modal ──────────────────────────────────────────────── */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.65); backdrop-filter: blur(4px);
  z-index: 2000; align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal { width: 100%; max-width: 500px; margin: 20px; max-height: 90vh; overflow-y: auto; padding: 32px; }
.modal-title { font-size: 20px; font-weight: 800; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; }
.modal-close { background: none; border: none; color: var(--text2); cursor: pointer; font-size: 22px; line-height: 1; padding: 8px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.modal-close:hover { color: var(--text); }

/* ── Pagination ─────────────────────────────────────────── */
.pagination { display: flex; align-items: center; gap: 6px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
.page-btn {
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border2);
  border-radius: var(--radius-sm); color: var(--text2);
  text-decoration: none; font-size: 13px; font-weight: 500; transition: var(--transition);
}
.page-btn:hover, .page-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── Footer ─────────────────────────────────────────────── */
.footer { background: var(--bg2); border-top: 1px solid var(--border2); padding: 40px 0 24px; margin-top: 60px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 32px; }
@media(max-width:800px){ .footer-grid { grid-template-columns: 1fr 1fr; } }
@media(max-width:500px){ .footer-grid { grid-template-columns: 1fr; } }
.footer-brand { font-size: 18px; font-weight: 900; background: linear-gradient(135deg, var(--gold), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 12px; }
.footer-desc { font-size: 13px; color: var(--text3); line-height: 1.7; }
.footer-col h4 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text2); margin-bottom: 12px; }
.footer-col a { display: block; font-size: 13px; color: var(--text3); text-decoration: none; margin-bottom: 8px; transition: var(--transition); }
.footer-col a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid var(--border); padding-top: 20px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--text3); flex-wrap: wrap; gap: 10px; }

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── Utilities ──────────────────────────────────────────── */
.text-gold   { color: var(--gold); }
.text-accent { color: var(--accent); }
.text-green  { color: var(--green); }
.text-red    { color: var(--red); }
.text-muted  { color: var(--text2); }
.text-dim    { color: var(--text3); }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.mt-8  { margin-top: 8px; }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-8  { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }
.gap-10 { gap: 10px; }
.flex  { display: flex; }
.flex-center { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.text-center { text-align: center; }
.w-full { width: 100%; }
.hidden { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   FULL RESPONSIVE — Mobile First
   ═══════════════════════════════════════════════════════════ */

/* Container fluid on mobile */
@media(max-width:768px){
  .container { padding-left:16px; padding-right:16px; }

  /* Navbar */
  .navbar-inner { padding:0 16px; }
  .navbar-logo span { font-size:16px; }

  /* Hero */
  .hero { padding:40px 0 32px; }
  .hero h1 { font-size:clamp(28px,7vw,52px); }
  .hero p { font-size:14px; }
  .hero-stats { grid-template-columns: repeat(2,1fr); gap:12px; }
  .search-bar { flex-direction:column; border-radius:12px; }
  .search-input,.search-select { width:100%; border:none; border-bottom:1px solid var(--border2); }
  .search-btn { width:100%; border-radius:0 0 12px 12px; padding:13px; }

  /* Game category tabs - horizontal scroll */
  .cat-tabs { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .cat-tab { flex-shrink:0; }

  /* Listings grid */

  /* Listing card */
  
  
  

  /* Dashboard layout */
  /* .dash-sidebar mobile drawer behavior is defined earlier in this file —
     intentionally not overridden here to avoid re-flattening it back to a
     static full-width block, which was silently cancelling the drawer. */
  .dash-main { padding:16px; }

  /* Single listing detail page — was a fixed 1fr/340px grid that didn't
     collapse on mobile, forcing the purchase sidebar to squeeze into an
     unusably narrow column alongside the main content. */
  .listing-detail-layout { grid-template-columns: 1fr !important; }
  .listing-detail-layout > div:last-child > .card-sku { position: static !important; }

  /* Shared fix for every fixed-pixel-sidebar layout across the site (order
     chat, boost marketplace, support tickets, seller profile, etc.) — all
     used a hardcoded e.g. "1fr 340px" or "260px 1fr" grid with zero mobile
     fallback, which is the same overflow bug the listing page had. */
  .two-col-sidebar { grid-template-columns: 1fr !important; }
  .mobile-sticky-off { position: static !important; }

  /* Safety net: catch any remaining inline 3-column grids and fixed-pixel
     sidebar splits that weren't individually class-tagged (forms, admin
     detail pages, etc.) — same overflow bug, applied broadly via attribute
     selector so nothing is missed. */
  div[style*="grid-template-columns:1fr 1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
  div[style*="grid-template-columns:repeat(6"],
  div[style*="grid-template-columns: repeat(6"] { grid-template-columns: repeat(2, 1fr) !important; }

  /* Hardcoded 3/4-column stat grids (admin dashboard, settings toggles) —
     were forcing 4 equal columns on any screen width with no fallback,
     guaranteed overflow on mobile. */
  .stat-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .stat-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }

  /* Browse page */
  .browse-layout { grid-template-columns:1fr !important; }

  /* Section */
  .section { padding:32px 0; }
  .section-title { font-size:18px; }

  /* Auth card */
  .auth-card { padding:24px 16px; }

  /* Neu cards */
  .card-sku,.neu,.neu-lg { padding:16px; }

  /* Page header */
  .page-header { flex-direction:column; align-items:flex-start; gap:10px; }
  .flex-between { flex-direction:column; align-items:flex-start; gap:10px; }
}
@media(max-width:420px) {
  .stat-grid-4, .stat-grid-3 { grid-template-columns: 1fr !important; }
}

@media(max-width:480px){
  
  
  
  

  .hero-actions { flex-direction:column; gap:10px; }
  .hero-actions .btn-gold,.hero-actions .btn-ghost { width:100%; justify-content:center; }
}

@media(max-width:380px){
}

/* Tablet */
@media(min-width:769px) and (max-width:1024px){
  .dash-sidebar { width:200px; }
}

/* Smooth theme transition */
*, *::before, *::after {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.1s ease;
}
/* But not on transforms/shadows (causes jank) */

/* ── Browse page responsive sidebar ─────────────────────── */
.browse-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: start;
}
@media(max-width:900px){
  .browse-layout {
    grid-template-columns: 1fr;
  }
  .browse-layout > .neu:first-child {
    position: static !important;
  }
}

/* ── Light mode CSS vars & overrides ─────────────────────── */
[data-theme="light"] {
  --neu-shadow-dark: rgba(0,0,0,0.12);
  --neu-shadow-light: rgba(255,255,255,0.95);
  --bg: #f0f2f8;
  --bg2: #e8eaf0;
  --bg3: #e0e2ea;
  --surface: #ffffff;
  --surface2: #f4f5fb;
  --surface3: #eaecf6;
  --border: rgba(0,0,0,0.08);
  --border2: rgba(0,0,0,0.06);
  --text: #1a1d2e;
  --text2: #4a4f6a;
  --text3: #8890b8;
}
[data-theme="light"] 
[data-theme="light"] .hero { background: linear-gradient(135deg, #eef0f8 0%, #e8eaf4 100%); }
[data-theme="light"] .navbar { background: rgba(255,255,255,0.97); border-bottom: 1px solid rgba(0,0,0,0.08); }
[data-theme="light"] .dash-sidebar { background: #ffffff; border-right: 1px solid rgba(0,0,0,0.08); }
[data-theme="light"] .neu, [data-theme="light"] .neu-lg { background: #ffffff; box-shadow: 4px 4px 12px rgba(0,0,0,0.08), -2px -2px 8px rgba(255,255,255,0.9); }
[data-theme="light"] .card-sku { background: #ffffff; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .footer { background: #ffffff; border-top: 1px solid rgba(0,0,0,0.08); }
[data-theme="light"] .gv-table thead th { background: #f4f5fb; color: #4a4f6a; }
[data-theme="light"] .gv-table tbody tr:hover td { background: #f0f2f8; }
[data-theme="light"] .profile-dropdown { background: #ffffff; }
[data-theme="light"] .chat-bubble-them { background: #f0f2f8; color: #1a1d2e; }

/* ── Notification dropdown ─────────────────────────────── */
.notif-wrap { position: relative; display: inline-flex; align-items: center; }
.notif-dropdown {
  position: fixed;
  top: 60px;
  right: 80px;
  width: 340px;
  max-width: calc(100vw - 16px);
  max-height: 480px;
  overflow-y: auto;
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0,0,0,.6);
  z-index: 800;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .2s, transform .2s, visibility .2s;
  pointer-events: none;
}
@media (max-width: 480px) {
  /* Fixed 340px + 80px-from-right doesn't fit on phones — anchor to both
     edges instead so it's always fully within the viewport. */
  .notif-dropdown {
    left: 8px;
    right: 8px;
    width: auto;
    max-width: none;
    top: 56px;
  }
}
.notif-wrap.open .notif-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: all;
}
.notif-header { padding: 14px 16px; border-bottom: 1px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.notif-header h4 { font-size:14px; font-weight:700; margin:0; }
.notif-item { display:flex; align-items:flex-start; gap:10px; padding:12px 16px; border-bottom:1px solid var(--border); text-decoration:none; color:var(--text); transition:background .15s; }
.notif-item:hover { background: var(--surface2); }
.notif-item.unread { background: rgba(124,106,247,.06); }
.notif-item:last-child { border-bottom: none; }
.notif-dot-sm { width:8px; height:8px; border-radius:50%; background:var(--accent); flex-shrink:0; margin-top:5px; }
.notif-text { font-size:12px; color:var(--text2); line-height:1.5; }
.notif-time { font-size:10px; color:var(--text3); margin-top:3px; }
.notif-footer { padding:10px 16px; text-align:center; border-top:1px solid var(--border); }
.notif-footer a { font-size:12px; color:var(--accent); text-decoration:none; font-weight:600; }

/* Card always fills full grid cell */



/* ═══════════════════════════════════════════════════════
   GV CARD — horizontal Eldorado-style listing card
   ═══════════════════════════════════════════════════════ */
.gv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--surface2, #22263c);
  border: 1px solid var(--border2, rgba(255,255,255,.08));
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  height: 100%;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.gv-card:hover {
  transform: translateY(-3px);
  border-color: rgba(124,106,247,.4);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
}
.gv-card__featured {
  position: absolute;
  top: 10px; right: 10px;
  font-size: 10px; font-weight: 700;
  color: var(--gold, #f5c842);
  background: rgba(0,0,0,.55);
  padding: 3px 8px; border-radius: 6px;
  display: flex; align-items: center; gap: 3px;
  z-index: 2;
}

/* Main row: text info left, larger centered thumbnail right */
.gv-card__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.gv-card__info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gv-card__meta {
  font-size: 11px;
  color: var(--text3, #8890b8);
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.gv-card__dot { margin: 0 5px; opacity: .5; }
.gv-card__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text, #e8eaf6);
  line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Thumbnail — bigger, centered, always square */
.gv-card__thumb {
  flex-shrink: 0;
  width: 92px;
  height: 92px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--surface3, #2a2f4a), var(--bg2, #1a1d2e));
  display: flex;
  align-items: center;
  justify-content: center;
}
.gv-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gv-card__thumb-fallback {
  display: flex; align-items: center; justify-content: center;
}

.gv-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border, rgba(255,255,255,.06));
}
.gv-card__seller {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text2, #9ba3c7);
  min-width: 0;
}
.gv-card__avatar {
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.gv-card__seller-name {
  font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gv-card__rating {
  font-size: 12px; font-weight: 700; color: var(--text, #e8eaf6);
  flex-shrink: 0;
}
.gv-card__rating span { color: var(--text3); font-weight: 400; }

.gv-card__pricebar {
  display: flex; align-items: center; justify-content: space-between;
}
.gv-card__price {
  font-size: 19px; font-weight: 800;
  color: var(--gold, #f5c842);
  font-variant-numeric: tabular-nums;
}
.gv-card__delivery {
  font-size: 11px; color: var(--green, #2ecc71);
  display: flex; align-items: center; gap: 4px;
}

[data-theme="light"] .gv-card { background: #fff; border-color: rgba(0,0,0,.08); }
[data-theme="light"] .gv-card__title { color: #1a1d2e; }

/* ── Grid: 3 across for horizontal cards, fills left-to-right ── */
.grid-4, .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 1100px) { .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .grid-4, .grid-3 { grid-template-columns: 1fr; gap: 12px; } }


/* ============================================================
   V24.4.53 — admin-controlled typography and readability
   ============================================================ */
html{font-size:calc(16px * var(--kb-text-scale,1.10))}
body,button,input,select,textarea,optgroup{font-family:var(--kb-font-stack,"Segoe UI",system-ui,sans-serif)!important}
body{font-size:1rem!important;line-height:1.62!important;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
p,li,dd,dt,td,th,label,.gv-subtle,.breadcrumb{line-height:1.58}
.form-control,input:not([type=checkbox]):not([type=radio]):not([type=color]),select,textarea{font-size:.92rem!important;line-height:1.45!important}
.form-label{font-size:.88rem!important;line-height:1.4!important}
.btn-gold,.btn-accent,.btn-ghost,button{font-size:.88rem}
.alert{font-size:.9rem!important;line-height:1.55!important}
.page-header h1,.gv-page-head h1{font-size:clamp(1.7rem,3vw,2.35rem)!important;line-height:1.25!important;padding-top:2px}
.page-header p,.gv-page-head p{font-size:.98rem!important;line-height:1.65!important}
.stat-card-label,.stat-card-change,.gv-subtle{font-size:.82rem!important}
small{font-size:.78rem}

.page-admin .sidebar-nav-item,.page-dashboard .sidebar-nav-item,.page-support .sidebar-nav-item{font-size:.88rem!important}
.page-admin .sidebar-section,.page-dashboard .sidebar-section,.page-support .sidebar-section{font-size:.72rem!important}
.page-admin .kb-sidebar-search input{font-size:.86rem!important}
.dashboard-market-header,.kb-market-topbar,.navbar{font-size:.9rem}
.dash-main,.gv-page,.kb36-shell{font-size:1rem}
@media(max-width:700px){
  html{font-size:calc(15.5px * var(--kb-text-scale,1.10))}
  body{line-height:1.58!important}
  .form-control,input:not([type=checkbox]):not([type=radio]):not([type=color]),select,textarea{font-size:16px!important}
  .btn-gold,.btn-accent,.btn-ghost{min-height:42px}
}

/* V24.4.53 — common fixed-size text repair across public, Dashboard and Admin */
small{font-size:.78rem!important;line-height:1.5!important}
.authv2-form-title{font-size:clamp(1.55rem,3vw,2rem)!important;line-height:1.2!important}
.authv2-form-sub,.authv2-switch,.authv2-terms{font-size:.9rem!important;line-height:1.55!important}
.authv2-field label,.authv2-tab,.authv2-link{font-size:.88rem!important}
.gv-card__meta,.gv-card__delivery{font-size:.78rem!important}
.gv-card__title{font-size:.94rem!important;line-height:1.42!important}
.gv-card__seller,.gv-card__rating{font-size:.8rem!important}
.kb36-card p,.kb36-section-head p,.kb50-other-card p{font-size:.9rem;line-height:1.58}
:where(.dash-main,.dash-sidebar,.gv-page,.kb36-dashboard) [style*="font-size:10px"]{font-size:.74rem!important}
:where(.dash-main,.dash-sidebar,.gv-page,.kb36-dashboard) [style*="font-size:11px"]{font-size:.78rem!important}
:where(.dash-main,.dash-sidebar,.gv-page,.kb36-dashboard) [style*="font-size:12px"]{font-size:.82rem!important}
:where(.dash-main,.dash-sidebar,.gv-page,.kb36-dashboard) [style*="font-size:13px"]{font-size:.88rem!important}
.page-admin .settings-section h3{font-size:1rem!important}
.page-admin .toggle-row label{font-size:.88rem!important}
@media(max-width:700px){
 .authv2-form-sub,.authv2-switch,.authv2-terms{font-size:.92rem!important}
 .gv-card__title{font-size:1rem!important}
}

/* ═══════════════════════════════════════════════════════════════════════════
   UI POLISH v24.6 — price field · dashboard alignment · notifications · messages
   All selectors are scoped so they only affect their own pages. Additive only.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Listing price field: adornments never overlap the value, and the native
      number spinners (which collided with the "USD" label) are removed. ───── */
.gv-price-field{position:relative;display:block}
.gv-price-field .gv-price-input{padding-left:32px !important;padding-right:56px !important;text-align:left}
.gv-price-field-sym{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--text2);font-weight:700;font-size:15px;line-height:1;pointer-events:none}
.gv-price-field-cur{position:absolute;right:13px;top:50%;transform:translateY(-50%);color:var(--text3);font-weight:700;font-size:12px;letter-spacing:.04em;line-height:1;pointer-events:none}
.gv-price-input::-webkit-outer-spin-button,
.gv-price-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.gv-price-input{-moz-appearance:textfield;appearance:textfield}

/* ── Dashboard: put every card's icon in a consistent chip on the same line
      as its heading, so the icons line up across the whole dashboard. ─────── */
.dash-main .stat-card-icon{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;background:rgba(255,255,255,.045);border:1px solid var(--border);margin-bottom:12px}
.dash-main .stat-card-icon svg{display:block}
.dash-main .neu .flex-between{align-items:center}
.dash-main .neu .flex-between>div:last-child:has(>svg){width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;background:rgba(255,255,255,.045);border:1px solid var(--border);flex:0 0 auto}
.dash-main .neu .flex-between>div:last-child:has(>svg) svg{display:block}

/* ── Notifications: cleaner cards, a coloured icon chip, content on one line. ─ */
.kb47-notification-list .card-sku{border-radius:14px;align-items:center !important;transition:border-color .18s ease, transform .18s ease}
.kb47-notification-list .card-sku:hover{transform:translateY(-1px)}
.kb47-notification-list .card-sku>div:first-child{width:40px;height:40px;display:inline-flex !important;align-items:center;justify-content:center;border-radius:11px;background:rgba(243,189,69,.10);border:1px solid rgba(243,189,69,.22);margin-top:0 !important;flex:0 0 auto}
.kb47-notification-list .card-sku>div:first-child svg{display:block}

/* ── Messages: filter tabs become tidy pills with a count badge. ─────────── */
.msg-tab-btn{display:inline-flex;align-items:center;gap:7px;border-radius:999px}
.msg-tab-btn.active{background:var(--gold);color:#17120a;border-color:var(--gold)}
.msg-tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:rgba(255,255,255,.12);font-size:10px;font-weight:800;line-height:1}
.msg-tab-btn.active .msg-tab-count{background:rgba(0,0,0,.18)}
.inbox-row{align-items:center;transition:background .15s ease}

/* ═══════════════════════════════════════════════════════════════════════════
   DASHBOARD SECTIONS POLISH v24.6 — smoother cards, list rows, buttons.
   Scoped to .dash-main so it only touches the dashboard.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Stat cards: gradient surface, accent top-edge, hover lift */
.dash-main .stat-card{position:relative;overflow:hidden;border-radius:16px;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.dash-main .stat-card::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;background:linear-gradient(90deg,var(--gold),transparent);opacity:.6}
.dash-main .stat-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px -22px rgba(0,0,0,.7)}
.dash-main .stat-card-num{letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dash-main .stat-card-change a{color:var(--gold);text-decoration:none;font-weight:700}
.dash-main .stat-card-change a:hover{text-decoration:underline}

/* Section cards (.neu): consistent radius + gentle hover */
.dash-main .neu{border-radius:16px;transition:border-color .18s ease,box-shadow .18s ease}
.dash-main .neu:hover{border-color:color-mix(in srgb,var(--gold) 16%,var(--border,rgba(255,255,255,.06)))}
.dash-main .gv-eyebrow{color:var(--gold);font-weight:800;letter-spacing:.1em;text-transform:uppercase;font-size:10.5px}
.dash-main .neu h2,.dash-main .neu h3{letter-spacing:-.01em}

/* Inset list rows (recent orders / notifications previews): smooth hover + accent */
.dash-main .neu-inset{border-radius:11px;border:1px solid var(--border);background:var(--surface2,rgba(255,255,255,.02));transition:transform .15s ease,border-color .15s ease,background .15s ease}
.dash-main a.neu-inset:hover{transform:translateX(2px);border-color:color-mix(in srgb,var(--gold) 32%,var(--border));background:color-mix(in srgb,var(--gold) 5%,var(--surface2,transparent))}

/* Buttons: smoother interaction */
.dash-main .btn-gold,.dash-main .btn-ghost{transition:transform .12s ease,filter .15s ease,border-color .15s ease,background .15s ease}
.dash-main .btn-gold:hover{filter:brightness(1.05)}
.dash-main .btn-gold:active,.dash-main .btn-ghost:active{transform:translateY(1px)}
.dash-main .section-link{color:var(--gold);text-decoration:none;font-weight:700;transition:opacity .15s ease}
.dash-main .section-link:hover{opacity:.8}

/* Empty states: centered + softer */
.dash-main .gv-empty{text-align:center;color:var(--text2);border:1px dashed var(--border2,var(--border));border-radius:12px}

/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN PROFESSIONAL POLISH v24.6 — consistent framing, headers, cards, tables
   Scoped to .page-admin so it only affects the admin area. Additive.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Consistent content width + padding so pages don't feel spread out */
.page-admin .dash-main{max-width:1320px;margin:0 auto;padding:26px 28px 60px}
@media(max-width:900px){.page-admin .dash-main{padding:18px 16px 48px}}

/* Page header: aligned breadcrumb → title → description with even rhythm */
.page-admin .page-header{margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--border)}
.page-admin .page-header .breadcrumb{font-size:12px;color:var(--text3);margin-bottom:8px}
.page-admin .page-header .breadcrumb a{color:var(--text2);text-decoration:none}
.page-admin .page-header .breadcrumb a:hover{color:var(--gold)}
.page-admin .page-header h1{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:850;letter-spacing:-.02em;margin:0}
.page-admin .page-header h1 svg{flex:0 0 auto}
.page-admin .page-header p{color:var(--text2);font-size:13px;margin:8px 0 0;max-width:70ch}
.page-admin .page-header.flex-between{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* Cards: one consistent radius + calm hover across every admin card */
.page-admin .neu{border-radius:14px;border:1px solid var(--border2);transition:border-color .16s ease,box-shadow .16s ease}
.page-admin .neu:hover{border-color:color-mix(in srgb,var(--gold) 14%,var(--border2))}

/* Toolbars / filter rows align on one baseline */
.page-admin .flex-between{align-items:center}
.page-admin .admin-toolbar,.page-admin .filter-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* Tables: aligned, readable, hoverable — conservative so layouts don't break */
.page-admin table{width:100%;border-collapse:collapse}
.page-admin thead th{text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text3);padding:11px 12px;border-bottom:1px solid var(--border2);white-space:nowrap}
.page-admin tbody td{padding:11px 12px;border-bottom:1px solid var(--border);font-size:12.5px;color:var(--text);vertical-align:middle}
.page-admin tbody tr{transition:background .13s ease}
.page-admin tbody tr:hover{background:color-mix(in srgb,var(--gold) 4%,transparent)}
.page-admin tbody tr:last-child td{border-bottom:0}

/* Status pills consistent */
.page-admin .badge,.page-admin .status-chip,.page-admin .pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:10.5px;font-weight:800;letter-spacing:.02em}

/* Buttons: smooth, aligned */
.page-admin .btn-gold,.page-admin .btn-ghost,.page-admin .btn-accent,.page-admin .danger-btn{display:inline-flex;align-items:center;gap:7px;transition:transform .12s ease,filter .15s ease,border-color .15s ease,background .15s ease}
.page-admin .btn-gold:hover{filter:brightness(1.05)}
.page-admin .btn-gold:active,.page-admin .btn-ghost:active,.page-admin .danger-btn:active{transform:translateY(1px)}

/* Alerts consistent width + spacing */
.page-admin .alert{border-radius:11px;margin-bottom:18px;font-size:13px}

/* Empty states calm + centered */
.page-admin .gv-empty,.page-admin .empty-state{text-align:center;color:var(--text2);border:1px dashed var(--border2);border-radius:12px;padding:32px}

@supports not (color: color-mix(in srgb, red, blue)){
  .page-admin .neu:hover{border-color:var(--border2)}
  .page-admin tbody tr:hover{background:rgba(243,189,69,.04)}
}

/* ── Reviews and sentiment controls (v24.13) ─────────────────────────────── */
.gv-review-list{display:grid;gap:12px}
.gv-review-list--compact{gap:8px;margin-top:10px}.gv-review-list--compact .gv-review-card{padding:10px 11px!important;border-radius:11px!important}.gv-review-list--compact .gv-review-avatar{width:29px;height:29px;font-size:11px}.gv-review-list--compact .gv-review-person{gap:8px}.gv-review-list--compact .gv-review-person strong{font-size:11.5px!important}.gv-review-list--compact .gv-review-person small{font-size:9.5px}.gv-review-list--compact .gv-review-sentiment{padding:3px 6px 3px 4px;font-size:9.5px}.gv-review-list--compact .gv-review-sentiment__icon{width:20px;height:20px}.gv-review-list--compact .gv-review-copy{margin:8px 0 0!important;padding:8px 9px;font-size:11px!important}
.gv-review-card{position:relative;overflow:hidden;padding:15px 16px!important;border:1px solid var(--border2,rgba(255,255,255,.1))!important;border-radius:14px!important;background:linear-gradient(145deg,var(--surface2,rgba(255,255,255,.035)),color-mix(in srgb,var(--surface2,rgba(255,255,255,.035)) 74%,transparent))!important;box-shadow:0 10px 24px rgba(0,0,0,.08);transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.gv-review-card::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(180deg,var(--gold),color-mix(in srgb,var(--accent) 70%,var(--gold)));opacity:.8}
.gv-review-card:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--gold) 28%,var(--border2))!important;box-shadow:0 14px 28px rgba(0,0,0,.12)}
.gv-review-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;margin:0!important}
.gv-review-person{display:flex;align-items:center;gap:10px;min-width:0}
.gv-review-avatar{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:50%;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 78%,#fff),color-mix(in srgb,var(--gold) 55%,var(--accent)));color:#fff;font-size:13px;font-weight:900;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}
.gv-review-person>div{min-width:0;display:grid;gap:2px}
.gv-review-person strong{font-size:12.5px!important;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gv-review-person small{font-size:10.5px;color:var(--text3);font-weight:600}
.gv-review-status{display:flex;align-items:flex-end;flex-direction:column;gap:5px;flex:0 0 auto}
.gv-review-status time{font-size:10px;color:var(--text3);white-space:nowrap}
.gv-review-copy{margin:12px 0 0 46px!important;padding:10px 12px;border-radius:10px;background:color-mix(in srgb,var(--surface3,rgba(255,255,255,.05)) 76%,transparent);border:1px solid color-mix(in srgb,var(--border2) 72%,transparent);color:var(--text2)!important;font-size:12px!important;line-height:1.6!important}
.gv-review-sentiment{display:inline-flex;align-items:center;gap:6px;padding:4px 8px 4px 5px;border-radius:999px;font-size:10.5px;font-weight:850;letter-spacing:.01em;white-space:nowrap}
.gv-review-sentiment__icon{width:23px;height:23px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:currentColor;color:inherit}
.gv-review-sentiment__icon svg{color:#fff!important;width:12px!important;height:12px!important}
.gv-review-sentiment--positive{color:var(--green);background:rgba(46,204,113,.10);border:1px solid rgba(46,204,113,.22)}
.gv-review-sentiment--negative{color:var(--red);background:rgba(231,76,60,.10);border:1px solid rgba(231,76,60,.22)}
.gv-review-overview{gap:15px!important}
.gv-review-score{min-width:72px;width:auto!important;height:58px;display:flex;align-items:center;justify-content:center;padding:0 12px;border-radius:16px;background:linear-gradient(135deg,rgba(46,204,113,.16),rgba(46,204,113,.06));border:1px solid rgba(46,204,113,.24);color:var(--green);font-size:25px!important}
.gv-review-overview-title{display:flex;align-items:center;gap:7px;color:var(--text);font-size:12px;font-weight:800}
.gv-review-overview-icon{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;background:rgba(46,204,113,.12);color:var(--green)}
.gv-review-composer{padding:14px;border:1px solid var(--border2);border-radius:14px;background:linear-gradient(145deg,var(--surface2),color-mix(in srgb,var(--surface2) 76%,transparent))}
.gv-review-composer__title{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.gv-review-composer__title>div{display:grid;gap:2px}
.gv-review-composer__title strong{font-size:13px;color:var(--text)}
.gv-review-composer__title small{font-size:10.5px;color:var(--text3)}
.gv-review-composer__badge{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:rgba(245,200,66,.11);color:var(--gold);border:1px solid rgba(245,200,66,.18)}
.gv-thumb-pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}
.gv-thumb-btn{min-width:0;display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:10px 11px;border-radius:12px;border:1px solid var(--border2,rgba(255,255,255,.12));background:var(--surface2,rgba(255,255,255,.03));color:var(--text2);text-align:left;cursor:pointer;transition:transform .15s ease,background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease}
.gv-thumb-btn:hover{color:var(--text);transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 36%,var(--border2))}
.gv-thumb-btn>span:last-child{min-width:0;display:grid;gap:1px}
.gv-thumb-btn strong{font-size:12px;line-height:1.2}
.gv-thumb-btn small{font-size:9.5px;color:var(--text3);font-weight:600;line-height:1.25}
.gv-thumb-btn__icon{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:11px;background:var(--surface3);color:var(--text2);transition:.15s}
.gv-thumb-btn--pos.active{background:rgba(46,204,113,.12);border-color:rgba(46,204,113,.48);color:var(--green);box-shadow:0 0 0 2px rgba(46,204,113,.06)}
.gv-thumb-btn--pos.active .gv-thumb-btn__icon{background:var(--green);color:#fff}
.gv-thumb-btn--neg.active{background:rgba(231,76,60,.12);border-color:rgba(231,76,60,.48);color:var(--red);box-shadow:0 0 0 2px rgba(231,76,60,.06)}
.gv-thumb-btn--neg.active .gv-thumb-btn__icon{background:var(--red);color:#fff}
.gv-review-comment{margin-bottom:10px!important;font-size:12.5px!important;min-height:78px!important}
.gv-review-submitted{padding:14px;border-radius:13px;background:linear-gradient(145deg,var(--surface2),color-mix(in srgb,var(--surface2) 76%,transparent));border:1px solid var(--border2)}
.gv-review-submitted__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.gv-review-submitted__head>div{display:grid;gap:2px}.gv-review-submitted__head small{font-size:10px;color:var(--text3)}.gv-review-submitted__head strong{font-size:12.5px;color:var(--text)}
.gv-review-submitted p{margin:11px 0 0;padding-top:10px;border-top:1px solid var(--border);font-size:12px;color:var(--text2);line-height:1.55}
.gv-thumbs{display:inline-flex;align-items:center;gap:5px;font-weight:700}
.gv-thumbs-pos{display:inline-flex;align-items:center;gap:4px;color:var(--green)}
.gv-thumbs-pos svg{flex:0 0 auto}
.gv-thumbs-count{color:var(--text3);font-weight:600}
.gv-thumbs--new{color:var(--text3);font-weight:600}
.gv-thumb-mark{display:inline-flex;align-items:center;gap:4px;font-weight:700;font-size:12px}.gv-thumb-mark--pos{color:var(--green)}.gv-thumb-mark--neg{color:var(--red)}
@media(max-width:620px){.gv-review-head{align-items:flex-start!important}.gv-review-status{align-items:flex-end}.gv-review-copy{margin-left:0!important}.gv-thumb-pick{grid-template-columns:1fr}.gv-review-card{padding:13px!important}.gv-review-avatar{width:32px;height:32px}.gv-review-score{min-width:64px;height:52px;font-size:22px!important}}

/* V24.26 — boost-order cancellation text and mobile layout repair */
.page-boost-order .kb58-booster-cancel-card{
  padding:16px;
  margin-bottom:12px;
  border:1px solid rgba(231,76,60,.28);
  overflow:hidden;
}
.page-boost-order .kb58-booster-cancel-toggle,
.page-boost-order .kb58-booster-cancel-submit{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:0;
  min-height:42px;
  height:auto;
  padding:10px 12px;
  color:var(--red);
  border-color:var(--red);
  line-height:1.35;
  text-align:center;
  white-space:normal;
  overflow-wrap:anywhere;
}
.page-boost-order .kb58-booster-cancel-toggle span,
.page-boost-order .kb58-booster-cancel-submit span{min-width:0}
.page-boost-order .kb58-booster-cancel-panel{margin-top:14px;min-width:0}
.page-boost-order .kb58-booster-cancel-panel[hidden]{display:none!important}
.page-boost-order .kb58-booster-cancel-copy{
  margin:0 0 12px;
  color:var(--text2);
  font-size:12px;
  line-height:1.65;
  overflow-wrap:anywhere;
}
.page-boost-order .kb58-booster-cancel-copy strong{color:var(--text);white-space:nowrap}
.page-boost-order .kb58-booster-cancel-reason{margin-bottom:11px;min-width:0}
.page-boost-order .kb58-booster-cancel-reason .form-label{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  line-height:1.4;
  white-space:normal;
}
.page-boost-order .kb58-booster-cancel-reason .form-label span{color:var(--text3);font-weight:500}
.page-boost-order .kb58-booster-cancel-reason textarea{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  min-height:94px;
  box-sizing:border-box;
  resize:vertical;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:normal;
  line-height:1.5;
}
@media(max-width:700px){
  .page-boost-order .kb58-booster-cancel-card{padding:13px}
  .page-boost-order .kb58-booster-cancel-toggle,
  .page-boost-order .kb58-booster-cancel-submit{min-height:46px;padding:11px 12px;font-size:13px}
  .page-boost-order .kb58-booster-cancel-copy{font-size:13px}
}

/* ── Global overflow safety net (V25 UI hardening) ──────────────────────────
   Marketplace content is user-generated: usernames, listing titles, game
   names and boost types can be long, unbroken, or contain a giant no-space
   string. Without a wrap rule those can punch out of their card/heading and
   force horizontal scroll or clip. These rules let such text wrap gracefully
   instead of breaking layout. Scoped to headings and known content wrappers
   so it never interferes with buttons, badges, or single-line UI chrome. */
h1, h2, h3, h4, .page-header h1, .card-title, .listing-title, .gv-card-title {
  overflow-wrap: anywhere;
}
.card, .neu, .stat-card, .market-card, .gv-card { min-width: 0; }