/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 12px;
  font-size: 14px; font-weight: 500; line-height: 1;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  white-space: nowrap; user-select: none;
}
.btn svg { flex-shrink: 0; }
.btn-primary { background: var(--geist-foreground); color: var(--geist-background); }
.btn-primary:hover { background: var(--accents-6); }
[data-theme="dark"] .btn-primary:hover { background: var(--accents-7); }
.btn-secondary { background: var(--geist-background); color: var(--geist-foreground); border-color: var(--hairline); }
.btn-secondary:hover { border-color: var(--accents-3); }
.btn-tertiary { color: var(--secondary-text); }
.btn-tertiary:hover { background: var(--accents-1); color: var(--geist-foreground); }
.btn-error { background: var(--geist-error); color: #fff; }
.btn-error:hover { background: var(--geist-error-dark); }
.btn-sm { height: 28px; padding: 0 10px; font-size: 13px; }
.btn-lg { height: 40px; padding: 0 16px; font-size: 15px; }
.btn-icon { width: 32px; padding: 0; }
.btn-icon.btn-sm { width: 28px; }
.btn:disabled, .btn[disabled] {
  background: var(--accents-1); color: var(--accents-3); border-color: transparent;
  cursor: not-allowed; pointer-events: auto;
}
.btn-secondary:disabled { border-color: var(--hairline); }

/* ============ Inputs ============ */
.input-wrap {
  display: flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 10px;
  background: var(--geist-background);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  transition: border-color .15s ease, box-shadow .15s ease;
  color: var(--secondary-text);
}
.input-wrap:focus-within { border-color: var(--accents-5); }
.input-wrap input, .input-wrap select {
  border: none; outline: none; background: transparent; flex: 1; min-width: 0;
  font-size: 14px; color: var(--geist-foreground); height: 100%;
}
.input-wrap input::placeholder { color: var(--accents-3); }
textarea.input {
  width: 100%; padding: 8px 10px; border: 1px solid var(--hairline); border-radius: var(--radius-md);
  background: var(--geist-background); resize: vertical; min-height: 72px; font-size: 14px; outline: none;
}
textarea.input:focus { border-color: var(--accents-5); }
.field-label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; color: var(--geist-foreground); }
.field-hint { font-size: 12px; color: var(--secondary-text); margin-top: 6px; }

/* kbd */
.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  height: 20px; min-width: 20px; padding: 0 5px;
  font-family: var(--font-mono); font-size: 11px; color: var(--secondary-text);
  background: var(--accents-1); border: 1px solid var(--hairline);
  border-radius: 4px; line-height: 1;
}

