@import url("../wowdash/admin.css");

:root {
    --ui-ink: #10131e;
    --ui-ink-soft: #5c6880;
    --ui-edge: #d9e3f2;
    --ui-surface: rgba(255, 255, 255, 0.92);
    --ui-surface-strong: #ffffff;
    --ui-sidebar-top: #1c2430;
    --ui-sidebar-bottom: #2a3ea6;
    --ui-accent: #0074ff;
    --ui-accent-strong: #1d3573;
    --ui-accent-soft: #e8f2ff;
    --ui-warm: #f09744;
    --ui-warm-soft: #fff1e4;
    --ui-success: #01bd9b;
    --ui-success-soft: #e4fbf6;
    --ui-danger: #d0412e;
    --ui-danger-soft: #fdebe8;
    --ui-muted-soft: #f1f5fb;
    --ui-shadow: 0 22px 50px rgba(29, 53, 115, 0.14);
    --ui-radius-lg: 22px;
    --ui-radius-md: 16px;
    --ui-radius-sm: 12px;
}

body.admin-theme,
body.auth-theme,
body.public-theme {
    background:
        radial-gradient(circle at top left, rgba(0, 116, 255, 0.15), transparent 30%),
        radial-gradient(circle at bottom right, rgba(240, 151, 68, 0.14), transparent 24%),
        linear-gradient(180deg, #f7f9fe 0%, #fbfcff 52%, #fdf7f0 100%);
}

.admin-sidebar {
    background:
        radial-gradient(circle at top, rgba(255, 255, 255, 0.08), transparent 28%),
        linear-gradient(180deg, var(--ui-sidebar-top) 0%, var(--ui-sidebar-bottom) 100%);
}

.admin-sidebar-card {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
}

.admin-brand-mark {
    background: linear-gradient(135deg, rgba(0, 116, 255, 0.96), rgba(72, 112, 214, 0.96));
    box-shadow: 0 14px 28px rgba(0, 116, 255, 0.22);
}

.admin-nav-link:hover,
.admin-nav-link:focus {
    background: rgba(255, 255, 255, 0.1);
}

.admin-nav-link.is-active {
    background: linear-gradient(135deg, rgba(0, 116, 255, 0.82), rgba(29, 53, 115, 0.92));
}

.admin-header,
.public-hero {
    border-color: rgba(217, 227, 242, 0.9);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 250, 255, 0.9));
    box-shadow: 0 18px 38px rgba(29, 53, 115, 0.1);
}

.admin-header-kicker,
.public-kicker {
    background: rgba(0, 116, 255, 0.12);
    color: var(--ui-accent-strong);
}

.card,
.panel,
.create-form,
.manage-box,
.auth-card,
.auth-aside,
section[aria-label="User rows"],
section[aria-label="Module rows"],
.public-panel,
.public-panel-aside,
.public-check {
    border-color: rgba(217, 227, 242, 0.92);
}

.card,
.panel,
.create-form,
.manage-box,
.auth-card,
.auth-aside,
section[aria-label="User rows"],
section[aria-label="Module rows"] {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(246, 250, 255, 0.88));
}

.banner-status {
    background: linear-gradient(135deg, rgba(228, 251, 246, 0.96), rgba(255, 255, 255, 0.92));
    border-color: rgba(1, 189, 155, 0.22);
    color: #0b6d59;
}

.banner-error {
    background: linear-gradient(135deg, rgba(253, 235, 232, 0.96), rgba(255, 255, 255, 0.92));
    border-color: rgba(208, 65, 46, 0.18);
    color: #8e2a1d;
}

.admin-button,
button,
a.button {
    background: linear-gradient(135deg, #0074ff 0%, #4870d6 100%);
    box-shadow: 0 12px 24px rgba(0, 116, 255, 0.2);
}

.admin-button.secondary,
.button.secondary,
.admin-header-actions a,
.admin-sidebar-actions a {
    background: rgba(255, 255, 255, 0.95);
    color: var(--ui-accent-strong);
    border-color: rgba(0, 116, 255, 0.16);
}

.admin-sidebar-actions .admin-button.secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.14);
}

.public-panel-emphasis {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(235, 244, 255, 0.9));
}

.public-step-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(244, 249, 255, 0.88));
}

.theme-picker-option {
    border-color: rgba(217, 227, 242, 0.92);
    background: rgba(241, 245, 251, 0.78);
}

.theme-picker-option:hover,
.theme-picker-option:focus-within,
.theme-picker-option.is-active {
    border-color: rgba(0, 116, 255, 0.62);
    box-shadow: 0 0 0 4px rgba(0, 116, 255, 0.1);
    background: rgba(255, 255, 255, 0.95);
}