/* ============================================================
   console 页面专属样式
   ============================================================ */

/* ---------- base ---------- */
:root {
  --green: #4cc39a;
  --brand: #1b9668;
  --dark: #1a1a1a;
  --muted: #646464;
  --line: #f2f4f8;
  --bg: #f7f8fa
}

* {
  box-sizing: border-box
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--dark);
  font-family: "Noto Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased
}

a {
  text-decoration: none;
  color: inherit
}

button {
  font: inherit;
  cursor: pointer;
  border: 0;
  background: none
}

.shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh
}

aside {
  background: #fff;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh
}

.side-brand {
  height: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 20px;
  border-bottom: 1px solid var(--line)
}

.logo {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -.02em
}

.logo b {
  color: var(--brand)
}

.logo small {
  display: block;
  font-size: 11px;
  color: #a3a3a3;
  font-weight: 300;
  margin-top: 3px;
  letter-spacing: .06em
}

.side-menu {
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  flex: 1
}

.group {
  font-size: 11px;
  color: #a3a3a3;
  letter-spacing: .1em;
  font-weight: 500;
  padding: 10px 10px 6px
}

.group+.snav {
  margin-top: 0
}

.snav {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  transition: background .25s, color .25s;
  width: 100%;
  text-align: left
}

.snav:hover {
  background: #f7f8fa;
  color: var(--dark)
}

.snav.on {
  background: #e9fff4;
  color: var(--brand);
  font-weight: 500
}

.snav .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5
}

.side-foot {
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: #a3a3a3
}

.side-foot a {
  color: var(--brand)
}

main {
  display: flex;
  flex-direction: column;
  min-width: 0
}

.topbar {
  height: 64px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 20
}

.topbar h1 {
  font-size: 18px;
  font-weight: 600;
  margin: 0
}

.uc {
  position: relative
}

.uc-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  transition: background .25s
}

.uc-btn:hover {
  background: #f7f8fa
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 500
}

.uc-btn span.n {
  font-size: 14px;
  font-weight: 500
}

.uc-btn .caret {
  font-size: 11px;
  color: var(--muted)
}

.uc-menu {
  position: absolute;
  right: 0;
  top: 46px;
  width: 190px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, .1);
  padding: 8px;
  display: none;
  z-index: 30
}

.uc.open .uc-menu {
  display: block
}

.uc-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 13.5px;
  color: var(--dark)
}

.uc-menu button:hover {
  background: #f7f8fa
}

.uc-menu hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 6px 4px
}

.content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1
}

.view {
  display: none;
  flex-direction: column;
  gap: 20px
}

.view.on {
  display: flex;
  flex: 1
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px
}

.stat {
  background: #fff;
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04)
}

.stat .l {
  font-size: 13px;
  color: var(--muted)
}

.stat .v {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -.02em
}

.stat .s {
  font-size: 12px;
  color: var(--muted)
}

.stat .s.up {
  color: var(--brand)
}

.row2 {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 16px;
  flex: 1
}

.panel {
  background: #fff;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
  display: flex;
  flex-direction: column;
  gap: 14px
}

.panel h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 500
}

.bars {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex: 1;
  min-height: 200px;
  padding-top: 10px
}

.bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
  justify-content: flex-end
}

.bar i {
  display: block;
  width: 100%;
  border-radius: 6px;
  background: #d9efe5
}

.bar.hot i {
  background: var(--green)
}

.bar b {
  font-size: 11px;
  color: var(--muted);
  font-weight: 400
}

.feed {
  display: flex;
  flex-direction: column;
  gap: 12px
}

.feed p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  font-weight: 300
}

.bar-actions {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.bar-actions h3 {
  font-size: 15px;
  font-weight: 500;
  margin: 0
}

.btns {
  display: flex;
  gap: 10px
}

.btn {
  border-radius: 999px;
  font-weight: 500;
  font-size: 13px;
  padding: 10px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background .3s, color .3s
}

.btn.ghost {
  background: #fff;
  color: var(--dark);
  border: 1px solid #d9dee0
}

.btn.ghost:hover {
  background: #f7f8fa
}

.report-new[hidden] {
  display: none;
}

.btn.dark {
  background: var(--dark);
  color: #fff
}

.btn.dark:hover {
  background: #000
}

.btn.green {
  background: var(--brand);
  color: #fff
}

.btn.green:hover {
  background: #007a60
}

/* 发票 tab 切换（分段控件，放右侧） */
.inv-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #f1f3f5;
  border-radius: 999px;
  padding: 4px
}
.inv-tabs .tab-item {
  border: 0;
  background: transparent;
  padding: 8px 18px;
  border-radius: 999px;
  font: inherit;
  font-size: 13.5px;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s
}
.inv-tabs .tab-item.on {
  background: #fff;
  color: var(--dark);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08)
}

