/* 
// ╔╗ ╔═╗╔╗╔╔╦╗╔═╗
// ╠╩╗║╣ ║║║ ║ ║ ║
// ╚═╝╚═╝╝╚╝ ╩ ╚═╝ 
// 重构版:流式布局,搜索为核心,右键弹出快捷面板
*/

/* V A R I A B L E S */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap'); /* Font Import */

:root {
  /* Font Size */
  --fg-primary: 7.2vh; /* Clock */
  --fg-secondary: 2.4vh; /* Greetings */
  --fg-date: 2.1vh; /* Date */
  --fg-item: 1.45vh; /* Dock / Panel labels */
  --icon: 2.4vh; /* Icon Size */

  /* Fonts Color */
  --fg: #3a3a3a; /* Foreground color */
  --sfg: #767676; /* Secondary Foreground color */

  /* Light Colors  */
  --accent: #57a0d9; /* Hover color */
  --background: #f5f5f5; /* Background color */
  --cards: #e4e6e6; /* Cards color */

  /* Panel grid (快捷入口网格:克制玻璃拟态)  */
  --panel-item-bg: rgba(255, 255, 255, 0.45); /* 卡片底:纯色背景几乎隐形,上壁纸后呈毛玻璃 */
  --panel-item-icon-bg: rgba(87, 160, 217, 0.13); /* 图标圆形底座 */
  --panel-item-border: rgba(58, 58, 58, 0.08); /* 卡片描边:似有似无 */

  /* 玻璃底(搜索框/dock/浮层):半透明白 + backdrop blur,上壁纸后呈毛玻璃 */
  --glass-bg: rgba(255, 255, 255, 0.5);
  --glass-blur: blur(12px);

  /* Image background (壁纸 + 遮罩,遮罩不宜过重,否则壁纸不可见)  */
  --imgbg: url(assets/biz.png);
  --imgcol: linear-gradient(
    rgba(255, 255, 255, 0.45),
    rgba(255, 255, 255, 0.45)
  );
}

.darktheme {
  /* Dark Colors  */
  --accent: #57a0d9; /* Hover color */
  --background: #19171a; /* Background color */
  --cards: #26242a; /* Cards color */
  --panel-bg: #201e21; /* 面板底色(比卡片深一档) */
  --panel-item-bg: rgba(255, 255, 255, 0.05); /* 卡片底:暗色下微弱白光 */
  --panel-item-icon-bg: rgba(87, 160, 217, 0.16); /* 图标圆形底座 */
  --panel-item-border: rgba(255, 255, 255, 0.09); /* 卡片描边:暗色下微弱白光 */

  /* 玻璃底:暗色下半透明深底,与 --cards 同色系 */
  --glass-bg: rgba(38, 36, 42, 0.55);

  /* Fonts Color */
  --fg: #d8dee9; /* Foreground color */
  --sfg: #9a97a1; /* Secondary Foreground color */

  /* Image background  */
  --imgcol: linear-gradient(
    rgba(0, 0, 0, 0.55),
    rgba(0, 0, 0, 0.55)
  );
}

/* S T Y L E S */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Open Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  transition: 0.2s ease-in-out;
}

[hidden] {
  display: none !important;
}

body {
  width: 100vw;
  height: 100vh;
  background-color: var(--background);
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.notransition {
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  transition: none;
}

.withImageBackground {
  background-image: var(--imgcol), var(--imgbg);
  background-size: cover;
}

/* 主题按钮(右上角, 毛玻璃圆底与天气胶囊同材质) */

#themeButton {
  position: absolute;
  top: calc(1.5em - 8px); /* 8px 圆形底 padding,calc 补偿保持图标原位 */
  right: calc(1.5em - 8px);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 41px;            /* 固定尺寸:与天气块/设置按钮同高,右上角三者严格对齐 */
  height: 41px;
  color: var(--fg);
  border: 1px solid rgba(255, 255, 255, 0.35); /* 毛玻璃圆底,与天气胶囊同款 */
  cursor: pointer;
  background-color: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  padding: 8px; /* 热区扩大,涟漪波纹完整可见 */
  border-radius: 50%;
  z-index: 10;
}

#themeIcon {
  width: 25px;
  height: 25px;
}

/* lucide 替换 <i> 后 id 丢失,尺寸规则改匹配 svg(两个按钮统一 25px) */
#themeButton svg,
#settingsBtn svg {
  width: 25px;
  height: 25px;
  flex-shrink: 0;
}

/* 设置按钮(右上角, 主题按钮左侧, 毛玻璃圆底同款) */

#settingsBtn {
  position: absolute;
  top: calc(1.5em - 8px); /* 同上:圆形底补偿 */
  right: 65px;          /* 与主题按钮间隙统一 12px(12px 右边缘 + 41px 宽 + 12px 间隙) */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 41px;            /* 固定尺寸:与天气块/主题按钮同高,右上角三者严格对齐 */
  height: 41px;
  color: var(--fg);
  border: 1px solid rgba(255, 255, 255, 0.35); /* 毛玻璃圆底,与天气胶囊同款 */
  cursor: pointer;
  background-color: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  padding: 8px;
  border-radius: 50%;
  z-index: 10;
}

#settingsBtn i {
  width: 25px;
  height: 25px;
}

/* 悬浮:玻璃底上叠色提亮(替代原浅灰圆底,材质保持一致) */
#themeButton:hover,
#settingsBtn:hover {
  background-color: rgba(255, 255, 255, 0.78); /* 亮色:白底加深 */
}

.darktheme #themeButton:hover,
.darktheme #settingsBtn:hover {
  background-color: rgba(94, 90, 102, 0.55); /* 暗色:深底提亮 */
}

/* 暗色:描边与阴影降档(与天气胶囊一致) */
.darktheme #themeButton,
.darktheme #settingsBtn {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* 视图容器:垂直流式,居中,切换时淡入 */

.view {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: viewIn 0.25s ease;
}

@keyframes viewIn {
  from {
    transform: translateY(8px);
  }
  to {
    transform: none;
  }
}

/* 时钟 / 问候 / 日期 */

.timeBlock {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 3.2vh;
}

.clock {
  display: flex;
  align-items: center;
  justify-content: center;
}

#hour,
#separator,
#minutes {
  font-size: var(--fg-primary);
  font-weight: bolder;
  color: var(--fg);
  line-height: 1;
}

#greetings {
  font-size: var(--fg-secondary);
  color: var(--fg);
  margin-top: 1.2vh;
}

#dateText {
  font-size: var(--fg-date);
  font-weight: bold;
  color: var(--sfg);
  margin-top: 0.8vh;
}

/* 搜索框 */

.searchBlock {
  position: relative;
  width: 56vw;
  max-width: 680px;
}

.searchBox {
  display: flex;
  align-items: center;
  width: 100%;
  height: 5.2vh;
  min-height: 40px;
  border-radius: 999px; /* 胶囊形(高度一半自动取整) */
  border: 1px solid rgba(255, 255, 255, 0.35); /* 与按钮/胶囊同款玻璃描边 */
  background-color: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  color: var(--fg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.45); /* 与按钮同款悬浮阴影+顶部内高光 */
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.searchBox:focus-within {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

/* 暗色:描边与阴影降档,与按钮暗色规则一致 */
.darktheme .searchBox {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.darktheme .searchBox:focus-within {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.engineBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
  margin: 0 1vh 0 1.2vh;
  padding: 0;
  flex-shrink: 0;
}

.engineBtn:hover {
  transform: scale(1.12);
}

/* 引擎 SVG logo(黑白灰,颜色跟随文字色,自动适配明暗) */

.engineLogo {
  width: 1.7vh;
  height: 1.7vh;
  flex-shrink: 0;
  display: block;
  color: var(--sfg);
}

.engineBtn:hover .engineLogo {
  color: var(--fg);
}

.engineLogo.small {
  width: 1.2vh;
  height: 1.2vh;
}

#searchInput {
  flex: 1;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  color: var(--fg);
  font-size: 1.9vh;
  font-family: inherit;
  padding-right: 1.3vh;
}

#searchInput::placeholder {
  color: var(--sfg);
  opacity: 0.7;
}

/* 搜索引擎切换菜单 */

.engineMenu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 150px;
  border: 1px solid rgba(255, 255, 255, 0.35); /* 与搜索框同款玻璃描边 */
  background-color: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  padding: 6px;
  z-index: 101;
}

/* 暗色:描边与阴影降档 */
.darktheme .engineMenu {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.engineItem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 7px;
  cursor: pointer;
  color: var(--fg);
  font-size: 1.5vh;
}

.engineMenu .engineLogo {
  width: 1.45vh;
  height: 1.45vh;
}

.engineItem:hover {
  background-color: var(--accent);
  color: #fff; /* 悬浮白字:灰字在蓝底上对比不足 */
}

.engineItem span:nth-child(2) {
  flex: 1;
  text-align: left;
}

.engineItem i {
  width: 1.2vh;
  height: 1.2vh;
}

.engineItem.active i {
  color: var(--accent);
}

/* 搜索历史下拉 */

.searchHistory {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  border: 1px solid rgba(255, 255, 255, 0.35); /* 与搜索框同款玻璃描边 */
  background-color: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  padding: 6px;
  z-index: 100;
  max-height: 28vh;
  overflow-y: auto;
  /* 细滚动条(Firefox) */
  scrollbar-width: thin;
  scrollbar-color: rgba(128, 128, 128, 0.35) transparent;
}

/* 暗色:描边与阴影降档 */
.darktheme .searchHistory {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* 细滚动条(WebKit:Chrome / Edge) */
.searchHistory::-webkit-scrollbar {
  width: 6px;
}

.searchHistory::-webkit-scrollbar-track {
  background: transparent;
}

.searchHistory::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.35);
  border-radius: 3px;
}

.searchHistory::-webkit-scrollbar-thumb:hover {
  background: rgba(128, 128, 128, 0.6);
}

/* 分组标题(搜索建议 / 搜索历史) */

.panelGroup {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 1px;
  font-size: 1.1vh;
  color: var(--sfg);
  opacity: 0.85;
}

.panelGroup i,
.panelGroup svg {
  width: 1.1vh; /* 与分组标题字体同大;lucide 替换 <i> 为 svg 后需直接匹配 svg */
  height: 1.1vh;
  flex-shrink: 0;
}

.historyItem {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  border-radius: 7px;
  cursor: pointer;
  color: var(--fg);
  font-size: 1.35vh;
}

.historyItem:hover {
  background-color: var(--accent);
  color: #fff; /* 悬浮白字:灰字在蓝底上对比不足 */
}

.historyItem i {
  width: 1.2vh;
  height: 1.2vh;
  flex-shrink: 0;
}

/* 建议条目搜索图标:lucide 将 <i> 替换为 svg 后需直接匹配 svg */
.suggestItem svg {
  width: 1.1vh;
  height: 1.1vh;
  flex-shrink: 0;
}

.historyItem span {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.historyDel {
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  opacity: 0;
  display: flex;
  align-items: center;
  padding: 1px;
}

.historyItem:hover .historyDel {
  opacity: 0.7;
}

.historyDel i {
  width: 1.2vh;
  height: 1.2vh;
}

.historyClear {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  text-align: center;
  padding: 6px;
  margin-top: 3px;
  border-top: 1px solid rgba(128, 128, 128, 0.25);
  color: #e05d5d;
  cursor: pointer;
  font-size: 1.3vh;
  border-radius: 0 0 8px 8px;
}

.historyClear:hover {
  background: rgba(224, 93, 93, 0.12);
}

.historyClear i {
  width: 1.2vh;
  height: 1.2vh;
}

/* 搜索下拉:待办搜索结果条目(复用 historyItem 样式) */

/* 状态图标与编辑按钮:lucide 将 <i> 替换为 svg 后需直接匹配 svg */
.todoSearchItem > svg {
  width: 1.2vh;
  height: 1.2vh;
  flex-shrink: 0;
}

.todoSearchItem .todoSearchEdit svg,
.todoSearchItem .todoSearchEdit i {
  width: 1.2vh;
  height: 1.2vh;
}

.todoSearchItem.done span {
  color: var(--sfg);
  text-decoration: line-through;
}

.todoSearchItem.done > svg {
  color: var(--accent);
}

/* 搜索下拉:备忘录搜索结果条目(复用 historyItem 样式;图标尺寸同待办项,lucide 转 svg 后直接匹配) */
.memoSearchItem > svg {
  width: 1.2vh;
  height: 1.2vh;
  flex-shrink: 0;
}

.memoSearchItem .memoSearchEdit svg,
.memoSearchItem .memoSearchEdit i {
  width: 1.2vh;
  height: 1.2vh;
}

/* 天气(右上角小部件, 关闭开关时由 weather.js 隐藏;与右侧按钮同高度垂直对齐;毛玻璃胶囊卡片) */

/* 天气区容器:承接右上角定位与 hover 区域;胶囊与预览卡平级(嵌套 backdrop-filter 会使子元素模糊失效) */
.weatherArea {
  position: absolute;
  top: 12px;              /* 与按钮实际位置一致:calc(1.5em - 8px) 在 button 13.33px UA 字号下 = 12px */
  height: 41px;           /* 与按钮等高(8px padding + 25px 图标),flex 居中后视觉中心一致 */
  right: 118px;           /* 与设置按钮间隙统一 12px(65px + 41px 宽 + 12px 间隙),右上角三件套等距 */
  z-index: 10;
}

.weatherBlock {
  height: 41px;           /* 与按钮等高(8px padding + 25px 图标),flex 居中后视觉中心一致 */
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;        /* 胶囊左右留白,内容不贴边 */
  color: var(--fg);
  background-color: var(--glass-bg);  /* 毛玻璃底,与 dock 同款 */
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 21px;    /* 41px 高度一半,胶囊形 */
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  cursor: pointer;        /* 可点击打开详情弹窗 */
  user-select: none;
}

.weatherBlock:hover {
  border-color: rgba(255, 255, 255, 0.55); /* hover 微提亮描边,提示可交互 */
}

/* 悬浮预览卡(hover 胶囊弹出,右缘对齐胶囊,向下展开;非模态无遮罩) */

.weatherPop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 260px;
  padding: 14px 16px 10px;
  color: var(--fg);
  background-color: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  z-index: 12;
  animation: weatherPopIn 0.18s ease; /* 独立入场动画,规避全局 transition 干扰 */
}

@keyframes weatherPopIn {
  from {
    transform: translateY(4px);
  }
  to {
    transform: none;
  }
}

/* 暗色:描边与阴影降档 */
.darktheme .weatherPop {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.weatherPopHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.weatherPopMain {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.weatherPopCity {
  font-size: 1.6vh;
  font-weight: bolder;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.weatherPopDesc {
  font-size: 1.1vh;
  opacity: 0.72;
}

.weatherPopHead img {
  width: 5.6vh;
  height: 5.6vh;
  filter: saturate(1.15) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

.darktheme .weatherPopHead img {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
}

.weatherPopNow {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}

.weatherPopTemp {
  font-size: 2.9vh;
  font-weight: bolder;
  line-height: 1.1;
}

.weatherPopTemp .g {
  font-size: 1.45vh;
  opacity: 0.7;
}

.weatherPopFeels {
  font-size: 1.2vh;
  opacity: 0.6;
}

.weatherPopRange {
  font-size: 1.2vh;
  opacity: 0.6;
  margin-bottom: 10px;
}

/* 未来 6 小时迷你条 */

.weatherPopHours {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 8px 0;
  border-top: 1px solid rgba(128, 128, 128, 0.22);
  margin-bottom: 6px;
}

.weatherPopHour {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
}

.weatherPopHourTime {
  font-size: 1vh;
  opacity: 0.65;
}

.weatherPopHour img {
  width: 2.2vh;
  height: 2.2vh;
}

.weatherPopHourTemp {
  font-size: 1.2vh;
  font-weight: bolder;
}

.weatherPopHint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 1.05vh;
  opacity: 0.55;
  padding-top: 4px;
}

.weatherPopHint i {
  width: 1vh;
  height: 1vh;
}

/* 暗色:描边与阴影降档,卡片更沉稳 */
.darktheme .weatherBlock {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.weatherIcon img {
  width: 26px; /* 与按钮内图标(25px)同量级,整体缩小 */
  height: 26px;
  filter: saturate(1.15) drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25)); /* 玻璃上增强图标饱和与立体感 */
}

.darktheme .weatherIcon img {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45)); /* 暗色玻璃下只加投影 */
}

.weatherValue p {
  font-size: 1.6vh;
  font-weight: bolder;
  color: var(--fg); /* 温度主色,玻璃上保持最高对比 */
}

.weatherDescription p {
  font-size: 1.3vh;
  color: var(--fg);  /* 玻璃卡片上改用主前景色,替代灰色 --sfg */
  opacity: 0.72;     /* 半透明拉开与温度的层级 */
}

/* 天气详情弹窗(点击胶囊打开;液态玻璃卡片,与胶囊同款材质) */

.weatherOverlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 250;           /* 层级链:确认弹窗(300)/编辑弹窗(260)之下,待办全量弹窗(240)之上;pinned 小组件形态降到 5 垫底 */
}

/* display:flex 会覆盖 [hidden] 的 UA 隐藏,需显式还原 */
.weatherOverlay[hidden] {
  display: none;
}

/* 钉住为桌面小组件(mac 风格):遮罩透明且点击穿透,卡片移至右上角胶囊下方常驻 */

.weatherOverlay.pinned {
  z-index: 5;            /* 桌面小组件垫底:低于按钮/胶囊/dock(10)、悬浮预览卡(12)、搜索下拉(100)及所有弹窗,不遮挡任何元素 */
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 16px 0 0; /* 左右缘留白 16px;列顶起点由 widgetSlots.js 写入卡片 marginTop */
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none;
}

.weatherOverlay.pinned .weatherModal {
  pointer-events: auto;
  width: 280px;
  border-radius: 20px; /* mac 小组件大圆角 */
  animation: pinIn 0.25s ease; /* 复用待办小组件钉住动画 */
  /* 小组件形态:必须毛玻璃模糊壁纸(弹窗形态则是纯色底) */
  background-color: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* mac 小组件形态:只保留当前天气一行(城市+图标+温度+描述+高低温),
   指标网格/预报区块隐藏,固定 px 尺寸不随窗口缩放 */
.weatherOverlay.pinned .weatherModalHeader {
  padding: 10px 14px 4px;
}

.weatherOverlay.pinned .weatherModalBody {
  padding: 0 14px 12px;
}

.weatherOverlay.pinned .weatherCity {
  font-size: 15px;
}

.weatherOverlay.pinned .weatherModalClose i,
.weatherOverlay.pinned .weatherModalPin i {
  width: 16px;
  height: 16px;
}

.weatherOverlay.pinned .weatherUpdate {
  display: none;
}

.weatherOverlay.pinned .weatherStats {
  display: none;
}

/* 预报区块(24 小时/逐天)只属于完整弹窗,小组件形态隐藏 */
.weatherOverlay.pinned .weatherSection {
  display: none;
}

.weatherOverlay.pinned .weatherNow {
  gap: 12px;
  padding: 4px 0 2px;
  cursor: pointer; /* 点击主体展开完整弹窗 */
}

.weatherOverlay.pinned .weatherNowIcon img {
  width: 44px;
  height: 44px;
}

.weatherOverlay.pinned .weatherNowTemp {
  font-size: 30px;
}

.weatherOverlay.pinned .weatherNowTemp .g {
  font-size: 16px;
}

.weatherOverlay.pinned .weatherNowDesc {
  font-size: 14px;
  margin-top: 2px;
}

.weatherOverlay.pinned .weatherNowRange {
  font-size: 13px;
  margin-top: 2px;
}

.weatherModal {
  display: flex;
  flex-direction: column;
  width: min(560px, 92vw);
  max-height: 82vh;
  background-color: var(--cards); /* 弹窗纯色实底(材质规范:带遮罩的弹窗不用毛玻璃) */
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 18px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  overflow: hidden;
  animation: weatherIn 0.25s ease; /* 独立入场动画,规避全局 transition 干扰 */
  color: var(--fg);
}

@keyframes weatherIn {
  from {
    transform: translateY(12px) scale(0.97);
  }
  to {
    transform: none;
  }
}

/* 暗色:描边与阴影降档,卡片更沉稳 */
.darktheme .weatherModal {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.weatherModalHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 10px;
}

.weatherModalTitle {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.weatherCity {
  font-size: 2.1vh;
  font-weight: bolder;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.weatherUpdate {
  font-size: 1.1vh;
  opacity: 0.6;
  white-space: nowrap;
}

.weatherModalClose {
  display: flex;
  border: none;
  background: none;
  color: var(--fg);
  opacity: 0.65;
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
  flex-shrink: 0;
}

.weatherModalClose:hover {
  opacity: 1;
  background: rgba(128, 128, 128, 0.15);
}

.weatherModalClose i {
  width: 1.45vh;
  height: 1.45vh;
}

.weatherModalActions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

/* 切换城市按钮:与图钉/关闭同款,点击展开搜索面板 */

.weatherModalCity {
  display: flex;
  border: none;
  background: none;
  color: var(--fg);
  opacity: 0.65;
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
}

.weatherModalCity:hover {
  opacity: 1;
  background: rgba(128, 128, 128, 0.15);
}

.weatherModalCity i {
  width: 1.45vh;
  height: 1.45vh;
}

/* 图钉按钮:固定为桌面小组件开关,钉住时高亮 */

.weatherModalPin {
  display: flex;
  border: none;
  background: none;
  color: var(--fg);
  opacity: 0.65;
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
}

.weatherModalPin:hover {
  opacity: 1;
  background: rgba(128, 128, 128, 0.15);
}

.weatherModalPin.active {
  opacity: 1;
  color: var(--accent); /* 钉住态用主题强调色,与待办图钉一致 */
}

.weatherModalPin i {
  width: 1.45vh;
  height: 1.45vh;
}

/* 钉住的小组件形态:右上角按钮(图钉/✕)隐藏,弹窗形态保留;删除改由长按抖动后的徽章承担 */
.weatherOverlay.pinned .weatherModalActions {
  display: none;
}

/* 钉住形态卡片设为定位容器,供右上角删除徽章绝对定位 */
.weatherOverlay.pinned .weatherModal {
  position: relative;
}

/* 内容滚动区(细滚动条与 searchHistory 同款) */
.weatherModalBody {
  overflow-y: auto;
  padding: 4px 20px 18px;
  scrollbar-width: thin;
  scrollbar-color: rgba(128, 128, 128, 0.35) transparent;
}

.weatherModalBody::-webkit-scrollbar {
  width: 6px;
}

.weatherModalBody::-webkit-scrollbar-track {
  background: transparent;
}

.weatherModalBody::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.35);
  border-radius: 3px;
}

.weatherModalBody::-webkit-scrollbar-thumb:hover {
  background: rgba(128, 128, 128, 0.6);
}

/* 当前天气大字区 */

.weatherNow {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 6px 0 14px;
}

.weatherNowIcon img {
  width: 8.8vh;
  height: 8.8vh;
  filter: saturate(1.15) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.25));
}

