/* =============================================================
   奶雾玻璃 Milk Glass — v3 精致版（性能保持，仅视觉升级）
   =============================================================
   说明：
   - 作用域严格限定在 html[data-theme="milkglass"]
   - 不改 DOM、不改尺寸/间距/定位、不影响排版（仅色彩/阴影/渐变/质感）
   - backdrop-filter 仅 ≥769px 桌面启用；<768px 纯降级
   - 动画仅 opacity-only（入场/吐司除外，吐司 ≤400ms）
   ============================================================= */
/* =============================================================
   奶雾玻璃 Milk Glass Design System — 全局主题（精致版 v3，性能保持）
   作用域：html[data-theme="milkglass"]
   严格不改 DOM / 不改排版，只改视觉：色彩、阴影、玻璃质感、微渐变
   性能底线：
   1. backdrop-filter 仅 ≥769px 桌面启用，移动端纯降级
   2. 动画默认不启用（prefers-reduced-motion: no-preference 才呼吸）
   3. 入场动画仅 opacity（不触发 repaint）
   4. blur 控制在 14px，shadow 仅 2~3 档叠层
   ============================================================= */

html { color-scheme: light; }
html, body { background: #f3ecf0; }

/* =============================================================
   1. 色彩令牌（更有层次的冷调粉彩 + 真实玻璃感）
   ============================================================= */
html[data-theme="milkglass"] {
  /* 背景基色：冷调米杏（替代脏粉色） */
  --mg-bg:        #f4ecf1;
  --mg-bg-warm:   #f7f0ed;
  --mg-bg-ice:    #eef3f9;

  /* 文字：由冷紫灰改成柔棕灰 — 对比度更高级，不发紫 */
  --mg-text:      #4a424c;
  --mg-text-2:    #7c7280;
  --mg-text-3:    #a89dac;
  --mg-text-muted: rgba(155, 140, 165, 0.78);

  /* 三色星云：降低饱和度 — 从「少女粉」升级到「烟粉 / 雾紫 / 冰蓝」 */
  --mg-pink:      #ecd7dd;
  --mg-pink-deep: #d6aebb;
  --mg-violet:    #d8d0e6;
  --mg-violet-deep: #ada0c9;
  --mg-sky:       #d7e2ee;
  --mg-sky-deep:  #9cb9d3;

  /* 主题渐变色：主色由紫调粉 → 玫瑰粉 + 薰衣草的高级混色 */
  --mg-grad-accent: linear-gradient(115deg, #e7c1cd 0%, #c9b9dc 48%, #b5cde0 100%);
  --mg-grad-title:  linear-gradient(105deg, #c797ac 0%, #a997cb 55%, #8dadd0 100%);
  --mg-grad-solid:  linear-gradient(112deg, #e2a7bc 0%, #b69fda 100%);
  --mg-grad-btn:    linear-gradient(112deg, #e6afbf 0%, #bfaae0 100%);
  --mg-grad-btn-2:  linear-gradient(112deg, #f0c4d2 0%, #cdbce6 100%);

  /* 语义色：低饱和，不刺眼 */
  --mg-success:     #d6e7dd;
  --mg-success-ink: #558c71;
  --mg-warning:     #f1dfc7;
  --mg-warning-ink: #b68250;
  --mg-error:       #ecd0d7;
  --mg-error-ink:   #b86980;
  --mg-info:        #d1dfef;
  --mg-info-ink:    #6a8cb7;

  /* 玻璃：半透明从 0.55 降到 0.50，配合更浅的边框 — 更通透有层次 */
  --mg-glass-1: rgba(255, 255, 255, 0.50);
  --mg-glass-2: linear-gradient(160deg, rgba(255,255,255,0.68) 0%, rgba(255,255,255,0.46) 100%);
  --mg-glass-3: linear-gradient(160deg, rgba(255,255,255,0.76) 0%, rgba(255,255,255,0.54) 100%);
  --mg-glass-4: linear-gradient(160deg, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.60) 100%);
  --mg-glass-blur: 14px;
  --mg-glass-line: rgba(255, 255, 255, 0.82);
  --mg-glass-line-soft: rgba(255, 255, 255, 0.58);

  /* 圆角：略缩一档 — 避免「过度卡通化」 */
  --mg-r-sm:   10px;
  --mg-r-md:   14px;
  --mg-r-lg:   20px;
  --mg-r-xl:   26px;
  --mg-r-pill: 999px;

  /* 间距令牌（不变，仅引用） */
  --mg-s-1:  4px; --mg-s-2: 8px; --mg-s-3: 12px; --mg-s-4: 16px;
  --mg-s-6:  24px; --mg-s-8: 32px; --mg-s-12: 48px; --mg-s-16: 64px;

  /* 阴影：由紫调改为冷棕灰 — 更真实，不发闷
     思路：基础投影（远距柔光） + 次投影（近距深色） + 内部 1px 高光 */
  --mg-sh-sm:   0 4px 14px -10px rgba(90, 70, 100, 0.18),
                0 1px  2px -1px rgba(90, 70, 100, 0.06);
  --mg-sh-md:   0 12px 36px -18px rgba(90, 70, 100, 0.28),
                0 2px  6px -2px rgba(90, 70, 100, 0.08);
  --mg-sh-lg:   0 22px 60px -28px rgba(90, 70, 100, 0.36),
                0 4px 12px -4px rgba(90, 70, 100, 0.12);
  --mg-sh-btn:  0 8px 24px -12px rgba(200, 140, 175, 0.48),
                0 1px  2px -1px rgba(90, 70, 100, 0.08);
  --mg-sh-glow: inset 0 1px 0 rgba(255,255,255,0.78);

  /* 节奏：更干脆（不拖沓） */
  --mg-ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --mg-t-micro:  60ms;
  --mg-t-ui:     180ms;
  --mg-t-emph:   360ms;
  --mg-t-hover:  450ms;
  --mg-t-reveal: 380ms;

  /* 边框/聚焦环：柔化 + 真实感 */
  --mg-border-subtle: rgba(175, 145, 180, 0.16);
  --mg-border-normal: rgba(175, 145, 180, 0.22);
  --mg-border-strong: rgba(175, 145, 180, 0.30);
  --mg-ring:          rgba(180, 160, 210, 0.45);
  --mg-ring-soft:     rgba(180, 160, 210, 0.28);
  --mg-select-ring:   rgba(220, 160, 185, 0.36);
  --mg-select-ring-2: rgba(220, 160, 185, 0.18);

  /* 与 default 主题的兼容别名 */
  --bg:    var(--mg-bg);
  --bg2:   var(--mg-glass-1);
  --ink:   var(--mg-text);
  --muted: var(--mg-text-2);
  --rule:  var(--mg-border-normal);
  --accent:  var(--mg-violet-deep);
  --accent2: var(--mg-pink-deep);
}

/* < 768px：完全关 backdrop-filter，降级成纯半透明（移动端性能核心） */
@media (max-width: 768px) {
  html[data-theme="milkglass"] {
    --mg-glass-blur: 0px;
    --mg-glass-1: rgba(255, 255, 255, 0.84);
    --mg-glass-2: rgba(255, 255, 255, 0.88);
    --mg-glass-3: rgba(255, 255, 255, 0.94);
    --mg-glass-4: rgba(255, 255, 255, 0.96);
    --mg-glass-line: rgba(195, 175, 200, 0.28);
    --mg-glass-line-soft: rgba(195, 175, 200, 0.22);
    --mg-sh-md: 0 4px 18px -12px rgba(90,70,100,0.18);
    --mg-sh-lg: 0 10px 28px -20px rgba(90,70,100,0.22);
    --mg-sh-btn: 0 4px 14px -10px rgba(200,140,175,0.38);
    --mg-t-reveal: 0ms;
  }
}

/* =============================================================
   2. 玻璃基础类（桌面端启用 backdrop-filter）
   ============================================================= */
html[data-theme="milkglass"] .mg-glass-1,
html[data-theme="milkglass"] .glass-1 {
  background: var(--mg-glass-1);
  border: 1px solid var(--mg-glass-line);
  border-radius: var(--mg-r-md);
  box-shadow: var(--mg-sh-sm), var(--mg-sh-glow);
}
html[data-theme="milkglass"] .mg-glass-2,
html[data-theme="milkglass"] .glass-2 {
  background: var(--mg-glass-2);
  border: 1px solid var(--mg-glass-line);
  border-radius: var(--mg-r-lg);
  box-shadow: var(--mg-sh-md), var(--mg-sh-glow);
}
html[data-theme="milkglass"] .mg-glass-3,
html[data-theme="milkglass"] .glass-3 {
  background: var(--mg-glass-3);
  border: 1px solid var(--mg-glass-line);
  border-radius: var(--mg-r-xl);
  box-shadow: var(--mg-sh-lg), var(--mg-sh-glow);
}
@media (min-width: 769px) {
  html[data-theme="milkglass"] .mg-glass-1, html[data-theme="milkglass"] .glass-1,
  html[data-theme="milkglass"] .mg-glass-2, html[data-theme="milkglass"] .glass-2,
  html[data-theme="milkglass"] .mg-glass-3, html[data-theme="milkglass"] .glass-3 {
    backdrop-filter: blur(var(--mg-glass-blur)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--mg-glass-blur)) saturate(150%);
  }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-theme="milkglass"] .mg-glass-1, html[data-theme="milkglass"] .glass-1 { background: rgba(255,255,255,0.90); }
  html[data-theme="milkglass"] .mg-glass-2, html[data-theme="milkglass"] .glass-2 { background: rgba(255,255,255,0.93); }
  html[data-theme="milkglass"] .mg-glass-3, html[data-theme="milkglass"] .glass-3 { background: rgba(255,255,255,0.96); }
}

/* 浮动：只留 shadow，不做 transform（性能） */
html[data-theme="milkglass"] .floating { box-shadow: var(--mg-sh-lg), var(--mg-sh-glow); }

/* =============================================================
   3. 氛围背景（四层叠加：星云 + 玻璃彩虹 + 暗部晕染 + 细点噪点感）
   — 全部用 radial/linear-gradient，不消耗额外性能（无动画时纯绘制一次）
   ============================================================= */
html[data-theme="milkglass"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    /* 左上：暖调粉杏光晕 */
    radial-gradient(ellipse 58% 48% at 18% 22%,
      rgba(241, 216, 223, 0.86) 0%,
      rgba(241, 216, 223, 0.38) 36%,
      rgba(241, 216, 223, 0) 72%),
    /* 中下：冷调紫雾 */
    radial-gradient(ellipse 62% 52% at 58% 62%,
      rgba(218, 208, 232, 0.78) 0%,
      rgba(218, 208, 232, 0.30) 44%,
      rgba(218, 208, 232, 0) 78%),
    /* 右下：冰蓝海雾 */
    radial-gradient(ellipse 54% 44% at 86% 84%,
      rgba(215, 226, 238, 0.84) 0%,
      rgba(215, 226, 238, 0.28) 42%,
      rgba(215, 226, 238, 0) 76%),
    /* 底：冷米杏 + 非常淡的对角渐变 */
    linear-gradient(165deg, #f5eff1 0%, #f1ecf3 50%, #edf0f5 100%);
  background-attachment: fixed;
  will-change: opacity;
}
html[data-theme="milkglass"] body::after {
  content: "";
  position: fixed;
  inset: -20% -10%;
  z-index: -1;
  pointer-events: none;
  background:
    /* 一条倾斜的彩虹色带 — soft-light 叠加模式：像玻璃上的光晕 */
    linear-gradient(120deg,
      rgba(240, 200, 210, 0) 10%,
      rgba(240, 200, 210, 0.45) 28%,
      rgba(215, 200, 230, 0.45) 50%,
      rgba(195, 210, 230, 0.42) 72%,
      rgba(195, 210, 230, 0) 90%);
  opacity: 0.65;
  filter: blur(48px) saturate(125%);
  transform: rotate(-4deg);
  mix-blend-mode: soft-light;
  will-change: opacity;
}

/* 只有明确 no-preference 才给很淡的呼吸（28s / 40s，几乎察觉不到但有生命感） */
@media (prefers-reduced-motion: no-preference) {
  html[data-theme="milkglass"] body::before { animation: mg-bg-breathe 28s var(--mg-ease) infinite alternate; }
  html[data-theme="milkglass"] body::after  { animation: mg-rainbow-drift 42s var(--mg-ease) infinite alternate; }
}
@keyframes mg-bg-breathe  { from { opacity: 0.95; } to { opacity: 1; } }
@keyframes mg-rainbow-drift { from { opacity: 0.55; transform: rotate(-4deg) translateX(-1%); }
                              to   { opacity: 0.75; transform: rotate(-3deg) translateX(1%); } }

@media (prefers-reduced-motion: reduce) {
  html[data-theme="milkglass"] *,
  html[data-theme="milkglass"] *::before,
  html[data-theme="milkglass"] *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* =============================================================
   4. 全局排版（字体微调，不改字号/布局）
   ============================================================= */
html[data-theme="milkglass"] {
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "HarmonyOS Sans SC",
               -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0.015em;
  color: var(--mg-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* 标题：衬线 + 渐变文字，整体更"高级" */
html[data-theme="milkglass"] h1,
html[data-theme="milkglass"] h2,
html[data-theme="milkglass"] h3,
html[data-theme="milkglass"] .mg-serif {
  font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "SimSun",
               "Georgia", "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.35;
  background: var(--mg-grad-title);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
html[data-theme="milkglass"] h1 { font-size: 30px; }
html[data-theme="milkglass"] h2 { font-size: 22px; }
html[data-theme="milkglass"] h3 { font-size: 17px; }

html[data-theme="milkglass"] code,
html[data-theme="milkglass"] pre,
html[data-theme="milkglass"] .mg-mono {
  font-family: "JetBrains Mono", "Fira Code", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

html[data-theme="milkglass"] .mg-title-grad {
  background: var(--mg-grad-title);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* =============================================================
   5. 组件（严格不改尺寸/间距，只改视觉）
   ============================================================= */

/* 5.1 按钮：主按钮 / 次按钮 / danger / outline / 通用 .btn
   — 主按钮给真实的「凸面+内高光」感（仅 hover 时亮一点，不位移） */
html[data-theme="milkglass"] .btn-primary,
html[data-theme="milkglass"] .btn.btn-primary,
html[data-theme="milkglass"] button.mg-btn,
html[data-theme="milkglass"] input[type="submit"].mg-btn,
html[data-theme="milkglass"] a.mg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 42px; padding: 0 22px;
  border-radius: var(--mg-r-md);
  background: var(--mg-grad-btn);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: var(--mg-sh-btn),
              var(--mg-sh-glow),
              inset 0 1px 0 rgba(255,255,255,0.55);
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-shadow: 0 1px 0 rgba(120, 80, 110, 0.18);
  transition: filter var(--mg-t-hover) var(--mg-ease),
              box-shadow var(--mg-t-ui) var(--mg-ease),
              background-image var(--mg-t-ui) var(--mg-ease);
  will-change: opacity;
}
html[data-theme="milkglass"] .btn-primary:hover,
html[data-theme="milkglass"] button.mg-btn:hover {
  background: var(--mg-grad-btn-2);
  filter: saturate(110%) brightness(1.025);
  box-shadow: 0 10px 28px -14px rgba(200, 140, 175, 0.55),
              0 2px 4px -2px rgba(90, 70, 100, 0.10),
              inset 0 1px 0 rgba(255,255,255,0.7);
}
html[data-theme="milkglass"] .btn-primary:active,
html[data-theme="milkglass"] button.mg-btn:active {
  filter: saturate(106%) brightness(0.98);
  box-shadow: 0 4px 14px -8px rgba(200, 140, 175, 0.45),
              inset 0 1px 2px rgba(90, 70, 100, 0.08);
}

/* 通用 .btn（admin/login.php 里原有的「登 录」按钮 — 没加主类） */
html[data-theme="milkglass"] .btn,
html[data-theme="milkglass"] button.btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 42px; padding: 0 22px;
  width: 100%;
  border-radius: var(--mg-r-md);
  background: var(--mg-grad-btn);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: var(--mg-sh-btn),
              var(--mg-sh-glow),
              inset 0 1px 0 rgba(255,255,255,0.55);
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-shadow: 0 1px 0 rgba(120, 80, 110, 0.18);
  transition: filter var(--mg-t-hover) var(--mg-ease),
              box-shadow var(--mg-t-ui) var(--mg-ease);
  will-change: opacity;
}
html[data-theme="milkglass"] .btn:hover,
html[data-theme="milkglass"] button.btn:hover {
  background: var(--mg-grad-btn-2);
  filter: saturate(110%) brightness(1.025);
  box-shadow: 0 10px 28px -14px rgba(200, 140, 175, 0.55),
              0 2px 4px -2px rgba(90, 70, 100, 0.10),
              inset 0 1px 0 rgba(255,255,255,0.7);
}
html[data-theme="milkglass"] .btn:active,
html[data-theme="milkglass"] button.btn:active {
  filter: saturate(106%) brightness(0.98);
}

/* 次按钮：玻璃白 */
html[data-theme="milkglass"] .btn-outline,
html[data-theme="milkglass"] .btn-sm.btn-outline,
html[data-theme="milkglass"] .mg-btn-outline,
html[data-theme="milkglass"] .btn-secondary,
html[data-theme="milkglass"] .btn.btn-secondary,
html[data-theme="milkglass"] .refresh-btn {
  background: var(--mg-glass-2);
  color: var(--mg-text);
  border: 1px solid var(--mg-glass-line);
  box-shadow: var(--mg-sh-sm), var(--mg-sh-glow);
  letter-spacing: 0.03em;
}
@media (min-width: 769px) {
  html[data-theme="milkglass"] .btn-outline, html[data-theme="milkglass"] .mg-btn-outline,
  html[data-theme="milkglass"] .btn-secondary, html[data-theme="milkglass"] .refresh-btn {
    backdrop-filter: blur(var(--mg-glass-blur)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--mg-glass-blur)) saturate(150%);
  }
}
html[data-theme="milkglass"] .btn-outline:hover,
html[data-theme="milkglass"] .btn-secondary:hover,
html[data-theme="milkglass"] .refresh-btn:hover {
  background: var(--mg-glass-3);
  color: var(--mg-text);
}

html[data-theme="milkglass"] .btn-sm {
  height: 32px; padding: 0 14px;
  border-radius: var(--mg-r-sm);
  font-size: 13px;
}

html[data-theme="milkglass"] .btn-danger,
html[data-theme="milkglass"] .mg-btn.danger,
html[data-theme="milkglass"] .mg-btn-danger {
  background: linear-gradient(112deg, #e3a1b3, #ca8198);
  color: #fff;
  border-color: rgba(255,255,255,0.4);
  box-shadow: 0 8px 22px -12px rgba(200, 120, 145, 0.50),
              var(--mg-sh-glow),
              inset 0 1px 0 rgba(255,255,255,0.5);
}

/* 聚焦环（统一） */
html[data-theme="milkglass"] .btn-primary:focus,
html[data-theme="milkglass"] .btn:focus,
html[data-theme="milkglass"] button:focus,
html[data-theme="milkglass"] input:focus,
html[data-theme="milkglass"] select:focus,
html[data-theme="milkglass"] textarea:focus,
html[data-theme="milkglass"] .refresh-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--mg-ring-soft),
              0 0 0 6px var(--mg-select-ring-2),
              var(--mg-sh-sm);
}

/* 5.2 输入框：玻璃感 + 内阴影 + 聚焦变色（不改尺寸/布局） */
html[data-theme="milkglass"] input[type="text"],
html[data-theme="milkglass"] input[type="password"],
html[data-theme="milkglass"] input[type="number"],
html[data-theme="milkglass"] input[type="email"],
html[data-theme="milkglass"] input[type="search"],
html[data-theme="milkglass"] select,
html[data-theme="milkglass"] textarea,
html[data-theme="milkglass"] .mg-input,
html[data-theme="milkglass"] .form-group input {
  height: 44px;
  padding: 0 16px;
  border-radius: var(--mg-r-md);
  background: var(--mg-glass-1);
  border: 1px solid var(--mg-border-normal);
  color: var(--mg-text);
  box-shadow: inset 0 1px 2px rgba(90, 70, 100, 0.05),
              inset 0 1px 0 rgba(255,255,255,0.8),
              0 1px 2px rgba(90, 70, 100, 0.03);
  font-size: 14.5px;
  letter-spacing: 0.02em;
  transition: border-color var(--mg-t-ui) var(--mg-ease),
              box-shadow var(--mg-t-ui) var(--mg-ease),
              background-color var(--mg-t-ui) var(--mg-ease);
}
@media (min-width: 769px) {
  html[data-theme="milkglass"] input, html[data-theme="milkglass"] select,
  html[data-theme="milkglass"] textarea, html[data-theme="milkglass"] .mg-input,
  html[data-theme="milkglass"] .form-group input {
    backdrop-filter: blur(var(--mg-glass-blur)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--mg-glass-blur)) saturate(150%);
  }
}
html[data-theme="milkglass"] textarea { height: auto; padding: 12px 16px; line-height: 1.7; }
html[data-theme="milkglass"] input::placeholder,
html[data-theme="milkglass"] textarea::placeholder { color: var(--mg-text-muted); }
html[data-theme="milkglass"] input:focus,
html[data-theme="milkglass"] select:focus,
html[data-theme="milkglass"] textarea:focus,
html[data-theme="milkglass"] .form-group input:focus {
  border-color: var(--mg-violet-deep);
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 0 0 3px var(--mg-ring-soft),
              0 0 0 6px var(--mg-select-ring-2),
              inset 0 1px 2px rgba(90, 70, 100, 0.04);
}

html[data-theme="milkglass"] select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--mg-violet-deep) 50%),
    linear-gradient(135deg, var(--mg-violet-deep) 50%, transparent 50%);
  background-position:
    calc(100% - 22px) 50%,
    calc(100% - 14px) 50%;
  background-size: 8px 8px, 8px 8px;
  background-repeat: no-repeat;
  padding-right: 44px;
}

/* 5.3 卡片：入场仅 opacity（性能） */
html[data-theme="milkglass"] .card,
html[data-theme="milkglass"] .section,
html[data-theme="milkglass"] .mg-card {
  background: var(--mg-glass-2);
  border: 1px solid var(--mg-glass-line);
  border-radius: var(--mg-r-lg);
  box-shadow: var(--mg-sh-md), var(--mg-sh-glow);
  padding: var(--mg-s-6);
  margin-bottom: var(--mg-s-6);
  transition: background-color var(--mg-t-ui) var(--mg-ease),
              box-shadow var(--mg-t-ui) var(--mg-ease);
  will-change: opacity;
  animation: mg-card-reveal var(--mg-t-reveal) var(--mg-ease) both;
}
@media (min-width: 769px) {
  html[data-theme="milkglass"] .card, html[data-theme="milkglass"] .section,
  html[data-theme="milkglass"] .mg-card {
    backdrop-filter: blur(var(--mg-glass-blur)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--mg-glass-blur)) saturate(150%);
  }
}
@keyframes mg-card-reveal { from { opacity: 0; } to { opacity: 1; } }

/* 5.4 表格 */
html[data-theme="milkglass"] table { width: 100%; border-collapse: separate; border-spacing: 0; color: var(--mg-text); }
html[data-theme="milkglass"] thead th {
  background: var(--mg-glass-1);
  color: var(--mg-text);
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--mg-border-normal);
}
@media (min-width: 769px) {
  html[data-theme="milkglass"] thead th {
    backdrop-filter: blur(var(--mg-glass-blur)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--mg-glass-blur)) saturate(150%);
  }
}
html[data-theme="milkglass"] thead th:first-child { border-top-left-radius:  var(--mg-r-md); }
html[data-theme="milkglass"] thead th:last-child  { border-top-right-radius: var(--mg-r-md); }
html[data-theme="milkglass"] tbody td {
  padding: 11px 16px;
  border-bottom: 1px solid rgba(150, 125, 160, 0.08);
  font-size: 14px;
  color: var(--mg-text);
  transition: background-color var(--mg-t-ui) var(--mg-ease);
}
html[data-theme="milkglass"] tbody tr:last-child td { border-bottom: none; }
html[data-theme="milkglass"] tbody tr:hover td {
  background: linear-gradient(150deg, rgba(255,255,255,0.44), rgba(255,255,255,0.22));
}
html[data-theme="milkglass"] td strong,
html[data-theme="milkglass"] th strong {
  background: var(--mg-grad-title);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* 5.5 徽章 */
html[data-theme="milkglass"] .badge,
html[data-theme="milkglass"] .mg-badge {
  display: inline-flex; align-items: center;
  height: 24px; padding: 0 12px;
  border-radius: var(--mg-r-pill);
  background: var(--mg-glass-2);
  border: 1px solid var(--mg-glass-line);
  color: var(--mg-text);
  font-size: 12px;
  letter-spacing: 0.03em;
  box-shadow: var(--mg-sh-sm), var(--mg-sh-glow);
  font-weight: 600;
}
@media (min-width: 769px) {
  html[data-theme="milkglass"] .badge, html[data-theme="milkglass"] .mg-badge {
    backdrop-filter: blur(var(--mg-glass-blur)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--mg-glass-blur)) saturate(150%);
  }
}
html[data-theme="milkglass"] .badge-success { background: linear-gradient(112deg, #d6e7dd, #c3dcd0); color: #3f7d5e; }
html[data-theme="milkglass"] .badge-warning { background: var(--mg-warning); color: #a3703f; }
html[data-theme="milkglass"] .badge-danger,
html[data-theme="milkglass"] .badge-error   { background: var(--mg-error);   color: var(--mg-error-ink); }
html[data-theme="milkglass"] .badge-info    { background: var(--mg-info);    color: var(--mg-info-ink); }

/* 5.6 吐司 */
html[data-theme="milkglass"] .toast,
html[data-theme="milkglass"] #toast-container > div,
html[data-theme="milkglass"] .mg-toast {
  background: var(--mg-glass-4) !important;
  border: 1px solid var(--mg-glass-line) !important;
  border-radius: var(--mg-r-xl) !important;
  box-shadow: var(--mg-sh-lg), var(--mg-sh-glow) !important;
  color: var(--mg-text) !important;
  padding: 14px 22px !important;
  min-width: 280px;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}
@media (min-width: 769px) {
  html[data-theme="milkglass"] .toast, html[data-theme="milkglass"] .mg-toast {
    backdrop-filter: blur(var(--mg-glass-blur)) saturate(150%) !important;
    -webkit-backdrop-filter: blur(var(--mg-glass-blur)) saturate(150%) !important;
  }
}
html[data-theme="milkglass"] .toast-success { color: var(--mg-success-ink) !important; }
html[data-theme="milkglass"] .toast-error   { color: var(--mg-error-ink)   !important; }
html[data-theme="milkglass"] .toast-warning { color: var(--mg-warning-ink) !important; }
html[data-theme="milkglass"] .toast-info    { color: var(--mg-info-ink)    !important; }
html[data-theme="milkglass"] .toast.toast-show,
html[data-theme="milkglass"] .toast.show {
  animation: mg-toast-in 360ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
html[data-theme="milkglass"] .toast.toast-hide {
  animation: mg-toast-out 160ms cubic-bezier(0.55, 0, 1, 0.45) both;
}
@keyframes mg-toast-in  { from { opacity: 0; transform: translate(-50%, -12px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes mg-toast-out { to   { opacity: 0; transform: translate(-50%, -8px) scale(0.98); } }

/* 5.7 侧边栏 */
html[data-theme="milkglass"] .sidebar {
  background: var(--mg-glass-3);
  border: 1px solid var(--mg-glass-line);
  border-radius: var(--mg-r-xl);
  box-shadow: var(--mg-sh-lg), var(--mg-sh-glow);
}
@media (min-width: 769px) {
  html[data-theme="milkglass"] .sidebar {
    backdrop-filter: blur(var(--mg-glass-blur)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--mg-glass-blur)) saturate(150%);
  }
}
html[data-theme="milkglass"] .sidebar a {
  display: flex; align-items: center;
  height: 44px; padding: 0 18px; margin: 6px 10px;
  border-radius: var(--mg-r-md);
  color: var(--mg-text-2);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.03em;
  transition: all var(--mg-t-ui) var(--mg-ease);
  border: 1px solid transparent;
}
html[data-theme="milkglass"] .sidebar a:hover {
  background: var(--mg-glass-2);
  color: var(--mg-text);
  box-shadow: var(--mg-sh-sm), var(--mg-sh-glow);
}
html[data-theme="milkglass"] .sidebar a.active {
  background: var(--mg-grad-solid) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.5) !important;
  box-shadow: var(--mg-sh-md),
              0 0 0 2px var(--mg-select-ring),
              inset 0 1px 0 rgba(255,255,255,0.6) !important;
  text-shadow: 0 1px 0 rgba(120, 80, 110, 0.18);
}

/* 5.8 布局 + 统计卡片（不改尺寸） */
html[data-theme="milkglass"] .app {
  max-width: 1360px;
  margin: 0 auto;
  padding: var(--mg-s-8) var(--mg-s-6);
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: var(--mg-s-8);
  align-items: start;
}
html[data-theme="milkglass"] .stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--mg-s-4);
  margin-bottom: var(--mg-s-6);
}
html[data-theme="milkglass"] .stat-card {
  background: var(--mg-glass-2);
  border: 1px solid var(--mg-glass-line);
  border-radius: var(--mg-r-lg);
  padding: var(--mg-s-6);
  box-shadow: var(--mg-sh-md), var(--mg-sh-glow);
  transition: box-shadow var(--mg-t-ui) var(--mg-ease),
              background-color var(--mg-t-ui) var(--mg-ease);
  animation: mg-card-reveal var(--mg-t-reveal) var(--mg-ease) both;
}
@media (min-width: 769px) {
  html[data-theme="milkglass"] .stat-card {
    backdrop-filter: blur(var(--mg-glass-blur)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--mg-glass-blur)) saturate(150%);
  }
}
html[data-theme="milkglass"] .stat-card:hover { box-shadow: var(--mg-sh-lg), var(--mg-sh-glow); }
html[data-theme="milkglass"] .stat-card .stat-label {
  color: var(--mg-text-2);
  font-size: 13px;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
  font-weight: 500;
}
html[data-theme="milkglass"] .stat-card .stat-value {
  font-family: "Noto Serif SC", serif;
  font-size: 32px;
  font-weight: 700;
  background: var(--mg-grad-title);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

html[data-theme="milkglass"] .form-row {
  display: flex;
  gap: var(--mg-s-3);
  align-items: center;
  margin-bottom: var(--mg-s-4);
  flex-wrap: wrap;
}
html[data-theme="milkglass"] .form-row > * { flex: 1 1 auto; }
html[data-theme="milkglass"] .form-row > select,
html[data-theme="milkglass"] .form-row > input { min-width: 220px; }
html[data-theme="milkglass"] .form-row > button { flex: 0 0 auto; min-width: 120px; }

@media (max-width: 640px) {
  html[data-theme="milkglass"] .form-row > select,
  html[data-theme="milkglass"] .form-row > input { min-width: 0; flex: 1 1 100%; }
  html[data-theme="milkglass"] .form-row > button { min-width: 0; width: 100%; margin-top: 6px; }
}

@media (max-width: 960px) {
  html[data-theme="milkglass"] .app { grid-template-columns: 1fr; padding: var(--mg-s-6) var(--mg-s-4); }
  html[data-theme="milkglass"] .stat-grid { grid-template-columns: repeat(2, 1fr); }
  html[data-theme="milkglass"] .stat-card .stat-value { font-size: 26px; }
  html[data-theme="milkglass"] h1 { font-size: 26px; }
  html[data-theme="milkglass"] h2 { font-size: 20px; }
}
@media (max-width: 560px) {
  html[data-theme="milkglass"] .stat-grid { grid-template-columns: 1fr; }
  html[data-theme="milkglass"] .card, html[data-theme="milkglass"] .section,
  html[data-theme="milkglass"] .mg-card { padding: var(--mg-s-4); }
  html[data-theme="milkglass"] thead th,
  html[data-theme="milkglass"] tbody td { padding: 10px 12px; }
}

/* =============================================================
   5.9 登录页：admin/.login-box + user/.login-card 都完整覆盖
   （核心：不改 padding/width，只把「白板」变成「奶雾玻璃卡片」）
   ============================================================= */
html[data-theme="milkglass"] .login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--mg-s-6);
}

/* —— admin 登录：原结构是 .login-box —— */
html[data-theme="milkglass"] .login-box {
  background: var(--mg-glass-3) !important;
  border: 1px solid var(--mg-glass-line) !important;
  border-radius: var(--mg-r-xl) !important;
  box-shadow: var(--mg-sh-lg),
              var(--mg-sh-glow),
              0 0 0 1px var(--mg-border-subtle) !important;
  animation: mg-card-reveal var(--mg-t-reveal) var(--mg-ease) both;
  position: relative;
}
/* 顶部一条极淡的高光 — 像玻璃的反光 */
html[data-theme="milkglass"] .login-box::before {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
  pointer-events: none;
  border-radius: var(--mg-r-xl) var(--mg-r-xl) 0 0;
}
@media (min-width: 769px) {
  html[data-theme="milkglass"] .login-box {
    backdrop-filter: blur(var(--mg-glass-blur)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--mg-glass-blur)) saturate(150%);
  }
}
html[data-theme="milkglass"] .login-box h1 {
  text-align: center;
  margin-bottom: 6px;
}
html[data-theme="milkglass"] .login-box h2 {
  text-align: center;
  background: none !important;
  -webkit-background-clip: initial !important;
          background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: var(--mg-text-2) !important;
  font-size: 14px;
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-weight: 400;
  letter-spacing: 0.04em;
  margin-bottom: 2rem;
}

