.account-main { min-height: calc(100vh - 50px); padding: 110px 20px 80px; background: radial-gradient(circle at 8% 12%,rgba(0,212,255,.07),transparent 24rem),radial-gradient(circle at 92% 88%,rgba(63,185,80,.06),transparent 24rem),#fff; }
.account-shell { display: grid; grid-template-columns: .9fr 1.1fr; width: min(100%, 960px); min-height: 600px; margin: 0 auto; overflow: hidden; border: 1px solid #dce8eb; border-radius: 22px; background: #fff; box-shadow: 0 24px 64px rgba(31,66,78,.11); }
.account-story { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(34px,5vw,58px); background: linear-gradient(150deg,rgba(0,212,255,.1),transparent 52%),linear-gradient(330deg,rgba(63,185,80,.08),transparent 56%),#f7fbfc; }
.account-eyebrow { margin: 0 0 14px; color: #00d4ff; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.account-story h1 { max-width: 420px; margin: 0 0 18px; color: #0b1d2a; font-size: clamp(38px,5vw,58px); line-height: 1.02; letter-spacing: -.04em; }
.account-story > div > p:last-child { max-width: 430px; color: #385767; font-size: 16px; line-height: 1.7; }
.account-privacy-note { margin-top: 32px; color: #607d89; font-size: 12px; line-height: 1.55; }
.account-panel { padding: clamp(30px,5vw,56px); background: rgba(255,255,255,.96); }
.account-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; border: 1px solid #cfe4e9; border-radius: 11px; background: #edf6f8; }
.account-tab { min-height: 42px; border: 0; border-radius: 8px; color: #54717e; background: transparent; font-weight: 700; cursor: pointer; }
.account-tab.is-active { color: #071c26; background: #fff; box-shadow: 0 3px 14px rgba(28,93,108,.14); }
.account-view h2,.account-session h2 { margin: 30px 0 5px; font-size: 27px; }
.account-view h2,.account-session h2 { color: #0b1d2a; }
.account-subtitle { margin: 0 0 24px; color: #607987; font-size: 14px; line-height: 1.6; }
.account-view label { display: block; margin: 0 0 7px; color: #284653; font-size: 13px; font-weight: 700; }
.account-view input { width: 100%; min-height: 46px; margin: 0 0 17px; padding: 11px 13px; border: 1px solid #bdd8de; border-radius: 9px; outline: 0; color: #112c39; background: #fff; }
.account-view input:focus { border-color: #00b9da; box-shadow: 0 0 0 3px rgba(0,212,255,.12); }
.account-password-field { position: relative; }
.account-password-field input { padding-inline-end: 76px; }
.account-reveal { position: absolute; top: 7px; inset-inline-end: 8px; min-height: 32px; padding: 0 8px; border: 0; color: #77d9e8; background: transparent; cursor: pointer; }
.account-submit { width: 100%; min-height: 47px; margin-top: 5px; border: 0; border-radius: 9px; color: #071218; background: linear-gradient(105deg,#00d4ff,#3fb950); font-weight: 800; cursor: pointer; }
.account-submit:disabled { cursor: wait; filter: grayscale(.35); opacity: .65; }
.account-anti-state { margin: -6px 0 13px; color: #607987; font-size: 12px; }
.account-anti-state.is-ready { color: #55c970; }
.account-status { display: none; margin-top: 18px; padding: 12px 13px; border-radius: 8px; font-size: 13px; line-height: 1.5; }
.account-status.is-visible { display: block; }
.account-status.is-error { color: #ffb1b8; border: 1px solid #6c3037; background: #2b171c; }
.account-status.is-success { color: #91e4a3; border: 1px solid #2f653c; background: #14251a; }
.account-status.is-info { color: #9dddea; border: 1px solid #285b68; background: #12242a; }
.account-user-card { display: flex; align-items: center; gap: 13px; padding: 18px; border: 1px solid #c9e0e5; border-radius: 12px; background: #f4fafb; }
.account-avatar { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; color: #071218; background: #00d4ff; font-weight: 800; }
.account-user-card strong,.account-user-card span { display: block; }
.account-user-card span { color: #607987; font-size: 13px; }
.account-session-actions { display: flex; gap: 10px; margin-top: 16px; }
.account-session-actions button { min-height: 40px; padding: 0 14px; border: 1px solid #abd3dc; border-radius: 8px; color: #12323f; background: #eaf7f9; cursor: pointer; }
@media (max-width: 760px) { .account-main { padding: 78px 12px 48px; } .account-shell { grid-template-columns: 1fr; border-radius: 16px; } .account-story { min-height: 245px; padding: 30px; } .account-story h1 { font-size: 38px; } .account-panel { padding: 28px 22px 34px; } }