@import url("./assets/vendor/swiper/swiper-bundle.min.css");

:root {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #31485d;
  background: #f4f8fc;
  line-height: 1.65;
  font-size: 14px;
  --gold: #b98d4c;
  --muted: #8093a5;
  --line: #e7eef5
}

* {
  box-sizing: border-box
}

body {
  margin: 0
}

button,
input,
select,
textarea {
  font: inherit
}

button,
a {
  touch-action: manipulation
}

button {
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: white;
  color: #637e94;
  padding: 11px 16px
}

button:disabled {
  opacity: .5;
  cursor: not-allowed
}

input,
select,
textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #dfe9f2;
  border-radius: 10px;
  background: #fbfdff;
  color: #314b61;
  min-width: 0
}

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid #d5e5f2;
  outline-offset: 2px
}

input[type=checkbox],
input[type=radio] {
  width: 18px !important;
  height: 18px !important;
  padding: 0 !important;
  margin: 0;
  min-width: 18px !important;
  flex-shrink: 0 !important;
  accent-color: var(--gold)
}

label {
  display: block;
  font-size: 12px;
  color: #6f8599;
  margin: 15px 0 8px
}

small,
.muted {
  color: var(--muted);
  font-size: 12px
}

h1,
h2,
h3 {
  font-weight: 550;
  line-height: 1.5
}

h2 {
  font-size: 22px
}

h3 {
  font-size: 16px
}

a {
  color: #9e773e;
  text-decoration: none
}

main.mobile {
  width: 100%;
  max-width: 1140px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  background: #ffffff;
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
  box-sizing: border-box
}

.mobile header {
  padding: calc(18px + env(safe-area-inset-top)) 20px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f7fbffcc;
  gap: 12px
}

.mobile header strong {
  font-size: 18px
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px
}

.brand img {
  height: 31px;
  width: 31px;
  border-radius: 10px
}

.page {
  padding: 0 18px 20px
}

.card {
  background: white;
  /* border: 1px solid var(--line); */
  border-radius: 16px;
  padding: 20px;
  margin: 14px 0;
  box-shadow: 0 5px 22px #7e9cb007
}

.primary {
  background: linear-gradient(110deg, #e7c48e, #ba8b46);
  color: #563e20;
  border-color: #dbb67b;
  font-weight: 550
}

.full {
  display: block;
  width: 100%;
  margin-top: 16px;
  min-height: 46px
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #eef3f7;
  padding: 12px 0
}

.row:last-child {
  border: 0
}

.stack {
  display: grid;
  gap: 10px
}

.hero {
  position: relative;
  padding: 27px 22px;
  min-height: 228px;
  border-radius: 16px;
  background: #cce9fc url('/assets/light-shopping.webp') center/cover;
  margin-bottom: 20px;
  color: white
}

.hero h1 {
  font-family: serif;
  font-size: 30px;
  text-shadow: 0 2px 8px #50759480;
  line-height: 1.6
}

.hero p {
  font-size: 12px;
  max-width: 54%;
  text-shadow: 0 1px 5px #507594
}

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

.platforms a {
  display: block;
  background: #fff;
  padding: 14px 5px;
  border-radius: 11px;
  border: 1px solid var(--line);
  text-align: center;
  font-size: 13px;
  color: #7a8fa2
}

.intro {
  color: #8094a6;
  font-size: 12px;
  line-height: 1.9
}

.sectiontitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 24px 0 10px
}

.sectiontitle h3 {
  margin: 0
}

.sectiontitle a {
  font-size: 12px
}

.content-card {
  display: block;
  text-align: left;
  width: 100%;
  margin-bottom: 11px;
  padding: 17px;
  background: white
}

.content-card b {
  display: block;
  color: #4f6d84;
  font-size: 15px
}

.content-card small {
  display: block;
  margin-top: 7px
}

.badge {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 14px;
  background: #fbf4e7;
  color: #aa864d
}

.empty {
  text-align: center;
  padding: 38px 10px;
  color: #8ca0b3;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px
}

.bottom {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1140px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 10px 0 calc(13px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  z-index: 20;
  box-sizing: border-box
}

.bottom a {
  text-align: center;
  color: #8d9cad;
  font-size: 11px;
  display: grid;
  justify-items: center;
  gap: 4px
}

.bottom .active {
  color: #b58c4b
}

.icon {
  height: 25px;
  width: 25px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round
}

.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 8px
}

.services>a,
.services>button {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  text-align: center;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 9px;
  font-size: 12px;
  border-right: 1px solid #edf2f7;
  border-bottom: 1px solid #edf2f7;
  color: #60798d
}

.services>:nth-child(3n) {
  border-right: 0
}

.services>:nth-child(n+4) {
  border-bottom: 0
}

.services .icon {
  height: 31px;
  width: 31px;
  color: #c4a16b
}

.money {
  font: 500 34px Arial, sans-serif;
  color: #a58143;
  margin: 15px 0
}

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

.stats>div {
  min-width: 0
}

.stats b {
  font: 500 22px Arial, sans-serif;
  display: block;
  color: #a5844a;
  margin: 9px 0;
  overflow-wrap: anywhere
}

.profile h2 {
  margin-bottom: 5px
}

.profile p {
  margin: 5px 0;
  color: #8094a7;
  font-size: 12px
}

.member-card {
  padding: 42px 23px;
  min-height: 220px;
  background: #fff9ed url('/assets/light-membership.webp') center/100% 100%;
  border: 0
}

.member-card>span {
  font-size: 9px;
  letter-spacing: 1px;
  color: #ab8a58
}

.member-card h2 {
  font-family: serif;
  font-size: 25px;
  color: #77552e;
  max-width: 65%
}

.plan {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(110deg, #fffdf8, #fcf4e7);
  border-color: #d9ba86
}

.plan b {
  font-size: 18px
}

.plan strong {
  font: 500 30px Arial;
  color: #a47c3d
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 18px 0;
  font-size: 12px;
  line-height: 1.8
}

.check input {
  flex-shrink: 0
}

.auth {
  box-sizing: border-box;
  width: 100%;
  max-width: 100% !important;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 !important;
  padding: calc(24px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));
  background: #eaf6ff url('/assets/login-sky.webp') center/cover no-repeat fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-y: auto
}

.auth-box {
  width: 100%;
  max-width: 440px;
  margin: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column
}

.auth-head {
  text-align: center;
  padding: 10px 0 16px;
  width: 100%
}

.monogram {
  font: 600 56px Georgia;
  color: #bd9557;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
  line-height: 1
}

.logo-note {
  font-size: 11px;
  letter-spacing: 3px;
  color: #9f7d45;
  margin-top: 4px
}

.auth-head h1 {
  font-family: serif;
  font-size: 28px;
  color: #24445f;
  margin: 12px 0 4px;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5)
}

.auth-head p {
  font-size: 13px;
  color: #486d87;
  margin: 0
}

.auth .card {
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 26px 22px;
  border-radius: 22px;
  box-shadow: 0 20px 48px rgba(18, 42, 70, 0.14), 0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.85)
}

.inline {
  display: flex;
  align-items: center;
  gap: 9px
}

.inline input {
  flex: 1
}

.inline button {
  white-space: nowrap;
  font-size: 12px;
  min-height: 44px;
  padding: 9px
}

