:root {
  --topbar-h:47px;   /* altezza barra mobile: usata anche dal menu a tendina */
  --bg:#F3F5F7; --surface:#FFFFFF; --surface-alt:#F8FAFB; --text:#0B1E3D; --text-soft:#5B6472;
  --text-faint:#8A93A3; --border:#E5E9EE; --navy:#0B1E3D; --accent:#12B8A4; --accent-soft:#E4F9F5;
  --accent-text:#0E8C7E; --shadow:0 1px 2px rgba(11,30,61,.04), 0 8px 24px rgba(11,30,61,.06);
  --radius:16px;
}
[data-theme="dark"] {
  --bg:#081527; --surface:#0F2140; --surface-alt:#0C1C36; --text:#F3F6F9; --text-soft:#9AA9BE;
  --text-faint:#6C7A90; --border:#1C3255; --accent:#2FE0C8; --accent-soft:#0E2E30; --accent-text:#4CE9D3;
  --shadow:0 1px 2px rgba(0,0,0,.35), 0 12px 28px rgba(0,0,0,.4);
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; height:100%; overflow:hidden; overscroll-behavior:none; }
body {
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",sans-serif;
  background:var(--bg); color:var(--text); transition:background .2s ease,color .2s ease;
}
input,textarea,button { font-family:inherit; }
::selection { background:var(--accent); color:var(--navy); }

.layout { position:fixed; inset:0; display:flex; }

/* ---------- Sidebar (desktop) ---------- */
.sidebar { width:244px; flex-shrink:0; border-right:1px solid var(--border); background:var(--surface);
  padding:22px 14px; display:flex; flex-direction:column; height:100%; overflow-y:auto; }
.brand { display:flex; align-items:center; gap:10px; padding:4px 8px 22px; cursor:pointer; }
.brand-mark { width:32px; height:32px; border-radius:0; object-fit:contain; display:block; }
.brand-mark.small { width:26px; height:26px; border-radius:0; }
.brand-name { font-weight:800; font-size:15.5px; letter-spacing:-.01em; }
.brand-name.small { font-size:14.5px; }
.brand-name span { color:var(--accent-text); }
.sidebar-nav { display:flex; flex-direction:column; gap:2px; flex:1; }
.nav-item { display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px; cursor:pointer; color:var(--text-soft); font-weight:500; font-size:14px; }
.nav-item span { width:18px; text-align:center; }
.nav-item.active { background:var(--accent-soft); color:var(--accent-text); font-weight:700; }
.nav-item:hover { background:var(--surface-alt); }
.sidebar-theme-row { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; cursor:pointer; color:var(--text-soft); font-size:13.5px; font-weight:600; border:1px solid var(--border); }

/* ---------- Topbar (mobile) ---------- */
.main-col { flex:1; min-width:0; display:flex; flex-direction:column; height:100%; overflow:hidden; }
.topbar { display:none; align-items:center; justify-content:space-between; padding:8px 16px; border-bottom:1px solid var(--border); background:var(--surface); flex-shrink:0; z-index:20; }
/* Il .brand ha 22px di padding sotto perché nella sidebar serve stacco dal menù.
   Nella topbar quel margine è spazio morto: lo azzero e ricalibro logo e scritta. */
.topbar { min-height:var(--topbar-h); box-sizing:border-box; }
.topbar .brand { padding:0; gap:9px; }
.topbar .brand-mark.small { width:30px; height:30px; }
.topbar .brand-name.small { font-size:17px; letter-spacing:.02em; }
#mobile-menu-btn { background:none; border:none; color:var(--text); font-size:20px; cursor:pointer; }
.mobile-drawer { display:none; position:fixed; inset:0; top:var(--topbar-h); background:var(--bg); z-index:30; padding:16px; overflow-y:auto; }
.mobile-drawer.open { display:block; }
.drawer-item { display:flex; align-items:center; gap:12px; padding:14px 10px; border-bottom:1px solid var(--border); font-weight:600; font-size:15.5px; }
.drawer-item span { width:22px; text-align:center; }
.drawer-item.active { color:var(--accent-text); }

