:root {
  --bg:        #0d1117;
  --bg-card:   #161b22;
  --bg-btn:    #21262d;
  --bg-hover:  #30363d;
  --bg-input:  #0d1117;
  --border:    #30363d;
  --border-lt: #21262d;
  --text:      #c9d1d9;
  --text-h:    #f0f6fc;
  --text-m:    #8b949e;
  --text-d:    #6e7681;
  --accent:    #1f6feb;
  --success:   #238636;
  --warn:      #d29922;
  --danger:    #f85149;
  --bar-bg:    #21262d;
}
[data-theme="light"] {
  --bg:        #f6f8fa;
  --bg-card:   #ffffff;
  --bg-btn:    #f6f8fa;
  --bg-hover:  #eaeef2;
  --bg-input:  #ffffff;
  --border:    #d0d7de;
  --border-lt: #eaeef2;
  --text:      #24292f;
  --text-h:    #1f2328;
  --text-m:    #57606a;
  --text-d:    #6e7781;
  --accent:    #0969da;
  --success:   #1a7f37;
  --warn:      #9a6700;
  --danger:    #cf222e;
  --bar-bg:    #eaeef2;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: monospace; background: var(--bg); color: var(--text); font-size: 13px; transition: background 0.15s, color 0.15s; }
#app { max-width: 960px; margin: 0 auto; padding: 16px; }
/* Run detail uses the full viewport width for a big terminal */
body.run-detail-active #app { max-width: 1600px; }
body.bug-bounty-active #app { max-width: 1280px; }
header { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
header h1 { font-size: 16px; color: var(--text-h); }
.brand-lockup { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-logo { display: block; width: 48px; height: 40px; flex: 0 0 auto; }
.brand-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brand-copy h1 { line-height: 1.05; }
.brand-kicker { color: var(--text-m); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
nav { display: flex; gap: 8px; align-items: center; }
nav button { background: var(--bg-btn); border: 1px solid var(--border); color: var(--text-m); padding: 4px 12px; cursor: pointer; border-radius: 4px; font-family: monospace; }
nav button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
#theme-toggle { background: none; border: 1px solid var(--border); color: var(--text-m); padding: 4px 8px; cursor: pointer; border-radius: 4px; font-size: 14px; line-height: 1; }
.section-label { color: var(--text-m); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; margin: 16px 0 8px; }
.card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 12px; margin-bottom: 12px; }
.progress-bar-outer { background: var(--bar-bg); border-radius: 4px; height: 7px; }
.progress-bar-inner { height: 100%; border-radius: 4px; background: var(--accent); transition: width 0.3s; }
.step-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.step-status { width: 16px; text-align: center; }
.step-name { flex: 1; }
.step-meta { color: var(--text-m); font-size: 11px; }
.btn { background: var(--bg-btn); border: 1px solid var(--border); color: var(--text); padding: 4px 10px; cursor: pointer; border-radius: 4px; font-family: monospace; font-size: 12px; }
.btn:hover { background: var(--bg-hover); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.history-row { display: flex; align-items: center; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--border-lt); }
.tag { background: var(--bg-btn); border-radius: 3px; padding: 1px 6px; font-size: 11px; }
.status-badge { display:inline-flex; align-items:center; gap:4px; border:1px solid var(--border); border-radius:4px; padding:1px 6px; font-size:11px; line-height:1.45; white-space:nowrap; background:var(--bg-btn); color:var(--text-m); }
.status-running { border-color:var(--warn); color:var(--warn); background:rgba(210,153,34,0.10); }
.status-pending { border-color:var(--border); color:var(--text-m); }
.status-done { border-color:var(--success); color:var(--success); background:rgba(35,134,54,0.10); }
.status-stopped { border-color:var(--accent); color:var(--text-h); background:rgba(31,111,235,0.14); }
.status-frozen { border-color:var(--text-d); color:var(--text-h); background:rgba(110,118,129,0.18); }
.status-bad { border-color:var(--danger); color:var(--danger); background:rgba(248,81,73,0.10); }
.status-projected { color:var(--text-d); font-size:10px; }
input[type=text] { background: var(--bg-input); border: 1px solid var(--border); color: var(--text); padding: 4px 8px; border-radius: 4px; font-family: monospace; font-size: 12px; width: 100%; }
.screen { display: none; }
.screen.active { display: block; }
.diag-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 12px; }
.diag-table th, .diag-table td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--border-lt); }
.diag-table th { color: var(--text-m); font-weight: 600; }
#project-tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.tab-btn { padding: 4px 12px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-btn); color: var(--text-m); cursor: pointer; font-size: 13px; font-family: monospace; }
.tab-btn:hover { background: var(--bg-hover); }
.tab-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-resume { padding: 6px 16px; background: var(--success); color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; margin-left: 12px; }
.btn-resume:hover { opacity: 0.85; }
.btn-resume:disabled { opacity: 0.6; cursor: default; }
.preset-btn { display: flex; flex-direction: column; padding: 8px 14px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-btn); color: var(--text); cursor: pointer; text-align: left; min-width: 140px; transition: border-color 0.15s; }
.preset-btn:hover { border-color: var(--accent); }
.preset-btn:disabled { opacity: 0.6; cursor: default; }
.preset-name { font-size: 14px; font-weight: 500; }
.preset-desc { font-size: 11px; color: var(--text-m); margin-top: 2px; }
/* Account cards */
.acct-card { border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; }
.acct-card:last-child { margin-bottom: 0; }
.badge { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 4px; font-weight: 500; }
.badge-cli-claude { background: #d4f5d4; color: #1a7f37; }
[data-theme="light"] .badge-cli-claude { background: #dafbe1; }
.badge-cli-codex  { background: #ddf4ff; color: #0550ae; }
[data-theme="light"] .badge-cli-codex  { background: #ddf4ff; }
.badge-plan { background: var(--bar-bg); color: var(--text-m); }
.badge-cooldown { background: #ffd7d7; color: #cf222e; }
[data-theme="light"] .badge-cooldown { background: #ffebe9; }
.quota-row { display: grid; grid-template-columns: 26px minmax(50px,1fr) 38px max-content; align-items: center; gap: 4px 8px; font-size: 12px; margin-top: 6px; }
.quota-label { color: var(--text-m); font-weight: 600; font-size: 11px; }
.quota-nums { color: var(--text-m); text-align: right; }
.quota-reset { color: var(--text-d); white-space: nowrap; }

/* Settings tabs */
.settings-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.settings-tab { padding: 8px 20px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-m); cursor: pointer; font-family: monospace; font-size: 13px; }
.settings-tab.active { color: var(--text-h); border-bottom-color: var(--accent); }
.settings-tab-content { display: none; }
.settings-tab-content.active { display: block; }

/* Toggle switch */
.toggle-wrap { display: flex; align-items: center; gap: 10px; }
.toggle { position: relative; width: 36px; height: 20px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; inset: 0; background: var(--border); border-radius: 20px; cursor: pointer; transition: background 0.2s; }
.toggle-slider::before { content: ''; position: absolute; width: 14px; height: 14px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform 0.2s; }
.toggle input:checked + .toggle-slider { background: var(--accent); }
.toggle input:checked + .toggle-slider::before { transform: translateX(16px); }

/* Plugin cards */
.plugin-group-label { font-size: 11px; color: var(--text-m); text-transform: uppercase; letter-spacing: 1px; margin: 16px 0 8px; }
.plugin-card { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border-lt); border-radius: 6px; margin-bottom: 6px; background: var(--bg-card); }
.plugin-card-info { flex: 1; min-width: 0; }
.plugin-card-name { font-size: 13px; font-weight: 600; color: var(--text-h); }
.plugin-card-desc { font-size: 12px; color: var(--text-m); margin-top: 2px; }
.plugin-not-installed { opacity: 0.55; }

/* Terminal layout */
.layout-picker { display: flex; gap: 8px; margin-bottom: 20px; }
.layout-option { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-btn); cursor: pointer; transition: border-color 0.15s; }
.layout-option:hover { border-color: var(--accent); }
.layout-option.active { border-color: var(--accent); background: rgba(31,111,235,0.1); }
.layout-option-label { font-size: 11px; color: var(--text-m); }
.layout-preview { display: grid; gap: 2px; width: 48px; height: 32px; }
.layout-preview .lp-cell { background: var(--border); border-radius: 2px; }
.lp-1 { grid-template-columns: 1fr; }
.lp-2 { grid-template-columns: 1fr 1fr; }
.lp-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.lp-3 .lp-cell:first-child { grid-row: 1 / 3; }
.lp-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }

/* Terminal grid */
.terminal-grid { display: grid; gap: 12px; }
.tg-1 { grid-template-columns: 1fr; }
.tg-2 { grid-template-columns: 1fr 1fr; }
.tg-3 { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; }
.tg-3 .terminal-card:first-child { grid-row: 1 / 3; }
.tg-4 { grid-template-columns: 1fr 1fr; }

/* Terminal card */
.terminal-card { border: 1px solid var(--border); border-radius: 8px; padding: 14px; background: var(--bg-card); }
.terminal-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.terminal-card-title { font-size: 12px; font-weight: 600; color: var(--text-m); }
.terminal-field { margin-bottom: 10px; }
.terminal-field label { display: block; font-size: 11px; color: var(--text-m); margin-bottom: 4px; }
.terminal-field select, .terminal-field input { width: 100%; background: var(--bg-input); border: 1px solid var(--border); color: var(--text); padding: 5px 8px; border-radius: 4px; font-family: monospace; font-size: 12px; }
.terminal-field select:focus, .terminal-field input:focus { outline: none; border-color: var(--accent); }

/* Settings save bar */
.settings-save-bar { position: sticky; bottom: 0; background: var(--bg); border-top: 1px solid var(--border); padding: 12px 0; margin-top: 20px; display: flex; align-items: center; gap: 12px; }
.settings-save-status { font-size: 12px; color: var(--text-m); }

/* Run mode modal */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); display:flex; align-items:center; justify-content:center; z-index:100; }
.modal-overlay.hidden { display:none; }
.modal-box { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:24px; min-width:320px; max-width:420px; }
.modal-title { font-size:15px; font-weight:600; color:var(--text-h); margin-bottom:16px; }
.mode-option { display:flex; align-items:flex-start; gap:10px; padding:10px; border:1px solid var(--border-lt); border-radius:6px; margin-bottom:8px; cursor:pointer; transition:border-color 0.15s; }
.mode-option:hover { border-color:var(--accent); }
.mode-option input[type=radio] { margin-top:2px; flex-shrink:0; }
.mode-option-label { font-size:13px; font-weight:600; color:var(--text-h); }
.mode-option-desc { font-size:12px; color:var(--text-m); margin-top:2px; }
.modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; }

