@layer suite-overrides {
  /* A single type scale for the wallet, scoped away from other product pages. */
  html.suite-theme #root main:has(.zh-period-usage) {
    font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
  }
  html.suite-theme #root main:has(.zh-period-usage) :is(input, button, select, textarea, strong, [data-slot="card-title"]) {
    font-family: inherit !important;
    font-variant-numeric: tabular-nums;
  }
  html.suite-theme #root main:has(.zh-period-usage) .zhuhua-page-heading h2 {
    font-size: 24px !important;
    line-height: 1.4 !important;
    font-weight: 650 !important;
  }
  html.suite-theme #root main:has(.zh-period-usage) [data-slot="card-title"],
  html.suite-theme #root main .zh-period-usage .zh-usage-top h2.zh-usage-title {
    font-size: 18px !important;
    line-height: 1.5 !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
  }
  html.suite-theme #root main:has(.zh-period-usage) :is(.zh-usage-cell strong, .grid.grid-cols-3.divide-x > div > div.font-mono) {
    font-size: 24px !important;
    line-height: 1.4 !important;
    font-weight: 650 !important;
    font-family: inherit !important;
    letter-spacing: -.025em;
  }
  html.suite-theme #root main:has(.zh-period-usage) :is(button, input, select, textarea) {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  html.suite-theme #root main:has(.zh-period-usage) button { font-weight: 550 !important; }
  html.suite-theme #root main:has(.zh-period-usage) :is(label, .zh-usage-cell span, .zh-period-buttons button) {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  html.suite-theme #root main:has(.zh-period-usage) :is([data-slot="card-description"], .suite-context, .text-xs) {
    font-size: 12px !important;
    line-height: 1.6 !important;
  }
  html.suite-theme #root main:has(.zh-period-usage) [data-slot="card-header"] { gap: 6px; }
  html.suite-theme #root main:has(.zh-period-usage) .zh-usage-top { gap: 12px; flex-wrap: wrap; }
  html.suite-theme #root main:has(.zh-period-usage) .zh-period-buttons button { min-height: 32px; }
  html.suite-theme #root main:has(.zh-period-usage) .font-mono { font-family: inherit !important; }
  html.suite-theme #root main:has(.zh-period-usage) .text-2xl { font-size: 24px !important; line-height: 1.4 !important; font-weight: 650 !important; }
  @media (max-width: 640px) {
    html.suite-theme #root main:has(.zh-period-usage) .zhuhua-page-heading h2 { font-size: 22px !important; }
    html.suite-theme #root main:has(.zh-period-usage) :is(.zh-usage-cell strong, .grid.grid-cols-3.divide-x > div > div.font-mono) { font-size: 20px !important; }
    html.suite-theme #root main:has(.zh-period-usage) .zh-usage-grid { gap: 12px; }
  }
}
/* Native component fills use important declarations in this earlier layer. */
@layer components {
  html.suite-theme.dark #root main:has(.zh-period-usage) :is(input, select, textarea, button.bg-background) {
    color: #e5eefc !important;
    background-color: #19283e !important;
    border-color: #40536e !important;
  }
  html.suite-theme.dark #root main:has(.zh-period-usage) button.bg-background .text-muted-foreground {
    color: #b5c4d8 !important;
  }
}
.zha-sync .zha-sync-selection { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:12px 0; }
.zha-sync .zha-sync-selection[hidden] { display:none; }
.zha-sync .zha-sync-selection span { margin-inline-start:auto; font-size:13px; font-weight:600; }
.zha-sync .zha-sync-check { display:flex; align-items:center; justify-content:center; margin:0; }
.zha-sync input[type="checkbox"] { appearance:auto; width:17px; height:17px; min-height:17px; padding:0; margin:0; accent-color:#315de8; cursor:pointer; flex:none; }
.zha-sync input[type="checkbox"]:disabled { cursor:default; opacity:.45; }
.zha-sync tr[data-selected] { background:color-mix(in srgb, #315de8 7%, transparent); }
.zha-sync th:first-child, .zha-sync td:first-child { width:42px; padding-inline:10px; }
.zha-sync .zha-sync-table { max-height:48vh; overflow:auto; }
.zha-sync thead { position:sticky; top:0; z-index:1; background:var(--zha-panel, #fff); }
html.dark .zha-sync thead { background:#151b2a; }