/* 三端品牌与阅读布局；时间组件保留原尺寸和事件，仅换肤。 */
:root { --blue:#2466a8; --line:#dde5ec; --muted:#617589; --green:#2466a8; color:#172c3b; background:#f5f8fa; }
.sidebar { position:fixed; inset:0 auto 0 0; width:210px; padding:28px 18px 20px; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; background:#fff; border:0; border-right:1px solid var(--line); backdrop-filter:none; overflow-y:auto; }
.brand { gap:10px; font-size:18px; }
.app-mark { background:none; object-fit:contain; }
.sidebar-label { margin:28px 10px 0; font-size:12px; color:var(--muted); }
.sidebar nav { display:flex; flex-direction:column; align-items:stretch; gap:8px; }
.sidebar nav button,.sidebar nav a { display:block; padding:12px 14px; text-align:left; text-decoration:none; font-size:14px; border:0; border-radius:9px; color:#172c3b; background:transparent; }
.sidebar nav button:hover,.sidebar nav .nav-current { background:#e8f1f9; color:var(--blue); }
.sidebar-bottom { margin-top:auto; padding-top:30px; }
.sidebar .usage-panel { display:block; padding:16px 4px; border:0; border-top:1px solid var(--line); border-radius:0; font-size:13px; }
.sidebar .usage-panel h2 { font-size:13px; }
.sidebar .usage-panel button { margin-top:10px; font-size:12px; }
#logout { width:100%; text-align:left; border:0; font-size:13px; color:var(--muted); }
.workspace { max-width:1700px; margin-left:210px; padding:30px 36px; }
.page-heading { margin-bottom:24px; gap:16px; }
h1 { font-size:26px; line-height:1.25; }
.toolbar { gap:12px; }
.transcript-search { flex:1 1 300px; max-width:none; }
.search-controls input { background:white; }
.toolbar > label { flex:0 1 170px; }
.toolbar > label select { min-width:0; width:100%; }
.toolbar > button { min-height:42px; }
.panel { border-color:#e8edf1; border-radius:14px; }
.chart-panel { padding:18px 20px 12px; }
.bar:hover,.bar.selected { background:#174d82; }
.bar.zero { background:#dceaf5; }
.records-layout { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; align-items:start; }
.records-layout:has(.record-detail:not(.hidden)) { grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr); }
.logs-panel { background:transparent; border:0; border-radius:0; }
.logs-panel .section-heading { border:0; padding:0 0 18px; }
.log-head { display:none; }
.log-row { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; margin-bottom:12px; padding:18px 20px; border:1px solid #e8edf1; border-radius:14px; background:white; }
.log-row.is-selected { background:#e8f1f9; border-color:#d1e3f2; }
.log-row time { color:var(--muted); font-size:13px; }
.log-row > div:first-child { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.device-name { margin:0; }
.record-open { margin:0 0 0 auto!important; padding:5px 8px; border:0; background:transparent; color:var(--blue); font-size:12px; }
.log-row > div:last-child { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.log-row > div:last-child button { margin:0; font-size:12px; padding:6px 9px; }
.log-row audio { width:min(100%,250px); margin:0; }
.speaker-turn { align-items:flex-start; }
.speaker-turn.is-me,.speaker-turn.is-me .speaker-label { color:#2466a8; }
.speaker-turn.is-me .speaker-label { background:#e8f1f9; }
.record-detail { position:sticky; top:24px; max-height:calc(100dvh - 48px); overflow:auto; }
.record-detail .section-heading { position:sticky; top:0; background:white; z-index:1; align-items:center; padding:16px 20px; }
.record-detail .section-heading button { font-size:12px; }
.record-detail .log-row { margin:0; border:0; border-radius:0; gap:22px; }
.record-detail .transcript { line-height:1.8; white-space:pre-wrap; }
.record-detail .log-row > div:last-child { display:flex; flex-direction:column; align-items:stretch; }
.record-detail audio { width:100%; margin:12px 0; }
.record-detail .speaker-turn { padding:10px 0; }
.record-detail .speaker-label { flex-shrink:0; }
.pagination { border:0; }
footer { text-align:left; padding:24px 0; }
.live { color:#26785f; background:#e8f4ef; white-space:nowrap; }
#range-button { background:#e8f1f9; border-color:#d4e3f0; box-shadow:none; color:#2466a8; }
#range-caption,.range-tag { background:#dceaf5; color:#2466a8; }
#range-popover,#range-tooltip { border-color:#dde5ec; box-shadow:0 12px 32px #172c3b14,0 2px 6px #172c3b08; color:#172c3b; }
.range-presets button { background:#f4f8fb; border-color:#dde5ec; color:#2466a8; }
.range-presets button[aria-pressed=true],.range-footer .primary:not(:disabled),.range-day-grid button.chosen,#calendar-times button.chosen { background:#2466a8; border-color:#2466a8; color:white; }
.range-date-fields input.active { background:#e8f1f9; color:#2466a8; }
.range-link:hover { color:#2466a8; }
@media(max-width:1200px) { .workspace { padding:24px; } }
@media(max-width:1000px) {
  .records-layout:has(.record-detail:not(.hidden)) { grid-template-columns:minmax(0,1fr); }
  .record-detail { position:static; max-height:none; }
}
@media(max-width:720px) {
  .sidebar { position:static; width:auto; padding:16px; border-right:0; border-bottom:1px solid var(--line); overflow:visible; gap:14px; }
  .sidebar-label { display:none; }
  .sidebar nav { flex-direction:row; flex-wrap:wrap; gap:4px; margin:0; }
  .sidebar nav button,.sidebar nav a { padding:10px; font-size:12px; }
  .sidebar-bottom { padding:0; display:flex; flex-direction:column; gap:8px; }
  .sidebar .usage-panel { margin:0; padding:12px 0; }
  .sidebar .usage-panel h2,.sidebar .usage-panel small { display:none; }
  .sidebar .usage-panel button { margin:4px 0; }
  #logout { width:auto; min-height:40px; padding:8px 0; }
  .workspace { margin:0; padding:22px 16px; }
  .page-heading { align-items:start; flex-wrap:wrap; }
  .transcript-search { flex-basis:100%; }
  .time-filter { flex-basis:100%; }
  .log-row { padding:16px; }
  .record-open { margin-left:0!important; }
  .log-row > div:last-child { align-items:flex-start; }
}