.auth-foot {
  text-align: center;
  color: #657f94;
  font-size: 12px;
  margin-top: 28px
}

.auth-back {
  background: #ffffff90;
  border-radius: 50%;
  height: 37px;
  width: 37px;
  padding: 0
}

.notice {
  padding: 12px 14px;
  background: #edf5fd;
  border: 1px solid #dcebf8;
  border-radius: 10px;
  font-size: 12px;
  color: #688ba8;
  margin: 15px 0
}

.error {
  color: #aa5b47;
  background: #fff4ed
}

.protocol {
  height: 48dvh;
  overflow: auto;
  line-height: 1.95;
  white-space: pre-wrap;
  padding: 16px;
  background: #fff;
  border: 1px solid #e6edf4;
  border-radius: 13px;
  font-size: 13px
}

.viewer {
  width: 100%;
  height: 65dvh;
  border: 1px solid #e3ebf2;
  border-radius: 12px;
  background: #fff
}

.watermark {
  font-size: 12px;
  color: #8c9bad;
  text-align: center;
  margin: 10px
}

.admin-body {
  background: #f3f7fb
}

.admin-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  min-height: 100dvh
}

.sidebar {
  padding: 28px 18px;
  background: white;
  border-right: 1px solid #e1eaf3
}

.sidebar h2 {
  margin: 0 0 25px;
  font-size: 21px;
  color: #506f89
}

.sidebar a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 11px;
  border-radius: 9px;
  color: #8c9eaf;
  font-size: 13px;
  margin: 4px 0
}

.sidebar .active {
  background: #edf5fd;
  color: #668bab;
  box-shadow: inset 3px 0 #c2a16a
}

.admin-main {
  padding: 30px 35px;
  min-width: 0
}

.admin-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 24px;
  border-bottom: 1px solid #e3ecf5;
  margin-bottom: 22px;
  gap: 10px
}

.admin-head h1 {
  font-size: 24px;
  margin: 0
}

.admin-login {
  max-width: 420px;
  margin: 12vh auto
}

.tablewrap {
  max-width: 100%;
  overflow: auto;
  background: white;
  border: 1px solid #e3ecf4;
  border-radius: 13px;
  padding: 10px 13px;
  margin: 20px 0
}

table {
  border-collapse: collapse;
  white-space: nowrap;
  width: 100%;
  font-size: 12px
}

td,
th {
  padding: 13px 11px;
  border-bottom: 1px solid #edf2f7;
  text-align: left
}

th {
  background: #f3f8fc;
  font-size: 11px;
  color: #8b9fb2;
  font-weight: 500
}

td button {
  font-size: 11px;
  padding: 6px 9px;
  margin: 2px
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 15px
}

.admin-grid .card {
  margin: 0
}

.admin-grid b {
  font: 500 29px Arial;
  display: block;
  margin: 18px 0;
  color: #6689a4
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap
}

.toolbar input {
  max-width: 200px
}

.readiness {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px
}

.readiness .card {
  margin: 0
}

.readiness b {
  display: block;
  margin-bottom: 12px
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #3a52665b;
  padding: 20px;
  backdrop-filter: blur(5px)
}

.modal>div {
  width: 440px;
  max-width: 100%;
  max-height: 88dvh;
  overflow: auto;
  background: #fff;
  border: 1px solid #e5edf5;
  border-radius: 19px;
  padding: 24px
}

.modal h2 {
  margin-top: 0
}

.modal .close {
  float: right;
  padding: 2px 7px;
  font-size: 21px;
  border: 0
}

.danger {
  color: #a7634b
}

#toast {
  position: fixed;
  bottom: calc(35px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 20px;
  background: #5d7c96;
  color: #fff;
  border-radius: 12px;
  font-size: 13px;
  max-width: 90vw;
  z-index: 99;
  display: none
}

#toast.show {
  display: block
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px
}

.admin-main textarea {
  min-height: 200px;
  line-height: 1.9;
  resize: vertical
}

.logo-note {
  font-size: 10px;
  letter-spacing: 2px;
  color: #ab9164
}

.mobile .full {
  font-size: 14px
}

@media(max-width:820px) {
  .admin-shell {
    display: block
  }

  .sidebar {
    display: flex;
    overflow: auto;
    padding: 8px;
    gap: 6px
  }

  .sidebar h2 {
    display: none
  }

  .sidebar a {
    white-space: nowrap;
    margin: 0;
    flex-shrink: 0;
    padding: 9px 11px;
    font-size: 12px
  }

  .sidebar .icon {
    width: 17px;
    height: 17px
  }

  .admin-main {
    padding: 23px 14px
  }

  .admin-grid {
    grid-template-columns: repeat(2, 1fr)
  }

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

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

  input,
  textarea,
  select {
    font-size: 16px
  }

  .page {
    padding: 0 15px 18px
  }

  .auth {
    padding-left: 19px;
    padding-right: 19px
  }

  .auth-head {
    padding: 20px 0
  }

  .stats b {
    font-size: 20px
  }

  .protocol {
    height: 44dvh
  }

  .admin-head h1 {
    font-size: 21px
  }
}

@media(max-width:360px) {
  .auth .card {
    padding: 22px 15px
  }

  .stats b {
    font-size: 18px
  }

  .member-card h2 {
    font-size: 22px
  }

  .services>a,
  .services>button {
    font-size: 11px
  }
}

/* 电商京东/淘宝折扣券精美现代视觉样式 */
.pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 12px;
  scrollbar-width: none
}

.pills::-webkit-scrollbar {
  display: none
}

.pill {
  white-space: nowrap;
  padding: 7px 15px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #dce8f2;
  color: #678198;
  font-size: 12px;
  font-weight: 500;
  transition: all .2s ease;
  cursor: pointer
}

.pill.active {
  background: linear-gradient(110deg, #b98d4c, #9e773e);
  color: #fff;
  border-color: #b98d4c;
  box-shadow: 0 3px 10px #b98d4c33
}

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

.coupon-card {
  display: flex;
  gap: 14px;
  background: #fff;
  /* border: 1px solid var(--line); */
  border-radius: 15px;
  padding: 12px;
  box-shadow: 0 4px 18px #597d970a;
  transition: transform .2s ease, box-shadow .2s ease;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden
}

.coupon-card:active {
  transform: scale(.985)
}

.coupon-thumb {
  position: relative;
  width: 105px;
  height: 105px;
  flex-shrink: 0;
  border-radius: 11px;
  overflow: hidden;
  background: #f3f7fb
}

.coupon-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.platform-tag {
  position: absolute;
  top: 5px;
  left: 5px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
  line-height: 1.2
}

.platform-jd {
  background: linear-gradient(135deg, #ff3434, #e1251b)
}

.platform-tao {
  background: linear-gradient(135deg, #ff6b00, #ff5000)
}

.platform-tmall {
  background: linear-gradient(135deg, #ff1e38, #d9001b)
}

.coupon-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between
}

.coupon-title {
  font-size: 13px;
  line-height: 1.45;
  color: #2c4356;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 4px
}

.coupon-sub {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #859bb0;
  margin-bottom: 6px
}

.coupon-ticket {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #fff2f0;
  border: 1px dashed #ff7875;
  color: #f5222d;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  width: fit-content
}

.coupon-bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto
}

.coupon-prices {
  display: flex;
  align-items: baseline;
  gap: 6px
}

.price-actual {
  font-size: 18px;
  font-weight: 700;
  color: #e1251b;
  font-family: Arial, sans-serif
}

.price-actual small {
  font-size: 11px;
  font-weight: normal
}

.price-origin {
  font-size: 11px;
  color: #a0b2c3;
  text-decoration: line-through
}

.coupon-action {
  background: linear-gradient(110deg, #e1251b, #ff4142);
  color: #fff;
  border: 0;
  border-radius: 18px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 3px 9px #e1251b33;
  white-space: nowrap;
  cursor: pointer;
  text-align: center
}

.coupon-search {
  display: flex;
  gap: 8px;
  margin-bottom: 14px
}

.coupon-search input {
  padding: 10px 14px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid #d9e6f2
}

.coupon-search button {
  border-radius: 22px;
  padding: 9px 18px;
  white-space: nowrap
}

/* 套餐选择卡片自适应网格 */
.pkg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
  margin: 14px 0;
  align-items: stretch
}

.pkg-grid.cols-1 {
  grid-template-columns: 1fr
}

.pkg-grid.cols-2 {
  grid-template-columns: repeat(2, 1fr)
}

.pkg-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr)
}

