/* ============================================================
   刊期日更 · 期刊更新平台
   设计基准 1920px：1rem = 16px @1920，整站等比缩放
   ============================================================ */

:root {
  /* 主色 —— 暖橙 */
  --primary: #E87730;
  --primary-active: #DD6B20;
  --primary-deep: #C25A18;
  --primary-a08: rgba(232, 119, 48, .08);
  --primary-a12: rgba(232, 119, 48, .12);
  --primary-a20: rgba(232, 119, 48, .20);
  --primary-a30: rgba(232, 119, 48, .30);

  /* 背景 */
  --bg-page: #FEF8F3;
  --bg-surface: #FFFFFF;
  --bg-surface-soft: #FFFDFB;
  --bg-tint: #FEF3E8;
  --bg-tint-hover: #FCEADB;
  --bg-panel: #FFE7D0;
  --bg-selected: #FFE3C8;

  /* 描边 */
  --border-light: #F5DCC8;
  --border-soft: #F7E6D8;
  --border-emphasis: rgba(232, 119, 48, .35);

  /* 文字 */
  --text-main: #2F2A28;
  --text-regular: #5D4E45;
  --text-muted: #7D675D;
  --text-placeholder: #A4948A;
  --text-inverse: #FFFFFF;

  /* 语义色 */
  --green: #38A169;
  --green-bg: #E8F5EE;
  --purple: #9F7AEA;
  --purple-bg: #F3EEFB;
  --red: #D93025;
  --price: #FF4D4F;
  --gold: #F7BA2A;
  --blue: #3371F1;

  /* 阴影 */
  --shadow-xs: 0 .125rem .5rem rgba(232, 119, 48, .06);
  --shadow-sm: 0 .25rem 1rem rgba(232, 119, 48, .10);
  --shadow-md: 0 .5rem 1.75rem rgba(232, 119, 48, .14);
  --shadow-card: 0 .25rem 1rem rgba(180, 110, 60, .10);

  --radius-sm: .25rem;
  --radius: .5rem;
  --radius-lg: .75rem;
  --radius-pill: 62.5rem;

  --header-h: 4rem;
  --content-w: 97.5rem; /* 1560px @1920 */
}

/* ============================================================
   5 个主题切换
   warm(默认/暖橙) · cyber(科技) · cozy(温馨) · dark(暗黑) · nature(自然)
   ============================================================ */

/* 默认未指定或显式 warm：暖橙 */
:root,
:root[data-theme="warm"] {
  --primary: #E87730;
  --primary-active: #DD6B20;
  --primary-deep: #C25A18;
  --primary-a08: rgba(232, 119, 48, .08);
  --primary-a12: rgba(232, 119, 48, .12);
  --primary-a20: rgba(232, 119, 48, .20);
  --primary-a30: rgba(232, 119, 48, .30);
  --primary-grad-from: #F49A56;
  --primary-grad-to:   #E87730;

  --bg-page: #FEF8F3;
  --bg-surface: #FFFFFF;
  --bg-surface-soft: #FFFDFB;
  --bg-tint: #FEF3E8;
  --bg-tint-hover: #FCEADB;
  --bg-panel: #FFE7D0;
  --bg-selected: #FFE3C8;

  --border-light: #F5DCC8;
  --border-soft: #F7E6D8;
  --border-emphasis: rgba(232, 119, 48, .35);

  --text-main: #2F2A28;
  --text-regular: #5D4E45;
  --text-muted: #7D675D;
  --text-placeholder: #A4948A;
  --text-inverse: #FFFFFF;

  --shadow-xs: 0 .125rem .5rem rgba(232, 119, 48, .06);
  --shadow-sm: 0 .25rem 1rem rgba(232, 119, 48, .10);
  --shadow-md: 0 .5rem 1.75rem rgba(232, 119, 48, .14);
  --shadow-card: 0 .25rem 1rem rgba(180, 110, 60, .10);
}

/* 科技感 cyber：青蓝电光色 */
:root[data-theme="cyber"] {
  --primary: #00B4FF;
  --primary-active: #00A0E8;
  --primary-deep: #007FB8;
  --primary-a08: rgba(0, 180, 255, .08);
  --primary-a12: rgba(0, 180, 255, .12);
  --primary-a20: rgba(0, 180, 255, .22);
  --primary-a30: rgba(0, 180, 255, .32);
  --primary-grad-from: #4DD9FF;
  --primary-grad-to:   #00B4FF;

  --bg-page: #F1F8FF;
  --bg-surface: #FFFFFF;
  --bg-surface-soft: #F8FBFE;
  --bg-tint: #E5F3FF;
  --bg-tint-hover: #D2EAFF;
  --bg-panel: #D6EAFF;
  --bg-selected: #CFEAFF;

  --border-light: #CFE5F5;
  --border-soft: #E1EFF8;
  --border-emphasis: rgba(0, 180, 255, .35);

  --text-main: #0D1F33;
  --text-regular: #244566;
  --text-muted: #4A6580;
  --text-placeholder: #7E96AE;
  --text-inverse: #FFFFFF;

  --shadow-xs: 0 .125rem .5rem rgba(0, 180, 255, .08);
  --shadow-sm: 0 .25rem 1rem rgba(0, 180, 255, .14);
  --shadow-md: 0 .5rem 1.75rem rgba(0, 180, 255, .20);
  --shadow-card: 0 .25rem 1rem rgba(0, 130, 200, .14);
}