table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04)
}

th,
td {
  text-align: left;
  padding: 14px 20px;
  font-size: 13px
}

th {
  color: var(--muted);
  font-weight: 500;
  font-size: 12px;
  border-bottom: 1px solid var(--line)
}

td {
  border-bottom: 1px solid #f5f6f8;
  color: var(--muted);
  font-weight: 300
}

td.name {
  color: var(--dark);
  font-weight: 500
}

tr:last-child td {
  border-bottom: 0
}

.tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500
}

.tag.pro {
  background: #e9fff4;
  color: var(--brand)
}

.tag.free {
  background: #f2f4f8;
  color: var(--muted)
}

.st-on {
  color: var(--brand)
}

.st-off {
  color: #a3a3a3
}

.key-op {
  color: var(--brand);
  cursor: pointer;
  white-space: nowrap
}

.key-op + .key-op {
  margin-left: 14px
}

.key-op:hover {
  text-decoration: underline
}

.key-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 220px
}

.key-val {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--dark);
  word-break: break-all;
  flex: 1 1 auto;
  min-width: 0
}

.key-eye,
.key-copy {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 8px;
  background: #f2f4f6;
  color: #8a9199;
  cursor: pointer;
  transition: background .2s, color .2s
}

.key-eye:hover,
.key-copy:hover {
  background: #e6f4ee;
  color: var(--brand)
}

.key-eye.on {
  background: #e9fff4;
  color: var(--brand)
}

.op {
  color: var(--brand);
  cursor: pointer
}

/* 报告列表分页 */
.pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid #eef0f3
}

.pager-btn {
  padding: 6px 14px;
  border: 1px solid #e3e6ea;
  border-radius: 8px;
  background: #fff;
  color: #333;
  font-size: 13px;
  cursor: pointer;
  transition: all .2s
}

.pager-btn:hover:not(:disabled) {
  border-color: var(--brand);
  color: var(--brand)
}

.pager-btn:disabled {
  color: #c0c4cc;
  background: #f5f6f8;
  cursor: not-allowed
}

.pager-cur {
  font-size: 13px;
  color: #666
}

.cur-sub {
  background: #fff;
  border-radius: 14px;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04)
}

.cur-sub .t {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px
}

.cur-sub .d {
  font-size: 13px;
  color: var(--muted);
  font-weight: 300;
  margin: 0
}

.plans {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px
}

.plan .btn.buy {
  margin-top: auto;
  width: 100%;
  background: #1b9668;
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 11px 0;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .25s
}

.plan .btn.buy:hover {
  background: #157a54
}

.plan .btn.buy.ghost-buy {
  background: #f1f9f5;
  color: #1b9668;
  border: 1px solid #cfe8df
}

.plan .btn.buy.ghost-buy:hover {
  background: #e2f3ec
}

/* 购买弹窗 */
.buy-modal {
  position: fixed;
  inset: 0;
  z-index: 2200;
  background: rgba(16, 20, 18, .5);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px
}

.buy-modal[hidden] {
  display: none
}

.buy-inner {
  position: relative;
  background: #fff;
  border-radius: 18px;
  padding: 30px 34px 28px;
  width: min(760px, 100%);
  max-height: 88vh;
  overflow: auto;
  box-shadow: 0 24px 64px rgba(16, 24, 20, .25);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 262px;
  gap: 30px;
  align-items: start
}

.buy-left {
  min-width: 0
}

.buy-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 5;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 0;
  background: #f3f5f4;
  color: #646464;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background .25s, color .25s
}

.buy-close:hover {
  background: #e8ecea;
  color: #1a1a1a
}

.buy-inner h3 {
  margin: 0 0 4px;
  font-size: 19px;
  color: #1a1a1a
}

.buy-price {
  font-size: 26px;
  font-weight: 800;
  color: #1b9668;
  margin: 6px 0 2px
}

.buy-price small {
  font-size: 13px;
  font-weight: 400;
  color: #8a8f99
}

.buy-desc {
  font-size: 13px;
  color: #646464;
  line-height: 1.7;
  margin: 6px 0 12px
}

.buy-feats {
  list-style: none;
  margin: 0 0 16px;
  padding: 12px 14px;
  background: #f6faf8;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 7px
}

