:root{
  --bg0:#FFFFFF;
  --bg1:#F7F7F8;
  --card:rgba(0,0,0,.025);
  --card2:rgba(0,0,0,.04);
  --border:rgba(0,0,0,.10);
  --muted:rgba(0,0,0,.55);
  --text:rgba(0,0,0,.88);
  --shadow: 0 8px 30px rgba(0,0,0,.08);
  --radius: 22px;

  --safe:#1A9E6F;
  --caution:#C99A00;
  --risk:#D96A20;
  --high:#D93251;
  --accent:#0F3FA8;
  --accent-secondary:#E8891C;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: var(--bg0);
}

.wrap{
  max-width: 1240px;
  margin: 28px auto 50px;
  padding: 0 18px;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.brand{
  display:flex;
  align-items:center;
  gap:14px;
}
.logo{
  width:44px;height:44px;border-radius:10px;
  object-fit:contain;
}
.title h1{
  font-size: 22px;
  line-height: 1.1;
  margin:0;
  letter-spacing:.2px;
}
.title p{
  margin:3px 0 0;
  color:var(--muted);
  font-size: 13.5px;
}

.status{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--muted);
  font-size: 13px;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border:1px solid var(--border);
  border-radius: 999px;
  background: rgba(0,0,0,.03);
  box-shadow: inset 0 1px 0 rgba(0,0,0,.04);
}
.dot{
  width:10px;height:10px;border-radius:50%;
  background: rgba(0,0,0,.20);
}
.dot.ok{ background: var(--safe); }
.dot.bad{ background: var(--high); }
.dot.warn{ background: var(--caution); }

.grid{
  display:grid;
  grid-template-columns: 1.05fr 1.35fr;
  gap:18px;
  align-items:start;
}

/* Predict page: tabs | form | results */
.predict-layout{
  grid-template-columns: auto 340px 1fr;
}
.predict-layout > .vtabs{
  align-self:start;
}
.predict-layout > .card{
  align-self:start;
}

/* Vertical tabs */
.vtabs{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:0;
}
.vtab{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  color: rgba(0,0,0,.65);
  padding: 10px 16px;
  border-radius: 12px;
  cursor:pointer;
  font-weight: 650;
  font-size: 13.5px;
  transition: all .15s ease;
  user-select:none;
  white-space:nowrap;
}
.vtab{
  display:flex;
  align-items:center;
  gap:6px;
}
.vtab:hover{ background: rgba(0,0,0,.05); }
.vtab.active{
  color: var(--accent);
  border-color: rgba(15,63,168,.40);
  background: rgba(15,63,168,.08);
}
.vtab.disabled{
  opacity: 0.38;
  cursor: not-allowed;
}
.vtab.disabled:hover{ background: rgba(0,0,0,.03); }
.vtab-icon{
  flex-shrink:0;
  opacity:.45;
  pointer-events:none;
}
.vtab.active .vtab-icon{ opacity:.7; }
.vtab-chevron{
  margin-left:auto;
  transition: transform .2s ease;
  opacity:.4;
  pointer-events:none;
}
.vtab-chevron.expanded{ transform: rotate(90deg); }
.vtab-sub-group{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding-left:26px;
  margin-top:-2px;
}
.vtab-sub{
  font-size:12.5px;
  padding:7px 12px;
  border-radius:8px;
  cursor:pointer;
  color:rgba(0,0,0,.50);
  font-weight:550;
  transition: all .12s ease;
}
.vtab-sub:hover{ background: rgba(0,0,0,.04); color:rgba(0,0,0,.7); }
.vtab-sub.active{ color: var(--accent); font-weight:650; background: rgba(15,63,168,.06); }

.card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  position:relative;
}

.card::before{
  display:none;
}

.card > *{ position:relative; }

.cardHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 18px 12px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.cardHeader h2{
  margin:0;
  font-size:18px;
  letter-spacing:.2px;
}
.subtle{
  color:var(--muted);
  font-size: 13px;
}

.panel{
  padding: 16px 18px 18px;
}

.formGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}

label{
  display:block;
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 6px;
}

input, select{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  outline: none;
  background: rgba(0,0,0,.03);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(0,0,0,.04);
}

input:focus, select:focus{
  border-color: rgba(15,63,168,.55);
  box-shadow: 0 0 0 3px rgba(15,63,168,.18);
}

.autocomplete{
  position:relative;
}

.suggestions{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  z-index:40;
  display:none;
  max-height:260px;
  overflow:auto;
  border:1px solid rgba(0,0,0,.10);
  border-radius:16px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 12px 32px rgba(0,0,0,.10);
  backdrop-filter: blur(12px);
}

