/* ============================================================================
   Votira — App layer (v3)
   Loaded AFTER theme.css. Two jobs:
     1. Re-skin the Bootstrap 5 components we rely on (inputs, dropdowns,
        accordion, modals) with the v3 tokens.
     2. Carry the app-only pieces that are not part of the shared component
        vocabulary: audit log, language switcher, live-link bar, admin console.
   Design tokens live in theme.css — never redeclare colours here.
   The product surface (dashboard, surveys, results, settings, billing,
   organization, AI panel, support) and the public pages are both built from
   the v3 components in theme.css. The `-vai` block below is what remains of
   the pre-v3 vocabulary and is now used ONLY by the admin console
   (votira/app/templates/admin/*); delete it once that console is migrated.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Buttons  (.btn-vai-* — admin console only, same shape as .btn-t-*)
   ------------------------------------------------------------------------- */
.btn-vai-primary,
.btn-vai-secondary,
.btn-vai-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font); font-weight: 600; font-size: .9375rem; line-height: 1;
  padding: 11px 18px; border-radius: var(--r-sm); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast),
              box-shadow var(--t-fast), transform var(--t-fast);
}
.btn-vai-primary:focus-visible,
.btn-vai-secondary:focus-visible,
.btn-vai-ghost:focus-visible { box-shadow: var(--focus-ring); }

.btn-vai-primary { background: var(--brand); border-color: var(--brand); color: var(--text-onbrand); box-shadow: var(--shadow-xs); }
.btn-vai-primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--text-onbrand); transform: translateY(-1px); box-shadow: var(--shadow-sm); }

.btn-vai-secondary { background: var(--surface); border-color: var(--border-strong); color: var(--text-body); }
.btn-vai-secondary:hover { background: var(--surface-2); border-color: var(--text-muted); color: var(--text); transform: translateY(-1px); }

.btn-vai-ghost { background: transparent; border-color: transparent; color: var(--brand); padding: 9px 12px; }
.btn-vai-ghost:hover { background: var(--brand-tint); color: var(--brand-hover); }

/* Bootstrap size modifiers must still win over the base padding above. */
.btn-vai-primary.btn-sm,
.btn-vai-secondary.btn-sm,
.btn-vai-ghost.btn-sm { padding: 7px 12px; font-size: .8125rem; gap: 6px; }
.btn-vai-primary.btn-lg,
.btn-vai-secondary.btn-lg { padding: 14px 26px; font-size: 1.0625rem; }

.btn-vai-primary:disabled,
.btn-vai-secondary:disabled,
.btn-vai-ghost:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------------------------------------------------------------------------
   2. Forms  (Bootstrap controls re-skinned to match .input-t)
   ------------------------------------------------------------------------- */
.form-label,
.form-vai .form-label { font-size: .875rem; font-weight: 600; color: var(--text); margin-bottom: 6px; }

.form-control,
.form-select,
.form-vai .form-control {
  font-family: var(--font); font-size: .9375rem; color: var(--text);
  background-color: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  padding: 11px 13px; line-height: 1.4;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-control:focus,
.form-select:focus,
.form-vai .form-control:focus { border-color: var(--brand); box-shadow: var(--focus-ring); }
.form-control::placeholder,
.form-vai .form-control::placeholder { color: var(--text-muted); }
.form-control:disabled,
.form-select:disabled { background-color: var(--surface-2); color: var(--text-muted); }
.form-control-sm, .form-select-sm { padding: 7px 11px; font-size: .875rem; }
textarea.form-control { min-height: 96px; }
.form-control-color { width: 48px; height: 38px; padding: 2px; }

/* Uploaded header / background image preview in the survey appearance card. */
.appearance-preview { max-height: 80px; border-radius: var(--r-sm); border: 1px solid var(--border); }
.appearance-preview.sm { max-height: 60px; }

.form-check-input { border-color: var(--border-strong); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-check-input:focus { border-color: var(--brand); box-shadow: var(--focus-ring); }
.form-check-label { font-size: .9375rem; color: var(--text-body); }
.form-text { font-size: .8125rem; color: var(--text-secondary); }

.input-group .form-control:focus { z-index: 3; }

.organization-page .page-header > div,
.organization-page .section-head > div,
.organization-page .section-head .d-flex > div,
.organization-page .plan-box > div { min-width: 0; max-width: 100%; }
.organization-page .stat-icon { flex: none; }
.organization-page .plan-box > div { flex: 1 1 320px; }
.organization-page .btn-t,
.organization-dialog .btn-t { max-width: 100%; white-space: normal; }
.organization-page .meta-row > span { display: inline; }
.organization-page .meta-row .bi { margin-right: 4px; }
.organization-page .kv-label,
.organization-page .meta-row,
.organization-page .data-table th,
.organization-page .data-table td::before,
.organization-page .plan-meta { color: var(--text-body); }
.organization-disclosure > summary {
  display: flex; align-items: center; gap: 9px; list-style: none;
  font-size: .875rem; font-weight: 600; color: var(--text); cursor: pointer;
}
.organization-disclosure > summary::-webkit-details-marker { display: none; }
.organization-disclosure > summary .bi { flex: none; color: var(--brand); }
.organization-disclosure > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.organization-disclosure[open] > summary .bi-chevron-down { transform: rotate(180deg); }
.organization-disclosure .row > div { min-width: 0; }

/* ---------------------------------------------------------------------------
   3. Cards & badges  (admin console only)
   ------------------------------------------------------------------------- */
.card-vai {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 24px; box-shadow: var(--shadow-xs);
  transition: box-shadow var(--t), border-color var(--t);
}
.card-vai:hover { box-shadow: var(--shadow-sm); }

.badge-vai {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: var(--brand-tint); color: var(--brand);
}
.badge-published,
.badge-active { background: var(--success-tint); color: var(--success); }
.badge-draft,
.badge-expired,
.badge-support-closed { background: var(--surface-2); color: var(--text-secondary); }
.badge-closed,
.badge-cancelled { background: var(--danger-tint); color: var(--danger); }
/* Churned subscriber: a win-back opportunity, not an error state. */
.badge-churned { background: var(--warning-tint); color: var(--warning); }
.badge-trialing,
.badge-support-open { background: var(--brand-tint); color: var(--brand); }
.badge-past_due,
.badge-support-in_progress { background: var(--warning-tint); color: var(--warning); }

/* Compact metric tile used in the results summary grid. Mobile-first: tighter
   padding and a fluid value size so long labels never overflow the card. */
.stat-tile { height: 100%; min-width: 0; padding: 18px 12px; text-align: center; }
.stat-tile-value {
  font-size: clamp(1.5rem, 6vw, 2rem); font-weight: 700; line-height: 1.2;
  color: var(--text); overflow-wrap: anywhere;
}
/* Keeps the badge tile the same height as the numeric ones. */
.stat-tile-badge {
  display: flex; align-items: center; justify-content: center;
  min-height: calc(clamp(1.5rem, 6vw, 2rem) * 1.2);
}
.stat-tile-label { font-size: .8125rem; color: var(--text-secondary); }
@media (min-width: 576px) { .stat-tile { padding: 24px; } }

/* ---------------------------------------------------------------------------
   4. Alerts, flash messages & toasts
   The `-vai` alert block is admin-console only; the product uses `.alert-t`.
   ------------------------------------------------------------------------- */
.flash-container { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }

.alert-vai {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface);
  font-size: .9rem; color: var(--text-body);
}
.alert-vai > i { font-size: 1.15rem; flex: none; margin-top: 1px; }
.alert-vai .alert-vai-text { flex: 1; min-width: 0; }
.alert-vai-close {
  flex: none; margin-left: auto; border: none; background: transparent; cursor: pointer;
  color: var(--text-muted); font-size: .9rem; line-height: 1; padding: 3px 5px; border-radius: var(--r-xs);
}
.alert-vai-close:hover { color: var(--text); background: rgba(17, 24, 39, .06); }

.alert-vai.success { background: var(--success-tint); border-color: var(--success-border); }
.alert-vai.success > i { color: var(--success); }
.alert-vai.error,
.alert-vai.danger { background: var(--danger-tint); border-color: var(--danger-border); }
.alert-vai.error > i,
.alert-vai.danger > i { color: var(--danger); }
.alert-vai.warning { background: var(--warning-tint); border-color: var(--warning-border); }
.alert-vai.warning > i { color: var(--warning); }
.alert-vai.info { background: var(--info-tint); border-color: var(--info-border); }
.alert-vai.info > i { color: var(--info); }

.toast-stack {
  position: fixed; top: 16px; right: 16px; z-index: var(--z-toast);
  display: flex; flex-direction: column; gap: 8px;
  width: min(360px, calc(100vw - 32px));
}
.toast-stack .alert-vai,
.toast-stack .alert-t { background: var(--surface); box-shadow: var(--shadow-md); animation: toastIn .18s ease-out; }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* ---------------------------------------------------------------------------
   5. Bits the templates use that theme.css does not name
   ------------------------------------------------------------------------- */
.results-bar .rb-count { flex: 0 0 auto; min-width: 36px; text-align: right; font-size: .8125rem; font-weight: 700; color: var(--text); }

.sortable-drag { box-shadow: var(--shadow-lg); transform: scale(1.02) rotate(-.6deg); }
.sortable-ghost > * { visibility: hidden; }
@keyframes cardReordered {
  0%   { box-shadow: 0 0 0 0 rgba(79, 70, 229, .35); }
  40%  { box-shadow: 0 0 0 6px rgba(79, 70, 229, 0); }
  100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
}
.card-reordered { animation: cardReordered 1.9s ease-out; }

/* "or" separator on the auth screens */
.divider {
  display: flex; align-items: center; gap: 12px; margin: 20px 0;
  border: none; font-size: .8125rem; color: var(--text-muted);
}
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* Password strength meter (advisory, never blocking) */
.pw-strength { margin-top: 8px; }
.pw-strength[hidden] { display: none; }
.pw-strength-label { font-size: .75rem; font-weight: 600; white-space: nowrap; }
.pw-strength-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.pw-strength-bar > i { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .2s ease, background .2s ease; }

/* Persistent "live link" bar (survey editor + results).
   Full-bleed inside .main-content and pinned while the page scrolls, so the
   public survey URL is always visible instead of hiding in the page header.
   It sits under the mobile topbar and at the very top from 992px up, where
   that topbar is hidden. */
.link-bar {
  position: sticky; top: var(--topbar-h); z-index: var(--z-sticky);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 8px 10px;
  margin: -20px -16px 20px; padding: 10px 16px;
  background: var(--brand-tint); border-bottom: 1px solid var(--brand-tint-2);
}
.link-bar-label {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  color: var(--brand);
}
.link-bar-url {
  grid-column: 1 / -1; grid-row: 2; display: block; min-width: 0;
  padding: 8px 12px; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--brand-tint-2);
  font-family: var(--font-mono); font-size: .875rem; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.link-bar-actions {
  grid-column: 2; grid-row: 1;
  display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px;
}
.link-bar-actions .btn-t { min-height: 40px; }
.link-bar-open { width: 40px; padding: 0; }
@media (min-width: 576px) {
  .link-bar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .link-bar-url { grid-column: 2; grid-row: 1; }
  .link-bar-actions { grid-column: 3; grid-row: 1; }
}
@media (min-width: 992px) {
  .link-bar { top: 0; margin: -32px -40px 24px; padding: 12px 40px; }
}

/* ---------------------------------------------------------------------------
   7. Language switcher (Bootstrap dropdown)
   ------------------------------------------------------------------------- */
.lang-switcher .lang-switcher-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--text-body);
  font-size: .8125rem; font-weight: 700; line-height: 1;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.lang-switcher .lang-switcher-toggle:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); }
