/* inyou 资源共享 · v4 定稿版（2026-09-07）：Tokyo Night 深色 + 清淡浅色双主题，默认浅色 */

/* ---------- 主题变量 ---------- */
body.t-dark {
  --bg: #1a1b26; --hd-bg: #16161e; --zone-bg: #16161e;
  --card-bg: #1f2335; --card-border: #292e42;
  --text: #c0caf5; --dim: #9aa5ce;
  --primary: #7aa2f7; --on-primary: #1a1b26;
  --input-bg: #1f2335; --input-border: #292e42;
  --fbtn-bg: #1f2335; --fbtn-border: #292e42;
  --hover-accent: #89ddff;
  --radius: 14px; --tag-radius: 8px;
  --shadow-card: none; --shadow-hover: 0 8px 28px #7aa2f726;
  --topbtn-bg: #7aa2f7; --topbtn-text: #1a1b26;
}
body.t-light {
  --bg: #f6f7fb; --hd-bg: #ffffff; --zone-bg: #fbfcfe;
  --card-bg: #ffffff; --card-border: #e8ebf3;
  --text: #3d4560; --dim: #7a8299;
  --primary: #6c8ae4; --on-primary: #ffffff;
  --input-bg: #f2f4f9; --input-border: #e2e6f0;
  --fbtn-bg: #ffffff; --fbtn-border: #dfe3ee;
  --hover-accent: #4d7ce8;
  --radius: 14px; --tag-radius: 8px;
  --shadow-card: 0 1px 3px rgba(70,80,120,.06); --shadow-hover: 0 8px 22px rgba(70,80,120,.13);
  --topbtn-bg: #6c8ae4; --topbtn-text: #ffffff;
}

/* ---------- 基础 ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; padding-bottom: 60px; transition: background .25s, color .25s; }
.wrap { max-width: 1240px; margin: 0 auto; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 26px; scroll-margin-top: 140px; }
.count { font-size: 13px; color: var(--dim); }
.toolbar { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 20px; }
.empty { text-align: center; padding: 60px 0; color: var(--dim); }
.empty a { color: var(--primary); }

/* ---------- header ---------- */
.hd { background: var(--hd-bg); padding: 12px 24px; position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--card-border); transition: background .25s; }
.hd .wrap { flex-wrap: wrap; row-gap: 10px; }
.logo { font-size: 20px; font-weight: 800; color: var(--primary); white-space: nowrap; }
.search { flex: 1 1 220px; min-width: 180px; }
.search input { width: 100%; max-width: 420px; padding: 11px 18px; border-radius: 12px; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text); font-size: 14px; outline: none; }
.search input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); }
.theme-toggle { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--dim); font-size: 14px; cursor: pointer; white-space: nowrap; }
.theme-toggle:hover { color: var(--primary); border-color: var(--primary); }
.btn-demand { padding: 10px 20px; background: var(--primary); color: var(--on-primary); border-radius: 12px; text-decoration: none; font-size: 14px; font-weight: 700; white-space: nowrap; }
.btn-demand:hover { filter: brightness(1.12); }

/* ---------- 可收纳筛选区 ---------- */
.filter-zone { position: sticky; top: var(--hd-h, 65px); z-index: 30; background: var(--zone-bg); border-bottom: 1px solid var(--card-border); transition: transform .28s ease, opacity .28s ease; }
.fz-inner { padding: 14px 24px 14px; }
.tab-row { display: flex; gap: 10px; }
.tab-btn { padding: 10px 24px; border-radius: 12px; border: 1px solid var(--fbtn-border); background: var(--fbtn-bg); color: var(--dim); font-size: 15px; font-weight: 700; cursor: pointer; }
.tab-btn.active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.filter-line { display: flex; align-items: baseline; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.fl-label { font-size: 13px; color: var(--dim); font-weight: 700; white-space: nowrap; }
.f-btn { padding: 7px 16px; border-radius: 10px; border: 1px solid var(--fbtn-border); background: var(--fbtn-bg); color: var(--text); font-size: 13px; cursor: pointer; }
.f-btn:hover { border-color: var(--hover-accent); color: var(--hover-accent); }
.f-btn.active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); font-weight: 700; }
.f-sub.active { background: color-mix(in srgb, var(--primary) 22%, var(--card-bg)); border-color: var(--primary); color: var(--primary); }
body.filters-hidden .filter-zone { transform: translateY(-112%); opacity: 0; pointer-events: none; }
.filter-handle {
  position: fixed; left: 0; top: 42%; z-index: 45;
  padding: 14px 8px; border-radius: 0 12px 12px 0;
  background: var(--primary); color: var(--on-primary);
  border: none; cursor: pointer; font-size: 13px; font-weight: 700; writing-mode: vertical-rl; letter-spacing: 2px;
  box-shadow: 2px 0 14px color-mix(in srgb, var(--primary) 45%, transparent);
  opacity: 0; pointer-events: none; transform: translateX(-100%);
  transition: opacity .25s, transform .25s;
}
body.filters-hidden .filter-handle { opacity: 1; pointer-events: auto; transform: translateX(0); }

