/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 18px; border-radius:var(--radius-md); font-size:13px; font-weight:500; border:none; text-decoration:none; line-height:normal; transition: background .15s, transform .05s; }
.btn svg, .btn .btn-icon { flex-shrink:0; width:16px; height:16px; }
.btn.has-icon { padding-left:16px; padding-right:16px; gap:8px; }
.btn.has-icon .btn-icon { margin-right:0; }
.btn:active { transform: translateY(1px); }
.btn-secondary { background:var(--surface-card); color:var(--ink); border:1px solid var(--hairline); }
.btn-secondary:hover { background:var(--surface-soft); color:var(--ink); }
.btn-primary { background:var(--primary); color:var(--on-primary); }
.btn-primary:hover { background:var(--primary-active); }
.btn-danger { background:rgba(239,68,68,0.15); color:var(--error); border:1px solid rgba(239,68,68,0.3); }
.btn-danger:hover { background:rgba(239,68,68,0.25); }
.btn-ghost { background:transparent; color:var(--muted); }
.btn-ghost:hover { color:var(--ink); }
.btn-sm { padding:6px 12px; font-size:12px; }
.btn-xs { padding:4px 8px; font-size:11px; }

/* Cards */
.card { background:var(--surface-card); border:1px solid var(--hairline); border-radius:var(--radius-lg); padding:24px; }
.card-dark { background:var(--surface-dark); color:var(--on-dark); border:1px solid var(--surface-dark-elevated); border-radius:var(--radius-lg); padding:24px; }
.card-coral { background:var(--primary); color:var(--on-primary); border-radius:var(--radius-lg); padding:24px; }
.card-coral .card-title { color:var(--on-primary); }

