/* ═══════════════════════════════════════════════════════════════════
   Airport Streams 2.0 — Design System
   Dark aviation theme: Flightradar24 × broadcast graphics × premium NZ aviation
═══════════════════════════════════════════════════════════════════ */

/* ── Variables ──────────────────────────────────────────────────── */
:root {
  /* Brand colours */
  --as-red:         #C0392B;
  --as-red-bright:  #E74C3C;
  --as-red-dim:     #922B21;

  /* Background scale */
  --as-bg-900:      #0D0D0D;   /* page background */
  --as-bg-800:      #141414;   /* card background */
  --as-bg-700:      #1A1A1A;   /* secondary card */
  --as-bg-600:      #222222;   /* table rows, inputs */
  --as-bg-500:      #2C2C2C;   /* hover states */

  /* Text scale */
  --as-text-100:    #FFFFFF;
  --as-text-200:    #E8E8E8;
  --as-text-300:    #AAAAAA;
  --as-text-400:    #666666;

  /* Status */
  --as-live:        #E74C3C;
  --as-success:     #27AE60;
  --as-warning:     #F39C12;
  --as-danger:      #C0392B;
  --as-info:        #2980B9;

  /* Typography */
  --as-font-ui:     'Segoe UI', system-ui, -apple-system, sans-serif;
  --as-font-mono:   'Courier New', 'Lucida Console', monospace;

  /* Spacing */
  --as-space-xs:    0.25rem;
  --as-space-sm:    0.5rem;
  --as-space-md:    1rem;
  --as-space-lg:    1.5rem;
  --as-space-xl:    2rem;
  --as-space-2xl:   3rem;
  --as-space-3xl:   4rem;

  /* Layout */
  --as-max-width:   1320px;
  --as-nav-height:  64px;

  /* Borders */
  --as-border:      1px solid rgba(255,255,255,0.08);
  --as-radius:      6px;
  --as-radius-lg:   12px;

  /* Transitions */
  --as-transition:  180ms ease;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--as-font-ui);
  background: var(--as-bg-900);
  color: var(--as-text-200);
  line-height: 1.6;
  min-height: 100vh;
  padding-top: var(--as-nav-height);
}

/* Links — NOT red by default */
a { color: var(--as-text-200); text-decoration: none; transition: color var(--as-transition); }
a:hover { color: var(--as-text-100); }

img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; }

/* Utility — red is earned, not default */
.as-red { color: var(--as-red); }
.as-mono { font-family: var(--as-font-mono); letter-spacing: 0.05em; }

/* ── Navigation ─────────────────────────────────────────────────── */
.as-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--as-nav-height);
  background: rgba(13,13,13,0.97);
  backdrop-filter: blur(12px);
  border-bottom: var(--as-border);
  z-index: 1000;
}

.as-nav__inner {
  max-width: var(--as-max-width);
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--as-space-lg);
  padding: 0 var(--as-space-lg);
}

.as-nav__logo { display: flex; align-items: center; flex-shrink: 0; }
.as-nav__logo-text {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--as-text-100);
}

.as-nav__links {
  display: flex;
  align-items: center;
  gap: var(--as-space-xs);
  flex: 1;
}

.as-nav__link {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--as-text-300);
  padding: var(--as-space-sm) var(--as-space-md);
  border-radius: var(--as-radius);
  transition: color var(--as-transition), background var(--as-transition);
}
.as-nav__link:hover { color: var(--as-text-100); background: var(--as-bg-600); }
.as-nav__link.is-active { color: var(--as-text-100); }

.as-nav__right {
  display: flex;
  align-items: center;
  gap: var(--as-space-md);
  margin-left: auto;
}

.as-nav__watch { display: flex; }

/* User avatar button */
.as-nav__avatar-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--as-bg-600);
  border: 1px solid var(--as-bg-500);
  color: var(--as-text-200);
  font-size: 0.85rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}

.as-nav__user-menu { position: relative; }

.as-nav__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--as-bg-700);
  border: var(--as-border);
  border-radius: var(--as-radius-lg);
  padding: var(--as-space-sm);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  z-index: 200;
}

.as-nav__dropdown-item {
  display: block;
  padding: 0.5rem var(--as-space-md);
  border-radius: var(--as-radius);
  font-size: 0.875rem;
  color: var(--as-text-200);
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  transition: background var(--as-transition);
}
.as-nav__dropdown-item:hover { background: var(--as-bg-600); color: var(--as-text-100); }
.as-nav__dropdown-divider { height: 1px; background: rgba(255,255,255,0.08); margin: var(--as-space-sm) 0; }
.as-nav__logout-form { margin: 0; }

/* Hamburger (mobile) */
.as-nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 6px;
}
.as-nav__burger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--as-text-200);
  border-radius: 2px;
  transition: var(--as-transition);
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.as-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--as-space-sm);
  padding: 0.6rem 1.25rem;
  border-radius: var(--as-radius);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--as-transition);
  white-space: nowrap;
}

.as-btn--primary {
  background: var(--as-red);
  color: #fff;
}
.as-btn--primary:hover { background: var(--as-red-bright); color: #fff; }

.as-btn--ghost {
  background: transparent;
  color: var(--as-text-200);
  border: 1px solid rgba(255,255,255,0.2);
}
.as-btn--ghost:hover { border-color: rgba(255,255,255,0.5); color: var(--as-text-100); }

.as-btn--live {
  background: var(--as-red);
  color: #fff;
  animation: live-pulse 2s infinite;
}
.as-btn--live:hover { background: var(--as-red-bright); color: #fff; }

.as-btn--sm  { padding: 0.4rem 0.9rem; font-size: 0.75rem; }
.as-btn--lg  { padding: 0.85rem 1.75rem; font-size: 0.9rem; }

/* ── Badges ──────────────────────────────────────────────────────── */
.as-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.as-badge--live        { background: var(--as-red);     color: #fff; }
.as-badge--approaching { background: var(--as-warning);  color: #000; }
.as-badge--landing     { background: var(--as-success);  color: #fff; }
.as-badge--captured    { background: var(--as-success);  color: #fff; }
.as-badge--scheduled   { background: var(--as-info);     color: #fff; }
.as-badge--cancelled   { background: var(--as-bg-500);   color: var(--as-text-300); }

/* ── Live dot ────────────────────────────────────────────────────── */
.as-live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--as-red);
  animation: live-pulse 1.4s infinite;
  flex-shrink: 0;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ── Layout helpers ──────────────────────────────────────────────── */
.as-container {
  max-width: var(--as-max-width);
  margin: 0 auto;
  padding: 0 var(--as-space-lg);
}

.as-section {
  padding: var(--as-space-3xl) 0;
}
.as-section--dark   { background: var(--as-bg-800); }
.as-section--cta    { background: linear-gradient(135deg, #1a0a0a 0%, #2a0e0e 100%); }

.as-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--as-space-xl);
}
.as-section__heading {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--as-text-300);
  text-transform: uppercase;
}
.as-section__more {
  font-size: 0.8rem;
  color: var(--as-text-400);
  transition: color var(--as-transition);
}
.as-section__more:hover { color: var(--as-red); }

/* ── Hero ────────────────────────────────────────────────────────── */
/* ── Cinematic Hero ──────────────────────────────────────────────── */
.as-hero {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Full-bleed background image */
.as-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  background-color: #1a0808;
  transform: scale(1.04);
  transition: transform 8s ease;
}
.as-hero:hover .as-hero__bg { transform: scale(1.0); }

/* Multi-layer gradient overlay — dark bottom for legibility, subtle top */
.as-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top,
      rgba(0,0,0,0.97) 0%,
      rgba(0,0,0,0.82) 20%,
      rgba(0,0,0,0.45) 50%,
      rgba(0,0,0,0.25) 75%,
      rgba(0,0,0,0.40) 100%
    );
}

/* Vignette */
.as-hero__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}

/* Main content — centred vertically in the image area */
.as-hero__inner {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(var(--as-nav-height) + 3rem) var(--as-space-lg) 2rem;
  text-align: center;
  min-height: 70vh;
}

.as-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(192,57,43,0.15);
  border: 1px solid rgba(192,57,43,0.6);
  border-radius: 999px;
  padding: 6px 16px 6px 12px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: #ff6b6b;
  backdrop-filter: blur(8px);
  margin-bottom: 1rem;
}

.as-hero__eyebrow {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.25em;
  color: rgba(255,255,255,0.5);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

.as-hero__airport {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 1.5rem;
}
.as-hero__airport-code {
  font-size: clamp(4rem, 12vw, 8rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  color: #fff;
  font-family: var(--as-font-mono);
  line-height: 0.9;
  text-shadow: 0 4px 40px rgba(0,0,0,0.6);
}
.as-hero__airport-name {
  font-size: clamp(1.1rem, 3vw, 1.75rem);
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.08em;
  font-weight: 600;
  text-shadow: 0 2px 20px rgba(0,0,0,0.8);
}

.as-hero__tagline {
  font-size: clamp(0.9rem, 1.8vw, 1.1rem);
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  margin-bottom: 2rem;
  font-weight: 600;
}

.as-hero__player {
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16/9;
  border-radius: var(--as-radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
  margin-bottom: 1.5rem;
}
.as-hero__player iframe { width: 100%; height: 100%; border: none; }

.as-hero__meta {
  display: flex;
  align-items: center;
  gap: var(--as-space-md);
  margin-bottom: 2rem;
}
.as-hero__viewers {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.as-hero__viewers svg { width: 16px; height: 16px; fill: rgba(255,255,255,0.4); }

.as-hero__actions {
  display: flex;
  gap: var(--as-space-md);
  flex-wrap: wrap;
  justify-content: center;
}

.as-hero__next-label {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.25em;
  color: rgba(255,255,255,0.4);
  margin-bottom: 0.5rem;
}
.as-hero__date {
  font-size: clamp(0.95rem, 2vw, 1.2rem);
  color: rgba(255,255,255,0.65);
  margin-bottom: 2rem;
  letter-spacing: 0.04em;
}

/* ── Info strip — matches the image's bottom bar ─────────────────── */
.as-hero__strip {
  position: relative;
  z-index: 2;
  background: rgba(0,0,0,0.75);
  border-top: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.as-hero__strip-inner {
  max-width: var(--as-max-width);
  margin: 0 auto;
  padding: 0 var(--as-space-lg);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-left: 1px solid rgba(255,255,255,0.06);
}

.as-hero__strip-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem var(--as-space-lg);
  border-right: 1px solid rgba(255,255,255,0.06);
}

.as-hero__strip-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--as-red);
  border: 1px solid rgba(192,57,43,0.35);
  border-radius: 8px;
  background: rgba(192,57,43,0.08);
}

.as-hero__strip-label {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  display: block;
  line-height: 1;
  margin-bottom: 0.25rem;
}

.as-hero__strip-value {
  font-size: 0.875rem;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.02em;
  line-height: 1.2;
}

/* Tagline bar at the very bottom */
.as-hero__tagline-bar {
  background: rgba(0,0,0,0.5);
  border-top: 1px solid rgba(192,57,43,0.3);
  padding: .75rem var(--as-space-lg);
  text-align: center;
  position: relative;
  z-index: 2;
}
.as-hero__tagline-bar p {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .4em;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
}
.as-hero__tagline-bar span { color: var(--as-red); }

@media (max-width: 768px) {
  .as-hero__strip-inner { grid-template-columns: 1fr 1fr; }
  .as-hero { min-height: 100svh; }
  .as-hero__airport-code { font-size: clamp(3rem, 20vw, 5rem); }
}
@media (max-width: 480px) {
  .as-hero__strip-inner { grid-template-columns: 1fr; }
  .as-hero__strip-item { padding: 1rem var(--as-space-lg); }
}

/* ── Countdown ───────────────────────────────────────────────────── */
.as-countdown {
  display: flex;
  align-items: center;
  gap: var(--as-space-md);
  margin-bottom: 1.5rem;
}
.as-countdown__block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--as-radius-lg);
  padding: 1rem 1.25rem;
  backdrop-filter: blur(12px);
  min-width: 80px;
}
.as-countdown__num {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 900;
  font-family: var(--as-font-mono);
  color: #fff;
  line-height: 1;
  min-width: 2ch;
  text-align: center;
  text-shadow: 0 2px 20px rgba(0,0,0,0.5);
}
.as-countdown__label {
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.4);
  font-weight: 700;
  text-transform: uppercase;
}
.as-countdown__sep {
  font-size: 2rem;
  font-weight: 900;
  color: rgba(255,255,255,0.2);
  margin-bottom: 1.5rem;
}
.as-countdown__sep { font-size: 2rem; color: var(--as-text-400); align-self: flex-start; padding-top: 0.25rem; }

