:root {
  --bg:#f3f5f9;
  --card:#ffffff;
  --ink:#1f2937;
  --muted:#6b7280;
  --line:#d1d5db;
  --accent:#2563eb;
  --accent-ink:#ffffff;
  --danger:#dc2626;
  --success:#16a34a;
  --warn:#d97706;
  --ok:#16a34a;
  --radius:14px;
  --shadow:0 10px 30px rgba(15,23,42,.08);
  --focus:0 0 0 3px rgba(37,99,235,.35);
}

*,
*::before,
*::after {
  box-sizing:border-box
}

html {
  -webkit-text-size-adjust:100%
}

body {
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* language selector — top strip, wraps on narrow screens */
header.topbar {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:.5rem;
  padding:.6rem 1rem;
  background:#ffffff;
  border-bottom:1px solid var(--line);
}

header.topbar .brand {
  font-weight:600;
  font-size:.95rem;
  color:var(--muted);
  letter-spacing:.02em;
}

ul.langsel {
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
  margin:0;
  padding:0;
  font-size:.8rem;
  font-weight:700;
}

ul.langsel li {
  border-radius:999px;
}

ul.langsel li a {
  display:block;
  padding:.25rem .7rem;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--muted);
  text-decoration:none;
}

ul.langsel li a:hover,
ul.langsel li a:focus-visible {
  color:var(--ink);
  border-color:var(--accent);
}

ul.langsel li.it a {
  background:var(--accent);
  border-color:var(--accent);
  color:var(--accent-ink);
}

ul.langsel li.it a:hover,
ul.langsel li.it a:focus-visible {
  color:var(--accent-ink);
}

/* card layout */
main.wrap {
  max-width:34rem;
  margin:1.5rem auto 3rem;
  padding:0 1rem;
}

.homebox {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

#chpw-hb {
  padding:1.5rem 1.5rem .5rem;
}

#chpw-hb h1 {
  margin:0 0 .75rem;
  font-size:1.35rem;
  line-height:1.3;
  text-align:center;
}

/* result banner */
p.msg {
  margin:.25rem 1.5rem 1rem;
  padding:.75rem 1rem;
  border-radius:10px;
  font-size:.95rem;
  text-align:center;
}

p.msg:empty {
  display:none
}

p.msg.success {
  background:#ecfdf5;
  border:1px solid #a7f3d0;
  color:#065f46;
}

p.msg.error {
  background:#fef2f2;
  border:1px solid #fecaca;
  color:#991b1b;
}

p.msg.note {
  background:#fffbeb;
  border:1px solid #fde68a;
  color:#92400e;
}

/* form */
form.chpw {
  margin:0 1.5rem 1.5rem;
}

.field {
  display:flex;
  flex-direction:column;
  gap:.35rem;
  margin-bottom:1rem;
}

.field label {
  font-weight:600;
  font-size:.95rem;
}

.input-row {
  display:flex;
  align-items:center;
  gap:.5rem;
}

input[type=text],
input[type=password] {
  flex:1;
  min-width:0;
  padding:.65rem .8rem;
  font:inherit;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  -webkit-appearance:none;
  appearance:none;
}

input[type=text]:focus,
input[type=password]:focus,
input[type=submit]:focus,
a:focus-visible,
summary:focus-visible {
  outline:none;
  box-shadow:var(--focus);
  border-color:var(--accent);
}

/* new-password colouring driven by pwdStrength.js inline styles */
#nuovapassword.red {
  border-color:var(--danger)!important
}

#nuovapassword.yellow {
  border-color:var(--warn)!important
}

#nuovapassword.green {
  border-color:var(--ok)!important
}

/* strength meter — traffic lights */
.strength {
  display:flex;
  flex-direction:column;
  gap:.4rem;
  margin-bottom:1rem;
}

.strength .lights {
  display:flex;
  gap:.5rem;
  justify-content:flex-start;
}

.strength img {
  width:26px;
  height:26px;
  transition:opacity .15s ease;
  opacity:.85;
}

.strength .cap {
  font-size:.85rem;
  color:var(--muted);
}

/* submit */
.actions {
  margin-top:.5rem;
}

input[type=submit] {
  width:100%;
  padding:.75rem 1rem;
  font:inherit;
  font-weight:600;
  color:var(--accent-ink);
  background:var(--accent);
  border:none;
  border-radius:10px;
  cursor:pointer;
}

input[type=submit]:hover:not(:disabled) {
  background:#1d4ed8;
}

input[type=submit]:disabled {
  background:#94a3b8;
  cursor:not-allowed;
}

/* help box */
#Words-box {
  margin:0 1.5rem 1.5rem;
}

#help-box {
  display:flex;
  justify-content:flex-end;
}

#help-box button {
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.5rem .9rem;
  font:inherit;
  font-size:.9rem;
  color:var(--accent);
  background:#eef2ff;
  border:1px solid #c7d2fe;
  border-radius:999px;
  cursor:pointer;
}

#help-box button:hover,
#help-box button:focus-visible {
  background:#e0e7ff;
}

#help-box img {
  width:20px;
  height:20px;
}

/* helper panel */
#helper {
  margin:0 1.5rem 1.5rem;
  padding:1rem 1.25rem;
  background:#f8fafc;
  border:1px dashed var(--line);
  border-radius:12px;
  font-size:.9rem;
}

#helper ul {
  margin:.25rem 0;
  padding-left:1.25rem;
}

#helper li {
  margin:.15rem 0;
}

/* footer */
footer.foot {
  margin-top:2rem;
  padding:1rem;
  text-align:center;
  font-size:.8rem;
  color:var(--muted);
}

/* mobile */
@media (max-width:480px) {
  body {
    font-size:15px
  }
  #chpw-hb {
    padding:1.1rem 1rem .4rem
  }
  #chpw-hb h1 {
    font-size:1.15rem
  }
  form.chpw {
    margin:0 1rem 1.25rem
  }
  p.msg {
    margin:.25rem 1rem .9rem
  }
  #Words-box,
  #helper {
    margin:0 1rem 1.25rem
  }
  .strength img {
    width:22px;
    height:22px
  }
}

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