/* ============================================================
   Omixa design system

   BRAND COLOURS ARE SAMPLED FROM THE LOGO (static/brand/omixa-logo-square.jpg):
     violet  #A554F7  the middle tile            indigo      #381593  the background glow
     glow    #6834D6  the bright top-right        indigo-deep #201551  the lower background
     ink     #0E0524  the outline of the "O"      canvas      #E6EBE5  the off-white tile and "O"
   Nothing else is a brand colour. Pink, lime, beige and neutral black are NOT part of Omixa.
   Status colours (success / warning / danger) are functional, not brand.

   RULE: a colour literal may only be written inside a :root block (here or in site.css).
   Everywhere else use var(--token). tests/test_brand_consistency.py enforces this.
   TYPE: Urbanist for all frontend text (see "Typography" in site.css).
   ============================================================ */

:root {
  /* Brand (from the logo) */
  --omixa-violet: #a554f7;
  --omixa-violet-dark: #8541c8;
  --omixa-violet-light: #ebddfd;
  --omixa-glow: #6834d6;
  --omixa-indigo: #381593;
  --omixa-indigo-deep: #201551;
  --omixa-ink: #0e0524;
  --omixa-canvas: #e6ebe5;
  --omixa-canvas-soft: #f3f6f2;
  --omixa-tint: #f4eefd;
  --omixa-gradient: linear-gradient(90deg, var(--omixa-violet), var(--omixa-glow));
  --omixa-gradient-deep: linear-gradient(180deg, var(--omixa-ink) 0%, var(--omixa-indigo-deep) 55%, var(--omixa-indigo) 100%);

  /* Legacy aliases so existing class names keep working */
  --omixa-lavender: var(--omixa-violet);
  --omixa-lavender-light: var(--omixa-violet-light);

  /* Neutrals tinted from the ink */
  --gray-50: #f7f5fb;
  --gray-100: #eeebf4;
  --gray-200: #e0dbea;
  --gray-300: #6f6785;
  --gray-600: #4d4563;
  --gray-800: #251a45;
  --gray-900: #150a33;
  --white: #ffffff;
  --white-soft: rgba(255, 255, 255, 0.72);

  /* Semantic (functional, not brand) */
  --success: #1c8a5a;
  --success-bg: #e6f5ee;
  --success-ink: #145c3c;
  --warning: #b4790a;
  --warning-bg: #fdf3e0;
  --danger: #c2372c;
  --danger-bg: #fbe9e7;
  --danger-bg-strong: #f6d9d5;
  --danger-ink: #8f291f;
  --info: var(--omixa-glow);
  --info-bg: var(--omixa-tint);
  --info-ink: var(--omixa-indigo);

  /* Surfaces */
  --bg-page: var(--omixa-canvas-soft);
  --bg-surface: var(--white);
  --border: #dcd8e6;
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-300);

  --font-sans: "Urbanist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(14, 5, 36, 0.06);
  --shadow-md: 0 4px 16px rgba(56, 21, 147, 0.10);
  --shadow-lg: 0 12px 32px rgba(56, 21, 147, 0.16);
  --focus-ring: 0 0 0 3px rgba(165, 84, 247, 0.28);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

body { font-size: 15px; line-height: 1.55; }

h1, h2, h3, h4 { font-family: var(--font-sans); font-weight: 700; line-height: 1.2; margin: 0 0 0.4em; color: var(--gray-900); }
h1 { font-size: 2.1rem; letter-spacing: -0.02em; }
h2 { font-size: 1.5rem; letter-spacing: -0.01em; }
h3 { font-size: 1.125rem; }
p { margin: 0 0 1em; color: var(--text-secondary); }
a { color: var(--omixa-indigo); text-decoration: none; }
a:hover { text-decoration: underline; }
strong { color: var(--text-primary); }

