/* ============================================================
   AccessAI Admin UI — scoped under #accessai-root
   ============================================================ */

:root {
  --aai-purple:      #3858e9;
  --aai-purple-dark: #2642c7;
  --aai-bg:          #f6f7f8;
  --aai-surface:     #ffffff;
  --aai-border:      #dde1e7;
  --aai-text:        #1e1e2e;
  --aai-muted:       #6b7280;
  --aai-critical:    #ef4444;
  --aai-warning:     #f59e0b;
  --aai-notice:      #3b82f6;
  --aai-passed:      #22c55e;
  --aai-radius:      8px;
  --aai-shadow:      0 1px 3px rgba(0, 0, 0, .08);
}

/* Reset inside our root only */
#accessai-root * {
  box-sizing: border-box;
}

/* ── App shell ─────────────────────────────────────────────── */
.aai-app {
  display: flex;
  min-height: 100vh;
  background: var(--aai-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  color: var(--aai-text);
}

/* ── Sidebar nav ───────────────────────────────────────────── */
.aai-nav {
  width: 200px;
  flex-shrink: 0;
  background: var(--aai-surface);
  border-right: 1px solid var(--aai-border);
  display: flex;
  flex-direction: column;
  padding: 20px 0;
}

.aai-nav__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px 20px;
  font-size: 16px;
  font-weight: 700;
  color: var(--aai-purple);
  border-bottom: 1px solid var(--aai-border);
}

.aai-nav__icon { font-size: 18px; }

.aai-nav__score-badge {
  margin: 12px 16px 4px;
  padding: 4px 10px;
  background: var(--aai-purple);
  color: #fff;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

.aai-nav__links {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.aai-nav__link {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: var(--aai-muted);
  border-left: 3px solid transparent;
  transition: color .15s, border-color .15s;
}

.aai-nav__link:hover {
  color: var(--aai-purple);
}

.aai-nav__link--active {
  color: var(--aai-purple);
  font-weight: 600;
  border-left-color: var(--aai-purple);
  background: #f3f1ff;
}

/* ── Main content area ─────────────────────────────────────── */
.aai-main {
  flex: 1;
  padding: 28px 32px;
  overflow-y: auto;
}

/* ── Buttons ───────────────────────────────────────────────── */
.aai-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: var(--aai-radius);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, opacity .15s;
  white-space: nowrap;
}

.aai-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.aai-btn--primary {
  background: var(--aai-purple);
  color: #fff;
}

.aai-btn--primary:hover:not(:disabled) {
  background: var(--aai-purple-dark);
}

.aai-btn--secondary {
  background: #eaedfc;
  color: var(--aai-purple-dark);
}

.aai-btn--ghost {
  background: transparent;
  border: 1px solid var(--aai-border);
  color: var(--aai-text);
}

.aai-btn--ghost:hover:not(:disabled) {
  background: var(--aai-bg);
}

/* ── Spinner ───────────────────────────────────────────────── */
.aai-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: aai-spin .6s linear infinite;
}

@keyframes aai-spin { to { transform: rotate(360deg); } }

/* ── Score ring ────────────────────────────────────────────── */
.score-ring {
  position: relative;
  display: inline-flex;
}

.score-ring__label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.score-ring__score {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
}

.score-ring__grade {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
}

/* ── Dashboard ─────────────────────────────────────────────── */
.aai-dashboard__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  background: var(--aai-surface);
  border: 1px solid var(--aai-border);
  border-radius: var(--aai-radius);
  padding: 20px 24px;
  margin-bottom: 20px;
  box-shadow: var(--aai-shadow);
}

.aai-dashboard__score-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
}

.aai-dashboard__score-label {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
}

.aai-dashboard__url,
.aai-dashboard__date {
  margin: 0;
  font-size: 12px;
  color: var(--aai-muted);
}

/* ── Stats row ─────────────────────────────────────────────── */
.aai-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}
.aai-stats-disclaimer {
  font-size: 12px; color: var(--aai-muted); margin-bottom: 4px; line-height: 1.4;
  cursor: default;
}
.aai-stats-disclaimer span { border-bottom: 1px dashed var(--aai-muted); }
.aai-dashboard-tip {
  font-size: 12px; color: #374151; background: #f0fdf4;
  border: 1px solid #bbf7d0; border-radius: 6px;
  padding: 7px 12px; margin-bottom: 20px; line-height: 1.4;
}

