:root{
  --bg:#09090b;
  --panel:#18181b;
  --panel-2:#111114;
  --line:#27272a;
  --text:#fafafa;
  --muted:#a1a1aa;
  --ok:#10b981;
  --warn:#f59e0b;
  --danger:#ef4444;
}

*{box-sizing:border-box}

html,body{
  margin:0;
  min-height:100%;
  width:100%;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

body{
  background:
    radial-gradient(circle at top right, rgba(16,185,129,0.12), transparent 28%),
    radial-gradient(circle at bottom left, rgba(245,158,11,0.08), transparent 24%),
    var(--bg);
}

.shell{
  min-height:100vh;
}

.screen{
  width:100%;
}

.screen-hidden{
  display:none;
}

.screen-active{
  display:block;
}

.setupCard{
  max-width:980px;
  margin:0 auto;
  padding:2rem 1.25rem 2.5rem;
}

.setupHero,
.topbar,
.feedCard,
.statePanel{
  border:1px solid var(--line);
  border-radius:24px;
  background:rgba(24,24,27,0.92);
  box-shadow:0 24px 70px rgba(0,0,0,0.28);
}

.setupHero{
  padding:1.5rem;
}

.eyebrow{
  margin:0;
  font-size:0.75rem;
  text-transform:uppercase;
  letter-spacing:0.14em;
  color:var(--muted);
}

h1,h2,h3{
  margin:0;
  font-weight:600;
}

h1{
  margin-top:0.35rem;
  font-size:clamp(2rem, 4vw, 3rem);
  letter-spacing:-0.04em;
}

h2{
  font-size:1.5rem;
  letter-spacing:-0.03em;
}

h3{
  font-size:1.06rem;
}

.lede{
  margin:0.9rem 0 0;
  max-width:760px;
  color:#d4d4d8;
  line-height:1.6;
}

.setupActions,
.setupFooter{
  display:flex;
  gap:0.75rem;
  margin-top:1.1rem;
}

.btn{
  border:1px solid #3f3f46;
  background:#27272a;
  color:#fafafa;
  border-radius:14px;
  min-height:2.75rem;
  padding:0 1rem;
  font:inherit;
  font-weight:600;
  cursor:pointer;
  transition:background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}

.btn:hover{
  background:#323237;
  transform:translateY(-1px);
}

.btn:disabled{
  opacity:0.45;
  pointer-events:none;
}

.btn-primary{
  background:var(--ok);
  border-color:var(--ok);
  color:#04130d;
}

.statusLine{
  margin-top:0.9rem;
  color:var(--muted);
  font-size:0.94rem;
}

.assignmentList{
  display:grid;
  gap:0.8rem;
  margin-top:1rem;
}

.assignmentRow{
  display:flex;
  justify-content:space-between;
  gap:0.9rem;
  align-items:center;
  padding:1rem;
  border-radius:18px;
  background:rgba(17,17,20,0.94);
  border:1px solid var(--line);
}

.assignmentInfo{
  min-width:0;
}

.assignmentInfo strong{
  display:block;
  font-size:0.98rem;
}

.assignmentInfo span{
  display:block;
  margin-top:0.25rem;
  color:var(--muted);
  font-size:0.83rem;
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

select{
  min-height:2.75rem;
  border-radius:14px;
  border:1px solid #3f3f46;
  background:#1f1f23;
  color:#fafafa;
  padding:0 0.85rem;
  font:inherit;
}

.topbar{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:flex-start;
  margin:1.2rem;
  padding:1.2rem 1.25rem;
}

.toolbar{
  display:flex;
  align-items:center;
  gap:0.75rem;
  flex-wrap:wrap;
}

.selectWrap{
  display:flex;
  align-items:center;
  gap:0.55rem;
  padding:0.45rem 0.55rem 0.45rem 0.85rem;
  border-radius:14px;
  background:#111114;
  border:1px solid var(--line);
  color:var(--muted);
  font-size:0.9rem;
}

.dashboardStatusRow{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:center;
  padding:0 1.2rem;
}

.apiLink{
  color:#34d399;
  text-decoration:none;
  font-size:0.92rem;
}

.dashboardLayout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:1rem;
  padding:1rem 1.2rem 1.4rem;
}

.feedGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
}

.feedCard,
.statePanel{
  padding:1rem;
}

.feedHeader,
.panelHeader{
  display:flex;
  justify-content:space-between;
  gap:0.75rem;
  align-items:center;
}

.feedMeta,
.panelMeta{
  margin:0.35rem 0 0;
  color:var(--muted);
  font-size:0.88rem;
}

.feedBadge,
.panelChip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:1.9rem;
  padding:0 0.7rem;
  border-radius:999px;
  border:1px solid #3f3f46;
  background:#111114;
  color:#d4d4d8;
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
}

.videoFrame{
  position:relative;
  width:100%;
  aspect-ratio:16/10;
  margin-top:0.95rem;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--line);
  background:#050507;
}

video,canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

video{
  object-fit:contain;
  background:#050507;
}

canvas{
  pointer-events:none;
}

.feedFooter{
  margin-top:0.85rem;
}

.cardRow{
  display:flex;
  flex-wrap:wrap;
  gap:0.5rem;
  margin-top:0.65rem;
}

.cardChip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:4rem;
  min-height:2.2rem;
  padding:0 0.7rem;
  border-radius:999px;
  border:1px solid #3f3f46;
  background:#111114;
  color:#fafafa;
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:0.92rem;
}

.cardChip.red{
  color:#fca5a5;
}

.cardChip.empty{
  color:#71717a;
}

.monoPanel{
  margin-top:0.9rem;
  border-radius:18px;
  border:1px solid var(--line);
  background:#0c0c10;
  padding:0.9rem 1rem;
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:0.95rem;
  line-height:1.6;
  min-height:4.6rem;
}

@media (max-width:1180px){
  .dashboardLayout{
    grid-template-columns:1fr;
  }

  .feedGrid{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .setupCard{
    padding:1rem 0.75rem 1.5rem;
  }

  .topbar,
  .dashboardStatusRow,
  .dashboardLayout{
    margin:0.75rem;
    padding-left:0;
    padding-right:0;
  }

  .topbar{
    flex-direction:column;
  }

  .assignmentRow{
    flex-direction:column;
    align-items:stretch;
  }

  .toolbar{
    width:100%;
  }
}