/* ============================================================
   ARBIQOR LENS — report + tool components.
   Rides on /arbiqor/arbiqor.css (base tokens, layout, nav, buttons).
   Only the Lens-specific pieces live here: hero mock, insight cards,
   gap bars, ranking table, fix list. Reused by the landing sample
   AND the dashboard report view — one source of truth.
   ============================================================ */

/* ---------- Lens accent theme ----------
   Same layout as Arbiqor; only the accent swaps. lens.css loads AFTER
   arbiqor.css, so this :root wins and re-themes every var(--accent) use
   to cyan — clarity / optics / intelligence, max contrast vs Arbiqor amber.
   (Dial to #06b6d4 if it reads too neon.) */
:root{
  --accent:      #22d3ee;
  --accent-dark: #0891b2;
  --accent-ink:  #04222b;   /* dark text on the bright cyan fill */
  --accent-rgb:  34,211,238;
}

/* secondary data hue for "competitor / median" bars (accent stays "you") */
:root{ --lens-them:#5b6b86; --lens-them-soft:rgba(91,107,134,.18); --lens-win:#22c55e; --lens-lose:#ef4444; }

/* ---------- hero mock (mini gap snapshot) ---------- */
.lens-mock{background:var(--bg-2);border:1px solid var(--border-2);border-radius:0;box-shadow:var(--shadow-lg);overflow:hidden}
.lens-mock .lm-bar{display:flex;align-items:center;gap:8px;padding:11px 16px;border-bottom:1px solid var(--border);background:var(--bg-3)}
.lens-mock .lm-bar .tag{margin-left:auto;font-size:.66rem;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--accent);background:rgba(var(--accent-rgb),.12);padding:3px 9px}
.lens-mock .lm-body{padding:18px}
.lens-mock .lm-row{display:grid;grid-template-columns:88px 1fr 52px;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--border)}
.lens-mock .lm-row:last-child{border-bottom:0}
.lens-mock .lm-k{font-size:.78rem;color:var(--text-sub);font-weight:600}
.lens-mock .lm-track{position:relative;height:8px;background:var(--bg-inset);border:1px solid var(--border)}
.lens-mock .lm-fill{position:absolute;inset:0 auto 0 0;height:100%}
.lens-mock .lm-fill.you{background:var(--accent)}
.lens-mock .lm-fill.them{background:var(--lens-them)}
.lens-mock .lm-v{font-family:var(--font-num);font-size:.8rem;font-weight:800;text-align:right}
.lens-mock .lm-v.win{color:var(--lens-win)} .lens-mock .lm-v.lose{color:var(--lens-lose)}
.lens-mock .lm-foot{display:flex;align-items:center;gap:9px;margin-top:6px;padding:11px 13px;background:var(--bg-3);border:1px solid var(--border);font-size:.77rem;color:var(--text-sub)}
.lens-mock .lm-foot b{color:var(--text);font-weight:800}

/* ---------- report wrapper ---------- */
.lens-report{display:flex;flex-direction:column;gap:34px}
.lens-report .lr-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 16px}
.lens-report .lr-head .score{font-family:var(--font-num);font-size:2.4rem;font-weight:800;color:var(--accent);line-height:1}
.lens-report .lr-head .lr-sub{font-size:.92rem;color:var(--text-muted)}
.lens-block-title{font-size:.74rem;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--text-muted);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.lens-block-title::before{content:"";width:16px;height:1px;background:var(--accent)}

/* ---------- insight cards (the "cool insights") ---------- */
.lens-insights{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.insight-card{position:relative;background:var(--bg-2);border:1px solid var(--border);border-left:3px solid var(--accent);padding:20px;box-shadow:var(--shadow-card)}
.insight-card.is-threat{border-left-color:var(--lens-lose)}
.insight-card.is-win{border-left-color:var(--lens-win)}
.insight-card.is-gap{border-left-color:var(--accent)}
.insight-card .ic-tag{font-size:.66rem;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--text-muted);margin-bottom:9px;display:block}
.insight-card.is-threat .ic-tag{color:var(--lens-lose)}
.insight-card.is-win .ic-tag{color:var(--lens-win)}
.insight-card.is-gap .ic-tag{color:var(--accent)}
.insight-card h4{font-size:1rem;margin-bottom:7px;line-height:1.25}
.insight-card p{font-size:.86rem;line-height:1.55;color:var(--text-sub)}
.insight-card p b{color:var(--text)}
@media(max-width:860px){.lens-insights{grid-template-columns:1fr}}

