/* ============================================================
   导航页 · iOS 26 液态玻璃（Liquid Glass）
   仅本文件 + index.html 参与视觉改造，其余文件不动
   ============================================================ */

/* ---------- 无障碍：仅屏幕阅读器可见 ---------- */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;border:0;
}

/* ---------- 键盘焦点环 ----------
   全站原来只有 .cmd-pal / .lg-switch 写了焦点样式，其余 50 多个可聚焦元素
   键盘走到哪完全看不见。这里用 :where() 把特异性压到 0，
   已有规则（比如 .game-panel 主动关 outline）照样能覆盖。 */
:where(a[href],button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
/* 搜索框的焦点提示交给外层 .search 的 :focus-within 光晕，input 自己不再叠一圈 */
.search input:focus-visible{outline:none}
/* 待办删除键平时透明，键盘聚焦时必须显形，否则等于没有焦点指示 */
.todo-item .x:focus-visible{opacity:1}

/* ---------- 跳到搜索（键盘专用，只在聚焦时露头） ---------- */
.skip-link{
  position:fixed;left:16px;top:-64px;z-index:210;
  min-height:44px;display:flex;align-items:center;
  padding:0 18px;border-radius:12px;
  background:var(--accent);color:#fff;
  font-size:13px;font-weight:600;text-decoration:none;
  box-shadow:0 6px 20px rgba(10,132,255,.35);
  transition:top var(--dur-base) var(--ease);
}
.skip-link:focus{top:16px}

/* ---------- 设计令牌 ---------- */
:root{
  --glass-tint:255,255,255;
  --glass:rgba(var(--glass-tint),.46);
  --glass-strong:rgba(255,255,255,.58);
  /* 页脚 / 右上角时间戳用的「工具条」玻璃：比卡片再实一点。
     这两处是 10~11.5px 的小字，卡片那档 .58 压在花壁纸上最坏只到 4.69，
     余量太薄；.68 把整段亮度带抬上去，最坏稳定在 5.5 以上。 */
  --glass-bar:rgba(255,255,255,.68);
  --glass-line:rgba(255,255,255,.72);
  --glass-blur:blur(28px) saturate(190%);
  /* ---------- 边缘高光（2026-10-26）----------
     真实玻璃的边框不是均匀一条白线：光源在左上，顶边最亮、
     左边缘次之、右边缘最暗，底边回一点反光。四条边分别给色，
     再用 inset 阴影在边框内侧补一圈散射光，玻璃才有「厚度」。
     纯 box-shadow / border-color，不加伪元素（.glassfx 的
     ::before 是跟随鼠标的高光、::after 是噪点纹理，都占用了）。 */
  --rim-top:rgba(255,255,255,.95);
  --rim-left:rgba(255,255,255,.74);
  --rim-right:rgba(255,255,255,.42);
  --rim-bottom:rgba(255,255,255,.6);
  --rim-glow:
    inset 0 1px 0 rgba(255,255,255,.88),
    inset 0 -1px 0 rgba(31,38,135,.07),
    inset 0 0 26px rgba(255,255,255,.15);
  --glass-sheen:rgba(255,255,255,.34);
  /* 生成式纹理（css-doodle）的颜色与强度 */
  --doodle-c:#1d1d1f;
  --doodle-o:.16;
  --lift:0 3px 12px rgba(31,38,135,.07), 0 14px 34px rgba(31,38,135,.10);
  --glass-shadow:var(--rim-glow), var(--lift);
  --glass-dot:rgba(255,255,255,.55);
  --fg:#1d1d1f;
  --fg-2:#3a3a3c;
  --dim:#5e5e64;
  --faint:#66666f;
  /* 玻璃面上的次要文字色：比 --faint 再深一档。
     --faint 的亮度正好落在「壁纸亮度带」的中间，压在花壁纸上最坏只有
     1.16:1（见页脚实测），所以凡是要压在玻璃面上的小字都用这个。 */
  --meta-ink:#4c4c55;
  --accent:#0a84ff;
  --accent-soft:color-mix(in srgb, var(--accent) 16%, transparent);
  --track:rgba(0,0,0,.08);
  --hair:rgba(60,60,67,.12);
  --pill:rgba(255,255,255,.55);
  --pill-line:rgba(255,255,255,.72);
  --pill-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  --wall-text-shadow:0 1px 18px rgba(255,255,255,.55), 0 1px 2px rgba(255,255,255,.4);
  --r-card:26px;
  --ease:cubic-bezier(.22,.9,.3,1);
  /* ---------- 动效三档（2026-11-02）----------
     以前 transition 里散着 7 种时长、8 种缓动：同样是 hover，
     有的 .15s 有的 .22s 有的 .25s，单看每处都合理，放在一起就觉得「不跟手」。
     收敛成三档 —— 微反馈 / 控件状态 / 布局入场 —— 手感才是一个整体。 */
  --dur-fast:.16s;
  --dur-base:.24s;
  --dur-slow:.4s;
  --ease-back:cubic-bezier(.34,1.3,.64,1);
}

/* 玻璃色温：跟随时段轻微偏移，让玻璃「融进」环境而不是贴上去 */
html.mood-dawn   {--glass-tint:255,251,246}
html.mood-dusk   {--glass-tint:255,249,244}
html.mood-evening{--glass-tint:247,247,255}
html.mood-night  {--glass-tint:241,244,255}

html.dark-wall{
  --glass:rgba(18,18,26,.5);
  --glass-strong:rgba(18,18,26,.62);
  --glass-bar:rgba(16,17,24,.7);
  --glass-line:rgba(255,255,255,.12);
  --rim-top:rgba(255,255,255,.24);
  --rim-left:rgba(255,255,255,.14);
  --rim-right:rgba(255,255,255,.07);
  --rim-bottom:rgba(255,255,255,.11);
  --rim-glow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.5),
    inset 0 0 26px rgba(255,255,255,.05);
  /* 深色壁纸上顶部受光要压到极低，否则会把浅色文字压成灰 */
  --glass-sheen:rgba(255,255,255,.06);
  --doodle-c:#ffffff;
  --doodle-o:.15;
  --lift:0 3px 12px rgba(0,0,0,.3), 0 14px 34px rgba(0,0,0,.4);
  --glass-shadow:var(--rim-glow), var(--lift);
  --glass-dot:rgba(255,255,255,.12);
  --fg:#f5f5f7;
  --fg-2:#e5e5ea;
  --dim:#c9c9d1;
  --faint:#adadb6;
  --meta-ink:#cfcfd8;
  --track:rgba(255,255,255,.14);
  --hair:rgba(255,255,255,.12);
  --pill:rgba(255,255,255,.12);
  --pill-line:rgba(255,255,255,.14);
  --pill-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  --wall-text-shadow:0 1px 2px rgba(0,0,0,.55), 0 0 12px rgba(0,0,0,.45), 0 2px 26px rgba(0,0,0,.35);
  --accent-soft:color-mix(in srgb, var(--accent) 26%, transparent);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100%}
/* 壁纸是 fixed 的，理论上铺满视口；但移动端地址栏收起/弹出会重算布局视口，
   重绘慢一拍时底部会漏出一条。给 html 也刷上同色，漏出来的是底色而不是白条。 */
html{background:#eef1f9}
html.dark-wall{background:#10131c}
/* 弹层打开时锁背景滚动。scrollbar-gutter 常驻留槽，
   否则滚动条一消失整页会横跳 15px，比「能滚」更难受。 */
html{scrollbar-gutter:stable}
/* 锁在 html 上而不是 body 上：body 的 overflow 只有 html 为 visible 时才传播给视口，
   实测在 Chrome 里 body{overflow:hidden} 依然能滚（滚了 178px）。
   html 是根元素，写在这里没有传播条件。 */
html.modal-open{overflow:hidden}

body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Microsoft YaHei",sans-serif;
  font-weight:400;
  color:var(--fg);
  background:transparent;
  min-height:100vh;
  min-height:100dvh;          /* 移动端地址栏收起/展开时 100vh 会算错，dvh 跟着实际视口走 */
  display:flex;align-items:center;justify-content:center;
  padding:40px 24px 64px;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
  transition:color .4s var(--ease);
}

/* ============================================================
   壁纸（两层交叉淡入淡出，背景是主角）
   ============================================================ */
#wallpaper{
  position:fixed;inset:0;z-index:-2;
  background-color:#eef1f9;      /* 首屏兜底，避免闪白 */
  transition:background-color .4s var(--ease);
}
html.dark-wall #wallpaper{background-color:#10131c}

/* 深色壁纸上的一层压暗底衬。
   自定义图片是按「整图平均亮度」判深浅的，一张上亮下暗的照片（比如逆光秋叶）
   平均值够暗 → 进深色模式 → 白字正好压在亮的那半边，几乎看不见。
   与其去猜照片哪块亮，不如给文字区垫一层从顶部渐隐的暗色，
   白字在什么照片上都站得住。底部同理，护住页脚那行小字。 */
html.dark-wall #wallpaper::after{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:
    linear-gradient(to bottom,
      rgba(6,8,14,.58) 0%,
      rgba(6,8,14,.44) 24%,
      rgba(6,8,14,.20) 46%,
      rgba(6,8,14,0) 64%),
    linear-gradient(to top,
      rgba(6,8,14,.42) 0%,
      rgba(6,8,14,0) 16%);
}

/* 天气粒子：垫在壁纸之上、玻璃卡片之下，
   卡片有 backdrop-filter，雨丝会隔着玻璃被糊一层，正好是液态玻璃该有的样子 */
#wx-canvas{
  position:fixed;inset:0;z-index:-1;
  width:100%;height:100%;
  pointer-events:none;
}

/* 生成式纹理（css-doodle）
   元素故意做得比视口大：网格是 26 列均分元素宽度，如果元素跟着视口缩，
   375px 上间距只剩 14px，十字会糊成一片噪点。锁一个最小尺寸，间距恒定。 */
#doodle{
  position:fixed;top:50%;left:50%;
  width:max(100vw,1400px);
  height:max(100vh,860px);
  transform:translate(-50%,-50%);
  z-index:-1;pointer-events:none;
  color:var(--doodle-c);
  opacity:var(--doodle-o);
  transition:opacity .4s var(--ease);
}
html.no-doodle #doodle{display:none}
.wp-layer{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity .24s var(--ease);
  will-change:opacity;
}

/* ============================================================
   玻璃材质（只允许下列选择器挂 backdrop-filter）
   边框按光源方向分四条边给色，见 :root 里的 --rim-* 注释
   ============================================================ */
#weather-card,#links-card,#todo-block,#study-card,#today-card,
.search,#suggest,.cmd-hint,#bg-btn,#bg-picker,#add-picker,.game-panel,.palette,.count{
  background:var(--glass);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
  border-top-color:var(--rim-top);
  border-left-color:var(--rim-left);
  border-right-color:var(--rim-right);
  border-bottom-color:var(--rim-bottom);
  box-shadow:var(--glass-shadow);
}

/* 主卡再加一层顶部受光：光从上方打到玻璃上表面，越往下越弱。
   只给五张大卡，浮层（.suggest / .palette / .game-panel）各自覆盖了
   background，加了也会被盖掉，没必要。 */
#weather-card,#links-card,#todo-block,#study-card,#today-card{
  background:
    linear-gradient(to bottom, var(--glass-sheen), transparent 24%),
    var(--glass);
}

/* 卡片分层：主卡（链接）保持厚玻璃，次卡（待办 / 专注）降一档，形成景深 */
#todo-block,#study-card{
  --glass-blur:blur(18px) saturate(162%);
  --lift:0 2px 8px rgba(31,38,135,.05), 0 8px 22px rgba(31,38,135,.07);
}
html.dark-wall #todo-block,html.dark-wall #study-card{
  --lift:0 2px 8px rgba(0,0,0,.24), 0 8px 22px rgba(0,0,0,.3);
}

/* .glassfx 只负责纹理与定位：绝不写 background / backdrop-filter */
.glassfx{position:relative}
.glassfx::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:0;opacity:0;
  transition:opacity .4s var(--ease);
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.28), transparent 60%);
}
html.dark-wall .glassfx::before{
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.14), transparent 60%);
}
.glassfx.sheen::before{opacity:1}
.glassfx::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:0;
  mix-blend-mode:overlay;
  opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:120px 120px;
}
html.dark-wall .glassfx::after{opacity:.05}
.glassfx > *{position:relative;z-index:1}

/* ============================================================
   今日进度条
   ============================================================ */
.today-bar{
  position:fixed;top:0;left:50%;transform:translateX(-50%);
  width:min(1020px,calc(100% - 48px));
  height:2px;z-index:90;
  border-radius:0 0 2px 2px;
  background:var(--track);
  pointer-events:none;
}
.today-fill{
  height:100%;width:0;border-radius:0 2px 2px 0;
  background:color-mix(in srgb, var(--accent) 58%, transparent);
  transition:width 1s linear;
}
/* 右上角「今天还剩 X 小时」：和页脚同一类问题——10px 灰字直接压在最上沿，
   花壁纸下基本看不见。同样给一层小玻璃底衬。 */
.today-left{
  position:absolute;right:0;top:6px;
  font-size:10px;color:var(--meta-ink);letter-spacing:.02em;
  font-variant-numeric:tabular-nums;white-space:nowrap;
  padding:2px 8px 3px;border-radius:9px;
  background:var(--glass-bar);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  backdrop-filter:blur(18px) saturate(170%);
  border:1px solid var(--glass-line);
  border-top-color:var(--rim-top);
  border-bottom-color:var(--rim-bottom);
  box-shadow:var(--lift);
}
@media (max-width:760px){ .today-left{display:none} }

/* ============================================================
   鼠标光晕（白色低透明度）
   ============================================================ */
.cursor-glow{
  position:fixed;top:0;left:0;
  width:520px;height:520px;margin:-260px 0 0 -260px;
  border-radius:50%;pointer-events:none;z-index:0;
  opacity:0;transition:opacity .5s;
  background:radial-gradient(circle, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 62%);
  will-change:transform;
}
html.dark-wall .cursor-glow{
  background:radial-gradient(circle, rgba(255,255,255,.1) 0%, rgba(255,255,255,0) 62%);
}
.cursor-glow.on{opacity:1}

/* ============================================================
   布局
   ============================================================ */
.wrap{
  width:100%;max-width:1020px;
  position:relative;z-index:1;
  padding-top:14px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:28px;
  align-items:start;
}
.col-left,.col-right{min-width:0;display:flex;flex-direction:column;gap:18px}

/* ---------- 卡片外壳（玻璃由 #weather-card / #links-card / #todo-block 各自承担） ---------- */
.card{
  position:relative;
  border-radius:var(--r-card);
  padding:24px;
  transition:background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}

/* 时间卡：完全裸露，直压壁纸 */
#time-card{
  background:none;
  border:0;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  padding:24px 6px 10px;
}

/* 搜索卡：透明外壳，玻璃交给内部 .search */
#search-card{
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  padding:0 !important;
  /* position 必须写：.reveal 的 transform 会给卡片建层叠上下文，
     static 元素上的 z-index 无效，联想面板就会被后面的天气卡压住 */
  position:relative;
  z-index:30;
}

/* ---------- 入场 ---------- */
.reveal{opacity:0;transform:translateY(14px);animation:rise .62s var(--ease) forwards}
@keyframes rise{to{opacity:1;transform:translateY(0)}}
.link-in{opacity:0;transform:translateY(6px);animation:linkRise .45s var(--ease) forwards}
@keyframes linkRise{to{opacity:1;transform:translateY(0)}}

/* ============================================================
   问候 + 时钟
   ============================================================ */
.greet{
  font-size:14px;color:var(--dim);
  margin-bottom:10px;letter-spacing:.2px;
  display:flex;align-items:center;gap:8px;
  text-shadow:var(--wall-text-shadow);
}
.greet .wave{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;color:var(--accent);
  transform-origin:50% 60%;
  animation:wave 3.2s ease-in-out infinite;
}
.greet .wave svg{width:16px;height:16px;display:block}
@keyframes wave{
  0%,72%,100%{transform:rotate(0)}
  78%{transform:rotate(12deg)}
  84%{transform:rotate(-7deg)}
  90%{transform:rotate(9deg)}
  96%{transform:rotate(-3deg)}
}
.greet .hi{color:var(--fg);font-weight:600}

.clock{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:72px;font-weight:200;
  letter-spacing:-3.4px;
  font-variant-numeric:tabular-nums;
  line-height:1;
  display:flex;align-items:baseline;
  margin-bottom:0;
  color:var(--fg);
  text-shadow:var(--wall-text-shadow);
  transition:font-size .4s var(--ease);
}
.clock .col{
  display:inline-block;
  width:.4em;text-align:center;
  margin:0 .02em;
  transition:opacity .4s var(--ease);
}
/* 秒：时钟下方一条 60 秒细进度，秒数做前缀 */
.sec-row{
  display:flex;align-items:center;gap:9px;
  height:14px;margin:5px 0 12px;
}
.sec-row .sec{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:12px;font-weight:400;letter-spacing:.06em;
  color:var(--faint);font-variant-numeric:tabular-nums;
  min-width:22px;
  text-shadow:var(--wall-text-shadow);
}
.sec-track{
  flex:0 0 78px;height:2px;border-radius:1px;
  background:var(--track);overflow:hidden;
}
.sec-track i{
  display:block;height:100%;width:0;border-radius:1px;
  background:color-mix(in srgb, var(--accent) 55%, transparent);
  transition:width .4s linear;
}
html.no-motion .sec-track i{transition:none}
@media (prefers-reduced-motion: reduce){ .sec-track i{transition:none} }
.dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);
  margin-left:14px;margin-bottom:11px;
  align-self:center;flex-shrink:0;
  box-shadow:0 0 12px var(--accent-soft);
  animation:breathe 2.8s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{opacity:.3;transform:scale(.82)}
  50%{opacity:1;transform:scale(1.16)}
}
.date{
  font-size:12.5px;color:var(--dim);
  letter-spacing:.4px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  text-shadow:var(--wall-text-shadow);
}

/* ============================================================
   倒计时（小玻璃胶囊）
   ============================================================ */
.count{
  margin-top:22px;
  padding:12px 18px;
  border-radius:22px;
  display:flex;align-items:center;gap:16px;
  background:var(--glass);
  -webkit-backdrop-filter:blur(22px) saturate(190%);
  backdrop-filter:blur(22px) saturate(190%);
  border:1px solid var(--glass-line);
  box-shadow:var(--glass-shadow);
}
.count-label{
  font-size:10.5px;color:var(--dim);
  letter-spacing:1.6px;margin-bottom:4px;
  text-transform:uppercase;font-weight:500;
}
.count-days{
  font-size:38px;font-weight:200;
  font-variant-numeric:tabular-nums;
  letter-spacing:-1.2px;line-height:1;
  transition:color .4s var(--ease);
}
.count-days .unit{
  font-size:12px;color:var(--dim);margin-left:6px;
  font-weight:400;letter-spacing:.5px;
}
.count.urgent .count-days{
  color:var(--accent);
  animation:pulseSoft 2.8s ease-in-out infinite;
}
@keyframes pulseSoft{0%,100%{opacity:1}50%{opacity:.62}}
.count.today .count-days{font-size:30px;letter-spacing:0;color:var(--accent)}

.count-ring{width:52px;height:52px;flex-shrink:0;position:relative}
.count-ring svg{transform:rotate(-90deg);display:block}
.count-ring .track{stroke:var(--track)}
.count-ring .prog{
  stroke:var(--accent);stroke-linecap:round;
  transition:stroke-dashoffset 1s cubic-bezier(.4,0,.2,1);
}
.count-ring .pct{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:10.5px;color:var(--dim);
  font-variant-numeric:tabular-nums;font-weight:500;
}

/* ============================================================
   搜索
   ============================================================ */
.search-row{display:flex;align-items:center;gap:9px}

.search{
  flex:1;min-width:0;
  position:relative;
  display:flex;align-items:center;gap:11px;
  height:50px;padding:0 16px;
  border-radius:999px;
  background:var(--glass);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
  box-shadow:var(--glass-shadow);
  transition:box-shadow .24s var(--ease), border-color .24s var(--ease);
}
.search:focus-within{
  box-shadow:var(--glass-shadow), 0 0 0 3px rgba(10,132,255,.22);
}
.search .ico{color:var(--faint);flex-shrink:0;display:flex;transition:color .25s}
.search:focus-within .ico{color:var(--accent)}
.search input{
  flex:1;min-width:0;
  background:none;border:none;outline:none;
  color:var(--fg);font-size:14.5px;font-family:inherit;
}
.search input::placeholder{color:var(--faint)}
.search .kbd{
  flex-shrink:0;user-select:none;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:10.5px;color:var(--faint);
  background:var(--glass-dot);
  border:1px solid var(--glass-line);
  border-radius:6px;padding:1px 6px;line-height:1.5;
  transition:.24s var(--ease);
}
.search:focus-within .kbd{opacity:0;transform:scale(.9)}