/* Status pills */
.status-pill { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:500; text-transform:uppercase; letter-spacing:0.5px; }
.status-pill::before { content:""; width:6px; height:6px; border-radius:50%; display:inline-block; }
.status-running { background:rgba(34,197,94,0.12); color:#16a34a; }
.status-running::before { background:#16a34a; }
.status-stopped { background:rgba(148,163,184,0.12); color:var(--muted); }
.status-stopped::before { background:var(--muted); }
.status-error { background:rgba(239,68,68,0.12); color:var(--error); }
.status-error::before { background:var(--error); }
.status-deploying { background:rgba(245,158,11,0.12); color:#d97706; }
.status-deploying::before { background:#d97706; }

/* Tags / badges */
.tag { display:inline-block; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:500; background:var(--surface-soft); color:var(--muted); border:1px solid var(--hairline); }
.badge-pill { display:inline-block; padding:4px 12px; border-radius:999px; font-size:12px; font-weight:500; background:var(--surface-card); color:var(--ink); border:1px solid var(--hairline); }
.badge-coral { display:inline-block; padding:4px 12px; border-radius:999px; font-size:12px; font-weight:500; background:var(--primary); color:var(--on-primary); text-transform:uppercase; letter-spacing:1px; }

/* Forms */
.form-row { display:flex; gap:12px; flex-wrap:wrap; align-items:end; margin-bottom:12px; }
.form-col { display:flex; flex-direction:column; gap:4px; flex:1; min-width:0; }
.form-col label { font-size:11px; font-weight:500; color:var(--muted); text-transform:uppercase; letter-spacing:0.8px; }
.input, .select, .textarea { font-family:var(--font-body); background:var(--canvas); color:var(--ink); border:1px solid var(--hairline); border-radius:var(--radius-md); padding:10px 14px; font-size:14px; width:100%; }
.input:focus, .select:focus, .textarea:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(249,115,22,0.18); }
.textarea { min-height:80px; resize:vertical; }

/* Select dropdowns: consistent padding, breathing room for arrow, hover/focus colors */
select.input, select.select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  cursor: pointer;
}
select.input option, select.select option {
  background: var(--surface-soft);
  color: var(--ink);
  padding: 8px 12px;
}
select.input:focus, select.select:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f97316' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
a[href].btn-secondary { border:1px solid var(--hairline); color:var(--ink); }
a[href].btn-secondary:hover { background:var(--surface-cream-strong); }

.projects-list-card { padding:0; }
.projects-table { display:table; }
.project-cards { display:none; }

.project-card {
  background: var(--surface-card);
  border: 1px solid var(--hairline);
  border-radius: var(--app-radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.project-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.project-card-name {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.project-card-name .label,
.project-card-row .label {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.project-card-name .value.name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
  word-break: break-word;
}
.project-card-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
  background: var(--surface-soft);
  border: 1px solid var(--hairline);
  flex-shrink: 0;
  white-space: nowrap;
}
.project-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
}
.project-card-row .value {
  font-size: 14px;
  color: var(--ink);
  text-align: right;
  word-break: break-word;
  max-width: 60%;
}
.project-card-row .value.repo {
  color: var(--accent-teal, #2dd4bf);
}
.project-card-actions {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.project-card-actions .btn {
  flex: 1;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 12px;
}
.project-card-actions .btn-danger {
  background: rgba(239, 68, 68, 0.18);
  color: var(--error);
  border: 1px solid rgba(239, 68, 68, 0.35);
}

@media (max-width: 768px) {
  .projects-table { display:none !important; }
  .project-cards { display:flex; flex-direction:column; gap:16px; }
  .projects-list-card { background: transparent; border: none; border-radius: 0; padding: 0; }
  .projects-list-card > .empty-state,
  .projects-list-card > div[style*="text-align:center"] { background: var(--surface-card); border: 1px solid var(--hairline); border-radius: var(--app-radius); }
}

/* Tables */
.table { width:100%; border-collapse:collapse; font-size:13px; }
.table th, .table td { padding:10px 12px; text-align:left; border-bottom:1px solid var(--hairline); }
.table th { font-weight:500; color:var(--ink); font-size:11px; letter-spacing:1px; text-transform:uppercase; }
.table tr:hover td { background:var(--surface-soft); }
.table-dark th, .table-dark td { border-bottom:1px solid var(--surface-dark-elevated); }
.table-dark tr:hover td { background:var(--surface-dark-soft); }

/* Mobile: table becomes card list (skip projects-table, which has its own project-card layout) */
@media (max-width: 768px) {
  .table:not(.projects-table), .table:not(.projects-table) thead, .table:not(.projects-table) tbody, .table:not(.projects-table) th, .table:not(.projects-table) td, .table:not(.projects-table) tr { display:block; }
  .table:not(.projects-table) thead { display:none; }
  .table:not(.projects-table) tr { margin-bottom:16px; background:var(--surface-card); border:1px solid var(--hairline); border-radius:var(--radius-lg); padding:16px; }
  .table:not(.projects-table) td { border:none; padding:6px 0; font-size:14px; display:flex; justify-content:space-between; gap:8px; }
  .table:not(.projects-table) td::before { content:attr(data-label); font-weight:500; font-size:11px; text-transform:uppercase; letter-spacing:0.5px; color:var(--muted); }
  .table:not(.projects-table) td:last-child { justify-content:flex-start; flex-wrap:wrap; gap:6px; padding-top:8px; border-top:1px solid var(--hairline); margin-top:4px; }
  .table:not(.projects-table) td:last-child::before { display:none; }
  .table:not(.projects-table) td strong { font-size:15px; }
  .table:not(.projects-table) td .tag { margin-top:4px; }
}

/* Nav */
.nav-bar { display:flex; align-items:center; justify-content:space-between; padding:0 24px; height:64px; background:var(--surface-soft); border-bottom:1px solid var(--hairline); position:sticky; top:0; z-index:50; }
.nav-brand { display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:22px; color:var(--ink); }
.nav-brand .brand-text span { color:var(--primary); }
.nav-links { display:flex; gap:18px; align-items:baseline; }
.nav-link { color:var(--muted); text-decoration:none; font-size:13px; font-weight:500; letter-spacing:0.5px; padding:6px 0; display:flex; align-items:baseline; gap:6px; }
.nav-link svg { width:16px; height:16px; fill:currentColor; flex-shrink:0; position:relative; top:2px; }
.nav-link:hover, .nav-link-active { color:var(--ink); }

/* Preset theme card previews — theme-aware so light mode isn’t dark-only */
.preset-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; margin-bottom:24px; }
.preset-card { background:var(--surface-card); border:2px solid var(--hairline); border-radius:var(--radius-lg); padding:14px; cursor:pointer; transition:border-color .15s, box-shadow .15s; }
.preset-card:hover { border-color:var(--primary); }

/* Settings sub-page spacing: desktop shows all sections stacked, needs vertical gaps */
.settings-view > .card,
.settings-view > .grid { margin-bottom:24px; }
.settings-view > .card:last-child,
.settings-view > .grid:last-child { margin-bottom:0; }
.settings-view + .settings-view { margin-top:24px; }
.preset-preview {
  height:70px; border-radius:var(--radius-md); position:relative; overflow:hidden; margin-bottom:12px;
  border:1px solid var(--hairline); background:var(--canvas);
}
.preset-preview .pp-bar { position:absolute; left:12px; height:10px; border-radius:999px; }
.preset-preview .pp-bar-a { top:12px; right:40%; background:var(--ink); }
.preset-preview .pp-bar-b { top:28px; right:55%; background:var(--muted); }
.preset-preview .pp-accent { position:absolute; bottom:12px; right:12px; width:38px; height:22px; border-radius:var(--radius-md); background:var(--primary); }

/* Per-preset preview palettes — dark (default) and light variants */
.preset-preview[data-preset="mono"] { background:#0a0a0a; border-color:#3a3a3a; }
.preset-preview[data-preset="mono"] .pp-bar-a { background:#f5f5f5; }
.preset-preview[data-preset="mono"] .pp-bar-b { background:#757575; }
.preset-preview[data-preset="mono"] .pp-accent { background:#e5e5e5; }
html[data-theme="light"] .preset-preview[data-preset="mono"] { background:#f4f4f4; border-color:#b8b8b8; }
html[data-theme="light"] .preset-preview[data-preset="mono"] .pp-bar-a { background:#111111; }
html[data-theme="light"] .preset-preview[data-preset="mono"] .pp-bar-b { background:#595959; }
html[data-theme="light"] .preset-preview[data-preset="mono"] .pp-accent { background:#111111; }

.preset-preview[data-preset="clay"] { background:#241f1d; border-color:#4a423e; }
.preset-preview[data-preset="clay"] .pp-bar-a { background:#faf9f5; }
.preset-preview[data-preset="clay"] .pp-bar-b { background:#8a817a; }
.preset-preview[data-preset="clay"] .pp-accent { background:#fb923c; }
html[data-theme="light"] .preset-preview[data-preset="clay"] { background:#f6f4f1; border-color:#c4b5a5; }
html[data-theme="light"] .preset-preview[data-preset="clay"] .pp-bar-a { background:#1a1614; }
html[data-theme="light"] .preset-preview[data-preset="clay"] .pp-bar-b { background:#7d7873; }
html[data-theme="light"] .preset-preview[data-preset="clay"] .pp-accent { background:#c2410c; }

.preset-preview[data-preset="obsidian"] { background:#181818; border-color:#333333; }
.preset-preview[data-preset="obsidian"] .pp-bar-a { background:#fafafa; }
.preset-preview[data-preset="obsidian"] .pp-bar-b { background:#6e6e6e; }
.preset-preview[data-preset="obsidian"] .pp-accent { background:#f97316; }
html[data-theme="light"] .preset-preview[data-preset="obsidian"] { background:#f2f2f2; border-color:#a3a3a3; }
html[data-theme="light"] .preset-preview[data-preset="obsidian"] .pp-bar-a { background:#171717; }
html[data-theme="light"] .preset-preview[data-preset="obsidian"] .pp-bar-b { background:#6e6e6e; }
html[data-theme="light"] .preset-preview[data-preset="obsidian"] .pp-accent { background:#c2410c; }

.preset-preview[data-preset="ember"] { background:#160c0c; border-color:#4d3330; }
.preset-preview[data-preset="ember"] .pp-bar-a { background:#ffffff; }
.preset-preview[data-preset="ember"] .pp-bar-b { background:#a07c71; }
.preset-preview[data-preset="ember"] .pp-accent { background:#fb923c; }
html[data-theme="light"] .preset-preview[data-preset="ember"] { background:#fff5f2; border-color:#eac4b8; }
html[data-theme="light"] .preset-preview[data-preset="ember"] .pp-bar-a { background:#1f0f0c; }
html[data-theme="light"] .preset-preview[data-preset="ember"] .pp-bar-b { background:#7a5a50; }
html[data-theme="light"] .preset-preview[data-preset="ember"] .pp-accent { background:#c2410c; }

.preset-preview[data-preset="terminal"] { background:#030703; border-color:#1a3d1a; }
.preset-preview[data-preset="terminal"] .pp-bar-a { background:#e2fbe2; }
.preset-preview[data-preset="terminal"] .pp-bar-b { background:#22c55e; }
.preset-preview[data-preset="terminal"] .pp-accent { background:#22c55e; }
html[data-theme="light"] .preset-preview[data-preset="terminal"] { background:#f0fdf4; border-color:#4ade80; }
html[data-theme="light"] .preset-preview[data-preset="terminal"] .pp-bar-a { background:#052e16; }
html[data-theme="light"] .preset-preview[data-preset="terminal"] .pp-bar-b { background:#3f6212; }
html[data-theme="light"] .preset-preview[data-preset="terminal"] .pp-accent { background:#15803d; }

.preset-preview[data-preset="slate"] { background:#0b101a; border-color:#33425c; }
.preset-preview[data-preset="slate"] .pp-bar-a { background:#ffffff; }
.preset-preview[data-preset="slate"] .pp-bar-b { background:#6d819c; }
.preset-preview[data-preset="slate"] .pp-accent { background:#fb923c; }
html[data-theme="light"] .preset-preview[data-preset="slate"] { background:#f5f7fa; border-color:#c8ced6; }
html[data-theme="light"] .preset-preview[data-preset="slate"] .pp-bar-a { background:#080d15; }
html[data-theme="light"] .preset-preview[data-preset="slate"] .pp-bar-b { background:#536079; }
html[data-theme="light"] .preset-preview[data-preset="slate"] .pp-accent { background:#c2410c; }

@media (max-width:768px){
  .preset-grid { grid-template-columns:1fr !important; }
}

/* Settings: single stacked page on all screen sizes; no bottom sheet, no sub-views */
.settings-home { display:block; }
.settings-view { display:block; }
.settings-view-header, .settings-sheet { display:none; }

@media (max-width:768px){
  .settings-view { display:block !important; }
  .settings-view-header, .settings-sheet { display:none !important; }
}

.risk-badge { display:inline-block; padding:3px 8px; border-radius:var(--radius-sm); font-size:11px; font-weight:700; text-transform:uppercase; }
.risk-badge.low { background:rgba(34,197,94,0.12); color:var(--success); }
.risk-badge.high { background:rgba(239,68,68,0.12); color:var(--error); }

/* Typography helpers */
.hero-title { font-family:var(--ui-font-family,var(--font-display)); font-size:3.45rem; font-weight:var(--ui-font-weight,400); line-height:1.1; letter-spacing:-1px; color:var(--ink); margin:0; }
.section-title { font-family:var(--ui-font-family,var(--font-display)); font-size:2.05rem; font-weight:var(--ui-font-weight,400); line-height:1.2; letter-spacing:-0.3px; color:var(--ink); margin:0 0 8px; }
.section-subtitle { color:var(--muted); font-size:14px; margin:0 0 24px; }

/* Logs / code */
.log-window { background:var(--surface-dark); color:var(--on-dark); padding:16px; border-radius:var(--radius-lg); overflow:auto; max-height:60vh; font-family:var(--font-mono); font-size:12px; line-height:1.6; border:1px solid var(--surface-dark-elevated); }
.code-block { background:var(--surface-dark-soft); color:var(--on-dark); padding:14px; border-radius:var(--radius-md); font-family:var(--font-mono); font-size:13px; line-height:1.55; border:1px solid var(--surface-dark-elevated); }

/* Toast stack */
.toast-stack { position:fixed; top:16px; right:16px; z-index:100; display:flex; flex-direction:column; gap:8px; }
.toast { padding:12px 16px; border-radius:var(--radius-md); font-size:13px; font-weight:500; color:var(--on-primary); background:var(--surface-dark); border:1px solid var(--surface-dark-elevated); box-shadow:0 4px 12px rgba(0,0,0,0.25); animation:toastIn .25s ease; }
.toast.success { background:var(--success); color:#fff; border:none; }
.toast.error { background:var(--error); color:#fff; border:none; }
.toast.warn { background:var(--warning); color:#fff; border:none; }
@keyframes toastIn { from { opacity:0; transform:translateX(20px); } to { opacity:1; transform:translateX(0); } }

/* Modal overlay */
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:80; display:flex; align-items:center; justify-content:center; }
.modal-box { background:var(--surface-card); border:1px solid var(--hairline); border-radius:var(--radius-xl); padding:32px; min-width:320px; max-width:90vw; }
.modal-title { font-family:var(--font-display); font-size:22px; color:var(--ink); margin:0 0 8px; }
.modal-text { color:var(--body); font-size:14px; line-height:1.5; margin:0 0 20px; }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; }


.env-row { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.env-row input { flex:1; }
.env-row .btn-ghost { padding:4px; }