/* ── Conditions grid ─────────────────────────────────────────────── */
.as-conditions__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--as-space-md);
}
.as-conditions__cell {
  background: var(--as-bg-800);
  border: var(--as-border);
  border-radius: var(--as-radius-lg);
  padding: var(--as-space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  text-align: center;
}
.as-conditions__icon  { font-size: 1.5rem; }
.as-conditions__value { font-size: 1.1rem; font-weight: 700; color: var(--as-text-100); }
.as-conditions__label { font-size: 0.7rem; color: var(--as-text-400); letter-spacing: 0.08em; }

/* ── Flight cards ────────────────────────────────────────────────── */
.as-flight-list { display: flex; flex-direction: column; gap: var(--as-space-sm); }

.as-flight-card {
  display: grid;
  grid-template-columns: 90px 1fr 1fr 80px 80px;
  align-items: center;
  gap: var(--as-space-md);
  background: var(--as-bg-800);
  border: var(--as-border);
  border-radius: var(--as-radius);
  padding: var(--as-space-md) var(--as-space-lg);
  transition: background var(--as-transition);
}
.as-flight-card:hover { background: var(--as-bg-700); }
.as-flight-card__number { font-size: 1rem; font-weight: 700; }
.as-flight-card__airline { font-size: 0.875rem; color: var(--as-text-300); }
.as-flight-card__type  { font-size: 0.8rem; color: var(--as-text-400); }
.as-flight-card__route { font-size: 0.8rem; color: var(--as-text-300); }
.as-flight-card__eta   { text-align: right; }

/* ── Stream cards ────────────────────────────────────────────────── */
.as-stream-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--as-space-md);
}
.as-stream-card {
  background: var(--as-bg-800);
  border: var(--as-border);
  border-radius: var(--as-radius-lg);
  padding: var(--as-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--as-space-sm);
  transition: background var(--as-transition), transform var(--as-transition);
}
.as-stream-card:hover { background: var(--as-bg-700); transform: translateY(-2px); }
.as-stream-card__airport { font-size: 1.4rem; font-weight: 900; color: var(--as-text-100); }
.as-stream-card__name  { font-size: 0.85rem; color: var(--as-text-300); }
.as-stream-card__date  { font-size: 0.9rem; color: var(--as-text-200); font-weight: 600; margin-top: var(--as-space-sm); }
.as-stream-card__time  { font-size: 0.85rem; color: var(--as-text-300); }

/* ── Video grid ──────────────────────────────────────────────────── */
.as-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--as-space-md);
}
.as-video-card {
  display: flex;
  flex-direction: column;
  gap: var(--as-space-sm);
  border-radius: var(--as-radius-lg);
  overflow: hidden;
  background: var(--as-bg-700);
  border: var(--as-border);
  transition: transform var(--as-transition);
}
.as-video-card:hover { transform: translateY(-2px); color: inherit; }
.as-video-card__thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--as-bg-600);
}
.as-video-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.as-video-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.4);
  font-size: 2rem;
  color: rgba(255,255,255,0.9);
  opacity: 0;
  transition: opacity var(--as-transition);
}
.as-video-card:hover .as-video-card__play { opacity: 1; }
.as-video-card__title { font-size: 0.875rem; font-weight: 600; color: var(--as-text-200); padding: 0 var(--as-space-md); }
.as-video-card__date  { font-size: 0.75rem; color: var(--as-text-400); padding: 0 var(--as-space-md) var(--as-space-md); }

/* ── Airport cards ───────────────────────────────────────────────── */
.as-airport-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--as-space-md);
}
.as-airport-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--as-radius-lg);
  overflow: hidden;
  background: var(--as-bg-800);
  border: var(--as-border);
  transition: transform var(--as-transition);
}
.as-airport-card:hover { transform: translateY(-2px); }
.as-airport-card__img {
  aspect-ratio: 16/9;
  background-size: cover;
  background-position: center;
  background-color: var(--as-bg-600);
}
.as-airport-card__info {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: var(--as-space-lg);
}
.as-airport-card__code { font-size: 1.4rem; font-weight: 900; color: var(--as-text-100); }
.as-airport-card__name { font-size: 0.95rem; color: var(--as-text-200); }
.as-airport-card__city { font-size: 0.8rem; color: var(--as-text-400); }

/* ── Stats ───────────────────────────────────────────────────────── */
.as-stats-section { border-top: var(--as-border); border-bottom: var(--as-border); }
.as-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--as-space-xl);
  text-align: center;
}
.as-stat__number {
  display: block;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  color: var(--as-text-100);
  font-family: var(--as-font-mono);
  line-height: 1.1;
}
.as-stat__label { font-size: 0.75rem; letter-spacing: 0.1em; color: var(--as-text-400); }

/* ── CTA section ─────────────────────────────────────────────────── */
.as-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--as-space-lg);
  max-width: 640px;
}
.as-cta__icon   { font-size: 3rem; }
.as-cta__heading { font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 900; letter-spacing: 0.08em; }
.as-cta__body   { color: var(--as-text-300); line-height: 1.7; }

/* ── Live Centre layout ──────────────────────────────────────────── */
.as-live-centre {
  display: grid;
  grid-template-columns: 1fr 360px;
  min-height: calc(100vh - var(--as-nav-height));
  align-items: start;
}

.as-live-centre__player-col { padding: var(--as-space-lg); }

.as-player-wrap {
  position: relative;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: var(--as-radius-lg);
  overflow: hidden;
}
.as-player-wrap iframe { width: 100%; height: 100%; border: none; }

.as-live-centre__player-meta {
  display: flex;
  align-items: center;
  gap: var(--as-space-md);
  margin-top: var(--as-space-md);
}

.as-live-centre__viewers { font-size: 0.875rem; color: var(--as-text-300); }

