/* 飞鱼数据 · 会员体系（紫色主题） */
:root {
  --ms-primary: #7c4dff;
  --ms-primary-dark: #5b2fd4;
  --ms-primary-light: #f3eeff;
  --ms-gradient-start: #a855f7;
  --ms-gradient-end: #6366f1;
  --ms-gold: #d4a853;
  --ms-gold-dark: #b8862e;
  --ms-coral: #ff6b6b;
  --ms-blue: #4dabf7;
  --ms-dark: #1e1e2e;
  --ms-text-value: #5c5cee;
  --ms-success: #52c41a;
  --ms-error: #ff4d4f;
  --ms-expiry-bg: #fff1f0;
  --ms-expiry-text: #cf1322;
}

.ms-app .bd-main {
  padding: 0;
  background: var(--bd-bg);
}

/* Tab 导航 */
.ms-tabs {
  display: flex;
  gap: 0;
  background: var(--bd-card);
  border-bottom: 1px solid var(--bd-border);
  padding: 0 24px;
}
.ms-tab {
  padding: 14px 20px;
  font-size: 14px;
  color: var(--bd-text-secondary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.ms-tab:hover { color: var(--ms-primary); }
.ms-tab.is-active {
  color: var(--ms-primary);
  border-bottom-color: var(--ms-primary);
  font-weight: 600;
}

/* Toast */
.ms-toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: rgba(30, 30, 46, 0.92);
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  z-index: 9999;
  opacity: 0;
  transition: transform 0.25s, opacity 0.25s;
  pointer-events: none;
  max-width: 90vw;
  text-align: center;
}
.ms-toast.is-show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

/* ===== 套餐选购 ===== */
.ms-plans {
  background: linear-gradient(135deg, var(--ms-gradient-start) 0%, var(--ms-gradient-end) 100%);
  padding: 0 0 32px;
}
.ms-plans-hero {
  text-align: center;
  padding: 20px 24px 0;
}
.ms-consult-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background: linear-gradient(135deg, #ff6b9d, #ff4081);
  color: #fff;
  border: none;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(255, 64, 129, 0.35);
  transition: transform 0.15s;
}
.ms-consult-btn:hover { transform: translateY(-1px); }

.ms-plans-carousel {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  gap: 16px;
  padding: 24px 24px 0;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
@media (min-width: 1500px) {
  .ms-plans-carousel {
    justify-content: center;
    flex-wrap: wrap;
    overflow-x: visible;
  }
}
.ms-plans-carousel::-webkit-scrollbar { height: 6px; }
.ms-plans-carousel::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.3);
  border-radius: 3px;
}

.ms-plan-card {
  flex: 0 0 280px;
  scroll-snap-align: start;
  background: #fff;
  border-radius: 16px;
  padding: 28px 24px 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s;
}
.ms-plan-card:hover { transform: translateY(-4px); }

