/* Shared typography and low-cost rendering. No layout columns or financial values changed. */
:root{--billing-font:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans CJK SC","PingFang SC","Microsoft YaHei",sans-serif}
html body{font-family:var(--billing-font);line-height:1.5;-webkit-text-size-adjust:100%;text-size-adjust:100%}
html body input,html body select,html body textarea,html body button{font-family:var(--billing-font)}
html body h1,html body h2,html body h3{font-weight:650;line-height:1.35;letter-spacing:.01em}
html body b,html body strong{font-weight:650}
html body main table{font-variant-numeric:tabular-nums lining-nums}
html body main th{font-weight:600}
html body main label{font-weight:500}
html body main .note,html body main small{line-height:1.45}
html body main .person-income-detail-line{line-height:1.55!important}
html body main .card,html body main .settings-block{box-shadow:none!important}
html body button,html body .button-link,html body header nav a,html body main .room-store-tabs a{transition:background-color .12s ease,border-color .12s ease,color .12s ease!important;touch-action:manipulation}
html body button:not(#mobile-back-to-top):not(.color-swatch):not(.editable-category-toggle),html body main a.button-link,html body main .room-store-tabs a{box-shadow:none!important}
html body button:not(#mobile-back-to-top):not(.color-swatch):not(.editable-category-toggle):hover,html body button:not(#mobile-back-to-top):not(.color-swatch):not(.editable-category-toggle):active,html body main a.button-link:hover{transform:none!important}
html body input,html body select,html body textarea{transition:border-color .12s ease,box-shadow .12s ease!important}
html body .app-dialog::backdrop,html body .room-bill-dialog::backdrop,html body .room-form-dialog-layer,html.room-bill-fallback-open body::before{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html body .gear-icon{display:inline-flex;width:20px;height:20px;align-items:center;justify-content:center;flex:0 0 20px}
html body .gear-icon svg{width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html body .login-mark{background:#fff;box-shadow:none;overflow:hidden}
html body .login-mark img{width:100%;height:100%;display:block;object-fit:contain}
/* Retain fixed control height and 16px input text to avoid iPhone focus zoom. */
@media(max-width:720px){
 html body header{box-shadow:0 1px 0 var(--border,#dce5e4)!important}
 html body main .card>h2,html body main .collapsible-card-head h2{font-size:max(16px,1.2em)!important}
 html body main .card>h3,html body main .settings-block>h3{font-size:max(14px,1.07em)!important}
 html body main .card>h2+.note,html body main .settings-block>.note{font-size:max(12px,.86em)!important;line-height:1.45!important}
 html body main form label{font-size:max(12px,.86em)!important;line-height:1.35!important}
 html body main .person-income-table small{font-size:12px!important;line-height:1.5!important}
 html body main .account-formula,html body main .enterprise-net-formula{line-height:1.6!important;overflow-wrap:anywhere}
 html body .login-card{padding:24px 20px;box-shadow:none}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto!important}
 html body *,html body *::before,html body *::after{transition:none!important;animation:none!important}
}

/* The mobile account control stays circular, independent of button-style preferences. */
html body>header .account-menu .gear-icon{width:20px;height:20px;flex:0 0 20px;line-height:1}
html body>header .account-menu .gear-icon svg{width:20px;height:20px;max-width:none;max-height:none;aspect-ratio:1;flex:none}
html body>header .account-menu summary:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(max-width:760px){
  html[data-button-style] body>header .account-menu summary{
    display:flex;align-items:center;justify-content:center;box-sizing:border-box;
    width:44px;height:44px;min-width:44px;max-width:44px;min-height:44px;max-height:44px;
    padding:0!important;gap:0;border-radius:50%!important;
    box-shadow:0 2px 6px rgba(0,0,0,.12)!important;flex:none;
  }
  html[data-button-style] body>header .account-menu summary:hover,
  html[data-button-style] body>header .account-menu details[open] summary{
    border-radius:50%!important;box-shadow:0 2px 6px rgba(0,0,0,.12)!important;
  }
  html body>header .account-menu .account-name{display:none!important}
}