/* ================================================================
   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; }