/*
 * Pagine di caricamento e di eliminazione dell'account (ARCHITECTURE §2.5, «Sito»): stessi token e
 * stesso linguaggio delle altre pagine della landing (docs/design_tokens.json, solo tema dark), font
 * locali, nessuna risorsa di terzi. Foglio servito da file: la CSP delle quattro pagine non ammette
 * stili in linea, e JavaScript imposta solo proprietà singole (la larghezza della barra no: è un
 * <progress>).
 *
 * Accessibilità (contratto): bordi di campi, caselle e controlli almeno rgba(255,255,255,.40)
 * (3,8:1 sul fondo); testi di aiuto e segnaposto mai sotto --text-50 (qui --text-60 sulle card);
 * errore con colore, icona e prefisso «Errore:»; aree cliccabili di almeno 44×44 px; forced-colors
 * e prefers-reduced-motion.
 */
:root {
  --bg: #0A0A0D;
  --surface: #15151B;
  --surface-alt: #16161C;
  --surface-deep: #101015;
  --text: #F5F5F7;
  --text-80: rgba(245, 245, 247, .8);
  --text-70: rgba(245, 245, 247, .7);
  --text-60: rgba(245, 245, 247, .6);
  --text-50: rgba(245, 245, 247, .5);
  --border-06: rgba(255, 255, 255, .06);
  --border-08: rgba(255, 255, 255, .08);
  --border-14: rgba(255, 255, 255, .14);
  --control-border: rgba(255, 255, 255, .40);
  --lime: #C6FF3D;
  --magenta: #FF3DA5;
  --violet: #8B5CFF;
  --cyan: #3DE0FF;
  --amber: #FFB23D;
  --on-accent: #0A0A0D;
  --error: #FF5CB4;
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --gutter: clamp(16px, 4vw, 32px);
  color-scheme: dark;
}

