:root { color-scheme:dark; --bg:#050910; --text:#edf0f8; --muted:#a3adc1; --line:#a88fc72b; --font:"Outfit","Noto Sans TC",system-ui,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; background:radial-gradient(ellipse at 15% 48%,#2e1c492e,transparent 55%),radial-gradient(ellipse at 95% 0%,#17375022,transparent 45%),var(--bg); color:var(--text); font-family:var(--font); }
a { color:inherit; text-decoration:none; }
a:focus-visible,summary:focus-visible { outline:2px solid #b98eff; outline-offset:5px; border-radius:5px; }
.login-header,.login-footer { width:min(1200px,calc(100% - 64px)); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.login-header { min-height:90px; border-bottom:1px solid #ffffff0d; }
.brand { display:inline-flex; align-items:center; gap:12px; }
.brand img { flex-shrink:0; }
.brand > span { font-size:15px; font-weight:600; letter-spacing:.22em; }
.brand small { display:block; margin-top:3px; color:#8d91a8; font-size:9px; font-weight:400; letter-spacing:.25em; }
.brand,.brand-art { user-select:none; -webkit-touch-callout:none; }
.brand img,.brand-art img { -webkit-user-drag:none; }
.back-link { display:inline-flex; align-items:center; gap:10px; min-height:44px; font-size:12px; color:#aab1c4; }
.back-link:hover,.login-footer a:hover { color:#e0c8ff; }
.login-layout { width:min(1120px,calc(100% - 64px)); margin:0 auto; padding:48px 0; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:center; gap:clamp(36px,7vw,108px); flex:1; }
.eyebrow { margin:0; color:#a397ba; font-size:10px; font-weight:500; letter-spacing:.2em; line-height:1.8; }
.login-story h1 { font-size:clamp(38px,4.1vw,58px); font-weight:700; line-height:1.38; letter-spacing:.035em; margin:20px 0 18px; }
.login-story h1 span { color:#b796fa; background:linear-gradient(100deg,#dac5ff,#a378f0 55%,#80c9ff); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.story-copy { color:var(--muted); font-size:14px; line-height:1.9; margin:0; }
.brand-art { position:relative; display:grid; place-items:center; width:min(100%,370px); aspect-ratio:1; margin:4px auto 0; background:radial-gradient(circle,#7b40c31c,transparent 66%); }
.brand-art img { width:100%; height:auto; filter:drop-shadow(0 0 25px #6f35b423); animation:float 7s ease-in-out infinite; }
.brand-art > span { position:absolute; bottom:6px; color:#827594; font-size:8px; letter-spacing:.3em; }
.story-caption { display:flex; align-items:center; justify-content:space-between; gap:16px; border-top:1px solid var(--line); padding-top:18px; color:#8f96ad; font-size:11px; }
.story-caption > span:first-child { color:#b798da; font-size:9px; letter-spacing:.16em; }
.login-panel { min-width:0; width:100%; max-width:470px; justify-self:end; }
.login-card { border:1px solid #ac8cce38; border-radius:20px; padding:36px; background:linear-gradient(145deg,#151525f5,#0b111bef 65%); box-shadow:0 25px 90px #0004; }
.card-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:15px; }
.card-heading .eyebrow { font-size:9px; letter-spacing:.17em; }
.access-icon { width:38px; height:38px; display:grid; place-items:center; border:1px solid #b286e33b; border-radius:10px; background:#af82ed0c; color:#bd98ea; flex-shrink:0; }
.access-icon svg { width:20px; height:20px; }
.login-card h2 { margin:0 0 12px; font-size:28px; letter-spacing:.02em; font-weight:700; }
.card-intro { color:var(--muted); font-size:13px; line-height:1.9; margin:0; }
.identity-tags { display:flex; flex-wrap:wrap; gap:7px; list-style:none; margin:20px 0 28px; padding:0; }
.identity-tags li { color:#b4a8c7; font-size:10px; padding:5px 9px; border:1px solid #baa1d62b; border-radius:5px; background:#9c7bbc09; }
.discord-login { min-height:54px; padding:13px 17px; display:flex; justify-content:center; align-items:center; gap:12px; border:1px solid #bb8dff78; border-radius:9px; background:linear-gradient(110deg,#8235d7,#6542bd); color:#fff; font-size:14px; font-weight:500; box-shadow:0 6px 24px #7532ca26; transition:transform .2s,box-shadow .2s,background .2s; }
.discord-login svg { flex-shrink:0; }
.discord-login:hover { background:linear-gradient(110deg,#9145e6,#7854d0); box-shadow:0 8px 28px #7532ca45; transform:translateY(-2px); }
.discord-login:active { transform:translateY(0); }
.button-arrow { margin-left:auto; font-size:18px; }
.login-hint { margin:11px 0 23px; text-align:center; color:#858da5; font-size:10px; }
.account-note { display:flex; align-items:center; gap:12px; padding:16px 0 22px; }
.account-note svg { width:20px; height:20px; flex-shrink:0; color:#9c8bb9; }
.account-note p { color:#949eb3; font-size:11px; line-height:1.9; margin:0; }
.login-help { border-top:1px solid var(--line); }
.login-help details + details { border-top:1px solid #ffffff0a; }
.login-help summary { list-style:none; display:flex; justify-content:space-between; align-items:center; gap:10px; min-height:48px; padding:12px 0; cursor:pointer; color:#b9becd; font-size:12px; }
.login-help summary::-webkit-details-marker { display:none; }
.login-help summary > span { font-size:18px; color:#a388bd; transition:transform .2s; }
.login-help details[open] summary > span { transform:rotate(45deg); }
.login-help details p { margin:0; padding:0 0 17px; color:#939eb4; font-size:12px; line-height:1.95; overflow-wrap:anywhere; }
.login-help a { color:#c3a2ef; text-decoration:underline; text-underline-offset:4px; }
.login-message { padding:16px; margin:0 0 18px; border:1px solid #b79a694d; border-radius:8px; background:#c7a1640b; color:#d6c5a9; font-size:13px; line-height:1.85; overflow-wrap:anywhere; }
.login-message p { margin:6px 0 0; }
.login-message--error { color:#f2b7c6; border-color:#e78aa44a; background:#e071910c; }
.guest-note { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:24px 6px 0; }
.guest-note strong { font-size:12px; font-weight:500; color:#bbc1d0; }
.guest-note p { margin:5px 0 0; font-size:11px; color:#8f98ae; }
.guest-note a { display:flex; align-items:center; gap:8px; min-height:44px; font-size:12px; color:#bca1e0; white-space:nowrap; }
.guest-note a:hover { color:#ddc7f9; }
.login-footer { min-height:66px; border-top:1px solid #ffffff0d; color:#788297; font-size:10px; }
.login-footer a { display:inline-flex; align-items:center; min-height:44px; }
@keyframes float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
@media(max-width:800px) {
  .login-header,.login-footer { width:calc(100% - 40px); }
  .login-header { min-height:76px; }
  .login-layout { width:min(470px,calc(100% - 40px)); grid-template-columns:minmax(0,1fr); gap:0; padding:30px 0; }
  .login-story { display:none; }
  .login-card h2 { font-size:26px; }
  .login-panel { justify-self:center; }
}
@media(max-width:400px) {
  .login-header,.login-footer { width:calc(100% - 32px); }
  .login-layout { width:calc(100% - 32px); padding:24px 0; }
  .brand > span { font-size:12px; }
  .brand img { width:33px; height:33px; }
  .brand { gap:9px; }
  .back-link { font-size:11px; gap:5px; }
  .login-card { padding:24px 20px; border-radius:15px; }
  .card-heading .eyebrow { font-size:8px; letter-spacing:.12em; }
  .guest-note { gap:10px; padding-inline:0; }
  .guest-note a { font-size:11px; }
  .login-footer { gap:10px; font-size:9px; }
}
@media(prefers-reduced-motion:reduce) { .brand-art img { animation:none; } .discord-login,.login-help summary > span { transition:none; } }