/* ============================================================
   kt20 导航 · UI 重设计 v2（干净清爽浅色风，追求可读性）
   加载在 style.css 之后；不要此风格删掉 index.html 里的引用即可
   ============================================================ */

/* ---------- 页面节奏 ---------- */
body {
  -webkit-font-smoothing: antialiased;
}
.kt-body { padding-top: 10px; }
.card { margin-bottom: 16px; }
.kt-card-in { padding: 1.4rem 1.3rem 1.15rem; }

/* 顶部区域更紧凑：时钟上移；时钟/问候语按原设计用深色字 */
.clock-container { margin-top: 56px; }
.clock-face { font-size: 2.5em; }
.clock-face,
.clock-details,
.date-line,
.date-part,
.weekday,
.reminder,
.yiyan {
  color: #2f2f2f;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.85), 0 0 12px rgba(255, 255, 255, 0.7);
}
.reminder { color: #2f2f2f !important; }
.night-mode .clock-face,
.night-mode .clock-details,
.night-mode .date-line,
.night-mode .date-part,
.night-mode .weekday,
.night-mode .reminder,
.night-mode .yiyan {
  color: #e8edf5;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

/* ---------- 分类卡片：白底实色，保证任何背景下文字都清晰 ---------- */
.card {
  background: #ffffff;
  border: 1px solid #e6eaf0;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
  overflow: visible;
}

/* 分类标题：改回文档流内显示，左侧色条 + 加粗深色字 */
.cat-head {
  position: relative; /* ::before 色条以标题自身为锚点 */
  top: auto;          /* 抵消原样式的 -15px 上移 */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  padding: 0 0 14px 12px;
  color: #1f2d3d;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
/* 标题靠左：文字不再撑满整行 */
.cat-head .kt-name {
  flex-grow: 0;
  text-align: left;
}
.cat-head::before {
  left: 0;
  width: 4px;
  height: 19px;
  border-radius: 2px;
  background: #3b82f6;
}
.cat-head .site-ico {
  color: #3b82f6;
  font-size: 22px;
  margin: 0 8px 0 4px;
}
.cat-head .kt-name { color: #1f2d3d; }

/* ---------- 网址按钮：浅底深字，hover 只变底色 ---------- */
.btn.btn-outline-light {
  background: #f7f9fc;
  border: 1px solid #e6eaf0;
  border-radius: 10px;
  color: #33475e;
  font-size: 15px;
  font-weight: 500;
  padding: 0.72rem 0.3rem;
  box-shadow: none;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn.btn-outline-light:hover,
.btn.btn-outline-light:focus {
  background: #edf2fa;
  border-color: #c9d6ea;
  color: #1f2d3d;
  box-shadow: none;
}

/* ---------- 网址图标：20px -> 26px，更醒目 ---------- */
.link-icon { margin: 0 6px 0 0; }
.link-icon img,
.link-icon svg {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  vertical-align: -6px;
}

/* ---------- 搜索框：白色胶囊，深色文字 ---------- */
.sou .search-container {
  background: #ffffff;
  border: 1px solid #e6eaf0;
  border-radius: 44px;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
}
.sou .search-container .wd { color: #1f2d3d; }
.sou .search-container .wd::placeholder { color: #9aa7b8; }
.sou .search-container:focus-within {
  border-color: #93b4f5;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* ---------- 时钟与一言：深色字（夜间白色）---------- */

/* ---------- 右上角下拉菜单 ---------- */
.dropdown-content {
  background: #ffffff;
  border: 1px solid #e6eaf0;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(15, 23, 42, 0.14);
}

/* ---------- 深色模式适配 ---------- */
.night-mode .card {
  background: #252b3b;
  border-color: #333b52;
}
.night-mode .cat-head,
.night-mode .cat-head .kt-name { color: #dfe6f5; }
.night-mode .cat-head::before,
.night-mode .cat-head .site-ico { background-color: #5b9bff; color: #5b9bff; }
.night-mode .btn.btn-outline-light {
  background: #2b3145;
  border-color: #39415c;
  color: #cdd6e8;
}
.night-mode .btn.btn-outline-light:hover,
.night-mode .btn.btn-outline-light:focus {
  background: #353d58;
  border-color: #4a5679;
  color: #ffffff;
}
.night-mode .sou .search-container {
  background: #252b3b;
  border-color: #39415c;
}
.night-mode .sou .search-container .wd { color: #e7ecf7; }
.night-mode .dropdown-content {
  background: #252b3b;
  border-color: #39415c;
}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: #c4ccd8; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #a8b3c4; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- 右上角皮肤按钮：六边形换成衣服图标 ---------- */
.more {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M352,128 Q472,208 512,208 Q552,208 672,128 L862,222 Q902,244 888,284 L844,406 Q832,442 794,430 L700,396 L700,848 Q700,896 652,896 L372,896 Q324,896 324,848 L324,396 L230,430 Q192,442 180,406 L136,284 Q122,244 162,222 Z' fill='%23000000'/%3E%3C/svg%3E");
  background-size: 20px 20px;
}
.night-mode .more {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='M352,128 Q472,208 512,208 Q552,208 672,128 L862,222 Q902,244 888,284 L844,406 Q832,442 794,430 L700,396 L700,848 Q700,896 652,896 L372,896 Q324,896 324,848 L324,396 L230,430 Q192,442 180,406 L136,284 Q122,244 162,222 Z' fill='%23ffffff'/%3E%3C/svg%3E");
  background-size: 20px 20px;
}

/* ---------- 微调：衣服图标加大、分类标题去掉竖条 ---------- */
.more,
.night-mode .more {
  padding: 13px;
  background-size: 26px 26px;
}
.cat-head::before {
  display: none;
}
.cat-head {
  padding-left: 4px;
}

/* ---------- v2.3 微调：标准版型衣服图标 + 三处对齐修正 ---------- */
.more,
.night-mode .more {
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  background-size: 26px 26px;
  background-position: center center;
  background-repeat: no-repeat;
}
.more {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M631.2 96.5L436.5 0C416.4 27.8 371.9 47 355.2 47c-.5 0-1.1.3-1.6.3H286.4c-16.7 0-61.2-19.2-81.3-47L10.8 96.5c-8.7 4.7-12.3 15.6-8.2 24.7l41.8 90.8c4.1 9.1 14.9 13.4 24.2 9.7l53.9-24.3c11-5 23.4 2.5 23.4 14.4V480c0 17.7 14.3 32 32 32h256c17.7 0 32-14.3 32-32V211.9c0-11.9 12.4-19.4 23.4-14.4l53.9 24.3c9.3 3.7 20.1-.6 24.2-9.7l41.8-90.8c4.2-9.2.6-20.1-8.2-24.7z' fill='%23000000'/%3E%3C/svg%3E");
}
.night-mode .more {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M631.2 96.5L436.5 0C416.4 27.8 371.9 47 355.2 47c-.5 0-1.1.3-1.6.3H286.4c-16.7 0-61.2-19.2-81.3-47L10.8 96.5c-8.7 4.7-12.3 15.6-8.2 24.7l41.8 90.8c4.1 9.1 14.9 13.4 24.2 9.7l53.9-24.3c11-5 23.4 2.5 23.4 14.4V480c0 17.7 14.3 32 32 32h256c17.7 0 32-14.3 32-32V211.9c0-11.9 12.4-19.4 23.4-14.4l53.9 24.3c9.3 3.7 20.1-.6 24.2-9.7l41.8-90.8c4.2-9.2.6-20.1-8.2-24.7z' fill='%23ffffff'/%3E%3C/svg%3E");
}
/* 分类标题图标与下方链接块左缘对齐 */
.cat-head {
  padding-left: 0;
  margin-left: 4px;
}
.cat-head .site-ico {
  margin-left: 0;
}
/* 链接块内的图标右移一点 */
.btn .link-icon {
  margin-left: 6px;
}

/* ---------- v2.3 补：按实测像素精确对齐 ---------- */
.cat-head {
  margin-left: -4px;
}
.more,
.night-mode .more {
  margin-bottom: 6px;
}

/* v2.4 补：衣服图标上移 6px 与月亮水平对齐（负边距直接位移） */
.more,
.night-mode .more {
  margin-top: -6px;
  margin-bottom: 0;
}

/* ---------- v2.6 根治衣服图标偏下：原 .dropdown 容器写死 20x20，图标溢出才显得低 ---------- */
.dropdown {
  width: 32px;
  height: 32px;
  margin-right: 12px;
}
.more,
.night-mode .more {
  display: block;      /* 脱离行内基线，垂直填满容器 */
  margin: 0;           /* 撤销之前的负边距补偿 */
  width: 100%;
  height: 100%;
  background-size: 26px 26px;
  background-position: center center;
  background-repeat: no-repeat;
}

/* ---------- v2.7 夜间模式修正 ---------- */
/* 问候语：日间规则带 !important，夜间必须同级覆盖 */
.night-mode .reminder {
  color: #e8edf5 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}
/* 分类图标：去掉误加的蓝底（v2 时代给竖条写的 background-color 波及了图标） */
.night-mode .cat-head .site-ico {
  background-color: transparent !important;
  color: #5b9bff !important;
}
.night-mode .cat-head::before {
  background-color: transparent !important;
}

/* v2.7 补：夜间模式页脚文字提亮 */
.night-mode .footer-inner,
.night-mode .footer-text,
.night-mode .footer-inner p {
  color: #9aa7bd;
  text-shadow: none;
}

/* ---------- v2.8 衣服图标换成镂空描边版（Feather shirt）---------- */
.more {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.38 3.46L16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z'/%3E%3C/svg%3E") !important;
}
.night-mode .more {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.38 3.46L16 2a4 4 0 0 1-8 0L3.62 3.46a2 2 0 0 0-1.34 2.23l.58 3.47a1 1 0 0 0 .99.84H6v10c0 1.1.9 2 2 2h8a2 2 0 0 0 2-2V10h2.15a1 1 0 0 0 .99-.84l.58-3.47a2 2 0 0 0-1.34-2.23z'/%3E%3C/svg%3E") !important;
}

/* ---------- v2.9 衣服图标缩小，视觉大小与月亮匹配 ---------- */
.more,
.night-mode .more {
  background-size: 22px 22px;
}

/* ============================================================
   v3.0 视觉差异化：靛紫主色 + 分类图标色块 + 细节重构
   ============================================================ */
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
    "Microsoft YaHei UI", "Microsoft YaHei", "Segoe UI", sans-serif;
}
::selection { background: rgba(99, 102, 241, 0.25); }

/* 卡片与按钮：靛紫基调 */
.card {
  border-color: #e8eaf6;
  border-radius: 16px;
}
.btn.btn-outline-light:hover,
.btn.btn-outline-light:focus {
  background: #eef0fe;
  border-color: #c9cefb;
}

/* 分类标题：图标放进淡靛色圆角色块，字重加深 */
.cat-head {
  color: #1e2333;
}
.cat-head .site-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(99, 102, 241, 0.12);
  color: #6366f1 !important;
  font-size: 17px;
  margin: 0 9px 0 0;
}
.night-mode .cat-head .site-ico {
  background: rgba(129, 140, 248, 0.16);
  color: #818cf8 !important;
}

/* 搜索框聚焦光圈换靛紫 */
.sbar .search-container:focus-within {
  border-color: #a5b4fc;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);
}

/* 时钟等宽数字 */
.clock-face {
  font-variant-numeric: tabular-nums;
  letter-spacing: 3px;
}

/* v3.1 按用户要求：去掉搜索框聚焦光圈 */
.sbar .search-container:focus-within {
  border-color: #e6eaf0;
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
}
.night-mode .sbar .search-container:focus-within {
  border-color: #39415c;
}
.sbar .search-container .wd:focus { outline: none; }

/* ============================================================
   v3.2 秋日主题：暖白柔光面纱 + 飘落叶动画层
   ============================================================ */
/* 面纱：柔化背景纹理并提升前景可读性 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -998;
  pointer-events: none;
  background: rgba(255, 250, 240, 0.32);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* 落叶层 */
#kt-leaves {
  position: fixed;
  inset: 0;
  z-index: -997;
  overflow: hidden;
  pointer-events: none;
}
.kt-leaf {
  position: absolute;
  top: 0;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.85;
  animation-name: kt-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform;
}
@keyframes kt-fall {
  0%   { transform: translate(0, -8vh) rotate(0deg); }
  25%  { transform: translate(4vw, 24vh) rotate(95deg); }
  50%  { transform: translate(-3vw, 55vh) rotate(185deg); }
  75%  { transform: translate(3vw, 85vh) rotate(275deg); }
  100% { transform: translate(-1vw, 112vh) rotate(360deg); }
}
.night-mode #kt-leaves { opacity: 0.45; }
@media (prefers-reduced-motion: reduce) {
  #kt-leaves { display: none; }
}

/* v3.3 彻底清除输入框聚焦时自身的背景框和边框 */
.sbar .search-container .wd,
.sbar .search-container .wd:focus,
.night-mode .sbar .search-container .wd,
.night-mode .sbar .search-container .wd:focus {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ---------- v3.4 搜索框常显柔和边框 + 背景压暗 ---------- */
.sbar .search-container {
  border: 1px solid rgba(96, 88, 76, 0.42) !important;
  box-shadow: 0 2px 14px rgba(70, 55, 30, 0.16) !important;
}
.night-mode .sbar .search-container {
  border-color: rgba(255, 255, 255, 0.28) !important;
}
/* 面纱从暖白提亮改为暖棕压暗，背景不再艳 */
body::before {
  background: rgba(46, 40, 33, 0.28);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
/* 压暗后加强文字白色光晕，深色字依然清晰 */
.clock-face,
.clock-details,
.date-line,
.date-part,
.weekday,
.reminder,
.yiyan {
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.95), 0 0 16px rgba(255, 255, 255, 0.85) !important;
}

/* ---------- v3.5 一键清空按钮 + 背景再压深 ---------- */
.kt-clear {
  align-self: center;
  padding: 0 8px 0 4px;
  font-size: 24px;
  line-height: 1;
  color: #9aa0a8;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease;
  flex-shrink: 0;
}
.kt-clear:hover { color: #4b5563; }
.night-mode .kt-clear { color: #7d8595; }
.night-mode .kt-clear:hover { color: #d7dce5; }

/* 背景再压深一档 */
body::before {
  background: rgba(38, 33, 27, 0.45);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* ---------- v3.6 修正：×按钮同一行 + 搜索框颜色调淡 ---------- */
.kt-clear {
  position: absolute;
  top: 50%;
  right: 56px;
  transform: translateY(-50%);
  z-index: 10;
  padding: 6px;
  font-size: 22px;
  line-height: 1;
  color: #98a0ab;
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease;
}
.sbar .search-container .wd {
  padding-right: 92px;
}
/* 未点击时的框体：更淡的半透明 */
.sbar .search-container {
  background: rgba(255, 255, 255, 0.80) !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 2px 10px rgba(40, 32, 20, 0.10) !important;
}
.night-mode .sbar .search-container {
  background: rgba(37, 43, 59, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

/* ---------- v3.7 夜间模式：放大镜变浅色 + 输入文字颜色统一 ---------- */
.night-mode #click-go svg {
  filter: invert(1); /* 图标本身是黑色描边，夜间反色成浅色 */
}
.night-mode .sbar .search-container .wd,
.night-mode .sbar .search-container .wd:focus {
  color: #e7ecf7 !important;
  caret-color: #e7ecf7 !important;
}
.night-mode .sbar .search-container .wd::placeholder {
  color: #8b95a8 !important;
}