/* ============================================================
   变体：玻璃拟态 (Glassmorphism)
   纯视觉覆盖层，结构与逻辑完全复用 app.css / app.js
   启用方式：<html data-style="glass">
   支持日间 / 夜间，由 data-theme 决定
   ============================================================ */

/* ---------- 夜间玻璃 ---------- */
[data-style="glass"] {
  --bg: #100e24;
  --bg-2: #1b1840;
  --modal: rgba(38, 34, 74, .78);
  --panel: rgba(255, 255, 255, .075);
  --panel-2: rgba(255, 255, 255, .10);
  --panel-glass: linear-gradient(135deg,
                  rgba(255, 255, 255, .155) 0%,
                  rgba(255, 255, 255, .055) 48%,
                  rgba(255, 255, 255, .095) 100%);
  --line: rgba(255, 255, 255, .17);
  --line-2: rgba(255, 255, 255, .32);
  --text: #f2f4fb;
  --dim: #c6cbe2;
  --muted: #9aa2c4;

  --cyan: #67e8f9;
  --violet: #c4b5fd;
  --blue: #93c5fd;
  --pink: #f9a8d4;
  --green: #6ee7b7;
  --amber: #fcd34d;

  /* 玻璃三件套：顶边内高光 / 内描边 / 外阴影基色 */
  --glass-hi: rgba(255, 255, 255, .26);
  --glass-ring: rgba(255, 255, 255, .035);
  --glass-sh: 10, 6, 34;

  --radius: 22px;
  --shadow: 0 26px 58px -28px rgba(var(--glass-sh), .92);
}

/* ---------- 日间玻璃 ---------- */
[data-theme="light"][data-style="glass"] {
  --bg: #e8edfb;
  --bg-2: #fbfcff;
  --modal: rgba(255, 255, 255, .82);
  --panel: rgba(255, 255, 255, .52);
  --panel-2: rgba(255, 255, 255, .66);
  --panel-glass: linear-gradient(135deg,
                  rgba(255, 255, 255, .92) 0%,
                  rgba(255, 255, 255, .58) 48%,
                  rgba(255, 255, 255, .78) 100%);
  --line: rgba(255, 255, 255, .92);
  --line-2: rgba(100, 116, 139, .42);
  --text: #1a1638;
  --dim: #4a4670;
  --muted: #6f6b96;

  --cyan: #0e7490;
  --violet: #6d28d9;
  --blue: #1d4ed8;
  --pink: #be185d;
  --green: #047857;
  --amber: #b45309;

  --glass-hi: rgba(255, 255, 255, .95);
  --glass-ring: rgba(255, 255, 255, .55);
  --glass-sh: 76, 63, 158;

  --shadow: 0 26px 58px -30px rgba(var(--glass-sh), .34);
}

/* ============================================================
   背景：柔和色团取代粒子与网格
   ============================================================ */
[data-style="glass"] .aurora { filter: blur(72px); }

[data-style="glass"] .blob {
  border-radius: 50%;
  mix-blend-mode: normal;
  opacity: .62;
}
[data-style="glass"] .blob-1 {
  width: 38vw; height: 38vw; left: -6vw; top: -8vw;
  background: #7c3aed;
  animation: gdrift1 34s ease-in-out infinite;
}
[data-style="glass"] .blob-2 {
  width: 32vw; height: 32vw; right: -4vw; top: 6vw;
  background: #ec4899;
  animation: gdrift2 40s ease-in-out infinite;
}
[data-style="glass"] .blob-3 {
  width: 30vw; height: 30vw; left: 30vw; top: 26vw;
  background: #06b6d4;
  opacity: .5;
  animation: gdrift3 46s ease-in-out infinite;
}

[data-theme="light"][data-style="glass"] .blob { opacity: .56; }
[data-theme="light"][data-style="glass"] .blob-1 { background: #a78bfa; }
[data-theme="light"][data-style="glass"] .blob-2 { background: #f9a8d4; }
[data-theme="light"][data-style="glass"] .blob-3 { background: #7dd3fc; opacity: .48; }

@keyframes gdrift1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(6vw, 5vw, 0) scale(1.1); }
}
@keyframes gdrift2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-5vw, 7vw, 0) scale(1.08); }
}
@keyframes gdrift3 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(5vw, -6vw, 0) scale(1.14); }
}

[data-style="glass"] .mesh-grid,
[data-style="glass"] #particles { display: none; }

[data-style="glass"] .vignette {
  background: radial-gradient(ellipse 92% 72% at 50% 28%, transparent 52%, rgba(8, 5, 26, .6) 100%);
}
[data-theme="light"][data-style="glass"] .vignette {
  background: radial-gradient(ellipse 92% 72% at 50% 28%, transparent 60%, rgba(232, 237, 251, .8) 100%);
}

