/* --- GLOBAL STYLES --- */
body { font-family: 'Inter', sans-serif; background-color: #f3f4f6; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* --- CARD STYLES --- */
.card-checked { background: linear-gradient(135deg, #dcfce7 0%, #ffffff 100%); border-color: #22c55e; }
.card-disabled { background-color: #f9fafb; border-color: #e5e7eb; opacity: 0.8; pointer-events: none; }

.custom-checkbox input:checked + div { background-color: #3b82f6; border-color: #3b82f6; }
.custom-checkbox input:checked + div svg { display: block; }

textarea { resize: none; transition: all 0.2s; }
textarea:focus { background-color: #fff; box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2); border-color: #6366f1; }

/* --- ANIMATIONS --- */
@keyframes flame-pulse {
    0% { transform: scale(1); filter: drop-shadow(0 0 0px rgba(249, 115, 22, 0)); }
    50% { transform: scale(1.2); filter: drop-shadow(0 0 10px rgba(249, 115, 22, 0.5)); }
    100% { transform: scale(1); filter: drop-shadow(0 0 0px rgba(249, 115, 22, 0)); }
}
.streak-active { color: #f97316; animation: flame-pulse 2s infinite; }
.streak-pop { animation: pop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } }

/* --- TAB STYLES --- */
.tab-btn { transition: all 0.2s ease; }
.tab-active { background-color: #e0f2fe; color: #0284c7; font-weight: 600; }
.tab-inactive { background-color: transparent; color: #64748b; }
.tab-inactive:hover { background-color: #f1f5f9; color: #334155; }

#tab-achieved { color: #07a04c; font-weight: 600; }
#tab-missed { color: #e11d48; font-weight: 600; }

/* --- MODAL ANIMATIONS --- */
.fade-in { opacity: 1 !important; }
.scale-in { transform: scale(1) !important; opacity: 1 !important; }
.slide-down { animation: slideDown 0.2s ease-out forwards; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* --- BUTTON STYLES --- */
#reset-btn{
    padding: 0.5rem 1rem;
    border: 1px solid #f87171;
    border-radius: 0.375rem;
}
#reset-btn:hover {
    background-color: #f87171;
    color: white;
    transition: background-color 0.2s, color 0.2s;
}