:root {
    color-scheme: light;
    --rose-cream: #fff6f1;
    --rose-glow: #f3d9f4;
    --plum: #46126c;
    --plum-deep: #241133;
    --mint: #59eecd;
    --ink-strong: #281530;
    --ink-soft: #6c5676;
    --bg-glow-mint: rgba(89, 238, 205, 0.22);
    --bg-glow-plum: rgba(181, 105, 214, 0.22);
    --bg-start: #fff9f5;
    --bg-mid: #fdf0f4;
    --bg-end: #f5edf8;
    --surface-raised: rgba(255, 249, 248, 0.88);
    --surface-card: rgba(255, 255, 255, 0.82);
    --surface-tint: rgba(247, 235, 243, 0.88);
    --surface-input: rgba(255, 255, 255, 0.92);
    --surface-border: rgba(61, 24, 92, 0.12);
    --surface-border-soft: rgba(61, 24, 92, 0.08);
    --surface-border-strong: rgba(61, 24, 92, 0.16);
    --surface-shadow: 0 24px 80px rgba(60, 20, 90, 0.12);
    --surface-shadow-soft: 0 18px 60px rgba(60, 20, 90, 0.1);
    --secondary-bg: rgba(255, 255, 255, 0.85);
    --secondary-border: rgba(61, 24, 92, 0.12);
    --accent-gradient: linear-gradient(135deg, var(--plum) 0%, #8c37a8 100%);
    --accent-shadow: 0 12px 30px rgba(70, 18, 108, 0.28);
    --accent-text: #ffffff;
    --accent-muted: rgba(255, 255, 255, 0.8);
    --focus-ring: rgba(89, 238, 205, 0.38);
    --feedback-bg: rgba(89, 238, 205, 0.16);
    --feedback-text: #174f52;
    --error-bg: rgba(231, 97, 97, 0.12);
    --error-text: #8b2135;
    --success-bg: rgba(79, 214, 166, 0.2);
    --success-text: #0f6d54;
    --warning-bg: rgba(231, 176, 78, 0.18);
    --warning-text: #8a5712;
    --neutral-bg: rgba(113, 108, 129, 0.14);
    --neutral-text: #5b556a;
    --danger-soft-bg: rgba(255, 234, 236, 0.94);
    --danger-soft-border: rgba(178, 32, 44, 0.22);
    --danger-soft-text: #9f1f2c;
    --error-banner-bg: #8b2135;
    --error-banner-text: #ffffff;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not(.theme-light) {
        color-scheme: dark;
        --ink-strong: #f7ecfb;
        --ink-soft: #c3b1cf;
        --bg-glow-mint: rgba(89, 238, 205, 0.12);
        --bg-glow-plum: rgba(181, 105, 214, 0.14);
        --bg-start: #110f18;
        --bg-mid: #1a1423;
        --bg-end: #131c28;
        --surface-raised: rgba(32, 26, 42, 0.86);
        --surface-card: rgba(42, 34, 54, 0.82);
        --surface-tint: rgba(57, 46, 72, 0.9);
        --surface-input: rgba(20, 18, 27, 0.94);
        --surface-border: rgba(221, 194, 235, 0.14);
        --surface-border-soft: rgba(221, 194, 235, 0.08);
        --surface-border-strong: rgba(221, 194, 235, 0.22);
        --surface-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
        --surface-shadow-soft: 0 18px 60px rgba(0, 0, 0, 0.32);
        --secondary-bg: rgba(33, 27, 43, 0.92);
        --secondary-border: rgba(221, 194, 235, 0.14);
        --accent-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
        --focus-ring: rgba(89, 238, 205, 0.3);
        --feedback-bg: rgba(89, 238, 205, 0.16);
        --feedback-text: #9ef3df;
        --error-bg: rgba(231, 97, 97, 0.16);
        --error-text: #ffb8c1;
        --success-bg: rgba(79, 214, 166, 0.2);
        --success-text: #9ef3df;
        --warning-bg: rgba(231, 176, 78, 0.18);
        --warning-text: #ffd79e;
        --neutral-bg: rgba(156, 146, 181, 0.2);
        --neutral-text: #ddd1ea;
        --danger-soft-bg: rgba(86, 30, 40, 0.86);
        --danger-soft-border: rgba(255, 177, 191, 0.18);
        --danger-soft-text: #ffbec7;
        --error-banner-bg: #6b2031;
        --error-banner-text: #fff3f5;
    }
}

