:root {
    color-scheme: dark;
    --font-sans: "Segoe UI", "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: "Cascadia Code", "Roboto Mono", Consolas, monospace;

    --color-void: #06040a;
    --color-void-2: #090710;
    --color-steel-1: #0d0a1a;
    --color-steel-2: #130f26;
    --color-steel-3: #1c1737;
    --color-ink: #f5f2fa;
    --color-ink-muted: #abb1cf;
    --color-ink-quiet: #6f7495;
    
    --color-cyan: #b476ff; /* Primary Accent: Cosmic Violet */
    --color-cyan-rgb: 180, 118, 255;
    
    --color-green: #ff6097; /* Secondary Accent: Deep Rose Pink */
    --color-green-rgb: 255, 96, 151;
    
    --color-gold: #ffbd59; /* Tertiary Accent: Sunset Orange-Gold */
    --color-gold-rgb: 255, 189, 89;
    
    --color-coral: #ff5e7e; /* Danger Accent: Coral Rose */
    --color-coral-rgb: 255, 94, 126;
    
    --color-blue: #5ce1e6; /* Soft Info Accent: Vibrant Ocean Cyan */
    --color-blue-rgb: 92, 225, 230;

    --color-danger: var(--color-coral);
    --color-success: var(--color-green);

    --surface-page: var(--color-void);
    --surface-page-mid: var(--color-void-2);
    --surface-card: rgba(19, 15, 38, 0.84);
    --surface-card-strong: rgba(28, 23, 55, 0.92);
    --surface-card-muted: rgba(255, 255, 255, 0.05);
    --surface-card-hover: rgba(255, 255, 255, 0.07);
    --surface-overlay: rgba(6, 4, 10, 0.85);
    --surface-input: rgba(6, 4, 10, 0.7);
    --surface-media: #0d0a1a;

    --edge-subtle: rgba(245, 242, 250, 0.12);
    --edge-strong: rgba(245, 242, 250, 0.22);
    --edge-hot: rgba(180, 118, 255, 0.4);
    --edge-good: rgba(255, 96, 151, 0.34);
    --edge-warm: rgba(255, 189, 89, 0.38);
    --edge-blue: rgba(92, 225, 230, 0.34);
    --edge-ghost: rgba(255, 255, 255, 0.09);

    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-pill: 999px;

    --shadow-card: 0 24px 80px rgba(0, 0, 0, 0.48);
    --shadow-float: 0 16px 46px rgba(0, 0, 0, 0.38);
    --shadow-glow-cyan: 0 0 18px rgba(180, 118, 255, 0.62);
    --shadow-glow-green: 0 0 18px rgba(255, 96, 151, 0.58);
    --shadow-glow-gold: 0 0 18px rgba(255, 189, 89, 0.54);

    --gradient-page:
        linear-gradient(140deg, rgba(180, 118, 255, 0.045) 0 1px, transparent 1px 108px),
        linear-gradient(42deg, rgba(255, 189, 89, 0.035) 0 1px, transparent 1px 84px),
        linear-gradient(180deg, #07050b 0%, #0d0a1a 42%, #060409 100%);
    --gradient-page-grid:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 72px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.021) 0 1px, transparent 1px 72px);
    --gradient-card:
        linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
        var(--surface-card);
    --gradient-card-cyan:
        linear-gradient(100deg, rgba(180, 118, 255, 0.1), transparent 46%),
        var(--surface-card);
    --gradient-card-green:
        linear-gradient(135deg, rgba(255, 96, 151, 0.1), transparent 46%),
        var(--surface-card);
    --gradient-card-blue:
        linear-gradient(135deg, rgba(92, 225, 230, 0.12), rgba(255, 255, 255, 0.025)),
        var(--surface-card);
    --gradient-button-primary: linear-gradient(135deg, rgba(180, 118, 255, 0.22), rgba(255, 96, 151, 0.18));
    --gradient-meter: linear-gradient(90deg, var(--color-green), var(--color-cyan));
    --gradient-timeline: linear-gradient(var(--color-cyan), var(--color-green), var(--color-gold));

    --text-primary: var(--color-ink);
    --text-muted: var(--color-ink-muted);
    --text-quiet: var(--color-ink-quiet);
    --text-on-accent: #ffffff;
    --text-cyan-soft: #f2e6ff;
    --text-green-soft: #ffe6f0;
    --text-gold-soft: #fff4e0;
    --text-code: #f0e6ff;
    --text-chip: #e6e9fc;

    --accent-primary: var(--color-cyan);
    --accent-secondary: var(--color-green);
    --accent-tertiary: var(--color-gold);
    --accent-danger: var(--color-coral);
    --accent-info: var(--color-blue);

    --pattern-panel:
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255, 255, 255, 0.034) 1px, transparent 1px);
    --pattern-panel-size: 34px 34px;

    --transition-fast: 180ms ease;
    --transition-medium: 260ms ease;

    --bg: var(--surface-page);
    --bg-soft: var(--color-steel-1);
    --panel: var(--color-steel-2);
    --panel-strong: var(--color-steel-3);
    --text: var(--text-primary);
    --muted: var(--text-muted);
    --quiet: var(--text-quiet);
    --line: var(--edge-subtle);
    --line-strong: var(--edge-strong);
    --cyan: var(--accent-primary);
    --green: var(--accent-secondary);
    --gold: var(--accent-tertiary);
    --coral: var(--accent-danger);
    --blue: var(--accent-info);
    --shadow: var(--shadow-card);
}

* {
    box-sizing: border-box;
    letter-spacing: 0;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
    background: var(--bg);
}

/* Premium Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--color-void);
}
::-webkit-scrollbar-thumb {
    background: rgba(180, 118, 255, 0.22);
    border-radius: var(--radius-pill);
    transition: background var(--transition-fast);
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(180, 118, 255, 0.45);
}

/* Premium Selection */
::selection {
    background: rgba(180, 118, 255, 0.25);
    color: var(--text-primary);
}

body {
    min-height: 100%;
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-sans);
    background: var(--gradient-page);
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: var(--gradient-page-grid);
    mask-image: linear-gradient(to bottom, black, transparent 82%);
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

img {
    display: block;
    max-width: 100%;
}

h1,
h2,
h3,
p {
    margin: 0;
}

h1:focus {
    outline: none;
}

ul {
    margin: 0;
    padding: 0;
}

li {
    margin: 0;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--color-success);
}

.invalid {
    outline: 1px solid var(--color-danger);
}

.validation-message {
    color: var(--color-danger);
}

.blazor-error-boundary {
    padding: 1rem;
    color: var(--text-on-accent);
    background: color-mix(in srgb, var(--color-danger) 70%, var(--surface-overlay));
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

.darker-border-checkbox.form-check-input {
    border-color: var(--edge-strong);
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--muted);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}