:root {
  --bg: #061b1b;
  --card: #0d2626;
  --border: #1a3a3a;
  --fg: #e8f2f1;
  --muted: #8fa9a8;
  --accent: #45d6d0;
  --ok: #48bb78;
  --warn: #ecc94b;
  --error: #fc8181;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  position: relative;
  margin: 0;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(69, 214, 208, 0.10), transparent 60%),
    radial-gradient(50% 35% at 50% 100%, rgba(69, 214, 208, 0.08), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--fg);
  font-family: "Noto Sans Devanagari", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.7;
}

/* Barely-visible horizon arc, the one atmospheric touch behind the whole page.
   Sized off vh (not vw) so its curvature sits near the bottom of the viewport
   consistently, regardless of window aspect ratio. */
body::after {
  content: '';
  position: fixed;
  left: 50%;
  bottom: -100vh;
  width: 120vh;
  height: 120vh;
  margin-left: -60vh;
  border-radius: 50%;
  border: 1px solid rgba(69, 214, 208, 0.18);
  box-shadow:
    0 0 40px rgba(69, 214, 208, 0.12),
    0 0 100px rgba(69, 214, 208, 0.08),
    inset 0 0 60px rgba(69, 214, 208, 0.06);
  z-index: -1;
  pointer-events: none;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.header-left { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.header-right { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.header-divider { width: 1px; height: 1.1rem; background: var(--border); align-self: center; }
.lang-select {
  width: auto;
  margin: 0;
  padding: 0.4rem 1.7rem 0.4rem 0.7rem;
  font-size: 0.82rem;
  border-radius: 999px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238fa9a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 0.75rem;
}
.brand { font-weight: 700; letter-spacing: -0.02em; }
.accent { color: var(--accent); }
.tag { color: var(--muted); font-size: 0.85rem; }

main { max-width: 50rem; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }

.step { display: none; }
.step.active { display: block; }

h1 { font-size: 1.6rem; line-height: 1.3; margin: 0.5rem 0 0.75rem; }
h2 { font-size: 1.1rem; margin: 2rem 0 0.5rem; }

.lede { color: var(--muted); }
.fineprint { color: var(--muted); font-size: 0.85rem; }

code {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  font-size: 0.85em;
  word-break: break-all;
}

/* --- round icon buttons (header avatar, copy-id) --- */
.icon-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  cursor: pointer;
}
.icon-btn:hover:not(:disabled) { border-color: var(--accent); }
.icon-btn svg { width: 1.1rem; height: 1.1rem; }

/* --- mic-check hero: avatar, heading, ID chip --- */
.mic-hero { text-align: center; padding-top: 0.25rem; }

.mic-avatar {
  position: relative;
  width: 5.5rem;
  height: 5.5rem;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(69, 214, 208, 0.35), rgba(69, 214, 208, 0.05) 70%);
  border: 1px solid rgba(69, 214, 208, 0.4);
  backdrop-filter: blur(6px);
  animation: mic-glow 2.4s ease-in-out infinite;
}
.mic-avatar svg { width: 2.2rem; height: 2.2rem; color: var(--accent); }
.mic-avatar::before,
.mic-avatar::after {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px solid rgba(69, 214, 208, 0.15);
  pointer-events: none;
}
.mic-avatar::after { inset: -28px; border-color: rgba(69, 214, 208, 0.08); }
@keyframes mic-glow {
  0%, 100% { box-shadow: 0 0 0 8px rgba(69, 214, 208, 0.06), 0 0 40px rgba(69, 214, 208, 0.25); }
  50% { box-shadow: 0 0 0 10px rgba(69, 214, 208, 0.1), 0 0 55px rgba(69, 214, 208, 0.35); }
}

.mic-hero h1 { margin: 0 0 0.35rem; }
.mic-hero .lede { margin: 0 0 1.1rem; }

.id-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: rgba(13, 38, 38, 0.6);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.4rem 0.4rem 0.4rem 0.9rem;
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 1.5rem;
}
.id-chip code { background: transparent; border: none; padding: 0; color: var(--fg); }
.id-chip .icon-btn { width: 1.9rem; height: 1.9rem; }
.id-chip .icon-btn svg { width: 0.95rem; height: 0.95rem; }

