/* ================================================================
   AccessIQ — Admin UI  |  Unified Design System v9
   Fonts: DM Sans (UI) + DM Mono (code)
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

/* ── Design Tokens (Dark theme) ─────────────────────────────────── */
:root {
  /* Brand */
  --aiq-primary:     #10d98e;
  --aiq-primary-d:   #059669;
  --aiq-primary-glow:rgba(16, 217, 142, 0.15);
  --aiq-blue:        #3b82f6;
  --aiq-blue-l:      rgba(59,130,246,0.12);

  /* Semantic */
  --aiq-red:         #f87171;
  --aiq-red-l:       rgba(248,113,113,0.12);
  --aiq-amber:       #fbbf24;
  --aiq-amber-l:     rgba(251,191,36,0.12);
  --aiq-green:       #10d98e;
  --aiq-green-l:     rgba(16,217,142,0.12);
  --aiq-purple:      #a78bfa;
  --aiq-purple-l:    rgba(167,139,250,0.12);

  /* Dark Neutrals */
  --aiq-bg:          #060912;
  --aiq-bg-2:        #0d1117;
  --aiq-card:        #0f1620;
  --aiq-card-2:      #141d2b;
  --aiq-border:      rgba(255,255,255,0.08);
  --aiq-border-l:    rgba(255,255,255,0.04);
  --aiq-ink:         #e2e8f0;
  --aiq-ink-2:       #cbd5e1;
  --aiq-muted:       #64748b;
  --aiq-subtle:      #c0daff;


  /* Shadows */
  --aiq-shadow-sm:   0 1px 3px rgba(0,0,0,0.4);
  --aiq-shadow:      0 4px 24px rgba(0,0,0,0.5);
  --aiq-shadow-lg:   0 12px 48px rgba(0,0,0,0.6);
  --aiq-glow:        0 0 20px rgba(16,217,142,0.2);

  /* Radius */
  --aiq-r-sm: 6px;
  --aiq-r:    10px;
  --aiq-r-lg: 14px;
  --aiq-r-xl: 18px;
}

/* ── Base ── */
.aiq-wrap, .aiq-wrap * { font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif; box-sizing: border-box; }
.aiq-wrap {
  background: var(--aiq-bg);
  color: var(--aiq-ink);
  min-height: 100vh;
  margin: -10px -20px -20px -20px;
  padding: 28px 28px 60px;
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* Override WordPress white body bg
   only inside AccessIQ pages */
.toplevel_page_accessiq #wpcontent,
.accessiq_page_accessiq-scanner #wpcontent,
.accessiq_page_accessiq-reports #wpcontent,
.accessiq_page_accessiq-settings #wpcontent,
.accessiq_page_accessiq-heatmap #wpcontent,
.accessiq_page_accessiq-analytics #wpcontent,
.accessiq_page_accessiq-upgrade #wpcontent {
  background: var(--aiq-bg) !important;
}

/* Media modal on top when on AI Alt Text page */
.accessiq_page_accessiq-ai-alttext .media-modal-backdrop {
  z-index: 999998 !important;
}
.accessiq_page_accessiq-ai-alttext .media-modal {
  z-index: 1000000 !important;
  pointer-events: auto !important;
}
/* When modal opens, ensure it’s above everything */
body.aiq-media-modal-open .media-modal-backdrop {
  z-index: 999998 !important;
}
body.aiq-media-modal-open .media-modal {
  z-index: 1000000 !important;
  pointer-events: auto !important;
}

/* Fix horizontal scrollbar — WordPress content area */
.toplevel_page_accessiq #wpbody,
.toplevel_page_accessiq #wpbody-content,
.accessiq_page_accessiq-scanner #wpbody,
.accessiq_page_accessiq-scanner #wpbody-content,
.accessiq_page_accessiq-reports #wpbody,
.accessiq_page_accessiq-reports #wpbody-content,
.accessiq_page_accessiq-settings #wpbody,
.accessiq_page_accessiq-settings #wpbody-content,
.accessiq_page_accessiq-heatmap #wpbody,
.accessiq_page_accessiq-heatmap #wpbody-content,
.accessiq_page_accessiq-analytics #wpbody,
.accessiq_page_accessiq-analytics #wpbody-content {
  overflow-x: hidden !important;
}

/* ── WP Sidebar: Upgrade separator ─────────────────────────────── */
#toplevel_page_accessiq li:last-child > a {
  border-top: 1px solid rgba(255,255,255,.1) !important;
  margin-top: 4px;
  padding-top: 9px !important;
  color: #fbbf24 !important;
  font-weight: 600 !important;
}

