/* SpikeWall - pagina di login, aspetto "Vela" (README "Nuovo aspetto (Vela)"): scheda divisa, a sinistra il pannello
   del marchio (sfumatura d'accento e forme morbide, solo CSS), a destra il modulo. Stessi token della dashboard. */

:root, [data-theme="dark"] {
  --bg: #090a0f;
  --bg-glow: rgba(51, 212, 147, .12);
  --bg-glow-2: rgba(86, 168, 255, .07);
  --card: #12141d;
  --card-line: rgba(255, 255, 255, .07);
  --shadow: 0 30px 80px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .02);
  --brand-a: #0e7a54;
  --brand-b: #24461a;
  --brand-c: #111d0e;
  --brand-glow: rgba(95, 224, 171, .35);
  --brand-glow-2: rgba(86, 168, 255, .35);
  --brand-shape: rgba(255, 255, 255, .09);
  --brand-shape-2: rgba(255, 255, 255, .05);
  --brand-ink: #ffffff;
  --brand-ink-2: rgba(255, 255, 255, .78);
  --brand-chip: rgba(255, 255, 255, .12);
  --brand-tag: rgba(255, 255, 255, .12);        /* fondo di «Netcloud Service» */
  --field: #0c0e15;
  --field-hover: #0e1018;
  --autofill: #121a10;
  --line: rgba(255, 255, 255, .07);
  --line-2: rgba(255, 255, 255, .14);
  --line-3: rgba(255, 255, 255, .24);
  --t0: #f3f4f9;
  --t1: #9aa1b2;
  --t2: #80879b;
  --hint: #7c8396;
  --acc: #33d493;
  --acc-hi: #0b6a49;               /* pulsante al passaggio: testo bianco ≥ 4.5:1 */
  --acc-btn: #0e7a54;              /* fondo del pulsante principale (testo bianco 5.2:1); --acc per gli accenti */
  --acc-t: #5ee3ae;
  --acc-soft: rgba(51, 212, 147, .15);
  --acc-ring: rgba(51, 212, 147, .28);
  --acc-glow: rgba(15, 122, 84, .8);
  --on-acc: #ffffff;
  --ok: #33d493;
  --ok-t: #33d493;
  --ok-soft: rgba(51, 212, 147, .12);
  --warn: #f7b84e;
  --warn-t: #f7b84e;
  --warn-soft: rgba(247, 184, 78, .12);
  --bad: #f76d7d;
  --bad-t: #ff8a97;
  --bad-soft: rgba(247, 109, 125, .12);
  --bad-line: rgba(247, 109, 125, .5);
  --locked-bg: #1c2618;
  --locked-ink: #aac79a;
  --spin-track: rgba(255, 255, 255, .35);
  --tabs-bg: #0c0e15;
  --tab-on: #1f2230;
  --tab-shadow: 0 1px 2px rgba(0, 0, 0, .4);
  --check-mark: #ffffff;
  --meter-off: rgba(255, 255, 255, .1);
  --toggle-bg: #12141d;
  --hover-veil: rgba(255, 255, 255, .05);
  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #eef0f5;
  --bg-glow: rgba(10, 116, 81, .1);
  --bg-glow-2: rgba(59, 142, 240, .08);
  --card: #ffffff;
  --card-line: rgba(17, 20, 32, .08);
  --shadow: 0 30px 70px -30px rgba(20, 24, 40, .35), 0 0 0 1px rgba(17, 20, 32, .04);
  --brand-a: #0a7451;              /* testo bianco ≥ 4.5:1 su tutto il pannello */
  --brand-b: #08704b;
  --brand-c: #2a5514;
  --brand-glow: rgba(255, 255, 255, .08);
  --brand-glow-2: rgba(86, 168, 255, .45);
  --brand-shape: rgba(255, 255, 255, .16);
  --brand-shape-2: rgba(255, 255, 255, .09);
  --brand-ink: #ffffff;
  --brand-ink-2: rgba(255, 255, 255, .92);
  --brand-chip: rgba(255, 255, 255, .18);
  --brand-tag: rgba(10, 36, 4, .24);
  --field: #f5f6fb;
  --field-hover: #f1f2f8;
  --autofill: #eef6e8;
  --line: rgba(17, 20, 32, .08);
  --line-2: rgba(17, 20, 32, .16);
  --line-3: rgba(17, 20, 32, .28);
  --t0: #171a23;
  --t1: #5a6173;
  --t2: #666d80;
  --hint: #666d80;
  --acc: #0a7451;
  --acc-hi: #08704b;
  --acc-btn: #0a7451;
  --acc-t: #08704b;
  --acc-soft: rgba(10, 116, 81, .1);
  --acc-ring: rgba(10, 116, 81, .2);
  --acc-glow: rgba(10, 116, 81, .55);
  --on-acc: #ffffff;
  --ok: #16b67e;
  --ok-t: #08704b;
  --ok-soft: rgba(22, 182, 126, .1);
  --warn: #df9626;
  --warn-t: #875500;
  --warn-soft: rgba(223, 150, 38, .12);
  --bad: #e8556a;
  --bad-t: #b52d40;
  --bad-soft: rgba(232, 85, 106, .1);
  --bad-line: rgba(232, 85, 106, .45);
  --locked-bg: #e4eedc;
  --locked-ink: #3f5a31;
  --spin-track: rgba(255, 255, 255, .45);
  --tabs-bg: #f3f4f9;
  --tab-on: #ffffff;
  --tab-shadow: 0 1px 3px rgba(20, 24, 40, .12);
  --check-mark: #ffffff;
  --meter-off: rgba(17, 20, 32, .1);
  --toggle-bg: #ffffff;
  --hover-veil: rgba(17, 20, 32, .05);
  color-scheme: light;
}

