*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0d0f1a;
  --bg2: #131624;
  --card: #181b2e;
  --card-hover: #1e2138;
  --border: #252840;
  --border-light: #2e3252;
  --accent: #4f7ef8;
  --accent-dim: rgba(79, 126, 248, 0.15);
  --green: #22c55e;
  --green-dim: rgba(34, 197, 94, 0.15);
  --red: #ef4444;
  --red-dim: rgba(239, 68, 68, 0.12);
  --yellow: #f59e0b;
  --yellow-dim: rgba(245, 158, 11, 0.15);
  --purple: #a78bfa;
  --text: #e2e8f0;
  --text-muted: #64748b;
  --text-dim: #94a3b8;
  --radius: 10px;
  --radius-sm: 6px;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

.layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Header ── */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.logo {
  font-size: 28px;
  color: var(--accent);
  line-height: 1;
}

.header h1 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--text);
}

.subtitle {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 1px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.clock {
  font-size: 13px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.btn-refresh {
  background: none;
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.btn-refresh:hover { border-color: var(--accent); color: var(--accent); }

.refresh-icon {
  font-size: 16px;
  display: inline-block;
  transition: transform 0.5s;
}

.refreshing .refresh-icon { animation: spin 0.6s linear; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Main ── */
.main {
  flex: 1;
  padding: 28px;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 14px;
}

/* ── Project Cards ── */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 14px;
}

.project-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s, background 0.15s;
}

.project-card:hover { border-color: var(--border-light); background: var(--card-hover); }

.project-card.skeleton {
  height: 180px;
  animation: pulse 1.5s ease-in-out infinite;
}

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

.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}

.card-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.card-desc {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
}

.card-stack {
  font-size: 11px;
  color: var(--accent);
  margin-top: 4px;
  opacity: 0.8;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}

.status-dot.up { background: var(--green); box-shadow: 0 0 6px var(--green); }
.status-dot.down { background: var(--text-muted); }
.status-dot.partial { background: var(--yellow); box-shadow: 0 0 6px var(--yellow); }

.services {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.service-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.service-name {
  font-size: 12px;
  color: var(--text-dim);
}

.service-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: 0.3px;
}

.service-badge.up {
  background: var(--green-dim);
  color: var(--green);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.service-badge.down {
  background: rgba(100, 116, 139, 0.1);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.no-services {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  padding: 4px 0 12px;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.git-info {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.git-branch {
  color: var(--purple);
  font-weight: 500;
}

.git-commit {
  font-family: 'Cascadia Code', 'Consolas', monospace;
  font-size: 10px;
  opacity: 0.7;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.last-modified {
  font-size: 11px;
  color: var(--text-muted);
  text-align: right;
}

/* ── Intention Form ── */
.intention-form {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
  transition: border-color 0.15s;
}

.intention-form:focus-within {
  border-color: var(--accent);
}

.intention-input {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  line-height: 1.6;
  resize: none;
  outline: none;
  margin-bottom: 12px;
}

.intention-input::placeholder { color: var(--text-muted); }

.form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.select-project,
.select-model {
  background: var(--bg2);
  border: 1px solid var(--border-light);
  color: var(--text-dim);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
}

.select-project:focus,
.select-model:focus { border-color: var(--accent); }

.btn-submit {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  font-family: inherit;
}

.btn-submit:hover { opacity: 0.88; }
.btn-submit:active { transform: scale(0.97); }
.btn-submit:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Intentions List ── */
.intentions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.empty-state {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  padding: 32px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}

.intention-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.15s;
}

.intention-item:hover { border-color: var(--border-light); }

.intention-item.done { opacity: 0.5; }
.intention-item.done .intention-text { text-decoration: line-through; }

.intention-item.in-progress {
  border-color: var(--yellow);
  animation: border-pulse 2s ease-in-out infinite;
}

.intention-item.error { border-color: rgba(239, 68, 68, 0.5); }

@keyframes border-pulse {
  0%, 100% { border-color: var(--yellow); }
  50%       { border-color: rgba(245, 158, 11, 0.3); }
}

.intention-status-btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--border-light);
  background: none;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
}

.intention-status-btn:hover { border-color: var(--green); }
.intention-status-btn.in-progress { border-color: var(--yellow); background: var(--yellow-dim); color: var(--yellow); }
.intention-status-btn.done  { border-color: var(--green); background: var(--green-dim); color: var(--green); }
.intention-status-btn.error { border-color: var(--red); background: var(--red-dim); color: var(--red); }
.intention-status-btn.rate-limited { border-color: var(--yellow); background: var(--yellow-dim); color: var(--yellow); }

.intention-body {
  flex: 1;
  min-width: 0;
}

.intention-text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  word-break: break-word;
}

.intention-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.intention-project-tag {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 20px;
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid rgba(79, 126, 248, 0.25);
}

.intention-time {
  font-size: 11px;
  color: var(--text-muted);
}

.intention-status-label {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 20px;
}

.intention-status-label.pending {
  background: rgba(100, 116, 139, 0.12);
  color: var(--text-muted);
}

.intention-status-label.in-progress {
  background: var(--yellow-dim);
  color: var(--yellow);
}

.intention-status-label.done {
  background: var(--green-dim);
  color: var(--green);
}

.intention-status-label.error {
  background: var(--red-dim);
  color: var(--red);
}

.intention-status-label.rate-limited {
  background: var(--yellow-dim);
  color: var(--yellow);
}

.intention-resume-at {
  font-size: 11px;
  color: var(--yellow);
  white-space: nowrap;
}

.btn-retry, .btn-relaunch-now, .btn-cancel-retry {
  background: none;
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: var(--yellow);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.btn-retry:hover, .btn-relaunch-now:hover, .btn-cancel-retry:hover { background: var(--yellow-dim); border-color: var(--yellow); }

.btn-delete {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  padding: 0 4px;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  flex-shrink: 0;
}

.intention-item:hover .btn-delete { opacity: 1; }
.btn-delete:hover { color: var(--red); }

/* ── Project details panels ── */
.project-details {
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.detail-section {
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.detail-section[open] { background: rgba(0,0,0,0.15); }

.detail-summary {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 5px 8px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-sm);
  transition: color 0.12s, background 0.12s;
}

.detail-summary::-webkit-details-marker { display: none; }
.detail-summary::before { content: '▸'; font-size: 9px; transition: transform 0.15s; }
details[open] .detail-summary::before { transform: rotate(90deg); }
.detail-summary:hover { color: var(--text-dim); background: rgba(255,255,255,0.03); }

.detail-body {
  padding: 6px 8px 8px;
  font-size: 11.5px;
}

.detail-empty { color: var(--text-muted); font-style: italic; font-size: 11px; }
.detail-loading { color: var(--text-muted); font-size: 11px; }

/* ── Inline env grid in card ── */
.card-env-inline {
  margin: 8px 0 12px;
}

.card-env-inline:empty { margin: 0; }

.env-grid {
  border-collapse: collapse;
  width: 100%;
}

.env-grid th {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  padding: 0 8px 5px;
  border-bottom: 1px solid var(--border);
}

.env-grid th:first-child { text-align: left; padding-left: 0; }

.env-grid td { padding: 5px 8px; text-align: center; }
.env-grid td:first-child { padding-left: 0; }

.env-grid-svc {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 500;
  text-align: left;
}

.env-grid-cell {
  font-size: 15px;
  font-weight: 700;
  cursor: default;
  line-height: 1;
}

.env-grid-cell.env-up   { color: var(--green); }
.env-grid-cell.env-slow { color: var(--yellow); }
.env-grid-cell.env-down { color: var(--red); }
.env-grid-cell.env-na   { color: var(--border); font-size: 11px; font-weight: 400; }

.card-version-badge {
  font-size: 11px;
  font-weight: 500;
  color: var(--purple);
  font-family: 'Cascadia Code', 'Consolas', monospace;
  margin-left: 7px;
  opacity: 0.85;
}

/* Env status */
.detail-env { display: flex; flex-wrap: wrap; gap: 6px; }

.env-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  border: 1px solid transparent;
}

.env-pill::before { content: '●'; font-size: 8px; }

.env-up   { background: var(--green-dim); color: var(--green);    border-color: rgba(34,197,94,0.25); }
.env-slow { background: var(--yellow-dim); color: var(--yellow);  border-color: rgba(245,158,11,0.25); }
.env-down { background: var(--red-dim);   color: var(--red);      border-color: rgba(239,68,68,0.25); }
.env-down::before { content: '○'; }

.env-pill.env-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: filter 0.12s;
}
.env-pill.env-link:hover { filter: brightness(1.2); }

/* ── Compteurs Bugs / Backlog sur la ligne d'environnements ── */
.env-counter-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  font-family: 'Cascadia Code', 'Consolas', monospace;
  padding: 2px 7px;
  border-radius: 10px;
  border: 1px solid transparent;
  line-height: 1;
}
.env-counter-bug {
  background: var(--red-dim);
  color: var(--red);
  border-color: rgba(239,68,68,0.25);
}
.env-counter-backlog {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: rgba(79,126,248,0.25);
}
.env-counter-feature {
  background: var(--yellow-dim);
  color: var(--yellow);
  border-color: rgba(245,158,11,0.25);
}

/* Pipeline */
.detail-pipeline { display: flex; flex-direction: column; gap: 5px; }

.pipeline-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pipeline-title {
  flex: 1;
  min-width: 100px;
  color: var(--text-dim);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pipeline-title-clickable {
  cursor: pointer;
}
.pipeline-title-clickable:hover {
  color: var(--accent);
  text-decoration: underline;
}

.pipeline-stage-label {
  font-size: 10px;
  color: var(--accent);
  font-weight: 600;
  min-width: 40px;
  text-align: right;
}

.pipeline-dots { display: flex; gap: 3px; align-items: center; }

.stage-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

.stage-dot.done    { background: var(--green); }
.stage-dot.current { background: var(--accent); box-shadow: 0 0 5px var(--accent); }
.stage-dot.pending { background: var(--border-light); }

/* Versioning */
.detail-version { display: flex; flex-direction: column; gap: 6px; }

.version-envs { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 2px; }

.version-env-pill {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--bg2);
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  font-weight: 500;
}
.version-env-pill strong { color: var(--purple); font-family: 'Cascadia Code', 'Consolas', monospace; font-weight: 600; }
.version-env-pill.version-unknown strong { color: var(--text-muted); }

.version-tag {
  font-family: 'Cascadia Code', 'Consolas', monospace;
  font-size: 13px;
  color: var(--purple);
  font-weight: 600;
}

.version-buttons { display: flex; gap: 5px; flex-wrap: wrap; }

.btn-version {
  background: var(--bg2);
  border: 1px solid var(--border-light);
  color: var(--text-dim);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
  white-space: nowrap;
}

.btn-version:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }
.btn-version:active { transform: scale(0.97); }

