:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#0b0912;color:#eee9fa}*{box-sizing:border-box}body{margin:0;padding:6vh 20px}main{max-width:640px;margin:auto;padding:32px;background:#17121f;border:1px solid #38284e;border-radius:18px;box-shadow:0 20px 80px #0005}a{color:#c9a6ff}.brand{font-size:24px;font-weight:750;text-decoration:none}h1{font-size:30px}p,li{line-height:1.6}button,.button{display:inline-block;background:#8540db;border:0;border-radius:8px;color:white;padding:12px 20px;cursor:pointer;font-weight:650}input,select{max-width:100%;display:block;width:100%;border:1px solid #59416d;border-radius:8px;background:#0d0915;color:white;padding:12px;margin:8px 0 16px}input[type=checkbox]{width:auto;display:inline}label{display:block;margin-top:12px}.errorlist{color:#ffb0ba}ul{padding-left:22px}img,svg{max-width:100%}table{width:100%}

.account-nav{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin:22px 0 26px}.account-nav a{display:inline-block;border:1px solid #59416d;border-radius:8px;padding:9px 13px;text-decoration:none}.account-nav a:hover{background:#2b1e3d}a:focus-visible,button:focus-visible{outline:3px solid #c9a6ff;outline-offset:3px}.account-notice{background:#21182f;border:1px solid #6a458c;border-radius:10px;padding:16px;margin:20px 0}.account-notice p{margin:8px 0 0}.guide-steps{padding-left:24px}.guide-steps li{margin-bottom:18px}input[type=radio]{display:inline-block;width:auto;margin:8px 8px 8px 0}@media(max-width:480px){body{padding:16px 10px}main{padding:22px 18px}h1{font-size:25px}.account-nav a{font-size:14px}}

.brand{display:inline-flex;align-items:center;gap:14px}.brand-logo{display:block;width:64px;height:64px;object-fit:contain;flex-shrink:0}@media(max-width:480px){.brand-logo{width:52px;height:52px}}
.account-signin { background: radial-gradient(ellipse at 45% 8%, #3d205d, #0b0912 62%); min-height: 100vh; }
.account-signin main { border-color: #6a4789; box-shadow: 0 26px 90px #0007, 0 0 40px #54238422; animation: account-enter .4s ease-out both; }
.account-signin .brand-logo { animation: account-float 5.5s ease-in-out infinite; }
.account-progress:not([hidden]) { display: flex; align-items: center; gap: 10px; margin-top: 16px; color: #e2c6ff; }
.account-progress span { width: 16px; height: 16px; border: 2px solid #6e478e; border-top-color: #f1dfff; border-radius: 50%; animation: account-spin .8s linear infinite; }
@keyframes account-enter { from { opacity: 0; transform: translateY(8px); } }
@keyframes account-float { 50% { transform: translateY(-4px); } }
@keyframes account-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .account-signin main, .account-signin .brand-logo, .account-progress span { animation: none; } }