.lang-switcher .lang-switcher-toggle:focus-visible { box-shadow: var(--focus-ring); }
.lang-switcher .lang-switcher-toggle .fi { border-radius: 3px; line-height: 1; }
.lang-switcher .lang-switcher-label { letter-spacing: .02em; }

.lang-switcher .lang-switcher-menu {
  border: 1px solid var(--border); border-radius: var(--r-sm);
  box-shadow: var(--shadow-md); padding: 6px; min-width: 190px;
}
.lang-switcher .lang-switcher-menu .dropdown-item {
  display: flex; align-items: center; gap: 9px;
  border-radius: var(--r-xs); padding: 8px 10px;
  font-size: .875rem; font-weight: 600; color: var(--text-body);
}
.lang-switcher .lang-switcher-menu .dropdown-item:hover { background: var(--surface-2); color: var(--text); }
.lang-switcher .lang-switcher-menu .dropdown-item.active { background: var(--brand-tint); color: var(--brand); }

.lang-switcher-sidebar { width: 100%; margin-bottom: 12px; }
.lang-switcher-sidebar .lang-switcher-toggle { width: 100%; justify-content: flex-start; padding: 10px 12px; }
.lang-switcher-sidebar .lang-switcher-toggle::after { margin-left: auto; }
.lang-switcher-sidebar .lang-switcher-menu { width: 100%; }

/* ---------------------------------------------------------------------------
   8. Audit log (stacked cards on mobile, real table from 992px)
   ------------------------------------------------------------------------- */
.audit-filters { margin-bottom: 0; }
.audit-filters-grid { display: grid; gap: 12px; }
.audit-filter { display: flex; flex-direction: column; }
.audit-filter .form-label { font-size: .8125rem; }
.audit-filter-actions { flex-direction: row; align-items: flex-end; gap: 8px; }
.audit-filter-actions .btn, .audit-filter-actions .btn-t { flex: 1; }

.audit-icon {
  flex: none; width: 32px; height: 32px; border-radius: var(--r-xs);
  display: inline-flex; align-items: center; justify-content: center; font-size: .875rem;
  background: var(--brand-tint); color: var(--brand);
}
.audit-icon.tone-emerald { background: var(--success-tint); color: var(--success); }
.audit-icon.tone-amber { background: var(--warning-tint); color: var(--warning); }
.audit-icon.tone-red { background: var(--danger-tint); color: var(--danger); }
.audit-icon.tone-gray { background: var(--surface-2); color: var(--text-secondary); }

.audit-event { display: flex; align-items: center; gap: 10px; }
.audit-details { color: var(--text-secondary); word-break: break-word; }
.audit-actor { display: inline-flex; align-items: center; gap: 5px; color: var(--text-body); }
.audit-actor .bi { color: var(--text-muted); font-size: .8125rem; }
.audit-time { font-size: .8125rem; color: var(--text-secondary); white-space: nowrap; }

/* Search input with a leading icon. */
.search-field { position: relative; }
.search-field > .bi {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); font-size: .875rem; pointer-events: none;
}
.search-field .form-control { padding-left: 34px; }

/* Previous / next pager under a listing. */
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }

/* Mobile-first data table: stacked label/value cards on phones, a real table
   from 992px up. Shared by the account audit log and the admin console. */
