:root {
    --brand-cream: #fff8e8;
    --brand-cream-deep: #f5e5c7;
    --brand-orange: #d96d12;
    --brand-orange-dark: #d96d12;
    --brand-purple: #d96d12;
    --brand-ink: #2f2926;
    --brand-muted: #766b64;
    --brand-line: #eadcc9;
}

body {
    background: radial-gradient(circle at top right, #fffdf7 0, var(--brand-cream) 42%, #f5e5c7 100%) !important;
    color: var(--brand-ink) !important;
    font-family: "Trebuchet MS", Arial, sans-serif !important;
    min-height: 100vh;
}

.site-header {
    background: rgba(255, 255, 255, 0.94) !important;
    border-bottom: 1px solid var(--brand-line) !important;
    box-shadow: 0 4px 18px rgba(70, 45, 30, 0.06);
    padding: 12px 0 !important;
}

.site-logo {
    max-width: 190px !important;
    max-height: 64px !important;
}

.header-title {
    color: var(--brand-purple) !important;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
}

.brand-box,
.quiz-card,
.card {
    border: 1px solid var(--brand-line) !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 45px rgba(70, 45, 30, 0.09) !important;
}

.form-control {
    border: 1px solid #d9c8b4;
    border-radius: 10px;
    padding: 0.72rem 0.85rem;
}

.form-control:focus {
    border-color: var(--brand-orange);
    box-shadow: 0 0 0 0.2rem rgba(242, 140, 40, 0.16);
}

.btn-primary {
    background: linear-gradient(135deg, var(--brand-orange), var(--brand-orange-dark)) !important;
    border: 0 !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(217, 109, 18, 0.2);
}

.bg-primary,
.alert-info {
    background-color: var(--brand-orange-dark) !important;
    border-color: var(--brand-orange-dark) !important;
    color: #fff !important;
}

.btn-outline-secondary {
    border-color: var(--brand-purple) !important;
    color: var(--brand-purple) !important;
    border-radius: 10px !important;
}

.btn-outline-secondary:hover {
    background: var(--brand-purple) !important;
    color: #fff !important;
}

h1, h2, h3, h4 {
    color: var(--brand-ink);
    font-weight: 800;
}

.text-muted {
    color: var(--brand-muted) !important;
}

.table thead th {
    background: var(--brand-orange-dark);
    color: #fff;
    border: 0;
}

.table tbody tr:hover {
    background: #fff8ee;
}