:root {
  --bg: #f6f7fb;
  --panel: #ffffff;
  --ink: #131722;
  --muted: #6b7280;
  --line: #e6e8ef;
  --accent: #5b5bf5;
  --accent-soft: #eef0ff;
  --ai: #7c3aed;
  --ai-soft: #f5f0ff;
  --sidebar: #14152b;
  --sidebar-ink: #c7c9e2;
  --shadow: 0 1px 2px rgba(17,23,34,.05), 0 8px 24px rgba(17,23,34,.06);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; font-size: 14px;
}

/* minmax(0,1fr) — altfel coloana de conținut se umflă la min-content și taie
   marginea dreaptă a paginii (stat-carduri/coloane tăiate la 1280px) */
.app { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }

/* ───────── Sidebar ───────── */
.sidebar { background: var(--sidebar); color: var(--sidebar-ink); padding: 18px 14px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sidebar .brand { display: flex; align-items: center; gap: 9px; padding: 4px 8px 14px; }
.brand-mark { color: #8a8aff; font-size: 20px; }
.brand-name { font-weight: 800; font-size: 17px; color: #fff; letter-spacing: -.3px; }
.brand-name span { color: #8a8aff; }
.brand-badge { font-size: 10px; color: var(--sidebar-ink); border: 1px solid #34365e; border-radius: 999px; padding: 1px 7px; }

.side-label { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: #6e7099; margin: 14px 10px 6px; }
.mp-switch { display: flex; flex-direction: column; gap: 4px; }
.mp-btn { text-align: left; border: 1px solid transparent; background: #1d1f3a; color: var(--sidebar-ink); padding: 9px 12px; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 13px; }
.mp-btn:hover { background: #24264a; }
.mp-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

.nav { display: flex; flex-direction: column; gap: 3px; }
.nav-item { display: flex; align-items: center; gap: 10px; text-align: left; border: none; background: transparent; color: var(--sidebar-ink); padding: 9px 12px; border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 13.5px; }
.nav-item span { width: 18px; text-align: center; }
.nav-item:hover:not([disabled]) { background: #1d1f3a; color: #fff; }
.nav-item.active { background: #1d1f3a; color: #fff; box-shadow: inset 3px 0 0 var(--accent); }
.nav.muted .nav-item, .nav-item[disabled] { opacity: .45; cursor: default; }
.side-foot { margin-top: auto; padding: 10px; font-size: 12px; color: #595b86; }

/* ───────── Content ───────── */
.content { padding: clamp(20px, 2.3vw, 32px) clamp(18px, 2.6vw, 44px) 90px; max-width: 1560px; margin-inline: auto; min-width: 0; }
/* Scalarea conținutului pe ecrane 13"→19"+ o face JS (fitViewport) CONTINUU prin .content{zoom},
   ca să fie fină pt orice rezoluție, nu pe trepte. Telefon/tabletă mică → reflow (media queries jos). */
/* 3-col grid: h1 left, subnav CENTERED, optional action button right. Center column stays
   put even if right column is missing. minmax(0,1fr) keeps side columns equal in width so a
   long title (e.g. "Oportunități — ce produse să aduci") can't push the subnav off-center. */
.view-head { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; margin-bottom: 22px; gap: 14px; }
.view-head h1 { font-size: 20px; font-weight: 800; margin: 0; letter-spacing: -.4px; justify-self: start; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.view-head h1 span { color: var(--accent); }
.view-head > .subnav { justify-self: center; }
.view-head > .ghost-btn { justify-self: end; }
.view.hidden { display: none; }
/* in-view sub-tabs: switch between sibling sections (Scanner↔Istoric, Oportunități↔Produsele mele) */
.subnav { display: inline-flex; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 4px; box-shadow: var(--shadow); }
.subnav-btn { border: none; background: transparent; color: var(--muted); font-weight: 600; padding: 8px 14px; border-radius: 9px; cursor: pointer; font-size: 13px; transition: .15s; }
.subnav-btn:hover { color: var(--ink); }
.subnav-btn.active { background: var(--ink); color: #fff; }
/* mobile: stack head vertically, subnav stays centered */
@media (max-width: 640px) {
  .view-head { grid-template-columns: 1fr; justify-items: center; }
  .view-head h1 { justify-self: center; text-align: center; }
  .view-head > .ghost-btn { justify-self: center; }
}

/* toolbar */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 4px; }
.seg { display: inline-flex; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 4px; box-shadow: var(--shadow); }
.seg-btn { border: none; background: transparent; color: var(--muted); font-weight: 600; padding: 8px 14px; border-radius: 9px; cursor: pointer; font-size: 13px; transition: .15s; }
.seg-btn:hover { color: var(--ink); }
.seg-btn.active { background: var(--ink); color: #fff; }
.search-box { display: flex; flex: 1 1 420px; gap: 10px; }
.search-box input { flex: 1; border: 1px solid var(--line); background: var(--panel); border-radius: 12px; padding: 12px 16px; font-size: 14px; outline: none; box-shadow: var(--shadow); }
.search-box input:focus { border-color: var(--accent); }
.search-box button { border: none; background: var(--accent); color: #fff; font-weight: 700; padding: 0 22px; border-radius: 12px; cursor: pointer; font-size: 14px; box-shadow: var(--shadow); }
.search-box button:disabled { opacity: .6; cursor: progress; }

.hint { color: var(--muted); margin: 18px 2px; line-height: 1.6; }
.hint.error { color: #c0392b; }
.hidden { display: none !important; }

/* cards */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 14px; margin: 16px 0 22px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow); }
.card .label { color: var(--muted); font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.card .value { font-size: 22px; font-weight: 800; margin-top: 6px; letter-spacing: -.5px; }
.card .sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.card.accent { background: linear-gradient(180deg, var(--accent-soft), #fff); border-color: #dcdcff; }
.card.ai { background: linear-gradient(180deg, var(--ai-soft), #fff); border-color: #ebdcff; }

/* results */
.results-wrap { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.results-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.results-title { font-weight: 700; }
.results-title b { color: var(--accent); }
.results-actions { display: flex; align-items: center; gap: 14px; }
.note { color: var(--muted); font-size: 12px; max-width: 440px; }
.ghost-btn { border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 8px 12px; cursor: pointer; font-weight: 600; font-size: 13px; }
.ghost-btn:hover { border-color: var(--accent); color: var(--accent); }

/* opportunities toolbar */
.opp-toolbar { align-items: flex-end; gap: 14px; }
.opp-toolbar label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); }
.opp-toolbar input { border: 1px solid var(--line); background: var(--panel); border-radius: 10px; padding: 10px 12px; font-size: 14px; width: 140px; outline: none; box-shadow: var(--shadow); }
.opp-toolbar input:focus { border-color: var(--accent); }
.opp-btn { border: none; background: var(--accent); color: #fff; font-weight: 700; padding: 11px 18px; border-radius: 11px; cursor: pointer; font-size: 14px; box-shadow: var(--shadow); }
.opp-btn:hover { filter: brightness(1.05); }
.opp-toolbar select { border: 1px solid var(--line); background: var(--panel); border-radius: 10px; padding: 10px 12px; font-size: 14px; min-width: 190px; outline: none; box-shadow: var(--shadow); cursor: pointer; }
.opp-toolbar select:focus { border-color: var(--accent); }
.seg-label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); }
.tag-big { font-size: 10px; font-weight: 700; background: #fdecea; color: #c0392b; border-radius: 999px; padding: 2px 7px; white-space: nowrap; }

.table-scroll { overflow-x: auto; max-height: 72vh; overflow-y: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13px; min-width: 1100px; }
thead th { position: sticky; top: 0; background: #fbfbfe; color: var(--muted); font-weight: 600; text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; cursor: pointer; user-select: none; }
thead th.ai { color: var(--ai); background: var(--ai-soft); }
thead th .arrow { opacity: .4; font-size: 10px; }
thead th.sorted .arrow { opacity: 1; color: var(--accent); }
tbody td { padding: 10px 12px; border-bottom: 1px solid #f1f2f7; vertical-align: middle; white-space: nowrap; }
tbody tr:hover { background: #fafbff; }
td.ai { background: #fcfaff; font-weight: 700; color: var(--ai); }
td.num { text-align: right; font-variant-numeric: tabular-nums; }

.prod { display: flex; align-items: center; gap: 10px; min-width: 280px; white-space: normal; }
.prod img { width: 40px; height: 40px; border-radius: 8px; object-fit: contain; background: #fff; border: 1px solid var(--line); flex: 0 0 auto; }
.prod a { color: var(--ink); text-decoration: none; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prod a:hover { color: var(--accent); }

.pill { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 9px; display: inline-block; }
.pill.fbe { background: #e8f0ff; color: #2563eb; }
.pill.fbm { background: #fdeede; color: #c2630f; }
.pill.muted { background: #f0f1f5; color: var(--muted); }
.conf { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 9px; display: inline-block; }
.conf-high { background: #e3f7ec; color: #0e9f6e; }
.conf-med { background: #fef3d7; color: #b7791f; }
.conf-low { background: #fdecea; color: #c0392b; }
.stars { color: #f5a623; font-weight: 700; }
.mp-tag { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 9px; background: var(--accent-soft); color: var(--accent); }
/* Marketplace-specific colors so eyes scan the table faster — eMAG mov/blue (current default),
   Trendyol portocaliu (brand color), no cross-contamination. */
.mp-tag.mp-emag     { background: #e8edff; color: #2547d0; }
.mp-tag.mp-trendyol { background: #fff0e0; color: #d6580a; }
.linkbtns { display: flex; gap: 6px; }
.linkbtns a, .linkbtns button { font-size: 12px; text-decoration: none; border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; color: var(--muted); background: #fff; cursor: pointer; }
.linkbtns a:hover, .linkbtns button:hover { border-color: var(--accent); color: var(--accent); }
.fav-btn { font-size: 14px; line-height: 1; color: #b7791f; }
.fav-btn.on { background: #fef3d7; border-color: #b7791f; color: #b7791f; }
.fav-btn:hover { color: #b7791f; border-color: #b7791f; }
/* watchlist trend pills: green up (more reviews / price up depending on context), red down */
.trend { font-weight: 700; font-size: 12px; }
.trend.up { color: #0e9f6e; }
.trend.down { color: #c0392b; }
.trend.flat { color: var(--muted); }
.trend + small { display: block; color: var(--muted); font-size: 10px; }
/* "what's new" pill on sidebar nav-item + sub-tabs: count of favorites with notable changes */
.badge-pill { display: inline-block; min-width: 18px; padding: 2px 6px; margin-left: 6px; border-radius: 999px; background: #c0392b; color: #fff; font-size: 11px; font-weight: 700; text-align: center; line-height: 1.2; }
.badge-pill.hidden { display: none; }
.subnav-btn .badge-pill { background: #c0392b; }
/* Scanner: per-row badges (🎯 candidate, 🚀 fast, 👑 leader, ⚠ big brand) — 1-glyph chips
   placed before the product title, tooltip explains the criterion. */
.row-flags { display: inline-flex; gap: 4px; margin-right: 6px; vertical-align: middle; }
.row-flag { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: 6px; font-size: 13px; cursor: help; background: #f0f1f5; }
.row-flag.candidat   { background: #e3f7ec; }
.row-flag.fast       { background: #fef3d7; }
.row-flag.lider      { background: #ede7ff; }
.row-flag.brand_mare { background: #fdecea; }
/* Scanner: niche insights line below the results title — one-line summary of badge counts */
.insights { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; font-size: 13px; }
.insight { padding: 6px 13px; border-radius: 999px; background: #f0f1f5; color: var(--ink); }
.insight.candidate { background: #e3f7ec; color: #0e7150; }
.insight.fast      { background: #fef3d7; color: #855a14; }
.insight.bigbrand  { background: #fdecea; color: #8a1a0e; }
/* Istoric: clickable candidate count → jumps to Opportunities filtered on the niche */
/* Inline toggle chip — compact pill next to the marketplace seg. The extra specificity
   beats `.opp-toolbar label { flex-direction: column }` from the form-style labels above. */
.toolbar label.opp-toggle, .opp-toggle {
  display: inline-flex; flex-direction: row; align-items: center; gap: 6px;
  padding: 6px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer; font-size: 12px; font-weight: 600; color: var(--muted); user-select: none;
  transition: .15s; white-space: nowrap; height: 32px;
}
.opp-toggle:hover { border-color: var(--accent); color: var(--ink); }
.opp-toggle input { width: 14px; height: 14px; cursor: pointer; margin: 0; accent-color: #c0392b; }
.opp-toggle:has(input:checked) { background: #fdecea; color: #8a1a0e; border-color: #c0392b; }
/* Saved-search chips — click to re-apply filters instantly, ✕ to delete */
.opp-saved-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.opp-preset { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; background: var(--accent-soft); color: var(--accent); border: 1px solid transparent; border-radius: 999px; cursor: pointer; font-size: 12px; font-weight: 600; transition: .15s; }
.opp-preset:hover { background: var(--accent); color: #fff; }
.opp-preset .x { font-size: 11px; opacity: .6; padding: 0 3px; border-radius: 50%; }
.opp-preset .x:hover { opacity: 1; background: rgba(255,255,255,.3); }
.hint-inline.muted { color: var(--muted); font-size: 12px; }
/* Inline cost editor in Opportunities — empty by default, persists on blur to the backend */
.cost-input { width: 78px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; text-align: right; background: #fff; }
.cost-input:focus { border-color: var(--accent); outline: none; background: #f5f7ff; }
.cost-input:not(:placeholder-shown) { background: #fef9e7; border-color: #e4c87a; }
/* Margin cell — green ≥25%, yellow 15-25%, red <15% so the eye picks viable rows fast */
.margin-cell { font-size: 12px; line-height: 1.3; }
.margin-cell b { font-size: 14px; }
.margin-cell.good { color: #0e9f6e; }
.margin-cell.warn { color: #b7791f; }
.margin-cell.neg  { color: #c0392b; }
/* Selection checkbox column in Opportunities — narrow, centered */
.opp-sel { width: 16px; height: 16px; cursor: pointer; margin: 0; }
#oppTable td:has(.opp-sel), #oppTable th:first-child { text-align: center; width: 32px; }
/* Sourcing score badge — composite 0-100 metric, color tiers for at-a-glance triage */
.score { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-weight: 700; font-size: 13px; }
.score.good  { background: #e3f7ec; color: #0e7150; }
.score.warn  { background: #fef3d7; color: #855a14; }
.score.low   { background: #f0f1f5; color: var(--muted); }
.score.muted { background: transparent; color: var(--muted); }
/* Identity box (My Products) — collapsible details block above tracker, like a settings drawer */
.identity-box { background: #f7f8fb; border: 1px solid var(--line); border-radius: 12px; margin: 8px 0; }
.identity-box summary { padding: 12px; cursor: pointer; user-select: none; font-size: 13px; }
.identity-box summary:hover { background: var(--accent-soft); }
.identity-box[open] summary { border-bottom: 1px solid var(--line); }
.cand-link { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: #e3f7ec; color: #0e7150; border-radius: 999px; font-weight: 700; cursor: pointer; text-decoration: none; }
.cand-link:hover { background: #0e7150; color: #fff; }
.muted { color: var(--muted); }

/* Calculator profit modal — opens on 💰 per opportunity row */
.calc-overlay { position: fixed; inset: 0; background: rgba(15,17,40,.5); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.calc-overlay.hidden { display: none; }
.calc-card { background: #fff; border-radius: 16px; max-width: 520px; width: 100%; padding: 24px; box-shadow: 0 20px 60px rgba(0,0,0,.3); max-height: 90vh; overflow-y: auto; }
.calc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.calc-head h2 { margin: 0; font-size: 18px; font-weight: 800; }
.calc-x { background: transparent; border: none; font-size: 18px; cursor: pointer; color: var(--muted); padding: 4px 10px; border-radius: 8px; }
.calc-x:hover { background: #f0f1f5; }
.calc-product { background: #f7f8fb; border-radius: 10px; padding: 12px; margin-bottom: 16px; }
.calc-product .prod img { width: 48px; height: 48px; object-fit: contain; background: #fff; border-radius: 6px; padding: 4px; }
.calc-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.calc-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.calc-row label { flex: 1; font-size: 13px; color: var(--ink); }
.calc-row label small { display: block; color: var(--muted); font-size: 11px; font-weight: 400; }
.calc-row input { width: 110px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; text-align: right; }
.calc-row input:focus { border-color: var(--accent); outline: none; }
.calc-result { background: #f0f1f5; border-radius: 10px; padding: 14px; }
.calc-line { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; font-size: 14px; }
.calc-line:last-child { margin-bottom: 0; }
.calc-line.big { font-size: 16px; font-weight: 700; padding-top: 8px; border-top: 1px solid #dfe0e6; margin-top: 8px; }
.calc-line b { font-weight: 700; }
.calc-line b.good { color: #0e9f6e; }
.calc-line b.warn { color: #b7791f; }
.calc-line b.neg  { color: #c0392b; }
.calc-monthly { margin-top: 10px; padding-top: 10px; border-top: 1px solid #dfe0e6; }
.calc-hint { margin: 14px 0 0; padding: 10px 12px; background: #fef3d7; border-radius: 8px; font-size: 12px; color: #855a14; }

/* Sourcing helper: card-list of suppliers, opens with the smart-cleaned query pre-filled */
.src-input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; margin-bottom: 12px; }
.src-input:focus { border-color: var(--accent); outline: none; }
.src-links { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.src-link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--ink); transition: .15s; }
.src-link:hover { border-color: var(--accent); background: #f0f4ff; }
.src-emoji { font-size: 22px; }
.src-meta { flex: 1; }
.src-lbl { font-weight: 700; font-size: 14px; }
.src-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.src-arrow { color: var(--muted); font-size: 18px; }
.src-alt { font-size: 12px; color: var(--muted); margin-bottom: 8px; padding: 6px 10px; background: #f7f8fb; border-radius: 6px; }
.src-alt a { color: var(--accent); text-decoration: none; font-weight: 600; }
.src-alt a:hover { text-decoration: underline; }

/* Comparator între scanări — chips de sumar + tabel de mișcări */
.cmp-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.cmp-chip { padding: 12px; background: #f0f1f5; border-radius: 10px; text-align: center; }
.cmp-chip.good { background: #e3f7ec; }
.cmp-chip.neg  { background: #fdecea; }
.cmp-chip.muted { background: #f7f8fb; }
.cmp-chip-val { font-size: 22px; font-weight: 800; color: var(--ink); }
.cmp-chip.good .cmp-chip-val { color: #0e9f6e; }
.cmp-chip.neg  .cmp-chip-val { color: #c0392b; }
.cmp-chip-lbl { font-size: 13px; font-weight: 700; color: var(--ink); margin-top: 2px; }
.cmp-chip-hint { font-size: 10px; color: var(--muted); margin-top: 2px; }
.cmp-body { max-height: 50vh; overflow-y: auto; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cmp-table th { text-align: left; font-size: 11px; color: var(--muted); padding: 8px 6px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; }
.cmp-table th.num { text-align: right; }
.cmp-table td { padding: 8px 6px; border-bottom: 1px solid #f0f1f5; }
.cmp-table td.num { text-align: right; }
.cmp-table tr.lost td { color: var(--muted); text-decoration: line-through; }
.cmp-table .good { color: #0e9f6e; font-weight: 700; }
.cmp-table .neg { color: #c0392b; font-weight: 700; }
@media (max-width: 640px) {
  .cmp-summary { grid-template-columns: repeat(2, 1fr); }
}

/* overlay */
.overlay { position: fixed; inset: 0; background: rgba(246,247,251,.7); backdrop-filter: blur(2px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; z-index: 50; }
.spinner { width: 42px; height: 42px; border: 4px solid #dcdcff; border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
.overlay-text { color: var(--muted); font-weight: 600; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 720px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .sidebar .brand { width: 100%; }
}

/* ───────── sidebar user + logout (alb) ───────── */
.side-foot { margin-top: auto; padding: 10px 10px 4px; position: sticky; bottom: 0; background: var(--sidebar); display: flex; flex-direction: column; gap: 7px; }
.side-user { font-size: 12px; color: var(--sidebar-ink); }
.logout-btn { display: block; text-align: center; text-decoration: none; font-size: 13px; font-weight: 600; color: var(--sidebar-ink); border: 1px solid #34365e; border-radius: 10px; padding: 8px 10px; }
.logout-btn:first-of-type { background: #1d1f3a; border-color: #4a4d7a; }
.logout-btn:hover { background: #1d1f3a; color: #fff; border-color: #4a4d7a; }

/* ───────── login page ───────── */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: radial-gradient(1200px 600px at 50% -10%, #24264a, var(--sidebar)); }
.login-card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 34px 32px; width: 370px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.login-brand { display: flex; align-items: center; gap: 9px; }
.login-brand .brand-mark { color: var(--accent); font-size: 24px; }
.login-brand .brand-name { font-weight: 800; font-size: 22px; letter-spacing: -.4px; color: var(--ink); }
.login-brand .brand-name span { color: var(--accent); }
.login-sub { color: var(--muted); font-size: 13px; margin: 8px 0 22px; }
.login-error { background: #fdecea; color: #c0392b; font-size: 13px; font-weight: 600; border-radius: 10px; padding: 10px 12px; margin-bottom: 16px; }
.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-form label { font-size: 12px; font-weight: 600; color: var(--muted); display: flex; flex-direction: column; gap: 6px; }
.login-form input { border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px; font-size: 14px; outline: none; color: var(--ink); }
.login-form input:focus { border-color: var(--accent); }
.login-form button { margin-top: 6px; border: none; background: var(--accent); color: #fff; font-weight: 700; font-size: 14px; padding: 13px; border-radius: 11px; cursor: pointer; }
.login-form button:hover { filter: brightness(1.05); }
.login-foot { color: var(--muted); font-size: 12px; text-align: center; margin: 18px 0 0; }
.login-link { color: var(--accent); font-weight: 700; text-decoration: none; }
.login-link:hover { text-decoration: underline; }

/* integration modals: credential form, NOT the calculator's tiny numeric rows —
   label above, full-width input, real air between field groups */
.calc-rows.integ-form { gap: 20px; margin: 22px 0 22px; }
.integ-form .calc-row { flex-direction: column; align-items: stretch; gap: 8px; }
.integ-form .calc-row label { font-size: 13px; font-weight: 700; color: var(--ink); }
.integ-form .calc-row label small { display: inline; margin-left: 8px; font-weight: 400; color: var(--muted); }
.integ-form .calc-row input { width: 100%; text-align: left; padding: 13px 16px;
  border-radius: 12px; font-size: 14px; }
/* the explainer box and the action button get room too */
.integ-form ~ div .opp-btn { padding: 12px 22px; }

/* ───────── Setări: pagină full-width (nu card de login) ───────── */
.settings-body { display: block; min-height: 100vh; background: var(--bg); }
.settings-topbar { display: flex; align-items: center; gap: 16px; background: var(--panel);
  border-bottom: 1px solid var(--line); padding: 12px 28px; position: sticky; top: 0; z-index: 5; }
.settings-topbar .login-brand { display: flex; align-items: center; gap: 9px; }
.settings-topbar-user { margin-left: auto; font-size: 13px; color: var(--muted); font-weight: 600; }
.settings-main { max-width: 1100px; margin: 0 auto; padding: 26px 28px 90px; }
.settings-h1 { font-size: 22px; font-weight: 800; letter-spacing: -.4px; margin: 4px 0 18px; }
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); padding: 22px 24px; }
.panel h2 { font-size: 15px; margin: 0 0 6px; }
.panel-wide { grid-column: 1 / -1; }
@media (max-width: 880px) { .settings-grid { grid-template-columns: 1fr; } }

.settings-form { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.settings-form label { font-size: 12px; font-weight: 600; color: var(--muted); display: flex; flex-direction: column; gap: 6px; }
.settings-form input { border: 1px solid var(--line); border-radius: 11px; padding: 11px 14px; font-size: 14px; outline: none; color: var(--ink); width: 100%; }
.settings-form input:focus { border-color: var(--accent); }
.form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; }
@media (max-width: 560px) { .form-2col { grid-template-columns: 1fr; } }
.form-submit { display: flex; }
.form-submit button { flex: 1; border: none; background: var(--accent); color: #fff; font-weight: 700;
  font-size: 14px; padding: 12px; border-radius: 11px; cursor: pointer; }
.form-submit button:hover { filter: brightness(1.05); }

.integ-list { display: flex; flex-direction: column; gap: 8px; font-size: 13px; margin: 12px 0 14px; }
.integ-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 10px; padding: 9px 13px; }
.integ-row-actions { margin-left: auto; display: flex; gap: 12px; }
.integ-row-actions a { color: var(--accent); font-weight: 600; text-decoration: none; }
.integ-row-actions a:hover { text-decoration: underline; }
.integ-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.integ-btn { border: none; color: #fff; font-weight: 700; padding: 11px 16px; border-radius: 11px;
  cursor: pointer; font-size: 13.5px; box-shadow: var(--shadow); }
.integ-btn.emag { background: var(--accent); }
.integ-btn.trendyol { background: #f27a1a; }
.integ-btn:hover { filter: brightness(1.06); }
.settings-main .acct-table { font-size: 13px; }
.settings-main .table-scroll { overflow-x: auto; }

/* ───────── Admin conturi + cotă trial (Setări) ───────── */
.quota-note { background: var(--accent-soft); border: 1px solid #dcdcff; color: var(--accent); border-radius: 11px; padding: 10px 14px; font-size: 13px; font-weight: 600; margin: 0 0 14px; }
.admin-accounts { margin-top: 26px; border-top: 1px solid var(--line); padding-top: 18px; }
.admin-accounts h2 { font-size: 15px; margin: 0 0 4px; color: var(--ink); }
.admin-accounts .hint-line { color: var(--muted); font-size: 12px; margin: 0 0 12px; }
.acct-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.acct-table th { text-align: left; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.acct-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.acct-table .role-admin { color: #7c3aed; font-weight: 700; }
.acct-table .quota-input { width: 58px; border: 1px solid var(--line); border-radius: 8px; padding: 5px 7px; font-size: 12.5px; }
.acct-table button { border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 5px 9px; font-size: 12px; cursor: pointer; }
.acct-table button:hover { border-color: var(--accent); color: var(--accent); }
.acct-table button.danger:hover { border-color: #dc2626; color: #dc2626; }
.trial-default-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.trial-default-row input { width: 64px; border: 1px solid var(--line); border-radius: 8px; padding: 5px 7px; }
.trial-default-row button { border: 1px solid var(--line); background: var(--panel); border-radius: 8px; padding: 5px 10px; font-size: 12px; cursor: pointer; }
.trial-default-row button:hover { border-color: var(--accent); color: var(--accent); }
.quota-chip { display: block; text-align: center; font-size: 11.5px; font-weight: 700; color: #ffd166; background: #1d1f3a; border: 1px solid #4a4d7a; border-radius: 10px; padding: 6px 8px; }
.quota-chip.depleted { color: #ff8787; }

/* BuyBox: tabel compact + sub-rând de strategie. min-width 100% (nu 1100) ca acțiunile
   (Nu cobor sub / ⚡ Recâștigă) să rămână PE ECRAN, nu după scroll orizontal */
#bbTable { min-width: 100%; }
#bbTable td { padding: 12px 10px; font-size: 13px; }
#bbTable th { padding: 12px 10px; font-size: 10.5px; white-space: nowrap; }
#bbTable .bb-floor { width: 76px; }
#bbTable .prod, #rkTable .prod { min-width: 200px; }
#rkTable { min-width: 100%; }
#bbTable .cell-title { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
#rkTable .cell-title { max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
#rkTable td { padding: 12px 12px; font-size: 13px; }
#rkTable th { padding: 12px 12px; font-size: 10.5px; }
.bb-intel-row td { background: var(--accent-soft); font-size: 11.5px; padding: 6px 12px; color: var(--ink); }

/* ───────── Design system v2: tabele premium (global, toate paginile) ───────── */
.results { width: 100%; border-collapse: collapse; }
.results thead th, table thead th {
  position: sticky; top: 0; z-index: 2; background: var(--panel);
  text-transform: uppercase; font-size: 10.5px; letter-spacing: .55px;
  color: var(--muted); font-weight: 700; padding: 13px 14px;
  border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap;
}
table tbody td { padding: 14px 14px; border-bottom: 1px solid #f3f4f8; vertical-align: middle; }
table tbody tr:hover { background: #f8f9ff; }
th.num, td.num { text-align: right; }

/* stat-cards (sumarele de secțiune, stil ZeffScout) */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin: 4px 0 10px; }
.stat-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 16px; box-shadow: var(--shadow); border-top: 3px solid var(--line); }
.stat-card.accent { border-top-color: var(--accent); }
.stat-card.good { border-top-color: #0e9f6e; }
.stat-card.warn { border-top-color: #f59e0b; }
.stat-card.neg { border-top-color: #dc2626; }
.stat-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .55px; color: var(--muted); font-weight: 700; }
.stat-value { font-size: 26px; font-weight: 800; letter-spacing: -.5px; margin-top: 4px; }
.stat-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* butoane: micro-interacțiuni consistente */
.opp-btn, .ghost-btn, .seg-btn, .integ-btn { transition: transform .12s, box-shadow .12s, filter .12s; }
.opp-btn:hover, .integ-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(91,91,245,.25); }
.opp-btn:active, .integ-btn:active { transform: translateY(0); }

/* ───────── Design v2: panou de filtre (Oportunități etc.) — controale grupate
   într-un singur card, nu împrăștiate pe pagină ───────── */
.filter-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); padding: 22px 24px 20px; margin: 4px 0 20px;
  display: flex; flex-direction: column; gap: 16px; }
.filter-panel .toolbar { gap: 12px; }
.filter-panel .opp-toolbar + .opp-toolbar { margin-top: 0; }
.filter-panel .opp-toolbar label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; gap: 6px; }
.filter-panel .opp-toolbar label.opp-toggle { text-transform: none; letter-spacing: 0; font-size: 12px; }
.filter-panel input, .filter-panel select { box-shadow: none; }
.filter-panel .seg { box-shadow: none; background: var(--bg); }

/* înălțimi uniforme pe controale — nimic nu mai „dansează" pe verticală */
.opp-toolbar input, .opp-toolbar select { height: 40px; }
.opp-btn { height: 40px; padding: 0 18px; }
.ghost-btn { height: 40px; padding: 0 14px; background: var(--panel); }
.toolbar .opp-toggle { height: 40px; border-radius: 11px; }

/* focus ring vizibil, consistent peste tot */
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(91, 91, 245, .15) !important; }

/* tipografie: cifrele aliniate ca în Excel, titlurile mai prezente */
table tbody td { font-variant-numeric: tabular-nums; }
.view-head h1 { font-size: 22px; }
.hint { max-width: 110ch; }

/* sidebar: stare activă cu gradient + tranziții line */

.nav-item { transition: background .15s, color .15s; }
.nav-item.active { background: var(--accent); color: #fff; box-shadow: none; }
.nav-item span { display: inline-flex; align-items: center; justify-content: center; }
.nav-item svg { width: 17px; height: 17px; }
.brand-mark-svg { flex: 0 0 auto; }
.stat-card { transition: transform .15s, box-shadow .15s; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(17,23,34,.10); }
.stat-value small { font-size: 14px; font-weight: 700; color: var(--muted); }

/* capul de tabel: umbră fină când e sticky, să se simtă „deasupra" conținutului */
thead th { box-shadow: 0 1px 0 var(--line); }

/* sourcing score pill (Oportunități) */
.score-pill { display: inline-block; min-width: 38px; text-align: center; border-radius: 999px; padding: 3px 10px; font-size: 13px; }
.score-pill.good { background: #e7f7f0; color: #0e7a52; border: 1px solid #b5e6d2; }
.score-pill.warn { background: #fff8e6; color: #8a5a00; border: 1px solid #ffe08a; }
.score-pill.neg  { background: #fdecea; color: #c0392b; border: 1px solid #f5c6c0; }

/* ───────── Tracker: legendă + scan-now ───────── */
.trk-help { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin: 4px 0 12px; font-size: 13px; box-shadow: var(--shadow); }
.trk-help summary { cursor: pointer; color: var(--ink); }
.trk-help ul { margin: 10px 0 4px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--muted); line-height: 1.45; }
.trk-help b { color: var(--ink); }
.trk-scan-now { border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent); border-radius: 8px; padding: 3px 9px; font-size: 12px; font-weight: 700; cursor: pointer; }
.trk-scan-now:hover { background: var(--accent); color: #fff; }

/* Catalog → keywords per product (the Masat loop). Aligned grid, NOT floating chips:
   every row lines up word | metric | action so the list scans like a table. */
.offer-kw-row td { background: var(--accent-soft); }
.offer-kw-panel { padding: 10px 12px; font-size: 12.5px; line-height: 1.5; }
.kw-section { margin-bottom: 4px; }
.kw-grid { display: grid; grid-template-columns: minmax(180px, 300px) 190px auto;
  gap: 4px 18px; align-items: center; max-width: 720px; padding-left: 18px; }
.kw-word { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-metric { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kw-action { white-space: nowrap; }
.kw-add { border: 1px solid var(--accent); background: var(--panel); color: var(--accent); font-weight: 700; font-size: 12px; cursor: pointer; padding: 2px 10px; border-radius: 8px; }
.kw-add:hover { background: var(--accent); color: #fff; }
.kw-add:disabled { color: var(--muted); border-color: var(--line); background: var(--panel); cursor: default; }
.mine-chip { display: inline-block; background: #e7f7f0; color: #0e7a52; border: 1px solid #b5e6d2; border-radius: 999px; padding: 1px 9px; font-size: 11px; font-weight: 700; margin-right: 6px; white-space: nowrap; }

/* ───────── Categorii / taxonomie ───────── */
.tax-filter { width: 100%; max-width: 520px; border: 1px solid var(--line); background: var(--panel); border-radius: 12px; padding: 12px 16px; font-size: 14px; outline: none; box-shadow: var(--shadow); margin: 4px 0 18px; }
.tax-filter:focus { border-color: var(--accent); }
.tax-tree { display: flex; flex-direction: column; gap: 10px; }
.tax-dept { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; }
.tax-dept-head { width: 100%; display: flex; align-items: center; gap: 10px; background: none; border: none; cursor: pointer; padding: 14px 18px; font-size: 15px; font-weight: 700; color: var(--ink); text-align: left; }
.tax-dept-head:hover { background: #fbfbfe; }
.tax-caret { color: var(--accent); font-size: 12px; transition: transform .15s; flex: 0 0 auto; }
.tax-dept.open .tax-caret { transform: rotate(90deg); }
.tax-dept-name { flex: 1; }
.tax-dept-count { font-size: 12px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 3px 11px; }
.tax-dept-body { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 18px 18px; }
.tax-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 7px 13px; font-size: 13px; font-weight: 600; cursor: pointer; transition: .12s; }
.tax-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.tax-chip-n { font-size: 11px; font-weight: 700; color: #0e9f6e; background: #e7f7f0; border-radius: 999px; padding: 1px 7px; }

/* ───────── settings page extras ───────── */
.settings-card { width: 410px; }
.settings-title { font-size: 19px; font-weight: 800; margin: 14px 0 0; color: var(--ink); }
.login-ok { background: #e7f7f0; color: #0e7a52; font-size: 13px; font-weight: 600; border-radius: 10px; padding: 10px 12px; margin-bottom: 16px; }
.settings-sep { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin: 8px 0 -4px; padding-top: 10px; border-top: 1px dashed var(--line); }
.settings-back { display: block; text-align: center; margin-top: 18px; font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
.settings-back:hover { text-decoration: underline; }
.req { color: #c0392b; }

/* ───────── Scanner: category picker row (own panel so it breathes) ───────── */
.cat-pick { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; row-gap: 12px;
  margin-top: 14px; padding: 16px 18px; background: var(--accent-soft);
  border: 1px solid #dcdcff; border-radius: 14px; }
.cat-pick-label { font-size: 13px; font-weight: 700; color: var(--accent); }
.cat-pick select { border: 1px solid #d3d3f7; background: var(--panel); border-radius: 10px;
  padding: 11px 14px; font-size: 13.5px; min-width: 220px; outline: none;
  box-shadow: var(--shadow); cursor: pointer; }
.cat-pick select:focus { border-color: var(--accent); }
.cat-pick select:disabled { opacity: .55; cursor: not-allowed; }
.cat-pick .opp-btn { padding: 11px 18px; font-size: 13.5px; }
.cat-pick .opp-btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.cat-refresh { font-size: 12px; color: var(--accent); text-decoration: none; margin-left: auto; opacity: .85; }
.cat-refresh:hover { text-decoration: underline; opacity: 1; }

/* opportunities: a little more air between the two filter rows */
.opp-toolbar + .opp-toolbar { margin-top: 14px; }

/* opportunities: "closest matches" banner when exact filters found nothing */
.opp-relaxed { background: #fff8e6; border: 1px solid #ffe08a; color: #8a5a00; border-radius: 10px; padding: 9px 13px; margin-bottom: 10px; font-size: 13px; line-height: 1.4; }

.hint-inline { color: var(--muted); font-weight: 400; font-size: 12px; }

.depth-pick { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600; color: var(--muted); }
.depth-pick select { border: 1px solid var(--line); background: var(--panel); border-radius: 10px; padding: 9px 10px; font-size: 13px; box-shadow: var(--shadow); cursor: pointer; outline: none; }
.depth-pick select:focus { border-color: var(--accent); }


/* ───────── Design custom MarketRadar (combinația A+B aleasă): identitate radar ───────── */
.side-radar { position: absolute; left: -12px; bottom: 112px; opacity: .14; pointer-events: none; }

.live-line { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; margin: -4px 2px 12px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #12b76a; flex: 0 0 auto;
  animation: mr-pulse 2.2s infinite; }
@keyframes mr-pulse {
  0% { box-shadow: 0 0 0 0 rgba(18,183,106,.45); }
  70% { box-shadow: 0 0 0 7px rgba(18,183,106,0); }
  100% { box-shadow: 0 0 0 0 rgba(18,183,106,0); }
}

/* cardul-erou Ranking: inel mare de progres + esențialul într-o propoziție */
.rk-hero { display: flex; gap: 22px; align-items: center; background: var(--panel);
  border: 1px solid var(--line); border-radius: 16px; padding: 20px 26px; box-shadow: var(--shadow); margin-bottom: 6px; }
.rk-hero svg { flex: 0 0 auto; }
.rk-hero-txt { min-width: 0; flex: 1; }
.rk-hero-title { font-size: 16px; color: var(--ink); }
.rk-hero-title b { font-size: 19px; }
.rk-hero-sub { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.rk-hero-bar { height: 6px; border-radius: 999px; background: #eef0f5; margin-top: 9px; max-width: 440px; }
.rk-hero-bar span { display: block; height: 6px; border-radius: 999px; background: var(--accent); }

/* celula de produs pe 2 rânduri: thumbnail + titlu + SKU·categorie */
.rk-prod { display: flex; gap: 10px; align-items: center; min-width: 0; max-width: 340px; }
.rk-thumb { width: 34px; height: 34px; border-radius: 8px; object-fit: contain; background: #fff;
  border: 1px solid var(--line); flex: 0 0 auto; }
.rk-thumb-ph { display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-soft); border: 1px solid #dcdcff; font-size: 15px; }
.rk-prod-txt { min-width: 0; }
.rk-prod-title { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-prod-sub { font-size: 11px; color: var(--muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* verdicte pe românește — cifra tradusă în consecință */
.verdict { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 10px;
  border-radius: 7px; white-space: nowrap; }
.v-top  { background: #e7f7f0; color: #0e7a52; }
.v-p1   { background: #e8f0ff; color: #2563eb; }
.v-p2   { background: #fff8e6; color: #8a5a00; }
.v-deep { background: #fdecea; color: #b42318; }
.v-none { background: #f0f1f5; color: var(--muted); }


/* scorecard segmentat (BuyBox & co): un singur panou, cifre mari colorate */
.scorecard { display: flex; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow); padding: 20px 0; margin: 4px 0 18px; }
.sc-seg { flex: 1 1 170px; min-width: 170px; padding: 2px 26px; border-right: 1px solid #eef0f5; }
.sc-seg:last-child { border-right: none; }
.sc-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.sc-value { font-size: 25px; font-weight: 800; letter-spacing: -.4px; margin-top: 5px; }
.sc-value small { font-size: 14px; color: var(--muted); font-weight: 700; }
.sc-sub { font-size: 12px; color: #9aa1b5; margin-top: 3px; }


/* jurnal BuyBox compact pe pagina de catalog */
.journal-line { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0 0 18px; }


/* diagramele catalogului (Tracker → Catalogul meu): bare + donut, stil ZeffScout */
.viz-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; margin: 0 0 18px; align-items: start; }
@media (max-width: 900px) { .viz-grid { grid-template-columns: 1fr; } }
.viz-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 22px 24px; box-shadow: var(--shadow); }
.viz-title { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 16px; }
.bar-row { margin-bottom: 14px; }
.bar-row:last-child { margin-bottom: 2px; }
.bar-meta { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; margin-bottom: 5px; }
.bar-name { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.bar-val { color: var(--ink); white-space: nowrap; }
.bar-track { height: 9px; border-radius: 999px; background: #eef0f5; }
.bar-fill { display: block; height: 9px; border-radius: 999px; background: var(--accent); }
.viz-donut-body { display: flex; align-items: center; gap: 16px; }
.donut-legend { display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; color: var(--muted); }
.donut-legend b { color: var(--ink); }
.donut-legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; }


/* ── altă formă decât cercul: bară segmentată (structura catalogului) ── */
.stack-bar { display: flex; height: 16px; border-radius: 999px; overflow: hidden; margin: 6px 0 16px; }
.stack-bar span { display: block; height: 16px; }
.stack-legend { display: flex; gap: 22px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.stack-legend b { color: var(--ink); }
.stack-legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 7px; }

/* scor ca număr mare + bară subțire (nu cerc) */
.score-cell { min-width: 56px; }
.score-cell b { font-size: 16px; letter-spacing: -.3px; }
.score-bar { height: 5px; border-radius: 999px; background: #eef0f5; margin-top: 4px; width: 52px; }
.score-bar span { display: block; height: 5px; border-radius: 999px; }

/* poziția în categorie: număr mare colorat, simplu */
.rank-big { font-size: 16px; font-weight: 800; letter-spacing: -.3px; }
.rank-cat { display: block; font-size: 11px; color: #9aa1b5; margin-top: 2px; }


/* ═══════ Limbaj «compus» (rețeta reală Masat/Zeff): totul în carduri cu antet ═══════ */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 4px 0 18px; }
.kpi-card { background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); padding: 18px 20px; display: flex; gap: 14px; align-items: flex-start; }
.kpi-ico { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px; display: inline-flex;
  align-items: center; justify-content: center; }
.kpi-ico svg { width: 19px; height: 19px; }
.kpi-meta { min-width: 0; }
.kpi-label { font-size: 12px; color: var(--muted); font-weight: 600; }
.kpi-value { font-size: 24px; font-weight: 800; letter-spacing: -.4px; margin-top: 3px; white-space: nowrap; }
.kpi-value small { font-size: 13px; color: var(--muted); font-weight: 700; }
.kpi-sub { font-size: 12px; color: #9aa1b5; margin-top: 2px; }

.card2 { background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); overflow: hidden; margin: 0 0 18px; }
.card2-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 16px 22px; border-bottom: 1px solid #f0f1f6; }
.card2-title { font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.card2-sub { font-size: 12.5px; color: var(--muted); }
.card2-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card2 .table-scroll, .card2 .table-wrap { border: none; border-radius: 0; box-shadow: none; }
.card2-foot { padding: 12px 22px; border-top: 1px solid #f0f1f6; display: flex; align-items: center;
  gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.card2 input[type="search"], .card2-head input { box-shadow: none; }
.head-search { border: 1px solid var(--line); border-radius: 10px; padding: 9px 14px;
  font-size: 13px; min-width: 240px; background: #fafbfd; }
.head-search:focus { background: #fff; }

/* punct de status CSS (în loc de emoji) */
.st { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 2px; vertical-align: 1px; }
.st-on { background: #12b76a; } .st-wait { background: #f79009; } .st-off { background: #c3c8dd; }


/* ═══ ALT LAYOUT: BuyBox ca grilă de carduri produs (nu tabel) ═══ */
.bb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(370px, 1fr));
  gap: 18px; padding: 20px 22px; }
.bb-pcard { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px;
  background: #fff; display: flex; flex-direction: column; gap: 13px; transition: border-color .15s; }
.bb-pcard:hover { border-color: #d5d9ec; }
.bb-pcard-muted { opacity: .62; background: #fafbfd; }
.bb-pcard-top { display: flex; gap: 12px; align-items: flex-start; }
.bb-pimg { width: 56px; height: 56px; border-radius: 10px; object-fit: contain;
  background: #fff; border: 1px solid var(--line); flex: 0 0 auto; }
.bb-pimg-ph { display: inline-block; background: var(--accent-soft); }
.bb-ptxt { min-width: 0; flex: 1; }
.bb-ptitle { font-weight: 600; color: var(--ink); font-size: 13.5px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bb-psub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.icon-btn { border: 1px solid var(--line); background: #fff; border-radius: 9px; width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: #98a0b8; flex: 0 0 auto; }
.icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.bb-prices { display: flex; border: 1px solid #f0f1f6; border-radius: 11px; overflow: hidden; }
.bb-prices > div { flex: 1; padding: 9px 12px; border-right: 1px solid #f0f1f6; background: #fafbfd; }
.bb-prices > div:last-child { border-right: none; }
.bb-prices span { display: block; font-size: 10.5px; color: var(--muted); font-weight: 600; }
.bb-prices b { font-size: 14.5px; letter-spacing: -.2px; }
.bb-strategy { font-size: 12px; color: var(--muted); background: var(--accent-soft);
  border-radius: 9px; padding: 8px 12px; line-height: 1.5; }
.bb-actions { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.bb-actions .bb-floor { width: 110px; padding: 8px 10px; font-size: 12.5px; }
.bb-auto-lbl { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.bb-actions .bb-apply { margin-left: auto; height: 36px; padding: 0 14px; font-size: 12.5px; white-space: nowrap; }
.bb-blocked { margin-left: auto; font-size: 12px; color: #b42318; background: #fdecea;
  border-radius: 8px; padding: 7px 11px; white-space: nowrap; }


/* ═══════ ALTĂ INTERFAȚĂ: shell cu topbar orizontal, conținut centrat ═══════ */
.app { display: block; }
body { background: #f3f4f8; }
.topbar { position: sticky; top: 0; z-index: 60; background: #fff; border-bottom: 1px solid var(--line); }
.topbar-inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; gap: 26px;
  padding: 0 32px; height: 62px; }
.topbar .brand { display: flex; align-items: center; gap: 9px; padding: 0; flex: 0 0 auto; }
.topbar .brand-name { color: var(--ink); font-size: 17px; }
.topbar .nav { flex-direction: row; gap: 4px; margin: 0 auto; overflow-x: auto; scrollbar-width: none; }
.topbar .nav::-webkit-scrollbar { display: none; }
.topbar .nav-item { color: #555a73; padding: 8px 15px; border-radius: 999px; font-size: 13.5px;
  white-space: nowrap; background: transparent; }
.topbar .nav-item svg { width: 16px; height: 16px; }
.topbar .nav-item:hover:not([disabled]) { background: #f3f5fa; color: var(--ink); }
.topbar .nav-item.active { background: var(--accent-soft); color: var(--accent); box-shadow: none; }
.topbar .nav-item[disabled] { opacity: .45; }
.top-right { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.top-user { font-size: 13px; color: #555a73; font-weight: 600; }
.top-btn { border: 1px solid var(--line); background: #fff; border-radius: 10px; width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: #6b7280; }
.top-btn:hover { border-color: var(--accent); color: var(--accent); }
.topbar .quota-chip { padding: 5px 10px; font-size: 11px; }
.content { max-width: 1560px; width: 100%; margin-inline: auto; padding: clamp(20px, 2.3vw, 32px) clamp(18px, 2.6vw, 44px) 90px; }
.view-head h1 { font-size: 24px; }
@media (max-width: 880px) {
  .topbar-inner { flex-wrap: wrap; height: auto; padding: 10px 16px; gap: 10px; }
  .topbar .nav { order: 3; width: 100%; margin: 0; }
  .top-user { display: none; }
}


/* ═══════ Sidebar v2 — designul NOU cerut: gradient adânc, plăcuțe-icon, activ = pastilă ALBĂ ═══════ */
.app { display: grid; grid-template-columns: 264px minmax(0, 1fr); }
.sidebar2 { background: linear-gradient(180deg, #15172e 0%, #181438 70%, #1c1440 100%);
  color: #c7c9e2; padding: 22px 16px 16px; position: sticky; top: 0; height: 100vh;
  overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.sb-brand { display: flex; gap: 8px; align-items: center; padding: 2px 4px 16px; }
.sb-mark { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 10px;
  background: rgba(138,138,255,.12); border: 1px solid rgba(138,138,255,.25);
  display: inline-flex; align-items: center; justify-content: center; }
.sb-bname b { display: block; color: #fff; font-size: 14px; font-weight: 800; letter-spacing: -.3px; }
.sb-bname b span { color: #a5a5ff; }
.sb-bname small { display: block; color: #7d81ab; font-size: 9px; margin-top: 1px; line-height: 1.3; }
.sb-label { font-size: 9px; text-transform: uppercase; letter-spacing: .5px; color: #6e7099; margin: 7px 8px 5px; }
.sidebar2 .nav { display: flex; flex-direction: column; gap: 5px; }
.sidebar2 .nav-item { display: flex; align-items: center; gap: 8px; border: none; background: transparent;
  color: #b9bcd8; padding: 8px 10px; border-radius: 12px; cursor: pointer; font-weight: 600;
  font-size: 13.5px; text-align: left; transition: background .15s, color .15s; }
.sb-ico { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px; background: rgba(255,255,255,.06);
  display: inline-flex; align-items: center; justify-content: center; transition: background .15s, color .15s; }
.sb-ico svg { width: 15px; height: 15px; }
.sidebar2 .nav-item:hover:not([disabled]) { background: rgba(255,255,255,.06); color: #fff; }
.sidebar2 .nav-item.active { background: #fff; color: #16182f; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.sidebar2 .nav-item.active .sb-ico { background: var(--accent); color: #fff; }
.sidebar2 .nav-item[disabled] { opacity: .45; cursor: default; }
.sb-soon { margin-left: auto; font-style: normal; font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: #8a8dbb; border: 1px solid #3a3d6b; border-radius: 999px; padding: 2px 7px; }
.sidebar2 .side-radar { position: absolute; left: -10px; bottom: 120px; opacity: .12; pointer-events: none; }
.sb-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.sb-user { display: flex; flex-direction: column; align-items: stretch; gap: 9px; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09); border-radius: 14px; padding: 11px 12px; }
.sb-uhead { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sb-uacts { display: flex; gap: 6px; }
.sb-uacts .sb-iconbtn { flex: 1; height: 32px; width: auto; }
.sb-uacts .sb-iconbtn:hover { background: rgba(255,255,255,.1); color: #fff; }
.sb-uacts .sb-iconbtn .pdot { position: absolute; top: 4px; left: 54%; width: 7px; height: 7px;
  border-radius: 50%; background: #ff4f6a; border: 1.5px solid #1a2130; }
.sb-avatar { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: var(--accent);
  color: #fff; font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; }
.sb-uinfo { min-width: 0; flex: 1; }
.sb-uinfo b { display: block; color: #fff; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-uinfo small { color: #7d81ab; font-size: 10.5px; }
.sb-iconbtn { position: relative; border: none; background: transparent; color: #8a8dbb; width: 28px; height: 28px;
  border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; }
.sb-iconbtn:hover { background: rgba(255,255,255,.1); color: #fff; }
.sidebar2 .quota-chip { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.15); color: #ffd166; }
.content { max-width: 1560px; width: 100%; margin-inline: auto; }   /* width:100% → umple celula până la cap, apoi centrat (fără gol pe 17") */
@media (max-width: 880px) {
  .app { grid-template-columns: 1fr; }
  .sidebar2 { position: static; height: auto; }
  .sidebar2 .nav { flex-direction: row; flex-wrap: wrap; }
}


/* Scanner: cardul-erou de căutare */
.scan-hero { padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; }
.scan-hero .search-box { flex: none; }
.search-box.scan-big input { padding: 15px 18px; font-size: 15px; border-radius: 13px; }
.search-box.scan-big button { padding: 0 28px; font-size: 15px; border-radius: 13px; }
.scan-divider { border-top: 1px dashed var(--line); padding-top: 14px; display: flex;
  flex-direction: column; gap: 10px; }
.scan-or { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.scan-divider select { border: 1px solid var(--line); background: #fff; border-radius: 10px;
  padding: 10px 13px; font-size: 13px; min-width: 210px; }
.cat-refresh { margin-left: auto; }
.results-wrap { border-radius: 16px; }


/* ═══ COMPOZIȚII NOI: pagini pe 2 coloane asimetrice (main + panou lateral) ═══ */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start; }
.split-rev { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 20px; align-items: start; }
.split-main { min-width: 0; }
.split-aside { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 22px; min-width: 0; }
@media (max-width: 1100px) { .split, .split-rev { grid-template-columns: 1fr; } .split-aside { position: static; } }

/* KPI în panoul lateral: 2×2 compact */
.split-aside .kpi-grid { grid-template-columns: 1fr 1fr; gap: 12px; margin: 0; }
.split-aside .kpi-card { padding: 13px 14px; gap: 10px; flex-direction: column; }
.split-aside .kpi-ico { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; }
.split-aside .kpi-value { font-size: 19px; }
.split-aside .kpi-sub { display: none; }
.split-aside .viz-grid { grid-template-columns: 1fr; gap: 16px; margin: 0; }
.split-aside .viz-card { padding: 18px 20px; }
.split-aside .journal-line { margin: 0; }
.split-aside .rk-hero { flex-direction: column; align-items: flex-start; gap: 14px; margin: 0; }
.split-aside .rk-hero-bar { max-width: none; width: 100%; }

/* Oportunități: filtrele ca panou VERTICAL în stânga */
.split-rev .filter-panel { margin: 0; padding: 18px 18px 16px; }
.split-rev .opp-toolbar { flex-direction: column; align-items: stretch; gap: 12px; }
.split-rev .opp-toolbar label { width: 100%; }
.split-rev .opp-toolbar input:not([type="checkbox"]), .split-rev .opp-toolbar select { width: 100%; }
/* checkbox-ul „Ascunde brand mare" trebuie să rămână mic — nu input full-width */
.split-rev .opp-toggle input[type="checkbox"], .opp-toggle input[type="checkbox"] {
  width: 16px !important; height: 16px !important; flex: 0 0 16px; }
.split-rev .opp-toggle { width: 100%; min-height: 38px; height: auto; padding: 9px 13px; gap: 9px; }
.split-rev .opp-toggle span { flex: 1; }
/* acțiuni: Caută primar normal; restul compacte (nu blocuri mari) */
.split-rev .opp-btn { height: 42px; }
.split-rev .ghost-btn { height: 34px; font-size: 12.5px; padding: 0 12px; box-shadow: none; }
.split-rev .seg { width: 100%; display: flex; }
.split-rev .seg-btn { flex: 1; }
.split-rev .opp-btn, .split-rev .ghost-btn { width: 100%; }
.split-rev .toolbar label.opp-toggle { width: 100%; justify-content: flex-start; }
.split-rev .opp-saved-chips { width: 100%; }

/* BuyBox în compoziția nouă: 2 carduri pe rând în coloana principală */
.split-main .bb-grid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); padding: 18px 20px; }


/* ═════════════ TREI ADN-URI DE DESIGN — comutabile live ═════════════ */
.theme-switch { display: flex; gap: 6px; }
.th-dot { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); color: #b9bcd8;
  border-radius: 9px; padding: 6px 4px; font-size: 10.5px; font-weight: 600; cursor: pointer; }
.th-dot span { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.th-dot:hover { background: rgba(255,255,255,.1); color: #fff; }
.th-dot.active { background: #fff; color: #16182f; border-color: #fff; }

/* ── ADN 1: STUDIO — cald, editorial: Plus Jakarta + Sora, crem + verde pădure, rotund ── */
[data-theme="studio"] body, [data-theme="studio"] { 
  --bg: #faf6ef; --panel: #fffdf9; --ink: #211b12; --muted: #7d7263; --line: #e9e1d2;
  --accent: #1f7a55; --accent-soft: #e7f2ea; --ai: #9a6a1f; --ai-soft: #f7efdf;
}
[data-theme="studio"] body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; background: #faf6ef; }
[data-theme="studio"] h1, [data-theme="studio"] .kpi-value, [data-theme="studio"] .sc-value,
[data-theme="studio"] .stat-value, [data-theme="studio"] .rk-hero-title, [data-theme="studio"] .card2-title,
[data-theme="studio"] .viz-title, [data-theme="studio"] .brand-name, [data-theme="studio"] .bb-prices b,
[data-theme="studio"] .bar-val { font-family: 'Sora', sans-serif; }
[data-theme="studio"] .sidebar2 { background: linear-gradient(180deg, #211b12, #2a2117); color: #cfc4b2; }
[data-theme="studio"] .sb-bname b { color: #faf3e7; }
[data-theme="studio"] .sb-bname b span { color: #6fc296; }
[data-theme="studio"] .sb-bname small, [data-theme="studio"] .sb-label { color: #8d8170; }
[data-theme="studio"] .sidebar2 .nav-item { color: #b9ac97; }
[data-theme="studio"] .sidebar2 .nav-item:hover:not([disabled]) { background: rgba(255,250,240,.07); color: #faf3e7; }
[data-theme="studio"] .sidebar2 .nav-item.active { background: #faf3e7; color: #211b12; }
[data-theme="studio"] .sidebar2 .nav-item.active .sb-ico { background: #1f7a55; }
[data-theme="studio"] .sb-ico { background: rgba(255,250,240,.07); }
[data-theme="studio"] .sb-mark { background: rgba(111,194,150,.12); border-color: rgba(111,194,150,.3); }
[data-theme="studio"] .sb-avatar { background: #1f7a55; }
[data-theme="studio"] .sb-user { background: rgba(255,250,240,.05); border-color: rgba(255,250,240,.1); }
[data-theme="studio"] .card2, [data-theme="studio"] .kpi-card, [data-theme="studio"] .viz-card,
[data-theme="studio"] .filter-panel, [data-theme="studio"] .results-wrap, [data-theme="studio"] .scan-hero,
[data-theme="studio"] .rk-hero, [data-theme="studio"] .scorecard { border-radius: 20px; border-color: #e9e1d2; box-shadow: 0 1px 2px rgba(60,45,20,.05); }
[data-theme="studio"] .bb-pcard { border-radius: 18px; border-color: #e9e1d2; background: #fffdf9; }
[data-theme="studio"] .opp-btn, [data-theme="studio"] .search-box button { background: #1f7a55; border-radius: 999px; }
[data-theme="studio"] .ghost-btn, [data-theme="studio"] .head-search { border-radius: 999px; }
[data-theme="studio"] .seg, [data-theme="studio"] .subnav { border-radius: 999px; background: #fffdf9; }
[data-theme="studio"] .seg-btn, [data-theme="studio"] .subnav-btn { border-radius: 999px; }
[data-theme="studio"] .seg-btn.active, [data-theme="studio"] .subnav-btn.active { background: #211b12; color: #faf3e7; }
[data-theme="studio"] table thead th { background: #fffdf9; color: #8d8170; }
[data-theme="studio"] table tbody td { border-bottom-color: #f2ecdf; }
[data-theme="studio"] table tbody tr:hover { background: #faf6ec; }
[data-theme="studio"] .bb-prices > div { background: #faf6ef; border-color: #f0e9da; }
[data-theme="studio"] .bb-actions .bb-apply { background: #1f7a55; }
[data-theme="studio"] .live-dot { background: #1f7a55; }
[data-theme="studio"] .bar-fill, [data-theme="studio"] .rk-hero-bar span { background: #1f7a55; }
[data-theme="studio"] .mp-tag.mp-emag { background: #e7f2ea; color: #1f5c44; }

/* ── ADN 2: STEEL — precis, tehnic: IBM Plex + Plex Mono pe cifre, slate + albastru, colțuri drepte ── */
[data-theme="steel"] body, [data-theme="steel"] {
  --bg: #f3f5f8; --panel: #ffffff; --ink: #0f172a; --muted: #5d6b81; --line: #d9e0ea;
  --accent: #0b66e4; --accent-soft: #e8f0fd; --ai: #6d28d9; --ai-soft: #f1eafd;
}
[data-theme="steel"] body { font-family: 'IBM Plex Sans', system-ui, sans-serif; background: #f3f5f8; }
[data-theme="steel"] .kpi-value, [data-theme="steel"] .sc-value, [data-theme="steel"] .stat-value,
[data-theme="steel"] .bb-prices b, [data-theme="steel"] .bar-val, [data-theme="steel"] td.num,
[data-theme="steel"] .rank-big, [data-theme="steel"] .score-cell b { font-family: 'IBM Plex Mono', monospace; letter-spacing: -.5px; }
[data-theme="steel"] h1 { font-weight: 600; letter-spacing: -.2px; }
[data-theme="steel"] .sidebar2 { background: #0e1726; color: #93a4bd; }
[data-theme="steel"] .sb-bname b { color: #f2f6fc; }
[data-theme="steel"] .sb-bname b span { color: #5ea2f7; }
[data-theme="steel"] .sidebar2 .nav-item { color: #93a4bd; border-radius: 6px; }
[data-theme="steel"] .sidebar2 .nav-item:hover:not([disabled]) { background: #16233a; color: #fff; }
[data-theme="steel"] .sidebar2 .nav-item.active { background: #0b66e4; color: #fff; box-shadow: none; }
[data-theme="steel"] .sidebar2 .nav-item.active .sb-ico { background: rgba(255,255,255,.18); color: #fff; }
[data-theme="steel"] .sb-ico { background: #16233a; border-radius: 6px; }
[data-theme="steel"] .sb-mark { background: #16233a; border-color: #24344f; border-radius: 8px; }
[data-theme="steel"] .sb-avatar { background: #0b66e4; }
[data-theme="steel"] .sb-user { background: #121e31; border-color: #1d2c44; border-radius: 8px; }
[data-theme="steel"] .card2, [data-theme="steel"] .kpi-card, [data-theme="steel"] .viz-card,
[data-theme="steel"] .filter-panel, [data-theme="steel"] .results-wrap, [data-theme="steel"] .scan-hero,
[data-theme="steel"] .rk-hero, [data-theme="steel"] .scorecard { border-radius: 8px; border: 1px solid #d9e0ea; box-shadow: none; }
[data-theme="steel"] .bb-pcard { border-radius: 8px; border: 1px solid #d9e0ea; }
[data-theme="steel"] .kpi-ico { border-radius: 6px; }
[data-theme="steel"] .opp-btn, [data-theme="steel"] .search-box button { background: #0b66e4; border-radius: 6px; }
[data-theme="steel"] .ghost-btn, [data-theme="steel"] .head-search { border-radius: 6px; }
[data-theme="steel"] .seg, [data-theme="steel"] .subnav { border-radius: 7px; box-shadow: none; }
[data-theme="steel"] .seg-btn, [data-theme="steel"] .subnav-btn { border-radius: 5px; }
[data-theme="steel"] .seg-btn.active, [data-theme="steel"] .subnav-btn.active { background: #0f172a; color: #fff; }
[data-theme="steel"] input, [data-theme="steel"] select { border-radius: 6px !important; }
[data-theme="steel"] table thead th { text-transform: none; font-size: 12px; letter-spacing: 0; color: #5d6b81; border-bottom: 1px solid #d9e0ea; }
[data-theme="steel"] table tbody td { border-bottom-color: #e8edf4; }
[data-theme="steel"] table tbody tr:hover { background: #f4f8fe; }
[data-theme="steel"] .bb-prices { border-radius: 6px; }
[data-theme="steel"] .bb-prices > div { background: #f7f9fc; }
[data-theme="steel"] .bb-actions .bb-apply { background: #0b66e4; border-radius: 6px; }
[data-theme="steel"] .live-dot { background: #0ca678; }
[data-theme="steel"] .bar-fill, [data-theme="steel"] .rk-hero-bar span { background: #0b66e4; }
[data-theme="steel"] .verdict { border-radius: 4px; }

/* ═══════════════ DESIGN „PANZE" — referința Gabrielei (warm gradient + topbar) ═══════════════ */
[data-theme="panze"] {
  --bg: #f3f5f9; --panel: #ffffff; --ink: #1b2030; --muted: #828aa0; --line: #e9edf4;
  --accent: #ff7a3d; --accent-soft: #fff1e8; --ai: #8b3df5; --ai-soft: #f4ecfe;
  --grad: linear-gradient(96deg, #ff8a3c 0%, #ff5d7a 100%);
}
[data-theme="panze"] body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; background: #f3f5f9; }
[data-theme="panze"] .app { grid-template-columns: 186px minmax(0,1fr); }

/* ── sidebar navy + pastilă activă gradient ── */
[data-theme="panze"] .sidebar2 { background: #1a2130; color: #99a2b6; padding: 18px 10px 14px; }
[data-theme="panze"] .sb-mark { background: rgba(255,138,60,.13); border-color: rgba(255,138,60,.28); }
[data-theme="panze"] .sb-bname b { color: #fff; font-family: 'Plus Jakarta Sans'; }
[data-theme="panze"] .sb-bname b span { color: #ff8a3c; }
[data-theme="panze"] .sb-bname small, [data-theme="panze"] .sb-label { color: #5d6678; }
[data-theme="panze"] .sidebar2 .nav-item { color: #9aa3b6; border-radius: 10px; padding: 8px 9px; font-weight: 600; font-size: 12px; }
[data-theme="panze"] .sb-ico { background: rgba(255,255,255,.05); border-radius: 9px; }
[data-theme="panze"] .sidebar2 .nav-item:not([disabled]):hover { background: #2c2740; color: #fff; box-shadow: inset 3px 0 0 #ff7a3d; }
[data-theme="panze"] .sidebar2 .nav-item:not([disabled]):hover .sb-ico { background: rgba(255,138,60,.32); color: #ffbf86; }
[data-theme="panze"] .sidebar2 .nav-item.active { background: var(--grad); color: #fff; box-shadow: 0 10px 22px rgba(255,93,122,.32); }
[data-theme="panze"] .sidebar2 .nav-item.active .sb-ico { background: rgba(255,255,255,.22); color: #fff; }
[data-theme="panze"] .sb-soon { color: #8089a0; border-color: #353d52; }
[data-theme="panze"] .side-radar { stroke: #ff8a3c; opacity: .1; }
[data-theme="panze"] .sb-user { background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); }
[data-theme="panze"] .sb-avatar { background: var(--grad); }
[data-theme="panze"] .sb-iconbtn:hover { background: rgba(255,255,255,.1); color: #fff; }
[data-theme="panze"] .theme-switch { display: none; }
[data-theme="panze"] .quota-chip { background: rgba(255,138,60,.12); border-color: rgba(255,138,60,.3); color: #ffb37a; }

/* ── topbar alb sticky — pe DESKTOP e ascuns (avatar/clopoțel/setări/ieșire stau în sidebar); reapare doar pe mobil ── */
[data-theme="panze"] .ptop { position: sticky; top: 0; z-index: 40; display: none; align-items: center; gap: 16px;
  background: #fff; border-bottom: 1px solid var(--line); margin: -30px -38px 26px; padding: 13px 30px; }
.ptop-brand { font: 800 16px 'Plus Jakarta Sans', sans-serif; color: var(--ink); }
.ptop-brand span { color: #ff8a3c; }
[data-theme="panze"] .ptop-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
[data-theme="panze"] .picon { position: relative; width: 40px; height: 40px; border-radius: 50%; border: none;
  background: #f1f3f8; color: #5c647a; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
[data-theme="panze"] .picon svg { width: 19px; height: 19px; }
[data-theme="panze"] .picon:hover { background: #e9ebf2; color: var(--ink); }
[data-theme="panze"] .pdot { position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 50%;
  background: #ff4f6a; border: 1.5px solid #fff; }
[data-theme="panze"] .pavatar2 { width: 40px; height: 40px; border-radius: 50%; background: var(--grad);
  color: #fff; font: 700 15px 'Plus Jakarta Sans'; display: inline-flex; align-items: center; justify-content: center; }

/* ── carduri mari rotunjite, umbre moi ── */
[data-theme="panze"] .card2, [data-theme="panze"] .kpi-card, [data-theme="panze"] .viz-card,
[data-theme="panze"] .filter-panel, [data-theme="panze"] .results-wrap, [data-theme="panze"] .scan-hero,
[data-theme="panze"] .rk-hero, [data-theme="panze"] .scorecard, [data-theme="panze"] .bb-pcard,
[data-theme="panze"] #bbSummary > .card2 {
  border-radius: 18px; border: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(20,30,55,.04), 0 8px 26px rgba(20,30,55,.05); }
[data-theme="panze"] .kpi-ico { border-radius: 12px; background: var(--accent-soft) !important; color: var(--accent) !important; }
[data-theme="panze"] .kpi-value, [data-theme="panze"] .sc-value, [data-theme="panze"] h1,
[data-theme="panze"] .card2-title, [data-theme="panze"] .rk-hero-title { font-family: 'Plus Jakarta Sans'; }

/* ── butoane & accente calde ── */
[data-theme="panze"] .opp-btn, [data-theme="panze"] .search-box button, [data-theme="panze"] .bb-actions .bb-apply,
[data-theme="panze"] .scan-hero .search-box button {
  background: var(--grad); border: none; border-radius: 12px; box-shadow: 0 8px 18px rgba(255,93,122,.28); }
[data-theme="panze"] .opp-btn:hover, [data-theme="panze"] .bb-apply:hover { filter: brightness(1.04); }
[data-theme="panze"] .bb-pcard .bb-apply { background: var(--grad); }
[data-theme="panze"] .seg-btn.active, [data-theme="panze"] .subnav-btn.active,
[data-theme="panze"] .lh-tab.on { background: var(--grad); color: #fff; }
[data-theme="panze"] .seg, [data-theme="panze"] .subnav { border-radius: 13px; }
[data-theme="panze"] .seg-btn, [data-theme="panze"] .subnav-btn { border-radius: 10px; }
[data-theme="panze"] .head-search, [data-theme="panze"] input, [data-theme="panze"] select { border-radius: 11px; }
[data-theme="panze"] .live-dot { background: #ff7a3d; }
[data-theme="panze"] .bar-fill, [data-theme="panze"] .rk-hero-bar span { background: var(--grad); }
[data-theme="panze"] .mp-tag.mp-emag { background: var(--accent-soft); color: #c2510f; }
[data-theme="panze"] .verdict.v-top { background: #fff1e8; color: #c2510f; }
[data-theme="panze"] table thead th { background: #fff; color: #8a92a6; text-transform: none; font-size: 12px; letter-spacing: 0; }
[data-theme="panze"] table tbody tr:hover { background: #fbf7f4; }
[data-theme="panze"] .content { padding: 30px 38px 80px; }
[data-theme="panze"] .view-head h1 { font-size: 25px; letter-spacing: -.5px; }

/* ═══════ Product Research — componente stil ZeffScout (pe panze) ═══════ */
.rs-searchbar { display: flex; gap: 12px; margin: 0 0 18px; }
.rs-searchbar select { flex: 1; max-width: 560px; padding: 13px 16px; border: 1px solid var(--line);
  border-radius: 13px; font-size: 14px; background: #fff; }
.rs-hero { display: flex; gap: 18px; align-items: center; background: var(--panel); border: 1px solid var(--line);
  border-radius: 18px; padding: 20px 22px; box-shadow: 0 1px 3px rgba(20,30,55,.04), 0 8px 26px rgba(20,30,55,.05); margin-bottom: 18px; }
.rs-img { width: 84px; height: 84px; flex: 0 0 84px; border-radius: 14px; object-fit: contain; background: #fff; border: 1px solid var(--line); }
.rs-img-ph { display: inline-flex; align-items: center; justify-content: center; font-size: 30px; background: var(--accent-soft); }
.rs-hero-mid { flex: 1; min-width: 0; }
.rs-title { font: 700 17px/1.3 'Plus Jakarta Sans'; color: var(--ink); }
.rs-sub { font-size: 14px; margin-top: 4px; }
.rs-sub b { font-size: 17px; font-family: 'Plus Jakarta Sans'; }
.rs-badges { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.rs-badge { font-size: 11.5px; font-weight: 600; padding: 4px 11px; border-radius: 999px; }
.rs-searchbar { display: flex; gap: 10px; align-items: center; }
.rs-searchbar select { flex: 1; min-width: 0; }
.rs-gauge { flex: 0 0 auto; text-align: center; }
.rs-gauge svg { display: block; margin: 0 auto; }
/* numărul de scor stă SUB arc (nu peste ac): mare + verdict colorat */
.rs-gauge-lbl { display: flex; flex-direction: column; align-items: center; gap: 1px; margin-top: -4px; }
.rs-gauge-lbl > b { font: 800 26px 'Plus Jakarta Sans', sans-serif; line-height: 1; letter-spacing: -.5px; }
.rs-gauge-lbl > span { font: 600 9px 'Plus Jakarta Sans', sans-serif; letter-spacing: .4px; color: #97a0b3; text-transform: uppercase; }
.rs-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 1000px) { .rs-grid2 { grid-template-columns: 1fr; } }
.rs-card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px;
  box-shadow: 0 1px 3px rgba(20,30,55,.04), 0 8px 26px rgba(20,30,55,.05); }
.rs-sec-h { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
/* preț în nișă — compact, o singură linie */
.rs-pband { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding: 9px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; font: 600 12px 'Plus Jakarta Sans'; color: var(--ink); }
.rs-pband-lbl { font-weight: 800; color: #5b647a; text-transform: uppercase; font-size: 10px; letter-spacing: .4px; }
.rs-pband-track { position: relative; flex: 1; min-width: 90px; height: 6px; border-radius: 99px; background: linear-gradient(90deg, #4ade80, #60a5fa, #a78bfa); }
.rs-pband-dot { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: #ec4899; border: 2px solid #fff; transform: translate(-50%, -50%); box-shadow: 0 0 6px rgba(236,72,153,.6); }
.rs-pband-meta { color: #97a0b3; font-size: 11px; white-space: nowrap; }
.rs-pill { font: 700 11px 'Plus Jakarta Sans'; letter-spacing: .6px; padding: 5px 11px; border-radius: 8px; }
.rs-sec-r { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.rs-box-row { display: flex; gap: 12px; }
.rs-box { flex: 1; background: #f7f8fb; border: 1px solid #eef0f5; border-radius: 13px; padding: 13px 15px; min-width: 0; }
.rs-box-l { font: 700 10px 'Plus Jakarta Sans'; letter-spacing: .5px; color: #97a0b3; }
.rs-box-v { font: 800 24px 'Plus Jakarta Sans'; letter-spacing: -.5px; color: var(--ink); margin-top: 3px; }
.rs-box-v small { font-size: 13px; color: var(--muted); font-weight: 700; }
.rs-box-s { font-size: 11px; color: #97a0b3; margin-top: 2px; }
.rs-kw-t { font: 700 10.5px 'Plus Jakarta Sans'; letter-spacing: .5px; color: #97a0b3; text-transform: uppercase; margin: 16px 0 8px; }
.rs-kw { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid #f3f4f8; font-size: 13px; }
.rs-kw:last-child { border-bottom: none; }
.rs-kw span { display: flex; align-items: center; gap: 8px; color: var(--ink); }
.rs-kw i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.rs-kw b { font: 800 16px 'Plus Jakarta Sans'; }
.rs-real { background: #e6f7ee; border: 1px solid #c2ead2; border-radius: 11px; padding: 10px 13px; font-size: 12.5px; color: #107a43; margin-top: 12px; line-height: 1.5; }
.rs-costbar { height: 11px; border-radius: 999px; background: #e6f7ee; overflow: hidden; margin: 14px 0 5px; }
.rs-costbar span { display: block; height: 11px; border-radius: 999px; background: linear-gradient(90deg,#ff8a3c,#ff5d7a); }
.rs-costbar-l { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); }
.rs-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.rs-chip { background: var(--accent-soft); color: #c2510f; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; }
.rs-supplier { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 12px; margin-bottom: 8px; text-decoration: none; }
.rs-supplier:hover { border-color: var(--accent); }
.rs-supplier b { color: var(--ink); font-size: 14px; }
.rs-supplier small { color: var(--muted); font-size: 11.5px; width: 100%; }
.rs-supplier span { margin-left: auto; color: var(--accent); font-size: 16px; }
.rs-tips { font-size: 11.5px; color: var(--muted); margin-top: 8px; line-height: 1.5; }

/* ═══════ Sidebar: grupuri + card Pro mov (ref. Gabriela) ═══════ */
.sidebar2 .nav .sb-label:first-child { margin-top: 2px; }
.sb-pro { display: block; margin: 14px 4px 12px; padding: 15px 16px; border-radius: 16px; text-decoration: none;
  background: linear-gradient(150deg, #7c3aed 0%, #d6469b 100%); color: #fff; box-shadow: 0 10px 24px rgba(124,58,237,.3); }
.sb-pro b { font: 700 14px 'Plus Jakarta Sans'; display: block; }
.sb-pro small { display: block; font-size: 11.5px; opacity: .9; margin: 4px 0 11px; line-height: 1.45; }
.sb-pro-btn { display: block; text-align: center; background: rgba(255,255,255,.96); color: #7c3aed;
  font: 700 12.5px 'Plus Jakarta Sans'; padding: 9px; border-radius: 11px; }

/* ═══════ Prezentare — homepage dashboard ═══════ */
.pz-crumbs { font: 700 13px 'Plus Jakarta Sans'; color: var(--ink); margin: 0 0 18px; }
.pz-crumbs span { color: var(--muted); margin: 0 4px; }
.pz-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-bottom: 18px; }
.pz-card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px;
  box-shadow: 0 1px 3px rgba(20,30,55,.04), 0 8px 26px rgba(20,30,55,.05); }
.pz-card-h { display: flex; align-items: center; gap: 10px; }
.pz-card-ico { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; }
.pz-card-t { font: 600 13.5px 'Plus Jakarta Sans'; color: var(--muted); }
.pz-card-big { font: 800 26px 'Plus Jakarta Sans'; letter-spacing: -.6px; color: var(--ink); margin: 12px 0 3px; }
.pz-card-s { font-size: 12.5px; color: var(--muted); }
/* F1: KPI cu bordură colorată sus + pastilă semantică (design-system-diagrame.md) */
.pz-card .pz-card-t { letter-spacing: .4px; font-size: 11px; font-weight: 700; text-transform: uppercase; color: #97a0b3; }
.pz-card .pz-card-big { margin: 8px 0 9px; }
.pz-pill { display: inline-block; font: 700 11px 'Plus Jakarta Sans'; padding: 4px 10px; border-radius: 99px; }
.pz-mid { display: grid; grid-template-columns: 360px minmax(0,1fr); gap: 18px; margin-bottom: 18px; }
.pz-bottom { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 1000px) { .pz-mid, .pz-bottom { grid-template-columns: 1fr; } }
.pz-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 20px 22px;
  box-shadow: 0 1px 3px rgba(20,30,55,.04), 0 8px 26px rgba(20,30,55,.05); }
.pz-panel-t { font: 700 14px 'Plus Jakarta Sans'; color: var(--ink); margin-bottom: 16px; }
.pz-panel-t small { font-weight: 500; font-size: 12px; }
.pz-donut-row { display: flex; align-items: center; gap: 20px; }
.pz-legend { display: flex; flex-direction: column; gap: 11px; font-size: 13.5px; color: var(--muted); }
.pz-legend .d { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; }
.pz-legend b { color: var(--ink); margin-left: 5px; }
.pz-chart { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding-top: 8px; }
.pz-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; height: 100%; }
.pz-bar-cols { flex: 1; display: flex; align-items: flex-end; gap: 3px; width: 100%; justify-content: center; }
.pz-bar-c1 { width: 13px; border-radius: 5px 5px 0 0; background: linear-gradient(180deg,#ff8a3c,#ff5d7a); min-height: 4px; }
.pz-bar-c2 { width: 13px; border-radius: 5px 5px 0 0; background: #e3e6ee; min-height: 4px; }
.pz-bar small { font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pz-li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f3f4f8; }
.pz-li:last-child { border-bottom: none; }
.pz-li-t { flex: 1; min-width: 0; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pz-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.pz-score { font: 700 11.5px 'Plus Jakarta Sans'; padding: 4px 10px; border-radius: 999px; }
.pz-check { width: 17px; height: 17px; flex: 0 0 17px; border-radius: 50%; border: 2px solid #d4d8e2; }
.pz-check.on { border-color: #16a34a; background: #16a34a; position: relative; }
.pz-check.on::after { content: "✓"; color: #fff; font-size: 10px; position: absolute; top: -2px; left: 2px; }

/* ═══════ Chenare interactive „misto cu umbre" (ref. ZeffScout) — elevație + hover-lift ═══════ */
[data-theme="panze"] .card2, [data-theme="panze"] .kpi-card, [data-theme="panze"] .viz-card,
[data-theme="panze"] .pz-card, [data-theme="panze"] .pz-panel, [data-theme="panze"] .rs-card,
[data-theme="panze"] .rs-hero, [data-theme="panze"] .bb-pcard, [data-theme="panze"] .filter-panel,
[data-theme="panze"] .scan-hero, [data-theme="panze"] .rk-hero {
  box-shadow: 0 1px 2px rgba(23,32,58,.04), 0 10px 30px -8px rgba(23,32,58,.10);
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s ease, border-color .2s ease;
}
/* tile-urile (carduri-țiglă) se RIDICĂ la hover — senzația interactivă cerută */
[data-theme="panze"] .kpi-card:hover, [data-theme="panze"] .pz-card:hover,
[data-theme="panze"] .viz-card:hover, [data-theme="panze"] .rs-card:hover,
[data-theme="panze"] .bb-pcard:hover, [data-theme="panze"] .pz-panel:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(23,32,58,.05), 0 22px 44px -12px rgba(255,93,122,.22);
  border-color: #f0d6cf;
}
/* panourile cu tabel: nu se ridică (ar fi ciudat), dar umbra se adâncește la hover */
[data-theme="panze"] .card2:hover { box-shadow: 0 2px 4px rgba(23,32,58,.05), 0 18px 40px -10px rgba(23,32,58,.14); }

/* ═══════ Efect „futurist": apariții line, bare care cresc, glow pe inele/donut ═══════ */
@keyframes mr-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes mr-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes mr-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
[data-theme="panze"] #pzBody .pz-card, [data-theme="panze"] #pzBody .pz-panel,
[data-theme="panze"] #rsBody .rs-hero, [data-theme="panze"] #rsBody .rs-card,
[data-theme="panze"] .bb-pcard, [data-theme="panze"] #myOffersTitle .kpi-card,
[data-theme="panze"] #bbSummary .kpi-card {
  animation: mr-rise .5s cubic-bezier(.2,.7,.3,1) both;
}
[data-theme="panze"] .pz-bar-c1, [data-theme="panze"] .pz-bar-c2 {
  transform-origin: bottom; animation: mr-grow-y .75s cubic-bezier(.2,.7,.3,1) both;
}
[data-theme="panze"] .bar-fill, [data-theme="panze"] .stack-bar span,
[data-theme="panze"] .rk-hero-bar span, [data-theme="panze"] .rs-costbar span {
  transform-origin: left; animation: mr-grow-x .85s cubic-bezier(.2,.7,.3,1) both;
}
/* glow cald subtil pe inele de scor + donut (senzația „futurist") */
[data-theme="panze"] .rs-gauge svg, [data-theme="panze"] .pz-donut-row svg,
[data-theme="panze"] .rk-hero > svg {
  filter: drop-shadow(0 5px 14px rgba(255,122,61,.20));
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="panze"] * { animation: none !important; }
}

/* combobox subcategorie cu căutare (Oportunități) */
.cat-combo { position: relative; display: block; }
.cat-combo input[type="text"] { width: 100%; padding-right: 30px; }
.cat-combo-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; cursor: pointer; font-size: 12px;
  color: var(--muted); padding: 4px 6px; border-radius: 8px; line-height: 1;
}
.cat-combo-clear:hover { background: #eef0f5; color: var(--ink); }
.cat-combo-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60;
  background: #fff; border: 1px solid #e7eaf1; border-radius: 12px;
  box-shadow: 0 14px 34px rgba(16, 24, 40, .14);
  max-height: 290px; overflow-y: auto; padding: 5px;
  text-transform: none; letter-spacing: normal; font-weight: 500; color: var(--ink);
}
.cat-combo-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-radius: 9px; cursor: pointer; font-size: 12.8px;
}
.cat-combo-row:hover { background: var(--accent-soft, #fff1e8); }
.cat-combo-row small { color: var(--muted); font-size: 10.5px; white-space: nowrap; }
.cat-combo-empty { padding: 9px 10px; color: var(--muted); font-size: 12px; }

/* Optimizator — bara de căutare produs din catalog (type-ahead nume/SKU) */
.opt-pick { max-width: 540px; margin: 2px 0 16px; }
.opt-pick input[type="text"] {
  padding: 13px 36px 13px 16px; font-size: 14px; font-weight: 500;
  border: 1px solid var(--line, #e2e6ee); border-radius: 11px; background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
}
.opt-pick input[type="text"]:focus { border-color: #ff8a3c; outline: none; box-shadow: 0 0 0 3px rgba(255, 138, 60, .15); }
.opt-pick .cat-combo-row b { font-variant-numeric: tabular-nums; }

/* ── F5/F6 din design-system-diagrame.md: pastile de scor + rânduri-card în tabele ── */
.score-pill { display: inline-block; min-width: 38px; text-align: center;
  font: 700 12px 'Plus Jakarta Sans'; padding: 4px 11px; border-radius: 99px; }
[data-theme="panze"] #oppTable, [data-theme="panze"] #resultsTable, [data-theme="panze"] #rkTable {
  border-collapse: separate; border-spacing: 0 7px;
}
[data-theme="panze"] #oppTable tbody td, [data-theme="panze"] #resultsTable tbody td,
[data-theme="panze"] #rkTable tbody td {
  background: #f8f9fc; border-top: 1px solid #e7eaf1; border-bottom: 1px solid #e7eaf1;
}
[data-theme="panze"] #oppTable tbody td:first-child, [data-theme="panze"] #resultsTable tbody td:first-child,
[data-theme="panze"] #rkTable tbody td:first-child {
  border-left: 1px solid #e7eaf1; border-radius: 10px 0 0 10px;
}
[data-theme="panze"] #oppTable tbody td:last-child, [data-theme="panze"] #resultsTable tbody td:last-child,
[data-theme="panze"] #rkTable tbody td:last-child {
  border-right: 1px solid #e7eaf1; border-radius: 0 10px 10px 0;
}
[data-theme="panze"] #oppTable tbody tr:hover td, [data-theme="panze"] #resultsTable tbody tr:hover td,
[data-theme="panze"] #rkTable tbody tr:hover td {
  background: #fff; border-color: #dde2ec;
}

/* ═══════════ Optimizator Listări (Analizorul) — panze, vibrant ═══════════ */
.opt-search .opt-link-inp { flex: 1; min-width: 0; max-width: 320px; padding: 13px 16px; border: 1px solid var(--line);
  border-radius: 12px; font-size: 13.5px; outline: none; background: var(--panel); box-shadow: var(--shadow); }
.opt-search .opt-link-inp:focus { border-color: #ff8a3c; }
/* selector de scenarii (F-C) — coloană pe STÂNGA, conținutul (căutare + audit + grilă) în dreapta */
.opt-layout { display: grid; grid-template-columns: minmax(240px, 280px) minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 14px; }
.opt-main { min-width: 0; }
.opt-scn { display: flex; flex-direction: column; gap: 10px; margin: 0; }
@media (max-width: 980px) { .opt-layout { grid-template-columns: 1fr; } .opt-scn { flex-direction: row; flex-wrap: wrap; } .opt-scn-b { flex: 1; min-width: 220px; } }
.opt-scn-b { text-align: left; cursor: pointer; background: var(--panel); border: 1.5px solid var(--line);
  border-radius: 14px; padding: 14px 16px; transition: .15s; }
.opt-scn-b b { display: block; font: 800 14px 'Plus Jakarta Sans'; color: var(--ink); }
.opt-scn-b span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.4; }
.opt-scn-b:hover { border-color: #c7b4ee; }
.opt-scn-b.active { border-color: #7c3aed; background: linear-gradient(180deg,#f6f0ff,#fff); box-shadow: 0 4px 14px rgba(124,58,237,.13); }
.opt-scn-input { margin-bottom: 16px; }
.opt-scn-input:empty { margin: 0; }
.opt-newform .opt-nf { display: block; font: 700 12.5px 'Plus Jakarta Sans'; color: var(--ink); margin-bottom: 14px; }
.opt-newform .opt-nf input, .opt-newform .opt-nf textarea { display: block; width: 100%; box-sizing: border-box;
  margin-top: 6px; border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; font: 400 13.5px 'Plus Jakarta Sans'; outline: none; resize: vertical; }
.opt-newform .opt-nf input:focus, .opt-newform .opt-nf textarea:focus { border-color: #7c3aed; }
.opt-nf-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; }
.opt-kpis { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-bottom: 18px; }
.opt-kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px;
  box-shadow: 0 4px 16px rgba(16,24,40,.07); border-top: 3px solid #ff8a3c; }
.opt-kpi:nth-child(2) { border-top-color: #3d7bff; }
.opt-kpi:nth-child(3) { border-top-color: #22c55e; }
.opt-kpi-l { font: 700 11px 'Plus Jakarta Sans'; letter-spacing: .4px; color: #97a0b3; text-transform: uppercase; }
.opt-kpi-v { font: 800 28px 'Plus Jakarta Sans'; letter-spacing: -.5px; color: var(--ink); margin-top: 4px; }
.opt-kpi-v i { font-size: 15px; font-style: normal; color: var(--muted); font-weight: 700; }
.opt-grid-h { font: 700 14px 'Plus Jakarta Sans'; color: var(--ink); margin: 6px 2px 12px; }
.opt-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 12px; }
.opt-card { display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 11px 13px;
  box-shadow: 0 3px 12px rgba(16,24,40,.06); transition: transform .12s, box-shadow .12s; }
.opt-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(16,24,40,.12); }
.opt-card-img { width: 50px; height: 50px; flex: 0 0 50px; border-radius: 11px; object-fit: contain; background: #fff; border: 1px solid var(--line); }
.opt-card-ph { display: inline-flex; align-items: center; justify-content: center; font-size: 22px; background: var(--accent-soft); }
.opt-card-mid { flex: 1; min-width: 0; }
.opt-card-t { font: 700 13px/1.3 'Plus Jakarta Sans'; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opt-card-s { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.opt-card-score { flex: 0 0 auto; font: 800 16px 'Plus Jakarta Sans'; min-width: 40px; text-align: center;
  padding: 7px 9px; border-radius: 11px; }
.opt-card-noscore { font-size: 11px; font-weight: 700; background: #eef0f5; color: #97a0b3; text-transform: uppercase; letter-spacing: .4px; }
.opt-loading { text-align: center; padding: 56px 20px; color: var(--ink); }
.opt-loading p { margin-top: 16px; line-height: 1.6; font-size: 14px; }
.opt-spin { width: 44px; height: 44px; margin: 0 auto; border-radius: 50%;
  border: 4px solid #eef0f5; border-top-color: #ff8a3c; animation: optspin .8s linear infinite; }
@keyframes optspin { to { transform: rotate(360deg); } }
.opt-err { background: #fdecec; border: 1px solid #f6c9c9; color: #b3261e; border-radius: 14px;
  padding: 18px 20px; font-size: 14px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.opt-back { border: none; background: var(--panel); border: 1px solid var(--line); color: var(--ink);
  font-weight: 700; padding: 8px 14px; border-radius: 10px; cursor: pointer; font-size: 13px; margin-bottom: 14px; box-shadow: var(--shadow); }
.opt-back:hover { background: #f4f6fb; }
.opt-empty { text-align: center; padding: 50px 24px; color: var(--muted); }
.opt-empty-ic { font-size: 40px; }
.opt-empty h3 { color: var(--ink); margin: 12px 0 6px; }
.opt-empty p { max-width: 460px; margin: 0 auto; line-height: 1.6; font-size: 13.5px; }
.opt-hero { align-items: center; }
.opt-verdict { font: 800 13px 'Plus Jakarta Sans'; letter-spacing: .5px; text-transform: uppercase; margin-top: 4px; }
.opt-cap { background: linear-gradient(90deg,#fff3e6,#fdecec); border: 1px solid #f6d2b0; color: #9a3412;
  border-radius: 14px; padding: 13px 17px; font-size: 13px; font-weight: 600; margin-top: 14px; }
.opt-grid2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-top: 16px; }
.opt-side { display: flex; flex-direction: column; gap: 16px; }
.opt-pane { padding: 18px 20px; }
.opt-pane-h { font: 700 14px 'Plus Jakarta Sans'; color: var(--ink); margin-bottom: 14px; }
.opt-pane-h .muted { font-weight: 600; font-size: 12px; }

/* POLISH (15.06): raportul de scor instant — hero navy + headere cu accent (gata de „light pe light") */
#view-optimizator .opt-hero {
  background: linear-gradient(120deg, #1b2236 0%, #2c3553 100%);
  border-color: transparent; box-shadow: 0 14px 36px -12px rgba(20,28,50,.5);
}
#view-optimizator .opt-hero .rs-title { color: #fff; }
#view-optimizator .opt-hero .rs-sub { color: #c4ccdf; }
#view-optimizator .opt-hero .rs-sub b { color: #fff; }
#view-optimizator .opt-hero .rs-sub .muted { color: #97a2be; }
#view-optimizator .opt-hero .opt-ext { color: #ffb38a; font-weight: 700; }
#view-optimizator .opt-hero .rs-gauge-lbl > span { color: #aab4cc; }
#view-optimizator .opt-hero .rs-img { background: #fff; border-color: rgba(255,255,255,.18); }
/* headere de secțiune cu bară-accent gradient = delimitare clară, nu text plat pe alb */
#view-optimizator .opt-pane > .opt-pane-h { position: relative; padding-left: 13px; font-weight: 800; }
#view-optimizator .opt-pane > .opt-pane-h::before {
  content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 4px; border-radius: 3px;
  background: linear-gradient(180deg, #ff8a3c, #ff5d7a);
}
/* carduri care se ridică net de pe fundalul deschis */
#view-optimizator .opt-pane { border-color: #e5e8f1; box-shadow: 0 3px 14px rgba(16,24,40,.055); }
.opt-dim { margin-bottom: 15px; }
.opt-dim:last-child { margin-bottom: 0; }
.opt-dim-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.opt-dim-n { font: 600 13px 'Plus Jakarta Sans'; color: var(--ink); }
.opt-dim-sc { font: 800 15px 'Plus Jakarta Sans'; }
.opt-dim-sc i { font-size: 11px; font-style: normal; color: var(--muted); font-weight: 600; }
.opt-dim-track { height: 9px; background: #eef0f5; border-radius: 999px; overflow: hidden; }
.opt-dim-fill { display: block; height: 100%; border-radius: 999px; }
.opt-dim-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 5px; font-size: 10.5px; color: #97a0b3; }
.opt-tag { font: 700 9.5px 'Plus Jakarta Sans'; letter-spacing: .3px; padding: 3px 8px; border-radius: 999px; text-transform: uppercase; }
.opt-tag-ranking { background: #e8f0ff; color: #2563eb; }
.opt-tag-conversion { background: #fde9f2; color: #db2777; }
.opt-tag-both { background: #ede9fe; color: #7c3aed; }
.opt-sub { margin-bottom: 14px; }
.opt-sub-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font: 600 12.5px 'Plus Jakarta Sans'; color: var(--ink); }
.opt-sub-h b { font: 800 16px 'Plus Jakarta Sans'; }
.opt-hist { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #eef0f5; }
.opt-hist-l { font: 600 11px 'Plus Jakarta Sans'; color: #97a0b3; text-transform: uppercase; letter-spacing: .4px; flex: 1; }
.opt-quick { background: linear-gradient(135deg,#fff7ed,#fef6fb); border: 1px solid #fde4cf; border-radius: 16px; padding: 16px 18px; }
.opt-quick-h { font: 800 13px 'Plus Jakarta Sans'; color: #c2410c; margin-bottom: 11px; }
.opt-quick-i { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--ink); line-height: 1.45; margin-bottom: 9px; }
.opt-quick-i:last-child { margin-bottom: 0; }
.opt-quick-g { flex: 0 0 auto; font: 800 11px 'Plus Jakarta Sans'; background: #16a34a; color: #fff; padding: 2px 8px; border-radius: 999px; }
.opt-issues { display: flex; flex-direction: column; gap: 10px; }
.opt-issue { background: #f9fafc; border: 1px solid #eef0f5; border-left: 4px solid #ccc; border-radius: 11px; padding: 12px 15px; }
.opt-issue-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; }
.opt-issue-sev { font: 700 10px 'Plus Jakarta Sans'; letter-spacing: .3px; padding: 3px 9px; border-radius: 999px; text-transform: uppercase; }
.opt-issue-code { font: 700 11px 'Plus Jakarta Sans'; color: #97a0b3; }
.opt-issue-gain { margin-left: auto; font: 800 11px 'Plus Jakarta Sans'; color: #16a34a; background: #e8f8ee; padding: 3px 9px; border-radius: 999px; }
.opt-issue-t { font-size: 13px; line-height: 1.5; color: #3a4150; }
.opt-allgood { background: #e8f8ee; border: 1px solid #bbe9cc; color: #107a43; border-radius: 12px; padding: 16px; font-weight: 600; text-align: center; }
.opt-stats { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; }
.opt-stat { border-radius: 13px; padding: 13px 12px; text-align: center; border: 1px solid #eef0f5; background: #f9fafc; }
.opt-stat-ok { background: #f0faf4; border-color: #cdeed9; }
.opt-stat-no { background: #fff6ee; border-color: #fadbc0; }
.opt-stat-l { font: 700 10px 'Plus Jakarta Sans'; letter-spacing: .4px; color: #97a0b3; text-transform: uppercase; }
.opt-stat-v { font: 800 20px 'Plus Jakarta Sans'; color: var(--ink); margin: 4px 0 2px; }
.opt-stat-i { font-size: 10px; color: var(--muted); }
.opt-ext { font-size: 12px; color: #2563eb; text-decoration: none; margin-left: 6px; }
.opt-ext:hover { text-decoration: underline; }
.opt-topattr { background: linear-gradient(135deg,#fff7ed,#fef6fb); border: 1px solid #fde4cf; border-radius: 12px;
  padding: 11px 15px; font-size: 13px; color: var(--ink); margin-bottom: 14px; }
.opt-topattr b { color: #c2410c; }
.opt-theme-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.opt-theme-l { font: 700 11px 'Plus Jakarta Sans'; color: #97a0b3; letter-spacing: .3px; flex: 0 0 auto; margin-right: 4px; }
.opt-theme { display: inline-flex; align-items: center; gap: 5px; font: 600 12px 'Plus Jakarta Sans';
  padding: 5px 11px; border-radius: 999px; }
.opt-theme i { font-style: normal; font-weight: 800; font-size: 10px; opacity: .65; }
.opt-theme-pos { background: #e8f8ee; color: #107a43; }
.opt-theme-neg { background: #fff1ec; color: #c0392b; }

/* generator de imagini (Etapa 2A) */
.opt-gencta { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: linear-gradient(96deg, #fff3e6, #fef0f6); border: 1px solid #fbdcc6; border-radius: 18px; padding: 18px 22px; flex-wrap: wrap; }
.opt-gencta b { font: 800 15px 'Plus Jakarta Sans'; color: #c2410c; display: block; }
.opt-gencta span { font-size: 12.5px; color: #6b5340; display: block; margin-top: 3px; max-width: 620px; }
.opt-gen .opt-pane-h { margin-bottom: 16px; }
.opt-brandkit { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #f7f8fb;
  border: 1px solid #eef0f5; border-radius: 14px; padding: 12px 16px; margin-bottom: 18px; }
.opt-bk-l { font: 800 12px 'Plus Jakarta Sans'; letter-spacing: .4px; color: #97a0b3; text-transform: uppercase; }
.opt-bk-c { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.opt-bk-c input[type=color] { width: 34px; height: 30px; border: 1px solid var(--line); border-radius: 8px; padding: 0; background: none; cursor: pointer; }
.opt-bk-name { flex: 1; min-width: 160px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-size: 13px; outline: none; }
.opt-bk-name:focus { border-color: #ff8a3c; }
.opt-bk-save { border: none; background: var(--ink); color: #fff; font-weight: 700; padding: 9px 16px; border-radius: 10px; cursor: pointer; font-size: 12.5px; }
.opt-gen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.opt-gen-card { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff;
  box-shadow: 0 3px 12px rgba(16,24,40,.06); display: flex; flex-direction: column; }
.opt-gen-cv { width: 100%; height: auto; display: block; background: #fff; border-bottom: 1px solid var(--line); aspect-ratio: 1 / 1; }
/* generator AI (rebuild): upload + imagine generată + chat */
.opt-upload { border: 2px dashed #d8c6ef; border-radius: 16px; background: #faf7ff; padding: 18px; margin-bottom: 18px; cursor: pointer; transition: .15s; }
.opt-upload.drag { border-color: #7c3aed; background: #f3ecff; }
.opt-upload-empty { text-align: center; color: #6b5b8a; font-size: 28px; }
.opt-upload-empty b { display: block; font: 800 15px 'Plus Jakarta Sans'; color: var(--ink); margin-top: 6px; }
.opt-upload-empty span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.opt-photos { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.opt-photo { position: relative; width: 84px; height: 84px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.opt-photo img { width: 100%; height: 100%; object-fit: contain; }
.opt-photo-rm { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border: none; border-radius: 50%; background: rgba(20,12,30,.7); color: #fff; cursor: pointer; font-size: 14px; line-height: 1; }
.opt-photo-add { width: 84px; height: 84px; border: 2px dashed #d8c6ef; border-radius: 12px; background: #fff; color: #7c3aed; font-size: 26px; cursor: pointer; }
.opt-upload-hint { font-size: 11.5px; color: var(--muted); margin-top: 9px; }
.opt-gen-canvas { width: 100%; aspect-ratio: 1 / 1; background: #f7f8fb; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.opt-gen-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.opt-gen-ph { color: #9aa3b6; font-size: 13px; font-weight: 600; text-align: center; padding: 16px; }
.opt-gen-busy { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; text-align: center; padding: 16px; }
.opt-chat { display: flex; gap: 6px; }
.opt-chat-inp { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; font-size: 12px; font-family: inherit; outline: none; }
.opt-chat-inp:focus { border-color: #7c3aed; }
.opt-chat-send { flex: 0 0 auto; border: none; background: #7c3aed; color: #fff; border-radius: 9px; width: 38px; cursor: pointer; font-size: 15px; }

/* F-B: meniu generare paritate Masat — secțiuni delimitate (Referințe · Brand Kit · Sloturi) */
.opt-gsec { background: #fff; border: 1px solid #e7eaf2; border-radius: 16px; padding: 16px 18px; margin-bottom: 16px;
  box-shadow: 0 2px 10px rgba(16,24,40,.04); }
.opt-gsec-h { display: flex; align-items: center; gap: 10px; font: 800 14.5px 'Plus Jakarta Sans'; color: var(--ink); margin-bottom: 14px; flex-wrap: wrap; }
.opt-gsec-n { flex: 0 0 auto; width: 25px; height: 25px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #ff8a3c, #ff5d7a); color: #fff; font: 800 13px 'Plus Jakarta Sans'; box-shadow: 0 3px 8px rgba(255,93,122,.35); }
.opt-gsec-d { font: 600 11.5px 'Plus Jakarta Sans'; color: var(--muted); flex: 1 1 auto; }
.opt-gsec .opt-upload { margin-bottom: 0; }
/* Brand Kit cu logo */
.opt-bk2 { display: flex; align-items: stretch; gap: 16px; flex-wrap: wrap; }
.opt-bk-logo { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; justify-content: center; }
.opt-logo-up { width: 116px; height: 92px; border: 2px dashed #ffb38a; border-radius: 14px; background: #fff6f0; color: #e8662a;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; font: 700 12px 'Plus Jakarta Sans'; transition: .15s; }
.opt-logo-up:hover { border-color: #ff7a3d; background: #ffeede; }
.opt-logo-ic { font-size: 24px; line-height: 1; }
.opt-logo-prev { position: relative; width: 116px; height: 92px; border: 1px solid #e7eaf2; border-radius: 14px; background:
  repeating-conic-gradient(#f1f3f8 0% 25%, #fff 0% 50%) 50% / 18px 18px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.opt-logo-prev img { max-width: 88%; max-height: 78%; object-fit: contain; }
.opt-logo-rm { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: none; border-radius: 50%; background: rgba(20,12,30,.72); color: #fff; cursor: pointer; font-size: 14px; line-height: 1; }
.opt-logo-cap { font-size: 10.5px; color: var(--muted); font-weight: 600; }
.opt-bk-fields { flex: 1 1 240px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.opt-bk-f { display: flex; flex-direction: column; gap: 4px; font: 700 11px 'Plus Jakarta Sans'; color: #7a8398; text-transform: uppercase; letter-spacing: .3px; }
.opt-bk-f input[type=text], .opt-bk-f input:not([type]), .opt-bk-f select { border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font: 600 13px 'Plus Jakarta Sans'; color: var(--ink); text-transform: none; letter-spacing: normal; outline: none; background: #fff; }
.opt-bk-f input:focus, .opt-bk-f select:focus { border-color: #ff8a3c; }
.opt-bk-row { display: flex; gap: 10px; flex-wrap: wrap; }
.opt-bk-col { flex: 0 0 auto; }
.opt-bk-col input[type=color] { width: 46px; height: 34px; border: 1px solid var(--line); border-radius: 9px; padding: 0; background: none; cursor: pointer; }
.opt-bk-fontf { flex: 1 1 150px; }
.opt-bk2 .opt-bk-save { align-self: center; }
/* slot numerotat Masat + label strategie (vezi și .opt-gen-role mai jos) */
.opt-slot-n { flex: 0 0 auto; font: 800 11px ui-monospace, monospace; color: #e8662a; background: #fff1e7; border: 1px solid #ffd9c2; border-radius: 7px; padding: 2px 6px; letter-spacing: .5px; }
.opt-strat-l { color: #6d28d9; font-weight: 800; }

/* ═══ REBUILD Generare Imagini pe modelul Masat (sloturi-rânduri → detalii slot) ═══ */
.opt-gen2 { padding: 0; overflow: hidden; }
.og-head { background: linear-gradient(120deg, #1b2236, #2c3553); color: #fff; padding: 16px 20px; }
.og-head b { font: 800 16px 'Plus Jakarta Sans'; display: block; }
.og-head span { font-size: 12px; color: #b9c2d8; }
.og-sec { padding: 16px 20px; border-bottom: 1px solid #eef0f5; }
.og-sec:last-child { border-bottom: none; }
.og-sec-h { display: flex; align-items: center; gap: 9px; font: 800 13.5px 'Plus Jakarta Sans'; color: var(--ink); margin-bottom: 12px; flex-wrap: wrap; }
.og-sec-h small { font: 600 11px 'Plus Jakarta Sans'; color: var(--muted); }
.og-n { flex: 0 0 auto; width: 23px; height: 23px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #ff8a3c, #ff5d7a); color: #fff; font: 800 12px 'Plus Jakarta Sans'; box-shadow: 0 3px 8px rgba(255,93,122,.35); }
.og-sec .opt-upload { margin: 0; }
/* Brand Kit bar */
.og-bk { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #f7f8fb; border: 1px solid #eaecf3; border-radius: 12px; padding: 10px 12px; }
.og-bk-sel { border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; font: 700 12.5px 'Plus Jakarta Sans'; background: #fff; color: var(--ink); cursor: pointer; min-width: 170px; }
.og-bk-prev { display: flex; align-items: center; gap: 9px; flex: 1 1 auto; }
.og-bk-logo { height: 30px; max-width: 80px; object-fit: contain; background: #fff; border: 1px solid #eaecf3; border-radius: 6px; padding: 2px 5px; }
.og-bk-nologo { font-size: 11px; color: var(--muted); font-style: italic; }
.og-bk-sws { display: inline-flex; gap: 3px; }
.og-bk-sw { width: 18px; height: 18px; border-radius: 5px; border: 1px solid rgba(0,0,0,.08); }
.og-bk-font { font-size: 11px; color: var(--muted); font-weight: 600; }
.og-bk-btn { border: 1px solid var(--line); background: #fff; color: var(--ink); font-weight: 700; font-size: 12px; padding: 8px 12px; border-radius: 9px; cursor: pointer; }
.og-bk-btn:hover { border-color: #ff8a3c; color: #e8662a; }
.og-bk-new { color: #2563eb; }
/* Brand Kit modal */
.og-modal { position: fixed; inset: 0; z-index: 200; background: rgba(20,24,38,.5); display: flex; align-items: center; justify-content: center; padding: 20px; }
.og-modal-card { background: #fff; border-radius: 18px; width: 460px; max-width: 100%; max-height: 90vh; overflow-y: auto; padding: 20px 22px; box-shadow: 0 30px 70px rgba(16,24,40,.35); }
.og-modal-h { display: flex; align-items: center; justify-content: space-between; font: 800 16px 'Plus Jakarta Sans'; color: var(--ink); margin-bottom: 16px; }
.og-modal-x { border: none; background: #f1f3f8; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--muted); }
.og-mf { display: flex; flex-direction: column; gap: 6px; font: 700 11.5px 'Plus Jakarta Sans'; color: #7a8398; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 14px; }
.og-mf > input, .og-mf select { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: 600 13.5px 'Plus Jakarta Sans'; color: var(--ink); text-transform: none; letter-spacing: normal; outline: none; }
.og-mf > input:focus, .og-mf select:focus { border-color: #ff8a3c; }
.og-logobox { text-transform: none; }
.og-logo-up { border: 2px dashed #ffb38a; background: #fff6f0; color: #e8662a; border-radius: 12px; padding: 14px; width: 100%; cursor: pointer; font: 700 13px 'Plus Jakarta Sans'; }
.og-logo-prev { position: relative; display: inline-block; border: 1px solid #eaecf3; border-radius: 12px; padding: 8px 14px; background: repeating-conic-gradient(#f1f3f8 0% 25%, #fff 0% 50%) 50% / 16px 16px; }
.og-logo-prev img { max-height: 56px; max-width: 180px; object-fit: contain; display: block; }
.og-logo-rm { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border: none; border-radius: 50%; background: #1b2030; color: #fff; cursor: pointer; }
.og-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-transform: none; }
.og-cols label { display: flex; flex-direction: column; align-items: center; gap: 5px; font: 700 10px 'Plus Jakarta Sans'; color: #7a8398; }
.og-cols input[type=color] { width: 100%; height: 34px; border: 1px solid var(--line); border-radius: 8px; padding: 0; background: none; cursor: pointer; }
.og-cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.og-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }
.og-foot-r { display: flex; gap: 8px; }
.og-del { border: 1px solid #fbd2d2; background: #fff5f5; color: #d83a3a; font-weight: 700; font-size: 12.5px; padding: 9px 14px; border-radius: 10px; cursor: pointer; }
.og-cancel { border: 1px solid var(--line); background: #fff; color: var(--ink); font-weight: 700; font-size: 12.5px; padding: 9px 16px; border-radius: 10px; cursor: pointer; }
.og-save { border: none; background: linear-gradient(135deg, #ff8a3c, #ff5d7a); color: #fff; font-weight: 800; font-size: 12.5px; padding: 9px 20px; border-radius: 10px; cursor: pointer; }
/* Sloturi ca RÂNDURI */
.og-slots { display: flex; flex-direction: column; gap: 9px; }
.og-empty { color: var(--muted); font-size: 12.5px; padding: 18px; text-align: center; background: #f7f8fb; border-radius: 12px; }
.og-slot { display: flex; align-items: center; gap: 14px; border: 1px solid #e7eaf2; border-radius: 13px; padding: 11px 14px; cursor: pointer; transition: .14s; background: #fff; }
.og-slot:hover { border-color: #ffb38a; box-shadow: 0 4px 14px rgba(255,138,60,.12); }
.og-slot-thumb { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 10px; background: #f1f3f8; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.og-slot-thumb img { width: 100%; height: 100%; object-fit: cover; }
.og-slot-nbig { font: 800 18px ui-monospace, monospace; color: #c2510f; }
.og-slot-mid { flex: 1 1 auto; min-width: 0; }
.og-slot-t { font: 800 13.5px 'Plus Jakarta Sans'; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.og-slot-badge { font: 800 11px ui-monospace, monospace; color: #e8662a; background: #fff1e7; border: 1px solid #ffd9c2; border-radius: 6px; padding: 2px 6px; }
.og-slot-strat { font-size: 12px; color: var(--muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.og-slot-strat b { color: #6d28d9; }
.og-slot-right { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.og-st { font-size: 11px; font-weight: 700; color: var(--muted); }
.og-st-done { color: #16a34a; }
.og-st-busy { color: #c2510f; }
.og-slot-open { border: none; background: var(--ink); color: #fff; font-weight: 700; font-size: 12px; padding: 8px 13px; border-radius: 9px; cursor: pointer; }
/* Detalii slot */
.og-back { border: none; background: none; color: #2563eb; font-weight: 700; font-size: 13px; cursor: pointer; padding: 16px 20px 0; }
.og-slot-head { display: flex; align-items: center; gap: 11px; font: 800 17px 'Plus Jakarta Sans'; color: var(--ink); padding: 10px 20px 16px; }
.og-slot-n2 { font: 800 15px ui-monospace, monospace; color: #fff; background: linear-gradient(135deg, #ff8a3c, #ff5d7a); border-radius: 9px; padding: 4px 10px; }
.og-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 0 20px 20px; }
.og-block-h { font: 800 12.5px 'Plus Jakarta Sans'; color: var(--ink); margin: 4px 0 9px; }
.og-block-h:not(:first-child) { margin-top: 18px; }
/* Preia pozele din galeria eMAG (model Masat) */
.og-galpull { margin-bottom: 12px; }
.og-pullbtn { width: 100%; border: 1.5px solid #cddcf6; background: linear-gradient(96deg, #eaf2ff, #eef5ff); color: #1c4fa3; font: 800 12.5px 'Plus Jakarta Sans'; padding: 10px 12px; border-radius: 11px; cursor: pointer; transition: .15s; }
.og-pullbtn:hover:not(:disabled) { background: #e2edff; border-color: #b6cdf2; }
.og-pullbtn:disabled { opacity: .65; cursor: default; }
.og-galstrip { display: flex; gap: 7px; overflow-x: auto; padding: 10px 2px 4px; }
.og-galthumb { flex: 0 0 50px; width: 50px; height: 50px; border-radius: 8px; overflow: hidden; border: 2px solid transparent; background: #f3f5f9; padding: 0; cursor: pointer; transition: .12s; }
.og-galthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.og-galthumb:hover { border-color: #b6cdf2; }
.og-galthumb.on { border-color: #1c4fa3; box-shadow: 0 0 0 2px #1c4fa333; }
.og-galhint { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.og-refs { display: flex; gap: 8px; flex-wrap: wrap; }
.og-ref { width: 56px; height: 56px; border-radius: 9px; overflow: hidden; border: 1px solid var(--line); }
.og-ref img { width: 100%; height: 100%; object-fit: cover; }
.og-ref-empty { width: auto; padding: 0 12px; display: flex; align-items: center; font-size: 11.5px; color: var(--muted); font-style: italic; background: #f7f8fb; }
.og-tf { display: flex; flex-direction: column; gap: 5px; font: 700 11px 'Plus Jakarta Sans'; color: #7a8398; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 12px; }
.og-tf small { text-transform: none; letter-spacing: normal; color: var(--muted); font-weight: 600; }
.og-tf input, .og-tf textarea { border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font: 600 13px 'Plus Jakarta Sans'; color: var(--ink); text-transform: none; letter-spacing: normal; outline: none; resize: vertical; }
.og-tf input:focus, .og-tf textarea:focus { border-color: #ff8a3c; }
.og-savetext { border: 1px solid var(--line); background: #fff; color: var(--ink); font-weight: 700; font-size: 12.5px; padding: 9px 16px; border-radius: 10px; cursor: pointer; }
.og-detail-r { display: flex; flex-direction: column; gap: 11px; }
.og-canvas { aspect-ratio: 1/1; width: 100%; max-width: 330px; max-height: 330px; margin: 0 auto; border: 1px solid #e7eaf2; border-radius: 14px; background: #f7f8fb; display: flex; align-items: center; justify-content: center; overflow: hidden; }
/* buton dezactivat = clar gri (nu mai pare activ și mort) */
.opt-gen2 .opp-btn:disabled, .og-gen:disabled { opacity: .4; cursor: not-allowed; filter: grayscale(.6); box-shadow: none; }
/* câmp cheie OpenAI chiar lângă buton (nu mai e ascuns în altă parte) */
.og-keybox { border: 1.5px dashed #ffb38a; background: #fff6f0; border-radius: 12px; padding: 13px 15px; text-align: center; }
.og-keybox > b { display: block; color: #c2510f; font: 800 13px 'Plus Jakarta Sans'; margin-bottom: 9px; }
.og-keyrow { display: flex; gap: 8px; }
.og-keyrow input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; font-size: 13px; outline: none; }
.og-keyrow input:focus { border-color: #ff8a3c; }
.og-keybox small { display: block; margin-top: 8px; color: var(--muted); font-size: 10.5px; line-height: 1.4; }
.og-canvas img { width: 100%; height: 100%; object-fit: cover; }
.og-canvas-ph { display: flex; flex-direction: column; align-items: center; gap: 8px; color: #9aa3b6; font-size: 12.5px; font-weight: 600; text-align: center; padding: 20px; }
.og-canvas-ic { font-size: 34px; }
.og-settings { display: flex; gap: 18px; font-size: 12px; color: var(--muted); }
.og-settings b { color: var(--ink); }
.og-gen { width: 100%; }
.og-dl { border: 1px solid var(--line); background: #fff; color: #2563eb; font-weight: 700; font-size: 12.5px; padding: 9px 16px; border-radius: 10px; cursor: pointer; }
.og-hint { font-size: 11.5px; color: var(--muted); text-align: center; }
/* Generator pe O SINGURĂ PAGINĂ (referințe + brand sus · slot activ · filmstrip jos) */
.og-top { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 14px 18px; border-bottom: 1px solid #eef0f5; }
.og-mini-h { font: 800 12.5px 'Plus Jakarta Sans'; color: var(--ink); margin-bottom: 8px; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.og-mini-h small { font-weight: 600; font-size: 10.5px; color: var(--muted); }
.og-upl { margin: 0; padding: 12px; }
.og-keybar { margin: 14px 18px 0; border: 1.5px dashed #ffb38a; background: #fff6f0; border-radius: 12px; padding: 12px 15px; text-align: center; }
.og-keybar > b { display: block; color: #c2510f; font: 800 13px 'Plus Jakarta Sans'; margin-bottom: 9px; }
.og-keybar small { display: block; margin-top: 8px; color: var(--muted); font-size: 10.5px; }
.og-nanobar { border-style: solid; border-color: var(--accent, #ff7a3d); background: linear-gradient(135deg,#fff7f0,#fff0f5); }
.og-nanobar.og-nanook { border-color: #34c759; background: #f1fbf3; }
.og-nano-ok { display:flex; align-items:center; justify-content:center; gap:8px; color:#1f7a3d; font:700 12px 'Plus Jakarta Sans'; }
.og-link { background:none; border:none; color:var(--accent,#ff7a3d); font:700 12px 'Plus Jakarta Sans'; cursor:pointer; text-decoration:underline; padding:0; }
.og-slot-strat2 { font: 600 11.5px 'Plus Jakarta Sans'; color: var(--muted); }
/* banner „strategie din audit" + generare în masă a galeriei */
.og-fromaudit { display: flex; gap: 12px; align-items: flex-start; margin: 14px 18px 0; padding: 13px 16px; border-radius: 13px; background: linear-gradient(120deg, #ecfdf5, #eef6ff); border: 1.5px solid #bbf0d6; }
.og-fa-ic { flex: 0 0 26px; height: 26px; border-radius: 50%; background: #16a34a; color: #fff; font: 800 14px 'Plus Jakarta Sans'; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(22,163,74,.35); }
.og-fromaudit b { display: block; font: 800 13.5px 'Plus Jakarta Sans'; color: #12603a; margin-bottom: 2px; }
.og-fromaudit span { font-size: 11.5px; color: #3f5c50; line-height: 1.4; }
.og-genall-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 12px 18px 0; padding: 13px 16px; border-radius: 13px; background: linear-gradient(120deg, #fff3ec, #fff8f1); border: 1.5px solid #ffd9bf; }
.og-genall { font-size: 13.5px !important; padding: 11px 20px !important; box-shadow: 0 6px 16px rgba(255,122,61,.32); }
.og-genall-meta { font: 600 11.5px 'Plus Jakarta Sans'; color: #b3611f; }
.og-genall-stop { border: 1.5px solid #e0a47e; background: #fff; color: #c2510f; border-radius: 9px; padding: 7px 13px; font: 700 11.5px 'Plus Jakarta Sans'; cursor: pointer; }
.og-genall-stop:hover { background: #fff1e7; }
.oe-deg { font: 700 11px ui-monospace, monospace; color: #ff7a3d; font-style: normal; }
.og-film-h { padding: 0 18px; }
.og-films { display: flex; gap: 9px; overflow-x: auto; padding: 0 18px 16px; }
.og-film { position: relative; flex: 0 0 auto; width: 88px; border: 1.5px solid #e7eaf2; border-radius: 11px; background: #fff; cursor: pointer; padding: 0; overflow: hidden; display: flex; flex-direction: column; align-items: center; transition: .12s; }
.og-film:hover { border-color: #ffb38a; }
.og-film-hasref { border-color: #22c55e; }
.og-film-ref { position: absolute; top: 3px; right: 3px; font-size: 11px; font-style: normal; background: #fff; border-radius: 5px; padding: 0 2px; line-height: 1.3; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.og-film.active { border-color: #ff7a3d; box-shadow: 0 0 0 2px rgba(255,122,61,.25); }
.og-film img { width: 100%; height: 62px; object-fit: cover; }
.og-film-n { display: flex; align-items: center; justify-content: center; width: 100%; height: 62px; background: #f1f3f8; font: 800 17px ui-monospace, monospace; color: #c2510f; }
.og-film small { padding: 4px 5px; font-size: 9.5px; color: var(--muted); text-align: center; line-height: 1.2; }
.og-film-sep { flex: 0 0 auto; align-self: center; font: 800 9px 'Plus Jakarta Sans'; color: #6d28d9; text-align: center; padding: 0 4px; border-left: 2px dashed #d9cffb; line-height: 1.3; }
.og-film-desc { border-color: #e0d6fb; background: #faf8ff; }
.og-film-desc.active { border-color: #7c3aed; box-shadow: 0 0 0 2px rgba(124,58,237,.22); }
.og-film-desc .og-film-n { color: #6d28d9; background: #f3eeff; }
/* chat de modificări pe imagine (refinare conversațională, ca Masat) */
.og-modbox { margin-top: 6px; border-top: 1px solid #eef0f5; padding-top: 11px; }
.og-modbox-l { display: block; font: 700 11px 'Plus Jakarta Sans'; color: #7a8398; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 7px; }
.og-chat { display: flex; gap: 7px; }
.og-chat-inp { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; font-size: 12.5px; font-family: inherit; outline: none; }
.og-chat-inp:focus { border-color: #ff8a3c; }
.og-chat-send { flex: 0 0 auto; padding: 9px 15px; font-size: 12.5px; }
.og-chat-inp:disabled { background: #f4f6fb; cursor: not-allowed; }
.og-chat-send:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.5); }
.og-modhint { display: block; margin-top: 6px; font-size: 10.5px; color: var(--muted); font-style: italic; }
.og-edit { width: 100%; }

/* ═══ Editor de imagine încorporat (straturi · drag/resize · export 1500) ═══ */
.oe-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(16,20,34,.62); display: flex; align-items: center; justify-content: center; padding: 16px; }
.oe-card { background: #fff; border-radius: 18px; width: 1020px; max-width: 100%; max-height: 94vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 80px rgba(16,24,40,.4); }
.oe-top { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid #eef0f5; flex-wrap: wrap; }
.oe-top > b { font: 800 15px 'Plus Jakarta Sans'; color: var(--ink); }
.oe-add { display: flex; gap: 6px; flex-wrap: wrap; }
.oe-add button { border: 1px solid var(--line); background: #fff; color: var(--ink); font: 700 12px 'Plus Jakarta Sans'; padding: 7px 11px; border-radius: 9px; cursor: pointer; }
.oe-add button:hover { border-color: #ff8a3c; color: #e8662a; }
.oe-x { margin-left: auto; border: none; background: #f1f3f8; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--muted); }
.oe-body { display: flex; gap: 16px; padding: 16px; overflow: auto; }
.oe-stagewrap { flex: 0 0 auto; }
.oe-stage { position: relative; width: 460px; height: 460px; --oe-h: 460px; border: 1px solid #e7eaf2; border-radius: 12px; overflow: hidden; background: #f7f8fb; user-select: none; touch-action: none; }
.oe-base { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.oe-layer { position: absolute; cursor: move; overflow: visible; display: flex; align-items: flex-start; }
.oe-layer.sel { outline: 2px solid #ff7a3d; outline-offset: 1px; }
.oe-layer img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.oe-text { width: 100%; line-height: 1.25; word-break: normal; overflow-wrap: normal; white-space: pre-wrap; padding: 0 .1em; border-radius: 4px; }
.oe-badge { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 99px; font-weight: 800; letter-spacing: .3px; white-space: nowrap; padding: 0 .6em; }
.oe-stars { width: 100%; line-height: 1; letter-spacing: .05em; white-space: nowrap; }
.oe-handle { position: absolute; right: -7px; bottom: -7px; width: 16px; height: 16px; background: #ff7a3d; border: 2px solid #fff; border-radius: 50%; cursor: nwse-resize; box-shadow: 0 2px 5px rgba(0,0,0,.25); }
.oe-side { flex: 1 1 auto; min-width: 220px; }
.oe-side-h { font: 800 12px 'Plus Jakarta Sans'; text-transform: uppercase; letter-spacing: .3px; color: #7a8398; margin-bottom: 12px; }
.oe-noprop { font-size: 12.5px; color: var(--muted); line-height: 1.5; background: #f7f8fb; border-radius: 10px; padding: 14px; }
.oe-prow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; font: 700 12px 'Plus Jakarta Sans'; color: #4b5363; }
.oe-prow input[type=range] { flex: 1; max-width: 130px; }
.oe-prow input[type=color] { width: 40px; height: 28px; border: 1px solid var(--line); border-radius: 7px; padding: 0; cursor: pointer; background: none; }
.oe-bgrow { display: inline-flex; gap: 6px; align-items: center; }
.oe-bgnone { border: 1px solid var(--line); background: #fff; font-size: 10.5px; padding: 4px 7px; border-radius: 7px; cursor: pointer; color: var(--muted); }
.oe-pf { display: flex; flex-direction: column; gap: 5px; font: 700 11px 'Plus Jakarta Sans'; color: #7a8398; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 11px; }
.oe-pf input, .oe-pf select, .oe-pf textarea { border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; font: 600 13px 'Plus Jakarta Sans'; color: var(--ink); text-transform: none; letter-spacing: normal; outline: none; resize: vertical; }
.oe-tog { border: 1px solid var(--line); background: #fff; min-width: 30px; height: 28px; padding: 0 7px; border-radius: 7px; cursor: pointer; font-weight: 800; margin-left: 4px; color: var(--ink); font-size: 12px; }
.oe-tog.on { background: #1b2030; color: #fff; border-color: #1b2030; }
.oe-styrow { display: inline-flex; flex-wrap: wrap; gap: 0; justify-content: flex-end; }
.oe-fontrow { display: flex; gap: 6px; align-items: center; text-transform: none; }
.oe-fontrow select { flex: 1; min-width: 0; }
.oe-fontup { flex: 0 0 auto; border: 1px solid #ffb38a; background: #fff6f0; color: #c2510f; font: 800 11px 'Plus Jakarta Sans'; padding: 8px 10px; border-radius: 9px; cursor: pointer; white-space: nowrap; }
.oe-fontup:hover { background: #ffe9da; }
/* callout premium (iconiță în badge + text) */
.oe-callout { display: flex; align-items: center; gap: 4%; width: 100%; height: 100%; }
.oe-cobadge { flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.oe-cobadge svg { width: 62%; height: 62%; }
.oe-cotext { font-family: 'Montserrat', sans-serif; font-weight: 700; line-height: 1.1; }
.oe-prow-top { align-items: flex-start; }
.oe-icons { display: inline-flex; flex-wrap: wrap; gap: 5px; max-width: 168px; justify-content: flex-end; }
.oe-ic { width: 30px; height: 30px; border: 1px solid var(--line); background: #fff; border-radius: 8px; cursor: pointer; padding: 5px; display: inline-flex; align-items: center; justify-content: center; }
.oe-ic svg { width: 100%; height: 100%; }
.oe-ic.on { background: #1b2030; border-color: #1b2030; }
.oe-tplwrap { display: inline-flex; align-items: center; gap: 6px; font: 800 10px 'Plus Jakarta Sans'; text-transform: uppercase; letter-spacing: .4px; color: #7a8398; margin-left: auto; }
.oe-tpl { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font: 700 12px 'Plus Jakarta Sans'; color: var(--ink); background: #fff; cursor: pointer; }
.oe-presets { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 11px; }
.oe-pchip { border: 1px solid var(--line); background: #fff; font: 700 10px 'Plus Jakarta Sans'; padding: 5px 8px; border-radius: 7px; cursor: pointer; color: #4b5363; }
.oe-pchip:hover { border-color: #ff8a3c; color: #e8662a; }
.oe-pactions { display: flex; gap: 7px; margin-top: 14px; border-top: 1px solid #eef0f5; padding-top: 12px; }
.oe-pbtn { flex: 1; border: 1px solid var(--line); background: #fff; font: 700 11.5px 'Plus Jakarta Sans'; padding: 8px; border-radius: 8px; cursor: pointer; color: var(--ink); }
.oe-pdel { color: #d83a3a; border-color: #fbd2d2; background: #fff5f5; }
.oe-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-top: 1px solid #eef0f5; flex-wrap: wrap; }
.oe-foot-l, .oe-foot-r { display: flex; gap: 8px; align-items: center; }
.oe-foot-l button, .oe-export { border: 1px solid var(--line); background: #fff; font: 700 12.5px 'Plus Jakarta Sans'; padding: 9px 13px; border-radius: 9px; cursor: pointer; color: var(--ink); }
.oe-export { color: #2563eb; }
.oe-save { border: none; background: linear-gradient(135deg, #ff8a3c, #ff5d7a); color: #fff; font: 800 12.5px 'Plus Jakarta Sans'; padding: 9px 18px; border-radius: 9px; cursor: pointer; }
@media (max-width: 860px) { .oe-body { flex-direction: column; } .oe-stage { width: 100%; height: auto; aspect-ratio: 1/1; --oe-h: 88vw; } }
@media (max-width: 720px) { .og-detail { grid-template-columns: 1fr; } .og-cols { grid-template-columns: repeat(2, 1fr); } .og-top { grid-template-columns: 1fr; } }

/* ═══ Raport audit COMPACT pe tab-uri (rebuild — dens ca Masat, nu benzi uriașe) ═══ */
.opt-rep { border: 1px solid #e5e8f1; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 3px 14px rgba(16,24,40,.06); margin-top: 6px; }
.opt-rep-hero { display: flex; align-items: center; gap: 14px; background: linear-gradient(120deg, #1b2236, #2c3553); color: #fff; padding: 14px 18px; }
.opt-rep-hl { flex: 1 1 auto; min-width: 0; }
.opt-rep-prod { font: 800 15px 'Plus Jakarta Sans'; line-height: 1.3; }
.opt-rep-cat { font-size: 12px; color: #aab4cc; margin-top: 2px; }
.opt-rep-score { flex: 0 0 auto; text-align: center; line-height: 1; background: rgba(255,255,255,.08); border-radius: 12px; padding: 8px 14px; }
.opt-rep-score b { font: 800 30px 'Plus Jakarta Sans'; color: var(--c, #fff); }
.opt-rep-score i { font-size: 11px; color: #aab4cc; font-style: normal; }
.opt-rep-tabs { display: flex; gap: 2px; padding: 0 10px; border-bottom: 1px solid #eef0f5; background: #fafbfd; overflow-x: auto; }
.opt-rep-tab { border: none; background: none; padding: 12px 14px; font: 700 13px 'Plus Jakarta Sans'; color: var(--muted); cursor: pointer; border-bottom: 2.5px solid transparent; white-space: nowrap; }
.opt-rep-tab:hover { color: var(--ink); }
.opt-rep-tab.active { color: #e8662a; border-bottom-color: #ff7a3d; }
.opt-rep-body { padding: 16px 18px; }
/* Sumar: 3 carduri dense + chips de scor */
.opt-rgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.opt-rc { border: 1px solid #eef0f5; border-left: 4px solid #ccc; border-radius: 11px; padding: 11px 13px; background: #fcfcfe; }
.opt-rc span { display: block; font: 800 11px 'Plus Jakarta Sans'; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 5px; }
.opt-rc p { margin: 0; font-size: 12.8px; line-height: 1.5; color: #3a4150; }
.opt-rc-blue { border-left-color: #2563eb; } .opt-rc-blue span { color: #2563eb; }
.opt-rc-red { border-left-color: #e0492f; } .opt-rc-red span { color: #c23a22; }
.opt-rc-violet { border-left-color: #7c3aed; } .opt-rc-violet span { color: #6d28d9; }
.opt-chips-h { font: 800 11px 'Plus Jakarta Sans'; text-transform: uppercase; letter-spacing: .3px; color: #7a8398; margin: 16px 0 8px; }
.opt-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.opt-chip { display: inline-flex; align-items: center; gap: 7px; background: #f4f6fb; border: 1px solid #e7eaf2; border-radius: 9px; padding: 6px 10px; font-size: 12px; font-weight: 600; color: var(--ink); }
.opt-chip b { font-weight: 800; } .opt-chip i { font-style: normal; font-size: 9.5px; color: var(--muted); }
/* Arii: grid 2 coloane dens */
.opt-arii2 { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.opt-arie3 { border: 1px solid #eef0f5; border-left: 4px solid #ccc; border-radius: 11px; padding: 11px 13px; background: #fcfcfe; }
.opt-arie3-h { display: flex; align-items: center; justify-content: space-between; font: 800 13px 'Plus Jakarta Sans'; color: var(--ink); margin-bottom: 7px; }
.opt-arie3-h span { font-size: 12px; font-weight: 800; }
.opt-arie3-t { font-size: 12px; line-height: 1.45; color: #3a4150; margin-bottom: 4px; }
.opt-arie3-t i { font-style: normal; font-weight: 800; color: #c23a22; font-size: 10.5px; text-transform: uppercase; letter-spacing: .2px; margin-right: 3px; }
.opt-arie3-t i.opt-ai-ok { color: #16a34a; }
/* Variantă */
.opt-vsub { display: flex; align-items: center; gap: 9px; font: 800 13px 'Plus Jakarta Sans'; color: var(--ink); margin-bottom: 8px; }
.opt-vsub small { font-weight: 600; font-size: 11px; color: var(--muted); }
.opt-vsub .opt-copy { margin-left: auto; }
.opt-vdesc2 { border: 1px solid #eef0f5; border-radius: 10px; padding: 13px 15px; font-size: 13px; line-height: 1.6; color: #2c3242; max-height: 320px; overflow-y: auto; background: #fcfcfe; }
.opt-vdesc2 h2, .opt-vdesc2 h3 { font: 800 14px 'Plus Jakarta Sans'; color: var(--ink); margin: 12px 0 5px; }
.opt-vdesc2 ul { margin: 6px 0; padding-left: 18px; }
.opt-vb { font-size: 12.5px; line-height: 1.5; color: #3a4150; padding: 9px 0; border-bottom: 1px dashed #eef0f5; }
.opt-vb b { color: var(--ink); } .opt-vb i { color: #6d28d9; font-style: normal; }
.opt-vb-tip { display: inline-block; font: 700 10px 'Plus Jakarta Sans'; text-transform: uppercase; letter-spacing: .3px;
  color: #7c3aed; background: #f3edff; border-radius: 6px; padding: 1px 7px; vertical-align: middle; }
.opt-vb-viz { margin-top: 3px; color: #3a4150; }
.opt-vb-txt { margin-top: 3px; color: #b45309; background: #fff7ed; border-left: 3px solid #ff8a3c; border-radius: 0 6px 6px 0; padding: 3px 9px; font-weight: 600; }
.opt-vb-obj { display: block; margin-top: 3px; color: #6d28d9 !important; font-size: 11.5px; }
.opt-vwhy2 { margin: 8px 0; font-size: 12.5px; }
.opt-vwhy2 summary { cursor: pointer; font-weight: 700; color: #6d28d9; }
.opt-vwhy2 ul { margin: 6px 0 0; padding-left: 18px; color: #3a4150; line-height: 1.5; }
/* Acțiuni */
.opt-asec { margin-bottom: 14px; }
.opt-asec-h { display: inline-block; font: 800 12px 'Plus Jakarta Sans'; color: #fff; padding: 5px 12px; border-radius: 8px; margin-bottom: 9px; }
.opt-asec-orange { background: linear-gradient(135deg, #ff8a3c, #f0640e); }
.opt-asec-teal { background: linear-gradient(135deg, #14b8a6, #0d9488); }
.opt-asec-amber { background: linear-gradient(135deg, #f59e0b, #d97706); }
.opt-asec-slate { background: linear-gradient(135deg, #64748b, #475569); }
.opt-asec-p { font-size: 12.8px; line-height: 1.55; color: #3a4150; }
.opt-ac { border: 1px solid #eef0f5; border-radius: 11px; padding: 10px 13px; margin-bottom: 8px; background: #fcfcfe; }
.opt-ac-h { font: 800 13px 'Plus Jakarta Sans'; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.opt-ac-n { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; background: #fff1e7; color: #e8662a; font: 800 11px 'Plus Jakarta Sans'; display: inline-flex; align-items: center; justify-content: center; }
.opt-ac-w { font-size: 12.3px; color: #4b5363; line-height: 1.45; margin: 4px 0 4px 28px; }
.opt-ac-m { font-size: 11px; color: var(--muted); margin-left: 28px; }
.opt-ac-m b { color: var(--ink); }
@media (max-width: 640px) { .opt-arii2 { grid-template-columns: 1fr; } }

/* Varianta corectă (Faza F-A) */
.opt-varcta { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: linear-gradient(96deg, #e9f9ef, #eafaf3); border: 1px solid #c7ecd5; border-radius: 18px; padding: 18px 22px; flex-wrap: wrap; }
.opt-varcta b { font: 800 15px 'Plus Jakarta Sans'; color: #107a43; display: block; }
.opt-varcta span { font-size: 12.5px; color: #4b6a57; display: block; margin-top: 3px; max-width: 640px; }
/* varianta ALBASTRĂ pt „Analiză AI pe fiecare poză" — distinctă de verdele auditului complet */
.opt-iacta { background: linear-gradient(96deg, #eaf2ff, #eef5ff); border-color: #cddcf6; }
.opt-iacta b { color: #1c4fa3; }
.opt-iacta span { color: #4a6390; }
.opt-vobj { background: #fff7ed; border: 1px solid #fde4cf; border-radius: 12px; padding: 12px 16px; font-size: 13px; color: #7a4a1d; margin-bottom: 16px; }
.opt-vsec { border-top: 1px solid #eef0f5; padding-top: 16px; margin-top: 16px; }
.opt-vsec:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }
.opt-vsec-h { display: flex; align-items: center; gap: 10px; font: 700 14px 'Plus Jakarta Sans'; color: var(--ink); margin-bottom: 10px; flex-wrap: wrap; }
.opt-vsec-h span { font-weight: 600; font-size: 11.5px; color: var(--muted); }
.opt-copy { margin-left: auto; border: 1px solid var(--line); background: #fff; color: #2563eb; font-weight: 700; font-size: 11.5px; padding: 5px 11px; border-radius: 8px; cursor: pointer; }
.opt-copy:hover { background: #f4f8ff; }
.opt-vtitle { font: 600 15px/1.5 'Plus Jakarta Sans'; color: var(--ink); background: #f7f8fb; border: 1px solid #eef0f5; border-radius: 10px; padding: 12px 14px; }
.opt-vt60 { background: #d9f2e3; box-shadow: inset 0 -2px 0 #16a34a; border-radius: 3px; padding: 1px 2px; }
.opt-vt-hint { font-size: 11px; color: var(--muted); margin-top: 6px; }
.opt-vwhy { margin-top: 12px; background: #f6f4ff; border: 1px solid #e6dffb; border-radius: 10px; padding: 11px 15px; }
.opt-vwhy-h { font: 700 12px 'Plus Jakarta Sans'; color: #6d28d9; margin-bottom: 5px; }
.opt-vwhy ul { margin: 0; padding-left: 18px; }
.opt-vwhy li { font-size: 12.5px; color: #3a4150; line-height: 1.5; margin-bottom: 4px; }
.opt-vwhy-line { font-size: 12px; color: #6d28d9; margin-top: 8px; }
.opt-vdesc { border: 1px solid #eef0f5; border-radius: 10px; padding: 16px 18px; font-size: 13.5px; line-height: 1.6; color: #2c3242; max-height: 360px; overflow-y: auto; }
.opt-vdesc h2 { font: 800 17px 'Plus Jakarta Sans'; color: var(--ink); margin: 0 0 8px; }
.opt-vdesc h3 { font: 700 14px 'Plus Jakarta Sans'; color: var(--ink); margin: 14px 0 5px; }
.opt-vdesc ul { padding-left: 18px; margin: 6px 0; }
.opt-vdesc p { margin: 6px 0; }
.opt-vbrief { background: #f9fafc; border: 1px solid #eef0f5; border-radius: 11px; padding: 11px 14px; margin-bottom: 9px; }
.opt-vbrief-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.opt-vbrief-n { font: 700 13px 'Plus Jakarta Sans'; color: var(--ink); }
.opt-vbrief-gen { border: none; background: linear-gradient(96deg, #7c3aed, #d6469b); color: #fff; font-weight: 700; font-size: 11px; padding: 5px 11px; border-radius: 8px; cursor: pointer; }
.opt-vbrief-b { font-size: 12.5px; color: #3a4150; line-height: 1.5; }
.opt-vbrief-o { font-size: 11.5px; color: #c2410c; margin-top: 5px; }
/* audit complet — identificare, arii, top 3, quick wins */
.opt-vid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; background: #f7f8fb; border: 1px solid #eef0f5; border-radius: 12px; padding: 13px 16px; margin-bottom: 14px; }
.opt-vid > div { font-size: 13px; color: var(--ink); }
.opt-vid-l { display: block; font: 700 10px 'Plus Jakarta Sans'; letter-spacing: .4px; color: #97a0b3; text-transform: uppercase; margin-bottom: 2px; }
.opt-vsumar { font-size: 13.5px; line-height: 1.6; color: #3a4150; background: #eef4ff; border: 1px solid #d9e6ff; border-radius: 12px; padding: 13px 16px; margin-bottom: 12px; }
.opt-vdif { background: #f6f4ff; border: 1px solid #e6dffb; border-radius: 12px; padding: 11px 16px; font-size: 13px; color: #4b2c91; margin-bottom: 12px; }
.opt-arie { border: 1px solid #eef0f5; border-radius: 12px; overflow: hidden; margin-bottom: 10px; }
.opt-arie-h { display: flex; align-items: center; justify-content: space-between; padding: 10px 15px; background: #f7f8fb; }
.opt-arie-h b { font: 700 13.5px 'Plus Jakarta Sans'; color: var(--ink); }
.opt-arie-sc { font: 800 12px 'Plus Jakarta Sans'; padding: 4px 10px; border-radius: 999px; }
.opt-arie-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #eef0f5; }
.opt-arie-c, .opt-arie-r { background: #fff; padding: 11px 15px; font-size: 12.5px; line-height: 1.5; color: #3a4150; }
.opt-arie-r { background: #f0faf4; }
.opt-arie-l { display: block; font: 700 10px 'Plus Jakarta Sans'; letter-spacing: .4px; text-transform: uppercase; color: #97a0b3; margin-bottom: 4px; }
.opt-arie-r .opt-arie-l { color: #16a34a; }
.opt-vfix { background: linear-gradient(180deg,#f0faf4,#fff 60px); border: 1px solid #c7ecd5; border-radius: 14px; padding: 18px; }
.opt-vsub-h { display: flex; align-items: center; gap: 10px; font: 700 13.5px 'Plus Jakarta Sans'; color: var(--ink); margin-bottom: 9px; flex-wrap: wrap; }
.opt-vsub-h span { font-weight: 600; font-size: 11.5px; color: var(--muted); }
.opt-vtext { font-size: 13px; line-height: 1.6; color: #3a4150; }
.opt-top3 { background: #f9fafc; border: 1px solid #eef0f5; border-left: 4px solid #ff8a3c; border-radius: 11px; padding: 12px 15px; margin-bottom: 9px; }
.opt-top3-h { display: flex; align-items: center; gap: 10px; font: 700 13.5px 'Plus Jakarta Sans'; color: var(--ink); }
.opt-top3-n { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: #ff8a3c; color: #fff; font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.opt-top3-w { font-size: 12.5px; color: #3a4150; line-height: 1.5; margin: 6px 0 6px 34px; }
.opt-top3-m { display: flex; gap: 16px; margin-left: 34px; font-size: 11.5px; color: var(--muted); }
.opt-vlist { margin: 0; padding-left: 20px; }
.opt-vlist li { font-size: 13px; color: #3a4150; line-height: 1.6; margin-bottom: 5px; }
.opt-qmin { font: 700 10.5px 'Plus Jakarta Sans'; background: #e8f0ff; color: #2563eb; padding: 2px 7px; border-radius: 999px; margin-left: 4px; }

/* ═══ AUDIT COMPLET — design VIBRANT cu benzi de secțiune (delimitare clară, nu light-pe-light) ═══ */
.opt-report { margin-top: 16px; }
.opt-hero2 { display: flex; align-items: center; gap: 18px; background: linear-gradient(120deg,#1a2130,#2c3a57); color: #fff; border-radius: 18px; padding: 22px 26px; box-shadow: 0 10px 30px rgba(16,24,40,.22); }
.opt-hero2-l { flex: 1; min-width: 0; }
.opt-hero2-tag { font: 800 11px 'Plus Jakarta Sans'; letter-spacing: 1.2px; color: #ff9a52; }
.opt-hero2-prod { font: 800 19px/1.3 'Plus Jakarta Sans'; margin: 5px 0 3px; }
.opt-hero2-cat { font-size: 12.5px; color: #aeb8cc; }
.opt-hero2-score { flex: 0 0 auto; background: var(--c, #2563eb); color: #fff; border-radius: 16px; padding: 12px 22px; text-align: center; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.opt-hero2-score b { font: 900 40px 'Plus Jakarta Sans'; line-height: 1; }
.opt-hero2-score small { font-size: 15px; opacity: .85; }
.opt-status { display: inline-block; color: #fff; font: 800 12px 'Plus Jakarta Sans'; letter-spacing: .3px; padding: 7px 18px; border-radius: 999px; margin: 14px 0 2px; box-shadow: 0 4px 12px rgba(16,24,40,.15); }
.opt-card2 { border-radius: 14px; padding: 15px 18px; margin-top: 12px; font-size: 13.5px; line-height: 1.6; color: #2c3242; border: 1.5px solid; }
.opt-card2-l { display: block; font: 800 11px 'Plus Jakarta Sans'; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 6px; }
.opt-card2-blue { background: #eaf2ff; border-color: #c2d8ff; } .opt-card2-blue .opt-card2-l { color: #2563eb; }
.opt-card2-red { background: #fff0ee; border-color: #fac9c3; } .opt-card2-red .opt-card2-l { color: #dc2626; }
.opt-card2-violet { background: #f4efff; border-color: #ddcefa; } .opt-card2-violet .opt-card2-l { color: #7c3aed; }
.opt-card2-plain { background: #f6f8fc; border-color: #e6e8ef; }
.opt-band { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #fff;
  font: 800 14.5px 'Plus Jakarta Sans'; letter-spacing: .6px; padding: 14px 20px; border-radius: 13px;
  margin: 24px 0 0; box-shadow: 0 6px 18px rgba(16,24,40,.16); }
.opt-band-r { font: 600 11.5px 'Plus Jakarta Sans'; opacity: .92; letter-spacing: .2px; }
.opt-band-blue { background: linear-gradient(96deg,#2563eb,#4d8bff); }
.opt-band-green { background: linear-gradient(96deg,#15803d,#22c55e); }
.opt-band-orange { background: linear-gradient(96deg,#ea580c,#ff9248); }
.opt-band-teal { background: linear-gradient(96deg,#0d9488,#2dd4bf); }
.opt-band-amber { background: linear-gradient(96deg,#b45309,#f59e0b); }
.opt-ariis, .opt-pad { margin-top: 12px; }
.opt-arie { background: #fff; border: 1px solid #e6e8ef; border-left: 5px solid #ccc; border-radius: 13px; overflow: hidden; margin-bottom: 12px; box-shadow: 0 3px 12px rgba(16,24,40,.06); }
.opt-arie-h { display: flex; align-items: center; justify-content: space-between; padding: 13px 17px; background: #f3f5fb; border-bottom: 1px solid #e6e8ef; }
.opt-arie-h b { font: 800 14.5px 'Plus Jakarta Sans'; color: var(--ink); }
.opt-arie-sc { font: 800 13px 'Plus Jakarta Sans'; padding: 5px 13px; border-radius: 999px; }
.opt-arie-2col { display: grid; grid-template-columns: 1fr 1fr; }
.opt-arie-c, .opt-arie-r { padding: 14px 17px; font-size: 12.5px; line-height: 1.55; color: #3a4150; }
.opt-arie-c { background: #fffdfa; border-right: 1px solid #e6e8ef; }
.opt-arie-r { background: #eafaf1; }
.opt-arie-l { display: block; font: 800 10.5px 'Plus Jakarta Sans'; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 6px; }
.opt-arie-c .opt-arie-l { color: #c2410c; }
.opt-arie-r .opt-arie-l { color: #15803d; }
.opt-vfix2 { background: #fff; border: 2px solid #bbe9cc; border-radius: 16px; padding: 22px; margin-top: 12px; box-shadow: 0 6px 20px rgba(22,163,74,.1); }
.opt-gen-meta { padding: 13px 15px; display: flex; flex-direction: column; gap: 8px; }
.opt-gen-role { display: flex; align-items: center; gap: 8px; font: 800 13px 'Plus Jakarta Sans'; color: var(--ink); }
.opt-gen-note { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.opt-gen-inp { border: 1px solid var(--line); border-radius: 9px; padding: 8px 11px; font-size: 12.5px;
  font-family: inherit; outline: none; resize: vertical; width: 100%; box-sizing: border-box; }
.opt-gen-inp:focus { border-color: #ff8a3c; }
.opt-gen-btns { display: flex; gap: 7px; margin-top: 2px; }
.opt-gen-btns .opt-gen-dl { flex: 1; margin-top: 0; }
.opt-gen-dl { margin-top: 2px; border: none; background: var(--accent-soft); color: #c2510f; font-weight: 700;
  padding: 9px; border-radius: 10px; cursor: pointer; font-size: 12.5px; }
.opt-gen-dl:hover { background: #ffe6d3; }
.opt-scene-btn { flex: 1; border: none; background: linear-gradient(96deg, #7c3aed, #d6469b); color: #fff;
  font-weight: 700; padding: 9px; border-radius: 10px; cursor: pointer; font-size: 12px; white-space: nowrap; }
.opt-scene-btn:hover { filter: brightness(1.05); }
.opt-scene-btn:disabled { opacity: .7; cursor: default; }
.opt-revert-btn { border: 1px solid var(--line); background: #fff; color: var(--muted); border-radius: 10px;
  cursor: pointer; font-size: 13px; padding: 0 11px; }
/* rândul AI (Etapa 2B) */
.opt-ai-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px;
  padding: 12px 16px; background: linear-gradient(96deg, #f6f0ff, #fdeff8); border: 1px solid #ead9fb; border-radius: 14px; }
.opt-ai-on { font: 800 12.5px 'Plus Jakarta Sans'; color: #7c3aed; }
.opt-ai-lock { font: 700 12.5px 'Plus Jakarta Sans'; color: #6b5b8a; }
.opt-ai-hint { font-size: 11.5px; color: #8a7da3; }
.opt-ai-key { flex: 1; min-width: 200px; border: 1px solid #d8c6ef; border-radius: 10px; padding: 9px 12px;
  font-size: 13px; outline: none; }
.opt-ai-key:focus { border-color: #7c3aed; }
.opt-ai-link { border: none; background: none; color: #7c3aed; font-weight: 700; cursor: pointer; font-size: 12px; text-decoration: underline; }

/* ═══════════ MOBIL (≤760px, țintă iPhone ~402px) — sertar + 1 coloană + compact ═══════════ */
.pmenu { display: none; }
.sb-overlay { display: none; }
@media (max-width: 760px) {
  html, body { overflow-x: hidden; }
  /* shell: sidebar devine SERTAR fix, conținutul ia tot ecranul */
  [data-theme="panze"] .app { display: block; }
  [data-theme="panze"] .sidebar2 {
    position: fixed; inset: 0 auto 0 0; width: min(80vw, 320px); height: 100dvh;
    z-index: 120; transform: translateX(-103%); transition: transform .28s cubic-bezier(.3,.8,.3,1);
    box-shadow: 18px 0 50px rgba(10, 12, 30, .45); padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  body.sb-open .sidebar2 { transform: translateX(0); }
  [data-theme="panze"] .sidebar2 .nav { flex-direction: column; flex-wrap: nowrap; }
  [data-theme="panze"] .sidebar2 .nav-item { width: 100%; }
  .sb-overlay { display: block; position: fixed; inset: 0; z-index: 110;
    background: rgba(12, 14, 32, .45); opacity: 0; pointer-events: none; transition: opacity .25s; }
  body.sb-open .sb-overlay { opacity: 1; pointer-events: auto; }
  .pmenu { display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: 0 0 38px; border: 1px solid #e7eaf1; border-radius: 12px;
    background: #fff; color: #3a405a; cursor: pointer; }
  .pmenu svg { width: 19px; height: 19px; }

  [data-theme="panze"] .content { padding: 14px 13px calc(40px + env(safe-area-inset-bottom)); max-width: none; }
  [data-theme="panze"] .ptop { display: flex; margin: -14px -13px 14px; padding: 9px 10px;
    gap: 8px; padding-top: max(9px, env(safe-area-inset-top)); }
  .ptop-brand { margin-right: auto; }
  [data-theme="panze"] .ptop-right { gap: 6px; }

  /* titluri + secțiuni compacte */
  .view-head h1, h1 { font-size: 20px; }
  .panel, .filter-panel, .pz-panel, .rs-card { padding: 13px 13px; border-radius: 14px; }
  .crumb { font-size: 11.5px; }

  /* Prezentare: KPI pe 2 coloane, restul pe 1 */
  .pz-cards { grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 12px; }
  .pz-card { padding: 12px 13px; border-radius: 14px; }
  .pz-card .pz-card-big { font-size: 19px; margin: 6px 0 7px; }
  .pz-card .pz-card-t { font-size: 9.5px; }
  .pz-pill { font-size: 10px; padding: 3px 8px; }
  .pz-mid, .pz-bottom { grid-template-columns: 1fr; gap: 10px; }
  .pz-donut-row { justify-content: center; }

  /* grile generice → 1 coloană; KPI-urile BuyBox pe 2 */
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .rs-grid2 { grid-template-columns: 1fr; gap: 10px; }
  .rs-hero { flex-wrap: wrap; }
  .rs-gauge { flex-basis: 100%; display: flex; flex-direction: column; align-items: center; }
  .rs-box-row { gap: 8px; }
  .rs-box-v { font-size: 16px; }

  /* tabele: rămân ÎN card, cu scroll lateral lin (nu ies din margini) */
  .table-scroll, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-radius: 12px; }
  .table-scroll table, .table-wrap table { min-width: 680px; }
  table th, table td { font-size: 11.5px; }
  [data-theme="panze"] table tbody td { padding-top: 8px; padding-bottom: 8px; }

  /* intro „live-line": curge ca o frază normală, nu pe coloane înghesuite */
  .live-line { display: block; line-height: 1.5; }
  .live-line .live-dot { display: inline-block; vertical-align: middle; margin-right: 6px; }

  /* Cercetare: selectorul de produs + butonul se aranjează pe coloană, nu ies din ecran */
  .rs-searchbar { flex-direction: column; align-items: stretch; gap: 8px; }
  .rs-searchbar select, .rs-searchbar #rsGo, #rsPick { width: 100%; min-width: 0; max-width: 100%; }

  /* segmentele cu multe opțiuni (BuyBox/Ranking) → un singur rând cu scroll lateral */
  .seg { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .seg::-webkit-scrollbar { display: none; }
  .seg-btn { flex: 0 0 auto; white-space: nowrap; }

  /* BuyBox: carduri compacte, prețurile rămân pe 3 coloane mici */
  .bb-pcard { padding: 12px 12px; }
  .bb-prices { gap: 6px; }
  .bb-prices b { font-size: 14px; }
  .bb-actions { flex-wrap: wrap; gap: 8px; }
  .bb-actions .quota-input { flex: 1 1 130px; }

  /* modale full-screen */
  .calc-overlay { padding: 0; align-items: stretch; }
  .calc-card { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
    border-radius: 0; overflow-y: auto; padding-bottom: max(20px, env(safe-area-inset-bottom)); }

  /* combobox: listă mai joasă, să nu acopere tot ecranul */
  .cat-combo-list { max-height: 220px; }

  /* scanner hero + toolbars */
  .scan-hero { padding: 14px 13px; }
  .toolbar { gap: 8px; }
  .seg-btn { padding: 7px 10px; font-size: 12px; }
  .opp-btn { width: 100%; }

  /* Optimizator: 1 coloană, searchbar vertical, statistici 2/rând */
  .opt-search { flex-direction: column; align-items: stretch; }
  .opt-search select, .opt-search .opt-link-inp { max-width: none; }
  .opt-kpis { grid-template-columns: repeat(3,1fr); gap: 8px; }
  .opt-kpi { padding: 12px 11px; }
  .opt-kpi-v { font-size: 22px; }
  .opt-grid { grid-template-columns: 1fr; }
  .opt-grid2 { grid-template-columns: 1fr; }
  .opt-hero { flex-wrap: wrap; }
  .opt-stats { grid-template-columns: repeat(2,1fr); }
  .opt-scn { grid-template-columns: 1fr; }
  .opt-nf-2 { grid-template-columns: 1fr; }
  .opt-arie-2col { grid-template-columns: 1fr; }
  .opt-arie-c { border-right: none; border-bottom: 1px solid #e6e8ef; }
  .opt-vid { grid-template-columns: 1fr; }
  .opt-hero2 { flex-wrap: wrap; }
}

/* ═══════════ Optimizator — pagina de GENERARE în stil Masat (alb / albastru / flat, 1:1) ═══════════ */
.optm { --ink:#16181f; --mt:#6b7280; --pri:#ff7a3d; --ln:#e6e8ef; --sf:#f5f6fa;
  background:#fff !important; border:1px solid var(--ln) !important; border-radius:14px !important;
  box-shadow:none !important; color:var(--ink); font-family:'Plus Jakarta Sans',system-ui,sans-serif; padding:22px 24px !important; }
.optm *, .optm input, .optm textarea, .optm button { font-family:'Plus Jakarta Sans',system-ui,sans-serif; }
.optm b, .optm h1, .optm h2, .optm .og-slot-head { font-family:'Plus Jakarta Sans',sans-serif; }
.optm .og-head { display:none; }
.optm .og-top { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }
.optm .og-mini-h { font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--mt); margin-bottom:8px; }
.optm .og-mini-h small { font-weight:500; text-transform:none; letter-spacing:0; color:#9aa7bd; margin-left:6px; }
.optm .opt-upload { background:var(--sf); border:1px dashed #C5D0E0; border-radius:10px; color:var(--mt); }
.optm .opt-upload.drag { border-color:var(--pri); background:#EEF3FF; }
.optm .og-genall-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--sf); border:1px solid var(--ln); border-radius:12px; padding:12px 14px; margin-bottom:18px; }
.optm .og-genall-meta { font-size:12px; color:var(--mt); font-weight:500; }
.optm .og-genall-stop { border:1px solid var(--ln); background:#fff; color:#c2510f; border-radius:8px; padding:7px 13px; font:600 12px Inter; cursor:pointer; }
.optm .og-slot-head { display:flex; align-items:center; gap:12px; font-weight:700; font-size:20px; color:var(--ink); margin:0 0 18px; }
.optm .og-slot-n2 { width:40px; height:40px; border-radius:9px; background:var(--ink); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; }
.optm .og-slot-strat2 { font-size:11px; font-weight:600; color:var(--mt); background:var(--sf); border:1px solid var(--ln); padding:4px 10px; border-radius:6px; }
.optm .og-detail { display:grid; grid-template-columns:minmax(0,360px) minmax(0,1fr); gap:22px; align-items:start; }
.optm .og-detail-l { background:#fff; border:1px solid var(--ln); border-radius:12px; padding:18px; }
.optm .og-detail-r { background:#fff; }
.optm .og-block-h { font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--mt); margin:0 0 12px; }
.optm .og-block-h small { font-weight:500; text-transform:none; letter-spacing:0; color:#9aa7bd; }
.optm .og-tf { display:block; margin-bottom:14px; font-size:12px; font-weight:600; color:var(--mt); }
.optm .og-tf small { font-weight:500; color:#9aa7bd; }
.optm .og-tf input, .optm .og-tf textarea { width:100%; margin-top:6px; border:1px solid var(--ln); border-radius:8px; padding:10px 12px; font-size:13.5px; color:var(--ink); background:#fff; outline:none; font-weight:400; resize:vertical; }
.optm .og-tf input:focus, .optm .og-tf textarea:focus { border-color:var(--pri); box-shadow:0 0 0 3px rgba(255,122,61,.14); }
.optm .og-canvas { border:1px solid var(--ln); border-radius:12px; background:var(--sf); overflow:hidden; aspect-ratio:1; display:flex; align-items:center; justify-content:center; position:relative; }
.optm .og-canvas img { width:100%; height:100%; object-fit:contain; }
.optm .og-canvas-ph { color:#9aa7bd; display:flex; flex-direction:column; align-items:center; gap:8px; font-size:13px; }
.optm .og-settings { display:flex; gap:20px; font-size:12px; color:var(--mt); margin:14px 0; }
.optm .og-settings b { color:var(--ink); }
.optm .opp-btn, .optm .og-gen { width:100%; height:46px; border:none !important; border-radius:9px !important; background:var(--grad) !important; color:#fff !important; font:700 14.5px 'Plus Jakarta Sans' !important; cursor:pointer; box-shadow:none !important; display:flex; align-items:center; justify-content:center; gap:8px; }
.optm .opp-btn:hover, .optm .og-gen:hover { filter:brightness(1.04) !important; }
.optm .opp-btn:disabled, .optm .og-gen:disabled { opacity:.5; cursor:default; }
.optm .og-dl, .optm .og-textonly { width:100%; height:42px; margin-top:10px; border:1px solid var(--ln); background:#fff; color:var(--pri); font:600 13px Inter; border-radius:9px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px; }
.optm .og-dl:hover { background:var(--sf); }
.optm .og-edit { background:var(--ink) !important; color:#fff !important; }
.optm .og-hint { font-size:12px; color:#9aa7bd; margin-top:8px; text-align:center; }
.optm .og-genall-row .opp-btn, .optm .og-genall-row .og-dl { width:auto; height:40px; padding:0 18px; margin-top:0; }
.optm .og-modbox { margin-top:16px; border:1px solid var(--ln); border-radius:12px; padding:14px; background:var(--sf); }
.optm .og-modbox-l { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--mt); display:block; margin-bottom:8px; }
.optm .og-chat { display:flex; gap:8px; }
.optm .og-chat-inp { flex:1; border:1px solid var(--ln); border-radius:8px; padding:9px 12px; font-size:13px; background:#fff; outline:none; }
.optm .og-chat-send { width:auto !important; height:auto !important; padding:0 16px !important; }
.optm .og-modhint { font-size:11.5px; color:#9aa7bd; margin-top:8px; display:block; }
.optm .og-keybar { background:#FFF7ED; border:1px solid #FCD9B6; border-radius:12px; padding:14px; margin-bottom:16px; }
.optm .og-keybar .opp-btn { width:auto; height:auto; padding:9px 16px; }
.optm .og-fromaudit { display:flex; gap:12px; background:#EFFAF6; border:1px solid #BFECDE; border-radius:12px; padding:14px; margin-bottom:16px; color:var(--ink); }
.optm .og-fa-ic { width:26px; height:26px; border-radius:50%; background:#13DEB9; color:#fff; display:flex; align-items:center; justify-content:center; flex:none; font-weight:700; }
.optm .og-film-h { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--mt); margin:22px 0 10px; }
.optm .og-films { display:flex; gap:10px; overflow:auto; padding-bottom:6px; }
.optm .og-film { width:74px; height:74px; flex:none; border:1px solid var(--ln); border-radius:9px; background:var(--sf); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; cursor:pointer; position:relative; color:var(--mt); padding:4px; }
.optm .og-film img { width:100%; height:100%; object-fit:cover; border-radius:7px; }
.optm .og-film.active { border:2px solid var(--pri); }
.optm .og-film-n { font:700 15px 'Plus Jakarta Sans'; color:#aeb8c8; }
.optm .og-film small { font-size:9px; line-height:1.1; color:var(--mt); max-width:66px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.optm .og-film-hasref { border-color:#9FE1CB; }
.optm .og-film-ref { position:absolute; top:3px; right:3px; font-size:11px; }
.optm .og-film-sep { font-size:9px; color:#9aa7bd; align-self:center; text-align:center; flex:none; padding:0 4px; }
.optm .optm-mt { margin-top:16px; }
.optm .optm-pt { font-size:11px; font-weight:600; color:var(--mt); background:var(--sf); border:1px solid var(--ln); padding:4px 9px; border-radius:6px; }
.optm .optm-gal { margin-left:auto; font-size:13px; font-weight:600; color:var(--pri); border:1px solid var(--ln); padding:7px 14px; border-radius:8px; cursor:pointer; }
.optm .optm-presets { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.optm .optm-preset { border:1px solid var(--ln); border-radius:9px; padding:11px 6px; text-align:center; font-size:11px; font-weight:600; color:var(--mt); cursor:pointer; background:#fff; line-height:1.2; }
.optm .optm-preset i { display:block; font-style:normal; font-size:18px; margin-bottom:5px; }
.optm .optm-preset.on { border-color:#ff7a3d; background:#fff3ec; color:#c2510f; }
.optm .optm-preset:hover { border-color:var(--pri); }
.optm .optm-more { margin:0 0 14px; }
.optm .optm-more summary { font-size:12px; font-weight:600; color:var(--pri); cursor:pointer; padding:8px 0; list-style:none; }
.optm .optm-more summary::-webkit-details-marker { display:none; }
.optm .optm-more summary::before { content:'▸ '; }
.optm .optm-more[open] summary::before { content:'▾ '; }
.optm .optm-tools { position:absolute; top:10px; right:10px; display:flex; flex-direction:column; gap:7px; z-index:2; }
.optm .optm-tool { width:34px; height:34px; border-radius:8px; background:#fff; border:1px solid var(--ln); color:var(--mt); font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(20,30,60,.06); }
.optm .optm-tool:hover { background:var(--sf); color:var(--pri); }

/* „Produs nou" = pagină separată (focus): ascunde cardurile de scenariu, formular full-width + back */
.opt-layout.opt-focus { grid-template-columns: 1fr !important; }
.opt-layout.opt-focus .opt-scn { display: none; }
.opt-nf-back { display:inline-flex; margin-bottom:14px; }

/* Analiză AI per-poză (pasul 1 Masat) — card ADÂNC: compoziție/fundal/header/text/diferențiator per imagine */
.opt-ia-sum { font-size:13px; color:var(--mut,#5c647a); margin-bottom:14px; }
.opt-ia-sum b { color:var(--pri,#1b2030); font-size:15px; }
.opt-ia-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(440px,1fr)); gap:14px; }
.opt-ia-card { display:flex; flex-direction:column; gap:10px; background:var(--bg,#fff); border:1px solid #e7e9f0; border-radius:14px; padding:14px; }
.opt-ia-head { display:flex; align-items:center; gap:12px; }
.opt-ia-thumb { position:relative; flex:0 0 64px; width:64px; height:64px; border-radius:10px; overflow:hidden; background:#f3f5f9; }
.opt-ia-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.opt-ia-num { position:absolute; top:3px; left:3px; background:rgba(20,24,40,.78); color:#fff; font-size:10px; font-weight:700; padding:1px 5px; border-radius:5px; }
.opt-ia-headtxt { flex:1; min-width:0; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.opt-ia-rol { font-size:13.5px; font-weight:700; color:var(--pri,#1b2030); }
.opt-ia-score { font-size:12px; font-weight:800; padding:3px 10px; border-radius:20px; white-space:nowrap; }
.opt-ia-rows { display:flex; flex-direction:column; gap:7px; border-top:1px solid #eef0f5; padding-top:10px; }
.opt-ia-row { font-size:12.5px; line-height:1.5; }
.opt-ia-k { font-weight:700; color:#5c647a; margin-right:5px; white-space:nowrap; }
.opt-ia-v { color:#2c2f3a; }
.opt-ia-prob .opt-ia-k, .opt-ia-prob .opt-ia-v { color:#c2410c; }
.opt-ia-fix { background:#f0fdf4; border-radius:8px; padding:8px 11px; }
.opt-ia-fix .opt-ia-k, .opt-ia-fix .opt-ia-v { color:#15803d; }

/* Analiza descrierii ca TEXT — copywriter (full-width, cu bloc de rescriere) */
.opt-dt-card { background:var(--bg,#fff); border:1px solid #e7e9f0; border-radius:14px; padding:16px; }
.opt-dt-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid #eef0f5; }
.opt-dt-title { font-size:14px; font-weight:800; color:var(--pri,#1b2030); }
.opt-dt-rewrite { margin-top:14px; background:linear-gradient(96deg,#fff8ec,#fffdf6); border:1px solid #f3e2bf; border-radius:12px; padding:13px 15px; }
.opt-dt-rwh { font-size:13px; font-weight:800; color:#9a6a08; margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.opt-dt-rwbody { font-size:13px; line-height:1.65; color:#3a3326; white-space:pre-wrap; }

/* Toast „AI scrie copy-ul" — fix în colț, non-blocant (model Masat: copy-ul intră în generator) */
.opt-ai-toast { position:fixed; right:22px; bottom:22px; z-index:9999; display:flex; align-items:center; gap:10px;
  background:#1b2030; color:#fff; font:600 13px 'Plus Jakarta Sans'; padding:12px 18px; border-radius:12px;
  box-shadow:0 10px 34px rgba(22,32,60,.28); animation:optToastIn .25s ease; }
.opt-ai-toast.done { background:#15803d; }
.opt-ai-spin { width:15px; height:15px; border:2.5px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:optSpin .7s linear infinite; flex:none; }
@keyframes optSpin { to { transform:rotate(360deg); } }
@keyframes optToastIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

/* Optimizează în 3 pași — carduri numerotate consecvente (clar care e ordinea) */
.opt-stepflow { margin-top:20px; }
.opt-stepflow-h { font:800 16px 'Plus Jakarta Sans'; color:#1b2030; margin:0 2px 14px; }
.opt-stepflow-h b { color:#ef6a2d; }
.opt-stepflow-h span { display:block; font:500 12.5px 'Plus Jakarta Sans'; color:#8a93a6; margin-top:3px; }
.opt-stepcard { display:flex; align-items:center; gap:16px; background:#fff; border:1px solid #e7e9f0; border-radius:14px;
  padding:17px 20px; margin-bottom:12px; box-shadow:0 1px 2px rgba(22,32,60,.03); transition:box-shadow .15s, border-color .15s; }
.opt-stepcard:hover { box-shadow:0 6px 22px rgba(22,32,60,.07); border-color:#dfe3ea; }
.opt-stepnum { flex:none; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font:800 19px 'Plus Jakarta Sans'; color:#fff; background:linear-gradient(135deg,#ff7a3d,#ff5470); box-shadow:0 4px 12px rgba(255,90,80,.28); }
.opt-stepbody { flex:1; min-width:0; }
.opt-stepbody b { display:block; font:800 15.5px 'Plus Jakarta Sans'; color:#1b2030; margin-bottom:3px; }
.opt-stepbody b u { text-decoration-color:#ff8a4d; text-underline-offset:2px; }
.opt-stepbody span { font-size:12.5px; color:#5c647a; line-height:1.5; }
.opt-stepbody em { font-style:normal; font-weight:700; color:#ef6a2d; }
.opt-stepcard .opp-btn { flex:none; white-space:nowrap; }
@media (max-width:640px) { .opt-stepcard { flex-wrap:wrap; } .opt-stepcard .opp-btn { width:100%; margin-top:6px; } }

/* Cele 4 view-uri Masat de audit (Factori conversie · Recenzii · SWOT · Blocaje) + sumar extra */
.opt-rep-tabs { overflow-x:auto; flex-wrap:nowrap; scrollbar-width:thin; }
.opt-view-intro { font-size:13px; color:#5c647a; line-height:1.55; margin:2px 2px 14px; }
.opt-view-intro b { color:#1b2030; }
.opt-vsums { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.opt-vsum { font:700 12px 'Plus Jakarta Sans'; color:var(--c,#5b6472); background:color-mix(in srgb,var(--c) 12%,#fff); border:1px solid color-mix(in srgb,var(--c) 26%,#fff); padding:5px 12px; border-radius:20px; }
.opt-vbar { height:6px; border-radius:6px; background:#eef0f5; overflow:hidden; margin:2px 0; }
.opt-vbar i { display:block; height:100%; border-radius:6px; background:#3b6fb0; }
.opt-vbar.pos i { background:#2f8f6b; } .opt-vbar.neg i { background:#c98a1e; }
.opt-cf { background:#fff; border:1px solid #e9ebf1; border-radius:12px; padding:14px 16px; margin-bottom:11px; box-shadow:0 1px 2px rgba(22,32,60,.03); }
.opt-cf-top { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.opt-cf-tag { font:700 10.5px 'Plus Jakarta Sans'; text-transform:uppercase; letter-spacing:.4px; color:var(--c); background:color-mix(in srgb,var(--c) 11%,#fff); padding:3px 9px; border-radius:6px; flex:none; }
.opt-cf-t { flex:1; font:800 14.5px 'Plus Jakarta Sans'; color:#1b2030; min-width:0; }
.opt-cf-pct { font:800 14px 'Plus Jakarta Sans'; color:var(--c); flex:none; }
.opt-cf-how { font-size:12.5px; color:#5a6170; line-height:1.5; margin-top:8px; }
.opt-cf-msg { font-size:13px; color:#234; background:#f4f8f5; border:1px solid #dcefe4; border-radius:8px; padding:8px 11px; margin-top:9px; display:flex; align-items:center; gap:8px; }
.opt-cf-msg .opt-copy { margin-left:auto; flex:none; }
.opt-bl { background:#fff; border:1px solid #e9ebf1; border-left:3px solid var(--c,#c98a1e); border-radius:12px; padding:14px 16px; margin-bottom:11px; box-shadow:0 1px 2px rgba(22,32,60,.03); }
.opt-bl-top { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.opt-bl-sev { font:700 10.5px 'Plus Jakarta Sans'; text-transform:uppercase; letter-spacing:.4px; color:#fff; background:var(--c); padding:3px 9px; border-radius:6px; flex:none; }
.opt-bl-t { flex:1; font:800 14.5px 'Plus Jakarta Sans'; color:#1b2030; min-width:0; }
.opt-bl-pct { font:700 11.5px 'Plus Jakarta Sans'; color:#8a93a6; flex:none; }
.opt-bl-row { font-size:12.5px; color:#3a3f4a; line-height:1.5; margin-top:7px; }
.opt-bl-row span { display:block; font:700 10px 'Plus Jakarta Sans'; text-transform:uppercase; letter-spacing:.4px; color:#9aa1b0; margin-bottom:2px; }
.opt-bl-fix { background:#f4f8f5; border-radius:8px; padding:8px 11px; margin-top:9px; }
.opt-bl-fix span { color:#2f8f6b; }
.opt-swot, .opt-rv-cols { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.opt-swot-h, .opt-rv-h { font:800 13px 'Plus Jakarta Sans'; margin-bottom:11px; padding-bottom:8px; border-bottom:2px solid; }
.opt-swot-pos, .opt-rv-hp { color:#2f8f6b; border-color:#cdeadd; }
.opt-swot-neg { color:#c98a1e; border-color:#f0e2c6; } .opt-rv-hn { color:#c0392b; border-color:#f0d2ce; }
.opt-sw { margin-bottom:12px; }
.opt-sw-h { display:flex; justify-content:space-between; align-items:baseline; font-size:13px; margin-bottom:4px; gap:8px; }
.opt-sw-h b { color:#243040; font-weight:700; } .opt-sw-h span { font:800 12px 'Plus Jakarta Sans'; color:#7c8598; flex:none; }
.opt-sw-src { font-size:11px; color:#9aa1b0; margin-top:3px; }
.opt-rv-col ul { list-style:none; margin:0; padding:0; }
.opt-rv { display:flex; align-items:center; gap:8px; font-size:12.5px; color:#3a3f4a; padding:7px 0; border-bottom:1px solid #f2f3f7; line-height:1.4; }
.opt-rv span:first-child { flex:1; }
.opt-rv-n { font:700 11px 'Plus Jakarta Sans'; color:#8a93a6; background:#f2f3f7; border-radius:10px; padding:1px 8px; flex:none; }
.opt-calc { width:100%; border-collapse:collapse; margin:6px 0 4px; font-size:12.5px; }
.opt-calc th { text-align:left; font:700 10.5px 'Plus Jakarta Sans'; text-transform:uppercase; letter-spacing:.4px; color:#9aa1b0; padding:6px 10px; border-bottom:1px solid #e9ebf1; }
.opt-calc td { padding:8px 10px; border-bottom:1px solid #f2f3f7; color:#3a3f4a; vertical-align:top; }
.opt-imp { font-size:11px; text-transform:uppercase; letter-spacing:.3px; }
.opt-imp-mare { color:#2f8f6b; } .opt-imp-mediu { color:#c98a1e; } .opt-imp-mic { color:#9aa1b0; }
.opt-rems { display:flex; flex-direction:column; gap:8px; }
.opt-rem { display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:#3a3f4a; line-height:1.5; }
.opt-rem-up { font:800 12px 'Plus Jakarta Sans'; color:#2f8f6b; background:#eaf6ef; border-radius:6px; padding:2px 8px; flex:none; }
.opt-pot { font:700 12px 'Plus Jakarta Sans'; color:#2f8f6b; }
@media (max-width:720px) { .opt-swot, .opt-rv-cols { grid-template-columns:1fr; } }