:root {
  --primary: #e8462e;
  --primary-dark: #c93421;
  --primary-soft: #fff1ee;
  --accent: #ff9f1c;
  --success: #08a95b;
  --danger: #d92d20;
  --ink: #20242c;
  --muted: #7b8492;
  --line: #e9ebef;
  --surface: #ffffff;
  --page: #f4f5f7;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--page); }
body { margin: 0; color: var(--ink); background: var(--page); }
button, input, select, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.hidden { display: none !important; }
.mobile-shell { width: 100%; max-width: 560px; min-height: 100vh; margin: 0 auto; overflow-x: hidden; background: var(--surface); box-shadow: 0 0 34px rgba(16, 24, 40, .08); }

/* Customer payment page */
.mobile-page { background: #edf0f3; }
.pay-page { position: relative; padding: 0 12px; background: var(--page); }
.pay-nav { position: sticky; z-index: 20; top: 0; display: flex; align-items: center; gap: 11px; min-height: 64px; margin: 0 -12px; padding: calc(9px + env(safe-area-inset-top)) 18px 9px; border-bottom: 1px solid rgba(0,0,0,.04); background: rgba(255,255,255,.96); backdrop-filter: blur(16px); }
.pay-nav-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: white; background: linear-gradient(145deg, #fa6a42, var(--primary)); box-shadow: 0 7px 18px rgba(232,70,46,.24); }
.pay-nav-mark svg, .station-icon svg { width: 23px; fill: currentColor; }
.pay-nav strong, .pay-nav span { display: block; }
.pay-nav strong { font-size: 16px; }
.pay-nav span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.pay-nav-profile { display: flex; flex-direction: column; align-items: center; gap: 1px; margin-left: auto; color: #596170; text-decoration: none; }
.pay-nav-profile i { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; color: #fff; background: #333b47; font-size: 12px; font-style: normal; font-weight: 700; }
.pay-nav .pay-nav-profile span { margin-top: 0; color: #596170; font-size: 10px; }
.pay-nav-profile.logged-out { min-width: 68px; }
.pay-nav-profile.logged-out i { background: linear-gradient(145deg,#25a76f,#177d50); }
.pay-nav-profile.logged-out span { color: #177d50; font-weight: 700; white-space: nowrap; }
.station-summary { display: flex; gap: 14px; align-items: center; margin: 12px 0; padding: 19px 17px; overflow: hidden; border-radius: 18px; color: #fff; background: linear-gradient(130deg, #252c36, #414a58); box-shadow: 0 10px 24px rgba(24,31,42,.13); }
.station-icon { flex: 0 0 auto; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; color: var(--primary); background: white; }
.station-copy { min-width: 0; }
.station-copy > span { color: rgba(255,255,255,.65); font-size: 12px; }
.station-copy h1 { margin: 3px 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 20px; }
.station-copy p { margin: 0; color: rgba(255,255,255,.76); font-size: 12px; }
.station-copy p i { display: inline-block; width: 7px; height: 7px; margin-right: 3px; border-radius: 50%; background: #39d98a; box-shadow: 0 0 0 4px rgba(57,217,138,.13); }
.pay-card { margin: 12px 0; padding: 18px 16px; border: 1px solid rgba(33,39,49,.035); border-radius: 18px; background: #fff; box-shadow: 0 5px 22px rgba(35,43,56,.055); }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 16px; }
.section-heading > div { display: flex; min-width: 0; align-items: center; gap: 8px; }
.section-heading h2 { margin: 0; font-size: 18px; }
.section-heading small { max-width: 44%; color: var(--muted); font-size: 11px; text-align: right; }
.section-step { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; color: #fff; background: var(--primary); font-size: 12px; font-weight: 800; }
.oil-filters { display: flex; gap: 8px; margin: -2px 0 14px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; }
.oil-filters::-webkit-scrollbar { display: none; }
.oil-filter { flex: 0 0 auto; min-height: 34px; padding: 6px 13px; border: 1px solid var(--line); border-radius: 999px; color: #596170; background: #fff; font-size: 13px; }
.oil-filter.active { border-color: #f0aaa0; color: var(--primary); background: var(--primary-soft); font-weight: 700; }
.gun-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.gun-card { position: relative; width: 100%; min-width: 0; min-height: 82px; padding: 12px 3px 10px; border: 1px solid var(--line); border-radius: 14px; text-align: center; color: var(--ink); background: #fafafa; transition: transform .12s, border-color .12s, background .12s; }
.gun-card:active { transform: scale(.97); }
.gun-card strong { display: inline; font-size: 25px; line-height: 1; }
.gun-card > span { margin-left: 2px; font-size: 13px; }
.gun-card em { display: block; margin-top: 8px; overflow: hidden; color: var(--muted); font-size: 11px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.gun-card > i { position: absolute; top: -6px; right: -5px; display: none; place-items: center; width: 20px; height: 20px; border: 2px solid white; border-radius: 50%; color: white; background: var(--primary); font-size: 11px; font-style: normal; }
.gun-card.active { border-color: #ee9b90; color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 2px rgba(232,70,46,.06); }
.gun-card.active em { color: #bf4939; }
.gun-card.active > i { display: grid; }
.gun-card.filtered-out { display: none; }
.status-line { display: flex; gap: 12px; align-items: center; padding: 6px 0; }
.status-line div strong, .status-line div small { display: block; }
.status-line div small { margin-top: 4px; color: var(--muted); font-size: 12px; }
.spinner { flex: 0 0 auto; width: 23px; height: 23px; border: 3px solid #f2cbc5; border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.snapshot-warning { display: grid; gap: 4px; margin: -2px 0 12px; padding: 11px 12px; border: 1px solid #f4d48c; border-radius: 12px; color: #805d1f; background: #fff9e8; }
.snapshot-warning strong { font-size: 13px; }
.snapshot-warning span { color: #98733a; font-size: 11px; line-height: 1.55; }
.snapshot-options { display: grid; gap: 10px; }
.snapshot-option { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 12px; align-items: center; width: 100%; min-height: 72px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); text-align: left; background: #fafafa; transition: transform .12s, border-color .12s, background .12s; }
.snapshot-option:active { transform: scale(.985); border-color: #ee9b90; background: var(--primary-soft); }
.snapshot-option span { min-width: 0; }
.snapshot-option small, .snapshot-option strong { display: block; }
.snapshot-option small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.snapshot-option strong { margin-top: 5px; color: var(--primary); font-size: 23px; }
.snapshot-option em { color: #596170; font-size: 12px; font-style: normal; white-space: nowrap; }
.snapshot-option i { color: var(--primary); font-size: 12px; font-style: normal; font-weight: 700; white-space: nowrap; }
.floating-notice { margin: 12px 0; }
.money-input { display: flex; align-items: center; min-height: 88px; padding: 0 18px; border: 1.5px solid #ed9a8e; border-radius: 15px; background: linear-gradient(135deg, #fff9f8, #fff3f0); }
.money-input > span { margin-right: 10px; color: var(--primary); font-size: 36px; font-weight: 800; }
.money-input input { min-width: 0; width: 100%; border: 0; outline: 0; color: var(--primary); background: transparent; font-size: 38px; font-weight: 800; letter-spacing: -.02em; }
.money-input input::placeholder { color: #e6aaa2; }
.money-input em { color: var(--muted); font-size: 13px; font-style: normal; }
.quick-amounts { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 12px; }
.quick-amounts button { min-height: 45px; border: 1px solid var(--line); border-radius: 12px; color: #474e59; background: #f7f8f9; }
.quick-amounts button.active { border-color: #ee9b90; color: var(--primary); background: var(--primary-soft); font-weight: 700; }
.calculate-btn { margin-top: 14px; }
.text-btn { display: block; margin: 13px auto -2px; border: 0; color: var(--muted); background: transparent; font-size: 13px; }
.badge { display: inline-flex; padding: 5px 9px; border-radius: 999px; color: #087846; background: #e9f9f1; font-size: 11px; white-space: nowrap; }
.badge.manual { color: #a34a18; background: #fff3e2; }
.selected-fuel { display: flex; justify-content: space-between; margin-bottom: 12px; padding: 11px 13px; border-radius: 11px; color: #596170; background: #f6f7f8; font-size: 13px; }
.selected-fuel strong { color: var(--ink); }
.quote-primary { display: flex; justify-content: space-between; align-items: flex-end; padding: 4px 2px 14px; }
.quote-primary span { color: var(--muted); }
.quote-primary strong { color: var(--ink); font-size: 34px; }
.saving-banner { display: flex; justify-content: space-between; padding: 11px 13px; border-radius: 11px; color: #b84434; background: var(--primary-soft); font-size: 14px; }
.saving-banner strong::before { content: '省 '; font-weight: 400; }
.member-saving-tip { display: flex; justify-content: space-between; align-items: center; margin-top: 9px; padding: 10px 12px; border: 1px solid #f1dc9c; border-radius: 11px; color: #8b6424; background: #fff9e8; font-size: 12px; text-decoration: none; }
.member-saving-tip strong { color: #d77a22; }
.detail-list { margin-top: 10px; }
.detail-list > div { display: flex; justify-content: space-between; padding: 9px 2px; color: var(--muted); font-size: 14px; }
.detail-list strong { color: #444b56; }
.detail-list .payable-row { margin-top: 3px; padding-top: 13px; border-top: 1px dashed var(--line); color: var(--ink); }
.detail-list .payable-row strong { color: var(--primary); font-size: 20px; }
.channel-section { padding-bottom: 9px; }
.channel-list { margin: 0 -2px; }
.channel-option { display: grid; grid-template-columns: 43px 1fr 25px; gap: 11px; align-items: center; width: 100%; padding: 12px 2px; border: 0; border-top: 1px solid #f0f1f3; text-align: left; background: transparent; }
.channel-option:first-child { border-top: 0; }
.channel-logo { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: #fff; font-weight: 900; }
.wechat-logo { background: #07c160; }
.alipay-logo { background: #1677ff; }
.channel-option > span:nth-child(2) strong, .channel-option > span:nth-child(2) small { display: block; }
.channel-option > span:nth-child(2) strong { font-size: 15px; }
.channel-option > span:nth-child(2) small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.channel-option > i { display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid #c8cdd4; border-radius: 50%; color: transparent; font-size: 12px; font-style: normal; }
.channel-option.active > i { border-color: var(--primary); color: #fff; background: var(--primary); }
.pay-safe { padding: 8px 8px 3px; color: #9ba1aa; font-size: 11px; text-align: center; }
.pay-safe span { display: inline-grid; place-items: center; width: 19px; height: 19px; margin-right: 4px; border-radius: 50%; color: #fff; background: #aeb4bc; font-size: 8px; }
.pay-spacer { height: calc(91px + env(safe-area-inset-bottom)); }
.pay-dock { position: fixed; z-index: 30; right: 0; bottom: 0; left: 0; display: flex; width: 100%; max-width: 560px; justify-content: space-between; align-items: center; gap: 12px; min-height: 82px; margin: auto; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid #eceef1; background: rgba(255,255,255,.97); box-shadow: 0 -8px 28px rgba(30,38,50,.08); backdrop-filter: blur(18px); }
.pay-dock > div { min-width: 0; }
.pay-dock > div > span { margin-right: 5px; color: var(--muted); font-size: 11px; }
.pay-dock > div > strong { color: var(--primary); font-size: 27px; letter-spacing: -.03em; }
.pay-dock > div > small { display: block; margin-top: 1px; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.pay-dock button { flex: 0 0 43%; min-height: 52px; border: 0; border-radius: 26px; color: #fff; background: linear-gradient(100deg, #f15d3f, #df3825); box-shadow: 0 9px 20px rgba(232,70,46,.24); font-size: 17px; font-weight: 800; }
.pay-dock button:disabled { color: #a5aab2; background: #e8eaed; box-shadow: none; }

/* Shared elements and payment result pages */
.panel { margin-top: 18px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.field { margin-bottom: 14px; }
.field label { display: block; margin-bottom: 7px; color: #344054; font-size: 14px; font-weight: 600; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid #d0d5dd; border-radius: 10px; padding: 11px 12px; background: white; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--primary); outline: 3px solid rgba(232,70,46,.1); }
.amount-row { display: flex; justify-content: space-between; padding: 8px 0; color: var(--muted); }
.amount-row strong { color: var(--ink); }
.amount-row.total { margin-top: 5px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 18px; }
.amount-row.total strong { color: var(--danger); font-size: 25px; }
.btn { display: inline-flex; justify-content: center; align-items: center; gap: 7px; width: 100%; min-height: 46px; border: 0; border-radius: 12px; padding: 11px 16px; color: white; background: var(--primary); font-weight: 700; cursor: pointer; }
.btn:hover { background: var(--primary-dark); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn.secondary { color: var(--ink); background: #eef2f1; }
.btn.wechat { background: #07c160; }
.btn.alipay { background: #1677ff; }
.btn.danger { background: var(--danger); }
.button-stack { display: grid; gap: 10px; margin-top: 16px; }
.notice { margin: 12px 0; padding: 11px 13px; border-radius: 11px; color: #8a5310; background: #fff7df; font-size: 13px; line-height: 1.55; }
.notice.error, .error { color: var(--danger); background: #fff0ee; }
.order-icon { display: grid; place-items: center; width: 74px; height: 74px; margin: 10px auto 16px; border-radius: 50%; color: white; background: var(--success); font-size: 34px; }
.order-icon.alipay-success { background: #1677ff; }
.order-title { text-align: center; }
.order-no { text-align: center; color: var(--muted); font-size: 13px; word-break: break-all; }
.order-result-page { background: #f4f5f7; }
.order-result-shell { background: linear-gradient(180deg, #f4f5f7 0, #fff 520px); }
.order-result-content { padding: 1px 12px 32px; }
.order-result-panel { margin-top: 16px; padding: 24px 18px 20px; border-radius: 20px; box-shadow: 0 8px 28px rgba(32,36,44,.06); }
.order-result-panel .order-icon { width: 78px; height: 78px; margin-top: 5px; box-shadow: 0 10px 24px rgba(8,169,91,.18); }
.order-result-panel .order-title { margin: 0; font-size: 30px; }
.order-result-panel .order-no { margin: 16px 0 22px; }
.order-details { padding-top: 2px; }
.order-details .amount-row { gap: 16px; }
.order-details .amount-row strong { max-width: 72%; text-align: right; }
.customer-promo { position: relative; margin-top: 14px; padding: 22px 18px 18px; overflow: hidden; border-radius: 18px; color: #fff; background: linear-gradient(135deg, #e8462e, #f57a36); box-shadow: 0 10px 26px rgba(232,70,46,.2); }
.customer-promo::after { position: absolute; top: -48px; right: -38px; width: 142px; height: 142px; border: 28px solid rgba(255,255,255,.08); border-radius: 50%; content: ""; }
.customer-promo-badge { display: inline-flex; padding: 4px 9px; border: 1px solid rgba(255,255,255,.38); border-radius: 999px; background: rgba(255,255,255,.14); font-size: 11px; }
.customer-promo h2 { position: relative; z-index: 1; margin: 12px 0 5px; font-size: 21px; }
.customer-promo p { position: relative; z-index: 1; margin: 0; color: rgba(255,255,255,.82); font-size: 13px; }
.customer-promo-points { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; margin-top: 17px; }
.customer-promo-points span { padding: 8px 4px; border-radius: 10px; text-align: center; background: rgba(255,255,255,.14); font-size: 12px; }
.customer-center-link { display: grid; grid-template-columns: 31px 1fr auto; gap: 10px; align-items: center; margin-top: 13px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 14px; color: #3d4652; background: #fff; box-shadow: 0 5px 18px rgba(32,36,44,.04); font-size: 14px; text-decoration: none; }
.customer-center-link > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 10px; color: #fff; background: #2f3946; font-size: 11px; }
.customer-center-link b { color: #a3a9b1; font-size: 22px; }
.customer-thanks { margin: 17px 0 0; color: #9aa1aa; font-size: 12px; text-align: center; }

/* Customer personal center */
.customer-profile-page { background: #eef1f4; }
.customer-profile-shell { padding-bottom: 34px; background: linear-gradient(180deg,#fff 0,#f3f5f7 260px); }
.profile-nav { position: sticky; z-index: 20; top: 0; display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; min-height: 58px; padding: calc(6px + env(safe-area-inset-top)) 12px 6px; border-bottom: 1px solid rgba(0,0,0,.04); background: rgba(255,255,255,.96); backdrop-filter: blur(15px); }
.profile-nav button { width: 36px; height: 36px; border: 0; color: #343b46; background: transparent; font-size: 32px; line-height: 1; }
.profile-nav strong { text-align: center; font-size: 17px; }
.member-hero { margin: 13px 12px 0; padding: 21px 18px; overflow: hidden; border-radius: 20px; color: #fff; background: linear-gradient(135deg,#252d3a,#475363); box-shadow: 0 12px 28px rgba(31,42,57,.18); }
.member-hero.awaiting { background: linear-gradient(135deg,#454e5c,#697483); }
.member-hero-top { display: flex; align-items: center; gap: 13px; }
.member-avatar { flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.3); border-radius: 16px; color: #2e3540; background: #fff; font-size: 20px; font-weight: 800; }
.member-hero-top > div:nth-child(2) { min-width: 0; }
.member-hero-top small { color: rgba(255,255,255,.65); font-size: 11px; }
.member-hero-top h1 { margin: 3px 0; overflow: hidden; font-size: 19px; text-overflow: ellipsis; white-space: nowrap; }
.member-hero-top p { margin: 0; overflow: hidden; color: rgba(255,255,255,.7); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.member-points { margin-top: 21px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.13); }
.member-points span,.member-points em { display: block; color: rgba(255,255,255,.66); font-size: 11px; font-style: normal; }
.member-points .pending-points { margin-top: 8px; color: #ffe5a8; }
.member-points strong { display: block; margin: 3px 0 4px; font-size: 38px; letter-spacing: -.03em; }
.profile-summary { display: grid; grid-template-columns: repeat(3,1fr); margin: 12px; overflow: hidden; border: 1px solid #eaedf0; border-radius: 16px; background: #fff; box-shadow: 0 6px 20px rgba(38,48,62,.045); }
.profile-summary > div { position: relative; padding: 16px 6px; text-align: center; }
.profile-summary > div + div::before { position: absolute; top: 17px; bottom: 17px; left: 0; width: 1px; background: #edf0f2; content: ""; }
.profile-summary strong,.profile-summary span { display: block; }
.profile-summary strong { color: #2d3540; font-size: 17px; }
.profile-summary span { margin-top: 5px; color: #8b939e; font-size: 10px; }
.profile-section { margin: 12px; padding: 18px 16px; border: 1px solid #eaedf0; border-radius: 17px; background: #fff; box-shadow: 0 6px 20px rgba(38,48,62,.045); }
.profile-section-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 13px; }
.profile-section-title h2 { margin: 0; font-size: 17px; }
.profile-section-title span { color: #a0a6ae; font-size: 10px; }
.membership-list > div { display: flex; justify-content: space-between; padding: 11px 0; border-top: 1px solid #f0f1f3; font-size: 13px; }
.membership-list > div:first-child { border-top: 0; }
.membership-list span { color: #596270; }
.membership-list strong { color: #d94a35; }
.mobile-order-list { margin: 0 -2px; }
.mobile-order-item { display: block; padding: 14px 2px; border-top: 1px solid #eff1f3; color: inherit; text-decoration: none; }
.mobile-order-item:first-child { border-top: 0; }
.mobile-order-main { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; gap: 10px; align-items: center; }
.mobile-order-logo { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: #fff; background: #07c160; font-size: 13px; font-weight: 800; }
.mobile-order-logo.alipay { background: #1677ff; }
.mobile-order-main > div { min-width: 0; }
.mobile-order-main strong,.mobile-order-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-order-main strong { font-size: 14px; }
.mobile-order-main small { margin-top: 4px; color: #939aa4; font-size: 11px; }
.mobile-order-main b { color: #272e38; font-size: 16px; }
.mobile-order-meta { display: flex; justify-content: space-between; margin: 9px 0 0 48px; color: #a1a7af; font-size: 10px; }
.mobile-order-meta em { color: #16865a; font-style: normal; }
.profile-empty-list { padding: 28px 0 20px; text-align: center; }
.profile-empty-list span { color: #646d79; font-size: 14px; }
.profile-empty-list p { margin: 7px 0 0; color: #adb2b9; font-size: 11px; }
.profile-privacy { margin: 18px 0 0; color: #a3a9b1; font-size: 10px; text-align: center; }
.profile-empty-auth { padding: 95px 30px 30px; text-align: center; }
.profile-empty-icon { display: grid; place-items: center; width: 70px; height: 70px; margin: 0 auto 20px; border-radius: 23px; color: #fff; background: linear-gradient(145deg,#343d4a,#596576); box-shadow: 0 12px 26px rgba(42,53,69,.18); font-size: 24px; font-weight: 800; }
.profile-empty-auth h1 { margin: 0; font-size: 21px; }
.profile-empty-auth p { margin: 10px auto; max-width: 280px; color: #858e99; font-size: 13px; line-height: 1.7; }
.phone-login-card { display: grid; gap: 10px; width: min(340px,100%); margin: 22px auto 0; padding: 17px; border: 1px solid #e4e9ed; border-radius: 16px; background: #fff; box-shadow: 0 9px 25px rgba(38,48,62,.07); }
.phone-login-card > div { display: grid; grid-template-columns: 1fr 105px; gap: 8px; }
.phone-login-card input,.phone-verify-box > input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #dfe5e9; border-radius: 10px; color: #303946; background: #f9fafb; font-size: 14px; outline: none; }
.phone-login-card button { border: 0; border-radius: 10px; }
.phone-login-card > div button { color: #247a57; background: #edf7f2; font-size: 12px; }
.phone-login-card button:disabled { opacity: .55; }
.mobile-member-hero { background: linear-gradient(135deg,#182f2a,#2f6e55); }
.member-avatar.has-photo { overflow: hidden; color: #27604b; }
.member-avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; }
.member-hero-top .phone-state { flex: 0 0 auto; margin-left: auto; padding: 4px 7px; border-radius: 9px; color: rgba(255,255,255,.72); background: rgba(255,255,255,.12); font-size: 9px; }
.member-hero-top .phone-state.verified { color: #d9ffe9; background: rgba(42,205,123,.2); }
.member-profile-editor form { display: grid; gap: 11px; }
.member-profile-editor label { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 8px; }
.member-profile-editor label span { color: #697381; font-size: 12px; }
.member-profile-editor input { width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid #e2e6ea; border-radius: 10px; color: #303946; background: #f9fafb; font-size: 14px; outline: none; }
.member-profile-editor input:focus { border-color: #42a879; background: #fff; box-shadow: 0 0 0 3px rgba(42,168,121,.09); }
.profile-primary-btn,.profile-secondary-btn,.wechat-profile-btn { display: grid; place-items: center; min-height: 43px; border: 0; border-radius: 11px; cursor: pointer; font-size: 13px; font-weight: 700; text-decoration: none; }
.profile-primary-btn { color: #fff; background: #247a57; }
.wechat-profile-btn { margin-top: 10px; color: #14864f; background: #eaf8f0; }
.profile-secondary-btn { width: 100%; margin-top: 8px; color: #247a57; background: #edf7f2; }
.profile-help,.pending-note { margin: 8px 2px 0; color: #929aa5; font-size: 10px; line-height: 1.6; }
.pending-note { padding: 9px 11px; border-radius: 9px; color: #986c24; background: #fff8e7; }
.verified-phone-note { margin: 12px 0 0; padding: 10px 11px; border-radius: 9px; color: #247a57; background: #edf8f3; font-size: 10px; line-height: 1.6; }
.phone-verify-box { margin-top: 12px; padding-top: 12px; border-top: 1px solid #eff1f3; }
.phone-verify-box > p { margin: 0 0 10px; color: #7b8490; font-size: 11px; line-height: 1.6; }
.phone-verify-box > input { margin-bottom: 8px; }
.phone-verify-box > div { display: grid; grid-template-columns: 1fr 105px; gap: 8px; }
.phone-verify-box button { border: 0; border-radius: 10px; color: #247a57; background: #edf7f2; font-size: 12px; }
.phone-verify-box button:disabled { opacity: .55; }
.profile-message { min-height: 16px; margin: 9px 2px 0; font-size: 11px; }
.profile-message.success { color: #16865a; }
.profile-message.error { color: #ca4c3e; }

/* Administration */
.admin-page { --admin-blue:#2787f5; --admin-navy:#17243a; --admin-bg:#f2f5f8; background: var(--admin-bg); }
.admin-layout { display: grid; grid-template-columns: 228px minmax(0,1fr); grid-template-rows: 68px minmax(calc(100vh - 68px),auto); min-height: 100vh; }
.admin-sidebar { position: fixed; z-index: 50; inset: 0 auto 0 0; display: flex; width: 228px; flex-direction: column; color: #dbe5f2; background: linear-gradient(180deg,#17263d,#101b2e); box-shadow: 5px 0 20px rgba(21,35,55,.08); }
.admin-brand { display: flex; min-height: 68px; align-items: center; gap: 11px; padding: 0 22px; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: white; background: linear-gradient(145deg,#50a6ff,#247df0); box-shadow: 0 7px 16px rgba(39,135,245,.25); font-size: 18px; font-weight: 900; }
.admin-brand strong,.admin-brand small { display: block; }
.admin-brand strong { color: white; font-size: 17px; }
.admin-brand small { margin-top: 2px; color: #8294ad; font-size: 10px; letter-spacing:.08em; }
.admin-nav { flex: 1; padding: 18px 12px; overflow-y: auto; }
.nav-group { display: block; margin: 10px 12px 7px; color: #637792; font-size: 10px; letter-spacing:.12em; }
.admin-nav-item { position: relative; display: flex; width: 100%; min-height: 45px; align-items: center; gap: 11px; margin: 3px 0; padding: 0 13px; border: 0; border-radius: 9px; color: #aebed2; background: transparent; cursor: pointer; text-align: left; transition: .15s; }
.admin-nav-item > span { display: grid; width: 20px; place-items: center; color: #6f87a5; font-size: 17px; }
.admin-nav-item > i { margin-left: auto; padding: 2px 7px; border-radius: 10px; color: #7f93ad; background: rgba(255,255,255,.06); font-size: 10px; font-style: normal; }
.admin-nav-item:hover { color: white; background: rgba(255,255,255,.05); }
.admin-nav-item.active { color: white; background: linear-gradient(100deg,rgba(39,135,245,.28),rgba(39,135,245,.12)); font-weight: 700; }
.admin-nav-item.active::before { position: absolute; left: -12px; width: 3px; height: 25px; border-radius: 0 3px 3px 0; background: #4da1ff; content:""; }
.admin-nav-item.active > span { color: #55a8ff; }
.admin-nav-item.active > i { color: white; background: #2787f5; }
.sidebar-footer { display: flex; align-items: center; gap: 10px; margin: 12px; padding: 13px; border: 1px solid rgba(255,255,255,.06); border-radius: 10px; background: rgba(255,255,255,.035); }
.system-dot { width: 9px; height: 9px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 4px rgba(52,211,153,.12); }
.sidebar-footer strong,.sidebar-footer small { display:block; }
.sidebar-footer strong { color: #d8e3f0; font-size: 11px; }
.sidebar-footer small { margin-top:3px; color:#61748e; font-size:9px; }
.admin-header { position: sticky; z-index: 40; top: 0; grid-column: 2; display: flex; min-width:0; align-items:center; gap:15px; padding: 0 25px; border-bottom:1px solid #e8ebef; background:rgba(255,255,255,.96); box-shadow:0 2px 12px rgba(28,39,55,.035); backdrop-filter:blur(14px); }
.header-icon { width:35px; height:35px; border:0; border-radius:8px; color:#657083; background:#f3f5f7; cursor:pointer; }
.header-title { display:flex; gap:7px; align-items:center; font-size:13px; }
.header-title span { color:#9aa2ad; }
.header-title strong { color:#313946; }
.header-actions { display:flex; align-items:center; gap:18px; margin-left:auto; }
.connector-pill { display:flex; align-items:center; gap:8px; padding:7px 12px; border:1px solid #dfeee7; border-radius:9px; background:#f6fffa; }
.connector-pill > span { width:8px; height:8px; border-radius:50%; background:#25b974; box-shadow:0 0 0 4px rgba(37,185,116,.1); }
.connector-pill small,.connector-pill strong { display:block; }
.connector-pill small { color:#87908e; font-size:9px; }
.connector-pill strong { margin-top:1px; color:#168354; font-size:11px; }
.connector-pill.offline { border-color:#f1dfdc; background:#fff9f8; }
.connector-pill.offline > span { background:#e65c4a; }
.connector-pill.offline strong { color:#c74636; }
.header-actions form { display:flex; align-items:center; gap:9px; margin:0; }
.admin-avatar { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:white; background:linear-gradient(145deg,#438ee8,#256fc7); font-weight:800; }
.admin-identity strong,.admin-identity small { display:block; }
.admin-identity strong { font-size:12px; }
.admin-identity small { margin-top:1px; color:#9aa2ad; font-size:9px; }
.logout-btn { margin-left:4px; padding:5px 9px; border:0; color:#8c95a2; background:transparent; cursor:pointer; font-size:11px; }
.admin-content { grid-column:2; min-width:0; padding:24px 26px 45px; }
.page-intro { display:flex; justify-content:space-between; align-items:flex-end; gap:18px; margin-bottom:20px; }
.page-intro p { margin:0 0 7px; color:#98a1ad; font-size:11px; }
.page-intro h1 { margin:0; font-size:25px; letter-spacing:-.02em; }
.page-intro > div > span { display:block; margin-top:6px; color:#7f8997; font-size:12px; }
.outline-btn,.primary-btn { min-height:38px; padding:8px 17px; border-radius:7px; cursor:pointer; font-weight:600; }
.outline-btn { border:1px solid #d8dde4; color:#586273; background:white; }
.primary-btn { border:1px solid var(--admin-blue); color:white; background:var(--admin-blue); box-shadow:0 5px 12px rgba(39,135,245,.14); }
.primary-btn:hover { background:#1477e7; }
.outline-btn:disabled,.primary-btn:disabled { opacity:.6; cursor:not-allowed; }
.admin-stats { display:grid; grid-template-columns:repeat(5,minmax(155px,1fr)); gap:13px; margin-bottom:16px; }
.stat-card { display:flex; min-width:0; align-items:center; gap:13px; padding:17px; border:1px solid #e8ebef; border-radius:10px; background:white; box-shadow:0 3px 12px rgba(25,39,60,.03); }
.stat-icon { flex:0 0 auto; display:grid; place-items:center; width:42px; height:42px; border-radius:12px; font-size:17px; font-weight:800; }
.stat-icon.blue { color:#2787f5; background:#eaf4ff; }.stat-icon.green { color:#17a76a; background:#eafaf3; }.stat-icon.orange { color:#ed8a24; background:#fff4e7; }.stat-icon.purple { color:#7757d8; background:#f0edff; }.stat-icon.red { color:#df5b4c; background:#fff0ee; }
.stat-card > div { min-width:0; }
.stat-card small { color:#818b99; font-size:11px; }
.stat-card strong { display:block; margin-top:4px; overflow:hidden; color:#243044; font-size:22px; text-overflow:ellipsis; white-space:nowrap; }
.stat-card strong em { margin-left:4px; color:#8d97a4; font-size:10px; font-style:normal; font-weight:400; }
.stat-card p { margin:3px 0 0; overflow:hidden; color:#adb4bd; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.overview-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.8fr); gap:16px; }
.admin-panel { padding:20px; border:1px solid #e7eaee; border-radius:10px; background:white; box-shadow:0 3px 14px rgba(24,38,58,.03); }
.panel-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:15px; }
.panel-heading h2 { margin:0; color:#293344; font-size:16px; }
.panel-heading p { margin:5px 0 0; color:#929ba8; font-size:10px; }
.soft-tag { padding:4px 9px; border-radius:11px; color:#2588f5; background:#edf6ff; font-size:9px; }
.donut-layout { display:flex; min-height:225px; align-items:center; justify-content:center; gap:50px; padding:15px 10px 0; }
.trade-donut { --wechat-angle:0deg; display:grid; place-items:center; width:164px; height:164px; border-radius:50%; background:conic-gradient(#2f91fb 0 var(--wechat-angle),#7458dc var(--wechat-angle) 360deg); box-shadow:inset 0 0 0 1px rgba(0,0,0,.02); }
.trade-donut::before { grid-area:1/1; width:122px; height:122px; border-radius:50%; background:white; content:""; }
.trade-donut > div { z-index:1; grid-area:1/1; text-align:center; }
.trade-donut small,.trade-donut strong,.trade-donut span { display:block; }
.trade-donut small { color:#8993a1; font-size:10px; }.trade-donut strong { margin:5px 0 2px; color:#2787f5; font-size:22px; }.trade-donut span { color:#a4abb5; font-size:9px; }
.donut-legend { min-width:210px; }
.donut-legend > div { display:grid; grid-template-columns:10px 1fr auto; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid #f0f2f4; color:#687384; font-size:11px; }
.donut-legend i { width:8px; height:8px; border-radius:50%; }.legend-wechat { background:#2f91fb; }.legend-alipay { background:#7458dc; }.donut-legend .legend-saving i { background:#f4a63d; }
.donut-legend strong { color:#344052; }
.health-content { margin-top:18px; }
.health-station { display:flex; align-items:center; gap:10px; padding-bottom:17px; border-bottom:1px solid #edf0f3; }
.station-letter { display:grid; place-items:center; width:40px; height:40px; border-radius:11px; color:white; background:linear-gradient(145deg,#4ca2ff,#237fe9); font-weight:800; }
.health-station > div { min-width:0; }.health-station > div strong,.health-station > div small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.health-station > div strong { font-size:12px; }.health-station > div small { margin-top:3px; color:#9aa3ae; font-size:9px; }
.online-state { display:inline-flex; align-items:center; gap:5px; color:#697584; font-size:10px; }.health-station .online-state { margin-left:auto; }
.online-state i { width:7px; height:7px; border-radius:50%; }.online-state.online i { background:#2ac27b; }.online-state.offline i { background:#e35e4c; }.online-state.online { color:#20875d; }.online-state.offline { color:#c94b3d; }
.health-grid { display:grid; gap:1px; margin-top:13px; border-radius:8px; overflow:hidden; background:#edf0f3; }
.health-grid > div { display:flex; justify-content:space-between; gap:10px; padding:12px; background:#f9fafb; font-size:10px; }.health-grid span { color:#8a94a1; }.health-grid strong { overflow:hidden; color:#374355; text-overflow:ellipsis; white-space:nowrap; }.health-grid a,.table-link,.link-btn { border:0; color:#2787f5; background:transparent; cursor:pointer; text-decoration:none; }
.recent-panel,.table-panel,.station-list-panel { margin-top:16px; }
.table-wrap { width:100%; margin-top:16px; overflow-x:auto; }
.admin-table { width:100%; border-collapse:collapse; font-size:10px; }
.admin-table th,.admin-table td { padding:12px 11px; border-bottom:1px solid #edf0f3; text-align:left; white-space:nowrap; }
.admin-table th { color:#707b8b; background:#f7f9fb; font-weight:600; }
.admin-table td { color:#4c5868; }
.admin-table tbody tr:hover { background:#fafcff; }
.admin-table td small { display:block; margin-top:4px; color:#9da5af; }
.mono { color:#33425a; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:9px; font-weight:600; }
.discount-text { color:#dc6657 !important; }.pay-text { color:#2787f5 !important; font-weight:700; }
.status-badge,.channel-badge,.source-auto,.source-manual { display:inline-flex; align-items:center; padding:4px 8px; border-radius:10px; font-size:9px; }
.status-badge.success { color:#16865a; background:#eaf9f2; }.status-badge.warning { color:#ad6a19; background:#fff4e1; }.status-badge.danger { color:#c84c3d; background:#fff0ed; }.status-badge.neutral { color:#697586; background:#f0f2f5; }
.channel-badge.wechat { color:#118951; background:#e7faef; }.channel-badge.alipay { color:#237adf; background:#eaf3ff; }.source-auto { color:#247bdc; background:#edf5ff; }.source-manual { color:#a76a1b; background:#fff5e6; }
.table-action { padding:4px 0; border:0; color:#2787f5; background:transparent; cursor:pointer; font-size:9px; }.table-action.refund { color:#d65a4c; }
.muted-text { color:#b2b8c0; }.reason-cell { max-width:230px; overflow:hidden; text-overflow:ellipsis; }.empty-state { display:flex; min-height:90px; align-items:center; justify-content:center; gap:8px; color:#a4acb7; }.empty-state > span { font-size:20px; }
.filter-panel { padding:17px 20px; }.filter-grid { display:grid; grid-template-columns:190px minmax(240px,1fr) auto auto; gap:12px; align-items:end; }.filter-grid .field { margin:0; }.filter-grid label,.config-fields label { font-size:10px; }.filter-grid input,.filter-grid select,.config-fields input { min-height:38px; border-color:#dfe3e8; border-radius:7px; font-size:11px; }
.mini-metrics { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:15px 0; }.mini-metrics > div { padding:15px 17px; border:1px solid #e7eaee; border-radius:9px; background:white; }.mini-metrics span { color:#8993a0; font-size:10px; }.mini-metrics strong { display:block; margin-top:5px; color:#2787f5; font-size:18px; }
.credential-box { margin:15px 0; padding:17px 19px; border:1px solid #f0d894; border-radius:9px; color:#665326; background:#fffbea; }.credential-box strong { display:block; margin-bottom:9px; }.credential-box p { margin:6px 0; font-size:11px; }.credential-box code { padding:3px 6px; border-radius:4px; background:rgba(255,255,255,.75); word-break:break-all; }.credential-box small { color:#9c854a; }.credential-box .primary-btn,.credential-box .outline-btn { margin:12px 8px 0 0; }
.config-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:16px; }.config-card:first-child { grid-column:1/-1; }.config-fields { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; align-items:end; margin-top:17px; }.config-fields .field { margin:0; }.compact-fields { grid-template-columns:repeat(2,1fr); }.compact-fields .primary-btn { min-height:39px; }
.inline-filter { min-width:220px; margin:0; }.inline-filter label { display:block; margin-bottom:5px; color:#7b8695; font-size:10px; }.inline-filter select,.table-price-input { min-height:36px; border:1px solid #dfe3e8; border-radius:7px; color:#394659; background:white; font-size:11px; }.inline-filter select { width:100%; padding:7px 30px 7px 10px; }.table-price-input { width:125px; padding:7px 10px; }.panel-actions { display:flex; align-items:center; justify-content:flex-end; gap:16px; padding-top:18px; }.panel-actions > span { color:#8a94a1; font-size:10px; }.panel-actions .primary-btn { min-width:145px; }
.loading-block { padding:35px 0; color:#9ba4af; text-align:center; font-size:11px; }
.admin-toast { position:fixed; z-index:100; right:24px; bottom:24px; max-width:360px; padding:12px 18px; border-radius:8px; color:white; background:#25354c; box-shadow:0 12px 30px rgba(24,39,61,.2); font-size:11px; }.admin-toast.error { background:#c8483a; }
.login-card { width:min(420px,calc(100% - 32px)); margin:10vh auto; padding:30px; border:1px solid #e6e9ed; border-radius:14px; background:white; box-shadow:0 20px 55px rgba(20,35,55,.12); }.login-card h1 { margin-top:0; }
@media (max-width:1200px) { .admin-stats { grid-template-columns:repeat(3,1fr); }.overview-grid { grid-template-columns:1fr; }.station-health { min-height:auto; }.config-grid { grid-template-columns:1fr; }.config-card:first-child { grid-column:auto; } }
@media (max-width:900px) { .admin-layout { grid-template-columns:1fr; }.admin-sidebar { transform:translateX(-100%); transition:transform .2s; }.sidebar-open .admin-sidebar { transform:translateX(0); }.sidebar-open::after { position:fixed; z-index:45; inset:0; background:rgba(16,25,39,.38); content:""; }.admin-header,.admin-content { grid-column:1; }.admin-header { padding:0 14px; }.admin-identity,.connector-pill { display:none; }.admin-content { padding:18px 14px 35px; }.admin-stats { grid-template-columns:repeat(2,1fr); }.filter-grid { grid-template-columns:1fr 1fr; }.mini-metrics { grid-template-columns:repeat(2,1fr); }.donut-layout { gap:25px; }.config-fields,.compact-fields { grid-template-columns:1fr 1fr; } }
@media (max-width:560px) { .page-intro { align-items:flex-start; }.page-intro h1 { font-size:22px; }.page-intro > div > span { display:none; }.admin-stats { grid-template-columns:1fr; }.stat-card { padding:14px; }.donut-layout { flex-direction:column; gap:14px; }.donut-legend { width:100%; }.filter-grid,.config-fields,.compact-fields { grid-template-columns:1fr; }.filter-grid .primary-btn,.filter-grid .outline-btn { width:100%; }.header-title span,.logout-btn { display:none; }.admin-panel { padding:15px; }.panel-heading { flex-direction:column; }.inline-filter { width:100%; min-width:0; }.panel-actions { align-items:stretch; flex-direction:column; }.panel-actions .primary-btn { width:100%; }.mini-metrics { grid-template-columns:1fr 1fr; }.pay-page { padding:0 9px; }.pay-nav { margin:0 -9px; }.gun-grid { gap:7px; }.gun-card { min-height:76px; }.quick-amounts { grid-template-columns:repeat(2,1fr); }.pay-dock > div > strong { font-size:23px; } }

/* Admin typography: keep the customer page compact, but make management screens easier to read. */
.admin-page { font-size: 14px; }
.admin-brand small { font-size: 11px; }
.nav-group { font-size: 12px; }
.admin-nav-item { font-size: 14px; }
.admin-nav-item > i { font-size: 11px; }
.sidebar-footer strong { font-size: 12px; }
.sidebar-footer small { font-size: 10px; }
.header-title { font-size: 15px; }
.connector-pill small { font-size: 10px; }
.connector-pill strong { font-size: 12px; }
.admin-identity strong { font-size: 13px; }
.admin-identity small { font-size: 10px; }
.logout-btn { font-size: 12px; }
.page-intro p { font-size: 12px; }
.page-intro > div > span { font-size: 13px; }
.stat-card small { font-size: 12px; }
.stat-card strong { font-size: 24px; }
.stat-card strong em { font-size: 11px; }
.stat-card p { font-size: 10px; }
.panel-heading h2 { font-size: 18px; }
.panel-heading p { font-size: 12px; }
.soft-tag { font-size: 10px; }
.trade-donut small { font-size: 11px; }
.trade-donut span { font-size: 10px; }
.donut-legend > div { font-size: 12px; }
.health-station > div strong { font-size: 13px; }
.health-station > div small { font-size: 10px; }
.online-state { font-size: 11px; }
.health-grid > div { font-size: 12px; }
.admin-table { font-size: 13px; }
.admin-table th,.admin-table td { padding: 13px 12px; }
.admin-table th { font-size: 13px; }
.admin-table td small { font-size: 11px; }
.mono { font-size: 11px; }
.status-badge,.channel-badge,.source-auto,.source-manual { font-size: 11px; }
.table-action { font-size: 12px; }
.empty-state { font-size: 13px; }
.filter-grid label,.config-fields label,.inline-filter label { font-size: 12px; }
.filter-grid input,.filter-grid select,.config-fields input { font-size: 13px; }
.mini-metrics span { font-size: 11px; }
.mini-metrics strong { font-size: 20px; }
.credential-box p { font-size: 12px; }
.credential-box small { font-size: 11px; }
.inline-filter select,.table-price-input { font-size: 13px; }
.panel-actions > span { font-size: 12px; }
.loading-block { font-size: 13px; }
.admin-toast { font-size: 13px; }
.printer-config-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.printer-check { display:flex;align-items:center;gap:10px;min-height:44px;color:#344054;font-size:14px; }
.printer-check input { width:18px;height:18px;accent-color:#2563eb; }
.printer-actions { grid-column:1/-1;display:flex;align-items:center;justify-content:flex-end;gap:12px; }
.printer-actions span { margin-right:auto;color:#667085;font-size:13px; }
.device-error { display:block;max-width:260px;color:#b42318;font-size:12px;line-height:1.45;white-space:normal; }
.account-config-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.account-actions { grid-column:1/-1; }
.shift-filter-grid { grid-template-columns:minmax(220px,1fr) 180px 180px auto; }
.shift-filter-grid input,.account-config-grid select { width:100%;min-height:38px;padding:7px 10px;border:1px solid #dfe3e8;border-radius:7px;color:#394659;background:#fff;font-size:13px; }
.print-shift { white-space:nowrap; }
@media (max-width:760px) {
  .printer-config-grid,.account-config-grid,.shift-filter-grid { grid-template-columns:1fr; }
  .printer-actions { flex-wrap:wrap; }
  .printer-actions span { width:100%; }
}