:root {
  color-scheme: dark;
  --canvas: #0b0c0f;
  --text: #f1f4f7;
  --muted: #9b9fa8;
  --quiet: #858b98;
  --line: rgba(225, 235, 255, .12);
  --cyan: #73e5ef;
  --blue: #628dff;
  --green: #82e6bd;
  --danger: #ff9d9d;
}
* { box-sizing: border-box; letter-spacing: 0; }
[hidden] { display: none !important; }
body { min-width: 320px; margin: 0; background: var(--canvas); color: var(--text); font-family: Inter, "Segoe UI", "Microsoft YaHei", sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: wait; opacity: .5; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
button, input { transition: border-color .2s, background .2s, box-shadow .2s; }
h1, h2, h3, p { margin: 0; }
#light-field { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -2; }
.background-grid { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .22; background-image: linear-gradient(rgba(193, 208, 244, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(193, 208, 244, .08) 1px, transparent 1px); background-size: 80px 80px; }
.app-shell { width: min(100% - 80px, 1200px); margin: 0 auto; }
.topbar { height: 100px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(240, 245, 255, .07); }
.brand { display: flex; align-items: center; gap: 12px; color: #f3f6fa; text-decoration: none; font-size: 15px; font-weight: 650; }
.brand-symbol { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(203, 230, 255, .26); border-radius: 8px; background: rgba(211, 230, 255, .07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); color: #b8deee; }
.brand-symbol .icon { width: 22px; height: 22px; }
.brand-sub { color: var(--quiet); font-size: 11px; font-weight: 400; }
.topbar-channel { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--muted); }
.topbar-actions { display: flex; align-items: center; gap: 20px; }
.admin-link { display: inline-flex; align-items: center; gap: 5px; color: #c5d8e2; font-size: 12px; text-decoration: none; }
.admin-link:hover { color: var(--cyan); }
.admin-link .icon { width: 14px; height: 14px; }
.alipay-glyph { display: inline-grid; place-items: center; flex: 0 0 auto; width: 27px; height: 27px; border-radius: 6px; background: #138ae7; color: white; font-size: 19px; font-family: "Microsoft YaHei", sans-serif; }
.topbar-channel .alipay-glyph { width: 19px; height: 19px; font-size: 14px; border-radius: 4px; }
.main { width: min(100%, 1000px); margin: 58px auto 0; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 27px; }
.eyebrow { margin-bottom: 12px; font-size: 10px; font-weight: 500; color: #929cab; font-family: Consolas, monospace; }
h1 { font-size: 32px; font-weight: 550; line-height: 1.25; }
.heading-dot { color: var(--cyan); margin-left: 4px; }
.state { display: inline-flex; align-items: center; min-height: 30px; gap: 7px; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px; font-size: 11px; background: rgba(212, 227, 255, .035); white-space: nowrap; }
.state i, .idle-status i, .small-dot { display: inline-block; width: 5px; height: 5px; flex-shrink: 0; border-radius: 50%; background: currentColor; }
.state-muted { color: var(--muted); }
.state-ready { color: var(--green); }
.state-warning { color: #efca8d; }
.checkout { position: relative; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid rgba(223, 235, 255, .24); border-radius: 8px; background: linear-gradient(120deg, rgba(217, 226, 255, .074), rgba(143, 184, 229, .024) 56%, rgba(170, 224, 237, .035)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 24px 80px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .05); }
.checkout-topline { position: absolute; height: 1px; inset: 0 20% auto 20%; background: linear-gradient(90deg, transparent, rgba(208, 238, 255, .75), transparent); }
.form-pane, .scan-pane { min-width: 0; padding: 31px 36px 20px; }
.form-pane { border-right: 1px solid var(--line); }
.pane-heading { display: flex; align-items: center; gap: 9px; min-height: 23px; margin-bottom: 33px; }
.section-index { color: #7a889b; font-family: Consolas, monospace; font-size: 10px; }
h2 { font-size: 15px; font-weight: 500; }
.pane-icon, .channel-label { margin-left: auto; color: var(--quiet); }
.channel-label { font-size: 10px; font-family: Consolas, monospace; }
.form { display: grid; gap: 23px; }
.field-group { min-width: 0; }
.label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
label { font-size: 12px; color: #c4c9d2; }
.currency-label, .optional { font-size: 10px; color: #939aa6; }
.currency-label { font-family: Consolas, monospace; }
input { width: 100%; height: 46px; min-width: 0; border: 1px solid rgba(217, 235, 255, .12); border-radius: 5px; background: rgba(214, 230, 255, .034); padding: 0 13px; color: var(--text); outline: none; font-size: 14px; }
input:hover { border-color: rgba(217, 235, 255, .24); }
input:focus { border-color: rgba(115, 229, 239, .65); box-shadow: 0 0 0 3px rgba(115, 229, 239, .065); background: rgba(208, 240, 255, .055); }
input::placeholder { color: #7c838f; opacity: 1; }
.amount-field { position: relative; }
.amount-field > span { position: absolute; top: 21px; left: 17px; font-size: 25px; line-height: 1; color: #a1abb9; }
.amount-field input { height: 78px; padding: 0 15px 0 49px; font-size: 38px; font-weight: 400; font-variant-numeric: tabular-nums; font-family: "Segoe UI", sans-serif; }
.quick-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 11px; }
.amount-preset { min-width: 0; height: 34px; border: 1px solid rgba(224, 232, 255, .1); border-radius: 4px; background: rgba(213, 229, 255, .025); color: #afb7c3; font-size: 11px; font-variant-numeric: tabular-nums; }
.amount-preset:hover, .amount-preset.is-selected { color: #bcf4fa; border-color: rgba(115, 229, 239, .4); background: rgba(115, 229, 239, .075); }
.payment-method { display: flex; align-items: center; gap: 10px; padding-top: 1px; font-size: 13px; }
.method-type { margin-left: auto; color: var(--muted); font-size: 11px; }
.method-check { color: var(--green); width: 15px !important; }
.primary-action { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 49px; padding: 0 16px; color: #06171d; background: linear-gradient(110deg, #83e4ec, #8db4f5); border: 1px solid rgba(201, 243, 255, .45); border-radius: 5px; font-size: 13px; font-weight: 650; box-shadow: 0 0 24px rgba(101, 181, 227, .11), inset 0 1px 0 rgba(255, 255, 255, .5); }
.primary-action .icon-arrow { margin-left: auto; }
.primary-action:hover:not(:disabled) { box-shadow: 0 0 32px rgba(115, 229, 239, .23), inset 0 1px 0 rgba(255, 255, 255, .6); border-color: #d7fcff; }
body[data-payment-state="generating"] .primary-action .icon-scan { mask-image: url('/assets/loader-circle.svg'); animation: spin 1s linear infinite; }
.message { min-height: 0; font-size: 12px; line-height: 1.65; color: var(--muted); overflow-wrap: anywhere; }
.message:empty { display: none; }
.message.error { color: var(--danger); }
.scan-pane { display: flex; flex-direction: column; background: rgba(6, 11, 18, .075); }
.payment-empty { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 10px; min-height: 342px; }
.scanner-art { position: relative; display: grid; place-items: center; width: 166px; height: 166px; margin-bottom: 28px; color: #b7cfe4; }
.scanner-grid { position: absolute; inset: 8px; background: linear-gradient(rgba(149, 197, 225, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(149, 197, 225, .06) 1px, transparent 1px); background-size: 15px 15px; border: 1px solid rgba(133, 200, 227, .08); }
.scanner-art > .icon { width: 58px; height: 58px; opacity: .8; }
.scanner-corner { position: absolute; width: 16px; height: 16px; border: solid rgba(149, 205, 229, .55); }
.corner-tl { top: 0; left: 0; border-width: 1px 0 0 1px; }
.corner-tr { top: 0; right: 0; border-width: 1px 1px 0 0; }
.corner-bl { bottom: 0; left: 0; border-width: 0 0 1px 1px; }
.corner-br { bottom: 0; right: 0; border-width: 0 1px 1px 0; }
.scanner-line { position: absolute; left: 8px; right: 8px; top: 15px; height: 1px; background: linear-gradient(90deg, transparent, rgba(135, 224, 244, .7), transparent); box-shadow: 0 0 12px rgba(122, 218, 235, .3); animation: scan 5s ease-in-out infinite alternate; }
.payment-empty h3 { font-size: 16px; font-weight: 450; color: #c9d1db; }
.payment-empty > p { margin-top: 9px; font-size: 12px; color: var(--quiet); }
.idle-status { margin-top: 25px; display: inline-flex; align-items: center; gap: 6px; color: #8496a9; font-size: 10px; }
.payment-panel { min-width: 0; }
.payment-summary { display: flex; align-items: center; justify-content: center; gap: 12px; margin: -7px 0 19px; }
.payment-amount { font-size: 25px; font-variant-numeric: tabular-nums; }
.transaction-chip { font-size: 10px; color: var(--cyan); padding: 4px 7px; border: 1px solid rgba(115, 229, 239, .2); border-radius: 4px; background: rgba(115, 229, 239, .055); }
.transaction-chip.is-paid { color: var(--green); border-color: rgba(130, 230, 189, .35); }
.transaction-chip.is-closed { color: var(--danger); border-color: rgba(255, 157, 157, .3); }
.qr-wrap { width: 206px; height: 206px; padding: 9px; background: #fff; border-radius: 5px; margin: 0 auto; box-shadow: 0 8px 35px rgba(0, 0, 0, .12); }
.qr-wrap img { display: block; width: 100%; height: 100%; object-fit: contain; }
.payment-complete { display: none; width: 206px; height: 206px; margin: 0 auto; place-items: center; color: var(--green); }
.payment-complete .icon { width: 65px; height: 65px; }
body[data-payment-state="paid"] .qr-wrap { display: none; }
body[data-payment-state="paid"] .payment-complete { display: grid; border: 1px solid rgba(130, 230, 189, .2); border-radius: 5px; background: rgba(130, 230, 189, .03); }
.payment-meta { text-align: center; }
.payment-status { margin-top: 17px; font-size: 17px; }
.payment-status.success { color: var(--green); }
.payment-status.closed { color: var(--danger); }
.status-detail { font-size: 11px; line-height: 1.7; color: var(--muted); margin-top: 6px; }
.order-row { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 12px; min-width: 0; }
.order-number { font-size: 9px; font-family: Consolas, monospace; color: #96a6b8; overflow-wrap: anywhere; min-width: 0; }
.icon-button { display: grid; place-items: center; background: none; color: var(--muted); border: 0; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 4px; }
.icon-button:hover { background: rgba(222, 235, 255, .09); color: var(--text); }
.icon-button .icon { width: 13px; height: 13px; }
.secondary { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; min-height: 35px; margin-top: 12px; border: 1px solid var(--line); border-radius: 4px; color: #c4d4e1; background: rgba(211, 235, 255, .035); font-size: 11px; }
.secondary:hover { border-color: rgba(115, 229, 239, .4); background: rgba(115, 229, 239, .055); }
.checkout-footer { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 35px; border-top: 1px solid var(--line); color: #8e9baa; font-size: 10px; }
.checkout-footer > span { display: flex; align-items: center; gap: 6px; }
.checkout-footer .icon { width: 13px; height: 13px; color: #a2b6c4; }
.checkout-footer .small-dot { color: var(--green); width: 4px; height: 4px; }
.page-footer { display: flex; justify-content: space-between; gap: 10px; padding: 20px 1px 35px; font-size: 10px; color: #9296a3; }
.page-footer > span:first-child { font-family: Consolas, monospace; font-size: 9px; color: #818894; }
.icon { display: inline-block; width: 18px; height: 18px; flex: 0 0 auto; background: currentColor; mask-size: contain; mask-repeat: no-repeat; mask-position: center; }
.icon-command { mask-image: url('/assets/command.svg'); }
.icon-wallet { mask-image: url('/assets/wallet.svg'); }
.icon-check { mask-image: url('/assets/check.svg'); }
.icon-scan { mask-image: url('/assets/scan-line.svg'); }
.icon-arrow { mask-image: url('/assets/arrow-up-right.svg'); }
.icon-copy { mask-image: url('/assets/copy.svg'); }
.icon-plus { mask-image: url('/assets/plus.svg'); }
.icon-shield { mask-image: url('/assets/shield-check.svg'); }
@keyframes scan { to { transform: translateY(132px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (min-width: 1600px) { .main { margin-top: 86px; } }
@media (max-width: 960px) {
  .app-shell { width: calc(100% - 44px); }
  .main { margin-top: 38px; }
  .form-pane, .scan-pane { padding-right: 24px; padding-left: 24px; }
}
@media (max-width: 700px) {
  .app-shell { width: calc(100% - 32px); }
  .topbar { height: 70px; }
  .brand { font-size: 13px; gap: 8px; }
  .topbar-channel { font-size: 10px; gap: 5px; }
  .topbar-actions { gap: 10px; }
  .topbar-actions .topbar-channel { display: none; }
  .brand-sub { font-size: 9px; }
  .main { margin-top: 28px; }
  .page-heading { margin-bottom: 20px; }
  .eyebrow { font-size: 9px; margin-bottom: 9px; }
  h1 { font-size: 26px; }
  .state { font-size: 10px; min-height: 27px; padding: 0 8px; }
  .checkout { grid-template-columns: minmax(0, 1fr); }
  .form-pane, .scan-pane { padding: 22px; }
  .form-pane { border-right: 0; }
  .pane-heading { margin-bottom: 24px; }
  .form { gap: 21px; }
  .quick-amounts { gap: 6px; }
  .amount-preset { min-height: 38px; }
  .amount-field input { font-size: 34px; }
  .scan-pane { border-top: 1px solid var(--line); }
  .payment-empty { min-height: 230px; padding: 0 0 5px; }
  .scanner-art { width: 124px; height: 124px; margin-bottom: 20px; }
  .scanner-line { animation: none; top: 65px; }
  .payment-empty .idle-status { margin-top: 18px; }
  .checkout-footer { padding: 15px 22px; font-size: 9px; }
  .payment-summary { margin-top: 0; }
  .qr-wrap { width: 224px; height: 224px; }
  .payment-complete { width: 224px; height: 224px; }
  .page-footer { padding-bottom: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}