@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

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

  :root {
    --bg-primary: #0a0f1e;
    --bg-secondary: #0d1526;
    --bg-card: #111827;
    --bg-card-hover: #151f30;
    --blue-accent: #3b82f6;
    --blue-bright: #2563eb;
    --blue-glow: #60a5fa;
    --cyan: #06b6d4;
    --pink-accent: #ec4899;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border: #1e2d45;
    --border-light: #243349;
    --red-val: #ff4655;
    --red-dark: #1a0a0a;
    --orange-bo: #f97316;
    --orange-dark: #0f0a02;
  }

  html { scroll-behavior: smooth; }

  body {
    font-family: 'Inter', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
  }

  /* ── NAV ── */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 48px; height: 60px;
    background: rgba(10, 15, 30, 0.92);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
  }
  .nav-logo {
    display: flex; align-items: center; gap: 12px;
    font-weight: 700; font-size: 15px; color: var(--text-primary);
    text-decoration: none;
    min-width: 0;
  }
  .nav-logo-text {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
  }
  .nav-logo-muted {
    font-weight: 300;
    color: var(--text-secondary);
  }
  .brand-logo {
    display: block;
    object-fit: cover;
    object-position: center;
    flex: 0 0 auto;
    border-radius: 7px;
    background: rgba(15,23,42,0.62);
    box-shadow: 0 0 18px rgba(59,130,246,0.18);
  }
  .brand-logo--nav {
    width: 78px;
    height: 34px;
  }
  .brand-logo--footer {
    width: 96px;
    height: 42px;
  }
  .brand-logo--auth {
    width: 104px;
    height: 46px;
  }
  .nav-links { display: flex; gap: 32px; list-style: none; }
  .nav-links a { color: var(--text-secondary); text-decoration: none; font-size: 14px; font-weight: 500; transition: color .2s; }
  .nav-links a:hover { color: var(--text-primary); }
  .nav-actions { display: flex; align-items: center; gap: 12px; }
  .nav-user {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    max-width: 220px;
    padding: 4px 10px 4px 5px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 999px;
    background: rgba(255,255,255,0.055);
    color: var(--text-primary);
    font: inherit;
    cursor: pointer;
    transition: background .2s, border-color .2s, transform .15s;
  }
  .nav-user:hover {
    transform: translateY(-1px);
    border-color: rgba(96,165,250,0.34);
    background: rgba(59,130,246,0.12);
  }
  .nav-user__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    background:
      linear-gradient(135deg, rgba(59,130,246,0.9), rgba(6,182,212,0.82));
    background-size: cover;
    background-position: center;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .2px;
    box-shadow: 0 0 18px rgba(59,130,246,0.22);
  }
  .nav-user__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 800;
  }
  .btn-ghost { background: none; border: none; color: var(--text-secondary); font-size: 14px; font-weight: 500; cursor: pointer; padding: 8px 16px; border-radius: 6px; transition: color .2s; }
  .btn-ghost:hover { color: var(--text-primary); }
  .btn-primary { background: var(--blue-accent); color: white; border: none; padding: 8px 20px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .2s, transform .1s; }
  .btn-primary:hover { background: var(--blue-bright); transform: translateY(-1px); }
  .btn-post {
    background: rgba(16,185,129,0.16);
    border: 1px solid rgba(16,185,129,0.36);
    color: #6ee7b7;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: background .2s, transform .1s, border-color .2s;
  }
  .btn-post:hover {
    background: rgba(16,185,129,0.24);
    border-color: rgba(16,185,129,0.52);
    transform: translateY(-1px);
  }

  /* ── HERO ── */
  .hero {
    min-height: 100vh; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 80px 24px 40px;
    background: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(37,99,235,0.15) 0%, transparent 70%),
                var(--bg-primary);
    text-align: center;
  }
  .hero-badge {
    display: inline-block; background: rgba(59,130,246,0.15); border: 1px solid rgba(59,130,246,0.3);
    color: var(--blue-glow); font-size: 12px; font-weight: 600; padding: 5px 14px;
    border-radius: 20px; margin-bottom: 28px; letter-spacing: .5px;
  }
  .hero h1 {
    font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 800; line-height: 1.1;
    color: var(--text-primary); max-width: 700px; margin: 0 auto 20px;
  }
  .hero p {
    color: var(--text-secondary); font-size: 16px; max-width: 520px; margin: 0 auto 36px;
  }
  .hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 56px; }
  .btn-hero-primary {
    background: var(--blue-accent); color: white; border: none; padding: 14px 28px;
    border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer;
    transition: background .2s, transform .15s, box-shadow .2s;
    box-shadow: 0 4px 20px rgba(59,130,246,0.4);
  }
  .btn-hero-primary:hover { background: var(--blue-bright); transform: translateY(-2px); box-shadow: 0 6px 28px rgba(59,130,246,0.5); }
  .btn-hero-secondary {
    background: transparent; color: var(--text-primary);
    border: 1px solid var(--border-light); padding: 14px 28px;
    border-radius: 10px; font-size: 15px; font-weight: 600; cursor: pointer;
    transition: border-color .2s, background .2s;
  }
  .btn-hero-secondary:hover { border-color: var(--blue-accent); background: rgba(59,130,246,0.06); }

  .hero-stats {
    display: flex; gap: 0; border: 1px solid var(--border);
    border-radius: 12px; overflow: hidden; background: var(--bg-card);
  }
  .hero-stat {
    padding: 20px 40px; text-align: center;
    border-right: 1px solid var(--border);
  }
  .hero-stat:last-child { border-right: none; }
  .hero-stat .num { font-size: 24px; font-weight: 800; color: var(--text-primary); }
  .hero-stat .label { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

  /* ── GAMES SECTION ── */
  .section { padding: 80px 48px; }
  .section-header { text-align: center; margin-bottom: 48px; }
  .section-header h2 { font-size: 2rem; font-weight: 800; margin-bottom: 10px; }
  .section-header p { color: var(--text-secondary); font-size: 15px; }

  .games-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 20px; max-width: 1100px; margin: 0 auto;
  }
  .game-card {
    position: relative; border-radius: 16px; overflow: hidden;
    aspect-ratio: 4/3; cursor: pointer;
    transition: transform .25s, box-shadow .25s;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  }
  .game-card:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 16px 40px rgba(0,0,0,0.6); }
  .game-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .game-card-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
  }
  .game-card-info {
    position: absolute; bottom: 0; left: 0; right: 0; padding: 20px;
  }
  .game-card-info h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 6px; }
  .game-card-meta { display: flex; gap: 16px; align-items: center; }
  .game-card-meta span { font-size: 12px; color: rgba(255,255,255,0.75); display: flex; align-items: center; gap: 5px; }
  .dot-active { width: 7px; height: 7px; background: #22c55e; border-radius: 50%; display: inline-block; }

  /* ── WHY SECTION ── */
  .why-section {
    background: var(--bg-secondary); padding: 80px 48px;
  }
  .features-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 20px; max-width: 1100px; margin: 0 auto;
  }
  .feature-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 14px; padding: 28px;
    transition: border-color .2s, transform .2s;
  }
  .feature-card:hover { border-color: var(--blue-accent); transform: translateY(-3px); }
  .feature-icon {
    width: 44px; height: 44px; background: rgba(59,130,246,0.15);
    border-radius: 10px; display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px; font-size: 20px;
    border: 1px solid rgba(59,130,246,0.2);
  }
  .feature-card h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
  .feature-card p { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }

  /* ── CTA ── */
  .cta-section {
    padding: 80px 48px;
    background: var(--bg-primary);
  }
  .cta-box {
    max-width: 760px; margin: 0 auto; text-align: center;
    background: linear-gradient(135deg, #1a2540 0%, #0f1e3d 100%);
    border: 1px solid var(--border-light); border-radius: 20px;
    padding: 56px 48px;
  }
  .cta-box h2 { font-size: 2rem; font-weight: 800; margin-bottom: 12px; }
  .cta-box p { color: var(--text-secondary); font-size: 15px; margin-bottom: 36px; }
  .cta-buttons { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
  .btn-cta-player {
    background: var(--blue-accent); color: white; border: none;
    padding: 14px 28px; border-radius: 10px; font-size: 15px; font-weight: 600;
    cursor: pointer; transition: background .2s;
  }
  .btn-cta-player:hover { background: var(--blue-bright); }
  .btn-cta-team {
    background: var(--pink-accent); color: white; border: none;
    padding: 14px 28px; border-radius: 10px; font-size: 15px; font-weight: 600;
    cursor: pointer; transition: background .2s;
  }
  .btn-cta-team:hover { background: #db2777; }

  /* ── FOOTER ── */
  footer {
    background: var(--bg-secondary); border-top: 1px solid var(--border);
    padding: 56px 48px 32px;
  }
  .footer-grid {
    display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px; max-width: 1100px; margin: 0 auto 48px;
  }
  .footer-logo { display: inline-flex; }
  .footer-logo-text { font-weight: 700; font-size: 15px; }
  .footer-brand p { font-size: 13px; color: var(--text-secondary); margin-top: 12px; line-height: 1.6; }
  .footer-col h4 { font-size: 14px; font-weight: 600; margin-bottom: 16px; }
  .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
  .footer-col a { font-size: 13px; color: var(--text-secondary); text-decoration: none; transition: color .2s; }
  .footer-col a:hover { color: var(--text-primary); }
  .footer-bottom {
    border-top: 1px solid var(--border); padding-top: 24px;
    text-align: center; color: var(--text-muted); font-size: 13px;
    max-width: 1100px; margin: 0 auto;
  }

  /* Auth page */
  .auth-page {
    min-height: 100vh;
    padding: 88px 48px 56px;
    background:
      radial-gradient(circle at 18% 18%, rgba(59,130,246,0.18), transparent 30%),
      linear-gradient(135deg, #08101f 0%, #0a1020 52%, #120818 100%);
  }
  .auth-back {
    margin: 0 0 20px;
  }
  .auth-shell {
    display: grid;
    grid-template-columns: minmax(280px, 0.88fr) minmax(360px, 1.12fr);
    gap: 24px;
    max-width: 1120px;
    margin: 0 auto;
    align-items: stretch;
  }
  .auth-aside,
  .auth-panel {
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 16px;
    background: rgba(8,13,25,0.84);
    box-shadow: 0 24px 70px rgba(0,0,0,0.32);
  }
  .auth-aside {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 36px;
    padding: 34px;
    overflow: hidden;
    position: relative;
  }
  .auth-aside::after {
    content: "";
    position: absolute;
    inset: auto -80px -120px 26%;
    height: 260px;
    background: linear-gradient(120deg, rgba(6,182,212,0.18), rgba(236,72,153,0.12));
    transform: rotate(-8deg);
    pointer-events: none;
  }
  .auth-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
  }
  .auth-brand .brand-logo {
    box-shadow: 0 0 24px rgba(59,130,246,0.24);
  }
  .auth-aside h1 {
    max-width: 420px;
    font-size: clamp(2rem, 4vw, 3.15rem);
    line-height: 1.05;
    font-weight: 900;
    letter-spacing: 0;
  }
  .auth-aside p {
    max-width: 430px;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.7;
    margin-top: 18px;
  }
  .auth-benefits {
    display: grid;
    gap: 12px;
    position: relative;
    z-index: 1;
  }
  .auth-benefits div {
    padding: 15px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
  }
  .auth-benefits strong {
    display: block;
    font-size: 13px;
    margin-bottom: 3px;
  }
  .auth-benefits span {
    display: block;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.55;
  }
  .auth-panel {
    padding: 30px;
  }
  .auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 5px;
    margin-bottom: 28px;
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
  }
  .auth-tab {
    border: 0;
    border-radius: 8px;
    padding: 11px 12px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: background .2s, color .2s;
  }
  .auth-tab.active {
    background: var(--blue-accent);
    color: white;
  }
  .auth-form {
    display: grid;
    gap: 16px;
  }
  .auth-form[hidden] {
    display: none;
  }
  .auth-form-header {
    margin-bottom: 4px;
  }
  .auth-form-header h2 {
    font-size: 1.55rem;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 6px;
  }
  .auth-form-header p {
    color: var(--text-secondary);
    font-size: 13px;
  }
  .auth-google {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    background: #f8fafc;
    color: #111827;
    font: inherit;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    transition: transform .15s, box-shadow .2s, border-color .2s;
  }
  .auth-google:hover {
    transform: translateY(-1px);
    border-color: rgba(255,255,255,0.24);
    box-shadow: 0 14px 32px rgba(15,23,42,0.28);
  }
  .auth-google__mark {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(from -35deg, #4285f4 0 25%, #34a853 0 50%, #fbbc05 0 75%, #ea4335 0 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
  }
  .auth-separator {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
  }
  .auth-separator::before,
  .auth-separator::after {
    content: "";
    height: 1px;
    flex: 1;
    background: rgba(255,255,255,0.08);
  }
  .auth-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .auth-field {
    display: grid;
    gap: 7px;
  }
  .auth-field span,
  .auth-check span {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
  }
  .auth-field input,
  .auth-field select,
  .auth-field textarea {
    width: 100%;
    min-height: 46px;
    padding: 0 13px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    background: #060b15;
    color: var(--text-primary);
    font: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
  }
  .auth-field select {
    cursor: pointer;
  }
  .auth-field textarea {
    min-height: 108px;
    padding: 12px 13px;
    resize: vertical;
    line-height: 1.55;
  }
  .auth-field input:focus,
  .auth-field select:focus,
  .auth-field textarea:focus {
    border-color: var(--blue-accent);
    background: #050913;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.16);
  }
  .auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 2px;
  }
  .auth-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    min-width: 0;
  }
  .auth-check input {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: var(--blue-accent);
    flex: 0 0 auto;
  }
  .auth-check--terms {
    align-items: flex-start;
    padding: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    background: rgba(255,255,255,0.035);
  }
  .auth-link {
    border: 0;
    background: transparent;
    color: var(--blue-glow);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
  }
  .auth-submit {
    min-height: 48px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--blue-accent), #7c3aed);
    color: white;
    font: inherit;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    transition: transform .15s, box-shadow .2s;
    box-shadow: 0 14px 36px rgba(59,130,246,0.28);
  }
  .auth-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 18px 42px rgba(59,130,246,0.34);
  }
  .auth-status {
    min-height: 20px;
    margin-top: 14px;
    color: #34d399;
    font-size: 13px;
    font-weight: 700;
  }

  .profile-create-block {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(59,130,246,0.16);
    border-radius: 14px;
    background: rgba(59,130,246,0.045);
  }

  .profile-page {
    min-height: 100vh;
    padding: 88px 48px 56px;
    background:
      radial-gradient(circle at 16% 16%, rgba(59,130,246,0.18), transparent 30%),
      radial-gradient(circle at 84% 20%, rgba(124,58,237,0.14), transparent 28%),
      linear-gradient(135deg, #080f1f 0%, #0a1020 55%, #100719 100%);
  }

  .profile-back {
    margin: 0 0 20px;
  }

  .profile-shell {
    display: grid;
    grid-template-columns: minmax(260px, 0.82fr) minmax(420px, 1.18fr);
    gap: 24px;
    max-width: 1120px;
    margin: 0 auto;
    align-items: start;
  }

  .profile-card,
  .profile-editor {
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 16px;
    background: rgba(8,13,25,0.86);
    box-shadow: 0 24px 70px rgba(0,0,0,0.32);
  }

  .profile-card {
    display: grid;
    gap: 16px;
    justify-items: center;
    padding: 30px;
    text-align: center;
  }

  .profile-card h1 {
    font-size: 1.55rem;
    line-height: 1.2;
    font-weight: 900;
  }

  .profile-card p {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.65;
  }

  .profile-logout {
    width: 100%;
    min-height: 42px;
    margin-top: 4px;
    border: 1px solid rgba(248,113,113,0.28);
    border-radius: 10px;
    background: rgba(127,29,29,0.16);
    color: #fecaca;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    transition: background .2s, border-color .2s, transform .15s;
  }

  .profile-logout:hover {
    transform: translateY(-1px);
    border-color: rgba(248,113,113,0.44);
    background: rgba(127,29,29,0.24);
  }

  .profile-editor {
    display: grid;
    gap: 16px;
    padding: 30px;
  }

  .profile-listings-panel,
  .profile-teams-panel {
    grid-column: 1 / -1;
    display: grid;
    gap: 16px;
    padding: 24px;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 16px;
    background: rgba(8,13,25,0.86);
    box-shadow: 0 24px 70px rgba(0,0,0,0.28);
  }

  .profile-section-title--row {
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
  }

  .profile-listings-list {
    display: grid;
    gap: 12px;
  }

  .profile-teams-list {
    display: grid;
    gap: 14px;
  }

  .team-editor {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    background: rgba(255,255,255,0.035);
  }

  .team-editor[hidden] {
    display: none;
  }

  .team-slots-note {
    min-height: 34px;
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid rgba(94,234,212,0.18);
    border-radius: 8px;
    background: rgba(20,184,166,0.08);
    color: #ccfbf1;
    font-size: 12px;
    font-weight: 800;
  }

  .profile-listing-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    background: rgba(255,255,255,0.035);
  }

  .profile-listing-item__main {
    min-width: 0;
  }

  .profile-listing-item__main > span {
    display: inline-flex;
    margin-bottom: 6px;
    color: #5eead4;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .7px;
    text-transform: uppercase;
  }

  .profile-listing-item h3 {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 900;
    line-height: 1.35;
  }

  .profile-listing-item p {
    display: -webkit-box;
    margin-top: 6px;
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.55;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .profile-listing-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
  }

  .profile-listing-item__meta span {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(59,130,246,0.12);
    color: #bfdbfe;
    font-size: 10px;
    font-weight: 900;
  }

  .profile-listing-item__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
  }

  .profile-listing-action {
    min-height: 34px;
    border: 1px solid rgba(255,255,255,0.11);
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    color: var(--text-primary);
    padding: 8px 11px;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    transition: background .2s, border-color .2s, transform .15s;
  }

  .profile-listing-action:hover {
    transform: translateY(-1px);
    border-color: rgba(94,234,212,0.32);
    background: rgba(20,184,166,0.1);
  }

  .profile-listing-action--danger {
    border-color: rgba(248,113,113,0.28);
    background: rgba(127,29,29,0.16);
    color: #fecaca;
  }

  .profile-listing-action--danger:hover {
    border-color: rgba(248,113,113,0.44);
    background: rgba(127,29,29,0.24);
  }

  .profile-listing-action:disabled {
    cursor: not-allowed;
    opacity: .52;
    transform: none;
  }

  .profile-team-card {
    display: grid;
    gap: 14px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    background: rgba(255,255,255,0.035);
  }

  .profile-team-card__head,
  .public-team-card__top {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
  }

  .profile-team-card__head > div,
  .public-team-card__top > div {
    min-width: 0;
  }

  .profile-team-card__head span,
  .public-team-card__top span {
    display: inline-flex;
    margin-bottom: 6px;
    color: #5eead4;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .7px;
    text-transform: uppercase;
  }

  .profile-team-card h3,
  .public-team-card h3 {
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 900;
    line-height: 1.35;
  }

  .profile-team-card p,
  .public-team-card p {
    margin-top: 6px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.55;
  }

  .team-slot-summary,
  .team-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .team-slot-summary strong,
  .team-slot-summary span,
  .team-meta-row span {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
  }

  .team-slot-summary strong {
    background: rgba(20,184,166,0.14);
    color: #99f6e4;
  }

  .team-slot-summary span,
  .team-meta-row span {
    background: rgba(59,130,246,0.12);
    color: #bfdbfe;
  }

  .team-members-list {
    display: grid;
    gap: 8px;
  }

  .team-member-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    align-items: center;
    min-height: 38px;
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    background: rgba(8,13,25,0.54);
    color: var(--text-primary);
    font-size: 12px;
  }

  .team-member-row strong,
  .team-member-row em {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .team-member-row em {
    margin-top: 2px;
    color: var(--text-muted);
    font-style: normal;
    font-size: 11px;
  }

  .team-member-empty {
    padding: 10px;
    border: 1px dashed rgba(255,255,255,0.12);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 12px;
  }

  .team-member-form {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) auto;
    gap: 10px;
  }

  .team-member-form select,
  .team-member-form input {
    min-height: 38px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    background: rgba(8,13,25,0.72);
    color: var(--text-primary);
    padding: 9px 10px;
    font: inherit;
    font-size: 12px;
  }

  .profile-avatar-large,
  .profile-photo-preview {
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(59,130,246,0.28);
    background: linear-gradient(135deg, rgba(59,130,246,0.34), rgba(124,58,237,0.24));
    color: white;
    font-weight: 900;
    text-transform: uppercase;
    background-size: cover;
    background-position: center;
  }

  .profile-avatar-large {
    width: 132px;
    height: 132px;
    border-radius: 24px;
    font-size: 28px;
    box-shadow: 0 18px 50px rgba(59,130,246,0.22);
  }

  .profile-photo-row {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .profile-photo-preview {
    width: 78px;
    height: 78px;
    border-radius: 18px;
    flex: 0 0 auto;
    font-size: 18px;
  }

  .profile-photo-upload {
    display: grid;
    gap: 7px;
    min-width: 0;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 800;
  }

  .profile-photo-upload input {
    width: 100%;
    color: var(--text-secondary);
    font-size: 12px;
  }

  .profile-section-title {
    display: grid;
    gap: 3px;
  }

  .profile-section-title strong {
    font-size: 13px;
    color: var(--text-primary);
  }

  .profile-section-title span {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.55;
  }

  .profile-links-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .profile-linked-list {
    display: grid;
    gap: 8px;
    width: 100%;
  }

  .profile-linked-list span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 9px;
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
  }

  /* ══════════════════════════════════
     VALORANT PAGE
  ══════════════════════════════════ */
  .support-page,
  .admin-page {
    min-height: 100vh;
    padding: 88px 48px 56px;
    background:
      radial-gradient(circle at 14% 14%, rgba(20,184,166,0.16), transparent 28%),
      radial-gradient(circle at 84% 20%, rgba(59,130,246,0.14), transparent 30%),
      linear-gradient(135deg, #07111d 0%, #0a1020 58%, #0d1020 100%);
  }

  .support-back,
  .admin-back {
    margin: 0 0 20px;
  }

  .support-shell,
  .admin-dashboard {
    max-width: 1180px;
    margin: 0 auto;
  }

  .support-head,
  .admin-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
  }

  .support-head span,
  .admin-head span {
    color: #5eead4;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  .support-head h1,
  .admin-head h1 {
    margin-top: 6px;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.05;
    font-weight: 900;
  }

  .support-head p,
  .admin-head p {
    max-width: 680px;
    margin-top: 10px;
    color: var(--text-secondary);
    font-size: 14px;
  }

  .support-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
    gap: 20px;
    margin-bottom: 20px;
  }

  .support-panel,
  .admin-panel,
  .admin-login-card,
  .admin-access-card,
  .admin-metric {
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 16px;
    background: rgba(8,13,25,0.88);
    box-shadow: 0 24px 70px rgba(0,0,0,0.28);
  }

  .support-panel,
  .admin-panel,
  .admin-login-card,
  .admin-access-card {
    padding: 24px;
  }

  .support-form,
  .admin-login-form,
  .admin-access-actions {
    display: grid;
    gap: 16px;
  }

  .support-panel-title,
  .admin-panel-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
  }

  .support-panel-title strong,
  .admin-panel-head h2 {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 900;
  }

  .support-panel-title span,
  .admin-panel-head p {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.55;
  }

  .support-ai-card {
    display: grid;
    align-content: start;
    gap: 14px;
  }

  .support-ai-message {
    min-height: 190px;
    padding: 18px;
    border: 1px solid rgba(20,184,166,0.18);
    border-radius: 14px;
    background: rgba(20,184,166,0.07);
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.7;
    white-space: pre-line;
  }

  .support-note {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.6;
  }

  .support-ticket-list,
  .admin-list {
    display: grid;
    gap: 12px;
  }

  .support-ticket,
  .admin-list-item {
    padding: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    background: rgba(255,255,255,0.035);
  }

  .support-ticket__top,
  .admin-list-item__top {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
  }

  .support-ticket h3,
  .admin-list-item h3 {
    font-size: 14px;
    font-weight: 900;
    line-height: 1.35;
  }

  .support-ticket p,
  .admin-list-item p {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.65;
  }

  .support-ticket__meta,
  .admin-list-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(59,130,246,0.14);
    color: #93c5fd;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
  }

  .status-pill--danger {
    background: rgba(239,68,68,0.14);
    color: #fca5a5;
  }

  .status-pill--done {
    background: rgba(16,185,129,0.14);
    color: #6ee7b7;
  }

  .support-ticket__ai {
    margin-top: 12px;
    padding: 12px;
    border-left: 3px solid #5eead4;
    border-radius: 10px;
    background: rgba(20,184,166,0.06);
  }

  .support-ticket__actions,
  .admin-list-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
  }

  .support-action,
  .admin-action,
  .admin-logout {
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 9px;
    background: rgba(255,255,255,0.06);
    color: var(--text-primary);
    padding: 9px 12px;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
    transition: background .2s, transform .15s, border-color .2s;
  }

  .support-action:hover,
  .admin-action:hover,
  .admin-logout:hover {
    transform: translateY(-1px);
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.18);
  }

  .admin-login-card,
  .admin-access-card {
    display: grid;
    gap: 16px;
    width: min(430px, 100%);
    margin: 0 auto;
  }

  .admin-access-box {
    display: grid;
    gap: 6px;
    padding: 16px;
    border: 1px solid rgba(20,184,166,0.18);
    border-radius: 12px;
    background: rgba(20,184,166,0.06);
  }

  .admin-access-box strong {
    color: var(--text-primary);
    font-size: 14px;
  }

  .admin-access-box span {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.55;
  }

  .admin-commandbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, .4fr) auto;
    gap: 12px;
    align-items: stretch;
    margin-bottom: 18px;
  }

  .admin-commandbar > div,
  .admin-commandbar > button {
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 12px;
    background: rgba(255,255,255,0.035);
    padding: 14px;
  }

  .admin-commandbar span {
    display: block;
    margin-bottom: 5px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .8px;
    text-transform: uppercase;
  }

  .admin-commandbar strong {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 900;
  }

  .admin-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
  }

  .admin-metric {
    display: grid;
    gap: 4px;
    padding: 18px;
  }

  .admin-metric span {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .7px;
    text-transform: uppercase;
  }

  .admin-metric strong {
    color: var(--text-primary);
    font-size: 2rem;
    line-height: 1;
    font-weight: 900;
  }

  .admin-metric small {
    color: var(--text-muted);
    font-size: 11px;
  }

  .admin-metric--alert {
    border-color: rgba(239,68,68,0.2);
    background: rgba(239,68,68,0.06);
  }

  .admin-metric--support {
    border-color: rgba(20,184,166,0.2);
    background: rgba(20,184,166,0.06);
  }

  .admin-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    margin-bottom: 18px;
  }

  .admin-grid--wide {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  }

  .admin-list--compact {
    gap: 8px;
  }

  .admin-detail-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 13px 14px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 11px;
    background: rgba(255,255,255,0.032);
  }

  .admin-detail-row strong {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 900;
  }

  .admin-detail-row span {
    color: var(--text-secondary);
    font-size: 12px;
  }

  .admin-detail-row em {
    color: #5eead4;
    font-style: normal;
    font-size: 13px;
    font-weight: 900;
  }

  .admin-system-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  .admin-system-card {
    padding: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    background: rgba(255,255,255,0.035);
  }

  .admin-system-card span {
    display: block;
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .7px;
    text-transform: uppercase;
  }

  .admin-system-card strong {
    display: block;
    margin-bottom: 6px;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 900;
  }

  .admin-system-card p {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.55;
  }

  .admin-insights {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
  }

  .admin-insight {
    min-height: 92px;
    padding: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    background: rgba(255,255,255,0.035);
  }

  .admin-insight span {
    display: block;
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
  }

  .admin-insight strong {
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 900;
  }

  .empty-state {
    padding: 18px;
    border: 1px dashed rgba(255,255,255,0.12);
    border-radius: 12px;
    color: var(--text-muted);
    font-size: 13px;
    text-align: center;
  }

  .val-hero {
    position: relative; height: 260px; overflow: hidden;
    display: flex; align-items: flex-end; padding: 40px 48px;
  }
  .val-hero-bg {
    position: absolute; inset: 0;
    background-image: url('../images/Valorant_banniere.png');
    background-size: cover; background-position: center;
    filter: brightness(0.6);
  }
  .val-hero::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, transparent 60%),
                linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 50%);
  }
  .val-hero-content { position: relative; z-index: 1; }
  .val-eyebrow {
    font-size: 11px; font-weight: 700; letter-spacing: 2px;
    color: var(--red-val); text-transform: uppercase; margin-bottom: 8px;
  }
  .val-hero h1 { font-size: 2.5rem; font-weight: 900; color: white; margin-bottom: 6px; }
  .val-hero p { font-size: 14px; color: rgba(255,255,255,0.7); max-width: 480px; }

  .val-body {
    background:
      radial-gradient(ellipse 70% 40% at 60% 10%, rgba(180,20,30,0.22) 0%, transparent 70%),
      radial-gradient(ellipse 50% 60% at 10% 80%, rgba(120,10,15,0.18) 0%, transparent 60%),
      linear-gradient(160deg, #1a0507 0%, #130308 30%, #0e0205 60%, #0a0203 100%);
    min-height: calc(100vh - 260px);
  }

  .val-content { padding: 40px 48px; max-width: 1300px; margin: 0 auto; }

  .val-toolbar {
    display: flex; gap: 12px; align-items: center; margin-bottom: 32px; flex-wrap: wrap;
  }
  .val-tabs { display: flex; gap: 2px; }
  .val-tab {
    padding: 10px 18px; border-radius: 8px; font-size: 13px; font-weight: 600;
    cursor: pointer; border: none; transition: background .2s, color .2s;
    background: transparent; color: var(--text-secondary);
  }
  .val-tab.active { background: rgba(255,70,85,0.15); color: var(--red-val); }
  .val-tab:hover:not(.active) { background: var(--bg-card); color: var(--text-primary); }

  .val-layout { display: grid; grid-template-columns: 200px 1fr; gap: 28px; }

  .val-filters {
    background: rgba(20,5,7,0.85); border: 1px solid rgba(180,30,40,0.2);
    border-radius: 14px; padding: 20px; height: fit-content;
  }
  .filter-header {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: var(--text-muted); margin-bottom: 20px;
  }
  .filter-group { margin-bottom: 20px; }
  .filter-group label { font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--text-muted); display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
  .filter-icon {
    flex: 0 0 auto;
    color: #ff674f;
    font-size: 14px;
  }
  .material-symbols--trophy {
    display: inline-block;
    width: 1em;
    height: 1em;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7 21v-2h4v-3.1q-1.225-.275-2.187-1.037T7.4 12.95q-1.875-.225-3.137-1.637T3 8V7q0-.825.588-1.412T5 5h2V3h10v2h2q.825 0 1.413.588T21 7v1q0 1.9-1.263 3.313T16.6 12.95q-.45 1.15-1.412 1.913T13 15.9V19h4v2zm0-10.2V7H5v1q0 .95.55 1.713T7 10.8m10 0q.9-.325 1.45-1.088T19 8V7h-2z'/%3E%3C/svg%3E");
    filter: brightness(0) saturate(100%) invert(58%) sepia(79%) saturate(2445%) hue-rotate(329deg) brightness(103%) contrast(101%);
  }
  .mynaui--controller-solid {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3.032a.75.75 0 0 1 .75.75v3.715c.428-.109.867-.296 1.371-.51q.219-.094.455-.192c.952-.395 2.122-.801 3.441-.374c1.37.444 2.474 1.472 3.203 3.157c.718 1.66 1.081 3.97 1.024 7.062c-.023 1.255-.34 3.057-1.996 3.78c-1.789.782-3.198-.024-4.296-.774q-.253-.174-.483-.337c-.376-.265-.72-.507-1.089-.714c-.499-.28-.957-.44-1.431-.44H11.05c-.475 0-.935.16-1.435.44c-.37.207-.716.45-1.094.716q-.229.162-.48.334c-1.097.748-2.506 1.555-4.29.776c-1.656-.724-1.973-2.526-1.996-3.78c-.057-3.093.306-5.403 1.024-7.063c.73-1.685 1.833-2.713 3.203-3.157c1.32-.427 2.489-.02 3.441.374q.237.098.455.192c.504.214.943.401 1.371.51V3.782a.75.75 0 0 1 .75-.75M8.25 11.5a.75.75 0 0 0-1.5 0v.75H6a.75.75 0 0 0 0 1.5h.75v.75a.75.75 0 0 0 1.5 0v-.75H9a.75.75 0 0 0 0-1.5h-.75zm6.624.75a.75.75 0 0 0 0 1.5h3a.75.75 0 0 0 0-1.5z'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
  .oui--app-users-roles {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='black' d='M19.307 3.21a2.91 2.91 0 1 0-.223 1.94a11.64 11.64 0 0 1 8.232 7.049l1.775-.698a13.58 13.58 0 0 0-9.784-8.291m-2.822 1.638a.97.97 0 1 1 0-1.939a.97.97 0 0 1 0 1.94m-4.267.805l-.717-1.774a13.58 13.58 0 0 0-8.291 9.784a2.91 2.91 0 1 0 1.94.223a11.64 11.64 0 0 1 7.068-8.233m-8.34 11.802a.97.97 0 1 1 0-1.94a.97.97 0 0 1 0 1.94m12.607 8.727a2.91 2.91 0 0 0-2.599 1.62a11.64 11.64 0 0 1-8.233-7.05l-1.774.717a13.58 13.58 0 0 0 9.813 8.291a2.91 2.91 0 1 0 2.793-3.578m0 3.879a.97.97 0 1 1 0-1.94a.97.97 0 0 1 0 1.94M32 16.485a2.91 2.91 0 1 0-4.199 2.599a11.64 11.64 0 0 1-7.05 8.232l.718 1.775a13.58 13.58 0 0 0 8.291-9.813A2.91 2.91 0 0 0 32 16.485m-2.91.97a.97.97 0 1 1 0-1.94a.97.97 0 0 1 0 1.94'/%3E%3Cpath fill='black' d='M19.19 16.35a3.879 3.879 0 1 0-5.42 0a4.85 4.85 0 0 0-2.134 4.014v1.939h9.697v-1.94a4.85 4.85 0 0 0-2.143-4.014m-4.645-2.774a1.94 1.94 0 1 1 3.88 0a1.94 1.94 0 0 1-3.88 0m-.97 6.788a2.91 2.91 0 1 1 5.819 0z' class='ouiIcon__fillSecondary'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
  .gis--search-country {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 0 0-7.07 17.07A10 10 0 0 0 12 22a10 10 0 0 0 4.89-1.28l2.7 2.69l1.41-1.41l-2.56-2.56A10 10 0 0 0 12 2m0 2c.73 0 1.53.72 2.12 2H9.88C10.47 4.72 11.27 4 12 4M7.75 6A8 8 0 0 1 9 4.83A12 12 0 0 0 7.82 8H5.26A8 8 0 0 1 7.75 6M4.25 10h3.18A17 17 0 0 0 7.33 12c0 .68.04 1.35.12 2H4.25A8 8 0 0 1 4 12c0-.69.09-1.36.25-2m1.01 6h2.56A12 12 0 0 0 9 19.17A8 8 0 0 1 5.26 16m4.62 0h4.24C13.53 17.28 12.73 18 12 18s-1.53-.72-2.12-2m4.67-2h-5.1a15 15 0 0 1-.12-2c0-.7.04-1.37.12-2h5.1c.08.63.12 1.3.12 2c0 .69-.04 1.36-.12 2m.45 5.17A12 12 0 0 0 16.18 16h.3a5 5 0 0 0 .99 1.97A8 8 0 0 1 15 19.17m1.18-5.17c.08-.65.12-1.32.12-2c0-.68-.04-1.35-.12-2h3.57A8 8 0 0 1 20 12c0 .7-.09 1.37-.25 2zm.01-6A12 12 0 0 0 15 4.83A8 8 0 0 1 18.74 8z'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
  .ic--sharp-language {
    display: inline-block;
    width: 1em;
    height: 1em;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2m6.93 6h-2.95a15.7 15.7 0 0 0-1.38-3.56A8.03 8.03 0 0 1 18.92 8M12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96M4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56A8 8 0 0 1 5.08 16m2.95-8H5.08a8 8 0 0 1 4.33-3.56A15.7 15.7 0 0 0 8.03 8M12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96M14.34 14H9.66c-.09-.66-.16-1.32-.16-2s.07-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2m.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56M16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2z'/%3E%3C/svg%3E");
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
  }
  .filter-select {
    width: 100%; background: var(--bg-secondary); border: 1px solid var(--border);
    color: var(--text-primary); padding: 9px 12px; border-radius: 8px;
    font-size: 13px; font-family: inherit; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; cursor: pointer;
  }
  .btn-reset {
    width: 100%; padding: 10px; border-radius: 8px;
    background: rgba(255,70,85,0.1); border: 1px solid rgba(255,70,85,0.2);
    color: var(--red-val); font-size: 13px; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: background .2s;
  }
  .btn-reset:hover { background: rgba(255,70,85,0.2); }
  .btn-search {
    width: 100%;
    padding: 11px;
    border-radius: 8px;
    border: 1px solid transparent;
    color: white;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    margin-bottom: 10px;
    transition: transform .15s, background .2s, border-color .2s;
  }
  .btn-search:hover {
    transform: translateY(-1px);
  }
  .btn-search--valorant {
    background: var(--red-val);
    border-color: rgba(255,70,85,0.35);
  }
  .btn-search--valorant:hover { background: #ff3345; }
  .btn-search--bo7 {
    background: var(--orange-bo);
    border-color: rgba(249,115,22,0.35);
  }
  .btn-search--bo7:hover { background: #ea580c; }
  .btn-search--rl {
    background: #2563eb;
    border-color: rgba(37,99,235,0.35);
  }
  .btn-search--rl:hover { background: #1d4ed8; }
  .val-filters .filter-select {
    background: rgba(8,2,3,0.9); border-color: rgba(120,20,25,0.35);
  }

  .rank-dropdown {
    position: relative;
    width: 100%;
  }
  .rank-dropdown.is-open {
    z-index: 40;
  }
  .rank-dropdown__trigger {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 16px;
    background: #070c14;
    border: 1px solid rgba(255,70,85,0.45);
    border-radius: 9px;
    color: white;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s;
  }
  .rank-dropdown__trigger:hover,
  .rank-dropdown.is-open .rank-dropdown__trigger {
    border-color: rgba(255,70,85,0.75);
    box-shadow: 0 0 0 1px rgba(255,70,85,0.12);
  }
  .rank-dropdown__caret {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 5px solid #ff674f;
    transition: transform .2s;
  }
  .rank-dropdown.is-open .rank-dropdown__caret {
    transform: rotate(180deg);
  }
  .rank-dropdown__menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    display: none;
    width: 222px;
    max-width: calc(100vw - 32px);
    max-height: 384px;
    overflow-y: auto;
    padding: 4px 0;
    background: #070c14;
    border: 1px solid rgba(255,70,85,0.45);
    border-radius: 8px;
    box-shadow: 0 18px 44px rgba(0,0,0,0.45);
    scrollbar-color: #9ca3af #1f2937;
    scrollbar-width: thin;
  }
  .rank-dropdown.is-open .rank-dropdown__menu {
    display: block;
  }
  .rank-dropdown__menu::-webkit-scrollbar {
    width: 10px;
  }
  .rank-dropdown__menu::-webkit-scrollbar-track {
    background: #1f2937;
    border-radius: 999px;
  }
  .rank-dropdown__menu::-webkit-scrollbar-thumb {
    background: #9ca3af;
    border: 2px solid #1f2937;
    border-radius: 999px;
  }
  .rank-dropdown__option,
  .rank-dropdown__group-toggle {
    width: 100%;
    min-height: 36px;
    display: flex;
    align-items: center;
    border: 0;
    background: transparent;
    color: white;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
  }
  .rank-dropdown__option {
    padding: 0 16px;
  }
  .rank-dropdown__group-toggle {
    justify-content: space-between;
    padding: 0 30px 0 16px;
  }
  .rank-dropdown__group-toggle::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 1.5px solid white;
    border-bottom: 1.5px solid white;
    transform: rotate(-45deg);
    transition: transform .18s;
  }
  .rank-dropdown__group.is-expanded .rank-dropdown__group-toggle::after {
    transform: rotate(45deg);
  }
  .rank-dropdown__option:hover,
  .rank-dropdown__group-toggle:hover,
  .rank-dropdown__option.is-selected {
    background: #271c1e;
  }
  .rank-dropdown__sub-options {
    display: none;
    background: #10151e;
  }
  .rank-dropdown__group.is-expanded .rank-dropdown__sub-options {
    display: block;
  }
  .rank-dropdown__option--child {
    padding-left: 32px;
    color: #f8fafc;
  }

  .val-main { }
  .val-main-header {
    background: linear-gradient(135deg, #1a0506 0%, #1f0808 100%);
    border: 1px solid rgba(255,70,85,0.15);
    border-radius: 14px; padding: 28px; margin-bottom: 24px;
    display: flex; justify-content: space-between; align-items: flex-start;
  }
  .val-main-title { font-size: 1.4rem; font-weight: 800; margin-bottom: 4px; }
  .val-main-sub { font-size: 13px; color: var(--text-secondary); }
  .search-bar {
    display: flex; align-items: center; gap: 10px;
    background: var(--bg-primary); border: 1px solid var(--border);
    border-radius: 10px; padding: 10px 16px; width: 340px;
    font-size: 13px; color: var(--text-secondary);
  }
  .search-bar input {
    background: none; border: none; outline: none;
    color: var(--text-primary); font-size: 13px; font-family: inherit; flex: 1;
  }
  .search-bar input::placeholder { color: var(--text-muted); }
  .results-count { font-size: 12px; color: var(--text-muted); margin-bottom: 16px; }

  .public-teams-section {
    margin-top: 26px;
    display: grid;
    gap: 16px;
  }

  .public-teams-section[hidden] {
    display: none;
  }

  .public-teams-section__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
  }

  .public-teams-section__head h2 {
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 900;
  }

  .public-teams-section__head span {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
  }

  .public-teams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
  }

  .public-team-card {
    display: grid;
    gap: 13px;
    min-width: 0;
    padding: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    background: rgba(8,13,25,0.8);
    box-shadow: 0 18px 45px rgba(0,0,0,0.22);
  }

  .public-team-card__top strong {
    flex: 0 0 auto;
    display: inline-flex;
    min-width: 48px;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(20,184,166,0.14);
    color: #99f6e4;
    font-size: 13px;
    font-weight: 900;
  }

  .team-members-list--public .team-member-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .listings-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  .listing-card {
    background: rgba(18,5,7,0.9); border: 1px solid rgba(120,20,25,0.3);
    border-radius: 12px; padding: 18px; cursor: pointer;
    transition: border-color .2s, transform .2s, box-shadow .2s;
  }
  .listing-card:hover {
    border-color: rgba(255,70,85,0.4); transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255,70,85,0.1);
  }
  .listing-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    margin-bottom: 10px;
  }
  .listing-user { display: flex; align-items: center; gap: 10px; }
  .avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: linear-gradient(135deg, var(--blue-accent), var(--pink-accent));
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: white; flex-shrink: 0;
  }
  .avatar--ca { background: linear-gradient(135deg,#7c3aed,#a78bfa); }
  .avatar--sp,
  .avatar--db { background: linear-gradient(135deg,#0ea5e9,#38bdf8); }
  .avatar--rr { background: linear-gradient(135deg,#dc2626,#f87171); }
  .avatar--sm,
  .avatar--rp { background: linear-gradient(135deg,#059669,#34d399); }
  .avatar--cg { background: linear-gradient(135deg,#f59e0b,#fcd34d); }
  .avatar--gh { background: linear-gradient(135deg,#dc2626,#f97316); }
  .avatar--wz { background: linear-gradient(135deg,#0ea5e9,#7c3aed); }
  .avatar--zs { background: linear-gradient(135deg,#7c3aed,#c084fc); }
  .avatar--sw { background: linear-gradient(135deg,#374151,#6b7280); }
  .avatar--mp { background: linear-gradient(135deg,#f59e0b,#f97316); }
  .avatar--td,
  .avatar--fs { background: linear-gradient(135deg,#2563eb,#60a5fa); }
  .avatar--ax { background: linear-gradient(135deg,#7c00d4,#f0a0ff); }
  .avatar--gc { background: linear-gradient(135deg,#d4a017,#fcd34d); }
  .avatar--hk { background: linear-gradient(135deg,#f97316,#fbbf24); }
  .avatar--user-post { background: linear-gradient(135deg,#ff4655,#7c3aed); }
  .avatar--user-post-bo7 { background: linear-gradient(135deg,#f97316,#facc15); }
  .avatar--user-post-warzone { background: linear-gradient(135deg,#16a34a,#1E3A2F); }
  .avatar--user-post-rl { background: linear-gradient(135deg,#2563eb,#38bdf8); }
  .listing-user-info .username { font-size: 14px; font-weight: 600; }
  .listing-user-info .rank { font-size: 11px; }
  .rank-radiant { color: #ffd700; }
  .rank-immortal { color: #b467ff; }
  .rank-diamond { color: #a8d8f0; }
  .rank-platinum { color: #4aeadc; }
  .rank-gold { color: #f5c518; }
  .rank-purple { color: #a78bfa; }
  .rank-gold-light { color: #fbbf24; }
  .rank-user-post { color: #ff9aa3; }
  .listing-time { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
  .listing-title { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
  .listing-desc { font-size: 12px; color: var(--text-secondary); margin-bottom: 12px; line-height: 1.5; }
  .listing-full-message { display: none; }
  .listing-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
  .tag {
    padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 600;
    background: rgba(255,255,255,0.06); color: var(--text-secondary);
    border: 1px solid rgba(255,255,255,0.08);
  }
  .tag-ranked { background: rgba(255,70,85,0.1); color: #ff7a85; border-color: rgba(255,70,85,0.2); }
  .tag-pracc { background: rgba(59,130,246,0.1); color: #7eb8ff; border-color: rgba(59,130,246,0.2); }
  .tag-sentinel { background: rgba(168,85,247,0.1); color: #c084fc; border-color: rgba(168,85,247,0.2); }
  .tag-duelist { background: rgba(249,115,22,0.1); color: #fb923c; border-color: rgba(249,115,22,0.2); }
  .tag-initiator { background: rgba(16,185,129,0.1); color: #34d399; border-color: rgba(16,185,129,0.2); }
  .tag-flex { background: rgba(6,182,212,0.1); color: #22d3ee; border-color: rgba(6,182,212,0.2); }
  .tag-eu { background: rgba(37,99,235,0.1); color: #60a5fa; border-color: rgba(37,99,235,0.2); }
  .tag-premier { background: rgba(245,197,24,0.1); color: #fcd34d; border-color: rgba(245,197,24,0.2); }
  .tag-spikrush { background: rgba(255,70,85,0.08); color: #f87171; border-color: rgba(255,70,85,0.15); }
  .tag-user-post { background: rgba(255,70,85,0.1); color: #ff9aa3; border-color: rgba(255,70,85,0.22); }
  .tag-user-post--bo7 { background: rgba(249,115,22,0.1); color: #fdba74; border-color: rgba(249,115,22,0.22); }
  .tag-user-post--warzone { background: rgba(34,197,94,0.1); color: #86efac; border-color: rgba(34,197,94,0.22); }
  .tag-user-post--rl { background: rgba(59,158,255,0.1); color: #93c5fd; border-color: rgba(59,158,255,0.22); }
  .listing-footer { display: flex; gap: 14px; }
  .listing-meta { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }

  /* Shared listing UI */
  .title-accent--valorant { color: var(--red-val); }
  .title-accent--bo7 { color: var(--orange-bo); }
  .section-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .section-title-row--spaced { margin-bottom: 6px; }
  .section-title-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
  }
  .section-title-icon--valorant { background: rgba(255,70,85,0.2); }
  .section-title-icon--bo7 { background: rgba(249,115,22,0.2); }
  .section-title-icon--rl { background: rgba(20,80,220,0.2); }
  .tabs-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
  }
  .btn-post--valorant {
    margin-left: auto;
    background: rgba(255,70,85,0.14);
    border-color: rgba(255,70,85,0.32);
    color: #ff9aa3;
  }
  .btn-post--valorant:hover {
    background: rgba(255,70,85,0.22);
    border-color: rgba(255,70,85,0.5);
  }
  .btn-post--bo7 {
    margin-left: auto;
    background: rgba(249,115,22,0.14);
    border-color: rgba(249,115,22,0.32);
    color: #fdba74;
  }
  .btn-post--bo7:hover {
    background: rgba(249,115,22,0.22);
    border-color: rgba(249,115,22,0.5);
  }
  .btn-post--rl {
    margin-left: auto;
    background: rgba(59,158,255,0.14);
    border-color: rgba(59,158,255,0.32);
    color: #93c5fd;
  }
  .btn-post--rl:hover {
    background: rgba(59,158,255,0.22);
    border-color: rgba(59,158,255,0.5);
  }
  .btn-post--warzone,
  #page-bo7.is-warzone .btn-post--bo7 {
    background: rgba(34,197,94,0.14);
    border-color: rgba(34,197,94,0.34);
    color: #86efac;
  }
  .btn-post--warzone:hover,
  #page-bo7.is-warzone .btn-post--bo7:hover {
    background: rgba(34,197,94,0.22);
    border-color: rgba(34,197,94,0.52);
  }
  .notification-badge {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    color: white;
    font-size: 10px;
  }
  .notification-badge--valorant { background: var(--red-val); }
  .notification-badge--bo7 { background: var(--orange-bo); }
  #page-bo7.is-warzone .notification-badge--bo7 { background: #22c55e; }
  .notification-badge--rl { background: #3b9eff; }

  /* ══════════════════════════════════
     BO7 PAGE
  ══════════════════════════════════ */
  .bo7-hero {
    position: relative; height: 260px; overflow: hidden;
    display: flex; align-items: flex-end; padding: 40px 48px;
  }
  .bo7-hero-bg {
    position: absolute; inset: 0;
    background-image: url('../images/BO7_banniere.png');
    background-size: cover; background-position: center;
    filter: brightness(0.55);
  }
  .bo7-hero::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, transparent 60%),
                linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 50%);
  }
  .bo7-hero-content { position: relative; z-index: 1; }
  .bo7-eyebrow {
    font-size: 11px; font-weight: 700; letter-spacing: 2px;
    color: var(--orange-bo); text-transform: uppercase; margin-bottom: 8px;
  }
  .bo7-hero h1 { font-size: 2.5rem; font-weight: 900; color: white; margin-bottom: 6px; }
  .bo7-hero p { font-size: 14px; color: rgba(255,255,255,0.7); max-width: 480px; }

  .bo7-body {
    background:
      radial-gradient(ellipse 70% 40% at 60% 10%, rgba(180,80,10,0.22) 0%, transparent 70%),
      radial-gradient(ellipse 50% 60% at 10% 80%, rgba(120,55,5,0.18) 0%, transparent 60%),
      linear-gradient(160deg, #180900 0%, #110600 30%, #0c0400 60%, #090300 100%);
    min-height: calc(100vh - 260px);
  }
  .bo7-content { padding: 40px 48px; max-width: 1300px; margin: 0 auto; }

  .bo7-layout { display: grid; grid-template-columns: 200px 1fr; gap: 28px; }

  .bo7-filters {
    background: rgba(18,7,0,0.85); border: 1px solid rgba(180,80,10,0.2);
    border-radius: 14px; padding: 20px; height: fit-content;
  }
  .btn-reset-bo7 {
    width: 100%; padding: 10px; border-radius: 8px;
    background: rgba(249,115,22,0.1); border: 1px solid rgba(249,115,22,0.2);
    color: var(--orange-bo); font-size: 13px; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: background .2s;
  }
  .btn-reset-bo7:hover { background: rgba(249,115,22,0.2); }
  .bo7-filters .filter-select {
    background: rgba(8,3,0,0.9); border-color: rgba(120,55,5,0.35);
  }
  .bo7-filters .filter-icon {
    color: var(--orange-bo);
  }
  .bo7-filters .rank-dropdown__trigger {
    background: rgba(8,3,0,0.9);
    border-color: rgba(249,115,22,0.42);
  }
  .bo7-filters .rank-dropdown__trigger:hover,
  .bo7-filters .rank-dropdown.is-open .rank-dropdown__trigger {
    border-color: rgba(249,115,22,0.72);
    box-shadow: 0 0 0 1px rgba(249,115,22,0.14);
  }
  .bo7-filters .rank-dropdown__caret {
    border-bottom-color: var(--orange-bo);
  }
  .bo7-filters .rank-dropdown__menu {
    background: #100800;
    border-color: rgba(249,115,22,0.42);
  }
  .bo7-filters .rank-dropdown__option:hover,
  .bo7-filters .rank-dropdown__group-toggle:hover,
  .bo7-filters .rank-dropdown__option.is-selected {
    background: rgba(249,115,22,0.16);
    color: #fdba74;
  }
  .bo7-filters .rank-dropdown__sub-options {
    background: rgba(8,3,0,0.72);
  }

  .bo7-main-header {
    background: linear-gradient(135deg, #100800 0%, #1a0d00 100%);
    border: 1px solid rgba(249,115,22,0.15);
    border-radius: 14px; padding: 28px; margin-bottom: 24px;
    display: flex; justify-content: space-between; align-items: flex-start;
  }
  .bo7-main-title { font-size: 1.4rem; font-weight: 800; margin-bottom: 4px; }
  .bo7-main-sub { font-size: 13px; color: var(--text-secondary); }

  .bo7-tabs { display: flex; gap: 2px; margin-bottom: 24px; }
  .bo7-tab {
    padding: 10px 18px; border-radius: 8px; font-size: 13px; font-weight: 600;
    cursor: pointer; border: none; transition: background .2s, color .2s;
    background: transparent; color: var(--text-secondary);
  }
  .bo7-tab.active { background: rgba(249,115,22,0.15); color: var(--orange-bo); }
  .bo7-tab:hover:not(.active) { background: var(--bg-card); color: var(--text-primary); }

  .bo7-listing-card {
    background: rgba(16,7,0,0.9); border: 1px solid rgba(120,55,5,0.3);
    border-radius: 12px; padding: 18px; cursor: pointer;
    transition: border-color .2s, transform .2s, box-shadow .2s;
  }
  .bo7-listing-card:hover {
    border-color: rgba(249,115,22,0.4); transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(249,115,22,0.1);
  }
  .bo7-mode-switch {
    display: inline-flex;
    gap: 6px;
    padding: 5px;
    margin: 0 0 20px;
    background: rgba(0,0,0,0.24);
    border: 1px solid rgba(249,115,22,0.18);
    border-radius: 12px;
  }
  .bo7-mode-button {
    min-width: 132px;
    min-height: 38px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    transition: background .2s, color .2s, box-shadow .2s;
  }
  .bo7-mode-button.active {
    background: var(--orange-bo);
    color: #160700;
    box-shadow: 0 10px 24px rgba(249,115,22,0.22);
  }
  .bo7-mode-button:hover:not(.active) {
    background: rgba(255,255,255,0.06);
    color: var(--text-primary);
  }
  #page-bo7.is-warzone .bo7-hero-bg {
    background-image: url('../images/banniere_warzone.png');
    background-position: center;
    filter: brightness(0.58) saturate(1.05);
  }
  #page-bo7.is-warzone .bo7-hero::after {
    background: linear-gradient(to right, rgba(3,10,8,0.82) 0%, rgba(3,10,8,0.32) 62%, transparent 100%),
                linear-gradient(to top, rgba(3,10,8,0.9) 0%, transparent 54%);
  }
  #page-bo7.is-warzone .bo7-eyebrow,
  #page-bo7.is-warzone .title-accent--bo7 {
    color: #34d399;
  }
  #page-bo7.is-warzone .bo7-body {
    background:
      radial-gradient(ellipse 70% 40% at 64% 8%, rgba(34,197,94,0.18) 0%, transparent 70%),
      radial-gradient(ellipse 54% 64% at 10% 84%, rgba(30,58,47,0.42) 0%, transparent 62%),
      linear-gradient(135deg, #0B0F14 0%, #1E3A2F 100%);
  }
  #page-bo7.is-warzone .bo7-main-header {
    background: linear-gradient(135deg, #0B0F14 0%, #1E3A2F 100%);
    border-color: rgba(34,197,94,0.22);
  }
  #page-bo7.is-warzone .bo7-filters {
    background: rgba(7,16,13,0.88);
    border-color: rgba(34,197,94,0.22);
  }
  #page-bo7.is-warzone .bo7-filters .filter-select {
    background: rgba(3,10,8,0.92);
    border-color: rgba(34,197,94,0.26);
  }
  #page-bo7.is-warzone .bo7-filters .filter-icon {
    color: #34d399;
  }
  #page-bo7.is-warzone .bo7-filters .material-symbols--trophy {
    filter: brightness(0) saturate(100%) invert(66%) sepia(60%) saturate(565%) hue-rotate(94deg) brightness(95%) contrast(88%);
  }
  #page-bo7.is-warzone .bo7-filters .rank-dropdown__trigger {
    background: rgba(3,10,8,0.92);
    border-color: rgba(34,197,94,0.32);
  }
  #page-bo7.is-warzone .bo7-filters .rank-dropdown__trigger:hover,
  #page-bo7.is-warzone .bo7-filters .rank-dropdown.is-open .rank-dropdown__trigger {
    border-color: rgba(34,197,94,0.62);
    box-shadow: 0 0 0 1px rgba(34,197,94,0.12);
  }
  #page-bo7.is-warzone .bo7-filters .rank-dropdown__caret {
    border-bottom-color: #34d399;
  }
  #page-bo7.is-warzone .bo7-filters .rank-dropdown__menu {
    background: #06100d;
    border-color: rgba(34,197,94,0.32);
  }
  #page-bo7.is-warzone .bo7-filters .rank-dropdown__option:hover,
  #page-bo7.is-warzone .bo7-filters .rank-dropdown__group-toggle:hover,
  #page-bo7.is-warzone .bo7-filters .rank-dropdown__option.is-selected {
    background: rgba(34,197,94,0.15);
    color: #86efac;
  }
  #page-bo7.is-warzone .bo7-filters .rank-dropdown__sub-options {
    background: rgba(3,10,8,0.72);
  }
  #page-bo7.is-warzone .bo7-tab.active {
    background: rgba(34,197,94,0.15);
    color: #34d399;
  }
  #page-bo7.is-warzone .btn-search--bo7 {
    background: #16a34a;
    border-color: rgba(34,197,94,0.35);
  }
  #page-bo7.is-warzone .btn-search--bo7:hover {
    background: #15803d;
  }
  #page-bo7.is-warzone .btn-reset-bo7 {
    background: rgba(34,197,94,0.1);
    border-color: rgba(34,197,94,0.22);
    color: #34d399;
  }
  #page-bo7.is-warzone .btn-reset-bo7:hover {
    background: rgba(34,197,94,0.2);
  }
  #page-bo7.is-warzone .bo7-listing-card {
    background: rgba(5,15,12,0.92);
    border-color: rgba(34,197,94,0.24);
  }
  #page-bo7.is-warzone .bo7-listing-card:hover {
    border-color: rgba(34,197,94,0.46);
    box-shadow: 0 8px 24px rgba(34,197,94,0.12);
  }
  #page-bo7.is-warzone .bo7-mode-switch {
    border-color: rgba(34,197,94,0.22);
  }
  #page-bo7.is-warzone .bo7-mode-button.active {
    background: #22c55e;
    color: #04100a;
    box-shadow: 0 10px 24px rgba(34,197,94,0.22);
  }
  .rank-master { color: #c0a060; }
  .rank-gm { color: #b8860b; }
  .rank-crim { color: #dc143c; }
  .tag-wz { background: rgba(249,115,22,0.1); color: #fb923c; border-color: rgba(249,115,22,0.2); }
  .tag-mp { background: rgba(16,185,129,0.1); color: #34d399; border-color: rgba(16,185,129,0.2); }
  .tag-zombie { background: rgba(139,92,246,0.1); color: #a78bfa; border-color: rgba(139,92,246,0.2); }
  .tag-ranked-bo { background: rgba(239,68,68,0.1); color: #fca5a5; border-color: rgba(239,68,68,0.2); }
  .tag-sniper { background: rgba(107,114,128,0.15); color: #9ca3af; border-color: rgba(107,114,128,0.2); }
  .tag-eu-bo { background: rgba(37,99,235,0.1); color: #60a5fa; border-color: rgba(37,99,235,0.2); }
  .tag-fr { background: rgba(14,165,233,0.1); color: #38bdf8; border-color: rgba(14,165,233,0.2); }
  .tag-clan { background: rgba(236,72,153,0.1); color: #f472b6; border-color: rgba(236,72,153,0.2); }
  .tag-pubs { background: rgba(245,158,11,0.1); color: #fcd34d; border-color: rgba(245,158,11,0.2); }
  .tag-tdm { background: rgba(59,130,246,0.1); color: #93c5fd; border-color: rgba(59,130,246,0.2); }

  /* ══════════════════════════════════
     ROCKET LEAGUE PAGE
  ══════════════════════════════════ */
  .rl-hero {
    position: relative; height: 260px; overflow: hidden;
    display: flex; align-items: flex-end; padding: 40px 48px;
  }
  .rl-hero-bg {
    position: absolute; inset: 0;
    background-image: url('../images/RL_banniere.png');
    background-size: cover; background-position: center 30%;
    filter: brightness(0.55);
  }
  .rl-hero::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to right, rgba(0,0,10,0.75) 0%, transparent 60%),
                linear-gradient(to top, rgba(0,0,10,0.85) 0%, transparent 50%);
  }
  .rl-hero-content { position: relative; z-index: 1; }
  .rl-eyebrow {
    font-size: 11px; font-weight: 700; letter-spacing: 2px;
    color: #3b9eff; text-transform: uppercase; margin-bottom: 8px;
  }
  .rl-hero h1 { font-size: 2.5rem; font-weight: 900; color: white; margin-bottom: 6px; }
  .rl-hero h1 span { color: #f97316; }
  .rl-hero p { font-size: 14px; color: rgba(255,255,255,0.7); max-width: 480px; }

  .rl-body {
    background:
      radial-gradient(ellipse 65% 40% at 75% 8%, rgba(15,60,180,0.2) 0%, transparent 65%),
      radial-gradient(ellipse 55% 50% at 15% 75%, rgba(180,70,5,0.18) 0%, transparent 60%),
      radial-gradient(ellipse 40% 30% at 50% 50%, rgba(0,20,80,0.12) 0%, transparent 70%),
      linear-gradient(150deg, #020814 0%, #060412 30%, #040210 60%, #020108 100%);
    min-height: calc(100vh - 260px);
  }
  .rl-content { padding: 40px 48px; max-width: 1300px; margin: 0 auto; }
  .rl-layout { display: grid; grid-template-columns: 200px 1fr; gap: 28px; }

  .rl-filters {
    background: rgba(2,8,22,0.9); border: 1px solid rgba(20,70,180,0.25);
    border-radius: 14px; padding: 20px; height: fit-content;
  }
  .rl-filters .filter-select {
    background: rgba(1,4,14,0.9); border-color: rgba(20,70,180,0.3);
  }
  .rl-filters .filter-icon {
    color: #3b9eff;
  }
  .rl-filters .material-symbols--trophy {
    filter: brightness(0) saturate(100%) invert(61%) sepia(86%) saturate(1684%) hue-rotate(184deg) brightness(101%) contrast(101%);
  }
  .rl-filters .rank-dropdown__trigger {
    background: rgba(1,4,14,0.9);
    border-color: rgba(59,158,255,0.38);
  }
  .rl-filters .rank-dropdown__trigger:hover,
  .rl-filters .rank-dropdown.is-open .rank-dropdown__trigger {
    border-color: rgba(59,158,255,0.68);
    box-shadow: 0 0 0 1px rgba(59,158,255,0.14);
  }
  .rl-filters .rank-dropdown__caret {
    border-bottom-color: #3b9eff;
  }
  .rl-filters .rank-dropdown__menu {
    background: #030914;
    border-color: rgba(59,158,255,0.38);
  }
  .rl-filters .rank-dropdown__option:hover,
  .rl-filters .rank-dropdown__group-toggle:hover,
  .rl-filters .rank-dropdown__option.is-selected {
    background: rgba(59,158,255,0.16);
    color: #93c5fd;
  }
  .rl-filters .rank-dropdown__sub-options {
    background: rgba(2,8,22,0.78);
  }

  .rl-main-header {
    background: linear-gradient(135deg, #020b1a 0%, #040d20 100%);
    border: 1px solid rgba(20,80,220,0.2);
    border-radius: 14px; padding: 28px; margin-bottom: 24px;
    display: flex; justify-content: space-between; align-items: flex-start;
  }
  .rl-main-title { font-size: 1.4rem; font-weight: 800; margin-bottom: 4px; }
  .rl-main-sub { font-size: 13px; color: var(--text-secondary); }

  .rl-tab {
    padding: 10px 18px; border-radius: 8px; font-size: 13px; font-weight: 600;
    cursor: pointer; border: none; transition: background .2s, color .2s;
    background: transparent; color: var(--text-secondary);
  }
  .rl-tab.active { background: rgba(20,80,220,0.15); color: #3b9eff; }
  .rl-tab:hover:not(.active) { background: var(--bg-card); color: var(--text-primary); }

  .btn-reset-rl {
    width: 100%; padding: 10px; border-radius: 8px;
    background: rgba(20,80,220,0.1); border: 1px solid rgba(20,80,220,0.25);
    color: #3b9eff; font-size: 13px; font-weight: 600; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: background .2s;
  }
  .btn-reset-rl:hover { background: rgba(20,80,220,0.2); }

  .rl-listing-card {
    background: rgba(2,6,18,0.92); border: 1px solid rgba(15,55,160,0.28);
    border-radius: 12px; padding: 18px; cursor: pointer;
    transition: border-color .2s, transform .2s, box-shadow .2s;
  }
  .rl-listing-card:hover {
    border-color: rgba(59,158,255,0.45); transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(20,80,220,0.15);
  }

  .rank-ssl   { color: #ff6af0; }
  .rank-gc    { color: #f9c23c; }
  .rank-champ { color: #9b59ff; }
  .rank-dia-rl{ color: #5bc8f5; }
  .rank-plat-rl{ color: #36d9c8; }

  .tag-ranked-rl  { background: rgba(59,158,255,0.1); color: #7ec8ff; border-color: rgba(59,158,255,0.25); }
  .tag-casual     { background: rgba(16,185,129,0.1);  color: #34d399; border-color: rgba(16,185,129,0.2); }
  .tag-tourney    { background: rgba(249,194,60,0.1);  color: #fcd34d; border-color: rgba(249,194,60,0.2); }
  .tag-1v1        { background: rgba(249,115,22,0.1);  color: #fb923c; border-color: rgba(249,115,22,0.2); }
  .tag-2v2        { background: rgba(139,92,246,0.1);  color: #c084fc; border-color: rgba(139,92,246,0.2); }
  .tag-3v3        { background: rgba(236,72,153,0.1);  color: #f472b6; border-color: rgba(236,72,153,0.2); }
  .tag-eu-rl      { background: rgba(37,99,235,0.1);   color: #60a5fa; border-color: rgba(37,99,235,0.2); }
  .tag-fr-rl      { background: rgba(14,165,233,0.1);  color: #38bdf8; border-color: rgba(14,165,233,0.2); }
  .tag-freestyle  { background: rgba(244,63,94,0.1);   color: #fb7185; border-color: rgba(244,63,94,0.2); }
  .tag-extra      { background: rgba(6,182,212,0.1);   color: #22d3ee; border-color: rgba(6,182,212,0.2); }

  /* Post listing modal */
  .post-modal {
    --post-accent: var(--red-val);
    --post-accent-rgb: 255,70,85;
    --post-soft: #ff9aa3;
    --post-field-bg: rgba(6,1,4,0.9);
    --post-panel-bg: linear-gradient(160deg, #170306 0%, #0b0509 54%, #07040a 100%);
    position: fixed;
    inset: 0;
    z-index: 130;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  .post-modal--bo7 {
    --post-accent: var(--orange-bo);
    --post-accent-rgb: 249,115,22;
    --post-soft: #fdba74;
    --post-field-bg: rgba(12,6,1,0.92);
    --post-panel-bg: linear-gradient(160deg, #1b0a02 0%, #0f0802 54%, #080502 100%);
  }
  .post-modal--warzone {
    --post-accent: #22c55e;
    --post-accent-rgb: 34,197,94;
    --post-soft: #86efac;
    --post-field-bg: rgba(3,10,8,0.94);
    --post-panel-bg: linear-gradient(135deg, #0B0F14 0%, #1E3A2F 100%);
  }
  .post-modal--rl {
    --post-accent: #3b9eff;
    --post-accent-rgb: 59,158,255;
    --post-soft: #93c5fd;
    --post-field-bg: rgba(2,6,18,0.94);
    --post-panel-bg: linear-gradient(160deg, #041126 0%, #030814 56%, #02040a 100%);
  }
  .post-modal[aria-hidden="true"] {
    display: none;
  }
  .post-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2,6,14,0.78);
    backdrop-filter: blur(10px);
  }
  .post-modal__panel {
    position: relative;
    z-index: 1;
    width: min(820px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    padding: 28px;
    border: 1px solid rgba(var(--post-accent-rgb),0.2);
    border-radius: 16px;
    background:
      radial-gradient(circle at 18% 0%, rgba(var(--post-accent-rgb),0.17), transparent 30%),
      var(--post-panel-bg);
    color: var(--text-primary);
    box-shadow: 0 30px 90px rgba(0,0,0,0.62), 0 0 40px rgba(var(--post-accent-rgb),0.08);
  }
  .post-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(var(--post-accent-rgb),0.18);
    border-radius: 8px;
    background: rgba(var(--post-accent-rgb),0.08);
    color: var(--text-secondary);
    font-size: 20px;
    cursor: pointer;
    transition: background .2s, color .2s;
  }
  .post-modal__close:hover {
    background: rgba(var(--post-accent-rgb),0.16);
    color: white;
  }
  .post-modal__header {
    padding-right: 48px;
    margin-bottom: 22px;
  }
  .post-modal__header > span {
    display: inline-flex;
    margin-bottom: 8px;
    color: var(--post-accent);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .9px;
    text-transform: uppercase;
  }
  .post-modal__header h2 {
    font-size: 1.7rem;
    line-height: 1.15;
    margin-bottom: 8px;
  }
  .post-modal__header p {
    color: var(--text-secondary);
    font-size: 13px;
    max-width: 560px;
  }
  .post-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .post-field {
    display: grid;
    gap: 7px;
  }
  .post-field--wide {
    grid-column: 1 / -1;
  }
  .post-field span {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 800;
  }
  .post-field input,
  .post-field select,
  .post-field textarea {
    width: 100%;
    border: 1px solid rgba(var(--post-accent-rgb),0.18);
    border-radius: 10px;
    background: var(--post-field-bg);
    color: var(--text-primary);
    font: inherit;
    font-size: 13px;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
  }
  .post-field input,
  .post-field select {
    min-height: 44px;
    padding: 0 12px;
  }
  .post-static-value {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 0 12px;
    border: 1px solid rgba(var(--post-accent-rgb),0.18);
    border-radius: 10px;
    background: rgba(var(--post-accent-rgb),0.09);
    color: var(--post-soft);
    font-size: 13px;
    font-weight: 800;
  }
  .post-field--multi {
    position: relative;
  }
  .post-multi__trigger {
    width: 100%;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 12px;
    border: 1px solid rgba(var(--post-accent-rgb),0.18);
    border-radius: 10px;
    background: var(--post-field-bg);
    color: var(--text-primary);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
  }
  .post-multi__trigger span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .post-multi__caret {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--post-accent);
    flex: 0 0 auto;
    transition: transform .2s;
  }
  .post-field--multi.is-open .post-multi__caret {
    transform: rotate(180deg);
  }
  .post-multi__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 35;
    display: none;
    max-height: 230px;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid rgba(var(--post-accent-rgb),0.24);
    border-radius: 10px;
    background: var(--post-field-bg);
    box-shadow: 0 18px 42px rgba(0,0,0,0.45);
  }
  .post-field--multi.is-open .post-multi__menu {
    display: grid;
    gap: 4px;
  }
  .post-multi__menu label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 7px 8px;
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
  }
  .post-multi__menu label:hover {
    background: rgba(var(--post-accent-rgb),0.12);
  }
  .post-multi__menu input {
    width: 15px;
    height: 15px;
    min-height: 0;
    padding: 0;
    flex: 0 0 auto;
    accent-color: var(--post-accent);
  }
  .post-field--error .post-multi__trigger {
    border-color: #fca5a5;
    box-shadow: 0 0 0 3px rgba(239,68,68,0.16);
  }
  .post-field textarea {
    min-height: 150px;
    padding: 12px;
    resize: vertical;
    line-height: 1.6;
  }
  .post-field input:focus,
  .post-field select:focus,
  .post-field textarea:focus {
    border-color: var(--post-accent);
    box-shadow: 0 0 0 3px rgba(var(--post-accent-rgb),0.15);
  }
  .post-field input[readonly] {
    background: rgba(var(--post-accent-rgb),0.08);
    color: var(--post-soft);
    cursor: not-allowed;
  }
  .post-submit {
    width: 100%;
    min-height: 48px;
    margin-top: 18px;
    border: 0;
    border-radius: 10px;
    background: var(--post-accent);
    color: white;
    font: inherit;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    transition: background .2s, transform .15s;
  }
  .post-submit:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
  }
  .post-status {
    min-height: 20px;
    margin-top: 12px;
    color: var(--post-soft);
    font-size: 13px;
    font-weight: 800;
  }

  /* Listing details modal */
  body.modal-open { overflow: hidden; }

  .listing-card:focus-visible,
  .bo7-listing-card:focus-visible,
  .rl-listing-card:focus-visible {
    outline: 2px solid var(--blue-glow);
    outline-offset: 3px;
  }

  .listing-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 24px;
  }
  .listing-modal[aria-hidden="true"] {
    display: none;
  }
  .listing-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2,6,14,0.78);
    backdrop-filter: blur(10px);
  }
  .listing-modal__panel {
    position: relative;
    width: min(680px, 100%);
    max-height: min(760px, calc(100vh - 48px));
    overflow-y: auto;
    background: #080d17;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 14px;
    box-shadow: 0 28px 80px rgba(0,0,0,0.55);
    padding: 28px;
  }
  .listing-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    background: rgba(255,255,255,0.05);
    color: var(--text-primary);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
  }
  .listing-modal__close:hover {
    background: rgba(255,255,255,0.1);
  }
  .listing-modal__header {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 14px;
    align-items: start;
    padding-right: 44px;
  }
  .listing-modal__avatar-slot .avatar {
    width: 44px;
    height: 44px;
    font-size: 15px;
  }
  .listing-modal__eyebrow {
    color: #ff674f;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .9px;
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .listing-modal h2 {
    font-size: 1.45rem;
    line-height: 1.2;
    margin-bottom: 10px;
  }
  .listing-modal__user {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 13px;
  }
  .listing-modal__user span:not(:empty)::after {
    content: "•";
    margin-left: 8px;
    color: var(--text-muted);
  }
  .listing-modal__user span:last-child::after {
    content: "";
    margin: 0;
  }
  .listing-modal__body {
    margin-top: 24px;
  }
  .listing-modal__message {
    display: grid;
    gap: 12px;
  }
  .listing-modal__message > p {
    padding: 16px;
    background: rgba(255,255,255,0.035);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.75;
    white-space: pre-line;
  }
  .listing-modal__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
  }
  .listing-modal__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 18px;
    color: var(--text-muted);
    font-size: 12px;
  }
  .listing-modal__contact,
  .listing-modal__application {
    margin-top: 22px;
    padding: 18px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 12px;
  }
  .listing-modal__contact label,
  .listing-modal__application label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
  }
  .listing-modal__contact textarea,
  .listing-modal__application textarea {
    width: 100%;
    resize: vertical;
    min-height: 96px;
    padding: 12px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    background: #050913;
    color: var(--text-primary);
    font: inherit;
    font-size: 13px;
  }
  .listing-modal__report {
    margin-top: 22px;
    padding: 18px;
    background: rgba(239,68,68,0.06);
    border: 1px solid rgba(239,68,68,0.18);
    border-radius: 12px;
  }
  .listing-modal__report-title {
    margin-bottom: 12px;
    color: #fca5a5;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
  }
  .report-options {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
  }
  .report-options label {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
  }
  .report-options input {
    accent-color: #ef4444;
  }
  .listing-modal__report > label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
  }
  .listing-modal__report textarea {
    width: 100%;
    resize: vertical;
    min-height: 84px;
    padding: 12px;
    border: 1px solid rgba(239,68,68,0.18);
    border-radius: 10px;
    background: #050913;
    color: var(--text-primary);
    font: inherit;
    font-size: 13px;
  }
  .listing-modal__send {
    margin-top: 12px;
    border: 0;
    border-radius: 9px;
    background: rgba(255,70,85,0.16);
    color: #ff7a85;
    padding: 10px 14px;
    font-weight: 700;
    cursor: pointer;
  }
  .listing-modal__status {
    min-height: 18px;
    margin-top: 10px;
    color: #34d399;
    font-size: 12px;
  }
  .listing-modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
  }
  .listing-modal__button {
    border: 0;
    border-radius: 10px;
    padding: 12px 18px;
    color: white;
    font-weight: 800;
    cursor: pointer;
  }
  .listing-modal__button--secondary {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
  }
  .listing-modal__button--primary {
    background: var(--blue-accent);
  }
  .listing-modal__button--primary:hover {
    background: var(--blue-bright);
  }
  .listing-modal__button--danger {
    background: rgba(239,68,68,0.14);
    border: 1px solid rgba(239,68,68,0.28);
    color: #fca5a5;
  }
  .listing-modal__button--danger:hover {
    background: rgba(239,68,68,0.22);
  }
  /* Private messages */
  .messages-view {
    max-width: 1100px;
    margin: 0 auto;
  }
  .messages-layout {
    display: grid;
    grid-template-columns: 300px 1fr;
    min-height: 560px;
    overflow: hidden;
    background: rgba(8,12,22,0.92);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 14px;
  }
  .conversation-list {
    padding: 16px;
    background: rgba(255,255,255,0.025);
    border-right: 1px solid rgba(255,255,255,0.08);
  }
  .messages-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
  }
  .messages-heading h3 {
    font-size: 1rem;
    line-height: 1.2;
  }
  .messages-heading span {
    color: var(--text-muted);
    font-size: 12px;
  }
  .conversation-card {
    width: 100%;
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 10px;
    align-items: center;
    margin-bottom: 8px;
    padding: 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
  }
  .conversation-card:hover,
  .conversation-card.active {
    background: rgba(255,255,255,0.055);
    border-color: rgba(255,255,255,0.09);
  }
  .conversation-card__content {
    min-width: 0;
    display: grid;
    gap: 4px;
  }
  .conversation-card__top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
  }
  .conversation-card strong {
    font-size: 13px;
  }
  .conversation-card em {
    color: var(--text-muted);
    font-size: 11px;
    font-style: normal;
  }
  .conversation-card__content > span:last-child {
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .chat-panel {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-width: 0;
  }
  .chat-thread {
    display: contents;
  }
  .chat-thread[hidden] {
    display: none;
  }
  .chat-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }
  .chat-panel__header h3 {
    font-size: 1.05rem;
    margin-bottom: 3px;
  }
  .chat-panel__header p {
    color: var(--text-secondary);
    font-size: 12px;
  }
  .chat-status {
    color: #34d399;
    font-size: 12px;
    font-weight: 700;
  }
  .chat-messages {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    overflow-y: auto;
  }
  .chat-message {
    max-width: min(560px, 82%);
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.55;
  }
  .chat-message--incoming {
    align-self: flex-start;
    background: rgba(255,255,255,0.07);
    color: var(--text-primary);
  }
  .chat-message--outgoing {
    align-self: flex-end;
    background: var(--blue-accent);
    color: white;
  }
  .message-composer {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 16px 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .message-composer input {
    min-width: 0;
    padding: 12px 14px;
    background: #050913;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    color: var(--text-primary);
    font: inherit;
    font-size: 13px;
  }
  .message-composer button {
    border: 0;
    border-radius: 10px;
    background: var(--blue-accent);
    color: white;
    padding: 0 18px;
    font-weight: 800;
    cursor: pointer;
  }

  @media (max-width: 900px) {
    .auth-page {
      padding: 82px 24px 36px;
    }
    .auth-shell {
      grid-template-columns: 1fr;
    }
    .profile-page {
      padding: 82px 24px 36px;
    }
    .profile-shell {
      grid-template-columns: 1fr;
    }
    .support-page,
    .admin-page {
      padding: 82px 24px 36px;
    }
    .support-grid,
    .admin-grid {
      grid-template-columns: 1fr;
    }
    .admin-commandbar {
      grid-template-columns: 1fr;
    }
    .admin-metrics,
    .admin-insights,
    .admin-system-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .support-head,
    .admin-head {
      align-items: flex-start;
      flex-direction: column;
    }
    .auth-aside {
      min-height: auto;
    }
    .auth-aside h1,
    .auth-aside p {
      max-width: none;
    }
  }

  @media (max-width: 640px) {
    nav {
      padding: 0 14px;
    }
    .brand-logo--nav {
      width: 64px;
      height: 28px;
    }
    .nav-logo-text {
      display: none;
    }
    .nav-actions {
      gap: 6px;
    }
    .nav-user {
      max-width: 150px;
      min-height: 34px;
      padding-right: 8px;
    }
    .nav-user__avatar {
      width: 28px;
      height: 28px;
      flex-basis: 28px;
      font-size: 10px;
    }
    .nav-user__name {
      font-size: 12px;
    }
    .btn-ghost,
    .btn-primary,
    .btn-post {
      padding: 7px 9px;
      font-size: 12px;
    }
    .auth-page {
      padding: 76px 14px 28px;
    }
    .auth-aside,
    .auth-panel {
      border-radius: 12px;
      padding: 20px;
    }
    .auth-benefits {
      gap: 8px;
    }
    .auth-grid {
      grid-template-columns: 1fr;
    }
    .profile-links-grid {
      grid-template-columns: 1fr;
    }
    .profile-photo-row {
      align-items: flex-start;
      flex-direction: column;
    }
    .profile-card,
    .profile-editor {
      border-radius: 12px;
      padding: 20px;
    }
    .profile-listings-panel,
    .profile-teams-panel {
      border-radius: 12px;
      padding: 18px;
    }
    .profile-listing-item {
      grid-template-columns: 1fr;
      align-items: stretch;
    }
    .profile-listing-item__actions {
      display: grid;
      grid-template-columns: 1fr;
      justify-content: stretch;
    }
    .profile-team-card__head,
    .public-team-card__top,
    .public-teams-section__head {
      align-items: flex-start;
      flex-direction: column;
    }
    .team-member-form {
      grid-template-columns: 1fr;
    }
    .team-member-row {
      grid-template-columns: minmax(0, 1fr);
    }
    .public-teams-grid {
      grid-template-columns: 1fr;
    }
    .support-page,
    .admin-page {
      padding: 76px 14px 28px;
    }
    .support-panel,
    .admin-panel,
    .admin-login-card,
    .admin-access-card {
      border-radius: 12px;
      padding: 20px;
    }
    .admin-metrics,
    .admin-insights,
    .admin-system-grid {
      grid-template-columns: 1fr;
    }
    .support-ticket__top,
    .admin-list-item__top {
      align-items: flex-start;
      flex-direction: column;
    }
    .auth-row {
      align-items: flex-start;
      flex-direction: column;
      gap: 10px;
    }
    .auth-tabs {
      grid-template-columns: 1fr;
    }
    .post-modal {
      align-items: end;
      padding: 12px;
    }
    .post-modal__panel {
      max-height: calc(100vh - 24px);
      padding: 22px;
      border-radius: 12px;
    }
    .post-form-grid {
      grid-template-columns: 1fr;
    }
    .post-modal__header {
      padding-right: 36px;
    }
    .bo7-mode-switch {
      display: grid;
      grid-template-columns: 1fr 1fr;
      width: 100%;
    }
    .bo7-mode-button {
      min-width: 0;
      padding: 0 10px;
    }
    .listing-modal {
      padding: 12px;
      align-items: end;
    }
    .listing-modal__panel {
      max-height: calc(100vh - 24px);
      padding: 22px;
      border-radius: 12px;
    }
    .listing-modal__header {
      grid-template-columns: 38px 1fr;
      padding-right: 34px;
    }
    .listing-modal__actions {
      flex-direction: column;
    }
    .listing-modal__button {
      width: 100%;
    }
    .messages-layout {
      grid-template-columns: 1fr;
      min-height: auto;
    }
    .conversation-list {
      border-right: 0;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .message-composer {
      grid-template-columns: 1fr;
    }
    .message-composer button {
      min-height: 42px;
    }
  }

  /* ADMIN V2 */
  .admin-dashboard[hidden],
  .admin-section[hidden],
  .admin-modal[aria-hidden="true"] {
    display: none !important;
  }

  .listing-card--admin-hidden {
    display: none !important;
  }

  .admin-page {
    padding: 88px 28px 48px;
  }

  .admin-dashboard.admin-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    width: min(1440px, 100%);
    max-width: none;
    margin: 0 auto;
  }

  .admin-sidebar,
  .admin-card,
  .admin-modal__dialog {
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    background:
      linear-gradient(180deg, rgba(12,20,37,0.96), rgba(7,13,25,0.94));
    box-shadow: 0 22px 65px rgba(0,0,0,0.32);
  }

  .admin-sidebar {
    position: sticky;
    top: 84px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: calc(100vh - 116px);
    max-height: calc(100vh - 116px);
    padding: 14px;
    overflow: hidden;
  }

  .admin-sidebar__brand {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(94,234,212,0.16);
    border-radius: 8px;
    background: rgba(20,184,166,0.08);
  }

  .admin-sidebar__brand img {
    width: 54px;
    height: 34px;
    object-fit: contain;
  }

  .admin-sidebar__brand strong,
  .admin-sidebar__brand span,
  .admin-sidebar__footer span {
    display: block;
    min-width: 0;
  }

  .admin-sidebar__brand strong {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 900;
  }

  .admin-sidebar__brand span,
  .admin-sidebar__footer span {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
  }

  .admin-sidebar__nav {
    display: grid;
    align-content: start;
    gap: 7px;
    margin-top: 16px;
    overflow: auto;
    padding-right: 2px;
  }

  .admin-nav-item,
  .admin-action-btn,
  .admin-search,
  .admin-select,
  .admin-field textarea {
    border-radius: 8px;
    font: inherit;
  }

  .admin-nav-item {
    width: 100%;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-secondary);
    padding: 11px 12px;
    text-align: left;
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
    transition: background .2s, border-color .2s, color .2s;
  }

  .admin-nav-item:hover,
  .admin-nav-item.active {
    border-color: rgba(94,234,212,0.22);
    background: rgba(20,184,166,0.1);
    color: #dffcf8;
  }

  .admin-sidebar__footer {
    display: grid;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.08);
  }

  .admin-content {
    display: grid;
    gap: 18px;
    min-width: 0;
  }

  .admin-head {
    margin-bottom: 0;
    padding: 4px 2px 0;
  }

  .admin-head h1 {
    font-size: clamp(1.8rem, 3vw, 2.8rem);
  }

  .admin-section {
    display: grid;
    gap: 18px;
    min-width: 0;
  }

  .admin-section.active {
    animation: adminFadeIn .18s ease-out;
  }

  @keyframes adminFadeIn {
    from {
      opacity: .75;
      transform: translateY(4px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .admin-metrics {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 0;
  }

  .admin-card.admin-metric {
    min-width: 0;
    padding: 16px;
  }

  .admin-card.admin-metric strong {
    font-size: clamp(1.5rem, 3vw, 2.15rem);
  }

  .admin-metric--alert {
    border-color: rgba(248,113,113,0.26);
    background: linear-gradient(180deg, rgba(127,29,29,0.2), rgba(7,13,25,0.94));
  }

  .admin-metric--support {
    border-color: rgba(45,212,191,0.24);
    background: linear-gradient(180deg, rgba(13,148,136,0.18), rgba(7,13,25,0.94));
  }

  .admin-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    margin-bottom: 0;
  }

  .admin-grid--dashboard {
    grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr);
  }

  .admin-panel {
    min-width: 0;
    padding: 20px;
  }

  .admin-panel-head {
    align-items: start;
    margin-bottom: 16px;
  }

  .admin-panel-head h2 {
    font-size: 1.05rem;
  }

  .admin-panel-head--controls {
    align-items: center;
  }

  .admin-filterbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    min-width: min(520px, 100%);
  }

  .admin-search,
  .admin-select,
  .admin-field textarea {
    border: 1px solid rgba(255,255,255,0.11);
    background: rgba(3,7,18,0.72);
    color: var(--text-primary);
    outline: none;
  }

  .admin-search,
  .admin-select {
    min-height: 38px;
    padding: 0 12px;
    font-size: 12px;
    font-weight: 800;
  }

  .admin-search {
    width: min(280px, 100%);
  }

  .admin-select {
    min-width: 150px;
  }

  .admin-search:focus,
  .admin-select:focus,
  .admin-field textarea:focus {
    border-color: rgba(94,234,212,0.46);
    box-shadow: 0 0 0 3px rgba(20,184,166,0.12);
  }

  .admin-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    background: rgba(3,7,18,0.24);
  }

  .admin-table-wrap::-webkit-scrollbar {
    height: 8px;
  }

  .admin-table-wrap::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(148,163,184,0.28);
  }

  .admin-table {
    width: 100%;
    min-width: 920px;
    border-collapse: collapse;
  }

  .admin-table th,
  .admin-table td {
    padding: 13px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    text-align: left;
    vertical-align: top;
  }

  .admin-table th {
    color: #9fb4d3;
    background: rgba(255,255,255,0.035);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .7px;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .admin-table td {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.45;
  }

  .admin-table td strong {
    display: block;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 900;
    word-break: break-word;
  }

  .admin-table td span {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 11px;
    word-break: break-word;
  }

  .admin-action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
  }

  .admin-action-btn {
    min-height: 34px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.055);
    color: var(--text-primary);
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
    transition: transform .15s, border-color .2s, background .2s;
    white-space: nowrap;
  }

  .admin-action-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(94,234,212,0.32);
    background: rgba(20,184,166,0.1);
  }

  .admin-action-btn:focus-visible,
  .admin-nav-item:focus-visible,
  .admin-modal__close:focus-visible {
    outline: 2px solid rgba(94,234,212,0.75);
    outline-offset: 2px;
  }

  .admin-action-note {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 7px 9px;
    border: 1px solid rgba(34,211,238,0.16);
    border-radius: 8px;
    background: rgba(34,211,238,0.08);
    color: #67e8f9;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .admin-action-btn--primary {
    border-color: rgba(34,211,238,0.38);
    background: linear-gradient(135deg, rgba(37,99,235,0.88), rgba(20,184,166,0.82));
    color: #fff;
  }

  .admin-action-btn--danger {
    border-color: rgba(248,113,113,0.36);
    background: rgba(127,29,29,0.26);
    color: #fecaca;
  }

  .admin-logout {
    width: 100%;
    min-height: 36px;
    border-radius: 8px;
  }

  .admin-status-pill,
  .admin-verified {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .admin-status-pill--neutral {
    background: rgba(59,130,246,0.14);
    color: #93c5fd;
  }

  .admin-status-pill--done {
    background: rgba(16,185,129,0.14);
    color: #86efac;
  }

  .admin-status-pill--warning {
    background: rgba(245,158,11,0.16);
    color: #fcd34d;
  }

  .admin-status-pill--danger {
    background: rgba(239,68,68,0.16);
    color: #fca5a5;
  }

  .admin-verified {
    margin-top: 6px;
    background: rgba(34,211,238,0.14);
    color: #67e8f9;
  }

  .admin-game-breakdown,
  .admin-list {
    display: grid;
    gap: 10px;
  }

  .admin-game-row,
  .admin-detail-row,
  .admin-list-item {
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    background: rgba(255,255,255,0.035);
  }

  .admin-game-row {
    display: grid;
    gap: 10px;
    padding: 13px;
  }

  .admin-game-row strong {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 900;
  }

  .admin-game-row span {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
  }

  .admin-game-row__meter {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
  }

  .admin-game-row__meter span {
    display: block;
    height: 100%;
    margin: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #22d3ee, #34d399);
  }

  .admin-detail-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 13px 14px;
  }

  .admin-list-item {
    padding: 16px;
  }

  .admin-list-item__top {
    align-items: flex-start;
  }

  .admin-note {
    margin-top: 12px;
    padding: 12px;
    border-left: 3px solid #facc15;
    border-radius: 8px;
    background: rgba(250,204,21,0.08);
  }

  .admin-note strong {
    display: block;
    margin-bottom: 5px;
    color: #fde68a;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
  }

  .admin-settings-form {
    display: grid;
    gap: 18px;
  }

  .admin-settings-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }

  .admin-settings-grid--games {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 8px;
  }

  .admin-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 11px 12px;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 8px;
    background: rgba(255,255,255,0.035);
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 900;
  }

  .admin-toggle input {
    width: 17px;
    height: 17px;
    accent-color: #14b8a6;
  }

  .admin-field {
    display: grid;
    gap: 8px;
  }

  .admin-field > span {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 900;
  }

  .admin-field textarea {
    width: 100%;
    min-height: 110px;
    padding: 12px;
    resize: vertical;
    line-height: 1.55;
  }

  .admin-field--error textarea {
    border-color: rgba(248,113,113,0.68);
    box-shadow: 0 0 0 3px rgba(248,113,113,0.12);
  }

  .admin-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }

  .admin-form-status {
    color: #86efac;
    font-size: 12px;
    font-weight: 800;
  }

  .admin-modal {
    position: fixed;
    inset: 0;
    z-index: 2500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
  }

  .admin-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2,6,23,0.78);
    backdrop-filter: blur(10px);
  }

  .admin-modal__dialog {
    position: relative;
    z-index: 1;
    width: min(640px, 100%);
    max-height: min(720px, calc(100vh - 36px));
    overflow: auto;
    padding: 22px;
    outline: none;
  }

  .admin-modal__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    color: var(--text-primary);
    font-size: 22px;
    cursor: pointer;
  }

  .admin-modal__header {
    padding-right: 42px;
  }

  .admin-modal__header span {
    color: #5eead4;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .8px;
    text-transform: uppercase;
  }

  .admin-modal__header h2 {
    margin-top: 6px;
    color: var(--text-primary);
    font-size: 1.45rem;
    font-weight: 900;
    line-height: 1.15;
  }

  .admin-modal__header p,
  .admin-modal__text {
    margin-top: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.6;
  }

  .admin-modal__body {
    margin-top: 18px;
  }

  .admin-modal__details {
    display: grid;
    gap: 9px;
    margin: 0;
  }

  .admin-modal__details div {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  .admin-modal__details dt {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
  }

  .admin-modal__details dd {
    min-width: 0;
    margin: 0;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word;
  }

  .admin-modal__message {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid rgba(94,234,212,0.14);
    border-radius: 8px;
    background: rgba(20,184,166,0.06);
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.7;
    white-space: pre-wrap;
  }

  .admin-confirm-box {
    display: grid;
    gap: 6px;
    padding: 14px;
    border: 1px solid rgba(94,234,212,0.16);
    border-radius: 8px;
    background: rgba(20,184,166,0.07);
  }

  .admin-confirm-box strong {
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 900;
  }

  .admin-confirm-box p {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.55;
  }

  .admin-confirm-box--danger {
    border-color: rgba(248,113,113,0.28);
    background: rgba(127,29,29,0.16);
  }

  .admin-modal__error {
    margin-top: 10px;
    color: #fca5a5;
    font-size: 12px;
    font-weight: 800;
  }

  .admin-modal__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
  }

  .admin-field--modal textarea {
    min-height: 150px;
  }

  @media (max-width: 1180px) {
    .admin-dashboard.admin-layout {
      grid-template-columns: 1fr;
    }
    .admin-sidebar {
      position: static;
      min-height: auto;
      max-height: none;
    }
    .admin-sidebar__nav {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      overflow: visible;
    }
    .admin-sidebar__footer {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
    }
    .admin-logout {
      width: auto;
    }
    .admin-metrics {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .admin-grid,
    .admin-grid--dashboard {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 760px) {
    .admin-page {
      padding: 76px 14px 28px;
    }
    .admin-sidebar__nav {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .admin-head {
      gap: 14px;
    }
    .admin-metrics,
    .admin-settings-grid,
    .admin-settings-grid--games {
      grid-template-columns: 1fr;
    }
    .admin-panel-head--controls {
      align-items: stretch;
      flex-direction: column;
    }
    .admin-filterbar {
      display: grid;
      min-width: 0;
    }
    .admin-search,
    .admin-select {
      width: 100%;
    }
    .admin-modal {
      align-items: end;
      padding: 10px;
    }
    .admin-modal__dialog {
      max-height: calc(100vh - 20px);
      padding: 20px;
    }
    .admin-modal__details div {
      grid-template-columns: 1fr;
      gap: 4px;
    }
    .admin-modal__actions {
      display: grid;
      grid-template-columns: 1fr;
    }
    .admin-modal__actions .admin-action-btn {
      width: 100%;
    }
  }

  @media (max-width: 480px) {
    .admin-sidebar__brand {
      grid-template-columns: 44px minmax(0, 1fr);
    }
    .admin-sidebar__brand img {
      width: 44px;
      height: 30px;
    }
    .admin-sidebar__nav {
      grid-template-columns: 1fr;
    }
    .admin-action-row {
      display: grid;
      grid-template-columns: 1fr;
    }
    .admin-action-btn,
    .admin-action-note {
      width: 100%;
      white-space: normal;
    }
  }

  /* PAGE VISIBILITY */
  .page { display: none; }
  .page.active { display: block; }

  /* BACK BTN */
  .back-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.06); border: 1px solid var(--border);
    color: var(--text-secondary); padding: 8px 16px; border-radius: 8px;
    font-size: 13px; font-weight: 500; cursor: pointer;
    margin: 20px 48px; transition: background .2s, color .2s;
  }
  .back-btn:hover { background: rgba(255,255,255,0.1); color: var(--text-primary); }