/* ============================================================
   MeshIT — design system ereditato da Sizely (Sparks3D.it)
   Font Geist serviti localmente. Nessuna risorsa esterna.
   ============================================================ */

/* ---- Font locali ---- */
@font-face { font-family:"Geist Sans"; font-style:normal; font-display:swap; font-weight:300; src:url(./fonts/geist-sans-300.woff2) format("woff2"); }
@font-face { font-family:"Geist Sans"; font-style:normal; font-display:swap; font-weight:400; src:url(./fonts/geist-sans-400.woff2) format("woff2"); }
@font-face { font-family:"Geist Sans"; font-style:normal; font-display:swap; font-weight:500; src:url(./fonts/geist-sans-500.woff2) format("woff2"); }
@font-face { font-family:"Geist Sans"; font-style:normal; font-display:swap; font-weight:600; src:url(./fonts/geist-sans-600.woff2) format("woff2"); }
@font-face { font-family:"Geist Mono"; font-style:normal; font-display:swap; font-weight:400; src:url(./fonts/geist-mono-400.woff2) format("woff2"); }

:root {
  --bg-base:#0a0a0a; --bg-surface:#121212; --bg-elevated:#181818; --bg-hover:#1f1f1f;
  --border-subtle:#1c1c1c; --border-line:#262626; --border-strong:#333333;
  --text-primary:#fafafa; --text-secondary:#a8a8a8; --text-muted:#6e6e6e; --text-dim:#4a4a4a;
  --accent:#ff6a1f; --accent-bright:#ff8540; --accent-soft:rgba(255,106,31,.12); --accent-glow:rgba(255,106,31,.25);
  --cta-premium:#facc15; --cta-premium-hover:#fcd34d; --cta-premium-text:#1a1300;
  --success:#22c55e; --error:#ef4444; --warning:#f59e0b;
  --grid-line:rgba(255,255,255,.035); --grid-line-major:rgba(255,255,255,.07);
  --font-sans:"Geist Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --fs-xs:11px; --fs-sm:12px; --fs-base:13px; --fs-md:14px; --fs-lg:16px; --fs-xl:20px; --fs-2xl:28px;
  --lh-tight:1.15; --lh-normal:1.45; --lh-relaxed:1.6;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:28px; --sp-7:40px; --sp-8:56px;
  --r-sm:4px; --r-md:6px; --r-lg:10px; --r-pill:999px;
  --header-h:56px; --footer-h:32px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 4px 12px rgba(0,0,0,.5); --shadow-accent:0 0 24px var(--accent-glow);
  --ease-out:cubic-bezier(.16,1,.3,1); --dur-fast:.12s; --dur-base:.2s; --dur-slow:.4s;
}

* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; }
body {
  font-family:var(--font-sans); font-size:var(--fs-base); line-height:var(--lh-normal);
  background:var(--bg-base); color:var(--text-primary); overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
.mono { font-family:var(--font-mono); }
button { font-family:inherit; }

.app-shell {
  display:grid;
  grid-template-rows:var(--header-h) 1fr var(--footer-h);
  height:100vh;
}

/* ---------- HEADER ---------- */
.header {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--sp-4); border-bottom:1px solid var(--border-line);
  background:var(--bg-surface); z-index:20;
}
.header-left { display:flex; align-items:center; gap:var(--sp-3); }
.logo { display:flex; align-items:center; gap:var(--sp-2); color:var(--text-primary); text-decoration:none; }
.logo .glyph { color:var(--accent); }
.wordmark { font-weight:600; font-size:var(--fs-lg); letter-spacing:-.01em; }
.wordmark-it { color:var(--accent); }
.badge {
  display:inline-flex; align-items:center; font-family:var(--font-mono);
  font-size:10px; font-weight:500; line-height:1; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-soft);
  border:1px solid var(--accent); border-radius:var(--r-sm);
  padding:3px var(--sp-2);
}
.header-right { display:flex; align-items:center; gap:var(--sp-3); }
.tri-stat { font-size:var(--fs-xs); color:var(--text-muted); }
.tri-stat b { color:var(--accent); font-weight:400; }