.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: 720px; margin: 0 auto; padding: 0 24px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 600; font-size: 0.9rem;
  padding: 10px 18px; border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; transition: all 0.15s var(--ease); white-space: nowrap;
  text-decoration: none; line-height: 1.3;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--omixa-indigo); color: var(--white); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--omixa-indigo-deep); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-primary:active { transform: translateY(0); }
.btn-secondary { background: var(--white); color: var(--omixa-indigo); border-color: var(--border); }
.btn-secondary:hover { border-color: var(--omixa-indigo); background: var(--gray-50); }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--gray-100); color: var(--text-primary); }
.btn-danger { background: var(--danger-bg); color: var(--danger); }
.btn-danger:hover { background: var(--danger-bg-strong); }
.btn-lg { padding: 13px 24px; font-size: 1rem; }
.btn-sm { padding: 6px 12px; font-size: 0.82rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ---------- Inputs ---------- */
.field { margin-bottom: 18px; text-align: left; }
.field label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--text-primary); margin-bottom: 6px; }
.field .hint { font-size: 0.78rem; color: var(--gray-300); margin-top: 4px; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], textarea, select {
  width: 100%; font-family: var(--font-sans); font-size: 0.92rem; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--white);
  color: var(--text-primary); transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--omixa-lavender);
  box-shadow: var(--focus-ring);
}

/* ---------- Cards ---------- */
.card {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: 16px; }
.card-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
.card-title-row h2, .card-title-row h3 { margin: 0; }

/* ---------- Badges / alerts ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; padding: 3px 9px; border-radius: var(--radius-full); }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-info { background: var(--info-bg); color: var(--info); }
.badge-plan-free { background: var(--gray-100); color: var(--gray-600); }
.badge-plan-pro { background: var(--omixa-indigo); color: var(--omixa-lavender-light); }

.alert { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: var(--radius-md); font-size: 0.88rem; margin-bottom: 16px; }
.alert-error { background: var(--danger-bg); color: var(--danger-ink); }
.alert-success { background: var(--success-bg); color: var(--success-ink); }
.alert-info { background: var(--info-bg); color: var(--info-ink); }

/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
thead th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--gray-300); font-weight: 700; padding: 0 12px 10px; border-bottom: 1px solid var(--border); }
tbody td { padding: 12px; border-bottom: 1px solid var(--gray-100); color: var(--text-primary); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--gray-50); }

/* ---------- Empty / loading states ---------- */
.empty-state { text-align: center; padding: 48px 24px; color: var(--text-secondary); }
.empty-state h3 { margin-bottom: 6px; }
.spinner { width: 18px; height: 18px; border: 2.5px solid var(--gray-200); border-top-color: var(--omixa-indigo); border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Top navigation (app shell) ---------- */
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.topnav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px; background: var(--white); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 40;
}
.topnav .brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 1.15rem; color: var(--omixa-indigo); }
.topnav .brand img { height: 30px; width: auto; display: block; }
.topnav-links { display: flex; align-items: center; gap: 4px; }
.topnav-links a {
  color: var(--text-secondary); font-weight: 600; font-size: 0.88rem; padding: 8px 14px;
  border-radius: var(--radius-sm); text-decoration: none; transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.topnav-links a:hover { background: var(--gray-100); color: var(--text-primary); }
.topnav-links a.active { background: var(--omixa-lavender-light); color: var(--omixa-indigo); }
.topnav-right { display: flex; align-items: center; gap: 10px; }
.user-menu { position: relative; }
.user-chip {
  display: flex; align-items: center; gap: 8px; background: var(--gray-50); border: 1px solid var(--border);
  padding: 6px 12px 6px 6px; border-radius: var(--radius-full); cursor: pointer; font-size: 0.85rem; font-weight: 600;
}
.avatar {
  width: 26px; height: 26px; border-radius: 50%; background: var(--omixa-indigo); color: var(--white);
  display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700;
}
.user-dropdown {
  position: absolute; right: 0; top: calc(100% + 8px); background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg); min-width: 190px; padding: 6px; display: none; z-index: 50;
}
.user-dropdown.open { display: block; }
.user-dropdown a, .user-dropdown button {
  display: block; width: 100%; text-align: left; padding: 9px 10px; border-radius: var(--radius-sm);
  font-size: 0.86rem; color: var(--text-primary); background: none; border: none; cursor: pointer; font-family: var(--font-sans);
}
.user-dropdown a:hover, .user-dropdown button:hover { background: var(--gray-100); text-decoration: none; }

