@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@500;600;700&family=Rajdhani:wght@500;600;700&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;
  }
  html,
  body {
    max-width: 100%;
  }
  img,
  video,
  canvas,
  iframe {
    max-width: 100%;
  }
  button,
  input,
  select,
  textarea {
    max-width: 100%;
  }

  /* ── NAV ── */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 40px; height: 58px;
    background: rgba(8, 10, 19, 0.94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,0.07);
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  }
  .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: none;
    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: 48px;
    height: 32px;
  }
  .brand-logo--footer {
    width: 96px;
    height: 42px;
  }
  .brand-logo--auth {
    width: 104px;
    height: 46px;
  }
  .nav-links { display: flex; align-items: center; gap: 8px; list-style: none; }
  .nav-links a,
  .nav-link-button {
    display: inline-flex;
    align-items: center;
    border: 0;
    background: transparent;
    cursor: pointer;
    min-height: 30px;
    padding: 6px 11px;
    border-radius: 999px;
    color: var(--text-secondary);
    text-decoration: none;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    transition: color .2s, background .2s;
  }
  .nav-links a:hover,
  .nav-link-button:hover { color: var(--text-primary); background: rgba(255,255,255,.05); }
  .nav-links__separator { width: 1px; height: 14px; margin: 0 4px; background: rgba(255,255,255,.08); }
  .nav-actions { display: flex; align-items: center; gap: 12px; }
  .nav-menu-toggle {
    display: none;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    background: rgba(255,255,255,0.055);
    color: var(--text-primary);
    cursor: pointer;
    transition: background .2s, border-color .2s;
  }
  .nav-menu-toggle:hover,
  nav.is-mobile-open .nav-menu-toggle {
    border-color: rgba(96,165,250,0.34);
    background: rgba(59,130,246,0.12);
  }
  .nav-menu-toggle span {
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform .18s, opacity .18s;
  }
  nav.is-mobile-open .nav-menu-toggle span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  nav.is-mobile-open .nav-menu-toggle span:nth-child(2) {
    opacity: 0;
  }
  nav.is-mobile-open .nav-menu-toggle span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
  .language-selector {
    position: relative;
    z-index: 20;
  }
  .language-selector__toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 7px 10px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    background: rgba(255,255,255,0.055);
    color: var(--text-primary);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    transition: background .2s, border-color .2s, transform .15s;
  }
  .language-selector__toggle:hover,
  .language-selector.is-open .language-selector__toggle {
    transform: translateY(-1px);
    border-color: rgba(96,165,250,0.34);
    background: rgba(59,130,246,0.12);
  }
  .language-selector__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    display: grid;
    min-width: 160px;
    padding: 6px;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    background: rgba(8,13,24,0.98);
    box-shadow: 0 18px 45px rgba(0,0,0,0.38);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity .18s, transform .18s;
  }
  .language-selector.is-open .language-selector__menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .language-selector__option {
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
  }
  .language-selector__option:hover,
  .language-selector__option.is-active {
    background: rgba(96,165,250,0.12);
    color: var(--text-primary);
  }
  .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__avatar svg,
  .profile-avatar-large svg,
  .profile-photo-preview svg {
    width: 46%;
    height: 46%;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }
  .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-discord {
    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: #5865f2;
    color: #fff;
    font: inherit;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    transition: transform .15s, box-shadow .2s, border-color .2s;
  }
  .auth-discord:hover {
    transform: translateY(-1px);
    border-color: rgba(255,255,255,0.24);
    box-shadow: 0 14px 32px rgba(88,101,242,0.3);
  }
  .auth-discord__mark {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(255,255,255,0.18);
    color: #fff;
    font-size: 13px;
    font-weight: 900;
    line-height: 1;
  }
  .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 > * {
    min-width: 0;
    max-width: 100%;
  }

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

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

  .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-photo-upload.is-disabled {
    cursor: not-allowed;
    opacity: .62;
  }

  .profile-photo-upload.is-disabled input {
    cursor: not-allowed;
  }

  .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%;
    min-width: 0;
  }

  .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;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    text-align: center;
    white-space: normal;
  }

  /* ══════════════════════════════════
     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__top > div,
  .admin-list-item__top > div {
    min-width: 0;
    max-width: 100%;
  }

  .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;
  }

  .support-ticket__meta span,
  .admin-list-item__meta span {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .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-item {
    width: 100%;
    display: grid;
    gap: 4px;
    min-width: 0;
    margin-bottom: 8px;
    padding: 12px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
  }
  .conversation-item:hover,
  .conversation-item.active {
    background: rgba(255,255,255,0.055);
    border-color: rgba(255,255,255,0.09);
  }
  .conversation-item strong,
  .conversation-item span {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .conversation-item strong {
    font-size: 13px;
  }
  .conversation-item span {
    color: var(--text-secondary);
    font-size: 12px;
  }
  .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,
  .chat-form {
    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,
  .chat-form 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,
  .chat-form 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;
    }
    .language-selector__toggle {
      min-height: 34px;
      padding: 7px 8px;
      font-size: 11px;
    }
    .language-selector__menu {
      right: -38px;
      min-width: 150px;
    }
    .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,
    .chat-form {
      grid-template-columns: 1fr;
    }
    .message-composer button,
    .chat-form 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-subtabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
  }

  .admin-subtab {
    min-height: 34px;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    background: rgba(255,255,255,0.045);
    color: var(--text-muted);
    padding: 8px 11px;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
  }

  .admin-subtab.active {
    border-color: rgba(94,234,212,0.34);
    background: rgba(20,184,166,0.12);
    color: var(--text-primary);
  }

  .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__form {
    width: min(480px, 100%);
  }

  .admin-modal__form .admin-modal__body {
    display: grid;
    gap: 14px;
  }

  .admin-modal__field {
    display: grid;
    gap: 7px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 800;
  }

  .admin-modal__field[hidden] {
    display: none !important;
  }

  .admin-modal__field .admin-select,
  .admin-modal__field .admin-search,
  .admin-modal__field textarea {
    width: 100%;
    max-width: none;
  }

  .admin-modal__field textarea {
    min-height: 86px;
    padding: 10px 12px;
    resize: vertical;
    border: 1px solid rgba(255,255,255,0.11);
    border-radius: 6px;
    background: rgba(3,7,18,0.72);
    color: var(--text-primary);
    font: inherit;
  }

  .admin-modal__record {
    max-height: 280px;
    margin: 0;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--text-secondary);
    font: inherit;
    line-height: 1.55;
  }

  .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;
    }
  }

  /* ADMIN REDESIGN */
  #page-admin .admin-page {
    min-height: 100vh;
    padding: 88px 24px 50px;
    background: #080a13;
  }

  #page-admin .admin-back {
    margin: 0 0 18px;
  }

  #page-admin .admin-redesign {
    width: min(100%, calc(100vw - 48px));
    max-width: none;
    margin: 0 auto;
    display: grid;
    gap: 28px;
  }

  #page-admin .admin-redesign[hidden],
  #page-admin .admin-access-card[hidden],
  #page-admin .admin-section[hidden] {
    display: none !important;
  }

  #page-admin .admin-overview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }

  #page-admin .admin-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #9fafee;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
  }

  #page-admin .admin-eyebrow-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #5b7cfa;
    box-shadow: 0 0 12px rgba(91,124,250,0.75);
  }

  #page-admin .admin-overview-head h1 {
    margin-top: 10px;
    color: #f2f3fa;
    font-family: 'Rajdhani', 'Inter', sans-serif;
    font-size: clamp(1.7rem, 2.4vw, 2rem);
    font-weight: 700;
    line-height: 1.03;
    letter-spacing: 0;
  }

  #page-admin .admin-overview-head p {
    max-width: 720px;
    margin-top: 5px;
    color: #9aa6d7;
    font-size: 14px;
    line-height: 1.45;
  }

  #page-admin .admin-head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
  }

  #page-admin .admin-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 29px;
    padding: 6px 12px;
    border: 1px solid rgba(155,107,255,0.46);
    border-radius: 999px;
    background: rgba(155,107,255,0.12);
    color: #cfb8ff;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
  }

  #page-admin .admin-role-badge svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
  }

  #page-admin .admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }

  #page-admin .admin-stat-card {
    position: relative;
    min-height: 133px;
    padding: 18px 20px 17px;
    border: 1px solid #242a42;
    border-radius: 8px;
    background: #12172a;
    box-shadow: none;
  }

  #page-admin .admin-stat-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    border: 1px solid rgba(91,124,250,0.62);
    border-radius: 8px;
    background: rgba(91,124,250,0.14);
    color: #55f1e5;
  }

  #page-admin .admin-stat-card__icon svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
  }

  #page-admin .admin-stat-card__icon--reports,
  #page-admin .admin-stat-card--alert .admin-stat-card__icon {
    border-color: rgba(255,63,104,0.56);
    background: rgba(255,63,104,0.1);
    color: #ff5379;
  }

  #page-admin .admin-stat-card strong {
    display: block;
    margin-top: 15px;
    color: #f2f3fa;
    font-family: 'Rajdhani', 'Inter', sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: .95;
  }

  #page-admin .admin-stat-card > span {
    display: block;
    margin-top: 7px;
    color: #9aa6d7;
    font-size: 13px;
    font-weight: 500;
  }

  #page-admin .admin-stat-card small {
    position: absolute;
    top: 27px;
    right: 20px;
    max-width: 110px;
    color: #20e6a8;
    font-size: 11px;
    font-weight: 900;
    line-height: 1.25;
    text-align: right;
  }

  #page-admin .admin-tabs {
    position: static;
    inset: auto;
    z-index: auto;
    display: inline-grid;
    grid-template-columns: repeat(4, minmax(96px, auto));
    justify-self: start;
    width: min(438px, 100%);
    height: auto;
    padding: 4px;
    border: 1px solid #242a42;
    border-radius: 9px;
    background: #0d1221;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    overflow-x: auto;
  }

  #page-admin .admin-nav-item {
    min-height: 34px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #93a0d0;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 900;
    text-align: center;
  }

  #page-admin .admin-nav-item:hover {
    background: rgba(91,124,250,0.1);
    color: #cbd5ff;
  }

  #page-admin .admin-nav-item.active {
    background: linear-gradient(135deg, #5b7cfa, #9b6bff);
    color: #fff;
    box-shadow: 0 10px 24px rgba(91,124,250,0.24);
  }

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

  #page-admin .admin-section {
    min-width: 0;
  }

  #page-admin .admin-panel {
    padding: 28px;
    border: 1px solid #242a42;
    border-radius: 13px;
    background: #12172a;
    box-shadow: none;
  }

  #page-admin .admin-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
  }

  #page-admin .admin-panel-head h2 {
    color: #f2f3fa;
    font-size: 15px;
    font-weight: 900;
  }

  #page-admin .admin-panel-head p {
    color: #94a0ce;
    font-size: 13px;
    font-weight: 500;
  }

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

  #page-admin .admin-search,
  #page-admin .admin-select {
    min-height: 34px;
    border: 1px solid #242a42;
    border-radius: 7px;
    background: #0d1221;
    color: #f2f3fa;
    padding: 0 11px;
    font-size: 12px;
    font-weight: 800;
  }

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

  #page-admin .admin-select {
    min-width: 140px;
  }

  #page-admin .admin-search:focus,
  #page-admin .admin-select:focus {
    border-color: rgba(91,124,250,0.72);
    box-shadow: 0 0 0 3px rgba(91,124,250,0.16);
  }

  #page-admin .admin-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  #page-admin .admin-table {
    width: 100%;
    min-width: 850px;
    border-collapse: collapse;
  }

  #page-admin .admin-table th,
  #page-admin .admin-table td {
    padding: 13px 14px;
    border-bottom: 1px solid #242a42;
    text-align: left;
    vertical-align: middle;
  }

  #page-admin .admin-table th {
    color: #626d97;
    background: transparent;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  #page-admin .admin-table td {
    color: #b0b9df;
    font-size: 12px;
    line-height: 1.35;
  }

  #page-admin .admin-table td strong {
    display: block;
    color: #f2f3fa;
    font-size: 13px;
    font-weight: 900;
    line-height: 1.2;
    word-break: break-word;
  }

  #page-admin .admin-table td span {
    display: block;
    margin-top: 3px;
    color: #616b94;
    font-size: 11px;
    word-break: break-word;
  }

  #page-admin .admin-user-cell {
    display: grid;
    grid-template-columns: 29px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-width: 0;
  }

  #page-admin .admin-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 29px;
    height: 29px;
    overflow: hidden;
    border-radius: 8px;
    background: linear-gradient(135deg, #5b7cfa, #9b6bff);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
  }

  #page-admin .admin-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  #page-admin .admin-status-pill {
    min-height: 25px;
    padding: 4px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    text-transform: none;
  }

  #page-admin .admin-status-pill--neutral {
    border-color: rgba(91,124,250,0.22);
    background: rgba(91,124,250,0.12);
    color: #9fafee;
  }

  #page-admin .admin-status-pill--done {
    border-color: rgba(32,230,168,0.28);
    background: rgba(32,230,168,0.13);
    color: #20e6a8;
  }

  #page-admin .admin-status-pill--warning {
    border-color: rgba(255,198,89,0.28);
    background: rgba(255,198,89,0.13);
    color: #ffd166;
  }

  #page-admin .admin-status-pill--danger {
    border-color: rgba(255,63,104,0.33);
    background: rgba(255,63,104,0.13);
    color: #ff6d8c;
  }

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

  #page-admin .admin-action-btn {
    min-height: 32px;
    border: 1px solid #242a42;
    border-radius: 9px;
    background: #151b31;
    color: #f2f3fa;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 900;
    white-space: nowrap;
  }

  #page-admin .admin-action-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(91,124,250,0.56);
    background: #1a2140;
  }

  #page-admin .admin-action-btn--ghost {
    color: #aeb8e3;
  }

  #page-admin .admin-action-btn--primary {
    border-color: rgba(91,124,250,0.58);
    background: linear-gradient(135deg, #5b7cfa, #9b6bff);
  }

  #page-admin .admin-action-note {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 5px 9px;
    border: 1px solid rgba(91,124,250,0.18);
    border-radius: 8px;
    background: rgba(91,124,250,0.08);
    color: #9fafee;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap;
  }

  #page-admin .empty-state {
    padding: 26px 18px;
    border: 1px dashed rgba(148,160,206,0.28);
    border-radius: 9px;
    color: #94a0ce;
    background: rgba(13,18,33,0.55);
  }

  @media (max-width: 1180px) {
    #page-admin .admin-stats-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #page-admin .admin-overview-head {
      align-items: flex-start;
    }
  }

  @media (max-width: 760px) {
    #page-admin .admin-page {
      padding: 76px 14px 34px;
    }

    #page-admin .admin-redesign {
      width: 100%;
      gap: 20px;
    }

    #page-admin .admin-overview-head {
      display: grid;
      gap: 14px;
    }

    #page-admin .admin-head-actions {
      justify-content: flex-start;
    }

    #page-admin .admin-stats-grid {
      grid-template-columns: 1fr;
      gap: 12px;
    }

    #page-admin .admin-stat-card {
      min-height: 116px;
    }

    #page-admin .admin-tabs {
      width: 100%;
      grid-template-columns: repeat(4, minmax(112px, 1fr));
      overflow-x: auto;
    }

    #page-admin .admin-panel {
      padding: 18px;
    }

    #page-admin .admin-panel-head,
    #page-admin .admin-panel-head--controls {
      align-items: stretch;
      flex-direction: column;
    }

    #page-admin .admin-filterbar {
      display: grid;
      min-width: 0;
      justify-content: stretch;
    }

    #page-admin .admin-search,
    #page-admin .admin-select {
      width: 100%;
    }
  }

  @media (max-width: 420px) {
    #page-admin .admin-head-actions,
    #page-admin .admin-action-row {
      display: grid;
      grid-template-columns: 1fr;
      width: 100%;
    }

    #page-admin .admin-role-badge,
    #page-admin .admin-action-btn,
    #page-admin .admin-action-note {
      width: 100%;
      justify-content: center;
      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); }

  /* Responsive hardening */
  .page,
  nav,
  .nav-links,
  .nav-actions,
  .auth-shell,
  .profile-shell,
  .support-shell,
  .admin-dashboard,
  .val-layout,
  .bo7-layout,
  .rl-layout,
  .val-main,
  .bo7-main,
  .rl-main,
  .messages-view,
  .messages-layout,
  .chat-panel,
  .admin-section,
  .admin-panel,
  .admin-card,
  .listing-card,
  .bo7-listing-card,
  .rl-listing-card,
  .profile-listing-item,
  .profile-team-card,
  .public-team-card,
  .support-ticket,
  .admin-list-item {
    min-width: 0;
  }

  .listing-user,
  .listing-user-info,
  .section-title-row,
  .support-ticket__top,
  .admin-list-item__top,
  .conversation-card__top {
    min-width: 0;
  }

  .listing-user-info .username,
  .listing-title,
  .listing-desc,
  .listing-full-message,
  .tag,
  .profile-listing-item h3,
  .profile-listing-item p,
  .profile-team-card h3,
  .profile-team-card p,
  .public-team-card h3,
  .public-team-card p,
  .support-ticket h3,
  .support-ticket p,
  .admin-list-item h3,
  .admin-list-item p,
  .listing-modal h2,
  .listing-modal__message > p,
  .chat-message {
    overflow-wrap: anywhere;
  }

  .tag {
    max-width: 100%;
  }

  .post-modal,
  .listing-modal,
  .admin-modal {
    min-height: 100vh;
    min-height: 100dvh;
  }

  .post-modal__panel {
    max-height: calc(100dvh - 48px);
  }

  .listing-modal__panel {
    max-height: min(760px, calc(100dvh - 48px));
  }

  @media (max-width: 1180px) {
    .games-grid,
    .features-grid,
    .listings-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 1239px) {
    nav {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 0 12px;
      height: auto;
      min-height: 60px;
      max-height: 100dvh;
      padding: 9px 20px;
      overflow-y: auto;
    }

    .nav-logo {
      min-height: 42px;
    }

    .nav-menu-toggle {
      display: flex;
      justify-self: end;
    }

    .nav-links,
    .nav-actions {
      grid-column: 1 / -1;
      width: 100%;
      display: none;
    }

    nav.is-mobile-open .nav-links {
      display: flex;
      align-items: stretch;
      flex-direction: column;
      gap: 4px;
      margin-top: 8px;
      padding: 10px 0 8px;
      border-top: 1px solid rgba(255,255,255,0.09);
    }

    nav.is-mobile-open .nav-actions {
      display: flex;
      align-items: stretch;
      flex-direction: column;
      gap: 8px;
      padding: 0 0 8px;
    }

    .nav-links a,
    .nav-links .nav-link-button,
    .nav-actions .btn-ghost,
    .nav-actions .btn-primary,
    .nav-actions .btn-post,
    .nav-user {
      width: 100%;
      min-height: 44px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      padding: 10px 12px;
      border-radius: 8px;
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .nav-actions .btn-ghost,
    .nav-actions .btn-primary,
    .nav-actions .btn-post {
      border: 1px solid rgba(255,255,255,0.09);
      background: rgba(255,255,255,0.045);
    }

    .nav-actions [hidden] {
      display: none;
    }

    .nav-user {
      max-width: none;
      border-radius: 10px;
    }

    .language-selector {
      width: 100%;
    }

    .language-selector__toggle {
      width: 100%;
      min-height: 44px;
      justify-content: space-between;
      padding: 9px 12px;
      font-size: 13px;
    }

    .language-selector__menu {
      position: static;
      display: none;
      width: 100%;
      min-width: 0;
      max-height: calc(100dvh - 180px);
      margin-top: 8px;
      overflow-y: auto;
      opacity: 1;
      pointer-events: auto;
      transform: none;
    }

    .language-selector.is-open .language-selector__menu {
      display: grid;
    }

    .language-selector__option {
      min-height: 44px;
      overflow-wrap: anywhere;
    }

    .val-hero,
    .bo7-hero,
    .rl-hero {
      height: auto;
      min-height: 230px;
      padding: 88px 24px 28px;
    }

    .val-hero h1,
    .bo7-hero h1,
    .rl-hero h1 {
      font-size: clamp(2rem, 8vw, 2.5rem);
      line-height: 1.08;
      overflow-wrap: anywhere;
    }

    .val-hero p,
    .bo7-hero p,
    .rl-hero p {
      max-width: 100%;
    }

    .val-content,
    .bo7-content,
    .rl-content {
      padding: 28px 24px;
    }

    .val-layout,
    .bo7-layout,
    .rl-layout {
      grid-template-columns: 1fr;
      gap: 18px;
    }

    .val-filters,
    .bo7-filters,
    .rl-filters {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
      padding: 16px;
    }

    .filter-group {
      margin-bottom: 0;
    }

    .filter-header,
    .btn-search,
    .btn-reset,
    .btn-reset-bo7,
    .btn-reset-rl {
      grid-column: 1 / -1;
    }

    .val-main-header,
    .bo7-main-header,
    .rl-main-header {
      align-items: stretch;
      flex-direction: column;
      gap: 16px;
    }

    .search-bar {
      width: 100%;
    }

    .tabs-row,
    .val-tabs,
    .bo7-tabs {
      flex-wrap: wrap;
    }

    .btn-post--valorant,
    .btn-post--bo7,
    .btn-post--rl {
      margin-left: 0;
    }
  }

  @media (max-width: 760px) {
    .section,
    .why-section,
    .cta-section,
    footer {
      padding-left: 24px;
      padding-right: 24px;
    }

    .games-grid,
    .features-grid,
    .listings-grid,
    .footer-grid {
      grid-template-columns: 1fr;
    }

    .hero-stats {
      display: grid;
      grid-template-columns: 1fr;
      width: min(360px, 100%);
    }

    .hero-stat {
      border-right: 0;
      border-bottom: 1px solid var(--border);
    }

    .hero-stat:last-child {
      border-bottom: 0;
    }

    .cta-box {
      padding: 34px 24px;
      border-radius: 14px;
    }

    .profile-section-title--row,
    .support-panel-title,
    .admin-panel-head {
      align-items: flex-start;
      flex-direction: column;
    }

    .post-modal__panel {
      max-height: calc(100dvh - 24px);
    }

    .listing-modal__panel {
      max-height: min(760px, calc(100dvh - 24px));
    }

    .admin-modal__dialog {
      max-height: calc(100dvh - 20px);
    }
  }

  @media (max-width: 640px) {
    input,
    select,
    textarea,
    .filter-select,
    .rank-dropdown__trigger,
    .post-multi__trigger,
    .message-composer input,
    .chat-form input,
    .admin-search,
    .admin-select {
      font-size: 16px;
    }

    .section,
    .why-section,
    .cta-section,
    footer {
      padding-left: 18px;
      padding-right: 18px;
    }

    .val-content,
    .bo7-content,
    .rl-content {
      padding: 24px 16px;
    }

    .val-main-header,
    .bo7-main-header,
    .rl-main-header {
      padding: 20px;
    }

    .val-filters,
    .bo7-filters,
    .rl-filters {
      grid-template-columns: 1fr;
    }

    .rank-dropdown__menu {
      position: static;
      width: 100%;
      max-width: none;
      max-height: min(330px, calc(100dvh - 210px));
      margin-top: 8px;
    }

    .rank-dropdown__option,
    .rank-dropdown__group-toggle {
      min-height: 44px;
    }

    .post-modal,
    .listing-modal,
    .admin-modal {
      padding: 10px;
    }

    .post-modal {
      align-items: stretch;
    }

    .listing-modal {
      place-items: end center;
    }

    .post-modal__panel,
    .listing-modal__panel,
    .admin-modal__dialog {
      width: 100%;
      max-height: calc(100dvh - 20px);
      padding: 18px;
      border-radius: 12px;
    }

    .post-modal__header {
      padding-right: 40px;
    }

    .listing-modal__header {
      grid-template-columns: 38px minmax(0, 1fr);
      gap: 10px;
      padding-right: 38px;
    }

    .listing-modal__message > p,
    .listing-modal__contact,
    .listing-modal__application,
    .listing-modal__report {
      padding: 14px;
    }

    .listing-modal__actions,
    .message-composer,
    .chat-form {
      display: grid;
      grid-template-columns: 1fr;
    }

    .listing-modal__button,
    .message-composer button,
    .chat-form button {
      width: 100%;
      min-height: 44px;
    }

    .post-field--multi.is-open .post-multi__menu {
      position: static;
      max-height: min(280px, calc(100dvh - 220px));
      margin-top: 8px;
    }

    .messages-layout {
      border-radius: 12px;
    }

    .chat-panel__header,
    .chat-messages,
    .message-composer,
    .chat-form {
      padding: 14px;
    }

    .chat-message {
      max-width: 92%;
    }

    .admin-table-wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
  }

  @media (max-width: 480px) {
    nav {
      padding: 8px 14px;
    }

    .hero {
      min-height: auto;
      padding: 96px 16px 56px;
    }

    .hero h1 {
      font-size: clamp(2.05rem, 11vw, 2.7rem);
    }

    .hero p {
      font-size: 15px;
    }

    .hero-actions,
    .cta-buttons {
      width: 100%;
      flex-direction: column;
    }

    .btn-hero-primary,
    .btn-hero-secondary,
    .btn-cta-player,
    .btn-cta-team {
      width: 100%;
      min-height: 46px;
    }

    .section,
    .why-section,
    .cta-section,
    footer {
      padding: 56px 16px;
    }

    .game-card {
      min-height: 240px;
      border-radius: 12px;
      aspect-ratio: auto;
    }

    .game-card-meta,
    .listing-footer {
      align-items: flex-start;
      flex-direction: column;
      gap: 6px;
    }

    .auth-page,
    .profile-page,
    .support-page,
    .admin-page {
      padding-left: 12px;
      padding-right: 12px;
    }

    .auth-aside,
    .auth-panel,
    .profile-card,
    .profile-editor,
    .profile-listings-panel,
    .profile-teams-panel,
    .support-panel,
    .admin-panel,
    .admin-login-card,
    .admin-access-card {
      padding: 18px;
    }

    .profile-avatar-large {
      width: 112px;
      height: 112px;
      border-radius: 20px;
    }

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

    .team-member-row,
    .team-members-list--public .team-member-row {
      grid-template-columns: 1fr;
      align-items: stretch;
    }

    .team-member-row strong,
    .team-member-row em {
      overflow: visible;
      text-overflow: clip;
      white-space: normal;
      overflow-wrap: anywhere;
    }

    .bo7-mode-switch {
      grid-template-columns: 1fr;
    }

    .bo7-mode-button {
      width: 100%;
    }

    .report-options label {
      align-items: flex-start;
      overflow-wrap: anywhere;
    }

    .back-btn {
      margin: 14px 12px;
    }
  }


  @media (min-width: 1240px) {
    nav { overflow: visible; }
    nav .nav-logo { flex: 0 0 120px; }
    nav .nav-links {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      white-space: nowrap;
    }
    nav .nav-actions { flex: 0 0 auto; }
  }

/* ========================================================================== */
/* HOME + AUTH REDESIGN V2 - scoped to avoid visual regressions on game pages */
/* ========================================================================== */

#page-home.home-redesign {
  --home-bg: #080a13;
  --home-bg-soft: #0c0f1c;
  --home-panel: #111527;
  --home-panel-strong: #151a30;
  --home-text: #f2f3fa;
  --home-muted: #8b90ac;
  --home-blue: #5b7cfa;
  --home-violet: #9b6bff;
  --home-cyan: #3fe8d4;
  --home-line: rgba(255,255,255,0.09);
  background: var(--home-bg);
  color: var(--home-text);
  overflow-x: clip;
}

