/* Sinote — SINTARIS colours (sintaris.net), text on white; colour scheme light · dark · system
   (html[data-theme] set by app.js; "system" follows the phone / browser). Design: concept canvas
   "Sinote Design-Konzept" (2026-10-25). */
:root {
  --bg: #ffffff; --surface: #ffffff; --soft: #f1f4f9; --ink: #10213f; --ink-2: #334766; --muted: #55657f;
  --line: #d6e3fb; --line-2: #e6edf8; --navy: #1d3557; --navy-2: #457b9d; --navy-soft: #e4edf7;
  --on-navy: #ffffff; --amber: #ffb703; --on-amber: #10213f; --amber-soft: #fff3d1; --amber-ink: #6b4a00;
  --ok: #1e6e46; --ok-soft: #e3f3ea; --danger: #b3261e; --danger-soft: #fdecea; --live: #d9381e;
  --focus: #ffb703; --shadow: 0 1px 2px rgba(16, 33, 63, .08), 0 8px 24px rgba(16, 33, 63, .06);
  --stage: #10213f; --on-stage: #ffffff; --stage-2: #c6d0db;
  --r-s: 8px; --r-m: 12px; --r-l: 16px;
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: Manrope, "IBM Plex Sans", system-ui, sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0e1626; --surface: #16213a; --soft: #1b2843; --ink: #e8eef7; --ink-2: #c3d0e2; --muted: #9daec6;
  --line: #2a3a57; --line-2: #22314d; --navy: #8fb3d9; --navy-2: #8fb3d9; --navy-soft: #1d2c48;
  --on-navy: #0e1626; --amber-soft: #3a3010; --amber-ink: #ffd166; --ok: #7fd1a6; --ok-soft: #173326;
  --danger: #ff8a80; --danger-soft: #3a1c1c; --live: #ff7a5f; --shadow: none;
  --stage: #070d18; --stage-2: #a9b5c3;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.5 var(--font); background: var(--bg); color: var(--ink); }
h1, h2, h3 { font-family: var(--font-head); margin: 0 0 8px; line-height: 1.2; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; font-weight: 800; }
h2 { font-size: 1.15rem; font-weight: 700; }
h3 { font-size: 1rem; font-weight: 700; }
a { color: var(--navy); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }   /* a styled element (label, .row) must still hide */
.icon { width: 22px; height: 22px; flex: none; }
.icon.s { width: 18px; height: 18px; }

/* ── bar ── */
.bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 16px; background: var(--bg);
  border-bottom: 1px solid var(--line-2); position: sticky; top: 0; z-index: 5; min-height: 60px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none;
  font: 800 1.25rem var(--font-head); letter-spacing: .01em; }
.mark { width: 32px; height: 32px; border-radius: 9px; background: #1d3557; display: inline-flex;
  align-items: center; justify-content: center; gap: 3px; }
