/* ============================================================
 * main.css —— 主布局样式
 * 全屏布局 + 垂直水平居中 + 响应式基础
 * 所有颜色、间距、圆角等一律引用 variables.css 中的变量
 * ============================================================ */

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  /* 主题切换时仅颜色类属性平滑过渡（200ms 白名单） */
  transition: background-color var(--transition-theme),
              color var(--transition-theme),
              border-color var(--transition-theme);
}

/* ---------- 壁纸背景层 ---------- */
#wallpaper {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* 壁纸切换时平滑过渡 */
  transition: background var(--transition-normal), filter var(--transition-normal);
}
#wallpaper-overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  /* 渐晕遮罩：中心通透，四角自然压白（亮色）/ 压暗（暗色），整体透明度仍由滑块控制 opacity */
  background: radial-gradient(ellipse at center, transparent 40%, var(--color-wallpaper-overlay) 100%);
  transition: opacity var(--transition-normal);
}

/* ---------- 壁纸噪点纹理（实验项）：仅纯色 / 渐变壁纸显示，掩盖色带 ---------- */
#wallpaper::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
  opacity: 0; /* 默认关闭，由 data-wallpaper-type 开启 */
}
#wallpaper[data-wallpaper-type="solid"]::after,
#wallpaper[data-wallpaper-type="gradient"]::after {
  opacity: 0.03;
}

/* ---------- 全屏布局容器 ---------- */
.app {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* 移动端视口高度修正（地址栏收起 / 展开场景） */
  min-height: 100dvh;
}

/* ---------- 顶栏 ---------- */
.app-header {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
}

/* 顶栏图标按钮（设置入口） */
.settings-trigger {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  background-color: var(--color-button-bg);
  transition: color var(--transition-fast),
              background-color var(--transition-fast),
              transform var(--transition-interact),
              box-shadow var(--transition-interact);
}
.settings-trigger:hover {
  color: var(--color-text);
  background-color: var(--color-accent-soft);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.settings-trigger:active {
  transform: translateY(-1px) scale(0.96);
}
.settings-trigger:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* ---------- 主内容区：垂直水平居中 ---------- */
.app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xl);
  padding: var(--spacing-lg);
  /* 视觉重心略上移，符合起始页常见构图 */
  padding-bottom: 15vh;
}

/* ---------- 时间 / 日期 / 问候语 ---------- */
.clock-region {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  text-align: center;
}
.clock {
  display: block;
  font-size: var(--font-size-clock);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  /* 等宽数字，避免分钟跳动时整体抖动 */
  font-variant-numeric: tabular-nums;
}
.date {
  font-size: var(--font-size-md);
  color: var(--color-text-secondary);
}
.greeting {
  font-size: var(--font-size-md);
  font-weight: 500;
  color: var(--color-text-secondary);
}

/* ---------- 搜索区域 ---------- */
.search-region {
  width: min(100%, 36rem);
}

/* 胶囊搜索框：按钮 + 输入框合并为一个整体 */
.search-box {
  position: relative;
  display: flex;
  align-items: center;
  background-color: rgba(var(--surface-glass-rgb), var(--search-box-alpha));
  border: 1px solid var(--surface-glass-border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--surface-glass-highlight);
  /* 玻璃拟态：默认中强度，focus-within 提升到全强度（占用同屏全强度预算） */
  -webkit-backdrop-filter: var(--surface-glass-blur-soft);
  backdrop-filter: var(--surface-glass-blur-soft);
  /* 主题过渡白名单：box-shadow / backdrop-filter 不参与过渡 */
  transition: border-color var(--transition-theme),
              background-color var(--transition-theme);
}
.search-box:focus-within {
  border-color: var(--color-accent);
  /* 常规投影 + 强调色光环 + 顶部内高光（inset 最后=最内层） */
  box-shadow: var(--shadow-md), var(--shadow-accent-glow), inset 0 1px 0 var(--surface-glass-highlight);
  -webkit-backdrop-filter: var(--surface-glass-blur);
  backdrop-filter: var(--surface-glass-blur);
}

/* 引擎切换按钮（左侧） */
.engine-toggle {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  background-color: var(--color-button-bg);
  transition: color var(--transition-fast),
              background-color var(--transition-fast),
              transform var(--transition-interact),
              box-shadow var(--transition-interact);
}
.engine-toggle:hover {
  color: var(--color-text);
  background-color: var(--color-accent-soft);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.engine-toggle:active {
  transform: translateY(-1px) scale(0.96);
}
.engine-toggle:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: -2px;
}
/* 引擎图标：徽章化（菜单内与 toggle 内通用） */
.engine-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  color: var(--color-text-secondary);
  background-color: var(--color-badge-bg);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-interact),
              color var(--transition-interact);
}
.engine-toggle:hover .engine-icon {
  background-color: var(--color-badge-bg-hover);
}

