:root {
    color-scheme: dark;
    --xxx-bg: #0a0f1c;
    --xxx-surface: #0f1626;
    --xxx-surface-2: #121b2f;
    --xxx-surface-3: #162238;
    --xxx-line: #1d2b45;
    --xxx-line-strong: #2a3f63;
    --xxx-text: #e6edf7;
    --xxx-muted: #aeb9cc;
    --xxx-dim: #7f8ca6;
    --xxx-cyan: #4fd1c5;
    --xxx-cyan-strong: #7defd9;
    --xxx-red: #ff6b6b;
    --xxx-amber: #f5b942;
    --xxx-green: #46e08a;
}

html,
body {
    background: var(--xxx-bg) !important;
    color: var(--xxx-muted) !important;
    font-family: Bahnschrift, "Arial Narrow", "Segoe UI", sans-serif !important;
}

body {
    background-color: var(--xxx-bg) !important;
    background-image:
        linear-gradient(rgba(79, 209, 197, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(79, 209, 197, 0.035) 1px, transparent 1px),
        radial-gradient(circle at 72% -18%, rgba(79, 209, 197, 0.075), transparent 34%) !important;
    background-position: center top !important;
    background-size: 44px 44px, 44px 44px, auto !important;
}

::selection {
    background: rgba(79, 209, 197, 0.28);
    color: #fff;
}

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

::-webkit-scrollbar-track,
.custom-scrollbar::-webkit-scrollbar-track {
    background: #0a0f1c !important;
}

::-webkit-scrollbar-thumb,
.custom-scrollbar::-webkit-scrollbar-thumb {
    border: 2px solid #0a0f1c;
    border-radius: 0 !important;
    background: #2a3f63 !important;
}

::-webkit-scrollbar-thumb:hover,
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #4fd1c5 !important;
}

#app-container,
#xxx-console-main {
    background: transparent !important;
}

#xxx-console-main::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(79, 209, 197, 0.018), transparent 42%);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--xxx-text) !important;
    letter-spacing: 0.045em;
}

.font-mono,
code,
pre,
table,
input,
select,
textarea,
time {
    font-family: "JetBrains Mono", Consolas, "Courier New", monospace !important;
}

[class*="bg-slate-950"],
[class*="bg-zinc-950"] {
    background-color: #0a0f1c !important;
}

[class*="bg-slate-900"],
[class*="bg-zinc-900"] {
    background-color: var(--xxx-surface) !important;
}

[class*="bg-slate-800"],
[class*="bg-zinc-800"] {
    background-color: var(--xxx-surface-2) !important;
}

[class*="border-slate-900"],
[class*="border-slate-800"],
[class*="border-slate-700"],
[class*="border-zinc-900"],
[class*="border-zinc-800"],
[class*="border-zinc-700"] {
    border-color: var(--xxx-line) !important;
}

[class*="text-cyan-"] {
    color: var(--xxx-cyan) !important;
}

[class*="border-cyan-"] {
    border-color: rgba(79, 209, 197, 0.52) !important;
}

[class*="bg-cyan-"] {
    background-color: rgba(79, 209, 197, 0.1) !important;
}

[class*="text-amber-"] {
    color: var(--xxx-amber) !important;
}

[class*="text-emerald-"],
[class*="text-green-"] {
    color: var(--xxx-green) !important;
}

button,
a,
input,
select,
textarea {
    transition-duration: 120ms !important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--xxx-cyan) !important;
    outline-offset: 2px !important;
}

input,
select,
textarea {
    border: 1px solid var(--xxx-line-strong) !important;
    border-radius: 0 !important;
    background: #0a0f1c !important;
    color: var(--xxx-text) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--xxx-dim) !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--xxx-cyan) !important;
    box-shadow: 0 0 0 1px rgba(79, 209, 197, 0.35) !important;
}

button:disabled {
    opacity: 0.42;
}

.xxx-loading-brand {
    display: grid;
    justify-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.xxx-loading-brand img {
    width: 122px;
    height: 122px;
    object-fit: contain;
    border-radius: 50%;
    filter: drop-shadow(0 0 18px rgba(255, 107, 107, 0.14));
}

.xxx-loading-brand strong {
    padding-left: 0.24em;
    color: #f7f8fb;
    font-size: 23px;
    font-weight: 800;
    letter-spacing: 0.24em;
    line-height: 1;
    text-transform: uppercase;
}

#sidebar {
    width: 252px !important;
    padding: 14px !important;
    border-color: var(--xxx-line-strong) !important;
    background: linear-gradient(180deg, rgba(15, 22, 38, 0.99), rgba(10, 15, 28, 0.995)) !important;
    box-shadow: 18px 0 42px rgba(0, 0, 0, 0.18);
}

.xxx-sidebar-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    margin: 0 0 14px;
    padding: 2px 2px 17px;
    border-bottom: 1px solid var(--xxx-line);
    text-align: center;
}

.xxx-console-mark {
    display: grid;
    width: 112px;
    height: 112px;
    flex: none;
    place-items: center;
    background: transparent;
}

.xxx-console-mark img {
    width: 108px;
    height: 108px;
    object-fit: contain;
    border-radius: 50%;
    filter: drop-shadow(0 0 14px rgba(255, 107, 107, 0.13));
}

.xxx-sidebar-brand h1 {
    margin: 0;
    padding-left: 0.24em;
    color: #f7f8fb;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.24em;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 0 0 18px rgba(230, 237, 247, 0.08);
}