/* Metrics */
.metrics-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.metric {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(100,116,139,0.1);
  color: var(--text-dim);
  border: 1px solid var(--border);
}

.coverage-ok   { background: var(--green-dim); color: var(--green);  border-color: rgba(34,197,94,0.25); }
.coverage-warn { background: var(--yellow-dim); color: var(--yellow); border-color: rgba(245,158,11,0.25); }
.coverage-low  { background: var(--red-dim);   color: var(--red);    border-color: rgba(239,68,68,0.25); }
.metric-bugs   { background: var(--red-dim);   color: var(--red);    border-color: rgba(239,68,68,0.25); }
.metric-na     { color: var(--text-muted); }

/* ── Run output panel ── */
.run-output {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #0a0c14;
}

.run-output-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}

.run-label {
  color: var(--accent);
  font-weight: 600;
}

.run-cwd {
  color: var(--text-muted);
  font-family: 'Cascadia Code', 'Consolas', monospace;
  flex: 1;
}

.exit-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 20px;
}

.exit-badge.ok   { background: var(--green-dim); color: var(--green); border: 1px solid rgba(34, 197, 94, 0.3); }
.exit-badge.fail { background: var(--red-dim);   color: var(--red);   border: 1px solid rgba(239, 68, 68, 0.3); }

.btn-toggle-output {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 11px;
  padding: 0 2px;
  line-height: 1;
  transition: color 0.15s;
  flex-shrink: 0;
}

.btn-toggle-output:hover { color: var(--text); }

.btn-stop-run {
  font-size: 9px; font-weight: 700; padding: 1px 6px;
  border: 1px solid rgba(239,68,68,0.4); background: rgba(239,68,68,0.08);
  color: var(--red); border-radius: 4px; cursor: pointer;
  font-family: inherit; transition: background 0.12s; white-space: nowrap;
  flex-shrink: 0;
}
.btn-stop-run:hover { background: rgba(239,68,68,0.18); }
.btn-stop-run:disabled { opacity: 0.4; cursor: not-allowed; }

.run-output-body {
  font-family: 'Cascadia Code', 'Consolas', 'Courier New', monospace;
  font-size: 11.5px;
  line-height: 1.55;
  color: #c8d3e6;
  padding: 10px 12px;
  max-height: 360px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
  scrollbar-width: thin;
  scrollbar-color: var(--border-light) transparent;
}

.run-output.collapsed .run-output-body { display: none; }
.run-output.collapsed .run-output-header { border-bottom: none; }

.cursor-blink {
  display: inline-block;
  color: var(--accent);
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Claude Usage Section ── */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.section-header .section-title { margin-bottom: 0; }

.usage-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-settings-link {
  font-size: 11px;
  color: var(--accent);
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid rgba(79, 126, 248, 0.3);
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}

.btn-settings-link:hover { background: var(--accent-dim); }

.btn-icon {
  background: none;
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  width: 28px;
  height: 28px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.15s;
}

.btn-icon:hover { border-color: var(--accent); color: var(--accent); }

.usage-loading {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  padding: 24px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  animation: pulse 1.5s ease-in-out infinite;
}

.usage-period-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 12px;
}

.period-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}

.period-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.period-renewal {
  font-size: 11px;
  color: var(--text-muted);
}

.period-renewal strong { color: var(--accent); }

.period-stats {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 12px;
}

.period-tokens {
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
}

.period-tokens-unit {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 400;
}

