#panel-subscribe {
  display: none;
}

#panel-subscribe.is-current {
  display: flex;
  flex-direction: column;
}

#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%;
  display: flex;
  flex-direction: column;
}

#panel-subscribe .sub-section + .sub-section {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid color-mix(in oklab, var(--primary) 12%, var(--glass-stroke));
}

#panel-subscribe .sub-qr-box {
  width: 100%;
  min-height: 360px;
  margin: 14px 0 16px;
  border: 1px solid color-mix(in oklab, var(--primary) 14%, var(--glass-stroke));
  border-radius: 20px;
  background: color-mix(in oklab, var(--surface) 98%, white 2%);
  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: var(--muted);
}

#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,
#panel-subscribe .sub-tip-list {
  margin: 0;
  padding-left: 22px;
  color: var(--fg);
}

#panel-subscribe .sub-steps li,
#panel-subscribe .sub-tip-list 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 color-mix(in oklab, var(--primary) 14%, var(--glass-stroke));
  background: color-mix(in oklab, var(--surface) 98%, white 2%);
  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: var(--muted);
}

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

#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;
  background-image: 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;
  border: 1px solid color-mix(in oklab, var(--primary) 24%, var(--glass-stroke)) !important;
  background: color-mix(in oklab, var(--surface) 97%, white 3%) !important;
  color: var(--fg) !important;
  box-shadow: 0 12px 24px -22px rgba(15, 23, 42, .24) !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,
    box-shadow 0.16s ease !important;
}

#panel-subscribe .sub-btn:hover {
  transform: translateY(-1px) !important;
  background: color-mix(in oklab, var(--surface) 94%, var(--primary) 6%) !important;
  border-color: color-mix(in oklab, var(--primary) 30%, var(--glass-stroke)) !important;
  box-shadow: 0 16px 28px -22px rgba(15, 23, 42, .28) !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;
}

#panel-subscribe .sub-btn-copy .ic,
#panel-subscribe .sub-btn-support .ic {
  color: var(--primary) !important;
}

#panel-subscribe .sub-btn-copy.is-copied {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !important;
}

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

html[data-theme="dark"] #panel-subscribe .sub-qr-box,
html[data-theme="dark"] #panel-subscribe .sub-url-box {
  background: color-mix(in oklab, var(--surface) 96%, transparent);
  border-color: color-mix(in oklab, var(--primary) 20%, var(--glass-stroke));
}

html[data-theme="dark"] #panel-subscribe .sub-url-box {
  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 {
  background: color-mix(in oklab, var(--surface) 97%, white 3%) !important;
  color: var(--fg) !important;
  border-color: color-mix(in oklab, var(--primary) 24%, var(--glass-stroke)) !important;
  box-shadow: 0 12px 24px -22px rgba(2, 6, 23, .56) !important;
}

html[data-theme="dark"] #panel-subscribe .sub-btn:hover {
  background: color-mix(in oklab, var(--surface) 94%, var(--primary) 6%) !important;
  border-color: color-mix(in oklab, var(--primary) 30%, var(--glass-stroke)) !important;
}

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

html[data-theme="dark"] #panel-subscribe .sub-btn-copy.is-copied {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #ffffff !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;
  }
}

html[data-theme="dark"] #panel-subscribe .sub-btn-ios .sub-cta-img,
html[data-theme="dark"] #panel-subscribe .sub-btn-android .sub-cta-img {
  filter: brightness(0) invert(1) contrast(1.05) !important;
  opacity: 0.96 !important;
}


/* support button uses a different palette */
#panel-subscribe .sub-btn-support {
  background: linear-gradient(135deg, #ea580c 0%, #f59e0b 100%) !important;
  border-color: transparent !important;
  color: #ffffff !important;
  box-shadow: 0 14px 28px -22px rgba(245, 158, 11, .34) !important;
}

#panel-subscribe .sub-btn-support:hover {
  background: linear-gradient(135deg, #dc4d04 0%, #f59e0b 100%) !important;
  color: #ffffff !important;
}

#panel-subscribe .sub-btn-support:active {
  background: linear-gradient(135deg, #c2410c 0%, #d97706 100%) !important;
  color: #fff7ed !important;
}

#panel-subscribe .sub-btn-support .ic,
#panel-subscribe .sub-btn-support .support-label {
  color: #ffffff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

html[data-theme="dark"] #panel-subscribe .sub-btn-ios {
  background: linear-gradient(135deg, #60a5fa 0%, #818cf8 100%) !important;
  color: #0f172a !important;
  box-shadow: 0 16px 30px -24px rgba(129, 140, 248, .34) !important;
}

html[data-theme="dark"] #panel-subscribe .sub-btn-ios:hover {
  background: linear-gradient(135deg, #93c5fd 0%, #a5b4fc 100%) !important;
  color: #111827 !important;
}

html[data-theme="dark"] #panel-subscribe .sub-btn-ios:active {
  background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%) !important;
  color: #eff6ff !important;
}

html[data-theme="dark"] #panel-subscribe .sub-btn-android {
  background: linear-gradient(135deg, #14b8a6 0%, #22c55e 100%) !important;
  color: #052e2b !important;
  box-shadow: 0 16px 30px -24px rgba(34, 197, 94, .34) !important;
}

html[data-theme="dark"] #panel-subscribe .sub-btn-android:hover {
  background: linear-gradient(135deg, #2dd4bf 0%, #4ade80 100%) !important;
  color: #032b27 !important;
}

html[data-theme="dark"] #panel-subscribe .sub-btn-android:active {
  background: linear-gradient(135deg, #0f766e 0%, #16a34a 100%) !important;
  color: #ecfeff !important;
}

html[data-theme="dark"] #panel-subscribe .sub-btn-copy {
  background: linear-gradient(135deg, #c084fc 0%, #a78bfa 100%) !important;
  color: #1f1147 !important;
  box-shadow: 0 16px 30px -24px rgba(168, 85, 247, .34) !important;
}

html[data-theme="dark"] #panel-subscribe .sub-btn-copy:hover {
  background: linear-gradient(135deg, #d8b4fe 0%, #c4b5fd 100%) !important;
  color: #25124e !important;
}

html[data-theme="dark"] #panel-subscribe .sub-btn-copy:active {
  background: linear-gradient(135deg, #a855f7 0%, #8b5cf6 100%) !important;
  color: #faf5ff !important;
}

html[data-theme="dark"] #panel-subscribe .sub-btn-support {
  background: linear-gradient(135deg, #fb7185 0%, #f97316 100%) !important;
  color: #3b0a14 !important;
  box-shadow: 0 16px 30px -24px rgba(249, 115, 22, .34) !important;
}

html[data-theme="dark"] #panel-subscribe .sub-btn-support:hover {
  background: linear-gradient(135deg, #fda4af 0%, #fdba74 100%) !important;
  color: #431407 !important;
}

html[data-theme="dark"] #panel-subscribe .sub-btn-support:active {
  background: linear-gradient(135deg, #e11d48 0%, #ea580c 100%) !important;
  color: #fff7ed !important;
}

html[data-theme="dark"] #panel-subscribe .sub-btn-ios .sub-cta-img,
html[data-theme="dark"] #panel-subscribe .sub-btn-android .sub-cta-img,
html[data-theme="dark"] #panel-subscribe .sub-btn-copy .ic,
html[data-theme="dark"] #panel-subscribe .sub-btn-support .ic,
html[data-theme="dark"] #panel-subscribe .sub-btn-support .support-label {
  color: currentColor !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}


