/* ============================================================
   CPW Tracker — Modern Broadcast Design Language
   Inspired by Next.js reference: Oswald + Barlow, dark theme
   ============================================================ */

/* ── CSS Variables (Design Tokens) ─────────────────────── */
/* These are static defaults. The DB-driven design tokens
   system overrides them via an inline <style> block in header.php.
   Change tokens from Admin → Design Tokens to update everywhere. */
:root {
    /* ── Background Colors ── */
    --bg-primary: #0a0a0a;
    --bg-surface: #111111;
    --bg-elevated: #1a1a1a;
    --bg-card: #161616;
    --bg-hover: #222222;

    /* ── Border Colors ── */
    --border: #2a2a2a;
    --border-light: #333333;

    /* ── Text Colors ── */
    --text-primary: #F5F5F5;
    --text-secondary: #A0A0A0;
    --text-muted: #666666;

    /* ── Accent Colors ── */
    --accent: #E57200;
    --accent-light: #FF8C1A;
    --accent-dark: #CC6600;
    --accent-glow: rgba(229, 114, 0, 0.08);
    --accent-glow-hover: rgba(229, 114, 0, 0.05);
    --accent-glow-medium: rgba(229, 114, 0, 0.2);

    /* ── Gold / Premium Colors ── */
    --gold: #D4AF37;
    --gold-light: #E8C84A;
    --gold-glow: rgba(212, 175, 55, 0.12);

    /* ── Semantic Colors ── */
    --color-success: #22C55E;
    --color-success-bg: rgba(34, 197, 94, 0.15);
    --color-success-bg-light: rgba(34, 197, 94, 0.1);
    --color-success-bg-hover: rgba(34, 197, 94, 0.25);
    --color-success-border: rgba(34, 197, 94, 0.3);

    --color-danger: #EF4444;
    --color-danger-bg: rgba(239, 68, 68, 0.15);
    --color-danger-bg-light: rgba(239, 68, 68, 0.1);
    --color-danger-bg-hover: rgba(239, 68, 68, 0.25);
    --color-danger-border: rgba(239, 68, 68, 0.3);

    --color-warning: #F59E0B;
    --color-warning-bg: rgba(245, 158, 11, 0.15);
    --color-warning-bg-light: rgba(245, 158, 11, 0.1);
    --color-warning-bg-hover: rgba(245, 158, 11, 0.25);
    --color-warning-border: rgba(245, 158, 11, 0.3);

    --color-info: #3B82F6;
    --color-info-bg: rgba(59, 130, 246, 0.15);
    --color-info-bg-light: rgba(59, 130, 246, 0.1);
    --color-info-bg-hover: rgba(59, 130, 246, 0.25);
    --color-info-border: rgba(59, 130, 246, 0.3);

    /* ── Medal Colors ── */
    --color-silver: #C0C0C0;
    --color-silver-bg: rgba(192, 192, 192, 0.1);
    --color-silver-bg-subtle: rgba(192, 192, 192, 0.08);
    --color-bronze: #CD7F32;
    --color-bronze-bg: rgba(205, 127, 50, 0.1);
    --color-bronze-bg-subtle: rgba(205, 127, 50, 0.08);

    /* ── Typography ── */
    --font-display: 'Oswald', sans-serif;
    --font-body: 'Barlow', sans-serif;
    --font-condensed: 'Barlow Condensed', sans-serif;

    --font-size-base: 16px;
    --font-size-xs: 0.65rem;
    --font-size-sm: 0.8rem;
    --font-size-md: 0.85rem;
    --font-size-lg: 1.1rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;

    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.7;

    --letter-spacing-tight: 0.02em;
    --letter-spacing-normal: 0.06em;
    --letter-spacing-wide: 0.12em;

    /* ── Spacing ── */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 0.75rem;
    --space-lg: 1rem;
    --space-xl: 1.5rem;
    --space-2xl: 2rem;
    --space-3xl: 3rem;

    /* ── Sizing ── */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius: 10px;
    --radius-lg: 14px;
    --radius-full: 50%;

    --nav-height: 80px;
    --nav-height-mobile: 56px;
    --content-max-width: 1400px;

    --avatar-sm: 28px;
    --avatar-md: 40px;
    --avatar-lg: 80px;

    /* ── Effects ── */
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 24px rgba(0,0,0,0.5);
    --shadow: 0 4px 24px rgba(0,0,0,0.5);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.6);

    --transition-fast: 0.15s;
    --transition-normal: 0.2s;
    --transition-slow: 0.3s;

    --overlay-light: rgba(0,0,0,0.5);
    --overlay-medium: rgba(0,0,0,0.7);
    --overlay-heavy: rgba(0,0,0,0.88);
}

/* ── Reset & Base ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: var(--font-size-base); -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; transition: color var(--transition-normal); }
a:hover { color: var(--accent-light); }

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

/* ── Typography ────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.font-display { font-family: var(--font-display); }
.font-condensed { font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; }
.text-accent { color: var(--accent); }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.gold-text { background: linear-gradient(135deg, var(--gold), var(--gold-light)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* ── Navigation ────────────────────────────────────────── */
.main-nav {
    position: sticky; top: 0; z-index: 100;
    background: rgba(10, 10, 10, 0.92);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border);
    padding: 0 1rem;
}
.nav-inner {
    max-width: var(--content-max-width); margin: 0 auto;
    display: flex; align-items: center; gap: var(--space-lg);
    height: var(--nav-height);
}
.nav-logo { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; flex-shrink: 0; }
.nav-logo-text {
    font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
    letter-spacing: 0.08em; color: var(--text-primary);
}
.nav-logo-text .logo-accent { color: var(--accent); }
.nav-logo-img { height: 64px; width: auto; }

.nav-links {
    display: flex; align-items: center; justify-content: center; gap: 0.25rem;
    flex: 1; overflow: visible;
}
.nav-link {
    font-family: var(--font-condensed); font-size: 0.78rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--text-muted); padding: 0.4rem 0.6rem; border-radius: var(--radius-xs);
    white-space: nowrap; transition: all 0.2s;
}
.nav-link:hover { color: var(--text-primary); background: var(--bg-hover); }
.nav-link-accent { color: var(--accent); }
.nav-link-accent:hover { color: var(--accent-light); }
.nav-separator { width: 1px; height: 20px; background: var(--border); margin: 0 0.25rem; flex-shrink: 0; }

/* ── Nav Submenu Groups ───────────────────────────────── */
.nav-group { position: relative; display: inline-flex; align-self: stretch; align-items: center; }
.nav-group-trigger {
    display: inline-flex; align-items: center; gap: 0.35rem;
    background: none; border: none; cursor: pointer;
    font-family: var(--font-condensed); font-size: 0.78rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--text-muted); padding: 0.4rem 0.6rem; border-radius: var(--radius-xs);
    white-space: nowrap; transition: all 0.2s;
}
.nav-group-trigger:hover { color: var(--text-primary); background: var(--bg-hover); }
.nav-group.open .nav-group-trigger { color: var(--accent); }
.icon-chevron {
    width: 10px; height: 10px; opacity: 0.5; flex-shrink: 0;
    transition: transform 0.2s;
}
.nav-group.open .icon-chevron { transform: rotate(180deg); opacity: 1; }

.nav-submenu {
    display: none; position: absolute; top: 100%; left: 0;
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: var(--radius-sm); min-width: 180px;
    box-shadow: var(--shadow); overflow: hidden; z-index: 200;
    padding: 0.25rem 0;
}
.nav-group:hover .nav-submenu,
.nav-group.open .nav-submenu { display: block; }
.nav-submenu .nav-link {
    display: flex; width: 100%; padding: 0.55rem 1rem;
    font-size: 0.75rem; border-radius: 0;
}
.nav-submenu .nav-link:hover { background: var(--bg-hover); }

/* ── News Mega Menu ─────────────────────────────────── */
.nav-mega {
    left: 0; transform: none;
    min-width: 620px; padding: 0;
    border-radius: var(--radius);
    overflow: visible;
}
.nav-mega-inner {
    display: flex; gap: 0; padding: 0;
}
.nav-mega-col {
    padding: 0.75rem 0; min-width: 150px;
}
.nav-mega-col:not(:last-child) {
    border-right: 1px solid var(--border);
}
.nav-mega-heading {
    font-family: var(--font-condensed); font-size: 0.6rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted);
    padding: 0.25rem 1rem 0.5rem; opacity: 0.7;
}
.nav-mega-col-articles {
    flex: 1; min-width: 200px;
}
.nav-mega-article {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.4rem 0.75rem; text-decoration: none; color: var(--text-primary);
    transition: background 0.15s;
}
.nav-mega-article:hover { background: var(--bg-hover); }
.nav-mega-article-img {
    width: 40px; height: 40px; border-radius: var(--radius-xs);
    object-fit: cover; flex-shrink: 0;
}
.nav-mega-article-text {
    display: flex; flex-direction: column; gap: 0.1rem; min-width: 0;
}
.nav-mega-article-cat {
    font-family: var(--font-condensed); font-size: 0.55rem; font-weight: 600;
    letter-spacing: 0.1em; color: var(--accent); opacity: 0.8;
}
.nav-mega-article-title {
    font-size: 0.72rem; font-weight: 500; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-mega-col-ppv {
    padding: 0.5rem; width: 180px; flex-shrink: 0;
}
.nav-mega-ppv {
    display: block; position: relative; border-radius: var(--radius-sm);
    overflow: hidden; text-decoration: none; height: 100%;
}
.nav-mega-ppv-img {
    width: 100%; height: 100%; object-fit: cover;
}
.nav-mega-ppv-overlay {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    justify-content: flex-end; padding: 0.6rem;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 60%);
}
.nav-mega-ppv-badge {
    font-family: var(--font-condensed); font-size: 0.5rem; font-weight: 700;
    letter-spacing: 0.15em; color: var(--accent);
    background: rgba(0,0,0,0.6); padding: 0.15rem 0.4rem;
    border-radius: var(--radius-xs); align-self: flex-start; margin-bottom: 0.25rem;
}
.nav-mega-ppv-name {
    font-family: var(--font-display); font-size: 0.85rem; font-weight: 700;
    color: var(--text-primary); line-height: 1.1;
}
.nav-mega-ppv-date {
    font-size: 0.6rem; color: rgba(255,255,255,0.7); margin-top: 0.15rem;
}

.nav-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.nav-notification { position: relative; padding: 0.4rem; border-radius: var(--radius-xs); color: var(--text-muted); }
.nav-notification:hover { color: var(--accent); background: var(--bg-hover); }
.notification-dot {
    position: absolute; top: 0; right: 0;
    background: var(--accent); color: #000; font-size: 0.65rem; font-weight: 700;
    min-width: 16px; height: 16px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}

.nav-user-menu { position: relative; }
.nav-user-btn {
    display: flex; align-items: center; gap: 0.5rem;
    background: none; border: none; cursor: pointer; padding: 0.3rem;
    border-radius: var(--radius-sm); color: var(--text-primary);
}
.nav-user-btn:hover { background: var(--bg-hover); }
.nav-avatar {
    width: var(--avatar-sm); height: var(--avatar-sm); border-radius: var(--radius-full);
    background: var(--accent-glow); color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: 0.75rem;
}
.nav-username { font-size: 0.8rem; font-weight: 500; display: none; }
@media (min-width: 768px) { .nav-username { display: inline; } }

.nav-dropdown {
    display: none; position: absolute; right: 0; top: 100%; margin-top: 0.5rem;
    background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm);
    min-width: 200px; box-shadow: var(--shadow); overflow: hidden; z-index: 200;
}
.nav-dropdown.show { display: block; }
.nav-dropdown-header { padding: 0.75rem 1rem; border-bottom: 1px solid var(--border); }
.nav-dropdown-name { font-weight: 600; font-size: 0.85rem; }
.nav-dropdown-role { font-size: 0.75rem; color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; }
.nav-dropdown-item {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.6rem 1rem; font-size: 0.8rem; color: var(--text-secondary); transition: all 0.15s;
}
.nav-dropdown-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.nav-dropdown-danger { color: var(--color-danger); }
.nav-dropdown-danger:hover { color: var(--color-danger); }
.nav-dropdown-divider { height: 1px; background: var(--border); }

.nav-hamburger {
    display: none; background: none; border: none; color: var(--text-muted);
    cursor: pointer; padding: 0.4rem; border-radius: var(--radius-xs);
}
.nav-hamburger:hover { color: var(--text-primary); background: var(--bg-hover); }

@media (max-width: 768px) {
    .main-nav { padding: 0; }
    .nav-inner { height: var(--nav-height-mobile); gap: 0; position: relative; }
    .nav-logo {
        position: absolute;
        left: 0; right: 0; top: 0; bottom: 0;
        justify-content: center;
        z-index: 0;
    }
    .nav-logo-img { height: 100%; width: 100%; object-fit: contain; }
    .nav-links { display: none !important; }
    .nav-right { margin-left: auto; z-index: 1; padding-right: 0.5rem; }
    .nav-hamburger { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
    .nav-notification-desktop { display: none !important; }
    .nav-separator { display: none; }
    .nav-username { display: none; }
    .nav-user-menu { display: none; }
    .nav-signin-btn { display: none !important; }
}

/* ── Mobile Drawer ────────────────────────────────────── */
.mobile-drawer-overlay {
    display: none; position: fixed; inset: 0; z-index: 900;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
}
.mobile-drawer-overlay.open {
    display: block;
    background: rgba(0, 0, 0, 0.6);
}

.mobile-drawer {
    display: none; position: fixed;
    top: 0; right: -100%; bottom: 0; z-index: 901;
    width: 300px; max-width: 85vw;
    background: var(--bg-primary);
    border-left: 1px solid var(--border);
    flex-direction: column;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}
@media (max-width: 768px) {
    .mobile-drawer { display: flex; }
}
.mobile-drawer.open { right: 0; }

.mobile-drawer-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem; gap: 0.75rem;
    border-bottom: 1px solid var(--border);
    min-height: 56px;
    background: var(--bg-surface);
}
.mobile-drawer-user {
    display: flex; align-items: center; gap: 0.6rem; flex: 1; min-width: 0;
}
.mobile-drawer-avatar {
    width: 36px; height: 36px; font-size: 0.85rem; flex-shrink: 0;
}
.mobile-drawer-user-info { min-width: 0; flex: 1; }
.mobile-drawer-user-name {
    font-size: 0.85rem; font-weight: 600; color: var(--text-primary);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mobile-drawer-user-role {
    font-family: var(--font-condensed); font-size: 0.6rem;
    text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--accent);
}
.mobile-drawer-notif {
    position: relative; padding: 0.3rem; color: var(--text-muted); flex-shrink: 0;
}
.mobile-drawer-close {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); padding: 0.3rem;
    border-radius: var(--radius-xs); flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    transition: all 0.15s;
}
.mobile-drawer-close:hover { color: var(--text-primary); background: var(--bg-hover); }
.mobile-drawer-close i, .mobile-drawer-close svg { width: 20px; height: 20px; }

.mobile-drawer-body {
    flex: 1; overflow-y: auto; overflow-x: hidden;
    padding: 0.5rem 0;
    -webkit-overflow-scrolling: touch;
}

.mobile-drawer-link {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.7rem 1.25rem; text-decoration: none;
    font-family: var(--font-condensed); font-size: 0.85rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--text-muted);
    background: none; border: none; cursor: pointer; width: 100%;
    transition: all 0.15s;
}
.mobile-drawer-link:hover, .mobile-drawer-link:active {
    color: var(--text-primary); background: var(--bg-hover);
}
.mobile-drawer-link i, .mobile-drawer-link svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.6; }
.mobile-drawer-link-accent { color: var(--accent); }
.mobile-drawer-link-accent i, .mobile-drawer-link-accent svg { opacity: 0.8; }

.mobile-drawer-trigger { position: relative; }
.mobile-drawer-chevron {
    width: 14px !important; height: 14px !important;
    margin-left: auto; opacity: 0.4 !important;
    transition: transform 0.25s ease;
}
.mobile-drawer-group.open .mobile-drawer-chevron {
    transform: rotate(180deg); opacity: 0.8 !important;
}
.mobile-drawer-group.open > .mobile-drawer-trigger {
    color: var(--accent);
}

.mobile-drawer-sub {
    max-height: 0; overflow: hidden;
    transition: max-height 0.3s ease;
    background: rgba(255,255,255,0.02);
}
.mobile-drawer-group.open .mobile-drawer-sub {
    max-height: 400px;
}
.mobile-drawer-sublink {
    display: flex; align-items: center; gap: 0.65rem;
    padding: 0.55rem 1.25rem 0.55rem 3rem; text-decoration: none;
    font-family: var(--font-condensed); font-size: 0.75rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted);
    transition: all 0.15s;
}
.mobile-drawer-sublink:hover, .mobile-drawer-sublink:active {
    color: var(--text-primary); background: var(--bg-hover);
}
.mobile-drawer-sublink i, .mobile-drawer-sublink svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.5; }

.mobile-drawer-divider {
    height: 1px; background: var(--border); margin: 0.4rem 1rem;
}

.mobile-drawer-footer {
    border-top: 1px solid var(--border);
    padding: 0.5rem; display: flex; gap: 0;
    background: var(--bg-surface);
}
.mobile-drawer-footer-link {
    display: flex; align-items: center; justify-content: center; gap: 0.35rem;
    flex: 1; padding: 0.6rem 0.25rem; text-decoration: none;
    font-family: var(--font-condensed); font-size: 0.6rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-muted); border-radius: var(--radius-xs);
    transition: all 0.15s;
}
.mobile-drawer-footer-link:hover { color: var(--text-primary); background: var(--bg-hover); }
.mobile-drawer-footer-link i, .mobile-drawer-footer-link svg { width: 14px; height: 14px; opacity: 0.5; }
.mobile-drawer-footer-danger { color: var(--color-danger); }
.mobile-drawer-footer-danger:hover { color: var(--color-danger); }

/* ── Main Content ──────────────────────────────────────── */
.main-content {
    max-width: var(--content-max-width); margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
    min-height: calc(100vh - 56px - 200px);
}