.home-redesign .home-main {
  background:
    radial-gradient(circle at 12% 3%, rgba(91,124,250,0.14), transparent 25%),
    radial-gradient(circle at 88% 18%, rgba(155,107,255,0.11), transparent 24%),
    var(--home-bg);
}

.home-redesign .home-hero {
  position: relative;
  min-height: 590px;
  display: flex;
  align-items: center;
  padding: 106px 40px 58px;
  border-bottom: 1px solid var(--home-line);
  isolation: isolate;
}

.home-redesign .home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .42;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 92%);
}

.home-redesign .home-hero::after {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  right: -260px;
  top: 40px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91,124,250,.18), rgba(155,107,255,.08) 42%, transparent 70%);
  filter: blur(10px);
}

.home-redesign .home-hero__layout {
  width: min(1240px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(380px, .95fr);
  align-items: center;
  gap: 50px;
}

.home-redesign .home-hero__content {
  min-width: 0;
}

.home-redesign .home-eyebrow,
.home-redesign .home-section-kicker,
.home-redesign .home-section-index,
.home-redesign .home-team-preview__kicker,
.home-redesign .home-team-preview__footer {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, monospace;
}

.home-redesign .home-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  color: #c4c8da;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.home-redesign .home-eyebrow__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--home-cyan);
  box-shadow: 0 0 18px rgba(63,232,212,.7);
}

