*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
    font-family: var(--font-sans);
    background: var(--bg-base);
    color: var(--text-1);
    min-height: 100vh;
}

/* ── SCROLLBARS ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }
::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; }

/* ── ANIMATIONS ── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes bounce {
    0%,80%,100% { transform: scale(0); }
    40% { transform: scale(1); }
}
@keyframes pulse-ring {
    0%   { box-shadow: 0 0 0 0 rgba(61,126,255,0.3); }
    70%  { box-shadow: 0 0 0 6px rgba(61,126,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(61,126,255,0); }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

.view-section { animation: fadeUp 0.25s ease-out; }