/* ── Footer ────────────────────────────────────────────── */
.site-footer {
    border-top: 1px solid var(--border);
    background: var(--bg-surface);
}
.footer-inner { max-width: var(--content-max-width); margin: 0 auto; padding: var(--space-2xl) var(--space-lg); }
.footer-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-bottom: 2rem;
}
@media (max-width: 768px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-brand-name {
    font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
    letter-spacing: 0.06em; margin-bottom: 0.5rem;
}
.footer-brand-name .logo-accent { color: var(--accent); }
.footer-desc { color: var(--text-muted); font-size: 0.85rem; line-height: 1.5; }
.footer-heading {
    font-family: var(--font-display); font-size: 0.78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); margin-bottom: 0.75rem;
}
.footer-link-list { display: flex; flex-direction: column; gap: 0.4rem; }
.footer-link-list a { font-size: 0.85rem; color: var(--text-muted); transition: color 0.2s; }
.footer-link-list a:hover { color: var(--text-primary); }
.footer-bottom {
    border-top: 1px solid var(--border); padding-top: 1.5rem;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
}
.footer-copy {
    font-family: var(--font-condensed); font-size: 0.75rem;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.12em;
}
.footer-live {
    display: flex; align-items: center; gap: 0.4rem;
}
.footer-live-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: pulse 2s infinite;
}
.footer-live-text {
    font-family: var(--font-condensed); font-size: 0.75rem;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.12em;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ── Cards ─────────────────────────────────────────────── */
.card {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius); transition: all 0.2s;
    display: block;
}
.card:hover { border-color: var(--border-light); transform: translateY(-1px); }
.card-static { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color 0.2s; }
a.card-static:hover, .card-static.clickable:hover { border-color: var(--border-light); }

.editorial-card {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius); position: relative; overflow: hidden;
    transition: all 0.2s;
}
.editorial-card:hover { border-color: var(--accent); }
.editorial-card-accent {
    position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(180deg, var(--accent), transparent);
}

.vs-card {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius); position: relative; overflow: hidden;
    transition: all 0.2s;
}
.vs-card::before {
    content: 'VS'; position: absolute; right: -10px; top: -10px;
    font-family: var(--font-display); font-size: 4rem; font-weight: 900;
    opacity: 0.04; pointer-events: none;
}

.superstar-card {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius); position: relative; overflow: hidden;
    transition: all 0.2s;
}
.superstar-card:hover { border-color: var(--accent); }
.superstar-avatar {
    width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
    background: var(--accent-glow); color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
}

/* Title card (championship gold border glow) */
.title-card {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius); position: relative; overflow: hidden;
    transition: all 0.2s;
}
.title-card:hover { border-color: var(--gold); }
.title-card::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at top right, rgba(212,175,55,0.06), transparent 70%);
}

/* Show card — large centered logo */
.show-card {
    background: var(--bg-surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); position: relative; overflow: hidden;
    transition: all 0.2s; display: flex; flex-direction: column;
}
.show-card:hover { border-color: var(--border-light); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.show-card-hero {
    position: relative; display: flex; align-items: center; justify-content: center;
    min-height: 160px; padding: 2rem 1.5rem;
    background: radial-gradient(ellipse at center, var(--show-color-dim) 0%, transparent 70%);
}
.show-card-hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, transparent 60%, var(--bg-surface) 100%);
}
.show-card-logo { position: relative; max-height: 80px; max-width: 70%; width: auto; filter: drop-shadow(0 4px 12px rgba(0,0,0,.4)); }
.show-card-name {
    position: relative; font-family: var(--font-display); font-size: clamp(1.5rem,3vw,2rem);
    font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; text-align: center;
}
.show-card-body { padding: 0 1.25rem 1.25rem; flex: 1; display: flex; flex-direction: column; }
.show-card-type {
    font-size: 0.6rem; font-weight: 700; font-family: var(--font-display);
    text-transform: uppercase; letter-spacing: 0.08em; padding: 0.15rem 0.5rem;
    border-radius: 4px; display: inline-block; align-self: center; margin-bottom: 0.5rem;
}
.show-card-desc { text-align: center; color: var(--text-secondary); font-size: 0.85rem; line-height: 1.5; margin-bottom: auto; }
.show-card-footer {
    margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
}

/* ── Buttons ───────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    padding: 0.5rem 1rem; border-radius: var(--radius-xs); border: none;
    font-family: var(--font-display); font-weight: 600; font-size: 0.85rem;
    text-transform: uppercase; letter-spacing: 0.06em;
    cursor: pointer; transition: all 0.2s; text-decoration: none;
}
.btn-primary {
    background: var(--accent); color: #000;
}
.btn-primary:hover { background: var(--accent-light); color: #000; }
.btn-ghost {
    background: transparent; color: var(--text-secondary); border: 1px solid var(--border);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-success { background: var(--color-success-bg); color: var(--color-success); }
.btn-success:hover { background: var(--color-success-bg-hover); }
.btn-danger { background: var(--color-danger-bg); color: var(--color-danger); }
.btn-danger:hover { background: var(--color-danger-bg-hover); }
.btn-sm { padding: 0.4rem 0.85rem; font-size: 0.78rem; }
.btn-full { width: 100%; }

/* Filter tabs (show page type filter) */
.filter-tab {
    padding: 0.5rem 1rem;
    font-family: var(--font-display); font-size: 0.8rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    transition: all 0.2s; cursor: pointer; border: none; background: none;
    text-decoration: none; display: inline-block;
}
.filter-tab-active {
    color: #000; background: var(--accent); border-radius: var(--radius-xs);
}
.filter-tab-inactive {
    color: var(--text-secondary); border-bottom: 2px solid transparent;
}
.filter-tab-inactive:hover { color: var(--text-primary); border-bottom-color: var(--accent); }

/* Pill filters (rankings divisions) */
.pill-filter {
    padding: 0.4rem 0.85rem; border-radius: var(--radius-xs);
    font-size: 0.8rem; font-weight: 600; transition: all 0.2s;
    cursor: pointer; border: 1px solid var(--border);
    text-decoration: none; display: inline-block;
}
.pill-filter-active { background: var(--accent); color: #000; border-color: var(--accent); }
.pill-filter-inactive {
    background: var(--bg-surface); color: var(--text-secondary); border-color: var(--border);
}
.pill-filter-inactive:hover { border-color: var(--accent); color: var(--accent); }

/* ── Form Inputs ───────────────────────────────────────── */
.input-field, .select-field, .textarea-field {
    width: 100%; padding: 0.6rem 0.8rem;
    background: var(--bg-elevated); border: 1px solid var(--border);
    border-radius: var(--radius-xs); color: var(--text-primary);
    font-family: var(--font-body); font-size: 0.85rem;
    transition: border-color 0.2s;
}
.input-field:focus, .select-field:focus, .textarea-field:focus {
    outline: none; border-color: var(--accent);
}
.input-field::placeholder, .textarea-field::placeholder { color: var(--text-muted); }
.select-field { cursor: pointer; appearance: auto; }
.textarea-field { resize: vertical; min-height: 80px; }

label { display: block; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.25rem; }

/* ── Upload Widget ────────────────────────────────────── */
.cpw-upload-preview:hover .cpw-upload-hover { opacity: 1 !important; }
.cpw-upload-zone {
    transition: border-color 0.2s, background 0.2s;
}
.cpw-upload-zone:hover {
    border-color: var(--accent) !important;
    background: var(--accent-glow-hover);
}

/* ── Badges ────────────────────────────────────────────── */
.badge {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-family: var(--font-condensed); font-size: 0.75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    padding: 0.25rem 0.6rem; border-radius: 4px;
}
.badge-accent { background: var(--accent-glow); color: var(--accent); }
.badge-muted { background: rgba(255,255,255,0.05); color: var(--text-muted); }
.badge-success { background: var(--color-success-bg); color: var(--color-success); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-danger { background: var(--color-danger-bg); color: var(--color-danger); }
.badge-info { background: var(--color-info-bg); color: var(--color-info); }
.badge-sm { font-size: 0.65rem; padding: 0.2rem 0.5rem; }

.news-label {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-family: var(--font-condensed); font-size: 0.75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.12em;
    padding: 0.25rem 0.6rem; border-radius: 3px;
}
.news-label-breaking { background: var(--color-danger-bg); color: var(--color-danger); }
.news-label-developing { background: var(--color-warning-bg); color: var(--color-warning); }
.news-label-exclusive { background: var(--accent-glow); color: var(--accent); }
.news-label-results { background: var(--color-info-bg); color: var(--color-info); }
.news-label-gold { background: var(--gold-glow); color: var(--gold-light); }

/* ── Momentum Bar ──────────────────────────────────────── */
.momentum-bar {
    height: 6px; border-radius: 3px; overflow: hidden;
    background: var(--bg-hover); flex: 1;
}
.momentum-fill {
    height: 100%; border-radius: 3px;
    background: linear-gradient(90deg, var(--accent-dark), var(--accent), var(--accent-light));
    transition: width 0.3s;
}
.momentum-label {
    font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; color: var(--accent);
    margin-left: 0.5rem;
}

/* ── Record Display ────────────────────────────────────── */
.record-compact { font-family: var(--font-display); font-weight: 600; font-size: 0.8rem; }
.record-w { color: var(--color-success); }
.record-l { color: var(--color-danger); }
.record-d { color: var(--text-muted); }

/* ── Page Header ───────────────────────────────────────── */
.page-header { margin-bottom: 2rem; }
.page-header h1 {
    font-family: var(--font-display); font-size: clamp(1.875rem, 5vw, 3rem); font-weight: 700;
    letter-spacing: 0.04em; line-height: 1.1;
}
.page-header .subtitle { color: var(--text-secondary); font-size: 0.9rem; margin-top: 0.5rem; }
.page-header-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.section-title {
    font-family: var(--font-display); font-size: 1rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 1rem;
}
.wiki-consolidated .wiki-section + .wiki-section { margin-top: 2rem; }

/* ── Page Banner Image ─────────────────────────────────── */
/* ── Page Banner (background on main via pseudo-elements) ── */
.has-page-banner {
    position: relative;
}
.has-page-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: var(--banner-height, 220px);
    background-image: var(--banner-url);
    background-size: cover;
    background-position: var(--banner-pos, center center);
    filter: brightness(0.35);
    z-index: 0;
    pointer-events: none;
}
.has-page-banner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: var(--banner-height, 220px);
    background: linear-gradient(0deg, var(--bg-primary) 0%, rgba(10,10,10,0.6) 50%, rgba(10,10,10,0.2) 100%);
    z-index: 0;
    pointer-events: none;
}
.has-page-banner > * {
    position: relative;
    z-index: 1;
}
@media (max-width: 768px) {
    .has-page-banner::before,
    .has-page-banner::after {
        height: min(var(--banner-height, 220px), 160px);
    }
}

/* ── Hero Section ──────────────────────────────────────── */
.hero-section {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-surface) 50%, var(--accent-glow) 100%);
    padding: 3rem 1rem 3.5rem; margin: -1.5rem -1rem 2rem;
}
.hero-section::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 80% 30%, rgba(229,114,0,0.06) 0%, transparent 60%);
}
.hero-section h1 {
    font-size: clamp(2.5rem, 6vw, 5rem); font-weight: 900;
    letter-spacing: 0.06em; line-height: 1;
}
.hero-section .vs-divider {
    font-family: var(--font-display); font-weight: 900; color: var(--accent);
}

/* ── VS Divider ────────────────────────────────────────── */
.vs-divider {
    font-family: var(--font-display); font-weight: 900; color: var(--accent);
    font-size: 0.85rem;
}

/* ── Grid Layouts ──────────────────────────────────────── */
.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-2-1 { grid-template-columns: 2fr 1fr; }
@media (max-width: 1024px) { .grid-2-1 { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
@media (min-width: 768px) and (max-width: 1024px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: 0.25rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; }

/* ── Spacing ───────────────────────────────────────────── */
.mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; }
.mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; }
.p-4 { padding: 1rem; } .p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }

/* ── Text Utils ────────────────────────────────────────── */
.text-xs { font-size: 0.8rem; } .text-sm { font-size: 0.9rem; }
.text-lg { font-size: 1.1rem; } .text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; } .text-3xl { font-size: 1.875rem; }
.text-center { text-align: center; }
.font-bold { font-weight: 700; } .font-semibold { font-weight: 600; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Stat Box ──────────────────────────────────────────── */
.stat-box {
    background: var(--bg-elevated); border-radius: var(--radius-xs);
    text-align: center; padding: 0.75rem;
}
.stat-value { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--accent); }
.stat-label { font-family: var(--font-condensed); font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; }

/* ── Table Rows ────────────────────────────────────────── */
.table-row { border-bottom: 1px solid var(--border); transition: background 0.15s; }
.table-row:hover { background: var(--bg-hover); }
.table-row:last-child { border-bottom: none; }

/* ── Flash Messages ────────────────────────────────────── */
.flash {
    padding: 0.75rem 1rem; border-radius: var(--radius-xs);
    font-size: 0.85rem; margin-bottom: 1.5rem;
}
.flash-success { background: var(--color-success-bg-light); color: var(--color-success); border: 1px solid var(--color-success-border); }
.flash-error { background: var(--color-danger-bg-light); color: var(--color-danger); border: 1px solid var(--color-danger-border); }
.flash-info { background: var(--color-info-bg-light); color: var(--color-info); border: 1px solid var(--color-info-border); }

/* ── Auth Page ─────────────────────────────────────────── */
.auth-container { max-width: 420px; margin: 2rem auto; }
.auth-container .card-static { padding: 1.5rem; }
.auth-container h1 { text-align: center; margin-bottom: 0.25rem; }
.auth-container .subtitle { text-align: center; margin-bottom: 1.5rem; }
.auth-form { display: flex; flex-direction: column; gap: 1rem; }
.auth-toggle { text-align: center; font-size: 0.8rem; color: var(--text-muted); margin-top: 1rem; }
.auth-toggle a { color: var(--accent); }

/* ── Pulse Glow Animation ──────────────────────────────── */
.pulse-glow { animation: pulseGlow 2s ease-in-out infinite alternate; }
@keyframes pulseGlow {
    from { box-shadow: 0 0 8px rgba(229,114,0,0.2); }
    to { box-shadow: 0 0 20px rgba(229,114,0,0.4); }
}

/* ── Fade In Animation ─────────────────────────────────── */
.animate-fade-in { animation: fadeIn 0.3s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ── Divider Lines ─────────────────────────────────────── */
.divider { height: 1px; background: var(--border); margin: 1rem 0; }

/* ── Icon sizing helpers ───────────────────────────────── */
.icon-sm { width: 18px; height: 18px; }
.icon-xs { width: 14px; height: 14px; }

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

/* ── Empty State ───────────────────────────────────────── */
.empty-state {
    text-align: center; padding: 3rem 1rem; color: var(--text-muted);
}
.empty-state p { font-size: 0.85rem; }

/* ── W/L indicators ────────────────────────────────────── */
.result-w { display: inline-flex; align-items: center; justify-content: center; width: var(--avatar-sm); height: var(--avatar-sm); border-radius: var(--radius-xs); background: var(--color-success-bg); color: var(--color-success); font-size: 0.7rem; font-weight: 700; }
.result-l { display: inline-flex; align-items: center; justify-content: center; width: var(--avatar-sm); height: var(--avatar-sm); border-radius: var(--radius-xs); background: var(--color-danger-bg); color: var(--color-danger); font-size: 0.7rem; font-weight: 700; }

/* ── Hidden utility ────────────────────────────────────── */
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ── Championship banner ───────────────────────────────── */
.champion-banner {
    background: linear-gradient(135deg, var(--bg-surface), rgba(212,175,55,0.08));
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 1.5rem; position: relative; overflow: hidden;
}
.champion-banner::before {
    content: ''; position: absolute; right: -50px; top: -50px;
    width: 200px; height: 200px; border-radius: 50%;
    background: radial-gradient(circle, rgba(212,175,55,0.08), transparent);
}

/* ── Desktop-only helper ───────────────────────────────── */
.desktop-only { display: none; }
@media(min-width:768px) { .desktop-only { display: block !important; } }

/* ============================================================
   UNIVERSE MODE TRACKER — Enhanced Styles
   Premium dark theme with orange (#E57200) accent
   ============================================================ */

/* ── Enhanced Navigation ──────────────────────────────── */
.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.nav-link .icon-nav {
    width: 14px;
    height: 14px;
    opacity: 0.5;
    flex-shrink: 0;
}
.nav-link:hover .icon-nav { opacity: 1; }

.nav-federation {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-family: var(--font-condensed);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: default;
    flex-shrink: 0;
}
.nav-federation .fed-icon {
    width: 18px;
    height: 18px;
    color: var(--accent);
}

/* ── Dashboard Layout ─────────────────────────────────── */
.dashboard-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
.dashboard-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.dashboard-title-icon {
    width: 36px;
    height: 36px;
    color: var(--accent);
    animation: pulseGlow 2s ease-in-out infinite alternate;
}
.dashboard-title h1 {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 900;
    letter-spacing: 0.06em;
    line-height: 1.1;
}
.dashboard-subtitle {
    font-family: var(--font-condensed);
    font-size: 0.7rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.dashboard-subtitle::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 2px;
    background: var(--accent);
}

.network-live {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    font-family: var(--font-condensed);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-secondary);
}
.network-live-dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-danger);
    animation: pulse 1.5s infinite;
}

/* ── Stat Cards (Dashboard) ───────────────────────────── */
.stat-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    position: relative;
    overflow: hidden;
    transition: all 0.25s;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: block;
}
.stat-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(229, 114, 0, 0.08);
}
.stat-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}
.stat-card-icon {
    width: 20px;
    height: 20px;
    color: var(--text-muted);
}
.stat-card-arrow {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.2s;
}
.stat-card:hover .stat-card-arrow { opacity: 1; }
.stat-card-value {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1;
    margin-bottom: 0.25rem;
}
.stat-card-label {
    font-family: var(--font-condensed);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
}