.suggestions.open{
  display:block;
}

.suggestionItem{
  padding: 11px 12px;
  cursor:pointer;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.suggestionItem:last-child{
  border-bottom:none;
}

.suggestionItem:hover,
.suggestionItem.active{
  background: rgba(15,63,168,.08);
}

.suggestionTop{
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}

.suggestionSub{
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.25;
}

.btn{
  margin-top: 14px;
  width: 100%;
  padding: 13px 14px;
  border-radius: 16px;
  border: none;
  cursor: pointer;
  color: white;
  font-weight: 700;
  letter-spacing:.2px;
  background: var(--accent);
  box-shadow: 0 8px 24px rgba(15,63,168,.20);
}
.btn:disabled{
  opacity:.6;
  cursor:not-allowed;
}

.btnSecondary{
  width:auto;
  margin-top:0;
  padding: 11px 14px;
  background: rgba(15,63,168,.08);
  border: 1px solid rgba(15,63,168,.30);
  color: var(--accent);
  box-shadow:none;
}

.tip{
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}

.tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding: 12px 18px 0;
}

.tab{
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  color: rgba(0,0,0,.65);
  padding: 10px 14px;
  border-radius: 999px;
  cursor:pointer;
  font-weight: 650;
  font-size: 13.5px;
  transition: all .15s ease;
  user-select:none;
}
.tab:hover{ transform: translateY(-1px); }
.tab.active{
  color: var(--accent);
  border-color: rgba(15,63,168,.40);
  background: rgba(15,63,168,.08);
  box-shadow: inset 0 1px 0 rgba(0,0,0,.04);
}

.resultsTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding: 14px 18px 0;
}
.route{
  font-size: 13.5px;
  color: var(--muted);
}

.content{
  padding: 14px 18px 18px;
  min-height: 420px;
}

.empty{
  color: var(--muted);
  font-size: 14px;
  padding: 12px 2px;
}

/* Cancellation risk banner */
.cancel-banner{
  display:flex;
  align-items:center;
  padding:10px 16px;
  border-radius:10px;
  margin-bottom:16px;
  font-size:.9rem;
}
.cancel-banner .cancel-header{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
}
.cancel-banner .cancel-pct{
  margin-left:auto;
  font-weight:700;
  font-size:1.05rem;
}
.cancel-banner .cancel-icon{ font-size:1.1rem; }
.cancel-low{
  background:rgba(26,158,111,.08);
  color:var(--safe);
  border:1px solid rgba(26,158,111,.18);
}
.cancel-medium{
  background:rgba(201,154,0,.08);
  color:var(--caution);
  border:1px solid rgba(201,154,0,.18);
}
.cancel-high{
  background:rgba(217,50,81,.08);
  color:var(--high);
  border:1px solid rgba(217,50,81,.18);
}