.audit-table-wrap, .data-table-wrap { width: 100%; }
.audit-table, .data-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.audit-table thead, .data-table thead { display: none; }
.audit-table tbody tr, .data-table tbody tr {
  display: block; margin-bottom: 10px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
}
.audit-table td, .data-table td { display: flex; gap: 12px; padding: 5px 0; border: none; color: var(--text-body); }
.audit-table td::before, .data-table td::before {
  content: attr(data-label); flex: 0 0 38%;
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted);
}
.audit-table td[data-label]:first-child, .data-table td[data-label]:first-child { padding-bottom: 8px; }
.audit-table td[data-label]:first-child::before, .data-table td[data-label]:first-child::before { display: none; }

@media (min-width: 768px) {
  .audit-filters-grid { grid-template-columns: repeat(4, 1fr); align-items: end; }
  /* Free-text search is the primary filter, so it gets a double column. */
  .audit-filter-search { grid-column: span 2; }
}
@media (min-width: 992px) {
  .audit-table-wrap, .data-table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow-x: auto; }
  .audit-table thead, .data-table thead { display: table-header-group; }
  .audit-table th, .data-table th {
    text-align: left; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-muted); padding: 12px 16px; background: var(--surface-2);
    border-bottom: 1px solid var(--border); white-space: nowrap;
  }
  .audit-table tbody tr, .data-table tbody tr { display: table-row; margin: 0; padding: 0; border: none; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--border); }
  .audit-table tbody tr:last-child, .data-table tbody tr:last-child { border-bottom: none; }
  .audit-table td, .data-table td { display: table-cell; padding: 13px 16px; vertical-align: middle; }
  .audit-table td::before, .data-table td::before { display: none; }
  .audit-table td[data-label]:first-child, .data-table td[data-label]:first-child { padding-bottom: 13px; }
  /* Short cells keep their value on one line so the free text column
     (a survey title, a description) gets all the remaining width. */
  .audit-table td.cell-num, .data-table td.cell-num { white-space: nowrap; }
  .audit-table td.cell-title, .data-table td.cell-title { min-width: 220px; }
}

/* ---------------------------------------------------------------------------
   9. Bootstrap components
   ------------------------------------------------------------------------- */
.dropdown-menu { border: 1px solid var(--border); border-radius: var(--r-sm); box-shadow: var(--shadow-md); padding: 6px; }
.dropdown-item { border-radius: var(--r-xs); padding: 8px 10px; font-size: .875rem; font-weight: 600; color: var(--text-body); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--surface-2); color: var(--text); }
.dropdown-item.active, .dropdown-item:active { background: var(--brand-tint); color: var(--brand); }
.dropdown-divider { border-color: var(--border); }

.modal-content { border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.modal-header, .modal-footer { border-color: var(--border); }
.modal-title { font-size: 1.0625rem; font-weight: 700; color: var(--text); }

.nav-tabs { border-color: var(--border); }
.nav-tabs .nav-link { border: none; border-bottom: 2px solid transparent; color: var(--text-secondary); font-weight: 600; }
.nav-tabs .nav-link:hover { border-bottom-color: var(--border-strong); color: var(--text); }
.nav-tabs .nav-link.active { border-bottom-color: var(--brand); color: var(--brand); background: transparent; }

.progress { background: var(--surface-2); border-radius: 999px; }
.progress-bar { background: var(--brand); }

code:not(.code-block) { background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; font-size: .85em; color: var(--brand-hover); }

/* ---------------------------------------------------------------------------
   10. Admin console (platform control plane)
   Operator-only back office. Reuses the product's tokens and components so the
   console looks and behaves like the app; only the pieces that have no
   equivalent in the tenant UI (utilization meters, resource cards, the
   distribution bars) are defined here. Mobile-first like everything else.
   ------------------------------------------------------------------------- */
.admin-badge {
  display: inline-flex; align-items: center; gap: 5px; margin-left: 8px;
  padding: 2px 8px; border-radius: 999px; font-size: .6875rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  background: var(--brand-tint); color: var(--brand); border: 1px solid var(--brand-soft);
}

.admin-meta { font-size: .75rem; color: var(--text-muted); }
.admin-meta .dot { margin: 0 6px; }

/* Compact KPI tile: denser than .stat-card because the console shows many at
   once. Two per row on phones, up to six on wide screens. */
.admin-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.admin-kpi {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 14px 16px; box-shadow: var(--shadow-xs); min-width: 0;
}
.admin-kpi .k-label {
  display: flex; align-items: center; gap: 6px;
  font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); margin-bottom: 6px;
}
.admin-kpi .k-value {
  font-size: 1.375rem; font-weight: 800; line-height: 1.1; color: var(--text);
  letter-spacing: -0.02em; overflow-wrap: anywhere;
}
.admin-kpi .k-sub { font-size: .75rem; color: var(--text-secondary); margin-top: 4px; }
.admin-kpi.accent .k-label { color: var(--accent-hover); }
.admin-kpi.brand .k-value { color: var(--brand); }