.period-meta {
  font-size: 12px;
  color: var(--text-muted);
}

.period-breakdown {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-muted);
}

.breakdown-item { display: flex; align-items: center; gap: 4px; }
.breakdown-dot  { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.dot-input      { background: var(--accent); }
.dot-cache-r    { background: var(--green); }
.dot-cache-w    { background: var(--yellow); }
.dot-output     { background: var(--purple); }

.usage-sessions-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 12px;
}

.usage-sessions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.usage-sessions-header::-webkit-details-marker { display: none; }
.sessions-toggle-label::before { content: '▸'; font-size: 9px; display: inline-block; transition: transform 0.15s; margin-right: 5px; }
details[open] > .usage-sessions-header .sessions-toggle-label::before { transform: rotate(90deg); }

.usage-sessions-count {
  font-size: 11px;
  color: var(--accent);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.usage-sessions-list { max-height: 320px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-light) transparent; }

.usage-session-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}

.usage-session-row:last-child { border-bottom: none; }
.usage-session-row:hover { background: var(--card-hover); }
.usage-session-row.in-period { border-left: 2px solid var(--accent); padding-left: 14px; }

.session-project {
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.session-project small {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 6px;
}

.session-model {
  font-size: 10px;
  color: var(--purple);
  white-space: nowrap;
  padding: 1px 7px;
  border-radius: 20px;
  background: rgba(167, 139, 250, 0.1);
  border: 1px solid rgba(167, 139, 250, 0.2);
}

.session-time {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 70px;
  text-align: right;
}

.session-tokens {
  font-size: 12px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
  min-width: 50px;
  text-align: right;
}

.usage-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 12px;
  padding: 24px;
}

.usage-manual-wrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
}

.usage-manual-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.manual-entry-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
}

.manual-input, .manual-select {
  background: var(--bg2);
  border: 1px solid var(--border-light);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
}

.manual-input:focus, .manual-select:focus { border-color: var(--accent); }

.btn-submit-sm {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s;
}

.btn-submit-sm:hover { opacity: 0.85; }

.manual-entry-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-dim);
}

.manual-entry-item:last-child { border-bottom: none; }

.btn-del-manual {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
  margin-left: auto;
  transition: color 0.15s;
}

.btn-del-manual:hover { color: var(--red); }

.usage-config-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}

.config-label {
  font-size: 12px;
  color: var(--text-muted);
}

.renewal-input {
  background: var(--bg2);
  border: 1px solid var(--border-light);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-size: 12px;
  width: 56px;
  text-align: center;
  font-family: inherit;
  outline: none;
}

.renewal-input:focus { border-color: var(--accent); }

/* ── Toast ── */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: var(--card);
  border: 1px solid var(--border-light);
  color: var(--text);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  z-index: 100;
  transform: translateY(0);
  opacity: 1;
  transition: opacity 0.3s, transform 0.3s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

.toast.hide { opacity: 0; transform: translateY(8px); }
.toast.success { border-color: rgba(34, 197, 94, 0.4); color: var(--green); }
.toast.error { border-color: rgba(239, 68, 68, 0.4); color: var(--red); }

/* ── New project card layout ── */
.card-info { flex: 1; min-width: 0; }

.card-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.card-git-links { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }

.git-link {
  font-size: 10px;
  color: var(--accent);
  text-decoration: none;
  padding: 1px 6px;
  border-radius: 10px;
  border: 1px solid rgba(79,126,248,0.25);
  background: var(--accent-dim);
  transition: background 0.12s;
  white-space: nowrap;
}
.git-link:hover { background: rgba(79,126,248,0.25); }

.card-git-footer { display: flex; flex-direction: column; gap: 2px; }

/* Env grid enhancements */
.cell-dot { font-size: 14px; font-weight: 700; display: block; line-height: 1.2; }
.cell-version { display: block; font-size: 9px; font-family: 'Cascadia Code','Consolas',monospace; color: var(--purple); opacity: 0.85; line-height: 1.1; margin-top: 1px; }
.cell-latency { display: block; font-size: 9px; color: var(--text-muted); line-height: 1; }
.env-grid td { vertical-align: top; }

/* Startable env cell: click the red dot to launch the service */
.env-grid-cell.env-startable {
  cursor: pointer;
  transition: background 0.15s;
  border-radius: 4px;
}
.env-grid-cell.env-startable:hover {
  background: rgba(34, 197, 94, 0.1);
}
.env-grid-cell.env-startable:hover .cell-dot {
  color: var(--green);
}
.env-grid-cell.env-starting {
  opacity: 0.5;
  cursor: wait;
}

/* Feature env tags */
.feat-env-tag { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 8px; margin-left: 4px; flex-shrink: 0; }
.feat-prod    { background: rgba(34,197,94,0.15); color: var(--green); border: 1px solid rgba(34,197,94,0.25); }
.feat-staging { background: rgba(245,158,11,0.15); color: var(--yellow); border: 1px solid rgba(245,158,11,0.25); }
.feat-local   { background: rgba(100,116,139,0.15); color: var(--text-dim); border: 1px solid rgba(100,116,139,0.25); }
.feat-cancelled { background: rgba(100,116,139,0.15); color: var(--text-dim); border: 1px solid rgba(100,116,139,0.25); }

/* Feature actions container */
.feat-actions { display: flex; gap: 3px; align-items: center; flex-shrink: 0; }

/* Feature step badges (Arch / Dev / QA) — state-based */
.feat-step-badge {
  display: inline-flex; align-items: center;
  font-size: 9px; font-weight: 700; padding: 1px 6px;
  border-radius: 4px; white-space: nowrap; font-family: inherit;
  border: 1px solid transparent;
}
.feat-step-locked {
  background: rgba(100,116,139,0.1); color: var(--text-muted);
  border-color: rgba(100,116,139,0.2); cursor: not-allowed; opacity: 0.5;
}
.feat-step-pending {
  background: var(--accent-dim); color: var(--accent);
  border-color: rgba(79,126,248,0.35); cursor: pointer;
  transition: background 0.12s;
}
.feat-step-pending:hover { background: rgba(79,126,248,0.25); }
.feat-step-running {
  background: rgba(251,146,60,0.15); color: #fb923c;
  border-color: rgba(251,146,60,0.4);
  animation: feat-step-blink 0.9s ease-in-out infinite;
}
.feat-step-done {
  background: var(--green-dim); color: var(--green);
  border-color: rgba(34,197,94,0.3);
}
@keyframes feat-step-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

/* Feature agent buttons (Arch / Dev / QA) — legacy fallback */
.btn-feat-agent {
  font-size: 9px; font-weight: 700; padding: 1px 5px;
  border: 1px solid rgba(79,126,248,0.35); background: var(--accent-dim);
  color: var(--accent); border-radius: 4px; cursor: pointer;
  font-family: inherit; transition: background 0.12s; white-space: nowrap;
}
.btn-feat-agent:hover { background: rgba(79,126,248,0.25); }
.btn-feat-agent:disabled { opacity: 0.4; cursor: not-allowed; }

