/* ==========================================================================
   未花的宝盒 · 双色主题（深色 / 浅色） + 移动端适配
   --------------------------------------------------------------------------
   本文件必须放在 portal.css 之后引入（靠层叠顺序覆盖，尽量少用 !important）。
   结构：
     1. 浅色主题变量
     2. 浅色：背景层与可读性
     3. 浅色：卡片 / 文字 / 表单 / 按钮 / 提示
     4. 浅色：光环
     5. 主题切换按钮（两种主题通用）
     6. 移动端适配（1024 / 768 / 480 / 360 + 安全区 + 横屏矮屏）
     7. 触屏（无 hover）兜底
     8. 无 backdrop-filter 降级
   ========================================================================== */

/* ==========================================================================
   1. 浅色主题变量
   —— 只覆盖与「明暗」相关的变量；品牌色（--pink / --gold / --violet …）
      保持不变，按钮渐变依旧是浅粉金配上深墨字，对比度本来就够。
   ========================================================================== */
html[data-theme="light"] {
  color-scheme: light;

  /* 底色：偏暖的白紫，避免纯白刺眼 */
  --ink:        #f7eff5;
  --plum:       #f0e6f0;
  --plum-2:     #e9dcea;

  /* 文字：深紫灰 —— 在 #fff 上 contrast 约 14:1 / 9:1 / 6.6:1，
     三档都满足 WCAG AA（正文 4.5:1，大字 3:1） */
  --text:       #2a1d33;
  --text-dim:   #4f3d5c;
  --text-mute:  #67547b;

  /* 毛玻璃：白色半透明 */
  --glass:      rgba(255, 253, 255, 0.82);
  --glass-2:    rgba(255, 253, 255, 0.68);

  /* 描边：深色细边，代替深色主题下的浅色描边 */
  --line:       rgba(74, 44, 96, 0.16);
  --line-soft:  rgba(74, 44, 96, 0.10);

  /* 状态色：浅底上需要更深，否则「提示红 / 在线绿」会糊掉 */
  --danger:     #b32d47;
  --ok:         #1f7a53;

  /* 浅色专用辅助色（不覆盖品牌变量，只在具体规则里使用） */
  --accent-ink: #a8467a;   /* 强调文字：深玫瑰 */
  --gold-ink:   #8a6a1c;   /* 金色文字：暗金（白底上 ≈4.6:1） */
  --halo-line:  #b8668f;   /* 光环描边：偏深的粉紫 */
  --halo-fill:  #9b6bb8;   /* 光环填充：偏深的紫 */
}

/* ==========================================================================
   2. 浅色：背景层与可读性
   —— 深色主题靠「压暗」保证文字清晰；浅色主题反过来，
      靠一层偏白的柔化遮罩 + 降饱和，把插画压成淡淡的底纹，
      既不糊成一片，也不抢卡片的注意力。
   ========================================================================== */

/* 插画本体：略降饱和 / 降对比，偏高光，避免大面积纯白过曝 */
html[data-theme="light"] .bg__layer {
  filter: saturate(0.84) contrast(0.95) brightness(1.03);
}

/* 登录页遮罩：中央偏白柔化，底部略实一点兜住页脚文字 */
html[data-theme="light"] .bg__veil {
  background:
    radial-gradient(100% 72% at 50% 0%, rgba(255, 253, 255, 0.62) 0%, rgba(255, 250, 253, 0.20) 48%, transparent 66%),
    radial-gradient(92% 70% at 14% 82%, rgba(255, 238, 247, 0.52) 0%, transparent 58%),
    radial-gradient(120% 100% at 50% 106%, rgba(255, 255, 255, 0.92) 0%, transparent 64%),
    linear-gradient(180deg,
      rgba(255, 252, 254, 0.70) 0%,
      rgba(253, 246, 251, 0.62) 38%,
      rgba(255, 255, 255, 0.88) 100%);
}

