.listening-scope { color: var(--app-muted); margin: 0 0 20px; font-size: 0.85rem; overflow-wrap: anywhere; }
.listening-help { color: var(--app-dim); margin: 0 0 16px; font-size: 0.8rem; }
.listening-search label { display: block; color: var(--app-text); font-size: 0.85rem; margin-bottom: 8px; }
.listening-search-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.listening-search input { flex: 1 1 240px; min-width: 0; padding: 9px 12px; border: 1px solid var(--app-border); border-radius: 8px; background: var(--app-field); color: var(--app-text); }
.listening-search input:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; }
.listening-state { color: var(--app-muted); font-size: 0.8rem; min-height: 1.2em; margin: 18px 0 8px; }
.listening-records { list-style: none; margin: 0; padding: 0; }
.listening-record { display: flex; gap: 16px; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--app-border); }
.listening-record-copy { min-width: 0; }
.listening-record-title { color: var(--app-text); font-size: 0.9rem; font-weight: 500; overflow-wrap: anywhere; }
.listening-record-context, .listening-record-meta { color: var(--app-muted); font-size: 0.8rem; margin-top: 5px; overflow-wrap: anywhere; }
.listening-record-meta { color: var(--app-dim); font-size: 0.75rem; }
.listening-record-duration { color: var(--app-text); font-size: 0.8rem; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.listening-record a { color: inherit; text-decoration: underline; text-decoration-color: var(--app-border); text-underline-offset: 3px; }
.listening-record a:hover { color: var(--app-accent); }
.listening-record a:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 3px; border-radius: 2px; }
.listening-pagination { display: flex; gap: 8px; justify-content: center; margin-top: 18px; }
@media (max-width: 420px) { .listening-record { flex-direction: column; gap: 8px; } }