/* =============================================================================
   site.css —— 主题令牌 / 布局 / 各区块
   ============================================================================= */

/* ---------------------------- 1. 设计令牌 ---------------------------- */
/* =============================================================================
   ★★★ 手动调整区（字体 / 主题色）★★★
   -----------------------------------------------------------------------------
   · 字体：把下面两个变量换成你想要的字体栈即可，全站自动生效
   · 主题色：下面前两组是"固定主题色"（关掉「配色跟随壁纸」时使用）。
     打开「配色跟随壁纸」时，强调色由 assets/js/palette.js 从壁纸实时提取，
     兜底值写在 assets/js/posts.js 的 SITE.palette 里。
   · 形状：--radius 卡片圆角、--rail-w* 侧边栏三档宽度
   ============================================================================= */
:root{
  /* —— 字体 —— */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, "JetBrains Mono", "Cascadia Mono", monospace;
  --font-size: 14px;                      /* 正文基准字号 */

  /* —— 主题色（固定模式：亮色 = 白 + 绿 / 凯尔希）—— */
  --accent:#748321;
  --accent-2:#bcd04e;

  /* —— 形状 —— */
  --radius:18px;
  --rail-w:84px; --rail-w-open:356px; --rail-w-full:356px;
  --right-w:248px;
}

