[hidden] { display: none !important; }
.back-home { color: #6840ad; font-size: 14px; text-decoration: none; }
.account-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: center; gap: 80px; padding: 52px 0; }
.account-story { max-width: 520px; }
.account-story h1 { font-size: clamp(36px, 4vw, 52px); }
.account-story > p:not(.eyebrow) { max-width: 430px; }
.account-orb { position: relative; margin: 42px 0 42px 65px; width: 135px; height: 135px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 28% 18%, #eee5ff, #bd94f4 15%, #7860c5 40%, #414393 68%, #252251 90%); box-shadow: inset 2px 3px 10px #ffffff99, 0 0 45px #9570ec40, 0 24px 35px #6053a32b; }
.account-orb span { color: #fff; font-size: 70px; font-weight: bold; text-shadow: 0 0 16px #fff; }
.account-orb i { position: absolute; inset: -20px -45px; border: 1px solid #9874d477; border-radius: 50%; transform: rotate(-25deg) scaleY(0.45); }
.local-note { font-size: 12px; }
.account-card { padding: 32px; border: 1px solid #e1d7ef; border-radius: 28px; background: #ffffffed; box-shadow: 0 20px 70px #7657a317, inset 0 1px 0 white; }
.account-card h2 { margin: 0; font-size: 28px; color: #392455; letter-spacing: -0.6px; }
.account-subtitle { margin: 10px 0 22px; font-size: 14px; }
.account-tabs { display: flex; gap: 4px; background: #f4effb; border-radius: 12px; padding: 4px; }
.account-tabs button { flex: 1; padding: 10px; border: 0; border-radius: 9px; font: inherit; font-size: 14px; background: transparent; color: #625b75; cursor: pointer; }
.account-tabs button[aria-pressed="true"] { background: #fff; color: #6840ad; font-weight: bold; box-shadow: 0 2px 8px #6840ad10; }
.account-card form { display: flex; flex-direction: column; }
.account-card label:not(.saved-code) { display: block; margin: 16px 0 7px; font-size: 13px; font-weight: bold; color: #493d60; }
.account-card input:not([type="checkbox"]) { width: 100%; min-width: 0; padding: 12px 14px; min-height: 46px; border: 1px solid #d9cfe7; border-radius: 11px; font: inherit; font-size: 15px; background: #fefcff; color: #26213b; }
.account-card input:focus-visible { outline: 2px solid #9570c8; outline-offset: 2px; }
.password-field { position: relative; }
.password-field input { padding-right: 68px !important; }
.password-field button { position: absolute; right: 7px; top: 4px; bottom: 4px; min-width: 48px; border: 0; border-radius: 7px; background: transparent; color: #6840ad; cursor: pointer; font-size: 12px; }
.password-field button:hover { background: #f0e8fb; }
.field-hint { font-size: 12px; margin: 8px 0 0; }
.account-primary, .account-secondary { display: block; width: 100%; padding: 13px 16px; min-height: 46px; margin-top: 20px; border-radius: 12px; font: inherit; font-size: 14px; font-weight: bold; text-align: center; text-decoration: none; cursor: pointer; }
.account-primary { color: #fff; background: #6840ad; border: 1px solid #6840ad; box-shadow: 0 5px 15px #6840ad20; }
.account-primary:hover { background: #54318f; }
.account-secondary { color: #6840ad; border: 1px solid #d1bfe9; background: #f7f2ff; }
.account-card button:disabled { opacity: 0.55; cursor: default; }
.text-button { border: 0; padding: 10px 0; background: none; color: #6840ad; font: inherit; font-size: 13px; cursor: pointer; }
.forgot-link { align-self: flex-end; margin-top: 8px; }
.form-status { font-size: 13px; margin: 16px 0 0; }
.form-status:empty { display: none; }
.form-status.error { color: #a22b48; padding: 10px 12px; background: #fff1f4; border-radius: 10px; }
.account-details { display: flex; flex-direction: column; gap: 8px; padding: 20px; background: #f6f1fc; border-radius: 14px; overflow-wrap: anywhere; font-size: 14px; }
.account-details span { color: #625b75; }
.recovery-box { background: #f6f1fc; border: 1px solid #d8c9ec; border-radius: 16px; padding: 18px; }
.recovery-box h3 { margin: 0; font-size: 16px; color: #493166; }
.recovery-box p { font-size: 13px; }
.recovery-box code { display: block; background: #fff; padding: 14px; font-size: 15px; border-radius: 8px; overflow-wrap: anywhere; user-select: all; }
.saved-code { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; margin-top: 18px; color: #493d60; line-height: 1.5; }
.saved-code input { margin-top: 3px; accent-color: #6840ad; }
@media (max-width: 900px) { .account-layout { gap: 36px; } .account-story h1 { font-size: 40px; } }
@media (max-width: 700px) { .account-layout { grid-template-columns: 1fr; gap: 24px; padding-top: 28px; max-width: 480px; } .account-story h1 { font-size: 36px; } .account-orb { display: none; } .account-card { padding: 24px; } }

.preview-note { margin-top: 28px; padding: 14px 17px; border: 1px solid #dfd3ee; border-radius: 14px; background: #ffffffa0; font-size: 12px; }
.preview-note strong { color: #6840ad; }
.preview-success { display: grid; place-items: center; width: 60px; height: 60px; margin-top: 24px; border-radius: 18px; background: #eee5fa; color: #6840ad; font-size: 28px; }
.account-orb { animation: account-float 6s ease-in-out infinite; }
@keyframes account-float { 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .account-orb { animation: none; } }