/* Firewall by AgenticStore — stylesheet */

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

:root {
  --bg:           #09090b;
  --bg2:          #18181b;
  --bg3:          #27272a;
  --border:       #3f3f46;
  --border-dim:   rgba(63, 63, 70, 0.5);
  --text:         #fafafa;
  --text-muted:   #a1a1aa;
  --text-dim:     #71717a;
  --accent:       #4ade80;
  --accent-hover: #86efac;
  --accent-dim:   rgba(74, 222, 128, 0.08);
  --accent-border: rgba(74, 222, 128, 0.25);
  --success:      #4ade80;
  --warning:      #fbbf24;
  --danger:       #f87171;
  --danger-dim:   rgba(248, 113, 113, 0.1);
  --radius:       10px;
  --radius-sm:    6px;
  --radius-xs:    4px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Header ─────────────────────────────────────────────────────────────────── */

header {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 14px 28px;
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(8px);
}
.header-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.logo {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: -0.02em;
}
.logo-accent { color: var(--accent); }
.tagline { color: var(--text-dim); font-size: 12px; }

/* ── Main ───────────────────────────────────────────────────────────────────── */

main { flex: 1; padding: 28px 28px; }

.setup-container {
  max-width: 960px;
  margin: 0 auto;
}

/* ── Top Section Nav ─────────────────────────────────────────────────────────── */

.section-nav {
  display: flex;
  gap: 2px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}
.nav-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 10px 20px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
  letter-spacing: 0.01em;
}
.nav-btn:hover { color: var(--text); }
.nav-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ── MCP Hub Sub-tabs ────────────────────────────────────────────────────────── */

.mcp-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.mcp-tab {
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 8px 16px;
  cursor: pointer;
  font-size: 13px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.mcp-tab:hover { color: var(--text); }
.mcp-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.mcp-panel { display: none; }
.mcp-panel.active { display: block; }

/* ── Sections ────────────────────────────────────────────────────────────────── */

.setup-section { display: none; }
.setup-section.active { display: block; }

.section-header { margin-bottom: 24px; }
.section-header h2 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 5px;
  letter-spacing: -0.01em;
}
.section-header p { color: var(--text-muted); font-size: 13px; }

/* ── Buttons ──────────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.btn-primary {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: var(--accent-border);
}
.btn-primary:hover {
  background: rgba(74, 222, 128, 0.14);
  border-color: rgba(74, 222, 128, 0.45);
}
.btn-secondary {
  background: var(--bg3);
  color: var(--text);
  border-color: var(--border);
}
.btn-secondary:hover { border-color: var(--accent-border); color: var(--accent); }
.btn-ghost {
  background: none;
  color: var(--text-muted);
  border-color: var(--border);
}
.btn-ghost:hover { color: var(--text); border-color: #52525b; }
.btn-danger {
  background: var(--danger-dim);
  color: var(--danger);
  border-color: rgba(248,113,113,0.3);
}
.btn-danger:hover { background: rgba(248,113,113,0.15); }
.btn-sm { padding: 5px 11px; font-size: 12px; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }

/* ── Badges / Status ─────────────────────────────────────────────────────────── */

.status-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.badge-ok      { background: rgba(74,222,128,0.12); color: var(--accent); }
.badge-missing { background: rgba(248,113,113,0.12); color: var(--danger); }
.badge-optional { background: rgba(251,191,36,0.12); color: var(--warning); }
.badge-connected    { background: rgba(74,222,128,0.12); color: var(--accent); }
.badge-disconnected { background: var(--bg3); color: var(--text-dim); border: 1px solid var(--border); }
.badge-coming-soon  { background: var(--bg3); color: var(--text-dim); border: 1px solid var(--border); font-size: 10px; padding: 2px 8px; border-radius: 99px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }

/* ── Connector cards ─────────────────────────────────────────────────────────── */

.connectors-list { display: flex; flex-direction: column; gap: 12px; }

.connector-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  transition: border-color 0.15s;
}
.connector-card:hover { border-color: #52525b; }
.connector-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.connector-title { display: flex; align-items: center; gap: 10px; }
.connector-title h3 { font-size: 15px; font-weight: 600; }
.connector-desc { color: var(--text-muted); font-size: 13px; margin-bottom: 14px; }
.connector-docs { font-size: 12px; margin-bottom: 14px; }
.connector-docs a { color: var(--accent); text-decoration: none; }
.connector-docs a:hover { text-decoration: underline; }
.connector-fields { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }

.field-row { display: flex; flex-direction: column; gap: 4px; }
.field-row label { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.field-input-row { display: flex; gap: 8px; }
.field-input-row input {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 7px 12px;
  font-size: 13px;
  font-family: monospace;
  outline: none;
  transition: border-color 0.15s;
}
.field-input-row input:focus { border-color: var(--accent); }
.field-desc { font-size: 11px; color: var(--text-muted); }
.connector-actions { display: flex; gap: 8px; align-items: center; }
.test-result { font-size: 12px; }
.test-ok { color: var(--success); }
.test-fail { color: var(--danger); }
.test-warn { color: var(--warning); }

/* ── Tools list ──────────────────────────────────────────────────────────────── */

.tools-controls { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.tools-count { margin-left: auto; color: var(--text-muted); font-size: 13px; }
.tools-list { display: flex; flex-direction: column; gap: 3px; }
.submodule-group { margin-bottom: 20px; }
.submodule-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  padding: 8px 0 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.tool-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  transition: background 0.1s;
  cursor: pointer;
}
.tool-row:hover { background: var(--bg2); }
.tool-toggle { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.tool-info { flex: 1; min-width: 0; }
.tool-name { font-weight: 500; font-size: 13px; }
.tool-desc { color: var(--text-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool-badges { display: flex; gap: 4px; flex-shrink: 0; }
.connector-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 99px;
  text-transform: uppercase;
}

/* ── Clients ─────────────────────────────────────────────────────────────────── */

.clients-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.client-option {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  cursor: pointer;
  transition: border-color 0.15s;
}
.client-option:hover { border-color: var(--accent-border); }
.client-option.selected { border-color: var(--accent-border); background: var(--accent-dim); }
.client-option input[type="radio"] { accent-color: var(--accent); }
.client-name { font-weight: 500; flex: 1; }
.client-path { font-size: 11px; color: var(--text-muted); font-family: monospace; }
.client-exists { font-size: 11px; }
.exists-yes { color: var(--success); }
.exists-no { color: var(--text-muted); }
.apply-panel { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; }
.apply-info { margin-bottom: 14px; }
.config-path { font-family: monospace; font-size: 12px; color: var(--text-muted); }
.apply-actions { display: flex; gap: 10px; align-items: center; }
.apply-status { margin-top: 12px; font-size: 13px; }
.status-success { color: var(--success); }
.status-error { color: var(--danger); }

/* ── Misc ─────────────────────────────────────────────────────────────────────── */

.loading { color: var(--text-muted); padding: 24px 0; text-align: center; font-size: 13px; }
.loading-sm { color: var(--text-muted); font-size: 12px; }
code {
  background: var(--bg3);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: monospace;
  font-size: 12px;
}

/* ── Docker mode ─────────────────────────────────────────────────────────────── */

.docker-notice {
  background: var(--accent-dim);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 24px;
  font-size: 13px;
  line-height: 1.7;
}
.docker-notice p { margin-bottom: 6px; }
.docker-notice p:last-child { margin-bottom: 0; }
.docker-clients { display: flex; flex-direction: column; gap: 14px; }
.docker-client-card { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; }
.docker-client-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.docker-snippet {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-size: 12px;
  font-family: monospace;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.5;
}
.btn-copy.copied { color: var(--success); border-color: rgba(74,222,128,0.3); }

/* ── Agent Orchestration / Memory ────────────────────────────────────────────── */

.mem-stats-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.mem-stat-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 20px;
  flex: 1;
  min-width: 130px;
}
.mem-stat-card .label { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.05em; }
.mem-stat-card .value { font-size: 22px; font-weight: 700; color: var(--accent); }
.mem-stat-card .sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Sub-tabs (firewall + orchestration shared) */
.orch-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.orch-tab {
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 8px 16px;
  cursor: pointer;
  font-size: 13px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.orch-tab:hover { color: var(--text); }
.orch-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.orch-panel { display: none; }
.orch-panel.active { display: block; }
.orch-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.orch-panel-header h3 { font-size: 15px; font-weight: 600; }
.orch-hint { color: var(--text-muted); font-size: 13px; margin-bottom: 12px; }

.checkpoint-form {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}
.form-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.form-field label { font-size: 12px; color: var(--text-muted); font-weight: 500; }
.form-field input, .form-field textarea {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
  resize: vertical;
}
.form-field input:focus, .form-field textarea:focus { border-color: var(--accent); }
.required { color: var(--danger); }
.optional { color: var(--text-muted); font-weight: 400; }
.form-actions { display: flex; gap: 8px; }
.cp-status { margin-top: 10px; font-size: 13px; }

.checkpoints-list { display: flex; flex-direction: column; gap: 8px; }
.checkpoint-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: border-color 0.15s;
}
.checkpoint-card:hover { border-color: #52525b; }
.checkpoint-card .cp-main { flex: 1; min-width: 0; }
.checkpoint-card .cp-name { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.checkpoint-card .cp-task { color: var(--text-muted); font-size: 12px; margin-bottom: 6px; }
.checkpoint-card .cp-meta { display: flex; gap: 12px; font-size: 11px; color: var(--text-muted); }
.checkpoint-card .cp-actions { display: flex; gap: 6px; flex-shrink: 0; }
.no-items { color: var(--text-muted); font-size: 13px; padding: 16px 0; text-align: center; }

.strategy-editor {
  width: 100%;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  padding: 14px;
  font-size: 13px;
  font-family: monospace;
  outline: none;
  resize: vertical;
  transition: border-color 0.15s;
}
.strategy-editor:focus { border-color: var(--accent); }

.facts-list { display: flex; flex-direction: column; gap: 3px; }
.fact-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg2);
  font-size: 13px;
}
.fact-key { font-weight: 600; min-width: 160px; font-family: monospace; color: var(--accent); }
.fact-value { flex: 1; color: var(--text); word-break: break-all; }
.fact-category { font-size: 11px; color: var(--text-muted); }
.fact-time { font-size: 10px; color: var(--text-muted); flex-shrink: 0; }

.logs-list { display: flex; flex-direction: column; gap: 3px; }
.log-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg2);
  font-size: 12px;
  font-family: monospace;
}
.log-ts { color: var(--text-muted); flex-shrink: 0; min-width: 180px; }
.log-event { font-weight: 600; color: var(--accent); }
.log-detail { color: var(--text-muted); flex: 1; }

/* ── Troubleshoot ────────────────────────────────────────────────────────────── */

.ts-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 14px;
  transition: border-color 0.15s;
}
.ts-card:hover { border-color: #52525b; }
.ts-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ts-card-header h3 { font-size: 15px; font-weight: 600; }
.ts-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.ts-badge-connector { background: var(--accent-dim); color: var(--accent); }
.ts-badge-docker    { background: rgba(56,189,248,0.1); color: #38bdf8; }
.ts-badge-general   { background: rgba(251,191,36,0.1); color: var(--warning); }
.ts-desc { color: var(--text-muted); font-size: 13px; margin-bottom: 18px; }
.ts-steps { display: flex; flex-direction: column; gap: 16px; margin-bottom: 18px; }
.ts-step { display: flex; gap: 14px; font-size: 13px; }
.ts-step-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent-dim);
  border: 1px solid var(--accent-border);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.ts-step > div { flex: 1; }
.ts-step strong { display: block; margin-bottom: 4px; }
.ts-step p { color: var(--text-muted); margin-top: 4px; }
.ts-ol { color: var(--text-muted); padding-left: 18px; margin-top: 6px; line-height: 1.9; }
.ts-ol li { margin-bottom: 2px; }
.ts-muted { color: var(--text-muted); }
.ts-ok { color: var(--success); font-family: monospace; font-size: 12px; }
.ts-code {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-family: monospace;
  font-size: 12px;
  margin-top: 6px;
  display: block;
}
.ts-inline-link {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: inherit;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ts-links { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid var(--border); }
.ts-links a { font-size: 12px; color: var(--accent); text-decoration: none; }
.ts-links a:hover { text-decoration: underline; }

/* ── Modals ──────────────────────────────────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
}
.modal-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 32px;
  max-width: 440px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
}
.modal-title { font-size: 17px; font-weight: 600; margin-bottom: 12px; }
.modal-body { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin-bottom: 24px; }
.modal-sync-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 20px;
  cursor: pointer;
}
.modal-sync-label input[type="checkbox"] { accent-color: var(--accent); width: 15px; height: 15px; flex-shrink: 0; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* ── Footer ──────────────────────────────────────────────────────────────────── */

footer {
  text-align: center;
  padding: 16px;
  color: var(--text-dim);
  font-size: 12px;
  border-top: 1px solid var(--border);
}
footer a { color: var(--text-muted); text-decoration: none; }
footer a:hover { color: var(--accent); }

/* ══════════════════════════════════════════════════════════════════════════════
   FIREWALL SECTION
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Hero status bar ─────────────────────────────────────────────────────────── */

.fw-hero {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.fw-hero-left { display: flex; align-items: center; gap: 14px; }
.fw-hero-title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.fw-hero-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.fw-hero-right { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

/* Status indicator */
.fw-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 20px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}
.fw-status-left { display: flex; align-items: center; gap: 10px; }
.fw-status-right { display: flex; align-items: center; gap: 16px; }
.fw-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
@keyframes pulse-live {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0.5); }
  50% { box-shadow: 0 0 0 5px rgba(74,222,128,0); }
}
.fw-dot-on  { background: var(--accent); animation: pulse-live 2s ease-in-out infinite; }
.fw-dot-off { background: var(--text-dim); }
.fw-status-text { font-weight: 600; font-size: 14px; }
.fw-status-port { font-size: 12px; color: var(--text-muted); font-family: monospace; }
.fw-stat { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.fw-stat span:first-child { font-size: 18px; font-weight: 700; color: var(--accent); }
.fw-stat-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }

/* ── Client cards grid ───────────────────────────────────────────────────────── */

.fw-clients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.fw-client-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  transition: border-color 0.15s;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fw-client-card:not(.coming-soon):hover { border-color: var(--accent-border); }
.fw-client-card.coming-soon {
  opacity: 0.45;
  pointer-events: none;
  user-select: none;
}

.fw-client-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.fw-client-card-info { display: flex; align-items: center; gap: 10px; }
.fw-client-icon { font-size: 20px; flex-shrink: 0; }
.fw-client-card-name { font-size: 14px; font-weight: 600; }
.fw-client-card-env { font-size: 11px; color: var(--text-muted); font-family: monospace; margin-top: 1px; }
.fw-client-card-desc { font-size: 12px; color: var(--text-muted); flex: 1; }
.fw-client-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* ── Legacy client connect card (keep for JS compatibility) ── */
.fw-clients-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg2);
  padding: 16px 20px;
  margin-bottom: 18px;
}
.fw-clients-header { margin-bottom: 14px; }
.fw-clients-title { font-size: 14px; font-weight: 600; display: block; margin-bottom: 4px; }
.fw-clients-subtitle { font-size: 12px; color: var(--text-muted); }
.fw-clients-list { display: flex; flex-direction: column; gap: 8px; }
.fw-client-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--bg3);
  border: 1px solid var(--border);
}
.fw-client-row.coming-soon-row { opacity: 0.4; position: relative; }
.fw-client-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.fw-client-name { font-size: 13px; font-weight: 500; }
.fw-client-var { font-size: 11px; color: var(--text-muted); font-family: monospace; }
.fw-client-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 500;
  flex-shrink: 0;
}
.fw-clients-note { font-size: 11px; color: var(--text-muted); margin-top: 10px; }
.fw-restart-notice {
  font-size: 12px;
  color: var(--warning);
  background: rgba(251,191,36,0.08);
  border: 1px solid rgba(251,191,36,0.25);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  margin-top: -4px;
}