.lang-switch {
  display:inline-flex; align-items:stretch; overflow:hidden; line-height:1;
  border:1px solid var(--border-line); border-radius:var(--r-sm);
  background:var(--bg-elevated); font-family:var(--font-mono);
}
.lang-btn {
  display:inline-flex; align-items:center; justify-content:center; min-width:28px;
  background:transparent; border:none; color:var(--text-muted);
  font-size:10px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  padding:4px var(--sp-2); cursor:pointer;
  transition:color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.lang-btn:hover:not(.active) { color:var(--text-primary); background:var(--bg-hover); }
.lang-btn.active { color:var(--accent); background:var(--accent-soft); }
.lang-btn + .lang-btn { border-left:1px solid var(--border-line); }

.icon-btn {
  display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px;
  background:transparent; border:none; border-radius:var(--r-md);
  color:var(--text-secondary); cursor:pointer;
  transition:color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.icon-btn:hover { color:var(--text-primary); background:var(--bg-hover); }
.icon-btn:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.icon-btn svg { width:18px; height:18px; stroke-width:1.75; }

/* ---------- MAIN LAYOUT ---------- */
.app-main { display:grid; grid-template-columns:300px 1fr 280px; overflow:hidden; }

.panel {
  background:var(--bg-surface); overflow-y:auto; padding:var(--sp-4);
}
.panel-left { border-right:1px solid var(--border-line); }
.panel-right { border-left:1px solid var(--border-line); }
.panel::-webkit-scrollbar { width:8px; }
.panel::-webkit-scrollbar-thumb { background:var(--border-line); border-radius:4px; }
.panel::-webkit-scrollbar-track { background:transparent; }

.section { margin-bottom:var(--sp-6); }
.section-title {
  font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.08em;
  color:var(--text-muted); font-weight:500; margin-bottom:var(--sp-3);
  display:flex; align-items:center; gap:var(--sp-2);
}
.section-title::before { content:""; width:3px; height:11px; border-radius:2px; background:var(--accent); }

/* ---------- DROPZONE ---------- */
.dropzone {
  border:1px dashed var(--border-strong); border-radius:var(--r-lg);
  padding:var(--sp-6) var(--sp-4); text-align:center; cursor:pointer;
  background:var(--bg-elevated); transition:all var(--dur-base) var(--ease-out);
}
.dropzone.compact { padding:var(--sp-4); }
.dropzone:hover,.dropzone.over { border-color:var(--accent); background:var(--accent-soft); }
.dropzone:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.icon-stack { color:var(--accent); margin-bottom:var(--sp-2); display:flex; justify-content:center; }
.dz-title { font-size:var(--fs-base); font-weight:500; color:var(--text-primary); }
.dz-title.sm { font-size:var(--fs-sm); }
.dz-sub { font-size:var(--fs-sm); color:var(--text-secondary); margin-top:2px; }
.dz-meta { font-size:var(--fs-xs); color:var(--text-muted); margin-top:var(--sp-2); letter-spacing:.03em; }

/* ---------- TEXTURE GRID ---------- */
.tex-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-2); }
.tex {
  aspect-ratio:1; border-radius:var(--r-md); border:1px solid var(--border-line);
  cursor:pointer; overflow:hidden; position:relative; background:#000;
  transition:all var(--dur-fast) var(--ease-out);
}
.tex:hover { border-color:var(--accent-bright); transform:translateY(-1px); }
.tex.active { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent),var(--shadow-accent); }
.tex canvas { width:100%; height:100%; display:block; }
.tex .label {
  position:absolute; inset:auto 0 0 0; font-family:var(--font-mono); font-size:9px;
  text-align:center; background:rgba(10,10,10,.82); padding:2px 0; color:var(--text-secondary);
}

