:root {
  --paper: #f4eee4;
  --paper-2: #efe6d6;
  --ink: #1c1916;
  --ink-soft: #5a5248;
  --line: #e0d4c2;
  --terra: #c45c26;
  --terra-d: #9a3f14;
  --forest: #2f5d4a;
  --forest-s: #3f7a62;
  --amber: #c4921a;
  --rose: #b42318;
  --white: #fffcf7;
  --shadow: 0 18px 40px rgba(48, 32, 16, 0.12);
  --sans: Arial, Helvetica, sans-serif;
  --serif: Arial, Helvetica, sans-serif;
  --radius: 18px;
  --safe-b: env(safe-area-inset-bottom);
  --glass: linear-gradient(180deg, rgba(255,255,255,.46), rgba(255,255,255,.18));
  --glass-strong: linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.26));
  --glass-border: 1px solid rgba(255,255,255,.55);
  --glass-blur: blur(18px) saturate(1.35);
  --glass-shadow: 0 12px 36px rgba(20, 40, 10, 0.12), inset 0 1px 0 rgba(255,255,255,.55);
  --on: #c45c26;
  --on-hi: #e07a3a;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; color: var(--ink); }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  background-color: #6e9a4a;
  overflow-x: hidden;
  max-width: 100%;
}
body::before {
  content: "";
  position: fixed;
  inset: -24px;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.05) 45%, rgba(8,20,6,.12) 100%),
    url("../images/grass.jpg") center center / cover no-repeat;
  filter: blur(4px);
  transform: scale(1.06);
}
.sky { display: none; }
#app { position: relative; z-index: 1; }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { font-size: 16px; }
button, a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.app-shell { min-height: 100dvh; padding-bottom: calc(80px + var(--safe-b)); }
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 10px;
  padding: calc(10px + env(safe-area-inset-top)) 12px 10px;
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: var(--glass-border);
}
.top-tools, .custom-range { grid-column: 1 / -1; }
.top-tools {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
}
.page-title { font-weight: 700; font-size: 0.95rem; min-width: 0; }
.period-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  margin: 2px 0 12px;
}
.range-dock {
  position: relative; z-index: 18;
  display: flex; align-items: center;
  flex: none;
  height: 40px;
}
.range-toggle {
  width: 40px; height: 40px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.55);
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.18));
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(20,40,10,.1), inset 0 1px 0 rgba(255,255,255,.7);
  color: #1a1714;
}
.range-ico { width: 22px; height: 22px; display: block; }
.range-ico .ico-sheet {
  fill: #fff8ee; stroke: #1a1714; stroke-width: 1.6;
}
.range-ico .ico-bind {
  fill: none; stroke: #c45c26; stroke-width: 2; stroke-linecap: round;
}
.range-ico .ico-line {
  stroke: rgba(26,23,20,.22); stroke-width: 1.3; stroke-linecap: round;
}
.range-ico .ico-scan { fill: #14b8a6; }
.range-ico .ico-dot { fill: #fb7185; }
.range-dock.open .range-toggle {
  background: linear-gradient(180deg, var(--on-hi), var(--on));
  border-color: transparent;
  color: #fff;
}
.range-dock.open .range-ico .ico-sheet { fill: #fff4ea; stroke: #fff; }
.range-dock.open .range-ico .ico-bind { stroke: #ffe0c2; }
.range-dock.open .range-ico .ico-line { stroke: rgba(255,255,255,.45); }
.range-dock.open .range-ico animateTransform { dur: 0.7s; }
.range-tray {
  display: flex; gap: 6px; align-items: center;
  position: absolute; left: calc(100% + 6px); top: 0;
  height: 40px;
  max-width: 0;
  opacity: 0;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  pointer-events: none;
  transition: max-width .32s ease, opacity .2s ease;
}
.range-tray::-webkit-scrollbar { display: none; }
.range-dock.open .range-tray {
  max-width: min(68vw, 520px);
  opacity: 1;
  pointer-events: auto;
}
.range-chip {
  flex: none; border: 1px solid rgba(255,255,255,.5);
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(12px);
  border-radius: 999px; padding: 8px 12px; font-size: 0.78rem; font-weight: 650;
  color: var(--ink); min-height: 36px; white-space: nowrap;
}
.range-chip.on { background: linear-gradient(180deg, var(--on-hi), var(--on)); color: #fff; border-color: transparent; }
.top-actions {
  display: flex; align-items: center; gap: 8px;
  margin-left: auto; flex: none;
}
.icon-btn {
  width: 40px; height: 40px; padding: 0;
  display: grid; place-items: center;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.55);
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.18));
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 6px 16px rgba(20, 40, 10, 0.1), inset 0 1px 0 rgba(255,255,255,.7);
  color: #3d352c;
}
.icon-btn svg { width: 18px; height: 18px; display: block; }
.icon-btn:active { transform: scale(.94); }
.icon-btn.exit-btn { color: #9a3f14; }
.icon-btn.exit-btn:hover,
.icon-btn.exit-btn:focus-visible {
  background: linear-gradient(180deg, var(--on-hi), var(--on));
  border-color: transparent;
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .range-tray { transition: none; }
}
.range-shift {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 40px;
  margin: 0;
  font-size: 0.95rem; font-weight: 750;
}
.range-shift span {
  text-align: center;
  text-transform: capitalize;
  line-height: 1.15;
  min-width: 0;
}
.range-shift button,
.range-shift-ph {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 14px;
}
.range-shift button {
  border: 1px solid rgba(255,255,255,.55);
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.18));
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 6px 16px rgba(20, 40, 10, 0.08), inset 0 1px 0 rgba(255,255,255,.7);
  font-size: 1.15rem;
}
.brand { display: flex; gap: 10px; align-items: center; min-width: 0; }
.brand > div { min-width: 0; }
.brand em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand img { border-radius: 8px; }
.formichina-mark {
  display: inline-grid;
  place-items: center;
  width: var(--mark, 36px);
  height: var(--mark, 36px);
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  line-height: 0;
}
.formichina-mark svg { width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: reduce) {
  .formichina-mark animate,
  .formichina-mark animateTransform { display: none; }
}
.ant-stage {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: #efe4d0;
  display: grid;
  place-items: center;
  padding:
    calc(12px + env(safe-area-inset-top))
    calc(12px + env(safe-area-inset-right))
    calc(16px + env(safe-area-inset-bottom))
    calc(12px + env(safe-area-inset-left));
}
.ant-stage .formichina-mark {
  --mark: min(92vw, calc(100dvh - 6.5rem), 720px);
  width: var(--mark);
  height: var(--mark);
  border-radius: 50%;
}
.ant-stage-close {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  right: calc(10px + env(safe-area-inset-right));
  width: 44px; height: 44px;
  border: 0; border-radius: 999px;
  background: rgba(255,255,255,.72);
  font-size: 1.2rem;
}
@media (orientation: landscape) and (max-height: 520px) {
  .ant-stage .formichina-mark { --mark: min(86svh, 58vw); }
}
.brand strong { display: block; font-family: var(--serif); font-weight: 560; font-size: 1.05rem; }
.brand em { display: block; font-style: normal; font-size: 0.75rem; color: var(--ink-soft); }
.sync-btn { font-size: 0.8rem; padding: 8px 12px; min-height: 40px; white-space: nowrap; }
.month-nav, .page-title { font-weight: 600; font-size: 0.95rem; }
.month-nav { display: flex; align-items: center; gap: 8px; }
.month-nav button {
  border: var(--glass-border);
  background: var(--glass);
  backdrop-filter: blur(12px);
  width: 32px; height: 32px; border-radius: 999px;
}
.cal-bar {
  display: flex; gap: 6px; margin: 0 0 10px;
}
.cal-view {
  flex: 1; min-height: 40px;
  border: var(--glass-border);
  background: var(--glass);
  border-radius: 999px;
  font-weight: 700; font-size: 0.8rem;
}
.cal-view.on { background: linear-gradient(180deg, var(--on-hi), var(--on)); color: #fff; border-color: transparent; }
.cal-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 0 12px;
}
.cal-nav strong {
  flex: 1; text-align: center; font-size: 0.95rem;
  text-transform: capitalize;
}
.cal-nav button {
  width: 40px; height: 40px; border-radius: 999px;
  border: var(--glass-border); background: var(--glass);
  font-size: 1.2rem;
}
.cal-wdays, .cal-month {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.cal-wdays {
  margin-bottom: 8px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(255,252,247,.96);
  box-shadow: 0 2px 10px rgba(20,17,14,.07);
}
.cal-wdays span {
  display: grid; place-items: center;
  min-height: 30px;
  color: #14110e;
  font-size: 0.8rem;
  font-weight: 800;
}
.cal-wdays span.we { color: #9a3f14; }
.cal-wdays span.sun { opacity: 0.7; }
.cal-cell {
  min-height: 78px;
  border: 0;
  background: rgba(255,252,247,.96);
  border-radius: 12px;
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 2px;
  font-weight: 750;
  padding: 4px 3px 5px;
  text-align: left;
}
.cal-cell > b { align-self: center; font-size: 0.78rem; line-height: 1.1; }
.cal-cell.outm { opacity: .38; }
.cal-cell.sat {
  background: #fff1dc;
  color: #7c3d00;
}
.cal-cell.sun {
  background: #fff1dc;
  color: #7c3d00;
  opacity: .58;
}
.cal-cell.fest {
  background: #f8e0d0;
  color: #9a3f14;
  box-shadow: inset 0 0 0 1.5px rgba(196, 92, 38, 0.45);
}
.cal-cell.sun.outm { opacity: .28; }
.cal-cell.today { box-shadow: inset 0 0 0 2px #0f766e; }
.cal-cell.on { background: #fff; color: inherit; opacity: 1; box-shadow: inset 0 0 0 2px var(--terra); }
.cal-cell.on .fest-mark { color: #9a3f14; }
.cal-lines {
  display: grid; gap: 1px; width: 100%; min-width: 0;
}
.cal-line {
  display: block;
  font-size: 0.55rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1px 2px;
  border-radius: 4px;
}
.cal-line.out { color: #b42318; background: rgba(180, 35, 24, 0.08); }
.cal-line.in { color: #15803d; background: rgba(21, 128, 61, 0.1); }
.cal-line.alloc { color: #9a3f14; background: rgba(196, 92, 38, 0.1); }
.cal-line.ev { color: #92400e; background: rgba(245, 158, 11, 0.16); }
.cal-line.rec { box-shadow: inset 2px 0 0 #3b82f6; }
.cal-line.more { color: #5a5248; font-weight: 700; }
.cal-month.focus-rec .cal-line { opacity: 0.22; }
.cal-month.focus-rec .cal-line.rec {
  opacity: 1;
  color: #1d4ed8;
  background: #bfdbfe;
  box-shadow: 0 0 0 1.5px #2563eb;
}
.cal-month.focus-out .cal-line { opacity: 0.22; }
.cal-month.focus-out .cal-line.out { opacity: 1; background: #fecaca; color: #991b1b; box-shadow: 0 0 0 1.5px #dc2626; }
.cal-month.focus-in .cal-line { opacity: 0.22; }
.cal-month.focus-in .cal-line.in { opacity: 1; background: #86efac; color: #14532d; box-shadow: 0 0 0 1.5px #16a34a; }
.cal-month.focus-ev .cal-line { opacity: 0.22; }
.cal-month.focus-ev .cal-line.ev { opacity: 1; background: #fde68a; color: #78350f; box-shadow: 0 0 0 1.5px #d97706; }
.cal-month.focus-we .cal-cell { opacity: 0.28; }
.cal-month.focus-we .cal-cell.sat,
.cal-month.focus-we .cal-cell.sun { opacity: 1; box-shadow: inset 0 0 0 2px #d97706; }
.cal-month.focus-fe .cal-cell { opacity: 0.28; }
.cal-month.focus-fe .cal-cell.fest { opacity: 1; box-shadow: inset 0 0 0 2px #c45c26; }
.fest-mark {
  display: block;
  max-width: 100%;
  font-size: 0.52rem;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #9a3f14;
}
.cal-dots { display: flex; gap: 3px; height: 6px; }
.cal-dots i, .cal-legend i {
  width: 6px; height: 6px; border-radius: 50%; display: inline-block;
}
.cal-dots i.in, .cal-legend i.in { background: #14b8a6; }
.cal-dots i.out, .cal-legend i.out { background: #fb7185; }
.cal-dots i.ev, .cal-legend i.ev { background: #f59e0b; }
.cal-legend {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,252,247,.96);
  border: 1px solid rgba(20,17,14,.1);
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  font-size: 0.78rem; font-weight: 800; color: #14110e;
}
.cal-legend button {
  padding: 6px 10px; border-radius: 999px; border: 1px solid transparent;
  font: inherit; font-weight: 800;
}
.cal-legend .lg-out { color: #b42318; background: #ffe4e6; }
.cal-legend .lg-in { color: #15803d; background: #d1fae5; }
.cal-legend .lg-rec { color: #1d4ed8; background: #dbeafe; }
.cal-legend .lg-ev { color: #92400e; background: #fef3c7; }
.cal-legend .lg-we { color: #7c3d00; background: #fff1dc; }
.cal-legend .lg-fe { color: #9a3f14; background: #f8e0d0; }
.cal-legend button.on { box-shadow: 0 0 0 2px currentColor; }
.cal-legend i.we { background: #f0b27a; }
.cal-legend i.fe { background: #c45c26; }
.cal-fest-tag {
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: #f8e0d0;
  color: #9a3f14;
  font-size: 0.85rem;
  font-weight: 750;
}
.cal-fest-tag.week { background: #fff1dc; }
.cal-week { display: grid; gap: 6px; }
.cal-week-row {
  width: 100%;
  display: grid; grid-template-columns: 48px 1fr auto; gap: 8px; align-items: center;
  text-align: left;
  background: rgba(255,252,247,.94);
  border: 1px solid rgba(20,17,14,.1);
  border-radius: 14px;
  padding: 8px 10px;
}
.cal-week-row.today { box-shadow: inset 0 0 0 2px #0f766e; }
.cal-week-row.sat { background: #fff1dc; }
.cal-week-row.sun { background: #fff1dc; opacity: .68; }
.cal-week-row.fest { box-shadow: inset 0 0 0 1.5px rgba(196, 92, 38, 0.45); }
.cal-week-row.on { opacity: 1; background: linear-gradient(180deg, var(--on-hi), var(--on)); color: #fff; }
.cal-week-d { display: grid; justify-items: center; }
.cal-week-d small { font-size: 0.68rem; text-transform: uppercase; font-weight: 800; }
.cal-week-body { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.cal-week-body span {
  font-size: 0.72rem; font-weight: 700; padding: 2px 6px; border-radius: 999px;
  background: #ffe4e6; color: #9f1239;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-week-body span.in { background: #d1fae5; color: #065f46; }
.cal-week-body span.ev { background: #fef3c7; color: #92400e; }
.cal-week-body em { color: #6b6258; font-size: 0.78rem; }
.cal-year { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cal-year-m {
  text-align: left;
  background: rgba(255,252,247,.94);
  border: 1px solid rgba(20,17,14,.1);
  border-radius: 16px;
  padding: 12px;
  display: grid; gap: 2px;
}
.cal-year-m.today { box-shadow: inset 0 0 0 2px #0f766e; }
.cal-year-m b { text-transform: capitalize; }
.cal-year-m small.in { color: #065f46; font-weight: 750; }
.cal-year-m small.out { color: #9f1239; font-weight: 750; }
.cal-day-sum { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cal-agenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cal-item {
  width: 100%; text-align: left;
  background: rgba(255,252,247,.96);
  border: 1px solid rgba(20,17,14,.12);
  border-radius: 14px;
  padding: 12px;
  display: grid; gap: 2px;
}
.cal-item b { color: #14110e; font-size: 1.02rem; }
.cal-item strong { justify-self: end; }
.cal-item.in strong { color: #065f46; }
.cal-item.out strong { color: #9f1239; }
@media (min-width: 720px) {
  .cal-year { grid-template-columns: repeat(4, 1fr); }
}

.app-main { padding: 8px 12px 24px; }

.timeline {
  background: var(--glass-strong);
  border: var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 22px;
  padding: 16px 12px 12px;
  box-shadow: var(--glass-shadow);
}
.tl-kicker { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: #1a1714; font-weight: 800; }
.tl-balance { font-family: var(--serif); font-size: clamp(1.7rem, 6vw, 2.15rem); font-weight: 650; letter-spacing: -0.03em; margin: 2px 0; }
.tl-balance.up { color: var(--forest); }
.tl-balance.down { color: var(--terra-d); }
.tl-sub { margin: 0 0 10px; color: var(--ink-soft); font-size: 0.85rem; }
.tl-stats { display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.82rem; margin-bottom: 8px; }
.tl-stats .chip {
  display: inline-flex; align-items: center;
  padding: 5px 10px; border-radius: 999px; font-weight: 750;
  background: rgba(255,252,247,.88); color: #14110e;
}
.tl-stats .chip.in { background: #d1fae5; color: #065f46; }
.tl-stats .chip.out { background: #ffe4e6; color: #9f1239; }
.tl-stats .chip.net { background: #fff7ed; }
.tl-scroll {
  display: flex; gap: 4px; overflow-x: auto; padding: 6px 4px 8px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.tl-col {
  flex: 0 0 22px; border: 0; background: transparent; padding: 0;
  scroll-snap-align: center; display: flex; flex-direction: column; align-items: center;
}
.tl-up, .tl-down { height: 92px; width: 14px; display: flex; justify-content: center; }
.tl-up { align-items: flex-end; }
.tl-down { align-items: flex-start; flex-direction: column; }
.tl-axis { height: 18px; font-size: 0.62rem; color: var(--ink-soft); }
.tl-col.today .tl-axis span {
  background: var(--ink); color: var(--paper); border-radius: 999px; padding: 0 4px;
}
.tl-col.future { opacity: 0.45; }
.bar { display: block; width: 10px; border-radius: 6px 6px 2px 2px; }
.bar.in { background: linear-gradient(180deg, var(--forest-s), var(--forest)); }
.bar.out { background: linear-gradient(180deg, var(--terra), #8d3410); border-radius: 2px 2px 6px 6px; }
.bar.alloc {
  width: 8px; margin-top: 2px;
  background: repeating-linear-gradient(135deg, var(--amber), var(--amber) 3px, transparent 3px, transparent 6px);
  border-radius: 2px 2px 5px 5px;
}
.tl-legend { margin: 6px 4px 0; font-size: 0.75rem; color: var(--ink-soft); }
.tl-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tl-status {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 0.88rem; font-weight: 700;
}
.tl-status .tl-dot {
  width: 8px; height: 8px; border-radius: 50%; background: currentColor;
}
.tl-status.up { color: var(--forest); }
.tl-status.down { color: var(--terra-d); }
.tl-status.eq { color: #6b6258; }
.tl-status em { font-style: normal; font-weight: 600; font-size: 0.78rem; color: var(--ink-soft); }
.tl-status em.up { color: var(--forest); }
.tl-status em.down { color: var(--terra-d); }
.tl-chart { width: 100%; margin-top: 8px; position: relative; background: rgba(255,252,247,.55); border-radius: 16px; overflow: visible; padding: 4px 2px 2px 0; }
.tl-chart svg { width: 100%; height: auto; min-height: 220px; display: block; overflow: visible; }
.tl-chart .axis { stroke: rgba(28,25,22,.18); stroke-width: 1.2; }
.tl-chart .grid { stroke: rgba(28,25,22,.08); stroke-width: 1; }
.tl-chart .bar-in { fill: #14b8a6; }
.tl-chart .bar-out { fill: #fb7185; }
.tl-chart .bar-ant { fill: #fbbf24; }
.tl-chart .cash-line { stroke: #0f766e; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
.tl-chart .trend-line { stroke: #64748b; stroke-width: 1.2; stroke-dasharray: 5 5; }
.tl-chart .ma-line { stroke: #6366f1; stroke-width: 2; }
.tl-chart .zero-line { stroke: rgba(28,25,22,.15); stroke-width: 1; }
.tl-chart .safety-line { stroke: #ea580c; stroke-width: 1.2; stroke-dasharray: 3 5; }
.tl-chart .today-line { stroke: #0f172a; stroke-width: 1.2; stroke-dasharray: 2 4; opacity: .45; }
.tl-chart .tick { fill: #1a1714; font-size: 11px; font-weight: 700; font-family: var(--sans); }
.tl-pin {
  position: absolute; top: 10px;
  transform: translateX(-20%);
  background: #0f172a; color: #fff;
  font-size: 0.7rem; font-weight: 750;
  padding: 4px 8px; border-radius: 999px;
  pointer-events: none; white-space: nowrap;
}
.tl-chart .hit { fill: transparent; }
.tl-hit.today .bar-in, .tl-hit.today .bar-out { filter: brightness(1.08); }
.tl-hit.future { opacity: 0.35; }
.tl-hit { cursor: pointer; }
.tl-kpi { text-align: right; }
.tl-arrow { font-size: 0.88rem; font-weight: 750; }
.tl-arrow.good { color: var(--forest); }
.tl-arrow.bad { color: #9a4030; }
.tl-arrow.eq { color: #6b6258; }
.tl-delta { font-size: 0.8rem; font-weight: 650; color: var(--ink-soft); }
.tl-delta.up { color: var(--forest); }
.tl-delta.down { color: #9a4030; }
.tl-stats .net { font-weight: 750; }
.tl-alert {
  margin: 8px 0 0; padding: 8px 10px; border-radius: 10px;
  background: #fff4e5; color: #7c3d00; font-size: 0.82rem; font-weight: 650;
}
.tl-alert.bad { background: #fdecea; color: #8a1f16; }
.tl-toggles { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 6px; }
.tl-tog {
  border: var(--glass-border);
  background: var(--glass);
  backdrop-filter: blur(10px);
  color: var(--ink);
  border-radius: 999px; padding: 4px 9px; font-size: 0.75rem; font-weight: 650;
}
.tl-tog.on { background: linear-gradient(180deg, var(--on-hi), var(--on)); color: #fff; border-color: transparent; }
.tl-tog-ant.on { background: linear-gradient(180deg, #fbbf24, #d97706); color: #422006; }
.tl-chart .bar-ant { fill: #f59e0b; stroke: #b45309; stroke-width: 0.6; }
.tl-ant-box {
  margin: 10px 0 0;
  padding: 10px 12px 8px;
  border-radius: 14px;
  background: var(--glass);
  border: var(--glass-border);
  backdrop-filter: blur(12px);
}
.tl-ant-slim {
  display: grid;
  grid-template-columns: 1.3fr 1fr 0.7fr;
  gap: 8px;
  margin-bottom: 6px;
}
.tl-ant-slim span {
  display: block;
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-soft);
}
.tl-ant-slim strong { font-size: 1.05rem; font-weight: 750; color: var(--ink); }
.tl-ant-slim .good strong { color: var(--forest); }
.tl-ant-slim .bad strong { color: var(--rose); }
.tl-ant-chart { margin: 0 -4px; }
.tl-ant-chart svg { width: 100%; height: auto; display: block; max-height: 88px; }
.tl-ant-chart .ant-line { stroke: #c45c26; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tl-ant-chart .tick { fill: var(--ink-soft); font-size: 10px; font-weight: 650; }
.tl-ant-cats { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 5px; }
.tl-ant-cats li {
  display: grid; grid-template-columns: 1fr auto; gap: 1px 8px;
  font-size: 0.75rem; font-weight: 650; color: var(--ink);
}
.tl-ant-cats i {
  grid-column: 1 / -1;
  height: 4px; border-radius: 99px;
  background: rgba(196, 92, 38, 0.55);
}
.tl-ant-tip {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.45);
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--ink);
}
.tl-ant-tip b { color: var(--forest); }
.tl-tip {
  position: absolute; top: 36px; min-width: 168px;
  background: #0f172a; color: #fff;
  border-radius: 14px; padding: 10px 12px; font-size: 0.8rem; font-weight: 650;
  display: grid; gap: 3px; pointer-events: none; z-index: 5;
  box-shadow: 0 10px 24px rgba(15,23,42,.28);
}
.tl-tip .in { color: #5eead4; }
.tl-tip .out { color: #fda4af; }
.tl-tip .ant { color: #fde68a; }
.tl-tip[hidden] { display: none !important; }
.tl-coach {
  margin: 10px 0 0; padding: 10px 12px;
  font-size: 0.88rem; color: var(--ink);
  border-left: 3px solid rgba(28,25,22,.45);
}
.custom-range { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.custom-range input { flex: 1 1 140px; min-width: 0; padding: 10px 8px; border-radius: 10px; border: var(--glass-border); background: var(--glass); backdrop-filter: blur(10px); }

html[data-theme="dark"] {
  --paper: #121417;
  --paper-2: #1a1d21;
  --ink: #ece8e1;
  --ink-soft: #a39b90;
  --line: #2c3036;
  --white: #1b1f24;
  --shadow: 0 18px 40px rgba(0,0,0,.35);
  --forest: #6fbf97;
  --terra: #d27a4d;
  --terra-d: #e08a62;
}
html[data-theme="dark"] body { background-color: #1a2414; color: var(--ink); }
html[data-theme="dark"] body::before {
  background:
    linear-gradient(180deg, rgba(10,16,12,.45) 0%, rgba(10,16,12,.28) 100%),
    url("../images/grass.jpg") center center / cover no-repeat;
  filter: blur(5px);
}
html[data-theme="dark"] .tl-chart { background: rgba(15,20,18,.45); }
html[data-theme="dark"] .tl-chart .cash-line { stroke: #5eead4; }
html[data-theme="dark"] .tl-chart .bar-in { fill: #2dd4bf; }
html[data-theme="dark"] .tl-chart .bar-out { fill: #fb7185; }
html[data-theme="dark"] .tl-chart .tick { fill: #ece8e1; }
html[data-theme="dark"] .tl-tip { background: #0b0d10; }
html[data-theme="dark"] .tl-alert { background: #3a2a14; color: #f0c48a; }
html[data-theme="dark"] .tl-alert.bad { background: #3a1818; color: #f0b4ae; }

.income-strip, .ant-card {
  padding: 14px 16px; margin-top: 12px;
}
.income-strip header { display: flex; justify-content: space-between; align-items: baseline; }
.income-strip h2 { font-size: 0.95rem; margin: 0; }
.income-total { margin: 6px 0 10px; color: var(--ink-soft); font-size: 0.88rem; }
.income-strip ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.income-strip li button {
  width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px;
  text-align: left; border: var(--glass-border);
  background: var(--glass);
  backdrop-filter: blur(12px);
  border-radius: 12px; padding: 8px 10px;
}
.income-strip b { grid-column: 1; }
.income-strip small { grid-column: 1; color: var(--ink-soft); }
.income-strip em { grid-row: 1 / span 2; grid-column: 2; font-style: normal; font-weight: 700; align-self: center; }
.ant-card { display: grid; text-align: left; gap: 2px; }
.ant-card span { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.ant-card strong { font-family: var(--serif); font-size: 1.45rem; }
.ant-card small { color: var(--ink-soft); }

.list-head {
  display: grid; gap: 8px; margin-bottom: 12px;
  padding: 12px;
}
.list-head input, .filter-row select,
.settings input, .settings select, .stack input, .stack select, .stack textarea {
  width: 100%; padding: 10px 12px; border-radius: 12px;
  border: var(--glass-border);
  background: var(--glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.filter-row { display: grid; grid-template-columns: 1fr; gap: 6px; }
.list-tools { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.ant-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.8rem; color: var(--ink-soft); }
.ant-toggle {
  border: var(--glass-border);
  background: var(--glass);
  backdrop-filter: blur(12px);
  border-radius: 999px;
  padding: 6px 10px; font-weight: 650; font-size: 0.8rem;
}
.ant-toggle.on { background: linear-gradient(180deg, var(--on-hi), var(--on)); color: #fff; border-color: transparent; }
.bulk-bar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  background: var(--ink); color: var(--paper); border-radius: 12px;
  padding: 8px 10px; margin-bottom: 10px; font-size: 0.85rem;
}
.bulk-bar button { border: 0; background: #fff; color: var(--ink); border-radius: 8px; padding: 6px 8px; font-weight: 650; }

.spend-group { margin-bottom: 14px; }
.spend-group header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
  background: var(--glass);
  backdrop-filter: blur(12px);
  border: var(--glass-border);
  border-radius: 10px;
  padding: 6px 10px;
}
.spend-group h3 { margin: 0; font-size: 0.95rem; letter-spacing: 0; text-transform: none; color: #14110e; font-weight: 800; }
.spend-group em { font-style: normal; font-size: 0.88rem; color: #3d352c; font-weight: 700; }
.spend-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.spend-row {
  display: flex; align-items: stretch; gap: 4px;
  background: rgba(255,252,247,.96);
  border: 1px solid rgba(20,17,14,.14);
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(20,17,14,.05);
}
.spend-row.ant { border-left: 3px solid #8d4a2b; }
.spend-row.sel { background: #f3eee6; }
.spend-row input[type="checkbox"] { width: 18px; margin: 0 0 0 8px; accent-color: var(--ink); }
.spend-main {
  flex: 1; display: grid; grid-template-columns: 1fr auto;
  gap: 4px 8px; align-items: center; text-align: left;
  border: 0; background: transparent; padding: 10px 6px 10px 8px;
  min-width: 0;
}
.spend-main time { grid-column: 1; grid-row: 2; font-size: 0.78rem; color: #3d352c; font-weight: 650; font-variant-numeric: tabular-nums; }
.spend-txt { grid-column: 1; grid-row: 1; min-width: 0; }
.spend-txt b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 1.05rem; font-weight: 800; line-height: 1.25;
  color: #14110e;
}
.spend-txt small { display: block; color: #3d352c; font-size: 0.8rem; font-weight: 650; margin-top: 2px; }
.rec-ic { display: none; font-style: normal; font-size: 0.85rem; color: var(--ink-soft); }
.rec-ic.off { visibility: hidden; }
.spend-main strong { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.spend-row .more {
  border: 0; background: transparent; width: 44px; min-height: 44px; color: var(--ink-soft); font-size: 1.1rem;
}
.quick-grid { display: grid; gap: 8px; }

.banner, .coach-card, .plan-mini, .plan-card, .insight, .event-card, .settings, .src-box,
.income-strip, .ant-card, .auth-card, .list-head, .mov-row, .doc-grid button {
  background: var(--glass-strong);
  border: var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
}
.banner {
  display: block; width: 100%; text-align: left; margin: 12px 0 0; padding: 12px 14px;
  font-weight: 700; color: #1a1714;
}
.coach-card { display: block; width: 100%; text-align: left; margin: 12px 0 0; padding: 14px 16px; }
.coach-card span { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); }
.coach-card h3 { margin: 4px 0 6px; font-family: var(--serif); font-size: 1.15rem; font-weight: 560; }
.coach-card p { margin: 0; color: var(--ink-soft); }

.quick-plans { display: grid; gap: 10px; margin-top: 12px; }
.plan-mini { text-align: left; padding: 12px 14px; }
.plan-mini-top { display: flex; justify-content: space-between; font-size: 0.95rem; }
.bar-track { height: 8px; background: var(--paper-2); border-radius: 99px; overflow: hidden; margin: 8px 0; }
.bar-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--terra), var(--amber)); }
.bar-track.lg { height: 12px; }
.plan-mini small { color: var(--ink-soft); }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(6, 1fr);
  padding: 4px 2px calc(6px + var(--safe-b));
  background: rgba(255,252,247,.94);
  border-top: 1px solid rgba(196, 92, 38, 0.18);
}
.tabbar a {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  font-size: 0.62rem; color: var(--ink-soft); padding: 6px 0 8px;
  min-height: 48px; min-width: 0;
  border-radius: 14px;
}
.tabbar .tab-ico {
  display: block;
  font-size: 1.2rem;
  line-height: 1;
}
.tabbar a.on {
  color: #fff;
  font-weight: 800;
  background: linear-gradient(180deg, var(--on-hi), var(--on));
  margin: 3px 2px;
  box-shadow: 0 4px 12px rgba(196, 92, 38, 0.28);
}
.tabbar a.on .tab-ico { font-size: 1.28rem; }

.fab {
  position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: calc(78px + var(--safe-b)); z-index: 25;
  width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.5);
  background: linear-gradient(160deg, rgba(255,210,80,.75), rgba(196,92,38,.8));
  backdrop-filter: blur(10px);
  color: #fff; font-size: 2rem; line-height: 1;
  box-shadow: 0 12px 28px rgba(196, 92, 38, 0.28);
}

.filters { display: grid; gap: 8px; margin-bottom: 12px; }
.filters input, .filters select {
  width: 100%; padding: 10px 12px; border-radius: 12px;
  border: var(--glass-border);
  background: var(--glass);
  backdrop-filter: blur(12px);
}
.mov-list, .event-list, .simple, .insight-list, .doc-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mov-row, .event-card {
  width: 100%; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; text-align: left;
}
.mov-body { flex: 1; min-width: 0; }
.mov-body b, .event-card b { display: block; }
.mov-body small, .event-card small { display: block; color: var(--ink-soft); font-size: 0.78rem; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--terra); flex: none; }
.dot.up { background: var(--forest); }
.dot.alloc { background: var(--amber); }
.up { color: var(--forest); }
.down { color: var(--terra-d); }
.alloc { color: #8a6410; }

.page-actions { display: flex; gap: 8px; margin: 4px 0 14px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.45);
  background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.18));
  backdrop-filter: blur(16px) saturate(1.35);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  color: var(--ink); font-weight: 700;
  padding: 10px 14px; border-radius: 14px;
  box-shadow: 0 8px 24px rgba(40, 70, 20, 0.08), inset 0 1px 0 rgba(255,255,255,.6);
}
.btn.lg { background: linear-gradient(180deg, rgba(47, 109, 82, .82), rgba(47, 109, 82, .62)); color: #fff; border-color: rgba(255,255,255,.3); }
.btn.ghost { background: rgba(255,255,255,.28); color: var(--ink); }
.btn.danger { background: transparent; color: var(--rose); border: 1px solid #f0c2be; }
.btn.lg { width: 100%; padding: 14px; font-size: 1.05rem; }
.linkish { border: 0; background: none; color: var(--terra-d); text-decoration: underline; padding: 0; }

.plan-grid { display: grid; gap: 12px; }
.plan-card { padding: 16px; }
.plan-card h3 { margin: 6px 0 10px; font-family: var(--serif); font-weight: 560; }
.pill { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--forest); }
.plan-nums { font-family: var(--serif); font-size: 1.4rem; margin: 8px 0; }
.plan-nums span { font-size: 0.95rem; color: var(--ink-soft); }
.plan-facts { margin: 0 0 12px; padding-left: 16px; color: var(--ink-soft); }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mov-actions { justify-content: space-between; align-items: center; }
.row-actions-end {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-left: auto;
  justify-content: flex-end;
}
.btn.btn-warn {
  background: linear-gradient(180deg, #fff5f4, #ffd8d5);
  color: #b42318;
  border: 1px solid rgba(180, 35, 24, 0.28);
  font-weight: 700;
}

.lead { color: var(--ink-soft); font-size: 1.02rem; }
.insight { padding: 14px 16px; }
.insight h3 { margin: 0 0 6px; font-family: var(--serif); font-weight: 560; font-size: 1.12rem; }
.insight p { margin: 0; color: var(--ink-soft); }
.insight.celebrate { border-left: 4px solid var(--forest); }
.insight.calm, .insight.choice { border-left: 4px solid var(--amber); }
.insight.observe { border-left: 4px solid var(--terra); }
.insight.ai { border-left: 4px solid #0f766e; background: rgba(255,252,247,.95); }
.insight.ai h3 { color: #134e4a; }
.insight h3 { color: #14110e; font-weight: 750; }
.insight p { color: #2c261f; }

.settings { padding: 16px; display: grid; gap: 10px; }
.settings h3 { margin: 12px 0 0; font-family: var(--serif); font-weight: 560; }
.settings label, .stack label.field { display: grid; gap: 4px; font-size: 0.88rem; color: var(--ink-soft); }
.settings > label:not(.check):not(.consent) { display: grid; gap: 4px; font-size: 0.88rem; color: var(--ink-soft); }
.hint, .legal, .lead, .empty, .empty-inline, .tl-legend, .tl-coach, .income-total {
  color: #1a1714 !important;
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  border: var(--glass-border);
  border-radius: 12px;
  padding: 12px 14px;
}
.empty, .empty-inline { display: block; font-weight: 600; }
.legal { font-size: 0.82rem; }
.hint { font-size: 0.88rem; }
.subh { font-family: var(--serif); font-size: 1.1rem; margin: 18px 0 8px; }

.doc-grid { grid-template-columns: 1fr 1fr; }
.doc-grid button { overflow: hidden; padding: 0; text-align: left; }
.doc-grid img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.doc-grid span { display: block; padding: 8px 10px; font-size: 0.85rem; }
.doc-grid small { display: block; color: var(--ink-soft); }
.doc-full { width: 100%; border-radius: 14px; max-height: 48dvh; object-fit: contain; background: #111; }

#sheet, #guide-layer { position: fixed; inset: 0; z-index: 50; display: grid; align-items: end; }
#guide-layer { z-index: 60; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(28, 25, 22, 0.4); }
.sheet {
  position: relative;
  max-height: min(92dvh, 100%); overflow: auto;
  width: 100%;
  background: var(--glass-strong);
  border: var(--glass-border);
  border-bottom: 0;
  backdrop-filter: blur(22px) saturate(1.4);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  border-radius: 22px 22px 0 0;
  padding: 12px 16px calc(20px + var(--safe-b));
  box-shadow: 0 -16px 50px rgba(20,40,10,.18), inset 0 1px 0 rgba(255,255,255,.6);
}
.sheet-h { display: flex; justify-content: space-between; align-items: center; }
.sheet-h h2 { font-family: var(--serif); font-size: 1.25rem; font-weight: 560; margin: 6px 0 12px; }
.icon-x {
  border: var(--glass-border);
  background: var(--glass);
  backdrop-filter: blur(10px);
  width: 36px; height: 36px; border-radius: 50%; font-size: 1.3rem;
}
.stack { display: grid; gap: 12px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }

.auth-box { max-width: 520px; width: 100%; }
.auth-card {
  padding: 22px 20px 20px;
}
.lead-auth { color: var(--ink-soft); margin: 0 0 14px; }
.auth-home { text-align: center; margin: 14px 0 0; }
.auth-home a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 4px;
  color: #9a3f14; font-weight: 750; font-size: 0.95rem;
}

.auth-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 4px 0 16px; }
.auth-tabs button {
  border: var(--glass-border);
  background: var(--glass);
  backdrop-filter: blur(12px);
  border-radius: 12px; padding: 10px 4px; font-weight: 650;
  min-height: 44px;
}
.auth-tabs button.on { background: linear-gradient(180deg, var(--on-hi), var(--on)); color: #fff; border-color: transparent; }

.consents {
  display: grid;
  gap: 8px;
  margin: 2px 0 4px;
  padding: 10px 12px;
  background: var(--glass);
  backdrop-filter: blur(12px);
  border: var(--glass-border);
  border-radius: 14px;
}
.consent {
  display: grid !important;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink);
  line-height: 1.35;
  cursor: pointer;
}
.consent input[type="checkbox"] {
  width: 20px !important;
  height: 20px;
  min-width: 20px;
  margin: 2px 0 0;
  accent-color: var(--forest);
  flex: none;
}
.consent span em {
  display: inline;
  font-style: normal;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  margin-left: 4px;
}
.consent a { color: var(--terra-d); text-decoration: underline; }

.auth-banner {
  display: none;
  padding: 12px 14px;
  border-radius: 12px;
  font-weight: 650;
  font-size: 0.95rem;
  line-height: 1.4;
}
.auth-banner:not([hidden]) { display: block; }
.auth-banner.ok {
  background: #e7f5ee;
  color: #1b5c3c;
  border: 1px solid #9dcfb3;
}
.auth-banner.err {
  background: #fdecea;
  color: #8a1f16;
  border: 1px solid #f0b8b2;
}

.ok-banner {
  text-align: center;
  background: #e7f5ee;
  border: 1px solid #9dcfb3;
  border-radius: 16px;
  padding: 22px 16px 18px;
  margin-bottom: 14px;
}
.ok-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--forest);
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 10px;
}
.ok-banner h1 { color: #1b5c3c; font-size: 1.7rem; margin: 0 0 8px; }
.ok-banner p { color: #2f5d4a; margin: 0; }
.ok-next { color: var(--ink-soft); text-align: center; margin: 0 0 16px; }

.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pdf-seg { grid-template-columns: repeat(2, 1fr); }
.seg label {
  text-align: center; padding: 8px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--glass); color: var(--ink); backdrop-filter: blur(10px);
}
.seg input { display: none; }
.seg input:checked + * , .seg label:has(input:checked) {
  background: linear-gradient(180deg, var(--on-hi), var(--on)); color: #fff; border-color: transparent;
}
.check {
  display: grid !important;
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--ink);
}
.check input[type="checkbox"] {
  width: 20px !important;
  height: 20px;
  min-width: 20px;
  margin: 2px 0 0;
  accent-color: var(--forest);
}
details summary { cursor: pointer; color: var(--terra-d); margin: 4px 0; }

.onboard {
  min-height: 100dvh;
  padding: calc(28px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom));
  max-width: 460px; margin: auto;
}
.onboard-mark { width: 72px; height: 72px; border-radius: 18px; margin-bottom: 12px; }
.formichina-mark.onboard-mark { border-radius: 50%; }
.onboard .kicker { letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.75rem; color: var(--terra); margin: 0; }
.onboard h1 { font-family: var(--serif); font-weight: 560; font-size: clamp(1.55rem, 6vw, 2rem); letter-spacing: -0.03em; margin: 8px 0 10px; }
.onboard > p { color: var(--ink-soft); }

#toast {
  position: fixed; left: 50%; bottom: calc(96px + var(--safe-b));
  transform: translateX(-50%) translateY(20px);
  background: var(--glass-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  color: var(--ink);
  padding: 10px 14px; border-radius: 16px; font-size: 0.88rem;
  opacity: 0; pointer-events: none; transition: .25s ease; z-index: 80;
  width: min(92vw, 420px);
  text-align: center;
  box-shadow: var(--glass-shadow);
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (min-width: 520px) {
  .filter-row { grid-template-columns: 1fr 1fr; }
  .spend-main { grid-template-columns: 48px 1fr 18px auto; }
  .spend-main time, .spend-txt, .spend-main strong { grid-column: auto; grid-row: auto; }
  .spend-main .rec-ic { display: inline; }
  .doc-grid { grid-template-columns: repeat(2, 1fr); }
  .app-main { padding: 8px 16px 24px; }
}
@media (min-width: 720px) {
  .filter-row { grid-template-columns: 1fr 1fr 1fr; }
  .auth-box { margin-inline: auto; }
}
@media (min-width: 860px) {
  .app-shell { max-width: 920px; margin: 0 auto; padding-bottom: 48px; }
  .tabbar { left: 50%; transform: translateX(-50%); width: min(920px, 100%); border-radius: 18px 18px 0 0; }
  .fab { right: max(16px, calc(50vw - 460px + 16px)); }
  .plan-grid { grid-template-columns: 1fr 1fr; }
  .sheet { max-width: 560px; margin: 0 auto; border-radius: 22px 22px 0 0; }
  .topbar { padding-left: 16px; padding-right: 16px; }
}
@media (min-width: 1100px) {
  .app-shell { max-width: 1040px; }
  .tabbar { width: min(1040px, 100%); }
  .fab { right: max(16px, calc(50vw - 520px + 16px)); }
}

.label-row { display: flex; align-items: flex-end; gap: 10px; }
.label-row .grow { flex: 1; min-width: 0; }
.field-label { margin: 0 0 -4px; font-size: 0.92rem; }
.help-pop {
  flex: 0 0 42px;
  width: 42px; height: 42px;
  border: 0; border-radius: 50%;
  background: linear-gradient(180deg, var(--on-hi), var(--on));
  color: #fff; font-weight: 800; font-size: 1.15rem;
  position: relative;
  box-shadow: 0 6px 14px rgba(196, 92, 38, 0.28);
  animation: help-nudge 2.6s ease-in-out infinite;
}
.help-pop::after {
  content: "";
  position: absolute; inset: -5px;
  border-radius: 50%;
  border: 2px solid rgba(224, 122, 58, 0.35);
  animation: help-ring 2.6s ease-out infinite;
  pointer-events: none;
}
@keyframes help-nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes help-ring {
  0% { transform: scale(0.92); opacity: 0.7; }
  100% { transform: scale(1.18); opacity: 0; }
}
.cat-picker { display: grid; gap: 8px; }
.cat-fams {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.cat-fam {
  border: var(--glass-border);
  background: rgba(255,255,255,.72);
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 0.78rem; font-weight: 700;
  text-align: left;
  line-height: 1.25;
  min-height: 40px;
}
.cat-fam.on {
  background: linear-gradient(180deg, var(--on-hi), var(--on));
  color: #fff; border-color: transparent;
}
.cat-suggest {
  display: grid; gap: 1px;
  padding: 7px 10px;
  border-radius: 12px;
  background: linear-gradient(180deg, #f3faf6, #dff3e8 70%, #cfead9);
  border: 1px solid rgba(52, 160, 100, 0.35);
  color: #2f5d4a;
}
.cat-suggest b, .cat-suggest small { color: #2f5d4a; }
.cat-suggest[hidden] { display: none !important; }
.cat-suggest span { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.75; }
.cat-suggest b { font-size: 0.86rem; line-height: 1.25; font-weight: 700; }
.cat-suggest small { font-size: 0.7rem; opacity: 0.8; }
.cat-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.cat-chip {
  text-align: left;
  border: var(--glass-border);
  background: rgba(255,255,255,.72);
  border-radius: 12px;
  padding: 9px 10px;
  font-size: 0.78rem; font-weight: 650; line-height: 1.25;
}
.cat-chip.on {
  background: linear-gradient(180deg, var(--on-hi), var(--on));
  color: #fff;
  border-color: transparent;
}
.cat-chosen {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #9a3f14;
  color: #fff;
  font-size: 0.88rem;
}
.cat-chosen b { color: #ffe7d2; }
.guide { display: grid; gap: 16px; padding-bottom: 8px; }
.guide h3 { margin: 0 0 6px; font-size: 1.02rem; color: var(--terra-d); }
.guide p, .guide li { font-size: 0.92rem; line-height: 1.45; }
.guide ul { margin: 8px 0 0; padding-left: 1.1rem; }
.guide li { margin: 6px 0; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
  .help-pop, .help-pop::after { animation: none !important; }
}