:root { --bg:#0e0f12; --panel:#171a20; --line:#262b34; --ink:#e8eaee; --dim:#8b93a1; --accent:#5b8cff; --bad:#ff6b6b; }
* { box-sizing:border-box }
body { margin:0; font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif; background:var(--bg); color:var(--ink) }
header { display:flex; align-items:center; gap:12px; padding:14px 20px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); z-index:5 }
header h1 { font-size:16px; margin:0; letter-spacing:.5px }
header .sp { flex:1 }
.wrap { display:grid; grid-template-columns:320px 1fr; gap:0; height:calc(100vh - 53px) }
aside { border-right:1px solid var(--line); overflow-y:auto; padding:14px }
main { overflow-y:auto; padding:22px 26px }
button, select, input, textarea { font:inherit; color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:8px 10px }
button { cursor:pointer }
button:hover { border-color:#3a4250 }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600 }
button.rec { width:100%; padding:14px; font-size:15px; font-weight:600 }
button.rec.on { background:var(--bad); border-color:var(--bad); color:#fff }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.stack > * + * { margin-top:8px }
.muted { color:var(--dim); font-size:13px }
.card { border:1px solid var(--line); border-radius:10px; padding:12px; margin-bottom:8px; cursor:pointer; background:var(--panel) }
.card:hover { border-color:#3a4250 }
.card.active { border-color:var(--accent) }
.card .t { font-weight:600; margin-bottom:3px }
.pill { font-size:11px; padding:1px 7px; border-radius:999px; border:1px solid var(--line); color:var(--dim) }
.pill.ready { color:#7ee2a8; border-color:#2c5c42 }
.pill.error { color:var(--bad); border-color:#5c2c2c }
.pill.processing { color:#ffd479; border-color:#5c4d2c }
h2 { font-size:19px; margin:26px 0 8px }
h3 { font-size:13px; text-transform:uppercase; letter-spacing:.8px; color:var(--dim); margin:22px 0 8px }
.md ul { padding-left:20px } .md li { margin:3px 0 }
.md code { background:#20242c; padding:1px 5px; border-radius:4px }
.task { display:flex; gap:9px; align-items:flex-start; padding:7px 0; border-bottom:1px solid var(--line) }
.task input { margin-top:3px }
.transcript { white-space:pre-wrap; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:14px; font-size:14px }
.chip { font-size:12px; padding:3px 10px; border-radius:999px; border:1px solid var(--line); color:var(--dim) }
.chip.unconfirmed { cursor:pointer; color:var(--ink) }
.chip.unconfirmed:hover { border-color:var(--accent) }
.markmap { width:100%; height:400px; border:1px solid var(--line); border-radius:10px; background:var(--panel) }
audio { width:100%; margin-top:10px }
.empty { color:var(--dim); padding:40px 0; text-align:center }
.banner { border:1px solid #5c2c2c; background:#1e1416; color:#ffb4b4; padding:10px 12px; border-radius:8px; margin-bottom:12px; font-size:13px }
.mm-tab { padding:5px 10px; font-size:12px }
.mm-tab.active { border-color:var(--accent); color:var(--accent) }
.bubble { max-width:75%; padding:9px 12px; border-radius:12px; margin:6px 0 }
.bubble.user { margin-left:auto; background:var(--accent); color:#fff }
.bubble.assistant { margin-right:auto; background:var(--panel); border:1px solid var(--line) }
.bubble .src { margin-top:6px }
.bubble .src a { font-size:11px; color:var(--dim); margin-right:10px; text-decoration:underline; cursor:pointer }
.bubble.user .src a { color:#e8eaff }
#chat-messages { display:flex; flex-direction:column }
dialog { border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--ink); padding:16px }
dialog::backdrop { background:rgba(0,0,0,.5) }
dialog textarea { width:100%; resize:vertical }
dialog input { width:100% }
@media (max-width:760px){ .wrap { grid-template-columns:1fr; height:auto } aside { border-right:0; border-bottom:1px solid var(--line) } }