/* ============ Badges / pills ============ */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 20px; padding: 0 8px;
  font-size: 12px; font-weight: 500; line-height: 1;
  border-radius: 999px;
  background: var(--bg-raised); color: var(--secondary-text);
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge svg { flex-shrink: 0; }
.badge.outline { background: transparent; border-color: var(--hairline); }
.badge.green { background: var(--ds-green-100); color: var(--ds-green-900); }
.badge.amber { background: var(--ds-amber-100); color: var(--ds-amber-900); }
.badge.red { background: var(--ds-red-100); color: var(--ds-red-900); }
.badge.blue { background: var(--ds-blue-100); color: var(--ds-blue-900); }
.badge.upgrade {
  background: linear-gradient(90deg, #007cf0, #00dfd8);
  color: #fff; font-weight: 600; border: none;
}
.badge-branch { background: var(--bg-raised); color: var(--secondary-text); font-family: var(--font-mono); font-size: 11px; }
.badge-env { text-transform: capitalize; }

/* Status dot */
.status-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.status-dot.ready { background: var(--geist-success); }
.status-dot.green, .status-dot.valid { background: #17c964; }
.status-dot.building { background: var(--geist-warning); animation: pulse-dot 1.5s ease-out infinite; }
.status-dot.queued, .status-dot.canceled, .status-dot.idle { background: var(--accents-2); border: 1px solid var(--accents-3); }
.status-dot.error { background: var(--geist-error); }
.status-dot.uploading { background: var(--geist-cyan); }

/* ============ Avatars ============ */
.avatar { border-radius: 50%; flex-shrink: 0; overflow: hidden; display: inline-flex; }
.avatar img, .avatar svg { width: 100%; height: 100%; }
.avatar.rounded-tile { border-radius: var(--radius-md); }

/* ============ Cards ============ */
.card {
  background: var(--geist-background);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.card.hoverable:hover { border-color: var(--accents-4); }

/* ============ Tabs ============ */
.tabs { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--hairline); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; padding: 10px 12px; font-size: 14px; font-weight: 500;
  color: var(--secondary-text); white-space: nowrap; border-radius: 0;
  transition: color .15s ease;
}
.tab:hover { color: var(--geist-foreground); }
.tab.active { color: var(--geist-foreground); }
.tab.active::after {
  content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px;
  height: 2px; background: var(--geist-foreground); border-radius: 1px;
}

/* ============ Filter pills ============ */
.pill-filter {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px; font-size: 13px; font-weight: 500;
  border-radius: 999px; color: var(--secondary-text);
  border: 1px solid transparent; transition: all .15s ease; white-space: nowrap;
}
.pill-filter:hover { color: var(--geist-foreground); background: var(--accents-1); }
.pill-filter.active { background: var(--geist-foreground); color: var(--geist-background); }

/* ============ Tables ============ */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 12px; font-weight: 500; color: var(--secondary-text);
  padding: 8px 16px; border-bottom: 1px solid var(--hairline); white-space: nowrap;
}
.table td { padding: 12px 16px; border-bottom: 1px solid var(--hairline); vertical-align: middle; }
.table tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background .1s ease; }
.table tbody tr:hover { background: var(--bg-200); }

/* ============ Menus / dropdowns ============ */
.menu {
  position: absolute; z-index: 100; min-width: 200px;
  background: var(--geist-background);
  border-radius: var(--radius-lg);
  box-shadow: var(--ds-shadow-menu);
  padding: 5px; animation: scaleIn .12s ease-out;
  transform-origin: top right;
}
.menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 10px; font-size: 13px; font-weight: 400; text-align: left;
  border-radius: var(--radius-sm); color: var(--geist-foreground);
  transition: background .1s ease;
}
.menu-item:hover, .menu-item.kb-focus { background: var(--accents-1); }
.menu-item.danger { color: var(--geist-error); }
.menu-item:disabled { color: var(--accents-3); cursor: not-allowed; }
.menu-item:disabled:hover { background: transparent; }
.menu-item .menu-item-right { margin-left: auto; color: var(--accents-3); display: flex; align-items: center; gap: 4px; }
.menu-sep { height: 1px; background: var(--hairline); margin: 5px 8px; }
.menu-header { padding: 7px 10px 4px; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--accents-3); }

/* ============ Dialog ============ */
.dialog-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.4);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12vh 16px 16px;
  animation: fadeIn .12s ease-out;
  backdrop-filter: saturate(1.2);
}
[data-theme="dark"] .dialog-backdrop { background: rgba(0,0,0,.6); }
.dialog {
  width: 100%; max-width: 460px;
  background: var(--geist-background);
  border-radius: var(--radius-xl);
  box-shadow: var(--ds-shadow-menu);
  animation: scaleIn .15s ease-out;
  overflow: hidden;
}
.dialog-header { padding: 20px 24px 0; }
.dialog-title { font-size: 18px; font-weight: 600; letter-spacing: -0.02em; }
.dialog-body { padding: 12px 24px 20px; color: var(--secondary-text); font-size: 14px; }
.dialog-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 14px 24px; background: var(--bg-200); border-top: 1px solid var(--hairline);
}
.dialog-footer .dialog-footer-right { display: flex; gap: 8px; margin-left: auto; }

/* ============ Toasts ============ */
#toast-root {
  position: fixed; bottom: 24px; right: 24px; z-index: 400;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  max-width: 380px; padding: 10px 14px;
  background: var(--geist-foreground); color: var(--geist-background);
  border-radius: var(--radius-lg); font-size: 13px; font-weight: 500;
  box-shadow: var(--shadow-medium);
  animation: toastIn .18s cubic-bezier(.21,1.02,.73,1);
  pointer-events: auto;
}
.toast.leaving { animation: toastOut .15s ease-in forwards; }
.toast svg { flex-shrink: 0; }
.toast .toast-action { color: var(--geist-cyan); font-weight: 600; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(4px) scale(.98); } }