.as-live-centre__sidebar {
  border-left: var(--as-border);
  height: calc(100vh - var(--as-nav-height));
  overflow-y: auto;
  background: var(--as-bg-800);
  position: sticky;
  top: var(--as-nav-height);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Live panels */
.as-live-panel {
  padding: var(--as-space-lg);
  border-bottom: var(--as-border);
}
.as-live-panel__heading {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  color: var(--as-text-400);
  margin-bottom: var(--as-space-md);
}
.as-live-panel__airport-code { font-size: 1.8rem; font-weight: 900; font-family: var(--as-font-mono); }
.as-live-panel__airport-name { font-size: 0.95rem; color: var(--as-text-300); }
.as-live-panel__location { font-size: 0.8rem; color: var(--as-text-400); margin-top: 0.4rem; }
.as-live-panel__link { display: block; font-size: 0.8rem; color: var(--as-text-400); margin-top: var(--as-space-md); }
.as-live-panel__link:hover { color: var(--as-red); }

/* Weather rows */
.as-weather-grid { display: flex; flex-direction: column; gap: 0.4rem; }
.as-weather-row { display: flex; justify-content: space-between; align-items: center; }
.as-weather-row__label { font-size: 0.75rem; color: var(--as-text-400); }
.as-weather-row__val   { font-size: 0.85rem; color: var(--as-text-200); }

/* Runway display */
.as-runway-display {
  font-size: 2rem;
  font-weight: 900;
  color: var(--as-text-100);
}

/* Approach rows */
.as-approach-row {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  align-items: center;
  gap: var(--as-space-sm);
  padding: var(--as-space-sm) 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.as-approach-row--next { background: rgba(192,57,43,0.06); margin: 0 calc(-1 * var(--as-space-lg)); padding: var(--as-space-sm) var(--as-space-lg); }
.as-approach-row__flight { font-weight: 700; font-size: 0.9rem; }
.as-approach-row__detail { display: flex; flex-direction: column; gap: 0.1rem; }
.as-approach-row__detail span { font-size: 0.75rem; color: var(--as-text-300); }
.as-approach-row__type { color: var(--as-text-400) !important; }
.as-approach-row__min { font-size: 0.8rem; color: var(--as-text-400); }
.as-approach-row__eta { text-align: right; }

/* ── Companion mode ──────────────────────────────────────────────── */
body.as-companion-body { padding: 0; background: #000; }
.as-companion {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--as-space-2xl) var(--as-space-lg);
  gap: var(--as-space-lg);
}
.as-companion__label { font-size: 0.7rem; letter-spacing: 0.25em; color: var(--as-text-400); }
.as-companion__flight { font-size: clamp(3rem, 15vw, 7rem); font-weight: 900; font-family: var(--as-font-mono); color: var(--as-text-100); line-height: 1; }
.as-companion__airline { font-size: clamp(1rem, 4vw, 1.8rem); color: var(--as-text-300); letter-spacing: 0.1em; }
.as-companion__type   { font-size: clamp(0.9rem, 3vw, 1.3rem); color: var(--as-text-400); }
.as-companion__eta {
  font-size: clamp(2rem, 8vw, 4rem);
  font-weight: 900;
  font-family: var(--as-font-mono);
  color: var(--as-warning);
  padding: var(--as-space-md) var(--as-space-2xl);
  background: rgba(243,156,18,0.1);
  border-radius: var(--as-radius-lg);
}
.as-companion__eta--imminent { color: var(--as-red); background: rgba(192,57,43,0.15); }
.as-companion__offline { font-size: 1.2rem; color: var(--as-text-400); }
.as-companion__queue { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 0.5rem; margin-top: var(--as-space-lg); }
.as-companion__queue-item { display: flex; justify-content: space-between; align-items: center; background: var(--as-bg-800); border-radius: var(--as-radius); padding: 0.6rem var(--as-space-md); font-size: 0.9rem; }

/* ── Footer ──────────────────────────────────────────────────────── */
.as-footer {
  background: var(--as-bg-800);
  border-top: var(--as-border);
  padding: var(--as-space-3xl) 0 0;
}
.as-footer__inner {
  max-width: var(--as-max-width);
  margin: 0 auto;
  padding: 0 var(--as-space-lg);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: var(--as-space-2xl);
}
.as-footer__logo { font-size: 1rem; font-weight: 800; letter-spacing: 0.08em; color: var(--as-text-100); display: block; margin-bottom: var(--as-space-md); }
.as-footer__tagline { font-size: 0.8rem; color: var(--as-text-400); line-height: 1.7; }
.as-footer__social { display: flex; gap: var(--as-space-md); margin-top: var(--as-space-lg); }
.as-footer__social-link {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--as-bg-600);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--as-text-300);
  transition: background var(--as-transition);
}
.as-footer__social-link:hover { background: var(--as-red); color: #fff; }
.as-footer__heading { font-size: 0.65rem; font-weight: 800; letter-spacing: 0.18em; color: var(--as-text-400); margin-bottom: var(--as-space-md); }
.as-footer__col { display: flex; flex-direction: column; gap: var(--as-space-sm); }
.as-footer__link { font-size: 0.85rem; color: var(--as-text-400); }
.as-footer__link:hover { color: var(--as-text-200); }
.as-footer__bottom {
  margin-top: var(--as-space-2xl);
  padding: var(--as-space-lg);
  border-top: var(--as-border);
  text-align: center;
  font-size: 0.75rem;
  color: var(--as-text-400);
}

/* ── Offline notice ──────────────────────────────────────────────── */
.as-offline-notice { padding: var(--as-space-3xl) 0; text-align: center; }
.as-offline-notice h1 { font-size: 1.8rem; margin-bottom: var(--as-space-md); }
.as-offline-notice p  { color: var(--as-text-300); margin-bottom: var(--as-space-lg); }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .as-live-centre { grid-template-columns: 1fr; }
  .as-live-centre__sidebar {
    position: static;
    height: auto;
    border-left: none;
    border-top: var(--as-border);
  }
  .as-footer__inner { grid-template-columns: 1fr 1fr; gap: var(--as-space-xl); }
}

@media (max-width: 768px) {
  .as-nav__links { display: none; }
  .as-nav__links.is-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: var(--as-nav-height);
    left: 0; right: 0;
    background: rgba(13,13,13,0.98);
    padding: var(--as-space-lg);
    border-bottom: var(--as-border);
    gap: var(--as-space-sm);
  }
  .as-nav__burger { display: flex; }
  .as-flight-card { grid-template-columns: 70px 1fr auto; }
  .as-flight-card__type, .as-flight-card__route { display: none; }
  .as-footer__inner { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .as-hero__actions { flex-direction: column; align-items: stretch; }
  .as-conditions__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════
   Additional component styles — Release 1 pages
═══════════════════════════════════════════════════════════════════ */

/* ── Page header ─────────────────────────────────────────────────── */
.as-page-header {
  padding: var(--as-space-2xl) 0 var(--as-space-xl);
  border-bottom: var(--as-border);
  background: var(--as-bg-800);
}
.as-page-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--as-space-lg);
  flex-wrap: wrap;
}
.as-page-header__title { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 900; }
.as-page-header__sub   { color: var(--as-text-400); margin-top: .4rem; font-size:.9rem; }

/* ── Airport switcher ────────────────────────────────────────────── */
.as-airport-switcher { display: flex; gap: var(--as-space-sm); flex-wrap: wrap; }
.as-airport-switcher__btn {
  display: flex; flex-direction: column; align-items: center;
  padding: .5rem .9rem;
  background: var(--as-bg-700); border: var(--as-border); border-radius: var(--as-radius);
  font-size: .75rem; color: var(--as-text-300);
  transition: all var(--as-transition);
}
.as-airport-switcher__btn .as-mono { font-size: .9rem; font-weight: 700; color: var(--as-text-200); }
.as-airport-switcher__btn.is-active { border-color: var(--as-red); color: var(--as-text-100); }
.as-airport-switcher__btn:hover { background: var(--as-bg-600); color: var(--as-text-100); }
.as-airport-switcher__city { font-size: .65rem; color: var(--as-text-400); }

/* ── Tabs ────────────────────────────────────────────────────────── */
.as-tabs { display: flex; gap: 2px; margin-bottom: var(--as-space-lg); border-bottom: var(--as-border); }
.as-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--as-text-400); padding: .75rem 1.25rem; font-size: .75rem;
  font-weight: 700; letter-spacing: .1em; cursor: pointer;
  transition: all var(--as-transition); margin-bottom: -1px;
  display: flex; align-items: center; gap: .5rem;
}
.as-tab:hover { color: var(--as-text-200); }
.as-tab.is-active { color: var(--as-text-100); border-bottom-color: var(--as-red); }
.as-tab__count { background: var(--as-bg-600); border-radius: 20px; padding: .1rem .4rem; font-size: .65rem; }

/* ── Flight table ────────────────────────────────────────────────── */
.as-ftable-wrap { overflow-x: auto; }
.as-ftable { width: 100%; border-collapse: collapse; }
.as-ftable thead tr { border-bottom: var(--as-border); }
.as-ftable th {
  text-align: left; padding: .6rem 1rem; font-size: .65rem;
  font-weight: 700; letter-spacing: .12em; color: var(--as-text-400);
}
.as-ftable__row { border-bottom: 1px solid rgba(255,255,255,.04); transition: background var(--as-transition); }
.as-ftable__row:hover { background: var(--as-bg-700); }
.as-ftable__row--camera { border-left: 2px solid var(--as-red); }
.as-ftable__row--captured { border-left: 2px solid var(--as-success); }
.as-ftable td { padding: .75rem 1rem; font-size: .875rem; vertical-align: middle; }
.as-ftable__flight-num { font-size: .95rem; font-weight: 700; }
.as-ftable__airline-logo { width: 24px; height: 24px; object-fit: contain; display: inline; margin-right: .4rem; vertical-align: middle; }
.as-ftable__airline-name { vertical-align: middle; }
.as-ftable__reg { display: block; font-size: .75rem; color: var(--as-text-400); }
.as-ftable__delay { font-size: .7rem; color: var(--as-warning); margin-left: .3rem; }
.as-ftable__camera-icon { font-size: .8rem; white-space: nowrap; }
.as-ftable__updated { font-size: .75rem; color: var(--as-text-400); margin-top: 1rem; text-align: right; }
.as-link-btn { background: none; border: none; color: var(--as-text-400); font-size: .75rem; cursor: pointer; text-decoration: underline; }