/* ── Header ── */
.aiq-header {
  background: linear-gradient(135deg,
    #0a0f1a 0%, #0d1a2e 60%, #0f2040 100%);
  border: 1px solid rgba(16,217,142,0.2);
  box-shadow: var(--aiq-glow);
  border-radius: var(--aiq-r-xl);
  padding: 22px 28px;
  margin: 20px 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
.aiq-header::before { content:''; position:absolute; top:-40px; right:-40px; width:180px; height:180px; background:rgba(255,255,255,.04); border-radius:50%; }
.aiq-logo { display:flex; align-items:center; gap:14px; color:#fff; }
.aiq-logo-name { font-size:22px; font-weight:400; color:#fff; display:block; letter-spacing:-.3px; }
.aiq-logo-name strong { font-weight:800; }
.aiq-logo-sub { color: var(--aiq-primary); font-size:11px; letter-spacing:.4px; text-transform:uppercase; }
.aiq-header-right { display:flex; align-items:center; gap:12px; }
.aiq-badge { font-size:11px; font-weight:700; padding:4px 12px; border-radius:20px; letter-spacing:.3px; }
.aiq-badge.free { background:rgba(255,255,255,.12); color:#cbd5e1; }
.aiq-badge.pro  { background:linear-gradient(135deg,#f59e0b,#ef4444); color:#fff; }

/* ── Stat Cards ── */
.aiq-stats-row { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:14px; margin-bottom:24px; }
@media (max-width:960px) { .aiq-stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.aiq-stat-card {
  background: var(--aiq-card);
  border: 1px solid var(--aiq-border);
  border-top: 2px solid transparent;
  border-radius: var(--aiq-r-lg);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: var(--aiq-shadow-sm);
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.aiq-stat-card:hover {
  border-top-color: var(--aiq-primary);
  box-shadow: var(--aiq-shadow), var(--aiq-glow);
  transform: translateY(-1px);
}
.aiq-stat-icon { font-size:20px; width:42px; height:42px; border-radius:var(--aiq-r); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.aiq-stat-icon.blue   { background: var(--aiq-blue-l); }
.aiq-stat-icon.green  { background: var(--aiq-green-l); }
.aiq-stat-icon.purple { background: var(--aiq-purple-l); }
.aiq-stat-icon.orange { background: var(--aiq-amber-l); }
.aiq-stat-val   { font-size:24px; font-weight:800; color: var(--aiq-primary); line-height:1; }
.aiq-stat-label { font-size:11px; font-weight:600; color: var(--aiq-muted); margin-top:3px; text-transform:uppercase; letter-spacing:.5px; }

/* ── Cards ── */
.aiq-two-col { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
@media (max-width:780px) { .aiq-two-col { grid-template-columns:1fr; } }
.aiq-card {
  background: var(--aiq-card);
  border: 1px solid var(--aiq-border);
  box-shadow: var(--aiq-shadow-sm);
  border-radius: var(--aiq-r-lg);
  padding: 20px 24px;
  margin-bottom: 16px;
  color: var(--aiq-ink);
}
.aiq-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.aiq-card-header h3 { font-size:14px; font-weight:700; margin:0; color: var(--aiq-ink); letter-spacing:-.1px; }
.aiq-card-header a  { font-size:12px; color:var(--aiq-blue); text-decoration:none; font-weight:500; }

/* ── Scan rows ── */
.aiq-scan-row { display:flex; align-items:center; gap:14px; padding:10px 0; border-bottom:1px solid var(--aiq-border-l); }
.aiq-scan-row:last-child { border:none; }
.aiq-score-ring { width:42px; height:42px; border-radius:50%; border:2.5px solid var(--score-color, var(--aiq-muted)); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; color: var(--score-color, var(--aiq-muted)); flex-shrink:0; background: var(--aiq-card-2); }
.aiq-scan-info { flex:1; min-width:0; }
.aiq-scan-url  { font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color: var(--aiq-ink); }
.aiq-scan-meta { font-size:11px; color: var(--aiq-muted); margin-top:2px; }
.aiq-empty     { text-align:center; padding:32px; color: var(--aiq-muted); font-size:13px; }
.aiq-empty a   { color:var(--aiq-blue); }

/* ── Quick Actions (Action tiles) ── */
.aiq-quick-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.aiq-action-tile { display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:14px 16px; border-radius:var(--aiq-r); text-decoration:none; border:1.5px solid transparent; transition:transform .15s,box-shadow .15s; }
.aiq-action-tile:hover { transform:translateY(-2px); box-shadow:var(--aiq-shadow); }
.aiq-action-tile span   { font-size:20px; }
.aiq-action-tile strong { font-size:13px; color: var(--aiq-ink); font-weight:600; }
.aiq-action-tile small  { font-size:11px; color:var(--aiq-muted); }
.aiq-action-tile.blue   { background: var(--aiq-blue-l);   border-color: rgba(59,130,246,0.2); }
.aiq-action-tile.purple { background: var(--aiq-purple-l); border-color: rgba(167,139,250,0.2); }
.aiq-action-tile.green  { background: var(--aiq-green-l);  border-color: rgba(16,217,142,0.2); }
.aiq-action-tile.orange { background: var(--aiq-amber-l);  border-color: rgba(251,191,36,0.2); }

/* ── Alerts / Notice ── */
.aiq-notice-bar {
  background: rgba(251,191,36,0.08);
  border: 1px solid rgba(251,191,36,0.2);
  border-radius: var(--aiq-r-sm);
  padding: 11px 16px;
  font-size: 13px;
  margin-top: 8px;
  color: var(--aiq-amber);
}
.aiq-notice-bar a { color:var(--aiq-blue); font-weight:600; }
#aiq-notice, .aiq-alert { padding:11px 16px; border-radius:var(--aiq-r-sm); font-size:13px; margin-bottom:16px; display:none; border-left:3px solid; }
.aiq-alert.success, #aiq-notice.success { background:var(--aiq-green-l); border-color:var(--aiq-green); color:#065f46; display:block; }
.aiq-alert.error,   #aiq-notice.error   { background:var(--aiq-red-l);   border-color:var(--aiq-red);   color:#991b1b; display:block; }

/* ── Buttons ── */
.aiq-btn-primary {
  background: linear-gradient(135deg, var(--aiq-primary-d), var(--aiq-primary));
  color: #060912;
  font-weight: 800;
  border: none;
  padding: 9px 18px;
  border-radius: var(--aiq-r);
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity .15s, box-shadow .15s;
  box-shadow: 0 2px 12px rgba(16,217,142,0.3);
}
.aiq-btn-primary:hover {
  color: #060912;
  opacity: .95;
  box-shadow: 0 4px 20px rgba(16,217,142,0.45);
}
.aiq-btn-primary.aiq-btn-large { padding:11px 24px; font-size:14px; }
.aiq-btn-secondary {
  background: var(--aiq-card-2);
  color: var(--aiq-ink);
  border: 1.5px solid var(--aiq-border);
  padding: 9px 18px;
  border-radius: var(--aiq-r);
  font-size: 13px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
.aiq-btn-secondary:hover {
  border-color: var(--aiq-primary);
  color: var(--aiq-primary);
}
.aiq-btn-sm {
  font-size: 12px;
  padding: 5px 11px;
  border-radius: var(--aiq-r-sm);
  border: 1.5px solid var(--aiq-border);
  background: var(--aiq-card-2);
  cursor: pointer;
  color: var(--aiq-ink);
  text-decoration: none;
  font-weight: 500;
  transition: all .15s;
}
.aiq-btn-sm.danger { border-color: rgba(248,113,113,0.3); color: var(--aiq-red); }
.aiq-btn-sm:hover  { background: var(--aiq-bg-2); }

/* ── Scanner ─────────────────────────────────────────────────────── */
.aiq-page-header { margin-bottom:20px; }
.aiq-page-header h2 { font-size:20px; font-weight:800; color:var(--aiq-ink); margin:0 0 4px; letter-spacing:-.3px; }
.aiq-page-header p  { color:var(--aiq-muted); font-size:13px; margin:0; }
.aiq-scan-url-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.aiq-scan-url-row input, .aiq-scan-url-row select { border:1.5px solid var(--aiq-border); border-radius:var(--aiq-r); padding:9px 12px; font-size:13px; font-family:'DM Sans',sans-serif; outline:none; color:var(--aiq-ink); transition:border-color .15s; }
.aiq-scan-url-row input { flex:1; min-width:200px; }
.aiq-scan-url-row input:focus { border-color: var(--aiq-primary); box-shadow: 0 0 0 3px var(--aiq-primary-glow); }
.aiq-or { font-size:12px; color:var(--aiq-subtle); flex-shrink:0; }
.aiq-scan-options { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.aiq-scan-options select { border:1.5px solid var(--aiq-border); border-radius:var(--aiq-r); padding:7px 10px; font-size:13px; font-family:'DM Sans',sans-serif; }
.aiq-spinner { width:18px; height:18px; border:2.5px solid var(--aiq-border); border-top-color: var(--aiq-primary); border-radius:50%; animation:spin .7s linear infinite; flex-shrink:0; }
@keyframes spin { to { transform:rotate(360deg); } }
.aiq-scan-status-row { display:flex; align-items:center; gap:10px; min-height:26px; margin-bottom:12px; font-size:13px; color:var(--aiq-muted); }
.aiq-progress-bar-track { height:6px; background:var(--aiq-border); border-radius:3px; overflow:hidden; margin-bottom:12px; }
.aiq-progress-bar-fill  { height:100%; background: linear-gradient(90deg, var(--aiq-primary-d), var(--aiq-primary)); border-radius:3px; transition:width .3s; }
.aiq-results-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.aiq-score-chip { font-size:13px; font-weight:700; padding:5px 14px; border-radius:20px; }
.aiq-score-chip.good { background: var(--aiq-green-l); color: var(--aiq-primary); }
.aiq-score-chip.warn { background: var(--aiq-amber-l); color: var(--aiq-amber); }
.aiq-score-chip.fail { background: var(--aiq-red-l);   color: var(--aiq-red); }
.aiq-issue-list { display:flex; flex-direction:column; gap:8px; max-height:480px; overflow-y:auto; }
.aiq-issue-item { display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:var(--aiq-r); border:1px solid; }
.aiq-issue-item.error   { background: var(--aiq-red-l);   border-color: rgba(248,113,113,0.2); }
.aiq-issue-item.warning { background: var(--aiq-amber-l); border-color: rgba(251,191,36,0.2); }

/* Inline scanner result rows (JS renders .aiq-issue-preview)
   Body-class scoped to beat WordPress's div.error { background:#fff } */
.accessiq_page_accessiq-scanner #aiq-issues-preview .aiq-issue-preview,
.toplevel_page_accessiq          #aiq-issues-preview .aiq-issue-preview {
  display: grid !important;
  grid-template-columns: 52px 1fr 1fr !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-radius: var(--aiq-r) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: #141d2b !important;
  font-size: 13px !important;
  color: #e2e8f0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}
.accessiq_page_accessiq-scanner #aiq-issues-preview .aiq-issue-preview:hover,
.toplevel_page_accessiq          #aiq-issues-preview .aiq-issue-preview:hover {
  background: #182236 !important;
}
.accessiq_page_accessiq-scanner #aiq-issues-preview .aiq-issue-preview.error,
.toplevel_page_accessiq          #aiq-issues-preview .aiq-issue-preview.error {
  border-left: 3px solid #f87171 !important;
  background: rgba(248,113,113,0.07) !important;
}
.accessiq_page_accessiq-scanner #aiq-issues-preview .aiq-issue-preview.warning,
.toplevel_page_accessiq          #aiq-issues-preview .aiq-issue-preview.warning {
  border-left: 3px solid #fbbf24 !important;
  background: rgba(251,191,36,0.07) !important;
}
.accessiq_page_accessiq-scanner #aiq-issues-preview .aiq-issue-preview span,
.toplevel_page_accessiq          #aiq-issues-preview .aiq-issue-preview span {
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}
.accessiq_page_accessiq-scanner #aiq-issues-preview .aiq-issue-preview .aiq-issue-wcag,
.toplevel_page_accessiq          #aiq-issues-preview .aiq-issue-preview .aiq-issue-wcag {
  font-family: 'DM Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #64748b !important;
}
.accessiq_page_accessiq-scanner #aiq-issues-preview .aiq-issue-preview .aiq-issue-type,
.toplevel_page_accessiq          #aiq-issues-preview .aiq-issue-preview .aiq-issue-type {
  font-weight: 600 !important;
  color: #cbd5e1 !important;
}
.accessiq_page_accessiq-scanner #aiq-issues-preview .aiq-issue-preview .aiq-issue-el,
.toplevel_page_accessiq          #aiq-issues-preview .aiq-issue-preview .aiq-issue-el {
  font-family: 'DM Mono', monospace !important;
  font-size: 11px !important;
  color: #64748b !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.aiq-more-link { padding: 8px 0 2px; font-size: 13px; }
.aiq-more-link a { color: var(--aiq-blue); text-decoration: none; font-weight: 600; }
.aiq-more-link a:hover { text-decoration: underline; }
.aiq-issue-badge { font-size:10px; font-weight:800; padding:3px 8px; border-radius:4px; white-space:nowrap; flex-shrink:0; margin-top:1px; font-family:'DM Mono',monospace; }
.aiq-issue-badge.error   { background:var(--aiq-red);   color:#fff; }
.aiq-issue-badge.warning { background:var(--aiq-amber); color:#fff; }
.aiq-issue-info { flex:1; min-width:0; }
.aiq-issue-title { font-size:13px; font-weight:600; color:var(--aiq-ink); }
.aiq-issue-wcag  { font-family:'DM Mono',monospace; font-size:11px; color:var(--aiq-muted); width:50px; flex-shrink:0; }
.aiq-issue-el    { font-family:'DM Mono',monospace; font-size:11px; color:var(--aiq-muted); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.aiq-issue-suggestion { font-size:12px; color:var(--aiq-muted); margin-top:4px; }
.aiq-issue-ai { font-size:12px; background: var(--aiq-blue-l); color: var(--aiq-blue); padding:6px 10px; border-radius:6px; margin-top:6px; }

/* ── Reports ── */
.aiq-report-row { display:grid; grid-template-columns:1fr auto auto auto; gap:12px; align-items:center; padding:12px 0; border-bottom: 1px solid var(--aiq-border-l); font-size:13px; }
.aiq-report-row:last-child { border:none; }
.aiq-report-url  { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.aiq-report-date { font-size:11px; color:var(--aiq-muted); text-align:right; }
.aiq-chip { font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; white-space:nowrap; }
.aiq-chip.green  { background: var(--aiq-green-l); color: var(--aiq-primary); }
.aiq-chip.amber  { background: var(--aiq-amber-l); color: var(--aiq-amber); }
.aiq-chip.red    { background: var(--aiq-red-l);   color: var(--aiq-red); }

/* ── Settings Layout ─────────────────────────────────────────────── */
.aiq-settings-header { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; flex-wrap:wrap; }
.aiq-settings-header > div h2 { font-size:20px; font-weight:800; margin:0; letter-spacing:-.3px; }
.aiq-settings-header > div p  { color:var(--aiq-muted); font-size:13px; margin:4px 0 0; }
.aiq-settings-layout { display:grid; grid-template-columns:200px 1fr; gap:24px; align-items:start; }
@media (max-width:700px) { .aiq-settings-layout { grid-template-columns:1fr; } }
/* ── Settings Nav ── */
.aiq-settings-nav { background: var(--aiq-card); border: 1px solid var(--aiq-border); border-radius:var(--aiq-r-lg); overflow:hidden; position:sticky; top:32px; box-shadow:var(--aiq-shadow-sm); }
.aiq-snav { display:flex; align-items:center; gap:9px; padding:11px 16px; font-size:13px; font-weight:500; color: var(--aiq-muted); cursor:pointer; text-decoration:none; border-left:3px solid transparent; transition:all .15s; border-bottom: 1px solid var(--aiq-border-l); }
.aiq-snav:last-child { border-bottom:none; }
.aiq-snav:hover  { background: var(--aiq-primary-glow); color: var(--aiq-primary); }
.aiq-snav.active { background: var(--aiq-primary-glow); color: var(--aiq-primary); font-weight:700; border-left-color: var(--aiq-primary); }
.aiq-snav-icon   { font-size:15px; }
.aiq-settings-content { min-width:0; }
.aiq-stab[hidden] { display:none !important; }

/* Fields */
/* ── Field rows ── */
.aiq-field-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 0; border-bottom: 1px solid var(--aiq-border-l); }
.aiq-field-row:last-child { border:none; }
.aiq-field-row > div label { font-size:13px; font-weight:600; color: var(--aiq-ink); display:block; margin-bottom:2px; }
.aiq-field-row > div small { font-size:12px; color: var(--aiq-muted); display:block; }
/* ── Inputs & Selects (dark) ── */
.aiq-wrap input[type="text"],
.aiq-wrap input[type="email"],
.aiq-wrap input[type="password"],
.aiq-wrap select,
.aiq-select {
  background: var(--aiq-card-2) !important;
  border-color: var(--aiq-border) !important;
  color: var(--aiq-ink) !important;
  color-scheme: dark;
}
.aiq-wrap input:focus,
.aiq-wrap select:focus,
.aiq-select:focus {
  border-color: var(--aiq-primary) !important;
  box-shadow: 0 0 0 3px var(--aiq-primary-glow) !important;
  outline: none;
}
.aiq-field-row input[type="email"],
.aiq-field-row input[type="password"],
.aiq-field-row input[type="text"],
.aiq-field-row select { border:1.5px solid var(--aiq-border); border-radius:var(--aiq-r); padding:8px 12px; font-size:13px; font-family:'DM Sans',sans-serif; color:var(--aiq-ink); transition:border-color .15s; min-width:180px; background: var(--aiq-card-2); }
.aiq-field-row input:focus, .aiq-field-row select:focus { border-color: var(--aiq-primary); box-shadow: 0 0 0 3px var(--aiq-primary-glow); outline:none; }

/* AI tab: API key wrap + eye toggle */
.aiq-api-key-row .aiq-input-wrap { display: inline-flex; align-items: center; gap: 0; min-width: 220px; }
.aiq-api-key-row .aiq-input-wrap input { flex: 1; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.aiq-api-key-toggle { background: var(--aiq-card-2); border: 1.5px solid var(--aiq-border); border-left: none; border-radius: 0 var(--aiq-r) var(--aiq-r) 0; padding: 8px 12px; cursor: pointer; color: var(--aiq-muted); font-size: 14px; }
.aiq-api-key-toggle:hover { color: var(--aiq-ink); }
.aiq-ai-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.aiq-test-result { margin-top: 14px; padding: 12px 14px; border-radius: var(--aiq-r); font-size: 13px; display: flex; align-items: center; gap: 10px; }
.aiq-test-result.loading { background: var(--aiq-card-2); border: 1px solid var(--aiq-border); color: var(--aiq-muted); }
.aiq-test-result.success { background: var(--aiq-green-l); border: 1px solid var(--aiq-green); color: #065f46; }
.aiq-test-result.error { background: var(--aiq-red-l); border: 1px solid var(--aiq-red); color: #991b1b; }

/* AI Alt Text page */
.aiq-alttext-tabs { display: flex; gap: 0; margin-bottom: 20px; border-bottom: 1px solid var(--aiq-border); }
.aiq-alttext-tab { padding: 10px 18px; font-size: 13px; font-weight: 600; color: var(--aiq-muted); background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; margin-bottom: -1px; }
.aiq-alttext-tab:hover { color: var(--aiq-ink); }
.aiq-alttext-tab.active { color: var(--aiq-primary); border-bottom-color: var(--aiq-primary); }
/* Single tab: step cards + picker + result */
.aiq-alttext-wrap { display: flex; flex-direction: column; gap: 12px; max-width: 680px; }
.aiq-step-card {
  display: flex; gap: 20px; background: var(--aiq-card); border: 1px solid var(--aiq-border);
  border-radius: 14px; padding: 24px; transition: opacity .3s, border-color .3s;
}
.aiq-step-card:focus-within,
.aiq-step-card:hover { border-color: rgba(16,217,142,0.2); }
.aiq-step-num {
  width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center;
  font-family: 'DM Sans', sans-serif; font-weight: 800; font-size: 14px; color: var(--aiq-muted); flex-shrink: 0;
}
.aiq-step-num-green {
  background: rgba(16,217,142,0.12); border-color: rgba(16,217,142,0.3); color: var(--aiq-primary);
}
.aiq-step-body { flex: 1; }
.aiq-step-title { font-weight: 700; font-size: 15px; color: var(--aiq-ink); margin-bottom: 4px; }
.aiq-step-desc { font-size: 13px; color: var(--aiq-muted); margin-bottom: 16px; }

.aiq-picker-area {
  border: 2px dashed var(--aiq-border); border-radius: 10px; padding: 28px 20px; text-align: center; transition: border-color .2s;
}
.aiq-picker-area:hover { border-color: rgba(16,217,142,0.3); }
.aiq-picker-icon { font-size: 32px; margin-bottom: 8px; }
.aiq-picker-hint { font-size: 13px; color: var(--aiq-muted); margin-bottom: 14px; }

.aiq-picker-preview {
  display: flex; align-items: center; gap: 16px; text-align: left; padding: 4px;
}
.aiq-preview-thumb {
  width: 80px; height: 60px; border-radius: 8px; flex-shrink: 0;
  background: rgba(255,255,255,0.06); overflow: hidden;
}
.aiq-picker-preview img {
  width: 80px; height: 60px; object-fit: cover; border-radius: 8px; flex-shrink: 0; display: block;
}
.aiq-preview-name { font-size: 13px; font-weight: 500; color: var(--aiq-ink); margin-bottom: 6px; word-break: break-all; }
.aiq-btn-link { background: none; border: none; color: var(--aiq-primary); font-size: 12px; cursor: pointer; padding: 0; text-decoration: underline; }
.aiq-btn-link:hover { text-decoration: underline; }

.aiq-btn-lg { padding: 12px 28px; font-size: 15px; border-radius: 10px; }

.aiq-result-box {
  background: rgba(255,255,255,0.03); border: 1px solid var(--aiq-border); border-radius: 10px; overflow: hidden; margin-bottom: 16px;
}
.aiq-result-box .aiq-textarea {
  width: 100%; background: transparent; border: none; outline: none; color: var(--aiq-ink);
  font-family: inherit; font-size: 14px; line-height: 1.7; padding: 14px 16px; resize: vertical;
}
.aiq-result-footer {
  display: flex; justify-content: space-between; align-items: center; padding: 8px 16px; border-top: 1px solid var(--aiq-border);
}
.aiq-char-count { font-size: 12px; color: var(--aiq-muted); }
.aiq-char-warn { font-size: 12px; color: #fb923c; }

.aiq-result-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.aiq-btn-ghost {
  background: transparent; border: 1px solid var(--aiq-border); color: var(--aiq-muted);
  padding: 9px 20px; border-radius: 8px; font-size: 13px; cursor: pointer; transition: all .2s;
}
.aiq-btn-ghost:hover { border-color: rgba(255,255,255,0.2); color: var(--aiq-ink); }

.aiq-status-msg { margin-top: 12px; font-size: 13px; }
.aiq-status-msg .aiq-success { color: var(--aiq-primary); }
.aiq-status-msg .aiq-error { color: var(--aiq-red); }

.aiq-btn { padding: 8px 16px; border-radius: var(--aiq-r); font-size: 13px; font-weight: 600; cursor: pointer; border: none; font-family: inherit; transition: opacity .15s, background .15s; }
.aiq-btn:disabled { opacity: .5; cursor: not-allowed; }
.aiq-btn-danger { background: var(--aiq-red-l); color: var(--aiq-red); border: 1px solid rgba(248,113,113,0.3); }
.aiq-btn-danger:hover:not(:disabled) { background: rgba(248,113,113,0.2); }
.aiq-stats-row { display: flex; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.aiq-stat-card { flex: 1; min-width: 120px; background: #080d18; border: 1px solid var(--aiq-border); border-radius: 10px; padding: 20px; text-align: center; }
.aiq-stat-num { font-size: 28px; font-weight: 800; color: var(--aiq-primary); }
.aiq-stat-label { font-size: 12px; color: var(--aiq-text-muted, #94a3b8); margin-top: 4px; }
.aiq-stat-warn .aiq-stat-num { color: #fb923c; }
.aiq-stat-ok .aiq-stat-num { color: var(--aiq-primary); }
.aiq-bulk-controls { display: flex; gap: 12px; margin-bottom: 16px; }
.aiq-progress-bar { background: rgba(255,255,255,0.07); border-radius: 6px; height: 8px; overflow: hidden; margin: 16px 0 6px; }
.aiq-progress-fill { height: 100%; background: var(--aiq-primary); border-radius: 6px; transition: width .4s ease; }
.aiq-progress-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--aiq-text-muted, #94a3b8); }
.aiq-log-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--aiq-ink); }
.aiq-log-area { background: #080d18; border: 1px solid var(--aiq-border); border-radius: 8px; padding: 12px 16px; height: 220px; overflow-y: auto; font-family: 'DM Mono', monospace; font-size: 12px; color: var(--aiq-text-muted, #94a3b8); }
.aiq-log-line-ok { color: var(--aiq-primary); }
.aiq-log-line-err { color: var(--aiq-red); }
.aiq-log-line-info { color: #94a3b8; }
/* Media Library column */
.aiq-col-no-alt { color: var(--aiq-text-muted, #94a3b8); font-size: 12px; display: block; margin-bottom: 4px; }
.aiq-col-alt-text { font-size: 12px; color: var(--aiq-ink); display: block; margin-bottom: 4px; }
.aiq-gen-btn { background: rgba(16,217,142,0.1); color: var(--aiq-primary); border: 1px solid rgba(16,217,142,0.25); border-radius: 5px; padding: 3px 10px; font-size: 11px; cursor: pointer; transition: all .2s; }
.aiq-gen-btn:hover { background: rgba(16,217,142,0.2); }
.aiq-gen-btn:disabled { opacity: .5; cursor: not-allowed; }
.aiq-gen-btn-small { padding: 2px 7px; font-size: 10px; }

/* AI tab redesign: provider cards, style cards, action bar */
.aiq-settings-card .aiq-card-desc { font-size: 13px; color: var(--aiq-muted); margin: 8px 0 0; line-height: 1.5; }
.aiq-provider-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 20px; }
.aiq-provider-card { cursor: pointer; border-radius: 10px; border: 1.5px solid var(--aiq-border); padding: 14px 10px; text-align: center; transition: all .15s; background: rgba(255,255,255,0.02); }
.aiq-provider-card:hover { border-color: rgba(16,217,142,0.3); background: rgba(16,217,142,0.04); }
.aiq-provider-card input[type="radio"] { display: none; }
.aiq-provider-card:has(input:checked) { border-color: #10d98e; background: rgba(16,217,142,0.08); }
.aiq-provider-name { font-weight: 700; font-size: 13px; color: var(--aiq-ink); margin-bottom: 6px; }
.aiq-provider-badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; letter-spacing: .5px; margin-bottom: 5px; }
.aiq-badge-free { background: rgba(16,217,142,0.15); color: #10d98e; }
.aiq-badge-paid { background: rgba(167,139,250,0.15); color: #a78bfa; }
.aiq-badge-custom { background: rgba(96,165,250,0.15); color: #60a5fa; }
.aiq-provider-limit { font-size: 11px; color: var(--aiq-muted); }
.aiq-get-key-row { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--aiq-muted); background: rgba(16,217,142,0.05); border: 1px solid rgba(16,217,142,0.15); border-radius: 8px; padding: 10px 14px; margin-bottom: 20px; }
.aiq-link { color: #10d98e; text-decoration: none; }
.aiq-link:hover { text-decoration: underline; }
.aiq-field-group { margin-bottom: 18px; }
.aiq-field-group:last-child { margin-bottom: 0; }
.aiq-label { display: block; font-size: 13px; font-weight: 600; color: var(--aiq-ink); margin-bottom: 6px; }
.aiq-input { width: 100%; max-width: 400px; padding: 8px 12px; font-size: 13px; background: var(--aiq-card-2); border: 1.5px solid var(--aiq-border); border-radius: var(--aiq-r); color: var(--aiq-ink); }
.aiq-input:focus { border-color: var(--aiq-primary); outline: none; box-shadow: 0 0 0 3px var(--aiq-primary-glow); }
.aiq-key-input-wrap { display: inline-flex; align-items: center; gap: 0; max-width: 400px; }
.aiq-key-input-wrap .aiq-input { border-top-right-radius: 0; border-bottom-right-radius: 0; flex: 1; min-width: 0; }
.aiq-key-toggle { background: var(--aiq-card-2); border: 1.5px solid var(--aiq-border); border-left: none; border-radius: 0 var(--aiq-r) var(--aiq-r) 0; padding: 8px 12px; cursor: pointer; color: var(--aiq-muted); font-size: 14px; }
.aiq-key-toggle:hover { color: var(--aiq-ink); }
.aiq-field-hint { font-size: 12px; color: var(--aiq-muted); margin-top: 6px; }
.aiq-style-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.aiq-style-card { cursor: pointer; border: 1.5px solid var(--aiq-border); border-radius: 10px; padding: 16px; transition: all .15s; background: rgba(255,255,255,0.02); }
.aiq-style-card input[type="radio"] { display: none; }
.aiq-style-card:has(input:checked) { border-color: #10d98e; background: rgba(16,217,142,0.06); }
.aiq-style-title { font-weight: 600; font-size: 14px; color: var(--aiq-ink); margin-bottom: 8px; }
.aiq-style-eg { font-size: 12px; color: var(--aiq-muted); font-style: italic; line-height: 1.5; }
.aiq-settings-action-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 20px 24px; background: var(--aiq-card); border: 1px solid var(--aiq-border); border-radius: 12px; margin-top: 8px; }
.aiq-test-wrap { display: flex; align-items: center; gap: 14px; }
.aiq-test-result { font-size: 13px; min-height: 20px; }
.aiq-test-result.loading { color: var(--aiq-muted); }
.aiq-test-result.success { color: var(--aiq-primary); }
.aiq-test-result.error { color: var(--aiq-red); }
@media (max-width: 900px) {
  .aiq-provider-grid { grid-template-columns: repeat(2, 1fr); }
  .aiq-style-grid { grid-template-columns: 1fr; }
}

/* Toggle */
/* ── Toggle ── */
.aiq-toggle-row { display:flex; align-items:center; justify-content:space-between; padding:13px 0; border-bottom: 1px solid var(--aiq-border-l); gap:16px; cursor:pointer; }
.aiq-toggle-row:last-of-type { border:none; }
.aiq-toggle-label strong { font-size:13px; font-weight:600; color: var(--aiq-ink); display:block; }
.aiq-toggle-label small   { font-size:12px; color: var(--aiq-muted); display:block; margin-top:2px; }
.aiq-toggle-row input[type="checkbox"] { display:none; }
.aiq-toggle-row input[type="checkbox"] + .aiq-toggle { width:40px; height:22px; background: var(--aiq-subtle); border-radius:11px; position:relative; display:inline-block; cursor:pointer; transition:background .2s; flex-shrink:0; }
.aiq-toggle-row input[type="checkbox"] + .aiq-toggle::after { content:''; position:absolute; top:3px; left:3px; width:16px; height:16px; background:#fff; border-radius:50%; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.15); }
.aiq-toggle-row input[type="checkbox"]:checked + .aiq-toggle { background: var(--aiq-primary); }
.aiq-toggle-row input[type="checkbox"]:checked + .aiq-toggle::after { transform:translateX(18px); }

/* Feature rows */
.aiq-feature-row { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--aiq-border-l); cursor:pointer; }
.aiq-feature-row:last-child { border:none; }
.aiq-feature-row.locked { opacity:.55; cursor:default; }
/* ── Feature rows ── */
.aiq-feature-icon-wrap { font-size:18px; width:36px; height:36px; background: var(--aiq-card-2); border-radius:var(--aiq-r-sm); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.aiq-feature-text { flex:1; }
.aiq-feature-text strong { font-size:13px; font-weight:600; display:block; color: var(--aiq-ink); }
.aiq-feature-text small  { font-size:12px; color: var(--aiq-muted); }
.aiq-feature-row input[type="checkbox"] { display:none; }
.aiq-feature-row input[type="checkbox"] + .aiq-toggle.small { width:34px; height:19px; border-radius:10px; background:var(--aiq-border); position:relative; display:inline-block; cursor:pointer; transition:background .2s; flex-shrink:0; }
.aiq-feature-row input[type="checkbox"] + .aiq-toggle.small::after { content:''; position:absolute; top:2.5px; left:2.5px; width:14px; height:14px; background:#fff; border-radius:50%; transition:transform .2s; box-shadow:0 1px 2px rgba(0,0,0,.15); }
.aiq-feature-row input[type="checkbox"]:checked + .aiq-toggle.small { background: var(--aiq-primary); }
.aiq-feature-row input[type="checkbox"]:checked + .aiq-toggle.small::after { transform:translateX(15px); }

/* Position grid */
.aiq-position-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.aiq-pos-opt { display:flex; align-items:center; gap:8px; padding:10px 14px; border:1.5px solid var(--aiq-border); border-radius:var(--aiq-r); cursor:pointer; font-size:13px; font-weight:500; transition:all .15s; }
.aiq-pos-opt input { display:none; }
.aiq-pos-opt:hover { border-color: var(--aiq-primary); background: var(--aiq-primary-glow); }
.aiq-pos-opt.sel   { border-color: var(--aiq-primary); background: var(--aiq-primary-glow); color: var(--aiq-primary); font-weight:700; }

/* Color picker */
.aiq-color-picker-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.aiq-color-picker-row input[type="color"] { width:40px; height:40px; border:none; background:none; cursor:pointer; border-radius:var(--aiq-r-sm); }
.aiq-color-swatches { display:flex; gap:6px; flex-wrap:wrap; }
.aiq-swatch { width:26px; height:26px; border-radius:50%; cursor:pointer; border:2px solid transparent; transition:transform .15s,border-color .15s; }
.aiq-swatch:hover, .aiq-swatch.active { transform:scale(1.15); border-color: var(--aiq-primary); }
#aiq-color-hex { font-family:'DM Mono',monospace; font-size:12px; color:var(--aiq-muted); }

/* License */
.aiq-pro-active-card { text-align:center; padding:32px; }
.aiq-pro-active-icon { font-size:36px; margin-bottom:8px; }
.aiq-pro-active-card h3 { font-size:18px; font-weight:800; margin:0 0 6px; }
.aiq-pro-active-card p  { color:var(--aiq-muted); font-size:13px; margin:0 0 12px; }
.aiq-pro-active-card code { font-family:'DM Mono',monospace; font-size:12px; background: var(--aiq-card-2); padding:5px 12px; border-radius:var(--aiq-r-sm); color: var(--aiq-muted); }
.aiq-license-row { display:flex; gap:10px; }
.aiq-license-row input { flex:1; border:1.5px solid var(--aiq-border); border-radius:var(--aiq-r); padding:9px 14px; font-size:13px; font-family:'DM Mono',monospace; transition:border-color .15s; background: var(--aiq-card-2); color: var(--aiq-ink); }
.aiq-license-row input:focus { border-color: var(--aiq-primary); box-shadow: 0 0 0 3px var(--aiq-primary-glow); outline:none; }
/* ── Pro tag ── */
.aiq-pro-tag { font-size:10px; font-weight:800; background: linear-gradient(135deg, #f59e0b, #ef4444); color:#fff; padding:3px 8px; border-radius:20px; white-space:nowrap; text-decoration:none; }
.aiq-upgrade-inline { text-align:center; padding:24px; }
.aiq-upgrade-inline p { font-size:13px; color: var(--aiq-muted); margin:0 0 12px; }
.aiq-upgrade-teaser { background:linear-gradient(135deg,#0f172a,#1e3a8a); color:#fff; }
.aiq-upgrade-teaser h3 { font-size:16px; font-weight:800; margin:0 0 12px; color:#fff; }
.aiq-pro-features-list { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.aiq-pro-features-list span { font-size:12px; background:rgba(255,255,255,.1); padding:4px 10px; border-radius:20px; color:#e2e8f0; }
.aiq-locked-card { opacity:.65; }

/* ── Upgrade hero ── */
.aiq-upgrade-hero {
  background: linear-gradient(135deg,
    #060912 0%, #0a1628 50%, #0f1e3a 100%);
  border: 1px solid rgba(16,217,142,0.25);
  box-shadow: var(--aiq-glow);
}
.aiq-upgrade-feature-card {
  background: var(--aiq-card);
  border: 1px solid var(--aiq-border);
}
.aiq-upgrade-feature-card h4 { color: var(--aiq-ink); }
.aiq-upgrade-feature-card p  { color: var(--aiq-muted); }

/* ── Heatmap & Analytics Pages ──────────────────────────────────── */
.aiq-page-title { font-size:22px; font-weight:800; color: var(--aiq-ink); margin:20px 0; letter-spacing:-.3px; }
.aiq-page-header h2 { color: var(--aiq-ink); }
.aiq-page-header p  { color: var(--aiq-muted); }

/* Heatmap control grid: more space for SELECT PAGE dropdown */
.aiq-heatmap-controls {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1.5fr auto !important;
  gap: 14px !important;
  align-items: end !important;
}
@media (max-width: 1200px) {
  .aiq-heatmap-controls {
    grid-template-columns: 1.5fr 1fr 1.2fr auto !important;
  }
}
@media (max-width: 860px) {
  .aiq-heatmap-controls { grid-template-columns: 1fr 1fr !important; }
}

/* Heatmap control selects: full text visible, no cut-off */
.aiq-heatmap-controls select,
.aiq-heatmap-controls .aiq-select {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
/* SELECT PAGE column: enough width so long URLs don't get cut */
.aiq-heatmap-controls > div:first-child {
  min-width: 380px;
}
/* DEVICE column: enough width so "All Devices" etc. don't get cut */
.aiq-heatmap-controls > div:nth-child(3) {
  min-width: 160px;
}
.aiq-control-group { display:flex; flex-direction:column; gap:6px; }
.aiq-control-group label { font-size:11px; font-weight:700; color:var(--aiq-muted); text-transform:uppercase; letter-spacing:.6px; }

/* ── Heatmap controls ── */
.aiq-select { border:1.5px solid var(--aiq-border); border-radius:var(--aiq-r); padding:8px 12px; font-size:13px; font-family:'DM Sans',sans-serif; color: var(--aiq-ink); background: var(--aiq-card-2); outline:none; cursor:pointer; transition:border-color .15s; height:38px; color-scheme: dark; }
.aiq-select:focus { border-color: var(--aiq-primary); box-shadow: 0 0 0 3px var(--aiq-primary-glow); }

.aiq-btn-group-toggle { display:flex; gap:4px; }
.aiq-btn-outline {
  background: var(--aiq-card-2);
  border: 1.5px solid var(--aiq-border);
  color: var(--aiq-muted);
  padding: 7px 14px;
  border-radius: var(--aiq-r);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  transition: all .15s;
  height: 38px;
}
.aiq-btn-outline:hover {
  border-color: var(--aiq-primary);
  color: var(--aiq-primary);
  background: var(--aiq-primary-glow);
}
.aiq-btn-outline.active {
  background: var(--aiq-primary);
  border-color: var(--aiq-primary);
  color: #060912;
  font-weight: 700;
}

#aiq-btn-view-heatmap, #aiq-btn-apply-filters { background: linear-gradient(135deg, var(--aiq-primary-d), var(--aiq-primary)); color: #060912; border:none; padding:0 22px; height:38px; border-radius:var(--aiq-r); font-size:13px; font-weight:700; font-family:'DM Sans',sans-serif; cursor:pointer; transition:opacity .15s,box-shadow .15s; white-space:nowrap; box-shadow: 0 2px 12px rgba(16,217,142,0.3); }
#aiq-btn-view-heatmap:hover:not(:disabled), #aiq-btn-apply-filters:hover { opacity:.95; box-shadow: 0 4px 20px rgba(16,217,142,0.45); }
#aiq-btn-view-heatmap:disabled { opacity:.4; cursor:not-allowed; animation:none; }

.aiq-heatmap-stats, .aiq-dashboard-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
@media (max-width:860px) { .aiq-heatmap-stats, .aiq-dashboard-grid { grid-template-columns:repeat(2,1fr); } }
.aiq-heatmap-stats .aiq-stat-card { background: var(--aiq-card); border: 1px solid var(--aiq-border); border-radius:var(--aiq-r-lg); padding:16px 20px; box-shadow:var(--aiq-shadow-sm); transition:box-shadow .2s,transform .2s; }
.aiq-heatmap-stats .aiq-stat-card:hover { box-shadow:var(--aiq-shadow); transform:translateY(-1px); }
.aiq-stat-title { font-size:11px; font-weight:700; color: var(--aiq-muted); text-transform:uppercase; letter-spacing:.6px; margin-bottom:8px; }
.aiq-stat-value { font-size:28px; font-weight:800; color: var(--aiq-primary); line-height:1; }

.aiq-heatmap-wrapper { border: 1px solid var(--aiq-border); border-radius:var(--aiq-r-lg); overflow:hidden; background: var(--aiq-card-2); }
.aiq-empty-state { text-align:center; padding:80px 20px; color: var(--aiq-muted); }
.aiq-empty-state h2 { font-size:17px; font-weight:700; color: var(--aiq-ink); margin-bottom:8px; }
.aiq-empty-state p  { font-size:13px; }

.aiq-loader-state.skeleton { background: linear-gradient(90deg, var(--aiq-card) 25%, var(--aiq-card-2) 50%, var(--aiq-card) 75%); background-size:400% 100%; animation:aiq-shimmer 1.4s ease infinite; }
@keyframes aiq-shimmer { 0% { background-position:100% 50%; } 100% { background-position:0% 50%; } }
.aiq-skeleton-box {
  height: 13px;
  border-radius: 6px;
  margin-bottom: 10px;
  background: linear-gradient(90deg, var(--aiq-card) 25%, var(--aiq-card-2) 50%, var(--aiq-card) 75%);
  background-size: 400% 100%;
  animation: aiq-shimmer 1.4s ease infinite;
}

/* ── Tables ── */
.aiq-table { width:100%; border-collapse:collapse; font-size:13px; }
.aiq-table thead th { font-size:11px; font-weight:700; color: var(--aiq-muted); text-transform:uppercase; letter-spacing:.6px; padding:10px 14px; border-bottom: 1.5px solid var(--aiq-border); text-align:left; }
.aiq-table tbody td { padding:11px 14px; border-bottom: 1px solid var(--aiq-border-l); color: var(--aiq-ink); vertical-align:middle; }
.aiq-table-hoverable tbody tr:hover { background: var(--aiq-card-2); }
.aiq-table-responsive { overflow-x:auto; }

.aiq-badge-green  { background: var(--aiq-green-l); color: var(--aiq-primary); padding:3px 8px; border-radius:5px; font-size:12px; font-weight:700; }
.aiq-badge-yellow { background: var(--aiq-amber-l);  color: var(--aiq-amber);  padding:3px 8px; border-radius:5px; font-size:12px; font-weight:700; }
.aiq-badge-red    { background: var(--aiq-red-l);    color: var(--aiq-red);    padding:3px 8px; border-radius:5px; font-size:12px; font-weight:700; }

.aiq-skeleton-row td { position:relative; overflow:hidden; height:40px; }
.aiq-skeleton-row td::after { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(90deg,rgba(0,0,0,0) 0,rgba(0,0,0,.04) 50%,rgba(0,0,0,0) 100%); animation:aiq-shimmer 1.5s infinite linear; }

/* WP Dashboard widgets */
#accessiq_quick_stats .inside, #accessiq_top_pages .inside,
#accessiq_device_chart .inside, #accessiq_recent_activity .inside { padding:10px 14px; }
.accessiq-widget-stat { display:flex; justify-content:space-between; align-items:center; padding:7px 0; border-bottom:1px solid var(--aiq-border-l); }
.accessiq-widget-stat:last-child { border:none; }
.accessiq-widget-stat-label { font-size:12px; color:var(--aiq-muted); }
.accessiq-widget-stat-value { font-size:15px; font-weight:800; color:var(--aiq-blue); }

/* ── Sidebar Collapsible Groups ─────────────────────────────────── */

/* Transitions only AFTER JS setup completes (prevents FOUC) */
body.aiq-sidebar-ready #toplevel_page_accessiq li.aiq-group-child {
  transition: max-height 0.25s ease, opacity 0.2s ease !important;
}
/* Collapsed arrow */
#toplevel_page_accessiq li.aiq-group-header.aiq-collapsed > a::after {
  transform: rotate(-90deg);
}
/* Arrow transition */
body.aiq-sidebar-ready #toplevel_page_accessiq li.aiq-group-header > a::after {
  transition: transform 0.2s ease;
}

/* Upgrade Pro special style */
#toplevel_page_accessiq li:last-child > a {
  color: #fbbf24 !important;
  font-weight: 600 !important;
  border-top: 1px solid rgba(255,255,255,0.08) !important;
  margin-top: 4px !important;
  padding-top: 10px !important;
}

/* ── Overview Page ──────────────────────────────────────────────── */
.aiq-overview-section {
  background: var(--aiq-card);
  border: 1.5px solid var(--aiq-border);
  border-radius: var(--aiq-r-xl);
  padding: 22px 26px;
  box-shadow: var(--aiq-shadow-sm);
}
.aiq-overview-section,
.aiq-insight-section,
.aiq-accessibility-section {
  padding-bottom: 0 !important;
  margin-bottom: 20px !important;
}
.aiq-overview-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
.aiq-overview-module-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: var(--aiq-r-lg);
  border: 1.5px solid;
}
.aiq-overview-module-badge span { font-size: 22px; }
.aiq-overview-module-badge strong { font-size: 15px; font-weight: 800; display: block; letter-spacing: -.2px; }
.aiq-overview-module-badge small  { font-size: 11px; color: var(--aiq-muted); display: block; margin-top: 1px; }
.aiq-module-a11y { background: var(--aiq-blue-l); border-color: rgba(59,130,246,0.2); }
.aiq-module-a11y strong { color: var(--aiq-blue); }
.aiq-module-if   { background: var(--aiq-purple-l); border-color: rgba(167,139,250,0.2); }
.aiq-module-if strong { color: var(--aiq-purple); }

.aiq-section-body,
.aiq-insight-body,
.aiq-stats-grid,
.aiq-overview-stats-row,
.aiq-insightforge-grid {
  height: auto !important;
  min-height: unset !important;
}
.aiq-overview-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 860px) { .aiq-overview-stats-row { grid-template-columns: repeat(2,1fr); } }

.aiq-overview-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--aiq-bg);
  border: 1px solid var(--aiq-border-l);
  border-radius: var(--aiq-r-lg);
  transition: box-shadow .2s, transform .2s;
}
.aiq-overview-stat:hover { box-shadow: var(--aiq-shadow); transform: translateY(-1px); }
.aiq-overview-stat-icon { font-size: 18px; width: 38px; height: 38px; border-radius: var(--aiq-r); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.aiq-overview-stat-val  { font-size: 22px; font-weight: 800; color: var(--aiq-ink); line-height: 1; }
.aiq-overview-stat-lbl  { font-size: 11px; font-weight: 600; color: var(--aiq-muted); margin-top: 3px; text-transform: uppercase; letter-spacing: .4px; }

.aiq-overview-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--aiq-border-l);
  flex-wrap: wrap;
  gap: 8px;
}
.aiq-overview-meta-item { font-size: 12px; color: var(--aiq-muted); }
.aiq-overview-meta-item strong { color: var(--aiq-ink); }
.aiq-overview-meta-link { font-size: 12px; font-weight: 600; color: var(--aiq-blue); text-decoration: none; }
.aiq-overview-meta-link:hover { text-decoration: underline; }

/* ── Dashboard Header + Tab Navigation ───────────────────────────── */
.aiq-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #0f1620;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 16px 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}
.aiq-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.aiq-brand-icon {
  font-size: 22px;
  width: 40px;
  height: 40px;
  background: rgba(16,217,142,0.1);
  border: 1px solid rgba(16,217,142,0.2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.aiq-brand-name {
  font-size: 18px;
  font-weight: 800;
  color: #e2e8f0;
  display: block;
  letter-spacing: -0.3px;
}
.aiq-brand-tagline {
  font-size: 11px;
  color: #475569;
  display: block;
  margin-top: 1px;
}
.aiq-tab-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #141d2b;
  padding: 4px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
}
.aiq-tab {
  position: relative;
  padding: 8px 18px;
  border: none;
  background: transparent;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.aiq-tab:hover {
  color: #94a3b8;
  background: rgba(255,255,255,0.04);
}
.aiq-tab.active {
  background: #0f1620;
  color: #10d98e;
  font-weight: 700;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.aiq-tab-pro-badge {
  font-size: 9px;
  font-weight: 800;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.3px;
}
.aiq-tab.aiq-tab-pro { color: #64748b; }

/* Tab panels — !important needed to beat ID-specificity on #aiq-panel-overview */
.aiq-panel               { display: none !important; }
.aiq-panel.active        { display: block !important; }
#aiq-panel-overview.active { display: flex !important; flex-direction: column; gap: 20px; }

/* Violations tab filter buttons */
.aiq-violations-filter {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.aiq-filter-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: #0f1620;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: #64748b;
  font-size: 13px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all 0.15s;
}
.aiq-filter-btn:hover {
  border-color: #10d98e;
  color: #10d98e;
}
.aiq-filter-btn.active {
  background: rgba(16,217,142,0.1);
  border-color: rgba(16,217,142,0.3);
  color: #10d98e;
}
.aiq-count-badge {
  font-size: 11px;
  font-weight: 800;
  background: rgba(255,255,255,0.08);
  padding: 2px 7px;
  border-radius: 10px;
  color: #94a3b8;
}
.aiq-count-badge.red {
  background: rgba(248,113,113,0.12);
  color: #f87171;
}
.aiq-count-badge.amber {
  background: rgba(251,191,36,0.12);
  color: #fbbf24;
}

/* ── Overview top: Score Ring + Category Chart ───────────────────── */
.aiq-overview-top {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  margin-bottom: 24px;
}
@media (max-width: 780px) {
  .aiq-overview-top { grid-template-columns: 1fr; }
}

.aiq-score-ring-card {
  display: flex;
  flex-direction: column;
}
.aiq-score-ring-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 0 8px;
  gap: 20px;
}
.aiq-ring-canvas-wrap {
  position: relative;
  width: 200px;
  height: 200px;
}
.aiq-ring-center-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
}
.aiq-ring-center-score {
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  font-family: 'DM Sans', sans-serif;
}
.aiq-ring-center-label {
  font-size: 13px;
  color: rgba(255,255,255,0.3);
  font-family: 'DM Sans', sans-serif;
}
.aiq-ring-center-grade {
  font-size: 12px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
}
.aiq-ring-stats {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  justify-content: center;
  padding: 16px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.aiq-ring-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.aiq-ring-stat-val {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
}
.aiq-ring-stat-val.red   { color: #f87171; }
.aiq-ring-stat-val.green { color: #10d98e; }
.aiq-ring-stat-label {
  font-size: 11px;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.aiq-ring-stat-divider {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,0.08);
}

/* InsightForge grid: stats row + device chart card */
.aiq-insightforge-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  .aiq-insightforge-grid { grid-template-columns: 1fr; }
}
.aiq-device-chart-card {
  margin-top: 0;
  min-width: 280px;
}
.aiq-device-chart-wrap {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 16px 8px;
}
.aiq-donut-canvas-wrap {
  position: relative;
  width: 180px !important;
  height: 180px !important;
  min-width: 180px !important;
  flex-shrink: 0 !important;
}
.aiq-donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.aiq-donut-total {
  font-size: 28px;
  font-weight: 800;
  color: #e2e8f0;
  line-height: 1;
  font-family: 'DM Sans', sans-serif;
}
.aiq-donut-label {
  font-size: 11px;
  color: #475569;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: 'DM Sans', sans-serif;
}
.aiq-device-legend {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}
.aiq-device-legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.aiq-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
.aiq-legend-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.aiq-legend-name {
  font-size: 13px;
  color: #cbd5e1;
  font-weight: 600;
}
.aiq-legend-pct {
  font-size: 11px;
  color: #475569;
}
.aiq-legend-count {
  font-size: 15px;
  font-weight: 800;
  color: #94a3b8;
  min-width: 32px;
  text-align: right;
}

.aiq-category-chart-card {
  display: flex;
  flex-direction: column;
}
.aiq-category-bars {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 8px 0;
  flex: 1;
  justify-content: center;
}
.aiq-cat-row {
  display: grid;
  grid-template-columns: 80px 1fr 32px;
  align-items: center;
  gap: 14px;
}
.aiq-cat-label {
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
  text-align: right;
}
.aiq-cat-bar-track {
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  overflow: hidden;
}
.aiq-cat-bar-fill {
  height: 100%;
  width: var(--bar-width);
  background: var(--bar-color);
  border-radius: 4px;
  transition: width 1.2s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 0 8px var(--bar-color);
}
.aiq-cat-count {
  font-size: 12px;
  font-weight: 800;
  color: #94a3b8;
  text-align: right;
}

/* ── Settings Nav Group Labels ──────────────────────────────────── */
.aiq-snav-group-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--aiq-subtle);
  padding: 10px 16px 4px;
  border-top: 1px solid var(--aiq-border-l);
}
.aiq-snav-group-label:first-child { border-top: none; padding-top: 12px; }

/* ── Heatmap Page Dark Theme ─────────────────────────────────────── */

/* 1. Tip badge */
.aiq-heatmap-page .aiq-hm-tip-badge {
  background: rgba(251,191,36,0.08);
  border: 1px solid rgba(251,191,36,0.2);
  color: #fbbf24;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 12px;
}

/* 2. Controls card */
.aiq-heatmap-page .aiq-hm-controls-card {
  background: #0f1620 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
}

/* SELECT PAGE & DEVICE dropdowns */
.aiq-heatmap-page .aiq-hm-select,
.aiq-heatmap-page #aiq-hm-url,
.aiq-heatmap-page #aiq-hm-device {
  background: #141d2b !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #e2e8f0 !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  width: 100% !important;
}

/* DATE RANGE buttons */
.aiq-heatmap-page .aiq-btn-group-toggle { display: flex; gap: 8px; }
.aiq-heatmap-page .aiq-btn-group-toggle .aiq-btn-outline {
  background: #141d2b;
  border: 1px solid rgba(255,255,255,0.1);
  color: #64748b;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.aiq-heatmap-page .aiq-btn-group-toggle .aiq-btn-outline:hover {
  border-color: #10d98e;
  color: #10d98e;
}
.aiq-heatmap-page .aiq-btn-group-toggle .aiq-btn-outline.active {
  background: #10d98e;
  border-color: #10d98e;
  color: #060912;
  font-weight: 700;
}

/* Generate Heatmap button */
.aiq-heatmap-page .aiq-hm-generate-btn,
.aiq-heatmap-page #aiq-btn-view-heatmap {
  background: linear-gradient(135deg, #059669, #10d98e) !important;
  color: #060912 !important;
  font-weight: 800 !important;
  border: none !important;
  padding: 10px 22px !important;
  border-radius: 10px !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 12px rgba(16,217,142,0.3) !important;
  font-size: 13px;
  height: 40px;
  cursor: pointer;
  transition: opacity 0.2s, box-shadow 0.2s;
}
.aiq-heatmap-page #aiq-btn-view-heatmap:hover:not(:disabled) {
  opacity: 0.95;
  box-shadow: 0 4px 20px rgba(16,217,142,0.45) !important;
}
.aiq-heatmap-page #aiq-btn-view-heatmap:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: 0 2px 12px rgba(16,217,142,0.15) !important;
}

/* 3. Stat cards row */
.aiq-heatmap-page .aiq-hm-stats-row .aiq-hm-stat-card {
  background: #0f1620 !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  padding: 18px 20px !important;
  border-left: none !important;
}
.aiq-heatmap-page .aiq-hm-stat-1 { border-top: 3px solid #3b82f6 !important; }
.aiq-heatmap-page .aiq-hm-stat-2 { border-top: 3px solid #a78bfa !important; }
.aiq-heatmap-page .aiq-hm-stat-3 { border-top: 3px solid #10d98e !important; }
.aiq-heatmap-page .aiq-hm-stat-4 { border-top: 3px solid #fbbf24 !important; }
.aiq-heatmap-page .aiq-hm-stats-row .aiq-stat-val { color: #10d98e !important; }
.aiq-heatmap-page .aiq-hm-stats-row .aiq-stat-label {
  color: #64748b !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
}
.aiq-heatmap-page .aiq-hm-stat-1 .aiq-stat-icon.blue { background: rgba(59,130,246,0.12) !important; }
.aiq-heatmap-page .aiq-hm-stat-2 .aiq-stat-icon.purple { background: rgba(167,139,250,0.12) !important; }
.aiq-heatmap-page .aiq-hm-stat-3 .aiq-stat-icon.green { background: rgba(16,217,142,0.12) !important; }
.aiq-heatmap-page .aiq-hm-stat-4 .aiq-stat-icon.orange { background: rgba(251,191,36,0.12) !important; }

/* 4. Heatmap visualizer chrome */
.aiq-heatmap-page .aiq-hm-visualizer {
  background: #0f172a;
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.aiq-heatmap-page .aiq-hm-chrome-bar {
  background: #0d1117 !important;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.aiq-heatmap-page .aiq-hm-live-badge {
  background: rgba(16,217,142,0.15);
  color: #10d98e;
  border: 1px solid rgba(16,217,142,0.3);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

/* 5. Top Clicked Elements table card */
.aiq-heatmap-page .aiq-hm-table-card {
  background: #0f1620 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
.aiq-heatmap-page .aiq-hm-table thead th {
  background: transparent !important;
  color: #475569 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.6px !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
.aiq-heatmap-page .aiq-hm-table tbody td {
  background: transparent !important;
  color: #cbd5e1 !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  padding: 11px 14px !important;
}
.aiq-heatmap-page .aiq-hm-table tbody tr:hover {
  background: rgba(255,255,255,0.03) !important;
}
.aiq-heatmap-page .aiq-hm-table tbody tr td:nth-child(2) div {
  background: rgba(255,255,255,0.06) !important;
  color: #94a3b8 !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 12px !important;
  padding: 3px 10px !important;
  border-radius: 5px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}
/* Rank colors (JS may use inline; these override when possible) */
.aiq-heatmap-page .aiq-hm-table tbody tr:nth-child(1) td:first-child,
.aiq-heatmap-page .aiq-hm-table tbody tr:nth-child(1) td:first-child div { color: #fbbf24 !important; }
.aiq-heatmap-page .aiq-hm-table tbody tr:nth-child(2) td:first-child,
.aiq-heatmap-page .aiq-hm-table tbody tr:nth-child(2) td:first-child div { color: #94a3b8 !important; }
.aiq-heatmap-page .aiq-hm-table tbody tr:nth-child(3) td:first-child,
.aiq-heatmap-page .aiq-hm-table tbody tr:nth-child(3) td:first-child div { color: #b45309 !important; }
.aiq-heatmap-page .aiq-hm-table tbody tr:nth-child(n+4) td:first-child,
.aiq-heatmap-page .aiq-hm-table tbody tr:nth-child(n+4) td:first-child div { color: #475569 !important; }
/* Click count bar */
.aiq-heatmap-page .aiq-hm-table tbody td:nth-child(3) div[style*="height: 100%"] {
  background: #10d98e !important;
  height: 3px !important;
  border-radius: 2px !important;
}
.aiq-heatmap-page .aiq-hm-table tbody td:nth-child(3) div[style*="max-width: 100px"] {
  height: 3px !important;
  border-radius: 2px !important;
  background: rgba(255,255,255,0.06) !important;
}
/* % of total chips - classes for JS */
.aiq-heatmap-page .aiq-hm-table .aiq-hm-pct-high {
  background: rgba(248,113,113,0.12) !important;
  color: #f87171 !important;
}
.aiq-heatmap-page .aiq-hm-table .aiq-hm-pct-mid {
  background: rgba(251,191,36,0.12) !important;
  color: #fbbf24 !important;
}
.aiq-heatmap-page .aiq-hm-table .aiq-hm-pct-low {
  background: rgba(16,217,142,0.12) !important;
  color: #10d98e !important;
}

@media (max-width: 860px) {
  .aiq-heatmap-page .aiq-hm-controls-card {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── Scheduled Scans (Settings tab) ───────────────────────────── */
/* Frequency radio cards */
.aiq-freq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 360px;
}
.aiq-freq-card {
  cursor: pointer;
  border-radius: 10px;
  border: 1.5px solid var(--aiq-border);
  padding: 16px;
  transition: all .15s;
  background: rgba(255,255,255,0.02);
}
.aiq-freq-card:hover {
  border-color: rgba(16,217,142,0.3);
  background: rgba(16,217,142,0.04);
}
.aiq-freq-card input[type="radio"] { display: none; }
.aiq-freq-card:has(input:checked) {
  border-color: #10d98e;
  background: rgba(16,217,142,0.07);
}
.aiq-freq-icon { font-size: 20px; margin-bottom: 8px; }
.aiq-freq-title {
  font-family: 'Syne', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--aiq-ink);
  margin-bottom: 3px;
}
.aiq-freq-desc { font-size: 12px; color: var(--aiq-muted); }

/* Schedule stat cards */
.aiq-sched-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.aiq-sched-stat {
  background: #080d18;
  border: 1px solid var(--aiq-border);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}
.aiq-sched-stat-icon { font-size: 18px; margin-bottom: 8px; }
.aiq-sched-stat-val {
  font-family: 'Syne', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--aiq-ink);
  margin-bottom: 4px;
}
.aiq-sched-stat-val.on { color: #10d98e; }
.aiq-sched-stat-label {
  font-size: 11px;
  color: var(--aiq-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* Last scan + run now */
.aiq-last-scan-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--aiq-border);
  border-bottom: 1px solid var(--aiq-border);
  margin-bottom: 16px;
}
.aiq-run-now-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
}
.aiq-run-now-result { font-size: 13px; }

/* Log area (schedule tab) */
.aiq-sched-log-wrap { margin-top: 16px; }
.aiq-sched-log-wrap .aiq-log-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.aiq-sched-log-wrap .aiq-log-area { height: 160px; }

/* URL tag input */
.aiq-url-tags-wrap {
  background: #080d18;
  border: 1px solid var(--aiq-border);
  border-radius: 10px;
  padding: 12px;
  min-height: 80px;
  transition: border-color .2s;
}
.aiq-url-tags-wrap:focus-within {
  border-color: rgba(16,217,142,0.35);
}
.aiq-url-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
  min-height: 0;
}
.aiq-url-tags:empty { margin-bottom: 0; }

.aiq-url-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(16,217,142,0.08);
  border: 1px solid rgba(16,217,142,0.2);
  color: #10d98e;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 6px;
  max-width: 100%;
  word-break: break-all;
}
.aiq-url-tag-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 340px;
}
.aiq-url-tag-remove {
  background: none;
  border: none;
  color: rgba(16,217,142,0.5);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  transition: color .15s;
}
.aiq-url-tag-remove:hover { color: #f87171; }

.aiq-url-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.aiq-url-add-input {
  flex: 1;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--aiq-border);
  border-radius: 7px;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--aiq-ink);
  font-family: 'DM Mono', monospace;
  outline: none;
  transition: border-color .2s;
}
.aiq-url-add-input:focus {
  border-color: rgba(16,217,142,0.35);
}
.aiq-url-add-input::placeholder { color: var(--aiq-muted); }
.aiq-url-add-btn {
  background: rgba(16,217,142,0.1);
  border: 1px solid rgba(16,217,142,0.25);
  color: #10d98e;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 7px;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.aiq-url-add-btn:hover {
  background: rgba(16,217,142,0.18);
}

.aiq-toggle { position: relative; display: inline-block; }
.aiq-toggle input { display: none; }
.aiq-toggle-track {
  display: block;
  width: 44px; height: 24px;
  background: rgba(255,255,255,0.1);
  border: 1px solid var(--aiq-border);
  border-radius: 12px;
  cursor: pointer;
  transition: background .2s;
  position: relative;
}
.aiq-toggle-track::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  background: var(--aiq-muted);
  border-radius: 50%;
  transition: transform .2s, background .2s;
}
.aiq-toggle input:checked + .aiq-toggle-track {
  background: rgba(16,217,142,0.2);
  border-color: rgba(16,217,142,0.4);
}
.aiq-toggle input:checked + .aiq-toggle-track::after {
  transform: translateX(20px);
  background: #10d98e;
}

.aiq-field-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.aiq-log-line-ok { color: var(--aiq-green); }
.aiq-log-line-err { color: var(--aiq-red); }

/* Undo FOUC-hiding after sidebar.js adds .aiq-sidebar-ready (inline style is on stylesheet, not removable) */
body.aiq-sidebar-ready #toplevel_page_accessiq .wp-submenu li.aiq-group-child {
	opacity: 1 !important;
	max-height: none !important;
	overflow: visible !important;
}
body.aiq-sidebar-ready #toplevel_page_accessiq * {
	transition: initial !important;
	animation: initial !important;
}

/* ── Print Header: hidden on screen ────────────────────────────── */
#aiq-print-header { display: none; }

/* ── Print Styles (Report page) ────────────────────────────────── */
@media print {

  /* 0. Override dark CSS variables → readable on white paper */
  :root {
    --aiq-bg:       #ffffff;
    --aiq-bg-2:     #f8fafc;
    --aiq-card:     #f8fafc;
    --aiq-card-2:   #f1f5f9;
    --aiq-border:   #e2e8f0;
    --aiq-border-l: #f1f5f9;
    --aiq-ink:      #1e293b;
    --aiq-ink-2:    #334155;
    --aiq-muted:    #64748b;
    --aiq-shadow-sm: none;
    --aiq-shadow:    none;
    --aiq-shadow-lg: none;
  }

  /* 1. Hide WordPress chrome */
  #wpadminbar,
  #adminmenuback,
  #adminmenuwrap,
  #adminmenu,
  #wpfooter,
  #screen-meta,
  #screen-meta-links,
  .update-nag,
  .notice,
  .wp-header-end { display: none !important; }

  /* 2. Reset layout offsets injected by WordPress */
  html, body {
    background: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #wpcontent,
  #wpbody,
  #wpbody-content {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    width: 100% !important;
  }

  /* 3. Show print-only brand header */
  #aiq-print-header {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 2.5px solid #10d98e;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  #aiq-print-brand {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  #aiq-print-brand-icon {
    font-size: 22px;
    width: 44px;
    height: 44px;
    background: #ecfdf5;
    border: 1.5px solid #bbf7d0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  #aiq-print-brand-name {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    display: block;
    font-family: 'DM Sans', sans-serif;
  }
  #aiq-print-brand-sub {
    font-size: 10px;
    color: #10d98e;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    font-family: 'DM Sans', sans-serif;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  #aiq-print-meta {
    text-align: right;
    font-size: 11px;
    color: #64748b;
    font-family: 'DM Sans', sans-serif;
    line-height: 1.8;
  }
  #aiq-print-meta strong {
    font-size: 13px;
    color: #1e293b;
    display: block;
  }

  /* 4. Hide screen-only navigation and action buttons */
  .aiq-wrap > div:nth-child(2) { display: none !important; }
  button[onclick="window.print();"] { display: none !important; }

  /* 5. Light theme for the report wrapper */
  .aiq-wrap {
    background: #ffffff !important;
    color: #1e293b !important;
    margin: 0 !important;
    padding: 0 16px 16px !important;
    min-height: unset !important;
    overflow: visible !important;
    max-width: 100% !important;
  }

  /* 6. Cards */
  .aiq-card {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .aiq-card-header { border-bottom: 1px solid #e2e8f0; padding-bottom: 12px; margin-bottom: 12px; }
  .aiq-card-header h3 { color: #0f172a !important; font-size: 15px !important; }

  /* 7. Stats boxes inside report hero */
  .aiq-card div[style*="background: var(--aiq-bg)"],
  .aiq-card div[style*='background: var(--aiq-bg)'] {
    background: #f1f5f9 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* 8. Issue items: boost background opacity and keep left-border colour */
  .aiq-issue-item {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    /* Override the semi-transparent rgba backgrounds set by PHP inline style */
    background: #fef2f2 !important;
    border-left-width: 4px !important;
    border-left-style: solid !important;
    border-left-color: #ef4444 !important;
  }
  /* Warning issue items: amber tint */
  .aiq-issue-item[style*="rgba(251,191,36"] {
    background: #fffbeb !important;
    border-left-color: #d97706 !important;
  }

  /* Issue header texts */
  .aiq-issue-item [style*="font-weight: 700"] { color: #0f172a !important; }
  .aiq-issue-item .aiq-issue-badge          { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .aiq-issue-item [style*="font-weight: 600"] { color: #1e293b !important; }

  /* 9. Element code box */
  .aiq-issue-item code {
    color: #b91c1c !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .aiq-issue-item div[style*="rgba(255,255,255,0.04)"] {
    background: #fff5f5 !important;
    border: 1px dashed #fca5a5 !important;
  }

  /* "ELEMENT" / "HOW TO FIX" small uppercase labels */
  .aiq-issue-item [style*="text-transform: uppercase"] { color: #475569 !important; }

  /* How-to-fix paragraph */
  .aiq-issue-item p { color: #1e293b !important; }

  /* 10. All generic text: dark */
  .aiq-wrap p,
  .aiq-wrap span,
  .aiq-wrap div,
  .aiq-wrap h3,
  .aiq-wrap h4,
  .aiq-wrap small { color: #1e293b; }

  /* 11. Chips: keep colour for readability */
  .aiq-chip,
  .aiq-chip.green,
  .aiq-chip.red,
  .aiq-chip.amber,
  .aiq-chip.blue,
  .aiq-chip.gray,
  .aiq-level-badge {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .aiq-chip.green  { background: #dcfce7 !important; color: #166534 !important; }
  .aiq-chip.red    { background: #fee2e2 !important; color: #991b1b !important; }
  .aiq-chip.amber  { background: #fef9c3 !important; color: #854d0e !important; }
  .aiq-chip.blue   { background: #dbeafe !important; color: #1d4ed8 !important; }
  .aiq-chip.gray   { background: #f1f5f9 !important; color: #475569 !important; }

  /* Score circle and stat numbers: keep inherited inline colors */
  .aiq-card [style*="font-size: 28px"],
  .aiq-card [style*="font-size: 32px"] {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* Report hero stat boxes */
  .aiq-card [style*="background: var(--aiq-bg)"],
  .aiq-card [style*="background:var(--aiq-bg)"] {
    background: #f1f5f9 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* Muted label text in stat boxes */
  .aiq-card [style*="text-transform: uppercase"][style*="color: var(--aiq-muted)"],
  .aiq-card [style*="font-size: 11px"] { color: #64748b !important; }

  /* 12. Links: no underline, dark */
  .aiq-wrap a { text-decoration: none !important; color: #1e293b !important; }
  .aiq-wrap a[href]::after { content: ''; }

  /* 13. Filter buttons (Errors / Warnings) — hide, redundant in print */
  .aiq-card-header .aiq-btn-sm { display: none !important; }

  /* 14. Footer note */
  .aiq-wrap > div:last-child {
    margin-top: 20px !important;
    padding-top: 14px !important;
    border-top: 1px solid #e2e8f0 !important;
    color: #94a3b8 !important;
    font-size: 9pt !important;
  }
}

/* Sidebar FOUC prevention (admin menu) */
#toplevel_page_accessiq .wp-submenu li.aiq-group-child {
  opacity: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  transition: none !important;
}
#toplevel_page_accessiq * {
  transition: none !important;
  animation: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   JOURNEY TRACKER
   ═══════════════════════════════════════════════════════════════ */

/* Dashboard stat card — full-width 5th card */
.aiq-dw-stat-card--wide {
    grid-column: 1 / -1;
}

/* Two-column layout: list + detail */
.aiq-journey-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}
@media (max-width: 1100px) {
    .aiq-journey-layout { grid-template-columns: 1fr; }
}

.aiq-journey-list-card,
.aiq-journey-detail-card {
    overflow: hidden;
}

/* Session list row hover + active */
.aiq-journey-row:hover td {
    background: rgba(59, 130, 246, 0.06) !important;
}
.aiq-journey-row--active td {
    background: rgba(59, 130, 246, 0.12) !important;
}

/* Timeline container */
.aiq-journey-timeline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

/* Individual step node */
.aiq-journey-step {
    background: var(--aiq-card-2, rgba(255,255,255,0.05));
    border: 1px solid var(--aiq-border, rgba(255,255,255,0.08));
    border-radius: 8px;
    padding: 8px 12px;
    min-width: 90px;
    max-width: 180px;
}

.aiq-journey-step-url {
    font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--aiq-ink, #e2e8f0);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aiq-journey-step-meta {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.aiq-journey-step-time,
.aiq-journey-step-scroll {
    font-size: 10px;
    color: var(--aiq-muted, #8b9ab5);
    white-space: nowrap;
}

/* Arrow between steps */
.aiq-journey-arrow {
    font-size: 18px;
    color: var(--aiq-muted, #8b9ab5);
    flex-shrink: 0;
}

/* Exit marker */
.aiq-journey-exit {
    font-size: 11px;
    font-weight: 600;
    color: #f87171;
    padding: 4px 8px;
    border: 1px dashed #f87171;
    border-radius: 6px;
    flex-shrink: 0;
}

/* State messages */
.aiq-journey-empty,
.aiq-journey-loading,
.aiq-journey-error {
    font-size: 13px;
    color: var(--aiq-muted, #8b9ab5);
    text-align: center;
    padding: 24px 0;
    margin: 0;
}
.aiq-journey-error { color: #f87171; }

/* ================================================================
   AccessIQ — Overview Dashboard (Stitch Design System)
   Prefix: aiq-ov-
   ================================================================ */

/* Override panel display for new bento layout */
#aiq-panel-overview.active {
  display: block !important;
}

/* ── Design Tokens (Stitch palette, scoped to overview panel) ── */
#aiq-panel-overview {
  --aiq-ov-bg:          #0e1513;
  --aiq-ov-surface:     #161d1b;
  --aiq-ov-card:        #1a211f;
  --aiq-ov-card-high:   #242b2a;
  --aiq-ov-border:      rgba(255,255,255,0.05);
  --aiq-ov-primary:     #57f1db;
  --aiq-ov-primary-dim: #3cddc7;
  --aiq-ov-text:        #dde4e1;
  --aiq-ov-text-muted:  #bacac5;
  --aiq-ov-text-subtle: #859490;
  --aiq-ov-font:        'Manrope', 'DM Sans', -apple-system, sans-serif;
}

/* ── Section 1: Header Bar ────────────────────────────────────── */
.aiq-ov-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--aiq-ov-border);
}
.aiq-ov-header-left { display: flex; flex-direction: column; gap: 4px; }
.aiq-ov-title {
  font-family: var(--aiq-ov-font);
  font-size: 22px;
  font-weight: 800;
  color: var(--aiq-ov-text);
  margin: 0;
  line-height: 1.2;
}
.aiq-ov-subtitle {
  font-size: 12px;
  color: var(--aiq-ov-text-subtle);
}
.aiq-ov-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.aiq-ov-live-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(87,241,219,0.07);
  border: 1px solid rgba(87,241,219,0.18);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--aiq-ov-primary);
  white-space: nowrap;
}
.aiq-ov-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--aiq-ov-primary);
  flex-shrink: 0;
  animation: aiq-ov-pulse 2s ease-in-out infinite;
}
@keyframes aiq-ov-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(87,241,219,0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(87,241,219,0); }
  100% { box-shadow: 0 0 0 0 rgba(87,241,219,0); }
}
.aiq-ov-refresh-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  color: var(--aiq-ov-text-subtle);
  width: 36px;
  height: 36px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.aiq-ov-refresh-btn:hover {
  background: rgba(87,241,219,0.07);
  color: var(--aiq-ov-primary);
  border-color: rgba(87,241,219,0.18);
}

/* ── Section 2: Bento Grid ────────────────────────────────────── */
.aiq-ov-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

/* ── Card Base (Glass) ────────────────────────────────────────── */
.aiq-ov-card {
  background: rgba(26,33,31,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--aiq-ov-border);
  border-radius: 12px;
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.aiq-ov-card-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--aiq-ov-primary) 0%, transparent 70%);
  border-radius: 12px 12px 0 0;
}
.aiq-ov-card-title {
  font-family: var(--aiq-ov-font);
  font-size: 14px;
  font-weight: 700;
  color: var(--aiq-ov-text);
  margin: 0 0 4px;
}
.aiq-ov-card-subtitle {
  font-size: 12px;
  color: var(--aiq-ov-text-subtle);
  margin: 0 0 20px;
}
.aiq-ov-card-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0;
}

/* ── Column spans ─────────────────────────────────────────────── */
.aiq-ov-card-score   { grid-column: span 4; }
.aiq-ov-card-stats   { grid-column: span 8; }
.aiq-ov-card-cats    { grid-column: span 12; }
.aiq-ov-card-scans   { grid-column: span 8; }
.aiq-ov-card-actions { grid-column: span 4; }

/* ── Card A: Score Ring ───────────────────────────────────────── */
.aiq-ov-ring-wrap {
  display: flex;
  justify-content: center;
  margin: 0 0 16px;
}

/* Reuse existing .aiq-ring-canvas-wrap */
.aiq-ov-card-score .aiq-ring-canvas-wrap {
  position: relative;
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.aiq-ov-ring-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
.aiq-ov-ring-score {
  font-family: var(--aiq-ov-font);
  font-size: 48px;
  font-weight: 700;
  color: var(--aiq-ov-primary);
  line-height: 1;
  display: block;
}
.aiq-ov-ring-unit {
  font-size: 12px;
  color: var(--aiq-ov-text-subtle);
  display: block;
  margin-top: 2px;
}
.aiq-ov-ring-grade {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: block;
  margin-top: 4px;
}
.aiq-ov-score-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding-top: 12px;
  border-top: 1px solid var(--aiq-ov-border);
}
.aiq-ov-score-stat { text-align: center; }
.aiq-ov-score-stat-val {
  display: block;
  font-family: var(--aiq-ov-font);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 4px;
}
.aiq-ov-score-stat-lbl {
  font-size: 10px;
  color: var(--aiq-ov-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.aiq-ov-score-stat-sep {
  width: 1px;
  height: 36px;
  background: var(--aiq-ov-border);
}

/* ── Card B: Stats ────────────────────────────────────────────── */
.aiq-ov-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  height: 100%;
}
.aiq-ov-stat-mini {
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--aiq-ov-border);
  border-radius: 10px;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 150px;
  gap: 6px;
}
.aiq-ov-stat-icon {
  font-size: 18px;
  color: var(--aiq-ov-primary);
  opacity: 0.75;
}
.aiq-ov-stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--aiq-ov-text-subtle);
  text-transform: uppercase;
}
.aiq-ov-stat-value {
  font-family: var(--aiq-ov-font);
  font-size: 26px;
  font-weight: 700;
  color: var(--aiq-ov-text);
  line-height: 1;
}
.aiq-ov-stat-period {
  font-size: 11px;
  color: var(--aiq-ov-text-subtle);
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--aiq-ov-border);
}

/* ── Card C: Violation Bars ───────────────────────────────────── */
.aiq-ov-bars-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
}
.aiq-ov-bar-row {
  display: grid;
  grid-template-columns: 82px 1fr 44px;
  align-items: center;
  gap: 14px;
}
.aiq-ov-bar-label {
  font-size: 12px;
  color: var(--aiq-ov-text-muted);
  font-weight: 500;
  text-align: right;
}
.aiq-ov-bar-track {
  height: 7px;
  border-radius: 4px;
  background: rgba(87,241,219,0.07);
  overflow: hidden;
}
.aiq-ov-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--aiq-ov-primary);
  width: 0%;
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.aiq-ov-bar-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--aiq-ov-text);
  text-align: right;
}

/* ── Card D: Recent Scans ─────────────────────────────────────── */
.aiq-ov-scans-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}
.aiq-ov-view-all {
  font-size: 12px;
  color: var(--aiq-ov-primary);
  text-decoration: none;
  font-weight: 600;
  padding-top: 2px;
}
.aiq-ov-view-all:hover { color: var(--aiq-ov-primary-dim); text-decoration: none; }

.aiq-ov-scans-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.aiq-ov-scans-table th {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--aiq-ov-text-subtle);
  text-transform: uppercase;
  padding: 0 10px 12px 0;
  text-align: left;
  border-bottom: 1px solid var(--aiq-ov-border);
}
.aiq-ov-scans-table td {
  padding: 11px 10px 11px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  color: var(--aiq-ov-text);
  vertical-align: middle;
}
.aiq-ov-scans-table tbody tr:last-child td { border-bottom: none; }
.aiq-ov-scans-table tbody tr:hover td { background: rgba(255,255,255,0.015); }
.aiq-ov-td-page {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  font-size: 12px;
  color: var(--aiq-ov-text-muted) !important;
}
.aiq-ov-td-issues { color: var(--aiq-ov-text-subtle) !important; font-size: 13px; }
.aiq-ov-td-date   { color: var(--aiq-ov-text-subtle) !important; font-size: 12px; white-space: nowrap; }

.aiq-ov-score-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  min-width: 42px;
}
.aiq-ov-score-pill-green { background: rgba(87,241,219,0.1);  color: #57f1db; border: 1px solid rgba(87,241,219,0.2); }
.aiq-ov-score-pill-amber { background: rgba(251,191,36,0.1);  color: #fbbf24; border: 1px solid rgba(251,191,36,0.2); }
.aiq-ov-score-pill-red   { background: rgba(248,113,113,0.1); color: #f87171; border: 1px solid rgba(248,113,113,0.2); }

.aiq-ov-level-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  background: rgba(255,255,255,0.06);
  color: var(--aiq-ov-text-subtle);
  letter-spacing: 0.5px;
  border: 1px solid var(--aiq-ov-border);
}
.aiq-ov-action-link {
  font-size: 11px;
  font-weight: 600;
  color: var(--aiq-ov-primary);
  text-decoration: none;
  white-space: nowrap;
}
.aiq-ov-action-link:hover { color: var(--aiq-ov-primary-dim); text-decoration: none; }

/* ── Card E: Quick Actions ────────────────────────────────────── */
.aiq-ov-actions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.aiq-ov-action-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--aiq-ov-border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--aiq-ov-text);
  font-size: 13px;
  font-weight: 600;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  cursor: pointer;
}
.aiq-ov-action-btn:hover {
  background: rgba(87,241,219,0.06);
  border-color: rgba(87,241,219,0.15);
  color: var(--aiq-ov-primary);
  text-decoration: none;
}
.aiq-ov-action-btn-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(87,241,219,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.aiq-ov-action-btn-arrow {
  margin-left: auto;
  color: var(--aiq-ov-text-subtle);
  font-size: 16px;
  opacity: 0.6;
  line-height: 1;
}

/* ── Empty State ──────────────────────────────────────────────── */
.aiq-ov-empty {
  padding: 36px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.aiq-ov-empty-icon { font-size: 32px; }
.aiq-ov-empty-text { font-size: 13px; color: var(--aiq-ov-text-subtle); margin: 0; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .aiq-ov-card-score { grid-column: span 5; }
  .aiq-ov-card-stats { grid-column: span 7; }
}
@media (max-width: 900px) {
  .aiq-ov-bento { gap: 14px; }
  .aiq-ov-card-score,
  .aiq-ov-card-stats,
  .aiq-ov-card-cats,
  .aiq-ov-card-scans,
  .aiq-ov-card-actions { grid-column: span 12; }
  .aiq-ov-stats-grid { grid-template-columns: 1fr 1fr; }
  .aiq-ov-header { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (max-width: 600px) {
  .aiq-ov-stats-grid { grid-template-columns: 1fr; }
  .aiq-ov-live-pill { display: none; }
}

/* ── Sparklines ───────────────────────────────────────────────── */
.aiq-ov-stat-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.aiq-ov-stat-icon {
  font-size: 16px !important;
  color: var(--aiq-ov-primary);
  opacity: 0.7;
}
.aiq-ov-stat-trend {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--aiq-ov-text-subtle);
  background: rgba(87,241,219,0.08);
  border: 1px solid rgba(87,241,219,0.15);
  border-radius: 4px;
  padding: 2px 6px;
  text-transform: uppercase;
}
.aiq-ov-sparkline {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 28px;
  margin-top: auto;
  padding-top: 10px;
}
.aiq-ov-spark-bar {
  flex: 1;
  background: rgba(87,241,219,0.18);
  border-radius: 2px 2px 0 0;
  min-height: 4px;
  transition: background 0.2s;
}
.aiq-ov-spark-bar.active {
  background: rgba(87,241,219,0.55);
}

/* ================================================================
   AccessIQ — Scanner Page (Stitch Design System)
   Prefix: aiq-sc-
   ================================================================ */

/* ── Stitch tokens scoped to scanner ─────────────────────── */
.aiq-sc-wrap {
  --aiq-sc-bg:           #0e1513;
  --aiq-sc-surface:      #161d1b;
  --aiq-sc-card:         #1a211f;
  --aiq-sc-card-high:    #242b2a;
  --aiq-sc-border:       rgba(255,255,255,0.05);
  --aiq-sc-border-hi:    rgba(255,255,255,0.10);
  --aiq-sc-primary:      #57f1db;
  --aiq-sc-primary-glow: rgba(87,241,219,0.12);
  --aiq-sc-text:         #dde4e1;
  --aiq-sc-text-muted:   #bacac5;
  --aiq-sc-text-subtle:  #859490;
  --aiq-sc-error:        #ffb4ab;
  --aiq-sc-error-bg:     rgba(147,0,10,0.25);
  --aiq-sc-warning:      #ffd1aa;
  --aiq-sc-warning-bg:   rgba(75,40,0,0.35);
  --aiq-sc-info:         #adc6ff;
  --aiq-sc-info-bg:      rgba(0,46,106,0.35);
  font-family: 'Manrope', 'DM Sans', sans-serif;
}

/* ── Spinner SM (used by scanner JS) ────────────────────── */
.aiq-spinner-sm {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.12);
  border-top-color: var(--aiq-sc-primary, #57f1db);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex-shrink: 0;
  vertical-align: middle;
}

/* ── Header ───────────────────────────────────────────────── */
.aiq-sc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.aiq-sc-breadcrumb {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aiq-sc-text-subtle);
  margin: 0 0 6px;
}
.aiq-sc-title {
  font-family: 'Manrope', 'DM Sans', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--aiq-sc-text);
  margin: 0 0 4px;
  letter-spacing: -0.4px;
  line-height: 1.2;
}
.aiq-sc-subtitle {
  font-size: 13px;
  color: var(--aiq-sc-text-muted);
  margin: 0;
}
.aiq-sc-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding-top: 4px;
}

/* ── Buttons ──────────────────────────────────────────────── */
.aiq-sc-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #2ec4a0, #57f1db);
  color: #0a1a16;
  font-weight: 700;
  font-size: 13px;
  font-family: 'Manrope', 'DM Sans', sans-serif;
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .15s, box-shadow .15s;
  box-shadow: 0 2px 12px rgba(87,241,219,0.25);
}
.aiq-sc-btn-primary:hover { opacity: .9; color: #0a1a16; box-shadow: 0 4px 20px rgba(87,241,219,0.4); }
.aiq-sc-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--aiq-sc-card);
  color: var(--aiq-sc-text);
  font-weight: 600;
  font-size: 13px;
  font-family: 'Manrope', 'DM Sans', sans-serif;
  border: 1px solid var(--aiq-sc-border-hi);
  border-radius: 8px;
  padding: 9px 16px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
.aiq-sc-btn-secondary:hover { border-color: var(--aiq-sc-primary); color: var(--aiq-sc-primary); }
.aiq-sc-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--aiq-sc-text-muted);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 9px 14px;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.aiq-sc-btn-ghost:hover { color: var(--aiq-sc-text); border-color: var(--aiq-sc-border-hi); }
.aiq-sc-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--aiq-sc-primary);
  text-decoration: none;
  transition: opacity .15s;
}
.aiq-sc-link:hover { opacity: .8; }

/* ── Input Bar ────────────────────────────────────────────── */
.aiq-sc-input-bar {
  background: var(--aiq-sc-card);
  border: 1px solid var(--aiq-sc-border-hi);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 20px;
}
.aiq-sc-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.aiq-sc-quick-select {
  background: var(--aiq-sc-surface) !important;
  border: 1px solid var(--aiq-sc-border-hi) !important;
  color: var(--aiq-sc-text) !important;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
  min-width: 160px;
  color-scheme: dark;
  cursor: pointer;
}
.aiq-sc-url-input {
  flex: 1;
  min-width: 220px;
  background: var(--aiq-sc-surface) !important;
  border: 1px solid var(--aiq-sc-border-hi) !important;
  color: var(--aiq-sc-text) !important;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 14px;
  font-family: 'DM Sans', sans-serif;
  transition: border-color .15s, box-shadow .15s;
  color-scheme: dark;
}
.aiq-sc-url-input:focus {
  outline: none;
  border-color: var(--aiq-sc-primary) !important;
  box-shadow: 0 0 0 3px var(--aiq-sc-primary-glow) !important;
}
.aiq-sc-level-pills {
  display: flex;
  border: 1px solid var(--aiq-sc-border-hi);
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}
.aiq-sc-level-pill {
  background: transparent;
  color: var(--aiq-sc-text-muted);
  border: none;
  border-right: 1px solid var(--aiq-sc-border-hi);
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Manrope', 'DM Sans', sans-serif;
  cursor: pointer;
  transition: background .15s, color .15s;
  letter-spacing: 0.03em;
}
.aiq-sc-level-pill:last-child { border-right: none; }
.aiq-sc-level-pill:hover { background: var(--aiq-sc-primary-glow); color: var(--aiq-sc-primary); }
.aiq-sc-level-pill.active {
  background: var(--aiq-sc-primary);
  color: #0a1a16;
  font-weight: 800;
}
.aiq-sc-run-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #2ec4a0, #57f1db);
  color: #0a1a16;
  font-weight: 800;
  font-size: 14px;
  font-family: 'Manrope', 'DM Sans', sans-serif;
  border: none;
  border-radius: 8px;
  padding: 10px 22px;
  cursor: pointer;
  transition: opacity .15s, box-shadow .15s;
  box-shadow: 0 2px 14px rgba(87,241,219,0.3);
  flex-shrink: 0;
  white-space: nowrap;
}
.aiq-sc-run-btn:hover { opacity: .9; box-shadow: 0 4px 20px rgba(87,241,219,0.45); }
.aiq-sc-run-btn:disabled { opacity: .55; cursor: not-allowed; }

/* ── Progress ─────────────────────────────────────────────── */
.aiq-sc-progress-wrap { margin-top: 16px; }
.aiq-sc-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--aiq-sc-text-muted);
}
.aiq-sc-progress-label { flex: 1; }
.aiq-sc-progress-pct { font-weight: 700; color: var(--aiq-sc-primary); min-width: 36px; text-align: right; }
.aiq-sc-progress-track {
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 12px;
}
.aiq-sc-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #2ec4a0, #57f1db);
  border-radius: 3px;
  transition: width .3s ease;
}
.aiq-sc-progress-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
/* aiq-pcheck spans injected by JS */
.aiq-pcheck {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 600;
  font-family: 'DM Mono', monospace;
}
.aiq-pcheck.pass { background: rgba(87,241,219,0.08); color: var(--aiq-sc-primary); }
.aiq-pcheck.fail { background: rgba(255,180,171,0.08); color: var(--aiq-sc-error); }

/* ── Empty State ──────────────────────────────────────────── */
.aiq-sc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 24px;
  text-align: center;
  gap: 12px;
}
.aiq-sc-empty-icon { opacity: 0.7; }
.aiq-sc-empty-title {
  font-family: 'Manrope', 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--aiq-sc-text);
  margin: 0;
}
.aiq-sc-empty-desc {
  font-size: 13px;
  color: var(--aiq-sc-text-muted);
  margin: 0;
  max-width: 360px;
}

/* ── Bento Grid ───────────────────────────────────────────── */
.aiq-sc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 960px) {
  .aiq-sc-grid { grid-template-columns: repeat(2, 1fr); }
  .aiq-sc-card-score { grid-column: span 2; }
}
@media (max-width: 640px) {
  .aiq-sc-grid { grid-template-columns: 1fr; }
  .aiq-sc-card-score { grid-column: span 1; }
}

/* ── Card ─────────────────────────────────────────────────── */
.aiq-sc-card {
  background: rgba(26,33,31,0.9);
  border: 1px solid var(--aiq-sc-border-hi);
  border-radius: 14px;
  padding: 22px 20px 20px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(16px);
}
.aiq-sc-card-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(87,241,219,0.4), transparent);
}
.aiq-sc-card-title {
  font-family: 'Manrope', 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aiq-sc-text-subtle);
  margin: 0 0 4px;
}
.aiq-sc-card-subtitle {
  font-size: 12px;
  color: var(--aiq-sc-text-subtle);
  margin: 0 0 16px;
}

/* ── Score Ring (CSS conic-gradient) ─────────────────────── */
.aiq-sc-ring-wrap {
  --aiq-sc-ring-pct: 0;
  width: 152px;
  height: 152px;
  border-radius: 50%;
  background: conic-gradient(
    from -90deg,
    #57f1db calc(var(--aiq-sc-ring-pct) * 3.6deg),
    rgba(255,255,255,0.04) 0deg
  );
  position: relative;
  margin: 16px auto 20px;
  flex-shrink: 0;
  transition: background .1s;
}
.aiq-sc-ring-wrap::before {
  content: '';
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  background: #1a211f;
}
.aiq-sc-ring-inner {
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
  gap: 1px;
  text-align: center;
}
.aiq-sc-ring-num {
  font-family: 'Manrope', 'DM Sans', sans-serif;
  font-size: 42px;
  font-weight: 700;
  color: var(--aiq-sc-primary);
  line-height: 1;
  transition: color .3s;
}
.aiq-sc-ring-unit {
  font-size: 12px;
  color: var(--aiq-sc-text-subtle);
  font-weight: 600;
}
.aiq-sc-ring-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--aiq-sc-text-subtle);
  margin-top: 2px;
}
.aiq-sc-score-stats {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--aiq-sc-border);
}
.aiq-sc-score-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
}
.aiq-sc-score-stat-val {
  font-family: 'Manrope', 'DM Sans', sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}
.aiq-sc-score-stat-lbl {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aiq-sc-text-subtle);
}
.aiq-sc-score-stat-sep {
  width: 1px;
  height: 28px;
  background: var(--aiq-sc-border-hi);
  flex-shrink: 0;
}

/* ── Severity Breakdown ───────────────────────────────────── */
.aiq-sc-sev-list { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; flex: 1; }
.aiq-sc-sev-row { display: flex; flex-direction: column; gap: 5px; }
.aiq-sc-sev-label-row { display: flex; justify-content: space-between; align-items: center; }
.aiq-sc-sev-name { font-size: 12px; font-weight: 600; color: var(--aiq-sc-text-muted); }
.aiq-sc-sev-count { font-size: 13px; font-weight: 700; font-family: 'Manrope', sans-serif; }
.aiq-sc-sev-track {
  height: 6px;
  background: rgba(255,255,255,0.05);
  border-radius: 3px;
  overflow: hidden;
}
.aiq-sc-sev-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .6s cubic-bezier(.4,0,.2,1);
  min-width: 0;
}
.aiq-sc-sev-legend {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--aiq-sc-border);
}

/* ── Severity Badges ──────────────────────────────────────── */
.aiq-sc-badge {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-block;
}
.aiq-sc-badge-critical { background: var(--aiq-sc-error-bg);   color: var(--aiq-sc-error);   border: 1px solid rgba(255,180,171,0.2); }
.aiq-sc-badge-serious  { background: var(--aiq-sc-warning-bg); color: var(--aiq-sc-warning); border: 1px solid rgba(255,209,170,0.2); }
.aiq-sc-badge-moderate { background: var(--aiq-sc-info-bg);    color: var(--aiq-sc-info);    border: 1px solid rgba(173,198,255,0.2); }

/* ── History Bar Chart ────────────────────────────────────── */
.aiq-sc-hist-empty { font-size: 13px; color: var(--aiq-sc-text-subtle); margin: 20px 0 0; }
.aiq-sc-hist-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 200px;
  margin-top: 12px;
  flex: 1;
}
.aiq-sc-hist-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
}
.aiq-sc-hist-score-lbl {
  font-size: 10px;
  font-weight: 700;
  color: var(--aiq-sc-text-subtle);
  line-height: 1;
}
.aiq-sc-hist-bar-track {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: flex-end;
}
.aiq-sc-hist-bar-fill {
  width: 100%;
  background: rgba(87,241,219,0.25);
  border-radius: 3px 3px 0 0;
  min-height: 4px;
  transition: height .6s ease;
}
.aiq-sc-hist-bar-col.latest .aiq-sc-hist-bar-fill { background: #57f1db; }
.aiq-sc-hist-date-lbl {
  font-size: 9px;
  color: var(--aiq-sc-text-subtle);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ── Segment Tabs ─────────────────────────────────────────── */
.aiq-sc-tabs {
  display: flex;
  background: var(--aiq-sc-surface);
  border: 1px solid var(--aiq-sc-border-hi);
  border-radius: 10px;
  padding: 4px;
  gap: 2px;
  margin-bottom: 16px;
  width: fit-content;
}
.aiq-sc-tab {
  background: transparent;
  color: var(--aiq-sc-text-subtle);
  font-size: 13px;
  font-weight: 600;
  font-family: 'Manrope', 'DM Sans', sans-serif;
  border: none;
  border-radius: 7px;
  padding: 7px 16px;
  cursor: pointer;
  transition: background .15s, color .15s;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.aiq-sc-tab:hover { color: var(--aiq-sc-text); }
.aiq-sc-tab.active {
  background: var(--aiq-sc-card);
  color: var(--aiq-sc-text);
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.aiq-sc-tab-count {
  font-size: 10px;
  font-weight: 700;
  background: rgba(255,180,171,0.15);
  color: var(--aiq-sc-error);
  border-radius: 10px;
  padding: 1px 6px;
  min-width: 18px;
  text-align: center;
}
.aiq-sc-tab-panel[hidden] { display: none !important; }
.aiq-sc-tab-panel { margin-bottom: 8px; }

/* ── Overview Tab Panel ───────────────────────────────────── */
.aiq-sc-overview-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.aiq-sc-overview-hint {
  font-size: 13px;
  color: var(--aiq-sc-text-subtle);
  margin: 0;
}

/* ── Violation Cards ──────────────────────────────────────── */
.aiq-sc-violations-panel {
  background: #161d1b !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 14px !important;
  padding: 20px !important;
}
.aiq-sc-violation-list { display: flex; flex-direction: column; gap: 10px; }
.aiq-sc-violation {
  display: flex !important;
  gap: 14px !important;
  align-items: flex-start !important;
  background: #1a211f !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  transition: border-color .15s;
  box-shadow: none !important;
}
.aiq-sc-violation:hover { border-color: rgba(255,255,255,0.12) !important; }
.aiq-sc-violation.error    { border-left: 3px solid rgba(255,180,171,0.5) !important; }
.aiq-sc-violation.warning  { border-left: 3px solid rgba(255,209,170,0.5) !important; }
.aiq-sc-violation.critical { border-left: 3px solid rgba(255,80,80,0.6) !important; }
.aiq-sc-violation.serious  { border-left: 3px solid rgba(255,150,80,0.6) !important; }
.aiq-sc-violation.moderate { border-left: 3px solid rgba(255,209,80,0.6) !important; }
.aiq-sc-violation-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.aiq-sc-violation-icon.error    { background: rgba(147,0,10,0.25) !important; }
.aiq-sc-violation-icon.warning  { background: rgba(75,40,0,0.35) !important; }
.aiq-sc-violation-icon.critical { background: rgba(180,0,0,0.30) !important; }
.aiq-sc-violation-icon.serious  { background: rgba(140,60,0,0.30) !important; }
.aiq-sc-violation-icon.moderate { background: rgba(100,80,0,0.30) !important; }
.aiq-sc-violation-body { flex: 1 !important; min-width: 0 !important; }
.aiq-sc-violation-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.aiq-sc-violation-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #dde4e1 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}
.aiq-sc-violation-desc {
  font-size: 13px !important;
  color: #859490 !important;
  margin: 0 0 10px !important;
  line-height: 1.5 !important;
}
.aiq-sc-code-block {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: 7px !important;
  padding: 10px 12px !important;
  margin-bottom: 8px !important;
}
.aiq-sc-code-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aiq-sc-text-subtle);
  margin-bottom: 5px;
}
.aiq-sc-code {
  display: block !important;
  font-family: 'DM Mono', monospace !important;
  font-size: 12px !important;
  color: #ffb4ab !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  background: none !important;
  padding: 0 !important;
}
.aiq-sc-violation-meta {
  font-size: 12px !important;
  color: #859490 !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* ── History Table ────────────────────────────────────────── */
.aiq-sc-hist-table-wrap { overflow-x: auto; }
.aiq-sc-hist-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--aiq-sc-text);
}
.aiq-sc-hist-table thead tr {
  border-bottom: 1px solid var(--aiq-sc-border-hi);
}
.aiq-sc-hist-table th {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aiq-sc-text-subtle);
  padding: 10px 12px;
  text-align: left;
}
.aiq-sc-hist-table td {
  padding: 12px 12px;
  border-bottom: 1px solid var(--aiq-sc-border);
  vertical-align: middle;
}
.aiq-sc-hist-table tbody tr:last-child td { border-bottom: none; }
.aiq-sc-hist-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.aiq-sc-ht-url {
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  color: var(--aiq-sc-text);
}
.aiq-sc-ht-date { color: var(--aiq-sc-text-subtle); font-size: 12px; }
.aiq-sc-score-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  border: 2px solid currentColor;
}
.aiq-sc-pill-green { color: #57f1db; }
.aiq-sc-pill-amber { color: #ffd1aa; }
.aiq-sc-pill-red   { color: #ffb4ab; }
.aiq-sc-level-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  background: rgba(173,198,255,0.1);
  color: var(--aiq-sc-info);
  border: 1px solid rgba(173,198,255,0.2);
  border-radius: 4px;
  padding: 2px 7px;
  letter-spacing: 0.04em;
}

/* ── Footer ───────────────────────────────────────────────── */
.aiq-sc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--aiq-sc-border);
}
.aiq-sc-footer-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--aiq-sc-primary);
  text-decoration: none;
  transition: opacity .15s;
}
.aiq-sc-footer-link:hover { opacity: .8; }

/* ================================================================
   AccessIQ — Behavior Analytics  (aiq-ba- prefix)
   ================================================================ */

.aiq-ba-wrap {
  --aiq-ba-bg:       #0e1513;
  --aiq-ba-surface:  #161d1b;
  --aiq-ba-card:     #1a211f;
  --aiq-ba-card-hi:  #242b2a;
  --aiq-ba-border:   rgba(255,255,255,0.05);
  --aiq-ba-primary:  #57f1db;
  --aiq-ba-text:     #dde4e1;
  --aiq-ba-muted:    #bacac5;
  --aiq-ba-subtle:   #859490;
  --aiq-ba-red:      #ffb4ab;
  --aiq-ba-amber:    #ffd1aa;
  --aiq-ba-green:    #57f1db;
  --aiq-ba-blue:     #adc6ff;
  --aiq-ba-purple:   #d0bcff;
  font-family: 'Manrope', 'DM Sans', -apple-system, sans-serif;
}

/* ── Page Header ─────────────────────────────────────────────────── */
.aiq-ba-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 20px;
}
.aiq-ba-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.aiq-ba-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--aiq-ba-text);
  letter-spacing: -0.3px;
  line-height: 1.2;
}
.aiq-ba-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(87,241,219,0.1);
  border: 1px solid rgba(87,241,219,0.25);
  color: var(--aiq-ba-primary);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 9px;
  border-radius: 20px;
}
.aiq-ba-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--aiq-ba-primary);
  animation: aiq-ba-pulse 1.8s ease-in-out infinite;
}
@keyframes aiq-ba-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.7); }
}
.aiq-ba-subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--aiq-ba-muted);
}
.aiq-ba-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.aiq-ba-updated-pill {
  font-size: 11px;
  color: var(--aiq-ba-subtle);
  background: var(--aiq-ba-card);
  border: 1px solid var(--aiq-ba-border);
  border-radius: 20px;
  padding: 4px 12px;
}
.aiq-ba-export-form { margin: 0; }
.aiq-ba-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--aiq-ba-card);
  border: 1px solid rgba(87,241,219,0.3);
  color: var(--aiq-ba-primary);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.aiq-ba-btn-secondary:hover {
  background: rgba(87,241,219,0.08);
  border-color: var(--aiq-ba-primary);
}

