/* Neon Noir / Live + Replay shared theme
   Visual skin only: maps existing live, replay, auth and member UI into a dark neon cinema feel
   without adding unavailable product features. */

:root {
    --nn-black: #050505;
    --nn-void: #030204;
    --nn-wine: #140A0F;
    --nn-wine-2: #1A0714;
    --nn-panel: rgba(13, 8, 14, .78);
    --nn-panel-strong: rgba(20, 10, 15, .9);
    --nn-glass: rgba(255, 255, 255, .035);
    --nn-line: rgba(168, 85, 247, .20);
    --nn-line-hot: rgba(255, 79, 216, .52);
    --nn-pink: #FF4FD8;
    --nn-purple: #A855F7;
    --nn-red: #FF3B3B;
    --nn-blue: #38BDF8;
    --nn-text: #E8E0EA;
    --nn-muted: rgba(232, 224, 234, .66);
    --nn-dim: rgba(232, 224, 234, .42);
    --nn-font-display: 'Orbitron', 'Outfit', system-ui, sans-serif;
    --nn-font-ui: 'Outfit', system-ui, sans-serif;
    --nn-font-mono: 'Share Tech Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --vw-bg: var(--nn-black);
    --vw-void: var(--nn-void);
    --vw-surface: var(--nn-panel);
    --vw-surface-strong: var(--nn-panel-strong);
    --vw-surface-deep: rgba(0, 0, 0, .82);
    --vw-text: var(--nn-text);
    --vw-muted: var(--nn-muted);
    --vw-dim: var(--nn-dim);
    --vw-magenta: var(--nn-pink);
    --vw-cyan: var(--nn-blue);
    --vw-orange: var(--nn-red);
    --vw-border: var(--nn-line);
    --vw-success: var(--nn-red);
    --vw-danger: var(--nn-red);
    --vw-warning: var(--nn-purple);
    --vw-font-heading: var(--nn-font-display);
    --vw-font-mono: var(--nn-font-mono);

    --bg: var(--nn-black);
    --bg-raised: var(--nn-panel-strong);
    --bg-card: var(--nn-panel);
    --bg-deep: var(--nn-void);
    --border: var(--nn-line);
    --border-hover: var(--nn-line-hot);
    --accent: var(--nn-pink);
    --accent-dim: #D946EF;
    --accent-glow: rgba(255, 79, 216, .24);
    --accent-soft: rgba(255, 79, 216, .08);
    --neon-cyan: var(--nn-blue);
    --neon-blue: var(--nn-blue);
    --neon-magenta: var(--nn-pink);
    --neon-pink: var(--nn-pink);
    --orange: var(--nn-red);
    --live: var(--nn-red);
    --success: var(--nn-blue);
    --warning: var(--nn-purple);
    --danger: var(--nn-red);
    --text: var(--nn-text);
    --text-dim: var(--nn-muted);
    --text-muted: var(--nn-dim);
    --radius: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;

    --color-bg: var(--nn-black);
    --color-surface: var(--nn-panel);
    --color-surface-2: rgba(22, 12, 22, .86);
    --color-border: var(--nn-line);
    --color-border-hover: var(--nn-line-hot);
    --color-text: var(--nn-text);
    --color-text-muted: var(--nn-muted);
    --color-text-dim: var(--nn-dim);
    --color-primary: var(--nn-pink);
    --color-primary-hover: var(--nn-blue);
    --color-primary-soft: rgba(255, 79, 216, .09);
    --color-primary-ring: rgba(255, 79, 216, .22);
    --color-cta: var(--nn-red);
    --color-cta-hover: var(--nn-pink);
    --color-success: var(--nn-blue);
    --color-danger: var(--nn-red);
    --color-warning: var(--nn-purple);
    --font-sans: var(--nn-font-ui);
    --font-mono: var(--nn-font-mono);
    --shadow-card: 0 24px 70px rgba(0,0,0,.62), 0 0 0 1px rgba(255,79,216,.08), inset 0 1px 0 rgba(255,255,255,.035);
    --radius-sm: 10px;
    --radius-md: 14px;
}

