/* PPC Audit Tool — shared styles
   Used by audit_admin.html, audit_public.html, audit_view.html. Visual
   language mirrors the AMZ Boost brand (red accent #E8192C, navy text)
   with a softer, marketing-style feel for the lead-magnet flows.
*/

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f8f9fb;--white:#ffffff;
  --navy:#1e293b;--mid:#64748b;--light:#94a3b8;
  --border:#e5e7eb;
  --accent:#E8192C; --accent-soft:#fef2f3; --accent-tint:#fde8ea;
  --green:#15803d;--green-bg:#dcfce7;--green-text:#166534;
  --amber:#a16207;--amber-bg:#fef3c7;--amber-text:#854d0e;
  --red-bg:#fee2e2;--red-text:#991b1b;
  --soft:#f1f5f9;--soft-2:#fafafa;
  --shadow:0 1px 2px rgba(0,0,0,.04);--shadow-md:0 2px 8px rgba(0,0,0,.06);
  /* Categorical chart palette (muted, distinct from --accent so the red can
     keep its meaning as "warning / Wasted / High ACoS"). */
  --c1:#1e293b;--c2:#0ea5e9;--c3:#10b981;--c4:#f59e0b;--c5:#8b5cf6;--c6:#ec4899;
}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--navy);min-height:100vh;
  font-size:14px;letter-spacing:-0.01em;
  -webkit-text-size-adjust:100%;
  /* Crispness: anti-alias, optimize kerning, enable Inter's
     stylistic sets — cv11 (distinct lowercase l), ss01 (open
     digits), ss03 (curved f). Together these make headings and
     numbers feel deliberately designed rather than generic. */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:'cv11','ss01','ss03';
}
/* Tabular nums everywhere a number is shown — keeps columns aligned
   and prevents value jitter on hover/state-change. */
.audit-table td.num,.kpi .value,.kpi-strip .value,.ws-stat .value,
.bench-gauge text,.ranked-row .right,.kpi-value{
  font-variant-numeric:tabular-nums;
}

/* ─── Header ────────────────────────────────────────────────────────── */
.header{background:var(--white);border-bottom:1px solid var(--border);padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:60px;position:sticky;top:0;z-index:100;box-shadow:var(--shadow)}
.header-left{display:flex;align-items:center;gap:32px}
.logo{height:32px}
.top-nav{display:flex;gap:6px}
.top-nav a{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:10px 20px;font-size:14px;font-weight:600;
  color:var(--mid);text-decoration:none;
  border-radius:999px;white-space:nowrap;
  transition:color .15s ease,background .15s ease,box-shadow .15s ease;
}
.top-nav a svg{display:block;flex-shrink:0;stroke-width:2}
.top-nav a:hover{color:var(--navy);background:#f1f5f9}
.top-nav a.active{color:var(--white);background:var(--accent);box-shadow:0 4px 12px rgba(232,25,44,.25)}
.header-right{display:flex;align-items:center;gap:8px}
.btn-pill{font-size:12px;font-weight:600;padding:8px 16px;border:1px solid var(--border);background:var(--white);color:var(--navy);border-radius:999px;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px;transition:all .15s}
.btn-pill:hover{background:#f1f5f9}
.btn-dark{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-dark:hover{background:#0f172a}
.btn-accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-accent:hover{background:#c8141f}

/* ─── Page layout ──────────────────────────────────────────────────── */
/* Full bleed — match the header's edge-to-edge layout so charts get
   the full screen width. */
.page{max-width:none;margin:0;padding:20px 24px 40px}
.section-title{font-size:12px;font-weight:600;color:var(--light);letter-spacing:1px;text-transform:uppercase;margin:32px 0 14px}

/* ─── Section group — pink panel that wraps a row of cards ─────────
   Mirrors the SellerSynapse "Campaign Analysis" / "Spend Analysis"
   panel: a soft pink/peach gradient with a sentence-case heading on
   top, then white chart cards inside. Each major section on the
   audit tabs gets its own group so the page reads as clearly bounded
   regions instead of one undifferentiated stream of cards. */
.section-group{
  background:linear-gradient(135deg,#fef0f1 0%,#fee4e6 50%,#fef0ec 100%);
  border-radius:18px;
  padding:24px 26px 22px;
  margin-bottom:22px;
  border:1px solid rgba(232,25,44,.10);
  box-shadow:0 1px 6px rgba(232,25,44,.04);
}
.section-group .section-h{
  font-size:20px;font-weight:800;color:var(--navy);
  letter-spacing:-.4px;margin:0 0 16px;line-height:1.2;
}
/* Cards inside a section-group get a brighter shadow so they "lift"
   off the pink panel. */
.section-group .card{
  background:var(--white);
  box-shadow:0 4px 14px rgba(0,0,0,.06);
  border:1px solid rgba(255,255,255,.6);
}
/* Chart card titles read better in sentence case + bigger inside groups */
.section-group .card-title{
  font-size:15px;font-weight:700;color:var(--navy);
  text-transform:none;letter-spacing:-.1px;
}
.section-group .card-badge{
  background:var(--accent-soft);color:var(--accent);
  font-size:10px;font-weight:700;
  padding:5px 12px;border-radius:6px;letter-spacing:.4px;
}
/* Section group also tightens the top margin of the inner row so the
   heading + chart-row feels like one cohesive unit */
.section-group .row{margin-bottom:0}
.section-group .row + .row{margin-top:14px}

/* Sentiment variants — the section-group panel takes a hue that
   matches the content's mood. Used on Wasted Spend (warn/bad) and
   Opportunities (warn/bad/good/emerge per opp type). */
.section-group.warn{
  background:linear-gradient(135deg,#fff7ed 0%,#ffedd5 50%,#fed7aa 100%);
  border-color:#fed7aa;
}
.section-group.warn .section-h{color:#9a3412}
.section-group.bad{
  background:linear-gradient(135deg,#fef2f2 0%,#fee2e2 50%,#fecaca 100%);
  border-color:#fecaca;
}
.section-group.bad .section-h{color:#9f1239}
.section-group.good{
  background:linear-gradient(135deg,#f0fdf4 0%,#dcfce7 50%,#bbf7d0 100%);
  border-color:#bbf7d0;
}
.section-group.good .section-h{color:#166534}
.section-group.emerge{
  background:linear-gradient(135deg,#eff6ff 0%,#dbeafe 50%,#bfdbfe 100%);
  border-color:#bfdbfe;
}
.section-group.emerge .section-h{color:#1e40af}

/* ─── Opportunity card — left-border accent + sentiment hue ───────── */
.opp-card{
  background:var(--white);
  border:1px solid var(--border);
  border-left:4px solid var(--mid);
  border-radius:12px;
  padding:18px 22px;
  margin-bottom:12px;
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:16px;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  transition:transform .15s ease, box-shadow .15s ease;
}
.opp-card:hover{transform:translateX(3px);box-shadow:0 6px 14px rgba(0,0,0,.08)}
.opp-card.warn{border-left-color:#f97316;background:linear-gradient(90deg,#fff7ed 0%,#fff 24%)}
.opp-card.bad {border-left-color:#dc2626;background:linear-gradient(90deg,#fef2f2 0%,#fff 24%)}
.opp-card.good{border-left-color:#16a34a;background:linear-gradient(90deg,#f0fdf4 0%,#fff 24%)}
.opp-card .body{flex:1;min-width:0}
.opp-card h4{font-size:15px;font-weight:800;color:var(--navy);margin-bottom:6px;letter-spacing:-.2px}
.opp-card p{font-size:13px;color:var(--mid);margin-bottom:4px;line-height:1.5}
.opp-card p strong{color:var(--navy);font-weight:600}
.opp-card .meta{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;font-size:11px;color:var(--mid)}
.opp-card .priority{
  font-size:10px;font-weight:800;padding:3px 9px;border-radius:6px;
  text-transform:uppercase;letter-spacing:.4px;
}
.opp-card .priority.high{background:#fee2e2;color:#991b1b}
.opp-card .priority.medium{background:#fef3c7;color:#854d0e}
.opp-card .priority.low{background:#dbeafe;color:#1e40af}
.opp-card .cta{
  flex-shrink:0;align-self:flex-start;
  background:var(--accent);color:#fff;
  font-size:12px;font-weight:700;
  padding:10px 18px;border-radius:8px;border:none;cursor:pointer;
  font-family:inherit;white-space:nowrap;
  transition:background .15s ease;
}
.opp-card .cta:hover{background:#c8141f}
.opp-card.warn .cta{background:#f97316}
.opp-card.warn .cta:hover{background:#ea580c}
.opp-card.good .cta{background:#16a34a}
.opp-card.good .cta:hover{background:#15803d}
.opp-empty{
  background:var(--white);border:1px solid var(--border);border-radius:12px;
  padding:40px;text-align:center;color:var(--mid);font-size:14px;
}
/* Tinted section containers — wrap a row of cards in a soft sentiment
   background so the eye instantly groups "good" vs "bad" content. */
.section-tint{padding:20px;border-radius:16px;margin-bottom:14px}
.section-tint .section-title{margin:0 0 14px;color:var(--navy);opacity:.65}
.section-tint-good{background:linear-gradient(135deg,#f0fdf4 0%,#ecfdf5 100%);border:1px solid #bbf7d0}
.section-tint-bad{background:linear-gradient(135deg,#fef2f2 0%,#fef0ec 100%);border:1px solid #fecaca}

/* ─── Filter bar (top of report-list pages) ────────────────────────── */
.filter-bar{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:16px 18px;margin-bottom:18px;display:flex;gap:12px;flex-wrap:wrap;align-items:center;box-shadow:var(--shadow-md)}
.filter-bar input,.filter-bar select{padding:10px 14px;border:1px solid var(--border);border-radius:10px;font-size:13px;font-family:inherit;background:var(--white);color:var(--navy);transition:border-color .15s ease,box-shadow .15s ease}
.filter-bar input:focus,.filter-bar select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(232,25,44,.08)}
.filter-bar .search-input{flex:1;min-width:240px;padding-left:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:18px;background-position:12px center}

/* ─── Report list cards (Prospect Reports / My Reports) ──────────────
   SellerSynapse-style: clean white card with a peach-tinted KPI
   strip below, tighter typography hierarchy, and a satisfying hover
   that lifts the card and slides in an accent stripe on the left. */
.report-card{
  background:var(--white);border:1px solid var(--border);border-radius:16px;
  padding:22px 26px;margin-bottom:14px;
  box-shadow:0 2px 8px rgba(15,23,42,.04);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  position:relative;overflow:hidden;
  cursor:pointer;  /* whole card opens the report */
}
.report-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.report-card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--accent);
  transform:scaleY(0);transform-origin:top;
  transition:transform .25s ease;
}
.report-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(232,25,44,.10);
  border-color:rgba(232,25,44,.20);
}
.report-card:hover::before{transform:scaleY(1)}
.report-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.report-title{font-size:18px;font-weight:800;color:var(--navy);letter-spacing:-.3px;display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.report-meta{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--mid);margin-top:4px;align-items:center}
.report-meta .chip{
  font-size:10px;padding:4px 10px;border-radius:999px;font-weight:700;
  background:var(--accent-soft);color:var(--accent);
  text-transform:uppercase;letter-spacing:.3px;
}
.report-meta .chip.gray{background:#f1f5f9;color:var(--mid)}
.report-actions{display:flex;gap:8px;align-items:center}
.icon-btn{
  width:36px;height:36px;border-radius:50%;border:none;
  background:var(--accent-soft);color:var(--accent);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;line-height:0;  /* keeps the SVG perfectly centered */
  transition:transform .15s ease,background .15s ease,color .15s ease,box-shadow .15s ease;
}
.icon-btn svg{display:block;flex-shrink:0}
.icon-btn:hover{background:var(--accent);color:#fff;transform:scale(1.08);box-shadow:0 4px 10px rgba(232,25,44,.25)}
.icon-btn.danger{background:#fee2e2;color:#dc2626}
.icon-btn.danger:hover{background:#dc2626;color:#fff;box-shadow:0 4px 10px rgba(220,38,38,.25)}
.status-pill{font-size:11px;font-weight:700;padding:5px 14px;border-radius:999px;background:var(--green-bg);color:var(--green-text);text-transform:uppercase;letter-spacing:.4px}
.status-pill.processing{background:var(--amber-bg);color:var(--amber-text)}
.status-pill.failed{background:var(--red-bg);color:var(--red-text)}

/* KPI strip below each report — each cell gets a metric-specific tint
   so the whole strip reads as 4 distinct measurements, not 4 of the
   same thing. */
.kpi-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:6px}
.kpi-strip .cell{
  background:#f8fafc;
  border:1px solid var(--border);
  border-radius:12px;padding:14px 18px;
  transition:transform .15s ease,box-shadow .15s ease;
}
.kpi-strip .cell:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(15,23,42,.08)}
.kpi-strip .label{font-size:10px;color:var(--mid);font-weight:700;margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}
.kpi-strip .value{font-size:22px;font-weight:800;color:var(--navy);letter-spacing:-.4px;line-height:1.05}
/* Per-metric tints — *very* pale background so the color cues the
   metric without flooding the page. Saturation lives on the value
   text only. Stacked 4-up across 5+ report rows reads as quiet now. */
.kpi-strip .cell-sales{background:#f8fcfa;border-color:#eaf3ed}
.kpi-strip .cell-sales .value{color:#16a34a}
.kpi-strip .cell-spend{background:#fdf8f8;border-color:#f5e8e8}
.kpi-strip .cell-spend .value{color:#dc2626}
.kpi-strip .cell-info {background:#f8faff;border-color:#eaeef7}
.kpi-strip .cell-info .value{color:#2563eb}
.kpi-strip .cell-acos {background:#fdfaf6;border-color:#f5ecd9}
.kpi-strip .cell-acos .value{color:#ea580c}
.kpi-strip .cell-good {background:#f8fcfa;border-color:#eaf3ed}
.kpi-strip .cell-good .value{color:#16a34a}
/* Hover deepens the tint slightly so the cells still feel touchable
   without being loud at rest. */
.kpi-strip .cell-sales:hover{background:#f0f8f3;border-color:#d8ebde}
.kpi-strip .cell-spend:hover{background:#fbf0f0;border-color:#ecd6d6}
.kpi-strip .cell-info:hover {background:#eff3fb;border-color:#d8e0ee}
.kpi-strip .cell-acos:hover {background:#faf3e7;border-color:#ebd9b8}
.kpi-strip .cell-good:hover {background:#f0f8f3;border-color:#d8ebde}

/* ─── Report viewer ─────────────────────────────────────────────────── */
.report-shell{display:grid;grid-template-columns:240px 1fr;gap:0;background:var(--white);border-radius:14px;overflow:hidden;border:1px solid var(--border);min-height:600px;box-shadow:var(--shadow-md)}
.side-nav{background:#fafafa;border-right:1px solid var(--border);padding:22px 12px;display:flex;flex-direction:column;gap:6px}
.side-nav .nav-item{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;border-radius:10px;
  font-size:15px;font-weight:500;color:var(--navy);
  cursor:pointer;
  transition:background-color .15s ease,color .15s ease,transform .15s ease;
}
.side-nav .nav-item:hover{background:var(--accent-soft);color:var(--accent);transform:translateX(2px)}
.side-nav .nav-item.active{
  background:var(--accent-soft);color:var(--accent);font-weight:700;
  box-shadow:inset 3px 0 0 var(--accent);
}
.side-nav .icon{font-size:18px;width:22px;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.report-body{padding:24px 28px;min-width:0}
.report-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.report-name{font-size:18px;font-weight:700;color:var(--navy)}
.report-bar .right{display:flex;gap:10px;align-items:center}
.cat-select{padding:6px 10px;border:1px solid var(--border);border-radius:8px;font-size:12px;background:var(--white);color:var(--navy);font-family:inherit}

/* ─── Report-mode header info (shows when a report is open) ───────── */
.report-header-info{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.report-name-h{font-size:15px;font-weight:700;color:var(--navy);letter-spacing:-.2px;max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.report-cat-label{font-size:11px;color:var(--mid);font-weight:600;text-transform:uppercase;letter-spacing:.4px;margin-left:6px}
.report-header-info .cat-select{padding:7px 12px;font-size:12px;border:1px solid var(--border);border-radius:8px;background:var(--white);color:var(--navy);font-family:inherit;font-weight:500;cursor:pointer;transition:border-color .15s}
.report-header-info .cat-select:hover{border-color:var(--accent)}

.section-block{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:22px 24px;margin-bottom:18px;box-shadow:var(--shadow)}
.section-block h2{font-size:20px;font-weight:700;color:var(--navy);margin:0}
.section-block .subtitle{color:var(--mid);font-size:13px;margin-top:4px}

/* ─── Page hero — gradient banner at the top of every audit tab ─── */
/* Title + subtitle + first content block (KPIs / filters) all sit on
   the same soft pink/peach gradient so each tab has a clear, branded
   header. Mirrors the SellerSynapse header pattern. */
.page-hero{
  background:linear-gradient(135deg,#fee4e6 0%,#fef0ec 50%,#fff7f3 100%);
  border-radius:18px;
  padding:32px 36px 28px;
  margin-bottom:26px;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(232,25,44,.08);
  box-shadow:0 2px 14px rgba(232,25,44,.05);
}
.page-hero::before{
  content:'';position:absolute;
  width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,25,44,.10) 0%,transparent 70%);
  top:-100px;left:-80px;pointer-events:none;
}
.page-hero::after{
  content:'';position:absolute;
  width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(248,113,113,.08) 0%,transparent 70%);
  bottom:-80px;right:-60px;pointer-events:none;
}
.page-hero h1{
  font-size:30px;font-weight:800;color:var(--navy);
  letter-spacing:-.6px;margin:0 0 6px;line-height:1.1;
  position:relative;
}
.page-hero .subtitle{
  font-size:15px;color:var(--mid);font-weight:500;
  margin:0 0 24px;position:relative;line-height:1.4;
}
/* When KPI cards sit inside the hero, drop their per-card gradient
   so the white cards "float" cleanly on the pink panel. */
.page-hero .kpi-grid{position:relative}
.page-hero .kpi-grid .kpi{
  background:var(--white);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 4px 14px rgba(232,25,44,.08);
}
.page-hero .kpi-grid .kpi:hover{
  box-shadow:0 8px 22px rgba(232,25,44,.16);
}

/* ─── Dashboard-style chart cards (mirrors app/static/dashboard.css —
       intentional duplication so the audit and client dashboard share
       the same visual language). ────────────────────────────────── */
.row{display:grid;gap:12px;margin-bottom:12px;min-width:0}
.row-2{grid-template-columns:1fr 1fr}
.card{background:var(--white);border-radius:12px;padding:16px 18px 14px;box-shadow:var(--shadow-md);border:1px solid var(--border);min-width:0}
.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;gap:8px}
.card-title{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--navy)}
.card-badge{font-size:9px;padding:3px 8px;border-radius:4px;font-weight:600;background:#f1f5f9;color:var(--mid);white-space:nowrap;letter-spacing:.5px}

/* ─── Auto-narrated performance callout (mirrors dashboard's .callout) */
.callout{background:var(--white);border-radius:12px;padding:18px 22px;box-shadow:var(--shadow-md);border:1px solid var(--border);border-left:3px solid var(--navy);margin-bottom:18px;font-size:13px;line-height:1.7;color:var(--mid)}
.callout strong{color:var(--navy);font-weight:700}
.callout .up{color:var(--green);font-weight:700}
.callout .down{color:var(--red-text);font-weight:700}

/* ─── Top-5 ranked-row list — sentiment-tinted, hover-interactive ─── */
.rank-list{display:flex;flex-direction:column;gap:6px;margin-top:4px}
.rank-list .rl-row{
  display:flex;align-items:center;gap:12px;
  padding:10px 12px;border-radius:9px;
  background:var(--soft-2);border:1px solid var(--border);
  transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease,border-color .15s ease;
  cursor:default;
}
.rank-list .rl-row:hover{transform:translateX(3px);box-shadow:var(--shadow-md)}
.rank-list .rl-row .rank{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;flex-shrink:0;
  font-size:11px;font-weight:800;letter-spacing:-.3px;
  background:var(--white);color:var(--mid);border:1px solid var(--border);
}
.rank-list .rl-row .body{flex:1;min-width:0}
.rank-list .rl-row .nm{font-weight:600;color:var(--navy);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-list .rl-row .meta{font-size:11px;color:var(--mid);margin-top:2px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-list .rl-row .right{
  white-space:nowrap;font-size:14px;font-weight:800;letter-spacing:-.3px;
  padding:5px 12px;border-radius:7px;
  background:var(--white);color:var(--navy);border:1px solid var(--border);
}
/* Sentiment tones — applied to the row, cascade into rank + pill */
.rank-list .rl-row.tone-good{background:#f0fdf4;border-color:#bbf7d0}
.rank-list .rl-row.tone-good:hover{background:#dcfce7;border-color:#86efac}
.rank-list .rl-row.tone-good .rank{background:var(--green);color:#fff;border-color:var(--green)}
.rank-list .rl-row.tone-good .right{background:#dcfce7;color:var(--green-text);border-color:#86efac}
.rank-list .rl-row.tone-bad{background:#fef2f2;border-color:#fecaca}
.rank-list .rl-row.tone-bad:hover{background:#fee2e2;border-color:#fca5a5}
.rank-list .rl-row.tone-bad .rank{background:var(--accent);color:#fff;border-color:var(--accent)}
.rank-list .rl-row.tone-bad .right{background:#fee2e2;color:var(--red-text);border-color:#fca5a5}
.rank-list .empty{padding:18px 2px;text-align:center;color:var(--mid);font-size:12px}

/* ─── KPI cards (10-up grid, centered, soft peach gradient) ───── */
.kpi-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:20px}
.kpi-grid .kpi{
  background:linear-gradient(140deg,#fff5f6 0%,#ffeae8 100%);
  border-radius:16px;padding:22px 18px 20px;
  box-shadow:0 2px 10px rgba(232,25,44,.05);
  border:1px solid rgba(232,25,44,.08);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
  position:relative;overflow:hidden;cursor:default;
  text-align:center;
}
.kpi-grid .kpi:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 22px rgba(232,25,44,.12);
  border-color:rgba(232,25,44,.20);
}
.kpi .head{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:10px}
.kpi .icon{
  font-size:20px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;
  background:rgba(232,25,44,.10);
  transition:transform .2s ease,background-color .2s ease;
}
.kpi-grid .kpi:hover .icon{transform:scale(1.08);background:rgba(232,25,44,.15)}
.kpi .label{font-size:11px;color:var(--mid);font-weight:700;text-transform:uppercase;letter-spacing:.7px}
.kpi .value{font-size:28px;font-weight:800;color:var(--navy);line-height:1.05;letter-spacing:-.6px;margin-top:2px}
.kpi .sub{font-size:10px;color:var(--light);margin-top:6px;font-weight:500;letter-spacing:.2px}

/* ─── Benchmark gauges — SVG arcs in a soft-tinted panel ───────────── */
.bench-panel{
  background:linear-gradient(135deg,#fee4e6 0%,#fef0ec 50%,#fff5f6 100%);
  border-radius:18px;padding:26px 28px 24px;margin-bottom:22px;
  border:1px solid rgba(232,25,44,.10);
  box-shadow:0 2px 14px rgba(232,25,44,.06);
}
.bench-panel h3{font-size:16px;font-weight:700;color:var(--navy);text-align:center;margin-bottom:24px;letter-spacing:-.2px}
.bench-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.bench-gauge{text-align:center}
.bench-svg{width:100%;max-width:160px;height:auto;display:block;margin:0 auto}
.bench-label{font-size:13px;font-weight:700;color:var(--navy);margin-top:4px;letter-spacing:.2px}
.bench-vs{font-size:10px;color:var(--mid);margin-top:3px}

/* ─── Ranked list cards (4 cards across the bottom of Dashboard) ─────
   Each card carries a sentiment gradient that telegraphs its category
   before the user reads a word: warn=orange, bad=red, good=green,
   emerge=blue. Mirrors the SellerSynapse pattern. */
.ranked-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
.ranked-card{
  border-radius:18px;padding:24px 26px;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.06);
  background:var(--white);
}
.ranked-card .head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:12px}
.ranked-card h3{font-size:18px;font-weight:800;color:var(--navy);letter-spacing:-.3px}
.ranked-card .tag{
  font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;
  padding:5px 12px;border-radius:999px;
  background:rgba(255,255,255,.55);color:var(--navy);
  white-space:nowrap;
}
/* Sentiment-tinted gradients per category */
.ranked-card.warn{background:linear-gradient(135deg,#ffedd5 0%,#fed7aa 50%,#fdba74 100%);border-color:#fdba74}
.ranked-card.bad {background:linear-gradient(135deg,#fee2e2 0%,#fecaca 50%,#fca5a5 100%);border-color:#fca5a5}
.ranked-card.good{background:linear-gradient(135deg,#dcfce7 0%,#bbf7d0 50%,#86efac 100%);border-color:#86efac}
.ranked-card.emerge{background:linear-gradient(135deg,#dbeafe 0%,#bfdbfe 50%,#93c5fd 100%);border-color:#93c5fd}

/* Rows inside — translucent white tile with sentiment-colored result */
.ranked-row{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:rgba(255,255,255,.65);
  border-radius:11px;padding:13px 16px;margin-bottom:8px;
  font-size:12px;
  transition:transform .15s ease,background .15s ease,box-shadow .15s ease;
}
.ranked-row:last-child{margin-bottom:0}
.ranked-row:hover{
  transform:translateX(3px);
  background:rgba(255,255,255,.92);
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.ranked-row .left{flex:1;min-width:0}
.ranked-row .name{font-weight:700;color:var(--navy);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.1px}
.ranked-row .meta{font-size:11px;color:var(--mid);margin-top:3px;font-weight:500}
.ranked-row .right{
  text-align:right;white-space:nowrap;
  font-size:18px;font-weight:800;letter-spacing:-.3px;
  color:var(--navy);
}
.ranked-card.warn  .ranked-row .right{color:#9a3412}
.ranked-card.bad   .ranked-row .right{color:#9f1239}
.ranked-card.good  .ranked-row .right{color:#166534}
.ranked-card.emerge .ranked-row .right{color:#1e40af}
.ranked-row .right .meta{font-size:11px;font-weight:500;color:var(--mid);margin-top:3px;text-align:right}
.ranked-card .empty-msg{
  background:rgba(255,255,255,.6);border-radius:11px;
  padding:18px;text-align:center;color:var(--mid);font-size:12px;font-weight:500;
}

/* ─── Tables ───────────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;margin-top:14px;background:var(--white);border-radius:14px;border:1px solid var(--border);-webkit-overflow-scrolling:touch}
table.audit-table{width:100%;border-collapse:collapse;font-size:12px}
.audit-table thead{background:#fafafa}
.audit-table th{text-align:left;padding:14px 16px;font-size:10px;font-weight:700;color:var(--mid);text-transform:uppercase;letter-spacing:.7px;border-bottom:1px solid var(--border);white-space:nowrap;cursor:default}
.audit-table th.num{text-align:right}
.audit-table td{padding:13px 16px;border-bottom:1px solid #f1f5f9;font-size:13px;white-space:nowrap;color:var(--navy)}
.audit-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.audit-table tbody tr:nth-child(even){background:#fafafa}
.audit-table tbody tr:hover{background:#fef2f2}
.audit-table .pill{display:inline-block;font-size:10px;font-weight:700;padding:3px 10px;border-radius:999px;letter-spacing:.2px;line-height:1.5}
.pill-good{background:var(--green-bg);color:var(--green-text)}
.pill-amber{background:var(--amber-bg);color:var(--amber-text)}
.pill-poor{background:var(--red-bg);color:var(--red-text)}
.pill-mute{background:#f1f5f9;color:var(--mid)}
/* Match-type variants — distinct hue per type, all on the soft-tint
   side so the table doesn't feel saturated. */
.pill-mt{background:#ede9fe;color:#5b21b6}
.pill-mt-auto{background:#fef3c7;color:#854d0e}
.pill-mt-exact{background:#ede9fe;color:#5b21b6}
.pill-mt-phrase{background:var(--green-bg);color:var(--green-text)}
.pill-mt-broad{background:#dbeafe;color:#1e40af}
.pill-mt-theme{background:#f1f5f9;color:var(--mid)}
.pill-mt-manual{background:#e2e8f0;color:#334155}
/* Cells whose content is a centered metric pill (CTR/CPC/ROAS/CVR/ACoS) */
.audit-table td.cell-pill{text-align:right;font-variant-numeric:tabular-nums;padding:8px 14px}

/* ─── Filter row inside report sections ─────────────────────────────── */
.section-filters{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:14px 18px;margin-bottom:14px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.section-filters select,.section-filters input{padding:7px 11px;font-size:12px;border:1px solid var(--border);border-radius:8px;font-family:inherit;background:var(--white);color:var(--navy)}
.chip-active{background:var(--accent-soft);color:var(--accent);font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px}

/* ─── Section controls (Search & Filter row above tables) ──────────── */
.section-controls{background:var(--white);border:1px solid var(--border);border-radius:14px;padding:14px 18px;margin-bottom:12px;box-shadow:var(--shadow)}
.section-controls .ctl-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.section-controls .ctl-row + .ctl-row{margin-top:10px;padding-top:10px;border-top:1px dashed var(--border)}
.section-controls .ctl-search{flex:1;min-width:220px;padding:8px 12px 8px 34px;border:1px solid var(--border);border-radius:8px;font-size:13px;font-family:inherit;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 10px center;background-size:16px;color:var(--navy)}
.section-controls select,.section-controls input[type=number],.section-controls input[type=text]:not(.ctl-search){padding:7px 11px;font-size:12px;border:1px solid var(--border);border-radius:8px;font-family:inherit;background:var(--white);color:var(--navy)}
.section-controls .ctl-label{font-size:11px;font-weight:700;color:var(--mid);text-transform:uppercase;letter-spacing:.4px;margin-right:4px}
.section-controls .radio-pill{display:inline-flex;background:var(--soft);border-radius:999px;padding:3px;gap:0}
.section-controls .radio-pill label{padding:5px 12px;font-size:11px;font-weight:600;color:var(--mid);border-radius:999px;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:5px}
.section-controls .radio-pill label.on{background:var(--white);color:var(--navy);box-shadow:var(--shadow)}
.section-controls .radio-pill input{display:none}
.section-controls .ctl-clear{background:transparent;border:none;color:var(--mid);font-size:12px;cursor:pointer;font-family:inherit;font-weight:600;padding:6px 8px}
.section-controls .ctl-clear:hover{color:var(--accent)}
.section-controls .ctl-count{font-size:12px;color:var(--mid);font-weight:600}
.section-controls .ctl-count strong{color:var(--navy)}
/* Sort field + direction toggle button */
.section-controls .sort-dir{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:8px;border:1px solid var(--border);
  background:var(--white);color:var(--navy);font-size:14px;font-weight:700;
  cursor:pointer;font-family:inherit;transition:all .15s;
}
.section-controls .sort-dir:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.section-controls .ctl-toggle{
  background:var(--accent-soft);border:1px solid var(--accent-tint);color:var(--accent);
  font-size:11px;font-weight:700;padding:7px 13px;border-radius:8px;
  cursor:pointer;font-family:inherit;letter-spacing:.3px;transition:all .15s;
  display:inline-flex;align-items:center;gap:6px;
}
.section-controls .ctl-toggle:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.section-controls .ctl-toggle .chev{font-size:9px;transition:transform .2s}
.section-controls .ctl-toggle.open .chev{transform:rotate(180deg)}
/* Advanced filter panel */
.section-controls .adv-panel{
  display:none;margin-top:12px;padding-top:12px;border-top:1px dashed var(--border);
}
.section-controls .adv-panel.open{display:block}
.section-controls .adv-group{margin-bottom:12px}
.section-controls .adv-group:last-child{margin-bottom:0}
.section-controls .adv-group-title{
  font-size:10px;font-weight:700;color:var(--light);text-transform:uppercase;
  letter-spacing:1px;margin-bottom:8px;
}
.section-controls .adv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.section-controls .adv-cell{display:flex;flex-direction:column;gap:4px}
.section-controls .adv-cell label{font-size:10px;font-weight:600;color:var(--mid);letter-spacing:.3px}
.section-controls .adv-cell input{width:100%;padding:8px 10px;font-size:12px;border:1px solid var(--border);border-radius:7px;font-family:inherit;background:var(--soft-2);color:var(--navy);transition:all .15s}
.section-controls .adv-cell input:focus{outline:none;border-color:var(--accent);background:var(--white)}

/* ─── Sortable table headers + pagination ───────────────────────────── */
.audit-table th.sortable{cursor:pointer;user-select:none;transition:color .15s}
.audit-table th.sortable:hover{color:var(--accent)}
.audit-table th.sortable .sort-ind{display:inline-block;margin-left:4px;color:var(--light);font-size:9px;line-height:1}
.audit-table th.sortable.asc .sort-ind,.audit-table th.sortable.desc .sort-ind{color:var(--accent)}
.audit-table .empty-row td{text-align:center;padding:30px 14px;color:var(--mid);font-size:13px}
.pagination{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--soft-2);border-top:1px solid var(--border);font-size:12px;color:var(--mid);flex-wrap:wrap;gap:10px}
.pagination .info{font-weight:600}
.pagination .info strong{color:var(--navy)}
.pagination .pager{display:flex;gap:4px;align-items:center}
.pagination button{background:var(--white);border:1px solid var(--border);color:var(--navy);font-size:12px;font-weight:600;padding:6px 11px;border-radius:7px;cursor:pointer;font-family:inherit;min-width:30px;transition:all .15s}
.pagination button:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.pagination button.cur{background:var(--accent);color:#fff;border-color:var(--accent)}
.pagination button:disabled{opacity:.4;cursor:not-allowed}
.pagination .page-size{display:inline-flex;align-items:center;gap:6px}
.pagination .page-size select{padding:5px 8px;font-size:11px;border:1px solid var(--border);border-radius:7px;background:var(--white);color:var(--navy);font-family:inherit}

/* ─── Wasted-spend stat strip ──────────────────────────────────────── */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:14px}
.stat-card{background:var(--white);border-radius:12px;padding:18px 22px;border:1px solid var(--border)}
.stat-card .label{font-size:11px;font-weight:700;color:var(--mid);text-transform:uppercase;letter-spacing:.4px}
.stat-card .value{font-size:24px;font-weight:800;color:var(--navy);margin-top:4px}
.stat-card .accent{color:var(--accent)}

/* ─── Wasted Spend tab — filters / chips / per-campaign expand ───── */
.ws-chips{margin-bottom:12px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ws-chips:empty{display:none}
.ws-chips-label{font-size:10px;font-weight:700;color:var(--mid);text-transform:uppercase;letter-spacing:.5px;margin-right:4px}
.ws-chip{font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-tint)}
.ws-filter-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ws-cell{display:flex;flex-direction:column;gap:4px}
.ws-cell label{font-size:10px;font-weight:600;color:var(--mid);letter-spacing:.3px}
.ws-cell input{width:100%;padding:8px 10px;font-size:12px;border:1px solid var(--border);border-radius:7px;font-family:inherit;background:var(--soft-2);color:var(--navy);transition:all .15s}
.ws-cell input:focus{outline:none;border-color:var(--accent);background:var(--white)}
.ws-filter-row{display:flex;gap:18px;margin-top:10px;flex-wrap:wrap}
.ws-check{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--navy);font-weight:500;cursor:pointer}
.ws-check input{width:14px;height:14px;accent-color:var(--accent)}
/* Summary KPI strip — bad cells get a soft red wash */
.ws-summary-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.ws-stat{background:var(--soft-2);border:1px solid var(--border);border-radius:10px;padding:14px 16px}
.ws-stat .label{font-size:10px;font-weight:700;color:var(--mid);text-transform:uppercase;letter-spacing:.5px}
.ws-stat .value{font-size:22px;font-weight:800;color:var(--navy);margin-top:4px;line-height:1;letter-spacing:-.3px}
.ws-stat-bad{background:#fef2f2;border-color:#fecaca}
.ws-stat-bad .value{color:var(--red-text)}
/* Per-campaign rows with grid columns + expand-on-click */
.ws-camp-head,.ws-camp-summary{display:grid;grid-template-columns:minmax(220px,2fr) repeat(13,minmax(70px,1fr));gap:6px;align-items:center;font-size:12px}
.ws-camp-head{padding:10px 14px;background:var(--soft);border-radius:10px 10px 0 0;font-size:10px;font-weight:700;color:var(--mid);text-transform:uppercase;letter-spacing:.5px}
.ws-camp-row{background:var(--white);border:1px solid var(--border);border-top:none;transition:background .15s}
.ws-camp-row:first-of-type{border-top:1px solid var(--border)}
.ws-camp-row:last-of-type{border-radius:0 0 10px 10px}
.ws-camp-row.open{background:#fef7f7}
.ws-camp-summary{padding:12px 14px;cursor:pointer}
.ws-camp-summary:hover{background:#fafafa}
.ws-camp-row.open .ws-camp-summary{background:#fef2f2}
.ws-col-name{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--navy);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ws-col-num{text-align:right;font-variant-numeric:tabular-nums}
.ws-col-bad{color:var(--accent);font-weight:700}
.ws-bad{color:var(--accent);font-weight:700}
.ws-caret{display:inline-block;width:10px;font-size:10px;color:var(--mid);transition:transform .2s}
.ws-camp-row.open .ws-caret{transform:rotate(90deg);color:var(--accent)}
.ws-camp-nm{overflow:hidden;text-overflow:ellipsis}
.ws-camp-detail{padding:0 14px;background:#fef7f7;border-top:1px solid #fecaca}
.ws-camp-detail:empty{display:none}
.ws-camp-detail{padding-bottom:0}
.ws-kw-block{padding:14px 0}
.ws-kw-head{font-size:13px;font-weight:700;color:var(--navy);margin-bottom:10px}
.ws-kw-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px;background:var(--white);border:1px solid var(--border);border-radius:10px;padding:10px}
.ws-kw-controls .ws-kw-search{flex:1;min-width:180px;padding:7px 11px 7px 30px;font-size:12px;border:1px solid var(--border);border-radius:7px;font-family:inherit;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 8px center;background-size:14px;color:var(--navy)}
.ws-kw-controls select{padding:7px 11px;font-size:12px;border:1px solid var(--border);border-radius:7px;font-family:inherit;background:var(--white);color:var(--navy)}
.ws-kw-table tbody tr{background:#fef7f7}
.ws-kw-table tbody tr:hover{background:#fee2e2}

/* ─── Opportunity cards ────────────────────────────────────────────── */
.opp-card{background:var(--white);border:1px solid var(--border);border-radius:12px;padding:16px 20px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:flex-start;gap:14px;box-shadow:var(--shadow)}
.opp-card .body{flex:1;min-width:0}
.opp-card h4{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:6px}
.opp-card p{font-size:12px;color:var(--mid);margin-bottom:4px;line-height:1.5}
.opp-card .meta{font-size:11px;color:var(--mid);margin-top:8px;display:flex;gap:10px;flex-wrap:wrap}
.opp-card .meta span{display:inline-block}
.opp-card .priority{font-size:10px;font-weight:700;padding:3px 8px;border-radius:6px;text-transform:uppercase}
.opp-card .priority.high{background:var(--red-bg);color:var(--red-text)}
.opp-card .priority.medium{background:var(--amber-bg);color:var(--amber-text)}
.opp-card .priority.low{background:#dbeafe;color:#1e40af}
.opp-card .cta{flex-shrink:0;align-self:flex-start;background:var(--accent);color:#fff;font-size:11px;font-weight:700;padding:8px 16px;border-radius:8px;border:none;cursor:pointer;font-family:inherit;white-space:nowrap}
.opp-card .cta:hover{background:#c8141f}

/* ─── Lead listing cards (Leads tab in admin) ─────────────────────────
   Uses the same hover language as .report-card so the entire admin
   feels like one workspace. The original .lead-card CSS was orphaned
   from a renamed public form — now it's purpose-built for the
   listing. */
.lead-card{
  background:var(--white);border:1px solid var(--border);border-radius:16px;
  padding:22px 26px;margin-bottom:14px;
  box-shadow:0 2px 8px rgba(15,23,42,.04);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  position:relative;overflow:hidden;
}
.lead-card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--accent);
  transform:scaleY(0);transform-origin:top;
  transition:transform .25s ease;
}
.lead-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(232,25,44,.10);
  border-color:rgba(232,25,44,.20);
}
.lead-card:hover::before{transform:scaleY(1)}
.lead-card-head{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:16px;margin-bottom:16px;flex-wrap:wrap;
}
.lead-card-name{
  font-size:18px;font-weight:800;color:var(--navy);
  letter-spacing:-.3px;display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.lead-card-name strong{font-weight:800}
.lead-card-date{
  font-size:11px;color:var(--mid);font-weight:600;
  text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;
}
.lead-card-actions{
  display:inline-flex;align-items:center;gap:12px;
}
.lead-card-body{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;
}
.lead-contact-title{
  font-size:11px;font-weight:700;color:var(--mid);
  text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px;
}
.lead-row{
  display:flex;align-items:center;gap:8px;
  padding:5px 0;font-size:13px;color:var(--navy);font-weight:500;
}
.lead-row a{
  color:var(--navy);text-decoration:none;font-weight:600;
  border-bottom:1px dashed transparent;
  transition:color .15s ease,border-color .15s ease;
}
.lead-row a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.lead-row.red{color:var(--accent);font-weight:700}
.lead-meta{display:flex;flex-direction:column}
.lead-meta .cat-select{
  padding:10px 14px;font-size:13px;font-weight:600;
  border:1px solid var(--border);border-radius:10px;
  background:var(--white);color:var(--navy);
  font-family:inherit;cursor:pointer;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.lead-meta .cat-select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(232,25,44,.08)}

/* ─── Marketing landing (/audit/free) — built to match amzboost.com ───
   Fonts: DM Sans (body) + Plus Jakarta Sans (headings) — exactly what
   amzboost.com uses. Brand red is #E31837 (not #E8192C — that was off).
   Generous sizes; no aggressive clamp() compression. */

body.audit-marketing{
  /* amzboost.com uses #F0F5FA as the soft section background — match it. */
  background:#F0F5FA;
  color:#1e293b;
  min-height:100vh;
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Brand-scoped overrides — only apply within the marketing context. */
body.audit-marketing{
  --brand-red:#E31837;
  --brand-red-hover:#c8132f;
  --brand-red-soft:#FFF0F0;
  --brand-navy:#1e293b;
  --brand-mid:#334155;
  --brand-light:#64748b;
  --brand-soft:#F0F5FA;
  --brand-border:#E8E8E8;
}
body.audit-marketing h1,
body.audit-marketing h2,
body.audit-marketing h3{
  font-family:'Plus Jakarta Sans',-apple-system,sans-serif;
}

/* ─── Top nav ─── */
.marketing-nav{
  background:#fff;border-bottom:1px solid var(--brand-border);
  padding:18px 32px;display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;z-index:50;
}
.marketing-nav .brand{display:inline-flex;align-items:center}
.marketing-nav .logo{height:36px;width:auto}
.marketing-back{
  font-family:'DM Sans',sans-serif;
  font-size:14px;font-weight:500;color:var(--brand-mid);text-decoration:none;
  padding:10px 18px;border:1px solid var(--brand-border);border-radius:999px;
  background:#fff;transition:all .2s ease;white-space:nowrap;
}
.marketing-back:hover{background:var(--brand-red-soft);color:var(--brand-red);border-color:var(--brand-red)}

/* ─── Hero (centered, generous) ─── */
/* Tightened so the upload card lands above the fold on common laptop
   viewports (1366×768, 1440×900). Padding + heading sizes assume the
   conversion CTA needs to be visible without scrolling. */
.marketing-hero{
  max-width:1200px;margin:0 auto;
  padding:48px 32px 80px;
  text-align:center;
}
.hero-title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:56px;font-weight:800;color:var(--brand-navy);
  letter-spacing:-1.4px;line-height:1.1;
  margin:0 auto 18px;max-width:920px;
}
.hero-title .accent{color:var(--brand-red);white-space:nowrap}
.hero-sub{
  font-family:'DM Sans',sans-serif;
  font-size:18px;color:var(--brand-mid);font-weight:400;
  max-width:640px;margin:0 auto 36px;line-height:1.55;
}

/* "What you'll get" heading above the supporting feature cards */
.features-heading{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:14px;font-weight:700;
  color:var(--brand-light);letter-spacing:2px;text-transform:uppercase;
  text-align:center;margin:80px 0 28px;
}

/* ─── 3 benefit cards in a row — supporting "why use this" content ─── */
.feature-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  max-width:1080px;width:100%;margin:0 auto;
}
.feature-card{
  background:#fff;border:1px solid var(--brand-border);border-radius:16px;
  padding:40px 32px;
  text-align:center;
  box-shadow:0 4px 16px rgba(15,23,42,.04);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.feature-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(15,23,42,.08);
  border-color:rgba(227,24,55,.25);
}
.feature-icon{
  width:64px;height:64px;border-radius:16px;
  background:var(--brand-red-soft);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:30px;margin-bottom:20px;
}
.feature-card h3{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:20px;font-weight:700;color:var(--brand-navy);
  margin-bottom:10px;letter-spacing:-.4px;line-height:1.3;
}
.feature-card p{
  font-family:'DM Sans',sans-serif;
  font-size:15px;color:var(--brand-mid);line-height:1.6;
  font-weight:400;margin:0;
}

/* ─── Upload card — the hero CTA ─── */
.upload-card{
  background:#fff;border:1px solid var(--brand-border);border-radius:20px;
  padding:48px 48px 36px;
  max-width:680px;width:100%;margin:0 auto;
  box-shadow:0 8px 32px rgba(15,23,42,.06);
}
.upload-card h2{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:32px;font-weight:800;color:var(--brand-navy);
  margin-bottom:8px;letter-spacing:-.6px;line-height:1.2;text-align:center;
}
.upload-card .upload-sub{
  color:var(--brand-mid);font-size:16px;margin:0 0 20px;
  font-weight:400;text-align:center;line-height:1.55;
}
.how-to-link{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--brand-red);font-size:14px;font-weight:600;
  text-decoration:none;margin:0 auto 28px;
  padding:8px 14px;border-radius:8px;
  transition:background .2s ease;
  /* center the inline-flex element within its block container */
  align-self:center;
}
.how-to-link:hover{background:var(--brand-red-soft)}

/* Wrap to keep the how-to link horizontally centered above the dropzone */
.upload-card{display:flex;flex-direction:column;align-items:center}

.upload-card .file-wrap{
  position:relative;border:2px dashed #cbd5e1;
  border-radius:14px;padding:48px 24px;text-align:center;
  background:var(--brand-soft);transition:all .2s ease;cursor:pointer;
  margin-bottom:16px;width:100%;
}
.upload-card .file-wrap:hover,.upload-card .file-wrap.drag{
  border-color:var(--brand-red);background:var(--brand-red-soft);
}
.upload-card .file-wrap input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.upload-cta-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;pointer-events:none}
.upload-btn{
  background:var(--brand-red);color:#fff;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:16px;font-weight:700;letter-spacing:.2px;
  padding:16px 36px;border-radius:10px;border:none;cursor:pointer;
  display:inline-flex;align-items:center;gap:10px;
  box-shadow:0 6px 20px rgba(227,24,55,.30);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
  pointer-events:auto;
  min-height:52px;
}
.upload-btn::before{content:'⬆';font-size:14px}
.upload-btn:hover{transform:translateY(-2px);background:var(--brand-red-hover);box-shadow:0 10px 28px rgba(227,24,55,.42)}
.upload-card .file-text{font-size:14px;color:var(--brand-light);font-weight:500}
.upload-card .file-name{color:#16a34a;font-weight:700;font-size:14px}
.upload-foot{
  font-size:13px;color:var(--brand-light);margin-top:18px;
  text-align:center;line-height:1.6;font-weight:400;width:100%;
}
.upload-foot .foot-divider{margin:0 8px;opacity:.5}

/* ─── Lead form modal — opens after file selection ─── */
.lead-modal{
  max-width:600px;width:100%;padding:0;overflow:hidden;
  max-height:92vh;display:flex;flex-direction:column;
  border-radius:16px;
}
.lead-banner{
  background:var(--brand-red);color:#fff;padding:18px 28px;
  text-align:center;flex-shrink:0;
}
.lead-banner-title{
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:17px;font-weight:800;letter-spacing:-.2px;
}
.lead-banner-sub{font-size:13px;font-weight:500;opacity:.92;margin-top:4px}
.lead-ready{
  padding:18px 28px;background:var(--brand-soft);
  font-size:14px;color:var(--brand-navy);font-weight:500;line-height:1.5;
  border-bottom:1px solid var(--brand-border);flex-shrink:0;
}
.lead-ready strong{color:#16a34a;font-weight:800}
.lead-modal .lead-form{padding:24px 28px 28px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.lead-modal .lead-form label{
  font-family:'DM Sans',sans-serif;
  font-size:12px;font-weight:700;color:var(--brand-navy);
  text-transform:uppercase;letter-spacing:.4px;
}
.lead-modal .lead-form input,
.lead-modal .lead-form select{
  font-family:'DM Sans',sans-serif;
  font-size:15px;
}
.lead-modal .submit-btn{
  font-family:'Plus Jakarta Sans',sans-serif;
  background:var(--brand-red);font-weight:700;font-size:16px;
  padding:16px 24px;border-radius:10px;
  box-shadow:0 4px 14px rgba(227,24,55,.30);
  transition:all .2s ease;
}
.lead-modal .submit-btn:hover{
  background:var(--brand-red-hover);
  box-shadow:0 8px 22px rgba(227,24,55,.40);
  transform:translateY(-1px);
}

/* ─── Tablet (≤960px) ─── */
@media (max-width:960px){
  .marketing-hero{padding:36px 24px 64px}
  .hero-title{font-size:44px;letter-spacing:-1px;margin-bottom:14px}
  .hero-sub{font-size:17px;margin-bottom:32px}
  .features-heading{margin:64px 0 22px}
  .feature-grid{gap:20px;max-width:760px}
  .feature-card{padding:32px 24px}
  .upload-card{padding:36px 32px 26px}
  .upload-card h2{font-size:26px}
}

/* ─── Phone (≤640px) ─── */
@media (max-width:640px){
  .marketing-nav{padding:14px 18px}
  .marketing-nav .logo{height:30px}
  .marketing-back{font-size:13px;padding:8px 14px}

  .marketing-hero{padding:28px 18px 56px}
  .hero-title{font-size:32px;letter-spacing:-.6px;margin-bottom:12px}
  .hero-sub{font-size:15px;margin-bottom:24px;line-height:1.5}

  .features-heading{font-size:12px;letter-spacing:1.6px;margin:48px 0 18px}
  /* Cards stack horizontally inside (icon left, text right) — short and tappable */
  .feature-grid{grid-template-columns:1fr;gap:14px}
  .feature-card{
    padding:20px 22px;
    display:flex;align-items:center;gap:18px;text-align:left;
  }
  .feature-icon{
    margin:0;flex-shrink:0;
    width:52px;height:52px;border-radius:13px;font-size:24px;
  }
  .feature-card h3{font-size:17px;margin-bottom:4px}
  .feature-card p{font-size:14px;line-height:1.5}

  .upload-card{padding:32px 22px 24px;border-radius:16px}
  .upload-card h2{font-size:24px;letter-spacing:-.4px}
  .upload-card .upload-sub{font-size:15px;margin-bottom:16px}
  .how-to-link{font-size:13px;padding:7px 12px;margin-bottom:20px}
  .upload-card .file-wrap{padding:36px 18px;margin-bottom:14px}
  .upload-btn{font-size:15px;padding:14px 30px;min-height:48px}
  .upload-card .file-text{font-size:13px}
  .upload-foot{font-size:12px;margin-top:14px}
  .upload-foot .foot-divider{display:block;height:0;width:0;overflow:hidden;margin:0}

  /* Modals — full-width on phone, comfortable taps */
  .modal-backdrop{padding:14px;align-items:flex-start;padding-top:32px}
  .lead-modal{max-height:calc(100vh - 64px);border-radius:14px}
  .lead-banner{padding:14px 18px}
  .lead-banner-title{font-size:15px}
  .lead-banner-sub{font-size:12px}
  .lead-ready{padding:14px 18px;font-size:13px}
  .lead-modal .lead-form{padding:18px 18px 22px}
  .lead-form{gap:14px}
  .lead-form .row-2{grid-template-columns:1fr;gap:14px}
  .lead-form input,.lead-form select{font-size:16px;padding:12px 14px;min-height:46px}
  .submit-btn{font-size:15px;padding:14px 20px;min-height:48px}

  #howToModal .modal{padding:24px;max-height:88vh;overflow-y:auto;border-radius:14px}
  #howToModal h3{font-size:18px}
  #howToModal ol{font-size:14px;line-height:1.85;padding-left:22px}

  .rocket-card{padding:28px 22px;max-width:92vw}
  .rocket-title{font-size:18px}
  .rocket-sub{font-size:13px}
  .rocket-meta{font-size:12px}
}

/* ─── Very narrow (≤380px) ─── */
@media (max-width:380px){
  .marketing-back{font-size:12px;padding:6px 12px}
  .hero-title{font-size:30px}
  .hero-sub{font-size:15px}
  .upload-card{padding:24px 18px 20px}
  .upload-card h2{font-size:22px}
}

/* ─── Lead form (legacy public-page card, kept for any other pages) ─ */
.lead-form-card{max-width:560px;margin:40px auto;background:var(--white);border-radius:18px;padding:36px 38px;box-shadow:0 8px 32px rgba(0,0,0,.08)}
.lead-form-card h1{font-size:26px;font-weight:800;color:var(--navy);margin-bottom:8px;text-align:center}
.lead-form-card .lead-sub{color:var(--mid);font-size:14px;text-align:center;margin-bottom:28px;line-height:1.5}
.lead-form{display:grid;gap:14px}
.lead-form .row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.lead-form label{font-size:11px;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.3px;display:block;margin-bottom:6px}
.lead-form label .req{color:var(--accent);margin-left:3px}
.lead-form input,.lead-form select{width:100%;padding:11px 14px;border:1px solid var(--border);border-radius:10px;font-size:14px;font-family:inherit;background:var(--white);color:var(--navy);transition:border-color .15s}
.lead-form input:focus,.lead-form select:focus{outline:none;border-color:var(--accent)}
.lead-form .file-wrap{position:relative;border:2px dashed var(--border);border-radius:12px;padding:24px;text-align:center;background:var(--bg);transition:all .15s;cursor:pointer}
.lead-form .file-wrap:hover{border-color:var(--accent);background:var(--accent-soft)}
.lead-form .file-wrap input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.lead-form .file-wrap .file-text{font-size:13px;color:var(--mid)}
.lead-form .file-wrap .file-name{color:var(--navy);font-weight:600}
.submit-btn{background:var(--accent);color:#fff;font-size:15px;font-weight:700;padding:14px 24px;border-radius:12px;border:none;cursor:pointer;font-family:inherit;transition:background .15s;margin-top:8px}
.submit-btn:hover{background:#c8141f}
.submit-btn:disabled{background:var(--mid);cursor:wait}

/* ─── "Locked" overlay used in the public report viewer ─────────────── */
.locked{position:relative;border-radius:12px;overflow:hidden;background:var(--white);border:1px dashed var(--accent);padding:28px;text-align:center;margin:14px 0}
.locked .lock-icon{font-size:30px;margin-bottom:10px}
.locked h3{font-size:16px;font-weight:700;color:var(--navy);margin-bottom:6px}
.locked p{font-size:13px;color:var(--mid);max-width:420px;margin:0 auto 14px;line-height:1.5}
.locked .blur-preview{filter:blur(6px);pointer-events:none;font-size:12px;color:var(--light);margin:10px 0}
.locked .cta-large{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;font-size:14px;font-weight:700;padding:12px 22px;border-radius:10px;text-decoration:none;transition:background .15s}
.locked .cta-large:hover{background:#c8141f}

.muted{color:var(--mid);font-size:12px}
.spacer{height:24px}

/* ─── Modal ─────────────────────────────────────────────────────────── */
.modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.5);display:flex;align-items:center;justify-content:center;z-index:200;padding:20px}
.modal{background:var(--white);border-radius:14px;padding:28px;max-width:520px;width:100%;box-shadow:0 20px 50px rgba(0,0,0,.25)}
.modal h3{font-size:18px;font-weight:700;margin-bottom:6px}
.modal .modal-sub{color:var(--mid);font-size:13px;margin-bottom:20px}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}

/* ─── Prospect view (single-page summary at /audit/r/<token>) ────────
   Public face of the audit. Intentionally separate styling from the
   admin shell — no side-nav, no tabs, simpler typography. The user
   sees the headline waste figure, benchmarks, and a strong call-to-
   action; deep data lives behind a free-strategy-call CTA. */
.prospect-body{background:#fbfafc;min-height:100vh}
.prospect-header{background:var(--white);border-bottom:1px solid var(--border);padding:14px 24px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 1px 3px rgba(0,0,0,.04);position:sticky;top:0;z-index:50}
.prospect-header > a{display:inline-flex;align-items:center}
.prospect-logo{height:36px}
.prospect-book-cta{
  background:var(--accent);color:#fff;
  font-size:15px;font-weight:700;letter-spacing:.2px;
  padding:13px 24px;border-radius:999px;border:none;cursor:pointer;
  font-family:inherit;
  display:inline-flex;align-items:center;gap:8px;
  box-shadow:0 6px 18px rgba(232,25,44,.32);
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.prospect-book-cta svg{width:16px;height:16px}
.prospect-book-cta:hover{transform:translateY(-1px);background:#c8141f;box-shadow:0 10px 24px rgba(232,25,44,.42)}

/* Per-rank-card CTAs in prospect mode — centered footer with a small
   message above a chip-style button. Matches the SellerSynapse layout
   where the badge stays plain at the top and the call-to-action sits
   neatly under the rows. */
.rank-cta-footer{
  margin-top:16px;padding-top:14px;
  text-align:center;
  border-top:1px dashed rgba(232,25,44,.18);
}
.rank-cta-msg{
  font-size:12px;color:var(--mid);font-weight:600;
  margin-bottom:10px;letter-spacing:-.05px;
}
.ranked-card.warn   .rank-cta-msg{color:#9a3412}
.ranked-card.bad    .rank-cta-msg{color:#9f1239}
.ranked-card.good   .rank-cta-msg{color:#166534}
.ranked-card.emerge .rank-cta-msg{color:#1e40af}
/* Sentiment-tinted dashed separator above each footer */
.ranked-card.warn   .rank-cta-footer{border-top-color:rgba(154,52,18,.20)}
.ranked-card.bad    .rank-cta-footer{border-top-color:rgba(159,18,57,.20)}
.ranked-card.good   .rank-cta-footer{border-top-color:rgba(22,101,52,.20)}
.ranked-card.emerge .rank-cta-footer{border-top-color:rgba(30,64,175,.20)}
.prospect-rank-cta{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 22px;
  background:var(--accent);color:#fff;
  font-size:13px;font-weight:700;letter-spacing:.2px;
  border:none;border-radius:10px;cursor:pointer;
  font-family:inherit;
  box-shadow:0 3px 10px rgba(232,25,44,.20);
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.prospect-rank-cta:hover{transform:translateY(-2px);box-shadow:0 7px 16px rgba(232,25,44,.30)}
.prospect-rank-cta.cta-warn{background:#f97316;box-shadow:0 3px 10px rgba(249,115,22,.20)}
.prospect-rank-cta.cta-warn:hover{background:#ea580c;box-shadow:0 7px 16px rgba(249,115,22,.35)}
.prospect-rank-cta.cta-bad{background:var(--accent);box-shadow:0 3px 10px rgba(232,25,44,.20)}
.prospect-rank-cta.cta-good{background:#16a34a;box-shadow:0 3px 10px rgba(22,163,74,.20)}
.prospect-rank-cta.cta-good:hover{background:#15803d;box-shadow:0 7px 16px rgba(22,163,74,.35)}
.prospect-rank-cta.cta-emerge{background:#2563eb;box-shadow:0 3px 10px rgba(37,99,235,.20)}
.prospect-rank-cta.cta-emerge:hover{background:#1d4ed8;box-shadow:0 7px 16px rgba(37,99,235,.35)}

/* Locked / blurred unlock cards — Advanced Keyword Analysis +
   Competitor Intelligence at the bottom of the prospect Dashboard. */
.prospect-locked-card{
  position:relative;
  background:var(--white);
  border:1.5px dashed var(--accent);
  border-radius:14px;
  padding:22px 24px;
  min-height:200px;
  overflow:hidden;
}
.prospect-locked-blur{
  filter:blur(6px);opacity:.5;
  pointer-events:none;user-select:none;
}
.prospect-locked-blur .card-title{
  font-size:11px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;color:var(--navy);
}
.prospect-locked-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,.92) 60%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:24px;gap:8px;
}
.prospect-locked-icon{font-size:32px}
.prospect-locked-overlay h3{font-size:16px;font-weight:800;color:var(--navy);letter-spacing:-.2px}
.prospect-locked-overlay p{font-size:13px;color:var(--mid);max-width:280px;line-height:1.5;font-weight:500;margin:0 0 6px}
.prospect-locked-cta{margin-top:6px}

/* ─── Unlock bar — bottom of each prospect tab's preview ─────────── */
.prospect-unlock-bar{
  background:linear-gradient(135deg,#fef0f1 0%,#fee4e6 100%);
  border:1.5px dashed var(--accent);
  border-radius:18px;
  padding:36px 28px 32px;
  margin:24px 0 8px;
  text-align:center;
  box-shadow:0 6px 24px rgba(232,25,44,.08);
}
.prospect-unlock-icon{font-size:36px;margin-bottom:8px;line-height:1}
.prospect-unlock-title{
  font-size:22px;font-weight:800;color:var(--navy);
  letter-spacing:-.4px;margin-bottom:8px;
}
.prospect-unlock-sub{
  font-size:14px;color:var(--mid);font-weight:500;
  max-width:620px;margin:0 auto 20px;line-height:1.55;
}
.prospect-unlock-cta{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent);color:#fff;
  font-size:15px;font-weight:700;letter-spacing:.2px;
  padding:14px 28px;border:none;border-radius:12px;cursor:pointer;
  font-family:inherit;
  box-shadow:0 6px 18px rgba(232,25,44,.30);
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.prospect-unlock-cta:hover{transform:translateY(-2px);background:#c8141f;box-shadow:0 10px 24px rgba(232,25,44,.42)}

/* Preview-table footer — small "Showing N of M" caption */
.prospect-preview-foot{
  text-align:center;
  font-size:12px;color:var(--mid);font-weight:600;
  padding:14px 16px;background:var(--soft-2);
  border-top:1px solid var(--border);
  letter-spacing:.2px;
}
.prospect-main{max-width:1100px;margin:0 auto;padding:32px 24px 60px}

/* Constrains the simple summary to a readable column width */
.prospect-page{max-width:1100px;margin:0 auto;padding:24px 24px 60px}

/* Hero block — title + subtitle + category line */
.prospect-hero-block{text-align:center;margin-bottom:28px}
.prospect-h1{font-size:32px;font-weight:800;color:var(--navy);letter-spacing:-.6px;margin-bottom:8px}
.prospect-sub{font-size:15px;color:var(--mid);font-weight:500;margin-bottom:14px}
.prospect-cat-row{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--mid);background:var(--soft);padding:7px 16px;border-radius:999px}
.prospect-cat-label{font-weight:600}
.prospect-cat-value{font-weight:700;color:var(--navy)}
.prospect-cat-sep{color:var(--light)}
.prospect-cat-bench{color:var(--mid)}

/* 4-up KPI strip — peach gradient cards, centered text */
.prospect-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
.prospect-kpi{
  background:linear-gradient(135deg,#fff5f6 0%,#fee4e6 100%);
  border:1px solid rgba(232,25,44,.10);
  border-radius:16px;padding:22px 20px;
  box-shadow:0 2px 10px rgba(232,25,44,.05);
  text-align:center;
  transition:transform .2s ease,box-shadow .2s ease;
}
.prospect-kpi:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(232,25,44,.10)}
.prospect-kpi .kpi-i{font-size:22px;margin-bottom:6px}
.prospect-kpi .kpi-v{font-size:30px;font-weight:800;color:var(--navy);letter-spacing:-.6px;line-height:1.05}
.prospect-kpi .kpi-l{font-size:11px;color:var(--mid);font-weight:700;text-transform:uppercase;letter-spacing:.6px;margin-top:6px}
.prospect-kpi .kpi-s{font-size:11px;color:var(--light);margin-top:3px;font-weight:500}

/* URGENT waste alert — center-aligned, red theme, dual CTA */
.prospect-alert{
  background:linear-gradient(180deg,#fef2f2 0%,#fee2e2 100%);
  border:1.5px solid #fca5a5;border-radius:18px;
  padding:30px 32px;margin-bottom:24px;
  text-align:center;
  box-shadow:0 4px 16px rgba(220,38,38,.08);
  position:relative;overflow:hidden;
}
.prospect-alert::before{
  content:'';position:absolute;left:-40px;top:-40px;
  width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,25,44,.10) 0%,transparent 70%);
  pointer-events:none;
}
.prospect-alert-icon{font-size:36px;margin-bottom:6px;animation:bell-shake 1.4s ease-in-out infinite}
@keyframes bell-shake{0%,100%{transform:rotate(0deg)}10%,30%{transform:rotate(-8deg)}20%,40%{transform:rotate(8deg)}50%{transform:rotate(0)}}
.prospect-alert-headline{font-size:26px;font-weight:800;color:var(--accent);letter-spacing:-.5px;margin-bottom:10px;position:relative}
.prospect-alert-sub{font-size:15px;color:var(--navy);font-weight:500;margin-bottom:20px;line-height:1.55;max-width:600px;margin-left:auto;margin-right:auto;position:relative}
.prospect-alert-sub strong{color:var(--accent);font-weight:700}
.prospect-alert-ctas{display:inline-flex;gap:10px;flex-wrap:wrap;justify-content:center;position:relative}

.btn-stop-waste{
  background:var(--accent);color:#fff;
  font-size:14px;font-weight:700;letter-spacing:.2px;
  padding:13px 22px;border-radius:10px;border:none;cursor:pointer;
  font-family:inherit;
  display:inline-flex;align-items:center;gap:8px;
  box-shadow:0 4px 14px rgba(232,25,44,.30);
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
}
.btn-stop-waste:hover{transform:translateY(-2px);background:#c8141f;box-shadow:0 8px 22px rgba(232,25,44,.40)}
.btn-stop-waste.large{padding:16px 28px;font-size:15px}
.btn-see-details{
  background:var(--white);color:var(--navy);
  font-size:14px;font-weight:600;
  padding:13px 22px;border-radius:10px;
  border:1.5px solid var(--border);cursor:pointer;font-family:inherit;
  transition:border-color .15s ease,color .15s ease;
}
.btn-see-details:hover{border-color:var(--accent);color:var(--accent)}

/* Benchmark gauges panel — same SVG svgGauge as admin, with extra
   "How to optimize" pill under each gauge */
.prospect-bench{
  background:linear-gradient(135deg,#fee4e6 0%,#fef0ec 50%,#fff5f6 100%);
  border:1px solid rgba(232,25,44,.10);
  border-radius:18px;padding:32px 28px 24px;margin-bottom:24px;
}
.prospect-bench h2{font-size:20px;font-weight:800;color:var(--navy);letter-spacing:-.4px;text-align:center;margin-bottom:24px}
.prospect-bench .bench-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}
.prospect-bench .bench-gauge{text-align:center}
.prospect-bench .bench-svg{width:100%;max-width:160px;height:auto;margin:0 auto;display:block}
.prospect-bench .bench-label{font-size:13px;font-weight:700;color:var(--navy);margin-top:4px}
.prospect-bench .bench-vs{font-size:11px;color:var(--mid);margin-top:3px;margin-bottom:8px}
.prospect-optimize-btn{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(255,255,255,.7);
  color:#0ea5e9;border:1px solid rgba(14,165,233,.30);
  font-size:11px;font-weight:700;
  padding:6px 12px;border-radius:999px;cursor:pointer;font-family:inherit;
  transition:background .15s ease,color .15s ease;
}
.prospect-optimize-btn:hover{background:#0ea5e9;color:#fff;border-color:#0ea5e9}
.bench-legend{
  display:flex;justify-content:center;gap:18px;flex-wrap:wrap;
  margin-top:18px;padding-top:18px;border-top:1px solid rgba(232,25,44,.12);
  font-size:11px;color:var(--mid);font-weight:600;
}
.legend-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:middle}
.legend-good{background:#15803d}
.legend-warn{background:#ca8a04}
.legend-bad{background:var(--accent)}

/* Bottom toolbar — Advanced View (outline) + Book Analysis Call (red).
   Sits centered after the gauges, before the AI sidebar / page foot. */
.prospect-bottom-toolbar{
  display:flex;justify-content:center;gap:14px;
  margin-top:28px;padding:20px;
  flex-wrap:wrap;
}

/* Legacy bottom-CTA (kept in case anything else still references it) */
.prospect-bottom-cta{
  background:linear-gradient(135deg,#1e293b 0%,#0f172a 100%);
  color:#fff;border-radius:18px;padding:40px 36px;text-align:center;
  box-shadow:0 8px 32px rgba(15,23,42,.20);
}
.prospect-bottom-cta h2{font-size:24px;font-weight:800;letter-spacing:-.4px;margin-bottom:10px;color:#fff}
.prospect-bottom-cta p{font-size:14px;color:#cbd5e1;line-height:1.6;max-width:560px;margin:0 auto 20px;font-weight:500}

/* Side-nav "← Simple View" link in the multi-tab prospect view */
.side-nav .nav-simple{
  margin-top:auto;
  font-size:13px;color:var(--accent);font-weight:700;
  padding-top:14px;border-top:1px dashed rgba(232,25,44,.20);
  border-radius:0;
}
.side-nav .nav-simple:hover{background:var(--accent-soft);color:var(--accent);transform:none;border-radius:10px;border-top-color:transparent}
.side-nav{display:flex;flex-direction:column}

/* Book-a-Call modal — rocket loader → calendar embed */
.prospect-modal-bg{position:fixed;inset:0;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;z-index:300;padding:20px;backdrop-filter:blur(2px)}
.prospect-modal{background:var(--white);border-radius:18px;width:100%;max-width:680px;box-shadow:0 30px 80px rgba(0,0,0,.30);overflow:hidden}
.prospect-modal-head{display:flex;justify-content:space-between;align-items:center;padding:20px 26px;border-bottom:1px solid var(--border)}
.prospect-modal-head h3{font-size:17px;font-weight:800;color:var(--navy)}
.prospect-modal-close{background:none;border:none;font-size:18px;color:var(--mid);cursor:pointer;padding:4px 10px;border-radius:8px;font-family:inherit}
.prospect-modal-close:hover{background:var(--soft);color:var(--navy)}
.prospect-modal-body{padding:20px 26px}
/* Fullscreen rocket overlay shown on /audit/free after submit while
   we crunch the report. Matches the modal-side .rocket-loader visual
   language but covers the whole page for focus. */
.rocket-overlay{
  position:fixed;inset:0;z-index:500;
  background:rgba(255,245,246,.96);
  backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  padding:20px;
}
.rocket-card{
  background:var(--white);border-radius:20px;
  padding:48px 36px 40px;text-align:center;
  max-width:480px;width:100%;
  box-shadow:0 20px 60px rgba(232,25,44,.15);
  border:1px solid rgba(232,25,44,.08);
}
.rocket-card .rocket{font-size:64px;margin-bottom:14px;animation:rocket-bob 1.6s ease-in-out infinite}
.rocket-card .rocket-title{color:var(--accent);font-weight:800;font-size:24px;margin-bottom:10px;letter-spacing:-.4px}
.rocket-card .rocket-sub{color:var(--navy);font-weight:600;font-size:15px;margin-bottom:6px}
.rocket-card .rocket-meta{color:var(--mid);font-size:13px;margin-bottom:22px;line-height:1.55}
.rocket-card .rocket-meta .accent{color:var(--accent);font-weight:700}
.rocket-card .rocket-bar{height:8px;background:#fee2e2;border-radius:99px;overflow:hidden;margin:0 auto 12px;max-width:380px}
.rocket-card .rocket-bar-fill{height:100%;width:8%;background:linear-gradient(90deg,#fb7185,#dc2626);border-radius:99px;transition:width .6s ease-out}
.rocket-card .rocket-finding{color:var(--accent);font-size:13px;font-weight:700;letter-spacing:.4px}

.rocket-loader{padding:30px 20px 20px;text-align:center}
.rocket-loader .rocket{font-size:60px;margin-bottom:12px;animation:rocket-bob 1.6s ease-in-out infinite}
@keyframes rocket-bob{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-8px) rotate(6deg)}}
.rocket-title{color:var(--accent);font-weight:700;font-size:18px;margin-bottom:8px}
.rocket-sub{color:var(--navy);font-weight:600;font-size:14px;margin-bottom:6px}
.rocket-meta{color:var(--mid);font-size:12px;max-width:360px;margin:0 auto 18px;line-height:1.5}
.rocket-bar{height:6px;background:#fee2e2;border-radius:99px;overflow:hidden;margin:0 auto 10px;max-width:400px}
.rocket-bar-fill{height:100%;width:30%;background:var(--accent);border-radius:99px;animation:rocket-bar 1.5s ease-in-out infinite}
@keyframes rocket-bar{0%{margin-left:-30%}100%{margin-left:100%}}
.rocket-finding{color:var(--mid);font-size:11px}

@media (max-width:900px){
  .prospect-kpi-grid{grid-template-columns:repeat(2,1fr)}
  .prospect-bench .bench-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:600px){
  .prospect-h1{font-size:24px}
  .prospect-alert-headline{font-size:20px}
  .prospect-bench .bench-grid{grid-template-columns:repeat(2,1fr)}
  .prospect-main{padding:20px 14px 40px}
}

/* ─── Responsive ────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .kpi-grid{grid-template-columns:repeat(3,1fr)}
  .ranked-grid{grid-template-columns:1fr}
  .row-2{grid-template-columns:1fr}
  .bench-grid{grid-template-columns:repeat(3,1fr);gap:14px}
  .section-controls .adv-grid{grid-template-columns:repeat(2,1fr)}
  .ws-filter-grid{grid-template-columns:repeat(2,1fr)}
  .ws-summary-grid{grid-template-columns:repeat(2,1fr)}
  /* On narrow screens the 14-column grid won't fit — let the row scroll */
  .ws-camp-head,.ws-camp-summary{grid-template-columns:minmax(220px,1fr) repeat(13,80px);overflow-x:auto}
  .report-shell{grid-template-columns:1fr}
  .side-nav{display:flex;flex-wrap:wrap;border-right:none;border-bottom:1px solid var(--border);padding:8px;gap:4px}
  .side-nav .nav-item{padding:10px 14px;font-size:13px;border-radius:8px}
  .side-nav .nav-item.active{box-shadow:inset 0 -3px 0 var(--accent)}
}
@media (max-width:768px){
  .lead-card-body{grid-template-columns:1fr}
}
@media (max-width:700px){
  .header{padding:0 14px;height:54px}
  .top-nav{display:none}
  .page{padding:14px}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .kpi .value{font-size:18px}
  .lead-form-card{padding:24px 20px;margin:20px 12px}
  .lead-form .row-2{grid-template-columns:1fr}
}