/* ============================================================================
   小羔音 · 网页端视觉体系  xiaogaoyin-web-theme.css
   ----------------------------------------------------------------------------
   来源（全部为实测源值，非自创）：
     · miniprogram/app.wxss                                    深色主体系（mesh + 暖金按钮）
     · miniprogram/pages/theory-library/detail/detail.wxss      纸谱浅色（#F5F3ED + 朱红 #B03A2E）
     · miniprogram/pages/membership/membership.wxss             会员浅色（#f6f7fb + 靛蓝 #5b6cff）
     · miniprogram/components/trinity-layout/trinity-layout.wxss 玉石渐变图标规范 + 纪念碑谷质感
     · miniprogram/assets/styles/icons.wxss                     图标库（base64 无损解码 → ji-icons.js）

   单位换算：小程序 750rpx = 375px 屏宽 → 1rpx = 0.5px。本文件 px 值即按此换算。
   主题切换：在 <html> 或任意容器上设 data-theme="night|paper|mist"。
   混搭：小程序本身就是「深色 mesh 底 + 浮一张浅色纸卡」，故主题可嵌套混用。
   ============================================================================ */

/* ---------------------------------------------------------------- 图标基类 */
.ji { display: inline-flex; flex: none; line-height: 0; vertical-align: middle; }
.ji svg { width: 100%; height: 100%; display: block; }
.ji-missing { width: 1em; height: 1em; background: currentColor; opacity: .3; border-radius: 2px; }

/* ============================================================================
   1. 深色主体系 · NIGHT —— 小程序 app.wxss page 级
   ========================================================================= */
[data-theme="night"] {
  --n-0: #0d1122;                    /* 夜空顶 */
  --n-1: #151a30;                    /* 夜空中 */
  --n-2: #1c1630;                    /* 夜空底 */
  --mesh-purple: rgba(150, 86, 168, .52);
  --mesh-teal:   rgba(58, 150, 152, .44);
  --mesh-blue:   rgba(74, 128, 214, .46);
  --mesh-rose:   rgba(176, 84, 132, .40);
  --mesh-indigo: rgba(96, 120, 190, .26);

  --surface:      #1C2238;           /* 实色卡片 */
  --surface-2:    #232a42;
  --border:       rgba(255, 255, 255, .10);
  --border-strong:rgba(255, 255, 255, .18);

  --accent:       #D9A85C;           /* 暖金 · 主按钮（小程序反 AI 化后定的主色） */
  --accent-ink:   #1A1B20;           /* 暖金上的深墨字 */
  --primary:      #6B4FA0;           /* 紫 · 品牌色，小程序原 --primary */
  --success:      #4CAF50;
  --warning:      #FF9800;
  --error:        #f44336;

  --text:         #ffffff;
  --text-muted:   #b0b0c0;
  --text-faint:   rgba(255, 255, 255, .38);

  --radius-card: 8px;                /* 16rpx */
  --radius-field: 8px;               /* 16rpx */
  --radius-pill: 22px;               /* 44rpx · 按钮胶囊 */
  --radius-chip: 11px;               /* 22rpx */

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;

  color: var(--text);
  background-color: var(--n-1);
  /* 全局 mesh 底色：5 层柔光 + 夜空线性底（静态，小程序 2026-10-19 移除动画的原因：
     长页 + background-position 动画会把整页提为合成层，超出纹理上限后分块，
     动画期间部分块不重绘 → 白带与错位色条。网页端同理，勿加动画。） */
  background-image:
    radial-gradient(circle at 20% 25%, var(--mesh-purple) 0%, rgba(150, 86, 168, 0) 55%),
    radial-gradient(circle at 82% 16%, var(--mesh-teal)   0%, rgba(58, 150, 152, 0) 52%),
    radial-gradient(circle at 76% 66%, var(--mesh-blue)   0%, rgba(74, 128, 214, 0) 55%),
    radial-gradient(circle at 26% 80%, var(--mesh-rose)   0%, rgba(176, 84, 132, 0) 58%),
    radial-gradient(circle at 52% 46%, var(--mesh-indigo) 0%, rgba(96, 120, 190, 0) 62%),
    linear-gradient(180deg, var(--n-0) 0%, var(--n-1) 46%, var(--n-2) 100%);
  background-attachment: fixed;
  font-family: var(--font);
}

/* ============================================================================
   2. 纸谱浅色 · PAPER —— 小程序 theory-library/detail.wxss
      全 app 唯一使用浅色的页面：深底浮一张浅色乐谱纸
   ========================================================================= */
[data-theme="paper"] {
  --paper:        #F5F3ED;           /* 暖纸白 */
  --paper-line:   rgba(26, 27, 32, .14);
  --paper-line-2: rgba(26, 27, 32, .12);
  --ink:          #1A1B20;           /* 墨色标题 */
  --ink-body:     #2A2B31;           /* 正文墨 */
  --vermilion:    #B03A2E;           /* 朱红 · 批注线/重点，小程序的纸面签名色 */

  --surface:      #F5F3ED;
  --surface-2:    #EFEDE5;
  --border:       rgba(26, 27, 32, .14);
  --border-strong:rgba(26, 27, 32, .28);

  --accent:       #B03A2E;           /* 朱红 */
  --accent-ink:   #F5F3ED;
  --primary:      #6B4FA0;
  --success:      #4CAF50;
  --warning:      #FF9800;
  --error:        #f44336;

  --text:         #1A1B20;
  --text-muted:   #6b6a64;
  --text-faint:   rgba(26, 27, 32, .38);

  --radius-card: 12px;               /* 24rpx · 纸卡 */
  --radius-field: 8px;
  --radius-pill: 22px;
  --radius-chip: 11px;

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;

  color: var(--text);
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 18% 12%, rgba(176, 58, 46, .05) 0%, rgba(176, 58, 46, 0) 42%),
    radial-gradient(circle at 86% 84%, rgba(107, 79, 160, .05) 0%, rgba(107, 79, 160, 0) 46%);
  font-family: var(--font);
}

/* ============================================================================
   3. 会员浅色 · MIST —— 小程序 membership.wxss
   ========================================================================= */
[data-theme="mist"] {
  --mist:         #f6f7fb;
  --mist-card:    #ffffff;
  --mist-field:   #f4f5fa;
  --mist-line:    #eef0f7;
  --mist-sel:     #f8f9ff;
  --indigo:       #5b6cff;           /* 会员页主色 */
  --indigo-soft:  #eef1ff;
  --indigo-fade:  #c3c9f5;
  --amber-bg:     #fff7e6;
  --amber-line:   #ffe1a8;
  --amber-ink:    #996a00;
  --tag-red:      #ff5b5b;

  --surface:      #ffffff;
  --surface-2:    #f4f5fa;
  --border:       #eef0f7;
  --border-strong:#d9dcec;

  --accent:       #5b6cff;
  --accent-ink:   #ffffff;
  --primary:      #5b6cff;
  --success:      #4CAF50;
  --warning:      #FF9800;
  --error:        #ff5b5b;

  --text:         #222222;
  --text-muted:   #999999;
  --text-faint:   #bbbbbb;

  --radius-card: 12px;               /* 24rpx */
  --radius-field: 7px;               /* 14rpx */
  --radius-pill: 22px;
  --radius-chip: 9px;                /* 18rpx */

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;

  color: var(--text);
  background-color: var(--mist);
  font-family: var(--font);
}

/* ============================================================================
   4. 组件（三主题共用 · 全部走变量）
   ========================================================================= */

/* —— 卡片 —— */
.xg-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 12px;                     /* 24rpx */
}
/* 纸谱卡：纸浮在深色底上，实色卡片唯一的阴影来源（小程序原样） */
[data-theme="paper"] .xg-card,
.xg-card--paper {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .38);
}

/* —— 主按钮：暖金底 + 深墨字（night）/ 朱红（paper）/ 靛蓝（mist）—— */
.xg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px;                   /* 88rpx */
  padding: 0 22px;                    /* 44rpx */
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 16px;                    /* 32rpx */
  font-weight: 600;
  font-family: var(--font);
  border: none; border-radius: var(--radius-pill);
  cursor: pointer;
  transition: opacity .2s;
  white-space: nowrap;
}
.xg-btn:hover  { opacity: .92; }
.xg-btn:active { opacity: .85; }
.xg-btn[disabled] { opacity: .45; cursor: not-allowed; }
.xg-btn--block { width: 100%; }
.xg-btn--ghost {
  background: transparent; color: var(--accent);
  border: 1px solid var(--border-strong);
}
.xg-btn--sm { min-height: 32px; font-size: 13px; padding: 0 16px; }

