/* ===========================================================
   资源库 · 样式
   想改配色，主要改下面 :root 里的几个变量就行。
   =========================================================== */

:root{
  --bg:#f5f6fb;
  --bg-soft:#eceef7;
  --card:#ffffff;
  --text:#14161d;
  --text-2:#565d70;
  --text-3:#8b92a5;
  --line:#e5e8f1;
  --line-2:#eef0f7;
  --accent:#5457ff;
  --accent-2:#00b6c9;
  --accent-soft:rgba(84,87,255,.09);
  --on-accent:#fff;
  --hero-bg:rgba(245,246,251,.86);
  --mark:#fff0a3;
  --shadow:0 1px 2px rgba(18,22,45,.04), 0 10px 30px -18px rgba(18,22,45,.35);
  --shadow-lg:0 2px 6px rgba(18,22,45,.05), 0 18px 40px -22px rgba(18,22,45,.45);
  --radius:18px;
  --wrap:880px;
}

[data-theme="dark"]{
  --bg:#0d0f14;
  --bg-soft:#181b24;
  --card:#14171e;
  --text:#eef0f7;
  --text-2:#a3aabc;
  --text-3:#6d7488;
  --line:#252a36;
  --line-2:#1d212b;
  --accent:#8b8dff;
  --accent-2:#22d3ee;
  --accent-soft:rgba(139,141,255,.13);
  --on-accent:#0b0d12;
  --hero-bg:rgba(13,15,20,.86);
  --mark:#6b5a00;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -18px rgba(0,0,0,.9);
  --shadow-lg:0 2px 6px rgba(0,0,0,.5), 0 18px 44px -20px rgba(0,0,0,1);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  font-size:15px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 20px}

a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

button{font:inherit; color:inherit; cursor:pointer; border:0; background:none}

mark{background:var(--mark); color:inherit; border-radius:3px; padding:0 1px}

:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:8px}

svg{fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

/* ---------- 顶部 ---------- */

.hero{
  position:sticky; top:0; z-index:20;
  background:
    radial-gradient(900px 380px at 12% -20%, rgba(84,87,255,.13), transparent 62%),
    radial-gradient(760px 340px at 88% -30%, rgba(0,182,201,.13), transparent 62%),
    var(--hero-bg);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--line);
  transition:padding .18s ease, box-shadow .18s ease;
}
.hero.scrolled{box-shadow:0 8px 24px -20px rgba(18,22,45,.6)}

.hero-top{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px 0 16px;
  transition:padding .18s ease;
}
.hero.scrolled .hero-top{padding:12px 0 10px}

.brand{display:flex; align-items:center; gap:13px; min-width:0}