:root {
  --radius-card: 24px;
  --r-ctl: 12px;
  --font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

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

html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(900px 520px at 12% -10%, var(--bg-glow), transparent 70%),
    radial-gradient(760px 520px at 100% 110%, var(--bg-glow-2), transparent 70%),
    var(--bg);
  color: var(--t0);
  font: 500 14px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: grid;
  place-items: center;
  padding: clamp(16px, 5vh, 56px) clamp(16px, 4vw, 64px);
  overflow-x: hidden;
}

/* ---------------------------------------------------------------- scheda */

.frame {
  position: relative;
  z-index: 1;
  width: min(1040px, 92vw);
  margin: auto;               /* se non c'è spazio parte dall'alto e la pagina scorre */
}

.card {
  position: relative;
  display: grid;
  grid-template-columns: 44% 1fr;
  min-height: min(640px, calc(100vh - 80px));
  border: 1px solid var(--card-line);
  border-radius: var(--radius-card);
  background: var(--card);
  overflow: hidden;
  box-shadow: var(--shadow);
}

/* ---------------------------------------------------------------- pannello del marchio */

.brand {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 10px;
  padding: 30px 32px 28px;
  border-radius: 18px;
  overflow: hidden;
  color: var(--brand-ink);
  background:
    radial-gradient(420px 320px at 0% 0%, var(--brand-glow), transparent 70%),
    radial-gradient(380px 300px at 110% 105%, var(--brand-glow-2), transparent 70%),
    linear-gradient(160deg, var(--brand-a) 0%, var(--brand-b) 52%, var(--brand-c) 100%);
}
.brand-top { display: flex; align-items: center; gap: 12px; }
/* il cactus di SpikeWall (PNG trasparente): sul pannello verde, senza riquadro */
.brand-logo { display: block; flex: none; width: 34px; height: 44px; object-fit: contain; }
.wordmark { font: 800 21px/1 var(--font); letter-spacing: -.01em; color: var(--brand-ink); }
.wordmark i { font-style: normal; color: var(--brand-ink-2); }
.brand-mid { margin-top: auto; margin-bottom: auto; padding: 40px 0 28px; }
.brand-k {
  display: inline-block;
  margin: 0 0 16px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--brand-tag);
  font: 700 12px/1.2 var(--font);
  letter-spacing: .02em;
  color: var(--brand-ink);
}
.brand-h { margin: 0; max-width: 340px; font: 800 29px/1.2 var(--font); letter-spacing: -.02em; color: var(--brand-ink); }
.brand-l { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.brand-l li { display: flex; align-items: center; gap: 12px; font: 600 14px/1.35 var(--font); color: var(--brand-ink-2); }
.brand-l .ico {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 10px;
  background: var(--brand-chip);
  color: var(--brand-ink);
}
.brand-foot { margin: 0; font: 500 12.5px/1.3 var(--font); color: var(--brand-ink-2); }
/* forme morbide (anelli arrotondati) */
.brand-shape { position: absolute; z-index: -1; pointer-events: none; border-radius: 42px; border: 1px solid var(--brand-shape); }
.brand-shape.s1 { width: 300px; height: 300px; right: -120px; top: 64px; transform: rotate(18deg); }
.brand-shape.s2 { width: 210px; height: 210px; right: -66px; top: 110px; transform: rotate(18deg); background: var(--brand-shape-2); }
.brand-shape.s3 { width: 180px; height: 180px; left: -70px; bottom: -80px; border-radius: 50%; }

/* ---------------------------------------------------------------- pannello del modulo */

.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 44px 40px 26px;
}

.panel-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 380px;
  padding-bottom: 8px;
}

.head { margin-bottom: 28px; }

.logo { display: none; width: 37px; height: 48px; margin: 0 0 18px; object-fit: contain; }

h1 {
  margin: 0;
  font: 800 28px/1.2 var(--font);
  letter-spacing: -.02em;
  color: var(--t0);
}

.sub {
  margin: 8px 0 0;
  font: 500 14px/1.5 var(--font);
  color: var(--t1);
}

.notice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -8px 0 22px;
  padding: 11px 14px;
  border-radius: var(--r-ctl);
  background: var(--acc-soft);
  font: 600 13px/1.4 var(--font);
  color: var(--t0);
}
.notice[hidden] { display: none; }
.notice .ico { width: 17px; height: 17px; flex: none; color: var(--acc-t); }

form { position: relative; display: flex; flex-direction: column; }

.field { position: relative; margin-bottom: 18px; }

label {
  display: block;
  margin-bottom: 8px;
  font: 600 13px/1.3 var(--font);
  color: var(--t0);
}

.control { position: relative; }

.ico {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.control > .ico {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 17px;
  height: 17px;
  color: var(--hint);
  pointer-events: none;
  transition: color .15s;
}

input[type="text"], input[type="password"] {
  width: 100%;
  height: 44px;
  padding: 0 14px 0 42px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-ctl);
  background: var(--field);
  color: var(--t0);
  font: 500 14px/1 var(--font);
  outline: none;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}

#password, #new-password { padding-right: 48px; }

input::placeholder { color: var(--hint); opacity: 1; }

input[type="text"]:hover, input[type="password"]:hover { border-color: var(--line-3); background: var(--field-hover); }

input[type="text"]:focus, input[type="password"]:focus {
  border-color: var(--acc);
  background: var(--field);
  box-shadow: 0 0 0 4px var(--acc-ring);
}
.control:focus-within > .ico { color: var(--acc-t); }

input[aria-invalid="true"] { border-color: var(--bad-line); }
input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px var(--bad-soft); border-color: var(--bad); }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--t0);
  caret-color: var(--t0);
  -webkit-box-shadow: 0 0 0 40px var(--autofill) inset;
  transition: background-color 9999s;
}

.reveal {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--t1);
  cursor: pointer;
  transition: color .15s, background-color .15s;
}
.reveal:hover { color: var(--t0); background: var(--hover-veil); }
.reveal:focus-visible { outline: 2px solid var(--acc); outline-offset: -2px; }
.reveal svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.reveal .eye-off { display: none; }
.reveal[aria-pressed="true"] { color: var(--acc-t); }
.reveal[aria-pressed="true"] .eye { display: none; }
.reveal[aria-pressed="true"] .eye-off { display: block; }

.caps {
  display: flex;
  align-items: center;
  gap: 6px;
  position: absolute;
  top: 0;
  right: 0;
  height: 17px;               /* stessa riga dell'etichetta */
  margin: 0;
  font: 700 12px/1 var(--font);
  color: var(--warn-t);
}
.caps[hidden] { display: none; }
.caps .ico { width: 14px; height: 14px; }

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 0 24px;
}

.check {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font: 600 13px/1 var(--font);
  color: var(--t0);
  cursor: pointer;
  user-select: none;
}
.check input {
  position: absolute;
  opacity: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
}
.check .box {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--line-3);
  border-radius: 6px;
  background: var(--field);
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.check .box svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: var(--check-mark);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 14;
  stroke-dashoffset: 14;
  transition: stroke-dashoffset .2s ease-out;
}
.check:hover .box { border-color: var(--acc); }
.check input:checked + .box { background: var(--acc-btn); border-color: var(--acc-btn); }
.check input:checked + .box svg { stroke-dashoffset: 0; }
.check input:focus-visible + .box { outline: 2px solid var(--acc); outline-offset: 2px; }

.duration {
  padding: 3px 7px;
  border-radius: 7px;
  background: var(--hover-veil);
  font: 600 11.5px/1 var(--font);
  color: var(--t1);
  white-space: nowrap;
}

.alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 16px);
  z-index: 2;
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--r-ctl);
  background: linear-gradient(var(--bad-soft), var(--bad-soft)), var(--card);   /* opaco: copre "sicurezza" */
  color: var(--bad-t);
  font: 600 13px/1.45 var(--font);
}
.alert[hidden] { display: none; }
.has-alert .divider, .has-alert .secinfo { visibility: hidden; }   /* stesso posto dell'avviso */
.alert .ico { flex: none; width: 17px; height: 17px; margin-top: 1px; color: var(--bad); }
.alert .ico-lock { display: none; }
.alert.is-lock { background: linear-gradient(var(--warn-soft), var(--warn-soft)), var(--card); color: var(--warn-t); }
.alert.is-lock .ico-error { display: none; }
.alert.is-lock .ico-lock { display: block; color: var(--warn); }
.alert.is-info { background: linear-gradient(var(--ok-soft), var(--ok-soft)), var(--card); color: var(--ok-t); }
.alert.is-info .ico { color: var(--ok); }
.alert .ico-ok { display: none; }
.alert.is-info .ico-ok { display: block; color: var(--ok); }
.alert.is-info .ico-ok + .ico-error { display: none; }
.alert .count { color: var(--t0); font-weight: 800; font-variant-numeric: tabular-nums; }
.alert .retry { display: block; margin-top: 2px; }

.shake { animation: shake .42s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}

.submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 46px;
  border: 0;
  border-radius: var(--r-ctl);
  background: var(--acc-btn);
  color: var(--on-acc);
  font: 700 14.5px/1 var(--font);
  cursor: pointer;
  box-shadow: 0 10px 26px -10px var(--acc-glow);
  transition: background-color .15s, box-shadow .2s, transform .1s, opacity .15s;
}
.submit:hover { background: var(--acc-hi); box-shadow: 0 12px 30px -10px var(--acc-glow); }
.submit:active { transform: translateY(1px); }
.submit:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }
.submit:disabled { cursor: not-allowed; }
.submit.is-locked { background: var(--locked-bg); color: var(--locked-ink); box-shadow: none; }
.submit .spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--spin-track);
  border-top-color: var(--on-acc);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.submit.is-loading { cursor: progress; }
.submit.is-loading .spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

.divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 26px 0 14px;
  font: 700 11px/1 var(--font);
  color: var(--t2);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.secinfo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  font: 500 12.5px/1.4 var(--font);
  color: var(--t1);
  text-align: center;
}
.secinfo .ico { width: 15px; height: 15px; color: var(--ok); }

.noscript { margin: 16px 0 0; font: 600 13px/1.4 var(--font); color: var(--warn-t); text-align: center; }

.foot {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  font: 600 12px/1 var(--font);
  color: var(--ok-t);
}
.foot .ico { width: 14px; height: 14px; }
.foot .ico-plain { display: none; }
.foot.is-plain { color: var(--t1); }
.foot.is-plain .ico-secure { display: none; }
.foot.is-plain .ico-plain { display: block; }
.foot.is-warn { color: var(--warn-t); }

/* ---------------------------------------------------------------- metodi di accesso e recupero (docs/AUTH.md) */

.view[hidden] { display: none; }

.mtabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: -6px 0 22px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--tabs-bg);
}
.mtab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--t1);
  font: 700 13px/1 var(--font);
  cursor: pointer;
  transition: color .15s, background-color .15s, box-shadow .15s;
}
.mtab .ico { width: 16px; height: 16px; }
.mtab:hover { color: var(--t0); }
.mtab[aria-selected="true"] { background: var(--tab-on); color: var(--t0); box-shadow: var(--tab-shadow); }
.mtab[aria-selected="true"] .ico { color: var(--acc-t); }
.mtab:focus-visible { outline: 2px solid var(--acc); outline-offset: 1px; }

.field[hidden] { display: none; }

#code {
  font: 600 19px/1 var(--mono);
  letter-spacing: .34em;
  font-variant-numeric: tabular-nums;
}
#code::placeholder { letter-spacing: .34em; font-weight: 400; }

.hint {
  margin: 7px 0 0;
  font: 500 12px/1.45 var(--font);
  color: var(--t1);
}

.link {
  color: var(--acc-t);
  font: 700 13px/1.2 var(--font);
  text-decoration: none;
  border-radius: 4px;
  white-space: nowrap;
}
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.link:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; }

.check .duration { margin-left: -2px; }

form.solo { margin-bottom: 4px; }
.alert.inline { position: relative; top: auto; margin: -4px 0 16px; }
.solo .field:last-of-type { margin-bottom: 18px; }

.back { margin: 22px 0 0; text-align: center; }

.who {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -8px 0 20px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-ctl);
  background: var(--field);
  font: 500 13px/1 var(--font);
  color: var(--t1);
}
.who[hidden] { display: none; }
.who .ico { color: var(--acc-t); }
.who b { color: var(--t0); font-weight: 700; }

.meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 8px; }
.meter i { height: 4px; border-radius: 2px; background: var(--meter-off); transition: background-color .2s; }
.meter[data-score="0"] i:nth-child(-n+1),
.meter[data-score="1"] i:nth-child(-n+1) { background: var(--bad); }
.meter[data-score="2"] i:nth-child(-n+2) { background: var(--warn); }
.meter[data-score="3"] i:nth-child(-n+3) { background: var(--acc); }
.meter[data-score="4"] i { background: var(--ok); }

/* ---------------------------------------------------------------- tema chiaro / scuro */

.theme-toggle {
  position: fixed;
  z-index: 3;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--r-ctl);
  background: var(--toggle-bg);
  color: var(--t1);
  cursor: pointer;
  transition: color .15s, border-color .15s, background-color .15s;
}
.theme-toggle:hover { color: var(--t0); border-color: var(--line-3); }
.theme-toggle:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle[hidden] { display: none; }
.theme-toggle .ico-sun { display: none; }            /* scuro: la luna; chiaro: il sole */
[data-theme="light"] .theme-toggle .ico-sun { display: block; }
[data-theme="light"] .theme-toggle .ico-moon { display: none; }

/* ---------------------------------------------------------------- adattamento */

@media (max-width: 1100px) {
  .card { grid-template-columns: 40% 1fr; }
  .brand { padding: 26px 26px 24px; }
  .brand-h { font-size: 25px; }
}

@media (max-height: 820px) and (min-width: 861px) {
  .card { min-height: min(600px, calc(100vh - 48px)); }
  .panel { padding: 30px 40px 20px; }
  .head { margin-bottom: 20px; }
  .field { margin-bottom: 14px; }
  .row { margin-bottom: 20px; }
  .mtabs { margin: -4px 0 18px; }
  .divider { margin: 20px 0 12px; }
  .brand-mid { padding: 24px 0 18px; }
  .brand-l { margin-top: 20px; gap: 10px; }
}

@media (max-width: 860px) {
  body {
    display: block;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  }
  .frame { width: 100%; max-width: 480px; }
  .card { grid-template-columns: 1fr; min-height: calc(100dvh - 32px); }
  .brand { display: none; }
  .panel { padding: 30px 22px 20px; }
  .panel-body { justify-content: flex-start; padding-bottom: 24px; }
  .head { margin-bottom: 24px; }
  .logo { display: block; }
  h1 { font-size: 26px; }
  input[type="text"], input[type="password"] { height: 48px; font-size: 16px; }   /* niente zoom su iOS */
  #code { font-size: 19px; }
  .mtab { height: 40px; }
  .submit { height: 50px; }
  .divider { margin-top: 24px; }
  .theme-toggle { top: max(24px, env(safe-area-inset-top)); right: max(24px, env(safe-area-inset-right)); }
}

@media (min-width: 2200px) and (min-height: 1250px) {
  .frame { zoom: 1.3; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .submit.is-loading .spinner { animation: spin 1.6s linear infinite !important; }
}

@media (forced-colors: active) {
  .submit { border: 1px solid ButtonText; }
  .theme-toggle { border-color: ButtonText; }
  .check .box { border-color: ButtonText; }
}