* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; font-family: Calibri, system-ui, sans-serif; font-size: 14px; color: #222; background: #fafafa; }

header { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: white; border-bottom: 1px solid #e0e0e0; height: 56px; }
header h1 { font-size: 18px; margin: 0; font-weight: 600; }
#search { flex: 1; max-width: 480px; margin: 0 24px; padding: 6px 10px; font-family: inherit; font-size: 13px; border: 1px solid #ccc; border-radius: 4px; }

main { display: flex; height: calc(100% - 56px); }

#sidebar { width: 280px; flex-shrink: 0; background: white; border-right: 1px solid #e0e0e0; overflow-y: auto; }
#meeting-list { list-style: none; margin: 0; padding: 0; }
#meeting-list li { padding: 12px 14px; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
#meeting-list li:hover { background: #f5f5f5; }
#meeting-list li.active { background: #e8f5ed; border-left: 3px solid #2a7; padding-left: 11px; }
#meeting-list .title { font-weight: 500; margin-bottom: 4px; }
#meeting-list .meta { font-size: 11px; color: #888; }
#meeting-list .status-recording { color: #c80; }
#meeting-list .status-transcribing, #meeting-list .status-generating_notes { color: #08c; }
#meeting-list .status-complete { color: #283; }
#meeting-list .status-failed { color: #c33; }

#detail { flex: 1; overflow-y: auto; padding: 24px 32px; }
#empty-state { color: #999; text-align: center; margin-top: 80px; font-size: 14px; }

#meeting-header { margin-bottom: 24px; }
#meeting-title { font-size: 22px; font-weight: 600; width: 100%; border: none; background: transparent; padding: 4px 0; font-family: inherit; color: inherit; }
#meeting-title:focus { outline: none; border-bottom: 1px solid #2a7; }
#meeting-header .meta { font-size: 12px; color: #888; margin-top: 6px; display: flex; align-items: center; gap: 12px; }
#meeting-header button { padding: 4px 10px; font-size: 12px; border: 1px solid #ccc; background: white; border-radius: 4px; cursor: pointer; font-family: inherit; color: #c33; }
#meeting-header button:hover { background: #fee; }

h2 { font-size: 13px; color: #666; text-transform: uppercase; letter-spacing: 0.5px; margin: 24px 0 10px 0; }

#notes-body .summary { background: white; padding: 14px 16px; border-radius: 6px; border-left: 3px solid #2a7; margin-bottom: 16px; line-height: 1.5; }
#notes-body h3 { font-size: 13px; margin: 14px 0 6px 0; color: #444; }
#notes-body ul { margin: 0; padding-left: 20px; }
#notes-body li { margin-bottom: 4px; line-height: 1.45; }
#notes-body .action { padding-left: 0; list-style: none; }
#notes-body .action::before { content: "\2610  "; }
#notes-body .quote { font-style: italic; color: #555; border-left: 2px solid #ccc; padding-left: 10px; }

#transcript-body { background: white; padding: 14px 16px; border-radius: 6px; max-height: 480px; overflow-y: auto; }
#transcript-body .seg { display: flex; gap: 10px; margin-bottom: 6px; font-size: 13px; line-height: 1.4; }
#transcript-body .ts { color: #999; font-size: 11px; min-width: 44px; font-variant-numeric: tabular-nums; padding-top: 2px; }