.home-redesign .home-hero h1 {
  max-width: 720px;
  margin: 0;
  color: var(--home-text);
  font-family: 'Rajdhani', 'Inter', sans-serif;
  font-size: clamp(2.55rem, 4.1vw, 3.2rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.06;
  text-wrap: balance;
}

.home-redesign .home-gradient-text {
  color: transparent;
  background: linear-gradient(135deg, #7d98ff 0%, #9b6bff 57%, #c68cff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.home-redesign .home-hero__copy {
  max-width: 500px;
  margin: 18px 0 0;
  color: var(--home-muted);
  font-size: 15px;
  line-height: 1.65;
}

.home-redesign .home-hero__actions,
.home-redesign .home-cta-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.home-redesign .home-hero__actions {
  margin-top: 28px;
}

.home-redesign .home-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  border-radius: 10px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.home-redesign .home-btn--primary {
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(135deg, var(--home-blue), var(--home-violet));
  color: #fff;
  box-shadow: 0 14px 36px rgba(91,124,250,.24);
}

.home-redesign .home-btn--secondary {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.035);
  color: var(--home-text);
}

.home-redesign .home-btn:hover {
  transform: translateY(-2px);
}

.home-redesign .home-btn--primary:hover {
  box-shadow: 0 18px 42px rgba(91,124,250,.34);
}

.home-redesign .home-btn--secondary:hover {
  border-color: rgba(155,107,255,.48);
  background: rgba(155,107,255,.08);
}

.home-redesign .home-btn:focus-visible,
.home-redesign .home-game-card:focus-visible {
  outline: 2px solid var(--home-cyan);
  outline-offset: 4px;
}

.home-redesign .home-hero__games {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  color: #6f748f;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.home-redesign .home-team-preview {
  position: relative;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(21,26,48,.92), rgba(12,15,28,.94));
  box-shadow: 0 34px 90px rgba(0,0,0,.43), inset 0 1px 0 rgba(255,255,255,.035);
  overflow: hidden;
  transform: perspective(1100px) rotateY(-2.5deg) rotateX(1deg);
}