.riskCard{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:stretch;
  margin-bottom: 14px;
}
.riskBig{
  flex: 1 1 280px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
}
.riskBig h3{ margin:0 0 6px; font-size: 13px; color: var(--muted); font-weight:650; }
.riskScore{
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -.6px;
  margin: 0;
  line-height: 1.05;
}
.riskBand{
  margin-top: 8px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  font-weight: 750;
  font-size: 13px;
}
.bandSafe{ background: rgba(26,158,111,.10); color: #1A9E6F; border-color: rgba(26,158,111,.25); }
.bandCaution{ background: rgba(201,154,0,.10); color: #C99A00; border-color: rgba(201,154,0,.25); }
.bandRisk{ background: rgba(217,106,32,.10); color: #D96A20; border-color: rgba(217,106,32,.25); }
.bandHigh{ background: rgba(217,50,81,.10); color: #D93251; border-color: rgba(217,50,81,.25); }

.kpis{
  flex: 1 1 340px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.kpi{
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
}
.kpi .k{ color: var(--muted); font-size: 12.5px; margin-bottom: 6px; }
.kpi .v{ font-size: 18px; font-weight: 850; }

.barList{
  display:flex;
  flex-direction:column;
  gap: 10px;
  margin-top: 6px;
}
.barRow{
  display:grid;
  grid-template-columns: 110px 1fr 60px;
  gap:10px;
  align-items:center;
}
.barLabel{
  color: var(--muted);
  font-size: 12.5px;
}
.barTrack{
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.04);
  overflow:hidden;
}
.barFill{
  height:100%;
  border-radius: 999px;
  background: rgba(15,63,168,.55);
  width: 0%;
}
.barVal{
  text-align:right;
  font-variant-numeric: tabular-nums;
  color: rgba(0,0,0,.80);
  font-size: 12.5px;
  font-weight: 800;
}
.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(0,0,0,.10);
  border-top-color: rgba(15,63,168,.8);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  margin: 0 auto;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loadingState {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px 0;
  color: var(--muted);
}

.sectionTitle{
  margin: 18px 0 10px;
  font-size: 13px;
  letter-spacing:.25px;
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
}

.twoCol{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}

.miniCard{
  border:1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  background: rgba(0,0,0,.02);
  padding: 14px;
}
.miniCard h4{
  margin:0 0 6px;
  font-size: 13px;
  color: rgba(0,0,0,.88);
}
.miniCard .small{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.wxRow{
  display:flex;
  gap:12px;
  align-items:center;
}
.wxIcon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.03);
  display:flex;
  align-items:center;
  justify-content:center;
}
.wxMeta .big{ font-weight: 900; font-size: 18px; margin:0; }
.wxMeta .muted{ margin:2px 0 0; color: var(--muted); font-size: 13px; }

.hist{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.footnote{
  color: var(--muted);
  font-size: 12.5px;
  margin-top: 12px;
}

.loadingBox{
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.02);
  color: var(--muted);
}

.similarTop{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.similarControls{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.similarLoadMoreWrap{
  display:flex;
  justify-content:center;
  margin-top:16px;
}
.similarSortLabel{
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

.similarSortSelect{
  width:auto;
  min-width: 150px;
}
.similarMeta{
  color: var(--muted);
  font-size: 13px;
}

.similarList{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.similarFlight{
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  background: rgba(0,0,0,.02);
  padding:14px;
}

.similarFlightHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:10px;
}
.similarHeadBadges{
  display:flex;
  align-items:flex-start;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.similarRiskBadge{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid rgba(0,0,0,.08);
}

.similarFlightTitle{
  font-weight:800;
  font-size:15px;
  display:flex;
  align-items:center;
  gap:8px;
}
.similarFlightNum{
  font-family:'JetBrains Mono',monospace;
  font-size:14px;
  font-weight:700;
  background:rgba(15,63,168,.10);
  color:var(--accent);
  padding:2px 7px;
  border-radius:5px;
  letter-spacing:0.5px;
}

.rankBadge{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.03);
  font-size:12px;
  font-weight:800;
}

.similarGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap:12px;
}

.metricLabel{
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}

.metricValue{
  font-size: 14px;
  font-weight: 750;
}

.predictionPills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.predictionPill{
  display:inline-flex;
  align-items:center;
  padding:7px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.03);
}

.warningBox{
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(201,154,0,.24);
  background: rgba(201,154,0,.08);
  color: rgba(0,0,0,.88);
  margin-bottom:12px;
}
.kvGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px;
}

.kv{
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:12px 14px;
  background:rgba(0,0,0,.02);
}

.kv span{
  display:block;
  font-size:.82rem;
  color:rgba(0,0,0,.55);
  margin-bottom:6px;
}

.kv strong{
  font-size:1.05rem;
  color:rgba(0,0,0,.88);
}

/* ---------- navbar ---------- */
.navbar{
  position:sticky;
  top:0;
  z-index:100;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.nav-inner{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height: 60px;
}
.nav-brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color: var(--text);
  font-weight:800;
  font-size:20px;
  letter-spacing:.3px;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:6px;
}
.nav-link{
  text-decoration:none;
  color: rgba(0,0,0,.55);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  transition: all .15s ease;
}
.nav-link:hover{
  color: var(--text);
  background: rgba(0,0,0,.04);
}
.nav-link.active{
  color: var(--accent);
  background: rgba(15,63,168,.08);
  border: 1px solid rgba(15,63,168,.25);
}
.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
}
.nav-toggle span{
  display:block;
  width:22px;
  height:2px;
  background: var(--text);
  border-radius:2px;
  transition: all .2s ease;
}

/* ---------- footer ---------- */
.site-footer{
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,.02);
  padding: 40px 18px;
  margin-top: 60px;
}
.footer-inner{
  max-width: 1240px;
  margin: 0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:20px;
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  font-size:18px;
  color: var(--text);
}
.logo-sm{
  width:30px;height:30px;border-radius:10px;
}
.footer-links{
  display:flex;
  gap:18px;
}
.footer-links a{
  color: var(--muted);
  text-decoration:none;
  font-size: 14px;
  transition: color .15s;
}
.footer-links a:hover{
  color: var(--text);
}
.footer-copy{
  color: rgba(0,0,0,.40);
  font-size: 13px;
}
.footer-powered{
  color: rgba(0,0,0,.35);
  font-size: 12px;
  margin-top: 4px;
}
.footer-powered a{
  color: rgba(0,0,0,.50);
  text-decoration: none;
}
.footer-powered a:hover{
  color: var(--accent);
}

/* ---------- page layout ---------- */
.page-wrap{
  max-width: 1240px;
  margin: 0 auto;
  padding: 32px 18px 50px;
}

/* ---------- hero (landing page) ---------- */
.hero{
  text-align:center;
  padding: 80px 18px 60px;
  max-width: 800px;
  margin: 0 auto;
}
.hero h1{
  font-size: clamp(32px, 5vw, 56px);
  font-weight:900;
  line-height:1.1;
  margin:0 0 16px;
  letter-spacing:-.5px;
  background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero-subtitle{
  font-size: clamp(16px, 2.2vw, 20px);
  color: var(--muted);
  margin: 0 0 36px;
  line-height:1.5;
}
.hero-cta{
  display:inline-block;
  padding: 16px 36px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  color: white;
  font-weight: 800;
  font-size: 17px;
  letter-spacing:.2px;
  text-decoration:none;
  background: var(--accent);
  box-shadow: 0 12px 30px rgba(15,63,168,.25);
  transition: transform .15s ease, box-shadow .15s ease;
}
.hero-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(15,63,168,.30);
}

/* ---------- features grid ---------- */
.features-section{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 18px 60px;
}
.features-section .sectionTitle{
  text-align:center;
  margin-bottom:32px;
}
.features-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:20px;
}
.feature-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.feature-card::before{
  display:none;
}
.feature-card > *{ position:relative; }
.feature-icon{
  width:56px;height:56px;
  border-radius:16px;
  margin: 0 auto 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  border: 1px solid var(--border);
  background: rgba(15,63,168,.06);
}
.feature-card h3{
  font-size:17px;
  margin:0 0 8px;
  font-weight:800;
}
.feature-card p{
  color: var(--muted);
  font-size: 14px;
  line-height:1.5;
  margin:0;
}