[data-style="glass"] .noise { opacity: .022; }
[data-theme="light"][data-style="glass"] .noise { opacity: .014; }

[data-style="glass"] .scroll-progress {
  background: linear-gradient(90deg, #67e8f9, #c4b5fd 55%, #f9a8d4);
  box-shadow: 0 0 10px rgba(196, 181, 253, .5);
}
[data-theme="light"][data-style="glass"] .scroll-progress {
  background: linear-gradient(90deg, #22d3ee, #8b5cf6 55%, #ec4899);
  box-shadow: 0 0 8px rgba(139, 92, 246, .4);
}

/* ============================================================
   玻璃基底：所有浮层统一的三件套
   ============================================================ */
[data-style="glass"] .card,
[data-style="glass"] .stats,
[data-style="glass"] .search-bar,
[data-style="glass"] .pill,
[data-style="glass"] .palette-box,
[data-style="glass"] .wx-panel,
[data-style="glass"] .toast {
  background: var(--panel-glass);
  border: 1px solid var(--line);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 0 0 1px var(--glass-ring),
    0 24px 54px -28px rgba(var(--glass-sh), .88);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
          backdrop-filter: blur(30px) saturate(180%);
}

/* ---------- 卡片：厚玻璃 + 克制动效 ---------- */
[data-style="glass"] .card {
  border-radius: var(--radius);
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
[data-style="glass"] .card::before { opacity: 0 !important; }
[data-style="glass"] .card::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
  transition: opacity .35s ease;
}
[data-theme="light"][data-style="glass"] .card::after { background: none; }
[data-style="glass"] .card:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, .34);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    0 32px 68px -28px rgba(var(--glass-sh), .95);
}
[data-theme="light"][data-style="glass"] .card:hover {
  border-color: rgba(255, 255, 255, 1);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 0 0 1px var(--glass-ring),
    0 30px 62px -26px rgba(var(--glass-sh), .4);
}

[data-style="glass"] .card-ico {
  border-radius: 11px;
  background: linear-gradient(140deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05));
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
[data-theme="light"][data-style="glass"] .card-ico {
  background: linear-gradient(140deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .6));
}
[data-style="glass"] .i-cyan,
[data-style="glass"] .i-violet,
[data-style="glass"] .i-blue,
[data-style="glass"] .i-pink,
[data-style="glass"] .i-green,
[data-style="glass"] .i-amber { box-shadow: inset 0 1px 0 var(--glass-hi); }

/* ---------- 导航 ---------- */
[data-style="glass"] .nav.scrolled {
  background: rgba(22, 18, 48, .55);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
          backdrop-filter: blur(26px) saturate(170%);
}
[data-theme="light"][data-style="glass"] .nav.scrolled {
  background: rgba(255, 255, 255, .58);
}
[data-style="glass"] .cmd-trigger,
[data-style="glass"] .icon-btn {
  background: var(--panel-glass);
  border-color: var(--line);
  box-shadow: inset 0 1px 0 var(--glass-hi);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
          backdrop-filter: blur(20px) saturate(160%);
}
[data-style="glass"] .cmd-trigger:hover,
[data-style="glass"] .icon-btn:hover {
  border-color: rgba(255, 255, 255, .34);
  background: linear-gradient(135deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .08));
}
[data-theme="light"][data-style="glass"] .cmd-trigger:hover,
[data-theme="light"][data-style="glass"] .icon-btn:hover {
  border-color: var(--line-2);
  background: linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .8));
}
[data-style="glass"] .nav-links a:hover { background: rgba(255, 255, 255, .12); color: var(--text); }
[data-theme="light"][data-style="glass"] .nav-links a:hover { background: rgba(255, 255, 255, .8); }

/* ---------- 下拉菜单 ---------- */
[data-style="glass"] .dd-menu {
  border-radius: 16px;
  -webkit-backdrop-filter: blur(32px) saturate(180%);
          backdrop-filter: blur(32px) saturate(180%);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    0 28px 60px -24px rgba(var(--glass-sh), .95);
}
[data-style="glass"] .dd-item:hover { background: rgba(255, 255, 255, .14); }
[data-theme="light"][data-style="glass"] .dd-item:hover { background: rgba(255, 255, 255, .85); }
[data-style="glass"] .dd-item[aria-selected="true"] {
  background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
}
[data-theme="light"][data-style="glass"] .dd-item[aria-selected="true"] {
  background: rgba(139, 92, 246, .14);
  box-shadow: inset 0 0 0 1px rgba(139, 92, 246, .3);
}