.buy-feats li {
  font-size: 13px;
  color: #3a3f45;
  padding-left: 18px;
  position: relative
}

.buy-feats li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #1b9668;
  font-weight: 700
}

.buy-qrbox {
  text-align: center;
  padding: 18px 0 18px 28px;
  border-left: 1px dashed #e3e8e6;
  align-self: center
}

.buy-qrbox img {
  width: 220px;
  height: 220px;
  object-fit: contain;
  background: #fff;
  border: 1px solid #eef1f4;
  border-radius: 12px;
  padding: 8px
}

.buy-qrbox p {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: #646464
}

.buy-qrbox p b {
  color: #1b9668
}

.plan {
  background: #fff;
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 2px solid transparent;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04)
}

.plan.on {
  border-color: var(--green)
}

.plan .tagline {
  align-self: flex-start
}

.plan h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 500
}

.plan .p {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -.02em
}

.plan li {
  font-size: 13px;
  color: var(--muted);
  font-weight: 300;
  line-height: 1.9;
  list-style: none
}

.plan ul {
  margin: 0;
  padding: 0
}

/* profile / security / realname */
.pcard {
  background: #fff;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04)
}

.pcard h3 {
  margin: 0 0 18px;
  font-size: 15px;
  font-weight: 500
}

.prow {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid #f5f6f8;
  font-size: 13.5px;
  align-items: center
}

.prow:last-child {
  border-bottom: 0
}

.prow .k {
  color: var(--muted)
}

.prow .v {
  color: var(--dark);
  font-weight: 400
}

.prow .v .op {
  margin-left: 12px
}

.pgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}

.switch {
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: #dfe4e6;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  transition: background .25s;
  cursor: pointer
}

.switch:after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  top: 2px;
  left: 2px;
  transition: left .25s
}

.switch.on {
  background: var(--green)
}

.switch.on:after {
  left: 18px
}

.rn-card.pcard,
.rn-card.pcard:hover {
  padding: 20px 18px 18px;
  border: 1px solid #e9ebef;
  border-radius: 6px;
  box-shadow: none;
  transform: none
}

.rn-card h3 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600
}

.rn-subtitle {
  margin: 0 0 14px;
  color: #a3aab7;
  font-size: 12px;
  line-height: 1.5
}

.rn-tabs {
  display: inline-flex;
  margin-bottom: 16px;
  border: 1px solid #d8ddea;
  border-radius: 5px
}

.rn-tab {
  padding: 5px 13px;
  font-size: 13px;
  line-height: 18px;
  color: #8994a6
}

.rn-tab:first-child {
  border-radius: 4px 0 0 4px
}

.rn-tab:last-child {
  border-radius: 0 4px 4px 0
}

.rn-tab.on {
  background: var(--brand);
  color: #fff;
  font-weight: 600
}

.rn-tab:focus-visible,
.rn-actions .btn:focus-visible,
.rn-consent input:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px
}

.rn-form {
  max-width: 388px
}

.rn-panel {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0
}

.rn-tabs[hidden],
.rn-form[hidden],
.rn-panel[hidden],
.rn-feedback[hidden] {
  display: none
}

.rn-form .field {
  margin-bottom: 18px
}

.rn-form .field label {
  color: #8994a6;
  margin-bottom: 8px;
  line-height: 18px
}

.rn-form .field input {
  height: 33px;
  padding: 6px 10px;
  border-color: #e9edf3;
  border-radius: 5px;
  font-size: 13px
}

.rn-form .field input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px rgba(27, 150, 104, .12)
}

.rn-form .field input[aria-invalid="true"] {
  border-color: #d94c4c
}

.rn-hint {
  margin: 0;
  color: #a3aab7;
  font-size: 12px;
  line-height: 1.6
}

.rn-consent {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  color: #8994a6;
  font-size: 12px;
  line-height: 18px;
  cursor: pointer
}

.rn-consent input {
  flex: 0 0 13px;
  width: 13px;
  height: 13px;
  margin: 2px 0 0;
  accent-color: var(--brand);
  cursor: pointer
}

.rn-actions {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px
}

.rn-actions .btn {
  min-height: 30px;
  padding: 7px 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: 12px
}

.rn-primary {
  background: var(--brand);
  color: #fff;
  font-weight: 600
}

.rn-primary:hover {
  background: #007a60
}

.rn-actions .rn-secondary {
  background: #fff;
  border-color: #e6e9ef;
  color: #8994a6
}

.rn-actions .rn-secondary:hover {
  background: #f7f8fc
}