.darktheme .weatherNowIcon img {
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.45));
}

.weatherNowTemp {
  font-size: 4.8vh;
  font-weight: bolder;
  line-height: 1;
}

.weatherNowTemp .g {
  font-size: 2.1vh;
  opacity: 0.7;
}

.weatherNowDesc {
  font-size: 1.45vh;
  opacity: 0.85;
  margin-top: 4px;
}

.weatherNowRange {
  font-size: 1.3vh;
  opacity: 0.6;
  margin-top: 3px;
}

/* 指标网格(2×3 玻璃小卡) */

.weatherStats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 2px 0 14px;
}

.weatherStat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--panel-item-border); /* 跟随主题:纯色底上白透明描边不可见 */
  background: var(--panel-item-bg);
}

.darktheme .weatherStat {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.weatherStatLabel {
  font-size: 1.1vh;
  opacity: 0.6;
}

.weatherStatValue {
  font-size: 1.75vh;
  font-weight: bolder;
}

/* 24 小时预报横向滚动条 */

.weatherSection {
  padding: 2px 0 10px;
}

.weatherSectionTitle {
  font-size: 1.3vh;
  opacity: 0.6;
  margin-bottom: 8px;
}

.weatherHourly {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(128, 128, 128, 0.35) transparent;
}

.weatherHourly::-webkit-scrollbar {
  height: 6px;
}

.weatherHourly::-webkit-scrollbar-track {
  background: transparent;
}

.weatherHourly::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.35);
  border-radius: 3px;
}

.weatherHourItem {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 62px;
  padding: 10px 6px;
  border-radius: 12px;
  border: 1px solid var(--panel-item-border); /* 跟随主题:纯色底上白透明描边不可见 */
  background: var(--panel-item-bg);
}

.weatherHourItem:hover {
  background: rgba(255, 255, 255, 0.6); /* 浅色主题下微提亮,提升悬浮手感 */
}

.darktheme .weatherHourItem {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.darktheme .weatherHourItem:hover {
  background: rgba(255, 255, 255, 0.1);
}

.weatherHourTime {
  font-size: 1.1vh;
  opacity: 0.7;
}

.weatherHourItem img {
  width: 2.7vh;
  height: 2.7vh;
}

.weatherHourTemp {
  font-size: 1.5vh;
  font-weight: bolder;
}

.weatherHourPop {
  font-size: 1.05vh;
  color: #5aa7de; /* 降水概率用蓝,深浅主题下均可辨 */
  min-height: 1.05vh; /* 空值占位,防止格子高度跳动 */
}

/* 逐天预报列表 */

.weatherDaily {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.weatherDayItem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--panel-item-border); /* 跟随主题:纯色底上白透明描边不可见 */
  background: var(--panel-item-bg);
}

.weatherDayItem:hover {
  background: rgba(255, 255, 255, 0.6); /* 浅色主题下微提亮,提升悬浮手感 */
}

.darktheme .weatherDayItem {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
}

.darktheme .weatherDayItem:hover {
  background: rgba(255, 255, 255, 0.1);
}

.weatherDayName {
  flex: 0 0 52px;
  font-size: 1.35vh;
  font-weight: bolder;
}

.weatherDayItem img {
  width: 2.9vh;
  height: 2.9vh;
}

.weatherDayText {
  flex: 1;
  font-size: 1.2vh;
  opacity: 0.75;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.weatherDayRange {
  font-size: 1.35vh;
  font-weight: bolder;
}

.weatherDayRange .low {
  opacity: 0.6;
  font-weight: normal;
}

/* 底部 dock(macOS 式:图标底座 + 光标感应联动放大, hover 文字气泡) */

.dockBlock {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  margin-bottom: 1.2vh;   /* 贴底间距,与 macOS 托盘底部留白同感 */
  background-color: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18), 0 20px 48px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  z-index: 10;
}

/* 暗色:描边与阴影降档,托盘更沉稳 */
.darktheme .dockBlock {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 20px 48px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.dockItem {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--fg);
  transform-origin: bottom center;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 图标底座:圆角方块,与网格视图图标底座同色系;裁剪涟漪,波纹只在图标内扩散 */
.iconWrap {
  position: relative;
  overflow: hidden;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: var(--panel-item-icon-bg);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.dockItem .iconWrap svg,
.dockItem .iconWrap i {
  width: 22px;
  height: 22px;
}

.dockItem:hover .iconWrap {
  background: rgba(87, 160, 217, 0.28);
}

/* 名称气泡:JS 在 body 下渲染独立 fixed 元素(.dockTooltip),
   避免嵌套 backdrop-filter 与 dock 缩放变换导致气泡无法毛玻璃;
   模板中的 span.label 仅作名称数据源,不参与显示 */
.dockItem .label {
  display: none;
}

.dockTooltip {
  position: fixed;
  z-index: 100;
  padding: 5px 12px;
  border-radius: 10px;
  background-color: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  color: var(--fg);
  font-size: 12px;
  font-weight: bold;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.18s, transform 0.18s;
}

.dockTooltip.show {
  opacity: 1;
  transform: translateY(0);
}

/* 「更多」「待办」「备忘录」「小组件」按钮:button 重置,视觉与 dockItem 一致 */
.dockMore,
.dockTodo,
.dockMemo,
.dockWidgetCenter {
  border: none;
  background: none;
  font-family: inherit;
  cursor: pointer;
}

/* dock 待办按钮未完成角标(贴图标右上角) */

.dockTodoBadge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9px;
  background-color: #e05d5d;
  color: #fff;
  font-size: 10px;
  line-height: 17px;
  text-align: center;
  pointer-events: none;
}

/* 提醒触发时角标脉冲(一次性, animation 规避全局 transition 干扰) */
.dockTodoBadge.pulse {
  animation: badgePulse 0.5s ease 3;
}

@keyframes badgePulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.35);
  }
}

.todoHeader {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px 8px;
  font-size: 1.45vh;
  font-weight: bold;
  color: var(--fg);
}

.todoCount {
  flex: 1;
  font-size: 1.1vh;
  color: var(--sfg);
  font-weight: normal;
}

.todoInputRow {
  padding: 0 12px 8px;
}

/* 内嵌输入行:回车即添加(与搜索框同风格的聚焦高亮) */

.todoInput {
  width: 100%;
  border: 1px solid transparent;
  outline: none;
  background-color: var(--background);
  color: var(--fg);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 1.3vh;
  font-family: inherit;
}

.todoInput:focus {
  border-color: var(--accent);
}

.todoInput::placeholder {
  color: var(--sfg);
}

.todoItem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  color: var(--fg);
  font-size: 1.3vh;
}

.todoItem:hover {
  background-color: var(--background);
}

/* 自定义 checkbox(圆形, 完成态蓝色填充) */

.todoCheck {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  border: 1.5px solid var(--sfg);
  cursor: pointer;
  flex-shrink: 0;
}

.todoCheck:hover {
  border-color: var(--accent);
}

.todoCheck svg {
  width: 11px;
  height: 11px;
  opacity: 0;
}

.todoItem.done .todoCheck {
  background-color: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.todoItem.done .todoCheck svg {
  opacity: 1;
}

.todoText {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.todoItem.done .todoText {
  color: var(--sfg);
  text-decoration: line-through;
}

.todoEditBtn,
.todoDel {
  display: flex;
  border: none;
  background: none;
  color: var(--sfg);
  cursor: pointer;
  padding: 2px;
  border-radius: 5px;
  opacity: 0;
  flex-shrink: 0;
}

.todoItem:hover .todoEditBtn,
.todoItem:hover .todoDel {
  opacity: 0.8;
}

.todoEditBtn:hover {
  color: var(--accent);
  background-color: var(--cards);
}

.todoDel:hover {
  color: #e05d5d;
  background: rgba(224, 93, 93, 0.12);
}

.todoEditBtn svg,
.todoDel svg {
  width: 1.1vh;
  height: 1.1vh;
}

/* 提醒时间徽标(未来时间/已到期/已错过三态;点击进入编辑弹窗重设) */

.todoRemindBadge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  padding: 2px 7px;
  border-radius: 9px;
  font-size: 1vh;
  color: var(--accent);
  background: rgba(87, 160, 217, 0.14);
  cursor: pointer;
}

.todoRemindBadge svg {
  width: 0.9vh;
  height: 0.9vh;
}

.todoRemindBadge:hover {
  background: rgba(87, 160, 217, 0.24);
}

/* 已错过/已到期:警示红标 */
.todoRemindBadge.missed,
.todoRemindBadge.due {
  color: #e05d5d;
  background: rgba(224, 93, 93, 0.12);
}

.todoRemindBadge.missed:hover,
.todoRemindBadge.due:hover {
  background: rgba(224, 93, 93, 0.22);
}

/* 已到期未触发(瞬时态):呼吸脉冲 */
.todoRemindBadge.due {
  animation: remindPulse 1.2s ease infinite;
}

@keyframes remindPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

/* 提醒触发瞬间整行脉冲(一次性) */
.todoItem.remindFired {
  animation: remindFiredFlash 0.9s ease 2;
}

@keyframes remindFiredFlash {
  0%,
  100% {
    background-color: transparent;
  }
  50% {
    background-color: rgba(224, 93, 93, 0.18);
  }
}

/* 待办弹窗(dock 待办按钮打开;层级:设置 200 < 弹窗 240 < 编辑 250 < toast 300;图钉可固定到桌面) */

.todoFullOverlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 240;           /* 层级链:确认(300)/编辑(260)/天气(250)弹窗之下;pinned 小组件形态降到 5 垫底 */
}