/* ── Privacy Banner ──────────────────────────────────────────────── */
.aiq-ba-privacy-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: rgba(87,241,219,0.04);
  border: 1px solid rgba(87,241,219,0.15);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 20px;
}
.aiq-ba-privacy-banner[hidden] { display: none !important; }
.aiq-ba-privacy-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.aiq-ba-privacy-icon { flex-shrink: 0; }
.aiq-ba-privacy-title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--aiq-ba-text);
  margin-bottom: 2px;
}
.aiq-ba-privacy-sub {
  font-size: 12px;
  color: var(--aiq-ba-subtle);
}
.aiq-ba-privacy-dismiss {
  background: none;
  border: none;
  color: var(--aiq-ba-subtle);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  line-height: 1;
  transition: color .15s;
}
.aiq-ba-privacy-dismiss:hover { color: var(--aiq-ba-text); }

/* ── Date Filter Pills ───────────────────────────────────────────── */
.aiq-ba-filter-row {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.aiq-ba-filter-pills {
  display: flex;
  gap: 6px;
}
.aiq-ba-filter-pill {
  display: inline-flex;
  align-items: center;
  background: var(--aiq-ba-card);
  border: 1px solid var(--aiq-ba-border);
  color: var(--aiq-ba-muted);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.aiq-ba-filter-pill:hover {
  background: var(--aiq-ba-card-hi);
  color: var(--aiq-ba-text);
}
.aiq-ba-filter-pill.active {
  background: rgba(87,241,219,0.1);
  border-color: rgba(87,241,219,0.4);
  color: var(--aiq-ba-primary);
}

/* ── KPI Stats Grid ──────────────────────────────────────────────── */
.aiq-ba-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
@media (max-width: 960px) { .aiq-ba-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .aiq-ba-kpi-grid { grid-template-columns: 1fr; } }

.aiq-ba-kpi-card {
  background: var(--aiq-ba-card);
  border: 1px solid var(--aiq-ba-border);
  border-radius: 14px;
  padding: 18px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  overflow: hidden;
  transition: border-color .2s;
}
.aiq-ba-kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(87,241,219,0.3), transparent);
}
.aiq-ba-kpi-card:hover { border-color: rgba(87,241,219,0.2); }

.aiq-ba-kpi-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.aiq-ba-kpi-icon--blue   { background: rgba(173,198,255,0.1); color: #adc6ff; }
.aiq-ba-kpi-icon--teal   { background: rgba(87,241,219,0.1);  color: #57f1db; }
.aiq-ba-kpi-icon--red    { background: rgba(255,180,171,0.1); color: #ffb4ab; }
.aiq-ba-kpi-icon--purple { background: rgba(208,188,255,0.1); color: #d0bcff; }

.aiq-ba-kpi-body { display: flex; flex-direction: column; gap: 2px; }
.aiq-ba-kpi-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--aiq-ba-subtle);
  text-transform: uppercase;
}
.aiq-ba-kpi-val {
  font-size: 26px;
  font-weight: 700;
  color: var(--aiq-ba-text);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.aiq-ba-kpi-sub {
  font-size: 11px;
  color: var(--aiq-ba-subtle);
  margin-top: 1px;
}

/* Value color variants */
.aiq-ba-val--green  { color: #57f1db; }
.aiq-ba-val--amber  { color: #ffd1aa; }
.aiq-ba-val--red    { color: #ffb4ab; }
.aiq-ba-val--purple { color: #d0bcff; }

/* ── Sparklines ──────────────────────────────────────────────────── */
.aiq-ba-sparkline {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 32px;
  margin-top: 10px;
  padding-top: 4px;
  border-top: 1px solid var(--aiq-ba-border);
}
.aiq-ba-spark-bar {
  flex: 1;
  border-radius: 2px 2px 0 0;
  background: rgba(173,198,255,0.25);
  min-height: 3px;
  transition: opacity .2s;
}
.aiq-ba-spark-bar--teal   { background: rgba(87,241,219,0.3); }
.aiq-ba-spark-bar--red    { background: rgba(255,180,171,0.3); }
.aiq-ba-spark-bar--purple { background: rgba(208,188,255,0.3); }
.aiq-ba-kpi-card:hover .aiq-ba-spark-bar { opacity: 1; }

/* ── Chart Grid ──────────────────────────────────────────────────── */
.aiq-ba-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 860px) { .aiq-ba-grid { grid-template-columns: 1fr; } }

.aiq-ba-col-8 { grid-column: span 8; }
.aiq-ba-col-4 { grid-column: span 4; }
@media (max-width: 860px) {
  .aiq-ba-col-8, .aiq-ba-col-4 { grid-column: span 1; }
}

.aiq-ba-chart-card {
  background: var(--aiq-ba-card);
  border: 1px solid var(--aiq-ba-border);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.aiq-ba-chart-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.aiq-ba-chart-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--aiq-ba-text);
}
.aiq-ba-chart-sub {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--aiq-ba-subtle);
}
.aiq-ba-chart-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--aiq-ba-muted);
  flex-shrink: 0;
}
.aiq-ba-legend-line {
  display: inline-block;
  width: 20px;
  height: 2px;
  background: var(--aiq-ba-primary);
  border-radius: 2px;
}
.aiq-ba-chart-canvas-wrap {
  position: relative;
  height: 220px;
}
.aiq-ba-device-wrap {
  position: relative;
  height: 180px;
}
.aiq-ba-device-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.aiq-ba-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--aiq-ba-muted);
}
.aiq-ba-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.aiq-ba-legend-dot--desktop { background: #818cf8; }
.aiq-ba-legend-dot--mobile  { background: #f87171; }
.aiq-ba-legend-dot--tablet  { background: #57f1db; }

/* ── Top Pages Table ─────────────────────────────────────────────── */
.aiq-ba-table-card {
  background: var(--aiq-ba-card);
  border: 1px solid var(--aiq-ba-border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 20px;
}
.aiq-ba-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--aiq-ba-border);
  gap: 12px;
}
.aiq-ba-table-sub {
  font-size: 12px;
  color: var(--aiq-ba-subtle);
}
.aiq-ba-table-wrap { overflow-x: auto; }
.aiq-ba-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.aiq-ba-table th {
  padding: 10px 16px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--aiq-ba-subtle);
  text-transform: uppercase;
  text-align: left;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--aiq-ba-border);
  white-space: nowrap;
}
.aiq-ba-table td {
  padding: 12px 16px;
  color: var(--aiq-ba-muted);
  border-bottom: 1px solid var(--aiq-ba-border);
  vertical-align: middle;
}
.aiq-ba-table-row:last-child td { border-bottom: none; }
.aiq-ba-table-row:hover td { background: rgba(255,255,255,0.02); }

.aiq-ba-td-url {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'DM Mono', monospace;
  font-size: 12px !important;
  color: var(--aiq-ba-text) !important;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aiq-ba-td-num  { font-weight: 700; color: var(--aiq-ba-text) !important; }
.aiq-ba-td-time { color: var(--aiq-ba-muted); }
.aiq-ba-td-device { white-space: nowrap; }

.aiq-ba-bounce-row { display: flex; align-items: center; gap: 8px; }
.aiq-ba-bounce-pct  { font-weight: 700; font-size: 12px; white-space: nowrap; }
.aiq-ba-bounce-bar  { flex: 1; height: 3px; background: rgba(255,255,255,0.08); border-radius: 2px; min-width: 40px; max-width: 60px; overflow: hidden; }
.aiq-ba-bounce-bar-fill { height: 100%; border-radius: 2px; transition: width .4s; }

.aiq-ba-br--green .aiq-ba-bounce-bar-fill,
.aiq-ba-bounce-pct.aiq-ba-br--green { color: #57f1db; background: #57f1db; }
.aiq-ba-bounce-pct.aiq-ba-br--green  { background: transparent; }
.aiq-ba-bounce-bar-fill.aiq-ba-br--green { background: #57f1db; }

.aiq-ba-bounce-pct.aiq-ba-br--amber  { color: #ffd1aa; }
.aiq-ba-bounce-bar-fill.aiq-ba-br--amber { background: #ffd1aa; }

.aiq-ba-bounce-pct.aiq-ba-br--red    { color: #ffb4ab; }
.aiq-ba-bounce-bar-fill.aiq-ba-br--red   { background: #ffb4ab; }

.aiq-ba-table-empty {
  text-align: center;
  padding: 48px 20px !important;
  color: var(--aiq-ba-subtle);
}
.aiq-ba-table-empty svg { margin-bottom: 12px; }
.aiq-ba-table-empty p { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--aiq-ba-muted); }
.aiq-ba-table-empty span { font-size: 12px; }

/* ── Insights Row ────────────────────────────────────────────────── */
.aiq-ba-insights-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
@media (max-width: 780px) { .aiq-ba-insights-row { grid-template-columns: 1fr; } }

.aiq-ba-insight-card {
  background: var(--aiq-ba-card);
  border: 1px solid var(--aiq-ba-border);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.aiq-ba-trend-card {
  border-color: rgba(87,241,219,0.2);
  box-shadow: 0 0 24px rgba(87,241,219,0.06);
}
.aiq-ba-insight-icon { flex-shrink: 0; margin-bottom: 2px; }
.aiq-ba-insight-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--aiq-ba-subtle);
}
.aiq-ba-insight-body {
  font-size: 14px;
  font-weight: 600;
  color: var(--aiq-ba-text);
  line-height: 1.4;
}

/* Storage bar */
.aiq-ba-storage-bar-wrap { display: flex; align-items: center; gap: 8px; }
.aiq-ba-storage-bar {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.07);
  border-radius: 4px;
  overflow: hidden;
}
.aiq-ba-storage-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--aiq-ba-primary), rgba(87,241,219,0.5));
  border-radius: 4px;
  transition: width .6s;
}
.aiq-ba-storage-pct { font-size: 11px; font-weight: 700; color: var(--aiq-ba-primary); }
.aiq-ba-storage-info { margin: 0; font-size: 12px; color: var(--aiq-ba-muted); }
.aiq-ba-storage-info--sub { color: var(--aiq-ba-subtle); font-size: 11px; }

/* Quick actions */
.aiq-ba-quick-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.aiq-ba-action-link {
  font-size: 13px;
  font-weight: 600;
  color: var(--aiq-ba-primary);
  text-decoration: none;
  padding: 7px 10px;
  border: 1px solid rgba(87,241,219,0.15);
  border-radius: 8px;
  background: rgba(87,241,219,0.04);
  transition: background .15s, border-color .15s;
}
.aiq-ba-action-link:hover {
  background: rgba(87,241,219,0.1);
  border-color: rgba(87,241,219,0.3);
}

/* ── wpcontent bg override ───────────────────────────────────────── */
.accessiq_page_accessiq-analytics #wpcontent { background: #0e1513 !important; }
.accessiq_page_accessiq-heatmap    #wpcontent { background: #0e1513 !important; }

/* ================================================================
   AccessIQ — Heatmap Engine  |  aiq-hm-  prefix
   ================================================================ */

/* ── Scoped Tokens ───────────────────────────────────────────────── */
.aiq-hm-wrap {
  --aiq-hm-bg:        #0e1513;
  --aiq-hm-card:      #121f1b;
  --aiq-hm-card-hi:   #172620;
  --aiq-hm-border:    rgba(255,255,255,0.07);
  --aiq-hm-border-hi: rgba(87,241,219,0.25);
  --aiq-hm-primary:   #57f1db;
  --aiq-hm-primary-d: rgba(87,241,219,0.1);
  --aiq-hm-text:      #e2e8f0;
  --aiq-hm-muted:     #64748b;
  --aiq-hm-subtle:    #94a3b8;

  font-family: 'DM Sans', sans-serif;
  color: var(--aiq-hm-text);
  background: var(--aiq-hm-bg);
  padding: 0 24px 40px;
  margin-top: 0 !important;
  margin-left: 0 !important;
}
.aiq-hm-wrap * { box-sizing: border-box; }

/* ── Page Header ─────────────────────────────────────────────────── */
.aiq-hm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0 16px;
  border-bottom: 1px solid var(--aiq-hm-border);
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 12px;
}
.aiq-hm-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--aiq-hm-text);
  margin: 0 0 2px;
  line-height: 1.2;
}
.aiq-hm-subtitle {
  font-size: 13px;
  color: var(--aiq-hm-muted);
  margin: 0;
}
.aiq-hm-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.aiq-hm-live-badge-header {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--aiq-hm-primary);
  background: rgba(87,241,219,0.08);
  border: 1px solid rgba(87,241,219,0.2);
  padding: 4px 10px;
  border-radius: 20px;
}
.aiq-hm-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--aiq-hm-primary);
  animation: aiq-hm-pulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes aiq-hm-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.7); }
}
.aiq-hm-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--aiq-hm-primary);
  background: rgba(87,241,219,0.06);
  border: 1px solid rgba(87,241,219,0.2);
  border-radius: 8px;
  text-decoration: none;
  transition: background .15s, border-color .15s;
  cursor: pointer;
}
.aiq-hm-btn-secondary:hover {
  background: rgba(87,241,219,0.12);
  border-color: rgba(87,241,219,0.4);
  color: var(--aiq-hm-primary);
}

