:root {
    color-scheme: dark;
    --neon-bg: #060811;
    --neon-surface: rgba(12, 18, 31, 0.94);
    --neon-surface-soft: rgba(17, 27, 43, 0.88);
    --neon-border: rgba(0, 238, 255, 0.28);
    --neon-cyan: #00eeff;
    --neon-pink: #ff35d3;
    --neon-lime: #b9ff42;
    --neon-text: #e8f8ff;
    --neon-muted: #9aafc2;
    --neon-red: #ff5475;
}

* {
    scrollbar-color: #23576a #080d17;
}

html {
    min-height: 100%;
    background: var(--neon-bg);
}

body {
    color: var(--neon-text) !important;
    background-color: var(--neon-bg) !important;
    background-image:
        radial-gradient(ellipse at 12% 0%, rgba(0, 238, 255, 0.13), transparent 38%),
        radial-gradient(ellipse at 92% 18%, rgba(255, 53, 211, 0.12), transparent 34%),
        linear-gradient(rgba(0, 238, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 238, 255, 0.025) 1px, transparent 1px),
        linear-gradient(145deg, #060811, #0b1020 62%, #100b1b) !important;
    background-size: auto, auto, 34px 34px, 34px 34px, auto !important;
}

body::before {
    position: fixed;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    content: "";
    background: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 3px,
        rgba(0, 0, 0, 0.12) 4px
    );
    opacity: 0.26;
}

body > * {
    position: relative;
    z-index: 1;
}

h1, h2, h3, h4 {
    color: var(--neon-text) !important;
    font-family: monospace !important;
    -webkit-text-fill-color: var(--neon-text) !important;
    background: none !important;
    letter-spacing: 0.035em;
    text-shadow: 0 0 18px rgba(0, 238, 255, 0.19);
}

h1 {
    text-shadow: 0 0 24px rgba(0, 238, 255, 0.32), 0 0 44px rgba(255, 53, 211, 0.12);
}

p, li, label, small, figcaption {
    color: inherit;
}

a {
    color: var(--neon-cyan) !important;
    text-decoration-color: rgba(0, 238, 255, 0.48);
    text-underline-offset: 3px;
    transition: color 150ms ease, text-shadow 150ms ease;
}

a:hover, a:focus-visible {
    color: #fff !important;
    text-shadow: 0 0 12px rgba(0, 238, 255, 0.75);
}

.container, .card, .panel, .contact-card, .token, .entry, .changelog-entry,
.status-card, .result-card, .content-card, .api-section, .form-card,
[class*="panel"], [class*="card"] {
    color: var(--neon-text) !important;
    background-color: var(--neon-surface) !important;
    background-image: none !important;
    border: 1px solid var(--neon-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 0 0 1px rgba(0, 238, 255, 0.035), 0 16px 48px rgba(0, 0, 0, 0.38), 0 0 28px rgba(0, 238, 255, 0.065) !important;
}

.container {
    backdrop-filter: blur(12px);
}

form {
    color: var(--neon-text);
}

input:not([type="checkbox"]):not([type="radio"]),
textarea, select {
    color: var(--neon-text) !important;
    background: rgba(5, 10, 19, 0.92) !important;
    border: 1px solid rgba(0, 238, 255, 0.3) !important;
    border-radius: 8px !important;
    box-shadow: inset 0 0 14px rgba(0, 238, 255, 0.035) !important;
}

input::placeholder, textarea::placeholder {
    color: #7d91a6 !important;
    opacity: 1;
}

input:focus, textarea:focus, select:focus {
    outline: 2px solid rgba(0, 238, 255, 0.28) !important;
    outline-offset: 1px;
    border-color: var(--neon-cyan) !important;
    box-shadow: 0 0 0 3px rgba(0, 238, 255, 0.1), 0 0 20px rgba(0, 238, 255, 0.15) !important;
}

input[type="checkbox"], input[type="radio"] {
    accent-color: var(--neon-cyan);
}

button, input[type="submit"], input[type="button"], .button, .btn {
    color: #061018 !important;
    background: linear-gradient(105deg, var(--neon-cyan), #62a9ff 55%, var(--neon-pink)) !important;
    border: 1px solid rgba(185, 255, 255, 0.62) !important;
    border-radius: 8px !important;
    box-shadow: 0 0 16px rgba(0, 238, 255, 0.2), inset 0 1px rgba(255, 255, 255, 0.32) !important;
    font-weight: 700;
    letter-spacing: 0.035em;
    text-shadow: none !important;
    transition: transform 140ms ease, filter 140ms ease, box-shadow 140ms ease;
}

button:hover, input[type="submit"]:hover, input[type="button"]:hover, .button:hover, .btn:hover {
    filter: brightness(1.13);
    transform: translateY(-1px);
    box-shadow: 0 0 24px rgba(0, 238, 255, 0.42), 0 0 34px rgba(255, 53, 211, 0.17) !important;
}

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

button:disabled, input:disabled {
    cursor: not-allowed;
    filter: grayscale(0.45) brightness(0.72);
    transform: none;
}

.danger, .delete-btn, .danger-zone button, button.logout {
    color: #fff !important;
    background: linear-gradient(105deg, #a91f53, var(--neon-red)) !important;
    border-color: rgba(255, 113, 143, 0.7) !important;
    box-shadow: 0 0 18px rgba(255, 53, 111, 0.2) !important;
}

.success, .message-success, .status-online {
    color: var(--neon-lime) !important;
}

.error, .message-error, .status-error, .danger-zone {
    color: #ff879e !important;
}

pre, code, kbd, samp, #debugLog, .token-box {
    color: #b8ffe7 !important;
    background: rgba(3, 8, 15, 0.96) !important;
    border: 1px solid rgba(0, 238, 255, 0.22);
    border-radius: 8px;
}

pre, #debugLog {
    box-shadow: inset 0 0 24px rgba(0, 238, 255, 0.055), 0 0 18px rgba(0, 0, 0, 0.3);
}

table {
    color: var(--neon-text);
    border-color: var(--neon-border);
}

th {
    color: var(--neon-cyan);
    background: rgba(0, 238, 255, 0.08);
}

td, th {
    border-color: rgba(0, 238, 255, 0.18);
}

hr {
    border: 0;
    border-top: 1px solid rgba(0, 238, 255, 0.24);
    box-shadow: 0 0 10px rgba(0, 238, 255, 0.1);
}

::selection {
    color: #061018;
    background: var(--neon-cyan);
}

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

@media (max-width: 600px) {
    .container, .card, .panel {
        max-width: 100%;
    }
}