/* display:flex 会覆盖 [hidden] 的 UA 隐藏,需显式还原 */
.todoFullOverlay[hidden] {
  display: none;
}

/* 固定到桌面:遮罩透明且点击穿透,弹窗按槽位列常驻(桌面小组件形态)
   本块为兜底与默认右列同几何;列对齐类与卡片 marginTop 由 widgetSlots.js 挂载 */

.todoFullOverlay.pinned {
  z-index: 5;            /* 桌面小组件垫底:低于按钮/胶囊/dock(10)、搜索下拉(100)及所有弹窗,不遮挡任何元素 */
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 16px 0 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none; /* 容器穿透,不挡桌面交互 */
}

/* ── 小组件列对齐(槽位系统,几何与 assets/js/widgetSlots.js 同步) ──
   左右两列各自从顶部紧密堆叠:列内坐标由 widgetSlots.js 按组件实际高度累加写入卡片 marginTop,
   列内间隙恒定 12px,无均摊视口的大空档;中列不设列,主页中轴(时钟/搜索框)不被遮挡 */

.weatherOverlay.pinned.slot-right,
.todoFullOverlay.pinned.slot-right,
.memoFullOverlay.pinned.slot-right,
.memoDisplayOverlay.pinned.slot-right {
  justify-content: flex-end;
  align-items: flex-start;
  padding: 0 16px 0 0;
}

.weatherOverlay.pinned.slot-left,
.todoFullOverlay.pinned.slot-left,
.memoFullOverlay.pinned.slot-left,
.memoDisplayOverlay.pinned.slot-left {
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0 0 0 16px;
}

.todoFullOverlay.pinned .todoFullModal {
  pointer-events: auto;
  width: 300px;
  max-height: calc(100vh - 200px); /* 上下避开按钮与 dock */
  background-color: var(--glass-bg); /* 固定到桌面的小组件要毛玻璃:直接浮在壁纸上模糊壁纸 */
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  animation: pinIn 0.25s ease; /* 固定瞬间从右滑入,独立动画规避全局 transition 干扰 */
}

/* 临时弹窗形态(固定小组件常驻时点 dock 按钮展开):覆盖 pinned 常驻样式,呈现居中完整弹窗 */

.todoFullOverlay.pinned.tempFull {
  z-index: 240;
  align-items: center;
  justify-content: center;
  padding: 0;           /* 覆盖常驻/槽位类的偏移 */
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: auto; /* 遮罩恢复点击 */
}

.todoFullOverlay.pinned.tempFull .todoFullModal {
  width: min(480px, 90vw);
  max-height: 70vh;
  background-color: var(--cards);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: none;      /* 取消固定滑入动画 */
}

/* 临时弹窗形态:右上角图钉/关闭恢复显示,删除徽章隐藏(弹窗形态无长按删除) */
.todoFullOverlay.pinned.tempFull .todoFullPin,
.todoFullOverlay.pinned.tempFull .todoFullClose,
.memoFullOverlay.pinned.tempFull .memoFullPin,
.memoFullOverlay.pinned.tempFull .memoFullClose {
  display: flex;
}

.todoFullOverlay.pinned.tempFull .todoDelBadge,
.memoFullOverlay.pinned.tempFull .memoDelBadge {
  display: none;
}

@keyframes pinIn {
  from {
    transform: translateX(16px);
  }
  to {
    transform: none;
  }
}

.todoFullModal {
  display: flex;
  flex-direction: column;
  width: min(480px, 90vw); /* 固定尺寸防跳动 */
  max-height: 70vh;
  background-color: var(--cards); /* 弹窗纯白实色:遮罩已提供层次,毛玻璃反而降可读性 */
  border: 1px solid var(--panel-item-border);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

/* 图钉按钮:固定到桌面开关(待办/备忘录共用) */

.todoFullPin,
.memoFullPin {
  display: flex;
  border: none;
  background: none;
  color: var(--sfg);
  cursor: pointer;
  padding: 3px;
  border-radius: 6px;
}

.todoFullPin:hover,
.memoFullPin:hover {
  color: var(--fg);
  background-color: var(--background);
}

.todoFullPin.pinned,
.memoFullPin.pinned {
  color: var(--accent); /* 固定态高亮 */
}

.todoFullPin svg,
.memoFullPin svg {
  width: 1.2vh;
  height: 1.2vh;
}

.todoFullClose,
.memoFullClose {
  display: flex;
  border: none;
  background: none;
  color: var(--sfg);
  cursor: pointer;
  padding: 3px;
  border-radius: 6px;
}

.todoFullClose:hover,
.memoFullClose:hover {
  color: var(--fg);
  background-color: var(--background);
}

.todoFullClose svg,
.memoFullClose svg {
  width: 1.2vh;
  height: 1.2vh;
}

/* 钉住的小组件形态:右上角按钮(图钉/✕)隐藏,弹窗形态保留;删除改由长按抖动后的徽章承担 */
.todoFullOverlay.pinned .todoFullPin,
.todoFullOverlay.pinned .todoFullClose,
.memoFullOverlay.pinned .memoFullPin,
.memoFullOverlay.pinned .memoFullClose {
  display: none;
}

/* 钉住形态卡片设为定位容器,供右上角删除徽章绝对定位 */
.todoFullOverlay.pinned .todoFullModal,
.memoFullOverlay.pinned .memoFullModal {
  position: relative;
}

/* 完整列表(弹窗内滚动;空态用 :empty 伪元素提示,无需额外 DOM) */

.todoFullList {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 8px 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(128, 128, 128, 0.35) transparent;
}

.todoFullList:empty::after {
  content: '暂无待办,在上方输入添加';
  display: block;
  padding: 18px 0;
  text-align: center;
  font-size: 1.1vh;
  color: var(--sfg);
}

/* 固定态截断提示(未显示完时) */

.todoPinMore {
  padding: 0 12px 8px;
  text-align: center;
  font-size: 1.05vh;
  color: var(--sfg);
}

/* 底部清空已完成(ghost 风格, 悬停红色警示) */

.todoFullFooter {
  padding: 0 12px 10px;
}

.todoFullClear {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  border: none;
  background: none;
  color: var(--sfg);
  cursor: pointer;
  font-size: 1.2vh;
  padding: 6px;
  border-radius: 9px;
}

.todoFullClear:hover {
  color: #e05d5d;
  background: rgba(224, 93, 93, 0.12);
}

.todoFullClear svg {
  width: 1.2vh;
  height: 1.2vh;
}

/* 待办编辑弹窗(居中, 液态玻璃卡片) */

.todoModalOverlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 260;           /* 层级链:确认弹窗(300)之下,天气/待办弹窗之上 */
}

.todoModal {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(320px, 86vw);
  background-color: var(--cards); /* 弹窗纯白实色(与主弹窗一致) */
  border: 1px solid var(--panel-item-border);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
  animation: viewIn 0.2s ease;
}

.todoModalTitle {
  font-size: 1.45vh;
  font-weight: bold;
  color: var(--fg);
}

#todoModalInput {
  width: 100%;
  border: 1px solid transparent;
  outline: none;
  background-color: var(--background);
  color: var(--fg);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 1.35vh;
  font-family: inherit;
}

#todoModalInput:focus {
  border-color: var(--accent);
}

/* 提醒时间行(铃铛 + datetime-local + 清除按钮) */

.todoModalRemind {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  background-color: var(--background);
  border-radius: 8px;
  padding: 0 10px;
}

.todoModalRemind:focus-within {
  border-color: var(--accent);
}

.todoModalRemind > i {
  display: flex;
  flex-shrink: 0;
  color: var(--sfg);
}

.todoModalRemind > i svg {
  width: 1.2vh;
  height: 1.2vh;
}

#todoModalRemindAt {
  flex: 1;
  border: none;
  outline: none;
  background: none;
  color: var(--fg);
  font-size: 1.2vh;
  font-family: inherit;
  padding: 8px 0;
  color-scheme: light dark; /* 跟随主题,暗色下日历面板不刺眼 */
}

#todoModalRemindAt::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
}

#todoModalRemindClear {
  display: flex;
  border: none;
  background: none;
  color: var(--sfg);
  cursor: pointer;
  padding: 3px;
  border-radius: 5px;
  flex-shrink: 0;
}

/* display:flex 覆盖 [hidden] 的 UA 隐藏,需显式还原 */
#todoModalRemindClear[hidden] {
  display: none;
}

#todoModalRemindClear:hover {
  color: #e05d5d;
  background: rgba(224, 93, 93, 0.12);
}

#todoModalRemindClear svg {
  width: 1.05vh;
  height: 1.05vh;
}

.todoModalActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

#todoModalOk {
  border: none;
  background-color: var(--accent);
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  padding: 7px 16px;
  border-radius: 8px;
}

#todoModalCancel {
  border: none;
  background: none;
  color: var(--sfg);
  cursor: pointer;
  font-size: 13px;
  padding: 7px 12px;
  border-radius: 8px;
}

#todoModalCancel:hover {
  background-color: var(--background);
}

/* 轻量 toast(顶部居中, 自动消失, 由 todo.js 动态创建) */

#toast {
  position: fixed;
  top: 6em;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background-color: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--panel-item-border);
  color: var(--fg);
  font-size: 1.35vh;
  padding: 9px 18px;
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  opacity: 0;
  pointer-events: none;
  z-index: 300;
  /* 显式 transition 覆盖全局 * transition, 仅淡入淡出 */
  transition: opacity 0.25s ease, transform 0.25s ease;
}

#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── 备忘录弹窗(dock 备忘录按钮打开;结构与交互镜像待办弹窗，无完成态、支持置顶)── */

.memoFullOverlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 240;           /* 层级链：确认/编辑 / 天气/待办弹窗之下;钉住小组件形态降到 5 垫底 */
}

/* display:flex 会覆盖 [hidden] 的 UA 隐藏，需显式还原 */
.memoFullOverlay[hidden] {
  display: none;
}

/* 固定到桌面：遮罩透明且点击穿透，弹窗按槽位列常驻 (桌面小组件形态) */

.memoFullOverlay.pinned {
  z-index: 5;            /* 桌面小组件垫底:低于按钮/胶囊/dock(10)、搜索下拉 (100) 及所有弹窗 */
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 16px 0 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: none; /* 容器穿透，不挡桌面交互 */
}