/* ---------- steps section ---------- */
.steps-section{
  max-width: 900px;
  margin: 0 auto;
  padding: 0 18px 60px;
}
.steps-section .sectionTitle{
  text-align:center;
  margin-bottom:32px;
}
.steps-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:24px;
}
.step-item{
  text-align:center;
  position:relative;
}
.step-num{
  width:44px;height:44px;
  border-radius:50%;
  background: linear-gradient(135deg, rgba(15,63,168,.12), rgba(232,137,28,.10));
  border: 1px solid rgba(15,63,168,.20);
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 0 auto 14px;
  font-weight:900;
  font-size:18px;
  color: var(--accent);
}
.step-item h4{
  margin:0 0 6px;
  font-size:15px;
  font-weight:800;
}
.step-item p{
  color: var(--muted);
  font-size: 13.5px;
  line-height:1.4;
  margin:0;
}

/* ---------- CTA banner ---------- */
.cta-banner{
  text-align:center;
  padding: 50px 18px 20px;
  max-width: 700px;
  margin: 0 auto;
}
.cta-banner h2{
  font-size: 26px;
  font-weight:900;
  margin: 0 0 12px;
}
.cta-banner p{
  color: var(--muted);
  margin: 0 0 24px;
  font-size: 15px;
}

/* ---------- info pages ---------- */
.page-section{
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 18px;
}
.page-title{
  font-size: 32px;
  font-weight:900;
  margin: 0 0 8px;
  letter-spacing:-.3px;
}
.page-subtitle{
  color: var(--muted);
  font-size: 16px;
  margin: 0 0 32px;
}
.page-content{
  line-height:1.7;
  color: rgba(0,0,0,.75);
  font-size: 15px;
}
.page-content h3{
  font-size:18px;
  font-weight:800;
  margin: 28px 0 10px;
}
.page-content h4{
  font-size:15px;
  font-weight:700;
  color: var(--accent);
  margin: 20px 0 8px;
}
.page-content p{
  margin: 0 0 16px;
}
.page-content ul{
  margin: 0 0 16px;
  padding-left:20px;
}
.page-content li{
  margin-bottom:8px;
}