@font-face { font-family: 'Archivo'; src: url('/fonts/Archivo-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('/fonts/Archivo-SemiBold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('/fonts/Archivo-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('/fonts/SpaceGrotesk-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Space Grotesk'; src: url('/fonts/SpaceGrotesk-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }

[hidden] { display: none !important; }
html { background: var(--bg); }
body {
  margin: 0;
  padding-inline: var(--gutter);
  background: radial-gradient(ellipse 80% 520px at 50% 0, rgba(139, 92, 255, .18), transparent 70%) no-repeat, var(--bg);
  color: var(--text);
  font: 400 16px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
.wrap { max-width: 1120px; margin-inline: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 6px; }
strong { color: var(--text); font-weight: 700; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Testata (come le pagine legali) ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 20px; }
.wordmark {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 700 26px/1 var(--font-display); letter-spacing: -1px; text-decoration: none;
}
.wordmark i { font-style: normal; color: var(--lime); }
.home-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border-radius: 999px; background: var(--surface-alt); border: 1px solid var(--border-14);
  font: 700 13px/1 var(--font-body); color: var(--text-80); text-decoration: none;
}
.home-link:hover { color: var(--text); }
.test-strip {
  box-sizing: border-box; margin-block: 0 8px; padding: 6px 12px; border-radius: 8px;
  border: 1px dashed rgba(255, 178, 61, .65); background: rgba(255, 178, 61, .08);
  color: var(--amber); font: 700 13px/1.4 var(--font-body); text-align: center;
}

/* ---------- Impaginazione ---------- */
.layout { display: grid; gap: 20px; padding-block: 16px 64px; }
.intro { min-width: 0; }
.eyebrow { margin: 0 0 12px; font: 700 13px/1 var(--font-display); letter-spacing: 3px; text-transform: uppercase; color: var(--lime); }
h1 { margin: 0; font: 700 clamp(34px, 7vw, 56px)/1.02 var(--font-display); letter-spacing: -.035em; text-wrap: balance; }
.panel { min-width: 0; max-width: 680px; }
.step-count {
  display: inline-flex; align-items: center; min-height: 32px; margin: 0 0 12px; padding: 0 12px;
  border-radius: 999px; background: var(--surface-alt); border: 1px solid var(--border-08);
  font: 700 13px/1 var(--font-body); color: var(--text-80);
}

/* Indicatore dei passi: elenco verticale sugli schermi larghi, solo «Passo n di N» sui telefoni. */
.stepper { display: none; list-style: none; margin: 36px 0 0; padding: 0; }
.stepper li {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 44px;
  font: 600 15px/1.3 var(--font-body); color: var(--text-60);
}
.stepper li + li { margin-top: 6px; }
.stepper li + li::before {
  content: ""; position: absolute; left: 15px; top: -10px; width: 2px; height: 14px; background: var(--border-14);
}
.stepper-dot {
  display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border-14); background: var(--surface); font: 700 13px/1 var(--font-display); color: var(--text-60);
}
.stepper li.is-done { color: var(--text-80); }
.stepper li.is-done .stepper-dot { border-color: rgba(198, 255, 61, .45); color: var(--lime); }
.stepper li[aria-current="step"] { color: var(--text); }
.stepper li[aria-current="step"] .stepper-dot { background: var(--lime); border-color: var(--lime); color: var(--on-accent); }

/* ---------- Card dei passi ---------- */
.card {
  box-sizing: border-box; padding: clamp(20px, 5vw, 36px); border-radius: 24px;
  background: var(--surface); border: 1px solid var(--border-08);
  box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .8);
}
.card + .card { margin-top: 16px; }
.step h2 {
  margin: 0 0 18px; font: 700 clamp(24px, 3.4vw, 30px)/1.15 var(--font-display); letter-spacing: -.02em;
  scroll-margin-top: 16px;
}
.step h2:focus { outline: none; }
.step h2:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
.step h3 { margin: 0 0 12px; font: 700 19px/1.25 var(--font-display); letter-spacing: -.01em; }
.lede { margin: 0 0 16px; font-size: 18px; line-height: 1.55; color: var(--text-80); }
.hint { margin: 0 0 12px; color: var(--text-80); }
.note { margin: 10px 0 0; font-size: 15px; line-height: 1.5; color: var(--text-60); }
.note-small { font-size: 14px; }
.note a, .lede a, .hint a, .check a, .notice a, .danger-link a {
  text-decoration: underline; text-decoration-color: var(--lime); text-underline-offset: 3px;
}
.note-ok { color: var(--lime); }
.standalone-link { display: inline-flex; align-items: center; min-height: 44px; }
.callout {
  margin: 0 0 16px; padding: 14px 16px; border-radius: 14px;
  background: rgba(198, 255, 61, .07); border: 1px solid rgba(198, 255, 61, .35);
  font: 700 18px/1.4 var(--font-display); color: var(--text);
}
.loading, .checking, .phase { margin: 12px 0 0; font: 600 16px/1.5 var(--font-body); color: var(--text-80); }
.loading::before, .checking::before {
  content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 10px; vertical-align: -2px;
  border-radius: 50%; border: 2px solid var(--border-14); border-top-color: var(--lime);
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Campi ---------- */
.form { margin: 0; }
.field { margin: 0 0 22px; }
.label { display: block; margin: 0 0 8px; padding: 0; font: 700 16px/1.35 var(--font-body); color: var(--text); }
.input {
  box-sizing: border-box; display: block; width: 100%; min-height: 54px; margin: 0; padding: 12px 16px;
  border-radius: 14px; border: 1px solid var(--control-border); background: var(--surface-deep);
  color: var(--text); font: 400 17px/1.3 var(--font-body);
}
.input::placeholder { color: var(--text-50); opacity: 1; }
.input:hover { border-color: rgba(255, 255, 255, .55); }
.input:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-color: var(--lime); border-radius: 14px; }
.input[readonly] { background: var(--surface-alt); color: var(--text-80); }
.input[aria-invalid="true"] { border-color: var(--error); }
.input-code { max-width: 260px; font: 700 22px/1.2 var(--font-display); letter-spacing: .06em; }
.select-wrap { position: relative; }
.select-wrap::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; margin-top: -7px;
  border-right: 2px solid var(--text-80); border-bottom: 2px solid var(--text-80); transform: rotate(45deg);
  pointer-events: none;
}
.select { -webkit-appearance: none; appearance: none; padding-right: 48px; cursor: pointer; }
.select option { background: var(--surface-deep); color: var(--text); }

/* Caselle native con accent-color; tutta la riga è l'area cliccabile (almeno 44 px). */
.checks { margin: 0 0 22px; padding: 0; border: 0; min-width: 0; }
.checks + .checks { margin-top: -4px; }
.check-item + .check-item { margin-top: 2px; }
.check {
  display: flex; align-items: flex-start; gap: 14px; min-height: 44px; padding: 10px 0;
  box-sizing: border-box; cursor: pointer; color: var(--text-80); font-size: 16px; line-height: 1.5;
}
.check input {
  flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--lime); cursor: pointer;
}
.check input:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.declarations .check { color: var(--text); }
.pending { margin: -8px 0 0; }

