@charset "utf-8";

:root {
  --c-primary: #2c6e8a;
  --c-primary-dark: #1d4e63;
  --c-primary-light: #e8f4f8;
  --c-accent: #d4513d;
  --c-accent-hover: #b93d2c;
  --c-bg: #f0f2f5;
  --c-surface: #fff;
  --c-surface-alt: #f8f9fa;
  --c-border: #e2e6ea;
  --c-text: #2d3436;
  --c-text-sub: #636e72;
  --c-text-light: #b2bec3;
  --c-link: #2c6e8a;
  --c-link-hover: #d4513d;
  --radius: 8px;
  --radius-sm: 4px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --gap: 16px;
  --container: 1200px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-serif: "Noto Serif SC", "Source Han Serif SC", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font-sans); color: var(--c-text); background: var(--c-bg); line-height: 1.6; min-height: 100vh; -webkit-font-smoothing: antialiased; }
ul, ol { list-style: none; }
a { color: var(--c-link); text-decoration: none; transition: color .2s; }
a:visited { color: var(--c-link); }
a:hover { color: var(--c-link-hover); }
img { display: block; max-width: 100%; height: auto; }
.mt-gap { margin-top: var(--gap); }
.mb-gap { margin-bottom: var(--gap); }
.py-gap { padding-top: var(--gap); padding-bottom: var(--gap); }
.tag-desc { color: var(--c-text-sub); font-size: 13px; margin-bottom: var(--gap); }
.tag-foot { color: var(--c-text-light); font-size: 12px; margin-top: var(--gap); line-height: 1.8; border-top: 1px solid var(--c-border); padding-top: 10px; }

.px-fb { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.home-h1 { font-size: 13px; color: var(--c-text-light); text-align: center; margin: 4px 0 6px; font-weight: normal; letter-spacing: .04em; }
button { border: none; background: none; cursor: pointer; font: inherit; }
input, select { font: inherit; }

.px-bs { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gap); }

