:root {
  --ink: #0b1324;
  --muted: #627086;
  --blue: #005dcc;
  --blue-weak: #eef6ff;
  --cyan: #e8f7ff;
  --mint: #eaf9f2;
  --mint-ink: #087447;
  --gold: #f5b21a;
  --line: #e4eaf0;
  --surface: #ffffff;
  --canvas: #f7fafc;
  --shadow: 0 10px 30px rgba(20, 45, 77, 0.06);
  --radius: 8px;
  --display: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-body: 16px;
  --font-section: 20px;
  --font-card-title: 15px;
  --font-summary: 13px;
  --font-meta: 12px;
}

@font-face {
  font-family: "QidianIconfont";
  src: url("assets/iconfont/qidian-iconfont.woff2") format("woff2");
  font-display: block;
  font-style: normal;
  font-weight: 400;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--canvas);
  font-family: var(--display);
  font-size: var(--font-body);
  line-height: 1.55;
}

button, input, select { font: inherit; }

button { cursor: pointer; }

a { color: inherit; text-decoration: none; }

img { display: block; max-width: 100%; }

.data-icon {
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  color: currentColor;
  font-family: "QidianIconfont";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.data-icon::before { content: var(--icon-glyph); }
.icon-search { --icon-glyph: "\e792"; }
.icon-box { --icon-glyph: "\e627"; }
.icon-heart { --icon-glyph: "\e784"; }
.icon-video { --icon-glyph: "\e8d4"; }
.icon-wechat { --icon-glyph: "\e609"; }
.icon-book { --icon-glyph: "\e62a"; }
.icon-users { --icon-glyph: "\e61e"; }
.icon-tag { --icon-glyph: "\e628"; }
.icon-news { --icon-glyph: "\e63a"; }
.icon-github { --icon-glyph: "\e64a"; }
.icon-tool { --icon-glyph: "\eb77"; }
.icon-model { --icon-glyph: "\eb74"; }
.icon-mcp { --icon-glyph: "\e642"; }
.icon-message { --icon-glyph: "\e77f"; }
.icon-image { --icon-glyph: "\e66e"; }
.icon-layers { --icon-glyph: "\e60c"; }
.icon-network { --icon-glyph: "\e605"; }
.icon-package { --icon-glyph: "\e616"; }
.icon-globe { --icon-glyph: "\e603"; }
.icon-time { --icon-glyph: "\e747"; }
.icon-code { --icon-glyph: "\e61b"; }
.icon-license { --icon-glyph: "\e6ba"; }
.icon-lock { --icon-glyph: "\e746"; }
.icon-remote { --icon-glyph: "\e6c7"; }
.icon-repository { --icon-glyph: "\e727"; }
.icon-music::before {
  width: 100%;
  height: 100%;
  background: currentColor;
  content: "";
  -webkit-mask: url("assets/icons/iconfont-music-493428.svg") center / contain no-repeat;
  mask: url("assets/icons/iconfont-music-493428.svg") center / contain no-repeat;
}

.skip-link {
  position: fixed;
  top: -48px;
  left: 16px;
  z-index: 20;
  padding: 9px 12px;
  border-radius: 6px;
  color: #fff;
  background: var(--blue);
}

.skip-link:focus { top: 16px; }

.shell { min-height: 100vh; }

.container { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }

.site-header {
  position: relative;
  z-index: 10;
  border-bottom: 1px solid rgba(228, 234, 240, 0.88);
  background: #ffffff;
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 68px;
}

.brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }

.brand-mark {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #d6eaff;
  border-radius: 9px;
  background: var(--blue-weak);
}

.brand-mark img { width: 25px; height: 25px; object-fit: contain; }

.brand-copy { display: grid; gap: 1px; line-height: 1.15; }
.brand-copy strong { font-size: 15px; letter-spacing: 0; }
.brand-copy small { color: var(--muted); font-size: 10px; }

.primary-nav { display: flex; align-items: center; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.primary-nav::-webkit-scrollbar { display: none; }

.nav-link {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 6px;
  color: #42516a;
  font-size: 14px;
  white-space: nowrap;
}

.nav-link:hover, .nav-link[aria-current="page"] { color: var(--blue); background: var(--blue-weak); }

.header-actions { display: flex; align-items: center; gap: 9px; margin-left: auto; }

.language-menu {
  position: relative;
  display: inline-flex;
}

.language-menu button, .plain-button, .icon-button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #435168;
  background: var(--surface);
}

.language-menu button { padding: 0 10px; font-size: 13px; }

.language-options {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  display: none;
  width: 128px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
}

.language-options.is-open { display: grid; }
.language-options button { border: 0; text-align: left; }
.language-options button:hover { color: var(--blue); background: var(--blue-weak); }

.page { padding: 34px 0 70px; }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  gap: 28px;
  padding: 34px;
  overflow: hidden;
  border: 1px solid #dcebf3;
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow);
}

.hero::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 42%;
  height: 100%;
  border-left: 1px solid #dceef8;
  background: #f6fcff;
  content: "";
  opacity: .72;
  pointer-events: none;
}

.hero-copy, .hero-brief { position: relative; z-index: 1; }
.eyebrow { margin: 0 0 8px; color: var(--blue); font-size: 12px; font-weight: 700; letter-spacing: .04em; }

h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 690px; margin-bottom: 12px; font-size: clamp(30px, 4vw, 46px); line-height: 1.16; letter-spacing: 0; }
h2 { margin-bottom: 2px; font-size: 22px; line-height: 1.28; letter-spacing: 0; }
h3 { margin-bottom: 7px; font-size: 16px; line-height: 1.35; letter-spacing: 0; }

.hero-summary { max-width: 620px; margin-bottom: 22px; color: var(--muted); font-size: 16px; }

