/* accessi/login.css — pagina di login di Accessi (Fase 3a, 26 ott 2026).
   Stesso aspetto del login del CRM (Apple + vetro), ma file proprio: la pagina
   ha la CSP stretta (niente Google Fonts, niente stili inline) e usa i caratteri
   di sistema come accessi.css. Servito da hostGate prima del login.
   File sotto l'impronta di Accessi: dopo ogni modifica, via SSH,
   node /opt/crm/creatorcrm/scripts/accessi-integrity-approve.js */

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

:root {
  --bg: #000000;
  --blue: #2997ff;
  --blue-gd: linear-gradient(135deg, #2997ff, #0055b3);
  --tx: #f5f5f7; --tx2: #86868b; --tx3: #48484a;
  --rd: #ff453a; --yl: #ffd60a;
  --glass-border: rgba(255, 255, 255, .08);
  --r: 10px; --r2: 14px; --r3: 20px;
  --font: -apple-system, 'SF Pro Text', 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif;
  color-scheme: dark;
}

/* l attributo hidden vince sempre (anche su form e span con display proprio) */
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  background: var(--bg); color: var(--tx); font-family: var(--font); font-size: 13.5px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  display: flex; align-items: center; justify-content: center; padding: 20px 16px;
  overflow-x: hidden; position: relative;
}
button, input { font-family: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

@keyframes aura-drift { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(20px, -20px) scale(1.05); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.aura {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 18% 28%, rgba(41, 151, 255, .10) 0%, transparent 42%),
    radial-gradient(circle at 82% 72%, rgba(191, 90, 242, .07) 0%, transparent 42%),
    radial-gradient(circle at 50% 105%, rgba(0, 85, 179, .09) 0%, transparent 52%);
  animation: aura-drift 20s ease-in-out infinite alternate;
}

.login-card {
  position: relative; z-index: 1; width: 100%; max-width: 380px;
  padding: 36px 32px 28px; border-radius: var(--r3);
  background: rgba(20, 20, 20, .6);
  backdrop-filter: blur(30px) saturate(180%); -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .02);
}
.shake { animation: shake .4s ease; }

.logo { text-align: center; margin-bottom: 26px; }
.logo-tile {
  width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 16px;
  display: flex; align-items: center; justify-content: center; color: #fff; background: var(--blue-gd);
  box-shadow: 0 8px 24px rgba(41, 151, 255, .3), inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.logo h1 { font-size: 22px; font-weight: 600; letter-spacing: -.5px; margin-bottom: 4px; }
.subtitle { font-size: 12.5px; color: var(--tx2); }

form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: 11px; font-weight: 600; color: var(--tx2); text-transform: uppercase; letter-spacing: .5px; padding-left: 2px; }
.field input {
  width: 100%; padding: 11px 14px; border-radius: var(--r2); outline: none;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--glass-border); color: var(--tx); font-size: 14px;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.field input:focus { background: rgba(255, 255, 255, .07); border-color: var(--blue); box-shadow: 0 0 0 3px rgba(41, 151, 255, .15); }
.field input:disabled { opacity: .6; }
#mfa-code { letter-spacing: 3px; font-size: 18px; text-align: center; font-variant-numeric: tabular-nums; }

.caps { font-size: 12px; color: var(--yl); margin-top: -6px; padding-left: 2px; }
.mfa-hint { font-size: 13px; line-height: 1.45; color: var(--tx2); }
.mfa-remember { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--tx2); cursor: pointer; user-select: none; }
.mfa-remember input { accent-color: var(--blue); width: 15px; height: 15px; }
.mfa-links { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 12px; color: var(--tx3); }
.link-btn { background: none; border: 0; padding: 2px 0; color: var(--tx2); font-size: 12px; text-decoration: underline; cursor: pointer; border-radius: 4px; }
.link-btn:hover { color: var(--tx); }

.error-box {
  background: rgba(255, 69, 58, .12); border: 1px solid rgba(255, 69, 58, .3); color: var(--rd);
  padding: 10px 12px; border-radius: var(--r); font-size: 12.5px; font-weight: 500; text-align: center;
}

.submit-btn {
  margin-top: 6px; padding: 12px 16px; border: none; border-radius: var(--r2);
  background: var(--blue-gd); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-shadow: 0 4px 14px rgba(41, 151, 255, .25); transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.submit-btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(41, 151, 255, .4); }
.submit-btn:active:not(:disabled) { transform: translateY(0); }
.submit-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .3); border-top-color: #fff; animation: spin .6s linear infinite;
}

.footer { margin-top: 22px; text-align: center; font-size: 10.5px; color: var(--tx3); letter-spacing: .3px; }

@media (max-width: 420px) {
  .login-card { padding: 28px 22px 22px; }
  .logo-tile { width: 48px; height: 48px; }
  .logo h1 { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .aura, .shake, .spinner { animation: none; }
}