:root {
    --admin-bg: #000000;
    --admin-text: #ffffff;
    --admin-muted: #888888;
    --admin-soft: #cccccc;
    --admin-surface: rgba(17, 17, 17, 0.92);
    --admin-surface-strong: #111111;
    --admin-line: rgba(255, 255, 255, 0.08);
    --admin-sidebar: rgba(10, 10, 10, 0.98);
    --admin-primary: #E63946;
    --admin-primary-2: #C62833;
    --admin-success: #34d399;
    --admin-danger: #f87171;
    --admin-radius: 4px;
    --admin-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
}

html,
body {
    background: var(--admin-bg) !important;
    color: var(--admin-text) !important;
}

body {
    background: linear-gradient(180deg, #0a0a0a 0%, #000 100%) !important;
}

body::before {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) !important;
    background-size: 48px 48px !important;
}

.shell > aside {
    background: var(--admin-sidebar) !important;
    border-right: 1px solid var(--admin-line) !important;
    box-shadow: 16px 0 60px rgba(0, 0, 0, 0.4);
}

.brand::before {
    background: var(--admin-primary) !important;
    color: #fff !important;
    content: "DM" !important;
    font-family: Montserrat, sans-serif !important;
    font-weight: 800 !important;
}

header h1 {
    color: var(--admin-text) !important;
    font-family: Montserrat, sans-serif !important;
    font-size: clamp(26px, 3vw, 38px) !important;
    font-weight: 900 !important;
    letter-spacing: -0.02em !important;
    text-transform: uppercase;
}

.brand strong,
header h1,
h2,
h3,
label,
code {
    color: var(--admin-text) !important;
}

.brand span,
.muted,
p {
    color: var(--admin-muted) !important;
}

nav a,
nav button {
    color: var(--admin-soft) !important;
}

nav a::before,
nav button::before {
    background: var(--admin-primary) !important;
}

nav a:hover,
nav button:hover,
nav a.is-active,
nav button.is-active {
    color: var(--admin-text) !important;
    background: rgba(230, 57, 70, 0.1) !important;
}

nav a.is-active,
nav button.is-active {
    border-color: rgba(230, 57, 70, 0.35) !important;
}

.panel,
.card,
.theme-card,
.editor-panel,
.widget-card,
.draft-card,
.version-card {
    background: var(--admin-surface) !important;
    border: 1px solid var(--admin-line) !important;
    border-radius: var(--admin-radius) !important;
    box-shadow: var(--admin-shadow) !important;
}

.theme-card-active {
    border-color: rgba(230, 57, 70, 0.5) !important;
}

.theme-preview {
    background: linear-gradient(135deg, rgba(230, 57, 70, 0.15), rgba(0, 0, 0, 0.8)) !important;
    border-bottom: 1px solid var(--admin-line) !important;
}

.theme-badge {
    background: var(--admin-primary) !important;
    color: #fff !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 11px !important;
}

input,
textarea,
select {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid var(--admin-line) !important;
    color: var(--admin-text) !important;
    border-radius: 4px !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: rgba(230, 57, 70, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(230, 57, 70, 0.12) !important;
    outline: none !important;
}

button,
.button,
.btn-primary,
[type="submit"] {
    background: var(--admin-primary) !important;
    color: #fff !important;
    border: 0 !important;
    font-weight: 700 !important;
    border-radius: 3px !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 12px !important;
}

button.secondary,
.button-secondary,
.btn-secondary {
    background: transparent !important;
    border: 1px solid var(--admin-line) !important;
    color: var(--admin-text) !important;
}

button.secondary:hover,
.button-secondary:hover {
    border-color: rgba(230, 57, 70, 0.5) !important;
    background: rgba(230, 57, 70, 0.08) !important;
}

.alert-success {
    background: rgba(52, 211, 153, 0.12) !important;
    border-color: rgba(52, 211, 153, 0.3) !important;
    color: var(--admin-success) !important;
}

.alert-error,
.alert-danger {
    background: rgba(248, 113, 113, 0.1) !important;
    border-color: rgba(248, 113, 113, 0.3) !important;
    color: var(--admin-danger) !important;
}

table th {
    background: rgba(0, 0, 0, 0.4) !important;
    color: var(--admin-muted) !important;
}

table td {
    border-color: var(--admin-line) !important;
}

table tr:hover td {
    background: rgba(230, 57, 70, 0.04) !important;
}

code,
pre {
    background: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid var(--admin-line) !important;
    color: var(--admin-primary) !important;
}

.editor-tabs button.is-active {
    background: rgba(230, 57, 70, 0.12) !important;
    border-color: rgba(230, 57, 70, 0.4) !important;
    color: var(--admin-primary) !important;
}

.content-editor-html textarea {
    font-family: ui-monospace, monospace !important;
    font-size: 13px !important;
}

.login-card {
    background: var(--admin-surface) !important;
    border: 1px solid var(--admin-line) !important;
}