:root{
  --bg:#f6f7fb;
  --card:#fff;
  --text:#0f172a;
  --muted:#64748b;
  --line:#e5e7eb;
  --accent:#2563eb;
  --accent2:#1e40af;
  --radius:16px
}

/* 基础 */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:15px/1.6 system-ui,-apple-system,Segoe UI,Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif
}

/* 头部与容器 */
.header{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line)}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.nav{display:flex;align-items:center;gap:12px;padding:12px 0}
.logo{font-weight:800}

/* 按钮与输入 */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:999px;
  border:1px solid var(--line);background:#fff;cursor:pointer;
  transition:.2s
}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(15,23,42,.08)}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.input{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px;background:#fff;outline:none;transition:.2s}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.15)}

/* 顶部搜索栏（胶囊 + 图标） */
.searchbar{position:relative;min-width:320px}
.searchbar input{
  width:100%;height:44px;padding:0 16px 0 44px;
  border:1px solid var(--line);border-radius:999px;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.85));
  outline:none;transition:.2s;
  box-shadow:0 2px 8px rgba(15,23,42,.06)
}
.searchbar input::placeholder{color:#94a3b8}
.searchbar .ico{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;opacity:.65
}
.searchbar input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(37,99,235,.15),0 6px 18px rgba(37,99,235,.12)
}

/* 分类 Tabs（胶囊 + 玻璃感 + 计数） */
.tabs{position:sticky;top:56px;z-index:10;background:#fff;border-bottom:1px solid var(--line)}
.tabwrap{
  max-width:1200px;margin:0 auto;padding:8px 16px;
  display:flex;gap:10px;flex-wrap:wrap
}
.tab{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;border-radius:999px;border:1px solid var(--line);
  background:linear-gradient(180deg,#fff,rgba(246,247,251,.92));
  font-weight:700;box-shadow:0 2px 6px rgba(15,23,42,.05);transition:.2s
}
.tab i{font-style:normal;font-size:15px}
.tab .count{
  margin-left:4px;min-width:1.6em;height:1.6em;padding:0 .5em;
  display:inline-grid;place-items:center;border-radius:999px;
  font-size:.85em;font-weight:800;color:#1f2937;
  background:#eef2ff;border:1px solid #e5e7eb
}
.tab:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(15,23,42,.08)}
.tab.active{
  border-color:var(--accent);color:var(--accent2);
  background:linear-gradient(180deg,#f7fbff,#fff);
  box-shadow:0 0 0 4px rgba(37,99,235,.25),0 10px 22px rgba(37,99,235,.12)
}

/* 网格 */
.grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:16px;margin:16px auto;max-width:1200px;padding:0 16px
}
@media (max-width:1080px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:680px){.grid{grid-template-columns:1fr}}

/* ===== 卡牌 V2（上图下文 + 分类胶囊） ===== */
.card.v2{
  background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:10px; box-shadow:0 6px 18px rgba(15,23,42,.06); transition:.2s
}
.card.v2:hover{transform:translateY(-2px); box-shadow:0 12px 28px rgba(15,23,42,.10)}
.card.v2 .cover{
  width:100%; aspect-ratio: 16/9; object-fit: cover;
  border-radius:12px; display:block; background:#f3f4f6
}
.card.v2 .content{padding:10px 6px 4px}
.card.v2 .title{
  margin:8px 0 6px; font-size:16px; font-weight:800; color:#0f172a;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card.v2 .meta2{display:flex;align-items:center;gap:8px}
.cat-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px; border-radius:10px;
  font-size:12px; color:#1f2937;
  background:#f1f5ff; border:1px solid #e5e7eb
}
.cat-pill svg{width:14px;height:14px;opacity:.85}

/* 旧卡片/角标（保留备用） */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:.25s}
.card:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(15,23,42,.10)}
.thumb{position:relative;height:160px;background:linear-gradient(135deg,#e8f0ff,#eef2ff 45%,#f6f7fb);background-size:cover;background-position:center}
.badge{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.65);background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.7));backdrop-filter:saturate(1.2) blur(6px);box-shadow:0 10px 22px rgba(24,32,56,.12),inset 0 0 0 1px rgba(255,255,255,.6);font-weight:800;color:#0f172a}
.badge .dot{width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;font-size:14px;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.body{padding:12px}
.title{font-weight:800}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.chip{display:inline-flex;align-items:center;border:1px solid var(--line);padding:4px 8px;border-radius:999px}
.foot{display:flex;align-items:center;gap:10px;padding:12px;border-top:1px solid var(--line)}
.footer{margin:24px 0;text-align:center;color:var(--muted)}

/* 表单与表格 */
.form{max-width:1000px;margin:16px auto;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form label{font-weight:700}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:8px;border:1px solid var(--line);background:#fff}

/* 提示/通知 */
.notice{max-width:960px;margin:12px auto;padding:10px;border-radius:10px;background:#ecfeff;border:1px solid #bae6fd;color:#0c4a6e}
.notice.bad{background:#fff1f2;border-color:#fecdd3;color:#be123c}

/* 工具类 */
.center{display:grid;place-items:center}
.hidden{display:none!important}

/* 详情页富文本（TinyMCE 输出友好） */
.rich-content img{max-width:100%;height:auto;border-radius:8px}
.rich-content table{border-collapse:collapse;width:100%}
.rich-content table, .rich-content th, .rich-content td{border:1px solid var(--line)}
.rich-content th, .rich-content td{padding:8px}