/* 搜索输入框 */
.search-input {
  flex: 1;
  min-width: 0;
  height: 2.75rem;
  padding-right: var(--spacing-md);
  font-size: var(--font-size-input);
  color: var(--color-text);
  background-color: transparent;
  border: none;
  outline: none;
}
.search-input::placeholder {
  color: var(--color-text-tertiary);
}

/* 引擎下拉菜单 */
.engine-menu {
  position: absolute;
  top: calc(100% + var(--spacing-xs));
  left: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-menu-gap);
  min-width: var(--width-menu-min);
  max-width: calc(100vw - 2 * var(--spacing-md));
  max-height: var(--height-menu-max);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--spacing-menu);
  background-color: rgba(var(--surface-menu-rgb), var(--surface-menu-alpha));
  border: 1px solid var(--surface-menu-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--surface-glass-highlight);
  z-index: calc(var(--z-settings) - 1);
  /* 全强度 blur（与搜索框共用同屏预算，菜单打开时搜索框降级） */
  -webkit-backdrop-filter: var(--surface-glass-blur);
  backdrop-filter: var(--surface-glass-blur);
  transform-origin: top left;
  /* 入场/出场过渡：长手写避免旧浏览器因 display 丢弃整条规则 */
  transition-property: opacity, transform, display;
  transition-duration: var(--transition-menu);
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  transition-behavior: allow-discrete;
  /* 滚动条 */
  scrollbar-width: thin;
  scrollbar-color: var(--color-scrollbar-thumb) transparent;
}
.engine-menu::-webkit-scrollbar {
  width: 6px;
}
.engine-menu::-webkit-scrollbar-thumb {
  background-color: var(--color-scrollbar-thumb);
  border-radius: var(--radius-full);
}
.engine-menu::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-scrollbar-thumb-hover);
}
.engine-menu[hidden] {
  opacity: 0;
  transform: scale(0.98) translateY(-6px);
  display: none;
  transition-duration: var(--transition-menu-exit);
}
/* 入场起始态：@starting-style 不支持时退化为瞬时显示 */
@starting-style {
  .engine-menu:not([hidden]) {
    opacity: 0;
    transform: scale(0.98) translateY(-6px);
  }
}

.engine-menu-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
  min-height: var(--size-menu-item);
  padding: 0 var(--spacing-sm);
  border: none;
  border-radius: var(--radius-md);
  color: var(--color-text);
  background-color: transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--transition-interact);
}
.engine-menu-item:hover {
  background-color: var(--color-accent-soft);
}
.engine-menu-item:hover .engine-icon {
  background-color: var(--color-badge-bg-hover);
}
.engine-menu-item:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: -2px;
  background-color: var(--color-accent-soft);
}
.engine-menu-item.selected {
  color: var(--color-accent);
  background-color: var(--color-accent-faint);
}
.engine-menu-item.selected .engine-icon {
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
}
/* 选中态对勾：纯 CSS，不占布局额外空间（flex-shrink:0，margin-left:auto 推至右端） */
.engine-menu-item.selected::after {
  content: '';
  flex-shrink: 0;
  margin-left: auto;
  width: 0.7rem;
  height: 0.4rem;
  border-left: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(-45deg);
}
.engine-menu-item .engine-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 快捷键键帽 */
.engine-menu-shortcut {
  flex-shrink: 0;
  min-width: 1.25rem;
  padding: 0.1rem 0.35rem;
  font-size: 0.7rem;
  font-family: monospace;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  color: var(--color-text-secondary);
  text-align: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.engine-menu-item.selected .engine-menu-shortcut {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* Tab 栏 */
.wallpaper-tabs {
  display: flex;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-md);
}
.wallpaper-tab {
  flex: 1;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--color-text-secondary);
  background-color: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  cursor: pointer;
  transition: color var(--transition-segment),
              background-color var(--transition-segment),
              border-color var(--transition-segment);
}
.wallpaper-tab:hover {
  color: var(--color-text);
}
/* 选中：主文字色 + 强调色下划线 */
.wallpaper-tab[aria-selected="true"] {
  color: var(--color-text);
  border-bottom-color: var(--color-accent);
}
.wallpaper-tab:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
.wallpaper-tab:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 色块 / 渐变卡片 */
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}
.swatch {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  /* 批 4 控件精修：transform/box-shadow 走交互反馈，border-color 走主题时长 */
  transition: transform var(--transition-interact),
              box-shadow var(--transition-interact),
              border-color var(--transition-theme);
}
.swatch:hover {
  transform: scale(1.08);
  border-color: var(--color-text-tertiary);
  box-shadow: var(--shadow-md);
}
.swatch:active {
  transform: scale(0.96);
}
/* 选中态：box-shadow 环（无位移、可过渡），与焦点环分离 */
.swatch.selected {
  box-shadow: 0 0 0 2px var(--color-accent);
}
.swatch:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* 颜色选择器行 */
.color-picker-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}
.color-picker-row input[type="color"] {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background-color: transparent;
  cursor: pointer;
  transition: transform var(--transition-interact);
}
.color-picker-row input[type="color"]:hover {
  transform: scale(1.05);
}
.color-picker-row input[type="color"]:active {
  transform: scale(0.96);
}
.color-picker-row input[type="color"]:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}
/* 去默认 swatch 内边距/边框，让颜色填满圆形 */
.color-picker-row input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}
.color-picker-row input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
}
.color-picker-row input[type="color"]::-moz-color-swatch {
  border: none;
  border-radius: 50%;
}

