:root {
  --bg: #f7f7f5; --panel: #ffffff; --text: #1d1d1f; --muted: #6b6b70; --line: #e3e3e0;
  --accent: #3b5bdb; --accent-text: #ffffff; --error: #c92a2a; --ok: #2b8a3e; --mark: #fff3bf;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #18181b; --panel: #232327; --text: #ececef; --muted: #a1a1aa; --line: #34343a;
    --accent: #748ffc; --accent-text: #0b0b0d; --error: #ff8787; --ok: #69db7c; --mark: #3b3a1f;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.5; }
a { color: var(--accent); }
header.top { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; padding: .75rem 1rem;
  background: var(--panel); border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; text-decoration: none; color: var(--text); }
header nav { display: flex; gap: 1rem; flex-wrap: wrap; }
header .me { margin-left: auto; display: flex; gap: .75rem; align-items: center; color: var(--muted); }
main { max-width: 72rem; margin: 0 auto; padding: 1rem; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 1rem 1.25rem; margin-bottom: 1rem; }
.narrow { max-width: 28rem; margin: 2rem auto; }
.stack { display: flex; flex-direction: column; gap: .75rem; }
.row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
label { display: flex; flex-direction: column; gap: .25rem; font-weight: 500; }
label.check { flex-direction: row; align-items: center; }
input, select, textarea { font: inherit; padding: .45rem .6rem; border: 1px solid var(--line);
  border-radius: 6px; background: var(--bg); color: var(--text); }
textarea { min-height: 8rem; }
button, .button { font: inherit; padding: .45rem .9rem; border-radius: 6px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); cursor: pointer; text-decoration: none; display: inline-block; }
button.primary, .button.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
button.danger { color: var(--error); }
button.link { border: none; background: none; padding: 0; color: var(--accent); }
button:disabled { opacity: .5; cursor: default; }
form.inline { display: inline; }
.error { color: var(--error); }
.ok { color: var(--ok); }
.muted { color: var(--muted); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
nav.sub { display: flex; gap: 1rem; margin-bottom: 1rem; }
.status { display: flex; gap: .5rem; align-items: center; }
.spinner { width: 1rem; height: 1rem; border: 2px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 1rem; }
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }
.transcript p { margin: .2rem 0; padding: .15rem .35rem; border-radius: 4px; cursor: pointer; }
.transcript p.playing { background: var(--mark); }
.transcript .time { color: var(--muted); font-variant-numeric: tabular-nums; margin-right: .4rem; }
.transcript .who { font-weight: 600; margin-right: .3rem; }
audio { width: 100%; }
.chat-log { display: flex; flex-direction: column; gap: .5rem; max-height: 28rem; overflow-y: auto; }
.msg { padding: .5rem .75rem; border-radius: 8px; border: 1px solid var(--line); }
.msg.user { align-self: flex-end; background: var(--bg); }
.msg.pending { white-space: pre-wrap; }
.msg.error { color: var(--error); }