/* ================================================================
   TEMA "PANNA": strato visivo finale (font invariati)
   Sfondo panna, card pastello con contorno scuro sottile, pillole,
   forme decorative, grafici più morbidi. Sempre in modalità chiara.
   ================================================================ */
:root, :root[data-theme="light"] {
  --bg: #F7F0E3; --surface: #FFFDF8; --surface-2: #F6EFE2; --ink: #16151B; --ink-2: #45424E; --muted: #6F6B78; --line: #E6DCCB;
  --edge: #1C1B22; --soft: #FBF6EC;
  --side: #16151B; --side-ink: #F3F0EA; --side-muted: #9B97A4; --side-hi: #2A2931;
  --accent: #EE6436; --accent-ink: #FFFFFF; --accent-soft: #FCDCCB;
  --tile-ink: #16151B;
  /* pastelli delle reference */
  --t1: #BCCBF1; --t2: #F2C2DE; --t3: #BFD08A; --t4: #F6D873; --t5: #D5C3F7; --t6: #FFC9A8;
  --s1: #3366E0; --s2: #EE6436; --s3: #15A06E; --s4: #D99A00; --s5: #D9579A; --s-neutral: #A29EAA;
  --good: #17804A; --good-bg: #DDF1DF; --warn: #9A6200; --warn-bg: #FCEBC0; --crit: #C2302A; --crit-bg: #F9DCD8;
  --grid: #EBE2D3; --focus: #3366E0;
  --r-tile: 26px; --r-panel: 24px; --r-ctl: 12px;
  color-scheme: light;
}
html, body { background: var(--bg); }
body { color: var(--ink); }

