:root {
    color: #152237;
    background: #123c64;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body { margin: 0; min-width: 320px; background: linear-gradient(120deg, #123c64, #165f7a); }

.container { width: min(1040px, calc(100% - 32px)); margin: 0 auto; padding: 32px 0 48px; }

.page-header, .section-heading, .arrival-title-row { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }

.page-header { padding: 4px 4px 28px; align-items: center; }

.eyebrow { margin: 0 0 7px; color: #54708d; font-size: .72rem; font-weight: 800; letter-spacing: .13em; }
.page-header { color: #f6fbff; }
.page-header .eyebrow { color: #b9d7e9; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 6px; font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -.05em; }
h2 { margin-bottom: 0; font-size: clamp(1.3rem, 3vw, 1.75rem); letter-spacing: -.03em; }
h3 { margin-bottom: 3px; font-size: 1.25rem; letter-spacing: -.02em; }
.subtitle, .last-updated, footer { color: #63758a; }
.page-header .subtitle, footer { color: #c7dae8; }
.subtitle { margin-bottom: 0; }
.data-status { flex: none; border-radius: 999px; padding: 9px 13px; color: #17673f; background: #d9f7e7; font-size: .82rem; font-weight: 750; }

main { display: grid; gap: 22px; }
section { border: 1px solid #dce5ee; border-radius: 18px; padding: 26px; background: rgba(255,255,255,.88); box-shadow: 0 14px 35px rgba(40, 63, 90, .08); }
.section-heading { margin-bottom: 20px; align-items: end; }
.last-updated, .arrival-count { margin-bottom: 3px; font-size: .86rem; font-weight: 650; }
.arrival-count { color: #47637f; }

.next-arrival { min-height: 165px; display: flex; gap: 24px; align-items: center; border-radius: 14px; padding: 22px; color: white; background: linear-gradient(120deg, #123c64, #165f7a); }
.next-photo-wrap, .card-photo-wrap { flex: none; width: 126px; height: 96px; overflow: hidden; border-radius: 11px; background: rgba(255,255,255,.12); }
.next-photo, .aircraft-photo { width: 100%; height: 100%; object-fit: cover; }
.next-copy, .arrival-card-main { min-width: 0; flex: 1; }
.callsign { margin-bottom: 2px; font-size: 1.65rem; font-weight: 800; letter-spacing: .01em; }
.airline { margin-bottom: 7px; color: #63758a; font-size: .92rem; font-weight: 650; }
.next-arrival .airline, .next-arrival .aircraft-model { color: #c7dae8; }
.route { margin-bottom: 7px; color: #31516e; font-weight: 700; }
.next-arrival .route { color: #f2f8fc; }
.route span { margin: 0 5px; color: #6e8aa3; }
.aircraft-model { margin-bottom: 14px; color: #536c83; font-size: .89rem; }
.approach-badge { flex: none; border-radius: 999px; padding: 6px 10px; color: #255d44; background: #dff6e8; font-size: .76rem; font-weight: 800; white-space: nowrap; }
.next-arrival .approach-badge { color: #eaf7ff; background: rgba(255,255,255,.16); }
.approach-badge.low { color: #7b5606; background: #fff3d5; }
.approach-badge.none { color: #675d6d; background: #ece7ef; }

.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.metrics div { min-width: 0; }
.metrics span { display: block; margin-bottom: 3px; color: #70839a; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.metrics strong { display: block; font-size: .9rem; white-space: nowrap; }
.next-arrival .metrics span { color: #a9c6d9; }
.hero-metrics strong { font-size: .98rem; }

.aircraft-list { display: grid; gap: 12px; }
.arrival-card { display: flex; gap: 16px; align-items: center; border: 1px solid #e0e8f0; border-radius: 13px; padding: 15px; background: #fff; transition: transform .16s ease, box-shadow .16s ease; }
.arrival-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(33, 59, 86, .08); }
.card-photo-wrap { width: 100px; height: 76px; background: #e7eef5; }
.loading, .no-aircraft { margin: 0; padding: 32px; color: #687c91; text-align: center; }
.error { border-radius: 10px; padding: 14px; color: #8e1f35; background: #fce8ec; }
footer { padding: 22px 5px 0; font-size: .8rem; text-align: center; }
footer a { color: #eaf7ff; font-weight: 700; text-decoration: none; }
footer a:hover { text-decoration: underline; }

@media (max-width: 700px) {
    .container { width: min(100% - 20px, 620px); padding-top: 18px; }
    .page-header { align-items: flex-start; padding-bottom: 20px; }
    .data-status { font-size: .7rem; }
    section { padding: 18px; }
    .next-arrival { align-items: flex-start; padding: 16px; }
    .next-photo-wrap { width: 82px; height: 82px; }
    .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .card-photo-wrap { width: 74px; height: 64px; }
    .arrival-card { align-items: flex-start; padding: 13px; }
}

@media (max-width: 440px) {
    .page-header, .section-heading { flex-direction: column; align-items: flex-start; gap: 11px; }
    .next-arrival { gap: 12px; }
    .next-photo-wrap { width: 65px; height: 65px; }
    .callsign { font-size: 1.35rem; }
    .arrival-title-row { gap: 10px; }
    .approach-badge { padding: 5px 8px; font-size: .68rem; }
    .card-photo-wrap { width: 56px; height: 56px; }
}