/* ===== THEME VARIABLES ===== */
:root {
    --bg:             #f5f7ff;
    --bg-header:      rgba(245, 247, 255, 0.97);
    --text:           #17172d;
    --text-muted:     #4f587b;
    --accent:         #7c6cf8;
    --accent-muted:   rgba(124, 108, 248, 0.12);
    --nav-color:      #4f587b;
    --nav-active:     #5a4fd8;
    --border:         rgba(124, 108, 248, 0.22);
    --shadow:         rgba(0, 0, 0, 0.10);
    --footer-color:   #7878b0;
    --input-bg:       #f8f7ff;
    --input-border:   #a89cf8;
    --input-shadow:   rgba(0, 0, 0, 0.06);
    --placeholder:    #a89cf8;
    --login-bg:       #eae9ff;
    --panel-bg:       #ffffff;
    --divider-line:   rgba(124, 108, 248, 0.2);
    --social-bg:      #f5f4ff;
    --social-hover:   #ece8ff;
    --social-color:   #5a4fd8;
    --social-border:  #a89cf8;
}

body.dark-mode,
.dark-mode {
    --bg:             #090814;
    --bg-header:      rgba(9, 8, 20, 0.96);
    --text:           #f0f1ff;
    --text-muted:     #a8acd6;
    --accent:         #7c6cf8;
    --accent-muted:   rgba(124, 108, 248, 0.10);
    --nav-color:      #a8acd6;
    --nav-active:     #c4b5fd;
    --border:         rgba(124, 108, 248, 0.18);
    --shadow:         rgba(0, 0, 0, 0.40);
    --footer-color:   #4a4880;
    --input-bg:       #07071a;
    --input-border:   #3730a3;
    --input-shadow:   rgba(0, 0, 0, 0.60);
    --placeholder:    #3a3870;
    --login-bg:       #08071a;
    --panel-bg:       #12112a;
    --divider-line:   #2a2860;
    --social-bg:      #0a0a18;
    --social-hover:   #16153a;
    --social-color:   #c4b5fd;
    --social-border:  #3730a3;
}

/* ===== BASE RESET ===== */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    min-height: 100%;
    margin: 0;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.55;
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
    transition: background 0.22s, color 0.22s;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--nav-active); }

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

/* ===== UTILITIES ===== */
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-2 { margin-top: 0.75rem !important; }
.text-danger { color: #ff6b6b; }
.validation-message { color: #ff6b6b; font-size: 0.9rem; }

/* ===== BUTTONS ===== */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 1.4rem;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    border: 1.5px solid var(--accent);
    cursor: pointer;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
    text-decoration: none;
    white-space: nowrap;
}

.btn-primary:hover {
    background: var(--nav-active);
    color: #fff;
    box-shadow: 0 4px 16px rgba(124, 108, 248, 0.28);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: none;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 1.4rem;
    border-radius: 10px;
    background: transparent;
    color: var(--accent);
    font-weight: 700;
    font-size: 0.95rem;
    border: 1.5px solid var(--border);
    cursor: pointer;
    transition: background 0.15s, transform 0.1s, border-color 0.15s;
    text-decoration: none;
    white-space: nowrap;
}

.btn-secondary:hover {
    background: var(--accent-muted);
    border-color: var(--accent);
    color: var(--nav-active);
    transform: translateY(-1px);
}

.btn-secondary:active {
    transform: translateY(0);
}

/* ===== BLAZOR ERROR UI ===== */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}