.aai-stat-card {
  background: var(--aai-surface);
  border: 1px solid var(--aai-border);
  border-radius: var(--aai-radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  box-shadow: var(--aai-shadow);
}

.aai-stat-card__value {
  font-size: 28px;
  font-weight: 800;
}

.aai-stat-card__label {
  font-size: 12px;
  color: var(--aai-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.aai-stat-card--total    .aai-stat-card__value { color: var(--aai-purple);   }
.aai-stat-card--critical .aai-stat-card__value { color: var(--aai-critical); }
.aai-stat-card--warning  .aai-stat-card__value { color: var(--aai-warning);  }
.aai-stat-card--notice   .aai-stat-card__value { color: var(--aai-notice);   }
.aai-stat-card--passed   .aai-stat-card__value { color: var(--aai-passed);   }

/* ── Dashboard ─────────────────────────────────────────────── */
.aai-dashboard { max-width: 1100px; }

/* ── Dashboard body (full-width, detail opens as modal) ─────── */
.aai-dashboard__body {
  display: block;
}

.aai-dashboard__list-pane {
  background: var(--aai-surface);
  border: 1px solid var(--aai-border);
  border-radius: var(--aai-radius);
  padding: 16px 20px;
  box-shadow: var(--aai-shadow);
}

.aai-pane-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
}

/* ── Issue list ────────────────────────────────────────────── */
.issue-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.issue-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: var(--aai-bg);
  border: 1px solid var(--aai-border);
  border-radius: var(--aai-radius);
  padding: 10px 14px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.issue-row:hover,
.issue-row--selected {
  border-color: var(--aai-purple);
  background: #f3f1ff;
}

.issue-row__badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 2px 8px;
  border-radius: 20px;
}

.issue-row__badge--critical { background: #fef2f2; color: var(--aai-critical); }
.issue-row__badge--warning  { background: #fffbeb; color: var(--aai-warning);  }
.issue-row__badge--notice   { background: #eff6ff; color: var(--aai-notice);   }

.issue-row__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.issue-row__title {
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.issue-row__meta {
  font-size: 11px;
  color: var(--aai-muted);
}

.issue-row__arrow {
  color: var(--aai-muted);
  font-size: 16px;
}

/* ── Detail panel ──────────────────────────────────────────── */
.detail-panel {
  background: var(--aai-surface);
  border: 1px solid var(--aai-border);
  border-radius: var(--aai-radius);
  padding: 20px;
  box-shadow: var(--aai-shadow);
}

.detail-panel--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--aai-muted);
  min-height: 180px;
}

.detail-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.detail-panel__close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--aai-muted);
  padding: 2px 6px;
  border-radius: 4px;
}

.detail-panel__close:hover { background: var(--aai-bg); }

.detail-panel__title {
  margin: 0 0 12px;
  font-size: 15px;
}

.detail-panel__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  font-size: 13px;
  margin-bottom: 14px;
}

.detail-panel__meta dt { color: var(--aai-muted); }
.detail-panel__meta code { font-size: 12px; }

.detail-panel__description {
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 16px;
}

.detail-panel__code-block {
  background: #1e1e2e;
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 16px;
  overflow-x: auto;
}

.detail-panel__code-label {
  font-size: 11px;
  color: #9ca3af;
  margin: 0 0 6px;
}

.detail-panel__code-block pre {
  margin: 0;
  font-size: 12px;
  color: #e2e8f0;
  white-space: pre-wrap;
  word-break: break-all;
}

.detail-panel__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Empty / loading / error states ───────────────────────── */
.aai-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--aai-muted);
}

.aai-empty__primary { font-size: 16px; font-weight: 600; color: var(--aai-text); margin-bottom: 6px; }
.aai-empty__sub { font-size: 13px; color: var(--aai-muted); max-width: 440px; margin: 0 auto; line-height: 1.5; }

.aai-empty__icon {
  display: block;
  font-size: 32px;
  margin-bottom: 8px;
  color: var(--aai-passed);
}