/* 温馨 cozy：粉橙柔光 */
:root[data-theme="cozy"] {
  --primary: #F06292;
  --primary-active: #E65085;
  --primary-deep: #C73F70;
  --primary-a08: rgba(240, 98, 146, .08);
  --primary-a12: rgba(240, 98, 146, .12);
  --primary-a20: rgba(240, 98, 146, .20);
  --primary-a30: rgba(240, 98, 146, .30);
  --primary-grad-from: #FFA1C0;
  --primary-grad-to:   #F06292;

  --bg-page: #FFF5F8;
  --bg-surface: #FFFFFF;
  --bg-surface-soft: #FFFAFC;
  --bg-tint: #FFE9F0;
  --bg-tint-hover: #FFDDE7;
  --bg-panel: #FFD8E4;
  --bg-selected: #FFD4E2;

  --border-light: #FAD0DD;
  --border-soft: #FBE0EA;
  --border-emphasis: rgba(240, 98, 146, .35);

  --text-main: #3A1F2A;
  --text-regular: #6B3F4F;
  --text-muted: #946274;
  --text-placeholder: #B58A99;
  --text-inverse: #FFFFFF;

  --shadow-xs: 0 .125rem .5rem rgba(240, 98, 146, .08);
  --shadow-sm: 0 .25rem 1rem rgba(240, 98, 146, .12);
  --shadow-md: 0 .5rem 1.75rem rgba(240, 98, 146, .18);
  --shadow-card: 0 .25rem 1rem rgba(220, 100, 140, .12);
}

/* 暗黑 dark：深夜紫蓝 */
:root[data-theme="dark"] {
  --primary: #A78BFA;
  --primary-active: #9577F0;
  --primary-deep: #7C5DE8;
  --primary-a08: rgba(167, 139, 250, .12);
  --primary-a12: rgba(167, 139, 250, .18);
  --primary-a20: rgba(167, 139, 250, .28);
  --primary-a30: rgba(167, 139, 250, .38);
  --primary-grad-from: #C9B6FC;
  --primary-grad-to:   #A78BFA;

  --bg-page: #0F1320;
  --bg-surface: #1A1F30;
  --bg-surface-soft: #141828;
  --bg-tint: #232842;
  --bg-tint-hover: #2C324E;
  --bg-panel: #2D3454;
  --bg-selected: #353D63;

  --border-light: #2A3050;
  --border-soft: #232842;
  --border-emphasis: rgba(167, 139, 250, .40);

  --text-main: #ECEEF5;
  --text-regular: #C2C7D8;
  --text-muted: #8C93AC;
  --text-placeholder: #5D6480;
  --text-inverse: #0F1320;

  --shadow-xs: 0 .125rem .5rem rgba(0, 0, 0, .35);
  --shadow-sm: 0 .25rem 1rem rgba(0, 0, 0, .50);
  --shadow-md: 0 .5rem 1.75rem rgba(0, 0, 0, .60);
  --shadow-card: 0 .25rem 1rem rgba(0, 0, 0, .45);

  /* 暗黑模式卡片文字/输入框强制亮色 */
  color-scheme: dark;
}

/* 自然 nature：清新绿意 */
:root[data-theme="nature"] {
  --primary: #3DA35D;
  --primary-active: #339151;
  --primary-deep: #277942;
  --primary-a08: rgba(61, 163, 93, .08);
  --primary-a12: rgba(61, 163, 93, .12);
  --primary-a20: rgba(61, 163, 93, .20);
  --primary-a30: rgba(61, 163, 93, .30);
  --primary-grad-from: #6BC585;
  --primary-grad-to:   #3DA35D;

  --bg-page: #F4FAF1;
  --bg-surface: #FFFFFF;
  --bg-surface-soft: #F8FCF4;
  --bg-tint: #E8F5E2;
  --bg-tint-hover: #DCF0D2;
  --bg-panel: #D2EAC6;
  --bg-selected: #CFE9C0;

  --border-light: #D2E5C8;
  --border-soft: #E1ECDA;
  --border-emphasis: rgba(61, 163, 93, .35);

  --text-main: #1F3522;
  --text-regular: #3F5742;
  --text-muted: #607962;
  --text-placeholder: #88A18A;
  --text-inverse: #FFFFFF;

  --shadow-xs: 0 .125rem .5rem rgba(61, 163, 93, .08);
  --shadow-sm: 0 .25rem 1rem rgba(61, 163, 93, .12);
  --shadow-md: 0 .5rem 1.75rem rgba(61, 163, 93, .18);
  --shadow-card: 0 .25rem 1rem rgba(50, 130, 75, .12);
}