/* ---------- FIELDS / SLIDERS ---------- */
.field { margin-bottom:var(--sp-4); }
.field label {
  display:flex; justify-content:space-between; align-items:center;
  font-size:var(--fs-sm); color:var(--text-secondary); margin-bottom:var(--sp-2);
}
.field label b { color:var(--text-primary); font-weight:400; }
input[type=range] {
  -webkit-appearance:none; appearance:none; width:100%; height:3px;
  border-radius:2px; background:var(--border-strong); outline:none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; width:14px; height:14px; border-radius:50%;
  background:var(--accent); cursor:pointer; box-shadow:0 0 8px var(--accent-glow);
  transition:transform var(--dur-fast) var(--ease-out);
}
input[type=range]::-webkit-slider-thumb:hover { transform:scale(1.18); }
input[type=range]::-moz-range-thumb {
  width:14px; height:14px; border:none; border-radius:50%; background:var(--accent); cursor:pointer;
}

/* ---------- SEGMENTED ---------- */
.seg { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-1); }
.seg button {
  font-size:var(--fs-sm); padding:var(--sp-2); background:var(--bg-elevated);
  border:1px solid var(--border-line); color:var(--text-secondary); border-radius:var(--r-md);
  cursor:pointer; transition:all var(--dur-fast) var(--ease-out);
}
.seg button:hover { color:var(--text-primary); border-color:var(--border-strong); }
.seg button.active { background:var(--accent); border-color:var(--accent); color:#fff; }

/* ---------- BUTTONS ---------- */
.btn {
  width:100%; font-size:var(--fs-base); font-weight:500; padding:11px;
  border-radius:var(--r-md); cursor:pointer; border:none; margin-bottom:var(--sp-2);
  display:flex; align-items:center; justify-content:center; gap:var(--sp-2);
  transition:all var(--dur-fast) var(--ease-out);
}
.btn-primary { background:var(--accent); color:#fff; box-shadow:var(--shadow-accent); }
.btn-primary:hover:not(:disabled) { background:var(--accent-bright); transform:translateY(-1px); }
.btn-primary:disabled { opacity:.35; cursor:not-allowed; box-shadow:none; }
.btn-ghost { background:var(--bg-elevated); border:1px solid var(--border-line); color:var(--text-primary); }
.btn-ghost:hover:not(:disabled) { border-color:var(--border-strong); background:var(--bg-hover); }
.btn-ghost:disabled { opacity:.35; cursor:not-allowed; }

/* ---------- INFO ROWS ---------- */
.info-rows { font-size:var(--fs-sm); margin-top:var(--sp-3); }
.info-rows div { display:flex; justify-content:space-between; padding:var(--sp-2) 0; border-bottom:1px solid var(--border-subtle); }
.info-rows div span { color:var(--text-muted); }
.info-rows div b { color:var(--text-secondary); font-weight:400; }

/* ---------- VIEWPORT ---------- */
.viewport { position:relative; background:var(--bg-base); overflow:hidden; }
.scene-host { position:absolute; inset:0; }
.scene-host canvas { width:100%; height:100%; display:block; }
.depth-veil { position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 50% 38%, transparent 55%, rgba(0,0,0,.55) 100%); }
.vp-overlay { position:absolute; top:var(--sp-4); left:var(--sp-4); display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.chip {
  font-size:var(--fs-xs); padding:5px 10px; background:rgba(18,18,18,.8);
  border:1px solid var(--border-line); border-radius:var(--r-pill);
  backdrop-filter:blur(8px); color:var(--text-muted);
}
.chip b { color:var(--accent); font-weight:400; }
.vp-hint {
  position:absolute; bottom:var(--sp-4); left:50%; transform:translateX(-50%);
  font-size:var(--fs-xs); color:var(--text-muted); background:rgba(18,18,18,.7);
  padding:5px 12px; border:1px solid var(--border-line); border-radius:var(--r-pill); backdrop-filter:blur(8px);
}
.empty-state {
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--sp-3); text-align:center; padding:var(--sp-7); color:var(--text-muted); pointer-events:none;
}
.empty-state h3 { color:var(--text-primary); font-weight:500; font-size:var(--fs-lg); }
.empty-state p { max-width:300px; font-size:var(--fs-base); color:var(--text-secondary); }

/* ---------- FOOTER ---------- */
.footer {
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--sp-4);
  padding:0 var(--sp-4); border-top:1px solid var(--border-line); background:var(--bg-surface);
  font-size:var(--fs-xs);
}
.footer-left { justify-self:start; }
.footer-right { justify-self:end; display:flex; align-items:center; gap:var(--sp-4); }
.license-link { color:var(--text-dim); text-decoration:none; letter-spacing:.04em; transition:color var(--dur-fast) var(--ease-out); }
.license-link:hover { color:var(--accent); }
.footer-hint { color:var(--text-dim); letter-spacing:.04em; }
.donate-block { justify-self:center; display:flex; align-items:center; gap:var(--sp-2); }
.donate-text { color:var(--text-muted); }
.bmc-link {
  display:inline-flex; align-items:center; gap:6px; color:var(--cta-premium);
  text-decoration:none; font-weight:500; transition:color var(--dur-fast) var(--ease-out);
}
.bmc-link:hover { color:var(--cta-premium-hover); }
.footer-sig { display:flex; align-items:center; gap:6px; }
.sig-prefix { color:var(--text-dim); font-family:var(--font-mono); letter-spacing:.06em; }
.sig-mark { color:var(--text-secondary); text-decoration:none; font-family:var(--font-mono); font-weight:500; letter-spacing:.04em; }
.sig-mark:hover { color:var(--accent); }