.memoFullOverlay.pinned .memoFullModal {
  pointer-events: auto;
  width: 300px;
  max-height: calc(100vh - 200px); /* 上下避开按钮与 dock */
  background-color: var(--glass-bg); /* 固定到桌面的小组件要毛玻璃：直接浮在壁纸上模糊壁纸 */
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  animation: pinIn 0.25s ease; /* 固定瞬间从右滑入，独立动画规避全局 transition 干扰 */
}

/* 临时弹窗形态 (固定小组件常驻时点 dock 按钮展开):覆盖 pinned 常驻样式，呈现居中完整弹窗 */

.memoFullOverlay.pinned.tempFull {
  z-index: 240;
  align-items: center;
  justify-content: center;
  padding: 0;           /* 覆盖常驻/槽位类的偏移 */
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  pointer-events: auto; /* 遮罩恢复点击 */
}

.memoFullOverlay.pinned.tempFull .memoFullModal {
  width: min(480px, 90vw);
  max-height: 70vh;
  background-color: var(--cards);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: none;      /* 取消固定滑入动画 */
}

.memoFullModal {
  display: flex;
  flex-direction: column;
  width: min(480px, 90vw); /* 固定尺寸防跳动 */
  max-height: 70vh;
  background-color: var(--cards); /* 弹窗纯白实色：遮罩已提供层次，毛玻璃反而降可读性 */
  border: 1px solid var(--panel-item-border);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

/* 头部：标题 + 条数 + 图钉/关闭 (按钮样式与待办共用选择器) */

.memoHeader {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px 8px;
  font-size: 1.45vh;
  font-weight: bold;
  color: var(--fg);
}

.memoCount {
  flex: 1;
  font-size: 1.1vh;
  color: var(--sfg);
  font-weight: normal;
}

/* 内嵌输入行：多行 textarea,Enter 提交 / Shift+Enter 换行,JS 自适应增高 */

.memoInputRow {
  padding: 0 12px 8px;
}

.memoInput {
  display: block;        /* textarea 默认 inline-block,归块避免基线空隙 */
  width: 100%;
  border: 1px solid transparent;
  outline: none;
  background-color: var(--background);
  color: var(--fg);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 1.3vh;
  font-family: inherit;
  line-height: 1.5;
  resize: none;                                        /* 禁手动拖拽,高度由 JS 自适应 */
  max-height: calc(1.95vh * 3 + 14px);                  /* 上限 3 行(1.3vh×1.5 行高×3 行 + 上下 padding),超出内部滚动 */
  overflow-y: auto;
}

.memoInput:focus {
  border-color: var(--accent);
}

.memoInput::placeholder {
  color: var(--sfg);
}

/* 列表行：置顶钉 + 文本 + 编辑/删除 (无完成态;置顶行钉常亮强调) */

.memoItem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  color: var(--fg);
  font-size: 1.3vh;
}

.memoItem:hover {
  background-color: var(--background);
}

.memoTopBtn {
  display: flex;
  border: none;
  background: none;
  color: var(--sfg);
  cursor: pointer;
  padding: 2px;
  border-radius: 5px;
  opacity: 0;
  flex-shrink: 0;
}

.memoItem:hover .memoTopBtn,
.memoItem.top .memoTopBtn {
  opacity: 0.8;
}

.memoItem.top .memoTopBtn {
  color: var(--accent);
}

.memoTopBtn:hover {
  color: var(--accent);
  background-color: var(--cards);
}

.memoTopBtn svg {
  width: 1.1vh;
  height: 1.1vh;
}

.memoText {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.memoDeskBtn,
.memoEditBtn,
.memoDel {
  display: flex;
  border: none;
  background: none;
  color: var(--sfg);
  cursor: pointer;
  padding: 2px;
  border-radius: 5px;
  opacity: 0;
  flex-shrink: 0;
}

.memoItem:hover .memoDeskBtn,
.memoItem:hover .memoEditBtn,
.memoItem:hover .memoDel {
  opacity: 0.8;
}

.memoEditBtn:hover {
  color: var(--accent);
  background-color: var(--cards);
}

.memoDel:hover {
  color: #e05d5d;
  background: rgba(224, 93, 93, 0.12);
}

.memoDeskBtn:hover {
  color: var(--accent);
  background-color: var(--cards);
}

.memoDeskBtn svg,
.memoEditBtn svg,
.memoDel svg {
  width: 1.1vh;
  height: 1.1vh;
}

/* 完整列表 (弹窗内滚动;空态用 :empty 伪元素提示，无需额外 DOM) */

.memoFullList {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0 8px 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(128, 128, 128, 0.35) transparent;
}

.memoFullList:empty::after {
  content: '暂无备忘录，在上方输入添加';
  display: block;
  padding: 18px 0;
  text-align: center;
  font-size: 1.1vh;
  color: var(--sfg);
}

/* 固定态截断提示 (未显示完时) */

.memoPinMore {
  padding: 0 12px 8px;
  text-align: center;
  font-size: 1.05vh;
  color: var(--sfg);
}

/* 备忘录编辑弹窗 (居中，与待办编辑弹窗同风格) */

.memoModalOverlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 260;           /* 层级链：确认弹窗 (300) 之下，天气/待办/备忘录弹窗之上 */
}

.memoModal {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(320px, 86vw);
  background-color: var(--cards); /* 弹窗纯白实色 (与主弹窗一致) */
  border: 1px solid var(--panel-item-border);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
  animation: viewIn 0.2s ease;
}

.memoModalTitle {
  font-size: 1.45vh;
  font-weight: bold;
  color: var(--fg);
}

#memoModalInput {
  width: 100%;
  border: 1px solid transparent;
  outline: none;
  background-color: var(--background);
  color: var(--fg);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 1.35vh;
  font-family: inherit;
  line-height: 1.5;
  resize: none;          /* 禁手动拖拽,固定 3 行内部滚动 */
  display: block;
}

#memoModalInput:focus {
  border-color: var(--accent);
}

.memoModalActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

#memoModalOk {
  border: none;
  background-color: var(--accent);
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  padding: 7px 16px;
  border-radius: 8px;
}

#memoModalCancel {
  border: none;
  background: none;
  color: var(--sfg);
  cursor: pointer;
  font-size: 13px;
  padding: 7px 12px;
  border-radius: 8px;
}

#memoModalCancel:hover {
  background-color: var(--background);
}

/* 搜索下拉:快捷入口直达条目(与 historyItem 同款, lucide 替换后需匹配 svg) */

.directItem {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  border-radius: 7px;
  cursor: pointer;
  color: var(--fg);
  font-size: 1.35vh;
}

.directItem:hover {
  background-color: var(--accent);
  color: #fff; /* 悬浮白字:灰字在蓝底上对比不足 */
}

.directItem span {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* brandIcons 内联 svg 与 lucide 图标统一尺寸 */
.directItem svg {
  width: 1.2vh;
  height: 1.2vh;
  flex-shrink: 0;
}

/* 网格视图:小时钟 */

.gridClockBlock {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2.4vh;
}

.gridClock {
  display: flex;
  align-items: center;
}

#gridHour,
#gridSeparator,
#gridMinutes {
  font-size: 4.8vh;
  font-weight: bolder;
  color: var(--fg);
  line-height: 1;
}

#gridDateText {
  font-size: 1.75vh;
  color: var(--sfg);
  margin-top: 0.65vh;
}

.panelGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 10px;
  width: min(92vw, 780px);
}

.panelItem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--fg);
  font-size: 1.45vh;
  font-weight: bold;
  background-color: var(--panel-item-bg); /* 克制玻璃底:纯色背景几乎隐形,上壁纸后呈毛玻璃 */
  border: 1px solid var(--panel-item-border); /* 似有似无的描边 */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.panelItem:hover {
  background-color: var(--accent);
  border-color: var(--accent); /* 描边融入高亮色,无断层 */
  color: #fff;
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(87, 160, 217, 0.28);
}

.panelItem svg {
  box-sizing: content-box;
  padding: 9px; /* 图标圆形底座(24px 图标 + 内边距 = 42px 圆) */
  border-radius: 50%;
  background-color: var(--panel-item-icon-bg);
}

.panelItem:hover svg {
  background-color: rgba(255, 255, 255, 0.22);
}

.panelItem span {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 预留项目卡片区 */

.panelCards {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  width: min(92vw, 780px);
}

.placeholderCard {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 6px;
  border: 1.5px dashed var(--sfg);
  border-radius: 12px;
  color: var(--sfg);
  font-size: 1.35vh;
  opacity: 0.75;
}

.placeholderCard i {
  width: 2.1vh;
  height: 2.1vh;
}

.projectCard {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 6px;
  border-radius: 12px;
  background-color: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--panel-item-border); /* 与网格卡片同款描边 */
  color: var(--fg);
  font-size: 1.35vh;
  font-weight: bold;
}

.projectCard i {
  width: 2.1vh;
  height: 2.1vh;
}

/* 面板加号按钮 */

.panelAdd {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px auto 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px dashed var(--sfg);
  background: none;
  color: var(--sfg);
  cursor: pointer;
}

.panelAdd:hover {
  color: var(--fg);
  border-color: var(--fg);
}

.panelAdd i {
  width: 1.75vh;
  height: 1.75vh;
}

/* ── 抖动编辑模式 + 右键菜单 + 删除确认(长按/右键快捷入口触发) ── */

@keyframes jiggle {
  0%,
  100% {
    transform: rotate(-1.4deg);
  }
  50% {
    transform: rotate(1.4deg);
  }
}

body.editing .panelItem,
body.editing .dockItem[data-id] {
  animation: jiggle 0.32s ease-in-out infinite; /* 相位延迟由 editmode.js 随机负值错开 */
}

/* 编辑模式:放开溢出裁剪(原 ripple 样式加了 overflow:hidden,会裁掉外凸徽章);
   并临时关闭毛玻璃——无限抖动动画与 backdrop-filter 在部分 Chromium 版本/显卡下有
   合成 bug,会导致卡片背景渲染为全透明 */
