body {
    background:
        radial-gradient(ellipse 80% 60% at 50% -20%, rgba(13, 148, 136, 0.04) 0%, transparent 70%),
        radial-gradient(ellipse 60% 50% at 80% 90%, rgba(245, 158, 11, 0.03) 0%, transparent 60%),
        var(--paper-white);
}

.app {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.page {
    flex: 1;
    padding: 0;
    overflow-y: auto;
    animation: pageIn 0.6s var(--ease-out) forwards;
}

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

.page-exit {
    animation: pageOut 0.35s var(--ease-in-out) forwards;
}

@keyframes pageOut {
    to {
        opacity: 0;
        transform: translateY(-8px);
    }
}

.text-center { text-align: center; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }