/* Knowledge puzzle owns its layout; day palette intentionally replaces legacy dark ink. */
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page {
  width: min(1120px, calc(100% - 48px)) !important; max-width: 1120px !important; margin-left: auto !important; margin-right: auto !important;
  box-sizing: border-box !important; align-self: center !important;
  padding: 28px clamp(16px, 3vw, 40px) 64px !important;
  background: #f5f9fd !important; color: #182f49 !important;
}
body.desktop-light.route-yibentong-puzzle #app > .kp-page.kp-page { margin-inline: auto !important; }
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page :is(div, span, button) {
  color: #233e59 !important; text-shadow: none !important;
}
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page span {
  font-size: 14px !important; line-height: 1.55 !important;
}
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page :is(.kp-hero, .kp-volumes, .kp-status, .kp-content) {
  width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important;
}
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page .kp-hero {
  padding: 24px !important; margin-bottom: 20px !important; border: 1px solid #d8e5ef;
  border-radius: 18px; background: #fff !important; box-shadow: 0 6px 24px #143b6810;
}
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page .kp-hero > div { gap: 22px !important; }
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page .kp-hero .flex-col.flex-1 > div:first-child > span:first-child {
  font-size: 28px !important; font-weight: 800 !important; color: #142d47 !important;
}
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page .kp-hero .flex-col.flex-1 { gap: 10px !important; }
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page .kp-hero .flex-col.flex-1 > div:first-child > div { background: #e8f7ff !important; border-color: #b9e6f5 !important; }
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page .kp-hero [style*="width: 5px"] { background: #129fdb !important; }
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page svg circle:first-of-type { stroke: #e1edf6 !important; }
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page svg circle:last-of-type { stroke: #168fd0 !important; }
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page .kp-hero [style*="height: 3px"] { background: #e2eef8 !important; }
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page .kp-hero [style*="height: 100%"] { background: #168fd0 !important; }
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page :is(.kp-volumes, .kp-status) { margin-bottom: 12px !important; }
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page :is(.kp-volumes, .kp-status) > div {
  gap: 8px !important; padding: 6px !important; background: #fff !important; border: 1px solid #d8e5ef !important; border-radius: 12px !important;
}
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page button {
  min-height: 44px !important; padding: 10px 8px !important; font-size: 15px !important;
  line-height: 1.4 !important; border-radius: 8px !important; background: #fff !important;
  border: 1px solid transparent !important; box-shadow: none !important; flex: 1 !important;
}
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page button[aria-pressed="true"] {
  background: #dff3ff !important; border-color: #79c7ed !important; color: #075687 !important; font-weight: 750 !important;
}
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page button span { color: inherit !important; background: transparent !important; }
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page button:focus-visible { outline: 3px solid #128ecb !important; outline-offset: 2px; }
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page .kp-content { padding-top: 12px !important; }
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page .kp-volume { margin-bottom: 24px !important; }
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page .kp-volume > div:first-child {
  padding: 16px 18px !important; margin-bottom: 12px !important; background: #eaf5ff !important;
  border: 1px solid #cee2f3 !important; border-left: 4px solid #12b5e0 !important; border-radius: 10px !important;
}
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page .kp-volume > div:first-child .flex-col > div > span:first-child { font-size: 19px !important; color: #075687 !important; }
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page .kp-volume > div:last-child {
  padding: 22px !important; background: #fff !important; border: 1px solid #d8e5ef !important; border-radius: 14px !important;
}
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page .kp-topic { margin-bottom: 28px !important; }
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page .kp-topic:last-child { margin-bottom: 0 !important; }
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page .kp-topic > div:first-child { gap: 8px !important; margin-bottom: 12px !important; }
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page .kp-topic > div:first-child > span:first-of-type { font-size: 17px !important; }
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page .kp-topic > div:first-child > div:first-child { background: #12b5e0 !important; box-shadow: none !important; }
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page .kp-grid {
  display: grid !important; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)) !important; gap: 10px !important;
}
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page .kp-tile {
  min-height: 104px !important; padding: 28px 12px 14px !important; opacity: 1 !important;
  border: 1px solid #b9d9ef !important; border-radius: 10px !important; background: #f0f8ff !important;
  box-shadow: none !important; transition: border-color .15s, box-shadow .15s !important;
}
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page .kp-tile > span:first-child {
  top: 7px !important; left: 10px !important; font-size: 12px !important; opacity: 1 !important; color: #536b80 !important;
}
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page .kp-tile > span:last-of-type {
  font-size: 16px !important; line-height: 1.5 !important; font-weight: 600 !important;
  display: block !important; overflow: visible !important; -webkit-line-clamp: unset !important;
}
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page .kp-tile[data-state="locked"] { background: #f5f7fa !important; border-style: dashed !important; border-color: #cbd5df !important; }
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page .kp-tile[data-state="1"] { background: #e0f2ff !important; border-color: #77bce5 !important; }
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page .kp-tile[data-state="2"] { background: #c7e9ff !important; border-color: #429ed4 !important; }
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page .kp-tile[data-state="3"] { background: #126494 !important; border-color: #126494 !important; }
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page .kp-tile[data-state="3"] :is(span,div) { color: #fff !important; }
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page .kp-tile:hover { border-color: #128ecb !important; box-shadow: 0 3px 12px #12649418 !important; }
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page .kp-tile [class*="i-mdi"] { font-size: 15px !important; margin-bottom: 4px !important; filter: none !important; }
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page .kp-content > .flex-wrap { background: #fff !important; border: 1px solid #d8e5ef !important; padding: 16px !important; gap: 16px !important; }
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page .kp-content > .flex-wrap > div > div { background: #edf6ff !important; border: 1px solid #aacfe8 !important; box-shadow: none !important; }
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page .kp-content > .flex-wrap > div:nth-child(2) > div { background: #e0f2ff !important; }
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page .kp-content > .flex-wrap > div:nth-child(3) > div { background: #c7e9ff !important; }
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page .kp-content > .flex-wrap > div:nth-child(4) > div { background: #126494 !important; }
body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page .kp-content > .flex-wrap > div:nth-child(5) > div { background: #f5f7fa !important; border-style: dashed !important; }
@media(max-width: 650px) {
  body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page { padding: 16px 12px 40px !important; }
  body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page .kp-hero { padding: 16px !important; }
  body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page .kp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.desktop-light.route-yibentong-puzzle #app .kp-page.kp-page .kp-volume > div:last-child { padding: 14px !important; }
}

/* The dark client uses the same component classes. Keep its original dark
   palette, but apply the same symmetric geometry and readable card sizing. */
body.route-yibentong-puzzle:not(.desktop-light) #app .kp-page.kp-page {
  width: min(1120px, calc(100% - 48px)) !important; max-width: 1120px !important;
  margin-left: auto !important; margin-right: auto !important;
  box-sizing: border-box !important; align-self: center !important;
}
body.route-yibentong-puzzle:not(.desktop-light) #app > .kp-page.kp-page { margin-inline: auto !important; }
body.route-yibentong-puzzle:not(.desktop-light) #app .kp-page.kp-page .kp-grid {
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)) !important; gap: 10px !important;
}
body.route-yibentong-puzzle:not(.desktop-light) #app .kp-page.kp-page .kp-tile {
  min-height: 104px !important; padding: 28px 12px 14px !important; opacity: 1 !important;
}
body.route-yibentong-puzzle:not(.desktop-light) #app .kp-page.kp-page .kp-tile > span:last-of-type {
  font-size: 16px !important; line-height: 1.5 !important; display: block !important;
  overflow: visible !important; -webkit-line-clamp: unset !important;
}
@media(max-width: 650px) {
  body.route-yibentong-puzzle:not(.desktop-light) #app .kp-page.kp-page {
    width: calc(100% - 24px) !important; padding-left: 12px !important; padding-right: 12px !important;
  }
  body.route-yibentong-puzzle:not(.desktop-light) #app .kp-page.kp-page .kp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}