/* ---------- gap bars (you vs median, per dimension) ---------- */
.gap-table{border:1px solid var(--border);background:var(--bg-2);box-shadow:var(--shadow-card)}
.gap-row{display:grid;grid-template-columns:150px 1fr auto;align-items:center;gap:16px;padding:15px 20px;border-bottom:1px solid var(--border)}
.gap-row:last-child{border-bottom:0}
.gap-label{font-size:.9rem;font-weight:600;color:var(--text)}
.gap-label small{display:block;font-size:.72rem;font-weight:500;color:var(--text-muted);margin-top:2px}
.gap-bars{display:flex;flex-direction:column;gap:6px;min-width:0}
.gap-bar{position:relative;height:18px;background:var(--bg-inset);border:1px solid var(--border)}
.gap-bar i{position:absolute;inset:0 auto 0 0;height:100%;font-style:normal}
.gap-bar.you i{background:var(--accent)}
.gap-bar.them i{background:var(--lens-them)}
.gap-bar span{position:absolute;right:7px;top:50%;transform:translateY(-50%);font-family:var(--font-num);font-size:.7rem;font-weight:800;color:var(--text);mix-blend-mode:difference}
.gap-bar em{position:absolute;left:7px;top:50%;transform:translateY(-50%);font-style:normal;font-size:.62rem;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--text-muted)}
.gap-verdict{font-family:var(--font-num);font-size:.82rem;font-weight:800;white-space:nowrap;text-align:right}
.gap-verdict.win{color:var(--lens-win)} .gap-verdict.lose{color:var(--lens-lose)} .gap-verdict.tie{color:var(--text-muted)}
@media(max-width:680px){.gap-row{grid-template-columns:1fr;gap:8px}.gap-verdict{text-align:left}}

/* ---------- ranking snapshot ---------- */
.rank-table{width:100%;border-collapse:collapse;border:1px solid var(--border);background:var(--bg-2);box-shadow:var(--shadow-card)}
.rank-table th,.rank-table td{padding:13px 16px;text-align:left;font-size:.88rem;border-bottom:1px solid var(--border)}
.rank-table thead th{background:var(--bg-3);font-size:.72rem;letter-spacing:.6px;text-transform:uppercase;color:var(--text-muted);font-weight:700}
.rank-table tbody tr:last-child td{border-bottom:0}
.rank-table .num{font-family:var(--font-num);font-weight:800}
.rank-table .you-row{background:rgba(var(--accent-rgb),.06)}
.rank-table .you-row td:first-child{color:var(--accent);font-weight:700}
.rank-badge{display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.4px;text-transform:uppercase;padding:2px 7px;border:1px solid var(--border-2);color:var(--text-muted)}
.rank-badge.spons{color:var(--accent);border-color:rgba(var(--accent-rgb),.4)}
.rank-snap-note{font-size:.78rem;color:var(--text-muted);margin-top:10px}

/* ---------- prioritized fixes ---------- */
.fixes{display:flex;flex-direction:column;gap:10px;counter-reset:fix}
.fix{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;background:var(--bg-2);border:1px solid var(--border);padding:16px 18px;box-shadow:var(--shadow-card)}
.fix::before{counter-increment:fix;content:counter(fix);font-family:var(--font-num);font-weight:800;font-size:1.05rem;color:var(--accent-ink);background:var(--accent);width:30px;height:30px;display:grid;place-items:center}
.fix h4{font-size:.98rem;margin-bottom:4px}
.fix p{font-size:.85rem;line-height:1.5;color:var(--text-sub)}
.fix .lever{font-size:.68rem;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--lens-win);margin-left:8px}

