/* ── SCI 期刊搜索页专用样式（sci.php） ── */

/* ── 顶部搜索区 ──────────────────────────────────── */
.top-bar {
  background: var(--top-bg);
  border-bottom: 1px solid var(--border);
  padding: 28px 24px 22px;
}
.top-inner { max-width: 860px; margin: 0 auto; }
.page-title { font-size:22px; font-weight:700; color:var(--text); margin-bottom:4px; }
.page-sub   { font-size:13px; color:var(--text-3); margin-bottom:18px; }
.page-sub strong { color:var(--blue); }

/* 搜索框 */
.search-box { position:relative; }
.search-row {
  display:flex;
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:10px;
  transition:border-color .2s,box-shadow .2s;
}
.search-row:focus-within {
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(37,99,235,.12);
}
.s-icon { width:42px; display:flex; align-items:center; justify-content:center; color:var(--text-3); flex-shrink:0; }
#q {
  flex:1; border:none; outline:none;
  font-size:15px; font-family:inherit;
  padding:11px 0; color:var(--text); background:transparent;
}
#q::placeholder { color:var(--text-3); }
.s-btn {
  margin:5px; padding:0 20px;
  background:var(--blue); color:#fff; border:none;
  border-radius:7px; font-size:14px; font-weight:500;
  font-family:inherit; cursor:pointer; white-space:nowrap;
  transition:background .15s;
}
.s-btn:hover { background:var(--blue-dk); }