/* --- numbered rules card --- */
.rules-card {
  position: relative;
  overflow: hidden;
  background: rgba(13, 38, 38, 0.55);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  margin: 1.25rem 0;
}
/* Decorative only: a faint waveform curve tucked in the corner, never competing with the text. */
.rules-card::after {
  content: '';
  position: absolute;
  right: -5%;
  bottom: -15%;
  width: 65%;
  height: 55%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100'%3E%3Cpath d='M0 50 Q 25 15 50 50 T 100 50 T 150 50 T 200 50 T 250 50 T 300 50' stroke='rgb(69,214,208)' stroke-width='3' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0.05;
  pointer-events: none;
}
.rules { position: relative; list-style: none; padding: 0; margin: 0; color: var(--muted); font-size: 0.9rem; }
.rules li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.2rem 0.3rem;
  margin: -0.2rem -0.3rem 0.5rem;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.rules li:hover { background: rgba(69, 214, 208, 0.05); }
.rules li:last-child { margin-bottom: -0.2rem; }
.rule-badge {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid var(--accent);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  margin-top: 0.05rem;
}
.rules strong { color: var(--fg); }

/* --- mic-check stat row (Mic / Rate / Room noise) --- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 1.25rem;
}
.stat-pill {
  background: rgba(13, 38, 38, 0.5);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.65rem 0.8rem;
  text-align: center;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.stat-pill:hover { border-color: rgba(69, 214, 208, 0.4); box-shadow: 0 0 20px rgba(69, 214, 208, 0.12); }
.stat-pill-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.75rem;
  margin-bottom: 0.3rem;
}
.stat-pill-label svg { width: 0.85rem; height: 0.85rem; }
.stat-pill strong { display: block; font-size: 1.05rem; min-height: 1.2em; overflow-wrap: anywhere; }

/* --- mic-check meter shell: leading icon + scrolling bars + edge fade --- */
.meter-shell {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(13, 38, 38, 0.5);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 0.9rem;
  margin: 1rem 0 0.3rem;
}
.meter-shell > svg { flex: none; width: 1rem; height: 1rem; color: var(--accent); }
.meter-shell .waveform {
  flex: 1;
  margin: 0;
  padding: 0.65rem 0;
  border: none;
  background: transparent;
}
.meter-shell .waveform::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(6, 27, 27, 0.85), transparent 45%);
  pointer-events: none;
}

/* --- spec strip --- */
.spec-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 0.75rem;
  margin: 1.25rem 0;
}
.spec-row > div {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
}
.spec-row span { display: block; color: var(--muted); font-size: 0.75rem; }
.spec-row strong { font-size: 1rem; overflow-wrap: anywhere; }

/* --- choose recording method --- */
.method-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 0.5rem 0 1rem;
}
.method-eyebrow span:first-child,
.method-eyebrow span:last-child { width: 2rem; height: 1px; background: var(--border); }

.method-heading, .method-lede { text-align: center; }
.method-heading { margin-top: 0; }

.method-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
  margin: 2rem 0 1.25rem;
}

.method-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: rgba(13, 38, 38, 0.55);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.75rem 1.5rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.method-card:hover { border-color: rgba(69, 214, 208, 0.4); box-shadow: 0 0 30px rgba(69, 214, 208, 0.12); }

.method-badge {
  position: absolute;
  top: 1.1rem;
  left: 1.1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.method-icon {
  position: relative;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0.5rem 0 1.1rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(69, 214, 208, 0.35), rgba(69, 214, 208, 0.05) 70%);
  border: 1px solid rgba(69, 214, 208, 0.4);
}
.method-icon svg { width: 1.9rem; height: 1.9rem; color: var(--accent); }
.method-icon-badge {
  position: absolute;
  right: -0.35rem;
  bottom: -0.35rem;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--card);
}
.method-icon-badge svg { width: 0.95rem; height: 0.95rem; }