/* Feature staging button */
.btn-feat-stage {
  font-size: 9px; font-weight: 700; padding: 1px 6px;
  border: 1px solid rgba(34,197,94,0.4); background: rgba(34,197,94,0.08);
  color: var(--green); border-radius: 4px; cursor: pointer;
  font-family: inherit; transition: background 0.12s; white-space: nowrap;
}
.btn-feat-stage:hover { background: rgba(34,197,94,0.18); }
.btn-feat-stage:disabled { opacity: 0.35; cursor: not-allowed; background: transparent; color: var(--text-muted); border-color: rgba(100,116,139,0.25); }
.btn-feat-stage:disabled:hover { background: transparent; }

/* Feature fast-track button */
.btn-feat-fast {
  font-size: 9px; font-weight: 700; padding: 1px 6px;
  border: 1px solid rgba(245,158,11,0.4); background: rgba(245,158,11,0.08);
  color: var(--yellow); border-radius: 4px; cursor: pointer;
  font-family: inherit; transition: background 0.12s; white-space: nowrap;
}
.btn-feat-fast:hover { background: rgba(245,158,11,0.18); }

/* Feature prod button */
.btn-feat-prod {
  font-size: 9px; font-weight: 700; padding: 1px 6px;
  border: 1px solid rgba(245,158,11,0.5); background: rgba(245,158,11,0.1);
  color: var(--yellow); border-radius: 4px; cursor: pointer;
  font-family: inherit; transition: background 0.12s; white-space: nowrap;
}
.btn-feat-prod:hover { background: rgba(245,158,11,0.22); }

/* Feature archive/confirm button — confirms a prod feature is OK and removes it from the list */
.btn-feat-archive {
  font-size: 9px; font-weight: 700; padding: 1px 6px;
  border: 1px solid rgba(34,197,94,0.4); background: rgba(34,197,94,0.08);
  color: var(--green); border-radius: 4px; cursor: pointer;
  font-family: inherit; transition: background 0.12s; white-space: nowrap;
}
.btn-feat-archive:hover { background: rgba(34,197,94,0.18); }
.btn-feat-archive:disabled { opacity: 0.5; cursor: not-allowed; background: transparent; color: var(--text-muted); border-color: rgba(100,116,139,0.25); }

/* Feature close button — dismiss a feature from local/staging list */
.btn-feat-close {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border: 1px solid var(--border-light);
  background: none;
  color: var(--text-muted);
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
}
.btn-feat-close:hover { border-color: var(--green); color: var(--green); }
.btn-feat-close:disabled { opacity: 0.4; cursor: not-allowed; }

/* Feature cancel button — abandon a feature before delivery */
.btn-feat-cancel {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border: 1px solid rgba(248,113,113,0.3);
  background: none;
  color: var(--red);
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
}
.btn-feat-cancel:hover { background: rgba(248,113,113,0.12); border-color: rgba(248,113,113,0.5); }
.btn-feat-cancel:disabled { opacity: 0.4; cursor: not-allowed; }

/* Feature rollback button (disabled, phase 2) */
.btn-feat-rollback {
  font-size: 9px; font-weight: 700; padding: 1px 6px;
  border: 1px solid rgba(100,116,139,0.3); background: transparent;
  color: var(--text-muted); border-radius: 4px; cursor: not-allowed;
  font-family: inherit; opacity: 0.5; white-space: nowrap;
}

/* Push in progress — blinking state shared by feature/bug Staging|Fast|Prod buttons */
.btn-feat-stage.running, .btn-feat-fast.running, .btn-feat-prod.running,
.btn-stage-bug.running, .btn-prod-bug.running {
  background: rgba(251,146,60,0.15); color: #fb923c;
  border-color: rgba(251,146,60,0.4);
  animation: feat-step-blink 0.9s ease-in-out infinite;
  cursor: not-allowed; opacity: 1;
}

/* Bugs section */
.detail-bugs { display: flex; flex-direction: column; gap: 4px; }

.bug-row { display: flex; align-items: center; gap: 7px; padding: 3px 0; }

.bug-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--text-muted); }
.bug-high   { background: var(--red); }
.bug-medium { background: var(--yellow); }
.bug-low    { background: var(--text-muted); }

.bug-title { flex: 1; font-size: 11px; color: var(--text-dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.bug-title:hover { color: var(--text); }
.bug-sev { font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 8px; flex-shrink: 0; text-transform: capitalize; background: rgba(100,116,139,0.1); color: var(--text-muted); }
.bug-high.bug-sev   { background: var(--red-dim); color: var(--red); }
.bug-medium.bug-sev { background: var(--yellow-dim); color: var(--yellow); }
.bug-status { font-size: 10px; color: var(--text-muted); flex-shrink: 0; }

.bugs-open-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; border-radius: 8px; font-size: 9px; font-weight: 700; background: var(--red-dim); color: var(--red); border: 1px solid rgba(239,68,68,0.3); padding: 0 4px; margin-left: 5px; }
.backlog-open-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; border-radius: 8px; font-size: 9px; font-weight: 700; background: var(--accent-dim); color: var(--accent); border: 1px solid rgba(79,126,248,0.3); padding: 0 4px; margin-left: 5px; }
.features-open-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; border-radius: 8px; font-size: 9px; font-weight: 700; background: var(--yellow-dim); color: var(--yellow); border: 1px solid rgba(245,158,11,0.3); padding: 0 4px; margin-left: 5px; }
.questions-open-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; border-radius: 8px; font-size: 9px; font-weight: 700; background: rgba(167,139,250,0.15); color: var(--purple); border: 1px solid rgba(167,139,250,0.3); padding: 0 4px; margin-left: 5px; }

.btn-features-list { background: var(--bg2); border: 1px solid var(--border-light); color: var(--text-dim); border-radius: var(--radius-sm); padding: 1px 7px; font-size: 10px; font-weight: 500; cursor: pointer; font-family: inherit; margin-left: 5px; transition: border-color 0.12s, color 0.12s; }
.btn-features-list:hover { border-color: var(--yellow); color: var(--yellow); }

.btn-questions-list { background: var(--bg2); border: 1px solid var(--border-light); color: var(--text-dim); border-radius: var(--radius-sm); padding: 1px 7px; font-size: 10px; font-weight: 500; cursor: pointer; font-family: inherit; margin-left: 5px; transition: border-color 0.12s, color 0.12s; }
.btn-questions-list:hover { border-color: var(--purple); color: var(--purple); }

.btn-bugs-list { background: var(--bg2); border: 1px solid var(--border-light); color: var(--text-dim); border-radius: var(--radius-sm); padding: 1px 7px; font-size: 10px; font-weight: 500; cursor: pointer; font-family: inherit; margin-left: 5px; transition: border-color 0.12s, color 0.12s; }
.btn-bugs-list:hover { border-color: var(--red); color: var(--red); }

/* Watchdog & form actions */
.watchdog-bar { display: flex; align-items: center; gap: 10px; }
.watchdog-idle { font-size: 11px; color: var(--text-muted); }
.watchdog-running { font-size: 11px; color: var(--yellow); font-weight: 600; animation: blink 2s ease-in-out infinite; }

.form-actions { display: flex; gap: 6px; align-items: center; }