.hamburger { display: none; background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--omixa-indigo); padding: 4px 8px; }

.app-main { flex: 1; padding: 32px 28px 64px; }
.app-footer { text-align: center; padding: 20px; font-size: 0.78rem; color: var(--gray-300); }

@media (max-width: 860px) {
  .topnav-links { position: fixed; top: 62px; left: 0; right: 0; background: var(--white); flex-direction: column;
    align-items: stretch; padding: 8px; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md);
    display: none; }
  .topnav-links.open { display: flex; }
  .topnav-links a { padding: 12px 14px; }
  .hamburger { display: inline-flex; }
  .app-main { padding: 20px 16px 48px; }
}

/* ---------- Dashboard ---------- */
.dash-header { margin-bottom: 24px; }
.dash-header p { font-size: 1rem; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.stat-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; }
.stat-card .stat-value { font-size: 1.7rem; font-weight: 800; color: var(--omixa-indigo); letter-spacing: -0.02em; }
.stat-card .stat-label { font-size: 0.78rem; color: var(--text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; margin-top: 2px; }
@media (max-width: 860px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }

.usage-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.usage-bar-track { background: var(--gray-100); border-radius: var(--radius-full); height: 8px; width: 100%; overflow: hidden; margin: 10px 0; }
.usage-bar-fill { background: linear-gradient(90deg, var(--omixa-indigo), var(--omixa-lavender)); height: 100%; border-radius: var(--radius-full); transition: width 0.4s var(--ease); }
.usage-bar-fill.at-limit { background: var(--danger); }

.cta-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }

/* ---------- Upload / workspace ---------- */
.dropzone {
  border: 2px dashed var(--border); border-radius: var(--radius-lg); padding: 48px 24px; text-align: center;
  cursor: pointer; transition: border-color 0.15s var(--ease), background 0.15s var(--ease); background: var(--gray-50);
}
.dropzone:hover, .dropzone.drag { border-color: var(--omixa-lavender); background: var(--omixa-lavender-light); }
.dropzone .dz-title { font-weight: 700; font-size: 1rem; color: var(--text-primary); }
.dropzone .dz-sub { font-size: 0.82rem; color: var(--text-secondary); margin-top: 4px; }

.stepper { display: flex; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; }
.step { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 600; color: var(--gray-300); }
.step .dot { width: 22px; height: 22px; border-radius: 50%; background: var(--gray-100); color: var(--gray-300); display: flex; align-items: center; justify-content: center; font-size: 0.72rem; font-weight: 700; }
.step.active { color: var(--omixa-indigo); }
.step.active .dot { background: var(--omixa-indigo); color: var(--white); }
.step.done .dot { background: var(--success); color: var(--white); }
.step.err .dot { background: var(--danger); color: var(--white); }

.rules-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 640px) { .rules-grid { grid-template-columns: 1fr; } }
.rule { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }
.rule:hover { background: var(--gray-50); }
.rule input { margin-top: 3px; }

.finding { display: flex; gap: 10px; padding: 12px; border-radius: var(--radius-sm); background: var(--gray-50); margin-bottom: 8px; }
.finding-body strong { display: block; font-size: 0.88rem; }
.finding-body p { margin: 2px 0; font-size: 0.82rem; }
.finding-body .suggestion { color: var(--omixa-indigo); }
.badge.critical { background: var(--danger-bg); color: var(--danger); }
.badge.warning { background: var(--warning-bg); color: var(--warning); }
.badge.info { background: var(--info-bg); color: var(--info); }