/* 引擎胶囊（纯色，不挂 blur） */
.engine-pill{
  flex-shrink:0;
  height:50px;padding:0 13px 0 16px;
  display:inline-flex;align-items:center;gap:5px;
  border-radius:999px;
  background:var(--glass-dot);
  border:1px solid var(--glass-line);
  box-shadow:var(--pill-shadow);
  color:var(--fg-2);font-size:13px;font-weight:500;
  font-family:inherit;cursor:pointer;
  transition:background .24s var(--ease), transform .24s var(--ease);
}
.engine-pill:hover{background:rgba(255,255,255,.8)}
html.dark-wall .engine-pill:hover{background:rgba(255,255,255,.18)}
.engine-pill:active{transform:scale(.97)}
.engine-pill .ep-ico{opacity:.55;display:flex}
.engine-pill.pop{animation:pop .34s var(--ease)}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.07)}100%{transform:scale(1)}}

/* 搜索联想浮层（功能浮层，允许与 .search 嵌套） */
.suggest{
  position:absolute;left:0;right:0;top:calc(100% + 8px);
  z-index:60;
  padding:6px;
  border-radius:20px;
  /* 浮层压在内容上，比普通玻璃更实一点，否则下面的卡片会透上来糊成一片 */
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(40px) saturate(190%);
  backdrop-filter:blur(40px) saturate(190%);
  border:1px solid rgba(20,24,40,.09);
  box-shadow:0 18px 46px rgba(20,24,40,.2),
             0 3px 10px rgba(20,24,40,.07),
             inset 0 1px 0 rgba(255,255,255,.92);
  display:none;
  max-height:min(320px,60vh);
  overflow:auto;
}
.suggest.on{display:block;animation:sgIn .18s var(--ease)}
html.dark-wall .suggest{
  background:rgba(20,22,32,.92);
  border-color:rgba(255,255,255,.1);
  box-shadow:0 16px 40px rgba(0,0,0,.44),
             0 3px 10px rgba(0,0,0,.3),
             inset 0 1px 0 rgba(255,255,255,.1);
}
@keyframes sgIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.sg-row{
  display:flex;align-items:center;gap:10px;
  padding:9px 11px;border-radius:14px;
  font-size:13px;color:var(--fg);cursor:pointer;
  transition:background .16s var(--ease);
}
.sg-row.on{background:rgba(255,255,255,.55)}
html.dark-wall .sg-row.on{background:rgba(255,255,255,.12)}
.sg-ico{width:16px;height:16px;flex-shrink:0;color:var(--dim);display:flex;align-items:center}
.sg-ico svg{width:16px;height:16px;display:block}
.sg-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sg-hint{flex-shrink:0;font-size:10.5px;color:var(--faint)}

/* ============================================================
   链接（文字胶囊）
   ============================================================ */
.label{
  font-size:12px;color:var(--dim);
  letter-spacing:.6px;margin-bottom:12px;
  text-transform:uppercase;
  font-weight:500;
  display:flex;align-items:center;gap:8px;
}
.label::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg, var(--track), transparent);
}
.group:hover .label{color:var(--fg-2)}