.btn-queue { background: var(--bg2); border: 1px solid var(--border-light); color: var(--text-dim); border-radius: var(--radius-sm); padding: 7px 12px; font-size: 12px; font-weight: 500; cursor: pointer; font-family: inherit; transition: border-color 0.12s, color 0.12s; white-space: nowrap; }
.btn-queue:hover { border-color: var(--accent); color: var(--accent); }
.btn-queue:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-spec { background: var(--bg2); border: 1px solid var(--border-light); color: var(--text-muted); border-radius: var(--radius-sm); padding: 7px 12px; font-size: 12px; cursor: pointer; font-family: inherit; transition: border-color 0.12s, color 0.12s; white-space: nowrap; }
.btn-spec:hover { border-color: var(--purple); color: var(--purple); }
.btn-spec:disabled { opacity: 0.4; cursor: not-allowed; }

/* Fast Track section selection (Backlog + Features rows) */
.fast-track-check {
  flex-shrink: 0;
  cursor: pointer;
  margin: 0;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border-light);
  border-radius: 3px;
  background: var(--bg);
  transition: background 0.12s, border-color 0.12s, border-width 0.12s;
}
.fast-track-check:checked {
  background: #fff;
  border: 4px solid var(--bg);
}
.fast-track-check:hover { border-color: var(--accent); }
.fast-track-check-placeholder { display: inline-block; flex-shrink: 0; width: 14px; }

/* Section-level Fast Track button (Backlog/Features <summary>) */
.btn-section-fast-track {
  font-size: 9px; font-weight: 700; padding: 1px 6px;
  border: 1px solid rgba(245,158,11,0.4); background: rgba(245,158,11,0.08);
  color: var(--yellow); border-radius: 4px; cursor: pointer;
  font-family: inherit; transition: background 0.12s; white-space: nowrap;
  text-transform: none; letter-spacing: normal; margin-left: auto;
}
.btn-section-fast-track:hover { background: rgba(245,158,11,0.18); }
.btn-section-fast-track:disabled { opacity: 0.4; cursor: not-allowed; background: transparent; color: var(--text-muted); border-color: rgba(100,116,139,0.25); }
.btn-section-fast-track.running {
  background: rgba(251,146,60,0.15); color: #fb923c;
  border-color: rgba(251,146,60,0.4);
  animation: feat-step-blink 0.9s ease-in-out infinite;
  cursor: not-allowed; opacity: 1;
}

/* Fast Track banner — server-orchestrated chain status (cf. fast-track.js, app.js renderFastTrackBanner) */
.fast-track-banner {
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
  font-size: 11px; padding: 5px 10px; border-radius: var(--radius-sm);
  margin-bottom: 6px; border: 1px solid; line-height: 1.4;
}
.fast-track-banner.running {
  background: rgba(251,146,60,0.1); color: #fb923c; border-color: rgba(251,146,60,0.35);
}
.fast-track-banner.interrupted {
  background: rgba(245,158,11,0.08); color: var(--yellow); border-color: rgba(245,158,11,0.35);
}
.fast-track-banner.error {
  background: var(--red-dim); color: var(--red); border-color: rgba(239,68,68,0.35);
}
.fast-track-banner.rate-limited {
  background: rgba(245,158,11,0.08); color: var(--yellow); border-color: rgba(245,158,11,0.35);
}
.fast-track-banner span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.btn-fast-track-stop, .btn-fast-track-resume, .btn-fast-track-cancel-retry {
  font-size: 9px; font-weight: 700; padding: 1px 6px; flex-shrink: 0;
  border-radius: 4px; cursor: pointer; font-family: inherit;
  transition: background 0.12s; white-space: nowrap; background: transparent;
}
.btn-fast-track-stop {
  border: 1px solid rgba(239,68,68,0.4); color: var(--red);
}
.btn-fast-track-stop:hover { background: rgba(239,68,68,0.12); }
.btn-fast-track-resume {
  border: 1px solid rgba(34,197,94,0.4); color: var(--green);
}
.btn-fast-track-resume:hover { background: rgba(34,197,94,0.12); }
.btn-fast-track-cancel-retry {
  border: 1px solid rgba(245,158,11,0.4); color: var(--yellow);
}
.btn-fast-track-cancel-retry:hover { background: rgba(245,158,11,0.12); }

/* Backlog (per-project, inside .project-details) */
.backlog-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); margin-bottom: 5px; }
.backlog-item:last-child { margin-bottom: 0; }
.backlog-item-body { flex: 1; display: flex; align-items: center; gap: 7px; min-width: 0; }
.backlog-item-text { font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.backlog-item-text:hover { color: var(--accent); }

.btn-backlog-spec { display: inline-flex; align-items: center; gap: 4px; background: rgba(167,139,250,0.12); border: 1px solid rgba(167,139,250,0.3); color: var(--purple); border-radius: var(--radius-sm); padding: 3px 10px; font-size: 11px; font-weight: 600; cursor: pointer; flex-shrink: 0; font-family: inherit; transition: background 0.12s; white-space: nowrap; }
.btn-backlog-spec:hover { background: rgba(167,139,250,0.25); }
.btn-backlog-spec:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-backlog-cancel { background: none; border: 1px solid rgba(248,113,113,0.3); color: var(--red); border-radius: var(--radius-sm); padding: 3px 8px; font-size: 11px; cursor: pointer; flex-shrink: 0; font-family: inherit; transition: background 0.12s, border-color 0.12s; line-height: 1; }
.btn-backlog-cancel:hover { background: rgba(248,113,113,0.12); border-color: rgba(248,113,113,0.5); }

/* Backlog — items convertis en spec (sous-section repliable) */
.backlog-converted { margin-top: 8px; }
.backlog-converted-summary {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 5px 8px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-sm);
  transition: color 0.12s, background 0.12s;
}
.backlog-converted-summary::-webkit-details-marker { display: none; }
.backlog-converted-summary::before { content: '▸'; font-size: 9px; transition: transform 0.15s; }
.backlog-converted[open] > .backlog-converted-summary::before { transform: rotate(90deg); }
.backlog-converted-summary:hover { color: var(--text-dim); background: rgba(255,255,255,0.03); }
.backlog-converted-body { padding: 6px 0 0; }

.backlog-converted-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 5px; opacity: 0.7; }
.backlog-converted-item:last-child { margin-bottom: 0; }
.backlog-converted-text { flex: 1; font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; min-width: 0; }
.backlog-converted-text:hover { color: var(--accent); }

.btn-backlog-view-feature { background: none; border: none; color: var(--accent); font-size: 11px; font-weight: 600; cursor: pointer; flex-shrink: 0; font-family: inherit; padding: 2px 4px; white-space: nowrap; transition: opacity 0.12s; }
.btn-backlog-view-feature:hover { opacity: 0.7; text-decoration: underline; }

@keyframes flash-highlight {
  0%, 100% { background: transparent; }
  25%, 75% { background: rgba(79,126,248,0.25); }
}
.flash-highlight { animation: flash-highlight 1.5s ease-in-out; border-radius: var(--radius-sm); }