/* —— user 登录：原结构是 .login-card —— */
html[data-theme="milkglass"] .login-card {
  width: 100%;
  max-width: 440px;
  background: var(--mg-glass-3) !important;
  border: 1px solid var(--mg-glass-line) !important;
  border-radius: var(--mg-r-xl) !important;
  padding: 48px 40px;
  box-shadow: var(--mg-sh-lg),
              var(--mg-sh-glow),
              0 0 0 1px var(--mg-border-subtle) !important;
  animation: mg-card-reveal var(--mg-t-reveal) var(--mg-ease) both;
  position: relative;
}
html[data-theme="milkglass"] .login-card::before {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
  pointer-events: none;
}
@media (min-width: 769px) {
  html[data-theme="milkglass"] .login-card {
    backdrop-filter: blur(var(--mg-glass-blur)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--mg-glass-blur)) saturate(150%);
  }
}
@media (max-width: 480px) {
  html[data-theme="milkglass"] .login-card {
    padding: 24px 20px !important;
  }
  html[data-theme="milkglass"] .login-box {
    padding: 24px 20px !important;
  }
}
html[data-theme="milkglass"] .login-card h1 {
  text-align: center;
  margin-bottom: 6px;
}
html[data-theme="milkglass"] .login-card .sub,
html[data-theme="milkglass"] .login-card h2,
html[data-theme="milkglass"] .login-card .subtitle {
  text-align: center;
  background: none !important;
  -webkit-background-clip: initial !important;
          background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: var(--mg-text-2) !important;
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0.04em;
  margin-bottom: 28px;
}
html[data-theme="milkglass"] .login-card form {
  display: flex; flex-direction: column; gap: 16px;
}
html[data-theme="milkglass"] .login-card form > button { margin-top: 8px; }

/* —— form-group / label / alert（两个登录页共用） —— */
html[data-theme="milkglass"] .form-group { margin-bottom: 14px; }
html[data-theme="milkglass"] .form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--mg-text);
  letter-spacing: 0.03em;
}
html[data-theme="milkglass"] .alert {
  padding: 12px 14px;
  border-radius: var(--mg-r-md);
  margin-bottom: 1rem;
  font-size: 13.5px;
  line-height: 1.6;
  border: 1px solid var(--mg-glass-line);
  background: var(--mg-glass-2);
  box-shadow: var(--mg-sh-sm), var(--mg-sh-glow);
}
@media (min-width: 769px) {
  html[data-theme="milkglass"] .alert {
    backdrop-filter: blur(var(--mg-glass-blur)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--mg-glass-blur)) saturate(150%);
  }
}
html[data-theme="milkglass"] .alert-error,
html[data-theme="milkglass"] .alert.alert-error {
  background: linear-gradient(150deg, #f2d5dd 0%, #ecd0d7 100%);
  color: var(--mg-error-ink);
  border-color: rgba(236, 208, 215, 0.75);
  box-shadow: 0 6px 18px -12px rgba(180, 100, 125, 0.22),
              inset 0 1px 0 rgba(255,255,255,0.6);
}

/* —— footer（admin） + footer-link（user）—— */
html[data-theme="milkglass"] .footer {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 12px;
  color: var(--mg-text-3);
  letter-spacing: 0.04em;
}
html[data-theme="milkglass"] .footer-link {
  margin-top: 1.5rem;
  font-size: 12px;
  color: var(--mg-text-3);
  text-align: center;
}
html[data-theme="milkglass"] .footer-link a {
  color: var(--mg-violet-deep);
  text-decoration: none;
}
html[data-theme="milkglass"] .footer .row,
html[data-theme="milkglass"] .footer-link .row {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap; margin-top: 6px;
}
html[data-theme="milkglass"] .footer .row a,
html[data-theme="milkglass"] .footer .row button,
html[data-theme="milkglass"] .footer-link .row a,
html[data-theme="milkglass"] .footer-link .row button {
  color: var(--mg-violet-deep);
  background: none; border: none; cursor: pointer;
  font-size: 12px; padding: 2px 4px; text-decoration: none;
  letter-spacing: 0.03em;
}
html[data-theme="milkglass"] .footer .row button:hover,
html[data-theme="milkglass"] .footer .row a:hover,
html[data-theme="milkglass"] .footer-link .row button:hover,
html[data-theme="milkglass"] .footer-link .row a:hover {
  text-decoration: underline;
  color: var(--mg-pink-deep);
}

/* =============================================================
   5.9.1 user/login 专属：tabs/tab / qrcode / oauth / QQ icon
   （完全不改 DOM，只把原 fallback 样式升级成玻璃感）
   ============================================================= */

/* —— tabs：把原来的下划线切换，变成「分段控制器（segmented control）」 —— */
html[data-theme="milkglass"] .tabs {
  display: flex;
  border-bottom: none !important;
  margin-bottom: 1.5rem;
  padding: 5px;
  background: var(--mg-glass-1);
  border: 1px solid var(--mg-glass-line-soft);
  border-radius: var(--mg-r-md);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75),
              inset 0 -1px 0 rgba(90, 70, 100, 0.04),
              0 1px 2px rgba(90, 70, 100, 0.03);
  position: relative;
}
@media (min-width: 769px) {
  html[data-theme="milkglass"] .tabs {
    backdrop-filter: blur(var(--mg-glass-blur)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--mg-glass-blur)) saturate(150%);
  }
}
html[data-theme="milkglass"] .tab {
  flex: 1;
  padding: 9px 6px !important;
  font-size: 13px;
  color: var(--mg-text-2);
  cursor: pointer;
  border-radius: var(--mg-r-sm);
  margin-bottom: 0 !important;
  border-bottom: none !important;
  transition: color var(--mg-t-ui) var(--mg-ease),
              background-color var(--mg-t-ui) var(--mg-ease),
              box-shadow var(--mg-t-ui) var(--mg-ease);
  text-align: center;
  user-select: none;
  font-weight: 500;
  letter-spacing: 0.03em;
  position: relative;
  z-index: 1;
}
html[data-theme="milkglass"] .tab:hover { color: var(--mg-text); }
html[data-theme="milkglass"] .tab.active {
  background: var(--mg-grad-solid);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--mg-sh-sm),
              0 0 0 1px rgba(255,255,255,0.6),
              inset 0 1px 0 rgba(255,255,255,0.55);
  text-shadow: 0 1px 0 rgba(120, 80, 110, 0.18);
}