@media (min-width: 768px) { .admin-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .admin-kpis { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.admin-kpis.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 992px) { .admin-kpis.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.admin-kpis.cols-3 { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .admin-kpis.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.admin-kpis.cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 992px) { .admin-kpis.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* A KPI tile that is also a link keeps the tile shape, never the underline. */
a.admin-kpi.is-link { display: block; text-decoration: none; color: inherit; transition: border-color .15s ease, box-shadow .15s ease; }
a.admin-kpi.is-link:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
a.admin-kpi.is-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Horizontal distribution bar used for plan mix, languages, credit packs. */
.bar-row { display: grid; grid-template-columns: minmax(80px, 34%) 1fr auto; align-items: center; gap: 10px; margin-bottom: 8px; }
.bar-row .b-label { font-size: .8125rem; font-weight: 600; color: var(--text-body); overflow-wrap: anywhere; }
.bar-track { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; display: flex; }
.bar-fill { display: block; flex: none; height: 100%; border-radius: 999px; background: var(--brand); }
.bar-fill.accent { background: var(--accent); }
.bar-fill.warn { background: var(--warning); }
.bar-fill.tint { background: var(--brand-tint-2); }
/* Two-series track: the segments butt against each other and the pill shape
   comes from the track clipping them. */
.bar-track.split .bar-fill { border-radius: 0; }
.bar-row .b-value { font-size: .8125rem; font-weight: 700; color: var(--text); white-space: nowrap; }

/* Signup sparkline: pure CSS columns, no charting dependency. */
.spark { display: flex; align-items: flex-end; gap: 4px; height: 88px; }
.spark .s-col { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; }
.spark .s-bar { border-radius: var(--r-xs) var(--r-xs) 0 0; background: var(--brand-tint-2); min-height: 3px; }
.spark:not(.stacked) .s-col:last-child .s-bar { background: var(--brand); }
/* Stacked sparkline: two series per column, only the top one is rounded. The
   column keeps the empty-month baseline that the single-series bars get from
   their min-height. */
.spark.stacked .s-col { border-bottom: 3px solid var(--surface-2); }
.spark.stacked .s-bar { border-radius: 0; min-height: 0; }
.spark.stacked .s-bar.is-draft { border-radius: var(--r-xs) var(--r-xs) 0 0; background: var(--brand-tint-2); }
.spark.stacked .s-bar.is-published { background: var(--brand); }
.spark-axis { display: flex; gap: 4px; margin-top: 6px; }
.spark-axis span { flex: 1 1 0; text-align: center; font-size: .625rem; color: var(--text-muted); overflow: hidden; }

/* Series legend shared by the stacked charts. */
.chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: .75rem; color: var(--text-secondary); }
.chart-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend .lg-dot { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--brand); }
.chart-legend .lg-dot.tint { background: var(--brand-tint-2); }
.chart-legend .lg-dot.accent { background: var(--accent); }

/* Azure resource card + utilization readouts. */
.res-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.res-icon {
  flex: none; width: 40px; height: 40px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem;
  background: var(--brand-tint); color: var(--brand);
}
.res-name { font-size: .9375rem; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 768px) { .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.metric-item { min-width: 0; }
.metric-item .m-label { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.metric-item .m-value { font-size: 1rem; font-weight: 700; color: var(--text); margin-top: 2px; overflow-wrap: anywhere; }

.sev-dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--text-muted); flex: none; }
.sev-dot.ok { background: var(--success); }
.sev-dot.warn { background: var(--warning); }
.sev-dot.crit { background: var(--danger); }

/* Azure topology: subscription -> resource groups -> resources. Pure CSS, no
   charting dependency, and it reflows to a single column on phones. */
.topo-sub {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 14px;
  padding: 6px 12px; border-radius: 999px; font-size: .8125rem; font-weight: 700;
  background: var(--brand-tint); color: var(--brand); border: 1px solid var(--brand-soft);
}
.topo-groups { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 768px) { .topo-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .topo-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.topo-group {
  border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px;
  background: var(--surface-2); min-width: 0; position: relative;
}
.topo-group-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.topo-group-name { font-size: .875rem; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.topo-group-meta { font-size: .6875rem; color: var(--text-muted); }
.topo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.topo-list li {
  display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: start; gap: 2px 8px; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xs);
  padding: 7px 10px; font-size: .8125rem; color: var(--text-body);
}
.topo-list li.is-problem { border-color: var(--warning); background: var(--warning-tint); }
.topo-res { grid-column: 2; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.topo-type { grid-column: 2; min-width: 0; font-size: .6875rem; color: var(--text-muted); white-space: normal; overflow-wrap: anywhere; }

.admin-infrastructure .k-label { overflow-wrap: anywhere; letter-spacing: 0; }
.admin-infrastructure .k-label i { flex: none; }
.admin-infrastructure .k-value { letter-spacing: 0; }
.admin-infrastructure .form-select { padding-right: 2.5rem; }
.admin-infrastructure .page-header > div { min-width: 0; max-width: 100%; }
.infra-window-form { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; max-width: 100%; }
.infra-window-field { flex: 1 1 12rem; min-width: 0; }
.infra-window-form > button { flex: none; }
.infra-cost-summary { border-top: 1px solid var(--border); padding-top: 16px; }
.infra-cost-summary dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 20px; font-size: .8125rem; }
.infra-cost-summary dt { color: var(--text-muted); font-weight: 600; }
.infra-cost-summary dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.infra-table-wrap { overflow-x: auto; }
.infra-resource-table td { overflow-wrap: anywhere; }
.infra-resource-table td > * { min-width: 0; }
.infra-resource-table code { white-space: normal; overflow-wrap: anywhere; }

/* Release channel card: the environment shortcut sits to the left of the
   status badge, both pinned to the top-right corner of the card. */
.channel-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.channel-env-btn { padding: 4px 8px; line-height: 1; }

/* Environment variables table: names and values are opaque strings, so they
   wrap instead of stretching the table. */
.env-table code { white-space: normal; overflow-wrap: anywhere; }
.env-table .env-value { font-size: .8125rem; }
.env-secret { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); letter-spacing: .08em; }
.env-secret i { letter-spacing: normal; }

/* Environment comparison: the switch is a submit button, so the two views
   need no JavaScript. */
.env-toggle-card { padding: 14px 16px; }
.env-toggle {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: none; border: 0; padding: 0; text-align: left; cursor: pointer; color: inherit;
}
.env-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); }
/* Same geometry as .switch-t in theme.css, driven by aria-checked instead of
   a checkbox because the switch is the submit button. */
.env-toggle-track {
  flex: none; position: relative; width: 42px; height: 24px; border-radius: 999px;
  background: var(--surface-3); transition: background var(--t-fast);
}
.env-toggle-knob {
  position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface); box-shadow: var(--shadow-xs); transition: transform var(--t-fast);
}
.env-toggle[aria-checked="true"] .env-toggle-track { background: var(--brand); }
.env-toggle[aria-checked="true"] .env-toggle-knob { transform: translateX(18px); }
.env-toggle-text { display: flex; flex-direction: column; min-width: 0; }
.env-toggle-label { font-size: .875rem; font-weight: 700; color: var(--text); }
.env-toggle-hint { font-size: .75rem; color: var(--text-secondary); }

.env-diff-wrap { overflow-x: auto; }
.env-diff-table code { white-space: normal; overflow-wrap: anywhere; font-size: .8125rem; }
.env-diff-table .badge-vai { margin-left: 6px; }
.env-missing { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: .8125rem; }
/* The drifting cells carry the emphasis; the row tint only groups them. */
.env-diff-table tr.is-differing { background: var(--warning-tint); }
.env-diff-table td.is-drift { box-shadow: inset 3px 0 0 var(--warning); font-weight: 600; }
@media (min-width: 992px) { .env-diff-table { min-width: 900px; } }

@media (min-width: 768px) {
  .infra-cost-summary dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .infra-resource-table { min-width: 1050px; }
}

/* Compact metric chips shown inside a resource row. */
.inline-metrics { display: flex; flex-wrap: wrap; gap: 6px; }
.im {
  display: inline-flex; align-items: baseline; gap: 5px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-xs); padding: 2px 7px; font-size: .75rem; white-space: nowrap;
}
.im-l { color: var(--text-muted); }
.im-v { font-weight: 700; color: var(--text); }
.im-v.warn { color: var(--warning); }
.im-v.crit { color: var(--danger); }