/* night mode retuned from current daytime palette */
[data-theme="dark"] #panel-subscribe .sub-btn-ios {
  background:rgba(37,99,235,.16) !important;
  border-color:rgba(96,165,250,.28) !important;
  color:#dbeafe !important;
  box-shadow:0 12px 24px -18px rgba(37,99,235,.18) !important;
}
[data-theme="dark"] #panel-subscribe .sub-btn-ios .sub-cta-img,
[data-theme="dark"] #panel-subscribe .sub-btn-ios .sub-cta-text {
  color:#dbeafe !important;
  fill:currentColor !important;
  stroke:currentColor !important;
}
[data-theme="dark"] #panel-subscribe .sub-btn-ios:active,
[data-theme="dark"] #panel-subscribe .sub-btn-ios[aria-pressed="true"],
[data-theme="dark"] #panel-subscribe .sub-btn-ios.is-active {
  background:#3b82f6 !important;
  border-color:#3b82f6 !important;
  color:#eff6ff !important;
  box-shadow:0 14px 28px -18px rgba(59,130,246,.34) !important;
}
[data-theme="dark"] #panel-subscribe .sub-btn-ios:active .sub-cta-img,
[data-theme="dark"] #panel-subscribe .sub-btn-ios:active .sub-cta-text,
[data-theme="dark"] #panel-subscribe .sub-btn-ios[aria-pressed="true"] .sub-cta-img,
[data-theme="dark"] #panel-subscribe .sub-btn-ios[aria-pressed="true"] .sub-cta-text,
[data-theme="dark"] #panel-subscribe .sub-btn-ios.is-active .sub-cta-img,
[data-theme="dark"] #panel-subscribe .sub-btn-ios.is-active .sub-cta-text {
  color:#eff6ff !important;
  fill:currentColor !important;
  stroke:currentColor !important;
}

[data-theme="dark"] #panel-subscribe .sub-btn-android {
  background:rgba(15,118,110,.18) !important;
  border-color:rgba(45,212,191,.28) !important;
  color:#ccfbf1 !important;
  box-shadow:0 12px 24px -18px rgba(13,148,136,.18) !important;
}
[data-theme="dark"] #panel-subscribe .sub-btn-android .sub-cta-img,
[data-theme="dark"] #panel-subscribe .sub-btn-android .sub-cta-text {
  color:#ccfbf1 !important;
  fill:currentColor !important;
  stroke:currentColor !important;
}
[data-theme="dark"] #panel-subscribe .sub-btn-android:active,
[data-theme="dark"] #panel-subscribe .sub-btn-android[aria-pressed="true"],
[data-theme="dark"] #panel-subscribe .sub-btn-android.is-active {
  background:#14b8a6 !important;
  border-color:#14b8a6 !important;
  color:#042f2e !important;
  box-shadow:0 14px 28px -18px rgba(20,184,166,.34) !important;
}
[data-theme="dark"] #panel-subscribe .sub-btn-android:active .sub-cta-img,
[data-theme="dark"] #panel-subscribe .sub-btn-android:active .sub-cta-text,
[data-theme="dark"] #panel-subscribe .sub-btn-android[aria-pressed="true"] .sub-cta-img,
[data-theme="dark"] #panel-subscribe .sub-btn-android[aria-pressed="true"] .sub-cta-text,
[data-theme="dark"] #panel-subscribe .sub-btn-android.is-active .sub-cta-img,
[data-theme="dark"] #panel-subscribe .sub-btn-android.is-active .sub-cta-text {
  color:#042f2e !important;
  fill:currentColor !important;
  stroke:currentColor !important;
}

[data-theme="dark"] #panel-subscribe .sub-btn-copy {
  background:rgba(109,40,217,.16) !important;
  border-color:rgba(192,132,252,.28) !important;
  color:#f3e8ff !important;
  box-shadow:0 12px 24px -18px rgba(109,40,217,.18) !important;
}
[data-theme="dark"] #panel-subscribe .sub-btn-copy .ic,
[data-theme="dark"] #panel-subscribe .sub-btn-copy .copy-label {
  color:#f3e8ff !important;
  fill:currentColor !important;
  stroke:currentColor !important;
}
[data-theme="dark"] #panel-subscribe .sub-btn-copy:active,
[data-theme="dark"] #panel-subscribe .sub-btn-copy[aria-pressed="true"],
[data-theme="dark"] #panel-subscribe .sub-btn-copy.is-active,
[data-theme="dark"] #panel-subscribe .sub-btn-copy.is-copied {
  background:#7c3aed !important;
  border-color:#7c3aed !important;
  color:#faf5ff !important;
  box-shadow:0 14px 28px -18px rgba(124,58,237,.34) !important;
}
[data-theme="dark"] #panel-subscribe .sub-btn-copy:active .ic,
[data-theme="dark"] #panel-subscribe .sub-btn-copy:active .copy-label,
[data-theme="dark"] #panel-subscribe .sub-btn-copy[aria-pressed="true"] .ic,
[data-theme="dark"] #panel-subscribe .sub-btn-copy[aria-pressed="true"] .copy-label,
[data-theme="dark"] #panel-subscribe .sub-btn-copy.is-active .ic,
[data-theme="dark"] #panel-subscribe .sub-btn-copy.is-active .copy-label,
[data-theme="dark"] #panel-subscribe .sub-btn-copy.is-copied .ic,
[data-theme="dark"] #panel-subscribe .sub-btn-copy.is-copied .copy-label {
  color:#faf5ff !important;
  fill:currentColor !important;
  stroke:currentColor !important;
}

[data-theme="dark"] #panel-subscribe .sub-btn-support {
  background:rgba(194,65,12,.16) !important;
  border-color:rgba(251,146,60,.28) !important;
  color:#ffedd5 !important;
  box-shadow:0 12px 24px -18px rgba(234,88,12,.18) !important;
}
[data-theme="dark"] #panel-subscribe .sub-btn-support .ic,
[data-theme="dark"] #panel-subscribe .sub-btn-support .support-label {
  color:#ffedd5 !important;
  fill:currentColor !important;
  stroke:currentColor !important;
}
[data-theme="dark"] #panel-subscribe .sub-btn-support:active,
[data-theme="dark"] #panel-subscribe .sub-btn-support[aria-pressed="true"],
[data-theme="dark"] #panel-subscribe .sub-btn-support.is-active {
  background:#ea580c !important;
  border-color:#ea580c !important;
  color:#fff7ed !important;
  box-shadow:0 14px 28px -18px rgba(234,88,12,.34) !important;
}
[data-theme="dark"] #panel-subscribe .sub-btn-support:active .ic,
[data-theme="dark"] #panel-subscribe .sub-btn-support:active .support-label,
[data-theme="dark"] #panel-subscribe .sub-btn-support[aria-pressed="true"] .ic,
[data-theme="dark"] #panel-subscribe .sub-btn-support[aria-pressed="true"] .support-label,
[data-theme="dark"] #panel-subscribe .sub-btn-support.is-active .ic,
[data-theme="dark"] #panel-subscribe .sub-btn-support.is-active .support-label {
  color:#fff7ed !important;
  fill:currentColor !important;
  stroke:currentColor !important;
}


/* keep daytime appearance, unify behavior with other buttons */

#panel-subscribe .sub-btn {
  transition:
    background-color var(--anim),
    border-color var(--anim),
    color var(--anim),
    box-shadow var(--anim),
    transform var(--anim),
    opacity var(--anim);
}

/* default daytime colors */
#panel-subscribe .sub-btn-ios {
  background: #eef6ff !important;
  border-color: #bfdbfe !important;
  color: #2563eb !important;
  box-shadow: 0 10px 22px -18px rgba(37, 99, 235, .14) !important;
}
#panel-subscribe .sub-btn-android {
  background: #ecfeff !important;
  border-color: #67e8f9 !important;
  color: #0f766e !important;
  box-shadow: 0 10px 22px -18px rgba(8, 145, 178, .14) !important;
}
#panel-subscribe .sub-btn-copy {
  background: #f3f0ff !important;
  border-color: #d8b4fe !important;
  color: #6d28d9 !important;
  box-shadow: 0 10px 22px -18px rgba(109, 40, 217, .14) !important;
}
#panel-subscribe .sub-btn-support {
  background: #fff7ed !important;
  border-color: #fdba74 !important;
  color: #c2410c !important;
  box-shadow: 0 10px 22px -18px rgba(249, 115, 22, .14) !important;
}

/* default daytime content colors */
#panel-subscribe .sub-btn-ios .sub-cta-text,
#panel-subscribe .sub-btn-ios .sub-cta-img {
  color: #2563eb !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}
#panel-subscribe .sub-btn-android .sub-cta-text,
#panel-subscribe .sub-btn-android .sub-cta-img {
  color: #0f766e !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}
#panel-subscribe .sub-btn-copy .copy-label,
#panel-subscribe .sub-btn-copy .ic {
  color: #6d28d9 !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}
#panel-subscribe .sub-btn-support .support-label,
#panel-subscribe .sub-btn-support .ic {
  color: #c2410c !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* hover keeps same family, no dramatic look */
#panel-subscribe .sub-btn-ios:hover {
  background: #e6f1ff !important;
  border-color: #93c5fd !important;
}
#panel-subscribe .sub-btn-android:hover {
  background: #e2fcff !important;
  border-color: #22d3ee !important;
}
#panel-subscribe .sub-btn-copy:hover {
  background: #eee8ff !important;
  border-color: #c084fc !important;
}
#panel-subscribe .sub-btn-support:hover {
  background: #fff2e8 !important;
  border-color: #fb923c !important;
}

/* selected / active / copied: same behavior as other buttons, strong contrast */
#panel-subscribe .sub-btn-ios:active,
#panel-subscribe .sub-btn-ios[aria-pressed="true"],
#panel-subscribe .sub-btn-ios.is-active,
#panel-subscribe .sub-btn-ios.active,
#panel-subscribe .sub-btn-ios.selected,
#panel-subscribe .sub-btn-ios.is-selected {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #ffffff !important;
  box-shadow: 0 12px 24px -18px rgba(37, 99, 235, .30) !important;
}
#panel-subscribe .sub-btn-ios:active .sub-cta-text,
#panel-subscribe .sub-btn-ios[aria-pressed="true"] .sub-cta-text,
#panel-subscribe .sub-btn-ios.is-active .sub-cta-text,
#panel-subscribe .sub-btn-ios.active .sub-cta-text,
#panel-subscribe .sub-btn-ios.selected .sub-cta-text,
#panel-subscribe .sub-btn-ios.is-selected .sub-cta-text {
  color: #ffffff !important;
}
#panel-subscribe .sub-btn-ios:active .sub-cta-img,
#panel-subscribe .sub-btn-ios[aria-pressed="true"] .sub-cta-img,
#panel-subscribe .sub-btn-ios.is-active .sub-cta-img,
#panel-subscribe .sub-btn-ios.active .sub-cta-img,
#panel-subscribe .sub-btn-ios.selected .sub-cta-img,
#panel-subscribe .sub-btn-ios.is-selected .sub-cta-img {
  filter: brightness(0) invert(1) contrast(1.05) !important;
  opacity: 1 !important;
}

#panel-subscribe .sub-btn-android:active,
#panel-subscribe .sub-btn-android[aria-pressed="true"],
#panel-subscribe .sub-btn-android.is-active,
#panel-subscribe .sub-btn-android.active,
#panel-subscribe .sub-btn-android.selected,
#panel-subscribe .sub-btn-android.is-selected {
  background: #0f766e !important;
  border-color: #0f766e !important;
  color: #ffffff !important;
  box-shadow: 0 12px 24px -18px rgba(8, 145, 178, .30) !important;
}
#panel-subscribe .sub-btn-android:active .sub-cta-text,
#panel-subscribe .sub-btn-android[aria-pressed="true"] .sub-cta-text,
#panel-subscribe .sub-btn-android.is-active .sub-cta-text,
#panel-subscribe .sub-btn-android.active .sub-cta-text,
#panel-subscribe .sub-btn-android.selected .sub-cta-text,
#panel-subscribe .sub-btn-android.is-selected .sub-cta-text {
  color: #ffffff !important;
}
#panel-subscribe .sub-btn-android:active .sub-cta-img,
#panel-subscribe .sub-btn-android[aria-pressed="true"] .sub-cta-img,
#panel-subscribe .sub-btn-android.is-active .sub-cta-img,
#panel-subscribe .sub-btn-android.active .sub-cta-img,
#panel-subscribe .sub-btn-android.selected .sub-cta-img,
#panel-subscribe .sub-btn-android.is-selected .sub-cta-img {
  filter: brightness(0) invert(1) contrast(1.05) !important;
  opacity: 1 !important;
}

#panel-subscribe .sub-btn-copy:active,
#panel-subscribe .sub-btn-copy[aria-pressed="true"],
#panel-subscribe .sub-btn-copy.is-active,
#panel-subscribe .sub-btn-copy.active,
#panel-subscribe .sub-btn-copy.selected,
#panel-subscribe .sub-btn-copy.is-selected,
#panel-subscribe .sub-btn-copy.is-copied {
  background: #6d28d9 !important;
  border-color: #6d28d9 !important;
  color: #ffffff !important;
  box-shadow: 0 12px 24px -18px rgba(109, 40, 217, .28) !important;
}
#panel-subscribe .sub-btn-copy:active .copy-label,
#panel-subscribe .sub-btn-copy:active .ic,
#panel-subscribe .sub-btn-copy[aria-pressed="true"] .copy-label,
#panel-subscribe .sub-btn-copy[aria-pressed="true"] .ic,
#panel-subscribe .sub-btn-copy.is-active .copy-label,
#panel-subscribe .sub-btn-copy.is-active .ic,
#panel-subscribe .sub-btn-copy.active .copy-label,
#panel-subscribe .sub-btn-copy.active .ic,
#panel-subscribe .sub-btn-copy.selected .copy-label,
#panel-subscribe .sub-btn-copy.selected .ic,
#panel-subscribe .sub-btn-copy.is-selected .copy-label,
#panel-subscribe .sub-btn-copy.is-selected .ic,
#panel-subscribe .sub-btn-copy.is-copied .copy-label,
#panel-subscribe .sub-btn-copy.is-copied .ic {
  color: #ffffff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

#panel-subscribe .sub-btn-support:active,
#panel-subscribe .sub-btn-support[aria-pressed="true"],
#panel-subscribe .sub-btn-support.is-active,
#panel-subscribe .sub-btn-support.active,
#panel-subscribe .sub-btn-support.selected,
#panel-subscribe .sub-btn-support.is-selected {
  background: #c2410c !important;
  border-color: #c2410c !important;
  color: #ffffff !important;
  box-shadow: 0 12px 24px -18px rgba(194, 65, 12, .28) !important;
}
#panel-subscribe .sub-btn-support:active .support-label,
#panel-subscribe .sub-btn-support:active .ic,
#panel-subscribe .sub-btn-support[aria-pressed="true"] .support-label,
#panel-subscribe .sub-btn-support[aria-pressed="true"] .ic,
#panel-subscribe .sub-btn-support.is-active .support-label,
#panel-subscribe .sub-btn-support.is-active .ic,
#panel-subscribe .sub-btn-support.active .support-label,
#panel-subscribe .sub-btn-support.active .ic,
#panel-subscribe .sub-btn-support.selected .support-label,
#panel-subscribe .sub-btn-support.selected .ic,
#panel-subscribe .sub-btn-support.is-selected .support-label,
#panel-subscribe .sub-btn-support.is-selected .ic {
  color: #ffffff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* dark mode: adapt from daytime palette */
html[data-theme="dark"] #panel-subscribe .sub-btn-ios {
  background: rgba(37, 99, 235, .16) !important;
  border-color: rgba(96, 165, 250, .30) !important;
  color: #dbeafe !important;
  box-shadow: 0 12px 24px -18px rgba(37, 99, 235, .18) !important;
}
html[data-theme="dark"] #panel-subscribe .sub-btn-android {
  background: rgba(15, 118, 110, .16) !important;
  border-color: rgba(45, 212, 191, .30) !important;
  color: #ccfbf1 !important;
  box-shadow: 0 12px 24px -18px rgba(13, 148, 136, .18) !important;
}
html[data-theme="dark"] #panel-subscribe .sub-btn-copy {
  background: rgba(109, 40, 217, .16) !important;
  border-color: rgba(192, 132, 252, .30) !important;
  color: #f3e8ff !important;
  box-shadow: 0 12px 24px -18px rgba(109, 40, 217, .18) !important;
}
html[data-theme="dark"] #panel-subscribe .sub-btn-support {
  background: rgba(194, 65, 12, .16) !important;
  border-color: rgba(251, 146, 60, .30) !important;
  color: #ffedd5 !important;
  box-shadow: 0 12px 24px -18px rgba(234, 88, 12, .18) !important;
}