/* 启动台遮罩：卡片密集，压得更白一些 */
html[data-theme="light"] .bg__veil--launcher {
  background:
    radial-gradient(120% 82% at 50% 0%, rgba(255, 255, 255, 0.70) 0%, transparent 58%),
    radial-gradient(110% 90% at 50% 108%, rgba(255, 255, 255, 0.94) 0%, transparent 62%),
    linear-gradient(180deg,
      rgba(255, 252, 254, 0.82) 0%,
      rgba(252, 246, 252, 0.76) 45%,
      rgba(255, 255, 255, 0.92) 100%);
}

/* 极光光斑：screen 混合在浅底上会直接消失，改成 multiply 做柔和晕染 */
html[data-theme="light"] .aurora {
  opacity: 0.20;
}
html[data-theme="light"] .aurora__blob {
  mix-blend-mode: multiply;
}

/* 颗粒：overlay 在浅底上几乎无感，改用 multiply 保留一点纸感 */
html[data-theme="light"] .bg__grain {
  mix-blend-mode: multiply;
  opacity: 0.045;
}

/* 粒子画布由 bg.js 绘制浅粉/浅金/近白小点，浅底上会看不见；
   用 multiply 混合把浅色粒子压成可见的彩点（不改 JS） */
html[data-theme="light"] .motes {
  mix-blend-mode: multiply;
  opacity: 0.55;
  filter: saturate(1.35) brightness(0.96);
}

/* 浅色下滚动条也走浅色（html 自身的滚动条要写在 html 上，不带空格） */
html[data-theme="light"]::-webkit-scrollbar-track,
html[data-theme="light"] ::-webkit-scrollbar-track {
  background: rgba(74, 44, 96, 0.06);
}
html[data-theme="light"]::-webkit-scrollbar-thumb,
html[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(208, 104, 148, 0.55), rgba(123, 92, 184, 0.55));
  background-clip: padding-box;
}
html[data-theme="light"]::-webkit-scrollbar-thumb:hover,
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(176, 70, 124, 0.72);
  background-clip: padding-box;
}

html[data-theme="light"] ::selection {
  background: rgba(200, 90, 140, 0.22);
  color: #2a1d33;
}

/* ==========================================================================
   3. 浅色：卡片 / 文字 / 表单 / 按钮 / 提示
   ========================================================================== */

/* --- 毛玻璃卡片 --- */
html[data-theme="light"] .glass {
  background: var(--glass);
  border-color: var(--line);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.92) inset,
    0 2px 8px -4px rgba(72, 32, 88, 0.12),
    0 18px 48px -22px rgba(72, 32, 88, 0.30);
}

/* 流动渐变描边：浅底上要压深一档才看得出 */
html[data-theme="light"] .glass--ring::before {
  background: conic-gradient(from var(--ring-angle, 0deg),
    rgba(208, 104, 148, 0.58), rgba(186, 148, 58, 0.46), rgba(123, 92, 184, 0.58),
    rgba(74, 150, 176, 0.38), rgba(208, 104, 148, 0.58));
  opacity: 0.72;
}

html[data-theme="light"] .glass--toplight::after {
  background: linear-gradient(90deg,
    transparent, rgba(208, 104, 148, 0.52), rgba(186, 148, 58, 0.42), transparent);
}

/* --- 标题文字 --- */
/* 原来的浅粉→浅金→浅紫渐变在白底上会糊掉，换成深玫瑰→暗金→深紫 */
html[data-theme="light"] .grad-text {
  background: linear-gradient(100deg, #b0467c 0%, #9a7120 46%, #6a4aa8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 20px rgba(176, 70, 124, 0.16);
}

html[data-theme="light"] .kicker {
  color: var(--gold-ink);
}

/* --- 列表 / 卡片细节 --- */
html[data-theme="light"] .tile {
  background: rgba(255, 253, 255, 0.66);
  border-color: var(--line-soft);
  box-shadow: 0 10px 26px -20px rgba(72, 32, 88, 0.38);
}

html[data-theme="light"] .tile:hover {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(208, 104, 148, 0.46);
  box-shadow:
    0 18px 42px -22px rgba(72, 32, 88, 0.42),
    0 0 28px -14px rgba(208, 104, 148, 0.55);
}

html[data-theme="light"] .tile::before {
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%),
    rgba(214, 102, 143, 0.16), transparent 70%);
}