.mark i { width: 3px; border-radius: 2px; background: #fff; display: block; }
.mark i:nth-child(1) { height: 10px; } .mark i:nth-child(2) { height: 18px; } .mark i:nth-child(3) { height: 13px; }
.avatar { width: 40px; height: 40px; border-radius: 20px; background: var(--navy-soft); color: var(--navy);
  border: 0; font: 600 1rem var(--font); display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; cursor: pointer; }

main { max-width: 860px; margin: 0 auto; padding: 16px 16px 132px; position: relative; }
.grow { flex: 1; min-width: 0; }
.row { display: flex; gap: 10px; align-items: center; }
.wrap { flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.error { color: var(--danger); min-height: 1.5em; }
.navrow { margin-bottom: 8px; }

/* ── controls ── */
button, .button { font: 500 1rem var(--font); min-height: 44px; padding: 10px 16px; border-radius: var(--r-m);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
button.primary, .button.primary { background: var(--navy); border-color: var(--navy); color: var(--on-navy); font-weight: 600; }
button.rec, .button.rec { background: var(--amber); border-color: var(--amber); color: var(--on-amber); font-weight: 600;
  border-radius: 999px; }
button.ghost, .button.ghost { background: transparent; border-color: transparent; color: var(--ink); }
button.outline, .button.outline { background: var(--surface); }
button.danger, .danger { color: var(--danger); }
button.icon-btn, .button.icon-btn { width: 44px; min-width: 44px; padding: 0; border-radius: 22px; }
button.round, .button.round { width: 52px; height: 52px; padding: 0; border-radius: 26px; }
button.big, .big { min-height: 56px; font-size: 1.05rem; font-weight: 600; border-radius: var(--r-l); }
button:disabled, .disabled { opacity: .45; pointer-events: none; cursor: not-allowed; }
label { display: block; margin-bottom: 12px; }
label:not(.fmt):not(.check):not(.choice):not(.button) > span:first-child { display: block; font-size: .875rem; font-weight: 500; color: var(--ink-2); margin-bottom: 6px; }
input, select, textarea { font: inherit; color: var(--ink); background: var(--surface); width: 100%;
  border: 1px solid var(--line); border-radius: var(--r-m); padding: 11px 14px; min-height: 48px; }
input:focus, select:focus, textarea:focus { border-color: var(--navy); outline: 2px solid transparent; box-shadow: 0 0 0 1px var(--navy); }
.row input, .row select { width: auto; flex: 1; min-width: 0; }
textarea { font: 15px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; min-height: 320px; }
progress { flex: 1; min-width: 120px; height: 6px; accent-color: var(--navy-2); }
details summary { cursor: pointer; color: var(--muted); margin: 8px 0; min-height: 32px; }

/* segmented control (language, colour scheme, format) */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px;
  background: var(--soft); border-radius: var(--r-m); }
.seg button { min-height: 40px; border: 0; background: transparent; color: var(--ink-2); padding: 6px 8px; border-radius: 9px; }
.seg button[aria-checked="true"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }
:root[data-theme="dark"] .seg button[aria-checked="true"] { background: var(--line); }
.langs { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--soft);
  color: var(--ink-2); font-size: .8125rem; line-height: 1.4; }
.chip.busy { background: var(--navy-soft); color: var(--navy); font-weight: 600; }
.chip.busy::before, .chip.live::before { content: ""; width: 7px; height: 7px; border-radius: 4px; background: var(--navy-2); }
.chip.live { background: var(--amber-soft); color: var(--amber-ink); font-weight: 600; }
.chip.live::before { background: var(--live); }
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.filters { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; }
.filters button { min-height: 36px; padding: 6px 14px; border-radius: 999px; white-space: nowrap; font-size: .9rem; }
.filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* cards and lists */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 16px; margin-bottom: 12px; }
.narrow { max-width: 420px; margin: 24px auto; }
.list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.memo-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--surface); color: var(--ink); text-decoration: none; }
.memo-card:hover { border-color: var(--navy-2); }
.memo-card .t { font-weight: 600; font-size: 1.02rem; }
.memo-card .m { font-size: .8125rem; color: var(--muted); }
.page-head { padding: 4px 4px 12px; }
.page-head p { margin: 2px 0 0; }
.search { display: flex; align-items: center; gap: 8px; background: var(--soft); border-radius: var(--r-m); padding: 0 12px; margin-bottom: 10px; color: var(--muted); }
.search input { border: 0; background: transparent; min-height: 44px; padding: 8px 0; box-shadow: none !important; }

/* sticky bottom action bar (thumb zone) */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; background: var(--bg); border-top: 1px solid var(--line-2);
  padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); }
.dock-in { max-width: 828px; margin: 0 auto; display: flex; align-items: center; gap: 10px; }
.dock .grow { flex: 1 1 auto; }

/* menu */
.menu-list { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.menu-list > a, .menu-list > button { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 16px;
  border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; background: transparent; color: var(--ink);
  justify-content: flex-start; text-align: left; font-weight: 400; text-decoration: none; width: 100%; }
.menu-list > :last-child { border-bottom: 0; }
.menu-list .chev { margin-left: auto; color: var(--muted); }
.who { display: flex; align-items: center; gap: 14px; }
.who .avatar { width: 48px; height: 48px; border-radius: 24px; font-size: 1.2rem; }

/* memo page */
.memo-top { display: flex; align-items: center; gap: 2px; margin: -6px -8px 6px -10px; }
.memo-top .back { color: var(--navy); font-weight: 500; padding-left: 6px; }
.memo-head { padding: 0 4px; }
.memo-head h1 { font-size: 1.65rem; margin-bottom: 10px; overflow-wrap: anywhere; }
.retention { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: .875rem; color: var(--ok); margin-top: 8px; }
.retention:empty { display: none; }
.popover { position: absolute; right: 12px; top: 62px; z-index: 6; min-width: 240px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-m); box-shadow: 0 12px 32px rgba(16, 33, 63, .18); padding: 6px; }
.popover button { width: 100%; justify-content: flex-start; border: 0; background: transparent; border-radius: 9px; font-weight: 400; }
.popover button:hover { background: var(--soft); }
.rule { height: 1px; background: var(--line-2); margin: 14px 0 4px; }
.note { font-size: 1.0625rem; line-height: 1.68; overflow-wrap: anywhere; }
.note h1 { display: none; }                       /* the title stands above already */
.note h1 + p { color: var(--muted); font-size: .875rem; }   /* the recording's info line */
.note h2 { font: 600 .75rem var(--font); letter-spacing: .02em; color: var(--navy); background: var(--navy-soft);
  display: inline-block; padding: 3px 8px; border-radius: var(--r-s); margin: 18px 0 4px; font-variant-numeric: tabular-nums; }