/* ── Setup hint / endpoint list ──────────────────────────────────────────────── */

.fw-setup-hint {
  background: var(--accent-dim);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 16px;
  font-size: 13px;
}
.fw-setup-hint strong { display: block; margin-bottom: 10px; }
.fw-endpoints { display: flex; flex-direction: column; gap: 8px; }
.fw-endpoint-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fw-endpoint-label { color: var(--text-muted); min-width: 140px; font-size: 12px; }
.fw-endpoint-code {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  font-family: monospace;
  font-size: 12px;
  color: var(--text);
}

/* ── System proxy card ───────────────────────────────────────────────────────── */

.fw-system-card {
  background: linear-gradient(135deg, rgba(74,222,128,0.05) 0%, var(--bg2) 60%);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 20px;
}
.fw-system-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.fw-system-title-row { display: flex; align-items: flex-start; gap: 12px; }
.fw-system-icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
.fw-system-title { font-size: 15px; font-weight: 700; margin-bottom: 3px; }
.fw-system-sub { font-size: 12px; color: var(--text-muted); }
.fw-sys-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start; }
.fw-sys-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 99px;
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: var(--bg3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.fw-sys-badge-ok  { background: rgba(74,222,128,0.1); color: var(--success); border-color: rgba(74,222,128,0.25); }
.fw-sys-badge-off { background: var(--bg3); color: var(--text-muted); border-color: var(--border); }
.fw-system-body { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.fw-sys-steps-preview { display: flex; flex-direction: column; gap: 8px; }
.fw-sys-step-item { display: flex; align-items: baseline; gap: 10px; font-size: 13px; color: var(--text-muted); }
.fw-sys-step-num {
  width: 20px; height: 20px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--text-muted);
}
.fw-sys-step-item em { font-style: normal; color: var(--warning); font-size: 11px; }
.fw-system-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex-shrink: 0; }
.fw-sys-note { font-size: 11px; color: var(--text-muted); }

/* ── System proxy modal ──────────────────────────────────────────────────────── */

.fw-sys-modal-box { max-width: 480px; }
.fw-sys-modal-steps { display: flex; flex-direction: column; gap: 10px; margin: 20px 0; }
.fw-sys-step-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--bg3);
  border: 1px solid var(--border);
  transition: border-color 0.2s, background 0.2s;
}
.fw-sys-step-row.step-running { border-color: var(--accent-border); background: var(--accent-dim); }
.fw-sys-step-row.step-done   { border-color: rgba(74,222,128,0.3); background: rgba(74,222,128,0.05); }
.fw-sys-step-row.step-error  { border-color: rgba(248,113,113,0.3); background: rgba(248,113,113,0.05); }
.fw-step-icon { font-size: 15px; flex-shrink: 0; width: 20px; text-align: center; }
.fw-step-text { flex: 1; }
.fw-step-msg { font-weight: 500; }
.fw-step-err { font-size: 11px; color: var(--danger); margin-top: 3px; }
.fw-step-hint { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.fw-sys-modal-footer { display: flex; justify-content: flex-end; padding-top: 8px; border-top: 1px solid var(--border); }

/* Spinner */
@keyframes fw-spin { to { transform: rotate(360deg); } }
.fw-spinner {
  display: inline-block;
  width: 13px; height: 13px;
  border: 2px solid var(--accent-border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: fw-spin 0.7s linear infinite;
  flex-shrink: 0;
}

/* ── Firewall settings cards ─────────────────────────────────────────────────── */

.fw-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 14px;
  transition: border-color 0.15s;
}
.fw-card:hover { border-color: #52525b; }
.fw-card-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.fw-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.fw-card-desc { color: var(--text-muted); font-size: 13px; margin-bottom: 14px; }
.fw-layer-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fw-layer-always   { background: rgba(74,222,128,0.1); color: var(--success); }
.fw-layer-optional { background: rgba(251,191,36,0.1); color: var(--warning); }

.fw-toggles { display: flex; flex-direction: column; gap: 2px; }
.fw-toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.1s;
}
.fw-toggle-row:hover { background: var(--bg3); }
.fw-checkbox { accent-color: var(--accent); width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; cursor: pointer; }
.fw-toggle-info { display: flex; flex-direction: column; gap: 2px; }
.fw-toggle-name { font-size: 13px; font-weight: 500; }
.fw-toggle-desc { font-size: 11px; color: var(--text-muted); }

.fw-mode-options { display: flex; flex-direction: column; gap: 8px; }
.fw-mode-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s;
}
.fw-mode-option:hover { border-color: var(--accent-border); }
.fw-mode-option.selected { border-color: var(--accent-border); background: var(--accent-dim); }
.fw-mode-option input[type="radio"] { accent-color: var(--accent); flex-shrink: 0; margin-top: 3px; }
.fw-mode-option strong { display: block; font-size: 13px; margin-bottom: 3px; }
.fw-mode-option p { font-size: 12px; color: var(--text-muted); margin: 0; }