.score-badge { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; font-weight: 800; font-size: 1.2rem; }
.score-badge.good { background: var(--success-bg); color: var(--success); }
.score-badge.warn { background: var(--warning-bg); color: var(--warning); }
.score-badge.bad { background: var(--danger-bg); color: var(--danger); }

.rec-item { display: flex; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--gray-50); margin-bottom: 8px; cursor: pointer; }
.rec-item.safe { border-left: 3px solid var(--success); }
.rec-item-body strong { font-size: 0.86rem; }
.rec-item-body p { font-size: 0.8rem; margin: 2px 0; }
.rec-evidence { color: var(--gray-300); font-size: 0.75rem !important; }

.upgrade-box {
  background: linear-gradient(135deg, var(--omixa-indigo), var(--omixa-indigo-deep));
  color: var(--white); border-radius: var(--radius-lg); padding: 20px 24px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.upgrade-box p { color: var(--omixa-lavender-light); margin: 4px 0 0; }
.upgrade-box .btn-primary { background: var(--omixa-lavender); }
.upgrade-box .btn-primary:hover { background: var(--omixa-violet-dark); }

.hidden { display: none !important; }
.text-muted { color: var(--text-muted); }
.small { font-size: 0.8rem; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------- Auth pages ---------- */
.auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-card { width: 100%; max-width: 400px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 32px; text-align: center; }
.auth-card .brand-mark { height: 40px; margin-bottom: 16px; }
.auth-card h1 { font-size: 1.4rem; }
.auth-card form { text-align: left; margin-top: 20px; }
.auth-switch { margin-top: 18px; font-size: 0.85rem; color: var(--text-secondary); }

/* ---------- Landing ---------- */
.hero { padding: 88px 0 64px; text-align: center; }
.hero h1 { font-size: 2.6rem; max-width: 780px; margin: 0 auto 16px; }
.hero p.lead { font-size: 1.1rem; max-width: 560px; margin: 0 auto 28px; }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.section { padding: 56px 0; }
.section-head { text-align: center; max-width: 620px; margin: 0 auto 36px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) { .feature-grid { grid-template-columns: 1fr; } .stepper { flex-direction: column; } }
.feature-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; }
.steps-flow { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.step-flow-item { flex: 1; min-width: 180px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; text-align: center; }
.step-flow-item .num { width: 30px; height: 30px; border-radius: 50%; background: var(--omixa-indigo); color: var(--white); display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; font-weight: 700; }
.marketing-nav { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; }

/* ---------- Pricing ---------- */
.pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 780px; margin: 0 auto; }
@media (max-width: 720px) { .pricing-grid { grid-template-columns: 1fr; } }

/* ---------- Settings ---------- */
.settings-grid { display: grid; grid-template-columns: 220px 1fr; gap: 24px; }
@media (max-width: 780px) { .settings-grid { grid-template-columns: 1fr; } }
.settings-nav a { display: block; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--text-secondary); font-weight: 600; font-size: 0.86rem; }
.settings-nav a.active, .settings-nav a:hover { background: var(--gray-100); color: var(--omixa-indigo); text-decoration: none; }