/* ── Schedule cards ──────────────────────────────────────────────── */
.as-schedule-list { display: flex; flex-direction: column; gap: var(--as-space-md); }
.as-schedule-card {
  display: flex; align-items: center; gap: var(--as-space-lg);
  background: var(--as-bg-800); border: var(--as-border); border-radius: var(--as-radius-lg);
  padding: var(--as-space-lg); transition: background var(--as-transition);
}
.as-schedule-card:hover { background: var(--as-bg-700); }
.as-schedule-card__date { display: flex; flex-direction: column; align-items: center; min-width: 48px; }
.as-schedule-card__day   { font-size: 1.8rem; font-weight: 900; line-height: 1; color: var(--as-text-100); }
.as-schedule-card__month { font-size: .7rem; letter-spacing: .1em; color: var(--as-text-400); }
.as-schedule-card__info  { flex: 1; display: flex; flex-direction: column; gap: .25rem; }
.as-schedule-card__airport { font-size: 1.2rem; font-weight: 800; }
.as-schedule-card__name    { font-size: .9rem; color: var(--as-text-300); }
.as-schedule-card__time    { font-size: .85rem; color: var(--as-text-400); }
.as-schedule-card__loc     { color: var(--as-text-400); font-size: .8rem; margin-left: .5rem; }
.as-schedule-card__countdown { font-size: .8rem; color: var(--as-text-400); margin-top: .25rem; }
.as-schedule-card__actions { display: flex; flex-direction: column; gap: .4rem; }
.as-stream-card__thumb { aspect-ratio:16/9; background-size:cover; background-position:center; background-color:var(--as-bg-600); border-radius:var(--as-radius) var(--as-radius) 0 0; }
.as-stream-card__stat { font-size:.75rem; color:var(--as-text-400); }

/* ── Stream archive ──────────────────────────────────────────────── */
.as-stream-archive-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: var(--as-space-md);
}
.as-archive-card { display:flex; flex-direction:column; background:var(--as-bg-800); border:var(--as-border); border-radius:var(--as-radius-lg); overflow:hidden; transition:transform var(--as-transition); }
.as-archive-card:hover { transform:translateY(-2px); }
.as-archive-card__thumb { aspect-ratio:16/9; background-size:cover; background-position:center; background-color:var(--as-bg-600); }
.as-archive-card__thumb--placeholder { display:flex; align-items:center; justify-content:center; font-size:2rem; color:var(--as-text-400); }
.as-archive-card__body { padding:var(--as-space-md); display:flex; flex-direction:column; gap:.25rem; }
.as-archive-card__airport { font-size:1rem; font-weight:800; }
.as-archive-card__title  { font-size:.875rem; color:var(--as-text-200); }
.as-archive-card__date   { font-size:.8rem; color:var(--as-text-400); }
.as-archive-card__stats  { display:flex; gap:var(--as-space-md); font-size:.75rem; color:var(--as-text-400); margin-top:.25rem; }
.as-pagination { display:flex; justify-content:center; gap:var(--as-space-md); margin-top:var(--as-space-2xl); }

/* ── Airport detail ──────────────────────────────────────────────── */
.as-airport-hero { position:relative; min-height:360px; display:flex; background-size:cover; background-position:center; }
.as-airport-hero--live::after { content:''; position:absolute; inset:0; border:2px solid var(--as-red); pointer-events:none; }
.as-airport-hero__overlay { flex:1; background:linear-gradient(to bottom, rgba(0,0,0,.3) 0%, rgba(13,13,13,.95) 100%); display:flex; align-items:flex-end; }
.as-airport-hero__inner { padding:var(--as-space-2xl) 0; display:flex; flex-direction:column; gap:var(--as-space-md); }
.as-airport-hero__title { font-size:clamp(1.8rem,4vw,3rem); font-weight:900; }
.as-airport-hero__code  { font-size:clamp(2.5rem,6vw,4.5rem); line-height:1; display:block; }
.as-airport-hero__sub   { color:var(--as-text-300); }
.as-airport-hero__stats { display:flex; gap:var(--as-space-xl); }
.as-airport-hero__stat  { display:flex; flex-direction:column; }
.as-airport-hero__stat-val { font-size:1.5rem; font-weight:800; color:var(--as-text-100); }
.as-airport-hero__stat-label { font-size:.7rem; color:var(--as-text-400); letter-spacing:.08em; }
.as-airport-detail-grid { display:grid; grid-template-columns:1fr 320px; gap:var(--as-space-2xl); padding:var(--as-space-2xl) 0; }
.as-airport-list-simple { display:flex; flex-direction:column; }
.as-airport-list-item { display:grid; grid-template-columns:60px 1fr 120px auto; align-items:center; gap:var(--as-space-md); padding:var(--as-space-md) 0; border-bottom:var(--as-border); }
.as-airport-list-item:hover { color:var(--as-text-100); }
.as-airport-list-item__code { font-weight:700; }
.as-airport-list-item__city { color:var(--as-text-400); font-size:.85rem; }
.as-airport-list-item__arrow { color:var(--as-text-400); }

/* ── Runway cards ────────────────────────────────────────────────── */
.as-runway-list { display:flex; flex-direction:column; gap:var(--as-space-sm); }
.as-runway-card { background:var(--as-bg-800); border:var(--as-border); border-radius:var(--as-radius); padding:var(--as-space-md) var(--as-space-lg); }
.as-runway-card--active { border-color:var(--as-red); }
.as-runway-card__designator { font-size:1.2rem; font-weight:800; display:flex; align-items:center; gap:.75rem; margin-bottom:.4rem; }
.as-runway-card__details { display:flex; gap:var(--as-space-lg); flex-wrap:wrap; font-size:.8rem; color:var(--as-text-400); }

/* ── Detail sections ─────────────────────────────────────────────── */
.as-detail-section { padding:var(--as-space-xl) 0; border-bottom:var(--as-border); }
.as-detail-section:last-child { border-bottom:none; }
.as-detail-section__heading { font-size:.7rem; font-weight:800; letter-spacing:.18em; color:var(--as-text-400); margin-bottom:var(--as-space-lg); display:flex; align-items:center; gap:.5rem; }
.as-count-badge { background:var(--as-bg-600); border-radius:20px; padding:.15rem .5rem; font-size:.65rem; font-weight:700; }

/* ── Sidebar cards ───────────────────────────────────────────────── */
.as-sidebar-card { background:var(--as-bg-800); border:var(--as-border); border-radius:var(--as-radius-lg); padding:var(--as-space-lg); margin-bottom:var(--as-space-md); }
.as-sidebar-card__heading { font-size:.65rem; font-weight:800; letter-spacing:.18em; color:var(--as-text-400); margin-bottom:var(--as-space-md); }
.as-sidebar-stat { display:flex; flex-direction:column; margin-bottom:var(--as-space-md); }
.as-sidebar-stat__val { font-size:1.6rem; font-weight:800; line-height:1; color:var(--as-text-100); }
.as-sidebar-stat__label { font-size:.7rem; color:var(--as-text-400); margin-top:.2rem; }
.as-sidebar-hint { font-size:.75rem; color:var(--as-text-400); margin-top:.5rem; }
.as-sidebar-stream { display:flex; justify-content:space-between; align-items:center; padding:.5rem 0; border-bottom:1px solid rgba(255,255,255,.04); font-size:.85rem; color:var(--as-text-300); }
.as-sidebar-stream:hover { color:var(--as-text-100); }
.as-sidebar-stream__date { }
.as-sidebar-stream__time { color:var(--as-text-400); }
.as-sidebar-stream__stat { color:var(--as-text-400); font-size:.75rem; }

