:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
  color: #182133;
  background: #f5f7fb;
  line-height: 1.5;
}
* { box-sizing: border-box; }
body { margin: 0; }
.site-header {
  height: 62px; padding: 0 max(22px, calc((100% - 920px) / 2));
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; border-bottom: 1px solid #e0e5ed;
}
.brand { color: #1f48bd; font-size: 19px; font-weight: 800; text-decoration: none; }
main { max-width: 920px; margin: 42px auto; padding: 0 22px 60px; }
h1 { margin: 0 0 8px; font-size: 30px; }
h2 { margin: 0; font-size: 18px; }
.muted, .summary, small { color: #687386; }
.cards { display: grid; gap: 12px; margin-top: 24px; }
.card, .lecture, .login-card, .empty {
  background: #fff; border: 1px solid #dfe4ec; border-radius: 12px;
  box-shadow: 0 2px 10px rgba(30, 43, 70, .04);
}
.card { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; }
.card p { margin: 4px 0 0; color: #687386; }
.button, button.primary {
  display: inline-block; border: 0; border-radius: 8px; padding: 9px 14px;
  color: #fff; background: #2855d9; font-weight: 700; text-decoration: none; cursor: pointer;
}
.button.secondary { color: #2748a5; background: #eaf0ff; }
.link-button { border: 0; background: transparent; color: #687386; cursor: pointer; }
.login-card { max-width: 430px; margin: 90px auto; padding: 28px; }
label { display: block; font-size: 13px; margin: 18px 0 5px; }
input { width: 100%; padding: 11px; border: 1px solid #cbd2de; border-radius: 8px; }
button.primary { width: 100%; margin-top: 14px; }
.error, .status-failed { color: #b42318; }
.back { display: block; margin-bottom: 18px; color: #526079; text-decoration: none; }
.lecture-list { display: grid; gap: 8px; margin-top: 25px; }
.lecture { padding: 13px 16px; display: flex; gap: 12px; }
.lecture-copy { display: grid; }
.lecture-copy a { color: #172b61; font-weight: 700; text-decoration: none; }
.status-completed { color: #08783e; }
.status-downloading, .status-transcribing, .status-exporting, .status-queued { color: #2855d9; }
.actions { display: flex; gap: 8px; margin: 24px 0; }
.transcript { margin-top: 32px; }
.segment { display: grid; grid-template-columns: 80px 1fr; gap: 14px; padding: 10px 0; border-bottom: 1px solid #e5e9f0; }
.segment time { color: #687386; font-variant-numeric: tabular-nums; }
.segment p { margin: 0; white-space: pre-wrap; }
.empty { margin-top: 20px; padding: 24px; color: #687386; }
@media (max-width: 600px) { main { margin-top: 25px; } .card { align-items: flex-start; gap: 12px; } }