.home-redesign .home-team-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(91,124,250,.11), transparent 34%, transparent 68%, rgba(155,107,255,.08));
}

.home-redesign .home-team-preview__topbar,
.home-redesign .home-team-preview__footer {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.home-redesign .home-team-preview__topbar > div {
  display: grid;
  gap: 2px;
}

.home-redesign .home-team-preview__kicker {
  color: #737a9a;
  font-size: 9px;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.home-redesign .home-team-preview__topbar strong {
  color: #fff;
  font-family: 'Rajdhani', 'Inter', sans-serif;
  font-size: 20px;
  letter-spacing: .02em;
}

.home-redesign .home-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid rgba(63,232,212,.19);
  border-radius: 999px;
  background: rgba(63,232,212,.065);
  color: #8ff4e8;
  font-size: 10px;
  font-weight: 800;
}

.home-redesign .home-live-badge > span:first-child {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--home-cyan);
  box-shadow: 0 0 12px rgba(63,232,212,.8);
}

.home-redesign .home-preview-filters {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.065);
}

.home-redesign .home-preview-filters span {
  padding: 5px 8px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
  background: rgba(255,255,255,.035);
  color: #a4aac3;
  font-size: 9px;
  font-weight: 700;
}

.home-redesign .home-preview-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.home-redesign .home-preview-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  min-height: 62px;
  padding: 10px 11px;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 11px;
  background: rgba(8,10,19,.64);
}

.home-redesign .home-preview-card--empty {
  grid-template-columns: minmax(0, 1fr);
}

.home-redesign .home-preview-card--empty .home-preview-card__body strong,
.home-redesign .home-preview-card--empty .home-preview-card__body span {
  white-space: normal;
}

.home-redesign .home-preview-action {
  justify-self: start;
  margin-top: 8px;
  border: 1px solid rgba(63,232,212,.22);
  border-radius: 6px;
  background: rgba(63,232,212,.08);
  color: #c5fff7;
  padding: 6px 8px;
  font-size: 9px;
  font-weight: 900;
  cursor: pointer;
}

.home-redesign .home-preview-card--team {
  border-color: rgba(63,232,212,.11);
}

.home-redesign .home-preview-avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, #5b7cfa, #3447aa);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.home-redesign .home-preview-avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.home-redesign .home-preview-avatar--violet {
  background: linear-gradient(135deg, #9b6bff, #6541b6);
}

.home-redesign .home-preview-avatar--cyan {
  background: linear-gradient(135deg, #3fe8d4, #167f79);
  color: #071312;
}

.home-redesign .home-preview-card__body {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.home-redesign .home-preview-card__body strong {
  overflow: hidden;
  color: #f7f8ff;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-redesign .home-preview-card__body span,
.home-redesign .home-preview-status {
  color: #747b98;
  font-size: 8px;
}

.home-redesign .home-preview-status {
  max-width: 82px;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.home-redesign .home-team-preview__footer {
  margin-top: 17px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.06);
  color: #555c78;
  font-size: 8px;
  letter-spacing: .12em;
}

.home-redesign .home-section {
  padding: 64px 40px;
  scroll-margin-top: 72px;
}

.home-redesign #games.section {
  padding: 64px 40px;
  scroll-margin-top: 72px;
  background: var(--home-bg-soft);
}

.home-redesign .home-games-section,
.home-redesign .home-about-section {
  background: var(--home-bg-soft);
}

.home-redesign .home-features-section,
.home-redesign .home-cta-section {
  background: var(--home-bg);
}

.home-redesign .home-section-heading,
.home-redesign .home-games-grid,
.home-redesign .home-features-grid,
.home-redesign .home-about-panel,
.home-redesign .home-cta-box {
  width: min(1240px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.home-redesign .home-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 28px;
}

.home-redesign .home-section-heading > div {
  max-width: 680px;
}

.home-redesign .home-section-kicker {
  display: inline-block;
  margin-bottom: 12px;
  color: #7f86a3;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.home-redesign .home-section-heading h2,
.home-redesign .home-about-copy h2,
.home-redesign .home-cta-box h2 {
  margin: 0;
  color: var(--home-text);
  font-family: 'Rajdhani', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.02;
}

.home-redesign .home-section-heading h2 {
  font-size: clamp(1.65rem, 2.4vw, 2rem);
}

.home-redesign .home-section-index {
  color: #4f566f;
  font-size: 9px;
  letter-spacing: .16em;
  white-space: nowrap;
}

.home-redesign .home-games-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.home-redesign .home-game-card {
  position: relative;
  min-height: 190px;
  display: block;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: #0a0d18;
  color: #fff;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 20px 45px rgba(0,0,0,.21);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.home-redesign .home-game-card:hover {
  transform: translateY(-6px);
  border-color: rgba(155,107,255,.38);
  box-shadow: 0 28px 60px rgba(0,0,0,.36);
}

.home-redesign .home-game-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transform: scale(1.01);
  transition: transform .5s ease, filter .3s ease;
}

.home-redesign .home-game-card:hover img {
  transform: scale(1.055);
}

.home-redesign .home-game-card__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(5,7,13,.98) 3%, rgba(5,7,13,.76) 39%, rgba(5,7,13,.18) 72%, rgba(5,7,13,.1)),
    linear-gradient(135deg, rgba(91,124,250,.08), transparent 45%);
}

.home-redesign .home-game-card__status {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  background: rgba(4,7,13,.58);
  backdrop-filter: blur(10px);
  color: #d7dbea;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.home-redesign .home-game-card__status > span:first-child {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #43e4a0;
  box-shadow: 0 0 11px rgba(67,228,160,.72);
}

.home-redesign .home-game-card__content {
  position: absolute;
  inset: auto 0 0;
  display: grid;
  gap: 4px;
  padding: 20px;
}

.home-redesign .home-game-card__number {
  color: #757c99;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: .14em;
}

.home-redesign .home-game-card__content strong {
  padding-right: 48px;
  color: #fff;
  font-family: 'Rajdhani', 'Inter', sans-serif;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -.015em;
}

.home-redesign .home-game-card__meta {
  color: #a0a6bd;
  font-size: 11px;
  font-weight: 600;
}

.home-redesign .home-game-card__arrow {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  color: #fff;
  font-size: 16px;
}

.home-redesign .home-features-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.home-redesign .home-feature-card {
  min-height: 155px;
  padding: 20px;
  border: 1px solid var(--home-line);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(17,21,39,.8), rgba(12,15,28,.72));
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.home-redesign .home-feature-card:hover {
  transform: translateY(-3px);
  border-color: rgba(91,124,250,.32);
  background: linear-gradient(145deg, rgba(21,26,48,.9), rgba(12,15,28,.78));
}

.home-redesign .home-feature-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  border: 1px solid rgba(91,124,250,.2);
  border-radius: 11px;
  background: rgba(91,124,250,.085);
  color: #9cafef;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 16px;
}

.home-redesign .home-feature-card h3 {
  margin: 0 0 8px;
  color: #f4f5fb;
  font-size: 14px;
  font-weight: 800;
}

.home-redesign .home-feature-card p {
  margin: 0;
  color: var(--home-muted);
  font-size: 12px;
  line-height: 1.68;
}

.home-redesign .home-about-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
  gap: 42px;
  align-items: center;
  padding: 38px;
  border: 1px solid var(--home-line);
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 0%, rgba(155,107,255,.11), transparent 32%),
    linear-gradient(145deg, #111527, #0e1221);
  overflow: hidden;
}

.home-redesign .home-about-copy h2 {
  max-width: 640px;
  font-size: clamp(1.7rem, 2.5vw, 2.2rem);
}

.home-redesign .home-about-copy p {
  max-width: 660px;
  margin: 18px 0 0;
  color: var(--home-muted);
  font-size: 14px;
  line-height: 1.75;
}

.home-redesign .home-role-cloud {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.home-redesign .home-role-cloud span {
  min-height: 58px;
  display: flex;
  align-items: end;
  padding: 15px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(8,10,19,.5);
  color: #c9ccdc;
  font-size: 12px;
  font-weight: 800;
}

.home-redesign .home-role-cloud span:nth-child(2),
.home-redesign .home-role-cloud span:nth-child(3) {
  border-color: rgba(155,107,255,.16);
}

.home-redesign .home-cta-box {
  position: relative;
  padding: 46px 36px;
  border: 1px solid rgba(155,107,255,.18);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(25,31,60,.96), rgba(14,17,34,.98) 58%, rgba(29,18,48,.9));
  text-align: center;
  overflow: hidden;
}

.home-redesign .home-cta-box__glow {
  position: absolute;
  width: 380px;
  height: 380px;
  left: 50%;
  top: -280px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: rgba(91,124,250,.22);
  filter: blur(70px);
  pointer-events: none;
}

.home-redesign .home-cta-box h2 {
  position: relative;
  font-size: clamp(1.8rem, 2.8vw, 2.35rem);
}

.home-redesign .home-cta-box p {
  position: relative;
  max-width: 620px;
  margin: 16px auto 0;
  color: var(--home-muted);
  font-size: 14px;
  line-height: 1.7;
}

.home-redesign .home-cta-actions {
  position: relative;
  justify-content: center;
  margin-top: 28px;
}

.home-redesign .home-footer {
  padding-top: 46px;
  background: #070911;
  border-top-color: var(--home-line);
}

.home-redesign .home-footer .footer-grid {
  width: min(1240px, 100%);
  max-width: none;
}

.home-redesign .home-footer .footer-bottom {
  width: min(1180px, 100%);
  max-width: none;
}

/* Auth redesign remains scoped so profile/support/game forms keep their look. */
#page-auth.auth-redesign {
  --auth-bg: #070911;
  --auth-panel: rgba(10,13,25,.96);
  --auth-panel-soft: rgba(17,21,39,.92);
  --auth-text: #f2f3fa;
  --auth-muted: #8b90ac;
  --auth-blue: #5b7cfa;
  --auth-violet: #9b6bff;
  --auth-cyan: #3fe8d4;
  --auth-line: rgba(255,255,255,.09);
  background: var(--auth-bg);
  color: var(--auth-text);
  overflow-x: clip;
}