body.editing .panelItem {
  overflow: visible;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 编辑模式禁选文字:长按不会选中入口名/触发系统菜单 */
body.editing {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* ✕ 删除徽章:红色小圆贴图标右上角,默认隐藏,body.editing 时显示 */
.panelItem .delBadge,
.dockItem .delBadge {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 6;
  display: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #e05d5d;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
  max-width: none;
  white-space: normal;
  overflow: visible;
}

body.editing .delBadge {
  display: flex;
}

/* ── 钉住小组件长按删除模式(天气/待办共用):长按卡片 → 抖动 → 右上角 ✕ 徽章删除 ── */

/* 抖动态:卡片随机负相位错落抖动(相位延迟由各自 js 随机负值写入) */
.weatherOverlay.widgetJiggle .weatherModal,
.todoFullOverlay.widgetJiggle .todoFullModal,
.memoFullOverlay.widgetJiggle .memoFullModal,
.memoDisplayOverlay.widgetJiggle .memoDisplayModal {
  animation: jiggle 0.32s ease-in-out infinite;
  /* 无限抖动动画 + backdrop-filter 在部分 Chromium 版本有合成 bug,临时关闭毛玻璃 */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 抖动态禁选文字:长按不会选中小组件文本/触发系统菜单 */
.weatherOverlay.widgetJiggle,
.todoFullOverlay.widgetJiggle,
.memoFullOverlay.widgetJiggle,
.memoDisplayOverlay.widgetJiggle {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* ── 小组件拖拽换位(槽位系统,逻辑在 widgetSlots.js)── */

/* 拖动中:暂停抖动动画与过渡(transform 由 js 实时写跟手位移),阴影加深强化悬浮感 */
.widgetDragging {
  animation: none !important;
  transition: none !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
  cursor: grabbing;
}

/* 拖动期间全局抓手光标并禁选文字(指针会移出小组件范围) */
html.widgetDragActive,
html.widgetDragActive * {
  cursor: grabbing !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* 抖动态/拖动中卡片内图片禁用原生拖拽与指针,防误触浏览器图片拖影 */
.widgetJiggle .weatherModal img,
.widgetJiggle .todoFullModal img,
.widgetDragging img {
  -webkit-user-drag: none;
  pointer-events: none;
}

/* 触摸设备：抖动态卡片禁用浏览器默认手势，保证 pointermove 连续跟手 */
.weatherOverlay.widgetJiggle .weatherModal,
.todoFullOverlay.widgetJiggle .todoFullModal,
.memoFullOverlay.widgetJiggle .memoFullModal,
.memoDisplayOverlay.widgetJiggle .memoDisplayModal {
  touch-action: none;
}

/* 目标插入位虚线占位框:拖动中显示,预览吸附位置(位置尺寸由 js 写入) */
.widgetSlotGhost {
  position: fixed;
  z-index: 6; /* 高于小组件垫底层(5),低于按钮/胶囊(10) */
  border: 1.5px dashed rgba(128, 128, 128, 0.55);
  background: rgba(128, 128, 128, 0.12);
  border-radius: 20px;
  pointer-events: none;
  transition: left 0.12s ease, top 0.12s ease;
}

/* ── 备忘单条小组件(一条备忘录占一个卡片;由 memoDisplay.js 动态创建,数据与备忘录同源) ── */

.memoDisplayOverlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  z-index: 5;            /* 桌面小组件垫底层:低于按钮/胶囊/dock(10) */
  pointer-events: none;  /* 容器穿透,不挡桌面交互;卡片自身恢复 */
}

/* display:flex 会覆盖 [hidden] 的 UA 隐藏,需显式还原 */
.memoDisplayOverlay[hidden] {
  display: none;
}

.memoDisplayModal {
  position: relative;    /* 供删除徽章绝对定位 */
  display: flex;
  flex-direction: column;
  width: 260px;          /* 单条内容卡比其他小组件略窄,多卡堆叠更轻量 */
  max-height: calc(100vh - 200px); /* 上下避开按钮与 dock */
  background-color: var(--glass-bg); /* 钉住即毛玻璃:直接浮在壁纸上模糊壁纸 */
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--panel-item-border);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  animation: pinIn 0.25s ease; /* 钉住瞬间滑入,独立动画规避全局 transition 干扰 */
  pointer-events: auto;
  cursor: pointer;       /* 点卡片弹编辑弹窗 */
}

/* 单条内容:多行完整显示(保留换行),过长时内部滚动 */
.memoCardText {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 14px;
  color: var(--fg);
  font-size: 1.3vh;
  line-height: 1.6;
  white-space: pre-wrap;      /* 保留编辑时的换行 */
  word-break: break-word;     /* 长英文/数字串折行 */
  scrollbar-width: thin;
  scrollbar-color: rgba(128, 128, 128, 0.35) transparent;
}

/* ✕ 删除徽章：红色小圆贴卡片右上角，默认隐藏，抖动态显示 (与 delBadge 同款设计语言) */
.weatherDelBadge,
.todoDelBadge,
.memoDelBadge,
.memoDisplayDelBadge {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 6;
  display: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: #e05d5d;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
}

.weatherOverlay.widgetJiggle .weatherDelBadge,
.todoFullOverlay.widgetJiggle .todoDelBadge,
.memoFullOverlay.widgetJiggle .memoDelBadge,
.memoDisplayOverlay.widgetJiggle .memoDisplayDelBadge {
  display: flex;
}

.weatherDelBadge svg,
.todoDelBadge svg,
.memoDelBadge svg,
.memoDisplayDelBadge svg {
  width: 12px;
  height: 12px;
}

/* 徽章内 lucide 图标:覆盖 .panelItem span / svg 的默认底座样式 */
.panelItem .delBadge svg,
.dockItem .delBadge svg {
  width: 11px;
  height: 11px;
  padding: 0;
  background: none;
  border-radius: 0;
  box-sizing: border-box;
}

/* 网格空态(入口删光后显示) */
.panelEmpty {
  grid-column: 1 / -1;
  padding: 24px 0;
  text-align: center;
  color: var(--sfg);
  font-size: 1.45vh;
}

/* 右键菜单:毛玻璃卡片 */
.ctxMenu {
  position: fixed;
  z-index: 245;         /* 层级链:低于确认(300)/编辑(260)/天气(250),仅高于 pinned 待办桌面小组件(240)与设置弹窗(230);模态弹窗打开时右键被守卫拦截,菜单不与弹窗并存 */
  display: flex;
  flex-direction: column;
  min-width: 170px;
  padding: 6px;
  border-radius: 12px;
  background-color: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: none; /* 关掉全局过渡,菜单弹出示位置时不得从左上方滑入 */
  animation: viewIn 0.15s ease;
}

.ctxItem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: none;
  background: none;
  border-radius: 8px;
  color: var(--fg);
  font-size: 1.35vh;
  cursor: pointer;
  text-align: left;
}

.ctxItem:hover {
  background-color: var(--accent);
  color: #fff;
}

.ctxItem i {
  width: 1.35vh;
  height: 1.35vh;
}

.ctxItem span {
  flex: 1;
}

.ctxDivider {
  height: 1px;
  margin: 4px 6px;
  background-color: var(--panel-item-border);
}

.ctxDanger:hover {
  background-color: #e05d5d;
}

/* 删除确认弹窗(与设置/待办弹窗同款遮罩) */
.confirmOverlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 300;
}

.confirmModal {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(300px, 86vw);
  background-color: var(--cards); /* 弹窗纯白实色(与主弹窗一致) */
  border: 1px solid var(--panel-item-border);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
  animation: viewIn 0.2s ease;
}

.confirmTitle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.45vh;
  font-weight: bold;
  color: var(--fg);
}

.confirmTitle i {
  width: 1.45vh;
  height: 1.45vh;
  color: #e05d5d;
}

.confirmText {
  font-size: 1.3vh;
  color: var(--sfg);
  line-height: 1.5;
  word-break: break-all;
}

.confirmActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.confirmActions button {
  padding: 7px 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.3vh;
  background-color: var(--panel-item-icon-bg);
  color: var(--fg);
}

.confirmActions button:hover {
  background-color: var(--accent);
  color: #fff;
}

.confirmActions .danger {
  background-color: #e05d5d;
  color: #fff;
}

.confirmActions .danger:hover {
  filter: brightness(1.1);
}

/* 设置弹窗(右上角齿轮打开) */

.settingsOverlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 300;           /* 层级链:设置弹窗与确认弹窗同级最高,盖过所有弹窗与钉住的小组件 */
}

.settingsModal {
  display: flex;
  flex-direction: column;
  width: min(92vw, 700px);
  height: min(520px, 80vh); /* 固定高度:切换分类时窗口不跳变;窗口过小时自动保护 */
  background-color: var(--cards); /* 弹窗纯白实色(与主弹窗一致) */
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
  animation: viewIn 0.25s ease;
}

.settingsHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.3); /* 标题与内容分界:加深保证可见 */
  font-size: 22px; /* L1 弹窗标题:最大层级,固定 px 不随窗口缩放 */
  font-weight: 700;
  color: var(--fg);
}

.settingsClose {
  display: flex;
  border: none;
  background: none;
  color: var(--sfg);
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
}

.settingsClose:hover {
  background-color: var(--accent);
  color: var(--fg);
}

.settingsClose i {
  width: 17px;
  height: 17px;
}

/* 主体:左侧边栏分类 + 右侧内容区 */

.settingsMain {
  display: flex;
  flex: 1;
  min-height: 0;
}

.settingsSidebar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 140px;
  flex-shrink: 0;
  padding: 10px 8px;
  border-right: 1px solid rgba(128, 128, 128, 0.3); /* 侧边栏与内容区分界:加深提高可见度 */
}

.sidebarItem {
  display: flex;
  align-items: center;
  gap: 7px;
  border: none;
  background: none;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 14px; /* L2 侧边栏分类:次级层级 */
  font-weight: 600;
  color: var(--sfg);
  cursor: pointer;
  text-align: left;
}

.sidebarItem i {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.sidebarItem:hover {
  background-color: var(--background);
  color: var(--fg);
}

.sidebarItem.active {
  background-color: var(--accent);
  color: #fff;
}

.settingsContent {
  flex: 1;
  min-width: 0;
  min-height: 0; /* 保证 flex 子项可收缩,溢出由内部滚动承担 */
  overflow-y: auto;
  padding: 6px 18px 4px;
}

.settingsPane {
  animation: viewIn 0.2s ease;
}

.settingsGroupTitle {
  font-size: 12px; /* L5 辅助层级:最小 */
  color: var(--sfg);
  margin: 12px 0 6px;
}

.settingsRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
}

.settingsLabel {
  font-size: 15px; /* L3 设置项标签:正文层级 */
  font-weight: 500;
  color: var(--fg);
  flex-shrink: 0;
}

/* 主题三选一分段按钮 */

.settingsSeg {
  display: flex;
  background-color: var(--background);
  border-radius: 10px;
  padding: 3px;
}

.settingsSeg button {
  border: none;
  background: none;
  padding: 6px 13px;
  border-radius: 8px;
  font-size: 13px; /* L4 控件文字:与标签拉开差距 */
  color: var(--sfg);
  cursor: pointer;
}

.settingsSeg button.active {
  background-color: var(--accent);
  color: #fff;
}

/* toggle 开关 */

.settingsSwitch {
  display: inline-flex;
  cursor: pointer;
}

.settingsSwitch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switchTrack {
  display: flex;
  align-items: center;
  width: 40px;
  height: 22px;
  border-radius: 11px;
  padding: 2px;
  background-color: var(--background);
}

.switchThumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--sfg);
}

.settingsSwitch input:checked + .switchTrack {
  background-color: var(--accent);
}

.settingsSwitch input:checked + .switchTrack .switchThumb {
  transform: translateX(18px);
  background-color: #fff;
}