html[data-theme="dark"] #panel-subscribe .sub-btn-ios .sub-cta-text,
html[data-theme="dark"] #panel-subscribe .sub-btn-copy .copy-label,
html[data-theme="dark"] #panel-subscribe .sub-btn-copy .ic,
html[data-theme="dark"] #panel-subscribe .sub-btn-support .support-label,
html[data-theme="dark"] #panel-subscribe .sub-btn-support .ic {
  color: currentColor !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}
html[data-theme="dark"] #panel-subscribe .sub-btn-ios .sub-cta-img,
html[data-theme="dark"] #panel-subscribe .sub-btn-android .sub-cta-img {
  filter: brightness(0) invert(1) contrast(1.05) !important;
  opacity: .96 !important;
}
html[data-theme="dark"] #panel-subscribe .sub-btn-android .sub-cta-text {
  color: #ccfbf1 !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* dark selected: same family, solid, white content */
html[data-theme="dark"] #panel-subscribe .sub-btn-ios:active,
html[data-theme="dark"] #panel-subscribe .sub-btn-ios[aria-pressed="true"],
html[data-theme="dark"] #panel-subscribe .sub-btn-ios.is-active,
html[data-theme="dark"] #panel-subscribe .sub-btn-ios.active,
html[data-theme="dark"] #panel-subscribe .sub-btn-ios.selected,
html[data-theme="dark"] #panel-subscribe .sub-btn-ios.is-selected {
  background: #3b82f6 !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
  box-shadow: 0 14px 28px -18px rgba(59, 130, 246, .34) !important;
}
html[data-theme="dark"] #panel-subscribe .sub-btn-ios:active .sub-cta-text,
html[data-theme="dark"] #panel-subscribe .sub-btn-ios[aria-pressed="true"] .sub-cta-text,
html[data-theme="dark"] #panel-subscribe .sub-btn-ios.is-active .sub-cta-text,
html[data-theme="dark"] #panel-subscribe .sub-btn-ios.active .sub-cta-text,
html[data-theme="dark"] #panel-subscribe .sub-btn-ios.selected .sub-cta-text,
html[data-theme="dark"] #panel-subscribe .sub-btn-ios.is-selected .sub-cta-text {
  color: #ffffff !important;
}
html[data-theme="dark"] #panel-subscribe .sub-btn-ios:active .sub-cta-img,
html[data-theme="dark"] #panel-subscribe .sub-btn-ios[aria-pressed="true"] .sub-cta-img,
html[data-theme="dark"] #panel-subscribe .sub-btn-ios.is-active .sub-cta-img,
html[data-theme="dark"] #panel-subscribe .sub-btn-ios.active .sub-cta-img,
html[data-theme="dark"] #panel-subscribe .sub-btn-ios.selected .sub-cta-img,
html[data-theme="dark"] #panel-subscribe .sub-btn-ios.is-selected .sub-cta-img {
  filter: brightness(0) invert(1) contrast(1.05) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] #panel-subscribe .sub-btn-android:active,
html[data-theme="dark"] #panel-subscribe .sub-btn-android[aria-pressed="true"],
html[data-theme="dark"] #panel-subscribe .sub-btn-android.is-active,
html[data-theme="dark"] #panel-subscribe .sub-btn-android.active,
html[data-theme="dark"] #panel-subscribe .sub-btn-android.selected,
html[data-theme="dark"] #panel-subscribe .sub-btn-android.is-selected {
  background: #14b8a6 !important;
  border-color: #14b8a6 !important;
  color: #ffffff !important;
  box-shadow: 0 14px 28px -18px rgba(20, 184, 166, .34) !important;
}
html[data-theme="dark"] #panel-subscribe .sub-btn-android:active .sub-cta-text,
html[data-theme="dark"] #panel-subscribe .sub-btn-android[aria-pressed="true"] .sub-cta-text,
html[data-theme="dark"] #panel-subscribe .sub-btn-android.is-active .sub-cta-text,
html[data-theme="dark"] #panel-subscribe .sub-btn-android.active .sub-cta-text,
html[data-theme="dark"] #panel-subscribe .sub-btn-android.selected .sub-cta-text,
html[data-theme="dark"] #panel-subscribe .sub-btn-android.is-selected .sub-cta-text {
  color: #ffffff !important;
}
html[data-theme="dark"] #panel-subscribe .sub-btn-android:active .sub-cta-img,
html[data-theme="dark"] #panel-subscribe .sub-btn-android[aria-pressed="true"] .sub-cta-img,
html[data-theme="dark"] #panel-subscribe .sub-btn-android.is-active .sub-cta-img,
html[data-theme="dark"] #panel-subscribe .sub-btn-android.active .sub-cta-img,
html[data-theme="dark"] #panel-subscribe .sub-btn-android.selected .sub-cta-img,
html[data-theme="dark"] #panel-subscribe .sub-btn-android.is-selected .sub-cta-img {
  filter: brightness(0) invert(1) contrast(1.05) !important;
  opacity: 1 !important;
}

html[data-theme="dark"] #panel-subscribe .sub-btn-copy:active,
html[data-theme="dark"] #panel-subscribe .sub-btn-copy[aria-pressed="true"],
html[data-theme="dark"] #panel-subscribe .sub-btn-copy.is-active,
html[data-theme="dark"] #panel-subscribe .sub-btn-copy.active,
html[data-theme="dark"] #panel-subscribe .sub-btn-copy.selected,
html[data-theme="dark"] #panel-subscribe .sub-btn-copy.is-selected,
html[data-theme="dark"] #panel-subscribe .sub-btn-copy.is-copied {
  background: #7c3aed !important;
  border-color: #7c3aed !important;
  color: #ffffff !important;
  box-shadow: 0 14px 28px -18px rgba(124, 58, 237, .34) !important;
}
html[data-theme="dark"] #panel-subscribe .sub-btn-copy:active .copy-label,
html[data-theme="dark"] #panel-subscribe .sub-btn-copy:active .ic,
html[data-theme="dark"] #panel-subscribe .sub-btn-copy[aria-pressed="true"] .copy-label,
html[data-theme="dark"] #panel-subscribe .sub-btn-copy[aria-pressed="true"] .ic,
html[data-theme="dark"] #panel-subscribe .sub-btn-copy.is-active .copy-label,
html[data-theme="dark"] #panel-subscribe .sub-btn-copy.is-active .ic,
html[data-theme="dark"] #panel-subscribe .sub-btn-copy.active .copy-label,
html[data-theme="dark"] #panel-subscribe .sub-btn-copy.active .ic,
html[data-theme="dark"] #panel-subscribe .sub-btn-copy.selected .copy-label,
html[data-theme="dark"] #panel-subscribe .sub-btn-copy.selected .ic,
html[data-theme="dark"] #panel-subscribe .sub-btn-copy.is-selected .copy-label,
html[data-theme="dark"] #panel-subscribe .sub-btn-copy.is-selected .ic,
html[data-theme="dark"] #panel-subscribe .sub-btn-copy.is-copied .copy-label,
html[data-theme="dark"] #panel-subscribe .sub-btn-copy.is-copied .ic {
  color: #ffffff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