/* ---------- TOAST ---------- */
.toast {
  position:fixed; bottom:calc(var(--footer-h) + var(--sp-4)); right:var(--sp-4);
  background:var(--bg-elevated); border:1px solid var(--border-line); border-left:3px solid var(--accent);
  padding:10px 16px; border-radius:var(--r-md); font-size:var(--fs-sm); color:var(--text-primary);
  transform:translateY(80px); opacity:0; transition:all var(--dur-base) var(--ease-out); z-index:100; box-shadow:var(--shadow-md);
}
.toast.show { transform:translateY(0); opacity:1; }
.toast.ok { border-left-color:var(--success); }

/* ---------- MODALE LICENZA ---------- */
.modal { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:var(--sp-4); }
.modal[hidden] { display:none; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.66); backdrop-filter:blur(2px); animation:fade var(--dur-fast) var(--ease-out); }
.modal-card {
  position:relative; display:flex; flex-direction:column; width:min(680px,100%); max-height:min(80vh,720px);
  background:var(--bg-elevated); border:1px solid var(--border-line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-md); overflow:hidden; animation:pop var(--dur-base) var(--ease-out);
}
.modal-head {
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--border-line); background:var(--bg-surface);
}
.modal-head h2 { font-size:var(--fs-lg); font-weight:600; letter-spacing:-.01em; color:var(--text-primary); }
.modal-body { padding:var(--sp-4); overflow-y:auto; }
.license-intro { color:var(--text-secondary); font-size:var(--fs-base); line-height:1.55; }
.license-required {
  margin-top:var(--sp-3); padding:var(--sp-3); border-radius:var(--r-md);
  background:var(--bg-surface); border:1px solid var(--border-line);
  font-size:var(--fs-sm); color:var(--text-secondary); line-height:1.5;
}
.license-required b { color:var(--accent); }
.license-required a { color:var(--text-primary); text-decoration:none; }
.license-required a:hover { color:var(--accent); }
.license-binding { margin-top:var(--sp-3); color:var(--text-dim); font-size:var(--fs-xs); letter-spacing:.03em; text-transform:uppercase; }
.license-text {
  margin-top:var(--sp-2); padding:var(--sp-3); border-radius:var(--r-md);
  background:var(--bg-base); border:1px solid var(--border-line);
  font-size:var(--fs-xs); line-height:1.55; color:var(--text-secondary);
  white-space:pre-wrap; word-break:break-word; max-height:42vh; overflow-y:auto;
}
.help-h { margin-top:var(--sp-4); margin-bottom:var(--sp-2); font-size:var(--fs-md); font-weight:600; color:var(--text-primary); }
.help-h:first-of-type { margin-top:var(--sp-3); }
.help-p { color:var(--text-secondary); font-size:var(--fs-base); line-height:1.55; }
.help-steps { margin:0; padding-left:1.3em; color:var(--text-secondary); font-size:var(--fs-base); line-height:1.6; }
.help-steps li { margin-bottom:var(--sp-1); }
.help-steps li::marker { color:var(--accent); }
.help-contact { margin-top:var(--sp-2); }
.btn-sm { display:inline-flex; width:auto; padding:7px 14px; font-size:var(--fs-sm); margin-bottom:0; }
.contact-email { color:var(--accent); text-decoration:none; font-family:var(--font-mono); font-size:var(--fs-base); }
.contact-email:hover { color:var(--accent-bright); text-decoration:underline; }
@keyframes fade { from { opacity:0; } to { opacity:1; } }
@keyframes pop { from { opacity:0; transform:translateY(12px) scale(.98); } to { opacity:1; transform:none; } }