.auth-redesign .auth-page {
  position: relative;
  min-height: 100vh;
  padding: 96px 40px 56px;
  background:
    linear-gradient(118deg, rgba(91,124,250,.14) 0%, transparent 34%),
    linear-gradient(242deg, rgba(155,107,255,.12) 0%, transparent 38%),
    var(--auth-bg);
  overflow: hidden;
}

.auth-redesign .auth-page::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .33;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.85), transparent);
}

.auth-redesign .auth-back,
.auth-redesign .auth-shell {
  position: relative;
  z-index: 1;
}

.auth-redesign .auth-back {
  width: min(1180px, 100%);
  display: block;
  margin: 0 auto 16px;
  color: var(--auth-muted);
}

.auth-redesign .auth-shell {
  width: min(1120px, 100%);
  max-width: none;
  align-items: start;
  grid-template-columns: minmax(0, .96fr) minmax(380px, 440px);
  gap: 22px;
}

.auth-redesign .auth-aside,
.auth-redesign .auth-panel {
  border-color: rgba(255,255,255,.09);
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(0,0,0,.4);
  backdrop-filter: blur(12px);
}

.auth-redesign .auth-aside {
  min-height: 560px;
  padding: 38px;
  justify-content: flex-start;
  gap: 0;
  isolation: isolate;
  background:
    linear-gradient(145deg, rgba(17,21,39,.96), rgba(10,12,23,.97) 62%, rgba(24,16,42,.92));
}

.auth-redesign .auth-aside::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .32;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 82%);
}

.auth-redesign .auth-aside::after {
  content: "LFH / ACCESS";
  position: absolute;
  inset: auto 30px 24px auto;
  right: 30px;
  bottom: 24px;
  height: auto;
  background: none;
  color: rgba(255,255,255,.16);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0;
  transform: none;
  pointer-events: none;
}

.auth-redesign .auth-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: #c4c8da;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.auth-redesign .auth-eyebrow__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--auth-cyan);
  box-shadow: 0 0 18px rgba(63,232,212,.7);
}

.auth-redesign .auth-aside h1 {
  max-width: 500px;
  margin: 76px 0 0;
  font-family: 'Rajdhani', 'Inter', sans-serif;
  font-size: 4.8rem;
  font-weight: 700;
  line-height: .95;
  letter-spacing: 0;
  text-wrap: balance;
}

.auth-redesign .auth-gradient-text {
  color: transparent;
  background: linear-gradient(135deg, #7d98ff 0%, #9b6bff 57%, #c68cff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.auth-redesign .auth-aside p {
  max-width: 510px;
  margin-top: 20px;
  color: var(--auth-muted);
  font-size: 15px;
  line-height: 1.7;
}

.auth-redesign .auth-benefits {
  margin-top: 40px;
  grid-template-columns: 1fr;
  gap: 10px;
}

.auth-redesign .auth-benefit {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 14px;
  row-gap: 2px;
  min-height: 70px;
  padding: 14px 16px;
  background: rgba(255,255,255,.025);
  border-color: rgba(255,255,255,.065);
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 12px;
}

.auth-redesign .auth-benefit-icon {
  grid-row: 1 / 3;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(91,124,250,.3);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(91,124,250,.16), rgba(155,107,255,.09));
  color: var(--auth-cyan);
}

.auth-redesign .auth-benefit-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.auth-redesign .auth-benefits strong {
  align-self: end;
  color: #f1f3fa;
  font-size: 13px;
  line-height: 1.25;
}

.auth-redesign .auth-benefits span:not(.auth-benefit-icon) {
  color: var(--auth-muted);
  font-size: 12px;
  line-height: 1.55;
}

.auth-redesign .auth-panel {
  width: 100%;
  max-width: 440px;
  justify-self: end;
  padding: 28px;
  background: var(--auth-panel);
  overflow: hidden;
}

.auth-redesign .auth-tabs {
  margin-bottom: 24px;
  padding: 4px;
  border-radius: 10px;
  background: rgba(255,255,255,.025);
}

.auth-redesign .auth-tab {
  min-height: 42px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.15;
}

.auth-redesign .auth-tab.active {
  background: linear-gradient(135deg, #5b7cfa, #8e66ee);
  box-shadow: 0 8px 24px rgba(91,124,250,.18);
}

.auth-redesign .auth-form-header h2 {
  font-family: 'Rajdhani', 'Inter', sans-serif;
  font-size: 2rem;
  letter-spacing: 0;
  line-height: 1.05;
}

.auth-redesign .auth-form-header p {
  color: var(--auth-muted);
  line-height: 1.55;
}

.auth-redesign .auth-google,
.auth-redesign .auth-discord,
.auth-redesign .auth-submit {
  min-height: 48px;
  border-radius: 10px;
  padding: 12px 14px;
  line-height: 1.2;
  text-align: center;
}

.auth-redesign .auth-google {
  background: #f7f8fb;
}

.auth-redesign .auth-discord {
  background: linear-gradient(135deg, #5865f2, #6571f4);
}

.auth-redesign .auth-google__mark,
.auth-redesign .auth-discord__mark {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}

.auth-redesign .auth-google__mark {
  background: transparent;
  border-radius: 0;
}

.auth-redesign .auth-google__mark svg,
.auth-redesign .auth-discord__mark svg {
  display: block;
  width: 18px;
  height: 18px;
}

.auth-redesign .auth-discord__mark {
  border-radius: 7px;
  background: rgba(255,255,255,.16);
}

.auth-redesign .auth-discord__mark svg {
  fill: currentColor;
}

.auth-redesign .auth-separator {
  letter-spacing: 0;
}

.auth-redesign .auth-field input,
.auth-redesign .auth-field select,
.auth-redesign .auth-field textarea {
  border-color: rgba(255,255,255,.085);
  background: #080b14;
}

.auth-redesign .auth-row--end {
  justify-content: flex-end;
}

.auth-redesign .auth-field input:focus,
.auth-redesign .auth-field select:focus,
.auth-redesign .auth-field textarea:focus {
  border-color: rgba(91,124,250,.62);
  box-shadow: 0 0 0 3px rgba(91,124,250,.11);
}

.auth-redesign .auth-submit {
  border: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(135deg, #5b7cfa, #9b6bff);
  box-shadow: 0 12px 30px rgba(91,124,250,.2);
}

.auth-redesign .profile-create-block {
  border-color: rgba(255,255,255,.075);
  background: rgba(255,255,255,.018);
}

.auth-redesign .auth-status {
  display: none;
  min-height: 0;
  margin-top: 16px;
  padding: 11px 12px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.45;
}

.auth-redesign .auth-status:not(:empty) {
  display: block;
}

.auth-redesign .auth-status.auth-success {
  color: #bbf7d0;
  background: rgba(22,101,52,.18);
  border: 1px solid rgba(74,222,128,.28);
}

.auth-redesign .auth-status.auth-error {
  color: #fecaca;
  background: rgba(127,29,29,.2);
  border: 1px solid rgba(248,113,113,.3);
}

@media (max-width: 1024px) {
  .home-redesign .home-hero {
    padding-left: 32px;
    padding-right: 32px;
  }

  .home-redesign .home-hero__layout {
    gap: 34px;
    grid-template-columns: minmax(0, 1fr) minmax(330px, .82fr);
  }

  .home-redesign .home-section,
  .home-redesign #games.section {
    padding-left: 32px;
    padding-right: 32px;
  }

  .auth-redesign .auth-page {
    padding-left: 32px;
    padding-right: 32px;
  }

  .auth-redesign .auth-shell {
    grid-template-columns: minmax(0, .9fr) minmax(360px, 420px);
  }

  .auth-redesign .auth-aside {
    padding: 32px;
  }

  .auth-redesign .auth-aside h1 {
    font-size: 4.1rem;
  }
}

@media (max-width: 900px) {
  .home-redesign .home-hero {
    min-height: auto;
    padding-top: 118px;
  }

  .home-redesign .home-hero__layout {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .home-redesign .home-hero__content {
    max-width: 760px;
  }

  .home-redesign .home-team-preview {
    width: min(620px, 100%);
    transform: none;
  }

  .home-redesign .home-games-grid,
  .home-redesign .home-features-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-redesign .home-game-card:last-child {
    grid-column: 1 / -1;
  }

  .home-redesign .home-about-panel {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .auth-redesign .auth-shell {
    grid-template-columns: 1fr;
  }

  .auth-redesign .auth-aside {
    min-height: auto;
  }

  .auth-redesign .auth-panel {
    max-width: none;
    justify-self: stretch;
  }

  .auth-redesign .auth-aside h1 {
    margin-top: 42px;
    font-size: 3.8rem;
  }

  .auth-redesign .auth-benefits {
    grid-template-columns: repeat(3, 1fr);
  }

  .auth-redesign .auth-benefit {
    grid-template-columns: 1fr;
    padding: 14px;
  }
}

@media (max-width: 680px) {
  .home-redesign .home-hero,
  .home-redesign .home-section {
    padding-left: 18px;
    padding-right: 18px;
  }

  .home-redesign .home-hero {
    padding-top: 106px;
    padding-bottom: 68px;
  }

  .home-redesign .home-hero h1 {
    font-size: clamp(2.25rem, 11vw, 3rem);
  }

  .home-redesign .home-hero__copy {
    font-size: 14px;
  }

  .home-redesign .home-hero__actions,
  .home-redesign .home-cta-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .home-redesign .home-btn {
    width: 100%;
  }

  .home-redesign .home-team-preview {
    padding: 14px;
    border-radius: 15px;
  }

  .home-redesign .home-preview-card {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  .home-redesign .home-preview-status {
    grid-column: 2;
    max-width: none;
    text-align: left;
  }

  .home-redesign .home-section,
  .home-redesign #games.section {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .home-redesign .home-section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 28px;
  }

  .home-redesign .home-games-grid,
  .home-redesign .home-features-grid {
    grid-template-columns: 1fr;
  }

  .home-redesign .home-game-card:last-child {
    grid-column: auto;
  }

  .home-redesign .home-game-card {
    min-height: 220px;
  }

  .home-redesign .home-about-panel,
  .home-redesign .home-cta-box {
    padding: 30px 22px;
  }

  .home-redesign .home-role-cloud {
    grid-template-columns: 1fr 1fr;
  }

  .home-redesign .home-footer {
    padding-left: 18px;
    padding-right: 18px;
  }

  .auth-redesign .auth-page {
    padding: 92px 16px 34px;
  }

  .auth-redesign .auth-aside,
  .auth-redesign .auth-panel {
    border-radius: 16px;
  }

  .auth-redesign .auth-aside {
    padding: 26px 22px 30px;
  }

  .auth-redesign .auth-aside h1 {
    margin-top: 30px;
    font-size: 3.1rem;
  }

  .auth-redesign .auth-aside p {
    font-size: 13px;
  }

  .auth-redesign .auth-tabs {
    grid-template-columns: 1fr 1fr;
  }

  .auth-redesign .auth-benefits {
    grid-template-columns: 1fr;
    margin-top: 30px;
  }

  .auth-redesign .auth-benefit {
    grid-template-columns: 30px minmax(0, 1fr);
    min-height: auto;
    padding: 13px;
  }

  .auth-redesign .auth-panel {
    padding: 22px 16px;
  }

  .auth-redesign .auth-grid {
    grid-template-columns: 1fr;
  }

  .auth-redesign .auth-field input,
  .auth-redesign .auth-field select,
  .auth-redesign .auth-field textarea {
    font-size: 16px;
  }
}

@media (max-width: 390px) {
  .home-redesign .home-hero__games {
    gap: 7px;
    font-size: 8px;
  }

  .home-redesign .home-team-preview__topbar {
    align-items: flex-start;
  }

  .home-redesign .home-live-badge {
    padding: 5px 7px;
  }

  .home-redesign .home-role-cloud {
    grid-template-columns: 1fr;
  }

  .auth-redesign .auth-page {
    padding-left: 12px;
    padding-right: 12px;
  }

  .auth-redesign .auth-aside {
    padding: 22px 18px;
  }

  .auth-redesign .auth-aside h1 {
    font-size: 2.8rem;
  }

  .auth-redesign .auth-panel {
    padding: 18px 14px;
  }

  .auth-redesign .auth-tab {
    padding-left: 8px;
    padding-right: 8px;
    font-size: 11px;
  }
}

#page-profile.profile-redesign {
  --profile-bg: #060b16;
  --profile-panel: rgba(8, 13, 28, 0.86);
  --profile-panel-strong: rgba(11, 18, 37, 0.94);
  --profile-border: rgba(255, 255, 255, 0.1);
  --profile-border-strong: rgba(91, 141, 255, 0.26);
  --profile-muted: rgba(198, 210, 236, 0.7);
  --profile-blue: #38bdf8;
  --profile-violet: #8b5cf6;
  --profile-teal: #5eead4;
  --profile-danger: #fb7185;
}

.profile-redesign [hidden] {
  display: none !important;
}

.profile-redesign .profile-page {
  min-height: 100vh;
  padding: 96px 32px 56px;
  background:
    radial-gradient(circle at 14% 10%, rgba(56, 189, 248, 0.16), transparent 30%),
    radial-gradient(circle at 86% 12%, rgba(139, 92, 246, 0.16), transparent 31%),
    linear-gradient(135deg, #060b16 0%, #0a1020 52%, #12091f 100%);
}

.profile-redesign .profile-back {
  width: max-content;
  max-width: calc(100vw - 32px);
  margin: 0 auto 18px;
}

.profile-redesign .profile-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  width: min(1160px, 100%);
  max-width: none;
  margin: 0 auto;
  align-items: start;
}

.profile-redesign .profile-hero-card,
.profile-redesign .profile-editor,
.profile-redesign .profile-panel {
  border: 1px solid var(--profile-border);
  border-radius: 16px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)),
    var(--profile-panel);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(18px);
}

.profile-redesign .profile-hero-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.52fr) auto;
  gap: 22px;
  align-items: center;
  min-height: 190px;
  padding: 24px;
  position: relative;
  overflow: hidden;
}