/* ========== 主题下拉切换 ========== */
.theme-dd {
  position: relative; display: inline-flex; align-items: center;
}
.theme-dd__btn {
  display: inline-flex; align-items: center; gap: .4375rem;
  height: 2rem; padding: 0 .75rem 0 .625rem;
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--text-main);
  border: 1px solid var(--border-light);
  box-shadow: 0 .125rem .4375rem var(--primary-a08);
  font-size: .875rem; font-weight: 500;
  cursor: pointer;
  transition: all .16s ease;
}
.theme-dd__btn:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--bg-tint);
}
.theme-dd__btn.is-open {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--bg-tint);
  box-shadow: 0 0 0 3px var(--primary-a12);
}
.theme-dd__cur { display: inline-flex; align-items: center; gap: .375rem; }
.theme-dd__caret { font-size: .75rem; color: var(--text-placeholder); line-height: 1; }
.theme-dd__btn.is-open .theme-dd__caret { color: var(--primary); }
.theme-dd__menu {
  position: absolute; top: calc(100% + .5rem); right: 0;
  margin: 0; padding: .3125rem;
  list-style: none;
  min-width: 11rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  z-index: 50;
}
.theme-dd__menu li {
  display: flex; align-items: center; gap: .5rem;
  height: 2.125rem; padding: 0 .625rem;
  border-radius: var(--radius-sm);
  font-size: .875rem; color: var(--text-regular);
  cursor: pointer;
  transition: background .14s ease;
}
.theme-dd__menu li:hover { background: var(--bg-tint); color: var(--primary); }
.theme-dd__menu li.is-active {
  color: var(--primary); font-weight: 600;
  background: var(--bg-selected);
}
.theme-dd__menu li em {
  margin-left: auto; font-style: normal;
  font-size: .6875rem; color: var(--text-placeholder);
  padding: .0625rem .375rem; border-radius: var(--radius-pill);
  background: var(--bg-tint);
}
.theme-dd .dot {
  width: .5rem; height: .5rem; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08) inset;
}
.theme-dd .dot--warm   { background: #E87730; }
.theme-dd .dot--cyber  { background: #00B4FF; }
.theme-dd .dot--cozy   { background: #F06292; }
.theme-dd .dot--dark   { background: #A78BFA; }
.theme-dd .dot--nature { background: #3DA35D; }

/* 等比缩放：1920 宽时 1rem = 16px，两端加限位 */
html {
  font-size: clamp(13px, calc(100vw / 120), 17px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB",
               "Source Han Sans CN", system-ui, sans-serif;
  background: var(--bg-page);
  color: var(--text-main);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
img { display: block; }
ul { list-style: none; }

::-webkit-scrollbar { width: .5rem; height: .5rem; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #E8D5C4; border-radius: .25rem; }
::-webkit-scrollbar-thumb:hover { background: #D9BFA8; }

.wrap { width: var(--content-w); max-width: calc(100% - 2.5rem); margin: 0 auto; }

/* ============================================================ 顶部导航 */
.header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  background: rgba(255, 254, 252, .88);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border-light);
}
.header__inner { height: 100%; display: flex; align-items: center; gap: 1.75rem; }

.logo { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.logo__mark {
  width: 2.125rem; height: 2.125rem; border-radius: .625rem;
  background: linear-gradient(135deg, #F49A56, var(--primary));
  color: #fff; font-size: 1.125rem; font-weight: 800;
  display: grid; place-items: center;
  box-shadow: 0 .25rem .625rem var(--primary-a30);
}
.logo__text { font-size: 1.1875rem; font-weight: 800; letter-spacing: .5px; }
.logo__text em { color: var(--primary); font-style: normal; }

.nav { display: flex; gap: .25rem; }
.nav__item {
  padding: .4375rem .875rem; border-radius: var(--radius-pill);
  font-size: .9375rem; color: var(--text-regular); font-weight: 500;
  transition: all .18s ease; white-space: nowrap;
}
.nav__item:hover { color: var(--primary); background: var(--bg-tint); }
.nav__item.is-active { color: #fff; background: var(--primary); box-shadow: 0 .1875rem .625rem var(--primary-a30); }

.header__spacer { flex: 1; }

.header__stat {
  font-size: .8125rem; color: var(--text-muted);
  padding: .3125rem .75rem; border-radius: var(--radius-pill);
  background: var(--bg-tint); border: 1px solid var(--border-light);
  white-space: nowrap;
}
.header__stat b { color: var(--primary); font-weight: 700; }

.btn-primary {
  padding: .5rem 1.25rem; border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #F08A45, var(--primary));
  color: #fff; font-size: .875rem; font-weight: 600;
  box-shadow: 0 .25rem .75rem var(--primary-a30);
  transition: all .2s ease; white-space: nowrap;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 .375rem 1rem var(--primary-a30); }

/* ============================================================ 价格展示开关（橙底分段控件） */
.price-toggle {
  display: flex; align-items: center; gap: .5rem; flex-shrink: 0;
}
.price-toggle__label {
  font-size: .8125rem; color: var(--text-muted); font-weight: 500; white-space: nowrap;
}
.price-toggle .seg {
  display: inline-flex; padding: .1875rem; gap: .125rem;
  background: var(--primary); border-radius: var(--radius-pill);
  box-shadow: 0 .1875rem .625rem var(--primary-a30);
}
.price-toggle .seg__btn {
  padding: .3125rem .6875rem; border-radius: var(--radius-pill);
  font-size: .8125rem; font-weight: 600; color: rgba(255, 255, 255, .82);
  transition: all .16s ease; white-space: nowrap; line-height: 1.4;
}
.price-toggle .seg__btn:hover { color: #fff; }
.price-toggle .seg__btn.is-active {
  background: #fff; color: var(--primary);
  box-shadow: 0 .125rem .375rem rgba(0, 0, 0, .14);
}

/* ============================================================ 搜索区 */
.hero { padding: 1.75rem 0 1.25rem; }
.hero__title {
  font-size: 1.5rem; font-weight: 800; text-align: center; margin-bottom: .375rem;
}
.hero__title span { color: var(--primary); }
.hero__sub {
  text-align: center; color: var(--text-muted); font-size: .875rem; margin-bottom: 1.25rem;
}

.searchbar {
  width: 50rem; max-width: 100%; margin: 0 auto;
  display: flex; align-items: center; gap: .625rem;
  height: 3.25rem; padding: 0 .4375rem 0 1.25rem;
  background: var(--bg-surface); border: 2px solid var(--border-light);
  border-radius: var(--radius-pill); box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.searchbar:focus-within { border-color: var(--primary); box-shadow: 0 .25rem 1.25rem var(--primary-a20); }
.searchbar__icon { color: var(--text-placeholder); font-size: 1.125rem; flex-shrink: 0; }
.searchbar input {
  flex: 1; min-width: 0; height: 100%; border: none; outline: none;
  background: transparent; font-size: 1rem;
}
.searchbar input::placeholder { color: var(--text-placeholder); }
.searchbar__clear {
  color: var(--text-placeholder); font-size: 1.125rem; padding: 0 .5rem;
  display: none;
}
.searchbar__clear.show { display: block; }
.searchbar__clear:hover { color: var(--text-regular); }
.searchbar__btn {
  height: 2.5rem; padding: 0 1.75rem; border-radius: var(--radius-pill);
  background: linear-gradient(135deg, #F08A45, var(--primary));
  color: #fff; font-size: .9375rem; font-weight: 600; flex-shrink: 0;
  transition: filter .2s ease;
}
.searchbar__btn:hover { filter: brightness(1.06); }

.hotwords {
  display: flex; justify-content: center; align-items: center;
  gap: .5rem; margin-top: .875rem; font-size: .8125rem; flex-wrap: wrap;
}
.hotwords__label { color: var(--text-placeholder); }
.hotwords button {
  padding: .1875rem .6875rem; border-radius: var(--radius-pill);
  background: var(--bg-surface); border: 1px solid var(--border-light);
  color: var(--text-regular); transition: all .18s ease;
}
.hotwords button:hover { color: var(--primary); border-color: var(--primary); background: var(--bg-tint); }

/* ============================================================ 筛选面板 */
.filters {
  background: var(--bg-surface); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
  padding: .25rem 1.25rem; margin-bottom: 1rem;
}
.frow {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .375rem .75rem; padding: .5rem 0;
  border-bottom: 1px dashed var(--border-soft);
}
.frow:last-child { border-bottom: none; }
.frow .k b {
  font-weight: 700; color: var(--text-main);
  font-size: .875rem;
  margin-right: .25rem;
}
.frow__opts {
  display: inline-flex; flex-wrap: wrap; gap: .35rem;
  align-items: center; min-width: 0;
}
.frow__opts.is-collapsed { max-height: 1.75rem; overflow: hidden; }

/* 行内排版：文章方向 22 个分类全部展开 */
.frow--row .frow__opts--row { display: contents; }
.frow--row .opt { padding: 0 .5rem; }

/* ========== 行内输入排版：下拉 / 日期 / 数字 ========== */
.frow select,
.frow input[type="date"],
.frow input[type="number"] {
  height: 1.95rem; padding: 0 .65rem; border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); background: #fff; font-size: .875rem; color: var(--text-main);
  font-family: inherit; min-width: 6rem;
}
.frow input[type="number"] { width: 7.5rem; }
.frow input:focus, .frow select:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px var(--bg-tint);
}
.frow .dash { color: var(--text-placeholder); font-weight: 600; }

/* "精选"角标 */
.frow .badge-cur {
  display: inline-block; height: 1.05rem; padding: 0 .4rem;
  font-size: .6875rem; line-height: 1.05rem; border-radius: 3px;
  color: #fff; background: linear-gradient(135deg, #ff6b6b, #ee5a52);
  font-weight: 600; letter-spacing: .5px;
}

/* ========== 同行排版（简版风格）：多组 inline 流到一行 ========== */
.frow-line {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .5rem 1.25rem;
  padding: .625rem 0;
  border-bottom: 1px dashed var(--border-soft);
}
.frow-line:last-child { border-bottom: none; }
.frow-line > .k {
  display: inline-flex; align-items: center;
  font-size: .875rem; color: var(--text-muted); white-space: nowrap;
}
.frow-line > .k b {
  font-weight: 700; color: var(--primary);
  font-size: .9375rem; letter-spacing: .5px;
  margin-right: .5rem;
}
.frow-line .frow__opts {
  display: inline-flex; flex-wrap: wrap; gap: .25rem .625rem;
  align-items: center; min-width: 0;
}
.frow-line select,
.frow-line input[type="date"],
.frow-line input[type="month"],
.frow-line input[type="number"] {
  height: 1.85rem; padding: 0 .625rem; border: 1px solid var(--border-soft);
  border-radius: 4px; background: #fff; font-size: .875rem; color: var(--text-main);
  font-family: inherit; min-width: 6rem;
  transition: border-color .16s ease;
}
.frow-line input[type="number"] { width: 6.5rem; }
.frow-line select:focus,
.frow-line input:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px var(--bg-tint);
}
.frow-line .dash { color: var(--text-placeholder); font-weight: 600; }
.frow-line .opt { padding: 0 .5rem; }

.opt {
  height: 1.75rem; padding: 0 .75rem; border-radius: var(--radius-sm);
  font-size: .875rem; color: var(--text-regular);
  display: inline-flex; align-items: center; gap: .25rem;
  transition: all .16s ease; white-space: nowrap;
  background: transparent; border: none; cursor: pointer;
}
.opt:hover { color: var(--primary); background: var(--bg-tint); }
.opt.is-active { color: #fff; background: var(--primary); font-weight: 500; }
.opt.is-active .opt__n { color: rgba(255,255,255,.75); }
.opt__n { font-size: .75rem; color: var(--text-placeholder); }

.frow__more {
  font-size: .8125rem; color: var(--primary); flex-shrink: 0;
  line-height: 1.75rem; padding-left: .25rem; white-space: nowrap;
}
.frow__more:hover { text-decoration: underline; }

/* 已选条件 */
.chosen {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: .625rem 0;
}
.chosen__label { font-size: .875rem; font-weight: 600; color: var(--text-muted); width: 4.5rem; flex-shrink: 0; }
.chip {
  display: inline-flex; align-items: center; gap: .375rem;
  height: 1.75rem; padding: 0 .5rem 0 .75rem; border-radius: var(--radius-sm);
  background: var(--bg-selected); color: var(--primary-deep);
  font-size: .8125rem; font-weight: 500; border: 1px solid var(--border-emphasis);
}
.chip b { font-weight: 400; color: var(--text-muted); }
.chip button { color: var(--primary); font-size: 1rem; line-height: 1; opacity: .7; }
.chip button:hover { opacity: 1; }
.chosen__clear { font-size: .8125rem; color: var(--text-muted); text-decoration: underline; }
.chosen__clear:hover { color: var(--red); }

/* ============================================================ 工具栏 */
.toolbar {
  display: flex; align-items: center; gap: 1rem;
  margin-bottom: .875rem; padding: 0 .25rem;
}
.toolbar__count { font-size: .9375rem; color: var(--text-regular); }
.toolbar__count b { color: var(--primary); font-size: 1.125rem; font-weight: 800; margin: 0 .125rem; }
.toolbar__spacer { flex: 1; }
.sort { display: flex; gap: .25rem; align-items: center; }
.sort__label { font-size: .875rem; color: var(--text-muted); margin-right: .25rem; }
.sort button {
  padding: .3125rem .75rem; border-radius: var(--radius-sm);
  font-size: .875rem; color: var(--text-regular); transition: all .16s ease;
}
.sort button:hover { color: var(--primary); background: var(--bg-tint); }
.sort button.is-active { color: var(--primary); background: var(--bg-tint); font-weight: 600; }

/* ============================================================ 期刊卡片 */
.cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .875rem; align-items: start;
}

.jcard {
  padding: 1.25rem 1.25rem 1.375rem;
  background: var(--bg-surface);
  border-radius: var(--radius);
  outline: 1px solid var(--border-light);
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative; z-index: 1;
}
.jcard:hover {
  z-index: 5; transform: translateY(-2px);
  box-shadow: 0 .625rem 1.5rem rgba(180, 110, 60, .18);
}

.jcard__info { height: 12.5rem; display: flex; gap: .625rem; margin-bottom: .625rem; }

/* —— 封面 */
.jcard__cover {
  width: 9.25rem; flex-shrink: 0; position: relative;
  border-radius: var(--radius); overflow: hidden;
  background: var(--bg-tint); cursor: zoom-in;
}
.jcard__cover img { width: 100%; height: 100%; object-fit: cover; }
.jcard__cover--ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: .75rem .5rem; text-align: center; cursor: default;
}
.jcard__cover--ph .ph__title {
  font-size: 1.0625rem; font-weight: 800; color: #fff; line-height: 1.35;
  letter-spacing: .5px; text-shadow: 0 1px 3px rgba(0,0,0,.18);
  writing-mode: vertical-rl; max-height: 8.5rem; overflow: hidden;
}
.jcard__cover--ph .ph__tip {
  position: absolute; bottom: .5rem; left: 0; right: 0;
  font-size: .625rem; color: rgba(255,255,255,.75); letter-spacing: 1px;
}
.jcard__cover--ph::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: .375rem;
  background: rgba(0,0,0,.10);
}

/* —— 暂停收稿：封面灰白 + 轻微模糊，并打角标 */
.jcard__cover--paused img {
  filter: grayscale(1) blur(1.2px); opacity: .62;
}
.jcard__cover--paused.jcard__cover--ph {
  filter: grayscale(1) saturate(.4); opacity: .72;
}
.cover__paused-badge {
  position: absolute; left: .4rem; bottom: .4rem; z-index: 2;
  padding: .12rem .45rem; border-radius: .35rem;
  background: rgba(20,20,20,.62); color: #fff;
  font-size: .6875rem; font-weight: 600; letter-spacing: .5px;
  backdrop-filter: blur(2px);
}

/* —— 右侧信息 6 行栅格 */
.jcard__desc {
  flex: 1; min-width: 0; height: 100%;
  display: grid; grid-template-rows: auto auto auto auto auto auto;
  align-content: space-between; gap: .25rem; font-size: .9375rem;
}

.jcard__name {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: start; column-gap: .5rem;
  min-height: 1.75rem; line-height: 1.75rem;
  padding-right: 5.5rem; /* 给右上角价格角标让位 */
}
.jcard__name .t {
  font-size: 1.125rem; font-weight: 700; color: var(--text-main);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jcard__name .r { display: flex; align-items: center; gap: .3125rem; white-space: nowrap; }
.batch {
  font-size: .6875rem; font-weight: 500; color: #fff;
  background: var(--blue); padding: .0625rem .3125rem;
  border-radius: .1875rem; line-height: 1.4;
}
.batch--2 { background: var(--purple); }
.price {
  color: var(--price); font-size: 1.0625rem; font-weight: 700;
  letter-spacing: .2px; line-height: 1;
}
.price i { font-size: .8125rem; font-style: normal; font-weight: 600; }
.price--none { color: var(--text-placeholder); font-size: .8125rem; font-weight: 500; }

/* —— 价格角标（卡片右上角） */
.jcard__price {
  position: absolute; top: .75rem; right: .75rem; z-index: 6;
  background: var(--price); color: #fff;
  font-weight: 800; font-size: .9375rem; line-height: 1;
  padding: .25rem .625rem; border-radius: var(--radius-pill);
  box-shadow: 0 .1875rem .625rem rgba(255, 77, 79, .30);
}
.jcard__price i { font-size: .75rem; font-style: normal; font-weight: 600; margin-right: .0625rem; }
.jcard__price--none { background: var(--text-placeholder); box-shadow: none; font-size: .8125rem; font-weight: 600; }
/* 代理价角标：不写"代理"两字，只换底色（紫色 vs 红） */
.jcard__price--agent {
  background: linear-gradient(135deg, #8B5CF6, #6D28D9);
  box-shadow: 0 .1875rem .625rem rgba(109, 40, 217, .32);
}

.jcard__meta {
  color: var(--purple); font-size: .875rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jcard__layout, .jcard__issue, .jcard__sell {
  font-size: .875rem; color: var(--text-regular);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jcard__issue .d {
  color: var(--red); font-weight: 700; margin-right: .25rem; font-size: .8125rem;
}
.jcard__sell { color: var(--text-muted); }
/* 卡片版面行：左"版面：X字符" + 右投稿难度星星（2026-08-11） */
.jcard__layout { font-size: .875rem; color: var(--text-regular); display: flex; align-items: center; gap: .5rem; }
.jcard__layout b { color: var(--text-main); font-weight: 600; }
.jcard__layout-main { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jcard__layout-k { color: var(--text-muted); font-size: .8125rem; margin-right: .25rem; }
.jcard__difficulty { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .25rem; }
.diff__stars { color: #F59E0B; font-size: .9375rem; line-height: 1; letter-spacing: 1px; }

.jcard__tags {
  display: flex; align-items: center; gap: .375rem;
  min-height: 1.375rem; margin-top: .25rem;
  font-size: .75rem; overflow: hidden; white-space: nowrap;
}
.tag {
  padding: .1875rem .5rem; border-radius: .25rem;
  line-height: 1.1; flex-shrink: 0;
}
.tag:nth-child(3n+1) { color: var(--primary); background: var(--bg-tint); }
.tag:nth-child(3n+2) { color: var(--green);   background: var(--green-bg); }
.tag:nth-child(3n+3) { color: var(--purple);  background: var(--purple-bg); }
.tag-more { color: var(--text-placeholder); font-weight: 700; flex-shrink: 0; }

/* —— 卡片操作 */
.jcard__ops { display: flex; gap: .5rem; }
.jcard__ops button {
  flex: 1; height: 2.25rem; border-radius: var(--radius-pill);
  background: var(--bg-tint); color: var(--primary);
  font-size: .875rem; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; gap: .25rem;
  transition: all .18s ease; white-space: nowrap;
}
.jcard__ops button:hover { background: var(--bg-tint-hover); color: var(--primary-deep); }
.jcard__ops button.is-main {
  background: linear-gradient(135deg, #F08A45, var(--primary)); color: #fff;
  box-shadow: 0 .1875rem .625rem var(--primary-a30);
}
.jcard__ops button.is-main:hover { filter: brightness(1.06); color: #fff; }

/* 投稿按钮暂隐藏（业务暂不需要） */
.jcard__ops button[data-act="submit"],
.modal__foot button[data-act="submit"] { display: none !important; }

/* ============================================================ 空态 / 分页 */
.empty { text-align: center; padding: 5rem 0; color: var(--text-muted); }
.empty__icon { font-size: 3.5rem; opacity: .35; margin-bottom: .75rem; }
.empty__t { font-size: 1.0625rem; font-weight: 600; color: var(--text-regular); margin-bottom: .375rem; }
.empty__s { font-size: .875rem; }
.empty button { margin-top: 1rem; }

.pager {
  display: flex; justify-content: center; align-items: center; gap: .375rem;
  padding: 2rem 0 3rem;
}
.pager button {
  min-width: 2.125rem; height: 2.125rem; padding: 0 .625rem;
  border-radius: var(--radius-sm); background: var(--bg-surface);
  border: 1px solid var(--border-light); color: var(--text-regular);
  font-size: .875rem; transition: all .16s ease;
}
.pager button:hover:not(:disabled) { color: var(--primary); border-color: var(--primary); }
.pager button.is-active {
  background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600;
}
.pager button:disabled { opacity: .4; cursor: not-allowed; }
.pager__info { font-size: .8125rem; color: var(--text-muted); margin-left: .5rem; }

/* ============================================================ 详情弹窗（仿 jiankanzhijia 布局） */
.mask {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(47, 42, 40, .45); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
.mask.show { opacity: 1; pointer-events: auto; }

.modal {
  width: 76rem; max-width: calc(100vw - 3rem); max-height: calc(100vh - 3rem);
  background: var(--bg-surface); border-radius: var(--radius-lg);
  box-shadow: 0 1.5rem 4rem rgba(60, 40, 25, .28);
  display: flex; flex-direction: column;
  transform: translateY(1rem) scale(.98); transition: transform .22s ease;
}
.mask.show .modal { transform: none; }

.modal__close {
  position: absolute; top: .875rem; right: 1rem; z-index: 3;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: rgba(255,255,255,.7); color: var(--text-muted);
  font-size: 1.25rem; display: grid; place-items: center;
  transition: all .18s ease;
}
.modal__close:hover { background: var(--red); color: #fff; }

/* ========== Header: 3列网格 (封面 | 信息 | 操作+胶囊) ========== */
.modal__head {
  position: relative; flex-shrink: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 1fr auto;
  column-gap: 1.25rem; row-gap: .5rem;
  padding: 1.25rem 1.5rem;
  background: linear-gradient(135deg, #FFF6ED, #FEF3E8);
  border-bottom: 1px solid var(--border-light);
}
.modal__cover {
  grid-column: 1; grid-row: 1 / span 3;
  width: 7.5rem; height: 10rem;
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 .375rem 1.25rem rgba(120, 80, 50, .22);
  background: var(--bg-tint); align-self: center;
}
.modal__cover img { width: 100%; height: 100%; object-fit: cover; }
.modal__cover.jcard__cover--ph { position: relative; }

.modal__hinfo {
  grid-column: 2; grid-row: 1 / span 3;
  display: flex; flex-direction: column; gap: .375rem; min-width: 0;
}
.modal__title { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.modal__title h2 { font-size: 1.5rem; font-weight: 800; line-height: 1.2; }

.modal__price-line {
  display: flex; align-items: baseline; gap: .375rem; flex-wrap: wrap;
  font-size: .875rem;
}
.modal__price-line .k { color: var(--text-muted); }
.modal__price-line .v { color: var(--red); font-size: 1.25rem; font-weight: 800; }
/* 详情弹窗代理价行：和全部展示同字号同形态，只换底色块（不写"代理价"文字，靠底色区分） */
.modal__price-line .v--agent {
  display: inline-block;
  background: linear-gradient(135deg, #8B5CF6, #6D28D9);
  color: #fff;
  padding: .0625rem .5rem;
  border-radius: .3125rem;
  box-shadow: 0 .125rem .4375rem rgba(109, 40, 217, .28);
}
.modal__price-line .v--mask { letter-spacing: 1px; }
.modal__price-line .ph { color: var(--text-placeholder); font-size: 1rem; }
.modal__price-line .d {
  color: var(--text-muted); font-size: .8125rem; flex: 1; min-width: 12rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.modal__meta {
  color: var(--purple); font-size: .9375rem;
}
.modal__meta .sep { color: var(--border-light); margin: 0 .375rem; }

.modal__issue {
  font-size: .875rem; color: var(--text-regular); line-height: 1.55;
  background: rgba(255,255,255,.6); border-left: 3px solid var(--primary);
  padding: .375rem .625rem; border-radius: .25rem;
}
.modal__issue .k { color: var(--text-muted); margin-right: .375rem; font-weight: 500; }
.modal__issue .d { color: var(--red); font-weight: 700; margin-right: .375rem; }

.modal__sell { font-size: .875rem; color: var(--text-regular); }
.modal__sell .k { color: var(--text-muted); margin-right: .375rem; font-weight: 500; }

/* 右上：动作按钮 */
.modal__topacts {
  grid-column: 3; grid-row: 1;
  display: flex; flex-direction: column; gap: .375rem;
  align-self: start; justify-self: end;
}
.modal__topacts button {
  height: 1.95rem; padding: 0 .875rem; border-radius: var(--radius-pill);
  background: rgba(255,255,255,.85); color: var(--primary);
  border: 1px solid var(--border-light);
  font-size: .8125rem; font-weight: 500; white-space: nowrap;
  display: inline-flex; align-items: center; gap: .3125rem;
  transition: all .18s ease;
}
.modal__topacts button:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* 右下：特性胶囊 */
.modal__feapills {
  grid-column: 3; grid-row: 3;
  display: flex; flex-wrap: wrap; gap: .375rem; align-items: center;
  justify-content: flex-end; align-self: end;
}
.feapill {
  height: 1.55rem; padding: 0 .625rem; border-radius: var(--radius-pill);
  background: var(--green-bg); color: var(--green);
  border: 1px solid rgba(56, 161, 105, .28);
  font-size: .75rem; font-weight: 500; white-space: nowrap;
}
.feapill--more {
  background: transparent; color: var(--text-placeholder);
  border-color: var(--border-light); font-weight: 700;
}

/* ========== Body: 单列纵向流（双列栏 + 底部 callout）；内容紧凑时不滚动，超出时才滚动兜底 ========== */
.modal__body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column;
  padding: 1.25rem 1.5rem 1.5rem;
}
/* 双列：基本信息 | 期刊分析 */
.modal__twocol {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
}

.detail-col { min-width: 0; }
.detail-col + .detail-col { border-left: 1px dashed var(--border-soft); padding-left: 1.5rem; }

.detail-col__title {
  font-size: 1.0625rem; font-weight: 800; color: var(--primary);
  padding-left: .625rem; border-left: .25rem solid var(--primary);
  line-height: 1.2; margin-bottom: .5rem;
}

.detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: .25rem 1rem;
  margin-bottom: .25rem;
}
.di {
  display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: .5rem;
  font-size: .875rem; padding: .3rem 0;
  border-bottom: 1px dashed var(--border-soft);
  align-items: baseline;
}
.di b { color: var(--text-muted); font-weight: 500; }
.di span { color: var(--text-main); word-break: break-word; line-height: 1.5; }
.di__reject { color: var(--red); font-weight: 700; letter-spacing: 2px; }
.di__stars { color: #F7BA2A; letter-spacing: 2px; font-size: .9375rem; }
.di__stars .off { color: #E8D5C4; }
.di__link { color: var(--blue); }
.di__link--lock { color: var(--text-placeholder); font-style: italic; }

/* K-V 文本折叠（基本信息栏默认 1 行，长字段 5 行） */
.di__txt {
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; overflow: hidden;
  word-break: break-word; color: var(--text-main); line-height: 1.5;
}
.di__txt--long { -webkit-line-clamp: 5; }
.di__txt--empty { color: var(--text-placeholder); }
.di__txt.is-open { -webkit-line-clamp: unset; }
.di__more {
  display: inline-block; margin-top: .25rem;
  color: var(--primary); font-size: .75rem; cursor: pointer;
  font-weight: 500; user-select: none;
}
.di__more:hover { text-decoration: underline; }

/* 作者简介：普通字段风格（标题：内容），在 grid 内独占整行 */
.di--full {
  grid-column: 1 / -1;
  display: flex; align-items: baseline; gap: .5rem;
  font-size: .875rem; padding: .3rem 0;
  border-bottom: 1px dashed var(--border-soft);
}
.di--full > b { flex: none; color: var(--text-muted); font-weight: 500; }
.di--full > .di__txt { flex: 1; min-width: 0; }

/* 彩色高亮块：「标题：内容」同行，整体 3 行截断 */
.detail-callout {
  margin-bottom: 0; padding: .5rem .75rem;
  border-radius: var(--radius); font-size: .875rem; line-height: 1.65;
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 4; overflow: hidden;
  /* 强制 4 行高度（4 × 1.65em ≈ 6.6em），短内容也撑开，长内容超 4 行再截断 */
  min-height: calc(1.65em * 4);
  word-break: break-word; cursor: help;
}
.detail-callout b {
  display: inline; font-weight: 700; color: inherit;
}
.detail-callout b::after { content: "："; }
.detail-callout span { color: var(--text-regular); word-break: break-word; }
.detail-callout__txt { display: inline; }
.detail-callout__txt.is-open { -webkit-line-clamp: unset; }
.detail-callout__more {
  display: inline-block; margin-top: .25rem;
  color: var(--primary); font-size: .75rem; cursor: pointer;
  font-weight: 500; user-select: none;
}
.detail-callout__more:hover { text-decoration: underline; }

/* 底部 callout 区：固定左右两列，永不挪位
     左列：特殊要求 + 收稿范围
     右列：过稿率主观评价 + 期刊关键词
     即使某块缺值，4 个槽位也保留原位（内容占位"—"） */
.modal__callouts {
  display: flex; gap: 1rem;
  margin-top: .5rem;
  /* 双列容器内列容器按 1:1 分配剩余空间 */
}
.detail-callout-col {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; gap: .625rem;
}
/* 空值占位样式：浅灰「—」，让缺数据时不至于空白突兀 */
.detail-callout__txt--empty { color: var(--text-placeholder); }
.detail-callout--warn {
  background: #FFF6ED; border: 1px solid rgba(232, 119, 48, .30);
}
.detail-callout--warn b { color: var(--primary); }
.detail-callout--ok {
  background: #F0FAF4; border: 1px solid rgba(56, 161, 105, .30);
}
.detail-callout--ok b { color: var(--green); }

.modal__foot {
  flex-shrink: 0; display: flex; gap: .625rem; justify-content: flex-end;
  padding: .875rem 1.5rem; border-top: 1px solid var(--border-light);
  background: var(--bg-surface-soft);
}
.modal__foot button {
  height: 2.375rem; padding: 0 1.5rem; border-radius: var(--radius-pill);
  background: var(--bg-tint); color: var(--primary); font-size: .9375rem; font-weight: 500;
  transition: all .18s ease;
}
.modal__foot button:hover { background: var(--bg-tint-hover); }

/* ============================================================ 简版「基本信息」弹窗（点卡片底部"基本信息"按钮触发）
     排版参考同行：单列纵向流 + 4 字段网格 + 全文一键复制；配色全部跟随主题变量。 */
.modal.modal--simple {
  width: 53rem; max-width: calc(100vw - 3rem);
  max-height: calc(100vh - 3rem);
}
.simple {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0; overflow: hidden;
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  box-shadow: 0 1.5rem 4rem rgba(60, 40, 25, .22);
}
.simple__head {
  display: flex; align-items: center;
  padding: 0.75rem 1.5rem 0.5rem;
  padding-right: 3.5rem;   /* 给右上角 ✕ 关闭按钮让位 */
  border-bottom: 1px dashed var(--border-soft);
  background: var(--bg-surface);
}
.simple__head h3 {
  font-size: 1.0625rem; font-weight: 800; color: var(--primary);
  letter-spacing: .5px;
}
.simple__body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 0.5rem 1.5rem 1.125rem;
  display: flex; flex-direction: column; gap: .75rem;
}
.simple__row {
  display: flex; align-items: baseline; gap: .5rem;
  padding: .5rem .75rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--bg-tint);
  font-size: .9375rem;
}
.simple__row b {
  flex: none; min-width: 5rem;
  color: var(--primary); font-weight: 600;
  font-size: .875rem;
}
.simple__row span {
  flex: 1; min-width: 0;
  color: var(--text-main); word-break: break-word;
}
.simple__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem;
}
.simple__grid > div {
  padding: .5rem .75rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--bg-tint);
  min-width: 0;
}
.simple__grid > div.is-hidden { display: none; }  /* 价格联动：none 模式整格隐藏 */
.simple__grid b {
  display: block; font-size: .8125rem;
  color: var(--primary); font-weight: 600;
  margin-bottom: .25rem;
}
.simple__grid span {
  font-size: .875rem; color: var(--text-main);
  word-break: break-word;
}
.simple__block {
  padding: .5rem .75rem;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--bg-tint);
}
.simple__block b {
  display: block; font-size: .875rem;
  color: var(--primary); font-weight: 600;
  margin-bottom: .25rem;
}
.simple__block p {
  margin: 0; font-size: .875rem;
  color: var(--text-main); line-height: 1.6;
  word-break: break-word;
}
.simple__foot {
  padding: .875rem 1.5rem 1.125rem;
  border-top: 1px dashed var(--border-soft);
  display: flex; justify-content: center;
  background: var(--bg-surface);
}
.simple__btn {
  padding: .5rem 1.75rem;
  border-radius: 9999px;
  border: 1px solid var(--primary);
  background: transparent;
  color: var(--primary);
  font-size: .9375rem; font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s, transform .12s;
  user-select: none;
}
.simple__btn:hover { background: var(--primary); color: #fff; transform: translateY(-1px); }
.simple__btn.is-copied { background: var(--primary); color: #fff; }
@media (max-width: 720px) {
  .simple__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================ hover 浮层（截断字段出原文，可复制） */
.detailtip {
  position: absolute; z-index: 9999;
  max-width: 440px; min-width: 200px;
  padding: 8px 12px;
  background: rgba(28, 26, 24, .96);
  color: #F7F3EE;
  font-size: .8125rem; line-height: 1.55;
  border-radius: 6px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
  white-space: normal; word-break: break-word;
  pointer-events: auto;        /* 关键：让鼠标进入才能选中/复制 */
  user-select: text; -webkit-user-select: text;
  display: none;
}
.di__txt[data-full]:hover,
.di__txt--long[data-full]:hover,
.detail-callout[data-full]:hover { color: var(--primary); }

/* ============================================================ 封面大图 */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(20, 15, 12, .82);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .2s ease; cursor: zoom-out;
}
.lightbox.show { opacity: 1; pointer-events: auto; }
.lightbox img {
  max-width: 42vw; max-height: 86vh; border-radius: var(--radius);
  box-shadow: 0 1.5rem 4rem rgba(0,0,0,.5);
}

/* ============================================================ 页脚 */
.footer {
  margin-top: 1.5rem; padding: 1.75rem 0;
  border-top: 1px solid var(--border-light);
  text-align: center; font-size: .8125rem; color: var(--text-muted);
  background: var(--bg-surface-soft);
}
.footer p + p { margin-top: .375rem; }

/* ============================================================ 加载态 */
.skeleton { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .5 } }
.sk-card { height: 17rem; border-radius: var(--radius); background: #F7EADE; }

/* ============================================================ 响应式 */
@media (max-width: 1400px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  html { font-size: 14px; }
  .cards { grid-template-columns: 1fr; }
  .nav { display: none; }
  .frow__label { width: 3.75rem; }
  .lightbox img { max-width: 88vw; }
  .header__stat { display: none; }
  .price-toggle__label { display: none; }
  .price-toggle .seg__btn { padding: .3125rem .5rem; font-size: .75rem; }

  /* Modal 响应式 */
  .modal__head {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
  }
  .modal__cover { grid-column: 1; grid-row: 1 / span 3; width: 5.5rem; height: 7.5rem; }
  .modal__hinfo { grid-column: 2; grid-row: 1 / span 3; }
  .modal__topacts { grid-column: 1 / span 2; grid-row: 4; flex-direction: row; justify-self: start; margin-top: .5rem; }
  .modal__feapills { grid-column: 1 / span 2; grid-row: 5; justify-content: flex-start; }
  .modal__twocol { grid-template-columns: 1fr; gap: 1rem; }
  .detail-col + .detail-col { border-left: none; border-top: 1px dashed var(--border-soft); padding-left: 0; padding-top: 1rem; }
  .detail-grid { grid-template-columns: 1fr; }
  .modal__callouts { flex-direction: column; gap: .625rem; }
  .detail-callout-col { flex: 1 1 auto; }
}

/* 打印 */
@media print {
  .header, .hero, .filters, .toolbar, .pager, .footer { display: none; }
}