.rn-feedback {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: #b54708
}

.rn-qr-card {
  text-align: center
}

.rn-qr-box {
  position: relative;
  display: inline-block;
  margin-top: 18px;
  padding: 14px;
  background: #fff;
  border: 1px solid #e9ebef;
  border-radius: 10px;
  line-height: 0
}

.rn-qr-box img {
  display: block;
  border-radius: 6px
}

/* hidden 属性优先级低于下面的 display:flex，必须显式覆盖，否则遮罩会常显 */
.rn-qr-overlay[hidden] {
  display: none !important
}

.rn-qr-overlay {
  position: absolute;
  top: 14px;
  right: 14px;
  bottom: 14px;
  left: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 6px;
  text-align: center;
  padding: 10px;
  line-height: 1.4
}

.rn-qr-overlay span {
  font-size: 16px;
  font-weight: 600;
  color: #d94c4c
}

.rn-qr-overlay small {
  font-size: 12px;
  color: #8994a6;
  word-break: break-all
}

.rn-qr-status {
  margin: 12px 0 0;
  font-size: 13px;
  color: #8994a6
}

.rn-qr-status.ok {
  color: var(--brand)
}

.rn-qr-status.fail {
  color: #d94c4c
}

.field {
  margin-bottom: 16px
}

.field label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 7px
}

.field input,
.field select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid #e3e8e6;
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  outline: none;
  transition: border-color .25s, box-shadow .25s;
  background: #fff
}

.field input:focus,
.field select:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(0, 194, 154, .14)
}

/* 附件上传控件 */
.uploader {
  position: relative
}
.uploader input[type="file"] {
  display: none
}
.up-drop {
  border: 1.5px dashed #d7e0dc;
  border-radius: 12px;
  padding: 22px 16px;
  text-align: center;
  cursor: pointer;
  background: #fbfdfc;
  transition: border-color .25s, background .25s
}
.up-drop:hover {
  border-color: var(--green);
  background: #f1f9f5
}
.up-drop.drag {
  border-color: var(--green);
  background: #eaf6f1
}
.up-ico {
  display: block;
  margin: 0 auto 8px
}
.up-txt {
  font-size: 14px;
  color: var(--dark);
  font-weight: 500
}
.up-hint {
  font-size: 12px;
  color: var(--muted);
  font-weight: 300;
  margin-top: 4px
}
.up-file {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #e3e8e6;
  border-radius: 12px;
  padding: 12px 14px;
  background: #f7f9f8
}
.up-file svg {
  flex: 0 0 auto
}
.up-name {
  flex: 1;
  font-size: 13.5px;
  color: var(--dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}
.up-remove {
  flex: 0 0 auto;
  color: #e8590c;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer
}
.up-remove:hover {
  text-decoration: underline
}

/* 申请开票列表：附件名称展示 */
.att-name {
  display: inline-block;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  margin-right: 8px;
  color: var(--dark)
}

/* modal */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 14, .45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 60
}

.modal.open {
  display: flex
}

.modal-card {
  width: min(460px, calc(100% - 40px));
  background: #fff;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .25)
}

.modal-card h3 {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 600
}

.modal-card .sub {
  font-size: 12.5px;
  color: var(--muted);
  font-weight: 300;
  margin: 0 0 20px
}

#effectModal .modal-card {
  width: min(800px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
}

.report-region,
.report-platforms {
  min-inline-size: 0;
  margin-inline: 0;
  padding: 0;
  border: 0;
}

.report-region legend,
.report-platforms legend {
  margin-bottom: 7px;
  padding: 0;
  color: var(--muted);
  font-size: 13px;
}

.report-region-selects {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.report-region-selects select {
  min-width: 0;
  padding-inline: 8px;
  text-overflow: ellipsis;
}

.report-region-selects select:disabled {
  background: #f6f7f8;
}

.report-region-selects .search-select {
  position: relative;
  min-width: 0;
}

.report-region-selects .search-select-input {
  width: 100%;
  min-width: 0;
  padding: 11px 26px 11px 10px;
  text-overflow: ellipsis;
  cursor: pointer;
}

.report-region-selects .search-select-input:disabled {
  background: #f6f7f8;
  color: #9aa3ab;
  cursor: not-allowed;
}

.search-select-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #9aa3ab;
  font-size: 12px;
  line-height: 1;
}

.search-select-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
  background: #fff;
  border: 1px solid #e4eeeb;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(16, 20, 18, .12);
  z-index: 60;
}

.search-select-list[hidden] {
  display: none;
}