/* Area del file: un <label> del suo <input type="file">, nascosto solo alla vista. */
.file-input {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; opacity: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
}
.dropzone {
  box-sizing: border-box; display: grid; justify-items: center; align-content: center; gap: 6px;
  min-height: 132px; padding: 22px 18px; border-radius: 18px; text-align: center; cursor: pointer;
  border: 2px dashed var(--control-border); background: var(--surface-deep);
  transition: border-color .15s ease, background-color .15s ease;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--lime); background: rgba(198, 255, 61, .05); }
.file-input:focus-visible + .dropzone { outline: 2px solid var(--lime); outline-offset: 3px; border-color: var(--lime); }
.file-input[aria-invalid="true"] + .dropzone { border-color: var(--error); }
.dropzone-icon {
  position: relative; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--lime);
}
.dropzone-icon::before {
  content: ""; position: absolute; left: 50%; top: 9px; width: 9px; height: 9px; margin-left: -6px;
  border-left: 2px solid var(--lime); border-top: 2px solid var(--lime); transform: rotate(45deg);
}
.dropzone-icon::after {
  content: ""; position: absolute; left: 50%; top: 10px; width: 2px; height: 14px; margin-left: -1px; background: var(--lime);
}
.dropzone-main { font: 700 18px/1.3 var(--font-display); color: var(--text); }
.dropzone-sub { font-size: 15px; color: var(--text-60); }
.file-selected {
  display: flex; align-items: center; gap: 10px; margin: 12px 0 0; padding: 10px 14px; border-radius: 12px;
  background: rgba(198, 255, 61, .07); border: 1px solid rgba(198, 255, 61, .35);
  font: 600 15px/1.4 var(--font-body); color: var(--text); overflow-wrap: anywhere;
}
.file-selected::before {
  content: ""; flex: none; width: 6px; height: 11px; margin: -3px 4px 0 2px;
  border-right: 2px solid var(--lime); border-bottom: 2px solid var(--lime); transform: rotate(45deg);
}

/* ---------- Errori e avvisi ---------- */
.field-error {
  display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0;
  font: 600 15px/1.45 var(--font-body); color: var(--error);
}
.err-icon {
  position: relative; display: inline-block; flex: none; width: 16px; height: 16px; margin-top: 2px;
  border-radius: 50%; border: 2px solid currentColor; box-sizing: border-box;
}
/* «!» nel riquadro interno di 12 px: asta da 2 a 6, 2 px di stacco, punto da 8 a 10. */
.err-icon::before {
  content: ""; position: absolute; left: 50%; top: 2px; width: 2px; height: 4px; margin-left: -1px; background: currentColor;
}
.err-icon::after {
  content: ""; position: absolute; left: 50%; bottom: 2px; width: 2px; height: 2px; margin-left: -1px; background: currentColor;
}
.err-prefix { font-weight: 700; }
.banner:not(:empty) { margin: 0 0 18px; }
.notice {
  box-sizing: border-box; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border-14);
  background: var(--surface-alt); color: var(--text);
}
.notice p { margin: 0; }
.notice p + p { margin-top: 8px; }
.notice .note { margin-top: 8px; }
.notice-error { border-color: rgba(255, 92, 180, .6); background: rgba(255, 61, 165, .08); }
.notice-error .notice-text { display: flex; align-items: flex-start; gap: 8px; color: var(--text); }
.notice-error .err-icon { color: var(--error); }
.notice-error .err-prefix { color: var(--error); }
.notice-info { border-color: var(--border-14); }
.notice-ok { border-color: rgba(198, 255, 61, .45); background: rgba(198, 255, 61, .07); }
.notice-warn { border-color: rgba(255, 178, 61, .55); background: rgba(255, 178, 61, .07); color: var(--text); }
.notice-code { font-size: 13px; color: var(--text-70); }
.notice-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.blocked { margin: 0 0 22px; }
.account-line { margin: -8px 0 20px; }

/* ---------- Pulsanti ---------- */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.form .actions { margin-top: 8px; }
.btn {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; min-width: 44px; padding: 0 24px; border-radius: 16px; border: 1px solid transparent;
  font: 700 17px/1.15 var(--font-display); text-align: center; text-decoration: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}