/* tab-panel：淡入切换（不位移） */
html[data-theme="milkglass"] .tab-panel.active {
  animation: mg-panel-fade var(--mg-t-emph) var(--mg-ease) both;
}
@keyframes mg-panel-fade { from { opacity: 0; } to { opacity: 1; } }

/* —— qrcode 容器：玻璃底 + 真实投影 —— */
html[data-theme="milkglass"] #qrcode-container {
  background: var(--mg-glass-2);
  border: 1px solid var(--mg-glass-line);
  border-radius: var(--mg-r-lg);
  box-shadow: var(--mg-sh-md),
              var(--mg-sh-glow),
              inset 0 0 0 1px rgba(255,255,255,0.3);
}
@media (min-width: 769px) {
  html[data-theme="milkglass"] #qrcode-container {
    backdrop-filter: blur(var(--mg-glass-blur)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--mg-glass-blur)) saturate(150%);
  }
}
html[data-theme="milkglass"] #qrcode-container img {
  border-radius: calc(var(--mg-r-lg) - 2px);
}
html[data-theme="milkglass"] #qrcode-container .overlay {
  background: linear-gradient(160deg, rgba(255,255,255,0.88), rgba(255,255,255,0.76)) !important;
  border-radius: calc(var(--mg-r-lg) - 2px);
}

/* loading spinner：主色渐变（不做尺寸变化） */
html[data-theme="milkglass"] .loading-spinner {
  border-color: rgba(195, 180, 220, 0.35);
  border-top-color: transparent;
  background: conic-gradient(from 0deg, transparent 0 75%, var(--mg-violet-deep) 75% 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  border: none !important;
}

/* status 文字 / refresh-btn（不位移） */
html[data-theme="milkglass"] .status-text {
  font-size: 13.5px;
  color: var(--mg-text-2);
  letter-spacing: 0.02em;
}
html[data-theme="milkglass"] .status-text.success { color: var(--mg-success-ink); font-weight: 600; }
html[data-theme="milkglass"] .status-text.error   { color: var(--mg-error-ink); }

/* —— OAuth：info 面板 + 蓝色登录按钮 —— */
html[data-theme="milkglass"] .oauth-info {
  background: var(--mg-glass-2);
  border: 1px solid var(--mg-glass-line);
  border-radius: var(--mg-r-lg);
  padding: 1.2rem;
  margin-bottom: 1rem;
  text-align: left;
  box-shadow: var(--mg-sh-sm), var(--mg-sh-glow);
}
@media (min-width: 769px) {
  html[data-theme="milkglass"] .oauth-info {
    backdrop-filter: blur(var(--mg-glass-blur)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--mg-glass-blur)) saturate(150%);
  }
}
html[data-theme="milkglass"] .oauth-info p {
  font-size: 13px;
  color: var(--mg-text-2);
  line-height: 1.65;
  margin-bottom: 6px;
}
html[data-theme="milkglass"] .oauth-info p strong {
  color: var(--mg-text);
  background: none; -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: initial;
}

html[data-theme="milkglass"] .btn-oauth {
  background: linear-gradient(125deg, #6fc6ec 0%, #3aa0d8 100%) !important;
  color: #fff !important;
  width: 100%;
  padding: 14px;
  font-size: 15px;
  border: 1px solid rgba(255,255,255,0.5) !important;
  border-radius: var(--mg-r-md) !important;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.04em;
  display: flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 8px 22px -12px rgba(58, 160, 216, 0.50),
              var(--mg-sh-glow),
              inset 0 1px 0 rgba(255,255,255,0.55) !important;
  text-shadow: 0 1px 0 rgba(30, 80, 120, 0.2);
  transition: filter var(--mg-t-hover) var(--mg-ease),
              box-shadow var(--mg-t-ui) var(--mg-ease);
}
html[data-theme="milkglass"] .btn-oauth:hover {
  filter: saturate(110%) brightness(1.03);
  box-shadow: 0 12px 30px -14px rgba(58, 160, 216, 0.58),
              inset 0 1px 0 rgba(255,255,255,0.7) !important;
}

/* QQ icon：彩色玻璃投影 */
html[data-theme="milkglass"] .qq-icon {
  filter: drop-shadow(0 4px 14px rgba(58, 160, 216, 0.22))
          drop-shadow(0 1px 2px rgba(58, 160, 216, 0.12));
}

/* —— 验证码 tab：倒计时 / 输入组 —— */
html[data-theme="milkglass"] .code-input-group { gap: 8px !important; }
html[data-theme="milkglass"] .code-input-group input { flex: 1; }
html[data-theme="milkglass"] .code-input-group .btn-secondary {
  flex: 0 0 auto;
  width: auto;
  padding: 0 14px;
}
html[data-theme="milkglass"] .countdown {
  font-size: 12px;
  color: var(--mg-text-3);
  margin-top: 6px;
  letter-spacing: 0.02em;
}

/* 验证码 tab 底部提示 */
html[data-theme="milkglass"] .tab-panel > p[style*="0.78rem"],
html[data-theme="milkglass"] #tab-code > p {
  color: var(--mg-text-3) !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  margin-top: 1rem !important;
}