.links{display:flex;flex-wrap:wrap;gap:9px}
.links a,
.links .add-link{
  position:relative;
  display:inline-flex;align-items:center;gap:4px;
  max-width:100%;
  padding:8px 16px;
  border-radius:999px;
  font-size:13px;color:var(--fg);text-decoration:none;
  font-family:inherit;line-height:1.25;
  background:var(--glass-dot);
  border:1px solid var(--glass-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  cursor:pointer;
  transition:background .24s var(--ease), transform .24s cubic-bezier(.34,1.3,.64,1), box-shadow .24s var(--ease);
}
html.dark-wall .links a,
html.dark-wall .links .add-link{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.links a .txt{
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.links a:hover,
.links .add-link:hover{
  background:rgba(255,255,255,.82);
  transform:scale(1.03);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95);
}
html.dark-wall .links a:hover,
html.dark-wall .links .add-link:hover{
  background:rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.links a:active,
.links .add-link:active{transform:scale(.97)}

/* 每组末尾的「添加」 */
.links .add-link{
  color:var(--dim);
  border-style:dashed;
  border-color:var(--hair);
  background:transparent;
  box-shadow:none;
}
.links .add-link:hover{color:var(--fg-2);border-style:dashed}
.links .add-link svg{width:12px;height:12px;display:block;flex-shrink:0}

/* 涟漪容器（裁切在胶囊内，不遮挡角标） */
.links a .rip-box{
  position:absolute;inset:0;border-radius:inherit;
  overflow:hidden;pointer-events:none;
}
.ripple{
  position:absolute;border-radius:50%;
  background:rgba(255,255,255,.55);
  transform:scale(0);opacity:1;
  animation:rippleOut .65s ease-out forwards;
  pointer-events:none;
}
html.dark-wall .ripple{background:rgba(255,255,255,.22)}
@keyframes rippleOut{to{transform:scale(2.8);opacity:0}}

/* Alt 数字角标 */
.lk-num{
  position:absolute;top:-5px;left:-5px;
  min-width:16px;height:16px;padding:0 4px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;
  background:var(--accent);color:#fff;
  font-size:9.5px;font-weight:700;line-height:1;
  box-shadow:0 2px 6px rgba(10,132,255,.4);
  opacity:0;transform:scale(.6);
  transition:opacity .16s var(--ease), transform .16s var(--ease);
  pointer-events:none;
}
body.alt-show .lk-num{opacity:1;transform:scale(1)}

/* ============================================================
   待办
   ============================================================ */
.todo-head{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:12px;
}
.todo-head .label{margin-bottom:0;flex:1}
.todo-head .label::after{display:none}
.count-num{
  font-size:10.5px;color:var(--faint);
  font-variant-numeric:tabular-nums;letter-spacing:.5px;
  padding:2px 9px;border-radius:999px;
  background:var(--glass-dot);
  border:1px solid var(--glass-line);
}
.count-num:empty{display:none}

.todo-add{
  display:flex;gap:8px;
  padding:0 16px;height:42px;align-items:center;
  border-radius:999px;
  background:var(--glass-dot);
  border:1px solid var(--glass-line);
  box-shadow:var(--pill-shadow);
  margin-bottom:10px;
  transition:box-shadow .24s var(--ease), background .24s var(--ease);
}
.todo-add:focus-within{box-shadow:var(--pill-shadow), 0 0 0 4px var(--accent-soft)}
.todo-add input{
  flex:1;min-width:0;
  background:none;border:none;outline:none;
  color:var(--fg);font-size:13.5px;font-family:inherit;
}
.todo-add input::placeholder{color:var(--faint)}

/* 预留两行的高度。云同步大约 2.4s 才回来，列表从 0/1 条长到 2 条，
   卡片跟着长高 41px，整页重排 —— 实测 CLS 0.04 就是这么来的。
   预留之后这个跳动直接消失，代价是空列表时卡片下方多一点留白。 */
.todo-list{list-style:none;min-height:82px}
.todo-item{
  display:flex;align-items:center;gap:11px;
  padding:9px 4px;font-size:13.5px;
  border-bottom:1px solid var(--hair);
  animation:slideIn .34s var(--ease) both;
  cursor:grab;
}
.todo-item:last-child{border-bottom:none}
.todo-item.dragging{opacity:.45}
.todo-item.over{box-shadow:0 -2px 0 var(--accent)}
@keyframes slideIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
.todo-item.leaving{animation:slideOut .26s ease forwards;pointer-events:none}
@keyframes slideOut{to{opacity:0;transform:translateX(12px);height:0;padding:0;border:none}}

.todo-item input[type=checkbox]{
  appearance:none;-webkit-appearance:none;
  width:22px;height:22px;flex-shrink:0;
  border:2px solid var(--faint);border-radius:50%;
  cursor:pointer;position:relative;
  background:transparent center/12px 12px no-repeat;
  transition:background-color .24s var(--ease), border-color .24s var(--ease), transform .16s var(--ease);
}
.todo-item input[type=checkbox]:hover{border-color:var(--dim)}
.todo-item input[type=checkbox]:active{transform:scale(.88)}
.todo-item input[type=checkbox]:checked{
  border-color:transparent;
  background-color:var(--accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:12px 12px;
}
.todo-item span{
  flex:1;line-height:1.5;word-break:break-word;
  transition:color .24s var(--ease);
}
.todo-item.done span{color:var(--faint);text-decoration:line-through}
.todo-item .x{
  background:none;border:none;color:var(--faint);
  cursor:pointer;font-size:16px;line-height:1;
  padding:2px 6px;opacity:0;
  transition:.18s;font-family:inherit;border-radius:8px;
}
.todo-item:hover .x,.todo-item:focus-within .x{opacity:1}
.todo-item .x:hover{color:#ff453a;background:rgba(255,69,58,.12)}
.empty{font-size:12px;color:var(--faint);padding:16px 0;letter-spacing:.3px;text-align:center}
/* 空状态在预留区里居中，看起来是「特意留的空间」而不是「下面缺了东西」 */
.todo-list > .empty{
  display:flex;align-items:center;justify-content:center;
  min-height:82px;padding:0;
}

.todo-celebrate{
  display:none;align-items:center;justify-content:space-between;gap:10px;
  margin-top:10px;padding:9px 8px 9px 16px;
  border-radius:999px;
  background:rgba(48,209,88,.14);
  border:1px solid rgba(48,209,88,.30);
  font-size:12px;color:var(--fg);font-weight:500;
}
.todo-celebrate.on{display:flex;animation:sgIn .3s var(--ease)}
.todo-celebrate button{
  border:none;cursor:pointer;font-family:inherit;
  font-size:11.5px;font-weight:600;
  color:#fff;background:#248a3d;
  padding:5px 12px;border-radius:999px;
  transition:transform .16s var(--ease), filter .16s var(--ease);
}
.todo-celebrate button:hover{filter:brightness(1.06);transform:scale(1.03)}

/* ============================================================
   天气
   ============================================================ */
.wx-card{padding:18px 20px;cursor:pointer;user-select:none}
.weather{display:flex;align-items:center;justify-content:space-between;gap:16px}
.wx-main{display:flex;align-items:center;gap:14px;min-width:0}
.wx-big{
  width:40px;height:40px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--accent);transition:color .6s;
}
.wx-big svg{
  width:40px;height:40px;display:block;
  animation:wxFloat 5.5s ease-in-out infinite;
}
@keyframes wxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.wx-temp{
  font-size:34px;font-weight:200;
  letter-spacing:-1.2px;
  font-variant-numeric:tabular-nums;
  line-height:1;white-space:nowrap;
}
.wx-side{
  text-align:right;min-width:0;
  display:flex;flex-direction:column;gap:3px;align-items:flex-end;
}
.wx-desc{
  font-size:13px;color:var(--fg);font-weight:500;
  letter-spacing:.2px;white-space:nowrap;
  display:flex;align-items:center;gap:5px;
}
.wx-more{display:flex;color:var(--faint);transition:transform .3s var(--ease)}
.wx-card.open .wx-more{transform:rotate(180deg)}
.wx-extra{
  font-size:10.5px;color:var(--faint);
  letter-spacing:.3px;line-height:1.5;white-space:nowrap;
}
.wx-extra span + span::before{content:"·";margin:0 5px;color:var(--faint)}

.wx-forecast{
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .4s cubic-bezier(.4,0,.2,1), opacity .24s var(--ease);
}
.wx-forecast.open{max-height:240px;opacity:1}
.wx-days{margin-top:14px;padding-top:10px;border-top:1px solid var(--hair)}
.wx-day{
  display:flex;align-items:center;gap:10px;
  padding:7px 10px;font-size:12.5px;color:var(--fg-2);
  border-radius:14px;
  background:var(--glass-dot);
  border:1px solid var(--glass-line);
}
.wx-day b{color:var(--fg);font-weight:600}
.wx-day + .wx-day{margin-top:6px}
.wd-name{width:40px;flex-shrink:0;color:var(--dim)}
.wd-ico{width:16px;height:16px;display:flex;color:var(--accent);flex-shrink:0}
.wd-ico svg{width:16px;height:16px;display:block}
.wd-desc{flex:1;min-width:0;color:var(--dim);font-size:11.5px}
.wd-temp{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:12px}

/* ============================================================
   页脚
   ============================================================ */
/* 页脚原来是一片裸字压在壁纸上，只有 text-shadow 撑着。
   实测强纹理壁纸下最坏 1.16:1（标准 4.5:1）——--faint 的亮度正好落在
   壁纸亮度带中间，加多少阴影都没用，缺的是「面」。
   这里补一层和 .cmd-hint / .bg-btn 同族的玻璃底衬，文字抬到 --meta-ink。 */
.foot{
  display:flex;justify-content:space-between;align-items:center;
  font-size:11.5px;color:var(--meta-ink);letter-spacing:.3px;
  padding:6px 11px;min-height:34px;gap:10px;
  border-radius:13px;
  background:var(--glass-bar);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
  border-top-color:var(--rim-top);
  border-left-color:var(--rim-left);
  border-right-color:var(--rim-right);
  border-bottom-color:var(--rim-bottom);
  box-shadow:var(--glass-shadow);
}
.foot .left{display:flex;align-items:center;gap:6px;min-width:0}
/* 页脚里混着 <a> 和 <button>（贪吃蛇是弹窗不是跳转，用 button 才不会被读成"回到页首"），
   两者必须长得一模一样，所以选择器写在一起。button 还要把浏览器默认的框/底色/字体抹掉。 */
.foot a,.foot .foot-link{
  color:var(--fg-2);text-decoration:none;
  display:flex;align-items:center;gap:5px;flex-shrink:0;
  padding:3px 7px;margin:0 -1px;
  border-radius:8px;
  transition:color .24s var(--ease), background .24s var(--ease);
}
.foot .foot-link{
  background:none;border:0;font:inherit;font-size:inherit;line-height:inherit;
  cursor:pointer;-webkit-appearance:none;appearance:none;
}
.foot a:hover,.foot .foot-link:hover{color:var(--fg);background:rgba(255,255,255,.55)}
html.dark-wall .foot a:hover,html.dark-wall .foot .foot-link:hover{background:rgba(255,255,255,.1)}
/* ICP 备案号独立一行 —— 不能塞进 .foot。
   页脚在左列里只有约 400px 宽，塞进去之后「按 ? 看快捷键」被压成省略号，
   390px 下连齿轮都被顶出屏幕。独立一行反而更稳，也不抢功能入口的位置。 */
.icp-line{display:flex;justify-content:center;margin-top:-12px}
/* 负 margin 是为了抵消 .col-left 的 gap（桌面 18 / 移动 12）。
   备案号应该贴着页脚，隔 18px 会看起来像另一个区块。 */
@media (max-width:880px){ .icp-line{margin-top:-6px} }
.icp-line .icp{
  font-size:10.5px;color:var(--meta-ink);
  letter-spacing:.3px;text-decoration:none;white-space:nowrap;
  padding:3px 9px;border-radius:8px;
  transition:color var(--dur-base) var(--ease),background var(--dur-base) var(--ease);
}
.icp-line .icp:hover{color:var(--fg);background:rgba(255,255,255,.55)}
html.dark-wall .icp-line .icp:hover{background:rgba(255,255,255,.1)}
#wx-note{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ============================================================
   底部快捷键玻璃坞
   ============================================================ */
.cmd-hint{
  position:fixed;bottom:16px;left:50%;
  transform:translateX(-50%);
  z-index:60;
  display:flex;align-items:center;gap:6px;
  padding:7px 15px;
  border-radius:999px;
  background:var(--glass-strong);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--glass-line);
  box-shadow:var(--glass-shadow);
  font-size:11px;color:var(--dim);
  white-space:nowrap;
  opacity:0;animation:fadeInLate .5s .9s forwards;
}
@keyframes fadeInLate{to{opacity:1}}
/* 内容超出视口时，快捷键坞改贴文档末尾（JS 加 .at-end）。
   fixed 底栏在矮窗口里必然压住最后一张卡——实测 760 高时压住 #study-card 22px，
   滚到中间态就看到「专注」卡被切掉半截。改 absolute 后它跟着文档走，
   滚到底才出现，任何滚动位置都不遮挡内容。
   body 有 position:relative，bottom:16px 落在 padding-bottom 里，不会撑高 scrollHeight。 */
.cmd-hint.at-end{
  position:absolute;
  bottom:16px;
}
.cmd-hint kbd{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  background:rgba(255,255,255,.7);
  border:1px solid var(--glass-line);
  border-radius:6px;
  padding:1px 5px;font-size:10px;
  color:var(--fg-2);margin:0 1px;
}
html.dark-wall .cmd-hint kbd{background:rgba(255,255,255,.12)}

/* ============================================================
   背景按钮 + 选择器
   ============================================================ */
.bg-btn{
  position:fixed;top:16px;right:16px;z-index:70;
  width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--glass-strong);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
  box-shadow:var(--glass-shadow);
  color:var(--fg-2);cursor:pointer;
  transition:transform .24s var(--ease), background .24s var(--ease);
}
.bg-btn:hover{transform:scale(1.07)}
.bg-btn:active{transform:scale(.96)}
.bg-btn svg{width:18px;height:18px;display:block}

/* 遮罩（背景选择器 / 添加链接共用） */
.bg-scrim{
  position:fixed;inset:0;z-index:80;
  background:rgba(0,0,0,.28);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;
  transition:opacity .24s var(--ease);
}
.bg-scrim.on{opacity:1;pointer-events:auto}

/* 居中弹层：用 translate 属性做居中，避免和动画的 transform 打架 */
.bg-picker,.add-picker{
  position:fixed;top:50%;left:50%;
  translate:-50% -50%;
  z-index:90;
  width:min(380px,calc(100vw - 32px));
  max-height:calc(100vh - 40px);
  overflow:auto;
  padding:16px;
  border-radius:24px;
  background:var(--glass-strong);
  -webkit-backdrop-filter:blur(44px) saturate(190%);
  backdrop-filter:blur(44px) saturate(190%);
  border:1px solid var(--glass-line);
  box-shadow:var(--glass-shadow);
  display:none;
}
.bg-picker.on,.add-picker.on{display:block;animation:popIn .22s var(--ease)}
@keyframes popIn{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}
.bgp-head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;
}
.bgp-head span{font-size:13px;font-weight:600;color:var(--fg)}
.bgp-x{
  width:24px;height:24px;border-radius:50%;
  border:none;cursor:pointer;
  background:rgba(255,255,255,.5);color:var(--fg-2);
  font-size:12px;line-height:1;font-family:inherit;
  display:flex;align-items:center;justify-content:center;
  transition:background .16s var(--ease);
}
html.dark-wall .bgp-x{background:rgba(255,255,255,.12)}
.bgp-x:hover{background:rgba(255,255,255,.8)}

.bg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.bg-thumb{
  position:relative;
  height:52px;border-radius:14px;
  border:1px solid rgba(255,255,255,.6);
  background-size:cover;background-position:center;
  cursor:pointer;padding:0;overflow:hidden;
  transition:transform .16s var(--ease);
}
.bg-thumb:hover{transform:scale(1.04)}
.bg-thumb.sel{
  outline:2px solid #0a84ff;
  outline-offset:1px;
}
.bg-thumb .ck{
  position:absolute;right:4px;bottom:4px;
  width:16px;height:16px;border-radius:50%;
  background:#0a84ff;color:#fff;
  font-size:10px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
}
.bg-thumb.up{
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.32);
  border:1.5px dashed rgba(120,120,130,.45);
  color:var(--dim);font-size:10.5px;
}
html.dark-wall .bg-thumb.up{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28)}
.bg-thumb.up svg{width:16px;height:16px;display:block;margin-bottom:2px}
.bg-thumb.up i{font-style:normal;line-height:1.1;text-align:center}