/* ---------- Hero ---------- */
[data-style="glass"] .grad {
  background: linear-gradient(100deg, #ffffff 0%, #e9d5ff 32%, #bfdbfe 60%, #fbcfe8 92%);
  -webkit-background-clip: text; background-clip: text;
}
[data-theme="light"][data-style="glass"] .grad {
  background: linear-gradient(100deg, #1e1b4b 0%, #6d28d9 34%, #0369a1 64%, #be185d 92%);
  -webkit-background-clip: text; background-clip: text;
}
[data-style="glass"] .stat-value,
[data-style="glass"] .clock-time {
  background: linear-gradient(180deg, #ffffff, #b9c0dc);
  -webkit-background-clip: text; background-clip: text;
}
[data-theme="light"][data-style="glass"] .stat-value,
[data-theme="light"][data-style="glass"] .clock-time {
  background: linear-gradient(180deg, #1a1638, #5b5688);
  -webkit-background-clip: text; background-clip: text;
}

/* ---------- 按钮 ---------- */
[data-style="glass"] .btn {
  background: var(--panel-glass);
  border-color: var(--line);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    0 12px 30px -18px rgba(var(--glass-sh), .9);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
          backdrop-filter: blur(20px) saturate(160%);
}
[data-style="glass"] .btn:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, .36);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    0 16px 34px -18px rgba(var(--glass-sh), .95);
}
[data-theme="light"][data-style="glass"] .btn:hover { border-color: var(--line-2); }

[data-style="glass"] .btn-primary {
  background: linear-gradient(125deg, #67e8f9, #a78bfa 52%, #f0abfc);
  border-color: rgba(255, 255, 255, .28);
  color: #17123a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 14px 32px -16px rgba(124, 58, 237, .7);
}
[data-style="glass"] .btn-primary:hover {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .58), 0 18px 38px -16px rgba(124, 58, 237, .8);
}
[data-theme="light"][data-style="glass"] .btn-primary {
  background: linear-gradient(125deg, #22d3ee, #8b5cf6 52%, #ec4899);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 14px 30px -16px rgba(124, 58, 237, .6);
}

/* ---------- 搜索 / 引擎 ---------- */
[data-style="glass"] .engine-tab {
  background: var(--panel-glass);
  border-color: var(--line);
  box-shadow: inset 0 1px 0 var(--glass-hi);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
[data-style="glass"] .engine-tab.active {
  background: linear-gradient(125deg, #67e8f9, #a78bfa);
  border-color: rgba(255, 255, 255, .3);
  color: #17123a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 10px 26px -14px rgba(124, 58, 237, .7);
}
[data-theme="light"][data-style="glass"] .engine-tab.active {
  background: linear-gradient(125deg, #22d3ee, #8b5cf6);
  color: #fff;
}
[data-style="glass"] .search-bar:focus-within {
  border-color: rgba(255, 255, 255, .4);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    0 0 0 4px rgba(196, 181, 253, .14);
}
[data-theme="light"][data-style="glass"] .search-bar:focus-within {
  border-color: rgba(139, 92, 246, .5);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 0 0 4px rgba(139, 92, 246, .12);
}

/* ---------- 统计条 ---------- */
[data-style="glass"] .stats { border-radius: var(--radius); }
[data-style="glass"] .stat-div { background: linear-gradient(180deg, transparent, var(--line), transparent); }

/* ---------- 表单 ---------- */
[data-style="glass"] .field,
[data-style="glass"] #note {
  background: rgba(255, 255, 255, .08);
  border-color: var(--line);
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
[data-theme="light"][data-style="glass"] .field,
[data-theme="light"][data-style="glass"] #note {
  background: rgba(255, 255, 255, .6);
  box-shadow: inset 0 1px 2px rgba(76, 63, 158, .12);
}
[data-style="glass"] .field:focus,
[data-style="glass"] #note:focus {
  border-color: rgba(196, 181, 253, .55);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 0 0 3px rgba(196, 181, 253, .13);
  background: rgba(255, 255, 255, .11);
}
[data-theme="light"][data-style="glass"] .field:focus,
[data-theme="light"][data-style="glass"] #note:focus {
  background: rgba(255, 255, 255, .85);
  border-color: rgba(139, 92, 246, .55);
  box-shadow: inset 0 1px 2px rgba(76, 63, 158, .1), 0 0 0 3px rgba(139, 92, 246, .13);
}

/* ---------- 进度条 / 勾选 ---------- */
[data-style="glass"] .bar {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 2px rgba(var(--glass-sh), .35);
}
[data-theme="light"][data-style="glass"] .bar {
  background: rgba(76, 63, 158, .12);
  border-color: rgba(255, 255, 255, .7);
}
[data-style="glass"] .bar i {
  background: linear-gradient(90deg, #67e8f9, #c4b5fd 55%, #f9a8d4);
  box-shadow: none;
}
[data-theme="light"][data-style="glass"] .bar i {
  background: linear-gradient(90deg, #22d3ee, #8b5cf6 55%, #ec4899);
}
[data-style="glass"] .tick {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .34);
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
[data-theme="light"][data-style="glass"] .tick {
  background: rgba(255, 255, 255, .75);
  border-color: var(--line-2);
}
[data-style="glass"] .todo-item.done .tick {
  background: linear-gradient(125deg, #67e8f9, #a78bfa);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45);
}
[data-theme="light"][data-style="glass"] .todo-item.done .tick {
  background: linear-gradient(125deg, #22d3ee, #8b5cf6);
  border-color: transparent;
}
[data-style="glass"] .todo-item:hover { background: rgba(255, 255, 255, .09); }
[data-theme="light"][data-style="glass"] .todo-item:hover { background: rgba(255, 255, 255, .6); }

/* ---------- 番茄钟 ---------- */
[data-style="glass"] .dial-track { stroke: rgba(255, 255, 255, .12); }
[data-theme="light"][data-style="glass"] .dial-track { stroke: rgba(76, 63, 158, .14); }
[data-style="glass"] .dial-fill {
  filter: drop-shadow(0 0 5px rgba(196, 181, 253, .45));
  transition: stroke-dashoffset .5s linear;
}
[data-theme="light"][data-style="glass"] .dial-fill { filter: drop-shadow(0 0 4px rgba(139, 92, 246, .35)); }
[data-style="glass"] .card.running {
  border-color: rgba(196, 181, 253, .45);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    0 0 0 1px rgba(196, 181, 253, .2),
    0 30px 62px -28px rgba(var(--glass-sh), .95);
}
[data-theme="light"][data-style="glass"] .card.running {
  border-color: rgba(139, 92, 246, .55);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    0 0 0 1px rgba(139, 92, 246, .22),
    0 30px 62px -28px rgba(var(--glass-sh), .4);
}

/* ---------- 快捷导航 ---------- */
[data-style="glass"] .link-item {
  background: var(--panel-glass);
  border-color: var(--line);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    0 14px 30px -20px rgba(var(--glass-sh), .9);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
          backdrop-filter: blur(24px) saturate(170%);
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
[data-style="glass"] .link-item:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, .34);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    0 22px 42px -20px rgba(var(--glass-sh), .95);
}
[data-theme="light"][data-style="glass"] .link-item:hover {
  border-color: #fff;
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 20px 40px -20px rgba(var(--glass-sh), .38);
}
[data-style="glass"] .link-item.add { border-style: dashed; }
[data-style="glass"] .link-item.add .link-icon { background: rgba(255, 255, 255, .09); }
[data-theme="light"][data-style="glass"] .link-item.add .link-icon { background: rgba(255, 255, 255, .7); }

/* ---------- 芯片 ---------- */
[data-style="glass"] .chip {
  background: rgba(255, 255, 255, .11);
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
[data-theme="light"][data-style="glass"] .chip { background: rgba(255, 255, 255, .68); }
[data-style="glass"] .chip i { box-shadow: 0 0 8px currentColor; }

/* ---------- 命令面板 / 天气详情弹窗 ---------- */
[data-style="glass"] .palette-box,
[data-style="glass"] .wx-panel {
  border-radius: 20px;
  -webkit-backdrop-filter: blur(38px) saturate(180%);
          backdrop-filter: blur(38px) saturate(180%);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    0 40px 90px -34px rgba(var(--glass-sh), .95);
}
[data-style="glass"] .palette-item.sel {
  background: rgba(255, 255, 255, .16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26);
}
[data-theme="light"][data-style="glass"] .palette-item.sel {
  background: rgba(139, 92, 246, .14);
  box-shadow: inset 0 0 0 1px rgba(139, 92, 246, .28);
}
[data-style="glass"] .palette-item .p-ico {
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 var(--glass-hi);
  border-radius: 9px;
}
[data-theme="light"][data-style="glass"] .palette-item .p-ico { background: rgba(255, 255, 255, .8); }
[data-style="glass"] .palette-mask { background: rgba(10, 6, 30, .42); }
[data-theme="light"][data-style="glass"] .palette-mask { background: rgba(76, 63, 158, .2); }

/* ---------- 页脚 / 揭示动画 ---------- */
[data-style="glass"] .foot { border-top-color: var(--line); }
[data-style="glass"] .reveal {
  transform: translateY(18px);
  transition-duration: .8s;
}