.pkg-grid.cols-4 {
  grid-template-columns: repeat(2, 1fr)
}

.pkg-card {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 12px 8px;
  text-align: center;
  position: relative;
  cursor: pointer;
  transition: all .2s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  box-sizing: border-box
}

.pkg-card.active {
  border-color: #b98d4c;
  background: linear-gradient(180deg, #fffdf9, #fcf4e8);
  box-shadow: 0 4px 14px #b98d4c26
}

.pkg-badge {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(110deg, #e1251b, #ff5252);
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  white-space: nowrap;
  z-index: 2
}

.pkg-title {
  font-size: 13px;
  color: #354d61;
  font-weight: 600;
  margin-top: 4px;
  line-height: 1.3
}

.pkg-price {
  font-size: 20px;
  font-weight: 700;
  color: #9e773e;
  margin: 5px 0 2px
}

.pkg-price small {
  font-size: 12px;
  margin-right: 1px
}

.pkg-origin {
  font-size: 11px;
  color: #9eafbf;
  text-decoration: line-through
}

.pkg-desc {
  font-size: 11px;
  color: #7e93a6;
  margin-top: 6px;
  line-height: 1.35
}

/* 单套餐精美横卡自适应 */
.pkg-grid.cols-1 .pkg-card {
  padding: 16px 18px;
  flex-direction: row;
  align-items: center;
  text-align: left
}

.pkg-grid.cols-1 .pkg-badge {
  left: 18px;
  transform: none
}

.pkg-grid.cols-1 .pkg-title {
  font-size: 15px
}

.pkg-grid.cols-1 .pkg-desc {
  margin-top: 4px;
  font-size: 12px
}

.pkg-grid.cols-1 .pkg-price-wrap {
  text-align: right;
  flex-shrink: 0
}

/* 双套餐自适应宽卡优化 */
.pkg-grid.cols-2 .pkg-card {
  padding: 15px 12px
}

.pkg-grid.cols-2 .pkg-title {
  font-size: 14px
}

.pkg-grid.cols-2 .pkg-price {
  font-size: 22px
}

.pkg-grid.cols-2 .pkg-desc {
  font-size: 11px;
  margin-top: 6px
}

/* 签到打卡按钮 */
.checkin-btn {
  background: linear-gradient(110deg, #fff3db, #ffe8be);
  color: #8d6529;
  border: 1px solid #ebd09c;
  border-radius: 18px;
  padding: 4px 11px;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer
}

.checkin-btn.done {
  background: #f1f5f9;
  color: #94a3b8;
  border-color: #e2e8f0;
  cursor: default
}

/* 宽带专区精美样式 */
.broadband-hero {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #fff;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 15px;
  position: relative;
  overflow: hidden
}

.broadband-hero h2 {
  margin: 0 0 6px;
  font-size: 20px;
  color: #fff
}

.broadband-hero p {
  margin: 0;
  font-size: 12px;
  opacity: .9
}

.plan-select-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0
}

.plan-option {
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: #fff;
  cursor: pointer;
  transition: all .2s ease
}

.plan-option.selected {
  border-color: #0284c7;
  background: #f0f9ff;
  box-shadow: 0 3px 12px #0284c71a
}

.plan-option b {
  display: block;
  font-size: 13px;
  color: #1e3a5f;
  margin-bottom: 4px
}

.plan-option span {
  font-size: 11px;
  color: #64748b;
  display: block
}

/* 全端多页面全面自适应布局 (手机端满屏 / 平板与PC大屏响应式网格) */
#app {
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

body {
  margin: 0;
  background: #f1f5f9;
}

/* 优惠券多列响应式网格 */
.coupon-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* 学习中心资料卡片响应式网格 */
#libraryCardsWrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

#libraryCardsWrap .content-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  overflow-wrap: anywhere;
}

#libraryCardsWrap .library-cover {
  flex: none;
  width: clamp(72px, 23vw, 104px);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
}

#libraryCardsWrap .library-card-text {
  min-width: 0;
}

#libraryCardsWrap .empty {
  grid-column: 1 / -1;
}

/* 平板与大屏断点适配 (>= 680px) */
@media (min-width: 680px) {
  body {
    background: #edf3f8;
  }

  main.mobile {
    background: #f8fafc;
    box-shadow: 0 4px 30px rgba(15, 23, 42, 0.06);
    border-left: 1px solid #e2e8f0;
    border-right: 1px solid #e2e8f0;
  }

  .page {
    padding: 20px 28px 30px;
  }

  .mobile header {
    padding: 18px 28px;
  }

  .platforms {
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
  }

  .coupon-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  #libraryCardsWrap {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .services {
    grid-template-columns: repeat(6, 1fr);
    padding: 12px;
  }

  .services a {
    min-height: 96px;
    border-right: 1px solid #edf2f7;
    border-bottom: 1px solid #edf2f7;
  }

  .services a:nth-child(3n) {
    border-right: 1px solid #edf2f7;
  }

  .services a:nth-child(6n) {
    border-right: 0;
  }

  .plan-select-wrap {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  .hero {
    min-height: 250px;
    padding: 32px 32px;
  }

  .hero h1 {
    font-size: 32px;
  }

  .member-card {
    min-height: 230px;
    padding: 40px 32px;
  }

  .bottom a {
    font-size: 12px;
    padding: 4px 0;
  }
}

/* 桌面宽屏更宽广适配 (>= 1024px) */
@media (min-width: 1024px) {
  .page {
    padding: 24px 36px 36px;
  }

  .mobile header {
    padding: 20px 36px;
  }

  .coupon-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  #libraryCardsWrap {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .stats {
    gap: 20px;
  }

  .hero {
    min-height: 280px;
    padding: 40px 40px;
  }

  .hero h1 {
    font-size: 36px;
  }
}




/* 前端调整｜首页轮播与公告、个人中心与设置、后台搜索与首页运营配置。 */
/* Homepage and account entry points */
.home-feature {
  margin-bottom: 12px;
  overflow: hidden;
  border-radius: 16px;
  --swiper-pagination-color: #fff;
  --swiper-pagination-bullet-inactive-color: #fff;
  --swiper-pagination-bullet-inactive-opacity: .45
}

