/* 追剧资源搜索 — 视觉样式 */

:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --ink: #14181f;
  --ink-2: #475061;
  --dim: #8d96a5;
  --line: #e6eaf0;
  --line-2: #eef1f6;
  --brand: #3b6ef5;
  --brand-ink: #1f4bd0;
  --brand-soft: #eef3ff;
  --ok: #1f9d55;
  --warn: #c9761b;
  --bad: #d1493c;
  --unknown: #b3bac6;
  --shadow-s: 0 1px 2px rgba(20, 24, 31, .05);
  --shadow-m: 0 1px 2px rgba(20, 24, 31, .05), 0 6px 18px rgba(20, 24, 31, .05);
  --r-m: 12px;
  --r-l: 16px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.6 -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC",
        "Hiragino Sans GB", "Source Han Sans SC", sans-serif;
  text-rendering: optimizeLegibility;
}

.wrap { max-width: 1000px; margin: 0 auto; padding: 0 20px; }

b { font-weight: 600; }

/* ---------------- header ---------------- */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 26px 0 20px;
}
.topbar h1 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 21px;
  font-weight: 650;
  letter-spacing: .2px;
}
.topbar h1::before {
  content: "";
  width: 4px;
  height: 17px;
  border-radius: 2px;
  background: var(--brand);
}
.ver {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 2px 8px;
}
.lede { margin: 7px 0 0; color: var(--dim); font-size: 13.5px; }

/* 数据新鲜度：一眼看出今天有没有自动更新 */
.fresh {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin: 9px 0 0;
  font-size: 12.5px;
}
.fresh .dot { width: 8px; height: 8px; }
.fresh.ok { color: var(--ok); }
.fresh.stale { color: var(--bad); }
.fresh-hint { color: var(--dim); font-size: 12px; }
.fresh-hint::before { content: "· "; }

/* ---------------- search ---------------- */
main { padding: 18px 0 44px; }