html[data-theme="light"] .tile::after {
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.72), transparent);
}

html[data-theme="light"] .tile__icon {
  color: var(--accent-ink);
  background: linear-gradient(140deg, rgba(247, 168, 196, 0.36), rgba(169, 139, 220, 0.28));
  border-color: rgba(74, 44, 96, 0.10);
}

html[data-theme="light"] .tile__go {
  color: var(--text-mute);
}
html[data-theme="light"] .tile:hover .tile__go {
  color: var(--accent-ink);
}

/* 分组线与页脚分隔线：浅底线要压成深色 */
html[data-theme="light"] .group__line {
  background: linear-gradient(90deg, rgba(74, 44, 96, 0.22), transparent);
}

/* 顶栏小绿点：深色下自带发光，浅色下改成实心 + 轻投影 */
html[data-theme="light"] .topbar__dot {
  box-shadow: 0 0 8px rgba(31, 122, 83, 0.55);
}

/* --- 表单 --- */
html[data-theme="light"] .field__box {
  background: rgba(255, 255, 255, 0.74);
  border-color: rgba(74, 44, 96, 0.16);
}

html[data-theme="light"] .field__box:focus-within {
  border-color: rgba(208, 104, 148, 0.72);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(208, 104, 148, 0.14),
              0 10px 24px -12px rgba(176, 70, 124, 0.38);
}

html[data-theme="light"] .field__box:focus-within .field__icon {
  color: var(--accent-ink);
}

/* 占位符在半透明白底上要再实一点，否则对比不足 */
html[data-theme="light"] .field__input::placeholder {
  opacity: 0.88;
}

/* 自动填充：沿用浅底，否则 Chrome 会刷成深黄/深底 */
html[data-theme="light"] .field__input:-webkit-autofill,
html[data-theme="light"] .field__input:-webkit-autofill:hover,
html[data-theme="light"] .field__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
}

html[data-theme="light"] .field__eye:hover {
  color: var(--accent-ink);
  background: rgba(74, 44, 96, 0.08);
}

/* --- 按钮 --- */
html[data-theme="light"] .btn-ghost {
  background: rgba(255, 255, 255, 0.62);
  border-color: var(--line);
  color: var(--text-dim);
}

html[data-theme="light"] .btn-ghost:hover {
  color: var(--accent-ink);
  border-color: rgba(208, 104, 148, 0.55);
  background: rgba(255, 238, 246, 0.92);
  box-shadow: 0 8px 20px -10px rgba(176, 70, 124, 0.5);
}

/* 主按钮：品牌渐变保留，只把外发光收敛一点 */
html[data-theme="light"] .btn {
  box-shadow: 0 12px 28px -14px rgba(176, 70, 124, 0.65);
}
html[data-theme="light"] .btn:hover:not(:disabled) {
  box-shadow: 0 18px 38px -14px rgba(176, 70, 124, 0.8);
}

/* --- 提示 / 状态 --- */
html[data-theme="light"] .alert {
  color: var(--danger);
  background: rgba(179, 45, 71, 0.07);
  border-color: rgba(179, 45, 71, 0.26);
}

html[data-theme="light"] .capslock {
  color: var(--gold-ink);
}

html[data-theme="light"] .foot.is-online .foot__dot {
  box-shadow: 0 0 8px rgba(31, 122, 83, 0.5);
}
html[data-theme="light"] .foot.is-offline .foot__dot {
  box-shadow: 0 0 8px rgba(179, 45, 71, 0.45);
}

/* ==========================================================================
   4. 浅色：光环
   —— 光环的渐变写在 HTML 的内联 SVG 里（#hg / #hgm），CSS 无法换色，
      所以：① 用 CSS 直接覆盖 fill / stroke（覆盖 presentation attribute 是合法的）
            ② 大幅减弱 drop-shadow 发光，换成偏深的粉紫描边
   ========================================================================== */