.home-feature .swiper-wrapper {
  align-items: stretch
}

.home-feature .home-slide {
  flex-shrink: 0;
  width: 100%;
  height: auto;
  margin-bottom: 0;
  box-sizing: border-box
}

.home-page-h5 > .home-feature .home-slide {
  min-height: 152px;
}

@media (min-width: 680px) {
  .home-page-h5 > .home-feature .home-slide {
    min-height: calc(250px * 2 / 3);
  }
}

@media (min-width: 1024px) {
  .home-page-h5 > .home-feature .home-slide {
    min-height: calc(280px * 2 / 3);
  }
}

.home-feature .swiper-pagination-bullet {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  box-shadow: 0 1px 4px #0003
}

.home-feature .swiper-pagination-bullet-active {
  width: 18px;
  border-radius: 5px
}

.home-feature .swiper-pagination-lock {
  display: none
}

.home-feature img {
  user-select: none;
  -webkit-user-drag: none
}

.home-slide {
  display: block;
  overflow: hidden;
  text-decoration: none;
  color: #fff
}

.home-slide[hidden],
#homeBannerPreview[hidden],
.admin-main tr[hidden] {
  display: none
}

.home-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.home-slide.ad-slide {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  min-height: 0;
  background: #fff;
  color: inherit;
  /* border: 1px solid var(--line); */
  border-radius: 14px;
  margin-bottom: 0
}

.home-slide.ad-slide[hidden] {
  display: none
}

.home-slide.ad-slide img {
  position: static;
  display: block;
  flex: 1;
  min-height: 0;
  width: 100%;
  height: 0;
  max-height: none;
  object-fit: cover
}

.home-ad-title {
  flex-shrink: 0;
  max-height: 40%;
  overflow: auto;
  margin: 0;
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.6;
  overflow-wrap: anywhere;
  color: #31485d
}

.home-ad-popup {
  width: min(90vw, 420px);
  height: 60vh;
  height: 60dvh;
  max-height: none;
  overflow: visible;
  padding: 0;
  border: 0;
  background: transparent
}

.home-ad-popup[open] {
  display: flex;
  flex-direction: column;
  gap: 14px
}

.home-ad-popup::backdrop {
  background: #0009
}

.home-ad-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 16px 8px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 60px #0003
}

.home-ad-card .home-feature {
  flex: 1;
  min-height: 0;
  margin: 0
}

.home-ad-popup [data-ad-close] {
  display: grid;
  place-items: center;
  align-self: center;
  flex: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid #fffc;
  border-radius: 50%;
  background: #0004;
  color: #fff;
  font-size: 28px;
  line-height: 1
}

.team-level-summary {
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #f8fafc;
  font-size: 13px;
}

.team-level-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.team-level-name,
.team-level-auto {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

.team-level-name {
  border: 1px solid #fed7aa;
  background: #fff7ed;
  color: #c2410c;
}

.team-level-auto {
  background: #ecfdf5;
  color: #047857;
}

.team-level-progress {
  margin-top: 8px;
  padding: 8px 12px;
  border: 1px solid #f1f5f9;
  border-radius: 8px;
  color: #334155;
}

.member-level-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px
}

.member-level-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  object-fit: contain;
  text-align: center;
  line-height: 20px
}

.avatar-level-icon {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 24px;
  height: 24px;
  object-fit: contain;
  text-align: center;
  line-height: 24px;
  font-size: 20px;
  z-index: 2;
  pointer-events: none
}

.reconcile-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin: 18px 0
}

.reconcile-metrics>div {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px
}

.reconcile-metrics dt {
  font-size: 12px;
  color: var(--muted)
}

.reconcile-metrics dd {
  margin: 6px 0 0;
  font-size: 18px
}

.reconcile-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px
}

.announcement-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 80px;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 12px
}

.announcement-title {
  min-width: 0;
  overflow-wrap: anywhere
}

.announcement-pinned {
  color: #e53935;
  white-space: nowrap
}

.announcement-type {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  white-space: nowrap
}

.announcement-type .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0
}

.home-notices {
  margin-bottom: 18px
}

.home-notices .sectiontitle>a {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap
}

.home-notices .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0
}

.home-notice-list {
  list-style: none;
  margin: 0;
  padding: 0 14px;
  /* border: 1px solid var(--line); */
  border-radius: 12px;
  background: #fff
}

.home-notice-list li+li {
  border-top: 1px solid var(--line)
}

.home-notice-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 12px 0;
  color: inherit
}

.home-notice-title {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.6
}

.home-notice-empty {
  padding: 14px 0;
  color: var(--muted);
  font-size: 13px
}

.announcement-list {
  padding-top: 14px
}

.announcement-detail h2 {
  margin-top: 0
}

.announcement-detail p {
  white-space: pre-wrap;
  overflow-wrap: anywhere
}

.profile-links.card {
  padding: 0
}

.profile-links>a,
.profile-links>button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 46px;
  padding: 10px 16px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  text-decoration: none;
  font: inherit
}

.profile-links>:last-child {
  border-bottom: 0
}

.profile-links span,
.profile-links small {
  color: #596573
}

.profile-links>button:disabled {
  color: #687482
}

.preferences-page {
  padding: 8px 0 20px
}

.preferences-page .preferences-links {
  margin-bottom: 20px;
  padding: 4px 0
}

.preferences-links>button {
  min-height: 58px;
  padding: 14px 16px;
  line-height: 1.5
}

.preferences-page #logout {
  min-height: 46px;
  padding: 12px 16px
}

.home-admin-section label {
  display: block;
  margin-bottom: 12px
}

.settings-copy {
  white-space: pre-wrap;
  overflow-wrap: anywhere
}

.admin-search {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px
}

.admin-search input {
  flex: 1 1 250px;
  max-width: 440px
}

.admin-search small {
  color: #596573
}

.home-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  align-items: start;
  gap: 14px
}

.home-admin-section h2 {
  margin: 0 0 14px;
  font-size: 17px
}

.home-admin-section input,
.home-admin-section select,
.home-admin-section textarea {
  display: block;
  width: 100%;
  margin-top: 5px
}

#homeBannerPreview {
  width: 100%;
  max-height: 180px;
  object-fit: contain;
  margin-bottom: 12px;
  border-radius: 8px
}

/* 前端调整｜二级页返回入口和前后台共用的协议阅读样式。 */
.mobile header .header-back {
  flex-shrink: 0;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  white-space: nowrap
}

.policy-reader {
  max-height: 55vh;
  overflow: auto;
  margin: 10px 0 14px;
  padding: 12px 0;
  border-block: 1px solid var(--line);
  color: #334155;
  font-size: 14px;
  line-height: 1.75;
  white-space: pre-wrap;
  overflow-wrap: anywhere
}

/* 前端调整｜学习、订单、收益明细及提现表单使用一致的间距和层级。 */
.mobile-section {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden
}

.mobile-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 16px
}

.mobile-section-heading h2 {
  font-size: 18px;
  margin: 0
}

.mobile-section-heading p {
  font-size: 12px;
  color: #596573;
  margin: 4px 0 0
}