/* Support conversation thread (operator console + customer view). */
.thread-msg { padding: 16px 0; border-bottom: 1px solid var(--border); }
.thread-msg:last-child { border-bottom: none; padding-bottom: 0; }
.thread-msg:first-child { padding-top: 0; }
.thread-msg.is-operator { background: var(--brand-tint); margin: 0 -24px; padding: 16px 24px; border-bottom: none; }
.thread-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.thread-author { font-size: .875rem; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.thread-body { font-size: .9375rem; color: var(--text-body); white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.thread-extra { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }

/* Survey preview (operator console): a faithful but inert rendering of a
   customer's questionnaire. Controls are decorative only — nothing here is a
   real form, so an operator can never submit a response by accident. */
.qp-page { border: 1px solid var(--border); border-radius: var(--r-md); padding: 16px; margin-bottom: 14px; background: var(--surface); }
.qp-page-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px dashed var(--border); }
.qp-page-name { font-size: .875rem; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.qp-q { padding: 14px 0; border-bottom: 1px solid var(--border); }
.qp-q:last-child { border-bottom: none; padding-bottom: 0; }
.qp-q-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.qp-num { font-size: .75rem; font-weight: 800; color: var(--brand); }
.qp-text { font-size: .9375rem; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.qp-req { color: var(--danger); font-weight: 700; }
.qp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; }
.qp-tag {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-xs);
  padding: 2px 8px; font-size: .6875rem; font-weight: 700; color: var(--text-muted); white-space: nowrap;
}
.qp-tag.rule { background: var(--brand-tint); border-color: var(--brand-soft); color: var(--brand); white-space: normal; }
.qp-body { display: flex; flex-wrap: wrap; gap: 6px; }
.qp-opts { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.qp-opt {
  display: flex; align-items: center; gap: 8px; padding: 7px 11px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: .875rem; color: var(--text-body); background: var(--surface-2); overflow-wrap: anywhere;
}
.qp-opt i { color: var(--text-muted); flex: none; }
.qp-chip {
  display: inline-flex; align-items: center; justify-content: center; min-width: 36px;
  padding: 5px 10px; border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: .8125rem; font-weight: 600; color: var(--text-body); background: var(--surface-2);
}
.qp-scale-labels { display: flex; justify-content: space-between; width: 100%; margin-top: 6px; font-size: .75rem; color: var(--text-muted); gap: 12px; }
.qp-field {
  width: 100%; max-width: 340px; padding: 9px 12px; border: 1px dashed var(--border-strong);
  border-radius: var(--r-sm); font-size: .875rem; color: var(--text-muted); background: var(--surface-2);
}
.qp-matrix { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.qp-matrix th, .qp-matrix td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: center; color: var(--text-body); }
.qp-matrix th { font-size: .6875rem; color: var(--text-muted); font-weight: 700; }
.qp-matrix td:first-child, .qp-matrix th:first-child { text-align: left; overflow-wrap: anywhere; }
.qp-images { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
@media (min-width: 768px) { .qp-images { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.qp-image { border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); }
.qp-image img { width: 100%; height: 96px; object-fit: cover; display: block; }
.qp-image-ph { height: 96px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 1.5rem; }
.qp-image-label { padding: 6px 8px; font-size: .75rem; color: var(--text-body); overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------------
   Guided tour (tutorial mode)
   Coach-marks that walk a new account through the whole pipeline on read-only
   demo screens. The dimmed area is drawn as four panels around the highlighted
   element instead of one overlay with a cut-out. While a tour runs the rest of
   the page is inert (clicks are swallowed by static/js/tutorial.js) so the
   walkthrough can never derail; modal dialogs temporarily suspend it.
   Geometry (the inline top/left/width/height) is set by static/js/tutorial.js.
   ------------------------------------------------------------------------- */
.tour-panel {
  position: fixed;
  z-index: 1080;
  pointer-events: none;
  background: rgba(17, 24, 39, .24);
  opacity: 0;
  transition: opacity var(--t);
}
.tour-ring {
  position: fixed;
  z-index: 1081;
  border-radius: var(--r-md);
  box-shadow: 0 0 0 3px var(--brand), 0 0 0 8px rgba(79, 70, 229, .25);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--t);
}
.tour-root[hidden], .tour-root [hidden] { display: none !important; }
.tour-open .tour-panel,
.tour-open .tour-ring { opacity: 1; }

.tour-pop {
  position: fixed;
  z-index: 1082;
  left: 12px;
  right: auto;
  bottom: auto;
  width: 340px;
  max-width: calc(100vw - 24px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 18px;
  opacity: 0;
  transition: opacity var(--t);
}
.tour-open .tour-pop { opacity: 1; transform: none; }

.tour-pop-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.tour-heading { flex: 1 1 auto; min-width: 0; }
.tour-eyebrow {
  display: block; margin-bottom: 2px;
  font-size: .6875rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--brand); overflow-wrap: anywhere;
}
.tour-step-count {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; padding: 3px 9px;
  background: var(--brand-tint); color: var(--brand);
  border-radius: 999px;
  font-size: .6875rem; font-weight: 800; letter-spacing: 0;
}
.tour-title {
  margin: 0;
  font-size: 1rem; font-weight: 700; color: var(--text); line-height: 1.35;
  overflow-wrap: anywhere;
}
.tour-close {
  flex: none; width: 36px; height: 36px; margin: -4px -4px 0 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: var(--r-xs);
  color: var(--text-muted); font-size: .8125rem; cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.tour-close:hover { background: var(--surface-2); color: var(--text); }
.tour-close:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.tour-body { margin: 0 0 16px; font-size: .875rem; line-height: 1.55; color: var(--text-body); }
.tour-body, .tour-actions button { overflow-wrap: anywhere; }
.tour-actions button { min-height: 36px; max-width: 100%; white-space: normal; }
.tour-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tour-nav { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.tour-skip {
  background: transparent; border: 0; padding: 0;
  font-size: .8125rem; font-weight: 600; color: var(--text-secondary);
  text-decoration: underline; cursor: pointer;
}
.tour-skip:hover { color: var(--text); }
.tour-skip:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-xs); }

/* The arrow only makes sense once the popover is anchored (tablet and up). */
.tour-pop::after { display: none; }

@media (min-width: 576px) {
  .tour-pop {
    right: auto;
    bottom: auto;
    width: 340px;
    max-width: calc(100vw - 24px);
  }
  .tour-pop.is-above::after, .tour-pop.is-below::after,
  .tour-pop.is-left::after, .tour-pop.is-right::after {
    content: "";
    display: block;
    position: absolute;
    width: 12px; height: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    transform: rotate(45deg);
  }
  /* Popover below the target → arrow on top, and vice versa. */
  .tour-pop.is-below::after { top: -7px; left: var(--tour-arrow, 28px); border-right: 0; border-bottom: 0; }
  .tour-pop.is-above::after { bottom: -7px; left: var(--tour-arrow, 28px); border-left: 0; border-top: 0; }
  .tour-pop.is-right::after { left: -7px; top: var(--tour-arrow-y, 28px); border-right: 0; border-top: 0; }
  .tour-pop.is-left::after { right: -7px; top: var(--tour-arrow-y, 28px); border-left: 0; border-bottom: 0; }
  .tour-pop.is-centered::after { display: none; }
  .tour-pop.is-centered { width: 420px; }
}

@media (max-width: 575.98px) and (max-height: 700px) {
  .tour-pop { padding: 12px; max-width: calc(100vw - 16px); }
  .tour-pop-head { margin-bottom: 6px; }
  .tour-body { line-height: 1.45; margin-bottom: 10px; }
  .tour-actions { gap: 8px; }
  .tour-open .ai-panel-dialog .btn-t { max-width: 100%; white-space: normal; }
}

/* Clicking outside the tour does nothing on a demo screen: a short nudge tells
   the user to keep going from the popover itself. */
@keyframes tour-nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.tour-pop.is-nudge { animation: tour-nudge .3s ease; }

@media (prefers-reduced-motion: reduce) {
  .tour-panel, .tour-ring, .tour-pop { transition: none; }
  .tour-pop { transform: none; }
  .tour-pop.is-nudge { animation: none; }
}

/* ---------------------------------------------------------------------------
   AI Panel (synthetic personas)
   Two connected spaces — "prepare the audience", then "collect the responses" —
   built around the pool rather than around the single persona. Mobile-first:
   everything stacks on phones, the pool grid and the run layout only gain
   columns on wider screens. The persona library itself reuses `.data-table`.
   ------------------------------------------------------------------------- */
.ai-panel-page, .ai-panel-dialog {
  --panel-success-text: color-mix(in srgb, var(--success) 65%, var(--text) 35%);
}
.panel-eyebrow {
  display: block; margin-bottom: 4px;
  font-size: .6875rem; font-weight: 700; letter-spacing: 0; text-transform: uppercase;
  color: var(--text-secondary);
}

/* The two spaces: big, self-describing switches instead of plain tabs. */
.panel-spaces {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-bottom: 32px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.panel-space {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width: 100%; min-width: 0;
  min-height: 96px; padding: 16px 10px; text-align: left; cursor: pointer; font-family: var(--font);
  color: var(--text-body); background: transparent; border: 0;
  border-bottom: 3px solid transparent; border-radius: 0;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.panel-space:hover { background: var(--surface-2); }
.panel-space:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.panel-space.active { color: var(--brand); border-bottom-color: var(--brand); background: var(--brand-tint); }
.panel-space + .panel-space { border-left: 1px solid var(--border); }
#spaceRunTab.active { color: var(--panel-success-text); border-bottom-color: var(--success); background: var(--success-tint); }
.panel-space .stat-icon { flex: none; background: transparent; color: inherit; }
.panel-space-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.panel-space-text strong { font-size: .9375rem; font-weight: 700; color: var(--text); }
.panel-space .panel-space-text strong { color: inherit; }
.panel-space .panel-space-text strong { font-size: .8125rem; }
.panel-space .panel-space-text small { font-size: .6875rem; }
.panel-space-text small { font-size: .8125rem; color: var(--text-body); }
.panel-space-go { display: none; margin-left: auto; color: var(--text-secondary); flex: none; }
.panel-space.active .panel-space-go { color: inherit; }

/* Pool cards: the entry point of the whole preparation space. */
.panel-pool-directory { display: grid; gap: 14px; margin-bottom: 34px; }
.panel-pool-grid { display: grid; gap: 14px; min-width: 0; }
.panel-pool-card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; width: 100%; height: 100%; min-width: 0;
  padding: 15px; text-align: left; cursor: pointer; font-family: var(--font);
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.panel-pool-card:hover { border-color: var(--brand-soft); }
.panel-pool-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.panel-pool-card.active { border-color: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand-soft); }
.panel-pool-top { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.panel-pool-top .stat-icon { width: 36px; height: 36px; border-radius: 7px; background: var(--brand-tint); color: var(--brand-hover); }
.panel-pool-card:nth-child(3n + 2) .stat-icon { background: var(--success-tint); color: var(--panel-success-text); }
.panel-pool-card:nth-child(3n) .stat-icon { background: var(--warning-tint); color: var(--warning); }
.panel-pool-name { font-size: .9375rem; font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.panel-pool-desc { grid-column: 1; font-size: .8125rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.panel-pool-foot {
  grid-column: 2; grid-row: 2 / 4;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: auto; font-size: .75rem; color: var(--text-body);
}
.panel-pool-foot strong { font-size: 1.375rem; font-weight: 700; }
.panel-pool-foot .bi { display: none; color: var(--text-body); }
.panel-pool-new {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 16px; cursor: pointer; font-family: var(--font);
  background: transparent; border: 1px dashed var(--border-strong); border-radius: 8px;
  font-size: .875rem; font-weight: 600; color: var(--text-secondary);
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.panel-pool-new:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }
.panel-pool-new:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Whole-library shortcut sitting under the pool grid. */
.panel-library-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  padding: 18px 0; margin-bottom: 12px; border-top: 1px solid var(--border); font-size: .75rem;
}
.panel-library-bar .chip { padding: 6px 10px; border: 0; background: transparent; border-radius: 6px; color: var(--text-body); }
.panel-library-bar .chip.active { background: var(--brand-tint); color: var(--brand-hover); }
.panel-list-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; margin-bottom: 4px; border-top: 1px solid var(--border); font-size: .75rem; }

/* Pagination under the persona library. */
.panel-pager { flex-wrap: wrap; gap: 10px; }
.panel-pager-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.panel-page-picker { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.panel-page-picker .form-select { width: 64px; padding-right: 28px; }

/* Hand-off to the second space. Deliberately static (not sticky): a floating
   bar would cover the last rows of the library on short screens. */
.panel-dock {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 20px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
}
.panel-dock-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.panel-dock-info > .bi { font-size: 1.25rem; color: var(--brand); flex: none; }
.panel-dock .btn-t { margin-left: auto; }

/* Collection: selections and audience together, with a separate cost summary. */
.panel-run { min-width: 0; margin-top: 28px; }
.panel-run-heading { margin-bottom: 22px; }
.panel-run-heading > .card-t-title { font-size: 1.5rem; margin: 6px 0 8px; }
.panel-run-heading > .card-t-sub { margin: 0; }
.panel-run-layout { display: grid; gap: 22px; align-items: start; }
.panel-run-form, .panel-run-summary { min-width: 0; padding: 20px; }
.panel-run .form-select { min-width: 0; }
.panel-run-step + .panel-run-step { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border); }
.panel-run-step-title { display: flex; align-items: center; gap: 10px; font-size: 1rem; margin: 0 0 18px; }
.panel-run-step-number {
  display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px;
  background: var(--brand-tint); color: var(--brand); border-radius: var(--r-sm); font-size: .8125rem;
}
.panel-run-audience {
  min-width: 0; margin-top: 18px; padding: 16px; border: 1px solid var(--border);
  border-radius: var(--r-sm); background: var(--bg); overflow-wrap: anywhere;
}
.panel-run-audience .card-t-title { font-size: .9375rem; margin: 0 0 8px; }
.panel-run-audience .card-t-sub { font-size: .8125rem; margin: 0; }
.panel-audience-preview { display: grid; }
.panel-audience-preview > .muted-text { grid-column: 1 / -1; font-size: .75rem; }
.panel-audience-person {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px 0;
}
.panel-audience-person + .panel-audience-person { border-top: 1px solid var(--border); }
.panel-audience-person .panel-avatar { width: 36px; height: 36px; border-radius: var(--r-avatar); font-size: .6875rem; }
.panel-audience-person > div { min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.panel-audience-person strong { font-size: .8125rem; font-weight: 600; color: var(--text); }
.panel-audience-person small { font-size: .75rem; color: var(--text-body); }
.panel-audience-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 0; font-size: .75rem; }
.panel-audience-meta[hidden] { display: none; }
.panel-audience-actions { display: flex; justify-content: flex-end; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.panel-audience-actions .btn-t { white-space: normal; text-align: left; }
.panel-run-summary-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 24px; }
.panel-run-summary-heading h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .9375rem; }
.panel-run-summary-heading h3 .bi { color: var(--brand); flex: none; }
.panel-run-summary-heading .help-btn { flex: none; }
.panel-run-placeholder { padding: 18px 0; font-size: .8125rem; color: var(--text-secondary); }
.panel-run-math > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: .8125rem; }
.panel-run-math > div > span { color: var(--text-secondary); }
.panel-run-math > div > strong { color: var(--text); }
.panel-run-math > .panel-run-total {
  flex-direction: column; align-items: flex-start; gap: 4px; padding: 0 0 18px; margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.panel-run-total strong { font-size: 2.5rem; line-height: 1.2; }
.panel-run-total small { font-size: .8125rem; font-weight: 400; color: var(--text-secondary); }
.panel-run-math > .panel-run-balance { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 16px; }
.panel-cost-help { border-top: 1px solid var(--border); padding-top: 14px; margin: 18px 0; font-size: .75rem; color: var(--text-secondary); }
.panel-cost-help summary { cursor: pointer; }
.panel-cost-help summary .bi { margin-right: 6px; }
.panel-cost-help p { margin-top: 10px; }
.panel-run-summary > .btn-t { white-space: normal; }
.panel-warning { padding: 12px; margin: 12px 0; border: 1px solid var(--warning-border); border-radius: 6px; background: var(--warning-tint); color: var(--warning); font-size: .8125rem; }
.panel-run-result { padding: 14px; border: 1px solid var(--success-border); border-radius: 6px; background: var(--success-tint); color: var(--panel-success-text); overflow-wrap: anywhere; }
.panel-run-result.partial { border-color: var(--warning-border); background: var(--warning-tint); color: var(--warning); }
.panel-run-result p { margin: 8px 0; font-size: .8125rem; }
.panel-run-result small { font-size: .75rem; }

.panel-run-progress {
  --run-color: var(--brand); --run-tint: var(--brand-tint);
  padding: 20px; border: 1px solid var(--ai-border); border-radius: var(--r-lg);
  background: var(--ai-grad); text-align: center; overflow-wrap: anywhere;
}
.panel-run-visual { position: relative; width: 232px; max-width: 100%; height: 184px; margin: 0 auto 12px; }
.panel-run-ring {
  position: absolute; inset: 14px auto auto 50%; width: 156px; height: 156px; margin-left: -78px;
  border: 1px solid var(--ai-border); border-radius: 50%; transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.panel-run-ring::before {
  content: ''; position: absolute; inset: 8px; border: 1px dashed var(--brand-soft); border-radius: 50%;
}
.panel-run-progress[data-state="pending"] .panel-run-ring::before { animation: panel-run-orbit 24s linear infinite; }
.panel-run-ray { --x: -94px; --y: 0px; --delay: 0s; }
.panel-run-ray:nth-child(2) { --x: -47px; --y: -66px; --delay: -.45s; }
.panel-run-ray:nth-child(3) { --x: 47px; --y: -66px; --delay: -.9s; }
.panel-run-ray:nth-child(4) { --x: 94px; --y: 0px; --delay: -1.35s; }
.panel-run-ray:nth-child(5) { --x: 47px; --y: 66px; --delay: -1.8s; }
.panel-run-ray:nth-child(6) { --x: -47px; --y: 66px; --delay: -2.25s; }
.panel-run-node {
  position: absolute; top: 50%; left: 50%; display: grid; place-items: center;
  width: 32px; height: 32px; margin: -16px; border: 1px solid var(--ai-border); border-radius: var(--r-avatar);
  color: var(--brand); background: var(--surface); font-size: 1.125rem;
  transform: translate(var(--x), var(--y)); transition: transform .6s var(--ease), opacity .5s var(--ease);
}
.panel-run-ray:nth-child(even) .panel-run-node { color: var(--panel-success-text); border-color: var(--success-border); }
.panel-run-signal {
  position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; margin: -3px;
  border-radius: 50%; background: var(--brand); opacity: 0;
}
.panel-run-ray:nth-child(even) .panel-run-signal { background: var(--success); }
.panel-run-progress[data-state="pending"] .panel-run-signal { animation: panel-run-flow 2.7s var(--delay) var(--ease) infinite; }
.panel-run-core {
  position: absolute; top: 50%; left: 50%; display: grid; place-items: center;
  width: 76px; height: 76px; margin: -38px; border: 1px solid var(--ai-border); border-radius: 24px;
  background: var(--surface); color: var(--run-color); box-shadow: var(--shadow-sm);
  transition: background .4s var(--ease), border-color .4s var(--ease);
}
.panel-run-document, .panel-run-alert, .panel-run-check { grid-area: 1 / 1; transition: opacity .25s var(--ease); }
.panel-run-document, .panel-run-alert { font-size: 2rem; }
.panel-run-alert, .panel-run-check { opacity: 0; }
.panel-run-check { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.panel-run-check path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.panel-run-title { margin: 4px 0 10px; font-size: 1.125rem; font-weight: 700; color: var(--run-color); }
.panel-run-context, .panel-run-pending-note, .panel-run-link-hint { font-size: .8125rem; line-height: 1.6; color: var(--text-body); }
.panel-run-context { margin-bottom: 12px; font-weight: 600; }
.panel-run-destination {
  display: flex; align-items: flex-start; gap: 10px; padding: 14px 0 0; border-top: 1px solid var(--ai-border);
  font-size: .8125rem; line-height: 1.6; text-align: left; color: var(--text-body);
}
.panel-run-destination > .bi { flex: none; font-size: 1.125rem; color: var(--brand); }
.panel-run-link-hint { margin: 10px 0 0; }
.panel-run-progress .panel-run-result { padding: 0; margin-top: 16px; border: 0; background: transparent; color: var(--run-color); }
.panel-run-result small { display: block; }
.panel-run-results-link, .panel-run-retry { margin-top: 16px; white-space: normal; }
.panel-run-retry[hidden] { display: none; }
.panel-run-progress[data-state="complete"] { --run-color: var(--panel-success-text); --run-tint: var(--success-tint); border-color: var(--success-border); }
.panel-run-progress[data-outcome="partial"] { --run-color: var(--warning); --run-tint: var(--warning-tint); border-color: var(--warning-border); }
.panel-run-progress[data-state="error"] { --run-color: var(--danger); --run-tint: var(--danger-tint); border-color: var(--danger-border); }
.panel-run-progress:not([data-state="pending"]) .panel-run-core { background: var(--run-tint); border-color: currentColor; }
.panel-run-progress:not([data-state="pending"]) .panel-run-ring { opacity: 0; transform: scale(.6); }
.panel-run-progress:not([data-state="pending"]) .panel-run-document { opacity: 0; }
.panel-run-progress[data-state="complete"] .panel-run-node { transform: translate(0, 0) scale(.2); opacity: 0; }
.panel-run-progress[data-state="complete"] .panel-run-result { animation: panel-run-reveal .3s .6s var(--ease) both; }
.panel-run-progress[data-outcome="complete"] .panel-run-check { opacity: 1; transition-delay: .4s; }
.panel-run-progress[data-outcome="complete"] .panel-run-check path { animation: panel-run-check .4s .4s var(--ease) forwards; }
.panel-run-progress[data-outcome="partial"] .panel-run-alert { opacity: 1; transition-delay: .4s; }
.panel-run-progress[data-state="error"] .panel-run-alert { opacity: 1; }
.panel-run-progress[data-state="error"] .panel-run-node { opacity: 0; transition: none; }

@keyframes panel-run-orbit { to { transform: rotate(360deg); } }
@keyframes panel-run-flow {
  0%, 10% { transform: translate(var(--x), var(--y)); opacity: 0; }
  25% { opacity: .8; }
  80%, 100% { transform: translate(0, 0) scale(.4); opacity: 0; }
}
@keyframes panel-run-check { to { stroke-dashoffset: 0; } }
@keyframes panel-run-reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .panel-run-progress *, .panel-run-progress *::before { animation: none !important; transition: none !important; }
  .panel-run-progress[data-outcome="complete"] .panel-run-check path { stroke-dashoffset: 0; }
}

/* The shared table chrome leans on --text-muted, too light for the small bold
   column labels; darken it here only, so the other listings keep their look. */
.panel-library th, .panel-library td::before { color: var(--text-body); }
.panel-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.panel-row-actions [data-delete] { margin-left: auto; }
.panel-library .persona-pools .badge-t { white-space: normal; overflow-wrap: anywhere; }
.ai-panel-page .badge-t.neutral, .ai-panel-dialog .badge-t.neutral { color: var(--text-body); }
.ai-panel-page .badge-t.success, .ai-panel-dialog .badge-t.success { color: var(--panel-success-text); }
.ai-panel-page .badge-t, .ai-panel-dialog .badge-t { border: 0; border-radius: 3px; padding: 3px 6px; font-size: .6875rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.ai-panel-page .page-header { align-items: flex-start; gap: 16px; }
.ai-panel-page .page-header > div:first-child { min-width: 0; flex: 1 1 360px; }
.ai-panel-page .page-title { font-size: 2rem; letter-spacing: 0; }
.ai-panel-page .page-subtitle { max-width: 82ch; font-size: .875rem; color: var(--text-body); }
.ai-panel-page .header-actions { gap: 8px; }
.panel-scope a { display: inline-flex; align-items: center; gap: 6px; }
.panel-prepare-heading .section-title { font-size: 1.5rem; }
.panel-library-heading .section-title { font-size: 1.125rem; }
.panel-library-heading .muted-text { font-size: .8125rem; }
.panel-library-heading > div { min-width: 0; }
.panel-tool.btn-t { display: inline-flex; width: 36px; height: 36px; min-width: 36px; padding: 0; border-radius: 6px; flex: none; }
.panel-row-actions .panel-tool { width: 32px; min-width: 32px; height: 36px; background: transparent; border-color: transparent; color: var(--text-secondary); }
.panel-row-actions .panel-tool:hover { background: var(--surface-2); color: var(--text); }
.panel-row-actions [data-delete]:hover { background: var(--danger-tint); color: var(--danger-hover); }
.panel-person-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.panel-person-name input { flex: none; width: 16px; height: 16px; accent-color: var(--brand); }
.panel-person-link { border: 0; padding: 0; background: transparent; text-align: left; color: var(--text); font: inherit; font-weight: 600; overflow-wrap: anywhere; }
.panel-person-link:hover { color: var(--brand-hover); text-decoration: underline; }
.panel-person-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 3px; }
.panel-avatar { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; flex: none; background: var(--success-tint); color: var(--panel-success-text); font-size: .625rem; font-weight: 750; }
.panel-avatar-1 { background: var(--brand-tint); color: var(--brand-hover); }
.panel-avatar-2 { background: var(--danger-tint); color: var(--danger-hover); }
.panel-avatar-3 { background: var(--info-tint); color: var(--info); }
.panel-person-profile { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.panel-person-profile small { font-size: .6875rem; color: var(--text-secondary); }
.panel-profile-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.panel-profile-head > div { min-width: 0; overflow-wrap: anywhere; }
.panel-profile-head .panel-avatar { width: 44px; height: 44px; font-size: .875rem; }
.panel-profile-head .card-t-title { font-size: 1.125rem; }
.panel-json-title { font-size: .875rem; margin: 18px 0 10px; }
.panel-advanced { padding: 16px 0; margin: 8px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.panel-advanced summary { cursor: pointer; font-size: .8125rem; font-weight: 600; }
.panel-advanced summary span { color: var(--text-secondary); font-size: .75rem; font-weight: 400; margin-left: 8px; }
.panel-advanced[open] summary { margin-bottom: 16px; }
.panel-generation-cost { padding: 8px 0; font-size: .875rem; color: var(--panel-success-text); }
.ai-panel-dialog .modal-content { border-radius: 8px; }
.ai-panel-dialog .modal-title { font-size: 1.25rem; }
.ai-panel-dialog .form-label { display: block; font-size: .8125rem; margin-bottom: 5px; }
.ai-panel-dialog .nav-tabs { gap: 8px; }
.ai-panel-dialog .nav-link { padding: 10px; font-size: .875rem; }
.ai-panel-dialog input, .ai-panel-dialog textarea, .ai-panel-dialog select { min-width: 0; }
.panel-library .data-table { font-size: .8125rem; }
.panel-library .data-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; background: transparent; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 14px 0; margin: 0; box-shadow: none; }
.panel-library .data-table td { display: block; padding: 3px 0; min-width: 0; }
.panel-library .data-table td::before { display: none; }
.panel-library .data-table td:first-child { grid-column: 1 / -1; }
.panel-library .data-table td:nth-child(2) { padding-left: 26px; }
.panel-library .data-table td:nth-child(3) { grid-column: 1 / -1; grid-row: 3; padding: 8px 0 6px 26px; }
.panel-library .data-table td:nth-child(4) { grid-column: 2; grid-row: 2; padding-left: 10px; }
.panel-library .data-table td:last-child { grid-column: 1 / -1; padding-left: 24px; }
.panel-library .cell-title { min-width: 0; }

@media (min-width: 576px) {
  .panel-run-form, .panel-run-summary { padding: 24px; }
}
@media (min-width: 768px) {
  .panel-space { flex-direction: row; align-items: center; gap: 18px; padding: 24px 20px; }
  .panel-space .panel-space-text strong { font-size: .9375rem; }
  .panel-space .panel-space-text small { font-size: .75rem; }
  .panel-space-go { display: block; }
  .panel-pool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .panel-pool-card { display: flex; flex-direction: column; gap: 8px; min-height: 224px; padding: 18px; }
  .panel-pool-top { margin-bottom: 14px; width: 100%; }
  .panel-pool-foot { width: 100%; }
  .panel-pool-desc { margin-bottom: 14px; }
  .panel-pool-foot .bi { display: block; }
  .panel-run-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; }
}
@media (min-width: 992px) {
  .panel-pool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .panel-row-actions { flex-wrap: nowrap; }
  .panel-library { background: transparent; border: 0; border-radius: 0; }
  .panel-library .data-table { table-layout: fixed; background: transparent; border: 0; border-radius: 0; }
  .panel-library .data-table th { font-size: .6875rem; font-weight: 500; text-transform: none; letter-spacing: 0; padding: 12px 10px; }
  .panel-library .data-table th:nth-child(1) { width: 24%; }
  .panel-library .data-table th:nth-child(2) { width: 19%; }
  .panel-library .data-table th:nth-child(3) { width: 25%; }
  .panel-library .data-table th:nth-child(4) { width: 10%; }
  .panel-library .data-table th:last-child { width: 190px; }
  .panel-library .data-table tbody tr { display: table-row; }
  .panel-library .data-table td, .panel-library .data-table td[data-label] { display: table-cell; padding: 14px 10px; }
}
@media (min-width: 1280px) {
  .panel-run-layout { grid-template-columns: minmax(0, 1fr) 320px; }
  .panel-audience-preview { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; }
  .panel-audience-preview .panel-audience-person { flex-direction: column; align-items: flex-start; gap: 8px; border: 0; }
  .panel-pool-directory { grid-template-columns: minmax(0, 3fr) minmax(100px, .55fr); align-items: start; }
  .panel-pool-directory:not(:has(.panel-pool-card)) { grid-template-columns: 1fr; }
  .panel-pool-new { flex-direction: column; min-height: 224px; }
}

/* Integration probes (admin console): one card per executed call. */
.probe-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.probe-step { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: 12px; padding: 14px; }
.probe-step.pass { border-left-color: var(--success); }
.probe-step.fail, .probe-step.error { border-left-color: var(--danger); }
.probe-step.skipped { opacity: .72; }
.probe-head { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.probe-state { font-size: 1rem; line-height: 1.4; }
.probe-step.pass .probe-state { color: var(--success); }
.probe-step.fail .probe-state, .probe-step.error .probe-state { color: var(--danger); }
.probe-step.skipped .probe-state { color: var(--text-muted); }
.probe-title { flex: 1 1 200px; min-width: 0; }
.probe-label { font-weight: 600; font-size: .9375rem; }
.probe-request { display: block; font-size: .75rem; color: var(--text-muted); word-break: break-all; }
.probe-meta { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.probe-latency { font-size: .75rem; color: var(--text-muted); white-space: nowrap; }
.probe-checks { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.probe-checks li { font-size: .8125rem; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.probe-checks li.ok > i { color: var(--success); }
.probe-checks li.ko { color: var(--danger); font-weight: 500; }
.probe-body { margin-top: 10px; }
.probe-body > summary { font-size: .8125rem; color: var(--text-muted); cursor: pointer; }
.probe-body pre { margin: 8px 0 0; padding: 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; font-size: .75rem; max-height: 320px; overflow: auto; }