/* Backlog — corbeille douce des items annulés (sous-section repliable) */
.backlog-cancelled { margin-top: 8px; }
.backlog-cancelled-summary {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 5px 8px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-sm);
  transition: color 0.12s, background 0.12s;
}
.backlog-cancelled-summary::-webkit-details-marker { display: none; }
.backlog-cancelled-summary::before { content: '▸'; font-size: 9px; transition: transform 0.15s; }
.backlog-cancelled[open] > .backlog-cancelled-summary::before { transform: rotate(90deg); }
.backlog-cancelled-summary:hover { color: var(--text-dim); background: rgba(255,255,255,0.03); }
.backlog-cancelled-body { padding: 6px 0 0; }

.backlog-cancelled-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 5px; opacity: 0.7; }
.backlog-cancelled-item:last-child { margin-bottom: 0; }
.backlog-cancelled-text { flex: 1; font-size: 12px; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; min-width: 0; }
.backlog-cancelled-text:hover { color: var(--accent); }

.btn-backlog-restore { background: none; border: 1px solid rgba(34,197,94,0.3); color: var(--green); border-radius: var(--radius-sm); padding: 3px 8px; font-size: 11px; font-weight: 600; cursor: pointer; flex-shrink: 0; font-family: inherit; transition: background 0.12s, border-color 0.12s; white-space: nowrap; }
.btn-backlog-restore:hover { background: var(--green-dim); border-color: rgba(34,197,94,0.5); }

.btn-backlog-purge { background: none; border: 1px solid rgba(248,113,113,0.3); color: var(--red); border-radius: var(--radius-sm); padding: 3px 8px; font-size: 11px; cursor: pointer; flex-shrink: 0; font-family: inherit; transition: background 0.12s, border-color 0.12s; line-height: 1; }
.btn-backlog-purge:hover { background: rgba(248,113,113,0.12); border-color: rgba(248,113,113,0.5); }

.intention-status-label.queued { background: var(--accent-dim); color: var(--accent); }
.intention-status-label.spec { background: rgba(167,139,250,0.12); color: var(--purple); }
.intention-item.queued { border-left: 3px solid var(--accent); }
.intention-item.spec   { border-left: 3px solid var(--purple); opacity: 0.8; }

/* Audit */
.detail-audit { display: flex; flex-direction: column; gap: 4px; }
.audit-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 11px; }
.audit-label { color: var(--text-muted); min-width: 90px; }
.audit-value { font-weight: 600; font-family: 'Cascadia Code','Consolas',monospace; }
.audit-ok   { color: var(--green); }
.audit-warn { color: var(--yellow); }
.audit-bad  { color: var(--red); }
.audit-meta { font-size: 10px; color: var(--text-muted); margin-left: auto; }
.btn-audit { font-size: 10px; font-weight: 600; padding: 3px 9px; background: var(--bg2); border: 1px solid var(--border-light); color: var(--text-muted); border-radius: var(--radius-sm); cursor: pointer; font-family: inherit; transition: all 0.12s; white-space: nowrap; }
.btn-audit:hover { border-color: var(--accent); color: var(--accent); }
.btn-audit:disabled { opacity: 0.5; cursor: not-allowed; }
.audit-running { animation: pulse 1.5s ease-in-out infinite; color: var(--yellow); }

/* AI audit button — launches a Claude agent reviewing code quality & security */
.btn-audit-ai {
  font-size: 10px; font-weight: 600; padding: 3px 9px;
  background: rgba(167,139,250,0.08); border: 1px solid rgba(167,139,250,0.3);
  color: var(--purple); border-radius: var(--radius-sm); cursor: pointer;
  font-family: inherit; transition: all 0.12s; white-space: nowrap;
}
.btn-audit-ai:hover { background: rgba(167,139,250,0.18); }
.btn-audit-ai.running {
  cursor: not-allowed; opacity: 1;
  animation: feat-step-blink 0.9s ease-in-out infinite;
}

/* "audit" tag — marks bugs/backlog items proposed by the AI audit agent */
.tag-audit {
  font-size: 9px; font-family: 'Cascadia Code', 'Consolas', monospace;
  color: var(--purple); background: rgba(167,139,250,0.12);
  border: 1px solid rgba(167,139,250,0.2); border-radius: 8px;
  padding: 1px 5px; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap;
}

/* ── Add project button ── */
.btn-add-project {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid rgba(79,126,248,0.3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s;
}
.btn-add-project:hover { background: rgba(79,126,248,0.25); }

/* ── Create repo button ── */
.btn-create-repo {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  background: none;
  color: var(--text-muted);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
  white-space: nowrap;
}
.btn-create-repo:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-dim); }

/* ── Modal ── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  backdrop-filter: blur(3px);
}

.modal-card {
  background: var(--bg2);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
}

.modal-card-sm { max-width: 360px; }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}

.modal-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  padding: 0 4px;
  transition: color 0.12s;
}
.modal-close:hover { color: var(--text); }

.modal-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
}

.modal-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 10px 14px;
  margin-bottom: -1px;
  transition: color 0.12s, border-color 0.12s;
}
.modal-tab:hover { color: var(--text-dim); }
.modal-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.modal-panel { display: none; padding: 20px; }
.modal-panel.active { display: block; }

.modal-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 16px;
  line-height: 1.5;
}
.modal-hint code { background: var(--bg); padding: 1px 5px; border-radius: 3px; font-size: 11px; }

.modal-field {
  margin-bottom: 14px;
}

.modal-field label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.modal-input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border-light);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.12s;
}
.modal-input:focus { border-color: var(--accent); }
.modal-input-flex { flex: 1; }

.modal-select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border-light);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  cursor: pointer;
}
.modal-select:focus { border-color: var(--accent); }

.modal-path-row {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color 0.12s;
}
.modal-path-row:focus-within { border-color: var(--accent); }
.modal-path-row .modal-input { border: none; background: transparent; border-radius: 0; }
.modal-path-row .modal-input:focus { border-color: transparent; }

.path-prefix {
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px 6px 8px 10px;
  white-space: nowrap;
  font-family: 'Cascadia Code','Consolas',monospace;
  flex-shrink: 0;
}

.local-path-row {
  display: flex;
  gap: 8px;
}
.local-path-row .modal-input { flex: 1; }

.btn-browse {
  background: var(--bg2);
  border: 1px solid var(--border-light);
  color: var(--text-dim);
  border-radius: var(--radius-sm);
  padding: 0 10px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.btn-browse:hover { border-color: var(--accent); }

.fs-browser {
  margin-top: 8px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--bg2);
  padding: 8px;
}

.fs-breadcrumb {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 6px;
  word-break: break-all;
}
.fs-breadcrumb-segment { cursor: pointer; }
.fs-breadcrumb-segment:hover { color: var(--accent); text-decoration: underline; }
.fs-breadcrumb-sep { color: var(--text-muted); margin: 0 2px; }

.fs-list {
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.fs-list-item {
  padding: 4px 8px;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  gap: 6px;
}
.fs-list-item:hover { background: var(--bg); }
.fs-list-item-claude { color: var(--text-dim); }
.fs-list-item-parent {
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 4px;
  padding-bottom: 6px;
}
.fs-list-empty {
  font-size: 11px;
  color: var(--text-muted);
  padding: 8px;
  font-style: italic;
}

.fs-browser-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.fs-browser-error {
  color: var(--red);
  font-size: 11px;
  margin-top: 4px;
}

.modal-actions {
  margin-top: 20px;
}

.btn-modal-submit {
  width: 100%;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s;
}
.btn-modal-submit:hover { opacity: 0.88; }
.btn-modal-submit:disabled { opacity: 0.4; cursor: not-allowed; }

.modal-status {
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-muted);
  min-height: 18px;
  line-height: 1.4;
}
.modal-status-ok   { color: var(--green); }
.modal-status-error { color: var(--red); }
.modal-status-warn  { color: var(--yellow); }

.btn-modal-cancel {
  background: var(--bg);
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.12s, color 0.12s;
}
.btn-modal-cancel:hover { border-color: var(--accent); color: var(--text); }

.item-modal-textarea {
  resize: vertical;
  min-height: 100px;
  max-height: 260px;
  line-height: 1.5;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
}

.item-modal-text-display {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 12px;
  color: var(--text);
  line-height: 1.6;
  max-height: 260px;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin: 0;
}

/* ── Code feature button ── */
.btn-code-feature {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border: 1px solid rgba(79,126,248,0.35);
  background: var(--accent-dim);
  color: var(--accent);
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-code-feature:hover { background: rgba(79,126,248,0.25); }

/* ── Bug declare ── */
.bug-declare-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.btn-bug {
  background: var(--red-dim);
  color: var(--red);
  border: none;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s;
  white-space: nowrap;
}
.btn-bug:hover { background: rgba(239,68,68,0.2); }
.btn-bug:disabled { opacity: 0.4; cursor: not-allowed; }

.bug-severity-select {
  background: var(--bg2);
  border: none;
  border-left: 1px solid rgba(239,68,68,0.2);
  color: var(--text-muted);
  padding: 6px 6px;
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
}

/* ── Bug actions ── */
.bug-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
}

