/* Formal website: retain game identity and give task pages a compact, consistent rhythm. */
@media(min-width:900px){
 .site-header.site-header{display:flex;align-items:center;gap:20px;min-height:64px;height:64px;padding:0 max(44px,calc((100vw - 1360px)/2));aspect-ratio:auto}
 .site-header.site-header>a.brand.header-brand{position:static;inset:auto;flex:none;width:auto;min-width:0;height:100%}
 .site-header.site-header #main-navigation{position:static;inset:auto;display:flex;align-items:center;justify-content:center;flex:1;min-width:0;width:auto;height:100%;gap:clamp(6px,1vw,16px);padding:0;margin:0;background:none;border:0;box-shadow:none;overflow:visible}
 .site-header.site-header #main-navigation>a{position:relative;inset:auto;transform:none;display:flex;align-items:center;justify-content:center;flex:none;width:auto;height:100%;min-height:44px;padding:0 8px;white-space:nowrap;font-size:15px;color:inherit;border:0;background:none}
 .site-header.site-header #main-navigation>a:before{content:none}
 .site-header.site-header #main-navigation>a[data-legacy-recharge-nav]{left:auto}
 .site-header.site-header #account-link{position:static;inset:auto;transform:none;order:2;flex:none;width:auto;max-width:132px;height:44px;min-height:44px;margin:0!important;font-size:14px!important;color:inherit;white-space:nowrap}
 .site-header.site-header #theme-toggle{position:static;inset:auto;transform:none!important;order:3;flex:none;width:36px;height:40px;margin:0!important}
 .site-header.site-header #mobile-menu-toggle{display:none!important}
}
@media(min-width:900px) and (max-width:1100px){
 .site-header.site-header{gap:12px;padding-inline:22px}
 .site-header .header-brand>.header-brand-name{font-size:20px}
 .site-header .header-brand>img{width:32px;height:32px}
 .site-header.site-header #main-navigation{gap:4px}
 .site-header.site-header #main-navigation>a{font-size:14px;padding-inline:4px}
 .site-header.site-header #account-link{font-size:13px!important;max-width:92px}
}
#app .account-page{--task-soft:var(--soft);max-width:1328px;padding-top:32px;padding-bottom:48px;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}
#app .account-page>.section-title{align-items:center;margin:0 0 28px;padding:0 0 20px;border:0;border-bottom:1px solid var(--line);text-align:left}
#app .account-page>.section-title>div{text-align:left}
#app .account-page>.section-title .eyebrow{display:none}
#app .account-page>.section-title h1{font-size:28px;line-height:1.4;text-align:left;margin:0;font-family:inherit;letter-spacing:0}
#app .account-page>.section-title #logout{min-height:40px;padding:8px 16px;font-size:14px}
#app .account-page .account-layout{grid-template-columns:184px minmax(0,1fr);gap:32px;align-items:start}
#app .account-page .side-nav{gap:4px;padding:0;background:none;border:0}
#app .account-page .side-nav>a{display:flex;align-items:center;min-height:44px;padding:9px 14px;border:0;border-radius:5px;font-size:14px;background:none;color:var(--muted)}
#app .account-page .side-nav>a:hover{background:var(--task-soft,var(--soft));color:var(--text)}
#app .account-page .side-nav>a[aria-current]{background:var(--task-soft,var(--soft));color:var(--text);font-weight:650;box-shadow:inset 3px 0 var(--accent)}
#app .account-page .account-layout>div{min-width:0}
#app .account-page .account-layout h2{font:650 22px/1.45 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;text-align:left;margin:0 0 20px}
#app .account-page .account-layout h3{font:650 18px/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;text-align:left;margin:0 0 12px}
#app .account-page .account-layout .card{padding:24px;border:1px solid var(--line);border-radius:8px;background:var(--panel);box-shadow:none;text-align:left}
#app .account-page .commerce-tabs{justify-content:flex-start;gap:8px;margin:0 0 20px;padding:0 0 16px;border-bottom:1px solid var(--line)}
#app .account-page .commerce-tabs>button{min-height:44px;padding:10px 16px;font-size:14px;border:0;border-radius:5px;background:none;color:var(--muted)}
#app .account-page .commerce-tabs>button[aria-current="page"]{background:var(--task-soft,var(--soft));color:var(--text);font-weight:650}
#app .account-page .legacy-payment-entry{max-width:820px;margin:0;text-align:left}
#app .account-page .legacy-payment-entry p{margin:0;color:var(--muted);font-size:15px}
#app .account-page .legacy-payment-entry .actions{justify-content:flex-end;margin:24px 0 0;gap:12px;padding-top:20px;border-top:1px solid var(--line)}
#app .account-page .legacy-payment-entry .actions .button{min-width:128px;margin:0}
#app .account-page .card>.actions,#app .account-page form>.actions{justify-content:flex-end;gap:12px}
#app .account-page form>button.primary:last-child,#app .account-page .card>a.button:last-child{margin-left:auto;display:flex;width:max-content;max-width:100%}
#app .account-page :is(.account-record-panel,.account-history){min-width:0}
#app .account-page .account-history{margin-top:20px}
#app .account-page .account-history>summary{min-height:44px;padding:10px 0;font-size:15px}
#app .account-page :is(input,textarea,.site-select>button){font-family:inherit}
#app .account-page .table-scroll{border-radius:6px}
#app .account-page :is(td,th){font-size:14px}
#app .account-page :is(.button,button,input,textarea){max-width:100%}
#app .article-content strong{font-weight:650;color:var(--text)}
@media(max-width:760px){
 #app .account-page{padding:24px 18px 32px}
 #app .account-page>.section-title{margin-bottom:20px;padding-bottom:16px;gap:12px}
 #app .account-page>.section-title h1{font-size:24px}
 #app .account-page>.section-title #logout{min-height:40px;padding:8px 12px;font-size:13px}
 #app .account-page .account-layout{grid-template-columns:minmax(0,1fr);gap:20px}
 #app .account-page .account-mobile-nav{margin:0 0 20px;gap:7px;font-size:13px}
 #app .account-page .commerce-tabs{gap:4px;margin-bottom:16px;padding-bottom:12px}
 #app .account-page .commerce-tabs>button{flex:1;min-width:0;padding:10px 8px;font-size:14px;white-space:nowrap}
 #app .account-page .account-layout .card{padding:20px;border-radius:7px}
 #app .account-page .account-layout h2{font-size:20px;margin-bottom:16px}
 #app .account-page .legacy-payment-entry .actions{margin-top:20px;padding-top:16px}
 #app .account-page .account-layout h3{font-size:18px}
 #app .account-page .card>.actions,#app .account-page form>.actions{justify-content:flex-end}
}

html[data-theme="dark"] #app .account-page{--task-soft:#202a25}
/* Override the older account centering and border-removal rules only in these task panels. */
#app>.page.account-page:has(.account-layout)>.section-title{display:flex;grid-template-columns:none;justify-content:space-between}
#app>.page.account-page:has(.account-layout)>.section-title>div{grid-column:auto;text-align:left}
#app .account-page #native-checkout-panel .legacy-payment-entry{border:1px solid var(--line)!important;border-radius:8px!important;background:var(--panel)!important;padding:24px}
#app .account-page #native-checkout-panel .legacy-payment-entry h3{text-align:left}
@media(max-width:760px){#app .account-page #native-checkout-panel .legacy-payment-entry{padding:20px}}
#app .account-page #native-checkout-panel{background:transparent!important;border:0!important;padding:0}
#app .account-page #native-checkout-panel .legacy-payment-entry{width:100%;max-width:820px!important;margin:0!important}
#app .account-page #native-checkout-panel .legacy-payment-entry h3{margin-bottom:12px}