:root { --fg: #1d1b20; --muted: #6b6670; --line: #e4e0e8; --accent: #7a1f3d; --bg: #faf8fb; }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--fg); background: var(--bg); }
header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.2rem; background: var(--accent); color: #fff; }
header h1 { margin: 0; font-size: 1.15rem; }
header form { display: flex; align-items: center; gap: .6rem; font-size: .9rem; }
main { max-width: 760px; margin: 0 auto; padding: 1rem 1.2rem 3rem; }
h2 { font-size: 1.05rem; margin: 1.6rem 0 .6rem; }
h2 small { color: var(--muted); font-weight: normal; }
.items { list-style: none; margin: 0; padding: 0; }
.items li { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: .8rem .9rem; margin-bottom: .6rem; }
.items li.new { border-left: 4px solid var(--accent); }
.meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .6rem; }
.num, .when, .empty { color: var(--muted); font-size: .9rem; }
.when { margin-left: auto; }
.tag { font-size: .75rem; padding: .1rem .45rem; border-radius: 99px; background: var(--line); }
.tag.new { background: var(--accent); color: #fff; }
audio { width: 100%; margin-top: .55rem; }
.actions { display: flex; gap: .5rem; margin-top: .4rem; }
button, .button { font: inherit; font-size: .9rem; padding: .35rem .8rem; border-radius: 7px; border: 1px solid var(--line); background: #fff; cursor: pointer; color: var(--fg); text-decoration: none; display: inline-block; }
button.danger { color: #a3122a; }
button.link { background: none; border: 0; color: #fff; text-decoration: underline; padding: 0; }
.login { text-align: center; margin-top: 3rem; }
.login .button { background: var(--accent); color: #fff; border: 0; padding: .6rem 1.2rem; font-size: 1rem; }
.error { color: #a3122a; }
.transcript { margin: .5rem 0 0; padding: .4rem .5rem; background: var(--bg); border-radius: 7px; font-size: .95rem; list-style: none; }
.transcript li { padding: .15rem .3rem; border-radius: 5px; }
.transcript li.playing { background: #f7ecf0; }
.transcript .w { cursor: pointer; border-radius: 3px; }
.transcript .w:hover { background: var(--line); }
.transcript .w.playing { background: var(--accent); color: #fff; }
.transcript .ts { font: .8rem ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--accent); border: 0; background: none; padding: 0 .3rem 0 0; cursor: pointer; }
.transcript.pending { color: var(--muted); font-style: italic; }
.transcript .sp { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; padding: 0 .35rem; border-radius: 4px; margin-right: .1rem; }
.transcript .sp-caller { background: #e6eefc; color: #23468a; }
.transcript .sp-staff { background: #f3dfe6; color: var(--accent); }