html[data-theme="dark"] #panel-subscribe .sub-btn-support:active,
html[data-theme="dark"] #panel-subscribe .sub-btn-support[aria-pressed="true"],
html[data-theme="dark"] #panel-subscribe .sub-btn-support.is-active,
html[data-theme="dark"] #panel-subscribe .sub-btn-support.active,
html[data-theme="dark"] #panel-subscribe .sub-btn-support.selected,
html[data-theme="dark"] #panel-subscribe .sub-btn-support.is-selected {
  background: #ea580c !important;
  border-color: #ea580c !important;
  color: #ffffff !important;
  box-shadow: 0 14px 28px -18px rgba(234, 88, 12, .34) !important;
}
html[data-theme="dark"] #panel-subscribe .sub-btn-support:active .support-label,
html[data-theme="dark"] #panel-subscribe .sub-btn-support:active .ic,
html[data-theme="dark"] #panel-subscribe .sub-btn-support[aria-pressed="true"] .support-label,
html[data-theme="dark"] #panel-subscribe .sub-btn-support[aria-pressed="true"] .ic,
html[data-theme="dark"] #panel-subscribe .sub-btn-support.is-active .support-label,
html[data-theme="dark"] #panel-subscribe .sub-btn-support.is-active .ic,
html[data-theme="dark"] #panel-subscribe .sub-btn-support.active .support-label,
html[data-theme="dark"] #panel-subscribe .sub-btn-support.active .ic,
html[data-theme="dark"] #panel-subscribe .sub-btn-support.selected .support-label,
html[data-theme="dark"] #panel-subscribe .sub-btn-support.selected .ic,
html[data-theme="dark"] #panel-subscribe .sub-btn-support.is-selected .support-label,
html[data-theme="dark"] #panel-subscribe .sub-btn-support.is-selected .ic {
  color: #ffffff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* subscribe buttons simplified behavior */
/* keep current colors/appearance; only use normal hover + active like site buttons */

#panel-subscribe .sub-btn{
  transition:
    background-color var(--anim),
    border-color var(--anim),
    color var(--anim),
    box-shadow var(--anim),
    transform var(--anim),
    opacity var(--anim);
}

/* daytime default */
#panel-subscribe .sub-btn-ios{
  background:#eef6ff !important;
  border-color:#bfdbfe !important;
  color:#2563eb !important;
  box-shadow:0 10px 22px -18px rgba(37,99,235,.14) !important;
}
#panel-subscribe .sub-btn-ios .sub-cta-text,
#panel-subscribe .sub-btn-ios .sub-cta-img{
  color:#2563eb !important;
  fill:currentColor !important;
  stroke:currentColor !important;
}

#panel-subscribe .sub-btn-android{
  background:#ecfeff !important;
  border-color:#67e8f9 !important;
  color:#0f766e !important;
  box-shadow:0 10px 22px -18px rgba(8,145,178,.14) !important;
}
#panel-subscribe .sub-btn-android .sub-cta-text,
#panel-subscribe .sub-btn-android .sub-cta-img{
  color:#0f766e !important;
  fill:currentColor !important;
  stroke:currentColor !important;
}

#panel-subscribe .sub-btn-copy{
  background:#f3f0ff !important;
  border-color:#d8b4fe !important;
  color:#6d28d9 !important;
  box-shadow:0 10px 22px -18px rgba(109,40,217,.14) !important;
}
#panel-subscribe .sub-btn-copy .copy-label,
#panel-subscribe .sub-btn-copy .ic{
  color:#6d28d9 !important;
  fill:currentColor !important;
  stroke:currentColor !important;
}

#panel-subscribe .sub-btn-support{
  background:#fff7ed !important;
  border-color:#fdba74 !important;
  color:#c2410c !important;
  box-shadow:0 10px 22px -18px rgba(249,115,22,.14) !important;
}
#panel-subscribe .sub-btn-support .support-label,
#panel-subscribe .sub-btn-support .ic{
  color:#c2410c !important;
  fill:currentColor !important;
  stroke:currentColor !important;
}

/* hover */
#panel-subscribe .sub-btn-ios:hover{ background:#e5f1ff !important; border-color:#93c5fd !important; }
#panel-subscribe .sub-btn-android:hover{ background:#dffbff !important; border-color:#22d3ee !important; }
#panel-subscribe .sub-btn-copy:hover{ background:#ede9fe !important; border-color:#c084fc !important; }
#panel-subscribe .sub-btn-support:hover{ background:#fff1e6 !important; border-color:#fb923c !important; }

/* active only, like other site buttons */
#panel-subscribe .sub-btn-ios:active{
  background:#2563eb !important; border-color:#2563eb !important; color:#ffffff !important;
}
#panel-subscribe .sub-btn-ios:active .sub-cta-text{ color:#ffffff !important; }
#panel-subscribe .sub-btn-ios:active .sub-cta-img{
  filter:brightness(0) invert(1) contrast(1.05) !important; opacity:1 !important;
}

#panel-subscribe .sub-btn-android:active{
  background:#0f766e !important; border-color:#0f766e !important; color:#ffffff !important;
}
#panel-subscribe .sub-btn-android:active .sub-cta-text{ color:#ffffff !important; }
#panel-subscribe .sub-btn-android:active .sub-cta-img{
  filter:brightness(0) invert(1) contrast(1.05) !important; opacity:1 !important;
}

#panel-subscribe .sub-btn-copy:active,
#panel-subscribe .sub-btn-copy.is-copied{
  background:#6d28d9 !important; border-color:#6d28d9 !important; color:#ffffff !important;
}
#panel-subscribe .sub-btn-copy:active .copy-label,
#panel-subscribe .sub-btn-copy:active .ic,
#panel-subscribe .sub-btn-copy.is-copied .copy-label,
#panel-subscribe .sub-btn-copy.is-copied .ic{
  color:#ffffff !important; fill:currentColor !important; stroke:currentColor !important;
}

#panel-subscribe .sub-btn-support:active{
  background:#c2410c !important; border-color:#c2410c !important; color:#ffffff !important;
}
#panel-subscribe .sub-btn-support:active .support-label,
#panel-subscribe .sub-btn-support:active .ic{
  color:#ffffff !important; fill:currentColor !important; stroke:currentColor !important;
}

/* dark mode default */
html[data-theme="dark"] #panel-subscribe .sub-btn-ios{
  background:rgba(37,99,235,.16) !important;
  border-color:rgba(96,165,250,.30) !important;
  color:#dbeafe !important;
  box-shadow:0 12px 24px -18px rgba(37,99,235,.18) !important;
}
html[data-theme="dark"] #panel-subscribe .sub-btn-ios .sub-cta-text{ color:#dbeafe !important; }
html[data-theme="dark"] #panel-subscribe .sub-btn-ios .sub-cta-img{
  filter:brightness(0) invert(1) contrast(1.05) !important; opacity:.96 !important;
}

html[data-theme="dark"] #panel-subscribe .sub-btn-android{
  background:rgba(15,118,110,.16) !important;
  border-color:rgba(45,212,191,.30) !important;
  color:#ccfbf1 !important;
  box-shadow:0 12px 24px -18px rgba(13,148,136,.18) !important;
}
html[data-theme="dark"] #panel-subscribe .sub-btn-android .sub-cta-text{ color:#ccfbf1 !important; }
html[data-theme="dark"] #panel-subscribe .sub-btn-android .sub-cta-img{
  filter:brightness(0) invert(1) contrast(1.05) !important; opacity:.96 !important;
}

html[data-theme="dark"] #panel-subscribe .sub-btn-copy{
  background:rgba(109,40,217,.16) !important;
  border-color:rgba(192,132,252,.30) !important;
  color:#f3e8ff !important;
  box-shadow:0 12px 24px -18px rgba(109,40,217,.18) !important;
}
html[data-theme="dark"] #panel-subscribe .sub-btn-copy .copy-label,
html[data-theme="dark"] #panel-subscribe .sub-btn-copy .ic{
  color:#f3e8ff !important; fill:currentColor !important; stroke:currentColor !important;
}

html[data-theme="dark"] #panel-subscribe .sub-btn-support{
  background:rgba(194,65,12,.16) !important;
  border-color:rgba(251,146,60,.30) !important;
  color:#ffedd5 !important;
  box-shadow:0 12px 24px -18px rgba(234,88,12,.18) !important;
}
html[data-theme="dark"] #panel-subscribe .sub-btn-support .support-label,
html[data-theme="dark"] #panel-subscribe .sub-btn-support .ic{
  color:#ffedd5 !important; fill:currentColor !important; stroke:currentColor !important;
}