.btn-fix-bug {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border: 1px solid rgba(79,126,248,0.35);
  background: var(--accent-dim);
  color: var(--accent);
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s;
  white-space: nowrap;
}
.btn-fix-bug:hover { background: rgba(79,126,248,0.25); }

.btn-stage-bug {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border: 1px solid rgba(34,197,94,0.4);
  background: rgba(34,197,94,0.08);
  color: var(--green);
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s;
  white-space: nowrap;
}
.btn-stage-bug:hover { background: rgba(34,197,94,0.2); }

.bug-row.bug-fixed .bug-title { color: var(--green); }
.bug-row.bug-fixed .bug-dot { box-shadow: 0 0 0 2px rgba(34,197,94,0.3); }

.bug-row.bug-staging .bug-title { color: var(--accent); }
.bug-row.bug-staging .bug-dot { box-shadow: 0 0 0 2px rgba(79,126,248,0.35); }

.btn-prod-bug {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border: 1px solid rgba(251,191,36,0.45);
  background: rgba(251,191,36,0.08);
  color: var(--yellow);
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s;
  white-space: nowrap;
}
.btn-prod-bug:hover { background: rgba(251,191,36,0.2); }

.btn-toggle-bug {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border: 1px solid var(--border-light);
  background: none;
  color: var(--text-muted);
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
}
.btn-toggle-bug:hover { border-color: var(--green); color: var(--green); }

/* Questions section */
.detail-questions { display: flex; flex-direction: column; gap: 4px; }

.decision-row { display: flex; align-items: center; gap: 7px; padding: 3px 0; }

.decision-title { flex: 1; font-size: 11px; color: var(--text-dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.decision-title:hover { color: var(--purple); }
.decision-summary { font-size: 10px; color: var(--text-muted); flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40%; }

.btn-decision-confirm {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border: 1px solid var(--border-light);
  background: none;
  color: var(--text-muted);
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.12s;
  flex-shrink: 0;
  white-space: nowrap;
}
.btn-decision-confirm:hover { border-color: var(--green); color: var(--green); }

/* env-startable on pill (overrides table cell version) */
.env-pill.env-startable {
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
}
.env-pill.env-startable:hover {
  filter: brightness(1.3);
  transform: scale(1.05);
}

/* ── Bug version tag ── */
.bug-version-tag {
  font-size: 9px;
  font-family: 'Cascadia Code', 'Consolas', monospace;
  color: var(--purple);
  background: rgba(167,139,250,0.12);
  border: 1px solid rgba(167,139,250,0.2);
  border-radius: 8px;
  padding: 1px 5px;
  flex-shrink: 0;
}

/* ── Feature done button ── */
.btn-feature-done {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border: 1px solid rgba(34,197,94,0.4);
  background: var(--green-dim);
  color: var(--green);
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s;
  white-space: nowrap;
  margin-left: 3px;
}
.btn-feature-done:hover { background: rgba(34,197,94,0.25); }
.btn-feature-done:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Versioning simplified ── */
.version-note {
  font-size: 10px;
  color: var(--text-muted);
  font-style: italic;
  margin: 4px 0;
}

.btn-version-major {
  background: linear-gradient(135deg, var(--accent), var(--purple));
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s, transform 0.1s;
  white-space: nowrap;
}
.btn-version-major:hover { opacity: 0.88; }
.btn-version-major:active { transform: scale(0.97); }

.version-drift strong { color: var(--yellow) !important; }

/* ── Git pending banner ── */
.git-pending-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  margin: 6px 0;
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.25);
  border-radius: var(--radius-sm);
  font-size: 11px;
}

.git-pending-icon { font-size: 13px; flex-shrink: 0; }

.git-pending-text {
  color: var(--yellow);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-push-staging {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.12s;
  white-space: nowrap;
  flex-shrink: 0;
}
.btn-push-staging:hover { opacity: 0.85; }

/* ── Staging files preview ── */
.staging-files-preview {
  font-family: 'Cascadia Code', 'Consolas', monospace;
  font-size: 10px;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  max-height: 120px;
  overflow-y: auto;
  white-space: pre;
  margin: 0;
}

/* ── Help button ── */
.btn-help {
  background: none;
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.15s;
  font-family: inherit;
}
.btn-help:hover { border-color: var(--accent); color: var(--accent); }

/* ── Help Modal ── */
.modal-card-help {
  max-width: 760px;
  width: 95vw;
}

.help-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-height: 80vh;
  overflow-y: auto;
}

.spec-modal-body {
  padding: 24px;
  max-height: 80vh;
  overflow-y: auto;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-dim);
}
.spec-modal-body h3, .spec-modal-body h4, .spec-modal-body h5 {
  color: var(--text);
  margin: 16px 0 8px;
}
.spec-modal-body h3:first-child, .spec-modal-body h4:first-child, .spec-modal-body h5:first-child {
  margin-top: 0;
}
.spec-modal-body p {
  margin: 0 0 12px;
}
.spec-modal-body ul {
  margin: 0 0 12px;
  padding-left: 20px;
}
.spec-modal-body li {
  margin: 2px 0;
}
.spec-modal-body pre {
  background: var(--bg2);
  border-radius: 6px;
  padding: 10px 12px;
  overflow-x: auto;
  margin: 0 0 12px;
}
.spec-modal-body code {
  font-family: 'SFMono-Regular', Consolas, Menlo, monospace;
  font-size: 12px;
}
.spec-modal-error {
  color: var(--red);
}