/* ── Skeleton shimmer ──────────────────────────────────────── */
@keyframes aai-shimmer {
  0%   { background-position: -800px 0; }
  100% { background-position:  800px 0; }
}
.aai-skel {
  display: block;
  background: linear-gradient(90deg, #f0f0f0 25%, #e4e4e4 50%, #f0f0f0 75%);
  background-size: 800px 100%;
  animation: aai-shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}

.aai-loading { color: var(--aai-muted); padding: 20px 0; }
.aai-error   { color: var(--aai-critical); padding: 8px 0; }
.aai-muted   { color: var(--aai-muted); }

/* ── Report / Audit view ────────────────────────────────────── */
.aai-report { max-width: 1100px; }

/* Header */
.aai-audit-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.aai-audit-title { margin: 0 0 4px; font-size: 22px; font-weight: 700; }
.aai-audit-site-url {
  display: block;
  font-size: 13px;
  color: var(--aai-purple);
  text-decoration: none;
  margin-bottom: 2px;
  word-break: break-all;
}
.aai-audit-site-url:hover { text-decoration: underline; }
.aai-audit-date { font-size: 12px; color: var(--aai-muted); }

.aai-audit-header-score { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.aai-audit-score-circle {
  width: 72px; height: 72px; border-radius: 50%;
  border: 4px solid;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.aai-audit-score-val  { font-size: 22px; font-weight: 800; line-height: 1; }
.aai-audit-score-lbl  { font-size: 10px; color: var(--aai-muted); }
.aai-audit-grade {
  width: 40px; height: 40px; border-radius: 50%;
  color: #fff; font-size: 18px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* Standard notice */
.aai-audit-standard {
  display: flex; gap: 24px; flex-wrap: wrap;
  font-size: 12px; color: var(--aai-muted);
  padding: 8px 14px;
  background: var(--aai-bg);
  border: 1px solid var(--aai-border);
  border-radius: var(--aai-radius);
  margin-bottom: 16px;
}
.aai-audit-standard strong { color: var(--aai-text); }

/* Summary bar */
.aai-audit-summary {
  display: flex; gap: 0;
  background: var(--aai-surface);
  border: 1px solid var(--aai-border);
  border-radius: var(--aai-radius);
  box-shadow: var(--aai-shadow);
  margin-bottom: 16px;
  overflow: hidden;
}
.aai-audit-summary-stat {
  flex: 1; padding: 14px 0; text-align: center;
  border-right: 1px solid var(--aai-border);
}
.aai-audit-summary-stat:last-child { border-right: none; }
.aai-audit-summary-val { display: block; font-size: 26px; font-weight: 800; line-height: 1.1; }
.aai-audit-summary-lbl { display: block; font-size: 11px; color: var(--aai-muted); margin-top: 2px; text-transform: uppercase; letter-spacing: .04em; }

/* AI summary */
.aai-audit-ai-summary {
  background: #f8f7ff; border: 1px solid #ddd6fe;
  border-radius: var(--aai-radius); padding: 12px 16px;
  margin-bottom: 14px; font-size: 13px; line-height: 1.6;
}
.aai-audit-ai-summary strong { display: block; margin-bottom: 6px; color: var(--aai-purple); }
.aai-audit-ai-summary p { margin: 0; }
.aai-audit-ai-md { font-size: 13px; line-height: 1.6; color: var(--aai-text); }
.aai-audit-ai-md .md-p:last-child { margin-bottom: 0; }
.aai-audit-ai-md .md-pre { font-family: ui-monospace, SFMono-Regular, monospace; white-space: pre-wrap; word-break: break-word; }

/* ── Markdown output shared styles ── */
.md-h  { font-size: 13px; font-weight: 700; margin: 10px 0 4px; color: var(--aai-text); }
.md-p  { margin: 0 0 6px; }
.md-ul, .md-ol { margin: 4px 0 8px 18px; padding: 0; }
.md-ul li, .md-ol li { margin: 2px 0; }
.md-ic { background: #1e1e2e; color: #cdd6f4; padding: 1px 5px; border-radius: 3px; font-size: 12px; font-family: monospace; }
.md-pre { background: #1e1e2e; color: #cdd6f4; padding: 10px 12px; border-radius: 6px; font-size: 12px; overflow-x: auto; margin: 6px 0; }
.md-pre code { font-family: monospace; background: none; padding: 0; color: inherit; }

/* Toolbar */
.aai-audit-toolbar {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 12px; margin-bottom: 12px; flex-wrap: wrap;
}
.aai-audit-filters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.aai-audit-filter-btn {
  padding: 4px 12px; border: 1px solid #d1d5db;
  border-radius: 20px; background: #f3f4f6;
  color: #374151; font-size: 12px; font-weight: 500;
  cursor: pointer; transition: all .15s;
}
.aai-audit-filter-btn:hover { border-color: var(--aai-purple); color: var(--aai-purple); }
.aai-audit-filter-btn--active {
  background: var(--aai-purple); color: #fff; border-color: var(--aai-purple);
}
.aai-audit-toolbar-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.aai-audit-search {
  padding: 5px 10px; border: 1px solid var(--aai-border);
  border-radius: 6px; font-size: 13px; width: 200px;
  outline: none; background: #fff; color: var(--aai-text);
}
.aai-audit-search:focus { border-color: var(--aai-purple); box-shadow: 0 0 0 2px rgba(56,88,233,.15); }

/* Table */
.aai-audit-table-wrap {
  background: var(--aai-surface);
  border: 1px solid var(--aai-border);
  border-radius: var(--aai-radius);
  box-shadow: var(--aai-shadow);
  overflow: hidden;
  margin-bottom: 16px;
}
.aai-audit-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.aai-audit-th {
  text-align: left; padding: 10px 12px;
  background: var(--aai-bg); font-weight: 600; font-size: 12px;
  text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 2px solid var(--aai-border);
  color: var(--aai-muted); white-space: nowrap;
}
.aai-audit-th--num { width: 40px; }

.aai-audit-row { transition: background .1s; }
.aai-audit-row:hover { background: #fafafa; }
.aai-audit-row--open { background: #f8f7ff; }

.aai-audit-td {
  padding: 10px 12px; border-bottom: 1px solid var(--aai-border);
  vertical-align: middle; color: var(--aai-text);
}
.aai-audit-td--num   { font-size: 12px; font-weight: 600; color: var(--aai-muted); width: 40px; }
.aai-audit-td--title { font-weight: 500; max-width: 280px; }
.aai-audit-td--users { font-size: 12px; color: var(--aai-muted); white-space: nowrap; }
.aai-audit-td--count { text-align: center; font-weight: 600; }
.aai-audit-td--chevron { font-size: 10px; color: var(--aai-muted); width: 28px; text-align: center; }

.aai-audit-link {
  font-size: 12px; color: var(--aai-purple); text-decoration: none;
  max-width: 180px; display: block; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.aai-audit-link:hover { text-decoration: underline; }
.aai-audit-page-url {
  display: block; font-size: 11px; color: var(--aai-muted);
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aai-audit-wcag {
  display: inline-block; font-size: 12px; font-weight: 600;
  color: var(--aai-purple); text-decoration: none;
  background: #eaedfc; padding: 2px 7px; border-radius: 4px;
}
.aai-audit-wcag:hover { text-decoration: underline; }

.aai-audit-badge {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 11px; font-weight: 600; text-transform: capitalize; white-space: nowrap;
}

/* Expanded detail row */
.aai-audit-detail-row td { padding: 0; border-bottom: 1px solid var(--aai-border); }
.aai-audit-detail {
  padding: 16px 20px;
  background: #f8f7ff;
  border-top: 1px solid #ddd6fe;
}
.aai-audit-detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.aai-audit-detail-full { grid-column: 1 / -1; }
.aai-audit-detail-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--aai-muted); margin: 0 0 5px;
}
.aai-audit-detail-text {
  font-size: 13px; color: var(--aai-text); line-height: 1.6; margin: 0;
}
.aai-audit-detail-code {
  display: block; background: #f3f4f6; padding: 4px 8px;
  border-radius: 4px; font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  word-break: break-all; color: var(--aai-text);
}
.aai-audit-detail-pre {
  display: block; background: #1e1e2e; color: #cdd6f4;
  padding: 10px 12px; border-radius: 6px;
  font-size: 11px; font-family: ui-monospace, SFMono-Regular, monospace;
  overflow-x: auto; white-space: pre; margin: 0;
}
.aai-audit-detail-link {
  font-size: 13px; color: var(--aai-purple); text-decoration: none; font-weight: 500;
}
.aai-audit-detail-link:hover { text-decoration: underline; }

/* Report top notice */
.aai-audit-notice {
  font-size: 13px; color: #374151; background: #fffbeb;
  border: 1px solid #fde68a; border-radius: 6px;
  padding: 10px 14px; margin-bottom: 16px; line-height: 1.5;
}

/* Footer note */
.aai-audit-footer-note {
  font-size: 12px; color: var(--aai-muted); line-height: 1.6;
  padding-top: 12px; border-top: 1px solid var(--aai-border);
}

/* Legacy — keep for backward compat */
.aai-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
  background: var(--aai-surface); border: 1px solid var(--aai-border);
  border-radius: var(--aai-radius); overflow: hidden; box-shadow: var(--aai-shadow);
}
.aai-table th {
  text-align: left; padding: 10px 14px; background: var(--aai-bg);
  font-weight: 600; border-bottom: 1px solid var(--aai-border);
}
.aai-table td { padding: 10px 14px; border-bottom: 1px solid var(--aai-border); vertical-align: top; }
.aai-table tr:last-child td { border-bottom: none; }

/* ── Settings ──────────────────────────────────────────────── */
.aai-settings {
  max-width: 600px;
}

.aai-settings h2 {
  margin: 0 0 4px;
  font-size: 22px;
}

.aai-settings__section {
  background: var(--aai-surface);
  border: 1px solid var(--aai-border);
  border-radius: var(--aai-radius);
  padding: 20px 24px;
  margin: 20px 0;
  box-shadow: var(--aai-shadow);
}

.aai-settings__section h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

/* ── Form fields ───────────────────────────────────────────── */
.aai-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.aai-field span,
.aai-field label {
  font-weight: 600;
  font-size: 13px;
}

.aai-field input[type="text"],
.aai-field input[type="password"],
.aai-field select {
  padding: 8px 10px;
  border: 1px solid var(--aai-border);
  border-radius: 6px;
  font-size: 14px;
  background: var(--aai-bg);
  color: var(--aai-text);
  width: 100%;
}

.aai-field input[type="text"]:focus,
.aai-field input[type="password"]:focus,
.aai-field select:focus {
  outline: 2px solid var(--aai-purple);
  border-color: var(--aai-purple);
}

.aai-field--fieldset {
  border: none;
  padding: 0;
  margin: 0 0 14px;
}

.aai-field--fieldset legend {
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 8px;
}

.aai-radio,
.aai-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  margin-bottom: 6px;
  cursor: pointer;
}

.aai-field__key-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.aai-field__key-row input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--aai-border);
  border-radius: 6px;
  font-size: 14px;
  background: var(--aai-bg);
}

/* ── Widget configurator ───────────────────────────────────── */
.aai-widget-config h2 {
  margin: 0 0 4px;
  font-size: 22px;
}

.aai-widget-config__body {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 24px;
  align-items: start;
  margin-top: 20px;
}

@media (max-width: 860px) {
  .aai-widget-config__body { grid-template-columns: 1fr; }
}

.aai-widget-config__controls {
  background: var(--aai-surface);
  border: 1px solid var(--aai-border);
  border-radius: var(--aai-radius);
  padding: 20px;
  box-shadow: var(--aai-shadow);
  position: sticky;
  top: 20px;
}

.aai-widget-config__preview {
  background: var(--aai-surface);
  border: 1px solid var(--aai-border);
  border-radius: var(--aai-radius);
  padding: 20px 24px;
  box-shadow: var(--aai-shadow);
  position: sticky;
  top: 20px;
}

.aai-widget-config__preview h3 {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
}

/* widget-preview styles replaced by inline scoped CSS in WidgetConfigurator.tsx */

/* ── Issues by page chart ──────────────────────────────────── */
.aai-trend-card {
  background: var(--aai-surface);
  border: 1px solid var(--aai-border);
  border-radius: var(--aai-radius);
  padding: 16px 20px 14px;
  margin-bottom: 20px;
  box-shadow: var(--aai-shadow);
}

.aai-chart-sub {
  font-size: 12px;
  color: var(--aai-muted);
  margin: -6px 0 14px;
}

.aai-chart-empty {
  font-size: 13px;
  color: var(--aai-muted);
  margin: 0;
}

.aai-ibc { display: flex; flex-direction: column; gap: 9px; }

.aai-ibc__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.aai-ibc__label {
  width: 130px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--aai-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.aai-ibc__track {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.aai-ibc__bar {
  display: flex;
  height: 14px;
  border-radius: 3px;
  overflow: hidden;
  min-width: 4px;
  transition: width .3s ease;
}

.aai-ibc__seg { display: block; }
.aai-ibc__seg--critical { background: var(--aai-critical); }
.aai-ibc__seg--warning  { background: var(--aai-warning);  }
.aai-ibc__seg--notice   { background: var(--aai-notice);   }

.aai-ibc__count {
  font-size: 12px;
  font-weight: 600;
  color: var(--aai-muted);
  flex-shrink: 0;
  min-width: 20px;
}

.aai-ibc__legend {
  display: flex;
  gap: 14px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--aai-border);
}

.aai-ibc__legend span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--aai-muted);
}

.aai-ibc__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  font-style: normal;
}
.aai-ibc__dot--critical { background: var(--aai-critical); }
.aai-ibc__dot--warning  { background: var(--aai-warning);  }
.aai-ibc__dot--notice   { background: var(--aai-notice);   }

/* ── AI suggestion block ───────────────────────────────────── */
.detail-panel__ai-output {
  margin-top: 14px;
  background: #f8f7ff;
  border: 1px solid #ddd6fe;
  border-radius: 8px;
  padding: 12px 14px;
}

.detail-panel__ai-md {
  font-size: 13px;
  line-height: 1.6;
  color: var(--aai-text);
}
.detail-panel__ai-md .md-p:last-child { margin-bottom: 0; }
.detail-panel__ai-md .md-pre { font-family: ui-monospace, SFMono-Regular, monospace; white-space: pre-wrap; word-break: break-word; }

.detail-panel__ai-hint {
  margin-top: 10px;
  font-size: 12px;
}

/* ── Success / key-set indicator ───────────────────────────── */
.aai-success {
  color: #16a34a;
  font-size: 13px;
  font-weight: 600;
}

.aai-key-set {
  font-weight: 400;
  font-size: 12px;
  color: var(--aai-muted);
  margin-left: 6px;
}

/* ── Settings save row ─────────────────────────────────────── */
.aai-settings__save-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ── Dark spinner (for ghost/light buttons) ────────────────── */
.aai-spinner--dark {
  border-color: rgba(0, 0, 0, .2);
  border-top-color: var(--aai-text);
}

/* ── Screen-reader only ────────────────────────────────────── */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ── Page / Post scanner ───────────────────────────────────── */
.aai-page-scanner {}

.aai-page-scanner__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.aai-page-scanner__sub {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--aai-muted);
}

/* Progress bar */
.aai-progress-bar {
  height: 6px;
  background: var(--aai-border);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 20px;
}

.aai-progress-bar__fill {
  height: 100%;
  background: var(--aai-purple);
  border-radius: 3px;
  transition: width .3s ease;
}

/* Scan table */
.aai-scan-table-wrap {
  background: var(--aai-surface);
  border: 1px solid var(--aai-border);
  border-radius: var(--aai-radius);
  box-shadow: var(--aai-shadow);
  overflow-x: auto;
}

.aai-scan-table {
  width: 100%;
  border-collapse: collapse;
}

.aai-scan-table th {
  text-align: left;
  padding: 10px 14px;
  background: var(--aai-bg);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--aai-muted);
  border-bottom: 1px solid var(--aai-border);
  white-space: nowrap;
}

.aai-scan-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--aai-border);
  vertical-align: middle;
}

.aai-scan-table tbody tr:last-child td { border-bottom: none; }

.aai-scan-table tbody tr:hover { background: #fafafe; }

.aai-scan-table__link {
  color: var(--aai-text);
  font-weight: 500;
  text-decoration: none;
}
.aai-scan-table__link:hover { color: var(--aai-purple); text-decoration: underline; }

.aai-scan-table__url {
  font-size: 11px;
  color: var(--aai-muted);
  margin-top: 2px;
  word-break: break-all;
}

.aai-scan-table__score {
  font-size: 13px;
  font-weight: 500;
}

/* Type badge */
.aai-badge {
  display: inline-block;
  padding: 2px 8px;
  background: #f3f1ff;
  color: var(--aai-purple);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
}

/* Small action button (used inside table rows) */
.aai-btn--sm {
  padding: 5px 12px;
  font-size: 12px;
  white-space: nowrap;
}

.aai-btn--ghost {
  background: transparent;
  color: var(--aai-purple);
  border: 1px solid var(--aai-purple);
}
.aai-btn--ghost:hover { background: #f3f1ff; }
.aai-btn--active {
  background: var(--aai-purple);
  color: #fff;
}

/* Active row highlight */
.aai-scan-table__row--active td { background: #f3f1ff; }

/* Split layout: table + results panel side by side */
.aai-ps-layout {
  display: block;
}

/* ── Results modal ─────────────────────────────────────────── */
/* ── Scan slide-in panel (replaces ps-modal popup) ─────────── */

.ssi-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 999980;
  transition: background .25s ease;
  pointer-events: none;
}
.ssi-backdrop--visible {
  background: rgba(0, 0, 0, .35);
  pointer-events: auto;
}

.ssi-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 420px;
  max-width: 100vw;
  height: 100%;
  background: #fff;
  box-shadow: -4px 0 28px rgba(0, 0, 0, .18);
  z-index: 999990;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.ssi-panel--open { transform: translateX(0); }

.ssi-hd {
  padding: 14px 18px;
  background: var(--aai-purple);
  color: #fff;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}
.ssi-hd__left { flex: 1; min-width: 0; }
.ssi-hd__title { display: block; font-size: 14px; font-weight: 600; }
.ssi-hd__url {
  display: block;
  font-size: 11px;
  opacity: .75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.ssi-hd__close {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 0;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  opacity: .8;
}
.ssi-hd__close:hover { opacity: 1; }

.ssi-score {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--aai-border);
  flex-shrink: 0;
}
.ssi-score__grade {
  font-size: 22px;
  font-weight: 700;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.ssi-score__val { font-size: 20px; font-weight: 700; line-height: 1.1; }
.ssi-score__val small { font-size: 12px; font-weight: 400; color: var(--aai-muted); }
.ssi-score__sub { font-size: 11px; color: var(--aai-muted); margin-top: 2px; }

.ssi-filters {
  display: flex;
  gap: 6px;
  padding: 10px 18px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--aai-border);
  flex-shrink: 0;
}

/* Sliding two-pane container */
.ssi-views {
  position: relative;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.ssi-list-view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  transform: translateX(0);
  transition: transform .26s cubic-bezier(.4, 0, .2, 1);
  overflow: hidden;
}
.ssi-list-view--out { transform: translateX(-100%); }

.ssi-detail-view {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.4, 0, .2, 1);
}
.ssi-detail-view--in { transform: translateX(0); }

.ssi-detail-body { padding: 16px 18px; }

.ssi-detail-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.ssi-detail-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--aai-text);
  line-height: 1.35;
}

