:root {
    --dark-bg: #040813;
    --dark-surface: rgba(12, 29, 96, 0.88);
    --dark-surface-soft: rgba(10, 22, 72, 0.92);
    --dark-border: rgba(131, 169, 255, 0.28);
    --dark-text: #eaf1ff;
    --dark-muted: rgba(212, 225, 255, 0.78);
    --dark-accent: #3f66ff;
    --dark-accent-strong: #2f4be0;
    --dark-shadow: 0 10px 30px rgba(2, 6, 23, 0.45);
    
    /* Design Tokens */
    --glass-bg: rgba(47, 92, 255, 0.21);
    --glass-border: rgba(255, 255, 255, 0.35);
    --glass-blur: blur(12px);
    
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-full: 9999px;
}

/* Utility Classes */
.glass {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: var(--radius-md);
}

.glass-premium {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.text-gradient {
    background: linear-gradient(135deg, #fff 0%, #a5b4fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

html,
body {
    background: var(--dark-bg) !important;
    color: var(--dark-text) !important;
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background:
        radial-gradient(70% 80% at 15% 20%, rgba(30, 64, 175, 0.2), transparent 70%),
        radial-gradient(65% 80% at 85% 80%, rgba(220, 38, 38, 0.1), transparent 70%),
        url('/assets/images/auth_design/bg.png') center/cover no-repeat;
    opacity: 0.5;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(4, 8, 19, 0.5), rgba(4, 8, 19, 0.8));
}

/* Card Standardizations */
.glass-panel,
.card,
.section-box,
.event-card,
.point-card,
.booking-card {
    background: var(--dark-surface) !important;
    border: 1px solid var(--dark-border) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--radius-md);
    box-shadow: var(--dark-shadow);
}

h1, .page-title { font-size: 2.5rem; font-weight: 800; margin-bottom: var(--spacing-lg); letter-spacing: -0.02em; }
h2, .section-title { font-size: 1.8rem; font-weight: 700; margin-bottom: var(--spacing-md); }

input, select, textarea {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid var(--dark-border) !important;
    color: #fff !important;
    padding: 12px 16px !important;
    border-radius: var(--radius-sm) !important;
    transition: all 0.2s ease;
}

input:focus {
    border-color: var(--dark-accent) !important;
    background: rgba(255, 255, 255, 0.1) !important;
    outline: none;
}

button.primary, .btn-primary {
    background: linear-gradient(135deg, var(--dark-accent), var(--dark-accent-strong)) !important;
    color: #fff !important;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: var(--radius-full) !important;
    font-weight: 700 !important;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

button.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(63, 102, 255, 0.4);
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb {
    background: var(--dark-border);
    border-radius: 4px;
}

@media (max-width: 768px) {
    h1, .page-title { font-size: 1.8rem; }
    h2, .section-title { font-size: 1.4rem; }
}