/* ── Filter / Context Bar ────────────────────────────────────────── */
.aiq-hm-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--aiq-hm-card);
  border: 1px solid var(--aiq-hm-border);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.aiq-hm-filter-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Device Pills */
.aiq-hm-device-pills {
  display: flex;
  gap: 4px;
}
.aiq-hm-device-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--aiq-hm-border);
  color: var(--aiq-hm-muted);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  font-family: 'DM Sans', sans-serif;
}
.aiq-hm-device-pill:hover {
  background: var(--aiq-hm-card-hi);
  color: var(--aiq-hm-text);
  border-color: rgba(255,255,255,0.12);
}
.aiq-hm-device-pill.active {
  background: rgba(87,241,219,0.1);
  border-color: rgba(87,241,219,0.35);
  color: var(--aiq-hm-primary);
}
.aiq-hm-hidden-select { display: none !important; }

/* Date pills */
.aiq-hm-date-pills {
  display: flex;
  gap: 4px;
}
.aiq-hm-date-pill {
  background: transparent;
  border: 1px solid var(--aiq-hm-border);
  color: var(--aiq-hm-muted);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  font-family: 'DM Sans', sans-serif;
}
.aiq-hm-date-pill:hover {
  background: var(--aiq-hm-card-hi);
  color: var(--aiq-hm-text);
}
.aiq-hm-date-pill.active {
  background: rgba(87,241,219,0.1);
  border-color: rgba(87,241,219,0.35);
  color: var(--aiq-hm-primary);
}

