/* Clearer type scale, rhythm, and touch behavior across the account center. */
body{font-size:14px;line-height:1.65;letter-spacing:0}
.section-kicker{font-size:10px;letter-spacing:1.35px}
.topbar-title h1{font-size:21px;line-height:1.3;letter-spacing:-.45px}
.card-heading h3{font-size:16px;line-height:1.35}
.section-intro h2{font-size:25px;line-height:1.25;letter-spacing:-.55px}
.section-intro p{font-size:13.5px;line-height:1.7}
.auth-card label{font-size:13px}
.auth-card .muted{font-size:12.5px}
.auth-card-foot{font-size:11px}
.remember-row small{font-size:11px}
.nav-item{font-size:13px}
.side-status b{font-size:11px}
.side-status small{font-size:10px}
.welcome-row h2{font-size:27px;line-height:1.25;letter-spacing:-.6px}
.welcome-row p{font-size:13px;line-height:1.7}
.welcome-actions .tg-button,.welcome-actions .ghost-button{font-size:12px}
.kpi-top small{font-size:12px}
.kpi-sub{font-size:12px}
.usage-numbers>div{font-size:12px}
.usage-numbers b{font-size:12px}
.qa-copy b{font-size:13px}
.qa-copy small{font-size:12px}
.account-card dt{font-size:12px}
.account-card dd{font-size:13px}
.amount-presets button{min-height:44px;font-size:12px}
.pay-option{min-height:112px}
.pay-copy b{font-size:13px}
.pay-copy small{font-size:11px}
.secure-note{font-size:12px;line-height:1.6}
.recharge-aside h3{font-size:18px;line-height:1.35}
.recharge-aside p{font-size:13px;line-height:1.7}
.recharge-aside li{font-size:12px}
.recharge-aside li b{font-size:10px}
.category-card b{font-size:15px}
.category-card small{font-size:12px}
.category-note{font-size:11px}
.package-card h3{font-size:15px;line-height:1.4}
.package-meta span,.package-perks{font-size:11.5px}
.node-card h3{font-size:14px}
.node-address code{font-size:12px}
.node-route{font-size:11px}
.copy-btn,.node-card a{font-size:12px}
.modal-card h2{font-size:20px;line-height:1.35}
.modal-card>p{font-size:13px;line-height:1.65}
.confirm-summary span,.confirm-summary b{font-size:12px}
.icon-button:hover{transform:none}
.icon-button svg{transform-origin:center}
#refresh.is-refreshing svg{animation:refresh-icon-spin .8s linear infinite}
#refresh:disabled{cursor:wait;opacity:.75}
@keyframes refresh-icon-spin{to{transform:rotate(360deg)}}
.nav-item:focus-visible,.dock-item:focus-visible,.icon-button:focus-visible,.pay-option:focus-within{outline:3px solid rgba(49,159,239,.34);outline-offset:2px}

@media(max-width:860px){
  .nav-item{font-size:12.5px}
  .section-intro h2{font-size:24px}
  .single-card{padding:22px}
}

@media(max-width:720px){
  .sidebar{display:none!important}
  .panel-view{display:block;min-height:100svh;padding-bottom:0}
  .content{width:100%;max-width:none;margin:0;padding:16px 15px calc(104px + env(safe-area-inset-bottom))}
  .topbar{min-height:50px;margin-bottom:16px;padding-bottom:11px}
  .topbar-title{min-width:0;gap:0}
  .topbar-title>div>.section-kicker{display:none}
  .topbar-title h1{margin:0;font-size:21px;line-height:1.3}
  .topbar-tools{gap:8px;margin-left:auto}
  .icon-button{width:44px;height:44px}
  .panel-card{padding:18px 17px;margin-bottom:12px}
  .card-heading h3{font-size:16px}
  .section-kicker{font-size:10px;letter-spacing:1.2px}
  .auth-copy .section-kicker{font-size:10px;letter-spacing:1.65px}
  .auth-copy p{font-size:14px;line-height:1.7}
  .auth-features li{font-size:12px}
  .auth-card .muted{font-size:12px}
  .auth-card-foot{font-size:11px}
  .auth-trust{font-size:11px}
  .auth-foot{font-size:11px;line-height:1.6}
  .welcome-row{min-height:228px;padding:22px 19px 18px;border-radius:19px}
  .welcome-row h2{font-size:23px;line-height:1.35}
  .welcome-row p{max-width:78%;font-size:13px;line-height:1.65}
  .hero-art{opacity:.3}
  .welcome-actions{gap:8px;padding-top:13px}
  .welcome-actions .expiry-pill{padding:8px 10px;font-size:11px}
  .welcome-actions .tg-button,.welcome-actions .ghost-button{min-height:42px;padding:10px 12px;font-size:12px}
  .kpi-top small{font-size:12px}
  .kpi-sub{font-size:11.5px}
  .usage-numbers>div{font-size:11px}
  .usage-numbers b{font-size:12px}
  .qa-copy b{font-size:13px}
  .qa-copy small{font-size:12px}
  .account-card dt{font-size:12px}
  .account-card dd{font-size:12.5px}
  .summary-node{font-size:11px}
  .summary-meta{font-size:11px}
  .status-row b{font-size:13px}
  .status-row small{font-size:12px}
  .section-intro{margin:5px 0 19px}
  .section-intro h2{font-size:24px}
  .section-intro p{font-size:13px;line-height:1.7}
  .single-card{padding:20px 17px}
  #recharge-form>label{font-size:13px}
  .amount-presets{gap:6px;margin:10px 0 19px}
  .amount-presets button{flex:1;min-width:0;min-height:46px;padding:9px 4px;font-size:12px}
  .pay-methods{grid-template-columns:1fr;gap:8px}
  .pay-option{min-height:66px;flex-direction:row;justify-content:flex-start;gap:12px;padding:12px 15px}
  .pay-icon{flex:0 0 38px;width:38px;height:38px}
  .pay-icon img,.pay-icon svg{width:23px;height:23px}
  .pay-copy{text-align:left}
  .pay-copy b{font-size:13px}
  .pay-copy small{font-size:11px}
  .pay-option .pay-check{top:50%;right:14px;width:17px;height:17px;transform:translateY(-50%)}
  .pay-option .pay-check svg{width:10px;height:10px}
  .secure-note{font-size:11.5px}
  .recharge-aside{padding:21px 18px}
  .recharge-aside h3{font-size:17px}
  .recharge-aside p{font-size:12.5px}
  .recharge-aside ol{gap:7px}
  .recharge-aside li{gap:6px;padding:11px 4px 0;font-size:11px;line-height:1.5}
  .recharge-aside li b{font-size:10px}
  .category-grid,.package-grid{gap:11px}
  .category-card{min-height:88px;padding:15px}
  .category-card b{font-size:15px}
  .category-card small{font-size:12px}
  .category-note{font-size:10.5px}
  .package-card{padding:18px}
  .package-card h3{font-size:15px}
  .package-perks{font-size:11.5px}
  .node-card h3{font-size:13px}
  .node-address code{font-size:11px}
  .copy-btn,.node-card a{min-height:46px;font-size:11.5px}
  .modal-card h2{font-size:19px}
  .bottom-dock{bottom:calc(10px + env(safe-area-inset-bottom));padding:7px}
  .bottom-dock .dock-item{height:53px;gap:3px}
  .bottom-dock .dock-icon{width:21px;height:21px;flex-basis:21px}
  .bottom-dock .dock-icon svg{width:20px;height:20px}
  .bottom-dock .dock-item small{height:auto;line-height:1.2;font-size:11px}
}

@media(max-width:390px){
  .content{padding-right:13px;padding-left:13px}
  .welcome-row{padding-right:16px;padding-left:16px}
  .welcome-row h2{font-size:21px}
  .welcome-row p{max-width:76%;font-size:12.5px}
  .welcome-actions .tg-button,.welcome-actions .ghost-button{padding-right:10px;padding-left:10px;font-size:11.5px}
  .kpi-card{padding-right:12px;padding-left:12px}
  .usage-numbers{gap:8px 6px}
  .usage-numbers>div{font-size:10.5px}
  .amount-presets{gap:5px}
  .amount-presets button{font-size:11.5px}
  .recharge-aside ol{grid-template-columns:1fr}
  .recharge-aside li{display:flex;align-items:center;gap:10px;padding:9px 0}
}

@media(prefers-reduced-motion:reduce){
  #refresh.is-refreshing svg{animation:none}
}