.mobile-section-heading button {
  font-size: 12px
}

.learning-filters {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 0
}

.mobile .material-detail {
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(14px, 4vw, 28px);
  overflow-wrap: anywhere
}

.mobile .material-heading {
  display: block;
  padding: 0 0 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
  background: transparent
}

.material-heading h1 {
  margin: 8px 0 4px;
  color: #243d52;
  font-size: clamp(22px, 5vw, 30px);
  font-weight: 700;
  line-height: 1.4
}

.material-date,
.material-description {
  margin: 6px 0 0;
  color: #52697d
}

.material-date {
  font-size: 12px
}

.material-description {
  white-space: pre-line
}

.material-body {
  color: #334155;
  font-size: 15px;
  line-height: 1.85;
  overflow-x: auto
}

.material-body img {
  max-width: 100%;
  height: auto
}

.material-video {
  display: block;
  width: 100%;
  max-height: 70vh;
  border-radius: 12px;
  background: #000
}

.material-pdf-tools,
.material-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  color: #52697d;
  font-size: 13px
}

.material-pdf-tools {
  margin-bottom: 10px
}

.material-pdf-tools a,
.material-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 12px;
  border: 1px solid var(--line);
  border-radius: 10px
}

.material-pdf {
  min-height: 55vh;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fafc
}

.material-footer {
  margin-top: 18px;
  padding-top: 10px;
  border-top: 1px solid var(--line)
}

.material-footer .watermark {
  margin: 0;
  color: inherit
}

.learning-filters button {
  flex-shrink: 0
}

.learning-filters button,
.ledger-switch button {
  white-space: nowrap
}

.team-fan-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0
}

.team-fan-actions span {
  margin-right: auto;
  color: #64748b;
  font-size: 12px
}

.team-fan-actions button {
  padding: 8px 12px;
  font-size: 13px
}

.learning-filters button[aria-pressed=true],
.ledger-switch button[aria-pressed=true] {
  background: #fff1d8;
  border-color: #d7ad64;
  color: #663f0c;
  font-weight: 700
}

.mobile-order time,
.mobile-order-number {
  color: #596573;
  font-size: 12px
}

.mobile-order {
  padding: 14px 16px;
  border-top: 1px solid var(--line)
}

.mobile-order>div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 6px
}

.mobile-order-number {
  overflow-wrap: anywhere
}

.mobile-order .badge {
  flex-shrink: 0
}

.ledger-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--line)
}

.ledger-list {
  padding: 0 16px
}

.ledger-list>div {
  gap: 12px
}

.ledger-list>div>div:first-child {
  min-width: 0;
  overflow-wrap: anywhere
}

.withdraw-fields label {
  display: block;
  margin-top: 12px
}

.withdraw-fields input,
.withdraw-fields select {
  min-height: 42px
}

/* 前端调整｜恢复 H5 原有浅蓝与暖金基调，新入口沿用同一套配色。 */
:root {
  --ink: #31485d;
  --accent: #9e773e
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #8aaecb;
  outline-offset: 2px
}

.account-entry-icon {
  background: #edf5fd;
  color: #52789b
}

/* 前端调整｜恢复后台浅蓝工作区、白色侧栏和金色主操作，样式限定在后台。 */
.admin-body {
  background: #f1f6fa;
  color: #31485d;
  --line: #dce7f1;
  --muted: #657d94;
  --accent: #52789b;
  --gold: #b98d4c
}

.admin-body a {
  color: var(--accent)
}

.admin-body button {
  border-radius: 10px;
  color: #52718c
}

.admin-body input,
.admin-body select,
.admin-body textarea {
  border-radius: 9px;
  background: #fbfdff;
  color: #314b61
}

.admin-body .primary {
  background: linear-gradient(110deg, #e7c48e, #ba8b46);
  border-color: #dbb67b;
  color: #563e20;
  font-weight: 550
}

.admin-body .card,
.admin-body .tablewrap {
  border-radius: 14px;
  box-shadow: none
}

.admin-body .tablewrap {
  padding: 0
}

.permission-node-table table,
.permission-node-table th,
.permission-node-table td button {
  font-size: 15px
}

.admin-body .permission-node-table .tablewrap {
  border: 0;
  border-radius: 0
}

.permission-node-table th,
.permission-node-table td {
  padding: 11px 14px;
  border-bottom: 1px solid #e6ebf5
}

.permission-node-table .permission-module-row td:first-child {
  padding: 0
}

.permission-node-table button[data-permission-toggle] {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  margin: 0;
  padding: 11px 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  text-align: left
}

.permission-node-table button[data-permission-toggle] span {
  width: 7px;
  height: 7px;
  flex: none;
  border: solid currentColor;
  border-width: 0 1px 1px 0;
  transform: rotate(-45deg)
}

.permission-node-table button[data-permission-toggle][aria-expanded="true"] span {
  transform: rotate(45deg)
}

.permission-node-table tr[data-permission-group] td:first-child {
  padding-left: 44px
}

.admin-body .badge {
  background: #fbf4e7;
  color: #8a662d
}

.admin-body th {
  background: #f3f8fc;
  color: #5f7992
}

.admin-body td,
.admin-body th {
  border-color: var(--line)
}

.admin-shell {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}

.admin-shell>.sidebar,
.admin-shell>.admin-main {
  overflow: auto;
  overscroll-behavior: contain;
}

@media(max-width:820px) {
  .admin-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
}

.sidebar {
  background: #fff;
  border-color: var(--line)
}

.sidebar h2 {
  color: #506f89;
  font-weight: 700
}

.sidebar a {
  color: #66839e;
  border-radius: 9px
}

.sidebar .active {
  background: #edf5fd;
  color: #52789b;
  box-shadow: inset 3px 0 #c2a16a
}

.admin-head {
  border-color: var(--line)
}

.admin-head h1 {
  font-weight: 700
}

.dashboard-section {
  margin-bottom: 18px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 2px 12px #274c6c09
}

.dashboard-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px
}

.dashboard-heading h2 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: #192838
}

.dashboard-heading .icon {
  width: 18px;
  height: 18px
}

.dashboard-heading p,
.dashboard-metrics p {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted)
}

.dashboard-date {
  display: grid;
  justify-items: start;
  gap: 8px
}

.dashboard-date input {
  width: min(200px, 100%);
  padding: 7px 10px
}

.dashboard-date button {
  padding: 6px 14px;
  white-space: nowrap
}

.dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0
}

.dashboard-metrics>div {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 16px;
  min-width: 0
}

.dashboard-metrics dt {
  font-size: 12px;
  color: var(--muted)
}

.dashboard-metrics dd {
  margin: 8px 0 0;
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  color: #18283b
}

.dashboard-metrics-total>div:nth-child(1) {
  background: #fbf6ed;
  border-color: #edce9a
}

.dashboard-metrics-total>div:nth-child(1) dd {
  color: #a64f12
}

.dashboard-metrics-total>div:nth-child(2) {
  background: #f2f6f9
}

.dashboard-metrics-total>div:nth-child(3) {
  background: #e8f9ef;
  border-color: #b5e5c6
}

.dashboard-metrics-total>div:nth-child(3) dd,
.dashboard-metrics .dashboard-pending {
  color: #13754f
}

