/* Volverai — token e stili condivisi per login.html e volverai.html */
:root{
  --bg: #0a0712;
  --bg-alt: #130b20;
  --surface: #170f28;
  --surface-2: #1c1330;
  --surface-3: #241a3a;
  --border: rgba(163,122,255,0.16);
  --border-strong: rgba(163,122,255,0.32);
  --fg: #f1ecfb;
  --fg-muted: #a89bc7;
  --fg-faint: #6f6390;
  --purple: #9b6bff;
  --purple-deep: #5b2e8c;
  --purple-glow: rgba(155,107,255,0.35);
  --bronze: #d3a94a;
  --bronze-soft: #ecd8a0;
  --blue: #5b8dff;
  --magenta: #d15fc4;
  --teal: #4cc9b0;
  --error: #e2685f;
  --radius: 14px;
  --shadow-lg: 0 30px 80px -20px rgba(91,46,140,0.45);
}

*{ box-sizing: border-box; }
html, body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--fg);
  font-family: 'Inter', sans-serif;
  line-height:1.5;
  -webkit-font-smoothing: antialiased;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }
input{ font-family:inherit; }
code{ font-family:'JetBrains Mono', monospace; }

.bg-canvas{
  position: fixed; inset:0; z-index:-2;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(155,107,255,0.20), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(211,169,74,0.10), transparent 60%),
    radial-gradient(ellipse 800px 600px at 50% 100%, rgba(91,46,140,0.18), transparent 60%),
    var(--bg);
}
.bg-canvas::before{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(163,122,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(163,122,255,0.05) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, black, transparent 80%);
}

/* ---------- Language switcher (shared) ---------- */
.lang-switch{ position:relative; }
.lang-toggle{
  display:flex; align-items:center; gap:6px; background: var(--surface); border:1px solid var(--border-strong);
  color: var(--fg); padding:8px 12px; border-radius:999px; cursor:pointer; font-size:0.85rem;
}
.lang-toggle i{ font-size:0.7rem; color: var(--fg-muted); }
.lang-menu{
  display:none; position:absolute; top: calc(100% + 8px); right:0; background: var(--surface-2);
  border:1px solid var(--border-strong); border-radius:12px; padding:6px; min-width:170px; z-index:50;
  box-shadow: var(--shadow-lg);
}
.lang-menu.open{ display:block; }
.lang-option{
  display:flex; align-items:center; gap:10px; width:100%; background:none; border:none; color: var(--fg-muted);
  padding:9px 10px; border-radius:8px; cursor:pointer; font-size:0.88rem; text-align:left;
}
.lang-option:hover{ background: var(--surface-3); color: var(--fg); }
.lang-option.active{ color: var(--purple); font-weight:600; }
.lang-option .flag{ font-size:1rem; }
.lang-option .code{ margin-left:auto; font-family:'JetBrains Mono', monospace; font-size:0.72rem; color: var(--fg-faint); }

/* ---------- Buttons ---------- */
.btn-main, .btn-outline{
  display:inline-flex; align-items:center; justify-content:center; gap:9px; padding: 13px 22px; border-radius: 10px;
  font-weight:600; font-size:0.95rem; border:none; cursor:pointer; transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}
.btn-main{ background: linear-gradient(135deg, var(--purple), var(--purple-deep)); color:#fff; box-shadow: 0 10px 30px -8px var(--purple-glow); width:100%; }
.btn-main:hover{ transform: translateY(-1px); box-shadow: 0 14px 36px -8px var(--purple-glow); }
.btn-main:disabled{ opacity:0.6; cursor:progress; transform:none; }
.btn-outline{ background:transparent; border:1px solid var(--border-strong); color: var(--fg); }
.btn-outline:hover{ background: var(--surface); border-color: var(--purple); }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}