/* ── Stream detail ───────────────────────────────────────────────── */
.as-stream-hero { padding:var(--as-space-2xl) 0; background:var(--as-bg-800); border-bottom:var(--as-border); }
.as-stream-hero--live { background:linear-gradient(135deg, #1a0505 0%, #0d0d0d 100%); }
.as-stream-hero__inner { display:flex; flex-direction:column; gap:var(--as-space-lg); }
.as-stream-hero__meta  { display:flex; align-items:center; gap:var(--as-space-md); flex-wrap:wrap; }
.as-stream-hero__airport { font-size:.85rem; color:var(--as-text-300); }
.as-stream-hero__title { font-size:clamp(1.4rem,3vw,2.2rem); font-weight:900; }
.as-stream-hero__details { display:flex; gap:var(--as-space-lg); flex-wrap:wrap; font-size:.9rem; color:var(--as-text-300); }
.as-stream-hero__actions { display:flex; gap:var(--as-space-md); }
.as-stream-player { width:100%; max-width:840px; aspect-ratio:16/9; border-radius:var(--as-radius-lg); overflow:hidden; border:var(--as-border); margin-top:var(--as-space-md); }
.as-stream-player iframe { width:100%; height:100%; border:none; }
.as-stream-detail-grid { display:grid; grid-template-columns:1fr 300px; gap:var(--as-space-2xl); padding:var(--as-space-2xl) 0; }
.as-highlight-list { display:flex; flex-direction:column; gap:var(--as-space-sm); }
.as-highlight-row { display:flex; align-items:center; gap:var(--as-space-md); padding:var(--as-space-sm) 0; border-bottom:1px solid rgba(255,255,255,.04); }
.as-highlight-row__ts { min-width:60px; font-size:.8rem; color:var(--as-red); }
.as-highlight-row__info { flex:1; display:flex; flex-direction:column; gap:.15rem; }
.as-highlight-row__title { font-size:.875rem; }
.as-highlight-row__desc  { font-size:.75rem; color:var(--as-text-400); }
.as-highlight-row__type  { }
.as-aircraft-list { display:flex; flex-direction:column; gap:.4rem; }
.as-aircraft-row { display:flex; align-items:center; gap:var(--as-space-md); padding:.5rem 0; border-bottom:1px solid rgba(255,255,255,.04); }
.as-aircraft-row__reg  { font-weight:700; min-width:80px; }
.as-aircraft-row__info { flex:1; display:flex; flex-direction:column; gap:.1rem; font-size:.8rem; color:var(--as-text-300); }
.as-aircraft-row__type { color:var(--as-text-400); }

/* ── Aircraft explorer ───────────────────────────────────────────── */
.as-search-form { margin-bottom:var(--as-space-2xl); }
.as-search-form__inner { display:flex; gap:var(--as-space-md); }
.as-search-input { flex:1; background:var(--as-bg-700); border:var(--as-border); border-radius:var(--as-radius); padding:.75rem 1rem; color:var(--as-text-100); font-size:.95rem; font-family:inherit; }
.as-search-input:focus { outline:none; border-color:var(--as-red); }
.as-search-input::placeholder { color:var(--as-text-400); }
.as-results-count { font-size:.85rem; color:var(--as-text-400); margin-bottom:var(--as-space-lg); }
.as-aircraft-results { display:flex; flex-direction:column; gap:.4rem; }
.as-aircraft-result-card { display:flex; align-items:center; gap:var(--as-space-md); background:var(--as-bg-800); border:var(--as-border); border-radius:var(--as-radius); padding:var(--as-space-md) var(--as-space-lg); transition:background var(--as-transition); }
.as-aircraft-result-card:hover { background:var(--as-bg-700); }
.as-aircraft-result-card__photo { width:60px; height:40px; background-size:cover; background-position:center; border-radius:var(--as-radius); flex-shrink:0; }
.as-aircraft-result-card__info { flex:1; display:flex; flex-direction:column; gap:.15rem; }
.as-aircraft-result-card__reg  { font-size:1rem; font-weight:700; }
.as-aircraft-result-card__airline { font-size:.8rem; color:var(--as-text-300); }
.as-aircraft-result-card__type   { font-size:.8rem; color:var(--as-text-400); }
.as-aircraft-result-card__arrow  { color:var(--as-text-400); margin-left:auto; }
.as-aircraft-chips { display:flex; flex-wrap:wrap; gap:.4rem; }
.as-aircraft-chip { display:flex; align-items:center; gap:.4rem; background:var(--as-bg-700); border:var(--as-border); border-radius:20px; padding:.3rem .75rem; font-size:.8rem; transition:background var(--as-transition); }
.as-aircraft-chip:hover { background:var(--as-bg-600); }
.as-aircraft-chip .as-mono { font-weight:700; }

/* ── Aircraft detail ─────────────────────────────────────────────── */
.as-aircraft-hero { position:relative; min-height:280px; background-size:cover; background-position:center; background-color:var(--as-bg-700); }
.as-aircraft-hero__photo { position:absolute; inset:0; background-size:cover; background-position:center; }
.as-aircraft-hero__overlay { position:relative; background:linear-gradient(to bottom, transparent 0%, rgba(13,13,13,.97) 100%); min-height:280px; display:flex; align-items:flex-end; }
.as-aircraft-hero__inner { padding:var(--as-space-2xl) 0; }
.as-aircraft-hero__reg { font-size:clamp(2rem,5vw,3.5rem); font-weight:900; line-height:1; }
.as-aircraft-hero__type { font-size:1.1rem; color:var(--as-text-300); margin-top:.3rem; }
.as-aircraft-hero__operator { font-size:.9rem; color:var(--as-text-400); }
.as-aircraft-detail-grid { display:grid; grid-template-columns:1fr 280px; gap:var(--as-space-2xl); padding:var(--as-space-2xl) 0; }
.as-spec-table { width:100%; border-collapse:collapse; }
.as-spec-table th { text-align:left; padding:.6rem 0; font-size:.8rem; color:var(--as-text-400); font-weight:500; width:160px; border-bottom:1px solid rgba(255,255,255,.04); }
.as-spec-table td { padding:.6rem 0; font-size:.875rem; border-bottom:1px solid rgba(255,255,255,.04); }
.as-appearance-summary { display:flex; flex-wrap:wrap; gap:var(--as-space-sm); margin-bottom:var(--as-space-lg); }
.as-appearance-summary__item { background:var(--as-bg-700); border:var(--as-border); border-radius:var(--as-radius); padding:.4rem .8rem; font-size:.8rem; }
.as-appearance-summary__airport { color:var(--as-text-200); }
.as-appearance-summary__count  { color:var(--as-text-400); margin-left:.4rem; }
.as-appearance-list { display:flex; flex-direction:column; gap:.4rem; }
.as-appearance-row { display:flex; align-items:center; gap:var(--as-space-md); padding:.5rem 0; border-bottom:1px solid rgba(255,255,255,.04); }
.as-appearance-row__info { flex:1; display:flex; flex-direction:column; gap:.15rem; }
.as-appearance-row__airport { font-size:.875rem; }
.as-appearance-row__date { font-size:.75rem; color:var(--as-text-400); }

/* ── Airline cards ───────────────────────────────────────────────── */
.as-airline-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:var(--as-space-md); }
.as-airline-card { display:flex; flex-direction:column; align-items:center; background:var(--as-bg-800); border:var(--as-border); border-radius:var(--as-radius-lg); padding:var(--as-space-lg); gap:var(--as-space-sm); text-align:center; transition:background var(--as-transition); }
.as-airline-card:hover { background:var(--as-bg-700); }
.as-airline-card__logo { width:60px; height:40px; display:flex; align-items:center; justify-content:center; }
.as-airline-card__logo img { max-width:100%; max-height:100%; object-fit:contain; }
.as-airline-card__logo--placeholder { background:var(--as-bg-600); border-radius:var(--as-radius); font-weight:800; font-size:.9rem; }
.as-airline-card__name { font-size:.85rem; font-weight:600; color:var(--as-text-200); }
.as-airline-card__code { font-size:.75rem; color:var(--as-text-400); }
.as-airline-detail-logo { max-height:60px; max-width:180px; object-fit:contain; margin-bottom:var(--as-space-md); }
.as-airline-detail-grid { }

/* ── Capture My Flight ───────────────────────────────────────────── */
.as-capture-layout { max-width:640px; margin:0 auto; }
.as-capture-form-card { background:var(--as-bg-800); border:var(--as-border); border-radius:var(--as-radius-lg); padding:var(--as-space-2xl); margin-bottom:var(--as-space-xl); }
.as-capture-form { display:flex; flex-direction:column; gap:var(--as-space-lg); }
.as-capture-resolved { background:var(--as-bg-800); border:var(--as-border); border-radius:var(--as-radius-lg); padding:var(--as-space-2xl); display:flex; flex-direction:column; gap:var(--as-space-lg); }
.as-capture-resolved__flight { text-align:center; }
.as-capture-resolved__number { font-size:2.5rem; font-weight:900; }
.as-capture-resolved__airline { font-size:1rem; color:var(--as-text-300); }
.as-capture-resolved__route { display:flex; align-items:center; justify-content:center; gap:var(--as-space-md); font-size:1.1rem; margin:.5rem 0; }
.as-capture-resolved__arrow { color:var(--as-text-400); }
.as-capture-resolved__time { font-size:.9rem; color:var(--as-text-400); }
.as-capture-resolved__aircraft { font-size:.85rem; color:var(--as-text-400); }
.as-capture-overlap { border-radius:var(--as-radius); padding:var(--as-space-md) var(--as-space-lg); }
.as-capture-overlap--yes { background:rgba(39,174,96,.1); border:1px solid var(--as-success); }
.as-capture-overlap--no  { background:var(--as-bg-700); }
.as-capture-overlap p { font-size:.875rem; color:var(--as-text-300); margin-top:.5rem; }
.as-capture-confirmed { text-align:center; padding:var(--as-space-3xl) 0; }
.as-capture-confirmed__icon { font-size:4rem; margin-bottom:var(--as-space-lg); }
.as-capture-confirmed h2 { font-size:1.5rem; margin-bottom:var(--as-space-md); }
.as-capture-confirmed p { color:var(--as-text-300); margin-bottom:.5rem; }
.as-capture-confirmed__actions { display:flex; gap:var(--as-space-md); justify-content:center; margin-top:var(--as-space-xl); flex-wrap:wrap; }
.as-capture-login-prompt { text-align:center; }
.as-capture-login-prompt p { color:var(--as-text-300); margin-bottom:var(--as-space-md); }
.as-capture-how { background:var(--as-bg-800); border:var(--as-border); border-radius:var(--as-radius-lg); padding:var(--as-space-xl); }
.as-capture-how h3 { font-size:.85rem; font-weight:700; margin-bottom:var(--as-space-md); }
.as-how-list { padding-left:1.2rem; display:flex; flex-direction:column; gap:.5rem; }
.as-how-list li { font-size:.875rem; color:var(--as-text-300); }

/* ── Forms ───────────────────────────────────────────────────────── */
.as-form-group { display:flex; flex-direction:column; gap:.4rem; }
.as-form-label { font-size:.75rem; font-weight:600; letter-spacing:.08em; color:var(--as-text-400); }
.as-form-input, .as-form-select, .as-form-textarea {
  background:var(--as-bg-700); border:var(--as-border); border-radius:var(--as-radius);
  color:var(--as-text-100); padding:.65rem 1rem; font-size:.9rem; font-family:inherit;
  transition:border-color var(--as-transition); width:100%;
}
.as-form-input:focus, .as-form-select:focus, .as-form-textarea:focus {
  outline:none; border-color:var(--as-red);
}
.as-form-hint { font-size:.75rem; color:var(--as-text-400); }
.as-form-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--as-space-lg); }
.as-form-actions { display:flex; gap:var(--as-space-md); margin-top:var(--as-space-xl); }
.as-alert { padding:var(--as-space-md) var(--as-space-lg); border-radius:var(--as-radius); font-size:.875rem; margin-bottom:var(--as-space-lg); }
.as-alert--warning { background:rgba(243,156,18,.1); border:1px solid var(--as-warning); color:var(--as-warning); }