/* ---------- Content ---------- */
.content { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:26px 22px 90px; max-width:1100px; margin:0 auto; width:100%; }
.page-title { font-size:26px; font-weight:800; letter-spacing:-.01em; margin:0 0 6px; }
.muted { color:var(--text-soft); } .small { font-size:12.5px; }
.section-label { font-size:12.5px; font-weight:700; color:var(--accent-text); text-transform:uppercase; letter-spacing:.06em; margin:22px 0 10px; }
.detail-section:first-of-type .section-label { margin-top:22px; }
.row-between { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.row-between.wrap { flex-wrap:wrap; }
.link-more { font-size:12.5px; color:var(--accent-text); font-weight:700; cursor:pointer; }

/* ---------- Home ---------- */
.home-hero { padding:6px 0 26px; }
.eyebrow { font-size:12.5px; font-weight:700; color:var(--accent-text); text-transform:uppercase; letter-spacing:.08em; }
.home-hero h1 { font-size:34px; font-weight:800; letter-spacing:-.02em; margin:6px 0 8px; line-height:1.15; }
.lead { color:var(--text-soft); font-size:15px; max-width:480px; margin:0 0 20px; }
.search-wrap { position:relative; max-width:580px; }
.search-icon { position:absolute; left:16px; top:50%; transform:translateY(-50%); }
#search-input { width:100%; padding:15px 16px 15px 44px; border-radius:14px; border:1px solid var(--border); background:var(--surface); color:var(--text); font-size:14.5px; outline:none; box-shadow:var(--shadow); }
.quick-assistant-cta { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; padding:13px 16px; border-radius:14px; background:var(--accent); color:var(--navy); font-weight:700; font-size:13.5px; cursor:pointer; max-width:580px; }
.quick-assistant-cta:hover { opacity:.92; }

/* ---------- Grids ---------- */
.grid-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.grid-cats { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:12px; }

/* ---------- Card ---------- */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; transition:transform .15s ease; cursor:default; }
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.auth-box { max-width:380px; width:100%; text-align:center; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:36px 28px; }
.auth-logo { width:48px; height:48px; margin-bottom:18px; border-radius:12px; }
.auth-box h2 { font-size:20px; margin:0 0 8px; }
.auth-box p.muted { font-size:14px; margin:0 0 6px; }
.auth-input { width:100%; box-sizing:border-box; padding:12px 14px; border-radius:10px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:15px; margin-top:16px; }
.auth-error { color:#D14343; font-size:13px; margin-top:8px; text-align:left; }
.auth-code-input { text-align:center; font-size:26px; letter-spacing:8px; font-weight:700; padding:14px 10px; }
.cat-card, .guide-card { cursor:pointer; }
.cat-card:hover, .guide-card:hover, [data-open-blueprint]:hover, [data-open-toolkit]:hover, [data-open-diag]:hover { transform:translateY(-2px); }
.cat-icon { font-size:22px; margin-bottom:10px; }
.cat-name { font-weight:700; font-size:14.5px; }
.cat-count { margin-top:3px; }

/* ---------- Guide card ---------- */
.gc-top { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.gc-left { display:flex; gap:12px; align-items:flex-start; min-width:0; }
.gc-icon { width:38px; height:38px; border-radius:10px; background:var(--accent-soft); color:var(--accent-text); display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.gc-title { font-weight:700; font-size:15px; line-height:1.3; }
.gc-cat { font-size:12.5px; color:var(--text-faint); margin-top:3px; }
.premium { color:var(--accent-text); font-weight:700; margin-left:4px; }
.gc-bottom { display:flex; gap:8px; align-items:center; margin-top:14px; flex-wrap:wrap; }

/* ---------- Score ring ---------- */
.score-ring { width:38px; height:38px; border-radius:50%; border:3px solid var(--accent); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12.5px; flex-shrink:0; background:conic-gradient(var(--accent) 0deg, var(--accent) calc(var(--pct,270)*1deg), transparent 0); }
.score-ring.big { width:48px; height:48px; font-size:15px; }

/* ---------- Chips / badges ---------- */
.chip { font-size:12px; font-weight:600; padding:5px 10px; border-radius:999px; background:var(--surface-alt); color:var(--text-soft); border:1px solid var(--border); display:inline-flex; align-items:center; gap:4px; }
.chip.clickable { cursor:pointer; }
.chip.active { background:var(--accent-soft); color:var(--accent-text); border-color:transparent; }
.chip-row { display:flex; gap:6px; flex-wrap:wrap; }
.stars-chip { color:var(--accent-text); letter-spacing:1px; }
.premium-chip { background:var(--accent-soft); color:var(--accent-text); }
.badge { font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; background:var(--accent-soft); color:var(--accent-text); }

/* ---------- Buttons ---------- */
.icon-btn { background:none; border:none; cursor:pointer; color:var(--text-faint); font-size:16px; display:inline-flex; align-items:center; }
.fav-btn.active { color:var(--accent-text); }
.ghost-btn { background:none; border:1px solid var(--border); border-radius:12px; padding:9px 14px; font-weight:600; font-size:13px; cursor:pointer; color:var(--text); display:inline-flex; align-items:center; gap:6px; margin:4px 6px 4px 0; }
.ghost-btn:hover { background:var(--surface-alt); }
.primary-btn { background:var(--accent); color:var(--navy); border:none; border-radius:12px; padding:11px 18px; font-weight:700; font-size:13.5px; cursor:pointer; margin-top:8px; }
.back-btn { display:inline-flex; align-items:center; gap:6px; background:none; border:none; color:var(--text-soft); font-weight:600; font-size:13.5px; cursor:pointer; padding:0; margin-bottom:16px; }

/* ---------- Detail page ---------- */
.detail-wrap { max-width:720px; }
.detail-wrap.narrow { max-width:520px; }
.obiettivo-box { background:var(--accent-soft); border-radius:14px; padding:16px 18px; margin:16px 0 6px; }
.obiettivo-box b { color:var(--accent-text); }
.obiettivo-box p { margin:6px 0 0; font-size:14.5px; line-height:1.6; }
.steps { padding-left:20px; line-height:2; }
.steps li { margin-bottom:2px; }
ul { padding-left:18px; line-height:1.8; color:var(--text-soft); }
.prompt-box { background:var(--surface-alt); border:1px solid var(--border); border-radius:12px; padding:14px; font-size:13.5px; color:var(--text-soft); line-height:1.6; }
.faq-list { display:flex; flex-direction:column; gap:12px; }
.faq-item { background:var(--surface-alt); border:1px solid var(--border); border-radius:12px; padding:14px 16px; }
.faq-q { font-weight:700; font-size:13.5px; color:var(--text); margin-bottom:6px; }
.faq-a { font-size:13px; color:var(--text-soft); line-height:1.6; }
.chat-log { display:flex; flex-direction:column; gap:10px; margin-bottom: 4px; }
.chat-bubble { border-radius:14px; padding:12px 15px; font-size:13.5px; line-height:1.6; max-width:92%; }
.chat-bubble.user { align-self:flex-end; background:var(--accent); color:var(--navy); border-bottom-right-radius:4px; }
.chat-bubble.buddy { align-self:flex-start; background:var(--surface-alt); border:1px solid var(--border); border-bottom-left-radius:4px; }
.chat-bubble.handoff { border-color:var(--accent); background:var(--accent-soft); }

/* ---------- Checklist ---------- */
.checklist { display:flex; flex-direction:column; gap:8px; }
.check-item { display:flex; align-items:center; gap:10px; cursor:pointer; padding:9px 12px; border-radius:10px; background:var(--surface-alt); border:1px solid var(--border); font-size:13.5px; }
.check-item.done { background:var(--accent-soft); color:var(--accent-text); text-decoration:line-through; }
.check-box { width:18px; height:18px; border-radius:5px; border:2px solid var(--text-faint); display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; }
.check-item.done .check-box { border-color:var(--accent-text); background:var(--accent-text); color:#fff; }

/* ---------- Plan grid ---------- */
.plan-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.plan-col { background:var(--surface-alt); border:1px solid var(--border); border-radius:12px; padding:12px; }
.plan-h { font-weight:700; font-size:12.5px; color:var(--accent-text); margin-bottom:8px; text-transform:uppercase; letter-spacing:.04em; }
.plan-item { font-size:13px; margin-bottom:8px; line-height:1.5; }

/* ---------- Notes ---------- */
.notes-area { width:100%; min-height:90px; border-radius:12px; border:1px solid var(--border); background:var(--surface-alt); color:var(--text); padding:12px; font-size:13.5px; resize:vertical; outline:none; }

/* ---------- Bottom actions / feedback ---------- */
.bottom-actions { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; margin-top:26px; padding-top:16px; border-top:1px solid var(--border); }
.feedback-row { display:flex; align-items:center; gap:8px; }
.fb-btn { background:none; border:1px solid var(--border); border-radius:10px; padding:7px 11px; cursor:pointer; }
.fb-btn.active { background:var(--accent-soft); border-color:transparent; }
.tip-card { margin-top:16px; display:flex; gap:12px; align-items:flex-start; }
.tip-title { font-weight:700; font-size:13.5px; margin-bottom:4px; }
.links-row { margin-top:6px; }

/* ---------- Assistant ---------- */
.assistant-card { border:1px solid var(--accent); margin-bottom:18px; }
.assistant-head { font-weight:800; font-size:14.5px; margin-bottom:10px; }
.assistant-row { display:flex; gap:10px; font-size:13.5px; padding:6px 0; border-bottom:1px dashed var(--border); }
.assistant-row .al { color:var(--text-faint); min-width:150px; flex-shrink:0; font-weight:600; }
.assistant-links { margin-top:10px; }

/* ---------- Toolkit calc ---------- */
.field { display:block; margin-bottom:14px; }
.field span { display:block; font-size:12.5px; font-weight:600; color:var(--text-soft); margin-bottom:6px; }
.field input, .field textarea { width:100%; padding:11px 14px; border-radius:10px; border:1px solid var(--border); background:var(--surface-alt); color:var(--text); font-size:14px; outline:none; }
.checkbox-field { display:flex; align-items:center; gap:10px; }
.checkbox-field span { display:inline; margin-bottom:0; font-weight:500; color:var(--text); }
.checkbox-field input[type="checkbox"] { width:auto; flex:0 0 auto; accent-color:var(--accent); }
.result-box { background:var(--accent-soft); border-radius:12px; padding:16px; margin-top:8px; }
.rb-label { font-size:12.5px; color:var(--accent-text); font-weight:700; margin-bottom:4px; }
.rb-value { font-size:22px; font-weight:800; }
.dm-row { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:8px; margin-bottom:8px; }
.dm-row input { padding:9px; border-radius:8px; border:1px solid var(--border); background:var(--surface-alt); color:var(--text); font-size:12.5px; }
.tier-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }
.tier-card { border:1px solid var(--border); border-radius:12px; padding:12px 8px; text-align:center; background:var(--surface-alt); }
.tier-card.active { border-color:var(--accent); background:var(--accent-soft); }
.tier-name { font-size:11px; font-weight:700; color:var(--text-faint); text-transform:uppercase; letter-spacing:.04em; }
.tier-price { font-size:16px; font-weight:800; margin:4px 0; }
.verdict-box { margin-top:10px; padding:12px 14px; border-radius:12px; background:var(--surface-alt); border:1px solid var(--border); font-size:13px; line-height:1.5; }
.verdict-box.warn { background:rgba(224,92,92,.1); border-color:rgba(224,92,92,.35); }
.verdict-box.mid { background:rgba(224,166,47,.1); border-color:rgba(224,166,47,.35); }
.verdict-box.good { background:var(--accent-soft); border-color:var(--accent); }
.table-mini { margin-top:10px; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.table-row { display:flex; justify-content:space-between; padding:9px 14px; font-size:13px; border-bottom:1px solid var(--border); }
.table-row:last-child { border-bottom:none; }
.table-row .pos { color:var(--accent-text); font-weight:700; }
.table-row .neg { color:#E05C5C; font-weight:700; }
.pv-row { display:grid; grid-template-columns:2fr 60px 90px; gap:6px; margin-bottom:8px; }
.pv-row input { padding:9px; border-radius:8px; border:1px solid var(--border); background:var(--surface-alt); color:var(--text); font-size:12.5px; }
.msg-select { width:100%; padding:11px 14px; border-radius:10px; border:1px solid var(--border); background:var(--surface-alt); color:var(--text); font-size:13.5px; outline:none; }
@media (max-width:480px) { .pv-row { grid-template-columns:1fr; } }
.swot-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.swot-s textarea { border-left:3px solid #12B8A4; } .swot-w textarea { border-left:3px solid #E0A62F; }
.swot-o textarea { border-left:3px solid #3C8CE0; } .swot-t textarea { border-left:3px solid #E05C5C; }

/* ---------- Diagnostica ---------- */
.progress-bar { height:6px; border-radius:999px; background:var(--border); margin:14px 0 22px; overflow:hidden; }
.progress-fill { height:100%; background:var(--accent); transition:width .3s ease; }
.q-title { font-size:20px; font-weight:700; margin:0 0 18px; line-height:1.4; }
.opts { display:flex; flex-direction:column; gap:10px; }
.opt-card { display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-size:14.5px; }
.opt-card:hover { transform:translateY(-1px); }

/* ---------- Blueprint fase ---------- */
.fase-card { margin-bottom:10px; }
.fase-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.fase-num { width:24px; height:24px; border-radius:7px; background:var(--accent); color:var(--navy); font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; }

/* ---------- Profilo ---------- */
.stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin:18px 0 28px; }
.stat-card { text-align:left; }
.stat-value { font-size:22px; font-weight:800; margin:8px 0 2px; }

/* ---------- Toggle ---------- */
.toggle { width:50px; height:28px; border-radius:999px; background:var(--border); border:none; cursor:pointer; position:relative; }
.toggle.on { background:var(--accent); }
.toggle span { position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; transition:left .2s ease; }
.toggle.on span { left:25px; }

.empty { text-align:center; color:var(--text-soft); padding:26px; }

/* ---------- Bottom nav (mobile) ---------- */
.bottom-nav { display:none; position:fixed; bottom:0; left:0; right:0; background:var(--surface); border-top:1px solid var(--border); justify-content:space-around; padding:8px 4px 10px; z-index:20; }
.bnav-item { display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--text-faint); font-size:10.5px; font-weight:600; min-width:52px; }
.bnav-item.active { color:var(--accent-text); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) { .grid-cards { grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); } }
@media (max-width: 767px) {
  .sidebar { display:none; }
  .topbar { display:flex; }
  .bottom-nav { display:flex; }
  .content { padding-bottom:96px; }
  .swot-grid { grid-template-columns:1fr; }
  .dm-row { grid-template-columns:1fr 1fr; }
}

/* ============================================================
   PROGETTO X — percorsi problema, home "chiarezza"
============================================================ */
.home-hero.clarity { padding:18px 0 30px; text-align:left; }
.hero-question { font-size:38px; font-weight:800; letter-spacing:-.025em; line-height:1.12; margin:8px 0 18px; }
.search-wrap.big { max-width:680px; }
.search-wrap.big input { padding:18px 18px 18px 50px; font-size:16.5px; border-radius:16px; box-shadow:var(--shadow); }
.search-wrap.big .search-icon { top:19px; left:18px; font-size:18px; }

.problem-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:12px; }
.problem-chip { display:flex; align-items:center; gap:13px; padding:15px 16px; cursor:pointer; }
.problem-chip:hover { border-color:var(--accent); }
.pc-icon { font-size:24px; flex-shrink:0; }
.pc-body { flex:1; min-width:0; }
.pc-title { font-weight:700; font-size:14.5px; margin-bottom:2px; }
.pc-arrow { color:var(--text-faint); flex-shrink:0; }
.pc-progress { height:5px; border-radius:999px; background:var(--border); overflow:hidden; margin:6px 0 4px; }
.pc-progress-fill { height:100%; background:var(--accent); border-radius:999px; transition:width .3s ease; }

.problem-match { cursor:pointer; }
.problem-match:hover { border-color:var(--accent); }
.pm-title { font-weight:800; font-size:17px; margin-top:6px; }
.pm-cta { color:var(--accent-text); font-size:13.5px; }

.secondary-block { margin-top:30px; padding-top:20px; border-top:1px solid var(--border); }
.cat-pills { display:flex; flex-wrap:wrap; gap:8px; }
.cat-pill { padding:8px 13px; border:1px solid var(--border); border-radius:999px; background:var(--surface); font-size:13px; color:var(--text-soft); cursor:pointer; }
.cat-pill:hover { border-color:var(--accent); color:var(--accent-text); }

.mission-progress { display:flex; align-items:center; gap:12px; margin:4px 0 20px; }
.mp-bar { flex:1; height:8px; border-radius:999px; background:var(--border); overflow:hidden; max-width:340px; }
.mp-fill { height:100%; background:var(--accent); border-radius:999px; transition:width .3s ease; }

.cause-card { padding:15px 16px; margin-bottom:10px; }
.cause-card.primary { border-color:var(--accent); background:var(--accent-soft); }
.cause-rank { font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--accent-text); margin-bottom:4px; }
.cause-title { font-weight:700; font-size:14.5px; margin-bottom:4px; }
.cause-card p { margin:0; font-size:13.5px; line-height:1.55; }

.primo-passo { display:flex; gap:12px; align-items:flex-start; background:var(--accent-soft); border:1px solid var(--accent); border-radius:14px; padding:15px 16px; }
.primo-passo p { margin:0; font-size:14.5px; font-weight:600; line-height:1.5; }
.pp-badge { flex-shrink:0; background:var(--accent); color:var(--navy); font-weight:800; font-size:12px; padding:4px 9px; border-radius:999px; white-space:nowrap; }
[data-theme="dark"] .pp-badge { color:#06231F; }

.plan-phase { margin-bottom:16px; }
.plan-check { margin-bottom:7px; }

.err-list { margin:0; padding-left:20px; }
.err-list li { margin-bottom:7px; font-size:13.5px; line-height:1.5; }

.kpi-list { display:grid; gap:10px; }
.kpi-card { padding:13px 15px; }
.kpi-name { font-weight:700; font-size:14px; margin-bottom:6px; }
.kpi-row { display:flex; gap:10px; font-size:13px; padding:3px 0; }
.kpi-row .al { color:var(--text-faint); flex-shrink:0; width:118px; }

.mission-banner { border:1px solid var(--accent); background:var(--accent-soft); border-radius:var(--radius); padding:18px; margin-bottom:22px; }
.mb-title { font-weight:800; font-size:18px; margin-bottom:6px; }
.mission-banner p { margin:0 0 10px; font-size:13.5px; line-height:1.55; }
.mb-next { font-size:13.5px; margin-bottom:10px; }

.link-inline { color:var(--accent-text); font-weight:700; cursor:pointer; text-decoration:underline; }

@media (max-width:700px) {
  .hero-question { font-size:29px; }
  .problem-grid { grid-template-columns:1fr; }
  .kpi-row { flex-direction:column; gap:1px; }
  .kpi-row .al { width:auto; }
}

/* ============================================================
   TOOLKIT ripensato — gruppi, input->output, analisi
============================================================ */
.tk-group { margin-bottom:28px; }
.tk-group-head { display:flex; align-items:center; gap:12px; margin-bottom:12px; padding:14px 16px; border-radius:var(--radius); }
.tk-group-head-prezzi { background:#E3F6F1; }
.tk-group-head-documenti { background:#E5EEFB; }
.tk-group-head-messaggi { background:#FDEEE0; }
.tk-group-head-vendere { background:#FBE6EC; }
.tk-group-head-decisioni { background:#EDE7FA; }
.tk-group-head-ai { background:#E1F4FB; }
[data-theme="dark"] .tk-group-head-prezzi { background:#0F2E29; }
[data-theme="dark"] .tk-group-head-documenti { background:#101F35; }
[data-theme="dark"] .tk-group-head-messaggi { background:#2E2010; }
[data-theme="dark"] .tk-group-head-vendere { background:#2E141E; }
[data-theme="dark"] .tk-group-head-decisioni { background:#211B36; }
[data-theme="dark"] .tk-group-head-ai { background:#0F2530; }
.tk-group-icon { font-size:22px; }
.tk-group-name { font-weight:800; font-size:16px; }
.tk-card { padding:15px 16px; cursor:pointer; display:flex; flex-direction:column; gap:8px; }
.tk-card:hover { border-color:var(--accent); }
.tk-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.tk-card-name { font-weight:700; font-size:14.5px; }
.tk-badge { flex-shrink:0; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--accent-text); background:var(--accent-soft); border:1px solid var(--accent); border-radius:999px; padding:3px 9px; white-space:nowrap; }
.tk-io { display:flex; gap:8px; font-size:12.5px; line-height:1.45; }
.tk-io-label { flex-shrink:0; width:60px; color:var(--text-faint); font-weight:700; text-transform:uppercase; font-size:10.5px; letter-spacing:.04em; padding-top:2px; }
.tk-detail-head { display:flex; flex-direction:column; gap:8px; margin:2px 0 16px; }

.check-field { display:flex; align-items:center; gap:10px; padding:8px 12px; border:1px solid var(--border); border-radius:10px; background:var(--surface-alt); margin-bottom:7px; cursor:pointer; font-size:13.5px; }
.check-field input { width:17px; height:17px; accent-color:var(--accent); }

.sp-score { display:flex; align-items:baseline; gap:4px; justify-content:center; padding:14px 0 4px; }
.sp-score-num { font-size:52px; font-weight:800; letter-spacing:-.03em; }
.sp-score.good .sp-score-num { color:var(--accent-text); }
.sp-score.mid .sp-score-num { color:#C98A00; }
.sp-score.warn .sp-score-num { color:#C0392B; }
[data-theme="dark"] .sp-score.mid .sp-score-num { color:#F0B429; }
[data-theme="dark"] .sp-score.warn .sp-score-num { color:#FF7A6B; }
.sp-score-lbl { font-size:18px; color:var(--text-faint); font-weight:700; }
.small-chip { font-size:10.5px; padding:2px 8px; border:1px solid var(--accent); color:var(--accent-text); border-radius:999px; margin-left:6px; }

.dm-crit-row { display:grid; grid-template-columns:1fr 92px; gap:8px; margin-bottom:7px; }
.dm-crit-row input, .dm-crit-row select { padding:9px 11px; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--text); font-size:13.5px; }
.plan-item.prio { border-left:3px solid var(--accent); padding-left:10px; background:var(--accent-soft); border-radius:8px; }

@media (max-width:700px) { .tk-io { flex-direction:column; gap:1px; } .tk-io-label { width:auto; } }

/* ============================================================
   IDENTITÀ VISIVA — "dalla nebbia alla chiarezza"
   Tre colori con un significato:
   Notte (navy) = la confusione · Chiarezza (teal) = il metodo
   Azione (ambra) = solo dove c'è qualcosa da FARE adesso
============================================================ */
:root {
  --font-display:"Bricolage Grotesque", -apple-system, sans-serif;
  --font-body:"Instrument Sans", -apple-system, "Segoe UI", sans-serif;
  --azione:#FFB020; --azione-soft:#FFF4DC; --azione-text:#8A5A00;
  --radius:18px;
  --shadow:0 1px 2px rgba(11,30,61,.05), 0 10px 30px rgba(11,30,61,.07);
}
[data-theme="dark"] {
  --azione:#FFB020; --azione-soft:#2A2008; --azione-text:#FFC759;
}
body { font-family:var(--font-body); }
h1, h2, .page-title, .brand-name, .hero-question, .pm-title, .mb-title, .q-title, .cat-name, .pc-title, .tk-card-name, .tk-group-name, .cause-title, .step-title, .sp-score-num { font-family:var(--font-display); letter-spacing:-.01em; }

/* ---------- Hero: il momento firma ---------- */
.home-hero.clarity { padding:26px 0 34px; position:relative; }
.hero-eyebrow { font-size:13.5px; color:var(--text-soft); margin-bottom:12px; font-weight:600; }
.hero-eyebrow .he-dim { opacity:.55; }
.hero-eyebrow b { color:var(--accent-text); }
.hero-question { font-size:42px; font-weight:800; line-height:1.08; margin:0 0 22px; letter-spacing:-.028em; }
.hero-glow { position:relative; display:inline-block; background:linear-gradient(92deg, var(--accent-text), var(--accent) 60%, #7FE8DA); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.hero-glow::after { content:""; position:absolute; left:0; right:0; bottom:3px; height:9px; background:linear-gradient(92deg, var(--accent), #7FE8DA); opacity:.22; border-radius:99px; transform-origin:left; animation:sweep .9s .25s cubic-bezier(.2,.8,.2,1) both; z-index:-1; }
@keyframes sweep { from { transform:scaleX(0); } to { transform:scaleX(1); } }
.search-wrap.big input { padding:19px 18px 19px 52px; font-size:16.5px; border-radius:18px; border:1.5px solid var(--border); box-shadow:var(--shadow); transition:border-color .15s ease, box-shadow .15s ease; }
.search-wrap.big input:focus { border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent), var(--shadow); outline:none; }

/* ---------- Card problemi: tile colorati ---------- */
.problem-chip { padding:16px; border:1.5px solid var(--border); transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.problem-chip:hover { transform:translateY(-2px); border-color:var(--accent); box-shadow:0 6px 20px rgba(11,30,61,.10); }
.pc-icon { width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.tile-0 { background:#E4F9F5; } .tile-1 { background:#FFF0F0; } .tile-2 { background:#FFF4DC; }
.tile-3 { background:#EAF2FF; } .tile-4 { background:#F3EAFF; } .tile-5 { background:#EAF9E7; }
.tile-6 { background:#FFEFE2; } .tile-7 { background:#FDEBF4; } .tile-8 { background:#E8F7FB; } .tile-9 { background:#F0F0F6; }
[data-theme="dark"] .pc-icon { background:#12294D !important; }
.home-hero.clarity + * .problem-chip, .problem-grid .problem-chip { animation:fadeUp .45s cubic-bezier(.2,.8,.2,1) both; }
.problem-grid .problem-chip:nth-child(2){animation-delay:.04s}.problem-grid .problem-chip:nth-child(3){animation-delay:.08s}.problem-grid .problem-chip:nth-child(4){animation-delay:.12s}.problem-grid .problem-chip:nth-child(5){animation-delay:.16s}.problem-grid .problem-chip:nth-child(6){animation-delay:.2s}.problem-grid .problem-chip:nth-child(7){animation-delay:.24s}.problem-grid .problem-chip:nth-child(8){animation-delay:.28s}.problem-grid .problem-chip:nth-child(9){animation-delay:.32s}.problem-grid .problem-chip:nth-child(10){animation-delay:.36s}
@keyframes fadeUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

/* ---------- Nivrale Check: la carta "notte" ---------- */
.buddy-check { background:linear-gradient(135deg, #0B1E3D 0%, #123156 100%); color:#EAF2FB; border-radius:var(--radius); padding:20px; margin-bottom:26px; box-shadow:var(--shadow); }
[data-theme="dark"] .buddy-check { background:linear-gradient(135deg, #0F2140 0%, #16355E 100%); border:1px solid #1C3255; }
.bc-head { font-family:var(--font-display); font-weight:800; font-size:16.5px; margin-bottom:6px; }
.bc-text { margin:0 0 12px; font-size:13.5px; color:#B9C8DC; line-height:1.5; }
.bc-chips { display:flex; flex-direction:column; gap:8px; }
.bc-chip { display:flex; justify-content:space-between; align-items:center; gap:12px; text-align:left; width:100%;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); color:#EAF2FB;
  border-radius:12px; padding:11px 14px; cursor:pointer; font-size:13.5px; font-family:var(--font-body); transition:background .15s ease, border-color .15s ease; }
.bc-chip:hover { background:rgba(47,224,200,.12); border-color:var(--accent); }
.bc-q { font-weight:600; }
.bc-goto { flex-shrink:0; font-size:12px; color:#7FE8DA; white-space:nowrap; }
.bc-foot { margin:12px 0 0; font-size:12px; color:#8FA3BC; }

/* ---------- Il filo di chiarezza ---------- */
.path-steps { position:relative; margin-top:6px; }
.path-steps::before { content:""; position:absolute; left:17px; top:18px; bottom:18px; width:2px;
  background:linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 25%, var(--border))); border-radius:2px; }
.step { position:relative; padding:0 0 30px 52px; }
.step:last-child { padding-bottom:8px; }
.step-node { position:absolute; left:0; top:0; width:36px; height:36px; border-radius:50%;
  background:var(--surface); border:2px solid var(--accent); color:var(--accent-text);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:15px; z-index:1; }
.step-title { font-size:19px; font-weight:800; margin-bottom:12px; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding-top:5px; }
.step-sub { font-family:var(--font-body); font-size:12.5px; font-weight:600; color:var(--text-faint); }
.step .section-label { display:none; }

/* ---------- Primo passo = Azione (ambra) ---------- */
.primo-passo { background:var(--azione-soft); border:1.5px solid var(--azione); }
.pp-badge { background:var(--azione); color:#3A2600; }
[data-theme="dark"] .pp-badge { color:#241800; }
.plan-check { transition:background .15s ease; }
.plan-check .check-box { transition:transform .15s ease; }
.plan-check.done .check-box { animation:pop .25s cubic-bezier(.2,.8,.2,1); }
@keyframes pop { 0%{transform:scale(.6)} 70%{transform:scale(1.2)} 100%{transform:scale(1)} }

/* ---------- Template ---------- */
.template-box { margin-top:12px; border:1.5px dashed var(--accent); border-radius:14px; padding:14px; background:color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.tpl-head { font-size:13px; color:var(--accent-text); margin-bottom:8px; }
.tpl-head b { font-family:var(--font-display); font-size:14px; color:var(--text); }
.tpl-text { white-space:pre-line; font-size:13px; line-height:1.6; color:var(--text-soft); background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:12px; margin-bottom:10px; max-height:280px; overflow-y:auto; }

/* ---------- Missione, progressi, rifiniture ---------- */
.mp-fill { background:linear-gradient(90deg, var(--accent), #7FE8DA); }
.mission-banner { background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--surface)), color-mix(in srgb, var(--azione) 12%, var(--surface))); border:1.5px solid var(--accent); }
.mb-title { font-size:21px; }
.card { transition:border-color .16s ease; }
.tk-card:hover, .cat-card:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(11,30,61,.10); }
.tk-card, .cat-card { transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.primary-btn { font-family:var(--font-display); font-weight:700; letter-spacing:.01em; }
:focus-visible { outline:2.5px solid var(--accent); outline-offset:2px; border-radius:6px; }

@media (max-width:700px) {
  .hero-question { font-size:31px; }
  .step { padding-left:46px; }
  .path-steps::before { left:15px; }
  .step-node { width:32px; height:32px; font-size:14px; }
  .bc-chip { flex-direction:column; align-items:flex-start; gap:4px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-glow::after, .problem-grid .problem-chip, .plan-check.done .check-box { animation:none; }
  .problem-chip, .tk-card, .cat-card { transition:none; }
}

/* Toolkit v3: esempi, campi opzionali richiudibili */
.tpl-example { background:var(--accent-soft); border:1px solid var(--accent); border-radius:12px; padding:11px 14px; font-size:12.5px; line-height:1.6; color:var(--text-soft); margin-bottom:14px; }
.tpl-example b { color:var(--accent-text); }
.opt-details { margin:10px 0; border:1px solid var(--border); border-radius:12px; padding:10px 14px; background:var(--surface-alt); }
.opt-details summary { cursor:pointer; font-size:13px; font-weight:700; color:var(--text-soft); }
.opt-details[open] summary { margin-bottom:10px; }
#pv-add { margin:4px 0 6px; }

/* ============================================================
   PROGRESSI — il cruscotto personale
============================================================ */
.next-step { background:linear-gradient(135deg, var(--azione-soft), color-mix(in srgb, var(--azione) 20%, var(--surface))); border:1.5px solid var(--azione); border-radius:var(--radius); padding:18px; margin-bottom:20px; cursor:pointer; transition:transform .16s ease, box-shadow .16s ease; }
.next-step:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(255,176,32,.18); }
.ns-label { font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--azione-text); margin-bottom:6px; }
.ns-context { font-size:12.5px; color:var(--text-soft); font-weight:600; margin-bottom:4px; }
.ns-action { font-family:var(--font-display); font-weight:700; font-size:16.5px; line-height:1.35; margin-bottom:10px; }
.ns-cta { font-size:13px; font-weight:700; color:var(--azione-text); }
.trofei { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px; }
.trofeo { display:flex; align-items:center; gap:12px; padding:13px 15px; cursor:pointer; border:1.5px solid var(--accent); background:color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.trofeo-icon { font-size:22px; }
.trofeo-title { font-weight:700; font-size:14px; }
.num-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px; }
.num-card { padding:14px 16px; cursor:pointer; }
.num-card:hover { border-color:var(--accent); }
.num-tool { font-size:12px; font-weight:700; color:var(--accent-text); margin-bottom:8px; }
.num-row { display:flex; justify-content:space-between; gap:10px; font-size:13px; padding:3px 0; }
.num-row b { font-family:var(--font-display); }

/* ============================================================
   RADAR — Error Intelligence™
============================================================ */
.err-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:12px; }
.err-card { padding:15px 16px; cursor:pointer; transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.err-card:hover { transform:translateY(-2px); border-color:var(--accent); box-shadow:0 6px 20px rgba(11,30,61,.10); }
.err-card.critico { border:1.5px solid #E5484D; }
.err-top { display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.err-id { font-family:var(--font-display); font-weight:800; font-size:11.5px; color:var(--text-faint); letter-spacing:.05em; }
.err-critico-badge { font-size:10px; font-weight:800; letter-spacing:.06em; color:#fff; background:#E5484D; border-radius:999px; padding:3px 9px; }

.err-title { font-family:var(--font-display); font-weight:700; font-size:15px; line-height:1.3; margin-bottom:9px; }
.err-badges { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.small-chip2 { font-size:11px; padding:3px 9px; }
.err-detail-head { border:1.5px solid var(--border); border-radius:var(--radius); padding:18px; margin-bottom:22px; background:var(--surface); }
.err-detail-head.critico { border-color:#E5484D; background:color-mix(in srgb, #E5484D 4%, var(--surface)); }
.err-impatti { display:flex; flex-wrap:wrap; gap:7px; margin-top:11px; }
.imp-pill { font-size:12px; border:1px solid var(--border); border-radius:999px; padding:4px 10px; background:var(--surface-alt); letter-spacing:.02em; }
.segnale { cursor:pointer; }
.segnali-verdict { margin-top:12px; padding:12px 14px; border-radius:12px; background:var(--surface-alt); border:1px solid var(--border); font-size:13.5px; line-height:1.5; }
.cat-pill.active { border-color:var(--accent); background:var(--accent-soft); color:var(--accent-text); font-weight:700; }

/* ============================================================
   AURORA — l'app prende vita: dalla nebbia alla chiarezza
   Sfondo ambientale con bagliori in movimento, grana leggera,
   hero "notte" con la ricerca che brilla, superfici in vetro.
============================================================ */
:root {
  --glass:rgba(255,255,255,.78);
  --aur1:rgba(18,184,164,.17); --aur2:rgba(255,176,32,.13); --aur3:rgba(99,102,241,.11);
}
[data-theme="dark"] {
  --glass:rgba(15,33,64,.74);
  --aur1:rgba(47,224,200,.12); --aur2:rgba(255,176,32,.07); --aur3:rgba(99,102,241,.15);
}

/* Bagliori ambientali che respirano dietro tutta l'app */
.layout::before { content:""; position:absolute; inset:-18%; z-index:0; pointer-events:none;
  background:
    radial-gradient(42% 34% at 12% 8%, var(--aur1), transparent 70%),
    radial-gradient(36% 30% at 88% 12%, var(--aur3), transparent 70%),
    radial-gradient(46% 36% at 80% 94%, var(--aur2), transparent 72%),
    radial-gradient(30% 26% at 6% 80%, var(--aur1), transparent 70%);
  animation:aurora-drift 26s ease-in-out infinite alternate; will-change:transform; }
/* Grana finissima: via l'effetto "piatto" */
.layout::after { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>"); }
[data-theme="dark"] .layout::after { opacity:.07; }
@keyframes aurora-drift {
  from { transform:translate3d(-2.5%,-2%,0) rotate(-1.6deg) scale(1); }
  to   { transform:translate3d(2.5%,2.5%,0) rotate(1.6deg) scale(1.07); }
}
.sidebar, .main-col { position:relative; z-index:1; }

/* Superfici in vetro: si vede l'aurora respirare sotto */
.card { background:var(--glass); }
.sidebar { background:color-mix(in srgb, var(--surface) 80%, transparent); backdrop-filter:blur(18px) saturate(1.35); -webkit-backdrop-filter:blur(18px) saturate(1.35); }
.topbar { background:color-mix(in srgb, var(--surface) 78%, transparent); backdrop-filter:blur(18px) saturate(1.35); -webkit-backdrop-filter:blur(18px) saturate(1.35); }
.bottom-nav { background:color-mix(in srgb, var(--surface) 76%, transparent); backdrop-filter:blur(20px) saturate(1.4); -webkit-backdrop-filter:blur(20px) saturate(1.4); border-top:1px solid color-mix(in srgb, var(--border) 70%, transparent); }

/* ---------- HERO NOTTE: la nebbia sopra, la chiarezza nella barra ---------- */
.home-hero.clarity {
  background:
    radial-gradient(70% 110% at 88% -20%, rgba(47,224,200,.30), transparent 58%),
    radial-gradient(55% 90% at 4% 118%, rgba(255,176,32,.20), transparent 58%),
    radial-gradient(40% 60% at 40% 0%, rgba(99,102,241,.22), transparent 65%),
    linear-gradient(152deg, #0B1E3D 18%, #0D2750 54%, #0B3644 100%);
  border-radius:26px; padding:32px 26px 30px; margin:2px 0 26px;
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 20px 55px rgba(11,30,61,.30), inset 0 1px 0 rgba(255,255,255,.07);
  overflow:hidden;
}
/* cielo stellato leggerissimo */
.home-hero.clarity::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 24%, rgba(255,255,255,.75), transparent 55%),
    radial-gradient(1px 1px at 34% 62%, rgba(255,255,255,.5), transparent 55%),
    radial-gradient(1.6px 1.6px at 58% 18%, rgba(255,255,255,.65), transparent 55%),
    radial-gradient(1px 1px at 76% 44%, rgba(255,255,255,.45), transparent 55%),
    radial-gradient(1.3px 1.3px at 90% 70%, rgba(255,255,255,.6), transparent 55%),
    radial-gradient(1px 1px at 22% 84%, rgba(255,255,255,.4), transparent 55%),
    radial-gradient(1.2px 1.2px at 68% 88%, rgba(255,255,255,.5), transparent 55%);
}
/* alone che pulsa piano dietro la parola "chiarezza" */
.home-hero.clarity::after { content:""; position:absolute; width:340px; height:340px; left:-90px; bottom:-160px; pointer-events:none;
  background:radial-gradient(circle, rgba(47,224,200,.30), transparent 65%); filter:blur(10px);
  animation:halo-breathe 7s ease-in-out infinite alternate; }
@keyframes halo-breathe { from { transform:scale(1); opacity:.7; } to { transform:scale(1.25); opacity:1; } }

.home-hero.clarity .hero-eyebrow { color:rgba(240,246,252,.9); display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.14); border-radius:999px; padding:7px 14px; backdrop-filter:blur(6px); }
.home-hero.clarity .hero-eyebrow .he-dim { opacity:.62; }
.home-hero.clarity .hero-eyebrow b { color:#5BEEDB; }
.home-hero.clarity .hero-question { color:#FFFFFF; margin-top:16px; text-shadow:0 2px 24px rgba(0,0,0,.25); }
.home-hero.clarity .hero-glow { background:linear-gradient(92deg, #4CE9D3, #7FE8DA 55%, #FFD27A); -webkit-background-clip:text; background-clip:text; }
.home-hero.clarity .search-wrap input {
  background:#FFFFFF; color:#0B1E3D; border:none;
  box-shadow:0 12px 34px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.16), 0 0 40px rgba(47,224,200,.22); }
.home-hero.clarity .search-wrap input::placeholder { color:#7A8698; }
.home-hero.clarity .search-wrap input:focus { box-shadow:0 12px 34px rgba(0,0,0,.32), 0 0 0 2.5px #2FE0C8, 0 0 48px rgba(47,224,200,.35); outline:none; }
.home-hero.clarity .search-icon { color:#0E8C7E; }
@media (max-width:700px) { .home-hero.clarity { padding:24px 18px 24px; border-radius:22px; margin-top:0; } }

/* ---------- Dettagli vivi ---------- */
.section-label { display:flex; align-items:center; gap:8px; }
.section-label::before { content:""; width:18px; height:7px; border-radius:99px; flex-shrink:0;
  background:linear-gradient(90deg, var(--accent), var(--azione)); opacity:.85; }

.primary-btn { background:linear-gradient(125deg, var(--accent), #0EA090 85%); color:#06231F;
  box-shadow:0 6px 18px rgba(18,184,164,.32); transition:transform .15s ease, box-shadow .15s ease; }
.primary-btn:hover { transform:translateY(-1.5px); box-shadow:0 10px 24px rgba(18,184,164,.4); }
.primary-btn:active { transform:translateY(0); }
.ghost-btn { transition:border-color .15s ease, background .15s ease, transform .15s ease; }
.ghost-btn:hover { border-color:var(--accent); transform:translateY(-1px); }

.card { transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.problem-chip:hover, .err-card:hover, .tk-card:hover { box-shadow:0 10px 30px rgba(18,184,164,.13), var(--shadow); }

/* Scrollbar in tema */
.content::-webkit-scrollbar { width:9px; }
.content::-webkit-scrollbar-track { background:transparent; }
.content::-webkit-scrollbar-thumb { background:color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius:99px; }
.content::-webkit-scrollbar-thumb:hover { background:var(--accent); }

/* Accessibilità: senza animazioni se richiesto */
@media (prefers-reduced-motion: reduce) {
  .layout::before, .home-hero.clarity::after { animation:none; }
}

/* ============================================================
   RADAR v2 — organizzato per categorie, grafica Aurora
============================================================ */
.radar-hero { position:relative; overflow:hidden; border-radius:24px; padding:24px 22px 20px; margin-bottom:18px;
  background:
    radial-gradient(60% 100% at 90% -10%, rgba(229,72,77,.28), transparent 58%),
    radial-gradient(50% 90% at 5% 115%, rgba(47,224,200,.22), transparent 58%),
    linear-gradient(150deg, #0B1E3D 22%, #14264B 60%, #2A1530 100%);
  border:1px solid rgba(255,255,255,.09); box-shadow:0 16px 44px rgba(11,30,61,.26); color:#fff; }
.rh-badge { display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16); border-radius:999px; padding:5px 12px; color:rgba(255,255,255,.92); }
.rh-title { font-family:var(--font-display); font-size:30px; font-weight:800; margin:10px 0 4px; color:#fff; }
.rh-sub { color:rgba(240,246,252,.75); font-size:13.5px; margin:0 0 14px; max-width:520px; }
.rh-stats { display:flex; gap:8px; flex-wrap:wrap; }
.rh-stat { font-size:12.5px; color:rgba(240,246,252,.85); background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.13); border-radius:999px; padding:5px 12px; }
.rh-stat b { color:#5BEEDB; }
.rh-stat.crit b { color:#FF8A8E; }

.crit-label { font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:#E5484D; margin:4px 0 8px; }
.critici-strip { display:flex; gap:10px; overflow-x:auto; padding:2px 2px 10px; margin-bottom:8px; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; }
.crit-mini { flex:0 0 235px; scroll-snap-align:start; cursor:pointer; border-radius:16px; padding:13px 14px;
  background:linear-gradient(150deg, #0B1E3D, #251129); border:1.5px solid rgba(229,72,77,.65); color:#fff;
  transition:transform .15s ease, box-shadow .15s ease; }
.crit-mini:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(229,72,77,.28); }
.cm-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.cm-top .err-id { color:rgba(255,255,255,.55); }
.cm-score { font-family:var(--font-display); font-weight:800; font-size:14px; color:#fff; background:#E5484D; border-radius:999px; padding:2px 10px; }
.cm-title { font-family:var(--font-display); font-weight:700; font-size:13.5px; line-height:1.3; margin-bottom:8px; }
.cm-cost { font-size:11.5px; opacity:.85; }

.err-cat-section { margin:26px 0 6px; }
.err-cat-head { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:16px; cursor:pointer; margin-bottom:12px;
  background:var(--glass); border:1px solid var(--border); transition:border-color .15s ease, transform .15s ease; }
.err-cat-head:hover { border-color:var(--accent); transform:translateX(2px); }
.err-cat-head.standalone { cursor:default; margin:14px 0; }
.err-cat-head.standalone:hover { border-color:var(--border); transform:none; }
.ech-icon { width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0; }
.ech-info { flex:1; min-width:0; }
.ech-name { font-family:var(--font-display); font-weight:800; font-size:15.5px; }
.ech-open { color:var(--text-faint); }
.see-all { margin-top:10px; }
.radar-pills { margin:14px 0 6px; }



/* ============================================================
   HOME v2 — manifesto, come funziona, differenziatori, CTA
============================================================ */
.manifesto { position:relative; overflow:hidden; border-radius:24px; padding:26px 24px; margin-bottom:26px;
  background:
    radial-gradient(55% 90% at 92% -10%, rgba(47,224,200,.16), transparent 60%),
    radial-gradient(45% 80% at 0% 115%, rgba(255,176,32,.12), transparent 60%),
    linear-gradient(150deg, #0B1E3D 25%, #0F2A50 100%);
  border:1px solid rgba(255,255,255,.09); box-shadow:0 16px 44px rgba(11,30,61,.22); color:#fff; }
.mani-kicker { font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#5BEEDB; margin-bottom:14px; }
.mani-line { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; padding:7px 0; border-bottom:1px dashed rgba(255,255,255,.10); }
.mani-line:last-of-type { border-bottom:none; }
.mani-no { font-family:var(--font-display); font-weight:800; font-size:16.5px; color:#fff; }
.mani-why { color:rgba(240,246,252,.55); font-size:13.5px; }
.mani-final { margin-top:16px; font-family:var(--font-display); font-size:18px; line-height:1.45; font-weight:700; color:rgba(255,255,255,.95); }
.mf-teal { color:#4CE9D3; } .mf-amber { color:#FFD27A; }

.how-steps { display:flex; flex-direction:column; gap:10px; margin-bottom:26px; }
.how-step { display:flex; gap:14px; align-items:flex-start; background:var(--glass); border:1px solid var(--border); border-radius:18px; padding:16px; }
.hs-num { width:34px; height:34px; flex-shrink:0; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:16px; color:#06231F;
  background:linear-gradient(125deg, var(--accent), #7FE8DA); box-shadow:0 4px 12px rgba(18,184,164,.3); }
.hs-title { font-family:var(--font-display); font-weight:800; font-size:15px; margin-bottom:3px; }
.hs-desc { font-size:13px; color:var(--text-soft); line-height:1.5; }

.diff-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin-bottom:26px; }
.diff-card { padding:18px 16px; }
.dc-icon { font-size:24px; margin-bottom:8px; }
.dc-title { font-family:var(--font-display); font-weight:800; font-size:15px; margin-bottom:5px; }
.dc-desc { font-size:12.5px; color:var(--text-soft); line-height:1.5; }

.numbers-band { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin-bottom:26px;
  border-radius:20px; padding:18px 14px; background:var(--glass); border:1px solid var(--border); text-align:center; }
.nb-item b { display:block; font-family:var(--font-display); font-size:26px; font-weight:800;
  background:linear-gradient(92deg, var(--accent), var(--azione)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.nb-item span { font-size:11.5px; color:var(--text-soft); }

.cta-tiles { display:flex; flex-direction:column; gap:10px; }
.cta-tile { display:flex; align-items:center; gap:14px; cursor:pointer; background:var(--glass); border:1px solid var(--border);
  border-radius:18px; padding:15px 16px; transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.cta-tile:hover { transform:translateY(-2px); border-color:var(--accent); box-shadow:0 10px 28px rgba(18,184,164,.14); }
.ct-icon { font-size:24px; }
.ct-title { font-family:var(--font-display); font-weight:800; font-size:15px; }
.ct-desc { font-size:12.5px; color:var(--text-soft); }
.ct-arrow { margin-left:auto; color:var(--accent); font-weight:800; }

.ai-howto { margin-top:12px; padding:12px 14px; border-radius:14px; font-size:12.5px; line-height:1.55;
  background:var(--accent-soft); border:1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); color:var(--text); }

/* ============================================================
   RADAR v3 — macroaree + livelli di criticità (niente numeri)
============================================================ */
.macro-block { margin:30px 0 6px; }
.macro-head { display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:20px; cursor:pointer; margin-bottom:14px;
  background:
    radial-gradient(50% 100% at 95% 0%, rgba(47,224,200,.10), transparent 60%),
    var(--glass);
  border:1.5px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.macro-head:hover { border-color:var(--accent); transform:translateY(-1px); box-shadow:0 10px 26px rgba(18,184,164,.12); }
.macro-head.standalone { cursor:default; }
.macro-head.standalone:hover { border-color:color-mix(in srgb, var(--accent) 22%, var(--border)); transform:none; box-shadow:none; }
.mh-icon { font-size:26px; }
.mh-info { flex:1; }
.mh-name { font-family:var(--font-display); font-weight:800; font-size:17.5px;
  background:linear-gradient(92deg, var(--text), color-mix(in srgb, var(--accent) 70%, var(--text)));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.macro-block .err-cat-section { margin:14px 0 6px 10px; }

.err-lvl { font-family:var(--font-display); font-weight:800; font-size:11.5px; letter-spacing:.03em; text-transform:uppercase;
  border-radius:999px; padding:3px 11px; border:1.5px solid transparent; }
.err-lvl.big { font-size:13px; padding:5px 14px; }
.err-lvl.lv-crit { color:#fff; background:#E5484D; border-color:#E5484D; }
.err-lvl.lv-hi { color:#8A5200; background:rgba(255,140,20,.16); border-color:#F59B2D; }
[data-theme="dark"] .err-lvl.lv-hi { color:#FFC073; }
.err-lvl.lv-mid { color:#7A6000; background:rgba(255,205,60,.20); border-color:#E4B93C; }
[data-theme="dark"] .err-lvl.lv-mid { color:#FFE08A; }
.err-lvl.lv-low { color:#0E7A52; background:rgba(48,190,130,.16); border-color:#2FBE82; }
[data-theme="dark"] .err-lvl.lv-low { color:#7DE8B8; }
.lvl-word { font-weight:800; padding:1px 8px; border-radius:999px; font-size:11px; }
.lvl-word.lv-crit { color:#E5484D; background:rgba(229,72,77,.12); }
.lvl-word.lv-hi { color:#C87415; background:rgba(255,140,20,.12); }
.lvl-word.lv-mid { color:#A98A10; background:rgba(255,205,60,.14); }
.lvl-word.lv-low { color:#189B67; background:rgba(48,190,130,.12); }

.chat-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }

/* ============================================================
   SELETTORE LINGUA
============================================================ */
.lang-switch { display:flex; gap:8px; margin-top:10px; }
.lang-btn { flex:1; padding:10px 14px; border-radius:12px; border:1.5px solid var(--border); background:var(--surface);
  font-family:var(--font-display); font-weight:700; font-size:13.5px; color:var(--text-soft); cursor:pointer;
  transition:border-color .15s ease, background .15s ease, color .15s ease; }
.lang-btn:hover { border-color:var(--accent); }
.lang-btn.active { border-color:var(--accent); background:var(--accent-soft); color:var(--text); }

/* ============================================================
   BUSINESS HEALTH CHECK
============================================================ */
.bhc-welcome { text-align:center; padding-top:24px; }
.bhc-badge { display:inline-block; padding:6px 14px; border-radius:999px; background:var(--accent-soft);
  color:var(--accent-text); font-family:var(--font-display); font-weight:700; font-size:13px; }
.bhc-welcome-actions { display:flex; flex-direction:column; gap:10px; align-items:center; margin-top:22px; }
.bhc-cta-btn { font-size:16px; padding:14px 22px; }
.bhc-gauge-wrap { display:flex; flex-direction:column; align-items:center; gap:8px; margin:18px 0 6px; }
.bhc-gauge { width:132px; height:132px; border-radius:50%; display:flex; flex-direction:column; align-items:center;
  justify-content:center; border:6px solid var(--border); background:var(--surface); box-shadow:var(--shadow); }
.bhc-gauge.small { width:44px; height:44px; border-width:3px; flex-shrink:0; }
.bhc-gauge-num { font-family:var(--font-display); font-weight:800; font-size:36px; line-height:1; color:var(--text); }
.bhc-gauge.small .bhc-gauge-num { font-size:15px; }
.bhc-gauge-max { font-size:12px; color:var(--text-faint); margin-top:2px; }
.bhc-gauge-label { font-family:var(--font-display); font-weight:700; font-size:14px; padding:4px 12px; border-radius:999px; }
.bhc-gauge.lv-crit, .bhc-gauge-label.lv-crit { border-color:#E5484D; }
.bhc-gauge.lv-hi, .bhc-gauge-label.lv-hi { border-color:#F59B2D; }
.bhc-gauge.lv-mid, .bhc-gauge-label.lv-mid { border-color:#E4B93C; }
.bhc-gauge.lv-low, .bhc-gauge-label.lv-low { border-color:#2FBE82; }
.bhc-gauge-label.lv-crit { color:#E5484D; background:rgba(229,72,77,.12); }
.bhc-gauge-label.lv-hi { color:#C87415; background:rgba(255,140,20,.12); }
.bhc-gauge-label.lv-mid { color:#A98A10; background:rgba(255,205,60,.14); }
.bhc-gauge-label.lv-low { color:#189B67; background:rgba(48,190,130,.12); }
.bhc-area-list { display:flex; flex-direction:column; gap:12px; }
.bhc-area-row { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; }
.bhc-area-label { display:flex; align-items:center; gap:8px; font-size:14px; min-width:170px; }
.bhc-area-bar { height:8px; border-radius:999px; background:var(--surface-alt); overflow:hidden; }
.bhc-area-fill { height:100%; border-radius:999px; }
.bhc-area-fill.lv-crit { background:#E5484D; }
.bhc-area-fill.lv-hi { background:#F59B2D; }
.bhc-area-fill.lv-mid { background:#E4B93C; }
.bhc-area-fill.lv-low { background:#2FBE82; }
.bhc-area-score { font-family:var(--font-display); font-weight:800; font-size:14px; width:28px; text-align:right; }
.bhc-area-score.lv-crit { color:#E5484D; }
.bhc-area-score.lv-hi { color:#C87415; }
.bhc-area-score.lv-mid { color:#A98A10; }
.bhc-area-score.lv-low { color:#189B67; }
.bhc-entry-card { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; cursor:pointer;
  margin-bottom:16px; border:1.5px solid var(--accent); }
.bhc-entry-left { display:flex; align-items:center; gap:14px; }
.bhc-entry-title { font-family:var(--font-display); font-weight:700; font-size:15px; }
.bhc-improve-card { padding:18px; margin-bottom:16px; }
.bhc-improve-head { display:flex; align-items:center; justify-content:space-between; }