.bgp-url{margin-top:10px}
.bgp-url input{
  width:100%;height:36px;padding:0 14px;
  border-radius:999px;
  background:rgba(255,255,255,.5);
  border:1px solid var(--pill-line);
  color:var(--fg);font-size:12px;font-family:inherit;
  outline:none;transition:box-shadow .2s;
}
html.dark-wall .bgp-url input{background:rgba(255,255,255,.1)}
.bgp-url input:focus{box-shadow:0 0 0 3px var(--accent-soft)}
.bgp-url input::placeholder{color:var(--faint)}
.bgp-note{
  margin-top:10px;font-size:10px;color:var(--faint);
  text-align:center;letter-spacing:.2px;
  transition:color .24s var(--ease);
}
.bgp-note.err{color:#ff453a}

/* ============================================================
   添加链接弹层
   ============================================================ */
.add-field{margin-bottom:10px}
.add-field label{
  display:block;font-size:10.5px;color:var(--dim);
  letter-spacing:1.2px;text-transform:uppercase;font-weight:500;
  margin-bottom:5px;
}
.add-field input{
  width:100%;height:38px;padding:0 14px;
  border-radius:999px;
  background:var(--glass-dot);
  border:1px solid var(--glass-line);
  color:var(--fg);font-size:13px;font-family:inherit;
  outline:none;transition:box-shadow .2s;
}
.add-field input:focus{box-shadow:0 0 0 3px rgba(10,132,255,.22)}
.add-field input::placeholder{color:var(--faint)}
.add-err{
  font-size:11.5px;color:#ff453a;
  min-height:16px;line-height:1.4;
  margin:2px 2px 8px;
  opacity:0;transition:opacity .18s;
}
.add-err.on{opacity:1}
.add-actions{display:flex;justify-content:flex-end;gap:10px}

/* ============================================================
   命令面板（Ctrl / Cmd + K）
   ============================================================ */
.pal-overlay{
  position:fixed;inset:0;z-index:95;
  display:none;justify-content:center;align-items:flex-start;
  padding:13vh 16px 16px;
}
.pal-overlay.on{display:flex;animation:lgFade .16s ease}
.pal-scrim{
  position:absolute;inset:0;
  background:rgba(20,24,40,.28);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.palette{
  position:relative;
  width:min(560px,100%);
  max-height:min(430px,calc(87vh - 32px));
  display:flex;flex-direction:column;
  border-radius:20px;overflow:hidden;
  background:var(--glass-strong);
  animation:lgPop .22s cubic-bezier(.34,1.45,.64,1);
}
.pal-head{
  display:flex;align-items:center;gap:10px;
  padding:13px 15px;
  border-bottom:1px solid var(--glass-line);
  flex:0 0 auto;
}
.pal-ico{color:var(--dim);flex:0 0 auto}
.pal-input{
  flex:1 1 auto;min-width:0;
  border:0;background:none;outline:none;
  font-family:inherit;font-size:15px;color:var(--fg);
  padding:0;line-height:1.4;
}
.pal-input::placeholder{color:var(--dim)}
.pal-esc{
  flex:0 0 auto;
  font-family:inherit;font-size:10.5px;
  padding:2px 6px;border-radius:5px;
  border:1px solid var(--glass-line);
  background:var(--glass-dot);color:var(--dim);
}
.pal-list{
  flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
  padding:6px;
  scrollbar-width:thin;
  scrollbar-color:rgba(0,0,0,.16) transparent;
}
.pal-list::-webkit-scrollbar{width:6px}
.pal-list::-webkit-scrollbar-track{background:transparent}
.pal-list::-webkit-scrollbar-thumb{background:rgba(0,0,0,.1);border-radius:3px}
.pal-list:hover::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2)}
.pal-list::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.3)}
html.dark-wall .pal-list{scrollbar-color:rgba(255,255,255,.2) transparent}
html.dark-wall .pal-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2)}
html.dark-wall .pal-list::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.32)}
.pal-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:10px;
  cursor:pointer;
  transition:background .16s var(--ease);
}
.pal-item.on{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.pal-item-ico{
  flex:0 0 auto;width:16px;height:16px;
  display:flex;align-items:center;justify-content:center;
  color:var(--dim);
}
.pal-item-ico svg{width:15px;height:15px}
.pal-item.on .pal-item-ico{color:var(--accent)}
.pal-item-txt{
  flex:1 1 auto;min-width:0;
  font-size:13.5px;color:var(--fg);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pal-item-txt b{font-weight:600;color:var(--accent)}
.pal-item-hint{
  flex:0 0 auto;font-size:11px;color:var(--dim);
  max-width:44%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pal-item-key{
  flex:0 0 auto;font-size:10px;
  padding:1px 5px;border-radius:4px;
  border:1px solid var(--glass-line);
  background:var(--glass-dot);color:var(--dim);
}
.pal-group{
  padding:8px 10px 3px;font-size:10.5px;
  color:var(--dim);letter-spacing:.4px;
}
.pal-empty{
  padding:26px 10px;text-align:center;
  font-size:13px;color:var(--dim);
}
.pal-foot{
  flex:0 0 auto;
  display:flex;gap:14px;justify-content:center;
  padding:8px 12px;
  border-top:1px solid var(--glass-line);
  font-size:10.5px;color:var(--dim);
}
.pal-foot kbd{
  font-family:inherit;font-size:10px;
  padding:1px 4px;border-radius:4px;
  border:1px solid var(--glass-line);
  background:var(--glass-dot);
  margin-right:2px;
}
html.dark-wall .pal-scrim{background:rgba(0,0,0,.45)}

/* 玻璃坞里的「Ctrl+K 命令」做成可点入口 */
.cmd-pal{
  all:unset;cursor:pointer;
  display:inline-flex;align-items:center;gap:2px;
  padding:1px 3px;margin:-1px -3px;border-radius:6px;
  transition:background .16s var(--ease);
}
.cmd-pal:hover{background:rgba(0,0,0,.07)}
html.dark-wall .cmd-pal:hover{background:rgba(255,255,255,.12)}
.cmd-pal:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ============================================================
   小游戏（贪吃蛇）
   ============================================================ */
.game-overlay{
  position:fixed;inset:0;z-index:90;
  display:none;align-items:center;justify-content:center;padding:20px;
}
.game-overlay.on{display:flex;animation:lgFade .18s ease}
@keyframes lgFade{from{opacity:0}to{opacity:1}}
.game-scrim{
  position:absolute;inset:0;
  background:rgba(20,24,40,.28);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.game-panel{
  position:relative;
  width:min(400px,calc(100vw - 32px));
  max-height:calc(100vh - 40px);
  overflow:auto;text-align:center;
  padding:22px;border-radius:22px;
  background:var(--glass-strong);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
  box-shadow:var(--glass-shadow);
  animation:lgPop .26s cubic-bezier(.34,1.45,.64,1);
}
@keyframes lgPop{from{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:none}}
/* 面板只为接键盘而聚焦（tabindex=-1），不画默认焦点环 */
.game-panel:focus,
.game-panel:focus-visible{outline:none}
.game-x{
  position:absolute;top:12px;right:12px;
  width:28px;height:28px;border-radius:50%;
  border:1px solid var(--glass-line);
  background:var(--glass-dot);color:var(--dim);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:color .16s var(--ease);
}
.game-x:hover{color:var(--fg)}
.game-title{font-size:16px;font-weight:600;letter-spacing:.5px;color:var(--fg)}
.game-sub{font-size:11.5px;color:var(--dim);margin:6px auto 0;max-width:280px;line-height:1.6}
.game-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:16px}
.lg-btn{
  border-radius:999px;padding:9px 18px;font-size:13px;
  font-family:inherit;cursor:pointer;
  border:1px solid var(--glass-line);
  background:var(--glass-dot);color:var(--fg);
  transition:transform .16s var(--ease),background .24s var(--ease);
}
.lg-btn:active{transform:scale(.95)}
.lg-btn.primary{background:var(--accent);border-color:transparent;color:#fff}
html.dark-wall .game-scrim{background:rgba(0,0,0,.45)}

/* ---------- 贪吃蛇 ---------- */
.snake-hud{display:flex;justify-content:center;gap:10px;margin:14px 0 12px}
.snake-score{
  min-width:76px;padding:7px 14px;border-radius:14px;
  background:var(--glass-dot);border:1px solid var(--glass-line);
  font-size:11px;color:var(--dim);text-align:center;line-height:1.4;
}
.snake-score b{
  display:block;font-size:18px;font-weight:700;color:var(--fg);
  font-variant-numeric:tabular-nums;
}
.snake-stage{position:relative;width:min(360px,100%);margin:0 auto}
#snake-canvas{
  display:block;width:100%;height:auto;border-radius:16px;
  border:1px solid var(--glass-line);
  background:rgba(0,0,0,.035);
  touch-action:none;
}
html.dark-wall #snake-canvas{background:rgba(255,255,255,.05)}
.snake-msg{
  position:absolute;inset:0;display:none;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;padding:20px;border-radius:16px;
  background:var(--glass-strong);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font-size:14px;line-height:1.8;color:var(--fg);z-index:2;
}
.snake-msg.show{display:flex;animation:lgFade .2s ease}
.snake-msg .big{font-size:16px;font-weight:700;display:block;margin-bottom:4px}
.snake-msg.win{color:#16a34a}

/* 拖拽图片时的提示边框 */
body.dragging::after{
  content:"";position:fixed;inset:0;z-index:100;pointer-events:none;
  border:2px dashed var(--accent);
  background:color-mix(in srgb,var(--accent) 6%,transparent);
}

/* ============================================================
   轻提示 + 撒花
   ============================================================ */
#toast{
  position:fixed;left:50%;bottom:78px;z-index:300;
  transform:translate(-50%,10px);
  padding:9px 18px;border-radius:999px;
  background:rgba(28,28,34,.86);
  color:#fff;font-size:12.5px;
  opacity:0;pointer-events:none;
  transition:opacity .24s var(--ease), transform .24s var(--ease);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  white-space:nowrap;
}
#toast.on{opacity:1;transform:translate(-50%,0)}

.confetti{
  position:fixed;inset:0;z-index:9999;
  pointer-events:none;overflow:hidden;
}
.confetti i{
  position:absolute;top:-14px;
  width:8px;height:13px;border-radius:2px;
  animation:confFall linear forwards;
}
@keyframes confFall{
  0%{transform:translate3d(0,-10px,0) rotate(0);opacity:1}
  100%{transform:translate3d(var(--dx,0px),105vh,0) rotate(720deg);opacity:.9}
}

/* ============================================================
   专注模式
   ============================================================ */
.focus-mode #links-card,
.focus-mode #todo-block,
.focus-mode #weather-card,
.focus-mode .foot,
.focus-mode .bg-btn,
.focus-mode .cmd-hint,
.focus-mode #snake-entry,
.focus-mode #bg-scrim,
.focus-mode #bg-picker,
.focus-mode #add-picker,
.focus-mode #snake-overlay,
.focus-mode #palette-overlay{display:none !important}
.focus-mode .wrap{grid-template-columns:1fr;max-width:560px;gap:18px}
.focus-mode .clock{font-size:80px}
.focus-mode .col-right{display:none}

/* 专注模式里唯一可见的出口。占 .bg-btn 那个位置——专注模式把 .bg-btn 藏了，
   退出按钮顶上，进出时位置不跳。静息只留很低的透明度，hover / 键盘聚焦才亮起来。 */
.focus-exit{
  position:fixed;
  top:max(16px, calc(env(safe-area-inset-top) + 12px));
  right:max(16px, calc(env(safe-area-inset-right) + 12px));
  z-index:70;
  display:none;
  align-items:center;gap:7px;
  height:36px;padding:0 14px 0 11px;
  border-radius:999px;
  font:inherit;font-size:13px;line-height:1;letter-spacing:.2px;
  background:var(--glass-strong);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);
  box-shadow:var(--glass-shadow);
  color:var(--fg-2);cursor:pointer;
  --fx-rest:.45;
  opacity:var(--fx-rest);
  transition:opacity .24s var(--ease), transform .24s var(--ease), color .24s var(--ease);
}
/* 深色壁纸下玻璃本身也是暗的，静息透明度再抬高一点才看得清 */
html.dark-wall .focus-exit{--fx-rest:.58}
.focus-mode .focus-exit{display:inline-flex}
/* 进专注模式时先亮一下再落回静息——不靠猜也知道出口在哪。
   只播一次（display:none → flex 会重播，正好），之后一直很安静。
   不能加 fill-mode，否则动画会盖住 :hover 的 opacity:1。 */
.focus-mode .focus-exit{animation:fxIntro 1.05s var(--ease) 1}
@keyframes fxIntro{
  0%{opacity:0;transform:translateY(-6px)}
  40%{opacity:.95}
  100%{opacity:var(--fx-rest);transform:none}
}
.focus-exit svg{width:15px;height:15px;display:block;flex:none}
.focus-exit:hover,
.focus-exit:focus-visible{opacity:1;color:var(--fg);transform:translateY(-1px)}
.focus-exit:active{transform:scale(.97)}
.focus-exit:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* 触摸设备没有 hover 可等，静息就得给到能看清；同时补足 44px 触摸目标 */
@media (hover:none){
  .focus-exit{--fx-rest:.7;height:44px;padding:0 16px 0 13px}
  html.dark-wall .focus-exit{--fx-rest:.72}
}

/* ============================================================
   关闭动效 / 尊重系统设置
   ============================================================ */
.no-motion *,
.no-motion *::before,
.no-motion *::after{
  animation:none !important;
  transition:none !important;
}
.no-motion .reveal,.no-motion .link-in{opacity:1;transform:none}
.no-motion .cmd-hint{opacity:1}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
  }
  .reveal,.link-in{opacity:1;transform:none}
  .cmd-hint{opacity:1}
}