.ssi-detail-desc {
  font-size: 13px;
  color: var(--aai-muted);
  margin: 0 0 14px;
  line-height: 1.55;
}

.ssi-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--aai-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  margin-bottom: 14px;
}
.ssi-back:hover { color: var(--aai-purple); }

.ssi-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 18px;
}

.ssi-issue {
  border-left: 3px solid var(--aai-border);
  margin-bottom: 8px;
  border-radius: 0 6px 6px 0;
  overflow: hidden;
}
.ssi-issue__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
}
.ssi-issue__main { flex: 1; min-width: 0; }
.ssi-issue__title { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; }
.ssi-issue__meta { display: block; font-size: 11px; color: var(--aai-muted); margin-top: 2px; }

/* ── Page results side-panel ───────────────────────────────── */
.ps-panel {
  background: var(--aai-surface);
  border: 1px solid var(--aai-border);
  border-radius: var(--aai-radius);
  box-shadow: var(--aai-shadow);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 180px);
  overflow: hidden;
  position: sticky;
  top: 20px;
}

.ps-panel__hd {
  padding: 14px 16px;
  background: var(--aai-purple);
  color: #fff;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}

.ps-panel__title { font-size: 14px; font-weight: 600; }

.ps-panel__url {
  font-size: 11px;
  opacity: .75;
  word-break: break-all;
  margin-top: 2px;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ps-panel__close {
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
}

.ps-panel__score {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--aai-border);
  flex-shrink: 0;
}

.ps-panel__grade {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.ps-panel__score-val {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
}
.ps-panel__score-val small { font-size: 12px; font-weight: 400; color: var(--aai-muted); }
.ps-panel__score-sub { font-size: 11px; color: var(--aai-muted); margin-top: 2px; }

.ps-panel__filters {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--aai-border);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.ps-filter-btn {
  padding: 3px 10px;
  border: 1px solid #d1d5db;
  border-radius: 20px;
  background: #f3f4f6;
  color: #374151;
  font-size: 12px;
  cursor: pointer;
  transition: all .15s;
}
.ps-filter-btn:hover { border-color: var(--aai-purple); color: var(--aai-purple); background: #eaedfc; }
.ps-filter-btn--active {
  background: var(--aai-purple);
  color: #fff;
  border-color: var(--aai-purple);
}

.ps-panel__body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 12px;
}

.ps-panel__empty {
  text-align: center;
  color: var(--aai-passed);
  padding: 24px 0;
  font-size: 13px;
}
.ps-panel__empty-sub {
  font-size: 12px;
  color: var(--aai-muted);
  margin-top: 4px;
  line-height: 1.5;
}

/* ── Issue cards inside the results panel ──────────────────── */
.ps-issue {
  border-left: 3px solid var(--aai-border);
  margin-bottom: 8px;
  border-radius: 0 6px 6px 0;
  overflow: hidden;
  cursor: pointer;
  outline: none;
}
.ps-issue:focus-visible { box-shadow: 0 0 0 2px var(--aai-purple); }
.ps-issue--critical { border-color: var(--aai-critical); }
.ps-issue--warning  { border-color: var(--aai-warning); }
.ps-issue--notice   { border-color: var(--aai-notice); }

.ps-issue__row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 10px;
  background: rgba(0, 0, 0, .025);
  user-select: none;
}

.ps-issue__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}
.ps-issue__dot--critical { background: var(--aai-critical); }
.ps-issue__dot--warning  { background: var(--aai-warning); }
.ps-issue__dot--notice   { background: var(--aai-notice); }