/* =============================================================
   5.10 Tabbar / 其它新类兼容
   ============================================================= */
html[data-theme="milkglass"] .mg-tabbar {
  display: flex;
  border-bottom: none;
  margin-bottom: 1.5rem;
  padding: 5px;
  background: var(--mg-glass-1);
  border: 1px solid var(--mg-glass-line-soft);
  border-radius: var(--mg-r-md);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75);
}
html[data-theme="milkglass"] .mg-tab {
  flex: 1;
  padding: 9px 6px;
  font-size: 13px;
  color: var(--mg-text-2);
  cursor: pointer;
  border-radius: var(--mg-r-sm);
  margin-bottom: 0;
  transition: all var(--mg-t-ui) var(--mg-ease);
  text-align: center;
  user-select: none;
  font-weight: 500;
  letter-spacing: 0.03em;
}
html[data-theme="milkglass"] .mg-tab:hover { color: var(--mg-text); }
html[data-theme="milkglass"] .mg-tab.active {
  background: var(--mg-grad-solid);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--mg-sh-sm), 0 0 0 1px rgba(255,255,255,0.6),
              inset 0 1px 0 rgba(255,255,255,0.55);
  text-shadow: 0 1px 0 rgba(120, 80, 110, 0.18);
}
html[data-theme="milkglass"] .mg-tab .dot { display: none; }

