:root {
  --bg: #f5f7f8;
  --ink: #1c2430;
  --muted: #5c6772;
  --faint: #7b8692;
  --line: rgba(22, 32, 44, .1);
  --coral: #e35a42;
  --hot: linear-gradient(100deg, #ff7388 0%, #ff8d72 48%, #ff9a56 100%);
  --max: 1180px;
  --panel: rgba(255,255,255,.92);
  --card: #fff;
  --chip: #e7edf2;
  --chip-on: #f3d5dc;
  --quiet: #fff;
  --scrim: linear-gradient(180deg, rgba(245,247,248,.94), rgba(245,247,248,.55) 70%, transparent);
  --metric-line: rgba(22,32,44,.12);
  --row-line: rgba(22,32,44,.08);
  --soft: #4d5866;
  --route: rgba(28, 74, 112, .22);
  --route-strong: rgba(196, 92, 62, .55);
  --node: #2f6f86;
}
html[data-theme="night"] {
  --bg: #07080b;
  --ink: #f6f7f8;
  --muted: #aeb6c0;
  --faint: #8b939e;
  --line: rgba(255,255,255,.08);
  --panel: rgba(12,14,18,.72);
  --card: rgba(16,18,24,.78);
  --chip: #2a3342;
  --chip-on: #6e3d4c;
  --quiet: rgba(20,24,31,.86);
  --scrim: linear-gradient(180deg, rgba(7,8,11,.88), rgba(7,8,11,.35) 70%, transparent);
  --metric-line: rgba(255,255,255,.12);
  --row-line: rgba(255,255,255,.06);
  --soft: #c5ccd4;
  --route: rgba(186, 214, 230, .16);
  --route-strong: rgba(255, 154, 110, .45);
  --node: #8fd0c8;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; color: var(--ink); background: var(--bg);
  font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input { font: inherit; }
.field {
  position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%;
  color: var(--route); pointer-events: none;
}
.field .arc { fill: none; stroke: currentColor; stroke-width: 1.2; }
.field .main { fill: none; stroke: var(--route-strong); stroke-width: 1.8; }
.field .node { fill: var(--node); }
.field .faint { fill: none; stroke: currentColor; stroke-width: .6; opacity: .7; }
.wrap { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; }
.top, .hero, main, footer { position: relative; z-index: 1; }
.top {
  position: sticky; top: 10px; z-index: 5; height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  width: min(var(--max), calc(100% - 32px)); margin: 10px auto 0; padding: 0 10px 0 14px;
  border: 1px solid rgba(22, 32, 44, .08); border-radius: 18px;
  background: #fff; box-shadow: 0 10px 28px rgba(22, 32, 44, .06);
}
.top::before { content: none; }
.brand { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 800; letter-spacing: .02em; font-size: 15px; }
.top .brand { font-size: 16px; }
.brand-name { display: grid; gap: 1px; line-height: 1.05; }
.brand-name small { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .04em; }
.brand-name strong { font-size: 13px; font-weight: 800; letter-spacing: .08em; }
.brand img { width: 48px; height: 48px; border-radius: 0; display: block; object-fit: contain; background: none; }
.brand span { color: inherit; font-weight: 800; letter-spacing: .02em; }
.brand i {
  width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
  background: #fff4f1; border: 1px solid rgba(227, 90, 66, .28); color: var(--coral); font-style: normal;
}
.menu {
  display: flex; gap: 2px; padding: 4px; border-radius: 999px;
  background: #f2f4f6; border: 1px solid rgba(22, 32, 44, .06);
}
.menu a {
  height: 32px; padding: 0 14px; border-radius: 999px;
  display: inline-flex; align-items: center; color: #3c4754; font-size: 13px; font-weight: 700;
}
.menu a:hover,
.menu a[aria-current="page"] { background: #fff; color: #1c2430; box-shadow: 0 1px 2px rgba(22, 32, 44, .08); }
.page { padding-bottom: 48px; }
.page-intro { max-width: 760px; margin: 28px 0 18px; }
.page-intro h1 { margin: 8px 0 10px; font-size: 40px; line-height: 1.05; }
.kicker { margin: 0; color: var(--coral); font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.page-intro p { margin: 0; color: var(--soft); }
.dir { display: grid; gap: 8px; }
.dir-row[hidden],
.offer[hidden],
#q-empty[hidden] { display: none !important; }
#q-empty { margin: 0 0 14px; color: var(--faint); }
.dir-row {
  display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 12px; align-items: center;
  min-height: 64px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--card);
}
.dir-row b { color: var(--coral); font-size: 13px; }
.dir-row strong { display: block; }
.dir-row em { display: block; color: var(--faint); font-style: normal; font-size: 12px; }
.go { color: var(--soft); font-size: 13px; font-weight: 700; }
.ai-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.ai-split { grid-column: 1 / -1; margin: 10px 0 0; font-size: 15px; letter-spacing: .08em; color: var(--faint); }
.ai-card {
  display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
  min-height: 180px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--card);
}
.ai-card h2 { margin: 0 0 8px; font-size: 22px; display: flex; align-items: center; gap: 10px; }
.ai-mark { width: 36px; height: 36px; border-radius: 10px; object-fit: contain; background: #fff; padding: 4px; border: 1px solid rgba(22,32,44,.08); }
.ai-card p { margin: 0; color: var(--soft); font-size: 14px; }
.related { margin-top: 18px; color: var(--faint); font-size: 14px; }
.related a { color: var(--ink); font-weight: 700; }
.nav-tools { display: flex; align-items: center; gap: 18px; }
.theme-toggle {
  width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); cursor: pointer;
  display: grid; place-items: center;
}
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.hero { padding: 18px 0 36px; }
.scene { display: block; }
.telemetry { width: min(920px, 100%); margin: 0 auto 8px; }
.lower { display: grid; grid-template-columns: minmax(0,1fr) 392px; gap: 28px; align-items: start; margin-top: 28px; }
.telemetry {
  position: relative; overflow: hidden; min-height: 280px; border-radius: 28px;
  background:
    radial-gradient(ellipse at 88% 0%, rgba(255, 147, 86, .16), transparent 42%),
    radial-gradient(ellipse at 6% 100%, rgba(124, 196, 255, .16), transparent 46%),
    linear-gradient(180deg, #fbfcfd 0%, #f4f7f8 100%);
  color: #1c2430; box-shadow: 0 18px 40px rgba(28, 36, 48, .08);
}
.cabin-map { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.telemetry-copy { position: relative; z-index: 1; padding: 26px 28px 28px; text-align: center; }
.telemetry .berth,
.telemetry .copy b { color: #1c2430; }
.telemetry .copy { color: #4d5866; }
.telemetry .tagline { color: #2b3442; }
html[data-theme="night"] .telemetry {
  background:
    radial-gradient(ellipse at 88% 0%, rgba(255, 147, 86, .18), transparent 42%),
    radial-gradient(ellipse at 6% 100%, rgba(124, 196, 255, .14), transparent 46%),
    linear-gradient(180deg, #1c2430 0%, #151a22 100%);
  color: #f6f7f8; box-shadow: 0 18px 40px rgba(0,0,0,.28);
}
html[data-theme="night"] .telemetry .berth,
html[data-theme="night"] .telemetry .copy b { color: #f6f7f8; }
html[data-theme="night"] .telemetry .copy { color: #c5ccd4; }
html[data-theme="night"] .telemetry .tagline { color: #d7dee6; }
.eyebrow { display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .16em; font-weight: 800; }
.eyebrow .base { color: #e07a45; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #3dbe74; }
.online { color: #2f9d62; }
.berth { margin: 12px 0 8px; font-size: 18px; font-weight: 750; letter-spacing: -.02em; }
.caret { display: inline-block; width: 8px; height: 14px; margin-left: 6px; background: #ff9356; vertical-align: -1px; animation: caret 1.1s step-end infinite; }
.copy { margin: 0 auto; max-width: 34em; color: #4d5866; font-size: 14px; }
.copy b { color: #1c2430; }
.tagline { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 12px; color: #2b3442; font-size: 13px; font-weight: 700; }
.eq { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.eq span { width: 3px; height: 100%; border-radius: 1px; transform-origin: bottom; animation: bar 1.35s ease-in-out infinite; }
.eq span:nth-child(1) { background: #ff9356; }
.eq span:nth-child(2) { background: #ff6b84; animation-delay: .16s; }
.eq span:nth-child(3) { background: #7cc4ff; animation-delay: .32s; }
.eq span:nth-child(4) { background: #3dbe74; animation-delay: .48s; }
h1 { margin: 28px 0 14px; font-size: 64px; line-height: .98; letter-spacing: -.045em; font-weight: 800; }
h1 em { color: var(--coral); font-style: normal; }
.lede { max-width: 540px; margin: 0 0 22px; color: var(--soft); font-size: 16px; }
.actions { display: flex; gap: 12px; margin-bottom: 28px; }
.hot, .quiet, .buy {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
  border-radius: 14px; font-weight: 700;
}
.hot, .buy { background: var(--hot); color: #2a1210; transition: transform .25s ease, filter .25s ease; }
.hot:hover, .buy:hover { transform: translateY(-1px); filter: saturate(1.08); }
.quiet { background: var(--quiet); color: var(--ink); border: 1px solid var(--line); }
.metrics { display: flex; }
.metrics div { padding-right: 26px; margin-right: 26px; border-right: 1px solid var(--metric-line); }
.metrics div:last-child { border: 0; }
.metrics b { display: block; font-size: 32px; line-height: 1; letter-spacing: -.04em; }
.metrics small { color: var(--faint); }
.hero .lower { display: flex; align-items: center; justify-content: flex-start; gap: 36px; margin-top: 28px; }
.hero .lower .intro { flex: 0 1 640px; min-width: 0; }
.hero .lower h1 { margin-top: 0; }
.rank-motion {
  flex: 0 0 420px; display: flex; align-items: flex-end; justify-content: center; gap: 55px;
  width: 420px; height: 220px; padding: 16px 18px 14px;
  border: 1px solid var(--line); border-radius: 22px; background: var(--card);
  box-shadow: 0 12px 32px rgba(22,32,44,.06);
}
.rank-motion .lane { display: grid; grid-template-rows: auto 148px; gap: 10px; }
.rank-motion b { color: var(--faint); font-size: 12px; letter-spacing: .12em; text-align: center; }
.rank-motion .bars {
  display: flex; align-items: flex-end; justify-content: flex-start; gap: 55px;
  height: 148px; border-bottom: 1px solid var(--line);
}
.rank-motion i {
  display: block; width: 18px; height: 136px; border-radius: 7px 7px 3px 3px;
  transform: scaleY(.35); transform-origin: bottom;
  animation: bar 2.2s ease-in-out infinite;
}
.rank-motion .bars i:nth-child(1) { background: linear-gradient(180deg, #ff8a78, #ff3b30); }
.rank-motion .bars i:nth-child(2) { background: linear-gradient(180deg, #ffc14d, #ff7a00); animation-delay: .26s; }
.rank-motion .bars i:nth-child(3) { background: linear-gradient(180deg, #ffe14a, #f5b400); animation-delay: .52s; }
.rank-motion .lane:last-child .bars i:nth-child(1) { background: linear-gradient(180deg, #5ee0ff, #0091ff); animation-delay: .78s; }
.rank-motion .lane:last-child .bars i:nth-child(2) { background: linear-gradient(180deg, #7d8bff, #4b3dff); animation-delay: 1.04s; }
.rank-motion .lane:last-child .bars i:nth-child(3) { background: linear-gradient(180deg, #5eecc0, #00b37a); animation-delay: 1.3s; }
html[data-theme="night"] .rank-motion { background: #161b22; }
.panel {
  margin-top: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 22px;
  backdrop-filter: blur(16px); overflow: hidden; box-shadow: 0 16px 40px rgba(22,32,44,.06);
}
.row {
  display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 12px; align-items: center;
  padding: 13px 16px; border-bottom: 1px solid var(--row-line);
}
.row img { width: 42px; height: 42px; border-radius: 12px; object-fit: cover; background: #171a21; }
.row strong { display: block; }
.row em, .sub { display: block; color: var(--faint); font-style: normal; font-size: 12px; font-weight: 400; }
.row b { display: block; font-size: 18px; text-align: right; white-space: nowrap; }
.row > span:last-child { text-align: right; }
.row small { display: block; color: var(--faint); text-align: right; font-size: 12px; white-space: nowrap; }
.panel-foot { margin: 10px; min-height: 44px; border-radius: 12px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 14px; }
.section { padding: 28px 0 8px; }
.section-head { display: flex; justify-content: space-between; gap: 18px; align-items: end; margin-bottom: 14px; }
.section-head h2 { margin: 0; font-size: 22px; }
.section-head p, .note { margin: 0; color: var(--faint); font-size: 13px; }
.offers { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.offer {
  min-height: 320px; border-radius: 22px; overflow: hidden; border: 1px solid var(--line);
  background: var(--card); backdrop-filter: blur(10px); display: flex;
  box-shadow: 0 12px 30px rgba(22,32,44,.05);
}
.offer-shade { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 18px; }
.head { display: flex; gap: 10px; align-items: center; }
.head img, .logo { width: 42px; height: 42px; border-radius: 12px; object-fit: cover; background: #171a21; }
.offer h3 { margin: 0; font-size: 20px; }
.desc { color: var(--soft); font-size: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.chip { border-radius: 999px; padding: 6px 12px; background: var(--chip); color: var(--ink); font-size: 13px; }
.chip.on { background: var(--chip-on); color: var(--ink); }
.price { font-size: 32px; font-weight: 800; letter-spacing: -.04em; }
.price-note { color: var(--faint); font-size: 13px; margin: 6px 0 12px; }
.buy { width: 100%; }
.review { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--coral); font-size: 14px; font-weight: 800; text-decoration: none; }
.review::after { content: "→"; }
.tools, #q {
  width: min(320px, 100%); height: 42px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); padding: 0 14px; margin-bottom: 14px;
}
.intro { margin-top: 36px; max-width: 680px; }
.pick-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px; }
.pick-row > section { min-width: 0; }
.pick-row .section-head { width: 100%; margin-bottom: 10px; }
.pick-row .section-head a { color: var(--coral); font-size: 13px; font-weight: 800; white-space: nowrap; }
.ph {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: #fff4f1; color: var(--coral); font-weight: 800; font-size: 13px;
}
.entry {
  display: grid; gap: 8px; padding: 18px 18px 16px; border-radius: 18px;
  border: 1px solid var(--line); background: var(--card);
}
.entry b { font-size: 18px; }
.entry span { color: var(--soft); font-size: 14px; }
.entry em { color: var(--coral); font-style: normal; font-weight: 800; }
.band { padding: 8px 0 28px; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; list-style: none; padding: 0; margin: 16px 0 0; }
.steps li { padding: 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.steps b { color: var(--coral); font-size: 12px; letter-spacing: .08em; }
.steps h3 { margin: 8px 0; font-size: 16px; }
.steps p { margin: 0; color: var(--soft); font-size: 13px; }
.post-page { padding: 28px 0 12px; }
.post-page h1 { margin: 8px 0 12px; font-size: 34px; line-height: 1.25; letter-spacing: -.03em; }
.post-page .lede, .post-page p, .post-page li { color: var(--soft); line-height: 1.75; }
.post-page h1, .post-page h2, .post-page strong { color: var(--ink); }
.post-page h2 { margin: 28px 0 10px; font-size: 22px; }
.post-page .crumb { color: var(--faint); font-size: 13px; }
.post-page .crumb a { color: var(--coral); }
.post-page figure { margin: 16px 0 20px; }
.post-page img { display: block; width: auto; max-width: min(100%, 860px); height: auto; border-radius: 16px; background: #171a21; }
.post-page figcaption { margin-top: 8px; color: var(--faint); font-size: 13px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.post-page table { width: 100%; border-collapse: collapse; font-size: 14px; }
.post-page th, .post-page td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.post-page tr:last-child td { border-bottom: 0; }
.post-page td a { color: var(--coral); font-weight: 800; }
.post-page a.jump {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 8px 0 2px; padding: 0 16px;
  border-radius: 14px; border: 1px solid rgba(227, 90, 66, .38); background: #fff4f1; color: #c2412d;
  font-weight: 800; text-decoration: none; box-shadow: 0 8px 18px rgba(227, 90, 66, .08);
}
.post-page a.jump::after { content: "→"; }
.post-page a.jump:hover { box-shadow: 0 10px 22px rgba(227, 90, 66, .16); }
.post-page p a[href^="/"],
.post-page li > a[href^="/"] { color: var(--coral); font-weight: 800; text-decoration: none; }
.post-page a.jump { color: #c2412d; }
.post-page li > a[href^="/"]::after { content: " →"; }
html[data-theme="night"] .post-page a.jump {
  background: rgba(227, 90, 66, .16); border-color: rgba(255, 170, 140, .45); color: #ffc2b3; box-shadow: none;
}
.faq { display: grid; gap: 8px; }
.faq details { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 0 16px; }
.faq summary { cursor: pointer; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-weight: 700; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 8px; height: 8px; margin-right: 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); flex: 0 0 auto; opacity: .62; }
.faq details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.faq p { margin: 0 0 14px; color: var(--soft); font-size: 14px; }
.site-foot { margin-top: 20px; padding: 32px 0 40px; border-top: 1px solid var(--line); }
.foot-grid { display: grid; grid-template-columns: 1.4fr .8fr .8fr; gap: 28px; }
.foot-grid p { color: var(--soft); font-size: 14px; max-width: 36em; }
.foot-grid nav { display: grid; gap: 8px; align-content: start; }
.foot-grid h2 { margin: 0 0 6px; font-size: 13px; letter-spacing: .08em; color: var(--faint); }
.foot-note { margin-top: 22px; color: var(--faint); font-size: 13px; }
@keyframes caret { 50% { opacity: 0; } }
@keyframes bar { 0%,100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
html[data-theme="day"] .brand i { background: #fff4f1; }
html[data-theme="night"] .top {
  background: #161b22; border-color: rgba(255,255,255,.1);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
html[data-theme="night"] .menu { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.08); }
html[data-theme="night"] .menu a { color: #d7dee6; }
html[data-theme="night"] .menu a:hover,
html[data-theme="night"] .menu a[aria-current="page"] { background: rgba(255,255,255,.1); color: #fff; }
html[data-theme="night"] .theme-toggle { background: #10141a; border-color: rgba(255,255,255,.14); }
html[data-theme="night"] .chip,
html[data-theme="night"] .chip.on { color: #edf2f6; }
@media (max-width: 980px) {
  .lower, .offers { grid-template-columns: 1fr; }
  h1 { font-size: 44px; }
  .menu { display: flex; flex-wrap: wrap; }
  .top { height: auto; min-height: 64px; padding: 8px 10px; }
  .pick-row, .steps, .foot-grid, .ai-grid { grid-template-columns: 1fr; }
  .hero .lower { display: block; }
  .rank-motion { display: none; }
}
@media (max-width: 820px) {
  .top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px;
    grid-template-areas: "brand toggle" "nav nav";
    align-items: center;
    width: calc(100% - 24px);
    max-width: 100%;
    min-width: 0;
    height: auto;
    gap: 8px;
    margin: 8px auto 0;
    padding: 10px;
    overflow: hidden;
  }
  .top .brand {
    grid-area: brand;
    min-width: 0;
    padding-right: 0;
    font-size: 15px;
  }
  .top .brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .nav-tools { display: contents; }
  .theme-toggle {
    grid-area: toggle;
    position: static;
    justify-self: end;
  }
  .menu {
    grid-area: nav;
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .menu a {
    min-width: 0;
    justify-content: center;
    height: 34px;
    padding: 0 4px;
    background: #f2f4f6;
    font-size: 13px;
  }
  .menu a[aria-current="page"] {
    background: #fff4f1;
    color: #c2412d;
    box-shadow: none;
  }
  html[data-theme="night"] .menu a {
    background: rgba(255,255,255,.08);
    color: #d7dee6;
  }
  html[data-theme="night"] .menu a[aria-current="page"] {
    background: rgba(224, 122, 69, .34);
    color: #ffd8c8;
  }
}
@media (prefers-reduced-motion: reduce) {
  .caret, .eq span, .rank-motion i { animation: none; }
  .rank-motion i { transform: scaleY(1); }
  .hot, .buy { transition: none; }
}

.offer a.card-jump {
  display: inline-flex; align-items: center; gap: 4px; align-self: flex-start;
  margin: 8px 0 0; color: #c2412d; font-size: 14px; font-weight: 700;
  text-decoration: none;
}
.offer a.card-jump::after { content: "→"; }
.offer a.card-jump:hover { text-decoration: underline; }
html[data-theme="night"] .offer a.card-jump { color: #ffc2b3; }

#cheap-monthly { margin: 28px 0 8px; }
#cheap-monthly .monthly-head { max-width: 760px; margin-bottom: 14px; }
#cheap-monthly h2 { display: block; margin: 6px 0 8px; font-size: 28px; line-height: 1.25; }
#cheap-monthly .monthly-head p:last-child { margin: 0; color: var(--soft); font-size: 15px; line-height: 1.65; }
#cheap-monthly .monthly-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 14px; align-items: start; }
#cheap-monthly .monthly-card { min-width: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--card); padding: 16px 16px 6px; box-shadow: 0 12px 30px rgba(22,32,44,.05); }
html[data-theme="night"] #cheap-monthly .monthly-card { box-shadow: none; }
#cheap-monthly .monthly-card > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
#cheap-monthly h3 { font-size: 16px; }
#cheap-monthly .monthly-card > header > span { color: var(--faint); font-size: 12px; font-weight: 700; }
#cheap-monthly ul { list-style: none; margin: 0; padding: 0; }
#cheap-monthly li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; padding: 9px 0; border-top: 1px solid var(--row-line); }
#cheap-monthly a { color: var(--ink); font-weight: 700; text-decoration: none; min-width: 0; }
#cheap-monthly a:hover { color: var(--coral); }
#cheap-monthly li span { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 760px) {
  #cheap-monthly .monthly-grid { grid-template-columns: 1fr; }
  #cheap-monthly h2 { font-size: 24px; }
  #cheap-monthly li span { white-space: normal; text-align: right; }
}