.dashboard-metrics-total>div:nth-child(4) dd {
  color: #2679b7
}

.dashboard-metrics .metric-attention {
  color: #a0372c
}

@media(max-width:1050px) {
  .dashboard-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
}

@media(max-width:360px) {
  .coupon-thumb {
    width: 78px;
    height: 78px
  }

  .coupon-prices {
    flex-wrap: wrap
  }

  .dashboard-metrics>div {
    padding: 12px
  }
}

/* 前端调整｜个人中心图标沿用导航的线宽和单色样式。 */
.account-entry-icon {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  height: 32px;
  border-radius: 8px
}

.account-entry-icon .icon {
  width: 18px;
  height: 18px
}

/* 前端调整｜后台按字段排列筛选项，分页操作独立显示在表格下方。 */
.admin-list-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 155px), 1fr));
  align-items: end;
  gap: 10px 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px
}

.admin-list-filters label,
.admin-list-pager label {
  margin: 0;
  color: var(--ink)
}

.admin-list-filters input,
.admin-list-filters select {
  display: block;
  margin-top: 5px;
  padding: 7px 9px
}

.admin-list-filters button {
  justify-self: start;
  padding: 7px 12px;
  white-space: nowrap
}

.admin-list-filters.access-list-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end
}

.access-list-filters>label {
  flex: 0 1 180px;
  max-width: 100%
}

.admin-list-filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 100%
}

.member-row-actions {
  display: flex;
  flex-wrap: wrap;
  min-width: 190px;
  max-width: 330px
}

.admin-list-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 18px
}

.admin-list-pager[hidden] {
  display: none
}

.admin-list-pager [role=status] {
  margin-right: auto;
  color: var(--muted);
  font-size: 13px
}

.admin-list-pager label {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap
}

.admin-list-pager select {
  width: auto;
  padding: 6px 8px
}

.admin-list-pager button {
  padding: 6px 10px
}

.admin-main td .icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: middle
}

/* 前端调整｜内容列表工具栏和新增弹窗布局。 */
.content-list-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px
}

.content-list-heading h3 {
  margin: 0
}

.content-create-modal>.admin-modal-panel {
  width: 700px
}

.admin-modal>.admin-modal-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  max-height: min(88dvh, calc(100dvh - 40px))
}

.admin-modal-header,
.admin-modal-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  padding: 14px 20px;
  background: #fff
}

.admin-modal-header {
  justify-content: space-between;
  border-bottom: 1px solid var(--line)
}

.admin-modal-header h2 {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 19px
}

.admin-modal-header .close {
  flex: none;
  min-width: 36px;
  min-height: 36px;
  line-height: 1
}

.admin-modal-body {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 16px 20px
}

.admin-modal-footer {
  justify-content: flex-end;
  flex-wrap: wrap;
  border-top: 1px solid var(--line)
}

.admin-modal-footer button {
  margin: 0 !important
}

.admin-modal-footer .full {
  width: auto;
  min-height: 0
}

.admin-modal-body .policy-reader {
  max-height: none;
  overflow: visible
}

.admin-rich-modal>.admin-modal-panel {
  width: 700px
}

.admin-rich-modal .jodit-wysiwyg img {
  max-width: 100%;
  height: auto
}

.admin-content-cover {
  width: 48px;
  height: 36px;
  object-fit: cover;
  border-radius: 4px;
  vertical-align: middle;
  margin-right: 8px
}

.profile-header-card {
  text-align: center
}

.profile-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px
}

#profileAvatarButton {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 50%
}

#profileAvatar {
  display: block;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover
}

#profileNameButton {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  border: 0;
  padding: 4px 8px;
  color: #0f172a;
  font-size: 17px;
  font-weight: 700;
  overflow-wrap: anywhere
}

#profileNameButton .icon {
  flex: none;
  width: 16px;
  height: 16px;
  color: #64748b
}

/* H5 业务页：统一页面外壳、内容密度和操作反馈。 */
main.mobile {
  --page-gutter: clamp(14px, 4vw, 32px);
  --panel-padding: clamp(16px, 3vw, 24px);
  --panel-radius: 14px;
  --line: #dfe8f0;
  --muted: #566b7e;
  --accent: #82591e;
  --accent-surface: #fff2db;
  --focus: #386487;
  --mobile-page-bg: #f5f8fb;
  background: var(--mobile-page-bg);
  color: #243a4e;
  border: 0;
  box-shadow: none;
  padding-bottom: calc(70px + env(safe-area-inset-bottom));
}

main.mobile:not(:has(> .bottom)) {
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

.mobile>header {
  position: sticky;
  top: 0;
  z-index: 19;
  min-height: calc(60px + env(safe-area-inset-top));
  padding: calc(8px + env(safe-area-inset-top)) var(--page-gutter) 8px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.mobile>header .brand {
  gap: 10px;
}

.mobile>header strong {
  font-size: 17px;
  font-weight: 700;
}

.mobile>header .header-back {
  min-height: 44px;
  padding-inline: 10px;
  color: var(--accent);
  background: #fffaf0;
  border-color: #eee1c9;
}

.mobile>.page {
  width: 100%;
  max-width: 780px;
  min-width: 0;
  margin-inline: auto;
  padding: 16px var(--page-gutter) 24px;
  overflow-wrap: anywhere;
}

.mobile>.page:has(> .mine-profile-h5) {
  --mine-page-inset: max(var(--page-gutter), calc((100% - 780px) / 2 + var(--page-gutter)));
  max-width: none;
  padding: 0 0 24px;
}

.mobile>.page:has(> .mine-profile-h5)> :not(.mine-profile-h5) {
  margin-inline: var(--mine-page-inset);
}

.mine-profile-h5 {
  padding: calc(34px + env(safe-area-inset-top)) var(--mine-page-inset) 18px;
  background: linear-gradient(to bottom, var(--accent-surface), var(--mobile-page-bg));
}

.mobile .page .mine-profile-h5 a {
  color: inherit;
}

.mobile>.page:has(.home-feature, .coupon-list, #libraryCardsWrap, .viewer) {
  max-width: none;
}

.mobile>.page> :first-child {
  margin-top: 0;
}

.mobile>.page> :last-child {
  margin-bottom: 0;
}

.mobile .page :where(h2, h3, h4) {
  line-height: 1.4;
}

.mobile .page :where(.card, .mobile-section, .coupon-card, .content-card, .empty) {
  min-width: 0;
  border-radius: var(--panel-radius);
  box-shadow: none;
}

.mobile .page .card:not(.member-card, .profile-links, .services) {
  padding: var(--panel-padding);
}

.mobile .page .card.mine-team {
  padding: 22px 15px 16px;
}

.mine-team-header {
  margin-bottom: 14px;
  padding: 0 0 12px;
}

.mine-team-header h2,
.mine-services h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.mobile .page .card> :where(h2, h3):first-child {
  margin-top: 0;
}

.mobile .page :where(.intro, .profile p, .coupon-sub, .empty, label) {
  color: var(--muted);
}

.mobile .page .empty {
  padding: 30px var(--panel-padding);
  font-size: 14px;
}

.mobile .page a {
  color: var(--accent);
}

.mobile .page :is(.coupon-card, .profile-links > a, .services > a) {
  color: inherit;
}

.mobile .page .home-slide {
  color: #fff;
}

.mobile .page :where(.pill, .learning-filters button, .ledger-switch button, .coupon-search button) {
  min-height: 36px;
}

.mobile .page .pill.active,
.mobile .page :where(.learning-filters, .ledger-switch) button[aria-pressed=true] {
  color: var(--accent);
  background: var(--accent-surface);
  border-color: #dec397;
  box-shadow: none;
}

.mobile .page :where(input:not([type=checkbox], [type=radio]), select, textarea) {
  min-height: 44px;
  border-color: #cbd9e5;
}

.mobile .page textarea {
  min-height: 104px;
  resize: vertical;
}

.mobile .page form label {
  font-size: 13px;
}

.mobile .page .primary {
  background: #855b22;
  border-color: #855b22;
  color: #fff;
  font-weight: 600;
}

.mobile .page :where(.coupon-list, #libraryCardsWrap, .plan-select-wrap)>* {
  min-width: 0;
}

.mobile .page .coupon-bottom,
.mobile .page .coupon-prices {
  flex-wrap: wrap;
}

.mobile .page .coupon-card .coupon-action {
  margin-top: 2px;
}

.mobile .page .home-announcement {
  gap: 12px;
}

.mobile .page .services> :is(a, button) {
  border: 0;
  border-radius: 10px;
  min-height: 72px;
}

.mobile .page .card.mine-services {
  padding: 20px 15px 12px;
}

.mine-services .services {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px 4px;
  padding: 14px 0 0;
}

.mobile .page .mine-services .services> :is(a, button) {
  min-width: 0;
  min-height: 68px;
  gap: 6px;
}

.mine-service-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--accent-surface);
}