.search-row { display: flex; max-width: 650px; min-height: 48px; gap: 8px; padding: 5px; border: 1px solid #cfe5f2; border-radius: 8px; background: #fff; box-shadow: 0 8px 20px rgba(32, 100, 145, .06); }
.search-row input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--ink); background: transparent; }
.search-row input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.search-row input::placeholder { color: #8a99ad; }

.primary-button {
  min-width: 76px;
  border: 1px solid var(--blue);
  border-radius: 5px;
  color: #fff;
  background: var(--blue);
}

.primary-button:hover { background: #0059de; }

.brief-panel {
  align-self: stretch;
  padding: 20px;
  border: 1px solid #d9edf7;
  border-radius: 8px;
  background: rgba(248, 253, 255, .92);
}

.brief-header, .section-heading, .row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brief-header span, .section-kicker, .meta, .muted { color: var(--muted); font-size: 13px; }
.brief-header strong { color: var(--blue); font-size: 13px; }
.brief-panel h2 { margin: 18px 0 9px; font-size: 22px; }
.brief-panel p { margin-bottom: 13px; color: #526075; font-size: 14px; }
.text-link { display: inline-flex; align-items: center; gap: 4px; color: var(--blue); font-size: 14px; font-weight: 650; }
.text-link:hover { text-decoration: underline; }

.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 18px 0 40px; }
.stat-card { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; min-height: 76px; padding: 15px; border: 1px solid #e0ebf0; border-radius: 10px; background: #fff; box-shadow: 0 7px 20px rgba(16, 65, 91, .045); }
.stat-symbol { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #d5edf8; border-radius: 9px; color: var(--blue); background: var(--cyan); font-size: 10px; font-weight: 800; }
.stat-symbol .data-icon { width: 17px; height: 17px; }
.stat-symbol.mint { border-color: #cceedd; color: var(--mint-ink); background: var(--mint); }
.stat-symbol.gold { border-color: #f8e4b3; color: #9a6300; background: #fff8e6; }
.stat-card span { color: var(--muted); font-size: 12px; }
.stat-card strong { display: block; margin: 1px 0; font-size: 22px; line-height: 1; }
.stat-card em { color: var(--mint-ink); font-size: 11px; font-style: normal; }
.stat-card em.down { color: #8e5000; }

.content-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(290px, .7fr); gap: 28px; align-items: start; }
.content-column { display: grid; gap: 36px; min-width: 0; }
.side-column { display: grid; gap: 18px; }

.section-heading { margin-bottom: 14px; }
.section-heading p { margin: 0; }
.section-heading .text-link { font-size: 13px; }

.lead-story { display: grid; grid-template-columns: 1.1fr .9fr; min-height: 300px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); }
.lead-story-copy { display: flex; flex-direction: column; justify-content: center; padding: 28px; }
.lead-story-copy h2 { font-size: 27px; }
.lead-story-copy p { margin-bottom: 16px; color: #5b687a; }
.story-visual { position: relative; min-height: 220px; overflow: hidden; border-left: 1px solid var(--line); background-color: #edf8ff; }
.story-visual::before, .story-visual::after { position: absolute; content: ""; }
.story-visual::before { top: 42px; left: 42px; width: 126px; height: 126px; border: 16px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #addcf4, 0 0 0 31px rgba(255,255,255,.52); }
.story-visual::after { right: 42px; bottom: 48px; width: 124px; height: 74px; border: 1px solid #91c7e5; border-radius: 7px; background: #fff; box-shadow: 12px -13px 0 rgba(255,255,255,.8); }

.source-line { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 11px; }
.news-source-line { gap: 7px; }
.source-chip, .tag, .language-tag, .status-chip { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 650; white-space: nowrap; }
.source-chip { color: #4d6078; background: #f0f4f8; }
.tag { color: #1664c8; background: var(--blue-weak); }
.language-tag { color: #546477; border: 1px solid var(--line); background: #fff; }
.status-chip { color: var(--mint-ink); background: var(--mint); }

.quick-list, .news-list, .rank-list, .compact-list { margin: 0; padding: 0; list-style: none; }
.quick-list li { display: grid; grid-template-columns: 50px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.quick-list li:last-child, .compact-list li:last-child { border-bottom: 0; }
.quick-time { color: var(--blue); font-size: 12px; font-weight: 700; }
.quick-list a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-list a:hover, .news-item h3 a:hover { color: var(--blue); }

.side-box { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.side-box h2 { font-size: 17px; }
.side-box p { color: var(--muted); font-size: 13px; }
.brief-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.brief-list li { padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.brief-list li:last-child { padding-bottom: 0; border-bottom: 0; }
.brief-list strong { display: block; margin: 4px 0; font-size: 14px; }

.collection { display: grid; gap: 12px; }
.story-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.story-card { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: border-color .18s ease, transform .18s ease; }
.story-card:hover, .resource-card:hover, .review-card:hover { border-color: #a9d8f3; transform: translateY(-2px); }
.story-card h3 { margin: 9px 0 7px; }
.story-card p { margin-bottom: 0; color: var(--muted); font-size: 13px; }

.recommend-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.resource-card { display: grid; gap: 13px; min-height: 220px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: border-color .18s ease, transform .18s ease; }
.resource-card h3 { margin: 0; }
.resource-card p { margin: -6px 0 0; color: var(--muted); font-size: 13px; }
.card-logo { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #cde5f3; border-radius: 8px; color: var(--blue); background: var(--cyan); font-size: 12px; font-weight: 800; }
.card-logo .data-icon { width: 18px; height: 18px; }
.card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.star-count { color: #8a6200; font-size: 12px; font-weight: 700; }

.review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.review-card { padding: 20px; border-top: 3px solid #a6dafa; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: border-color .18s ease, transform .18s ease; }
.review-card h3 { margin: 10px 0 5px; font-size: 18px; }
.review-card p { color: var(--muted); font-size: 13px; }
.score-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 15px; }
.score-row div { min-width: 0; padding-top: 7px; border-top: 2px solid #d9ecf5; color: var(--muted); font-size: 10px; }
.score-row strong { display: block; color: var(--ink); font-size: 14px; }

.rank-list { display: grid; gap: 0; }
.rank-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.rank-list li:last-child { border-bottom: 0; }
.rank-number { color: var(--blue); font-weight: 800; }
.rank-list strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.rank-list small { color: var(--muted); font-size: 11px; }

.newsletter { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 25px 28px; border: 1px solid #dcebf3; border-radius: 10px; background: #f4fbff; }
.newsletter h2 { margin-bottom: 5px; font-size: 20px; }
.newsletter p { margin: 0; color: var(--muted); font-size: 13px; }

.page-header { margin-bottom: 24px; }
.page-header h1 { margin-bottom: 8px; font-size: 36px; }
.page-header p { max-width: 720px; margin-bottom: 0; color: var(--muted); }

.content-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 24px; align-items: start; }
.filter-panel { position: sticky; top: 92px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.filter-panel h2 { margin-bottom: 15px; font-size: 17px; }
.filter-group { display: grid; gap: 8px; padding: 15px 0; border-top: 1px solid var(--line); }
.filter-group label { color: #42516a; font-size: 13px; }
.filter-group input[type="checkbox"] { margin-right: 7px; accent-color: var(--blue); }
.filter-group select { width: 100%; min-height: 34px; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; color: #42516a; background: #fff; }
.filter-reset { width: 100%; min-height: 34px; border: 1px solid #cce5f6; border-radius: 6px; color: var(--blue); background: var(--blue-weak); }

.explore-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; margin-bottom: 14px; }
.filter-tabs { display: flex; gap: 7px; overflow-x: auto; }
.filter-tab { flex: 0 0 auto; min-height: 34px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; color: #526075; background: #fff; }
.filter-tab.is-active { border-color: #bee0f7; color: var(--blue); background: var(--blue-weak); }
.page-filter-bar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 16px; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.page-filter-control { display: grid; min-width: 150px; gap: 5px; color: #42516a; font-size: 12px; }
.page-filter-control select { min-height: 36px; padding: 0 32px 0 10px; border: 1px solid #d7e1ea; border-radius: 6px; color: #324359; background: #fff; }
.page-filter-control select:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.page-filter-bar > .result-count { margin: 0 0 8px auto; }
.result-count { color: var(--muted); font-size: 13px; }
.resource-list { display: grid; gap: 10px; }
.result-card { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 17px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.result-card h3 { margin: 0 0 4px; }
.result-card p { margin: 0; color: var(--muted); font-size: 13px; }
.result-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bookmark-button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 6px; color: #69809d; background: #fff; font-size: 16px; }
.bookmark-button.is-saved { border-color: #f3d486; color: #9a6300; background: #fff8e6; }

.news-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.news-item { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.news-date { color: var(--blue); font-size: 13px; font-weight: 700; }
.news-item h3 { margin: 8px 0 7px; font-size: 20px; }
.news-item p { margin-bottom: 9px; color: var(--muted); font-size: 14px; }

.article { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 28px; align-items: start; }
.article-main { padding: 32px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.article-main h1 { max-width: none; font-size: 38px; }
.article-lead { color: #4e5e74; font-size: 18px; }
.article-main h2 { margin-top: 34px; }
.article-main p { color: #425168; }
.pros-cons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 20px 0; }
.pros-cons section { padding: 16px; border-radius: 7px; }
.pros { background: var(--mint); }
.cons { background: #fff8eb; }
.pros-cons h3 { margin-bottom: 6px; }
.pros-cons ul { margin: 0; padding-left: 18px; color: #526075; font-size: 14px; }

.empty-state { padding: 40px; border: 1px dashed #bdd8e8; border-radius: var(--radius); color: var(--muted); text-align: center; background: #fbfdff; }

.site-footer { border-top: 1px solid var(--line); background: #fff; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 82px; color: var(--muted); font-size: 12px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 14px; }
.footer-nav a:hover { color: var(--blue); }

.toast { position: fixed; right: 20px; bottom: 20px; z-index: 30; max-width: min(360px, calc(100% - 40px)); padding: 12px 14px; border: 1px solid #badef3; border-radius: 8px; color: #174c72; background: #eff9ff; box-shadow: var(--shadow); transform: translateY(120px); opacity: 0; transition: .2s ease; }
.toast.is-visible { transform: translateY(0); opacity: 1; }

/* Figma reference adaptation: dense, light editorial portal homepage. */
.home-search { display: grid; justify-items: center; gap: 8px; margin: -4px 0 18px; }
.home-search .search-row { width: min(700px, 100%); min-height: 42px; }
.home-search .primary-button { min-width: 68px; }
.hot-topics { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; color: var(--muted); font-size: 12px; }
.hot-topics a { padding: 1px 8px; border: 1px solid #e8edf3; border-radius: 999px; color: #5e6f85; background: #fff; }
.hot-topics a:hover { border-color: #bcdcf0; color: var(--blue); }

.home-hero-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(280px, 1fr); gap: 14px; margin-bottom: 14px; }
.home-lead, .rapid-panel, .home-panel { border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.home-lead { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(210px, .85fr); gap: 24px; min-height: 214px; padding: 22px; }
.home-lead h1 { margin: 4px 0 10px; font-size: 24px; line-height: 1.34; }
.home-lead p:not(.section-kicker) { max-width: 460px; margin-bottom: 11px; color: #617087; font-size: 13px; }
.compact-button { display: inline-grid; min-height: 30px; min-width: 62px; place-items: center; padding: 0 10px; border-radius: 4px; font-size: 12px; }
.lead-visual, .feed-visual, .language-visual { position: relative; overflow: hidden; border: 1px solid #b7d8e9; border-radius: 6px; background: #eaf7fc; }
.lead-visual { min-height: 148px; align-self: center; }
.lead-visual::before, .lead-visual::after, .feed-visual::before, .language-visual::before { position: absolute; content: ""; }
.lead-visual::before { top: 26%; left: 20%; width: 52%; height: 52%; border: 10px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #96cde9, 0 0 0 20px rgba(255,255,255,.52); }
.lead-visual::after { right: 12%; bottom: 18%; width: 34%; height: 30%; border: 1px solid #7cb6d5; border-radius: 4px; background: rgba(255,255,255,.92); }
.lead-visual i, .feed-visual i, .language-visual i { position: absolute; display: block; border-radius: 50%; background: #0a8fd8; }
.lead-visual i { top: 16%; right: 16%; width: 10px; height: 10px; box-shadow: -52px 76px 0 #6ec3e7, -89px -11px 0 #82d8c2; }

.rapid-panel { padding: 18px; }
.rapid-panel .section-heading { margin-bottom: 3px; }
.rapid-panel h2 { font-size: 16px; }
.rapid-panel .quick-list li { grid-template-columns: 38px minmax(0, 1fr); padding: 7px 0; }
.rapid-panel .quick-list a { font-size: 12px; }
.rapid-panel .quick-time { font-size: 11px; }

.stat-row { gap: 10px; margin: 0 0 14px; }
.stat-card { min-height: 72px; padding: 13px; border-radius: 8px; box-shadow: none; }
.stat-card strong { font-size: 20px; }

.home-pair-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.home-triple-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.home-panel { min-width: 0; padding: 17px; }
.home-panel .section-heading { align-items: flex-start; margin-bottom: 13px; }
.home-panel .section-heading h2 { margin: 0 0 8px; font-size: 16px; }
.home-panel .section-heading .text-link { margin-top: 2px; }
.category-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 1px; scrollbar-width: none; }
.category-tabs::-webkit-scrollbar { display: none; }
.category-tabs button, .category-tabs > span, .category-tabs > a { display: inline-flex; align-items: center; flex: 0 0 auto; min-height: 22px; padding: 0 7px; border: 0; border-radius: 999px; color: #56677c; background: transparent; font-size: 11px; }
.category-tabs button.is-active, .category-tabs button:hover, .category-tabs > span.is-active, .category-tabs > a.is-active, .category-tabs > a:hover { color: var(--blue); background: var(--blue-weak); }
.news-feed-list, .tool-list { display: grid; }
.news-feed-row { display: grid; grid-template-columns: 98px minmax(0, 1fr); gap: 12px; min-height: 96px; padding: 9px 0; border-top: 1px solid #edf1f4; }
.news-feed-row:first-child, .tool-row:first-child { border-top: 0; padding-top: 0; }
.feed-visual { min-height: 70px; }
.feed-visual::before { top: 22%; left: 27%; width: 47%; height: 47%; border: 6px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #93c9e5; }
.feed-visual i { top: 18%; right: 20%; width: 8px; height: 8px; box-shadow: -24px 42px 0 #70c7e5; }
.visual-2 { border-color: #f0b992; background: #fff0e8; }
.visual-2::before { border-color: #f58045; box-shadow: 0 0 0 1px #f39c6b; }
.visual-2 i { background: #ffb147; box-shadow: -24px 42px 0 #e85847; }
.visual-3 { border-color: #b7d9f8; background: #eef8ff; }
.visual-3::before { width: 28%; border-color: #2f86ff; box-shadow: 24px 0 0 #dff0ff, 48px 0 0 #2f86ff; }
.visual-3 i { display: none; }
.visual-4 { border-color: #dbe4ec; background: #f5f8fa; }
.visual-4::before { top: 24%; left: 32%; width: 34%; height: 34%; border: 8px solid #f4bb32; border-radius: 50%; box-shadow: 0 0 0 5px #ffe9a4; }
.visual-4 i { top: 40%; right: 25%; width: 6px; height: 6px; box-shadow: -23px 0 0 #111827; }
.news-feed-row h3 { margin: 4px 0; font-size: 13px; line-height: 1.35; }
.news-feed-row p { display: -webkit-box; margin: 0 0 5px; overflow: hidden; color: #69788c; font-size: 11px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.feed-meta { color: #62738a; font-size: 10px; }
.feed-meta span { margin: 0 3px; color: #b0b9c5; }

.tool-row { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 10px; padding: 11px 0; border-top: 1px solid #edf1f4; }
.tool-row .card-logo { width: 38px; height: 38px; }
.tool-row h3 { margin: 0; font-size: 13px; }
.tool-row p { display: -webkit-box; margin: 2px 0 4px; overflow: hidden; color: #68788d; font-size: 11px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.tool-row .result-meta { gap: 4px; margin-top: 0; }
.tool-row .tag, .tool-row .language-tag { min-height: 18px; padding: 1px 6px; font-size: 10px; }
.tool-score { color: #895900; font-size: 11px; }
.bottom-link { display: block; margin-top: 8px; color: var(--blue); text-align: right; font-size: 12px; font-weight: 650; }
.bottom-link:hover { text-decoration: underline; }

.compact-panel { min-height: 292px; }
.mini-list { display: grid; margin: 0; padding: 0; list-style: none; }
.mini-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 7px; padding: 8px 0; border-top: 1px solid #edf1f4; }
.mini-list li:first-child { padding-top: 0; border-top: 0; }
.mini-icon { display: grid; width: 25px; height: 25px; place-items: center; border: 1px solid #d5eaf4; border-radius: 6px; color: var(--blue); background: #f1f9fd; font-size: 9px; font-weight: 800; }
.mini-list strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.mini-list small { display: block; overflow: hidden; color: #5c6f85; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.mini-list em { padding: 3px 5px; border-radius: 4px; color: #056a40; background: #ebf9ef; font-size: 11px; font-style: normal; }
.mini-list time { color: #5c6f85; font-size: 10px; white-space: nowrap; }
.compact-panel .rank-list li { grid-template-columns: 20px minmax(0, 1fr) auto; padding: 8px 0; }
.compact-panel .rank-list strong { font-size: 11px; }
.compact-panel .rank-list small, .compact-panel .rank-list .star-count { font-size: 10px; }

.language-section { margin-bottom: 18px; }
.language-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.language-card { display: grid; grid-template-rows: auto 1fr 64px auto; gap: 8px; min-height: 176px; padding: 12px; border: 1px solid #e9eef2; border-radius: 7px; background: #fff; }
.language-card h3 { margin: 0; font-size: 12px; line-height: 1.45; }
.language-visual { min-height: 62px; }
.language-visual::before { top: 22%; left: 32%; width: 32%; height: 32%; border: 5px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px #85c4e6; }
.language-visual i { top: 26%; right: 26%; width: 7px; height: 7px; box-shadow: -28px 25px 0 #70c7e5; }
.lang-1 { color: #1764cc; border-color: #c8ddfb; background: #eff6ff; }
.lang-2 { color: #a51d56; border-color: #ffd2e3; background: #fff2f7; }
.lang-3 { color: #21699f; border-color: #c5def2; background: #f0f8ff; }
.lang-4 { color: #216d46; border-color: #c7e8d6; background: #f0faf4; }

.site-footer { margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.5fr .72fr .72fr .72fr 1.35fr; gap: 24px; padding: 26px 0; }
.footer-brand p, .footer-subscribe p { margin: 10px 0 0; color: var(--muted); font-size: 11px; }
.footer-column { display: grid; align-content: start; gap: 2px; }
.footer-column strong, .footer-subscribe strong { margin-bottom: 5px; font-size: 12px; }
.footer-column a { display: flex; align-items: center; min-height: 24px; color: #56677c; font-size: 11px; }
.footer-column a:hover { color: var(--blue); }
.footer-subscribe { padding: 13px; border: 1px solid var(--line); border-radius: 7px; }
.footer-subscribe p { margin-top: 2px; }
.footer-subscribe form { display: flex; min-height: 31px; margin-top: 9px; }
.footer-subscribe input { min-width: 0; flex: 1; border: 1px solid var(--line); border-right: 0; border-radius: 5px 0 0 5px; padding: 0 8px; outline: 0; font-size: 11px; }
.footer-subscribe input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.footer-subscribe button { min-width: 46px; border: 1px solid var(--blue); border-radius: 0 4px 4px 0; color: #fff; background: var(--blue); font-size: 11px; }

/* Shared subpage system */
.page-header-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.page-cta { display: inline-grid; min-height: 38px; min-width: 112px; place-items: center; padding: 0 14px; border-radius: 6px; font-size: 13px; white-space: nowrap; }
.page-stat-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 24px; }
.page-stat-strip article { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 76px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.page-stat-strip .page-stat-icon { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid #cfe8f6; border-radius: 8px; color: var(--blue); background: #eef8fd; }
.page-stat-icon .data-icon { width: 17px; height: 17px; }
.page-stat-strip span, .page-stat-strip small { display: block; color: var(--muted); font-size: 11px; }
.page-stat-strip strong { display: block; margin: 1px 0; font-size: 20px; line-height: 1.1; }

.subpage-hero-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, .85fr); gap: 14px; margin-bottom: 24px; }
.editorial-lead { display: grid; grid-template-columns: minmax(210px, .75fr) minmax(0, 1.25fr); gap: 22px; align-items: center; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.editorial-lead .lead-visual { min-height: 190px; }
.editorial-lead h2 { margin: 8px 0; font-size: 24px; }
.editorial-lead p { color: var(--muted); }

.news-layout .home-panel { min-width: 0; }
.news-layout .news-item { grid-template-columns: 112px minmax(0, 1fr); gap: 16px; }
.news-layout .feed-visual { min-height: 90px; }
.brief-list li:has(.list-icon) { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 9px; }
.list-icon { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid #d6eaf5; border-radius: 6px; color: var(--blue); background: #f1f9fd; }
.list-icon .data-icon { width: 14px; height: 14px; }

.scenario-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 30px; }
.scenario-card { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 76px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.scenario-card:hover { border-color: #acd6ef; transform: translateY(-1px); }
.scenario-icon { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 8px; color: var(--blue); background: var(--blue-weak); }
.scenario-icon .data-icon { width: 17px; height: 17px; }
.scenario-card strong, .scenario-card span { display: block; }
.scenario-card strong { font-size: 13px; }
.scenario-card span { color: var(--muted); font-size: 10px; }
.featured-recommend, .recommend-band { margin-bottom: 30px; }
.four-up { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.method-panel { padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.method-panel ol { display: grid; gap: 0; margin: 12px 0 0; padding: 0; list-style: none; }
.method-panel li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); color: #526176; font-size: 13px; }
.method-panel li strong { color: var(--blue); }
.three-up { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.comparison-section { margin-top: 28px; }
.table-wrap { width: 100%; overflow-x: auto; }
.table-wrap table { width: 100%; min-width: 720px; border-collapse: collapse; }
.table-wrap th, .table-wrap td { padding: 12px 13px; border-top: 1px solid var(--line); text-align: left; font-size: 12px; }
.table-wrap th { color: #53647b; background: #f8fafc; font-weight: 700; }
.table-wrap td { color: #526176; }
.table-wrap td:first-child a { color: var(--ink); font-weight: 700; }
.table-wrap td:first-child a:hover { color: var(--blue); }

.repo-list { display: grid; }
.repo-row { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; padding: 16px 0; border-top: 1px solid var(--line); }
.repo-row:first-child { padding-top: 0; border-top: 0; }
.repo-row h3 { margin: 0; font-size: 15px; }
.repo-row p { margin: 4px 0 7px; color: var(--muted); font-size: 12px; }
.rank-title { display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 7px; align-items: center; min-width: 0; }
.rank-icon { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 6px; color: var(--blue); background: #eef8fd; }
.rank-icon .data-icon { width: 13px; height: 13px; }

.result-summary { margin: 8px 0 12px; }
.result-actions { display: grid; justify-items: end; gap: 8px; }

.model-grid, .agent-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.model-card, .agent-card { display: grid; gap: 13px; min-height: 224px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.model-card:hover, .agent-card:hover { border-color: #acd6ef; transform: translateY(-2px); }
.model-card p, .agent-card p { margin: 0; color: var(--muted); font-size: 12px; }
.model-title { display: flex; align-items: center; gap: 9px; min-width: 0; }
.model-title h3 { margin: 0; font-size: 14px; }
.model-score { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 6px; color: #087447; background: var(--mint); font-size: 13px; }
.risk-chip { padding: 3px 7px; border-radius: 999px; font-size: 10px; font-weight: 700; }
.risk-low { color: #087447; background: var(--mint); }
.risk-medium { color: #895900; background: #fff6df; }
.risk-high { color: #a33232; background: #fff0f0; }

.workflow-callout { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 28px; padding: 18px 20px; border: 1px solid #cfe4f2; border-radius: 8px; background: #f4fbff; }
.workflow-callout > div { display: flex; align-items: center; gap: 14px; }
.workflow-callout h2 { margin: 0 0 3px; font-size: 18px; }
.workflow-callout p { margin: 0; color: var(--muted); font-size: 12px; }
.callout-icon { display: grid; width: 42px; height: 42px; place-items: center; flex: 0 0 auto; border-radius: 8px; color: var(--blue); background: #fff; }
.callout-icon .data-icon { width: 20px; height: 20px; }
.compact-scenarios { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 0; }
.check-list { display: grid; gap: 10px; margin: 0; padding: 0; counter-reset: check; list-style: none; }
.check-list li { position: relative; padding: 9px 10px 9px 35px; border: 1px solid #e8edf1; border-radius: 6px; color: #526176; font-size: 12px; }
.check-list li::before { position: absolute; top: 8px; left: 10px; display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; color: var(--blue); background: var(--blue-weak); content: "✓"; font-size: 11px; font-weight: 800; }

.detail-breadcrumb { display: flex; flex-wrap: wrap; gap: 7px; margin: -8px 0 18px; color: var(--muted); font-size: 12px; }
.detail-breadcrumb a:hover { color: var(--blue); }
.detail-header { padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.detail-title-row { display: flex; align-items: flex-start; gap: 14px; }
.detail-title-row h1 { margin-bottom: 8px; }
.detail-icon { display: grid; width: 52px; height: 52px; place-items: center; flex: 0 0 auto; border: 1px solid #cfe5f2; border-radius: 10px; color: var(--blue); background: #eef8fd; }
.detail-icon .data-icon { width: 24px; height: 24px; }
.side-link { margin-top: 10px; }
.related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1020px) {
  .header-inner { gap: 15px; }
  .hero { grid-template-columns: 1fr; }
  .hero::after { width: 36%; }
  .content-grid, .news-layout, .article { grid-template-columns: 1fr; }
  .side-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-layout { grid-template-columns: 1fr; }
  .filter-panel { position: static; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 15px; }
  .filter-panel h2, .filter-reset { grid-column: 1 / -1; }
  .home-triple-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-triple-grid > :last-child { grid-column: 1 / -1; }
  .footer-grid { grid-template-columns: 1.5fr repeat(3, .8fr); }
  .footer-subscribe { grid-column: 1 / -1; }
  .page-stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .subpage-hero-grid { grid-template-columns: 1fr; }
  .scenario-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .four-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .model-grid, .agent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .container { width: min(100% - 32px, 1180px); }
  .header-inner { min-height: 58px; gap: 12px; }
  .brand-copy small { display: none; }
  .primary-nav { order: 3; width: 100%; padding-bottom: 8px; }
  .header-inner { flex-wrap: wrap; }
  .header-actions { margin-left: auto; }
  .page { padding-top: 20px; }
  .hero { gap: 20px; padding: 23px 20px; }
  .hero::after { width: 44%; opacity: .45; }
  h1 { font-size: 31px; }
  .hero-summary { font-size: 15px; }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-bottom: 30px; }
  .stat-card { min-height: 68px; padding: 12px; }
  .stat-card strong { font-size: 19px; }
  .content-column { gap: 28px; }
  .lead-story { grid-template-columns: 1fr; }
  .story-visual { min-height: 160px; border-top: 1px solid var(--line); border-left: 0; }
  .story-visual::before { top: 25px; left: 32px; width: 92px; height: 92px; border-width: 12px; }
  .story-visual::after { right: 28px; bottom: 25px; }
  .story-grid, .recommend-grid, .review-grid, .side-column, .pros-cons { grid-template-columns: 1fr; }
  .newsletter, .footer-inner { align-items: flex-start; flex-direction: column; }
  .page-header h1, .article-main h1 { font-size: 30px; }
  .filter-panel { display: block; }
  .filter-group { display: none; }
  .filter-group:first-of-type { display: grid; }
  .explore-toolbar { grid-template-columns: 1fr; }
  .result-card { grid-template-columns: 38px minmax(0, 1fr); }
  .bookmark-button { grid-column: 2; justify-self: end; }
  .news-item { grid-template-columns: 1fr; gap: 7px; }
  .article-main { padding: 23px 20px; }
  .home-search { margin-top: 0; }
  .hot-topics { justify-content: flex-start; max-height: 48px; overflow: hidden; }
  .home-hero-grid, .home-pair-grid, .home-triple-grid, .language-card-grid { grid-template-columns: 1fr; }
  .home-triple-grid > :last-child { grid-column: auto; }
  .home-lead { grid-template-columns: 1fr; min-height: auto; }
  .home-lead h1 { font-size: 22px; }
  .lead-visual { min-height: 130px; }
  .rapid-panel .quick-list li { grid-template-columns: 45px minmax(0, 1fr); }
  .home-panel { padding: 15px; }
  .news-feed-row { grid-template-columns: 90px minmax(0, 1fr); }
  .language-card-grid { gap: 8px; }
  .language-card { grid-template-columns: minmax(0, 1fr) 92px; grid-template-rows: auto auto auto; align-items: center; min-height: 132px; }
  .language-card .row-between { grid-column: 1 / -1; }
  .language-card h3 { grid-column: 1; grid-row: 2; }
  .language-card .news-media-language { grid-column: 2; grid-row: 2; min-height: 68px; }
  .language-card .feed-meta { grid-column: 1 / -1; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .footer-brand, .footer-subscribe { grid-column: 1 / -1; }
  .page-header-row { align-items: flex-start; flex-direction: column; }
  .page-cta { width: 100%; }
  .page-stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-stat-strip article { min-height: 68px; padding: 11px; }
  .page-stat-strip strong { font-size: 17px; }
  .editorial-lead { grid-template-columns: 1fr; }
  .editorial-lead .lead-visual { min-height: 140px; }
  .news-layout .news-item { grid-template-columns: 88px minmax(0, 1fr); gap: 11px; }
  .news-layout .news-item h3 { font-size: 15px; }
  .news-layout .feed-visual { min-height: 74px; }
  .scenario-grid, .model-grid, .agent-grid, .four-up, .three-up, .related-grid { grid-template-columns: 1fr; }
  .scenario-card { min-height: 68px; }
  .workflow-callout { align-items: flex-start; flex-direction: column; }
  .workflow-callout > div { align-items: flex-start; }
  .compact-scenarios { grid-template-columns: 1fr; }
  .detail-title-row { gap: 10px; }
  .detail-icon { width: 44px; height: 44px; }
  .detail-title-row h1 { font-size: 26px; }
  .result-actions { grid-column: 2; display: flex; align-items: center; justify-content: flex-end; }
}

/* ── News Detail Editorial (方案2) ── */
.news-detail-page { max-width: 1180px; margin: 0 auto; }

.news-detail-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 22px;
  color: var(--muted);
  font-size: 13px;
}
.news-detail-breadcrumb a { color: var(--blue); }
.news-detail-breadcrumb a:hover { text-decoration: underline; }
.news-detail-breadcrumb [aria-hidden] { color: #b0becb; }

.news-detail-header { margin-bottom: 18px; }
.news-detail-meta-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.news-detail-pubdate { color: var(--muted); font-size: 13px; }
.news-detail-header h1 {
  max-width: 960px;
  margin: 0 0 12px;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.news-detail-deck {
  max-width: 900px;
  margin: 0 0 18px;
  color: #52657d;
  font-size: 16px;
  line-height: 1.75;
}
.news-detail-byline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.news-detail-byline > div:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  color: var(--muted);
  font-size: 13px;
}
.news-detail-byline strong { color: #26384d; }
.news-detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.news-detail-actions .plain-button {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
}
.news-detail-actions .plain-button:hover { border-color: #acd6ef; background: var(--blue-weak); }

.news-detail-hero {
  width: 100%;
  margin: 0 0 30px;
  padding: 0;
  overflow: hidden;
  border-radius: 10px;
  background: #eaf7fc;
}
.news-detail-hero figcaption {
  padding: 8px 12px;
  color: var(--muted);
  background: #fff;
  font-size: 11px;
  text-align: right;
}
.news-detail-hero img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}
.news-detail-hero .news-media { border: 0; border-radius: 0; }
.news-detail-hero .news-media-detail { aspect-ratio: 16 / 7; margin: 0; }

/* Desktop 3-col: TOC | Reading Column | Sidebar */
.news-detail-grid {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 270px;
  gap: 30px;
  align-items: start;
}

.news-detail-toc {
  position: sticky;
  top: 20px;
  display: grid;
  gap: 2px;
  padding: 18px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
}
.news-detail-toc strong {
  margin-bottom: 10px;
  color: var(--ink);
  font-size: 14px;
}
.news-detail-toc a {
  display: block;
  padding: 6px 8px;
  border-radius: 5px;
  color: var(--muted);
  text-decoration: none;
}
.news-detail-toc a:hover { color: var(--blue); background: var(--blue-weak); }

.news-reading-column { min-width: 0; }
.news-reading-column section { margin-bottom: 36px; }
.news-reading-column h2 {
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--line);
  font-size: 22px;
}
.news-reading-body p {
  margin: 0;
  color: #425168;
  font-size: 16px;
  line-height: 1.8;
}
.news-reading-body {
  padding: 18px 20px;
  border-left: 3px solid var(--blue);
  border-radius: 0 6px 6px 0;
  background: #f1f8fe;
}

/* ── digest structured reading ── */

.digest-lead {
  margin: 0 0 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid #cddfef;
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.75;
}

.digest-section {
  margin: 20px 0;
  padding: 0;
}

.digest-section h3 {
  margin: 0 0 10px;
  color: #1a3a5c;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}

.digest-section p {
  margin: 0 0 10px;
  color: #425168;
  font-size: 15px;
  line-height: 1.75;
}

.digest-section ul {
  margin: 6px 0 14px;
  padding-left: 20px;
  list-style: disc;
}

.digest-section li {
  margin-bottom: 4px;
  color: #425168;
  font-size: 15px;
  line-height: 1.7;
}

.digest-placeholder {
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px dashed #b0c4d8;
  border-radius: 6px;
  background: #fafbfc;
}

.digest-placeholder strong {
  display: block;
  margin-bottom: 6px;
  color: #6b7d94;
  font-size: 14px;
}

.digest-placeholder p {
  margin: 0;
  color: #8a9bb0;
  font-size: 13px;
  line-height: 1.6;
}

.news-detail-sidebar { display: grid; gap: 18px; }
.news-detail-sidebar .metadata-row { grid-template-columns: 72px minmax(0, 1fr); gap: 10px; }
.news-detail-sidebar .metadata-row dd { overflow-wrap: anywhere; }

.news-detail-original-title {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.news-related-list { display: grid; gap: 12px; }
.news-related-item {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.news-related-item .news-media { min-height: 66px; align-self: start; }
.news-related-item h3 { margin: 0 0 5px; font-size: 14px; line-height: 1.4; }
.news-related-item h3 a:hover { color: var(--blue); }
.news-related-item .feed-meta { color: var(--muted); font-size: 11px; }

/* 960px breakpoint — single column */
@media (max-width: 960px) {
  .news-detail-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .news-detail-toc {
    position: static;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    padding: 10px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    -webkit-overflow-scrolling: touch;
  }
  .news-detail-toc strong { display: none; }
  .news-detail-toc a {
    flex: 0 0 auto;
    padding: 7px 14px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    white-space: nowrap;
    font-size: 12px;
  }
  .news-detail-toc a:hover { background: var(--blue-weak); }
  .news-detail-sidebar { order: 3; }
  .news-reading-column { order: 2; }
  .recommend-grid, .model-grid, .agent-grid, .four-up, .three-up { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .news-detail-header h1 { font-size: 26px; }
  .news-detail-deck { font-size: 15px; }
  .news-detail-byline { align-items: flex-start; flex-direction: column; gap: 14px; }
  .news-detail-breadcrumb { font-size: 12px; }
  .news-reading-column h2 { font-size: 19px; }
  .news-reading-body p { font-size: 15px; }
  .news-detail-actions .plain-button { min-width: 0; }
  .news-related-item { grid-template-columns: 72px minmax(0, 1fr); gap: 10px; }
  .digest-lead { font-size: 15px; }
  .digest-section h3 { font-size: 15px; }
  .digest-section p,
  .digest-section li { font-size: 14px; }
}

/* 390px phone breakpoint */
@media (max-width: 480px) {
  .digest-lead { font-size: 14px; }
  .digest-section h3 { font-size: 14px; }
  .digest-section p,
  .digest-section li { font-size: 14px; line-height: 1.65; }
  .digest-section ul { padding-left: 16px; }
  .result-card .language-tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
}

/* ── Real-data application states ── */
#app[data-state="loading"] { min-height: 100vh; }

.loading-shell { min-height: 100vh; background: var(--canvas); }
.skeleton { position: relative; overflow: hidden; border-radius: 8px; background: #eaf0f4; }
.skeleton::after { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .72), transparent); content: ""; transform: translateX(-100%); animation: skeleton-shimmer 1.35s infinite; }
.loading-header { height: 68px; border-radius: 0; }
.loading-main { display: grid; gap: 18px; padding: 34px 0 70px; }
.loading-search { width: min(700px, 100%); height: 44px; margin: 0 auto; }
.loading-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(280px, 1fr); gap: 14px; }
.loading-lead, .loading-side { height: 214px; }
.loading-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.loading-stat { height: 72px; }
.loading-panel { height: 360px; }
@keyframes skeleton-shimmer { to { transform: translateX(100%); } }

.home-search .search-row, .explore-toolbar .search-row { align-items: center; }
.home-search .search-row > .data-icon, .explore-toolbar .search-row > .data-icon { flex: 0 0 18px; margin-left: 5px; color: #7890aa; }
.home-search .search-row input, .explore-toolbar .search-row input { padding: 0 3px; }
.home-lead > div { min-width: 0; }
.home-lead h1, .language-card h3, .resource-card h3, .result-card h3, .article-main h1 { overflow-wrap: anywhere; }

.news-media { position: relative; display: flex; min-width: 0; align-items: center; justify-content: center; overflow: hidden; border: 1px solid #c6dfeb; border-radius: 6px; background: #eaf7fc; }
.news-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.news-media img.is-broken { display: none; }
.news-media-lead { min-height: 148px; align-self: center; }
.news-media-thumb { min-height: 70px; }
.news-media-page { min-height: 94px; }
.news-media-language { min-height: 62px; }
.news-media-empty { min-height: 120px; }
.source-art { justify-content: flex-start; gap: 10px; padding: 12px; }
.source-art-1 { border-color: #a9d6ec; background: #eaf7fc; }
.source-art-2 { border-color: #efc6aa; background: #fff1e8; }
.source-art-3 { border-color: #b8d4f4; background: #eef6ff; }
.source-art-4 { border-color: #c9e6da; background: #eef9f4; }
.source-monogram { display: grid; width: 42px; height: 42px; place-items: center; flex: 0 0 auto; border: 1px solid rgba(0, 93, 204, .18); border-radius: 50%; color: var(--blue); background: rgba(255, 255, 255, .88); font-size: 12px; font-weight: 800; }
.source-art-copy { display: grid; min-width: 0; gap: 1px; }
.source-art-copy strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.source-art-copy small { color: var(--muted); font-size: 10px; }
.news-media-thumb .source-art-copy, .news-media-language .source-art-copy { display: none; }
.news-media-thumb .source-monogram, .news-media-language .source-monogram { width: 38px; height: 38px; }
.source-monogram .data-icon { width: 20px; height: 20px; }

.entity-avatar { position: relative; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; border: 1px solid #cde5f3; border-radius: 8px; color: var(--blue); background: var(--cyan); font-size: 11px; font-weight: 800; }
.entity-avatar > span { position: relative; z-index: 2; display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; color: var(--blue); background: rgba(255, 255, 255, .9); font-size: 8px; }
.entity-avatar-generic { border-color: #8fc8f1; color: #005dcc; background: #e8f4ff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .65); }
.entity-avatar-generic > .data-icon { width: 22px; height: 22px; color: var(--blue); border-radius: 0; filter: drop-shadow(0 1px 0 rgba(0, 93, 204, .12)); }
.entity-avatar-mini.entity-avatar-generic > .data-icon { width: 15px; height: 15px; }
.entity-avatar-result.entity-avatar-generic > .data-icon { width: 24px; height: 24px; }
.entity-avatar-detail.entity-avatar-generic > .data-icon { width: 30px; height: 30px; }
.entity-avatar.has-media > span { display: none; }
.entity-avatar img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.entity-avatar img.is-broken { display: none; }
.entity-avatar-tool { width: 38px; height: 38px; }
.entity-avatar-mini { width: 25px; height: 25px; border-radius: 6px; font-size: 8px; }
.entity-avatar-mini > span { width: 14px; height: 14px; font-size: 6px; }
.entity-avatar-card { width: 36px; height: 36px; }
.entity-avatar-result { width: 42px; height: 42px; }
.entity-avatar-detail { width: 52px; height: 52px; margin-top: 2px; }
.news-media-detail { width: 100%; aspect-ratio: 16 / 7; margin: 22px 0 0; }
.news-media-detail img { object-fit: cover; }
.rapid-panel .quick-time { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-score { flex: 0 0 auto; }
.page-tabs { margin-bottom: 14px; }
.news-feed-page .news-item:first-child { padding-top: 0; }
.news-feed-page .news-item:last-child { border-bottom: 0; }
.news-feed-page .news-item { grid-template-columns: 120px minmax(0, 1fr); }
.news-feed-page .feed-visual { min-height: 94px; }

.metric-stack { display: grid; justify-items: end; gap: 4px; min-width: 92px; color: var(--muted); font-size: 11px; }
.metric-stack strong { color: #845b00; font-size: 13px; white-space: nowrap; }
.metric-stack .bookmark-button { margin-top: 5px; }
.load-more-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.load-more-button { min-width: 112px; padding: 0 14px; color: var(--blue); background: var(--surface); }
.load-more-button:hover { border-color: #a9d8f3; background: var(--blue-weak); }
.result-count { align-self: center; white-space: nowrap; }
.explore-results { margin-top: 14px; }
.explore-toolbar { align-items: stretch; }
.explore-toolbar .search-row { width: 100%; max-width: none; min-height: 42px; }

.model-card, .mcp-card { min-height: 250px; }
.model-card .language-tag, .mcp-card .language-tag { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.candidate-reason { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border: 1px solid #dcebf3; border-radius: 6px; color: #40627a; background: #f5fbff; font-size: 11px; }
.candidate-reason strong { color: var(--blue); }
.notice-band { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; padding: 16px 18px; border: 1px solid #cfe4f2; border-radius: 8px; background: #f4fbff; }
.notice-band strong { flex: 0 0 auto; color: var(--blue); }
.notice-band p { margin: 0; color: #50657a; font-size: 13px; }
.detail-notice { margin: 30px 0 0; }

.article-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 20px 0 8px; }
.detail-save { min-height: 34px; padding: 0 12px; }
.detail-save.is-saved { border-color: #f3d486; color: #8a6200; background: #fff8e6; }
.metadata-list { margin: 12px 0 0; border-top: 1px solid var(--line); }
.metadata-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.metadata-row dt { color: var(--muted); font-size: 12px; }
.metadata-row dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: #324359; font-size: 13px; }
.compact-list li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.compact-list a { display: grid; gap: 2px; }
.compact-list strong { overflow-wrap: anywhere; font-size: 13px; }
.compact-list small { color: var(--muted); font-size: 11px; }

.error-page { display: grid; justify-items: center; align-content: center; min-height: 72vh; text-align: center; }
.error-page .page-stat-icon { width: 48px; height: 48px; margin-bottom: 14px; }
.error-page h1 { margin-bottom: 8px; font-size: 30px; }
.error-page p { max-width: 620px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .skeleton::after { animation: none; }
  .story-card, .resource-card, .review-card, .toast { transition: none; }
}

@media (max-width: 1020px) {
  .loading-grid { grid-template-columns: 1fr; }
  .loading-side { height: 150px; }
}

@media (max-width: 760px) {
  .loading-header { height: 106px; }
  .loading-main { padding-top: 20px; }
  .loading-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-feed-page .news-item { grid-template-columns: 88px minmax(0, 1fr); gap: 11px; }
  .news-feed-page .news-item h3 { font-size: 15px; }
  .news-feed-page .feed-visual { min-height: 74px; }
  .metric-stack { grid-column: 2; grid-template-columns: repeat(3, auto); justify-content: start; justify-items: start; min-width: 0; }
  .metric-stack .bookmark-button { grid-column: auto; margin: 0 0 0 auto; }
  .filter-panel .filter-group { display: grid; }
  .page-filter-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-filter-control { min-width: 0; }
  .page-filter-control select { width: 100%; }
  .page-filter-bar > .result-count { grid-column: 1 / -1; margin: 0; }
  .notice-band { flex-direction: column; gap: 5px; }
  .metadata-row { grid-template-columns: 1fr; gap: 4px; }
  .article-actions > * { width: 100%; justify-content: center; }
  .load-more-row { flex-direction: column; }
  .explore-toolbar .result-count { justify-self: start; }
}

/* Match the main site's readable type hierarchy without changing layout density. */
.home-panel .section-heading h2 { font-size: var(--font-section); }
.rapid-panel h2 { font-size: 18px; }
.category-tabs button,
.category-tabs > span,
.category-tabs > a { font-size: 14px; }
.news-feed-row h3,
.tool-row h3,
.model-title h3 { font-size: var(--font-card-title); }
.news-feed-row p,
.tool-row p,
.model-card p,
.agent-card p,
.repo-row p { font-size: var(--font-summary); }
.feed-meta,
.rapid-panel .quick-time,
.tool-row .tag,
.tool-row .language-tag,
.tool-score,
.mini-list small,
.mini-list em,
.mini-list time,
.compact-panel .rank-list small,
.compact-panel .rank-list .star-count,
.page-stat-strip span,
.page-stat-strip small,
.scenario-card span,
.risk-chip,
.source-art-copy small,
.metric-stack,
.candidate-reason,
.compact-list small { font-size: var(--font-meta); }
.rapid-panel .quick-list a,
.source-art-copy strong,
.footer-brand p,
.footer-subscribe p,
.footer-column a,
.footer-subscribe input,
.footer-subscribe button,
.workflow-callout p,
.check-list li,
.table-wrap th,
.table-wrap td { font-size: var(--font-summary); }
.stat-card > div > span { font-size: var(--font-summary); }
.stat-card em { font-size: var(--font-meta); }
.mini-list strong,
.compact-panel .rank-list strong,
.language-card h3,
.scenario-card strong,
.compact-list strong { font-size: 14px; }
.footer-column strong,
.footer-subscribe strong { font-size: var(--font-summary); }
.metric-stack strong { font-size: 14px; }
.source-monogram .data-icon,
.callout-icon .data-icon,
.detail-icon .data-icon { font-size: 20px; }
.stat-symbol .data-icon,
.page-stat-icon .data-icon,
.scenario-icon .data-icon { font-size: 17px; }
.list-icon .data-icon { font-size: 14px; }
.rank-icon .data-icon,
.entity-avatar-mini.entity-avatar-generic > .data-icon { font-size: 13px; }
.entity-avatar-generic > .data-icon { font-size: 22px; }
.entity-avatar-result.entity-avatar-generic > .data-icon { font-size: 24px; }
.entity-avatar-detail.entity-avatar-generic > .data-icon { font-size: 30px; }