/* Review panel */
.review-panel { background:var(--bg-card); border:2px solid var(--warn); border-radius:8px; padding:16px; margin-bottom:12px; }
.review-panel-title { font-size:13px; font-weight:600; color:var(--warn); margin-bottom:12px; }
.review-checklist { margin-bottom:12px; }
.review-checklist-item { display:flex; align-items:center; gap:8px; padding:4px 0; font-size:13px; }
.review-checklist-item input[type=checkbox] { width:15px; height:15px; cursor:pointer; }
.review-comment { width:100%; background:var(--bg-input); border:1px solid var(--border); color:var(--text); padding:8px; border-radius:4px; font-family:monospace; font-size:12px; resize:vertical; min-height:60px; margin-bottom:12px; }
.review-actions { display:flex; gap:8px; }
.btn-approve { background:var(--success); border-color:var(--success); color:#fff; }
.btn-rework { background:var(--warn); border-color:var(--warn); color:#fff; }

/* Chat sidebar */
.run-detail-layout { display:flex; gap:16px; }
.run-detail-main { flex:1; min-width:0; }
.chat-sidebar { width:300px; flex-shrink:0; border:1px solid var(--border); border-radius:8px; display:flex; flex-direction:column; max-height:600px; }
.chat-sidebar.collapsed { display:none; }
.chat-header { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; border-bottom:1px solid var(--border); font-size:12px; font-weight:600; }
.chat-toggle-btn { background:none; border:none; color:var(--text-m); cursor:pointer; font-size:14px; line-height:1; }
.chat-messages { flex:1; overflow-y:auto; padding:8px 12px; display:flex; flex-direction:column; gap:8px; min-height:200px; }
.chat-msg-user { align-self:flex-end; background:var(--accent); color:#fff; border-radius:8px 8px 2px 8px; padding:6px 10px; font-size:12px; max-width:90%; word-break:break-word; }
.chat-msg-ai { align-self:flex-start; background:var(--bg-btn); border:1px solid var(--border-lt); border-radius:8px 8px 8px 2px; padding:6px 10px; font-size:12px; max-width:90%; white-space:pre-wrap; word-break:break-word; }
.chat-model-row { padding:4px 8px; border-top:1px solid var(--border-lt); }
.chat-model-row select { width:100%; font-size:11px; background:var(--bg-input); border:1px solid var(--border-lt); color:var(--text-m); padding:2px 4px; border-radius:4px; font-family:monospace; }
.chat-input-row { display:flex; gap:6px; padding:8px; border-top:1px solid var(--border); }
.chat-input-row input { flex:1; }

/* Progress panel */
.progress-summary { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.progress-pct-big { font-size:28px; font-weight:700; color:var(--text-h); line-height:1; }
.progress-sublabel { font-size:12px; color:var(--text-m); margin-top:2px; }
.phase-progress-row { margin-bottom:8px; }
.phase-progress-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:4px; cursor:pointer; user-select:none; }
.phase-progress-name { font-size:13px; font-weight:600; color:var(--text-h); }
.phase-progress-count { font-size:12px; color:var(--text-m); }
.phase-steps-list { padding-left:12px; }
.phase-step-row { display:flex; align-items:flex-start; gap:6px; padding:2px 0; font-size:12px; }
.phase-step-done { color:var(--success); }
.phase-step-todo { color:var(--text-d); }

/* Optimization */
.opt-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:12px; margin-bottom:16px; }
.opt-stat-card { background:var(--bg-card); border:1px solid var(--border); border-radius:10px; padding:14px; }
.opt-stat-value { font-size:28px; line-height:1; font-weight:700; color:var(--text-h); }
.opt-stat-label { font-size:11px; color:var(--text-m); text-transform:uppercase; letter-spacing:.08em; margin-top:6px; }
.opt-stat-meta { font-size:12px; color:var(--text-d); margin-top:8px; }
.opt-two-col { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr); gap:16px; align-items:start; }
.opt-section { background:var(--bg-card); border:1px solid var(--border); border-radius:10px; padding:14px; margin-bottom:16px; }
.opt-section-title { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.opt-section-title strong { font-size:14px; color:var(--text-h); }
.opt-section-note { font-size:11px; color:var(--text-d); }
.opt-table { width:100%; border-collapse:collapse; font-size:12px; }
.opt-table th, .opt-table td { text-align:left; padding:8px 6px; border-bottom:1px solid var(--border-lt); vertical-align:top; }
.opt-table th { color:var(--text-m); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.opt-list { display:flex; flex-direction:column; gap:10px; }
.opt-item { border:1px solid var(--border-lt); border-radius:8px; padding:12px; background:linear-gradient(180deg, rgba(31,111,235,.08), transparent); }
.opt-item-title { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text-h); font-weight:600; margin-bottom:6px; flex-wrap:wrap; }
.opt-item-detail { font-size:12px; color:var(--text-m); line-height:1.5; }
.opt-pill { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:3px 8px; background:var(--bg-btn); color:var(--text-m); font-size:11px; }
.opt-flag-overkill { color:var(--warn); }
.opt-flag-underpowered { color:var(--danger); }
.opt-muted { color:var(--text-d); font-size:12px; }

/* Static meta-orchestration panel */
.meta-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px; margin-bottom:16px; }
.meta-stat-card { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:14px; min-width:0; }
.meta-card-label { color:var(--text-m); font-size:11px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:8px; }
.meta-card-title { color:var(--text-h); font-size:15px; font-weight:700; line-height:1.35; overflow-wrap:anywhere; }
.meta-card-metric { color:var(--text-h); font-size:26px; font-weight:700; line-height:1; margin-top:8px; }
.meta-card-body { color:var(--text-m); font-size:12px; line-height:1.5; margin:10px 0; overflow-wrap:anywhere; }
.meta-pill { display:inline-flex; align-items:center; border:1px solid var(--border); border-radius:999px; padding:3px 8px; background:var(--bg-btn); color:var(--text-m); font-size:11px; line-height:1.4; max-width:100%; overflow-wrap:anywhere; }
.meta-pill[data-tone="live"] { border-color:var(--success); color:var(--success); background:rgba(35,134,54,.10); }
.meta-pill[data-tone="warn"] { border-color:var(--warn); color:var(--warn); background:rgba(210,153,34,.10); }
.meta-run-list { display:flex; flex-direction:column; gap:10px; }
.meta-run-row { display:grid; grid-template-columns:minmax(0, 1fr) max-content; gap:12px; border:1px solid var(--border-lt); border-radius:8px; padding:12px; background:var(--bg); }
.meta-run-main { min-width:0; }
.meta-run-title { color:var(--text-h); font-size:13px; font-weight:700; margin-bottom:6px; overflow-wrap:anywhere; }
.meta-run-pills { display:flex; align-items:flex-start; justify-content:flex-end; flex-wrap:wrap; gap:6px; max-width:220px; }
.meta-muted { color:var(--text-m); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.meta-drilldown { margin-top:8px; }
.meta-drilldown summary { color:var(--text-h); cursor:pointer; font-size:12px; margin-bottom:6px; }
.meta-step-list { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.meta-step-row { display:flex; flex-direction:column; gap:2px; border:1px solid var(--border-lt); border-radius:6px; padding:8px; background:var(--bg-card); font-size:12px; min-width:0; }
.meta-step-row strong { color:var(--text-h); overflow-wrap:anywhere; }
.meta-step-row span { color:var(--text-m); overflow-wrap:anywhere; }
.meta-readiness-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
.meta-list { display:flex; flex-direction:column; gap:4px; }
.meta-subtitle { color:var(--text-h); font-size:12px; font-weight:700; margin-bottom:6px; }
.meta-action-box { display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--border-lt); border-radius:8px; padding:12px; margin:14px 0 10px; background:var(--bg); }
.meta-action-box .btn:disabled { opacity:.65; cursor:not-allowed; }
.meta-pre { margin-top:10px; padding:10px; border:1px solid var(--border-lt); border-radius:6px; background:var(--bg); color:var(--text-m); font-size:11px; line-height:1.45; overflow:auto; }

/* Bug bounty console */
.bb-console { display:flex; flex-direction:column; gap:12px; }
.bb-filters { display:grid; grid-template-columns:120px 120px 140px minmax(180px, 1fr) 160px minmax(190px, 1fr) auto; gap:8px; align-items:end; background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:12px; }
.bb-filter { min-width:0; }
.bb-filter label { display:block; font-size:10px; color:var(--text-m); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px; }
.bb-filter select, .bb-filter input { width:100%; min-height:27px; background:var(--bg-input); border:1px solid var(--border); color:var(--text); padding:4px 8px; border-radius:4px; font-family:monospace; font-size:12px; }
.bb-filter-actions { display:flex; gap:6px; align-items:center; }
.bb-summary { display:grid; grid-template-columns:repeat(4, minmax(100px, 140px)) minmax(220px, 1fr); gap:8px; align-items:stretch; margin-bottom:12px; }
.bb-summary > div { background:var(--bg-card); border:1px solid var(--border); border-radius:6px; padding:10px 12px; min-width:0; }
.bb-summary strong { display:block; color:var(--text-h); font-size:20px; line-height:1; }
.bb-summary span { display:block; color:var(--text-m); font-size:10px; text-transform:uppercase; letter-spacing:.06em; margin-top:5px; }
.bb-summary .bb-active-filters { color:var(--text-m); font-size:11px; line-height:1.45; text-transform:none; letter-spacing:0; overflow-wrap:anywhere; display:flex; align-items:center; }
.bb-layout { display:grid; grid-template-columns:minmax(320px, .9fr) minmax(0, 1.1fr); gap:12px; align-items:start; }
.bb-results { display:flex; flex-direction:column; gap:12px; min-width:0; }
.bb-list-block { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.bb-list-title { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border-bottom:1px solid var(--border-lt); color:var(--text-m); font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.bb-list-title span { color:var(--text-d); }
.bb-list { display:flex; flex-direction:column; max-height:370px; overflow-y:auto; }
.bb-item { display:flex; flex-direction:column; gap:5px; width:100%; padding:9px 10px; border:0; border-bottom:1px solid var(--border-lt); background:transparent; color:var(--text); text-align:left; cursor:pointer; font-family:monospace; }
.bb-item:last-child { border-bottom:0; }
.bb-item:hover, .bb-item.active { background:var(--bg-hover); }
.bb-item.active { box-shadow:inset 3px 0 0 var(--accent); }
.bb-item-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.bb-item-top strong { color:var(--text-h); font-size:12px; overflow-wrap:anywhere; }
.bb-item-top span { color:var(--text-d); font-size:10px; white-space:nowrap; }
.bb-item-path, .bb-detail-path { color:var(--text-d); font-size:10px; overflow-wrap:anywhere; }
.bb-pills { display:flex; flex-wrap:wrap; gap:4px; }
.bb-pill { display:inline-flex; align-items:center; min-height:18px; border:1px solid var(--border); border-radius:4px; padding:1px 6px; background:var(--bg-btn); color:var(--text-m); font-size:10px; text-transform:uppercase; letter-spacing:.03em; }
.bb-sev-high { border-color:var(--danger); color:var(--danger); background:rgba(248,81,73,0.10); }
.bb-sev-medium { border-color:var(--warn); color:var(--warn); background:rgba(210,153,34,0.10); }
.bb-sev-low { border-color:var(--success); color:var(--success); background:rgba(35,134,54,0.10); }
.bb-sev-unknown { color:var(--text-d); }
.bb-status-open { border-color:var(--warn); color:var(--warn); background:rgba(210,153,34,0.10); }
.bb-status-fixed { border-color:var(--success); color:var(--success); background:rgba(35,134,54,0.10); }
.bb-status-muted, .bb-status-unknown { color:var(--text-d); }
.bb-ready-ok { border-color:var(--success); color:var(--success); background:rgba(35,134,54,0.10); }
.bb-ready-hold { border-color:var(--danger); color:var(--danger); background:rgba(248,81,73,0.10); }
.bb-ready-unknown { color:var(--text-d); }
.bb-readiness { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:12px; margin-bottom:12px; }
.bb-readiness-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px; }
.bb-readiness-head strong { display:block; color:var(--text-h); font-size:13px; overflow-wrap:anywhere; }
.bb-readiness-head span { display:block; color:var(--text-m); font-size:11px; margin-top:2px; }
.bb-readiness-grid { display:grid; grid-template-columns:repeat(4, minmax(120px, 1fr)); gap:8px; margin-bottom:10px; }
.bb-readiness-grid > div { border:1px solid var(--border-lt); border-radius:6px; padding:8px; background:var(--bg); min-width:0; }
.bb-readiness-grid strong { display:block; color:var(--text-h); font-size:18px; line-height:1; }
.bb-readiness-grid span { display:block; color:var(--text-m); font-size:10px; text-transform:uppercase; letter-spacing:.05em; margin-top:5px; }
.bb-readiness-body, .bb-readiness-reasons { color:var(--text-m); font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.bb-readiness-reasons { display:flex; flex-direction:column; gap:3px; margin-top:8px; }
.bb-empty { padding:12px; color:var(--text-d); font-size:12px; }
.bb-detail { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:12px; min-height:360px; max-height:calc(100vh - 210px); overflow:auto; }
.bb-detail-empty { color:var(--text-d); font-size:12px; display:flex; align-items:center; justify-content:center; text-align:center; }
.bb-detail-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:6px; }
.bb-detail-head strong { display:block; color:var(--text-h); font-size:13px; overflow-wrap:anywhere; }
.bb-detail-head span { display:block; color:var(--text-m); font-size:11px; margin-top:2px; }
.bb-detail pre { margin-top:12px; padding-top:12px; border-top:1px solid var(--border-lt); white-space:pre-wrap; overflow-wrap:anywhere; color:var(--text); font-family:monospace; font-size:12px; line-height:1.55; }

/* Marketplace */
.mp-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:12px; }
.mp-card { border:1px solid var(--border); border-radius:8px; padding:14px; background:var(--bg-card); display:flex; flex-direction:column; gap:6px; position:relative; }
.mp-card.mp-hidden { opacity:0.4; }
.mp-card-header { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.mp-card-name { font-size:13px; font-weight:600; color:var(--text-h); }
.mp-card-desc { font-size:12px; color:var(--text-m); flex:1; line-height:1.5; }
.mp-card-footer { display:flex; align-items:center; gap:6px; margin-top:4px; }
.mp-badge-type { font-size:10px; padding:1px 6px; border-radius:3px; font-weight:600; text-transform:uppercase; }
.mp-badge-skill { background:#1a3a6a; color:#79b8ff; }
.mp-badge-mcp { background:#3a1a3a; color:#d2a8ff; }
.mp-badge-installed { background:#1a3a1a; color:#56d364; }
.mp-badge-custom { background:#3a3a1a; color:#e3b341; }
.mp-hide-btn { background:none; border:none; cursor:pointer; color:var(--text-d); font-size:13px; padding:2px 4px; border-radius:3px; }
.mp-hide-btn:hover { color:var(--text-m); background:var(--bg-hover); }
.mp-add-form { border:1px solid var(--border); border-radius:8px; padding:16px; margin-bottom:16px; background:var(--bg-card); }
.mp-add-form input, .mp-add-form select, .mp-add-form textarea { width:100%; margin-bottom:8px; background:var(--bg-input); border:1px solid var(--border); color:var(--text); padding:6px 8px; border-radius:4px; font-family:monospace; font-size:12px; }
.mp-add-form textarea { resize:vertical; min-height:60px; }
.mp-filters { display:flex; gap:8px; margin-bottom:16px; align-items:center; flex-wrap:wrap; }

/* Run detail — new layout */
.rd-layout { display:flex; gap:16px; align-items:flex-start; }
.rd-phases { flex:0 0 300px; min-width:0; max-height:calc(100vh - 130px); overflow-y:auto; }
.rd-right { flex:1; min-width:0; }
.rd-top-bar { display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.rd-phase-header { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:6px; cursor:pointer; user-select:none; }
.rd-phase-name { font-size:13px; font-weight:600; flex:1; min-width:0; overflow-wrap:anywhere; }
.rd-phase-meta { color:var(--text-m); font-size:11px; text-align:right; white-space:normal; overflow-wrap:anywhere; }
.rd-phase-body { }
.rd-step { display:flex; align-items:flex-start; gap:6px; padding:3px 0 0 12px; font-size:12px; cursor:pointer; }
.rd-step:hover { background:var(--bg-hover); border-radius:4px; }
.rd-step-name { flex:1; min-width:0; color:var(--text); overflow-wrap:anywhere; }
.rd-step-meta { color:var(--text-m); font-size:11px; white-space:nowrap; flex-shrink:0; }
.rd-step-tok { padding:0 0 3px 30px; font-size:10px; color:var(--text-d); overflow-wrap:anywhere; }
.lifecycle-evidence, .lifecycle-diagnostics { margin:1px 0 3px 30px; font-size:10px; line-height:1.45; overflow-wrap:anywhere; }
.lifecycle-evidence { color:var(--success); }
.lifecycle-diagnostics { color:var(--warn); }
.rd-log-inline { padding-left:24px; max-height:80px; overflow-y:auto; font-size:10px; color:var(--text-d); font-family:monospace; }

/* Terminal grid */
.terminals-grid { display:grid; gap:10px; grid-template-columns:repeat(var(--terminal-cols, 1), minmax(0, 1fr)); }
.terminals-grid.t1 { grid-template-columns:1fr; }
.terminals-grid.t2 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.terminals-grid.t3 { grid-template-columns:repeat(3, minmax(0, 1fr)); }
.terminals-grid.t4 { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.terminal-box { border:1px solid var(--border); border-radius:6px; overflow:hidden; display:flex; flex-direction:column; height:calc(100vh - 170px); min-height:300px; transition:border-color .3s, box-shadow .3s, height .2s, min-height .2s, opacity .2s; }
.terminal-box.trm-running { border-color:#3fb950; box-shadow:0 0 8px rgba(63,185,80,.25); }
.terminal-box.trm-last { border-color:#d29922; box-shadow:0 0 8px rgba(210,153,34,.25); }
.terminal-box.trm-collapsed { height:170px; min-height:170px; opacity:0.95; }
.terminal-box.trm-collapsed .terminal-log { max-height:116px; }
.terminal-hdr { display:flex; align-items:center; gap:8px; padding:5px 10px; background:var(--bg-card); font-size:11px; border-bottom:1px solid var(--border-lt); user-select:none; min-width:0; }
.terminal-dot { width:8px; height:8px; border-radius:50%; background:var(--border); flex-shrink:0; }
.terminal-box.trm-running .terminal-dot { background:#3fb950; }
.terminal-box.trm-last .terminal-dot { background:#d29922; }
.terminal-acct { font-weight:600; color:var(--text-h); }
.terminal-role { color:var(--text-d); font-size:10px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.terminal-step { color:var(--text-m); font-size:10px; margin-left:auto; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.terminal-status { color:var(--text-d); font-size:10px; flex-shrink:0; }
.terminal-log { flex:1; padding:8px 10px; font-family:monospace; font-size:12px; color:var(--text-m); overflow-y:auto; overflow-x:hidden; background:var(--bg); line-height:1.55; }
.terminal-log .tl-line { white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere; margin-bottom:2px; }
.terminal-log .tl-err { color:#f85149; }
.terminal-log .tl-ok { color:#3fb950; font-size:11px; }
.terminal-log .tl-dim { color:var(--text-d); font-size:11px; }
.terminal-log .tl-text { color:var(--text-h); }
.terminal-log .tl-tool { color:#79b8ff; }
.terminal-log .tl-input { color:#d2a8ff; font-size:11px; }
@media (max-width: 1200px) {
  .terminals-grid { grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 900px) {
  .opt-two-col { grid-template-columns:1fr; }
  .bb-filters { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .bb-filter-actions { grid-column:1 / -1; }
  .bb-summary { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .bb-summary .bb-active-filters { grid-column:1 / -1; }
  .bb-readiness-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .bb-layout { grid-template-columns:1fr; }
  .bb-detail { max-height:none; }
  .meta-run-row { grid-template-columns:1fr; }
  .meta-run-pills { justify-content:flex-start; max-width:none; }
  .meta-readiness-head, .meta-action-box { flex-direction:column; align-items:flex-start; }
  .terminals-grid { grid-template-columns:1fr !important; }
}

/* Overall phase progress in run detail */
.run-phase-progress { margin-bottom:14px; }
.run-phase-label { font-size:12px; color:var(--text-m); margin-bottom:4px; display:flex; justify-content:space-between; }
.run-phase-bar { height:6px; background:var(--bar-bg); border-radius:3px; overflow:hidden; }
.run-phase-bar-inner { height:100%; background:var(--accent); border-radius:3px; transition:width .4s; }

/* Project info page */
.proj-info-header { display:flex; align-items:center; gap:12px; margin-bottom:20px; }
.proj-info-stat { background:var(--bg-card); border:1px solid var(--border); border-radius:8px; padding:12px 16px; min-width:100px; }
.proj-info-stat-value { font-size:22px; font-weight:700; color:var(--text-h); }
.proj-info-stat-label { font-size:11px; color:var(--text-m); margin-top:2px; }
.proj-run-card { border:1px solid var(--border); border-radius:8px; padding:14px; margin-bottom:12px; background:var(--bg-card); }
.proj-run-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; cursor:pointer; user-select:none; }
.proj-run-body { padding-left:8px; }
.proj-phase-row { display:flex; align-items:flex-start; gap:8px; padding:6px 0; border-bottom:1px solid var(--border-lt); }
.proj-phase-row:last-child { border-bottom:none; }
.proj-step-list { padding:4px 0 4px 16px; }
.proj-step-item { display:flex; align-items:center; gap:6px; padding:2px 0; font-size:11px; color:var(--text-m); }

@media (max-width: 760px) {
  header { align-items: flex-start; flex-direction: column; gap: 12px; }
  .brand-lockup { width: 100%; }
  .brand-logo { width: 48px; height: 40px; }
  nav { flex-wrap: wrap; }
}