/* =========================
   订阅中心专用样式
   只作用于 #panel-subscribe
   ========================= */

#panel-subscribe {
  display: none;
}

#panel-subscribe.is-current {
  display: block;
}

/* =========================
   主布局
   ========================= */
#panel-subscribe .sub-zone {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(360px, 1fr);
  gap: 16px;
  align-items: stretch;
  margin-top: 16px;
}

#panel-subscribe .sub-card-left,
#panel-subscribe .sub-card-right {
  height: 100%;
}

#panel-subscribe .sub-card-left > .inner,
#panel-subscribe .sub-card-right > .inner {
  height: 100%;
}

#panel-subscribe .sub-section + .sub-section {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(99, 102, 241, 0.12);
}

/* =========================
   二维码区
   ========================= */
#panel-subscribe .sub-qr-box {
  width: 100%;
  min-height: 360px;
  margin: 14px 0 16px;
  border: 1px solid #d9e2f3;
  border-radius: 20px;
  background: #ffffff;
  overflow: hidden;
}

#panel-subscribe .sub-qr-stage {
  min-height: 360px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#panel-subscribe .sub-qr-box.is-loading .sub-qr-stage {
  flex-direction: column;
}

#panel-subscribe .sub-qr-loading,
#panel-subscribe .sub-qr-error {
  margin: 0;
  text-align: center;
  font-size: 15px;
  line-height: 1.7;
  color: #667085;
}

#panel-subscribe .sub-qr-error {
  color: #dc2626;
}

#panel-subscribe .sub-qr-img {
  display: block;
  width: min(100%, 320px);
  max-width: 320px;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 14px;
  background: #fff;
}

#panel-subscribe .sub-steps {
  margin: 0;
  padding-left: 22px;
  color: #0f172a;
}

#panel-subscribe .sub-steps li {
  margin: 8px 0;
  line-height: 1.8;
}

/* =========================
   链接区间距
   ========================= */
#panel-subscribe .sub-url-row {
  margin-top: 14px;
}

#panel-subscribe .sub-url-box {
  width: 100%;
  min-height: 60px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 18px;
  border: 1px solid #d8dfef;
  background: #ffffff;
  line-height: 1.75;
  word-break: break-all;
  overflow-wrap: anywhere;
  box-sizing: border-box;
}

#panel-subscribe .sub-url-box .ic {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  margin-top: 4px;
  color: #475467;
}

#panel-subscribe .sub-order {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.7;
}

/* =========================
   四按钮统一系统
   上排：.sub-action-grid
   下排：.sub-url-actions
   ========================= */
#panel-subscribe .sub-action-grid,
#panel-subscribe .sub-url-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  width: 100% !important;
  align-items: stretch !important;
  margin-top: 14px !important;
}

#panel-subscribe .sub-action-grid > .sub-btn,
#panel-subscribe .sub-url-actions > .sub-btn {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

#panel-subscribe .sub-btn {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 1px solid transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 18px !important;
  border-radius: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  text-decoration: none !important;
  font: inherit !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease,
    transform 0.12s ease,
    opacity 0.16s ease !important;
}

#panel-subscribe .sub-btn:hover {
  transform: translateY(-1px) !important;
}

#panel-subscribe .sub-btn:active {
  transform: translateY(0) !important;
}

#panel-subscribe .sub-btn:disabled {
  cursor: default !important;
  opacity: 0.72 !important;
  transform: none !important;
}

#panel-subscribe .sub-btn .sub-cta-icon {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#panel-subscribe .sub-cta-img,
#panel-subscribe .sub-btn .ic {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  object-fit: contain !important;
}

#panel-subscribe .sub-cta-text,
#panel-subscribe .copy-label,
#panel-subscribe .support-label {
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1 !important;
}

/* =========================
   按钮配色：扁平化
   ========================= */

/* iOS */
#panel-subscribe .sub-btn-ios {
  background: #eef2ff !important;
  border-color: #c7d2fe !important;
  color: #3730a3 !important;
}

#panel-subscribe .sub-btn-ios:hover {
  background: #e7ecff !important;
  border-color: #b7c5ff !important;
}

/* Android */
#panel-subscribe .sub-btn-android {
  background: #ecfdf3 !important;
  border-color: #bbf7d0 !important;
  color: #166534 !important;
}

#panel-subscribe .sub-btn-android:hover {
  background: #e5faed !important;
  border-color: #a7efc0 !important;
}

/* 复制链接：重新配色，做得更干净 */
#panel-subscribe .sub-btn-copy {
  background: #f3f4f6 !important;
  border-color: #d5dae3 !important;
  color: #24324a !important;
}

#panel-subscribe .sub-btn-copy:hover {
  background: #eceff3 !important;
  border-color: #c8d0dc !important;
}

#panel-subscribe .sub-btn-copy .ic {
  color: #4f46e5 !important;
}

#panel-subscribe .sub-btn-copy.is-copied {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
}

#panel-subscribe .sub-btn-copy.is-copied .ic {
  color: #ffffff !important;
}