/* ============================================================
   无 backdrop-filter 的降级
   ============================================================ */
@supports not (backdrop-filter:blur(1px)){
  #weather-card,#links-card,#todo-block,
  .search,#suggest,.cmd-hint,#bg-btn,#bg-picker,#add-picker,.game-panel,.palette,.count{
    background:var(--glass-strong) !important;
  }
  html:not(.dark-wall) #weather-card,
  html:not(.dark-wall) #links-card,
  html:not(.dark-wall) #todo-block,
  html:not(.dark-wall) .count,
  html:not(.dark-wall) .search,
  html:not(.dark-wall) .cmd-hint,
  html:not(.dark-wall) #bg-btn,
  html:not(.dark-wall) #bg-picker,
  html:not(.dark-wall) #add-picker,
  html:not(.dark-wall) .game-panel,
  html:not(.dark-wall) .palette,
  html:not(.dark-wall) #suggest{background:rgba(255,255,255,.9) !important}
  html.dark-wall #weather-card,
  html.dark-wall #links-card,
  html.dark-wall #todo-block,
  html.dark-wall .count,
  html.dark-wall .search,
  html.dark-wall .cmd-hint,
  html.dark-wall #bg-btn,
  html.dark-wall #bg-picker,
  html.dark-wall #add-picker,
  html.dark-wall .game-panel,
  html.dark-wall .palette,
  html.dark-wall #suggest{background:rgba(18,18,26,.92) !important}
  .links a,.links .add-link{background:rgba(255,255,255,.78)}
  html.dark-wall .links a,
  html.dark-wall .links .add-link{background:rgba(255,255,255,.16)}
  html:not(.dark-wall) .snake-msg{background:rgba(255,255,255,.94) !important}
  html.dark-wall .snake-msg{background:rgba(18,18,26,.94) !important}
  .bg-scrim{background:rgba(0,0,0,.42)}
}

/* ============================================================
   响应式
   ============================================================ */
@media(max-width:880px){
  /* 刘海屏 / 底部横条：viewport 已经开了 viewport-fit=cover，
     但 CSS 里一直没用 env()，内容会被灵动岛和 Home 指示条压住。
     max() 保证非全面屏设备还是原来的间距，不会被 env() 的 0 拉小。 */
  body{
    padding-top:max(64px, calc(env(safe-area-inset-top) + 28px));
    padding-right:max(18px, env(safe-area-inset-right));
    padding-bottom:max(72px, calc(env(safe-area-inset-bottom) + 20px));
    padding-left:max(18px, env(safe-area-inset-left));
    align-items:flex-start;
  }
  .wrap{grid-template-columns:1fr;gap:18px;max-width:560px}
  .clock{font-size:50px;letter-spacing:-2px}
  .count-days{font-size:38px}
  .cmd-hint{display:none}
  .focus-mode .clock{font-size:64px}

  /* 触摸目标统一抬到 44px（iOS HIG 下限）。
     实测原来链接卡 34px、页脚链接 15px、搜索框 input 只有 21px，手指很难点准。
     用 min-height 而不是固定值，内容多时还能自然撑开。 */
  .links a,.links .add-link{min-height:44px}
  .foot{min-height:44px;padding:2px 7px;border-radius:14px}
  .foot a,.foot .foot-link{min-height:44px;padding:0 5px;margin:0}
  a.gear{min-width:44px;min-height:44px;justify-content:center}
  .bg-btn{min-width:44px;min-height:44px}
  .search input{height:100%}
  .todo-item input[type=checkbox]{width:28px;height:28px;background-size:15px 15px}
  .todo-item{min-height:52px}
  .foot-hint{display:none}

  /* 单列时待办卡在首屏之外，同步到达时的重排根本看不见，
     那就不必为「稳定」白留两行空 —— 手机上每一点纵向空间都金贵。 */
  .todo-list{min-height:0}
  .todo-list > .empty{min-height:0;padding:16px 0}

  /* 两处固定定位会掉进刘海/灵动岛：
     进度条贴在 top:0，全面屏上整条被状态栏盖住；
     背景按钮在 top:16px，正好压在灵动岛上点不到。
     用 max() 保证非全面屏仍是原来的位置。 */
  .today-bar{top:env(safe-area-inset-top,0px)}
  .bg-btn{
    top:max(16px, calc(env(safe-area-inset-top) + 12px));
    right:max(16px, calc(env(safe-area-inset-right) + 12px));
  }
}

/* 触摸设备：去掉 300ms 点击延迟和 iOS 的蓝色高亮，
   并禁用那些「鼠标移上去才成立」的位移，否则手指点完会粘在 hover 态。 */
/* iOS 聚焦自动放大：input 字号小于 16px 时，Safari 会把整个页面缩放，
   失焦后也不还原。原来只在 ≤520px 补了 16px，521~880px 的平板竖屏
   和横屏手机（844×390 / 667×375）仍是 14.5px，一聚焦整页跳一下。
   这里取「窄屏 或 矮窗口 或 触屏」三者的并集：
   桌面（宽 >880 且高 >500 且有 hover）保持 14.5px 的设计值不受影响。 */
@media (max-width:880px), (max-height:500px), (hover:none){
  .search input{font-size:16px}
}

/* ============================================================
   横屏手机 / 矮窗口（2026-11-02）
   844×390 这种横屏视口会被 max-width:880 判成「窄屏 → 单列」，
   结果 1394px 内容塞进 390px 视口，要滚 3.6 屏 —— 而右半边屏幕全是空的。
   宽度够（≥640）就回到两列，同时把纵向留白压掉：
   横屏本来就矮，每一像素都该用在内容上。
   必须放在 880 块之后，否则被它覆盖。
   ============================================================ */
@media (max-height:520px) and (min-width:640px){
  body{
    padding-top:max(18px, calc(env(safe-area-inset-top) + 8px));
    padding-bottom:max(20px, calc(env(safe-area-inset-bottom) + 10px));
  }
  .wrap{
    grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
    max-width:1020px;gap:16px;padding-top:0;
  }
  .col-left,.col-right{gap:12px}
  /* 时钟纵向最占地方，横屏缩到 44px 仍然一眼可读 */
  .clock{font-size:44px;letter-spacing:-1.6px}
  .count-days{font-size:30px}
  /* 每日一句在横屏纯属占地方 */
  .mood-flavor{display:none}
  /* 快捷键坞是 fixed，矮窗口里会压住内容 */
  .cmd-hint{display:none}
}

@media(hover:none){
  body{-webkit-tap-highlight-color:transparent}
  a,button,input,label,.lg-switch,.pal-item,.todo-item{
    touch-action:manipulation;
  }
  .links a:hover,.links .add-link:hover,.bg-btn:hover{transform:none}
  .pal-item:hover{background:none}
}

/* 待办的删除键靠 hover 才显形，而触摸设备根本没有 hover ——
   原来手机上这个按钮永远是透明的，等于没法删待办。
   条件写成「窄屏 或 无 hover」而不是只看 hover：有些平板同时报 hover:hover，
   只看 hover 会漏掉；窄屏这条在真机上一定命中，也好测。 */
@media (max-width:880px),(hover:none){
  .todo-item .x{
    opacity:1;width:44px;height:44px;
    display:flex;align-items:center;justify-content:center;
    margin:-10px -8px -10px 0;padding:0;
    color:var(--dim);
  }
}