/* ---------- FAQ accordion ---------- */
.faq-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.faq-item{
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  overflow:hidden;
}
.faq-question{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 16px 18px;
  background:none;
  border:none;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  cursor:pointer;
  text-align:left;
}
.faq-question::after{
  content:"+";
  font-size: 20px;
  font-weight: 400;
  color: var(--muted);
  transition: transform .2s ease;
  flex-shrink:0;
  margin-left:12px;
}
.faq-item.open .faq-question::after{
  content:"\2212";
}
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition: max-height .25s ease;
}
.faq-answer-inner{
  padding: 0 18px 16px;
  color: var(--muted);
  font-size: 14px;
  line-height:1.6;
}

/* ---------- contact page ---------- */
.contact-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:20px;
}
.contact-card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:24px;
}
.contact-card h3{
  margin: 0 0 10px;
  font-size:16px;
  font-weight:800;
}
.contact-card p{
  color: var(--muted);
  font-size: 14px;
  line-height:1.5;
  margin:0;
}
.contact-card a{
  color: var(--accent);
  text-decoration:none;
}
.contact-card a:hover{
  text-decoration:underline;
}
.contact-card-form{
  grid-column: 1 / -1;
}
.issue-form{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:16px;
}
.issue-form label{
  font-size:13px;
  font-weight:600;
  color:var(--text);
}
.issue-form .optional{
  font-weight:400;
  color:var(--muted);
}
.issue-form input,
.issue-form select,
.issue-form textarea{
  width:100%;
  padding:10px 12px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--bg1);
  color:var(--text);
  font-size:14px;
  font-family:inherit;
  box-sizing:border-box;
}
.issue-form input:focus,
.issue-form select:focus,
.issue-form textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(15,63,168,.18);
}
.issue-form textarea{
  resize:vertical;
  min-height:100px;
}
.issue-submit{
  align-self:flex-start;
  padding:10px 28px;
  border:none;
  border-radius:8px;
  background:var(--accent);
  color:#fff;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  transition:background .15s;
}
.issue-submit:hover{
  background:#0C3289;
}

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .grid{ grid-template-columns: 1fr; }
  .predict-layout{ grid-template-columns: 1fr; }
  .predict-layout > .vtabs{ flex-direction:row; flex-wrap:wrap; }
  .content{ min-height: 360px; }
  .twoCol{ grid-template-columns: 1fr; }
  .features-grid{ grid-template-columns: 1fr; }
  .steps-grid{ grid-template-columns: 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
  .footer-inner{ flex-direction:column; text-align:center; }
}

@media (max-width: 768px){
  .nav-toggle{
    display:flex;
  }
  .nav-links{
    display:none;
    position:absolute;
    top:60px;
    left:0;
    right:0;
    z-index:99;
    flex-direction:column;
    background: var(--bg0);
    border-bottom: 1px solid var(--border);
    padding: 12px 18px;
    gap:4px;
  }
  .nav-links.open{
    display:flex;
  }
  .nav-link{
    width:100%;
    padding: 12px 14px;
  }
  .hero{ padding: 50px 18px 40px; }
  .hero h1{ font-size: 28px; }

  .nav-auth{
    width:100%;
    display:flex;
    gap:8px;
    padding:8px 14px 4px;
  }
}