/* dark hover */
html[data-theme="dark"] #panel-subscribe .sub-btn-ios:hover{ background:rgba(37,99,235,.22) !important; border-color:rgba(147,197,253,.34) !important; }
html[data-theme="dark"] #panel-subscribe .sub-btn-android:hover{ background:rgba(15,118,110,.22) !important; border-color:rgba(94,234,212,.34) !important; }
html[data-theme="dark"] #panel-subscribe .sub-btn-copy:hover{ background:rgba(109,40,217,.22) !important; border-color:rgba(216,180,254,.34) !important; }
html[data-theme="dark"] #panel-subscribe .sub-btn-support:hover{ background:rgba(194,65,12,.22) !important; border-color:rgba(253,186,116,.34) !important; }

/* dark active only */
html[data-theme="dark"] #panel-subscribe .sub-btn-ios:active{
  background:#3b82f6 !important; border-color:#3b82f6 !important; color:#ffffff !important;
}
html[data-theme="dark"] #panel-subscribe .sub-btn-ios:active .sub-cta-text{ color:#ffffff !important; }
html[data-theme="dark"] #panel-subscribe .sub-btn-ios:active .sub-cta-img{
  filter:brightness(0) invert(1) contrast(1.05) !important; opacity:1 !important;
}

html[data-theme="dark"] #panel-subscribe .sub-btn-android:active{
  background:#14b8a6 !important; border-color:#14b8a6 !important; color:#ffffff !important;
}
html[data-theme="dark"] #panel-subscribe .sub-btn-android:active .sub-cta-text{ color:#ffffff !important; }
html[data-theme="dark"] #panel-subscribe .sub-btn-android:active .sub-cta-img{
  filter:brightness(0) invert(1) contrast(1.05) !important; opacity:1 !important;
}

html[data-theme="dark"] #panel-subscribe .sub-btn-copy:active,
html[data-theme="dark"] #panel-subscribe .sub-btn-copy.is-copied{
  background:#7c3aed !important; border-color:#7c3aed !important; color:#ffffff !important;
}
html[data-theme="dark"] #panel-subscribe .sub-btn-copy:active .copy-label,
html[data-theme="dark"] #panel-subscribe .sub-btn-copy:active .ic,
html[data-theme="dark"] #panel-subscribe .sub-btn-copy.is-copied .copy-label,
html[data-theme="dark"] #panel-subscribe .sub-btn-copy.is-copied .ic{
  color:#ffffff !important; fill:currentColor !important; stroke:currentColor !important;
}

html[data-theme="dark"] #panel-subscribe .sub-btn-support:active{
  background:#ea580c !important; border-color:#ea580c !important; color:#ffffff !important;
}
html[data-theme="dark"] #panel-subscribe .sub-btn-support:active .support-label,
html[data-theme="dark"] #panel-subscribe .sub-btn-support:active .ic{
  color:#ffffff !important; fill:currentColor !important; stroke:currentColor !important;
}


/* === v30 approved shadowrocket button palette === */
#panel-subscribe .sub-btn-ios{
  background: rgba(225, 29, 72, 0.16) !important;
  color: #9f1239 !important;
  border-color: rgba(225, 29, 72, 0.34) !important;
  text-shadow: none !important;
  box-shadow: 0 8px 20px rgba(225, 29, 72, 0.10) !important;
  backdrop-filter: blur(10px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
}
#panel-subscribe .sub-btn-ios *,
#panel-subscribe .sub-btn-ios span,
#panel-subscribe .sub-btn-ios strong,
#panel-subscribe .sub-btn-ios small,
#panel-subscribe .sub-btn-ios i,
#panel-subscribe .sub-btn-ios .sub-cta-text,
#panel-subscribe .sub-btn-ios .sub-cta-img{
  color: #9f1239 !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}
html[data-theme="dark"] #panel-subscribe .sub-btn-ios{
  background: rgba(225, 29, 72, 0.18) !important;
  color: #fecdd3 !important;
  border-color: rgba(251, 113, 133, 0.32) !important;
  text-shadow: none !important;
  box-shadow: 0 10px 24px rgba(225, 29, 72, 0.12) !important;
  backdrop-filter: blur(10px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
}
html[data-theme="dark"] #panel-subscribe .sub-btn-ios *,
html[data-theme="dark"] #panel-subscribe .sub-btn-ios span,
html[data-theme="dark"] #panel-subscribe .sub-btn-ios strong,
html[data-theme="dark"] #panel-subscribe .sub-btn-ios small,
html[data-theme="dark"] #panel-subscribe .sub-btn-ios i,
html[data-theme="dark"] #panel-subscribe .sub-btn-ios .sub-cta-text,
html[data-theme="dark"] #panel-subscribe .sub-btn-ios .sub-cta-img{
  color: #fecdd3 !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}
#panel-subscribe .sub-btn-ios:active,
#panel-subscribe .sub-btn-ios[aria-pressed="true"],
#panel-subscribe .sub-btn-ios.is-active,
#panel-subscribe .sub-btn-ios.active,
#panel-subscribe .sub-btn-ios.selected,
#panel-subscribe .sub-btn-ios.is-selected{
  background: #e11d48 !important;
  color: #ffffff !important;
  border-color: #e11d48 !important;
  box-shadow: 0 8px 18px rgba(225, 29, 72, 0.22) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: 0 1px 1px rgba(0,0,0,.12) !important;
}
#panel-subscribe .sub-btn-ios:active *,
#panel-subscribe .sub-btn-ios[aria-pressed="true"] *,
#panel-subscribe .sub-btn-ios.is-active *,
#panel-subscribe .sub-btn-ios.active *,
#panel-subscribe .sub-btn-ios.selected *,
#panel-subscribe .sub-btn-ios.is-selected *,
#panel-subscribe .sub-btn-ios:active .sub-cta-text,
#panel-subscribe .sub-btn-ios[aria-pressed="true"] .sub-cta-text,
#panel-subscribe .sub-btn-ios.is-active .sub-cta-text,
#panel-subscribe .sub-btn-ios.active .sub-cta-text,
#panel-subscribe .sub-btn-ios.selected .sub-cta-text,
#panel-subscribe .sub-btn-ios.is-selected .sub-cta-text,
#panel-subscribe .sub-btn-ios:active .sub-cta-img,
#panel-subscribe .sub-btn-ios[aria-pressed="true"] .sub-cta-img,
#panel-subscribe .sub-btn-ios.is-active .sub-cta-img,
#panel-subscribe .sub-btn-ios.active .sub-cta-img,
#panel-subscribe .sub-btn-ios.selected .sub-cta-img,
#panel-subscribe .sub-btn-ios.is-selected .sub-cta-img{
  color: #ffffff !important;
  fill: currentColor !important;
  opacity: 1 !important;
}
html[data-theme="dark"] #panel-subscribe .sub-btn-ios:active,
html[data-theme="dark"] #panel-subscribe .sub-btn-ios[aria-pressed="true"],
html[data-theme="dark"] #panel-subscribe .sub-btn-ios.is-active,
html[data-theme="dark"] #panel-subscribe .sub-btn-ios.active,
html[data-theme="dark"] #panel-subscribe .sub-btn-ios.selected,
html[data-theme="dark"] #panel-subscribe .sub-btn-ios.is-selected{
  background: #9f1239 !important;
  color: #fff1f2 !important;
  border-color: #be123c !important;
  box-shadow: 0 10px 22px rgba(159, 18, 57, 0.30) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-theme="dark"] #panel-subscribe .sub-btn-ios:active *,
