.account-page [hidden]{display:none!important}
.account-page{min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(circle at 16% 35%,rgba(23,91,199,.18),transparent 35%),linear-gradient(135deg,#07172d,#030a17 75%)}
.account-header{height:104px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.account-header .brand img{width:210px;height:54px}
.account-back{color:#c8daf4;font-size:14px;font-weight:700;display:inline-flex;gap:9px;align-items:center}
.account-back:hover,.account-privacy a:hover,.account-switch a:hover,.account-footer a:hover{color:#79bdff}
.account-layout{width:min(1120px,calc(100% - 40px));min-height:calc(100vh - 172px);display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,470px);gap:clamp(45px,8vw,110px);align-items:center;padding:38px 0 64px}
.account-intro{padding:20px 0 30px}
.account-intro h1{font-family:"Space Grotesk",Inter,sans-serif;font-size:clamp(52px,6.7vw,84px);line-height:1.04;letter-spacing:-.065em;margin:4px 0 28px}
.account-intro h1 span{background:linear-gradient(90deg,#a6dbff,#2f85ff);color:transparent;background-clip:text;-webkit-background-clip:text}
.account-intro>p:not(.account-privacy){color:#bdcce1;font-size:17px;line-height:1.75;max-width:490px}
.account-benefits{margin:46px 0 44px;display:grid;gap:20px}
.account-benefits>div{display:flex;align-items:center;gap:16px}
.benefit-icon{width:46px;height:46px;flex:none;display:grid;place-items:center;border-radius:14px;border:1px solid rgba(103,164,255,.3);background:rgba(25,93,190,.18);font-family:"Space Grotesk",Inter,sans-serif;font-size:13px;color:#8ecbff}
.account-benefits strong,.account-benefits small{display:block}
.account-benefits strong{font-size:15px;margin-bottom:4px}
.account-benefits small{color:#aebed4;font-size:13px}
.account-privacy{font-size:13px;color:#8fa4c3;line-height:1.65}
.account-privacy a,.account-switch a,.account-footer a{text-decoration:underline;text-underline-offset:3px;color:#acd4ff}
.account-card{padding:clamp(28px,4vw,46px);background:linear-gradient(155deg,rgba(16,40,77,.97),rgba(7,23,46,.97));border:1px solid rgba(108,164,249,.22);border-radius:30px;box-shadow:0 35px 90px rgba(0,0,0,.35),0 0 80px rgba(29,101,211,.1);position:relative;overflow:hidden}
.account-card:before{content:"";position:absolute;top:-120px;right:-120px;width:240px;height:240px;border-radius:50%;background:#148bff;filter:blur(90px);opacity:.2;pointer-events:none}
.account-card>*{position:relative}
.account-kicker{text-transform:uppercase;letter-spacing:.18em;font-weight:800;color:#8fc6ff;font-size:11px;margin-bottom:14px}
.account-card h2{font-family:"Space Grotesk",Inter,sans-serif;font-size:clamp(31px,3.2vw,40px);letter-spacing:-.045em;line-height:1.15}
.card-subtitle{color:#acbfd9;font-size:14px;line-height:1.65;margin:11px 0 25px}
.account-tabs{display:grid;grid-template-columns:1fr 1fr;padding:5px;border-radius:13px;background:#06152c;border:1px solid rgba(127,170,239,.13);margin-bottom:27px}
.account-tabs a{text-align:center;padding:11px 8px;border-radius:9px;font-weight:750;color:#aabdd7;font-size:13px}
.account-tabs a[aria-current="page"]{background:#184a91;color:white;box-shadow:0 6px 20px rgba(0,0,0,.2)}
.account-form{display:grid;gap:10px}
.account-form label{font-size:13px;font-weight:750;color:#e0ebfa;margin-top:7px}
.account-form input{width:100%;height:50px;border-radius:11px;border:1px solid #345074;background:#081a33;color:#fff;padding:0 15px;outline:none;transition:border-color .2s,box-shadow .2s}
.account-form input::placeholder{color:#7991b0}
.account-form input:focus{border-color:#6bb7ff;box-shadow:0 0 0 3px rgba(55,143,255,.18)}
.account-form .btn{margin-top:16px;cursor:pointer;font-size:15px}
.account-form .btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.field-hint{color:#96abc8;font-size:12px;line-height:1.5;margin:-2px 0 2px}
.form-message{background:#4e2430;color:#ffe2e5;padding:12px 15px;border:1px solid #a95468;border-radius:10px;font-size:13px;line-height:1.5;margin:0 0 18px}
.account-switch{text-align:center;color:#aebfd7;font-size:13px;margin-top:26px}
.account-avatar{height:60px;width:60px;display:grid;place-items:center;border-radius:18px;background:linear-gradient(135deg,#287eff,#0c477d);font-family:"Space Grotesk";font-size:28px;font-weight:700;margin:12px 0 22px}
.account-detail{display:flex;justify-content:space-between;gap:16px;padding:17px 0;border-bottom:1px solid rgba(133,171,229,.14);font-size:14px}
.account-detail span{color:#a6b9d3}
.account-detail strong{text-align:right;overflow-wrap:anywhere}
.account-next{padding:22px;margin:27px 0 18px;border:1px solid rgba(94,162,249,.22);border-radius:16px;background:rgba(27,90,174,.18)}
.account-next strong{font-size:15px}.account-next p{font-size:13px;color:#afc3dc;margin:8px 0 16px}.account-next a{font-size:13px;color:#9ed1ff;font-weight:750}
.logout-form .btn{cursor:pointer}
.account-footer{display:flex;justify-content:space-between;gap:20px;padding:20px 0 32px;color:#8da3c2;font-size:12px;border-top:1px solid rgba(102,157,241,.12)}
.account-page :focus-visible{outline:3px solid #88c9ff;outline-offset:3px}
@media(max-width:800px){.account-layout{grid-template-columns:1fr;gap:12px;max-width:560px;padding-top:30px}.account-intro{padding-bottom:0}.account-intro h1{font-size:clamp(49px,10vw,65px)}.account-benefits{display:none}.account-privacy{margin:18px 0 0}.account-header{height:82px}.account-header .brand img{width:180px}.account-footer{max-width:560px;width:calc(100% - 40px)}}
@media(max-width:480px){.account-header,.account-layout{width:calc(100% - 28px)}.account-header .brand img{width:155px}.account-back{font-size:12px}.account-card{padding:25px 20px;border-radius:22px}.account-intro>p:not(.account-privacy){font-size:15px}.account-detail{display:block}.account-detail strong{display:block;text-align:left;margin-top:5px}}
