.account-header{width:min(1180px,calc(100% - 40px));margin:0 auto;padding:26px 0;display:flex;align-items:center;justify-content:space-between;gap:16px}.account-nav{display:flex;gap:10px;align-items:center}.account-page{width:min(1180px,calc(100% - 40px));margin:0 auto;padding:28px 0 86px}.account-hero-card{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;padding:24px 28px;border:1px solid rgba(255,255,255,.12);border-radius:26px;background:linear-gradient(180deg,rgba(18,24,39,.82),rgba(18,24,39,.56));box-shadow:0 18px 58px rgba(0,0,0,.22)}.account-hero-card h1{font-size:clamp(28px,3.6vw,42px);margin:10px 0 8px;letter-spacing:-.035em}.account-hero-card p:last-child{max-width:620px;margin:0;color:rgba(214,224,242,.76)}.v-avatar{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,#4b7cff,#68e1fd);color:#fff;font-size:28px;font-weight:900;box-shadow:0 14px 34px rgba(75,124,255,.28)}.account-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:18px;margin-top:20px}.account-card{padding:24px;border:1px solid rgba(255,255,255,.11);border-radius:24px;background:linear-gradient(180deg,rgba(18,24,39,.92),rgba(18,24,39,.62));box-shadow:0 18px 60px rgba(0,0,0,.2)}.account-card h3{margin:0 0 18px;font-size:21px}.account-card h3 i{color:#68e1fd;margin-right:9px}.plan-card{display:flex;justify-content:space-between;align-items:center;gap:18px;grid-column:1/-1}.plan-card h2{font-size:30px;margin:8px 0 4px}.muted-label{color:#95a3b8;font-size:13px;text-transform:uppercase;letter-spacing:.08em;font-weight:800}.action-list{display:grid;gap:10px}.action-list button,.action-list a{width:100%;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.06);color:#eef4ff;border-radius:16px;padding:14px 16px;text-align:left;font-weight:800;cursor:pointer}.action-list button:hover,.action-list a:hover{border-color:rgba(104,225,253,.35);background:rgba(255,255,255,.1)}.small-note{font-size:13px;margin:16px 0 0}.payment-card{grid-column:1/-1}.payment-empty{color:#95a3b8}.payment-row{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.09)}.payment-row:last-child{border-bottom:0}.payment-row small{color:#95a3b8}.payment-status{text-transform:capitalize;color:#a9f3ff}.account-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;background:#121827;border:1px solid rgba(104,225,253,.3);box-shadow:0 18px 50px rgba(0,0,0,.35);padding:13px 16px;border-radius:16px;color:#fff;transition:.25s;z-index:1000}.account-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}@media(max-width:760px){.account-header{align-items:flex-start}.account-nav{flex-wrap:wrap;justify-content:flex-end}.account-hero-card{grid-template-columns:1fr}.account-grid{grid-template-columns:1fr}.plan-card{display:block}.plan-card .btn{margin-top:18px;width:100%}.payment-row{grid-template-columns:1fr}}

.account-top-status{
margin:0 0 18px;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
flex-wrap:wrap
}

.account-status-pill{
display:flex;
align-items:center;
gap:10px;
padding:12px 16px;
border-radius:999px;
background:rgba(104,225,253,.08);
border:1px solid rgba(104,225,253,.18);
color:#dff9ff;
font-weight:800
}

.status-dot{
width:10px;
height:10px;
border-radius:50%;
background:#34d399;
box-shadow:0 0 0 6px rgba(52,211,153,.1)
}

.account-status-note{
color:#95a3b8;
font-size:14px
}

.v-avatar{
position:relative;
overflow:hidden
}

.v-avatar span{
position:relative;
z-index:2
}

.v-avatar::after{
content:"";
position:absolute;
inset:-30%;
background:radial-gradient(circle,rgba(255,255,255,.24),transparent 60%);
opacity:.8
}

.plan-badge{
display:inline-flex;
align-items:center;
gap:8px;
padding:8px 14px;
border-radius:999px;
background:rgba(75,124,255,.12);
border:1px solid rgba(75,124,255,.24);
color:#dbeafe;
font-size:13px;
font-weight:800;
margin-top:10px
}

.quick-links-card{
grid-column:1/-1
}

.quick-links-grid{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:12px
}

.quick-links-grid a{
padding:18px;
border-radius:18px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
display:flex;
flex-direction:column;
gap:12px;
align-items:flex-start;
transition:.2s
}

.quick-links-grid a:hover{
transform:translateY(-2px);
border-color:rgba(104,225,253,.34);
background:rgba(255,255,255,.08)
}

.quick-links-grid i{
font-size:20px;
color:#68e1fd
}

.quick-links-grid span{
font-weight:800;
color:#eef4ff
}

.payment-row{
border-radius:16px;
padding:16px;
background:rgba(255,255,255,.03);
margin-bottom:10px;
border:1px solid rgba(255,255,255,.06)
}

.payment-status{
padding:6px 10px;
border-radius:999px;
background:rgba(104,225,253,.08);
border:1px solid rgba(104,225,253,.2)
}

.lang-switcher button.active{
background:linear-gradient(135deg,#4b7cff,#68e1fd);
color:#fff
}

@media(max-width:900px){
.quick-links-grid{
grid-template-columns:repeat(2,minmax(0,1fr))
}
}

@media(max-width:760px){
.account-page{
padding-bottom:120px
}

.account-hero-card{
padding:20px;
gap:14px
}

.account-hero-card h1{
font-size:30px;
margin:8px 0 6px
}

.v-avatar{
width:50px;
height:50px;
border-radius:16px;
font-size:24px
}

.quick-links-grid{
grid-template-columns:1fr
}

.payment-row{
grid-template-columns:1fr!important;
gap:8px
}
}


.memory-card{
grid-column:1/-1
}

.memory-header{
display:flex;
justify-content:space-between;
align-items:flex-start;
gap:20px;
margin-bottom:20px;
flex-wrap:wrap
}

.memory-desc{
margin:8px 0 0;
color:#95a3b8
}

.memory-clear-btn{
border:1px solid rgba(255,255,255,.1);
background:rgba(255,255,255,.045);
color:#cbd5e1;
padding:12px 16px;
border-radius:14px;
cursor:pointer;
font-weight:800
}

.memory-clear-btn:hover{
border-color:rgba(255,150,150,.28);
background:rgba(255,120,120,.06);
color:#fff
}

.memory-list{
display:grid;
gap:14px
}

.memory-item{
padding:16px;
border-radius:20px;
background:rgba(255,255,255,.035);
border:1px solid rgba(255,255,255,.075)
}

.memory-top{
display:flex;
justify-content:space-between;
gap:14px;
align-items:center;
margin-bottom:10px
}

.memory-badge{
display:inline-flex;
align-items:center;
padding:7px 12px;
border-radius:999px;
font-size:12px;
font-weight:800;
background:rgba(104,225,253,.08);
border:1px solid rgba(104,225,253,.22);
color:#dff9ff;
text-transform:capitalize
}

.memory-delete{
border:1px solid rgba(255,255,255,.08);
background:rgba(255,255,255,.035);
color:#cbd5e1;
border-radius:999px;
padding:7px 11px;
cursor:pointer;
font-weight:700
}

.memory-delete:hover{
border-color:rgba(255,150,150,.28);
color:#ffd1d1;
background:rgba(255,120,120,.06)
}

.memory-content{
line-height:1.7;
color:#d7e0ee;
font-size:14px
}

.memory-empty{
color:#95a3b8;
padding:10px 0
}

.memory-view-toggle{
justify-self:start;
border:1px solid rgba(104,225,253,.2);
background:rgba(104,225,253,.07);
color:#dff9ff;
border-radius:999px;
padding:10px 14px;
font-weight:800;
cursor:pointer
}

.memory-view-toggle:hover{
border-color:rgba(104,225,253,.36);
background:rgba(104,225,253,.11)
}

/* 4.9.3.1 CSS-only mobile polish */
@media(max-width:760px){
.account-header{
width:min(100% - 28px,1180px);
gap:12px;
flex-wrap:wrap
}

.account-nav{
width:100%;
justify-content:flex-start;
gap:8px
}

.account-nav .language-selector{
flex:1 1 170px;
min-width:min(100%,170px)
}

.account-nav .language-select-button{
width:100%
}

.account-page{
width:min(100% - 28px,1180px);
padding-top:18px
}

.account-card{
padding:20px
}

.memory-header{
gap:12px
}

.memory-clear-btn,
.memory-delete,
.memory-view-toggle,
.action-list button,
.action-list a{
min-height:44px
}

.memory-clear-btn{
width:100%;
text-align:center
}

.memory-top{
align-items:flex-start;
flex-wrap:wrap
}
}

@media(max-width:480px){
.account-header{
padding:18px 0
}

.account-nav{
display:grid;
grid-template-columns:1fr;
align-items:stretch
}

.account-nav a,
.account-nav button{
width:100%
}
}

html[dir="rtl"] .account-card h3 i{
margin-right:0;
margin-left:9px
}

html[dir="rtl"] .action-list button,
html[dir="rtl"] .action-list a,
html[dir="rtl"] .memory-content,
html[dir="rtl"] .memory-empty{
text-align:right
}