/* roulang page: index */
:root {
  --bg: #1C1917;
  --bg-alt: #221E1C;
  --panel: #262220;
  --panel-2: #312C29;
  --nav: #14110F;
  --ink: #F3EEE6;
  --muted: #C9C0B6;
  --line: rgba(243, 238, 230, .14);
  --brand: #3F8F7A;
  --brand-deep: #2F6F5E;
  --plum: #A18498;
  --clay: #B08968;
  --radius: 8px;
  --shadow: 0 10px 28px rgba(18, 14, 12, .18);
  --header: 72px;
  --bs-body-font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --bs-body-bg: #1C1917;
  --bs-body-color: #F3EEE6;
  --bs-primary: #3F8F7A;
  --bs-border-radius: 8px;
  --bs-border-color: rgba(243, 238, 230, .14);
  --bs-link-color: #3F8F7A;
  --bs-link-hover-color: #2F6F5E;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
button, input, select { font-family: inherit; }
h1, h2, h3, p { overflow-wrap: anywhere; }
h1, h2, h3 { line-height: 1.35; font-weight: 650; margin: 0 0 12px; letter-spacing: 0; }
p { margin: 0 0 16px; }
a { color: var(--brand); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--brand-deep); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
::selection { background: rgba(63, 143, 122, .35); color: var(--ink); }
.container { max-width: 1140px; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--nav);
  border-bottom: 1px solid var(--line);
}
.site-nav { min-height: var(--header); background: var(--nav); padding: 0; }
.nav-inner { min-height: var(--header); display: flex; align-items: center; gap: 20px; }
.brand-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-weight: 650;
  font-size: 16px;
  line-height: 1.3;
  max-width: 280px;
}
.brand-mark:hover { color: var(--ink); }
.brand-bars {
  width: 18px;
  height: 8px;
  border-radius: 2px;
  background: var(--brand);
  box-shadow: 0 5px 0 0 var(--plum);
  flex: 0 0 auto;
}
.navbar-toggler {
  margin-left: auto;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  display: none;
  align-items: center;
  justify-content: center;
}
.toggler-lines, .toggler-lines::before, .toggler-lines::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
  position: relative;
  border-radius: 2px;
}
.toggler-lines::before, .toggler-lines::after {
  content: "";
  position: absolute;
  left: 0;
}
.toggler-lines::before { top: -6px; }
.toggler-lines::after { top: 6px; }
.site-nav .navbar-nav { align-items: center; gap: 4px; }
.site-nav .nav-link {
  color: var(--ink);
  font-size: 15px;
  padding: 10px 12px;
  border-bottom: 2px solid transparent;
  background: transparent;
}
.site-nav .nav-link:hover { color: var(--brand); }
.site-nav .nav-link.active {
  color: var(--ink);
  border-bottom-color: var(--brand);
}
.nav-cta { margin-left: 12px; white-space: nowrap; }
.adult-bar {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #100E0C;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0;
  border-top: 1px solid var(--line);
}
.block { padding: 88px 0; background: var(--bg); border-top: 1px solid transparent; }
.block-alt { background: var(--bg-alt); border-top: 1px solid var(--line); }
.section-title { font-size: 28px; }
.section-lead { color: var(--muted); max-width: 760px; margin-bottom: 28px; }
.hero { padding: 56px 0 80px; background: var(--bg); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: 48px;
  align-items: center;
}
.hero h1 { font-size: 42px; margin-bottom: 14px; }
.subhead { color: var(--ink); font-size: 18px; margin-bottom: 16px; }
.hero-lead { color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.btn-brand, .btn-line, .btn-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 650;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
  cursor: pointer;
}
.btn-brand { background: var(--brand); color: #fff; border: 1px solid var(--brand); }
.btn-brand:hover, .btn-brand:focus-visible { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; transform: translateY(-1px); }
.btn-brand:active { transform: translateY(0); }
.btn-line { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-line:hover { border-color: var(--brand); color: var(--ink); transform: translateY(-1px); }
.btn-text { background: transparent; color: var(--brand); border: 0; padding: 0 2px; min-height: auto; }
.btn-text:hover { color: var(--brand-deep); }
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.today-panel { padding: 22px; }
.today-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
  gap: 12px;
}
.today-head h2 { font-size: 18px; margin: 0; }
.today-head span { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.today-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.today-row strong { font-size: 15px; font-weight: 650; }
.today-row time { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.chip-ok { color: #D7EFE7; background: rgba(63, 143, 122, .18); border-color: rgba(63, 143, 122, .35); }
.chip-wait { color: #F0E4EE; background: rgba(161, 132, 152, .18); border-color: rgba(161, 132, 152, .35); }
.chip-hot { color: #F3E6DA; background: rgba(176, 137, 104, .18); border-color: rgba(176, 137, 104, .38); }
.kpi-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.kpi-cell { padding: 22px 20px 18px; min-width: 0; }
.kpi-cell + .kpi-cell { border-left: 1px solid var(--line); }
.kpi-num {
  font-family: "SFMono-Regular", "Cascadia Mono", "Consolas", monospace;
  font-variant-numeric: tabular-nums;
  font-size: 32px;
  font-weight: 650;
  color: var(--ink);
  line-height: 1.2;
}
.kpi-label { margin: 6px 0 4px; font-size: 15px; }
.kpi-note { margin: 0; color: var(--muted); font-size: 13px; }
.func-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 16px;
}
.func-card { padding: 24px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); min-height: 168px; }
.func-card.tall { min-height: 228px; background: var(--panel-2); }
.func-card h3 { font-size: 19px; }
.func-card p { color: var(--muted); margin: 0; }
.func-card:hover { border-color: rgba(63, 143, 122, .45); transform: translateY(-1px); transition: .18s ease; }
.zone-grid { display: grid; grid-template-columns: 1.55fr .85fr; gap: 16px; }
.zone-card { padding: 22px; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: center; }
.zone-narrow { background: var(--panel-2); }
.poster {
  position: relative;
  aspect-ratio: 3 / 4;
  background: #1A1715;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.poster img { width: 100%; height: 100%; object-fit: cover; }
.poster-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(176, 137, 104, .9);
  color: #1C1917;
  font-size: 12px;
  font-weight: 650;
  border-radius: 4px;
  padding: 2px 6px;
}
.zone-card h3 { font-size: 20px; }
.zone-card p { color: var(--muted); margin-bottom: 10px; }
.text-link { font-weight: 650; }
.scene-row {
  display: grid;
  grid-template-columns: 148px 168px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  margin-bottom: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.scene-row:hover { border-color: rgba(63, 143, 122, .4); }
.scene-name { font-weight: 650; }
.scene-device { color: var(--plum); font-size: 14px; }
.scene-result { color: var(--muted); margin: 0; }
.demo-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(240px, .7fr); gap: 18px; align-items: stretch; }
.frame { position: relative; background: #14110F; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 9; }
.frame img { width: 100%; height: 100%; object-fit: cover; }
.caption-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 12px 16px;
  background: rgba(20, 17, 15, .92);
  color: var(--ink);
  font-size: 15px;
}
.info-stack { padding: 8px 18px; display: flex; flex-direction: column; justify-content: center; }
.info-row { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.info-row:last-child { border-bottom: 0; }
.info-row span { color: var(--muted); }
.info-row strong { font-variant-numeric: tabular-nums; font-weight: 650; }
.log-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 18px; }
.timeline { padding: 22px 22px 10px; }
.tl-item { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 12px; padding-bottom: 18px; }
.tl-item i {
  width: 10px; height: 10px; margin-top: 8px; border-radius: 50%;
  background: var(--brand); box-shadow: 0 18px 0 0 rgba(63, 143, 122, .35);
}
.tl-item:last-child i { box-shadow: none; }
.tl-item time { display: block; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.compact-list { padding: 8px 18px; }
.compact-item { display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.compact-item:last-child { border-bottom: 0; }
.compact-item p { margin: 0; color: var(--muted); font-size: 14px; }
.case-list { display: flex; flex-direction: column; gap: 14px; }
.case-item { padding: 22px 24px; display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 18px; }
.case-item h3 { font-size: 18px; }
.case-item p { margin: 0; color: var(--muted); }
.compare-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.compare-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.compare-table th, .compare-table td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.compare-table th { color: var(--muted); font-weight: 650; background: #201C1A; }
.compare-table tr:last-child td { border-bottom: 0; }
.compare-links { display: flex; gap: 22px; margin-top: 14px; }
.price-grid { display: grid; grid-template-columns: 1fr 1.08fr 1fr; gap: 14px; align-items: end; }
.price-card { padding: 24px 22px; background: var(--panel); }
.price-card.mid { background: var(--panel-2); border-color: rgba(63, 143, 122, .55); transform: translateY(-16px); padding-top: 28px; padding-bottom: 30px; }
.price-card h3 { font-size: 20px; }
.price-num { font-family: "SFMono-Regular", Consolas, monospace; font-variant-numeric: tabular-nums; font-size: 34px; margin: 0 0 8px; }
.price-num small { font-size: 14px; color: var(--muted); margin-left: 4px; font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif; }
.price-card ul { margin: 0 0 18px; padding: 0; list-style: none; color: var(--muted); }
.price-card li { padding: 7px 0; border-top: 1px solid var(--line); }
.review-wall { columns: 3; column-gap: 14px; }
.review-card {
  break-inside: avoid;
  margin: 0 0 14px;
  padding: 18px 18px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand);
  border-radius: var(--radius);
}
.review-card p { margin: 0 0 10px; }
.review-card span { color: var(--muted); font-size: 13px; }
.voice-list { display: flex; flex-direction: column; gap: 16px; }
.voice-item { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 18px; padding: 24px; align-items: start; }
.avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--panel-2); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-weight: 650; border: 1px solid var(--line);
}
.voice-item h3 { font-size: 18px; margin-bottom: 6px; }
.voice-item p { margin: 0; color: var(--muted); }
.news-grid { display: grid; grid-template-columns: 1.25fr .85fr; gap: 16px; }
.news-main, .news-side article { padding: 22px; }
.news-main h3, .news-side h3 { font-size: 20px; }
.news-side { display: flex; flex-direction: column; gap: 16px; }
.meta-line { color: var(--clay); font-size: 13px; font-variant-numeric: tabular-nums; margin-bottom: 8px; }
.news-more { margin-top: 16px; padding-top: 8px; }
.news-more ul { margin: 8px 0 0; padding-left: 18px; color: var(--muted); }
.accordion { --bs-accordion-bg: transparent; --bs-accordion-border-color: var(--line); --bs-accordion-color: var(--ink); --bs-accordion-btn-color: var(--ink); }
.accordion-item { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius) !important; overflow: hidden; margin-bottom: 10px; }
.accordion-button {
  background: var(--panel);
  color: var(--ink);
  font-weight: 650;
  box-shadow: none;
  padding: 16px 18px;
}
.accordion-button:not(.collapsed) {
  background: var(--panel-2);
  color: var(--ink);
  box-shadow: inset 3px 0 0 var(--brand);
}
.accordion-button::after { filter: invert(0.9); }
.accordion-button:focus { box-shadow: none; }
.accordion-body { color: var(--muted); background: var(--panel); padding: 4px 18px 16px 21px; }
.join-panel { padding: 28px; background: #181512; }
.join-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; align-items: center; }
.join-copy h2 { font-size: 28px; }
.join-copy p { color: var(--muted); margin: 0; }
.field { margin-bottom: 12px; }
.field label { display: block; margin-bottom: 6px; font-size: 14px; }
.field input, .field select {
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.field input::placeholder { color: #8d847b; }
.field input:focus, .field select:focus { border-color: var(--brand); outline: 2px solid var(--brand); background: var(--bg); }
.field input.is-error, .field select.is-error { border-color: var(--clay); }
.form-note { min-height: 24px; margin: 8px 0 0; color: var(--muted); font-size: 14px; }
.is-error-text { color: var(--clay); }
input:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  box-shadow: 0 0 0 1000px #1C1917 inset;
}
.site-footer { background: var(--nav); border-top: 1px solid var(--line); padding-top: 48px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr .8fr .9fr .8fr; gap: 24px; }
.site-footer h2 { font-size: 16px; margin-bottom: 10px; }
.site-footer p, .site-footer li { color: var(--muted); font-size: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 0 0 8px; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--ink); }
.foot-bottom {
  margin-top: 28px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 1199.98px) {
  .hero h1 { font-size: 36px; }
  .section-title, .join-copy h2 { font-size: 26px; }
}
@media (max-width: 991.98px) {
  .navbar-toggler { display: inline-flex; }
  .navbar-collapse {
    background: var(--nav);
    padding: 4px 0 12px;
  }
  .site-nav .navbar-nav { align-items: stretch; }
  .nav-cta { margin: 8px 0 4px; width: fit-content; }
  .hero-grid, .func-grid, .zone-grid, .demo-grid, .log-grid, .news-grid, .join-grid, .foot-grid {
    grid-template-columns: 1fr;
  }
  .price-grid { grid-template-columns: 1fr; align-items: stretch; }
  .price-card.mid { transform: none; }
  .block { padding: 56px 0; }
  .hero { padding: 36px 0 48px; }
  .case-item { grid-template-columns: 1fr; gap: 6px; }
  .review-wall { columns: 2; }
  .adult-bar { height: auto; min-height: 32px; padding: 6px 12px; text-align: center; }
}
@media (max-width: 767.98px) {
  .kpi-bar { grid-template-columns: 1fr 1fr; }
  .kpi-cell:nth-child(odd) { border-left: 0; }
  .kpi-cell:nth-child(n+3) { border-top: 1px solid var(--line); }
  .kpi-cell + .kpi-cell { border-left: 1px solid var(--line); }
  .scene-row, .today-row, .voice-item { grid-template-columns: 1fr; }
  .today-row time { grid-column: 1; }
  .review-wall { columns: 1; }
  .hero h1 { font-size: 32px; }
}
@media (max-width: 575.98px) {
  .brand-mark { font-size: 14px; max-width: 210px; }
  .kpi-bar, .zone-card { grid-template-columns: 1fr; }
  .kpi-cell + .kpi-cell, .kpi-cell:nth-child(n+3) { border-left: 0; border-top: 1px solid var(--line); }
  .block { padding: 44px 0; }
  .hero-actions .btn-brand, .hero-actions .btn-line, .price-card .btn-brand { width: 100%; }
  .foot-bottom { flex-direction: column; }
}

/* roulang page: category2 */
:root {
 --bg: #1C1917;
 --bg-alt: #221E1C;
 --panel: #262220;
 --panel-2: #312C29;
 --nav: #14110F;
 --ink: #F3EEE6;
 --muted: #C9C0B6;
 --line: rgba(243, 238, 230, .14);
 --brand: #3F8F7A;
 --brand-deep: #2F6F5E;
 --plum: #A18498;
 --clay: #B08968;
 --radius: 8px;
 --shadow: 0 10px 28px rgba(18, 14, 12, .18);
 --header: 72px;
 --bs-body-font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
 --bs-body-bg: #1C1917;
 --bs-body-color: #F3EEE6;
 --bs-primary: #3F8F7A;
 --bs-border-radius: 8px;
 --bs-border-color: rgba(243, 238, 230, .14);
 --bs-link-color: #3F8F7A;
 --bs-link-hover-color: #2F6F5E;
 color-scheme: dark;
}
/* roulang page: category2 */
html { scroll-behavior: smooth; box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }
body {
 margin: 0;
 background: var(--bg);
 color: var(--ink);
 font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
 font-size: 16px;
 line-height: 1.75;
 text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
button, input, select { font-family: inherit; }
a { color: var(--brand); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--brand-deep); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
 outline: 2px solid var(--brand);
 outline-offset: 2px;
}
.container { max-width: 1140px; }
h1, h2, h3 { font-weight: 650; line-height: 1.35; margin: 0 0 12px; letter-spacing: 0; }
h1 { font-size: 40px; }
h2 { font-size: 28px; }
h3 { font-size: 19px; }
p { margin: 0 0 12px; }
.site-header {
 position: sticky;
 top: 0;
 z-index: 1030;
 background: var(--nav);
 border-bottom: 1px solid var(--line);
}
.site-nav { min-height: var(--header); background: var(--nav); padding: 0; }
.nav-inner { min-height: var(--header); display: flex; align-items: center; gap: 20px; }
.brand-mark {
 display: flex;
 align-items: center;
 gap: 10px;
 color: var(--ink);
 font-weight: 650;
 font-size: 16px;
 line-height: 1.3;
 max-width: 280px;
}
.brand-mark:hover { color: var(--ink); }
.brand-bars {
 width: 18px;
 height: 8px;
 border-radius: 2px;
 background: var(--brand);
 box-shadow: 0 5px 0 0 var(--plum);
 flex: 0 0 auto;
}
.navbar-toggler {
 margin-left: auto;
 width: 42px;
 height: 42px;
 border: 1px solid var(--line);
 border-radius: var(--radius);
 background: transparent;
 display: none;
 align-items: center;
 justify-content: center;
 padding: 0;
}
.navbar-toggler:focus { box-shadow: none; }
.toggler-lines, .toggler-lines::before, .toggler-lines::after {
 display: block;
 width: 18px;
 height: 2px;
 background: var(--ink);
 border-radius: 2px;
 position: relative;
 content: "";
}
.toggler-lines::before { position: absolute; top: -6px; left: 0; }
.toggler-lines::after { position: absolute; top: 6px; left: 0; }
.site-nav .navbar-nav { align-items: center; gap: 4px; }
.site-nav .navbar-nav .nav-link {
 color: var(--ink);
 font-size: 15px;
 padding: 10px 12px;
 border-bottom: 2px solid transparent;
 background: transparent;
}
.site-nav .navbar-nav .nav-link:hover,
.site-nav .navbar-nav .nav-link:focus { color: var(--brand); }
.site-nav .navbar-nav .nav-link.active,
.site-nav .navbar-nav .nav-link[aria-current="page"] {
 color: var(--ink);
 border-bottom-color: var(--brand);
}
.nav-cta { margin-left: 12px; white-space: nowrap; }
.adult-bar {
 min-height: 32px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: #100E0C;
 color: var(--muted);
 font-size: 12px;
 line-height: 1.5;
 border-top: 1px solid var(--line);
 text-align: center;
 padding: 4px 16px;
}
.band { padding: 84px 0; background: var(--bg); }
.band-alt { padding: 84px 0; background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-lead { color: var(--muted); max-width: 760px; margin-bottom: 28px; }
.kr-intro { padding: 36px 0 32px; background: var(--bg); border-bottom: 1px solid var(--line); }
.kr-head-top {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 24px;
}
.kr-side {
 margin: 0;
 color: var(--muted);
 font-size: 15px;
 text-align: right;
 max-width: 460px;
}
.kr-toolbar {
 margin-top: 18px;
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 10px;
 padding: 12px;
 background: var(--panel);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 box-shadow: var(--shadow);
}
.tool-label {
 color: var(--muted);
 font-size: 13px;
 margin-right: 4px;
}
.sort-label {
 margin-left: auto;
 display: flex;
 align-items: center;
 gap: 8px;
 color: var(--muted);
 font-size: 13px;
}
select, .field {
 background: var(--bg);
 color: var(--ink);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 min-height: 40px;
 padding: 0 12px;
}
select:focus, .field:focus { border-color: var(--brand); }
.chip {
 display: inline-flex;
 align-items: center;
 height: 28px;
 padding: 0 10px;
 border-radius: 999px;
 font-size: 12px;
 border: 1px solid transparent;
 white-space: nowrap;
 background: transparent;
 color: var(--ink);
 cursor: pointer;
}
.chip-ok { color: #D7EFE7; background: rgba(63, 143, 122, .18); border-color: rgba(63, 143, 122, .35); }
.chip-wait { color: #F0E4EE; background: rgba(161, 132, 152, .18); border-color: rgba(161, 132, 152, .35); }
.chip-hot { color: #F3E6DA; background: rgba(176, 137, 104, .18); border-color: rgba(176, 137, 104, .38); }
.chip.is-on { box-shadow: inset 0 0 0 1px var(--brand); }
.btn-brand, .btn-line, .btn-text {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 44px;
 padding: 0 18px;
 border-radius: var(--radius);
 font-size: 15px;
 font-weight: 650;
 transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
 cursor: pointer;
}
.btn-brand { background: var(--brand); color: #fff; border: 1px solid var(--brand); }
.btn-brand:hover, .btn-brand:focus-visible { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; transform: translateY(-1px); }
.btn-brand:active { transform: translateY(0); }
.btn-line { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-line:hover { border-color: var(--brand); color: var(--ink); transform: translateY(-1px); }
.btn-text { background: transparent; color: var(--brand); border: 0; padding: 0 2px; min-height: auto; }
.btn-text:hover { color: var(--brand-deep); }
.feature-card {
 display: grid;
 grid-template-columns: minmax(280px, 1.15fr) minmax(260px, .85fr);
 gap: 28px;
 align-items: center;
 padding: 22px;
 background: var(--panel);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 box-shadow: var(--shadow);
}
.screen {
 aspect-ratio: 16/9;
 background: #171412;
 border-radius: var(--radius);
 border: 1px solid var(--line);
 position: relative;
 overflow: hidden;
}
.screen-mark {
 position: absolute;
 left: 12px;
 top: 12px;
 background: rgba(176, 137, 104, .92);
 color: #1C1917;
 font-size: 12px;
 font-weight: 650;
 border-radius: 4px;
 padding: 2px 6px;
}
.screen-lines {
 position: absolute;
 left: 20px;
 right: 20px;
 bottom: 18px;
 display: grid;
 gap: 7px;
}
.screen-lines i {
 display: block;
 height: 8px;
 border-radius: 2px;
 background: rgba(243, 238, 230, .38);
}
.screen-lines i:last-child { width: 68%; height: 10px; background: var(--brand); }
.feature-meta {
 display: grid;
 grid-template-columns: 88px minmax(0, 1fr);
 gap: 6px 12px;
 margin: 14px 0;
 color: var(--muted);
 font-size: 14px;
}
.feature-meta b { color: var(--ink); font-weight: 650; }
.feature-actions { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.time-num { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; }
.dir-grid {
 margin-top: 16px;
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 16px;
}
.dir-row {
 display: grid;
 grid-template-columns: 72px minmax(0, 1fr);
 gap: 14px;
 padding: 14px;
 background: var(--panel);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 min-width: 0;
 transition: border-color .18s ease, transform .18s ease;
}
.dir-row:hover { border-color: rgba(63, 143, 122, .45); transform: translateY(-1px); }
.poster {
 position: relative;
 aspect-ratio: 3/4;
 background: #312C29;
 border-radius: 6px;
 border: 1px solid var(--line);
}
.poster::after {
 content: "";
 position: absolute;
 left: 8px;
 right: 8px;
 bottom: 10px;
 height: 6px;
 border-radius: 2px;
 background: var(--brand);
}
.poster-badge {
 position: absolute;
 top: 6px;
 left: 6px;
 background: rgba(176, 137, 104, .92);
 color: #1C1917;
 font-size: 12px;
 font-weight: 650;
 border-radius: 4px;
 padding: 1px 5px;
 z-index: 1;
}
.dir-row h3 { font-size: 17px; margin-bottom: 4px; }
.dir-row h3 a { color: var(--ink); }
.dir-row h3 a:hover { color: var(--brand); }
.dir-row p { color: var(--muted); margin: 0 0 8px; font-size: 14px; }
.dir-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cmp-table {
 width: 100%;
 border-collapse: separate;
 border-spacing: 0;
 background: var(--panel);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 overflow: hidden;
 box-shadow: var(--shadow);
}
.cmp-table th, .cmp-table td {
 padding: 16px 18px;
 border-bottom: 1px solid var(--line);
 text-align: left;
 vertical-align: top;
 font-weight: 400;
}
.cmp-table tr:last-child th, .cmp-table tr:last-child td { border-bottom: 0; }
.cmp-table thead th { background: var(--panel-2); font-weight: 650; }
.cmp-table tbody th { color: var(--muted); width: 22%; font-weight: 650; background: rgba(20, 17, 15, .28); }
.series-list { list-style: none; margin: 0; padding: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.series-list li {
 display: grid;
 grid-template-columns: 56px minmax(0, 1.4fr) minmax(90px, .6fr) auto auto;
 gap: 12px;
 align-items: center;
 padding: 14px 18px;
 border-top: 1px solid var(--line);
}
.series-list li:first-child { border-top: 0; }
.series-no {
 font-variant-numeric: tabular-nums;
 color: var(--brand);
 font-weight: 650;
}
.series-list a { color: var(--ink); font-weight: 650; }
.series-list a:hover { color: var(--brand); }
.series-list span { color: var(--muted); font-size: 14px; }
.scene-row {
 display: grid;
 grid-template-columns: 160px 160px minmax(0, 1fr);
 gap: 16px;
 align-items: center;
 padding: 18px 20px;
 margin-bottom: 12px;
 background: var(--panel);
 border: 1px solid var(--line);
 border-radius: var(--radius);
}
.scene-row:last-child { margin-bottom: 0; }
.scene-row:hover { border-color: rgba(63, 143, 122, .45); }
.scene-row strong { font-size: 18px; font-weight: 650; }
.scene-row em { font-style: normal; color: var(--plum); }
.scene-row span { color: var(--muted); }
.news-list { list-style: none; margin: 0; padding: 0; }
.news-list li {
 display: flex;
 justify-content: space-between;
 gap: 18px;
 align-items: baseline;
 padding: 16px 0;
 border-bottom: 1px solid var(--line);
}
.news-list a { color: var(--ink); font-weight: 650; font-size: 17px; }
.news-list a:hover { color: var(--brand); }
.news-list time { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 14px; }
.accordion { --bs-accordion-bg: var(--panel); --bs-accordion-border-color: var(--line); --bs-accordion-btn-color: var(--ink); --bs-accordion-active-bg: var(--panel-2); --bs-accordion-active-color: var(--ink); --bs-accordion-btn-focus-box-shadow: none; --bs-accordion-color: var(--muted); }
.accordion-item { background: var(--panel); color: var(--ink); border: 1px solid var(--line); margin-bottom: 10px; border-radius: var(--radius) !important; overflow: hidden; }
.accordion-button {
 background: var(--panel);
 color: var(--ink);
 font-weight: 650;
 box-shadow: none;
 padding: 16px 18px;
}
.accordion-button:not(.collapsed) {
 background: var(--panel-2);
 color: var(--ink);
 box-shadow: inset 3px 0 0 var(--brand);
}
.accordion-button::after { filter: grayscale(1) brightness(2.2); }
.accordion-button:focus { box-shadow: inset 0 0 0 2px var(--brand); }
.accordion-body { color: var(--muted); background: var(--panel); padding: 4px 18px 16px 21px; }
.more-bar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 20px;
 padding: 28px;
 background: var(--panel-2);
 border: 1px solid var(--line);
 border-radius: var(--radius);
 box-shadow: var(--shadow);
}
.more-bar p { margin: 0; color: var(--muted); }
.site-footer { background: var(--nav); border-top: 1px solid var(--line); padding: 56px 0 24px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr .8fr .8fr .9fr; gap: 28px; }
.site-footer h2 { font-size: 16px; margin: 0 0 12px; }
.site-footer p, .site-footer li { color: var(--muted); font-size: 14px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin: 6px 0; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--brand); }
.foot-bottom {
 display: flex;
 justify-content: space-between;
 gap: 12px;
 margin-top: 28px;
 padding-top: 16px;
 border-top: 1px solid var(--line);
 color: var(--muted);
 font-size: 13px;
}
@media (max-width: 1199.98px) {
 .feature-card { grid-template-columns: 1fr 1fr; }
 .series-list li { grid-template-columns: 48px minmax(0, 1fr) auto; }
 .series-track, .series-time { display: none; }
}
@media (max-width: 991.98px) {
 .navbar-toggler { display: inline-flex; }
 .site-nav .navbar-collapse { background: var(--nav); padding: 4px 0 16px; }
 .site-nav .navbar-nav { align-items: stretch; width: 100%; }
 .nav-cta { margin: 8px 12px 4px; }
 h1 { font-size: 34px; }
 h2 { font-size: 26px; }
 .band, .band-alt { padding: 56px 0; }
 .kr-head-top { align-items: flex-start; }
 .foot-grid { grid-template-columns: 1fr 1fr; }
 .scene-row { grid-template-columns: 1fr 1fr; }
 .scene-row span { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
 .kr-head-top, .feature-card, .dir-grid, .more-bar, .foot-grid, .foot-bottom { display: flex; flex-direction: column; align-items: stretch; }
 .kr-side, .sort-label { text-align: left; margin-left: 0; }
 .feature-card { display: grid; grid-template-columns: 1fr; }
 .dir-grid { display: grid; grid-template-columns: 1fr; }
 .foot-grid, .foot-bottom { display: grid; grid-template-columns: 1fr; }
 .scene-row { grid-template-columns: 1fr; }
 .news-list li { flex-direction: column; gap: 4px; }
 .brand-mark { font-size: 14px; max-width: calc(100% - 64px); }
 .band, .band-alt { padding: 48px 0; }
 .kr-intro { padding: 28px 0 24px; }
}
@media (max-width: 575.98px) {
 h1 { font-size: 30px; }
 h2 { font-size: 22px; }
 .adult-bar { font-size: 11px; }
 .cmp-table th, .cmp-table td { padding: 12px; }
 .series-list li { grid-template-columns: 36px minmax(0, 1fr); }
 .series-list .chip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 *, *::before, *::after { transition: none !important; }
}

/* roulang page: category1 */
:root {
 --bg: #1C1917;
 --bg-alt: #221E1C;
 --panel: #262220;
 --panel-2: #312C29;
 --nav: #14110F;
 --ink: #F3EEE6;
 --muted: #C9C0B6;
 --line: rgba(243, 238, 230, .14);
 --brand: #3F8F7A;
 --brand-deep: #2F6F5E;
 --plum: #A18498;
 --clay: #B08968;
 --radius: 8px;
 --shadow: 0 10px 28px rgba(18, 14, 12, .18);
 --header: 72px;
 --bs-body-font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
 --bs-body-bg: #1C1917;
 --bs-body-color: #F3EEE6;
 --bs-primary: #3F8F7A;
 --bs-border-radius: 8px;
 --bs-border-color: rgba(243, 238, 230, .14);
 --bs-link-color: #3F8F7A;
 --bs-link-hover-color: #2F6F5E;
 color-scheme: dark;
}
/* roulang page: category1 */
html { scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }
body {
 margin: 0;
 background: var(--bg);
 color: var(--ink);
 font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
 font-size: 16px;
 line-height: 1.75;
 text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
button, input, select { font-family: inherit; }
a { color: var(--brand); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--brand-deep); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
 outline: 2px solid var(--brand);
 outline-offset: 2px;
}
h1, h2, h3 { font-weight: 650; line-height: 1.35; letter-spacing: 0; }
h1 { font-size: 36px; margin: 0 0 8px; }
h2 { font-size: 28px; margin: 0 0 12px; }
h3 { font-size: 18px; margin: 0 0 8px; }
p { margin: 0 0 12px; }
ul, ol { margin: 0; padding: 0; }
.container { width: min(1140px, calc(100% - 32px)); margin: 0 auto; }
.site-header { position: sticky; top: 0; z-index: 1030; background: var(--nav); border-bottom: 1px solid var(--line); }
.site-nav { min-height: var(--header); background: var(--nav); padding: 0; }
.nav-inner { min-height: var(--header); display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.brand-mark { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 650; font-size: 16px; line-height: 1.3; max-width: 280px; }
.brand-mark:hover { color: var(--ink); }
.brand-bars { width: 18px; height: 8px; border-radius: 2px; background: var(--brand); box-shadow: 0 5px 0 0 var(--plum); flex: 0 0 auto; }
.navbar-toggler { margin-left: auto; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: var(--radius); background: transparent; display: none; align-items: center; justify-content: center; }
.toggler-lines, .toggler-lines::before, .toggler-lines::after { display: block; width: 18px; height: 2px; background: var(--ink); position: relative; }
.toggler-lines::before, .toggler-lines::after { content: ""; position: absolute; left: 0; }
.toggler-lines::before { top: -6px; }
.toggler-lines::after { top: 6px; }
.navbar-collapse { flex: 1 1 auto; }
.site-nav .navbar-nav { align-items: center; gap: 4px; }
.site-nav .nav-link { color: var(--ink); font-size: 15px; padding: 10px 12px; border-bottom: 2px solid transparent; background: transparent; }
.site-nav .nav-link:hover, .site-nav .nav-link:focus-visible { color: var(--brand); }
.site-nav .nav-link.active { color: var(--ink); border-bottom-color: var(--brand); }
.nav-cta { margin-left: 12px; white-space: nowrap; }
.adult-bar { min-height: 32px; display: flex; align-items: center; justify-content: center; background: #1A1614; color: var(--clay); font-size: 12px; border-bottom: 1px solid var(--line); text-align: center; padding: 6px 16px; line-height: 1.5; }
.block { padding: 80px 0; }
.block-alt { background: var(--bg-alt); }
.section-lead { color: var(--muted); max-width: 760px; margin-bottom: 28px; }
.page-head { padding: 40px 0 32px; background: var(--bg); }
.head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.lead-line { color: var(--muted); margin: 0; max-width: 640px; }
.sort-box { display: flex; flex-direction: column; gap: 6px; min-width: 180px; }
.sort-box span { color: var(--muted); font-size: 13px; }
.sort-select, .field { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); min-height: 44px; padding: 0 12px; }
.sort-select:focus, .field:focus { border-color: var(--brand); box-shadow: 0 0 0 2px rgba(63, 143, 122, .35); }
.btn-brand, .btn-line, .btn-text { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: var(--radius); font-size: 15px; font-weight: 650; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; cursor: pointer; }
.btn-brand { background: var(--brand); color: #fff; border: 1px solid var(--brand); }
.btn-brand:hover, .btn-brand:focus-visible { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; transform: translateY(-1px); }
.btn-brand:active { transform: translateY(0); }
.btn-line { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-line:hover { border-color: var(--brand); color: var(--ink); transform: translateY(-1px); }
.btn-text { background: transparent; color: var(--brand); border: 0; padding: 0 2px; min-height: auto; }
.btn-text:hover { color: var(--brand-deep); }
.chip { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 999px; font-size: 12px; border: 1px solid transparent; white-space: nowrap; }
.chip-ok { color: #D7EFE7; background: rgba(63, 143, 122, .18); border-color: rgba(63, 143, 122, .35); }
.chip-wait { color: #F0E4EE; background: rgba(161, 132, 152, .18); border-color: rgba(161, 132, 152, .35); }
.chip-hot { color: #F3E6DA; background: rgba(176, 137, 104, .18); border-color: rgba(176, 137, 104, .38); }
.filter-block { padding: 28px 0 36px; background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.filter-panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 22px; }
.filter-group { min-width: 0; }
.filter-label { display: block; color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-btn { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); font-size: 13px; cursor: pointer; transition: border-color .18s ease, color .18s ease, background .18s ease; }
.chip-btn:hover { border-color: var(--brand); color: var(--ink); }
.chip-btn[aria-pressed="true"] { color: #D7EFE7; background: rgba(63, 143, 122, .18); border-color: rgba(63, 143, 122, .5); }
.list-block { background: var(--bg); }
.catalog-list { display: flex; flex-direction: column; gap: 12px; }
.catalog-row { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); transition: border-color .18s ease, transform .18s ease; }
.catalog-row:hover { border-color: rgba(63, 143, 122, .45); transform: translateY(-1px); }
.poster { position: relative; width: 84px; aspect-ratio: 3 / 4; border-radius: 8px; border: 1px solid var(--line); overflow: hidden; background: #2A2522; }
.poster-bars { position: absolute; left: 10px; right: 16px; bottom: 16px; height: 4px; background: var(--brand); border-radius: 2px; }
.poster-bars::after { content: ""; position: absolute; left: 0; top: 8px; width: 62%; height: 3px; background: var(--plum); border-radius: 2px; }
.poster.alt .poster-bars { width: 70%; background: var(--clay); }
.poster.deep { background: #241F1C; }
.poster-badge { position: absolute; top: 8px; left: 8px; background: rgba(176, 137, 104, .92); color: #1C1917; font-size: 12px; font-weight: 650; border-radius: 4px; padding: 1px 6px; }
.row-main h3 { font-size: 18px; margin-bottom: 4px; }
.row-main h3 a { color: var(--ink); }
.row-main h3 a:hover { color: var(--brand); }
.row-main p { color: var(--muted); margin: 0; }
.row-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 6px; font-variant-numeric: tabular-nums; font-size: 13px; }
.row-status { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.row-status time { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.empty-note { display: none; margin-top: 16px; color: var(--clay); }
.empty-note.show { display: block; }
.version-block { background: var(--bg-alt); }
.version-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.version-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; min-height: 220px; }
.version-card:nth-child(2) { background: var(--panel-2); }
.version-card p { color: var(--muted); }
.version-card .chip { margin-bottom: 14px; }
.series-block { background: var(--bg); }
.series-rail { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.series-link { flex: 0 0 210px; scroll-snap-align: start; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 16px; color: var(--ink); box-shadow: var(--shadow); }
.series-link strong { display: block; font-size: 16px; font-weight: 650; margin-bottom: 6px; }
.series-link span { color: var(--muted); font-size: 13px; }
.series-link:hover { border-color: var(--brand); color: var(--ink); transform: translateY(-1px); }
.rhythm-block { background: var(--bg-alt); }
.rhythm-list { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: none; }
.rhythm-list li { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 18px; box-shadow: var(--shadow); position: relative; }
.rhythm-list li span { display: block; color: var(--brand); font-variant-numeric: tabular-nums; font-family: "SFMono-Regular", Consolas, "Microsoft YaHei", monospace; font-size: 13px; margin-bottom: 10px; }
.rhythm-list p { color: var(--muted); margin: 0; }
.news-block { background: var(--bg); }
.news-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.news-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 18px; align-items: center; padding: 18px 4px; border-bottom: 1px solid var(--line); color: inherit; }
.news-row:hover { background: rgba(38, 34, 32, .65); }
.news-row h3 { font-size: 18px; margin: 0 0 4px; color: var(--ink); }
.news-row p { margin: 0; color: var(--muted); }
.news-row time { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; }
.more-block { background: var(--bg-alt); padding: 36px 0 72px; border-top: 1px solid var(--line); }
.more-link { font-size: 16px; min-height: 44px; }
.site-footer { background: var(--nav); border-top: 1px solid var(--line); padding: 56px 0 24px; color: var(--muted); }
.foot-grid { display: grid; grid-template-columns: 1.4fr .8fr .8fr 1fr; gap: 28px; }
.site-footer h2 { color: var(--ink); font-size: 16px; font-weight: 650; margin: 0 0 12px; }
.site-footer p { margin: 0 0 12px; }
.site-footer ul { list-style: none; }
.site-footer li { margin: 6px 0; }
.site-footer a { color: var(--muted); }
.site-footer a:hover { color: var(--brand); }
.foot-bottom { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
@media (max-width: 1199.98px) {
 .version-grid, .rhythm-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .filter-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
 .navbar-toggler { display: inline-flex; }
 #navMain { width: 100%; padding: 4px 0 16px; }
 .site-nav .navbar-nav { align-items: flex-start; width: 100%; }
 .nav-cta { margin: 8px 0 0; }
 .block { padding: 56px 0; }
 h1 { font-size: 32px; }
 h2 { font-size: 24px; }
 .foot-grid { grid-template-columns: 1fr 1fr; }
 .news-row { grid-template-columns: minmax(0, 1fr) auto; }
 .news-row .btn-text { display: none; }
}
@media (max-width: 767.98px) {
 .head-row, .catalog-row, .foot-bottom { display: flex; flex-direction: column; align-items: flex-start; }
 .sort-box, .sort-select { width: 100%; }
 .catalog-row { align-items: flex-start; }
 .row-status { flex-direction: row; align-items: center; }
 .version-grid, .rhythm-list, .filter-panel, .foot-grid { grid-template-columns: 1fr; }
 .page-head { padding: 32px 0 24px; }
 .block { padding: 48px 0; }
 .brand-name { font-size: 14px; }
}
@media (max-width: 519.98px) {
 .container { width: min(1140px, calc(100% - 24px)); }
 h1 { font-size: 28px; }
 .poster { width: 72px; }
 .series-link { flex-basis: 180px; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 *, *::before, *::after { transition: none !important; }
}

/* 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}