/* 本地图片操作 */
.wallpaper-local-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}
.wallpaper-btn {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition-fast),
              transform var(--transition-interact),
              box-shadow var(--transition-interact);
}
.wallpaper-btn:hover {
  background-color: var(--color-accent-soft);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.wallpaper-btn:active {
  transform: translateY(-1px) scale(0.96);
}
.wallpaper-btn.primary {
  color: var(--color-accent-contrast);
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}
.wallpaper-btn.primary:hover {
  background-color: var(--color-accent-hover);
}
.wallpaper-btn.danger {
  color: var(--color-accent-contrast);
  background-color: var(--color-warning);
  border-color: var(--color-warning);
}
.wallpaper-btn.danger:hover {
  filter: brightness(1.1);
}
.wallpaper-btn:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* 图片预览 */
.wallpaper-preview {
  margin-bottom: var(--spacing-md);
}
.wallpaper-preview img {
  width: 100%;
  max-height: 8rem;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

/* 提示 */
.wallpaper-hint {
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-sm);
  font-size: var(--font-size-base);
  color: var(--color-warning);
  background-color: var(--color-accent-soft);
  border-radius: var(--radius-sm);
}

/* 滑块 */
.wallpaper-controls {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}
.wallpaper-slider-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}
.wallpaper-slider-row span {
  flex-shrink: 0;
  min-width: 5rem;
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
}
.wallpaper-slider-row input[type="range"] {
  flex: 1;
  min-width: 0;
  height: 1.25rem;
  -webkit-appearance: none;
  appearance: none;
  background-color: transparent;
  cursor: pointer;
}
/* 轨道：WebKit 统一色（无原生已填充分色能力），Firefox 用 ::-moz-range-progress 渐进增强 */
.wallpaper-slider-row input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--radius-full);
  background-color: var(--color-border);
}
.wallpaper-slider-row input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: var(--radius-full);
  background-color: var(--color-border);
}
.wallpaper-slider-row input[type="range"]::-moz-range-progress {
  height: 4px;
  border-radius: var(--radius-full);
  background-color: var(--color-accent);
}
/* thumb：16px 圆形，hover 18px / active 14px（用 transform 缩放避免布局计算） */
.wallpaper-slider-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px; /* (4 - 16) / 2，垂直居中到轨道 */
  border: none;
  border-radius: 50%;
  background-color: var(--color-slider-thumb);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-interact);
}
.wallpaper-slider-row input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background-color: var(--color-slider-thumb);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-interact);
}
.wallpaper-slider-row input[type="range"]:hover::-webkit-slider-thumb {
  transform: scale(1.125); /* 16 → 18 */
}
.wallpaper-slider-row input[type="range"]:active::-webkit-slider-thumb {
  transform: scale(0.875); /* 16 → 14 */
}
.wallpaper-slider-row input[type="range"]:hover::-moz-range-thumb {
  transform: scale(1.125);
}
.wallpaper-slider-row input[type="range"]:active::-moz-range-thumb {
  transform: scale(0.875);
}
.wallpaper-slider-row input[type="range"]:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* ---------- 设置抽屉 ---------- */
.settings-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--color-overlay);
  z-index: calc(var(--z-settings) - 1);
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.settings-overlay.open {
  opacity: 1;
}