/* ---------- Auth ---------- */
.nav-auth{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}
.nav-user{
  font-size:.82rem;
  color:var(--muted);
  max-width:160px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.nav-auth-btn{
  font-size:.82rem;
  padding:6px 14px;
  border-radius:8px;
  text-decoration:none;
  color:var(--text);
  background:var(--card2);
  border:1px solid var(--border);
  cursor:pointer;
  transition:background .15s, border-color .15s;
  white-space:nowrap;
}
.nav-auth-btn:hover{
  background:rgba(0,0,0,.06);
  border-color:rgba(0,0,0,.15);
}
.nav-register-btn{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.nav-register-btn:hover{
  background:#0C3289;
}
.nav-logout-btn{
  font-family:inherit;
}

/* Auth pages */
.auth-page{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.auth-card{
  width:100%;
  max-width:420px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:32px 28px;
  margin-top:12px;
}
.auth-form label{
  display:block;
  font-size:.85rem;
  color:var(--muted);
  margin-bottom:6px;
  margin-top:16px;
}
.auth-form label:first-of-type{
  margin-top:0;
}
.auth-form input{
  width:100%;
  padding:10px 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--bg1);
  color:var(--text);
  font-size:.95rem;
  outline:none;
  transition:border-color .15s;
}
.auth-form input:focus{
  border-color:var(--accent);
}
.auth-submit{
  width:100%;
  margin-top:22px;
  padding:12px;
  border:none;
  border-radius:12px;
  background:var(--accent);
  color:#fff;
  font-size:1rem;
  font-weight:600;
  cursor:pointer;
  transition:background .15s;
}
.auth-submit:hover{
  background:#0C3289;
}
.auth-submit:disabled{
  opacity:.6;
  cursor:not-allowed;
}
.auth-error{
  background:rgba(217,50,81,.08);
  border:1px solid rgba(217,50,81,.25);
  color:var(--high);
  padding:10px 14px;
  border-radius:10px;
  font-size:.88rem;
  margin-bottom:8px;
}
.auth-success{
  background:rgba(26,158,111,.08);
  border:1px solid rgba(26,158,111,.25);
  color:var(--safe);
  padding:10px 14px;
  border-radius:10px;
  font-size:.88rem;
  margin-bottom:8px;
}
.auth-switch{
  text-align:center;
  margin-top:18px;
  font-size:.88rem;
  color:var(--muted);
}
.auth-switch a{
  color:var(--accent);
  text-decoration:none;
}
.auth-switch a:hover{
  text-decoration:underline;
}
.auth-terms{
  text-align:center;
  margin-top:12px;
  font-size:.82rem;
  color:var(--muted);
}
.auth-terms a{
  color:var(--accent);
  text-decoration:none;
}
.auth-terms a:hover{
  text-decoration:underline;
}

/* Prediction inline disclaimer */
.prediction-disclaimer{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-top:18px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.06);
  background:rgba(0,0,0,.02);
  color:var(--muted);
  font-size:.82rem;
  line-height:1.5;
}
.prediction-disclaimer a{
  color:var(--accent);
  text-decoration:none;
}
.prediction-disclaimer a:hover{
  text-decoration:underline;
}

/* Auth gate overlay (model tab / prediction limit) */
.auth-gate{
  text-align:center;
  padding:48px 24px;
}
.auth-gate-icon{
  margin-bottom:16px;
}
.auth-gate h3{
  font-size:1.2rem;
  margin:0 0 8px;
}
.auth-gate p{
  color:var(--muted);
  max-width:420px;
  margin:0 auto;
  line-height:1.5;
}

/* ---------- Situation Room ---------- */
.srAlert{
  background:rgba(217,50,81,.06);
  border:1px solid rgba(217,50,81,.20);
  border-radius:12px;
  padding:16px;
  margin-bottom:16px;
}
.srAlertTitle{
  font-weight:700;
  font-size:1rem;
  margin-bottom:10px;
  color:var(--high);
}
.srAlertItem{
  background:rgba(0,0,0,.03);
  border-radius:8px;
  padding:10px 12px;
  margin-bottom:8px;
}
.srAlertItem:last-child{ margin-bottom:0; }
.srAlertHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:4px;
}
.srAlertAirline{
  font-weight:600;
  font-size:.92rem;
}
.srAlertSev{
  font-size:.72rem;
  font-weight:700;
  padding:2px 8px;
  border-radius:6px;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.3px;
}
.srAlertType{
  font-size:.82rem;
  color:var(--muted);
  margin-bottom:2px;
}
.srAlertSummary{
  font-size:.85rem;
  line-height:1.45;
  margin-bottom:4px;
}
.srAlertDates{
  font-size:.78rem;
  color:var(--muted);
}

.srFilters{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:16px;
}
.srFilterPill{
  background:rgba(0,0,0,.03);
  border:1px solid rgba(0,0,0,.08);
  border-radius:20px;
  padding:5px 12px;
  font-size:.78rem;
  color:var(--fg);
  cursor:pointer;
  transition:all .15s;
  font-family:inherit;
}
.srFilterPill:hover{
  background:rgba(15,63,168,.06);
  border-color:rgba(15,63,168,.20);
}
.srFilterActive{
  background:rgba(15,63,168,.08);
  border-color:var(--accent);
  color:var(--accent);
  font-weight:600;
}
.srFilterCount{
  opacity:.55;
  font-size:.72rem;
  margin-left:3px;
}

