:root{
  --bg:#f4f6ff;
  --panel:#ffffff;
  --line:#dfe5ff;
  --text:#17213a;
  --muted:#607093;
  --primary:#3c66ff;
  --primary-dark:#2749c7;
  --accent:#8a5dff;
  --danger:#d9475c;
  --success:#19a36b;
  --shadow:0 20px 50px rgba(30, 52, 123, 0.12);
  --radius:22px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(138,93,255,.10), transparent 24%),
    linear-gradient(180deg,#f7f8ff 0%,#eef2ff 100%);
  min-height:100vh;
}

.page-shell{
  width:min(1280px, calc(100% - 32px));
  margin:24px auto 40px;
}

.hero{
  display:grid;
  grid-template-columns:1.5fr .9fr;
  gap:24px;
  align-items:stretch;
  margin-bottom:24px;
}

.hero__text,
.hero__card,
.card{
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(10px);
  border:1px solid rgba(223,229,255,.9);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.hero__text{
  padding:32px;
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  color:var(--primary-dark);
  background:rgba(60,102,255,.08);
  border:1px solid rgba(60,102,255,.14);
  padding:8px 12px;
  border-radius:999px;
}

h1{
  margin:18px 0 12px;
  font-size:clamp(32px,5vw,54px);
  line-height:1.02;
}

.hero p,
.card__head p,
.steps,
.status-box,
.challenge-meta{
  color:var(--muted);
}

.hero__chips{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:22px;
}

.chip{
  padding:9px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  font-size:13px;
  font-weight:700;
}

.hero__card{
  padding:24px;
  display:flex;
  align-items:center;
}

.hero__mini{
  width:100%;
  background:linear-gradient(180deg, rgba(60,102,255,.08), rgba(138,93,255,.08));
  border:1px solid rgba(60,102,255,.14);
  border-radius:20px;
  padding:20px;
}

.mini-label{
  font-size:13px;
  font-weight:800;
  color:var(--primary-dark);
  margin-bottom:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.file-list{
  margin:0;
  padding-left:18px;
  line-height:1.9;
}

.grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:24px;
}

.card{
  padding:24px;
}

.card__head h2{
  margin:0 0 8px;
  font-size:24px;
}

.card__head p{
  margin:0 0 18px;
}

.upload-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:12px;
  margin-bottom:16px;
}

.upload-field{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  font-weight:700;
}

.upload-field input{
  width:100%;
}

.button-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

.btn{
  appearance:none;
  border:none;
  cursor:pointer;
  border-radius:14px;
  padding:13px 16px;
  font-weight:800;
  font-size:14px;
  transition:transform .12s ease, opacity .12s ease, background .12s ease;
}

.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}

.btn--primary{
  background:linear-gradient(135deg, var(--primary), var(--accent));
  color:#fff;
}

.btn--ghost{
  background:#fff;
  color:var(--text);
  border:1px solid var(--line);
}

.btn--danger{
  background:rgba(217,71,92,.10);
  color:#a61d36;
  border:1px solid rgba(217,71,92,.20);
}

.inline-check{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:700;
  color:var(--muted);
}

.status-box{
  margin-top:16px;
  border-radius:18px;
  background:#f9fbff;
  border:1px solid var(--line);
  padding:14px 16px;
  min-height:56px;
}

.card--camera{
  grid-row:span 2;
}

.camera-wrap{
  position:relative;
  margin-top:8px;
  border-radius:20px;
  overflow:hidden;
  background:#0f1530;
  border:1px solid rgba(255,255,255,.08);
  aspect-ratio: 16 / 10;
}

video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  background:#0f1530;
}

video.mirrored{
  transform:scaleX(-1);
}

.camera-overlay{
  pointer-events:none;
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  padding:16px;
  background:
    linear-gradient(180deg, rgba(8,12,31,.32), rgba(8,12,31,0) 28%);
}

.overlay-label{
  padding:10px 12px;
  border-radius:12px;
  background:rgba(12,18,45,.66);
  color:#fff;
  font-weight:800;
  backdrop-filter:blur(6px);
}

.predictions{
  margin-top:18px;
  display:grid;
  gap:12px;
}

.prediction{
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px;
  align-items:center;
}

.prediction__bar{
  grid-column:1 / -1;
  height:12px;
  border-radius:999px;
  overflow:hidden;
  background:#edf1ff;
  border:1px solid #dfe5ff;
}

.prediction__fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  transition:width .12s linear;
}

.prediction__name{
  font-weight:800;
}

.prediction__score{
  font-variant-numeric:tabular-nums;
  color:var(--muted);
  font-weight:700;
}

.challenge-box{
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(60,102,255,.06), rgba(138,93,255,.05));
  border-radius:20px;
  padding:18px;
  margin-bottom:14px;
}

.challenge-target{
  font-size:28px;
  font-weight:900;
  margin-bottom:10px;
}

.challenge-meta{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  font-weight:700;
}

.steps{
  margin:0;
  padding-left:18px;
  line-height:1.9;
}

code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.95em;
  background:#eef2ff;
  border:1px solid #dde5ff;
  padding:2px 6px;
  border-radius:8px;
}

@media (max-width: 980px){
  .hero,.grid{
    grid-template-columns:1fr;
  }
  .card--camera{
    grid-row:auto;
  }
  .upload-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 640px){
  .page-shell{width:min(100% - 20px, 1280px)}
  .hero__text,.hero__card,.card{padding:18px}
  h1{font-size:34px}
  .challenge-target{font-size:22px}
}