:root {
    --apex-bg: #050505;
    --apex-surface: #0a0a0c;
    --apex-surface-2: #111216;
    --apex-surface-3: #17181d;
    --apex-line: #2b2b31;
    --apex-line-soft: rgba(255, 255, 255, 0.1);
    --apex-text: #f8fafc;
    --apex-muted: #9ba0aa;
    --apex-orange: #ff6a00;
    --apex-pink: #ee0979;
    --apex-cyan: #00ccff;
    --apex-yellow: #ffcc00;
    --apex-danger: #ff335f;
    --apex-success: #21d98b;
    --apex-radius: 8px;
    --apex-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
}

html {
    color-scheme: dark;
    scroll-behavior: smooth;
    background: var(--apex-bg);
}

body {
    color: var(--apex-text) !important;
    background:
        radial-gradient(circle at 12% 0%, rgba(255, 106, 0, 0.12), transparent 28rem),
        radial-gradient(circle at 90% 5%, rgba(238, 9, 121, 0.1), transparent 30rem),
        var(--apex-bg) !important;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    letter-spacing: 0 !important;
}

body::selection {
    color: #fff;
    background: var(--apex-pink);
}

h1,
h2,
h3,
h4,
.font-display,
[class*="font-orbitron"],
[class*="font-title"] {
    font-family: Rajdhani, Inter, system-ui, sans-serif !important;
    letter-spacing: 0 !important;
}

a {
    transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}

nav,
header.topbar,
.topbar,
.site-header {
    border-color: rgba(255, 106, 0, 0.35) !important;
}

body > nav,
body > header,
.topbar,
.site-header,
.chat-header,
.conversation-head {
    background-color: rgba(5, 5, 5, 0.94) !important;
    backdrop-filter: blur(16px);
}

.glass-card,
.card,
.panel,
.box,
.section-card,
.chat-shell,
.chat-card,
.login-card,
.stat-card,
.team-card,
.player-card,
.match-card,
.modal-content,
[class*="bg-slate-9"],
[class*="bg-gray-9"],
[class*="bg-[#0b"],
[class*="bg-[#0f"],
[class*="bg-[#11"] {
    border-color: var(--apex-line-soft) !important;
    background-color: rgba(10, 10, 12, 0.94) !important;
    box-shadow: var(--apex-shadow);
}

input,
select,
textarea,
.input,
.select,
.composer-input {
    color: var(--apex-text) !important;
    border-color: #34343b !important;
    border-radius: var(--apex-radius) !important;
    background: #08080b !important;
    outline: none;
}

input:focus,
select:focus,
textarea:focus,
.input:focus,
.select:focus,
.composer-input:focus {
    border-color: var(--apex-orange) !important;
    box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.15) !important;
}

button,
.btn,
[role="button"] {
    border-radius: var(--apex-radius) !important;
}

.btn-primary,
button[type="submit"],
[class*="bg-emerald-5"],
[class*="bg-cyan-5"],
[class*="bg-sky-5"] {
    color: #fff !important;
    border-color: transparent !important;
    background: linear-gradient(135deg, var(--apex-orange), var(--apex-pink)) !important;
    box-shadow: 0 8px 22px rgba(238, 9, 121, 0.2);
}

.btn-primary:hover,
button[type="submit"]:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.text-emerald-300,
.text-emerald-400,
.text-emerald-500,
.text-sky-300,
.text-sky-400,
.text-cyan-300,
.text-cyan-400 {
    color: var(--apex-orange) !important;
}

.border-emerald-500,
.border-sky-500,
.border-cyan-500,
[class*="border-emerald-"],
[class*="border-sky-"],
[class*="border-cyan-"] {
    border-color: rgba(255, 106, 0, 0.48) !important;
}

.from-emerald-400,
.from-emerald-500,
.from-cyan-400,
.from-sky-400 {
    --tw-gradient-from: var(--apex-orange) var(--tw-gradient-from-position) !important;
}

.to-cyan-400,
.to-cyan-500,
.to-sky-400,
.to-emerald-400 {
    --tw-gradient-to: var(--apex-pink) var(--tw-gradient-to-position) !important;
}

.apex-engine-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 28px;
    padding: 0.35rem 0.65rem;
    color: #ffbf8f;
    border: 1px solid rgba(255, 106, 0, 0.35);
    border-radius: 999px;
    background: rgba(255, 106, 0, 0.08);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
}

.apex-only-hidden {
    display: none !important;
}

.apex-section-title {
    position: relative;
    padding-left: 1rem;
}

.apex-section-title::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--apex-orange), var(--apex-pink));
    box-shadow: 0 0 14px rgba(255, 106, 0, 0.48);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #070708;
}

::-webkit-scrollbar-thumb {
    border: 2px solid #070708;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--apex-orange), var(--apex-pink));
}

@media (max-width: 768px) {
    body {
        background:
            radial-gradient(circle at 0% 0%, rgba(255, 106, 0, 0.11), transparent 21rem),
            var(--apex-bg) !important;
    }

    .glass-card,
    .card,
    .panel,
    .box {
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
    }
}