*{box-sizing:border-box}
:root{
  --bg:#0b1020;
  --card:#0f172a;
  --muted:#94a3b8;
  --text:#e2e8f0;
  --accent:#22d3ee;
  --accent2:#a78bfa;
  --border:#24324a;
  --ok:#34d399;
  --warn:#f59e0b;
  --bad:#f87171;
}
html,body{height:100%;}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.45;
  overflow-x:hidden;
}

.bg-gradient{
  position:fixed; inset:0;
  background:
    radial-gradient(1200px 600px at -10% 10%, rgba(167,139,250,.25), transparent 60%),
    radial-gradient(900px 500px at 110% -10%, rgba(34,211,238,.18), transparent 60%);
  filter:blur(40px);
  opacity:.9;
  pointer-events:none;
  z-index:0;
  animation:floatBg 18s ease-in-out infinite alternate;
}
@keyframes floatBg{from{transform:translateY(-10px)}to{transform:translateY(10px)}}

.container{
  max-width:1040px; margin:0 auto; padding:20px;
  position:relative; z-index:1;
}

.header{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 0 8px;
}
.title{margin:0; font-size:clamp(24px, 4vw, 40px); letter-spacing:.2px}
.subtitle{margin:6px 0 0; color:var(--muted)}
.title-wrap{flex:1}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border:1px solid var(--border);
  border-radius:20px; padding:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(10px);
  margin:14px 0;
  overflow:hidden;
}
.card h2{margin:4px 0 12px; font-size:clamp(18px, 3vw, 24px)}

.grid{
  display:grid; gap:12px;
  grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 900px){ .grid{grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 520px){ .grid{grid-template-columns: 1fr;} }

.field{display:flex; flex-direction:column; gap:6px}
.field input{
  background:#0b1224; color:var(--text);
  border:1px solid var(--border); border-radius:12px; padding:12px 12px;
  outline:none; transition:border .2s, box-shadow .2s, transform .1s;
}
.field input:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(34,211,238,.15)}

.btn{
  padding:10px 14px; border-radius:14px; border:1px solid var(--border);
  background:#111a2e; color:var(--text);
  font-weight:600; letter-spacing:.2px; cursor:pointer;
  transition: transform .06s ease, box-shadow .2s ease;
  box-shadow:0 4px 20px rgba(0,0,0,.25);
}
.btn:hover{transform: translateY(-1px)}
.btn:active{transform: translateY(0)}
.btn.primary{background:linear-gradient(135deg, #0ea5e9, #a78bfa); border-color:transparent; color:white}
.btn.secondary{background:#0c152a}
.btn.tiny{padding:6px 10px; font-size:12px; border-radius:10px}
.btn.glow{box-shadow:0 8px 35px rgba(79,70,229,.35)}

.hint{color:var(--muted); margin-top:8px; font-size:14px}

.log{
  background:#0b1224; border:1px solid var(--border); border-radius:12px;
  padding:12px; margin:8px 0 0; max-height:260px; overflow:auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,"Liberation Mono","Courier New", monospace;
  font-size: 12.5px;
}

.progress{height:12px; background:#0b1224; border:1px solid var(--border); border-radius:999px; overflow:hidden}
.progress__fill{height:100%; width:0%; background:linear-gradient(90deg, #22d3ee, #a78bfa)}
.progress__fill.anim{animation:progressPulse 1.8s ease-in-out infinite}
@keyframes progressPulse{0%{filter:brightness(1)}50%{filter:brightness(1.35)}100%{filter:brightness(1)}}

.results-grid{
  display:grid; grid-template-columns: repeat(6, 1fr); gap:10px;
}
@media (max-width: 900px){ .results-grid{grid-template-columns: repeat(3, 1fr);} }
@media (max-width: 520px){ .results-grid{grid-template-columns: repeat(2, 1fr);} }

.result-pill{
  background:#0b1224; border:1px solid var(--border); border-radius:16px;
  padding:10px 12px; text-align:center; position:relative;
  overflow:hidden;
}
.pill-label{font-size:12px; color:var(--muted)}
.pill-value{font-size:20px; font-weight:800; margin-top:2px}

.video-grid{display:grid; grid-template-columns: 1fr 1fr; gap:14px}
@media (max-width: 760px){ .video-grid{grid-template-columns: 1fr;} }

.video-card{
  position:relative; border-radius:16px; overflow:hidden; border:1px solid var(--border);
  background:#000814;
}
.video-card video{width:100%; display:block; aspect-ratio:16/9; background:#000}
.video-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55)); opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.video-card.loading .video-overlay{opacity:1; pointer-events:auto}
.badge{
  position:absolute; top:10px; left:10px; background:rgba(17,24,39,.75); border:1px solid var(--border);
  padding:4px 8px; border-radius:999px; font-size:12px; color:#fff
}

.spinner{
  width:26px; height:26px; border-radius:999px; border:3px solid rgba(255,255,255,.25); border-top-color:#fff;
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.actions{display:flex; gap:10px; margin-top:8px; flex-wrap:wrap}

.footer{display:flex; justify-content:center; padding:20px 0; color:var(--muted)}

.appear{opacity:0; transform:translateY(8px); animation:appear .6s ease forwards}
.appear:nth-child(1){animation-delay:.05s}
.appear:nth-child(2){animation-delay:.12s}
.appear:nth-child(3){animation-delay:.18s}
.appear:nth-child(4){animation-delay:.24s}
@keyframes appear{to{opacity:1; transform:translateY(0)}}