.profile-redesign .profile-hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(56, 189, 248, 0.14), transparent 42%),
    radial-gradient(circle at 76% 18%, rgba(139, 92, 246, 0.22), transparent 28%);
}

.profile-redesign .profile-hero-card > * {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.profile-redesign .profile-hero-main {
  display: flex;
  gap: 20px;
  align-items: center;
  min-width: 0;
}

.profile-redesign .profile-avatar-large {
  width: 112px;
  height: 112px;
  flex: 0 0 112px;
  border: 1px solid rgba(94, 234, 212, 0.22);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(56, 189, 248, 0.22), rgba(139, 92, 246, 0.2)),
    rgba(255, 255, 255, 0.05);
  background-size: cover;
  background-position: center;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32), inset 0 0 22px rgba(94, 234, 212, 0.08);
  color: #eff6ff;
  font-size: 28px;
  font-weight: 950;
}

.profile-redesign .profile-identity {
  min-width: 0;
}

.profile-redesign .profile-eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-bottom: 9px;
  padding: 4px 9px;
  border: 1px solid rgba(94, 234, 212, 0.24);
  border-radius: 999px;
  background: rgba(20, 184, 166, 0.09);
  color: #a7f3d0;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.profile-redesign .profile-identity h1 {
  color: var(--text-primary);
  font-size: 2.35rem;
  line-height: 1.05;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.profile-redesign .profile-identity p {
  max-width: 650px;
  margin-top: 10px;
  color: var(--profile-muted);
  font-size: 14px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.profile-redesign .profile-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.profile-redesign .profile-stat {
  min-height: 74px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.045);
}

.profile-redesign .profile-stat span {
  color: rgba(198, 210, 236, 0.62);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.profile-redesign .profile-stat strong {
  color: #f8fafc;
  font-size: 14px;
  font-weight: 950;
  overflow-wrap: anywhere;
}

.profile-redesign .profile-logout {
  align-self: stretch;
  width: 126px;
  min-height: 42px;
  margin-top: 0;
}

.profile-redesign .profile-main-grid,
.profile-redesign .profile-below-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
  gap: 18px;
  align-items: start;
}

.profile-redesign .profile-editor,
.profile-redesign .profile-panel {
  display: grid;
  gap: 16px;
  padding: 22px;
}

.profile-redesign .profile-form-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.profile-redesign .auth-field input,
.profile-redesign .auth-field select,
.profile-redesign .auth-field textarea {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(2, 6, 23, 0.52);
}

.profile-redesign .profile-photo-upload {
  align-self: stretch;
  justify-content: center;
  padding: 12px;
  border: 1px solid rgba(91, 124, 250, 0.24);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(91, 124, 250, 0.08), rgba(155, 107, 255, 0.055));
}

.profile-redesign .profile-photo-upload.is-disabled {
  border-color: rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 42, 0.38);
  opacity: .68;
}

.profile-redesign .profile-photo-upload > span {
  color: #f8fafc;
  font-size: 12px;
  font-weight: 900;
}

.profile-redesign .profile-photo-upload input[type="file"] {
  max-width: 100%;
  color: rgba(226, 232, 240, 0.62);
}

.profile-redesign .profile-photo-upload.is-disabled input[type="file"] {
  color: rgba(148, 163, 184, 0.62);
}

.profile-redesign .profile-photo-upload input[type="file"]::file-selector-button,
.profile-redesign .profile-photo-upload input[type="file"]::-webkit-file-upload-button {
  min-height: 36px;
  margin-right: 10px;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9px;
  background: linear-gradient(135deg, #5b7cfa, #9b6bff);
  color: #ffffff;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(91, 124, 250, 0.18);
  transition: transform .15s, box-shadow .2s, border-color .2s;
}

.profile-redesign .profile-photo-upload input[type="file"]::file-selector-button:hover,
.profile-redesign .profile-photo-upload input[type="file"]::-webkit-file-upload-button:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 14px 30px rgba(91, 124, 250, 0.24);
}

.profile-redesign .profile-photo-upload.is-disabled input[type="file"]::file-selector-button,
.profile-redesign .profile-photo-upload.is-disabled input[type="file"]::-webkit-file-upload-button,
.profile-redesign .profile-photo-upload.is-disabled input[type="file"]::file-selector-button:hover,
.profile-redesign .profile-photo-upload.is-disabled input[type="file"]::-webkit-file-upload-button:hover {
  cursor: not-allowed;
  transform: none;
  border-color: rgba(148, 163, 184, 0.14);
  background: rgba(71, 85, 105, 0.42);
  color: rgba(226, 232, 240, 0.66);
  box-shadow: none;
}

.profile-redesign .auth-field--locked input[readonly] {
  cursor: default;
  border-color: rgba(148, 163, 184, 0.18);
  background: rgba(15, 23, 42, 0.42);
  color: rgba(226, 232, 240, 0.72);
}

.profile-redesign .profile-locked-value {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  padding: 0 13px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.58), rgba(10, 16, 31, 0.58)),
    rgba(15, 23, 42, 0.58);
  color: rgba(226, 232, 240, 0.76);
  font-size: 14px;
  font-weight: 850;
  line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.profile-redesign .profile-save-button,
.profile-redesign .profile-panel-cta {
  min-height: 44px;
  border-radius: 10px;
}

.profile-redesign .profile-linked-accounts {
  align-self: stretch;
  align-content: start;
  gap: 14px;
}

.profile-redesign .profile-provider-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  padding: 15px;
  border: 1px solid rgba(129, 140, 248, 0.3);
  border-radius: 12px;
  background:
    radial-gradient(circle at 12% 0%, rgba(129, 140, 248, 0.24), transparent 36%),
    linear-gradient(135deg, rgba(88, 101, 242, 0.18), rgba(15, 23, 42, 0.66));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 16px 32px rgba(3, 7, 18, 0.2);
  transition: transform .16s, border-color .2s, background .2s, box-shadow .2s;
}

.profile-redesign .profile-provider-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, #a5b4fc, #5865f2);
  opacity: .95;
}

.profile-redesign .profile-provider-card:hover {
  transform: translateY(-1px);
  border-color: rgba(165, 180, 252, 0.45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 18px 36px rgba(3, 7, 18, 0.26);
}

.profile-redesign .profile-provider-avatar {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), transparent 38%),
    #5865f2;
  background-position: center;
  background-size: cover;
  color: #fff;
  font-size: 18px;
  font-weight: 950;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 10px 22px rgba(88, 101, 242, 0.32);
}

.profile-redesign .profile-provider-avatar svg {
  width: 25px;
  height: 25px;
  display: block;
  fill: currentColor;
}

.profile-redesign .profile-provider-main {
  min-width: 0;
}