.srCard{
  background:rgba(0,0,0,.02);
  border:1px solid rgba(0,0,0,.06);
  border-radius:10px;
  padding:14px 16px;
  margin-bottom:10px;
  transition:border-color .15s;
}
.srCard:hover{
  border-color:rgba(0,0,0,.15);
}
.srCardTop{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
}
.srSeverityDot{
  width:8px;
  height:8px;
  border-radius:50%;
  display:inline-block;
  flex-shrink:0;
}
.srCategoryBadge{
  font-size:.7rem;
  font-weight:600;
  border:1px solid;
  border-radius:6px;
  padding:1px 7px;
  white-space:nowrap;
}
.srCardTime{
  font-size:.72rem;
  color:var(--muted);
  margin-left:auto;
}
.srCardTitle{
  font-weight:600;
  font-size:.95rem;
  line-height:1.35;
  margin-bottom:4px;
}
.srCardSummary{
  font-size:.85rem;
  color:rgba(0,0,0,.60);
  line-height:1.5;
  margin-bottom:6px;
}
.srCardAffected{
  font-size:.78rem;
  color:var(--muted);
  margin-bottom:4px;
}
.srCardSource{
  font-size:.78rem;
}
.srCardSource a{
  color:var(--accent);
  text-decoration:none;
}
.srCardSource a:hover{
  text-decoration:underline;
}

.srEmpty{
  text-align:center;
  padding:40px 20px;
  color:var(--muted);
  font-size:.9rem;
}

.srFooter{
  text-align:center;
  padding:14px 0 4px;
  font-size:.76rem;
  color:var(--muted);
}

/* ---------- Chart Interactivity ---------- */
.chart-bar-rect{
  transition:opacity .15s, filter .15s;
}
.chart-bar:hover .chart-bar-rect{
  opacity:.85;
  filter:brightness(1.2);
}
.chartContainer{
  position:relative;
}
.chartTooltip{
  position:absolute;
  background:rgba(255,255,255,.97);
  border:1px solid rgba(0,0,0,.10);
  border-radius:8px;
  padding:8px 12px;
  pointer-events:none;
  z-index:10;
  min-width:120px;
  box-shadow:0 4px 12px rgba(0,0,0,.10);
}
.chartTooltipDate{
  font-weight:700;
  font-size:.85rem;
  margin-bottom:2px;
}
.chartTooltipVal{
  font-size:.8rem;
  color:rgba(0,0,0,.70);
}
.chartTooltipN{
  font-size:.75rem;
  color:var(--muted);
}
.chartTooltipHint{
  font-size:.72rem;
  color:var(--accent);
  margin-top:4px;
  font-style:italic;
}

/* ---------- Flight Detail Page ---------- */
.fdPage{
  padding-top:24px;
}
.fdBack{
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:var(--accent);
  text-decoration:none;
  font-size:.88rem;
  margin-bottom:16px;
  transition:opacity .15s;
}
.fdBack:hover{
  opacity:.8;
  text-decoration:underline;
}

