/* ===== Reset & Base ===== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --clr-primary: #c0392b;
    --clr-primary-light: #e74c3c;
    --clr-accent: #f39c12;
    --clr-bg: #faf7f2;
    --clr-card: #ffffff;
    --clr-text: #2c3e50;
    --clr-text-light: #7f8c8d;
    --clr-border: #e8e2d9;
    --clr-badge: #fdf2e9;
    --radius: 16px;
    --shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.12);
    --transition: 0.3s ease;
}

body {
    font-family:
        "Segoe UI",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;
    background: var(--clr-bg);
    color: var(--clr-text);
    line-height: 1.6;
    min-height: 100vh;
}

/* ===== Loader ===== */
#loader {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--clr-bg);
    z-index: 1000;
    transition:
        opacity 0.5s ease,
        visibility 0.5s ease;
}

#loader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.spinner {
    width: 56px;
    height: 56px;
    border: 5px solid var(--clr-border);
    border-top-color: var(--clr-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

#loader p {
    margin-top: 16px;
    font-size: 1.05rem;
    color: var(--clr-text-light);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ===== Error ===== */
#error {
    display: none;
    max-width: 520px;
    margin: 80px auto;
    background: #fdecea;
    border-left: 5px solid var(--clr-primary);
    padding: 24px 28px;
    border-radius: var(--radius);
    text-align: center;
}

#error h2 {
    color: var(--clr-primary);
    margin-bottom: 8px;
}
#error p {
    color: #6b2c24;
}

/* ===== Layout ===== */
.container {
    margin: 0 auto;
    padding: 32px 20px 64px;
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.6s ease,
        transform 0.6s ease;
}

.container.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===== Hero (base) ===== */
.hero {
    background: linear-gradient(
        135deg,
        var(--clr-primary) 0%,
        var(--clr-primary-light) 100%
    );
    color: #fff;
    border-radius: var(--radius);
    margin-bottom: 28px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

.hero::after {
    position: absolute;
    font-size: 9rem;
    right: -16px;
    bottom: -28px;
    opacity: 0.12;
    pointer-events: none;
}

.hero h1 {
    font-weight: 800;
    letter-spacing: -0.5px;
}

/* ===== Footer (base) ===== */
.footer {
    text-align: center;
    color: var(--clr-text-light);
    font-size: 0.85rem;
}

/* ===== Print (base) ===== */
@media print {
    body {
        background: #fff;
    }
    .hero {
        box-shadow: none;
    }
}