/* 三条轨道（含虚线粗描边）统一换成偏深粉紫，浅底上才看得见 */
html[data-theme="light"] .halo__svg ellipse {
  stroke: var(--halo-line);
}

html[data-theme="light"] .halo__svg .halo__core path,
html[data-theme="light"] .halo__svg .halo__core ellipse {
  fill: var(--halo-fill);
}

html[data-theme="light"] .halo__svg .halo__spark use,
html[data-theme="light"] .halo__svg .halo__dot {
  fill: var(--halo-fill);
}

/* 呼吸柔光球：浅底上会变成一团奶白色。
   它的透明度由 haloPulse 动画控制，直接写 opacity 会被动画盖掉，
   所以用 filter 再压一层（与动画叠乘，呼吸感仍然保留） */
html[data-theme="light"] .halo__pulse {
  filter: opacity(0.42);
}

/* 光环整体：发光几乎关掉，只留一点贴合描边的轻影 */
html[data-theme="light"] .halo--login {
  filter:
    drop-shadow(0 1px 2px rgba(120, 60, 96, 0.28))
    drop-shadow(0 0 10px rgba(184, 102, 143, 0.26));
}

html[data-theme="light"] .halo--login::before {
  background: radial-gradient(circle at 50% 50%,
    rgba(247, 168, 196, 0.16) 0%,
    rgba(169, 139, 220, 0.09) 40%,
    transparent 70%);
  filter: blur(16px);
}

/* 顶栏小光环同样削发光 */
html[data-theme="light"] .topbar__halo .halo__svg {
  filter: drop-shadow(0 0 6px rgba(184, 102, 143, 0.22));
}

/* ==========================================================================
   5. 主题切换按钮（DOM 由 theme.js 动态插入）
   ========================================================================== */
.theme-toggle {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--glass-2);
  color: var(--text-dim);
  cursor: pointer;
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-tap-highlight-color: transparent;
  transition: color .24s var(--ease), border-color .24s var(--ease),
              background .24s var(--ease), box-shadow .24s var(--ease),
              transform .2s var(--ease);
}

.theme-toggle:hover {
  color: var(--pink);
  border-color: rgba(247, 168, 196, 0.55);
  box-shadow:
    0 0 0 1px rgba(247, 168, 196, 0.18) inset,
    0 0 20px -4px rgba(247, 168, 196, 0.68);
  transform: translateY(-1px);
}

.theme-toggle:active {
  transform: translateY(0) scale(.95);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* 两个图标叠在一起，靠透明度 + 缩放 + 旋转做平滑切换 */
.theme-toggle__sun,
.theme-toggle__moon {
  position: absolute;
  width: 19px;
  height: 19px;
  display: block;
  transform-origin: 50% 50%;
  transition: opacity .30s var(--ease),
              transform .46s var(--ease-back),
              filter .30s var(--ease);
}

/* 深色主题（默认）：显示太阳 —— 点一下切到浅色 */
.theme-toggle__sun  { opacity: 1; transform: scale(1) rotate(0deg); }
.theme-toggle__moon { opacity: 0; transform: scale(.55) rotate(-50deg); }

/* 浅色主题：显示月亮 —— 点一下切回深色 */
html[data-theme="light"] .theme-toggle__sun  { opacity: 0; transform: scale(.55) rotate(50deg); }
html[data-theme="light"] .theme-toggle__moon { opacity: 1; transform: scale(1) rotate(0deg); }

/* 浅色主题下按钮本身也要跟着变浅 */
html[data-theme="light"] .theme-toggle {
  background: rgba(255, 255, 255, 0.72);
  color: var(--text-dim);
}
html[data-theme="light"] .theme-toggle:hover {
  color: var(--accent-ink);
  border-color: rgba(208, 104, 148, 0.55);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.9) inset,
    0 6px 18px -10px rgba(176, 70, 124, 0.55);
}