.search-select-item {
  padding: 7px 10px;
  border-radius: 7px;
  font-size: 13px;
  color: #101820;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-select-item:hover {
  background: #edf7f1;
  color: #147850;
}

.search-select-empty {
  padding: 12px;
  text-align: center;
  color: #9aa3ab;
  font-size: 13px;
}

.report-region-status,
.report-region-retry {
  margin: 6px 0 0;
  padding: 0;
  font-size: 12px;
}

.report-region-status { color: var(--muted); }

.type-pick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px
}

.type-opt {
  border: 1.5px solid #e3e8e6;
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  transition: border-color .25s, background .25s
}

.type-opt.on {
  border-color: var(--green);
  background: #f1f7f4
}

.type-opt b {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px
}

.type-opt span {
  font-size: 12px;
  color: var(--muted);
  font-weight: 300
}

.quota {
  font-size: 12px;
  color: var(--muted);
  background: #f7f8fa;
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 18px;
  line-height: 1.8
}

.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px
}

.platform-group + .platform-group {
  margin-top: 22px;
}

.platform-group-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--muted);
}

.platform-group-heading h4 {
  margin: 0;
  color: var(--dark);
  font-size: 14px;
  font-weight: 600;
}

.platform-pick {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px
}

.plat-opt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 6px 8px;
  border: 1px solid #dce1e8;
  border-radius: 8px;
  background: #fff;
  color: var(--dark);
  font-size: 15px;
  font-weight: 600;
  transition: border-color .15s, background-color .15s;
}

.plat-opt img {
  flex: none;
  object-fit: contain;
}

.plat-opt:enabled:hover,
.plat-opt[aria-pressed="true"] {
  border-color: #6078ff;
  background: #f7f8ff;
}

.plat-opt:focus-visible {
  outline: 2px solid #6078ff;
  outline-offset: 2px;
}

@media (max-width: 500px) {
  #effectModal .modal-card { padding: 20px 16px; }
  .platform-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plat-opt { font-size: 13px; }
  .plat-opt img { width: 28px; height: 28px; }
}

/* 效果报告状态标签 */
.ef-status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap
}
.ef-status.queued {
  background: #f2f4f8;
  color: #6b7280
}
.ef-status.running {
  background: #eef4ff;
  color: #2563eb
}
.ef-status.succeeded {
  background: #e9fff4;
  color: #0ca15a
}
.ef-status.partial_success {
  background: #fff7e6;
  color: #d97706
}
.ef-status.failed {
  background: #ffecec;
  color: #dc2626
}

/* 报告详情弹框 */
.report-card {
  width: min(860px, calc(100% - 40px));
  padding: 24px 28px
}
.report-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start
}
.report-head .sub {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  word-break: break-all
}
.modal-x {
  border: 0;
  background: #f2f4f6;
  color: #555;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto
}
.modal-x:hover {
  background: #e6e9ed
}
.report-meta {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 16px 0
}
.rm-item {
  background: #f7f8fa;
  border: 1px solid #eef0f2;
  border-radius: 12px;
  padding: 12px 14px
}
.rm-item span {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px
}
.rm-item b {
  font-size: 14px;
  font-weight: 600;
  word-break: break-all
}
.rm-item .rd-tag,
.report-models .rd-tag {
  display: inline-block;
  margin: 2px 6px 2px 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3b5bdb;
  font-size: 12px;
  font-weight: 500;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}
.rm-item .rd-tag-empty,
.report-models .rd-tag-empty {
  background: transparent;
  color: var(--muted);
  padding: 0
}
#rdModels .rd-tag,
.report-models .rd-tag {
  white-space: normal;
  word-break: normal;
  overflow-wrap: anywhere;
}
.report-preview {
  border: 1px solid #e6e9e8;
  border-radius: 12px;
  overflow: hidden;
  background: #fafbfc;
  height: 520px
}
.report-preview iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block
}

@media(max-width:1200px) {
  .plans {
    grid-template-columns: repeat(2, 1fr)
  }
}

.drawer-mask {
  display: none
}

.mb-toggle {
  display: none;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 10px;
  background: #f2f4f6;
  color: #1a1a1a;
  font-size: 16px;
  place-items: center;
  cursor: pointer;
  margin-right: 6px
}