/* ── Dashboard ───────────────────────────────────────────────────── */
.as-dashboard-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:var(--as-space-lg); }
.as-dashboard-card { background:var(--as-bg-800); border:var(--as-border); border-radius:var(--as-radius-lg); padding:var(--as-space-xl); }
.as-dashboard-card__heading { font-size:.65rem; font-weight:800; letter-spacing:.18em; color:var(--as-text-400); margin-bottom:var(--as-space-lg); }
.as-dashboard-card__subheading { font-size:.7rem; font-weight:700; color:var(--as-text-400); margin:var(--as-space-md) 0 var(--as-space-sm); }
.as-dashboard-card__more { display:block; font-size:.8rem; color:var(--as-text-400); margin-top:var(--as-space-md); }
.as-dashboard-card__more:hover { color:var(--as-red); }
.as-dashboard-empty { font-size:.875rem; color:var(--as-text-400); margin-bottom:var(--as-space-md); }
.as-dashboard-flight-row { display:flex; align-items:center; gap:var(--as-space-md); padding:.5rem 0; border-bottom:1px solid rgba(255,255,255,.04); }
.as-dashboard-flight-row--captured { background:rgba(39,174,96,.04); }
.as-dashboard-flight-row__num  { font-weight:700; flex-shrink:0; }
.as-dashboard-flight-row__date { font-size:.8rem; color:var(--as-text-400); flex:1; }
.as-achievement-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:var(--as-space-sm); }
.as-achievement-badge { background:var(--as-bg-700); border:var(--as-border); border-radius:var(--as-radius); padding:.75rem; display:flex; flex-direction:column; align-items:center; gap:.25rem; text-align:center; }
.as-achievement-badge__icon { font-size:1.5rem; }
.as-achievement-badge__name { font-size:.7rem; color:var(--as-text-400); }

/* ── Admin ───────────────────────────────────────────────────────── */
.as-admin-stream-list { display:flex; flex-direction:column; gap:var(--as-space-sm); }
.as-admin-stream-row { display:flex; align-items:center; gap:var(--as-space-md); background:var(--as-bg-800); border:var(--as-border); border-radius:var(--as-radius); padding:var(--as-space-md) var(--as-space-lg); }
.as-admin-stream-row__info { flex:1; display:flex; flex-direction:column; gap:.2rem; }
.as-admin-stream-row__code  { font-size:1rem; font-weight:800; }
.as-admin-stream-row__title { font-size:.9rem; color:var(--as-text-200); }
.as-admin-stream-row__date  { font-size:.8rem; color:var(--as-text-400); display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.as-admin-stream-row__actions { display:flex; gap:.4rem; flex-wrap:wrap; }
.as-admin-form { max-width:860px; }

/* ── Empty state ─────────────────────────────────────────────────── */
.as-empty-state { text-align:center; padding:var(--as-space-3xl) 0; }
.as-empty-state--sm { padding:var(--as-space-xl) 0; }
.as-empty-state--lg { padding:calc(var(--as-space-3xl)*1.5) 0; }
.as-empty-state__icon  { font-size:3rem; margin-bottom:var(--as-space-lg); }
.as-empty-state__title { font-size:1.2rem; font-weight:700; margin-bottom:.5rem; }
.as-empty-state__body  { color:var(--as-text-400); margin-bottom:var(--as-space-lg); }

/* ── Weather panel ───────────────────────────────────────────────── */
.as-weather-panel { display:flex; flex-direction:column; gap:.5rem; }
.as-weather-panel__row { display:flex; align-items:center; gap:.5rem; }
.as-weather-panel__icon  { width:20px; text-align:center; }
.as-weather-panel__val   { flex:1; font-size:.85rem; color:var(--as-text-200); }
.as-weather-panel__label { font-size:.75rem; color:var(--as-text-400); min-width:70px; text-align:right; }

/* ── Responsive additions ────────────────────────────────────────── */
@media (max-width:1024px) {
  .as-airport-detail-grid,
  .as-stream-detail-grid,
  .as-aircraft-detail-grid { grid-template-columns:1fr; }
  .as-airport-detail-sidebar,
  .as-stream-detail-sidebar { order:-1; }
  .as-form-grid { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  .as-schedule-card { flex-direction:column; align-items:flex-start; }
  .as-schedule-card__actions { flex-direction:row; }
  .as-search-form__inner { flex-direction:column; }
  .as-ftable th:nth-child(5),
  .as-ftable td:nth-child(5) { display:none; }
}

/* ── My Flights cards ────────────────────────────────────────────── */
.as-flights-list { display:flex; flex-direction:column; gap:var(--as-space-md); }
.as-flight-request-card {
  background:var(--as-bg-800); border:var(--as-border); border-radius:var(--as-radius-lg);
  padding:var(--as-space-lg); display:flex; flex-direction:column; gap:var(--as-space-sm);
}
.as-flight-request-card--captured { border-color:var(--as-success); }
.as-flight-request-card__header { display:flex; align-items:center; gap:var(--as-space-md); flex-wrap:wrap; }
.as-flight-request-card__number { font-size:1.2rem; font-weight:800; }
.as-flight-request-card__details { display:flex; gap:var(--as-space-lg); flex-wrap:wrap; font-size:.85rem; color:var(--as-text-400); }
.as-flight-request-card__action { margin-top:.25rem; }
.as-flight-request-card__notes { font-size:.8rem; color:var(--as-text-400); border-top:var(--as-border); padding-top:.5rem; }

/* ── Admin capture request cards ─────────────────────────────────── */
.as-admin-request-card {
  background:var(--as-bg-800); border:var(--as-border); border-radius:var(--as-radius-lg);
  padding:var(--as-space-lg); margin-bottom:var(--as-space-md);
  display:flex; flex-direction:column; gap:var(--as-space-md);
}
.as-admin-request-card__header { display:flex; align-items:center; gap:var(--as-space-md); flex-wrap:wrap; font-size:.9rem; }
.as-admin-request-card__form { }

/* ── Badge variants ──────────────────────────────────────────────── */
.as-badge--success { background:var(--as-success); color:#fff; }
.as-badge--warning { background:var(--as-warning); color:#000; }
.as-badge--info    { background:var(--as-info);    color:#fff; }


/* ── Auth pages (Login, Register, ForgotPassword) ────────────────── */
.as-auth-page {
  min-height: calc(100vh - var(--as-nav-height));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--as-space-2xl) var(--as-space-lg);
  background: radial-gradient(ellipse at 50% 0%, rgba(192,57,43,.08) 0%, transparent 60%),
              var(--as-bg-900);
}

.as-auth-card {
  width: 100%;
  max-width: 440px;
  background: var(--as-bg-800);
  border: var(--as-border);
  border-radius: var(--as-radius-lg);
  padding: var(--as-space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--as-space-lg);
}

.as-auth-card__header { text-align: center; }

.as-auth-card__logo {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--as-text-100);
  margin-bottom: var(--as-space-lg);
  display: block;
}

.as-auth-card__title {
  font-size: 1.6rem;
  font-weight: 900;
  margin-bottom: .4rem;
}

.as-auth-card__sub {
  font-size: .875rem;
  color: var(--as-text-400);
  line-height: 1.6;
}

.as-auth-card__options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .25rem;
}

.as-auth-card__forgot {
  font-size: .8rem;
  color: var(--as-text-400);
}
.as-auth-card__forgot:hover { color: var(--as-red); }

.as-auth-card__divider {
  display: flex;
  align-items: center;
  gap: var(--as-space-md);
  color: var(--as-text-400);
  font-size: .8rem;
}
.as-auth-card__divider::before,
.as-auth-card__divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.08);
}

.as-auth-card__switch {
  text-align: center;
  font-size: .875rem;
  color: var(--as-text-400);
  margin: 0;
}
.as-auth-card__switch a { color: var(--as-text-200); }
.as-auth-card__switch a:hover { color: var(--as-red); }