/* 登录页：按钮被插在 .card 里 .foot 之前，居中并留出间距 */
body.page-login .card > .theme-toggle {
  display: grid;
  margin: 20px auto 0;
}

/* 启动台：插在 .topbar__spacer 之后，和「退出」同一行（位置由 flex 顺序决定） */
body.page-launcher .topbar > .theme-toggle {
  margin: 0;
}

/* ==========================================================================
   6. 移动端适配
   ========================================================================== */

/* ---------- 6.1 平板：启动台固定 3 列 ---------- */
@media (max-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
}

/* ---------- 6.2 手机横屏 / 小平板 ---------- */
@media (max-width: 768px) {
  /* 小屏上让页面自己滚，别被 height:100% 卡死内容 */
  html, body { height: auto; min-height: 100%; }
  body { -webkit-overflow-scrolling: touch; }
  body.page-login { overflow-y: auto; overflow-x: hidden; }

  .stage,
  .shell {
    min-height: 100vh;
    min-height: 100dvh;
  }

  /* 启动台：安全区内边距 */
  .shell {
    padding:
      calc(16px + env(safe-area-inset-top))
      calc(15px + env(safe-area-inset-right))
      calc(24px + env(safe-area-inset-bottom))
      calc(15px + env(safe-area-inset-left));
  }

  /* 登录页：安全区内边距 */
  .stage--login {
    padding:
      calc(28px + env(safe-area-inset-top))
      calc(16px + env(safe-area-inset-right))
      calc(30px + env(safe-area-inset-bottom))
      calc(16px + env(safe-area-inset-left));
    gap: 18px;
  }

  /* 网格 2 列 */
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  /* 顶栏换行布局 */
  .topbar {
    flex-wrap: wrap;
    gap: 10px;
    padding: 11px 14px;
    margin-bottom: 20px;
    border-radius: 16px;
  }
  .topbar__brand { flex: 1 1 100%; gap: 11px; }
  .topbar__spacer { display: none; }          /* 换行后不再需要占位 */
  .topbar__title { font-size: 16.5px; }
  .topbar__sub { font-size: 10px; letter-spacing: .14em; }
  .topbar__halo { width: 40px; height: 40px; }
  .topbar__halo .halo { inset: -11px; }
  .topbar__meta { font-size: 11.5px; margin-inline-end: auto; }

  .group { margin-bottom: 22px; }
  .group__head { margin-bottom: 11px; gap: 10px; }
  .group__title { font-size: 12px; letter-spacing: .16em; }

  .tile {
    padding: 15px 14px 14px;
    gap: 9px;
    border-radius: 17px;
    /* 不在此设置 min-height：卡片本身远高于 44px，
       且启动台另有 .lp-card 的 min-height，避免互相覆盖 */
  }
  .tile__icon { width: 38px; height: 38px; border-radius: 12px; }
  .tile__icon svg { width: 20px; height: 20px; }
  .tile__name { font-size: 14px; }
  .tile__desc { font-size: 11.5px; }
  .tile__go { top: 12px; right: 12px; opacity: .55; transform: none; }

  /* 页脚：允许换行并让出底部安全区 */
  .footbar {
    padding-top: 16px;
    padding-bottom: env(safe-area-inset-bottom);
    gap: 6px 10px;
    font-size: 11px;
  }

  /* 触控目标：退出按钮、眼睛图标、主题切换全部 ≥ 44×44 */
  .btn-ghost {
    height: 44px;
    min-width: 44px;
    padding: 0 14px;
    font-size: 12.5px;
  }
  .field__eye {
    width: 44px;
    height: 44px;
    border-radius: 12px;
  }
  .field__eye svg { width: 20px; height: 20px; }
  .theme-toggle { width: 44px; height: 44px; }
  .theme-toggle__sun,
  .theme-toggle__moon { width: 20px; height: 20px; }

  /* iOS 聚焦放大的老问题：输入框不到 16px 就会被强制缩放 */
  .field__input { font-size: 16px; padding: 13px 12px; }

  .brand { margin-bottom: 20px; }
  .brand__title { font-size: 27px; }
  .brand__sub { font-size: 12.5px; }
  .alert { font-size: 12.5px; }
}