.settings-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 22rem;
  height: 100dvh;
  background-color: var(--surface-glass-bg);
  border-left: 1px solid var(--surface-glass-border);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--surface-glass-highlight);
  z-index: var(--z-settings);
  -webkit-backdrop-filter: var(--surface-glass-blur);
  backdrop-filter: var(--surface-glass-blur);
  transform: translateX(100%);
  transition: transform var(--transition-normal);
}
.settings-panel.open {
  transform: translateX(0);
}

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}
.settings-header h2 {
  font-size: var(--font-size-lg);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-text);
}
.settings-close {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  background-color: transparent;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.settings-close:hover {
  color: var(--color-text);
  background-color: var(--color-accent-soft);
}
.settings-close:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.settings-body {
  padding: var(--spacing-lg);
  overflow-y: auto;
  height: calc(100dvh - 4rem);
  /* 滚动条精修：Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--color-scrollbar-thumb) transparent;
}
/* 滚动条精修：WebKit（6px 半透明圆角 thumb，hover 加深） */
.settings-body::-webkit-scrollbar {
  width: 6px;
}
.settings-body::-webkit-scrollbar-track {
  background-color: transparent;
}
.settings-body::-webkit-scrollbar-thumb {
  background-color: var(--color-scrollbar-thumb);
  border-radius: var(--radius-full);
}
.settings-body::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-scrollbar-thumb-hover);
}

.settings-section {
  margin-bottom: var(--spacing-xl);
}
.settings-section-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-md);
}

.settings-field {
  margin-bottom: var(--spacing-lg);
}
.settings-label {
  display: block;
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-sm);
}

/* 分段控件 */
.segmented {
  display: flex;
  gap: var(--spacing-xs);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--spacing-xs);
}
.segmented-item {
  flex: 1;
  padding: var(--spacing-sm);
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--color-text-secondary);
  background-color: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  /* 时长分层：按压反馈 120ms，选中态颜色切换 150ms */
  transition: transform var(--transition-interact),
              box-shadow var(--transition-interact),
              background-color var(--transition-segment),
              color var(--transition-segment);
}
.segmented-item:hover {
  color: var(--color-text);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.segmented-item:active {
  transform: translateY(-1px) scale(0.96);
}
.segmented-item.active,
.segmented-item[aria-pressed="true"] {
  color: var(--color-accent);
  background-color: var(--color-accent-soft);
  box-shadow: var(--shadow-sm);
}
/* 已选中项 hover 时不变化，显式固定 */
.segmented-item.active:hover,
.segmented-item[aria-pressed="true"]:hover {
  color: var(--color-accent);
  background-color: var(--color-accent-soft);
  box-shadow: var(--shadow-sm);
  transform: none;
}
.segmented-item:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* 按钮 */
.settings-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}
.settings-btn {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--transition-fast),
              transform var(--transition-interact),
              box-shadow var(--transition-interact);
}
.settings-btn:hover:not(:disabled) {
  background-color: var(--color-accent-soft);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.settings-btn:active:not(:disabled) {
  transform: translateY(-1px) scale(0.96);
}
.settings-btn.danger {
  color: var(--color-accent-contrast);
  background-color: var(--color-warning);
  border-color: var(--color-warning);
}
.settings-btn.danger:hover:not(:disabled) {
  filter: brightness(1.1);
}
.settings-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.settings-btn:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* 关于 */
.settings-about-name {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text);
}
.settings-about-version,
.settings-about-privacy {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin-top: var(--spacing-xs);
}

/* ---------- Toast 轻提示 ---------- */
.toast-container {
  position: fixed;
  bottom: var(--spacing-lg);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  z-index: var(--z-toast);
  pointer-events: none; /* 不阻挡下方交互 */
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background-color: var(--surface-glass-bg);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg), inset 0 1px 0 var(--surface-glass-highlight);
  /* 中性玻璃底 + 中强度 blur（不占用全强度预算） */
  -webkit-backdrop-filter: var(--surface-glass-blur-soft);
  backdrop-filter: var(--surface-glass-blur-soft);
  opacity: 0;
  transform: translateY(0.5rem);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.toast--visible {
  opacity: 1;
  transform: translateY(0);
}
/* 语义状态：左侧 6px 色点表示，不再整体染色 */
.toast::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
}
.toast--success::before { background-color: var(--color-success); }
.toast--warning::before { background-color: var(--color-warning); }
.toast--error::before { background-color: var(--color-error); }