main { padding: 20px 24px 60px; }

/* ---------- 卡片 ---------- */
.card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 0 0 18px; overflow: hidden; transition: transform .18s, border-color .18s, box-shadow .18s; box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
.card:hover { transform: translateY(-4px); border-color: var(--primary); box-shadow: var(--shadow-hover); }
.card > *:not(.card-imgwrap) { margin: 0 18px; }
.card-imgwrap { overflow: hidden; height: 165px; }
.card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 38px; }
.card-head h3 { font-size: 16px; font-weight: 700; line-height: 1.5; text-wrap: balance; }
/* 标题与描述的区分：深色柔和光晕，浅色细腻投影 */
body.t-dark .card-head h3 { color: #eef2ff; text-shadow: 0 0 15px rgba(122, 162, 247, .45), 0 0 5px rgba(122, 162, 247, .3); }
body.t-light .card-head h3 { color: #26304e; text-shadow: 0 2.5px 5px rgba(45, 55, 95, .42), 0 0 3px rgba(45, 55, 95, .25); }
.card-head .tag { flex-shrink: 0; }
.tag { font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: var(--tag-radius); white-space: nowrap; color: var(--tag-c); background: var(--tag-b); box-shadow: 0 0 6px var(--tag-g), inset 0 0 4px var(--tag-b); }
.desc { font-size: 13px; line-height: 1.8; flex: 1; color: var(--dim); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 10px; }
.date { font-size: 12px; color: var(--dim); opacity: .7; }
.btn-link { padding: 10px 0; width: 66%; text-align: center; text-decoration: none; font-size: 14px; font-weight: 800; letter-spacing: 1px; color: var(--on-primary); background: var(--primary); border-radius: 10px; }
.btn-link:hover { filter: brightness(1.12); box-shadow: 0 0 16px color-mix(in srgb, var(--primary) 40%, transparent); }

footer { text-align: center; padding: 26px; color: var(--dim); font-size: 13px; line-height: 1.8; }
footer a { color: var(--primary); text-decoration: none; }

/* ---------- 回到顶部 ---------- */
.top-btn {
  position: fixed; right: 22px; bottom: 32px; z-index: 50;
  width: 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--topbtn-bg); color: var(--topbtn-text); font-size: 20px; font-weight: 800;
  box-shadow: 0 4px 18px color-mix(in srgb, var(--primary) 45%, transparent);
  opacity: 0; pointer-events: none; transform: translateY(12px);
  transition: opacity .25s, transform .25s;
}
.top-btn.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
.top-btn:hover { filter: brightness(1.1); }

/* ---------- 手机端 ---------- */
@media (max-width: 640px) {
  .hd { flex-wrap: wrap; gap: 10px; padding: 12px 16px; }
  .search { order: 3; flex: 1 1 100%; } .search input { max-width: none; }
  .fz-inner, main { padding-left: 16px; padding-right: 16px; }
  .grid { grid-template-columns: 1fr; gap: 20px; }
  .theme-toggle { padding: 9px 11px; }
  .top-btn { right: 14px; bottom: 24px; }
  .card-imgwrap { height: 175px; }
}


/* ---------- 海报卡（列表插入，每 20 条 1 张；橙红配色，老板 2026-09-13 定） ---------- */
.card-ad { padding: 12px; }
.card-ad .ad-frame { display: flex; flex-direction: column; height: 100%; border: 3px solid #ff7043; border-radius: 14px;
  padding: 10px 10px 0; text-decoration: none; color: inherit; background: linear-gradient(180deg, #fff6f2 0%, #ffffff 50%);
  box-shadow: 0 2px 10px rgba(255, 112, 67, .14); transition: box-shadow .2s, transform .2s; overflow: hidden; }
.card-ad .ad-frame:hover { box-shadow: 0 10px 26px rgba(255, 61, 113, .28); transform: translateY(-3px); }
.card-ad .ad-brand { display: block; font-size: 16px; font-weight: 800; letter-spacing: 2.5px; text-align: center;
  padding: 8px 0; margin: 0; border-radius: 9px 9px 0 0; color: #fff;
  background: linear-gradient(90deg, #ff7043, #ff3d71); }
.card-ad .ad-sub { font-size: 11.5px; font-weight: 600; letter-spacing: 1.2px; text-align: center; color: #e0a08c; padding-bottom: 8px; }
.card-ad .ad-rule { height: 1px; margin: 0 6px 8px; background: linear-gradient(90deg, transparent, #ffd9cd, transparent); }
.card-ad .ad-poster { flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.card-ad .ad-poster img { width: 100%; aspect-ratio: 1 / 1; max-height: 172px; object-fit: contain; display: block;
  border-radius: 8px; background: #fff; }
.card-ad .ad-fallback { font-size: 15px; font-weight: 700; text-align: center; }
.card-ad .ad-cta { font-size: 13.5px; font-weight: 800; letter-spacing: 1.5px; text-align: center; color: #fff;
  background: linear-gradient(90deg, #ff7043, #ff3d71); border-radius: 0 0 9px 9px; padding: 8px 0; margin: 8px 0 0; }
@media (max-width: 720px) {
  .card-ad .ad-poster img { max-height: 212px; }
  .card-ad .ad-brand { font-size: 13.5px; letter-spacing: 1.5px; }
}
/* 影视卡片：竖版海报按 3:4 显示（老板 2026-09-17 选 B 方案；其它分类仍是 165px 扁条） */
.card.card-film .card-imgwrap { height: auto; aspect-ratio: 3 / 4; }
@media (max-width: 640px) {
  .card.card-film .card-imgwrap { height: auto; aspect-ratio: 3 / 4; }
}

/* ==== 卡片图框统一（老板 2026-09-26 选定方案B） ==== */

/* 方案B：所有卡图框统一固定高度 400px，图不裁切（contain） */
.card-imgwrap, .card.card-film .card-imgwrap { height: 400px; aspect-ratio: auto; background: linear-gradient(180deg, rgba(122,162,247,.10), rgba(122,162,247,.03)); }
.card-img { object-fit: contain; }
@media (max-width: 640px) { .card-imgwrap, .card.card-film .card-imgwrap { height: 340px; } }

/* 文字区也统一：标题最多2行且占满2行高度，描述4行，保证每张卡等高 */
.card-head h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3em; }

.desc { min-height: 7.2em; }


/* Approved C list presentation */


/* 工具栏上的视图切换（两个小按钮，不新增按钮组） */
.view-toggle{display:inline-flex;gap:4px;background:var(--chip-bg,rgba(127,127,127,.12));border-radius:10px;padding:3px}
.view-toggle button{border:0;background:transparent;color:inherit;font-size:13px;padding:5px 10px;border-radius:8px;cursor:pointer;opacity:.7}
.view-toggle button.on{background:var(--card-bg,#fff);opacity:1;font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.12)}
body.v-list #resourceList{display:flex;grid-template-columns:none}

/* 列表公共：一条一行 */
.lv-list{display:flex;flex-direction:column;gap:8px}
body[data-density="a"] .lv-title,body[data-density="b"] .lv-title{white-space:nowrap}
.lv-row{display:grid;max-width:100%;min-width:0;align-items:center;gap:12px;background:var(--card-bg,#fff);border:1px solid var(--line,rgba(127,127,127,.15));border-radius:12px;padding:10px 14px;text-decoration:none;color:inherit;min-width:0}
.lv-row:hover{border-color:var(--accent,#6c8ae4)}
.lv-title{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.lv-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;opacity:.85}
/* 「打开资源」做成像样的按钮（老板 2026-09-29：原来只有四个字、没有辨识度） */
.lv-open{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--accent-soft,rgba(108,138,228,.14));color:var(--accent,#6c8ae4);
  border:1px solid var(--accent,#6c8ae4);border-radius:999px;
  padding:10px 18px;font-size:13.5px;font-weight:600;line-height:1;white-space:nowrap;
  transition:background .15s ease,color .15s ease,transform .1s ease}
.lv-open:hover{background:var(--accent,#6c8ae4);color:#fff}
.lv-open:active{transform:scale(.97)}
.lv-thumb{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block}

/* 方案 A：紧凑（缩略图 56×56 + 标题一行 + 元信息一行） */
body[data-density="a"] .lv-row{grid-template-columns:56px minmax(0,1fr) auto}
body[data-density="a"] .lv-thumbwrap{width:56px;height:56px;border-radius:8px;overflow:hidden;background:linear-gradient(135deg,rgba(127,127,127,.18),rgba(127,127,127,.06))}
body[data-density="a"] .lv-main{display:flex;flex-direction:column;gap:3px;min-width:0}
body[data-density="a"] .lv-desc{margin:0;font-size:13px;opacity:.8;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
body[data-density="a"] .lv-row{padding:8px 12px}

/* 方案 B：超紧凑（无图、单行、信息密度最高） */
body[data-density="b"] .lv-row{display:flex;align-items:center;gap:10px;padding:7px 12px;border-radius:10px}
body[data-density="b"] .lv-thumbwrap{display:none}
/* B 档：右侧三块给固定宽度 → 各行标签/日期/按钮成列对齐（vision 指出参差 255px） */
body[data-density="b"] .lv-main{display:flex;flex:1 1 auto;align-items:center;gap:12px;min-width:0;overflow:hidden}
body[data-density="b"] .lv-meta{flex:0 0 auto;width:200px;justify-content:flex-end;align-items:center}
body[data-density="b"] .lv-meta .tag{width:104px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body[data-density="b"] .lv-meta .lv-date{width:80px;text-align:right}
body[data-density="b"] .lv-title{display:block;flex:1 1 auto;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}
body[data-density="b"] .lv-open{flex:0 0 auto}
body[data-density="b"] .lv-row{grid-template-columns:none}
body[data-density="b"] .lv-list{gap:5px}
body[data-density="b"] .lv-desc{display:none}

/* 方案 C：舒适（缩略图 96×72 + 标题 2 行 + 描述 2 行） */
body[data-density="c"] .lv-row{grid-template-columns:96px minmax(0,1fr) auto;align-items:start;gap:14px}
body[data-density="c"] .lv-thumbwrap{width:96px;height:72px;border-radius:8px;overflow:hidden;background:linear-gradient(135deg,rgba(127,127,127,.18),rgba(127,127,127,.06))}
body[data-density="c"] .lv-main{display:flex;flex-direction:column;gap:5px;min-width:0}
body[data-density="c"] .lv-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
body[data-density="c"] .lv-meta .lv-date{min-width:76px}
body[data-density="c"] .lv-desc{margin:0;font-size:13px;opacity:.85;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* 手机：缩略图收窄，元信息换行不挤压标题 */
@media (max-width:640px){
  body[data-density="a"] .lv-row{grid-template-columns:40px minmax(0,1fr) 68px;padding:7px 10px}
  body[data-density="a"] .lv-thumbwrap{width:40px;height:40px}
  body[data-density="a"] .lv-desc{display:none}   /* 手机：A 档只留一行信息，保持密度 */
  body[data-density="c"] .lv-row{grid-template-columns:56px minmax(0,1fr) auto;padding:9px 11px;gap:10px}
  .lv-open{padding:10px 14px;font-size:12.5px;min-height:36px}
  body[data-density="c"] .lv-thumbwrap{width:56px;height:44px}
  body[data-density="c"] .lv-meta .lv-date{min-width:76px}
body[data-density="c"] .lv-desc{-webkit-line-clamp:1}
  body[data-density="b"] .lv-main{flex-direction:row;gap:8px}
  body[data-density="b"] .lv-meta .lv-date{display:none}   /* 手机：日期让位给标题，仍保持单行 */
  body[data-density="b"] .lv-row{padding:6px 10px}
}

/* Long subcategory tags must remain inside the text column on narrow phones. */
.lv-meta .tag{max-width:100%;overflow:hidden;text-overflow:ellipsis}


/* ── 2026-11-02 D1 列表行（老板选定）：缩略图方形 96 + 左侧分类色条 + 标题两行 ── */
body[data-density="c"] .lv-row { grid-template-columns: 96px minmax(0,1fr) auto; align-items: start;
  padding: 12px 16px 12px 13px; border-left: 4px solid var(--tag-c, #6c8ae4); }
body[data-density="c"] .lv-thumbwrap { width: 96px; height: 96px; border-radius: 10px; }
body[data-density="c"] .lv-title { font-size: 15px; font-weight: 600; line-height: 1.35; white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body[data-density="c"] .lv-meta { gap: 10px; font-size: 12px; opacity: .62; }
body[data-density="c"] .lv-desc { font-size: 13px; line-height: 1.55; opacity: .74; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body[data-density="c"] .lv-open { padding: 9px 16px; font-size: 13px; border-radius: 10px; margin-top: 2px; }
.lv-ico { width: 18px; height: 18px; flex: 0 0 18px; margin-right: 6px; color: currentColor; opacity: .85; }
.lv-open { display: inline-flex; align-items: center; }
@media (max-width: 640px) {
  body[data-density="c"] .lv-row { grid-template-columns: 72px minmax(0,1fr) auto; padding: 10px 12px 10px 10px; }
  body[data-density="c"] .lv-thumbwrap { width: 72px; height: 72px; border-radius: 8px; }
  body[data-density="c"] .lv-title { font-size: 14px; }
  body[data-density="c"] .lv-desc { -webkit-line-clamp: 2; }
}