.account-page { padding-top:2rem; padding-bottom:3rem; }
.account-hero { display:flex; align-items:center; gap:1.4rem; padding:2rem; border:1px solid var(--color-border); border-radius:22px; background:radial-gradient(ellipse at 95% 0,var(--color-surface-alt),transparent 65%),var(--color-surface); box-shadow:var(--shadow-sm); margin-bottom:2rem; }
.account-avatar { width:78px; height:78px; flex-shrink:0; border-radius:24px; display:grid; place-items:center; background:var(--color-primary); color:var(--color-primary-contrast); font-size:1.7rem; font-weight:800; letter-spacing:-.05em; }
.account-welcome { min-width:0; flex:1; }
.account-welcome h1 { font-size:clamp(1.5rem,3vw,2.2rem); margin:0 0 .4rem; letter-spacing:-.035em; overflow-wrap:anywhere; }
.account-welcome > p:not(.account-eyebrow) { margin:0 0 .7rem; color:var(--color-muted); overflow-wrap:anywhere; }
.account-eyebrow { color:var(--color-primary); text-transform:uppercase; font-size:.7rem; font-weight:800; letter-spacing:.12em; margin:0 0 .45rem; }
.account-section-heading,.account-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.account-page h2 { margin:0; font-size:1.15rem; letter-spacing:-.025em; }
.account-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin:0 0 1.5rem; }
.account-stat { padding:1.25rem; border:1px solid var(--color-border); background:var(--color-surface); border-radius:16px; }
.account-stat dt { color:var(--color-muted); font-size:.8rem; margin-bottom:.65rem; }
.account-stat dd { margin:0; font-size:clamp(1.5rem,3vw,2rem); font-weight:800; letter-spacing:-.04em; color:var(--color-primary); }
.account-stat small { font-size:.75rem; font-weight:500; letter-spacing:0; color:var(--color-muted); margin-left:.25rem; }
.account-layout { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:1.25rem; margin-bottom:1.25rem; }
.account-panel { padding:1.5rem; background:var(--color-surface); border:1px solid var(--color-border); border-radius:18px; min-width:0; }
.account-muted,.account-footnote { color:var(--color-muted); font-size:.88rem; line-height:1.6; }
.account-footnote { font-size:.78rem; margin:1rem 0; }
.account-footnote a { color:var(--color-primary); font-weight:600; }
.account-data { margin:0; }
.account-data > div { display:flex; justify-content:space-between; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--color-border); font-size:.85rem; }
.account-data dt { color:var(--color-muted); flex-shrink:0; }
.account-data dd { text-align:right; overflow-wrap:anywhere; margin:0; font-weight:600; min-width:0; }
.account-fee { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem; background:var(--color-surface-alt); border-radius:10px; padding:.85rem 1rem; font-size:.82rem; }
.account-security { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.account-security p:last-child { margin-bottom:0; }
.account-actions { display:flex; flex-wrap:wrap; gap:.6rem; flex-shrink:0; }
.account-signout { color:var(--color-danger); }
.account-routes { list-style:none; padding:0; margin:0; }
.account-route { display:flex; gap:1rem; align-items:center; padding:1rem 0; border-bottom:1px solid var(--color-border); }
.account-routes li:last-child .account-route { border:0; padding-bottom:0; }
.account-route:hover strong { color:var(--color-primary); }
.account-date { width:48px; flex-shrink:0; text-align:center; padding:.45rem; border-radius:10px; background:var(--color-surface-alt); color:var(--color-primary); }
.account-date b { display:block; font-size:1.2rem; line-height:1.2; }
.account-date small { font-size:.65rem; text-transform:uppercase; }
.account-route-text { min-width:0; flex:1; }
.account-route strong { display:block; font-size:.94rem; overflow-wrap:anywhere; }
.account-route p { margin:.3rem 0 0; color:var(--color-muted); font-size:.77rem; overflow-wrap:anywhere; }
.account-empty { text-align:center; padding:1.7rem .7rem; color:var(--color-muted); }
.account-empty strong { color:var(--color-text); display:block; margin-bottom:.5rem; }
@media(max-width:760px) { .account-page { padding-top:1rem; padding-bottom:1.5rem; } .account-hero { padding:1.25rem; gap:1rem; flex-wrap:wrap; margin-bottom:1.4rem; } .account-avatar { width:56px; height:56px; border-radius:18px; font-size:1.25rem; } .account-welcome { flex-basis:calc(100% - 72px); } .account-hero > .btn { width:100%; } .account-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; margin-bottom:1rem; } .account-stat { padding:1rem; } .account-layout { grid-template-columns:1fr; gap:1rem; } .account-panel { padding:1.1rem; } .account-security { align-items:stretch; flex-direction:column; gap:1rem; } .account-actions { flex-direction:column; } .account-section-heading { align-items:flex-start; } .account-section-heading .btn { font-size:.72rem; padding:.5rem .7rem; } .account-page h2 { font-size:1rem; } }