.method-title { font-size: 1.15rem; margin: 0 0 0.2rem; }
.method-sub { font-size: 0.85rem; font-weight: 600; margin: 0 0 0.7rem; }
.method-desc { color: var(--muted); font-size: 0.85rem; margin: 0 0 1.4rem; }

.method-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: auto;
}
.method-cta svg { width: 1rem; height: 1rem; }

.method-footnote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-align: center;
}
.method-footnote svg { flex: none; width: 0.95rem; height: 0.95rem; color: var(--accent); }

/* --- consent --- */
.consent-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
  max-height: 22rem;
  overflow-y: auto;
  font-size: 0.9rem;
}

.consent-box h3,
.consent-box h4,
.consent-box h5 { margin: 1.1rem 0 0.45rem; line-height: 1.35; }
.consent-box h3:first-child { margin-top: 0; }
.consent-box p { margin: 0.6rem 0; }
.consent-box hr { border: 0; border-top: 1px solid var(--border); margin: 1rem 0; }
.consent-box blockquote { border-left: 3px solid var(--accent); margin: 0.8rem 0; padding-left: 0.8rem; color: var(--muted); }
.consent-box table { width: 100%; border-collapse: collapse; margin: 0.8rem 0; font-size: 0.82rem; }
.consent-box td { border: 1px solid var(--border); padding: 0.45rem 0.55rem; vertical-align: top; }

.check {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin: 1rem 0;
  cursor: pointer;
}
.check input { margin-top: 0.45rem; flex: none; width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }
.check em { color: var(--muted); font-style: normal; }

/* --- forms --- */
fieldset {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem;
  margin: 0 0 1.25rem;
}
legend { color: var(--accent); font-size: 0.85rem; padding: 0 0.4rem; }
legend em { color: var(--muted); font-style: normal; }

label { display: block; margin-bottom: 0.9rem; font-size: 0.9rem; }
label small { display: block; color: var(--muted); font-size: 0.78rem; margin-top: 0.35rem; }
label em { color: var(--muted); font-style: normal; }

input, select {
  width: 100%;
  margin-top: 0.3rem;
  padding: 0.6rem 0.7rem;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  font-size: 0.95rem;
}
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.sensitive {
  border-left: 3px solid var(--warn);
  padding-left: 0.8rem;
  margin-top: 1.25rem;
}

/* --- buttons --- */
button {
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: 0.4; cursor: not-allowed; }
button.primary { background: var(--accent); color: var(--bg); border-color: var(--accent); }
button.big {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 1.1rem;
  font-size: 1.05rem;
  margin-top: 0.25rem;
  background: linear-gradient(135deg, #8feae4, var(--accent));
  border-color: transparent;
  color: var(--bg);
  box-shadow: 0 10px 30px rgba(69, 214, 208, 0.35);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
button.big:hover:not(:disabled) { box-shadow: 0 14px 38px rgba(69, 214, 208, 0.5); transform: translateY(-2px); }
button.big svg { width: 1.1rem; height: 1.1rem; }

.row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1rem 0; }

button.record {
  display: block;
  width: 100%;
  padding: 1.1rem;
  font-size: 1.1rem;
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
button.record.recording { background: var(--error); border-color: var(--error); color: #2a0a0a; }

/* --- waveform (live input level, Voice-Memos-style scrolling bars) --- */
.waveform {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 72px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0 0.75rem;
  margin: 1rem 0 0.3rem;
}
.waveform-bar {
  flex: 1;
  min-width: 3px;
  height: 10%;
  background: var(--accent);
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(69, 214, 208, 0.5);
  transition: height 70ms ease-out;
}
.waveform-bar.hot { background: var(--error); box-shadow: 0 0 6px rgba(252, 129, 129, 0.5); }
/* Idle state (before the mic is opened): a gentle breathing motion instead of a dead flat line. */
.waveform.idle .waveform-bar { animation: idle-breathe 2.2s ease-in-out infinite; }
.waveform.idle .waveform-bar:nth-child(odd) { animation-delay: -1.1s; }
@keyframes idle-breathe {
  0%, 100% { height: 10%; }
  50% { height: 22%; }
}
.meter-label { color: var(--muted); font-size: 0.8rem; text-align: center; min-height: 1.2em; margin: 0 0 1rem; }

/* --- test progress (mic-check silence-test countdown) --- */
.test-progress {
  height: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  margin: 0 0 1rem;
}
.test-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
}

/* --- live-activity dot: silence test running, or a sentence recording --- */
.rec-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--error);
  margin-right: 0.45rem;
  vertical-align: middle;
  animation: rec-pulse 1s ease-in-out infinite;
}
@keyframes rec-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* --- recording --- */
.record-head {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.save-note { margin: 0.75rem 0 0.5rem; }
.save-later-btn { margin-bottom: 0.5rem; }

.prompt {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  padding: 1.5rem 1.25rem;
  margin: 1.25rem 0;
  font-size: 1.5rem;
  line-height: 1.8;
}

.timer { text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; margin: 0 0 0.75rem; }
.timer.over-limit { color: var(--error); font-weight: 700; }

/* --- technical details box (record step, live during capture) --- */
.tech-box {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  margin: 0 0 1rem;
}
.tech-box-head {
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.6rem;
}
.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
  gap: 0.5rem 0.75rem;
}
.tech-grid span { display: block; color: var(--muted); font-size: 0.68rem; }
.tech-grid strong {
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 0.85rem;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.5rem;
  margin: 1rem 0;
}
.metrics > div {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
}
.metrics span { display: block; color: var(--muted); font-size: 0.72rem; }
.metrics strong { font-variant-numeric: tabular-nums; }