.xxx-network-panel {
    position: relative;
    border-radius: 0 !important;
    border-color: var(--xxx-line) !important;
    background: rgba(18, 27, 47, 0.72) !important;
}

.xxx-network-live {
    margin-left: auto;
    color: var(--xxx-green);
    font: 700 7px Consolas, monospace;
    letter-spacing: 0.16em;
}

.xxx-nav-kicker {
    margin: 2px 3px 7px;
    color: var(--xxx-dim);
    font: 700 8px Consolas, monospace;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.nav-btn {
    min-height: 40px;
    border-radius: 0 !important;
    color: #8794aa !important;
    background: transparent !important;
    box-shadow: none !important;
}

.nav-btn:hover {
    border-color: var(--xxx-line-strong) !important;
    background: rgba(18, 27, 47, 0.78) !important;
    color: var(--xxx-text) !important;
}

.nav-btn.xxx-nav-active,
.nav-btn[aria-current="page"] {
    border-color: var(--xxx-cyan) !important;
    background: rgba(79, 209, 197, 0.09) !important;
    color: var(--xxx-cyan-strong) !important;
    box-shadow: inset 3px 0 0 var(--xxx-cyan) !important;
}

#btn-logout {
    border-radius: 0 !important;
    background: #0a0f1c !important;
}

#xxx-main-header {
    min-height: 66px;
    border-color: var(--xxx-line-strong) !important;
    background: rgba(10, 15, 28, 0.96) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
    backdrop-filter: blur(12px);
}

.xxx-route-indicator small,
.xxx-route-indicator strong {
    display: block;
    text-transform: uppercase;
}

.xxx-route-indicator small {
    color: var(--xxx-dim);
    font: 700 7px Consolas, monospace;
    letter-spacing: 0.16em;
}

.xxx-route-indicator strong {
    margin-top: 2px;
    color: var(--xxx-text);
    font-size: 11px;
    letter-spacing: 0.13em;
}

.xxx-route-pulse {
    width: 8px;
    height: 8px;
    border: 1px solid var(--xxx-cyan-strong);
    background: var(--xxx-cyan);
    box-shadow: 0 0 10px rgba(79, 209, 197, 0.72);
}

.xxx-target-field {
    border-radius: 0 !important;
    background: var(--xxx-surface) !important;
}

#global-target-player {
    font-family: Bahnschrift, "Segoe UI", sans-serif !important;
}

#global-target-clear,
#global-target-suggestions,
#global-target-suggestions button {
    border-radius: 0 !important;
}

#xxx-update-banner { top: auto !important; right: 12px !important; bottom: 12px !important; left: auto !important; width: min(420px, calc(100vw - 24px)) !important; border: 1px solid rgba(255, 82, 104, 0.55) !important; background: #0a0f1c !important; }
#xxx-update-banner button { border-radius: 0 !important; }
@media (max-width: 640px) { #xxx-update-banner { right: 8px !important; bottom: 8px !important; width: calc(100vw - 16px) !important; } }

.xxx-header-stats {
    border-radius: 0 !important;
    border-color: var(--xxx-line) !important;
    background: rgba(15, 22, 38, 0.82) !important;
}

#view-container {
    background: transparent !important;
}

#view-container :where(article, section)[class*="border"][class*="bg-"] {
    border-radius: 0 !important;
    box-shadow: none !important;
}

#view-container :where(button, input, select, textarea)[class*="rounded"] {
    border-radius: 0 !important;
}

#view-container :where(
    [class~="rounded"],
    [class~="rounded-sm"],
    [class~="rounded-md"],
    [class~="rounded-lg"],
    [class~="rounded-xl"],
    [class~="rounded-2xl"],
    [class~="rounded-3xl"],
    [class*="rounded-["]
) {
    border-radius: 0 !important;
}

#view-container table {
    color: var(--xxx-muted);
}

#view-container thead {
    background: #0a0f1c !important;
}

#view-container th {
    color: var(--xxx-dim) !important;
    font-size: 9px;
    letter-spacing: 0.14em;
}

#view-container tbody tr {
    border-color: var(--xxx-line) !important;
}

#view-container tbody tr:hover {
    background: var(--xxx-surface-2) !important;
}

.xxx-panel,
.xxx-page-title {
    border-radius: 0 !important;
    border-color: var(--xxx-line-strong) !important;
    background: var(--xxx-surface) !important;
    box-shadow: none !important;
}

.xxx-primary-btn,
.xxx-secondary-btn {
    border-radius: 0 !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.xxx-primary-btn {
    border-color: var(--xxx-cyan) !important;
    background: var(--xxx-cyan) !important;
    color: #062018 !important;
}

#global-processing-overlay,
#hover-tooltip,
#map-tooltip {
    border-radius: 0 !important;
    border-color: var(--xxx-line-strong) !important;
    background: rgba(15, 22, 38, 0.96) !important;
}

#loading-screen {
    background-color: var(--xxx-bg) !important;
    background-image: linear-gradient(rgba(79, 209, 197, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(79, 209, 197, 0.035) 1px, transparent 1px) !important;
    background-size: 44px 44px !important;
}

#debug-box {
    border-radius: 0 !important;
    border-color: var(--xxx-line-strong) !important;
    background: var(--xxx-surface) !important;
}

@media (max-width: 1023px) {
    #sidebar {
        width: min(86vw, 290px) !important;
    }
}

@media (max-width: 639px) {
    #xxx-main-header {
        min-height: 58px;
        padding: 8px 10px !important;
    }

    #view-container {
        padding: 10px !important;
    }
}

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