:root {
  /* yysuni 配色体系 */
  --color-card: rgba(255, 255, 255, 0.62);
  --color-card-border: rgba(255, 255, 255, 0.75);
  --color-brand: #2fcbe7;
  --color-brand-2: #1ba7c4;
  /* 三级文字灰阶（对比度经计算：卡片底 #eff6fa 上 8.0 / 4.8 / 3.35，均过 WCAG） */
  --text: #55493f;
  --text-soft: #7a695b;
  --text-muted: #978271;
  /* 压在品牌渐变（--color-brand→--color-brand-2）之上的文字色。
     日间品牌是中明度色，白字对比度够；夜间品牌是极亮色（星光 #a9c7ff / #ffe0a0 等），
     白字只有 1.3~1.7:1 等于看不见，所以夜间换成深墨蓝（见下方 dark 块）。 */
  --text-on-brand: #fff;
  --radius: 32px;
  --radius-sm: 20px;
  --radius-xs: 14px;

  /* 衍生变量：跟随 palette 的 RGB 三元组，供光晕 / 阴影 rgba 使用（避免硬编码旧配色残留） */
  --color-brand-rgb: 47, 203, 231;
  --shadow-color: 91, 66, 63;
  /* 浮层表面（联想下拉这类「跳出卡片」的面板）：日间沿用原白透底 */
  --surface-popover: rgba(255, 255, 255, 0.86);
  --surface-popover-border: rgba(255, 255, 255, 0.90);
  --surface-chip: rgba(255, 255, 255, 0.55);   /* 移动端导航图标底（嵌在导航条上的小块） */

  /* 表面层级（浅色态）：raised=嵌在卡片里的块，sunken=下沉/表盘，line=描边，hover=悬停 */
  --surface-raised: rgba(255, 255, 255, 0.70);
  --surface-sunken:  rgba(255, 255, 255, 0.55);
  --surface-line:    rgba(255, 255, 255, 0.75);
  --surface-line-soft: rgba(255, 255, 255, 0.60);
  --hover-soft: rgba(255, 255, 255, 0.55);
}

/* 马卡龙配色（与昼夜模式 data-theme 独立，由 data-palette 控制） */
:root[data-palette="macaron"] {
  --color-brand: #ff8fab;
  --color-brand-2: #ffd6a5;
  --color-card: rgba(255, 240, 245, 0.62);
  --color-card-border: rgba(255, 143, 171, 0.40);
  --text: #5b434f;
  --text-soft: #846172;
  --text-muted: #a3788d;
  /* 马卡龙下的衍生变量：品牌粉 / 阴影紫褐，光晕与阴影随之切换 */
  --color-brand-rgb: 255, 143, 171;
  --shadow-color: 109, 76, 90;
}