/* 文本输入框 */

.settingsInput {
  width: 160px;
  border: 1px solid transparent;
  outline: none;
  background-color: var(--background);
  color: var(--fg);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px; /* L4 控件文字 */
  font-family: inherit;
  text-align: right;
}

.settingsInput:focus {
  border-color: var(--accent);
}

/* 天气城市(「城市」行 + 展开搜索表单:搜索框 + 候选列表) */

.settingsCityBtn {
  border: none;
  background: none;
  color: var(--sfg);
  cursor: pointer;
  font-size: 13px; /* L4 控件文字 */
  padding: 6px 10px;
  border-radius: 8px;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settingsCityBtn:hover {
  color: var(--fg);
  background-color: var(--background);
}

.weatherCityForm {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
  padding: 10px;
  border-radius: 12px;
  background-color: var(--background);
}

/* 天气详情弹窗内的城市面板(头部地图按钮展开):左右对齐弹窗内容区 */
.weatherModal .weatherCityForm {
  margin: 0 20px 10px;
}

.weatherCityForm .settingsInput {
  width: 100%;
  text-align: left;
}

.weatherCityList {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 176px; /* 约 5 条候选,超出内部滚动 */
  overflow-y: auto;
  /* 细滚动条(Firefox) */
  scrollbar-width: thin;
  scrollbar-color: rgba(128, 128, 128, 0.35) transparent;
}

/* 细滚动条(WebKit:Chrome / Edge) */
.weatherCityList::-webkit-scrollbar {
  width: 6px;
}

.weatherCityList::-webkit-scrollbar-track {
  background: transparent;
}

.weatherCityList::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.35);
  border-radius: 3px;
}

.weatherCityItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  border: none;
  background: none;
  color: var(--fg);
  cursor: pointer;
  font-size: 13px; /* L4 控件文字 */
  padding: 8px 10px;
  border-radius: 8px;
  text-align: left;
}

.weatherCityItem:hover {
  background-color: var(--cards);
}

.weatherCityName {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.weatherCityAdm {
  flex-shrink: 1;
  color: var(--sfg);
  font-size: 12px; /* L5 辅助层级 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 恢复自动定位项:辅助色弱化,靠左 */
.weatherCityAuto {
  justify-content: flex-start;
  color: var(--sfg);
}

.weatherCityTip {
  padding: 8px 10px;
  color: var(--sfg);
  font-size: 12px; /* L5 辅助层级 */
}

/* 重置 pane(恢复默认按钮已移至独立分类页) */

.resetHint {
  font-size: 13px;
  color: var(--sfg);
  line-height: 1.6;
  margin-bottom: 14px;
}

#settingsReset {
  width: 100%;
  border: none;
  background: none;
  color: #e05d5d;
  cursor: pointer;
  font-size: 13px;
  padding: 8px;
  border-radius: 8px;
}

#settingsReset:hover {
  background: rgba(224, 93, 93, 0.12);
}

/* 搜索 pane */

#setHistoryLimit {
  width: 70px;
}

#setClearHistory {
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  color: #e05d5d;
  cursor: pointer;
  font-size: 12px; /* L5 辅助层级 */
  padding: 6px 10px;
  border-radius: 8px;
}

#setClearHistory:hover {
  background: rgba(224, 93, 93, 0.12);
}

#historyCount {
  color: var(--sfg);
  font-size: 12px;
}

/* 快捷入口 pane:列表 */

/* 快捷入口 pane:固定高度下内部弹性滚动 */

#pane-shortcuts {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.shortcutList {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 4px 0 8px;
  flex: 1; /* 占满剩余空间,超长自动滚动 */
  min-height: 0;
  overflow-y: auto;
  /* 细滚动条(Firefox) */
  scrollbar-width: thin;
  scrollbar-color: rgba(128, 128, 128, 0.35) transparent;
}

/* 细滚动条(WebKit:Chrome / Edge) */
.shortcutList::-webkit-scrollbar {
  width: 6px;
}

.shortcutList::-webkit-scrollbar-track {
  background: transparent;
}

.shortcutList::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.35);
  border-radius: 3px;
}

.shortcutRow {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 10px;
}

.shortcutRow:hover {
  background-color: var(--background);
}

.shortcutIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--panel-item-icon-bg);
  flex-shrink: 0;
}

.shortcutIcon i {
  width: 15px;
  height: 15px;
  color: var(--fg);
}

.shortcutName {
  flex: 1;
  font-size: 14px; /* 介于 L3/L4 之间 */
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shortcutEdit,
.shortcutDel {
  display: flex;
  border: none;
  background: none;
  color: var(--sfg);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  flex-shrink: 0;
}

.shortcutEdit:hover {
  color: var(--fg);
  background-color: var(--cards);
}

.shortcutDel:hover {
  color: #e05d5d;
  background: rgba(224, 93, 93, 0.12);
}

.shortcutEdit i,
.shortcutDel i {
  width: 15px;
  height: 15px;
}

.shortcutAddBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  border: 1.5px dashed var(--sfg);
  background: none;
  color: var(--sfg);
  cursor: pointer;
  font-size: 13px; /* L4 控件文字 */
  padding: 8px;
  border-radius: 10px;
}

.shortcutAddBtn:hover {
  color: var(--fg);
  border-color: var(--fg);
}

.shortcutAddBtn i {
  width: 15px;
  height: 15px;
}

/* 快捷入口 pane:添加/编辑表单 */

.shortcutForm {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding: 12px;
  border-radius: 12px;
  background-color: var(--background);
}

.shortcutFormRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.shortcutFormRow .settingsInput {
  width: 190px;
  text-align: left;
}

.shortcutIconInput {
  display: flex;
  align-items: center;
  gap: 8px;
}

.shortcutIconInput .settingsInput {
  width: 130px;
}

.shortcutIconPreview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--panel-item-icon-bg);
  flex-shrink: 0;
}

.shortcutIconPreview i {
  width: 15px;
  height: 15px;
  color: var(--fg);
}

.shortcutFormActions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

#scSave {
  border: none;
  background-color: var(--accent);
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  padding: 7px 16px;
  border-radius: 8px;
}

#scCancel {
  border: none;
  background: none;
  color: var(--sfg);
  cursor: pointer;
  font-size: 13px;
  padding: 7px 12px;
  border-radius: 8px;
}

#scCancel:hover {
  background-color: var(--cards);
}

/* ── 小组件中心(dock「小组件」按钮打开):iOS 式底部抽屉,真身预览卡拖拽到桌面落位 ── */

.widgetCenterOverlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 300; /* 层级链:与设置/确认弹窗同级最高;DOM 在其前,确认框叠加时自然盖住 */
}

.widgetCenterSheet {
  display: flex;
  flex-direction: column;
  width: min(100%, 720px);
  height: min(560px, 62vh);
  background-color: var(--cards); /* 弹窗纯白实色(与主弹窗一致) */
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.25);
  animation: sheetUp 0.3s cubic-bezier(0.3, 1, 0.4, 1); /* 独立入场动画,规避全局 transition 干扰 */
}

@keyframes sheetUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.widgetCenterHeader {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.3);
}

.widgetCenterTitle {
  font-size: 20px; /* L1 弹窗标题层级 */
  font-weight: 700;
  color: var(--fg);
}

.widgetCenterHint {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  font-size: 12px; /* L5 辅助层级 */
  color: var(--sfg);
}

.widgetCenterHint i {
  width: 13px;
  height: 13px;
}

.widgetCenterClose {
  display: flex;
  border: none;
  background: none;
  color: var(--sfg);
  cursor: pointer;
  padding: 4px;
  border-radius: 8px;
}

.widgetCenterClose:hover {
  background-color: var(--accent);
  color: var(--fg);
}

.widgetCenterClose i {
  width: 17px;
  height: 17px;
}

/* 画廊:双列预览卡,超高时内部滚动 */

.widgetCenterGrid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-content: start;
  padding: 14px 20px 20px;
}

.wcCard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--panel-item-border);
  border-radius: 16px;
  background-color: var(--background);
  animation: viewIn 0.2s ease;
}

.wcCard.wcOff {
  opacity: 0.55; /* 不可用(如天气已关):整卡降透明 */
}

/* 预览主体:真身 mini 卡(毛玻璃底座,与桌面小组件同材质语言) */

.wcPreview {
  cursor: grab;
  touch-action: none; /* 触屏可拖出:阻止滚动劫持 */
  background-color: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 14px;
  padding: 10px 12px;
  min-height: 72px;
}

.wcPreview:active {
  cursor: grabbing;
}

.darktheme .wcPreview {
  border-color: rgba(255, 255, 255, 0.12);
}

.wcCard.wcGuide .wcPreview,
.wcCard.wcOff .wcPreview,
.wcCard.wcPinned .wcPreview {
  cursor: default; /* 引导/不可用/已固定:不可拖出 */
}

/* 实物复刻预览(preview() 克隆真实钉住卡):预览外壳退位成纯拖拽手柄,视觉由内部真身卡承担 */
.wcPreview.wcPvRealHost {
  background: none;
  border: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  min-height: 0;
}

/* pinned 语境 host:all:unset 抹掉 overlay 自身的遮罩/定位样式,仅保留类名供 .pinned 后代链匹配出钉住形态 */
.wcPvHost {
  all: unset;
  display: flex;
  justify-content: center;
}

/* 预览是纯展示:交互穿透到外壳拖拽手柄;克隆卡不播 pinIn/抖动动画;实物卡内的 pointer 光标会误导拖拽 */
.wcPvHost * {
  pointer-events: none;
  animation: none !important;
  user-select: none;
  cursor: default !important;
}

.wcPinnedBadge {
  position: absolute;
  top: 20px;
  right: 20px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 999px;
  background-color: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  pointer-events: none;
}

.wcPinnedBadge i {
  width: 11px;
  height: 11px;
}

.wcCardLabel {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px; /* L4 控件文字 */
  font-weight: 600;
  color: var(--fg);
}

.wcCardLabel i {
  width: 14px;
  height: 14px;
  color: var(--sfg);
}

/* 预览 mini 结构(各组件 preview 模板共用) */

.wcPvList {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wcPvHeader {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  font-weight: 700;
  color: var(--fg);
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.25);
}

.wcPvHeader span:last-child {
  font-size: 11px;
  font-weight: 500;
  color: var(--sfg);
}

.wcPvRow {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--fg);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.wcPvRow.done span:last-child {
  text-decoration: line-through;
  color: var(--sfg);
}

.wcPvCheck {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 5px;
  border: 1.5px solid var(--sfg);
  position: relative;
}

.wcPvCheck.done {
  background-color: var(--accent);
  border-color: var(--accent);
}

.wcPvCheck.done::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1.5px;
  width: 3px;
  height: 7px;
  border: solid #fff;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}

