.account-page { min-height:100vh; display:flex; flex-direction:column; }
.account-page [hidden] { display:none !important; }
.account-page button,.account-page input { font:inherit; }
.account-page button { cursor:pointer; }
.account-page button.button { border:0; font-size:12px; font-weight:750; }
.account-page button:disabled { cursor:wait; opacity:.5; }
.account-home { margin-left:auto; color:#a3baad; font-size:12px; }
.account-main { flex:1; padding-block:60px 80px; }
.account-eyebrow { display:block; color:#7eac90; font-size:9px; font-weight:650; letter-spacing:.14em; line-height:1.6; }
.account-page h1 { margin:12px 0 16px; font-size:clamp(32px,4vw,52px); font-weight:900; font-style:italic; line-height:1.03; letter-spacing:-.055em; }
.account-page h1 em,.account-page h2 em { color:var(--green); }
.account-section h1 em { margin-left:.1em; }
.account-subtitle { color:#93ac9d; font-size:13px; line-height:1.7; margin:0 0 28px; }
.account-loading { padding:80px 0; color:#93b3a0; }
.account-gate { display:grid; grid-template-columns:1.1fr 1fr; gap:70px; align-items:center; max-width:1060px; margin:22px auto; }
.account-intro > p { color:#9ab3a4; font-size:14px; line-height:1.8; margin-top:24px; }
.account-intro-mark { display:flex; align-items:center; gap:17px; margin-top:42px; padding-top:24px; border-top:1px solid #243e2e; }
.account-intro-mark img { width:50px; height:50px; object-fit:contain; }
.account-intro-mark span { color:#668573; font-size:9px; letter-spacing:.2em; }
.account-auth-card { border:1px solid #35513f; border-radius:14px; background:linear-gradient(130deg,#14271b,#0d1812); padding:38px; box-shadow:0 20px 90px #0004; }
.account-auth-card h2 { font-size:28px; line-height:1.15; font-style:italic; font-weight:900; letter-spacing:-.045em; margin:10px 0 28px; }
#login-form h2 em { margin-left:.1em; }
.account-auth-card label { display:block; color:#afc6b8; font-size:12px; margin-top:20px; }
.account-auth-card input { display:block; margin-top:9px; width:100%; min-height:49px; border:1px solid #365642; border-radius:6px; background:#080f0b; color:#f0faf4; padding:12px 14px; outline:none; }
.account-auth-card input:focus { border-color:var(--green); box-shadow:0 0 0 3px #00eb7615; }
.account-auth-card input::placeholder { color:#64806f; }
.account-auth-card p { color:#90aa9b; font-size:12px; line-height:1.7; }
.account-forgot { display:block; margin:14px 0 10px auto; border:0; background:none; color:#a9c9b6; font-size:11px !important; }
.account-submit { width:100%; margin-top:12px; justify-content:space-between; }
.account-auth-note { border-top:1px solid #294332; margin-top:25px; padding-top:19px; }
.account-auth-note a { color:#d8eee1; }
.account-status { font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.account-status:empty { display:none; }
.account-status:not(:empty) { color:#f0be83; padding:12px 14px; margin:14px 0; border:1px solid #b38a423b; border-radius:6px; background:#3b2d171f; }
.account-status[data-kind="success"] { color:#99e3b5; border-color:#3d7a4f66; background:#0b332244; }
.account-layout { display:grid; grid-template-columns:246px minmax(0,1fr); gap:52px; }
.account-sidebar { align-self:start; position:sticky; top:115px; }
.account-identity { display:flex; flex-wrap:wrap; gap:16px; margin-bottom:30px; }
.account-avatar { display:grid; place-items:center; width:52px; height:52px; border:1px solid #3d6850; border-radius:12px; background:#163b26; color:#64eea2; font-size:26px; font-weight:850; }
.account-identity > div { min-width:0; width:100%; }
.account-identity strong { display:block; color:#e6f5ec; font-size:20px; margin:6px 0; overflow-wrap:anywhere; }
.account-identity p { color:#8fa699; font-size:11px; overflow-wrap:anywhere; }
.account-nav { display:flex; flex-direction:column; gap:6px; }
.account-nav button { display:flex; align-items:center; text-align:left; gap:12px; min-height:49px; width:100%; padding:0 14px; border:1px solid transparent; border-radius:7px; background:none; color:#91ad9d; font-size:13px; font-weight:650; }
.account-nav button > span { color:#638a73; font-size:9px; }
.account-nav button > b { margin-left:auto; color:#739680; font-size:12px; }
.account-nav button:hover { background:#101f16; }
.account-nav button[aria-current] { color:#eafff0; background:#173924; border-color:#397a4e; box-shadow:inset 3px 0 #00e67b; }
.account-nav button[aria-current] > span { color:#35e897; }
.account-support { display:block; margin-top:36px; padding-top:24px; border-top:1px solid #243c2e; font-size:11px; color:#7f998a; }
.account-support span { display:block; color:#b9d5c4; font-size:12px; margin-top:7px; }
.account-text-button { display:inline-flex; align-items:center; justify-content:space-between; gap:14px; padding:15px 0; border:0; background:none; color:#9bb3a4; font-size:12px !important; }
.account-logout { margin-top:10px; width:100%; color:#b3a19f; }
.account-content { min-width:0; }
.subscription-card { position:relative; isolation:isolate; overflow:hidden; padding:27px 30px 0; border:1px solid #3c704e; border-radius:14px; background:radial-gradient(ellipse at 85% 20%,#1c5937,#112b1c 58%,#102017); }
.subscription-card::before { content:""; z-index:-1; position:absolute; width:340px; height:340px; border:1px solid #92ffc81a; border-radius:50%; top:-90px; right:-45px; box-shadow:0 0 0 45px #92ffc807,0 0 0 90px #92ffc805; }
.subscription-top { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.account-badge { display:inline-flex; width:fit-content; align-items:center; border:1px solid #4bbd7c66; border-radius:5px; background:#123c2666; color:#83efab; padding:5px 9px; font-size:10px; font-weight:650; }
.subscription-main { display:flex; align-items:center; justify-content:space-between; gap:25px; min-height:185px; }
.subscription-label { color:#8cba9e; font-size:11px; }
.subscription-main h2 { font-size:42px; font-weight:900; font-style:italic; letter-spacing:-.055em; margin:5px 0 10px; }
.subscription-main p { color:#aacbb7; font-size:12px; line-height:1.6; }
.subscription-remaining { text-align:center; min-width:120px; }
.subscription-remaining strong { display:block; color:#55f49b; font-size:85px; line-height:1; letter-spacing:-.075em; font-weight:600; }
.subscription-remaining span { display:block; margin-top:6px; font-size:10px; color:#a1c6b0; }
.subscription-bottom { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; min-height:61px; border-top:1px solid #4b946333; padding:15px 0; }
.subscription-bottom > span { color:#8caf99; font-size:10px; }
.account-inline-link { display:flex; gap:16px; color:#beefd1; font-size:11px; }
.subscription-card[data-active="false"] { background:radial-gradient(ellipse at 85% 20%,#4a2625,#201517 65%); border-color:#77483f; }
.subscription-card[data-active="false"] .subscription-remaining strong { color:#ff9290; }
.subscription-card[data-active="false"] .account-badge { border-color:#a0544f; background:#442524; color:#ffb3a7; }
.account-summary-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:17px; }
.account-summary { display:flex; flex-direction:column; text-align:left; gap:17px; padding:22px; border:1px solid #2b4534; border-radius:10px; background:#101c14; color:#ebf6ef; }
.account-summary:hover { border-color:#579b6c; background:#14271b; }
.account-summary > strong { font-size:29px; font-weight:700; line-height:1.2; letter-spacing:-.04em; }
.account-summary > span:last-child { display:flex; justify-content:space-between; gap:9px; color:#9fbaaa; font-size:11px; margin-top:auto; }
.account-download > strong { font-size:20px; font-style:italic; font-weight:850; max-width:180px; }
.account-note { display:flex; gap:16px; align-items:center; padding:22px 0; color:#799687; font-size:12px; line-height:1.7; }
.account-note strong { display:block; color:#adccb9; font-size:12px; margin-bottom:3px; }
.account-note-icon { display:grid; place-items:center; flex-shrink:0; width:38px; height:38px; border:1px solid #2d4a38; border-radius:8px; color:#77c992; font-size:25px; }
.account-device-list { padding:0; margin:0; list-style:none; display:flex; flex-direction:column; gap:10px; }
.account-device-list li { display:flex; align-items:center; gap:16px; padding:20px; border:1px solid #2d4737; border-radius:9px; background:#101e16; }
.account-device-list li > div { min-width:0; flex:1; }
.account-device-list strong { display:block; font-size:14px; overflow-wrap:anywhere; }
.account-device-list p { color:#85a291; font-size:11px; margin:5px 0 0; line-height:1.6; }
.account-device-list button,.account-secondary { border:1px solid #405448; border-radius:6px; background:transparent; color:#baccc0; padding:9px 13px; font-size:11px; }
.account-device-list button:hover:not(:disabled) { color:#ffa8a1; border-color:#9c5b59; }
.account-small-note { color:#708879; font-size:11px; line-height:1.7; margin-top:22px; }
.account-cooldown { margin-bottom:15px; padding:12px; border:1px solid #605733; border-radius:6px; color:#d7c690; font-size:12px; }
.account-security-card { padding:25px; border:1px solid #2b4534; border-radius:10px; margin-bottom:15px; background:#101c14; }
.account-security-card h2 { font-size:19px; margin:12px 0; overflow-wrap:anywhere; }
.account-security-card p { font-size:12px; line-height:1.7; color:#92aa9b; margin:15px 0; }
.account-footer { border-top:1px solid #243b2c; display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:23px; font-size:10px; color:#668472; }
.account-footer div { display:flex; flex-wrap:wrap; gap:20px; }
.account-dialog { position:fixed; inset:0; margin:auto; padding:32px; width:min(470px,calc(100% - 30px)); border:1px solid #654743; border-radius:14px; background:#1a1515; color:#eff7f1; }
.account-dialog::backdrop { background:#020706b8; backdrop-filter:blur(6px); }
.account-dialog h2 { margin:18px 0; font-size:25px; line-height:1.12; font-style:italic; font-weight:900; }
.account-dialog h2 em { color:#ff8f87; }
.account-dialog > strong { display:block; overflow-wrap:anywhere; }
.account-dialog p { margin:15px 0; font-size:12px; line-height:1.7; color:#baa6a3; }
.account-dialog-close { position:absolute; right:13px; top:10px; background:none; border:0; color:#b6a3a1; font-size:24px !important; }
.account-dialog-actions { display:flex; gap:12px; margin-top:24px; }
.account-danger { background:#ed827b; color:#29110e; border:1px solid #ed827b; padding:11px 15px; border-radius:6px; font-size:12px; font-weight:750; }
.account-page :is(button,a):focus-visible { outline:2px solid #a3ffd0; outline-offset:4px; }
.account-preview { background:#382e12; color:#ead399; padding:10px; font-size:11px; margin-bottom:20px; }
@media(max-width:1000px) { .account-layout { grid-template-columns:200px minmax(0,1fr); gap:28px; } .account-gate { gap:35px; } .account-auth-card { padding:27px; } .subscription-card { padding-inline:22px; } }
@media(max-width:800px) { .account-main { padding-block:35px 50px; } .account-layout { display:block; } .account-sidebar { position:static; margin-bottom:32px; } .account-identity { align-items:center; margin-bottom:20px; } .account-identity > div { width:auto; flex:1; } .account-nav { flex-direction:row; } .account-nav button { font-size:12px; padding-inline:10px; gap:7px; } .account-nav button b,.account-sidebar > .account-support { display:none; } .account-logout { width:auto; margin-top:7px; float:right; font-size:10px !important; } .account-sidebar::after { content:""; display:block; clear:both; } .account-gate { grid-template-columns:1fr; max-width:470px; margin-top:0; } .account-intro-mark { display:none; } .account-intro h1 { font-size:37px; } .account-intro > p { margin-top:15px; } .account-home { font-size:11px; } }
@media(max-width:520px) { .account-page .header-inner { gap:12px; } .account-home { display:none; } .account-page .header-download { margin-left:auto; } .account-nav button > span { display:none; } .account-nav button { justify-content:center; } .subscription-main { min-height:175px; gap:12px; } .subscription-main h2 { font-size:34px; } .subscription-remaining { min-width:84px; } .subscription-remaining strong { font-size:64px; } .subscription-card { padding-inline:18px; } .account-summary-grid { gap:10px; } .account-summary { padding:16px 13px; } .account-summary > span:last-child { font-size:10px; } .account-download > strong { font-size:17px; } .account-footer { flex-direction:column; align-items:flex-start; } .account-device-list li { padding:16px; gap:8px; flex-wrap:wrap; } .account-device-list li > div { flex-basis:65%; } .account-dialog { padding:25px; } .account-dialog-actions { flex-wrap:wrap; } }