/* ---------- intent gap (Alexa for Shopping readiness) ---------- */
.intent-block{display:flex;flex-direction:column;gap:18px}
.intent-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px}
.intent-score{font-family:var(--font-num);font-weight:800;line-height:1;color:var(--accent);white-space:nowrap}
.intent-score span{font-size:2rem}
.intent-score small{font-size:.8rem;font-weight:700;color:var(--text-muted);margin-left:4px}
.intent-summary{font-size:.92rem;line-height:1.5;color:var(--text-sub);flex:1;min-width:240px;margin:0}
.intent-covered{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.intent-covered em{font-style:normal;font-size:.66rem;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--text-muted);margin-right:2px}
.intent-chip{font-size:.78rem;padding:5px 10px;background:var(--bg-3);border:1px solid var(--border);color:var(--text-sub)}
.intent-chip.ok{border-color:rgba(34,197,94,.4);color:var(--lens-win)}
.intent-missing{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.intent-gap-card{background:var(--bg-2);border:1px solid var(--border);border-left:3px solid var(--accent);padding:16px 18px;box-shadow:var(--shadow-card)}
.ig-head{display:flex;align-items:baseline;gap:9px;margin-bottom:8px;flex-wrap:wrap}
.ig-dim{font-size:.6rem;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--accent-ink);background:var(--accent);padding:3px 7px;white-space:nowrap}
.ig-head h5{font-size:.92rem;margin:0;line-height:1.3;flex:1;min-width:140px}
.ig-ev{font-size:.82rem;line-height:1.5;color:var(--text-muted);margin:0 0 8px}
.ig-sug{font-size:.84rem;line-height:1.5;color:var(--text-sub);margin:0;padding-top:8px;border-top:1px solid var(--border)}
.ig-sug strong{display:inline-block;font-size:.62rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--accent);margin-right:6px}

/* ---------- counter-bullets (offensive — from competitor reviews) ---------- */
.cbullets{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.cbullet{background:var(--bg-2);border:1px solid var(--border);border-left:3px solid var(--lens-win);padding:16px 18px;box-shadow:var(--shadow-card)}
.cb-angle{font-size:.62rem;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--lens-win);margin-bottom:9px}
.cb-text{font-size:.92rem;line-height:1.4;color:var(--text);margin:0 0 8px;font-weight:600}
.cb-ev{font-size:.8rem;line-height:1.5;color:var(--text-muted);margin:0;padding-top:8px;border-top:1px solid var(--border)}

/* ---------- monitor CTA (Arbiqor Plus) ---------- */
.lens-monitor-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:8px;padding-top:20px;border-top:1px solid var(--border)}
.lmon-btn{font-family:var(--font);font-size:.9rem;font-weight:700;padding:11px 18px;background:var(--accent);color:var(--accent-ink);border:0;cursor:pointer}
.lmon-btn:disabled{opacity:.7;cursor:default}
.lmon-note{font-size:.8rem;color:var(--text-muted);max-width:380px;line-height:1.4}

/* ---------- deep image audit (on-demand) ---------- */
.lens-imgaudit{margin-top:14px}
.lmon-btn.alt{background:transparent;color:var(--accent);border:1px solid var(--accent)}
#imgaudit-out:not(:empty){margin-top:14px;display:flex;flex-direction:column;gap:14px}
.ia-sum{font-size:.92rem;color:var(--text-sub);margin:0;line-height:1.5}
.ia-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.ia-img{background:var(--bg-2);border:1px solid var(--border);padding:10px 12px}
.ia-type{display:block;font-size:.64rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--accent);margin-bottom:3px}
.ia-note{font-size:.76rem;color:var(--text-muted);line-height:1.4}
.ia-missing{display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.ia-missing em{font-style:normal;font-size:.64rem;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--lens-lose);margin-right:2px}
.ia-miss{font-size:.76rem;padding:4px 9px;background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:#fca5a5}
.ia-recs{display:flex;flex-direction:column;gap:8px}
.ia-rec{background:var(--bg-2);border:1px solid var(--border);border-left:3px solid var(--accent);padding:12px 14px}
.ia-rec h5{font-size:.9rem;margin:0 0 4px}
.ia-rec p{font-size:.82rem;color:var(--text-sub);margin:0;line-height:1.5}

/* ---------- keyword discovery + demand ---------- */
.kwdisc-row{display:flex;gap:8px;margin-top:10px}
.kwdisc-row input{flex:1;min-width:0;padding:10px 12px;font:inherit;font-size:.9rem;color:var(--text);background:var(--bg-inset);border:1px solid var(--border-2);outline:none}
.kwdisc-row input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.15)}
.kwdisc-btn{font-family:var(--font);font-size:.85rem;font-weight:700;padding:0 16px;background:var(--accent);color:var(--accent-ink);border:0;cursor:pointer;white-space:nowrap}
.kwdisc-btn:disabled{opacity:.7;cursor:default}
.kw-chip{position:relative;overflow:hidden}
.kw-chip .kw-d{font-weight:800;color:var(--accent);margin-left:6px;font-size:.72rem}
.kw-chip .kw-demand{position:absolute;left:0;bottom:0;height:2px;background:var(--accent);opacity:.55}