:root[data-theme="dark"],
:root.theme-dark {
    color-scheme: dark;
    --ink-strong: #f7ecfb;
    --ink-soft: #c3b1cf;
    --bg-glow-mint: rgba(89, 238, 205, 0.12);
    --bg-glow-plum: rgba(181, 105, 214, 0.14);
    --bg-start: #110f18;
    --bg-mid: #1a1423;
    --bg-end: #131c28;
    --surface-raised: rgba(32, 26, 42, 0.86);
    --surface-card: rgba(42, 34, 54, 0.82);
    --surface-tint: rgba(57, 46, 72, 0.9);
    --surface-input: rgba(20, 18, 27, 0.94);
    --surface-border: rgba(221, 194, 235, 0.14);
    --surface-border-soft: rgba(221, 194, 235, 0.08);
    --surface-border-strong: rgba(221, 194, 235, 0.22);
    --surface-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
    --surface-shadow-soft: 0 18px 60px rgba(0, 0, 0, 0.32);
    --secondary-bg: rgba(33, 27, 43, 0.92);
    --secondary-border: rgba(221, 194, 235, 0.14);
    --accent-shadow: 0 14px 34px rgba(0, 0, 0, 0.34);
    --focus-ring: rgba(89, 238, 205, 0.3);
    --feedback-bg: rgba(89, 238, 205, 0.16);
    --feedback-text: #9ef3df;
    --error-bg: rgba(231, 97, 97, 0.16);
    --error-text: #ffb8c1;
    --success-bg: rgba(79, 214, 166, 0.2);
    --success-text: #9ef3df;
    --warning-bg: rgba(231, 176, 78, 0.18);
    --warning-text: #ffd79e;
    --neutral-bg: rgba(156, 146, 181, 0.2);
    --neutral-text: #ddd1ea;
    --danger-soft-bg: rgba(86, 30, 40, 0.86);
    --danger-soft-border: rgba(255, 177, 191, 0.18);
    --danger-soft-text: #ffbec7;
    --error-banner-bg: #6b2031;
    --error-banner-text: #fff3f5;
}

:root[data-theme="light"],
:root.theme-light {
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        scrollbar-color: rgba(255, 255, 255, 0.28) rgba(255, 255, 255, 0.08);
    }
}

html,
body {
    margin: 0;
    min-height: 100%;
    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
    color: var(--ink-strong);
    background:
        radial-gradient(circle at top left, var(--bg-glow-mint), transparent 28%),
        radial-gradient(circle at top right, var(--bg-glow-plum), transparent 32%),
        linear-gradient(180deg, var(--bg-start) 0%, var(--bg-mid) 52%, var(--bg-end) 100%);
}

* {
    box-sizing: border-box;
}

button,
input,
select {
    font: inherit;
}

button {
    cursor: pointer;
}

a {
    color: inherit;
}

button,
input,
select {
    outline: none;
}

button:focus-visible,
input:focus-visible,
select:focus-visible {
    box-shadow: 0 0 0 3px var(--focus-ring);
}

.screen-shell {
    min-height: 100vh;
    padding: 1.5rem 1rem 3rem;
    display: grid;
    place-items: start center;
}

.surface-card {
    width: min(100%, 64rem);
}

.eyebrow {
    margin: 0;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.76rem;
    font-weight: 700;
}

.feedback {
    padding: 1rem;
    border-radius: 1.2rem;
    background: var(--feedback-bg);
    color: var(--feedback-text);
    font-weight: 700;
}

.feedback.error {
    background: var(--error-bg);
    color: var(--error-text);
}

.admin-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.primary-action,
.secondary-action {
    border: 0;
    border-radius: 999px;
    padding: 0.95rem 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    transition: transform 120ms ease, opacity 120ms ease, box-shadow 120ms ease;
}

.primary-action {
    background: var(--accent-gradient);
    color: var(--accent-text);
    box-shadow: var(--accent-shadow);
}

.secondary-action {
    background: var(--secondary-bg);
    color: var(--ink-strong);
    border: 1px solid var(--secondary-border);
}

.primary-action:hover,
.secondary-action:hover {
    transform: translateY(-1px);
}

.primary-action:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

#blazor-error-ui {
    background: var(--error-banner-bg);
    bottom: 1rem;
    color: var(--error-banner-text);
    display: none;
    left: 1rem;
    padding: 0.75rem 1rem;
    position: fixed;
    right: 1rem;
    border-radius: 1rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
    z-index: 1000;
}

#blazor-error-ui .dismiss,
#blazor-error-ui .reload {
    margin-left: 1rem;
}