@media(max-width:520px){
  body{
    padding-top:max(58px, calc(env(safe-area-inset-top) + 22px));
    padding-right:max(14px, env(safe-area-inset-right));
    padding-bottom:max(28px, calc(env(safe-area-inset-bottom) + 12px));
    padding-left:max(14px, env(safe-area-inset-left));
  }
  .wrap{gap:14px;padding-top:52px}
  /* 页脚一行要塞「专注舱 / 贪吃蛇 / 隐私 / 设置」四个入口，每个都是
     flex-shrink:0，挤不动就只能溢出。390px 实测：多一个「第一次来」
     就把齿轮整个顶出屏幕。来访计数纯属锦上添花，窄屏让位给功能入口。 */
  #visit-line{display:none}
  .card{padding:18px;border-radius:18px}
  #time-card{padding:14px 4px 4px}
  .clock{font-size:44px;letter-spacing:-1.8px}
  .clock .sec{font-size:14px;margin-left:6px}
  .count-days{font-size:30px}
  .count{margin-top:16px;padding:10px 14px;gap:12px;border-radius:18px}
  .count-ring{width:46px;height:46px}
  .search{height:46px;padding:0 14px}
  .engine-pill{height:46px;padding:0 11px 0 13px;font-size:12px}
  .links{gap:8px}
  .links a,.links .add-link{padding:8px 14px;font-size:12.5px}
  .links a:hover,.links .add-link:hover{transform:none}
  .cursor-glow{display:none}
  .wx-temp{font-size:30px}
  .wx-extra{white-space:normal;line-height:1.45}
  .search input{font-size:16px}
  .bg-btn{
    top:max(14px, calc(env(safe-area-inset-top) + 10px));
    right:max(14px, calc(env(safe-area-inset-right) + 10px));
  }
  /* 退出按钮跟 .bg-btn 同一格，进出专注模式时位置不跳 */
  .focus-exit{
    top:max(14px, calc(env(safe-area-inset-top) + 10px));
    right:max(14px, calc(env(safe-area-inset-right) + 10px));
  }
  .suggest{left:0;right:0}
  .game-panel{padding:20px 16px;border-radius:20px}
  .snake-stage{width:min(340px,100%)}
  .snake-hud{gap:8px;margin:12px 0 10px}
  .snake-score{min-width:70px;padding:6px 10px}
  .snake-score b{font-size:16px}
  .game-sub{max-width:240px}
  .focus-mode .clock{font-size:52px}
  .pal-overlay{padding:8vh 12px 12px}
  .palette{max-height:calc(92vh - 32px);border-radius:18px}
  .pal-head{padding:11px 13px}
  .pal-input{font-size:16px}
  .pal-item{padding:10px 9px}
  .pal-item-hint,
  .pal-item-key{display:none}
  .pal-foot{display:none}

  /* 辅助文字原来 10~10.5px，手机上要眯眼。统一抬到 12px——
     这些都是次要信息，字号变大不会撑破布局（面板宽度是自适应的）。 */
  #bgp-rotate-sub,#bgp-doodle-sub,#bgp-glass-sub{font-size:12px}
  .bgp-note{font-size:12px}
  .count-label,.pct{font-size:12px}
  .foot{font-size:12px}
  .links a,.links .add-link{font-size:13px}
}

/* ============================================================
   锦上添花 · 时段氛围（五档色调 overlay；强调色仍固定系统蓝，不动 --accent）
   ============================================================ */
.mood{
  position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
}
.mood-l{
  position:absolute;inset:0;opacity:0;
  transition:opacity 2.6s var(--ease);
  will-change:opacity;
}
/* 浅色壁纸：淡彩薄雾 */
.mood-l[data-m="dawn"]{background:linear-gradient(180deg, rgba(255,176,112,.20) 0%, rgba(255,208,160,.07) 46%, transparent 72%)}
.mood-l[data-m="day"]{background:linear-gradient(180deg, rgba(110,168,255,.12) 0%, rgba(160,200,255,.04) 50%, transparent 74%)}
.mood-l[data-m="dusk"]{background:linear-gradient(180deg, rgba(255,132,88,.20) 0%, rgba(255,116,150,.10) 52%, transparent 76%)}
.mood-l[data-m="evening"]{background:linear-gradient(180deg, rgba(96,86,196,.16) 0%, rgba(52,62,132,.10) 58%, transparent 80%)}
/* 夜间：顶部压一层「天幕」，往下回落，兼顾夜色与正文可读性 */
.mood-l[data-m="night"]{background:linear-gradient(180deg, rgba(18,24,70,.52) 0%, rgba(24,30,82,.34) 15%, rgba(10,14,42,.26) 52%, rgba(8,10,30,.20) 100%)}
/* 深色壁纸：同色系稍微加重 */
html.dark-wall .mood-l[data-m="dawn"]{background:linear-gradient(180deg, rgba(255,150,80,.15) 0%, rgba(200,110,60,.06) 50%, transparent 76%)}
html.dark-wall .mood-l[data-m="day"]{background:linear-gradient(180deg, rgba(80,130,230,.11) 0%, transparent 70%)}
html.dark-wall .mood-l[data-m="dusk"]{background:linear-gradient(180deg, rgba(220,90,70,.17) 0%, rgba(140,50,90,.09) 55%, transparent 78%)}
html.dark-wall .mood-l[data-m="evening"]{background:linear-gradient(180deg, rgba(80,70,190,.20) 0%, rgba(30,36,96,.14) 60%, transparent 82%)}
html.dark-wall .mood-l[data-m="night"]{background:linear-gradient(180deg, rgba(20,26,80,.44) 0%, rgba(4,6,26,.36) 55%, rgba(2,4,16,.28) 100%)}

html.mood-dawn    .mood-l[data-m="dawn"],
html.mood-day     .mood-l[data-m="day"],
html.mood-dusk    .mood-l[data-m="dusk"],
html.mood-evening .mood-l[data-m="evening"],
html.mood-night   .mood-l[data-m="night"]{opacity:1}

html.no-motion .mood-l{transition:none}
@media (prefers-reduced-motion: reduce){ .mood-l{transition:none} }

/* 时段风味语（问候语下一行小字，按天轮换） */
.mood-flavor{
  margin-top:2px;font-size:12px;color:var(--dim);
  min-height:17px;letter-spacing:.02em;
  opacity:0;transform:translateY(-2px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  max-width:100%;
}
.mood-flavor.on{opacity:1;transform:none}
html.no-motion .mood-flavor{transition:none;opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){ .mood-flavor{transition:none} }

/* 节日小芯片（跟在日期后面） */
.fest-chip{
  display:none;margin-left:8px;padding:1px 9px 2px;border-radius:99px;
  font-size:11px;vertical-align:2px;letter-spacing:.03em;
  background:var(--glass-dot);border:1px solid var(--glass-line);
  color:var(--fg);white-space:nowrap;
}
.fest-chip.on{display:inline-block}

/* 卡片 3D 微倾斜：
   只操作独立的 rotate 属性，不碰 transform——.reveal 的入场动画
   正占着 transform，两不相干。perspective 给足纵深即可 */
.card.glassfx{
  perspective:640px;
  transition:background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease), rotate .16s var(--ease);
}
html.no-motion .card.glassfx{transition:background .45s ease, border-color .45s ease, box-shadow .45s ease}
@media (prefers-reduced-motion: reduce){
  .card.glassfx{transition:background .45s ease, border-color .45s ease, box-shadow .45s ease}
}

/* ============================================================
   锦上添花 · 成就面板
   ============================================================ */
