/* ========================================
   米咖MV 暗黑皮肤 · 品牌绿（方案B 剪映风）
   仅在 <html data-theme="dark"> 时生效（由 /m/js/theme.js 控制）
   默认不加载任何变化，www 正式站零影响
   ======================================== */

html[data-theme="dark"] {
  --brand: #34D399;
  --brand-2: #10b981;
  --brand-3: #059669;
  --brand-ink: #04120c;            /* 绿底上的深色文字 */
  --brand-grad: linear-gradient(135deg, #34D399, #10b981 55%, #059669);
  --brand-soft: rgba(52, 211, 153, 0.12);
  --brand-border: rgba(52, 211, 153, 0.5);
  --brand-glow: 0 6px 20px rgba(16, 185, 129, 0.35), 0 0 24px rgba(52, 211, 153, 0.18);
}

/* 页面氛围光（很淡，不喧宾夺主） */
html[data-theme="dark"] body {
  background:
    radial-gradient(600px 300px at 15% -5%, rgba(52, 211, 153, 0.06), transparent 60%),
    radial-gradient(500px 260px at 95% 110%, rgba(16, 185, 129, 0.05), transparent 60%),
    #000;
  background-attachment: fixed;
}
html[data-theme="dark"] .m-page { background: transparent; }

/* ===== 主按钮：白底黑字 → 品牌绿渐变 + 发光 ===== */
html[data-theme="dark"] .m-btn-primary {
  background: var(--brand-grad);
  color: var(--brand-ink);
  box-shadow: var(--brand-glow);
}

/* ===== 底部导航 ===== */
html[data-theme="dark"] .m-tab-item.active { color: var(--brand); }
html[data-theme="dark"] .m-tab-item.active .m-tab-icon svg,
html[data-theme="dark"] .m-tab-item.active .m-icon svg {
  filter: drop-shadow(0 0 6px rgba(52, 211, 153, 0.55));
}

/* 中间创作按钮：白圆 → 绿渐变发光 */
html[data-theme="dark"] .m-tab-create {
  background: var(--brand-grad);
  color: var(--brand-ink);
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.45), 0 0 24px rgba(52, 211, 153, 0.25);
}

/* ===== 各类"白底黑字"反色选中态 → 品牌绿 ===== */
html[data-theme="dark"] .m-tag.active,
html[data-theme="dark"] .home-category.active,
html[data-theme="dark"] .type-tab.active,
html[data-theme="dark"] .cat-tab.active,
html[data-theme="dark"] .category-tab.active {
  background: var(--brand-grad);
  color: var(--brand-ink);
  border-color: transparent;
  font-weight: 600;
}

/* ===== 进度条 / 加载圈 ===== */
html[data-theme="dark"] .m-progress-bar {
  background: linear-gradient(90deg, var(--brand-2), var(--brand));
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.6);
}
html[data-theme="dark"] .m-loading-spinner {
  border-color: rgba(52, 211, 153, 0.2);
  border-top-color: var(--brand);
}

/* ===== 徽章 ===== */
html[data-theme="dark"] .m-badge {
  background: var(--brand);
  color: var(--brand-ink);
}

/* ===== 输入框聚焦 ===== */
html[data-theme="dark"] .m-input:focus,
html[data-theme="dark"] .m-textarea:focus {
  border-color: var(--brand-border);
}

/* ===== 首页专属 ===== */
html[data-theme="dark"] .home-banner-cta {
  background: var(--brand-grad);
  color: var(--brand-ink);
}
html[data-theme="dark"] .home-banner-dot.active { background: var(--brand); }

/* 首页顶部"自由组合"紫渐变按钮 → 品牌绿 */
html[data-theme="dark"] .compose-btn {
  background: var(--brand-grad);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}

/* 首页"自由组合"绿色卡片保持绿色系（原 #10b981→#059669 与设计稿一致） */

/* ===== 通用强调色：价格 / 链接 / 高亮文字 ===== */
html[data-theme="dark"] .price,
html[data-theme="dark"] .amount,
html[data-theme="dark"] .highlight {
  color: var(--brand);
}

/* ===== 开关控件（iOS 风 switch）选中态 ===== */
html[data-theme="dark"] .switch.on,
html[data-theme="dark"] .m-switch.on {
  background: var(--brand-grad);
  box-shadow: 0 0 12px rgba(52, 211, 153, 0.4);
}

/* ===== Toast 描边微光 ===== */
html[data-theme="dark"] .m-toast {
  border-color: rgba(52, 211, 153, 0.25);
}