audio { width: 100%; margin: 0.5rem 0; }
.hidden { display: none; }

/* --- rules / problems / status --- */
.rules { color: var(--muted); font-size: 0.9rem; padding-left: 1.2rem; }
.rules li { margin-bottom: 0.4rem; }
.rules strong { color: var(--fg); }

.problems { list-style: none; padding: 0; margin: 1rem 0; }
.problems li {
  background: rgba(236, 201, 75, 0.1);
  border: 1px solid var(--warn);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.5rem;
  font-size: 0.88rem;
}

.status { min-height: 1.5rem; font-size: 0.92rem; margin: 0.75rem 0; }
.status.ok { color: var(--ok); }
.status.warn { color: var(--warn); }
.status.error { color: var(--error); }

footer {
  border-top: 1px solid var(--border);
  padding: 1rem 1.25rem;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}

/* Operator-facing detail on the preflight block screen: present enough to
   screenshot from the field, quiet enough not to alarm the contributor. */
.hint-detail {
  display: inline-block;
  margin-top: 0.4rem;
  color: var(--muted);
  font-family: ui-monospace, "Cascadia Code", monospace;
  font-size: 0.7rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* --- account / auth --- */
.authbar { display: flex; align-items: center; gap: 0.5rem; }
button.ghost { background: transparent; padding: 0.5rem 0.9rem; font-size: 0.85rem; }
button.danger { border-color: var(--error); color: var(--error); }
button.danger:hover:not(:disabled) { background: rgba(252, 129, 129, 0.1); border-color: var(--error); }
.link-btn {
  display: inline-block;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--fg);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.5rem 0.9rem;
}
.link-btn:hover { border-color: var(--accent); }
.account-chip {
  color: var(--muted);
  font-size: 0.82rem;
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 50;
}
.modal-backdrop.hidden { display: none; }
.modal {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.5rem;
  max-width: 24rem;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
}
.modal-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  border: none;
  background: transparent;
  font-size: 1.3rem;
  line-height: 1;
  padding: 0.3rem 0.6rem;
}

.auth-tabs { display: flex; gap: 0.4rem; margin-bottom: 1.25rem; }
.auth-tab { flex: 1; background: transparent; border-radius: 999px; font-size: 0.85rem; }
.auth-tab.active { background: var(--accent); color: var(--bg); border-color: var(--accent); }

.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--muted);
  font-size: 0.8rem;
  margin: 1.1rem 0;
}
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  background: #fff;
  color: #3c4043;
  border-color: #fff;
}
.google-btn:hover { border-color: #dadce0; }

.recordings-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.recordings-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}