:root {
  --cielo: #EAF0F3;
  --crinale: #3b4252;
  --crinale-chiaro: #4A5B67;
  --vela: #31529f;
  --vela-scura: #3c5285;
  --sole: #FFC933;
  --errore: #c01c28;
  --bordo: #8FA1AD;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cielo);
  color: var(--crinale);
  font: 1rem/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* --- Intestazione ------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--crinale);
  color: #fff;
}
.hero-inner {
  max-width: 40rem;
  margin: 0 auto;
  padding: 3rem 1.25rem 6.5rem;
}
.hero h1 {
  margin: 0 0 .75rem;
  font-size: clamp(2.5rem, 10vw, 4.25rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.035em;
}
.hero p { margin: 0; color: #C5D3DC; }
.hero .when { margin-bottom: .15rem; font-size: 1.2rem; font-weight: 600; color: #fff; }
.glider {
  position: absolute;
  top: 1.75rem;
  right: max(1.25rem, calc(50% - 20rem));
  opacity: .95;
}
.ridge {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  display: block;
  width: 100%;
  height: 4.5rem;
}

/* --- Contenuto ---------------------------------------------------------- */
.wrap {
  max-width: 40rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3.5rem;
}
body.plain .wrap { max-width: 64rem; padding-top: 2.5rem; }

.form-title, .plain-title {
  margin: 0 0 1.25rem;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -.01em;
}

.field { margin: 0 0 1.35rem; padding: 0; border: 0; min-width: 0; }
.field > label, legend {
  display: block;
  padding: 5px 10px;
  font-weight: 650;
}
.hint { margin: .35rem 0 0; font-size: .9rem; color: var(--crinale-chiaro); }

input[type="text"], input[type="email"], input[type="password"] {
  width: 100%;
  padding: .72rem .8rem;
  border: 1.5px solid var(--bordo);
  border-radius: .375rem;
  background: #fff;
  color: inherit;
  font: inherit;
}
input:focus-visible, button:focus-visible, a:focus-visible {
  outline: 3px solid var(--sole);
  outline-offset: 2px;
}
input[type="text"]:focus-visible, input[type="email"]:focus-visible, input[type="password"]:focus-visible {
  border-color: var(--crinale);
}

/* Opzioni (radio e checkbox) a riga intera */
.option {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  margin: 0 0 .5rem;
  padding: .8rem .9rem;
  border: 1.5px solid var(--bordo);
  border-radius: .375rem;
  background: #fff;
  font-weight: 400;
  cursor: pointer;
}
.option input { flex: none; width: 1.15rem; height: 1.15rem; margin: .2rem 0 0; accent-color: var(--vela); }
.option:has(input:checked) { border-color: var(--vela); background: #F2F8FD; }
.option:has(input:focus-visible) { outline: 3px solid var(--sole); outline-offset: 2px; }
.option a { color: var(--vela-scura); }

/* --- Errori e avvisi ---------------------------------------------------- */
.error { margin: .4rem 0 0; color: var(--errore); font-size: .95rem; font-weight: 600; }
.has-error input[type="text"], .has-error input[type="email"], .has-error .option { border-color: var(--errore); }

.notice {
  margin: 0 0 1.5rem;
  padding: 1rem 1.1rem;
  border-left: .35rem solid var(--vela);
  border-radius: .25rem;
  background: #fff;
}
.notice h2 { margin: 0 0 .35rem; font-size: 1.2rem; }
.notice p { margin: 0; }
.notice a { color: var(--vela-scura); }
.notice-error { border-left-color: var(--errore); }

/* --- Pulsanti ----------------------------------------------------------- */
button, .button-link {
  display: inline-block;
  padding: .85rem 1.5rem;
  border: 0;
  border-radius: .375rem;
  background: var(--vela);
  color: #fff;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
button:hover, .button-link:hover { background: var(--vela-scura); }
form > button[type="submit"] { width: 100%; }
@media (min-width: 30rem) { form > button[type="submit"] { width: auto; } }

/* Campo trappola per i bot: fuori schermo ma presente nel DOM */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* --- Admin -------------------------------------------------------------- */
.summary { margin: 0 0 1rem; }
.toolbar { display: flex; gap: 1.25rem; align-items: center; margin: 0 0 1.25rem; }
.toolbar a:not(.button-link) { color: var(--vela-scura); }
.table-wrap { overflow-x: auto; background: #fff; border: 1px solid #C9D4DB; border-radius: .375rem; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { padding: .6rem .75rem; text-align: left; border-bottom: 1px solid #DCE4E9; white-space: nowrap; }
th { background: #F5F8FA; font-weight: 650; }
tbody tr:last-child td { border-bottom: 0; }
td form { margin: 0; }
button.small { padding: .35rem .7rem; font-size: .85rem; }
button.danger { background: var(--errore); }
button.danger:hover { background: #8C1D18; }