/* StarLedger modern UI foundation.
 * This file owns shared visual tokens and page-level presentation. Browser/Safari
 * geometry remains in mobile-compat.css, which must continue to load after it.
 */
:root,
:root[data-mode="light"] {
  --bg: #f4f6f3;
  --card: #ffffff;
  --ink: #17231f;
  --muted: #6d7873;
  --line: #e2e7e3;
  --green: #14785a;
  --pale: #e7f2ed;
  --red: #c4474d;
  --up: #0d8a61;
  --down: #cc454d;
  --glass: #fffffff2;
  --shadow: 0 1px 2px #17231f08, 0 12px 32px #17231f08;
  --shadow-raised: 0 16px 45px #17231f16;
  --radius-sm: 11px;
  --radius-md: 15px;
  --radius-lg: 21px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  color-scheme: light;
}

:root[data-mode="dark"] {
  /* Near-black neutral surfaces, close to ChatGPT's dark palette. */
  --bg: #000000;
  --card: #171717;
  --ink: #ececec;
  --muted: #a8a8a8;
  --line: #303030;
  --green: #10a37f;
  --pale: #262626;
  --red: #ff7b81;
  --up: #34d399;
  --down: #ff7b81;
  --glass: #171717f2;
  --shadow: 0 1px 2px #0006, 0 14px 34px #0003;
  --shadow-raised: 0 18px 55px #0007;
  --sl-glass-surface: var(--card);
  --sl-glass-surface-compact: #1f1f1f;
  --sl-glass-rim: var(--line);
  --sl-glass-top: transparent;
  --sl-glass-bottom: transparent;
  --sl-glass-shadow: none;
  color-scheme: dark;
}

:root {
  background: var(--bg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

body {
  background:
    radial-gradient(circle at 72% -10%, color-mix(in srgb, var(--pale) 58%, transparent), transparent 36rem),
    var(--bg);
  color: var(--ink);
}

button,
input,
select,
textarea {
  letter-spacing: 0;
}

:root[data-mode="dark"] body {
  /* Dark mode intentionally has no green wash behind the content. */
  background: var(--bg);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--green) 24%, transparent);
  outline-offset: 2px;
}

.side {
  width: 232px;
  padding: 30px 18px;
  background: color-mix(in srgb, var(--card) 88%, var(--bg));
  border-color: color-mix(in srgb, var(--line) 82%, transparent);
  box-shadow: 8px 0 30px #17231f05;
}

.brand {
  padding: 4px 14px 29px;
  font-size: 21px;
  letter-spacing: -.7px;
}

#nav {
  gap: 6px;
}

.navbtn {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 48px;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 650;
  transition: background-color .16s ease, color .16s ease, transform .16s ease;
}

.navbtn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--pale) 58%, transparent);
  color: var(--ink);
  transform: translateX(2px);
}

.navbtn.active {
  background: var(--pale);
  color: var(--green);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 7%, transparent);
}

.nav-icon,
.mobilebar .icon {
  display: grid;
  place-items: center;
}

.nav-icon svg,
.mobilebar .icon svg,
.filter-plus svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.side > small {
  left: 32px;
  right: 24px;
  bottom: 25px;
  font-size: 10px;
  line-height: 1.55;
  opacity: .72;
}

main {
  width: min(1180px, 100%);
  padding: 32px 38px 96px;
}

#content {
  --card-gap: 18px;
}

#controlsFrame:not([hidden]) {
  margin-bottom: 19px;
}

#controlsFrame .date-filter-row {
  margin: 0;
}

.top {
  min-height: 59px;
  margin-bottom: 24px;
}

.eyebrow {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 520;
  letter-spacing: .01em;
}

.top h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(27px, 2.2vw, 33px);
  font-weight: 760;
  letter-spacing: -.045em;
}

.topactions {
  gap: 8px;
}

.button,
.iconbutton,
.ledger-switch {
  min-height: 42px;
  border-color: var(--line);
  border-radius: 13px;
  box-shadow: 0 1px 1px #17231f04;
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}

.button:hover:not(:disabled),
.iconbutton:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--green) 25%, var(--line));
  background: color-mix(in srgb, var(--pale) 34%, var(--card));
}

.button:active:not(:disabled),
.iconbutton:active:not(:disabled) {
  transform: translateY(1px);
}

.button.primary,
#addBtn {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
  box-shadow: 0 7px 18px color-mix(in srgb, var(--green) 20%, transparent);
}

.card {
  border-color: color-mix(in srgb, var(--line) 92%, transparent);
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--shadow);
}

/* ChatGPT-like dark mode uses flat, neutral surfaces instead of tinted glass. */
:root[data-mode="dark"] .card:not(.hero),
:root[data-mode="dark"] .metric-banner {
  border: 1px solid var(--line) !important;
  background: var(--card) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

:root[data-mode="dark"] .card:not(.hero)::before,
:root[data-mode="dark"] .metric-banner::before {
  content: none !important;
}

:root[data-mode="dark"] .date-banner,
:root[data-mode="dark"] .date-filter-book,
:root[data-mode="dark"] #floatingControls .date-banner,
:root[data-mode="dark"] #floatingControls .date-filter-book {
  border: 1px solid var(--line) !important;
  background: #2b2b2b !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

.sectionhead {
  gap: 12px;
  margin-bottom: 16px;
}

.sectionhead h2 {
  color: var(--ink);
  font-size: 17px;
  font-weight: 720;
  letter-spacing: -.025em;
}

.sectionhead p {
  flex: 1;
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.category-controls {
  gap: 6px;
}

.category-switch {
  gap: 2px;
  padding: 3px;
  border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
  background: color-mix(in srgb, var(--bg) 76%, var(--card));
}

.category-switch button {
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
  line-height: 1;
}

.category-switch button.active {
  background: var(--card);
  box-shadow: none;
}

.home-metrics {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: var(--card-gap);
}

.home-metrics > .metric-banner {
  margin: 0 !important;
}

.metric-banner {
  min-height: 184px;
  padding: 24px;
  text-align: left;
}

.metric-banner-main {
  padding: 1px 3px 23px;
}

.metric-banner-main small,
.metric-banner-sub small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 560;
}

.metric-banner-main strong {
  margin-top: 14px;
  font-size: clamp(30px, 3vw, 42px);
  font-weight: 720;
  letter-spacing: -.045em;
}

.metric-banner-subs {
  border-color: var(--line);
  padding-top: 14px;
}

.metric-banner-sub strong {
  margin-top: 7px;
  font-size: 15px;
  letter-spacing: -.02em;
}

.home-overview-grid {
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr);
}

.home-overview-grid > .card {
  height: 100%;
}

.record-link {
  margin-top: 14px;
  border: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--pale) 52%, var(--card));
  color: var(--green);
}

.record-link:hover {
  background: var(--pale);
}

.month-insights {
  grid-template-columns: minmax(0, 1.42fr) minmax(300px, .78fr);
  margin-top: var(--card-gap);
  align-items: start;
}

.month-insights > .card {
  margin: 0;
}

.month-insights .day {
  min-height: 70px;
  border-radius: 11px;
}

.calendar-card .day.has {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 8%, transparent);
}

:root[data-mode="dark"] .calendar-card .day:not([disabled]) {
  border-color: var(--line);
  background: #242424;
}

.trendwrap {
  padding-top: 6px;
}

.trend {
  max-height: 310px;
}

.book-list-card,
.account-group {
  overflow: hidden;
}

#pageBody[data-page="books"] .book-list-card {
  padding: 14px 16px !important;
}

.book-list-card .sectionhead,
.account-group .sectionhead {
  margin-bottom: 10px;
}

.book-entry,
.account-entry {
  min-height: 64px;
  border-color: var(--line);
}

.book-item,
.account-item {
  border-radius: 12px;
}

.book-name,
.account-name {
  display: flex;
  align-items: center;
  gap: 10px;
}

.account-name {
  justify-content: flex-start;
}

.book-avatar,
.account-type-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 12px;
  background: var(--pale);
  color: var(--green);
  font-size: 14px;
  font-weight: 750;
}

.book-avatar-custom {
  background: transparent;
  color: var(--ink);
  font-size: 23px;
  font-weight: 500;
}

.book-avatar-fallback {
  background: var(--pale);
  color: var(--muted);
}

.book-profile-main {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px;
}

.book-icon-field input {
  padding-inline: 8px;
  text-align: center;
  font-size: 23px !important;
}

.account-type-mark {
  width: 34px;
  height: 34px;
  flex-basis: 34px;
  border-radius: 10px;
}

.account-type-mark::before {
  content: "¥";
}

.account-type-stored .account-type-mark::before {
  content: attr(data-symbol);
}

.account-type-credit .account-type-mark {
  background: color-mix(in srgb, var(--down) 11%, var(--card));
  color: var(--down);
}

.account-type-credit .account-type-mark::before {
  content: "卡";
}

.account-type-personal .account-type-mark::before {
  content: "人";
}

.book-name > span:last-child,
.account-name > span:last-child {
  min-width: 0;
}

.book-name b,
.account-name b {
  font-size: 15px;
}

.account-name b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.book-name small,
.account-name small {
  margin-top: 4px;
  line-height: 1.45;
}

.book-count {
  padding-inline: 14px;
}

.account-value {
  padding: 10px 0 10px 8px;
}

.account-entry .account-name {
  padding: 10px 0;
}

.account-entry .account-value {
  max-width: none;
  min-width: 104px;
}

.account-entry .account-name small {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-entry .account-balance {
  font-size: 16px;
  line-height: 1.25;
}

.account-entry .account-value small,
.account-entry .account-name small {
  margin-top: 2px;
}

.account-summary-strip {
  padding: 0 4px;
  color: var(--muted);
  font-size: 12px;
}

.account-page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.account-zero-toggle {
  min-height: 34px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 12px;
  white-space: nowrap;
}

.account-group.is-zero-collapsed .account-entry.account-zero-balance {
  display: none;
}

.account-zero-empty {
  padding: 18px 4px 6px;
  color: var(--muted);
  font-size: 13px;
}

.group-choice > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-height: min(30dvh, 260px);
  margin: 10px 0;
  overflow-y: auto;
}

.group-choice .group-account-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--card) 82%, var(--bg));
}

.group-choice .group-account-option-wide {
  grid-column: 1 / -1;
}

.group-choice .group-account-option:has(input:checked) {
  border-color: var(--green);
}

.group-choice .group-account-option input {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 0;
  accent-color: var(--green);
}

.group-choice .group-account-option span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-page-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.account-page-actions .add-group {
  width: 100%;
  margin: 0;
}

.page-footnote {
  margin: 4px 3px 0;
  line-height: 1.65;
}

.search-page .filters input {
  min-height: 50px;
  padding-inline: 17px;
  border-radius: 15px;
  box-shadow: var(--shadow);
}

.search-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.search-date-control {
  min-height: 45px;
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.search-date-control button {
  text-align: left;
  padding-inline: 16px;
}

.filter-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto;
  min-width: 102px;
  min-height: 45px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  word-break: keep-all;
  writing-mode: horizontal-tb;
  box-shadow: var(--shadow);
}

.filter-plus span {
  white-space: nowrap;
}

.filter-plus svg {
  width: 18px;
  height: 18px;
}

.filter-chip {
  min-height: 33px;
  border-radius: 999px;
  background: var(--pale);
  color: var(--green);
}

#searchResults > .compact-inline-summary {
  padding-inline: 4px;
  color: var(--muted);
}

#searchResults > .card {
  padding-block: 8px;
}

#searchResults .row {
  padding: 13px 0;
}

#searchResults .record-first .title {
  font-size: 14px;
}

#searchResults .record-note,
#searchResults .record-time,
#searchResults .record-wallet {
  line-height: 1.45;
}

#pageBody[data-page="settings"] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  width: min(100%, 820px);
  margin-inline: auto;
}

#pageBody[data-page="settings"] > * {
  grid-column: 1;
}

#pageBody[data-page="settings"] > .grid.cols2 {
  grid-template-columns: minmax(0, 1fr);
}

#pageBody[data-page="settings"] > .grid {
  align-items: start;
}

.account-cny-rate small {
  display: block;
  line-height: 1.3;
  margin-top: 4px;
}

#overlay .account-config-compact .account-compact-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.setting-row {
  min-height: 70px;
  padding: 14px 0;
}

.banner-setting-row {
  min-height: 66px;
}

.banner-setting-row > span:last-child {
  color: var(--green);
  font-size: 13px;
}

.advanced-settings details {
  margin: 0;
}

.workspace-settings .sectionhead {
  align-items: baseline;
}

.workspace-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 18px 0;
}

.workspace-actions .button {
  margin: 0;
}

.workspace-actions #exportBackup {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}

.workspace-actions .danger {
  margin-left: auto;
}

.cloud-sync-status {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.cloud-sync-status[data-state="pending"] {
  border-color: var(--green);
  color: var(--ink);
}

.cloud-sync-status[data-state="success"] {
  color: var(--green);
}

.cloud-sync-status[data-state="error"] {
  color: var(--red);
}

.cloud-sync-card .sectionhead {align-items:center}
.cloud-help-button {flex:none;border:1px solid var(--line)!important;border-radius:999px;background:var(--card)!important;color:var(--ink)!important;padding:7px 11px;font-size:13px}
.auto-backup-toggle {display:flex;align-items:center;justify-content:space-between;gap:18px;margin:18px 0 10px;padding:15px;border:1px solid var(--line);border-radius:15px;color:var(--ink);cursor:pointer}
.auto-backup-toggle span {display:grid;gap:6px;min-width:0}
.auto-backup-toggle b {font-size:16px}
.auto-backup-toggle small {color:var(--muted);font-size:12px;line-height:1.5}
.auto-backup-toggle input {appearance:none;position:relative;flex:none;width:44px;height:26px;margin:0;border:1px solid var(--line);border-radius:999px;background:var(--line);cursor:pointer;transition:background .2s}
.auto-backup-toggle input::after {content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .2s}
.auto-backup-toggle input:checked {background:var(--green);border-color:var(--green)}
.auto-backup-toggle input:checked::after {transform:translateX(18px)}
.auto-backup-toggle input:focus-visible {outline:2px solid var(--green);outline-offset:3px}
.cloud-sync-caution {margin:10px 0 0;line-height:1.5}
.cloud-help-modal {width:min(620px,100%)}
.cloud-help-modal .sectionhead {align-items:center;margin-bottom:12px}
.cloud-help-steps {display:grid;gap:18px;list-style:none;margin:20px 0;padding:0}
.cloud-help-steps li {display:grid;grid-template-columns:30px minmax(0,1fr);gap:11px}
.cloud-help-number {display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--green);color:#fff;font-weight:700}
.cloud-help-steps b {color:var(--ink)}
.cloud-help-steps p {margin:6px 0 10px;color:var(--muted);font-size:13px;line-height:1.55}
.cloud-help-steps a {display:inline-block;margin-top:8px;color:var(--green);font-size:13px}
.cloud-help-visual {display:flex;flex-wrap:wrap;align-items:center;gap:5px;padding:11px;border:1px solid var(--line);border-radius:12px;background:var(--bg)}
.cloud-help-visual > span {padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--card);font-size:12px;color:var(--ink)}
.cloud-help-visual > span + span::before {content:'→';margin-right:8px;color:var(--muted)}
.cloud-help-fields {display:grid;gap:6px}
.cloud-help-fields > span {display:flex;justify-content:space-between;gap:8px;overflow-wrap:anywhere}
.cloud-help-fields > span + span::before {content:none}
.cloud-help-fields strong {font-size:12px;font-weight:600;text-align:right}
.cloud-help-modal code {overflow-wrap:anywhere}

.backup-device-field {
  margin: 16px 0;
}

.backup-device-field input {
  width: 100%;
  margin-top: 7px;
}

.backup-device-field small {
  line-height: 1.45;
}

.backup-import-modal {
  width: min(560px, 100%);
}

.backup-import-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 2px 0 16px;
}

.backup-import-summary > span {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--pale) 42%, transparent);
}

.backup-import-summary small,
.backup-import-actions small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.backup-import-summary b {
  overflow-wrap: anywhere;
  font-size: 13px;
}

.backup-ledger-list {
  display: grid;
  gap: 0;
  max-height: 190px;
  margin: 0;
  padding: 0;
  overflow: auto;
  list-style: none;
  border-block: 1px solid var(--line);
}

.backup-ledger-list li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 2px;
  border-bottom: 1px solid var(--line);
}

.backup-ledger-list li:last-child {
  border-bottom: 0;
}

.backup-ledger-list b {
  flex: none;
  font-size: 13px;
}

.backup-import-note {
  margin: 15px 0;
  line-height: 1.6;
}

.backup-import-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.backup-import-actions .button {
  display: grid;
  gap: 4px;
  align-content: center;
  min-height: 72px;
  margin: 0;
  text-align: left;
}

.backup-import-actions .primary small {
  color: color-mix(in srgb, #fff 76%, transparent);
}

@media (max-width: 980px) and (min-width: 761px) {
  .side {
    width: 190px;
  }

  main {
    padding-inline: 26px;
  }

  .home-metrics,
  .home-overview-grid,
  .month-insights {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  body {
    background: var(--bg);
  }

  main {
    padding-inline: 16px;
    padding-bottom: calc(126px + env(safe-area-inset-bottom));
  }

  #content {
    --card-gap: 16px;
  }

  .backup-import-summary {
    grid-template-columns: 1fr;
  }

  .backup-import-actions {
    grid-template-columns: 1fr;
  }

  .top {
    margin-bottom: 14px;
  }

  .eyebrow {
    margin-bottom: 3px;
    font-size: 11px;
  }

  .top h1 {
    font-size: 27px;
    letter-spacing: -.04em;
  }

  .topactions {
    gap: 7px;
  }

  .topactions .button,
  .topactions .iconbutton {
    min-height: 40px;
    border-radius: 13px;
  }

  #addBtn {
    padding-inline: 14px;
  }

  .card {
    padding: 20px;
    border-radius: 16px;
  }

  :root[data-mode="dark"] .metric-banner {
    border-radius: 16px !important;
  }

  .home-metrics,
  .month-insights,
  #pageBody[data-page="settings"] {
    grid-template-columns: minmax(0, 1fr);
  }

  #pageBody[data-page="settings"] > * {
    grid-column: 1;
  }

  .metric-banner {
    min-height: 0;
    padding: 21px;
  }

  .metric-banner-main strong {
    font-size: 32px;
  }

  .home-overview-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .month-insights .day {
    min-height: 58px;
  }

  .mobilebar {
    left: 16px;
    right: 16px;
    bottom: calc(11px + env(safe-area-inset-bottom));
    gap: 2px;
    padding: 6px;
    border-color: color-mix(in srgb, var(--line) 75%, transparent);
    border-radius: 25px;
    background: var(--glass);
    box-shadow: 0 14px 38px #17231f2b;
  }

  .mobilebar button {
    min-width: 0;
    min-height: 55px;
    border-radius: 19px;
    font-size: 10px;
    transition: background-color .16s ease, color .16s ease;
  }

  .mobilebar button.active {
    background: var(--pale);
    color: var(--green);
  }

  .mobilebar .icon {
    height: 21px;
    margin-bottom: 3px;
  }

  .mobilebar .icon svg {
    width: 18px;
    height: 18px;
  }

  .book-avatar,
  .account-type-mark {
    width: 36px;
    height: 36px;
    flex-basis: 36px;
  }

  .account-type-mark {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .book-entry,
  .account-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 64px;
  }

  #pageBody[data-page="accounts"] .account-group {
    padding: 16px 18px;
  }

  #pageBody[data-page="accounts"] .account-group .sectionhead {
    align-items: center;
  }

  #pageBody[data-page="accounts"] .account-group .group-total {
    flex: 0 1 auto;
    max-width: 58%;
    white-space: nowrap;
  }

  .account-page-actions {
    grid-template-columns: 1fr 1fr;
  }

  .search-page .filters input {
    min-height: 48px;
  }

  .filter-plus {
    min-width: 92px;
    padding-inline: 13px;
  }

  #searchResults > .card {
    padding: 8px 20px;
  }

  .category-controls {
    gap: 5px;
  }

  .category-switch {
    gap: 2px;
    padding: 3px;
  }

  .category-switch button {
    min-height: 30px;
    padding-inline: 8px;
    font-size: 11px;
  }

  #pageBody[data-page="settings"] .sectionhead {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  #pageBody[data-page="settings"] .sectionhead p {
    flex: 0 0 100%;
    margin-top: -8px;
    line-height: 1.5;
  }

  .workspace-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .workspace-actions .button,
  .workspace-actions .danger {
    width: 100%;
    margin: 0;
  }
}

@media (max-width: 460px) {
  .metric-banner-subs[data-count="3"] {
    --sub-value-size: 14px;
  }

  .workspace-actions {
    grid-template-columns: 1fr;
  }

  .filter-plus span {
    display: none;
  }

  .filter-plus {
    min-width: 48px;
    width: 48px;
    padding: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .navbtn,
  .button,
  .iconbutton,
  .mobilebar button {
    transition: none;
  }
}

.entry-tag-row .entry-budget-control {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  min-width: 0;
}

.entry-tag-row .entry-budget-control button,
.entry-tag-row .entry-budget-note {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  font-size: 13px;
}

.entry-tag-row .entry-budget-control button[aria-pressed="true"] {
  border-color: var(--green);
  color: var(--green);
}

.entry-tag-row .entry-budget-note {
  color: var(--muted);
}

#accountOverlay .rc12-relation-sheet:not(.show-roles) .rc12-relation-item {
  grid-template-columns: auto minmax(0,1fr);
}
#accountOverlay .rc12-relation-sheet:not(.show-roles) .rc12-relation-item select { display: none; }
#accountOverlay #rc12ToggleRoles {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 0 2px 12px;
  font-size: 13px;
}
#accountOverlay #rc12ToggleRoles[aria-expanded="true"] { color: var(--green); }

/* Home and Search share the same five bulk actions and text baseline. */
.selecting #selectionBar {
  display: grid!important;
  grid-template-columns: repeat(5,minmax(0,1fr))!important;
  width: min(420px,calc(100vw - 28px))!important;
  max-width: calc(100vw - 28px)!important;
  align-items: stretch!important;
}
.selecting #selectionBar>.button {
  display: flex!important;
  align-items: center!important;
  justify-content: center!important;
  width: 100%!important;
  min-width: 0!important;
  height: 52px!important;
  padding: 0 4px!important;
  font-size: clamp(12px,3.2vw,14px)!important;
  line-height: 1!important;
  font-weight: 650!important;
  white-space: nowrap!important;
}

/* Keep the existing-bill confirmation visible while its results scroll. */
#accountOverlay .rc12-existing-picker form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

#accountOverlay .rc12-existing-picker .rc12-existing-list {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
}

#accountOverlay .rc12-existing-picker .modalfooter {
  flex: none;
  margin-top: 0;
  padding-top: 12px;
  background: var(--card);
}

#accountOverlay .rc12-existing-picker .modalfooter .primary {
  width: 100%;
  min-height: 48px;
}

.home-activity-strip {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 0 0 17px;
  color: var(--muted);
  font-size: 12px;
}

.home-backup-action,
.home-last-edit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.home-backup-action {
  border: 0;
  background: transparent;
  padding: 5px 0;
  color: inherit;
  cursor: pointer;
}

.home-backup-action:hover,
.home-backup-action:focus-visible { color: var(--green); }
.home-backup-action:disabled { opacity: .6; cursor: wait; }
.home-activity-strip b { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }
.home-activity-divider { width: 1px; height: 13px; background: var(--line); }

@media (max-width: 540px) {
  .home-activity-strip { justify-content: space-between; gap: 7px; font-size: 12px; }
  .home-backup-action,
  .home-last-edit { gap: 4px; }
}

.entry-history-suggestions {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin: 7px 0 10px;
  overflow-x: auto;
  scrollbar-width: none;
}
.entry-history-suggestions::-webkit-scrollbar { display: none; }
.entry-history-label { flex: none; color: var(--muted); font-size: 11px; }
.entry-history-suggestions button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  min-height: 34px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--card);
  color: var(--ink);
  font-size: 12px;
  cursor: pointer;
}
.entry-history-suggestions button.active { border-color: var(--green); color: var(--green); }
.entry-history-suggestions small { color: var(--muted); font-size: 10px; }

@media (max-width: 760px) {
  .mobilebar {
    transform: translateY(0);
    transition: opacity .25s ease, transform .25s cubic-bezier(.22,.61,.36,1);
  }
  /* PWA keeps the nav fade; Safari browser tabs remove the glass layer below. */
  html:not(.browser-tab) body:has(#overlay>.entryback) .mobilebar { visibility: visible!important; }
  html:not(.browser-tab) body:has(#overlay>.entryback.rc21-closing) .mobilebar {
    opacity: 1!important;
    transform: translateY(0)!important;
  }
  #overlay .entry[data-rc12-task="1"] .entryhead { gap: 7px!important; min-height: 38px!important; }
  #overlay .entry[data-rc12-task="1"] .entryhead>#closeBtn {
    display: grid!important;
    place-items: center;
    flex: none!important;
    width: 34px!important;
    height: 34px!important;
    min-height: 34px!important;
    padding: 0!important;
    border: 1px solid var(--line)!important;
    border-radius: 11px!important;
    background: var(--card)!important;
    font-size: 24px!important;
    font-weight: 350!important;
    line-height: 1!important;
  }
  #overlay .entry[data-rc12-task="1"] .entryhead>h2 { display: block!important; flex: none; margin: 0; font-size: 17px!important; }
  #overlay .entry[data-rc12-task="1"] .rc12-taskbar { flex: none!important; width: auto!important; }
  #overlay .entry[data-rc12-task="1"] .rc12-tasknav { gap: 2px!important; }
  #overlay .entry[data-rc12-task="1"] .rc12-tasknav>b {
    min-width: 42px!important;
    padding: 4px 6px!important;
    border-radius: 9px;
    background: var(--pale);
    color: var(--ink);
    font-size: 14px!important;
  }
  #overlay .entry[data-rc12-task="1"] .rc12-taskactions { flex: none!important; }
  #overlay .entry[data-rc12-task="1"] #rc12DeleteDraft { color: var(--muted)!important; }
  #overlay .entry[data-rc12-task="1"] #rc12DeleteDraft:disabled { display: none!important; }
  #overlay .entry[data-rc12-task="1"] .amount-control {
    min-height: 70px;
    margin-top: 3px;
    padding-bottom: 8px;
  }
  #overlay .entry[data-rc12-task="1"] .entry-amount-value input {
    font-size: clamp(41px, 11vw, 49px)!important;
    font-variant-numeric: tabular-nums;
  }
  #overlay .entry[data-rc12-task="1"] .entry-history-suggestions { margin: 6px 0 11px; }
  #overlay .entry[data-rc12-task="1"] .entry-note-card { margin-top: 11px!important; }

  #overlay .entry[data-rc12-task="1"] .entry-task-primary-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    flex: none;
    margin: 5px 0 2px;
  }
  #overlay .entry[data-rc12-task="1"] .entry-task-primary-actions button {
    min-height: 46px;
    border: 1px solid color-mix(in srgb,var(--green) 28%,var(--line));
    border-radius: 13px;
    background: color-mix(in srgb,var(--green) 8%,var(--card));
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
  }
  #overlay .entry[data-rc12-task="1"] .entry-task-primary-actions #rc12ManageRelations {
    border-color: var(--line);
    background: var(--card);
  }

  #overlay .entry[data-rc12-task="1"] .keypad {
    display: grid!important;
    grid-template-columns: repeat(4,minmax(0,1fr))!important;
    gap: 5px!important;
    max-height: 310px;
    opacity: 1;
    visibility: visible;
    overflow: hidden;
    transform: translateY(0);
    transition: max-height .34s cubic-bezier(.22,.61,.36,1), opacity .24s ease, transform .34s cubic-bezier(.22,.61,.36,1), margin .34s ease;
  }
  #overlay .entryback.keypad-hidden .entry[data-rc12-task="1"] .keypad {
    display: grid!important;
    max-height: 0!important;
    margin-top: 0!important;
    padding: 0!important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(18px);
    pointer-events: none;
    transition: max-height .34s cubic-bezier(.22,.61,.36,1), opacity .24s ease, transform .34s cubic-bezier(.22,.61,.36,1), margin .34s ease, visibility 0s linear .34s;
  }
  #overlay .entryback.editing-text .entry[data-rc12-task="1"] .keypad { display: none!important; }
  #overlay .entry[data-rc12-task="1"] .keypad button {
    height: clamp(44px,5.8dvh,52px)!important;
    min-height: 44px!important;
    border: 0!important;
    border-radius: 11px!important;
    background: var(--pale)!important;
    color: var(--ink)!important;
    font-size: 21px!important;
  }
  #overlay .entry[data-rc12-task="1"] .keypad .keyoperator,
  #overlay .entry[data-rc12-task="1"] .keypad .keyequals {
    background: var(--pale)!important;
    color: var(--green)!important;
  }
  #overlay .entry[data-rc12-task="1"] .keypad .keyzero,
  #overlay .entry[data-rc12-task="1"] .keypad .keydot { grid-column: auto!important; }
  #overlay .entry[data-rc12-task="1"] .keypad [data-key="清空"],
  #overlay .entry[data-rc12-task="1"] .keypad .keyhide { font-size: 21px!important; }
  #overlay .entry[data-rc12-task="1"] .keypad .keyhide { color: var(--muted)!important; }
  #overlay .entry[data-rc12-task="1"] .keypad .keyconfirm {
    background: var(--green)!important;
    color: #fff!important;
    font-size: 21px!important;
    font-weight: 700;
  }
  #overlay .entryback:not(.keypad-hidden):not(.editing-text) .entry[data-rc12-task="1"] .entrysave {
    display: grid!important;
    max-height: 0;
    min-height: 0;
    margin-top: 0;
    opacity: 0;
    pointer-events: none;
  }
  #overlay .entry[data-rc12-task="1"] .entrysave {
    display: grid!important;
    grid-template-columns: minmax(0,1fr);
    gap: 8px;
    max-height: 72px;
    min-height: 52px;
    margin: 8px 0 0;
    overflow: hidden;
    opacity: 1;
    transition: max-height .26s ease, opacity .18s ease, margin .26s ease;
  }
  #overlay .entry[data-rc12-task="1"] .entrysave:has(#deleteBtn) { grid-template-columns: minmax(0,1fr) minmax(0,1.45fr); }
  #overlay .entry[data-rc12-task="1"] .entrysave button { min-height: 52px!important; border-radius: 13px!important; font-size: 15px!important; font-weight: 700; }
  #overlay .entry[data-rc12-task="1"] .entrysave .entry-hide-action { border: 1px solid var(--line); background: var(--card); color: var(--ink); }
  #overlay .entry[data-rc12-task="1"] .entrysave .button.primary { padding: 9px!important; font-size: 16px!important; }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .mobilebar,
  #overlay .entry[data-rc12-task="1"] .keypad,
  #overlay .entry[data-rc12-task="1"] .entrysave { transition: none!important; }
}

@media (max-width: 760px) and (max-height: 710px) {
  /* Safari's expanded bottom bar leaves less visible height; shorten the form,
     keeping the keypad targets at their established size. */
  #overlay .entry[data-rc12-task="1"] .amount-control { min-height: 58px; padding-bottom: 4px; }
  #overlay .entry[data-rc12-task="1"] .entry-history-suggestions { margin: 2px 0 5px; }
  #overlay .entry[data-rc12-task="1"] .entry-history-suggestions button { min-height: 28px; padding: 3px 7px; }
  #overlay .entry[data-rc12-task="1"] .entry-note-card { min-height: 59px!important; margin-top: 6px!important; }
  #overlay .entry[data-rc12-task="1"] .entry-task-primary-actions { margin-top: 3px; }
  #overlay .entry[data-rc12-task="1"] .keypad button { height: 39px!important; min-height: 39px!important; }
  #overlay .entry[data-rc12-task="1"] .entry-task-primary-actions button { min-height: 42px; }
  #overlay .entry[data-rc12-task="1"] .entrysave { min-height: 46px; margin-top: 5px; }
  #overlay .entry[data-rc12-task="1"] .entrysave button { min-height: 46px!important; }
}