/* ── Show Preview Cards ───────────────────────────────── */
.show-preview {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: all 0.25s;
    text-decoration: none;
    color: inherit;
    display: block;
}
.show-preview:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}
.show-preview-img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
    background: linear-gradient(135deg, var(--bg-elevated), var(--bg-primary));
}
.show-preview-placeholder {
    width: 100%;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bg-elevated) 0%, rgba(229,114,0,0.05) 100%);
}
.show-preview-placeholder .placeholder-logo {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 900;
    color: rgba(255,255,255,0.08);
    letter-spacing: 0.1em;
}
.show-preview-body {
    padding: 1rem 1.25rem;
}
.show-preview-brand {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    font-family: var(--font-condensed);
    font-size: 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.5rem;
}
.show-preview-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
}
.show-preview-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.7rem;
    color: var(--text-muted);
}
.show-preview-meta-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* ── Universe News Panel ──────────────────────────────── */
.news-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.news-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}
.news-panel-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.news-panel-title i, .news-panel-title svg { color: var(--text-muted); }
.news-live {
    font-family: var(--font-condensed);
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-danger);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.news-live::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-danger);
    animation: pulse 1.5s infinite;
}
.news-panel-body {
    padding: 1.25rem;
    min-height: 200px;
}
.news-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-muted);
}
.news-empty-icon {
    width: 40px;
    height: 40px;
    color: var(--text-muted);
    opacity: 0.3;
    margin: 0 auto 0.75rem;
}
.news-empty-title {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}
.news-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}
.news-item:last-child { border-bottom: none; }
.news-item:hover { background: var(--bg-hover); margin: 0 -1.25rem; padding-left: 1.25rem; padding-right: 1.25rem; }

/* ── Quick Actions Grid ───────────────────────────────── */
.quick-actions {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.quick-actions-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-bottom: 2px solid var(--accent);
}
.quick-actions-icon {
    width: 18px;
    height: 18px;
    color: var(--accent);
}
.quick-actions-title {
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.quick-actions-subtitle {
    font-family: var(--font-condensed);
    font-size: 0.55rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1px;
    background: var(--border);
    padding: 0;
}
.quick-action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.25rem 0.75rem;
    background: var(--bg-surface);
    text-decoration: none;
    color: var(--text-secondary);
    transition: all 0.2s;
    position: relative;
}
.quick-action-item:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}
.quick-action-item:hover .quick-action-icon { color: var(--accent); }
.quick-action-icon {
    width: 24px;
    height: 24px;
    color: var(--text-muted);
    transition: color 0.2s;
}
.quick-action-corner {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-top: 1.5px solid var(--border);
    border-right: 1.5px solid var(--border);
}
.quick-action-label {
    font-family: var(--font-condensed);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ── Section Divider ──────────────────────────────────── */
.section-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.section-divider-line {
    flex: 1;
    height: 1px;
    background: var(--border);
}
.section-divider-icon {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
}
.section-divider-label {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ── Enhanced Roster Page ─────────────────────────────── */
.roster-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}
.roster-count {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    font-family: var(--font-condensed);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    margin-top: 0.5rem;
}
.roster-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
}
.roster-filters {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.brand-tab {
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}
.brand-tab:hover { border-color: var(--accent); color: var(--text-primary); }
.brand-tab.active {
    background: var(--text-primary);
    color: var(--bg-primary);
    border-color: var(--text-primary);
}
.gender-tab {
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}
.gender-tab.active {
    background: var(--text-primary);
    color: var(--bg-primary);
    border-color: var(--text-primary);
}

/* Enhanced superstar card for grid */
.superstar-card-grid {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: all 0.25s;
    text-decoration: none;
    color: inherit;
    display: block;
}
.superstar-card-grid:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.superstar-card-grid .card-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    background: var(--bg-elevated);
}
.superstar-card-grid .card-avatar-placeholder {
    width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bg-elevated), var(--bg-primary));
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 900;
    color: rgba(255,255,255,0.06);
}
.superstar-card-grid .card-body {
    padding: 1rem;
}
.superstar-card-grid .card-name {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}
.superstar-card-grid .card-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* ── Rankings Podium ──────────────────────────────────── */
.podium {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 1rem;
    padding: 2rem 1rem;
    margin-bottom: 2rem;
}
.podium-place {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s;
}
.podium-place:hover { transform: translateY(-4px); }
.podium-portrait {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid;
    margin-bottom: 0.75rem;
    background: var(--bg-elevated);
}
.podium-portrait-placeholder {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}
.podium-1st .podium-portrait,
.podium-1st .podium-portrait-placeholder {
    width: 100px;
    height: 100px;
    border-color: var(--gold);
    background: var(--gold-glow);
    color: var(--gold);
}
.podium-2nd .podium-portrait,
.podium-2nd .podium-portrait-placeholder {
    border-color: var(--color-silver);
    background: var(--color-silver-bg);
    color: var(--color-silver);
}
.podium-3rd .podium-portrait,
.podium-3rd .podium-portrait-placeholder {
    border-color: var(--color-bronze);
    background: var(--color-bronze-bg);
    color: var(--color-bronze);
}
.podium-crown {
    width: 28px;
    height: 28px;
    color: var(--gold);
    margin-bottom: -8px;
    z-index: 1;
}
.podium-name {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.25rem;
}
.podium-score {
    font-family: var(--font-condensed);
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.podium-pedestal {
    width: 100%;
    border-radius: var(--radius-xs) var(--radius-xs) 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 900;
    margin-top: 0.5rem;
}
.podium-1st .podium-pedestal {
    height: 80px;
    background: linear-gradient(180deg, var(--gold-glow), transparent);
    border-top: 2px solid var(--gold);
    color: var(--gold);
    font-size: 1.5rem;
}
.podium-2nd .podium-pedestal {
    height: 60px;
    background: linear-gradient(180deg, var(--color-silver-bg-subtle), transparent);
    border-top: 2px solid var(--color-silver);
    color: var(--color-silver);
    font-size: var(--font-size-xl);
}
.podium-3rd .podium-pedestal {
    height: 44px;
    background: linear-gradient(180deg, var(--color-bronze-bg-subtle), transparent);
    border-top: 2px solid var(--color-bronze);
    color: var(--color-bronze);
    font-size: var(--font-size-lg);
}

/* Rankings table row */
.rank-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
    text-decoration: none;
    color: inherit;
}
.rank-row:hover { background: var(--bg-hover); }
.rank-number {
    width: 32px;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-muted);
    flex-shrink: 0;
}
.rank-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-elevated);
}
.rank-avatar-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.75rem;
    background: var(--accent-glow);
    color: var(--accent);
    flex-shrink: 0;
}
.rank-info { flex: 1; min-width: 0; }
.rank-name {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
}
.rank-brand {
    font-size: 0.65rem;
    color: var(--text-muted);
}
.rank-momentum {
    width: 100px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.rank-trend {
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}
.trend-up { color: var(--color-success); }
.trend-down { color: var(--color-danger); }
.trend-flat { color: var(--text-muted); }

/* ── Calendar Styles ──────────────────────────────────── */
.calendar-container {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}
.calendar-nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.calendar-nav-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: all 0.2s;
}
.calendar-nav-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.calendar-month {
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
}
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.calendar-day-header {
    padding: 0.5rem;
    text-align: center;
    font-family: var(--font-condensed);
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
}
.calendar-day {
    min-height: 80px;
    padding: 0.4rem;
    border: 1px solid var(--border);
    border-top: none;
    border-left: none;
    transition: background 0.15s;
    cursor: pointer;
}
.calendar-day:hover { background: var(--bg-hover); }
.calendar-day.today {
    background: var(--accent-glow);
    border-color: var(--accent);
}
.calendar-day-label {
    font-family: var(--font-condensed);
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.calendar-event {
    display: block;
    padding: 0.15rem 0.3rem;
    margin-top: 0.25rem;
    border-radius: 2px;
    font-size: 0.55rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Welcome Banner ───────────────────────────────────── */
.welcome-banner {
    background: linear-gradient(135deg, var(--bg-surface), var(--color-info-bg-light));
    border: 1px solid var(--color-info-bg);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-top: var(--space-2xl);
}
.welcome-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}
.welcome-text {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}
.welcome-note {
    font-size: 0.75rem;
    color: var(--text-muted);
    background: var(--color-info-bg-light);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-xs);
    border-left: 2px solid var(--color-info-border);
}

/* ── Progress Steps (Character Creation) ──────────────── */
.step-progress {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 2rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}
.step-progress-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-family: var(--font-condensed);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    border: none;
    background: none;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    position: relative;
}
.step-progress-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: transparent;
    transition: background 0.2s;
}
.step-progress-item.active {
    color: var(--accent);
}
.step-progress-item.active::after {
    background: var(--accent);
}
.step-progress-item:hover {
    color: var(--text-primary);
}
.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid var(--border);
    font-size: 0.6rem;
    flex-shrink: 0;
    transition: all 0.2s;
}
.step-progress-item.active .step-number {
    border-color: var(--accent);
    background: var(--accent);
    color: #000;
}

/* ── Tracker-style Footer ─────────────────────────────── */
.tracker-footer {
    border-top: 1px solid var(--border);
    background: var(--bg-surface);
    padding: 1.5rem 1rem;
    text-align: center;
}
.tracker-footer-text {
    font-family: var(--font-condensed);
    font-size: 0.6rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

/* ── Setup Complete Banner ────────────────────────────── */
.setup-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, rgba(229,114,0,0.08), transparent);
    border: 1px solid rgba(229,114,0,0.2);
    border-radius: var(--radius);
    padding: 0.75rem 1.25rem;
    margin-bottom: 1.5rem;
}
.setup-banner-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.setup-banner-icon {
    width: 20px;
    height: 20px;
    color: var(--accent);
}
.setup-banner-title {
    font-weight: 700;
    font-size: 0.85rem;
}
.setup-banner-text {
    font-size: 0.75rem;
    color: var(--text-secondary);
}
.setup-banner-close {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    font-size: 1rem;
}

/* ── Target Event Card ────────────────────────────────── */
.target-event {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: block;
    transition: all 0.25s;
}
.target-event:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}
.target-event-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    background: linear-gradient(135deg, var(--bg-elevated), rgba(229,114,0,0.05));
}
.target-event-body {
    padding: 1rem 1.25rem;
}
.target-event-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    color: var(--text-muted);
}

/* ── Responsive tweaks for dashboard ──────────────────── */
@media (max-width: 768px) {
    .podium { flex-direction: column; align-items: center; gap: 1.5rem; }
    .podium-1st { order: -1; }
    .podium-pedestal { display: none; }
    .quick-actions-grid { grid-template-columns: repeat(3, 1fr); }
    .stat-card-value { font-size: 2rem; }
}

/* ============================================================
   TOURNAMENT SYSTEM — Orange & White Theme
   ============================================================ */

/* ── Tournament Cards (List Page) ────────────────────── */
.tournament-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: all 0.2s;
    color: var(--text-primary);
    text-decoration: none;
}
.tournament-card:hover {
    border-color: var(--accent);
    box-shadow: 0 0 20px rgba(229, 114, 0, 0.08);
    transform: translateY(-2px);
    color: var(--text-primary);
}
.tournament-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.tournament-card-type {
    font-family: var(--font-condensed);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}
.tournament-card-name {
    font-family: var(--font-display);
    font-size: 1.25rem;
    letter-spacing: 0.03em;
    color: var(--text-primary);
}
.tournament-card-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}
.tournament-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.tournament-meta-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.tournament-card-progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.tournament-progress-bar {
    flex: 1;
    height: 4px;
    background: var(--bg-elevated);
    border-radius: 2px;
    overflow: hidden;
}
.tournament-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.3s;
}
.tournament-card-winner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--accent);
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

/* Tournament Badges */
.tournament-badge {
    font-family: var(--font-condensed);
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-xs);
    font-weight: 600;
}
.tournament-badge-completed {
    background: var(--color-success-bg);
    color: var(--color-success);
}
.tournament-badge-live {
    background: var(--accent-glow-medium);
    color: var(--accent-light);
    animation: pulse-glow 2s ease-in-out infinite;
}
.tournament-badge-setup {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
}
@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 0 rgba(229, 114, 0, 0); }
    50% { box-shadow: 0 0 8px rgba(229, 114, 0, 0.3); }
}

/* ── Tournament Create Page ──────────────────────────── */
.tournament-create-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.tournament-create-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.5rem 1.5rem 1rem;
}
.tournament-create-title {
    font-size: 1.5rem;
    color: var(--accent);
    letter-spacing: 0.03em;
}
.tournament-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-xs);
    color: var(--text-muted);
    transition: all 0.2s;
    cursor: pointer;
    background: none;
    border: none;
}
.tournament-close-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Tabs */
.tournament-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    padding: 0 1.5rem;
}
.tournament-tab {
    flex: 1;
    padding: 0.85rem 1rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.tournament-tab:hover { color: var(--text-secondary); }
.tournament-tab.active {
    color: var(--text-primary);
    border-bottom-color: var(--accent);
    background: var(--accent-glow-hover);
}

/* Tab Content */
.tournament-tab-content {
    display: none;
    padding: 1.5rem;
}
.tournament-tab-content.active { display: block; }

/* Form Elements */
.tournament-form-group {
    margin-bottom: 1rem;
}
.tournament-label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary);
    margin-bottom: 0.4rem;
}
.tournament-input {
    width: 100%;
    padding: 0.7rem 0.85rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text-primary);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    outline: none;
    transition: border-color 0.2s;
}
.tournament-input:focus { border-color: var(--accent); }
.tournament-input::placeholder { color: var(--text-muted); }
.tournament-textarea {
    min-height: 100px;
    resize: vertical;
}
.tournament-select {
    width: 100%;
    padding: 0.7rem 0.85rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--text-primary);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23666' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
}
.tournament-select:focus { border-color: var(--accent); }
.tournament-hint {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: var(--accent-glow);
    border: 1px solid rgba(229, 114, 0, 0.2);
    border-radius: var(--radius-xs);
    font-size: 0.75rem;
    color: var(--accent);
}

/* Competitor Selection Grid */
.competitor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.5rem;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 0.5rem;
}
.competitor-grid::-webkit-scrollbar { width: 4px; }
.competitor-grid::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.competitor-option {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.75rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    cursor: pointer;
    transition: all 0.15s;
}
.competitor-option:hover { border-color: var(--accent); }
.competitor-option.disabled { opacity: 0.3; pointer-events: none; }
.competitor-checkbox { display: none; }
.competitor-checkbox:checked + .competitor-avatar {
    box-shadow: 0 0 0 2px var(--accent);
}
.competitor-checkbox:checked ~ .competitor-check {
    opacity: 1;
    background: var(--accent);
}
.competitor-option:has(.competitor-checkbox:checked) {
    border-color: var(--accent);
    background: var(--accent-glow-hover);
}
.competitor-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid var(--border);
    transition: box-shadow 0.15s;
}
.competitor-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.competitor-info { flex: 1; min-width: 0; }
.competitor-name {
    font-weight: 600;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.competitor-brand {
    font-size: 0.7rem;
    color: var(--text-muted);
}
.competitor-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    background: var(--border);
    transition: all 0.15s;
    flex-shrink: 0;
    color: #000;
}

/* ── Tournament Bracket — Horizontal with Connector Lines ── */
.bracket-scroll {
    overflow-x: auto;
    padding-bottom: 1rem;
}

/* Round header labels row */
.bk-header {
    display: flex;
    gap: 0;
    margin-bottom: 0.75rem;
}
.bk-header-spacer {
    width: 40px;
    flex-shrink: 0;
}
.bk-header-label {
    min-width: 260px;
    flex: 1;
    text-align: center;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-primary);
    padding: 0.55rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--bg-surface);
    letter-spacing: 0.05em;
    margin: 0 20px;
}

/* The bracket itself: rounds side-by-side */
.bk-bracket {
    display: flex;
    align-items: stretch;
    min-height: 300px;
}

/* Each round column */
.bk-round {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    min-width: 260px;
    flex: 1;
    gap: 0;
    padding: 1rem 0;
}

/* Each game slot (match + its connector area) */
.bk-game {
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
    padding: 0.5rem 0;
}

/* The match card itself */
.bk-match {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    width: 100%;
    margin: 0 20px;
}
.bk-match--finals {
    border-color: var(--accent);
    box-shadow: 0 0 24px rgba(229, 114, 0, 0.1);
}
.bk-match-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0.75rem;
    font-family: var(--font-condensed);
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    background: rgba(255,255,255,0.02);
}

/* Competitor slot row */
.bk-slot {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    border-left: 3px solid transparent;
    transition: background 0.15s;
}
.bk-slot + .bk-slot {
    border-top: 1px solid rgba(255,255,255,0.03);
}
.bk-slot--winner {
    background: var(--accent-glow);
    border-left-color: var(--accent);
}
.bk-slot--loser {
    opacity: 0.4;
}

/* Avatar */
.bk-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid var(--border);
    position: relative;
}
.bk-slot--winner .bk-avatar { border-color: var(--accent); }
.bk-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bk-check {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 13px;
    height: 13px;
    background: var(--accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
}

/* Name + brand */
.bk-info { flex: 1; min-width: 0; }
.bk-name {
    font-weight: 700;
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bk-slot--winner .bk-name { color: var(--accent); }
.bk-brand {
    font-size: 0.62rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.bk-crown {
    color: var(--accent);
    opacity: 0.6;
    flex-shrink: 0;
}

/* Bracket Action Button */
.bracket-action {
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--border);
    background: rgba(229, 114, 0, 0.03);
}
.bracket-action .btn {
    width: 100%;
    font-size: 0.75rem;
}

/* ── Connector Lines (HTML div-based wires between rounds) ── */
.bracket-lines {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 40px;
    flex-shrink: 0;
}
.bracket-line-pair {
    flex: 1;
    position: relative;
}
/* Vertical bar connecting the two feeder matches */
.bracket-line-pair::before {
    content: '';
    position: absolute;
    top: 25%;
    bottom: 25%;
    left: 0;
    width: 2px;
    background: var(--accent);
    opacity: 0.4;
}
/* Horizontal stub from vertical bar toward next round */
.bracket-line-pair::after {
    content: '';
    position: absolute;
    top: calc(50% - 1px);
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--accent);
    opacity: 0.4;
}

/* ── Tournament Winner Banner ────────────────────────── */
.tournament-winner-banner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, rgba(229, 114, 0, 0.12) 0%, rgba(10, 10, 10, 0.95) 60%);
    border: 1px solid rgba(229, 114, 0, 0.25);
    border-radius: var(--radius);
    position: relative;
    overflow: hidden;
}
.tournament-winner-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-light), var(--accent));
}
.tournament-winner-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--accent);
    background: var(--bg-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 0 30px rgba(229, 114, 0, 0.2);
}
.tournament-winner-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.tournament-winner-crown {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-primary);
    border-radius: 50%;
    padding: 2px;
}
.tournament-winner-info { flex: 1; }