.fw-llm-enable-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-muted);
}
.fw-ollama-status {
  font-size: 12px;
  margin-bottom: 14px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg3);
  border: 1px solid var(--border);
}
.fw-field { margin-bottom: 16px; }
.fw-label { display: block; font-size: 12px; color: var(--text-muted); font-weight: 500; margin-bottom: 6px; }
.fw-label-hint { font-weight: 400; margin-left: 4px; }
.fw-field-hint { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
.fw-field-row { display: flex; gap: 8px; align-items: center; }
.fw-select {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 7px 10px;
  font-size: 13px;
  outline: none;
}
.fw-select:focus { border-color: var(--accent); }
.fw-input {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 7px 12px;
  font-size: 13px;
  font-family: monospace;
  outline: none;
}
.fw-input:focus { border-color: var(--accent); }
.fw-pull-progress { margin-top: 10px; }
.fw-pull-bar-wrap { height: 3px; background: var(--bg3); border-radius: 2px; overflow: hidden; margin-bottom: 6px; }
.fw-pull-bar { height: 100%; background: var(--accent); border-radius: 2px; width: 0%; transition: width 0.3s; }
.fw-pull-status { font-size: 12px; color: var(--text-muted); }
.fw-prompt-editor {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 10px 12px;
  font-size: 12px;
  font-family: monospace;
  line-height: 1.6;
  outline: none;
  resize: vertical;
}
.fw-prompt-editor[readonly] { color: var(--text-muted); cursor: default; border-style: dashed; }
.fw-prompt-editor:not([readonly]):focus { border-color: var(--accent); }

/* ── Audit log ───────────────────────────────────────────────────────────────── */

.fw-log-live {
  font-size: 11px;
  font-weight: 600;
  color: var(--success);
  letter-spacing: 0.03em;
  animation: fw-pulse 2s ease-in-out infinite;
}
@keyframes fw-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

.fw-logs-list { display: flex; flex-direction: column; gap: 2px; }
.fw-log-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  border: 1px solid transparent;
  font-family: monospace;
}
.fw-log-row-expandable { cursor: default; }
.fw-log-row-expandable:hover { background: var(--bg3); border-color: var(--border); }
.fw-log-persist-note { font-size: 11px; color: var(--text-muted); padding: 4px 8px; margin-bottom: 4px; border: 1px solid var(--border); border-radius: 4px; background: var(--bg3); }
.fw-log-persist-note a { color: var(--accent); text-decoration: none; }
.fw-log-persist-note a:hover { text-decoration: underline; }
.fw-log-session-sep { font-size: 11px; color: var(--accent); text-align: center; padding: 6px 0; opacity: 0.7; letter-spacing: 0.5px; }
.fw-log-ts { color: var(--text-muted); flex-shrink: 0; width: 120px; font-size: 11px; }
.fw-log-event { font-weight: 600; flex-shrink: 0; width: 68px; }
.fw-log-event-clean    { color: var(--accent); }
.fw-log-event-redacted { color: var(--warning); }
.fw-log-event-blocked  { color: var(--danger); }
.fw-log-event-other    { color: var(--text-muted); }
.fw-log-badge { font-size: 10px; padding: 1px 6px; border-radius: 8px; flex-shrink: 0; }
.fw-log-detail { color: var(--text-muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fw-log-expand-icon { color: var(--accent); font-size: 11px; flex-shrink: 0; cursor: pointer; padding: 2px 4px; border-radius: 3px; }
.fw-log-expand-icon:hover { background: rgba(74,222,128,0.1); }
.fw-log-findings {
  margin: 0 10px 4px 10px;
  padding: 8px 10px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.fw-finding-row { display: flex; align-items: center; gap: 8px; font-size: 12px; flex-wrap: wrap; }
.fw-finding-type { font-weight: 600; color: var(--accent); flex-shrink: 0; min-width: 120px; }
.fw-finding-layer { font-size: 10px; color: var(--text-muted); background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; flex-shrink: 0; }
.fw-finding-original { color: var(--danger); font-family: monospace; }
.fw-finding-arrow { color: var(--text-muted); flex-shrink: 0; }
.fw-finding-replacement { color: var(--accent); font-family: monospace; }

/* ── Detection tester ────────────────────────────────────────────────────────── */

.fw-tester-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--bg2);
}
.fw-tester-label { font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.fw-tester-row { display: flex; gap: 8px; align-items: flex-start; }
.fw-tester-input {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  padding: 8px 10px;
  resize: vertical;
  font-family: inherit;
}
.fw-tester-input:focus { outline: none; border-color: var(--accent); }
.fw-tester-result { margin-top: 10px; display: flex; flex-direction: column; gap: 5px; }
.fw-tester-clean { color: var(--success); font-size: 13px; font-weight: 500; }
.fw-tester-summary { font-size: 12px; font-weight: 600; color: var(--warning); margin-bottom: 4px; }
.fw-tester-redacted { font-size: 12px; color: var(--text-muted); margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); font-family: monospace; word-break: break-word; }

/* ── Recordings ──────────────────────────────────────────────────────────────── */

.fw-recs-list { display: flex; flex-direction: column; gap: 6px; }
.fw-empty { color: var(--text-muted); font-size: 13px; padding: 20px 0; text-align: center; }
.fw-rec-size { font-size: 11px; color: var(--text-muted); background: var(--bg3); border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; }
.fw-rec-toggle-label { font-size: 13px; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.fw-rec-row { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg2); overflow: hidden; transition: border-color 0.15s; }
.fw-rec-row.fw-rec-expanded { border-color: var(--accent-border); }
.fw-rec-header { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; font-size: 13px; flex-wrap: wrap; user-select: none; }
.fw-rec-header:hover { background: var(--bg3); }
.fw-rec-icon { font-size: 10px; color: var(--text-muted); flex-shrink: 0; }
.fw-rec-provider { font-weight: 600; color: var(--text); flex-shrink: 0; }
.fw-rec-model { color: var(--text-muted); font-size: 12px; flex-shrink: 0; }
.fw-rec-mode { color: var(--accent); font-size: 11px; flex-shrink: 0; }
.fw-rec-badge { font-size: 11px; padding: 2px 7px; border-radius: 10px; flex-shrink: 0; }
.badge-warn { background: rgba(251,191,36,0.1); color: var(--warning); }
.fw-rec-chars { font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.fw-rec-time { font-size: 11px; color: var(--text-muted); margin-left: auto; }
.fw-rec-body { padding: 0 14px 14px; }
.fw-rec-prompt {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-size: 12px;
  font-family: monospace;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow-y: auto;
  color: var(--text);
  margin: 0;
}

/* ── OS env var success banner ───────────────────────────────────────────────── */

.fw-env-banner {
  background: rgba(74,222,128,0.06);
  border: 1px solid rgba(74,222,128,0.2);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 12px;
  color: var(--accent);
  margin-top: 8px;
  display: none;
}
.fw-env-banner.visible { display: block; }
.fw-env-banner code { background: rgba(74,222,128,0.1); color: var(--accent); border: none; }

.fw-log-controls { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin:16px 0; }
.fw-log-controls > span { color:var(--text-muted); font-size:13px; }
.fw-finding-original { overflow-wrap:anywhere; white-space:pre-wrap; }

/* ── Relay project delivery system ───────────────────────────────────────────── */
.cp-header { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; margin:8px 0 22px; }
.cp-header h2 { margin:4px 0 8px; font-size:30px; letter-spacing:-.04em; color:var(--text); }
.cp-header h2 span { color:var(--accent); font-weight:500; }
.cp-header p { max-width:720px; color:var(--text-muted); line-height:1.55; margin:0; }
.cp-eyebrow { color:var(--accent)!important; font-size:11px; letter-spacing:.14em; font-weight:700; }
.cp-actions,.cp-project-card,.cp-toolbar,.cp-detail-actions,.cp-chip-row { display:flex; gap:9px; align-items:center; flex-wrap:wrap; }
.cp-error { background:rgba(248,113,113,.12); border:1px solid rgba(248,113,113,.45); color:#fca5a5; padding:10px 12px; border-radius:8px; margin:12px 0; }
.cp-form-error { background:rgba(248,113,113,.12); border:1px solid rgba(248,113,113,.45); color:#fecaca; padding:9px 11px; border-radius:8px; margin:0 0 12px; font-size:13px; line-height:1.4; }
.cp-project-card { padding:12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); margin-bottom:15px; }
.cp-project-card label { display:flex; align-items:center; gap:8px; color:var(--text-muted); font-size:12px; flex:1; min-width:240px; }
.cp-project-card input { flex:1; min-width:170px; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:8px; }
.cp-project-name { color:var(--accent); font:12px monospace; overflow-wrap:anywhere; }
.cp-metrics { display:grid; grid-template-columns:repeat(6,minmax(90px,1fr)); gap:10px; margin-bottom:15px; }
.cp-metric { border:1px solid var(--border); border-radius:9px; padding:12px; background:var(--surface); }
.cp-metric strong { display:block; font:700 21px monospace; color:var(--text); }.cp-metric span { color:var(--text-muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.cp-toolbar { border-bottom:1px solid var(--border); padding-bottom:12px; margin-bottom:14px; }.cp-toolbar > span { margin-left:auto; color:var(--text-muted); font:11px monospace; overflow:hidden; text-overflow:ellipsis; max-width:350px; }
.cp-filter { background:transparent; color:var(--text-muted); border:0; cursor:pointer; padding:6px 8px; border-radius:5px; }.cp-filter.active { color:var(--accent); background:rgba(74,222,128,.1); }
.cp-customize-board { margin-left:4px; border:1px solid var(--border); color:var(--text); }
.cp-customize-board:hover { border-color:var(--accent); color:var(--accent); }
.cp-board-customizer { max-width:440px; }
.cp-column-visibility { margin:20px 0; padding:0; border:0; }
.cp-column-visibility legend { margin-bottom:10px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); }
.cp-column-visibility-options { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.cp-column-visibility-option { display:flex; align-items:center; gap:8px; min-height:42px; padding:10px; border:1px solid var(--border); border-radius:7px; cursor:pointer; color:var(--text); }
.cp-column-visibility-option:hover { border-color:var(--accent); background:rgba(74,222,128,.06); }
.cp-column-visibility-option input { accent-color:var(--accent); }
.cp-archived-view { max-width:460px; }
.cp-layout { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:15px; }.cp-board { display:grid; grid-template-columns:repeat(3,minmax(170px,1fr)); gap:10px; align-content:start; }
.cp-column { border:1px solid var(--border); border-radius:9px; min-height:135px; padding:9px; background:var(--surface); }.cp-column h3 { display:flex; justify-content:space-between; margin:0 0 9px; font-size:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; }.cp-column h3 span { color:var(--accent); }
.cp-ticket { width:100%; text-align:left; display:grid; gap:7px; background:var(--bg); border:1px solid var(--border); border-radius:7px; color:var(--text); padding:10px; margin:0 0 8px; cursor:pointer; }.cp-ticket:hover,.cp-ticket.selected { border-color:var(--accent); }.cp-ticket strong { font-size:13px; line-height:1.35; }.cp-ticket-top,.cp-ticket-meta { display:flex; justify-content:space-between; gap:6px; font-size:10px; color:var(--text-muted); }.cp-ticket code { font-size:10px; }.cp-priority { text-transform:uppercase; font-weight:700; }.cp-priority-critical,.cp-priority-high { color:#fca5a5; }.cp-priority-medium { color:#fcd34d; }.cp-priority-low { color:var(--accent); }.cp-column-empty,.cp-empty { color:var(--text-muted); font-size:12px; }
.cp-detail { border:1px solid var(--border); border-radius:9px; background:var(--surface); padding:15px; align-self:start; max-height:760px; overflow:auto; }.cp-detail-heading { display:flex; justify-content:space-between; gap:8px; }.cp-detail h3 { margin:4px 0 10px; font-size:18px; }.cp-detail h4 { margin:16px 0 7px; font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-muted); }.cp-detail p,.cp-detail li { font-size:12px; line-height:1.5; color:var(--text-muted); }.cp-detail ul { padding-left:17px; margin:0; }.cp-detail small { color:var(--text-dim); }.cp-close { border:0; background:transparent; color:var(--text-muted); font-size:23px; cursor:pointer; }.cp-chip-row span { border:1px solid var(--border); border-radius:999px; padding:3px 7px; color:var(--text-muted); font-size:10px; }.cp-text-button { border:0; background:transparent; padding:0; color:var(--accent); cursor:pointer; font-size:12px; margin-right:11px; }
@media (max-width:900px) { .cp-layout { grid-template-columns:1fr; }.cp-board { grid-template-columns:repeat(2,minmax(150px,1fr)); }.cp-metrics { grid-template-columns:repeat(3,1fr); }.cp-header { display:block; }.cp-actions { margin-top:14px; } }
@media (max-width:560px) { .cp-board { grid-template-columns:1fr; }.cp-metrics { grid-template-columns:repeat(2,1fr); }.cp-toolbar > span { display:none; } }
.cp-ticket-modal { width:min(520px, calc(100vw - 32px)); display:grid; gap:14px; }
.cp-ticket-modal label { display:grid; gap:6px; font-size:12px; color:var(--text-muted); }
.cp-ticket-modal input,.cp-ticket-modal textarea,.cp-ticket-modal select { background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:9px; font:13px inherit; }
.cp-ticket-modal textarea { resize:vertical; }.cp-modal-heading,.cp-modal-actions { display:flex; justify-content:space-between; align-items:center; gap:10px; }.cp-modal-heading h3 { margin:0; }.cp-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }.cp-ticket-modal small { font-weight:400; }
.cp-modal-note { margin:0; color:var(--text-muted); font-size:12px; line-height:1.5; }.cp-header h2 { color:var(--text); }.cp-header h2::first-letter { color:var(--text); }
.cp-workspace-warning { margin:0; border:1px solid rgba(251,191,36,.4); background:rgba(251,191,36,.08); color:#fcd34d; border-radius:6px; padding:9px; font-size:12px; line-height:1.45; }
.cp-project-setup { display:grid; gap:11px; }.cp-project-title { display:flex; gap:10px; align-items:baseline; }.cp-project-title span { color:var(--text-muted); font-size:12px; }.cp-project-fields { display:grid; grid-template-columns:180px minmax(220px,1fr) minmax(220px,1fr); gap:10px; }.cp-project-fields label,.cp-project-rules { display:grid; gap:6px; color:var(--text-muted); font-size:12px; }.cp-project-fields input,.cp-project-fields select,.cp-project-rules textarea { background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:6px; padding:8px; font:12px inherit; }.cp-project-rules textarea { resize:vertical; }.cp-project-actions { display:flex; gap:9px; align-items:center; flex-wrap:wrap; }
@media (max-width:900px) { .cp-project-fields { grid-template-columns:1fr; } }

/* Control plane refresh: preserve focus for the board, move configuration behind a single intent. */
.cp-header { padding:18px 0 14px; border-bottom:1px solid rgba(148,163,184,.18); margin-bottom:16px; }
.cp-header h2 { font-size:36px; max-width:760px; }.cp-header > div:first-child > p:last-child { font-size:15px; max-width:680px; }
.cp-project-bar { display:flex; align-items:center; gap:13px; padding:14px 16px; border:1px solid rgba(74,222,128,.24); border-radius:10px; background:linear-gradient(90deg,rgba(74,222,128,.08),rgba(15,23,42,.08)); margin-bottom:16px; }
.cp-project-mark { width:34px; height:34px; display:grid; place-items:center; border-radius:9px; color:var(--accent); border:1px solid rgba(74,222,128,.35); background:rgba(74,222,128,.1); font:700 18px monospace; }.cp-project-bar strong { display:block; color:var(--text); font-size:14px; }.cp-project-bar p { margin:3px 0 0; font-size:12px; color:var(--text-muted); }.cp-project-bar .cp-project-actions { margin-left:auto; }
.cp-project-modal { width:min(610px, calc(100vw - 32px)); }.cp-project-modal .cp-eyebrow { margin:0 0 4px; }.cp-project-modal .cp-modal-heading h3 { font-size:21px; }
.cp-metrics { display:flex; gap:0; padding:2px 0 15px; margin:0; border-bottom:1px solid var(--border); }.cp-metric { min-width:92px; flex:1; padding:8px 14px; border:0; border-radius:0; border-right:1px solid var(--border); background:transparent; }.cp-metric:first-child { padding-left:0; }.cp-metric:last-child { border-right:0; }.cp-metric strong { font-size:19px; }.cp-toolbar { padding:12px 0; margin:0; border-bottom:1px solid var(--border); }
.cp-layout { display:block; }.cp-board { grid-template-columns:repeat(6,minmax(180px,1fr)); overflow-x:auto; padding:16px 0 12px; gap:10px; }.cp-column { min-height:190px; padding:10px; background:rgba(15,23,42,.32); }.cp-column h3 { font-size:10px; }.cp-detail { max-height:none; margin:4px 0 24px; padding:18px; border-color:rgba(74,222,128,.3); background:linear-gradient(100deg,rgba(74,222,128,.07),rgba(15,23,42,.28)); }.cp-empty { margin:4px 0; }.cp-ticket { min-height:108px; }
@media (max-width:900px) { .cp-project-bar { align-items:flex-start; }.cp-project-bar .cp-project-actions { margin-left:0; }.cp-metrics { overflow-x:auto; }.cp-metric { min-width:84px; }.cp-board { grid-template-columns:repeat(6,180px); }.cp-header h2 { font-size:28px; } }
.cp-notice { margin:0 0 12px; padding:10px 12px; border:1px solid rgba(74,222,128,.4); background:rgba(74,222,128,.09); border-radius:8px; color:var(--accent); font:12px monospace; }
.cp-workspace-list { display:grid; gap:7px; }.cp-workspace-row { display:flex; justify-content:space-between; align-items:center; padding:9px 10px; border:1px solid var(--border); border-radius:7px; }.cp-workspace-row b,.cp-workspace-row small { display:block; }.cp-workspace-row small { margin-top:3px; color:var(--text-muted); font:11px monospace; max-width:420px; overflow:hidden; text-overflow:ellipsis; }
.cp-path-input { display:flex; gap:7px; }.cp-path-input input { min-width:0; flex:1; }.cp-folder-modal { width:min(650px,calc(100vw - 32px)); }.cp-folder-path { display:flex; align-items:center; gap:8px; border:1px solid var(--border); border-radius:7px; padding:8px; }.cp-folder-path code { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-muted); }.cp-folder-list { margin-top:12px; max-height:360px; overflow:auto; display:grid; gap:4px; }.cp-folder-row { text-align:left; border:0; background:transparent; color:var(--text); padding:10px; border-radius:6px; cursor:pointer; font:13px monospace; }.cp-folder-row:hover { background:rgba(74,222,128,.1); }.cp-folder-row span { color:var(--accent); margin-right:9px; }
/* Keep folder browsing attached to the field instead of consuming a separate column. */
.cp-path-input { position:relative; display:block; }.cp-path-input input { width:100%; padding-right:82px; }.cp-path-input #cp-browse-directory { position:absolute; top:4px; right:4px; height:calc(100% - 8px); padding:0 11px; border-radius:5px; background:rgba(74,222,128,.09); border-color:rgba(74,222,128,.34); color:var(--accent); font-size:12px; }
.cp-path-input #cp-browse-directory:hover { background:rgba(74,222,128,.18); }
/* Folder picker sits above the workspace dialog. */
#cp-folder-modal { z-index:1001; }
.cp-comment-modal { width:min(580px,calc(100vw - 32px)); }.cp-comment-modal label { display:grid; gap:7px; color:var(--text-muted); font-size:12px; }.cp-comment-modal textarea { background:var(--bg); border:1px solid var(--border); border-radius:7px; color:var(--text); padding:10px; resize:vertical; font:13px inherit; }
.cp-detail { padding:22px; }.cp-detail-heading { padding-bottom:12px; border-bottom:1px solid rgba(148,163,184,.16); }.cp-detail > p { max-width:860px; font-size:13px; }.cp-detail-actions { margin:15px 0 18px; }.cp-detail-actions .btn { min-width:84px; }.cp-detail-sections { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.cp-detail-sections section { min-height:116px; padding:13px; border:1px solid rgba(148,163,184,.18); border-radius:8px; background:rgba(2,6,23,.28); }.cp-detail-sections h4 { margin-top:0; }.cp-detail-sections p { margin:0; }.cp-detail-sections .cp-text-button { margin-top:10px; }@media(max-width:720px){.cp-detail-sections{grid-template-columns:1fr;}}
/* Ticket details use a focused issue dialog, not an inline dashboard card. */
.cp-detail-empty { margin:4px 0 24px; }.cp-ticket-dialog { position:fixed; z-index:1000; inset:50% auto auto 50%; transform:translate(-50%,-50%); width:min(980px,calc(100vw - 48px)); max-height:calc(100vh - 72px); overflow:auto; padding:26px; border:1px solid rgba(74,222,128,.45); border-radius:14px; background:#101318; box-shadow:0 30px 90px rgba(0,0,0,.7); }.cp-ticket-dialog::before { content:""; position:fixed; inset:0; z-index:-1; background:rgba(0,0,0,.62); backdrop-filter:blur(3px); }.cp-ticket-dialog .cp-detail-heading h3 { font-size:25px; }.cp-ticket-dialog .cp-detail-sections { margin-top:4px; }.cp-ticket-dialog .cp-detail-actions { position:sticky; top:-26px; z-index:1; padding:12px 0; background:#101318; border-bottom:1px solid rgba(148,163,184,.14); }#cp-comment-modal { z-index:1002; }
/* Handoff is a second-level action from the ticket dialog. */
#cp-handoff-modal { z-index:1002; }

/* Guided planning starts with intent, then hands the conversation to a local agent. */
.cp-planner-launch { border-color:rgba(167,139,250,.56); color:#ddd6fe; background:linear-gradient(120deg,rgba(139,92,246,.18),rgba(74,222,128,.08)); }
.cp-planner-launch:hover { border-color:#c4b5fd; background:linear-gradient(120deg,rgba(139,92,246,.28),rgba(74,222,128,.14)); }
.cp-planner-launch span,.cp-planner-submit span { margin-right:5px; color:#c4b5fd; }
#cp-planner-modal { z-index:1004; align-items:flex-start; overflow:auto; padding:36px 16px; }
.cp-planner-modal { width:min(840px,calc(100vw - 32px)); gap:20px; padding:28px; margin:auto; background:linear-gradient(160deg,#151820 0%,#101318 72%); border-color:rgba(167,139,250,.38); box-shadow:0 28px 100px rgba(0,0,0,.68),0 0 0 1px rgba(74,222,128,.05); }
.cp-planner-modal .cp-modal-heading { align-items:flex-start; }.cp-planner-modal h3 { font-size:28px; letter-spacing:-.035em; }.cp-planner-modal label { display:grid; gap:7px; color:var(--text-muted); font-size:13px; font-weight:650; }.cp-planner-modal textarea,.cp-planner-modal select { background:rgba(2,6,23,.56); border-color:rgba(148,163,184,.28); border-radius:9px; color:var(--text); padding:12px; font:13px/1.5 inherit; }.cp-planner-modal textarea:focus,.cp-planner-modal select:focus { border-color:#a78bfa; box-shadow:0 0 0 3px rgba(167,139,250,.13); outline:0; }.cp-planner-modal small { color:var(--text-muted); font-size:11px; font-weight:400; line-height:1.45; }
.cp-planner-intro { display:flex; gap:13px; align-items:flex-start; padding:15px 16px; border:1px solid rgba(167,139,250,.3); border-radius:12px; background:radial-gradient(circle at 0 0,rgba(139,92,246,.16),transparent 42%),rgba(15,23,42,.48); }.cp-planner-intro strong { color:var(--text); font-size:14px; }.cp-planner-intro p { margin:4px 0 0; color:var(--text-muted); font-size:12px; line-height:1.5; }.cp-planner-orbit { display:grid; place-items:center; width:33px; height:33px; flex:0 0 auto; border:1px solid rgba(196,181,253,.44); border-radius:50%; color:#c4b5fd; background:rgba(139,92,246,.12); box-shadow:0 0 20px rgba(139,92,246,.16); }
.cp-planner-primary textarea { min-height:94px; font-size:15px; color:#f8fafc; }.cp-planner-section { display:grid; gap:10px; }.cp-planner-section-heading { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }.cp-planner-section-heading strong { color:var(--text); font-size:13px; }.cp-planner-section-heading small { text-align:right; }
.cp-planner-choice-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }.cp-planner-choice { position:relative; display:grid!important; gap:5px!important; min-height:94px; padding:12px; border:1px solid rgba(148,163,184,.22); border-radius:10px; background:rgba(2,6,23,.26); cursor:pointer; transition:.16s ease; }.cp-planner-choice:hover { transform:translateY(-1px); border-color:rgba(196,181,253,.52); }.cp-planner-choice.selected { border-color:#a78bfa; background:linear-gradient(145deg,rgba(139,92,246,.22),rgba(74,222,128,.06)); box-shadow:inset 0 0 0 1px rgba(167,139,250,.12); }.cp-planner-choice input { position:absolute; opacity:0; pointer-events:none; }.cp-planner-choice span { color:#c4b5fd; font:700 16px monospace; }.cp-planner-choice b { color:var(--text); font-size:12px; }.cp-planner-choice small { font-size:10px; }
.cp-planner-two-column { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.cp-planner-toggle-row { display:flex; flex-wrap:wrap; gap:8px; }.cp-planner-toggle-row label { display:inline-flex; gap:0; cursor:pointer; }.cp-planner-toggle-row input { position:absolute; opacity:0; pointer-events:none; }.cp-planner-toggle-row span { display:inline-flex; align-items:center; min-height:33px; padding:0 11px; border:1px solid rgba(148,163,184,.24); border-radius:999px; background:rgba(2,6,23,.3); color:var(--text-muted); font-size:12px; transition:.16s ease; }.cp-planner-toggle-row input:checked + span { border-color:rgba(74,222,128,.5); background:rgba(74,222,128,.1); color:#bbf7d0; }.cp-planner-toggle-row label:hover span { border-color:rgba(74,222,128,.5); }
.cp-planner-footnote { margin:0; padding:10px 12px; border-left:2px solid #a78bfa; background:rgba(139,92,246,.07); color:#cbd5e1; font-size:12px; line-height:1.5; }.cp-planner-submit { border-color:rgba(167,139,250,.55); background:linear-gradient(100deg,#6d28d9,#16a34a); }
@media(max-width:760px){.cp-planner-modal{padding:20px;gap:16px}.cp-planner-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cp-planner-two-column{grid-template-columns:1fr}.cp-planner-section-heading{display:grid;gap:3px}.cp-planner-section-heading small{text-align:left}}

/* Jira-style board transitions: drag into a status lane, then explain the move. */
.cp-ticket[draggable="true"] { cursor:grab; }
.cp-ticket[draggable="true"]:active,.cp-ticket.dragging { cursor:grabbing; opacity:.45; }
.cp-column { transition:border-color .14s ease, background .14s ease, box-shadow .14s ease; }
.cp-column.cp-drop-target { border-color:var(--accent); background:rgba(74,222,128,.09); box-shadow:inset 0 0 0 1px rgba(74,222,128,.18); }
.cp-transition-summary { display:flex; gap:9px; align-items:center; padding:11px 12px; border:1px solid rgba(74,222,128,.26); border-radius:8px; background:rgba(74,222,128,.07); color:var(--text-muted); font-size:13px; text-transform:capitalize; }
.cp-transition-summary strong { color:var(--accent); }
#cp-transition-modal { z-index:1003; }

/* Relay roles: administrators shape capacity; agents operate a focused queue. */
.cp-perspective { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:13px 16px; margin:0 0 16px; border:1px solid rgba(148,163,184,.22); border-radius:10px; background:linear-gradient(100deg,rgba(15,23,42,.72),rgba(74,222,128,.045)); }
.cp-perspective-copy { display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }.cp-perspective-copy > span { color:var(--text-muted); font:700 10px monospace; letter-spacing:.12em; }.cp-perspective-copy strong { color:var(--text); font-size:14px; }.cp-perspective-copy small { color:var(--text-muted); font-size:12px; }
.cp-segmented { display:inline-flex; padding:3px; border:1px solid var(--border); border-radius:8px; background:var(--bg); }.cp-perspective-button { border:0; border-radius:5px; background:transparent; color:var(--text-muted); cursor:pointer; padding:7px 12px; font:600 12px inherit; }.cp-perspective-button.active { color:#07130d; background:var(--accent); }
.cp-agent-console { margin:0 0 16px; padding:18px; border:1px solid rgba(74,222,128,.3); border-radius:12px; background:linear-gradient(120deg,rgba(74,222,128,.09),rgba(2,6,23,.1)); }.cp-agent-console-head { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; }.cp-agent-console h3 { margin:5px 0 7px; color:var(--text); font-size:20px; }.cp-agent-console p { max-width:620px; margin:0; color:var(--text-muted); font-size:13px; line-height:1.45; }.cp-triage-summary { display:grid; grid-template-columns:auto auto; column-gap:9px; align-items:center; min-width:220px; }.cp-triage-summary strong { grid-row:span 2; color:var(--accent); font:700 30px monospace; }.cp-triage-summary span { color:var(--text-muted); font-size:11px; }.cp-triage-summary .btn { grid-column:2; margin-top:7px; width:max-content; }
.cp-agent-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:16px; }.cp-agent-card { padding:14px; border:1px solid rgba(148,163,184,.2); border-radius:9px; background:rgba(2,6,23,.32); }.cp-agent-card-top { display:flex; gap:10px; align-items:center; }.cp-agent-card-top strong,.cp-agent-card-top small { display:block; }.cp-agent-card-top strong { color:var(--text); font-size:14px; }.cp-agent-card-top small { color:var(--text-muted); margin-top:2px; font-size:11px; }.cp-agent-avatar { display:grid; place-items:center; width:31px; height:31px; border-radius:8px; font:700 15px monospace; }.cp-agent-codex { color:#86efac; background:rgba(74,222,128,.12); }.cp-agent-claude { color:#fdba74; background:rgba(251,146,60,.12); }.cp-agent-count { margin-left:auto; color:var(--accent); font:700 18px monospace; }.cp-agent-card p { margin:12px 0; }
.cp-planning-record { display:flex; align-items:center; gap:10px; margin-top:12px; padding:10px 12px; border:1px solid rgba(167,139,250,.28); border-radius:8px; background:rgba(139,92,246,.07); }.cp-planning-record > span { color:#c4b5fd; font-size:17px; }.cp-planning-record div { min-width:0; flex:1; }.cp-planning-record small,.cp-planning-record strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.cp-planning-record small { color:var(--text-muted); font-size:10px; }.cp-planning-record strong { margin-top:3px; color:#e9d5ff; font-size:12px; }.cp-planning-record code { color:#cbd5e1; font-size:10px; }
@media(max-width:720px){.cp-perspective,.cp-agent-console-head{align-items:flex-start;flex-direction:column}.cp-agent-grid{grid-template-columns:1fr}.cp-triage-summary{min-width:0}.cp-segmented{width:100%}.cp-perspective-button{flex:1}}

/* Workspace Studio: configuration is deliberately separated from the workspace list. */
.cp-workspace-overview { width:min(650px,calc(100vw - 32px)); }
.cp-workspace-editor { width:min(720px,calc(100vw - 32px)); max-height:calc(100vh - 40px); overflow:auto; }
.cp-workspace-overview .cp-modal-note,.cp-workspace-editor .cp-modal-note { max-width:570px; font-size:13px; }
.cp-workspace-list { margin:18px 0 6px; gap:10px; }
.cp-workspace-row { display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:12px; align-items:center; min-height:82px; padding:13px; border:1px solid rgba(148,163,184,.24); border-radius:10px; background:linear-gradient(110deg,rgba(15,23,42,.6),rgba(2,6,23,.18)); transition:border-color .16s ease,transform .16s ease,background .16s ease; }
.cp-workspace-row:hover { border-color:rgba(74,222,128,.52); background:linear-gradient(110deg,rgba(74,222,128,.08),rgba(15,23,42,.48)); transform:translateY(-1px); }
.cp-workspace-row-icon { display:grid; width:38px; height:38px; place-items:center; border:1px solid rgba(74,222,128,.32); border-radius:9px; background:rgba(74,222,128,.09); color:var(--accent); font:700 18px monospace; }
.cp-workspace-row-copy { min-width:0; }.cp-workspace-row-copy b { color:var(--text); font-size:14px; }.cp-workspace-row-copy small { max-width:none; margin:4px 0 0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-muted); font:11px monospace; }.cp-workspace-row-copy em { display:inline-block; margin-top:6px; color:#86efac; font:700 10px monospace; font-style:normal; letter-spacing:.04em; }
.cp-workspace-settings { display:grid; place-items:center; width:36px; height:36px; border:1px solid rgba(148,163,184,.3); border-radius:8px; background:rgba(2,6,23,.42); color:var(--text-muted); cursor:pointer; font-size:17px; transition:all .15s ease; }.cp-workspace-settings:hover { border-color:rgba(74,222,128,.6); background:rgba(74,222,128,.12); color:var(--accent); transform:rotate(18deg); }
.cp-workspace-empty { display:grid; place-items:center; min-height:148px; padding:16px; border:1px dashed rgba(148,163,184,.3); border-radius:10px; text-align:center; color:var(--text-muted); }.cp-workspace-empty span { color:var(--accent); font:700 25px monospace; }.cp-workspace-empty strong { margin-top:5px; color:var(--text); font-size:14px; }.cp-workspace-empty p { margin:6px 0 0; max-width:380px; font-size:12px; line-height:1.45; }.cp-workspace-empty .btn { margin-top:10px; }
.cp-editor-section { display:grid; gap:13px; margin-top:19px; padding:16px; border:1px solid rgba(148,163,184,.17); border-radius:10px; background:rgba(2,6,23,.19); }.cp-editor-section .cp-form-grid { grid-template-columns:minmax(190px, 290px); }
.cp-field-label { display:grid; gap:7px; color:var(--text); font-size:12px; font-weight:650; }.cp-field-label > span { margin-top:-3px; color:var(--text-muted); font-size:11px; font-weight:400; }.cp-field-label > small { margin-top:-3px; color:var(--text-muted); font-size:11px; line-height:1.4; font-weight:400; }
.cp-field-label input,.cp-field-label select { width:100%; min-height:43px; background:rgba(2,6,23,.56); border-color:rgba(148,163,184,.3); }.cp-field-label input:focus,.cp-field-label select:focus { border-color:rgba(74,222,128,.7); box-shadow:0 0 0 3px rgba(74,222,128,.1); }
.cp-repository-field { padding-top:2px; }.cp-path-input { margin-top:1px; }.cp-path-input input { padding-right:98px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; }.cp-path-input #cp-browse-directory { right:5px; min-width:78px; color:#a7f3d0; }
.cp-editor-section .cp-workspace-warning { margin:0; border-radius:8px; padding:10px 12px; }
.cp-rules-section { gap:12px; background:linear-gradient(120deg,rgba(74,222,128,.05),rgba(2,6,23,.14)); }.cp-section-heading strong { color:var(--text); font-size:14px; }.cp-section-heading p { margin:4px 0 0; color:var(--text-muted); font-size:12px; line-height:1.4; }
.cp-rule-presets { display:flex; flex-wrap:wrap; gap:7px; }.cp-rule-preset { display:inline-flex; align-items:center; gap:6px; min-height:30px; padding:5px 9px; border:1px solid rgba(148,163,184,.26); border-radius:999px; background:rgba(2,6,23,.38); color:var(--text-muted); cursor:pointer; font:600 11px inherit; transition:all .14s ease; }.cp-rule-preset span { display:grid; place-items:center; width:14px; height:14px; border-radius:50%; color:var(--accent); background:rgba(74,222,128,.12); font-size:14px; line-height:1; }.cp-rule-preset:hover,.cp-rule-preset.selected { color:#d1fae5; border-color:rgba(74,222,128,.55); background:rgba(74,222,128,.11); }.cp-rule-preset.selected span { color:#052e16; background:var(--accent); font-size:10px; }
.cp-rule-list { display:flex; flex-wrap:wrap; gap:7px; min-height:32px; }.cp-rule-chip { display:inline-flex; align-items:center; gap:7px; max-width:100%; padding:6px 8px 6px 10px; border:1px solid rgba(74,222,128,.36); border-radius:7px; background:rgba(74,222,128,.08); color:#d1fae5; font:11px/1.35 ui-monospace,SFMono-Regular,Menlo,monospace; }.cp-rule-chip button { width:17px; height:17px; flex:0 0 17px; border:0; border-radius:4px; background:transparent; color:#86efac; cursor:pointer; font-size:15px; line-height:1; }.cp-rule-chip button:hover { background:rgba(248,113,113,.18); color:#fca5a5; }.cp-rule-empty { margin:0; color:var(--text-muted); font-size:11px; font-style:italic; }
.cp-custom-rule { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }.cp-custom-rule input { min-width:0; min-height:39px; background:rgba(2,6,23,.46); border-color:rgba(148,163,184,.28); }.cp-custom-rule .btn span { margin-right:4px; color:var(--accent); font-size:15px; }.cp-visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.cp-action-spacer { flex:1; }.cp-danger-button { color:#fca5a5; border-color:rgba(248,113,113,.42); background:rgba(248,113,113,.07); }.cp-danger-button:hover { color:#fee2e2; border-color:#f87171; background:rgba(248,113,113,.14); }
#cp-workspace-editor-modal { z-index:1004; }#cp-folder-modal { z-index:1005; }
@media(max-width:640px){.cp-workspace-row{grid-template-columns:34px minmax(0,1fr) auto;padding:11px}.cp-workspace-row-icon{width:34px;height:34px}.cp-workspace-editor{max-height:calc(100vh - 20px)}.cp-editor-section{padding:13px}.cp-custom-rule{grid-template-columns:1fr}.cp-custom-rule .btn{justify-content:center}.cp-rule-chip{width:100%;justify-content:space-between}.cp-workspace-row-copy small{white-space:normal}.cp-modal-actions{gap:8px}.cp-action-spacer{display:none}}


/* Relay board workspace: hierarchy is deliberately visible before the execution lanes. */
.cp-board-command { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:0 0 15px; padding:14px 16px; border:1px solid rgba(167,139,250,.32); border-radius:12px; background:linear-gradient(115deg,rgba(124,58,237,.13),rgba(15,23,42,.55) 56%,rgba(34,211,238,.06)); box-shadow:0 14px 36px rgba(2,6,23,.18); }
.cp-board-select-wrap { display:grid; grid-template-columns:auto auto; column-gap:9px; align-items:center; min-width:0; }.cp-board-kicker { grid-column:1/-1; margin-bottom:4px; color:#c4b5fd; font:700 10px monospace; letter-spacing:.14em; }.cp-board-select-label { overflow:hidden; max-width:280px; text-overflow:ellipsis; white-space:nowrap; color:var(--text-muted); font-size:11px; }.cp-board-select-wrap select { min-width:190px; max-width:340px; border:0; background:transparent; color:var(--text); font:700 17px/1.25 inherit; outline:0; cursor:pointer; }.cp-board-select-wrap select option { background:#101318; color:var(--text); }.cp-icon-button { display:grid; place-items:center; width:34px; height:34px; border:1px solid rgba(148,163,184,.28); border-radius:8px; background:rgba(2,6,23,.34); color:var(--text-muted); cursor:pointer; transition:color .18s ease,border-color .18s ease,background .18s ease; }.cp-icon-button svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; }.cp-icon-button:hover,.cp-icon-button:focus-visible { border-color:#a78bfa; background:rgba(167,139,250,.13); color:#ddd6fe; outline:0; }
.cp-board-command-actions { display:flex; align-items:center; gap:10px; }.cp-view-switcher { display:inline-flex; gap:3px; padding:3px; border:1px solid rgba(148,163,184,.2); border-radius:8px; background:rgba(2,6,23,.4); }.cp-view-button { min-height:32px; padding:0 12px; border:0; border-radius:5px; background:transparent; color:var(--text-muted); font:600 12px inherit; cursor:pointer; transition:background .18s ease,color .18s ease; }.cp-view-button.active { background:rgba(167,139,250,.2); color:#ddd6fe; }.cp-view-button:focus-visible { outline:2px solid #a78bfa; outline-offset:1px; }
.cp-board-modal { width:min(540px,calc(100vw - 32px)); }.cp-board-modal .cp-modal-note { max-width:430px; line-height:1.45; }
.cp-board-epics { display:block; overflow:visible; padding:0 0 18px; }.cp-epic-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }.cp-epic-card { position:relative; overflow:hidden; display:grid; gap:15px; min-height:278px; padding:18px; border:1px solid rgba(167,139,250,.3); border-radius:13px; background:radial-gradient(circle at 100% 0,rgba(167,139,250,.14),transparent 33%),linear-gradient(135deg,rgba(15,23,42,.86),rgba(2,6,23,.54)); color:var(--text); text-align:left; cursor:pointer; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }.cp-epic-card:hover,.cp-epic-card.selected { border-color:#a78bfa; transform:translateY(-2px); box-shadow:0 16px 38px rgba(76,29,149,.18); }.cp-epic-card:focus-visible { outline:2px solid #a78bfa; outline-offset:3px; }.cp-epic-card::after { position:absolute; right:-55px; bottom:-70px; width:170px; height:170px; border:1px solid rgba(167,139,250,.14); border-radius:50%; content:""; }.cp-epic-card-head,.cp-epic-footer,.cp-epic-metrics { display:flex; align-items:center; justify-content:space-between; gap:10px; }.cp-epic-label { color:#c4b5fd; font:700 10px monospace; letter-spacing:.14em; }.cp-epic-card-title { display:grid; grid-template-columns:minmax(0,1fr) 70px; gap:16px; align-items:center; }.cp-epic-card h3 { margin:0; color:var(--text); font-size:18px; line-height:1.22; }.cp-epic-card p { display:-webkit-box; overflow:hidden; margin:7px 0 0; color:var(--text-muted); font-size:12px; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:2; }.cp-epic-progress { display:grid; width:66px; height:66px; place-items:center; border-radius:50%; background:conic-gradient(#a78bfa var(--cp-progress),rgba(148,163,184,.14) 0); }.cp-epic-progress::before { grid-area:1/1; width:54px; height:54px; border-radius:50%; background:#101318; content:""; }.cp-epic-progress span { z-index:1; grid-area:1/1; color:#ddd6fe; font:700 16px monospace; }.cp-epic-progress small { font-size:9px; }.cp-epic-metrics { justify-content:flex-start; padding:10px 0; border-top:1px solid rgba(148,163,184,.14); border-bottom:1px solid rgba(148,163,184,.14); color:var(--text-muted); font-size:11px; }.cp-epic-metrics span { padding-right:11px; border-right:1px solid rgba(148,163,184,.14); }.cp-epic-metrics span:last-child { border:0; }.cp-epic-metrics b { color:var(--text); font-family:monospace; }.cp-epic-metrics .is-blocked b { color:#fbbf24; }.cp-epic-preview { display:grid; gap:6px; min-height:59px; margin:0; padding:0; list-style:none; }.cp-epic-preview li { overflow:hidden; display:flex; align-items:center; gap:8px; color:var(--text-muted); font-size:11px; text-overflow:ellipsis; white-space:nowrap; }.cp-epic-no-tasks { color:#64748b !important; }.cp-epic-task-state { width:6px; height:6px; flex:0 0 6px; border-radius:50%; background:#64748b; }.cp-state-done { background:#4ade80; }.cp-state-in_progress,.cp-state-in_review { background:#a78bfa; }.cp-state-blocked { background:#fbbf24; }.cp-epic-footer { color:#a1a1aa; font:11px monospace; }.cp-epic-footer span:last-child { color:#c4b5fd; }.cp-epic-footer b { font-size:15px; font-weight:400; }.cp-epic-empty { display:grid; gap:10px; min-height:280px; place-items:center; align-content:center; padding:28px; border:1px dashed rgba(167,139,250,.4); border-radius:13px; text-align:center; background:radial-gradient(circle at 50% 0,rgba(124,58,237,.13),transparent 47%); }.cp-epic-empty h3 { max-width:430px; margin:0; color:var(--text); font-size:20px; }.cp-epic-empty p { max-width:470px; margin:0 0 7px; color:var(--text-muted); font-size:13px; line-height:1.5; }
@media (max-width:720px) { .cp-board-command { align-items:stretch; flex-direction:column; }.cp-board-select-wrap select { min-width:0; width:100%; }.cp-board-command-actions { justify-content:space-between; }.cp-epic-grid { grid-template-columns:1fr; }.cp-epic-card { min-height:250px; } }
@media (prefers-reduced-motion:reduce) { .cp-epic-card,.cp-icon-button,.cp-view-button { transition:none; } .cp-epic-card:hover { transform:none; } }

.cp-epic-scope { grid-column:1/-1; }.cp-epic-scope-metrics { display:flex; flex-wrap:wrap; gap:12px; margin:8px 0 11px; color:var(--text-muted); font-size:11px; }.cp-epic-scope-metrics b { color:#ddd6fe; font-family:monospace; }.cp-epic-scope ul { display:grid; gap:6px; margin:0; padding:0; list-style:none; }.cp-epic-scope li { display:flex; align-items:center; gap:7px; color:var(--text-muted); font-size:12px; }.cp-epic-scope li small { margin-left:auto; color:#71717a; text-transform:capitalize; }

/* Relay work drawer: a focused project record instead of a raw field dump. */
.cp-ticket-dialog {
  display:flex;
  flex-direction:column;
  width:min(1180px, calc(100vw - 56px));
  height:min(900px, calc(100vh - 48px));
  padding:0;
  overflow:hidden;
  border:1px solid rgba(124, 92, 255, .46);
  border-radius:18px;
  background:linear-gradient(150deg, #12151d 0%, #0c1016 58%, #101019 100%);
  box-shadow:0 32px 110px rgba(0,0,0,.72), 0 0 0 1px rgba(255,255,255,.025) inset;
}
.cp-ticket-dialog::before { background:rgba(0,0,0,.72); backdrop-filter:blur(7px); }
.cp-workdrawer-head { display:flex; align-items:center; justify-content:space-between; padding:20px 26px 0; }
.cp-workdrawer-ident { display:flex; align-items:center; gap:10px; }
.cp-workdrawer-ident code { color:#bcb3ff; font-size:11px; letter-spacing:.04em; }
.cp-status-pill { display:inline-flex; align-items:center; min-height:24px; padding:0 9px; border:1px solid rgba(148,163,184,.25); border-radius:999px; color:#b6c0cf; background:rgba(148,163,184,.08); font-size:11px; font-weight:700; text-transform:capitalize; }
.cp-status-in_progress { color:#a5b4fc; border-color:rgba(129,140,248,.45); background:rgba(99,102,241,.12); }.cp-status-done { color:#67e8a4; border-color:rgba(74,222,128,.42); background:rgba(34,197,94,.11); }.cp-status-blocked { color:#fda4af; border-color:rgba(251,113,133,.4); background:rgba(244,63,94,.1); }.cp-status-review { color:#fcd34d; border-color:rgba(250,204,21,.38); background:rgba(250,204,21,.09); }.cp-status-archived { color:#a1a1aa; border-color:rgba(161,161,170,.34); background:rgba(161,161,170,.08); }
.cp-workdrawer-title { display:flex; justify-content:space-between; gap:24px; padding:13px 26px 20px; border-bottom:1px solid rgba(148,163,184,.13); }.cp-workdrawer-title > div { max-width:790px; }.cp-workdrawer-title h3 { margin:0 0 9px; color:#f6f8fb; font-size:27px; line-height:1.14; letter-spacing:-.035em; }.cp-workdrawer-title p { margin:0; color:#a9b0be; font-size:14px; line-height:1.55; }.cp-edit-ticket { flex:0 0 auto; align-self:flex-start; }
.cp-pr-description-panel { margin:18px 26px 0; border:1px solid rgba(251,191,36,.34); border-radius:12px; background:linear-gradient(120deg,rgba(120,88,15,.16),rgba(15,23,42,.72)); }.cp-pr-description-toggle { width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px; border:0; border-radius:11px; padding:14px 15px; background:transparent; color:inherit; cursor:pointer; text-align:left; }.cp-pr-description-toggle:hover { background:rgba(251,191,36,.06); }.cp-pr-description-toggle > span > span,.cp-pr-description-toggle strong { display:block; }.cp-pr-description-toggle > span > span { color:#fcd34d; font-size:9px; font-weight:800; letter-spacing:.13em; }.cp-pr-description-toggle strong { margin-top:4px; color:#f8fafc; font-size:14px; }.cp-pr-description-toggle b { color:#fcd34d; font-size:11px; font-weight:700; }.cp-pr-description-content { padding:0 15px 15px; }.cp-pr-description-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:11px; color:#a9b0be; font-size:11px; line-height:1.4; }.cp-pr-description-panel .cp-pr-description { max-height:290px; margin:0; overflow:auto; padding:13px; border:1px solid rgba(251,191,36,.17); border-radius:8px; background:rgba(2,6,23,.62); color:#e5e7eb; font:11px/1.55 var(--font-mono, monospace); white-space:pre-wrap; }.cp-copy-pr-description { flex:0 0 auto; }
.cp-workdrawer-actions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; padding:13px 26px; border-bottom:1px solid rgba(148,163,184,.13); background:rgba(255,255,255,.017); }.cp-workdrawer-actions > span { flex:1; min-width:10px; }.cp-workdrawer-actions .btn { min-height:33px; padding:7px 12px; font-size:12px; }.cp-quick-action { border:0; background:transparent; color:#b7aaff; font:600 11px inherit; cursor:pointer; padding:7px 4px; white-space:nowrap; }.cp-quick-action:hover { color:#e1ddff; }
.cp-workdrawer-grid { display:grid; grid-template-columns:minmax(0,1.48fr) minmax(285px,.75fr); flex:1 1 auto; min-height:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }.cp-workdrawer-main { padding:20px 16px 40px 26px; display:grid; align-content:start; gap:13px; border-right:1px solid rgba(148,163,184,.12); }.cp-workdrawer-sidebar { padding:20px 26px 40px 16px; display:grid; align-content:start; gap:13px; }
.cp-detail-card { border:1px solid rgba(148,163,184,.17); border-radius:12px; background:rgba(3,7,16,.34); padding:15px; }.cp-section-title { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:13px; }.cp-section-kicker { display:block; color:#8477ff; font-size:9px; font-weight:800; letter-spacing:.12em; }.cp-section-title h4 { margin:4px 0 0; color:#edf0f5; font-size:14px; letter-spacing:-.01em; text-transform:none; }.cp-icon-text { border:0; padding:2px 0; background:transparent; color:#b6aaff; font:600 11px inherit; cursor:pointer; }
.cp-criteria-list { list-style:none; padding:0 !important; margin:0; display:grid; gap:9px; }.cp-criteria-list li { display:flex; align-items:flex-start; gap:8px; color:#cbd2dc; font-size:12px; }.cp-check { width:15px; height:15px; flex:0 0 15px; margin-top:1px; border:1px solid rgba(139,130,255,.52); border-radius:5px; background:rgba(124,92,255,.08); }.cp-muted-row { color:#7f8794 !important; }
.cp-detail-list { margin:0; display:grid; gap:0; }.cp-detail-list div { display:flex; justify-content:space-between; align-items:center; gap:14px; min-height:33px; border-bottom:1px solid rgba(148,163,184,.09); }.cp-detail-list div:last-child { border-bottom:0; }.cp-detail-list dt { color:#7f8794; font-size:11px; }.cp-detail-list dd { margin:0; color:#d5d9e1; font-size:11px; font-weight:600; text-align:right; }.cp-detail-list dd button { border:0; background:transparent; color:#b9b0ff; padding:0; font:inherit; cursor:pointer; }.cp-detail-priority { text-transform:capitalize; }
.cp-git-card { padding-bottom:13px; }.cp-git-list { margin:0; display:grid; gap:0; }.cp-git-list div { display:grid; grid-template-columns:80px minmax(0,1fr); gap:10px; align-items:center; min-height:31px; border-bottom:1px solid rgba(148,163,184,.09); }.cp-git-list div:last-child { border-bottom:0; }.cp-git-list dt { color:#7f8794; font-size:11px; }.cp-git-list dd { min-width:0; margin:0; color:#d5d9e1; font-size:11px; font-weight:600; text-align:right; }.cp-git-list code { display:block; overflow:hidden; color:#c5befd; font:10px/1.35 var(--font-mono, monospace); text-overflow:ellipsis; white-space:nowrap; }.cp-git-list time { color:#d5d9e1; font-size:11px; }.cp-git-subject,.cp-git-empty { margin:10px 0 0; color:#9da7b5; font-size:11px; line-height:1.45; }
.cp-proof-card { padding:9px; }.cp-proof-card .cp-section-title { padding:6px 6px 3px; margin-bottom:3px; }.cp-proof-action { width:100%; display:grid; grid-template-columns:27px minmax(0,1fr) 14px; align-items:center; gap:8px; border:0; border-radius:8px; background:transparent; padding:9px 7px; color:#e5e7eb; text-align:left; cursor:pointer; }.cp-proof-action:hover { background:rgba(124,92,255,.11); }.cp-proof-action > span { display:grid; place-items:center; width:25px; height:25px; border-radius:7px; background:rgba(124,92,255,.15); color:#c6beff; font-size:12px; }.cp-proof-action strong,.cp-proof-action small { display:block; }.cp-proof-action strong { font-size:11px; }.cp-proof-action small { margin-top:2px; color:#7f8794; font-size:10px; }.cp-proof-action b { color:#978bff; font-size:16px; font-weight:400; }
.cp-activity-card { padding-bottom:5px; }.cp-activity-feed { display:grid; gap:0; }.cp-activity-item { display:grid; grid-template-columns:13px minmax(0,1fr); gap:9px; padding:12px 0 11px; border-top:1px solid rgba(148,163,184,.1); }.cp-activity-dot { width:8px; height:8px; margin-top:4px; border-radius:50%; background:#8175ff; box-shadow:0 0 0 3px rgba(129,117,255,.12); }.cp-activity-passed .cp-activity-dot { background:#53d58a; box-shadow:0 0 0 3px rgba(83,213,138,.12); }.cp-activity-failed .cp-activity-dot { background:#fb7185; box-shadow:0 0 0 3px rgba(251,113,133,.12); }.cp-activity-evidence .cp-activity-dot { background:#38bdf8; box-shadow:0 0 0 3px rgba(56,189,248,.12); }.cp-activity-pr-description .cp-activity-dot { background:#fbbf24; box-shadow:0 0 0 3px rgba(251,191,36,.12); }.cp-activity-title { display:flex; justify-content:space-between; gap:12px; }.cp-activity-title strong { color:#e2e7ef; font-size:12px; }.cp-activity-title time { color:#707988; font-size:10px; white-space:nowrap; }.cp-activity-item p { margin:5px 0 0; color:#a7b0bc; font-size:12px; line-height:1.45; }.cp-activity-item pre { overflow:auto; margin:8px 0 0; padding:8px; border-radius:7px; background:rgba(0,0,0,.24); color:#aab3bf; font:10px/1.45 var(--font-mono, monospace); white-space:pre-wrap; }.cp-pr-description { max-height:360px; border:1px solid rgba(251,191,36,.22); background:rgba(15,23,42,.7)!important; color:#e5e7eb!important; font-size:11px!important; }.cp-copy-pr-description { margin-top:8px; font-size:11px; }.cp-activity-empty { padding:17px 5px 20px; text-align:center; }.cp-activity-empty strong { color:#cbd3df; font-size:12px; }.cp-activity-empty p { margin:5px 0 0; color:#7f8794; font-size:11px; }
.cp-epic-delivery { padding:15px; border:1px solid rgba(124,92,255,.25); border-radius:12px; background:linear-gradient(118deg,rgba(124,92,255,.11),rgba(3,7,16,.28)); }.cp-epic-child-list { display:grid; gap:3px; }.cp-epic-child-list button { width:100%; display:grid; grid-template-columns:10px minmax(0,1fr) auto; gap:8px; align-items:center; padding:8px; border:0; border-radius:7px; background:rgba(0,0,0,.17); color:#d5dae3; text-align:left; cursor:pointer; font-size:11px; }.cp-epic-child-list button:hover { background:rgba(124,92,255,.12); }.cp-epic-child-list small { color:#858d9b; }.cp-state-dot { width:7px; height:7px; border-radius:50%; background:#64748b; }.cp-state-done { background:#4ade80; }.cp-state-in_progress { background:#818cf8; }.cp-state-blocked { background:#fb7185; }
.cp-ticket-editor { width:min(720px, calc(100vw - 32px)); }.cp-form-grid-three { grid-template-columns:repeat(3,minmax(0,1fr)); }.cp-proof-modal { width:min(600px, calc(100vw - 32px)); }
@media (max-width:820px) { .cp-ticket-dialog { width:calc(100vw - 18px); height:calc(100vh - 18px); }.cp-workdrawer-title,.cp-workdrawer-head,.cp-workdrawer-actions { padding-left:16px; padding-right:16px; }.cp-workdrawer-title { display:block; }.cp-edit-ticket { margin-top:13px; }.cp-pr-description-panel { margin-left:16px; margin-right:16px; }.cp-workdrawer-grid { grid-template-columns:1fr; }.cp-workdrawer-main { padding:15px 16px 32px; border-right:0; border-bottom:1px solid rgba(148,163,184,.12); }.cp-workdrawer-sidebar { padding:15px 16px 32px; }.cp-form-grid-three { grid-template-columns:1fr 1fr; } }
@media (max-width:520px) { .cp-workdrawer-title h3 { font-size:22px; }.cp-workdrawer-actions > span { display:none; }.cp-workdrawer-actions { gap:6px; }.cp-workdrawer-actions .btn { flex:1; }.cp-quick-action { padding:5px 3px; }.cp-form-grid-three { grid-template-columns:1fr; }.cp-activity-title { display:block; }.cp-activity-title time { display:block; margin-top:3px; } }
#cp-ticket-edit-modal,#cp-validation-modal,#cp-evidence-modal { z-index:1002; }
.cp-file-picker { border:1px dashed rgba(148,163,184,.45); border-radius:10px; padding:14px; background:rgba(148,163,184,.06); cursor:pointer; }
.cp-file-picker.dragging,.cp-file-picker:focus-within { border-color:var(--accent); background:rgba(74,222,128,.08); }
.cp-file-picker input[type="file"] { width:100%; border:0; padding:0; background:transparent; }
.cp-file-picker small,.cp-file-selection { color:var(--text-muted); font-size:11px; overflow-wrap:anywhere; }
.cp-attachment-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; }
.cp-attachment { display:flex; gap:10px; align-items:center; min-width:0; padding:10px; border:1px solid var(--border); border-radius:9px; color:var(--text); text-decoration:none; background:rgba(148,163,184,.05); }
.cp-attachment:hover,.cp-attachment:focus-visible { border-color:var(--accent); }
.cp-attachment img,.cp-file-icon { width:52px; height:52px; flex:none; border-radius:6px; object-fit:cover; background:rgba(148,163,184,.12); }
.cp-file-icon { display:grid; place-items:center; font-size:24px; }
.cp-attachment span:last-child { min-width:0; display:grid; gap:4px; }
.cp-attachment strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
.cp-attachment small { color:var(--text-muted); font-size:10px; }

/* Relay uses the available viewport while other setup pages retain their reading width. */
body:has(#section-relay.active) .setup-container,
body:has(#section-relay.active) .header-inner { max-width:1760px; }
body:has(#section-relay.active) main { padding-inline:clamp(18px,2.2vw,40px); }
#section-relay { min-width:0; }
#section-relay .cp-header { align-items:center; gap:20px; margin:0 0 12px; padding:10px 0 14px; }
#section-relay .cp-header h2 { margin:0; font-size:clamp(26px,2.4vw,34px); line-height:1.1; }
#section-relay .cp-header p { margin:4px 0 0; font-size:13px; }
#section-relay .cp-header p strong { color:var(--accent); font-weight:700; }
#section-relay .cp-actions { flex:none; justify-content:flex-end; }
#section-relay .cp-perspective { float:right; justify-content:flex-end; gap:10px; width:max-content; min-height:50px; margin:0 0 10px 12px; padding:5px 8px 5px 14px; border-color:rgba(148,163,184,.16); background:#151820; }
.cp-perspective-title { color:#cbd5e1; font-size:12px; font-weight:600; white-space:nowrap; }
#section-relay .cp-board-command { min-height:50px; margin:0 0 10px; padding:6px 10px 6px 14px; border-color:rgba(148,163,184,.2); background:#151820; box-shadow:none; }
#section-relay .cp-board-select-wrap { display:flex; gap:8px; min-width:0; }
#section-relay .cp-board-select-wrap select { min-width:0; width:min(22vw,290px); padding:7px 4px; font-size:16px; }
#section-relay .cp-board-kicker,#section-relay .cp-board-select-label { display:none; }
#section-relay .cp-icon-button { width:38px; height:38px; flex:none; }
#section-relay .cp-view-button { min-height:36px; padding:0 14px; font-size:13px; }
#section-relay .cp-board-command-actions .btn { min-height:38px; }
#section-relay .cp-project-bar { clear:both; min-height:52px; margin:0 0 12px; padding:8px 12px; border-color:rgba(148,163,184,.17); background:rgba(148,163,184,.045); }
#section-relay .cp-project-mark { width:32px; height:32px; }
#section-relay .cp-project-bar p { margin-top:1px; }
#section-relay .cp-project-actions .btn { padding:6px 11px; font-size:12px; }
#section-relay .cp-metrics { padding-bottom:8px; }
#section-relay .cp-metric { padding-block:4px; }
#section-relay .cp-toolbar { gap:4px; padding:8px 0; }
#section-relay .cp-toolbar > span { display:none; }
#section-relay .cp-board { grid-template-columns:repeat(var(--cp-column-count,6),minmax(188px,1fr)); overflow-x:auto; gap:12px; padding-top:12px; }
#section-relay .cp-column { min-width:0; padding:11px; }
#section-relay .cp-ticket { min-height:0; }

/* Planning stays readable at desktop widths and scrolls inside the dialog. */
#cp-planner-modal { align-items:center; overflow:hidden; padding:16px; }
.cp-planner-modal { width:min(1080px,calc(100vw - 32px)); max-width:none; max-height:calc(100dvh - 32px); overflow:auto; gap:17px; padding:26px 30px 0; border-color:rgba(167,139,250,.32); scrollbar-gutter:stable; }
.cp-workspace-overview,.cp-workspace-editor,#cp-ticket-modal .cp-ticket-modal,#cp-comment-modal .cp-comment-modal { max-width:none; }
.cp-planner-modal .cp-modal-heading { align-items:center; }
.cp-planner-modal h3 { font-size:26px; }
.cp-planner-modal .cp-eyebrow { margin-bottom:2px; }
.cp-planner-modal .cp-close { width:42px; height:42px; border-radius:9px; }
.cp-planner-intro { display:block; margin:0; padding:10px 14px; font-size:13px; line-height:1.5; }
.cp-planner-modal label { color:#e2e8f0; font-size:13px; }
.cp-planner-modal small { font-size:12px; }
.cp-planner-modal textarea,.cp-planner-modal select { font-size:14px; }
.cp-planner-primary textarea { min-height:80px; }
.cp-planner-choice-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }
.cp-planner-choice { min-height:88px; gap:4px!important; padding:12px 14px; }
.cp-planner-choice b { font-size:13px; }
.cp-planner-choice small { font-size:11px; }
.cp-planner-choice:focus-within,.cp-planner-toggle-row label:focus-within span { outline:2px solid #c4b5fd; outline-offset:2px; }
.cp-planner-options-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.cp-planner-options-grid .cp-planner-section { align-content:start; padding:15px; border:1px solid rgba(148,163,184,.18); border-radius:11px; background:rgba(2,6,23,.2); }
.cp-planner-options-grid .cp-planner-section-heading { align-items:flex-start; flex-direction:column; gap:2px; }
.cp-planner-details { border:1px solid rgba(148,163,184,.24); border-radius:11px; background:rgba(2,6,23,.18); }
.cp-planner-details summary { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:68px; padding:12px 16px; cursor:pointer; list-style:none; }
.cp-planner-details summary::-webkit-details-marker { display:none; }
.cp-planner-details summary:hover { background:rgba(167,139,250,.06); }
.cp-planner-details summary:focus-visible { outline:2px solid #c4b5fd; outline-offset:2px; border-radius:11px; }
.cp-planner-details summary strong,.cp-planner-details summary small { display:block; }
.cp-planner-details summary strong { color:#f8fafc; font-size:14px; }
.cp-planner-details summary small { margin-top:2px; }
.cp-planner-details-caret { color:#c4b5fd; font-size:20px; line-height:1; transition:transform .2s ease; }
.cp-planner-details[open] .cp-planner-details-caret { transform:rotate(180deg); }
.cp-planner-details-body { display:grid; gap:18px; padding:4px 16px 16px; }
.cp-planner-toggle-row span { min-height:37px; font-size:12px; }
.cp-planner-footer { position:sticky; bottom:0; z-index:2; display:grid; gap:10px; margin:0 -30px; padding:12px 30px 14px; border-top:1px solid rgba(148,163,184,.2); background:#151820; }
.cp-planner-footnote { padding:0; border:0; background:none; color:#cbd5e1; font-size:12px; line-height:1.4; }
.cp-planner-footer .cp-modal-actions { margin:0; }
.cp-planner-submit { color:#fff; background:#6d28d9; }

/* File input is the full keyboard and pointer target, with a custom visual surface. */
.cp-file-picker { position:relative; display:flex!important; align-items:center; gap:12px!important; min-height:88px; padding:14px 16px; border:1px dashed rgba(167,139,250,.55); border-radius:12px; background:rgba(139,92,246,.065); transition:border-color .2s ease,background .2s ease; }
.cp-file-picker:hover,.cp-file-picker.dragging,.cp-file-picker:focus-within { border-color:#c4b5fd; background:rgba(139,92,246,.14); }
.cp-file-picker:focus-within { outline:2px solid #c4b5fd; outline-offset:2px; }
.cp-file-picker input[type="file"] { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.cp-file-picker-icon { display:grid; flex:none; place-items:center; width:42px; height:42px; border:1px solid rgba(167,139,250,.35); border-radius:10px; background:rgba(139,92,246,.15); color:#ddd6fe; font-size:23px; line-height:1; }
.cp-file-picker-copy { display:grid; min-width:0; gap:2px; }
.cp-file-picker-copy strong { color:#f8fafc; font-size:13px; }
.cp-file-picker-copy small { color:#b8bfcc; font-size:11px; }
.cp-file-selection { overflow:hidden; max-width:100%; color:#ddd6fe; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.cp-file-picker-action { flex:none; margin-left:auto; padding:7px 11px; border:1px solid rgba(167,139,250,.48); border-radius:8px; color:#ede9fe; background:rgba(139,92,246,.17); font-size:12px; font-weight:700; white-space:nowrap; }
#cp-ticket-modal,#cp-comment-modal { padding:16px; }
#cp-ticket-modal .cp-ticket-modal,#cp-comment-modal .cp-comment-modal { width:min(650px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; padding:24px 26px 0; scrollbar-gutter:stable; }
#cp-ticket-modal .cp-ticket-modal { gap:12px; }
#cp-ticket-modal .cp-modal-actions,#cp-comment-modal .cp-modal-actions { position:sticky; bottom:0; z-index:2; margin:0 -26px; padding:14px 26px; border-top:1px solid rgba(148,163,184,.2); background:#18181b; }

@media(max-width:900px) {
  #section-relay .cp-header { align-items:flex-start; }
  #section-relay .cp-perspective { float:none; width:100%; justify-content:space-between; margin:0 0 10px; }
  #section-relay .cp-board-command { flex-wrap:wrap; }
  #section-relay .cp-board-select-wrap select { width:min(44vw,290px); }
  .cp-planner-choice-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media(max-width:660px) {
  body:has(#section-relay.active) main { padding-inline:16px; }
  #section-relay .cp-header { display:grid; }
  #section-relay .cp-actions { justify-content:flex-start; margin:0; }
  #section-relay .cp-board-command { align-items:stretch; }
  #section-relay .cp-board-command-actions { flex-wrap:wrap; }
  #section-relay .cp-board-select-wrap select { width:100%; }
  #section-relay .cp-project-bar { flex-wrap:wrap; }
  #section-relay .cp-project-actions { width:100%; margin:4px 0 0; }
  .cp-planner-modal { padding:20px 18px 0; }
  .cp-planner-footer { margin-inline:-18px; padding-inline:18px; }
  .cp-planner-options-grid,.cp-planner-two-column { grid-template-columns:1fr; }
  .cp-planner-choice-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cp-file-picker-action { display:none; }
  #cp-ticket-modal .cp-ticket-modal,#cp-comment-modal .cp-comment-modal { padding:20px 18px 0; }
  #cp-ticket-modal .cp-modal-actions,#cp-comment-modal .cp-modal-actions { margin-inline:-18px; padding-inline:18px; }
}
@media(prefers-reduced-motion:reduce) {
  .cp-file-picker,.cp-planner-details-caret { transition:none; }
}

/* Keep large ticket briefs and activity inside the drawer's scrollable body. */
.cp-workdrawer-title { align-items:center; padding-bottom:15px; }
.cp-workdrawer-title h3 { min-width:0; margin:0; overflow-wrap:anywhere; }
.cp-workdrawer-main .cp-pr-description-panel { margin:0; }
.cp-description-card p { margin:0; color:#b9c3d1; font-size:13px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; }
.cp-description-details summary { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; cursor:pointer; list-style:none; }
.cp-description-details summary::-webkit-details-marker { display:none; }
.cp-description-details summary:focus-visible { outline:2px solid #b7aaff; outline-offset:4px; border-radius:4px; }
.cp-description-details summary > span { display:-webkit-box; min-width:0; overflow:hidden; color:#b9c3d1; font-size:13px; line-height:1.6; overflow-wrap:anywhere; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.cp-description-details summary strong { flex:none; color:#b7aaff; font-size:12px; font-weight:700; white-space:nowrap; }
.cp-description-details[open] summary { margin-bottom:12px; }
.cp-description-details[open] summary > span { display:none; }
.cp-description-details[open] summary strong { font-size:0; }
.cp-description-details[open] summary strong::after { content:"Hide full description"; font-size:12px; }
.cp-criteria-list li { display:block; }
.cp-criterion { display:flex; align-items:flex-start; gap:10px; min-height:38px; padding:7px 9px; border:1px solid transparent; border-radius:8px; color:#d8deea; cursor:pointer; font-size:12px; line-height:1.5; }
.cp-criterion:hover { border-color:rgba(129,117,255,.26); background:rgba(129,117,255,.07); }
.cp-criterion:focus-within { outline:2px solid #b7aaff; outline-offset:2px; }
.cp-criterion input { width:17px; height:17px; flex:none; margin:1px 0 0; accent-color:#8175ff; cursor:pointer; }
.cp-criterion span { overflow-wrap:anywhere; }
.cp-criterion.checked span { color:#8f9aaa; text-decoration:line-through; }
.cp-activity-item > div { min-width:0; }
.cp-activity-copy { display:grid; gap:8px; margin-top:7px; color:#b4becb; overflow-wrap:anywhere; }
.cp-activity-copy p { margin:0; font-size:12px; line-height:1.55; }
.cp-activity-copy ul,.cp-activity-copy ol { margin:0 0 0 17px; padding:0; color:#b4becb; font-size:12px; line-height:1.55; }
.cp-activity-copy li + li { margin-top:4px; }
.cp-activity-details { margin-top:7px; }
.cp-activity-details summary { display:grid; gap:5px; padding:9px 11px; border:1px solid rgba(148,163,184,.16); border-radius:8px; background:rgba(148,163,184,.045); cursor:pointer; list-style:none; }
.cp-activity-details summary::-webkit-details-marker { display:none; }
.cp-activity-details summary:focus-visible { outline:2px solid #b7aaff; outline-offset:2px; }
.cp-activity-details summary span { display:-webkit-box; overflow:hidden; color:#aeb9c7; font-size:12px; line-height:1.5; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.cp-activity-details summary strong { color:#b7aaff; font-size:11px; }
.cp-activity-details[open] summary span { display:none; }
.cp-activity-details[open] summary strong { font-size:0; }
.cp-activity-details[open] summary strong::after { content:"Hide update"; font-size:11px; }
.cp-activity-details[open] summary { display:flex; justify-content:flex-end; padding:0; border:0; background:none; }
.cp-git-list a { display:inline-flex; align-items:center; gap:5px; max-width:100%; color:#c5befd; text-decoration:none; }
.cp-git-list a code { min-width:0; }
.cp-git-list a span { flex:none; font-size:12px; }
.cp-git-list a:hover,.cp-git-list a:focus-visible { color:#eee9ff; text-decoration:underline; text-underline-offset:3px; }
.cp-git-list a:focus-visible { outline:2px solid #b7aaff; outline-offset:3px; border-radius:3px; }
.cp-activity-copy h5 { margin:4px 0 0; color:#e6e0ff; font-size:12px; line-height:1.45; }
.cp-activity-copy strong { color:#e1e6ef; font-weight:700; }
.cp-activity-copy a { color:#b7aaff; text-decoration:underline; text-underline-offset:2px; }
.cp-activity-copy code { padding:1px 4px; border-radius:4px; background:rgba(148,163,184,.12); color:#ded8ff; font:11px/1.5 var(--font-mono,monospace); overflow-wrap:anywhere; }
.cp-activity-copy pre code { padding:0; background:none; color:inherit; }
.cp-activity-field { display:grid; gap:4px; padding:9px 11px; border-left:2px solid #8175ff; border-radius:0 7px 7px 0; background:rgba(129,117,255,.055); }
.cp-activity-field > strong { color:#c7bcff; font-size:11px; }
.cp-activity-field p { margin:0; }

/* Relay status transition sheet. */
.cp-transition-sheet { width:min(740px, calc(100vw - 32px)); display:grid; gap:24px; padding:30px; border:1px solid rgba(127,115,255,.4); border-radius:18px; background:linear-gradient(145deg,#171b24,#10131a); box-shadow:0 30px 90px rgba(0,0,0,.58); }
.cp-transition-heading { align-items:flex-start; margin:0; }.cp-transition-heading h3 { margin:5px 0 8px; color:#f7f8fb; font-size:28px; line-height:1.1; letter-spacing:-.035em; }.cp-transition-ticket { margin:0; color:#aeb6c4; font-size:14px; line-height:1.45; }
.cp-transition-path { display:grid; grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr); align-items:center; gap:10px; }.cp-transition-state { min-height:118px; padding:18px; border:1px solid rgba(148,163,184,.2); border-radius:13px; background:rgba(5,9,18,.42); }.cp-transition-state > span { display:block; margin-bottom:8px; color:#8290a2; font-size:10px; font-weight:800; letter-spacing:.14em; }.cp-transition-state strong { display:block; color:#edf1f7; font-size:21px; letter-spacing:-.025em; text-transform:capitalize; }.cp-transition-state small { display:block; margin-top:8px; color:#8f99a8; font-size:11px; line-height:1.4; }.cp-transition-target { border-color:rgba(74,222,128,.42); background:linear-gradient(135deg,rgba(34,197,94,.13),rgba(34,197,94,.04)); }.cp-transition-target > span,.cp-transition-target strong { color:#65df98; }.cp-transition-arrow { display:flex; align-items:center; gap:4px; color:#958bff; }.cp-transition-arrow i { flex:1; height:1px; background:linear-gradient(90deg,rgba(149,139,255,.15),rgba(149,139,255,.9)); }.cp-transition-arrow b { font-size:24px; font-weight:400; }
.cp-transition-note { padding:17px; border:1px solid rgba(148,163,184,.18); border-radius:13px; background:rgba(4,8,16,.28); }.cp-transition-note-head { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; margin-bottom:12px; }.cp-transition-note label { display:block; color:#eef1f7; font-size:14px; font-weight:700; }.cp-transition-note p { margin:5px 0 0; color:#909aaa; font-size:12px; line-height:1.45; }.cp-transition-note-head > span { padding:3px 8px; border-radius:999px; background:rgba(148,163,184,.11); color:#9da7b5; font-size:10px; }.cp-transition-note textarea { box-sizing:border-box; width:100%; min-height:122px; border:1px solid rgba(148,163,184,.28); border-radius:10px; background:#0a0d13; color:#e2e7ee; padding:13px 14px; font:13px/1.55 ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; letter-spacing:0; resize:vertical; }.cp-transition-note textarea::placeholder { color:#707987; }.cp-transition-note textarea:focus { outline:0; border-color:#8d81ff; box-shadow:0 0 0 3px rgba(141,129,255,.16); }
.cp-transition-mode { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0; padding:0; border:0; }.cp-transition-mode legend { grid-column:1/-1; padding:0 0 2px; color:#b5bfcb; font-size:12px; font-weight:700; }.cp-transition-option { display:flex; align-items:center; gap:11px; min-height:70px; padding:12px; border:1px solid rgba(148,163,184,.2); border-radius:11px; background:rgba(5,9,18,.3); cursor:pointer; transition:border-color .16s ease, background .16s ease; }.cp-transition-option input { position:absolute; opacity:0; pointer-events:none; }.cp-transition-option:hover { border-color:rgba(150,139,255,.52); }.cp-transition-option.active { border-color:rgba(131,119,255,.75); background:rgba(113,99,255,.11); }.cp-transition-option-mark { display:grid; place-items:center; width:28px; height:28px; flex:0 0 28px; border-radius:8px; background:rgba(148,163,184,.11); color:#b7c0cb; font-size:13px; }.cp-transition-option.active .cp-transition-option-mark { background:rgba(126,111,255,.28); color:#d8d3ff; }.cp-transition-option strong,.cp-transition-option small { display:block; }.cp-transition-option strong { color:#e5e9f0; font-size:12px; }.cp-transition-option small { margin-top:4px; color:#8e98a6; font-size:10px; line-height:1.35; }.cp-transition-actions { padding-top:2px; }.cp-transition-actions .btn-primary { min-width:154px; display:inline-flex; align-items:center; justify-content:center; gap:12px; }
@media(max-width:580px){ .cp-transition-sheet { padding:21px; gap:18px; }.cp-transition-heading h3 { font-size:24px; }.cp-transition-path { grid-template-columns:1fr; gap:7px; }.cp-transition-arrow { justify-content:center; transform:rotate(90deg); height:27px; }.cp-transition-mode { grid-template-columns:1fr; }.cp-transition-actions { display:grid; grid-template-columns:1fr 1.4fr; }.cp-transition-actions .btn:first-child { grid-column:1/-1; } }