:root {
    --accent-primary: #b4232d;
    --accent-warm: #d9a441;
    --bg-card: #ffffff;
    --text-primary: #172033;
}

body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.13), transparent 35%),
        radial-gradient(circle at bottom right, rgba(217, 164, 65, 0.14), transparent 32%),
        linear-gradient(145deg, #edf4fb 0%, #f8fafc 55%, #eef3f8 100%);
}

.display-header {
    min-height: 92px;
    padding-inline: clamp(24px, 3vw, 58px);
    border-bottom: 1px solid #d8e0e9;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 28px rgba(23, 32, 51, 0.08);
    backdrop-filter: blur(14px);
}

.header-brand-mark {
    width: 56px;
    height: 56px;
}

.display-brand-copy {
    display: grid;
    gap: 2px;
}

.display-brand-copy > span {
    color: var(--accent-primary);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.academy-name {
    color: var(--text-primary);
    font-family: inherit;
    font-weight: 720;
    letter-spacing: -0.025em;
}

.current-date {
    color: #526176;
}

.clock {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.display-container {
    padding: clamp(22px, 3vw, 52px);
}

.panel {
    border: 1px solid #dce3eb;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 24px 60px rgba(23, 32, 51, 0.14);
}

.photo-collage-panel {
    background:
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.12), transparent 34%),
        radial-gradient(circle at bottom right, rgba(217, 164, 65, 0.14), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #eef5fd 100%);
}

.photo-collage-item {
    border-color: #d8e0e9;
    background: #f8fafc;
    box-shadow: 0 14px 32px rgba(23, 32, 51, 0.12);
}

.photo-collage-item.is-empty {
    border-color: #c8d3df;
    background:
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.1), transparent 48%),
        linear-gradient(135deg, #f8fafc, #eaf1f8);
    box-shadow: inset 0 0 0 1px rgba(23, 32, 51, 0.04);
}

.slideshow-image {
    background: #f4f7fa;
}

.photo-collage-caption {
    color: var(--text-primary);
    background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.78) 26%, rgba(255, 255, 255, 0.96) 100%);
}

.panel-header {
    border-bottom-color: #e3e7ec;
}

.panel-title,
.news-title,
.academy-panel-copy h2,
.belt-test-title,
.agenda-event-heading h3,
.standard-card h3 {
    font-family: inherit;
    font-weight: 760;
    letter-spacing: -0.035em;
}

.panel-icon,
.agenda-event-date {
    border-radius: 10px;
    background: var(--accent-primary);
}

.agenda-event-date,
.agenda-event-date .agenda-event-month,
.agenda-event-date .agenda-event-day,
.agenda-event-date .agenda-event-weekday {
    color: #fff;
}

.academy-panel {
    position: absolute;
    overflow: hidden;
    background:
        radial-gradient(circle at 90% 15%, rgba(180, 35, 45, 0.12), transparent 35%),
        radial-gradient(circle at 15% 100%, rgba(217, 164, 65, 0.2), transparent 35%),
        linear-gradient(135deg, #ffffff 0%, #eef5fd 100%);
    border-top: 8px solid var(--accent-primary);
    color: var(--text-primary);
}

.academy-panel-shell {
    position: relative;
    z-index: 1;
    grid-template-columns: minmax(220px, 0.8fr) minmax(420px, 1.2fr);
    justify-items: start;
    gap: clamp(28px, 5vw, 80px);
    padding: clamp(30px, 5vw, 86px);
    text-align: left;
}

.academy-panel-mark {
    position: relative;
    z-index: 1;
    width: min(30vw, 360px);
}

.academy-panel-copy {
    z-index: 2;
    justify-items: start;
}

.academy-panel-copy h2 {
    color: var(--text-primary);
    text-align: left;
}

.academy-panel-mascot {
    position: absolute;
    right: 6vw;
    bottom: -12vh;
    z-index: 0;
    width: min(48vw, 720px);
    opacity: 0.08;
    filter: saturate(0.85) contrast(1.05);
}

.academy-panel-message,
.academy-panel-location {
    color: #526176;
}

.academy-panel-kicker {
    color: var(--accent-primary);
}

.news-cta {
    border-radius: 8px;
    background: var(--accent-primary);
}

.floating-qr {
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}

.panel-indicators button {
    background: #aab6c5;
}

.panel-indicators button.active {
    background: var(--accent-primary);
}

.display-alert-banner {
    background: var(--accent-primary);
}

@media (max-aspect-ratio: 4/3) {
    .academy-panel-shell {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .academy-panel-copy {
        justify-items: center;
    }

    .academy-panel-copy h2 {
        text-align: center;
    }
}