/* 联系客服 */
#panel-subscribe .sub-btn-support {
  background: #fff7ed !important;
  border-color: #fdba74 !important;
  color: #9a3412 !important;
}

#panel-subscribe .sub-btn-support:hover {
  background: #ffedd5 !important;
  border-color: #fb923c !important;
}

#panel-subscribe .sub-btn-support .ic {
  color: #ea580c !important;
}

/* =========================
   温馨提示
   ========================= */
#panel-subscribe .sub-tip-list {
  margin: 0;
  padding-left: 22px;
}

#panel-subscribe .sub-tip-list li {
  margin: 8px 0;
  line-height: 1.8;
}

/* =========================
   深色模式
   ========================= */
html[data-theme="dark"] #panel-subscribe .sub-qr-box {
  background: #0f172a;
  border-color: rgba(148, 163, 184, 0.18);
}

html[data-theme="dark"] #panel-subscribe .sub-url-box {
  background: #101827;
  border-color: #253149;
  color: rgba(226, 232, 240, 0.94);
}

html[data-theme="dark"] #panel-subscribe .sub-url-box .ic {
  color: #94a3b8;
}

html[data-theme="dark"] #panel-subscribe .sub-qr-loading,
html[data-theme="dark"] #panel-subscribe .sub-steps,
html[data-theme="dark"] #panel-subscribe .sub-tip-list,
html[data-theme="dark"] #panel-subscribe .sub-order {
  color: rgba(226, 232, 240, 0.92);
}

html[data-theme="dark"] #panel-subscribe .sub-section + .sub-section {
  border-top-color: rgba(148, 163, 184, 0.14);
}

html[data-theme="dark"] #panel-subscribe .sub-btn-ios {
  background: rgba(79, 70, 229, 0.16) !important;
  border-color: rgba(129, 140, 248, 0.34) !important;
  color: #c7d2fe !important;
}

html[data-theme="dark"] #panel-subscribe .sub-btn-ios:hover {
  background: rgba(79, 70, 229, 0.22) !important;
}

html[data-theme="dark"] #panel-subscribe .sub-btn-android {
  background: rgba(22, 163, 74, 0.16) !important;
  border-color: rgba(74, 222, 128, 0.28) !important;
  color: #bbf7d0 !important;
}

html[data-theme="dark"] #panel-subscribe .sub-btn-android:hover {
  background: rgba(22, 163, 74, 0.22) !important;
}

html[data-theme="dark"] #panel-subscribe .sub-btn-copy {
  background: #182235 !important;
  border-color: #30415f !important;
  color: #dbe7ff !important;
}

html[data-theme="dark"] #panel-subscribe .sub-btn-copy:hover {
  background: #1d2940 !important;
}

html[data-theme="dark"] #panel-subscribe .sub-btn-copy .ic {
  color: #8fb0ff !important;
}

html[data-theme="dark"] #panel-subscribe .sub-btn-copy.is-copied {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
}

html[data-theme="dark"] #panel-subscribe .sub-btn-support {
  background: rgba(234, 88, 12, 0.14) !important;
  border-color: rgba(251, 146, 60, 0.30) !important;
  color: #fdba74 !important;
}

html[data-theme="dark"] #panel-subscribe .sub-btn-support:hover {
  background: rgba(234, 88, 12, 0.22) !important;
}

html[data-theme="dark"] #panel-subscribe .sub-btn-support .ic {
  color: #fb923c !important;
}

html[data-theme="dark"] #panel-subscribe .sub-qr-error {
  color: #f87171;
}

/* =========================
   响应式
   ========================= */
@media (max-width: 980px) {
  #panel-subscribe .sub-zone {
    grid-template-columns: 1fr;
  }

  #panel-subscribe .sub-card-left,
  #panel-subscribe .sub-card-right {
    min-height: auto;
  }
}

@media (max-width: 768px) {
  #panel-subscribe .sub-action-grid,
  #panel-subscribe .sub-url-actions {
    grid-template-columns: 1fr !important;
  }

  #panel-subscribe .sub-btn {
    height: 52px !important;
    min-height: 52px !important;
    font-size: 14px !important;
    padding: 0 14px !important;
  }

  #panel-subscribe .sub-btn .sub-cta-icon {
    width: 17px !important;
    height: 17px !important;
    flex: 0 0 17px !important;
  }

  #panel-subscribe .sub-cta-img,
  #panel-subscribe .sub-btn .ic {
    width: 17px !important;
    height: 17px !important;
  }

  #panel-subscribe .sub-qr-box,
  #panel-subscribe .sub-qr-stage {
    min-height: 300px;
  }

  #panel-subscribe .sub-qr-img {
    max-width: 260px;
  }
}

@media (max-width: 420px) {
  #panel-subscribe .sub-btn {
    height: 50px !important;
    min-height: 50px !important;
    font-size: 13px !important;
    padding: 0 12px !important;
    gap: 8px !important;
  }

  #panel-subscribe .sub-btn .sub-cta-icon {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 16px !important;
  }

  #panel-subscribe .sub-cta-img,
  #panel-subscribe .sub-btn .ic {
    width: 16px !important;
    height: 16px !important;
  }
}