:root {
  --paper: #f5f1e8;
  --paper-deep: #ebe4d7;
  --surface: rgba(255, 253, 248, 0.88);
  --surface-solid: #fffdf8;
  --ink: #18312b;
  --muted: #71817b;
  --line: rgba(24, 49, 43, 0.12);
  --green: #173f35;
  --green-soft: #dce8df;
  --orange: #e99a5d;
  --orange-soft: #f5ddcb;
  --income: #4c8c72;
  --expense: #d46b50;
  --shadow: 0 18px 50px rgba(48, 54, 45, 0.1);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
  font-family: Inter, ui-rounded, "SF Pro Rounded", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--paper); overflow-x: clip; }

body {
  overflow-x: clip;
  min-width: 320px;
  min-height: 100vh;
  min-height: 100svh; /* iOS Safari 地址栏/键盘伸缩时 vh 会变，svh 取最小稳定视口，避免高度跳动 */
  margin: 0;
  background:
    radial-gradient(circle at 80% 4%, rgba(238, 176, 125, 0.16), transparent 31rem),
    linear-gradient(180deg, #f7f3eb 0%, var(--paper) 68%, #efe8dc 100%);
}

button, input, select { font: inherit; }
button { color: inherit; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid rgba(233, 154, 93, 0.42);
  outline-offset: 2px;
}

[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ambient {
  position: fixed;
  z-index: -1;
  border-radius: 999px;
  filter: blur(2px);
  pointer-events: none;
}
.ambient-one { width: 340px; height: 340px; top: -190px; left: -160px; background: rgba(86, 126, 109, 0.12); }
.ambient-two { width: 290px; height: 290px; right: -190px; bottom: 14%; background: rgba(233, 154, 93, 0.11); }

.eyebrow {
  margin: 0 0 8px;
  color: #8a958f;
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(2rem, 7vw, 3.15rem); line-height: 1.08; letter-spacing: -0.055em; }
h2 { margin-bottom: 0; font-size: 1.28rem; letter-spacing: -0.035em; }

.brand-mark {
  display: inline-grid;
  width: 36px;
  height: 36px;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 12px;
  color: #fffaf1;
  background: var(--green);
  font-family: Georgia, serif;
  font-weight: 700;
  box-shadow: 0 7px 18px rgba(23, 63, 53, 0.18);
}
.brand-mark-large { width: 58px; height: 58px; margin-bottom: 24px; border-radius: 19px; font-size: 1.7rem; }

.login-view {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
}

.login-card {
  width: min(100%, 430px);
  padding: clamp(28px, 8vw, 48px);
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 34px;
  background: rgba(255, 253, 248, 0.76);
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px);
}
.login-card h1 { margin-bottom: 16px; }
.login-copy { margin-bottom: 30px; color: var(--muted); line-height: 1.65; }

.login-form, .entry-card { display: grid; gap: 16px; }
label { display: grid; gap: 8px; color: #53655f; font-size: 0.82rem; font-weight: 700; }
label small, .field-label-row small { color: #98a39e; font-weight: 500; }

input, select {
  /* Keep focused controls readable without iOS automatically zooming the page. */
  font-size: max(16px, 1rem);
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 0 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.68);
  appearance: none;
}
select {
  padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, #72817b 50%), linear-gradient(135deg, #72817b 50%, transparent 50%);
  background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
input::placeholder { color: #a7b0ac; }

.primary-button, .secondary-button, .danger-button {
  min-height: 50px;
  border: 0;
  border-radius: 14px;
  padding: 0 18px;
  font-weight: 800;
  cursor: pointer;
}
.primary-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fffdf8;
  background: var(--green);
  box-shadow: 0 10px 25px rgba(23, 63, 53, 0.18);
}
.primary-button:disabled { cursor: wait; opacity: 0.56; }
.secondary-button { border: 1px solid var(--line); background: #fffaf3; }
.danger-button { width: 100%; color: #a24636; background: #f7ddd4; }
.form-error { min-height: 1.15em; margin: 0; color: #b44f3a; font-size: 0.82rem; }
.privacy-note { margin: 24px 0 0; color: #8a9893; text-align: center; font-size: 0.72rem; }
.privacy-note span { color: #63a184; }

.app-view { min-height: 100vh; min-height: 100svh; }
.test-mode-banner { position: sticky; z-index: 40; top: 0; padding: max(7px, env(safe-area-inset-top)) 14px 7px; color: white; text-align: center; background: #d77a3e; font-size: .72rem; font-weight: 800; }
.test-mode-banner:not([hidden]) + .app-header { top: 29px; }
.app-header {
  position: sticky;
  z-index: 20;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(70px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(20px, calc((100vw - 1060px) / 2)) 0;
  border-bottom: 1px solid rgba(24, 49, 43, 0.07);
  background: rgba(247, 243, 235, 0.78);
  backdrop-filter: blur(22px);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 1.08rem; font-weight: 850; text-decoration: none; }
.header-actions { display: flex; align-items: center; gap: 10px; }
.network-badge { padding: 6px 10px; border-radius: 999px; color: #3f705c; background: #e0ebe4; font-size: 0.7rem; font-weight: 750; }
.network-badge.offline { color: #a0533f; background: #f4ded5; }
.icon-button {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 253, 248, 0.7);
  cursor: pointer;
}
.icon-button svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-button.loading svg { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.page-container {
  width: min(100%, 1060px);
  margin: 0 auto;
  padding: 34px 20px calc(112px + env(safe-area-inset-bottom));
}
.page { display: none; animation: page-in 0.24s ease both; }
.page.active { display: block; }
@keyframes page-in { from { opacity: 0; transform: translateY(5px); } }

.hero-row, .page-title-row, .section-heading, .balance-head, .field-label-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.hero-row { margin-bottom: 28px; }
.hero-row h1 { max-width: 650px; }
.month-chip, .text-button {
  border: 0;
  background: transparent;
  cursor: pointer;
}
.month-chip { display: flex; gap: 7px; align-items: center; flex: 0 0 auto; padding: 9px 13px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 253, 248, 0.7); font-size: 0.78rem; font-weight: 750; }
.text-button { padding: 8px 0; color: #537166; font-size: 0.79rem; font-weight: 750; }

.balance-card {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 5vw, 38px);
  border-radius: var(--radius-xl);
  color: #f7f2e9;
  background: var(--green);
  box-shadow: 0 24px 50px rgba(23, 63, 53, 0.2);
}
.balance-card::after {
  position: absolute;
  top: -100px;
  right: -70px;
  width: 260px;
  height: 260px;
  border: 58px solid rgba(255, 255, 255, 0.055);
  border-radius: 999px;
  content: "";
}
.balance-head { position: relative; z-index: 1; align-items: center; }
.balance-head p { margin: 0; color: #c8d7d1; font-size: 0.88rem; }
.balance-head span { color: #9fbbb0; font-size: 0.71rem; }
.balance-amount { position: relative; z-index: 1; margin: 10px 0 30px; font-size: clamp(2.6rem, 9vw, 4.5rem); font-weight: 850; letter-spacing: -0.06em; }
.summary-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.13); }
.summary-grid div { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 7px; }
.summary-grid p { margin: 0; color: #afc4bc; font-size: 0.72rem; }
.summary-grid strong { grid-column: 2; margin-top: 4px; font-size: 1rem; }
.summary-dot { width: 7px; height: 7px; grid-row: 1 / 3; border-radius: 50%; }
.summary-dot.expense { background: #efaa83; }
.summary-dot.income { background: #90c2a8; }
.summary-dot.count { background: #e6d99f; }

.section-block { margin-top: 38px; }
.section-heading { margin-bottom: 18px; }
.section-heading .eyebrow { margin-bottom: 5px; }
.empty-state-small { color: #8b9893; font-size: 0.84rem; text-align: center; }

.metric-strip {
  display: grid;
  grid-auto-columns: minmax(150px, 44%);
  grid-auto-flow: column;
  gap: 10px;
  overflow-x: auto;
  margin-top: 14px;
  padding: 4px 1px 10px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.metric-strip::-webkit-scrollbar { display: none; }
.metric-tile {
  min-height: 92px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 18px;
  background: var(--surface);
  scroll-snap-align: start;
}
.metric-tile span { display: block; margin-bottom: 13px; color: #7d8b86; font-size: .72rem; }
.metric-tile strong { font-size: 1.08rem; font-variant-numeric: tabular-nums; }
.dashboard-chart-grid { display: grid; gap: 12px; }
.dashboard-chart-card { min-width: 0; padding: 19px; border: 1px solid rgba(255,255,255,.8); border-radius: 21px; background: var(--surface); box-shadow: 0 12px 28px rgba(55,62,53,.05); }
.dashboard-chart-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.dashboard-chart-card h3 { margin: 0 0 4px; font-size: .92rem; }
.dashboard-chart-card header p { margin: 0; color: #95a09b; font-size: .67rem; }
.dashboard-chart-card header > strong { color: #586b64; font-size: .9rem; font-variant-numeric: tabular-nums; }
.line-chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart-grid line { stroke: rgba(24,49,43,.08); stroke-width: 1; }
.chart-grid text { fill: #96a19c; font-size: 9px; }
.chart-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chart-area { opacity: .13; }
.chart-points circle { stroke: #fffdf8; stroke-width: 2; }
.chart-orange .chart-line, .chart-orange .chart-points circle { stroke: #dc8856; }
.chart-orange .chart-area, .chart-orange .chart-points circle { fill: #dc8856; }
.chart-green .chart-line, .chart-green .chart-points circle { stroke: #356f5d; }
.chart-green .chart-area, .chart-green .chart-points circle { fill: #356f5d; }
.donut-layout { display: grid; grid-template-columns: minmax(128px, 170px) 1fr; align-items: center; gap: 18px; }
.donut-chart { width: 100%; max-width: 170px; margin: 0 auto; }
.donut-chart text { fill: #8d9994; font-size: 10px; }
.donut-chart .donut-total { fill: var(--ink); font-size: 15px; font-weight: 800; }
.donut-legend { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.donut-legend li { display: grid; grid-template-columns: 9px minmax(52px, 1fr) auto auto; align-items: center; gap: 7px; font-size: .72rem; cursor: pointer; border-radius: 8px; padding: 2px 4px; }
.donut-legend li:hover { background: rgba(24, 49, 43, .06); }
.donut-legend strong { font-size: .7rem; font-variant-numeric: tabular-nums; }
.donut-legend small { min-width: 38px; color: #89958f; text-align: right; }
.donut-key { width: 8px; height: 8px; border-radius: 50%; background: #173f35; }
.donut-key[data-color="1"] { background: #e1915c; }
.donut-key[data-color="2"] { background: #6d9786; }
.donut-key[data-color="3"] { background: #d9b35f; }
.donut-key[data-color="4"] { background: #8b796b; }
.donut-key[data-color="5"] { background: #9e786f; }
.donut-key[data-color="6"] { background: #b7c8b5; }
.donut-key[data-color="7"] { background: #c86e52; }

.transaction-list { display: grid; gap: 10px; }
.transaction-item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid rgba(24,49,43,.08);
  border-radius: 16px;
  color: inherit;
  text-align: left;
  background: rgba(255,253,248,.74);
  cursor: pointer;
}
.transaction-icon { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 14px; color: #43665a; background: #e4ebe4; font-size: 1rem; font-weight: 850; }
.transaction-main { min-width: 0; }
.transaction-main strong { display: block; overflow: hidden; margin-bottom: 4px; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; }
.transaction-main span { display: block; overflow: hidden; color: #87938f; font-size: 0.72rem; text-overflow: ellipsis; white-space: nowrap; }
.transaction-amount { text-align: right; }
.transaction-amount strong { display: block; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.transaction-amount strong.expense { color: var(--expense); }
.transaction-amount strong.income { color: var(--income); }
.transaction-amount span { display: block; margin-top: 4px; color: #9aa49f; font-size: 0.68rem; }
.empty-list { padding: 40px 20px; border: 1px dashed rgba(24,49,43,.17); border-radius: 18px; color: #8b9893; text-align: center; }

.page-title-row { align-items: center; margin-bottom: 26px; }
.page-title-row > p { margin: 0; color: var(--muted); font-size: .8rem; }
.page-title-row h1 { font-size: 2.45rem; }
.entry-card { padding: clamp(20px, 5vw, 34px); border: 1px solid rgba(255,255,255,.8); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow); }
.direction-switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; width: min(100%, 270px); margin: 0 auto; padding: 4px; border: 0; border-radius: 14px; background: #e9e5dc; }
.direction-switch label { position: relative; display: block; cursor: pointer; }
.direction-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.direction-switch span { display: block; padding: 9px 16px; border-radius: 10px; color: #7e8985; text-align: center; transition: .18s ease; }
.direction-switch input:checked + span { color: var(--green); background: #fffdf8; box-shadow: 0 4px 12px rgba(45,52,46,.08); }
.amount-field { position: relative; display: block; width: min(100%, 520px); margin: 4px auto 10px; }
.amount-field input { height: auto; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 4px 20px 12px 42px; color: var(--ink); background: transparent; font-size: clamp(3.1rem, 13vw, 5.2rem); font-weight: 850; line-height: 1; letter-spacing: -0.065em; text-align: center; }
.amount-field input:focus { outline: 0; border-bottom-color: var(--orange); }
.currency-symbol { position: absolute; z-index: 1; top: 18%; left: 0; font-family: Georgia, serif; font-size: 1.8rem; }
.amount-tools { display: flex; justify-content: center; gap: 8px; margin-top: -8px; }
.amount-tools button { min-height: 36px; border: 1px solid var(--line); border-radius: 999px; padding: 0 13px; color: #60716b; background: rgba(255,255,255,.62); cursor: pointer; font-size: .73rem; font-weight: 750; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-section { display: grid; gap: 12px; }
.field-label-row { align-items: center; color: #53655f; font-size: .82rem; font-weight: 700; }
.category-picker-section { padding: 15px; border: 1px solid rgba(24,49,43,.09); border-radius: 18px; background: rgba(247,243,235,.7); }
.category-mode-toggle { min-height: 34px; border: 0; border-radius: 999px; padding: 0 11px; color: var(--green); background: var(--green-soft); cursor: pointer; font-size: .72rem; font-weight: 800; }
.category-panel { display: grid; gap: 10px; }
.category-helper { color: #98a39e; font-size: .7rem; }
.category-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.category-chip { display: grid; min-width: 0; min-height: 58px; align-content: center; gap: 3px; border: 1px solid var(--line); border-radius: 14px; padding: 8px 6px; background: rgba(255,255,255,.65); cursor: pointer; text-align: center; }
.category-chip strong { overflow: hidden; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.category-chip small { overflow: hidden; color: #99a39f; font-size: .62rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.category-chip.active { border-color: var(--green); color: #fff; background: var(--green); }
.category-chip.active small { color: rgba(255,255,255,.72); }
.category-select-grid { gap: 10px; }
.entry-actions { display: flex; gap: 10px; margin-top: 4px; }
.entry-actions .primary-button { justify-content: center; flex: 1; }
.delete-entry-button { min-height: 50px; border: 0; padding: 0 8px; color: #ad4e3b; background: transparent; cursor: pointer; font-weight: 750; }

.records-title { align-items: flex-end; }
.records-title strong { color: #6b7c76; font-size: .86rem; }
.filter-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.filter-bar .filter-search { grid-column: 1 / -1; }
.records-list { min-height: 120px; }
.month-section { display: grid; grid-column: 1 / -1; gap: 9px; }
.month-heading { display: flex; align-items: flex-end; justify-content: space-between; margin: 16px 3px 2px; }
.month-heading strong { font-size: .9rem; }
.month-heading span { color: #7f8c87; font-size: .72rem; }
.month-transactions { display: grid; gap: 9px; }
.load-more { display: block; margin: 18px auto 0; }

.round-add-button { display: grid; width: 42px; height: 42px; place-items: center; border: 0; border-radius: 14px; color: white; background: var(--green); cursor: pointer; font-size: 1.35rem; }
.plan-switch { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 18px; padding: 4px; border-radius: 14px; background: #e9e4da; }
.plan-switch button { min-height: 40px; border: 0; border-radius: 11px; color: #7b8782; background: transparent; cursor: pointer; font-weight: 750; }
.plan-switch button.active { color: var(--green); background: #fffdf8; box-shadow: 0 4px 14px rgba(45,52,46,.08); }
.plan-overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 18px; }
.plan-stat { padding: 14px 10px; border-radius: 16px; text-align: center; background: var(--surface); }
.plan-stat strong { display: block; margin-bottom: 4px; font-size: 1.15rem; }
.plan-stat span { color: #89958f; font-size: .68rem; }
.plans-list { display: grid; gap: 11px; }
.plan-item { display: grid; gap: 7px; }
.plan-card { width: 100%; padding: 17px; border: 1px solid rgba(24,49,43,.08); border-radius: 18px; text-align: left; background: var(--surface); cursor: pointer; }
.plan-card-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.plan-card-head strong { font-size: .94rem; }
.plan-card-head .expense { color: var(--expense); }
.plan-card-head .income { color: var(--income); }
.plan-toggle-button { justify-self: start; min-height: 34px; border: 1px solid var(--line); border-radius: 999px; padding: 0 12px; color: #5e746b; background: rgba(255,255,255,.66); cursor: pointer; font-size: .72rem; font-weight: 750; }
.plan-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #7f8c87; font-size: .71rem; }
.status-pill { padding: 4px 8px; border-radius: 999px; color: #47745f; background: #e1ece5; font-size: .65rem; font-weight: 750; }
.status-pill.inactive { color: #7f8582; background: #ece9e3; }

.settings-card { overflow: hidden; margin-bottom: 16px; border: 1px solid rgba(255,255,255,.8); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 10px 28px rgba(55,62,53,.05); }
.settings-section-title { margin: 22px 5px 9px; color: #84918c; font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.settings-row { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 74px; padding: 13px 16px; border: 0; border-bottom: 1px solid var(--line); text-align: left; background: transparent; }
.settings-row:last-child { border-bottom: 0; }
.settings-row > div { display: flex; align-items: center; gap: 12px; }
.settings-row strong { display: block; margin-bottom: 4px; font-size: .86rem; }
.settings-row p { margin: 0; color: #89958f; font-size: .73rem; }
.settings-row.interactive { cursor: pointer; }
.settings-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: #45665b; background: #e1eae4; font-size: .75rem; font-weight: 850; }
.security-copy { margin: 15px 10px; color: #909b96; text-align: center; font-size: .71rem; line-height: 1.6; }

.bottom-nav {
  position: fixed;
  z-index: 30;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  min-height: calc(72px + env(safe-area-inset-bottom));
  padding: 5px max(12px, calc((100vw - 640px) / 2)) env(safe-area-inset-bottom);
  border-top: 1px solid rgba(24,49,43,.08);
  background: rgba(255,253,248,.91);
  backdrop-filter: blur(24px);
}
.nav-item { display: grid; place-items: center; align-content: center; gap: 4px; border: 0; color: #8e9994; background: transparent; cursor: pointer; font-size: .64rem; font-weight: 700; }
.nav-item svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.nav-item.active { color: var(--green); }
.add-nav { position: relative; }
.add-nav-circle { display: grid; width: 47px; height: 47px; margin-top: -27px; place-items: center; border: 5px solid var(--paper); border-radius: 16px; color: #fffdf8; background: var(--green); box-shadow: 0 8px 22px rgba(23,63,53,.22); }
.add-nav-circle svg { width: 22px; }

.toast { position: fixed; z-index: 50; right: 50%; bottom: calc(90px + env(safe-area-inset-bottom)); max-width: calc(100% - 40px); padding: 11px 16px; border-radius: 999px; color: white; background: rgba(23,49,42,.94); box-shadow: 0 12px 30px rgba(23,49,42,.2); opacity: 0; pointer-events: none; transform: translate(50%, 10px); transition: .2s ease; font-size: .79rem; font-weight: 700; white-space: nowrap; }
.toast.show { opacity: 1; transform: translate(50%, 0); }

.editor-dialog { width: min(100% - 20px, 620px); max-height: min(88vh, 820px); margin: auto auto 0; padding: 0; border: 0; border-radius: 26px 26px 0 0; color: var(--ink); background: var(--surface-solid); box-shadow: 0 -18px 60px rgba(24,49,43,.18); }
.editor-dialog::backdrop { background: rgba(20,35,31,.38); backdrop-filter: blur(3px); }
.editor-dialog[open] { animation: sheet-up .22s ease both; }
@keyframes sheet-up { from { transform: translateY(28px); opacity: .7; } }
.editor-dialog form { display: flex; flex-direction: column; max-height: min(88vh, 820px); }
.dialog-header { position: sticky; z-index: 2; top: 0; display: grid; grid-template-columns: 60px 1fr 60px; align-items: center; padding: 15px 18px 13px; border-bottom: 1px solid var(--line); text-align: center; background: rgba(255,253,248,.94); backdrop-filter: blur(18px); }
.dialog-header .eyebrow { margin-bottom: 2px; }
.dialog-header h2 { font-size: 1.05rem; }
.dialog-header button:last-child { text-align: right; }
.text-button.strong { color: var(--green); font-weight: 850; }
.dialog-content { display: grid; gap: 15px; overflow-y: auto; padding: 20px; }
.dialog-section { display: grid; gap: 12px; padding: 16px; border-radius: 18px; background: #f3efe7; }
.dialog-section-title { margin: 0; color: #82908a; font-size: .7rem; font-weight: 800; letter-spacing: .1em; }
.dialog-content .form-grid { gap: 10px; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 4px; }
.toggle-row input { width: 24px; min-height: 24px; accent-color: var(--green); }
.editor-dialog > form > .form-error { padding: 0 20px; }
.editor-dialog > form > .danger-button { flex: 0 0 auto; margin: 10px 20px calc(18px + env(safe-area-inset-bottom)); width: calc(100% - 40px); }
.manager-list { display: grid; gap: 9px; }
.manager-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 54px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; text-align: left; background: rgba(255,255,255,.7); cursor: pointer; }
.manager-item span { color: #87938f; font-size: .72rem; }
.manager-add { width: 100%; }

@media (min-width: 760px) {
  .page-container { padding-top: 48px; }
  #page-home.active { display: block; }
  .metric-strip { grid-auto-flow: initial; grid-template-columns: repeat(5, 1fr); overflow: visible; }
  .dashboard-chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #recent-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .entry-card { max-width: 760px; margin: 0 auto; }
  #page-add .page-title-row { max-width: 760px; margin-right: auto; margin-left: auto; }
  .records-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #page-settings, #page-plans { max-width: 760px; margin: 0 auto; }
  .editor-dialog { margin-bottom: auto; border-radius: 26px; }
}

@media (max-width: 480px) {
  .app-header { padding-right: 16px; padding-left: 16px; }
  .page-container { padding: 27px 16px calc(108px + env(safe-area-inset-bottom)); }
  .hero-row { align-items: flex-start; }
  .hero-row h1 { font-size: 2.35rem; }
  .summary-grid { gap: 8px; }
  .summary-grid strong { font-size: .87rem; }
  .form-grid, .filter-bar { grid-template-columns: 1fr; }
  .donut-layout { grid-template-columns: 126px minmax(0, 1fr); gap: 12px; }
  .donut-legend li { grid-template-columns: 8px minmax(46px, 1fr) auto; }
  .donut-legend small { display: none; }
  .network-badge { max-width: 120px; font-size: .65rem; }
  /* 小屏下统计卡改为 2 列网格：5 张全部可见，避免横滚裁剪 + 右侧大片空白 */
  .metric-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 8px;
    padding: 4px 0 10px;
    overflow: visible;
    scrollbar-width: auto;
  }
  .metric-strip::-webkit-scrollbar { display: block; }
  .metric-tile { min-height: 86px; }
  .metric-tile strong { font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Persistent sync feedback stays visible on phones as well as desktop. */
.sync-message { max-width: 1060px; margin: 12px auto 0; padding: 12px 20px; background: #f4ded5; border-radius: 12px; }
.sync-message p { margin: 0 0 8px; overflow-wrap: anywhere; font-size: .85rem; }
.sync-message button { margin-right: 16px; }
#pending-dialog .dialog-content { display: grid; gap: 14px; }
#pending-list article { padding: 10px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
#pending-dialog p { margin: 0; }
button:disabled { opacity: .55; cursor: wait; }