/* SERO entry: monochrome glass, real form controls, motion is optional. */
html.skin-clean #viewLogin { position:fixed; inset:0; overflow-y:auto; overflow-x:hidden; background:#0b0c0e; color:#f5f5f7; isolation:isolate; overscroll-behavior:contain; }
html.skin-clean #viewLogin[hidden] { display:none; }
html.skin-clean #viewLogin .login-wrap { position:relative; display:flex; flex-direction:column; width:min(100%,480px); min-height:100%; margin:0 auto; padding:max(54px,env(safe-area-inset-top)) 24px max(20px,env(safe-area-inset-bottom)); gap:0; justify-content:center; box-sizing:border-box; }
#viewLogin .login-hero { position:relative; z-index:1; padding:35px 0 68px; flex:none; }
#viewLogin .auth-wordmark { position:relative; display:inline-block; font-size:clamp(82px,24vw,118px); font-weight:700; line-height:.95; letter-spacing:-.07em; color:#f5f5f7; text-shadow:0 2px 32px #ffffff15; }
#viewLogin .auth-wordmark span { position:absolute; font:400 12px/1 sans-serif; letter-spacing:0; top:8px; right:-17px; color:#929397; }
#viewLogin .auth-tagline { font-size:13px; letter-spacing:.025em; margin:20px 0 0; color:#a4a5ab; }
html.skin-clean #viewLogin .login-dock { position:relative; z-index:2; border:1px solid #ffffff19; border-top-color:#ffffff30; border-radius:30px; padding:25px 22px 12px; background:linear-gradient(150deg,#303135b8,#18191ed9); box-shadow:inset 0 1px 0 #ffffff08,0 30px 80px #0008; backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); }
#viewLogin .auth-intro { text-align:center; margin-bottom:24px; }
#viewLogin .auth-intro h1 { font-size:23px; font-weight:600; line-height:1.17; letter-spacing:-.045em; margin:0 auto 10px; max-width:290px; text-wrap:balance; }
#viewLogin .auth-intro p { font-size:13px; color:#b2b3b9; line-height:1.5; margin:0; text-wrap:balance; }
html.skin-clean #viewLogin .login-card { padding:0; margin:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
html.skin-clean #viewLogin .login-card label { color:#c5c6cc; font-size:12px; font-weight:500; margin:0 0 8px 2px; letter-spacing:0; }
html.skin-clean #viewLogin .login-card input { height:52px; min-height:52px; width:100%; padding:0 15px; margin:0 0 12px; border:1px solid #ffffff20; border-radius:14px; background:#0b0c1066; color:#fff; font-size:16px; box-shadow:inset 0 1px 2px #0002; }
html.skin-clean #viewLogin .login-card input::placeholder { color:#85868d; }
html.skin-clean #viewLogin input:focus-visible, #viewLogin button:focus-visible, #viewLogin a:focus-visible { outline:2px solid #ddd; outline-offset:3px; }
html.skin-clean #viewLogin .login-card .btn-primary, html.skin-clean #viewLogin .oauth-btn { display:flex; align-items:center; justify-content:center; gap:9px; width:100%; min-height:52px; padding:13px 14px; border-radius:14px; border:1px solid #ffffff26; font-size:15px; font-weight:600; background:#f5f5f7; color:#101114; box-shadow:inset 0 1px 0 #fff6; letter-spacing:-.015em; transition:transform .15s,background .15s,opacity .15s; }
html.skin-clean #viewLogin button[hidden] { display:none; }
html.skin-clean #viewLogin .login-card .btn-primary:active, #viewLogin .oauth-btn:active { transform:scale(.985); background:#d6d6da; }
html.skin-clean #viewLogin .login-card .btn-primary:disabled { opacity:.48; }
html.skin-clean #viewLogin .oauth-btn { background:#ffffff08; color:#f5f5f7; font-weight:500; }
#viewLogin .oauth-btn svg { width:19px; height:22px; flex:none; fill:currentColor; }
#viewLogin .auth-provider-note { color:#92939a; font-size:11px; text-align:center; line-height:1.4; margin:7px 0 0; }
#viewLogin .oauth-btn[disabled] { opacity:.55; cursor:default; }
html.skin-clean #viewLogin .login-social { margin:0; }
#viewLogin .auth-divider { display:flex; align-items:center; gap:14px; margin:19px 0; color:#8d8e96; font-size:11px; }
#viewLogin .auth-divider:before, #viewLogin .auth-divider:after { content:""; height:1px; background:#ffffff12; flex:1; }
html.skin-clean #viewLogin .login-link { color:#e5e5e9; text-underline-offset:3px; min-height:44px; }
#viewLogin .login-foot { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:5px; margin:9px 0 0; font-size:12px; color:#a5a6ad; }
#viewLogin .login-foot[hidden] { display:none; }
#viewLogin .login-hint { color:#b2b3bb; line-height:1.5; }
#viewLogin .login-err { color:#ffaaa5; font-size:13px; line-height:1.4; margin:10px 0 0; }
#viewLogin .login-err:empty { display:none; }
#viewLogin .auth-legal { display:flex; justify-content:center; align-items:center; gap:11px; font-size:10px; margin:4px 0 0; color:#888991; }
#viewLogin .auth-legal a { display:inline-flex; align-items:center; min-height:44px; color:#a5a6ae; text-decoration:none; }
#viewLogin .auth-device-note { font-size:11px; line-height:1.5; color:#a5a6ae; text-align:center; margin:5px 0 0; }
#viewLogin .auth-motion { display:block; margin:0 auto; min-height:32px; padding:4px 10px; font-size:10px; color:#909199; background:none; border:0; text-decoration:none; }
#viewLogin #loginOtherAccount { display:block; margin:10px auto 0; }
#viewLogin .auth-scene { position:absolute; z-index:0; inset:0; overflow:hidden; pointer-events:none; }
#viewLogin .auth-halo { position:absolute; top:80px; left:5%; width:90%; height:380px; background:radial-gradient(ellipse,#b9bdcb10,transparent 68%); }
#viewLogin .auth-orbit { position:absolute; --turn:-16deg; animation:sero-float 12s ease-in-out infinite alternate; opacity:.75; }
#viewLogin .auth-orbit-card { top:28px; left:-28px; width:115px; height:157px; --turn:-22deg; animation-delay:-3s; }
#viewLogin .auth-orbit-game { top:142px; right:-18px; width:94px; height:145px; --turn:20deg; animation-delay:-8s; animation-duration:15s; }
#viewLogin .auth-orbit-mini { top:300px; left:9px; width:66px; height:88px; --turn:12deg; opacity:.28; animation-delay:-5s; animation-duration:16s; }
#viewLogin .auth-orbit-disc { top:14px; right:19px; width:72px; height:72px; --turn:-12deg; opacity:.45; animation-delay:-10s; }
#viewLogin .glass-slab, #viewLogin .glass-game { width:100%; height:100%; border:1px solid #ffffff35; border-top-color:#ffffff78; border-radius:12px; background:linear-gradient(135deg,#ffffff21,#ffffff03 45%,#ffffff12); box-shadow:inset 1px 1px 1px #fff2,inset -1px -1px 1px #fff1,0 16px 40px #0006; backdrop-filter:blur(4px); }
#viewLogin .glass-slab span { display:block; margin:9% 9% 0; height:12%; border:1px solid #ffffff18; border-radius:3px; background:linear-gradient(95deg,#ffffff25,#ffffff08); }
#viewLogin .glass-slab i { display:block; position:absolute; inset:29% 12% 10%; border:1px solid #ffffff16; border-radius:6px; background:radial-gradient(ellipse at 65% 30%,#fff2,transparent 70%); }
#viewLogin .glass-slab i:after { content:""; position:absolute; width:33%; height:45%; top:27%; left:33%; background:#ffffff32; clip-path:polygon(50% 0,62% 37%,100% 50%,62% 63%,50% 100%,38% 63%,0 50%,38% 37%); }
#viewLogin .glass-game { border-radius:13px 13px 25px 13px; }
#viewLogin .glass-game span { position:absolute; inset:12% 12% 43%; border:5px solid #ffffff12; background:linear-gradient(135deg,#ffffff0e,#0003); border-radius:5px 5px 13px 5px; }
#viewLogin .glass-game i { position:absolute; left:15%; top:67%; width:23%; height:15%; background:#ffffff38; clip-path:polygon(34% 0,66% 0,66% 34%,100% 34%,100% 66%,66% 66%,66% 100%,34% 100%,34% 66%,0 66%,0 34%,34% 34%); }
#viewLogin .glass-game b { position:absolute; right:17%; top:68%; width:10%; height:7%; border-radius:50%; background:#ffffff44; box-shadow:12px -7px 0 #ffffff33; }
#viewLogin .glass-disc { width:100%; height:100%; border:1px solid #fff4; border-radius:50%; background:repeating-radial-gradient(circle,transparent 0 6px,#ffffff0b 7px 8px),conic-gradient(from 30deg,#ffffff05,#ffffff30,#ffffff03,#ffffff22,#ffffff05); box-shadow:inset 0 0 0 24px #ffffff06,0 16px 30px #0004; mask:radial-gradient(circle,transparent 8%,#000 10%); }
@keyframes sero-float { from { transform:translate3d(0,-9px,0) rotate(var(--turn)); } to { transform:translate3d(7px,12px,0) rotate(calc(var(--turn) + 7deg)); } }
#viewLogin.motion-paused .auth-orbit { animation-play-state:paused; }
#viewLogin[hidden] .auth-orbit { animation-play-state:paused; }
@media (prefers-reduced-motion:reduce) { #viewLogin .auth-orbit { animation:none; transform:rotate(var(--turn)); } #viewLogin .auth-motion { display:none; } }
@media (max-width:350px) { html.skin-clean #viewLogin .login-wrap { padding-left:16px; padding-right:16px; } html.skin-clean #viewLogin .login-dock { padding:22px 18px 10px; } #viewLogin .auth-intro h1 { font-size:21px; } }
@media (max-height:740px) { html.skin-clean #viewLogin .login-wrap { padding-top:max(22px,env(safe-area-inset-top)); justify-content:flex-start; } #viewLogin .login-hero { padding:22px 0 34px; } #viewLogin .auth-wordmark { font-size:84px; } #viewLogin .auth-tagline { margin-top:12px; } }
@media (min-width:900px) { html.skin-clean #viewLogin .login-wrap { width:100%; max-width:1080px; display:grid; grid-template-columns:1fr 380px; gap:110px; padding:64px; align-items:center; } #viewLogin .auth-wordmark { font-size:150px; } #viewLogin .login-hero { padding:0; } #viewLogin .auth-tagline { font-size:16px; } #viewLogin .auth-orbit-card { top:18%; left:6%; width:140px; height:195px; } #viewLogin .auth-orbit-game { top:54%; right:45%; width:112px; height:168px; } #viewLogin .auth-orbit-disc { top:18%; right:48%; width:96px; height:96px; } #viewLogin .auth-orbit-mini { top:68%; left:17%; width:80px; height:110px; } #viewLogin .auth-halo { left:0; top:15%; width:65%; height:70%; } }

/* A locked native session must not leave an old sheet or settings panel visible. */
html.auth-visible body > :not(#viewLogin):not(#splash):not(script):not(style):not(link) { visibility:hidden !important; pointer-events:none !important; }

/* Entry keeps its own palette even when the collection uses the light theme. */
html.skin-clean #viewLogin { background:#0b0c0e !important; color-scheme:dark; }
html.skin-clean #viewLogin .login-card { border-radius:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; }
html.skin-clean #viewLogin .login-card input { background:#0b0c1066 !important; color:#fff !important; border:1px solid #ffffff20 !important; border-radius:14px !important; }
html.skin-clean #viewLogin .login-card .btn-primary { background:#f5f5f7 !important; color:#101114 !important; border-radius:14px !important; }
html.skin-clean #viewLogin .oauth-btn { background:#ffffff08 !important; color:#f5f5f7 !important; border:1px solid #ffffff26 !important; }
html.skin-clean #viewLogin .login-card input:focus-visible, html.skin-clean #viewLogin button:focus-visible, html.skin-clean #viewLogin a:focus-visible { outline:2px solid #ddd; outline-offset:3px; }
/* Match the iPhone home-indicator area and avoid a second glass layer on forms. */
html.auth-visible, html.auth-visible body { background:#0b0c0e !important; color-scheme:dark; }
html.skin-clean #viewLogin .login-card { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }