/* Account supplies and operator commerce, in the established manga palette. */
.commerce-page { color: var(--comic-ink, #182c49); }
.commerce-page *, .commerce-page *::before, .commerce-page *::after { min-width: 0; }
.commerce-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-bottom: 3px solid var(--comic-ink); padding: 4px 0 18px; }
.commerce-heading-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 18px; font-size: 11px; font-weight: 750; }
.commerce-welcome { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin: 24px 0; padding: 23px 30px; border: 3px solid var(--comic-ink); background: #fffefa; box-shadow: 6px 6px 0 var(--comic-ink); overflow: hidden; }
.commerce-welcome h1 { font-size: 35px; line-height: 1.25; font-weight: 900; letter-spacing: -1px; margin: 15px 0 8px; }
.commerce-welcome p { color: var(--muted); margin: 0; font-size: 12px; }
.commerce-welcome > img { width: 220px; height: 170px; object-fit: cover; object-position: center; border: 2px solid var(--comic-ink); transform: rotate(3deg); }
.commerce-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.commerce-page .card { margin-bottom: 22px; }
.commerce-wallet, .commerce-quota { padding: 22px; }
.commerce-account-line { display: flex; align-items: center; gap: 10px; border-bottom: 1px dashed #b9c2d4; padding-bottom: 14px; margin-bottom: 17px; }
.commerce-account-line > div { flex: 1; overflow-wrap: anywhere; }
.commerce-account-line strong { display: block; font-size: 14px; }
.commerce-account-line span { display: block; font-size: 10px; color: var(--muted); }
.commerce-account-line > a { font-size: 10px; white-space: nowrap; }
.commerce-account-line .avatar { width: 40px; height: 40px; border: 2px solid var(--comic-ink); border-radius: 50%; }
.commerce-page .money-big { color: var(--comic-blue); background: none; -webkit-text-fill-color: var(--comic-blue); font-size: 38px; line-height: 1.5; margin: 3px 0; overflow-wrap: anywhere; }
.commerce-page .stat-grid { gap: 9px; margin-top: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.commerce-page .stat { box-shadow: none; border: 1px solid #dce2eb; border-radius: 4px; padding: 10px; background: #f4f6fb; }
.commerce-page .stat .k { color: var(--muted); font-size: 10px; }
.commerce-page .stat .v { color: var(--comic-ink); font-size: 15px; overflow-wrap: anywhere; }
.commerce-page h2 { font-size: 18px; font-weight: 850; }
.commerce-quota #quota-note { margin: 13px 0; line-height: 1.8; font-size: 10px; }
.commerce-scope-note { margin: 13px 0 0; padding: 10px 12px; background: #f0f3fa; color: #4d5b74; border-left: 3px solid var(--comic-blue); font-size: 10px; line-height: 1.8; overflow-wrap: anywhere; }
.commerce-redeem { padding: 24px; border-width: 3px !important; box-shadow: 5px 5px 0 #ced8f1 !important; }
.redeem-intro { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.redeem-intro > div { flex: 1; }
.redeem-intro h2 { margin: 2px 0 0; font-size: 23px; }
.redeem-intro > img { width: 60px; height: 60px; border: 2px solid var(--comic-ink); border-radius: 50%; object-fit: cover; }
.commerce-page .input-group { display: flex; gap: 10px; }
.commerce-page .input-group > .input { flex: 1; width: 0; min-width: 0; }
.commerce-page .input-group .btn { flex-shrink: 0; }
.commerce-redeem #redeem-code { text-transform: uppercase; letter-spacing: 2px; min-height: 48px; font-size: 17px; }
.commerce-message { margin-top: 12px; padding: 11px 13px; border: 1px solid #d9b2ac; border-radius: 4px; color: #8b3931; background: #fff1ee; font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.commerce-message.success { color: #27614c; border-color: #9cc6b2; background: #eaf7ef; }
.redeem-preview { margin-top: 18px; padding: 20px; border: 2px solid var(--comic-ink); background: #fff8dd; box-shadow: 4px 4px 0 var(--comic-yellow); }
.redeem-amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; color: var(--comic-blue); font-size: 33px; font-weight: 900; line-height: 1.5; }
.redeem-amount > small { color: var(--muted); font-size: 11px; font-weight: 600; }
.redeem-preview .checkbox { align-items: flex-start; margin: 15px 0; font-size: 12px; overflow-wrap: anywhere; }
.redeem-preview .checkbox input { flex-shrink: 0; margin-top: 4px; }
.redemption-history { margin-top: 24px; border-top: 1px dashed #b9c2d4; }
.redemption-history > summary { cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 13px 0; font-size: 12px; font-weight: 750; }
.redemption-history > summary::before { content: '+'; font-size: 17px; color: var(--comic-blue); }
.redemption-history[open] > summary::before { content: '−'; }
.redemption-history > summary > span { margin-left: auto; font-size: 10px; color: var(--muted); font-weight: 400; }
.commerce-page .tabs { display: flex; overflow-x: auto; justify-content: stretch; gap: 4px; border-radius: 4px; padding: 5px; border: 2px solid var(--comic-ink); background: #eff3fc; scrollbar-width: thin; }
.commerce-page .tabs .tab { flex: 1 0 auto; border-radius: 3px; font-size: 12px; padding: 11px 12px; white-space: nowrap; box-shadow: none; }
.commerce-page .tabs .tab.active { background: var(--comic-blue); color: #fff; }
.commerce-page #recharge-options .btn { display: flex; flex-direction: column; gap: 5px; padding: 14px 8px; }
.commerce-page #recharge-options .btn > small, .commerce-page #plan-list .btn > small { display: block; margin-top: 3px; font-size: 9px; font-weight: 600; opacity: .85; }
.commerce-page .list-row { gap: 12px; }
.commerce-page .list-row .title, .commerce-page .list-row .sub { white-space: normal; overflow-wrap: anywhere; }
.commerce-order { padding: 18px 0; border-bottom: 1px solid #e0e4ec; }
.commerce-order:first-child { padding-top: 4px; }
.commerce-order:last-child { border-bottom: 0; }
.commerce-order > .row { align-items: start; flex-wrap: wrap; gap: 8px; }
.commerce-order > .row > strong { font-size: 14px; }
.order-id { overflow-wrap: anywhere; word-break: break-word; white-space: normal; font-size: 11px; margin: 8px 0; }
.commerce-order > .btn-row { margin-top: 13px; gap: 10px; }
.commerce-page .table-wrap { max-width: 100%; overflow-x: auto; }
.commerce-page #payment-notice { font-size: 11px; line-height: 1.8; }
.commerce-payment-channels { padding: 20px 24px; }
.payment-provider-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 16px; }
.payment-provider { display: flex; align-items: center; gap: 10px; border: 1px solid #d9e0eb; padding: 12px; background: #f8faff; border-radius: 4px; }
.payment-provider-mark { display: grid; place-items: center; flex: 0 0 32px; height: 32px; border-radius: 5px; font-weight: 850; color: white; }
.payment-provider-mark.wechat { background: #277f52; }
.payment-provider-mark.alipay { background: #236db3; }
.payment-provider > div { flex: 1; }
.payment-provider > div > strong, .payment-provider > div > span { display: block; }
.payment-provider > div > strong { font-size: 12px; }
.payment-provider > div > span { font-size: 9px; color: var(--muted); }
.order-payment-actions { border-top: 1px dashed #bdc6d5; margin-top: 20px; padding-top: 14px; }
.order-payment-actions .btn { font-size: 12px; }
.checkout-qr { text-align: center; }
.checkout-qr img { display: block; margin: 12px auto; max-width: 100%; background: white; }
.checkout-qr strong { display: block; font-size: 27px; color: var(--comic-blue); margin: 10px 0; }
.qq-license-card { padding: 24px; border-width: 3px !important; box-shadow: 5px 5px 0 #cdd8f2 !important; }
.qq-license-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.qq-license-heading h2 { margin: 12px 0 6px; font-size: 27px; font-weight: 900; }
.qq-license-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.qq-license-facts { display: grid; grid-template-columns: 1.3fr .7fr 1fr; gap: 14px; margin: 24px 0; }
.qq-license-facts > div { padding: 15px; background: #f1f5fe; border: 1px solid #dce4f3; border-radius: 4px; }
.qq-license-facts span, .qq-license-facts strong { display: block; }
.qq-license-facts span { color: var(--muted); font-size: 10px; margin-bottom: 7px; }
.qq-license-facts strong { font-size: 16px; color: var(--comic-blue); overflow-wrap: anywhere; }
.qq-license-purchase { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.qq-license-purchase > div { flex: 1; min-width: 180px; }
.qq-license-purchase > div > strong, .qq-license-purchase > div > span { display: block; }
.qq-license-purchase > div > strong { color: var(--comic-ink); font-size: 21px; font-weight: 850; }
.qq-license-purchase > div > span { color: var(--muted); font-size: 10px; margin-top: 4px; }
.qq-license-purchase > .btn { font-size: 12px; }
.web-experiment-details { padding: 18px 20px; border: 1px dashed #aebacd; margin: 26px 0; background: #f3f5fa; }
.web-experiment-details > summary { font-size: 13px; font-weight: 800; cursor: pointer; }
.web-experiment-details > summary > span { margin-left: 10px; font-size: 10px; font-weight: 400; color: var(--muted); }
.web-experiment-details > p { margin: 12px 0 20px; font-size: 11px; }
.web-experiment-details > .card:first-of-type { margin-top: 15px; }
.plan-setting-description { padding: 10px 0; font-size: 13px; font-weight: 750; }
.plan-setting-description > span { display: inline-block; font-size: 10px; color: var(--muted); font-weight: 400; margin-top: 5px; }
.admin-workflow-note { display: flex; gap: 16px; align-items: center; margin: 19px 0 22px; padding: 17px 20px; background: #fff3c2; border: 2px solid var(--comic-ink); box-shadow: 4px 4px 0 #d6c18a; }
.admin-workflow-note > img { width: 52px; height: 52px; object-fit: cover; border: 2px solid var(--comic-ink); border-radius: 50%; }
.admin-workflow-note p { margin: 4px 0 0; color: #6d6346; font-size: 11px; line-height: 1.8; }
.admin-commerce-page .topbar { position: static; }
.admin-commerce-page > .tabs { flex-wrap: wrap; overflow: visible; }
.admin-commerce-page > .tabs .tab { flex: 0 0 auto; }
.code-filters { display: grid; grid-template-columns: 130px minmax(0, 1fr) minmax(0, 1.2fr) auto; align-items: end; gap: 10px; margin: 18px 0; }
.code-filters label > span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 10px; }
.code-filters .input, .code-filters .select { width: 100%; min-height: 39px; font-size: 11px; }
.code-filters > .btn { min-height: 39px; font-size: 11px; }
.issued-codes { max-height: 42dvh; overflow: auto; padding: 8px 0; margin: 10px 0; }
.issued-code { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #e0e5ed; }
.issued-code > code { flex: 1; padding: 7px; font-size: 13px; white-space: nowrap; background: #eef3ff; color: var(--comic-ink); letter-spacing: .5px; }
.issued-code > span { font-size: 11px; white-space: nowrap; }
.issued-code > button { flex-shrink: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 750px) {
  .commerce-summary-grid { grid-template-columns: 1fr; gap: 0; }
  .commerce-welcome { padding: 20px; }
  .commerce-welcome h1 { font-size: 29px; }
  .commerce-welcome > img { width: 150px; height: 150px; }
  .commerce-heading { align-items: start; }
  .commerce-heading-links { max-width: 160px; font-size: 10px; gap: 7px 12px; }
  .code-filters { grid-template-columns: 1fr 1fr; }
  .admin-commerce-page .topbar { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .commerce-heading .comic-brand { font-size: 19px; }
  .commerce-heading .comic-brand > img { width: 36px; height: 36px; }
  .commerce-heading .comic-brand-sub { letter-spacing: .7px; font-size: 7px; }
  .commerce-heading-links { max-width: 128px; font-size: 9px; gap: 6px 10px; }
  .commerce-welcome { gap: 10px; margin: 20px 0 23px; padding: 16px; }
  .commerce-welcome h1 { font-size: 26px; }
  .commerce-welcome p { font-size: 10px; }
  .commerce-welcome > img { width: 116px; height: 145px; }
  .commerce-welcome .chapter-label { font-size: 9px; }
  .commerce-wallet, .commerce-quota, .commerce-redeem, .commerce-payment-channels { padding: 18px; }
  .commerce-page .money-big { font-size: 34px; }
  .commerce-account-line > a { font-size: 9px; }
  .redeem-intro { gap: 9px; }
  .redeem-intro h2 { font-size: 21px; }
  .redeem-intro > img { width: 48px; height: 48px; }
  .redeem-intro .panel-number { font-size: 34px; }
  .commerce-redeem .input-group { flex-direction: column; gap: 12px; }
  .commerce-redeem .input-group > .input { width: 100%; flex: auto; }
  .commerce-redeem #redeem-code { font-size: 16px; letter-spacing: .8px; }
  .redeem-preview { padding: 14px; }
  .redeem-amount { font-size: 29px; }
  .redemption-history > summary { font-size: 11px; }
  .redemption-history > summary > span { font-size: 9px; }
  .payment-provider-grid { grid-template-columns: 1fr; gap: 10px; }
  .commerce-order .order-id { font-size: 10px; }
  .commerce-page .list-row { flex-wrap: wrap; gap: 8px; }
  .commerce-page .list-row > .trail { margin-left: auto; }
  .commerce-page .kv { gap: 8px; font-size: 11px; }
  .commerce-page .kv > .v { overflow-wrap: anywhere; text-align: right; }
  .admin-workflow-note { padding: 13px; gap: 11px; }
  .admin-commerce-page .topbar > .grow { flex: 1 0 calc(100% - 64px); }
  .admin-workflow-note > img { width: 43px; height: 43px; }
  .admin-workflow-note p { font-size: 10px; }
  .admin-workflow-note strong { font-size: 13px; }
  .code-filters { gap: 9px; }
  .code-filters > label:nth-child(3) { grid-column: 1 / -1; }
  .code-filters > button { grid-column: 1 / -1; }
  .issued-code { flex-wrap: wrap; gap: 8px; }
  .issued-code > code { flex-basis: 100%; font-size: 12px; letter-spacing: .3px; }
  .issued-code > button { margin-left: auto; }
  .qq-license-card { padding: 18px; }
  .qq-license-heading { gap: 10px; }
  .qq-license-heading h2 { font-size: 24px; }
  .qq-license-heading p { font-size: 11px; }
  .qq-license-heading > .chip { flex-shrink: 0; margin-top: 2px; }
  .qq-license-facts { grid-template-columns: 1.3fr .7fr; gap: 9px; margin: 18px 0; }
  .qq-license-facts > div:last-child { grid-column: 1 / -1; }
  .qq-license-facts > div { padding: 12px; }
  .qq-license-facts strong { font-size: 14px; }
  .qq-license-purchase > div { flex-basis: 100%; }
  .qq-license-purchase > .btn { flex: 1; padding: 11px 9px; font-size: 11px; }
  .web-experiment-details { padding: 14px; }
  .web-experiment-details > summary > span { display: block; margin: 4px 0 0 16px; font-size: 9px; }
}
@media (max-width: 359px) {
  .commerce-heading { gap: 8px; }
  .commerce-heading .comic-brand > img { display: none; }
  .commerce-welcome { padding: 13px; }
  .commerce-welcome h1 { font-size: 24px; }
  .commerce-welcome > img { width: 91px; height: 139px; }
  .commerce-account-line { flex-wrap: wrap; }
  .commerce-account-line > a { margin-left: 50px; }
  .commerce-wallet, .commerce-quota, .commerce-redeem, .commerce-payment-channels { padding: 15px; }
  .commerce-redeem #redeem-code { font-size: 14px; }
}