/* ---------- Workspace results (ported from V1 script.js) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.file-chip { display: none; margin-top: 10px; font-size: 0.82rem; font-weight: 600; color: var(--omixa-indigo); }
.stats { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
.stat { background: var(--gray-50); border-radius: var(--radius-md); padding: 14px 18px; min-width: 110px; text-align: center; }
.stat .n { font-size: 1.4rem; font-weight: 800; color: var(--omixa-indigo); }
.stat .l { font-size: 0.72rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 2px; }
.score-compare { display: flex; align-items: center; gap: 14px; background: var(--gray-50); border-radius: var(--radius-md); padding: 12px 18px; }
.score-compare-item { text-align: center; }
.score-compare-item .l { font-size: 0.72rem; color: var(--text-secondary); margin-top: 2px; }
.score-badge.small { width: 40px; height: 40px; font-size: 0.95rem; }
.score-arrow { font-size: 1.2rem; color: var(--gray-300); }
.cleaning-summary-text { background: var(--gray-50); border-radius: var(--radius-md); padding: 16px; font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: 0.8rem; white-space: pre-wrap; color: var(--text-primary); overflow-x: auto; }
.hint { font-size: 0.8rem; color: var(--text-secondary); }
.rules-legend { font-weight: 700; font-size: 0.9rem; margin-bottom: 10px; padding: 0; }
fieldset.rules { border: none; padding: 0; margin: 0 0 20px; }
.results-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.stage { font-size: 0.85rem; color: var(--text-secondary); margin-top: 12px; min-height: 1.2em; }
.stage.error { color: var(--danger); }
.footer-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; align-items: center; }

/* ---------- Floating data-quality control center (quality-panel.js) ---------- */
.qc-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 70;
  width: 56px; height: 56px; border-radius: var(--radius-full);
  border: none; cursor: pointer; box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center;
  background: var(--omixa-indigo); color: var(--white);
  transition: transform 0.15s var(--ease), background 0.15s var(--ease);
}
.qc-fab:hover { transform: translateY(-2px) scale(1.03); }
.qc-fab.hidden { display: none; }
.qc-fab-score { font-weight: 800; font-size: 1.05rem; }
.qc-fab-delta {
  font-size: 0.62rem; font-weight: 800; line-height: 1; margin-top: 1px;
}
.qc-fab-delta.good { color: var(--white); }
.qc-fab-delta.bad { color: var(--white); }
.qc-fab.good { background: var(--success); }
.qc-fab.warn { background: var(--warning); }
.qc-fab.bad { background: var(--danger); }

.qc-panel {
  position: fixed; right: 24px; bottom: 92px; z-index: 70;
  width: min(360px, calc(100vw - 32px)); max-height: min(72vh, 620px);
  overflow-y: auto; background: var(--bg-surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); border: 1px solid var(--border);
}
.qc-panel.hidden { display: none; }