/* —— 设计令牌（其余颜色，一般不用动）—— */
:root{
  --text:#0f1a15;
  --text-dim:#54685f;
  --line:rgba(12,36,26,.13);

  --ga1:.42; --ga2:.12; --ga3:.28;      /* 玻璃三层 alpha（越低越透） */
  --pa1:.60; --pa2:.70;                 /* 播放器面板 */
  --gt-border:rgba(255,255,255,.60);
  --gt-rim1:rgba(255,255,255,.95); --gt-rim2:rgba(255,255,255,.16); --gt-rim3:rgba(255,255,255,.72);
  --glass-shadow:0 12px 34px rgba(12,40,28,.16);

  --glass-k:0.55;                       /* 设置里的"玻璃染色浓度"系数 */
  --glass-sat:120%;                     /* 设置里的"通透度"（背景提饱和，越低越清透） */
  --glass-blur:1px;                     /* 设置里的"玻璃模糊"（默认 1px） */

  --scrim:rgba(246,250,249,.58);
  --wall-light:1; --wall-dark:0;
}
html[data-theme="dark"]{
  /* —— 主题色（固定模式：暗色 = 黑 + 绿 / M3）—— */
  --accent:#90be1e;
  --accent-2:#caff47;

  --text:#e8f4ee;
  --text-dim:#93a9a0;
  --line:rgba(120,255,200,.16);

  --ga1:.085; --ga2:.015; --ga3:.06;
  --pa1:.52; --pa2:.64;
  --gt-border:rgba(255,255,255,.16);
  --gt-rim1:rgba(255,255,255,.46); --gt-rim2:rgba(255,255,255,.05); --gt-rim3:rgba(255,255,255,.26);
  --glass-shadow:0 16px 44px rgba(0,0,0,.5);

  --scrim:rgba(4,10,8,.62);
  --wall-light:0; --wall-dark:1;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; color:var(--text); background:#eef3f1;
  font-family:var(--font-sans);
  font-size:var(--font-size);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
html[data-theme="dark"] body{ background:#05090a; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
h1,h2,h3,h4{ margin:0; font-weight:650; letter-spacing:-.01em; }
p{ margin:0 0 10px; line-height:1.75; }
code{ font-family:var(--font-mono); font-size:.92em;
  background:color-mix(in srgb, var(--accent) 14%, transparent); padding:1px 5px; border-radius:5px; }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:color-mix(in srgb, var(--text) 18%, transparent); border-radius:99px; }
::-webkit-scrollbar-track{ background:transparent; }

/* ---------------------------- 2. 动态壁纸 ---------------------------- */
.wall{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.wall-v{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .8s ease; display:none;
}
.wall-v.on{ display:block; }
.wall-v.show{ opacity:1; }
/* 视频缺失时的动态渐变兜底 */
.wall-blobs{ position:absolute; inset:0; }
.wall-blobs i{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.55; }
.wall-blobs .g1{ width:56vmax; height:56vmax; left:-16vmax; top:-20vmax;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 70%, #ffffff), transparent 70%);
  animation:wall-a 26s ease-in-out infinite; }
.wall-blobs .g2{ width:48vmax; height:48vmax; right:-14vmax; bottom:-20vmax;
  background:radial-gradient(circle, var(--accent-2), transparent 70%);
  animation:wall-b 32s ease-in-out infinite; }
.wall-blobs .g3{ width:36vmax; height:36vmax; right:8vmax; top:-12vmax;
  background:radial-gradient(circle, #7fd8ff, transparent 70%);
  animation:wall-c 28s ease-in-out infinite; }
@keyframes wall-a{ 0%,100%{ transform:translate3d(0,0,0) scale(1); } 50%{ transform:translate3d(6vmax,5vmax,0) scale(1.12); } }
@keyframes wall-b{ 0%,100%{ transform:translate3d(0,0,0) scale(1.05); } 50%{ transform:translate3d(-7vmax,-5vmax,0) scale(.94); } }
@keyframes wall-c{ 0%,100%{ transform:translate3d(0,0,0); } 50%{ transform:translate3d(-5vmax,6vmax,0); } }
.wall-scrim{ position:absolute; inset:0; background:var(--scrim); transition:background .6s ease; }
body[data-motion="off"] .wall-blobs i{ animation:none; }
body[data-wallpaper="off"] .wall-v{ opacity:0 !important; }

/* ---------------------------- 3. 布局 ---------------------------- */
/* 注意：.glass-frame 里也写了 position:relative，这里显式提高权重，避免被覆盖 */
.rail, .rail.glass-frame{
  position:fixed; left:12px; top:12px; bottom:12px; z-index:40;
  width:var(--rail-w); overflow:hidden;
  border-radius:22px; padding:10px 6px;
  transition:width .32s cubic-bezier(.4,0,.2,1);
  scrollbar-width:none;
}
.rail::-webkit-scrollbar{ width:0; }
.rail:hover{ width:var(--rail-w-open); }
.rail.wide, .rail.wide:hover, .rail.pinned, .rail.pinned:hover{ width:var(--rail-w-full); }
/* 调试用：?nohover=1 时固定为收起态（headless 截图的鼠标恰好停在 0,0，会触发 :hover） */
html.no-hover .rail, html.no-hover .rail:hover{ width:var(--rail-w) !important; }

.wrap{
  position:relative; z-index:10;
  margin-left:calc(var(--rail-w) + 22px);
  margin-right:calc(var(--right-w) + 34px);
  padding:16px 0 40px;
  min-height:100%;
  display:flex; flex-direction:column;
}
.rightbar, .rightbar.glass-frame{
  position:fixed; right:12px; top:12px; bottom:12px; z-index:30;
  width:var(--right-w); overflow:hidden; padding:12px;
  border-radius:22px;
}
/* 玻璃层的定位参照不能被内容滚动带走，所以滚动交给内层容器 */
.rail .lg-content, .rightbar .lg-content{ height:100%; }
.rail-scroll, .bar-scroll{ height:100%; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; }
.rail-scroll{ display:flex; flex-direction:column; }
.rail-scroll::-webkit-scrollbar, .bar-scroll::-webkit-scrollbar{ width:5px; }
.rail-scroll::-webkit-scrollbar-thumb, .bar-scroll::-webkit-scrollbar-thumb{
  background:color-mix(in srgb, var(--text) 16%, transparent); border-radius:99px; }
.footer{ margin-top:auto; padding:18px 0 4px; }
.footer-inner{
  border-radius:var(--radius); padding:14px 18px;
  display:flex; flex-wrap:wrap; gap:8px 18px; align-items:center; justify-content:center;
  font-size:12px; color:var(--text-dim);
}
.footer-inner img{ height:14px; vertical-align:-2px; margin-right:5px; }
.footer-inner a:hover{ color:var(--accent); }

/* ---------------------------- 4. 侧边栏 ---------------------------- */
.rail-brand{
  display:flex; align-items:center; gap:10px; padding:6px 8px 12px; color:var(--text);
  border-bottom:1px solid var(--line); margin-bottom:10px; white-space:nowrap;
}
.rail-brand .mark{
  flex:0 0 34px; width:34px; height:34px; border-radius:11px; display:grid; place-items:center;
  background:linear-gradient(140deg, var(--accent), var(--accent-2)); color:#fff; font-weight:800; font-size:15px;
}
.rail-brand .txt b{ display:block; font-size:13px; font-weight:650; }
.rail-brand .txt span{ display:block; font-size:10.5px; color:var(--text-dim); }
.rail-nav{ display:flex; flex-direction:column; gap:4px; }
/* 常态只有 icon：文字在侧边栏展开时才淡入（配合 width 过渡） */
.rail .nav-item span, .rail .rail-btn span, .rail .rail-brand .txt, .rail .rail-title{
  opacity:0; transition:opacity .16s ease .06s; pointer-events:none;
}
.rail:hover .nav-item span, .rail:hover .rail-btn span, .rail:hover .rail-brand .txt, .rail:hover .rail-title,
.rail.wide .nav-item span, .rail.wide .rail-btn span, .rail.wide .rail-brand .txt, .rail.wide .rail-title,
.rail.pinned .nav-item span, .rail.pinned .rail-btn span, .rail.pinned .rail-brand .txt, .rail.pinned .rail-title{
  opacity:1; pointer-events:auto;
}
.nav-item{
  display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:12px;
  color:var(--text-dim); white-space:nowrap; font-size:13px; cursor:pointer;
  border:1px solid transparent;
}
.nav-item:hover{ color:var(--text); background:rgba(255,255,255,.14); border-color:var(--line); }
.nav-item.is-on{ color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, transparent); }
.nav-item i{ flex:0 0 20px; width:20px; height:20px; display:grid; place-items:center; }
.nav-item svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.rail-sep{ height:1px; background:var(--line); margin:10px 4px; }
.rail-title{ font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-dim);
  padding:2px 10px 6px; white-space:nowrap; }
.rail-bottom{ margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.rail-slot{ width:100%; }
.rail-btn{
  display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:12px; cursor:pointer;
  border:1px solid var(--line); background:rgba(255,255,255,.08); color:var(--text-dim);
  white-space:nowrap; font-size:13px; text-align:left;
}
.rail-btn:hover{ color:var(--text); background:rgba(255,255,255,.2); }
.rail-btn svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; }

/* ---------------------------- 5. 顶部（标题 / 日历 / 天气） ---------------------------- */
.topbar{ border-radius:var(--radius); margin-bottom:16px; }
.topbar .inner{ padding:16px 18px 14px; display:grid; grid-template-columns:1fr auto; gap:6px 20px; }
.tb-title{ grid-column:1 / -1; display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.tb-title h1{ font-size:22px; }
.tb-title h1 em{ font-style:normal; color:var(--accent); }
.tb-title span{ font-size:12.5px; color:var(--text-dim); }

.cal{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; margin-top:14px; grid-column:1; }
.cal-day{
  border-radius:12px; padding:8px 8px 7px; border:1px solid var(--line);
  background:rgba(255,255,255,.06); min-height:96px;
}
.cal-day .dow{ font-size:10.5px; color:var(--text-dim); display:flex; justify-content:space-between; }
.cal-day .num{ font-size:17px; font-weight:650; line-height:1.25; margin-bottom:4px; }
.cal-day.is-today{ border-color:color-mix(in srgb, var(--accent) 65%, transparent);
  background:color-mix(in srgb, var(--accent) 12%, transparent); }
.cal-day.is-today .num{ color:var(--accent); }
.cal-day.is-weekend .dow{ color:color-mix(in srgb, var(--accent) 60%, var(--text-dim)); }
.sched{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.sched li{ font-size:10.5px; line-height:1.35; color:var(--text-dim); overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.sched li b{ color:var(--accent); font-weight:600; margin-right:3px; }

.weather{ grid-column:2; grid-row:2; align-self:start; margin-top:14px;
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:14px;
  border:1px solid var(--line); background:rgba(255,255,255,.06); min-width:186px; }
.weather .w-ico{ flex:0 0 46px; width:46px; height:46px; }
.weather .w-ico svg{ width:100%; height:100%; }
.weather .w-main{ font-size:15px; font-weight:650; }
.weather .w-sub{ font-size:11px; color:var(--text-dim); margin-top:3px; }
.weather.is-err .w-main{ font-size:13px; color:var(--text-dim); font-weight:500; }

/* ---------------------------- 6. 主区：分类 + 日志卡片 ---------------------------- */
.sec-head{ display:flex; align-items:center; gap:12px; margin:6px 0 12px; }
.sec-head h2{ font-size:16px; }
.sec-head .line{ flex:1; height:1px; background:var(--line); }
.sec-head .count{ font-size:11.5px; color:var(--text-dim); }

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.chip{
  padding:6px 13px; border-radius:99px; font-size:12.5px; cursor:pointer;
  border:1px solid var(--line); background:rgba(255,255,255,.08); color:var(--text-dim);
}
.chip:hover{ color:var(--text); background:rgba(255,255,255,.2); }
.chip.is-on{ color:#fff; background:var(--accent); border-color:transparent; }

.cat-block{ margin:22px 0 8px; scroll-margin-top:16px; }
.card{ border-radius:var(--radius); margin-bottom:14px; }
.card-link{ display:grid; grid-template-columns:196px 1fr; gap:16px; padding:14px; }
.card-cover{ position:relative; border-radius:12px; overflow:hidden; aspect-ratio:16 / 10; background:var(--line); }
.card-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
/* 没有真实封面时用主题色渐变生成：强调色（来自壁纸）一变，封面跟着变 */
.cover-gen{
  position:absolute; inset:0; display:block; filter:hue-rotate(var(--hue, 0deg));
  background:
    radial-gradient(58% 70% at 30% 22%, rgba(255,255,255,.42), rgba(255,255,255,0) 62%),
    linear-gradient(160deg, rgba(0,0,0,.30), rgba(0,0,0,.04) 48%, rgba(0,0,0,.44)),
    radial-gradient(42% 52% at 80% 84%, rgba(0,0,0,.18), rgba(0,0,0,0) 70%),
    linear-gradient(135deg, var(--accent), var(--accent-2));
}
.cover-gen::after{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(-18deg, rgba(255,255,255,.10) 0 2px, rgba(255,255,255,0) 2px 26px);
}
.ritem .thumb{ position:relative; }
.ritem .thumb .cover-gen{ position:absolute; }
.card-cover .pin{
  position:absolute; left:8px; top:8px; font-size:10px; padding:2px 7px; border-radius:99px;
  background:rgba(0,0,0,.42); color:#fff; backdrop-filter:blur(4px);
}
.card-body{ min-width:0; display:flex; flex-direction:column; }
.card-body h3{ font-size:16.5px; margin-bottom:7px; }
.card-body h3 a:hover{ color:var(--accent); }
.card-body .excerpt{ font-size:12.5px; color:var(--text-dim); line-height:1.7; margin:0 0 10px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.card-tags{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.card-tags span{ font-size:10.5px; padding:2px 7px; border-radius:6px; color:var(--accent);
  background:color-mix(in srgb, var(--accent) 12%, transparent); }
/* 卡片徽标（例如「本地工具 · 仅开发者」） */
.card-badge{
  align-self:flex-start; font-size:10.5px; padding:2px 8px; border-radius:99px; margin-bottom:7px;
  color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  background:color-mix(in srgb, var(--accent) 12%, transparent);
}
.card-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between;
  font-size:11.5px; color:var(--text-dim); }
.card-foot .cat{ display:flex; align-items:center; gap:6px; }
.card-foot .cat::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); }
.empty{ padding:22px; text-align:center; color:var(--text-dim); font-size:13px; }

/* ---------------------------- 7. 右侧栏 ---------------------------- */
.rightbar .sec-head{ margin:2px 0 10px; }
.rgroup{ margin-bottom:16px; }
.rgroup h4{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-dim);
  margin-bottom:8px; display:flex; align-items:center; gap:7px; }
.rgroup h4::after{ content:''; flex:1; height:1px; background:var(--line); }
.rgroup h4 em{ font-style:normal; color:var(--accent); font-size:11px; }
.ritem{
  display:grid; grid-template-columns:46px 1fr; gap:10px; padding:8px; border-radius:12px;
  border:1px solid transparent; align-items:center;
}
.ritem:hover{ background:rgba(255,255,255,.14); border-color:var(--line); }
.ritem .thumb{ width:46px; height:34px; border-radius:8px; overflow:hidden; background:var(--line); }
.ritem .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.ritem .nm{ font-size:12.5px; line-height:1.45; color:var(--text);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ritem .mt{ font-size:10.5px; color:var(--text-dim); margin-top:3px; }
.ritem.plain{ grid-template-columns:1fr; }

/* ---------------------------- 拖动条统一样式 ----------------------------
   所有 input[type=range]（设置里的透明度/通透/模糊/音量/果冻、播放器音量）
   统一成同一套画风：磨砂槽 + 主题色已填充段 + 带光晕的圆钮。
   已填充长度由 JS 写 --fill 百分比（file: site.js 的 paintRanges、播放器 paintVol）。 */
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:18px; margin:0;
  background:transparent; cursor:pointer; outline:none;
}
input[type=range]::-webkit-slider-runnable-track{
  height:6px; border-radius:99px;
  background-color:rgba(128,128,128,.24);
  background-image:linear-gradient(90deg, var(--accent), var(--accent-2));
  background-repeat:no-repeat;
  background-size:var(--fill,0%) 100%;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.16);
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:14px; height:14px; margin-top:-4px;
  border-radius:50%; border:1.5px solid rgba(255,255,255,.85);
  background:radial-gradient(circle at 34% 30%, #fff, color-mix(in srgb, var(--accent) 78%, #fff) 74%);
  box-shadow:0 1px 4px rgba(0,0,0,.32), 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
  transition:transform .12s ease, box-shadow .12s ease;
}
input[type=range]:hover::-webkit-slider-thumb{ transform:scale(1.1); }
input[type=range]:active::-webkit-slider-thumb{ transform:scale(1.18); }
input[type=range]:focus-visible::-webkit-slider-thumb{
  box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 34%, transparent);
}
input[type=range]::-moz-range-track{ height:6px; border-radius:99px; background:rgba(128,128,128,.24); }
input[type=range]::-moz-range-progress{ height:6px; border-radius:99px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2)); }
input[type=range]::-moz-range-thumb{ width:12px; height:12px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.85);
  background:color-mix(in srgb, var(--accent) 78%, #fff); box-shadow:0 1px 4px rgba(0,0,0,.32); }

/* 正文里的视频块（日志打包器用 !video[说明](路径) 生成） */
.post-video{
  display:block; width:100%; max-width:660px; margin:16px 0; border-radius:14px;
  background:#000; box-shadow:0 10px 26px rgba(0,0,0,.26); outline:none;
}
.post-video:focus-visible{ box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }

/* ===== 滚动条：全站统一成"细、圆、主题色半透明" ===== */
html{
  scrollbar-width: thin;                                   /* Firefox */
  scrollbar-color: color-mix(in srgb, var(--accent) 45%, transparent) transparent;
}
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--accent) 34%, transparent);
  border:2px solid transparent; background-clip: padding-box;
  border-radius:99px; min-height:36px;
}
::-webkit-scrollbar-thumb:hover{ background: color-mix(in srgb, var(--accent) 58%, transparent); background-clip: padding-box; }
::-webkit-scrollbar-thumb:active{ background: color-mix(in srgb, var(--accent) 72%, transparent); background-clip: padding-box; }
::-webkit-scrollbar-corner{ background:transparent; }
/* 侧栏 / 右栏 / 设置面板里的滚动条再细一点，别抢镜 */
.rail-scroll::-webkit-scrollbar, .bar-scroll::-webkit-scrollbar,
.modal-scroll::-webkit-scrollbar, .playlist::-webkit-scrollbar{ width:6px; }
.rail-scroll, .bar-scroll, .modal-scroll, .playlist{ scrollbar-width: thin; }

