/* Shared app polish: hierarchy through spacing first, surfaces second. */
:root{--polish-ease:cubic-bezier(.22,1,.36,1)}
.topbar h1{letter-spacing:-.035em!important;line-height:1.05!important}
.screen{scroll-behavior:smooth}
:where(button,a,[role="button"]){transition:color 140ms ease,background-color 160ms ease,border-color 160ms ease,transform 180ms var(--polish-ease),box-shadow 180ms ease}
:where(button,a,[role="button"]):active{transform:scale(.98)}
:where(.solid-button,.outline-button,.icon-button):focus-visible{outline:2px solid rgba(168,151,255,.8)!important;outline-offset:2px}
:where(input,select,textarea,.message-body-editor):focus{border-color:rgba(168,151,255,.72)!important;box-shadow:0 0 0 3px rgba(168,151,255,.11)!important}
:where(.metric-panel,.action-card,.settings-card,.money-card,.account-card,.data-row,.store-ops-card,.network-card,.listing-card,.storefront-card){box-shadow:none!important}
.page-intro,.section-heading{gap:8px!important}
.page-intro p,.section-heading p{line-height:1.45!important}

@media(max-width:760px){
  .topbar{min-height:68px!important;padding-block:10px!important}
  .screen{padding-top:18px!important}
  .page-intro{margin-bottom:18px!important}
  .page-intro h2,.section-heading h2{line-height:1!important;letter-spacing:-.045em!important}
  .section-heading{margin-top:28px!important;margin-bottom:12px!important}
  /* Flatten utility panels on small screens; keep content grouping via dividers. */
  .screen[data-screen="home"] :where(.metric-panel,.action-card),
  .screen[data-screen="money"] :where(.money-card),
  .screen[data-screen="account"] :where(.settings-card){
    border-radius:12px!important;
    background:rgba(255,255,255,.025)!important;
    border-color:rgba(255,255,255,.10)!important;
  }
  .screen[data-screen="home"] :where(.metric-panel,.action-card)+:where(.metric-panel,.action-card),
  .screen[data-screen="money"] :where(.money-card)+:where(.money-card){margin-top:8px!important}
  .listing-card,.storefront-card,.network-card{border-radius:14px!important}
  .listing-card:hover,.storefront-card:hover,.network-card:hover{transform:translateY(-2px)!important}
  .solid-button,.outline-button{min-height:44px!important}
  .mobile-dock button{transition:color 140ms ease,background-color 160ms ease,transform 180ms var(--polish-ease)!important}
  .mobile-dock button:active{transform:scale(.94)!important}
  /* Home dashboard: compact command center instead of a stack of large cards. */
  .screen[data-screen="home"] .home-command{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:end!important;gap:14px!important;padding:22px 18px!important;border-radius:16px!important;background:linear-gradient(145deg,rgba(126,103,237,.18),rgba(255,255,255,.025))!important;border-color:rgba(154,137,255,.28)!important}
  .screen[data-screen="home"] .home-command-copy h2{font-size:clamp(30px,9vw,38px)!important;line-height:.98!important}
  .screen[data-screen="home"] .home-command-copy>p{max-width:25ch!important;font-size:12px!important}
  .screen[data-screen="home"] .home-command-actions{display:flex!important;flex-direction:column!important;gap:7px!important;width:auto!important;margin:0!important}
  .screen[data-screen="home"] .home-command-actions>*{width:auto!important;white-space:nowrap!important}
  .screen[data-screen="home"] .home-balance{min-height:148px!important;padding:20px!important;border-radius:16px!important;background:rgba(255,255,255,.025)!important}
  .screen[data-screen="home"] .home-pulse{gap:7px!important}
  .screen[data-screen="home"] .home-pulse>*{min-height:82px!important;padding:13px!important;border-radius:12px!important}
  .screen[data-screen="home"] .home-pulse strong{font-size:18px!important}
  .screen[data-screen="home"] .section-heading{margin-top:24px!important}
}
@media(prefers-reduced-motion:reduce){:where(button,a,[role="button"]):active{transform:none!important}}

/* Keep the Home command centre readable on narrow screens. The desktop
   two-column composition becomes a deliberate vertical stack on mobile so
   the headline never collapses into single-character lines and the balance
   panel cannot collide with the actions. */
@media(max-width:760px){
  .screen[data-screen="home"] .home-command{grid-template-columns:minmax(0,1fr)!important;align-items:stretch!important;gap:12px!important}
  .screen[data-screen="home"] .home-command-copy{min-width:0;width:100%!important}
  .screen[data-screen="home"] .home-command-copy h2{max-width:14ch!important;overflow-wrap:normal!important}
  .screen[data-screen="home"] .home-command-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important}
  .screen[data-screen="home"] .home-command-actions>*{width:100%!important;min-width:0!important}
  .screen[data-screen="home"] .home-balance{width:100%!important;box-sizing:border-box!important;min-height:136px!important}
}