html.layout--xlo-auth{color-scheme:light;--page:#eef1f4;--surface:#fff;--input:#f5f7f9;--line:#e3e7ec;--control-line:#e3e7ec;--ink:#1f2933;--secondary:#3d4752;--muted:#5b6672;--accent:#148a9e;--link:#0f6f80;--on-accent:#fff;--error:#d63d68;--ok:#2f9e6a;--ease-out:cubic-bezier(.23,1,.32,1)}
html.layout--xlo-auth.theme--dark{color-scheme:dark;--page:var(--xd-bg-0,#17181a);--surface:var(--xd-bg-1,#1f2124);--input:var(--xd-bg-2,#26292c);--line:var(--xd-line,#2f3236);--control-line:var(--xd-line-2,#3a3e42);--ink:var(--xd-ink-strong,#dde1e5);--secondary:var(--xd-ink,#c9ced3);--muted:var(--xd-ink-2,#a9afb5);--accent:var(--xd-accent,#4fb6c6);--link:var(--xd-link,#7fcdd8);--on-accent:var(--xd-on-accent,#0f2024);--error:var(--xd-err,#f09a90);--ok:var(--xd-ok,#7fcf9f)}
html.layout--xlo-auth *{box-sizing:border-box}html.layout--xlo-auth body{margin:0;min-height:100vh;background:var(--page);color:var(--secondary);font:14px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;-webkit-font-smoothing:antialiased}html.layout--xlo-auth button,html.layout--xlo-auth input,html.layout--xlo-auth select{font:inherit}html.layout--xlo-auth button,html.layout--xlo-auth a,html.layout--xlo-auth input,html.layout--xlo-auth select{-webkit-tap-highlight-color:transparent}html.layout--xlo-auth button,html.layout--xlo-auth a{touch-action:manipulation}html.layout--xlo-auth button{cursor:pointer}html.layout--xlo-auth button:disabled{cursor:wait}html.layout--xlo-auth button:focus-visible,html.layout--xlo-auth a:focus-visible,html.layout--xlo-auth select:focus-visible{outline:2px solid var(--accent);outline-offset:4px}html.layout--xlo-auth button{color:inherit}html.layout--xlo-auth a{color:var(--link);text-decoration:none}html.layout--xlo-auth [hidden]{display:none!important}html.layout--xlo-auth #ocean{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}html.layout--xlo-auth header{position:relative;z-index:1;height:88px;padding:0 48px;display:flex;align-items:center;justify-content:space-between}html.layout--xlo-auth .brand{display:inline-flex;align-items:center;gap:10px;font-size:18px;font-weight:500;color:var(--ink)}html.layout--xlo-auth .brand svg{width:30px;height:30px;color:var(--accent)}html.layout--xlo-auth .appearance{display:flex;gap:8px}html.layout--xlo-auth .appearance button{display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;width:40px;height:40px;background:var(--page)}html.layout--xlo-auth svg{width:20px;height:20px;flex-shrink:0}html.layout--xlo-auth .sun{display:none}html.layout--xlo-auth.theme--dark .sun{display:block}html.layout--xlo-auth.theme--dark .moon{display:none}html.layout--xlo-auth #motion[aria-pressed=true]{color:var(--muted);opacity:.65}html.layout--xlo-auth main{position:relative;display:flex;justify-content:center;align-items:center;min-height:calc(100vh - 208px);padding:32px 24px 64px;pointer-events:none}html.layout--xlo-auth .auth{pointer-events:auto;width:416px;padding:36px;background:var(--surface);border:1px solid var(--line);border-radius:12px}html.layout--xlo-auth .heading{margin-bottom:28px}html.layout--xlo-auth h1{font-size:24px;line-height:1.4;color:var(--ink);font-weight:600;margin:0 0 8px}html.layout--xlo-auth.theme--dark h1{font-weight:500}html.layout--xlo-auth .heading p{color:var(--muted);margin:0;font-size:14px}html.layout--xlo-auth .field{margin-top:20px}html.layout--xlo-auth .field label{display:block;margin-bottom:8px;color:var(--secondary)}html.layout--xlo-auth .field input{width:100%;height:46px;border:1px solid var(--control-line);border-radius:8px;background:var(--input);color:var(--ink);padding:0 14px;outline:none}html.layout--xlo-auth .field input::placeholder{color:var(--muted)}html.layout--xlo-auth .field input:focus{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:2px}html.layout--xlo-auth .field input[aria-invalid=true]{border-color:var(--error)}html.layout--xlo-auth .password-wrap{position:relative}html.layout--xlo-auth .password-wrap input{padding-right:48px}html.layout--xlo-auth .password-wrap button{position:absolute;right:3px;top:3px;display:grid;place-items:center;width:40px;height:40px;background:transparent;border:0;border-radius:6px;color:var(--muted)}html.layout--xlo-auth #login-options{display:flex;align-items:center;justify-content:space-between;margin-top:18px;font-size:12px}html.layout--xlo-auth .remember{display:flex;align-items:center;gap:8px;cursor:pointer}html.layout--xlo-auth .remember input{margin:0;accent-color:var(--accent);width:15px;height:15px}html.layout--xlo-auth .text-button{padding:0;border:0;background:transparent;color:var(--link);font-size:inherit}html.layout--xlo-auth .primary{height:44px;width:100%;display:flex;justify-content:center;align-items:center;gap:12px;border:0;border-radius:99px;background:var(--accent);color:var(--on-accent);font-weight:500;transition:transform 150ms var(--ease-out),opacity 150ms ease}html.layout--xlo-auth .primary:active{transform:scale(.98)}html.layout--xlo-auth .primary:disabled{opacity:.65}html.layout--xlo-auth .signup{text-align:center;margin:24px 0 0;color:var(--muted);font-size:12px}html.layout--xlo-auth .signup button{margin-left:6px}html.layout--xlo-auth #feedback{font-size:12px;line-height:1.6;color:var(--error);margin:12px 0;min-height:20px}html.layout--xlo-auth #feedback[data-state=success]{color:var(--ok)}html.layout--xlo-auth #feedback[data-state=info]{color:var(--muted)}html.layout--xlo-auth #sudo-note{font-size:12px;color:var(--muted);margin:20px 0 0;line-height:1.8}html.layout--xlo-auth footer{position:relative;display:flex;justify-content:space-between;padding:0 48px 22px;color:var(--muted);font-size:12px;pointer-events:none}html.layout--xlo-auth .footer-dot{padding:0 8px}html.layout--xlo-auth .preview-tools{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:16px;min-height:66px;padding:12px 24px;border-top:1px solid var(--line);background:var(--surface);font-size:12px}html.layout--xlo-auth .preview-label{color:var(--muted)}html.layout--xlo-auth .view-switch{display:flex;background:var(--input);padding:3px;border-radius:8px}html.layout--xlo-auth .view-switch button{border:0;background:transparent;padding:5px 12px;border-radius:6px;color:var(--muted)}html.layout--xlo-auth .view-switch button[aria-pressed=true]{background:var(--surface);color:var(--link)}html.layout--xlo-auth .scenario-label{display:flex;align-items:center;gap:8px;color:var(--muted)}html.layout--xlo-auth select{border:1px solid var(--control-line);background:var(--input);color:var(--secondary);border-radius:6px;padding:4px 8px;font-size:12px}html.layout--xlo-auth .demo-note{color:var(--muted)}
/* The standard light accent with small white text is 4.1:1. The existing
   darker link token keeps this control in the same palette at > 5:1. */
html.layout--xlo-auth .primary{background:var(--link)}html.layout--xlo-auth.theme--dark .primary{background:var(--accent)}
html.layout--xlo-auth #feedback,html.layout--xlo-auth #feedback[data-state=success]{color:var(--secondary)}
@media(hover:hover) and (pointer:fine){html.layout--xlo-auth .appearance button:hover,html.layout--xlo-auth .password-wrap button:hover{background:var(--input)}html.layout--xlo-auth .text-button:hover{text-decoration:underline}html.layout--xlo-auth .primary:hover{filter:brightness(.96)}}
@media(max-width:600px){html.layout--xlo-auth header{height:76px;padding:0 20px}html.layout--xlo-auth main{padding:24px 20px 40px;min-height:calc(100vh - 260px)}html.layout--xlo-auth .auth{width:100%;max-width:416px;padding:28px 24px}html.layout--xlo-auth footer{padding:0 20px 20px;gap:16px;flex-wrap:wrap}html.layout--xlo-auth .preview-tools{gap:10px 16px;padding:12px 16px}html.layout--xlo-auth .demo-note{flex-basis:100%;text-align:center}html.layout--xlo-auth .field input{font-size:16px}}
@media(prefers-reduced-motion:reduce){html.layout--xlo-auth *,html.layout--xlo-auth *::before,html.layout--xlo-auth *::after{transition:none!important}html.layout--xlo-auth .primary:active{transform:none}}



/* Host overrides limited to the dedicated authentication layout. */
html.layout--xlo-auth body{display:block;margin:0;background:var(--page);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}
.xlo-auth{position:relative;display:flex;flex-direction:column;min-height:100vh;min-height:100svh;color:var(--secondary)}
.xlo-auth #stage{position:fixed;inset:0;overflow:hidden;color:var(--muted)}
.xlo-auth .texture{position:absolute;inset:0;pointer-events:none;contain:strict;font-family:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;color:var(--muted)}
.xlo-auth #stage canvas{position:absolute;display:block}
html.layout--xlo-auth header{height:88px;flex:0 0 88px;justify-content:flex-end;pointer-events:none}.xlo-auth .appearance{pointer-events:auto}
html.layout--xlo-auth main{flex:1;min-height:520px;padding:20px 24px 36px}.xlo-auth .auth{width:416px;padding:36px}
html.layout--xlo-auth h1{margin:0;background:none;border:0;padding:0;font-size:24px;line-height:1.4}
.xlo-auth .field label{font-size:14px;line-height:1.6}.xlo-auth .field input{display:block;margin:0;box-shadow:none}
html.layout--xlo-auth .primary{appearance:none;-webkit-appearance:none;font-size:14px;line-height:44px;padding:0 20px;height:44px;margin:0;cursor:pointer;text-align:center;text-transform:none;box-shadow:none}
html.layout--xlo-auth .auth-submit{margin-top:32px}.xlo-auth .signup a{margin-left:6px}
html.layout--xlo-auth a,html.layout--xlo-auth a:visited{color:var(--secondary)}
html.layout--xlo-auth a:hover{text-decoration:underline}
html.layout--xlo-auth footer{align-items:flex-end;padding:12px 48px 30px;min-height:100px;pointer-events:auto;gap:24px;background:none;border:0;margin:0}
.xlo-auth .signature{display:flex;align-items:center;gap:12px;text-decoration:none}.xlo-auth .signature img{width:40px;height:40px}.xlo-auth .brand-name{display:block;font-size:16px;font-weight:500;color:var(--ink)}.xlo-auth .motto{display:block;margin:2px 0 0;font-size:12px;color:var(--muted)}
.xlo-auth .auth-footer-links{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:flex-end;font-size:12px;color:var(--muted)}
.xlo-auth .auth-oauth{display:block;text-align:center;padding:10px;margin-top:20px;border:1px solid var(--control-line);border-radius:24px;background:var(--input)}
.xlo-auth .auth-methods{margin-top:24px;font-size:12px}.xlo-auth .auth-methods p{margin-bottom:8px}.xlo-auth .sudo-switch{border:1px solid var(--control-line);border-radius:20px;background:transparent;padding:6px 12px;margin:0 8px 8px 0;font-size:12px}
@media(max-width:600px){html.layout--xlo-auth header{height:72px;flex-basis:72px;padding:0 20px}html.layout--xlo-auth main{min-height:460px;padding:16px 20px 28px}.xlo-auth .auth{padding:28px 24px;max-width:416px;width:100%}html.layout--xlo-auth footer{padding:14px 24px 24px;gap:20px;flex-wrap:wrap}.xlo-auth .signature img{width:36px;height:36px}.xlo-auth .brand-name{font-size:14px}.xlo-auth .auth-footer-links{font-size:10px;justify-content:flex-start}}