/* ============================================================
   Skin: haicard (智享家 · AI嗨卡) — 深色主题全站统一
   用法: 由 brand-skid.js 自动加载
   最后更新: 2026-05-18 — 重建
   ============================================================ */

/* ============================================================
   1. CSS 变量 — 深色主题基础色板
   ============================================================ */
:root {
  /* 页面底色 */
  --bg-page:         #0A0E1A;
  --bg-card:         rgba(255,255,255,.04);
  --bg-input:        rgba(255,255,255,.06);
  --bg-hover:        rgba(74,158,255,.08);
  --bg-highlight:    rgba(74,158,255,.06);

  /* 文字色 — 对比度优化（符合WCAG AA） */
  --text-primary:    #E8ECF1;
  --text-secondary:  rgba(232,236,241,.78);
  --text-muted:      rgba(232,236,241,.6);
  --text-placeholder: rgba(232,236,241,.45);
  --text-rgb: 232,236,241;
  --body-text-rgb: 232,236,241;
  --body-bg-rgb: 255,255,255;
  --text-on-primary: #FFFFFF;
  --text-on-topbar:  #FFFFFF;

  /* 品牌色 */
  --color-primary:   #4A9EFF;
  --color-primary-hover: #3A8EEF;
  --color-accent:    #FFB347;
  --color-accent-light: rgba(255,179,71,.08);
  --color-link:      #4A9EFF;

  /* 边框 */
  --border-color:    rgba(255,255,255,.08);
  --border-light:    rgba(255,255,255,.04);

  /* 阴影 */
  --shadow-sm:       0 1px 3px rgba(0,0,0,.2);
  --shadow-md:       0 4px 12px rgba(0,0,0,.3);
  --shadow-lg:       0 8px 30px rgba(0,0,0,.4);

  /* 圆角 */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   18px;

  /* 字号 */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;

  /* 间距 */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;

  /* 渐变 */
  --gradient-primary: linear-gradient(135deg,#4A9EFF,#6C5CE7);
  --gradient-gold:    linear-gradient(135deg,#FFB347,#FF8C00);

  /* 字体 */
  --font-body: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* ============================================================
   2. 全局基础覆盖
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  background: var(--bg-page) !important;
  color: var(--text-primary) !important;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

a { color: var(--color-link); text-decoration: none; }
a:hover { color: var(--color-primary-hover); }
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-thumb { background: rgba(74,158,255,.15); border-radius: 2px; }
::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   3. ai-card (制卡页)
   ============================================================ */
.status-bar .sb-text { color: var(--text-secondary) !important; }
.status-bar .sb-days { color: var(--text-muted) !important; }
.points-bar .pb-text { color: var(--text-secondary) !important; }
.step-item { color: var(--text-secondary) !important; }
.form-group label { color: var(--text-secondary) !important; }
.form-group input, .form-group textarea {
  background: var(--bg-input) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
.form-group input::placeholder, .form-group textarea::placeholder {
  color: var(--text-placeholder) !important;
}
.preview-box .p-label { color: var(--text-secondary) !important; }
.preview-box .poem { color: var(--color-accent) !important; }
.preview-box .blessing { color: var(--text-secondary) !important; }
.preview-box .lucky-score-label { color: var(--text-secondary) !important; }
.collapsible { border-color: var(--border-light) !important; }
.collapsible .c-header .c-label { color: var(--text-primary) !important; }
.collapsible .c-header .c-sub { color: var(--text-muted) !important; }
.collapsible .c-header .c-arrow { color: var(--text-secondary) !important; }
.collapsible .c-header .c-extra { color: var(--text-secondary) !important; }
.quality-toggle .qt-option { color: var(--text-secondary) !important; }
.quality-toggle .qt-option.active {
  background: var(--bg-hover) !important;
  color: var(--color-accent) !important;
}
.music-library .ml-tabs span { color: var(--text-muted) !important; }
.music-library .ml-tabs span.active {
  color: var(--color-accent) !important;
}
.buy-section .bs-header p { color: var(--text-muted) !important; }
.card-plan { background: var(--bg-card) !important; border-color: var(--border-light) !important; }
.card-plan .cp-desc { color: var(--text-secondary) !important; }
.card-plan .cp-features { color: var(--text-secondary) !important; }
.profile-overlay { background: var(--bg-page) !important; }
.pf-card { background: var(--bg-card) !important; border-color: var(--border-light) !important; }
.pf-card .pfc-label { color: var(--text-muted) !important; }
.pf-card .pfc-sub { color: var(--text-secondary) !important; }
.pf-card .pf-tab { color: var(--text-secondary) !important; }
.pfc-value { color: var(--text-primary) !important; }
.profile-card .pc-bio { color: var(--text-secondary) !important; }
.pc-badge { background: var(--bg-card) !important; color: var(--text-secondary) !important; border-color: var(--border-color) !important; }
.pc-progress-label { color: var(--text-secondary) !important; }
.pcs-label { color: var(--text-secondary) !important; }
.ws-section-title { color: var(--text-secondary) !important; border-top-color: var(--border-light) !important; }
.ws-section-title-b { color: var(--text-secondary) !important; }
.task-item .ti-desc, .task-item .ti-reward { color: var(--text-secondary) !important; }
.activity-item .ai-desc { color: var(--text-secondary) !important; }
.nav-row .nr-link .nr-icon { color: var(--text-secondary) !important; }

/* ============================================================
   4. workspace (工作台)
   ============================================================ */
.stat-item .label { color: var(--text-secondary) !important; }
.stat-item .value { color: var(--text-primary) !important; }
.ws-lb-rank { color: var(--text-muted) !important; }
.ws-lb-meta { color: var(--text-secondary) !important; }
.ws-lb-name { color: var(--text-primary) !important; }
.ws-ref-empty { color: var(--text-muted) !important; }
.bsc-label { color: var(--text-muted) !important; }
.bill-filter .bf-btn { color: var(--text-secondary) !important; }
.bill-item .bi-note { color: var(--text-muted) !important; }
.bill-item .bi-amount { color: var(--text-primary) !important; }

/* 充值 */
.rp-pkg { background: var(--bg-card) !important; border-color: var(--border-light) !important; }
.rp-pkg .pkg-name { color: var(--text-primary) !important; }
.rp-pkg .pkg-points { color: var(--text-secondary) !important; }
.rp-tip { color: var(--text-muted) !important; }
.rp-modal-inner .rm-info { color: var(--text-secondary) !important; }
.rp-modal-inner .rm-btns .rm-cancel {
  background: var(--bg-input) !important;
  color: var(--text-secondary) !important;
}

/* AI作曲 */
.cs-step { color: var(--text-secondary) !important; }
.cs-step .cs-num {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
}
.cs-mode-btn {
  background: var(--bg-card) !important;
  color: var(--text-secondary) !important;
}
.style-card { background: var(--bg-card) !important; border-color: var(--border-color) !important; }
.style-card .sc-desc { color: var(--text-secondary) !important; }
.vibe-chip { background: var(--bg-card) !important; border-color: var(--border-color) !important; color: var(--text-secondary) !important; }
.gc-btn { background: var(--bg-card) !important; border-color: var(--border-color) !important; color: var(--text-secondary) !important; }
.music-room .mr-sub { color: var(--text-secondary) !important; }

/* 歌词 */
.lyrics-line { color: var(--text-muted) !important; }
.lyrics-line.active { color: var(--color-accent) !important; font-weight: 700; }
.lyrics-tabs .ltab { background: var(--bg-card) !important; color: var(--text-muted) !important; }

/* 时间戳编辑 */
.tp-hint { background: var(--bg-card) !important; border-color: var(--border-color) !important; color: var(--text-secondary) !important; }
.tp-item .tp-set { background: var(--bg-card) !important; border-color: var(--border-color) !important; color: var(--text-secondary) !important; }
.tp-btn { background: var(--bg-input) !important; border-color: var(--border-color) !important; color: var(--text-secondary) !important; }

/* ============================================================
   5. music-player (音乐播放器)
   ============================================================ */
#mpbSongTitle { color: var(--text-primary) !important; }
#mpbSongMeta { color: var(--text-secondary) !important; }
#mpbStopBtn, #mpbStopBtn * { color: var(--text-muted) !important; }
.player-page { background: var(--bg-page) !important; }
.lyrics-panel { background: var(--bg-page) !important; }

/* ============================================================
   6. music-square (音乐广场)
   ============================================================ */
.sort span { color: var(--text-muted) !important; }
.sort span.active { color: var(--color-accent) !important; }
.fb-tag {
  background: var(--bg-card) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}
.fb-tag.active {
  color: #fff !important;
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  font-weight: 600 !important;
}
.sr-sub { color: var(--text-secondary) !important; }
.song-item .s-meta { color: var(--text-secondary) !important; }
.song-item .s-stats { color: var(--text-muted) !important; }
.song-item .s-name { color: var(--text-primary) !important; }
.song-item .s-fav:not(.faved) { color: var(--text-muted) !important; }
.empty-state { color: var(--text-muted) !important; }
.empty-state .es-icon { color: var(--text-muted) !important; }
.loading { color: var(--text-muted) !important; }
.pagination .pg-btn {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-secondary) !important;
}

/* ============================================================
   7. card (收卡页)
   ============================================================ */
.back .blessing-box .bl { color: var(--text-primary) !important; }
.back .blessing-box .bl-label { color: var(--text-muted) !important; }

/* ============================================================
   8. daily (每日分享)
   ============================================================ */
.daily-card .dc-text { color: var(--text-secondary) !important; }
.fortune-detail { color: var(--text-secondary) !important; }
.checkin-popup .cp-desc { color: var(--text-secondary) !important; }

/* ============================================================
   9. receive (收卡落地页)
   ============================================================ */
.receive-hero .rh-sub { color: var(--text-secondary) !important; }

/* ============================================================
   10. 通用组件
   ============================================================ */
.modal-content { color: var(--text-secondary) !important; }
.comment-item .c-content { color: var(--text-secondary) !important; }
.comment-item .c-time { color: var(--text-muted) !important; }
.ctrl-btn.collapse {
  background: var(--bg-input) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}

/* ============================================================
   11. 音乐评论
   ============================================================ */
.music-comments .mc-input {
  background: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}
.music-comments .mc-item .mc-author { color: var(--text-primary) !important; }
.music-comments .mc-item .mc-text { color: var(--text-secondary) !important; }
.music-comments .mc-item .mc-time { color: var(--text-muted) !important; }

/* ============================================================
   12. card.html (收卡页) — bg-mini-bar 暖色覆盖
   ============================================================ */
.bg-mini-bar {
  background: var(--bg-card) !important;
  border-top-color: var(--border-color) !important;
}
.bm-ov-progress input[type=range] {
  background: var(--bg-input) !important;
}
.bm-ov-progress input[type=range]::-webkit-slider-thumb {
  background: var(--color-primary) !important;
}
.bm-ov-play {
  box-shadow: 0 4px 14px rgba(74,158,255,.25) !important;
}