html[data-theme="dark"] #panel-subscribe .sub-btn-ios[aria-pressed="true"] *,
html[data-theme="dark"] #panel-subscribe .sub-btn-ios.is-active *,
html[data-theme="dark"] #panel-subscribe .sub-btn-ios.active *,
html[data-theme="dark"] #panel-subscribe .sub-btn-ios.selected *,
html[data-theme="dark"] #panel-subscribe .sub-btn-ios.is-selected *,
html[data-theme="dark"] #panel-subscribe .sub-btn-ios:active .sub-cta-text,
html[data-theme="dark"] #panel-subscribe .sub-btn-ios[aria-pressed="true"] .sub-cta-text,
html[data-theme="dark"] #panel-subscribe .sub-btn-ios.is-active .sub-cta-text,
html[data-theme="dark"] #panel-subscribe .sub-btn-ios.active .sub-cta-text,
html[data-theme="dark"] #panel-subscribe .sub-btn-ios.selected .sub-cta-text,
html[data-theme="dark"] #panel-subscribe .sub-btn-ios.is-selected .sub-cta-text,
html[data-theme="dark"] #panel-subscribe .sub-btn-ios:active .sub-cta-img,
html[data-theme="dark"] #panel-subscribe .sub-btn-ios[aria-pressed="true"] .sub-cta-img,
html[data-theme="dark"] #panel-subscribe .sub-btn-ios.is-active .sub-cta-img,
html[data-theme="dark"] #panel-subscribe .sub-btn-ios.active .sub-cta-img,
html[data-theme="dark"] #panel-subscribe .sub-btn-ios.selected .sub-cta-img,
html[data-theme="dark"] #panel-subscribe .sub-btn-ios.is-selected .sub-cta-img{
  color: #fff1f2 !important;
  fill: currentColor !important;
  opacity: 1 !important;
}

/* Desktop-only: make subscribe panel hover match the approved pressed/active color behavior without affecting mobile */
@media (hover: hover) and (pointer: fine) {
  /* iOS / Shadowrocket */
  #panel-subscribe .sub-btn-ios:hover {
    background: #e11d48 !important;
    color: #ffffff !important;
    border-color: #e11d48 !important;
    box-shadow: 0 8px 18px rgba(225, 29, 72, 0.22) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    text-shadow: 0 1px 1px rgba(0,0,0,.12) !important;
    transform: translateY(1px) scale(.985) !important;
  }

  #panel-subscribe .sub-btn-ios:hover *,
  #panel-subscribe .sub-btn-ios:hover span,
  #panel-subscribe .sub-btn-ios:hover strong,
  #panel-subscribe .sub-btn-ios:hover small,
  #panel-subscribe .sub-btn-ios:hover i,
  #panel-subscribe .sub-btn-ios:hover .sub-cta-text,
  #panel-subscribe .sub-btn-ios:hover .sub-cta-img,
  #panel-subscribe .sub-btn-ios:hover svg {
    color: #ffffff !important;
    fill: currentColor !important;
    stroke: currentColor !important;
    opacity: 1 !important;
    filter: none !important;
  }

  html[data-theme="dark"] #panel-subscribe .sub-btn-ios:hover,
  [data-theme="dark"] #panel-subscribe .sub-btn-ios:hover {
    background: #9f1239 !important;
    color: #fff1f2 !important;
    border-color: #be123c !important;
    box-shadow: 0 10px 22px rgba(159, 18, 57, 0.30) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    text-shadow: none !important;
    transform: translateY(1px) scale(.985) !important;
  }

  html[data-theme="dark"] #panel-subscribe .sub-btn-ios:hover *,
  html[data-theme="dark"] #panel-subscribe .sub-btn-ios:hover span,
  html[data-theme="dark"] #panel-subscribe .sub-btn-ios:hover strong,
  html[data-theme="dark"] #panel-subscribe .sub-btn-ios:hover small,
  html[data-theme="dark"] #panel-subscribe .sub-btn-ios:hover i,
  html[data-theme="dark"] #panel-subscribe .sub-btn-ios:hover .sub-cta-text,
  html[data-theme="dark"] #panel-subscribe .sub-btn-ios:hover .sub-cta-img,
  html[data-theme="dark"] #panel-subscribe .sub-btn-ios:hover svg,
  [data-theme="dark"] #panel-subscribe .sub-btn-ios:hover *,
  [data-theme="dark"] #panel-subscribe .sub-btn-ios:hover span,
  [data-theme="dark"] #panel-subscribe .sub-btn-ios:hover strong,
  [data-theme="dark"] #panel-subscribe .sub-btn-ios:hover small,
  [data-theme="dark"] #panel-subscribe .sub-btn-ios:hover i,
  [data-theme="dark"] #panel-subscribe .sub-btn-ios:hover .sub-cta-text,
  [data-theme="dark"] #panel-subscribe .sub-btn-ios:hover .sub-cta-img,
  [data-theme="dark"] #panel-subscribe .sub-btn-ios:hover svg {
    color: #fff1f2 !important;
    fill: currentColor !important;
    stroke: currentColor !important;
    opacity: 1 !important;
    filter: none !important;
  }

  /* Other subscribe buttons: hover = approved active effect */
  #panel-subscribe .sub-btn-android:hover {
    background: #0f766e !important;
    border-color: #0f766e !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px -18px rgba(8, 145, 178, .30) !important;
    transform: translateY(1px) scale(.985) !important;
  }
  #panel-subscribe .sub-btn-android:hover .sub-cta-text {
    color: #ffffff !important;
  }
  #panel-subscribe .sub-btn-android:hover .sub-cta-img {
    filter: brightness(0) invert(1) contrast(1.05) !important;
    opacity: 1 !important;
  }

  #panel-subscribe .sub-btn-copy:hover {
    background: #6d28d9 !important;
    border-color: #6d28d9 !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px -18px rgba(109, 40, 217, .28) !important;
    transform: translateY(1px) scale(.985) !important;
  }
  #panel-subscribe .sub-btn-copy:hover .copy-label,
  #panel-subscribe .sub-btn-copy:hover .ic {
    color: #ffffff !important;
    fill: currentColor !important;
    stroke: currentColor !important;
  }

  #panel-subscribe .sub-btn-support:hover {
    background: #c2410c !important;
    border-color: #c2410c !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px -18px rgba(194, 65, 12, .28) !important;
    transform: translateY(1px) scale(.985) !important;
  }
  #panel-subscribe .sub-btn-support:hover .support-label,
  #panel-subscribe .sub-btn-support:hover .ic {
    color: #ffffff !important;
    fill: currentColor !important;
    stroke: currentColor !important;
  }

  html[data-theme="dark"] #panel-subscribe .sub-btn-android:hover,
  [data-theme="dark"] #panel-subscribe .sub-btn-android:hover {
    background: #0f766e !important;
    border-color: #0f766e !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px -18px rgba(8, 145, 178, .30) !important;
    transform: translateY(1px) scale(.985) !important;
  }
  html[data-theme="dark"] #panel-subscribe .sub-btn-android:hover .sub-cta-text,
  [data-theme="dark"] #panel-subscribe .sub-btn-android:hover .sub-cta-text {
    color: #ffffff !important;
  }
  html[data-theme="dark"] #panel-subscribe .sub-btn-android:hover .sub-cta-img,
  [data-theme="dark"] #panel-subscribe .sub-btn-android:hover .sub-cta-img {
    filter: brightness(0) invert(1) contrast(1.05) !important;
    opacity: 1 !important;
  }

  html[data-theme="dark"] #panel-subscribe .sub-btn-copy:hover,
  [data-theme="dark"] #panel-subscribe .sub-btn-copy:hover {
    background: #6d28d9 !important;
    border-color: #6d28d9 !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px -18px rgba(109, 40, 217, .28) !important;
    transform: translateY(1px) scale(.985) !important;
  }
  html[data-theme="dark"] #panel-subscribe .sub-btn-copy:hover .copy-label,
  html[data-theme="dark"] #panel-subscribe .sub-btn-copy:hover .ic,
  [data-theme="dark"] #panel-subscribe .sub-btn-copy:hover .copy-label,
  [data-theme="dark"] #panel-subscribe .sub-btn-copy:hover .ic {
    color: #ffffff !important;
    fill: currentColor !important;
    stroke: currentColor !important;
  }

  html[data-theme="dark"] #panel-subscribe .sub-btn-support:hover,
  [data-theme="dark"] #panel-subscribe .sub-btn-support:hover {
    background: #c2410c !important;
    border-color: #c2410c !important;
    color: #ffffff !important;
    box-shadow: 0 12px 24px -18px rgba(194, 65, 12, .28) !important;
    transform: translateY(1px) scale(.985) !important;
  }
  html[data-theme="dark"] #panel-subscribe .sub-btn-support:hover .support-label,
  html[data-theme="dark"] #panel-subscribe .sub-btn-support:hover .ic,
  [data-theme="dark"] #panel-subscribe .sub-btn-support:hover .support-label,
  [data-theme="dark"] #panel-subscribe .sub-btn-support:hover .ic {
    color: #ffffff !important;
    fill: currentColor !important;
    stroke: currentColor !important;
  }
}

