:root {
    --color-primary: 139, 92, 246; /* Violet */
    --color-secondary: 236, 72, 153; /* Pink */
    --color-accent: 16, 185, 129; /* Mint */
    --color-bg-gradient-start: #1e1b4b;
    --color-bg-gradient-end: #0b0f19;
    --color-glow: rgba(139, 92, 246, 0.25);
}
[data-theme="cyberpunk"] {
    --color-primary: 245, 158, 11; /* Amber */
    --color-secondary: 239, 68, 68; /* Neon Red */
    --color-accent: 59, 130, 246; /* Neon Blue */
    --color-bg-gradient-start: #1a0d00;
    --color-bg-gradient-end: #050300;
    --color-glow: rgba(245, 158, 11, 0.25);
}
[data-theme="emerald"] {
    --color-primary: 16, 185, 129; /* Emerald */
    --color-secondary: 6, 182, 212; /* Cyan */
    --color-accent: 245, 158, 11; /* Amber */
    --color-bg-gradient-start: #022c22;
    --color-bg-gradient-end: #020617;
    --color-glow: rgba(16, 185, 129, 0.25);
}
[data-theme="sakura"] {
    --color-primary: 244, 114, 182; /* Soft Pink */
    --color-secondary: 129, 140, 248; /* Indigo */
    --color-accent: 45, 212, 191; /* Teal */
    --color-bg-gradient-start: #311227;
    --color-bg-gradient-end: #0d0714;
    --color-glow: rgba(244, 114, 182, 0.25);
}

/* Cross-device & Touch Responsiveness */
* {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

html {
    height: -webkit-fill-available;
}

body {
    background: radial-gradient(circle at top left, var(--color-bg-gradient-start), var(--color-bg-gradient-end) 60%);
    background-attachment: fixed;
    transition: background 0.5s ease;
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

/* Glassmorphism & UI Components */
.glass {
    background: rgba(23, 31, 48, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-card:hover {
    border-color: rgba(var(--color-primary), 0.3);
    transform: translateY(-2px);
}
.glow-brand { box-shadow: 0 0 25px -5px var(--color-glow); }

/* iOS Safe Area Padding */
.safe-pb {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
}
.safe-pt {
    padding-top: max(1rem, env(safe-area-inset-top));
}

/* Touch momentum scrolling */
.overflow-y-auto, .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
}

/* Scrollbar Styling */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--color-primary), 0.5); }

/* Fade-in Animation */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in { animation: fadeInUp 0.4s ease forwards; }

/* Prevent auto-zoom on inputs for iOS & Android mobile browsers */
@media screen and (max-width: 768px) {
    input[type="text"],
    input[type="number"],
    input[type="date"],
    select {
        font-size: 16px !important;
    }
}