.wcPvInput {
  height: 26px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 8px;
  background-color: var(--cards);
  border: 1px solid rgba(128, 128, 128, 0.3);
  font-size: 11px;
  color: var(--sfg);
}

.wcPvEmpty {
  font-size: 12px;
  color: var(--sfg);
  text-align: center;
  padding: 6px 0;
}

.wcPvWeather {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 0;
}

.wcPvWeather img {
  width: 34px;
  height: 34px;
}

.wcPvWTemp {
  font-size: 26px;
  font-weight: 700;
  color: var(--fg);
}

.wcPvWDesc {
  font-size: 12px;
  color: var(--sfg);
}

/* 拖出跟手卡与落点占位框 */

.wcGhost {
  position: fixed;
  z-index: 400; /* 高于抽屉与所有弹窗:拖出瞬间覆盖一切 */
  pointer-events: none;
  margin: 0;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
  transform: scale(1.03); /* 与桌面拖拽同款轻微放大悬浮感 */
  transition: none; /* 屏蔽全局 * transition:跟手卡每帧改 left/top,过渡会造成拖拽滞后 */
  background-color: rgba(255, 255, 255, 0.92); /* 拖拽态实色底:backdrop-filter 每帧重采样会掉帧且移动中渲染异常 */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.darktheme .wcGhost {
  background-color: rgba(44, 44, 46, 0.94); /* 深色主题实色底:避免毛玻璃拖拽闪烁 */
  border-color: rgba(255, 255, 255, 0.18);
}

.wcDropHint {
  position: fixed;
  z-index: 60; /* 高于钉住小组件(5)/dock(10),低于弹窗层 */
  border: 2px dashed var(--accent);
  border-radius: 14px;
  background-color: rgba(87, 160, 217, 0.12); /* 与 dock hover 同色系,轻提示不抢眼 */
  pointer-events: none;
  margin: 0;
  transition: left 0.12s ease, top 0.12s ease, width 0.12s ease,
    height 0.12s ease; /* 占位框磁吸换位时平滑滑动(与桌面 widgetSlotGhost 同感) */
}

/* M E D I A - Q U E R I E S */

@media only screen and (max-width: 48em) {
  :root {
    --fg-primary: 6.4vh;
    --fg-secondary: 2.1vh;
  }

  .searchBlock {
    width: 88vw;
  }

  .dockBlock {
    gap: 4px;
    padding: 8px 10px;
  }

  .dockItem {
    padding: 4px;
  }

  .iconWrap {
    width: 40px;
    height: 40px;
    border-radius: 11px;
  }

  .dockItem .iconWrap svg,
  .dockItem .iconWrap i {
    width: 18px;
    height: 18px;
  }

  .weatherDescription {
    display: none;
  }

  /* 设置弹窗:侧边栏转为顶部横向标签栏 */

  .settingsMain {
    flex-direction: column;
  }

  .settingsSidebar {
    flex-direction: row;
    width: 100%;
    padding: 8px;
    border-right: none;
    border-bottom: 1px solid rgba(128, 128, 128, 0.3);
  }

  .settingsModal {
    height: auto;
    max-height: 80vh;
  }

  .sidebarItem {
    flex: 1;
    justify-content: center;
  }

  .shortcutRow {
    gap: 4px;
  }

  /* ── 移动端极简:桌面小组件整体退场(仅渲染抑制,不清钉住状态,平板/大屏自动恢复) ──
     tempFull(钉住常驻时经 dock 展开的完整弹窗)豁免:移动端经 dock 打开的待办/备忘录即走此形态 */
  .weatherOverlay.pinned,
  .todoFullOverlay.pinned:not(.tempFull),
  .memoFullOverlay.pinned:not(.tempFull),
  .memoDisplayOverlay {
    display: none !important;
  }

  /* 钉住入口隐藏:手机上固定到桌面无意义(数据与弹窗管理不受影响) */
  .todoFullPin,
  .memoFullPin,
  .weatherModalPin {
    display: none;
  }

  /* 小组件中心入口:手机上无桌面小组件可管理,入口一并隐藏 */
  #dockWidgetCenter {
    display: none;
  }

  /* hover 悬浮预览卡:触屏无 hover,胶囊点击直达详情弹窗 */
  .weatherPop {
    display: none;
  }
}

/* R I P P L E - E F F E C T */

/* 涟漪宿主:相对定位 + 圆角裁剪(波纹按宿主圆角收起)
   dockItem 除外:其涟漪注入图标底座(.iconWrap 自带裁剪),
   保持 visible 才能让 hover 文字气泡浮出图标上方 */
button:not(.dockItem),
a:not(.dockItem),
.panelItem {
  position: relative;
  overflow: hidden;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.08); /* 亮色主题:深色波,克制不抢眼 */
  transform: scale(0);
  opacity: 0.4;
  animation: ripple 0.55s ease-out forwards;
  pointer-events: none; /* 不拦截宿主点击与跳转 */
  transition: none; /* 屏蔽全局 * transition,避免干扰动画插值 */
}

.darktheme .ripple {
  background: rgba(255, 255, 255, 0.45); /* 暗色主题:高亮白波,贴合液态玻璃反光 */
}

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 0.4;
  }
  60% {
    transform: scale(1);
    opacity: 0.4; /* 前 60% 完成扩散且全程可见 */
  }
  100% {
    transform: scale(1);
    opacity: 0; /* 扩散到位后再淡出 */
  }
}

/* 毛玻璃降级:浏览器不支持 backdrop-filter 时玻璃浮层改用实色底,
   否则半透明白底失去模糊支撑,在浅色壁纸上形同透明 */
@supports not (backdrop-filter: blur(1px)) {
  #themeButton,
  #settingsBtn,
  .searchBox,
  .engineMenu,
  .searchHistory,
  .weatherBlock,
  .weatherPop,
  .weatherModal,
  .dockBlock,
  .dockTooltip,
  .todoFullOverlay.pinned .todoFullModal,
  #toast,
  .projectCard,
  .ctxMenu {
    background-color: var(--cards);
  }
}

/* ═══ AI 快答卡片(searchHistory 平级:SSE 流式 + 就地追问,内容由 ai-card.js 渲染) ═══ */

.aiCard {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: min(58vh, 460px);
}

.aiCardHead {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 6px;
  font-size: 13px; /* L4 控件文字 */
  opacity: 0.85;
}

.aiCardHead > svg {
  width: 14px;
  height: 14px;
}

.aiHeadSpace {
  flex: 1;
}

.aiIconBtn {
  display: flex;
  border: none;
  background: none;
  color: var(--fg);
  opacity: 0.55;
  cursor: pointer;
  padding: 4px;
  border-radius: 7px;
}

.aiIconBtn:hover {
  opacity: 1;
  background: rgba(128, 128, 128, 0.18);
}

.aiIconBtn svg {
  width: 14px;
  height: 14px;
}

/* 停止生成(busy 态出现在输入行右侧,点击中断流式) */
.aiStopBtn {
  flex: none;
}

.aiMsgs {
  flex: 1;
  overflow-y: auto;
  padding: 2px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* 细滚动条(Firefox) */
  scrollbar-width: thin;
  scrollbar-color: rgba(128, 128, 128, 0.35) transparent;
}

.aiMsg {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13.5px;
  line-height: 1.65;
  word-break: break-word;
}

.aiMsg > svg {
  width: 14px;
  height: 14px;
  margin-top: 3px;
  flex: none;
  opacity: 0.55;
}

.aiMsg.user span {
  opacity: 0.6;
}

.aiMsg.bot strong {
  font-weight: 600;
}

/* 行内代码(轻量渲染,不引 markdown 库) */
.aiMsg.bot code {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 12px;
  background: rgba(128, 128, 128, 0.18);
  padding: 1px 5px;
  border-radius: 5px;
}

.aiDim {
  opacity: 0.45;
}

/* 工具状态行(处理中旋转 / 结果摘要) */
.aiTool {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 22px;
  font-size: 12px;
  opacity: 0.65;
}

.aiTool svg {
  width: 12px;
  height: 12px;
}

.aiTool.spin svg {
  animation: aiSpin 0.9s linear infinite;
}

.aiTool.bad {
  opacity: 0.8;
  color: #e5484d;
}

@keyframes aiSpin {
  to {
    transform: rotate(360deg);
  }
}

/* 错误行(断连/令牌/模型配置) */
.aiErrLine {
  color: #e5484d;
  font-size: 12.5px;
}

.aiErrLine > svg {
  opacity: 0.8;
}

/* 错误行「打开设置」直达按钮 */
.aiErrOpen {
  flex: none;
  align-self: flex-start;
  margin-left: auto;
  border: 1px solid rgba(128, 128, 128, 0.4);
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: 11.5px;
  line-height: 1.5;
  padding: 1px 9px;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0.8;
}

.aiErrOpen:hover {
  opacity: 1;
  background: rgba(128, 128, 128, 0.15);
}

.aiCardFoot {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 10px;
}

.aiCardInput {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid rgba(128, 128, 128, 0.4);
  outline: none;
  background-color: transparent;
  color: var(--fg);
  border-radius: 9px;
  padding: 8px 10px;
  font-size: 13px; /* L4 控件文字 */
  font-family: inherit;
}

.aiCardInput:focus {
  border-color: var(--accent);
}

.aiCardInput:disabled {
  opacity: 0.5;
}

/* ── AI 快答卡钉住为桌面小组件:脱离搜索块按槽位常驻(默认左列顶部),长按抖动可拖动换位 ── */

.aiCard.pinned {
  position: fixed;
  top: 0;
  left: 16px; /* 默认左列:列缘与小组件列对齐一致(16px) */
  width: 300px;
  max-height: min(46vh, 380px);
  z-index: 5; /* 桌面小组件垫底层:低于按钮/胶囊/dock(10)、搜索下拉(100),不遮挡任何元素 */
  border-radius: 20px; /* mac 小组件大圆角 */
  animation: pinIn 0.25s ease; /* 复用待办小组件钉住动画 */
}

/* 槽位系统拖到右列时覆盖(纵坐标由 widgetSlots.js 写入卡片 marginTop) */
.aiCard.pinned.slot-right {
  left: auto;
  right: 16px;
}

.aiCard.pinned .aiMsgs {
  min-height: 0; /* flex 收缩:消息区滚动不撑爆卡片 */
}

/* 图钉按钮钉住态高亮 */
.aiPinBtn.pinned {
  opacity: 1;
  color: var(--accent);
}

/* 抖动换位(overlay/card 二合一:动画加在卡片自身) */
.aiCard.widgetJiggle {
  animation: jiggle 0.32s ease-in-out infinite;
  /* 无限抖动动画 + backdrop-filter 在部分 Chromium 版本有合成 bug,临时关闭毛玻璃 */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* 抖动态禁选文字:长按不会选中卡片文本/触发系统菜单 */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}