.profile-redesign .profile-provider-title {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.profile-redesign .profile-provider-title strong {
  color: #f8fafc;
  font-size: 15px;
  font-weight: 950;
}

.profile-redesign .profile-provider-title p,
.profile-redesign .profile-provider-main p {
  margin-top: 4px;
  color: rgba(226, 232, 240, 0.72);
  font-size: 12px;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.profile-redesign .profile-provider-badge {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(34, 197, 94, 0.16);
  color: #bbf7d0;
  font-size: 10px;
  font-weight: 950;
}

.profile-redesign .profile-provider-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.profile-redesign .profile-provider-button,
.profile-redesign .profile-panel-cta,
.profile-redesign .profile-listing-action,
.profile-redesign .profile-icon-action {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #f8fafc;
  font: inherit;
  font-size: 12px;
  font-weight: 950;
  cursor: pointer;
  transition: transform .15s, border-color .2s, background .2s, box-shadow .2s;
}

.profile-redesign .profile-provider-button,
.profile-redesign .profile-panel-cta,
.profile-redesign .profile-listing-action {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 9px;
}

.profile-redesign .profile-panel-cta {
  width: 100%;
  margin-top: 2px;
  border-color: rgba(56, 189, 248, 0.24);
  background: rgba(56, 189, 248, 0.08);
  color: #dbeafe;
}

.profile-redesign .profile-provider-button:hover,
.profile-redesign .profile-panel-cta:hover,
.profile-redesign .profile-listing-action:hover,
.profile-redesign .profile-icon-action:hover {
  transform: translateY(-1px);
  border-color: rgba(94, 234, 212, 0.34);
  background: rgba(20, 184, 166, 0.11);
}

.profile-redesign .profile-provider-button--danger,
.profile-redesign .profile-icon-action--danger,
.profile-redesign .profile-listing-action--danger {
  border-color: rgba(251, 113, 133, 0.28);
  background: rgba(127, 29, 29, 0.16);
  color: #fecdd3;
}

.profile-redesign .profile-provider-button--danger:hover,
.profile-redesign .profile-icon-action--danger:hover,
.profile-redesign .profile-listing-action--danger:hover {
  border-color: rgba(251, 113, 133, 0.42);
  background: rgba(127, 29, 29, 0.24);
}

.profile-redesign .profile-provider-button:disabled,
.profile-redesign .profile-panel-cta:disabled,
.profile-redesign .profile-listing-action:disabled,
.profile-redesign .profile-icon-action:disabled {
  cursor: not-allowed;
  opacity: .55;
  transform: none;
}

.profile-redesign .profile-linked-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.profile-redesign .profile-linked-list > span {
  position: relative;
  min-height: 86px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 12px 12px 12px 14px;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 11px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(15, 23, 42, 0.36)),
    rgba(15, 23, 42, 0.54);
  color: rgba(226, 232, 240, 0.78);
  font-size: 12px;
  font-weight: 800;
  overflow-wrap: anywhere;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 10px 24px rgba(3, 7, 18, 0.16);
  overflow: hidden;
  transition: transform .16s, border-color .2s, background .2s, box-shadow .2s;
}

.profile-redesign .profile-linked-list > span::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: rgba(148, 163, 184, 0.36);
}

.profile-redesign .profile-linked-list > span::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.5);
  box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.08);
}

.profile-redesign .profile-linked-list > span:hover {
  transform: translateY(-1px);
  border-color: rgba(125, 211, 252, 0.28);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(15, 23, 42, 0.42)),
    rgba(15, 23, 42, 0.66);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 14px 28px rgba(3, 7, 18, 0.22);
}

.profile-redesign .profile-linked-brand {
  gap: 12px;
}

.profile-redesign .profile-linked-brand-icon {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  color: #ffffff;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.13),
    0 8px 18px rgba(3, 7, 18, 0.2);
}

.profile-redesign .profile-linked-brand-icon svg {
  width: 22px;
  height: 22px;
  display: block;
  fill: currentColor;
}

.profile-redesign .profile-linked-brand-copy {
  min-width: 0;
  display: grid;
  justify-content: start;
  gap: 4px;
  min-height: 0;
  padding: 0 8px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
}

.profile-redesign .profile-linked-brand-copy [data-linked-brand-value] {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
  white-space: normal;
}

.profile-redesign .profile-linked-brand-copy strong {
  color: #f8fafc;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.15;
}

.profile-redesign .profile-linked-brand-copy [data-linked-brand-value] {
  min-width: 0;
  color: rgba(226, 232, 240, 0.66);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.profile-redesign .profile-linked-brand.is-linked {
  border-color: rgba(94, 234, 212, 0.3);
  background:
    linear-gradient(145deg, rgba(45, 212, 191, 0.12), rgba(15, 23, 42, 0.46)),
    rgba(15, 23, 42, 0.62);
}

.profile-redesign .profile-linked-brand.is-linked::after {
  background: #5eead4;
  box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.12), 0 0 16px rgba(94, 234, 212, 0.45);
}

.profile-redesign .profile-linked-brand.is-linked [data-linked-brand-value] {
  color: #ccfbf1;
}

.profile-redesign .profile-linked-brand--riot::before {
  background: linear-gradient(180deg, #fb7185, #d13639);
}

.profile-redesign .profile-linked-brand--riot .profile-linked-brand-icon {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.16), transparent 42%),
    #d13639;
}

.profile-redesign .profile-linked-brand--activision::before {
  background: linear-gradient(180deg, #d1d5db, #64748b);
}

.profile-redesign .profile-linked-brand--activision .profile-linked-brand-icon {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.13), transparent 46%),
    #111827;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.profile-redesign .profile-linked-brand--activision .profile-linked-brand-icon svg {
  width: 30px;
  height: 30px;
}

.profile-redesign .profile-linked-brand--epic::before {
  background: linear-gradient(180deg, #facc15, #121212);
}

.profile-redesign .profile-linked-brand--epic .profile-linked-brand-icon {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.13), transparent 46%),
    #121212;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.profile-redesign .profile-linked-status {
  min-height: 20px;
  color: #bfdbfe;
  font-size: 12px;
  font-weight: 800;
}

.profile-redesign .profile-listings-panel,
.profile-redesign .profile-teams-panel {
  grid-column: auto;
}

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

.profile-redesign .profile-listing-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}

.profile-redesign .profile-listing-icon,
.profile-redesign .profile-team-logo {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 950;
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.08);
}