.searchbar {
  position: sticky;
  top: 12px;
  z-index: 20;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-s);
  padding: 14px;
  margin-bottom: 16px;
}
.field { display: flex; gap: 9px; }
/* 回主页图标按钮 */
.homebtn {
  flex: 0 0 auto;
  width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface-2);
  color: var(--ink-2);
  cursor: pointer;
  transition: color .16s, border-color .16s, background .16s;
}
.homebtn svg { width: 20px; height: 20px; fill: currentColor; }
.homebtn:hover { color: var(--brand-ink); border-color: var(--brand); background: var(--brand-soft); }
.homebtn:active { transform: translateY(1px); }
.homebtn[hidden] { display: none; }
.field input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--surface-2);
  color: var(--ink);
  transition: border-color .16s, background .16s, box-shadow .16s;
}
.field input::placeholder { color: var(--unknown); }
.field input:focus {
  outline: none;
  border-color: var(--brand);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(59, 110, 245, .12);
}
.field .go {
  flex: 0 0 auto;
  padding: 0 22px;
  border: 0;
  border-radius: var(--r-m);
  background: var(--brand);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .16s;
}
.field .go:hover { background: var(--brand-ink); }
.field .go[disabled] { background: #b7c7f0; cursor: progress; }

.examples { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.examples .hint { color: var(--dim); font-size: 12.5px; }
.chip {
  font: inherit;
  font-size: 12.5px;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 2px 11px;
  cursor: pointer;
  transition: border-color .16s, color .16s, background .16s;
}
.chip:hover { border-color: var(--brand); color: var(--brand-ink); background: var(--brand-soft); }

/* ---------------- tabs & stats ---------------- */
.statline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.tabs { display: flex; gap: 2px; background: #edf0f5; border-radius: 10px; padding: 3px; }
.tab {
  font: inherit;
  font-size: 13.5px;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  padding: 6px 13px;
  border-radius: 8px;
  cursor: pointer;
}
.tab.active {
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  box-shadow: var(--shadow-s);
}
.meta { font-size: 12.5px; color: var(--dim); }
.meta b { color: var(--ink-2); font-weight: 600; }

.panel { display: none; }
.panel.active { display: block; }

.sources { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
.srcbadge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--dim);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 2px 9px 2px 7px;
  cursor: help;
}
.srcbadge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--unknown);
}
.srcbadge.ok { color: var(--ink-2); }
.srcbadge.ok::before { background: var(--ok); }
.srcbadge.bad { color: var(--bad); border-color: #f0d2ce; background: #fdf6f5; }
.srcbadge.bad::before { background: var(--bad); }

/* ---------------- 结果卡片 ---------------- */
.list { display: flex; flex-direction: column; gap: 10px; }

.card {
  display: flex;
  /* 默认 stretch 会把海报拉到整卡高度 */
  align-items: flex-start;
  gap: 16px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-s);
  transition: box-shadow .16s, border-color .16s;
}
.card:hover { box-shadow: var(--shadow-m); border-color: #dbe2ee; }

/* 海报：宽度与比例固定，图片绝对定位脱离文档流。
   如果写成 height:100%，在高度不定的 flex 子项上会退化成图片的原始高度，
   一张竖版海报就能把整张卡片撑到几千像素高。 */
.cover {
  position: relative;
  flex: 0 0 92px;
  width: 92px;
  aspect-ratio: 3 / 4;
  min-height: 0;
  overflow: hidden;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c2cad6;
  font-size: 20px;
  line-height: 1;
}
/* 底层占位：远程海报挂掉（证书失效 / 防盗链）时 img 会被移除，露出这个标记 */
.cover::before {
  content: "🎬";
  opacity: .3;
}
/* 图片绝对定位：既保证按容器裁切，也不会把父盒高度撑成图片原始尺寸 */
.cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.body { flex: 1; min-width: 0; }

.title {
  margin: 0 0 6px;
  font-size: 16.5px;
  font-weight: 650;
  line-height: 1.35;
  /* 中文本身可任意断行，break-all 反而会把英文片名拆成单字 */
  overflow-wrap: break-word;
}
.title .flag {
  font-size: 11px;
  font-weight: 500;
  color: var(--dim);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
  vertical-align: 2px;
  margin-left: 6px;
}
.tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.tag {
  font-size: 12px;
  color: var(--ink-2);
  background: var(--surface-2);
  border-radius: 5px;
  padding: 1px 7px;
}
.tag.hl { color: var(--ok); background: #eaf7ef; }
.sub { margin: 0 0 9px; font-size: 12.5px; color: var(--dim); overflow-wrap: break-word; }

.srcline { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.srcline .lbl { font-size: 12px; color: var(--dim); margin-right: 1px; }
.srcbtn {
  font: inherit;
  font-size: 12px;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 2px 10px;
  cursor: pointer;
  transition: border-color .14s, color .14s, background .14s;
}
.srcbtn:hover { border-color: var(--brand); color: var(--brand-ink); background: var(--brand-soft); }
.srcbtn.on { background: var(--brand); border-color: var(--brand); color: #fff; }
a.openlink { font-size: 12px; color: var(--dim); text-decoration: none; padding-left: 2px; }
a.openlink:hover { color: var(--brand-ink); }

.lines {
  margin-top: 12px;
  padding: 11px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-m);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.line .lname { font-size: 11.5px; color: var(--dim); margin-bottom: 6px; }
.eps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
  gap: 5px;
  max-height: 158px;
  overflow: auto;
}
.eps a {
  font-size: 12px;
  text-align: center;
  padding: 4px 6px;
  border-radius: 6px;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eps a:hover { color: var(--brand-ink); border-color: var(--brand); background: var(--brand-soft); }
.loading { font-size: 12.5px; color: var(--dim); }

/* ---------------- 网盘查询 ---------------- */
.cloudbar { font-size: 12.5px; color: var(--dim); margin-bottom: 12px; }
.cloudbar b { color: var(--ink-2); }
.loadnote::after {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-left: 6px;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--brand);
  vertical-align: 0;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.cgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}
.clist { display: flex; flex-direction: column; gap: 6px; }
.csite {
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-s);
}
.csite .chead { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.csite .chead b { font-size: 14px; }
.csite .ct {
  font-size: 11.5px;
  color: var(--brand-ink);
  background: var(--brand-soft);
  border-radius: 5px;
  padding: 1px 7px;
}
.csite .cnum { margin-left: auto; font-size: 12px; color: var(--ok); }
.clouditems {
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* .csite 是 flex 列容器，子项默认会被压到比 max-height 还小，
     于是条目互相重叠而不是框内滚动；必须显式允许收缩并放开最小高度 */
  flex: 0 1 auto;
  min-height: 0;
  max-height: 190px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}
/* 条目不许被 flex 压扁：压扁后 12 条会挤成 12 条细缝而不是框内滚动 */
.clouditems > * {
  flex: 0 0 auto;
}
.clouditem {
  font-size: 12.5px;
  color: var(--ink-2);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--surface-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clouditem:hover { color: var(--brand-ink); background: var(--brand-soft); }
.csite.none { background: var(--surface-2); box-shadow: none; }
.csite.none .chead { margin-bottom: 4px; }
.creason { font-size: 12px; color: var(--dim); }
.creason a { color: var(--brand-ink); text-decoration: none; white-space: nowrap; }
.creason a:hover { text-decoration: underline; }

/* ---------------- 直达链接 ---------------- */
.grouphead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}
.grouphead::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.grouphead:first-child { margin-top: 0; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 9px;
}
.deep {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-s);
  color: inherit;
  text-decoration: none;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.deep:hover { border-color: var(--brand); box-shadow: var(--shadow-m); transform: translateY(-1px); }
.deep b { display: flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 600; }
.deep span { font-size: 12px; color: var(--dim); }
.deep .cat { align-self: flex-start; font-size: 11px; color: var(--brand-ink); }

/* 状态点 */
.dot {
  flex: 0 0 auto;
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--unknown);
  vertical-align: 1px;
}
.dot.s-ok { background: var(--ok); }
.dot.s-restricted { background: var(--warn); }
.dot.s-bad { background: var(--bad); }

/* ---------------- 资源站目录 ---------------- */
.filters { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 14px; }
.fbtn {
  font: inherit;
  font-size: 12.5px;
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 3px 12px;
  cursor: pointer;
}
.fbtn.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.fbtn .dim { color: var(--dim); }
.fbtn.on .dim { color: rgba(255, 255, 255, .6); }

.row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-s);
  font-size: 13.5px;
}
.row:hover { border-color: #dbe2ee; }
.row .nm { font-weight: 600; flex: 0 0 auto; max-width: 190px; }
.row .ct {
  flex: 0 0 auto;
  font-size: 11.5px;
  color: var(--brand-ink);
  background: var(--brand-soft);
  border-radius: 5px;
  padding: 1px 7px;
}
.row .tg {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row .stars { color: #e0a12a; font-size: 11.5px; letter-spacing: 1px; }
.row .links { display: flex; gap: 10px; }
.row a { font-size: 12px; color: var(--brand-ink); text-decoration: none; }
.row a:hover { text-decoration: underline; }

/* ---------------- 分页 / 空态 / 载入 ---------------- */
.pager { display: flex; gap: 9px; align-items: center; margin-bottom: 12px; }
.pager button {
  font: inherit;
  font-size: 12.5px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  border-radius: 8px;
  padding: 4px 13px;
  cursor: pointer;
}
.pager button:hover:not(:disabled) { border-color: var(--brand); color: var(--brand-ink); }
.pager button:disabled { opacity: .45; cursor: default; }
#pagemark { font-size: 12.5px; color: var(--dim); }

.empty {
  padding: 34px 22px;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  color: var(--ink-2);
}
.empty b { display: block; margin-bottom: 6px; font-size: 15.5px; color: var(--ink); }
.empty .tip { margin-top: 10px; font-size: 12px; color: var(--dim); }

.skel {
  padding: 15px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  font-size: 13.5px;
  color: var(--dim);
}
.skel::after {
  content: "";
  display: block;
  height: 7px;
  margin-top: 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, #eef1f6 25%, #e2e8f1 50%, #eef1f6 75%);
  background-size: 300% 100%;
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer { to { background-position: -300% 0; } }

.placeholder { margin-top: 2px; }
.ph-card {
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-s);
}
.ph-card h2 { margin: 0 0 12px; font-size: 15.5px; }
.ph-card ol { margin: 0; padding-left: 20px; color: var(--ink-2); font-size: 13.5px; }
.ph-card li { margin-bottom: 7px; }
.ph-card .note {
  margin: 15px 0 0;
  padding-top: 13px;
  border-top: 1px solid var(--line-2);
  font-size: 12px;
  color: var(--dim);
}
code {
  font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
}

/* ---------------- 猜你想搜 / 服务端摘要 ---------------- */
.hot, .ssr {
  margin-bottom: 16px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--shadow-s);
}
.hot h2, .ssr h2 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 12px;
  font-size: 15.5px;
}
.hotsub, .ssrnote { font-size: 12px; font-weight: 400; color: var(--dim); }
.ssrnote { margin: -6px 0 10px; }
.hotgroup { margin-bottom: 14px; }
.hotgroup:last-child { margin-bottom: 0; }
.grouptitle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}
.grouptitle::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.hotgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(122px, 1fr));
  gap: 10px;
}
.hotcard {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.hcover {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
}
/* 占位标记：没有图、或图片加载失败时露出来；加载成功后被 img 盖住 */
.hcover::after {
  content: "🎬";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  opacity: .28;
}
.hcover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}
.hotcard b {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.hotcard:hover b { color: var(--brand-ink); }
.hotmeta { font-size: 11.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hotnote { margin: 12px 0 0; font-size: 12px; color: var(--dim); }
.ssrlist { margin: 0; padding-left: 20px; font-size: 13.5px; }
.ssrlist li { margin-bottom: 4px; }
.ssrlist a { color: var(--brand-ink); text-decoration: none; }
.ssrlist span { color: var(--dim); font-size: 12px; }
/* 交互式结果接管后，服务端摘要折叠为一行说明，不重复占屏 */
.ssr-done { padding: 10px 14px; }
.ssr-done h2, .ssr-done .ssrlist { display: none; }
.ssr-done .ssrnote { margin: 0; }

/* ---------------- footer ---------------- */
.foot { padding: 18px 0 30px; color: var(--dim); font-size: 12.5px; }
.foot p { margin: 0 0 4px; }
.foot .dim { font-size: 12px; color: var(--unknown); }

/* ---------------- 窄屏 ---------------- */
@media (max-width: 640px) {
  .topbar { padding: 20px 0 16px; }
  .topbar h1 { font-size: 19px; }
  main { padding-top: 14px; }
  .searchbar { position: static; padding: 12px; }
  .field { flex-wrap: wrap; }
  /* 窄屏下让"回主页 + 输入框"占一行，搜索按钮换到下一行整宽 */
  .field input { flex: 1 1 auto; }
  .field .go { flex: 1 1 100%; padding: 10px; }
  .card { padding: 12px; gap: 12px; }
  .cover { flex-basis: 74px; width: 74px; }
  .statline { flex-direction: column; align-items: flex-start; }
  .row { flex-wrap: wrap; font-size: 13px; }
  .row .nm { max-width: none; }
  .row .tg { flex-basis: 100%; order: 5; }
}