:root {
  color-scheme: light;
  --ink: #654e48;
  --muted: #8b756c;
  --line: #eddfd5;
  --surface: rgba(255, 255, 255, .92);
  --primary: #ad5d79;
  --primary-dark: #93465f;
  --success: #0b9b68;
  --danger: #d64b55;
  --shadow: 0 18px 50px rgba(120, 85, 70, .06);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 0%, #fbe3eb, transparent 32rem),
    radial-gradient(circle at 95% 30%, #fff0c8, transparent 30rem),
    #fffaf3;
}

button, input { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.shell { width: min(760px, calc(100% - 32px)); margin: 0 auto; padding: 52px 0 28px; }
.admin-shell { width: min(980px, calc(100% - 32px)); }
.hero { display: flex; gap: 18px; align-items: center; margin-bottom: 24px; }
.hero h1 { margin: 2px 0 7px; font-size: clamp(28px, 5vw, 40px); letter-spacing: -.04em; }
.hero p { margin: 0; color: var(--muted); line-height: 1.65; }
.eyebrow { color: var(--primary) !important; font-size: 12px; font-weight: 800; letter-spacing: .16em; }
.brand-mark { display: grid; place-items: center; flex: 0 0 64px; height: 64px; border: 1px solid #ecc4cf; border-radius: 23px; color: #805063; font: bold 26px Georgia, serif; text-decoration: none; background: #f9dce4; box-shadow: 0 5px 0 #edcbd533; }
.panel { background: var(--surface); border: 1px solid #eddfd5; border-radius: 24px; padding: 28px; box-shadow: var(--shadow); backdrop-filter: blur(12px); }
.panel.compact { padding: 20px 24px; }
fieldset { padding: 0; margin: 0 0 28px; border: 0; }
legend { margin-bottom: 13px; font-weight: 750; }
.choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.choice { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 14px; border: 1.5px solid var(--line); border-radius: 16px; cursor: pointer; transition: .18s ease; }
.choice:hover, .choice.selected, .amount:hover, .amount.selected { border-color: #cc90a4; background: #fff0f3; box-shadow: 0 0 0 3px #f4dce555; }
.choice:focus-within, .amount:focus-within, button:focus-visible, a:focus-visible { outline: 3px solid #ad5d79; outline-offset: 3px; }
.choice input, .amount input { position: absolute; opacity: 0; pointer-events: none; }
.choice span:last-child { display: grid; gap: 3px; }
.choice small, .amount small, .field small { color: var(--muted); }
.pay-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: #fff; font-weight: 850; }
.pay-icon.alipay { background: #1677ff; }
.pay-icon.wechat { background: #19b765; }
.amount-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.amount { display: grid; gap: 4px; padding: 14px 8px; text-align: center; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; transition: .18s ease; }
.amount strong { font-size: 21px; }
.amount small { font-size: 12px; }
.field { display: grid; gap: 8px; }
.field > span { font-weight: 650; }
.field input { width: 100%; padding: 13px 14px; border: 1.5px solid var(--line); border-radius: 12px; outline: 0; background: #fff; }
.field input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(103, 88, 232, .1); }
.primary, .secondary, .link-button, .neutral-button, .quiet-button { border: 0; border-radius: 12px; padding: 13px 20px; font-weight: 750; }
.primary { color: #704254; background: #f4cdd9; border: 1px solid #e9bdcd; box-shadow: 0 6px 16px #bc81921a; }
.direct-pay { display: block; margin-bottom: 10px; text-align: center; text-decoration: none; }
.direct-pay-tip { margin: -2px 0 12px; color: var(--muted); font-size: 12px; text-align: center; }
.primary:hover { background: #edbbcd; }
.primary:disabled, .secondary:disabled, .neutral-button:disabled, .quiet-button:disabled { cursor: wait; opacity: .58; }
.secondary { color: #80673e; background: #fff0c6; }
.link-button { color: var(--muted); background: transparent; box-shadow: none; }
.neutral-button { color: #685f5b; border: 1px solid #e3d9d3; background: #f7f3f0; }
.quiet-button { color: var(--muted); border: 1px solid var(--line); background: #fff; }
.neutral-button:hover, .quiet-button:hover { color: var(--ink); border-color: #cfbeb4; background: #f5efeb; }
.full { width: 100%; }
.order-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.order-head > div { display: grid; gap: 4px; }
.label { color: var(--muted); font-size: 12px; }
.status { white-space: nowrap; border-radius: 999px; padding: 7px 12px; font-size: 13px; font-weight: 750; }
.waiting-payment { color: #a66800; background: #fff3d6; }
.reviewing { color: #98613a; background: #fff1d2; }
.confirmed { color: #087b54; background: #dcf8ed; }
.rejected { color: #b23c45; background: #ffe8eb; }
.qr-wrap { padding: 24px 0; text-align: center; }
.qr-wrap p { margin: 0 0 9px; color: var(--muted); }
.qr-wrap .price { margin-bottom: 16px; font-size: 35px; font-weight: 850; }
.qr-wrap img { display: block; width: min(310px, 88%); max-height: 430px; margin: auto; object-fit: contain; border-radius: 14px; box-shadow: 0 8px 25px rgba(20, 28, 48, .12); }
.qr-wrap .warning { margin: 16px 0 0; color: #a66800; font-size: 13px; }
#cancel-button { display: block; margin: 8px auto -10px; }
.center-state { padding-top: 30px; text-align: center; }
.center-state h2 { margin: 16px 0 8px; }
.center-state > p { color: var(--muted); line-height: 1.7; }
.spinner { width: 44px; height: 44px; margin: auto; border: 4px solid #f7e2e8; border-top-color: var(--primary); border-radius: 50%; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.success-icon, .error-icon { display: grid; place-items: center; width: 52px; height: 52px; margin: auto; border-radius: 50%; color: #fff; font-size: 28px; font-weight: 800; }
.success-icon { background: var(--success); }
.error-icon { background: var(--danger); }
.summary { margin: 24px 0 0; padding: 8px 18px; border-radius: 16px; background: #f8f9fc; text-align: left; }
.summary div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.summary div:last-child { border-bottom: 0; }
.summary dt { color: var(--muted); }
.summary dd { margin: 0; font-weight: 700; }
.code-box { display: flex; align-items: center; gap: 10px; margin: 24px 0 18px; padding: 12px 12px 12px 16px; border: 1.5px dashed #dba6b7; border-radius: 14px; background: #fff1f4; }
.code-box code { flex: 1; overflow-wrap: anywhere; text-align: left; font-size: 15px; }
.code-box button { border: 0; border-radius: 9px; padding: 9px 13px; color: #fff; background: var(--primary); }
.toast, .inline-error { color: var(--danger); }
.toast { margin: 14px 0; padding: 12px 15px; border: 1px solid #ffd1d6; border-radius: 12px; background: #fff0f2; }
.toast.notice { color: #087b54; border-color: #bfe8d8; background: #eaf8f2; }
.inline-error { font-size: 13px; text-align: center; }
footer { padding: 22px 0 0; color: #929bad; font-size: 12px; text-align: center; }
.login-row { display: flex; align-items: end; gap: 12px; }
.admin-login-note { margin: 12px 2px 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.grow { flex: 1; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 28px 2px 14px; }
.toolbar h2 { margin: 0 0 5px; }
.toolbar p { margin: 0; color: var(--muted); font-size: 13px; }
.toolbar-actions { display: flex; align-items: center; gap: 4px; }
.count { display: inline-grid; place-items: center; min-width: 26px; height: 26px; margin-left: 4px; border-radius: 999px; color: #fff; background: var(--primary); font-size: 13px; vertical-align: 3px; }
.order-list { display: grid; gap: 12px; }
.order-filters { display: flex; gap: 8px; margin: 0 0 16px; padding: 5px; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.62); }
.filter-button { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 9px 12px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; font-weight: 650; }
.filter-button span { display: grid; place-items: center; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 999px; color: #8b756c; background: #f2ebe6; font-size: 11px; }
.filter-button.active { color: #704254; background: #f7dce5; }
.filter-button.active span { color: #704254; background: #fff; }
.order-search { margin-bottom: 10px; }
.order-help { margin: 0 2px 16px; color: var(--muted); font-size: 13px; }
.order-card { padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 8px 28px rgba(38, 43, 72, .06); }
.order-card-top { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.order-card h3 { margin: 0 0 5px; font-size: 18px; }
.order-card .meta { color: var(--muted); font-size: 13px; }
.order-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0; }
.order-facts div { display: grid; gap: 4px; padding: 10px 12px; border-radius: 11px; background: #f7f8fb; }
.order-facts span { color: var(--muted); font-size: 11px; }
.order-actions { display: flex; gap: 10px; justify-content: end; }
.empty { text-align: center; color: var(--muted); }
.admin-details { margin-top: 16px; padding: 0; overflow: clip; }
.admin-details summary { padding: 20px 24px; cursor: pointer; font-size: 18px; font-weight: 750; list-style-position: inside; }
.admin-details[open] summary { border-bottom: 1px solid var(--line); }
.admin-details .details-content { padding: 4px 24px 24px; }
.admin-details .count { min-width: 23px; height: 23px; font-size: 11px; vertical-align: 2px; }

@media (max-width: 620px) {
  .shell { width: min(100% - 22px, 760px); padding-top: 28px; }
  .hero { align-items: flex-start; }
  .brand-mark { flex-basis: 50px; height: 50px; border-radius: 15px; }
  .panel { padding: 20px; border-radius: 19px; }
  .choice-grid { grid-template-columns: 1fr; }
  .amount-grid { grid-template-columns: repeat(3, 1fr); }
  .login-row { align-items: stretch; flex-direction: column; }
  .login-row .primary { min-height: 48px; }
  .toolbar { align-items: flex-start; }
  .toolbar-actions { flex-wrap: wrap; justify-content: end; }
  .order-facts { grid-template-columns: repeat(2, 1fr); }
  .order-actions { display: grid; grid-template-columns: repeat(2, 1fr); }
  .order-actions .primary:last-child:nth-child(3) { grid-column: 1 / -1; }
}

/* Customer checkout. Scoped to leave the order administration UI independent. */
.topup-page {
  --ink: #292c36; --muted: #737782; --line: #eddfd5;
  --page-bg: #fffaf3; --surface: #fffdf9; --surface-soft: #faf3e9;
  --primary: #a3496b; --primary-dark: #893b59;
  min-width: 320px; background: var(--page-bg); color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}
.topup-page a { color: inherit; text-decoration: none; }
.topup-page button, .topup-page a { -webkit-tap-highlight-color: transparent; transition: background .18s, border-color .18s, color .18s, box-shadow .18s; }
.topup-page button:disabled { cursor: wait; opacity: .55; }
.topup-page .skip-link { position: fixed; top: -80px; left: 20px; z-index: 5; padding: 12px 18px; background: var(--surface); border: 1px solid var(--primary); border-radius: 8px; }
.topup-page .skip-link:focus { top: 12px; }
.topup-page .site-header { background: var(--page-bg); border-bottom: 1px solid var(--line); }
.topup-page .nav-inner { width: min(1120px, calc(100% - 64px)); height: 78px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.topup-page .brand { display: flex; align-items: center; gap: 10px; font-size: 23px; font-weight: 750; letter-spacing: -.7px; }
.topup-page .brand-mark { flex: 0 0 37px; width: 37px; height: 37px; border: 1px solid #efcfdc; border-radius: 12px; color: #91516a; background: #fae7ef; font: bold 19px Georgia, serif; letter-spacing: -1px; box-shadow: none; }
.topup-page .brand-api { color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: 1px; }
.topup-page nav { display: flex; gap: 8px; }
.topup-page nav a { padding: 10px 17px; border-radius: 8px; color: #626570; font-size: 13px; font-weight: 550; }
.topup-page nav a[aria-current] { color: var(--primary); background: #fcf0f5; }
.topup-page nav a:hover { color: var(--primary); background: #faf5f7; }
.topup-page .console-link { padding: 9px 14px; border: 1px solid #e3e4e9; border-radius: 8px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.topup-page .console-link span { margin-left: 12px; color: var(--muted); }
.topup-page .console-link:hover { background: var(--page-bg); }
.topup-page .shell { width: min(1080px, calc(100% - 64px)); margin: 0 auto; padding: 0; }
.topup-page .hero { justify-content: space-between; min-height: 236px; margin: 0; padding: 36px 12px 32px 0; gap: 24px; }
.topup-page .hero .eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 12px; font-weight: 550; letter-spacing: .06em; }
.topup-page .eyebrow > span { width: 6px; height: 6px; border-radius: 50%; background: #bd7993; }
.topup-page .hero h1 { margin: 0; font-size: clamp(32px, 4.2vw, 42px); line-height: 1.25; font-weight: 750; letter-spacing: -.05em; }
.topup-page .hero .hero-description { margin: 15px 0 0; font-size: 14px; line-height: 1.85; }
.topup-page .mobile-break { display: none; }
.topup-page .wallet-art { position: relative; flex: 0 0 200px; height: 150px; background: radial-gradient(ellipse, #f2e2eb, transparent 70%); }
.topup-page .wallet-card { position: absolute; top: 18px; left: 41px; width: 114px; height: 84px; border: 1px solid #e0c5d4; border-radius: 10px; background: var(--surface); transform: rotate(-17deg); box-shadow: inset 0 17px #f3e8ef; }
.topup-page .wallet-body { position: absolute; left: 22px; top: 45px; width: 151px; height: 95px; padding: 15px 18px; border: 1px solid #dfbbcd; border-radius: 13px; background: #f6e0eb; transform: rotate(-7deg); box-shadow: 0 10px 20px #9b628b12; }
.topup-page .wallet-logo { color: #a46581; font: bold 29px Georgia, serif; }
.topup-page .wallet-caption { display: block; margin-top: 9px; color: #ac7e94; font-size: 6px; letter-spacing: .7px; }
.topup-page .wallet-clasp { position: absolute; right: -4px; top: 32px; width: 34px; height: 27px; display: grid; place-items: center; border: 1px solid #dfbbcd; border-radius: 7px 3px 3px 7px; background: #fff6fa; }
.topup-page .wallet-clasp i { width: 6px; height: 6px; border-radius: 50%; background: #c28ba5; }
.topup-page .wallet-coin { position: absolute; right: 12px; top: 5px; display: grid; place-items: center; width: 42px; height: 42px; border: 5px solid var(--page-bg); border-radius: 50%; color: #fff; background: #b57690; font-size: 26px; }
.topup-page .wallet-spark { position: absolute; left: 6px; top: 8px; color: #b7869b; font-size: 26px; }
.topup-page .account-panel { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.topup-page .account-avatar { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 50%; background: var(--surface-soft); color: #8b8195; }
.topup-page .account-avatar svg { width: 19px; height: 19px; }
.topup-page .account-copy { min-width: 0; flex: 1; }
.topup-page .account-kicker { color: var(--muted); font-size: 11px; }
.topup-page .account-panel p { margin: 3px 0 0; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.topup-page .account-panel #order-account { color: var(--muted); font-size: 11px; font-weight: 400; }
.topup-page .account-note { color: var(--muted); font-size: 11px; }
.topup-page .checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 24px; align-items: start; }
.topup-page .checkout-main { min-width: 0; }
.topup-page .checkout-steps { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 0 23px; padding: 0 8px; list-style: none; }
.topup-page .checkout-steps li { display: flex; align-items: center; gap: 9px; color: #8b8792; font-size: 12px; white-space: nowrap; }
.topup-page .checkout-steps li + li::before { content: ''; width: clamp(12px, 3vw, 48px); height: 1px; background: #e3e1e8; margin-right: 16px; }
.topup-page .checkout-steps li > span { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid #e3e1e8; border-radius: 50%; background: var(--surface); font-size: 11px; }
.topup-page .checkout-steps li[aria-current] { color: var(--primary); font-weight: 600; }
.topup-page .checkout-steps li[aria-current] > span { color: #fff; border-color: var(--primary); background: var(--primary); }
.topup-page .checkout-steps .is-complete > span { color: var(--primary); background: #f9eaf1; border-color: #ebd2dd; }
.topup-page .panel { padding: 28px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 4px 18px #24283b03; backdrop-filter: none; }
.topup-page .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.topup-page .section-kicker { color: var(--muted); font-size: 11px; }
.topup-page .section-heading h2 { margin: 7px 0 0; font-size: 20px; font-weight: 650; letter-spacing: -.03em; }
.topup-page .heading-flower { color: #c292a7; font-size: 34px; }
.topup-page .campaign-note { margin: 22px 0; padding: 12px 15px; color: #926a3f; background: #fcf6ec; border: 1px solid #f0e6d6; border-radius: 9px; font-size: 11px; line-height: 1.9; }
.topup-page #order-form { margin-top: 26px; }
.topup-page .campaign-note:not(.hidden) + #order-form { margin-top: 0; }
.topup-page fieldset { min-width: 0; margin-bottom: 26px; }
.topup-page legend { margin-bottom: 14px; padding: 0; font-size: 13px; font-weight: 600; }
.topup-page legend > span { margin-left: 10px; color: var(--muted); font-size: 11px; font-weight: 400; }
.topup-page .amount-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.topup-page .amount { position: relative; align-content: center; justify-items: center; min-height: 116px; padding: 13px 8px; gap: 8px; border: 1px solid #e7e6ed; border-radius: 10px; background: var(--surface); }
.topup-page .amount strong { font-size: 25px; font-weight: 600; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.topup-page .amount-currency { margin-right: 3px; color: #89818c; font-size: 13px; font-weight: 400; }
.topup-page .amount small { font-size: 11px; }
.topup-page .amount-tag { color: #8a8290; font-size: 10px; }
.topup-page .amount-tag.vip-tag { color: #926a3f; }
@media (min-width: 1001px) {
  .topup-page .amount:last-child:nth-child(4n + 3) { grid-column: span 2; }
}
.topup-page .choice { min-width: 0; min-height: 75px; gap: 11px; padding: 15px; border: 1px solid #e7e6ed; border-radius: 10px; background: var(--surface); }
.topup-page .choice:hover, .topup-page .amount:hover { background: #fdf9fb; border-color: #d4a8bc; box-shadow: none; }
.topup-page .choice.selected, .topup-page .amount.selected { border-color: #b66c8b; background: #fcf3f7; box-shadow: 0 0 0 1px #b66c8b22; }
.topup-page .amount.selected strong { color: var(--primary); }
.topup-page .choice:focus-within, .topup-page .amount:focus-within { outline: none; }
.topup-page .choice:has(input:focus-visible), .topup-page .amount:has(input:focus-visible) { outline: 3px solid var(--primary); outline-offset: 3px; }
.topup-page .pay-icon { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px; font-size: 19px; font-weight: 650; }
.topup-page .pay-icon.alipay { color: #2778c8; background: #eaf3ff; }
.topup-page .pay-icon.wechat { color: #309063; background: #e9f6ee; }
.topup-page .payment-copy { display: grid; min-width: 0; gap: 6px; }
.topup-page .payment-copy strong { font-size: 13px; font-weight: 600; }
.topup-page .payment-copy small { font-size: 10px; }
.topup-page .choice .choice-check { display: block; flex: 0 0 15px; height: 15px; margin-left: auto; border: 1px solid #dcd8e0; border-radius: 50%; background: var(--surface); }
.topup-page .choice.selected .choice-check { border: 5px solid var(--primary); }
.topup-page .checkout-total { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; border-top: 1px solid var(--line); }
.topup-page .total-label { color: #686470; font-size: 12px; }
.topup-page .total-price { display: flex; align-items: baseline; gap: 4px; margin-top: 6px; color: var(--primary); font-variant-numeric: tabular-nums; }
.topup-page .total-price > span { font-size: 18px; }
.topup-page .total-price strong { font-size: 36px; font-weight: 600; letter-spacing: -.045em; line-height: 1.2; }
.topup-page .total-detail { text-align: right; }
.topup-page .total-detail p { margin: 0 0 7px; font-size: 12px; color: #686470; }
.topup-page .total-detail strong { color: var(--ink); font-weight: 600; }
.topup-page #selected-saving { color: var(--primary); font-size: 11px; }
.topup-page .primary { min-height: 48px; padding: 13px 20px; border: 1px solid var(--primary); border-radius: 9px; color: #fff; background: var(--primary); box-shadow: 0 4px 8px #a3496b14; font-size: 14px; font-weight: 600; }
.topup-page .primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); box-shadow: 0 5px 12px #a3496b24; }
.topup-page .secondary { padding: 11px 15px; border: 1px solid #e7cbd7; border-radius: 8px; color: var(--primary); background: #fcf3f7; font-size: 12px; font-weight: 550; }
.topup-page .secondary:hover { background: #f8e8ef; }
.topup-page .account-panel .secondary { flex-shrink: 0; }
.topup-page .form-note, .topup-page .direct-pay-tip { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.9; text-align: center; }
.topup-page .link-button { color: #74707c; background: transparent; font-size: 12px; font-weight: 500; }
.topup-page .link-button:hover { color: var(--primary); background: #fcf7fa; }
.topup-page .checkout-aside { padding-top: 48px; }
.topup-page .guide-card { padding: 26px 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.topup-page .guide-kicker { color: var(--primary); font-size: 11px; font-weight: 550; }
.topup-page .guide-card h2 { margin: 11px 0 12px; font-size: 17px; font-weight: 650; }
.topup-page .guide-intro { color: var(--muted); font-size: 12px; line-height: 1.85; }
.topup-page .guide-list { margin: 27px 0 25px; padding: 0; list-style: none; }
.topup-page .guide-list li { display: flex; gap: 12px; margin-top: 23px; }
.topup-page .guide-list li > span { display: grid; place-items: center; flex: 0 0 25px; height: 25px; border: 1px solid #ebe7ec; border-radius: 7px; color: #9a8190; font-size: 10px; }
.topup-page .guide-list h3 { margin: 3px 0 6px; font-size: 12px; font-weight: 600; }
.topup-page .guide-list p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.9; }
.topup-page .guide-link { display: flex; align-items: center; justify-content: space-between; padding-top: 18px; border-top: 1px solid var(--line); color: var(--primary); font-size: 12px; font-weight: 550; }
.topup-page .help-note { display: flex; align-items: flex-start; gap: 10px; padding: 19px 12px; color: #85828e; }
.topup-page .help-note svg { flex: 0 0 16px; height: 16px; margin-top: 3px; }
.topup-page .help-note p { margin: 0; font-size: 10px; line-height: 1.9; }
.topup-page .order-head { padding-bottom: 20px; }
.topup-page .order-head strong { font-size: 15px; font-weight: 600; letter-spacing: .07em; }
.topup-page .status { border-radius: 6px; padding: 6px 9px; font-size: 11px; font-weight: 500; }
.topup-page .waiting-payment, .topup-page .reviewing { color: #967142; background: #fbf4e7; }
.topup-page .qr-wrap { padding: 27px 0 22px; }
.topup-page .qr-wrap > p { font-size: 13px; }
.topup-page .qr-wrap .price { margin: 10px 0 6px; font-size: 43px; font-weight: 600; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.topup-page .currency { margin-right: 4px; font-size: 23px; }
.topup-page .qr-wrap .credit-note { font-size: 12px; }
.topup-page .qr-frame { width: min(292px, 100%); padding: 12px; margin: 24px auto; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.topup-page .qr-frame img { width: 100%; max-height: 380px; border-radius: 6px; box-shadow: none; }
.topup-page .qr-retry { display: block; margin: -14px auto 20px; }
.topup-page .qr-retry.hidden { display: none; }
.topup-page .payment-remark { display: grid; gap: 8px; padding: 16px; border: 1px solid #efe3cf; border-radius: 10px; background: #fdf8ef; }
.topup-page .payment-remark > span { color: #8a6b41; font-size: 12px; }
.topup-page .payment-remark strong { color: #785b34; font-size: 21px; letter-spacing: .12em; }
.topup-page .payment-remark small { color: #8d806f; font-size: 11px; }
.topup-page .direct-pay { margin-bottom: 12px; }
.topup-page #direct-pay-tip { margin-bottom: 15px; }
.topup-page #cancel-button { margin: 8px auto 0; }
.topup-page .center-state { padding-top: 35px; }
.topup-page .center-state h2, .topup-page .loading-panel h2 { margin: 20px 0 12px; font-size: 22px; font-weight: 650; letter-spacing: -.03em; }
.topup-page .center-state > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.9; }
.topup-page .center-state > .form-note { margin-top: 20px; font-size: 11px; }
.topup-page .spinner { width: 34px; height: 34px; border-width: 3px; border-color: #f1e6ed; border-top-color: var(--primary); }
.topup-page .summary { margin-top: 27px; padding: 8px 18px; border-radius: 10px; background: var(--page-bg); font-size: 13px; }
.topup-page .summary div { padding: 14px 0; }
.topup-page .summary dd { font-weight: 600; }
.topup-page .success-icon { color: #48816a; background: #edf7f1; font-weight: 500; }
.topup-page .error-icon { color: #af6374; background: #fff0f3; font-weight: 500; }
.topup-page .code-box { border: 1px dashed #d9b8c8; border-radius: 10px; background: #fcf4f8; padding: 14px; margin: 24px 0 18px; }
.topup-page .code-box code { min-width: 0; color: #89516b; font-size: 14px; line-height: 1.7; }
.topup-page .code-box button { flex-shrink: 0; padding: 9px 12px; border-radius: 7px; font-size: 12px; }
.topup-page .redeem-link { display: block; text-align: center; }
.topup-page #finish-button { margin-top: 8px; }
.topup-page #retry-button { margin-top: 24px; }
.topup-page .center-state .vip-result { margin-top: 18px; padding: 12px; border: 1px solid #e8dcc6; border-radius: 8px; color: #876736; background: #fbf6ec; font-size: 12px; }
.topup-page .toast { margin: 18px 0 0; padding: 15px 18px; border: 1px solid #efced6; border-radius: 10px; color: #a04459; background: #fff4f5; font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
.topup-page .loading-panel { min-height: 340px; display: grid; align-content: center; text-align: center; }
.topup-page .loading-panel p { color: var(--muted); font-size: 12px; }
.topup-page footer { display: flex; align-items: center; gap: 15px; margin-top: 42px; padding: 25px 0 30px; border-top: 1px solid var(--line); color: #7c7f8b; font-size: 11px; }
.topup-page .footer-brand { color: #666572; font-size: 18px; font-weight: 750; letter-spacing: -.7px; }
.topup-page .footer-brand span { color: #90929c; font-size: 9px; font-weight: 500; letter-spacing: 1px; }
.topup-page footer p { margin: 0; }
.topup-page footer > a { margin-left: auto; }
.topup-page footer a:hover { color: var(--primary); }
@media (max-width: 1000px) and (min-width: 721px) {
  .topup-page .checkout-layout { grid-template-columns: minmax(0, 1fr) 252px; gap: 18px; }
  .topup-page .panel, .topup-page .guide-card { padding: 22px; }
  .topup-page .amount-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .topup-page .amount:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
  .topup-page .choice-grid { grid-template-columns: 1fr; }
  .topup-page .checkout-steps li + li::before { display: none; }
}
@media (max-width: 720px) {
  .topup-page .nav-inner, .topup-page .shell { width: calc(100% - 40px); }
  .topup-page .nav-inner { height: 68px; }
  .topup-page nav { display: none; }
  .topup-page .hero { min-height: 218px; padding: 32px 0; align-items: center; gap: 8px; }
  .topup-page .wallet-art { flex-basis: 150px; transform: scale(.85); transform-origin: right center; }
  .topup-page .wallet-body { left: -16px; }
  .topup-page .wallet-card { left: 3px; }
  .topup-page .wallet-spark { left: -24px; }
  .topup-page .account-panel { margin-bottom: 24px; padding: 14px 16px; }
  .topup-page .account-note { display: none; }
  .topup-page .checkout-layout { grid-template-columns: 1fr; gap: 20px; }
  .topup-page .checkout-aside { padding-top: 0; }
  .topup-page .checkout-steps { gap: 8px; padding: 0; }
  .topup-page .checkout-steps li + li::before { display: none; }
  .topup-page .panel { padding: 24px; }
  .topup-page .amount-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .topup-page .amount:last-child:nth-child(3n + 1) { grid-column: 1 / -1; grid-template-columns: 1fr auto; justify-items: start; min-height: 80px; padding: 14px 18px; gap: 5px; }
  .topup-page .amount:last-child:nth-child(3n + 1) .amount-tag { grid-column: 2; grid-row: 1 / 3; align-self: center; padding: 5px 8px; border-radius: 5px; background: #faf5eb; }
  .topup-page .amount:last-child:nth-child(3n + 1) strong { grid-column: 1; grid-row: 1; }
  .topup-page .amount:last-child:nth-child(3n + 1) small { grid-column: 1; grid-row: 2; }
  .topup-page .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .topup-page .guide-intro br { display: none; }
  .topup-page .help-note { padding-bottom: 0; }
  .topup-page footer { margin-top: 28px; }
}
@media (max-width: 440px) {
  .topup-page .nav-inner, .topup-page .shell { width: calc(100% - 32px); }
  .topup-page .hero { min-height: 207px; }
  .topup-page .hero-copy { flex: 1; }
  .topup-page .hero .eyebrow { font-size: 10px; letter-spacing: 0; gap: 6px; }
  .topup-page .hero .hero-description { margin-top: 12px; font-size: 12px; }
  .topup-page .mobile-break { display: block; }
  .topup-page .wallet-art { flex-basis: 92px; transform: scale(.67); }
  .topup-page .wallet-body { left: -60px; }
  .topup-page .wallet-card { left: -41px; }
  .topup-page .wallet-spark { left: -61px; }
  .topup-page .wallet-coin { right: -12px; }
  .topup-page .panel { padding: 20px; }
  .topup-page .section-heading h2 { font-size: 19px; }
  .topup-page .checkout-steps li { gap: 6px; font-size: 11px; }
  .topup-page .checkout-steps li > span { width: 23px; height: 23px; }
  .topup-page legend > span { margin-left: 6px; font-size: 10px; }
  .topup-page .amount { min-height: 109px; }
  .topup-page .amount strong { font-size: 24px; }
  .topup-page .amount-grid { gap: 8px; }
  .topup-page .choice { gap: 7px; padding: 12px 9px; }
  .topup-page .pay-icon { flex-basis: 28px; width: 28px; height: 28px; border-radius: 7px; font-size: 17px; }
  .topup-page .payment-copy strong { font-size: 12px; }
  .topup-page .payment-copy small { font-size: 9px; }
  .topup-page .choice .choice-check { flex-basis: 12px; height: 12px; }
  .topup-page .choice.selected .choice-check { border-width: 4px; }
  .topup-page .center-state h2 { font-size: 20px; }
  .topup-page .center-state > p { font-size: 12px; }
  .topup-page footer { flex-wrap: wrap; gap: 10px; }
  .topup-page footer p { font-size: 10px; }
}
@media (max-width: 350px) {
  .topup-page .choice-grid { grid-template-columns: 1fr; }
  .topup-page .total-detail p, .topup-page #selected-saving { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .topup-page *, .topup-page *::before, .topup-page *::after { transition: none !important; animation: none !important; }
}
.topup-page .history-panel { margin-top: 28px; padding: 28px; border-color: #efe5df; border-radius: 24px; background: linear-gradient(145deg, #fffdfb, #fdf9f5); box-shadow: 0 10px 32px #9b786208; color: #514a4c; }
.topup-page .history-panel, .topup-page .history-dialog { font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
.topup-page .history-heading-copy { display: flex; align-items: center; gap: 12px; }
.topup-page .history-mark, .topup-page .history-dialog-mark { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 17px; color: #a76d83; background: #f7eaf0; font-size: 28px; }
.topup-page .history-panel .section-kicker { color: #897b7d; letter-spacing: .03em; }
.topup-page .history-panel .section-heading h2 { margin-top: 5px; font-size: 21px; font-weight: 600; }
.topup-page .history-panel .link-button { border-radius: 999px; padding: 10px 12px; }
.topup-page .history-tabs { display: inline-flex; gap: 4px; margin: 25px 0 20px; padding: 4px; border-radius: 999px; background: #f2ece8; }
.topup-page .history-tabs button { min-height: 36px; padding: 8px 18px; border: 0; border-radius: 999px; background: transparent; color: #7c6f70; font: inherit; font-size: 12px; }
.topup-page .history-tabs button[aria-pressed="true"] { color: #965d74; background: #fffdfb; box-shadow: 0 2px 7px #7959500b; }
.topup-page .history-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 25px 0 20px; flex-wrap: wrap; }
.topup-page .history-toolbar .history-tabs { margin: 0; }
.topup-page #history-clear { color: #9b7888; font-size: 11px; padding: 10px 9px; }
.topup-page #history-clear:disabled { cursor: default; }
.topup-page .history-retention { margin: -4px 0 18px; padding: 12px 15px; border-radius: 14px; background: #f6eee9; color: #8b767e; font-size: 11px; line-height: 1.9; }
.topup-page .history-controls { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 13px 10px; align-items: end; padding: 16px; border-radius: 18px; background: #f6f1ed; }
.topup-page .history-controls label { min-width: 0; }
.topup-page .history-controls label:first-child { grid-column: 1 / -1; }
.topup-page .history-controls label, .topup-page .history-pagination label { color: #7e7375; font-size: 11px; }
.topup-page .history-controls input, .topup-page .history-controls select, .topup-page .history-pagination select { display: block; width: 100%; min-height: 40px; margin-top: 7px; padding: 10px 12px; border: 1px solid #ece3de; border-radius: 12px; background: #fffdfb; color: #645c60; font: inherit; font-size: 12px; }
.topup-page .history-controls input::placeholder { color: #9b8f91; }
.topup-page .history-controls input:focus-visible, .topup-page .history-controls select:focus-visible, .topup-page .history-pagination select:focus-visible { outline: 2px solid #bc879e; outline-offset: 2px; }
.topup-page .history-panel .secondary, .topup-page .history-dialog .secondary { min-height: 40px; border: 1px solid #ecdbe2; border-radius: 999px; padding: 10px 17px; color: #995e77; background: #f7edf1; }
.topup-page .history-panel .secondary:hover, .topup-page .history-dialog .secondary:hover { background: #f0dfe7; }
.topup-page #history-message { display: flex; flex-wrap: wrap; gap: 7px 14px; margin: 18px 2px 0; color: #84787b; text-align: left; font-size: 11px; }
.topup-page .history-count { display: inline-flex; align-items: center; gap: 6px; }
.topup-page .history-count::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #c9b4bd; }
.topup-page .history-list { display: grid; gap: 14px; margin-top: 16px; }
.topup-page .history-card { padding: 20px; border: 1px solid #f0e7e1; border-radius: 20px; background: #fffdfa; box-shadow: 0 4px 16px #86605204; overflow-wrap: anywhere; }
.topup-page .history-card header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.topup-page .history-order-id { color: #887b7e; font-size: 11px; letter-spacing: .06em; font-weight: 500; }
.topup-page .history-status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; font-size: 10px; font-weight: 500; color: #89724d; background: #f8f0e1; }
.topup-page .history-status::before { content: ''; width: 5px; height: 5px; background: currentColor; border-radius: 50%; }
.topup-page .history-status.pending_review { color: #927089; background: #f5eaf2; }
.topup-page .history-status.confirmed { color: #5a816e; background: #edf5ef; }
.topup-page .history-status.rejected { color: #9e7179; background: #faeeee; }
.topup-page .history-overview { display: flex; align-items: center; gap: 11px; margin: 22px 0 19px; }
.topup-page .history-overview .pay-icon { border-radius: 13px; width: 40px; height: 40px; flex-basis: 40px; font-size: 17px; }
.topup-page .history-payment-copy, .topup-page .history-amount { display: grid; gap: 6px; }
.topup-page .history-payment-copy strong { font-size: 13px; font-weight: 550; }
.topup-page .history-payment-copy span, .topup-page .history-amount span { color: #908487; font-size: 10px; }
.topup-page .history-amount { margin-left: auto; flex-shrink: 0; text-align: right; }
.topup-page .history-amount strong { color: #715c66; font-size: 24px; line-height: 1; font-weight: 500; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.topup-page .history-card p { color: #877a7d; font-size: 11px; line-height: 1.9; }
.topup-page .history-card details { padding-top: 13px; border-top: 1px solid #f3ede8; }
.topup-page .history-card summary, .topup-page .history-help summary { width: fit-content; cursor: pointer; color: #887b80; font-size: 11px; list-style: none; }
.topup-page .history-card summary::after, .topup-page .history-help summary::after { content: '+'; margin-left: 9px; color: #ae8b9a; }
.topup-page .history-card details[open] summary::after, .topup-page .history-help[open] summary::after { content: '−'; }
.topup-page .history-card summary::-webkit-details-marker, .topup-page .history-help summary::-webkit-details-marker { display: none; }
.topup-page .history-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.topup-page .history-actions .history-manage { margin-left: -10px; color: #918388; font-size: 11px; }
.topup-page .history-pagination { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 22px; color: #8a7b80; font-size: 11px; }
.topup-page .history-pagination select { display: inline-block; width: auto; min-height: 36px; margin: 0 0 0 5px; padding: 7px; }
.topup-page .history-pagination > span { margin-right: auto; }
.topup-page .history-pagination .secondary { min-height: 36px; padding: 8px 12px; font-size: 11px; }
.topup-page .history-pagination button:disabled { cursor: default; opacity: .4; }
.topup-page .history-footnote { margin: 23px 0 9px; color: #8b7c80; font-size: 10px; line-height: 1.9; }
.topup-page .history-help p { margin-bottom: 0; color: #8b7c80; font-size: 10px; line-height: 1.9; }
.topup-page .history-empty { padding: 32px 16px; border-radius: 20px; background: #f7f2ee; text-align: center; }
.topup-page .history-empty strong { font-size: 14px; font-weight: 500; color: #7c6571; }
.topup-page .history-empty p { color: #8b7c80; font-size: 11px; line-height: 1.9; }
.topup-page .history-message-error, .topup-page #history-message.history-message-error { color: #a04459; }
.admin-page { --ink: #574e53; --muted: #8b7e83; --line: #eee3dc; background: radial-gradient(ellipse at 4% 0%, #f8e9ed, transparent 40rem), #fcf8f3; font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
.admin-page button, .admin-page input, .admin-page select { font-family: inherit; }
.admin-page .admin-shell { width: min(1040px, calc(100% - 40px)); padding-top: 40px; }
.admin-page .hero { margin-bottom: 30px; }
.admin-page .hero h1 { font-size: 29px; font-weight: 600; letter-spacing: -.03em; }
.admin-page .hero p { font-size: 12px; }
.admin-page .hero .eyebrow { font-size: 10px; letter-spacing: .1em; font-weight: 500; margin-bottom: 8px; }
.admin-page .brand-mark { flex-basis: 54px; width: 54px; height: 54px; border: 0; border-radius: 20px; background: #f3e0e7; color: #a5778b; font-family: inherit; font-size: 23px; font-weight: 500; box-shadow: none; }
.admin-page .panel { border-color: #ece2dc; box-shadow: 0 8px 30px #8d6b7205; background: #fffdfa; }
.admin-page .primary, .admin-page .secondary, .admin-page .neutral-button, .admin-page .quiet-button, .admin-page .link-button { min-height: 40px; border-radius: 999px; padding: 10px 16px; font-size: 12px; font-weight: 500; transition: background .18s, border-color .18s; }
.admin-page .primary { color: #88556b; background: #f2dfe8; border-color: #e9cfdc; box-shadow: none; }
.admin-page .primary:hover { background: #ecd2df; }
.admin-page .secondary { color: #967047; background: #f5ead5; }
.admin-page .quiet-button { color: #8a7a80; background: #fffaf7; border-color: #ebe1db; }
.admin-page .neutral-button { color: #8a7379; background: #f5efed; border-color: #ebe0dc; }
.admin-page .link-button { color: #99848c; }
.admin-page button:disabled { cursor: default; opacity: .5; }
.admin-page .field > span { font-size: 12px; font-weight: 500; }
.admin-page .field input, .admin-page .field select { width: 100%; min-width: 0; min-height: 44px; border: 1px solid #e8ded8; border-radius: 14px; background: #fffdfa; padding: 11px 14px; color: #665b62; font-size: 13px; }
.admin-page .field input::placeholder { color: #a2959a; }
.admin-page .field select:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.admin-page .admin-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.admin-page .admin-overview > div { display: grid; gap: 10px; padding: 22px; border: 1px solid #eee1e5; border-radius: 22px; background: #fffafc; }
.admin-page .admin-overview > div:nth-child(2) { border-color: #eee5d7; background: #fffcf5; }
.admin-page .admin-overview > div:nth-child(3) { border-color: #e2eae2; background: #f9fcf8; }
.admin-page .admin-overview span { color: #89717e; font-size: 12px; }
.admin-page .admin-overview strong { color: #8f667b; font-size: 32px; line-height: 1.2; font-weight: 500; font-variant-numeric: tabular-nums; }
.admin-page .admin-overview > div:nth-child(2) strong { color: #a18a5c; }
.admin-page .admin-overview > div:nth-child(3) strong { color: #718c78; }
.admin-page .admin-overview small { color: #97888d; font-size: 10px; }
.admin-page .toolbar { margin-top: 28px; }
.admin-page .toolbar h2 { font-size: 19px; font-weight: 550; }
.admin-page .toolbar p { font-size: 11px; line-height: 1.8; }
.admin-page .count { width: auto; min-width: 23px; height: 23px; padding: 0 7px; color: #9b6c81; background: #f1dfe8; font-size: 11px; vertical-align: 2px; }
.admin-page .order-filters { width: fit-content; max-width: 100%; padding: 5px; border: 0; border-radius: 999px; background: #f1eae6; gap: 3px; }
.admin-page .filter-button { padding: 9px 14px; border-radius: 999px; font-size: 12px; font-weight: 500; }
.admin-page .filter-button.active { color: #985e79; background: #fffdfa; box-shadow: 0 2px 8px #71566609; }
.admin-page .filter-button span, .admin-page .filter-button.active span { background: #f3e9ee; color: #967687; font-size: 10px; }
.admin-page .admin-search-row { display: grid; grid-template-columns: minmax(0, 1fr) 165px; gap: 14px; align-items: end; padding: 18px; border-radius: 20px; background: #f3eeea; }
.admin-page .order-search { margin: 0; }
.admin-page .order-help { margin: 13px 3px 18px; font-size: 11px; line-height: 1.9; }
.admin-page .admin-list-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 46px; margin-bottom: 10px; font-size: 11px; color: #93838a; }
.admin-page .admin-list-heading .quiet-button { min-height: 34px; padding: 7px 12px; font-size: 10px; }
.admin-page .order-list { gap: 16px; }
.admin-page .order-card { padding: 23px; border-color: #ede2dc; border-radius: 23px; background: #fffdfa; box-shadow: 0 5px 20px #80646c04; overflow-wrap: anywhere; }
.admin-page .admin-order-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.admin-page .pay-icon { width: 42px; flex: 0 0 42px; height: 44px; border-radius: 15px; font-size: 18px; font-weight: 500; }
.admin-page .pay-icon.wechat { background: #eaf5ee; color: #5b977c; }
.admin-page .pay-icon.alipay { background: #eaf1fa; color: #6589b1; }
.admin-page .order-card h3 { margin: 0 0 7px; font-size: 14px; font-weight: 500; }
.admin-page .admin-order-identity h3 > span { display: inline-block; margin-left: 10px; font-size: 22px; color: #7c616e; font-weight: 500; font-variant-numeric: tabular-nums; }
.admin-page .meta { font-size: 11px; color: #95868d; }
.admin-page .admin-order-number { color: #75646e; font-weight: 500; letter-spacing: .05em; }
.admin-page .admin-badges { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 5px; }
.admin-page .status { padding: 7px 11px; font-size: 11px; font-weight: 500; }
.admin-page .waiting-payment { background: #f7efdf; color: #a38a58; }
.admin-page .reviewing { background: #f4e6ef; color: #986f8b; }
.admin-page .confirmed { background: #eaf3ec; color: #678970; }
.admin-page .rejected { background: #f7e9eb; color: #a77983; }
.admin-page .archived { background: #f1eeeb; color: #9a8b87; }
.admin-page .admin-order-summary { display: flex; justify-content: space-between; gap: 14px; margin: 19px 0; font-size: 12px; color: #7d6d75; }
.admin-page .admin-order-summary > span:last-child { white-space: nowrap; color: #95838c; }
.admin-page .admin-related { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding: 13px 16px; background: #fbf3e5; border-radius: 15px; color: #99815f; font-size: 11px; line-height: 1.9; }
.admin-page .admin-related strong { font-weight: 550; }
.admin-page .admin-related .link-button { flex-shrink: 0; padding: 5px 0; color: #95704f; font-size: 11px; }
.admin-page .admin-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px; border-radius: 16px; background: #f8f4f0; }
.admin-page .admin-progress > div { display: grid; gap: 8px; color: #a39599; }
.admin-page .admin-progress span { font-size: 11px; }
.admin-page .admin-progress span::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #dfd6d8; vertical-align: 1px; }
.admin-page .admin-progress .done span::before { background: #bd9bad; }
.admin-page .admin-progress .confirmed-step span::before { background: #8fac95; }
.admin-page .admin-progress strong { font-size: 11px; font-weight: 400; }
.admin-page .admin-progress .done { color: #897581; }
.admin-page .admin-progress .confirmed-step { color: #718b79; }
.admin-page .admin-order-details { margin: 17px 0; }
.admin-page .admin-order-details summary { width: fit-content; cursor: pointer; font-size: 11px; color: #99828f; }
.admin-page .order-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 14px 0 0; }
.admin-page .order-facts div { min-width: 0; background: #faf6f3; border-radius: 13px; }
.admin-page .order-facts strong { font-size: 11px; font-weight: 500; }
.admin-page .order-actions { padding-top: 14px; border-top: 1px solid #f1e9e3; gap: 8px; }
.admin-page .order-actions .quiet-button { margin-right: auto; }
.admin-page .admin-pagination { display: flex; align-items: center; gap: 9px; margin: 23px 0; color: #97828e; font-size: 12px; }
.admin-page .admin-pagination > span { margin-right: auto; }
.admin-page .admin-details { margin-top: 22px; }
.admin-page .admin-details > summary { font-size: 14px; font-weight: 500; color: #8b7682; }
.admin-page .details-content > p, .admin-page #notification-list p, .admin-page #device-list p { color: #91818a; font-size: 12px; line-height: 1.9; }
.admin-page #notification-list pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 12px; }
.admin-page .toast { font-size: 12px; line-height: 1.8; border-radius: 16px; }
@media (max-width: 620px) {
  .admin-page .admin-shell { width: calc(100% - 28px); padding-top: 26px; }
  .admin-page .hero { gap: 12px; align-items: center; }
  .admin-page .hero h1 { font-size: 23px; }
  .admin-page .hero p { font-size: 11px; }
  .admin-page .brand-mark { flex-basis: 44px; width: 44px; height: 48px; border-radius: 16px; }
  .admin-page .admin-overview { gap: 8px; }
  .admin-page .admin-overview > div { padding: 15px 10px; border-radius: 17px; gap: 8px; }
  .admin-page .admin-overview strong { font-size: 26px; }
  .admin-page .admin-overview span { font-size: 11px; }
  .admin-page .admin-overview small { font-size: 9px; line-height: 1.7; }
  .admin-page .toolbar { gap: 10px; }
  .admin-page .toolbar-actions { flex-shrink: 0; gap: 2px; }
  .admin-page .toolbar-actions button { padding: 9px 12px; }
  .admin-page .order-filters { width: 100%; border-radius: 18px; flex-wrap: wrap; }
  .admin-page .filter-button { flex: 1 0 28%; justify-content: center; padding: 9px 8px; font-size: 11px; }
  .admin-page .admin-search-row { grid-template-columns: minmax(0, 1fr); padding: 15px; }
  .admin-page .order-card { padding: 17px; border-radius: 20px; }
  .admin-page .order-card-top { flex-wrap: wrap; }
  .admin-page .admin-badges { margin-left: auto; }
  .admin-page .admin-order-summary { flex-wrap: wrap; gap: 7px; line-height: 1.8; }
  .admin-page .admin-related { display: block; padding: 12px; }
  .admin-page .admin-related .link-button { display: block; }
  .admin-page .admin-progress { padding: 13px 10px; gap: 8px; }
  .admin-page .admin-progress strong { font-size: 10px; line-height: 1.6; }
  .admin-page .admin-progress span { font-size: 10px; line-height: 1.6; }
  .admin-page .order-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-page .order-actions { display: flex; flex-wrap: wrap; }
  .admin-page .order-actions button { padding: 10px 13px; font-size: 11px; }
  .admin-page .admin-list-heading { align-items: flex-start; flex-wrap: wrap; }
  .admin-page .admin-details summary { padding: 18px; }
  .admin-page .admin-details .details-content { padding: 0 18px 20px; }
}
.topup-page .history-dialog { width: min(420px, calc(100% - 32px)); max-height: calc(100% - 40px); padding: 28px; border: 1px solid #eadfd8; border-radius: 26px; color: #64565e; background: #fffaf6; box-shadow: 0 24px 90px #52394726; }
.topup-page .history-dialog::backdrop { background: #493d4859; backdrop-filter: blur(4px); }
.topup-page .history-dialog h2 { margin: 20px 0 12px; font-size: 20px; font-weight: 600; }
.topup-page .history-dialog p { font-size: 13px; line-height: 1.9; }
.topup-page .history-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.topup-page .history-dialog .quiet-button { border-radius: 999px; font-size: 12px; font-weight: 500; background: transparent; }
@media (max-width: 440px) {
  .topup-page .history-panel { padding: 18px; border-radius: 22px; }
  .topup-page .history-heading-copy { gap: 9px; }
  .topup-page .history-mark { width: 35px; height: 38px; border-radius: 14px; }
  .topup-page .history-panel .section-kicker { font-size: 9px; }
  .topup-page .history-panel .section-heading h2 { font-size: 19px; }
  .topup-page #history-refresh { padding: 8px 0 8px 6px; font-size: 10px; white-space: nowrap; }
  .topup-page .history-controls { padding: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .topup-page .history-controls > button { grid-column: 1 / -1; }
  .topup-page .history-card { padding: 15px; }
  .topup-page .history-overview { gap: 8px; }
  .topup-page .history-overview .pay-icon { width: 30px; height: 34px; flex-basis: 30px; border-radius: 11px; font-size: 15px; }
  .topup-page .history-payment-copy span { max-width: 110px; line-height: 1.5; }
  .topup-page .history-amount strong { font-size: 22px; }
  .topup-page .history-pagination > span { flex-basis: 100%; margin-bottom: 4px; }
  .topup-page .history-pagination label { margin-right: auto; }
}



/* Optional recharge coupon: compact, unchecked by default. */
.recharge-coupon{display:flex;align-items:center;gap:10px;padding:12px 14px;margin-top:12px;border:1px dashed #ad92b5;border-radius:14px;cursor:pointer;text-align:left;background:var(--card-bg,#fff8ef);color:var(--text,#443646);font-size:13px;max-width:340px}
.recharge-coupon.hidden{display:none!important}.recharge-coupon input{width:18px;height:18px;accent-color:#bc8543;flex-shrink:0}.recharge-coupon span{display:grid;gap:4px}.recharge-coupon small{font-size:11px;opacity:.75}.recharge-coupon b{white-space:nowrap;margin-left:auto;color:#aa642c}.recharge-coupon.is-selected{border-style:solid;border-color:#e6ae69;background:#f3c98e24}
html[data-ovo-owner-halloween="1"] .recharge-coupon{background:#392b45;color:#f5e7ed}html[data-ovo-owner-halloween="1"] .recharge-coupon b{color:#f1c07d}
.checkout-total{gap:16px;align-items:center!important;padding-bottom:20px!important;margin-bottom:0!important}.checkout-total .total-detail{max-width:100%}#copy-payment-amount{margin:10px auto;display:block}#copy-payment-amount.hidden{display:none}
@media(max-width:540px){.checkout-total{flex-wrap:wrap;gap:12px}.checkout-total .total-detail{flex:1;min-width:190px}.recharge-coupon{padding:10px;margin-top:8px}}

/* Double Eleven: the original cream checkout, with small berry-red gift seals. */
.topup-page .festival-banner { display:flex; align-items:center; justify-content:space-between; gap:20px; margin:24px 0 14px; padding:22px 24px; border:1px solid #ecd0ce; border-radius:14px; background:linear-gradient(115deg,#fff4e9,#fbe8ec); color:#86434e; }
.topup-page .festival-eyebrow { font-size:10px; font-weight:700; letter-spacing:2px; color:#b45562; }
.topup-page .festival-banner h3 { margin:10px 0 8px; font-size:22px; font-weight:650; letter-spacing:-.6px; }
.topup-page .festival-banner p { margin:0; font-size:11px; color:#a47277; }
.topup-page .festival-date { flex-shrink:0; padding-left:18px; border-left:1px dashed #dbb2b4; text-align:center; }
.topup-page .festival-date strong { display:block; font-size:23px; color:#b64959; letter-spacing:1px; }
.topup-page .festival-date strong span { display:block; margin-top:4px; font-size:11px; letter-spacing:3px; }
.topup-page .festival-date small { display:block; margin-top:10px; color:#966e73; font-size:9px; line-height:1.7; }
.topup-page.double-eleven .amount-grid { gap:16px 12px; padding:3px 2px 0; }
.topup-page .amount.festival-amount { overflow:visible; min-height:143px; gap:7px; border-color:#ecdfdb; background:#fffdf9; border-radius:12px; }
.topup-page .festival-amount .amount-tag { font-size:9px; color:#a18b87; }
.topup-page .festival-amount .vip-tag { color:#956e3e; }
.topup-page .festival-amount strong { color:#725452; font-size:27px; }
.topup-page .festival-amount .festival-gift { color:#ba4d5b; font-size:11px; }
.topup-page .festival-gift b { font-size:15px; font-weight:650; font-variant-numeric:tabular-nums; }
.topup-page .festival-amount small { color:#9b8582; font-size:10px; }
.topup-page .festival-amount.selected { border-color:#c2737f; background:#fff2f1; box-shadow:0 0 0 1px #c2737f26; }
.topup-page .festival-amount.selected strong { color:#a34454; }
.topup-page .gift-burst { position:absolute; right:-7px; top:-10px; z-index:1; display:grid; place-items:center; width:34px; height:34px; color:#fff7e8; background:#bc4c5b; font-size:14px; font-weight:700; line-height:1; transform:rotate(12deg); clip-path:polygon(50% 0%,59% 11%,75% 7%,78% 22%,93% 25%,89% 41%,100% 50%,89% 59%,93% 75%,78% 78%,75% 93%,59% 89%,50% 100%,41% 89%,25% 93%,22% 78%,7% 75%,11% 59%,0% 50%,11% 41%,7% 25%,22% 22%,25% 7%,41% 11%); }
.topup-page.festival-coupon-selected .gift-burst { background:#9c9290; }
.topup-page.festival-coupon-selected .festival-gift { text-decoration:line-through; color:var(--muted); }
.topup-page.double-eleven #selected-saving { color:#b14c60; }
@media(max-width:720px){
 .topup-page .festival-banner { padding:18px 15px; gap:10px; }
 .topup-page .festival-banner h3 { font-size:18px; line-height:1.5; }
 .topup-page .festival-banner h3 span { display:block; white-space:nowrap; }
 .topup-page .festival-date { padding-left:12px; }
 .topup-page .festival-date strong { font-size:21px; }
 .topup-page.double-eleven .amount-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 12px; }
 .topup-page .amount.festival-amount:last-child { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; min-height:102px; justify-items:center; gap:8px; padding:17px 15px; }
 .topup-page .amount.festival-amount:last-child .amount-tag { grid-column:2; grid-row:1; padding:4px 8px; align-self:center; }
 .topup-page .amount.festival-amount:last-child strong { grid-column:1; grid-row:1; }
 .topup-page .amount.festival-amount:last-child .festival-gift { grid-column:1; grid-row:2; }
 .topup-page .amount.festival-amount:last-child small { grid-column:2; grid-row:2; }
}
html.ovo-service.dark .topup-page .festival-banner { background:linear-gradient(115deg,#392d2d,#422932); border-color:#67434e; color:#f4d7d4; }
html.ovo-service.dark .topup-page .festival-banner h3 { color:#f6d8d6; }
html.ovo-service.dark .topup-page .festival-date strong, html.ovo-service.dark .topup-page .festival-eyebrow { color:#efa2ad; }
html.ovo-service.dark .topup-page .festival-banner p, html.ovo-service.dark .topup-page .festival-date small { color:#c69da5; }
html.ovo-service.dark .topup-page .amount.festival-amount { background:#30282d; border-color:#5b434b; }
html.ovo-service.dark .topup-page .festival-amount.selected { background:#482d36; border-color:#c2737f; }
html.ovo-service.dark .topup-page .festival-amount strong { color:#f5d4d7; }
html.ovo-service.dark .topup-page .festival-amount .amount-tag, html.ovo-service.dark .topup-page .festival-amount small { color:#c5a8ae; }
html.ovo-service.dark .topup-page .festival-amount .festival-gift { color:#f1a0ad; }

/* Double Eleven permanent VIP gift badge. */
.topup-page .festival-amount .amount-tag.vip-tag { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:7px 12px; border:1px solid #d9b673; border-radius:9px; color:#785020; background:linear-gradient(120deg,#fff2cd,#f8dfab); font-size:13px; font-weight:750; line-height:1.4; letter-spacing:.1px; white-space:nowrap; box-shadow:0 2px 7px #ae7c2812; }
.topup-page .vip-crown { flex:0 0 17px; width:17px; height:17px; color:#a16a23; }
.topup-page.festival-coupon-selected .festival-amount .amount-tag.vip-tag { opacity:.55; text-decoration:line-through; }
@media(max-width:720px){
 .topup-page .amount.festival-amount:last-child .amount-tag.vip-tag { padding:7px 8px; font-size:12px; gap:4px; border-radius:8px; }
 .topup-page .vip-crown { flex-basis:15px; width:15px; height:15px; }
}
html.ovo-service.dark .topup-page .festival-amount .amount-tag.vip-tag { color:#ffe1a3; background:linear-gradient(120deg,#594224,#493421); border-color:#a17a42; box-shadow:none; }
html.ovo-service.dark .topup-page .vip-crown { color:#efc67b; }

/* BEGIN GENERATED SERVICE THEME — edit ovo-service-theme instead */
/* Shared theme for the standalone customer pages, independent of admin styles. */
html.ovo-service .nav-actions { display: flex; align-items: center; gap: 10px; }
html.ovo-service #theme-mode {
  max-width: 110px; min-height: 36px; padding: 7px 8px;
  border: 1px solid var(--line); border-radius: 8px;
  color: var(--muted); background: var(--surface); font: inherit; font-size: 12px; cursor: pointer;
}
html.ovo-service #theme-mode:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
html.ovo-service.dark, html.ovo-service.dark body {
  color-scheme: dark;
  --ink: #f3e5de; --muted: #c0aca8; --line: #514146;
  --page-bg: #282124; --surface: #30282b; --surface-soft: #3b3134;
  --primary: #e9b5c7; --primary-dark: #f3c9d8;
  --accent-bg: #49333d; --accent-line: #795265; --primary-ink: #472c37;
  --success: #a7d5bb; --success-bg: #293e35; --success-line: #496b58;
  --danger: #f2b2bb; --danger-bg: #472c34; --danger-line: #79515d;
  --warm: #e7c996; --warm-bg: #40362a; --warm-line: #69583f;
  --shadow: 0 10px 30px #120c141a;
  color: var(--ink); background: var(--page-bg);
}
html.ovo-service.dark .site-header { background: #2c2427; }
html.ovo-service.dark .panel,
html.ovo-service.dark .guide-card,
html.ovo-service.dark .rule-card { box-shadow: var(--shadow); }
html.ovo-service.dark :is(.brand-mark, .history-mark, .history-dialog-mark) {
  color: var(--primary); background: var(--accent-bg); border-color: var(--accent-line);
}
html.ovo-service.dark nav a { color: var(--muted); }
html.ovo-service.dark nav a[aria-current],
html.ovo-service.dark nav a:hover { color: var(--primary); background: var(--accent-bg); }
html.ovo-service.dark .console-link { border-color: var(--line); }
html.ovo-service.dark .console-link:hover { background: var(--surface-soft); }
html.ovo-service.dark :is(.account-avatar, .link-button, .reassurance, .help-note, footer, .footer-brand span) { color: var(--muted); }
html.ovo-service.dark .footer-brand { color: var(--ink); }
html.ovo-service.dark .primary,
html.ovo-service.dark .code-box button {
  color: var(--primary-ink); background: var(--primary); border-color: var(--primary); box-shadow: none;
}
html.ovo-service.dark .primary:hover,
html.ovo-service.dark .code-box button:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
html.ovo-service.dark .secondary {
  color: var(--primary); background: var(--accent-bg); border-color: var(--accent-line);
}
html.ovo-service.dark .secondary:hover { background: #59404b; }
html.ovo-service.dark .link-button:hover { color: var(--primary); background: var(--surface-soft); }
html.ovo-service.dark :is(button, a):focus-visible { outline-color: var(--primary); }
html.ovo-service.dark .spinner { border-color: var(--line); border-top-color: var(--primary); }
html.ovo-service.dark :is(.step-number, .guide-list li > span) { color: var(--primary); border-color: var(--line); background: var(--surface-soft); }
html.ovo-service.dark :is(.toast, .error-icon) { color: var(--danger); border-color: var(--danger-line); background: var(--danger-bg); }
html.ovo-service.dark :is(.success-message, .toast.notice, .success-icon, .empty-icon) {
  color: var(--success); background: var(--success-bg); border-color: var(--success-line);
}
html.ovo-service.dark :is(.hero-art, .wallet-art) { background: radial-gradient(ellipse, #51343f70, transparent 70%); }
html.ovo-service.dark .receipt { border-color: var(--line); box-shadow: 0 12px 28px #160f1840; }
html.ovo-service.dark .receipt-line { background: var(--line); }
html.ovo-service.dark :is(.receipt-brand, .wallet-logo, .art-spark, .wallet-spark, .heading-flower) { color: var(--primary); }
html.ovo-service.dark :is(.receipt-caption, .wallet-caption) { color: var(--muted); }
html.ovo-service.dark :is(.receipt-check, .wallet-coin) { color: var(--primary-ink); background: var(--primary); }
html.ovo-service.dark .wallet-card { border-color: var(--accent-line); box-shadow: inset 0 17px var(--surface-soft); }
html.ovo-service.dark .wallet-body { background: var(--accent-bg); border-color: var(--accent-line); box-shadow: 0 12px 28px #160f1840; }
html.ovo-service.dark .wallet-clasp { background: var(--surface-soft); border-color: var(--accent-line); }
html.ovo-service.dark .wallet-clasp i { background: var(--primary); }
/* Refund totals, records and the zero-result state. */
html.ovo-service.dark .stat-primary { background: var(--accent-bg); border-color: var(--accent-line); }
html.ovo-service.dark :is(.stat-grid article > span, .stat-primary p, .claim-area strong) { color: var(--muted); }
html.ovo-service.dark .record { border-color: var(--line); }
html.ovo-service.dark :is(.zero-badge, .soft-badge) { color: var(--muted); border-color: var(--line); background: var(--surface-soft); }
html.ovo-service.dark .history-panel .record-amount { color: var(--success); }
/* Checkout choices retain a distinct border and radio marker when selected. */
html.ovo-service.dark .checkout-steps li { color: var(--muted); }
html.ovo-service.dark .checkout-steps li + li::before { background: var(--line); }
html.ovo-service.dark .checkout-steps li > span { border-color: var(--line); }
html.ovo-service.dark .checkout-steps li[aria-current] { color: var(--primary); }
html.ovo-service.dark .checkout-steps li[aria-current] > span { color: var(--primary-ink); border-color: var(--primary); }
html.ovo-service.dark .checkout-steps .is-complete > span { background: var(--accent-bg); border-color: var(--accent-line); }
html.ovo-service.dark :is(.amount, .choice, .choice .choice-check) { border-color: var(--line); }
html.ovo-service.dark :is(.amount, .choice):hover { background: var(--surface-soft); border-color: var(--accent-line); }
html.ovo-service.dark :is(.amount, .choice).selected { background: var(--accent-bg); border-color: var(--primary); box-shadow: 0 0 0 1px #e9b5c722; }
html.ovo-service.dark .choice.selected .choice-check { border-color: var(--primary); }
html.ovo-service.dark :is(.amount-currency, .amount-tag, .total-label, .total-detail p) { color: var(--muted); }
html.ovo-service.dark .amount-tag.vip-tag { color: var(--warm); }
html.ovo-service.dark .amount:last-child:nth-child(3n + 1) .amount-tag { background: var(--warm-bg); }
html.ovo-service.dark .pay-icon.alipay { color: #a5ccff; background: #293b52; }
html.ovo-service.dark .pay-icon.wechat { color: var(--success); background: var(--success-bg); }
html.ovo-service.dark :is(.campaign-note, .payment-remark, .center-state .vip-result) { color: var(--warm); background: var(--warm-bg); border-color: var(--warm-line); }
html.ovo-service.dark .payment-remark :is(span, strong) { color: var(--warm); }
html.ovo-service.dark .payment-remark small { color: #cbbba5; }
html.ovo-service.dark :is(.waiting-payment, .reviewing, .history-status) { color: var(--warm); background: var(--warm-bg); }
html.ovo-service.dark .confirmed { color: var(--success); background: var(--success-bg); }
html.ovo-service.dark .rejected { color: var(--danger); background: var(--danger-bg); }
/* A white quiet zone around the original QR image is intentional for scanning. */
html.ovo-service.dark .qr-frame { background: #fff; border-color: #fff; }
html.ovo-service.dark .code-box { background: var(--accent-bg); border-color: var(--accent-line); }
html.ovo-service.dark .code-box code { color: var(--primary); }
/* Also cover restored orders and history dialogs if rendered by checkout. */
html.ovo-service.dark :is(.history-panel, .history-dialog, .history-card) {
  color: var(--ink); background: var(--surface); border-color: var(--line); box-shadow: var(--shadow);
}
html.ovo-service.dark .history-dialog::backdrop { background: #160f18a6; }
html.ovo-service.dark :is(.history-tabs, .history-retention, .history-controls, .history-empty) { background: var(--surface-soft); }
html.ovo-service.dark :is(.history-tabs button, .history-retention, .history-controls label, .history-pagination,
  .history-pagination label, .history-panel .section-kicker, #history-message, .history-order-id,
  .history-payment-copy span, .history-amount span, .history-card p, .history-card summary, .history-help summary,
  .history-actions .history-manage, .history-footnote, .history-help p, .history-empty p, #history-clear) { color: var(--muted); }
html.ovo-service.dark .history-tabs button[aria-pressed="true"] { color: var(--primary); background: var(--accent-bg); }
html.ovo-service.dark :is(.history-controls input, .history-controls select, .history-pagination select, .quiet-button) {
  color: var(--ink); background: var(--page-bg); border-color: var(--line);
}
html.ovo-service.dark .history-controls input::placeholder { color: var(--muted); }
html.ovo-service.dark :is(.history-amount strong, .history-empty strong) { color: var(--ink); }
html.ovo-service.dark .history-card details { border-color: var(--line); }
html.ovo-service.dark .history-status.pending_review { color: var(--primary); background: var(--accent-bg); }
html.ovo-service.dark .history-status.confirmed { color: var(--success); background: var(--success-bg); }
html.ovo-service.dark .history-status.rejected { color: var(--danger); background: var(--danger-bg); }
html.ovo-service.dark :is(.history-message-error, #history-message.history-message-error) { color: var(--danger); }
html.ovo-service.dark ::selection { color: var(--ink); background: #795265; }
@media (max-width: 850px) and (min-width: 721px) {
  html.ovo-service .nav-inner { gap: 12px; }
  html.ovo-service nav a { padding-inline: 10px; }
}
@media (max-width: 440px) {
  html.ovo-service .nav-inner { gap: 8px; }
  html.ovo-service .nav-actions { gap: 6px; }
  html.ovo-service #theme-mode { max-width: 96px; font-size: 11px; }
  html.ovo-service .console-link { padding-inline: 9px; }
  html.ovo-service .console-link span { margin-left: 4px; }
}
/* END GENERATED SERVICE THEME */