.ps-issue__main { flex: 1; min-width: 0; }
.ps-issue__title { display: block; font-size: 13px; font-weight: 600; line-height: 1.3; }
.ps-issue__meta  { display: block; font-size: 11px; color: var(--aai-muted); margin-top: 2px; }

.ps-issue__chevron { font-size: 10px; color: var(--aai-muted); padding-top: 3px; flex-shrink: 0; }

.ps-issue__detail {
  padding: 10px 10px;
  border-top: 1px solid rgba(0, 0, 0, .06);
  background: #fff;
  font-size: 13px;
}

.ps-issue__desc { margin: 0 0 8px; color: var(--aai-text); }

.ps-issue__field { margin-bottom: 8px; }
.ps-issue__field:last-child { margin-bottom: 0; }

.ps-issue__field-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--aai-muted);
  margin-bottom: 4px;
}

.ps-issue__code {
  display: block;
  background: #f3f4f6;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  word-break: break-all;
}

.ps-issue__learn {
  display: inline-block;
  font-size: 11px;
  color: var(--aai-purple);
  text-decoration: none;
  margin-top: 6px;
}
.ps-issue__learn:hover { text-decoration: underline; }

.ps-issue__pre {
  display: block;
  background: #1e1e2e;
  color: #cdd6f4;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  overflow-x: auto;
  white-space: pre;
  margin: 0;
}

