@import url("/auth/type-scale.css");
@import url("/auth/language-menu.css");
:root{color-scheme:light;--font:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;--ink:#333333;--muted:#737373;--blue:#626262;--line:rgba(83,119,161,.17);font-family:var(--font);color:var(--ink);background:#f4f4f4}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:wait;opacity:.65}a{color:inherit;text-decoration:none}:focus-visible{outline:3px solid #999999;outline-offset:4px}.login-page{min-height:100svh;overflow-x:hidden;background:radial-gradient(ellipse at 10% 20%,#ededed,transparent 54%),radial-gradient(ellipse at 90% 78%,#e9e9e9,transparent 44%),#f8f8f8;display:flex;flex-direction:column}.ambient{position:fixed;pointer-events:none;border-radius:50%;filter:blur(50px);z-index:0}.ambient-one{width:400px;height:400px;left:8%;top:27%;background:#cdcdcd40;animation:drift 14s ease-in-out infinite alternate}.ambient-two{width:320px;height:320px;right:12%;bottom:7%;background:#b9b9b925;animation:drift 18s ease-in-out infinite alternate-reverse}.login-header{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:34px clamp(24px,5vw,80px)}.login-brand{display:flex;align-items:center;gap:13px;font-size:var(--text-section);font-weight:700;letter-spacing:-.5px}.brand-symbol{width:41px;height:41px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(140deg,#fff9,#d4d4d444);border:1px solid #fff;box-shadow:0 5px 20px #72727212,inset 0 1px 1px #fff;font-size:var(--text-page);color:#5f5f5f}.brand-divider{color:#b5b5b5;margin:0 13px;font-weight:300}.brand-caption{font-size:var(--text-small);letter-spacing:0;font-weight:500;color:#787878}.locale-control{display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:30px;border:1px solid #ffffffd9;background:#ffffff80;box-shadow:0 2px 14px #9292920b;color:#666666}.locale-control select{border:0;background:transparent;color:inherit;font-size:var(--text-small);cursor:pointer;padding:2px;outline-offset:6px}.login-layout{position:relative;z-index:1;flex:1;display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(60px,9vw,144px);align-items:center;width:min(1100px,calc(100% - 80px));margin:30px auto 65px}.eyebrow{display:flex;align-items:center;gap:9px;font-size:var(--text-small);letter-spacing:.16em;color:#717171;font-weight:600}.tiny-dot{width:7px;height:7px;border-radius:50%;background:#979797;box-shadow:0 0 0 5px #e0e0e055}.login-story h1{font-size:clamp(40px,4vw,58px);line-height:1.25;font-weight:600;letter-spacing:-2px;margin:25px 0 22px;color:#393939}.story-description{font-size:var(--text-small);line-height:1.9;max-width:380px;color:#717171}.glass-sculpture{position:relative;width:310px;height:215px;margin:15px 0 12px}.glass-core{position:absolute;width:142px;height:142px;left:77px;top:35px;display:grid;place-items:center;border-radius:46px;transform:rotate(-16deg);background:linear-gradient(140deg,#ffffffe6,#e1e1e166 55%,#c9c9c93d);border:1px solid #fff;box-shadow:inset 2px 3px 5px #fff,inset -3px -4px 16px #b9b9b94a,12px 25px 55px #95959527;backdrop-filter:blur(20px);animation:float 8s ease-in-out infinite}.glass-core svg{width:70px;height:70px;color:#808080;transform:rotate(16deg);opacity:.8}.orbit{position:absolute;inset:32px 10px;border:1px solid #fff;border-radius:50%;transform:rotate(-26deg);box-shadow:0 1px 0 #b6b6b635,inset 0 0 18px #ffffff70}.orbit-two{inset:52px 0;transform:rotate(24deg);border-color:#d4d4d477}.sculpture-dot{position:absolute;width:18px;height:18px;border-radius:50%;left:31px;top:124px;background:linear-gradient(150deg,#fff,#c5c5c5);box-shadow:2px 6px 12px #8e8e8e33}.story-footer{display:flex;align-items:center;gap:12px;color:#8b8b8b;font-size:var(--text-small);letter-spacing:.07em}.footer-line{width:27px;height:1px;background:#bcbcbc}.glass{border:1px solid #fff;background:linear-gradient(145deg,#ffffffd9,#ffffff8a);box-shadow:0 20px 80px #70707013,inset 0 1px 1px #fff;backdrop-filter:blur(30px) saturate(135%);-webkit-backdrop-filter:blur(30px) saturate(135%)}.login-card{border-radius:32px;padding:40px 40px 29px;position:relative;overflow:hidden;animation:arrive .6s cubic-bezier(.2,.8,.2,1) both}.login-card::before{content:"";position:absolute;pointer-events:none;inset:0;border-radius:inherit;box-shadow:inset 0 1px 0 #fff,inset 1px 0 0 #fff9}.card-symbol{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:linear-gradient(145deg,#fbfbfb,#eeeeee);border:1px solid white;box-shadow:0 5px 15px #8181810c;color:#737373;margin-bottom:26px}.login-card h2{font-size:var(--text-page);letter-spacing:-.7px;font-weight:600;margin:0 0 10px}.card-description{font-size:var(--text-small);color:var(--muted);margin:0 0 31px}.login-card form>label{display:block;font-size:var(--text-small);font-weight:600;margin:21px 0 9px}.login-card input{width:100%;height:49px;padding:0 15px;border:1px solid #d5d5d5;border-radius:12px;color:var(--ink);background:#ffffff99;outline:none;transition:border-color .2s,box-shadow .2s,background .2s}.login-card input::placeholder{color:#939393;font-size:var(--text-small)}.login-card input:focus{background:#fff;border-color:#969696;box-shadow:0 0 0 4px #9b9b9b1c}.password-field{position:relative}.password-field input{padding-right:50px}#show-password{position:absolute;right:6px;top:6px;height:37px;width:37px;display:grid;place-items:center;background:transparent;border:0;border-radius:8px;color:#868686}#show-password:hover{background:#ededed;color:#545454}.sign-in{width:100%;height:50px;display:flex;align-items:center;justify-content:center;gap:13px;border:1px solid #6c6c6c;border-radius:13px;background:linear-gradient(140deg,#7a7a7a,#5f5f5f);color:white;font-weight:600;font-size:var(--text-small);margin-top:27px;box-shadow:0 7px 18px #63636322,inset 0 1px 0 #ffffff44;transition:transform .2s,box-shadow .2s}.sign-in:hover{transform:translateY(-2px);box-shadow:0 10px 24px #63636332}.sign-in:active{transform:scale(.985)}#login-error{font-size:var(--text-small);color:#b12739;padding:10px 12px;background:#fff0f0;border:1px solid #f2cbd1;border-radius:10px;line-height:1.5}.login-assurance{display:flex;align-items:center;justify-content:center;gap:7px;color:#878787;font-size:var(--text-small);padding-top:25px}.login-footer{position:relative;z-index:1;display:flex;justify-content:space-between;padding:23px clamp(24px,5vw,80px);border-top:1px solid #dadada4d;font-size:var(--text-small);color:#8b8b8b}@keyframes arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes drift{to{transform:translate(35px,-20px)}}@keyframes float{50%{transform:translateY(-9px) rotate(-12deg)}}@media(max-width:800px){.login-layout{grid-template-columns:1fr;width:min(450px,calc(100% - 36px));gap:30px;margin:24px auto 40px}.login-story{text-align:center}.eyebrow,.story-footer{justify-content:center}.login-story h1{font-size:var(--text-display);margin:15px 0}.story-description{margin:0 auto;font-size:var(--text-small)}.glass-sculpture,.story-footer{display:none}.login-card{padding:30px 26px 25px;border-radius:26px}.login-header{padding:22px}.brand-caption,.brand-divider{display:none}.login-footer{gap:10px;padding:20px;flex-wrap:wrap}.card-symbol{margin-bottom:20px}.login-card h2{font-size:var(--text-page)}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}@media(prefers-reduced-transparency:reduce){.glass,.locale-control{background:#fbfbfb;backdrop-filter:none}}@supports not (backdrop-filter:blur(1px)){.glass{background:#fbfbfb}}

.brand-image{display:block;background:none;border:0;box-shadow:none;object-fit:contain}.glass-core img{width:100px;height:100px;transform:rotate(16deg);filter:drop-shadow(0 8px 14px #67676720)}

/* Login uses the same type scale and menu as the console. */
body { font-size:var(--text-body); line-height:var(--leading-body); }
.login-story h1 { font-size:var(--text-display); line-height:var(--leading-heading); letter-spacing:-.02em; }
.login-card h2 { font-size:var(--text-page); line-height:var(--leading-heading); letter-spacing:-.02em; }
.story-description,.card-description { font-size:var(--text-body); line-height:var(--leading-body); color:var(--text-secondary); }
.login-card form>label,.sign-in,.brand-caption,.login-assurance,.login-footer,.story-footer { font-size:var(--text-small); line-height:var(--leading-label); }
.login-card input,.login-card input::placeholder { font-size:var(--text-body); line-height:var(--leading-label); }
.eyebrow { font-size:var(--text-caption); letter-spacing:.08em; }
.login-footer,.story-footer,.login-assurance { color:var(--text-secondary); }
.login-header { z-index:2; gap:12px; }
@media(max-width:800px) { .login-story h1 { font-size:var(--text-page); } .login-card h2 { font-size:var(--text-section); } }

/* r8 graphite login: neutral canvas, restrained glass and no decorative orbits. */
:root{--ink:#292929;--muted:#626262;--blue:#343434;--line:#d8d8d8;color:#292929;background:#f5f5f5}
.login-page{background:#f5f5f5;color:#292929}
.ambient,.glass-sculpture{display:none}
.login-header{border-bottom:1px solid #dedede;background:#fffffff0;padding-block:24px;backdrop-filter:blur(18px)}
.login-layout{width:min(980px,calc(100% - 80px));grid-template-columns:1fr 1fr;gap:96px;margin-block:65px}
.login-story h1{font-size:2.75rem;font-weight:600;line-height:1.25;letter-spacing:-.035em;color:#292929;margin:22px 0}
.eyebrow{color:#626262;letter-spacing:.06em}
.tiny-dot{background:#343434;box-shadow:none}
.story-description{color:#626262;max-width:340px}
.story-footer{margin-top:40px;letter-spacing:.02em;color:#626262}
.footer-line{background:#b2b2b2}
.login-card{border-radius:13px;background:#ffffffed;border:1px solid #dedede;box-shadow:0 14px 45px #00000005;padding:36px}
.login-card::before{display:none}
.card-symbol{border-radius:9px;background:#f1f1f1;border-color:#e4e4e4;box-shadow:none;color:#414141;margin-bottom:24px}
.login-card h2{color:#292929}
.login-card input{border-color:#c4c4c4;border-radius:7px;color:#292929;background:#fff}
.login-card input:focus{border-color:#656565;box-shadow:0 0 0 3px #00000009}
.login-card input::placeholder{color:#747474}
.sign-in{background:#343434;color:#fff;border-color:#343434;border-radius:7px;box-shadow:none}
.sign-in:hover{background:#222;transform:none;box-shadow:0 3px 8px #00000012}
#show-password{color:#626262}#show-password:hover{color:#292929;background:#ededed}
.login-footer{color:#626262;border-color:#dedede}
.brand-caption{color:#626262}.brand-divider{color:#aaa}
:focus-visible{outline:2px solid #525252;outline-offset:3px}
@media(max-width:800px){.login-layout{grid-template-columns:1fr;gap:28px;width:min(450px,calc(100% - 36px));margin:32px auto 40px}.login-story h1{font-size:var(--text-page);margin:12px 0}.login-card{padding:28px 24px}.login-header{padding:20px}.story-description{max-width:100%}}
@media(prefers-reduced-transparency:reduce){.login-card,.login-header{background:#fff;backdrop-filter:none}}

/* r9: porcelain login, consistent with the console. */
:root{--ink:#1d1d1f;--muted:#62666f;--blue:#0066cc;--line:#e2e5eb;background:#f5f5f7;color:#1d1d1f}
.login-page{background:#f5f5f7;color:#1d1d1f}
.login-header{border-color:#e2e5eb;background:#ffffffed}
.login-story h1,.login-card h2{color:#1d1d1f}
.eyebrow,.story-description,.story-footer,.login-footer,.brand-caption{color:#62666f}
.tiny-dot{background:#0066cc}.footer-line{background:#c6cfda}
.login-card{background:#ffffffed;border-color:#fff;border-radius:26px;box-shadow:0 24px 70px #2537520e,0 2px 8px #25375204;padding:38px}
.card-symbol{background:#eef4ff;color:#0066cc;border-color:#e0eafa;border-radius:13px}
.login-card input{border-color:#cdd3dd;border-radius:11px;color:#1d1d1f}
.login-card input:focus{border-color:#0071e3;box-shadow:0 0 0 3px #0071e319}
.login-card input::placeholder{color:#727885}
.sign-in{background:#0066cc;border-color:#0066cc;border-radius:11px;box-shadow:0 3px 9px #0066cc15}
.sign-in:hover{background:#0057b0;box-shadow:0 4px 12px #0066cc24}
#show-password:hover{color:#0066cc;background:#edf3fc}
.login-footer{border-color:#e2e5eb}
:focus-visible{outline:2px solid #0071e3;outline-offset:3px}
@media(max-width:800px){.login-card{padding:28px 24px;border-radius:22px}}
@media(prefers-reduced-transparency:reduce){.login-card{background:#fff}}