/* ---------------------------- 7.5 首次访问使用声明 ---------------------------- */
.notice-modal{ position:fixed; inset:0; z-index:95; display:none; }
.notice-modal.open{ display:block; }
.notice-modal .nm-bg{
  position:absolute; inset:0; background:rgba(8,14,12,.46);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
/* 居中、不可拖动；内容区可滚动，按钮固定在底部 */
.notice-modal .nm-card{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(680px,94vw); max-height:88vh; border-radius:22px; overflow:hidden;
}
.notice-modal .nm-inner{ display:flex; flex-direction:column; max-height:88vh; }
.notice-modal .nm-scroll{ overflow-y:auto; padding:22px 26px 8px; }
.notice-modal h2{ font-size:17.5px; margin-bottom:4px; }
.notice-modal .nm-sub{ font-size:11.5px; color:var(--text-dim); margin-bottom:14px; }
.notice-modal ol{ margin:0; padding-left:20px; font-size:13px; line-height:1.9; }
.notice-modal li{ margin-bottom:9px; }
.notice-modal li b{ color:var(--accent); }
.notice-modal .nm-foot{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:14px 26px 18px; margin-top:6px; border-top:1px solid var(--line);
}
.notice-modal .nm-btn{
  padding:10px 22px; border-radius:12px; font-size:13.5px; cursor:pointer; font-family:inherit;
  border:1px solid transparent; background:var(--accent); color:#fff; font-weight:600;
}
.notice-modal .nm-btn:hover:not(:disabled){ background:var(--accent-2); }
.notice-modal .nm-btn:disabled{
  cursor:not-allowed; opacity:.75; background:rgba(255,255,255,.06);
  color:var(--text-dim); border-color:var(--line); font-weight:500;
}
.notice-modal .nm-note{ font-size:11.5px; color:var(--text-dim); }
.ritem.plain .nm{ font-size:12.5px; }

/* ---------------------------- 8. 设置面板 ---------------------------- */
.modal{ position:fixed; inset:0; z-index:90; display:none; }
.modal.open{ display:block; }
.modal-bg{ position:absolute; inset:0; background:rgba(8,14,12,.36);
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); }
/* 居中、不可拖动。注意：滚动的必须是内层 .modal-scroll，
   否则玻璃层（绝对定位）会跟着内容一起滚走，出现"框体比文字短" */
