:root {
    /* Light theme colors */
    --color-bg: #f9fafe;
    --color-text: #111827;
    --color-on-primary: #ffffff;
    --gradient-primary: linear-gradient(135deg, #4facfe, #00f2fe);
    --shadow-color: rgba(0,123,255,0.2);
    --input-focus: rgba(79,172,254,0.5);
}

[data-theme="dark"] {
    --color-bg: #1f1f2e;
    --color-text: #f5f5f5;
    --gradient-primary: linear-gradient(135deg, #1e3c72, #2a5298);
    --shadow-color: rgba(0,180,216,0.3);
    --input-focus: rgba(0,242,254,0.4);
}

/* Card style */
.card {
    background-color: var(--color-bg);
    color: var(--color-text);
    transition: all 0.4s ease-in-out;
    box-shadow: 0 15px 50px var(--shadow-color);
}
.card:hover {
    transform: translateY(-3px);
}

/* Header */
.card-header {
    font-family: 'Segoe UI', sans-serif;
}

/* Input focus */
.form-control:focus {
    border-color: var(--gradient-primary);
    box-shadow: 0 0 12px var(--input-focus);
    transition: all 0.3s ease-in-out;
}

/* Button */
#reset-btn {
    background: var(--gradient-primary);
    color: var(--color-on-primary);
    border: none;
    transition: all 0.3s ease-in-out;
}
#reset-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 0 25px var(--input-focus), 0 6px 20px var(--input-focus);
}
#reset-btn:active {
    transform: scale(0.97);
    box-shadow: 0 0 25px var(--input-focus) inset;
}

/* Error shake */
.shake {
    animation: shake 0.5s;
}
@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}

/* Small screens */
@media (max-width: 576px) {
    .card { margin-top: 2rem !important; }
}