/*
 * VioletRoom V2.5.1 Vivid UI
 * Visual-only layer. Keeps Laravel, routes, LiveKit, Reverb and business logic intact.
 * Goal: stronger visual energy, richer CTAs and denser premium live-room styling.
 */

:root {
    --vr-violet: #8b35ff;
    --vr-violet-2: #6f20ff;
    --vr-pink: #ff3d8f;
    --vr-live: #ff2e59;
    --vr-green: #22d66f;
    --vr-cyan: #22c8ff;
    --vr-gold: #ffbe3d;
    --vr-red: #ff405f;
    --vr-ink: #111019;
    --vr-ink-2: #17151f;
    --vr-ink-3: #211e2b;
    --vr-white: #fff;
    --vr-shadow-purple: 0 12px 34px rgba(117, 47, 255, .26);
    --vr-shadow-live: 0 12px 30px rgba(255, 46, 89, .25);
}

html[data-theme="light"] {
    --bg: #f3f1f7;
    --surface: #ffffff;
    --surface-2: #f2eff7;
    --surface-3: #e9e4f2;
    --text: #17141d;
    --muted: #6f687b;
    --line: rgba(34, 25, 47, .12);
    --purple: var(--vr-violet);
    --purple-strong: var(--vr-violet-2);
    --green: var(--vr-green);
    --green-strong: #10ad55;
    --live: var(--vr-live);
}

html[data-theme="dark"] {
    --bg: #09080d;
    --surface: #121018;
    --surface-2: #191621;
    --surface-3: #211d2b;
    --text: #f7f5fb;
    --muted: #a9a2b5;
    --line: rgba(255,255,255,.105);
    --purple: #9a52ff;
    --purple-strong: #7f32ff;
    --green: var(--vr-green);
    --green-strong: #18bd5f;
    --live: var(--vr-live);
}

body {
    background:
        radial-gradient(circle at 7% -8%, rgba(139,53,255,.12), transparent 28%),
        radial-gradient(circle at 96% 18%, rgba(255,61,143,.07), transparent 26%),
        var(--bg);
}