.as-checkbox-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .85rem;
  color: var(--as-text-300);
  cursor: pointer;
}
.as-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--as-red);
}

.as-form-error {
  font-size: .75rem;
  color: var(--as-danger);
  margin-top: .2rem;
  display: block;
}

/* Validation summary */
.validation-summary-errors ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.validation-summary-errors li {
  font-size: .85rem;
}

/* ── Community feature cards ─────────────────────────────────────── */
.as-community-features {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--as-space-lg);
  margin-bottom: var(--as-space-2xl);
}
.as-community-feature-card {
  background: var(--as-bg-800);
  border: var(--as-border);
  border-radius: var(--as-radius-lg);
  padding: var(--as-space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--as-space-md);
  transition: background var(--as-transition), transform var(--as-transition);
}
.as-community-feature-card:hover { background: var(--as-bg-700); transform: translateY(-2px); }
.as-community-feature-card--cta { border-color: var(--as-red); }
.as-community-feature-card__icon { font-size: 2.5rem; }
.as-community-feature-card__title { font-size: 1.1rem; font-weight: 700; }
.as-community-feature-card__body { font-size: .875rem; color: var(--as-text-300); line-height: 1.6; flex: 1; }

/* ── Filter tabs ─────────────────────────────────────────────────── */
.as-filter-tabs { display: flex; gap: .25rem; margin-bottom: var(--as-space-xl); flex-wrap: wrap; }
.as-filter-tab {
  padding: .5rem 1rem;
  border-radius: var(--as-radius);
  font-size: .8rem;
  font-weight: 600;
  color: var(--as-text-400);
  background: var(--as-bg-700);
  border: var(--as-border);
  transition: all var(--as-transition);
}
.as-filter-tab:hover { color: var(--as-text-200); background: var(--as-bg-600); }
.as-filter-tab.is-active { color: var(--as-text-100); background: var(--as-bg-600); border-color: var(--as-red); }

/* ── Gallery grid ────────────────────────────────────────────────── */
.as-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--as-space-md);
  margin-bottom: var(--as-space-2xl);
}
.as-gallery-card {
  background: var(--as-bg-800);
  border: var(--as-border);
  border-radius: var(--as-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.as-gallery-card__img {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--as-bg-600);
}
.as-gallery-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.as-gallery-card:hover .as-gallery-card__img img { transform: scale(1.03); }
.as-gallery-card__body { padding: var(--as-space-md); display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.as-gallery-card__title { font-size: .875rem; font-weight: 600; color: var(--as-text-200); }
.as-gallery-card__meta { display: flex; flex-wrap: wrap; gap: .3rem; }
.as-gallery-card__footer { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: .4rem; }
.as-gallery-card__uploader { font-size: .75rem; color: var(--as-text-400); }
.as-gallery-card__likes { font-size: .75rem; color: var(--as-text-400); }

/* Gallery thumbnail (community page preview) */
.as-gallery-thumb { position: relative; border-radius: var(--as-radius); overflow: hidden; aspect-ratio: 4/3; background: var(--as-bg-600); }
.as-gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.as-gallery-thumb__title { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,.7)); padding: .5rem .75rem; font-size: .8rem; color: #fff; }

/* ── Admin dashboard ─────────────────────────────────────────────── */
.as-admin-actions {
  display: flex;
  gap: var(--as-space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--as-space-2xl);
}

.as-admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--as-space-md);
  margin-bottom: var(--as-space-2xl);
}

.as-admin-stat-card {
  background: var(--as-bg-800);
  border: var(--as-border);
  border-radius: var(--as-radius-lg);
  padding: var(--as-space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--as-space-md);
}

.as-admin-stat-card--attention {
  border-color: var(--as-warning);
}

.as-admin-stat-card__heading {
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .18em;
  color: var(--as-text-400);
}

.as-admin-stat-card__rows {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  flex: 1;
}

.as-admin-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .875rem;
}

.as-admin-stat-row--live {
  color: var(--as-red);
}

.as-admin-stat-card__link {
  font-size: .8rem;
  color: var(--as-text-400);
  margin-top: auto;
}

.as-admin-stat-card__link:hover { color: var(--as-red); }

.as-admin-nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--as-space-md);
}

.as-admin-nav-card {
  background: var(--as-bg-800);
  border: var(--as-border);
  border-radius: var(--as-radius-lg);
  padding: var(--as-space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--as-space-sm);
  text-align: center;
  transition: background var(--as-transition), transform var(--as-transition);
}

.as-admin-nav-card:hover {
  background: var(--as-bg-700);
  transform: translateY(-2px);
}

.as-admin-nav-card__icon { font-size: 2rem; }
.as-admin-nav-card__label { font-size: .8rem; font-weight: 600; color: var(--as-text-300); }

/* ── Achievements full view ──────────────────────────────────────── */
.as-achievement-full-grid {
  display: flex;
  flex-direction: column;
  gap: var(--as-space-sm);
}
.as-achievement-full-card {
  display: flex;
  align-items: center;
  gap: var(--as-space-lg);
  background: var(--as-bg-800);
  border: var(--as-border);
  border-radius: var(--as-radius-lg);
  padding: var(--as-space-md) var(--as-space-lg);
}
.as-achievement-full-card--earned { border-color: rgba(39,174,96,.3); }
.as-achievement-full-card--locked { opacity: .6; }
.as-achievement-full-card__icon   { font-size: 2rem; flex-shrink: 0; }
.as-achievement-full-card__info   { flex: 1; display: flex; flex-direction: column; gap: .15rem; }
.as-achievement-full-card__name   { font-size: .95rem; font-weight: 700; }
.as-achievement-full-card__desc   { font-size: .8rem; color: var(--as-text-300); }
.as-achievement-full-card__date   { font-size: .75rem; color: var(--as-success); margin-top: .2rem; }
.as-achievement-full-card__cat    { font-size: .7rem; color: var(--as-text-400); letter-spacing: .08em; }
.as-achievement-full-card__badge  { font-size: 1.2rem; flex-shrink: 0; color: var(--as-success); }

/* ── Notifications ───────────────────────────────────────────────── */
.as-notifications-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--as-space-2xl);
  align-items: start;
}
.as-notifications-list { display: flex; flex-direction: column; gap: var(--as-space-sm); }
.as-notification-card {
  display: flex;
  align-items: flex-start;
  gap: var(--as-space-md);
  background: var(--as-bg-800);
  border: var(--as-border);
  border-radius: var(--as-radius-lg);
  padding: var(--as-space-md) var(--as-space-lg);
}
.as-notification-card--unread { border-color: rgba(192,57,43,.3); background: rgba(192,57,43,.04); }
.as-notification-card__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--as-red); flex-shrink: 0; margin-top: .4rem;
}
.as-notification-card__body   { flex: 1; display: flex; flex-direction: column; gap: .2rem; }
.as-notification-card__title  { font-size: .9rem; font-weight: 600; }
.as-notification-card__body-text { font-size: .85rem; color: var(--as-text-300); }
.as-notification-card__meta   { font-size: .75rem; color: var(--as-text-400); margin-top: .2rem; }

/* ── Follow button states ────────────────────────────────────────── */
.as-follow-btn[data-following="true"] {
  border-color: var(--as-success);
  color: var(--as-success);
}

@media (max-width: 768px) {
  .as-notifications-layout { grid-template-columns: 1fr; }
  .as-notifications-prefs  { order: -1; }
}