/* ============ Tooltip ============ */
.tooltip {
  position: fixed; z-index: 500; pointer-events: none;
  padding: 5px 9px; font-size: 12px; font-weight: 500; line-height: 1.3;
  background: var(--geist-foreground); color: var(--geist-background);
  border-radius: var(--radius-sm); box-shadow: var(--ds-shadow-tooltip);
  animation: fadeIn .1s ease-out; max-width: 260px; text-align: center;
  white-space: pre-line;
}

/* ============ Switch ============ */
.switch {
  position: relative; width: 32px; height: 18px; border-radius: 999px;
  background: var(--accents-2); transition: background .15s ease; flex-shrink: 0;
}
.switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--geist-background); box-shadow: 0 1px 2px rgba(0,0,0,.2);
  transition: transform .15s ease;
}
.switch.on { background: var(--geist-success); }
.switch.on::after { transform: translateX(14px); }
.switch:disabled { opacity: .5; cursor: not-allowed; }

/* ============ Progress bars ============ */
.progress { height: 6px; border-radius: 3px; background: var(--accents-1); overflow: hidden; }
.progress > div { height: 100%; border-radius: 3px; background: var(--geist-foreground); transition: width .3s ease; }
.progress.near-limit > div { background: var(--geist-warning); }
.progress.over-limit > div { background: var(--geist-error); }

/* ============ Empty state ============ */
.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 64px 24px; text-align: center; gap: 4px;
}
.empty-state .empty-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--accents-1); color: var(--accents-4);
  display: flex; align-items: center; justify-content: center; margin-bottom: 8px;
}
.empty-state .empty-title { font-size: 14px; font-weight: 600; color: var(--geist-foreground); }
.empty-state .empty-desc { font-size: 13px; color: var(--secondary-text); max-width: 360px; }
.empty-state .btn { margin-top: 12px; }

/* ============ Copy hash / inline code ============ */
.commit-hash {
  font-family: var(--font-mono); font-size: 12px; color: var(--secondary-text);
  padding: 1px 4px; border-radius: 4px; transition: background .1s ease, color .1s ease; cursor: pointer;
}
.commit-hash:hover { background: var(--accents-1); color: var(--geist-foreground); }

/* link style */
.link { color: var(--geist-success); cursor: pointer; }
.link:hover { text-decoration: underline; }
.text-secondary { color: var(--secondary-text); }
.text-faint { color: var(--accents-3); }
.text-error { color: var(--geist-error); }
.text-small { font-size: 12px; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }

/* segmented control */
.segmented { display: inline-flex; background: var(--accents-1); border-radius: var(--radius-md); padding: 2px; gap: 2px; }
.segmented button {
  height: 24px; padding: 0 10px; font-size: 12px; font-weight: 500; border-radius: 4px;
  color: var(--secondary-text); transition: all .12s ease; white-space: nowrap;
}
.segmented button:hover { color: var(--geist-foreground); }
.segmented button.active { background: var(--geist-background); color: var(--geist-foreground); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 0 0 1px var(--hairline); }

/* checkbox */
.checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; user-select: none; }
.checkbox {
  width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--accents-3);
  background: var(--geist-background); display: inline-flex; align-items: center; justify-content: center;
  transition: all .12s ease; flex-shrink: 0; color: #fff;
}
.checkbox.checked { background: var(--geist-foreground); border-color: var(--geist-foreground); color: var(--geist-background); }

/* section headings inside settings */
.settings-section { margin-bottom: 32px; }
.settings-section > .section-title { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
.settings-section > .section-desc { font-size: 13px; color: var(--secondary-text); margin-bottom: 16px; max-width: 640px; }
.settings-card { border: 1px solid var(--hairline); border-radius: var(--radius-xl); overflow: hidden; }
.settings-card .settings-card-body { padding: 20px 24px; }
.settings-card .settings-card-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 24px; background: var(--bg-200); border-top: 1px solid var(--hairline);
  font-size: 13px; color: var(--secondary-text);
}