:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f4f1e8;
  color: #17201d;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body { margin: 0; min-height: 100vh; }

main { width: min(680px, calc(100% - 32px)); margin: 0 auto; padding: 48px 0 72px; }

header { margin-bottom: 28px; }
.eyebrow { margin: 0 0 8px; color: #316b5a; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(2rem, 7vw, 3.5rem); line-height: 1; letter-spacing: -.045em; }
.intro { max-width: 570px; margin: 18px 0 0; font-size: 1.08rem; line-height: 1.55; color: #52605b; }

.card { margin-top: 18px; padding: 24px; border: 1px solid #d8d4c8; border-radius: 16px; background: #fffefa; box-shadow: 0 8px 30px rgba(42, 48, 43, .05); }
h2 { margin: 0 0 20px; font-size: 1.15rem; }
label { display: block; margin: 16px 0 7px; font-weight: 700; }
input, select { width: 100%; min-height: 48px; padding: 0 12px; border: 1px solid #aaa99f; border-radius: 9px; background: white; color: inherit; font: inherit; }
button, .button-link { min-height: 48px; margin-top: 16px; padding: 12px 18px; border: 0; border-radius: 9px; font: inherit; font-weight: 800; cursor: pointer; text-align: center; }
button:disabled { cursor: not-allowed; opacity: .45; }
.secondary { background: #dfe9e5; color: #173e33; }
.danger-outline { border: 1px solid #c99797; background: #fff7f7; color: #742b2b; }
.record, .button-link { display: block; width: 100%; background: #176b51; color: white; }
.stop { display: block; width: 100%; background: #7f2727; color: white; }
.button-link { text-decoration: none; }

.meter-block { margin-top: 18px; }
.meter { height: 14px; overflow: hidden; border-radius: 999px; background: #e2e0d9; }
.meter span { display: block; width: 0; height: 100%; border-radius: inherit; background: #2d8c6e; transition: width 80ms linear; }
.status, .keep-open { color: #66716d; font-size: .9rem; line-height: 1.45; }
.timer { margin: 8px 0 20px; font-variant-numeric: tabular-nums; font-size: clamp(2.7rem, 12vw, 5rem); font-weight: 750; letter-spacing: -.04em; }
.recording-status { margin: 0; color: #59645f; font-weight: 700; }
.recording-status.active { color: #a02727; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.section-heading h2 { margin-bottom: 0; }
.step-label { margin: 0 0 5px; color: #316b5a; font-size: .68rem; font-weight: 850; letter-spacing: .1em; }
.connection-pill { flex: 0 0 auto; padding: 6px 10px; border-radius: 999px; background: #e7e5df; color: #5b625f; font-size: .75rem; font-weight: 800; }
.connection-pill.connected { background: #d9eee5; color: #18543f; }
.connection-pill.connecting { background: #fff0c7; color: #6e5311; }
.connection-pill.problem { background: #f7dddd; color: #7b2626; }
.participant-list { display: grid; gap: 8px; margin-top: 16px; }
.participant { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 9px; background: #f2f1eb; }
.participant-name { font-weight: 750; }
.participant-state { color: #66716d; font-size: .82rem; }
.call-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.call-actions button { width: 100%; }
.keep-open { margin: 18px 0 0; }
audio { width: 100%; margin: 4px 0 6px; }
.recordings-list { display: grid; gap: 14px; }
.recording-item { padding: 16px; border: 1px solid #dedbd1; border-radius: 11px; background: #f9f7f1; }
.recording-item h3 { margin: 0 0 12px; font-size: 1rem; line-height: 1.35; }
.preview-label { margin: 0 0 4px; color: #52605b; font-size: .9rem; font-weight: 700; }
.recording-item .button-link { margin-top: 8px; }
.recording-item .status { margin-bottom: 0; }
.download-all { width: 100%; margin-top: 18px; }
.error { padding: 16px; border: 1px solid #da9c9c; border-radius: 10px; background: #fff1f1; color: #791d1d; }

@media (max-width: 480px) {
  main { width: min(100% - 20px, 680px); padding-top: 28px; }
  .card { padding: 20px; }
  .section-heading { display: block; }
  .connection-pill { display: inline-block; margin-top: 4px; }
  .call-actions { grid-template-columns: 1fr; }
}