/* ── Result Modal ────────────────────────────────────── */
.result-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}
.result-modal {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    width: 90%;
    max-width: 440px;
    overflow: hidden;
}
.result-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.25rem 0.75rem;
}
.result-modal-header h3 {
    font-size: 1.1rem;
    color: var(--accent);
}
.result-modal-body {
    padding: 0 1.25rem 1rem;
}
.result-modal-footer {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border);
    justify-content: flex-end;
}

.result-option {
    display: block;
    margin-bottom: 0.5rem;
    cursor: pointer;
}
.result-option input[type="radio"] { display: none; }
.result-option-content {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.15s;
}
.result-option input[type="radio"]:checked + .result-option-content {
    border-color: var(--accent);
    background: var(--accent-glow);
    color: var(--accent);
    box-shadow: 0 0 12px rgba(229, 114, 0, 0.1);
}
.result-option:hover .result-option-content {
    border-color: rgba(229, 114, 0, 0.4);
}

/* ── Watch / YouTube Pages ────────────────────────────── */
.watch-live-badge {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.4rem 1rem; border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.05); border: 1px solid var(--border);
    font-family: var(--font-condensed); font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.1em; color: var(--text-muted);
}
.watch-live-badge--on {
    background: var(--color-danger-bg); border-color: var(--color-danger-border);
    color: var(--color-danger);
}
.watch-live-dot {
    width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-danger);
    animation: pulse-live 1.5s ease-in-out infinite;
}
@keyframes pulse-live {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
    50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}

.watch-player { margin-bottom: 1rem; }
.watch-player-embed {
    position: relative; width: 100%; padding-bottom: 56.25%;
    background: #000; border-radius: var(--radius-sm); overflow: hidden;
    border: 1px solid var(--border);
}
.watch-player-embed iframe {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.watch-player-info { padding: 1rem 0; }
.watch-player-title {
    font-size: 1.25rem; font-weight: 600; letter-spacing: 0.02em;
    margin-bottom: 0.35rem;
}
.watch-player-meta {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.8rem; margin-bottom: 0.5rem;
}
.watch-player-desc {
    font-size: 0.8rem; line-height: 1.5; max-width: 700px;
}

/* Legacy watch grid (used on watch-live.php) */
.watch-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
}
.watch-grid--gallery {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.watch-card {
    display: block; text-decoration: none; color: inherit;
    border-radius: var(--radius-sm); overflow: hidden;
    background: var(--bg-card); border: 1px solid var(--border);
    transition: all 0.2s;
}
.watch-card:hover {
    border-color: var(--accent); transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(229, 114, 0, 0.1);
}
.watch-card-thumb {
    position: relative; width: 100%; padding-bottom: 56.25%;
    background: #111; overflow: hidden;
}
.watch-card-thumb img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; transition: transform 0.3s;
}
.watch-card:hover .watch-card-thumb img { transform: scale(1.05); }
.watch-card-play {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(0,0,0,0.7); border: 2px solid rgba(255,255,255,0.3);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-primary); opacity: 0; transition: opacity 0.2s;
}
.watch-card:hover .watch-card-play { opacity: 1; }
.watch-card-info { padding: 0.75rem; }
.watch-card-title {
    font-size: 0.85rem; font-weight: 600; line-height: 1.3;
    margin-bottom: 0.25rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.watch-card-meta {
    display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap;
}
.watch-card-date { font-size: 0.7rem; }
.watch-card-desc {
    font-size: 0.7rem; line-height: 1.4; margin-top: 0.35rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Enhanced Video Gallery (vg-*) ───────────────────── */

/* Hero Featured Video */
.vg-hero {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 2rem;
    margin-bottom: 2.5rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(229,114,0,0.06) 0%, rgba(0,0,0,0) 60%);
    border: 1px solid rgba(229,114,0,0.15);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.vg-hero-player {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    background: #000;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
}
.vg-hero-thumb {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease, filter 0.3s;
}
.vg-hero-player:hover .vg-hero-thumb {
    transform: scale(1.03);
    filter: brightness(0.7);
}
.vg-hero-play-btn {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
    cursor: pointer; z-index: 2;
    transition: transform 0.2s;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}
.vg-hero-player:hover .vg-hero-play-btn { transform: translate(-50%,-50%) scale(1.1); }
.vg-hero-iframe {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.vg-hero-info {
    display: flex; flex-direction: column; justify-content: center;
    padding: 0.5rem 0;
}
.vg-hero-label {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-family: var(--font-condensed); font-size: 0.65rem; font-weight: 700;
    letter-spacing: 0.15em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 0.75rem;
}
.vg-hero-title {
    font-size: 1.5rem; font-weight: 700; line-height: 1.25;
    letter-spacing: 0.02em; margin-bottom: 0.75rem;
}
.vg-hero-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem;
    font-size: 0.78rem; color: var(--text-secondary); margin-bottom: 1rem;
}
.vg-meta-sep { color: var(--text-muted); opacity: 0.5; }
.vg-hero-desc {
    font-size: 0.82rem; line-height: 1.55; color: var(--text-secondary);
    margin-bottom: 1.5rem;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
}
.vg-hero-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.vg-hero-watch-btn {
    padding: 0.65rem 1.5rem !important; font-size: 0.85rem !important;
    display: inline-flex; align-items: center; gap: 0.4rem;
}
.vg-btn-outline {
    background: transparent !important;
    border: 1px solid var(--border) !important;
    color: var(--text-secondary) !important;
    padding: 0.55rem 1.25rem !important; font-size: 0.8rem !important;
    display: inline-flex; align-items: center; gap: 0.35rem;
    transition: all 0.15s;
}
.vg-btn-outline:hover {
    border-color: var(--accent) !important; color: var(--text-primary) !important;
    background: rgba(229,114,0,0.05) !important;
}

/* Toolbar */
.vg-toolbar {
    margin-bottom: 1.75rem;
    padding-bottom: 1rem;
}
.vg-toolbar-top {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem;
}
.vg-toolbar-left {
    display: flex; align-items: baseline; gap: 0.75rem;
}
.vg-section-title {
    font-size: 1.25rem; font-weight: 700; letter-spacing: 0.03em;
    display: flex; align-items: center; gap: 0.5rem;
}
.vg-video-count {
    font-family: var(--font-condensed); font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-muted);
    background: rgba(255,255,255,0.04);
    padding: 0.25rem 0.65rem; border-radius: var(--radius-xs);
}
.vg-toolbar-right {
    display: flex; align-items: center; gap: 0.5rem;
}

/* Search */
.vg-search {
    position: relative; display: flex; align-items: center;
}
.vg-search-icon {
    position: absolute; left: 0.75rem;
    color: var(--text-muted); pointer-events: none;
}
.vg-search-input {
    width: 220px;
    padding: 0.5rem 2rem 0.5rem 2.25rem;
    font-size: 0.8rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--text-primary);
    transition: all 0.2s;
}
.vg-search-input::placeholder { color: var(--text-muted); }
.vg-search-input:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(229,114,0,0.1);
    width: 280px;
}
.vg-search-clear {
    position: absolute; right: 0.5rem;
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); padding: 0.25rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    transition: all 0.15s;
}
.vg-search-clear:hover { color: var(--text-primary); background: rgba(255,255,255,0.08); }

/* Sort Dropdown */
.vg-sort-dropdown { position: relative; }
.vg-sort-btn {
    display: flex; align-items: center; gap: 0.35rem;
    padding: 0.5rem 0.85rem;
    font-size: 0.78rem; font-weight: 600;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s;
}
.vg-sort-btn:hover { border-color: var(--accent); color: var(--text-primary); }
.vg-sort-menu {
    position: absolute; top: calc(100% + 4px); right: 0;
    min-width: 170px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
    z-index: 100;
    opacity: 0; visibility: hidden;
    transform: translateY(-4px);
    transition: all 0.15s;
}
.vg-sort-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
.vg-sort-option {
    display: flex; align-items: center; gap: 0.5rem;
    width: 100%; padding: 0.6rem 0.85rem;
    font-size: 0.78rem; font-weight: 500;
    background: none; border: none; color: var(--text-secondary);
    cursor: pointer; text-align: left;
    transition: all 0.1s;
}
.vg-sort-option:hover { background: var(--accent-glow); color: var(--text-primary); }
.vg-sort-option.active { color: var(--accent); }

/* View Toggle */
.vg-view-toggle {
    display: flex; border: 1px solid var(--border);
    border-radius: var(--radius-xs); overflow: hidden;
}
.vg-view-btn {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    background: var(--bg-elevated); border: none;
    color: var(--text-muted); cursor: pointer;
    transition: all 0.15s;
}
.vg-view-btn:hover { color: var(--text-primary); }
.vg-view-btn.active {
    background: var(--accent); color: #000;
}
.vg-view-btn + .vg-view-btn { border-left: 1px solid var(--border); }

/* Playlist Tabs */
.vg-playlist-tabs {
    display: flex; gap: 0.35rem; flex-wrap: wrap;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.vg-playlist-tabs::-webkit-scrollbar { display: none; }
.vg-tab {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.45rem 1rem;
    font-family: var(--font-condensed); font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    text-decoration: none;
    color: var(--text-muted);
    background: rgba(255,255,255,0.02);
    border: 1px solid transparent;
    border-radius: 100px;
    white-space: nowrap;
    transition: all 0.2s;
}
.vg-tab:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,0.05);
    border-color: var(--border);
}
.vg-tab.active {
    color: #000; background: var(--accent);
    border-color: var(--accent);
}
.vg-tab-count {
    font-size: 0.6rem; font-weight: 600;
    opacity: 0.6;
}
.vg-tab.active .vg-tab-count { opacity: 0.8; }

/* Video Grid */
.vg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.25rem;
}
.vg-grid--list {
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

/* Video Card */
.vg-card {
    display: flex; flex-direction: column;
    border-radius: var(--radius-sm); overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border);
    cursor: pointer;
    opacity: 0; transform: translateY(12px);
    transition: opacity 0.35s ease, transform 0.35s ease, border-color 0.2s, box-shadow 0.2s;
}
.vg-card--visible {
    opacity: 1; transform: translateY(0);
}
.vg-card:hover {
    border-color: var(--accent);
    box-shadow: 0 8px 30px rgba(229,114,0,0.12), 0 0 0 1px rgba(229,114,0,0.08);
    transform: translateY(-3px);
}
.vg-card--visible:hover {
    transform: translateY(-3px);
}

/* Card Thumbnail */
.vg-card-thumb {
    position: relative; width: 100%; padding-bottom: 56.25%;
    background: #0a0a0a; overflow: hidden;
    flex-shrink: 0;
}
.vg-card-thumb img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.vg-card:hover .vg-card-thumb img {
    transform: scale(1.06);
}

/* Card Hover Overlay */
.vg-card-overlay {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.3s;
}
.vg-card:hover .vg-card-overlay {
    background: rgba(0,0,0,0.35);
}
.vg-card-play-icon {
    width: 52px; height: 52px; border-radius: 50%;
    background: rgba(229,114,0,0.9);
    display: flex; align-items: center; justify-content: center;
    color: var(--text-primary);
    opacity: 0; transform: scale(0.7);
    transition: all 0.25s ease;
    box-shadow: 0 4px 20px rgba(229,114,0,0.3);
}
.vg-card:hover .vg-card-play-icon {
    opacity: 1; transform: scale(1);
}

/* Duration Badge */
.vg-duration-badge {
    position: absolute; bottom: 8px; right: 8px;
    padding: 0.15rem 0.45rem;
    font-size: 0.68rem; font-weight: 700;
    font-family: var(--font-condensed); letter-spacing: 0.03em;
    background: rgba(0,0,0,0.85);
    color: var(--text-primary);
    border-radius: 3px;
    z-index: 2;
    backdrop-filter: blur(4px);
}
.vg-duration-badge--hero {
    bottom: 12px; right: 12px;
    font-size: 0.75rem;
    padding: 0.2rem 0.55rem;
}

/* Card Body */
.vg-card-body {
    padding: 0.85rem; flex: 1;
    display: flex; flex-direction: column;
}
.vg-card-title {
    font-size: 0.88rem; font-weight: 600; line-height: 1.35;
    margin-bottom: 0.5rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.15s;
}
.vg-card:hover .vg-card-title { color: var(--accent); }
.vg-card-meta {
    display: flex; flex-direction: column; gap: 0.2rem;
    margin-top: auto;
}
.vg-card-channel {
    font-size: 0.72rem; font-weight: 600; color: var(--accent);
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
    overflow: hidden;
}
.vg-card-stats {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.68rem; color: var(--text-muted);
}
.vg-card-views { white-space: nowrap; }
.vg-card-date { white-space: nowrap; }
.vg-card-desc {
    font-size: 0.72rem; line-height: 1.45; color: var(--text-secondary);
    margin-top: 0.5rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}

/* List View Card */
.vg-card--list {
    flex-direction: row;
    max-height: 160px;
}
.vg-card--list .vg-card-thumb {
    width: 280px; min-width: 280px;
    padding-bottom: 0; height: 158px;
}
.vg-card--list .vg-card-body {
    padding: 1rem 1.25rem;
}
.vg-card--list .vg-card-title {
    font-size: 0.95rem; -webkit-line-clamp: 2;
    margin-bottom: 0.35rem;
}
.vg-card--list .vg-card-meta {
    flex-direction: row; align-items: center; gap: 0.6rem;
    margin-top: 0;
}
.vg-card--list .vg-card-stats { margin-top: 0; }

/* Load More */
.vg-load-more-wrapper {
    flex-direction: column;
    align-items: center; gap: 0.75rem;
    margin-top: 2rem; padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}
.vg-load-more-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.7rem 2rem;
    font-size: 0.82rem; font-weight: 600;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}
.vg-load-more-btn:hover {
    border-color: var(--accent); color: var(--accent);
    box-shadow: 0 4px 15px rgba(229,114,0,0.1);
    transform: translateY(-1px);
}
.vg-load-more-progress {
    font-size: 0.7rem; color: var(--text-muted);
    font-family: var(--font-condensed); letter-spacing: 0.05em;
}

/* Empty State */
.vg-empty {
    flex-direction: column; align-items: center;
    padding: 4rem 2rem; text-align: center;
}
.vg-empty h2 { font-size: 1.15rem; margin-bottom: 0.5rem; }

/* ── Lightbox Modal ────────────────────────────────────── */
.vg-lightbox {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: all 0.25s ease;
}
.vg-lightbox.open { opacity: 1; visibility: visible; }
.vg-lightbox-backdrop {
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.88);
    backdrop-filter: blur(8px);
}
.vg-lightbox-container {
    position: relative; z-index: 1;
    width: 92vw; max-width: 1100px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,0.6);
    transform: scale(0.95) translateY(10px);
    transition: transform 0.3s ease;
}
.vg-lightbox.open .vg-lightbox-container {
    transform: scale(1) translateY(0);
}
.vg-lightbox-close {
    position: absolute; top: -44px; right: 0;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.1); border: none;
    border-radius: 50%;
    color: var(--text-primary); cursor: pointer;
    transition: all 0.15s;
    z-index: 10;
}
.vg-lightbox-close:hover { background: rgba(229,114,0,0.8); transform: scale(1.1); }
.vg-lightbox-embed {
    position: relative; width: 100%; padding-bottom: 56.25%;
    background: #000;
}
.vg-lightbox-embed iframe {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.vg-lightbox-info {
    padding: 1.25rem 1.5rem;
}
.vg-lightbox-title {
    font-size: 1.15rem; font-weight: 700;
    margin-bottom: 0.5rem; line-height: 1.3;
}
.vg-lightbox-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem;
    font-size: 0.78rem; color: var(--text-secondary);
    margin-bottom: 0.75rem;
}
.vg-lightbox-desc {
    font-size: 0.8rem; line-height: 1.55; color: var(--text-secondary);
    margin-bottom: 1rem; max-width: 700px;
}
.vg-lightbox-actions {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.vg-lightbox-yt-btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.8rem;
}

/* ── Watch Live Theater Layout ─────────────────────────── */
.wl-theater {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 1.5rem;
    align-items: start;
}
.wl-main { min-width: 0; }
.wl-info {
    padding: 1rem 0;
}
.wl-title {
    font-size: 1.3rem; font-weight: 700; line-height: 1.3;
    margin-bottom: 0.65rem; letter-spacing: 0.01em;
}
.wl-meta-row {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.5rem;
    font-size: 0.8rem; margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}
.wl-meta-left {
    display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
}
.wl-meta-actions { display: flex; gap: 0.5rem; }
.wl-description {
    background: rgba(255,255,255,0.02);
    border-radius: var(--radius-sm);
    padding: 0.85rem 1rem;
    position: relative;
}
.wl-desc-text {
    font-size: 0.8rem; line-height: 1.6; color: var(--text-secondary);
    position: relative;
}
.wl-desc-fade {
    position: absolute; bottom: 0; left: 0; right: 0; height: 30px;
    background: linear-gradient(transparent, rgba(20,20,20,0.95));
    pointer-events: none;
}
.wl-desc-toggle {
    background: none; border: none; color: var(--accent);
    font-size: 0.78rem; font-weight: 600; cursor: pointer;
    padding: 0.35rem 0 0; display: block;
}
.wl-desc-toggle:hover { text-decoration: underline; }