/* ===== Custom color for Import v2rayNG button (desktop + mobile, light + dark) ===== */
#panel-subscribe #btnAndroidImport,
#panel-subscribe #btnAndroidImport:visited {
  background: rgba(8, 145, 178, .14) !important;
  border-color: #0891b2 !important;
  color: #0891b2 !important;
  box-shadow: 0 8px 18px rgba(8, 145, 178, .12) !important;
  transition:
    transform .08s ease,
    background-color .08s ease,
    border-color .08s ease,
    color .08s ease,
    box-shadow .08s ease !important;
}

#panel-subscribe #btnAndroidImport *,
#panel-subscribe #btnAndroidImport .sub-cta-text,
#panel-subscribe #btnAndroidImport .sub-cta-img,
#panel-subscribe #btnAndroidImport .ic,
#panel-subscribe #btnAndroidImport svg {
  color: #0891b2 !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}

#panel-subscribe #btnAndroidImport:hover,
#panel-subscribe #btnAndroidImport:active,
#panel-subscribe #btnAndroidImport:focus,
#panel-subscribe #btnAndroidImport:focus-visible,
#panel-subscribe #btnAndroidImport[aria-pressed="true"],
#panel-subscribe #btnAndroidImport.is-active,
#panel-subscribe #btnAndroidImport.is-pressed,
#panel-subscribe #btnAndroidImport.active,
#panel-subscribe #btnAndroidImport.selected,
#panel-subscribe #btnAndroidImport.is-selected {
  background: #0891b2 !important;
  border-color: #0891b2 !important;
  color: #ffffff !important;
  box-shadow: 0 12px 24px -18px rgba(8, 145, 178, .30) !important;
  transform: translateY(1px) scale(.985) !important;
  outline: none !important;
}

#panel-subscribe #btnAndroidImport:hover *,
#panel-subscribe #btnAndroidImport:active *,
#panel-subscribe #btnAndroidImport:focus *,
#panel-subscribe #btnAndroidImport:focus-visible *,
#panel-subscribe #btnAndroidImport[aria-pressed="true"] *,
#panel-subscribe #btnAndroidImport.is-active *,
#panel-subscribe #btnAndroidImport.is-pressed *,
#panel-subscribe #btnAndroidImport.active *,
#panel-subscribe #btnAndroidImport.selected *,
#panel-subscribe #btnAndroidImport.is-selected * {
  color: #ffffff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
  filter: none !important;
}

html[data-theme="dark"] #panel-subscribe #btnAndroidImport,
[data-theme="dark"] #panel-subscribe #btnAndroidImport {
  background: rgba(14, 116, 144, .22) !important;
  border-color: #0e7490 !important;
  color: #cffafe !important;
  box-shadow: 0 8px 18px rgba(14, 116, 144, .16) !important;
}

html[data-theme="dark"] #panel-subscribe #btnAndroidImport *,
html[data-theme="dark"] #panel-subscribe #btnAndroidImport .sub-cta-text,
html[data-theme="dark"] #panel-subscribe #btnAndroidImport .sub-cta-img,
html[data-theme="dark"] #panel-subscribe #btnAndroidImport .ic,
html[data-theme="dark"] #panel-subscribe #btnAndroidImport svg,
[data-theme="dark"] #panel-subscribe #btnAndroidImport *,
[data-theme="dark"] #panel-subscribe #btnAndroidImport .sub-cta-text,
[data-theme="dark"] #panel-subscribe #btnAndroidImport .sub-cta-img,
[data-theme="dark"] #panel-subscribe #btnAndroidImport .ic,
[data-theme="dark"] #panel-subscribe #btnAndroidImport svg {
  color: #cffafe !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

html[data-theme="dark"] #panel-subscribe #btnAndroidImport:hover,
html[data-theme="dark"] #panel-subscribe #btnAndroidImport:active,
html[data-theme="dark"] #panel-subscribe #btnAndroidImport:focus,
html[data-theme="dark"] #panel-subscribe #btnAndroidImport:focus-visible,
html[data-theme="dark"] #panel-subscribe #btnAndroidImport[aria-pressed="true"],
html[data-theme="dark"] #panel-subscribe #btnAndroidImport.is-active,
html[data-theme="dark"] #panel-subscribe #btnAndroidImport.is-pressed,
html[data-theme="dark"] #panel-subscribe #btnAndroidImport.active,
html[data-theme="dark"] #panel-subscribe #btnAndroidImport.selected,
html[data-theme="dark"] #panel-subscribe #btnAndroidImport.is-selected,
[data-theme="dark"] #panel-subscribe #btnAndroidImport:hover,
[data-theme="dark"] #panel-subscribe #btnAndroidImport:active,
[data-theme="dark"] #panel-subscribe #btnAndroidImport:focus,
[data-theme="dark"] #panel-subscribe #btnAndroidImport:focus-visible,
[data-theme="dark"] #panel-subscribe #btnAndroidImport[aria-pressed="true"],
[data-theme="dark"] #panel-subscribe #btnAndroidImport.is-active,
[data-theme="dark"] #panel-subscribe #btnAndroidImport.is-pressed,
[data-theme="dark"] #panel-subscribe #btnAndroidImport.active,
[data-theme="dark"] #panel-subscribe #btnAndroidImport.selected,
[data-theme="dark"] #panel-subscribe #btnAndroidImport.is-selected {
  background: #0e7490 !important;
  border-color: #0e7490 !important;
  color: #ffffff !important;
  box-shadow: 0 12px 24px -18px rgba(14, 116, 144, .34) !important;
  transform: translateY(1px) scale(.985) !important;
}

html[data-theme="dark"] #panel-subscribe #btnAndroidImport:hover *,
html[data-theme="dark"] #panel-subscribe #btnAndroidImport:active *,
html[data-theme="dark"] #panel-subscribe #btnAndroidImport:focus *,
html[data-theme="dark"] #panel-subscribe #btnAndroidImport:focus-visible *,
html[data-theme="dark"] #panel-subscribe #btnAndroidImport[aria-pressed="true"] *,
html[data-theme="dark"] #panel-subscribe #btnAndroidImport.is-active *,
html[data-theme="dark"] #panel-subscribe #btnAndroidImport.is-pressed *,
html[data-theme="dark"] #panel-subscribe #btnAndroidImport.active *,
html[data-theme="dark"] #panel-subscribe #btnAndroidImport.selected *,
html[data-theme="dark"] #panel-subscribe #btnAndroidImport.is-selected *,
[data-theme="dark"] #panel-subscribe #btnAndroidImport:hover *,
[data-theme="dark"] #panel-subscribe #btnAndroidImport:active *,
[data-theme="dark"] #panel-subscribe #btnAndroidImport:focus *,
[data-theme="dark"] #panel-subscribe #btnAndroidImport:focus-visible *,
[data-theme="dark"] #panel-subscribe #btnAndroidImport[aria-pressed="true"] *,
[data-theme="dark"] #panel-subscribe #btnAndroidImport.is-active *,
[data-theme="dark"] #panel-subscribe #btnAndroidImport.is-pressed *,
[data-theme="dark"] #panel-subscribe #btnAndroidImport.active *,
[data-theme="dark"] #panel-subscribe #btnAndroidImport.selected *,
[data-theme="dark"] #panel-subscribe #btnAndroidImport.is-selected * {
  color: #ffffff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}