/* ---------- 6.3 手机竖屏 ---------- */
@media (max-width: 480px) {
  .stage--login {
    padding:
      calc(26px + env(safe-area-inset-top))
      calc(13px + env(safe-area-inset-right))
      calc(28px + env(safe-area-inset-bottom))
      calc(13px + env(safe-area-inset-left));
    gap: 16px;
  }

  /* 登录卡片几乎满宽 */
  .card {
    max-width: 100%;
    padding: 56px 18px 18px;
    border-radius: 22px;
  }

  /* 光环缩小并上移，避免压住标题 */
  .halo--login {
    top: -108px;
    width: 144px;
    height: 144px;
    margin-left: -72px;
  }

  .brand__title { font-size: 24px; letter-spacing: .08em; }
  .brand__sub { font-size: 12px; line-height: 1.7; }
  .kicker { font-size: 9.5px; letter-spacing: .2em; }
  .form { gap: 13px; }
  .foot { font-size: 11px; margin-top: 18px; }
  .credit { font-size: 10.5px; }

  /* 卡片更紧凑 */
  .grid { gap: 10px; }
  .tile {
    padding: 13px 12px 12px;
    gap: 8px;
    border-radius: 15px;
  }
  .tile__icon { width: 34px; height: 34px; border-radius: 11px; }
  .tile__icon svg { width: 18px; height: 18px; }
  .tile__name { font-size: 13px; }
  .tile__desc { font-size: 10.5px; line-height: 1.45; }
  .tile__go { width: 15px; height: 15px; }

  /* 隐藏次要装饰，给内容让位 */
  .bg__grain { display: none; }
  .aurora { opacity: 0.13; }
  .motes { opacity: 0.45; }
  html[data-theme="light"] .aurora { opacity: 0.10; }
  html[data-theme="light"] .motes { opacity: 0.38; }

  .topbar { padding: 10px 12px; border-radius: 15px; }
  .topbar__title { font-size: 15.5px; }
  .topbar__meta { font-size: 11px; }
  .btn-ghost { height: 44px; padding: 0 12px; }
}

/* ---------- 6.4 超窄屏 ---------- */
@media (max-width: 360px) {
  .grid { grid-template-columns: 1fr; }
  .tile { padding: 14px; gap: 9px; }
  .tile__go { top: 14px; right: 14px; }
  .card { padding: 52px 15px 16px; }
  .topbar__title { font-size: 15px; }
  .brand__title { font-size: 22px; }
  .footbar { font-size: 10.5px; }
}

/* ---------- 6.5 横屏矮屏：登录卡片允许滚动 ---------- */
@media (max-height: 520px) and (orientation: landscape) {
  html, body { height: auto; min-height: 100%; }
  body.page-login { overflow-y: auto; }

  .stage--login {
    justify-content: flex-start;
    min-height: auto;
    padding-top: calc(18px + env(safe-area-inset-top));
    padding-bottom: calc(22px + env(safe-area-inset-bottom));
  }
  .card { padding-top: 26px; }
  .halo--login { display: none; }        /* 矮屏放不下光环，直接隐藏 */
  .brand { margin-bottom: 14px; }
  .topbar { margin-bottom: 14px; }
}

/* ==========================================================================
   7. 触屏（无 hover）兜底
   —— launcher.js 会在 pointermove 里把 3D 倾斜写进内联 style，
      触摸设备上点一下就会永久卡在倾斜状态。只有 !important 能盖过内联样式，
      因此这里对 transform 使用了 !important（唯一一处，原因见上）。
      副作用：卡片入场动画只剩透明度淡入，不再上移 —— 移动端反而更省电。
   ========================================================================== */
