*{box-sizing:border-box}html,body{margin:0;padding:0}body{
  font-family:Inter,Segoe UI,Arial,sans-serif;
  background:radial-gradient(circle at top,#2b0505 0%,#110303 42%,#080808 100%);
  color:#fff; min-height:100vh; overflow-x:hidden;
}
.bg-glow{
  position:fixed; inset:auto -10% 55% -10%; height:320px;
  background:radial-gradient(circle, rgba(255,74,27,.18), transparent 65%);
  pointer-events:none; filter:blur(8px);
}
.topbar{
  position:sticky; top:0; z-index:20; backdrop-filter:blur(10px);
  display:flex; justify-content:space-between; align-items:center;
  padding:18px 24px; background:rgba(8,8,8,.72); border-bottom:1px solid rgba(255,255,255,.06)
}
.brand{display:flex; gap:10px; align-items:center; font-weight:800; letter-spacing:.06em}
.dot{width:10px; height:10px; border-radius:50%; background:#35e27c; box-shadow:0 0 16px #35e27c}
.brand-text{font-size:1.1rem}
.top-actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.badge{
  padding:10px 14px; border-radius:999px; font-size:.82rem; font-weight:700;
  background:linear-gradient(180deg,#1b6a46,#0c3e29); border:1px solid rgba(53,226,124,.35)
}
.container{max-width:1180px; margin:0 auto; padding:28px 18px 48px}
.card{
  background:linear-gradient(180deg,rgba(36,14,14,.92),rgba(20,10,10,.92));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 60px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04);
  border-radius:24px;
}
.hero{
  padding:28px; display:flex; justify-content:space-between; gap:18px; align-items:center;
}
.hero-left{display:flex; align-items:center; gap:20px}
.plane{
  width:94px; height:94px; border-radius:24px; display:grid; place-items:center;
  font-size:2.4rem;
  background:radial-gradient(circle at 30% 20%, rgba(118,177,255,.28), rgba(255,76,76,.18) 55%, rgba(255,255,255,.02) 100%);
  border:1px solid rgba(255,255,255,.08)
}
.eyebrow{font-size:1.45rem; letter-spacing:.12em; color:#d5bbbb}
.big-time{font-size:4rem; font-weight:900; margin-top:6px}
.muted{color:#c0a9a9; margin-top:10px; max-width:560px}
.hero-right{display:grid; grid-template-columns:1fr; gap:12px; min-width:220px}
.metric{
  padding:16px 18px; border-radius:18px; background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06)
}
.metric-label{display:block; color:#d6baba; font-size:.9rem}
.metric-value{display:block; margin-top:6px; font-size:1.6rem; font-weight:800}
.grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:18px
}
.signal-card{padding:24px}
.card-title{color:#d7c2c2; letter-spacing:.14em; font-size:1.06rem}
.signal-time{font-size:3rem; font-weight:900; margin:14px 0}
.pill{
  display:inline-block; padding:8px 12px; border-radius:999px; font-weight:800; font-size:.78rem; margin-bottom:12px
}
.green{background:#123c24; color:#7ef6aa}
.amber{background:#49351a; color:#ffd174}
.blue{background:#132d44; color:#80c7ff}
.signal-copy{color:#dccaca; font-size:1.16rem}
.content-grid{
  display:grid; grid-template-columns:1.55fr .95fr; gap:16px; margin-top:18px
}
.chat-card,.side-card{padding:22px}
.section-head{
  display:flex; justify-content:space-between; gap:12px; align-items:center; margin-bottom:12px
}
.section-head h2{margin:0; font-size:1.25rem}
.small-label{color:#c7a9a9; font-size:.85rem}
.chat-feed{
  display:flex; flex-direction:column; gap:12px; height:420px; overflow:auto; padding-right:6px
}
.msg{
  max-width:84%; padding:12px 14px; border-radius:16px; line-height:1.4;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07)
}
.msg.user{align-self:flex-end; background:rgba(255,76,76,.13)}
.msg.system{align-self:flex-start}
.msg .name{display:block; font-size:.8rem; font-weight:800; color:#ffb2b2; margin-bottom:4px}
.chat-form{display:flex; gap:10px; margin-top:14px}
.chat-form input{
  flex:1; background:rgba(255,255,255,.05); color:#fff; border:1px solid rgba(255,255,255,.08);
  border-radius:14px; padding:14px 16px; outline:none
}
.btn{
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none;
  color:#fff; border-radius:14px; padding:13px 18px; font-weight:800; border:1px solid transparent;
  transition:.2s transform,.2s opacity
}
.btn:hover{transform:translateY(-1px); opacity:.96}
.btn-primary{background:linear-gradient(180deg,#ff4a2b,#c22013)}
.btn-outline{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08)}
.btn-full{width:100%; margin-top:14px}
.steps{margin:0 0 18px 18px; color:#e8d6d6; line-height:1.7}
.notice{
  margin-top:16px; padding:14px 15px; border-radius:16px; color:#d7bbbb;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07)
}
@media (max-width: 980px){
  .hero,.content-grid{grid-template-columns:1fr; display:grid}
  .hero-right{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .topbar{padding:14px 16px}
  .hero{padding:20px}
  .hero-left{align-items:flex-start; flex-direction:column}
  .big-time{font-size:3rem}
  .hero-right{grid-template-columns:1fr}
  .section-head{flex-direction:column; align-items:flex-start}
  .chat-form{flex-direction:column}
}