.account-page { --cyan: #63ded3; --red: #ff7188; --muted: #92a6a5; }
.account-page::before { opacity: .10; }
.account-page .shell { width: min(1040px, calc(100% - 28px)); }
.account-page .topbar { margin-bottom: 16px; }
.account-nav { display: flex; align-items: center; gap: 18px; }
.account-nav a { color: #acd0cc; font-size: 12px; text-decoration: none; transition: color .2s, transform .2s; }
.account-nav a:hover { color: var(--cyan); transform: translateX(-2px); }
.account-hero { min-height: 210px; padding-right: min(300px, 28vw); animation: account-enter .65s ease both; }
.account-hero h1 { letter-spacing: .08em; }
.account-hero .lead { max-width: 560px; }
.hero-status { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; color: #9deee2; font-size: 12px; letter-spacing: .07em; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); animation: signal-pulse 1.8s ease-in-out infinite; }
.signal-orbit { position: absolute; right: 32px; top: 50%; width: 190px; height: 190px; transform: translateY(-50%); border: 1px solid #286f6a; border-radius: 50%; opacity: .68; }
.signal-orbit::before, .signal-orbit::after { content: ""; position: absolute; inset: 20px; border: 1px dashed #1f5652; border-radius: 50%; }
.signal-orbit::after { inset: 48px; border-style: solid; border-color: #4db6aa; animation: orbit-spin 16s linear infinite; }
.signal-orbit i { position: absolute; left: 50%; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); animation: orbit-dot 4.2s ease-in-out infinite; }
.signal-orbit i:nth-child(2) { top: auto; left: auto; right: 7px; bottom: 44px; animation-delay: -1.4s; }
.signal-orbit i:nth-child(3) { top: auto; left: 28px; bottom: 18px; animation-delay: -2.8s; }
.account-grid { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(280px, .68fr); gap: 14px; margin-top: 14px; }
.account-panel, .account-aside { animation: account-enter .65s ease both; animation-delay: .08s; }
.account-aside { animation-delay: .16s; }
.account-page .panel { border-color: #27504d; }
.account-page .panel-body { padding: clamp(18px, 3vw, 30px); }
.account-page input { width: 100%; min-height: 46px; border: 1px solid #315653; border-radius: 5px; padding: 10px 12px; color: var(--text); background: #050b0a; transition: border-color .2s, box-shadow .2s, background .2s; }
.account-page input:focus { border-color: var(--cyan); background: #071513; box-shadow: 0 0 0 3px #63ded314, 0 0 18px #63ded31c; outline: none; }
.account-page .field { margin-bottom: 18px; }
.field-hint, .aside-footnote, .next-note { margin: 8px 0 0; color: #77918e; font-size: 12px; line-height: 1.65; }
.password-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.password-meter { height: 21px; margin: -7px 0 18px; border-bottom: 1px solid #24403e; color: #77918e; font-size: 11px; }
.password-meter span { display: block; width: 0; height: 2px; background: var(--cyan); box-shadow: 0 0 9px #63ded3; transition: width .3s, background .3s; }
.password-meter small { display: block; padding-top: 4px; }
.account-submit { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 48px; overflow: hidden; border: 1px solid var(--cyan); border-radius: 5px; background: #63ded3; color: #061b1a; font-weight: 700; box-shadow: 0 4px 18px #63ded31a; transition: transform .2s, box-shadow .2s, background .2s; }
.account-submit:hover { transform: translateY(-2px); background: #a2f4ea; box-shadow: 0 8px 28px #63ded33a; }
.account-submit:active { transform: translateY(0); }
.button-arrow { font-size: 18px; transition: transform .2s; }
.account-submit:hover .button-arrow { transform: translateX(4px); }
.button-sheen { position: absolute; inset: 0 auto 0 -70%; width: 45%; transform: skewX(-20deg); background: #ffffff75; animation: button-sheen 4.5s ease-in-out infinite; pointer-events: none; }
.account-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin: 0 0 26px; padding: 0; list-style: none; }
.account-steps li { padding: 10px; border: 1px solid #1d3b39; border-radius: 5px; color: #667b79; background: #050b0a; transition: color .25s, border-color .25s, background .25s, transform .25s; }
.account-steps li span, .account-steps li strong, .account-steps li small { display: block; }
.account-steps li span { margin-bottom: 4px; font-size: 10px; }
.account-steps li strong { font-size: 12px; font-weight: 500; }
.account-steps li small { margin-top: 4px; color: #536865; font-size: 10px; }
.account-steps li.is-active { border-color: var(--cyan); color: #c7faf4; background: #63ded312; transform: translateY(-2px); }
.account-steps li.is-complete { border-color: #286f58; color: #5ee89a; background: #5ee89a0a; }
.account-steps li.is-complete span::after { content: " ✓"; }
.form-stage { animation: stage-enter .35s ease both; }
.form-stage[hidden] { display: none; }
.verify-intro, .success-signal { display: flex; align-items: center; gap: 14px; margin: 4px 0 24px; padding: 14px; border: 1px dashed #286f6a; border-radius: 6px; background: #63ded309; }
.verify-glyph { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; color: var(--cyan); font-size: 24px; animation: signal-pulse 1.8s ease-in-out infinite; }
.verify-intro strong, .success-signal strong { color: #c7faf4; }
.verify-intro p, .success-signal p { margin: 4px 0 0; color: #86a7a3; font-size: 12px; line-height: 1.5; }
.verify-intro b { color: var(--cyan); font-weight: 500; overflow-wrap: anywhere; }
.code-field input { height: 64px; text-align: center; color: var(--cyan); font-size: 28px; letter-spacing: .42em; }
.verify-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.verify-actions .btn-quiet { min-height: 48px; white-space: nowrap; }
.text-button { margin-top: 14px; border: 0; padding: 0; color: #89aaa6; background: none; font-size: 12px; }
.text-button:hover { color: var(--cyan); }
.success-ring { display: grid; width: 48px; height: 48px; flex: 0 0 auto; place-items: center; border: 1px solid var(--cyan); border-radius: 50%; color: var(--cyan); font-size: 24px; box-shadow: 0 0 20px #63ded32e; animation: success-pop .55s ease both; }
.identity-card { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 14px; margin: 18px 0; padding: 14px; border: 1px solid #24403e; border-radius: 5px; background: #050b0a; }
.identity-card small { color: #66817d; font-size: 10px; }
.identity-card strong { min-width: 0; color: #c7faf4; font-size: 13px; overflow-wrap: anywhere; }
.link-button { text-decoration: none; }
.weave-lines { display: flex; gap: 5px; height: 86px; margin: 0 0 18px; align-items: flex-end; overflow: hidden; }
.weave-lines span { flex: 1; height: 24%; border: 1px solid #286f6a; background: #63ded30a; animation: weave-rise 2.8s ease-in-out infinite alternate; }
.weave-lines span:nth-child(2) { height: 58%; animation-delay: -.7s; }
.weave-lines span:nth-child(3) { height: 88%; animation-delay: -1.4s; }
.weave-lines span:nth-child(4) { height: 42%; animation-delay: -2.1s; }
.account-page .identity-slip { margin-top: 26px; }
.account-page .notice { margin-top: 16px; border-radius: 5px; overflow-wrap: anywhere; }
@keyframes account-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes stage-enter { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } }
@keyframes signal-pulse { 0%, 100% { opacity: .45; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes orbit-dot { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(174px); } }
@keyframes button-sheen { 0%, 55% { left: -70%; } 80%, 100% { left: 135%; } }
@keyframes success-pop { from { opacity: 0; transform: scale(.65); } to { opacity: 1; transform: scale(1); } }
@keyframes weave-rise { from { transform: scaleY(.72); opacity: .35; } to { transform: scaleY(1); opacity: .9; } }
@media (max-width: 760px) { .account-hero { padding-right: 28px; } .signal-orbit { display: none; } .account-grid { grid-template-columns: 1fr; } .account-aside { order: 2; } }
@media (max-width: 520px) { .account-page .shell { width: calc(100% - 20px); } .account-nav a { display: none; } .password-grid, .verify-actions, .identity-card { grid-template-columns: 1fr; } .account-steps li small { display: none; } .code-field input { font-size: 24px; letter-spacing: .3em; } }
@media (prefers-reduced-motion: reduce) { .account-page *, .account-page *::before, .account-page *::after { animation: none !important; transition: none !important; } }