@media(max-width:1000px) {
  .shell {
    grid-template-columns: 1fr
  }

  aside {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 250px;
    height: 100vh;
    z-index: 70;
    transform: translateX(-102%);
    transition: transform .3s ease;
    box-shadow: 0 0 40px rgba(0, 0, 0, .18)
  }

  .shell.drawer-open aside {
    transform: none
  }

  .drawer-mask {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(10, 12, 14, .4);
    z-index: 65
  }

  .shell.drawer-open .drawer-mask {
    display: block
  }

  .side-menu {
    flex-direction: column;
    flex-wrap: nowrap
  }

  .mb-toggle {
    display: grid
  }

  .stats {
    grid-template-columns: 1fr 1fr
  }

  .row2,
  .plans,
  .pgrid {
    grid-template-columns: 1fr
  }
}

/* ---------- fx-css ---------- */
.stat,
.panel,
.pcard {
  transition: transform .25s, box-shadow .25s
}

.stat:hover,
.panel:hover,
.pcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .07)
}

tbody tr {
  transition: background .2s
}

tbody tr:hover {
  background: #f5fbf8
}

.snav {
  transition: background .25s, color .25s, transform .2s
}

.snav:hover {
  transform: translateX(3px)
}

.snav:active {
  transform: scale(.97)
}

.snav.open {
  color: var(--dark);
  font-weight: 500
}

.fin-caret {
  margin-left: auto;
  font-size: 10px;
  color: #a3a3a3;
  transition: transform .25s
}

.snav.open .fin-caret {
  transform: rotate(180deg);
  color: var(--brand)
}

.sub-nav {
  margin: 2px 0 6px 20px;
  padding-left: 10px;
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px
}

.sub-nav .snav {
  padding: 9px 12px;
  font-size: 13px
}

.sub-nav .snav .dot {
  width: 4px;
  height: 4px
}

.btn:active {
  transform: scale(.97)
}

.type-opt:active {
  transform: scale(.98)
}

.plan {
  transition: transform .25s, box-shadow .25s
}

.plan:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .08)
}

.uc-menu button:active {
  background: #eef1f2
}

/* ===== 列表子TAB ===== */
.subtabs {
  display: flex;
  gap: 6px;
  background: #f3f5f4;
  border-radius: 999px;
  padding: 4px;
  width: fit-content;
  margin: 0 0 14px
}

.subtab {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 7px 22px;
  font-size: 13px;
  font-weight: 600;
  color: #646464;
  cursor: pointer;
  transition: background .25s, color .25s, box-shadow .25s
}

.subtab.on {
  background: #fff;
  color: #1a1a1a;
  box-shadow: 0 2px 8px rgba(16, 24, 20, .1)
}

/* ===== 大模型图标（收录平台） ===== */
.llm-row {
  display: inline-flex;
  align-items: center
}

.llm-ic {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: -6px;
  border: 2px solid #fff;
  cursor: default
}

.llm-row .llm-ic:last-child {
  margin-right: 0
}

/* ===== 高亮数值（引用比/健康分/效果分） ===== */
.hl {
  display: inline-block;
  background: #e9fff4;
  color: #1b9668;
  font-weight: 700;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 13px
}

@media(max-width:760px) {
  .subtabs {
    width: 100%;
    justify-content: space-between
  }

  .subtab {
    flex: 1;
    padding: 7px 0;
    text-align: center
  }
}

/* ===== 引用比问号提示 ===== */
.tipq {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #e3e8e6;
  color: #646464;
  font-size: 10px;
  font-weight: 700;
  margin-left: 5px;
  cursor: help;
  position: relative;
  vertical-align: 1px
}

.tipq:hover:after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  top: 22px;
  transform: translateX(-50%);
  width: 240px;
  background: #1a1a1a;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  padding: 9px 12px;
  border-radius: 8px;
  z-index: 50;
  text-align: left;
  white-space: normal;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .2)
}

.tipq:hover:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 16px;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: #1a1a1a;
  z-index: 50
}

/* ===== 文章标题列 ===== */
td.art {
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #3a3f45
}

/* ===== 浮动比（涨红跌绿，国内惯例） ===== */
.delta {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap
}

.delta.up {
  color: #e5484d
}

.delta.down {
  color: #1b9668
}

.delta.flat {
  color: #a3a3a3
}

@media(max-width:680px) {
  .buy-inner {
    grid-template-columns: 1fr;
    gap: 18px
  }

  .buy-qrbox {
    border-left: 0;
    border-top: 1px dashed #e3e8e6;
    padding: 16px 0 4px
  }
}

/* ===== 支付渠道TAB ===== */
.pay-tabs {
  display: flex;
  gap: 4px;
  background: #f3f5f4;
  border-radius: 999px;
  padding: 3px;
  margin: 0 auto 12px;
  width: fit-content
}

