:root{
  --bg0:#070915;
  --bg1:#0b1022;
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.12);
  --muted:rgba(255,255,255,.65);
  --text:rgba(255,255,255,.92);
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --radius: 22px;

  --safe:#38d39f;
  --caution:#f7c948;
  --risk:#ff8a4c;
  --high:#ff4d6d;
  --accent:#7c5cff;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(900px 500px at 15% 0%, rgba(124,92,255,.35), transparent 60%),
    radial-gradient(900px 500px at 95% 10%, rgba(56,211,159,.18), transparent 55%),
    radial-gradient(700px 450px at 80% 80%, rgba(247,201,72,.10), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

.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:14px;
  background: linear-gradient(135deg, rgba(124,92,255,1), rgba(56,211,159,.55));
  box-shadow: 0 10px 30px rgba(124,92,255,.25);
}
.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(255,255,255,.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.dot{
  width:10px;height:10px;border-radius:50%;
  background: rgba(255,255,255,.25);
}
.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;
}

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

.card::before{
  content:"";
  position:absolute;
  inset:-1px;
  background: radial-gradient(700px 300px at 10% 0%, rgba(124,92,255,.16), transparent 60%),
              radial-gradient(700px 300px at 90% 0%, rgba(56,211,159,.10), transparent 55%);
  pointer-events:none;
  opacity:.8;
}

.card > *{ position:relative; }

.cardHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 18px 12px;
  border-bottom: 1px solid rgba(255,255,255,.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(255,255,255,.12);
  outline: none;
  background: rgba(0,0,0,.18);
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

input:focus, select:focus{
  border-color: rgba(124,92,255,.55);
  box-shadow: 0 0 0 3px rgba(124,92,255,.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(255,255,255,.14);
  border-radius:16px;
  background: rgba(8, 12, 28, .96);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  backdrop-filter: blur(12px);
}

.suggestions.open{
  display:block;
}

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

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

.suggestionItem:hover,
.suggestionItem.active{
  background: rgba(124,92,255,.18);
}

.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: linear-gradient(90deg, rgba(124,92,255,1), rgba(72,134,255,1));
  box-shadow: 0 12px 34px rgba(124,92,255,.25);
}
.btn:disabled{
  opacity:.6;
  cursor:not-allowed;
}

.btnSecondary{
  width:auto;
  margin-top:0;
  padding: 11px 14px;
  background: rgba(124,92,255,.18);
  border: 1px solid rgba(124,92,255,.40);
  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(255,255,255,.12);
  background: rgba(0,0,0,.16);
  color: rgba(255,255,255,.78);
  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: white;
  border-color: rgba(124,92,255,.60);
  background: rgba(124,92,255,.20);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.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;
}

.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(255,255,255,.12);
  background: rgba(0,0,0,.18);
}
.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(255,255,255,.10);
  font-weight: 750;
  font-size: 13px;
}
.bandSafe{ background: rgba(56,211,159,.14); color: rgba(56,211,159,.95); border-color: rgba(56,211,159,.25); }
.bandCaution{ background: rgba(247,201,72,.14); color: rgba(247,201,72,.95); border-color: rgba(247,201,72,.28); }
.bandRisk{ background: rgba(255,138,76,.14); color: rgba(255,138,76,.95); border-color: rgba(255,138,76,.28); }
.bandHigh{ background: rgba(255,77,109,.14); color: rgba(255,77,109,.95); border-color: rgba(255,77,109,.28); }

.kpis{
  flex: 1 1 340px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
.kpi{
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.14);
}
.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(255,255,255,.10);
  background: rgba(0,0,0,.16);
  overflow:hidden;
}
.barFill{
  height:100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(124,92,255,1), rgba(56,211,159,.9));
  width: 0%;
}
.barVal{
  text-align:right;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.88);
  font-size: 12.5px;
  font-weight: 800;
}

.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(255,255,255,.10);
  border-radius: 18px;
  background: rgba(0,0,0,.14);
  padding: 14px;
}
.miniCard h4{
  margin:0 0 6px;
  font-size: 13px;
  color: rgba(255,255,255,.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(255,255,255,.12);
  background: rgba(0,0,0,.16);
  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(255,255,255,.10);
  background: rgba(0,0,0,.14);
  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(255,255,255,.10);
  border-radius:18px;
  background: rgba(0,0,0,.14);
  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(255,255,255,.10);
}

.similarFlightTitle{
  font-weight:800;
  font-size:15px;
}

.rankBadge{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  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(255,255,255,.10);
  background: rgba(255,255,255,.05);
}

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

.kv{
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:12px 14px;
  background:rgba(255,255,255,.03);
}

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

.kv strong{
  font-size:1.05rem;
  color:#fff;
}

@media (max-width: 980px){
  .grid{ grid-template-columns: 1fr; }
  .content{ min-height: 360px; }
  .twoCol{ grid-template-columns: 1fr; }
}