:root { --u: min(calc(100vw / 375), 1px); }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #f5f5f5; }
body { color: #303030; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; }
.app { width: 100%; min-height: 100vh; overflow: hidden; padding-top: calc(14 * var(--u)); background: #f5f5f5; font-size: calc(10 * var(--u)); }
[contenteditable="true"] { outline: 0; cursor: text; white-space: nowrap; }
[contenteditable="true"]:focus { outline: 1px dashed #4c90ea; border-radius: 2px; }
.sprite { background-repeat: no-repeat; background-position: center; background-size: 100% 100%; }
.topbar { height: calc(42 * var(--u)); display: flex; align-items: center; padding: 0 calc(12 * var(--u)); }
.back { width: calc(12 * var(--u)); height: calc(16 * var(--u)); border: 0; padding: 0; background-image: url("assets/back.png"); }
.page-title { margin-left: calc(15 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 400; letter-spacing: .2px; }
.all-bills { margin-left: auto; font-size: calc(14 * var(--u)); }
.card { margin: 0 calc(9 * var(--u)) calc(8 * var(--u)); background: #fff; border-radius: calc(13 * var(--u)); }
.primary-card { height: calc(479 * var(--u)); padding: calc(20 * var(--u)) calc(13 * var(--u)) 0; }
.flower-logo { width: calc(40 * var(--u)); height: calc(40 * var(--u)); margin: 0 auto calc(10 * var(--u)); border-radius: 50%; background-image: url("assets/huabei-logo.png"); }
.merchant, .status { text-align: center; font-size: calc(12 * var(--u)); line-height: calc(17 * var(--u)); }
.amount { text-align: center; font-family: Arial, "Helvetica Neue", sans-serif; font-size: calc(30 * var(--u)); line-height: calc(38 * var(--u)); font-weight: 600; letter-spacing: calc(1 * var(--u)); margin: calc(8 * var(--u)) 0 calc(7 * var(--u)); }
.detail-list { position: relative; margin-top: calc(33 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(31 * var(--u)); }
.detail-row { height: calc(31 * var(--u)); display: grid; grid-template-columns: calc(101 * var(--u)) 1fr; align-items: center; }
.muted, .section-label, .light, .row-action { color: #999; }
.with-arrow { padding-right: calc(9 * var(--u)); }.payment-arrow { position: absolute; left: calc(141 * var(--u)); top: calc(39 * var(--u)); width: calc(7 * var(--u)); height: calc(12 * var(--u)); background-image: url("assets/payment-arrow.png"); }
.section-label { height: calc(20 * var(--u)); font-size: calc(12 * var(--u)); line-height: calc(20 * var(--u)); margin-top: calc(7 * var(--u)); }
.pale-row, .coupon-row, .tag-suggest { display: flex; align-items: center; border-radius: calc(10 * var(--u)); }
.pale-row { height: calc(41 * var(--u)); padding: 0 calc(12 * var(--u)); background: #f5f6fa; font-size: calc(11.5 * var(--u)); }
.bill-icon { width: calc(18 * var(--u)); height: calc(18 * var(--u)); margin-right: calc(8 * var(--u)); border-radius: calc(4 * var(--u)); background-image: url("assets/service-icon.png"); }
.service-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.row-action { margin-left: auto; padding-left: calc(6 * var(--u)); white-space: nowrap; }
.service-chevron { width: calc(7 * var(--u)); height: calc(12 * var(--u)); margin-left: calc(6 * var(--u)); background-image: url("assets/service-arrow.png"); }
.recommend-label { margin-top: calc(20 * var(--u)); }
.coupon-row { height: calc(43 * var(--u)); padding: 0 calc(10 * var(--u)); background: #fff3f5; color: #c51c43; font-size: calc(11 * var(--u)); }
.gift { width: calc(20 * var(--u)); height: calc(22 * var(--u)); margin-right: calc(8 * var(--u)); background-image: url("assets/gift.png"); }.coupon-text { font-weight: 500; white-space: nowrap; }.claim { margin-left: auto; white-space: nowrap; }.coupon-chevron { width: calc(7 * var(--u)); height: calc(12 * var(--u)); margin-left: calc(7 * var(--u)); background-image: url("assets/coupon-arrow.png"); }
.more { color: #999; text-align: center; font-size: calc(12 * var(--u)); line-height: calc(30 * var(--u)); margin-top: calc(8 * var(--u)); }.more-chevron { display:inline-block; width:calc(8 * var(--u)); height:calc(7 * var(--u)); vertical-align:calc(1 * var(--u)); margin-left:calc(3 * var(--u)); background-image:url("assets/more-arrow.png"); }
.manage-card { height: calc(319 * var(--u)); padding: calc(18 * var(--u)) calc(13 * var(--u)) 0; font-size: calc(12 * var(--u)); }
.manage-head { display:flex; height:calc(33 * var(--u)); justify-content:space-between; align-items:center; margin-bottom:calc(10 * var(--u)); font-size:calc(13 * var(--u)); font-weight:500; }.badge { display:flex; align-items:center; height:calc(33 * var(--u)); padding:0 calc(7 * var(--u)) 0 calc(9 * var(--u)); border-radius:calc(16 * var(--u)); background:#d9f7ff; font-size:calc(10.5 * var(--u)); font-weight:400; }.badge-avatar { display:block; width:calc(22 * var(--u)); height:calc(22 * var(--u)); margin-left:calc(6 * var(--u)); border-radius:50%; background-image:url("assets/badge-avatar.png"); }.badge-chevron { display:block; width:calc(7 * var(--u)); height:calc(12 * var(--u)); margin-left:calc(5 * var(--u)); background-image:url("assets/badge-arrow.png"); }
.manage-row { display:flex; align-items:center; height:calc(43 * var(--u)); }.manage-row .light { margin-left:auto; }.category-chevron, .tag-chevron, .note-chevron { width:calc(7 * var(--u)); height:calc(12 * var(--u)); margin-left:calc(9 * var(--u)); }.category-chevron { background-image:url("assets/category-arrow.png"); }.tag-chevron { background-image:url("assets/tag-arrow.png"); }.note-chevron { background-image:url("assets/note-arrow.png"); }
.tag-suggest { height:calc(39 * var(--u)); padding:0 calc(12 * var(--u)); gap:calc(15 * var(--u)); background:#f5f6fa; }.tag { display:flex; align-items:center; height:calc(28 * var(--u)); padding:0 calc(9 * var(--u)); border-radius:calc(20 * var(--u)); background:#fff; }.tag-icon { width:calc(17 * var(--u)); height:calc(17 * var(--u)); margin-right:calc(3 * var(--u)); background-image:url("assets/tag-icon.png"); }
.income { margin-top:calc(12 * var(--u)); }.switch { width:calc(31 * var(--u)); height:calc(17 * var(--u)); margin-left:auto; padding:0; border:0; border-radius:calc(12 * var(--u)); background-image:url("assets/switch-off.png"); }.note { border-bottom:1px solid #eee; }.question { display:flex; align-items:center; height:calc(43 * var(--u)); gap:calc(10 * var(--u)); color:#174d88; font-size:calc(11 * var(--u)); }.question-icon { width:calc(15 * var(--u)); height:calc(15 * var(--u)); background-image:url("assets/question.png"); }
@media (min-width:376px) { body { background:#f5f5f5; } }