html[data-theme="milkglass"] .mg-form { display: flex; flex-direction: column; gap: 14px; }
html[data-theme="milkglass"] .mg-field { display: flex; flex-direction: column; gap: 6px; }
html[data-theme="milkglass"] .mg-field label {
  font-size: 13px; font-weight: 600;
  color: var(--mg-text); letter-spacing: 0.03em;
}
html[data-theme="milkglass"] .mg-input-wrap {
  position: relative;
  display: flex; align-items: center;
}
html[data-theme="milkglass"] .mg-input-wrap > input,
html[data-theme="milkglass"] .mg-input-wrap > select {
  width: 100%;
  padding-left: 42px !important;
}
html[data-theme="milkglass"] .mg-input-wrap .prefix-ico {
  position: absolute;
  left: 14px;
  font-size: 15px;
  opacity: 0.75;
  pointer-events: none;
}

/* 5.11 Pagination / empty / loading */
html[data-theme="milkglass"] .pagination {
  display: flex; justify-content: center;
  gap: 6px; margin-top: 1rem; flex-wrap: wrap;
}
html[data-theme="milkglass"] .pagination button {
  padding: 7px 12px;
  border: 1px solid var(--mg-border-normal);
  border-radius: var(--mg-r-sm);
  background: var(--mg-glass-1);
  cursor: pointer;
  font-size: 12.5px;
  color: var(--mg-text);
  transition: all var(--mg-t-ui) var(--mg-ease);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
html[data-theme="milkglass"] .pagination button:hover { background: var(--mg-glass-2); }
html[data-theme="milkglass"] .pagination button.active {
  background: var(--mg-grad-solid);
  color: #fff;
  border-color: rgba(255,255,255,0.55);
  box-shadow: var(--mg-sh-sm), 0 0 0 2px var(--mg-select-ring),
              inset 0 1px 0 rgba(255,255,255,0.55);
  text-shadow: 0 1px 0 rgba(120, 80, 110, 0.18);
}
html[data-theme="milkglass"] .pagination button:disabled { opacity: 0.4; cursor: not-allowed; }

html[data-theme="milkglass"] .empty {
  text-align: center; padding: 2rem;
  color: var(--mg-text-3); font-size: 13px;
}
html[data-theme="milkglass"] .loading {
  text-align: center; padding: 2rem;
  color: var(--mg-text-2);
}

/* 5.12 mgAlert / divider / card-title/sub */
html[data-theme="milkglass"] .mg-alert {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--mg-r-md);
  background: var(--mg-glass-2);
  border: 1px solid var(--mg-glass-line);
  box-shadow: var(--mg-sh-sm), var(--mg-sh-glow);
}
@media (min-width: 769px) {
  html[data-theme="milkglass"] .mg-alert {
    backdrop-filter: blur(var(--mg-glass-blur)) saturate(150%);
    -webkit-backdrop-filter: blur(var(--mg-glass-blur)) saturate(150%);
  }
}
html[data-theme="milkglass"] .mg-alert[data-level="danger"] {
  background: linear-gradient(150deg, #f2d5dd, #ecd0d7);
  color: var(--mg-error-ink);
  border-color: rgba(236, 208, 215, 0.75);
}
html[data-theme="milkglass"] .mg-alert[data-level="info"] {
  background: linear-gradient(150deg, #e0ecf8, #d1dfef);
  color: var(--mg-info-ink);
  border-color: rgba(209, 223, 239, 0.75);
}
html[data-theme="milkglass"] .mg-alert .dot {
  flex: 0 0 8px;
  width: 8px; height: 8px; margin-top: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.6);
}
html[data-theme="milkglass"] .mg-alert .body { flex: 1; font-size: 13.5px; line-height: 1.65; }
html[data-theme="milkglass"] .mg-alert .body p { margin: 0; }

html[data-theme="milkglass"] .card-title {
  font-family: "Noto Serif SC", serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
  background: var(--mg-grad-title);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
html[data-theme="milkglass"] .card-sub {
  color: var(--mg-text-2);
  font-size: 13px;
  letter-spacing: 0.04em;
  margin-bottom: 20px;
}

html[data-theme="milkglass"] .divider,
html[data-theme="milkglass"] .mg-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(180, 160, 200, 0.45), transparent);
  margin: 18px 0;
}

/* 工具类 */
html[data-theme="milkglass"] .text-muted { color: var(--mg-text-2) !important; }