.logo{
  width:46px; height:46px; flex:none;
  display:grid; place-items:center;
  border-radius:14px;
  background:linear-gradient(140deg,#6366f1,#22d3ee);
  color:#fff; font-weight:800; font-size:20px; letter-spacing:.5px;
  box-shadow:0 8px 18px -10px rgba(84,87,255,.9);
  overflow:hidden;
  background-size:cover; background-position:center;
}
.logo.has-img{background-blend-mode:normal}

.brand-txt{min-width:0}
h1{
  margin:0; font-size:21px; line-height:1.25; letter-spacing:-.2px; font-weight:750;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.tagline{
  margin:2px 0 0; font-size:13px; color:var(--text-2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:52ch;
}
.hero.scrolled .tagline{display:none}

.hero-right{display:flex; align-items:center; gap:8px; flex:none}

.links{display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end}
.links a{
  font-size:12.5px; color:var(--text-2); padding:5px 10px; border-radius:999px;
  border:1px solid var(--line); background:var(--card); white-space:nowrap;
  transition:.15s;
}
.links a:hover{color:var(--text); border-color:var(--text-3); text-decoration:none}

.icon-btn{
  width:36px; height:36px; flex:none; display:grid; place-items:center;
  border-radius:11px; border:1px solid var(--line); background:var(--card);
  color:var(--text-2); transition:.15s;
}
.icon-btn:hover{color:var(--text); border-color:var(--text-3)}
.icon-btn svg{width:18px; height:18px}

[data-theme="dark"] .i-sun{display:none}
[data-theme="light"] .i-moon{display:none}
[data-theme="dark"] .i-moon{display:block; fill:none}
[data-theme="light"] .i-sun{display:block}

/* ---------- 搜索 ---------- */

.search{
  position:relative; display:flex; align-items:center;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:15px;
  box-shadow:var(--shadow);
  transition:border-color .15s, box-shadow .15s;
}
.search:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft), var(--shadow);
}
.i-search{
  position:absolute; left:16px; width:19px; height:19px;
  color:var(--text-3); pointer-events:none;
}
.search input{
  flex:1; min-width:0;
  border:0; outline:0; background:transparent; color:var(--text);
  font-size:15.5px; padding:15px 52px 15px 45px;
  appearance:none; -webkit-appearance:none;
}
.search input::placeholder{color:var(--text-3)}
.search input::-webkit-search-cancel-button{display:none}

.q-clear{
  position:absolute; right:52px;
  width:24px; height:24px; border-radius:50%;
  display:none; place-items:center;
  font-size:11px; color:var(--text-2); background:var(--bg-soft);
}
.q-clear.show{display:grid}

.hint{
  position:absolute; right:14px;
  font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--text-3); border:1px solid var(--line);
  background:var(--bg-soft); border-radius:6px;
  padding:4px 6px;
}

/* ---------- 筛选 ---------- */

.filters{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:13px 0 15px;
  overflow:hidden;
}
.hero.scrolled .filters{display:none}

.f-group{display:flex; align-items:center; gap:7px; flex-wrap:wrap; min-width:0}
.f-label{
  font-size:11.5px; color:var(--text-3); letter-spacing:.06em;
  text-transform:uppercase; margin-right:1px; flex:none;
}

.chip{
  display:inline-flex; align-items:center; gap:6px;
  height:30px; padding:0 12px;
  border-radius:999px; border:1px solid var(--line);
  background:var(--card); color:var(--text-2);
  font-size:13px; white-space:nowrap;
  transition:.14s ease;
}
.chip:hover{border-color:var(--text-3); color:var(--text)}
.chip .n{font-size:11px; opacity:.55; font-variant-numeric:tabular-nums}
.chip.on{
  background:var(--accent); border-color:var(--accent); color:var(--on-accent);
}
.chip.on .n{opacity:.75}

/* ---------- 结果栏 ---------- */

.result-bar{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:22px 2px 14px;
}
.stats{font-size:13px; color:var(--text-2)}
.stats b{color:var(--text); font-weight:650; font-variant-numeric:tabular-nums}
.bar-right{display:flex; gap:8px; flex:none}

/* ---------- 按钮 ---------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  height:32px; padding:0 13px; border-radius:10px;
  font-size:13px; font-weight:550; white-space:nowrap;
  border:1px solid transparent;
  background:var(--accent); color:var(--on-accent);
  transition:.15s ease;
}
.btn:hover{filter:brightness(1.07); text-decoration:none}
.btn.ghost{
  background:var(--card); color:var(--text-2);
  border-color:var(--line);
}
.btn.ghost:hover{color:var(--text); border-color:var(--text-3); filter:none}
.btn.sm{height:28px; padding:0 11px; font-size:12.5px; border-radius:9px}
.btn.hide{display:none}

/* 资源行里的"打开"：平时低调，hover 才亮 */
.btn.open{
  flex:none; background:transparent; color:var(--text-2);
  border-color:var(--line); font-weight:500;
}
.btn.open:hover{
  color:var(--on-accent); background:var(--accent); border-color:var(--accent);
  filter:none; text-decoration:none;
}

/* ---------- 每一期的卡片 ---------- */

.list{padding-bottom:8px}