.modal-card{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(580px,92vw); max-height:84vh; overflow:hidden; border-radius:22px;
  display:flex; flex-direction:column;
}
.modal-card .lg-content{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; }
.modal-card .inner{
  padding:20px 22px 18px; display:flex; flex-direction:column;
  flex:1 1 auto; min-height:0; overflow:hidden;
}
.modal-scroll{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
.modal-scroll::-webkit-scrollbar{ width:6px; }
.modal-scroll::-webkit-scrollbar-thumb{ background:color-mix(in srgb, var(--text) 18%, transparent); border-radius:99px; }
.modal-head{ position:sticky; top:0; z-index:2; }
.modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.modal-head h3{ font-size:16px; }
.modal-close{
  width:30px; height:30px; border-radius:9px; cursor:pointer; color:var(--text-dim);
  border:1px solid var(--line); background:rgba(255,255,255,.08); display:grid; place-items:center; font-size:15px;
}
.modal-close:hover{ color:var(--text); background:rgba(255,255,255,.2); }
.set-row{ padding:13px 0; border-top:1px solid var(--line); }
.set-row:first-of-type{ border-top:0; }
.set-row .lb{ font-size:13px; font-weight:600; margin-bottom:3px; }
.set-row .ds{ font-size:11.5px; color:var(--text-dim); margin-bottom:9px; }
.seg{ display:inline-flex; gap:6px; flex-wrap:wrap; }
.seg button{
  padding:6px 14px; border-radius:9px; font-size:12.5px; cursor:pointer;
  border:1px solid var(--line); background:rgba(255,255,255,.08); color:var(--text-dim);
}
.seg button:hover{ color:var(--text); background:rgba(255,255,255,.2); }
.seg button.is-on{ color:#fff; background:var(--accent); border-color:transparent; }
/* 拖动条的外观统一在文件上方「拖动条统一样式」里定义，这里不再重复 */
.slider-row{ display:flex; align-items:center; gap:12px; }
.slider-row b{ font-size:12px; color:var(--text-dim); min-width:48px; text-align:right;
  font-variant-numeric:tabular-nums; font-weight:500; }

/* ---------------------------- 9. 详情页 ---------------------------- */
.post{ border-radius:var(--radius); }
.post .inner{ padding:26px 30px 30px; }
.post h1{ font-size:26px; margin-bottom:10px; }
.post-meta{ display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--text-dim); margin-bottom:18px; }
.post-body{ font-size:14.5px; line-height:1.9; }
.post-body h2{ font-size:18px; margin:26px 0 10px; }
.post-body h3{ font-size:15.5px; margin:20px 0 8px; }
.post-body p{ margin:0 0 14px; }
.post-body img{ max-width:100%; border-radius:12px; }
/* 正文超链接：颜色跟随主题色（--accent 是从壁纸提取的，换主题/换壁纸会一起变） */
.post-body a{
  color:var(--accent); text-decoration:none; border-radius:3px; padding-bottom:1px;
  border-bottom:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  transition:color .15s, border-color .15s, background .15s;
}
.post-body a:hover{
  color:var(--accent-2);
  border-bottom-color:color-mix(in srgb, var(--accent-2) 70%, transparent);
  background:color-mix(in srgb, var(--accent) 12%, transparent);
}
.post-body a:focus-visible{ outline:2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset:2px; }
/* 外链加一个细箭头，站内链接不加 */
.post-body a.is-external::after, .post-body a[target="_blank"]::after{
  content:'↗'; font-size:.78em; margin-left:2px; vertical-align:.15em; opacity:.72;
}
/* 声明弹窗里的联系方式等等也统一成主题色 */
.notice-modal a, .tool-notice a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.back-link{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text-dim); margin-bottom:14px; }
.back-link:hover{ color:var(--accent); }
.post-nav{ display:flex; justify-content:space-between; gap:14px; margin-top:18px; font-size:12.5px; }
.post-nav a{ color:var(--text-dim); } .post-nav a:hover{ color:var(--accent); }

/* ---------------------------- 10. 响应式 ---------------------------- */
@media (max-width:1180px){
  .rightbar{ display:none; }
  .wrap{ margin-right:24px; }
}
@media (max-width:820px){
  .rail{ left:8px; }
  .wrap{ margin-left:calc(var(--rail-w) + 22px); padding-right:16px; }
  .topbar .inner{ grid-template-columns:1fr; }
  .cal{ grid-template-columns:repeat(7,minmax(56px,1fr)); overflow-x:auto; padding-bottom:4px; }
  .weather{ grid-column:1; grid-row:auto; }
  .card-link{ grid-template-columns:1fr; }
  .post .inner{ padding:18px; }
}