.profile-redesign .profile-listing-icon--valorant {
  background: linear-gradient(135deg, #ff4655, #7f1d1d);
}

.profile-redesign .profile-listing-icon--bo7 {
  background: linear-gradient(135deg, #22c55e, #14532d);
}

.profile-redesign .profile-listing-icon--warzone {
  background: linear-gradient(135deg, #f59e0b, #713f12);
}

.profile-redesign .profile-listing-icon--rl,
.profile-redesign .profile-team-logo {
  background: linear-gradient(135deg, #38bdf8, #4338ca);
}

.profile-redesign .profile-listing-info,
.profile-redesign .profile-team-main {
  min-width: 0;
}

.profile-redesign .profile-listing-title,
.profile-redesign .profile-team-name {
  color: #f8fafc;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.32;
  overflow-wrap: anywhere;
}

.profile-redesign .profile-listing-desc,
.profile-redesign .profile-team-desc {
  display: -webkit-box;
  margin-top: 5px;
  overflow: hidden;
  color: rgba(198, 210, 236, 0.72);
  font-size: 12px;
  line-height: 1.5;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.profile-redesign .profile-listing-meta,
.profile-redesign .profile-team-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 7px;
  color: rgba(198, 210, 236, 0.64);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
}

.profile-redesign .profile-meta-dot {
  width: 4px;
  height: 4px;
  flex: 0 0 4px;
  border-radius: 50%;
  background: rgba(94, 234, 212, 0.74);
}

.profile-redesign .profile-status-pill {
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 950;
  white-space: nowrap;
}

.profile-redesign .profile-status-pill--open {
  background: rgba(34, 197, 94, 0.16);
  color: #bbf7d0;
}

.profile-redesign .profile-status-pill--closed {
  background: rgba(148, 163, 184, 0.16);
  color: #e2e8f0;
}

.profile-redesign .profile-status-pill--archived {
  background: rgba(251, 113, 133, 0.16);
  color: #fecdd3;
}

.profile-redesign .profile-listing-actions {
  display: flex;
  gap: 7px;
}

.profile-redesign .profile-icon-action {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 34px;
  padding: 0;
  border-radius: 9px;
}

.profile-redesign .profile-icon-action svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.profile-redesign .profile-team-card {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}

.profile-redesign .profile-team-card__head {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
}

.profile-redesign .profile-roster-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.profile-redesign .profile-role-slot {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
}

.profile-redesign .profile-role-slot--filled {
  border: 1px solid rgba(94, 234, 212, 0.24);
  background: rgba(20, 184, 166, 0.12);
  color: #ccfbf1;
}

.profile-redesign .profile-role-slot--open {
  border: 1px solid rgba(96, 165, 250, 0.22);
  background: rgba(59, 130, 246, 0.11);
  color: #bfdbfe;
}

.profile-redesign .profile-roster-count {
  color: rgba(226, 232, 240, 0.78);
  font-size: 12px;
  font-weight: 900;
}

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

.profile-redesign .team-member-row,
.profile-redesign .team-member-form {
  border-radius: 10px;
  background: rgba(2, 6, 23, 0.32);
}

.profile-redesign .team-member-form {
  display: grid;
  grid-template-columns: minmax(112px, .38fr) minmax(0, 1fr) auto;
  gap: 8px;
}

.profile-redesign .team-member-form select,
.profile-redesign .team-member-form input {
  min-width: 0;
}

.auth-redesign .auth-field select,
.profile-redesign .auth-field select,
.profile-redesign .team-member-form select {
  padding-right: 44px;
  border-color: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  color: #f8fafc;
  font-weight: 800;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%238ea2ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 14px no-repeat,
    linear-gradient(135deg, rgba(91, 124, 250, 0.16), rgba(155, 107, 255, 0.1)) padding-box,
    linear-gradient(135deg, rgba(91, 124, 250, 0.58), rgba(155, 107, 255, 0.46)) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 10px 24px rgba(8, 12, 26, 0.22);
}

.auth-redesign .auth-field select:hover,
.profile-redesign .auth-field select:hover,
.profile-redesign .team-member-form select:hover {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23b6c2ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 14px no-repeat,
    linear-gradient(135deg, rgba(91, 124, 250, 0.22), rgba(155, 107, 255, 0.15)) padding-box,
    linear-gradient(135deg, rgba(91, 124, 250, 0.74), rgba(155, 107, 255, 0.6)) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 12px 28px rgba(91, 124, 250, 0.12);
}

.auth-redesign .auth-field select:focus,
.profile-redesign .auth-field select:focus,
.profile-redesign .team-member-form select:focus {
  border-color: transparent;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23d6dcff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center / 14px no-repeat,
    linear-gradient(135deg, rgba(91, 124, 250, 0.24), rgba(155, 107, 255, 0.18)) padding-box,
    linear-gradient(135deg, rgba(91, 124, 250, 0.92), rgba(155, 107, 255, 0.78)) border-box;
  box-shadow:
    0 0 0 1px rgba(91, 124, 250, 0.36),
    0 0 0 4px rgba(91, 124, 250, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.auth-redesign .auth-field select option,
.profile-redesign .auth-field select option,
.profile-redesign .team-member-form select option {
  background: #080d18;
  color: #f8fafc;
  font-weight: 700;
}

.auth-redesign .auth-native-select,
.profile-redesign .auth-native-select {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.auth-redesign .auth-select-shell,
.profile-redesign .auth-select-shell {
  position: relative;
  width: 100%;
  min-width: 0;
}

.auth-redesign .auth-select-shell.is-open,
.profile-redesign .auth-select-shell.is-open {
  z-index: 80;
}

.auth-redesign .auth-select-trigger,
.profile-redesign .auth-select-trigger {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px 0 15px;
  border: 1px solid rgba(91, 124, 250, 0.5);
  border-radius: 9px;
  background:
    linear-gradient(135deg, rgba(11, 17, 32, 0.96), rgba(8, 11, 22, 0.96)),
    rgba(8, 11, 22, 0.96);
  color: #f8fafc;
  font: inherit;
  font-size: 13px;
  font-weight: 850;
  text-align: left;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.055),
    0 10px 24px rgba(8, 12, 26, 0.2);
  transition: border-color .2s, box-shadow .2s, background .2s, transform .15s;
}

.auth-redesign .auth-select-value,
.profile-redesign .auth-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-redesign .auth-select-caret,
.profile-redesign .auth-select-caret {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid #8ea2ff;
  border-bottom: 2px solid #8ea2ff;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s, border-color .2s;
}

.auth-redesign .auth-select-trigger:hover,
.auth-redesign .auth-select-shell.is-open .auth-select-trigger,
.profile-redesign .auth-select-trigger:hover,
.profile-redesign .auth-select-shell.is-open .auth-select-trigger {
  border-color: rgba(139, 162, 255, 0.82);
  background:
    linear-gradient(135deg, rgba(16, 24, 46, 0.98), rgba(12, 16, 32, 0.98)),
    rgba(12, 16, 32, 0.98);
  box-shadow:
    0 0 0 1px rgba(91, 124, 250, 0.14),
    0 14px 30px rgba(91, 124, 250, 0.12);
}

.auth-redesign .auth-select-shell.is-open .auth-select-caret,
.profile-redesign .auth-select-shell.is-open .auth-select-caret {
  border-color: #c4ccff;
  transform: rotate(225deg) translate(-2px, -2px);
}

.auth-redesign .auth-select-trigger:focus-visible,
.profile-redesign .auth-select-trigger:focus-visible {
  outline: none;
  border-color: rgba(177, 190, 255, 0.92);
  box-shadow:
    0 0 0 1px rgba(91, 124, 250, 0.42),
    0 0 0 4px rgba(91, 124, 250, 0.14);
}

.auth-redesign .auth-select-trigger:disabled,
.profile-redesign .auth-select-trigger:disabled {
  cursor: not-allowed;
  opacity: .55;
  transform: none;
}

.profile-redesign .auth-field--locked .auth-select-trigger:disabled {
  cursor: default;
  opacity: 1;
  border-color: rgba(148, 163, 184, 0.18);
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.68), rgba(10, 16, 31, 0.68)),
    rgba(15, 23, 42, 0.68);
  color: rgba(226, 232, 240, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.profile-redesign .auth-field--locked .auth-select-trigger:disabled .auth-select-caret {
  border-color: rgba(148, 163, 184, 0.42);
}

.auth-redesign .auth-select-menu,
.profile-redesign .auth-select-menu {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  right: 0;
  display: none;
  max-height: 260px;
  overflow-y: auto;
  padding: 5px 0;
  border: 1px solid rgba(91, 124, 250, 0.5);
  border-radius: 8px;
  background: #050914;
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(255, 255, 255, 0.03);
  scrollbar-color: #8ea2ff #101624;
  scrollbar-width: thin;
}

.auth-redesign .auth-select-shell.is-open .auth-select-menu,
.profile-redesign .auth-select-shell.is-open .auth-select-menu {
  display: block;
}

.auth-redesign .auth-select-menu::-webkit-scrollbar,
.profile-redesign .auth-select-menu::-webkit-scrollbar {
  width: 10px;
}

.auth-redesign .auth-select-menu::-webkit-scrollbar-track,
.profile-redesign .auth-select-menu::-webkit-scrollbar-track {
  background: #101624;
  border-radius: 999px;
}

.auth-redesign .auth-select-menu::-webkit-scrollbar-thumb,
.profile-redesign .auth-select-menu::-webkit-scrollbar-thumb {
  background: #8ea2ff;
  border: 2px solid #101624;
  border-radius: 999px;
}

.auth-redesign .auth-select-option,
.profile-redesign .auth-select-option {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 0 15px;
  border: 0;
  background: transparent;
  color: #f8fafc;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  transition: background .16s, color .16s;
}

.auth-redesign .auth-select-option:hover,
.auth-redesign .auth-select-option:focus-visible,
.profile-redesign .auth-select-option:hover,
.profile-redesign .auth-select-option:focus-visible {
  outline: none;
  background: rgba(91, 124, 250, 0.16);
  color: #dce3ff;
}

.auth-redesign .auth-select-option.is-selected,
.profile-redesign .auth-select-option.is-selected {
  background: linear-gradient(90deg, rgba(91, 124, 250, 0.28), rgba(155, 107, 255, 0.18));
  color: #ffffff;
}

.auth-redesign .auth-select-option:disabled,
.profile-redesign .auth-select-option:disabled {
  cursor: not-allowed;
  color: rgba(148, 163, 184, 0.54);
}

.profile-redesign .team-editor {
  border-color: rgba(91, 141, 255, 0.18);
  border-radius: 14px;
  background: rgba(59, 130, 246, 0.055);
}

.profile-redesign .profile-empty-state {
  min-height: 86px;
  display: grid;
  place-items: center;
  padding: 18px;
  border: 1px dashed rgba(148, 163, 184, 0.24);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(226, 232, 240, 0.68);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

@media (max-width: 1024px) {
  .profile-redesign .profile-hero-card {
    grid-template-columns: 1fr;
  }

  .profile-redesign .profile-hero-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .profile-redesign .profile-logout {
    width: 100%;
  }

  .profile-redesign .profile-main-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .profile-redesign .profile-page {
    padding: 88px 24px 42px;
  }

  .profile-redesign .profile-below-grid {
    grid-template-columns: 1fr;
  }

  .profile-redesign .profile-hero-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .profile-redesign .profile-page {
    padding: 84px 16px 34px;
  }

  .profile-redesign .profile-hero-card,
  .profile-redesign .profile-editor,
  .profile-redesign .profile-panel {
    border-radius: 14px;
    padding: 18px;
  }

  .profile-redesign .profile-hero-main {
    align-items: flex-start;
    flex-direction: column;
  }

  .profile-redesign .profile-avatar-large {
    width: 92px;
    height: 92px;
    flex-basis: 92px;
    font-size: 23px;
  }

  .profile-redesign .profile-identity h1 {
    font-size: 1.9rem;
  }

  .profile-redesign .profile-form-grid {
    grid-template-columns: 1fr;
  }

  .profile-redesign .profile-listing-card {
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: start;
  }

  .profile-redesign .profile-status-pill,
  .profile-redesign .profile-listing-actions {
    grid-column: 2;
    justify-self: start;
  }

  .profile-redesign .profile-team-card__head {
    grid-template-columns: 42px minmax(0, 1fr) auto auto;
  }

  .profile-redesign .team-member-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px) {
  .profile-redesign .profile-page {
    padding-left: 12px;
    padding-right: 12px;
  }

  .profile-redesign .profile-hero-stats {
    grid-template-columns: 1fr;
  }

  .profile-redesign .profile-listing-card,
  .profile-redesign .profile-team-card {
    padding: 12px;
  }

  .profile-redesign .profile-provider-card {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .profile-redesign .profile-provider-actions {
    grid-column: 1 / -1;
    justify-content: stretch;
  }

  .profile-redesign .profile-provider-button {
    width: 100%;
  }

  .profile-redesign .profile-provider-avatar,
  .profile-redesign .profile-listing-icon,
  .profile-redesign .profile-team-logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }

  .profile-redesign .profile-team-card__head {
    grid-template-columns: 40px minmax(0, 1fr) 34px 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-redesign .home-btn,
  .home-redesign .home-game-card,
  .home-redesign .home-game-card img,
  .home-redesign .home-feature-card,
  .auth-redesign .auth-google,
  .auth-redesign .auth-discord,
  .profile-redesign .profile-provider-button,
  .profile-redesign .profile-panel-cta,
  .profile-redesign .profile-listing-action,
  .profile-redesign .profile-icon-action {
    transition: none !important;
  }

  .profile-redesign .profile-provider-card,
  .profile-redesign .profile-linked-list > span {
    transition: none !important;
  }

  .home-redesign .home-btn:hover,
  .home-redesign .home-game-card:hover,
  .home-redesign .home-feature-card:hover,
  .auth-redesign .auth-google:hover,
  .auth-redesign .auth-discord:hover,
  .profile-redesign .profile-provider-button:hover,
  .profile-redesign .profile-panel-cta:hover,
  .profile-redesign .profile-listing-action:hover,
  .profile-redesign .profile-icon-action:hover {
    transform: none !important;
  }

  .profile-redesign .profile-provider-card:hover,
  .profile-redesign .profile-linked-list > span:hover {
    transform: none !important;
  }
}