/* Sidebar */
.wl-sidebar {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    max-height: calc(100vh - 120px);
    display: flex; flex-direction: column;
    position: sticky; top: 80px;
}
.wl-sidebar-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border);
}
.wl-sidebar-header h3 {
    font-size: 0.85rem; font-weight: 700; letter-spacing: 0.04em;
    display: flex; align-items: center; gap: 0.4rem;
}
.wl-sidebar-list {
    overflow-y: auto; flex: 1;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}
.wl-sidebar-card {
    display: flex; gap: 0.65rem;
    padding: 0.65rem 0.85rem;
    text-decoration: none; color: inherit;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    transition: all 0.15s;
}
.wl-sidebar-card:hover { background: var(--accent-glow-hover); }
.wl-sidebar-card.active { background: var(--accent-glow); border-left: 2px solid var(--accent); }
.wl-sidebar-thumb {
    position: relative; width: 140px; min-width: 140px; height: 78px;
    border-radius: 4px; overflow: hidden;
    background: #0a0a0a;
}
.wl-sidebar-thumb img {
    width: 100%; height: 100%; object-fit: cover;
}
.wl-sidebar-info { flex: 1; min-width: 0; }
.wl-sidebar-title {
    font-size: 0.75rem; font-weight: 600; line-height: 1.3;
    margin-bottom: 0.3rem;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.wl-sidebar-card:hover .wl-sidebar-title { color: var(--accent); }
.wl-sidebar-meta {
    font-size: 0.65rem; color: var(--text-muted);
    display: flex; flex-wrap: wrap; gap: 0.25rem;
}
.wl-sidebar-viewall {
    display: flex; align-items: center; justify-content: center; gap: 0.35rem;
    padding: 0.75rem;
    font-size: 0.75rem; font-weight: 600;
    color: var(--accent); text-decoration: none;
    border-top: 1px solid var(--border);
    transition: all 0.15s;
}
.wl-sidebar-viewall:hover { background: var(--accent-glow-hover); }

/* ── Video Gallery Responsive ──────────────────────────── */
@media (max-width: 1024px) {
    .wl-theater { grid-template-columns: 1fr; }
    .wl-sidebar { max-height: none; position: static; }
    .wl-sidebar-list { max-height: 400px; }
}
@media (max-width: 900px) {
    .vg-hero {
        grid-template-columns: 1fr;
        gap: 1.25rem; padding: 1rem;
    }
    .vg-hero-title { font-size: 1.2rem; }
    .vg-toolbar-top { flex-direction: column; align-items: flex-start; }
    .vg-toolbar-right { width: 100%; flex-wrap: wrap; }
    .vg-search-input { width: 100% !important; flex: 1; }
    .vg-search { flex: 1; }
    .vg-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
    .vg-card--list { flex-direction: column; max-height: none; }
    .vg-card--list .vg-card-thumb { width: 100%; min-width: 0; padding-bottom: 56.25%; height: auto; }
    .vg-lightbox-container { width: 96vw; }
}
@media (max-width: 600px) {
    .vg-grid { grid-template-columns: 1fr; gap: 1rem; }
    .vg-hero { padding: 0.75rem; margin-bottom: 1.5rem; }
    .vg-hero-title { font-size: 1.05rem; }
    .vg-hero-desc { display: none; }
    .vg-lightbox-info { padding: 1rem; }
    .vg-lightbox-title { font-size: 1rem; }
}

/* ── Responsive Tournament ───────────────────────────── */
@media (max-width: 900px) {
    .bk-bracket {
        flex-direction: column;
        align-items: stretch;
    }
    .bk-round { min-width: unset; flex-direction: column; gap: 0.75rem; }
    .bk-header { flex-direction: column; gap: 0.5rem; }
    .bk-header-label { margin: 0; min-width: unset; }
    .bracket-lines, .bk-header-spacer { display: none; }
    .bk-match { margin: 0; }
    .tournament-winner-banner {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem 1rem;
    }
    .competitor-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Mobile Bottom Nav ──────────────────────────────── */
.bottom-nav {
    display: none;
}
@media (max-width: 768px) {
    .bottom-nav {
        display: flex;
        position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
        background: rgba(10, 10, 10, 0.96);
        backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
        border-top: 1px solid var(--border);
        justify-content: space-around; align-items: flex-end;
        padding: 0.4rem 0; padding-bottom: calc(0.4rem + env(safe-area-inset-bottom, 0px));
        height: auto;
    }
    body { padding-bottom: 68px; }
    .tracker-footer { margin-bottom: 0; }
}
.bottom-nav-item, .bottom-nav-action {
    display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
    text-decoration: none; color: var(--text-muted);
    font-family: var(--font-condensed); font-size: 0.55rem;
    letter-spacing: 0.08em; text-transform: uppercase;
    background: none; border: none; cursor: pointer;
    padding: 0.35rem 0.75rem; transition: color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.bottom-nav-item i, .bottom-nav-action > i { width: 20px; height: 20px; }
.bottom-nav-item.active, .bottom-nav-item:active { color: var(--accent); }
.bottom-nav-action { color: var(--accent); position: relative; }
.bottom-nav-action-btn {
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--accent);
    transform: translateY(-10px);
    box-shadow: 0 4px 20px rgba(229, 114, 0, 0.45);
    transition: transform 0.15s, box-shadow 0.15s;
}
.bottom-nav-action-btn i, .bottom-nav-action-btn svg { width: 24px; height: 24px; color: #000 !important; }
.bottom-nav-action:active .bottom-nav-action-btn {
    transform: translateY(-10px) scale(0.94);
}
.bottom-nav-action span:last-child {
    margin-top: -6px;
}

/* Bottom nav popup */
.bottom-nav-overlay {
    display: none; position: fixed; inset: 0; z-index: 999;
    background: rgba(0, 0, 0, 0.55);
}
.bottom-nav-overlay.show { display: block; }
.bottom-nav-popup {
    display: none; position: fixed;
    bottom: 80px; left: 1rem; right: 1rem; z-index: 1001;
    background: var(--bg-elevated);
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5);
    padding: 1rem;
}
.bottom-nav-popup.show { display: block; }
.bottom-nav-popup-title {
    font-family: var(--font-condensed); font-size: 0.65rem;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--accent); margin-bottom: 0.75rem;
}
.bottom-nav-popup-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
}
.bottom-nav-popup-link {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.7rem 0.75rem; border-radius: var(--radius-sm);
    background: var(--bg-hover); text-decoration: none; color: var(--text-primary);
    font-size: 0.75rem; font-weight: 600;
    transition: background 0.15s;
}
.bottom-nav-popup-link:active { background: var(--bg-surface); }
.bottom-nav-popup-link i { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }

/* ── Chat Monitor ───────────────────────────────────── */
.chat-monitor-status {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.4rem 0.8rem; border-radius: var(--radius-sm);
    font-family: var(--font-condensed); font-size: 0.7rem;
    letter-spacing: 0.08em; text-transform: uppercase;
}
.chat-monitor-status--active {
    background: rgba(34, 197, 94, 0.15); color: #22c55e;
}
.chat-monitor-status--inactive {
    background: rgba(255, 255, 255, 0.05); color: var(--text-muted);
}
.chat-monitor-status .status-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: currentColor; animation: pulse-live 1.5s infinite;
}
.chat-monitor-status--inactive .status-dot { animation: none; }
.chat-stats-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem; margin-bottom: 1.5rem;
}
.chat-log {
    max-height: 400px; overflow-y: auto; border-radius: var(--radius-sm);
    background: var(--bg-primary); border: 1px solid var(--border);
}
.chat-log-entry {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border);
    font-size: 0.75rem;
}
.chat-log-entry:last-child { border-bottom: none; }
.chat-log-cmd {
    font-family: var(--font-condensed); font-size: 0.65rem;
    letter-spacing: 0.06em; text-transform: uppercase;
    padding: 0.15rem 0.4rem; border-radius: 3px;
    font-weight: 700; min-width: 48px; text-align: center;
}
.chat-log-cmd--cheer { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
.chat-log-cmd--boo { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.chat-log-cmd--rate { background: rgba(234, 179, 8, 0.2); color: #eab308; }
.chat-log-user { color: var(--text-muted); min-width: 100px; }
.chat-log-target { color: var(--text-primary); font-weight: 600; flex: 1; }
.chat-log-change { font-weight: 700; min-width: 40px; text-align: right; }
.chat-log-change.positive { color: #22c55e; }
.chat-log-change.negative { color: #ef4444; }

/* ============================================================
   MEMBER PORTAL — Bold Modern Design
   ============================================================ */

.portal {
    max-width: 1100px;
    margin: 0 auto;
}

/* ── Hero Header ─────────────────────────────────────── */
.portal-hero {
    position: relative;
    padding: 3rem 0 2rem;
    overflow: hidden;
}
.portal-hero-glow {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 300px;
    background: radial-gradient(ellipse at center, rgba(229,114,0,0.12) 0%, transparent 70%);
    pointer-events: none;
}
.portal-hero-content {
    position: relative;
    z-index: 1;
}
.portal-label {
    display: inline-block;
    font-family: var(--font-condensed);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    color: var(--accent);
    margin-bottom: 0.5rem;
    padding: 0.3rem 0.8rem;
    border: 1px solid rgba(229,114,0,0.3);
    border-radius: 4px;
    background: var(--accent-glow);
}
.portal-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.1;
    margin-bottom: 0.75rem;
    color: var(--text-primary);
}
.portal-title-accent {
    background: linear-gradient(135deg, var(--accent) 0%, #FF9F40 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.portal-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
    max-width: 520px;
    line-height: 1.6;
}

/* ── Stat Cards ──────────────────────────────────────── */
.portal-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}
.portal-stat {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.3s, box-shadow 0.3s;
}
.portal-stat:hover {
    border-color: rgba(229,114,0,0.25);
    box-shadow: 0 0 20px rgba(229,114,0,0.06);
}
.portal-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.portal-stat-icon--orange {
    background: var(--accent-glow);
    color: var(--accent);
    box-shadow: 0 0 16px rgba(229,114,0,0.1);
}
.portal-stat-icon--yellow {
    background: rgba(234,179,8,0.12);
    color: #eab308;
    box-shadow: 0 0 16px rgba(234,179,8,0.1);
}
.portal-stat-icon--green {
    background: rgba(34,197,94,0.12);
    color: #22c55e;
    box-shadow: 0 0 16px rgba(34,197,94,0.1);
}
.portal-stat-value {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
}
.portal-stat-label {
    font-family: var(--font-condensed);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

/* ── Action Cards Grid ───────────────────────────────── */
.portal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}
.portal-card {
    position: relative;
    overflow: hidden;
    padding: 2rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.portal-card:hover {
    border-color: rgba(229,114,0,0.2);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3), 0 0 24px rgba(229,114,0,0.05);
}
.portal-card-glow {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(229,114,0,0.06) 0%, transparent 70%);
    pointer-events: none;
    transition: opacity 0.3s;
    opacity: 0;
}
.portal-card:hover .portal-card-glow {
    opacity: 1;
}
.portal-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.portal-card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.portal-card-icon--orange {
    background: var(--accent-glow);
    color: var(--accent);
}
.portal-card-icon--blue {
    background: rgba(59,130,246,0.12);
    color: #3b82f6;
}
.portal-card-icon--green {
    background: rgba(34,197,94,0.12);
    color: #22c55e;
}
.portal-card-icon--purple {
    background: rgba(168,85,247,0.12);
    color: #a855f7;
}
.portal-card-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}
.portal-card-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}
.portal-card-notice {
    font-size: 0.85rem;
    color: var(--accent);
    font-weight: 600;
    padding: 0.6rem 0.8rem;
    background: var(--accent-glow);
    border: 1px solid rgba(229,114,0,0.15);
    border-radius: var(--radius-sm);
}

/* ── Portal Buttons ──────────────────────────────────── */
.portal-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.4rem;
    font-family: var(--font-condensed);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: var(--radius);
    text-decoration: none;
    transition: all 0.25s;
    cursor: pointer;
    border: none;
}
.portal-btn--primary {
    background: linear-gradient(135deg, var(--accent) 0%, #FF9F40 100%);
    color: var(--text-primary);
    box-shadow: 0 4px 16px rgba(229,114,0,0.25);
}
.portal-btn--primary:hover {
    color: var(--text-primary);
    box-shadow: 0 6px 24px rgba(229,114,0,0.35);
    transform: translateY(-1px);
}
.portal-btn--ghost {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
}
.portal-btn--ghost:hover {
    color: var(--text-primary);
    border-color: rgba(229,114,0,0.3);
    background: var(--bg-hover);
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 768px) {
    .portal-stats {
        grid-template-columns: 1fr;
    }
    .portal-grid {
        grid-template-columns: 1fr;
    }
    .portal-title {
        font-size: 1.8rem;
    }
}

/* ── Upload Widget Styles ─────────────────────────────── */
.cpw-upload-widget {
    min-height: 0;
}

/* ── Form Input Missing States ────────────────────────── */
.input-field:disabled, .select-field:disabled, .textarea-field:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--bg-elevated);
}
.input-field:focus-visible, .select-field:focus-visible, .textarea-field:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

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

/* ── Homepage Hero Slider ─────────────────────────────── */
.hero-slider {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius);
    margin-bottom: 2rem;
    border: 1px solid var(--border);
}
.hero-slider-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-slide {
    min-width: 100%;
    position: relative;
    aspect-ratio: 21/9;
    background: linear-gradient(135deg, var(--bg-surface) 0%, var(--bg-elevated) 100%);
    overflow: hidden;
}
.hero-slide-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
}
.hero-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.6) 50%, transparent 100%);
}
.hero-slide-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 2.5rem;
    z-index: 1;
}
.hero-slide-label {
    font-family: var(--font-condensed);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.hero-slide-title {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 3vw, 2rem);
    font-weight: 900;
    letter-spacing: 0.04em;
    line-height: 1.15;
    margin-bottom: 0.5rem;
    max-width: 500px;
}
.hero-slide-desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
    max-width: 420px;
    line-height: 1.5;
    margin-bottom: 1rem;
}
.hero-slide-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.25rem;
    background: var(--accent);
    color: #000;
    border-radius: var(--radius-xs);
    font-family: var(--font-condensed);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: all 0.2s;
    width: fit-content;
}
.hero-slide-cta:hover {
    background: var(--accent-light);
    color: #000;
    transform: translateY(-1px);
}
.hero-slider-dots {
    position: absolute;
    bottom: 1rem;
    right: 1.5rem;
    display: flex;
    gap: 0.4rem;
    z-index: 2;
}
.hero-slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
}
.hero-slider-dot.active {
    background: var(--accent);
    width: 24px;
    border-radius: 4px;
}
.hero-slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(10,10,10,0.7);
    border: 1px solid var(--border);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    z-index: 2;
    transition: all 0.2s;
    padding: 0;
}
.hero-slider-nav:hover {
    background: rgba(10,10,10,0.9);
    color: var(--accent);
    border-color: var(--accent);
}
.hero-slider-prev { left: 0.75rem; }
.hero-slider-next { right: 0.75rem; }

@media (max-width: 768px) {
    .hero-slide { aspect-ratio: 16/9; }
    .hero-slide-content { padding: 1.25rem 1.5rem; }
    .hero-slider-nav { display: none; }
    .hero-slide-title { font-size: 1.1rem; }
    .hero-slide-desc { font-size: 0.75rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ── News Grid (Homepage) ─────────────────────────────── */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.news-grid-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: all 0.2s;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}
.news-grid-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    color: inherit;
}
.news-grid-img {
    aspect-ratio: 16/9;
    background: var(--bg-elevated);
    overflow: hidden;
    position: relative;
}
.news-grid-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.news-grid-card:hover .news-grid-img img {
    transform: scale(1.03);
}
.news-grid-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bg-elevated) 0%, rgba(229,114,0,0.05) 100%);
}
.news-grid-body {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.news-grid-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.news-grid-title {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.4rem;
}
.news-grid-excerpt {
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}
.news-grid-footer {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
@media (max-width: 1024px) { .news-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .news-grid { grid-template-columns: 1fr; } }

/* ── Section Headers (Modern) ─────────────────────────── */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}
.section-header-title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.section-header-title i {
    color: var(--accent);
    width: 20px;
    height: 20px;
}
.section-header-link {
    font-family: var(--font-condensed);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.section-header-link:hover {
    color: var(--accent-light);
}

/* ── Homepage Responsive Fix ──────────────────────────── */
.homepage-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 2rem;
    align-items: start;
}
@media (max-width: 1024px) {
    .homepage-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Stat Cards Responsive ────────────────────────────── */
.stat-cards-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}
@media (max-width: 640px) {
    .stat-cards-row {
        grid-template-columns: 1fr;
    }
}

/* ── Preview Cards Row ────────────────────────────────── */
.preview-cards-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}
@media (max-width: 768px) {
    .preview-cards-row {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════════
   ADMIN COMPONENTS & FORM SYSTEM
   Shared styles for all /admin pages
   ══════════════════════════════════════════════════════════ */

/* ── Admin Card ──────────────────────────────────────── */
.admin-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
}
.admin-card h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.admin-card-icon {
    width: 24px;
    height: 24px;
    color: var(--accent);
    flex-shrink: 0;
}

/* ── Admin Scoped Form Elements ──────────────────────── */
/* Style bare inputs/selects/textareas within admin layout
   so pages don't need explicit .input-field classes */
.admin-main input[type="text"],
.admin-main input[type="email"],
.admin-main input[type="password"],
.admin-main input[type="number"],
.admin-main input[type="url"],
.admin-main input[type="search"],
.admin-main input[type="date"],
.admin-main input[type="datetime-local"],
.admin-main input[type="tel"],
.admin-main input[type="file"],
.admin-main select,
.admin-main textarea {
    width: 100%;
    padding: 0.6rem 0.8rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.85rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    line-height: 1.5;
}
.admin-main input[type="text"]:focus,
.admin-main input[type="email"]:focus,
.admin-main input[type="password"]:focus,
.admin-main input[type="number"]:focus,
.admin-main input[type="url"]:focus,
.admin-main input[type="search"]:focus,
.admin-main input[type="date"]:focus,
.admin-main input[type="datetime-local"]:focus,
.admin-main input[type="tel"]:focus,
.admin-main select:focus,
.admin-main textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(229, 114, 0, 0.12);
}
.admin-main input::placeholder,
.admin-main textarea::placeholder {
    color: var(--text-muted);
}
.admin-main select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23666' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2rem;
}
.admin-main textarea {
    resize: vertical;
    min-height: 80px;
}
.admin-main input[type="file"] {
    padding: 0.4rem;
    font-size: 0.8rem;
    cursor: pointer;
}
.admin-main input[type="file"]::file-selector-button {
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-secondary);
    padding: 0.3rem 0.6rem;
    font-size: 0.78rem;
    font-family: var(--font-body);
    cursor: pointer;
    margin-right: 0.5rem;
    transition: all 0.2s;
}
.admin-main input[type="file"]::file-selector-button:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #000;
}
/* Color input */
.admin-main input[type="color"] {
    width: 40px;
    height: 36px;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--bg-elevated);
    cursor: pointer;
}
.admin-main input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 2px;
}
.admin-main input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 3px;
}
/* Checkbox & Radio */
.admin-main input[type="checkbox"],
.admin-main input[type="radio"] {
    width: auto;
    accent-color: var(--accent);
    cursor: pointer;
}
/* Disabled states */
.admin-main input:disabled,
.admin-main select:disabled,
.admin-main textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--bg-primary);
}
/* Admin labels */
.admin-main label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
    letter-spacing: 0.01em;
}