.ep{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:20px 20px 12px;
  margin-bottom:15px;
  scroll-margin-top:96px;
  animation:rise .32s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes rise{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

.ep.flash{animation:flash 1.8s ease}
@keyframes flash{
  0%{box-shadow:0 0 0 0 var(--accent-soft), var(--shadow)}
  25%{box-shadow:0 0 0 5px var(--accent-soft), var(--shadow-lg)}
  100%{box-shadow:0 0 0 0 transparent, var(--shadow)}
}

.ep-top{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:14px; align-items:start;
}

.ep-no{
  width:52px; height:52px; flex:none;
  border-radius:15px;
  display:grid; place-items:center;
  color:#fff; position:relative; overflow:hidden;
  background-image:linear-gradient(145deg, hsl(var(--h,250) 78% 58%), hsl(calc(var(--h,250) + 42) 82% 52%));
  background-size:cover; background-position:center;
  box-shadow:0 10px 22px -14px hsl(var(--h,250) 80% 45%);
}
.ep-no span{
  font-size:18px; font-weight:800; letter-spacing:-.5px;
  font-variant-numeric:tabular-nums;
  text-shadow:0 1px 6px rgba(0,0,0,.35);
}
.ep-no.wide span{font-size:12px; letter-spacing:0}

/* 有封面时：左边换成 16:9 的小图，期号挪到标题下面 */
.ep-cover{
  width:104px; height:59px; flex:none;
  border-radius:12px; overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(145deg,#e3e6f0,#cbd2e4);
}
.ep-cover img{width:100%; height:100%; object-fit:cover; display:block}
[data-theme="dark"] .ep-cover{background:linear-gradient(145deg,#242935,#171a22)}

.ep-no-chip{
  font-size:11.5px; font-weight:650; color:var(--accent);
  background:var(--accent-soft);
  border-radius:6px; padding:1px 7px;
  font-variant-numeric:tabular-nums; letter-spacing:.02em;
}

.ep-heads{min-width:0}
.ep-title{
  margin:0; font-size:17px; line-height:1.45; font-weight:700; letter-spacing:-.1px;
  word-break:break-word;
}
.ep-meta .hit{
  color:var(--accent); background:var(--accent-soft);
  border-radius:999px; padding:0 7px; font-size:11.5px;
}

.ep-meta{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:5px; font-size:12.5px; color:var(--text-3);
}
.ep-meta .dot-sep{width:3px; height:3px; border-radius:50%; background:var(--text-3); opacity:.6}

.tag{
  font-size:12px; color:var(--accent);
  background:var(--accent-soft);
  padding:1px 8px; border-radius:999px;
}
.tag:hover{text-decoration:none; filter:brightness(.96)}

.ep-acts{display:flex; gap:7px; align-items:center; padding-top:2px}

.ep-sum{
  margin:12px 0 0 66px;
  font-size:13.5px; color:var(--text-2); line-height:1.7;
  word-break:break-word;
}
.ep.has-cover .ep-sum{margin-left:0}

/* ---------- 资源行 ---------- */

.res-list{
  list-style:none; margin:14px 0 0; padding:0;
}
.res{
  display:flex; align-items:center; gap:11px;
  padding:10px 10px 10px 12px;
  border-radius:12px;
  border-top:1px dashed var(--line);
  transition:background .14s;
}
.res:first-child{border-top:0}
.res:hover{background:var(--bg-soft)}

.dot{
  width:8px; height:8px; flex:none; border-radius:50%;
  background:hsl(var(--h,250) 70% 55%);
  box-shadow:0 0 0 3px hsl(var(--h,250) 70% 55% / .14);
}

.res-main{flex:1; min-width:0}
.res-name{
  font-size:14px; font-weight:550; line-height:1.5;
  word-break:break-word;
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
}
.res-name .size{
  font-size:11.5px; font-weight:500; color:var(--text-3);
  background:var(--bg-soft); border-radius:6px; padding:1px 6px;
  border:1px solid var(--line-2);
}

.res-sub{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:2px; font-size:12px; color:var(--text-3);
}
.res-sub .plat{color:var(--text-2)}

.code{
  display:inline-flex; align-items:center; gap:5px;
  font-size:11.5px; color:var(--text-2);
  background:var(--bg-soft); border:1px dashed var(--line);
  border-radius:7px; padding:2px 7px;
  transition:.14s;
}
.code b{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.08em; color:var(--text); font-weight:600;
}
.code:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
.code:hover b{color:var(--accent)}

/* ---------- 空状态 ---------- */

.empty{
  text-align:center; padding:64px 20px 80px;
  color:var(--text-2);
  animation:rise .3s ease both;
}
.empty svg{width:56px; height:56px; color:var(--text-3); opacity:.55; margin-bottom:14px}
.empty h3{margin:0 0 6px; font-size:16px; color:var(--text)}
.empty p{margin:0 0 18px; font-size:13.5px}
.empty code{
  background:var(--bg-soft); border-radius:5px; padding:1px 6px;
  font-family:ui-monospace,monospace; font-size:12.5px; color:var(--text);
}

/* ---------- 页脚 ---------- */

.foot{
  padding:26px 2px 60px;
  font-size:12.5px; color:var(--text-3);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  border-top:1px solid var(--line);
  margin-top:8px;
}
.foot a{color:var(--text-2)}

/* ---------- 浮动件 ---------- */

.toast{
  position:fixed; left:50%; bottom:34px; transform:translate(-50%,14px);
  background:#1b1f2a; color:#fff;
  font-size:13px; padding:9px 16px; border-radius:11px;
  box-shadow:0 12px 30px -12px rgba(0,0,0,.6);
  opacity:0; pointer-events:none; transition:.22s ease; z-index:60;
  max-width:min(90vw, 520px); text-align:center;
}
[data-theme="dark"] .toast{background:#2a3040}
.toast.show{opacity:1; transform:translate(-50%,0)}

.to-top{
  position:fixed; right:20px; bottom:24px; z-index:40;
  width:40px; height:40px; border-radius:50%;
  background:var(--card); color:var(--text-2);
  border:1px solid var(--line); box-shadow:var(--shadow);
  opacity:0; pointer-events:none; transform:translateY(8px);
  transition:.2s ease;
}
.to-top.show{opacity:1; pointer-events:auto; transform:none}
.to-top:hover{color:var(--accent); border-color:var(--accent)}

/* ---------- 窄屏 ---------- */

@media (max-width:720px){
  .hero{position:static; backdrop-filter:none; -webkit-backdrop-filter:none}
  .tagline{
    max-width:none; white-space:normal;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  h1{font-size:19px}
  .search input{padding:14px 48px 14px 43px; font-size:16px}
  .hint{display:none}
  .q-clear{right:14px}
  .filters{gap:8px; padding-bottom:14px}
  /* 筛选条改成单行横滑，避免手机上占掉半屏 */
  .f-group{
    width:100%; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    padding-bottom:1px;
  }
  .f-group::-webkit-scrollbar{display:none}
  .chip{flex:none}
  .ep{padding:16px 14px 10px; border-radius:15px}
  .ep-cover{width:86px; height:49px; border-radius:10px}
  .ep-top{grid-template-columns:auto minmax(0,1fr)}
  .ep-acts{grid-column:1 / -1; justify-content:flex-end; padding-top:0}
  .ep-sum{margin-left:0}
  .ep-title{font-size:16px}
  .ep-meta{gap:9px}
  .ep-meta .dot-sep{display:none}
  .res{padding:10px 4px; gap:9px}
  .res-name{font-size:13.5px}
  .btn.open{height:27px; padding:0 9px; font-size:11.5px}
  .result-bar{padding-top:16px; flex-wrap:wrap}
  .to-top{right:14px; bottom:16px}
  .wrap{padding:0 14px}
}

/* 很窄的手机上，简介留给内容，站点头部只留标题和入口 */
@media (max-width:600px){
  .tagline{display:none}
  .logo{width:42px; height:42px; border-radius:13px; font-size:18px}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
  html{scroll-behavior:auto}
}