.pay-tab {
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 6px 18px;
  font-size: 12.5px;
  font-weight: 600;
  color: #646464;
  cursor: pointer;
  transition: background .25s, color .25s
}

.pay-tab.on {
  background: #fff;
  color: #1a1a1a;
  box-shadow: 0 2px 6px rgba(16, 24, 20, .1)
}

/* ===== 未同意协议时二维码锁定 ===== */
.buy-qrbox {
  position: relative
}

.qr-lock {
  position: absolute;
  left: 28px;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(2px);
  border-radius: 12px;
  padding: 16px 10px;
  font-size: 13px;
  color: #646464;
  line-height: 1.7;
  display: none
}

.buy-qrbox.locked .qr-lock {
  display: block
}

.buy-qrbox.locked img {
  filter: blur(6px);
  opacity: .35
}

.buy-qrbox.is-custom .pay-tabs,
.buy-qrbox.is-custom .qr-lock {
  display: none
}

/* ===== 协议勾选行 ===== */
.buy-agree {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 14px 0 0;
  font-size: 12.5px;
  color: #646464;
  line-height: 1.6;
  cursor: pointer
}

.buy-agree input {
  margin: 2px 0 0;
  accent-color: #1b9668;
  flex: 0 0 auto
}

.buy-agree a {
  color: #1b9668;
  text-decoration: none;
  font-weight: 500
}

.buy-agree a:hover {
  text-decoration: underline
}

/* ===== 协议弹窗 ===== */
.terms-modal {
  position: fixed;
  inset: 0;
  z-index: 2300;
  background: rgba(16, 20, 18, .55);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px
}

.terms-modal[hidden] {
  display: none
}

.terms-inner {
  position: relative;
  background: #fff;
  border-radius: 18px;
  padding: 28px 30px 24px;
  width: min(560px, 100%);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(16, 24, 20, .25)
}

.terms-inner h3 {
  margin: 0 0 14px;
  font-size: 18px;
  color: #1a1a1a
}

.terms-body {
  overflow: auto;
  font-size: 13px;
  color: #3a3f45;
  line-height: 1.9;
  white-space: pre-wrap;
  background: #f8faf9;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 16px
}

.terms-agree {
  background: #1b9668;
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .25s
}

.terms-agree:hover {
  background: #157a54
}

/* ===== 订阅管理：分类栏 ===== */
.shop-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 16px
}

.shop-cat {
  border: 1px solid #e3e8e6;
  background: #fff;
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 13px;
  color: #555;
  cursor: pointer;
  transition: all .2s
}

.shop-cat:hover {
  border-color: #1b9668;
  color: #1b9668
}

.shop-cat.on {
  background: #1b9668;
  border-color: #1b9668;
  color: #fff
}

.shop-cat.on:hover {
  color: #fff
}

.shop-loading,
.shop-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted);
  padding: 34px 0;
  font-size: 13px
}

.plan .p small {
  font-size: 13px;
  font-weight: 400;
  color: #8a8f99
}

.shop-dur {
  font-size: 12px;
  color: var(--muted);
  margin-top: -6px
}

/* ===== 下单数量选择 ===== */
.buy-qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2px 0 14px;
  font-size: 13px;
  color: #3a3f45
}

.qty-ctrl {
  display: inline-flex;
  align-items: center;
  border: 1px solid #e3e8e6;
  border-radius: 10px;
  overflow: hidden
}

.qty-btn {
  width: 34px;
  height: 32px;
  border: 0;
  background: #f6f8f7;
  font-size: 16px;
  color: #1a1a1a;
  cursor: pointer
}

.qty-btn:hover {
  background: #eef2f0
}

.qty-num {
  width: 44px;
  text-align: center;
  font-size: 14px;
  font-weight: 600
}

.buy-ok {
  width: 100%;
  margin-top: 10px;
  background: #1b9668;
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .25s
}

.buy-ok:hover {
  background: #157a54
}

.buy-ok:disabled {
  opacity: .6;
  cursor: not-allowed
}

.buy-err {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: #e8590c;
  min-height: 16px
}

/* ===== 下单右侧结果区 ===== */
.buy-result {
  padding: 18px 0 18px 28px;
  border-left: 1px dashed #e3e8e6;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-start
}

.buy-result-t {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 12px
}

.buy-result-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #646464;
  padding: 7px 0
}

.buy-result-row b {
  color: #1a1a1a;
  font-weight: 600
}

.buy-result-row b.r-amount {
  color: #1b9668
}

