/* Clypse auth pages (login + 2FA verify + 2FA setup)
   Palette e stile coerenti con landing/portal/privacy. */
:root{
  --bg:#060913;
  --bg-2:#0a1120;
  --panel:#0d1527;
  --panel-2:#111b31;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);
  --text:#f7f9fd;
  --muted:#a4aec1;
  --muted-2:#7d899f;
  --blue:#7ca2ff;
  --violet:#be84ff;
  --green:#37d98b;
  --red:#f87171;
  --amber:#ffb768;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(circle at 12% 10%, rgba(124,162,255,.10), transparent 24%),
    radial-gradient(circle at 85% 14%, rgba(190,132,255,.10), transparent 24%),
    radial-gradient(circle at 50% -10%, rgba(255,125,34,.06), transparent 30%),
    linear-gradient(180deg,#060913 0%,#08101d 42%,#050811 100%);
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:24px 16px;
}
body:before{
  content:"";
  position:fixed; inset:0; pointer-events:none; opacity:.02;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  z-index:0;
}

.auth-wrap{
  position:relative;z-index:1;
  width:100%;max-width:440px;
}
.auth-card{
  background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);
  border:1px solid var(--line);
  border-radius:22px;
  padding:38px 34px;
  box-shadow:0 40px 110px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.04);
  animation:authIn .55s cubic-bezier(.16,1,.3,1) both;
}
@keyframes authIn{
  from{opacity:0;transform:translateY(18px) scale(.98)}
  to  {opacity:1;transform:translateY(0)     scale(1)}
}

.auth-brand{
  display:flex;flex-direction:column;align-items:center;
  gap:14px;margin-bottom:22px;text-align:center;
}
.auth-logo{
  width:64px;height:64px;
  filter:drop-shadow(0 14px 30px rgba(170,120,255,.32));
}
.auth-logo svg{width:100%;height:100%;display:block}
.auth-brand h1{
  font-size:26px;font-weight:850;letter-spacing:-.03em;margin:0;
}
.auth-brand .tagline{
  color:var(--muted);font-size:13px;line-height:1.5;
}

.banner{
  padding:12px 14px;border-radius:12px;font-size:13px;line-height:1.45;
  margin-bottom:14px;border:1px solid transparent;
}
.banner-error{background:rgba(248,113,113,.10);border-color:rgba(248,113,113,.30);color:#fecaca}
.banner-info {background:rgba(124,162,255,.10);border-color:rgba(124,162,255,.30);color:#c8dcff}
.banner-ok   {background:rgba(55,217,139,.10); border-color:rgba(55,217,139,.30); color:#c8ffe0}

.auth-form{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.auth-form label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}
.auth-form label > span{font-weight:600;color:var(--text)}
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"]{
  padding:12px 14px;
  background:rgba(6,9,19,.55);
  border:1px solid var(--line-2);
  border-radius:12px;
  color:var(--text);
  font-family:inherit;font-size:14px;
  transition:border-color .18s ease, box-shadow .18s ease;
  outline:none;
}
.auth-form input:focus{
  border-color:rgba(124,162,255,.55);
  box-shadow:0 0 0 4px rgba(124,162,255,.14);
}
.auth-form input::placeholder{color:var(--muted-2)}

.btn-primary{
  padding:13px 18px;border:none;border-radius:12px;
  background:linear-gradient(135deg,var(--blue),var(--violet));
  color:#fff;font-weight:800;font-size:14px;cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  box-shadow:0 10px 28px rgba(126,163,255,.32);
  font-family:inherit;
  margin-top:6px;
  letter-spacing:.01em;
}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(126,163,255,.42)}
.btn-primary:active{transform:translateY(0)}

.auth-hint{
  color:var(--muted-2);font-size:12px;text-align:center;margin-top:18px;line-height:1.5;
}
.auth-hint a{color:var(--blue);text-decoration:none}
.auth-hint a:hover{color:var(--violet)}

/* Setup 2FA specifiche */
.qr-holder{
  display:flex;justify-content:center;
  padding:16px;background:#fff;border-radius:14px;margin:14px 0;
}
.qr-holder img{width:200px;height:200px;display:block}
.secret-line{
  padding:10px 14px;background:rgba(6,9,19,.55);
  border:1px solid var(--line-2);border-radius:10px;
  font-family:ui-monospace,"SF Mono",monospace;font-size:13px;
  color:var(--blue);word-break:break-all;text-align:center;
  margin:8px 0 14px;
}
.backup-codes{
  display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0;
}
.backup-codes code{
  padding:8px 10px;background:rgba(124,162,255,.08);
  border:1px solid rgba(124,162,255,.18);border-radius:8px;
  font-family:ui-monospace,monospace;font-size:12px;color:var(--blue);
  text-align:center;
}

@media (max-width:480px){
  .auth-card{padding:28px 22px;border-radius:18px}
  .auth-brand h1{font-size:22px}
  .auth-logo{width:56px;height:56px}
  .backup-codes{grid-template-columns:1fr}
}

/* =========================================================================
   Custom password reveal — nasconde l'occhietto nativo di Chrome/Edge/Safari
   e usa un pulsante Clypse-styled a destra del campo.
   L'input[type=password] viene avvolto in .pwd-wrap dal password_toggle.js
   ========================================================================= */
input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear,
input[type="password"]::-webkit-credentials-auto-fill-button,
input[type="password"]::-webkit-strong-password-auto-fill-button{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

.pwd-wrap{position:relative;display:block;width:100%;line-height:0}
.pwd-wrap > input{
  width:100% !important;
  padding-right:38px !important;
  line-height:normal;
  box-sizing:border-box !important;
}
.pwd-toggle{
  position:absolute;top:50%;right:6px;transform:translateY(-50%);
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  border:none;background:transparent;color:#7d899f;
  cursor:pointer;border-radius:6px;
  transition:color .18s ease, background .18s ease;
  font-family:inherit;padding:0;margin:0;
  z-index:2;
}
.pwd-toggle:hover{color:#7ca2ff;background:rgba(124,162,255,.10)}
.pwd-toggle:focus{outline:none;color:#7ca2ff;background:rgba(124,162,255,.10)}
.pwd-toggle svg{width:16px;height:16px;display:block;pointer-events:none}