/* 筛选行 */
.filter-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; align-items:center; }
.f-chip {
  display:flex; align-items:center;
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:8px; overflow:hidden; transition:border-color .2s;
}
.f-chip:focus-within { border-color:var(--blue); }
.f-label {
  padding:0 8px; font-size:11.5px; color:var(--text-3);
  white-space:nowrap; border-right:1px solid var(--border); background:#FAFBFC;
}
.f-chip select, .f-chip input[type=number] {
  background:transparent; border:none; outline:none;
  color:var(--text-2); font-size:12.5px; font-family:inherit;
  padding:6px 8px; cursor:pointer; -webkit-appearance:none; appearance:none;
  min-width:55px;
}
.f-chip input[type=number] { max-width:72px; }
.f-sep { color:var(--border); padding:0 2px; line-height:30px; }
.f-clear {
  background:transparent; border:1.5px solid var(--border);
  border-radius:8px; color:var(--text-3); font-size:12px;
  padding:0 12px; height:34px; cursor:pointer; font-family:inherit;
  transition:all .15s;
}
.f-clear:hover { border-color:#CBD5E1; color:var(--text-2); }

/* 自动补全 */
.ac-drop {
  position:absolute; top:calc(100% + 6px); left:0; right:0;
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:10px; box-shadow:var(--shadow-md); z-index:300;
  overflow:hidden; display:none;
}
.ac-drop.open { display:block; }
.ac-row {
  display:flex; align-items:center; padding:9px 14px; gap:10px;
  cursor:pointer; transition:background .1s;
  border-bottom:1px solid #F8FAFC;
}
.ac-row:last-child { border-bottom:none; }
.ac-row:hover, .ac-row.on { background:var(--blue-lt); }
.ac-main { flex:1; min-width:0; }
.ac-name { font-weight:500; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ac-abbr { font-size:11.5px; color:var(--text-3); margin-top:1px; }
.ac-side { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.ac-if   { font-size:13px; font-weight:700; color:var(--blue); }
.ac-issn { font-size:11px; color:var(--text-3); }

/* ── 主体 ─────────────────────────────────────────── */
.main { max-width:1200px; margin:0 auto; padding:20px 16px 56px; }

/* ── 学科分类面板 ─────────────────────────────────── */
.cat-panel {
  background:var(--surface); border:1px solid var(--border);
  border-radius:10px; margin-bottom:16px; overflow:hidden; box-shadow:var(--shadow);
}
.cat-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; cursor:pointer; user-select:none; transition:background .15s;
}
.cat-header:hover { background:#FAFBFC; }
.cat-header-left { display:flex; align-items:center; gap:8px; }
.cat-title { font-size:13.5px; font-weight:600; color:var(--text); }
.cat-hint  { font-size:12px; color:var(--text-3); }
.cat-arrow { width:20px; height:20px; color:var(--text-3); transition:transform .2s; }
.cat-arrow.open { transform:rotate(180deg); }
.cat-divider { height:1px; background:var(--border); }
.cat-body { padding:14px 16px 16px; }

/* 大类标签 */
.major-tabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.maj-tab {
  display:flex; align-items:center; gap:5px;
  padding:5px 12px; border-radius:20px; font-size:12.5px;
  border:1.5px solid var(--border); background:var(--surface);
  color:var(--text-2); cursor:pointer; font-family:inherit; transition:all .15s;
}
.maj-tab .tab-icon { font-size:13px; }
.maj-tab .tab-cnt  { font-size:11px; color:var(--text-3); }
.maj-tab:hover { border-color:var(--blue); color:var(--blue); }
.maj-tab.active { background:var(--blue); border-color:var(--blue); color:#fff; }
.maj-tab.active .tab-cnt { color:rgba(255,255,255,.75); }
.tab-en { font-size:10px; opacity:.6; margin-left:3px; font-weight:400; }

/* 小类 chips */
.subject-grid { display:flex; flex-wrap:wrap; gap:6px; align-items:flex-start; }
.sub-filter-wrap { width:100%; display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.sub-filter {
  flex:1; padding:5px 10px; border:1px solid var(--border);
  border-radius:8px; font-size:12.5px; outline:none;
  color:var(--text); background:#fff; font-family:inherit; transition:border-color .15s;
}
.sub-filter:focus { border-color:var(--blue); }
.sub-filter-hint { font-size:11.5px; color:var(--text-3); white-space:nowrap; flex-shrink:0; }
.sub-chip {
  display:flex; align-items:center; gap:4px;
  padding:4px 12px; border-radius:6px; font-size:12px;
  background:#F8FAFC; border:1px solid var(--border);
  color:var(--text-2); cursor:pointer; font-family:inherit; transition:all .15s;
}
.sub-chip .sc-cnt { font-size:10.5px; color:var(--text-3); }
.sub-chip:hover { background:var(--blue-lt); border-color:#BFDBFE; color:var(--blue); }
.sub-chip.active { background:var(--blue); border-color:var(--blue); color:#fff; }
.sub-chip.active .sc-cnt { color:rgba(255,255,255,.75); }
.sub-chip.sc-hidden { display:none !important; }
.sub-chip-none { font-size:12.5px; color:var(--text-3); font-style:italic; }
.cat-loading { font-size:12.5px; color:var(--text-3); padding:8px 0; }
.sc-en { display:block; font-size:10px; color:inherit; opacity:.65; line-height:1.2; margin-top:1px; }
.sub-chip.active .sc-en { opacity:.8; }
.sub-chips-inner { display:flex; flex-wrap:wrap; gap:6px; width:100%; }
.sub-chips-inner.collapsible { max-height:100px; overflow:hidden; transition:max-height .35s ease; }
.sub-chips-inner.collapsible.expanded { max-height:2400px; }
.sub-expand-btn {
  display:block; width:100%; margin-top:8px; padding:6px; background:none;
  border:1px dashed var(--border); border-radius:7px; color:var(--blue); font-size:12.5px;
  cursor:pointer; transition:background .15s; font-family:inherit;
}
.sub-expand-btn:hover { background:var(--blue-lt); }

/* 当前筛选标签 */
.active-filters { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.af-tag {
  display:flex; align-items:center; gap:4px;
  background:#EFF6FF; border:1px solid #BFDBFE;
  color:var(--blue); border-radius:5px; padding:3px 10px; font-size:12px;
}
.af-tag button {
  background:none; border:none; cursor:pointer;
  color:#93C5FD; font-size:13px; line-height:1; padding:0; margin-left:2px; transition:color .15s;
}
.af-tag button:hover { color:var(--blue); }

/* 结果栏 */
.result-bar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.result-info { font-size:13px; color:var(--text-2); }
.result-info strong { color:var(--text); font-weight:600; }
.sort-pills { display:flex; gap:4px; flex-wrap:wrap; }
.sort-pill {
  border:1px solid var(--border); background:var(--surface);
  border-radius:6px; padding:4px 10px; font-size:12px;
  color:var(--text-2); cursor:pointer; font-family:inherit;
  transition:all .15s; display:flex; align-items:center; gap:3px;
}
.sort-pill:hover { border-color:var(--blue); color:var(--blue); }
.sort-pill.active { background:var(--blue); border-color:var(--blue); color:#fff; }

/* 快捷分区 */
.quick-tags { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:12px; }
.qtag {
  border:1px solid var(--border); background:var(--surface);
  border-radius:20px; padding:3px 12px; font-size:12px;
  color:var(--text-2); cursor:pointer; font-family:inherit; transition:all .15s;
}
.qtag:hover { border-color:var(--blue); color:var(--blue); }
.qtag.active { background:var(--blue); border-color:var(--blue); color:#fff; }

/* ── 表格 ─────────────────────────────────────────── */
.tbl-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:10px; overflow:hidden; box-shadow:var(--shadow);
}
table { width:100%; border-collapse:collapse; }
thead th {
  background:#F8FAFC; padding:10px 14px; text-align:left;
  font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; color:var(--text-2);
  border-bottom:1px solid var(--border);
  white-space:nowrap; cursor:pointer; user-select:none; transition:color .15s;
}
thead th:hover { color:var(--blue); }
thead th.asc::after  { content:' ↑'; color:var(--blue); }
thead th.desc::after { content:' ↓'; color:var(--blue); }
thead th.no-sort { cursor:default; }
thead th.no-sort:hover { color:var(--text-2); }
tbody tr { border-bottom:1px solid #F1F5F9; transition:background .1s; }
tbody tr:last-child { border-bottom:none; }
tbody tr:hover { background:#F8FAFF; }
td { padding:11px 14px; vertical-align:middle; }

.j-name a { font-size:13.5px; font-weight:600; color:var(--text); text-decoration:none; transition:color .15s; }
.j-name a:hover { color:var(--blue); }
.j-abbr { font-size:11.5px; color:var(--text-3); margin-top:2px; }
.j-issn { font-size:12px; color:var(--text-3); font-variant-numeric:tabular-nums; }

.if-num   { font-size:15px; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.if-delta { display:block; font-size:11px; font-weight:500; margin-top:1px; }
.if-delta.up { color:#16A34A; } .if-delta.down { color:#DC2626; }
.if-na  { color:var(--text-3); }
.if-5yr { font-size:12.5px; color:var(--text-2); font-variant-numeric:tabular-nums; }

/* ── 移动卡片 ─────────────────────────────────────── */
.card-list { display:flex; flex-direction:column; gap:8px; }
.j-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:10px; padding:14px 16px; box-shadow:var(--shadow);
}
.j-card-name { font-size:14px; font-weight:600; color:var(--text); text-decoration:none; display:block; margin-bottom:2px; }
.j-card-name:hover { color:var(--blue); }
.j-card-abbr { font-size:11.5px; color:var(--text-3); margin-bottom:10px; }
.j-card-row  { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; }
.j-card-if   { font-size:18px; font-weight:700; }

/* ── 分页 ─────────────────────────────────────────── */
.pager { display:flex; justify-content:center; gap:4px; padding:20px 0 4px; flex-wrap:wrap; }
.pager button {
  min-width:34px; height:34px; border:1px solid var(--border);
  background:var(--surface); border-radius:6px; font-size:13px;
  color:var(--text-2); cursor:pointer; font-family:inherit;
  transition:all .15s; padding:0 6px;
}
.pager button:hover:not(:disabled) { border-color:var(--blue); color:var(--blue); }
.pager button.cur { background:var(--blue); border-color:var(--blue); color:#fff; font-weight:600; }
.pager button:disabled { opacity:.35; cursor:default; }

/* ── 状态 ─────────────────────────────────────────── */
.state { text-align:center; padding:60px 20px; color:var(--text-3); }
.state p { font-size:14px; margin-top:12px; }
.spinner { width:28px; height:28px; border-radius:50%; border:2.5px solid var(--border); border-top-color:var(--blue); animation:spin .65s linear infinite; margin:0 auto; }
@keyframes spin { to { transform:rotate(360deg); } }

mark { background:#FEF08A; padding:0 1px; border-radius:2px; }

/* ── 列宽 ─────────────────────────────────────────── */
.col-name { width:30%; } .col-issn { width:108px; } .col-if { width:100px; }
.col-5yr  { width:80px; } .col-cnt  { width:68px; } .col-jcr { width:56px; } .col-zone { width:160px; }

/* ── 响应式 ───────────────────────────────────────── */
@media (max-width:767px) {
  .top-bar  { padding:18px 14px 18px; }
  .page-title { font-size:18px; }
  .main { padding:14px 12px 48px; }
  .cat-body { padding:12px 12px 14px; }
}