/* Price Competitor — design system (grigio grafite + arancio) */
:root {
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bg: #f4f4f5; --bg-2: #ececee; --surface: #ffffff; --surface-2: #fafafa; --surface-3: #f4f4f5;
  --border: #e4e4e7; --border-strong: #d4d4d8;
  --text: #18181b; --text-2: #3f3f46; --muted: #71717a; --faint: #a1a1aa;
  --primary: #4a783e; --primary-600: #3f6935; --primary-700: #31572a; --primary-soft: #f2f7e6; --primary-ring: rgba(158,189,66,.35); --lime: #9ebd42; --on-primary: #fff;
  --danger: #dc2626; --danger-soft: #fef2f2; --danger-border: #fecaca;
  --success: #16a34a; --success-soft: #f0fdf4; --success-border: #bbf7d0;
  --warning: #d97706; --warning-soft: #fffbeb; --warning-border: #fde68a;
  --info: #2563eb; --info-soft: #eff6ff;
  --side-bg: #2f2f2f; --side-bg-2: #3a3a3a; --side-text: #e5e5e5; --side-muted: #a3a3a3; --side-border: #3d3d3d;
  --shadow-sm: 0 1px 2px rgba(24,24,27,.05);
  --shadow: 0 1px 3px rgba(24,24,27,.06), 0 6px 16px -8px rgba(24,24,27,.10);
  --shadow-lg: 0 20px 50px -12px rgba(24,24,27,.25);
  --radius: 14px; --radius-sm: 10px; --radius-lg: 20px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0e0e10; --bg-2: #141417; --surface: #17171a; --surface-2: #1c1c20; --surface-3: #232328;
  --border: #2a2a30; --border-strong: #3a3a41;
  --text: #f4f4f5; --text-2: #d4d4d8; --muted: #a1a1aa; --faint: #71717a;
  --primary: #9ebd42; --primary-600: #8aab35; --primary-700: #b9d56b; --primary-soft: rgba(158,189,66,.12); --primary-ring: rgba(158,189,66,.35); --lime: #9ebd42;
  --danger: #f87171; --danger-soft: rgba(248,113,113,.10); --danger-border: rgba(248,113,113,.28);
  --success: #4ade80; --success-soft: rgba(74,222,128,.10); --success-border: rgba(74,222,128,.25);
  --warning: #fbbf24; --warning-soft: rgba(251,191,36,.10); --warning-border: rgba(251,191,36,.25);
  --info: #60a5fa; --info-soft: rgba(96,165,250,.10);
  --side-bg: #1c1c1c; --side-bg-2: #262626; --side-border: #2a2a2a;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 1px 3px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6); --shadow-lg: 0 24px 60px -12px rgba(0,0,0,.7);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
svg:not([width]) { width: 16px; height: 16px; flex: none; }
.card-head > svg { width: 20px; height: 20px; color: var(--primary-600); }
.store svg { width: 13px; height: 13px; }
html, body { margin: 0; }
body { font-family: var(--font); background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--primary-600); text-decoration: none; }
a:hover { text-decoration: underline; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
.num, .price { font-variant-numeric: tabular-nums; }
::selection { background: var(--primary-ring); }
.hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── layout ── */
.app { display: grid; grid-template-columns: 248px 1fr; min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; background: var(--side-bg); color: var(--side-text); display: flex; flex-direction: column; border-right: 1px solid var(--side-border); z-index: 40; }
.brand { display: flex; align-items: center; gap: 11px; padding: 20px 20px 18px; }
.brand .logo { width: 36px; height: 36px; flex: none; }
.wordmark { font-size: 16px; letter-spacing: -.01em; line-height: 1.1; color: #fff; }
.wordmark b { font-weight: 800; }
.wordmark small { display: block; font-size: 10.5px; color: var(--side-muted); letter-spacing: .08em; text-transform: uppercase; margin-top: 3px; font-weight: 600; }
.nav { padding: 6px 12px; flex: 1; overflow-y: auto; }
.nav-group { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--side-muted); font-weight: 700; padding: 16px 10px 6px; }
.nav a { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 10px; color: var(--side-text); font-weight: 500; position: relative; margin: 1px 0; }
.nav a:hover { background: var(--side-bg-2); text-decoration: none; color: #fff; }
.nav a.active { background: linear-gradient(90deg, rgba(158,189,66,.18), rgba(158,189,66,.04)); color: #fff; }
.nav a.active::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--lime); }
.nav a.active svg { color: var(--lime); }
.nav svg { width: 18px; height: 18px; flex: none; color: var(--side-muted); }
.nav .count { margin-left: auto; background: var(--lime); color: #1f2a12; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px; }
.side-foot { padding: 14px 16px; border-top: 1px solid var(--side-border); font-size: 12px; color: var(--side-muted); display: grid; gap: 6px; }
.side-foot .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 6px; background: #52525b; }
.side-foot .dot.ok { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.15); }
.side-foot .dot.ko { background: #ef4444; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 30; height: 64px; display: flex; align-items: center; gap: 14px; padding: 0 28px; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); }
.topbar h1 { font-size: 18px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.topbar .sub { color: var(--muted); font-size: 12.5px; margin-top: -1px; }
.topbar .spacer { flex: 1; }
.view { padding: 26px 28px 60px; max-width: 1480px; width: 100%; margin: 0 auto; }
.menu-btn { display: none; }

/* ── primitives ── */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card-pad { padding: 20px; }
.card-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.card-head h2, .card-head h3 { margin: 0; font-size: 15px; font-weight: 700; }
.card-head .muted { font-size: 12.5px; }
.card-head .actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.row { display: flex; align-items: center; gap: 10px; }
.wrap { flex-wrap: wrap; }
.grid { display: grid; gap: 18px; }
.stack { display: grid; gap: 14px; }
.section-title { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 10px; }
hr.sep { border: 0; border-top: 1px solid var(--border); margin: 18px 0; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-weight: 600; font-size: 13.5px; cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s, transform .05s; white-space: nowrap; }
.btn:hover { background: var(--surface-3); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, .input:focus-visible, .select:focus-visible, textarea:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-ring); border-color: var(--primary); }
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: linear-gradient(180deg, var(--primary), var(--primary-600)); border-color: var(--primary-600); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 4px 12px -4px rgba(84,118,68,.55); }
.btn-primary:hover { background: linear-gradient(180deg, var(--primary-600), var(--primary-600)); }
.btn-dark { background: #3a3a3a; border-color: #3a3a3a; color: #fff; }
:root[data-theme="dark"] .btn-dark { background: #f4f4f5; color: #18181b; border-color: #f4f4f5; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--surface-3); }
.btn-danger { color: var(--danger); border-color: var(--danger-border); background: var(--surface); }
.btn-danger:hover { background: var(--danger-soft); }
.btn-sm { height: 30px; padding: 0 11px; font-size: 12.5px; border-radius: 8px; }
.btn-xs { height: 26px; padding: 0 8px; font-size: 12px; border-radius: 7px; gap: 5px; }
.btn-icon { width: 38px; padding: 0; }
.btn-sm.btn-icon { width: 30px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.is-on { background: var(--text); color: var(--surface); border-color: var(--text); }

.input, .select, textarea.input { width: 100%; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface); transition: border-color .15s, box-shadow .15s; }
textarea.input { height: auto; min-height: 110px; padding: 12px; resize: vertical; line-height: 1.55; }
.input::placeholder, textarea::placeholder { color: var(--faint); }
.field { display: grid; gap: 6px; }
.field label, .label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.field .hint { font-size: 12px; color: var(--muted); }
.input-group { position: relative; }
.input-group .input { padding-left: 38px; }
.input-group > svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--faint); pointer-events: none; }
.input-group .suffix { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }

.switch { position: relative; width: 38px; height: 22px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: var(--border-strong); border-radius: 999px; transition: .2s; cursor: pointer; }
.switch span::after { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch input:checked + span { background: var(--primary); }
.switch input:checked + span::after { transform: translateX(16px); }

input[type=range] { accent-color: var(--primary); width: 100%; }

.badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; border: 1px solid var(--border); background: var(--surface-3); color: var(--text-2); white-space: nowrap; }
.badge svg { width: 12px; height: 12px; }
.badge.orange { background: var(--primary-soft); color: var(--primary-700); border-color: color-mix(in srgb, var(--primary) 30%, transparent); }
.badge.red { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-border); }
.badge.green { background: var(--success-soft); color: var(--success); border-color: var(--success-border); }
.badge.amber { background: var(--warning-soft); color: var(--warning); border-color: var(--warning-border); }
.badge.blue { background: var(--info-soft); color: var(--info); border-color: transparent; }
.badge.dark { background: #3a3a3a; color: #fff; border-color: #3a3a3a; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-size: 12.5px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.chip.active { background: var(--text); color: var(--surface); border-color: var(--text); }
.chip .n { color: var(--muted); font-weight: 700; }
.chip.active .n { color: inherit; opacity: .7; }

.thumb { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: var(--surface-3); border: 1px solid var(--border); flex: none; }
.thumb.lg { width: 64px; height: 64px; border-radius: 12px; }
.thumb.xl { width: 100%; height: 260px; border-radius: 14px; }
.ph { display: grid; place-items: center; color: var(--faint); font-size: 10px; }

/* ── KPI ── */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.kpi { padding: 16px 18px; position: relative; overflow: hidden; }
.kpi .k-label { font-size: 12.5px; color: var(--muted); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.kpi .k-icon { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-3); color: var(--text-2); }
.kpi .k-icon svg { width: 16px; height: 16px; }
.kpi .k-icon.orange { background: var(--primary-soft); color: var(--primary-600); }
.kpi .k-icon.red { background: var(--danger-soft); color: var(--danger); }
.kpi .k-icon.green { background: var(--success-soft); color: var(--success); }
.kpi .k-value { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin-top: 10px; font-variant-numeric: tabular-nums; }
.kpi .k-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.kpi.accent { background: linear-gradient(135deg, #454545, #2e2e2e); color: #fff; border-color: #3a3a3a; }
.kpi.accent .k-label, .kpi.accent .k-sub { color: #a1a1aa; }
.kpi.accent .k-icon { background: rgba(158,189,66,.18); color: #9ebd42; }
.kpi.accent::after { content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(158,189,66,.35), transparent 70%); }

/* ── tabelle ── */
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
.table th { text-align: left; font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding: 11px 14px; background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0; }
.table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr { transition: background .12s; }
.table tbody tr:hover { background: var(--surface-2); }
.table .r { text-align: right; }
.cell-prod { display: flex; align-items: center; gap: 12px; min-width: 190px; max-width: 290px; }
.cell-prod .t { font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cell-prod .s { font-size: 12px; color: var(--muted); }
.price-strong { font-weight: 800; font-size: 14.5px; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* differenza con barra */
.diff { display: grid; gap: 4px; min-width: 110px; }
.diff .bar { height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.diff .bar i { display: block; height: 100%; background: var(--danger); border-radius: 3px; }

/* match ring */
.ring { --v: 0; --c: var(--success); width: 40px; height: 40px; border-radius: 50%; background: conic-gradient(var(--c) calc(var(--v) * 1%), var(--surface-3) 0); display: grid; place-items: center; flex: none; }
.ring span { width: 32px; height: 32px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ── analisi ── */
.hero { position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(600px 200px at 100% 0%, var(--primary-soft), transparent 70%); pointer-events: none; }
.hero > * { position: relative; }
.drop { border: 1.5px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface-2); transition: .15s; }
.drop.over { border-color: var(--primary); background: var(--primary-soft); }
.drop textarea { border: 0; background: transparent; box-shadow: none !important; min-height: 130px; }
.drop-foot { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px dashed var(--border); flex-wrap: wrap; }
.queue-item { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--border); }
.queue-item:last-child { border-bottom: 0; }
.queue-item .u { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-item .t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-3); color: var(--muted); }
.st svg { width: 15px; height: 15px; }
.st.run { background: var(--primary-soft); color: var(--primary-600); }
.st.ok { background: var(--success-soft); color: var(--success); }
.st.err { background: var(--danger-soft); color: var(--danger); }
.progress { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--primary), #c5dc85); border-radius: 999px; transition: width .4s ease; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.step { padding: 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.step b { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.step b i { width: 22px; height: 22px; border-radius: 7px; background: var(--primary-soft); color: var(--primary-600); display: grid; place-items: center; font-style: normal; font-size: 11.5px; font-weight: 800; }
.step p { margin: 6px 0 0; font-size: 12px; color: var(--muted); }

/* ── prodotti ── */
.split { display: grid; grid-template-columns: 360px 1fr; gap: 20px; align-items: start; }
.plist { max-height: calc(100vh - 230px); overflow-y: auto; }
.pitem { display: flex; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); cursor: pointer; position: relative; transition: background .12s; }
.pitem:hover { background: var(--surface-2); }
.pitem.sel { background: var(--primary-soft); }
.pitem.sel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--primary); }
.pitem .t { font-weight: 600; font-size: 13px; line-height: 1.3; }
.ladder { position: relative; height: 64px; margin: 8px 6px 0; }
.ladder .axis { position: absolute; left: 0; right: 0; top: 30px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--success-soft), var(--surface-3), var(--danger-soft)); border: 1px solid var(--border); }
.ladder .pt { position: absolute; top: 25px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--surface); border: 2.5px solid var(--text-2); cursor: default; }
.ladder .pt.cheaper { border-color: var(--danger); }
.ladder .pt.me { width: 20px; height: 20px; margin-left: -10px; top: 22px; background: var(--primary); border: 3px solid var(--surface); box-shadow: 0 0 0 2px var(--primary); z-index: 2; }
.ladder .lab { position: absolute; top: 0; transform: translateX(-50%); font-size: 11px; font-weight: 700; white-space: nowrap; color: var(--muted); }
.ladder .lab.me { color: var(--primary-600); }
.ladder .lab.bottom { top: 46px; }
.comp { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--border); align-items: center; }
.comp:last-child { border-bottom: 0; }
.comp.confirmed { background: color-mix(in srgb, var(--success-soft) 60%, transparent); }
.comp.excluded { opacity: .55; }
.comp .store { font-size: 12px; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.comp .title { font-weight: 600; margin: 2px 0 6px; line-height: 1.35; }
.comp .reason { font-size: 12px; color: var(--muted); font-style: italic; }
.comp .right { display: grid; justify-items: end; gap: 8px; }
.seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; background: var(--surface); height: 26px; padding: 0 9px; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); }
.seg button + button { border-left: 1px solid var(--border-strong); }
.seg button:hover { background: var(--surface-3); }
.seg button.yes.on { background: var(--success); color: #fff; }
.seg button.no.on { background: var(--danger); color: #fff; }
.seg svg { width: 13px; height: 13px; }

/* ── report ── */
.prio { width: 8px; align-self: stretch; border-radius: 4px; }
.prio.alta { background: var(--danger); } .prio.media { background: var(--warning); } .prio.bassa { background: var(--success); }
.action-card { display: grid; grid-template-columns: 8px 64px 1fr auto; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--border); align-items: start; }
.action-card:last-child { border-bottom: 0; }
.pricebox { display: grid; grid-template-columns: repeat(3, auto); gap: 4px 18px; text-align: right; font-size: 12px; color: var(--muted); }
.pricebox b { font-size: 15px; color: var(--text); font-variant-numeric: tabular-nums; }
.pricebox .sugg b { color: var(--primary-600); font-size: 17px; }
.report-summary { font-size: 15px; line-height: 1.65; color: var(--text-2); }
.list-dots { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.hl { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; }
.hl svg { width: 16px; height: 16px; color: var(--primary-600); flex: none; margin-top: 2px; }
.ritem { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; align-items: center; }
.ritem:hover { background: var(--surface-2); }
.ritem.sel { background: var(--primary-soft); }

/* ── dashboard ── */
.charts { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.c-4 { grid-column: span 4; } .c-5 { grid-column: span 5; } .c-6 { grid-column: span 6; } .c-7 { grid-column: span 7; } .c-8 { grid-column: span 8; } .c-12 { grid-column: span 12; }
.chart-box { position: relative; height: 280px; padding: 14px 18px 18px; }
.chart-box.sm { height: 240px; }
.legend-list { display: grid; gap: 8px; font-size: 12.5px; }
.legend-list .li { display: flex; align-items: center; gap: 8px; }
.legend-list i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.hbar { display: grid; grid-template-columns: 1fr 140px 64px; gap: 12px; align-items: center; padding: 9px 18px; border-bottom: 1px solid var(--border); font-size: 13px; }
.hbar:last-child { border-bottom: 0; }
.hbar .track { height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.hbar .track i { display: block; height: 100%; background: linear-gradient(90deg, #c5dc85, var(--primary)); border-radius: 4px; }

/* ── utenti / impostazioni ── */
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 12.5px; color: #fff; background: linear-gradient(135deg, #9ebd42, #4a783e); flex: none; }
.avatar.gray { background: linear-gradient(135deg, #71717a, #3f3f46); }
.settings-grid { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; }
.settings-nav { position: sticky; top: 90px; display: grid; gap: 2px; }
.settings-nav a { padding: 8px 12px; border-radius: 9px; color: var(--text-2); font-weight: 600; font-size: 13px; display: flex; gap: 10px; align-items: center; }
.settings-nav a:hover { background: var(--surface); text-decoration: none; }
.settings-nav svg { width: 16px; height: 16px; color: var(--muted); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.toggle-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.toggle-row .tx { flex: 1; }
.toggle-row b { display: block; font-size: 13.5px; }
.toggle-row span.d { font-size: 12px; color: var(--muted); }
.keybox { display: flex; gap: 8px; }
.test-res { display: flex; gap: 8px; align-items: center; font-size: 12.5px; padding: 8px 12px; border-radius: 10px; }
.test-res.ok { background: var(--success-soft); color: var(--success); }
.test-res.ko { background: var(--danger-soft); color: var(--danger); }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; background: var(--surface-3); border: 1px solid var(--border); padding: 10px 12px; border-radius: 10px; overflow-x: auto; white-space: nowrap; }
.save-bar { position: sticky; bottom: 16px; display: flex; justify-content: flex-end; gap: 10px; padding: 12px 16px; margin-top: 18px; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(10px); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); }
.lock-note { display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px; background: linear-gradient(135deg, #454545, #2e2e2e); color: #d4d4d8; font-size: 13px; }
.lock-note svg { width: 20px; height: 20px; color: #9ebd42; flex: none; margin-top: 1px; }
.lock-note b { color: #fff; }

/* ── menu, popover, modal, toast ── */
.pop { position: relative; }
.pop-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 60; display: none; }
.pop.open .pop-menu { display: block; animation: pop .14s ease-out; }
.pop-menu a, .pop-menu button.item { display: flex; width: 100%; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; color: var(--text); background: none; border: 0; cursor: pointer; font-weight: 500; text-align: left; }
.pop-menu a:hover, .pop-menu button.item:hover { background: var(--surface-3); text-decoration: none; }
.pop-menu svg { width: 16px; height: 16px; color: var(--muted); }
.pop-head { padding: 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.th-chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface); font-weight: 600; font-size: 13px; cursor: pointer; }
.th-chip b { color: var(--primary-600); }
.th-chip svg { width: 15px; height: 15px; color: var(--muted); }
.user-btn { display: flex; align-items: center; gap: 10px; padding: 4px 8px 4px 4px; border-radius: 12px; border: 1px solid transparent; background: none; cursor: pointer; }
.user-btn:hover { background: var(--surface); border-color: var(--border); }
.user-btn .nm { font-weight: 600; font-size: 13px; line-height: 1.1; text-align: left; }
.user-btn .rl { font-size: 11.5px; color: var(--muted); text-align: left; }

.modal-back { position: fixed; inset: 0; background: rgba(9,9,11,.55); backdrop-filter: blur(3px); display: grid; place-items: center; z-index: 100; padding: 16px; animation: fade .15s; }
.modal { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-lg); animation: pop .18s ease-out; }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.modal-head h3 { margin: 0; font-size: 16px; }
.modal-body { padding: 20px 22px; display: grid; gap: 14px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 18px 18px; }
@keyframes fade { from { opacity: 0; } }
#toasts { position: fixed; right: 20px; bottom: 20px; display: grid; gap: 10px; z-index: 200; }
.toast { display: flex; align-items: center; gap: 10px; min-width: 260px; max-width: 420px; padding: 12px 14px; border-radius: 12px; background: #2e2e2e; color: #fff; box-shadow: var(--shadow-lg); font-size: 13px; animation: pop .2s ease-out; border-left: 4px solid var(--primary); }
.toast.err { border-left-color: #ef4444; }
.toast.ok { border-left-color: #22c55e; }
.toast svg { width: 18px; height: 18px; flex: none; }

.empty { display: grid; place-items: center; text-align: center; padding: 56px 20px; color: var(--muted); }
.empty .ic { width: 64px; height: 64px; border-radius: 18px; background: var(--primary-soft); color: var(--primary-600); display: grid; place-items: center; margin-bottom: 14px; }
.empty .ic svg { width: 30px; height: 30px; }
.empty h3 { margin: 0 0 6px; color: var(--text); font-size: 16px; }
.empty p { margin: 0; max-width: 420px; }
.skeleton { background: linear-gradient(90deg, var(--surface-3), var(--surface-2), var(--surface-3)); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: 8px; }
@keyframes sk { to { background-position: -200% 0; } }
.spin { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.fade-in { animation: fadeUp .25s ease-out; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── login / setup — Garnero green edition ── */
.auth{min-height:100vh;display:grid;grid-template-columns:minmax(520px,1.08fr) minmax(460px,.92fr);background:#f3f5f3}
.auth-side{position:relative;isolation:isolate;overflow:hidden;padding:54px clamp(44px,5vw,78px);display:flex;flex-direction:column;color:#e9eeea;background:radial-gradient(circle at 80% 12%,rgba(116,157,105,.20),transparent 30%),radial-gradient(circle at 18% 90%,rgba(74,120,62,.22),transparent 32%),linear-gradient(145deg,#252b27 0%,#1e2420 55%,#171b18 100%)}
.auth-side::before{content:"";position:absolute;inset:0;z-index:-2;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(135deg,rgba(0,0,0,.75),transparent 75%)}
.auth-side::after{content:"";position:absolute;z-index:-1;width:440px;height:440px;right:-180px;bottom:-170px;border:1px solid rgba(135,174,124,.14);border-radius:50%;box-shadow:0 0 0 70px rgba(74,120,62,.035),0 0 0 140px rgba(74,120,62,.025)}
.auth-side>*{position:relative;z-index:1}.auth .brand{padding:0;gap:13px}.auth .brand .logo{width:46px;height:46px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.18))}
.auth-side .wordmark{font-size:17px;letter-spacing:-.025em;color:#fff}.auth-side .wordmark b{color:#8db083}.auth-side .wordmark small{color:#8d9990;letter-spacing:.11em}
.auth-side h2{max-width:600px;margin:clamp(62px,10vh,104px) 0 18px;color:#fff;font-size:clamp(38px,4vw,58px);line-height:1.02;letter-spacing:-.052em;font-weight:700}
.auth-side h2 em{font-style:normal;color:#91b487;background:none;-webkit-text-fill-color:currentColor}
.auth-side p.lead{max-width:570px;margin:0 0 34px;color:#aeb8b0;font-size:16px;line-height:1.7}
.feat{max-width:570px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.feat div{min-height:76px;display:flex;gap:12px;align-items:flex-start;padding:15px;border:1px solid rgba(255,255,255,.075);border-radius:14px;background:rgba(255,255,255,.035);color:#cbd2cc;font-size:13px;line-height:1.45;backdrop-filter:blur(8px)}
.feat div:hover{background:rgba(255,255,255,.055);border-color:rgba(135,174,124,.18)}.feat svg{width:19px;height:19px;flex:none;margin-top:1px;color:#8db083}.feat b{color:#fff;font-weight:650}
.mock{width:min(570px,100%);margin-top:auto;padding:20px 22px;border:1px solid rgba(255,255,255,.09);border-radius:18px;background:rgba(9,13,10,.28);box-shadow:0 24px 70px rgba(0,0,0,.18);backdrop-filter:blur(14px)}
.mock::before{content:"PANORAMICA PREZZI";display:block;margin-bottom:10px;color:#7f8c82;font-size:9.5px;font-weight:800;letter-spacing:.14em}
.mock .mrow{display:grid;grid-template-columns:100px 1fr 72px;gap:12px;align-items:center;padding:7px 0;color:#9da79f;font-size:12px}.mock .mbar{height:7px;border-radius:999px;background:#59605b}.mock .mbar.me{background:linear-gradient(90deg,#4a783e,#87ae7c)}.mock .mrow b{color:#f3f5f3;text-align:right;font-variant-numeric:tabular-nums}
.auth-main{position:relative;display:grid;place-items:center;padding:64px clamp(32px,6vw,92px);background:radial-gradient(circle at 100% 0,rgba(74,120,62,.075),transparent 28%),#f5f7f5}
.auth-main::before{content:"";position:absolute;inset:24px;pointer-events:none;border:1px solid rgba(74,120,62,.055);border-radius:28px}
.auth-card{position:relative;z-index:1;width:min(440px,100%);padding:34px 36px 30px;border:1px solid #dfe5df;border-radius:22px;background:rgba(255,255,255,.94);box-shadow:0 24px 70px -38px rgba(25,45,28,.35),0 2px 8px rgba(26,35,28,.035)}
.auth-card>.brand{margin:-4px 0 30px;padding:0!important}.auth-card>.brand .logo{width:44px!important;height:44px!important}.auth-card>.brand .wordmark{color:#222a24!important;font-size:17px}.auth-card>.brand .wordmark b{color:#4a783e}
.auth-card h1{margin:0 0 8px;color:#202622;font-size:28px;line-height:1.15;letter-spacing:-.035em}.auth-card .muted{margin:0 0 28px;color:#778078;line-height:1.6}.auth-card form{display:grid;gap:17px}.auth-card .field{gap:7px}.auth-card .field label{color:#424a44;font-size:12px;font-weight:700;letter-spacing:.015em}
.auth-card .input{height:46px;padding:0 14px;border:1px solid #d9dfda;border-radius:11px;background:#fbfcfb;color:#222823}.auth-card .input:hover{border-color:#c8d1c9}.auth-card .input:focus{border-color:#4a783e;background:#fff;box-shadow:0 0 0 4px rgba(74,120,62,.10);outline:none}
.auth-card .btn-primary{height:47px;margin-top:4px;border:1px solid #3f6935;border-radius:11px;background:linear-gradient(180deg,#527f47,#4a783e);box-shadow:0 9px 22px -12px rgba(74,120,62,.72),inset 0 1px rgba(255,255,255,.14);color:#fff;font-size:14px;font-weight:700}.auth-card .btn-primary:hover{background:linear-gradient(180deg,#4a783e,#3f6935)}
.auth-top{position:absolute;top:26px;right:30px;z-index:2}.auth-top .btn{border:1px solid #dfe5df;background:rgba(255,255,255,.78);color:#58615a}.alert-box{padding:12px 14px;border-radius:11px;font-size:13px;background:var(--danger-soft);color:var(--danger);border:1px solid var(--danger-border)}
.auth-foot{margin-top:28px;padding-top:20px;border-top:1px solid #edf0ed;font-size:11.5px;color:#98a099;display:flex;gap:8px;align-items:center}.auth-foot svg{width:14px;height:14px;color:#4a783e}
:root[data-theme="dark"] .auth{background:#111512}:root[data-theme="dark"] .auth-main{background:radial-gradient(circle at 100% 0,rgba(74,120,62,.14),transparent 28%),#111512}:root[data-theme="dark"] .auth-card{border-color:#2d362f;background:rgba(27,33,29,.96)}:root[data-theme="dark"] .auth-card>.brand .wordmark{color:#f0f3f0!important}:root[data-theme="dark"] .auth-card h1{color:#f4f6f4}:root[data-theme="dark"] .auth-card .muted{color:#99a39b}:root[data-theme="dark"] .auth-card .field label{color:#cbd2cc}:root[data-theme="dark"] .auth-card .input{border-color:#374039;background:#202722;color:#f3f5f3}:root[data-theme="dark"] .auth-card .input:focus{border-color:#6f9a63;background:#222a24}:root[data-theme="dark"] .auth-foot{border-color:#303830}

/* ── responsive ── */
@media (max-width: 1200px) { .c-4, .c-5, .c-7 { grid-column: span 6; } .c-8 { grid-column: span 12; } }
@media (max-width: 1100px) { .split { grid-template-columns: 1fr; } .plist { max-height: 360px; } .settings-grid { grid-template-columns: 1fr; } .settings-nav { display: none; } }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 264px; transform: translateX(-100%); transition: transform .2s; }
  .sidebar.open { transform: none; box-shadow: var(--shadow-lg); }
  .menu-btn { display: inline-flex; }
  .topbar { padding: 0 16px; }
  .view { padding: 18px 16px 48px; }
  .auth { grid-template-columns: 1fr; min-height: 100svh; }
  .auth-side { display: none; }
  .auth-main { padding: 76px 20px 32px; }
  .auth-main::before { inset: 12px; border-radius: 20px; }
  .auth-card { width: min(460px, 100%); padding: 30px 26px 26px; border-radius: 18px; }
  .auth-top { top: 20px; right: 20px; }
  .c-4, .c-5, .c-6, .c-7, .c-8 { grid-column: span 12; }
  .steps { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .user-btn .nm, .user-btn .rl, .th-chip .lbl, .topbar .sub { display: none; }
  .action-card { grid-template-columns: 8px 1fr; }
  .action-card .thumb, .action-card .pricebox { grid-column: 2; }
  .comp { grid-template-columns: 52px 1fr; }
  .comp .right { grid-column: 1 / -1; justify-items: start; grid-auto-flow: column; justify-content: space-between; }
  .hbar { grid-template-columns: 1fr 80px 56px; padding: 9px 12px; }
}

/* ── stampa (report) ── */
@media print {
  .sidebar, .topbar, .no-print, #toasts { display: none !important; }
  .app { display: block; } .view { padding: 0; max-width: none; }
  body { background: #fff; color: #000; }
  .card { box-shadow: none; border-color: #ddd; break-inside: avoid; }
  .action-card { break-inside: avoid; }
}


/* ── login / setup — premium Price Competitor ── */
.pc-auth-page{min-height:100vh;background:var(--bg)}
.auth{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(560px,1.08fr) minmax(470px,.92fr);
  background:var(--bg)
}

/* LEFT PANEL */
.auth-side{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  padding:38px clamp(46px,5vw,78px) 28px;
  color:#eef2ef;
  background:
    radial-gradient(540px 460px at 100% -5%,rgba(158,189,66,.15),transparent 64%),
    radial-gradient(500px 420px at -5% 102%,rgba(84,118,68,.26),transparent 65%),
    linear-gradient(145deg,#243029 0%,#1b2721 48%,#131d18 100%)
}
.auth-side::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.55;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:linear-gradient(180deg,transparent 0,#000 15%,#000 85%,transparent 100%)
}
.auth-side::after{
  content:"";
  position:absolute;
  width:520px;height:180px;
  right:-150px;bottom:-70px;
  border-radius:60% 30% 55% 25%;
  transform:rotate(-12deg);
  background:linear-gradient(135deg,rgba(158,189,66,.20),rgba(84,118,68,.02));
  filter:blur(1px);
  pointer-events:none
}
.auth-side-inner{
  position:relative;
  z-index:1;
  width:min(100%,660px);
  min-height:calc(100vh - 100px);
  display:flex;
  flex-direction:column
}
.auth-brand{
  padding:0;
  gap:16px;
  flex:none
}
.auth-logo-shell{
  width:72px;height:72px;
  display:grid;
  place-items:center;
  flex:none
}
.auth-logo-shell .logo{
  width:72px;height:72px;
  object-fit:contain;
  filter:drop-shadow(0 9px 18px rgba(0,0,0,.18))
}
.auth-brand .wordmark{
  color:#fff;
  font-size:21px;
  font-weight:500;
  line-height:1.05;
  letter-spacing:-.025em
}
.auth-brand .wordmark b{color:#9ebd42;font-weight:800}
.auth-brand .wordmark small{
  display:block;
  margin-top:7px;
  color:#87958c;
  font-size:9px;
  line-height:1;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase
}

.auth-copy{
  margin-top:clamp(38px,5.5vh,62px)
}
.auth-kicker{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:17px;
  color:#a7b3aa;
  font-size:9px;
  font-weight:800;
  letter-spacing:.17em;
  text-transform:uppercase
}
.auth-kicker span{
  width:27px;height:2px;
  border-radius:99px;
  background:#9ebd42
}
.auth-side h2{
  max-width:620px;
  margin:0;
  color:#fff;
  font-size:clamp(38px,3.4vw,52px);
  line-height:1.055;
  font-weight:750;
  letter-spacing:-.052em
}
.auth-side h2 em{
  display:inline;
  font-style:normal;
  background:linear-gradient(90deg,#9ebd42,#c3dc7b);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent
}
.auth-side p.lead{
  max-width:590px;
  margin:18px 0 26px;
  color:#aab6ae;
  font-size:14.5px;
  line-height:1.7
}

.feat{
  width:100%;
  max-width:620px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 14px
}
.feat>div{
  min-width:0;
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:12px 13px;
  border:1px solid rgba(255,255,255,.055);
  border-radius:12px;
  background:rgba(255,255,255,.025)
}
.feat-icon{
  width:31px;height:31px;
  display:grid;
  place-items:center;
  flex:none;
  border-radius:9px;
  color:#a8ca55;
  background:rgba(158,189,66,.105)
}
.feat-icon svg{width:16px;height:16px}
.feat>div>span:last-child{
  display:block;
  min-width:0;
  color:#d8dfda;
  font-size:12px;
  line-height:1.3
}
.feat b{
  display:block;
  margin-bottom:3px;
  color:#fff;
  font-size:12px;
  font-weight:650
}
.feat small{
  display:block;
  color:#8f9c93;
  font-size:10.5px;
  line-height:1.4
}

/* PRICE MOCKUP — deliberately not margin-top:auto */
.mock{
  width:min(100%,620px);
  margin-top:clamp(28px,4.2vh,45px);
  padding:18px 20px 15px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:16px;
  background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  box-shadow:0 20px 48px rgba(0,0,0,.13),inset 0 1px rgba(255,255,255,.035);
  backdrop-filter:blur(12px)
}
.mock-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:11px;
  padding-bottom:13px;
  border-bottom:1px solid rgba(255,255,255,.07)
}
.mock-head small{
  display:block;
  margin-bottom:3px;
  color:#748179;
  font-size:8px;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase
}
.mock-head strong{
  color:#f2f5f3;
  font-size:12.5px;
  font-weight:650
}
.mock-live{
  display:flex;
  align-items:center;
  gap:6px;
  color:#a5c858;
  font-size:8.5px;
  font-weight:800;
  letter-spacing:.12em
}
.mock-live span{
  width:7px;height:7px;
  border-radius:50%;
  background:#9ebd42;
  box-shadow:0 0 0 4px rgba(158,189,66,.09)
}
.mock .mrow{
  display:grid;
  grid-template-columns:95px minmax(110px,1fr) 72px;
  gap:13px;
  align-items:center;
  padding:6px 0;
  color:#a2aea6;
  font-size:10.5px
}
.mock .mtrack{
  width:100%;
  height:7px;
  overflow:hidden;
  border-radius:99px;
  background:rgba(255,255,255,.075)
}
.mock .mbar{
  height:100%;
  border-radius:99px;
  background:linear-gradient(90deg,#65726a,#8c9890)
}
.mock .mbar.me{
  background:linear-gradient(90deg,#9ebd42,#62853f)
}
.mock .mrow b{
  color:#f0f4f1;
  font-size:10.5px;
  font-weight:650;
  text-align:right;
  font-variant-numeric:tabular-nums
}
.mock-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-top:10px;
  padding-top:11px;
  border-top:1px solid rgba(255,255,255,.07);
  color:#849188;
  font-size:9.5px
}
.mock-foot b{
  color:#a9ca5b;
  font-size:12px
}

.auth-side-bottom{
  position:absolute;
  z-index:2;
  left:clamp(46px,5vw,78px);
  bottom:19px;
  display:flex;
  align-items:center;
  gap:9px;
  color:#6f7d74;
  font-size:8.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase
}
.auth-side-dot{
  width:3px;height:3px;
  border-radius:50%;
  background:#738078
}

/* RIGHT PANEL */
.auth-main{
  position:relative;
  min-width:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:72px clamp(36px,5.2vw,82px);
  overflow:hidden;
  background:
    radial-gradient(480px 350px at 100% 0,rgba(84,118,68,.055),transparent 70%),
    var(--bg)
}
.auth-main::before{
  content:"";
  position:absolute;
  width:430px;height:430px;
  right:-190px;bottom:-190px;
  border-radius:50%;
  background:radial-gradient(circle,var(--primary-soft),transparent 68%);
  opacity:.65;
  pointer-events:none
}
.auth-main::after{
  content:"";
  position:absolute;
  width:260px;height:260px;
  left:-150px;top:-140px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(158,189,66,.08),transparent 70%);
  pointer-events:none
}
.auth-top{
  position:absolute;
  z-index:3;
  top:23px;
  right:28px;
  display:flex;
  align-items:center;
  gap:12px
}
.auth-secure{
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--faint);
  font-size:9.5px;
  font-weight:650
}
.auth-secure span{
  width:7px;height:7px;
  border-radius:50%;
  background:#55a45d;
  box-shadow:0 0 0 4px rgba(85,164,93,.09)
}
.auth-theme{
  width:40px!important;
  height:40px!important;
  border:1px solid var(--border)!important;
  border-radius:50%!important;
  background:var(--surface)!important;
  box-shadow:var(--shadow-sm)
}

/* LOGIN CARD */
.auth-card{
  position:relative;
  z-index:2;
  width:min(440px,100%);
  padding:34px 36px 27px;
  border:1px solid var(--border);
  border-radius:20px;
  background:color-mix(in srgb,var(--surface) 97%,transparent);
  box-shadow:0 28px 75px rgba(30,45,34,.09),0 3px 12px rgba(30,45,34,.035)
}
.auth-card-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:27px;
  padding-bottom:22px;
  border-bottom:1px solid var(--border)
}
.auth-card-brand img{
  width:47px;height:47px;
  object-fit:contain;
  flex:none
}
.auth-card-brand strong{
  display:block;
  color:var(--text);
  font-size:16px;
  line-height:1;
  font-weight:600;
  letter-spacing:-.025em
}
.auth-card-brand strong span{
  color:var(--primary-600);
  font-weight:800
}
.auth-card-brand small{
  display:block;
  margin-top:5px;
  color:var(--faint);
  font-size:8px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase
}
.auth-form-head{
  margin-bottom:24px
}
.auth-form-kicker{
  display:block;
  margin-bottom:8px;
  color:var(--primary-600);
  font-size:8.5px;
  font-weight:800;
  letter-spacing:.15em
}
.auth-card h1{
  margin:0;
  color:var(--text);
  font-size:28px;
  line-height:1.12;
  font-weight:750;
  letter-spacing:-.04em
}
.auth-form-head p{
  margin:9px 0 0;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.55
}
.auth-card form{
  display:grid;
  gap:15px
}
.auth-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}
.auth-card .field{
  display:grid;
  gap:7px
}
.auth-card .field label{
  color:var(--text-2);
  font-size:11.5px;
  font-weight:650
}
.auth-card .input{
  width:100%;
  height:46px;
  padding:0 13px;
  border:1px solid var(--border-strong);
  border-radius:10px;
  background:var(--surface);
  color:var(--text);
  font-size:13px;
  transition:border-color .15s,box-shadow .15s,background .15s
}
.auth-card .input::placeholder{color:var(--faint)}
.auth-card .input:hover{
  border-color:color-mix(in srgb,var(--primary) 35%,var(--border-strong))
}
.auth-card .input:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 11%,transparent)
}
.auth-input-wrap{
  position:relative
}
.auth-input-wrap .input{
  padding-left:43px
}
.auth-input-icon{
  position:absolute;
  z-index:1;
  left:14px;
  top:50%;
  width:18px;height:18px;
  transform:translateY(-50%);
  color:var(--faint);
  pointer-events:none
}
.auth-input-icon svg{width:18px;height:18px}
.auth-input-wrap:focus-within .auth-input-icon{
  color:var(--primary)
}
.auth-submit{
  width:100%;
  height:47px!important;
  margin-top:3px;
  display:flex!important;
  align-items:center;
  justify-content:center;
  gap:9px;
  border-radius:10px!important;
  font-size:13px!important;
  font-weight:700!important;
  background:linear-gradient(180deg,#557f49 0%,#426d38 100%)!important;
  border-color:#3b6332!important;
  box-shadow:0 8px 20px rgba(70,111,58,.20),inset 0 1px rgba(255,255,255,.15)!important
}
.auth-submit:hover{
  background:linear-gradient(180deg,#4b763f,#396330)!important;
  box-shadow:0 10px 24px rgba(70,111,58,.24),inset 0 1px rgba(255,255,255,.12)!important
}
.auth-submit svg{
  transition:transform .16s
}
.auth-submit:hover svg{
  transform:translateX(3px)
}
.auth-card .alert-box{
  margin:0 0 18px!important;
  padding:11px 13px;
  border-radius:10px;
  font-size:12px;
  line-height:1.5
}
.auth-foot{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:8px;
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid var(--border);
  color:var(--faint);
  font-size:9.5px
}
.auth-foot-item{
  display:flex;
  align-items:center;
  gap:5px
}
.auth-foot svg{
  width:12px;height:12px
}
.auth-foot-sep{
  width:3px;height:3px;
  border-radius:50%;
  background:var(--border-strong)
}

/* DARK */
:root[data-theme="dark"] .auth-main{
  background:
    radial-gradient(480px 350px at 100% 0,rgba(158,189,66,.055),transparent 70%),
    var(--bg)
}
:root[data-theme="dark"] .auth-card{
  background:color-mix(in srgb,var(--surface) 96%,transparent);
  box-shadow:0 32px 85px rgba(0,0,0,.30)
}

/* SHORT DESKTOP */
@media(max-height:820px) and (min-width:901px){
  .auth-side{padding-top:27px;padding-bottom:23px}
  .auth-side-inner{min-height:calc(100vh - 76px)}
  .auth-logo-shell,.auth-logo-shell .logo{width:59px;height:59px}
  .auth-brand .wordmark{font-size:18px}
  .auth-copy{margin-top:25px}
  .auth-kicker{margin-bottom:11px}
  .auth-side h2{font-size:36px}
  .auth-side p.lead{margin:12px 0 18px;line-height:1.5;font-size:13px}
  .feat{gap:8px 10px}
  .feat>div{padding:8px 10px}
  .feat-icon{width:27px;height:27px}
  .mock{margin-top:19px;padding:13px 17px 11px}
  .mock-head{margin-bottom:6px;padding-bottom:8px}
  .mock .mrow{padding:4px 0}
  .mock-foot{margin-top:5px;padding-top:7px}
  .auth-side-bottom{display:none}
  .auth-main{padding-top:50px;padding-bottom:50px}
  .auth-card{padding-top:27px;padding-bottom:23px}
  .auth-card-brand{margin-bottom:20px;padding-bottom:17px}
  .auth-form-head{margin-bottom:18px}
  .auth-card form{gap:11px}
  .auth-card .input{height:42px}
  .auth-submit{height:44px!important}
  .auth-foot{margin-top:18px;padding-top:14px}
}

/* TABLET */
@media(max-width:1150px) and (min-width:901px){
  .auth{grid-template-columns:.96fr 1.04fr}
  .auth-side{padding-left:38px;padding-right:38px}
  .auth-side h2{font-size:38px}
  .feat{grid-template-columns:1fr}
  .feat>div:nth-child(n+3){display:none}
  .auth-side-bottom{left:38px}
  .auth-main{padding-left:38px;padding-right:38px}
}

/* MOBILE */
@media(max-width:900px){
  .auth{
    display:block;
    min-height:100vh
  }
  .auth-side{
    min-height:auto;
    padding:22px 22px 26px;
    background:
      radial-gradient(380px 260px at 100% 0,rgba(158,189,66,.15),transparent 65%),
      linear-gradient(145deg,#243029,#17221c)
  }
  .auth-side-inner{
    width:100%;
    min-height:0
  }
  .auth-logo-shell,.auth-logo-shell .logo{
    width:50px;height:50px
  }
  .auth-brand .wordmark{font-size:17px}
  .auth-brand .wordmark small{font-size:7.5px}
  .auth-copy{margin-top:24px}
  .auth-kicker{display:none}
  .auth-side h2{
    max-width:540px;
    font-size:clamp(27px,7vw,35px)
  }
  .auth-side p.lead{
    max-width:600px;
    margin:11px 0 0;
    font-size:12.5px;
    line-height:1.55
  }
  .feat,.mock,.auth-side-bottom{
    display:none
  }
  .auth-main{
    min-height:auto;
    padding:39px 20px 48px
  }
  .auth-top{
    top:15px;
    right:16px
  }
  .auth-secure{display:none}
  .auth-card{
    width:min(470px,100%);
    padding:28px 25px 24px
  }
  .auth-card-brand{
    display:none
  }
}

/* SMALL MOBILE */
@media(max-width:520px){
  .auth-side{padding:18px 17px 22px}
  .auth-logo-shell,.auth-logo-shell .logo{width:44px;height:44px}
  .auth-brand{gap:11px}
  .auth-brand .wordmark{font-size:15px}
  .auth-copy{margin-top:20px}
  .auth-side h2{font-size:28px}
  .auth-side p.lead{font-size:12px}
  .auth-main{padding:31px 13px 40px}
  .auth-card{
    padding:24px 19px 21px;
    border-radius:16px
  }
  .auth-card h1{font-size:25px}
  .auth-form-grid{grid-template-columns:1fr}
  .auth-card .input{height:44px}
  .auth-submit{height:45px!important}
  .auth-foot{gap:6px;font-size:8.5px}
}


/* =========================================================
   AUTH DESKTOP V2 — composizione come riferimento "dopo"
   ========================================================= */
@media (min-width: 901px) {
  .auth{
    grid-template-columns:54% 46%;
  }

  .auth-side{
    padding:30px 0 24px;
  }

  .auth-side-inner{
    width:min(100% - 72px,630px);
    min-height:calc(100vh - 82px);
    margin:0 auto;
  }

  .auth-brand{
    gap:22px;
    align-items:center;
  }

  .auth-logo-shell{
    width:88px;
    height:88px;
  }

  .auth-logo-shell .logo{
    width:88px;
    height:88px;
  }

  .auth-brand .wordmark{
    font-size:27px;
    letter-spacing:-.035em;
  }

  .auth-brand .wordmark small{
    margin-top:9px;
    font-size:10px;
    letter-spacing:.17em;
  }

  .auth-copy{
    margin-top:38px;
  }

  .auth-kicker{
    margin-bottom:17px;
  }

  .auth-side h2{
    max-width:600px;
    font-size:clamp(40px,3vw,50px);
    line-height:1.04;
  }

  .auth-side p.lead{
    max-width:585px;
    margin:17px 0 24px;
    font-size:14px;
    line-height:1.65;
  }

  .feat{
    width:100%;
    max-width:600px;
    gap:12px 14px;
  }

  .feat>div{
    padding:11px 12px;
    min-height:68px;
  }

  .mock{
    width:100%;
    max-width:600px;
    margin-top:31px;
    padding:17px 19px 14px;
  }

  .auth-side-bottom{
    left:50%;
    width:min(calc(100% - 72px),630px);
    transform:translateX(-50%);
    bottom:15px;
  }

  .auth-main{
    padding-left:clamp(48px,6vw,95px);
    padding-right:clamp(48px,6vw,95px);
  }

  .auth-card{
    width:min(430px,100%);
  }
}

/* telas largas: mantém o bloco esquerdo elegante e não esticado */
@media (min-width: 1500px) {
  .auth-side-inner{
    width:630px;
  }

  .auth-side h2{
    font-size:50px;
  }

  .auth-card{
    width:430px;
  }
}

/* notebooks: mesma composição, um pouco mais compacta */
@media (min-width: 901px) and (max-width: 1250px) {
  .auth{
    grid-template-columns:52% 48%;
  }

  .auth-side-inner{
    width:min(100% - 54px,580px);
  }

  .auth-logo-shell,
  .auth-logo-shell .logo{
    width:70px;
    height:70px;
  }

  .auth-brand .wordmark{
    font-size:22px;
  }

  .auth-copy{
    margin-top:30px;
  }

  .auth-side h2{
    font-size:39px;
  }

  .auth-side p.lead{
    font-size:13px;
  }

  .mock{
    margin-top:24px;
  }

  .auth-side-bottom{
    width:min(calc(100% - 54px),580px);
  }
}


/* =========================================================
   AUTH V3 — CENTRALIZZAZIONE LOGHI E FOOTER
   ========================================================= */

/* Logo principale della colonna verde centrato nella sua area */
.auth-brand{
  width:100%;
  justify-content:center !important;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}

.auth-logo-shell{
  flex:none;
}

.auth-brand .wordmark{
  text-align:left;
}

/* Footer Price Competitor · Garnero Arredamenti centrato
   rispetto all'intera colonna verde */
.auth-side-bottom{
  left:0 !important;
  right:0 !important;
  bottom:17px !important;
  width:100% !important;
  max-width:none !important;
  transform:none !important;
  justify-content:center !important;
  text-align:center !important;
  padding:0 24px;
}

/* Card di accesso: logo perfettamente centrato sopra username/password */
.auth-card-brand{
  width:100%;
  justify-content:center !important;
  text-align:center !important;
  flex-direction:column;
  gap:9px;
}

.auth-card-brand img{
  display:block;
  width:62px !important;
  height:62px !important;
  margin:0 auto;
}

.auth-card-brand > div{
  width:100%;
  text-align:center;
}

.auth-card-brand strong,
.auth-card-brand small{
  text-align:center;
}

/* Anche intestazione del form allineata con il logo e i campi */
.auth-form-head{
  text-align:center;
}

.auth-form-head p{
  max-width:350px;
  margin-left:auto;
  margin-right:auto;
}

/* Desktop: logo sinistro centrato nella larghezza del contenuto */
@media (min-width:901px){
  .auth-brand{
    transform:none;
  }

  .auth-side-bottom{
    left:0 !important;
    width:100% !important;
  }

  .auth-card-brand{
    padding-bottom:20px;
  }
}

/* Mobile */
@media (max-width:900px){
  .auth-brand{
    justify-content:center !important;
  }

  .auth-brand .wordmark{
    text-align:left;
  }
}


/* =========================================================
   AUTH V5 — layout uguale al mockup approvato
   ========================================================= */
.pc-auth-page{overflow-x:hidden}
.auth{
  grid-template-columns:57.5% 42.5% !important;
}

/* AREA SCURA: nessun logo in alto, tutto centrato */
.auth-side{
  padding:0 !important;
  text-align:center !important;
  background:
    radial-gradient(560px 430px at 100% 0,rgba(106,146,66,.18),transparent 66%),
    radial-gradient(520px 380px at 0 100%,rgba(94,135,61,.16),transparent 65%),
    linear-gradient(145deg,#173027 0%,#10251d 48%,#0c1d17 100%) !important;
}
.auth-side .auth-brand{display:none !important}
.auth-side-inner{
  width:min(calc(100% - 80px),700px) !important;
  min-height:100vh !important;
  margin:0 auto !important;
  padding:56px 0 64px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
}
.auth-copy{
  width:100% !important;
  margin:0 !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  text-align:center !important;
}
.auth-kicker{
  justify-content:center !important;
  margin:0 0 20px !important;
  color:#aebbb4 !important;
  font-size:9px !important;
  letter-spacing:.17em !important;
}
.auth-side h2{
  max-width:660px !important;
  margin:0 auto !important;
  text-align:center !important;
  font-size:clamp(42px,3.3vw,56px) !important;
  line-height:1.04 !important;
}
.auth-side p.lead{
  max-width:640px !important;
  margin:19px auto 28px !important;
  text-align:center !important;
  font-size:14px !important;
  line-height:1.65 !important;
}

/* CARDS: conteúdo centralizado verticalmente */
.feat{
  width:100% !important;
  max-width:660px !important;
  margin:0 auto !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px 14px !important;
}
.feat>div{
  min-height:74px !important;
  padding:13px 16px !important;
  align-items:center !important;
  text-align:left !important;
  border-color:rgba(255,255,255,.075) !important;
  background:rgba(255,255,255,.035) !important;
}
.feat-icon{
  width:39px !important;
  height:39px !important;
  align-self:center !important;
}
.feat>div>span:last-child{
  display:flex !important;
  min-height:39px !important;
  flex-direction:column !important;
  justify-content:center !important;
}
.feat b{margin-bottom:3px !important}

/* GRAFICO */
.mock{
  width:100% !important;
  max-width:660px !important;
  margin:24px auto 0 !important;
  padding:18px 20px 15px !important;
  text-align:left !important;
  border-color:rgba(255,255,255,.13) !important;
  background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.025)) !important;
}
.mock-head{
  margin-bottom:4px !important;
  padding-bottom:0 !important;
  border-bottom:0 !important;
}
.mock-head small{
  margin-bottom:6px !important;
  color:#8e9c94 !important;
  font-size:8px !important;
}
.mock-head strong{
  color:#89978f !important;
  font-size:8px !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}
.mock-chart-title{
  margin:2px 0 10px;
  padding-bottom:11px;
  border-bottom:1px solid rgba(255,255,255,.075);
  color:#f2f5f3;
  font-size:12px;
  font-weight:700;
}
.mock .mrow{
  display:grid !important;
  grid-template-columns:31px 86px minmax(110px,1fr) 70px 66px !important;
  gap:10px !important;
  min-height:29px !important;
  align-items:center !important;
  padding:3px 0 !important;
}
.merchant-logo{
  width:25px;height:25px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#91aa7f;
  filter:saturate(.65);
  opacity:.9;
  font-weight:800;
  line-height:1;
}
.merchant-logo-own img{
  width:23px;height:23px;
  object-fit:contain;
  filter:sepia(.25) saturate(.65) hue-rotate(35deg) brightness(.92);
  opacity:.9;
}
.merchant-amazon{
  font-family:Arial,sans-serif;
  font-size:23px;
  font-weight:700;
  text-transform:lowercase;
}
.merchant-manomano{
  width:23px;height:23px;
  border-radius:6px;
  background:#66845b;
  color:#d8e2d5;
  font-size:13px;
  transform:rotate(-5deg);
}
.merchant-ebay{
  font-family:Arial,sans-serif;
  font-size:11px;
  letter-spacing:-1px;
  color:#9aaa95;
}
.merchant-shop{
  color:#77946a;
  font-size:19px;
}
.merchant-name{
  color:#d7dfda;
  font-size:10px;
  font-weight:600;
}
.sr-only{
  position:absolute!important;
  width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important;
}
.mock .mtrack{
  height:7px !important;
  background:rgba(255,255,255,.075) !important;
}
.mock .mbar.competitor{
  background:linear-gradient(90deg,#72837a,#91a097) !important;
  opacity:.72;
}
.mock .mbar.me{
  background:linear-gradient(90deg,#a9ca57,#6f9544) !important;
}
.mock .mrow b{
  color:#edf2ee !important;
  font-size:10px !important;
}
.price-badge{
  justify-self:end;
  padding:5px 8px;
  border-radius:999px;
  color:#c8dd91;
  background:rgba(104,145,69,.25);
  font-size:8px;
  font-weight:800;
  white-space:nowrap;
}
.mock .own-price .merchant-name{color:#fff}
.mock .own-price b{color:#fff !important}

/* Footer encostado visualmente ao gráfico */
.auth-side-bottom{
  position:static !important;
  width:auto !important;
  max-width:none !important;
  margin:17px auto 0 !important;
  padding:0 !important;
  transform:none !important;
  justify-content:center !important;
  text-align:center !important;
  color:#718078 !important;
  font-size:8px !important;
  letter-spacing:.12em !important;
}

/* CARD LOGIN: logo centralizado na área dos campos */
.auth-main{
  padding:70px clamp(38px,5vw,80px) !important;
}
.auth-card{
  width:min(455px,100%) !important;
  padding:36px 38px 28px !important;
}
.auth-card-brand{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  gap:8px !important;
  text-align:center !important;
  margin-bottom:26px !important;
}
.auth-card-brand img{
  width:70px !important;
  height:70px !important;
  margin:0 auto !important;
}
.auth-card-brand>div,
.auth-card-brand strong,
.auth-card-brand small{
  width:100% !important;
  text-align:center !important;
}
.auth-card-brand strong{font-size:18px !important}
.auth-form-head{
  text-align:left !important;
}
.auth-form-head p{
  margin-left:0 !important;
  margin-right:0 !important;
}

/* telas baixas */
@media (min-width:901px) and (max-height:850px){
  .auth-side-inner{padding:34px 0 42px !important}
  .auth-kicker{margin-bottom:12px !important}
  .auth-side h2{font-size:40px !important}
  .auth-side p.lead{margin:12px auto 18px !important;font-size:12.5px !important}
  .feat>div{min-height:62px !important;padding:9px 12px !important}
  .feat-icon{width:32px !important;height:32px !important}
  .mock{margin-top:17px !important;padding:13px 17px 11px !important}
  .mock .mrow{min-height:24px !important;padding:1px 0 !important}
  .auth-side-bottom{margin-top:10px !important}
}

/* mobile */
@media (max-width:900px){
  .auth{display:block !important}
  .auth-side{padding:0 !important}
  .auth-side-inner{
    min-height:auto !important;
    width:100% !important;
    padding:30px 22px 28px !important;
  }
  .auth-copy{margin:0 !important}
  .auth-side h2{font-size:30px !important}
  .auth-side p.lead{font-size:12.5px !important;margin-bottom:0 !important}
  .feat,.mock,.auth-side-bottom{display:none !important}
  .auth-main{padding:38px 18px 46px !important}
  .auth-card{padding:28px 24px 24px !important}
  .auth-card-brand{display:flex !important}
}


/* =========================================================
   AUTH V6 — FIX DEFINITIVO GRAFICO / FOOTER
   ========================================================= */
.mock{
  box-sizing:border-box !important;
  overflow:hidden !important;
  padding:18px 20px 16px !important;
}
.mock-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  margin:0 0 12px !important;
  padding:0 0 12px !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}
.mock-head small{
  display:block !important;
  margin:0 0 5px !important;
  color:#839189 !important;
  font-size:8px !important;
  font-weight:800 !important;
  letter-spacing:.14em !important;
}
.mock-head strong{
  display:block !important;
  color:#f0f4f1 !important;
  font-size:12px !important;
  font-weight:700 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
}
.mock-live{
  flex:none !important;
  font-size:8px !important;
}

.price-list{
  display:flex;
  flex-direction:column;
  width:100%;
}
.price-row{
  display:grid !important;
  grid-template-columns:128px minmax(120px,1fr) 74px 60px !important;
  align-items:center !important;
  column-gap:14px !important;
  min-height:38px !important;
  padding:5px 0 !important;
  border-bottom:1px solid rgba(255,255,255,.045);
}
.price-row:last-child{border-bottom:0}
.price-company{
  min-width:0;
  display:flex;
  align-items:center;
  gap:9px;
  color:#aeb9b2;
  font-size:10px;
  white-space:nowrap;
}
.price-company-logo{
  width:25px;
  height:25px;
  flex:0 0 25px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#809878;
  opacity:.86;
  filter:saturate(.55);
  line-height:1;
}
.price-company-logo.own img{
  display:block;
  width:23px !important;
  height:23px !important;
  object-fit:contain;
  opacity:.9;
  filter:sepia(.15) saturate(.7) hue-rotate(32deg) brightness(.94);
}
.price-company-logo.amazon{
  font:700 22px/1 Arial,sans-serif;
  text-transform:lowercase;
}
.price-company-logo.mano{
  width:23px;height:23px;
  flex-basis:23px;
  border-radius:6px;
  background:rgba(116,146,101,.26);
  color:#a8b9a0;
  font-size:12px;
  font-weight:800;
}
.price-company-logo.ebay{
  font:700 9px/1 Arial,sans-serif;
  letter-spacing:-.8px;
  color:#9aaa95;
}
.price-company-logo.shop{
  font-size:17px;
  color:#819b77;
}
.price-track{
  position:relative;
  width:100%;
  height:7px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.075);
}
.price-track span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#72837a,#95a39a);
  opacity:.78;
}
.price-row-own .price-track span{
  background:linear-gradient(90deg,#a7c94f,#719a43);
  opacity:1;
}
.price-row strong{
  color:#eef2ef;
  font-size:10px;
  font-weight:700;
  text-align:right;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.price-row-own .price-company{
  color:#f5f7f5;
  font-weight:650;
}
.price-low{
  justify-self:end;
  padding:4px 7px;
  border-radius:999px;
  color:#c9dd91;
  background:rgba(112,151,70,.19);
  font-size:7.5px;
  font-weight:800;
  white-space:nowrap;
}

/* neutralizza le vecchie regole .mrow */
.mock .mrow{display:none !important}

/* footer vicino al grafico, ma fuori dal box e mai sovrapposto */
.auth-side-bottom{
  position:static !important;
  display:flex !important;
  width:100% !important;
  margin:13px auto 0 !important;
  padding:0 !important;
  justify-content:center !important;
  align-items:center !important;
  transform:none !important;
  line-height:1.2 !important;
}

/* blocco scuro centrato verticalmente come un'unica composizione */
.auth-side-inner{
  min-height:auto !important;
  flex:0 0 auto !important;
}
.auth-side{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:center !important;
}
.auth-side > .auth-side-bottom{
  flex:0 0 auto !important;
}

/* il footer fa parte visivamente del gruppo e non del bordo pagina */
@media (min-width:901px){
  .auth-side-inner{
    padding:38px 0 0 !important;
  }
  .auth-side-bottom{
    margin-top:13px !important;
    margin-bottom:34px !important;
  }
}

@media (min-width:901px) and (max-height:850px){
  .price-row{
    min-height:31px !important;
    padding:3px 0 !important;
  }
  .price-company-logo{
    width:21px;height:21px;flex-basis:21px;
  }
  .price-company-logo.own img{
    width:20px !important;height:20px !important;
  }
  .mock{
    padding:13px 17px 11px !important;
  }
  .auth-side-inner{
    padding-top:25px !important;
  }
  .auth-side-bottom{
    margin-top:8px !important;
    margin-bottom:20px !important;
  }
}


/* =========================================================
   AREA RISERVATA V9 — CLEAN / STRUTTURA ORIGINALE
   ========================================================= */
.app{
  grid-template-columns:250px minmax(0,1fr);
  transition:grid-template-columns .22s ease;
}
.sidebar{
  background:
    radial-gradient(330px 260px at 105% -5%,rgba(158,189,66,.12),transparent 68%),
    linear-gradient(160deg,#173027 0%,#10251d 70%,#0d2019 100%) !important;
  border-right:1px solid rgba(255,255,255,.06) !important;
  box-shadow:10px 0 30px rgba(16,37,29,.04);
}
.sidebar .brand{
  border-bottom:1px solid rgba(255,255,255,.06);
}
.sidebar .brand .wordmark{color:#fff}
.sidebar .brand .wordmark b{color:#9ebd42}
.sidebar .brand .wordmark small{color:#91a097}
.sidebar .nav a{
  color:#c6d0ca;
  border-radius:10px;
}
.sidebar .nav a:hover{
  color:#fff;
  background:rgba(255,255,255,.05);
}
.sidebar .nav a.active{
  color:#fff;
  background:linear-gradient(90deg,rgba(158,189,66,.17),rgba(84,118,68,.10));
  box-shadow:inset 3px 0 0 #9ebd42;
}
.sidebar .nav a.active svg{color:#b6d05b}
.sidebar .side-foot{
  border-top-color:rgba(255,255,255,.06);
  color:#8f9d95;
}
.topbar{
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  border-bottom-color:var(--border);
  backdrop-filter:blur(16px);
}
.menu-btn{
  display:grid !important;
  place-items:center;
  flex:0 0 auto;
  border:1px solid var(--border) !important;
  background:var(--surface) !important;
  color:var(--text-2) !important;
  box-shadow:var(--shadow-sm);
}
.menu-btn:hover{
  color:var(--primary-600) !important;
  border-color:color-mix(in srgb,var(--primary) 35%,var(--border)) !important;
}

/* Recolhimento: altera apenas a coluna/sidebar, nunca os cards/tabelas internos */
body.pc-sidebar-collapsed .app{
  grid-template-columns:76px minmax(0,1fr);
}
body.pc-sidebar-collapsed .sidebar{
  overflow:hidden;
}
body.pc-sidebar-collapsed .sidebar .brand{
  padding-left:10px;
  padding-right:10px;
  justify-content:center;
}
body.pc-sidebar-collapsed .sidebar .brand .logo{
  margin:0 auto;
}
body.pc-sidebar-collapsed .sidebar .brand .wordmark,
body.pc-sidebar-collapsed .sidebar .side-foot{
  display:none !important;
}
body.pc-sidebar-collapsed .sidebar .nav{
  padding-left:8px;
  padding-right:8px;
}
body.pc-sidebar-collapsed .sidebar .nav a{
  position:relative;
  justify-content:center;
  padding-left:0;
  padding-right:0;
  gap:0;
}
body.pc-sidebar-collapsed .sidebar .nav a > span:not(.badge):not(.count),
body.pc-sidebar-collapsed .sidebar .nav a > strong{
  display:none !important;
}

/* mobile */
.pc-menu-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:39;
  background:rgba(7,17,13,.5);
  backdrop-filter:blur(2px);
}
.pc-menu-overlay.show{display:block}
body.pc-menu-open{overflow:hidden}

@media(max-width:900px){
  .app,
  body.pc-sidebar-collapsed .app{
    display:block;
  }
  .sidebar,
  body.pc-sidebar-collapsed .sidebar{
    position:fixed;
    top:0;bottom:0;left:0;
    z-index:50;
    width:250px;
    transform:translateX(-100%);
    transition:transform .22s ease;
    overflow-y:auto;
  }
  .sidebar.pc-open{transform:translateX(0)}
  body.pc-sidebar-collapsed .sidebar .brand{
    justify-content:flex-start;
    padding-left:18px;
    padding-right:18px;
  }
  body.pc-sidebar-collapsed .sidebar .brand .wordmark,
  body.pc-sidebar-collapsed .sidebar .side-foot{
    display:block !important;
  }
  body.pc-sidebar-collapsed .sidebar .nav{
    padding-left:12px;
    padding-right:12px;
  }
  body.pc-sidebar-collapsed .sidebar .nav a{
    justify-content:flex-start;
    padding-left:10px;
    padding-right:10px;
    gap:11px;
  }
  body.pc-sidebar-collapsed .sidebar .nav a > span:not(.badge):not(.count),
  body.pc-sidebar-collapsed .sidebar .nav a > strong{
    display:initial !important;
  }
}


/* =========================================================
   AREA RISERVATA V10 — DISTRIBUZIONE / TOPBAR / SIDEBAR
   ========================================================= */

/* L'app usa davvero tutta la viewport */
.app{
  grid-template-columns:242px minmax(0,1fr) !important;
  width:100% !important;
  max-width:none !important;
}
.main{
  min-width:0 !important;
  width:100% !important;
  max-width:none !important;
}
.view{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding-left:28px !important;
  padding-right:28px !important;
  box-sizing:border-box !important;
}

/* Sidebar più equilibrata */
.sidebar{
  width:auto !important;
  min-width:0 !important;
}
.sidebar .brand{
  min-height:78px !important;
  padding:15px 18px !important;
  gap:12px !important;
  align-items:center !important;
}
.sidebar .brand .logo{
  width:42px !important;
  height:42px !important;
  flex:0 0 42px !important;
}
.sidebar .brand .wordmark{
  min-width:0 !important;
  font-size:15px !important;
  line-height:1.05 !important;
}
.sidebar .brand .wordmark small{
  margin-top:5px !important;
  font-size:8px !important;
  letter-spacing:.12em !important;
}
.sidebar .nav{
  padding-left:12px !important;
  padding-right:12px !important;
}
.sidebar .nav a{
  min-height:42px !important;
  padding-left:12px !important;
  padding-right:12px !important;
}

/* Topbar: proporzioni e ricerca */
.topbar{
  min-height:72px !important;
  height:72px !important;
  padding-left:20px !important;
  padding-right:22px !important;
  gap:12px !important;
  box-sizing:border-box !important;
}
.topbar > div:has(> #pageTitle){
  min-width:210px;
}
#pageTitle{
  font-size:23px !important;
  line-height:1.05 !important;
}
#pageSub{
  margin-top:4px !important;
  font-size:11px !important;
}
.pc-global-search{
  width:min(360px,25vw);
  height:40px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  color:var(--muted);
  box-shadow:var(--shadow-sm);
}
.pc-global-search:focus-within{
  border-color:color-mix(in srgb,var(--primary) 45%,var(--border));
  box-shadow:0 0 0 3px rgba(74,120,62,.08);
}
.pc-global-search input{
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
  font:inherit;
  font-size:12px;
}
.pc-global-search input::placeholder{color:var(--muted)}
.th-chip{
  min-height:40px !important;
  white-space:nowrap !important;
}
.user-btn{
  white-space:nowrap;
}

/* O conteúdo interno criado pelo app mantém seu layout, mas pode ocupar a área */
.view > *{
  max-width:none;
}

/* Sidebar recolhida */
body.pc-sidebar-collapsed .app{
  grid-template-columns:74px minmax(0,1fr) !important;
}
body.pc-sidebar-collapsed .sidebar .brand{
  padding:13px 10px !important;
}
body.pc-sidebar-collapsed .sidebar .brand .logo{
  width:42px !important;
  height:42px !important;
}

/* Notebook */
@media(max-width:1280px){
  .pc-global-search{width:250px}
  .topbar{padding-right:16px !important}
  .view{padding-left:20px !important;padding-right:20px !important}
}

/* Em larguras menores a busca some antes de comprimir o resto */
@media(max-width:1080px){
  .pc-global-search{display:none}
}

/* Mobile preserva o comportamento do menu */
@media(max-width:900px){
  .app,
  body.pc-sidebar-collapsed .app{
    display:block !important;
  }
  .topbar{
    padding-left:14px !important;
    padding-right:14px !important;
  }
  .view{
    padding-left:14px !important;
    padding-right:14px !important;
  }
}


/* =========================================================
   V11 — SIDEBAR COMPACTA: CORREZIONE DEFINITIVA
   ========================================================= */
body.pc-sidebar-collapsed .sidebar{
  width:74px !important;
  min-width:74px !important;
  max-width:74px !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  scrollbar-width:none;
}
body.pc-sidebar-collapsed .sidebar::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
}

/* Logo centralizzato, senza wordmark */
body.pc-sidebar-collapsed .sidebar .brand{
  width:74px !important;
  min-width:74px !important;
  max-width:74px !important;
  height:78px !important;
  min-height:78px !important;
  padding:0 !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}
body.pc-sidebar-collapsed .sidebar .brand .logo{
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  max-width:40px !important;
  margin:0 !important;
  padding:0 !important;
  flex:0 0 40px !important;
}
body.pc-sidebar-collapsed .sidebar .brand .wordmark{
  display:none !important;
}

/* Nav ocupa exatamente a largura compacta */
body.pc-sidebar-collapsed .sidebar .nav{
  width:74px !important;
  min-width:74px !important;
  max-width:74px !important;
  padding:14px 8px !important;
  margin:0 !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

/* Esconde TODOS os cabeçalhos/separadores textuais dos grupos */
body.pc-sidebar-collapsed .sidebar .nav-group,
body.pc-sidebar-collapsed .sidebar .nav-title,
body.pc-sidebar-collapsed .sidebar .nav-label,
body.pc-sidebar-collapsed .sidebar .section-title,
body.pc-sidebar-collapsed .sidebar .section-label,
body.pc-sidebar-collapsed .sidebar nav > div:not(:has(a)),
body.pc-sidebar-collapsed .sidebar nav > span:not(.count):not(.badge){
  display:none !important;
}

/* Cada item vira botão quadrado de ícone */
body.pc-sidebar-collapsed .sidebar .nav a{
  position:relative !important;
  width:56px !important;
  min-width:56px !important;
  max-width:56px !important;
  height:44px !important;
  min-height:44px !important;
  padding:0 !important;
  margin:3px 0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
  overflow:visible !important;
  box-sizing:border-box !important;
}
body.pc-sidebar-collapsed .sidebar .nav a svg{
  width:20px !important;
  height:20px !important;
  min-width:20px !important;
  flex:0 0 20px !important;
  margin:0 !important;
}

/* Qualquer texto dentro do link desaparece */
body.pc-sidebar-collapsed .sidebar .nav a > span:not(.count):not(.badge),
body.pc-sidebar-collapsed .sidebar .nav a > div,
body.pc-sidebar-collapsed .sidebar .nav a > strong,
body.pc-sidebar-collapsed .sidebar .nav a > small{
  display:none !important;
}

/* Badge fica no canto do ícone, sem alargar o menu */
body.pc-sidebar-collapsed .sidebar .nav a .count,
body.pc-sidebar-collapsed .sidebar .nav a .badge{
  position:absolute !important;
  top:3px !important;
  right:3px !important;
  min-width:17px !important;
  width:auto !important;
  height:17px !important;
  padding:0 4px !important;
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:9px !important;
  line-height:17px !important;
  box-sizing:border-box !important;
}

/* Rodapé desaparece totalmente no modo compacto */
body.pc-sidebar-collapsed .sidebar .side-foot{
  display:none !important;
}

/* Nenhum descendente pode forçar largura maior */
body.pc-sidebar-collapsed .sidebar *{
  max-width:100%;
}

/* No mobile NÃO usar o visual compacto */
@media(max-width:900px){
  body.pc-sidebar-collapsed .sidebar{
    width:250px !important;
    min-width:250px !important;
    max-width:250px !important;
    overflow-y:auto !important;
  }
  body.pc-sidebar-collapsed .sidebar .brand{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:auto !important;
    min-height:78px !important;
    padding:15px 18px !important;
    justify-content:flex-start !important;
  }
  body.pc-sidebar-collapsed .sidebar .brand .wordmark{
    display:block !important;
  }
  body.pc-sidebar-collapsed .sidebar .nav{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    padding:14px 12px !important;
  }
  body.pc-sidebar-collapsed .sidebar .nav-group,
  body.pc-sidebar-collapsed .sidebar .nav-title,
  body.pc-sidebar-collapsed .sidebar .nav-label,
  body.pc-sidebar-collapsed .sidebar .section-title,
  body.pc-sidebar-collapsed .sidebar .section-label{
    display:block !important;
  }
  body.pc-sidebar-collapsed .sidebar .nav a{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    height:auto !important;
    min-height:42px !important;
    padding:0 12px !important;
    margin:2px 0 !important;
    justify-content:flex-start !important;
    gap:11px !important;
  }
  body.pc-sidebar-collapsed .sidebar .nav a > span:not(.count):not(.badge),
  body.pc-sidebar-collapsed .sidebar .nav a > div,
  body.pc-sidebar-collapsed .sidebar .nav a > strong,
  body.pc-sidebar-collapsed .sidebar .nav a > small{
    display:initial !important;
  }
  body.pc-sidebar-collapsed .sidebar .nav a .count,
  body.pc-sidebar-collapsed .sidebar .nav a .badge{
    position:static !important;
    margin-left:auto !important;
  }
  body.pc-sidebar-collapsed .sidebar .side-foot{
    display:block !important;
  }
}


/* =========================================================
   V12 — LOGIN HEAD + TABELLE CENTRALIZZATE
   ========================================================= */

/* Centralizza AREA RISERVATA, Bentornato e descrizione */
.auth-form-head{
    width:100% !important;
    text-align:center !important;
}

.auth-form-kicker{
    display:block !important;
    width:100% !important;
    text-align:center !important;
}

.auth-card .auth-form-head h1{
    width:100% !important;
    text-align:center !important;
}

.auth-form-head p{
    max-width:360px !important;
    margin:9px auto 0 !important;
    text-align:center !important;
}

/* Tutte le tabelle dell'area riservata: testi centralizzati */
.app .view table th,
.app .view table td{
    text-align:center !important;
    vertical-align:middle !important;
}

/* Anche i contenuti flex presenti dentro le celle restano centrati */
.app .view table th > *,
.app .view table td > *{
    margin-left:auto;
    margin-right:auto;
}

/* Celle con wrapper flex/row */
.app .view table td .row,
.app .view table th .row,
.app .view table td .flex,
.app .view table th .flex{
    justify-content:center !important;
}

/* Immagine + descrizione prodotto: gruppo centrato senza rompere il layout */
.app .view table td .product-cell,
.app .view table td .product-info,
.app .view table td .product,
.app .view table td .competitor-cell,
.app .view table td .competitor-info{
    justify-content:center !important;
    text-align:center !important;
}

/* Pulsanti/azioni dentro le tabelle */
.app .view table td .actions,
.app .view table td .table-actions{
    justify-content:center !important;
}


/* V13 — ruoli accesso */
.badge.role-admin{background:#f3e8ff!important;color:#7e22ce!important;border:1px solid #e9d5ff!important;font-weight:700}
.badge.role-analyst{background:#e8f5e9!important;color:#2f6f3e!important;border:1px solid #cce8d0!important;font-weight:700}
.badge.role-viewer{background:#eef1f4!important;color:#59636e!important;border:1px solid #dce1e6!important;font-weight:700}
[data-theme="dark"] .badge.role-admin{background:rgba(126,34,206,.16)!important;color:#d8b4fe!important;border-color:rgba(216,180,254,.2)!important}
[data-theme="dark"] .badge.role-analyst{background:rgba(74,120,62,.2)!important;color:#b7d9ae!important;border-color:rgba(183,217,174,.18)!important}
[data-theme="dark"] .badge.role-viewer{background:rgba(148,163,184,.12)!important;color:#cbd5e1!important;border-color:rgba(203,213,225,.14)!important}

/* Claud.ia */
.claudia-fab{position:fixed;right:24px;bottom:24px;z-index:120;width:62px;height:62px;border:1px solid rgba(255,255,255,.65);border-radius:22px;background:linear-gradient(145deg,#173027,#294c3a);box-shadow:0 18px 45px rgba(13,32,25,.28);display:grid;place-items:center;cursor:pointer;transition:.2s ease;padding:10px}
.claudia-fab:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 22px 55px rgba(13,32,25,.34)}
.claudia-fab.hidden{opacity:0;pointer-events:none;transform:scale(.8)}
.claudia-fab img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(0,0,0,.12))}
.claudia-online{position:absolute;right:4px;bottom:4px;width:14px;height:14px;border-radius:50%;background:#22c55e;border:3px solid #fff;box-shadow:0 0 0 2px rgba(34,197,94,.12)}
.claudia-panel{position:fixed;right:24px;bottom:24px;z-index:121;width:min(390px,calc(100vw - 28px));height:min(610px,calc(100vh - 48px));background:var(--surface);border:1px solid var(--border);border-radius:22px;box-shadow:0 28px 80px rgba(15,23,42,.24);display:flex;flex-direction:column;overflow:hidden;opacity:0;pointer-events:none;transform:translateY(18px) scale(.97);transform-origin:bottom right;transition:.22s ease}
.claudia-panel.open{opacity:1;pointer-events:auto;transform:none}
.claudia-head{height:76px;flex:0 0 76px;padding:0 16px 0 14px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#132b21,#1c3b2c);color:#fff;border-bottom:1px solid rgba(255,255,255,.08)}
.claudia-id{display:flex;align-items:center;gap:11px}.claudia-id img{width:45px;height:45px;border-radius:14px;background:#fff;padding:6px;object-fit:contain}.claudia-id b{display:block;font-size:15px}.claudia-id span{display:block;color:#a9b9af;font-size:11px;margin-top:3px}
.claudia-close{width:34px;height:34px;border:0;border-radius:10px;background:rgba(255,255,255,.08);color:#fff;font-size:24px;line-height:1;cursor:pointer}.claudia-close:hover{background:rgba(255,255,255,.14)}
.claudia-body{flex:1;overflow:auto;padding:18px 14px;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 42%,var(--surface)),var(--surface));scroll-behavior:smooth}
.claudia-msg{display:flex;margin:0 0 11px}.claudia-msg.user{justify-content:flex-end}.claudia-bubble{max-width:84%;padding:11px 13px;border-radius:15px;font-size:12.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word;background:var(--surface);border:1px solid var(--border);color:var(--text);box-shadow:0 3px 12px rgba(15,23,42,.04)}
.claudia-msg.ai .claudia-bubble{border-bottom-left-radius:5px}.claudia-msg.user .claudia-bubble{background:#4a783e;color:#fff;border-color:#4a783e;border-bottom-right-radius:5px}.claudia-msg.error .claudia-bubble{color:#b42318;background:#fff1f0;border-color:#ffd2cf}.claudia-msg.typing .claudia-bubble{color:var(--muted);font-style:italic}
.claudia-compose{margin:10px 12px 4px;padding:7px 7px 7px 12px;border:1px solid var(--border);border-radius:15px;display:flex;align-items:flex-end;gap:8px;background:var(--surface);box-shadow:0 4px 18px rgba(15,23,42,.05)}.claudia-compose:focus-within{border-color:#7fa272;box-shadow:0 0 0 3px rgba(74,120,62,.08)}
.claudia-compose textarea{flex:1;resize:none;max-height:110px;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:12.5px;line-height:1.45;padding:7px 0}.claudia-compose button{width:36px;height:36px;flex:0 0 36px;border:0;border-radius:11px;background:#4a783e;color:#fff;font-size:17px;cursor:pointer}.claudia-compose button:hover{background:#3e6834}.claudia-compose.busy button{opacity:.55;pointer-events:none}.claudia-note{text-align:center;font-size:9.5px;color:var(--muted);padding:4px 10px 10px}
@media(max-width:600px){.claudia-fab{right:14px;bottom:14px}.claudia-panel{right:7px;bottom:7px;width:calc(100vw - 14px);height:min(680px,calc(100vh - 14px));border-radius:18px}}

.claudia-msg.ai{align-items:flex-end;gap:7px}.claudia-msg-avatar{width:28px;height:28px;flex:0 0 28px;border-radius:9px;object-fit:cover;background:#fff;border:1px solid var(--border)}
.claudia-fab img,.claudia-id img{object-fit:cover!important;padding:0!important}

/* Claud.ia 3.7.3 */
.claudia-fab{padding:0!important;overflow:hidden;background:var(--surface)!important}
.claudia-fab img{width:100%!important;height:100%!important;object-fit:cover!important;border-radius:inherit!important}
.claudia-id img{width:45px!important;height:45px!important;object-fit:cover!important;padding:0!important;border-radius:14px!important}
.claudia-head-actions{display:flex;align-items:center;gap:6px}
.claudia-reset,.claudia-close{width:34px;height:34px;border:0;border-radius:10px;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;display:grid;place-items:center}
.claudia-reset{font-size:20px}.claudia-reset:hover,.claudia-close:hover{background:rgba(255,255,255,.15)}
.claudia-welcome{max-width:calc(100% - 35px)}.claudia-welcome .claudia-bubble{max-width:100%}
.claudia-suggestions{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.claudia-suggestions button{border:1px solid color-mix(in srgb,var(--primary) 28%,var(--border));background:color-mix(in srgb,var(--primary) 6%,var(--surface));color:var(--text);border-radius:11px;padding:8px 9px;font:inherit;font-size:11px;line-height:1.25;text-align:left;cursor:pointer}
.claudia-suggestions button:hover{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 10%,var(--surface))}
.claudia-msg-avatar{object-fit:cover!important;padding:0!important}

/* Claud.ia 3.7.4 — avatar circolare */
.claudia-fab{
    border-radius:50% !important;
}
.claudia-fab img,
.claudia-id img,
.claudia-msg-avatar{
    border-radius:50% !important;
    object-fit:cover !important;
    aspect-ratio:1 / 1 !important;
}
.claudia-id img{
    width:45px !important;
    height:45px !important;
}
.claudia-msg-avatar{
    width:30px !important;
    height:30px !important;
    flex:0 0 30px !important;
}