/* —— 输入框 —— */
.xg-input {
  width: 100%; min-height: 44px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-field);
  padding: 0 12px;                    /* 24rpx */
  color: var(--text);
  font-size: 15px;                    /* 28rpx */
  font-family: var(--font);
  outline: none;
}
.xg-input::placeholder { color: var(--text-muted); }
.xg-input:focus { border-color: var(--accent); }

/* —— 标签 / 徽章 —— */
.xg-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; line-height: 1;
  padding: 5px 10px;
  border-radius: var(--radius-chip);
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.xg-tag--accent { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.xg-tag--ok  { color: var(--success); }
.xg-tag--warn{ color: var(--warning); }
.xg-tag--err { color: var(--error); }

/* 会员页提示条（浅琥珀） */
.xg-notice {
  font-size: 13px; line-height: 1.8;
  color: var(--amber-ink, #996a00);
  background: var(--amber-bg, #fff7e6);
  border: 1px solid var(--amber-line, #ffe1a8);
  border-radius: var(--radius-field);
  padding: 10px 16px;
}

/* —— 朱红批注线：纸谱页的签名元素 —— */
.xg-rule {
  width: 36px; height: 3px; border-radius: 2px;
  background: var(--accent);
}
[data-theme="paper"] .xg-rule,
.xg-rule--vermilion { background: var(--vermilion, #B03A2E); }

/* —— 列表行（键值对齐，小程序 row 风格）—— */
.xg-row {
  display: flex; align-items: center; gap: 12px;
  font-size: 14px; color: var(--text);
  padding: 10px 0;
}
.xg-row + .xg-row { border-top: 1px solid var(--border); }
.xg-row .k { color: var(--text-muted); flex: none; width: 88px; font-size: 13px; }
.xg-row .v { flex: 1; }

/* —— 页面标题 —— */
.xg-title { font-size: 22px; font-weight: 700; color: var(--text); letter-spacing: .5px; line-height: 1.35; }
.xg-sub   { font-size: 13px; color: var(--text-muted); line-height: 1.6; }

/* —— 图标常用尺寸 —— */
.ji-14 { width: 14px; height: 14px; }
.ji-16 { width: 16px; height: 16px; }
.ji-20 { width: 20px; height: 20px; }
.ji-24 { width: 24px; height: 24px; }
.ji-28 { width: 28px; height: 28px; }
.ji-32 { width: 32px; height: 32px; }
.ji-40 { width: 40px; height: 40px; }
.ji-48 { width: 48px; height: 48px; }
.ji-64 { width: 64px; height: 64px; }
.ji-74 { width: 74px; height: 74px; }   /* trinity 图标显示尺寸 148rpx */

/* —— 纪念碑谷式「玉石微光」质感（trinity-layout 原样）——
   明亮向：强白色光圈 + 低饱和淡紫灰轻影，避免深影在淡彩底上发脏 */
.ji-glow {
  filter:
    drop-shadow(0 0 10px rgba(255, 255, 255, .98))
    drop-shadow(0 0 26px rgba(255, 255, 255, .62))
    drop-shadow(0 3px 6px rgba(126, 142, 186, .26))
    drop-shadow(0 9px 18px rgba(132, 148, 192, .2));
  transition: filter .3s ease;
}

/* —— 按压反馈：图标朝使用者方向放大后消散（trinity 原样，1.5s linear 淡出）—— */
.ji-burst { animation: ji-burst-grow 1.5s cubic-bezier(.22, .61, .36, 1) forwards,
                        ji-burst-fade 1.5s linear forwards; }
@keyframes ji-burst-grow { from { transform: scale(1); } to { transform: scale(1.45); } }
@keyframes ji-burst-fade { from { opacity: 1; } to { opacity: 0; } }

/* —— 减少动态效果 —— */
@media (prefers-reduced-motion: reduce) {
  .ji-burst { animation: none; }
}