:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #172033;
  background: #f5f7fb;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }
button, input, textarea { font: inherit; }
button {
  min-height: 44px;
  border: 1px solid #c9d1df;
  border-radius: 10px;
  padding: 0 16px;
  background: #fff;
  color: #172033;
  cursor: pointer;
}
button:disabled { cursor: not-allowed; opacity: .5; }
button.primary { background: #2157d5; border-color: #2157d5; color: white; }
button.danger { background: #b42318; border-color: #b42318; color: white; }
button.danger-outline { color: #b42318; border-color: #f0aaa5; }
button.compact { min-height: 38px; }
input, textarea {
  width: 100%;
  margin-top: 7px;
  border: 1px solid #c9d1df;
  border-radius: 10px;
  padding: 12px;
  background: #fff;
  color: #172033;
}
textarea { resize: vertical; }
label { display: block; margin-top: 16px; font-weight: 650; }
.app-shell { width: min(820px, 100%); margin: 0 auto; padding: 20px 14px 48px; }
.topbar, .section-heading, .meeting-status {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
.topbar { margin-bottom: 16px; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(1.7rem, 5vw, 2.3rem); }
h2 { margin-bottom: 5px; font-size: 1.15rem; }
.section-heading p, footer { color: #647084; }
.eyebrow { margin-bottom: 5px; font-size: .72rem; font-weight: 800; letter-spacing: .13em; color: #2157d5; }
.card {
  margin-top: 14px;
  padding: 18px;
  border: 1px solid #dfe4ec;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(27, 39, 62, .05);
}
.button-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.meeting-status { justify-content: flex-start; margin-top: 18px; color: #5b6678; }
#meetingTimer { margin-left: auto; font-variant-numeric: tabular-nums; }
.listening-dot { width: 10px; height: 10px; border-radius: 50%; background: #98a2b3; }
.listening-dot.active { background: #12a150; box-shadow: 0 0 0 5px rgba(18,161,80,.13); }
.transcript {
  min-height: 190px;
  max-height: 48vh;
  overflow-y: auto;
  white-space: pre-wrap;
  line-height: 1.65;
  padding: 14px;
  margin-top: 14px;
  border: 1px solid #e3e7ee;
  border-radius: 12px;
  background: #fafbfc;
}
.transcript:empty::before { content: "Transcript will appear here."; color: #98a2b3; }
.interim { min-height: 25px; margin-top: 9px; color: #65758b; font-style: italic; }
.status-pill {
  display: inline-flex; align-items: center; min-height: 30px; padding: 4px 10px;
  border-radius: 999px; background: #e8f6ed; color: #18743c; font-size: .82rem; font-weight: 700;
}
.status-pill.muted { background: #eef1f5; color: #5b6678; }
.notice { padding: 14px; border-radius: 12px; line-height: 1.45; }
.warning { background: #fff4e5; border: 1px solid #ffd395; color: #7a4510; }
.hidden { display: none; }
.result-message { margin: 13px 0 0; min-height: 24px; color: #445268; }
.important-line { display: block; margin: 10px 0; padding-left: 10px; border-left: 4px solid #f3b61f; }
footer { padding: 24px 4px 0; font-size: .85rem; line-height: 1.5; }
@media (max-width: 580px) {
  .section-heading { align-items: flex-start; flex-direction: column; }
  .section-heading button { width: 100%; }
  .button-row button { flex: 1 1 145px; }
}