/* ============================================================
   REFINED SAAS pass (de-AI, NOT newspaper — Лиза 2026-06-02)
   Keep the wins — numbered index (no icon-boxes), hairline rows
   (no boxes), mixed-case (no ALLCAPS), no glow. Grotesk, NOT serif.
   Confident teal accent. lens.css loads only on Lens → auto-scoped.
   ============================================================ */
:root{
  --accent:#22c7d6; --accent-dark:#178fa0; --accent-ink:#04222a; --accent-rgb:34,199,214; /* confident teal — lively, no glow */
}

/* lose the relentless ALLCAPS — keep the modern SaaS grotesk */
h1,h2,h3,h4{text-transform:none;letter-spacing:-.02em}

/* eyebrows: mixed-case, lighter tracking */
.eyebrow{text-transform:none;letter-spacing:.04em;font-weight:700;font-size:.82rem;color:var(--text-sub)}
.eyebrow::before{opacity:.55}

/* kill the AI-glow */
.btn-primary{box-shadow:none}
.btn-primary:hover{box-shadow:none;transform:translateY(-1px)}
.pill .dot{box-shadow:none}

/* feature grid → numbered index (no icon-in-a-box, no card); tabular grotesk numerals */
.feat-grid{counter-reset:feat;gap:0 48px;margin-top:40px}
.feat{background:none;border:0;border-top:1px solid var(--border);border-radius:0;box-shadow:none;padding:24px 0;gap:20px;align-items:baseline;transition:border-color .2s ease;counter-increment:feat}
.feat:hover{transform:none;border-color:var(--border-2)}
.feat .ic{width:auto;height:auto;background:none;color:var(--accent);flex-shrink:0}
.feat .ic svg{display:none}
.feat .ic::before{content:counter(feat,decimal-leading-zero);font-family:var(--font-num);font-variant-numeric:tabular-nums;font-weight:800;font-size:1.2rem;letter-spacing:.01em;color:var(--accent)}
.feat h3{text-transform:none;font-size:1.04rem;letter-spacing:-.01em}

/* report cards: drop the glow only — labels & numerals stay base grotesk */
.insight-card,.intent-gap-card,.cbullet{box-shadow:none}

/* ---------- tool form (app) ---------- */
.lens-form{background:var(--bg-2);border:1px solid var(--border);padding:26px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:20px}
.lens-modes{display:inline-flex;border:1px solid var(--border-2);overflow:hidden;align-self:flex-start}
.lens-modes button{font-family:var(--font);font-size:.88rem;font-weight:600;padding:10px 20px;background:transparent;color:var(--text-sub);border:0;cursor:pointer}
.lens-modes button[aria-selected="true"]{background:var(--accent);color:var(--accent-ink)}
.lens-field label{display:block;font-size:.82rem;font-weight:600;color:var(--text);margin-bottom:7px}
.lens-field input[type=text],.lens-field textarea{width:100%;padding:12px 14px;font:inherit;font-size:.95rem;color:var(--text);background:var(--bg-inset);border:1px solid var(--border-2);outline:none}
.lens-field input:focus,.lens-field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.15)}
.lens-field .hint{font-size:.78rem;color:var(--text-muted);margin-top:6px}
.lens-asins{display:flex;flex-direction:column;gap:9px}
.lens-upload{display:flex;align-items:center;gap:12px;padding:14px;border:1px dashed var(--border-2);background:var(--bg-inset);font-size:.86rem;color:var(--text-sub)}
.lens-cand{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.cand-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;background:var(--bg-3);border:1px solid var(--border);font-size:.8rem;cursor:pointer}
.cand-chip[aria-pressed="true"]{border-color:var(--accent);color:var(--text);background:rgba(var(--accent-rgb),.08)}
.cand-chip .why{color:var(--text-muted);font-size:.72rem}
.lens-status{font-size:.88rem;color:var(--text-sub);min-height:1.2em}
.lens-status.err{color:#f98080}