.fdHeader{
  background:rgba(0,0,0,.02);
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
  padding:20px 24px;
  margin-bottom:16px;
}
.fdHeader h2{
  margin:0 0 4px;
  font-size:1.3rem;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.fdHeaderDate{
  color:var(--muted);
  font-size:.9rem;
  margin-bottom:8px;
}
.fdHeaderSub{
  color:var(--muted);
  font-size:.82rem;
}
.fdHeaderRoute{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:8px;
}
.fdRouteCode{
  font-size:1.5rem;
  font-weight:800;
  letter-spacing:1px;
}
.fdRouteArrow{
  font-size:1.2rem;
}

/* Status badges */
.fdStatus{
  font-size:.72rem;
  font-weight:700;
  padding:2px 8px;
  border-radius:6px;
  text-transform:uppercase;
  letter-spacing:.3px;
}
.fdStatusGood{ background:rgba(26,158,111,.10); color:#1A9E6F; }
.fdStatusBad{ background:rgba(217,50,81,.10); color:#D93251; }
.fdStatusActive{ background:rgba(15,63,168,.10); color:#0F3FA8; }
.fdStatusNeutral{ background:rgba(0,0,0,.05); color:var(--muted); }

/* Delay badges */
.fdDelay{
  font-size:.82rem;
  font-weight:700;
  padding:2px 8px;
  border-radius:6px;
}
.fdDelaySafe{ background:rgba(26,158,111,.10); color:#1A9E6F; }
.fdDelayCaution{ background:rgba(201,154,0,.10); color:#C99A00; }
.fdDelayRisk{ background:rgba(217,106,32,.10); color:#D96A20; }
.fdDelayHigh{ background:rgba(217,50,81,.10); color:#D93251; }
.fdDelayNone{ background:rgba(0,0,0,.04); color:var(--muted); }

/* Timeline */
.fdTimeline{
  background:rgba(0,0,0,.02);
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
  padding:20px 24px;
  margin-bottom:16px;
  display:flex;
  gap:24px;
  flex-wrap:wrap;
}
.fdTimelineSection{
  flex:1;
  min-width:200px;
}
.fdTimelineLabel{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:1.5px;
  color:var(--muted);
  margin-bottom:10px;
  text-transform:uppercase;
}
.fdTimelineRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:6px 0;
  border-bottom:1px solid rgba(0,0,0,.04);
}
.fdTimelineRow:last-child{ border-bottom:none; }
.fdTimelineKey{
  font-size:.85rem;
  color:rgba(0,0,0,.50);
}
.fdTimelineVal{
  font-size:.9rem;
  font-weight:600;
}
.fdTimelineDivider{
  width:1px;
  background:rgba(0,0,0,.08);
  align-self:stretch;
}

/* Comparison bars */
.fdComparison{
  background:rgba(0,0,0,.02);
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
  padding:20px 24px;
  margin-bottom:16px;
}
.fdComparison h4{
  margin:0 0 14px;
  font-size:.95rem;
}
.fdCompItem{
  margin-bottom:14px;
}
.fdCompItem:last-child{ margin-bottom:0; }
.fdCompLabel{
  font-size:.82rem;
  font-weight:600;
  margin-bottom:6px;
}
.fdCompBars{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.fdCompBarRow{
  display:flex;
  align-items:center;
  gap:8px;
}
.fdCompBarLabel{
  font-size:.75rem;
  color:var(--muted);
  min-width:75px;
}
.fdCompBarTrack{
  flex:1;
  height:12px;
  background:rgba(0,0,0,.04);
  border-radius:6px;
  overflow:hidden;
}
.fdCompBarFill{
  height:100%;
  border-radius:6px;
  transition:width .4s ease;
}
.fdCompBarVal{
  font-size:.78rem;
  font-weight:600;
  min-width:40px;
  text-align:right;
}

/* Day picker (multiple flights) */
.fdPickerList{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.fdPickerRow{
  display:flex;
  align-items:center;
  gap:12px;
  background:rgba(0,0,0,.02);
  border:1px solid rgba(0,0,0,.06);
  border-radius:10px;
  padding:12px 16px;
  text-decoration:none;
  color:var(--fg);
  transition:border-color .15s, background .15s;
}
.fdPickerRow:hover{
  border-color:var(--accent);
  background:rgba(15,63,168,.04);
}
.fdPickerTimes{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:600;
}
.fdPickerArrow{
  color:var(--muted);
  font-size:.8rem;
}
.fdPickerDelay{
  margin-left:auto;
}
.fdPickerCta{
  color:var(--accent);
  font-size:.82rem;
  font-weight:600;
  white-space:nowrap;
}

@media(max-width:600px){
  .fdTimeline{ flex-direction:column; gap:16px; }
  .fdTimelineDivider{ width:100%; height:1px; }
  .fdPickerRow{ flex-wrap:wrap; }
  .fdPickerDelay{ margin-left:0; }
}

/* ---- Delay Map ---- */
.delay-map-section{
  max-width:1100px;
  margin:2rem auto 0;
  padding:0 1rem 2rem;
}
.sr-legend{
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  justify-content:center;
  margin-bottom:0.75rem;
  font-size:0.82rem;
  color:var(--muted);
}
.sr-legend-item{
  display:flex;
  align-items:center;
  gap:5px;
}
.sr-dot{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
}
.sr-map-tooltip{
  background:var(--bg1) !important;
  color:var(--text) !important;
  border:1px solid var(--border) !important;
  font-weight:600;
  font-size:0.8rem;
  padding:2px 6px !important;
  border-radius:4px;
  box-shadow:none !important;
}
.sr-map-tooltip::before{
  border-top-color:var(--border) !important;
}
.sr-popup{
  font-size:0.85rem;
  line-height:1.5;
  min-width:140px;
}
.sr-popup strong{
  font-size:1rem;
  display:block;
  margin-bottom:4px;
}
/* Dark theme for Leaflet popups */
.leaflet-popup-content-wrapper{
  background:var(--bg1) !important;
  color:var(--text) !important;
  border:1px solid var(--border) !important;
  border-radius:8px !important;
  box-shadow:var(--shadow) !important;
}
.leaflet-popup-tip{
  background:var(--bg1) !important;
  border:1px solid var(--border) !important;
}
.leaflet-popup-close-button{
  color:var(--muted) !important;
}
#srMapContainer{
  border:1px solid var(--border);
  background:var(--bg0);
}
@media(max-width:600px){
  #srMapContainer{ height:360px !important; }
}