/* ── Form Layout ─────────────────────────────────────── */
.form-group {
    margin-bottom: 1rem;
    flex: 1;
    min-width: 0;
}
.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}
.form-row .form-group {
    margin-bottom: 0;
}
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.form-grid .form-group {
    margin-bottom: 0;
}
.form-full {
    grid-column: 1 / -1;
}
.form-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
}
.form-hint {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 0.3rem;
}
@media (max-width: 640px) {
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* ── Color Picker ────────────────────────────────────── */
.color-picker {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.color-picker input[type="color"] {
    flex-shrink: 0;
}
.color-picker input[type="text"] {
    flex: 1;
    font-family: var(--font-condensed);
    letter-spacing: 0.04em;
}

/* ── Upload Compact ──────────────────────────────────── */
.upload-compact {
    border: 2px dashed var(--border);
    border-radius: var(--radius-xs);
    padding: 1rem;
    text-align: center;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 0.8rem;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.upload-compact:hover {
    border-color: var(--accent);
    background: var(--accent-glow-hover);
    color: var(--accent);
}
.upload-preview {
    border-radius: var(--radius-xs);
    border: 1px solid var(--border);
    margin-top: 0.5rem;
}

/* ── Button Variants ─────────────────────────────────── */
.btn-outline {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
}
.btn-outline:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-glow-hover);
}
.btn-small {
    padding: 0.3rem 0.65rem;
    font-size: 0.72rem;
}
.btn-accent {
    background: var(--accent);
    color: #000;
}
.btn-accent:hover {
    background: var(--accent-light);
    color: #000;
}
.btn-icon {
    padding: 0.4rem;
    line-height: 1;
}
.btn-icon i[data-lucide] {
    width: 16px;
    height: 16px;
}

/* ── Admin Tables ────────────────────────────────────── */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.admin-table th {
    text-align: left;
    padding: 0.6rem 0.75rem;
    font-family: var(--font-condensed);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.admin-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    vertical-align: middle;
}
.admin-table tr:hover td {
    background: rgba(255,255,255,0.02);
}
.admin-table .table-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    justify-content: flex-end;
}

/* ── Admin Page Header ───────────────────────────────── */
.admin-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.admin-page-header h1 {
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    letter-spacing: 0.03em;
}
.admin-page-header .subtitle {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

/* ── Admin Stat Boxes ────────────────────────────────── */
.stat-box,
.stat-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    padding: 1rem;
    text-align: center;
}
.stat-card-value,
.stat-value {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1.2;
}
.stat-card-label,
.stat-label {
    font-family: var(--font-condensed);
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 0.2rem;
}

/* ── Empty State ─────────────────────────────────────── */
.admin-empty {
    text-align: center;
    padding: 2.5rem 1.5rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}
.admin-empty i[data-lucide] {
    width: 36px;
    height: 36px;
    opacity: 0.25;
    display: block;
    margin: 0 auto 0.75rem;
}

/* ── Admin Utility Classes ───────────────────────────── */
.admin-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
.admin-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.admin-grid-4 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}
@media (max-width: 768px) {
    .admin-grid-2,
    .admin-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* ── Focus Visible for Accessibility ─────────────────── */
.admin-main input:focus-visible,
.admin-main select:focus-visible,
.admin-main textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* ── Admin Inline Tags ───────────────────────────────── */
.admin-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-family: var(--font-condensed);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: rgba(255,255,255,0.05);
    color: var(--text-muted);
}

/* ── Admin Section Divider ───────────────────────────── */
.admin-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1.5rem 0;
}

/* ── Batch Check / Select All ────────────────────────── */
.batch-check {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    cursor: pointer;
}
.batch-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

/* ── Admin Responsive ────────────────────────────────── */
@media (max-width: 900px) {
    .admin-main {
        padding: 1rem !important;
    }
    .admin-card {
        padding: 1rem;
    }
}

/* ══════════════════════════════════════════════════════════
   PAGE BACKGROUNDS SYSTEM
   ══════════════════════════════════════════════════════════ */

.page-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}
.page-bg-image {
    position: absolute;
    inset: 0;
    background: var(--bg-url) no-repeat;
    background-position: var(--bg-position, center center);
    background-size: var(--bg-size, cover);
    opacity: var(--bg-opacity, 0.15);
    filter: blur(var(--bg-blur, 0px));
}
.page-bg-overlay {
    position: absolute;
    inset: 0;
    background: var(--overlay-color, #000);
    opacity: var(--overlay-opacity, 0.85);
}
/* Section-specific backgrounds */
.page-bg-header {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 500px;
    pointer-events: none;
    overflow: hidden;
}
.page-bg-header .page-bg-image,
.page-bg-header .page-bg-overlay {
    position: absolute; inset: 0;
}
.page-bg-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 120px;
    background: linear-gradient(to top, var(--bg-primary), transparent);
}
.page-bg-content {
    position: fixed;
    top: 400px; left: 0; right: 0; bottom: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}
@supports (-webkit-touch-callout: none) {
    .page-bg { position: absolute; min-height: 100vh; }
    .page-bg-image { background-attachment: scroll !important; }
}

/* ── Phoenix Ember Particles ──────────────────────────── */
.ember-container {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.ember {
    position: absolute;
    bottom: -10px;
    border-radius: 50%;
    opacity: 0;
    will-change: transform, opacity;
    animation: ember-rise var(--ember-dur, 12s) cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
}
@keyframes ember-rise {
    0%   { opacity: 0; transform: translateY(0) translateX(0) scale(1); }
    8%   { opacity: 0.6; }
    30%  { opacity: 0.5; transform: translateY(-25vh) translateX(calc(var(--ember-drift, 20px) * 0.4)) scale(0.9); }
    60%  { opacity: 0.35; transform: translateY(-55vh) translateX(calc(var(--ember-drift, 20px) * 1.1)) scale(0.7); }
    85%  { opacity: 0.12; }
    100% { opacity: 0; transform: translateY(-105vh) translateX(calc(var(--ember-drift, 20px) * 1.6)) scale(0.2); }
}
@media (prefers-reduced-motion: reduce) {
    .ember-container { display: none; }
}

/* ══════════════════════════════════════════════════════════
   ENHANCED FOOTER
   ══════════════════════════════════════════════════════════ */

.footer-stats-bar {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    padding: 1rem 0;
    margin-bottom: 0;
    flex-wrap: wrap;
}
.footer-stat-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    color: var(--text-muted);
    font-family: var(--font-condensed);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: color 0.2s;
}
.footer-stat-item:hover {
    color: var(--text-primary);
}
.footer-stat-icon {
    display: inline-flex;
    align-items: center;
    color: var(--accent);
    opacity: 0.6;
}
.footer-stat-icon i { width: 14px; height: 14px; }
.footer-stat-value {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.footer-stat-label {
    font-family: var(--font-condensed);
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-muted);
}

.tracker-footer {
    border-top: 1px solid var(--border);
    padding: 1.5rem 0 0;
    margin-top: 3rem;
}
.footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    padding: 1.25rem 0;
    flex-wrap: wrap;
}
.footer-links a {
    font-family: var(--font-condensed);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s;
}
.footer-links a:hover { color: var(--text-primary); }
.footer-links .footer-sep { color: var(--border); }
.tracker-footer-text {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: 1rem 0 1.5rem;
    border-top: 1px solid var(--border);
}

/* ══════════════════════════════════════════════════════════
   NEWS PAGE — FEATURED LAYOUT
   ══════════════════════════════════════════════════════════ */

.news-featured-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}
.news-featured-main {
    grid-row: span 2;
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, transform 0.2s;
}
.news-featured-main:hover {
    border-color: var(--border-light);
    transform: translateY(-2px);
    color: inherit;
}
.news-featured-main .nf-img {
    position: relative;
    height: 320px;
    overflow: hidden;
}
.news-featured-main .nf-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.news-featured-main:hover .nf-img img {
    transform: scale(1.03);
}
.news-featured-main .nf-body {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.news-featured-main .nf-category {
    position: absolute;
    bottom: 0.75rem;
    left: 0.75rem;
}
.news-featured-main .nf-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.75rem;
}
.news-featured-main .nf-excerpt {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-featured-main .nf-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.news-featured-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.news-card-sm {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
}
.news-card-sm:hover {
    border-color: var(--border-light);
    transform: translateY(-2px);
    color: inherit;
}
.news-card-sm .nc-img {
    position: relative;
    height: 140px;
    overflow: hidden;
}
.news-card-sm .nc-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}
.news-card-sm:hover .nc-img img {
    transform: scale(1.03);
}
.news-card-sm .nc-category {
    position: absolute;
    bottom: 0.5rem;
    left: 0.5rem;
}
.news-card-sm .nc-body {
    padding: 1rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.news-card-sm .nc-title {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.news-card-sm .nc-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: auto;
}
.news-read-more {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-condensed);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    margin-top: 0.75rem;
    transition: color 0.2s;
}
.news-read-more:hover { color: var(--accent-light); }

@media (max-width: 1024px) {
    .news-featured-layout { grid-template-columns: 1fr; }
    .news-featured-main { grid-row: auto; }
    .news-featured-main .nf-img { height: 220px; }
}
@media (max-width: 640px) {
    .news-featured-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   ROSTER PAGE — SUPERSTAR CARD V2
   ══════════════════════════════════════════════════════════ */

.superstar-card-v2 {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 340px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.superstar-card-v2:hover {
    border-color: var(--accent-dark);
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(229, 114, 0, 0.12);
    color: inherit;
}
.sc-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: top center;
    transition: transform 0.4s;
}
.superstar-card-v2:hover .sc-bg {
    transform: scale(1.05);
}
.sc-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 20%,
        rgba(0,0,0,0.3) 50%,
        rgba(0,0,0,0.92) 100%
    );
}
.sc-badges {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    display: flex;
    gap: 0.35rem;
    z-index: 2;
}
.sc-info {
    position: relative;
    z-index: 2;
    padding: 1rem;
}
.sc-name {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    margin-bottom: 0.35rem;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.sc-record-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.25rem;
}
.sc-record {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.sc-momentum-num {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 2rem;
    line-height: 1;
    color: var(--accent);
    text-shadow: 0 0 20px rgba(229,114,0,0.3);
}
.sc-momentum-bar {
    margin-top: 0.35rem;
}
.sc-titles {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}
/* Placeholder when no image */
.sc-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bg-surface), var(--bg-elevated));
    font-family: var(--font-display);
    font-size: 4rem;
    font-weight: 900;
    color: rgba(229,114,0,0.08);
}

/* Alpha section dividers */
.roster-alpha-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    margin-top: 0.5rem;
    grid-column: 1 / -1;
}
.roster-alpha-letter {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.25rem;
    color: var(--accent);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-glow);
    border-radius: var(--radius-xs);
}
.roster-alpha-line {
    flex: 1;
    height: 1px;
    background: var(--border);
}

@media (max-width: 1024px) {
    .superstar-card-v2 { height: 300px; }
}
@media (max-width: 640px) {
    .superstar-card-v2 { height: 280px; }
    .sc-momentum-num { font-size: 1.5rem; }
}

/* ══════════════════════════════════════════════════════════
   HOMEPAGE — COMMANDER LINEUP
   ══════════════════════════════════════════════════════════ */

.commander-lineup {
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.commander-lineup-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.commander-card {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
}
.commander-card:hover {
    border-color: var(--border-light);
    transform: translateY(-2px);
    color: inherit;
}
.commander-card-img {
    height: 180px;
    overflow: hidden;
    position: relative;
}
.commander-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.commander-card-img .cc-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.8) 100%);
}
.commander-card-type {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    font-family: var(--font-condensed);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 0.2rem 0.5rem;
    border-radius: 3px;
    background: var(--accent-glow);
    color: var(--accent);
}
.commander-card-info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
}
.commander-card-name {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.commander-card-body {
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-surface);
    gap: 0.75rem;
}
.commander-card-date {
    font-family: var(--font-condensed);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}
.commander-card-btn {
    font-family: var(--font-condensed);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
@media (max-width: 1024px) {
    .commander-lineup-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .commander-lineup-grid { grid-template-columns: 1fr; }
    .commander-card-img { height: 140px; }
}

/* ── Commander Card — Centered Logo ──────────────────────── */
.commander-card-logo {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
}
.commander-card-logo img {
    max-height: 85%;
    max-width: 85%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 16px rgba(0,0,0,0.6));
    transition: transform 0.3s ease;
}
.commander-card:hover .commander-card-logo img {
    transform: scale(1.05);
}

/* ── Stat Cards — Centered Layout ────────────────────────── */
.stat-card-centered {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
}
.stat-card-icon-center {
    width: 28px;
    height: 28px;
    color: var(--accent);
    margin-bottom: 0.75rem;
    opacity: 0.7;
    transition: opacity 0.2s;
}
.stat-card-centered:hover .stat-card-icon-center {
    opacity: 1;
}

/* ══════════════════════════════════════════════════════════
   HOMEPAGE — NEXT SHOW / LATEST RESULTS WIDGETS
   ══════════════════════════════════════════════════════════ */

.next-show-widget {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.next-show-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}
.next-show-title {
    font-family: var(--font-condensed);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.next-show-title i { width: 14px; height: 14px; color: var(--accent); }
.next-show-show-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--accent);
}
.next-show-body {
    padding: 1.25rem;
}
.next-show-countdown {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-condensed);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.25rem 0.6rem;
    border-radius: 3px;
    border: 1px dashed var(--border-light);
    color: var(--text-muted);
    margin-bottom: 1rem;
}
.next-show-match {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}
.next-show-match:last-child { border-bottom: none; }
.next-show-match-names {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 700;
    flex: 1;
}
.next-show-match-vs {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 0.7rem;
    color: var(--accent);
    padding: 0 0.25rem;
}
.next-show-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.next-show-date {
    font-family: var(--font-condensed);
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.next-show-date i { width: 12px; height: 12px; }

.latest-results-widget {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.latest-results-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-condensed);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}
.latest-results-header i { width: 14px; height: 14px; color: var(--accent); }
.result-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}
.result-item:last-child { border-bottom: none; }
.result-item:hover { background: var(--bg-hover); }
.result-item-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-xs);
    overflow: hidden;
    flex-shrink: 0;
}
.result-item-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.result-item-info {
    flex: 1;
    min-width: 0;
}
.result-item-names {
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.result-item-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}
.result-item-outcome {
    font-family: var(--font-condensed);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    flex-shrink: 0;
}
.result-win { background: var(--color-success-bg); color: var(--color-success); }
.result-loss { background: var(--color-danger-bg); color: var(--color-danger); }

/* ══════════════════════════════════════════════════════════
   FILTER TAB POLISH
   ══════════════════════════════════════════════════════════ */

.filter-tab {
    font-family: var(--font-condensed);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.45rem 1rem;
    border-radius: var(--radius-xs);
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
    border: 1px solid transparent;
}
.filter-tab-active {
    background: var(--accent);
    color: var(--text-primary);
    border-color: var(--accent);
}
.filter-tab-inactive {
    background: var(--bg-elevated);
    color: var(--text-muted);
    border-color: var(--border);
}
.filter-tab-inactive:hover {
    color: var(--text-primary);
    border-color: var(--border-light);
}