/* Features list modal */
.features-list-modal-body {
  padding: 16px 24px;
  max-height: 65vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.features-list-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-light);
}
.features-list-row:last-child {
  border-bottom: none;
}
.features-list-title {
  flex: 1;
  min-width: 100px;
  color: var(--text-dim);
  font-size: 12px;
  cursor: pointer;
}
.features-list-title:hover {
  color: var(--accent);
  text-decoration: underline;
}
.questions-list-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-light);
}
.questions-list-row:last-child {
  border-bottom: none;
}
.questions-list-title {
  flex: 1;
  min-width: 100px;
  color: var(--text-dim);
  font-size: 12px;
  cursor: pointer;
}
.questions-list-title:hover {
  color: var(--purple);
  text-decoration: underline;
}
.bugs-list-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-light);
}
.bugs-list-row:last-child {
  border-bottom: none;
}
.bugs-list-title {
  flex: 1;
  min-width: 100px;
  color: var(--text-dim);
  font-size: 12px;
  cursor: pointer;
}
.bugs-list-title:hover {
  color: var(--red);
  text-decoration: underline;
}
.features-list-modal-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 12px 24px;
  border-top: 1px solid var(--border-light);
}
.features-list-page-indicator {
  font-size: 12px;
  color: var(--text-muted);
  font-family: 'Cascadia Code', 'Consolas', monospace;
}
.features-list-nav-btn {
  background: var(--bg2);
  border: 1px solid var(--border-light);
  color: var(--text-dim);
  border-radius: var(--radius-sm);
  padding: 6px 14px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.12s, color 0.12s;
}
.features-list-nav-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.features-list-nav-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Pipeline banner */
.help-pipeline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  flex-wrap: wrap;
}

.help-pipe-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 18px;
  border-radius: var(--radius);
  min-width: 100px;
  border: 1px solid transparent;
}

.help-pipe-icon { font-size: 20px; }
.help-pipe-label { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; }
.help-pipe-sub { font-size: 10px; color: var(--text-muted); }

.help-pipe-spec    { background: rgba(167,139,250,0.1); border-color: rgba(167,139,250,0.25); color: var(--purple); }
.help-pipe-dev     { background: rgba(79,126,248,0.1);  border-color: rgba(79,126,248,0.25);  color: var(--accent); }
.help-pipe-staging { background: rgba(245,158,11,0.1);  border-color: rgba(245,158,11,0.25);  color: var(--yellow); }
.help-pipe-prod    { background: rgba(34,197,94,0.1);   border-color: rgba(34,197,94,0.25);   color: var(--green); }

.help-pipe-arrow { color: var(--text-muted); font-size: 18px; margin: 0 4px; }

/* Sections */
.help-sections { display: flex; flex-direction: column; gap: 24px; }

.help-section {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  background: var(--bg);
}

.help-section-release { background: rgba(34,197,94,0.04); border-color: rgba(34,197,94,0.2); }

.help-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.help-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 4px;
}
.help-badge-feature { background: rgba(79,126,248,0.15); color: var(--accent); }
.help-badge-bug     { background: rgba(239,68,68,0.15);  color: var(--red); }
.help-badge-release { background: rgba(34,197,94,0.15);  color: var(--green); }

/* Steps */
.help-steps { display: flex; flex-direction: column; gap: 12px; }

.help-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.help-step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg2);
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.help-step-body { flex: 1; }

.help-step-title {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 3px;
}

.help-step-body p {
  font-size: 12px;
  color: var(--text-dim);
  margin: 2px 0;
}

.help-step-result {
  color: var(--text-muted) !important;
  font-size: 11px !important;
  margin-top: 4px !important;
}

.help-step-body code {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 10px;
  font-family: 'Cascadia Code', 'Consolas', monospace;
  color: var(--text-dim);
}

/* Inline status badges */
.badge-inline {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.3px;
}
.badge-inline.spec    { background: rgba(167,139,250,0.15); color: var(--purple); }
.badge-inline.dev     { background: rgba(79,126,248,0.15);  color: var(--accent); }
.badge-inline.staging { background: rgba(245,158,11,0.15);  color: var(--yellow); }
.badge-inline.done    { background: rgba(34,197,94,0.15);   color: var(--green); }
.decision-status-open     { background: rgba(167,139,250,0.15); color: var(--purple); }
.decision-status-answered { background: rgba(79,126,248,0.15);  color: var(--accent); }
.decision-status-closed   { background: rgba(34,197,94,0.15);   color: var(--green); }

/* Decision detail modal */
.decision-modal-field { margin-bottom: 10px; }
.decision-modal-field strong { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }
.decision-modal-field p { font-size: 13px; color: var(--text); margin: 0; white-space: pre-wrap; word-break: break-word; }
.decision-modal-spec-link { display: inline-block; margin-bottom: 10px; font-size: 12px; color: var(--purple); text-decoration: none; cursor: pointer; }
.decision-modal-spec-link:hover { text-decoration: underline; }

/* ── Mobile responsive ── */
@media (max-width: 540px) {
  .main { padding: 14px; gap: 24px; }

  .header { padding: 12px 16px; }

  .form-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .select-project,
  .select-model { width: 100%; }

  .local-path-row { flex-direction: column; }
  .btn-browse { width: 100%; }

  .form-actions {
    flex-wrap: wrap;
    gap: 6px;
  }

  .form-actions .btn-submit,
  .form-actions .btn-queue,
  .form-actions .btn-spec,
  .form-actions .bug-declare-wrap {
    flex: 1 1 auto;
  }

  .bug-declare-wrap { min-width: 0; }
  .btn-bug { width: 100%; }

  /* Pipeline rows (feature blocks) — wrap action buttons instead of overflowing the card */
  .feat-actions {
    flex-wrap: wrap;
    flex-basis: 100%;
    justify-content: flex-start;
  }

  /* Fast Track banner — wrap resume/stop/retry buttons below the message */
  .fast-track-banner { flex-wrap: wrap; }
  .fast-track-banner span {
    flex-basis: 100%;
    white-space: normal;
  }
}

/* ── Collapsible project cards ── */
.btn-card-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 11px;
  padding: 2px 8px 2px 0;
  flex-shrink: 0;
  line-height: 1;
  transition: color 0.12s;
  font-family: inherit;
}
.btn-card-toggle:hover { color: var(--text); }

.project-card.collapsed {
  flex-direction: row;
  align-items: center;
  height: 48px;
  min-height: unset;
  overflow: hidden;
  padding: 0 16px;
}

.project-card.collapsed .card-header {
  align-items: center;
  margin-bottom: 0;
  flex: 0 0 auto;
  max-width: 230px;
  min-width: 0;
  gap: 0;
}

.project-card.collapsed .card-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-card.collapsed .card-desc,
.project-card.collapsed .card-stack,
.project-card.collapsed .card-version-badge {
  display: none;
}

.project-card.collapsed .card-header-right { display: none; }

.project-card.collapsed .card-env-inline {
  flex: 1;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  flex-wrap: nowrap;
}

.project-card.collapsed .project-details,
.project-card.collapsed .card-footer,
.project-card.collapsed .git-pending-banner {
  display: none;
}