:root {
  --bg: #0d1117; --surface: #161b22; --surface2: #1c2330; --border: #30363d;
  --text: #e6edf3; --muted: #8b949e; --accent: #58a6ff; --green: #3fb950;
  --red: #f85149; --orange: #d29922; --purple: #bc8cff; --mono: 'SF Mono','Consolas','Liberation Mono',monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; background:var(--bg); color:var(--text); height:100vh; overflow:hidden; font-size:14px; }
.app { display:flex; height:100vh; }
.sidebar { width:280px; min-width:200px; background:var(--surface); border-right:1px solid var(--border); overflow-y:auto; display:flex; flex-direction:column; }
.sidebar-header { padding:12px 16px; height:41px; border-bottom:1px solid var(--border); font-weight:600; font-size:15px; color:var(--accent); }
.sidebar-header img {height: 20px; margin-right: 10px;}
.session-item { padding:10px 16px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .15s; }
.session-item:hover { background:var(--surface2); }
.session-item.active { background:var(--surface2); border-left:3px solid var(--accent); }
.session-item .cmd { font-family:var(--mono); font-size:13px; color:var(--text); font-weight:500; }
.session-item .meta { font-size:11px; color:var(--muted); margin-top:3px; display:flex; gap:8px; align-items:center; }
.session-item .badge { padding:1px 6px; border-radius:8px; font-size:10px; font-weight:600; }
.badge.ok { background:rgba(63,185,80,.15); color:var(--green); }
.badge.err { background:rgba(248,81,73,.15); color:var(--red); }
.badge.neutral { background:rgba(139,148,158,.15); color:var(--muted); }
.main { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.tabs { display:flex; border-bottom:1px solid var(--border); background:var(--surface); padding:0 16px; gap:4px; }
.tab { padding:10px 18px; cursor:pointer; color:var(--muted); font-weight:500; font-size:14px; border-bottom:2px solid transparent; transition:all .15s; }
.tab:hover { color:var(--text); }
.tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.tab .count { font-size:11px; background:var(--surface2); padding:1px 7px; border-radius:10px; margin-left:6px; color:var(--muted); }
.content { flex:1; overflow-y:auto; padding:20px; }
.empty { display:flex; align-items:center; justify-content:center; height:100%; color:var(--muted); font-size:15px; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:8px; margin-bottom:16px; overflow:hidden; }
.card-header { padding:10px 16px; background:var(--surface2); border-bottom:1px solid var(--border); font-size:12px; color:var(--muted); display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.card-header .tag { font-family:var(--mono); font-size:11px; padding:2px 8px; border-radius:4px; background:var(--bg); color:var(--accent); }
.msg { padding:12px 16px; border-bottom:1px solid var(--border); }
.msg:last-child { border-bottom:none; }
.msg-role { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.role-system { color:var(--muted); }
.role-user { color:var(--accent); }
.role-assistant { color:var(--purple); }
.role-tool { color:var(--orange); }
.msg-body { font-size:13px; line-height:1.6; white-space:pre-wrap; word-break:break-word; font-family:var(--mono); }
.msg-thinking { background:rgba(188,140,255,.06); border-left:3px solid var(--purple); padding:8px 12px; margin:6px 0; font-size:12px; color:var(--muted); border-radius:0 4px 4px 0; cursor:pointer; }
.msg-thinking .label { font-weight:600; color:var(--purple); font-size:11px; text-transform:uppercase; margin-bottom:4px; }
.msg-thinking .body { display:none; white-space:pre-wrap; font-family:var(--mono); }
.msg-thinking.expanded .body { display:block; }
.tool-call { background:rgba(210,153,34,.08); border:1px solid rgba(210,153,34,.2); border-radius:4px; padding:8px 12px; margin:6px 0; font-size:12px; }
.tool-call .tool-name { color:var(--orange); font-weight:600; font-family:var(--mono); }
.tool-call .tool-input { margin-top:4px; white-space:pre-wrap; font-family:var(--mono); color:var(--text); }
.tool-result { background:rgba(63,185,80,.06); border:1px solid rgba(63,185,80,.15); border-radius:4px; padding:8px 12px; margin:6px 0; font-size:12px; }
.tool-result.error { background:rgba(248,81,73,.06); border-color:rgba(248,81,73,.15); }
.tool-result .label { color:var(--green); font-weight:600; font-size:11px; text-transform:uppercase; margin-bottom:4px; }
.tool-result.error .label { color:var(--red); }
.tool-result .body { white-space:pre-wrap; font-family:var(--mono); color:var(--text); }
.usage-bar { font-size:11px; color:var(--muted); font-family:var(--mono); }
.audit-event { padding:10px 16px; border-bottom:1px solid var(--border); display:flex; gap:12px; }
.audit-event .seq { color:var(--muted); font-family:var(--mono); font-size:11px; min-width:30px; }
.audit-event .type { font-weight:600; font-size:13px; min-width:140px; }
.audit-event .type.session_started { color:var(--green); }
.audit-event .type.session_ended { color:var(--orange); }
.audit-event .type.url_open { color:var(--accent); }
.audit-event .detail { font-size:12px; color:var(--muted); font-family:var(--mono); flex:1; word-break:break-all; }
.audit-event .time { font-size:11px; color:var(--muted); font-family:var(--mono); white-space:nowrap; }
.info-grid { display:grid; grid-template-columns:160px 1fr; gap:4px 16px; font-size:13px; }
.info-grid .key { color:var(--muted); font-weight:600; }
.info-grid .val { font-family:var(--mono); font-size:12px; word-break:break-all; }
.hash { font-family:var(--mono); font-size:11px; color:var(--muted); word-break:break-all; }
.scrollable { max-height:400px; overflow-y:auto; }
.kv-list { font-size:12px; font-family:var(--mono); }
.kv-list div { padding:2px 0; }
.collapsible-toggle { cursor:pointer; color:var(--accent); font-size:12px; user-select:none; }
.json-view { white-space:pre-wrap; font-family:var(--mono); font-size:12px; color:var(--text); background:var(--bg); padding:8px 12px; border-radius:4px; overflow-x:auto; }
.search-box { padding:8px 16px; border-bottom:1px solid var(--border); }
.search-box input { width:100%; padding:6px 10px; background:var(--bg); border:1px solid var(--border); border-radius:4px; color:var(--text); font-size:13px; }
.search-box input:focus { outline:none; border-color:var(--accent); }
.diff-container { font-family:var(--mono); font-size:12px; line-height:1.5; background:var(--bg); border-radius:4px; overflow-x:auto; max-height:500px; overflow-y:auto; }
.diff-line { padding:0 12px; white-space:pre-wrap; word-break:break-all; }
.diff-line-add { background:rgba(63,185,80,.08); color:var(--green); }
.diff-line-del { background:rgba(248,81,73,.08); color:var(--red); }
.diff-line-hunk { color:var(--accent); padding-top:4px; padding-bottom:2px; }
.diff-line-header { color:var(--muted); font-weight:600; padding-top:4px; padding-bottom:2px; }
.diff-toggle { cursor:pointer; color:var(--accent); font-size:12px; user-select:none; padding:6px 16px; }
.filter-bar { padding:8px 16px; border-bottom:1px solid var(--border); display:flex; gap:12px; align-items:center; }
.filter-bar label { font-size:12px; color:var(--muted); cursor:pointer; user-select:none; }
.filter-bar input[type="text"] { flex:1; padding:4px 8px; background:var(--bg); border:1px solid var(--border); border-radius:4px; color:var(--text); font-size:12px; }
.filter-bar input[type="text"]:focus { outline:none; border-color:var(--accent); }

/* Summary screen */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:12px; }
.stat-card { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:16px; text-align:center; }
.stat-card .stat-value { font-size:28px; font-weight:700; color:var(--text); font-family:var(--mono); }
.stat-card .stat-label { font-size:12px; color:var(--muted); margin-top:6px; text-transform:uppercase; letter-spacing:.5px; }
.stat-card .stat-sub { font-size:11px; color:var(--muted); margin-top:4px; font-family:var(--mono); }
.token-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; }
.token-box { background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:12px; text-align:center; }
.token-box .token-value { font-size:22px; font-weight:700; font-family:var(--mono); }
.token-box .token-label { font-size:11px; color:var(--muted); margin-top:4px; }
.token-in { color:var(--accent); }
.token-out { color:var(--purple); }
.token-cache { color:var(--green); }
.token-total { color:var(--text); }
.model-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid var(--border); }
.model-row:last-child { border-bottom:none; }
.model-name { font-family:var(--mono); font-size:13px; color:var(--accent); }
.model-calls { font-size:12px; color:var(--muted); }
.summary-section { margin-bottom:20px; }