.btn-primary { background: var(--lime); color: var(--on-accent); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 40px -16px rgba(198, 255, 61, .7); }
.btn-secondary { background: transparent; color: var(--text); border-color: var(--control-border); }
.btn-secondary:hover { background: var(--surface-alt); border-color: rgba(255, 255, 255, .6); }
.btn-danger { background: var(--magenta); color: var(--on-accent); }
.btn-danger:hover { transform: translateY(-1px); box-shadow: 0 14px 40px -16px rgba(255, 61, 165, .7); }
.btn[aria-disabled="true"] {
  background: var(--surface-alt); border-color: var(--border-14); color: var(--text-50);
  cursor: not-allowed; transform: none; box-shadow: none;
}
.btn.is-busy { cursor: progress; }
.btn.is-busy::after {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite;
}
.btn-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; margin: 0;
  border: 0; background: none; color: var(--text-80); cursor: pointer;
  font: 600 16px/1.3 var(--font-body); text-decoration: underline; text-decoration-color: var(--lime);
  text-underline-offset: 4px;
}
.btn-link:hover { color: var(--text); }
.danger-link { margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--border-08); font-size: 15px; color: var(--text-60); }
.danger-link a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-80); text-decoration-color: var(--magenta); }

.withdraw-box { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-08); }
.withdraw-box .note { margin: 0; }
#launch-group .note { margin-top: 2px; }

/* ---------- Invio ---------- */
.progress-box { margin: 18px 0 6px; }
.progress-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.progress-label { font: 600 15px/1.4 var(--font-body); color: var(--text-80); }
.progress-pct { font: 700 15px/1.4 var(--font-display); font-variant-numeric: tabular-nums; color: var(--text); }
progress {
  display: block; width: 100%; height: 12px; border: 0; border-radius: 999px; overflow: hidden;
  -webkit-appearance: none; appearance: none; background: var(--surface-deep); color: var(--lime);
  box-shadow: inset 0 0 0 1px var(--border-14);
}
progress::-webkit-progress-bar { background: var(--surface-deep); border-radius: 999px; }
progress::-webkit-progress-value { background: var(--lime); border-radius: 999px; transition: width .25s ease; }
progress::-moz-progress-bar { background: var(--lime); border-radius: 999px; }

/* ---------- Esito ---------- */
.done-result .notice-ok p { font: 700 19px/1.4 var(--font-display); }
.done-more p { margin: 14px 0 0; color: var(--text-80); }
.app-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.app-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--control-border); font-weight: 700; color: var(--text); text-decoration: none;
}
.app-links a:hover { border-color: var(--lime); }

/* ---------- I tuoi brani ---------- */
.tracks-box { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--border-08); }
.tracks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.track { padding: 14px 16px; border-radius: 14px; background: var(--surface-deep); border: 1px solid var(--border-08); }
.track-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.track-title { min-width: 0; font: 700 17px/1.3 var(--font-display); overflow-wrap: anywhere; }
.status-chip {
  flex: none; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border-14);
  font: 700 12px/1.3 var(--font-body); color: var(--text-80);
}
.status-live { color: var(--lime); border-color: rgba(198, 255, 61, .45); }
.status-in_revisione { color: var(--amber); border-color: rgba(255, 178, 61, .45); }
.status-in_pausa { color: var(--cyan); border-color: rgba(61, 224, 255, .45); }
.status-rimosso { color: var(--error); border-color: rgba(255, 92, 180, .5); }
.track-lines { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: 14px; line-height: 1.5; color: var(--text-70); }

/* ---------- Piede (come le pagine legali, link alti almeno 44 px) ---------- */
footer {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px;
  padding-block: 24px 36px; border-top: 1px solid var(--border-06); font-size: 14px; color: var(--text-60);
}
footer nav { display: flex; flex-wrap: wrap; gap: 0 22px; }
footer nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; text-decoration: none; }
footer nav a:hover { color: var(--text); }
footer p { margin: 0; }

@media (min-width: 960px) {
  .layout { grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 56px; align-items: start; padding-block: 32px 88px; }
  .intro { position: sticky; top: 24px; }
  .stepper { display: block; }
  .step-count { display: none; }
}
@media (max-width: 520px) {
  .actions .btn { flex: 1 1 100%; }
  .input-code { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .btn:hover { transform: none; }
}
@media (forced-colors: active) {
  .input, .dropzone, .btn, .notice, .card, .file-selected, .track, .status-chip, .step-count, .home-link { border-color: CanvasText; }
  .btn-primary, .btn-danger { border: 2px solid ButtonText; }
  .btn[aria-disabled="true"] { color: GrayText; border-color: GrayText; }
  :focus-visible, .file-input:focus-visible + .dropzone, .input:focus-visible { outline: 2px solid Highlight; }
  .err-icon { border-color: CanvasText; }
  /* I fondi vengono forzati a Canvas, i colori di sistema no: senza, asta e punto sparirebbero. */
  .err-icon::before, .err-icon::after, .dropzone-icon::after { background: CanvasText; }
  progress { border: 1px solid CanvasText; }
  .stepper li[aria-current="step"] .stepper-dot { border: 2px solid Highlight; }
}