.ach-overlay{
  position:fixed;inset:0;z-index:96;
  display:none;justify-content:center;align-items:flex-start;
  padding:12vh 16px 16px;
}
.ach-overlay.on{display:flex;animation:lgFade .16s ease}
.ach-scrim{
  position:absolute;inset:0;
  background:rgba(20,24,40,.28);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.ach-panel{
  position:relative;
  width:min(560px,100%);
  max-height:min(560px,80vh);
  display:flex;flex-direction:column;
  border-radius:20px;overflow:hidden;
  background:var(--glass-strong);
  -webkit-backdrop-filter:blur(44px) saturate(190%);
  backdrop-filter:blur(44px) saturate(190%);
  border:1px solid var(--glass-line);
  box-shadow:var(--glass-shadow);
  animation:lgPop .22s cubic-bezier(.34,1.45,.64,1);
}
.ach-head{
  display:flex;align-items:center;gap:10px;
  padding:13px 15px;flex:0 0 auto;
  border-bottom:1px solid var(--glass-line);
}
.ach-title{font-size:14px;font-weight:600;color:var(--fg)}
.ach-count{
  font-size:11px;color:var(--dim);
  padding:2px 9px;border-radius:99px;
  background:var(--glass-dot);border:1px solid var(--glass-line);
  font-variant-numeric:tabular-nums;
}
.ach-x{
  margin-left:auto;
  width:24px;height:24px;border-radius:50%;
  border:none;cursor:pointer;
  background:rgba(255,255,255,.5);color:var(--fg-2);
  font-size:12px;line-height:1;font-family:inherit;
  display:flex;align-items:center;justify-content:center;
  transition:background .16s var(--ease);
}
html.dark-wall .ach-x{background:rgba(255,255,255,.12)}
.ach-x:hover{background:rgba(255,255,255,.8)}
.ach-grid{
  flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
  padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:8px;
  scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.16) transparent;
}
.ach-grid::-webkit-scrollbar{width:6px}
.ach-grid::-webkit-scrollbar-thumb{background:rgba(0,0,0,.1);border-radius:3px}
html.dark-wall .ach-grid{scrollbar-color:rgba(255,255,255,.2) transparent}
html.dark-wall .ach-grid::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2)}
.ach-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 10px;border-radius:12px;
  background:rgba(255,255,255,.28);
  border:1px solid rgba(255,255,255,.34);
  transition:opacity .24s var(--ease);
}
html.dark-wall .ach-item{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1)}
.ach-item.locked{opacity:.45}
.ach-ico{
  flex:0 0 auto;width:34px;height:34px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;line-height:1;
  background:var(--glass-dot);border:1px solid var(--glass-line);
}
.ach-item.locked .ach-ico{filter:grayscale(1)}
.ach-body{min-width:0;flex:1 1 auto}
.ach-name{
  font-size:12.5px;font-weight:600;color:var(--fg);
  display:flex;align-items:baseline;gap:6px;
}
.ach-date{font-size:10px;font-weight:400;color:var(--faint);font-variant-numeric:tabular-nums}
.ach-hint{
  font-size:10.5px;color:var(--dim);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ach-note{
  flex:0 0 auto;padding:9px 15px 12px;
  font-size:10px;color:var(--faint);text-align:center;letter-spacing:.2px;
  border-top:1px solid var(--glass-line);
}
@media (max-width:520px){
  .ach-grid{grid-template-columns:1fr}
}

/* ============================================================
   锦上添花 · 快捷键速查面板（按 ? 唤起）
   ============================================================ */
.help-overlay{
  position:fixed;inset:0;z-index:97;
  display:none;justify-content:center;align-items:flex-start;
  padding:12vh 16px 16px;
}
.help-overlay.on{display:flex;animation:lgFade .16s ease}
.help-scrim{
  position:absolute;inset:0;
  background:rgba(20,24,40,.28);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.help-panel{
  position:relative;
  width:min(460px,100%);
  max-height:min(520px,78vh);
  display:flex;flex-direction:column;
  border-radius:20px;overflow:hidden;
  background:var(--glass-strong);
  -webkit-backdrop-filter:blur(44px) saturate(190%);
  backdrop-filter:blur(44px) saturate(190%);
  border:1px solid var(--glass-line);
  box-shadow:var(--glass-shadow);
  animation:lgPop .22s cubic-bezier(.34,1.45,.64,1);
}
.help-head{
  display:flex;align-items:center;
  padding:13px 15px;flex:0 0 auto;
  border-bottom:1px solid var(--glass-line);
}
.help-title{font-size:14px;font-weight:600;color:var(--fg)}
.help-x{
  margin-left:auto;
  width:24px;height:24px;border-radius:50%;
  border:none;cursor:pointer;
  background:rgba(255,255,255,.5);color:var(--fg-2);
  font-size:12px;line-height:1;font-family:inherit;
  display:flex;align-items:center;justify-content:center;
  transition:background .16s var(--ease);
}
html.dark-wall .help-x{background:rgba(255,255,255,.12)}
.help-x:hover{background:rgba(255,255,255,.8)}
.help-grid{
  flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
  padding:8px 10px 10px;
  display:flex;flex-direction:column;gap:2px;
  scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.16) transparent;
}
.help-grid::-webkit-scrollbar{width:6px}
.help-grid::-webkit-scrollbar-thumb{background:rgba(0,0,0,.1);border-radius:3px}
html.dark-wall .help-grid{scrollbar-color:rgba(255,255,255,.2) transparent}
.help-row{
  display:flex;align-items:center;gap:12px;
  padding:8px;border-radius:10px;
}
.help-row:nth-child(odd){background:rgba(255,255,255,.22)}
html.dark-wall .help-row:nth-child(odd){background:rgba(255,255,255,.05)}
.help-keys{
  flex:0 0 auto;display:flex;align-items:center;gap:4px;
  min-width:104px;
}
.help-plus{
  font-size:9.5px;color:var(--faint);line-height:1;
  padding:0 1px;user-select:none;
}
.help-k{
  flex:0 0 auto;
  font-size:10.5px;font-family:inherit;
  padding:2px 7px 3px;border-radius:6px;
  background:rgba(255,255,255,.62);
  border:1px solid var(--glass-line);
  color:var(--fg-2);line-height:1.3;white-space:nowrap;
}
html.dark-wall .help-k{background:rgba(255,255,255,.1)}
.help-d{font-size:11.5px;color:var(--dim);line-height:1.4}
.help-note{
  flex:0 0 auto;padding:9px 15px 12px;
  font-size:10px;color:var(--faint);text-align:center;letter-spacing:.2px;
  border-top:1px solid var(--glass-line);
}
@media (max-width:520px){
  .help-row{flex-direction:column;align-items:flex-start;gap:5px}
  .help-keys{min-width:0}
}

/* 页脚来访计数 */
.visit-line{
  color:var(--meta-ink);white-space:nowrap;
  font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis;
}

/* 命令面板里的计算结果 */
.pal-item-txt.pal-calc{
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
}
.pal-item-txt.pal-calc b{
  color:var(--fg);font-weight:600;
  font-size:1.06em;
}

/* ============================================================
   锦上添花 · 今日一览卡（补左栏空位：农历 / 下一节日 / 本周 / 最近搜索）
   ============================================================ */
.today-card{
  padding:15px 17px 13px;
  border-radius:22px;
}
.tc-top{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;margin-bottom:11px;
}
.tc-lunar{
  font-size:12.5px;font-weight:500;color:var(--fg-2);
  letter-spacing:.01em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.tc-next{
  font-size:10.5px;color:var(--faint);white-space:nowrap;flex:0 0 auto;
  font-variant-numeric:tabular-nums;
}
.tc-week{
  display:flex;align-items:center;gap:5px;
}
.tc-day{
  flex:1 1 0;min-width:0;height:23px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-size:10.5px;color:var(--faint);
  background:rgba(255,255,255,.32);
  border:1px solid rgba(255,255,255,.42);
  transition:background .4s var(--ease), color .4s var(--ease);
}
html.dark-wall .tc-day{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08)}
.tc-day.past{
  color:var(--dim);
  background:rgba(255,255,255,.52);
  border-color:rgba(255,255,255,.6);
}
html.dark-wall .tc-day.past{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.13)}
.tc-day.today{
  color:#fff;font-weight:600;
  background:var(--accent);border-color:transparent;
  box-shadow:0 2px 9px color-mix(in srgb,var(--accent) 32%,transparent);
}
.tc-recent{
  display:flex;flex-wrap:wrap;gap:6px;
}
.tc-recent:empty{display:none}
.tc-recent:not(:empty){margin-top:10px}
.tc-chip{
  font-size:11px;color:var(--dim);text-decoration:none;
  padding:3px 10px 4px;border-radius:99px;
  background:var(--pill);border:1px solid var(--pill-line);
  box-shadow:var(--pill-shadow);
  max-width:118px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:color .16s var(--ease), background .16s var(--ease), border-color .16s var(--ease);
}
.tc-chip:hover{
  color:var(--fg);
  background:rgba(255,255,255,.82);
}
html.dark-wall .tc-chip:hover{background:rgba(255,255,255,.18)}

/* 页脚中间的快捷键提示 */
.foot-hint{
  flex:1 1 auto;min-width:0;text-align:center;
  font-size:10.5px;color:var(--meta-ink);letter-spacing:.04em;
  white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.foot-hint kbd{
  font-family:inherit;font-size:10px;line-height:1;
  padding:1px 5px 2px;border-radius:5px;
  background:rgba(255,255,255,.78);
  border:1px solid var(--hair);
  color:var(--fg-2);
}
html.dark-wall .foot-hint kbd{background:rgba(255,255,255,.14)}
@media (max-width:760px){ .foot-hint{display:none} }

/* ============================================================
   背景轮播开关
   ============================================================ */
.bgp-rotate{
  display:flex;align-items:center;gap:12px;
  margin-top:12px;padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.34);
  border:1px solid rgba(255,255,255,.44);
}
html.dark-wall .bgp-rotate{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.09);
}
.bgp-rotate-txt{
  flex:1 1 auto;min-width:0;
  display:flex;flex-direction:column;gap:2px;
}
.bgp-rotate-txt b{
  font-size:12px;font-weight:600;color:var(--fg);
  letter-spacing:.01em;
}
.bgp-rotate-txt i{
  font-size:10.5px;font-style:normal;color:var(--faint);
  line-height:1.45;
}
.lg-switch{
  flex:0 0 auto;position:relative;
  width:42px;height:25px;border-radius:99px;
  border:none;padding:0;cursor:pointer;
  background:rgba(120,120,128,.26);
  transition:background .24s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
html.dark-wall .lg-switch:not(.on){background:rgba(255,255,255,.18)}
.lg-switch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lg-switch.on{background:var(--accent)}
.lg-switch-knob{
  position:absolute;top:2.5px;left:2.5px;
  width:20px;height:20px;border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.18), 0 0 0 .5px rgba(0,0,0,.04);
  transition:transform .24s cubic-bezier(.3,1.35,.6,1);
}
.lg-switch.on .lg-switch-knob{transform:translateX(17px)}
html.no-motion .lg-switch,
html.no-motion .lg-switch-knob{transition:none}
@media (prefers-reduced-motion: reduce){
  .lg-switch,.lg-switch-knob{transition:none}
}

/* ============================================================
   专注舱 · 今日学习卡片
   数据来自 study.html 写入的 localStorage["study_data_v1"]
   ============================================================ */
.study-card{
  display:block;text-decoration:none;color:inherit;
  padding:20px 22px 18px;
  transition:transform .24s var(--ease), box-shadow .24s var(--ease);
}
.study-card:hover{transform:translateY(-2px)}
.study-card:active{transform:translateY(0)}
.study-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.sc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.sc-head .label{margin-bottom:0;flex:1}
.sc-go{
  flex-shrink:0;font-size:11px;color:var(--faint);
  transition:color .24s var(--ease), transform .24s var(--ease);
}
.study-card:hover .sc-go{color:var(--accent);transform:translateX(2px)}

.sc-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.sc-n{text-align:center;min-width:0}
.sc-n b{
  display:block;font-size:21px;font-weight:400;line-height:1.15;
  font-variant-numeric:tabular-nums;color:var(--fg);
  transition:color .4s var(--ease);
}
.sc-n b.zero{color:var(--faint);font-weight:300}
.sc-n span{display:block;margin-top:3px;font-size:10px;color:var(--faint);letter-spacing:.02em;white-space:nowrap}

/* 近 7 天迷你柱 */
.sc-spark{
  display:flex;align-items:flex-end;gap:3px;height:26px;margin-top:14px;
}
.sc-spark[hidden]{display:none}
.sc-spark i{
  flex:1;min-width:0;border-radius:2px 2px 1px 1px;
  background:color-mix(in srgb, var(--accent) 40%, transparent);
  transition:height .4s var(--ease), background .4s var(--ease);
}
.sc-spark i.sc-cur{
  background:var(--accent);
  box-shadow:0 0 8px var(--accent-soft);
}
/* 类名必须带 sc- 前缀：全局 .empty 带 padding:16px 0，会把这根 2px 空柱撑成 32px */
.sc-spark i.sc-zero{background:var(--track);box-shadow:none;padding:0}

.sc-empty{
  font-size:11.5px;color:var(--faint);line-height:1.65;
  padding-top:12px;
}
.sc-empty[hidden]{display:none}

@media (max-width:400px){
  .study-card{padding:18px 18px 16px}
  .sc-n b{font-size:19px}
  .sc-n span{font-size:9.5px}
}

@media (prefers-reduced-motion: reduce){
  .study-card,.sc-go,.sc-spark i{transition:none}
  .study-card:hover{transform:none}
}

/* ============================================================
   液态玻璃 · WebGL 增强（默认关闭，背景面板里开）
   开启时卡片背景交给 canvas，CSS 的玻璃层让位，避免两套叠加
   ============================================================ */
.glassfx > .lg-canvas{
  /* 只铺 padding box：外面那 1px 边框留着，负责给卡片一个清晰轮廓，
     折射交给 canvas。两者叠在一起比纯 canvas 清楚得多。 */
  position:absolute;inset:0;
  width:100%;height:100%;
  border-radius:inherit;
  z-index:0;
  pointer-events:none;
  display:block;
}
html.gl-glass #weather-card,
html.gl-glass #links-card,
html.gl-glass #todo-block,
html.gl-glass #study-card,
html.gl-glass #today-card{
  background:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:var(--lift);
}

/* ============================================================
   按压反馈（2026-11-02）
   以前只有链接和复选框有 :active，其余按钮点下去毫无回应 ——
   在玻璃这种「软」材质上，没有回弹就显得点了个寂寞。
   ============================================================ */
.foot a:active,.foot .foot-link:active,.gear:active,
.bg-btn:active,.cmd-pal:active,.engine-pill:active{opacity:.6}
.lg-btn:active{transform:scale(.96)}
.bgp-x:active,.game-x:active,.ach-x:active,.help-x:active{transform:scale(.9)}
.lg-switch:active{transform:scale(.96)}