:root{
  --bg: radial-gradient(1200px 800px at -10% -10%, #0a2a26, transparent 60%),
        radial-gradient(1000px 700px at 120% 0%, #0d3a3233, transparent 60%),
        linear-gradient(160deg, #0b1f1d, #0f2d2a 60%, #0b1f1d);
  --panel: rgba(12, 27, 25, 0.75);
  --border: rgba(255,255,255,0.08);
  --ink:#edfff9; --muted:#b7d9cf;
  --accent:#2dd4bf; --good:#22c55e; --bad:#ef4444;
  --saved:#ffd166; --saved-stroke:#7a5a00;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
}

/* Header compatto */
.app-header.centered{
  position:relative; padding:12px 12px 8px; text-align:center;
  border-bottom:1px solid var(--border);
}
.lang-switch{
  position:absolute; right:12px; top:12px;
  background:linear-gradient(90deg,#22c55e,#2dd4bf,#3b82f6);
  background-size:200% 100%;
  color:#00231d; border:none; border-radius:8px; padding:8px 10px; cursor:pointer;
  font-weight:800; text-shadow:0 0 3px #aefce7; box-shadow:0 0 8px rgba(45,212,191,.6);
  transition:all .2s ease;
}
.lang-switch:hover{ background-position:100% 0; filter:brightness(1.06); }

h1{
  margin:0 0 4px; font-size:clamp(20px, 2vw, 30px);
  color:#aefce7; text-shadow:0 0 6px #14b8a6, 0 0 12px #0ff;
}
.subtitle{ margin:0; color:var(--muted); font-size:clamp(12px,1.3vw,14px); }

/* Pannelli compatti */
.panel{
  background:var(--panel); border:1px solid var(--border);
  border-radius:12px; padding:10px 12px;
  backdrop-filter:blur(10px) saturate(120%);
  -webkit-backdrop-filter:blur(10px) saturate(120%);
  box-shadow:0 0 8px rgba(45,212,191,.22);
}
.top-explain .formula-details summary{ cursor:pointer; color:#aefce7; margin-bottom:4px; }
.top-explain .formula{ background:#071b19; border:1px solid var(--border); border-radius:8px; padding:8px; }
.pretty-math math{ font-size:1.02rem; color:#d8fff4; }

/* Griglia densa */
.app-grid{
  display:grid; gap:12px; padding:12px;
  grid-template-columns:320px 1fr 1fr;
}

/* Canvas */
.canvas-wrap{ width:100%; }
#scatter, #bars{ width:100%; display:block; background:transparent; }

/* Controlli */
.controls .control{ margin:8px 0 10px; }
.controls .control.row{ display:flex; align-items:center; gap:8px; }
.controls input[type="range"]{ width:100%; accent-color: var(--accent); }
.controls select{
  width:100%; padding:6px; background:#0e2220; color:var(--ink);
  border:1px solid var(--border); border-radius:6px;
}

/* Bottoni compatti */
.buttons{ display:flex; gap:6px; flex-wrap:wrap; margin-top:8px; }
button{
  background: linear-gradient(90deg,#22c55e,#2dd4bf,#3b82f6);
  background-size:200% 100%;
  color:#fff; border:none; border-radius:8px; padding:8px 12px; cursor:pointer;
  font-weight:700; text-shadow:0 0 4px #000;
  box-shadow:0 0 8px rgba(34,197,94,.5), 0 0 12px rgba(45,212,191,.45);
  transition:all .2s ease-in-out;
}
button:hover{
  background-position:100% 0;
  box-shadow:0 0 12px rgba(255,209,102,.8), 0 0 16px rgba(255,209,102,.5);
  transform: translateY(-1px);
}

/* Legenda */
.legend{
  display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center;
  color:var(--muted); font-size:.9rem; margin-top:6px;
}
.legend .dot.you, .legend .dot.saved{ width:12px; height:12px; border-radius:50%; display:inline-block; }
.legend .dot.you{ background:var(--good); border:1px solid #095a2b; box-shadow:0 0 6px rgba(34,197,94,.6); }
.legend .dot.saved{ background:var(--saved); border:1px solid var(--saved-stroke); box-shadow:0 0 6px rgba(255,209,102,.7); }
.legend .line{ display:inline-block; width:28px; height:0; border-top:2px solid var(--accent); box-shadow:0 0 6px rgba(45,212,191,.6); }

/* Prezzo */
.price{ font-size:clamp(20px, 3vw, 32px); font-weight:800; margin:6px 0 10px; }

/* Tooltip */
.tooltip{
  position:absolute; z-index:9999;
  background: rgba(5,22,20,.98); color: var(--ink);
  border:1px solid var(--accent); border-radius:8px;
  padding:6px 10px; font-size:12px; line-height:1.3;
  pointer-events:none;
  box-shadow:0 0 10px rgba(45,212,191,.7), 0 0 18px rgba(255,209,102,.45);
}
.tooltip.hidden{ display:none; }

/* Breakpoints */
@media (max-width:1280px){
  .app-grid{ grid-template-columns: 1fr 1fr; gap:12px; }
}
@media (max-width:820px){
  .app-grid{ grid-template-columns: 1fr; }
}