/* ============================================================
   sci-ei.com 设计系统 v3 · 现代数据平台风
   原则：手机优先、数据层级清晰、留白充足、品牌蓝 #185FA5 不变
   ============================================================ */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

:root {
  /* 品牌 */
  --blue:#185FA5; --blue-d:#0C447C; --blue-dd:#08305C; --blue-l:#E6F1FB; --blue-xl:#F4F8FD;
  --blue-a:rgba(24,95,165,.08);
  /* 语义 */
  --teal:#0F6E56; --teal-l:#E1F5EE;
  --red:#A32D2D; --red-l:#FEF3F2;
  --amber:#B54708; --amber-l:#FEF0C7;
  --gold:#B8860B; --gold-l:#FAF0D6;
  /* 中性 */
  --ink:#101828; --ink2:#344054; --sub:#667085; --sub2:#98A2B3;
  --line:#E4E7EC; --line2:#F2F4F7;
  --bg:#FBFCFE; --surface:#fff;
  /* 尺度 */
  --r1:6px; --r2:10px; --r3:14px; --r4:18px;
  --sh1:0 1px 2px rgba(16,24,40,.05);
  --sh2:0 4px 14px rgba(16,24,40,.08);
  --sh3:0 12px 32px rgba(16,24,40,.13);
  --nav-h:58px;
}

html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB",
       "Microsoft YaHei",sans-serif;
       color:var(--ink); background:var(--bg); font-size:14.5px; line-height:1.7;
       -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
b, strong { font-weight:600; }
.wrap { max-width:1180px; margin:0 auto; padding:0 20px; }

/* ---------------------------------------------------------- 导航 */
.nav { background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(10px);
       border-bottom:1px solid var(--line); position:sticky; top:0; z-index:60; }
.navin { max-width:1180px; margin:0 auto; padding:0 20px; display:flex; align-items:center;
         gap:24px; height:var(--nav-h); }