html { background: var(--nn-black); }
body {
    background: var(--nn-black) !important;
    color: var(--nn-text) !important;
    font-family: var(--nn-font-ui) !important;
    letter-spacing: .01em;
    text-shadow: none;
}
body::before {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: -3 !important;
    pointer-events: none !important;
    background:
        radial-gradient(900px 480px at 76% 8%, rgba(168, 85, 247, .15), transparent 62%),
        radial-gradient(720px 420px at 16% 18%, rgba(255, 79, 216, .11), transparent 66%),
        radial-gradient(520px 300px at 55% 88%, rgba(56, 189, 248, .08), transparent 70%),
        linear-gradient(180deg, #050505 0%, #10070d 46%, #050205 100%) !important;
}
body::after {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 9998 !important;
    pointer-events: none !important;
    opacity: .46 !important;
    background:
        linear-gradient(rgba(255,255,255,0) 50%, rgba(0,0,0,.22) 50%),
        linear-gradient(90deg, rgba(255,79,216,.045), rgba(56,189,248,.02), rgba(255,59,59,.035)),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E") !important;
    background-size: 100% 4px, 7px 100%, 220px 220px !important;
    mix-blend-mode: screen;
}

.main-content::before,
main::before {
    content: '';
    position: fixed;
    inset: auto -10% -26vh -10%;
    height: 50vh;
    z-index: -2;
    pointer-events: none;
    opacity: .38;
    background-image:
        linear-gradient(transparent 92%, rgba(255,79,216,.42) 92%),
        linear-gradient(90deg, transparent 94%, rgba(56,189,248,.26) 94%);
    background-size: 56px 56px;
    transform: perspective(680px) rotateX(64deg) scale(1.25);
    transform-origin: bottom center;
    mask-image: linear-gradient(to top, rgba(0,0,0,.9), transparent 76%);
}
main::after {
    content: '';
    position: fixed;
    left: 0; right: 0; top: 56px; height: 180px;
    pointer-events: none; z-index: -2; opacity: .34;
    background:
        linear-gradient(90deg, transparent 0 8%, rgba(255,79,216,.10) 8% 9%, transparent 9% 18%, rgba(56,189,248,.08) 18% 19%, transparent 19%),
        radial-gradient(420px 70px at 72% 36%, rgba(255,59,59,.16), transparent 70%);
    filter: blur(10px);
}

h1, h2, h3, h4, h5, h6,
.nav-brand, .brand, .sec-head h2,
.card-header, .table-card .card-header,
.stat-card .value, .stat-card .stat-value,
.balance-card .balance-value,
.kpi-value, .page-title {
    font-family: var(--nn-font-display) !important;
    text-transform: uppercase;
    letter-spacing: .075em !important;
}

.nav, .top-bar, .sidebar, .mob-bar {
    background: rgba(5,5,5,.76) !important;
    border-color: rgba(255,79,216,.16) !important;
    backdrop-filter: blur(22px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
    box-shadow: 0 10px 36px rgba(0,0,0,.5), 0 0 34px rgba(168,85,247,.09) !important;
}
.nav::after, .top-bar::after, .sidebar .brand::after {
    background: linear-gradient(90deg, transparent, rgba(168,85,247,.22), var(--nn-pink), rgba(56,189,248,.22), transparent) !important;
}
.nav-brand, .sidebar .brand, .top-bar h5 {
    color: #fff !important;
    text-shadow: 0 0 16px rgba(255,79,216,.32), 0 0 34px rgba(168,85,247,.18);
}
.nav-brand::after {
    content: ' LIVE + REPLAY';
    color: var(--nn-dim);
    font-family: var(--nn-font-mono);
    font-size: .54rem;
    letter-spacing: .24em;
    margin-left: 8px;
    white-space: nowrap;
}
.nav-brand .dot, .sidebar .brand i, .icon-wrap {
    border-radius: 999px !important;
    background: var(--nn-red) !important;
    color: #fff !important;
    border: 1px solid rgba(255,59,59,.9) !important;
    box-shadow: 0 0 10px rgba(255,59,59,.82), 0 0 26px rgba(255,59,59,.28) !important;
    transform: none;
}
.sidebar .brand i::before, .icon-wrap i::before { transform: none; display: inline-block; }

.nav-links a, .sidebar .nav-link, .mob-tab, .mob-bar a {
    border-radius: 999px !important;
    color: var(--nn-muted) !important;
    text-transform: uppercase;
    letter-spacing: .10em;
    border: 1px solid transparent !important;
    font-family: var(--nn-font-mono) !important;
}
.nav-links a:hover, .nav-links a.active,
.sidebar .nav-link:hover, .sidebar .nav-link.active,
.mob-tab:hover, .mob-tab.active,
.mob-bar a:hover, .mob-bar a.active {
    color: #fff !important;
    background: rgba(255,79,216,.075) !important;
    border-color: rgba(255,79,216,.28) !important;
    box-shadow: 0 0 18px rgba(255,79,216,.13), inset 0 0 18px rgba(168,85,247,.05) !important;
    text-shadow: 0 0 10px rgba(255,79,216,.55) !important;
}

.btn, button.btn, a.btn {
    border-radius: 999px !important;
    font-family: var(--nn-font-mono) !important;
    text-transform: uppercase;
    letter-spacing: .11em !important;
    border: 1px solid rgba(255,79,216,.38) !important;
    background: rgba(255,255,255,.035) !important;
    color: var(--nn-text) !important;
    transform: none;
    box-shadow: 0 0 16px rgba(255,79,216,.10), inset 0 1px 0 rgba(255,255,255,.04) !important;
    transition: transform .32s cubic-bezier(.2,.8,.2,1), color .32s, background .32s, box-shadow .32s, border-color .32s !important;
}
.btn > *, .btn i, .btn span { display: inline-block; transform: none; }
.btn:hover, .btn:focus {
    transform: translateY(-2px);
    background: rgba(255,79,216,.12) !important;
    color: #fff !important;
    border-color: var(--nn-pink) !important;
    box-shadow: 0 0 22px rgba(255,79,216,.28), 0 10px 26px rgba(0,0,0,.35) !important;
}
.btn-primary, .btn-vip, .btn-accent, .btn-cta, .btn-vip-buy, .btn-agent-pro {
    border-color: rgba(255,79,216,.58) !important;
    color: #fff !important;
    background: linear-gradient(135deg, rgba(255,79,216,.88), rgba(168,85,247,.72) 48%, rgba(255,59,59,.72)) !important;
    box-shadow: 0 0 20px rgba(255,79,216,.28), 0 10px 28px rgba(0,0,0,.38) !important;
}
.btn-primary:hover, .btn-vip:hover, .btn-accent:hover, .btn-cta:hover, .btn-vip-buy:hover, .btn-agent-pro:hover {
    background: linear-gradient(135deg, var(--nn-pink), var(--nn-red)) !important;
    color: #fff !important;
    box-shadow: 0 0 30px rgba(255,79,216,.42), 0 0 56px rgba(255,59,59,.18), 0 14px 34px rgba(0,0,0,.48) !important;
}

.card, .table-card, .stat-card, .promo-card, .balance-card, .sub-card, .plan-card-v2,
.login-box, .auth-card, .auth-panel, .auth-page .auth-card, .auth-form, .player-wrapper, .replay-sidebar, .channel-card, .banner-card, .info-card,
.empty-state-lg, .kpi-item, .modal-content, .ch-card, .stat, .replay-card {
    border-radius: 18px !important;
    background: linear-gradient(180deg, rgba(24, 12, 21, .78), rgba(7, 5, 7, .78)) !important;
    border: 1px solid rgba(168,85,247,.18) !important;
    box-shadow: var(--shadow-card) !important;
    backdrop-filter: blur(18px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
}
.card:hover, .table-card:hover, .stat-card:hover, .promo-card:hover, .sub-card:hover, .plan-card-v2:hover, .channel-card:hover, .ch-card:hover {
    border-color: rgba(255,79,216,.42) !important;
    box-shadow: 0 28px 80px rgba(0,0,0,.66), 0 0 26px rgba(255,79,216,.18), 0 0 0 1px rgba(255,79,216,.14) inset !important;
    transform: translateY(-3px);
}
.card-header, .table-card .card-header, .modal-header, .modal-footer {
    background: rgba(255,79,216,.045) !important;
    border-color: rgba(255,79,216,.14) !important;
    color: #fff !important;
    text-shadow: 0 0 10px rgba(255,79,216,.35);
}

.form-control, .form-select, input, textarea, select, .replay-date {
    border-radius: 12px !important;
    background: rgba(0,0,0,.58) !important;
    border: 1px solid rgba(168,85,247,.28) !important;
    color: var(--nn-text) !important;
    font-family: var(--nn-font-ui) !important;
    box-shadow: inset 0 0 18px rgba(255,79,216,.035) !important;
}
.form-control:focus, .form-select:focus, input:focus, textarea:focus, select:focus, .replay-date:focus {
    border-color: rgba(255,79,216,.72) !important;
    color: #fff !important;
    box-shadow: 0 0 0 3px rgba(255,79,216,.10), 0 0 18px rgba(255,79,216,.22), inset 0 0 18px rgba(255,79,216,.05) !important;
    outline: none !important;
}
.form-control::placeholder, input::placeholder, textarea::placeholder { color: rgba(232,224,234,.38) !important; }
.form-label, label { color: var(--nn-muted) !important; letter-spacing: .04em; }

.table, .data-table { color: var(--nn-text) !important; }
.table th, .data-table thead th {
    background: rgba(255,79,216,.055) !important;
    color: var(--nn-muted) !important;
    border-color: rgba(255,79,216,.14) !important;
    font-family: var(--nn-font-mono) !important;
    text-transform: uppercase;
    letter-spacing: .12em !important;
}
.table td, .data-table tbody td { border-color: rgba(255,79,216,.10) !important; }
.table tbody tr:hover, .data-table tbody tr:hover { background: rgba(255,79,216,.045) !important; }

.badge, .code-chip, .user-pill, .pill, .type-badge, .user-badge {
    border-radius: 999px !important;
    border: 1px solid rgba(168,85,247,.30) !important;
    background: rgba(255,255,255,.035) !important;
    color: var(--nn-muted) !important;
    font-family: var(--nn-font-mono) !important;
    text-transform: uppercase;
    letter-spacing: .08em;
    box-shadow: none;
}
.pill.active { background: rgba(255,79,216,.15) !important; color: #fff !important; border-color: rgba(255,79,216,.58) !important; box-shadow: 0 0 18px rgba(255,79,216,.20) !important; }
.badge-success, .amount-positive { color: var(--nn-blue) !important; border-color: rgba(56,189,248,.44) !important; }
.badge-warning { color: var(--nn-purple) !important; border-color: rgba(168,85,247,.55) !important; }
.badge-danger { color: var(--nn-red) !important; border-color: rgba(255,59,59,.55) !important; }

.stat-card .label, .stat-card .stat-label, .balance-card .balance-label,
.data-table code, .text-muted, .sub, .foot, .form-hint, .empty-state, .empty-state-lg, .count, .lbl {
    color: var(--nn-muted) !important;
}
.stat-card .value, .stat-card .stat-value, .balance-card .balance-value, .amount, .kpi-value, .num {
    color: #fff !important;
    text-shadow: 0 0 16px rgba(255,79,216,.30), 0 0 32px rgba(168,85,247,.16);
}
.stat-card .value.primary, .stat-card .stat-value.accent, .balance-card .balance-value.accent,
.stat-card .value.cta { color: var(--nn-pink) !important; }
.stat-card .value.success { color: var(--nn-blue) !important; }

.hero, .hero-banner {
    isolation: isolate;
    border-bottom: 1px solid rgba(255,79,216,.18);
    box-shadow: 0 34px 90px rgba(0,0,0,.65), 0 0 54px rgba(168,85,247,.11);
    background:
        linear-gradient(180deg, rgba(20,10,15,.86), rgba(5,5,5,.98)),
        radial-gradient(600px 220px at 70% 20%, rgba(255,79,216,.14), transparent 72%) !important;
}
.hero::before, .hero-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .55;
    background:
        linear-gradient(115deg, transparent 0 42%, rgba(255,79,216,.10) 43%, transparent 48%),
        radial-gradient(620px 260px at 28% 20%, rgba(255,59,59,.14), transparent 70%),
        radial-gradient(460px 180px at 82% 16%, rgba(56,189,248,.10), transparent 72%);
    filter: blur(.2px);
}
.hero h1, .hero-banner h2 {
    color: #fff !important;
    background: none !important;
    -webkit-text-fill-color: currentColor;
    text-shadow: 0 0 18px rgba(255,79,216,.42), 0 0 46px rgba(168,85,247,.18);
}
.hero h1 span, .hero-banner h2 span { color: var(--nn-pink) !important; }
.hero h1::before, .hero-banner h2::before, .sec-head h2::before, .top-bar h5::before {
    content: '▣ ';
    color: var(--nn-pink);
    -webkit-text-fill-color: var(--nn-pink);
    text-shadow: 0 0 10px rgba(255,79,216,.6);
}
.hero p, .hero-banner p { color: var(--nn-muted) !important; }
.banner-bg { filter: saturate(.85) contrast(1.06) brightness(.55); }
.banner-bg::after, .ch-thumb::after, .replay-thumb::after {
    background:
        linear-gradient(180deg, transparent 34%, rgba(5,5,5,.78) 100%),
        linear-gradient(135deg, rgba(255,79,216,.18), rgba(56,189,248,.07)) !important;
    mix-blend-mode: normal;
}
.hero-banner .live-tag { color: var(--nn-red) !important; text-shadow: 0 0 12px rgba(255,59,59,.55) !important; }
.hero-banner .banner-nav .dot-nav { background: rgba(232,224,234,.22) !important; }
.hero-banner .banner-nav .dot-nav.active { background: var(--nn-pink) !important; box-shadow: 0 0 12px rgba(255,79,216,.55) !important; }

.sec-head {
    border-left: 1px solid rgba(255,79,216,.42);
    padding-left: 14px;
}
.sec-head h2 { color: #fff !important; text-shadow: 0 0 12px rgba(255,79,216,.28); }
.stats { position: relative; }
.stat { padding: 12px 16px; min-width: 150px; }
.stat .bi { color: var(--nn-pink) !important; filter: drop-shadow(0 0 10px rgba(255,79,216,.38)); }

.ch-card { overflow: hidden; position: relative; }
.ch-card::before {
    content: '';
    position: absolute; inset: 0; pointer-events: none; z-index: 2;
    border: 1px solid transparent;
    background: linear-gradient(120deg, transparent 0 58%, rgba(255,255,255,.08) 62%, transparent 68%) border-box;
    opacity: 0; transition: opacity .34s ease;
}
.ch-card:hover::before { opacity: 1; }
.ch-thumb, .replay-thumb { border-radius: 14px 14px 0 0 !important; background: #000 !important; }
.ch-thumb img, .replay-thumb img { filter: contrast(1.08) saturate(.82) brightness(.74); }
.ch-card:hover .ch-thumb img, .replay-item:hover .replay-thumb img { filter: contrast(1.12) saturate(.95) brightness(.88); }
.ch-badge, .player-live-badge, .live-badge {
    border-radius: 999px !important;
    background: rgba(255,59,59,.14) !important;
    border: 1px solid rgba(255,59,59,.62) !important;
    color: #fff !important;
    box-shadow: 0 0 20px rgba(255,59,59,.35) !important;
    text-shadow: 0 0 10px rgba(255,59,59,.75);
    font-family: var(--nn-font-mono) !important;
    letter-spacing: .14em;
}
.ch-badge .pulse, .player-live-badge .pulse { background: var(--nn-red) !important; box-shadow: 0 0 10px var(--nn-red) !important; }
.ch-quality {
    border-radius: 999px !important;
    border: 1px solid rgba(56,189,248,.38) !important;
    color: var(--nn-blue) !important;
    background: rgba(56,189,248,.08) !important;
    font-family: var(--nn-font-mono) !important;
    letter-spacing: .12em;
}
.ch-play i { color: #fff !important; filter: drop-shadow(0 0 18px rgba(255,79,216,.7)); }
.ch-info h4, .replay-title { color: #fff !important; }
.ch-info .meta, .replay-meta { color: var(--nn-muted) !important; }

.player-wrapper {
    background: #000 !important;
    border-radius: 24px !important;
    border-color: rgba(255,79,216,.20) !important;
    box-shadow: 0 40px 120px rgba(0,0,0,.82), 0 0 58px rgba(255,79,216,.11), 0 0 0 1px rgba(255,255,255,.025) inset !important;
}
.player-wrapper::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 5 !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    color: transparent !important;
    border: 1px solid rgba(255,79,216,.18);
    background:
        linear-gradient(rgba(255,255,255,0) 50%, rgba(0,0,0,.14) 50%),
        radial-gradient(500px 40px at 50% 100%, rgba(255,79,216,.14), transparent 70%);
    background-size: 100% 5px, auto;
    opacity: .28;
    box-shadow: inset 0 0 70px rgba(0,0,0,.58);
}
.player-loader .loader-bar { background: linear-gradient(90deg, transparent, var(--nn-pink), var(--nn-blue), transparent) !important; box-shadow: 0 0 16px rgba(255,79,216,.52) !important; }
.player-lock { background: radial-gradient(ellipse at center, rgba(20,10,15,.74) 0%, rgba(0,0,0,.96) 100%) !important; }
.player-lock .lock-icon { border-color: rgba(255,79,216,.34) !important; box-shadow: 0 0 36px rgba(255,79,216,.18) !important; }
.player-lock .lock-icon i { color: var(--nn-pink) !important; }

.replay-sidebar { border-radius: 22px !important; }
.replay-sidebar::before {
    content: 'LIVE REPLAY' !important;
    display: block;
    margin: 0 !important;
    padding: 8px 14px;
    color: var(--nn-dim) !important;
    font-family: var(--nn-font-mono);
    letter-spacing: .22em;
    border-bottom: 1px solid rgba(255,79,216,.12);
    background: rgba(255,79,216,.035);
    text-shadow: none;
}
.replay-sidebar-hd { border-bottom-color: rgba(255,79,216,.12) !important; color: #fff !important; }
.replay-sidebar-hd i { color: var(--nn-pink) !important; filter: drop-shadow(0 0 10px rgba(255,79,216,.38)); }
.replay-item {
    border-radius: 16px !important;
    border: 1px solid rgba(168,85,247,.20) !important;
    background: rgba(0,0,0,.32) !important;
    color: var(--nn-text) !important;
}
.replay-item:hover, .replay-item.active {
    border-color: rgba(255,79,216,.54) !important;
    background: rgba(255,79,216,.075) !important;
    box-shadow: 0 0 22px rgba(255,79,216,.16) !important;
}
.replay-play-badge { background: rgba(255,79,216,.86) !important; box-shadow: 0 0 24px rgba(255,79,216,.38) !important; }
.replay-empty i { color: var(--nn-pink); }

.login-box::before, .auth-card::before, .table-card::before {
    content: '' !important;
    display: block;
    position: absolute;
    top: 0; left: 0; right: 0; height: 1px;
    margin: 0 !important;
    padding: 0 !important;
    background: linear-gradient(90deg, transparent, rgba(255,79,216,.44), rgba(56,189,248,.22), transparent) !important;
    border: 0 !important;
    text-shadow: none !important;
}
.auth-card::after { opacity: .75; }
.auth-icon { border-radius: 18px !important; background: linear-gradient(135deg, var(--nn-pink), var(--nn-purple), var(--nn-red)) !important; }
.auth-divider::before, .auth-divider::after { background: linear-gradient(90deg, transparent, rgba(255,79,216,.18), transparent) !important; }
.auth-link:hover { color: var(--nn-pink) !important; }

.member-header { border-radius: 24px !important; }
.member-avatar { border-radius: 24px !important; background: linear-gradient(135deg, var(--nn-pink), var(--nn-purple)) !important; }
.member-tabs { border-radius: 999px !important; }
.m-tab { border-radius: 999px !important; }
.m-tab.active { background: rgba(255,79,216,.18) !important; box-shadow: 0 0 18px rgba(255,79,216,.18) !important; }
.sku-item-v2, .plan-card-v2 { border-radius: 18px !important; }

.toast-item {
    border-radius: 14px !important;
    background: rgba(10,6,10,.94) !important;
    border: 1px solid rgba(255,79,216,.30) !important;
    box-shadow: 0 22px 64px rgba(0,0,0,.58), 0 0 30px rgba(255,79,216,.15) !important;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,.5); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--nn-pink), var(--nn-purple)) !important; border-radius: 999px !important; border: 2px solid rgba(0,0,0,.72); }
::selection { background: var(--nn-pink); color: #fff; }

@keyframes nnLivePulse {
    0%,100% { box-shadow: 0 0 16px rgba(255,59,59,.28); }
    50% { box-shadow: 0 0 28px rgba(255,59,59,.48); }
}
.ch-card:has(.ch-badge) { animation: nnLivePulse 3.8s ease-in-out infinite; }

@media (max-width: 768px) {
    body::after { opacity: .36 !important; }
    .nav-brand::after { display: none; }
    .nav-brand { max-width: 48% !important; }
    .btn, button.btn, a.btn { min-height: 42px; letter-spacing: .07em !important; }
    .card:hover, .table-card:hover, .stat-card:hover, .promo-card:hover, .sub-card:hover, .plan-card-v2:hover, .channel-card:hover, .ch-card:hover { transform: none; }
    .ch-thumb, .replay-thumb { border-radius: 14px 14px 0 0 !important; }
    .player-wrapper { border-radius: 16px !important; }
    .replay-sidebar { border-radius: 16px !important; }
    .stat { min-width: 0; padding: 10px 12px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}