/* 马卡龙浅色模式：背景同步切换为粉暖调，与品牌色统一 */
html[data-palette="macaron"] body {
  background:
    radial-gradient(120% 120% at 12% 8%, #fff0f5 0%, rgba(255,240,245,0) 55%),
    radial-gradient(120% 120% at 88% 18%, #ffe3ec 0%, rgba(255,227,236,0) 50%),
    radial-gradient(140% 120% at 78% 92%, #fff5e6 0%, rgba(255,245,230,0) 55%),
    linear-gradient(160deg, #ffeef3 0%, #ffd9e2 45%, #fff3e0 100%);
}
/* 马卡龙下天气 hero 同步暖粉调 */
html[data-palette="macaron"] .weather-hero {
  background: linear-gradient(160deg, #ffeef3 0%, #fff3f7 55%, #ffffff 100%);
}
html[data-theme="dark"][data-palette="macaron"] {
  --color-brand: #ff9ebb;
  --color-brand-2: #ffd6a5;
  --color-card: rgba(48, 32, 42, 0.62);
  --color-card-border: rgba(255, 143, 171, 0.28);
  --text: #f2dde7;
  --text-soft: #be9eaf;
  --text-muted: #9d8290;
  --color-brand-rgb: 255, 158, 187;
  --shadow-color: 0, 0, 0;
}

/* ===================== 海洋 ocean ===================== */
:root[data-palette="ocean"] {
  --color-brand: #22d3ee;
  --color-brand-2: #3b82f6;
  --color-card: rgba(239, 246, 255, 0.62);
  --color-card-border: rgba(34, 211, 238, 0.40);
  --text: #374a5d;
  --text-soft: #506c88;
  --text-muted: #6386a9;
  --color-brand-rgb: 34, 211, 238;
  --shadow-color: 30, 58, 95;
}
html[data-palette="ocean"] body {
  background:
    radial-gradient(120% 120% at 12% 8%, #e6f7ff 0%, rgba(230,247,255,0) 55%),
    radial-gradient(120% 120% at 88% 18%, #d6ecff 0%, rgba(214,236,255,0) 50%),
    radial-gradient(140% 120% at 78% 92%, #eaf2ff 0%, rgba(234,242,255,0) 55%),
    linear-gradient(160deg, #e0f2fe 0%, #d4e8f3 45%, #e6eff7 100%);
}
html[data-theme="dark"][data-palette="ocean"] {
  --color-brand: #67e8f9;
  --color-brand-2: #60a5fa;
  --color-card: rgba(15, 30, 50, 0.62);
  --color-card-border: rgba(34, 211, 238, 0.28);
  --text: #dbeafe;
  --text-soft: #7ca4c7;
  --text-muted: #6686a3;
  --color-brand-rgb: 103, 232, 249;
  --shadow-color: 0, 0, 0;
}

/* ===================== 薄荷 mint ===================== */
:root[data-palette="mint"] {
  --color-brand: #34d399;
  --color-brand-2: #6ee7b7;
  --color-card: rgba(240, 253, 244, 0.62);
  --color-card-border: rgba(52, 211, 153, 0.40);
  --text: #30533c;
  --text-soft: #457856;
  --text-muted: #55946a;
  --color-brand-rgb: 52, 211, 153;
  --shadow-color: 30, 83, 71;
}
html[data-palette="mint"] body {
  background:
    radial-gradient(120% 120% at 12% 8%, #e9fbf1 0%, rgba(233,251,241,0) 55%),
    radial-gradient(120% 120% at 88% 18%, #d9f5e6 0%, rgba(217,245,230,0) 50%),
    radial-gradient(140% 120% at 78% 92%, #eefbf3 0%, rgba(238,251,243,0) 55%),
    linear-gradient(160deg, #e2f8ec 0%, #d4f0e0 45%, #eafaf1 100%);
}
html[data-theme="dark"][data-palette="mint"] {
  --color-brand: #6ee7b7;
  --color-brand-2: #a7f3d0;
  --color-card: rgba(12, 36, 26, 0.62);
  --color-card-border: rgba(52, 211, 153, 0.28);
  --text: #d1fae5;
  --text-soft: #67b18b;
  --text-muted: #549172;
  --color-brand-rgb: 110, 231, 183;
  --shadow-color: 0, 0, 0;
}

/* ===================== 暮光 violet ===================== */
:root[data-palette="violet"] {
  --color-brand: #a78bfa;
  --color-brand-2: #f0abfc;
  --color-card: rgba(245, 240, 255, 0.62);
  --color-card-border: rgba(167, 139, 250, 0.40);
  --text: #513f70;
  --text-soft: #765ca3;
  --text-muted: #9272ca;
  --color-brand-rgb: 167, 139, 250;
  --shadow-color: 76, 29, 149;
}
html[data-palette="violet"] body {
  background:
    radial-gradient(120% 120% at 12% 8%, #f3ecff 0%, rgba(243,236,255,0) 55%),
    radial-gradient(120% 120% at 88% 18%, #ecdcff 0%, rgba(236,220,255,0) 50%),
    radial-gradient(140% 120% at 78% 92%, #f7f0ff 0%, rgba(247,240,255,0) 55%),
    linear-gradient(160deg, #efe6ff 0%, #e4d4f3 45%, #f2ebfb 100%);
}
html[data-theme="dark"][data-palette="violet"] {
  --color-brand: #c4b5fd;
  --color-brand-2: #f5b8fc;
  --color-card: rgba(30, 20, 50, 0.62);
  --color-card-border: rgba(167, 139, 250, 0.28);
  --text: #ede9fe;
  --text-soft: #af91d8;
  --text-muted: #9077b1;
  --color-brand-rgb: 196, 181, 253;
  --shadow-color: 0, 0, 0;
}

/* ===================== 落日 sunset ===================== */
:root[data-palette="sunset"] {
  --color-brand: #fb7185;
  --color-brand-2: #fdba74;
  --color-card: rgba(255, 245, 238, 0.62);
  --color-card-border: rgba(251, 113, 133, 0.40);
  --text: #6c3e23;
  --text-soft: #9d5a33;
  --text-muted: #c26f3f;
  --color-brand-rgb: 251, 113, 133;
  --shadow-color: 124, 45, 18;
}
html[data-palette="sunset"] body {
  background:
    radial-gradient(120% 120% at 12% 8%, #fff1e8 0%, rgba(255,241,232,0) 55%),
    radial-gradient(120% 120% at 88% 18%, #ffe2d6 0%, rgba(255,226,214,0) 50%),
    radial-gradient(140% 120% at 78% 92%, #fff5e0 0%, rgba(255,245,224,0) 55%),
    linear-gradient(160deg, #ffe9dc 0%, #ffd9c4 45%, #ffeede 100%);
}
html[data-theme="dark"][data-palette="sunset"] {
  --color-brand: #fb92a3;
  --color-brand-2: #fdc78f;
  --color-card: rgba(50, 24, 14, 0.62);
  --color-card-border: rgba(251, 113, 133, 0.28);
  --text: #ffe5d6;
  --text-soft: #ca9479;
  --text-muted: #a57963;
  --color-brand-rgb: 251, 146, 163;
  --shadow-color: 0, 0, 0;
}

/* ===================== 星光 starlight（夜间主题） ===================== */
:root[data-palette="starlight"] {
  --color-brand: #8ab4ff;
  --color-brand-2: #ffd98a;
  --color-card: rgba(22, 28, 56, 0.55);
  --color-card-border: rgba(150, 170, 255, 0.28);
  --text: #abb9ee;
  --text-soft: #919dca;
  --text-muted: #7780a5;
  --color-brand-rgb: 138, 180, 255;
  --shadow-color: 0, 0, 0;
}
html[data-palette="starlight"] body {
  background:
    radial-gradient(1.6px 1.6px at 18% 22%, rgba(255,255,255,.90), transparent),
    radial-gradient(1.4px 1.4px at 68% 16%, rgba(255,255,255,.70), transparent),
    radial-gradient(1.8px 1.8px at 42% 64%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.4px 1.4px at 82% 54%, rgba(255,255,255,.60), transparent),
    radial-gradient(1.6px 1.6px at 58% 84%, rgba(255,255,255,.70), transparent),
    radial-gradient(1.4px 1.4px at 12% 78%, rgba(255,255,255,.65), transparent),
    radial-gradient(1.4px 1.4px at 90% 30%, rgba(255,255,255,.55), transparent),
    linear-gradient(160deg, #070b1f 0%, #0e1430 50%, #161d44 100%);
}
html[data-theme="dark"][data-palette="starlight"] {
  --color-card: rgba(14, 19, 44, 0.62);
  --color-card-border: rgba(150, 170, 255, 0.22);
  --color-brand: #a9c7ff;
  --color-brand-2: #ffe0a0;
  --color-brand-rgb: 169, 199, 255;
  --text: #a7b4e9;
  --text-soft: #8d98c5;
  --text-muted: #747da2;
}
html[data-palette="starlight"] .weather-hero {
  background:
    radial-gradient(1.4px 1.4px at 30% 30%, rgba(255,255,255,.80), transparent),
    radial-gradient(1.2px 1.2px at 70% 50%, rgba(255,255,255,.60), transparent),
    linear-gradient(160deg, #0e1430 0%, #1b2350 55%, #242c5c 100%);
}

/* 各新主题天气 hero 同步配色（避免浅色模式仍显示默认蓝） */
html[data-palette="ocean"]  .weather-hero { background: linear-gradient(160deg, #e6f7ff 0%, #f3fbff 55%, #ffffff 100%); }
html[data-palette="mint"]   .weather-hero { background: linear-gradient(160deg, #e9fbf1 0%, #f4fdf8 55%, #ffffff 100%); }
html[data-palette="violet"] .weather-hero { background: linear-gradient(160deg, #f3ecff 0%, #faf6ff 55%, #ffffff 100%); }
html[data-palette="sunset"] .weather-hero { background: linear-gradient(160deg, #fff1e8 0%, #fff8f2 55%, #ffffff 100%); }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--text);
  transition: background 0.5s ease, color 0.5s ease;
  background:
    radial-gradient(120% 120% at 12% 8%, #eaf4fb 0%, rgba(234,244,251,0) 55%),
    radial-gradient(120% 120% at 88% 18%, #d8ecf6 0%, rgba(216,236,246,0) 50%),
    radial-gradient(140% 120% at 78% 92%, #eef3f4 0%, rgba(238,243,244,0) 55%),
    linear-gradient(160deg, #e3f0f7 0%, #d4e8f3 45%, #e8eef0 100%);
  min-height: 100vh;
  overflow-x: hidden;
}

.app {
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 16px;
}

/* 三栏布局（左 / 中 / 右 铺满） */
.layout {
  flex: 1;
  display: flex;
  gap: 14px;
  width: 100%;
  align-items: stretch;
  min-height: 0;
}

/* 整体背景卡（左栏 / 右栏各自一张大卡） */
.panel {
  background: var(--color-card);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius);
  box-shadow: 0 16px 40px -8px rgba(var(--shadow-color), 0.18);
}

/* 内嵌小卡片（右栏内每个小功能区域独立成卡） */
.w-card {
  background: rgba(255, 255, 255, 0.50);
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 18px -6px rgba(var(--shadow-color), 0.14);
  padding: 16px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.5s ease, border-color 0.5s ease, color 0.5s ease;
}
.w-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -8px rgba(var(--shadow-color), 0.20);
}

/* 左：导航栏 */
.sidebar {
  width: 168px;
  flex: 0 0 168px;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
}
.sidebar-title {
  margin-bottom: 14px;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--text);
}
/* Tap 三字：主题色 + 呼吸光晕 */
.title-accent {
  position: relative;
  z-index: 0;                 /* 建立层叠上下文：让 ::before 光晕只在其内部，不会跑到卡片背景之后 */
  display: inline-block;
  color: var(--color-brand);
  /* 静态清晰光晕（始终可见，无重绘开销）— 强度按 70% 调整 */
  text-shadow: 0 0 6px rgba(var(--color-brand-rgb), 0.42), 0 0 16px rgba(var(--color-brand-rgb), 0.28);
}
/* 呼吸光晕：伪元素模糊光层 + transform/opacity 脉冲（合成层友好，不重绘文字）
   区别于早期直接动画 text-shadow（每帧重绘文字导致卡顿），此方案零重绘 */
.title-accent::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 160%; height: 200%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
              rgba(var(--color-brand-rgb), 0.385) 0%,
              rgba(var(--color-brand-rgb), 0) 70%);
  filter: blur(8px);
  pointer-events: none;
  z-index: -1;
  will-change: transform, opacity;
  animation: tapGlow 2.6s ease-in-out infinite;
}
@keyframes tapGlow {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.9); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .title-accent::before { animation: none; opacity: 0.49; }
}
.nav-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.nav-icon {
  display: inline-block;
  margin-right: 8px;
  font-size: 15px;
  line-height: 1;
}
.nav-icon .ic-emoji { font-size: 15px; display: inline-flex; align-items: center; justify-content: center; }
.nav-icon .ic-wrap { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; }
.nav-icon .ic-img { width: 18px; height: 18px; object-fit: contain; border-radius: 4px; }
.nav-icon .ic-fb { font-size: 10px; font-weight: 700; color: var(--text-muted); }
.nav-icon .ic-svg { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.nav-icon .ic-svg svg { width: 100%; height: 100%; display: block; }
.nav-icon svg { width: 18px; height: 18px; display: block; }
/* 左：昼夜切换开关（Uiverse.io by Mohammad-Rahme-576，已适配本页布局） */
.sidebar nav {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.switch {
  display: inline-block;
  width: 4.5em;
  height: 2.25em;
  position: relative;
  font-size: 18px;
  user-select: none;
  cursor: pointer;
  margin: 0;          /* 覆盖 Uiverse 默认外边距，交由下方定位控制 */
  margin-top: auto;    /* 顶到左栏底部 */
  align-self: center;  /* 水平居中 */
}
/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
/* Slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, #87ceeb, #e0f6ff);
  border-radius: 50px;
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.1),
    inset 0 -5px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 500px;
}
/* Inner slider for additional styling */
.slider-inner {
  position: absolute;
  top: 0.225em;
  left: 0.225em;
  height: 1.8em;
  width: 1.8em;
  border-radius: 50%;
  background-color: #ffd700;
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.2),
    inset 0 -2px 5px rgba(0, 0, 0, 0.2);
  transform: translateZ(5px);
}
/* Checked state */
.switch input:checked + .slider {
  background: linear-gradient(to right, #1a237e, #3949ab);
}
.switch input:checked + .slider .slider-inner {
  transform: translateX(2.25em) translateZ(5px) rotateY(180deg);
  background-color: #ffffff;
}
/* Focus state - no visible outline on click */
.switch input:focus + .slider {
  outline: none;
  box-shadow: none;
}
.switch:hover .slider {
  background: linear-gradient(to right, #64b5f6, #e3f2fd);
}
.switch input:checked:hover + .slider {
  background: linear-gradient(to right, #283593, #5c6bc0);
}
/* Animation for slider inner */
@keyframes sunPulse {
  /* 原 box-shadow 脉冲每帧重绘圆盘 → 改为 opacity 脉冲（合成层友好） */
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.82; }
}
@keyframes moonPhase {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.82; }
}
.switch input:not(:checked) + .slider .slider-inner { animation: sunPulse 3s infinite; }
.switch input:checked + .slider .slider-inner { animation: moonPhase 5s infinite; }
/* Stars effect */
@keyframes twinkle {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 1; }
}
.slider::before,
.slider::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  background-color: #ffffff;
  border-radius: 50%;
  transition: all 0.6s ease;
  opacity: 0;
}
.slider::before { top: 20%; left: 30%; }
.slider::after  { bottom: 25%; right: 25%; }
.switch input:checked + .slider::before,
.switch input:checked + .slider::after {
  opacity: 1;
  animation: twinkle 2s infinite;
}
.switch input:checked + .slider::before { animation-delay: 0.5s; }
/* Cloud effect for day mode */
.slider-inner::before,
.slider-inner::after {
  content: "";
  position: absolute;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  transition: all 0.6s ease;
}
.slider-inner::before { width: 1em; height: 1em; top: -0.5em; left: -0.2em; }
.slider-inner::after  { width: 1.2em; height: 1.2em; bottom: -0.6em; right: -0.3em; }
.switch input:checked + .slider .slider-inner::before,
.switch input:checked + .slider .slider-inner::after { opacity: 0; }
/* Crater effect for night mode */
.switch input:checked + .slider .slider-inner::before {
  width: 0.6em; height: 0.6em;
  background-color: rgba(0, 0, 0, 0.2);
  top: 0.3em; left: 0.3em; opacity: 1;
}
.switch input:checked + .slider .slider-inner::after {
  width: 0.4em; height: 0.4em;
  background-color: rgba(0, 0, 0, 0.15);
  bottom: 0.5em; right: 0.5em; opacity: 1;
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .switch { width: 3.75em; height: 1.875em; }
  .slider-inner { height: 1.5em; width: 1.5em; }
  .switch input:checked + .slider .slider-inner { transform: translateX(1.875em) translateZ(5px) rotateY(180deg); }
}
@media (max-width: 480px) {
  .switch { width: 3em; height: 1.5em; }
  .slider-inner { height: 1.2em; width: 1.2em; }
  .switch input:checked + .slider .slider-inner { transform: translateX(1.5em) translateZ(5px) rotateY(180deg); }
}
/* High contrast mode */
@media (forced-colors: active) {
  .slider { background: Canvas; border: 2px solid ButtonText; }
  .switch input:checked + .slider { background: Highlight; }
  .slider-inner { background-color: ButtonFace; }
}
/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .switch, .slider, .slider-inner { transition: none; }
  .switch input:checked + .slider .slider-inner,
  .switch input:not(:checked) + .slider .slider-inner,
  .switch input:checked + .slider::before,
  .switch input:checked + .slider::after { animation: none; }
}

/* 整页主题平滑过渡：卡片/文字/边框随 data-theme 渐变切换（.w-card 已在原规则扩展） */
body,
.search-card,
.site-tile,
.cat-card,
.nav-item,
.sidebar,
.content,
.sidebar-title {
  transition: background-color 0.5s ease, border-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
}

.nav-item {
  padding: 13px 16px;
  border-radius: var(--radius-xs);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-soft);
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}
.nav-item:hover { background: rgba(255, 255, 255, 0.55); color: var(--text); }
.nav-item.active {
  background: linear-gradient(135deg, var(--color-brand), var(--color-brand-2));
  color: var(--text-on-brand);
  box-shadow: 0 6px 16px rgba(var(--color-brand-rgb), 0.35);
}

/* 中：内容区 */
.content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.search-card {
  position: sticky;
  top: 0;
  z-index: 30;
  /* 吸顶栏背后每帧都在滚动，blur 每帧重算 = 掉帧主因之一。去掉模糊（关键性能修复），
     背景用已定义的 var(--color-card) 半透明实底（不依赖未定义的 --color-card-strong），
     滚动时不再做实时模糊合成（减少负载）。 */
  background: var(--color-card);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius);
  box-shadow: 0 16px 40px -8px rgba(var(--shadow-color), 0.18);
  padding: 18px 20px 16px;
}
.hero-greet {
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--text);
  margin-bottom: 14px;
}
.search-form {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: rgba(255, 255, 255, 0.78);
  border-radius: 80px;
  padding: 6px 6px 6px 16px;
  box-shadow: 0 4px 18px rgba(var(--shadow-color), 0.10);
  border: 1px solid rgba(255, 255, 255, 0.85);
}
/* 搜索引擎切换下拉（参考 Uiverse.io by gharsh11032000，适配玻璃拟态主题） */
.engine-menu {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
  width: fit-content;
  flex: 0 0 auto;
  display: flex;
  list-style: none;
  position: relative;
}
.engine-menu .link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  font-weight: 600;
  color: var(--text-soft);
  background: var(--color-card);
  border: 1px solid var(--color-card-border);
  transition: background-color 0.48s cubic-bezier(0.23, 1, 0.32, 1),
              border-color 0.48s cubic-bezier(0.23, 1, 0.32, 1),
              color 0.48s cubic-bezier(0.23, 1, 0.32, 1),
              transform 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}
.engine-menu .link::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-brand), var(--color-brand-2));
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.48s cubic-bezier(0.23, 1, 0.32, 1);
}
.engine-menu .link svg {
  width: 14px;
  height: 14px;
  fill: var(--text-soft);
  transition: fill 0.3s ease, transform 0.3s ease;
}
.engine-menu .item { position: relative; }
.engine-menu .item .submenu {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--color-card-border);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.22);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 30;
  pointer-events: none;
  list-style: none;
  padding: 6px;
  margin: 0;
}
.engine-menu .item.open .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.engine-menu .item.open .link {
  color: var(--text-on-brand);
  border-radius: 14px;
}
.engine-menu .item.open .link::after {
  transform: scaleX(1);
  transform-origin: right;
}
.engine-menu .item.open .link svg {
  fill: var(--text-on-brand);
  transform: rotate(-180deg);
}
.engine-menu .submenu-item { width: 100%; }
.engine-menu .submenu-link {
  display: block;
  width: 100%;
  padding: 10px 18px;
  position: relative;
  text-align: center;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  color: var(--text);
  border-radius: 10px;
  transition: background-color 0.3s cubic-bezier(0.23, 1, 0.32, 1),
              color 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}
.engine-menu .submenu-link:hover {
  color: var(--text-on-brand);
  background: linear-gradient(135deg, var(--color-brand), var(--color-brand-2));
}
/* 输入容器：给联想下拉提供定位祖先 */
.search-box { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 15px;
  color: var(--text);
  outline: none;
  padding: 8px 0;
}
.search-input::placeholder { color: var(--text-muted); }

/* ====== 搜索联想下拉（输入即出，命中输入串高亮） ====== */
.search-suggest {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 300;
  padding: 6px 0;
  background: var(--surface-popover);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border: 1px solid var(--surface-popover-border);
  border-radius: 16px;
  box-shadow: 0 18px 44px -16px rgba(var(--shadow-color), 0.42);
  animation: fade 0.16s ease;   /* fade 只动 opacity，不会打乱本面板的定位 */
  max-height: min(52vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.search-suggest.hidden { display: none; }
.ss-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.ss-item:hover,
.ss-item.active {
  background: rgba(var(--color-brand-rgb), 0.12);
}
.ss-ico {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: var(--text-muted);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  opacity: 0.75;
}
.ss-item.active .ss-ico { color: var(--color-brand); }
.ss-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-text em { font-style: normal; font-weight: 700; color: var(--color-brand); }
/* 联想词高亮：暗底用亮红 #ff8a8a（对深蓝底 6.4:1），日间走 --color-brand，属刻意区分不是遗漏 */
html[data-theme="dark"] .ss-text em { color: #ff8a8a; }
.search-btn {
  border: none;
  border-radius: 60px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-on-brand);
  background: linear-gradient(135deg, var(--color-brand), var(--color-brand-2));
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(var(--color-brand-rgb), 0.35);
  transition: transform 0.2s ease;
}
.search-btn:hover { transform: scale(1.03); }

/* 中：分类大卡片 + 网址小卡片（整体滚动） */
.site-categories {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  padding: 10px;
  scroll-behavior: smooth;
  scrollbar-width: none;          /* Firefox 隐藏滚动条 */
  -ms-overflow-style: none;       /* IE/Edge 隐藏滚动条 */
}
.site-categories::-webkit-scrollbar { display: none; }  /* Chrome/Safari 隐藏滚动条 */

.cat-card {
  background: var(--color-card);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius);
  box-shadow: 0 4px 14px -8px rgba(var(--shadow-color), 0.12);
  padding: 16px 18px 20px;
  scroll-margin-top: 8px;
  transition: background-color 0.5s ease, border-color 0.5s ease, box-shadow 0.35s ease, transform 0.35s ease;
}
.cat-card.focused {
  box-shadow: 0 0 0 3px var(--color-brand), 0 18px 44px -10px rgba(var(--color-brand-rgb), 0.30);
  transform: translateY(-2px);
}
.cat-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 14px;
}
.cat-title::before {
  content: "";
  width: 6px;
  height: 18px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--color-brand), var(--color-brand-2));
}
.cat-title .cat-ico { display: inline-flex; align-items: center; justify-content: center; }
.cat-title .cat-ico .ic-emoji { font-size: 18px; display: inline-flex; align-items: center; justify-content: center; }
.cat-title .cat-ico .ic-wrap { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; }
.cat-title .cat-ico .ic-img { width: 20px; height: 20px; object-fit: contain; border-radius: 5px; }
.cat-title .cat-ico .ic-fb { font-size: 11px; font-weight: 700; color: var(--text-muted); }
.cat-title .cat-ico svg { width: 20px; height: 20px; display: block; }
.cat-title .cat-ico .ic-svg { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.cat-title .cat-ico .ic-svg svg { width: 100%; height: 100%; display: block; }
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
}
.site-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 12px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.80);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 22px -8px rgba(var(--shadow-color), 0.14);
  text-decoration: none;
  color: var(--text-soft);
  will-change: transform;
  transition: transform 0.22s ease, box-shadow 0.22s ease, background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}
.site-tile:hover {
  transform: translateY(-4px);
  background: #fff;
  box-shadow: 0 16px 36px -10px rgba(var(--shadow-color), 0.22);
  color: var(--color-brand);
}
.site-tile .st-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.site-tile .st-icon .ic-wrap { position: relative; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; }
.site-tile .st-icon .ic-img { width: 34px; height: 34px; object-fit: contain; border-radius: 8px; position: absolute; inset: 0; }
.site-tile .st-icon .ic-fb { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.site-tile .st-icon .ic-svg { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
.site-tile .st-icon .ic-svg svg { width: 100%; height: 100%; display: block; }
.site-tile .st-icon .ic-emoji { font-size: 30px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; }
.site-tile .st-name { font-size: 14px; font-weight: 600; text-align: center; }
.site-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  padding: 40px 0;
}

/* 右：功能区域（整体卡片背景，内嵌小卡） */
.widgets {
  width: 258px;
  flex: 0 0 258px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--shadow-color), 0.25) transparent;
}
.widgets::-webkit-scrollbar { width: 6px; }
.widgets::-webkit-scrollbar-thumb {
  background: rgba(var(--shadow-color), 0.22);
  border-radius: 3px;
}
.widget-account {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.account-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  text-align: left;
}
.account-avatar-wrap {
  position: relative;
  width: 84px;
  height: 84px;
}
.account-ring {
  position: absolute;
  inset: -7px;
  width: 98px;
  height: 98px;
  transform: rotate(-90deg);
}
.account-ring .ring-bg {
  fill: none;
  stroke: rgba(var(--shadow-color), 0.12);
  stroke-width: 4;
}
.account-ring .ring-fg {
  fill: none;
  stroke: var(--color-brand);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.6s ease;
}
.account-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  box-shadow: 0 16px 32px -5px rgba(var(--shadow-color), 0.30);
  border: 4px solid var(--surface-line);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.6);
}
.account-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.account-avatar svg { width: 100%; height: 100%; display: block; }
.account-avatar .avatar-emoji { font-size: 38px; line-height: 1; }
.account-online {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #2ecc71;
  border: 2.5px solid #fff;
  /* 实心绿点：常驻可见（修复之前被 online-pulse 放大淡出导致消失的问题）
     静态 box-shadow 柔光，无重绘开销 */
  box-shadow: 0 0 6px rgba(46, 204, 113, 0.6);
}
/* 闪烁波纹：仅作用在外圈伪元素，用 transform/opacity 扩散淡出（合成层友好，不重绘 box-shadow） */
.account-online::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(46, 204, 113, 0.55);
  pointer-events: none;
  will-change: transform, opacity;
  animation: online-pulse 2s infinite;
}
@keyframes online-pulse {
  0%   { transform: scale(1);   opacity: 0.6; }
  70%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .account-online::after { animation: none; opacity: 0; }
}
.account-greet {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-soft);
}
.account-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.3px;
}

/* 头像可点击 + 键盘可达 */
.account-avatar-wrap {
  cursor: pointer;
}
.account-avatar-wrap:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 4px;
  border-radius: 50%;
}

/* 头像环绕菜单：固定定位浮层（避开 .widgets 的 overflow 裁剪） */
.account-radial {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 60;
  pointer-events: none;
}
.account-radial.open {
  pointer-events: auto;
}
.radial-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--color-card-border);
  background: var(--color-card);
  color: var(--text);
  box-shadow: 0 10px 24px -8px rgba(var(--shadow-color), 0.35);
  cursor: pointer;
  transform: translate(-50%, -50%) scale(0.2);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.3s ease,
              background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.account-radial.open .radial-item {
  opacity: 1;
  transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(1);
}
/* 各按钮的 --tx/--ty 由 JS 按四分之一圆弧动态计算（见 layoutRadialArc） */
.radial-item:hover {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--text-on-brand);
  transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(1.12);
}
.radial-item svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
/* 悬浮文字提示 */
.radial-tip {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 10px;
  background: var(--color-card);
  border: 1px solid var(--color-card-border);
  color: var(--text);
  box-shadow: 0 10px 24px -8px rgba(var(--shadow-color), 0.35);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 1;
}
/* 所有环绕按钮的提示统一朝外（按钮均在头像左/左下/下侧，故提示显示在按钮左侧） */
.radial-item .radial-tip {
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
}
.radial-item:hover .radial-tip { opacity: 1; transform: translateY(-50%) translateX(0); }

@media (prefers-reduced-motion: reduce) {
  .radial-item { transition: opacity 0.2s ease; transform: translate(-50%, -50%) scale(0.2); }
  .account-radial.open .radial-item { transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(1); }
  .radial-item:hover { transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(1.06); }
}

/* ============ 通用玻璃悬浮提示（与头像环绕菜单 .radial-tip 视觉一致） ============ */
.tip-pop {
  position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none;
  white-space: nowrap; font-size: 12px; font-weight: 700; line-height: 1.2;
  padding: 5px 10px; border-radius: 10px;
  background: var(--color-card, rgba(255, 255, 255, 0.7));
  border: 1px solid var(--color-card-border, rgba(255, 255, 255, 0.7));
  color: var(--text, #2f4858);
  box-shadow: 0 10px 24px -8px rgba(20, 30, 50, 0.35);
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.tip-pop.show { opacity: 1; transform: translateY(0); }

/* 右：时钟 */
.card-clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.digital-time {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.clock-face {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  position: relative;
  background: rgba(255, 255, 255, 0.40);
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 12px 28px -6px rgba(var(--shadow-color), 0.22),
    inset 0 2px 8px rgba(255, 255, 255, 0.7),
    inset 0 -2px 8px rgba(var(--shadow-color), 0.10);
}
.clock-face::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
}
.tick {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.tick-quarter { color: var(--color-brand); }
.hand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform-origin: bottom center;
  border-radius: 4px;
  transform: translateX(-50%) rotate(0deg);
  will-change: transform;
}
.hand.hour { width: 5px; height: 34px; background: var(--text); }
.hand.minute { width: 3px; height: 48px; background: var(--text-soft); }
.hand.second { width: 2px; height: 56px; background: var(--color-brand); z-index: 2; }
.clock-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  background: var(--text);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
}

/* 右：日历 */
.card-calendar {
  display: flex;
  flex-direction: column;
  padding: 12px;
}
.cal-date {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
  letter-spacing: 0.3px;
}
.cal-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.cal-month-cn {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-brand);
}
.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
  margin-bottom: 4px;
}
.cal-weekdays span { text-align: center; font-size: 10px; color: var(--text-muted); font-weight: 600; }
.cal-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; flex: 1; }
.cal-day {
  min-height: 32px;
  min-width: 0;
  padding: 3px 1px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border-radius: 8px;
  color: var(--text-soft);
}
.cal-num { font-size: 12px; line-height: 1; }
.cal-fest {
  font-size: 8px;
  line-height: 1.15;
  white-space: nowrap;
}
.cal-day.rest .cal-num,
.cal-day.rest .cal-fest { color: #18b89a; font-weight: 700; }   /* 休息日：青绿色（日期+文字） */
.cal-day.work .cal-num,
.cal-day.work .cal-fest { color: #e96aa5; font-weight: 700; }    /* 调休上班：粉红色（日期+文字） */
.cal-day.name .cal-fest { color: var(--text); font-weight: 600; } /* 非休息节日：仅文字，无颜色 */
.cal-day.today {
  background: linear-gradient(135deg, var(--color-brand), var(--color-brand-2));
  color: var(--text-on-brand);
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(var(--color-brand-rgb), 0.35);
}
.cal-day.today .cal-num,
.cal-day.today .cal-fest { color: var(--text-on-brand); }
.cal-day.other { color: var(--text-muted); opacity: 0.5; }
.cal-lunar {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(var(--shadow-color), 0.12);
  font-size: 11px;
  color: var(--text-soft);
  text-align: center;
}

/* 右：天气 */
.card-weather {
  position: relative;
  display: flex;
  flex-direction: column;
}
.weather-hero {
  position: relative;
  margin: -17px -17px 6px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(160deg, #eaf4fb 0%, #f3fafe 55%, #ffffff 100%);
  overflow: hidden;
  aspect-ratio: 1500 / 1000;
}
.weather-loc {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.weather-temp {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.weather-bunny {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.weather-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding-top: 4px;
  font-size: 11px;
  color: var(--text-soft);
}
.weather-desc { color: var(--color-brand); font-weight: 700; white-space: nowrap; }
.weather-range { color: var(--color-brand); font-weight: 700; white-space: nowrap; }

@media (max-width: 980px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; flex: none; }
  .nav-list { flex-direction: row; flex-wrap: wrap; }
  .nav-item { flex: 1 1 auto; text-align: center; }
  .content { min-width: 0; }
  .widgets { width: 100%; flex: none; }
  /* 堆叠布局下限制天气卡宽度，避免图片按比例涨得过高；
     仍锁定 1500:1000 比例，故不空边距、不裁切、不超出卡片 */
  .card-weather { max-width: 420px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 560px) {
  .app { padding: 12px; }
}

/* ============ 移动端（小屏）布局 ============ */
.mobile-topbar { display: none; }
.mobile-nav { display: none; }

@media (max-width: 768px) {
  /* 隐藏桌面三栏的侧栏与右栏：其内账号已移至顶栏，时钟/天气/日历不显示 */
  .sidebar { display: none; }
  .widgets { display: none; }
  .card-clock, .card-weather, .card-calendar { display: none; }

  .app { padding: 0; height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .layout { flex-direction: column; gap: 10px; padding: 10px; }

  /* 顶栏：导航悬浮按钮（左）→ 标题 → 头像（右） */
  .mobile-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--color-card-strong);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    margin: 0;
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-card-border);
    border-radius: 0 0 18px 18px;
    box-shadow: 0 6px 18px -10px rgba(var(--shadow-color), 0.25);
  }
  .nav-fab {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid var(--color-card-border);
    background: var(--color-card);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    color: var(--text);
    box-shadow: 0 8px 20px -8px rgba(var(--shadow-color), 0.35);
    cursor: pointer;
    transition: transform 0.25s ease, background 0.25s ease;
  }
  .nav-fab svg { width: 22px; height: 22px; }
  .nav-fab:active { transform: scale(0.92); }
  .nav-fab.open svg { transform: rotate(90deg); transition: transform 0.3s ease; }

  .mobile-title {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--text);
    flex: 0 0 auto;
  }

  .mobile-account { margin-left: auto; }   /* 推到最右 */
  /* 顶栏头像缩小，避免过大 */
  .mobile-account .account-avatar-wrap { width: 46px; height: 46px; }
  .mobile-account .account-ring { inset: -4px; width: 54px; height: 54px; }
  .mobile-account .account-avatar { width: 46px; height: 46px; border-width: 2px; }
  .mobile-account .account-online { right: 0; bottom: 0; width: 11px; height: 11px; border-width: 2px; }
  .mobile-account .account-text { display: none; }

  /* 搜索区在窄屏整体缩小（含内部元素），并保证不超出父级边距 */
  .search-card { padding: 10px 12px 9px; border-radius: 16px; position: sticky; top: 72px; z-index: 30; }
  .hero-greet { font-size: 13px; letter-spacing: 1px; margin-bottom: 8px; }
  .search-form { gap: 6px; padding: 4px 4px 4px 10px; }
  .search-input { font-size: 14px; padding: 6px 0; min-width: 0; }
  .search-btn { padding: 8px 12px; font-size: 13px; }
  .engine-menu { gap: 4px; }
  .engine-menu .link { padding: 6px 9px; font-size: 13px; gap: 5px; }
  .engine-menu .link svg { width: 12px; height: 12px; }

  /* 分类卡内边距收紧，给网址网格让出空间 */
  .cat-card { padding: 12px 12px 14px; }
  .cat-title { font-size: 15px; margin-bottom: 10px; }
  .cat-title::before { width: 5px; height: 16px; }

  /* 网址卡片：缩小 + 一行固定三列（窄屏不再只显示 2 个） */
  .cat-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .site-tile { padding: 12px 6px; gap: 7px; }
  .site-tile .st-icon .ic-wrap { width: 28px; height: 28px; }
  .site-tile .st-icon .ic-img { width: 28px; height: 28px; border-radius: 7px; }
  .site-tile .st-icon .ic-emoji { font-size: 24px; }
  .site-tile .st-name { font-size: 12px; }

  /* 导航悬浮菜单：从按钮下方展开的圆角玻璃药丸列表（含昼夜切换） */
  .mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: fixed;
    top: 72px;
    left: 12px;
    z-index: 90;
    pointer-events: none;
  }
  .mobile-nav.open { pointer-events: auto; }
  .mnav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px 7px 7px;
    border-radius: 999px;
    border: 1px solid var(--color-card-border);
    background: var(--color-card);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    color: var(--text);
    box-shadow: 0 10px 26px -10px rgba(var(--shadow-color), 0.4);
    cursor: pointer;
    opacity: 0;
    transform: translateY(-10px) scale(0.8);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    font-family: inherit;
  }
  .mobile-nav.open .mnav-item { opacity: 1; transform: translateY(0) scale(1); }
  .mobile-nav.open .mnav-item:nth-child(1) { transition-delay: 0.02s; }
  .mobile-nav.open .mnav-item:nth-child(2) { transition-delay: 0.05s; }
  .mobile-nav.open .mnav-item:nth-child(3) { transition-delay: 0.08s; }
  .mobile-nav.open .mnav-item:nth-child(4) { transition-delay: 0.11s; }
  .mobile-nav.open .mnav-item:nth-child(5) { transition-delay: 0.14s; }
  .mobile-nav.open .mnav-item:nth-child(6) { transition-delay: 0.17s; }
  .mobile-nav.open .mnav-item:nth-child(7) { transition-delay: 0.20s; }
  .mobile-nav.open .mnav-item:nth-child(8) { transition-delay: 0.23s; }
  .mnav-item:active { transform: scale(0.95); }
  .mnav-ico {
    width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--surface-chip);
    font-size: 18px; line-height: 1; flex: 0 0 auto;
  }
  .mnav-ico .ic-img { width: 20px; height: 20px; object-fit: contain; border-radius: 5px; }
  .mnav-ico .ic-fb { font-size: 12px; font-weight: 700; color: var(--text-muted); }
  .mnav-ico .ic-svg { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; }
  .mnav-ico .ic-svg svg { width: 100%; height: 100%; display: block; }
  .mnav-label { font-size: 13px; font-weight: 700; white-space: nowrap; }
  .mnav-theme .mnav-ico { background: linear-gradient(135deg, var(--color-brand), var(--color-brand-2)); color: var(--text-on-brand); }
  .mnav-theme .mnav-ico .ic-fb { color: var(--text-on-brand); }
}

/* ============ 夜间模式 ============ */
:root[data-theme="dark"] {
  --color-card: rgba(30, 41, 59, 0.55);
  --color-card-border: rgba(255, 255, 255, 0.14);
  --text: #eef2f5;
  --text-soft: #c2ccd2;
  --text-muted: #878e93;

  /* 表面层级（深色态）：统一用「卡片色 + 白」，保证 raised 永远比卡片亮一档、
     sunken 比卡片暗一档 —— 以前这些值是各元素各写各的白 alpha，切配色就撞色糊在一起 */
  --surface-raised: rgba(255, 255, 255, 0.085);
  --surface-sunken:  rgba(255, 255, 255, 0.045);
  --surface-line:    rgba(255, 255, 255, 0.16);
  --surface-line-soft: rgba(255, 255, 255, 0.12);
  --hover-soft: rgba(255, 255, 255, 0.10);
  /* 阴影色：dark 块此前没定义，滚动条滑块写 rgba(var(--shadow-color)) 会拿空值而隐形 */
  --shadow-color: 8, 12, 24;
  /* 浮层表面：夜间换成深蓝近实底，面板里 --text(#a7b4e9) 压上去才看得清 */
  --surface-popover: rgba(14, 19, 44, 0.92);
  --surface-popover-border: rgba(150, 170, 255, 0.30);
  --surface-chip: rgba(255, 255, 255, 0.09);
  /* 夜间品牌底极亮 → 文字改用深墨蓝，实测对比度 10:1 以上；日间仍为 #fff 不变 */
  --text-on-brand: #0d1526;
}
/* 危险按钮（固定红渐变，不随 palette 走）：夜间把红压暗一档，让白字重新看得清 */
html[data-theme="dark"] .btn-danger {
  background: linear-gradient(135deg, #e0525f, #cc3f52);
}
html[data-theme="dark"] body {
  background:
    radial-gradient(120% 120% at 12% 8%, #16222f 0%, rgba(22,34,47,0) 55%),
    radial-gradient(120% 120% at 88% 18%, #14202c 0%, rgba(20,32,44,0) 50%),
    radial-gradient(140% 120% at 78% 92%, #1a2433 0%, rgba(26,36,51,0) 55%),
    linear-gradient(160deg, #0f1722 0%, #14202e 45%, #1a2433 100%);
}
html[data-theme="dark"] .w-card {
  background: rgba(30, 41, 59, 0.50);
  border-color: rgba(255, 255, 255, 0.14);
}
html[data-theme="dark"] .w-card:hover {
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.45);
}
html[data-theme="dark"] .title-accent {
  color: #6fe0f5;
  text-shadow: 0 0 7px rgba(120, 230, 250, 0.70), 0 0 16px rgba(120, 230, 250, 0.45);
}
html[data-theme="dark"] .nav-item:hover {
  background: var(--hover-soft);
}
html[data-theme="dark"] .search-form {
  background: rgba(15, 23, 34, 0.55);
  border-color: rgba(255, 255, 255, 0.16);
}
html[data-theme="dark"] .clock-face {
  background: var(--surface-sunken);
  border-color: var(--surface-line);
}
html[data-theme="dark"] .clock-face::before {
  border-color: var(--surface-line-soft);
}
html[data-theme="dark"] .weather-hero {
  background: linear-gradient(160deg, #1b2735 0%, #223044 55%, #2a3850 100%);
}
html[data-theme="dark"] .account-ring .ring-bg {
  stroke: rgba(255, 255, 255, 0.14);
}
/* 网址书签格子跟随夜间主题，避免白底 */
html[data-theme="dark"] .site-tile {
  background: var(--surface-raised);
  border-color: var(--surface-line-soft);
  color: var(--text-soft);
}
html[data-theme="dark"] .site-tile:hover {
  background: var(--hover-soft);
  border-color: var(--surface-line);
  color: var(--color-brand);
}
/* 搜索引擎下拉：白天用白玻璃，夜间用暗玻璃，均不透底 */
html[data-theme="dark"] .engine-menu .link {
  background: var(--surface-raised);
  border-color: var(--surface-line-soft);
}
html[data-theme="dark"] .engine-menu .link:hover {
  background: var(--hover-soft);
  border-color: var(--surface-line);
}
html[data-theme="dark"] .engine-menu .item .submenu {
  background: rgba(30, 41, 59, 0.92);
  border-color: var(--color-card-border);
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.55);
}

/* ============ 通用：隐藏（登录浮层 / Toast 显隐由 JS 切换 .hidden） ============ */
.hidden { display: none !important; }
/* fade：只动 opacity，绝不触碰元素自身 transform。
   否则任何靠 transform 居中的元素（如 left:50% + translateX(-50%)）在动画期间会丢失居中偏移，
   出现「先偏右、动画结束后再跳回中间」的抖动（Toast 就是这个坑）。 */
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
/* fadeUp：需要轻微上浮时才用，仅限本身不带 translate 定位的元素（.modal / .confirm-card） */
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Toast 专用：from/to 全程保留 translateX(-50%)，与后台 admin 的 toastIn 写法保持一致 */
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes overlayFade { from { opacity: 0; } to { opacity: 1; } }

/* ============ 登录 / 注册 弹窗 ============ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(35, 47, 62, 0.38);
  display: grid;
  place-items: center;
  z-index: 100;
  animation: overlayFade 0.2s ease;
}
.modal {
  width: min(380px, 92vw);
  max-height: 90vh;
  position: relative;
  overflow-y: auto;
  background: var(--color-card);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px -12px rgba(var(--shadow-color), 0.35);
  animation: fadeUp 0.22s ease;
}
.modal-head { padding: 22px 24px 8px; }
.modal-head h3 { font-size: 19px; font-weight: 800; color: var(--text); }
.modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 30px;
  height: 30px;
  border: none;
  cursor: pointer;
  background: transparent;
  color: var(--text-soft);
  font-size: 22px;
  line-height: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background 0.2s ease, color 0.2s ease;
}
.modal-close:hover { background: rgba(var(--shadow-color), 0.10); color: var(--text); }
html[data-theme="dark"] .modal-close:hover { background: rgba(255, 255, 255, 0.12); }
.login-tabs { display: flex; gap: 6px; padding: 0 24px; margin-top: 6px; }
.login-tab {
  flex: 1;
  padding: 10px 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-soft);
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
  font-family: inherit;
}
.login-tab.active { color: var(--color-brand); border-bottom-color: var(--color-brand); }
.modal-body { padding: 14px 24px 4px; }
.fld { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.fld > span { font-size: 13px; font-weight: 600; color: var(--text-soft); }
.fld input {
  border: 1px solid var(--color-card-border);
  background: rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-xs);
  padding: 11px 13px;
  font-size: 14px;
  color: var(--text);
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.fld input::placeholder { color: var(--text-muted); }
.fld input:focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 25%, transparent);
}
.login-msg { color: #e0566b; font-size: 13px; min-height: 18px; margin: 0 0 4px; }
.login-email-row { display: flex; gap: 8px; align-items: center; }
.login-email-row input { flex: 1; min-width: 0; }
/* 忘记密码入口 / 返回登录：文字链样式（无边框无背景，hover 用品牌色强调）。
   颜色走 --text-soft / --color-brand 变量，明暗主题自动适配，不会出现撞色看不清。 */
/* 找回密码入口：位于登录按钮（.modal-foot）下方居中。
   margin-top 为负值，用来抵消 .modal-foot 的 padding-bottom: 22px，
   让链接与按钮之间保持约 10px 的呼吸感，而不是被底部内边距推得过远。 */
.login-forgot { display: flex; justify-content: center; margin: -10px 24px 20px; }
.login-forgot-back { display: flex; justify-content: flex-start; margin: 2px 0 0; }
.link-btn {
  border: none; background: transparent; cursor: pointer; padding: 2px 0;
  font-size: 13px; color: var(--text-soft); transition: color 0.15s ease;
}
.link-btn:hover { color: var(--color-brand); }
/* 密码行：输入框 + 显隐按钮（与邮箱行同款布局） */
.login-pass-row { display: flex; gap: 8px; align-items: center; }
.login-pass-row input { flex: 1; min-width: 0; }
.btn-eye { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--color-card-border); background: var(--color-card); border-radius: 10px; cursor: pointer; font-size: 16px; line-height: 1; color: var(--text-soft); transition: color .2s ease, border-color .2s ease; }
.btn-eye:hover { color: var(--color-brand); border-color: var(--color-brand); }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 24px 22px; }
.login-modal .modal-foot { display: block; }
.login-modal .modal-foot .btn-primary { width: 100%; }

/* 按钮（登录弹窗复用） */
.btn {
  border: 1px solid var(--color-card-border);
  background: rgba(255, 255, 255, 0.55);
  color: var(--text);
  border-radius: var(--radius-xs);
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: linear-gradient(135deg, var(--color-brand), var(--color-brand-2));
  color: var(--text-on-brand);
  border-color: transparent;
  box-shadow: 0 10px 22px -10px var(--color-brand);
}
.btn-primary:hover { box-shadow: 0 14px 28px -10px var(--color-brand); }

/* Toast 轻提示 */
.toast {
  position: fixed;
  left: 50%;
  bottom: 36px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--color-card-border);
  color: var(--text);
  padding: 11px 20px;
  border-radius: 14px;
  font-size: 13.5px;
  font-weight: 600;
  z-index: 200;
  box-shadow: 0 14px 34px -12px rgba(var(--shadow-color), 0.4);
  animation: toastIn 0.26s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ============ 退出登录确认浮层 ============ */
.confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(35, 47, 62, 0.38);
  display: grid;
  place-items: center;
  z-index: 120;
  animation: overlayFade 0.2s ease;
}
.confirm-card {
  width: min(320px, 90vw);
  background: var(--color-card);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px -12px rgba(var(--shadow-color), 0.4);
  padding: 22px 22px 16px;
  animation: fadeUp 0.22s ease;
}
.confirm-title { font-size: 16px; font-weight: 800; color: var(--text); margin-bottom: 8px; }
.confirm-msg { font-size: 14px; color: var(--text-soft); line-height: 1.6; margin-bottom: 18px; }
.confirm-foot { display: flex; justify-content: flex-end; gap: 10px; }
.btn-ghost { background: rgba(255, 255, 255, 0.5); }
.btn-danger {
  background: linear-gradient(135deg, #ff6b6b, #e0566b);
  color: var(--text-on-brand);
  border-color: transparent;
  box-shadow: 0 10px 22px -10px #e0566b;
}
.btn-danger:hover { box-shadow: 0 14px 28px -10px #e0566b; }
html[data-theme="dark"] .btn-ghost { background: rgba(255, 255, 255, 0.1); }
html[data-theme="dark"] .confirm-card { background: rgba(30, 41, 59, 0.92); }

/* ============ 头像环绕菜单：退出项 ============ */
.radial-logout svg { fill: #e0566b; }
.radial-logout:hover { background: #e0566b; border-color: #e0566b; }
.radial-logout:hover svg { fill: var(--text-on-brand); }   /* 红底压字：夜间品牌/危险底同规则 */
/* 退出提示沿用通用 .radial-item .radial-tip（主题文字色），不再单独设白字，与"设置"提示一致 */

/* 选中文字：跟随品牌色不写死，深浅两态自动适配 */
::selection { background: rgba(var(--color-brand-rgb), 0.28); color: var(--text); }
/* 禁用态：文字退到 muted、光标改为禁止，且不吃 hover 反馈 */
:disabled { cursor: not-allowed; }
input:disabled, textarea:disabled, select:disabled {
  color: var(--text-muted);
  background-color: transparent;
  border-color: var(--surface-line-soft);
  -webkit-text-fill-color: var(--text-muted);
}

/* ============ 夜间模式：登录浮层 / Toast / 表单 ============ */
html[data-theme="dark"] .modal-overlay { background: rgba(8, 14, 22, 0.55); }
html[data-theme="dark"] .fld input {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.16);
}
html[data-theme="dark"] .fld input:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 32%, transparent);
}
html[data-theme="dark"] .btn {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.16);
}
html[data-theme="dark"] .toast {
  background: rgba(30, 41, 59, 0.85);
  border-color: rgba(255, 255, 255, 0.14);
  color: #eef2f5;
}

/* ============================================================
 * D 档：加载失败兜底卡（404 / 白屏兜底）
 * ============================================================ */
.fatal-card {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 28px; text-align: center;
  background: linear-gradient(135deg, #d4e8f3 0%, #eef6f9 55%, #dff0f4 100%);
}
.fatal-card.hidden { display: none; }
.fatal-ico { font-size: 54px; line-height: 1; }
.fatal-title { font-size: 21px; font-weight: 800; color: var(--text); margin-top: 4px; }
.fatal-desc {
  max-width: 420px; font-size: 14px; line-height: 1.8; color: var(--text-soft);
  padding: 16px 20px; border-radius: var(--radius-sm);
  background: var(--color-card); border: 1px solid var(--color-card-border);
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
}
.fatal-actions { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.fatal-actions .btn { padding: 11px 22px; border-radius: 999px; font-weight: 700; }
.fatal-actions .btn-ghost {
  color: var(--text);
  background: var(--color-card); border: 1px solid var(--color-card-border);
}
html[data-theme="dark"] .fatal-actions .btn-ghost { background: rgba(255, 255, 255, 0.1); }