/* A single quiet header; learning entrances live in the personal center. */
.topbar-inner,body:not(.home-mode) .topbar-inner{min-height:76px;flex-wrap:nowrap}
.top-actions{margin-left:auto;flex-shrink:0;gap:12px}
.personal-entry{display:flex;align-items:center;gap:9px;min-height:44px;padding:5px 10px 5px 5px;border:1px solid transparent;border-radius:13px;color:#655773;font-size:13px;white-space:nowrap;transition:background .18s,border-color .18s,color .18s}
.personal-entry .avatar{display:grid;place-items:center;width:34px;height:34px;flex-shrink:0;background:#f1ecf9;color:#75608f;border-radius:11px;font-size:13px;font-weight:600}
.personal-entry:hover,.personal-entry.active{background:#faf7fd;border-color:#ebe3f3;color:#604982}
.personal-entry:focus-visible{outline:2px solid #a592d4;outline-offset:3px}
.personal-entry-label{display:block}
.main:not(.page-home){min-height:calc(100dvh - 76px)}

/* White cards and small illustrations keep the center easy to scan. */
.main.page-account{max-width:1120px;padding-top:36px}
.account-overview{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 0 25px}
.account-profile{display:flex;align-items:center;gap:17px;min-width:0}
.account-avatar{display:grid;place-items:center;width:64px;height:64px;flex-shrink:0;border:1px solid #e8ddf2;border-radius:21px;background:#f5effb;color:#7b6194;font-size:25px;font-weight:550}
.account-person{min-width:0}
.account-person h1{margin:0;color:#44364f;font-size:27px;font-weight:600;line-height:1.45;letter-spacing:.01em;overflow-wrap:anywhere}
.account-person p{margin:6px 0 0;color:#77687f;font-size:12px;line-height:1.7;overflow-wrap:anywhere}
.account-profile-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}
.main.page-account .account-profile-actions .btn{min-height:44px}
.account-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:29px}
.account-summary-item{display:grid;grid-template-columns:minmax(0,1fr) 20px;grid-template-rows:auto auto;align-items:center;gap:7px 16px;min-width:0;min-height:94px;padding:17px 22px;background:#fff;border:1px solid #e8e2ed;border-radius:17px;color:#554263;text-align:left;cursor:pointer;transition:border-color .18s,box-shadow .18s}
.account-summary-item>span{color:#77687f;font-size:12px;line-height:1.5}
.account-summary-item>strong{grid-column:1;color:#554263;font-size:23px;font-weight:600;line-height:1.45;overflow-wrap:anywhere}
.account-summary-item strong small{margin-left:7px;color:#77687f;font-size:11px;font-weight:400;white-space:nowrap}
.account-summary-item>.icon{grid-column:2;grid-row:1/3;width:18px;height:18px;color:#9b89ac}
.account-summary-item:hover{border-color:#d6c6e5;box-shadow:0 5px 18px #49345206}
.account-section{margin-bottom:25px}
.main.page-account .account-section .section-heading{margin:0 0 15px}
.main.page-account .account-section .section-heading h2{font-size:17px;font-weight:600;letter-spacing:.02em}
.account-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.account-tile{display:grid;grid-template-columns:58px minmax(0,1fr) 15px;align-items:center;gap:12px;min-width:0;min-height:112px;padding:18px 15px;background:#fff;border:1px solid #e8e2ed;border-radius:18px;color:#554263;transition:border-color .18s,box-shadow .18s,transform .18s}
.account-tile-art{display:grid;place-items:center;width:58px;height:62px;background:#f6f1fc;border-radius:15px}
.account-tile:nth-child(4n+2) .account-tile-art{background:#faf6ec}
.account-tile:nth-child(4n+3) .account-tile-art{background:#f0f4fa}
.account-tile:nth-child(4n) .account-tile-art{background:#fbf0f1}
.account-tile-art img{display:block;width:56px;height:58px;object-fit:contain}
.account-tile-copy{display:grid;gap:5px;min-width:0}
.account-tile-copy strong{color:#554263;font-size:15px;font-weight:600;line-height:1.6;overflow-wrap:anywhere}
.account-tile-copy span{color:#77687f;font-size:11px;line-height:1.55;overflow-wrap:anywhere}
.account-tile>.icon{width:15px;height:15px;color:#a494b0}
.account-tile:hover{border-color:#d8c8e7;box-shadow:0 7px 23px #49345207;transform:translateY(-2px)}
.account-summary-item:focus-visible,.account-tile:focus-visible,.account-utility-list>a:focus-visible,.account-utility-list>button:focus-visible{outline:2px solid #a592d4;outline-offset:3px}
.account-utilities{margin:29px 0 0;padding-top:13px;border-top:1px solid #eeecf3}
.account-utility-list{display:flex;align-items:center;flex-wrap:wrap;column-gap:11px;row-gap:4px}
.account-utility-list>a,.account-utility-list>button{display:flex;align-items:center;gap:7px;min-height:44px;padding:9px 10px;border:0;border-radius:9px;background:transparent;color:#77687f;font-size:12px;line-height:1.6;cursor:pointer;transition:background .18s,color .18s}
.account-utility-list>a:hover,.account-utility-list>button:hover{background:#faf7fd;color:#604982}
.account-utility-list .icon{width:16px;height:16px;color:#9784a7}
.account-utility-list [data-action=logout]{margin-left:auto;color:#956a7d}
.main.page-account .footer{margin-top:16px;padding-top:17px;padding-bottom:4px}

@media(max-width:1050px){
 .account-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .account-tile{grid-template-columns:66px minmax(0,1fr) 17px;padding:18px 20px;gap:15px}
 .account-tile-art{width:66px;height:65px}
 .account-tile-art img{width:62px;height:61px}
 .account-tile-copy strong{font-size:16px}
}
@media(max-width:800px){
 .topbar-inner,body:not(.home-mode) .topbar-inner{gap:17px}
 .personal-entry{font-size:12px}
 .account-person h1{font-size:25px}
 .account-overview{gap:17px}
 .account-profile-actions{gap:8px}
}
@media(max-width:600px){
 .topbar-inner,body:not(.home-mode) .topbar-inner{height:76px;min-height:76px;padding:10px 17px;gap:10px}
 .breadcrumb,body:not(.home-mode) .breadcrumb{display:none}
 .top-actions{gap:7px}
 .personal-entry{padding:4px 6px 4px 4px;gap:6px;border-radius:11px;font-size:12px}
 .personal-entry .avatar{width:31px;height:31px;border-radius:10px;font-size:12px}
 .top-actions .login-button{display:inline-flex;min-height:44px;padding:8px 10px;font-size:12px}
 .main.page-account{padding-top:24px}
 .account-overview{display:block;margin-bottom:21px}
 .account-profile{gap:13px}
 .account-avatar{width:55px;height:55px;border-radius:18px;font-size:22px}
 .account-person h1{font-size:24px}
 .account-person p{font-size:11px;margin-top:4px}
 .account-profile-actions{margin-top:17px;flex-wrap:wrap}
 .main.page-account .account-profile-actions .btn{padding:10px 15px;font-size:12px}
 .account-summary{gap:11px;margin-bottom:25px}
 .account-summary-item{padding:14px 15px;gap:5px 8px;min-height:89px;border-radius:14px;grid-template-columns:minmax(0,1fr) 15px}
 .account-summary-item>span{font-size:11px}
 .account-summary-item>strong{font-size:20px}
 .account-summary-item strong small{font-size:10px;margin-left:4px}
 .account-summary-item>.icon{width:15px;height:15px}
 .main.page-account .account-section .section-heading{margin-bottom:12px}
 .main.page-account .account-section .section-heading h2{font-size:16px}
 .account-section{margin-bottom:24px}
 .account-grid{gap:12px}
 .account-tile{grid-template-columns:minmax(0,1fr) 14px;gap:10px 7px;min-height:137px;padding:14px;border-radius:16px}
 .account-tile-art{grid-column:1/3;width:66px;height:63px;margin-bottom:2px;border-radius:14px}
 .account-tile-art img{width:62px;height:61px}
 .account-tile-copy strong{font-size:14px;line-height:1.6}
 .account-tile-copy span{font-size:10px}
 .account-tile>.icon{width:14px;height:14px}
 .account-utilities{margin-top:23px;padding-top:10px}
 .account-utility-list{column-gap:3px;row-gap:0}
 .account-utility-list>a,.account-utility-list>button{padding:9px 8px;font-size:11px}
 .account-utility-list [data-action=logout]{margin-left:0}
 .main.page-account .footer{margin-top:14px;padding-top:16px;gap:10px}
}
@media(max-width:360px){
 .topbar-inner,body:not(.home-mode) .topbar-inner{padding-left:13px;padding-right:13px;gap:7px}
 .top-actions{gap:4px}
 .personal-entry{gap:5px;padding-right:5px;font-size:11px}
 .top-actions .login-button{padding-left:8px;padding-right:8px;font-size:11px}
 .account-tile{padding:12px;gap:9px 5px}
 .account-tile-copy strong{font-size:13px}
 .account-summary-item{padding:13px 12px;gap:5px}
 .account-summary-item>strong{font-size:18px}
}
@media(prefers-reduced-motion:reduce){
 .personal-entry,.account-summary-item,.account-tile,.account-utility-list>a,.account-utility-list>button{transition:none}
 .account-tile:hover{transform:none}
}