/* ---------- 同屏全强度 blur 预算：引擎菜单打开时，搜索框降为中强度（菜单占全强度） ---------- */
/* body:has 前缀确保不误伤搜索框单独 focus 时的全强度态 */
body:has(#engine-menu:not([hidden])) .search-box,
body:has(#engine-menu:not([hidden])) .search-box:focus-within {
  -webkit-backdrop-filter: var(--surface-glass-blur-soft);
  backdrop-filter: var(--surface-glass-blur-soft);
}

/* ---------- 同屏全强度 blur 预算：设置面板打开时，搜索框 + 引擎菜单降为中强度 ---------- */
html:has(.settings-panel:not([hidden])) .search-box,
html:has(.settings-panel:not([hidden])) .search-box:focus-within,
html:has(.settings-panel:not([hidden])) .engine-menu {
  -webkit-backdrop-filter: var(--surface-glass-blur-soft);
  backdrop-filter: var(--surface-glass-blur-soft);
}

/* ---------- 玻璃拟态降级链 ---------- */
/* 注意：选择器列表必须包含 .search-box:focus-within（0,2,0），
 * 否则其 backdrop-filter 会以更高优先级盖过降级规则。
 * 列表中不能放 :has() 选择器——老浏览器会因单个无效选择器丢弃整条规则。 */
/* a. 浏览器不支持 backdrop-filter：回退为不透明浮层 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .search-box,
  .search-box:focus-within,
  .engine-menu,
  .settings-panel,
  .toast {
    background-color: var(--surface-glass-fallback-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
/* b. 系统偏好减少透明度 */
@media (prefers-reduced-transparency: reduce) {
  .search-box,
  .search-box:focus-within,
  .engine-menu,
  .settings-panel,
  .toast {
    background-color: var(--surface-glass-fallback-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
/* c. 预留手动开关：html 加 no-blur 类即全局关闭玻璃效果（无 JS 触发逻辑） */
html.no-blur .search-box,
html.no-blur .engine-menu,
html.no-blur .settings-panel,
html.no-blur .toast {
  background-color: var(--surface-glass-fallback-bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* 视觉隐藏但保留可访问性（隐藏的文件选择框等） */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 响应式：窄屏适配 ---------- */
@media (max-width: 480px) {
  :root {
    /* 小屏幕：缩小时间字号与次级文字 */
    --font-size-clock: clamp(2.5rem, 14vw, 3.5rem);
    --font-size-lg: 1.125rem;
  }

  /* 顶栏按钮略缩小，减少小屏占用 */
  .app-header {
    padding: var(--spacing-sm);
  }
  .settings-trigger {
    width: 2.25rem;
    height: 2.25rem;
  }

  .settings-panel {
    width: 100%;
    border-left: none;
  }

  .app-main {
    gap: var(--spacing-lg);
    padding: var(--spacing-md);
    padding-bottom: 10vh;
  }

  .search-region {
    width: 100%;
  }
  .engine-toggle,
  .search-input {
    height: 2.5rem;
  }
}

/* 用户偏好减少动效时，移除菜单展开过渡 */
@media (prefers-reduced-motion: reduce) {
  .search-box,
  .engine-toggle,
  .engine-menu,
  .engine-menu-item,
  .engine-icon,
  #wallpaper,
  #wallpaper-overlay,
  .settings-panel,
  .settings-overlay,
  .toast,
  .settings-trigger,
  .settings-btn,
  .segmented-item,
  .wallpaper-btn,
  .wallpaper-tab,
  .swatch,
  .color-picker-row input[type="color"],
  .wallpaper-slider-row input[type="range"] {
    transition: none;
  }
  /* 关闭按压反馈与菜单入场动画 */
  .settings-trigger:hover,
  .settings-trigger:active,
  .engine-toggle:hover,
  .engine-toggle:active,
  .settings-btn:hover,
  .settings-btn:active,
  .segmented-item:hover,
  .segmented-item:active,
  .wallpaper-btn:hover,
  .wallpaper-btn:active,
  .color-picker-row input[type="color"]:hover,
  .color-picker-row input[type="color"]:active,
  .swatch:hover,
  .swatch:active {
    transform: none;
  }
  .wallpaper-slider-row input[type="range"]::-webkit-slider-thumb,
  .wallpaper-slider-row input[type="range"]::-moz-range-thumb {
    transition: none;
  }
}