/* ── Statistics platform ─────────────────────────────────────────── */
.as-stats-hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--as-space-md);
  margin-bottom: var(--as-space-2xl);
}
.as-stat-hero {
  background: var(--as-bg-800);
  border: var(--as-border);
  border-radius: var(--as-radius-lg);
  padding: var(--as-space-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.as-stat-hero__num {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 900;
  color: var(--as-text-100);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.as-stat-hero__label {
  font-size: .7rem;
  color: var(--as-text-400);
  letter-spacing: .08em;
  margin-top: .5rem;
  text-align: center;
}
.as-stats-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--as-space-2xl);
  margin-bottom: var(--as-space-2xl);
}
.as-stats-section { }
.as-stats-table {
  background: var(--as-bg-800);
  border: var(--as-border);
  border-radius: var(--as-radius-lg);
  overflow: hidden;
}
.as-stats-table__header {
  display: grid;
  grid-template-columns: 1fr auto auto;
  padding: .6rem 1rem;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--as-text-400);
  border-bottom: var(--as-border);
  background: var(--as-bg-700);
}
.as-stats-table__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  padding: .6rem 1rem;
  font-size: .85rem;
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background var(--as-transition);
  align-items: center;
  gap: .5rem;
}
.as-stats-table__row:last-child { border-bottom: none; }
.as-stats-table__row:hover { background: var(--as-bg-700); }
.as-stats-table__code { color: var(--as-red); margin-right: .4rem; }
.as-stats-bar-row {
  display: grid;
  grid-template-columns: 140px 1fr 40px;
  align-items: center;
  gap: var(--as-space-md);
  padding: .5rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.as-stats-bar-row:last-child { border-bottom: none; }
.as-stats-bar-row__label { font-size: .8rem; color: var(--as-text-300); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-stats-bar-row__bar   { height: 6px; background: var(--as-bg-600); border-radius: 3px; overflow: hidden; }
.as-stats-bar-row__fill  { height: 100%; background: var(--as-red); border-radius: 3px; transition: width .3s ease; }
.as-stats-bar-row__val   { font-size: .8rem; text-align: right; }

/* ── Aircraft of the Day ─────────────────────────────────────────── */
.as-aotd-card {
  display: flex;
  gap: var(--as-space-xl);
  background: var(--as-bg-800);
  border: var(--as-border);
  border-radius: var(--as-radius-lg);
  overflow: hidden;
  max-width: 640px;
  transition: transform var(--as-transition);
}
.as-aotd-card:hover { transform: translateY(-2px); }
.as-aotd-card__photo {
  width: 240px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--as-bg-600);
}
.as-aotd-card__info {
  padding: var(--as-space-xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.as-aotd-card__reg    { font-size: 2rem; font-weight: 900; color: var(--as-text-100); line-height: 1; }
.as-aotd-card__type   { font-size: 1rem; color: var(--as-text-300); margin-top: .3rem; }
.as-aotd-card__airline{ font-size: .875rem; color: var(--as-text-400); margin-top: .2rem; }

@media (max-width: 600px) {
  .as-aotd-card { flex-direction: column; }
  .as-aotd-card__photo { width: 100%; height: 180px; }
  .as-stats-table__header,
  .as-stats-table__row { grid-template-columns: 1fr auto; }
  .as-stats-table__header span:nth-child(2),
  .as-stats-table__row span:nth-child(2) { display: none; }
}

/* ── Spotting guide cards ─────────────────────────────────────────── */
.as-guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--as-space-lg);
}
.as-guide-card {
  display: flex;
  flex-direction: column;
  background: var(--as-bg-800);
  border: var(--as-border);
  border-radius: var(--as-radius-lg);
  overflow: hidden;
  transition: transform var(--as-transition);
}
.as-guide-card:hover { transform: translateY(-2px); }
.as-guide-card--general { border-style: dashed; }
.as-guide-card__img {
  height: 180px;
  background-size: cover;
  background-position: center;
  background-color: var(--as-bg-600);
}
.as-guide-card__img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--as-text-400);
}
.as-guide-card__body {
  padding: var(--as-space-lg);
  display: flex;
  flex-direction: column;
  gap: .4rem;
  flex: 1;
}
.as-guide-card__code  { font-size: .75rem; font-weight: 700; color: var(--as-red); letter-spacing: .1em; }
.as-guide-card__title { font-size: 1rem; font-weight: 700; }
.as-guide-card__desc  { font-size: .85rem; color: var(--as-text-400); line-height: 1.5; flex: 1; }

/* ── I Was On This Flight share card ─────────────────────────────── */
.as-share-card {
  background: linear-gradient(135deg, #1a0505 0%, #0d0d0d 100%);
  border: 1px solid rgba(192,57,43,.4);
  border-radius: var(--as-radius-lg);
  padding: var(--as-space-2xl);
  margin-bottom: var(--as-space-xl);
  text-align: center;
}
.as-share-card__brand {
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--as-text-400);
  margin-bottom: var(--as-space-xl);
}
.as-share-card__flight { margin-bottom: var(--as-space-xl); }
.as-share-card__number {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 900;
  color: var(--as-text-100);
  line-height: 1;
}
.as-share-card__airline {
  font-size: 1rem;
  color: var(--as-text-300);
  margin-top: .3rem;
}
.as-share-card__detail {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: var(--as-space-xl);
}
.as-share-card__line  { display: flex; align-items: center; justify-content: center; gap: .5rem; font-size: .9rem; color: var(--as-text-300); }
.as-share-card__icon  { font-size: 1rem; }
.as-share-card__footer { font-size: .75rem; color: var(--as-text-400); letter-spacing: .08em; }
.as-share-actions {
  display: flex;
  gap: var(--as-space-md);
  flex-wrap: wrap;
  margin-bottom: var(--as-space-xl);
}
.as-share-text-box {
  background: var(--as-bg-800);
  border: var(--as-border);
  border-radius: var(--as-radius-lg);
  padding: var(--as-space-lg);
  margin-bottom: var(--as-space-lg);
}
.as-share-text-box__label { font-size: .75rem; color: var(--as-text-400); margin-bottom: .5rem; }
.as-share-text-box__text  { font-size: .875rem; color: var(--as-text-200); line-height: 1.6; margin-bottom: var(--as-space-md); }
.as-share-cta {
  text-align: center;
  padding: var(--as-space-lg);
  border-top: var(--as-border);
  color: var(--as-text-400);
  font-size: .875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--as-space-lg);
}

/* ── Aviation hub ────────────────────────────────────────────────── */
.as-aviation-topics {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--as-space-md);
}
.as-aviation-topic-card {
  background: var(--as-bg-800);
  border: var(--as-border);
  border-radius: var(--as-radius-lg);
  padding: var(--as-space-xl);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  transition: background var(--as-transition), transform var(--as-transition);
}
.as-aviation-topic-card:hover { background: var(--as-bg-700); transform: translateY(-2px); }
.as-aviation-topic-card__code  { font-size: .75rem; color: var(--as-red); font-weight: 700; letter-spacing: .1em; }
.as-aviation-topic-card__title { font-size: 1rem; font-weight: 700; }
.as-aviation-topic-card__desc  { font-size: .85rem; color: var(--as-text-400); line-height: 1.5; flex: 1; }
.as-aviation-topic-card__more  { font-size: .8rem; color: var(--as-text-400); margin-top: .25rem; }
.as-aviation-cta {
  background: linear-gradient(135deg, rgba(192,57,43,.1) 0%, transparent 100%);
  border: 1px solid rgba(192,57,43,.2);
  border-radius: var(--as-radius-lg);
  padding: var(--as-space-2xl);
  text-align: center;
  margin-top: var(--as-space-2xl);
}
.as-aviation-cta__title   { font-size: 1.5rem; font-weight: 800; margin-bottom: .75rem; }
.as-aviation-cta__desc    { color: var(--as-text-300); margin-bottom: 1.5rem; max-width: 500px; margin-left: auto; margin-right: auto; }
.as-aviation-cta__actions { display: flex; gap: var(--as-space-md); justify-content: center; flex-wrap: wrap; }

/* ── Sponsor options ─────────────────────────────────────────────── */
.as-sponsor-option {
  background: var(--as-bg-800);
  border: var(--as-border);
  border-radius: var(--as-radius-lg);
  padding: var(--as-space-lg);
}
.as-sponsor-option__title { font-weight: 700; margin-bottom: .4rem; }
.as-sponsor-option__desc  { font-size: .875rem; color: var(--as-text-400); line-height: 1.5; }

/* ── Accessibility ───────────────────────────────────────────────── */

/* Skip link — hidden until focused */
.as-skip-link {
  position: fixed;
  top: -200px;
  left: 1rem;
  z-index: 10000;
  background: var(--as-red);
  color: #fff;
  padding: .75rem 1.5rem;
  border-radius: 0 0 var(--as-radius) var(--as-radius);
  font-weight: 700;
  font-size: .875rem;
  text-decoration: none;
  transition: top .2s ease;
  white-space: nowrap;
}
.as-skip-link:focus { top: 0; outline: 3px solid #fff; outline-offset: 2px; }

/* Visible focus rings on all interactive elements */
:focus-visible {
  outline: 2px solid var(--as-red);
  outline-offset: 3px;
  border-radius: 2px;
}
/* Remove outline for mouse users (only show for keyboard) */
:focus:not(:focus-visible) { outline: none; }

/* High-contrast focus for buttons */
.as-btn:focus-visible {
  outline: 2px solid var(--as-red);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(192, 57, 43, 0.3);
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .as-live-dot { animation: none !important; }
}

/* ── Article body ────────────────────────────────────────────────── */
.as-article-body {
  color: var(--as-text-300);
  line-height: 1.8;
  font-size: 1rem;
}
.as-article-body h2 {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--as-text-100);
  margin: 2rem 0 .75rem;
  letter-spacing: .04em;
}
.as-article-body h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--as-text-200);
  margin: 1.5rem 0 .5rem;
}
.as-article-body p   { margin-bottom: 1.25rem; }
.as-article-body ul,
.as-article-body ol  { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.as-article-body li  { margin-bottom: .4rem; }
.as-article-body a   { color: var(--as-red); text-decoration: underline; }
.as-article-body strong { color: var(--as-text-200); }
.as-article-body blockquote {
  border-left: 3px solid var(--as-red);
  margin: 1.5rem 0;
  padding: .75rem 1.25rem;
  background: var(--as-bg-800);
  border-radius: 0 var(--as-radius) var(--as-radius) 0;
  color: var(--as-text-200);
  font-style: italic;
}
.as-article-body img {
  max-width: 100%;
  border-radius: var(--as-radius-lg);
  margin: 1.5rem 0;
}

/* ── Admin table shared styles ───────────────────────────────────── */
.as-admin-table { background: var(--as-bg-800); border: var(--as-border); border-radius: var(--as-radius-lg); overflow: hidden; }
.as-admin-table__header {
  display: grid;
  padding: .6rem 1rem;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--as-text-400);
  background: var(--as-bg-700);
  border-bottom: var(--as-border);
  gap: .5rem;
}
.as-admin-table__row {
  display: grid;
  padding: .6rem 1rem;
  font-size: .85rem;
  border-bottom: 1px solid rgba(255,255,255,.04);
  gap: .5rem;
  align-items: center;
  transition: background var(--as-transition);
}
.as-admin-table__row:last-child { border-bottom: none; }
.as-admin-table__row:hover { background: var(--as-bg-700); }