.px-pt { background: var(--c-surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.px-be { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--c-border); font-size: 15px; font-weight: 600; color: var(--c-text); }
.px-be .px-ni { font-size: 12px; color: var(--c-text-sub); font-weight: 400; }
.px-jo { padding: 12px 16px; }

.px-mv { background: var(--c-surface); box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 100; }
.px-mv .px-bs { display: flex; align-items: center; height: 56px; gap: 16px; }
.px-mm { font-size: 22px; font-weight: 700; color: var(--c-primary); white-space: nowrap; flex-shrink: 0; }
.px-mm a { color: inherit; }

.px-ij { flex: 1; max-width: 420px; display: flex; height: 36px; }
.px-ij .px-al { flex: 1; border: 1px solid var(--c-border); border-right: none; border-radius: var(--radius-sm) 0 0 var(--radius-sm); padding: 0 12px; font-size: 14px; outline: none; background: var(--c-surface-alt); transition: border-color .2s; }
.px-ij .px-al:focus { border-color: var(--c-primary); }
.px-ij .px-az { width: 64px; background: var(--c-primary); color: #fff; border: none; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 14px; cursor: pointer; transition: background .2s; }
.px-ij .px-az:hover { background: var(--c-primary-dark); }

.px-ad { display: flex; gap: 12px; flex-shrink: 0; }
.px-ad a { font-size: 13px; color: var(--c-text-sub); white-space: nowrap; }

.px-jj { display: none; max-width: 7em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--c-primary); flex-shrink: 1; min-width: 0; }
.px-jj:hover { opacity: .8; }

.px-fl { background: var(--c-primary); }
.px-fl .px-bs { display: flex; align-items: center; height: 42px; overflow-x: auto; gap: 0; padding: 0; scrollbar-width: none; }
.px-fl .px-bs::-webkit-scrollbar { display: none; }
.px-jb { display: inline-flex; align-items: center; height: 42px; padding: 0 16px; color: rgba(255,255,255,.9) !important; font-size: 14px; font-weight: 500; white-space: nowrap; transition: background .2s; }
.px-jb:hover, .px-jb.active { background: rgba(255,255,255,.15); color: #fff !important; }

.px-dn { display: none; background: var(--c-surface); border-bottom: 1px solid var(--c-border); overflow-x: auto; white-space: nowrap; padding: 8px 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.px-dn::-webkit-scrollbar { display: none; }
.px-dx { display: inline-block; padding: 4px 14px; margin-right: 6px; border-radius: 16px; font-size: 13px; color: var(--c-text-sub); background: var(--c-surface-alt); border: 1px solid var(--c-border); transition: all .2s; }
.px-dx:hover, .px-dx.on { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

.crumbs { padding: 12px 0 8px; font-size: 13px; color: var(--c-text-sub); }
.crumbs a { color: var(--c-text-sub); }
.crumbs a:hover { color: var(--c-primary); }
.crumbs .px-iq { margin: 0 6px; }

.px-hr { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.px-fz { display: flex; gap: 12px; background: var(--c-surface); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow-sm); transition: box-shadow .2s; min-width: 0; overflow: hidden; }
.px-fz:hover { box-shadow: var(--shadow-md); }
.px-fz .px-en { width: 80px; height: 107px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; }
.px-fz .px-en img { width: 100%; height: 100%; object-fit: cover; }
.px-fz .px-ef { flex: 1; min-width: 0; }
.px-fz .px-ef .px-pe { font-size: 15px; font-weight: 600; color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 4px; }
.px-fz .px-ef .px-pe a { color: inherit; }
.px-fz .px-ef .px-mb { font-size: 12px; color: var(--c-text-sub); margin-bottom: 6px; }
.px-fz .px-ef .px-il { font-size: 12px; color: var(--c-text-light); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.px-ei { display: grid; grid-template-columns: 1fr 320px; gap: var(--gap); align-items: start; }

.px-ma { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.px-fv { background: var(--c-surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.px-et { display: flex; align-items: center; padding: 10px 14px; border-bottom: 2px solid var(--c-primary); font-size: 15px; font-weight: 600; }
.px-et a { color: var(--c-text); }
.px-ci { display: flex; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--c-border); }
.px-ci .px-en { width: 64px; height: 85px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; }
.px-ci .px-en img { width: 100%; height: 100%; object-fit: cover; }
.px-ci .info { flex: 1; min-width: 0; }
.px-ci .info .t { font-size: 14px; font-weight: 600; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-ci .info .t a { color: inherit; }
.px-ci .info .d { font-size: 12px; color: var(--c-text-sub); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.px-ft { padding: 4px 14px 10px; }
.px-ft li { padding: 5px 0; border-bottom: 1px dashed var(--c-border); font-size: 13px; display: flex; justify-content: space-between; overflow: hidden; }
.px-ft li:last-child { border-bottom: none; }
.px-ft .px-ka { color: var(--c-text-light); font-size: 12px; flex-shrink: 0; margin-left: 8px; }

.px-gb { display: flex; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--c-border); font-size: 13px; gap: 8px; }
.px-gb:last-child { border-bottom: none; }
.px-bg .px-fn { width: 60px; flex-shrink: 0; color: var(--c-text-light); }
.px-bg .px-oh { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-bg .px-pf { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-bg .px-pf a { color: var(--c-text-sub); }
.px-bg .px-kw { width: 70px; flex-shrink: 0; color: var(--c-text-sub); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-bg .px-gj { width: 50px; flex-shrink: 0; color: var(--c-text-light); text-align: right; font-size: 12px; }

.px-hd { display: flex; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--c-border); font-size: 13px; gap: 6px; }
.px-hd:last-child { border-bottom: none; }
.px-hd .px-ml { color: var(--c-text-light); flex-shrink: 0; }
.px-hd .px-ff { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-hd .px-cx { color: var(--c-text-light); font-size: 12px; flex-shrink: 0; }

.px-hb { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.px-io { display: flex; gap: 12px; background: var(--c-surface); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow-sm); }
.px-io .cv { width: 80px; height: 107px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; }
.px-io .cv img { width: 100%; height: 100%; object-fit: cover; }
.px-io .ci { flex: 1; min-width: 0; }
.px-io .ci .ct { font-size: 14px; font-weight: 600; margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-io .ci .ct a { color: inherit; }
.px-io .ci .ca { font-size: 12px; color: var(--c-text-sub); margin-bottom: 5px; }
.px-io .ci .cd { font-size: 12px; color: var(--c-text-light); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.px-jx { display: flex; justify-content: center; align-items: center; gap: 4px; padding: 20px 0; flex-wrap: wrap; }
.px-jx a, .px-jx .px-gr { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); font-size: 13px; color: var(--c-text); background: var(--c-surface); transition: all .2s; }
.px-jx a:hover { border-color: var(--c-primary); color: var(--c-primary); }
.px-jx .px-gr { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

.px-my { display: flex; gap: 6px; padding: 12px 0; flex-wrap: wrap; }
.px-er { display: inline-block; padding: 6px 18px; border-radius: 20px; font-size: 14px; color: var(--c-text-sub); background: var(--c-surface); border: 1px solid var(--c-border); transition: all .2s; }
.px-er:hover { border-color: var(--c-primary); color: var(--c-primary); }
.px-er.on { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }

.px-br { display: flex; gap: 24px; background: var(--c-surface); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.px-br .px-cm { width: 160px; flex-shrink: 0; }
.px-br .px-cm img { width: 100%; border-radius: var(--radius-sm); }
.px-br .px-dt { flex: 1; min-width: 0; }
.px-br .px-cz { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.px-br .px-dp { display: flex; flex-wrap: wrap; gap: 16px; font-size: 14px; color: var(--c-text-sub); margin-bottom: 12px; }
.px-br .px-dp span { display: inline-flex; align-items: center; gap: 4px; }
.px-br .px-bf { font-size: 14px; color: var(--c-text-sub); line-height: 1.7; margin-bottom: 16px; }
.px-br .px-lf { display: flex; gap: 10px; flex-wrap: wrap; }
.px-cn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 24px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; transition: all .2s; }
.px-nr { background: var(--c-accent); color: #fff; }
.px-nr:hover { background: var(--c-accent-hover); color: #fff; }
.px-nd { border: 1px solid var(--c-border); color: var(--c-text-sub); background: var(--c-surface); }
.px-nd:hover { border-color: var(--c-primary); color: var(--c-primary); }
.px-br .px-fs { margin-top: 10px; }
.px-br .px-fs a { display: inline-block; padding: 2px 10px; margin: 2px 4px 2px 0; border: 1px solid var(--c-border); border-radius: 12px; font-size: 12px; color: var(--c-text-sub); background: var(--c-surface-alt); }
.px-br .px-fs a:hover { border-color: var(--c-primary); color: var(--c-primary); }

.bh-pm { max-width: var(--container); margin: 0 auto; padding: var(--gap); }
.bh-il { background: var(--c-surface); border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-bottom: var(--gap); }
.bh-cd { }
.bh-pe { padding: 20px; }
.bh-be { width: 160px; flex-shrink: 0; }
.bh-be img { width: 100%; border-radius: var(--radius-sm); }
.bh-dz { flex: 1; min-width: 0; }
.bh-mb { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.bh-ou { display: flex; flex-wrap: wrap; gap: 16px; font-size: 14px; color: var(--c-text-sub); margin-bottom: 12px; }
.bh-ou span { display: inline-flex; align-items: center; gap: 4px; }
.bh-ep { font-size: 14px; color: var(--c-text-sub); line-height: 1.7; margin-bottom: 16px; }
.bh-df { display: flex; gap: 10px; flex-wrap: wrap; }
.bh-de { display: inline-flex; align-items: center; justify-content: center; padding: 8px 24px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; transition: all .2s; }
.bh-mv { background: var(--c-accent); color: #fff; }
.bh-mv:hover { background: var(--c-accent-hover); color: #fff; }
.bh-fx { border: 1px solid var(--c-border); color: var(--c-text-sub); background: var(--c-surface); }
.bh-fx:hover { border-color: var(--c-primary); color: var(--c-primary); }
.bh-nl { margin-top: 10px; }
.bh-nl a { display: inline-block; padding: 2px 10px; margin: 2px 4px 2px 0; border: 1px solid var(--c-border); border-radius: 12px; font-size: 12px; color: var(--c-text-sub); background: var(--c-surface-alt); }
.bh-nl a:hover { border-color: var(--c-primary); color: var(--c-primary); }
.bh-mc { }
.bh-ly { padding: 16px 20px 8px; font-size: 18px; font-weight: 700; border-bottom: 1px solid var(--c-border); }
.bh-ly span { }
.bh-lv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.bh-lv a { display: block; padding: 8px 12px; font-size: 13px; color: var(--c-text); border-bottom: 1px dashed var(--c-border); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .15s; }
.bh-lv a:hover { color: var(--c-accent); }
.bh-oe { position: relative; }
.bh-oe.bh-ar { max-height: 360px; overflow: hidden; }
.bh-oe.bh-ar::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 80px; background: linear-gradient(transparent, var(--c-surface, #fff)); pointer-events: none; }
.bh-in { text-align: center; padding: 12px 0; color: var(--c-accent); cursor: pointer; font-size: 14px; border-top: 1px solid var(--c-border); }
.bh-ex { display: flex; flex-wrap: wrap; gap: 8px; }
.bh-dj { display: inline-block; padding: 4px 12px; border: 1px solid var(--c-border); border-radius: 12px; font-size: 13px; color: var(--c-text-sub); background: var(--c-surface-alt); transition: all .15s; }
.bh-dj:hover { border-color: var(--c-primary); color: var(--c-primary); }
.bh-dj.hot { border-color: var(--c-accent); color: var(--c-accent); }
.bh-ni { padding: 12px 0; border-bottom: 1px solid var(--c-border); }
.bh-jp { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.bh-mp { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; font-size: 12px; font-weight: 700; flex-shrink: 0; }
.bh-lc { font-size: 14px; font-weight: 500; }
.bh-el { color: #f5a623; font-size: 13px; letter-spacing: 1px; }
.bh-ib { font-size: 12px; color: var(--c-text-light); margin-left: auto; }
.bh-gv { font-size: 14px; color: var(--c-text-sub); line-height: 1.6; }
.bh-je { text-align: center; padding: 12px 0; color: var(--c-accent); cursor: pointer; font-size: 14px; }
.bh-fb { font-size: 10px; }
.bh-bl { font-size: 13px; color: var(--c-text-sub); font-weight: 400; margin-left: 12px; }
.bh-bl b { color: var(--c-accent); font-size: 16px; }
.bh-kj { }
.bh-jw { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-jw a { color: var(--c-text); }
.bh-jw a:hover { color: var(--c-accent); }
.bh-hh { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; }
.bh-hh a { display: inline-block; padding: 4px 10px; font-size: 13px; color: var(--c-text-sub); border: 1px solid var(--c-border); border-radius: var(--radius-sm); transition: all .15s; }
.bh-hh a:hover { border-color: var(--c-primary); color: var(--c-primary); }
.bh-gf { }
.bh-ht { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px dashed var(--c-border); font-size: 13px; }
.bh-hr { width: 4px; height: 4px; border-radius: 50%; background: var(--c-primary); flex-shrink: 0; }
.bh-hf { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-hf a { color: var(--c-text); }
.bh-hf a:hover { color: var(--c-accent); }
.bh-cp { font-size: 12px; color: var(--c-text-light); flex-shrink: 0; }
.bh-jl { display: flex; flex-wrap: wrap; gap: 8px; }
.bh-jl a { display: inline-block; padding: 4px 12px; border: 1px solid var(--c-border); border-radius: 12px; font-size: 13px; color: var(--c-text-sub); background: var(--c-surface-alt); transition: all .15s; }
.bh-jl a:hover { border-color: var(--c-primary); color: var(--c-primary); }

.bh-cd .bh-pe { display: flex; gap: 24px; }

.px-bm { margin-top: var(--gap); }
.px-ds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.px-ds a { display: block; padding: 8px 12px; font-size: 13px; color: var(--c-text); border-bottom: 1px dashed var(--c-border); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color .15s; }
.px-ds a:hover { color: var(--c-accent); }
.px-ng { position: relative; }
.px-ng.px-ch { max-height: 360px; overflow: hidden; }
.px-ng.px-ch::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 80px; background: linear-gradient(transparent, var(--c-surface, #fff)); pointer-events: none; }
.px-lj { text-align: center; padding: 12px 0; color: var(--c-accent); cursor: pointer; font-size: 14px; border-top: 1px solid var(--c-border); }

.px-jy { margin-top: var(--gap); }
.px-dh { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0; }
.px-dh a { display: inline-block; padding: 6px 16px; background: var(--c-surface-alt); border-radius: 20px; font-size: 13px; color: var(--c-text-sub); border: 1px solid var(--c-border); transition: all .2s; }
.px-dh a:hover { border-color: var(--c-primary); color: var(--c-primary); }

.px-pp { max-width: var(--container); margin: 0 auto; padding: var(--gap) var(--gap); }
.px-bl { padding: 12px 0; font-size: 13px; color: var(--c-text-sub); }
.px-bl a { color: var(--c-text-sub); }

.px-eu { display: flex; align-items: center; gap: 10px; padding: 8px 0 10px; border-bottom: 1px dashed var(--c-border); flex-wrap: wrap; font-size: 13px; }
.px-ki { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.px-jq { color: var(--c-text-sub); font-size: 12px; white-space: nowrap; }
.px-bq { width: 1px; height: 16px; background: var(--c-border); margin: 0 2px; align-self: center; flex-shrink: 0; }
.px-ey { -webkit-appearance: none; appearance: none; padding: 3px 10px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-surface-alt); cursor: pointer; font-size: 13px; line-height: 1.6; transition: all .15s; color: var(--c-text); box-sizing: border-box; }
.px-ey:hover, .px-ey.on { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
.px-ej { -webkit-appearance: auto; appearance: auto; font-size: 13px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 2px 4px; background: var(--c-surface-alt); color: var(--c-text); cursor: pointer; outline: none; height: 26px; }
.px-av { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 4px; border: 2px solid var(--c-border); cursor: pointer; transition: border-color .15s, box-shadow .15s; padding: 0; flex-shrink: 0; box-sizing: border-box; display: flex; }
.px-av:hover, .px-av.on { border-color: var(--c-primary); box-shadow: 0 0 0 2px var(--c-primary-light); }
.px-bz { -webkit-appearance: none; appearance: none; margin-left: auto; padding: 3px 12px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: none; cursor: pointer; font-size: 12px; color: var(--c-text-sub); transition: all .15s; box-sizing: border-box; }
.px-bz:hover { border-color: var(--c-accent); color: var(--c-accent); }

.px-lk { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--c-border); gap: 12px; }
.px-lk a, .px-pc a { display: inline-flex; align-items: center; padding: 6px 16px; border-radius: var(--radius-sm); font-size: 14px; color: var(--c-text); background: var(--c-surface-alt); border: 1px solid var(--c-border); transition: all .2s; white-space: nowrap; }
.px-lk a:hover, .px-pc a:hover { border-color: var(--c-primary); color: var(--c-primary); }
.px-lk .disabled, .px-pc .disabled { color: var(--c-text-light); pointer-events: none; opacity: .5; }

.px-ao { text-align: center; font-size: 22px; font-weight: 600; padding: 24px 0 16px; color: var(--c-text); }

.px-kv { background: var(--reader-bg, #F7F5F0); border-radius: var(--radius); padding: 24px 32px; box-shadow: var(--shadow-sm); font-family: var(--font-sans); font-size: 17px; line-height: 2.0; color: var(--reader-text, #333333); min-height: 300px; }
.px-kv p { margin-bottom: 1.2em; text-indent: 2em; }
#content p { margin-bottom: 1.2em; text-indent: 2em; }

.px-cp { display: none; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 8px 12px; background: var(--c-surface); border-bottom: 1px solid var(--c-border); font-size: 13px; }
.px-cp .px-oi { display: flex; align-items: center; gap: 4px; }
.px-cp .px-oi > span:first-child { font-size: 12px; color: var(--c-text-sub); white-space: nowrap; }
.px-cp .px-np { padding: 3px 10px; border: 1px solid var(--c-primary); border-radius: var(--radius-sm); font-size: 12px; color: var(--c-primary); cursor: pointer; white-space: nowrap; }
.px-cp .px-np.active { background: var(--c-primary); color: #fff; }
.px-cp .tb-select { -webkit-appearance: auto; appearance: auto; border: 1px solid var(--c-border); border-radius: var(--radius-sm); padding: 3px 4px; font-size: 12px; background: var(--c-surface); color: var(--c-text); max-width: 72px; }

.px-dz { text-align: center; padding: 16px 0; font-size: 14px; }
.px-dz a { color: var(--c-accent); font-weight: 500; }
.reader-tts-bar { display: none; }
@media(max-width:1024px) {
  .reader-tts-bar { display: flex; justify-content: flex-end; padding: 6px 0; }
  #tts-btn { color: var(--c-primary); font-size: 14px; padding: 4px 12px; background: var(--c-surface-alt); border: 1px solid var(--c-border); border-radius: var(--radius-sm); text-decoration: none; }
}
.px-pc { display: flex; justify-content: space-between; align-items: center; padding: 16px 0 24px; gap: 12px; }

.px-kg { text-align: center; padding: 12px 0; margin: 16px 0; }
.px-kg a, .px-kg span { display: inline-block; padding: 4px 12px; margin: 0 2px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); font-size: 13px; color: var(--c-text); }
.px-kg span { background: var(--c-accent); color: #fff; border-color: var(--c-accent); font-weight: 700; }

.px-ah a { display: inline-block; padding: 4px 12px; margin: 3px 4px; border: 1px solid var(--c-border); border-radius: 16px; font-size: 13px; color: var(--c-text-sub); background: var(--c-surface); transition: all .2s; }
.px-ah a:hover { border-color: var(--c-primary); color: var(--c-primary); background: var(--c-primary-light); }

.px-ep { text-align: center; padding: 60px 20px; color: var(--c-text-sub); font-size: 15px; }
.px-ep .px-pg { font-size: 48px; display: block; margin-bottom: 12px; color: var(--c-text-light); }

.search-result-card { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--c-border); }
.search-result-card:last-child { border-bottom: none; }
.search-result-card .sr-cover { width: 70px; height: 93px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; }
.search-result-card .sr-cover img { width: 100%; height: 100%; object-fit: cover; }
.search-result-card .sr-info { flex: 1; min-width: 0; }
.search-result-card .sr-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-result-card .sr-title a { color: var(--c-text); }
.search-result-card .sr-meta { font-size: 12px; color: var(--c-text-sub); margin-bottom: 4px; }
.search-result-card .sr-desc { font-size: 12px; color: var(--c-text-light); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.px-hq { width: 100%; border-collapse: collapse; background: var(--c-surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.px-hq caption { padding: 12px 16px; font-size: 15px; font-weight: 600; text-align: left; background: var(--c-primary); color: #fff; }
.px-hq th, .px-hq td { padding: 10px 12px; text-align: left; font-size: 13px; border-bottom: 1px solid var(--c-border); }
.px-hq th { background: var(--c-surface-alt); color: var(--c-text-sub); font-weight: 500; }

.px-hg { text-align: center; padding: 80px 20px; }
.px-px { font-size: 80px; font-weight: 700; color: var(--c-text-light); line-height: 1; }
.px-kq { font-size: 18px; color: var(--c-text-sub); margin: 16px 0 8px; }
.px-ln { font-size: 14px; color: var(--c-text-light); margin-bottom: 30px; }
.px-mw { display: flex; justify-content: center; gap: 10px; margin-bottom: 40px; }

.px-ky { margin-top: 32px; padding: 32px 0 24px; background: var(--c-surface); border-top: 3px solid var(--c-primary); font-size: 12px; color: var(--c-text-sub); }
.px-ky .px-bs { display: flex; align-items: flex-start; gap: 32px; }
.site-footer-brand { flex: 1; min-width: 0; }
.site-footer-brand strong { font-size: 17px; font-weight: 700; color: var(--c-text); display: block; margin-bottom: 6px; }
.site-footer-brand p { line-height: 1.8; margin: 0; }
.site-footer-right { flex-shrink: 0; text-align: right; }
.px-cf { margin-bottom: 10px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 0; }
.px-cf a { color: var(--c-text-sub); margin: 0 8px; font-size: 13px; }
.px-cf a:hover { color: var(--c-primary); }
.site-footer-copy { color: var(--c-text-dim); line-height: 2; }

.px-dc { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; height: 56px; background: var(--c-surface); border-top: 1px solid var(--c-border); box-shadow: 0 -1px 6px rgba(0,0,0,.04); justify-content: space-around; align-items: center; padding-bottom: env(safe-area-inset-bottom, 0); }
.px-of { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11px; color: var(--c-text-sub); text-decoration: none; gap: 2px; }
.px-of.on { color: var(--c-primary); }
.px-lm { font-style: normal; font-size: 20px; }

.px-by { font-size: 17px; font-weight: 600; padding: 12px 0 8px; color: var(--c-text); }
.px-jg { font-size: 15px; font-weight: 600; padding: 8px 0; color: var(--c-text); }

@media(max-width:1024px) {
  .px-fl { display: none; }
  .px-ad { display: none; }
  .px-dn { display: block; }
  .px-jj { display: block; }
  .px-dc { display: flex; }
  body { padding-bottom: 60px; }

  
  footer { display: none; }

  .px-mv .px-bs { height: 50px; gap: 10px; }
  .px-mm { font-size: 18px; max-width: 30vw; overflow: hidden; text-overflow: ellipsis; }
  .px-ij { max-width: none; flex: 1; min-width: 0; }
  .px-ij .px-al { min-width: 0; }
  .px-ij .px-az { width: 52px; flex-shrink: 0; }

  .px-ei { grid-template-columns: 1fr; }
  .px-hr { grid-template-columns: repeat(2, 1fr); }
  .novel-grid-6 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .novel-grid-6 .px-fz .px-il { display: none; }
  .hot-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .hot-grid-item { min-width: 0; overflow: hidden; }
  .hot-grid-item:nth-child(n+7) { display: none; }
  .hot-grid-item .hot-meta .px-pe { font-size: 12px; }
  .hot-grid-item .hot-meta .px-mb { font-size: 10px; }
  .px-ma { grid-template-columns: 1fr; }
  .px-hb { grid-template-columns: repeat(2, 1fr); }
  .px-ds { grid-template-columns: repeat(2, 1fr); }

  .px-br { flex-direction: row; align-items: flex-start; text-align: left; padding: 16px; gap: 14px; }
  .px-br .px-cm { width: 100px; }
  .px-br .px-dp { justify-content: flex-start; gap: 8px; font-size: 13px; flex-wrap: wrap; }
  .px-br .px-dp span { display: inline-block; }
  .px-br .px-lf { justify-content: flex-start; }
  .px-br .px-cz { font-size: 20px; }

  .bh-cd .bh-pe { flex-direction: row; align-items: flex-start; gap: 14px; }
  .bh-be { width: 100px; }
  .bh-mb { font-size: 20px; }
  .bh-ou { gap: 8px; font-size: 13px; flex-wrap: wrap; }
  .bh-ou span { display: inline-block; }
  .bh-df { justify-content: flex-start; }
  .bh-de { padding: 7px 16px; font-size: 13px; }
  .bh-lv { grid-template-columns: repeat(2, 1fr); }

  
  .px-in { display: none; }
  .px-dd { display: inline; }
  .px-ed { display: inline; font-size: 13px; color: var(--c-primary); margin-left: 4px; }
  .px-bf.bh-desc-expand .px-in { display: inline; }
  .px-bf.bh-desc-expand .px-dd { display: none; }
  .px-bf.bh-desc-expand .px-ed::before { content: ''; }
  .bh-desc-expand .px-ed { display: inline; }
  .bh-desc-expand .px-ed::after { content: ''; }

  .px-cn { padding: 7px 16px; font-size: 13px; }

  .px-cp { display: flex; }
  .px-eu { display: none; }
  .px-kv { padding: 16px; font-size: 17px; border-radius: 0; }
  .px-ao { font-size: 18px; padding: 16px 0 10px; }

  
  .rv-mfold { display: none; }

  
  .px-hq th:first-child, .px-hq td:first-child { width: 28px; padding: 8px 4px; font-size: 12px; text-align: center; }

  
  .px-gb { padding: 6px 0; font-size: 13px; }
  .px-hd { font-size: 13px; }

  
  .px-fv { margin-bottom: 0; }
  .px-ci .px-en { width: 56px; height: 74px; }
  .px-ft li { font-size: 13px; }

  
}

@media(max-width:1024px) {
  .px-mv .px-bs { gap: 8px; }
  .px-mm { font-size: 16px; max-width: 25vw; }
  .px-ij .px-az { width: 46px; font-size: 13px; }
  .px-ij .px-al { padding: 0 8px; font-size: 13px; }

  .px-hr { grid-template-columns: 1fr; }
  .px-fz { padding: 10px; }
  .px-fz .px-en { width: 70px; height: 93px; }
  
  .novel-grid-6 { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .novel-grid-6 .px-fz { padding: 8px; }
  .novel-grid-6 .px-fz .px-en { width: 60px; height: 80px; }
  .novel-grid-6 .px-fz .px-ef .px-pe { font-size: 13px; }
  .novel-grid-6 .px-fz .px-ef .px-mb { font-size: 11px; margin-bottom: 2px; }
  .novel-grid-6 .px-fz .px-il { display: none; }
  .hot-grid { grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .hot-grid-item .hot-meta .px-pe { font-size: 11px; }
  .hot-grid-item .hot-meta .px-mb { display: none; }
  .px-hb { grid-template-columns: 1fr; }
  .px-ds { grid-template-columns: 1fr; }
  .px-bg .px-pf { display: none; }
  .px-bg .px-kw { display: none; }

  .px-br { padding: 12px; gap: 12px; }
  .px-br .px-cm { width: 90px; }
  .px-br .px-cz { font-size: 18px; margin-bottom: 4px; }
  .px-br .px-dp { gap: 4px 10px; font-size: 12px; margin-bottom: 8px; }
  .px-br .px-bf { font-size: 13px; line-height: 1.6; margin-bottom: 10px; }
  .px-br .px-lf { gap: 8px; }
  .px-cn { padding: 6px 14px; font-size: 12px; }
  .px-br .px-fs a { font-size: 11px; padding: 2px 8px; }

  .bh-cd .bh-pe { gap: 12px; }
  .bh-be { width: 90px; }
  .bh-mb { font-size: 18px; margin-bottom: 4px; }
  .bh-ou { gap: 4px 10px; font-size: 12px; margin-bottom: 8px; }
  .bh-ep { font-size: 13px; line-height: 1.6; margin-bottom: 10px; }
  .bh-df { gap: 8px; }
  .bh-de { padding: 6px 14px; font-size: 12px; }
  .bh-nl a { font-size: 11px; padding: 2px 8px; }
  .bh-lv { grid-template-columns: 1fr; }

  .px-kv { font-size: 16px; padding: 12px; }

  
  .px-dn { padding: 6px 10px; }
  .px-dx { padding: 3px 12px; font-size: 12px; margin-right: 5px; }
}

.darkmode { --c-bg: #1a1a2e; --c-surface: #252540; --c-surface-alt: #2d2d4a; --c-text: #d0d0d0; --c-text-sub: #a0a0b0; --c-border: #3a3a5c; }
.darkmode { --reader-bg: #1a1a2e; --reader-text: #aaaaaa; }
.darkmode select { background: var(--c-surface-alt); color: var(--c-text); border-color: var(--c-border); }
.reading-mode { --c-bg: #dcecd2; --c-surface: #e8f5e0; --c-surface-alt: #d6e8cc; --c-text: #2d3436; --c-text-sub: #4a5e48; --c-border: #bbd6aa; }
.reading-mode { --reader-bg: #dcecd2; --reader-text: #2d3436; }
.reading-mode select { background: var(--c-surface-alt); color: var(--c-text); border-color: var(--c-border); }

.px-bd { display: flex; flex-wrap: wrap; gap: 8px; }
.px-ps { display: inline-block; padding: 4px 12px; border-radius: 14px; font-size: 13px; background: var(--c-surface-alt, #f5f5f5); color: var(--c-text-sub, #555); text-decoration: none; transition: background .2s, color .2s; }
.px-ps:hover { background: var(--c-border, #e0e0e0); color: var(--c-text, #333); }
.px-ps.hot { background: linear-gradient(135deg, #ff6b35, #f7931e); color: #fff; font-weight: 500; }

.select-color { }
.select-size-m { }
.select-bg { }
.px-pa { line-height: 1.85; font-size: 17px; color: var(--reader-text, var(--c-text)); word-break: break-all; }
.px-pa p { margin: 0 0 1em; text-indent: 2em; }
.content { line-height: 1.85; font-size: 17px; color: var(--reader-text, var(--c-text)); word-break: break-all; }
.px-ps.hot:hover { opacity: .85; }
.px-dv { font-size: 13px; color: var(--c-text-sub); margin-top: 6px; line-height: 1.6; }

.rv-section .px-be { display:flex; align-items:center; justify-content:space-between; }
.px-bt { font-size:13px; color:var(--c-text-sub); font-weight:400; }
.px-bt b { color:var(--c-accent); font-size:15px; }
.px-lu { padding:12px 0; border-bottom:1px solid var(--c-border); }
.px-lu:last-child { border-bottom:none; }
.px-ae { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.px-cg { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; color:#fff; font-size:14px; font-weight:600; flex-shrink:0; }
.px-aa { font-size:14px; font-weight:500; color:var(--c-text); }
.px-ev { font-size:13px; color:#f5a623; letter-spacing:1px; }
.px-oa { font-size:12px; color:var(--c-text-light); margin-left:auto; }
.px-kk { margin-top:6px; font-size:14px; line-height:1.7; color:var(--c-text-sub); }

.px-nc { display: none; }
.rv-mfold { display: block; }
.px-ap { text-align: center; padding: 12px 0; color: var(--c-primary); cursor: pointer; font-size: 14px; border-top: 1px solid var(--c-border); user-select: none; }
.px-ex { font-size: 12px; }

.px-nr:visited { color: #fff; }

.px-in { display: inline; }
.px-dd { display: none; }
.px-ed { display: none; }

@media(max-width:1024px) {
  .px-cg { width:28px; height:28px; font-size:12px; }
  .px-aa { font-size:13px; }
  .px-kk { font-size:13px; }
  .px-oa { font-size:11px; }
  .px-bt { font-size:12px; }
}

.px-hi { color: var(--c-accent); font-style: normal; font-weight: bold; }

.novel-grid-6 { grid-template-columns: repeat(3, 1fr); }

.hot-grid { display: grid; }
.hot-grid-item { text-align: center; min-width: 0; overflow: hidden; }
.hot-grid-item > div:first-child { width: 100%; aspect-ratio: 3/4; border-radius: var(--radius-sm); overflow: hidden; margin: 0 auto 6px; }
.hot-grid-item > div:first-child a { display: block; width: 100%; height: 100%; }
.hot-grid-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hot-grid-item .hot-meta .px-pe { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hot-grid-item .hot-meta .px-pe a { color: var(--c-text); }
.hot-grid-item .hot-meta .px-mb { font-size: 11px; color: var(--c-text-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.search-card { display: none; }
@media(max-width:1024px) {
  .search-nlist .px-gb { display: none; }
  .search-card { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--c-border); }
  .sc-cover { width: 60px; height: 80px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; }
  .sc-cover img { width: 100%; height: 100%; object-fit: cover; }
  .sc-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
  .sc-title { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sc-title a { color: var(--c-text); }
  .sc-author { font-size: 12px; color: var(--c-text-sub); }
  .sc-chap { font-size: 12px; color: var(--c-text-sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sc-chap a { color: var(--c-text-sub); }
  .sc-date { font-size: 11px; color: var(--c-text-light); }
}

@media(min-width:1025px) {
  .hot-grid { grid-template-columns: repeat(6, 1fr); gap: 12px; }
  .hot-grid-item > div:first-child { max-width: 120px; }
}