/* 前台检索页样式 —— 沿用后台同一套设计语言（同样的配色变量），
   但布局是「搜索结果卡片列表」，不是后台的表格密集型界面。 */
:root {
  --bg:#f2f4f7; --card:#fff; --line:#e4e7ec; --text:#1f2328; --muted:#667085;
  --brand:#2563eb; --brand-dk:#1d4ed8; --ink:#101828;
  --ok:#16a34a; --ok-bg:#ecfdf3; --warn:#d97706; --warn-bg:#fffaeb;
  --danger:#dc2626; --danger-bg:#fef3f2; --info-bg:#eff8ff;
  --p1:#dc2626; --p2:#ea580c; --p3:#ca8a04; --p4:#16a34a;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text);
  font:14px/1.6 -apple-system,"Segoe UI","Microsoft YaHei",sans-serif; }
a { color:var(--brand); text-decoration:none; }
a:hover { text-decoration:underline; }
code, .mono { font-family:ui-monospace,Consolas,"Courier New",monospace; font-size:12.5px; }
.muted { color:var(--muted); }
.small { font-size:12.5px; }

.wrap { max-width:1080px; margin:0 auto; padding:0 18px 70px; }

/* ---------------- 顶部 ---------------- */
header.top { background:#fff; border-bottom:1px solid var(--line); }
header.top .inner { max-width:1080px; margin:0 auto; padding:14px 18px 16px; }
header.top h1 { font-size:19px; margin:0 0 2px; letter-spacing:.2px; }
header.top .sub { color:var(--muted); font-size:12.5px; }

/* ---------------- 搜索框 ---------------- */
.searchbar { display:flex; gap:8px; margin-top:14px; }
.searchbar input[type=text] {
  flex:1; padding:11px 14px; font-size:15px; border:1px solid var(--line);
  border-radius:9px; background:#fff; color:var(--text); outline:none;
}
.searchbar input[type=text]:focus { border-color:var(--brand); box-shadow:0 0 0 3px #dbeafe; }
.searchbar button {
  padding:0 22px; font-size:14.5px; font-weight:600; border:0; border-radius:9px;
  background:var(--brand); color:#fff; cursor:pointer;
}
.searchbar button:hover { background:var(--brand-dk); }

.examples { margin-top:9px; font-size:12.5px; color:var(--muted); }
.examples a { margin-right:10px; }

/* ---------------- 筛选 ---------------- */
.filters { background:#fff; border:1px solid var(--line); border-radius:9px;
  padding:12px 14px; margin-top:14px; }
.frow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:5px 0; }
.frow > label.k { font-size:12.5px; color:var(--muted); min-width:64px; }
.chip { display:inline-flex; align-items:center; gap:5px; padding:4px 10px;
  border:1px solid var(--line); border-radius:20px; font-size:12.5px;
  background:#fff; color:var(--text); cursor:pointer; user-select:none; }
.chip:hover { border-color:var(--brand); color:var(--brand-dk); }
.chip.on { background:var(--brand); border-color:var(--brand); color:#fff; }
.chip input { display:none; }
.filter-actions { display:flex; gap:8px; align-items:center;
  border-top:1px solid var(--line); margin-top:8px; padding-top:10px; }
.btn { display:inline-block; padding:6px 14px; border-radius:7px; font-size:13px;
  border:1px solid var(--line); background:#fff; color:var(--text); cursor:pointer; }
.btn:hover { border-color:var(--brand); color:var(--brand-dk); text-decoration:none; }
.btn.primary { background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600; }
.btn.primary:hover { background:var(--brand-dk); color:#fff; }
select { padding:6px 10px; border:1px solid var(--line); border-radius:7px;
  background:#fff; font-size:13px; color:var(--text); }

/* ---------------- 结果 ---------------- */
.resulthead { display:flex; align-items:baseline; gap:10px;
  margin:18px 2px 10px; flex-wrap:wrap; }
.resulthead .n { font-size:15px; font-weight:600; }
.resulthead .t { margin-left:auto; font-size:12.5px; color:var(--muted); }

.note { background:var(--warn-bg); border:1px solid #fde68a; color:#92400e;
  padding:9px 13px; border-radius:8px; font-size:13px; margin-bottom:12px; }

/* 数据口径说明：中科院/新锐不合并、2024 无数据、IF 止于 2020 —— 这些限制
   必须显式告知用户，不能让人误以为拿到的分区是"最新最全"的 */
.ednote { margin-top:10px; padding:9px 13px; border-radius:8px; font-size:12.5px;
  background:var(--info-bg); border:1px solid #bfdbfe; color:#1e40af; }

.item { background:#fff; border:1px solid var(--line); border-radius:9px;
  padding:14px 16px; margin-bottom:10px; }
.item:hover { border-color:#c7d2fe; }
.item .l1 { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.item .name { font-size:15.5px; font-weight:600; color:var(--ink); }
.item .name mark { background:#fef08a; color:inherit; padding:0 1px; border-radius:2px; }
.item .short { font-size:12.5px; color:var(--muted); }
.item .l2 { display:flex; gap:14px; flex-wrap:wrap; margin-top:8px;
  font-size:13px; color:#344054; }
.item .l3 { margin-top:8px; font-size:12.5px; color:var(--muted); }
.item .acts { margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }

/* S1：投稿信息行（版面费 / 周期 / 出版商）—— 与分区行分开，
   让用户一眼分清「评价数据」和「投稿实用数据」 */
.item .sub { margin-top:6px; padding-top:7px; border-top:1px dashed var(--line);
  font-size:12.5px; }
.item .sub b { color:var(--ink); }
.item .sub .free { color:var(--ok); }

.badge { display:inline-block; padding:1px 8px; border-radius:20px;
  font-size:12px; font-weight:600; line-height:1.7; }
.badge.p1 { background:#fee2e2; color:var(--p1); }
.badge.p2 { background:#ffedd5; color:var(--p2); }
.badge.p3 { background:#fef9c3; color:#a16207; }
.badge.p4 { background:#dcfce7; color:var(--p4); }
.badge.pn { background:#f1f5f9; color:var(--muted); }
.badge.top { background:#ede9fe; color:#6d28d9; }
.badge.oa { background:var(--ok-bg); color:var(--ok); }
.badge.warn { background:var(--danger-bg); color:var(--danger); }
.badge.xr { background:var(--info-bg); color:#1d4ed8; }
.badge.soft { background:#f1f5f9; color:var(--muted); font-weight:400; }

/* JCR 分区（Q1–Q4）：刻意用**方形 + 不同色系**，与中科院分区的圆形色块区分开。
   两套口径长得很像很容易被当成一回事，视觉上必须能一眼分开。 */
.qbadge { display:inline-block; padding:1px 7px; border-radius:4px;
  font-size:12px; font-weight:700; letter-spacing:.3px; }
.qbadge.q1 { background:#dbeafe; color:#1d4ed8; }
.qbadge.q2 { background:#e0e7ff; color:#4338ca; }
.qbadge.q3 { background:#ede9fe; color:#6d28d9; }
.qbadge.q4 { background:#f3e8ff; color:#7e22ce; }

/* JCR 作为权威口径时的大号展示（详情页「分区结论」最上方） */
.jcr-verdict { align-items:flex-start; }
.jcr-main { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.qbig { display:inline-block; padding:8px 18px; border-radius:9px;
  font-size:24px; font-weight:800; letter-spacing:.5px; }
.qbig.q1 { background:#dbeafe; color:#1d4ed8; }
.qbig.q2 { background:#e0e7ff; color:#4338ca; }
.qbig.q3 { background:#ede9fe; color:#6d28d9; }
.qbig.q4 { background:#f3e8ff; color:#7e22ce; }

/* ---------------- 三套口径并列（详情页「分区结论」） ----------------
   中科院 / 新锐 / JCR 并列展示：三套口径不可换算，所以视觉上是**三格并列**，
   而不是一个大结论 —— 布局本身就在表达"它们是三件事"。 */
.plan-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px;
  margin-top:14px; }
@media (max-width:820px) { .plan-grid { grid-template-columns:1fr; } }
.plan-cell { border:1px solid var(--line); border-radius:9px; padding:12px 14px;
  background:#fcfcfd; }
.plan-head { font-size:13.5px; font-weight:600; color:var(--ink);
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  padding-bottom:8px; border-bottom:1px dashed var(--line); }
.plan-body { margin-top:10px; display:flex; align-items:center; gap:12px;
  flex-wrap:wrap; }
/* 并列格里的分区色块小一号，避免三格都很大显得吵 */
.plan-body .bigpart { font-size:19px; padding:7px 13px; }
.plan-body .qbig { font-size:19px; padding:7px 13px; }

.empty { background:#fff; border:1px solid var(--line); border-radius:9px;
  padding:40px 20px; text-align:center; color:var(--muted); }
.empty .big { font-size:15px; color:var(--text); margin-bottom:6px; }

/* ---------------- 分页 ---------------- */
.pager { display:flex; gap:6px; align-items:center; justify-content:center;
  margin-top:22px; flex-wrap:wrap; }
.pager a, .pager span { padding:6px 12px; border:1px solid var(--line);
  border-radius:7px; background:#fff; font-size:13px; }
.pager .cur { background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600; }
.pager .off { color:#cbd5e1; }

footer { margin-top:26px; padding-top:14px; border-top:1px solid var(--line);
  font-size:12px; color:var(--muted); }
footer .lic { margin-top:5px; }

/* ---------------- 主导航（所有公开页面共用，见 templates/public/base.html） ----------------
   粘顶：查询页动辄几百行结果，滚到中间想换个功能不用回到顶部。 */
nav.nav { background:#fff; border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:30; }
nav.nav .inner { max-width:1080px; margin:0 auto; padding:0 18px; height:54px;
  display:flex; align-items:center; gap:20px; }
nav.nav .brand { font-size:15px; font-weight:700; color:var(--ink); letter-spacing:.3px; }
nav.nav .brand:hover { color:var(--brand-dk); text-decoration:none; }
nav.nav .links { display:flex; gap:3px; flex-wrap:wrap; }
nav.nav .links a { padding:6px 11px; border-radius:7px; font-size:13.5px; color:#344054; }
nav.nav .links a:hover { background:var(--bg); text-decoration:none; }
nav.nav .links a.on { background:var(--info-bg); color:var(--brand-dk); font-weight:600; }
nav.nav .me { margin-left:auto; display:flex; align-items:center; gap:8px; }
nav.nav .me .who { font-size:13px; color:var(--muted); max-width:140px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
nav.nav form.inline { display:inline; margin:0; }
.btn.small { padding:4px 10px; font-size:12.5px; }
@media (max-width:720px) {
  nav.nav .inner { height:auto; flex-wrap:wrap; padding:8px 18px; gap:8px; }
  nav.nav .me { margin-left:0; }
}

/* ---------------- 卡片式小节（登录、投稿经验表单等） ---------------- */
.card { background:#fff; border:1px solid var(--line); border-radius:9px;
  padding:20px 22px; margin-top:16px; }
.card h2 { font-size:16px; margin:0 0 4px; }
.card .hint { color:var(--muted); font-size:12.5px; margin-bottom:14px; }
.field { margin-bottom:12px; }
.field label { display:block; font-size:12.5px; color:var(--muted); margin-bottom:4px; }
.field input[type=text], .field input[type=password], .field input[type=email],
.field input[type=number], .field input[type=month], .field select, .field textarea {
  width:100%; padding:9px 12px; border:1px solid var(--line); border-radius:8px;
  font-size:14px; font-family:inherit; background:#fff; color:var(--text); outline:none; }
.field textarea { min-height:120px; resize:vertical; line-height:1.7; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color:var(--brand); box-shadow:0 0 0 3px #dbeafe; }
.field .tip { font-size:12px; color:var(--muted); margin-top:4px; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
@media (max-width:720px) { .grid2, .grid3 { grid-template-columns:1fr; } }
.flash { padding:9px 13px; border-radius:8px; font-size:13px; margin-bottom:14px; }
.flash.err { background:var(--danger-bg); border:1px solid #fecaca; color:#991b1b; }
.flash.ok { background:var(--ok-bg); border:1px solid #bbf7d0; color:#166534; }

/* ---------------- 投稿经验 ---------------- */
.exp { background:#fff; border:1px solid var(--line); border-radius:9px;
  padding:14px 16px; margin-bottom:10px; }
.exp.mine { border-color:#c7d2fe; background:#fbfcff; }
.exp .head { display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font-size:12.5px; color:var(--muted); }
.exp .nick { font-weight:600; color:var(--ink); font-size:13px; }
.exp .body { margin-top:9px; font-size:13.5px; color:#344054; white-space:pre-wrap; }
.exp .meta { margin-top:9px; display:flex; gap:14px; flex-wrap:wrap;
  font-size:12.5px; color:var(--muted); }
.oc { display:inline-block; padding:1px 8px; border-radius:20px; font-size:12px;
  font-weight:600; }
.oc.accepted { background:#dcfce7; color:#15803d; }
.oc.major_revision { background:#fef9c3; color:#a16207; }
.oc.minor_revision { background:#e0f2fe; color:#0369a1; }
.oc.rejected { background:#fee2e2; color:#b91c1c; }
.oc.withdrawn { background:#f1f5f9; color:var(--muted); }
.oc.pending { background:#ede9fe; color:#6d28d9; }
.oc.warn { background:var(--warn-bg); color:#b45309; }
/* 「审核中」用虚线边框，和已发布内容在视觉上明确区分 */
.exp.pending-item { border-style:dashed; }

.statline { display:flex; gap:18px; flex-wrap:wrap; margin:14px 2px 12px;
  font-size:13px; color:#344054; }
.statline b { color:var(--ink); }

/* ---------------- 详情页：版本条 / 分区结论 / 表格 / 走势 ---------------- */
.yearbar { display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  background:#fff; border:1px solid var(--line); border-radius:9px;
  padding:9px 13px; margin-top:14px; }
.yearbar .lbl { font-size:12.5px; color:var(--muted); margin-right:4px; }
.yearbar a { padding:3px 10px; border-radius:20px; font-size:12.5px;
  border:1px solid var(--line); color:#344054; }
.yearbar a:hover { border-color:var(--brand); color:var(--brand-dk); text-decoration:none; }
.yearbar a.on { background:var(--brand); border-color:var(--brand); color:#fff; font-weight:600; }

.verdict { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.bigpart { font-size:26px; font-weight:700; line-height:1.1; padding:10px 18px;
  border-radius:10px; white-space:nowrap; }
.bigpart.p1 { background:#fee2e2; color:var(--p1); }
.bigpart.p2 { background:#ffedd5; color:var(--p2); }
.bigpart.p3 { background:#fef9c3; color:#a16207; }
.bigpart.p4 { background:#dcfce7; color:var(--p4); }

table.data { width:100%; border-collapse:collapse; font-size:13.5px; }
table.data th, table.data td { padding:8px 10px; border-bottom:1px solid var(--line);
  text-align:left; vertical-align:top; }
table.data thead th { font-size:12.5px; color:var(--muted); font-weight:600;
  background:#fafbfc; }
table.data tbody tr:hover { background:#fafbfc; }

table.kvtable { width:100%; border-collapse:collapse; font-size:13.5px; }
table.kvtable th { width:132px; text-align:left; font-weight:400;
  color:var(--muted); font-size:12.5px; padding:9px 10px 9px 0;
  border-bottom:1px solid var(--line); vertical-align:top; }
table.kvtable td { padding:9px 0; border-bottom:1px solid var(--line);
  vertical-align:top; }
table.kvtable tr:last-child th, table.kvtable tr:last-child td { border-bottom:0; }
.kvtable .free { color:var(--ok); }

.trend { display:flex; gap:8px; flex-wrap:wrap; }
.trend .cell { min-width:66px; padding:9px 10px; border:1px solid var(--line);
  border-radius:8px; text-align:center; background:#fff; }
.trend .cell .y { font-size:11.5px; color:var(--muted); }
.trend .cell .v { font-size:15px; font-weight:600; color:var(--ink); margin:3px 0; }

/* 对比表：横向滚动，首列固定，避免多刊对比时看不出哪行是哪本 */
.cmpwrap { overflow-x:auto; }
table.cmp { border-collapse:collapse; font-size:13px; width:100%; }
table.cmp th, table.cmp td { padding:9px 12px; border-bottom:1px solid var(--line);
  border-right:1px solid var(--line); vertical-align:top; white-space:nowrap; }
table.cmp thead th { background:#fafbfc; text-align:left; }
table.cmp thead th:first-child, table.cmp tbody th { position:sticky; left:0;
  background:#fff; z-index:1; text-align:left; color:var(--muted);
  font-weight:400; font-size:12.5px; }
table.cmp thead th:first-child { background:#fafbfc; }
table.cmp td.wrap { white-space:normal; min-width:210px; }

/* 选刊结果：一行一本，比卡片更省纵向空间（用户要横着比） */
.jrow { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  background:#fff; border:1px solid var(--line); border-radius:9px;
  padding:11px 14px; margin-bottom:8px; }
.jrow:hover { border-color:#c7d2fe; }
.jrow .nm { font-size:14.5px; font-weight:600; }
.jrow .meta { font-size:12.5px; color:var(--muted); }
.jrow .sp { margin-left:auto; display:flex; gap:8px; align-items:center; }

/* ---------------- 首页功能入口 ---------------- */
.entries { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
@media (max-width:760px) { .entries { grid-template-columns:1fr; } }
.entry { display:block; background:#fff; border:1px solid var(--line);
  border-radius:10px; padding:16px 18px; }
.entry:hover { border-color:var(--brand); text-decoration:none;
  box-shadow:0 4px 14px rgba(37,99,235,.07); }
.entry .t { font-size:15px; font-weight:600; color:var(--ink); }
.entry .d { font-size:13px; color:#475467; margin-top:5px; line-height:1.65; }
.entry .eg { font-size:12px; color:var(--muted); margin-top:8px; }
.card > h2 { font-size:15.5px; margin:0 0 8px; }
.card .hint + table { margin-top:4px; }