/* ---------- BRAND / GLOBAL NAV ---------- */
.demo-ribbon {
    background: linear-gradient(90deg, #0c0b10 0%, #17101f 48%, #0c0b10 100%);
    border-bottom-color: rgba(164, 89, 255, .24);
}
.demo-ribbon span:first-child {
    color: #fff;
    font-weight: 900;
}
.demo-ribbon b {
    color: #d7b8ff;
    text-shadow: 0 0 16px rgba(166,92,255,.35);
}

.site-header {
    background: rgba(12, 11, 17, .96) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    box-shadow: 0 12px 35px rgba(0,0,0,.24);
    backdrop-filter: blur(18px) saturate(135%);
}
.site-header .brand,
.site-header .nav-links a,
.site-header .user-chip,
.site-header .wallet-pill,
.site-header .icon-button { color: #eeeaf5; }
.site-header .brand small { color: #c8bfd4; border-color: rgba(255,255,255,.12); }
.brand-mark {
    background: linear-gradient(145deg, #a94cff 0%, #7626ff 52%, #ff3d8f 100%) !important;
    box-shadow: 0 8px 24px rgba(136,53,255,.38), inset 0 1px rgba(255,255,255,.28) !important;
}
.nav-links a {
    color: #a9a1b5 !important;
    border: 1px solid transparent;
}
.nav-links a:hover {
    color: #fff !important;
    background: #211c2a !important;
    border-color: rgba(255,255,255,.06);
}
.nav-links a.active {
    color: #fff !important;
    background: linear-gradient(135deg, rgba(139,53,255,.30), rgba(255,61,143,.11)) !important;
    border-color: rgba(165,91,255,.28);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}
.nav-links a.active::after {
    background: linear-gradient(90deg, var(--vr-violet), var(--vr-pink)) !important;
    box-shadow: 0 0 14px rgba(139,53,255,.6);
}
.nav-live-dot {
    background: var(--vr-live) !important;
    box-shadow: 0 0 0 4px rgba(255,46,89,.12), 0 0 14px rgba(255,46,89,.45) !important;
}
.site-header .wallet-pill,
.site-header .icon-button,
.site-header .user-chip {
    background: #17151e !important;
    border-color: rgba(255,255,255,.095) !important;
}
.site-header .wallet-pill:hover,
.site-header .icon-button:hover,
.site-header .user-chip:hover {
    background: #211d2a !important;
    border-color: rgba(154,82,255,.36) !important;
}
.wallet-pill .icon { color: #bb7bff !important; }
.user-chip > span:first-child {
    background: linear-gradient(145deg, #8f3dff, #ff3d8f) !important;
    box-shadow: 0 5px 16px rgba(139,53,255,.32);
}

/* ---------- BUTTONS: stronger and less pale ---------- */
.button {
    border-width: 1px;
    letter-spacing: .005em;
    text-shadow: none;
}
.button.primary,
.button.purple {
    color: #fff !important;
    background: linear-gradient(135deg, #9a45ff 0%, #7529ff 55%, #5d24e8 100%) !important;
    border-color: rgba(255,255,255,.12) !important;
    box-shadow: var(--vr-shadow-purple), inset 0 1px rgba(255,255,255,.20) !important;
}
.button.primary:hover,
.button.purple:hover {
    transform: translateY(-2px);
    filter: saturate(1.08) brightness(1.05);
    box-shadow: 0 15px 38px rgba(117,47,255,.38), inset 0 1px rgba(255,255,255,.24) !important;
}
.button.secondary {
    color: #fff !important;
    background: linear-gradient(135deg, #ff4b96 0%, #ee367e 100%) !important;
    border-color: rgba(255,255,255,.12) !important;
    box-shadow: 0 10px 26px rgba(255,61,143,.20), inset 0 1px rgba(255,255,255,.18) !important;
}
.button.secondary:hover { box-shadow: 0 14px 32px rgba(255,61,143,.30) !important; }
.button.live-action {
    color: #fff !important;
    background: linear-gradient(135deg, #ff375f 0%, #ff1748 65%, #e4123d 100%) !important;
    border-color: rgba(255,255,255,.14) !important;
    box-shadow: var(--vr-shadow-live), inset 0 1px rgba(255,255,255,.22) !important;
}
.button.live-action:hover { box-shadow: 0 16px 36px rgba(255,46,89,.38) !important; }
.button.ghost {
    color: var(--text) !important;
    background: color-mix(in srgb, var(--surface-2) 90%, var(--vr-violet) 10%) !important;
    border-color: color-mix(in srgb, var(--line) 70%, var(--vr-violet) 30%) !important;
}
.button.ghost:hover {
    color: var(--text) !important;
    background: color-mix(in srgb, var(--surface-2) 82%, var(--vr-violet) 18%) !important;
    border-color: rgba(139,53,255,.44) !important;
    box-shadow: 0 8px 20px rgba(92,39,160,.10);
}
.button.danger,
.button.danger.ghost {
    color: #fff !important;
    background: linear-gradient(135deg, #ff4566, #e9254d) !important;
    border-color: rgba(255,255,255,.12) !important;
    box-shadow: 0 9px 24px rgba(255,64,95,.18);
}

/* ---------- INPUTS / FILTERS ---------- */
.input {
    border-color: color-mix(in srgb, var(--line) 72%, var(--vr-violet) 28%) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.input:hover { border-color: rgba(139,53,255,.30) !important; }
.input:focus {
    border-color: var(--vr-violet) !important;
    box-shadow: 0 0 0 3px rgba(139,53,255,.14), 0 8px 24px rgba(107,42,184,.08) !important;
}

/* ---------- BADGES / STATUS ---------- */
.vr-live-badge {
    color: #fff !important;
    background: linear-gradient(135deg, #ff3c61, #f31649) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    box-shadow: 0 5px 16px rgba(255,46,89,.28) !important;
    font-weight: 950 !important;
    letter-spacing: .06em;
}
.vr-online-badge,
.status-pill.ok {
    color: #06130b !important;
    background: linear-gradient(135deg, #30e67d, #19c960) !important;
    border-color: rgba(255,255,255,.18) !important;
    font-weight: 900;
    box-shadow: 0 5px 16px rgba(34,214,111,.15);
}
.status-pill.warning {
    color: #261a00 !important;
    background: linear-gradient(135deg, #ffd66b, #ffb82f) !important;
    border-color: rgba(255,255,255,.18) !important;
}

/* ---------- PANELS / NAVS / TABLES ---------- */
.panel,
.metric-card,
.vr-client-panel,
.vr-studio-card,
.vr-room-section,
.vr-action-card,
.form-card,
.moderation-card {
    position: relative;
    overflow: hidden;
}
.panel::before,
.vr-client-panel::before,
.vr-studio-card::before,
.vr-room-section::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(139,53,255,.60), rgba(255,61,143,.36), transparent);
    opacity: .72;
    pointer-events: none;
}
.subnav {
    background: #14121a !important;
    border-color: rgba(255,255,255,.08) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.10) !important;
}
.subnav a { color: #aaa3b6 !important; }
.subnav a:hover { color: #fff !important; background: #211d2a !important; }
.subnav a.active {
    color: #fff !important;
    background: linear-gradient(135deg, #8f3dff, #6f20ff) !important;
    box-shadow: 0 8px 18px rgba(111,32,255,.22), inset 0 1px rgba(255,255,255,.16) !important;
}
th {
    color: color-mix(in srgb, var(--muted) 75%, var(--vr-violet) 25%) !important;
}
tr:hover td { background: rgba(139,53,255,.055) !important; }

/* ---------- HOME / DISCOVERY ---------- */
.vr-side-card {
    border: 1px solid color-mix(in srgb,var(--line) 74%, var(--vr-violet) 26%) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.09);
}
.vr-side-card a.active {
    color: #fff !important;
    background: linear-gradient(90deg, #7f32ff 0%, #9c47ff 100%) !important;
    box-shadow: 0 8px 20px rgba(127,50,255,.22), inset 0 1px rgba(255,255,255,.16) !important;
}
.vr-welcome-strip,
.vr-guest-hero,
.vr-client-hero {
    border-color: rgba(139,53,255,.18) !important;
    background:
        radial-gradient(circle at 86% 18%, rgba(255,61,143,.16), transparent 29%),
        radial-gradient(circle at 72% 90%, rgba(34,200,255,.07), transparent 28%),
        linear-gradient(118deg, rgba(139,53,255,.18), var(--surface) 48%) !important;
    box-shadow: 0 18px 46px rgba(56,24,91,.08);
}
.vr-live-stats div,
.vr-guest-statboard {
    border: 1px solid rgba(139,53,255,.18);
    box-shadow: inset 0 1px rgba(255,255,255,.035);
}
.vr-section-head h2 { letter-spacing: -.035em; }
.vr-section-head > a {
    color: var(--vr-violet) !important;
    font-weight: 850;
}
.vr-section-head > a:hover { color: var(--vr-pink) !important; }
.vr-kicker,
.eyebrow {
    color: #a85cff !important;
    font-weight: 900;
    letter-spacing: .12em;
}

.vr-live-rail {
    grid-auto-columns: clamp(250px, 22vw, 315px) !important;
    gap: 13px !important;
    padding: 3px 2px 10px;
}
.vr-live-thumb {
    border: 1px solid rgba(139,53,255,.24) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.13);
}
.vr-live-thumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(139,53,255,.06), transparent 38%, rgba(255,61,143,.08));
    pointer-events: none;
}
.vr-live-tile:hover .vr-live-thumb {
    transform: translateY(-4px) scale(1.008) !important;
    border-color: rgba(166,82,255,.60) !important;
    box-shadow: 0 18px 38px rgba(84,35,136,.24), 0 0 0 1px rgba(255,61,143,.11) !important;
}
.vr-viewers {
    color: #fff !important;
    background: rgba(8,7,11,.84) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
}
.vr-live-overlay strong { color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.58); }
.vr-live-overlay small { color: rgba(255,255,255,.78); }

.vr-category-chips a {
    border: 1px solid color-mix(in srgb,var(--line) 75%, var(--vr-violet) 25%) !important;
    background: var(--surface) !important;
    font-weight: 800;
}
.vr-category-chips a:hover {
    color: var(--vr-violet) !important;
    border-color: rgba(139,53,255,.40) !important;
    background: rgba(139,53,255,.07) !important;
}
.vr-category-chips a.active {
    color: #fff !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, #8f3dff, #6f20ff) !important;
    box-shadow: 0 7px 18px rgba(111,32,255,.20);
}
.vr-filter-bar {
    border-color: rgba(139,53,255,.16) !important;
    box-shadow: 0 12px 30px rgba(53,30,78,.055);
}
.vr-creator-card {
    border-color: color-mix(in srgb,var(--line) 75%, var(--vr-violet) 25%) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.06);
}
.vr-creator-card:hover {
    border-color: rgba(139,53,255,.50) !important;
    box-shadow: 0 18px 38px rgba(70,34,108,.16), 0 0 0 1px rgba(255,61,143,.08) !important;
}
.vr-creator-card .verified { color: var(--vr-cyan) !important; }
.vr-card-tags span {
    color: #7d37dd !important;
    background: rgba(139,53,255,.09) !important;
    border: 1px solid rgba(139,53,255,.12) !important;
}

/* ---------- LIVE ROOM: dark entertainment surface even in light theme ---------- */
.vr-room-page {
    background:
        radial-gradient(circle at 30% 0%, rgba(139,53,255,.055), transparent 33%),
        transparent;
}
.vr-room-topbar {
    padding-top: 2px;
}
.vr-room-title-line h1 { letter-spacing: -.035em; }
.connection-chip {
    color: #bdf7d0 !important;
    background: rgba(34,214,111,.10) !important;
    border-color: rgba(34,214,111,.24) !important;
}
.vr-video-shell {
    border: 1px solid rgba(255,255,255,.085) !important;
    background: #050507 !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.28), 0 0 0 1px rgba(139,53,255,.08) !important;
}
.video-stage {
    background:
        radial-gradient(circle at 50% 40%, rgba(139,53,255,.07), transparent 28%),
        #020203 !important;
}
.video-empty strong { color: #f8f5fb; }
.video-empty small { color: #8f879a; }
.vr-video-controls {
    background: linear-gradient(180deg, #121116, #0b0a0e) !important;
    border-top-color: rgba(255,255,255,.075) !important;
}
.video-control-button {
    color: #f6f2fa !important;
    background: #1b1822 !important;
    border-color: rgba(255,255,255,.10) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.035);
}
.video-control-button:hover {
    background: #272130 !important;
    border-color: rgba(154,82,255,.40) !important;
    color: #fff !important;
}
.vr-room-goal {
    color: #f7f3fb !important;
    background: linear-gradient(90deg, #162b1e, #121218 56%) !important;
    border-top-color: rgba(34,214,111,.16) !important;
}
.goal-meter { background: rgba(255,255,255,.09) !important; }
.goal-meter span {
    background: linear-gradient(90deg, #29dc72, #b7f63c) !important;
    box-shadow: 0 0 18px rgba(34,214,111,.33);
}

.vr-room-creator-bar {
    border: 1px solid color-mix(in srgb,var(--line) 70%, var(--vr-violet) 30%) !important;
    background: linear-gradient(115deg, color-mix(in srgb,var(--surface) 94%, var(--vr-violet) 6%), var(--surface)) !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.06);
}
.vr-room-avatar {
    color: #fff !important;
    background: linear-gradient(145deg, #8f3dff, #ff3d8f) !important;
    box-shadow: 0 7px 18px rgba(139,53,255,.24);
}
.vr-room-meta span {
    background: color-mix(in srgb,var(--surface-2) 88%, var(--vr-violet) 12%) !important;
    border: 1px solid rgba(139,53,255,.10);
}

.vr-support-dock {
    color: #fff;
    border: 1px solid rgba(154,82,255,.36) !important;
    background:
        radial-gradient(circle at 8% 50%, rgba(255,61,143,.16), transparent 20%),
        linear-gradient(115deg, #17121f 0%, #23162f 52%, #17121f 100%) !important;
    box-shadow: 0 15px 36px rgba(44,19,73,.18), inset 0 1px rgba(255,255,255,.04);
}
.vr-support-dock h2,
.vr-support-dock .vr-kicker { color: #fff !important; }
.vr-support-dock .vr-kicker { color: #bc82ff !important; }
.vr-support-dock .input {
    color: #f7f4fa !important;
    background: #211c29 !important;
    border-color: rgba(255,255,255,.10) !important;
}
.vr-support-dock .input::placeholder { color: #837b8d !important; }
.quick-tips button {
    color: #fff !important;
    background: #27212f !important;
    border-color: rgba(255,255,255,.10) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.035);
}
.quick-tips button:hover {
    color: #fff !important;
    background: #352842 !important;
    border-color: rgba(154,82,255,.48) !important;
}
.quick-tips button.active,
.quick-tips button:focus-visible {
    color: #fff !important;
    background: linear-gradient(135deg, #9a45ff, #7426ff) !important;
    border-color: #bb7bff !important;
    box-shadow: 0 6px 18px rgba(117,47,255,.30), inset 0 1px rgba(255,255,255,.20) !important;
}

.vr-room-section {
    border-color: color-mix(in srgb,var(--line) 72%, var(--vr-violet) 28%) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.055);
}
.vr-gift-card {
    border: 1px solid rgba(139,53,255,.16) !important;
    background: linear-gradient(145deg, rgba(139,53,255,.055), var(--surface-2)) !important;
    box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.vr-gift-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 30px rgba(68,28,111,.14) !important;
}
.vr-gift-card:nth-child(1) { border-color: rgba(255,61,143,.26) !important; background: linear-gradient(145deg, rgba(255,61,143,.11), var(--surface-2)) !important; }
.vr-gift-card:nth-child(2) { border-color: rgba(139,53,255,.27) !important; background: linear-gradient(145deg, rgba(139,53,255,.11), var(--surface-2)) !important; }
.vr-gift-card:nth-child(3) { border-color: rgba(34,200,255,.25) !important; background: linear-gradient(145deg, rgba(34,200,255,.09), var(--surface-2)) !important; }
.vr-gift-card:nth-child(4) { border-color: rgba(255,190,61,.30) !important; background: linear-gradient(145deg, rgba(255,190,61,.10), var(--surface-2)) !important; }
.vr-gift-card > button > span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin: 0 auto 7px;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #8f3dff, #ff3d8f);
    box-shadow: 0 8px 20px rgba(139,53,255,.22);
}
.vr-gift-card:nth-child(3) > button > span { background: linear-gradient(145deg, #22c8ff, #1379ff); box-shadow: 0 8px 20px rgba(34,200,255,.20); }
.vr-gift-card:nth-child(4) > button > span { color: #241600; background: linear-gradient(145deg, #ffd56b, #ffae26); box-shadow: 0 8px 20px rgba(255,190,61,.20); }
.vr-gift-card small { color: #a85cff !important; font-weight: 900; }

.vr-tip-menu-grid > div {
    border: 1px solid rgba(139,53,255,.13) !important;
    background: linear-gradient(135deg, rgba(139,53,255,.07), var(--surface-2)) !important;
    transition: transform .16s ease, border-color .16s ease;
}
.vr-tip-menu-grid > div:hover {
    transform: translateY(-2px);
    border-color: rgba(139,53,255,.36) !important;
}
.vr-tip-menu-grid b { color: #a85cff !important; }

/* Chat: intentionally always dark like a live platform console. */
.vr-room-chat {
    color: #f6f3fa !important;
    background: #111016 !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: 0 18px 48px rgba(0,0,0,.28) !important;
}
.vr-room-chat > header {
    background: linear-gradient(180deg, #18151f, #111016) !important;
    border-bottom-color: rgba(255,255,255,.08) !important;
}
.vr-room-chat > header strong { color: #fff !important; }
.vr-room-chat > header > span { color: #8d8795 !important; }
.vr-room-chat .chat-tabs {
    background: #131118 !important;
    border-bottom-color: rgba(255,255,255,.08) !important;
}
.vr-room-chat .chat-tabs button {
    color: #9c95a6 !important;
}
.vr-room-chat .chat-tabs button:hover {
    color: #fff !important;
    background: #201b28 !important;
}
.vr-room-chat .chat-tabs button.active {
    color: #fff !important;
    background: linear-gradient(135deg, rgba(139,53,255,.34), rgba(255,61,143,.12)) !important;
    box-shadow: inset 0 0 0 1px rgba(154,82,255,.20);
}
.vr-room-chat .chat-messages {
    background:
        radial-gradient(circle at 50% 0%, rgba(139,53,255,.055), transparent 35%),
        #0f0e13 !important;
}
.vr-room-chat .chat-line {
    color: #d9d4df !important;
}
.vr-room-chat .chat-line b { color: #c281ff !important; }
.vr-room-chat .chat-line:hover { background: #19161f !important; }
.vr-room-chat .chat-line.tip {
    background: linear-gradient(90deg, rgba(34,214,111,.12), rgba(139,53,255,.08)) !important;
    border: 1px solid rgba(34,214,111,.16) !important;
}
.vr-chat-avatar {
    color: #fff !important;
    background: linear-gradient(145deg, #8f3dff, #ff3d8f) !important;
}
.vr-room-chat .chat-form {
    background: #15131b !important;
    border-top-color: rgba(255,255,255,.08) !important;
}
.vr-room-chat .chat-form .input {
    color: #f7f4fa !important;
    background: #211e28 !important;
    border-color: rgba(255,255,255,.10) !important;
}
.vr-room-chat .chat-form .input::placeholder { color: #777180 !important; }
.vr-room-chat .chat-form .button {
    background: linear-gradient(135deg, #a145ff, #6f20ff) !important;
    box-shadow: 0 9px 22px rgba(111,32,255,.28) !important;
}
.vr-room-chat > footer {
    color: #86808e !important;
    background: #111016 !important;
    border-top-color: rgba(255,255,255,.075) !important;
}
.vr-room-chat > footer button { color: #ff6684 !important; font-weight: 800; }
.vr-room-chat > .report-form:not([hidden]) {
    background: #181117 !important;
    border-color: rgba(255,64,95,.38) !important;
    box-shadow: 0 20px 52px rgba(0,0,0,.55) !important;
}
.vr-room-chat > .report-form .input {
    color: #f5f1f7 !important;
    background: #211a22 !important;
    border-color: rgba(255,255,255,.10) !important;
}

/* ---------- CLIENT ---------- */
.vr-client-metrics article,
.vr-studio-metrics article,
.vr-admin-pro-strip > div,
.admin-metrics .metric-card {
    position: relative;
    overflow: hidden;
    border-color: color-mix(in srgb,var(--line) 76%, var(--vr-violet) 24%) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,.055);
}
.vr-client-metrics article::before,
.vr-studio-metrics article::before,
.vr-admin-pro-strip > div::before,
.admin-metrics .metric-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--vr-violet), var(--vr-pink));
    opacity: .84;
}
.vr-client-metrics article:nth-child(2)::before,
.vr-studio-metrics article:nth-child(2)::before,
.vr-admin-pro-strip > div:nth-child(2)::before { background: linear-gradient(90deg, var(--vr-green), #b7f63c); }
.vr-client-metrics article:nth-child(3)::before,
.vr-studio-metrics article:nth-child(3)::before,
.vr-admin-pro-strip > div:nth-child(3)::before { background: linear-gradient(90deg, var(--vr-cyan), #4d76ff); }
.vr-client-metrics article:nth-child(4)::before,
.vr-studio-metrics article:nth-child(4)::before,
.vr-admin-pro-strip > div:nth-child(4)::before { background: linear-gradient(90deg, var(--vr-live), var(--vr-pink)); }
.vr-client-metrics article:nth-child(5)::before,
.vr-admin-pro-strip > div:nth-child(5)::before { background: linear-gradient(90deg, var(--vr-gold), #ff7b29); }

.vr-client-media-card,
.vr-favorite-row > a {
    border: 1px solid rgba(139,53,255,.10) !important;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.vr-client-media-card:hover,
.vr-favorite-row > a:hover {
    transform: translateY(-3px);
    border-color: rgba(139,53,255,.38) !important;
    box-shadow: 0 12px 28px rgba(70,31,112,.12);
}

/* ---------- CREATOR STUDIO ---------- */
.vr-live-console {
    border-color: rgba(139,53,255,.20) !important;
    background: linear-gradient(125deg, rgba(139,53,255,.09), var(--surface) 44%) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,.07);
}
.vr-live-console.is-live {
    border-color: rgba(255,46,89,.35) !important;
    background: linear-gradient(125deg, rgba(255,46,89,.11), var(--surface) 44%) !important;
    box-shadow: 0 14px 34px rgba(255,46,89,.08);
}
.vr-quick-actions a {
    border: 1px solid rgba(139,53,255,.12) !important;
    background: linear-gradient(135deg, rgba(139,53,255,.05), var(--surface-2)) !important;
}
.vr-quick-actions a:hover {
    transform: translateY(-2px);
    border-color: rgba(139,53,255,.36) !important;
    background: linear-gradient(135deg, rgba(139,53,255,.12), var(--surface-2)) !important;
}
.vr-quick-actions .icon { color: #a85cff !important; }

/* ---------- ADMIN / STAFF ---------- */
.admin-command-bar {
    border-color: rgba(139,53,255,.18) !important;
    background: linear-gradient(100deg, rgba(139,53,255,.09), var(--surface) 42%, rgba(255,61,143,.04)) !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.06);
}
.admin-command-summary span {
    border-color: rgba(139,53,255,.14) !important;
    background: rgba(139,53,255,.06) !important;
}
.admin-command-summary span.critical {
    color: #fff !important;
    background: linear-gradient(135deg, #ff4566, #e9254d) !important;
    border-color: transparent !important;
    box-shadow: 0 6px 16px rgba(255,64,95,.17);
}
.quick-link-grid a,
.vr-staff-hub a {
    border: 1px solid rgba(139,53,255,.11) !important;
    background: linear-gradient(135deg, rgba(139,53,255,.045), var(--surface-2)) !important;
}
.quick-link-grid a:hover,
.vr-staff-hub a:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(139,53,255,.36) !important;
    background: linear-gradient(135deg, rgba(139,53,255,.12), var(--surface-2)) !important;
    box-shadow: 0 10px 24px rgba(72,29,117,.10);
}
.vr-staff-hub a .icon { color: #a85cff !important; }
.danger-card {
    border-color: rgba(255,64,95,.30) !important;
    background: linear-gradient(135deg, rgba(255,64,95,.07), var(--surface)) !important;
}

/* ---------- MESSAGING ---------- */
.vr-inbox-shell,
.vr-chat-shell {
    border-color: rgba(139,53,255,.16) !important;
    box-shadow: 0 14px 36px rgba(0,0,0,.075) !important;
}
.vr-conversation-row.active {
    border-left: 3px solid var(--vr-violet);
    background: linear-gradient(90deg, rgba(139,53,255,.13), rgba(139,53,255,.04)) !important;
}
.vr-dm.mine {
    background: linear-gradient(135deg, #8f3dff, #6f20ff) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(111,32,255,.16);
}

/* ---------- AUTH / ACCOUNT ---------- */
.auth-card {
    border-color: rgba(139,53,255,.18) !important;
    box-shadow: 0 28px 80px rgba(49,20,80,.18) !important;
}
.auth-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg, var(--vr-violet), var(--vr-pink), var(--vr-cyan));
}

/* ---------- SMALL DETAILS ---------- */
.text-link { color: var(--vr-violet) !important; font-weight: 800; }
.text-link:hover { color: var(--vr-pink) !important; }
.positive { color: var(--vr-green) !important; }
.negative { color: var(--vr-red) !important; }
.pagination-wrap a[aria-current="page"],
.pagination-wrap span[aria-current="page"] {
    color: #fff !important;
    background: linear-gradient(135deg, #8f3dff, #6f20ff) !important;
}

@media (max-width: 980px) {
    .vr-support-dock { gap: 12px; }
    .vr-room-chat { box-shadow: 0 10px 30px rgba(0,0,0,.20) !important; }
}

@media (max-width: 720px) {
    .site-header { background: rgba(12,11,17,.98) !important; }
    .vr-live-rail { grid-auto-columns: min(80vw,300px) !important; }
    .vr-support-dock { padding: 12px !important; }
    .vr-room-section { box-shadow: none; }
    .button { min-height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
    .button,
    .vr-live-tile .vr-live-thumb,
    .vr-creator-card,
    .vr-gift-card,
    .vr-client-media-card,
    .vr-favorite-row > a,
    .vr-quick-actions a,
    .quick-link-grid a,
    .vr-staff-hub a { transition: none !important; transform: none !important; }
}

/* ---------- PUBLIC CREATOR PROFILE ---------- */
.vr-profile-cover {
    border: 1px solid rgba(139,53,255,.16) !important;
    background:
        radial-gradient(circle at 18% 20%, rgba(139,53,255,.30), transparent 32%),
        radial-gradient(circle at 82% 35%, rgba(255,61,143,.18), transparent 28%),
        linear-gradient(135deg, #17111f, #0f0e14) !important;
    box-shadow: 0 18px 46px rgba(0,0,0,.16);
}
.vr-profile-summary {
    border-color: rgba(139,53,255,.18) !important;
    box-shadow: 0 14px 36px rgba(55,23,88,.08);
}
.vr-profile-avatar {
    color: #fff !important;
    background: linear-gradient(145deg, #9a45ff, #ff3d8f) !important;
    box-shadow: 0 12px 30px rgba(139,53,255,.30) !important;
}
.vr-profile-statbar > * {
    border-color: rgba(139,53,255,.11) !important;
}
.vr-profile-tabs {
    border-color: rgba(139,53,255,.12) !important;
}
.vr-media-card,
.vr-album-card,
.vr-tier-card,
.vr-post-card,
.vr-action-card {
    border-color: rgba(139,53,255,.12) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.055);
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.vr-media-card:hover,
.vr-album-card:hover,
.vr-tier-card:hover,
.vr-post-card:hover {
    transform: translateY(-3px);
    border-color: rgba(139,53,255,.38) !important;
    box-shadow: 0 15px 32px rgba(70,31,112,.12);
}
.vr-live-callout {
    color: #fff !important;
    border-color: rgba(255,46,89,.28) !important;
    background: linear-gradient(120deg, rgba(255,46,89,.24), rgba(139,53,255,.22)), #17131d !important;
    box-shadow: 0 10px 26px rgba(255,46,89,.10);
}

/* ---------- FORM / SETTINGS EMPHASIS ---------- */
.form-card,
.age-card,
.moderation-card {
    border-color: rgba(139,53,255,.14) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.055);
}
.compact-check input:checked,
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    accent-color: var(--vr-violet);
}