/* ---------- impianto ---------- */
.app { grid-template-columns: 252px minmax(0, 1fr); gap: 0; padding: 14px 0 14px 14px; }
.side { border-radius: 28px; top: 14px; height: calc(100vh - 28px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #3A3942 transparent; padding: 24px 14px 18px; box-shadow: 0 10px 30px -18px rgba(22,21,27,.55); }
.main { padding-block: 22px 70px; padding-inline: clamp(16px, 2.6vw, 38px); gap: 24px; }
.head { padding-bottom: 2px; }
.eyebrow { color: var(--muted); }
.sub { color: var(--ink-2); }

/* ---------- barra laterale ---------- */
.nav3 .top { border-radius: 14px; }
.nav3 .top[aria-current="page"], .nav3 .top.open { background: var(--side-hi); }
.nav3 .subnav button { border-radius: 12px; }
.nav button[aria-current="page"] { background: var(--side-hi); color: #fff; box-shadow: inset 3px 0 0 var(--accent); }
.nav3 .top .num { background: #2E2D35; color: var(--side-ink); }
.nav3 .top[aria-current] .num, .nav3 .top.open .num { background: var(--accent); color: #fff; }

/* ---------- superfici ---------- */
.panel, #slimhost .panel { background: var(--surface); border: 1.25px solid var(--edge); border-radius: var(--r-panel); padding: 20px 22px; box-shadow: 0 1.5px 0 rgba(22,21,27,.05); }
.panel.dashed, #slimhost .panel.dashed { border: 1.5px dashed #CFC4B1; background: transparent; box-shadow: none; }
.panel-h p { color: var(--ink-2); }
h2 { letter-spacing: -0.015em; }

/* KPI: card pastello con forma decorativa */
.kpis { gap: 14px; }
.kpi { position: relative; overflow: hidden; isolation: isolate; border: 1.25px solid var(--edge); border-radius: var(--r-tile); padding: 18px 20px; min-height: 150px; background: var(--t1); color: var(--tile-ink); }
.kpis > .kpi:nth-child(4n+2), .mkgrid > .kpi:nth-child(4n+2) { background: var(--t4); }
.kpis > .kpi:nth-child(4n+3), .mkgrid > .kpi:nth-child(4n+3) { background: var(--t5); }
.kpis > .kpi:nth-child(4n+4), .mkgrid > .kpi:nth-child(4n+4) { background: var(--t3); }
.mkgrid > .kpi:nth-child(5n) { background: var(--t6); }
.kpi .lbl { color: var(--tile-ink); opacity: .82; font-weight: 650; }
.kpi .note { color: var(--tile-ink); opacity: .78; }
.kpi .big { position: relative; z-index: 1; }
.kpis > .kpi.hot, .kpi.hot { background: var(--accent); border-color: var(--edge); color: #fff; }
.kpi.hot .lbl, .kpi.hot .note { color: #fff; opacity: .92; }
.kpis > .kpi.inv, .kpi.inv { background: var(--ink); border-color: var(--ink); color: #F7F0E3; }
.kpi.inv .lbl, .kpi.inv .note { color: #F7F0E3; opacity: .8; }
.kpis > .kpi.crit-t, .kpi.crit-t { background: var(--t2); border-color: var(--edge); }
.kpi.crit-t .big { color: #A3201B; }
.kpi .chip { background: rgba(255,255,255,.7); }
.kpi.inv .chip { background: #2E2D35; color: #F7F0E3; }

/* forme decorative (croce, cuore, triangolo, stella) */
.kpi::after, .tile::after, #slimhost .card::after, .area::after, .phead::after, #slimhost .bphead::after, #slimhost .pick::after, #slimhost .simtile::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; width: 130px; height: 130px; right: -26px; top: -22px;
  background: currentColor; opacity: .09; transform: rotate(14deg);
  -webkit-mask: var(--shape) center / contain no-repeat; mask: var(--shape) center / contain no-repeat;
}
.kpi, .tile, #slimhost .card, .area, .phead, #slimhost .bphead, #slimhost .pick, #slimhost .simtile { --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M36 4h28v32h32v28H64v32H36V64H4V36h32z'/%3E%3C/svg%3E"); isolation: isolate; }
.kpis > .kpi:nth-child(4n+2), .tile:nth-child(4n+2), #slimhost .card:nth-child(4n+2), .area.a2, #slimhost .simtile:nth-child(4n+2) { --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 92C20 70 4 54 4 33 4 18 16 7 30 7c9 0 16 5 20 12 4-7 11-12 20-12 14 0 26 11 26 26 0 21-16 37-46 59z'/%3E%3C/svg%3E"); }
.kpis > .kpi:nth-child(4n+3), .tile:nth-child(4n+3), #slimhost .card:nth-child(4n+3), .area.a3, #slimhost .simtile:nth-child(4n+3) { --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M8 12h84L50 92z'/%3E%3C/svg%3E"); }
.kpis > .kpi:nth-child(4n+4), .tile:nth-child(4n+4), #slimhost .card:nth-child(4n+4), .phead::after, #slimhost .bphead, #slimhost .simtile:nth-child(4n+4) { --shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 2l9 25 24-12-8 26 24 9-24 9 8 26-24-12-9 25-9-25-24 12 8-26-24-9 24-9-8-26 24 12z'/%3E%3C/svg%3E"); }
.kpi.hot::after, .kpi.inv::after { opacity: .12; }
.phead::after, #slimhost .bphead::after { width: 220px; height: 220px; right: -30px; top: -50px; }
.area::after { width: 180px; height: 180px; right: -30px; top: -40px; }

/* tile progetto e card Slim */
.tile, #slimhost .card, #slimhost .pick { border: 1.25px solid var(--edge); border-radius: var(--r-tile); }
.tile.c1, #slimhost .card.c0 { background: var(--t1); } .tile.c2, #slimhost .card.c1 { background: var(--t6); } .tile.c3, #slimhost .card.c2 { background: var(--t3); } .tile.c4 { background: var(--t4); } .tile.c5 { background: var(--t2); }
.tile.new, #slimhost .tile.new { border: 1.5px dashed #CFC4B1; background: var(--soft); }
.tile.new::after { display: none; }
.tile .glyph { display: none; }

/* intestazioni colorate di progetto */
.phead, #slimhost .bphead { position: relative; overflow: hidden; border: 1.25px solid var(--edge); border-radius: 28px; }
#slimhost .bphead.c0, .phead.c1 { background: var(--t1); }
#slimhost .bphead { background: var(--t6); }

/* riquadri statistici dentro le card */
.stat, #slimhost .stat { background: var(--soft); border: 1px solid var(--line); border-radius: 16px; }
.secard .stats .stat { background: var(--soft); }
.sum .trio, .sumgrid .sum { border-radius: 18px; }

/* panoramica */
.area { position: relative; overflow: hidden; border: 1.25px solid var(--edge); border-radius: 28px; }
.area.a2 { background: var(--t1); }
.area.a3 { background: var(--t6); }
.hrow { background: rgba(255,253,248,.82); border: 1px solid rgba(22,21,27,.12); border-radius: 16px; }
.hrow:hover { background: #FFFDF8; border-color: var(--edge); }
.area .chart-empty { background: rgba(255,253,248,.6); border-color: rgba(22,21,27,.22); }
.secard .sec-h .num, .area-h .num { background: var(--ink); color: #fff; }

/* avvisi */
.ticker { border-radius: 22px; }
.banner { border-radius: 16px; }

/* ---------- controlli ---------- */
.btn { border-width: 1.25px; }
.btn:hover { background: #fff; }
.btn.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn.accent { border-color: var(--edge); }
.btn.ghost { border-color: #CDC2AF; background: rgba(255,253,248,.6); }
.icon-btn:hover { background: var(--surface-2); }
.chip { border-radius: 999px; }
.chip.neutral { background: var(--surface-2); }

/* schede come pillole (stile reference) */
.tabs, #slimhost .vtabs { border-bottom: 0; gap: 8px; }
.tabs button, #slimhost .vtabs button { border: 1.25px solid var(--edge); border-radius: 999px; padding: 8px 15px; margin: 0; color: var(--ink); background: var(--surface); font-size: 13.5px; }
.tabs button:hover, #slimhost .vtabs button:hover { background: #fff; }
.tabs button[aria-selected="true"], #slimhost .vtabs button[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
#slimhost .vtabs { background: var(--bg); padding: 8px 0; }
#slimhost .vtabs button span { background: var(--surface-2); color: var(--ink-2); }
#slimhost .vtabs button[aria-selected="true"] span { background: var(--accent); color: #fff; }
.seg, #slimhost .seg, #slimhost .chips { gap: 4px; }
.seg { background: var(--surface-2); border: 1px solid var(--line); }
.seg button[aria-pressed="true"], #slimhost .seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }
#slimhost .chips button { border-radius: 999px; }
#slimhost .chips button[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

/* campi */
.in, #slimhost .in { background: #FFFFFF; border: 1.25px solid #D9CFBE; border-radius: 12px; padding: 8px 10px; }
.in:hover, #slimhost .in:hover { border-color: #B9AE9A; }
.in:focus, #slimhost .in:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(238,100,54,.22); }
table.t .in { padding: 6px 8px; }
.field label, #slimhost .q label.ql { color: var(--ink); }
input[type=range] { accent-color: var(--accent); }

/* ---------- tabelle ---------- */
table.t th, table.t td { border-bottom: 1px solid var(--line); padding: 9px 10px; }
table.t thead th { color: var(--muted); border-bottom: 1.25px solid var(--edge); background: var(--surface); }
table.t tbody tr:hover td { background: var(--soft); }
table.t tr.sub td, table.t tr.sub .sticky { background: var(--surface-2); }
table.t tr.tot td { border-top: 1.25px solid var(--edge); }
.tbl-wrap { border-radius: 14px; }

/* ---------- grafici ---------- */
.chart text, #slimhost .chart text { fill: var(--muted); font-size: 11.5px; }
.chart .gl, #slimhost .chart .gl { stroke: var(--grid); stroke-dasharray: 3 5; stroke-linecap: round; }
.chart .zero, #slimhost .chart .zero { stroke: #8E897F; stroke-width: 1.2; }
.chart .lbl-strong, #slimhost .chart .strong { fill: var(--ink); font-weight: 700; }
.chart .xh, #slimhost .chart .xh { stroke: var(--ink); opacity: 0; }
.chart.hover .xh, #slimhost .chart.hover .xh { opacity: .5; }
.chart-empty { background: var(--soft); border-color: #D6CCBA; border-radius: 18px; }
.legend i, #slimhost .legend i { border-radius: 999px; }
.tip { background: var(--ink); color: #fff; border-radius: 14px; box-shadow: 0 12px 28px -12px rgba(22,21,27,.6); }
.dleg li i { border-radius: 4px; }

/* ---------- Venture / Launch ---------- */
#slimhost .risposta { border: 1.25px solid var(--edge); border-radius: 22px; }
#slimhost .risposta.good { background: #DFF2DF; }
#slimhost .risposta.warn { background: #FCEBC0; }
#slimhost .risposta.bad, #slimhost .risposta.crit { background: #F9DCD8; }
#slimhost .simtile { position: relative; overflow: hidden; border: 1.25px solid var(--edge); }
#slimhost .simtile.k3 { background: var(--soft); }
#slimhost .sliders, #slimhost .sls { background: var(--soft); border: 1px solid var(--line); border-radius: 20px; }
#slimhost .model, #slimhost .opt, #slimhost .wtype { border-radius: 18px; }
#slimhost .model[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
#slimhost .progress button.cur { color: var(--ink); }
#slimhost .progress button.on i, #slimhost .progress button.cur i { background: var(--ink); }
#slimhost .block { border-radius: 20px; }
#slimhost details.adv { border-radius: 18px; }
#slimhost .formula, .formula-p { border-radius: 16px; }

/* toast: uno solo visibile, sopra gli altri */
.toast { box-shadow: 0 12px 30px -12px rgba(22,21,27,.6); }

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  .app { grid-template-columns: 232px minmax(0, 1fr); }
}

/* ---------- mobile ---------- */
@media (max-width: 860px) {
  .app { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .side { position: sticky; top: 0; height: auto; max-height: none; overflow: visible; border-radius: 0 0 22px 22px; padding: 12px 14px 10px; gap: 8px; box-shadow: 0 8px 20px -14px rgba(22,21,27,.6); }
  .brand svg { width: 26px; height: 26px; }
  .brand b { font-size: 15px; }
  .side { position: sticky; }
  .side-foot { position: absolute; top: 12px; right: 14px; }
  .nav3 { gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .nav3::-webkit-scrollbar { display: none; }
  .nav3 .top { flex: none; border: 1px solid #3A3942; border-radius: 999px; }
  .nav3 .top[aria-current="page"], .nav3 .top.open { background: var(--accent); border-color: var(--accent); color: #fff; }
  .main { padding: 16px 16px 60px; gap: 18px; }
  .msub { background: var(--surface); border: 1.25px solid var(--edge); border-radius: 18px; padding: 10px 12px; }
  .panel, #slimhost .panel { padding: 16px; border-radius: 20px; }
  .kpi { min-height: 0; padding: 16px; }
  .kpi::after { width: 96px; height: 96px; }
  .tabs, #slimhost .vtabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tabs button, #slimhost .vtabs button { flex: none; white-space: nowrap; }
  .head .actions { width: 100%; }
  .head .actions .btn { flex: 1 1 auto; justify-content: center; }
  .area-h { flex-wrap: wrap; }
  #slimhost .simgrid { grid-template-columns: minmax(0, 1fr); }
  #slimhost .simtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi { padding: 14px; gap: 6px; border-radius: 20px; }
  .kpi .big { font-size: 25px; }
  .kpi .lbl { font-size: 12px; }
  .kpi .note { font-size: 11.5px; }
  h1 { font-size: 32px; }
  .phead::after, #slimhost .bphead::after { width: 150px; height: 150px; }
  table.t { font-size: 13px; }
}
@media (max-width: 380px) {
  .kpis { grid-template-columns: minmax(0, 1fr); }
}

/* KPI del modulo Venture/Launch: stessa famiglia pastello, più compatti */
#slimhost .kpi { position: relative; overflow: hidden; isolation: isolate; min-height: 0; border: 1.25px solid var(--edge); border-radius: 20px; background: var(--t1); color: var(--tile-ink); }
#slimhost .kpis > .kpi:nth-child(4n+2), .mkgrid > .kpi:nth-child(4n+2) { background: var(--t4); }
#slimhost .kpis > .kpi:nth-child(4n+3), .mkgrid > .kpi:nth-child(4n+3) { background: var(--t5); }
#slimhost .kpis > .kpi:nth-child(4n+4), .mkgrid > .kpi:nth-child(4n+4) { background: var(--t3); }
.mkgrid > .kpi:nth-child(5n) { background: var(--t6); }
#slimhost .kpi span, #slimhost .kpi small { color: var(--tile-ink); opacity: .8; }
#slimhost .kpi::after { width: 90px; height: 90px; right: -18px; top: -16px; }

/* panoramica: il primo blocco non è una card */
.area.a1 { border: 0; background: transparent; padding: 0; overflow: visible; border-radius: 0; }
.area.a1::after { display: none; }

/* etichette dei campi: solo su telefono */
#slimhost .mlab { display: none; }
@media (max-width: 760px) {
  #slimhost .prow.lab2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; row-gap: 3px; column-gap: 8px; }
  #slimhost .prow.lab2 > * { order: var(--o, 0); }
  #slimhost .prow.lab2 > :first-child { grid-column: 1 / -1; }
  #slimhost .prow.lab2 .mlab { display: block; font-size: 10.5px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-top: 6px; line-height: 1.2; align-self: end; }
  #slimhost .prow.lab2 > .icon { justify-self: end; grid-column: 2; }
  #slimhost .rows .prow.lab2 + .prow.lab2 { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
}
.mkgrid > .kpi.hot { background: var(--accent); color: #fff; }
.mkgrid > .kpi.inv { background: var(--ink); color: #F7F0E3; }
.mkgrid > .kpi.crit-t { background: var(--t2); }