:root { font-family: Inter, system-ui, sans-serif; color: #172823; background: #f3f6f3; line-height: 1.5; }
* { box-sizing: border-box; }
body { margin: 0; }
header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem max(1rem, calc((100% - 54rem) / 2)); background: white; border-bottom: 1px solid #dce5de; }
.brand { font-weight: 750; font-size: 1.2rem; text-decoration: none; }
nav, .actions, .options { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; }
main { max-width: 56rem; margin: 2rem auto; padding: 0 1rem; }
.panel { background: white; border: 1px solid #dce5de; border-radius: .8rem; padding: clamp(1rem, 4vw, 2rem); margin-bottom: 1rem; }
h1, h2 { line-height: 1.2; margin: 0 0 1rem; overflow-wrap: anywhere; }
h1 { font-size: clamp(1.4rem, 4vw, 2rem); }
h2 { font-size: 1.25rem; }
a { color: #18563f; }
button, .button, .secondary { display: inline-block; font: inherit; font-weight: 600; border-radius: .4rem; padding: .5rem .8rem; border: 1px solid transparent; background: #18563f; color: white; cursor: pointer; text-decoration: none; }
.secondary { background: #f1f5f2; border-color: #dce5de; color: #174735; }
.danger { background: #fff4f3; color: #8c2927; border-color: #f1d4d2; }
button:disabled { opacity: .6; cursor: default; }
label { display: block; }
select, input[type=number] { font: inherit; display: block; max-width: 100%; padding: .4rem; border: 1px solid #b8c7be; border-radius: .35rem; background: white; color: inherit; }
input[type=file] { max-width: 100%; }
.drop { cursor: pointer; display: grid; gap: .5rem; padding: 1.2rem; border: 2px dashed #9bb5a5; background: #f8fbf8; border-radius: .5rem; }
.drop.drag { background: #e4f2e9; }
.options { margin: 1rem 0; align-items: end; gap: 1rem; }
.check { align-self: center; }
progress, audio { width: 100%; margin: .8rem 0; accent-color: #18563f; }
.entries, .transcript { list-style: none; padding: 0; margin: 0; }
.entries li, .transcript li { padding: .75rem 0; border-bottom: 1px solid #e5ebe6; overflow-wrap: anywhere; }
.entries li:last-child, .transcript li:last-child { border-bottom: 0; }
.entries span { display: block; font-size: .875rem; color: #495e53; }
.entries form { margin-top: .5rem; }
.transcript li { display: flex; gap: .75rem; align-items: baseline; }
.seek { color: #18563f; background: #f1f5f2; font-variant-numeric: tabular-nums; }
.spinner { display: inline-block; width: .9em; height: .9em; border: 2px solid #b8c7be; border-top-color: #18563f; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }