.mini-page {
  --surface: #f4f6fa;
  --card: #fff;
  --ink: #24334e;
  --muted: #5c6c85;
  --line: #e2e8f1;
  --soft: #edf2f9;
  --blue: #405c86;
  --navy: #15223b;
  --red: #a8223e;
  --red-soft: #f9e8ed;
  --teal: #24645d;
  --teal-soft: #e6f3ef;
  --city-gradient: linear-gradient(112deg, #15223b 14%, #34486a 70%, #74586f);
  background: var(--surface);
  color: var(--ink);
  font-family: -apple-system, "PingFang SC", sans-serif;
  font-size: calc(var(--rpx) * 28);
}
view, text, button, input, textarea, picker { box-sizing: border-box; }
.page { padding: calc(var(--rpx) * 24) calc(var(--rpx) * 28) calc(var(--rpx) * 62); }
.demo { background: #eaf0f9; color: #4d6488; padding: calc(var(--rpx) * 13) calc(var(--rpx) * 22); font-size: calc(var(--rpx) * 21); line-height: 1.55; text-align: center; }
.card { padding: calc(var(--rpx) * 27); background: var(--card); border: calc(var(--rpx) * 1) solid var(--line); border-radius: calc(var(--rpx) * 23); margin-bottom: calc(var(--rpx) * 20); }
.hero, .screen-banner { position: relative; overflow: hidden; background: var(--city-gradient); color: #fff; border-radius: calc(var(--rpx) * 25); margin-bottom: calc(var(--rpx) * 20); }
.hero { padding: calc(var(--rpx) * 31); }
.hero .sub { color: #dce7f7; }
.hero-title { font-size: calc(var(--rpx) * 36); line-height: 1.38; margin: calc(var(--rpx) * 15) 0 calc(var(--rpx) * 9); font-weight: 650; }
.screen-banner { padding: calc(var(--rpx) * 27) calc(var(--rpx) * 30); }
.screen-art { position: absolute; right: calc(var(--rpx) * -12); bottom: calc(var(--rpx) * -30); width: calc(var(--rpx) * 258); height: calc(var(--rpx) * 185); opacity: .38; }
.screen-copy { position: relative; }
.screen-kicker { display: flex; gap: calc(var(--rpx) * 9); align-items: center; color: #e6eaf5; font-size: calc(var(--rpx) * 20); letter-spacing: calc(var(--rpx) * 2); }
.screen-kicker::before { content: ''; width: calc(var(--rpx) * 19); height: calc(var(--rpx) * 4); border-radius: calc(var(--rpx) * 9); background: #f38095; }
.screen-title { font-size: calc(var(--rpx) * 40); font-weight: 700; margin: calc(var(--rpx) * 10) 0 calc(var(--rpx) * 7); line-height: 1.28; }
.screen-note { font-size: calc(var(--rpx) * 23); color: #dbe6f6; line-height: 1.58; }
.title { font-size: calc(var(--rpx) * 44); font-weight: 700; margin: calc(var(--rpx) * 10) 0 calc(var(--rpx) * 12); }
.subtitle { color: var(--muted); font-size: calc(var(--rpx) * 24); line-height: 1.65; margin-bottom: calc(var(--rpx) * 23); }
.sub { font-size: calc(var(--rpx) * 23); color: var(--muted); line-height: 1.62; }
.row { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--rpx) * 15); }
.stack { display: flex; flex-direction: column; gap: calc(var(--rpx) * 12); }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: calc(var(--rpx) * 12); margin-bottom: calc(var(--rpx) * 18); }
.section-title { display: flex; align-items: center; gap: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 29); font-weight: 700; margin-bottom: calc(var(--rpx) * 18); }
.section-title::before { content: ''; display: block; width: calc(var(--rpx) * 5); height: calc(var(--rpx) * 23); border-radius: calc(var(--rpx) * 8); background: var(--red); flex: 0 0 calc(var(--rpx) * 5); }
.section-head .section-title { margin-bottom: 0; }
.pill { display: inline-block; font-size: calc(var(--rpx) * 21); padding: calc(var(--rpx) * 8) calc(var(--rpx) * 14); background: var(--soft); color: var(--blue); border-radius: calc(var(--rpx) * 999); white-space: nowrap; }
.pill.accent { color: #98213a; background: var(--red-soft); }
.pill.complete { color: var(--teal); background: var(--teal-soft); }
.amount { font-size: calc(var(--rpx) * 49); font-weight: 700; margin: calc(var(--rpx) * 8) 0; overflow-wrap: anywhere; }
.small-amount { font-size: calc(var(--rpx) * 33); }
.money { color: var(--red); font-weight: 700; font-variant-numeric: tabular-nums; }
.divider { height: calc(var(--rpx) * 1); background: var(--line); margin: calc(var(--rpx) * 20) 0; }
.button { display: block; background: var(--red); color: white; font-size: calc(var(--rpx) * 26); font-weight: 600; border-radius: calc(var(--rpx) * 15); padding: 0 calc(var(--rpx) * 20); margin: calc(var(--rpx) * 17) 0 0; min-height: calc(var(--rpx) * 64); line-height: calc(var(--rpx) * 64); }
button.button { width: 100%; max-width: none; }
.button::after { border: 0; }
.button.secondary { background: var(--soft); color: var(--blue); }
.button.outline { background: white; color: var(--blue); border: calc(var(--rpx) * 1) solid var(--line); }
.button[disabled] { opacity: 1; background: #e9edf4; color: #64728a; }
.roles { display: flex; gap: calc(var(--rpx) * 10); margin: calc(var(--rpx) * 16) 0 calc(var(--rpx) * 20); }
.role { flex: 1; text-align: center; padding: calc(var(--rpx) * 12) calc(var(--rpx) * 4); font-size: calc(var(--rpx) * 23); color: var(--blue); border: 0; background: var(--soft); border-radius: calc(var(--rpx) * 999); line-height: 1.5; }
.role::after { border: 0; }
.role.selected { background: var(--red-soft); color: var(--red); font-weight: 650; }
.signer { padding: calc(var(--rpx) * 14) 0; display: flex; align-items: center; justify-content: space-between; gap: calc(var(--rpx) * 12); }
.status { color: var(--blue); font-size: calc(var(--rpx) * 23); }
.status.done { color: var(--teal); }
.file { display: flex; gap: calc(var(--rpx) * 16); align-items: center; padding: calc(var(--rpx) * 18); background: #f4f6fa; border: calc(var(--rpx) * 1) solid var(--line); border-radius: calc(var(--rpx) * 16); overflow-wrap: anywhere; }
.file-icon { padding: calc(var(--rpx) * 13) calc(var(--rpx) * 12); background: var(--red-soft); color: var(--red); border-radius: calc(var(--rpx) * 10); font-size: calc(var(--rpx) * 20); font-weight: 700; }
.file-name { flex: 1; min-width: 0; font-size: calc(var(--rpx) * 24); line-height: 1.52; }
.file-link { color: var(--red); font-size: calc(var(--rpx) * 23); font-weight: 600; }
.field { margin: calc(var(--rpx) * 18) 0; min-width: 0; }
.label { font-size: calc(var(--rpx) * 23); font-weight: 550; color: var(--muted); margin-bottom: calc(var(--rpx) * 9); }
.input { width: 100%; padding: calc(var(--rpx) * 16) calc(var(--rpx) * 18); background: #f6f8fb; border: calc(var(--rpx) * 1) solid var(--line); border-radius: calc(var(--rpx) * 13); font-size: calc(var(--rpx) * 25); min-height: calc(var(--rpx) * 69); }
.input[disabled] { color: var(--muted); }
.placeholder { color: #6e7c93; }
.field-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 calc(var(--rpx) * 14); }
.error { color: #9f1e38; font-size: calc(var(--rpx) * 24); line-height: 1.55; margin-top: calc(var(--rpx) * 16); }
.empty { padding: calc(var(--rpx) * 55) calc(var(--rpx) * 19); color: var(--muted); text-align: center; line-height: 1.6; font-size: calc(var(--rpx) * 24); }
.business-name { font-size: calc(var(--rpx) * 29); line-height: 1.4; font-weight: 650; }
.check { display: flex; align-items: center; gap: calc(var(--rpx) * 12); margin: calc(var(--rpx) * 21) 0; padding: calc(var(--rpx) * 16); border-radius: calc(var(--rpx) * 14); background: var(--soft); color: var(--ink); font-size: calc(var(--rpx) * 23); line-height: 1.6; }
.info-line { display: flex; justify-content: space-between; gap: calc(var(--rpx) * 17); margin: calc(var(--rpx) * 14) 0; font-size: calc(var(--rpx) * 24); line-height: 1.55; }
.info-line text:first-child { color: var(--muted); }
.info-line text:last-child { text-align: right; overflow-wrap: anywhere; }
.inline-note { margin-top: calc(var(--rpx) * 14); padding: calc(var(--rpx) * 13) calc(var(--rpx) * 16); border-radius: calc(var(--rpx) * 12); background: var(--soft); color: var(--blue); font-size: calc(var(--rpx) * 22); line-height: 1.55; }
.event { margin-top: calc(var(--rpx) * 18); padding-left: calc(var(--rpx) * 17); border-left: calc(var(--rpx) * 3) solid #d6e2f1; color: var(--ink); font-size: calc(var(--rpx) * 24); line-height: 1.57; }
.top-gap { margin-top: calc(var(--rpx) * 24); }