.mine-service-icon img {
  display: block;
}

.mobile>.bottom {
  padding: 4px 0 calc(4px + env(safe-area-inset-bottom));
  background: #fff;
}

.mobile>.bottom a {
  min-width: 0;
  min-height: 54px;
  align-content: center;
  gap: 2px;
  padding: 4px;
  color: var(--muted);
  font-size: 12px;
}

.mobile>.bottom .active {
  color: var(--accent);
  font-weight: 700;
}

.mobile>.bottom .icon {
  box-sizing: content-box;
  width: 22px;
  height: 22px;
  padding: 3px 12px;
  border-radius: 12px;
}

.mobile>.bottom .active .icon {
  background: var(--accent-surface);
}

.mobile :is(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.mobile>.bottom a:focus-visible {
  outline-offset: -3px;
}

body:has(#app > .mobile > .bottom) #toast {
  bottom: calc(76px + env(safe-area-inset-bottom));
}

body:has(#app > .mobile)>.modal {
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}

body:has(#app > .mobile)>.modal>div {
  max-height: min(88dvh, 100%);
  border-radius: 14px;
  padding: clamp(16px, 4vw, 24px);
  overflow-wrap: anywhere;
}

body:has(#app > .mobile)>.modal .close {
  min-width: 44px;
  min-height: 44px;
}

body:has(#app > .mobile)>.modal .primary {
  background: #855b22;
  border-color: #855b22;
  color: #fff;
}

@media (hover: hover) {

  .mobile .page :where(.profile-links > a, .profile-links > button, .services > a, .services > button):hover,
  .mobile>.bottom a:hover {
    background-color: #f0f5fa;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile :where(.coupon-card, .pill, .pkg-card, .plan-option) {
    transition: none;
  }
}

.mobile .metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  text-align: center;
}

@media (max-width: 400px) {
  .mobile .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mobile .metrics-grid {
    row-gap: 14px;
  }
}

.mobile .coupon-list>.empty {
  grid-column: 1 / -1;
}

.admin-body .dist-level-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
  vertical-align: middle;
}

.member-detail-fields tr> :nth-child(3) {
  border-left: 1px solid #c7d8e5;
}

.icon.direction-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  color: inherit;
  stroke-width: 1.8;
  vertical-align: -0.15em;
}

/* H5 顶部导航：居中标题和独立返回触控区域。 */
.mobile>header.page-header {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 0;
  min-height: calc(56px + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) 12px 0;
  background: #f7f8fa;
  border-bottom: 1px solid #e3e5e8;
  color: #111;
}

.mobile:has(> .page > .mine-profile-h5)>header.page-header {
  display: none;
}

.mobile>header.page-header .page-header-title {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  padding: 12px 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile>header.page-header .header-back {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #111;
}

.mobile>header.page-header .header-back .icon {
  width: 24px;
  height: 24px;
  stroke-width: 1.5;
}

.mobile>header.page-header .header-back:active {
  background: #e9ecf0;
}

.admin-upload {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 94px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  padding: 18px;
  border: 1px dashed #b8cbdc;
  border-radius: 10px;
  background: #f7fafc;
  cursor: pointer;
  transition: border-color .16s, background .16s, box-shadow .16s
}

.admin-upload:hover {
  border-color: #52789b;
  background: #eff5fa
}

.admin-upload:focus-within {
  outline: 2px solid #52789b;
  outline-offset: 3px
}

.admin-upload-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 9px;
  background: #e9f0f6;
  color: #52789b
}

.admin-upload-icon svg {
  width: 23px;
  height: 23px
}

.admin-upload-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  line-height: 1.5;
  text-align: left
}

.admin-upload-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: #314b61
}

.admin-upload-copy small {
  font-size: 12px;
  font-weight: 400;
  color: #657d94;
  overflow-wrap: anywhere
}

.admin-upload-action {
  flex: none;
  padding: 6px 10px;
  border: 1px solid #d4e0eb;
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
  font-weight: 500;
  color: #52718c
}

.admin-body .admin-upload input[type=file] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer
}

.admin-upload.has-file {
  border-style: solid;
  border-color: #bdcfdf;
  background: #f2f7fb
}

.admin-upload:has(input:disabled) {
  opacity: .55;
  cursor: not-allowed
}

.admin-upload input:disabled {
  cursor: not-allowed
}

@media(max-width:540px) {
  .admin-upload {
    gap: 10px;
    padding: 14px
  }

  .admin-upload-action {
    display: none
  }

  .admin-upload-icon {
    width: 34px;
    height: 34px
  }
}

@media(prefers-reduced-motion:reduce) {
  .admin-upload {
    transition: none
  }
}

.mobile>header.page-header .header-back:focus-visible {
  outline: 2px solid #637e94;
  outline-offset: -2px;
}

/* 后台导航按关联功能分组。 */
.admin-nav-group {
  margin: 0 0 18px
}

.admin-nav-group h3 {
  margin: 0 11px 6px;
  font-size: 11px;
  font-weight: 600;
  color: #8093a5;
  letter-spacing: 1px
}

.sidebar .admin-nav-group a {
  padding: 9px 11px
}

@media(max-width:820px) {
  .sidebar nav {
    display: flex;
    gap: 16px
  }

  .admin-nav-group {
    flex-shrink: 0;
    margin: 0
  }

  .admin-nav-group h3 {
    margin: 0 11px 2px;
    font-size: 10px
  }

  .admin-nav-group a {
    display: inline-flex
  }
}

/* 我的推广板块切换 */
.promotion-url {
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.6;
  color: #475569;
  background: #f8fafc;
  padding: 12px;
  border-radius: 8px
}

