/* ==========================================================================
   暗色模式 — Dark Mode
   通过 html.dark 类名触发，JS 自动检测系统偏好或手动切换
   对齐小程序暗色体系：#111111 / #1C1C1E / #141A14
   ========================================================================== */

html.dark {
  /* 设计令牌覆写 */
  --color-text-primary: rgba(255, 255, 255, 0.9);
  --color-text-secondary: rgba(255, 255, 255, 0.6);
  --color-text-muted: rgba(255, 255, 255, 0.38);
  --color-bg-page: #111111;
  --color-bg-card: #1C1C1E;
  --color-bg-dark: #0a0a0a;
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.6);
}

/* ==========================================================================
   Global
   ========================================================================== */
html.dark body {
  background: #111111;
  color: rgba(255, 255, 255, 0.9);
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */
html.dark header {
  background: rgba(28, 28, 30, 0.95) !important;
  border-bottom-color: rgba(180, 239, 78, 0.12);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

html.dark #logo {
  box-shadow: 0 4px 12px rgba(180, 239, 78, 0.12);
}

html.dark nav#navigation ul li a {
  color: rgba(255, 255, 255, 0.85) !important;
  background: transparent !important;
}

html.dark nav#navigation ul li a:hover,
html.dark nav#navigation ul li a.active {
  color: #111111 !important;
  background: linear-gradient(135deg, #B4EF4E 0%, #9DE83F 100%) !important;
}

html.dark nav#navigation ul li a.nav-disabled {
  opacity: 0.3;
}

/* ==========================================================================
   Theme Toggle Button
   ========================================================================== */
.theme-toggle {
  background: transparent;
  border: 1px solid rgba(180, 239, 78, 0.2);
  border-radius: 50%;
  width: 38px;
  height: 38px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: all 0.3s ease;
  flex-shrink: 0;
  margin-left: 0.5rem;
}

.theme-toggle:hover {
  background: rgba(180, 239, 78, 0.1);
  border-color: rgba(180, 239, 78, 0.4);
  transform: scale(1.08);
}

html.dark .theme-toggle {
  border-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}

html.dark .theme-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   Hero 区块
   ========================================================================== */
html.dark .hero-section {
  background: linear-gradient(135deg, #0d1117 0%, #111318 30%, #141A14 100%);
}

html.dark .hero-section::before {
  background: radial-gradient(circle at 30% 20%, rgba(180, 239, 78, 0.06) 0%, transparent 50%),
              radial-gradient(circle at 70% 80%, rgba(10, 132, 255, 0.05) 0%, transparent 50%),
              radial-gradient(circle at 50% 50%, rgba(10, 132, 255, 0.03) 0%, transparent 50%);
}

html.dark .hero-title {
  color: rgba(255, 255, 255, 0.92);
}

html.dark .hero-subtitle-cn {
  color: rgba(255, 255, 255, 0.55);
}

html.dark .hero-description {
  color: rgba(255, 255, 255, 0.8);
}

html.dark .hero-description-cn {
  color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   Hero 价值标签
   ========================================================================== */
html.dark .hero-pill {
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(180, 239, 78, 0.18);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

html.dark .hero-pill-merchant {
  background: rgba(180, 239, 78, 0.1);
  border-color: rgba(180, 239, 78, 0.25);
}

html.dark .hero-pill-consumer {
  background: rgba(10, 132, 255, 0.08);
  border-color: rgba(10, 132, 255, 0.2);
}

/* ==========================================================================
   Section 通用
   ========================================================================== */
html.dark .solutions-section,
html.dark .safety-section,
html.dark .cta-section {
  background: #111111 !important;
}

html.dark .how-it-works-section {
  background: #141A14 !important;
}

html.dark .section-header {
  /* container only, no override needed */
}

html.dark .section-title {
  color: rgba(255, 255, 255, 0.9);
}

html.dark .section-subtitle {
  color: rgba(255, 255, 255, 0.55);
}

html.dark .section-description,
html.dark .safety-description {
  color: rgba(255, 255, 255, 0.75) !important;
}

html.dark .section-description-cn,
html.dark .safety-description-cn {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* ==========================================================================
   卡片通用
   ========================================================================== */
html.dark .solution-card,
html.dark .card {
  background: #1C1C1E;
  border-color: rgba(180, 239, 78, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

html.dark .solution-card:hover,
html.dark .card:hover {
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}

/* 卡片图标 */
html.dark .card-icon {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   场地卡片
   ========================================================================== */
html.dark .solution-card.business-featured {
  background: rgba(10, 132, 255, 0.05);
  border-color: rgba(10, 132, 255, 0.15);
  box-shadow: 0 6px 24px rgba(10, 132, 255, 0.06);
}

html.dark .solution-card.business-featured .card-title {
  color: rgba(10, 132, 255, 0.9);
}

html.dark .solution-card.business-featured .card-subtitle {
  color: rgba(10, 132, 255, 0.7);
}

/* ==========================================================================
   老师卡片
   ========================================================================== */
html.dark .solution-card.professional-featured {
  background: rgba(180, 239, 78, 0.05);
  border-color: rgba(180, 239, 78, 0.2);
  box-shadow: 0 8px 32px rgba(180, 239, 78, 0.06);
}

html.dark .solution-card.professional-featured .card-title {
  color: rgba(180, 239, 78, 0.9);
}

html.dark .solution-card.professional-featured .card-subtitle {
  color: rgba(180, 239, 78, 0.7);
}

html.dark .professional-benefits {
  border-top-color: rgba(180, 239, 78, 0.12);
}

html.dark .benefit-text {
  color: rgba(180, 239, 78, 0.8);
}

html.dark .benefit-item:hover {
  background: rgba(180, 239, 78, 0.05);
}

/* ==========================================================================
   客户卡片
   ========================================================================== */
html.dark .solution-card.client-featured {
  background: rgba(10, 132, 255, 0.05);
  border-color: rgba(10, 132, 255, 0.15);
  box-shadow: 0 6px 24px rgba(10, 132, 255, 0.06);
}

html.dark .solution-card.client-featured .card-title {
  color: rgba(10, 132, 255, 0.9);
}

html.dark .solution-card.client-featured .card-subtitle {
  color: rgba(10, 132, 255, 0.7);
}

/* ==========================================================================
   卡片文字
   ========================================================================== */
html.dark .card-title {
  color: rgba(255, 255, 255, 0.9);
}

html.dark .card-subtitle {
  color: rgba(255, 255, 255, 0.55);
}

html.dark .card-description {
  color: rgba(255, 255, 255, 0.7);
}

html.dark .card-description-cn {
  color: rgba(255, 255, 255, 0.5);
}

html.dark .card-link {
  color: #0A84FF;
}

html.dark .card-link:hover {
  color: #B4EF4E;
}

/* ==========================================================================
   服务箭头
   ========================================================================== */
html.dark .arrow-text {
  text-shadow: none;
}

/* ==========================================================================
   Safety Features
   ========================================================================== */
html.dark .safety-feature {
  background: #1C1C1E;
  border-color: rgba(10, 132, 255, 0.12);
}

html.dark .safety-feature:hover {
  border-color: rgba(10, 132, 255, 0.25);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

html.dark .feature-icon {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

html.dark .feature-text h4 {
  color: rgba(255, 255, 255, 0.9);
}

html.dark .feature-text p {
  color: rgba(255, 255, 255, 0.55);
}

/* ==========================================================================
   How It Works — Steps Flow
   ========================================================================== */
html.dark .step-item .step-number {
  background: rgba(180, 239, 78, 0.08);
}

html.dark .step-item .step-title {
  color: rgba(255, 255, 255, 0.9);
}

html.dark .step-item .step-subtitle {
  color: rgba(255, 255, 255, 0.4);
}

html.dark .step-item .step-desc {
  color: rgba(255, 255, 255, 0.55);
}

/* ==========================================================================
   CTA Banner
   ========================================================================== */
html.dark .cta-banner {
  background: linear-gradient(135deg, #0d1117 0%, #1C1C1E 100%) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

html.dark .cta-title {
  color: rgba(255, 255, 255, 0.92);
}

html.dark .cta-subtitle {
  color: rgba(255, 255, 255, 0.5);
}

/* ==========================================================================
   Business Support Note
   ========================================================================== */
html.dark .note-content {
  background: rgba(28, 28, 30, 0.9) !important;
  border-color: rgba(10, 132, 255, 0.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

html.dark .note-text {
  color: rgba(255, 255, 255, 0.55);
}

/* ==========================================================================
   Section Badge
   ========================================================================== */
html.dark .section-badge {
  box-shadow: 0 4px 12px rgba(180, 239, 78, 0.15);
}

/* ==========================================================================
   Footer
   ========================================================================== */
html.dark footer {
  background: linear-gradient(135deg, #0d1117 0%, #111318 100%);
}

html.dark footer::before {
  opacity: 0.5;
}

html.dark footer p {
  color: rgba(255, 255, 255, 0.45);
}

/* ==========================================================================
   App Guide Modal
   ========================================================================== */
html.dark .app-guide-overlay {
  background: rgba(0, 0, 0, 0.85);
}

html.dark .app-guide-modal {
  background: linear-gradient(135deg, #1C1C1E 0%, #141A14 100%);
  border-color: rgba(180, 239, 78, 0.1);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

html.dark .app-guide-header {
  background: linear-gradient(135deg, rgba(28, 28, 30, 0.85) 0%, rgba(20, 26, 20, 0.65) 100%);
  border-bottom-color: rgba(180, 239, 78, 0.08);
}

html.dark .app-guide-title {
  color: rgba(255, 255, 255, 0.9);
}

html.dark .app-guide-close {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(180, 239, 78, 0.1);
  color: rgba(255, 255, 255, 0.55);
}

html.dark .app-guide-tab {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(10, 132, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
}

html.dark .app-guide-tab[aria-selected="true"] {
  background: linear-gradient(135deg, rgba(10, 132, 255, 0.1) 0%, rgba(180, 239, 78, 0.12) 100%);
}

html.dark .app-guide-card {
  background: linear-gradient(135deg, rgba(180, 239, 78, 0.05) 0%, rgba(20, 26, 20, 0.12) 100%);
  border-color: rgba(180, 239, 78, 0.1);
}

html.dark .app-guide-qr {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(10, 132, 255, 0.08);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
}

html.dark .app-guide-copy h4 {
  color: rgba(255, 255, 255, 0.9);
}

html.dark .app-guide-copy p {
  color: rgba(255, 255, 255, 0.55);
}

html.dark .app-guide-list,
html.dark .app-guide-list li {
  color: rgba(255, 255, 255, 0.75);
}

html.dark .app-guide-subtle {
  color: rgba(255, 255, 255, 0.38);
}

/* ==========================================================================
   Sub-page: About
   ========================================================================== */
html.dark .about-section {
  background: #111111;
}

html.dark .about-text .section-title {
  color: rgba(255, 255, 255, 0.9);
}

html.dark .about-text p {
  color: rgba(255, 255, 255, 0.6);
}

html.dark .mission-card,
html.dark .value-card,
html.dark .team-card {
  background: #1C1C1E;
  border-color: rgba(180, 239, 78, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

html.dark .mission-card h3,
html.dark .value-card h3,
html.dark .team-card h3 {
  color: rgba(255, 255, 255, 0.9);
}

html.dark .mission-card p,
html.dark .value-card p,
html.dark .team-card p {
  color: rgba(255, 255, 255, 0.55);
}

/* ==========================================================================
   Sub-page: Announcements
   ========================================================================== */
html.dark .announcement-card {
  background: #1C1C1E;
  border-color: rgba(180, 239, 78, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

html.dark .announcement-title {
  color: rgba(255, 255, 255, 0.9);
}

html.dark .announcement-date {
  color: rgba(255, 255, 255, 0.4);
}

html.dark .announcement-excerpt {
  color: rgba(255, 255, 255, 0.6);
}

html.dark .announcement-detail {
  background: #1C1C1E;
}

html.dark .announcement-detail h2 {
  color: rgba(255, 255, 255, 0.9);
}

html.dark .announcement-detail p {
  color: rgba(255, 255, 255, 0.65);
}

/* ==========================================================================
   Sub-page: Contact Us
   ========================================================================== */
html.dark .contact-info-card,
html.dark .contact-form-card {
  background: #1C1C1E;
  border-color: rgba(180, 239, 78, 0.1);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

html.dark .contact-info-card h3,
html.dark .contact-form-card h3 {
  color: rgba(255, 255, 255, 0.9);
}

html.dark .contact-info-item {
  color: rgba(255, 255, 255, 0.7);
}

html.dark .contact-info-label {
  color: rgba(255, 255, 255, 0.5);
}

html.dark .form-group label {
  color: rgba(255, 255, 255, 0.75);
}

html.dark .form-group input,
html.dark .form-group textarea,
html.dark .form-group select {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
}

html.dark .form-group input:focus,
html.dark .form-group textarea:focus {
  border-color: rgba(180, 239, 78, 0.4);
  background: rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   Sub-page: Merchant Onboarding
   ========================================================================== */
html.dark .flow-section {
  background: #111111;
}

html.dark .flow-title {
  color: rgba(255, 255, 255, 0.9);
}

html.dark .flow-subtitle {
  color: rgba(255, 255, 255, 0.5);
}

html.dark .step-card .step-label {
  color: rgba(255, 255, 255, 0.85);
}

html.dark .step-card .step-desc {
  color: rgba(255, 255, 255, 0.5);
}

html.dark .step-screen {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
}

html.dark .flow-footer {
  color: rgba(255, 255, 255, 0.38);
}

/* ==========================================================================
   Feedback Modal
   ========================================================================== */
html.dark .feedback-modal-content {
  background: #1C1C1E;
  border-color: rgba(180, 239, 78, 0.1);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

html.dark .feedback-modal-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

html.dark .feedback-modal-header h3 {
  color: rgba(255, 255, 255, 0.9);
}

html.dark .feedback-close {
  color: rgba(255, 255, 255, 0.5);
}

html.dark .feedback-details p {
  color: rgba(255, 255, 255, 0.7);
}

html.dark .feedback-details p strong {
  color: #0A84FF;
}

html.dark .feedback-tips {
  background: linear-gradient(135deg, rgba(10, 132, 255, 0.06) 0%, rgba(28, 28, 30, 0.5) 100%);
  border-color: rgba(10, 132, 255, 0.12);
}

html.dark .feedback-tips p {
  color: #0A84FF;
}

html.dark .feedback-tips ul {
  color: rgba(255, 255, 255, 0.7);
}

html.dark .feedback-tips li {
  color: rgba(255, 255, 255, 0.65);
}

/* ==========================================================================
   Buttons (preserve brand colors, adjust shadows)
   ========================================================================== */
html.dark .btn-primary {
  box-shadow: 0 4px 15px rgba(180, 239, 78, 0.2);
}

html.dark .btn-secondary {
  box-shadow: 0 4px 15px rgba(10, 132, 255, 0.2);
}

/* ==========================================================================
   Announcement detail page
   ========================================================================== */
html.dark .announce-detail-page {
  background: #111111;
}

html.dark .announce-detail-page .announce-title {
  color: rgba(255, 255, 255, 0.9);
}

html.dark .announce-detail-page .announce-date {
  color: rgba(255, 255, 255, 0.4);
}

html.dark .announce-detail-page .announce-body {
  color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   通用：onboarding steps 横向滚动条
   ========================================================================== */
html.dark .flow-steps-wrapper::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
}

html.dark .flow-steps-wrapper {
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

/* ==========================================================================
   ABOUT PAGE — 补全覆盖
   ========================================================================== */

/* Body override */
html.dark body {
  background: #111111 !important;
  color: rgba(255, 255, 255, 0.9);
}

/* Section backgrounds */
html.dark .about-section,
html.dark .values-section,
html.dark .wechat-section,
html.dark .vision-section {
  background: #111111 !important;
}

html.dark .about-section {
  background: #111111 !important;
}

/* Section headers */
html.dark .about-text .section-title,
html.dark .section-header .section-title {
  color: rgba(255, 255, 255, 0.9) !important;
}

html.dark .about-text .section-subtitle,
html.dark .section-header .section-subtitle {
  color: rgba(255, 255, 255, 0.55) !important;
}

/* Mission */
html.dark .mission-highlight {
  background: rgba(180, 239, 78, 0.06);
  border-color: rgba(180, 239, 78, 0.15);
}

html.dark .mission-title {
  color: rgba(255, 255, 255, 0.9);
}

html.dark .mission-item {
  background: #1C1C1E;
  border-color: rgba(180, 239, 78, 0.1);
}

html.dark .mission-item:hover {
  border-color: rgba(180, 239, 78, 0.25);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

html.dark .mission-item-title {
  color: rgba(255, 255, 255, 0.9);
}

html.dark .mission-item-desc {
  color: rgba(255, 255, 255, 0.55);
}

/* Vision */
html.dark .vision-card {
  background: linear-gradient(135deg, #1C1C1E 0%, #243024 100%);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

html.dark .feature-item {
  background: #1C1C1E;
  border-color: rgba(180, 239, 78, 0.08);
}

html.dark .feature-item:hover {
  border-color: rgba(180, 239, 78, 0.2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

html.dark .feature-title {
  color: rgba(255, 255, 255, 0.9);
}

html.dark .feature-desc {
  color: rgba(255, 255, 255, 0.55);
}

/* Values */
html.dark .value-card {
  background: #1C1C1E;
  border-color: rgba(180, 239, 78, 0.08);
}

html.dark .value-card:hover {
  border-color: rgba(180, 239, 78, 0.25);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

html.dark .value-title {
  color: rgba(255, 255, 255, 0.9);
}

html.dark .value-subtitle {
  color: rgba(255, 255, 255, 0.5);
}

html.dark .value-description {
  color: rgba(255, 255, 255, 0.55);
}

/* WeChat QR */
html.dark .wechat-content h2 {
  color: rgba(255, 255, 255, 0.9);
}

html.dark .wechat-content p {
  color: rgba(255, 255, 255, 0.55);
}

html.dark .qr-container {
  background: #1C1C1E;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   CONTACT US PAGE — 补全覆盖
   ========================================================================== */

/* Section background */
html.dark .contact-section,
html.dark .faq-section {
  background: #111111 !important;
}

/* Contact info card */
html.dark .contact-info {
  background: #1C1C1E;
  border-color: rgba(180, 239, 78, 0.1);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

html.dark .contact-info:hover {
  border-color: rgba(180, 239, 78, 0.2);
}

/* Section titles */
html.dark .section-title {
  color: rgba(255, 255, 255, 0.9) !important;
}

html.dark .section-subtitle {
  color: rgba(255, 255, 255, 0.55) !important;
}

html.dark .contact-description {
  color: rgba(255, 255, 255, 0.6);
}

/* Contact methods */
html.dark .contact-method {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(180, 239, 78, 0.06);
}

html.dark .contact-method:hover {
  border-color: rgba(180, 239, 78, 0.2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

html.dark .method-title {
  color: rgba(255, 255, 255, 0.9);
}

html.dark .method-subtitle,
html.dark .method-text {
  color: rgba(255, 255, 255, 0.55);
}

html.dark .method-link {
  color: #B4EF4E;
}

/* Contact form container */
html.dark .contact-form-container {
  background: #1C1C1E;
  border-color: rgba(10, 132, 255, 0.1);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

html.dark .contact-form-container:hover {
  border-color: rgba(10, 132, 255, 0.2);
}

html.dark .form-title {
  color: rgba(255, 255, 255, 0.9);
}

html.dark .form-subtitle {
  color: rgba(255, 255, 255, 0.55);
}

html.dark .suggestion-text {
  color: rgba(255, 255, 255, 0.6);
}

html.dark .qr-label {
  color: rgba(255, 255, 255, 0.5);
}

/* Form inputs */
html.dark .form-group label {
  color: rgba(255, 255, 255, 0.75);
}

html.dark .form-group input,
html.dark .form-group textarea {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

html.dark .form-group input:focus,
html.dark .form-group textarea:focus {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(180, 239, 78, 0.4) !important;
  box-shadow: 0 0 0 4px rgba(180, 239, 78, 0.08) !important;
}

/* FAQ */
html.dark .faq-container h2 {
  color: rgba(255, 255, 255, 0.9);
}

html.dark .faq-item {
  background: #1C1C1E;
  border-color: rgba(180, 239, 78, 0.06);
}

html.dark .faq-item:hover {
  border-color: rgba(180, 239, 78, 0.2);
}

html.dark .faq-question {
  color: rgba(255, 255, 255, 0.85);
  background: transparent;
}

html.dark .faq-question:hover {
  background: rgba(180, 239, 78, 0.06);
}

html.dark .faq-answer {
  color: rgba(255, 255, 255, 0.6);
}

html.dark .faq-action {
  background: linear-gradient(135deg, rgba(10, 132, 255, 0.1) 0%, rgba(28, 28, 30, 0.5) 100%);
  border-color: rgba(10, 132, 255, 0.2);
  color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Refund policy card */
html.dark .refund-policy-card {
  background: rgba(28, 28, 30, 0.9);
  border-color: rgba(180, 239, 78, 0.1);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
}

html.dark .refund-policy-note {
  color: rgba(255, 255, 255, 0.75);
}

html.dark .refund-policy-table {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(10, 132, 255, 0.1);
}

html.dark .refund-policy-cell {
  color: rgba(255, 255, 255, 0.8);
}

html.dark .refund-policy-list,
html.dark .refund-policy-list li {
  color: rgba(255, 255, 255, 0.7);
}

html.dark .refund-policy-link {
  color: #0A84FF;
}