:root {
  --bg: #000; --surface: #0a0a0a; --surface-2: #141414; --surface-3: #1e1e1e;
  --border: #222; --text: #d4d4d4; --text-dim: #555; --text-bright: #fff;
  --blue: #4a9eff; --amber: #ffb347; --green: #4ade80; --red: #f87171; --purple: #a78bfa;
  --font: 'Inter', -apple-system, system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;
}
* { margin:0; padding:0; box-sizing:border-box; user-select:none; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; overflow:hidden; background:var(--bg); color:var(--text); font-family:var(--font); }

.dashboard { display:flex; flex-direction:column; height:100dvh; }

/* Header */
.header { display:flex; align-items:center; justify-content:space-between; padding:16px 24px; border-bottom:1px solid var(--border); flex-shrink:0; }
.header-left { display:flex; align-items:center; gap:12px; }
.header-right { display:flex; align-items:center; gap:12px; }
.logo { font-size:16px; font-weight:600; color:var(--text-dim); letter-spacing:1px; text-transform:uppercase; }
.status-dot { width:8px; height:8px; border-radius:50%; background:var(--text-dim); }
.status-dot.connected { background:var(--green); box-shadow:0 0 8px var(--green); }
.status-dot.listening { background:var(--blue); box-shadow:0 0 8px var(--blue); animation:pulse 2s infinite; }
.badge { font-size:11px; color:var(--text-dim); background:var(--surface-2); padding:4px 10px; border-radius:12px; }
.badge.active { color:var(--green); }

/* Main */
.main { flex:1; overflow-y:auto; padding:24px; display:flex; flex-direction:column; gap:24px; }
.section-title { font-size:14px; font-weight:600; color:var(--text-dim); margin-bottom:16px; letter-spacing:0.5px; }

/* Repos Grid */
.repos-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px; }
.repo-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; cursor:default; transition:border-color 0.2s; }
.repo-card:hover { border-color:var(--blue); }
.repo-card.active { border-color:var(--green); border-width:2px; }
.repo-name { font-size:15px; font-weight:600; color:var(--text-bright); margin-bottom:4px; }
.repo-desc { font-size:12px; color:var(--text-dim); line-height:1.4; margin-bottom:8px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.repo-meta { display:flex; gap:12px; font-size:11px; color:var(--text-dim); }
.repo-lang { color:var(--blue); }
.repo-pages { color:var(--green); }

.loading { color:var(--text-dim); font-size:14px; padding:40px; text-align:center; }

/* Transcript bar */
.transcript-bar { display:flex; align-items:center; gap:10px; padding:14px 20px; background:var(--surface); border:1px solid var(--border); border-radius:12px; flex-shrink:0; min-height:52px; }
.transcript-dot { width:8px; height:8px; border-radius:50%; background:var(--text-dim); flex-shrink:0; transition:all 0.3s; }
.transcript-dot.listening { background:var(--blue); box-shadow:0 0 8px var(--blue); animation:pulse 2s infinite; }
.transcript-dot.thinking { background:var(--amber); box-shadow:0 0 8px var(--amber); animation:pulse 1s infinite; }
.transcript-dot.speaking { background:var(--green); box-shadow:0 0 8px var(--green); }
.transcript-text { font-size:14px; color:var(--text-dim); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }