/* Beat Montage — pagina di accesso (stesso stile glass e palette dell'app). Niente gap nei flex, backdrop-filter con prefisso e ripiego. */
:root{ --bg:#2e2a9c; --ink:#fff; --ink2:rgba(255,255,255,.84); --muted:rgba(255,255,255,.64); --bordo:rgba(255,255,255,.26); --lilla:#9999ff; --lilla2:#dcd8ff; --rosso:#ffb0a8; --pad-l:16px; --pad-r:16px }
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:#4a36b8}
body{margin:0;background:transparent;color:var(--ink);font-family:ui-rounded,"SF Pro Rounded",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;font-size:16px;line-height:1.4;min-height:100vh;-webkit-tap-highlight-color:transparent}
@supports (min-height:100dvh){ body{min-height:100dvh} }
[hidden]{display:none !important}
button,input{font:inherit;touch-action:manipulation}
.sfondo{position:fixed;left:0;top:0;right:0;bottom:0;z-index:-1;background:#6a40cc;
  background:radial-gradient(900px 620px at 6% 0%,rgba(153,153,255,.6),rgba(153,153,255,0) 62%),radial-gradient(1000px 720px at 100% 100%,rgba(255,97,246,.55),rgba(255,97,246,0) 62%),linear-gradient(135deg,#2e2a9c 0%,#5b3fd2 34%,#9a42d6 66%,#d93fb4 100%)}
.centro-pagina{min-height:100vh;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;padding:16px var(--pad-r) 16px var(--pad-l)}
@supports (min-height:100dvh){ .centro-pagina{min-height:100dvh} }
@supports (padding:max(1px,2px)){ .centro-pagina{padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom));padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))} }
.vetro{background:rgba(52,30,128,.9);border:1px solid var(--bordo);border-radius:24px;box-shadow:0 14px 40px rgba(28,10,84,.38),inset 0 1px 0 rgba(255,255,255,.35)}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){ .vetro{background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.07)),rgba(40,20,112,.36);-webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%)} }
.scheda-accesso{width:100%;max-width:380px;padding:24px 22px;text-align:center}
.logo{width:64px;height:64px;border-radius:16px;box-shadow:0 4px 14px rgba(0,0,0,.35),0 0 0 2px rgba(255,255,255,.3)}
h1{font-size:1.4rem;font-weight:900;margin:12px 0 4px;letter-spacing:.1em;text-transform:uppercase}
.nota{font-size:.88rem;color:var(--ink2);margin:6px 0 14px}
.passo{margin-top:6px}
.campo{display:block;text-align:left;margin:0 0 12px}
.campo span{display:block;font-size:.75rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);margin-bottom:4px}
input[type=text]{width:100%;min-height:48px;padding:8px 12px;color:var(--ink);background:rgba(18,8,56,.5);border:1px solid var(--bordo);border-radius:12px;-webkit-appearance:none;appearance:none;text-align:center;letter-spacing:.08em}
.tasto{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;min-height:48px;padding:10px 18px;border:1px solid rgba(255,255,255,.3);border-radius:14px;color:#fff;font-weight:800;cursor:pointer;background:linear-gradient(135deg,#7566ee 0%,#c23fd2 100%);box-shadow:0 6px 18px rgba(194,63,210,.38),inset 0 1px 0 rgba(255,255,255,.4)}
.tasto:hover{-webkit-filter:brightness(1.1);filter:brightness(1.1)}
.tasto.largo{width:100%}
.tasto-vetro{background:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.2);border-color:var(--bordo);margin-top:14px}
.puntini{display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;margin:6px 0 4px}
.puntini i{width:14px;height:14px;border-radius:50%;border:2px solid #fff;margin:0 5px;-webkit-transition:background .12s;transition:background .12s}
.puntini i.pieno{background:#fff;border-color:#fff}
.puntini.errore{-webkit-animation:scuoti .35s;animation:scuoti .35s}
.puntini.errore i{border-color:#ff9a92;background:#ff9a92}
@-webkit-keyframes scuoti{20%{-webkit-transform:translateX(-8px)}40%{-webkit-transform:translateX(8px)}60%{-webkit-transform:translateX(-5px)}80%{-webkit-transform:translateX(5px)}}
@keyframes scuoti{20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.messaggio{min-height:1.4em;margin:8px 0 10px;font-size:.88rem;color:var(--ink2)}
.messaggio.errore{color:#ffe0dd}
.tastierino{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;margin:0 -5px}
.tastierino button{-webkit-flex:0 0 calc(33.333% - 10px);flex:0 0 calc(33.333% - 10px);margin:5px;min-height:56px;border:1px solid var(--bordo);border-radius:16px;background:rgba(255,255,255,.16);color:#fff;font-size:1.4rem;font-weight:700;cursor:pointer}
.tastierino button:hover{background:rgba(255,255,255,.16)}
.tastierino button:active{background:rgba(153,153,255,.3)}
.tastierino button.vuoto{visibility:hidden}
.tastierino.bloccato button{opacity:.4;pointer-events:none}
@media (prefers-reduced-motion:reduce){ *{-webkit-animation:none !important;animation:none !important;-webkit-transition:none !important;transition:none !important} }