/* ── Cards ── */
.glass { background: var(--bg-card); backdrop-filter: var(--blur); border: 1px solid var(--border); box-shadow: var(--shadow-card); }
.card { border-radius: var(--r-lg); padding: 26px; }
.card-hover { transition: box-shadow .2s, border-color .2s, transform .2s; }
.card-hover:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* Section heading inside cards */
.card-title { font-size: 15px; font-weight: 650; color: var(--text-primary); letter-spacing: -.01em; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--r-sm); font-size: 14px; font-weight: 600;
  border: none; cursor: pointer; transition: all .15s ease; position: relative;
  letter-spacing: -.01em; white-space: nowrap; line-height: 1;
}
.btn svg { flex-shrink: 0; }
.btn-primary { background: var(--accent-grad); color: #fff; box-shadow: 0 2px 12px rgba(99,102,241,.3), inset 0 1px 0 rgba(255,255,255,.14); }
.btn-primary:hover { background: var(--accent-grad-hover); box-shadow: 0 6px 20px rgba(99,102,241,.4), inset 0 1px 0 rgba(255,255,255,.18); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); box-shadow: 0 1px 6px rgba(99,102,241,.25); }
.btn-ghost { background: var(--bg-hover); color: var(--text-secondary); border: 1px solid var(--border); box-shadow: none; }
.btn-ghost:hover { background: var(--bg-subtle); color: var(--text-primary); border-color: var(--border-strong); transform: translateY(-1px); }
.btn-ghost:active { transform: translateY(0); }
.btn-danger { background: linear-gradient(135deg,#ef4444,#dc2626); color: #fff; box-shadow: 0 2px 12px rgba(239,68,68,.28), inset 0 1px 0 rgba(255,255,255,.14); }
.btn-danger:hover { background: linear-gradient(135deg,#f87171,#ef4444); box-shadow: 0 6px 20px rgba(239,68,68,.36); transform: translateY(-1px); }
.btn-ok { background: linear-gradient(135deg,#22c55e,#16a34a); color: #fff; box-shadow: 0 2px 12px rgba(34,197,94,.26), inset 0 1px 0 rgba(255,255,255,.14); }
.btn-ok:hover { background: linear-gradient(135deg,#4ade80,#22c55e); transform: translateY(-1px); }
.btn-sm { padding: 7px 13px; font-size: 13px; border-radius: var(--r-xs); gap: 6px; }
.btn-lg { padding: 14px 22px; font-size: 15px; border-radius: var(--r-md); }
.btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; transform: none !important; }

/* Icon-only button */
.btn-icon { padding: 8px; width: 34px; height: 34px; }
.btn-icon.btn-sm { width: 30px; height: 30px; padding: 6px; }

/* ── Labels ── */
label { display: block; font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 7px; letter-spacing: -.005em; }
label .label-hint { font-weight: 400; color: var(--text-faint); font-size: 12px; }
.field-help { font-size: 11.5px; color: var(--text-faint); margin-top: 7px; line-height: 1.4; }

/* ── Help icon (?) — hover for a browser-native tooltip via title="" ── */
.help-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg-hover); color: var(--text-muted);
  border: 1px solid var(--border);
  font-size: 10px; font-weight: 700; line-height: 1;
  cursor: help; user-select: none; letter-spacing: 0;
}
.help-icon:hover { background: var(--accent, #6366f1); color: #fff; border-color: transparent; }

/* ── Input groups ── */
.input-group { position: relative; }
.input-group .ig-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--text-faint); pointer-events: none; transition: color .2s; z-index: 2;
  display: flex;
}
.input-group:focus-within .ig-icon { color: var(--accent-hover); }
.input-group .cd.open ~ .ig-icon { color: var(--accent-hover); }
.input-group input, .input-group textarea { padding-left: 44px; }
.input-group textarea { padding-top: 13px; }
.input-group .cd .cd-trigger { padding-left: 44px; }
.input-group select { padding-left: 44px; }

/* ── Inputs & Textareas ──
   Selectors are prefixed with `body` to out-specify Tailwind's CDN preflight,
   which is injected after these stylesheets and otherwise resets font-size/padding. */
body input, body textarea {
  background: var(--bg-input); color: var(--text-primary);
  font-size: 14.5px; font-family: inherit; width: 100%;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: var(--input-pad-y) var(--input-pad-x); line-height: 1.5;
  min-height: var(--input-h);
  transition: border-color .15s, box-shadow .15s, background .2s;
  box-shadow: var(--shadow-xs) inset;
}
body input::placeholder, body textarea::placeholder { color: var(--text-faint); font-weight: 400; opacity: 1; }
body input:hover, body textarea:hover { border-color: var(--border-strong); }
body input:focus, body textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: var(--ring);
  background: var(--bg-input-focus);
}
body textarea { resize: vertical; min-height: 104px; }

/* ── Native select fallback ── */
body select {
  background: var(--bg-input); color: var(--text-primary);
  font-size: 14.5px; font-family: inherit; width: 100%;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: var(--input-pad-y) 40px var(--input-pad-y) var(--input-pad-x); line-height: 1.5;
  min-height: var(--input-h); cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  transition: border-color .15s, box-shadow .15s;
}
body select:hover { border-color: var(--border-strong); }
body select:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
body select option { background: var(--bg-input); color: var(--text-primary); }

/* ── Number / Checkbox / Password ── */
input[type="number"] { -moz-appearance: textfield; font-variant-numeric: tabular-nums; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { opacity: 0; width: 0; }

/* Custom checkbox — appearance:none + drawn checkmark. body-prefixed to beat the Play CDN preflight. */
body input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; box-sizing: border-box;
  width: 18px; height: 18px; min-height: 0; border-radius: 5px;
  border: 1.5px solid var(--border-strong); background: var(--bg-input);
  cursor: pointer; flex-shrink: 0; padding: 0; box-shadow: none;
  display: inline-grid; place-content: center; vertical-align: middle;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
body input[type="checkbox"]::before {
  content: ""; width: 10px; height: 10px; transform: scale(0); transform-origin: center;
  transition: transform .13s cubic-bezier(.3,1.3,.5,1); background-color: #fff;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
body input[type="checkbox"]:hover { border-color: rgba(99,102,241,.6); }
body input[type="checkbox"]:checked { border-color: var(--accent); background: var(--accent); }
body input[type="checkbox"]:checked::before { transform: scale(1); }
body input[type="checkbox"]:focus-visible { outline: none; box-shadow: var(--ring); }
body input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }

input[type="password"]:not(:placeholder-shown) { letter-spacing: 2px; }

/* Monospace inputs (tokens, ids) */
.input-mono { font-family: 'JetBrains Mono','SF Mono',ui-monospace,monospace; font-size: 13px; letter-spacing: -.01em; }

/* ── Badges ── */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 99px; font-size: 12px; font-weight: 600; letter-spacing: .01em; line-height: 1.4; border: 1px solid transparent; white-space: nowrap; }
.badge .badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge-ok { background: rgba(34,197,94,.13); color: #4ade80; border-color: rgba(34,197,94,.2); }
.badge-warn { background: rgba(245,158,11,.13); color: #fbbf24; border-color: rgba(245,158,11,.2); }
.badge-err { background: rgba(239,68,68,.13); color: #f87171; border-color: rgba(239,68,68,.2); }
.badge-info { background: rgba(99,102,241,.13); color: #a5b4fc; border-color: rgba(99,102,241,.2); }
.badge-neutral { background: var(--bg-hover); color: var(--text-muted); border-color: var(--border); }
[data-theme="light"] .badge-ok { color: #15803d; }
[data-theme="light"] .badge-warn { color: #b45309; }
[data-theme="light"] .badge-err { color: #b91c1c; }
[data-theme="light"] .badge-info { color: #4f46e5; }

/* ── Tables ── */
.table-wrap { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--bg-card-solid); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; padding: 13px 18px; font-weight: 600; color: var(--text-muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; background: var(--bg-table-head); border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 15px 18px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tbody tr { transition: background .12s; }
tbody tr:hover td { background: var(--bg-hover); }
/* Clickable rows */
tr.row-click { cursor: pointer; }
tr.row-click:hover td { background: var(--bg-active); }
.cell-actions { white-space: nowrap; }

/* Avatar chip for table identity cells */
.id-cell { display: flex; align-items: center; gap: 12px; }
.id-avatar {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px; color: #fff;
  background: var(--accent-grad); box-shadow: var(--shadow-xs);
}
.id-avatar.av-emerald { background: linear-gradient(135deg,#10b981,#059669); }
.id-avatar.av-amber { background: linear-gradient(135deg,#f59e0b,#d97706); }
.id-avatar.av-rose { background: linear-gradient(135deg,#f43f5e,#e11d48); }
.id-avatar.av-slate { background: linear-gradient(135deg,#64748b,#475569); }

/* Mono pill for tokens / ids in tables */
.mono-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono','SF Mono',ui-monospace,monospace; font-size: 11.5px;
  color: var(--text-muted); background: var(--bg-subtle); border: 1px solid var(--border);
  padding: 2px 8px; border-radius: 6px;
}