/* roulang page: index */
:root {
  --bg: #F3F6FA;
  --band: #E6EEF5;
  --panel: #FFFFFF;
  --ink: #1B2832;
  --muted: #5B6B78;
  --line: #D5E0EA;
  --primary: #3E6E8C;
  --primary-deep: #2E5670;
  --accent: #C4846A;
  --ok: #3E8C78;
  --shadow: 0 10px 30px rgba(36, 58, 82, .08);
  --shadow-hover: 0 14px 34px rgba(36, 58, 82, .12);
  --radius: 14px;
  --radius-sm: 8px;
  --header-h: 56px;
  --space: 84px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  font-size: 1rem;
  line-height: 1.75;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input { font-family: inherit; }
p { margin: 0 0 1rem; }
h1, h2, h3 { line-height: 1.3; font-weight: 700; margin: 0; }
::selection { background: #d5e4ef; color: var(--ink); }
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.container { width: min(1120px, calc(100% - 40px)); margin: 0 auto; }
.site-header {
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 5;
}
.header-grid {
  min-height: var(--header-h);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
  gap: 24px;
  align-items: center;
}
.side-left {
  display: flex;
  align-items: center;
  gap: 28px;
  min-width: 0;
  min-height: var(--header-h);
}
.brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: 0 0 auto;
}
.brand {
  display: inline-flex;
  align-items: center;
  color: var(--ink);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  white-space: nowrap;
}
.brand:hover { color: var(--primary-deep); }
.brand-mark {
  width: 8px;
  height: 8px;
  margin-right: 8px;
  background: var(--accent);
  border-radius: 2px;
  flex: 0 0 auto;
}
.menu-toggle {
  display: none;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--primary);
  border-radius: var(--radius-sm);
  min-height: 36px;
  padding: 0 12px;
  font-size: .875rem;
}
.menu-toggle:hover { background: var(--band); }
.channel-nav { display: flex; align-items: center; gap: 20px; }
.channel-link {
  color: var(--muted);
  font-size: .875rem;
  padding: 8px 0;
  background: transparent;
  border: 0;
}
.channel-link:hover { color: var(--primary-deep); }
.channel-link.is-active {
  color: var(--primary-deep);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.side-right { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.search-form { width: 220px; margin: 0; }
.search-input {
  width: 100%;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  padding: 0 12px;
  font-size: .875rem;
}
.search-input::placeholder { color: var(--muted); }
.search-input:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(62, 110, 140, .15);
}
.btn-main, .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  font-size: .9375rem;
  font-weight: 650;
  border: 1px solid transparent;
  transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.btn-main { background: var(--primary); color: #fff; }
.btn-main:hover {
  background: var(--primary-deep);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(46, 86, 112, .18);
}
.btn-main:active { transform: translateY(0); background: var(--primary-deep); }
.btn-ghost { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-ghost:hover { background: var(--band); color: var(--primary-deep); }
.btn-ghost:active { background: var(--band); }
.hero-band { background: var(--bg); padding: 48px 0 84px; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
  gap: 36px;
  align-items: center;
}
.kicker {
  display: inline-block;
  color: var(--accent);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 8px;
}
.hero-title { font-size: 2.25rem; line-height: 1.25; margin: 0 0 12px; color: var(--ink); }
.hero-sub { font-size: 1.0625rem; color: var(--ink); margin: 0 0 18px; }
.hero-search { display: none; margin: 0 0 14px; width: 100%; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.hero-lead { max-width: 40rem; color: var(--ink); margin-bottom: 12px; }
.adult-line {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: .875rem;
  margin: 0;
}
.poster-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
}
.poster-art {
  position: relative;
  min-height: 320px;
  background: var(--band);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.poster-block { position: absolute; }
.poster-block-a { left: 28px; top: 72px; width: 42%; height: 58%; background: var(--primary); border-radius: 10px 10px 0 0; }
.poster-block-b { right: 32px; bottom: 48px; width: 28%; height: 36%; background: var(--accent); opacity: .9; border-radius: 8px; }
.poster-index { position: absolute; left: 18px; top: 16px; color: var(--accent); font-weight: 700; font-size: .75rem; }
.poster-caption {
  position: absolute;
  left: 18px;
  bottom: 14px;
  margin: 0;
  color: var(--ink);
  font-size: .875rem;
  background: rgba(255,255,255,.86);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
}
.status-pill {
  position: absolute;
  right: 14px;
  top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-size: 12px;
  color: var(--ink);
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ok);
  display: inline-block;
}
.meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.meta-badge {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  background: var(--bg);
}
.band { padding: var(--space) 0; }
.band-plain { background: var(--bg); }
.band-alt { background: var(--band); }
.section-head { margin-bottom: 8px; }
.section-title { font-size: 1.5rem; line-height: 1.35; margin-bottom: 12px; }
.section-lead { max-width: 46rem; margin-bottom: 28px; }
.issue-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.issue-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px 28px;
}
.issue-no { color: var(--accent); font-weight: 700; font-size: .875rem; }
.issue-item h3 { font-size: 1.0625rem; margin-bottom: 4px; }
.issue-item p { margin: 0; color: var(--muted); font-size: .9375rem; }
.path-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.field-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 28px 18px;
}
.field-kicker { color: var(--accent); font-size: .75rem; font-weight: 700; margin-bottom: 8px; }
.field-list { list-style: none; margin: 0; padding: 0; }
.field-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: .9375rem;
}
.field-list li:last-child { border-bottom: 0; }
.field-name { color: var(--primary-deep); font-weight: 700; }
.field-value { color: var(--muted); text-align: right; }
.step-rail {
  list-style: none;
  margin: 0;
  padding: 18px 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  position: relative;
}
.step-rail::before {
  content: "";
  position: absolute;
  top: 40px;
  left: 6%;
  right: 6%;
  height: 1px;
  background: var(--line);
}
.step-item {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 22px 24px;
  position: relative;
  min-height: 180px;
}
.step-no { color: var(--accent); font-weight: 700; font-size: .875rem; display: block; margin-bottom: 12px; }
.step-item h3 { font-size: 1.0625rem; margin-bottom: 8px; }
.step-item p { margin: 0; color: var(--muted); font-size: .9375rem; }
.data-note { color: var(--muted); font-size: .875rem; margin: 0 0 8px; }
.stat-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  padding: 28px 0 8px;
}
.stat-item {
  background: transparent;
  padding: 28px 8px 12px;
  min-height: 160px;
}
.stat-num {
  display: block;
  font-size: 2.5rem;
  line-height: 1.1;
  color: var(--primary);
  font-weight: 700;
  letter-spacing: -.03em;
}
.stat-label { display: block; margin-top: 10px; color: var(--ink); font-size: .9375rem; }
.stat-sub { display: block; color: var(--muted); font-size: .875rem; }
.quote-list { display: flex; flex-direction: column; gap: 16px; }
.quote-item {
  background: var(--panel);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  box-shadow: var(--shadow);
  padding: 32px 36px;
  margin: 0;
}
.quote-text { font-size: 1.125rem; line-height: 1.75; margin: 0 0 12px; }
.quote-by { color: var(--muted); font-size: .875rem; font-style: normal; }
.habit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.habit-item {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 18px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.habit-item:first-child { border-top: 1px solid var(--line); }
.habit-name { color: var(--primary-deep); font-weight: 700; }
.habit-item p { margin: 0; color: var(--ink); }
.scene-mosaic {
  display: grid;
  grid-template-columns: 1.4fr .8fr;
  grid-template-rows: auto auto;
  gap: 16px;
}
.scene-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px;
}
.scene-wide { grid-row: 1 / span 2; background: #fff; }
.scene-time { color: var(--accent); font-size: .75rem; font-weight: 700; display: block; margin-bottom: 8px; }
.scene-card h3 { font-size: 1.25rem; margin-bottom: 10px; }
.scene-card p { margin: 0; color: var(--muted); }
.news-list { display: flex; flex-direction: column; gap: 14px; }
.news-item {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.news-item:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); }
.news-thumb {
  height: 96px;
  border-radius: 10px;
  background: var(--band);
  border: 1px solid var(--line);
  position: relative;
}
.news-thumb::after {
  content: "";
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: 36px;
  height: 8px;
  background: var(--accent);
  border-radius: 2px;
}
.news-date { color: var(--muted); font-size: .875rem; display: block; margin-bottom: 4px; }
.news-title { font-size: 1.0625rem; color: var(--ink); display: inline-block; margin-bottom: 4px; }
.news-title:hover { color: var(--primary-deep); }
.news-sum { margin: 0; color: var(--muted); font-size: .9375rem; }
.metric-strip {
  margin-top: 28px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.metric-item { padding: 28px 20px; border-right: 1px solid var(--line); }
.metric-item:last-child { border-right: 0; }
.metric-item strong { display: block; color: var(--primary); font-size: 1.75rem; line-height: 1.2; }
.metric-item span { display: block; color: var(--muted); font-size: .875rem; margin-top: 6px; }
.tag-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr); gap: 24px; align-items: start; }
.tag-wall { display: flex; flex-wrap: wrap; gap: 10px; }
.tag-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--ink);
  font-size: .875rem;
}
.tag-link:hover { border-color: var(--primary); background: var(--band); color: var(--primary-deep); }
.compare-note {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
}
.compare-note h3 { font-size: 1.0625rem; margin-bottom: 8px; }
.compare-note p { margin: 0; color: var(--muted); }
.bill-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.bill-row {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.bill-row:hover { transform: translateY(-1px); box-shadow: var(--shadow-hover); }
.bill-row.is-lead { grid-template-columns: 240px minmax(0, 1fr) auto; padding: 24px; }
.bill-thumb {
  height: 104px;
  border-radius: 10px;
  background: var(--band);
  border: 1px solid var(--line);
  position: relative;
}
.bill-row.is-lead .bill-thumb { height: 148px; }
.bill-thumb i {
  position: absolute;
  left: 12px;
  top: 12px;
  width: 28px;
  height: 8px;
  background: var(--accent);
  border-radius: 2px;
}
.bill-title { font-size: 1.125rem; margin-bottom: 4px; }
.bill-title a:hover { color: var(--primary-deep); }
.bill-desc { margin: 0 0 8px; color: var(--muted); font-size: .9375rem; }
.bill-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bill-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.ok-text { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-size: .875rem; }
.faq-list .accordion-item {
  border: 1px solid var(--line);
  border-radius: var(--radius) !important;
  overflow: hidden;
  background: var(--panel);
  box-shadow: var(--shadow);
  margin-bottom: 12px;
}
.faq-list .accordion-button {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--panel);
  box-shadow: none;
  padding: 18px 22px;
}
.faq-list .accordion-button:not(.collapsed) { color: var(--ink); background: var(--panel); box-shadow: none; }
.faq-list .accordion-button:focus { box-shadow: none; }
.faq-list .accordion-body { padding: 0 22px 18px; color: var(--ink); line-height: 1.75; }
.library-list { border-top: 1px solid var(--line); }
.library-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink);
}
.library-link span { color: var(--accent); font-size: .875rem; font-weight: 700; }
.library-link:hover { color: var(--primary-deep); }
.close-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 36px;
}
.close-panel p { margin: 0; max-width: 42rem; }
.site-footer { background: var(--panel); border-top: 1px solid var(--line); padding: 48px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 32px; }
.footer-brand { font-size: 1.125rem; font-weight: 700; color: var(--ink); display: inline-flex; align-items: center; margin-bottom: 12px; }
.footer-brand:hover { color: var(--primary-deep); }
.footer-note { color: var(--muted); font-size: .9375rem; max-width: 36rem; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links a { display: inline-block; padding: 6px 0; color: var(--primary-deep); }
.footer-links a:hover { color: var(--primary); }
.footer-label { color: var(--accent); font-size: .75rem; font-weight: 700; margin-bottom: 8px; }
.copy-line {
  margin: 28px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .875rem;
}
@media (max-width: 1199.98px) {
  :root { --space: 72px; }
}
@media (max-width: 991.98px) {
  .menu-toggle { display: inline-flex; }
  .header-grid, .hero-grid, .path-grid, .tag-layout { grid-template-columns: 1fr; }
  .side-right { display: none; }
  .side-left { flex-direction: column; align-items: stretch; gap: 0; }
  .brand-row { min-height: var(--header-h); }
  .channel-nav { flex-direction: column; align-items: flex-start; gap: 0; padding-bottom: 10px; }
  .channel-link { padding: 10px 0; }
  #channelMenu.collapse:not(.show) { display: none; }
  #channelMenu.collapse.show { display: flex; }
  .hero-search { display: block; }
  .step-rail { grid-template-columns: 1fr 1fr; }
  .step-rail::before { display: none; }
  .scene-mosaic { grid-template-columns: 1fr; }
  .scene-wide { grid-row: auto; }
  .bill-row, .bill-row.is-lead { grid-template-columns: 120px minmax(0, 1fr); }
  .bill-side { grid-column: 2; align-items: flex-start; }
}
@media (max-width: 767.98px) {
  :root { --space: 44px; }
  .hero-band { padding: 28px 0 44px; }
  .hero-title { font-size: 1.5rem; }
  .stat-board, .metric-strip { grid-template-columns: 1fr 1fr; }
  .metric-item { border-bottom: 1px solid var(--line); }
  .metric-item:nth-child(2n) { border-right: 0; }
  .habit-item, .news-item { grid-template-columns: 1fr; }
  .news-thumb { height: 84px; }
  .close-panel, .footer-grid { display: block; }
  .close-panel .btn-main { margin-top: 16px; }
  .footer-links { margin-top: 18px; }
  .quote-item, .poster-panel, .scene-card, .field-panel, .compare-note { padding: 22px; }
}
@media (max-width: 575.98px) {
  .container { width: min(1120px, calc(100% - 28px)); }
  .stat-board, .metric-strip, .step-rail { grid-template-columns: 1fr; }
  .metric-item { border-right: 0; }
  .issue-item { grid-template-columns: 48px minmax(0, 1fr); padding: 16px; }
  .bill-row, .bill-row.is-lead { grid-template-columns: 1fr; }
  .bill-thumb, .bill-row.is-lead .bill-thumb { height: 120px; }
  .bill-side { grid-column: auto; }
  .hero-actions .btn-main, .hero-actions .btn-ghost { width: 100%; }
  .brand { white-space: normal; }
}
@media (min-width: 1400px) {
  .container { width: 1120px; padding-left: 8px; padding-right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* roulang page: category2 */
:root {
 --bg: #F3F6FA;
 --band: #E6EEF5;
 --panel: #FFFFFF;
 --ink: #1B2832;
 --muted: #5B6B78;
 --line: #D5E0EA;
 --primary: #3E6E8C;
 --primary-deep: #2E5670;
 --accent: #C4846A;
 --ok: #3E8C78;
 --shadow: 0 10px 30px rgba(36, 58, 82, .08);
 --shadow-hover: 0 14px 34px rgba(36, 58, 82, .12);
 --radius: 14px;
 --radius-sm: 8px;
 --header-h: 56px;
 --space: 84px;
}
/* roulang page: category2 */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
 margin: 0;
 background: var(--bg);
 color: var(--ink);
 font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
 font-size: 1rem;
 line-height: 1.75;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input { font-family: inherit; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-weight: 700; color: var(--ink); }
p { margin-bottom: 0; }
.container {
 width: min(1120px, calc(100% - 40px)) !important;
 max-width: 1120px !important;
 margin-inline: auto;
 padding-left: 0;
 padding-right: 0;
}
.site-header {
 background: var(--panel);
 border-bottom: 1px solid var(--line);
 position: relative;
 z-index: 5;
}
.header-grid {
 min-height: var(--header-h);
 display: grid;
 grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
 gap: 24px;
 align-items: center;
}
.side-left, .side-right {
 display: flex;
 align-items: center;
 gap: 22px;
 min-width: 0;
}
.side-right { justify-content: flex-end; }
.brand-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 flex: 0 0 auto;
}
.brand {
 display: inline-flex;
 align-items: center;
 color: var(--ink);
 font-weight: 700;
 font-size: 1rem;
 line-height: 1.2;
 white-space: nowrap;
}
.brand:hover { color: var(--primary-deep); }
.brand-mark {
 width: 8px;
 height: 8px;
 margin-right: 8px;
 background: var(--accent);
 border-radius: 2px;
 flex: 0 0 auto;
}
.menu-toggle {
 display: none;
 border: 1px solid var(--line);
 background: var(--panel);
 color: var(--primary);
 border-radius: var(--radius-sm);
 min-height: 36px;
 padding: 0 12px;
 font-size: .875rem;
 cursor: pointer;
}
.menu-toggle:hover { background: var(--band); }
.menu-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.channel-nav { align-items: center; gap: 20px; }
.channel-link {
 color: var(--muted);
 font-size: .9375rem;
 padding: 6px 0;
 border-bottom: 2px solid transparent;
 line-height: 1.4;
}
.channel-link:hover { color: var(--primary-deep); }
.channel-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 2px; }
.channel-link.is-active { color: var(--ink); font-weight: 700; border-bottom-color: var(--accent); }
.search-form { width: 220px; margin: 0; }
.search-input {
 width: 100%;
 height: 40px;
 border: 1px solid var(--line);
 border-radius: var(--radius-sm);
 background: var(--panel);
 color: var(--ink);
 padding: 0 12px;
 font-size: .875rem;
}
.search-input::placeholder { color: var(--muted); }
.search-input:focus {
 border-color: var(--primary);
 outline: none;
 box-shadow: 0 0 0 3px rgba(62, 110, 140, .15);
}
.btn-main, .btn-ghost {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 40px;
 padding: 0 16px;
 border-radius: var(--radius-sm);
 font-size: .9375rem;
 font-weight: 650;
 border: 1px solid transparent;
 transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
 white-space: nowrap;
 cursor: pointer;
}
.btn-main { background: var(--primary); color: #fff; }
.btn-main:hover {
 background: var(--primary-deep);
 color: #fff;
 transform: translateY(-1px);
 box-shadow: 0 8px 18px rgba(46, 86, 112, .18);
}
.btn-main:active { transform: translateY(0); background: var(--primary-deep); }
.btn-main:focus-visible, .btn-ghost:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.btn-ghost { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-ghost:hover { background: var(--band); color: var(--primary-deep); }
.btn-ghost:active { background: var(--band); }
.page-head {
 background: var(--panel);
 border-bottom: 1px solid var(--line);
 padding: 40px 0 36px;
}
.head-grid {
 display: grid;
 grid-template-columns: minmax(0, 1fr) 220px;
 gap: 28px;
 align-items: end;
}
.kicker {
 display: flex;
 align-items: center;
 gap: 8px;
 margin-bottom: 10px;
 color: var(--accent);
 font-size: .875rem;
 letter-spacing: .04em;
}
.kicker-num {
 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 font-size: 12px;
 border: 1px solid var(--accent);
 border-radius: var(--radius-sm);
 padding: 1px 6px;
 line-height: 1.5;
}
.page-title { font-size: 2.25rem; line-height: 1.25; margin-bottom: 12px; }
.head-lead { max-width: 40rem; color: var(--ink); }
.count-panel {
 background: var(--bg);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 box-shadow: var(--shadow);
 padding: 22px 20px 18px;
 text-align: right;
}
.count-label { color: var(--muted); font-size: .875rem; }
.count-num {
 font-size: 2.5rem;
 line-height: 1.1;
 margin: 4px 0;
 color: var(--primary);
 font-weight: 700;
}
.count-sub {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 color: var(--muted);
 font-size: 12px;
 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.section { padding: var(--space) 0; }
.section-bg { background: var(--bg); }
.section-band { background: var(--band); }
.section-panel { background: var(--panel); }
.section-title { font-size: 1.5rem; line-height: 1.35; margin-bottom: 12px; }
.section-lead { max-width: 42rem; color: var(--muted); margin-bottom: 28px; }
.timeline {
 list-style: none;
 margin: 0;
 padding: 0 0 0 4px;
 position: relative;
}
.timeline::before {
 content: "";
 position: absolute;
 left: 11px;
 top: 8px;
 bottom: 8px;
 width: 1px;
 background: var(--line);
}
.tl-item {
 position: relative;
 display: grid;
 grid-template-columns: 28px minmax(0, 1fr);
 gap: 18px;
 padding-bottom: 18px;
}
.tl-item:last-child { padding-bottom: 0; }
.tl-dot {
 width: 15px;
 height: 15px;
 margin-top: 26px;
 border-radius: 50%;
 background: var(--panel);
 border: 3px solid var(--ok);
 box-shadow: 0 0 0 4px var(--bg);
 position: relative;
 z-index: 1;
}
.section-band .tl-dot { box-shadow: 0 0 0 4px var(--band); }
.tl-card {
 background: var(--panel);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 box-shadow: var(--shadow);
 padding: 22px 28px 20px;
 transition: transform .2s ease, box-shadow .2s ease;
}
.tl-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.tl-date {
 display: block;
 color: var(--accent);
 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 font-size: 12px;
 line-height: 1.4;
 margin-bottom: 6px;
}
.tl-card h3 { font-size: 1.125rem; margin-bottom: 6px; line-height: 1.4; }
.tl-card h3 a:hover { color: var(--primary-deep); }
.tl-card h3 a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tl-note { color: var(--muted); font-size: .9375rem; margin-bottom: 12px; }
.meta-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.meta-badge {
 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 font-size: 12px;
 line-height: 1.4;
 color: var(--muted);
 border: 1px solid var(--line);
 border-radius: var(--radius-sm);
 padding: 4px 8px;
 background: var(--bg);
}
.ok-tag {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 font-size: 12px;
 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 color: var(--ok);
 border: 1px solid var(--line);
 background: var(--panel);
 border-radius: var(--radius-sm);
 padding: 4px 8px;
}
.ok-tag i {
 width: 7px;
 height: 7px;
 border-radius: 50%;
 background: var(--ok);
 display: block;
}
.rhythm-panel {
 background: var(--panel);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 box-shadow: var(--shadow);
 padding: 8px 32px;
}
.rhythm-row {
 display: grid;
 grid-template-columns: 72px minmax(140px, 220px) minmax(0, 1fr);
 gap: 18px;
 align-items: center;
 padding: 26px 0;
 border-bottom: 1px solid var(--line);
}
.rhythm-row:last-child { border-bottom: 0; }
.rhythm-idx {
 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 font-size: 12px;
 color: var(--accent);
}
.rhythm-row h3 { font-size: 1.0625rem; margin: 0; }
.rhythm-row p { margin: 0; color: var(--muted); font-size: .9375rem; }
.compare-grid {
 display: grid;
 grid-template-columns: minmax(0, 1.35fr) minmax(260px, .8fr);
 gap: 20px;
 align-items: stretch;
}
.compare-col {
 border-radius: var(--radius);
 border: 1px solid var(--line);
 padding: 32px 32px 28px;
 min-height: 220px;
}
.compare-quick { background: var(--panel); box-shadow: var(--shadow); }
.compare-deep { background: var(--band); }
.compare-label {
 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 font-size: 12px;
 color: var(--accent);
 margin-bottom: 12px;
}
.compare-col h3 { font-size: 1.35rem; line-height: 1.35; margin-bottom: 14px; }
.compare-col ul { list-style: none; margin: 0; padding: 0; }
.compare-col li {
 padding: 10px 0;
 border-top: 1px solid var(--line);
 color: var(--ink);
 font-size: .9375rem;
}
.article-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.article-row {
 display: grid;
 grid-template-columns: 120px minmax(0, 180px) minmax(0, 1fr);
 gap: 16px;
 align-items: center;
 background: var(--panel);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 box-shadow: var(--shadow);
 padding: 20px 28px;
}
.article-row time {
 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 font-size: 12px;
 color: var(--accent);
}
.article-row a { font-weight: 700; }
.article-row a:hover { color: var(--primary-deep); }
.article-row a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.article-row span { color: var(--muted); font-size: .9375rem; }
.check-list { list-style: none; margin: 0; padding: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.check-item {
 display: grid;
 grid-template-columns: 16px 96px minmax(0, 1fr);
 gap: 14px;
 align-items: center;
 padding: 20px 28px;
 border-bottom: 1px solid var(--line);
}
.check-item:last-child { border-bottom: 0; }
.check-dot {
 width: 10px;
 height: 10px;
 border-radius: 50%;
 background: var(--ok);
}
.check-item strong { font-weight: 700; }
.check-item span { color: var(--muted); }
.more-sec { padding: 28px 0 36px; background: var(--bg); border-top: 1px solid var(--line); }
.more-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 16px;
 background: var(--panel);
 border: 1px dashed var(--line);
 border-radius: var(--radius);
 padding: 18px 22px;
}
.more-row p { margin: 0; color: var(--muted); }
.metric-sec { background: var(--band); padding: 28px 0 36px; border-top: 1px solid var(--line); }
.metric-wrap {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 24px;
}
.data-note { color: var(--muted); font-size: .875rem; margin-bottom: 8px; }
.metric-row {
 display: grid;
 grid-template-columns: repeat(4, minmax(0, 1fr));
 gap: 12px;
 flex: 1;
}
.metric-item { padding: 8px 12px 8px 0; }
.metric-item b {
 display: block;
 font-size: 1.5rem;
 line-height: 1.2;
 color: var(--primary);
 font-weight: 700;
}
.metric-item span { color: var(--muted); font-size: .875rem; }
.site-footer {
 background: var(--panel);
 border-top: 1px solid var(--line);
 padding: 40px 0 28px;
}
.footer-grid {
 display: grid;
 grid-template-columns: minmax(0, 1.4fr) minmax(180px, .6fr);
 gap: 32px;
}
.footer-brand {
 display: inline-flex;
 align-items: center;
 font-weight: 700;
 margin-bottom: 12px;
}
.footer-brand:hover { color: var(--primary-deep); }
.footer-note { color: var(--muted); max-width: 36rem; margin-bottom: 10px; }
.footer-note + p a { color: var(--primary); }
.footer-note + p a:hover { color: var(--primary-deep); }
.footer-label { font-size: .875rem; color: var(--muted); margin-bottom: 8px; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links a { display: inline-block; padding: 4px 0; color: var(--ink); }
.footer-links a:hover { color: var(--primary-deep); }
.footer-links a:focus-visible, .footer-brand:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.copy-line {
 margin: 28px 0 0;
 padding-top: 16px;
 border-top: 1px solid var(--line);
 color: var(--muted);
 font-size: .875rem;
}
@media (max-width: 1199.98px) {
 .page-title { font-size: 2rem; }
}
@media (max-width: 991.98px) {
 .header-grid { grid-template-columns: 1fr; gap: 10px; padding: 10px 0; min-height: 0; }
 .side-left { flex-direction: column; align-items: stretch; gap: 0; }
 .side-right { justify-content: flex-start; }
 .menu-toggle { display: inline-flex; align-items: center; }
 .channel-nav { gap: 0; }
 #channelMenu.collapse.show, #channelMenu.collapsing {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 4px 0 10px;
 }
 .channel-link { padding: 8px 0; }
 .head-grid, .compare-grid, .footer-grid { grid-template-columns: 1fr; }
 .count-panel { text-align: left; }
 .article-row { grid-template-columns: 100px minmax(0, 1fr); }
 .article-row span { grid-column: 1 / -1; }
 .metric-wrap { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 767.98px) {
 :root { --space: 44px; }
 .page-head { padding: 28px 0 24px; }
 .page-title { font-size: 1.5rem; }
 .section-title { font-size: 1.3rem; }
 .rhythm-row, .check-item { grid-template-columns: 1fr; gap: 6px; }
 .rhythm-panel { padding: 8px 20px; }
 .tl-card, .compare-col, .article-row { padding: 20px; }
 .metric-row { grid-template-columns: 1fr 1fr; width: 100%; }
 .more-row { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 575.98px) {
 .container { width: min(1120px, calc(100% - 28px)) !important; }
 .brand { font-size: .875rem; white-space: normal; }
 .side-right { flex-direction: column; align-items: stretch; }
 .search-form { width: 100%; }
 .btn-main, .btn-ghost { width: 100%; }
 .metric-sec .btn-main, .more-row .btn-ghost { width: auto; }
 .article-row { grid-template-columns: 1fr; }
 .tl-item { grid-template-columns: 18px minmax(0, 1fr); gap: 10px; }
 .count-num { font-size: 2rem; }
}
@media (min-width: 992px) {
 .channel-nav.collapse { display: flex !important; }
}
@media (min-width: 1400px) {
 .container { width: 1120px !important; }
}

/* roulang page: category1 */
:root {
 --bg: #F3F6FA;
 --band: #E6EEF5;
 --panel: #FFFFFF;
 --ink: #1B2832;
 --muted: #5B6B78;
 --line: #D5E0EA;
 --primary: #3E6E8C;
 --primary-deep: #2E5670;
 --accent: #C4846A;
 --ok: #3E8C78;
 --shadow: 0 10px 30px rgba(36, 58, 82, .08);
 --shadow-hover: 0 14px 34px rgba(36, 58, 82, .12);
 --radius: 14px;
 --radius-sm: 8px;
 --header-h: 56px;
 --space: 84px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
 margin: 0;
 background: var(--bg);
 color: var(--ink);
 font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
 font-size: 1rem;
 line-height: 1.75;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input { font-family: inherit; }
p { margin: 0 0 1rem; }
h1, h2, h3 { color: var(--ink); font-weight: 700; }
.container {
 width: min(1120px, calc(100% - 40px)) !important;
 max-width: 1120px !important;
 margin: 0 auto;
 padding-left: 0 !important;
 padding-right: 0 !important;
}
.visually-hidden {
 position: absolute !important;
 width: 1px !important;
 height: 1px !important;
 padding: 0 !important;
 margin: -1px !important;
 overflow: hidden !important;
 clip: rect(0, 0, 0, 0) !important;
 white-space: nowrap !important;
 border: 0 !important;
}
.site-header {
 background: var(--panel);
 border-bottom: 1px solid var(--line);
 position: relative;
 z-index: 5;
}
.header-grid {
 min-height: var(--header-h);
 display: grid;
 grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
 gap: 24px;
 align-items: center;
}
.side-left {
 display: flex;
 align-items: center;
 gap: 28px;
 min-width: 0;
}
.brand-row {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
 flex: 0 0 auto;
}
.brand, .footer-brand {
 display: inline-flex;
 align-items: center;
 color: var(--ink);
 font-weight: 700;
 font-size: 1rem;
 line-height: 1.2;
 white-space: nowrap;
}
.brand:hover, .footer-brand:hover { color: var(--primary-deep); }
.brand-mark {
 width: 8px;
 height: 8px;
 margin-right: 8px;
 background: var(--accent);
 border-radius: 2px;
 flex: 0 0 auto;
}
.menu-toggle {
 display: none;
 border: 1px solid var(--line);
 background: var(--panel);
 color: var(--primary);
 border-radius: var(--radius-sm);
 min-height: 36px;
 padding: 0 12px;
 font-size: .875rem;
}
.menu-toggle:hover { background: var(--band); }
.channel-nav { align-items: center; gap: 20px; }
.channel-link {
 color: var(--muted);
 font-size: .9375rem;
 padding: 6px 0;
 border-bottom: 2px solid transparent;
 white-space: nowrap;
}
.channel-link:hover { color: var(--primary-deep); }
.channel-link.is-active {
 color: var(--ink);
 font-weight: 700;
 border-bottom-color: var(--accent);
}
.side-right {
 display: flex;
 align-items: center;
 justify-content: flex-end;
 gap: 12px;
}
.search-form { width: 220px; margin: 0; }
.search-input {
 width: 100%;
 height: 40px;
 border: 1px solid var(--line);
 border-radius: var(--radius-sm);
 background: var(--panel);
 color: var(--ink);
 padding: 0 12px;
 font-size: .875rem;
}
.search-input::placeholder { color: var(--muted); }
.search-input:focus {
 border-color: var(--primary);
 outline: none;
 box-shadow: 0 0 0 3px rgba(62, 110, 140, .15);
}
.btn-main, .btn-ghost {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 40px;
 padding: 0 16px;
 border-radius: var(--radius-sm);
 font-size: .9375rem;
 font-weight: 650;
 border: 1px solid transparent;
 transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
 white-space: nowrap;
}
.btn-main { background: var(--primary); color: #fff; }
.btn-main:hover {
 background: var(--primary-deep);
 color: #fff;
 transform: translateY(-1px);
 box-shadow: 0 8px 18px rgba(46, 86, 112, .18);
}
.btn-main:active { transform: translateY(0); background: var(--primary-deep); }
.btn-ghost { background: transparent; color: var(--primary); border-color: var(--primary); }
.btn-ghost:hover { background: var(--band); color: var(--primary-deep); }
a:focus-visible, button:focus-visible {
 outline: 2px solid var(--primary);
 outline-offset: 2px;
}
.page-head { background: var(--bg); padding: 48px 0 28px; }
.kicker {
 display: flex;
 align-items: center;
 gap: 8px;
 margin: 0 0 10px;
 color: var(--accent);
 font-size: .875rem;
 font-weight: 700;
}
.idx {
 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 font-size: 12px;
 letter-spacing: .04em;
}
.page-title { font-size: 2.25rem; line-height: 1.25; margin: 0 0 10px; }
.head-line { max-width: 46rem; margin: 0; color: var(--ink); }
.block { padding: var(--space) 0; }
.band { background: var(--band); }
.plain { background: var(--bg); }
.section-title { font-size: 1.5rem; line-height: 1.35; margin: 0 0 12px; }
.section-lead { max-width: 40rem; margin: 0 0 28px; color: var(--ink); }
.filter-board {
 display: grid;
 grid-template-columns: 1.35fr 1fr .85fr;
 background: var(--panel);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 box-shadow: var(--shadow);
}
.filter-col { padding: 28px 32px; border-right: 1px solid var(--line); }
.filter-col:last-child { border-right: 0; }
fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
legend {
 float: none;
 font-size: .875rem;
 color: var(--muted);
 margin: 0 0 8px;
 padding: 0;
}
.choice {
 display: flex;
 align-items: center;
 gap: 8px;
 margin: 8px 0;
 font-size: .9375rem;
 cursor: pointer;
}
.choice input {
 appearance: none;
 width: 16px;
 height: 16px;
 margin: 0;
 border: 1px solid var(--primary);
 border-radius: 50%;
 background: var(--panel);
 display: grid;
 place-items: center;
 flex: 0 0 auto;
}
.choice input:checked { border-color: var(--primary-deep); }
.choice input:checked::before {
 content: "";
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: var(--primary);
}
.choice input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.entry-list { display: flex; flex-direction: column; gap: 12px; }
.entry-row {
 display: grid;
 grid-template-columns: 120px minmax(0, 1fr) auto;
 gap: 18px;
 align-items: center;
 background: var(--panel);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 box-shadow: var(--shadow);
 padding: 18px 22px;
 transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.entry-row:hover {
 box-shadow: var(--shadow-hover);
 transform: translateY(-1px);
 border-color: #c5d4e2;
}
.entry-row:active { transform: translateY(0); }
.thumb { display: block; width: 120px; }
.thumb-art {
 width: 120px;
 height: 78px;
 background: var(--band);
 border: 1px solid var(--line);
 border-radius: var(--radius-sm);
 position: relative;
 overflow: hidden;
}
.thumb-art::after {
 content: "";
 position: absolute;
 left: 12px;
 bottom: 0;
 width: 42px;
 height: 54px;
 background: var(--primary);
 border-radius: 6px 6px 0 0;
}
.tb::after { left: 62px; height: 46px; background: var(--primary-deep); }
.tc::after { width: 30px; height: 40px; }
.td::before {
 content: "";
 position: absolute;
 right: 10px;
 top: 10px;
 width: 8px;
 height: 8px;
 background: var(--accent);
 border-radius: 2px;
}
.entry-copy h3 { font-size: 1.0625rem; line-height: 1.4; margin: 0 0 4px; }
.entry-copy h3 a:hover { color: var(--primary-deep); }
.entry-copy p { margin: 0 0 8px; color: var(--muted); font-size: .9375rem; }
.state {
 display: inline-flex;
 align-items: center;
 gap: 6px;
 color: var(--ok);
 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 font-size: 12px;
 line-height: 1.4;
}
.state i {
 width: 6px;
 height: 6px;
 border-radius: 50%;
 background: var(--ok);
 display: block;
}
.entry-meta { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.meta-badge {
 font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 font-size: 12px;
 line-height: 1.4;
 color: var(--muted);
 border: 1px solid var(--line);
 border-radius: var(--radius-sm);
 padding: 4px 8px;
 background: var(--bg);
}
.duration-grid {
 display: grid;
 grid-template-columns: minmax(0, 1fr) 340px;
 gap: 36px;
 align-items: start;
}
.tier-panel {
 background: var(--panel);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 box-shadow: var(--shadow);
 padding: 8px 28px;
}
.tier {
 display: flex;
 justify-content: space-between;
 gap: 12px;
 align-items: baseline;
 padding: 18px 0;
 border-bottom: 1px solid var(--line);
}
.tier:last-child { border-bottom: 0; }
.tier strong { font-size: 1rem; font-weight: 700; }
.tier span { color: var(--muted); font-size: .875rem; }
.scene-grid {
 display: grid;
 grid-template-columns: 1.45fr .75fr;
 gap: 18px;
 align-items: stretch;
}
.scene-block {
 background: var(--panel);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 box-shadow: var(--shadow);
 padding: 32px 36px;
}
.scene-block.narrow { background: transparent; box-shadow: none; }
.scene-block h3 { font-size: 1.0625rem; margin: 0 0 8px; }
.scene-block p:last-child { margin-bottom: 0; }
.article-line {
 display: grid;
 grid-template-columns: 132px minmax(0, 1fr);
 gap: 16px;
 align-items: baseline;
 padding: 18px 0;
 border-bottom: 1px solid var(--line);
}
.article-line:first-of-type { border-top: 1px solid var(--line); }
.article-line a { font-weight: 700; }
.article-line a:hover { color: var(--primary-deep); }
.article-line p { margin: 4px 0 0; color: var(--muted); font-size: .9375rem; }
.more-row {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 18px;
 background: var(--panel);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 box-shadow: var(--shadow);
 padding: 28px 32px;
}
.more-row p { margin: 0; color: var(--muted); }
.more-link {
 color: var(--primary);
 font-weight: 700;
 border-bottom: 1px solid var(--primary);
 padding-bottom: 2px;
}
.more-link:hover { color: var(--primary-deep); border-bottom-color: var(--primary-deep); }
.ask-bar {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 24px;
 background: var(--panel);
 border: 1px solid var(--line);
 border-left: 3px solid var(--accent);
 border-radius: var(--radius);
 box-shadow: var(--shadow);
 padding: 28px 32px;
}
.ask-bar h2 { margin-bottom: 6px; }
.ask-bar p { margin: 0; color: var(--muted); }
.site-footer {
 background: var(--panel);
 border-top: 1px solid var(--line);
 padding: 48px 0 28px;
}
.footer-grid {
 display: grid;
 grid-template-columns: 1.4fr .6fr;
 gap: 32px;
}
.footer-note { color: var(--muted); max-width: 38rem; margin: 12px 0; }
.footer-label { font-size: .875rem; color: var(--muted); margin: 0 0 8px; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links a { display: inline-block; padding: 4px 0; }
.footer-links a:hover { color: var(--primary-deep); }
.copy-line {
 margin: 28px 0 0;
 padding-top: 16px;
 border-top: 1px solid var(--line);
 color: var(--muted);
 font-size: .875rem;
}
@media (min-width: 992px) {
 .channel-nav.collapse { display: flex !important; height: auto !important; }
}
@media (max-width: 1199.98px) {
 .search-form { width: 180px; }
 .channel-nav { gap: 14px; }
}
@media (max-width: 991.98px) {
 .menu-toggle { display: inline-flex; align-items: center; }
 .header-grid { grid-template-columns: 1fr; min-height: 0; padding: 8px 0 12px; gap: 8px; }
 .side-left { flex-direction: column; align-items: stretch; gap: 0; }
 .brand-row { min-height: 48px; }
 #channelMenu.collapse:not(.show) { display: none; }
 #channelMenu.collapse.show {
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 4px;
 padding: 4px 0 10px;
 }
 .side-right { justify-content: flex-start; }
 .search-form { width: min(100%, 320px); }
 .duration-grid, .scene-grid, .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
 .block { padding: 44px 0; }
 .page-head { padding: 32px 0 12px; }
 .page-title { font-size: 1.5rem; }
 .filter-board { grid-template-columns: 1fr; }
 .filter-col { border-right: 0; border-bottom: 1px solid var(--line); padding: 22px 20px; }
 .filter-col:last-child { border-bottom: 0; }
 .entry-row { grid-template-columns: 88px minmax(0, 1fr); padding: 16px; }
 .thumb, .thumb-art { width: 88px; }
 .thumb-art { height: 64px; }
 .entry-meta { grid-column: 1 / -1; justify-content: flex-start; }
 .article-line { grid-template-columns: 1fr; gap: 4px; }
 .more-row, .ask-bar { flex-direction: column; align-items: flex-start; padding: 22px 20px; }
 .scene-block { padding: 24px 22px; }
}
@media (max-width: 575.98px) {
 .container { width: min(1120px, calc(100% - 28px)) !important; }
 .side-right { flex-direction: column; align-items: stretch; }
 .search-form, .side-right .btn-main, .ask-bar .btn-main { width: 100%; }
 .brand { font-size: .9375rem; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 .entry-row, .btn-main, .btn-ghost { transition: none; }
}

/* roulang: framework shim */
/* 覆盖 Bootstrap 等对 a/btn 的全局默认，避免导航出现下划线/蓝链 */
.site-header a,.site-header a:hover,.navbar a,.navbar a:hover,.nav-links a,.nav-links a:hover,header nav a,header nav a:hover{text-decoration:none}
.site-header .btn,.navbar .btn,.nav-cta{text-decoration:none}