.promotion-qr {
  text-align: center
}

.promotion-qr img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 14px auto
}

.promotion-qr img[hidden],
.ledger-switch[hidden] {
  display: none
}

/* 提现与记录页沿用项目浅蓝、暖金与白色卡片。 */
main.withdraw-mobile {
  background: #f3f7fb;
  padding-bottom: 28px;
  color: #31485d
}

.withdraw-mobile .page {
  padding: 18px
}

.withdraw-page {
  max-width: 560px;
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.65
}

.withdraw-card {
  background: #fff;
  border: 1px solid #dce7f1;
  border-radius: 14px;
  padding: 20px;
  margin: 0 0 16px
}

.withdraw-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}

.withdraw-page .withdraw-card-head label {
  font-size: 15px;
  font-weight: 600;
  color: #31485d;
  margin: 0
}

.withdraw-page a {
  color: #79551f;
  text-decoration: underline;
  text-underline-offset: 3px
}

.withdraw-card-head a {
  font-size: 14px;
  white-space: nowrap
}

.withdraw-amount {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #dce7f1;
  margin-top: 18px;
  padding: 8px 0 18px
}

.withdraw-amount span {
  font-size: 32px;
  font-weight: 600;
  color: #31485d
}

.withdraw-page .withdraw-amount input {
  border: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  width: 100%;
  min-width: 0;
  font-size: 30px;
  font-weight: 600;
  padding: 8px 0;
  color: #243d52;
  line-height: 1.4
}

.withdraw-page input::placeholder {
  color: #66788a;
  opacity: 1;
  font-weight: 400
}

.withdraw-page .withdraw-amount input::placeholder {
  font-size: 16px
}

.withdraw-balance {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 14px;
  font-size: 14px;
  color: #435c71
}

.withdraw-balance span {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #243d52
}

.withdraw-balance button {
  border: 0;
  background: transparent;
  padding: 4px 8px;
  color: #79551f;
  font-size: 14px;
  font-weight: 600;
  min-height: 36px
}

.withdraw-fee {
  color: #78531c;
  background: #fff8ec;
  border: 1px solid #ecd7b4;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.7;
  margin: 0 0 16px
}

.withdraw-section-title {
  font-size: 16px;
  font-weight: 600;
  color: #31485d;
  margin: 0 0 12px
}

.withdraw-binding {
  background: #f1f6fb;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 18px
}

.withdraw-binding-note {
  color: #435c71;
  margin: 0 0 7px;
  line-height: 1.7;
  font-size: 13px
}

.withdraw-page .withdraw-bind {
  display: inline-flex;
  align-items: center;
  color: #79551f;
  font-size: 14px;
  font-weight: 600;
  min-height: 32px;
  background: transparent;
  border: 0;
  padding: 0
}

.withdraw-page .withdraw-submit {
  display: block;
  width: 100%;
  border: 1px solid #dbb67b;
  border-radius: 10px;
  background: linear-gradient(110deg, #e7c48e, #ba8b46);
  color: #402b10;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  padding: 13px 16px;
  box-sizing: border-box;
  min-height: 48px;
  margin-top: 22px;
  cursor: pointer;
  transition: filter .15s
}

.withdraw-page .withdraw-submit:active {
  filter: brightness(.94)
}

.withdraw-page .withdraw-submit:disabled {
  background: #eee7dc;
  border-color: #d6cbbb;
  color: #675c4b;
  cursor: wait
}

.withdraw-page .withdraw-fields label {
  font-size: 14px;
  font-weight: 500;
  color: #31485d;
  margin: 16px 0 8px;
  line-height: 1.5
}

.withdraw-page .withdraw-fields input,
.withdraw-page .withdraw-fields select {
  width: 100%;
  box-sizing: border-box;
  background: #fbfdff;
  border: 1px solid #cbdbe8;
  border-radius: 9px;
  min-height: 48px;
  padding: 12px 14px;
  font-size: 16px;
  color: #243d52;
  line-height: 1.5
}

.withdraw-security-note {
  font-size: 13px;
  color: #435c71;
  line-height: 1.8;
  margin: 16px 0 0
}

.withdraw-rules p {
  font-size: 13px;
  color: #435c71;
  line-height: 1.8;
  margin: 0
}

.withdraw-rules p+p {
  margin-top: 8px
}

.withdraw-record-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap
}

.withdraw-record-filter label {
  margin: 0;
  color: #31485d;
  font-size: 14px
}

.withdraw-record-filter input {
  flex: 1;
  min-width: 140px;
  width: auto;
  color: #243d52
}

.withdraw-page>.intro {
  font-size: 13px;
  color: #435c71
}

.withdraw-record dl {
  margin-bottom: 0
}

.withdraw-record dl>div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.6
}

.withdraw-record dt {
  color: #52697d;
  flex-shrink: 0
}

.withdraw-record dd {
  margin: 0;
  text-align: right;
  overflow-wrap: anywhere;
  color: #243d52
}

.withdraw-status {
  font-size: 13px;
  font-weight: 500;
  color: #856020
}

.withdraw-status.paid {
  color: #16854c
}

.withdraw-status.rejected {
  color: #b42335
}

@media(max-width:360px) {
  .withdraw-mobile .page {
    padding: 14px
  }

  .withdraw-card {
    padding: 16px
  }
}

.promotion-entries {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  margin: 18px 0;
  overflow: hidden
}

.promotion-entries>a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 17px 16px;
  color: #31485d;
  min-height: 72px;
  box-sizing: border-box
}

.promotion-entries>a+a {
  border-top: 1px solid #e6eef5
}

.promotion-entry-copy {
  display: grid;
  gap: 4px;
  flex: 1;
  min-width: 0
}

.promotion-entry-copy strong {
  font-size: 15px;
  font-weight: 600
}

.promotion-entry-copy small {
  font-size: 13px;
  color: #52697d;
  line-height: 1.5
}

.promotion-entries .direction-icon {
  width: 18px;
  height: 18px;
  color: #637e94;
  flex-shrink: 0
}

.promotion-entries>a:active {
  background: #f3f8fc
}

.profile-membership h3 {
  margin: 0 0 12px;
  color: #334155;
  font-size: 14px;
  font-weight: 600
}

.profile-membership dl {
  margin: 0
}

.profile-membership dl>div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line)
}

.profile-membership dl>div:last-child {
  border-bottom: 0;
  padding-bottom: 0
}

.profile-membership dt {
  color: #8093a5;
  font-size: 12px;
  flex-shrink: 0
}

.profile-membership dd {
  margin: 0;
  text-align: right;
  font-size: 13px;
  overflow-wrap: anywhere
}

.membership-state {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 12px
}

.membership-state.active {
  background: #f0fdf4;
  color: #15803d
}

.membership-state.expired {
  background: #fffbeb;
  color: #b45309
}

.membership-state.frozen {
  background: #fef2f2;
  color: #b91c1c
}

/* 协议、公告和用户记录复用现有页面排版。 */
.rich-content {
  overflow-wrap: anywhere;
  line-height: 1.8;
}

.rich-content img {
  max-width: 100%;
  height: auto;
}

.rich-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.rich-content pre {
  white-space: pre-wrap;
}

.record-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 18px 0;
}

#cancelAccountError {
  color: #b91c1c;
}