.logo { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.lg { width:32px; height:32px; border-radius:9px; background:linear-gradient(145deg,var(--blue),var(--blue-d));
      display:flex; align-items:center; justify-content:center; gap:2.5px; box-shadow:var(--sh1); flex-shrink:0; }
.lg i { width:3px; background:#fff; border-radius:2px; display:block; }
.brand { font-size:15.5px; font-weight:650; letter-spacing:.2px; color:var(--ink); line-height:1.25; }
.brand span { display:block; font-size:9.5px; color:var(--sub2); font-weight:500; letter-spacing:1.6px; }
.menu { display:flex; gap:3px; font-size:14px; flex:1; min-width:0; overflow-x:auto;
        scrollbar-width:none; -ms-overflow-style:none; }
.menu::-webkit-scrollbar { display:none; }
.menu a { color:var(--ink2); padding:6px 11px; border-radius:7px; white-space:nowrap;
          transition:background .15s,color .15s; }
.menu a:hover { background:var(--blue-a); color:var(--blue); }
.menu a.on { color:var(--blue); background:var(--blue-l); font-weight:600; }
.nright { margin-left:auto; display:flex; gap:8px; align-items:center; flex-shrink:0; }
.btn { background:var(--blue); color:#fff; padding:8px 16px; border-radius:8px; font-size:13.5px;
       display:inline-flex; align-items:center; justify-content:center; min-height:36px;
       font-weight:500; box-shadow:var(--sh1); transition:background .15s,transform .12s,box-shadow .15s; }
.btn:hover { background:var(--blue-d); box-shadow:var(--sh2); }
.btn:active { transform:translateY(1px); }
.btn.g { background:transparent; color:var(--blue); border:1px solid #CFE0F0; box-shadow:none; }
.btn.g:hover { background:var(--blue-xl); }

/* ---------------------------------------------------------- Hero */
.hero { background:linear-gradient(140deg,var(--blue-dd) 0%,var(--blue-d) 46%,var(--blue) 100%);
        color:#fff; padding:52px 0 46px; position:relative; overflow:hidden; }
.hero::after { content:''; position:absolute; inset:0;
  background:radial-gradient(900px 340px at 82% -12%,rgba(255,255,255,.13),transparent 62%); pointer-events:none; }
.hero .wrap { position:relative; z-index:1; }
.hero h1 { font-size:33px; font-weight:650; margin-bottom:10px; letter-spacing:-.6px; line-height:1.32; }
.hero p { color:rgba(255,255,255,.82); font-size:14.5px; margin-bottom:24px; max-width:660px; line-height:1.7; }
.sbox { display:flex; max-width:700px; background:#fff; border-radius:12px; overflow:hidden;
        box-shadow:0 10px 30px rgba(4,26,52,.22); }
.sbox input { flex:1; min-width:0; border:none; padding:0 18px; height:52px; font-size:15.5px; outline:none; color:var(--ink); }
.sbox input::placeholder { color:var(--sub2); }
.sbox button { background:var(--blue); color:#fff; border:none; padding:0 30px; font-size:15px;
               cursor:pointer; font-weight:500; transition:background .15s; min-height:52px; }
.sbox button:hover { background:var(--blue-d); }
.hero .quick { margin-top:16px; display:flex; gap:9px; flex-wrap:wrap; font-size:13px; }
.hero .quick a { background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.18);
                 padding:5px 12px; border-radius:16px; transition:background .15s; }
.hero .quick a:hover { background:rgba(255,255,255,.24); }
.stats { display:flex; gap:0; margin-top:30px; flex-wrap:wrap;
         border-top:1px solid rgba(255,255,255,.16); padding-top:20px; }
.stats div { padding-right:40px; }
.stats b { font-size:23px; font-weight:650; display:block; line-height:1.3; font-variant-numeric:tabular-nums; }
.stats span { font-size:12px; color:rgba(255,255,255,.72); }

/* ---------------------------------------------------------- 区块 */
.sec { padding:36px 0 10px; }
.sec h2 { font-size:20px; font-weight:650; margin-bottom:5px; letter-spacing:-.2px; line-height:1.4; }
.sec .sub { color:var(--sub); font-size:13.5px; margin-bottom:16px; line-height:1.7; }
.sec .more { float:right; font-size:13px; color:var(--blue); position:relative; top:-26px; font-weight:500; }
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r3);
        padding:16px 17px; transition:border-color .15s,box-shadow .15s,transform .15s; }
.card:hover { border-color:#C3DBF2; box-shadow:var(--sh2); transform:translateY(-1px); }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:12px; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:12px; }
.grid4 { display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:12px; }

/* 入口卡 */
.entry { display:flex; gap:13px; align-items:flex-start; }
.entry .ic { width:40px; height:40px; border-radius:11px; background:var(--blue-l); color:var(--blue);
             display:flex; align-items:center; justify-content:center; font-size:18px;
             flex-shrink:0; font-weight:600; }
.entry .ic.t { background:var(--teal-l); color:var(--teal); }
.entry b { font-size:14.5px; display:block; margin-bottom:3px; font-weight:600; }
.entry span { font-size:12.5px; color:var(--sub); line-height:1.6; display:block; }

/* 期刊卡 */
.jc { background:var(--surface); border:1px solid var(--line); border-radius:var(--r3);
      padding:15px 16px; transition:border-color .15s,box-shadow .15s; }
.jc:hover { border-color:#C3DBF2; box-shadow:var(--sh2); }
.jc .nm { font-size:14.5px; font-weight:600; margin-bottom:8px; line-height:1.45; display:-webkit-box;
          -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:var(--ink); }
.jc .mt { display:flex; gap:8px; flex-wrap:wrap; font-size:12.5px; color:var(--sub); }
.jc .mt b { color:var(--red); font-weight:650; font-variant-numeric:tabular-nums; }

/* ---------------------------------------------------------- 表格 */
.tw { overflow-x:auto; background:var(--surface); border:1px solid var(--line);
      border-radius:var(--r3); box-shadow:var(--sh1); -webkit-overflow-scrolling:touch; }
table { width:100%; border-collapse:collapse; font-size:13.5px; min-width:720px; }
th { background:#F9FAFB; text-align:left; padding:12px 14px; font-weight:600; color:var(--ink2);
     border-bottom:1px solid var(--line); white-space:nowrap; font-size:12.5px;
     letter-spacing:.2px; position:sticky; top:0; }
td { padding:12px 14px; border-bottom:1px solid var(--line2); color:var(--ink2); }
tr:last-child td { border-bottom:none; }
tbody tr { transition:background .12s; }
tbody tr:hover td { background:var(--blue-xl); }
td.rk { font-weight:600; color:var(--sub2); width:46px; font-variant-numeric:tabular-nums; }
td.nm a { color:var(--blue); font-weight:500; }
td.nm a:hover { text-decoration:underline; }
td.num { text-align:right; font-variant-numeric:tabular-nums; }

/* ---------------------------------------------------------- 标签 */
.tag { display:inline-block; font-size:11.5px; padding:3px 9px; border-radius:var(--r1);
       background:var(--blue-l); color:var(--blue); margin:0 5px 5px 0; font-weight:500;
       line-height:1.5; white-space:nowrap; }
.tag.g { background:var(--teal-l); color:var(--teal); }
.tag.r { background:var(--red-l); color:var(--red); }
.tag.n { background:var(--line2); color:var(--ink2); }
.tag.a { background:var(--amber-l); color:var(--amber); }
.z1 { background:var(--red-l); color:var(--red); }
.z2 { background:var(--amber-l); color:var(--amber); }
.z3 { background:#EAF3DE; color:#3B6D11; }
.z4 { background:var(--line2); color:var(--ink2); }
.ccfa { background:var(--red-l); color:var(--red); font-weight:600; }
.ccfb { background:var(--amber-l); color:var(--amber); font-weight:600; }
.ccfc { background:var(--teal-l); color:var(--teal); font-weight:600; }

/* ---------------------------------------------------------- Tabs */
.tabs { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:15px; }
.tabs button { background:var(--surface); border:1px solid var(--line); padding:7px 15px;
               border-radius:20px; font-size:13px; cursor:pointer; color:var(--ink2);
               transition:all .15s; min-height:34px; font-family:inherit; }
.tabs button:hover { border-color:#C3DBF2; color:var(--blue); }
.tabs button.on { background:var(--blue); border-color:var(--blue); color:#fff; font-weight:500; }

/* ---------------------------------------------------------- KPI */
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:11px; }
.kpi { background:var(--surface); border:1px solid var(--line); border-radius:var(--r3);
       padding:14px 15px; box-shadow:var(--sh1); }
.kpi .k { font-size:12px; color:var(--sub); margin-bottom:6px; letter-spacing:.2px; }
.kpi .v { font-size:23px; font-weight:650; line-height:1.2; color:var(--ink);
          font-variant-numeric:tabular-nums; letter-spacing:-.4px; }
.kpi .v.r { color:var(--red); }
.kpi .n { font-size:11.5px; color:var(--sub2); margin-top:4px; line-height:1.5; }

/* ---------------------------------------------------------- 条形图 */
.bar { display:flex; align-items:center; gap:11px; margin-bottom:10px; }
.bar .lb { width:112px; font-size:13px; color:var(--sub); flex-shrink:0; }
.bar .tr { flex:1; height:9px; background:var(--line2); border-radius:5px; overflow:hidden; }
.bar .fl { height:100%; background:linear-gradient(90deg,var(--blue),#3B82C4); border-radius:5px; }
.bar .fl.g { background:linear-gradient(90deg,var(--teal),#1A9E7E); }
.bar .vl { width:64px; text-align:right; font-size:13px; font-variant-numeric:tabular-nums; color:var(--ink2); }

/* ---------------------------------------------------------- 面板 */
.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--r3);
         padding:19px 20px; margin-bottom:13px; box-shadow:var(--sh1); }
.panel h3 { font-size:15.5px; font-weight:650; margin-bottom:13px; letter-spacing:-.1px; }
.kv { display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:10px 24px; }
.kv > div { display:flex; gap:10px; font-size:13.5px; border-bottom:1px dashed var(--line2);
            padding-bottom:8px; align-items:baseline; }
.kv .k { color:var(--sub); width:96px; flex-shrink:0; font-size:12.5px; }
.crumb { font-size:12.5px; color:var(--sub); padding:17px 0 12px; }
.crumb a { color:var(--blue); }
.crumb a:hover { text-decoration:underline; }
.note { background:#FFFAEB; border:1px solid #FDECC8; border-radius:var(--r2); padding:13px 16px;
        font-size:13px; color:#7A5B0B; line-height:1.75; margin-bottom:12px; }
.todo { background:var(--surface); border:1px dashed #C9D6E4; border-radius:var(--r2); padding:13px 16px;
        font-size:13px; color:var(--sub); }
.todo b { color:var(--blue); }
.dl { border:1px solid var(--line); border-radius:var(--r2); margin-bottom:9px; background:var(--surface); }
.dl summary { padding:12px 16px; cursor:pointer; font-size:13.5px; font-weight:500; min-height:44px;
              display:flex; align-items:center; }
.dl p { padding:0 16px 14px; font-size:13px; color:var(--ink2); line-height:1.75; }
.tl { border-left:2px solid #DDE5EE; margin-left:7px; padding-left:19px; }
.tl .it { position:relative; padding-bottom:17px; }
.tl .it::before { content:''; position:absolute; left:-26px; top:6px; width:10px; height:10px;
                  border-radius:50%; background:var(--blue); border:2px solid #fff; box-shadow:var(--sh1); }
.tl .dt { font-size:12px; color:var(--sub2); }
.tl .tt { font-size:14.5px; font-weight:600; margin:2px 0 4px; }
.tl .ds { font-size:13px; color:var(--ink2); line-height:1.7; }
.pill { display:inline-block; font-size:12px; padding:4px 11px; border-radius:14px;
        background:var(--blue-l); color:var(--blue); font-weight:500; }
.pill.r { background:var(--red-l); color:var(--red); }
.pill.g { background:var(--teal-l); color:var(--teal); }

/* ---------------------------------------------------------- 页脚 */
.foot { background:#0B2540; color:#A9BCCE; margin-top:46px; padding:38px 0 24px; font-size:13px; }
.foot h4 { color:#fff; font-size:13px; margin-bottom:12px; font-weight:600; letter-spacing:.3px; }
.foot a { color:#A9BCCE; transition:color .15s; }
.foot a:hover { color:#fff; }
.fgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:26px; }
.fgrid ul { list-style:none; }
.fgrid li { margin-bottom:8px; line-height:1.6; }
.fbt { border-top:1px solid rgba(255,255,255,.12); margin-top:26px; padding-top:19px;
       font-size:12px; color:#7C93AA; line-height:1.85; }
.icp { display:inline-block; margin-right:12px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ---------------------------------------------------------- 联系与转化 */
.ctc { background:var(--surface); border:1px solid var(--line); border-radius:var(--r3);
       padding:12px 18px; display:flex; gap:12px 16px; flex-wrap:wrap; align-items:stretch;
       margin-bottom:13px; box-shadow:var(--sh1); }
.ctc .ci { display:flex; gap:12px; align-items:center; min-width:210px; }
.ctc .ci img { border-radius:var(--r1); }
.ctc .ci b { font-size:13.5px; display:block; font-weight:600; }
.ctc .ci span { font-size:12px; color:var(--sub); }
.ctc .hint { font-size:12.5px; color:var(--sub); line-height:1.8; flex:1; min-width:240px; }
.cta { background:linear-gradient(135deg,var(--blue-d),var(--blue)); color:#fff; border-radius:var(--r3);
       padding:17px 20px; margin-bottom:13px; display:flex; gap:16px; align-items:center;
       flex-wrap:wrap; box-shadow:var(--sh2); }
.cta .tx { flex:1; min-width:230px; }
.cta b { font-size:15px; font-weight:600; }
.cta p { font-size:12.5px; opacity:.88; margin-top:5px; line-height:1.7; }
.btn.w { background:#fff; color:var(--blue); box-shadow:none; }
.btn.w:hover { background:#EEF4FB; }
.btn.ol { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.5); box-shadow:none; }
.btn.ol:hover { background:rgba(255,255,255,.14); }
.gap { background:#FFFAEB; border:1px solid #FDECC8; border-radius:var(--r3); padding:15px 18px;
       margin-bottom:13px; display:flex; gap:14px; align-items:center; flex-wrap:wrap;
       font-size:13px; color:#7A5B0B; }
.gap input { flex:1; min-width:170px; border:1px solid #E4D49A; border-radius:var(--r1); padding:9px 12px;
             font-size:13px; min-height:38px; background:#fff; }
.gap .btn { background:var(--amber); box-shadow:none; }
.wxf { position:fixed; right:18px; bottom:18px; z-index:90; font-size:13px; }
.wxf .bx { display:none; background:#fff; border:1px solid var(--line); border-radius:var(--r3);
           padding:14px; width:176px; text-align:center; box-shadow:var(--sh3); margin-bottom:10px; }
.wxf .bx b { font-size:13px; display:block; margin-bottom:9px; }

/* ============================================================
   响应式：手机优先
   ============================================================ */
@media (max-width:1080px) {
  .wrap { padding:0 16px; }
  .navin { padding:0 16px; gap:14px; }
}
@media (max-width:900px) {
  .grid2 { grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
  .stats div { padding-right:26px; }
  .stats b { font-size:20px; }
}
@media (max-width:720px) {
  body { font-size:14.5px; }
  .navin { gap:10px; height:54px; }
  .brand span { display:none; }
  .menu { gap:0; font-size:13.5px; margin-left:2px; }
  .menu a { padding:6px 9px; }
  .nright .btn.g { display:none; }
  .hero { padding:34px 0 30px; }
  .hero h1 { font-size:24px; letter-spacing:-.3px; }
  .hero p { font-size:13.5px; margin-bottom:18px; }
  .sbox { flex-direction:column; border-radius:12px; }
  .sbox input { height:48px; font-size:15px; padding:0 15px; }
  .sbox button { padding:0; height:46px; font-size:14.5px; width:100%; }
  .stats { margin-top:22px; padding-top:16px; gap:14px 0; }
  .stats div { padding-right:20px; min-width:33%; }
  .stats b { font-size:19px; }
  .sec { padding:26px 0 8px; }
  .sec h2 { font-size:17.5px; }
  .sec .more { top:-22px; font-size:12.5px; }
  .grid, .grid4 { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
  .grid2 { grid-template-columns:1fr; gap:10px; }
  .card, .jc, .panel { padding:14px 15px; }
  .kpis { grid-template-columns:repeat(2,1fr); gap:9px; }
  .kpi { padding:12px 13px; }
  .kpi .v { font-size:19px; }
  .kv { grid-template-columns:1fr; gap:9px; }
  .bar .lb { width:88px; font-size:12.5px; }
  .cta { padding:15px 16px; }
  .cta b { font-size:14px; }
  .ctc { padding:15px 16px; gap:13px; }
  /* 手机端：三块改为纵向堆叠，各占满一行。
     必须 !important —— 三块的 flex/min-width 是内联 style，普通选择器盖不住；
     不覆盖的话 320px 的 min-width 在 375px 屏（.ctc 内容区约 311px）会横向溢出。 */
  .ctc > div { flex:1 1 100% !important; min-width:0 !important; max-width:100% !important; }
  .ctc > div > div { min-width:0 !important; max-width:100% !important; }
  .ctc .ci { min-width:100%; }
  .foot { padding:28px 0 20px; margin-top:32px; }
  .fgrid { gap:20px; grid-template-columns:repeat(2,1fr); }
  .wxf { right:12px; bottom:12px; }
}
@media (max-width:420px) {
  .wrap { padding:0 13px; }
  .navin { padding:0 13px; }
  .hero h1 { font-size:21px; }
  .grid, .grid4 { grid-template-columns:1fr; }
  .kpis { grid-template-columns:1fr; }
  .fgrid { grid-template-columns:1fr; }
  .tabs button { padding:6px 12px; font-size:12.5px; }
  /* 极小屏（≤320px）：二维码 136px + 描述列会撑破容器，缩到 112px 保证不溢出 */
  .ctc img { width:112px !important; height:112px !important; }
}
/* ---------- 国际期刊库（journals.html）2026-10-16 改版 ---------- */
.ilibh{background:linear-gradient(135deg,#185FA5 0%,#0F4C81 100%);border-radius:14px;padding:24px 26px;color:#fff;margin-top:12px}
.ilibh .kick{font-size:11px;letter-spacing:.14em;opacity:.75;font-weight:600;margin-bottom:8px}
.ilibh h1{font-size:26px;font-weight:600;margin:0 0 8px;letter-spacing:-.2px}
.ilibh p{font-size:13.5px;line-height:1.8;opacity:.92;margin:0}
.istats{display:flex;gap:26px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.18)}
.istats div{display:flex;flex-direction:column;gap:2px}
.istats b{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.istats span{font-size:12px;opacity:.8}
.isw{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0}
.isw span,.isw a{font-size:13px;padding:7px 14px;border-radius:16px;border:1px solid #dde3ea;background:#fff;color:#5F5E5A;text-decoration:none;line-height:1.4}
.isw span.on{background:#0F4C81;color:#fff;border-color:#0F4C81;font-weight:600}
.dbgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:12px;margin-top:4px}
.dbcard{text-align:left;background:#fff;border:1px solid #e4e7ec;border-radius:12px;padding:14px 16px;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;gap:5px;transition:border-color .15s,box-shadow .15s,transform .15s}
.dbcard:hover{border-color:#b9cde4;box-shadow:0 4px 14px rgba(16,24,40,.08);transform:translateY(-1px)}
.dbcard.on{border-color:#185FA5;box-shadow:0 0 0 2px rgba(24,95,165,.12)}
.dbtop{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.dbtag{font-size:13px;font-weight:700;color:#185FA5;letter-spacing:.02em}
.dbnum{font-size:13px;font-weight:600;color:#101828;font-variant-numeric:tabular-nums}
.dbname{font-size:14px;font-weight:600;color:#101828;line-height:1.4}
.dbfull{font-size:11.5px;color:#98A2B3;line-height:1.4;word-break:break-word}
.dbdesc{font-size:12.5px;color:#667085;line-height:1.7}
@media (max-width:720px){
  .ilibh{padding:18px 18px;border-radius:12px}
  .ilibh h1{font-size:21px}
  .ilibh p{font-size:13px}
  .istats{gap:18px}
  .istats b{font-size:17px}
  .dbgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .dbcard{padding:12px 13px;min-height:44px}
  .dbdesc{font-size:12px}
}
@media (max-width:420px){
  .dbgrid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce) {
  * { transition:none !important; scroll-behavior:auto !important; }
}


/* ── 工具页表单组件 ───────────────────────────────── */
.tf{display:flex;flex-direction:column;gap:12px}
.tf .row{display:flex;gap:12px;flex-wrap:wrap}
.tf label{display:flex;flex-direction:column;gap:6px;flex:1;min-width:150px;font-size:12.5px;font-weight:500;color:var(--sub)}
.tf input,.tf textarea,.tf select{width:100%;box-sizing:border-box;font-family:inherit;font-size:14px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--r1);padding:9px 11px;outline:none}
.tf textarea{min-height:120px;line-height:1.75;resize:vertical}
.tf input:focus,.tf textarea:focus,.tf select:focus{border-color:var(--blue)}
.out{background:var(--bg);border:1px solid var(--line);border-radius:var(--r1);padding:14px;font-size:13.5px;line-height:1.9;white-space:pre-wrap;word-break:break-word;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.out.plain{font-family:inherit}
.tbtns{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.tip{font-size:12.5px;line-height:1.8;color:var(--sub);margin-top:10px}
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:9px 10px;text-align:left;vertical-align:top}
.tbl th{font-size:12.5px;font-weight:500;color:var(--sub)}
.swatch{display:flex;flex-wrap:wrap;gap:10px}
.sw{flex:1;min-width:120px;max-width:170px;border:1px solid var(--line);border-radius:var(--r1);overflow:hidden}
.swbar{height:46px;cursor:pointer}
.swmeta{padding:7px 10px;font-size:12px;color:var(--sub);font-family:ui-monospace,Menlo,Consolas,monospace}
@media(max-width:720px){.tf label{min-width:100%}.tbl{font-size:12.5px}.sw{min-width:88px}}
/* === CN_BLOCK_START === 中文核心期刊库（设计系统 v3 · 重设计版） */
.hero .crumb{color:rgba(255,255,255,.62);padding:0 0 12px}
.hero .crumb a{color:rgba(255,255,255,.9)}
.hero .crumb a:hover{text-decoration:underline}

/* 中文库 hero 精简版：去掉大段说明和四栏 KPI，只留标题 + 一行关键数字 */
.hero.cnhero{padding:38px 0 28px}
.hero.cnhero h1{font-size:28px;margin-bottom:0}
.hero.cnhero .cnhd{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.hero.cnhero .cnmeta{font-size:13.5px;color:rgba(255,255,255,.75);font-variant-numeric:tabular-nums}
@media(max-width:720px){
  .hero.cnhero{padding:28px 0 22px}
  .hero.cnhero h1{font-size:22px}
  .hero.cnhero .cnhd{flex-direction:column;gap:8px}
  .hero.cnhero .cnmeta{font-size:13px}
}

/* 核心目录卡：只留「目录名 + 数量」和一句话说明，去掉机构行降低密度 */
.cncat{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:12px;margin-top:4px}
.cncat>div{background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);
padding:15px 17px;box-shadow:var(--sh1);transition:border-color .15s,box-shadow .15s}
.cncat>div:hover{border-color:#C3DBF2;box-shadow:var(--sh2)}
.cncat .hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.cncat .hd b{font-size:14.5px;font-weight:650;color:var(--ink);letter-spacing:-.1px;line-height:1.4}
.cncat .hd em{font-style:normal;font-size:13px;font-weight:600;color:var(--blue);
font-variant-numeric:tabular-nums;white-space:nowrap}
.cncat .ds{margin-top:7px;font-size:12.5px;color:var(--sub);line-height:1.7}

/* 筛选栏：搜索一行 / 目录 chip 一行 / 排序+学科一行 */
.cnbar{background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);
padding:16px 17px;margin-top:14px;box-shadow:var(--sh1)}
.cnbar .r1{display:flex;gap:10px}
.cnbar .r2{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.cnbar .r3{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;padding-top:12px;
border-top:1px solid var(--line2);align-items:center}
.cnbar input,.cnbar select{height:40px;padding:0 12px;border:1px solid #DDE3EA;border-radius:8px;
font-size:13.5px;color:var(--ink);background:#fff;outline:none;font-family:inherit;
transition:border-color .15s,box-shadow .15s}
.cnbar input{flex:6;min-width:0;padding:0 14px;font-size:14px}
.cnbar .sch{flex:1;min-width:78px;height:40px;padding:0 18px;border:none;background:var(--blue);color:#fff;
border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;font-family:inherit;
transition:background .15s;white-space:nowrap}
.cnbar .sch:hover{background:var(--blue-d)}
.cnbar select{min-width:118px;flex:0 1 auto;cursor:pointer}
.cnbar input:focus,.cnbar select:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-a)}
.cnbar .chip{height:34px;padding:0 15px;border:1px solid #DDE3EA;background:#fff;color:var(--ink2);
border-radius:17px;font-size:13px;cursor:pointer;font-family:inherit;transition:all .15s;
white-space:nowrap;display:inline-flex;align-items:center}
.cnbar .chip:hover{border-color:var(--blue);color:var(--blue)}
.cnbar .chip.on{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
.cnbar .rst{height:40px;padding:0 16px;border:1px solid #DDE3EA;background:#fff;color:var(--sub);
border-radius:8px;font-size:13px;cursor:pointer;font-family:inherit;transition:all .15s;white-space:nowrap}
.cnbar .rst:hover{border-color:var(--blue);color:var(--blue)}
.cnbar .cb{margin-top:13px;padding-top:12px;border-top:1px solid var(--line2);
font-size:13px;color:var(--sub);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cnbar .cb b{color:var(--blue);font-weight:650;font-variant-numeric:tabular-nums}

/* 结果卡：刊名与等级同行，指标行加分隔线，配色收敛为蓝/青两色 */
.cngrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;margin-top:16px}
.cnc{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
border-radius:var(--r3);padding:18px 20px;text-decoration:none;color:var(--ink);
box-shadow:var(--sh1);transition:border-color .15s,box-shadow .15s,transform .15s}
.cnc:hover{border-color:var(--blue);box-shadow:var(--sh2);transform:translateY(-2px)}
.cnc .hd{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.cnc .t{font-size:15.5px;font-weight:650;line-height:1.5;color:var(--ink);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cnc:hover .t{color:var(--blue)}
.cnc .lv{flex-shrink:0;font-size:11.5px;font-weight:600;padding:4px 10px;
border-radius:var(--r1);letter-spacing:.2px;white-space:nowrap}
.cnc .lv.lv5{background:#FDECEC;color:#A32D2D}
.cnc .lv.lv4{background:var(--blue-l);color:var(--blue)}
.cnc .lv.lv3{background:var(--blue-l);color:var(--blue-d)}
.cnc .lv.lv2{background:#FFF6E0;color:#8A6D0B}
.cnc .lv.lv1{background:var(--line2);color:var(--sub)}
.cnc .lv.lv0{background:var(--line2);color:var(--sub2)}
.cnc .bg{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px}
.cnc .bg i{font-style:normal;font-size:11.5px;padding:3.5px 9px;border-radius:var(--r1);
background:var(--blue-l);color:var(--blue);font-weight:500;white-space:nowrap}
.cnc .bg i.g{background:var(--teal-l);color:var(--teal)}
.cnc .bg i.m{background:var(--line2);color:var(--sub);font-weight:400}
.cnc .m{margin-top:13px;padding-top:12px;border-top:1px solid var(--line2);
display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--sub)}
.cnc .m b{font-size:18px;font-weight:700;color:#A32D2D;letter-spacing:-.4px;
font-variant-numeric:tabular-nums;line-height:1.2}
.cnc .m em{font-style:normal;font-weight:600;font-size:11.5px;padding:3px 9px;border-radius:var(--r1)}
.cnc .f{margin-top:9px;font-size:11.5px;color:var(--sub2);line-height:1.55}
.cnc.none{grid-column:1/-1;padding:40px;text-align:center;color:var(--sub);font-size:13.5px}

/* 分页 */
.cnpg{display:none;gap:8px;justify-content:center;align-items:center;margin-top:18px;flex-wrap:wrap}
.cnpg button{background:var(--surface);border:1px solid var(--line);border-radius:8px;
padding:7px 14px;font-size:13px;color:var(--ink2);cursor:pointer;font-family:inherit;
transition:all .15s;min-height:36px}
.cnpg button:hover{border-color:var(--blue);color:var(--blue)}
.cnpg button.on{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
.cnpg span{font-size:12.5px;color:var(--sub2)}

@media(max-width:720px){
  .cngrid{grid-template-columns:1fr;gap:12px}
  .cncat{grid-template-columns:1fr;gap:10px}
  .cnbar .r1{flex-direction:column}
  .cnbar .rst{width:100%}
  .cnbar .sch{width:100%;min-height:44px}
  .cnbar select{flex:1 1 calc(50% - 5px);min-width:0}
  .cnbar input{width:100%}
  .cnbar .chip{height:38px;font-size:13.5px;padding:0 16px}
  .cnbar .r2{gap:9px}
}
@media(max-width:420px){
  .cnbar select{flex:1 1 100%}
}

/* 目录卡可点击下载 */
.cncat>div.dl-card{position:relative;cursor:pointer}
.cncat>div.dl-card::after{content:'';position:absolute;inset:0;border-radius:var(--r3);
border:2px solid transparent;transition:border-color .15s;pointer-events:none}
.cncat>div.dl-card:hover::after{border-color:var(--blue)}
.cncat .dl-tag{display:inline-flex;align-items:center;gap:4px;margin-top:10px;
font-size:12.5px;font-weight:600;color:var(--blue);padding:5px 12px;
background:var(--blue-l);border-radius:var(--r1)}

/* 下载留资弹窗 */
.dlmodal{display:none;position:fixed;inset:0;z-index:100;justify-content:center;align-items:flex-start;
padding-top:8vh;background:rgba(16,24,40,.45);backdrop-filter:blur(2px)}
.dlmodal.on{display:flex}
.dlbox{position:relative;width:min(420px,calc(100% - 32px));background:var(--surface);
border:1px solid var(--line);border-radius:var(--r4);box-shadow:var(--sh3);padding:26px 24px 24px;
margin-top:20px}
.dlbox .cl{position:absolute;top:10px;right:10px;width:34px;height:34px;border:none;
background:transparent;border-radius:8px;font-size:22px;color:var(--sub);cursor:pointer}
.dlbox .cl:hover{background:var(--line2);color:var(--ink)}
.dlbox h3{font-size:18px;font-weight:650;margin:0 0 6px;line-height:1.4}
.dlbox .sub{font-size:13px;color:var(--sub);line-height:1.7;margin-bottom:18px}
.dlbox .qr{display:flex;justify-content:center;margin-bottom:16px}
.dlbox .qr img{border:1px solid var(--line);border-radius:10px}
.dlbox .wx{font-size:14px;color:var(--ink);text-align:center;margin-bottom:8px}
.dlbox .wx b{color:var(--blue)}
.dlbox .acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.dlbox .acts .btn{min-height:42px;padding:0 20px;font-size:14px;border-radius:8px;
cursor:pointer;font-family:inherit;font-weight:500;transition:all .15s}
.dlbox .acts .btn.p{background:var(--blue);color:#fff;border:none}
.dlbox .acts .btn.p:hover{background:var(--blue-d)}
.dlbox .acts .btn.s{background:#fff;color:var(--blue);border:1px solid #CFE0F0}
.dlbox .acts .btn.s:hover{background:var(--blue-xl)}
.dlbox .tip{margin-top:14px;font-size:12px;color:var(--sub2);line-height:1.7;text-align:center}

@media(max-width:720px){
  .dlmodal{padding-top:6vh}
  .dlbox{padding:22px 18px 18px}
}
/* === CN_BLOCK_END === */
/* 搜索建议下拉（对齐设计系统 v3 令牌） */
.sugwrap{position:relative;flex:1;min-width:200px}
.sug{display:none;position:absolute;z-index:70;left:0;right:0;top:calc(100% + 5px);
background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);
box-shadow:var(--sh3);max-height:392px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.sugi{display:block;padding:10px 14px;border-bottom:1px solid var(--line2);
text-decoration:none;color:var(--ink);transition:background .12s}
.sugi:last-child{border-bottom:none}
.sugi:hover,.sugi.on{background:var(--blue-xl)}
.sgt{display:block;font-size:13.5px;line-height:1.5;color:var(--ink);font-weight:500}
.sgm{display:block;margin-top:3px;font-size:11.5px;color:var(--sub)}
.sgm i{font-style:normal;margin-right:9px}
.sgm .qd{color:var(--blue);font-weight:600}
.sgm .ab{color:var(--teal)}
.sgm .sn{color:var(--sub2)}
.sgm .ix{color:var(--red);font-weight:500}
.sgf{padding:8px 14px;font-size:11.5px;color:var(--sub2);background:var(--line2);
border-top:1px solid var(--line)}
.sgload,.sgno{padding:12px 14px;font-size:12.5px;color:var(--sub)}
@media(max-width:720px){.sug{max-height:320px}.sugi{padding:11px 13px}}


/* 搜索建议：收录类型标签 */
.sgm .ix{color:#A32D2D}