/* ===============================
   UI di autenticazione — Mobile first
   Font globale: Inter (simile a Facebook Sans)
   =============================== */

:root{
  --primary: #0066cc;
  --primary-600: #005bb8;
  --primary-700: #004b99;
  --primary-050: #e6f0fb;

  --bg: #f6f7f9;
  --panel: #ffffff;
  --text: #111827;
  --muted: #6b7280;
  --border: #e5e7eb;
  --reading: #374151;

  --ring: 0 0 0 .25rem rgba(0,102,204,.25);
  --shadow: 0 10px 24px rgba(0,0,0,.08);

  --radius: 12px;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b0f15;
    --panel: #111827;
    --text: #e5e7eb;
    --muted: #a3aab8;
    --border: #1f2937;

    --primary: #66a9ff;
    --primary-600: #5a96e6;
    --primary-700: #4b7ac0;

    --reading: #d1d5db;

    --ring: 0 0 0 .25rem rgba(102,169,255,.28);
    --shadow: 0 10px 24px rgba(0,0,0,.45);
  }
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  font-feature-settings: "cv02","cv03","cv04","cv09","cv10","ss01";
  text-rendering: optimizeLegibility;
  background:
    radial-gradient(800px 560px at 10% -10%, color-mix(in oklab, var(--primary) 18%, transparent), transparent 40%),
    radial-gradient(800px 560px at 110% 10%, color-mix(in oklab, var(--primary) 12%, transparent), transparent 45%),
    var(--bg);
  color:var(--text);
  line-height:1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container{
  min-height:100dvh;
  display:grid;
  place-items:center;
  padding: 16px; /* mobile first */
}

.card{
  width:100%;
  max-width: 440px;
  background: var(--panel);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}

/* Header */
.header{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 6px;
}
.logo{
  display:block;
  width:46px;
  height:46px;
  object-fit:contain;
  background: transparent;
  border-radius:0;
}
.appname{
  font-size: clamp(1.08rem, 2.8vw, 1.28rem);
  font-weight:700;
  letter-spacing:-.2px;
}
.sub{
  font-family: inherit !important;  /* garantisce Inter sul testo digitato */
  color: var(--reading);
  font-size: clamp(.93rem, 3vw, .98rem);
  margin:.25rem 0 1rem;
  line-height: 1.45;
}

/* Cursore “macchina da scrivere” */
.typewriter{
  position:relative;
  min-height: 1.25em;
}
.typewriter::after{
  content:"";
  position:absolute;
  width: 8px;
  height: 1.05em;
  margin-left: 2px;
  top: 0.05em;
  border-right: 2px solid currentColor;
  animation: caret-blink 1s steps(1) infinite;
  opacity: .6;
}
.typewriter.done::after{ opacity:0; animation:none; }
@keyframes caret-blink{ 0%,49%{opacity:.6} 50%,100%{opacity:0} }
@media (prefers-reduced-motion: reduce){
  .typewriter::after{display:none}
}

/* Form */
.form{ display:grid; gap: 12px; margin-top: 6px; }
.label{ font-size:.925rem; font-weight:600; margin-bottom: 4px; }
.input{
  appearance:none;
  width:100%;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  border-radius:10px;
  padding: 12px 14px;
  outline:none;
  transition:.15s border-color linear, .15s box-shadow linear, .15s background-color linear;
}
.input::placeholder{color:color-mix(in oklab, var(--muted) 70%, transparent)}
.input:focus{
  border-color: color-mix(in oklab, var(--primary) 70%, var(--border));
  box-shadow: var(--ring);
  background: color-mix(in oklab, var(--panel) 95%, var(--primary-050));
}

/* Riga/checkbox */
.row{ display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap: wrap; }
.checkbox{ display:flex; align-items:center; gap:10px; color:var(--muted); font-size:.95rem; }
.checkbox input{ width:18px;height:18px; accent-color: var(--primary); }

/* Bottoni */
.actions{display:grid; gap:10px; margin-top: 6px;}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border:1px solid transparent;
  background: var(--primary);
  color: #fff;
  padding: 12px 14px;
  border-radius: 10px;
  font-weight:700;
  text-decoration:none;
  cursor:pointer;
  touch-action: manipulation;
  transition: filter .15s ease, transform .02s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{ filter: saturate(110%); background: var(--primary-600); }
.btn:active{ transform: translateY(1px); }
.btn:focus-visible{ box-shadow: var(--ring); outline: none; }

.btn.secondary{
  background: transparent; color: var(--primary);
  border-color: color-mix(in oklab, var(--primary) 60%, var(--border));
}
.btn.secondary:hover{ background: color-mix(in oklab, var(--panel), var(--primary) 6%); }
.btn.full{width:100%}
.btn.icon-left svg{width:18px;height:18px}

/* Divisore */
.hr{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px;
  color: var(--muted); font-size:.9rem; margin: 4px 0 4px;
}
.hr::before,.hr::after{content:""; height:1px; background:var(--border)}

/* Footer & helper */
footer.small{ margin-top: 12px; color:var(--muted); font-size:.85rem; text-align:center; }
.helper{
  background: color-mix(in oklab, var(--panel), black 4%);
  border: 1px dashed var(--border);
  color: var(--muted);
  padding: 10px 12px;
  border-radius: 10px;
  font-size:.9rem;
  margin-top: 6px;
}
a.link{color:var(--primary); text-decoration:underline; text-underline-offset: 3px;}
a.link:hover{color:var(--primary-700)}

/* Social */
.social{ display:grid; gap:10px; margin-top: 6px; }
.social .btn{
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}
.social .btn:hover{
  filter: saturate(110%);
  background: color-mix(in oklab, var(--panel), black 4%);
}
.social svg{width:18px;height:18px}

/* Scala su schermi più grandi */
@media (min-width: 640px){
  .container{ padding: clamp(16px, 3vw, 48px); }
  .card{ padding: clamp(18px, 2.2vw, 28px); }
  .appname{ font-size: clamp(1.15rem, 1.2vw, 1.35rem); }
  .sub{ margin:.3rem 0 1.1rem; }
}
@media (min-width: 1024px){
  body{
    background:
      radial-gradient(1200px 800px at 10% -10%, color-mix(in oklab, var(--primary) 18%, transparent), transparent 40%),
      radial-gradient(1200px 800px at 110% 10%, color-mix(in oklab, var(--primary) 12%, transparent), transparent 45%),
      var(--bg);
  }
}


/* Error messages: make them red and slightly smaller */
.error-message {
  color: #d32f2f;            /* accessible red */
  font-size: 0.85rem;        /* smaller than body text */
  line-height: 1.3;
  margin-top: 4px;
}

/* Hide empty placeholders so layout doesn't jump */
.error-message:empty {
  display: none;
}


/* --- Button spinner --- */
.btn .spinner{
  width:16px;
  height:16px;
  border:2px solid rgba(255,255,255,.4); /* faint ring */
  border-top-color:#fff;                  /* bright wedge */
  border-radius:50%;
  display:inline-block;
  vertical-align:middle;
  animation:ts-spin .6s linear infinite;
}

@keyframes ts-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
  .btn .spinner{ animation:none; }
}


.notice{margin-top:12px;padding:10px 12px;border-radius:10px;font-size:14px;line-height:1.35}
.notice.warn{background:#fff7ed;border:1px solid #fdba74;color:#7c2d12}
.notice .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.btn.secondary.small{font-size:13px;padding:8px 10px;border:1px solid rgba(0,0,0,.08);background:#f8fafc;color:#0f172a}
.btn.secondary.small .spinner{border-color:rgba(15,23,42,.3);border-top-color:#0f172a}
.check{color:#16a34a;margin-left:6px;font-size:13px}

/* spinner in buttons (white by default) */
.btn .spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;display:inline-block;vertical-align:middle;animation:ts-spin .6s linear infinite}
@keyframes ts-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.btn .spinner{animation:none}}