.ms-plan-badge {
  position: absolute;
  top: 0;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 0 0 8px 8px;
}
.ms-plan-badge--current {
  left: 16px;
  background: #3c66ff;
  color: #fff;
}
.ms-plan-badge--entry {
  right: 0;
  top: 0;
  background: linear-gradient(135deg, #52c41a, #389e0d);
  color: #fff;
  transform: rotate(0deg);
  border-radius: 0 16px 0 12px;
  padding: 6px 14px;
}
.ms-plan-badge--hot {
  right: 0;
  top: 0;
  background: linear-gradient(135deg, #ff4d4f, #cf1322);
  color: #fff;
  border-radius: 0 16px 0 12px;
  padding: 6px 14px;
}

.ms-plan-gem {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 28px;
}
.ms-plan-gem--blue { background: #e7f5ff; }
.ms-plan-gem--coral { background: #fff0f0; }
.ms-plan-gem--purple { background: var(--ms-primary-light); }
.ms-plan-gem--gold { background: #fff8e6; }
.ms-plan-gem--dark { background: #2d2d3d; color: var(--ms-gold); }

.ms-plan-name {
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 6px;
}
.ms-plan-audience {
  font-size: 12px;
  color: var(--bd-text-muted);
  text-align: center;
  margin: 0 0 20px;
  line-height: 1.5;
}
.ms-plan-price {
  text-align: center;
  margin-bottom: 8px;
}
.ms-plan-price-hint-wrap {
  text-align: center;
  margin-bottom: 16px;
}
.ms-plan-price-main {
  font-size: 32px;
  font-weight: 700;
  color: var(--bd-text);
}
.ms-plan-price-main small {
  font-size: 14px;
  font-weight: 400;
  color: var(--bd-text-secondary);
}
.ms-plan-price-hint {
  display: inline-block;
  background: #f5f5f5;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  color: var(--bd-text-secondary);
  margin-bottom: 16px;
}
.ms-plan-desc {
  font-size: 13px;
  color: var(--bd-text-secondary);
  line-height: 1.6;
  margin: 0 0 20px;
  flex: 1;
}
.ms-plan-cta {
  width: 100%;
  padding: 12px;
  border-radius: 24px;
  font-size: 15px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  margin-bottom: 20px;
  transition: opacity 0.15s;
}
.ms-plan-cta:hover { opacity: 0.9; }
.ms-plan-cta--renew,
.ms-plan-cta--upgrade {
  background: linear-gradient(135deg, var(--ms-primary), var(--ms-primary-dark));
  color: #fff;
}
.ms-plan-cta--upgrade-gold {
  background: linear-gradient(135deg, #f0c674, var(--ms-gold));
  color: #fff;
}
.ms-plan-cta--upgrade-dark {
  background: var(--ms-dark);
  color: #fff;
}
.ms-plan-cta--disabled {
  background: transparent;
  color: var(--bd-text-muted);
  cursor: default;
  font-size: 13px;
  font-weight: 400;
}

.ms-plan-highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  border-top: 1px solid var(--bd-border);
  padding-top: 16px;
}
.ms-plan-highlight {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.ms-plan-highlight-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: var(--ms-primary-light);
  color: var(--ms-primary);
}
.ms-plan-card[data-theme="coral"] .ms-plan-highlight-icon { background: #fff0f0; color: var(--ms-coral); }
.ms-plan-card[data-theme="gold"] .ms-plan-highlight-icon { background: #fff8e6; color: var(--ms-gold-dark); }
.ms-plan-card[data-theme="dark"] .ms-plan-highlight-icon { background: #e8e8f0; color: var(--ms-dark); }
.ms-plan-highlight-label {
  font-size: 11px;
  color: var(--bd-text-secondary);
  line-height: 1.3;
}

.ms-plans-nav {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 20px 24px 0;
}
.ms-plans-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.15);
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ms-plans-nav-btn:hover { background: rgba(255,255,255,0.25); }

.ms-plans-scroll-hint {
  text-align: center;
  padding: 16px 24px 8px;
}
.ms-plans-scroll-hint-btn {
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
}
.ms-plans-scroll-hint-btn:hover {
  background: rgba(255,255,255,0.28);
}

/* ===== 权益对比 ===== */
/* 表头与表格共用同一套列宽：左侧标签区 + 4 档套餐等分，全宽铺满 */
.ms-compare {
  --ms-compare-label: 280px;
  --ms-compare-cat: 96px;
  --ms-compare-feat: calc(var(--ms-compare-label) - var(--ms-compare-cat));
  padding: 24px 0 48px;
  width: 100%;
  max-width: none;
  margin: 0;
}
.ms-compare--embedded {
  background: var(--bd-bg);
  max-width: none;
  padding: 24px 0 48px;
}
.ms-compare--embedded .ms-compare-inner,
.ms-compare-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.ms-compare-header {
  display: grid;
  grid-template-columns: var(--ms-compare-label) repeat(4, minmax(0, 1fr));
  gap: 0;
  position: sticky;
  top: var(--bd-topbar-h);
  z-index: 20;
  background: var(--bd-bg);
  padding: 0 0 16px;
}
.ms-compare-intro {
  background: linear-gradient(135deg, var(--ms-primary-light), #fff);
  border-radius: 0;
  padding: 20px 12px;
  margin-right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: none;
  border-right: 1px solid var(--bd-border);
  box-sizing: border-box;
}
.ms-compare-intro h3 {
  font-size: 16px;
  margin: 0 0 12px;
  color: var(--ms-primary);
}
.ms-compare-intro .ms-vs {
  font-size: 28px;
  font-weight: 800;
  color: var(--ms-primary);
  opacity: 0.3;
  margin-bottom: 12px;
}
.ms-compare-download {
  padding: 6px 16px;
  background: var(--ms-primary);
  color: #fff;
  border: none;
  border-radius: 20px;
  font-size: 12px;
  cursor: pointer;
}
.ms-compare-plan-col {
  background: #fff;
  border-radius: 0;
  padding: 12px 10px 16px;
  text-align: center;
  border: none;
  border-right: 1px solid var(--bd-border);
  margin: 0;
  box-sizing: border-box;
  min-width: 0;
  position: relative;
}
.ms-compare-plan-col:last-child {
  border-right: none;
}

/* 套餐列下拉切换 */
.ms-compare-plan-picker-wrap {
  position: relative;
  margin-bottom: 8px;
  z-index: 1;
}
.ms-compare-plan-picker-wrap.is-open {
  z-index: 40;
}
.ms-compare-plan-picker-hint {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  background: rgba(30, 30, 46, 0.92);
  color: #fff;
  font-size: 12px;
  line-height: 1.3;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s, visibility 0.15s;
  z-index: 50;
}
.ms-compare-plan-picker-hint::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: rgba(30, 30, 46, 0.92);
}
.ms-compare-plan-picker-wrap:not(.is-open):hover .ms-compare-plan-picker-hint {
  opacity: 1;
  visibility: visible;
}
.ms-compare-plan-picker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 6px 8px;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.ms-compare-plan-picker:hover,
.ms-compare-plan-picker-wrap.is-open .ms-compare-plan-picker {
  border-color: var(--ms-primary-light);
  background: var(--ms-primary-light);
}
.ms-compare-plan-picker .ms-compare-plan-gem {
  font-size: 20px;
  margin: 0;
}
.ms-compare-plan-picker .ms-compare-plan-name {
  font-size: 15px;
  font-weight: 700;
  margin: 0;
}
.ms-compare-plan-caret {
  font-size: 10px;
  color: var(--bd-text-muted);
  margin-left: 2px;
}
.ms-compare-plan-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 148px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border: 1px solid var(--bd-border);
  padding: 6px 0;
  z-index: 30;
  text-align: left;
}
.ms-compare-plan-menu[hidden] { display: none !important; }
.ms-compare-plan-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: none;
  font-size: 13px;
  color: var(--bd-text);
  cursor: pointer;
  text-align: left;
}
.ms-compare-plan-option:hover {
  background: var(--ms-primary-light);
}
.ms-compare-plan-option.is-active {
  color: var(--ms-primary);
  font-weight: 600;
  background: var(--ms-primary-light);
}
.ms-compare-plan-option-gem {
  font-size: 16px;
  flex-shrink: 0;
}

.ms-compare-plan-gem {
  font-size: 24px;
  margin-bottom: 8px;
}
.ms-compare-plan-name {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 4px;
}
.ms-compare-plan-desc {
  font-size: 11px;
  color: var(--bd-text-muted);
  margin: 0 0 12px;
  line-height: 1.4;
  min-height: 32px;
}
.ms-compare-plan-cta {
  padding: 8px 16px;
  background: var(--ms-primary);
  color: #fff;
  border: none;
  border-radius: 20px;
  font-size: 12px;
  cursor: pointer;
  width: 100%;
}
.ms-compare-plan-cta.is-renew { background: var(--ms-primary); }
.ms-compare-plan-cta.is-current {
  background: transparent;
  color: var(--bd-text-muted);
  cursor: default;
}

.ms-compare-section {
  margin-bottom: 0;
}
.ms-compare-section + .ms-compare-section {
  margin-top: 0;
}
.ms-compare-table-wrap {
  background: #fff;
  border-radius: 0;
  overflow: hidden;
  border: none;
  border-top: 1px solid var(--bd-border);
}
.ms-compare-section-title {
  text-align: center;
  margin-bottom: 12px;
  position: relative;
}
.ms-compare-section-title::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--bd-border);
}
.ms-compare-section-title span {
  position: relative;
  background: var(--bd-bg);
  padding: 4px 16px;
  font-size: 13px;
  color: var(--bd-text-secondary);
  border-radius: 20px;
  border: 1px solid var(--bd-border);
}

.ms-compare-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.ms-compare-table col.ms-col-cat { width: var(--ms-compare-cat); }
.ms-compare-table col.ms-col-feat { width: var(--ms-compare-feat); }
.ms-compare-table col.ms-col-plan { width: auto; }
.ms-compare-row {
  border-bottom: 1px solid var(--bd-border);
}
.ms-compare-row:last-child { border-bottom: none; }
.ms-compare-row:hover { background: #fafbfc; }

.ms-compare-cat {
  background: #f8f9fb;
  padding: 12px 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--bd-text-secondary);
  text-align: center;
  vertical-align: middle;
  border-right: 1px solid var(--bd-border);
}

.ms-compare-feature {
  padding: 12px 12px;
  vertical-align: middle;
  border-right: 1px solid var(--bd-border);
}
.ms-compare-feature-name {
  display: block;
  font-size: 13px;
  color: var(--bd-text);
}
.ms-compare-feature-hint {
  display: block;
  font-size: 11px;
  color: var(--bd-text-muted);
  margin-top: 2px;
}

.ms-compare-cell {
  padding: 10px 8px;
  font-size: 12px;
  text-align: center;
  vertical-align: middle;
  border-right: 1px solid transparent;
}
.ms-compare-cell .is-value {
  color: var(--ms-text-value);
  font-weight: 500;
  display: inline-block;
  max-width: 100%;
  word-break: break-all;
}

.ms-icon-check,
.ms-icon-cross {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.ms-icon-check { background: var(--ms-success); }
.ms-icon-cross { background: var(--ms-error); }

/* ===== 个人信息 ===== */
.ms-account {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px 48px;
}
.ms-expiry-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--ms-expiry-bg);
  color: var(--ms-expiry-text);
  padding: 10px 24px;
  font-size: 13px;
}
.ms-expiry-banner button {
  flex-shrink: 0;
  padding: 6px 16px;
  background: var(--ms-error);
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}

.ms-account-tabs {
  display: flex;
  gap: 32px;
  border-bottom: 1px solid var(--bd-border);
  margin: 24px 0;
}
.ms-account-tab {
  padding: 12px 0;
  font-size: 14px;
  color: var(--bd-text-secondary);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  margin-bottom: -1px;
}
.ms-account-tab.is-active {
  color: var(--ms-primary);
  border-bottom-color: var(--ms-primary);
  font-weight: 600;
}

.ms-member-card {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(124, 77, 255, 0.15);
  margin-bottom: 0;
}
.ms-member-card-top {
  background: linear-gradient(135deg, #c026d3 0%, #7c3aed 50%, #6366f1 100%);
  padding: 32px 32px 40px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 24px;
  align-items: start;
}
.ms-member-user {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.ms-member-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #fff;
  overflow: hidden;
  flex-shrink: 0;
}
.ms-member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ms-member-info h2 {
  margin: 0 0 8px;
  font-size: 20px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ms-member-badge {
  font-size: 11px;
  padding: 2px 8px;
  background: rgba(255,255,255,0.2);
  border-radius: 4px;
  font-weight: 500;
}
.ms-member-meta {
  font-size: 12px;
  color: rgba(255,255,255,0.75);
  line-height: 1.8;
}
.ms-member-actions {
  display: flex;
  gap: 24px;
  justify-content: center;
  padding-top: 8px;
}
.ms-member-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.9);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}
.ms-member-action-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.ms-member-gem-wrap {
  text-align: center;
  position: relative;
}
.ms-member-gem {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  margin: 0 auto 8px;
}
.ms-member-upgrade {
  padding: 6px 16px;
  background: #fff;
  color: var(--ms-primary);
  border: none;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ms-member-card-bottom {
  background: linear-gradient(135deg, #5b21b6, #4c1d95);
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ms-member-card-bottom p {
  margin: 0;
  font-size: 13px;
  color: rgba(255,255,255,0.9);
}
.ms-member-renew {
  flex-shrink: 0;
  padding: 8px 20px;
  background: #fff;
  color: var(--ms-primary);
  border: none;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* 侧栏高亮 */
.ms-app .bd-nav-bottom-item.is-active {
  color: var(--ms-primary);
  background: var(--ms-primary-light);
}

.ms-cell-pending {
  display: inline-block;
  font-size: 12px;
  color: #9ca3af;
  letter-spacing: 0.02em;
}

/* 响应式 */
@media (max-width: 1100px) {
  .ms-compare {
    --ms-compare-label: 220px;
    --ms-compare-cat: 80px;
  }
}
@media (max-width: 900px) {
  .ms-compare-header {
    position: static;
    overflow-x: auto;
    min-width: 760px;
  }
  .ms-compare-inner { overflow-x: auto; }
  .ms-compare-table-wrap { overflow-x: auto; }
  .ms-compare-table { min-width: 760px; }
  .ms-member-card-top {
    grid-template-columns: 1fr;
  }
  .ms-member-actions { flex-wrap: wrap; }
  .ms-plan-card { flex: 0 0 260px; }
}
@media (max-width: 640px) {
  .ms-tabs { padding: 0 12px; overflow-x: auto; }
  .ms-tab { padding: 12px 14px; white-space: nowrap; }
  .ms-expiry-banner { flex-direction: column; align-items: flex-start; }
}

/* 结账 / 支付 */
.ms-checkout {
  padding: 24px;
  max-width: 1080px;
  margin: 0 auto;
}
.ms-checkout-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.ms-checkout-head h2 {
  margin: 0;
  font-size: 20px;
  color: var(--bd-text);
}
.ms-checkout-back {
  border: none;
  background: none;
  color: var(--ms-primary);
  font-size: 14px;
  cursor: pointer;
  padding: 0;
}
.ms-checkout-test-banner {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #fff7e6;
  border: 1px solid #ffd591;
  color: #ad6800;
  font-size: 13px;
}
.ms-checkout-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  align-items: start;
}
.ms-checkout-panel,
.ms-checkout-summary {
  background: var(--bd-card);
  border: 1px solid var(--bd-border);
  border-radius: 12px;
  padding: 24px;
}
.ms-checkout-summary h3 {
  margin: 0 0 16px;
  font-size: 16px;
}
.ms-checkout-plan {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--bd-border);
}
.ms-checkout-plan h3 {
  margin: 0 0 4px;
  font-size: 18px;
}
.ms-checkout-plan p {
  margin: 0;
  font-size: 13px;
  color: var(--bd-text-secondary);
}
.ms-checkout-field {
  margin-bottom: 18px;
}
.ms-checkout-label {
  display: block;
  font-size: 13px;
  color: var(--bd-text-secondary);
  margin-bottom: 10px;
}
.ms-checkout-duration-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ms-checkout-duration {
  border: 1px solid var(--bd-border);
  background: #fff;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
}
.ms-checkout-duration.is-active {
  border-color: var(--ms-primary);
  color: var(--ms-primary);
  background: var(--ms-primary-light);
}
.ms-checkout-pay-methods {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.ms-pay-btn {
  position: relative;
  min-width: 160px;
  min-height: 56px;
  border: 2px solid var(--bd-border);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
}
.ms-pay-btn.is-active {
  border-color: #f53f3f;
}
.ms-pay-btn:disabled {
  opacity: 0.72;
  cursor: not-allowed;
}
.ms-pay-btn-logo {
  font-size: 15px;
  font-weight: 700;
}
.ms-pay-btn-logo--alipay { color: #1677ff; }
.ms-pay-btn-logo--wechat { color: #09bb07; }
.ms-pay-btn-soon {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 10px;
  color: #999;
}
.ms-checkout-corporate {
  margin-top: 10px;
  border: none;
  background: none;
  color: #f53f3f;
  font-size: 13px;
  cursor: pointer;
  padding: 0;
}
.ms-checkout-error {
  color: var(--ms-error);
  font-size: 13px;
  margin: 0 0 12px;
}
.ms-checkout-qr-wrap {
  text-align: center;
  margin: 12px 0 20px;
}
.ms-checkout-qr-wrap canvas {
  border: 1px solid var(--bd-border);
  border-radius: 8px;
  padding: 8px;
  background: #fff;
}
.ms-checkout-qr-tip {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--bd-text-secondary);
}
.ms-checkout-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--bd-border);
  padding-top: 16px;
}
.ms-checkout-amount span {
  display: block;
  font-size: 12px;
  color: var(--bd-text-secondary);
}
.ms-checkout-amount strong {
  font-size: 24px;
  color: #f53f3f;
}
.ms-checkout-submit {
  border: none;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--ms-gradient-start), var(--ms-gradient-end));
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 28px;
  cursor: pointer;
}
.ms-checkout-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.ms-checkout-order-dl {
  margin: 0;
}
.ms-checkout-order-dl > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--bd-border);
  font-size: 14px;
}
.ms-checkout-order-dl > div:last-child {
  border-bottom: none;
}
.ms-checkout-order-dl dt {
  color: var(--bd-text-secondary);
  margin: 0;
}
.ms-checkout-order-dl dd {
  margin: 0;
  text-align: right;
  color: var(--bd-text);
}
.ms-checkout-empty {
  padding: 24px;
  color: var(--bd-text-secondary);
}
@media (max-width: 900px) {
  .ms-checkout-grid {
    grid-template-columns: 1fr;
  }
}