.note p { margin: 4px 0 10px; }
.note img { max-width: 100%; border-radius: var(--r-m); display: block; }
.note hr { border: 0; border-top: 1px solid var(--line-2); margin: 20px 0; }
.note em { color: var(--muted); }
.here { display: flex; width: max-content; min-height: 32px; font-size: .8125rem; padding: 4px 10px; margin: 0 0 10px; border: 1px dashed var(--line);
  border-radius: 10px; color: var(--muted); background: transparent; }
.here:hover { color: var(--ink); border-color: var(--navy-2); }

/* capture dock + recording stage (body[data-mode] recording|paused|finishing → full screen) */
.capture { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; background: var(--bg); border-top: 1px solid var(--line-2);
  padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); }
.capture-in { max-width: 828px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.cap-bar { display: flex; align-items: center; gap: 10px; }
.cap-bar #rec-start { flex: 1 1 auto; min-width: 0; min-height: 56px; font-size: 1rem; padding: 10px 14px; white-space: nowrap; }
.cap-tools .round { width: 46px; height: 46px; min-height: 46px; border-radius: 23px; }
.cap-tools { gap: 6px; }
.cap-tools { display: flex; gap: 8px; }
.stage-head, #live, #rec-pause, #rec-stop { display: none; }
#media-state:empty { display: none; }
body[data-mode="recording"] .capture, body[data-mode="paused"] .capture, body[data-mode="finishing"] .capture {
  top: 0; z-index: 9; border: 0; background: var(--stage); color: var(--on-stage); padding: 20px 20px calc(28px + env(safe-area-inset-bottom)); }
body[data-mode="recording"] .capture-in, body[data-mode="paused"] .capture-in, body[data-mode="finishing"] .capture-in { height: 100%; gap: 18px; }
body[data-mode="recording"] .stage-head, body[data-mode="paused"] .stage-head, body[data-mode="finishing"] .stage-head {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 6vh; }
.stage-title { color: var(--stage-2); font-size: .95rem; text-align: center; }
#rec-clock { font: 600 4rem/1.1 var(--font); font-variant-numeric: tabular-nums; letter-spacing: -.02em; background: none; padding: 0; }
#rec-state { font-size: .9rem; color: #ffd166; }
body[data-mode] #live { display: none; }
body[data-mode="recording"] #live:not(:empty), body[data-mode="paused"] #live:not(:empty), body[data-mode="finishing"] #live:not(:empty) {
  display: block; flex: 1 1 auto; overflow-y: auto; background: rgba(255, 255, 255, .06); border-radius: var(--r-l); padding: 14px 16px; color: #e8edf2; }
body[data-mode="recording"] .cap-tools, body[data-mode="paused"] .cap-tools, body[data-mode="finishing"] .cap-tools { display: none; }
body[data-mode="recording"] .cap-bar, body[data-mode="paused"] .cap-bar, body[data-mode="finishing"] .cap-bar {
  margin-top: auto; justify-content: center; gap: 22px; }
body[data-mode="recording"] #rec-start, body[data-mode="paused"] #rec-start, body[data-mode="finishing"] #rec-start { display: none; }
body[data-mode="recording"] #rec-pause, body[data-mode="paused"] #rec-pause { display: inline-flex; }
body[data-mode="recording"] #rec-stop, body[data-mode="paused"] #rec-stop { display: inline-flex; }
#rec-pause { min-width: 128px; min-height: 60px; border-radius: 30px; background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .35); }
#rec-stop { min-width: 148px; min-height: 72px; border-radius: 36px; background: var(--amber); color: var(--on-amber); border: 0;
  font-weight: 700; box-shadow: 0 0 0 8px rgba(255, 183, 3, .22); }