.qc-panel-header {
  display: flex; align-items: center; gap: 12px; padding: 16px;
  border-bottom: 1px solid var(--border); position: sticky; top: 0;
  background: var(--bg-surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.qc-score-badge {
  flex: none; width: 48px; height: 48px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1rem; line-height: 1;
}
.qc-score-badge span { font-size: 0.6rem; font-weight: 700; margin-top: 2px; }
.qc-score-badge.good { background: var(--success-bg); color: var(--success); }
.qc-score-badge.warn { background: var(--warning-bg); color: var(--warning); }
.qc-score-badge.bad { background: var(--danger-bg); color: var(--danger); }
.qc-score-badge.small { width: 34px; height: 34px; font-size: 0.78rem; }
.qc-score-compare { display: flex; align-items: center; gap: 6px; flex: none; }
.qc-score-arrow { color: var(--text-secondary); font-size: 0.9rem; }
.qc-score-delta {
  font-size: 0.72rem; font-weight: 800; padding: 2px 6px; border-radius: var(--radius-full);
}
.qc-score-delta.good { background: var(--success-bg); color: var(--success); }
.qc-score-delta.bad { background: var(--danger-bg); color: var(--danger); }
.qc-panel-headline { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qc-panel-headline strong { font-size: 0.92rem; }
.qc-panel-sub { font-size: 0.74rem; color: var(--text-secondary); }

.qc-panel-body { padding: 8px 12px 14px; }
.qc-empty { font-size: 0.85rem; color: var(--text-secondary); padding: 16px 4px; }

.qc-group { margin-top: 10px; }
.qc-group-title {
  display: flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-secondary);
  padding: 6px 4px;
}
.qc-group-count {
  margin-left: auto; background: var(--gray-100); color: var(--text-secondary);
  border-radius: var(--radius-full); font-size: 0.68rem; padding: 1px 7px; font-weight: 700;
}
.qc-group-items { display: flex; flex-direction: column; gap: 6px; }

.qc-action {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 10px; border-radius: var(--radius-sm); border: 1px solid transparent;
  background: var(--gray-50); cursor: pointer; font-family: inherit;
}
.qc-action-safe:hover { background: var(--success-bg); }
.qc-action-review { border: none; }
.qc-action-review:hover { background: var(--gray-100); }
.qc-action input[type="checkbox"] { flex: none; width: 16px; height: 16px; margin: 0; }
.qc-action-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.qc-action-body strong { font-size: 0.82rem; }
.qc-action-detail {
  font-size: 0.74rem; color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qc-count { flex: none; font-size: 0.75rem; font-weight: 700; color: var(--text-secondary); }
.qc-jump-arrow { flex: none; font-size: 1.1rem; color: var(--gray-300); }
.qc-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.qc-dot-critical { background: var(--danger); }
.qc-dot-warning { background: var(--warning); }
.qc-dot-info { background: var(--info); }

/* Brief highlight when jumping from the control center to the
   matching item in the main review UI, see clean.js's jumpToFinding(). */
.qc-highlight { animation: qc-flash 1.6s var(--ease); }
@keyframes qc-flash {
  0%, 100% { background: inherit; }
  20% { background: var(--omixa-lavender-light); }
}

@media (max-width: 480px) {
  .qc-fab { right: 16px; bottom: 16px; }
  .qc-panel { right: 16px; left: 16px; width: auto; bottom: 84px; }
}

/* Column validation report */
.val-count { background: none; border: 0; padding: 0 2px; font: inherit; color: var(--text-primary); text-decoration: underline; cursor: pointer; }
.val-type { max-width: 190px; font-size: 0.8rem; }

.qc-score-cap { margin: 6px 0 0; font-size: 0.75rem; line-height: 1.3; color: var(--text-secondary); }


/* ---- Score explanation: top reasons, review list, "How is this scored?" ---- */
.reasons { margin: 14px 0 0; }
.reasons h3, .review-list h3 { font-size: 0.95rem; margin: 0 0 8px; }
.reasons ol { margin: 0; padding-left: 20px; font-size: 0.86rem; color: var(--text-primary); }
.reasons li { margin-bottom: 4px; }
.key-tag { display: inline-block; font-size: 0.68rem; font-weight: 700; padding: 1px 7px; border-radius: var(--radius-full); background: var(--info-bg); color: var(--info-ink); vertical-align: middle; }
.review-list { margin: 16px 0 0; }
#results.needs-review .done-check { background: var(--warning-bg); color: var(--warning); }
.score-why { margin: 8px 0 0; }
.how-scored { margin: 14px 0 0; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 10px 14px; background: var(--bg-surface); }
.how-scored summary { cursor: pointer; font-weight: 700; font-size: 0.9rem; }
.how-scored p { font-size: 0.84rem; margin: 8px 0 0; }
.how-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 0.82rem; }
.how-table th, .how-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
@media (max-width: 560px) {
  .how-table thead { display: none; }
  .how-table, .how-table tbody, .how-table tr, .how-table td { display: block; width: 100%; }
  .how-table tr { padding: 8px 0; border-bottom: 1px solid var(--border); }
  .how-table td { border: 0; padding: 2px 0; }
  .how-table td::before { content: attr(data-label) ": "; font-weight: 700; color: var(--text-secondary); }
}

.readiness { margin: 14px 0 0; padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid var(--border); }
.readiness strong { font-size: 1rem; }
.readiness p { margin: 4px 0 0; font-size: 0.84rem; }
.readiness h4 { margin: 10px 0 4px; font-size: 0.8rem; }
.readiness ul { margin: 0; padding-left: 18px; font-size: 0.82rem; }
.readiness-ready { background: var(--success-bg); border-color: var(--success); color: var(--success-ink); }
.readiness-caution { background: var(--warning-bg); border-color: var(--warning); }
.readiness-not_ready { background: var(--danger-bg); border-color: var(--danger); color: var(--danger-ink); }