:root {
  font-family: -apple-system, system-ui, sans-serif;
  color-scheme: light dark;
  --bg: #f6f6f8; --fg: #1c1c1e; --card: #fff;
  --border: #c7c7cc; --divider: #e5e7eb; --muted: #6b7280;
  --chip: #e5e7eb; --chip-fg: #111;
  --accent: #2563eb; --success: #15803d; --danger: #b91c1c;
  --warning: #b45309;
  --shadow: 0 1px 3px rgb(0 0 0 / .1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #131316; --fg: #e8e8ec; --card: #1e1f24;
    --border: #45464d; --divider: #2c2d33; --muted: #9ca3af;
    --chip: #33353c; --chip-fg: #e8e8ec;
    --accent: #3b82f6; --success: #1f9d55; --danger: #ef4444;
    --warning: #d97706;
    --shadow: 0 1px 3px rgb(0 0 0 / .5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #131316; --fg: #e8e8ec; --card: #1e1f24;
  --border: #45464d; --divider: #2c2d33; --muted: #9ca3af;
  --chip: #33353c; --chip-fg: #e8e8ec;
  --accent: #3b82f6; --success: #1f9d55; --danger: #ef4444;
  --warning: #d97706;
  --shadow: 0 1px 3px rgb(0 0 0 / .5);
}
:root[data-theme="light"] { color-scheme: light; }
body { margin: 0 auto; max-width: 40rem; padding: 1rem; background: var(--bg); color: var(--fg); }
body.wide { max-width: 75rem; }
h1 { font-size: 1.3rem; }
textarea, input, select, button { font-size: 1rem; padding: .6rem; border-radius: .5rem; border: 1px solid var(--border); width: 100%; box-sizing: border-box; margin-bottom: .6rem; background: var(--card); color: var(--fg); }
button { background: var(--accent); color: #fff; border: 0; font-weight: 600; }
button.secondary { background: var(--chip); color: var(--chip-fg); }
.card { background: var(--card); border-radius: .75rem; padding: 1rem; margin: 1rem 0; box-shadow: var(--shadow); }
.error { color: var(--danger); }
.ok { color: var(--success); }
nav { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-bottom: 1rem; }
nav button { width: auto; padding: .3rem .8rem; margin: 0; }
.nav-right { margin-left: auto; display: flex; gap: .6rem; align-items: center; }
.nav-right form { margin: 0; }
nav a.nav-toggle { background: var(--chip); color: var(--chip-fg); font-weight: 600; padding: .3rem .8rem; border-radius: .5rem; text-decoration: none; }
nav a.primary { background: var(--accent); color: #fff; font-weight: 600; padding: .3rem .8rem; border-radius: .5rem; text-decoration: none; }
.composer-row { display: flex; gap: .6rem; align-items: stretch; }
.composer-row textarea { flex: 1; min-width: 0; }
#mic-btn { flex: 0 0 auto; width: 3.5rem; padding: 0; font-size: 1.4rem; background: #374151; color: #fff; }
#mic-btn[data-state="recording"] { background: var(--danger); animation: pulse 1.2s infinite; }
button.go { background: var(--success); }
form.htmx-request button.go { background: var(--warning); pointer-events: none; }
form.htmx-request button.go span { display: none; }
form.htmx-request button.go::after { content: "Working…"; }
.two-col { display: flex; gap: .6rem; }
.two-col > div { flex: 1; min-width: 0; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
td, th { padding: .4rem; border-bottom: 1px solid var(--divider); text-align: left; vertical-align: top; }
table.log { font-size: .8rem; }
table.log td { overflow-wrap: break-word; }
table.log .nowrap { white-space: nowrap; }
table.log form { display: inline; }
table.log button { width: auto; padding: .25rem .6rem; margin: 0; font-size: .8rem; }
label.check { display: flex; align-items: center; gap: .5rem; margin: .9rem 0; }
label.check input { width: auto; margin: 0; }
.field-label { margin: 0 0 .3rem; }
.profiles { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-bottom: .6rem; }
.profiles label.check { margin: 0; }
.hint { cursor: help; color: var(--muted); }
.status { font-size: .85rem; color: var(--muted); min-height: 1.2em; margin: 0 0 .6rem; }
@keyframes pulse { 50% { opacity: .6; } }