.brand-tab {
    font-family: var(--font-condensed);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.5rem 1.25rem;
    border-radius: var(--radius-xs);
    text-decoration: none;
    transition: all 0.2s;
    border: 1px solid var(--border);
    color: var(--text-muted);
    background: transparent;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.brand-tab.active {
    background: var(--accent);
    color: var(--text-primary);
    border-color: var(--accent);
}
.brand-tab:hover:not(.active) {
    color: var(--text-primary);
    border-color: var(--border-light);
}

/* Show logo inline images */
.show-logo-inline {
    display: inline-block;
    vertical-align: middle;
    object-fit: contain;
    flex-shrink: 0;
}

.gender-tab {
    font-family: var(--font-condensed);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.35rem 0.9rem;
    border-radius: var(--radius-xs);
    text-decoration: none;
    transition: all 0.2s;
    border: 1px solid var(--border);
    color: var(--text-muted);
    background: transparent;
}
.gender-tab.active {
    background: var(--accent);
    color: var(--text-primary);
    border-color: var(--accent);
}
.gender-tab:hover:not(.active) {
    color: var(--text-primary);
    border-color: var(--border-light);
}

.roster-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.roster-count {
    font-family: var(--font-condensed);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-top: 0.5rem;
    padding: 0.3rem 0.75rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    display: inline-block;
}
.roster-filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

/* ── Large & Ultrawide Screen Scaling ────────────────── */
@media (min-width: 1600px) {
    html { font-size: 17px; }
}
@media (min-width: 2000px) {
    html { font-size: 18px; }
}
@media (min-width: 2560px) {
    html { font-size: 19px; }
    .main-content { max-width: 1600px; }
}
@media (min-width: 3440px) {
    html { font-size: 20px; }
    .main-content { max-width: 1800px; }
}

/* ── Settings Sections ───────────────────────────────── */
.settings-section {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: 1rem;
}
.settings-section > summary {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 1rem 1.25rem;
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.settings-section > summary::-webkit-details-marker { display: none; }
.settings-section > summary::before {
    content: '\25B6';
    font-size: 0.6rem;
    color: var(--text-muted);
    transition: transform 0.2s;
}
.settings-section[open] > summary::before {
    transform: rotate(90deg);
}
.settings-section[open] > summary {
    border-bottom: 1px solid var(--border);
}
.settings-section-body {
    padding: 1.25rem;
}
.settings-section-body h4 {
    font-family: var(--font-condensed);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}
.settings-section-body h4:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.settings-logo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 768px) {
    .settings-logo-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Predictions ─────────────────────────────────────── */
.prediction-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.prediction-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.prediction-match-type {
    font-family: var(--font-display);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--accent);
    background: var(--accent-glow);
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-xs);
}
.prediction-options {
    display: flex;
    gap: 0.5rem;
    padding: 1rem;
    flex-wrap: wrap;
}
.prediction-pick {
    flex: 1;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0.75rem;
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    position: relative;
}
.prediction-pick input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.prediction-pick:hover {
    border-color: var(--accent);
    background: var(--accent-glow-hover);
}
.prediction-pick-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
}
.prediction-pick-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
}
.prediction-pick-name {
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.prediction-selected {
    border-color: var(--accent);
    background: var(--accent-glow);
    box-shadow: 0 0 0 1px var(--accent);
}
.prediction-selected .prediction-pick-img {
    border-color: var(--accent);
}
.prediction-correct {
    border-color: #22c55e;
    background: rgba(34, 197, 94, 0.08);
    box-shadow: 0 0 0 1px #22c55e;
}
.prediction-wrong {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.06);
    opacity: 0.7;
}
.prediction-actual-winner {
    border-color: #22c55e;
    border-style: dashed;
}
.prediction-locked {
    opacity: 0.85;
}
.prediction-locked .prediction-pick {
    cursor: default;
}

/* Leaderboard Table */
.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.leaderboard-table th {
    font-family: var(--font-display);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    text-align: left;
}
.leaderboard-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
}
.leaderboard-table tbody tr:hover {
    background: var(--bg-hover);
}
.leaderboard-table .leaderboard-me {
    background: var(--accent-glow);
}
.leaderboard-table .leaderboard-top td {
    font-weight: 600;
}

/* ── Bounties ────────────────────────────────────────── */
.bounty-type-badge {
    font-family: var(--font-display);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-xs);
    text-transform: uppercase;
}
.bounty-type-open {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}
.bounty-type-direct {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}
.bounty-status-badge {
    font-family: var(--font-condensed);
    font-size: 0.6rem;
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-xs);
}
.bounty-status-open {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}
.bounty-status-accepted {
    color: var(--accent);
    background: var(--accent-glow);
}
.bounty-status-scheduled {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}
.bounty-status-completed {
    color: var(--text-muted);
    background: var(--bg-elevated);
}
.bounty-status-declined {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.06);
}
.bounty-status-expired {
    color: var(--text-muted);
    background: var(--bg-elevated);
    opacity: 0.7;
}

/* Bounty Card */
.bounty-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color 0.2s;
}
.bounty-card:hover {
    border-color: var(--accent);
}
.bounty-card-img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
    flex-shrink: 0;
}
.bounty-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 0.9rem;
}

/* Bounty Detail */
.bounty-detail-sides {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-top: 1.5rem;
}
.bounty-detail-side {
    flex: 1;
    min-width: 0;
}
.bounty-detail-vs {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
    align-self: center;
    flex-shrink: 0;
}
.bounty-detail-character {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: border-color 0.2s;
}
.bounty-detail-character:hover {
    border-color: var(--accent);
}
.bounty-detail-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border);
    flex-shrink: 0;
}

/* Filter Tabs */
.filter-tab {
    font-family: var(--font-condensed);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-xs);
    text-decoration: none;
    transition: all 0.15s;
}
.filter-tab-active {
    background: var(--accent);
    color: #000;
}
.filter-tab-inactive {
    color: var(--text-muted);
    background: var(--bg-elevated);
}
.filter-tab-inactive:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

/* Bounty Board Grid */
.bounty-board-section {
    margin-bottom: 2rem;
}
.bounty-board-section-title {
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

@media (max-width: 640px) {
    .prediction-options {
        flex-direction: column;
    }
    .prediction-pick {
        flex-direction: row;
        min-width: 0;
        padding: 0.75rem;
    }
    .prediction-pick-img {
        width: 36px;
        height: 36px;
    }
    .bounty-detail-sides {
        flex-direction: column;
        gap: 0.75rem;
    }
    .bounty-detail-vs {
        align-self: center;
        font-size: 1rem;
    }
}

/* ── Trading Card Component ──────────────────────────── */
.cpw-trading-card {
    --card-color: #9CA3AF;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.cpw-trading-card-inner {
    position: relative;
    border-radius: 12px;
    border: 3px solid var(--card-color);
    background: linear-gradient(145deg, #1a1a1a 0%, #0d0d0d 100%);
    overflow: hidden;
    aspect-ratio: 5 / 7;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 12px rgba(0,0,0,0.5), inset 0 0 20px rgba(0,0,0,0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cpw-trading-card:hover .cpw-trading-card-inner {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 24px rgba(0,0,0,0.6), 0 0 16px color-mix(in srgb, var(--card-color) 30%, transparent);
}
.cpw-trading-card-rarity {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
}
.cpw-trading-card-image {
    flex: 1;
    overflow: hidden;
    position: relative;
}
.cpw-trading-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cpw-trading-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a1a1a, #111);
}
.cpw-trading-card-footer {
    padding: 8px 10px;
    background: linear-gradient(0deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}
.cpw-trading-card-name {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-primary);
    line-height: 1.2;
}
.cpw-trading-card-desc {
    font-size: 0.65rem;
    color: #999;
    margin-top: 2px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cpw-trading-card-flavor {
    font-size: 0.6rem;
    color: #777;
    font-style: italic;
    margin-top: 2px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cpw-trading-card-badge-inactive {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(239,68,68,0.2);
    color: var(--color-danger);
    font-weight: 700;
    z-index: 2;
}
.cpw-trading-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
}

/* ── Character Profile Page — Hero ────────────────────── */
.char-hero {
    position: relative;
    overflow: hidden;
    min-height: 500px;
    margin: -1.5rem 0 0;
    width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    border-bottom: 1px solid var(--border);
}
.char-hero-banner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center top;
}
.char-hero-banner--empty {
    background: linear-gradient(135deg, rgba(229,114,0,0.12) 0%, transparent 60%);
}
.char-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, #0a0a0a 0%, rgba(10,10,10,0.9) 35%, rgba(10,10,10,0.7) 60%, rgba(10,10,10,0.5) 100%);
}
.char-hero-render {
    position: absolute;
    right: 20%;
    bottom: 0;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: flex-end;
}
.char-hero-render img {
    max-height: 95%;
    width: auto;
    max-width: 400px;
    object-fit: contain;
    filter: drop-shadow(0 4px 24px rgba(0,0,0,0.6));
}
.char-hero-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 500px;
    padding: 1rem 2rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}
.char-hero-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.char-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s;
    background: rgba(10,10,10,0.5);
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius-xs);
    backdrop-filter: blur(8px);
}
.char-breadcrumb:hover {
    color: var(--text-primary);
    text-decoration: none;
}
.char-hero-info {
    margin-top: auto;
    max-width: 55%;
}
.char-hero-badges {
    display: flex;
    gap: 6px;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.char-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #fff;
    color: #000;
}
.char-hero-name {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 900;
    letter-spacing: -1px;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--text-primary);
    text-shadow: 0 2px 16px rgba(0,0,0,0.5);
}
.char-hero-handle {
    display: inline-block;
    color: var(--accent);
    font-size: 15px;
    font-weight: 600;
    margin-top: 0.25rem;
    letter-spacing: 0.5px;
}
.char-hero-nicknames {
    color: var(--accent);
    font-family: var(--font-condensed);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top: 0.5rem;
}
.char-hero-bio {
    color: var(--text-muted);
    font-size: 15px;
    margin-top: 0.75rem;
    line-height: 1.5;
    max-width: 500px;
}

/* ── Team Hero Logo ───────────────────────────────── */
.team-hero-logo {
    height: 80px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    margin-bottom: 0.75rem;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}
@media (max-width: 768px) {
    .team-hero-logo {
        height: 60px;
        max-width: 150px;
    }
}

/* ── Team Hero Renders ─────────────────────────────── */
.team-hero-renders {
    position: absolute;
    right: 15%;
    bottom: 0;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0;
}
.team-hero-render {
    display: flex;
    align-items: flex-end;
    flex-shrink: 0;
}
.team-hero-render img {
    height: 400px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 24px rgba(0,0,0,0.6));
}

/* 2 members — equal size, standing close together */
.team-hero-renders[data-count="2"] .team-hero-render[data-index="0"] {
    z-index: 2;
    margin-right: -50px;
}
.team-hero-renders[data-count="2"] .team-hero-render[data-index="0"] img {
    height: 400px;
}
.team-hero-renders[data-count="2"] .team-hero-render[data-index="1"] {
    z-index: 1;
}
.team-hero-renders[data-count="2"] .team-hero-render[data-index="1"] img {
    height: 390px;
}

/* 3+ members — front member bigger, back members step down */
.team-hero-renders:not([data-count="1"]):not([data-count="2"]) .team-hero-render[data-index="0"] {
    z-index: 3;
    margin-right: -40px;
}
.team-hero-renders:not([data-count="1"]):not([data-count="2"]) .team-hero-render[data-index="0"] img {
    height: 400px;
}
.team-hero-renders:not([data-count="1"]):not([data-count="2"]) .team-hero-render[data-index="1"] {
    z-index: 2;
    margin-right: -40px;
}
.team-hero-renders:not([data-count="1"]):not([data-count="2"]) .team-hero-render[data-index="1"] img {
    height: 380px;
    opacity: 0.9;
}
.team-hero-render[data-index="2"] {
    z-index: 1;
    margin-right: -40px;
}
.team-hero-render[data-index="2"] img {
    height: 350px;
    opacity: 0.8;
}
.team-hero-render[data-index="3"] {
    z-index: 0;
    margin-right: -40px;
}
.team-hero-render[data-index="3"] img {
    height: 320px;
    opacity: 0.7;
}
.team-hero-render[data-index="4"] img {
    height: 300px;
    opacity: 0.65;
}
/* Hide beyond 5 */
.team-hero-render:nth-child(n+6) {
    display: none;
}

/* Team hero responsive */
@media (max-width: 768px) {
    .team-hero-renders {
        right: 0;
        opacity: 0.25;
    }
    .team-hero-render img { height: 300px !important; }
}
@media (max-width: 600px) {
    .team-hero-renders { display: none; }
}

/* Profile body */
.char-profile-body {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 3rem;
    padding: 3rem 1rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Timeline */
.char-timeline {
    position: relative;
    padding-left: 2rem;
}
.char-timeline::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 2px;
    background: var(--border);
}
.char-timeline-entry {
    position: relative;
    margin-bottom: 2.5rem;
}
.char-timeline-entry:last-child {
    margin-bottom: 0;
}
.char-timeline-dot {
    position: absolute;
    left: -2rem;
    top: 0.35rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--bg-primary);
    box-shadow: 0 0 0 3px var(--accent-glow), 0 0 12px rgba(229,114,0,0.3);
    z-index: 1;
}
.char-timeline-era {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}
.char-timeline-subtitle {
    font-family: var(--font-condensed);
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: 0.75rem;
}
.char-timeline-text {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--text-secondary);
}

/* Stats table */
.char-stats-card {
    margin-bottom: 2rem;
}
.char-stats-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-primary);
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--accent);
    margin-bottom: 0;
}
.char-stats-table {
    width: 100%;
    border-collapse: collapse;
}
.char-stats-table tr {
    border-bottom: 1px solid var(--border);
}
.char-stats-table tr:last-child {
    border-bottom: none;
}
.char-stats-table td {
    padding: 0.75rem 0.5rem;
    font-size: 0.85rem;
}
.char-stats-table td:first-child {
    color: var(--text-secondary);
    font-family: var(--font-body);
}
.char-stats-table td:last-child {
    text-align: right;
    font-weight: 700;
    color: var(--text-primary);
}

/* Quote block */
.char-quote {
    margin-top: 1.5rem;
    padding: 1.5rem;
    position: relative;
}
.char-quote-text {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 0.75rem;
}
.char-quote-text::before {
    content: '\201C';
    font-size: 2.5rem;
    color: var(--accent);
    line-height: 0;
    vertical-align: -0.3em;
    margin-right: 0.1em;
}
.char-quote-text::after {
    content: '\201D';
    font-size: 2.5rem;
    color: var(--accent);
    line-height: 0;
    vertical-align: -0.3em;
    margin-left: 0.1em;
}
.char-quote-attr {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--accent);
    font-style: italic;
}

/* Sidebar cards */
.char-sidebar-card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.char-sidebar-card-inner {
    padding: 1.25rem;
}

/* Moves section */
.char-moves-section {
    margin-bottom: 1.5rem;
}
.char-moves-label {
    font-family: var(--font-condensed);
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.char-move-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    font-size: 0.85rem;
}

/* Match record in sidebar */
.char-match-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border);
}
.char-match-row:last-child {
    border-bottom: none;
}

/* Relationships section */
.char-rel-section {
    margin-bottom: 1.5rem;
}
.char-rel-section:last-child {
    margin-bottom: 0;
}
.char-rel-label {
    font-family: var(--font-condensed);
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

/* Responsive */
@media (max-width: 900px) {
    .char-profile-body {
        grid-template-columns: 1fr;
        padding: 2rem 1rem;
        gap: 2rem;
    }
    .char-profile-body > div:last-child {
        order: -1;
    }
    .char-hero {
        min-height: 340px;
    }
    .char-hero-content {
        min-height: 340px;
        padding-bottom: 1.5rem;
    }
    .char-hero-name {
        font-size: clamp(2rem, 8vw, 3rem);
        letter-spacing: -0.5px;
    }
    .char-hero-info {
        max-width: 100%;
    }
    .char-hero-render {
        opacity: 0.25;
        right: -5%;
    }
    .char-hero-nicknames {
        font-size: 11px;
        letter-spacing: 1px;
    }
}
@media (max-width: 600px) {
    .char-hero {
        min-height: 300px;
    }
    .char-hero-content {
        min-height: 300px;
        padding: 1rem 1.25rem 1.5rem;
    }
    .char-hero-render {
        display: none;
    }
    .char-hero-bio {
        font-size: 14px;
    }
    .char-profile-body {
        padding: 1.5rem 1rem;
    }
}

/* ── Loading States ──────────────────────────────────── */
.cpw-spinner{display:inline-block;width:18px;height:18px;border:2px solid rgba(255,255,255,0.1);border-top-color:var(--accent);border-radius:50%;animation:cpw-spin 0.6s linear infinite}
.cpw-spinner-lg{width:32px;height:32px;border-width:3px}
@keyframes cpw-spin{to{transform:rotate(360deg)}}
.cpw-skeleton{background:linear-gradient(90deg,rgba(255,255,255,0.03) 25%,rgba(255,255,255,0.06) 50%,rgba(255,255,255,0.03) 75%);background-size:200% 100%;animation:cpw-shimmer 1.5s infinite;border-radius:var(--radius-xs)}
.cpw-skeleton-line{height:0.9em;margin-bottom:0.5em;border-radius:4px}
.cpw-skeleton-block{height:60px;margin-bottom:0.75rem}
@keyframes cpw-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.btn-loading{pointer-events:none;opacity:0.7}
.btn-loading .cpw-spinner{margin-right:6px;vertical-align:-3px}

/* ══════════════════════════════════════════════════════════
   Character Picker Component
   ══════════════════════════════════════════════════════════ */
.cpw-picker { position: relative; }
.cpw-picker-selected { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; min-height: 0; }
.cpw-picker-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 8px 4px 6px; border-radius: 20px;
    background: var(--bg-elevated); border: 1px solid var(--border-light);
    font-size: 0.8rem; font-weight: 500; color: var(--text-primary);
    transition: border-color 0.15s;
}
.cpw-picker-chip:hover { border-color: var(--accent); }
.cpw-picker-chip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cpw-picker-chip-img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.cpw-picker-chip-x {
    background: none; border: none; color: var(--text-muted); cursor: pointer;
    font-size: 1rem; line-height: 1; padding: 0 2px; margin-left: 2px;
    transition: color 0.15s;
}
.cpw-picker-chip-x:hover { color: var(--color-danger); }
.cpw-picker-search { width: 100%; }
.cpw-picker-dropdown {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 100;
    background: var(--bg-elevated); border: 1px solid var(--border-light);
    border-radius: var(--radius-sm); box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    max-height: 280px; overflow-y: auto; margin-top: 4px;
}
.cpw-picker-option {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; cursor: pointer; transition: background 0.1s;
    font-size: 0.85rem; border-bottom: 1px solid rgba(255,255,255,0.03);
}
.cpw-picker-option:last-child { border-bottom: none; }
.cpw-picker-option:hover { background: rgba(255,255,255,0.04); }
.cpw-picker-option.selected { opacity: 0.5; cursor: default; }
.cpw-picker-option.disabled { opacity: 0.3; cursor: not-allowed; }
.cpw-picker-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cpw-picker-opt-img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.cpw-picker-opt-letter {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-card); font-size: 0.75rem; font-weight: 700; color: var(--text-muted);
}
.cpw-picker-opt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cpw-picker-opt-check { color: var(--accent); font-size: 0.9rem; flex-shrink: 0; }
.cpw-picker-empty { padding: 1.5rem; text-align: center; color: var(--text-muted); font-size: 0.85rem; }