/* Page select */
.aiq-hm-page-select {
  background: var(--aiq-hm-card-hi);
  border: 1px solid var(--aiq-hm-border);
  color: var(--aiq-hm-text);
  font-size: 13px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  min-width: 220px;
  max-width: 340px;
  transition: border-color .15s;
}
.aiq-hm-page-select:focus { outline: none; border-color: var(--aiq-hm-border-hi); }

/* Generate button */
.aiq-hm-generate-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--aiq-hm-primary);
  color: #0e1513;
  border: none;
  border-radius: 8px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
  white-space: nowrap;
}
.aiq-hm-generate-btn:hover:not(:disabled) { opacity: 0.88; transform: translateY(-1px); }
.aiq-hm-generate-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: none;
}

/* Filter right stats */
.aiq-hm-filter-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.aiq-hm-filter-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.aiq-hm-filter-stat-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--aiq-hm-muted);
  text-transform: uppercase;
}
.aiq-hm-filter-stat-val {
  font-size: 15px;
  font-weight: 800;
  color: var(--aiq-hm-text);
}
.aiq-hm-clicks-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  background: rgba(87,241,219,0.08);
  border: 1px solid rgba(87,241,219,0.18);
  border-radius: 10px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--aiq-hm-primary);
}
.aiq-hm-clicks-badge span {
  font-size: 17px;
  font-weight: 800;
}

/* ── Split Layout ────────────────────────────────────────────────── */
.aiq-hm-split {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.aiq-hm-browser {
  flex: 0 0 70%;
  min-width: 0;
}
.aiq-hm-panel {
  flex: 0 0 calc(30% - 18px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (max-width: 900px) {
  .aiq-hm-split { flex-direction: column; }
  .aiq-hm-browser, .aiq-hm-panel { flex: none; width: 100%; }
}

/* ── Empty State ─────────────────────────────────────────────────── */
.aiq-hm-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--aiq-hm-card);
  border: 1px solid var(--aiq-hm-border);
  border-radius: 16px;
  min-height: 400px;
  text-align: center;
  padding: 40px 24px;
}
.aiq-hm-empty-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--aiq-hm-text);
  margin: 0;
}
.aiq-hm-empty-desc {
  font-size: 13px;
  color: var(--aiq-hm-muted);
  margin: 0;
  max-width: 320px;
}

/* ── Loader skeleton ─────────────────────────────────────────────── */
.aiq-hm-loader-skel {
  background: var(--aiq-hm-card);
  border: 1px solid var(--aiq-hm-border);
  border-radius: 16px;
  min-height: 400px;
}

/* ── Browser Visualizer ──────────────────────────────────────────── */
.aiq-hm-visualizer {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--aiq-hm-border);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}
.aiq-hm-chrome-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #1a2421;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 10px 14px;
  flex-shrink: 0;
}
.aiq-hm-dots {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}
.aiq-hm-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.aiq-hm-dot--red    { background: #ff5f57; }
.aiq-hm-dot--yellow { background: #febc2e; }
.aiq-hm-dot--green  { background: #28c840; }
.aiq-hm-urlbar {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  color: var(--aiq-hm-subtle);
  font-family: 'DM Mono', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.aiq-hm-live-badge {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--aiq-hm-primary);
  background: rgba(87,241,219,0.08);
  border: 1px solid rgba(87,241,219,0.2);
  padding: 3px 8px;
  border-radius: 12px;
  flex-shrink: 0;
}
.aiq-hm-iframe-wrap { position: relative; width: 100%; }

/* ── Stats Panel ─────────────────────────────────────────────────── */
.aiq-hm-mini-stats {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.aiq-hm-mini-stat {
  background: var(--aiq-hm-card);
  border: 1px solid var(--aiq-hm-border);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color .2s;
  position: relative;
  overflow: hidden;
}
.aiq-hm-mini-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(87,241,219,0.25), transparent);
}
.aiq-hm-mini-stat.skeleton { animation: aiq-hm-shimmer 1.4s ease-in-out infinite; }
@keyframes aiq-hm-shimmer {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}
.aiq-hm-mini-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.09em;
  color: var(--aiq-hm-muted);
  text-transform: uppercase;
}
.aiq-hm-mini-val {
  font-size: 26px;
  font-weight: 800;
  color: var(--aiq-hm-text);
  line-height: 1.1;
}

/* ── Top Elements Section ────────────────────────────────────────── */
.aiq-hm-elements-section {
  background: var(--aiq-hm-card);
  border: 1px solid var(--aiq-hm-border);
  border-radius: 12px;
  overflow: hidden;
}
.aiq-hm-elements-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--aiq-hm-muted);
  padding: 12px 14px;
  border-bottom: 1px solid var(--aiq-hm-border);
}
.aiq-hm-elements-list { padding: 4px 0; }
.aiq-hm-elements-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.aiq-hm-elements-table td {
  padding: 7px 10px;
  vertical-align: middle;
  color: var(--aiq-hm-text);
}
.aiq-hm-element-row:hover td { background: rgba(255,255,255,0.025); }
.aiq-hm-element-empty td {
  text-align: center;
  color: var(--aiq-hm-muted);
  padding: 24px 16px;
  font-size: 12px;
}

/* Rank badge */
.aiq-hm-rank {
  font-size: 11px;
  font-weight: 800;
  width: 24px;
  display: inline-block;
  flex-shrink: 0;
}
.aiq-hm-rank--1 { color: #fbbf24; }
.aiq-hm-rank--2 { color: #94a3b8; }
.aiq-hm-rank--3 { color: #b45309; }
.aiq-hm-rank--n { color: #475569; }

/* Element selector pill */
.aiq-hm-selector-pill {
  background: rgba(255,255,255,0.06);
  color: #94a3b8;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.08);
  word-break: break-all;
  display: inline-block;
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Click count + bar */
.aiq-hm-count-val {
  font-weight: 800;
  font-size: 14px;
  color: #cbd5e1;
}
.aiq-hm-count-bar-track {
  width: 100%;
  max-width: 80px;
  height: 3px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  margin-top: 4px;
}
.aiq-hm-count-bar-fill {
  height: 100%;
  background: var(--aiq-hm-primary);
  border-radius: 2px;
}

/* Pct chip */
.aiq-hm-pct-chip {
  display: inline-block;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 11px;
}
.aiq-hm-pct-high { background: rgba(248,113,113,0.12); color: #f87171; }
.aiq-hm-pct-mid  { background: rgba(251,191,36,0.12);  color: #fbbf24; }
.aiq-hm-pct-low  { background: rgba(87,241,219,0.1);   color: #57f1db; }

/* ================================================================
   AccessIQ — Settings Page  |  aiq-st-  prefix
   ================================================================ */

/* ── wpcontent bg override ───────────────────────────────────────── */
.accessiq_page_accessiq-settings #wpcontent { background: #0e1513 !important; }

/* ── Scoped Tokens ───────────────────────────────────────────────── */
.aiq-st-wrap {
  --aiq-st-bg:        #0e1513;
  --aiq-st-surface:   #161d1b;
  --aiq-st-card:      #1a211f;
  --aiq-st-card-hi:   #242b2a;
  --aiq-st-border:    rgba(255,255,255,0.05);
  --aiq-st-border-hi: rgba(87,241,219,0.25);
  --aiq-st-primary:   #57f1db;
  --aiq-st-text:      #dde4e1;
  --aiq-st-muted:     #bacac5;
  --aiq-st-subtle:    #859490;

  font-family: 'DM Sans', sans-serif;
  color: var(--aiq-st-text);
  background: var(--aiq-st-bg);
  padding: 0 0 0;
  margin-top: 0 !important;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 32px);
}
.aiq-st-wrap * { box-sizing: border-box; }
.aiq-st-wrap h1, .aiq-st-wrap h2, .aiq-st-wrap h3,
.aiq-st-wrap h4, .aiq-st-wrap p { margin: 0; }

/* ── Layout ──────────────────────────────────────────────────────── */
.aiq-st-inner {
  display: flex;
  flex: 1;
}

/* ── Sidebar ─────────────────────────────────────────────────────── */
.aiq-st-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: var(--aiq-st-surface);
  border-right: 1px solid var(--aiq-st-border);
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 32px);
}
.aiq-st-nav-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--aiq-st-subtle);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0 20px;
  margin-bottom: 14px;
}
.aiq-st-nav-group { margin-bottom: 2px; }

/* Nav item */
.aiq-st-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 20px;
  cursor: pointer;
  color: var(--aiq-st-subtle);
  font-size: 13px;
  font-weight: 500;
  transition: background .15s, color .15s;
  user-select: none;
}
.aiq-st-nav-item:hover { background: rgba(255,255,255,0.03); color: var(--aiq-st-text); }
.aiq-st-nav-item.active { background: rgba(87,241,219,0.06); color: var(--aiq-st-primary); }
.aiq-st-nav-item-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}
.aiq-st-nav-icon { flex-shrink: 0; }
.aiq-st-chevron { flex-shrink: 0; transition: transform .2s; }
.aiq-st-chevron--down { transform: rotate(0deg); }
.aiq-st-nav-item--parent.aiq-st-expanded .aiq-st-chevron--down { transform: rotate(180deg); }

/* Sub-items */
.aiq-st-sub-items { overflow: hidden; }
.aiq-st-sub-item {
  padding: 8px 20px 8px 48px;
  font-size: 12px;
  font-weight: 500;
  color: var(--aiq-st-subtle);
  cursor: pointer;
  transition: color .15s, border-left-color .15s;
  border-left: 2px solid transparent;
  margin-left: 18px;
  user-select: none;
}
.aiq-st-sub-item:hover { color: var(--aiq-st-text); }
.aiq-st-sub-item.active { color: var(--aiq-st-primary); border-left-color: var(--aiq-st-primary); }

/* Score mini card */
.aiq-st-score-mini {
  margin: auto 16px 0;
  padding: 14px;
  background: linear-gradient(135deg, rgba(87,241,219,0.07), transparent);
  border: 1px solid rgba(87,241,219,0.14);
  border-radius: 12px;
}
.aiq-st-score-mini-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--aiq-st-subtle);
  margin-bottom: 8px;
}
.aiq-st-score-mini-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 10px;
}
.aiq-st-score-mini-val {
  font-size: 30px;
  font-weight: 800;
  color: var(--aiq-st-primary);
  line-height: 1;
}
.aiq-st-score-mini-denom {
  font-size: 14px;
  font-weight: 600;
  color: var(--aiq-st-subtle);
}
.aiq-st-score-mini-track {
  height: 4px;
  background: rgba(255,255,255,0.07);
  border-radius: 2px;
  overflow: hidden;
}
.aiq-st-score-mini-fill {
  height: 100%;
  background: var(--aiq-st-primary);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(87,241,219,0.5);
  transition: width .6s ease;
}

/* ── Content area ────────────────────────────────────────────────── */
.aiq-st-content {
  flex: 1;
  min-width: 0;
  padding: 32px 32px 100px;
  max-width: 800px;
  align-content: flex-start;
}
.aiq-st-panel {
  height: auto !important;
  min-height: unset !important;
}
.aiq-st-content-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--aiq-st-border);
}
.aiq-st-content-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--aiq-st-text);
  margin-bottom: 4px !important;
}
.aiq-st-content-subtitle {
  font-size: 13px;
  color: var(--aiq-st-subtle);
}

/* ── Cards ───────────────────────────────────────────────────────── */
.aiq-st-card {
  background: var(--aiq-st-card);
  border: 1px solid var(--aiq-st-border);
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 16px;
  transition: border-color .2s;
}
.aiq-st-card:hover { border-color: rgba(255,255,255,0.08); }
.aiq-st-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 700;
  color: var(--aiq-st-subtle);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  margin-bottom: 18px;
}

/* ── Field groups ────────────────────────────────────────────────── */
.aiq-st-field-group { margin-bottom: 20px; }
.aiq-st-field-group:last-child { margin-bottom: 0; }
.aiq-st-field-group--sep {
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.aiq-st-field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.aiq-st-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--aiq-st-text);
  display: block;
  margin-bottom: 8px;
}
.aiq-st-field-label-row .aiq-st-label { margin-bottom: 0; }
.aiq-st-field-note {
  font-size: 11px;
  color: var(--aiq-st-subtle);
  margin-top: 6px !important;
}
.aiq-st-field-note--italic { font-style: italic; }

/* ── Color display ───────────────────────────────────────────────── */
.aiq-st-color-hex {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--aiq-st-primary);
  background: rgba(87,241,219,0.07);
  border: 1px solid rgba(87,241,219,0.15);
  padding: 3px 8px;
  border-radius: 5px;
}

/* ── Colour swatches ─────────────────────────────────────────────── */
.aiq-st-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.aiq-st-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s, border-color .15s, box-shadow .15s;
  flex-shrink: 0;
  padding: 0;
}
.aiq-st-swatch:hover { transform: scale(1.1); }
.aiq-st-swatch.selected {
  border-color: rgba(255,255,255,0.6);
  transform: scale(1.15);
  box-shadow: 0 0 0 2px rgba(87,241,219,0.45);
}

/* ── Visibility toggle grid (2-col) ──────────────────────────────── */
.aiq-st-toggle-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 16px 0;
}
@media (max-width: 600px) { .aiq-st-toggle-grid { grid-template-columns: 1fr; } }
.aiq-st-toggle-card {
  background: var(--aiq-st-card-hi);
  border: 1px solid var(--aiq-st-border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  transition: border-color .15s;
}
.aiq-st-toggle-card:hover { border-color: rgba(255,255,255,0.1); }

/* ── Toggle rows ─────────────────────────────────────────────────── */
.aiq-st-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
.aiq-st-toggle-row:last-child { border-bottom: none; }
.aiq-st-toggle-info h4 { font-size: 13px; color: var(--aiq-st-text); font-weight: 600; }
.aiq-st-toggle-info p  { font-size: 11px; color: var(--aiq-st-subtle); margin-top: 2px !important; }

/* ── Toggle switch ───────────────────────────────────────────────── */
.aiq-st-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}
.aiq-st-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.aiq-st-slider {
  position: absolute;
  inset: 0;
  background: var(--aiq-st-card-hi);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.aiq-st-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 2px;
  top: 2px;
  background: var(--aiq-st-subtle);
  border-radius: 50%;
  transition: transform .2s, background .2s;
}
.aiq-st-toggle input:checked + .aiq-st-slider {
  background: rgba(87,241,219,0.2);
  border-color: rgba(87,241,219,0.3);
}
.aiq-st-toggle input:checked + .aiq-st-slider::before {
  background: var(--aiq-st-primary);
  transform: translateX(20px);
}
.aiq-st-toggle input:focus-visible + .aiq-st-slider {
  outline: 2px solid var(--aiq-st-primary);
  outline-offset: 2px;
}

/* ── Position grid ───────────────────────────────────────────────── */
.aiq-st-pos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.aiq-st-pos-card {
  padding: 14px 12px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--aiq-st-subtle);
  transition: border-color .15s, background .15s, color .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.aiq-st-pos-card:hover {
  border-color: rgba(87,241,219,0.2);
  color: var(--aiq-st-text);
}
.aiq-st-pos-card.active {
  border-color: var(--aiq-st-primary);
  background: rgba(87,241,219,0.05);
  color: var(--aiq-st-primary);
}
.aiq-st-hidden-radio { display: none !important; }
.aiq-st-hidden-select { display: none !important; }

