/* ==================================================================
   JustNews mu-plugin 接管页样式 v3 (门户风 + 真交互)
   ================================================================== */

:root {
  --jn-primary: #0a2540;
  --jn-primary-light: #1e3a66;
  --jn-accent: #d32f2f;
  --jn-accent-dark: #b71c1c;
  --jn-accent-light: #ffebee;
  --jn-soft: #f4f6fa;
  --jn-soft-2: #eef2f7;
  --jn-card: #ffffff;
  --jn-ink: #1a1d24;
  --jn-text: #2a2f3a;
  --jn-text-soft: #5b6271;
  --jn-gray: #8d95a4;
  --jn-border: #e6eaf0;
  --jn-radius: 12px;
  --jn-radius-sm: 6px;
  --jn-shadow: 0 6px 22px rgba(15, 30, 70, .08);
  --jn-shadow-hover: 0 14px 36px rgba(10, 37, 64, .18);
}

body.jn-takeover {
  margin: 0;
  background: var(--jn-soft);
  color: var(--jn-text);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
body.jn-takeover *, body.jn-takeover *::before, body.jn-takeover *::after { box-sizing: border-box; }
body.jn-takeover a { color: #1a1d24; text-decoration: none; transition: color .2s; }
body.jn-takeover a:hover { color: var(--jn-accent); }
body.jn-takeover img { max-width: 100%; height: auto; display: block; }
body.jn-takeover .jn-wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

/* ============ 1. 顶部突发滚动条 ============ */
.jn-ticker {
  background: linear-gradient(90deg, #2a0808, #5b0f0f, #2a0808);
  color: #fff;
  font-size: 13px;
  position: relative;
}
.jn-ticker-inner {
  display: flex; align-items: center; gap: 12px;
  height: 38px; overflow: hidden;
  max-width: 1240px; margin: 0 auto; padding: 0 20px;
}
.jn-ticker-label {
  flex-shrink: 0;
  background: var(--jn-accent);
  padding: 4px 10px;
  font-weight: 700;
  font-size: 12px;
  border-radius: 3px;
  letter-spacing: 1px;
  box-shadow: 0 0 12px rgba(211, 47, 47, .6);
  animation: jn-pulse 1.5s infinite;
}
@keyframes jn-pulse {
  0%,100% { box-shadow: 0 0 12px rgba(211,47,47,.6); }
  50% { box-shadow: 0 0 24px rgba(211,47,47,1); }
}
.jn-ticker-roll {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.jn-ticker-item {
  display: inline-block;
  padding: 0 40px 0 8px;
  color: rgba(255,255,255,.92) !important;
  position: relative;
  animation: jn-ticker-roll 45s linear infinite;
}
.jn-ticker-item::after {
  content: "·"; position: absolute; right: 18px; color: rgba(255,255,255,.35);
}
.jn-ticker-item:hover { color: #ffd54f !important; }
@keyframes jn-ticker-roll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.jn-ticker-time {
  flex-shrink: 0;
  font-family: Menlo, Consolas, monospace;
  font-size: 12px;
  color: rgba(255,255,255,.7);
  background: rgba(0,0,0,.3);
  padding: 3px 8px;
  border-radius: 3px;
}

/* ============ 2. 头部 ============ */
.jn-header { background: #fff; box-shadow: 0 2px 18px rgba(0,0,0,.04); position: sticky; top: 0; z-index: 999; }
.jn-header-top { background: var(--jn-soft-2); border-bottom: 1px solid var(--jn-border); font-size: 12px; }
.jn-header-top .jn-wrap { display: flex; justify-content: space-between; align-items: center; height: 34px; }
.jn-header-meta { color: var(--jn-gray); display: flex; gap: 16px; }
.jn-header-tools { display: flex; gap: 8px; }
.jn-tool-link { color: var(--jn-text-soft) !important; padding: 4px 10px; border-radius: 4px; cursor: pointer; }
.jn-tool-link:hover { background: rgba(0,0,0,.04) !important; color: var(--jn-accent) !important; }
.jn-header-mid { padding: 22px 0; border-bottom: 3px solid var(--jn-primary); }
.jn-header-mid-inner { display: flex; align-items: center; gap: 32px; }
.jn-logo { display: flex; flex-direction: column; line-height: 1.1; flex-shrink: 0; }
.jn-logo-cn { font-size: 30px; font-weight: 900; color: var(--jn-primary) !important; letter-spacing: 2px; }
.jn-logo:hover .jn-logo-cn { color: var(--jn-accent) !important; }
.jn-logo-en { font-size: 11px; letter-spacing: 4px; color: var(--jn-gray); font-weight: 600; margin-top: 2px; }
.jn-search {
  flex: 1; max-width: 420px;
  display: flex; height: 42px;
  background: var(--jn-soft);
  border: 2px solid var(--jn-border);
  border-radius: 21px;
  overflow: hidden;
  transition: .2s;
}
.jn-search:focus-within { border-color: var(--jn-primary); box-shadow: 0 0 0 3px rgba(10,37,64,.1); }
.jn-search input { flex: 1; border: 0; background: transparent; padding: 0 18px; font-size: 14px; color: var(--jn-text); outline: none; font-family: inherit; }
.jn-search button { width: 50px; border: 0; background: var(--jn-primary); color: #fff; cursor: pointer; font-size: 16px; transition: .2s; }
.jn-search button:hover { background: var(--jn-accent); }
.jn-header-cta { display: flex; gap: 8px; flex-shrink: 0; }
.jn-cta-btn {
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  border: 1.5px solid transparent;
  transition: .2s;
  cursor: pointer;
}
.jn-cta-primary { background: var(--jn-accent); color: #fff !important; }
.jn-cta-primary:hover { background: var(--jn-accent-dark) !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(211,47,47,.4); }
.jn-cta-ghost { background: transparent; border-color: var(--jn-primary); color: var(--jn-primary) !important; }
.jn-cta-ghost:hover { background: var(--jn-primary); color: #fff !important; }

/* ============ 3. 主导航 ============ */
.jn-nav { background: linear-gradient(135deg, var(--jn-primary) 0%, var(--jn-primary-light) 100%); }
.jn-nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; }
.jn-nav-item { position: relative; }
.jn-nav-item > a {
  display: flex; align-items: center;
  padding: 0 22px;
  height: 48px;
  color: rgba(255,255,255,.92) !important;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .5px;
  border-bottom: 3px solid transparent;
  margin-bottom: -3px;
  transition: .25s;
}
.jn-nav-item > a:hover { background: rgba(255,255,255,.08); border-bottom-color: var(--jn-accent); color: #fff !important; }
.jn-nav-item.jn-active > a { background: var(--jn-accent); color: #fff !important; border-bottom-color: #ffd54f; font-weight: 700; }
.jn-nav-right { margin-left: auto; }
.jn-nav-right > a { font-size: 13px; padding: 0 14px; opacity: .85; }

/* ============ 4. 主体区 ============ */
.jn-main { padding: 28px 0 60px; }
.jn-portal { display: flex; flex-direction: column; gap: 28px; }

/* ============ 5. 焦点轮播 (真切换) ============ */
.jn-focus {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 6px;
  height: 480px;
  border-radius: var(--jn-radius);
  overflow: hidden;
  box-shadow: var(--jn-shadow);
  background: #000;
  position: relative;
}
.jn-focus-stage {
  position: relative;
  height: 100%;
  overflow: hidden;
}
.jn-focus-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity .8s ease, transform 6s ease;
  pointer-events: none;
}
.jn-focus-slide.jn-focus-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  z-index: 2;
}
.jn-focus-img {
  display: block;
  width: 100%; height: 100%;
}
.jn-focus-img img { width: 100%; height: 100%; object-fit: cover; }
.jn-focus-mask {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.2) 0%, transparent 30%, transparent 50%, rgba(0,0,0,.85) 100%);
  z-index: 1;
}
.jn-focus-text {
  position: absolute;
  left: 0; bottom: 0; right: 0;
  padding: 30px 40px 36px;
  color: #fff;
  z-index: 2;
  transform: translateY(0);
}
.jn-focus-slide.jn-focus-active .jn-focus-text { animation: jn-text-up .8s .3s both; }
@keyframes jn-text-up {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.jn-focus-cat {
  display: inline-block;
  background: var(--jn-accent);
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 3px;
  margin-bottom: 10px;
  letter-spacing: .5px;
}
.jn-focus-text h3 {
  margin: 0 0 10px;
  font-size: 30px;
  line-height: 1.4;
  font-weight: 800;
  max-width: 80%;
}
.jn-focus-text h3 a { color: #fff !important; }
.jn-focus-text h3 a:hover { color: #ffd54f !important; }
.jn-focus-summary {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,.85);
  max-width: 70%;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px;
}
.jn-focus-meta {
  font-size: 12px;
  color: rgba(255,255,255,.7);
  display: flex; gap: 16px;
}
.jn-focus-ctrl {
  position: absolute;
  right: 20px;
  bottom: 24px;
  display: flex;
  gap: 8px;
  align-items: center;
  z-index: 3;
  background: rgba(0,0,0,.4);
  padding: 6px 10px;
  border-radius: 20px;
  backdrop-filter: blur(6px);
}
.jn-focus-num { color: #fff; font-size: 13px; font-family: Georgia, serif; }
.jn-focus-num b { color: #ffd54f; font-size: 16px; font-weight: 700; }
.jn-focus-btn {
  width: 28px; height: 28px;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,.2);
  color: #fff; cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: .2s;
}
.jn-focus-btn:hover { background: var(--jn-accent); }

.jn-focus-thumbs {
  display: flex; flex-direction: column;
  background: #1a1a1a;
}
.jn-focus-thumb {
  display: block;
  flex: 1;
  position: relative;
  overflow: hidden;
  border-bottom: 2px solid #000;
  transition: .3s;
}
.jn-focus-thumb:last-child { border-bottom: 0; }
.jn-focus-thumb img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.5);
  transition: .3s;
}
.jn-focus-thumb:hover img { filter: brightness(.7); }
.jn-focus-thumb.jn-focus-thumb-active img { filter: brightness(1); }
.jn-focus-thumb.jn-focus-thumb-active {
  box-shadow: inset 4px 0 0 var(--jn-accent);
}
.jn-focus-thumb-num {
  position: absolute;
  right: 6px; top: 6px;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: Georgia, serif;
}
.jn-focus-thumb.jn-focus-thumb-active .jn-focus-thumb-num { background: var(--jn-accent); }

/* ============ 6. 网格主区 ============ */
.jn-grid-main {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 28px;
}
.jn-grid-left, .jn-grid-right { display: flex; flex-direction: column; gap: 28px; }

/* ============ 7. 通用模块 ============ */
.jn-module {
  background: var(--jn-card);
  border-radius: var(--jn-radius);
  box-shadow: var(--jn-shadow);
  border: 1px solid var(--jn-border);
  overflow: hidden;
}
.jn-module-head {
  display: flex; align-items: center; gap: 16px;
  padding: 18px 22px 14px;
  border-bottom: 2px solid var(--jn-soft-2);
  position: relative;
}
.jn-module-head::after {
  content: ""; position: absolute;
  left: 22px; bottom: -2px; width: 48px; height: 2px;
  background: var(--jn-accent);
}
.jn-module-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--jn-primary);
  letter-spacing: 1px;
}
.jn-module-tabs { display: flex; gap: 4px; margin-left: 4px; cursor: pointer; }
.jn-modtab {
  padding: 4px 12px;
  font-size: 13px;
  color: var(--jn-gray);
  cursor: pointer;
  border-radius: 14px;
  transition: .2s;
  user-select: none;
}
.jn-modtab:hover { color: var(--jn-text); background: var(--jn-soft); }
.jn-modtab.jn-modtab-active {
  background: var(--jn-primary);
  color: #fff !important;
  font-weight: 600;
}
.jn-modmore {
  margin-left: auto;
  font-size: 13px;
  color: var(--jn-text-soft) !important;
  cursor: pointer;
}
.jn-modmore:hover { color: var(--jn-accent) !important; }

/* Tab 内容 */
.jn-tab-pane, .jn-rank-pane { display: none; }
.jn-tab-pane-active, .jn-rank-pane-active { display: block; animation: jn-fade-in .3s; }
@keyframes jn-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============ 8. 混排列表 ============ */
.jn-mixed { padding: 8px 22px 22px; }
.jn-mixed-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 16px 0 20px;
  border-bottom: 1px dashed var(--jn-border);
}
.jn-mixed-cover {
  display: block; aspect-ratio: 16/10; overflow: hidden;
  border-radius: 8px;
  background: var(--jn-soft);
}
.jn-mixed-cover img { width: 100%; height: 100%; object-fit: cover; transition: .4s; }
.jn-mixed-main:hover .jn-mixed-cover img { transform: scale(1.06); }
.jn-mixed-body h3 {
  margin: 0 0 8px;
  font-size: 22px;
  line-height: 1.4;
  font-weight: 700;
}
.jn-mixed-body h3 a { color: var(--jn-ink); }
.jn-mixed-body h3 a:hover { color: var(--jn-accent); }
.jn-mixed-summary {
  margin-top: 10px;
  color: var(--jn-text-soft);
  font-size: 14px;
  line-height: 1.8;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.jn-mixed-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px dashed var(--jn-border);
  transition: .2s;
}
.jn-mixed-row:hover { background: var(--jn-accent-light); padding-left: 8px; padding-right: 8px; margin-left: -8px; margin-right: -8px; border-radius: 6px; }
.jn-mixed-row:last-child { border-bottom: 0; }
.jn-mixed-thumb {
  display: block; aspect-ratio: 16/10; overflow: hidden;
  border-radius: 6px;
}
.jn-mixed-thumb img { width: 100%; height: 100%; object-fit: cover; transition: .3s; }
.jn-mixed-thumb--ph { background: linear-gradient(135deg, var(--jn-soft), var(--jn-soft-2)); }
.jn-mixed-row:hover .jn-mixed-thumb img { transform: scale(1.06); }
.jn-mixed-rowbody h4 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
}
.jn-mixed-rowbody h4 a { color: var(--jn-ink); }
.jn-mixed-rowbody h4 a:hover { color: var(--jn-accent); }

/* ============ 9. 元数据 + 标签 ============ */
.jn-cat-label {
  display: inline-block;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--jn-primary);
  border-radius: 3px;
  margin-right: 8px;
  letter-spacing: .5px;
}
.jn-meta { font-size: 12px; color: var(--jn-gray); display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.jn-meta-time::before { content: "📅 "; }
.jn-meta-author::before { content: "✎ "; }
.jn-meta-cat::before { content: "📂 "; }
.jn-meta-view::before { content: "👁 "; }

/* ============ 10. 分类板块 ============ */
.jn-cat-section { --jn-cat-color: var(--jn-primary); }
.jn-cat-section .jn-module-head { border-bottom-color: var(--jn-cat-color); }
.jn-cat-section .jn-module-head::after { background: var(--jn-cat-color); }
.jn-cat-section .jn-module-title { color: var(--jn-cat-color); }
.jn-cat-tag {
  display: inline-block;
  width: 6px; height: 22px;
  background: var(--jn-cat-color);
  vertical-align: middle;
  margin-right: 8px;
  border-radius: 2px;
}
.jn-cat-subnav { display: flex; gap: 14px; font-size: 13px; align-items: center; }
.jn-cat-subnav a { color: var(--jn-text-soft); }
.jn-cat-subnav a:hover { color: var(--jn-cat-color); }
.jn-cat-submeta { color: var(--jn-gray); font-size: 12px; }
.jn-cat-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 24px;
  padding: 20px 22px 24px;
}
.jn-cat-main { display: flex; flex-direction: column; }
.jn-cat-cover {
  display: block; aspect-ratio: 16/10; overflow: hidden;
  border-radius: 8px; margin-bottom: 12px;
  background: var(--jn-soft);
}
.jn-cat-cover--ph {
  background: linear-gradient(135deg, var(--jn-cat-color), rgba(0,0,0,.1));
  opacity: .3;
}
.jn-cat-cover img { width: 100%; height: 100%; object-fit: cover; transition: .3s; }
.jn-cat-main:hover .jn-cat-cover img { transform: scale(1.06); }
.jn-cat-main h3 { margin: 0 0 8px; font-size: 19px; font-weight: 700; line-height: 1.5; }
.jn-cat-main h3 a { color: var(--jn-ink); }
.jn-cat-main h3 a:hover { color: var(--jn-cat-color); }
.jn-cat-row {
  padding: 12px 0;
  border-bottom: 1px dashed var(--jn-border);
  display: flex; align-items: center; gap: 10px;
  transition: .2s;
}
.jn-cat-row:hover { padding-left: 8px; background: var(--jn-accent-light); border-radius: 4px; }
.jn-cat-row:last-child { border-bottom: 0; }
.jn-cat-row-dot {
  flex-shrink: 0;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--jn-cat-color); opacity: .5;
}
.jn-cat-row h4 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.5; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jn-cat-row h4 a { color: var(--jn-text); }
.jn-cat-row:hover h4 a { color: var(--jn-cat-color); }
.jn-cat-row .jn-meta { margin-left: auto; flex-shrink: 0; }

/* ============ 11. 排行榜 ============ */
.jn-rank { display: flex; align-items: center; gap: 16px; padding: 14px 22px; border-bottom: 1px dashed var(--jn-border); transition: .2s; }
.jn-rank:hover { background: var(--jn-accent-light); padding-left: 28px; }
.jn-rank:last-child { border-bottom: 0; }
.jn-rank-num {
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: 900;
  color: var(--jn-gray);
  width: 44px; flex-shrink: 0;
  text-align: center;
  font-style: italic;
}
.jn-rank-1 .jn-rank-num { color: var(--jn-accent); }
.jn-rank-2 .jn-rank-num { color: #e67e22; }
.jn-rank-3 .jn-rank-num { color: #d4a017; }
.jn-rank-body { flex: 1; min-width: 0; }
.jn-rank-body h4 { margin: 0 0 6px; font-size: 16px; font-weight: 700; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jn-rank-body h4 a { color: var(--jn-ink); }
.jn-rank-body h4 a:hover { color: var(--jn-accent); }

/* ============ 12. 推荐阅读 ============ */
.jn-rec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 18px 22px 22px;
}
.jn-rec-card {
  position: relative;
  padding: 14px 14px 14px 50px;
  background: var(--jn-soft);
  border-radius: 8px;
  border: 1px solid var(--jn-border);
  min-height: 80px;
  transition: .2s;
}
.jn-rec-card:hover { background: #fff; box-shadow: var(--jn-shadow-hover); transform: translateY(-2px); }
.jn-rec-num {
  position: absolute;
  left: 14px; top: 14px;
  font-family: Georgia, serif;
  font-size: 24px;
  font-weight: 900;
  color: var(--jn-accent);
  font-style: italic;
}
.jn-rec-card h3 { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.jn-rec-card h3 a { color: var(--jn-text); }
.jn-rec-card:hover h3 a { color: var(--jn-accent); }
.jn-rec-card .jn-meta { margin-top: 8px; }

/* ============ 13. 右栏 widget ============ */
.jn-widget {
  background: var(--jn-card);
  border-radius: var(--jn-radius);
  box-shadow: var(--jn-shadow);
  border: 1px solid var(--jn-border);
  overflow: hidden;
}
.jn-widget-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 2px solid var(--jn-soft-2);
  position: relative;
}
.jn-widget-head::after {
  content: ""; position: absolute;
  left: 18px; bottom: -2px;
  width: 36px; height: 2px;
  background: var(--jn-accent);
}
.jn-widget-title { margin: 0; font-size: 16px; font-weight: 800; color: var(--jn-primary); }
.jn-widget-tag {
  background: var(--jn-accent);
  color: #fff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 700;
  letter-spacing: .5px;
}
.jn-widget-tag.jn-pulse { animation: jn-pulse-bg 1.5s infinite; }
@keyframes jn-pulse-bg {
  0%,100% { background: var(--jn-accent); }
  50% { background: var(--jn-accent-dark); }
}
.jn-widget-tag.jn-cal-date { background: var(--jn-primary); }
.jn-widget-more { font-size: 12px; color: var(--jn-gray) !important; }
.jn-widget-desc { padding: 14px 18px 0; margin: 0; font-size: 13px; color: var(--jn-text-soft); }

/* 热点 TOP10 (带进度条) */
.jn-hotlist { list-style: none; margin: 0; padding: 6px 0 14px; }
.jn-hotlist-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--jn-soft-2);
  font-size: 14px;
  transition: .2s;
}
.jn-hotlist-item:hover { background: var(--jn-accent-light); padding-left: 24px; }
.jn-hotlist-item:last-child { border-bottom: 0; }
.jn-hotlist-num {
  font-family: Georgia, serif;
  font-size: 18px;
  font-weight: 900;
  color: var(--jn-gray);
  width: 22px; flex-shrink: 0; text-align: center;
  font-style: italic;
}
.jn-hotlist-1, .jn-hotlist-2, .jn-hotlist-3 { background: rgba(211, 47, 47, .04); }
.jn-hotlist-1 .jn-hotlist-num { color: var(--jn-accent); }
.jn-hotlist-2 .jn-hotlist-num { color: #e67e22; }
.jn-hotlist-3 .jn-hotlist-num { color: #d4a017; }
.jn-hotlist-title {
  flex: 1;
  color: var(--jn-text) !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jn-hotlist-title:hover { color: var(--jn-accent) !important; }
.jn-hotlist-bar {
  flex-shrink: 0;
  width: 60px; height: 4px;
  background: var(--jn-soft-2);
  border-radius: 2px;
  overflow: hidden;
}
.jn-hotlist-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--jn-accent) 0%, #ff9800 100%);
  transition: width .5s ease;
}
.jn-hotlist-hot {
  font-size: 11px;
  color: var(--jn-accent);
  font-weight: 700;
  flex-shrink: 0;
  min-width: 50px;
  text-align: right;
}

/* 订阅 widget */
.jn-widget-subscribe { padding: 0 0 18px; }
.jn-widget-subscribe .jn-widget-title { padding: 14px 18px 0; }
.jn-sub-form {
  display: flex;
  margin: 14px 18px 0;
  border: 1px solid var(--jn-border);
  border-radius: 6px;
  overflow: hidden;
  transition: .2s;
}
.jn-sub-form:focus-within { border-color: var(--jn-primary); }
.jn-sub-form.jn-sub-shake { animation: jn-shake .4s; border-color: var(--jn-accent); }
@keyframes jn-shake {
  0%,100% { transform: translateX(0); }
  20%,60% { transform: translateX(-6px); }
  40%,80% { transform: translateX(6px); }
}
.jn-sub-form input {
  flex: 1; border: 0; padding: 10px 12px;
  font-size: 13px; outline: none;
  background: var(--jn-soft);
}
.jn-sub-form button {
  border: 0; padding: 0 16px;
  background: var(--jn-accent); color: #fff;
  font-weight: 700; cursor: pointer;
  font-size: 13px;
  transition: .2s;
}
.jn-sub-form button:hover { background: var(--jn-accent-dark); }
.jn-sub-form button.jn-sub-done { background: #2e7d32; }
.jn-sub-form button:disabled { opacity: .8; cursor: default; }
.jn-widget-foot { margin: 12px 18px 0; font-size: 12px; color: var(--jn-gray); }
.jn-widget-foot strong { color: var(--jn-accent); }

/* 关键词 cloud */
.jn-tagcloud {
  padding: 16px 18px 20px;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.jn-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: var(--jn-soft);
  border-radius: 4px;
  transition: .2s;
  border: 1px solid transparent;
}
.jn-tag sup {
  font-size: 10px;
  margin-left: 4px;
  opacity: .6;
}
.jn-tag:hover { background: var(--jn-primary); color: #fff !important; border-color: var(--jn-primary); }
.jn-tag:hover sup { opacity: 1; }

/* 今日要闻日历 */
.jn-widget-calendar { padding: 0 0 14px; }
.jn-cal-list {
  list-style: none; margin: 0;
  padding: 12px 18px;
}
.jn-cal-list li {
  display: flex; gap: 10px; align-items: center;
  padding: 7px 0;
  border-bottom: 1px dashed var(--jn-border);
  font-size: 13px;
}
.jn-cal-list li:last-child { border-bottom: 0; }
.jn-cal-time {
  flex-shrink: 0;
  font-family: Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--jn-gray);
  background: var(--jn-soft);
  padding: 1px 6px;
  border-radius: 3px;
}
.jn-cal-list li a { color: var(--jn-text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jn-cal-list li a:hover { color: var(--jn-accent); }
.jn-cal-empty { color: var(--jn-gray); }
.jn-cal-stat {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--jn-soft-2);
  background: var(--jn-soft);
}
.jn-cal-stat div { text-align: center; }
.jn-cal-stat b { display: block; font-size: 22px; color: var(--jn-primary); font-weight: 800; }
.jn-cal-stat span { font-size: 11px; color: var(--jn-gray); }

/* 文章归档 */
.jn-archive { list-style: none; margin: 0; padding: 8px 18px 16px; }
.jn-archive li { border-bottom: 1px dashed var(--jn-border); }
.jn-archive li:last-child { border-bottom: 0; }
.jn-archive li a {
  display: flex; justify-content: space-between;
  padding: 8px 0;
  color: var(--jn-text) !important;
  font-size: 13px;
}
.jn-archive li a:hover { color: var(--jn-accent) !important; }
.jn-archive-count {
  font-size: 11px;
  color: var(--jn-gray);
  background: var(--jn-soft);
  padding: 1px 6px;
  border-radius: 10px;
}

/* ============ 14. 单文章页 ============ */
.jn-single {
  background: var(--jn-card);
  border-radius: var(--jn-radius);
  box-shadow: var(--jn-shadow);
  border: 1px solid var(--jn-border);
  padding: 32px 44px 40px;
}
.jn-breadcrumb {
  font-size: 13px;
  color: var(--jn-gray);
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--jn-soft-2);
}
.jn-breadcrumb a { color: var(--jn-text-soft) !important; }
.jn-breadcrumb a:hover { color: var(--jn-accent) !important; }
.jn-h1 {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--jn-ink);
  margin: 0 0 16px;
  letter-spacing: 1px;
}
.jn-meta-big {
  font-size: 13px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--jn-border);
  margin-bottom: 24px;
}
.jn-single-cover { margin: 0 0 12px; border-radius: var(--jn-radius); overflow: hidden; }
.jn-caption { text-align: center; font-size: 13px; color: var(--jn-gray); margin-bottom: 18px; }
.jn-content { font-size: 16px; line-height: 1.95; color: var(--jn-text); }
.jn-content p { margin: 0 0 1.2em; }
.jn-content h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--jn-primary);
  border-left: 4px solid var(--jn-accent);
  padding-left: 14px;
  margin: 1.7em 0 .8em;
}
.jn-content h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--jn-primary-light);
  margin: 1.4em 0 .6em;
}
.jn-content blockquote {
  border-left: 4px solid var(--jn-accent);
  background: var(--jn-soft);
  padding: 16px 20px;
  margin: 1.4em 0;
  color: var(--jn-text-soft);
  border-radius: 0 8px 8px 0;
  font-style: italic;
}
.jn-content pre, .jn-content code {
  background: #1f2430;
  color: #e8ecf4;
  border-radius: 6px;
  font-family: Menlo, Consolas, monospace;
  font-size: 14px;
}
.jn-content code { padding: 2px 6px; }
.jn-content pre { padding: 16px; overflow-x: auto; line-height: 1.6; }
.jn-content img { border-radius: 8px; margin: 14px 0; }
.jn-tags { margin-top: 28px; padding-top: 20px; border-top: 1px dashed var(--jn-border); }
.jn-tags a {
  display: inline-block;
  padding: 4px 12px;
  margin: 4px 4px 4px 0;
  background: var(--jn-soft);
  color: var(--jn-text-soft) !important;
  font-size: 13px;
  border-radius: 4px;
}
.jn-tags a:hover { background: var(--jn-primary); color: #fff !important; }
.jn-share { margin-top: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jn-share-label { font-size: 13px; color: var(--jn-gray); margin-right: 6px; }
.jn-share a {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 13px;
  color: #fff !important;
  cursor: pointer;
}
.jn-share-wx { background: #07c160; }
.jn-share-wb { background: #e6162d; }
.jn-share-qq { background: #1296db; }
.jn-share-link { background: #5b6271; }
.jn-post-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--jn-soft-2);
}
.jn-post-nav a {
  display: block;
  padding: 16px 20px;
  background: var(--jn-soft);
  border-radius: 8px;
  border: 1px solid transparent;
  transition: .2s;
}
.jn-post-nav a:hover { background: #fff; border-color: var(--jn-primary); transform: translateY(-2px); box-shadow: var(--jn-shadow); }
.jn-post-nav-prev .jn-post-nav-label, .jn-post-nav-next .jn-post-nav-label {
  display: block;
  font-size: 12px; color: var(--jn-gray); margin-bottom: 6px;
}
.jn-post-nav-title { font-size: 14px; font-weight: 600; color: var(--jn-text); }
.jn-post-nav-next { text-align: right; }

/* ============ 15. 页脚 ============ */
.jn-footer {
  background: linear-gradient(135deg, #061530 0%, #0a2540 100%);
  color: rgba(255,255,255,.7);
  margin-top: 60px;
}
.jn-footer-top { padding: 48px 0 40px; }
.jn-footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
  gap: 36px;
}
.jn-footer-h {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--jn-accent);
  display: inline-block;
  letter-spacing: 1px;
}
.jn-footer-col p, .jn-footer-col li { font-size: 13px; line-height: 1.9; }
.jn-footer-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.jn-footer-list a { color: rgba(255,255,255,.7) !important; font-size: 13px; }
.jn-footer-list a:hover { color: var(--jn-accent) !important; }
.jn-footer-links { grid-template-columns: 1fr 1fr; }
.jn-footer-bot {
  background: rgba(0,0,0,.25);
  padding: 18px 0;
  font-size: 12px;
  color: rgba(255,255,255,.55);
}
.jn-footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  flex-wrap: wrap;
  gap: 14px;
}
.jn-footer-extra a { color: rgba(255,255,255,.55) !important; margin: 0 4px; }
.jn-footer-extra a:hover { color: #fff !important; }
.jn-icp { color: rgba(255,255,255,.4); font-size: 11px; }

/* ============ 16. QR 弹窗 ============ */
.jn-modal {
  position: fixed; inset: 0;
  z-index: 9999;
}
.jn-modal-mask {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: .2s;
}
.jn-modal.jn-modal-active .jn-modal-mask { opacity: 1; }
.jn-modal-body {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(.9);
  background: #fff;
  border-radius: 12px;
  padding: 32px 36px 28px;
  width: 320px;
  text-align: center;
  opacity: 0;
  transition: .2s;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.jn-modal.jn-modal-active .jn-modal-body { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.jn-modal-close {
  position: absolute;
  right: 12px; top: 12px;
  border: 0; background: transparent;
  font-size: 24px;
  cursor: pointer;
  color: var(--jn-gray);
  width: 32px; height: 32px;
  line-height: 1;
  border-radius: 50%;
  transition: .2s;
}
.jn-modal-close:hover { background: var(--jn-soft); color: var(--jn-accent); }
.jn-modal-body h3 { margin: 0 0 18px; font-size: 18px; font-weight: 700; color: var(--jn-primary); }
.jn-qrcode {
  position: relative;
  width: 200px; height: 200px;
  margin: 0 auto 14px;
  padding: 10px;
  border: 1px solid var(--jn-border);
  border-radius: 6px;
}
.jn-qrcode-cells {
  display: grid;
  grid-template-columns: repeat(25, 1fr);
  gap: 1px;
  width: 100%; height: 100%;
  background: #fff;
}
.jn-qrcode-cells i { background: transparent; }
.jn-qrcode-cells i.on { background: #1a1d24; }
.jn-qrcode-corner {
  position: absolute;
  width: 32px; height: 32px;
  background:
    linear-gradient(#1a1d24, #1a1d24) top left/12px 12px no-repeat,
    linear-gradient(#1a1d24, #1a1d24) top right/12px 12px no-repeat,
    linear-gradient(#1a1d24, #1a1d24) bottom left/12px 12px no-repeat,
    #fff;
  border: 5px solid #1a1d24;
  border-radius: 4px;
}
.jn-qrcode-tl { top: 8px; left: 8px; }
.jn-qrcode-tr { top: 8px; right: 8px; }
.jn-qrcode-bl { bottom: 8px; left: 8px; }
.jn-modal-body p { margin: 0; font-size: 13px; color: var(--jn-text-soft); }

/* ============ 17. Tooltip ============ */
.jn-tip {
  position: absolute;
  background: rgba(0,0,0,.85);
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  pointer-events: none;
  z-index: 99999;
  animation: jn-tip-in .15s;
}
.jn-tip::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -4px;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: rgba(0,0,0,.85);
}
@keyframes jn-tip-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============ 18. 响应式 ============ */
@media (max-width: 1024px) {
  .jn-grid-main { grid-template-columns: 1fr; }
  .jn-grid-right { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  .jn-grid-right .jn-widget-calendar { grid-column: span 2; }
  .jn-footer-grid { grid-template-columns: 1fr 1fr; }
  .jn-focus { grid-template-columns: 1fr; height: 360px; }
  .jn-focus-thumbs { display: none; }
}
@media (max-width: 760px) {
  .jn-ticker-label, .jn-ticker-time { display: none; }
  .jn-header-top .jn-wrap { height: 28px; font-size: 11px; }
  .jn-header-meta { gap: 8px; }
  .jn-header-tools { display: none; }
  .jn-header-mid-inner { flex-wrap: wrap; gap: 14px; }
  .jn-logo-cn { font-size: 22px; }
  .jn-search { order: 3; flex-basis: 100%; }
  .jn-header-cta .jn-cta-ghost { display: none; }
  .jn-nav-list { overflow-x: auto; flex-wrap: nowrap; }
  .jn-nav-item > a { padding: 0 12px; font-size: 14px; white-space: nowrap; }
  .jn-nav-right { display: none; }
  .jn-focus { height: 280px; }
  .jn-focus-text { padding: 16px 20px 22px; }
  .jn-focus-text h3 { font-size: 20px; max-width: 100%; }
  .jn-focus-summary { display: none; }
  .jn-focus-meta { display: none; }
  .jn-grid-right { grid-template-columns: 1fr; }
  .jn-grid-right .jn-widget-calendar { grid-column: auto; }
  .jn-footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .jn-mixed-main { grid-template-columns: 1fr; }
  .jn-mixed-row { grid-template-columns: 1fr; }
  .jn-mixed-row .jn-mixed-thumb { aspect-ratio: 16/9; }
  .jn-cat-grid { grid-template-columns: 1fr; gap: 18px; }
  .jn-rec-grid { grid-template-columns: 1fr 1fr; }
  .jn-single { padding: 22px 18px 28px; }
  .jn-h1 { font-size: 24px; }
  .jn-post-nav { grid-template-columns: 1fr; }
  .jn-post-nav-next { text-align: left; }
}