/* ══════════════════════════════════════════════════════════
   Contextual Tooltips
   ══════════════════════════════════════════════════════════ */
[data-tooltip] { position: relative; cursor: help; }
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    background: var(--bg-elevated); color: var(--text-primary);
    border: 1px solid var(--border-light); border-radius: var(--radius-xs);
    padding: 0.5rem 0.75rem; font-size: 0.75rem; font-weight: 400;
    white-space: normal; width: max-content; max-width: 250px;
    z-index: 1000; opacity: 0; pointer-events: none;
    transition: opacity 0.15s; box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    line-height: 1.4;
}
[data-tooltip]:hover::after { opacity: 1; }

/* ══════════════════════════════════════════════════════════
   Homepage — Bento Layout (ported from FedTracker)
   ══════════════════════════════════════════════════════════ */

/* ── Hero Banner (full-width, character-profile style) ── */
.home-hero {
  position: relative; overflow: hidden;
  min-height: 480px;
  margin: -1.5rem 0 0;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  border-bottom: 1px solid var(--border);
}
.home-hero-banner {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  background-size: cover;
  background-position: center top;
}
.home-hero-banner--empty {
  background:
    radial-gradient(ellipse 80% 60% at 20% 80%, rgba(229,114,0,.15) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(229,114,0,.08) 0%, transparent 50%),
    linear-gradient(135deg, rgba(229,114,0,.06) 0%, transparent 100%);
}
.home-hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, #0a0a0a 0%, rgba(10,10,10,0.85) 30%, rgba(10,10,10,0.6) 60%, rgba(10,10,10,0.4) 100%);
}
.home-hero-content {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 480px;
  max-width: var(--content-max-width, 1400px);
  margin: 0 auto;
  padding: 3rem 2rem 3rem;
}
.home-hero-info { max-width: 700px; }
.home-hero-tag {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 3px;
  text-transform: uppercase; color: var(--accent); margin-bottom: 1.25rem;
  padding: 5px 14px; border: 1px solid rgba(229,114,0,.3);
  border-radius: 4px; background: rgba(229,114,0,.1);
  backdrop-filter: blur(8px);
}
.home-hero-logo {
  display: block; max-height: 90px; width: auto; max-width: 350px;
  margin-bottom: 1rem;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}
.home-hero-name {
  font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 900;
  letter-spacing: -1px; line-height: 1.05; text-transform: uppercase;
  color: var(--text-primary);
  text-shadow: 0 2px 20px rgba(0,0,0,0.5);
  margin: 0 0 0.5rem;
}
.home-hero-sub {
  color: var(--text-secondary); font-size: 1.05rem; line-height: 1.6; margin-bottom: 0;
  max-width: 550px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.home-hero-stats {
  display: flex; gap: 0.75rem; margin-top: 1.5rem; flex-wrap: wrap;
}
.home-stat {
  text-align: center; padding: 1rem 1.25rem;
  background: rgba(10,10,10,.7); border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg, 12px); min-width: 90px;
  backdrop-filter: blur(16px);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.home-stat:hover {
  border-color: rgba(229,114,0,.4); transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
}
.home-stat-num {
  display: block; font-size: 28px; font-weight: 900; color: var(--accent);
  font-family: var(--font-display); letter-spacing: -0.5px; line-height: 1;
}
.home-stat-label {
  font-size: 10px; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 1px; font-weight: 600; margin-top: 5px;
  font-family: var(--font-condensed);
}

/* ── Bento Container ─────────────────────────────────── */
.home-bento { max-width: var(--content-max-width); margin: 0 auto; padding: 2.5rem 1rem 1rem; }

/* ── Bento Section Headers ───────────────────────────── */
.bento-section { margin-bottom: 2.5rem; }
.bento-section-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1.5rem; padding-bottom: .75rem;
  border-bottom: 2px solid var(--border);
}
.bento-section-head h2 {
  font-family: var(--font-display); font-size: 20px; font-weight: 900;
  letter-spacing: -0.3px; text-transform: uppercase;
  position: relative; padding-left: 12px;
}
.bento-section-head h2::before {
  content: ''; position: absolute; left: 0; top: 2px; bottom: 2px;
  width: 3px; background: var(--accent); border-radius: 2px;
}
.bento-more {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; color: var(--text-muted); font-weight: 600;
  text-decoration: none; transition: all .15s;
  padding: 4px 10px; border-radius: var(--radius);
  font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: 0.06em;
}
.bento-more:hover { color: var(--accent); background: rgba(229,114,0,.06); text-decoration: none; }

/* ── Bento Card (generic panel) ──────────────────────── */
.bento-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 2rem;
  transition: border-color .2s;
}
.bento-card:hover { border-color: rgba(229,114,0,.2); }
.bento-card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border);
}
.bento-card-head h2 {
  font-family: var(--font-display); font-size: 16px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .5px;
}
.bento-card-head h2::after {
  content: ''; display: inline-block; width: 6px; height: 6px;
  background: var(--accent); border-radius: 50%; margin-left: 8px; vertical-align: middle;
}

/* ── Tags ─────────────────────────────────────────────── */
.bento-tag {
  display: inline-block; padding: 3px 10px; border-radius: 4px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  background: var(--accent); color: #fff; font-family: var(--font-condensed);
}
.bento-tag--sm { font-size: 10px; padding: 2px 7px; }

/* ── News Grid ────────────────────────────────────────── */
.bento-news-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.bento-news-grid--single { grid-template-columns: 1fr; }
.bento-news-grid--single .bento-news-hero { min-height: 420px; }
.bento-news-hero {
  display: block; position: relative; border-radius: var(--radius-lg);
  overflow: hidden; min-height: 380px; text-decoration: none; color: var(--text-primary);
  border: 1px solid var(--border); transition: all .25s;
}
.bento-news-hero:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,.4); }
.bento-news-hero-img {
  position: absolute; inset: 0; background-size: cover; background-position: var(--img-pos, top);
  transition: transform .4s;
}
.bento-news-hero:hover .bento-news-hero-img { transform: scale(1.03); }
.bento-news-hero-img--empty { background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-card) 100%); }
.bento-news-hero-overlay {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem;
  background: linear-gradient(0deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.6) 50%, transparent 100%);
  z-index: 2;
}
.bento-news-hero-overlay h3 { font-family: var(--font-display); font-size: 22px; font-weight: 800; margin-top: .5rem; line-height: 1.25; }
.bento-news-hero-overlay p { color: var(--text-muted); font-size: 14px; margin-top: .5rem; line-height: 1.5; }
.bento-news-date { font-size: 12px; color: var(--text-muted); margin-top: .5rem; display: block; }
.bento-news-side { display: flex; flex-direction: column; gap: 1rem; }
.bento-news-card {
  display: flex; gap: 1rem; text-decoration: none; color: var(--text-primary);
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; transition: all .2s; flex: 1;
}
.bento-news-card:hover { border-color: rgba(229,114,0,.5); text-decoration: none; transform: translateX(4px); }
.bento-news-card-img { width: 140px; min-height: 100%; flex-shrink: 0; background-size: cover; background-position: var(--img-pos, top); }
.bento-news-card-body { padding: 1rem; display: flex; flex-direction: column; justify-content: center; }
.bento-news-card-body h4 { font-size: 14px; font-weight: 700; line-height: 1.35; margin-top: .35rem; }

/* ── 2-Column Row ─────────────────────────────────────── */
.bento-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 0; }
.bento-row-2col--single { grid-template-columns: 1fr; }

/* ── Shows List ───────────────────────────────────────── */
.bento-shows-list { display: flex; flex-direction: column; gap: .5rem; }
.bento-show-item {
  display: flex; align-items: center; gap: 1rem; padding: .85rem;
  border-radius: var(--radius); transition: all .15s;
  text-decoration: none; color: var(--text-primary); border: 1px solid transparent;
}
.bento-show-item:hover { background: rgba(255,255,255,.03); border-color: var(--border); text-decoration: none; }
.bento-show-date {
  display: flex; flex-direction: column; align-items: center;
  min-width: 48px; padding: 6px 10px; border-radius: var(--radius);
  background: rgba(229,114,0,.1); border: 1px solid rgba(229,114,0,.2);
}
.bento-show-month { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--accent); letter-spacing: .5px; font-family: var(--font-condensed); }
.bento-show-day { font-size: 20px; font-weight: 900; line-height: 1; color: var(--text-primary); font-family: var(--font-display); }
.bento-show-logo { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }
.bento-show-info { flex: 1; min-width: 0; }
.bento-show-brand { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--accent); font-family: var(--font-condensed); }
.bento-show-info h4 { font-size: 14px; font-weight: 600; margin-top: 2px; }
.bento-show-meta { font-size: 12px; color: var(--text-muted); }
.bento-show-arrow { color: var(--text-muted); }

/* ── Championships List ───────────────────────────────── */
.bento-champs-list { display: flex; flex-direction: column; gap: .75rem; }
.bento-champ-item {
  display: flex; align-items: center; gap: 1rem; padding: .85rem 1rem;
  background: rgba(229,114,0,.04); border: 1px solid rgba(229,114,0,.15);
  border-radius: var(--radius); transition: all .2s;
}
.bento-champ-item:hover { border-color: rgba(229,114,0,.4); transform: translateX(4px); }
.bento-champ-belt { width: 44px; height: 44px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.bento-champ-belt img { width: 100%; height: 100%; object-fit: contain; }
.bento-champ-info { flex: 1; min-width: 0; }
.bento-champ-info h4 { font-size: 14px; font-weight: 700; }
.bento-champ-holder { font-size: 13px; color: var(--accent); font-weight: 600; }
.bento-champ-avatar {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(229,114,0,.3); flex-shrink: 0;
}

/* ── Rankings List ────────────────────────────────────── */
.bento-rankings-list { display: flex; flex-direction: column; }
.bento-rank-item {
  display: flex; align-items: center; gap: .75rem; padding: .6rem .25rem;
  border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text-primary);
  transition: all .15s;
}
.bento-rank-item:last-child { border: none; }
.bento-rank-item:hover { background: rgba(255,255,255,.03); text-decoration: none; }
.bento-rank-pos { width: 28px; text-align: center; font-size: 14px; font-weight: 900; color: var(--text-muted); flex-shrink: 0; font-family: var(--font-display); }
.bento-rank-item:nth-child(1) .bento-rank-pos { color: var(--accent); font-size: 16px; }
.bento-rank-item:nth-child(1) { background: rgba(229,114,0,.04); }
.bento-rank-avatar {
  width: 36px; height: 36px; border-radius: 50%; overflow: hidden;
  background: var(--bg-elevated); flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.bento-rank-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bento-rank-avatar span { font-size: 14px; font-weight: 700; color: var(--text-muted); }
.bento-rank-info { flex: 1; min-width: 0; }
.bento-rank-info h4 { font-size: 14px; font-weight: 600; }
.bento-rank-record { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.bento-w { color: var(--color-success); }
.bento-l { color: var(--color-danger); margin-left: 4px; }
.bento-d { color: var(--text-muted); margin-left: 4px; }
.bento-rank-momentum { width: 80px; flex-shrink: 0; }
.bento-rank-momentum .momentum-bar { margin-top: 0; height: 8px; }

/* ── Sidebar Stack ────────────────────────────────────── */
.bento-sidebar-stack { display: flex; flex-direction: column; gap: 0; }
.bento-sidebar-stack .bento-card { margin-bottom: 1.25rem; }

/* ── Storylines List ──────────────────────────────────── */
.bento-storylines-list { display: flex; flex-direction: column; gap: .5rem; }
.bento-storyline-item {
  display: flex; align-items: center; gap: .75rem; padding: .75rem;
  border-radius: var(--radius); text-decoration: none; color: var(--text-primary);
  border: 1px solid transparent; transition: all .15s;
}
.bento-storyline-item:hover { background: rgba(255,255,255,.03); border-color: var(--border); text-decoration: none; }
.bento-storyline-phase { width: 4px; height: 36px; border-radius: 2px; flex-shrink: 0; }
.bento-storyline-info { flex: 1; min-width: 0; }
.bento-storyline-info h4 { font-size: 14px; font-weight: 600; }
.bento-storyline-meta { font-size: 12px; color: var(--text-muted); }
.bento-storyline-badge {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  padding: 3px 8px; border-radius: 4px; background: rgba(255,255,255,.06);
  color: var(--text-muted); flex-shrink: 0; font-family: var(--font-condensed);
}

/* ── Rivalries List ───────────────────────────────────── */
.bento-rivalries-list { display: flex; flex-direction: column; gap: .5rem; }
.bento-rivalry-item {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .75rem; border-radius: var(--radius);
  text-decoration: none; color: var(--text-primary);
  border: 1px solid transparent; transition: all .15s;
}
.bento-rivalry-item:hover { background: rgba(255,255,255,.03); border-color: var(--border); text-decoration: none; }
.bento-rivalry-sides { display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 0; }
.bento-rivalry-side { font-size: 13px; font-weight: 600; }
.bento-rivalry-vs {
  font-size: 10px; font-weight: 900; color: var(--accent);
  padding: 2px 6px; background: rgba(229,114,0,.12); border-radius: 3px; flex-shrink: 0;
  font-family: var(--font-display);
}
.bento-rivalry-intensity { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; flex-shrink: 0; font-family: var(--font-condensed); }

/* ── Recent Results ───────────────────────────────────── */
.bento-results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem; }
.bento-result-item {
  padding: 1rem 1rem 1rem 1.25rem; border-radius: var(--radius);
  background: rgba(255,255,255,.02); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); transition: all .15s;
}
.bento-result-item:hover { border-color: rgba(229,114,0,.3); }
.bento-result-type { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--accent); margin-bottom: .35rem; font-family: var(--font-condensed); }
.bento-result-matchup { font-size: 14px; font-weight: 700; line-height: 1.35; }
.bento-result-winner { font-size: 12px; color: var(--color-success); margin-top: .35rem; }
.bento-result-winner span { color: var(--text-muted); }
.bento-result-finish { font-size: 12px; color: var(--text-muted); margin-top: .25rem; font-style: italic; }
.bento-result-date { font-size: 11px; color: var(--text-muted); margin-top: .5rem; display: block; }

/* ── Roster Spotlight Grid ────────────────────────────── */
.bento-roster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 1rem; }
.bento-roster-card {
  display: block; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  text-decoration: none; color: var(--text-primary); transition: all .25s;
}
.bento-roster-card:hover {
  border-color: rgba(229,114,0,.5); transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.3); text-decoration: none;
}
.bento-roster-img { position: relative; height: 220px; overflow: hidden; background: var(--bg-elevated); }
.bento-roster-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.bento-roster-card:hover .bento-roster-img img { transform: scale(1.05); }
.bento-roster-overlay { position: absolute; top: 8px; left: 8px; }
.bento-roster-info { padding: .85rem 1rem; }
.bento-roster-info h4 { font-size: 14px; font-weight: 700; }
.bento-roster-record { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.bento-roster-momentum { display: flex; align-items: center; margin: .5rem 1rem .85rem; }
.bento-roster-momentum .momentum-bar { margin: 0; }

/* ── CTA Row ──────────────────────────────────────────── */
.bento-cta-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1.5rem 0 2.5rem; }
.bento-cta {
  display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); text-decoration: none; color: var(--text-primary); transition: all .25s;
}
.bento-cta:hover {
  border-color: rgba(229,114,0,.5); text-decoration: none;
  transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.bento-cta:hover .bento-cta-icon svg { color: var(--accent); }
.bento-cta-icon {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 12px;
  background: rgba(229,114,0,.08); border: 1px solid rgba(229,114,0,.15);
  transition: background .25s, border-color .25s;
}
.bento-cta:hover .bento-cta-icon { background: rgba(229,114,0,.15); border-color: rgba(229,114,0,.3); }
.bento-cta-icon svg { width: 22px; height: 22px; color: var(--text-muted); transition: color .25s; }
.bento-cta-text { font-size: 13px; line-height: 1.4; color: var(--text-muted); }
.bento-cta-text strong { display: block; font-size: 15px; color: var(--text-primary); font-weight: 700; margin-bottom: 2px; }

/* ── Bento Responsive ────────────────────────────────── */
@media (max-width: 900px) {
  .home-hero { min-height: 380px; }
  .home-hero-content { min-height: 380px; padding: 2rem 1.5rem 2rem; }
  .home-hero-name { font-size: clamp(2rem, 8vw, 3rem); }
  .home-hero-stats { flex-wrap: wrap; }
  .home-stat { min-width: 80px; padding: 0.75rem 1rem; }
  .home-stat-num { font-size: 24px; }
  .bento-news-grid { grid-template-columns: 1fr; }
  .bento-news-hero { min-height: 280px; }
  .bento-row-2col { grid-template-columns: 1fr; }
  .bento-cta-row { grid-template-columns: 1fr 1fr; }
  .bento-results-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .home-hero { min-height: 320px; }
  .home-hero-content { min-height: 320px; padding: 1.5rem 1rem 1.5rem; }
  .home-hero-name { font-size: clamp(1.5rem, 8vw, 2.5rem); letter-spacing: -0.5px; }
  .home-hero-logo { max-height: 60px; max-width: 250px; }
  .home-hero-stats { gap: .5rem; }
  .home-stat { min-width: 70px; padding: .6rem .75rem; }
  .home-stat-num { font-size: 20px; }
  .bento-cta-row { grid-template-columns: 1fr; }
  .bento-news-card { flex-direction: column; }
  .bento-news-card-img { width: 100%; height: 120px; }
  .bento-roster-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .bento-roster-img { height: 180px; }
}