:root {
    --brand-1: #0ea5e9;
    --brand-2: #22c55e;
}

body {
    background: radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), transparent 40%),
                radial-gradient(circle at bottom left, rgba(34, 197, 94, 0.10), transparent 40%),
                #f4f7fb;
    transition: background-color 0.3s ease;
}

[data-bs-theme='dark'] body {
    background: #0f172a;
}

.auth-bg {
    background: linear-gradient(135deg, #0ea5e9 0%, #22c55e 100%);
}

.glass-card {
    backdrop-filter: blur(8px);
    background: rgba(255, 255, 255, 0.95);
    border-radius: 1rem;
}

.app-logo {
    width: 34px;
    height: 34px;
    object-fit: cover;
    border-radius: 0.5rem;
}

.auth-logo {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 1rem;
}

.hero-card {
    background: linear-gradient(120deg, #0284c7, #16a34a);
    box-shadow: 0 16px 40px rgba(2, 132, 199, 0.25);
}

.task-card {
    border: 0;
    border-radius: 1rem;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.task-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.14);
}

.priority-high { border-left: 5px solid #dc2626; }
.priority-medium { border-left: 5px solid #f59e0b; }
.priority-low { border-left: 5px solid #22c55e; }

.fade-in-up {
    animation: fadeInUp 0.6s ease both;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}