/* ── Type filter pills ─────────────────────────────────────── */
/* ── Pages & Posts toolbar ─────────────────────────────────── */

.aai-ps-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.aai-ps-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 340px;
  width: 100%;
}

.aai-ps-search-icon {
  position: absolute;
  left: 10px;
  width: 14px;
  height: 14px;
  color: var(--aai-muted);
  pointer-events: none;
  flex-shrink: 0;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
}

.aai-ps-search {
  width: 100%;
  padding: 7px 30px 7px 34px !important;
  border: 1px solid var(--aai-border);
  border-radius: 6px;
  font-size: 13px;
  color: var(--aai-text);
  background: #fff;
  outline: none;
  transition: border-color .15s;
  box-sizing: border-box;
}

.aai-ps-search:focus {
  border-color: var(--aai-purple);
}

.aai-ps-search::-webkit-search-cancel-button { display: none; }

.aai-ps-search-clear {
  position: absolute;
  right: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 11px;
  color: var(--aai-muted);
  padding: 2px 4px;
  line-height: 1;
}

.aai-ps-search-clear:hover { color: var(--aai-text); }

/* ── Type filter searchable dropdown ──────────────────────── */

.aai-type-dd-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}

.aai-type-dd-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--aai-muted);
  white-space: nowrap;
}

.aai-type-dd {
  position: relative;
  display: inline-block;
  margin-bottom: 0;
}

.aai-type-dd__trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--aai-border);
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: var(--aai-text);
  cursor: pointer;
  transition: border-color .15s;
  min-width: 160px;
}
.aai-type-dd__trigger:hover { border-color: var(--aai-purple); }

.aai-type-dd__label { flex: 1; text-align: left; }

.aai-type-dd__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  background: var(--aai-bg);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--aai-muted);
}

.aai-type-dd__chevron { font-size: 9px; color: var(--aai-muted); }

.aai-type-dd__menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid var(--aai-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.10);
  z-index: 200;
  overflow: hidden;
}

.aai-type-dd__search-wrap {
  padding: 8px;
  border-bottom: 1px solid var(--aai-border);
}

.aai-type-dd__search {
  width: 100%;
  padding: 5px 9px;
  border: 1px solid var(--aai-border);
  border-radius: 5px;
  font-size: 12px;
  outline: none;
  box-sizing: border-box;
}
.aai-type-dd__search:focus { border-color: var(--aai-purple); }

.aai-type-dd__list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  max-height: 220px;
  overflow-y: auto;
}

.aai-type-dd__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  font-size: 13px;
  cursor: pointer;
  color: var(--aai-text);
  transition: background .1s;
}
.aai-type-dd__option:hover { background: var(--aai-bg); }
.aai-type-dd__option--active {
  background: #eaedfc;
  color: var(--aai-purple);
  font-weight: 600;
}
.aai-type-dd__option--active:hover { background: #dde3fa; }

.aai-type-dd__opt-count {
  font-size: 11px;
  color: var(--aai-muted);
  font-weight: 400;
}
.aai-type-dd__option--active .aai-type-dd__opt-count { color: var(--aai-purple); }

.aai-type-dd__empty {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--aai-muted);
  text-align: center;
}

/* ── Pagination ────────────────────────────────────────────── */
.aai-ps-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 0 4px;
  border-top: 1px solid var(--aai-border);
  margin-top: 8px;
}

.aai-ps-page-info {
  font-size: 12px;
  color: var(--aai-muted);
}

