/* 搜索起始页：风格独立，不走站点主题。黑白两套，干净整洁。 */

:root {
  --bg: #ffffff;
  --fg: #18181b;
  --muted: #8a8a90;
  --border: #e6e6e9;
  --field: #ffffff;
  --hover: #f4f4f5;
  --ring: #c9c9cf;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 30px rgba(0, 0, 0, 0.06);
  /* 搜索框仿 Bing：极淡描边，阴影只在悬停/聚焦时明显起来 */
  --search-bg: #ffffff;
  --search-border: rgba(0, 0, 0, 0.12);
  --search-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  --search-shadow-hover: 0 2px 10px rgba(0, 0, 0, 0.12);
  /* 背景图蒙板的不透明度（默认透明度 100% => alpha 0，即完全没有蒙板）；设置里的滑杆经 JS 覆盖这个值 */
  --veil-alpha: 0;
}
[data-theme="dark"] {
  --bg: #000000;
  --fg: #f4f4f5;
  --muted: #8e8e96;
  --border: #2a2a2e;
  --field: #0a0a0b;
  --hover: #17171a;
  --ring: #3a3a40;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 30px rgba(0, 0, 0, 0.5);
  --search-bg: #0a0a0b;
  --search-border: rgba(255, 255, 255, 0.16);
  --search-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  --search-shadow-hover: 0 2px 12px rgba(0, 0, 0, 0.65);
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  transition: background 0.2s ease, color 0.2s ease;
}

a { color: inherit; }

/* 主体：搜索栏为视觉中心。有时钟时整体上移，把搜索栏顶到视口中心 */
.start {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 40px 20px;
  width: 100%;
}
.start.has-clock { padding-bottom: 168px; }

/* 时钟（紧凑，位于搜索栏上方） */
.clock { text-align: center; user-select: none; }
/* 时间行隐藏时仍占位（visibility 而非 display），保证搜索框位置不随时间显隐而上下移动 */
.clock__time.is-hidden { visibility: hidden; }
.clock__time {
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}
.clock__date { margin-top: 8px; font-size: 14px; font-weight: 500; color: var(--muted); }
/* 日期默认关掉；这里用 display 而不是 visibility，收起后不留一条空档 */
.clock__date.is-hidden { display: none; }

/* 搜索栏：仿 Bing —— 白色胶囊、极淡描边、放大镜在左、没有填充按钮 */
.search {
  position: relative;
  display: flex;
  align-items: center;
  width: min(720px, 92vw);
  height: 60px;
  padding: 0 14px 0 8px;
  border: 1px solid var(--search-border);
  border-radius: 999px;
  background: var(--search-bg);
  box-shadow: var(--search-shadow);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.search:hover { box-shadow: var(--search-shadow-hover); }
.search:focus-within { border-color: var(--ring); box-shadow: var(--search-shadow-hover); }

/* 放大镜本身就是提交按钮，但按 Bing 的做法不做填充，只是一枚图标 */
.search__go {
  flex: none;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.search__go svg { width: 22px; height: 22px; }
.search__go:hover { color: var(--fg); background: var(--hover); }

.search__input {
  flex: 1;
  height: 100%;
  min-width: 0;
  padding: 0 6px 0 4px;
  border: none;
  outline: none;
  background: transparent;
  color: var(--fg);
  font-size: 17px;
}
.search__input::placeholder { color: var(--muted); }

/* 右上角：设置 + 明暗切换（鼠标进入右上角区域才显示） */
.start__tools { position: fixed; top: 0; right: 0; width: 180px; height: 120px; z-index: 40; }
.start__tools__inner {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.start__tools:hover .start__tools__inner,
.start__tools:focus-within .start__tools__inner,
.start__tools.menu-open .start__tools__inner { opacity: 1; pointer-events: auto; }

.tool-btn {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--field);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.tool-btn:hover { color: var(--fg); border-color: var(--ring); }
.tool-btn .icon { width: 18px; height: 18px; }
.tool-btn .icon-sun { display: none; }
.tool-btn .icon-moon { display: block; }
[data-theme="dark"] .tool-btn .icon-sun { display: block; }
[data-theme="dark"] .tool-btn .icon-moon { display: none; }

/* 设置菜单 */
.settings-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 236px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--field);
  box-shadow: var(--shadow);
}
.settings-menu[hidden] { display: none; }
.settings-menu__row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; color: var(--fg); cursor: pointer; white-space: nowrap; }
/* row 是 flex，不写这条的话 hidden 属性会被 display:flex 顶掉 */
.settings-menu__row[hidden] { display: none; }
.settings-menu__row input { width: 15px; height: 15px; accent-color: var(--fg); }
/* 竖排的「标签 + 控件」，用于下拉和滑杆 */
.settings-menu__field { display: flex; flex-direction: column; gap: 6px; padding: 5px 0; }
.settings-menu__field[hidden] { display: none; }
.settings-menu__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--muted);
}
.settings-menu__label b { color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums; }
.settings-menu__select {
  width: 100%;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--field);
  color: var(--fg);
  font-size: 13px;
  cursor: pointer;
}
.settings-menu__select:focus { outline: none; border-color: var(--ring); }
.settings-menu__range { width: 100%; margin: 0; accent-color: var(--fg); cursor: pointer; }
.settings-menu__help {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 7px 8px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--fg);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.settings-menu__help:hover { background: var(--hover); }
/* 恢复默认设置：和上面的「使用说明」用一条分隔线拉开距离，提示这是破坏性操作 */
.settings-menu__reset { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }

/* 工具推荐下拉（容器复用 .settings-menu 的外观，这里只管里面的链接样式） */
.tools-menu { width: 220px; }
.tools-menu__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--fg);
  transition: background 0.15s ease;
}
.tools-menu__item:hover { background: var(--hover); }
.tools-menu__name { font-size: 13px; font-weight: 600; }
.tools-menu__desc { font-size: 12px; color: var(--muted); }

/* 使用说明弹层 */
.help {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.45);
}
.help[hidden] { display: none; }
.help__card {
  width: 100%;
  max-width: 680px;
  max-height: 82vh;
  overflow: auto;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--field);
  box-shadow: var(--shadow);
}
.help__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.help__head h2 { margin: 0; font-size: 16px; font-weight: 600; }
.help__close {
  width: 30px; height: 30px;
  border: none; border-radius: 999px;
  background: transparent; color: var(--muted);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.help__close:hover { color: var(--fg); background: var(--hover); }
.help__list {
  margin: 0; padding-left: 20px;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 14px; line-height: 1.6; color: var(--muted);
}
.help__list b { color: var(--fg); font-weight: 600; }



@media (max-width: 480px) {
  .search { height: 54px; }
  .search__go { width: 42px; height: 42px; }
  .search__go svg { width: 20px; height: 20px; }
  .search__input { font-size: 16px; }
}

/* ---------- 背景图（Bing 每日一图 / 固定一张） ---------- */

/* z-index:-1 让它在 body 背景之上、正文之下：正文是普通流内容，
   而定位元素会盖住普通流，所以不能给 0。 */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.bg[hidden] { display: none; }

/* 照片明暗不可控，压一层半透明罩子保证文字始终读得清。
   浓淡由 --veil-alpha 控制，设置里的滑杆改的就是它 */
.bg__veil { position: absolute; inset: 0; background: rgba(255, 255, 255, var(--veil-alpha)); }
[data-theme="dark"] .bg__veil { background: rgba(0, 0, 0, var(--veil-alpha)); }

.bg__credit {
  position: absolute;
  left: 18px;
  bottom: 14px;
  max-width: min(60vw, 520px);
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}
.bg__credit[hidden] { display: none; }

/* 有背景图时控件改成半透明，别在照片上糊一块死白 */
.has-bg .search {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
[data-theme="dark"].has-bg .search {
  background: rgba(10, 10, 11, 0.72);
}
.has-bg .tool-btn,
.has-bg .settings-menu {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
[data-theme="dark"].has-bg .tool-btn,
[data-theme="dark"].has-bg .settings-menu {
  background: rgba(10, 10, 11, 0.8);
}

/* 时钟不加发光（明确要求去掉），压在照片上靠字重和字号保证可读性。
   这里只把日期颜色从 --muted 提到 --fg —— 那是提对比度，不是发光 */
.has-bg .clock__date { color: var(--fg); }

/* ---------- 背景图选择弹层 ---------- */

.picker {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.45);
}
.picker[hidden] { display: none; }
.picker__card {
  width: 100%;
  max-width: 720px;
  max-height: 82vh;
  overflow: auto;
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--field);
  box-shadow: var(--shadow);
}
.picker__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.picker__head h2 { margin: 0; font-size: 16px; font-weight: 600; }
.picker__close {
  width: 30px; height: 30px;
  border: none; border-radius: 999px;
  background: transparent; color: var(--muted);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.picker__close:hover { color: var(--fg); background: var(--hover); }
.picker__hint { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.picker__item {
  padding: 0;
  aspect-ratio: 16 / 9;
  border: 2px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  background: var(--hover);
  cursor: pointer;
}
.picker__item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.picker__item:hover { border-color: var(--ring); }
.picker__item.is-active { border-color: var(--fg); }
.picker__empty { margin: 0; font-size: 13px; color: var(--muted); }
.picker__foot { display: flex; justify-content: flex-end; margin-top: 14px; }
.picker__reset {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--field);
  color: var(--fg);
  font-size: 13px;
  cursor: pointer;
}
.picker__reset:hover { border-color: var(--ring); }