:root { color-scheme: light dark; font: 17px/1.5 system-ui, sans-serif; --panel: #eef3f7; --ink: #15394e; }
* { box-sizing: border-box; }
body { max-width: 760px; margin: auto; padding: 18px; }
header { display: flex; align-items: center; gap: 12px; }
h1 { font-size: 1.35rem; } h2 { font-size: 1.2rem; margin-top: 0; }
article, section, dialog { padding: 20px; border: 1px solid #81929e; border-radius: 14px; background: var(--panel); }
article { margin-bottom: 18px; } p { overflow-wrap: anywhere; }
button, input, select { font: inherit; min-height: 48px; border-radius: 8px; padding: 9px 12px; }
button { cursor: pointer; border: 1px solid #637d8d; background: #173b52; color: white; }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #e98722; outline-offset: 3px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
.actions button { flex: 1 1 130px; }
meter, audio { width: 100%; } audio { margin-top: 12px; }
label { display: grid; gap: 5px; margin-bottom: 14px; }
input, select { width: 100%; min-width: 0; }
.check { display: flex; align-items: center; gap: 12px; }
.check input { width: 24px; flex-shrink: 0; }
fieldset { margin: 16px 0; border: 1px solid #81929e; border-radius: 10px; }
dialog { max-height: 90dvh; width: min(94vw, 640px); overflow: auto; color: inherit; }
dialog::backdrop { background: #0009; }
[hidden] { display: none !important; }
#error, #edit-error { color: #b42b20; font-weight: 600; }
footer { margin-top: 26px; font-size: .85rem; opacity: .8; }
@media (prefers-color-scheme: dark) { :root { --panel: #17242e; --ink: #dce7ee; } body { background: #0d161d; color: var(--ink); } #error, #edit-error { color: #ff9f94; } }

#sound-presets button[aria-pressed="true"] { background: #246d3c; outline: 3px solid #edb600; }
.recordings { display: grid; gap: 10px; margin-top: 16px; }
.recordings button { width: 100%; text-align: left; overflow-wrap: anywhere; }
.speeds button { flex: 1 1 70px; }
.speeds button[aria-pressed="true"] { background: #246d3c; outline: 3px solid #edb600; }
.download { display: inline-block; min-height: 48px; padding: 10px 14px; color: inherit; }

#devices { margin-bottom: 18px; }
#ios-help { margin: 18px 0; }
progress { width: 100%; }
#pair-link { font-size: .9rem; }
summary { min-height: 48px; cursor: pointer; padding: 9px 0; }
.file-detail { font-size: .85rem; }