/* ============================================================
   MeridianOS™ · Material You v3 全站换肤层（se-materialyou.css）
   加载顺序保证在最后：以同优先级后加载覆盖 :root 既有令牌，
   把曜石鎏金映射到 --my-* 动态色板（由 se-materialyou.js 写入）。
   ============================================================ */

/* ---------- 0. 壁纸三色注册为可过渡的颜色型自定义属性（切换柔和渐变） ---------- */
@property --my-wp-1 { syntax: '<color>'; inherits: true; initial-value: #22345E; }
@property --my-wp-2 { syntax: '<color>'; inherits: true; initial-value: #1B4B6E; }
@property --my-wp-3 { syntax: '<color>'; inherits: true; initial-value: #2A2A5E; }
@property --my-primary { syntax: '<color>'; inherits: true; initial-value: #A8C7FA; }

:root {
  /* Material You 几何常量（静态） */
  --my-radius-card: 28px;
  --my-radius-panel: 24px;
  --my-radius-pill: 999px;
  --my-blur: 28px;

  /* --my-* 动态变量静态回退（JS 未运行时的默认：子鼠·暮蓝） */
  --my-primary: #A8C7FA;
  --my-on-primary: #0B1D3A;
  --my-secondary: #B9C8E8;
  --my-tertiary: #D3BCFD;
  --my-primary-container: rgba(168, 199, 250, .14);
  --my-secondary-container: rgba(185, 200, 232, .14);
  --my-surface: rgba(12, 16, 26, .66);
  --my-surface-hi: rgba(16, 21, 34, .82);
  --my-line: rgba(168, 199, 250, .18);
  --my-wp-1: #22345E;
  --my-wp-2: #1B4B6E;
  --my-wp-3: #2A2A5E;

  /* ========================================================
     1. 既有令牌重定义：鎏金阶 → Material You primary 家族
     ======================================================== */
  /* 主金三阶 */
  --sb-gold: var(--my-primary);
  --sb-gold-hi: color-mix(in srgb, var(--my-primary) 55%, white);
  --sb-gold-deep: color-mix(in srgb, var(--my-primary) 62%, black);
  /* 金色九阶映射：亮部混白、深部混黑 */
  --mr-gold-100: color-mix(in srgb, var(--my-primary) 38%, white);
  --mr-gold-200: color-mix(in srgb, var(--my-primary) 62%, white);
  --mr-gold-300: color-mix(in srgb, var(--my-primary) 85%, white);
  --mr-gold-500: var(--my-primary);
  --mr-gold-700: color-mix(in srgb, var(--my-primary) 66%, black);
  --mr-gold-900: color-mix(in srgb, var(--my-primary) 38%, black);
  /* 金色发丝线 / 浸染 / 辉光：primary 各透明度 */
  --mr-gold-line: color-mix(in srgb, var(--my-primary) 38%, transparent);
  --mr-gold-line-soft: color-mix(in srgb, var(--my-primary) 16%, transparent);
  --mr-gold-tint: color-mix(in srgb, var(--my-primary) 8%, transparent);
  --mr-gold-glow: color-mix(in srgb, var(--my-primary) 45%, transparent);
  --sb-line-gold: var(--mr-gold-line);
  --mr-line-dash-gold: color-mix(in srgb, var(--my-primary) 26%, transparent);
  /* 金色渐变：primary → tertiary 的 135deg Material You 签名渐变 */
  --mr-gold-grad: linear-gradient(135deg,
    color-mix(in srgb, var(--my-primary) 45%, white) 0%,
    var(--my-primary) 46%,
    var(--my-tertiary) 100%);
  --mr-gold-grad-text: linear-gradient(135deg, var(--my-primary) 0%, var(--my-tertiary) 100%);
  /* 金色阴影随主色迁移 */
  --sb-shadow-gold:
    0 0 0 1px color-mix(in srgb, var(--my-primary) 30%, transparent),
    0 18px 55px -14px color-mix(in srgb, var(--my-primary) 22%, transparent),
    0 0 42px -6px color-mix(in srgb, var(--my-primary) 18%, transparent);
  /* 玻璃底 → 色板同系深色玻璃 */
  --mr-glass: var(--my-surface);
  --mr-glass-hi: var(--my-surface-hi);

  /* 壁纸三色变化时 1s 柔和过渡（配合 @property 注册实现真正插值） */
  transition: --my-wp-1 1s ease, --my-wp-2 1s ease, --my-wp-3 1s ease, --my-primary 1s ease;
}

/* ============================================================
   2. body 背景：三色大径向极光斑 + 深色基底线性渐变
   ============================================================ */
body {
  background:
    radial-gradient(1150px 560px at 82% -180px, color-mix(in srgb, var(--my-wp-1) 62%, transparent), transparent 62%),
    radial-gradient(940px 660px at -220px 14%, color-mix(in srgb, var(--my-wp-2) 48%, transparent), transparent 60%),
    radial-gradient(860px 600px at 112% 84%, color-mix(in srgb, var(--my-wp-3) 46%, transparent), transparent 62%),
    linear-gradient(168deg, #080B13 0%, #06080E 55%, #04060B 100%) !important;
  transition: background 1s ease;
}

/* ============================================================
   3. 全局几何覆盖（Material You 签名：大圆角 + 毛玻璃）
   ============================================================ */
/* 面板：28px 大圆角 + 色板玻璃 + 主色发丝描边 */
.panel {
  border-radius: var(--my-radius-card) !important;
  background: var(--my-surface) !important;
  border: 1px solid var(--my-line) !important;
  backdrop-filter: blur(var(--my-blur)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--my-blur)) saturate(1.4);
}
/* se-bright 卡片家族：22–24px 圆角 */
.se-card { border-radius: 24px !important; }
.se-x, .se-rows .se-row { border-radius: 22px !important; }
.se-card, .se-x, .se-rows .se-row {
  background: var(--my-surface);
  border-color: var(--my-line);
  backdrop-filter: blur(calc(var(--my-blur) * .6)) saturate(1.3);
  -webkit-backdrop-filter: blur(calc(var(--my-blur) * .6)) saturate(1.3);
}
/* 弹窗：32px 超大圆角 + 高保真毛玻璃 */
.td-dialog {
  border-radius: 32px !important;
  background: var(--my-surface-hi) !important;
  border: 1px solid var(--my-line) !important;
  backdrop-filter: blur(36px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(36px) saturate(1.5) !important;
}
/* Toast：药丸形 */
.se-toast {
  border-radius: var(--my-radius-pill) !important;
  background: var(--my-surface-hi) !important;
  border-color: var(--my-line) !important;
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
}
/* 芯片 / 页签：全药丸 */
.se-chip, .se-tab { border-radius: var(--my-radius-pill) !important; }
.se-chip.g { border-color: var(--mr-gold-line) !important; }
.se-chip.g:hover { background: var(--mr-gold-tint) !important; }

/* 全站按钮圆角不低于 14px（元素选择器低优先级：类级样式如
   药丸/圆形图标钮的 999px/50% 圆角天然胜出，不受影响） */
button, [role="button"],
input[type="button"], input[type="submit"], input[type="reset"] {
  border-radius: 14px;
}

/* 硬编码旧金色 rgba 的高频残留 → 统一归入动态主色 */
.se-bar.g .fill {
  background: linear-gradient(90deg, var(--mr-gold-700), var(--mr-gold-200)) !important;
  box-shadow: 0 0 12px var(--mr-gold-glow) !important;
}
.se-flow .step.on .n { box-shadow: 0 2px 12px color-mix(in srgb, var(--my-primary) 35%, transparent) !important; }

/* 滚动条细化 + 主色浸染 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--my-primary) 26%, transparent);
  border-radius: var(--my-radius-pill);
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--my-primary) 42%, transparent);
  background-clip: padding-box;
}

/* ============================================================
   4. 壁纸药丸坞（.my-wp-dock）
   ============================================================ */
.my-wp-dock {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  padding: 7px 9px;
  border-radius: var(--my-radius-pill);
  background: var(--my-surface);
  border: 1px solid var(--my-line);
  backdrop-filter: blur(var(--my-blur)) saturate(1.4);
  -webkit-backdrop-filter: blur(var(--my-blur)) saturate(1.4);
  box-shadow: 0 8px 28px -10px rgba(0, 0, 0, .55);
}
/* 单个药丸：36px 三色渐变圆点 + 色板名 */
.my-wp-dot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 5px;
  border-radius: var(--my-radius-pill);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  color: var(--sb-ink-2, #C2C8D6);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .08em;
  font-family: inherit;
  transition: transform .25s cubic-bezier(.34, 1.4, .64, 1), background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
/* 三色渐变圆点（颜色由内联 --wp1/2/3 传入） */
.my-wp-dot i {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--wp1) 0%, var(--wp2) 52%, var(--wp3) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 2px 8px rgba(0, 0, 0, .45);
  transition: transform .25s cubic-bezier(.34, 1.4, .64, 1), box-shadow .25s ease;
}
.my-wp-dot:hover {
  transform: translateY(-2px);
  background: var(--mr-gold-tint);
}
.my-wp-dot:hover i { transform: scale(1.12); }
/* 当前选中：2px 主色描边外环（box-shadow 实现，不挤占布局） */
.my-wp-dot.on {
  border-color: var(--my-primary);
  color: var(--my-primary);
}
.my-wp-dot.on i {
  box-shadow:
    0 0 0 2px var(--my-primary),
    0 0 14px color-mix(in srgb, var(--my-primary) 45%, transparent),
    inset 0 0 0 1px rgba(255, 255, 255, .14);
}

/* ============================================================
   5. 尊重 prefers-reduced-motion：关闭过渡与动画
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root { transition: none !important; }
  body { transition: none !important; }
  .my-wp-dot, .my-wp-dot i { transition: none !important; }
  .my-wp-dot:hover { transform: none; }
  .my-wp-dot:hover i { transform: none; }
}

/* ============================================================
   5. 顶栏紧凑坞（data-dock="topbar"）：小圆点 · 无文字 · 不挤占布局
   ============================================================ */
.my-wp-dock[data-dock="topbar"] {
  padding: 3px 5px;
  gap: 2px;
  flex-wrap: nowrap;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.my-wp-dock[data-dock="topbar"] .my-wp-dot {
  padding: 2px;
  gap: 0;
  font-size: 0;            /* 隐藏色板名，仅留圆点 */
}
.my-wp-dock[data-dock="topbar"] .my-wp-dot i {
  width: 18px;
  height: 18px;
}
.my-wp-dock[data-dock="topbar"] .my-wp-dot:hover { transform: none; }
.my-wp-dock[data-dock="topbar"] .my-wp-dot:hover i { transform: scale(1.18); }

/* ============================================================
   全局字体清晰度强化（v7.3）
   抗锯齿渲染 + 次级墨色全面提亮（令牌层已提亮的见 se-bright :root）
   ============================================================ */
html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   经络地图 · 3D人体经络图清晰度重写（v7.4）
   原稿线条透明度 0.08-0.2 过于暗淡 → 全面提亮加粗 + 辉光
   ============================================================ */
svg[code-path*="MapView.tsx:128"] { overflow: visible; }

/* 1. 人体轮廓（白色系描边）→ 清晰银亮 */
svg[code-path*="MapView.tsx:128"] [stroke="rgba(255,255,255,0.08)"] { stroke: rgba(226,236,252,.55); }
svg[code-path*="MapView.tsx:128"] [stroke="rgba(255,255,255,0.1)"]  { stroke: rgba(226,236,252,.62); stroke-width: 1.5; }
svg[code-path*="MapView.tsx:128"] [stroke="rgba(255,255,255,0.12)"] { stroke: rgba(230,240,255,.8); stroke-width: 2.2; }
svg[code-path*="MapView.tsx:128"] [stroke="rgba(255,255,255,0.14)"] { stroke: rgba(226,236,252,.68); stroke-width: 1.1; }
svg[code-path*="MapView.tsx:128"] [fill="rgba(255,255,255,0.015)"]  { fill: rgba(226,236,252,.07); }

/* 2. 十二经络彩色循行线：0.2 → 0.8 不透明 + 加粗 + 同色辉光 */
svg[code-path*="MapView.tsx:128"] [stroke="rgba(59,130,246,0.2)"]  { stroke: rgba(96,165,250,.85);  stroke-width: 1.9; filter: drop-shadow(0 0 5px rgba(96,165,250,.55)); }
svg[code-path*="MapView.tsx:128"] [stroke="rgba(34,197,94,0.2)"]   { stroke: rgba(74,222,128,.85);  stroke-width: 1.9; filter: drop-shadow(0 0 5px rgba(74,222,128,.55)); }
svg[code-path*="MapView.tsx:128"] [stroke="rgba(6,182,212,0.2)"]   { stroke: rgba(34,211,238,.85);  stroke-width: 1.9; filter: drop-shadow(0 0 5px rgba(34,211,238,.55)); }
svg[code-path*="MapView.tsx:128"] [stroke="rgba(245,158,11,0.2)"]  { stroke: rgba(251,191,36,.85);  stroke-width: 1.9; filter: drop-shadow(0 0 5px rgba(251,191,36,.55)); }
svg[code-path*="MapView.tsx:128"] [stroke="rgba(139,92,246,0.2)"]  { stroke: rgba(167,139,250,.85); stroke-width: 1.9; filter: drop-shadow(0 0 5px rgba(167,139,250,.55)); }
svg[code-path*="MapView.tsx:128"] [stroke="rgba(236,72,153,0.2)"]  { stroke: rgba(244,114,182,.85); stroke-width: 1.9; filter: drop-shadow(0 0 5px rgba(244,114,182,.55)); }
svg[code-path*="MapView.tsx:128"] [stroke="rgba(236,72,153,0.15)"] { stroke: rgba(244,114,182,.5); }

/* 3. 旧金色选中经脉/参考线 → 主题主色（消除金色残留） */
svg[code-path*="MapView.tsx:128"] [stroke="#C8A55A"] {
  stroke: var(--my-primary, #A8C7FA);
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--my-primary, #A8C7FA) 70%, transparent));
}
svg[code-path*="MapView.tsx:128"] [stroke="rgba(200,165,90,0.15)"] { stroke: color-mix(in srgb, var(--my-primary, #A8C7FA) 40%, transparent); }
svg[code-path*="MapView.tsx:128"] [stroke="rgba(200,165,90,0.2)"]  { stroke: color-mix(in srgb, var(--my-primary, #A8C7FA) 55%, transparent); stroke-width: 1.4; }
svg[code-path*="MapView.tsx:128"] [fill="rgba(200,165,90,0.3)"]    { fill: color-mix(in srgb, var(--my-primary, #A8C7FA) 45%, transparent); }
svg[code-path*="MapView.tsx:128"] [fill="rgba(200,165,90,0.35)"]   { fill: color-mix(in srgb, var(--my-primary, #A8C7FA) 55%, transparent); }
svg[code-path*="MapView.tsx:128"] [fill="rgba(200,165,90,0.4)"]    { fill: color-mix(in srgb, var(--my-primary, #A8C7FA) 65%, transparent); }

/* 4. 穴位点：白色描边提亮 */
svg[code-path*="MapView.tsx:128"] circle:not([stroke]) {
  stroke: rgba(255,255,255,.75);
  stroke-width: .8;
}