/* ── Issue Detail Modal (IDM) ──────────────────────────────── */
.idm-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 999995;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.idm {
  background: var(--aai-surface);
  border-radius: 10px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
  width: 100%;
  max-width: 560px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: ps-modal-in .18s ease-out;
}

.idm-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--aai-border);
  flex-shrink: 0;
}

.idm-hd-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.idm-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 2px 9px;
  border-radius: 20px;
}
.idm-badge--critical { background: #fef2f2; color: var(--aai-critical); }
.idm-badge--warning  { background: #fffbeb; color: var(--aai-warning);  }
.idm-badge--notice   { background: #eff6ff; color: var(--aai-notice);   }

.idm-wcag {
  font-size: 11px;
  font-weight: 600;
  color: var(--aai-muted);
  background: var(--aai-bg);
  border: 1px solid var(--aai-border);
  border-radius: 4px;
  padding: 2px 8px;
}

.idm-close {
  background: none;
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--aai-muted);
  padding: 0 4px;
  border-radius: 4px;
}
.idm-close:hover { background: var(--aai-bg); color: var(--aai-text); }

.idm-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.idm-title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}

.idm-desc {
  margin: 0 0 6px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--aai-text);
}
.idm-review-hint {
  margin: 0 0 14px;
  font-size: 12px;
  color: var(--aai-muted);
  line-height: 1.5;
  font-style: italic;
}

.idm-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  font-size: 12px;
  margin-bottom: 14px;
}
.idm-meta dt { color: var(--aai-muted); align-self: center; }
.idm-meta dd { margin: 0; }

.idm-code {
  font-size: 12px;
  background: var(--aai-bg);
  padding: 2px 6px;
  border-radius: 4px;
  word-break: break-all;
}

.idm-section { margin-bottom: 14px; }

.idm-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--aai-muted);
  margin: 0 0 4px;
}

.idm-pre {
  background: #1e1e2e;
  color: #cdd6f4;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

/* ── Affected-elements accordion (ScanSlideIn detail view) ─── */

.idm-node-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.idm-node-item {
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color .15s;
}

.idm-node-item--open { border-color: var(--idm-node-color, #ef4444); }

.idm-node-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  background: #fff;
  user-select: none;
}

.idm-node-hd:hover { background: #fafafa; }

.idm-node-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--idm-node-color, #ef4444);
}

.idm-node-sel {
  flex: 1;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  color: #374151;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.idm-node-chevron {
  font-size: 13px;
  color: #9ca3af;
  flex-shrink: 0;
  transition: transform .2s;
  line-height: 1;
}

.idm-node-item--open .idm-node-chevron { transform: rotate(90deg); }

.idm-node-body {
  display: none;
  border-top: 1px solid #e5e7eb;
}

.idm-node-item--open .idm-node-body { display: block; }

.idm-learn {
  display: inline-block;
  font-size: 12px;
  color: var(--aai-purple);
  text-decoration: none;
  margin-bottom: 16px;
}
.idm-learn:hover { text-decoration: underline; }

.idm-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--aai-border);
}

.idm-ai-hint {
  margin-top: 10px;
  font-size: 12px;
}

.idm-ai-output {
  margin-top: 14px;
  background: #f8f7ff;
  border: 1px solid #ddd6fe;
  border-radius: 8px;
  padding: 12px 14px;
}

.idm-ai-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--aai-purple);
  margin: 0 0 4px;
}
.idm-ai-disclaimer {
  font-size: 11px;
  color: var(--aai-muted);
  margin: 0 0 10px;
  line-height: 1.4;
}

.idm-ai-md {
  font-size: 13px;
  line-height: 1.6;
  color: var(--aai-text);
}
.idm-ai-md .md-p:last-child { margin-bottom: 0; }
.idm-ai-md .md-pre { font-family: ui-monospace, SFMono-Regular, monospace; white-space: pre-wrap; word-break: break-word; }

/* ── Issue card details button ─────────────────────────────── */
.ps-issue__details-btn {
  flex-shrink: 0;
  margin-left: auto;
}
.ps-issue { cursor: default; }

/* ── Premium upgrade notice ────────────────────────────────── */
.aai-upgrade-notice {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
  border: 1px solid #c4b5fd;
  border-left: 4px solid var(--aai-purple);
  border-radius: var(--aai-radius);
  padding: 14px 18px;
  margin-top: 16px;
}

.aai-upgrade-notice__icon {
  font-size: 28px;
  flex-shrink: 0;
  line-height: 1;
}

.aai-upgrade-notice__body {
  flex: 1;
  min-width: 0;
}

.aai-upgrade-notice__title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #4c1d95;
  margin-bottom: 2px;
}

.aai-upgrade-notice__desc {
  font-size: 12px;
  color: #6d28d9;
  line-height: 1.5;
}

.aai-upgrade-notice__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--aai-purple);
  color: #fff !important;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none !important;
  flex-shrink: 0;
  transition: background .15s, transform .1s;
  white-space: nowrap;
}
.aai-upgrade-notice__btn:hover {
  background: var(--aai-purple-dark);
  transform: translateY(-1px);
}

/* Locked CSV button */
.aai-premium-lock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--aai-muted);
  cursor: not-allowed;
  opacity: .65;
  padding: 4px 10px;
  border: 1px dashed var(--aai-border);
  border-radius: 6px;
  text-decoration: none;
}