/* ── WCAG level pills ────────────────────────────────────────────── */
.aiq-st-level-pills {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.aiq-st-level-pill {
  padding: 8px 22px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--aiq-st-subtle);
  background: transparent;
  font-family: 'DM Sans', sans-serif;
  transition: background .15s, border-color .15s, color .15s;
}
.aiq-st-level-pill:hover {
  background: var(--aiq-st-card-hi);
  color: var(--aiq-st-text);
}
.aiq-st-level-pill.active {
  background: rgba(87,241,219,0.1);
  border-color: var(--aiq-st-primary);
  color: var(--aiq-st-primary);
}

/* ── Input ───────────────────────────────────────────────────────── */
.aiq-st-input {
  background: var(--aiq-st-card-hi);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: var(--aiq-st-text);
  font-size: 13px;
  font-family: 'DM Sans', sans-serif;
  padding: 8px 12px;
  width: 100%;
  max-width: 360px;
  transition: border-color .15s;
}
.aiq-st-input:focus { outline: none; border-color: rgba(87,241,219,0.35); }
.aiq-st-input::placeholder { color: var(--aiq-st-subtle); }

/* ── Value badge ─────────────────────────────────────────────────── */
.aiq-st-value-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--aiq-st-primary);
  background: rgba(87,241,219,0.08);
  border: 1px solid rgba(87,241,219,0.15);
  padding: 3px 10px;
  border-radius: 20px;
}

/* ── Range slider ────────────────────────────────────────────────── */
.aiq-st-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.07);
  outline: none;
  cursor: pointer;
  margin-bottom: 8px;
}
.aiq-st-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--aiq-st-primary);
  cursor: pointer;
  box-shadow: 0 0 6px rgba(87,241,219,0.5);
  border: 2px solid #161d1b;
  transition: transform .15s;
}
.aiq-st-range::-webkit-slider-thumb:hover { transform: scale(1.15); }
.aiq-st-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--aiq-st-primary);
  cursor: pointer;
  border: 2px solid #161d1b;
  box-shadow: 0 0 6px rgba(87,241,219,0.4);
}
.aiq-st-range-ticks {
  display: flex;
  justify-content: space-between;
  padding: 0 2px;
  margin-bottom: 8px;
}
.aiq-st-range-ticks span {
  font-size: 10px;
  color: var(--aiq-st-subtle);
  font-weight: 600;
}

/* ── Warning box ─────────────────────────────────────────────────── */
.aiq-st-warn-box {
  background: rgba(251,191,36,0.06);
  border: 1px solid rgba(251,191,36,0.2);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 12px;
  color: #fbbf24;
  margin-top: 8px;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.aiq-st-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--aiq-st-primary);
  color: #0e1513;
  border: none;
  border-radius: 9px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
  white-space: nowrap;
  text-decoration: none;
}
.aiq-st-btn-primary:hover { opacity: 0.88; transform: translateY(-1px); color: #0e1513; }
.aiq-st-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.aiq-st-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--aiq-st-muted);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 9px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  text-decoration: none;
}
.aiq-st-btn-secondary:hover {
  background: rgba(255,255,255,0.04);
  color: var(--aiq-st-text);
  border-color: rgba(255,255,255,0.15);
}

.aiq-st-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(87,241,219,0.04);
  color: var(--aiq-st-primary);
  border: 1px solid rgba(87,241,219,0.18);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.aiq-st-btn-outline:hover { background: rgba(87,241,219,0.1); border-color: rgba(87,241,219,0.35); color: var(--aiq-st-primary); }

.aiq-st-btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(248,113,113,0.08);
  color: #f87171;
  border: 1px solid rgba(248,113,113,0.2);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}
.aiq-st-btn-danger:hover { background: rgba(248,113,113,0.14); border-color: rgba(248,113,113,0.35); }

.aiq-st-btn-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
}

/* ── Notice ──────────────────────────────────────────────────────── */
.aiq-st-notice {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 16px;
}
.aiq-st-notice--success {
  background: rgba(87,241,219,0.08);
  border: 1px solid rgba(87,241,219,0.2);
  color: var(--aiq-st-primary);
}

/* ── Pro card ────────────────────────────────────────────────────── */
.aiq-st-card--pro {
  background: linear-gradient(135deg, rgba(87,241,219,0.08), rgba(87,241,219,0.02));
  border: 1px solid rgba(87,241,219,0.2);
  text-align: center;
  padding: 40px 32px;
}
.aiq-st-pro-icon { margin-bottom: 16px; display: block; margin-left: auto; margin-right: auto; }
.aiq-st-pro-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--aiq-st-text);
  margin-bottom: 8px !important;
}
.aiq-st-pro-subtitle {
  font-size: 13px;
  color: var(--aiq-st-subtle);
  margin-bottom: 24px !important;
}
.aiq-st-pro-features {
  list-style: none;
  padding: 0;
  margin: 0 auto 28px;
  max-width: 360px;
  text-align: left;
}
.aiq-st-pro-features li {
  font-size: 13px;
  color: var(--aiq-st-muted);
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.aiq-st-pro-features li:last-child { border-bottom: none; }
.aiq-st-btn-pro {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--aiq-st-primary);
  color: #0e1513;
  font-weight: 800;
  font-size: 14px;
  font-family: 'DM Sans', sans-serif;
  padding: 12px 28px;
  border-radius: 10px;
  text-decoration: none;
  transition: opacity .15s, box-shadow .2s;
  box-shadow: 0 0 24px rgba(87,241,219,0.18);
}
.aiq-st-btn-pro:hover { opacity: 0.88; box-shadow: 0 0 32px rgba(87,241,219,0.3); color: #0e1513; }

/* ── Plan card ───────────────────────────────────────────────────── */
.aiq-st-plan-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  gap: 12px;
}
.aiq-st-plan-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--aiq-st-text);
}
.aiq-st-plan-features {
  font-size: 12px;
  color: var(--aiq-st-subtle);
  margin-top: 3px;
}
.aiq-st-plan-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: 100px;
  background: rgba(87,241,219,0.08);
  border: 1px solid rgba(87,241,219,0.2);
  color: var(--aiq-st-primary);
}

/* ── Sticky Save Bar ─────────────────────────────────────────────── */
.aiq-st-save-bar {
  position: sticky;
  bottom: 0;
  background: rgba(14,21,19,0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,0.06);
  padding: 14px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  z-index: 100;
}
.aiq-st-save-bar-right { display: flex; align-items: center; gap: 8px; }
.aiq-st-reset-link {
  font-size: 12px;
  color: var(--aiq-st-subtle);
  text-decoration: none;
  transition: color .15s;
}
.aiq-st-reset-link:hover { color: var(--aiq-st-text); }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .aiq-st-inner { flex-direction: column; }
  .aiq-st-sidebar { width: 100%; min-height: unset; flex-direction: row; flex-wrap: wrap; padding: 16px; border-right: none; border-bottom: 1px solid var(--aiq-st-border); }
  .aiq-st-nav-label { width: 100%; }
  .aiq-st-score-mini { margin: 12px 0 0; width: 100%; }
  .aiq-st-content { padding: 24px 16px 100px; }
}

/* ================================================================
   AccessIQ — Score History  (aiq-score-history prefix)
   Scoped inside .aiq-sc-wrap (inherits scanner tokens)
   ================================================================ */

.aiq-score-history {
  margin-top: 40px;
}

.aiq-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.aiq-history-title {
  font-family: 'Manrope', 'DM Sans', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--aiq-sc-text, #dde4e1);
  margin: 0;
}

.aiq-history-select {
  background: var(--aiq-sc-card, #1a211f);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--aiq-sc-text, #dde4e1);
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  max-width: 420px;
  min-width: 200px;
}
.aiq-history-select:focus {
  border-color: var(--aiq-sc-primary, #57f1db);
}
.aiq-history-select option {
  background: #1a211f;
  color: #dde4e1;
}

.aiq-history-empty-state {
  text-align: center;
  padding: 40px 24px;
  color: #475569;
  font-size: 14px;
  line-height: 1.6;
}
.aiq-history-empty-icon {
  display: block;
  font-size: 28px;
  margin-bottom: 8px;
}

.aiq-history-chart-wrap {
  background: var(--aiq-sc-card, #1a211f);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 24px;
  margin-bottom: 16px;
  position: relative;
  height: 260px;
}

.aiq-history-canvas {
  width: 100% !important;
  height: 100% !important;
}

.aiq-history-table {
  width: 100%;
  border-collapse: collapse;
}
.aiq-history-table th {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--aiq-sc-text-subtle, #859490);
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  text-align: left;
}
.aiq-history-table td {
  padding: 10px 12px;
  font-size: 13px;
  color: var(--aiq-sc-text-muted, #bacac5);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.aiq-history-table tbody tr:last-child td {
  border-bottom: none;
}

.aiq-history-score-pill {
  display: inline-block;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 100px;
  font-size: 12px;
}
.aiq-history-score-pill.green {
  background: rgba(16,217,142,0.12);
  color: #10d98e;
}
.aiq-history-score-pill.amber {
  background: rgba(251,191,36,0.12);
  color: #fbbf24;
}
.aiq-history-score-pill.red {
  background: rgba(248,113,113,0.12);
  color: #f87171;
}

/* ================================================================
   AccessIQ — Element Ranking  (aiq-er- prefix)
   Scoped inside .aiq-hm-wrap (inherits heatmap tokens)
   ================================================================ */

/* ── Section Wrapper ─────────────────────────────────────────────── */
.aiq-er-wrap {
  --aiq-er-bg:       #0e1513;
  --aiq-er-card:     #1a211f;
  --aiq-er-border:   rgba(255,255,255,0.07);
  --aiq-er-primary:  #57f1db;
  --aiq-er-text:     #dde4e1;
  --aiq-er-muted:    #bacac5;
  --aiq-er-subtle:   #859490;
  font-family: 'Manrope', 'DM Sans', -apple-system, sans-serif;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.aiq-er-wrap * { box-sizing: border-box; }

/* ── Heading Row ─────────────────────────────────────────────────── */
.aiq-er-heading-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.aiq-er-heading {
  font-size: 20px;
  font-weight: 800;
  color: var(--aiq-er-text);
  margin: 0;
  line-height: 1.2;
}
.aiq-er-subheading {
  font-size: 13px;
  color: var(--aiq-er-subtle);
  margin: 0 0 20px;
}
.aiq-er-loader-inline {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(87,241,219,0.2);
  border-top-color: var(--aiq-er-primary);
  border-radius: 50%;
  animation: aiq-er-spin 0.8s linear infinite;
  display: none;
  flex-shrink: 0;
}
.aiq-er-loader-inline.visible { display: block; }
@keyframes aiq-er-spin {
  to { transform: rotate(360deg); }
}

/* ── Stats Bar ───────────────────────────────────────────────────── */
.aiq-er-stats-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 900px) { .aiq-er-stats-bar { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .aiq-er-stats-bar { grid-template-columns: 1fr; } }

.aiq-er-stat-card {
  background: var(--aiq-er-card);
  border: 1px solid var(--aiq-er-border);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
  transition: border-color .2s;
}
.aiq-er-stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(87,241,219,0.3), transparent);
}
.aiq-er-stat-card:hover { border-color: rgba(87,241,219,0.18); }
.aiq-er-stat-icon {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(87,241,219,0.1);
  color: var(--aiq-er-primary);
  flex-shrink: 0;
  margin-bottom: 2px;
}
.aiq-er-stat-val {
  font-size: 24px;
  font-weight: 800;
  color: var(--aiq-er-text);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.aiq-er-stat-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--aiq-er-subtle);
}

/* ── Controls Row ────────────────────────────────────────────────── */
.aiq-er-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.aiq-er-search-wrap {
  position: relative;
  flex: 1;
  min-width: 180px;
  max-width: 320px;
}
.aiq-er-search-wrap svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--aiq-er-subtle);
  pointer-events: none;
}
.aiq-er-search-input {
  width: 100%;
  background: var(--aiq-er-card) !important;
  border: 1px solid var(--aiq-er-border) !important;
  border-radius: 8px;
  color: var(--aiq-er-text) !important;
  font-size: 13px;
  font-family: inherit;
  padding: 7px 12px 7px 32px;
  outline: none;
  transition: border-color .15s;
  color-scheme: dark;
  -webkit-appearance: none;
  appearance: none;
}
.aiq-er-search-input:focus { border-color: rgba(87,241,219,0.35) !important; box-shadow: none !important; }
.aiq-er-search-input::placeholder { color: var(--aiq-er-subtle); }
.aiq-er-count-text {
  font-size: 12px;
  color: var(--aiq-er-subtle);
  white-space: nowrap;
}
.aiq-er-btn-export {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(87,241,219,0.06);
  border: 1px solid rgba(87,241,219,0.2);
  color: var(--aiq-er-primary);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  padding: 6px 14px;
  border-radius: 8px;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.aiq-er-btn-export:hover {
  background: rgba(87,241,219,0.12);
  border-color: rgba(87,241,219,0.35);
  color: var(--aiq-er-primary);
}

/* ── Table ───────────────────────────────────────────────────────── */
.aiq-er-table-wrap {
  background: var(--aiq-er-card);
  border: 1px solid var(--aiq-er-border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 14px;
}
.aiq-er-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.aiq-er-table th {
  padding: 10px 14px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--aiq-er-subtle);
  text-align: left;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--aiq-er-border);
  white-space: nowrap;
}
.aiq-er-th-rank    { width: 52px; }
.aiq-er-th-elem    { min-width: 180px; }
.aiq-er-th-count   { width: 110px; }
.aiq-er-th-dist    { width: 160px; }
.aiq-er-th-preview { width: 100px; text-align: center; }
.aiq-er-th-sev     { width: 100px; text-align: center; }

.aiq-er-row td {
  padding: 11px 14px;
  color: var(--aiq-er-muted);
  border-bottom: 1px solid var(--aiq-er-border);
  vertical-align: middle;
}
.aiq-er-row:last-child td { border-bottom: none; }
.aiq-er-row:hover td { background: rgba(255,255,255,0.02); }

/* Rank cell */
.aiq-er-td-rank { text-align: center; }
.aiq-er-medal { font-size: 18px; line-height: 1; }
.aiq-er-rank-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--aiq-er-subtle);
  font-variant-numeric: tabular-nums;
}

/* Element cell */
.aiq-er-selector-code {
  display: block;
  font-family: 'DM Mono', 'Courier New', monospace;
  font-size: 11px;
  color: var(--aiq-er-primary);
  background: rgba(87,241,219,0.07);
  border: 1px solid rgba(87,241,219,0.14);
  border-radius: 5px;
  padding: 2px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
  margin-bottom: 3px;
}
.aiq-er-breadcrumb {
  font-size: 11px;
  color: var(--aiq-er-subtle);
}

/* Count cell */
.aiq-er-count-num {
  font-size: 16px;
  font-weight: 800;
  color: var(--aiq-er-text);
  font-variant-numeric: tabular-nums;
  display: block;
  margin-bottom: 2px;
}

/* Distribution cell */
.aiq-er-dist-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.aiq-er-dist-track {
  flex: 1;
  height: 5px;
  background: rgba(255,255,255,0.07);
  border-radius: 3px;
  overflow: hidden;
  min-width: 60px;
}
.aiq-er-dist-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .4s ease;
}
.aiq-er-dist-fill--high   { background: #fb923c; }
.aiq-er-dist-fill--medium { background: #fbbf24; }
.aiq-er-dist-fill--low    { background: rgba(87,241,219,0.6); }
.aiq-er-dist-pct {
  font-size: 11px;
  font-weight: 700;
  color: var(--aiq-er-muted);
  white-space: nowrap;
  min-width: 36px;
  text-align: right;
}

/* Preview cell */
.aiq-er-td-preview { text-align: center; }
.aiq-er-preview-thumb {
  display: inline-block;
  width: 80px;
  height: 44px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--aiq-er-border);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.aiq-er-preview-thumb::after {
  content: '⌖';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--aiq-er-subtle);
  opacity: 0.5;
}

/* Severity cell */
.aiq-er-td-sev { text-align: center; }
.aiq-er-sev-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 100px;
  border: 1px solid transparent;
}
.aiq-er-sev-critical {
  background: rgba(239,68,68,0.15);
  color: #ef4444;
  border-color: rgba(239,68,68,0.3);
}
.aiq-er-sev-warning {
  background: rgba(245,158,11,0.15);
  color: #f59e0b;
  border-color: rgba(245,158,11,0.3);
}
.aiq-er-sev-pass {
  background: rgba(16,217,142,0.15);
  color: #10d98e;
  border-color: rgba(16,217,142,0.3);
}

/* Empty row */
.aiq-er-empty-msg {
  text-align: center;
  padding: 48px 20px !important;
  color: var(--aiq-er-subtle);
  font-size: 13px;
}

/* ── Pagination ──────────────────────────────────────────────────── */
.aiq-er-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.aiq-er-page-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--aiq-er-card);
  border: 1px solid var(--aiq-er-border);
  color: var(--aiq-er-muted);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  padding: 5px 12px;
  border-radius: 7px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.aiq-er-page-btn:hover:not(:disabled) {
  background: rgba(87,241,219,0.06);
  border-color: rgba(87,241,219,0.25);
  color: var(--aiq-er-primary);
}
.aiq-er-page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.aiq-er-page-nums {
  display: flex;
  align-items: center;
  gap: 4px;
}
.aiq-er-page-num {
  min-width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--aiq-er-muted);
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  border-radius: 7px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  padding: 0 4px;
}
.aiq-er-page-num:hover {
  background: rgba(87,241,219,0.06);
  color: var(--aiq-er-primary);
  border-color: rgba(87,241,219,0.2);
}
.aiq-er-page-num.active {
  background: rgba(87,241,219,0.12);
  border-color: rgba(87,241,219,0.35);
  color: var(--aiq-er-primary);
}
.aiq-er-ellipsis {
  font-size: 12px;
  color: var(--aiq-er-subtle);
  padding: 0 2px;
  user-select: none;
}

/* ── Bottom Row ──────────────────────────────────────────────────── */
.aiq-er-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 8px;
}
@media (max-width: 800px) { .aiq-er-bottom-row { grid-template-columns: 1fr; } }

.aiq-er-panel {
  background: var(--aiq-er-card);
  border: 1px solid var(--aiq-er-border);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.aiq-er-panel-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--aiq-er-subtle);
  margin: 0;
}

/* ── Insights List ───────────────────────────────────────────────── */
.aiq-er-insights-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.aiq-er-insight {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid transparent;
  font-size: 12px;
  line-height: 1.5;
}
.aiq-er-insight--error {
  background: rgba(239,68,68,0.07);
  border-color: rgba(239,68,68,0.15);
}
.aiq-er-insight--warning {
  background: rgba(245,158,11,0.07);
  border-color: rgba(245,158,11,0.15);
}
.aiq-er-insight--pass {
  background: rgba(16,217,142,0.07);
  border-color: rgba(16,217,142,0.15);
}
.aiq-er-insight--neutral {
  background: rgba(255,255,255,0.03);
  border-color: var(--aiq-er-border);
}
.aiq-er-insight-icon {
  flex-shrink: 0;
  font-size: 14px;
  line-height: 1.4;
}
.aiq-er-insight-body { color: var(--aiq-er-muted); }
.aiq-er-insight--error   .aiq-er-insight-body { color: #fca5a5; }
.aiq-er-insight--warning .aiq-er-insight-body { color: #fcd34d; }
.aiq-er-insight--pass    .aiq-er-insight-body { color: #6ee7b7; }

/* ── Trend Chart ─────────────────────────────────────────────────── */
.aiq-er-chart-wrap {
  position: relative;
  height: 220px;
}
.aiq-er-trend-canvas {
  width: 100% !important;
  height: 100% !important;
}