.spin { width:14px; height:14px; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:spin .7s linear infinite; display:inline-block; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ---------- LANDING ---------- */
body.landing-page { overflow:hidden auto; height:auto; min-height:100vh; display:flex; flex-direction:column; }
.header-landing { flex:0 0 auto; height:var(--header-h); }
.footer-landing { flex:0 0 auto; height:var(--footer-h); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--sp-4); }
.footer-landing .footer-sig { justify-self:end; }

.landing {
  flex:1 0 auto; display:flex; flex-direction:column; align-items:center;
  padding:var(--sp-8) var(--sp-5); gap:var(--sp-8);
  background:radial-gradient(ellipse 80% 50% at 50% 0%, var(--accent-soft) 0%, transparent 60%), var(--bg-base);
}
.hero { display:flex; flex-direction:column; align-items:center; text-align:center; width:100%; gap:var(--sp-4); }
.hero-glyph { color:var(--accent); filter:drop-shadow(0 0 24px var(--accent-glow)); margin-bottom:var(--sp-2); }
.slogan {
  font-size:clamp(22px,3.8vw,40px); font-weight:600; line-height:1.12; letter-spacing:-.02em;
  color:var(--text-primary); margin:0; max-width:760px;
}
.lede { font-size:var(--fs-lg); color:var(--text-secondary); line-height:var(--lh-relaxed); max-width:620px; margin:0; }
.cta {
  display:inline-flex; align-items:center; gap:var(--sp-2); margin-top:var(--sp-4);
  padding:14px 28px; background:var(--accent); color:var(--bg-base);
  font-size:var(--fs-md); font-weight:600; letter-spacing:.01em; text-decoration:none;
  border-radius:var(--r-pill); box-shadow:var(--shadow-accent);
  transition:background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.cta:hover { background:var(--accent-bright); transform:translateY(-1px); box-shadow:0 0 36px var(--accent-glow); }
.cta:active { transform:translateY(0); }
.compat {
  margin:var(--sp-3) 0 0; font-size:var(--fs-base); font-family:var(--font-mono);
  letter-spacing:.08em; text-transform:uppercase; color:var(--text-primary);
}
.cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-4); width:100%; max-width:1080px; }
.card {
  display:flex; flex-direction:column; gap:var(--sp-3); padding:var(--sp-6) var(--sp-5);
  background:var(--bg-surface); border:1px solid var(--border-line); border-radius:var(--r-lg);
  transition:border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.card:hover { border-color:var(--border-strong); transform:translateY(-2px); }
.card-icon {
  display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px;
  border-radius:var(--r-md); background:var(--accent-soft); color:var(--accent);
}
.card-title { font-size:var(--fs-xs); font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); margin:0; }
.card-body { font-size:var(--fs-md); color:var(--text-primary); line-height:var(--lh-relaxed); margin:0; }

@media (max-width:820px) {
  .cards { grid-template-columns:1fr; max-width:480px; }
  .landing { padding:var(--sp-7) var(--sp-4); gap:var(--sp-7); }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px) {
  .app-main { grid-template-columns:1fr; grid-template-rows:auto 1fr auto; }
  .panel { max-height:30vh; }
  .footer { grid-template-columns:1fr; justify-items:center; gap:var(--sp-1); }
  .footer-left, .footer-right { justify-self:center; }
  .footer-right { flex-wrap:wrap; justify-content:center; }
}