@media (hover: none) {
  .tile { transform: none !important; }

  .tile:hover,
  .tile:active {
    border-color: var(--line-soft);
    box-shadow: none;
  }
  html[data-theme="light"] .tile:hover {
    background: rgba(255, 253, 255, 0.66);
    border-color: var(--line-soft);
    box-shadow: 0 10px 26px -20px rgba(72, 32, 88, 0.38);
  }

  .tile:hover::before { opacity: 0; }
  .tile:hover::after { left: -120%; }
  .tile:hover .tile__icon { transform: none; box-shadow: none; }
  .tile:hover .tile__name,
  .tile:hover .tile__desc { transform: none; }
  .tile:hover .tile__go { transform: none; }

  /* 触摸反馈改用按下缩放 */
  .tile:active { transform: scale(.985) !important; }

  .btn:hover:not(:disabled) { transform: none; }
  .btn:hover:not(:disabled)::after { left: -140%; }
  .btn:active:not(:disabled) { transform: scale(.99); }

  .btn-ghost:hover,
  .theme-toggle:hover { transform: none; }
  .theme-toggle:active { transform: scale(.94); }
}

/* ==========================================================================
   8. 不支持 backdrop-filter 的浏览器：降级为不透明背景
   ========================================================================== */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .glass            { background: rgba(20, 13, 29, 0.94); }
  .tile             { background: rgba(34, 23, 46, 0.90); }
  .field__box       { background: rgba(10, 7, 16, 0.82); }
  .btn-ghost        { background: rgba(255, 255, 255, 0.07); }
  .topbar           { background: rgba(20, 13, 29, 0.94); }
  .theme-toggle     { background: rgba(24, 16, 34, 0.92); }

  html[data-theme="light"] .glass        { background: #fdfaff; }
  html[data-theme="light"] .tile         { background: #fbf8fd; }
  html[data-theme="light"] .field__box   { background: #ffffff; }
  html[data-theme="light"] .btn-ghost    { background: #ffffff; }
  html[data-theme="light"] .topbar       { background: #fdfaff; }
  html[data-theme="light"] .theme-toggle { background: #ffffff; }

  /* 没有毛玻璃就减少半透明遮罩，纯靠背景插画本身 */
  html[data-theme="light"] .bg__veil {
    background:
      radial-gradient(120% 100% at 50% 106%, rgba(255, 255, 255, 0.96) 0%, transparent 64%),
      linear-gradient(180deg, rgba(255, 252, 254, 0.82) 0%, rgba(255, 255, 255, 0.92) 100%);
  }
  html[data-theme="light"] .bg__veil--launcher {
    background:
      radial-gradient(110% 90% at 50% 108%, rgba(255, 255, 255, 0.98) 0%, transparent 62%),
      linear-gradient(180deg, rgba(255, 252, 254, 0.90) 0%, rgba(255, 255, 255, 0.96) 100%);
  }
}

/* ==========================================================================
   修补（2026-10-22 第二轮截图自查发现）
   ========================================================================== */

/* 1) 小屏横向溢出：卡片右侧被切 */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 768px) {
  .stage, .stage--login {
    width: 100%;
    box-sizing: border-box;
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }

  .card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* 2) 主题按钮保证 44x44 触控目标 */
.theme-toggle {
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
}
/* ==========================================================================
   启动台浅色覆盖：launcher-pro.css 里有 4 处硬编码 rgba(255,255,255,...)
   在白底上几乎不可见，这里统一改成深色半透明
   ========================================================================== */
html[data-theme="light"] .lp-chip,
html[data-theme="light"] .lp-act,
html[data-theme="light"] .lp-count,
html[data-theme="light"] .lp-ver {
  background: rgba(42, 29, 51, 0.06);
  border-color: rgba(42, 29, 51, 0.16);
  color: #4f3d5c;
}

html[data-theme="light"] .lp-act:hover {
  background: rgba(42, 29, 51, 0.10);
  border-color: rgba(184, 102, 143, 0.42);
}

html[data-theme="light"] .lp-badge,
html[data-theme="light"] .lp-path {
  color: #67547b;
}