#nalo-auth-gate { border:0; padding:0; background:transparent; max-height:90dvh; max-width:calc(100vw - 24px); border-radius:20px; }
#nalo-auth-gate:not([open]) { display:none; }
#nalo-auth-gate::backdrop { background:#14223880; }
#nalo-auth-close { position:absolute;right:12px;top:10px;border:0;background:transparent;color:white;font-size:25px;cursor:pointer; }
#nalo-login {display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:8px;background:transparent;border:0;border-radius:50%;color:white;cursor:pointer;}
#nalo-login:hover {background:#ffffff18;}
#nalo-login:focus-visible {outline:2px solid white;outline-offset:3px;}
.nalo-auth-panel { position:relative; width:min(420px,calc(100vw - 24px)); background:white; border-radius:20px; overflow:hidden; box-shadow:0 12px 45px #172a4220; }
.nalo-auth-brand { background:#3b608f; color:white; padding:23px; text-align:center; font:700 32px 'General Sans',Arial,sans-serif; }
#nalo-auth-content { width:100%; min-width:0; }
#nalo-auth-content .cl-rootBox,
#nalo-auth-content .cl-cardBox { width:100%; max-width:none; }
#nalo-auth-message { margin:0; padding:0 24px 20px; text-align:center; color:#334155; }
#nalo-auth-message:empty { display:none; }
#nalo-switch-account { display:block; margin:0 auto 24px; padding:10px 18px; background:white; color:#3b608f; border:1px solid #3b608f; border-radius:8px; cursor:pointer; }
#nalo-switch-account[hidden] { display:none; }
.nalo-header .header-about { margin-left:auto; }
#nalo-account { display:flex; align-items:center; margin-left:6px; min-width:32px; }

.nalo-auth-brand { display:flex; align-items:center; justify-content:center; gap:16px; }
.nalo-auth-spinner { display:none; width:23px; height:23px; border:3px solid #ffffff50; border-top-color:white; border-radius:50%; animation:nalo-auth-spin .8s linear infinite; }
#nalo-auth-gate[data-loading="true"] .nalo-auth-spinner { display:inline-block; }
#nalo-auth-gate[data-loading="true"] .nalo-auth-brand { border-radius:20px; }
#nalo-auth-gate[data-loading="true"] #nalo-auth-content,
#nalo-auth-gate[data-loading="true"] #nalo-auth-message,
#nalo-auth-gate[data-loading="true"] #nalo-switch-account { display:none; }
@keyframes nalo-auth-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .nalo-auth-spinner { animation:none; } }