.buy-result-tip {
  margin-top: 10px;
  font-size: 12px;
  color: #8a8f99
}

.buy-result-done {
  margin-top: 12px;
  padding: 12px;
  background: #f0faf5;
  border-radius: 10px;
  font-size: 12.5px;
  color: #1b9668;
  line-height: 1.8;
  word-break: break-all;
  white-space: pre-line
}

/* ===== 套餐价格折扣 ===== */
.shop-price-extra {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: -6px;
  font-size: 12px
}

.shop-price-extra del {
  color: #b2b7bd
}

.shop-save {
  color: #e8590c;
  background: #fff1e9;
  border-radius: 4px;
  padding: 1px 6px;
  font-weight: 600
}

.shop-member {
  display: inline-block;
  margin-top: 4px;
  font-size: 11px;
  color: #b8860b;
  background: #fdf6e3;
  border-radius: 4px;
  padding: 2px 8px
}

/* ===== 支付测试 ===== */
.pay-panel {
  max-width: 520px
}
.pay-type {
  grid-template-columns: repeat(2, 1fr)
}
.pay-meta {
  grid-template-columns: repeat(2, 1fr)
}
.pay-qr {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px;
  border: 1px dashed #d7deda;
  border-radius: 14px
}
.pay-qr img {
  border: 1px solid #eef0f2;
  border-radius: 8px;
  background: #fff
}
.pay-qr-url {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: #8a919c;
  word-break: break-all;
  text-align: center;
  max-width: 100%
}
.pay-err {
  margin-top: 4px;
  padding: 16px 18px;
  border-radius: 12px;
  background: #fff1f0;
  color: #d4380d;
  font-size: 14px;
  word-break: break-all
}
.pay-qr-box {
  position: relative;
  width: 220px;
  height: 220px;
  border: 1px dashed #d7deda;
  border-radius: 12px;
  background: #fafbfa;
  display: flex;
  align-items: center;
  justify-content: center
}
.pay-qr-ph {
  color: #9aa0a8;
  font-size: 13px
}
.pay-qr-mask {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px
}
.pay-refresh {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: #1b9668;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .3s, background .2s;
  box-shadow: 0 4px 12px rgba(27, 150, 104, .28)
}
.pay-refresh:hover {
  background: #157a54
}
.pay-refresh:active {
  transform: scale(.95)
}
.pay-refresh.spinning svg {
  animation: paySpin 1s linear infinite
}
@keyframes paySpin {
  to { transform: rotate(360deg) }
}
.pay-refresh-tip {
  font-size: 12px;
  color: #646464
}

/* 下单弹窗：支付方式选择 */
.buy-pay {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2px 0 14px;
  font-size: 13px;
  color: #3a3f45
}
.pay-opts {
  display: flex;
  gap: 8px
}
.pay-opt {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 108px;
  padding: 9px 14px;
  border: 1.5px solid #e3e8e6;
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  color: #333;
  transition: border-color .15s, background .15s, color .15s;
  user-select: none
}
.pay-opt:hover {
  border-color: #c9d4ce
}
.pay-opt.on {
  border-color: var(--green);
  background: #f1f7f4;
  color: #0b9a73;
  font-weight: 500
}
.pay-ico {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  flex: none
}
.pay-ico-alipay {
  background: #1677ff
}
.pay-ico-wechat {
  background: #07c160
}
.pay-ck {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--green);
  display: none
}
.pay-ck::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 3px;
  width: 4px;
  height: 7px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg)
}
.pay-opt.on .pay-ck {
  display: block
}
/* 下单弹窗：右侧二维码区（摘要靠上，二维码推到下方展示） */
.buy-qr-area {
  margin-top: auto;
  padding-top: 18px
}
.shop-qr {
  margin-top: 14px;
  padding: 14px
}
.shop-qr img {
  width: 180px;
  height: 180px
}
.shop-qr-tip {
  font-size: 12px;
  color: #8a8f99;
  text-align: center
}
.shop-qr-box {
  margin: 14px auto 0
}

/* 下单弹窗：支付成功遮罩（盖住二维码，提示用户点击确认） */
.pay-qr-wrap {
  position: relative
}
.pay-paid-mask {
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(3px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 2
}
.pay-paid-ok {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #1b9668;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center
}
.pay-paid-t {
  font-size: 15px;
  color: #1b9668;
  font-weight: 600
}
.pay-paid-btn {
  padding: 8px 24px;
  border: none;
  border-radius: 20px;
  background: #1b9668;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: background .2s
}
.pay-paid-btn:hover {
  background: #157a54
}