/* =========================================================
   期刊网 · 本地演示系统
   设计令牌与基础样式（浅色现代风）
   ========================================================= */

:root {
  --bg: #f4f6fb;
  --bg-grad-a: #eef3ff;
  --bg-grad-b: #f7f4ff;
  --surface: #ffffff;
  --surface-2: #fafbfe;
  --surface-3: #f2f4fa;
  /* 只读 / 派生区域的浅底。历史样式里多处直接写 var(--bg-2)（只读输入框、写作记录表头、
     关键词说明行），但令牌一直没定义 —— 未定义的自定义属性会让整条声明失效，
     表现为「底纹静默变透明」，这里补上定义，让这些位置按设计显示浅底。 */
  --bg-2: #f6f8fc;
  --border: #e6e9f2;
  --border-strong: #d7dced;
  --text: #141823;
  --text-2: #4b5265;
  --text-3: #868da3;
  /* 方案 D · 活力渐变潮流：主色改为紫粉渐变体系（#6d5efc → #a855f7 → #ec4899） */
  --primary: #6d5efc;
  --primary-600: #5647e8;
  --primary-soft: #f0edff;
  --violet: #a855f7;
  --teal: #06b6d4;
  --success: #10b981;
  --warn: #d18700;
  --danger: #e5476a;
  --accent: #ff4d8d;
  --grad-primary: linear-gradient(120deg, #6d5efc 0%, #a855f7 50%, #ec4899 100%);
  --grad-warm: linear-gradient(120deg, #ff7a45 0%, #ff4d8d 100%);
  --grad-teal: linear-gradient(120deg, #06b6d4 0%, #3b82f6 100%);
  --grad-lime: linear-gradient(120deg, #10b981 0%, #84cc16 100%);
  /* 大圆角：整体比原来更圆，呼应「潮流」气质 */
  --radius-xs: 8px;
  --radius-s: 11px;
  --radius: 15px;
  --radius-l: 21px;
  --radius-xl: 28px;
  /* 柔和阴影：带一层淡淡的紫调，替代原来的中性灰 */
  --shadow-1: 0 1px 3px rgba(22, 23, 43, 0.05);
  --shadow-2: 0 6px 18px -6px rgba(22, 23, 43, 0.1), 0 18px 40px -24px rgba(109, 94, 252, 0.28);
  --shadow-3: 0 30px 70px -34px rgba(109, 94, 252, 0.4);
  --ring: 0 0 0 4px rgba(109, 94, 252, 0.12);
  --font: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* hidden 属性必须真正生效。
   作者样式里的 display（如 .modal-host{display:grid}）会覆盖浏览器默认的
   [hidden]{display:none}，导致「加了 hidden 却依然显示」——弹层遮罩会全屏盖住页面，
   表现为一层模糊蒙版且无法点击。这里显式规则 + !important 兜底。 */
[hidden] { display: none !important; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #cdd3e4; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #b6bed6; }
::-webkit-scrollbar-track { background: transparent; }

.container { width: min(1320px, 100% - 48px); margin: 0 auto; }

/* ---------------- 启动占位 ---------------- */
.boot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; height: 100vh; color: var(--text-3); }
.boot-mark { width: 56px; height: 56px; border-radius: 16px; background: var(--grad-primary); color: #fff; display: grid; place-items: center; font-size: 26px; font-weight: 700; box-shadow: var(--shadow-2); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { transform: scale(1); opacity: 1 } 50% { transform: scale(0.94); opacity: .8 } }

/* ---------------- 顶栏 ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner { display: flex; align-items: center; gap: 22px; height: 66px; }
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-mark { width: 38px; height: 38px; border-radius: 12px; background: var(--grad-primary); color: #fff; display: grid; place-items: center; font-size: 19px; font-weight: 800; box-shadow: 0 8px 20px -8px rgba(109, 94, 252, .9); }
.brand-name { font-size: 17px; font-weight: 750; letter-spacing: -0.02em; }
.brand-sub { font-size: 11px; color: var(--text-3); letter-spacing: .08em; }

.mainnav { display: flex; align-items: center; gap: 2px; flex: 1; overflow-x: auto; scrollbar-width: none; }
.mainnav::-webkit-scrollbar { display: none; }
.mainnav a {
  padding: 7px 11px; border-radius: var(--radius-s); color: var(--text-2);
  font-size: 13.5px; white-space: nowrap; transition: .18s;
}
.mainnav a:hover { background: var(--surface-3); color: var(--text); }
.mainnav a.active { background: var(--primary-soft); color: var(--primary-600); font-weight: 650; }

.topbar-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.top-search { position: relative; }
.top-search input {
  width: 210px; height: 36px; padding: 0 34px 0 32px;
  border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--surface-2); outline: none; transition: .18s; font-size: 13px;
}
.top-search input:focus { border-color: var(--primary); background: #fff; box-shadow: var(--ring); width: 250px; }
.top-search .ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.suggest {
  position: absolute; top: 44px; left: 0; right: 0; background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-2);
  overflow: hidden; z-index: 70; max-height: 320px; overflow-y: auto;
}
.suggest button { display: block; width: 100%; text-align: left; padding: 9px 12px; background: none; border: 0; cursor: pointer; font-size: 13px; }
.suggest button:hover { background: var(--primary-soft); }
.suggest .lv { float: right; color: var(--text-3); font-size: 11.5px; }

/* ---------------- 按钮 ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 15px; border-radius: var(--radius-s);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  cursor: pointer; font-size: 13.5px; font-weight: 550; transition: .16s; white-space: nowrap;
}
.btn:hover { border-color: #c3cbe2; background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--grad-primary); border-color: transparent; color: #fff; box-shadow: 0 10px 22px -12px rgba(109, 94, 252, .95); }
.btn-primary:hover { filter: brightness(1.06); background: var(--grad-primary); border-color: transparent; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-3); }
.btn-danger { color: var(--danger); border-color: #f3ccd3; background: #fff5f6; }
.btn-danger:hover { background: #ffe9ec; border-color: #eeb4bf; }
.btn-sm { height: 29px; padding: 0 11px; font-size: 12.5px; border-radius: var(--radius-xs); }
.btn-lg { height: 44px; padding: 0 22px; font-size: 15px; border-radius: var(--radius); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------------- 表单 ---------------- */
.field { display: flex; flex-direction: column; gap: 6px; }
/* 条件字段（如「客户来源 = 老客户介绍」才出现的介绍人）：hidden 时必须真的不占位。
   ⚠️ 必须显式声明 display:none —— 用户代理样式表的 [hidden]{display:none} 权重低于作者样式，
   会被上面 .field{display:flex} 直接压过，字段「藏不住」、只变成一行空框。 */
.field[hidden] { display: none; }
.field > label { font-size: 12.5px; color: var(--text-2); font-weight: 600; }
.input, .select, .textarea {
  width: 100%; height: 38px; padding: 0 11px; border-radius: var(--radius-s);
  border: 1px solid var(--border-strong); background: #fff; outline: none; transition: .16s;
}
.textarea { height: auto; min-height: 38px; padding: 9px 11px; resize: both; overflow: auto; line-height: 1.65; max-width: 100%; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--primary); box-shadow: var(--ring); }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5l4-4' stroke='%23868da3' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; padding-right: 30px; }
.checkline { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.checkline input { width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; }

/* ---------------- 标签 / 徽章 ---------------- */
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; background: var(--surface-3); color: var(--text-2); border: 1px solid transparent; }
.tag-primary { background: var(--primary-soft); color: var(--primary-600); }
.tag-violet { background: #f2eeff; color: #6440e8; }
.tag-green { background: #e8f7f0; color: var(--success); }
.tag-orange { background: #fff2e8; color: #c2410c; }
.tag-red { background: #ffedf0; color: var(--danger); }
.tag-teal { background: #e6f6f4; color: var(--teal); }
.tag-line { background: transparent; border-color: var(--border-strong); color: var(--text-2); }

.badge { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 5px; font-size: 11px; font-weight: 650; letter-spacing: .01em; }
.lv-省级 { background: #eef2f9; color: #4b5670; }
.lv-国家级 { background: #e8f0ff; color: #2456d6; }
.lv-市级 { background: #f0f2f6; color: #5b6478; }
.lv-科技核心 { background: #e6f4ff; color: #0369a1; }
.lv-北大核心 { background: #ffefef; color: #c53030; }
.lv-南大核心 { background: #fdeef6; color: #b3277a; }
.lv-CSCD { background: #eef7ea; color: #3f7a22; }

.stars { display: inline-flex; gap: 2px; align-items: center; }
.stars i { width: 9px; height: 9px; border-radius: 2px; background: #e2e6f0; display: block; }
.stars i.on { background: linear-gradient(135deg, #ffa53d, #ff6a3d); }

/* ---------------- 头图区 ---------------- */
.hero {
  position: relative; overflow: hidden;
  padding: 44px 0 34px;
  background:
    radial-gradient(1200px 420px at 12% -10%, #dfe8ff 0%, rgba(223, 232, 255, 0) 62%),
    radial-gradient(900px 380px at 88% 0%, #f0e6ff 0%, rgba(240, 230, 255, 0) 60%),
    linear-gradient(180deg, #fbfcff 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
}
.hero-grid { position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(700px 260px at 50% 0%, #000 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(700px 260px at 50% 0%, #000 0%, transparent 75%);
}
.hero-inner { position: relative; }
.hero h1 { font-size: 33px; letter-spacing: -0.03em; }
.hero h1 em { font-style: normal; background: var(--grad-primary); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lead { margin-top: 10px; color: var(--text-2); font-size: 14.5px; }
.hero-search { margin-top: 22px; display: flex; gap: 10px; max-width: 760px; }
.hero-search .field-wrap { position: relative; flex: 1; }
.hero-search input {
  width: 100%; height: 50px; padding: 0 16px 0 44px; border-radius: var(--radius);
  border: 1px solid var(--border-strong); background: #fff; outline: none;
  font-size: 15px; box-shadow: var(--shadow-1); transition: .18s;
}
.hero-search input:focus { border-color: var(--primary); box-shadow: var(--ring), var(--shadow-1); }
.hero-search .ic { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--text-3); }
.hero-search .btn { height: 50px; padding: 0 26px; border-radius: var(--radius); font-size: 15px; }
.hero-quick { margin-top: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hero-quick .lb { color: var(--text-3); font-size: 12.5px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--border-strong); background: rgba(255, 255, 255, .8);
  font-size: 12.5px; color: var(--text-2); cursor: pointer; transition: .16s;
}
.chip:hover { border-color: var(--primary); color: var(--primary-600); background: #fff; }
.chip.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 600; }
.chip .n { opacity: .62; font-size: 11px; }

.hero-stats { margin-top: 26px; display: flex; gap: 30px; flex-wrap: wrap; }
.hero-stats .s .v { font-size: 23px; font-weight: 750; letter-spacing: -0.02em; }
.hero-stats .s .v span { font-size: 13px; font-weight: 600; color: var(--text-3); margin-left: 2px; }
.hero-stats .s .k { font-size: 12.5px; color: var(--text-3); }

/* ---------------- 通用块 ---------------- */
.section { padding: 26px 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.section-head h2 { font-size: 19px; }
.section-head .desc { color: var(--text-3); font-size: 13px; margin-top: 3px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); box-shadow: var(--shadow-1); }
.pad { padding: 20px; }

/* ---------------- 顶部筛选面板 ---------------- */
.filter-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-l); box-shadow: var(--shadow-1);
  padding: 2px 18px 8px; margin: 20px 0 16px;
}
.fp-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 0 8px; border-bottom: 1px solid var(--border); }
.fp-head .t { font-size: 13.5px; font-weight: 700; }
.fp-head .lnk { font-size: 12px; color: var(--primary); cursor: pointer; }
.fp-head .lnk:hover { text-decoration: underline; }
.filter-panel .fgroup {
  display: grid; grid-template-columns: 88px minmax(0, 1fr);
  gap: 2px 14px; padding: 10px 0; border-bottom: 1px dashed var(--border); align-items: start;
}
.filter-panel .fgroup:last-child { border-bottom: 0; padding-bottom: 2px; }
.filter-panel .fgroup > .ft { margin-bottom: 0; padding-top: 4px; justify-content: flex-start; gap: 6px; }
.filter-panel .fchips { row-gap: 7px; align-items: center; }
/* 多组同一行：级别+收录+批次 / 禁止推荐+推荐+页码 —— 三等分栅格，标签列与整行组对齐 */
.fp-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 28px; padding: 10px 0; border-bottom: 1px dashed var(--border); }
.fp-row .fgroup { padding: 0; border-bottom: 0; }
.fp-row .fgroup:last-child { border-bottom: 0; padding-bottom: 0; }
/* 限制出刊时间：年/月下拉标签，高度与筛选 chip 对齐 */
.fp-date { height: 25px; font-size: 12px; padding: 0 22px 0 9px; border: 1px solid var(--border-strong); border-radius: 7px; background-color: var(--surface-3); color: var(--text-2); cursor: pointer; background-position: right 7px center; }
.fp-date:focus { border-color: var(--primary); box-shadow: var(--ring); outline: none; }
/* 后台封面点击上传 */
.cover-up { transition: box-shadow .15s, transform .15s; }
.cover-up:hover { box-shadow: 0 0 0 2px var(--primary); transform: scale(1.08); }
/* 暂停收稿：期刊名称后的醒目提示 */
.paused-mark { font-style: normal; font-weight: 800; color: var(--accent); font-size: 0.86em; letter-spacing: 0.5px; white-space: nowrap; }
.jcard:has(.paused-mark) .jcard-title { color: var(--text-3); }
.fgroup { padding: 11px 0; border-bottom: 1px dashed var(--border); }
.fgroup:last-child { border-bottom: 0; padding-bottom: 0; }
.fgroup:first-child { padding-top: 0; }
.fgroup > .ft { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; font-weight: 650; color: var(--text-2); margin-bottom: 9px; }
.fgroup > .ft .mini { font-size: 11px; color: var(--text-3); font-weight: 400; }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; }
/* 选项横向单行排列（如期刊类别 23 个方向标签），超出横向滚动 */
.fchips.hscroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
.fchips.hscroll .fchip { white-space: nowrap; flex-shrink: 0; }
.fchip { padding: 3px 10px; border-radius: 7px; font-size: 13px; background: var(--surface-3); color: var(--text-2); cursor: pointer; border: 1px solid transparent; transition: .14s; }
.fchip:hover { background: var(--primary-soft); color: var(--primary-600); }
.fchip.on { background: var(--primary); color: #fff; font-weight: 600; }

/* ---------- 年月面板（合并「选择年 + 选择月」的弹层，前台筛选与后台编辑共用） ---------- */
.ym-panel { position: fixed; z-index: 3000; width: 288px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: 0 10px 32px rgba(20, 30, 60, .16); padding: 10px 12px 12px; }
.ym-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 0 8px; }
.ym-title { font-size: 14px; font-weight: 600; color: var(--text); letter-spacing: 1px; }
.ym-nav { width: 28px; height: 28px; border: none; background: transparent; border-radius: 7px; font-size: 15px; color: var(--text-2); cursor: pointer; transition: .14s; }
.ym-nav:hover:not(:disabled) { background: var(--surface-3); color: var(--primary-600); }
.ym-nav:disabled { opacity: .35; cursor: default; }
.ym-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.ym-m { height: 34px; border: none; background: transparent; border-radius: 7px; font-size: 12.5px; color: var(--text-2); cursor: pointer; transition: .12s; }
.ym-m:hover { background: var(--primary-soft); color: var(--primary-600); }
.ym-m.on { background: var(--primary); color: #fff; font-weight: 600; }
/* 区间模式：尚未点选起点时，把控件当前值用描边标出来（只是参考，不等于已选） */
.ym-m.cur { box-shadow: inset 0 0 0 1px var(--primary); color: var(--primary-600); font-weight: 600; }
/* 区间模式的提示行：说明「再点一个月份作为结束」以及将填入的内容 */
.ym-hint { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); font-size: 11.5px; line-height: 1.65; color: var(--text-3); }
.ym-hint b { color: var(--primary-600); font-weight: 650; }
/* 年月日选择面板（2026-10-17，写作截止日期专用）：三连排下拉 + 确定按钮 */
.date-panel { width: 300px; }
.date-sel-row { display: flex; gap: 6px; }
.date-sel-row .select { flex: 1; min-width: 0; height: 34px; }
.date-sel-foot { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border); display: flex; justify-content: flex-end; gap: 8px; }
.frow { display: flex; align-items: center; gap: 7px; }
.frow input { width: 100%; height: 32px; padding: 0 9px; border: 1px solid var(--border-strong); border-radius: var(--radius-xs); outline: none; font-size: 12.5px; }
.frow input:focus { border-color: var(--primary); box-shadow: var(--ring); }
.frow .sep { color: var(--text-3); }

.results-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.results-count { font-size: 13.5px; color: var(--text-2); }
.results-count b { color: var(--primary); font-size: 16px; font-weight: 750; }
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.results-head > .toolbar { margin-left: auto; }
.seg { display: inline-flex; background: var(--surface-3); border-radius: var(--radius-s); padding: 3px; gap: 2px; }
.seg button { height: 28px; padding: 0 11px; border: 0; background: none; border-radius: 6px; font-size: 12.5px; color: var(--text-2); cursor: pointer; transition: .14s; white-space: nowrap; }
.seg button.on { background: #fff; color: var(--primary-600); font-weight: 650; box-shadow: var(--shadow-1); }

/* 关键词两级匹配的说明行：仅在「期刊名称无命中、改按其他信息匹配」时出现 */
.kw-note { display: block; margin: 0 0 14px; padding: 9px 13px; border-radius: 9px; background: var(--bg-2); border: 1px solid var(--border); color: var(--text-2); font-size: 12.5px; line-height: 1.65; }
.kw-note-inline { display: inline-block; margin-left: 8px; color: var(--text-2); font-size: 12.5px; font-weight: 400; }
.active-filters { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.afilter { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px 0 10px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-600); font-size: 12px; }
.afilter b { font-weight: 600; }
.afilter .x { cursor: pointer; opacity: .6; font-size: 14px; line-height: 1; }
.afilter .x:hover { opacity: 1; }
.afilter-clear { height: 26px; padding: 0 11px; border-radius: 999px; border: 1px dashed var(--border-strong); background: none; color: var(--text-3); font-size: 12px; cursor: pointer; }

/* ---------------- 期刊卡片 ---------------- */
.jlist { display: flex; flex-direction: column; gap: 12px; }
.jcard {
  display: grid; grid-template-columns: 86px minmax(0, 1fr) 178px;
  gap: 16px; padding: 15px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-l);
  box-shadow: var(--shadow-1); transition: .18s; position: relative; overflow: hidden;
  cursor: pointer;
}
.jcard::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--grad-primary); opacity: 0; transition: .18s; }
.jcard:hover { border-color: #cdd6ee; box-shadow: var(--shadow-2); transform: translateY(-1px); }
.jcard:hover::before { opacity: 1; }
.jcard-cover { width: 86px; height: 116px; border-radius: 9px; overflow: hidden; background: var(--surface-3); box-shadow: 0 8px 18px -12px rgba(20,24,35,.6); }
.jcard-cover img { width: 100%; height: 100%; display: block; object-fit: cover; }
.jcard-main { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.jcard-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jcard-title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.jcard-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--text-2); }
.jcard-meta .m { display: inline-flex; align-items: center; gap: 5px; }
.jcard-meta .k { color: var(--text-3); }
.jcard-meta .v { color: var(--text); font-weight: 550; }
.jcard-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.jcard-side { border-left: 1px dashed var(--border); padding-left: 16px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.price-box .lbl { font-size: 11.5px; color: var(--text-3); }
.price-box .num { font-size: 21px; font-weight: 780; color: var(--accent); letter-spacing: -0.02em; }
.price-box .num small { font-size: 12px; font-weight: 600; margin-right: 1px; }
.price-box .num .unit { font-size: 12px; color: var(--text-3); font-weight: 500; margin-left: 2px; }
.price-box .na { font-size: 13px; color: var(--text-3); font-weight: 600; }
.side-mini { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-3); }
.side-mini b { color: var(--text-2); font-weight: 600; }

/* 外部跳转链接：总署链接 / 收录链接（新窗口打开） */
.jcard-links { display: flex; flex-wrap: wrap; gap: 7px; }
.jext, .dlink {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 650; line-height: 1; text-decoration: none;
  padding: 5px 11px; border-radius: 999px; transition: .15s; cursor: pointer;
}
.jext.gov, .dlink.gov { color: #2456d8; background: #f0f4ff; border: 1px solid #ccd8f6; }
.jext.gov:hover, .dlink.gov:hover { background: #2456d8; border-color: #2456d8; color: #fff; }
.jext.idx, .dlink.idx { color: #0d8a7f; background: #effbf9; border: 1px solid #b9e6e0; }
.jext.idx:hover, .dlink.idx:hover { background: #0d8a7f; border-color: #0d8a7f; color: #fff; }
.detail-links { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }

/* ---------------- 分页 ---------------- */
.pager { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 24px 0 8px; flex-wrap: wrap; }
.pager button { min-width: 33px; height: 33px; padding: 0 10px; border-radius: var(--radius-xs); border: 1px solid var(--border-strong); background: #fff; cursor: pointer; font-size: 13px; color: var(--text-2); transition: .14s; }
.pager button:hover:not([disabled]) { border-color: var(--primary); color: var(--primary-600); }
.pager button.on { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 650; }
.pager button[disabled] { opacity: .45; cursor: not-allowed; }
.pager .dots { color: var(--text-3); padding: 0 4px; }

/* ---------------- 空态 / 骨架 ---------------- */
.empty { padding: 64px 20px; text-align: center; color: var(--text-3); }
.empty .ico { font-size: 38px; opacity: .35; margin-bottom: 10px; }
.empty h4 { font-size: 15px; color: var(--text-2); margin-bottom: 6px; }
.skel { background: linear-gradient(90deg, #eef1f8 25%, #f6f8fc 37%, #eef1f8 63%); background-size: 400% 100%; animation: shimmer 1.3s ease infinite; border-radius: 8px; }
@keyframes shimmer { 0% { background-position: 100% 0 } 100% { background-position: 0 0 } }

/* ---------------- 详情页 ---------------- */
.crumb { display: flex; align-items: center; gap: 7px; padding: 16px 0 0; font-size: 12.5px; color: var(--text-3); }
.crumb a:hover { color: var(--primary); }
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 22px; align-items: start; padding: 16px 0 44px; }
.detail-hero { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 20px; }
.detail-cover { width: 148px; height: 198px; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-2); }
.detail-cover img { width: 100%; height: 100%; display: block; }
.detail-title { font-size: 25px; letter-spacing: -0.02em; }
.detail-sub { margin-top: 8px; color: var(--text-2); font-size: 13.5px; }
.detail-badges { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.kv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-top: 16px; }
.kv { background: #fff; padding: 11px 13px; }
.kv .k { font-size: 11.5px; color: var(--text-3); }
.kv .v { font-size: 13.5px; font-weight: 600; margin-top: 1px; word-break: break-all; }
.kv .v.na { color: var(--text-3); font-weight: 500; }
.block { margin-top: 18px; }
.block > h3 { font-size: 15px; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.block > h3::before { content: ''; width: 3px; height: 14px; border-radius: 2px; background: var(--grad-primary); }
.prose { color: var(--text-2); font-size: 13.5px; line-height: 1.85; white-space: pre-wrap; }
.side-sticky { position: sticky; top: 82px; display: flex; flex-direction: column; gap: 12px; }
.price-hero { padding: 18px; border-radius: var(--radius-l); background: linear-gradient(135deg, #fff7f2 0%, #fff 60%); border: 1px solid #ffe2d3; }
.price-hero .lbl { font-size: 12.5px; color: var(--text-3); }
.price-hero .num { font-size: 30px; font-weight: 800; color: var(--accent); letter-spacing: -0.03em; line-height: 1.25; }
.price-hero .num small { font-size: 14px; font-weight: 700; }
.price-hero .note { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.side-list { display: flex; flex-direction: column; }
.side-list .row { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--border); font-size: 13px; }
.side-list .row:last-child { border-bottom: 0; }
.side-list .row .k { color: var(--text-3); }
.side-list .row .v { font-weight: 600; text-align: right; }
.related { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 12px; }
.rel-card { padding: 13px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; cursor: pointer; transition: .16s; }
.rel-card:hover { border-color: var(--primary); box-shadow: var(--shadow-2); }
.rel-card .t { font-weight: 650; font-size: 13.5px; }
.rel-card .m { font-size: 12px; color: var(--text-3); margin-top: 5px; }

/* ---------------- 专区页 ---------------- */
.zone-banner { padding: 34px 0; border-bottom: 1px solid var(--border); background: linear-gradient(135deg, #fbfcff 0%, var(--bg) 100%); position: relative; overflow: hidden; }
.zone-banner .glow { position: absolute; width: 380px; height: 380px; border-radius: 50%; filter: blur(70px); opacity: .35; right: -60px; top: -160px; }
.zone-banner h1 { font-size: 27px; letter-spacing: -0.025em; }
.zone-banner p { color: var(--text-2); margin-top: 8px; max-width: 720px; }

/* ---------------- 业务页通用网格 ---------------- */
.grid-cards { display: grid; gap: 14px; }
.grid-2 { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fill, minmax(276px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); }
.bcard { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-l); padding: 18px; box-shadow: var(--shadow-1); transition: .18s; }
.bcard:hover { box-shadow: var(--shadow-2); border-color: #d5ddf0; }
.bcard h4 { font-size: 15.5px; }
.bcard .sub { color: var(--text-3); font-size: 12.5px; margin-top: 4px; }
.bcard .rows { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.bcard .rows .r { display: flex; justify-content: space-between; font-size: 12.5px; gap: 10px; }
.bcard .rows .r .k { color: var(--text-3); flex-shrink: 0; }
.bcard .rows .r .v { text-align: right; font-weight: 550; }
.bcard-foot { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bcard-price { color: var(--accent); font-weight: 750; font-size: 17px; }
.bcard-price small { font-size: 12px; }

.stat-tile { padding: 16px; border-radius: var(--radius); background: #fff; border: 1px solid var(--border); }
.stat-tile .lbl { font-size: 12px; color: var(--text-3); }
.stat-tile .val { font-size: 22px; font-weight: 760; margin-top: 2px; letter-spacing: -0.02em; }

.step-list { display: flex; flex-direction: column; gap: 12px; }
.step-row { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; }
.step-row .n { width: 30px; height: 30px; border-radius: 50%; background: var(--primary-soft); color: var(--primary-600); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.step-row .t { font-weight: 650; font-size: 13.5px; }
.step-row .d { font-size: 12.5px; color: var(--text-2); margin-top: 2px; }

/* 表格 */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 620px; }
table.tbl th { text-align: left; padding: 11px 13px; background: var(--surface-2); font-weight: 650; color: var(--text-2); font-size: 12.5px; border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0; }
table.tbl td { padding: 10px 13px; border-bottom: 1px solid var(--border); vertical-align: middle; }
table.tbl tr:last-child td { border-bottom: 0; }
table.tbl tbody tr:hover { background: var(--surface-2); }
table.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
/* 分类排序列头：可点击（点击即按该分类归拢，再点切换升降序） */
table.tbl th.th-sort { cursor: pointer; user-select: none; }
table.tbl th.th-sort:hover { color: var(--primary); }
table.tbl th.th-sort .th-arrow { margin-left: 4px; font-size: 11px; opacity: .5; }
table.tbl th.th-sort:hover .th-arrow { opacity: 1; }
.mono { font-family: var(--mono); font-size: 12.5px; }

/* 操作日志：变更明细展开行（点「N 项」就地展开，列出「字段：原值 → 新值」） */
.log-detail-cell { background: var(--surface-2); padding: 12px 13px !important; }
.log-diff { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; font-size: 12.5px; flex-wrap: wrap; }
.log-diff + .log-diff { border-top: 1px dashed var(--border); }
.log-diff-k { flex: 0 0 120px; color: var(--text-2); font-weight: 600; }
.log-diff-from { color: var(--text-3); text-decoration: line-through; word-break: break-all; max-width: 340px; }
.log-diff-arrow { color: var(--text-3); }
.log-diff-to { color: var(--primary-600); font-weight: 600; word-break: break-all; max-width: 340px; }

/* 操作日志：勾选列（选择性删除）。勾选框做成鼠标手型 + 居中，
   列宽窄，所以行高与其余单元格靠 vertical-align 对齐。 */
table.tbl th input[type="checkbox"],
table.tbl td input[type="checkbox"] { cursor: pointer; width: 15px; height: 15px; vertical-align: middle; }
table.tbl td:has(> input[type="checkbox"]) { text-align: center; }
/* 「删除勾选」禁用态：明确告知「还没勾任何东西」，而不是灰到看不出是按钮 */
.btn:disabled { opacity: .45; cursor: not-allowed; }
/* 选中行整行淡红底，勾选后一眼看出删的是哪几条 */
table.tbl tr:has(input[type="checkbox"]:checked) { background: rgba(220, 38, 38, .06); }

/* ---------------- 列表单元格：固定列宽预览 / 悬停信息预览 ----------------
   固定列宽布局（table-layout:fixed）目前只用于**渠道管理**：列宽由 schema.columns
   第三项声明（见 views/admin.js），浏览器严格按声明分配，长内容不会把列撑回去；
   单元格（.cell-clip）单行省略号，完整内容由悬停预览卡片展示、双击可整格复制。
   其余模块（含成本管理）保持**原来的自适应列宽**：单元格自然换行显示，悬停预览同样可用。 */
table.tbl.cols-channels { table-layout: fixed; }
table.tbl.cols-channels th { overflow: hidden; text-overflow: ellipsis; }
table.tbl.cols-channels td { overflow: hidden; }
table.tbl.cols-channels td > .cell-clip { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 成本管理：期刊名称 / 版面字符两列**回到收窄之前的宽度**（收窄前实测 284px / 393px，
   1440 视口表宽 1117px → 25.4% / 35.2%）。与渠道管理不同，这里**不做**单行省略号 ——
   收窄前的单元格是自然换行的，长版面字符说明照常折行，行高随之变化。 */
table.tbl.cols-costs { table-layout: fixed; }

/* ---------------- 成本管理：一条记录两行排列 ----------------
   第一行（tr.cost-main）是期刊名称 / 版面字符 / 成本价格 / 售价 / 利润 / 备注；
   紧跟着的第二行（tr.cost-ch-row）是这一条的**渠道信息**，横向排列
   「渠道名称： / 电话： / 微信QQ：」，数据来源「渠道管理」。
   两行视觉上连成一条记录：第一行不画下边框，由第二行收尾。 */
table.tbl tr.cost-main > td { border-bottom: 0; }
table.tbl tr.cost-ch-row > td { padding: 7px 13px 11px; background: var(--surface-2); }
table.tbl tr.cost-ch-row.editing > td { background: var(--primary-soft); }
.cch-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.cch-item { display: inline-flex; align-items: center; gap: 6px; }
.cch-item + .cch-item { border-left: 1px dashed var(--border-strong); padding-left: 16px; }
.cch-lb { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.cch-in { width: 148px; height: 30px; font-size: 12.5px; padding: 0 9px; }
.cch-in.cch-nm { width: 190px; }
/* 预览态（没点「编辑」）：输入框退成「带虚线的文本」，一眼看出能填但当前改不了 */
.cch-strip:not(.editable) .cch-in {
  background: transparent; border-color: transparent; border-bottom: 1px dashed var(--border-strong);
  border-radius: 0; padding: 0 2px; cursor: default;
}
.cch-strip:not(.editable) .cch-in:focus { border-color: transparent; border-bottom-color: var(--border-strong); box-shadow: none; }
.cch-del { height: 26px; padding: 0 8px; }
.cch-add { height: 28px; }
.cch-hint { font-size: 11.5px; color: var(--text-3); }
/* 默认渠道：编辑态是「默认」单选（一组渠道里有且只有一条），预览态是「默认渠道」小标。
   单选用原生 input + accent-color，选中那条的文字跟着变主色 —— 不靠 JS 维护高亮态。 */
.cch-dft {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px;
  color: var(--text-3); white-space: nowrap; cursor: pointer; user-select: none;
}
.cch-dft input { width: 13px; height: 13px; margin: 0; accent-color: var(--primary); cursor: pointer; }
.cch-dft input:checked + span { color: var(--primary); font-weight: 600; }
.cch-dft-tag {
  font-size: 11px; line-height: 18px; padding: 0 7px; border-radius: 999px;
  color: var(--primary); background: var(--primary-soft); white-space: nowrap;
}

/* 渠道名称下拉（ui.js 的 openChannelPick 创建）：点「渠道名称」输入框弹出，
   列出「渠道管理」里已登记的渠道名称（可滚动；输入框本身就是搜索框），选中即带出电话 / 微信QQ。
   挂在 body 下（position:fixed），不会被表格容器的 overflow 裁掉。 */
.ch-panel {
  position: fixed; z-index: 4300;
  max-width: min(360px, 90vw); max-height: 240px; overflow: auto;
  padding: 5px; border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--surface); box-shadow: 0 14px 34px -14px rgba(20, 24, 35, .28);
}
.ch-item { display: flex; flex-direction: column; gap: 1px; padding: 6px 9px; border-radius: 6px; cursor: pointer; }
.ch-item.on, .ch-item:hover { background: var(--primary-soft); }
.ch-nm { font-size: 13px; color: var(--text); }
.ch-meta { font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-empty { padding: 10px; font-size: 12.5px; color: var(--text-3); line-height: 1.7; }

/* 悬停信息预览卡片（ui.js 的 bindCellTips 创建，后台所有管理界面通用）：
   鼠标移到任意信息单元格即出现，自动换行、超高可滚动（可直接移到卡片上滚动读完长备注）；
   双击整格一次选中全部原文再复制（DOM 里存的就是完整内容，没有截断）。 */
.cell-tip {
  position: fixed; z-index: 4200;
  max-width: min(440px, 86vw); max-height: 260px; overflow: auto;
  padding: 8px 11px; border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--surface); color: var(--text);
  font-size: 12.5px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere;
  box-shadow: 0 12px 30px rgba(20, 24, 35, .18);
}
.cell-tip[hidden] { display: none; }

/* 行内编辑：正在编辑的行整行淡蓝底提示「这一条还没保存」 */
table.tbl tr.row-editing > td { background: var(--primary-soft); }
/* 展开的编辑区独占一行（colspan 跨全部列），内边距交给 .inline-edit 统一处理 */
table.tbl tr.row-edit > td { padding: 0; background: var(--surface-2); }
.inline-edit { padding: 14px 16px 16px; }
.inline-edit-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.inline-edit-head b { font-size: 13.5px; color: var(--text); }
.inline-edit-head span { font-size: 12px; color: var(--text-3); }
.inline-edit .form-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.inline-edit-tip { font-size: 12px; color: var(--text-3); line-height: 1.7; margin-top: 10px; }
.inline-edit-foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }

/* ---------------- 前台会员 / 游客 ----------------
   游客看不到「价格 / 刊期 / 特殊要求 / 收稿方向」——这些字段在服务端就被抹掉了，
   前端只负责把它显示成一个明确的锁标，而不是留白或伪装成「需咨询」。 */
.glock {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: 999px;
  background: var(--surface-3); border: 1px dashed var(--border-strong);
  color: var(--text-3); font-size: 11.5px; font-weight: 600; white-space: nowrap;
  cursor: default;
}
.glock.lg { font-size: 13px; padding: 4px 11px; }
/* 详情页顶部的游客提示条 */
.guest-note {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 0; padding: 11px 14px;
  border: 1px solid var(--border); border-left: 3px solid var(--warn);
  border-radius: var(--radius-s); background: var(--surface-2);
  font-size: 13px; color: var(--text-2);
}
.guest-note .gn-ico { font-size: 15px; }
.guest-note .btn { margin-left: auto; }
.guest-chip, .member-chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 32px; padding: 0 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 650; white-space: nowrap;
}
.guest-chip { background: var(--surface-3); color: var(--text-3); border: 1px dashed var(--border-strong); }
.member-chip { background: var(--primary-soft); color: var(--primary-600); }
/* 徽章里的锁标签（卡片 / 详情页的分类标签位） */
.tag.tag-lock { background: transparent; border: 1px dashed var(--border-strong); color: var(--text-3); }

/* 会员登录 / 注册弹窗 */
.mtabs { display: flex; gap: 6px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.mtab {
  border: 0; background: transparent; cursor: pointer; padding: 9px 14px;
  font-size: 14px; font-weight: 650; color: var(--text-3);
  border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: inherit;
}
.mtab.on { color: var(--primary-600); border-bottom-color: var(--primary); }
.cap-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cap-q {
  min-width: 104px; text-align: center; padding: 7px 10px;
  border-radius: var(--radius-s); background: var(--surface-3);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px; font-weight: 700; letter-spacing: .5px;
  color: var(--text); user-select: none;
}
.mhint { margin-top: 14px; font-size: 12.5px; color: var(--text-3); line-height: 1.75; }

/* ---------------- 后台：会员注册审核 ---------------- */
/* 侧栏「会员注册」的待审数字徽标 —— 有申请就显红，巡查时一眼看到 */
.admin-side .mtip {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--danger); color: #fff;
  font-size: 11px; font-weight: 700; display: grid; place-items: center;
}
.admin-side .mtip[hidden] { display: none; }
.mtip-banner {
  display: flex; align-items: center;
  margin-bottom: 14px; padding: 11px 14px;
  border: 1px solid var(--border); border-left: 3px solid var(--warn);
  border-radius: var(--radius-s); background: var(--surface-2);
  font-size: 13px; color: var(--text-2);
}
.mtip-banner b { color: var(--warn); }

/* 图表 */
.chart-host { width: 100%; height: 300px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); }
.legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 5px; }

/* ---------------- 浮动工具栏 ---------------- */
.floatbar { position: fixed; right: 18px; bottom: 26px; z-index: 55; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.floatbar .fb {
  display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 13px;
  border-radius: 999px; background: #fff; border: 1px solid var(--border);
  box-shadow: var(--shadow-2); cursor: pointer; font-size: 13px; color: var(--text-2); transition: .16s;
}
.floatbar .fb:hover { color: var(--primary-600); border-color: var(--primary); transform: translateX(-3px); }
.floatbar .fb .ico { width: 20px; text-align: center; }
.floatbar .fb.primary { background: var(--grad-primary); color: #fff; border-color: transparent; }
.floatbar .fb.primary:hover { color: #fff; }
.floatbar .fb .lb { white-space: nowrap; }
.floatbar .fb.collapsed .lb { display: none; }

/* ---------------- 弹层 ---------------- */
.modal-host { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; }
.modal-mask { position: absolute; inset: 0; background: rgba(20, 24, 35, .42); backdrop-filter: blur(3px); animation: fade .18s ease; }
.modal-panel { position: relative; background: #fff; border-radius: var(--radius-xl); box-shadow: var(--shadow-3); width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 60px); overflow: auto; animation: pop .2s cubic-bezier(.2,.9,.3,1.1); }
.modal-panel.wide { width: min(980px, calc(100vw - 32px)); }
.modal-panel.xl { width: min(1360px, calc(100vw - 24px)); }
/* 带写手独立栏的编辑弹窗（订单管理）：主区宽度与普通 xl 弹窗一致，加宽部分全部给右侧写手栏 */
.modal-panel.xl.wider { width: min(1600px, calc(100vw - 24px)); }
.modal-panel.xl .modal-body { padding: 18px 26px 24px; }
.modal-panel.xl .form-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px 18px; }
.form-grid .form-section { grid-column: 1 / -1; margin: 10px 0 0; }
.form-grid .form-section:first-child { margin-top: 0; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 18px 22px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: #fff; z-index: 2; }
.modal-head h3 { font-size: 16.5px; }
.modal-body { padding: 20px 22px; }
/* 复制期刊信息「防批量」提示（public/assets/js/copy-guard.js）：正文段落统一行距，数字加粗突出 */
.copy-guard p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.85; color: var(--text-2); }
.copy-guard p:last-child { margin-bottom: 0; }
.copy-guard b { color: var(--text); font-weight: 600; }
.modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 15px 22px; border-top: 1px solid var(--border); position: sticky; bottom: 0; background: #fff; }
.icon-btn { width: 30px; height: 30px; border-radius: 8px; border: 0; background: var(--surface-3); cursor: pointer; color: var(--text-2); display: grid; place-items: center; font-size: 15px; }
.icon-btn:hover { background: #e7eaf5; }
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98) } to { opacity: 1; transform: none } }

/* ---------------- Toast ---------------- */
.toast-host { position: fixed; top: 78px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { padding: 10px 18px; border-radius: 999px; background: rgba(20, 24, 35, .92); color: #fff; font-size: 13px; box-shadow: var(--shadow-2); animation: pop .18s ease; }
.toast.ok { background: linear-gradient(135deg, #0a9a68, #0f9d8f); }
.toast.err { background: linear-gradient(135deg, #dc3450, #b3243c); }

/* ---------------- 管理后台 ---------------- */
.admin { display: grid; grid-template-columns: 226px minmax(0, 1fr); min-height: calc(100vh - 66px); }
.admin-side { background: #fff; border-right: 1px solid var(--border); padding: 18px 14px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 66px; height: calc(100vh - 66px); overflow-y: auto; }
.admin-side .grp { font-size: 11px; letter-spacing: .1em; color: var(--text-3); text-transform: uppercase; margin: 14px 8px 6px; }
.admin-side a { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: var(--radius-s); font-size: 13.5px; color: var(--text-2); cursor: pointer; transition: .14s; }
.admin-side a:hover { background: var(--surface-3); }
.admin-side a.on { background: var(--primary-soft); color: var(--primary-600); font-weight: 650; }
.admin-side .who { margin-top: auto; padding: 12px; border-radius: var(--radius); background: var(--surface-2); font-size: 12.5px; color: var(--text-2); }
.admin-main { padding: 24px 26px 60px; min-width: 0; }
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.admin-head h2 { font-size: 20px; }
.admin-head .desc { color: var(--text-3); font-size: 13px; margin-top: 3px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }
.bars { display: flex; flex-direction: column; gap: 9px; }
.bar-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 52px; gap: 10px; align-items: center; font-size: 12.5px; }
.bar-track { height: 9px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 6px; background: var(--grad-primary); }
.bar-row .n { text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.form-grid .span2 { grid-column: span 2; }
/* 显式分行布局（schema.rows）：整行铺满，字段按行内数量等分宽度
   → 每行第 1 个输入框左边界贴容器左、最后 1 个输入框右边界贴容器右（两端对齐）；
   → 字段之间水平间距（gap）恒定不变，与字段数量无关 */
.form-row { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-end; }
/* 列宽 = 整行可用宽度按份额 --w 分配（缺省 1；字段定义 weight:0.5 即宽度减半），份额之和仍铺满整行 */
.form-row .field { flex: var(--w, 1) 1 0; width: auto; min-width: 0; }
/* 上下排列的一列（rows 中把多个字段写成数组）：整列占一份份额，列内字段各占一行 */
.form-row .form-col { flex: var(--w, 1) 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.form-row .form-col > .field { flex: 0 0 auto; width: 100%; }
.form-row .field > label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 行内控件一律撑满所属字段宽度：宽度由所在行等分决定，不再受各自 min/max 限制 */
.form-row .input,
.form-row .select,
.form-row .textarea { width: 100%; min-width: 0; max-width: none; }
.form-row .field > div[style*="flex"] { flex-wrap: nowrap; }
/* 虚线竖线分隔栏（rows 中的 '|' 标记）：栏内字段竖向（上下）排列，左侧一条竖直虚线 */
.form-writer {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: stretch;
  padding-left: 14px;
  border-left: 1px dashed var(--border);
}
.form-writer > .field { flex: 0 0 auto; width: 100%; min-width: 0; }
/* 写手独立栏（rows 中以 '|' 开头的独立行）：左主区（多行）+ 右写手栏，栏高跨主区全部行；
   主区占剩余全部宽度（各行仍按份额等分、两端对齐），写手栏定宽 220px 不参与份额分配 */
.form-split { display: flex; align-items: stretch; gap: 16px; }
.form-split .form-main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.form-split .form-writer { flex: 0 0 220px; }
/* 写作记录（只读）：不是表格、也不是输入框 —— 每条记录横向排成一行，
   五项信息（订单编号 / 期刊名称 / 作者姓名 / 文章名称 / 写作状态）各自独立成格、从左到右依次排列。
   用 CSS Grid 五列（列宽固定，与表头共用同一份列模板），保证上下行严格对齐、长文本在各自格内换行。 */

/* 字段容器：跨整行、宽度与表单左右边界齐平。
   ⚠️ 选择器权重：.form-grid .span2（两个类，0,2,0）会压过单类 .wlog-field（0,1,0），
   元素上绝不能再带 span2 类；这里同步给出 .form-grid .wlog-field 高权重写法双保险，
   确保 grid-column: 1/-1（跨全部列、左右边界齐平）稳定生效 */
.wlog-field,
.form-grid .wlog-field { grid-column: 1 / -1; width: 100%; min-width: 0; }
/* 记录区：固定最大高度，记录多时在框内上下滚动查看（滚动条在框内，不撑高弹窗） */
.wlog-rows {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.wlog-row {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 126px 150px 82px minmax(0, 1fr) 122px;
  gap: 0;
  border-top: 1px solid var(--border);
}
.wlog-row:first-child { border-top: 0; }
/* 表头吸顶：上下拉动看记录时，五项名称始终可见 */
.wlog-head { background: var(--bg-2); font-weight: 600; color: var(--text-2); position: sticky; top: 0; z-index: 1; }
.wlog-cell { padding: 7px 10px; font-size: 12.5px; color: var(--text-1); min-width: 0; border-left: 1px solid var(--border); }
.wlog-cell:first-child { border-left: 0; }
/* 各格独立显示：订单编号 / 作者姓名单行不换行，期刊名称 / 文章名称在格内换行 */
.wlog-c-no { white-space: nowrap; font-variant-numeric: tabular-nums; }
.wlog-c-an { white-space: nowrap; }
.wlog-c-jn, .wlog-c-at { word-break: break-word; line-height: 1.5; }
.wlog-c-st { white-space: nowrap; }
.wlog-empty { color: var(--text-3); }
.wlog-none { color: var(--text-3); text-align: center; padding: 14px 10px; font-size: 12.5px; }
/* 窄屏：五列挤不下时改为整块横向滚动，列宽不压缩（信息不互串） */
@media (max-width: 1080px) {
  .wlog-rows { overflow-x: auto; }
  .wlog-row { min-width: 620px; }
}
.form-section { margin: 20px 0 12px; font-size: 13px; font-weight: 700; color: var(--text-2); display: flex; align-items: center; gap: 8px; }
.form-section::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.switch { position: relative; width: 40px; height: 22px; border-radius: 999px; background: #dbe0ee; cursor: pointer; transition: .18s; flex-shrink: 0; border: 0; }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-1); transition: .18s; }
.switch.on { background: var(--primary); }
.switch.on::after { left: 20px; }
.login-wrap { display: grid; place-items: center; min-height: calc(100vh - 66px); padding: 40px 20px; }
.login-card { width: min(400px, 100%); padding: 30px; }
.login-card .brand-mark { width: 46px; height: 46px; font-size: 22px; border-radius: 13px; }

/* ---------------- 页脚 ---------------- */
.footer { margin-top: 30px; padding: 34px 0 40px; border-top: 1px solid var(--border); background: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 26px; }
.footer h5 { font-size: 13px; margin-bottom: 10px; color: var(--text); }
.footer ul li { font-size: 12.5px; color: var(--text-3); padding: 3px 0; cursor: pointer; }
.footer ul li:hover { color: var(--primary); }
.footer .about { font-size: 12.5px; color: var(--text-3); margin-top: 10px; line-height: 1.8; }
.footer-bottom { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text-3); }

/* ---------------- 响应式 ---------------- */
@media (max-width: 1080px) {
  .filter-panel .fgroup { grid-template-columns: 1fr; }
  .fp-row { grid-template-columns: 1fr; gap: 10px; }
  .detail { grid-template-columns: 1fr; }
  .side-sticky { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .admin { grid-template-columns: 1fr; }
  .admin-side { position: static; height: auto; flex-direction: row; overflow-x: auto; }
  .admin-side .who, .admin-side .grp { display: none; }
  /* 窄屏：写手独立栏从右侧改为下方（虚线改横向，避免主区被挤得过窄） */
  .form-split { flex-direction: column; }
  .form-split .form-writer { flex: 1 1 auto; border-left: 0; border-top: 1px dashed var(--border); padding-left: 0; padding-top: 12px; }
}
@media (max-width: 760px) {
  .container { width: calc(100% - 28px); }
  .topbar-inner { height: 58px; gap: 12px; }
  .brand-sub, .top-search { display: none; }
  .hero { padding: 28px 0 22px; }
  .hero h1 { font-size: 24px; }
  .hero-search { flex-direction: column; }
  .jcard { grid-template-columns: 70px minmax(0, 1fr); }
  .jcard-cover { width: 70px; height: 96px; }
  .jcard-side { grid-column: 1 / -1; border-left: 0; border-top: 1px dashed var(--border); padding-left: 0; padding-top: 12px; flex-direction: row; align-items: center; justify-content: space-between; }
  .detail-hero { grid-template-columns: 104px minmax(0, 1fr); }
  .detail-cover { width: 104px; height: 140px; }
  .detail-title { font-size: 19px; }
  .floatbar .fb .lb { display: none; }
  .floatbar .fb { width: 44px; height: 44px; padding: 0; justify-content: center; border-radius: 50%; }
}

/* =========================================================
   方案 D · 活力渐变潮流（2026-10-03）
   原则：**只做视觉层替换，不改任何类名 / 结构 / 布局 / 交互逻辑**。
   配色：紫 #6d5efc → 紫红 #a855f7 → 粉 #ec4899；辅助 珊瑚橙 / 青蓝 / 薄荷绿。
   特征：大圆角、鲜艳渐变、柔和阴影、微动效（悬浮上移 / 缓慢漂移 / 光晕）。
   首屏与页脚保持深色（紫调深空），结果区保持浅色清爽 —— 与原有明暗节奏一致。
   ========================================================= */

::selection { background: rgba(109, 94, 252, .18); }

body {
  background:
    radial-gradient(1100px 480px at 50% -180px, #f0ecff 0%, rgba(240, 236, 255, 0) 70%),
    radial-gradient(900px 420px at 92% 8%, #ffeef5 0%, rgba(255, 238, 245, 0) 66%),
    var(--bg);
}

/* ---------------- 顶栏：玻璃 + 渐变发丝线 ---------------- */
.topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, transparent 4%, rgba(109, 94, 252, .45) 30%, rgba(168, 85, 247, .45) 55%, rgba(236, 72, 153, .45) 78%, transparent 96%);
  pointer-events: none;
}
.topbar { background: rgba(255, 255, 255, .82); box-shadow: 0 12px 32px -26px rgba(109, 94, 252, .45); }
.brand-mark { box-shadow: 0 10px 24px -10px rgba(109, 94, 252, .95), inset 0 1px 0 rgba(255, 255, 255, .35); }
.mainnav a.active { background: linear-gradient(120deg, rgba(109, 94, 252, .12), rgba(236, 72, 153, .12)); }

/* ---------------- 首屏：紫色极光（深色） ---------------- */
.hero {
  padding: 66px 0 58px;
  background:
    radial-gradient(1000px 500px at 80% -120px, rgba(168, 85, 247, .3) 0%, rgba(168, 85, 247, 0) 60%),
    radial-gradient(900px 460px at 12% -80px, rgba(109, 94, 252, .34) 0%, rgba(109, 94, 252, 0) 62%),
    linear-gradient(160deg, #1a1145 0%, #241a5c 58%, #2b1440 100%);
  border-bottom: 0;
}
/* 两团极光光晕，缓慢漂移 */
.hero::before, .hero::after {
  content: ''; position: absolute; border-radius: 50%;
  filter: blur(90px); pointer-events: none; will-change: transform;
}
.hero::before {
  width: 560px; height: 560px; left: -150px; top: -230px;
  background: radial-gradient(circle, rgba(109, 94, 252, .58) 0%, rgba(109, 94, 252, 0) 65%);
  animation: aurora 15s ease-in-out infinite alternate;
}
.hero::after {
  width: 660px; height: 660px; right: -200px; top: -280px;
  background: radial-gradient(circle, rgba(168, 85, 247, .5) 0%, rgba(236, 72, 153, .2) 48%, rgba(236, 72, 153, 0) 68%);
  animation: aurora 19s ease-in-out infinite alternate-reverse;
}
@keyframes aurora {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(70px, 46px, 0) scale(1.14); }
}
/* 网格改为白色微光，被极光衬托 */
.hero-grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(920px 460px at 50% 0%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(920px 460px at 50% 0%, #000 0%, transparent 78%);
}
/* 首屏元素依次浮起 */
.hero-inner > * { animation: rise .6s cubic-bezier(.2, .7, .3, 1) both; }
.hero-inner > *:nth-child(2) { animation-delay: .07s; }
.hero-inner > *:nth-child(3) { animation-delay: .14s; }
.hero-inner > *:nth-child(4) { animation-delay: .21s; }
.hero-inner > *:nth-child(5) { animation-delay: .28s; }
.hero-inner > *:nth-child(6) { animation-delay: .35s; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* 顶部状态胶囊 */
.hero-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 16px;
  border-radius: 999px; background: linear-gradient(120deg, rgba(109, 94, 252, .22), rgba(236, 72, 153, .22));
  border: 1px solid rgba(255, 255, 255, .2); backdrop-filter: blur(6px);
  color: #e8dcff; font-size: 12.5px; font-weight: 600; letter-spacing: .05em;
}
.hero-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 10px #4ade80; animation: dotPulse 2.2s ease-in-out infinite; }
@keyframes dotPulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

.hero h1 { font-size: clamp(30px, 4.2vw, 44px); font-weight: 800; color: #fff; letter-spacing: -.035em; }
.hero h1 em {
  background: linear-gradient(92deg, #6d5efc 0%, #a855f7 46%, #ec4899 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lead { color: rgba(232, 226, 255, .74); font-size: 15px; }

/* 玻璃搜索舱：外层是发光玻璃托盘，内层白输入框 + 渐变按钮 */
.hero-search {
  margin-top: 26px; display: flex; gap: 10px; max-width: 720px;
  padding: 8px; border-radius: 22px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(12px);
  box-shadow: 0 24px 64px -24px rgba(26, 12, 52, .8), inset 0 1px 0 rgba(255, 255, 255, .1);
}
.hero-search input {
  height: 46px; border: 1px solid transparent; border-radius: 15px;
  background: #fff; box-shadow: none; font-size: 15px;
}
.hero-search input:focus { border-color: #a855f7; box-shadow: 0 0 0 4px rgba(168, 85, 247, .24); }
.hero-search .btn {
  height: 46px; border-radius: 15px; font-weight: 650;
  background: var(--grad-primary);
  box-shadow: 0 12px 28px -10px rgba(168, 85, 247, .85);
}
/* 重置按钮（2026-10-18）：搜索舱内的玻璃次级按钮，与渐变主按钮形成主次关系 */
.hero-search .btn.hero-reset {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .26);
  color: #efe9ff;
  box-shadow: none;
}
.hero-search .btn.hero-reset:hover {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .44);
  color: #fff;
}

/* 热门方向 chips（深色底上的玻璃胶囊） */
.hero-quick { margin-top: 18px; }
.hero-quick .lb { color: rgba(232, 226, 255, .58); }
.hero .chip {
  background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .2); color: #e8dcff;
  backdrop-filter: blur(4px); border-radius: 999px;
}
.hero .chip:hover { background: linear-gradient(120deg, rgba(109, 94, 252, .4), rgba(236, 72, 153, .4)); border-color: rgba(255, 255, 255, .46); color: #fff; transform: translateY(-1px); }

/* 数据统计：白色大数字 + 竖分隔线 */
.hero-stats { margin-top: 30px; gap: 26px; }
.hero-stats .s { position: relative; }
.hero-stats .s + .s { border-left: 1px solid rgba(255, 255, 255, .14); padding-left: 26px; }
.hero-stats .s .v { color: #fff; font-size: 27px; font-weight: 800; letter-spacing: -.02em; }
.hero-stats .s .v span { color: rgba(232, 226, 255, .6); }
.hero-stats .s .k { color: rgba(232, 226, 255, .58); }

/* ---------------- 专区横幅：同款紫色深空 ---------------- */
.zone-banner {
  padding: 46px 0;
  background:
    radial-gradient(800px 380px at 85% -100px, rgba(168, 85, 247, .34) 0%, rgba(168, 85, 247, 0) 62%),
    linear-gradient(135deg, #1a1145 0%, #2b1440 100%);
  border-bottom: 0;
}
.zone-banner h1 { color: #fff; }
.zone-banner p { color: rgba(232, 226, 255, .7); }
.zone-banner .glow { opacity: .6; filter: blur(80px); }

/* ---------------- 筛选面板 / 筹选 chip ---------------- */
.filter-panel { box-shadow: var(--shadow-2); border-radius: var(--radius-l); }
.fchip { border-radius: 999px; transition: .15s; }
.fchip.on { background: var(--grad-primary); box-shadow: 0 8px 18px -8px rgba(168, 85, 247, .85); }
.fchip:not(.on):hover { transform: translateY(-1px); }
.chip.on { background: var(--grad-primary); border-color: transparent; }
.chip { border-radius: 999px; }

/* ---------------- 期刊卡片：悬浮 + 渐变脊线 ---------------- */
.jcard { transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; }
.jcard:hover {
  transform: translateY(-5px);
  border-color: transparent;
  box-shadow:
    0 0 0 1px rgba(109, 94, 252, .18),
    0 26px 52px -26px rgba(109, 94, 252, .42);
}
.jcard::before { width: 3px; top: 14px; bottom: 14px; border-radius: 0 3px 3px 0; background: var(--grad-primary); }
.jcard-cover { box-shadow: 0 14px 30px -14px rgba(22, 23, 43, .8); }

/* ---------------- 按钮 / 分页微光 ---------------- */
.btn-primary { position: relative; overflow: hidden; }
.pager button.on { background: var(--grad-primary); border-color: transparent; box-shadow: 0 10px 22px -10px rgba(168, 85, 247, .85); }

/* ---------------- 页脚：深色收尾，与首屏呼应 ---------------- */
.footer {
  position: relative; margin-top: 46px;
  background: linear-gradient(180deg, #1a1145 0%, #150d36 100%);
  border-top: 0; color: #cfc8e8;
}
.footer::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 4%, rgba(109, 94, 252, .5) 30%, rgba(168, 85, 247, .5) 62%, rgba(236, 72, 153, .4) 82%, transparent 96%);
}
.footer .brand-name { color: #fff; }
.footer h5 { color: #fff; }
.footer ul li { color: rgba(207, 200, 232, .58); }
.footer ul li:hover { color: #fff; }
.footer .about { color: rgba(207, 200, 232, .55); }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .08); color: rgba(207, 200, 232, .42); }

/* ---------------- 动效降级 ---------------- */
@media (prefers-reduced-motion: reduce) {
  .hero-inner > *, .hero::before, .hero::after, .hero-pill .dot { animation: none !important; }
}

/* ---------------- 响应式补充 ---------------- */
@media (max-width: 760px) {
  .hero { padding: 40px 0 36px; }
  .hero h1 { font-size: 26px; }
  .hero-search { padding: 6px; border-radius: 19px; }
  .hero-search input, .hero-search .btn { height: 42px; }
  .hero-stats { gap: 18px; }
  .hero-stats .s + .s { padding-left: 18px; }
  .hero-stats .s .v { font-size: 21px; }
}

/* =========================================================
   管理后台 V2 视觉升级 · 随前台切换为方案 D 配色（2026-10-03）
   深色侧栏 + 紫色极光登录页；只覆盖后台专属类（.admin-* / .login-*），
   前台零影响；不改任何结构 / 类名 / 交互逻辑，编辑器 DSL 布局一行未动。
   ========================================================= */

/* ---------------- 登录页：紫色极光幕布 + 悬浮白卡 ---------------- */
.login-wrap {
  min-height: 100vh; position: relative; overflow: hidden;
  background:
    radial-gradient(900px 440px at 78% -120px, rgba(168, 85, 247, .32) 0%, rgba(168, 85, 247, 0) 62%),
    radial-gradient(820px 420px at 10% -80px, rgba(109, 94, 252, .36) 0%, rgba(109, 94, 252, 0) 64%),
    linear-gradient(160deg, #1a1145 0%, #241a5c 58%, #2b1440 100%);
}
.login-wrap::before, .login-wrap::after {
  content: ''; position: absolute; border-radius: 50%;
  filter: blur(90px); pointer-events: none;
}
.login-wrap::before {
  width: 520px; height: 520px; left: -140px; bottom: -220px;
  background: radial-gradient(circle, rgba(109, 94, 252, .48) 0%, rgba(109, 94, 252, 0) 66%);
  animation: aurora 16s ease-in-out infinite alternate;
}
.login-wrap::after {
  width: 600px; height: 600px; right: -180px; top: -240px;
  background: radial-gradient(circle, rgba(168, 85, 247, .46) 0%, rgba(236, 72, 153, .18) 50%, rgba(236, 72, 153, 0) 70%);
  animation: aurora 20s ease-in-out infinite alternate-reverse;
}
.login-wrap .login-card {
  position: relative; border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, .5);
  box-shadow: 0 44px 96px -34px rgba(26, 12, 52, .72), 0 0 0 1px rgba(255, 255, 255, .06);
}

/* ---------------- 侧栏：深色导航，贯穿全高 ---------------- */
.admin { min-height: 100vh; }
.admin-side {
  top: 0; height: 100vh;
  background: linear-gradient(180deg, #241a5c 0%, #2b1a63 62%, #1d1245 100%);
  border-right: 0;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .07);
  padding: 20px 14px;
}
.admin-side .grp { color: rgba(207, 200, 232, .4); }
.admin-side a { color: rgba(224, 218, 250, .76); border-radius: 14px; }
.admin-side a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.admin-side a.on {
  background: var(--grad-primary);
  color: #fff; font-weight: 650;
  box-shadow: 0 12px 26px -11px rgba(168, 85, 247, .95);
}
.admin-side .mtip {
  background: #ff4d8d; color: #fff;
  box-shadow: 0 0 12px rgba(255, 77, 141, .8);
}
.admin-side .who {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .1);
  color: rgba(207, 200, 232, .78);
  border-radius: var(--radius);
}
.admin-side .who a { color: #c4b5fd !important; } /* 行内 style 的前台链接色，深底下提亮 */
.admin-side::-webkit-scrollbar { width: 8px; }
.admin-side::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 4px; }

/* ---------------- 主区：淡光画布 + 标题渐变脊线 ---------------- */
.admin-main {
  background: radial-gradient(1000px 340px at 55% -120px, rgba(109, 94, 252, .09) 0%, rgba(109, 94, 252, 0) 70%);
}
.admin-head h2 { position: relative; padding-bottom: 10px; }
.admin-head h2::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 46px; height: 3px; border-radius: 2px;
  background: var(--grad-primary);
}

/* ---------------- 卡片 / 统计 / 表格 ---------------- */
.admin-main .card { border-radius: var(--radius-l); }
.stat-tile { transition: transform .18s ease, box-shadow .18s ease; }
.stat-tile:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -18px rgba(109, 94, 252, .4); }
.stat-tile .val {
  background: var(--grad-primary);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tbl tbody tr { transition: background .12s ease; }
.tbl tbody tr:hover { background: #faf7ff; }

/* ---------------- 按钮（仅后台作用域） ---------------- */
.admin .btn-primary, .login-wrap .btn-primary {
  background: var(--grad-primary);
  box-shadow: 0 10px 22px -9px rgba(168, 85, 247, .8);
}
.admin .btn-danger, .login-wrap .btn-danger {
  background: linear-gradient(120deg, #ff5f7e 0%, #e01f4d 100%);
  box-shadow: 0 6px 16px -8px rgba(224, 31, 77, .6);
  color: #fff; border-color: transparent; /* 渐变底必须配白字，否则红字红底不可读 */
}
.admin .btn-danger:hover { background: linear-gradient(120deg, #ff5f7e 0%, #e01f4d 100%); filter: brightness(1.08); border-color: transparent; }
.admin .btn-danger:disabled { opacity: .45; box-shadow: none; }

/* ---------------- 动效降级 ---------------- */
@media (prefers-reduced-motion: reduce) {
  .login-wrap::before, .login-wrap::after { animation: none !important; }
}

/* ---------------- 移动端：深色侧栏横条也保持可读 ---------------- */
@media (max-width: 760px) {
  .admin-side a { color: rgba(224, 218, 250, .8); }
  .admin-side a.on { color: #fff; }
}

/* ---------------- 管理员管理：子管理员与权限勾选组（2026-10-13） ---------------- */
.perm-box { margin-top: 16px; border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px 4px; background: var(--surface-2); }
.perm-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.perm-head b { font-size: 14px; }
.perm-tip { flex: 1 1 320px; min-width: 0; color: var(--text-3); font-size: 12.5px; line-height: 1.75; }
.perm-tools { display: inline-flex; gap: 8px; }
.perm-group { margin-bottom: 12px; }
.perm-group-head { font-size: 12.5px; color: var(--text-3); margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px dashed var(--border); }
.perm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px 14px; }
.perm-item { display: flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; padding: 3px 0; color: var(--text); }
.perm-item input { width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; }
.perm-inline { color: var(--text-3); font-size: 11.5px; margin-top: 3px; line-height: 1.5; word-break: break-all; }
.perm-none { color: var(--text-3); font-size: 12.5px; }
/* 侧栏底部的角色小标签（深色底，需浅字） */
.role-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; font-size: 11px; background: rgba(255, 255, 255, .16); color: rgba(232, 228, 252, .92); }
@media (max-width: 760px) {
  .perm-list { grid-template-columns: 1fr 1fr; }
}

/* ---------------- 订单警示：数据看板「订单面板」+ 订单列表标红（2026-10-16） ----------------
   两条警示判据：状态（待确认 / 已付定金）与写作超期（写发单、截止日已过、未出刊）。
   看板面板与订单列表共用同一份纯函数（admin.js 的 isOrderWarnStatus / isWriteOverdue），
   所以这里的红色只代表「需要跟进的单子」，不是装饰。 */
/* 订单列表：需要跟进的行整行淡红底。
   ⚠️ 背景写在 td 上而不是 tr 上 —— 样式表里 .tbl tbody tr:hover 是 tr 级背景，
   td 级背景永远压得住它，鼠标扫过时不会一闪就白回去。 */
table.tbl tbody tr.row-warn > td { background: #fff5f6; }
table.tbl tbody tr.row-warn:hover > td { background: #ffecef; }

/* 面板说明行（共 N 单 / 写发 N 单） */
.ord-note { font-size: 12.5px; color: var(--text-3); margin-bottom: 12px; }
.ord-note b { color: var(--text); }
.ord-none { font-size: 13px; color: var(--text-3); padding: 10px 0; line-height: 1.8; }

/* 三条警示磁贴：只有真有待跟进才转红（数字 / 描边 / 左侧色条一起变），为 0 时保持中性灰 */
.ord-warn { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.ord-warn-item { display: flex; flex-direction: column; gap: 1px; padding: 12px 14px;
  border-radius: var(--radius); background: var(--surface-2);
  border: 1px solid var(--border); border-left: 3px solid var(--border-strong); }
.ord-warn-item .lbl { font-size: 12px; color: var(--text-3); }
.ord-warn-item .val { font-size: 22px; font-weight: 760; letter-spacing: -0.02em; }
.ord-warn-item .hint { font-size: 11.5px; color: var(--text-3); }
.ord-warn-item.is-warn { background: #fff5f6; border-color: #ffd9de; border-left-color: var(--danger); }
.ord-warn-item.is-warn .lbl, .ord-warn-item.is-warn .val { color: var(--danger); }

/* 面板两栏：左「订单状态分布」右「写作超期清单」 */
.ord-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.ord-sub { font-size: 13px; font-weight: 700; margin: 0 0 10px; color: var(--text-2); }
.ord-sub-tip { font-weight: 400; font-size: 11.5px; color: var(--text-3); }
/* 状态分布里「需要跟进」的两条：条、标签、数字全部转红，和右侧磁贴对齐 */
.bar-row.is-warn span:first-child { color: var(--danger); font-weight: 650; }
.bar-fill.is-warn { background: linear-gradient(135deg, #ff7a8a, var(--danger)); }
.bar-row.is-warn .n { color: var(--danger); font-weight: 700; }

/* 写作超期清单：逐条淡红底，左侧截止日 + 超期天数 + 客户/期刊/题目 + 单号 */
.ord-ov-list { display: flex; flex-direction: column; gap: 8px; }
.ord-ov { display: grid; grid-template-columns: 84px 66px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 8px 10px; border-radius: 8px; background: #fff5f6; border: 1px solid #ffd9de; font-size: 12.5px; }
.ord-ov-dl { color: var(--danger); font-weight: 650; font-variant-numeric: tabular-nums; }
.ord-ov-days { color: var(--danger); font-weight: 650; }
/* 写作截止提醒（2026-10-17）：今天 / 明天截止 = 橙色档（区别于超期的红色） */
.ord-ov-days.is-due { color: #b45309; }
.ord-ov.due-soft { background: #fff7ef; border-color: #ffe3c2; }
.ord-ov.due-soft .ord-ov-dl { color: #b45309; }
.ord-ov-txt { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ord-ov-no { color: var(--text-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.ord-ov-more { font-size: 12px; color: var(--text-3); }
.ord-ok { font-size: 13px; color: var(--success); padding: 8px 0; }
@media (max-width: 760px) {
  .ord-cols { grid-template-columns: 1fr; }
  .ord-ov { grid-template-columns: 84px 66px minmax(0, 1fr); }
  .ord-ov-no { display: none; }
}

/* =========================================================
   前台 · 期刊信息弹窗（点击期刊卡片打开）
   ---------------------------------------------------------
   独立宿主 #jm-host（懒创建）而不是复用后台那套 .modal-host：
   ① 布局是「整幅信息面板」：封面头图 + 关键参数条 + 两栏信息 + 常驻底部操作条；
   ② 层级压在通用弹窗之下（190 < 200）—— 弹窗里再点「立即咨询 / 登记投稿意向 /
      信息有误反馈」走通用弹窗，浮在这一层上面；关掉后期刊弹窗原样还在。
   ⚠️ .jm-host 用了 display:grid，所以也依赖全局 [hidden]{display:none!important}
      兜底（见本文件「hidden 属性必须真正生效」一段）—— 不要改成内联 display。
   ========================================================= */
.jm-host { position: fixed; inset: 0; z-index: 190; display: grid; place-items: center; }
.jm-mask { position: absolute; inset: 0; background: rgba(20, 24, 35, .46); backdrop-filter: blur(3px); animation: fade .18s ease; }
.jm-panel {
  position: relative; width: min(1240px, calc(100vw - 24px)); max-height: calc(100vh - 40px);
  background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-3);
  display: flex; flex-direction: column; overflow: hidden; animation: pop .2s cubic-bezier(.2,.9,.3,1.1);
}
/* 关闭按钮挂在面板右上角（不随内容滚动） */
.jm-close {
  position: absolute; top: 13px; right: 13px; z-index: 4; width: 32px; height: 32px; border: 0;
  border-radius: 10px; background: rgba(255, 255, 255, .88); backdrop-filter: blur(6px); cursor: pointer;
  color: var(--text-2); font-size: 15px; display: grid; place-items: center; box-shadow: var(--shadow-1);
}
.jm-close:hover { background: #fff; color: var(--text); }
.jm-scroll { flex: 1; min-height: 0; overflow: auto; }

/* ---------- 头部：封面 + 标题徽标 + 价格卡 ---------- */
.jm-top {
  padding: 22px 24px 16px; border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, #f6f4ff 0%, #fdf6fb 52%, #ffffff 100%);
}
.jm-head { display: grid; grid-template-columns: 128px minmax(0, 1fr) 272px; gap: 20px; align-items: start; }
.jm-cover { width: 128px; height: 172px; border-radius: 13px; overflow: hidden; background: var(--surface-3); box-shadow: var(--shadow-2); }
.jm-cover img { width: 100%; height: 100%; display: block; object-fit: cover; }
.jm-title { font-size: 23px; letter-spacing: -.02em; padding-right: 34px; }
.jm-sub { margin-top: 7px; color: var(--text-2); font-size: 13.5px; }
.jm-badges { margin-top: 11px; display: flex; flex-wrap: wrap; gap: 6px; }
.jm-links { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 9px; }

.jm-price { padding: 16px; border-radius: var(--radius-l); border: 1px solid #ffe2d3; background: linear-gradient(135deg, #fff7f2 0%, #fff 62%); }
.jm-price .lbl { font-size: 12.5px; color: var(--text-3); }
.jm-price .num { font-size: 28px; font-weight: 800; color: var(--accent); letter-spacing: -.03em; line-height: 1.25; }
.jm-price .num small { font-size: 14px; font-weight: 700; }
.jm-price .na { font-size: 14px; color: var(--text-3); font-weight: 600; }
.jm-price .note { font-size: 12px; color: var(--text-3); margin-top: 5px; line-height: 1.65; }
.jm-acts { display: flex; align-items: center; gap: 8px; margin-top: 13px; }
.jm-acts .btn-block { flex: 1; }

/* ---------- 关键参数条：8 项一眼可见（完整字段仍在下方著录信息里） ---------- */
.jm-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); gap: 1px; margin-top: 16px;
  background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.jm-fact { background: rgba(255, 255, 255, .92); padding: 10px 12px; }
.jm-fact .k { font-size: 11.5px; color: var(--text-3); }
.jm-fact .v { font-size: 13px; font-weight: 650; margin-top: 2px; word-break: break-all; }
.jm-fact .v .na { font-weight: 500; }
.jm-fact-note { font-size: 12px; color: var(--text-3); margin-left: 5px; font-weight: 500; }
.jm-top .guest-note { margin-top: 14px; }

/* ---------- 两栏正文 ---------- */
.jm-body { display: grid; grid-template-columns: minmax(0, 1fr) 306px; gap: 22px; padding: 18px 24px 24px; }
.jm-main { min-width: 0; }
.jm-sec { margin-bottom: 18px; }
.jm-sec-h { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; margin-bottom: 10px; }
.jm-sec-h::before { content: ''; flex: none; width: 3px; height: 14px; border-radius: 2px; background: var(--grad-primary); }
.jm-sec .kv-grid { margin-top: 0; }
/* 文本块两列铺开：长信息表竖着堆会「看不到头」，两列能多看见几个区块 */
.jm-grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 0 22px; align-items: start; }
.jm-grid2 .jm-sec { break-inside: avoid; }
.jm-sec-b .jcard-tags { margin-top: 0; }

/* ---------- 右栏：同方向推荐 / 联系方式 ---------- */
.jm-side { align-self: start; position: sticky; top: -1px; }
.jm-sidecard { padding: 14px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.jm-sidecard--plain { background: #fff; }
.jm-sidecard .jm-sec-h { font-size: 13.5px; margin-bottom: 9px; }
.jm-rel { display: flex; flex-direction: column; gap: 9px; }
.jm-rel .rel-card { padding: 11px 12px; }
.jm-contact { font-size: 12px; color: var(--text-3); line-height: 1.75; }
.jm-contact--kv { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); color: var(--text-2); }
.jm-contact--kv span { font-weight: 650; text-align: right; }

/* ---------- 常驻底部操作条 ---------- */
.jm-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 24px; border-top: 1px solid var(--border); background: #fff; }
.jm-hint { font-size: 11.5px; color: var(--text-3); }
.jm-foot-acts { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- 加载 / 出错 ---------- */
.jm-loading { padding: 24px; }
.jm-err { padding: 46px 24px; text-align: center; color: var(--text-2); }
.jm-err .ico { font-size: 30px; margin-bottom: 8px; }
.jm-err h4 { font-size: 16px; margin-bottom: 6px; }

@media (max-width: 1000px) {
  .jm-head { grid-template-columns: 104px minmax(0, 1fr); }
  .jm-cover { width: 104px; height: 140px; }
  .jm-price { grid-column: 1 / -1; }
  .jm-body { grid-template-columns: 1fr; }
  .jm-side { position: static; }
}
@media (max-width: 700px) {
  .jm-top { padding: 16px 14px 12px; }
  .jm-title { font-size: 19px; padding-right: 30px; }
  .jm-body { grid-template-columns: 1fr; gap: 14px; padding: 14px; }
  .jm-grid2 { grid-template-columns: 1fr; }
  .jm-foot { padding: 10px 14px; }
  .jm-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .jm-mask, .jm-panel { animation: none; }
}

/* ================= 2026-10-18 前台筛选改版（叠加段，不改上方令牌） ================= */
/* 专区内红色提示条（核心 / SCI·EI 等业务警示文案） */
.zone-notice {
  margin: 10px 0 2px;
  text-align: center;
  font-size: 13.5px;
  font-weight: 700;
  color: #e0384f;
  background: rgba(224, 56, 79, 0.07);
  border: 1px solid rgba(224, 56, 79, 0.25);
  border-radius: 8px;
  padding: 8px 12px;
}
/* 刊号下拉：点击后向下展开的**通栏**选项云（2026-10-18 参照「行业/传刊目录」样式）：
   占满面板整行宽、选项多行铺排、白底描边小方块、选中变主色 */
.serial-pop {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.16);
  padding: 10px 12px;
}
.serial-pop .sp-head { font-size: 12.5px; font-weight: 700; margin-bottom: 8px; }
.serial-pop .sp-list {
  display: flex; flex-wrap: wrap; gap: 8px;
  max-height: 280px; overflow: auto;
  justify-content: flex-start; align-content: flex-start;
}
.serial-pop .sp-list .fchip {
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  padding: 4px 11px;
}
.serial-pop .sp-list .fchip:hover { border-color: var(--primary); color: var(--primary-600); }
.serial-pop .sp-list .fchip.on { background: var(--primary); border-color: var(--primary); color: #fff; }
.serial-pop .sp-list .fchip i {
  font-style: normal;
  margin-left: 4px;
  font-size: 10.5px;
  color: var(--text-3);
}
.serial-pop .sp-list .fchip.on i { color: rgba(255, 255, 255, .8); }
.serial-pop .sp-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  border-top: 1px dashed var(--border);
  padding-top: 6px;
}
.serial-pop .sp-foot .lnk { color: var(--accent); cursor: pointer; font-size: 12px; }
/* 期刊卡片精简后的第二行（去出刊/影响因子/页码）与右侧（去收录/批次）不另立类名，沿用原结构 */
/* 独著/合著、会议/课题 大页签：两个等宽大按钮（业务截图样式） */
.seg.seg-big {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  background: transparent;
  border: 0;
  padding: 0;
}
.seg.seg-big button {
  height: 44px;
  font-size: 14.5px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--panel);
  color: var(--text-2);
}
.seg.seg-big button.on {
  background: rgba(240, 130, 60, 0.12);
  border-color: #e0823c;
  color: #e0823c;
  font-weight: 700;
}
/* 期刊编辑弹窗：网页 80% 宽 + 「单栏堆叠卡片 × 卡内固定 4 列」（2026-10-18 第二次重排）
   为什么不是左右两栏卡片：分组高度差太大（基本信息 12 项 vs 外部链接 2 项）而卡片不能拆开跨栏，
   「投稿限制与要求」一张（7 个长文本框）就占掉一栏的一半，另一栏底部必然空 400px 左右；
   按高度贪心分配能压小差值，却会把靠后的组塞到前面、填报顺序乱掉。
   单栏 + 卡内固定 4 列：所有卡片共用一套列节奏，纵向永远对齐，没有跨栏空洞。
   ⚠️ 这里的 .form-sec 只作用于期刊编辑弹窗；其他集合仍用基础 .form-grid（不受影响）。 */
.modal-panel.w80 { width: 80vw; max-width: 1680px; max-height: calc(100vh - 32px); }
.modal-panel.w80 .modal-body { padding: 16px 20px 20px; background: var(--surface-2); }
.form-sec-grid { display: flex; flex-direction: column; gap: 14px; }
.form-sec { min-width: 0; border: 1px solid var(--border); border-radius: 12px; background: #fff; overflow: hidden; }
.form-sec .form-sec-t {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
/* 组标题前的小色条，让 7 张卡片的分区一眼可辨 */
.form-sec .form-sec-t::before { content: ''; flex: 0 0 auto; width: 3px; height: 13px; border-radius: 2px; background: var(--primary); }
.modal-panel.w80 .form-sec .form-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 14px;
  padding: 14px;
}
/* 两档宽度：1 格（标量）/ 整行（长文本、标签组、显式 span2）。
   不做「2 格」这一档 —— 卡片降到 2 列时 2 格会变成整行、4 列时又要凑对，
   同一份 DOM 在不同宽度下表现不一致就会错位。 */
.modal-panel.w80 .form-sec .form-grid > .field { min-width: 0; }
.modal-panel.w80 .form-sec .form-grid > .field.fd-w3,
.modal-panel.w80 .form-sec .form-grid > .field.span2 { grid-column: 1 / -1; }
/* 标签固定一行高：标签长短不一也把下面的控件压在同一条水平线上 */
.modal-panel.w80 .form-sec .field > label {
  display: flex;
  align-items: center;
  min-height: 18px;
  line-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.modal-panel.w80 .form-sec .field > .input,
.modal-panel.w80 .form-sec .field > .select { width: 100%; height: 36px; }
.modal-panel.w80 .form-sec .field > .textarea { min-height: 76px; }
.modal-panel.w80 .form-sec .fchips { align-content: flex-start; min-height: 34px; }
/* 响应式：<1100px 时 4 列会让每格掉到 200px 以下，降到 2 列（长文本仍是整行） */
@media (max-width: 1100px) {
  .modal-panel.w80 .form-sec .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .modal-panel.w80 { width: calc(100vw - 16px); }
}

/* 期刊标签行右端并排「选择刊号」按钮（2026-10-18）：chips 占满剩余宽度（hscroll 内部滚动），
   按钮固定在右端不随 chips 滚动，垂直居中对齐 */
.frow-flex { display: flex; align-items: center; gap: 12px; min-width: 0; }
.frow-flex > .fchips { flex: 1 1 auto; min-width: 0; }
.frow-flex > .select { flex: 0 0 auto; }

/* ================= 中图分类查询（2026-10-18） =================
   左栏逐层目录 + 右栏结果/子类列表；分类号用等宽字体，避免「0 / O」「1 / l」看花 */
.clc-searchbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.clc-searchbar .clc-input { position: relative; flex: 0 1 460px; }
.clc-searchbar .clc-input .input { width: 100%; height: 40px; padding-left: 34px; border-radius: 10px; }
.clc-searchbar .clc-input .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-3); display: flex; }
.clc-searchbar .btn { height: 40px; padding: 0 20px; border-radius: 10px; }
.clc-meta { font-size: 12.5px; color: var(--text-3); margin-left: auto; }
.clc-grid { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 16px; align-items: start; }
.clc-tree, .clc-main { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.clc-tree { max-height: 72vh; overflow: auto; }
.clc-tree-t { font-size: 12.5px; font-weight: 700; color: var(--text-2); padding: 2px 6px 8px; border-bottom: 1px dashed var(--border); margin-bottom: 6px; }
.clc-node-h { display: flex; align-items: center; gap: 6px; padding: 5px 8px 5px calc(6px + var(--d) * 14px); border-radius: 7px; cursor: pointer; font-size: 13px; }
.clc-node-h:hover { background: var(--primary-soft); }
.clc-caret { width: 10px; flex: 0 0 10px; color: var(--text-3); font-size: 10px; }
.clc-code {
  flex: 0 0 auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px; font-weight: 700; color: var(--primary-600); background: var(--primary-soft);
  border-radius: 5px; padding: 1px 6px; white-space: nowrap;
}
.clc-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.clc-kids { margin-left: 2px; border-left: 1px dashed var(--border); }
.clc-main { min-height: 320px; }
.clc-crumb { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-3); margin-bottom: 10px; }
.clc-crumb-i { cursor: pointer; }
.clc-crumb-i:hover { color: var(--primary-600); }
.clc-crumb i { font-style: normal; color: var(--border-strong); }
.clc-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.clc-head-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 20px; font-weight: 800; color: var(--primary-600); }
.clc-head-name { flex: 1 1 auto; font-size: 16px; font-weight: 700; }
.clc-list { display: flex; flex-direction: column; }
.clc-row { display: flex; align-items: center; gap: 10px; padding: 8px 8px; border-bottom: 1px dashed var(--border); border-radius: 7px; cursor: pointer; }
.clc-row:hover { background: var(--surface-2); }
.clc-row .clc-path { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.clc-sub { flex: 0 0 auto; font-size: 11.5px; color: var(--text-3); }
.clc-copy { flex: 0 0 auto; font-size: 12px; color: var(--primary-600); background: none; border: 1px solid var(--border-strong); border-radius: 6px; padding: 2px 9px; cursor: pointer; }
.clc-copy:hover { background: var(--primary-soft); border-color: var(--primary); }
.clc-result-t { font-size: 12.5px; color: var(--text-3); margin-bottom: 8px; }
.clc-tops { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.clc-top { display: flex; align-items: baseline; gap: 8px; text-align: left; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); cursor: pointer; transition: .14s; }
.clc-top:hover { border-color: var(--primary); background: var(--primary-soft); }
.clc-top b { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--primary-600); font-size: 14px; }
.clc-top span { flex: 1 1 auto; font-size: 13px; color: var(--text); }
.clc-top i { font-style: normal; font-size: 11.5px; color: var(--text-3); }
.clc-loading, .clc-empty { font-size: 13px; color: var(--text-3); padding: 28px 8px; text-align: center; }
@media (max-width: 900px) {
  .clc-grid { grid-template-columns: 1fr; }
  .clc-tree { max-height: 40vh; }
}

/* ---------- 刊号行二次调整（2026-10-18）：左列「刊号」标签，下拉按钮居内容区首位，
   期刊标签 chips 跟在按钮后横向滚动，行内小标注说明 chips 含义 ---------- */
.frow-flex > .frow-cap { flex: 0 0 auto; white-space: nowrap; font-size: 11px; color: var(--text-3); font-weight: 400; }

/* ---------- 期刊标签行四次微调（2026-10-18）：整行复用 fp-row 三等分栅格，
   「刊号」小格独占第 3 列（与上行「限制出刊时间」同栏对齐），
   标题格式与「期刊标签」一致，按钮复用 fp-date（与「选择年月」同款） ---------- */
.jtag-row .jtag-main { min-width: 0; }
.jtag-row .jtag-main .fchips { min-width: 0; }
.jtag-row .serial-pop { z-index: 60; }

/* ---------- 刊号下拉五次调整（2026-10-18）：
   ① 背景：原 var(--panel) 令牌未定义 → 整条 background 失效呈透明，改实底 var(--surface)；
   ② 展开方式：由悬浮遮盖改为文档流内展开 —— 弹层打开后占据布局空间，把下方期刊列表往下推，不再遮挡；
   ③ 全宽：jtag-row 是三等分栅格，弹层跨满整行（grid-column: 1 / -1） ---------- */
.serial-pop {
  position: static;
  width: 100%;
  margin-top: 8px;
  background: var(--surface);
  box-shadow: none;
}
.jtag-row .serial-pop { grid-column: 1 / -1; }

/* ---------- 弹窗/详情页头部三行速览（2026-10-18）：替代「主办/主管」副标题行 + 徽标行
   第一行 期刊级别/数据收录/出版周期/期刊类别；第二行 当前刊期/出刊时间；第三行 期刊标签 ---------- */
.jhead-rows { margin-top: 8px; display: grid; gap: 7px; }
.jhead-row { display: flex; flex-wrap: wrap; gap: 5px 20px; font-size: 13px; line-height: 1.7; }
.jhr-item { white-space: nowrap; }
.jhr-item .k { color: var(--text-3); font-size: 12px; margin-right: 5px; }
.jhr-item .v { color: var(--text-1); font-weight: 500; }
.jhr-item .v .na, .jhr-item .v.na { font-weight: 400; }
/* 总署/收录链接移到头部右端（价格卡左侧红框位），弹窗与详情页两入口同布局 */
.jm-links { justify-content: flex-end; }
.detail-links { justify-content: flex-end; }

/* ---------- 头部外链纵向排列（2026-10-18）：总署链接 / 收录链接 上下排序、右对齐 ---------- */
.jm-links, .detail-links { flex-direction: column; align-items: flex-end; }

/* ---------- 期刊标签彩色放大（2026-10-18）：头部第三行标签由纯文本（13px、正文色、顿号相连）
   改为圆角彩色 chips：字号放大一号到 14px，6 色按标签顺序轮换，弹窗与详情页两入口共用 ---------- */
.jtag-chip {
  display: inline-block;
  padding: 2px 12px;
  margin-right: 7px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
}
/* 双类选择器（0,2,0）+ 靠后位置，确保压过 .jhr-item .v 的正文色 */
.jtag-chip.jtag-c0 { background: #ffece8; color: #d4380d; }
.jtag-chip.jtag-c1 { background: #e6f4ff; color: #0958d9; }
.jtag-chip.jtag-c2 { background: #e8f8e8; color: #237804; }
.jtag-chip.jtag-c3 { background: #fff3e0; color: #d46b08; }
.jtag-chip.jtag-c4 { background: #f4eaff; color: #722ed1; }
.jtag-chip.jtag-c5 { background: #e6fffb; color: #08979c; }

/* ---------- 头部改版（2026-10-19）：① 删除弹窗「关键参数条」（jm-facts 八格速览，
   信息与五行速览重复）；② 总署/收录链接从五行速览下方移到速览右侧红框位，
   顶部与第二行（国内刊号行）对齐，保持右对齐、上下排序；弹窗与详情页两入口同款 ---------- */
.jm-headflex { display: flex; align-items: flex-start; gap: 18px; }
.jm-headflex .jhead-rows { flex: 1; min-width: 0; }
.jm-links, .detail-links { margin-top: 29px; justify-content: flex-end; }

/* ---------- 订单截图（2026-10-20）：后台「订单管理 → 编辑订单」里替换原「作者简介」 ----------
   2/12 份额的窄列里放缩略图网格（每格约 66px、两列起），点图看大图、点 ✕ 删图；
   状态为「待确认 / 已见刊 / 已上网」时整块置灰、上传按钮 disabled（.off）。 */
.shot-box { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.shot-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 6px; max-height: 150px; overflow-y: auto; }
.shot-item { position: relative; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: #fff; }
.shot-thumb { display: block; width: 100%; height: 62px; object-fit: cover; cursor: zoom-in; }
.shot-tag { position: absolute; left: 0; bottom: 0; padding: 0 6px; height: 18px; line-height: 18px; font-size: 11px; color: #fff; background: rgba(0, 0, 0, .62); border-top-right-radius: 6px; }
.shot-tag[data-tag="定金"] { background: #d46b08; }
.shot-tag[data-tag="尾款"] { background: #0958d9; }
.shot-tag[data-tag="全款"] { background: #237804; }
.shot-tag[data-tag="退款"] { background: #8c8c8c; }
.shot-del { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font-size: 11px; line-height: 18px; text-align: center; cursor: pointer; opacity: 0; transition: opacity .15s; }
.shot-item:hover .shot-del { opacity: 1; }
.shot-add { height: 30px; border: 1px dashed var(--border-strong); border-radius: 6px; background: #fff; color: var(--text-2); font-size: 12.5px; cursor: pointer; }
.shot-add:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.shot-add:disabled { cursor: not-allowed; background: var(--bg-2); color: var(--text-3); }
.shot-hint { font-size: 11.5px; color: var(--text-3); line-height: 1.6; }
.shot-box.off .shot-list { opacity: .5; filter: grayscale(1); }
.shot-viewer { text-align: center; }
.shot-viewer img { max-width: 100%; max-height: 72vh; border-radius: 8px; border: 1px solid var(--border); }
.shot-meta { margin-top: 8px; font-size: 12px; color: var(--text-3); text-align: center; }

/* ---------- 数据归属：录入人（2026-10-20 第 26 条） ----------
   只在主管理员视图出现的一列。姓名过长时省略，完整信息（含最后修改人与时间）在悬停提示里。 */
.owner-tag { display: inline-block; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; font-size: 12.5px; color: var(--text-2); cursor: help; }
.owner-none { color: var(--text-3); cursor: help; }

/* ---------- 刊期/出刊时间「登记时间」前缀（2026-10-20 第 27 条） ----------
   头部速览第四行：后台改过刊期或出刊时间后，值前显示登记日期（如「10.20：」）。
   弱化灰、稍小一号，不与正文值抢视觉；无登记记录（老数据）不渲染该 span。 */
.jhr-item .v .jhr-upd { color: var(--text-3); font-size: 12px; font-weight: 400; }

/* ---------- 顶层浮层 + 订单编辑防误关横幅（2026-10-21 第 29 条） ----------
   .topdialog-host 与 #modal-host 相互独立：编辑弹窗（z-index 200）之上再看大图 / 弹确认框，
   关掉浮层后编辑弹窗原样保留。沿用 .modal-panel 的面板样式，只调层级与宽度上限。 */
.topdialog-host { position: fixed; inset: 0; z-index: 260; display: grid; place-items: center; padding: 24px; }
.topdialog-mask { position: absolute; inset: 0; background: rgba(20, 24, 35, .55); backdrop-filter: blur(3px); animation: fade .18s ease; }
.topdialog-panel { position: relative; width: min(980px, calc(100vw - 48px)); max-height: calc(100vh - 48px); }
.topdialog-panel .shot-viewer img { max-width: 100%; max-height: calc(100vh - 220px); object-fit: contain; }

/* 订单编辑弹窗点空白 → 顶部横幅提醒（橙色警示条，5 秒自动消失，重复触发重置计时并轻微抖动） */
.edit-guard-hint { margin: 12px 22px 0; padding: 10px 14px; border-radius: 10px; background: #fff7ed; border: 1px solid #fdba74; color: #9a3412; font-size: 13px; line-height: 1.6; animation: fade .18s ease; }
.edit-guard-hint.shake { animation: guard-shake .35s ease; }
@keyframes guard-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 55% { transform: translateX(5px); } 80% { transform: translateX(-2px); } }

/* ===== 2026-10-21 第 32 条：数据看板「管理员业绩面板」（叠加段，不改令牌） ===== */
.perf-wrap { overflow-x: auto; }
.perf-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.perf-table th, .perf-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.perf-table thead th { color: var(--text-3); font-size: 12.5px; font-weight: 600; background: var(--surface-3); }
.perf-table tbody th { font-weight: 500; color: var(--text); }
.perf-table td { font-variant-numeric: tabular-nums; color: var(--text-2); }
.perf-table tr.perf-backlog td, .perf-table .perf-warn { color: var(--warn); font-weight: 600; }
.perf-note { margin-top: 10px; font-size: 12.5px; line-height: 1.8; color: var(--text-3); }

/* ===== 2026-10-22：看板「订单状态分布」行可点击 → 跳订单管理按状态过滤（叠加段） ===== */
.bar-row.is-link { cursor: pointer; border-radius: 6px; transition: background .12s ease; }
.bar-row.is-link:hover { background: var(--surface-3); }
.bar-row.is-link:hover .bar-fill { filter: brightness(1.08); }

/* ===== 2026-10-22 第 34 条：订单看板「圆盘式视图」（5 磁贴 + 状态条整合为环形图，叠加段） ===== */
.ord-donut { display: grid; grid-template-columns: auto 1fr; gap: 8px 28px; align-items: center; margin-top: 6px; }
.ord-donut-side { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ord-donut-svg { width: 224px; height: 224px; display: block; }
.ord-donut-svg .donut-seg { cursor: pointer; transition: stroke-width .14s ease, opacity .14s ease; }
.ord-donut-svg .donut-seg:hover { stroke-width: 30; opacity: .92; }
.ord-donut-svg .donut-n { font-size: 30px; font-weight: 760; fill: var(--text); letter-spacing: -0.02em; }
.ord-donut-svg .donut-lbl { font-size: 11.5px; fill: var(--text-3); }
.ord-dlegend { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 6px 18px; align-content: center; }
.ord-dleg { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; cursor: pointer; transition: background .12s ease; }
.ord-dleg:hover { background: var(--surface-3); }
.ord-dleg .dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.ord-dleg .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; color: var(--text-2); }
.ord-dleg .pct { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ord-dleg .n { font-size: 14.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ord-dleg.is-warn .name, .ord-dleg.is-warn .n { color: var(--danger); }
.ord-dleg.is-zero { opacity: .5; }
.ord-dchips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ord-dchip { display: flex; align-items: baseline; gap: 6px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); }
.ord-dchip .lbl { font-size: 12px; color: var(--text-3); }
.ord-dchip .val { font-size: 15px; font-weight: 740; }
.ord-dchip.is-warn { background: #fff5f6; border-color: #ffd9de; }
.ord-dchip.is-warn .lbl, .ord-dchip.is-warn .val { color: var(--danger); }
@media (max-width: 900px) { .ord-donut { grid-template-columns: 1fr; } .ord-dlegend { grid-template-columns: repeat(2, 1fr); } }

/* ===== 2026-10-22：圆盘即时 tooltip（替代原生 title 的 ~1s 延迟，叠加段） ===== */
.ord-tip { position: fixed; z-index: 300; pointer-events: none; background: #23293a; color: #fff;
  font-size: 12.5px; line-height: 1.4; padding: 6px 11px; border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22); white-space: nowrap; }

/* ===== 2026-10-22 第 35 条：写作提醒徽章 / 提醒清单行可点跳订单管理（叠加段） ===== */
.ord-dchip.is-link { cursor: pointer; transition: box-shadow .15s ease, transform .15s ease; }
.ord-dchip.is-link:hover { box-shadow: 0 3px 12px rgba(224, 32, 82, .16); transform: translateY(-1px); }
.ord-ov.is-link { cursor: pointer; transition: filter .15s ease; }
.ord-ov.is-link:hover { filter: brightness(.97); }
.owarn-clear { border: 0; background: none; padding: 0 2px; margin-left: 4px; font-size: 12px;
  color: var(--danger); cursor: pointer; }
.owarn-clear:hover { text-decoration: underline; }

/* ===== 2026-10-22 第 36 条：业绩面板圆盘视图（日/周/月/年/累计 收款构成环，叠加段） ===== */
.perf-donuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.perf-dcell { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--surface-2);
  display: flex; flex-direction: column; align-items: center; gap: 6px; }
.perf-dhead { width: 100%; display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; color: var(--text-3); }
.perf-dhead b { font-size: 14px; color: var(--text); }
.perf-dsvg { width: 132px; height: 132px; display: block; }
.perf-dseg { transition: stroke-width .14s ease, opacity .14s ease; }
.perf-dseg:hover { stroke-width: 18; opacity: .92; }
.perf-damt { font-size: 15px; font-weight: 740; fill: var(--text); letter-spacing: -0.02em; }
.perf-dcnt { font-size: 10px; fill: var(--text-3); }
.perf-dprofit { font-size: 12.5px; color: var(--text-3); }
.perf-dprofit b { color: #059669; font-weight: 700; }
.perf-dlegs { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px;
  font-size: 11.5px; color: var(--text-3); }
.perf-dleg .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
.perf-dleg b { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }
.perf-dleg.is-zero { opacity: .55; }

/* ===== 2026-10-22 第 37 条：业绩圆盘扇区可点 + 即时提示（叠加段） ===== */
.perf-dseg { cursor: pointer; }

/* ===== 2026-10-29 第 42 条：登录闸门（未登录时整页只显示登录窗口） ===== */
.gate-wrap { min-height: 100vh; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--bg-grad-a), var(--bg-grad-b)); padding: 24px; }
.gate-card { width: min(420px, 100%); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-l);
  padding: 30px 28px 26px; box-shadow: 0 12px 44px rgba(20, 30, 80, .09); }
.gate-mark { font-size: 34px; text-align: center; line-height: 1; }
.gate-title { text-align: center; margin: 10px 0 18px; font-size: 20px; color: var(--text); }
#gateSubmit { margin-top: 4px; }

/* ===== 2026-11-07 第 44 条：密码框「小眼睛」可见切换 ===== */
.pass-wrap { position: relative; }
.pass-wrap .input { width: 100%; padding-right: 42px; }
.pass-eye { position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  border: none; background: transparent; cursor: pointer; font-size: 15px; line-height: 1;
  padding: 5px 6px; color: var(--mut); border-radius: 6px; user-select: none; }
.pass-eye:hover { background: rgba(102, 126, 234, .12); }

/* ===== 2026-11-08 第 46 条：会员管理 · 密码列（查看 / 重置） ===== */
.pwd-cell { white-space: nowrap; }
.pwd-cell [data-pwv] { display: inline-block; min-width: 64px; letter-spacing: 1px;
  color: var(--text-2); vertical-align: middle; }
.pwd-cell .btn { height: 24px; padding: 0 8px; font-size: 12px; vertical-align: middle; }
#memTable td:last-child .btn { margin: 2px 4px 2px 0; }