#rec-stop .sq { width: 18px; height: 18px; border-radius: 4px; background: var(--on-amber); display: inline-block; }
.cap-photo { display: none; flex: none; width: 60px; height: 60px; min-height: 60px; padding: 0; border-radius: 30px; margin: 0; }
body[data-mode="recording"] .cap-photo, body[data-mode="paused"] .cap-photo { display: inline-flex; color: #fff; background: transparent; border: 1px solid rgba(255, 255, 255, .35); }
.live p { margin: 6px 0; }
.live strong { color: #a9b5c3; font-weight: 600; font-size: .8rem; margin-right: 4px; }
.drop { outline: 2px dashed var(--navy-2); outline-offset: -6px; }

/* transcription job */
.job { display: flex; flex-direction: column; gap: 10px; }
.job .live { max-height: 220px; overflow-y: auto; font-size: .95rem; color: var(--ink-2); }
.job .live strong { color: var(--navy); }

/* sheet (export / share) */
.sheet-back { position: fixed; inset: 0; z-index: 8; background: rgba(9, 17, 33, .55); display: flex; align-items: flex-end; justify-content: center; }
.sheet { width: 100%; max-width: 560px; background: var(--surface); border-radius: 24px 24px 0 0; padding: 10px 20px calc(22px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 14px; max-height: 92vh; overflow-y: auto; }
.sheet .grab { align-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--line); }
@media (min-width: 720px) { .sheet-back { align-items: center; } .sheet { border-radius: 20px; } }
.formats { display: flex; flex-direction: column; gap: 8px; }
.fmt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; margin: 0; cursor: pointer; }
.fmt:has(input:checked) { border: 2px solid var(--navy); padding: 11px 13px; background: var(--navy-soft); }
.fmt input { width: 20px; height: 20px; min-height: 0; accent-color: var(--navy); flex: none; margin: 0 0 0 auto; }
.fmt .tag { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; flex: none; background: var(--soft); color: var(--ink); }
.fmt .tag.pdf { background: #fde7e3; color: #8f2a17; } .fmt .tag.docx { background: #e5edf9; color: #1d4f91; }
:root[data-theme="dark"] .fmt .tag.pdf { background: #3a1f1a; color: #ffb4a3; }
:root[data-theme="dark"] .fmt .tag.docx { background: #1d2c48; color: #8fb3d9; }
.fmt b { display: block; font-weight: 600; } .fmt small { color: var(--muted); font-size: .8125rem; }
.check { display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0; }
.check input { width: 20px; height: 20px; min-height: 0; accent-color: var(--navy); flex: none; }

/* settings (ADR-0013) */
.choice { display: flex; gap: 12px; align-items: flex-start; padding: 14px; margin: 0 0 10px; border: 1px solid var(--line); border-radius: 14px; cursor: pointer; }
.choice:has(input:checked) { border: 2px solid var(--navy); padding: 13px; background: var(--navy-soft); }
.choice input { margin-top: 3px; flex: none; width: 20px; height: 20px; min-height: 0; accent-color: var(--navy); }
.choice b { font-weight: 600; }
fieldset { border: 1px solid var(--line); border-radius: var(--r-m); padding: 12px 14px; margin: 0 0 12px; }
legend { padding: 0 6px; font-weight: 600; }
.indent { margin-left: 2rem; }
.badge { font-variant-numeric: tabular-nums; }

/* first start: welcome + setup wizard */
.welcome { max-width: 560px; margin: 0 auto; }
.welcome .hero { width: 100%; height: auto; aspect-ratio: 4 / 3; border-radius: 20px; display: block; background: #1d3557; }
.lead { font-size: 1.1rem; color: var(--ink-2); margin: 0; }
.feat { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.feat li { display: flex; gap: 12px; align-items: flex-start; }
.feat .icon { color: var(--navy); background: var(--navy-soft); border-radius: 10px; padding: 7px; width: 36px; height: 36px; }
.seg.mini button { min-height: 36px; padding: 4px 10px; font-size: .85rem; }
.setup { max-width: 560px; margin: 0 auto; }
.dots { display: flex; gap: 6px; }
.dots i { width: 28px; height: 4px; border-radius: 2px; background: var(--line); display: block; }
.dots i.on { background: var(--navy); }
.themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.themes button { flex-direction: column; min-height: 120px; padding: 12px 8px; border-radius: 14px; gap: 10px; }
.themes button[aria-checked="true"] { border: 2px solid var(--navy); background: var(--navy-soft); font-weight: 600; }
.sw { width: 100%; max-width: 96px; height: 56px; border-radius: 10px; display: flex; flex-direction: column; justify-content: center;
  gap: 6px; padding: 0 10px; border: 1px solid var(--line); }
.sw i { display: block; height: 6px; border-radius: 3px; }
.sw i:last-child { width: 60%; }
.sw.light { background: #ffffff; } .sw.light i { background: #1d3557; }
.sw.dark { background: #0e1626; } .sw.dark i { background: #8fb3d9; }
.sw.system { background: linear-gradient(90deg, #ffffff 50%, #0e1626 50%); } .sw.system i { background: #457b9d; }

/* desktop: list beside the memo is a later step; wider reading column now */
@media (min-width: 900px) { main { padding-top: 24px; } .note { font-size: 1.125rem; } }
@media (max-width: 560px) { main { padding: 12px 12px 120px; } .card { padding: 14px; } h1 { font-size: 1.45rem; } }
@media print { .bar, .dock, .capture, .memo-top, .here, .popover, #job { display: none !important; } main { padding: 0; } }

/* SINTARIS — the maker, linked to sintaris.net (R-055) */
.by { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); text-decoration: none; font-size: .75rem;
  padding: 4px 6px; border-radius: 8px; white-space: nowrap; }
.by:hover { background: var(--soft); }
.by svg { width: 14px; height: 17px; flex: none; }
.by b { font: 800 .72rem var(--font-head); letter-spacing: .08em; color: var(--ink-2); }
@media (max-width: 400px) { .by .by-w { display: none; } }
.maker { text-align: center; margin: 4px 0 0; }
.by-line { display: inline-flex; gap: 8px; align-items: center; color: var(--muted); text-decoration: none; }
.by-line svg { width: 18px; height: 22px; flex: none; }
.menu-list > a.sintaris-link svg.icon:first-child { width: 20px; height: 24px; }

/* groups (folders) of memos (R-054) */
.filters.groups:empty { display: none; }
.filters.groups button { gap: 6px; }
.filters.groups button .icon { width: 16px; height: 16px; }
.filters.groups .n { font-size: .78rem; opacity: .7; font-variant-numeric: tabular-nums; }
.gchips:empty { display: none; }
.gchips { margin-top: 8px; }
.gchips button { min-height: 30px; padding: 3px 10px; border-radius: 999px; font-size: .8125rem; gap: 6px; background: var(--navy-soft);
  border-color: transparent; color: var(--navy); }
.gchips button .icon { width: 15px; height: 15px; }
.glist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.glist li { display: flex; gap: 8px; align-items: center; }
.glist li input { flex: 1; min-width: 0; }
.glist .n { font-size: .8125rem; color: var(--muted); min-width: 2.5em; text-align: right; }
.memo-card .gs { display: flex; flex-wrap: wrap; gap: 4px; }
.memo-card .gs span { font-size: .75rem; padding: 1px 8px; border-radius: 999px; background: var(--navy-soft); color: var(--navy); }

/* kept recordings and attached documents in a note (R-052, R-053) */
.player { display: flex; align-items: center; gap: 8px; margin: 6px 0 12px; flex-wrap: wrap; }
.player audio { flex: 1 1 220px; min-width: 0; height: 40px; }
.player .small { color: var(--muted); }
.note a.att, .recs a.att { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line);
  border-radius: 12px; text-decoration: none; color: var(--ink); background: var(--surface); max-width: 100%; overflow-wrap: anywhere; }
.note a.att:hover { border-color: var(--navy-2); }
.note a.att .icon { width: 18px; height: 18px; color: var(--navy); }
/* four tools beside the record button: the label gives way, the icon stays visible */
.cap-bar #rec-start span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 430px) {
  .cap-tools { gap: 6px; }
  .cap-tools .round { width: 42px; height: 42px; min-height: 42px; border-radius: 21px; }
  .cap-bar { gap: 8px; }
  .cap-bar #rec-start { padding: 10px 12px; font-size: .95rem; gap: 6px; }
}