/* ==========================================================================
   广州维恩基因科技有限公司 — 全站样式
   设计基调：简约大气 / 科研克制 / 大留白 / 单一强调色
   ========================================================================== */

:root {
  --ink: #10161c;
  --ink-2: #3d4854;
  --ink-3: #6b7787;
  --line: #e4e8ec;
  --line-2: #f0f3f5;
  --bg: #ffffff;
  --bg-2: #f7f9fa;
  --brand: #c1272d;
  --brand-deep: #8f1c21;
  --brand-soft: #fbecee;
  --brand-2: #0d6bb0;
  --accent: #0d6bb0;
  --radius: 4px;
  --maxw: 1360px;
  --shadow: 0 1px 2px rgba(16, 22, 28, .04), 0 12px 32px rgba(16, 22, 28, .06);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ---------- 布局 ---------- */
.wrap {
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  /* 左右留白随视口平滑变化：窄屏 22px → 宽屏 40px，避免断点处内容宽度突变 */
  padding: 0 clamp(22px, 3vw, 40px);
}
.section { padding: 96px 0; }
.section--tint { background: var(--bg-2); }
.section--tight { padding: 72px 0; }

.eyebrow {
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 600;
  margin: 0 0 14px;
}
.h1 { font-size: 46px; line-height: 1.28; font-weight: 600; margin: 0 0 20px; letter-spacing: -.01em; }
.h2 { font-size: 34px; line-height: 1.35; font-weight: 600; margin: 0 0 16px; letter-spacing: -.01em; }
.h3 { font-size: 21px; font-weight: 600; margin: 0 0 10px; }
.lead { font-size: 18px; color: var(--ink-2); margin: 0 0 28px; max-width: 720px; }
.muted { color: var(--ink-3); }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }
.rule { width: 48px; height: 2px; background: var(--brand); margin: 0 0 28px; }
.center .rule { margin-left: auto; margin-right: auto; }

/* ---------- 顶部导航 ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav__in { display: flex; align-items: center; height: 82px; gap: 40px; }
.brand { display: flex; align-items: center; gap: 12px; }
/* 导航 logo 放大：40px → 52px，视觉分量与 82px 导航高度匹配 */
.brand__logo { height: 52px; width: auto; display: block; transition: transform .28s cubic-bezier(.2,.7,.3,1); }
.brand:hover .brand__logo { transform: scale(1.04); }
.brand__logo--light { filter: brightness(0) invert(1); opacity: .92; }
.brand__mark {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 700; letter-spacing: -.02em;
}
.brand__txt { line-height: 1.25; }
.brand__name { font-size: 16px; font-weight: 600; }
.brand__sub { font-size: 11px; color: var(--ink-3); letter-spacing: .06em; }

.nav__links { display: flex; gap: 34px; margin-left: auto; font-size: 15px; }
/* 菜单 hover：字重加深 + 下划线自左向右展开 + 轻微上浮 */
.nav__links a {
  position: relative; color: var(--ink-2); padding: 6px 0; font-weight: 500;
  transition: color .24s ease, font-weight .24s ease, transform .24s cubic-bezier(.2,.7,.3,1);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--brand); border-radius: 2px;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .28s cubic-bezier(.2,.7,.3,1);
}
.nav__links a:hover { color: var(--brand); font-weight: 700; transform: translateY(-1px); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__links a.on { color: var(--brand); font-weight: 700; }
.nav__links a.on::after { transform: scaleX(1); }

.nav__actions { display: flex; align-items: center; gap: 12px; }
.nav__toggle { display: none; background: none; border: 0; font-size: 22px; cursor: pointer; color: var(--ink); }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 24px; border-radius: var(--radius);
  font-size: 15px; font-weight: 500; border: 1px solid transparent;
  cursor: pointer; transition: .2s; white-space: nowrap;
}
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-deep); }
.btn--ghost { border-color: var(--line); color: var(--ink); background: #fff; }
.btn--ghost:hover { border-color: var(--brand); color: var(--brand); }
.btn--sm { height: 36px; padding: 0 16px; font-size: 14px; }
.btn--block { width: 100%; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--bg-2); }
.hero__grid {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px;
  align-items: center;
  /* 只设上下内边距：左右沿用 .wrap，保证与其他版块对齐 */
  padding-top: 104px; padding-bottom: 112px;
}
.hero h1 { font-size: 52px; }
.hero__cta { display: flex; gap: 14px; margin-top: 36px; flex-wrap: wrap; }
.hero__stats { display: flex; gap: 56px; margin-top: 64px; padding-top: 34px; border-top: 1px solid var(--line); }
.stat__n { font-size: 32px; font-weight: 600; color: var(--brand); letter-spacing: -.02em; }
.stat__l { font-size: 13px; color: var(--ink-3); margin-top: 2px; }

.hero__art {
  position: relative; aspect-ratio: 4 / 3.2; border-radius: 8px; overflow: hidden;
  background:
    radial-gradient(120% 120% at 22% 18%, #fbdfe1 0%, rgba(251,223,225,0) 58%),
    radial-gradient(90% 90% at 82% 78%, #dcebf6 0%, rgba(220,235,246,0) 62%),
    linear-gradient(150deg, #c1272d 0%, #a01f3c 48%, #0d6bb0 100%);
  box-shadow: var(--shadow);
}
.hero__art::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 34%, rgba(255,255,255,.5) 0 3px, transparent 4px),
    radial-gradient(circle at 62% 22%, rgba(255,255,255,.34) 0 5px, transparent 6px),
    radial-gradient(circle at 74% 62%, rgba(255,255,255,.4) 0 4px, transparent 5px),
    radial-gradient(circle at 44% 72%, rgba(255,255,255,.3) 0 6px, transparent 7px),
    radial-gradient(circle at 20% 68%, rgba(255,255,255,.26) 0 3px, transparent 4px);
}

/* ---------- 卡片网格 ---------- */
.cards { display: grid; gap: 28px; grid-template-columns: repeat(3, 1fr); }
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.cards--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  padding: 34px 30px; transition: .25s;
}
.card:hover { border-color: #f0ccd0; box-shadow: var(--shadow); transform: translateY(-3px); }
.card__ic {
  width: 46px; height: 46px; border-radius: 6px; background: var(--brand-soft);
  display: grid; place-items: center; color: var(--brand); margin-bottom: 20px;
}
.card p { color: var(--ink-2); font-size: 15px; margin: 0; }
.card__no { font-size: 12px; letter-spacing: .14em; color: var(--ink-3); }

/* ---------- 首页板块 ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.bars { display: grid; gap: 14px; }
.bar { height: 4px; background: var(--line-2); border-radius: 2px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--brand); width: 0; transition: width 1.2s cubic-bezier(.2,.8,.2,1); }

.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.checklist li { position: relative; padding-left: 26px; color: var(--ink-2); font-size: 15px; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: 11px; width: 12px; height: 7px;
  border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: rotate(-45deg);
}

.tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.tag {
  font-size: 13px; padding: 6px 14px; border-radius: 100px;
  background: var(--bg-2); color: var(--ink-2); border: 1px solid var(--line);
}

/* ---------- 流程 ---------- */
.flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: f; }
.flow__i { padding: 30px 26px; position: relative; border-left: 1px solid var(--line); }
.flow__i:first-child { border-left: 0; }
.flow__n { font-size: 13px; color: var(--brand); font-weight: 600; letter-spacing: .1em; }
.flow__i h4 { margin: 10px 0 8px; font-size: 17px; font-weight: 600; }
.flow__i p { margin: 0; font-size: 14px; color: var(--ink-3); }

/* ---------- 表单 ---------- */
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 14px; color: var(--ink-2); margin-bottom: 7px; font-weight: 500; }
.field input, .field textarea, .field select {
  width: 100%; height: 46px; padding: 0 14px; font-size: 15px; font-family: inherit;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink);
  transition: .2s;
}
.field textarea { height: auto; padding: 12px 14px; line-height: 1.7; resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(193,39,45,.09);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.form-note { font-size: 13px; color: var(--ink-3); margin-top: 14px; }

.alert { padding: 12px 14px; border-radius: var(--radius); font-size: 14px; margin-bottom: 18px; display: none; }
.alert--err { background: #fdf0ef; color: #a33a2c; border: 1px solid #f3d6d2; }
.alert--ok { background: var(--brand-soft); color: var(--brand-deep); border: 1px solid #f0ccd0; }
.alert.show { display: block; }

/* ---------- 登录弹层 ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: none; }
.modal.open { display: block; }
.modal__mask { position: absolute; inset: 0; background: rgba(16,22,28,.5); backdrop-filter: blur(2px); }
.modal__box {
  position: relative; width: 100%; max-width: 420px; margin: 8vh auto 0;
  background: #fff; border-radius: 8px; padding: 38px 36px 32px; box-shadow: 0 30px 80px rgba(0,0,0,.24);
}
.modal__close {
  position: absolute; top: 14px; right: 16px; background: none; border: 0;
  font-size: 22px; color: var(--ink-3); cursor: pointer; line-height: 1;
}
.modal__title { font-size: 24px; font-weight: 600; margin: 0 0 4px; }
.modal__sub { font-size: 14px; color: var(--ink-3); margin: 0 0 26px; }
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.tabs button {
  flex: 1; background: none; border: 0; padding: 11px 0; font-size: 15px; font-family: inherit;
  color: var(--ink-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs button.on { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }

.userchip {
  display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--ink-2);
  padding: 5px 6px 5px 12px; border: 1px solid var(--line); border-radius: 100px;
}
.userchip b { font-weight: 600; color: var(--ink); }
.avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--brand-soft); color: var(--brand);
  display: grid; place-items: center; font-size: 13px; font-weight: 600;
}

/* ---------- 页头 ---------- */
.pagehead { background: var(--bg-2); padding: 74px 0 66px; border-bottom: 1px solid var(--line); }

/* ---------- 联系 ---------- */
.info { display: grid; gap: 22px; }
.info__i { display: flex; gap: 16px; padding-bottom: 22px; border-bottom: 1px solid var(--line-2); }
.info__i:last-child { border-bottom: 0; padding-bottom: 0; }
.info__k { font-size: 13px; color: var(--ink-3); letter-spacing: .06em; margin-bottom: 3px; }
.info__v { font-size: 16px; color: var(--ink); font-weight: 500; }

.mapbox {
  aspect-ratio: 16 / 9; background: #eef2f4; border-radius: 6px; position: relative; overflow: hidden;
  background-image:
    linear-gradient(rgba(13,107,176,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(193,39,45,.08) 1px, transparent 1px);
  background-size: 44px 44px;
  display: grid; place-items: center;
}
.mapbox__pin { text-align: center; color: var(--brand); }
.mapbox__pin svg { margin: 0 auto 8px; }
.mapbox__pin span { font-size: 13px; color: var(--ink-2); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative;
  font-size: 17px; font-weight: 500;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 8px; top: 18px; font-size: 22px; color: var(--brand); font-weight: 300;
}
.faq details[open] summary::after { content: "−"; }
.faq p { margin: 0 0 22px; color: var(--ink-2); font-size: 15px; }

/* ---------- 时间线 ---------- */
.tl { position: relative; padding-left: 30px; }
.tl::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 1px; background: var(--line); }
.tl__i { position: relative; padding-bottom: 34px; }
.tl__i::before {
  content: ""; position: absolute; left: -30px; top: 7px; width: 11px; height: 11px;
  border-radius: 50%; background: #fff; border: 2px solid var(--brand);
}
.tl__y { font-size: 13px; color: var(--brand); font-weight: 600; letter-spacing: .08em; }
.tl__i h4 { margin: 4px 0 6px; font-size: 17px; font-weight: 600; }
.tl__i p { margin: 0; font-size: 14.5px; color: var(--ink-2); }

/* ---------- CTA ----------
   原为大面积红色渐变块，视觉压迫感强、与「简约大气 / 科研克制」的基调冲突。
   改为浅色底 + 细描边 + 左侧品牌色竖条：保留强调色，但整体清爽通透。 */
.cta {
  background: linear-gradient(180deg, var(--bg-2) 0%, #fff 100%);
  border-top: 1px solid var(--line-2);
  color: var(--ink);
}
.cta h2 { color: var(--ink); }
.cta p { color: var(--ink-2); max-width: 620px; }
/* 保持 .wrap 的左右内边距对称，否则标题与装饰线会整体左偏 */
.cta .center { position: relative; }
.cta .center::before {
  content: ""; position: absolute; left: 50%; top: 4px; width: 40px; height: 3px;
  background: var(--brand); border-radius: 3px;
  transform: translateX(-50%);
}
.cta .btn--ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.cta .btn--ghost:hover { border-color: var(--brand); color: var(--brand); background: #fff; }
.cta .btn--primary { box-shadow: 0 8px 20px rgba(193, 39, 45, .16); }

/* ---------- 面包屑 ---------- */
.crumb { font-size: 13.5px; color: var(--ink-3); padding: 20px 0 0; display: flex; gap: 9px; flex-wrap: wrap; }
.crumb a:hover { color: var(--brand); }
.crumb .cur { color: var(--ink-2); }

/* ---------- 标签 / 药丸 ---------- */
.phead__tags { display: flex; gap: 10px; flex-wrap: wrap; }
.pill {
  display: inline-block; font-size: 13px; padding: 5px 14px; border-radius: 100px;
  background: var(--brand); color: #fff; font-weight: 500;
}
.pill--ghost { background: transparent; color: var(--brand); border: 1px solid var(--brand); }

/* ---------- 参数表 ---------- */
.spec { margin-top: 18px; border-top: 1px solid var(--line); }
.spec table { width: 100%; border-collapse: collapse; }
.spec th, .spec td { padding: 13px 4px; text-align: left; vertical-align: top; font-size: 14.5px; border-bottom: 1px solid var(--line-2); line-height: 1.65; }
.spec th { width: 34%; font-weight: 500; color: var(--ink-3); padding-right: 14px; }
.spec td { color: var(--ink); }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }

/* ---------- 侧栏吸顶 ---------- */
.sticky { position: sticky; top: 100px; }
@media (max-width: 980px) { .sticky { position: static; } }

/* ---------- 相关条目卡 ---------- */
.cards--3 { grid-template-columns: repeat(3, 1fr); }
.relcard {
  display: block; background: #fff; border: 1px solid var(--line); border-radius: 6px;
  padding: 28px 26px; transition: .25s;
}
.relcard:hover { border-color: #f0ccd0; box-shadow: var(--shadow); transform: translateY(-3px); }
.relcard__type { font-size: 12px; letter-spacing: .12em; color: var(--brand); font-weight: 600; }
.relcard h4 { margin: 10px 0 8px; font-size: 18px; font-weight: 600; }
.relcard p { margin: 0 0 14px; font-size: 14.5px; color: var(--ink-3); line-height: 1.65; }
.relcard__more { font-size: 14px; color: var(--brand); font-weight: 500; }

@media (max-width: 980px) { .cards--3 { grid-template-columns: 1fr; } }

/* ==========================================================================
   成像案例视频
   ========================================================================== */

/* --- 播放按钮 --- */
.vg-play__ring { width: 76px; height: 76px; color: #fff; }
.vg-play__tri { width: 24px; height: 24px; color: #fff; margin-left: 3px; }

/* --- 详情页：舞台 --- */
.vg-sec { padding: 96px 0; background: #05090d; color: #fff; }
.vg-sec .eyebrow { color: #e0575f; }
.vg-sec .rule { background: #c1272d; }
.vg-sec .h2 { color: #fff; }
.vg-sec .lead { color: #8a949d; }

.vg-stage {
  display: grid; grid-template-columns: 1.72fr 1fr; gap: 26px;
  margin-top: 52px; align-items: start;
}

.vg-player {
  position: relative; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden;
  background: #05090d; border: 1px solid #1c262f;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
}
.vg-player__cover, .vg-player__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.vg-player__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(80% 70% at 50% 42%, transparent 30%, rgba(0,0,0,.55) 100%),
    linear-gradient(to top, rgba(0,0,0,.62) 0%, transparent 38%);
}
/* 轻微扫描线，营造仪器屏幕质感 */
.vg-player__scanning {
  position: absolute; inset: 0; pointer-events: none; opacity: .3;
  background: repeating-linear-gradient(
    to bottom, rgba(255,255,255,.045) 0 1px, transparent 1px 3px);
}
.vg-player__hit {
  position: absolute; inset: 0; margin: 0; border: 0; cursor: pointer;
  background: transparent; color: #fff;
  display: grid; place-items: center; gap: 0;
  transition: .3s;
}
.vg-player__hit > svg + svg { grid-area: 1 / 1; }
.vg-player__hit .vg-play__ring { grid-area: 1 / 1; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.vg-player__hit .vg-play__tri { grid-area: 1 / 1; z-index: 1; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.vg-player:hover .vg-player__hit .vg-play__ring { transform: scale(1.1); border-color: #e0575f; }
.vg-player:hover .vg-player__hit .vg-play__tri { transform: scale(1.1); }
.vg-player__hit:focus-visible { outline: 2px solid #e0575f; outline-offset: -2px; }

.vg-player__tag {
  position: absolute; left: 20px; top: 18px; z-index: 2;
  font-size: 12px; letter-spacing: .14em; color: #cbd4dc;
  background: rgba(5,9,13,.62); border: 1px solid rgba(255,255,255,.14);
  padding: 5px 12px; border-radius: 100px; backdrop-filter: blur(6px);
}
/* 无视频源时隐藏播放键，避免看起来像坏了 */
.vg-player.is-nosrc .vg-player__hit { opacity: .5; }

/* --- 详情页：案例目录 --- */
.vg-side {
  background: #0a1219; border: 1px solid #1c262f; border-radius: 8px;
  padding: 18px; display: flex; flex-direction: column; gap: 14px;
  max-height: 100%;
}
.vg-side__head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px 4px; }
.vg-side__k { font-size: 13px; letter-spacing: .14em; color: #6b7787; text-transform: uppercase; }
.vg-side__n { font-size: 13px; color: #8a949d; }
.vg-tabs { display: grid; gap: 6px; }

.vg-tab {
  display: flex; gap: 13px; align-items: center; text-align: left;
  padding: 10px; border-radius: 6px; border: 1px solid transparent;
  background: transparent; cursor: pointer; font-family: inherit;
  transition: .22s; color: inherit;
}
.vg-tab:hover { background: #101a23; border-color: #1c262f; }
.vg-tab.is-on { background: #131f2a; border-color: #c1272d; }
.vg-tab:focus-visible { outline: 2px solid #e0575f; outline-offset: 1px; }
.vg-tab__thumb {
  width: 84px; flex: 0 0 84px; aspect-ratio: 16/10; border-radius: 4px; overflow: hidden;
  background: #05090d; position: relative;
}
.vg-tab__thumb img { width: 100%; height: 100%; object-fit: cover; opacity: .78; transition: .3s; }
.vg-tab.is-on .vg-tab__thumb img { opacity: 1; }
.vg-tab__body { display: grid; gap: 3px; min-width: 0; }
.vg-tab__title {
  font-size: 14.5px; font-weight: 500; color: #d6dde3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vg-tab.is-on .vg-tab__title { color: #fff; }
.vg-tab__meta { font-size: 12.5px; color: #6b7787; }

/* --- 详情页：当前案例说明 --- */
.vg-now {
  margin-top: 34px; padding: 30px 32px;
  border: 1px solid #1c262f; border-radius: 8px; background: #0a1219;
}
.vg-now__meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.vg-meta__cat { font-size: 12.5px; letter-spacing: .1em; color: #e0575f; font-weight: 600; }
.vg-meta__dot { width: 3px; height: 3px; border-radius: 50%; background: #46525e; }
.vg-meta__dur { font-size: 12.5px; color: #6b7787; font-variant-numeric: tabular-nums; }
.vg-now__title { margin: 0 0 8px; font-size: 21px; font-weight: 600; color: #fff; }
.vg-now__desc { margin: 0; font-size: 15px; color: #8a949d; line-height: 1.7; }
.vg-now .tag { background: #101a23; border-color: #1c262f; color: #8a949d; }
.vg-now__note {
  margin: 16px 0 0; font-size: 13px; color: #6b7787; line-height: 1.7;
  padding-left: 12px; border-left: 2px solid #c1272d;
}
.vg-now__note:empty { display: none; }

/* --- 主页：三卡横向 --- */
.vg-home { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.vg-home__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 42px; }
.vg-hcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }

.vg-hcard { display: block; }
.vg-hcard__media {
  position: relative; display: block; aspect-ratio: 16/10; border-radius: 6px;
  overflow: hidden; background: #05090d; border: 1px solid #e4e8ec;
  transition: .3s;
}
.vg-hcard__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .3s;
  opacity: .88;
}
.vg-hcard:hover .vg-hcard__media { border-color: #c1272d; box-shadow: var(--shadow); }
.vg-hcard:hover .vg-hcard__media img { transform: scale(1.06); opacity: 1; }
.vg-hcard__scan {
  position: absolute; inset: 0; opacity: .22; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0 1px, transparent 1px 3px);
}
.vg-hcard__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(5, 9, 13, .28); transition: .3s;
}
.vg-hcard:hover .vg-hcard__play { background: rgba(5, 9, 13, .5); }
.vg-hcard__play .vg-play__ring { width: 54px; height: 54px; transition: .3s; }
.vg-hcard__play .vg-play__tri { width: 17px; height: 17px; grid-area: 1/1; margin: 0; }
.vg-hcard__play .vg-play__ring { grid-area: 1/1; }
.vg-hcard:hover .vg-hcard__play .vg-play__ring { transform: scale(1.12); }
.vg-hcard:hover .vg-hcard__play .vg-play__tri { transform: scale(1.12); }
.vg-hcard__dur {
  position: absolute; right: 10px; bottom: 10px;
  font-size: 12px; color: #fff; font-variant-numeric: tabular-nums;
  background: rgba(5,9,13,.66); padding: 3px 9px; border-radius: 4px;
  backdrop-filter: blur(4px);
}
.vg-hcard__cat {
  display: block; margin-top: 16px; font-size: 12px; letter-spacing: .12em;
  color: var(--brand); font-weight: 600;
}
.vg-hcard__title {
  display: block; margin-top: 5px; font-size: 17px; font-weight: 600; color: var(--ink);
  transition: color .2s;
}
.vg-hcard:hover .vg-hcard__title { color: var(--brand); }

@media (max-width: 1080px) {
  .vg-stage { grid-template-columns: 1fr; }
  .vg-hcards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .vg-sec { padding: 68px 0; }
  .vg-hcards { grid-template-columns: 1fr; gap: 30px; }
  .vg-now { padding: 24px 22px; }
}

/* ==========================================================================
   Hero 轮播 banner
   ========================================================================== */
.hg {
  position: relative; border-radius: 8px; overflow: hidden;
  box-shadow: var(--shadow);
  outline: none;
}
.hg:focus-visible { box-shadow: var(--shadow), 0 0 0 3px rgba(193, 39, 45, .28); }

.hg__stage {
  position: relative; aspect-ratio: 4 / 3.2; background: #05090d;
}
.hg-slide {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; transform: scale(1.06);
  transition: opacity .9s ease, transform 6.5s linear;
}
.hg-slide.is-on { opacity: 1; transform: scale(1); z-index: 1; }
.hg-slide img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* 底部说明条 */
.hg-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 56px 24px 22px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: linear-gradient(to top, rgba(3, 7, 11, .88) 0%, rgba(3, 7, 11, .38) 52%, transparent 100%);
  color: #fff;
  opacity: 0; transform: translateY(8px);
  transition: opacity .55s ease .18s, transform .55s ease .18s;
}
.hg-slide.is-on .hg-cap { opacity: 1; transform: translateY(0); }
.hg-cap__tag {
  font-size: 11.5px; letter-spacing: .12em; padding: 4px 11px; border-radius: 100px;
  background: rgba(193, 39, 45, .92); color: #fff; font-weight: 500;
  backdrop-filter: blur(4px);
}
.hg-cap__t { font-size: 15px; font-weight: 500; letter-spacing: .01em; }

/* 扫描线质感 */
.hg-scanning {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .22;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0 1px, transparent 1px 3px);
}

/* 箭头 */
.hg-arrow {
  position: absolute; top: 50%; z-index: 6;
  width: 40px; height: 40px; margin-top: -20px;
  display: grid; place-items: center;
  background: rgba(6, 12, 18, .42); color: #fff;
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%;
  cursor: pointer; backdrop-filter: blur(8px);
  opacity: 0; transition: .28s;
}
.hg-arrow--prev { left: 16px; }
.hg-arrow--next { right: 16px; }
.hg:hover .hg-arrow, .hg:focus-within .hg-arrow { opacity: 1; }
.hg-arrow:hover { background: var(--brand); border-color: var(--brand); }
.hg-arrow:focus-visible { opacity: 1; outline: 2px solid #fff; outline-offset: 2px; }

/* 底部控制条 */
.hg-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 0 24px 64px;
  pointer-events: none;
}
.hg-bar > * { pointer-events: auto; }
.hg-dots { display: flex; align-items: center; gap: 9px; }

.hg-dot {
  position: relative; width: 26px; height: 3px; padding: 0; border: 0;
  background: rgba(255, 255, 255, .3); cursor: pointer;
  border-radius: 2px; transition: .3s;
}
.hg-dot:hover { background: rgba(255, 255, 255, .62); }
.hg-dot.is-on { background: #fff; width: 40px; }
.hg-dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* 自动播放进度条：仅在未暂停时推进 */
.hg-dot::after {
  content: ""; position: absolute; inset: 0;
  background: var(--brand); transform-origin: left center; transform: scaleX(0);
  border-radius: 2px;
}
.hg-dot.is-on::after { animation: hgFill 5.2s linear forwards; }
.hg.is-paused .hg-dot.is-on::after { animation-play-state: paused; }
@keyframes hgFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hg-playpause {
  width: 28px; height: 28px; display: grid; place-items: center;
  background: rgba(6, 12, 18, .42); color: #fff;
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%;
  cursor: pointer; backdrop-filter: blur(8px); transition: .28s;
}
.hg-playpause:hover { background: var(--brand); border-color: var(--brand); }
.hg-playpause:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hg-playpause .hg-i-play { display: none; }
.hg.is-paused .hg-playpause .hg-i-play { display: block; }
.hg.is-paused .hg-playpause .hg-i-pause { display: none; }

/* 说明条与控制条重叠时的可读性：把说明上移 */
.hg-cap { padding-bottom: 74px; }

/* 移动端：箭头常驻更易点 */
@media (max-width: 980px) {
  .hg-arrow { opacity: 1; width: 34px; height: 34px; }
  .hg-arrow--prev { left: 10px; }
  .hg-arrow--next { right: 10px; }
  .hg-cap { padding: 48px 18px 68px; }
  .hg-bar { padding: 0 18px 60px; }
  .hg-dot { width: 20px; }
  .hg-dot.is-on { width: 32px; }
}
@media (max-width: 560px) {
  .hg-cap__t { font-size: 13.5px; }
}

/* ---------- 页脚 ---------- */
/* ---------- 页脚 ----------
   原为近黑底（var(--ink) #10161c）+ 灰白字，视觉沉重、与整站浅色调割裂。
   改为浅灰底 + 深色字 + 细分隔线，与 CTA 一起构成清爽的收尾。 */
.foot { background: var(--bg-2); color: var(--ink-3); padding: 66px 0 30px; font-size: 14px; border-top: 1px solid var(--line); }
.foot__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 44px; }
.foot h5 { color: var(--ink); font-size: 14px; font-weight: 600; margin: 0 0 16px; letter-spacing: .04em; }
.foot a { color: var(--ink-2); display: block; margin-bottom: 9px; transition: color .2s ease; }
.foot a:hover { color: var(--brand); }
.foot p { color: var(--ink-3); }
.foot__bar { border-top: 1px solid var(--line); padding-top: 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); }
.foot__logo .brand__logo { height: 46px; }
.foot__logo .brand__name { color: var(--ink); }
.foot__logo .brand__sub { color: var(--ink-3); }

/* ---------- 响应式 ---------- */
/* 四列卡片在 1180 以下收成两列，避免每列过窄（980 以下统一单列，见下条） */
@media (max-width: 1180px) {
  .cards--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 980px) {
  .hero__grid, .split, .cards, .cards--4, .cards--2, .flow { grid-template-columns: 1fr; }
  .hero__grid { gap: 44px; padding-top: 72px; padding-bottom: 78px; }
  .hero h1, .h1 { font-size: 34px; }
  .h2 { font-size: 26px; }
  .section { padding: 68px 0; }
  .hero__stats { gap: 34px; flex-wrap: wrap; margin-top: 44px; }
  .foot__grid { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .flow__i { border-left: 0; border-top: 1px solid var(--line); }
  .flow__i:first-child { border-top: 0; }
  .wrap { padding: 0 22px; }
  .nav__links {
    display: none; position: absolute; top: 74px; left: 0; right: 0; background: #fff;
    flex-direction: column; gap: 0; padding: 8px 22px 18px; border-bottom: 1px solid var(--line);
  }
  .nav__links.open { display: flex; }
  .nav__links a { padding: 13px 0; border-bottom: 1px solid var(--line-2); }
  .nav__toggle { display: block; margin-left: auto; }
  .nav__actions { order: -1; margin-left: auto; }
}
@media (max-width: 560px) {
  .foot__grid { grid-template-columns: 1fr; }
  .modal__box { margin-top: 5vh; padding: 32px 24px 26px; }
}
/* ==========================================================================
   新闻动态 / 文章板块
   ========================================================================== */

/* 分类切换 */
.np-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
.np__tab {
  padding: 8px 18px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; color: var(--ink-2); font-size: 14px; cursor: pointer;
  font-family: inherit; transition: .22s;
}
.np__tab:hover { border-color: var(--brand); color: var(--brand); }
.np__tab.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.np__tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.np-search { display: flex; gap: 10px; margin-bottom: 34px; }
.np-search input {
  flex: 1; max-width: 360px; padding: 10px 16px;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-family: inherit; font-size: 14px; background: #fff;
}
.np-search input:focus { outline: none; border-color: var(--brand); }

/* 列表 */
.np-list { display: grid; gap: 20px; }
.np {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; transition: .28s; overflow: hidden;
}
.np:hover { border-color: var(--brand); box-shadow: var(--shadow); transform: translateY(-2px); }
.np__hit { display: flex; gap: 0; align-items: stretch; }
.np__cover { flex: 0 0 210px; background: var(--bg-2); }
.np__cover img { width: 100%; height: 100%; object-fit: cover; min-height: 148px; }
.np__body { flex: 1; padding: 22px 26px; min-width: 0; }
.np__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-3); margin-bottom: 10px; }
.np__cat { color: var(--brand); font-weight: 600; letter-spacing: .04em; }
.np__src {
  color: #0a7d38; background: #eaf7ef; border: 1px solid #c9e9d5;
  padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 500;
}
/* 官网资讯：用中性蓝灰，避免与「微信公众号」的绿色徽章混淆 */
.np__src--site { color: #4a5c6b; background: #f2f5f7; border-color: #dde5ea; }
.np__top { color: var(--brand-2); background: #eaf3fa; border: 1px solid #cfe3f2; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; }
.np__t { font-size: 18px; font-weight: 600; margin: 0 0 8px; line-height: 1.45; }
.np__s { margin: 0; color: var(--ink-3); font-size: 14.5px; line-height: 1.7; }
.np__more { display: inline-block; margin-top: 12px; color: var(--brand); font-size: 14px; font-weight: 500; }

/*骨架屏 */
.np--sk { pointer-events: none; }
.skl { height: 15px; border-radius: 3px; background: var(--line-2); margin-bottom: 10px; }
.skl--sm { width: 120px; height: 12px; }
.skl--lg { width: 65%; }
.np--sk .np__body { min-height: 148px; }

.empty { text-align: center; padding: 70px 20px; border: 1px dashed var(--line); border-radius: var(--radius); }
.empty h3 { font-size: 19px; margin: 0 0 8px; }
.empty .btn { margin-top: 20px; }

/* 详情 */
.post { max-width: 780px; margin: 0 auto; padding: 46px 0 20px; }
.crumb { font-size: 13px; color: var(--ink-3); margin-bottom: 26px; }
.crumb a:hover { color: var(--brand); }
.crumb span { margin: 0 8px; color: var(--line); }
.crumb em { font-style: normal; color: var(--brand); }

.post__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); margin-bottom: 14px; }
.post__t { font-size: 34px; line-height: 1.35; font-weight: 600; margin: 0 0 16px; letter-spacing: -.01em; }
.post__lead { font-size: 17px; color: var(--ink-2); margin: 0; }
.post__cover { margin: 30px 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.post__cover img { width: 100%; }

.post__body { margin-top: 34px; font-size: 16.5px; line-height: 1.9; color: var(--ink-2); }
.post__body > * + * { margin-top: 1.1em; }
.post__body h2 { font-size: 22px; font-weight: 600; color: var(--ink); margin: 1.8em 0 .6em; }
.post__body h3 { font-size: 18px; font-weight: 600; color: var(--ink); margin: 1.6em 0 .5em; }
.post__body img { border-radius: var(--radius); margin: 1.2em 0; }
.post__body blockquote {
  margin: 1.4em 0; padding: 14px 20px; border-left: 3px solid var(--brand);
  background: var(--brand-soft); color: var(--ink-2);
}
.post__body blockquote > *:first-child { margin-top: 0; }
.post__body blockquote > *:last-child { margin-bottom: 0; }
.post__body a { color: var(--brand); border-bottom: 1px solid rgba(193,39,45,.35); }
.post__body pre {
  background: var(--ink); color: #d7dee6; padding: 18px 20px;
  border-radius: var(--radius); overflow-x: auto; font-size: 13.5px; line-height: 1.7;
}
.post__body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.post__body :not(pre) > code { background: var(--line-2); padding: 2px 6px; border-radius: 3px; font-size: .9em; }
.post__body table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.post__body th, .post__body td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.post__body th { background: var(--bg-2); font-weight: 600; color: var(--ink); }
.post__body ul, .post__body ol { padding-left: 1.4em; }
.post__body li { margin: .35em 0; }
/* 官网资讯里的小标题用 strong 标记 */
.post__body strong { color: var(--ink); font-weight: 600; }
.post__body p > strong:only-child { font-size: 17px; color: var(--ink); }

.post__note {
  background: var(--bg-2); border-left: 3px solid var(--brand-2);
  padding: 13px 18px; font-size: 14.5px; color: var(--ink-2); border-radius: 0 var(--radius) var(--radius) 0;
}
.post__foot {
  margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--line);
  display: flex; gap: 12px; flex-wrap: wrap;
}

/* 后台 */
.gate {
  display: none; text-align: center; padding: 66px 20px;
  border: 1px dashed var(--line); border-radius: var(--radius);
}
.gate.show { display: block; }
.arow {
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
  padding: 16px 0; border-bottom: 1px solid var(--line-2);
}
.arow:last-child { border-bottom: 0; }
.arow__ops { display: flex; gap: 8px; flex: 0 0 auto; }

.np-compose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.np-panel {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; background: #fff;
}
.np-panel + .np-panel { margin-top: 22px; }
.np-panel h3 { font-size: 18px; font-weight: 600; margin: 0 0 6px; }
.np-panel__sub { font-size: 13.5px; color: var(--ink-3); margin: 0 0 24px; }
.np-area {
  width: 100%; min-height: 190px; padding: 13px 15px; resize: vertical;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-family: inherit; font-size: 14.5px; line-height: 1.75; color: var(--ink);
}
.np-area:focus { outline: none; border-color: var(--brand); }
.np-hint { font-size: 12.5px; color: var(--ink-3); margin: 8px 0 0; }
.wx-row { display: flex; gap: 10px; margin-top: 10px; }
.wx-row input { flex: 1; }
.wx-result { margin-top: 16px; }
.wx-result .alert { margin: 0; }

/* 响应式 */
@media (max-width: 980px) {
  .np__hit { flex-direction: column; }
  .np__cover { flex: none; }
  .np__cover img { min-height: 0; height: auto; aspect-ratio: 16 / 9; }
  .np-compose-grid { grid-template-columns: 1fr; }
  .post__t { font-size: 26px; }
  .np-search input { max-width: none; }
}

/* ==========================================================================
   Hero 全屏查看
   - 原生 Fullscreen API 铺满屏幕；不支持时用 .is-fs +滚动锁定降级
   ========================================================================== */

/* 全屏时锁住页面滚动（降级模式必须；原生全屏时轮播自身不滚动，也一并锁更干净） */
.hg-fs-lock, .hg-fs-lock body { overflow: hidden !important; }

/* 按钮：与播放/暂停同规格 */
.hg-full {
  width: 28px; height: 28px; display: grid; place-items: center;
  background: rgba(6, 12, 18, .42); color: #fff;
  border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%;
  cursor: pointer; backdrop-filter: blur(8px); transition: .28s; flex: 0 0 auto;
}
.hg-full:hover { background: var(--brand); border-color: var(--brand); }
.hg-full:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.hg-full .hg-i-exit { display: none; }
.hg.is-fs .hg-full .hg-i-enter { display: none; }
.hg.is-fs .hg-full .hg-i-exit { display: block; }

/* ---- 全屏态：让画面真正铺满 ---- */
.hg.is-fs {
  position: fixed; inset: 0; z-index: 999;
  width: 100vw; height: 100vh; max-height: 100vh;
  background: #05090d;
  border-radius: 0;
}
.hg.is-fs .hg__stage {
  aspect-ratio: auto; height: 100%; width: 100%;
  border-radius: 0;
}
/* 图片按屏幕比例铺满：contain 保证不裁切主体，cover 保证铺满无黑边 */
.hg.is-fs .hg-slide img {
  width: 100%; height: 100%;
  object-fit: contain;
  background: #05090d;
}
.hg.is-fs .hg-cap {
  padding: 0 0 clamp(28px, 5vh, 56px);
  text-align: center;
}
.hg.is-fs .hg-cap__tag { font-size: clamp(15px, 1.6vw, 20px); }
.hg.is-fs .hg-cap__t { font-size: clamp(19px, 2.4vw, 30px); }

/* 控制条放大居中，便于鼠标操作 */
.hg.is-fs .hg-bar { padding: 0 clamp(18px, 4vw, 60px) clamp(20px, 3.4vh, 40px); }
.hg.is-fs .hg-dot { width: 26px; }
.hg.is-fs .hg-dot.is-on { width: 42px; }
.hg.is-fs .hg-arrow { width: 50px; height: 50px; }
.hg.is-fs .hg-arrow--prev { left: clamp(16px, 3vw, 44px); }
.hg.is-fs .hg-arrow--next { right: clamp(16px, 3vw, 44px); }
.hg.is-fs .hg-full, .hg.is-fs .hg-playpause { width: 34px; height: 34px; }

/* 全屏时不再响应 hover 自动恢复，暂停类效果让位给操作类 */
.hg.is-fs .hg-dot.is-on::after { animation-duration: 5.2s; }

/* 小屏全屏：说明条留足空间，避免压住控制条 */
@media (max-width: 980px) {
  .hg.is-fs .hg-arrow { width: 40px; height: 40px; }
  .hg.is-fs .hg-arrow--prev { left: 10px; }
  .hg.is-fs .hg-arrow--next { right: 10px; }
  .hg.is-fs .hg-cap { padding-bottom: clamp(56px, 9vh, 90px); }
}
@media (max-width: 560px) {
  .hg.is-fs .hg-cap { padding-bottom: clamp(60px, 10vh, 96px); }
  .hg.is-fs .hg-cap__t { font-size: 17px; }
}

/* ==========================================================================
   关注我们 — 页脚二维码三联展示
   风格延续页脚的浅色调：白底卡片 + 细描边，不抢正文内容的注意力
   ========================================================================== */
.qrbar { padding: 52px 0 8px; border-top: 1px solid var(--line); margin-top: 44px; }
.qrbar__hd { text-align: center; margin-bottom: 34px; }
.qrbar__hd h3 {
  font-size: 19px; font-weight: 600; color: var(--ink); margin: 0 0 8px; letter-spacing: .01em;
}
.qrbar__hd p { margin: 0; color: var(--ink-3); font-size: 14px; }

.qrbar__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
  max-width: 860px; margin: 0 auto;
}

.qrcard {
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  padding: 22px 20px 20px; text-align: center;
  transition: border-color .25s ease, transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s ease;
}
.qrcard:hover {
  border-color: #d8c4c5; transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(16, 22, 28, .07);
}
.qrcard__img {
  width: 124px; height: 124px; margin: 0 auto 14px;
  object-fit: contain; display: block; background: #fff;
}
.qrcard__t { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 0 4px; }
/* 「技术资讯 · 活动通知」这类用· 分隔的短语，中间不断行 */
.qrcard__d {
  font-size: 13px; color: var(--ink-3); margin: 0; line-height: 1.6;
  white-space: nowrap;
}
@media (max-width: 900px) and (min-width: 721px) {
  .qrcard { padding: 20px 12px 18px; }
  .qrcard__d { white-space: normal; font-size: 12.5px; }
}

/* ==========================================================================
   右侧浮动客服窗
   默认收起为一个胶囊按钮，点击展开面板；展开时记忆状态到sessionStorage
   ========================================================================== */
.fab {
  position: fixed; right: 24px; bottom: 32px; z-index: 150;
  font-family: inherit;
}
/* --- 收起态：竖排胶囊标签--- */
.fab__tab {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  background: var(--ink); color: #fff; border: 0; cursor: pointer;
  padding: 15px 11px; border-radius: 999px;
  box-shadow: 0 6px 22px rgba(16, 22, 28, .2);
  transition: transform .25s cubic-bezier(.2,.7,.3,1), background .2s ease;
  writing-mode: vertical-rl; text-orientation: upright;
  font-size: 14px; letter-spacing: .16em; font-weight: 500;
}
.fab__tab:hover { transform: translateY(-2px); background: var(--brand-deep); }
.fab__tab svg { width: 19px; height: 19px; writing-mode: horizontal-tb; }
.fab__tab::after {
  content: ""; width: 1px; height: 14px; background: rgba(255,255,255,.3);
}

/* --- 展开态：面板 --- */
.fab__panel {
  width: 320px; background: #fff; border: 1px solid var(--line);
  border-radius: 8px; overflow: hidden;
  box-shadow: 0 18px 50px rgba(16, 22, 28, .16);
  display: none;
}
.fab.is-open .fab__panel { display: block; animation: fabIn .26s cubic-bezier(.2,.7,.3,1); }
.fab.is-open .fab__tab { display: none; }

@keyframes fabIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

.fab__hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px; background: var(--bg-2); border-bottom: 1px solid var(--line);
}
.fab__hd strong { font-size: 15px; color: var(--ink); font-weight: 600; }
.fab__hd span { display: block; font-size: 12px; color: var(--ink-3); font-weight: 400; margin-top: 2px; }
.fab__close {
  background: none; border: 0; cursor: pointer; color: var(--ink-3);
  font-size: 24px; line-height: 1; padding: 0 2px; transition: color .2s;
}
.fab__close:hover { color: var(--ink); }

.fab__body { padding: 18px; }

/* 客服二维码 */
.fab__qr { text-align: center; margin-bottom: 16px; }
.fab__qr img {
  width: 152px; height: 152px; object-fit: contain; display: block;
  margin: 0 auto 9px; border: 1px solid var(--line-2); border-radius: 5px; background: #fff;
}
.fab__qr strong { display: block; font-size: 14px; color: var(--ink); font-weight: 600; }
.fab__qr em { display: block; font-style: normal; font-size: 12.5px; color: var(--ink-3); margin-top: 3px; }

/* 状态行（工作时间） */
.fab__status {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 11px 12px; background: var(--brand-soft); border-radius: 5px; margin-bottom: 14px;
}
.fab__status svg { flex: 0 0 auto; width: 15px; height: 15px; color: var(--brand); margin-top: 2px; }
.fab__status div { min-width: 0; }
.fab__status strong { display: block; font-size: 12.5px; color: var(--brand-deep); font-weight: 600; }
.fab__status span { display: block; font-size: 12.5px; color: var(--ink-2); line-height: 1.6; }

/* 联系方式列表 */
.fab__list { border-top: 1px solid var(--line-2); }
.fab__row {
  display: flex; align-items: center; gap: 11px; padding: 11px 0;
  border-bottom: 1px solid var(--line-2);
}
.fab__row:last-child { border-bottom: 0; padding-bottom: 2px; }
.fab__row > svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--ink-3); }
.fab__row-l { flex: 1; min-width: 0; }
.fab__row-l b { display: block; font-size: 11.5px; font-weight: 500; color: var(--ink-3); letter-spacing: .04em; }
.fab__row-l a, .fab__row-l p {
  display: block; font-size: 14px; color: var(--ink); margin: 1px 0 0;
  font-weight: 500; word-break: break-all;
}
.fab__row a:hover { color: var(--brand); }
.fab__row-act {
  flex: 0 0 auto; font-size: 12.5px; color: var(--brand); text-decoration: none;
  border: 1px solid #e8cfd0; border-radius: 4px; padding: 4px 10px; transition: background .2s;
}
.fab__row-act:hover { background: var(--brand-soft); }

.fab__ft {
  padding: 12px 18px; background: var(--bg-2); border-top: 1px solid var(--line);
  font-size: 12px; color: var(--ink-3); display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.fab__ft a { color: var(--ink-2); }
.fab__ft a:hover { color: var(--brand); }

/* --- 移动端 --- */
@media (max-width: 720px) {
  .qrbar__grid { grid-template-columns: 1fr; gap: 16px; max-width: 320px; }
  .qrcard { display: flex; align-items: center; gap: 16px; text-align: left; padding: 16px 18px; }
  .qrcard__img { width: 84px; height: 84px; margin: 0; flex: 0 0 auto; }
  .fab { right: 14px; bottom: 18px; }
  .fab__panel { width: min(320px, calc(100vw - 28px)); }
  .fab__tab { padding: 13px 9px; font-size: 13px; }
  /*移动端底部可能还有安全区 */
  .fab__tab { padding-bottom: calc(13px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 380px) {
  .fab__panel { width: calc(100vw - 24px); }
  .fab { right: 12px; }
}

/* 休息时段：状态条转中性色（蓝灰），与「在线」的红色区分 */
.fab__status.is-off { background: #f2f5f7; }
.fab__status.is-off strong { color: var(--ink-2); }
.fab__status.is-off svg { color: var(--ink-3); }

/* 移动端首次进入的轻提示：轻微摇一下，不遮挡内容 */
.fab__tab.is-nudge { animation: fabNudge 2.6s ease-in-out; }
@keyframes fabNudge {
  0%, 62%, 100% { transform: none; }
  68% { transform: translateY(-4px); }
  74% { transform: none; }
  80% { transform: translateY(-4px); }
  86% { transform: none; }
}

/* 面板打开时禁止背景滚动（移动端体验更好） */
body.fab-locked { overflow: hidden; }

/* 尊重系统「减少动画」偏好 */
@media (prefers-reduced-motion: reduce) {
  .fab__tab, .qrcard, .nav__links a, .nav__links a::after { transition: none !important; }
  .fab.is-open .fab__panel, .fab__tab.is-nudge { animation: none; }
}

/* ==========================================================================
   后台管理（admin.html）专用
   统一 adm- 命名空间，避免与前台样式互相污染
   ========================================================================== */
.adm { display: grid; grid-template-columns: 208px 1fr; gap: 32px; align-items: start; }
@media (max-width: 900px) { .adm { grid-template-columns: 1fr; gap: 18px; } }

/* --- 侧边导航 --- */
.adm-nav {
  position: sticky; top: 88px; background: #fff; border: 1px solid var(--line);
  border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 2px;
}
@media (max-width: 900px) {
  .adm-nav { position: static; flex-direction: row; overflow-x: auto; padding: 6px; }
}
.adm-nav__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 13px; border: 0; background: none; border-radius: 6px;
  font: inherit; font-size: 14.5px; color: var(--ink-2); cursor: pointer;
  text-align: left; white-space: nowrap; transition: background .18s, color .18s;
}
.adm-nav__item:hover { background: var(--bg-2); color: var(--ink); }
.adm-nav__item.on { background: var(--brand-soft); color: var(--brand-deep); font-weight: 600; }
.adm-nav__item svg { width: 17px; height: 17px; flex: 0 0 auto; }
.adm-nav__badge {
  margin-left: auto; font-size: 11.5px; font-weight: 600; padding: 2px 7px;
  border-radius: 999px; background: var(--line-2); color: var(--ink-2);
}
.adm-nav__item.on .adm-nav__badge { background: #fff; color: var(--brand); }

/* --- 视图切换 --- */
.adm-view { display: none; }
.adm-view.on { display: block; animation: admFade .2s ease; }
@keyframes admFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* --- 面板 --- */
.adm-card {
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 24px; margin-bottom: 20px;
}
.adm-card__hd {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 18px; flex-wrap: wrap;
}
.adm-card__hd h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); }
.adm-card__hd p { margin: 4px 0 0; font-size: 13px; color: var(--ink-3); }

/* --- 表单 --- */
.adm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
@media (max-width: 720px) { .adm-grid2 { grid-template-columns: 1fr; } }
.adm-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.adm-field > label { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.adm-field > label .req { color: #c0392b; margin-left: 2px; }
.adm-field .hint { font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.adm-input, .adm-select, .adm-area {
  width: 100%; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 5px;
  font: inherit; font-size: 14px; color: var(--ink); background: #fff;
  transition: border-color .18s, box-shadow .18s;
}
.adm-input:focus, .adm-select:focus, .adm-area:focus {
  outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(150, 45, 50, .08);
}
.adm-input.err, .adm-select.err, .adm-area.err { border-color: #c0392b; }
.adm-area { min-height: 120px; resize: vertical; line-height: 1.7; }
.adm-err { font-size: 12.5px; color: #c0392b; min-height: 0; }

/* --- 价格输入组 --- */
.adm-price { display: flex; gap: 8px; }
.adm-price .adm-input { flex: 1 1 auto; }
.adm-price .adm-select { flex: 0 0 108px; }

/* --- 图片上传 --- */
.adm-upload {
  border: 1px dashed var(--line); border-radius: 6px; padding: 16px;
  background: var(--bg-2); text-align: center; transition: border-color .2s, background .2s;
}
.adm-upload.drag { border-color: var(--brand); background: var(--brand-soft); }
.adm-upload__prev {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 10px; margin-bottom: 12px;
}
.adm-upload__prev:empty { margin-bottom: 0; }
.adm-thumb { position: relative; aspect-ratio: 1; border-radius: 5px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.adm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.adm-thumb button {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border: 0;
  border-radius: 50%; background: rgba(16,22,28,.7); color: #fff; cursor: pointer;
  font-size: 13px; line-height: 1; padding: 0; display: flex; align-items: center; justify-content: center;
}
.adm-thumb button:hover { background: #c0392b; }
.adm-upload__btn { font-size: 13.5px; }
.adm-upload__tip { font-size: 12px; color: var(--ink-3); margin-top: 8px; }

/* --- 列表 --- */
.adm-toolbar {
  display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap;
}
.adm-toolbar .adm-input { max-width: 240px; }
.adm-toolbar .adm-select { max-width: 150px; }
.adm-toolbar__count { font-size: 13px; color: var(--ink-3); margin-left: auto; }

.adm-row {
  display: flex; gap: 14px; align-items: center; padding: 14px 0;
  border-bottom: 1px solid var(--line-2);
}
.adm-row:last-child { border-bottom: 0; }
.adm-row__thumb {
  width: 48px; height: 48px; flex: 0 0 auto; border-radius: 5px; overflow: hidden;
  background: var(--bg-2); border: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--ink-3);
}
.adm-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.adm-row__main { flex: 1 1 auto; min-width: 0; }
.adm-row__main b { display: block; font-size: 14.5px; color: var(--ink); font-weight: 600; }
.adm-row__meta {
  font-size: 12.5px; color: var(--ink-3); margin-top: 3px;
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.adm-row__ops { display: flex; gap: 6px; flex: 0 0 auto; flex-wrap: wrap; }

/* --- 状态徽标 --- */
.adm-tag {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 500;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.adm-tag--published { background: #e8f5ec; color: #1e7a3c; }
.adm-tag--draft { background: #f0f2f4; color: var(--ink-2); }
.adm-tag--archived { background: #fbeceb; color: #a83b32; }
.adm-tag--feat { background: #fdf3e2; color: #96601a; }

/* --- 空状态 --- */
.adm-empty { text-align: center; padding: 44px 20px; color: var(--ink-3); font-size: 14px; }
.adm-empty svg { width: 38px; height: 38px; opacity: .35; margin-bottom: 10px; }

/* --- 二次确认弹窗 --- */
.adm-confirm {
  position: fixed; inset: 0; z-index: 300; display: none;
  align-items: center; justify-content: center; background: rgba(16,22,28,.45);
  padding: 20px;
}
.adm-confirm.on { display: flex; }
.adm-confirm__box {
  background: #fff; border-radius: 9px; padding: 26px 28px; max-width: 380px; width: 100%;
  box-shadow: 0 24px 60px rgba(16,22,28,.28);
}
.adm-confirm__box h4 { margin: 0 0 8px; font-size: 16px; color: var(--ink); }
.adm-confirm__box p { margin: 0 0 20px; font-size: 13.5px; color: var(--ink-2); line-height: 1.65; }
.adm-confirm__ops { display: flex; gap: 10px; justify-content: flex-end; }

/* --- 操作提示 --- */
.adm-toast {
  position: fixed; left: 50%; bottom: 40px; transform: translate(-50%, 20px);
  z-index: 320; background: var(--ink); color: #fff; font-size: 14px;
  padding: 12px 22px; border-radius: 999px; opacity: 0; pointer-events: none;
  transition: opacity .22s, transform .22s; max-width: 90vw; text-align: center;
}
.adm-toast.on { opacity: 1; transform: translate(-50%, 0); }
.adm-toast.err { background: #a83b32; }
.adm-toast.ok { background: #1e7a3c; }

/* --- 保存中遮罩 --- */
.adm-busy { position: relative; pointer-events: none; opacity: .55; }
.adm-busy::after {
  content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.5);
}

/* 危险操作按钮（删除确认） */
.btn--danger {
  background: #a83b32; border-color: #a83b32; color: #fff;
}
.btn--danger:hover { background: #8f2f28; border-color: #8f2f28; color: #fff; }

/* 产品卡片：封面与价格 */
.card__media {
  margin: -4px 0 16px; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--line-2); background: var(--bg-2); aspect-ratio: 16 / 10;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__price {
  font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 0 12px;
}
.card__price span { font-size: 12.5px; font-weight: 400; color: var(--ink-3); }
.card__price--note { font-size: 13px; font-weight: 500; color: var(--ink-2); }

/* ==========================================================================
   后台 v2：整体骨架（顶栏 + 分组侧栏 + 内容区）
   ========================================================================== */
.adm-shell {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  padding: 28px 0 72px;
  min-height: 70vh;
}

.adm-top {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 22px;
}
.adm-top__l h1 {
  margin: 0; font-size: 23px; font-weight: 650; color: var(--ink); letter-spacing: -.2px;
}
.adm-top__l p { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-3); }
.adm-top__r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.adm-top__r .btn { font-size: 13px; }

/* 布局：侧栏 + 主区 */
.adm { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 1000px) { .adm { grid-template-columns: 200px minmax(0, 1fr); gap: 18px; } }
@media (max-width: 820px) { .adm { grid-template-columns: minmax(0, 1fr); gap: 14px; } }

/* 侧栏 */
.adm-side {
  position: sticky; top: 100px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 10px; display: flex; flex-direction: column; gap: 4px;
  box-shadow: 0 1px 2px rgba(16, 22, 28, .03);
}
.adm-side__group { display: flex; flex-direction: column; gap: 2px; }
.adm-side__group + .adm-side__group { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.adm-side__label {
  margin: 0 0 4px; padding: 0 10px;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: #9aa4b1;
}
.adm-side__foot {
  margin-top: 12px; padding: 10px 10px 2px; border-top: 1px solid var(--line-2);
  font-size: 12px; color: var(--ink-3); line-height: 1.6;
}

/* 侧栏按钮（复用 adm-nav__item 类名，JS 依赖） */
.adm-side .adm-nav__item {
  padding: 10px 11px; font-size: 14px; border-radius: 7px; gap: 9px;
}
.adm-side .adm-nav__item svg { width: 16px; height: 16px; opacity: .8; }
.adm-side .adm-nav__item.on svg { opacity: 1; }

@media (max-width: 820px) {
  .adm-side {
    position: static; flex-direction: row; overflow-x: auto; gap: 4px;
    padding: 8px; border-radius: 10px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .adm-side::-webkit-scrollbar { display: none; }
  .adm-side__group { flex-direction: row; gap: 4px; }
  .adm-side__group + .adm-side__group { margin: 0; padding: 0; border: 0; }
  .adm-side__label, .adm-side__foot { display: none; }
  .adm-side .adm-nav__item { width: auto; padding: 9px 13px; white-space: nowrap; }
}

.adm-main { min-width: 0; }

/* 卡片微调 */
.adm-card { border-radius: 10px; padding: 22px 24px; box-shadow: 0 1px 2px rgba(16, 22, 28, .03); }
.adm-card + .adm-card { margin-top: 16px; }
@media (max-width: 620px) { .adm-card { padding: 18px 16px; } }

.adm-card__hd { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--line-2); }
.adm-card__hd h3 { font-size: 16.5px; }

/* 表单区块标题 */
.adm-sec {
  display: flex; align-items: center; gap: 10px;
  margin: 26px 0 16px; padding-bottom: 9px; border-bottom: 1px dashed var(--line);
}
.adm-sec:first-of-type { margin-top: 4px; }
.adm-sec h4 { margin: 0; font-size: 14px; font-weight: 650; color: var(--ink); letter-spacing: .01em; }
.adm-sec span { font-size: 12px; color: var(--ink-3); }

/* 表单吸底操作条 */
.adm-formbar {
  position: sticky; bottom: 0; z-index: 15;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 26px -24px -22px; padding: 14px 24px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(180%) blur(10px);
  border-top: 1px solid var(--line);
  border-radius: 0 0 10px 10px;
}
.adm-formbar__hint { margin-left: auto; font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 620px) {
  .adm-formbar { margin: 22px -16px -18px; padding: 12px 16px; }
  .adm-formbar__hint { display: none; }
}

/* 提示条 */
.gate {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 46px 30px; text-align: center;
}
.gate h3 { margin: 0 0 8px; font-size: 18px; color: var(--ink); }
.gate .muted { color: var(--ink-3); font-size: 14px; }

/* ==========================================================================
   可视化编辑器 wge-
   ========================================================================== */
.wge {
  position: relative;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: #fff;
  transition: border-color .18s, box-shadow .18s;
}
.wge:focus-within {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(193, 39, 45, .07);
}

/* --- 工具栏 --- */
.wge__bar {
  position: sticky; top: 82px; z-index: 30;
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  padding: 7px 9px;
  background: #fcfdfe;
  border-bottom: 1px solid var(--line-2);
  border-radius: 8px 8px 0 0;
}
@media (max-width: 900px) { .wge__bar { top: 0; } }
@media (max-width: 620px) {
  .wge__bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 6px; }
  .wge__bar::-webkit-scrollbar { display: none; }
}

.wge__grp { display: flex; align-items: center; gap: 1px; }
.wge__grp + .wge__grp {
  margin-left: 6px; padding-left: 7px; border-left: 1px solid var(--line);
}
@media (max-width: 620px) { .wge__grp { flex: 0 0 auto; } }

.wge__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-width: 30px; height: 30px; padding: 0 7px;
  border: 0; border-radius: 5px; background: transparent;
  color: var(--ink-2); font-size: 13.5px; font-family: inherit;
  cursor: pointer; transition: background .15s, color .15s;
  flex: 0 0 auto;
}
.wge__btn:hover { background: var(--bg-2); color: var(--ink); }
.wge__btn.on { background: var(--brand-soft); color: var(--brand-deep); }
.wge__btn svg { width: 16px; height: 16px; }
.wge__btn--text { padding: 0 9px; }
.wge__btn--text span { font-size: 12px; }

.wge__ic-color, .wge__ic-hilite {
  font-size: 13px; font-weight: 600; line-height: 1;
  border-bottom: 3px solid var(--brand); padding-bottom: 1px;
}
.wge__ic-hilite { border-bottom-color: #f5c542; }

.wge__sel {
  height: 30px; padding: 0 6px; max-width: 104px;
  border: 1px solid var(--line-2); border-radius: 5px;
  background: #fff; color: var(--ink-2); font-size: 12.5px; font-family: inherit;
  cursor: pointer;
}
.wge__sel--sm { max-width: 78px; }
.wge__sel:focus { outline: 0; border-color: var(--brand); }
@media (max-width: 620px) { .wge__sel { flex: 0 0 auto; } }

/* --- 颜色气泡 --- */
.wge__pop {
  position: absolute; z-index: 40;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px 12px;
  box-shadow: 0 14px 40px rgba(16, 22, 28, .16);
}
.wge__pop-t { margin: 0 0 8px; font-size: 11.5px; color: var(--ink-3); font-weight: 500; }
.wge__sws { display: flex; gap: 7px; }
.wge__sw {
  width: 22px; height: 22px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(16, 22, 28, .16);
  transition: transform .12s;
  display: flex; align-items: center; justify-content: center;
}
.wge__sw:hover { transform: scale(1.14); }
.wge__sw-x { font-size: 11px; color: #b0342b; line-height: 1; }

/* --- 编辑区 --- */
.wge__body { position: relative; }
.wge__area {
  min-height: 320px; max-height: 76vh; overflow-y: auto;
  padding: 24px 26px 32px;
  font-size: 16px; line-height: 1.85; color: var(--ink-2);
  outline: 0;
}
@media (max-width: 620px) { .wge__area { padding: 16px 16px 24px; font-size: 15.5px; } }

.wge__area:empty::before,
.wge--empty .wge__area::before {
  content: attr(data-placeholder);
  color: #a8b1bc; pointer-events: none;
}
.wge__area:empty::before { display: block; }

.wge__area > *:first-child { margin-top: 0; }
.wge__area p { margin: 0 0 1em; }
.wge__area h2 { font-size: 22px; font-weight: 650; color: var(--ink); margin: 1.6em 0 .6em; line-height: 1.4; }
.wge__area h3 { font-size: 18.5px; font-weight: 650; color: var(--ink); margin: 1.5em 0 .5em; line-height: 1.45; }
.wge__area h4 { font-size: 16.5px; font-weight: 650; color: var(--ink); margin: 1.4em 0 .5em; }
.wge__area blockquote {
  margin: 1.3em 0; padding: 14px 20px; border-left: 3px solid var(--brand);
  background: var(--brand-soft); color: var(--ink-2); border-radius: 0 4px 4px 0;
}
.wge__area pre {
  background: #10161c; color: #d7dee6; padding: 16px 18px;
  border-radius: 6px; overflow-x: auto; font-size: 13px; line-height: 1.7;
  font-family: ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap;
}
.wge__area code {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  background: var(--line-2); padding: 2px 6px; border-radius: 3px; font-size: .9em;
}
.wge__area pre code { background: none; padding: 0; font-size: inherit; }
.wge__area ul, .wge__area ol { margin: 0 0 1em; padding-left: 1.5em; }
.wge__area li { margin: .35em 0; }
.wge__area a { color: var(--brand); border-bottom: 1px solid rgba(193, 39, 45, .35); }
.wge__area hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.wge__area img { max-width: 100%; height: auto; border-radius: 6px; cursor: pointer; }
.wge__area img.wge__img--sel { outline: 2px solid var(--brand); outline-offset: 3px; }
.wge__area table { width: 100%; border-collapse: collapse; font-size: 14.5px; margin: 1em 0; }
.wge__area th, .wge__area td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; }
.wge__area th { background: var(--bg-2); color: var(--ink); font-weight: 600; }

/* 源码模式 */
.wge__src {
  display: block; width: 100%; min-height: 320px; max-height: 76vh;
  padding: 20px 22px; border: 0; outline: 0; resize: vertical;
  background: #fbfcfd; color: #2b3540;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px; line-height: 1.75;
  border-radius: 0 0 8px 8px;
}

/* --- 图片浮动工具条 --- */
.wge__imgbar {
  position: absolute; z-index: 45;
  background: #fff; border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 11px; width: max-content; max-width: 96%;
  box-shadow: 0 14px 36px rgba(16, 22, 28, .16);
  display: flex; flex-direction: column; gap: 7px;
}
.wge__imgbar-row { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.wge__imgbar-l { font-size: 11.5px; color: var(--ink-3); margin-right: 2px; }
.wge__imgbar button {
  font-family: inherit; font-size: 12px; padding: 3px 8px;
  border: 1px solid var(--line-2); border-radius: 4px;
  background: #fff; color: var(--ink-2); cursor: pointer;
  transition: all .15s;
}
.wge__imgbar button:hover { border-color: var(--brand); color: var(--brand); }
.wge__imgbar button.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-deep); }
.wge__imgbar input[type="range"] { width: 96px; accent-color: var(--brand); }
.wge__imgbar-v { font-size: 11.5px; color: var(--ink-2); min-width: 34px; text-align: right; }
.wge__imgbar input[type="text"] {
  flex: 1 1 130px; min-width: 110px; padding: 4px 8px;
  border: 1px solid var(--line-2); border-radius: 4px;
  font-family: inherit; font-size: 12px; color: var(--ink);
}
.wge__imgbar input[type="text"]:focus { outline: 0; border-color: var(--brand); }
.wge__imgbar .wge__danger { margin-left: auto; color: #a83b32; border-color: #f0d6d3; }
.wge__imgbar .wge__danger:hover { background: #fdf3f2; border-color: #a83b32; color: #a83b32; }

/* 拖拽缩放点 */
.wge__handle {
  position: absolute; z-index: 46;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--brand); border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(16, 22, 28, .3);
  cursor: nwse-resize;
}

/* --- 文档卡片（编辑区 + 前台通用） --- */
.wge-file {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0; padding: 13px 16px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg-2); text-decoration: none; color: inherit;
  transition: border-color .18s, background .18s, transform .18s;
  cursor: pointer; position: relative;
}
.wge-file:hover { border-color: var(--brand); background: #fff; text-decoration: none; }
.wge-file__ic {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 6px;
  background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
}
.wge-file__meta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wge-file__meta b {
  font-size: 14px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wge-file__meta i { font-style: normal; font-size: 12px; color: var(--ink-3); }
.wge-file__x {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  background: rgba(16, 22, 28, .06); color: var(--ink-2); font-size: 14px; line-height: 1;
}
.wge__area .wge-file:hover .wge-file__x { display: flex; }
.wge-file__x:hover { background: #fbe6e4; color: #a83b32; }

/* 窄屏：图片工具条改为底部抽屉，避免绝对定位溢出视口 */
@media (max-width: 620px) {
  .wge__imgbar {
    position: fixed !important;
    left: 8px !important; right: 8px !important;
    top: auto !important; bottom: 8px !important;
    width: auto; max-width: none;
    z-index: 300;
    box-shadow: 0 8px 34px rgba(16, 22, 28, .26);
  }
  .wge__imgbar-row { flex-wrap: wrap; }
  .wge__imgbar input[type="range"] { flex: 1 1 100px; width: auto; }
  .wge__handle { display: none !important; }
}

/* ==========================================================================
   后台 v3：CMS 工作站风格（紫色主题）
   仅作用于 admin.html，不影响前台
   ========================================================================== */
:root {
  --cms: #8b5cf6;
  --cms-deep: #7c3aed;
  --cms-soft: #f5f3ff;
  --cms-line: #ebe6f8;
}

/* 侧栏换紫色高亮 */
.adm-side .adm-nav__item.on {
  background: var(--cms-soft);
  color: var(--cms-deep);
}
.adm-side .adm-nav__item.on .adm-nav__badge { background: #fff; color: var(--cms-deep); }
.adm-side__label { color: #a79bbd; }
.adm-top__l h1 { font-size: 22px; }

/* ---------- 二级标签栏 ---------- */
.cms-tabs {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px; padding: 0 16px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16, 22, 28, .03);
}
.cms-tabs__l { display: flex; gap: 2px; }
.cms-tab {
  position: relative; padding: 15px 16px; border: 0; background: none;
  font-family: inherit; font-size: 14px; color: var(--ink-3);
  cursor: pointer; transition: color .16s;
}
.cms-tab:hover { color: var(--ink); }
.cms-tab.on { color: var(--cms-deep); font-weight: 600; }
.cms-tab.on::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 0;
  height: 2px; background: var(--cms); border-radius: 2px 2px 0 0;
}
.cms-tabs__r { display: flex; gap: 8px; }

/* 紫色主按钮 */
.cms-btn {
  font-family: inherit; font-size: 13.5px; font-weight: 500;
  padding: 9px 20px; border-radius: 6px; border: 1px solid transparent;
  cursor: pointer; transition: filter .16s, box-shadow .16s, transform .16s;
  color: #fff; background: var(--cms); letter-spacing: .01em;
}
.cms-btn--primary {
  background: linear-gradient(135deg, #a855f7, #7c3aed);
  box-shadow: 0 2px 8px rgba(124, 58, 237, .28);
}
.cms-btn--primary:hover { filter: brightness(1.06); box-shadow: 0 4px 14px rgba(124, 58, 237, .36); }
.cms-btn:active { transform: translateY(1px); }
.cms-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

/* ---------- 面板切换 ---------- */
.cms-pane { display: none; }
.cms-pane.on { display: block; animation: cmsFade .18s ease; }
@keyframes cmsFade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* ---------- 列表卡片 ---------- */
.cms-card {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; box-shadow: 0 1px 2px rgba(16, 22, 28, .03);
}
.cms-card__hd {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 15px 18px; border-bottom: 1px solid var(--line-2);
  background: linear-gradient(90deg, #faf7ff, #fff 42%);
}
.cms-card__hd-l { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cms-card__ico {
  width: 34px; height: 34px; flex: 0 0 auto; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #a855f7, #7c3aed); color: #fff;
}
.cms-card__ico svg { width: 17px; height: 17px; }
.cms-card__hd h3 { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.cms-card__hd p { margin: 2px 0 0; font-size: 12px; color: var(--ink-3); }
.cms-card__hd-r { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cms-card__ft {
  padding: 11px 18px; font-size: 12.5px; color: var(--ink-3);
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--line-2); background: #fcfcfd;
}

/* 搜索框（按钮拼接） */
.cms-search { display: flex; }
.cms-search .cms-inp { width: 200px; border-radius: 6px 0 0 6px; border-right: 0; }
.cms-search__btn {
  width: 40px; border: 1px solid var(--cms); background: var(--cms); color: #fff;
  border-radius: 0 6px 6px 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.cms-search__btn svg { width: 15px; height: 15px; }
.cms-search__btn:hover { filter: brightness(1.08); }

/* ---------- 表格 ---------- */
.cms-table { width: 100%; }
.cms-tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px 72px 84px 132px 172px;
  gap: 12px; align-items: center; padding: 12px 18px;
  border-bottom: 1px solid var(--line-2);
}
.cms-tr--head {
  background: var(--bg-2); font-size: 12px; color: var(--ink-3);
  font-weight: 500; letter-spacing: .01em;
}
.cms-tr:not(.cms-tr--head):hover { background: #fcfaff; }
.cms-tr:last-child { border-bottom: 0; }
.cms-td { font-size: 13px; color: var(--ink-2); min-width: 0; }
.cms-td--title {
  font-size: 13.5px; font-weight: 500; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cms-td--title:hover { color: var(--cms-deep); }
.cms-td--ops { display: flex; gap: 3px; justify-content: flex-end; flex-wrap: wrap; }
.cms-op {
  border: 0; background: none; font-family: inherit; font-size: 12.5px;
  color: var(--cms-deep); cursor: pointer; padding: 3px 6px; border-radius: 4px;
}
.cms-op:hover { background: var(--cms-soft); }
.cms-op--danger { color: #c0392b; }
.cms-op--danger:hover { background: #fdf1f0; }

@media (max-width: 1080px) {
  .cms-tr { grid-template-columns: minmax(0, 1fr) 92px 84px 150px; }
  .cms-td--cat, .cms-td--views { display: none; }
}
@media (max-width: 760px) {
  .cms-tr { grid-template-columns: minmax(0, 1fr) 128px; padding: 11px 14px; }
  .cms-td--status, .cms-td--time { display: none; }
  .cms-card__hd { flex-direction: column; align-items: stretch; }
  .cms-search .cms-inp { width: 100%; }
  .cms-tabs { padding: 0 10px; }
  .cms-tab { padding: 13px 10px; font-size: 13.5px; }
}

/* ---------- 编辑区三栏 ---------- */
.cms-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 296px;
  gap: 16px; align-items: start;
}
@media (max-width: 1100px) { .cms-grid { grid-template-columns: minmax(0, 1fr); } }

.cms-main {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 22px 24px 24px; box-shadow: 0 1px 2px rgba(16, 22, 28, .03);
  min-width: 0;
}
@media (max-width: 620px) { .cms-main { padding: 16px 14px 18px; } }

.cms-field { margin-bottom: 20px; }
.cms-field:last-child { margin-bottom: 0; }
.cms-field > label {
  display: block; font-size: 13px; font-weight: 500; color: var(--ink-2);
  margin-bottom: 7px;
}
.cms-field__hd {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 7px;
}
.cms-field__hd label { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.cms-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 620px) { .cms-row { grid-template-columns: 1fr; } }

.cms-inp, .cms-sel, .cms-area {
  width: 100%; padding: 9px 12px; border: 1px solid var(--line);
  border-radius: 6px; background: #fff; color: var(--ink);
  font-family: inherit; font-size: 13.5px;
  transition: border-color .16s, box-shadow .16s;
}
.cms-inp--lg { font-size: 16px; font-weight: 500; padding: 11px 14px; }
.cms-inp--sm { padding: 7px 10px; font-size: 12.5px; }
.cms-inp:focus, .cms-sel:focus, .cms-area:focus {
  outline: 0; border-color: var(--cms);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, .12);
}
.cms-area { min-height: 86px; resize: vertical; line-height: 1.7; }

/* 标题 + 字数 */
.cms-titlewrap { position: relative; }
.cms-count {
  position: absolute; right: 12px; bottom: 11px;
  font-size: 11.5px; color: #a8b1bc; background: #fff; padding-left: 6px;
  pointer-events: none;
}
.cms-titlewrap .cms-inp { padding-right: 74px; }

/* 编辑 + 预览 */
.cms-editwrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.cms-editwrap.split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 900px) { .cms-editwrap.split { grid-template-columns: minmax(0, 1fr); } }

.cms-preview {
  border: 1px solid var(--cms-line); border-radius: 8px;
  background: #fff; overflow: auto; max-height: 74vh; min-height: 320px;
}
.cms-preview__hd {
  position: sticky; top: 0; z-index: 2;
  padding: 7px 12px; font-size: 12px; color: var(--cms-deep);
  background: var(--cms-soft); border-bottom: 1px solid var(--cms-line);
}
.cms-preview__body { padding: 20px 22px; font-size: 15px; }
.cms-preview__body > *:first-child { margin-top: 0; }
.cms-preview__empty { color: var(--ink-3); font-size: 13px; padding: 30px 0; text-align: center; }

.cms-statusbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 9px; font-size: 12px; color: var(--ink-3);
}
.cms-statusbar__r { color: #a8b1bc; }

.cms-linkbtn {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--line); background: #fff; color: var(--cms-deep);
  font-family: inherit; font-size: 12.5px; padding: 5px 10px;
  border-radius: 5px; cursor: pointer; transition: .16s;
}
.cms-linkbtn svg { width: 14px; height: 14px; }
.cms-linkbtn:hover { border-color: var(--cms); background: var(--cms-soft); }
.cms-linkbtn.on { background: var(--cms); border-color: var(--cms); color: #fff; }

/* 标签 */
.cms-tags {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  min-height: 42px; padding: 7px 9px;
  border: 1px solid var(--line); border-radius: 6px; background: #fff;
}
.cms-tags:focus-within { border-color: var(--cms); box-shadow: 0 0 0 3px rgba(139, 92, 246, .12); }
.cms-tags__inp {
  flex: 1 1 150px; min-width: 120px; border: 0; outline: 0;
  font-family: inherit; font-size: 13px; color: var(--ink); padding: 3px 2px;
}
.tag-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--cms-soft); color: var(--cms-deep);
  border-radius: 999px; padding: 3px 10px; font-size: 12.5px;
}
.tag-chip button {
  border: 0; background: none; color: inherit; cursor: pointer;
  font-size: 13px; line-height: 1; padding: 0; opacity: .55;
}
.tag-chip button:hover { opacity: 1; }

/* ---------- 右侧设置栏 ---------- */
.cms-side {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; position: sticky; top: 100px;
  box-shadow: 0 1px 2px rgba(16, 22, 28, .03);
}
@media (max-width: 1100px) { .cms-side { position: static; } }
.cms-side__tabs {
  display: flex; gap: 18px; padding: 12px 16px;
  background: linear-gradient(135deg, #a855f7, #7c3aed); color: #fff;
  font-size: 13px;
}
.cms-side__tabs span { opacity: .72; }
.cms-side__tabs span.on { opacity: 1; font-weight: 600; }
.cms-side__block { padding: 15px 16px; border-bottom: 1px solid var(--line-2); }
.cms-side__block:last-child { border-bottom: 0; }
.cms-side__block h4 {
  margin: 0 0 10px; font-size: 12px; font-weight: 600;
  color: var(--ink-3); letter-spacing: .04em;
}
.cms-side__ops { display: flex; gap: 6px; margin-bottom: 8px; }
.cms-side__ops .btn { flex: 1 1 0; }
.cms-side__hint { margin: 8px 0 0; font-size: 11.5px; color: var(--ink-3); line-height: 1.6; }
.cms-side__block .cms-inp--sm + .cms-inp--sm { margin-top: 7px; }

.cms-cover {
  aspect-ratio: 16 / 10; border: 1px dashed var(--line); border-radius: 6px;
  background: var(--bg-2); display: flex; align-items: center; justify-content: center;
  overflow: hidden; margin-bottom: 9px;
  font-size: 12px; color: var(--ink-3);
}
.cms-cover img { width: 100%; height: 100%; object-fit: cover; }

.cms-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-2); cursor: pointer;
}
.cms-check input { width: 15px; height: 15px; accent-color: var(--cms); }

/* ---------- 底部操作条 ---------- */
.cms-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 16px; padding: 11px 16px;
  background: rgba(255, 255, 255, .96); border: 1px solid var(--line);
  border-radius: 10px; position: sticky; bottom: 10px; z-index: 12;
  backdrop-filter: saturate(180%) blur(8px);
  box-shadow: 0 -2px 14px rgba(16, 22, 28, .06);
}
.cms-footer__r { display: flex; gap: 8px; }
@media (max-width: 560px) { .cms-footer { padding: 10px; } .cms-footer__r .btn { padding: 8px 12px; } }

/* ==========================================================================
   编辑器工具栏 v2：两行分组
   ========================================================================== */
.wge__bar {
  flex-direction: column; align-items: stretch; gap: 0;
  padding: 0; background: #fbfbfd;
}
.wge__row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  padding: 5px 8px;
}
.wge__row--2 { border-top: 1px solid var(--line-2); }
.wge__grp { display: flex; align-items: center; gap: 1px; }
.wge__grp + .wge__grp {
  margin-left: 5px; padding-left: 6px; border-left: 1px solid var(--line-2);
}
.wge__grp--end { margin-left: auto !important; padding-left: 0 !important; border-left: 0 !important; }
.wge__sel { max-width: 108px; height: 28px; font-size: 12px; }
.wge__sel--sm { max-width: 74px; }
.wge__sel--block { max-width: 88px; }
.wge__btn { height: 28px; min-width: 28px; }
.wge__area { padding: 28px 34px 36px; }
@media (max-width: 620px) {
  .wge__row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .wge__row::-webkit-scrollbar { display: none; }
  .wge__area { padding: 18px 16px 26px; }
}

/* 全屏编辑 */
.wge--full {
  position: fixed; inset: 14px; z-index: 900;
  background: #fff; border-radius: 10px;
  box-shadow: 0 26px 80px rgba(16, 22, 28, .34);
  display: flex; flex-direction: column; overflow: hidden;
}
.wge--full .wge__bar { border-radius: 10px 10px 0 0; }
.wge--full .wge__body { flex: 1 1 auto; min-height: 0; display: flex; }
.wge--full .wge__area { flex: 1 1 auto; max-height: none; }
.wge--full .wge__src { flex: 1 1 auto; max-height: none; }
body.wge-lock { overflow: hidden; }

/* 后台表单校验态 */
.cms-inp.err, .cms-sel.err, .cms-area.err {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .08);
}

/* 文章标签 */
.post__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
.post__tag {
  display: inline-flex; align-items: center; padding: 5px 12px;
  border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-2);
}
.post__tag:hover { border-color: var(--brand); color: var(--brand); }

/* --- 后台放开宽度：编辑区需要横向空间 --- */
.adm-shell .wrap { max-width: 1560px; }
@media (min-width: 1101px) {
  .adm { grid-template-columns: 200px minmax(0, 1fr); }
  .cms-grid { grid-template-columns: minmax(0, 1fr) 284px; }
}

/* hidden 属性优先级：编辑器里多处元素自带 display，需显式让 [hidden] 生效 */
.wge [hidden],
.cms [hidden],
.wge__imgbar[hidden],
.wge__pop[hidden],
.wge__src[hidden],
.wge__handle[hidden],
.cms-preview[hidden] {
  display: none !important;
}

/* 分屏：两栏顶部对齐，预览不低于编辑器视觉高度 */
.cms-editwrap { align-items: start; }
.cms-editwrap.split { align-items: start; }
.cms-editwrap.split .cms-preview { min-height: 460px; max-height: none; }

/* 列表头部：右侧筛选与搜索保持一行，不被压缩换行 */
.cms-card__hd { flex-wrap: wrap; }
.cms-card__hd-r { flex: 0 0 auto; flex-wrap: nowrap; }
.cms-search .cms-inp { width: 186px; }
@media (max-width: 760px) {
  .cms-card__hd-r { flex-wrap: wrap; width: 100%; }
  .cms-search { flex: 1 1 auto; }
  .cms-search .cms-inp { width: 100%; }
}

/* 窄屏不用吸顶工具栏：避免被站点导航遮住 */
@media (max-width: 900px) {
  .wge__bar { position: static; }
}

/* ==========================================================================
   后台 v4：一级壳 + 二级页面 + 弹窗
   ========================================================================== */
body.admin-body { background: var(--bg-2); }

/* ---------- 顶部栏 ---------- */
.ahead {
  position: sticky; top: 0; z-index: 60;
  height: 58px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 0 20px; background: #fff; border-bottom: 1px solid var(--line);
}
.ahead__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.ahead__brand img { height: 28px; display: block; }
.ahead__name {
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  padding-left: 12px; border-left: 1px solid var(--line); line-height: 1.2;
}
.ahead__r { display: flex; align-items: center; gap: 14px; font-size: 12.5px; }
.ahead__link { color: var(--ink-3); text-decoration: none; }
.ahead__link:hover { color: var(--cms-deep); }
.ahead__user { color: var(--ink-2); }
.ahead__logout {
  border: 1px solid var(--line); background: #fff; border-radius: 6px;
  padding: 6px 12px; font-size: 12.5px; color: var(--ink-2);
  cursor: pointer; font-family: inherit; transition: .16s;
}
.ahead__logout:hover { border-color: #c0392b; color: #c0392b; }

/* ---------- 布局 ---------- */
.alayout {
  display: grid; grid-template-columns: 206px minmax(0, 1fr);
  min-height: calc(100vh - 58px);
}
.amenu {
  position: sticky; top: 58px; height: calc(100vh - 58px); overflow-y: auto;
  background: #fff; border-right: 1px solid var(--line); padding: 14px 10px 24px;
}
.amenu__group + .amenu__group { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); }
.amenu__label {
  margin: 0 0 6px; padding: 0 11px; font-size: 10.5px; font-weight: 600;
  letter-spacing: .1em; color: #a79bbd; text-transform: uppercase;
}
.amenu__item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; border-radius: 7px; text-decoration: none;
  font-size: 13.5px; color: var(--ink-2); transition: background .16s, color .16s;
}
.amenu__item svg { width: 16px; height: 16px; opacity: .75; flex: 0 0 auto; }
.amenu__item:hover { background: var(--bg-2); color: var(--ink); }
.amenu__item.on { background: var(--cms-soft); color: var(--cms-deep); font-weight: 600; }
.amenu__item.on svg { opacity: 1; }
.amenu__badge {
  margin-left: auto; font-size: 11px; font-weight: 600; min-width: 20px; text-align: center;
  padding: 1px 7px; border-radius: 999px; background: var(--line-2); color: var(--ink-3);
}
.amenu__item.on .amenu__badge { background: #fff; color: var(--cms-deep); }
.amenu__foot {
  margin: 18px 10px 0; padding-top: 12px; border-top: 1px solid var(--line-2);
  font-size: 11.5px; color: var(--ink-3); line-height: 1.7;
}

.amain { padding: 22px 26px 64px; min-width: 0; }
.apage { display: none; }
.apage.on { display: block; animation: apageIn .18s ease; }
@keyframes apageIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.apage__hd {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.apage__hd h2 { margin: 0; font-size: 20px; font-weight: 650; color: var(--ink); }
.apage__hd p { margin: 5px 0 0; font-size: 12.5px; color: var(--ink-3); }

/* ---------- 概览 ---------- */
.astats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.astat {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 16px 18px; cursor: pointer; transition: .16s;
}
.astat:hover { border-color: var(--cms); box-shadow: 0 6px 18px rgba(124, 58, 237, .10); transform: translateY(-1px); }
.astat b { display: block; font-size: 25px; font-weight: 650; color: var(--ink); line-height: 1.2; }
.astat span { font-size: 12.5px; color: var(--ink-3); }
.astats.is-loading .astat b { opacity: .4; }

.acols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: start; }
.acard {
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; box-shadow: 0 1px 2px rgba(16, 22, 28, .03);
}
.acard__hd {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line-2);
  background: linear-gradient(90deg, #faf7ff, #fff 50%);
}
.acard__hd h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.acard__more { font-size: 12px; color: var(--cms-deep); text-decoration: none; }
.acard__tools {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--line-2);
}
.acard__count { margin-left: auto; font-size: 12px; color: var(--ink-3); }

.arecent { padding: 4px 0; }
.arecent__row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 16px; text-decoration: none; border-bottom: 1px solid var(--line-2);
}
.arecent__row:last-child { border-bottom: 0; }
.arecent__row:hover { background: #fcfaff; }
.arecent__t { font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arecent__m { font-size: 11.5px; color: var(--ink-3); flex: 0 0 auto; }

.aquick { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.aquick__btn {
  text-align: left; padding: 11px 14px; border: 1px dashed var(--line);
  border-radius: 8px; background: #fff; font-size: 13px; color: var(--cms-deep);
  cursor: pointer; font-family: inherit; transition: .16s;
}
.aquick__btn:hover { border-color: var(--cms); background: var(--cms-soft); }

/* ---------- 通用表格 ---------- */
.atable { width: 100%; }
.atable__hd, .atable__tr {
  display: grid; grid-template-columns: var(--cols); gap: 12px; align-items: center;
  padding: 11px 16px;
}
.atable__hd { background: var(--bg-2); font-size: 11.5px; color: var(--ink-3); font-weight: 500; }
.atable__tr { border-top: 1px solid var(--line-2); }
.atable__tr:hover { background: #fcfaff; }
.atable__td { font-size: 13px; color: var(--ink-2); min-width: 0; }
.atable__td--t {
  font-size: 13.5px; font-weight: 500; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.atable__td--thumb img { width: 40px; height: 40px; object-fit: cover; border-radius: 5px; border: 1px solid var(--line-2); display: block; }
.athumb-ph { font-style: normal; font-size: 10.5px; color: var(--ink-3); }
.atable__td--ops { display: flex; gap: 2px; justify-content: flex-end; flex-wrap: wrap; }

/* ---------- 轮播卡片 ---------- */
.aslides { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; padding: 16px; }
.aslide { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; transition: .16s; }
.aslide:hover { box-shadow: 0 8px 22px rgba(16, 22, 28, .08); border-color: var(--cms-line); }
.aslide__media { position: relative; aspect-ratio: 16 / 9; background: var(--bg-2); }
.aslide__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aslide__type {
  position: absolute; left: 8px; top: 8px; font-size: 10.5px;
  padding: 2px 8px; border-radius: 999px; background: rgba(16, 22, 28, .62); color: #fff;
}
.aslide__play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 20px; text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
}
.aslide__body { padding: 12px 14px; }
.aslide__body h4 { margin: 0 0 5px; font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aslide__meta { margin: 0 0 9px; font-size: 11.5px; color: var(--ink-3); }
.aslide__ops { display: flex; gap: 4px; }

/* ---------- 弹窗 ---------- */
.amodal { position: fixed; inset: 0; z-index: 800; display: none; }
.amodal.on { display: block; }
.amodal__mask { position: absolute; inset: 0; background: rgba(16, 22, 28, .5); }
.amodal__box {
  position: relative; margin: 4vh auto; width: calc(100% - 28px); max-width: 640px;
  max-height: 92vh; display: flex; flex-direction: column;
  background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(16, 22, 28, .34);
  animation: amodalIn .18s ease;
}
@keyframes amodalIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.amodal__hd {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 15px 20px; border-bottom: 1px solid var(--line-2);
}
.amodal__hd h3 { margin: 0; font-size: 15.5px; color: var(--ink); }
.amodal__hd p { margin: 3px 0 0; font-size: 11.5px; color: var(--ink-3); }
.amodal__x {
  border: 0; background: none; font-size: 22px; line-height: 1;
  color: var(--ink-3); cursor: pointer; padding: 0 4px;
}
.amodal__x:hover { color: var(--ink); }
.amodal__body { padding: 18px 20px; overflow-y: auto; flex: 1 1 auto; }
.amodal__ft {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 20px; border-top: 1px solid var(--line-2); background: #fcfcfd;
}
.amodal--busy .amodal__body { opacity: .6; pointer-events: none; }
body.amodal-lock { overflow: hidden; }

/* ---------- 弹窗内表单 ---------- */
.amfield { margin-bottom: 15px; }
.amfield:last-child { margin-bottom: 0; }
.amfield > label { display: block; font-size: 12.5px; font-weight: 500; color: var(--ink-2); margin-bottom: 6px; }
.amfield__hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.amfield__hd label { font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.amgrid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.amgrid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 12px; }
@media (max-width: 640px) { .amgrid2, .amgrid3 { grid-template-columns: 1fr; } }
.amrow { display: flex; gap: 8px; align-items: center; }
.amrow > .cms-inp, .amrow > .cms-sel { flex: 1 1 auto; min-width: 0; }
.amhint { display: block; margin-top: 6px; font-size: 11.5px; color: var(--ink-3); line-height: 1.6; }
.amerr { display: block; margin-top: 4px; font-size: 12px; color: #c0392b; }
.amuted { color: var(--ink-3); font-size: 13px; }

.amtitle { position: relative; }
.amcount {
  position: absolute; right: 12px; bottom: 10px; font-size: 11.5px;
  color: #a8b1bc; background: #fff; padding-left: 6px; pointer-events: none;
}
.amtitle .cms-inp { padding-right: 74px; }

.ameditwrap { display: grid; grid-template-columns: minmax(0, 1fr); }
.ameditwrap.split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 900px) { .ameditwrap.split { grid-template-columns: minmax(0, 1fr); } }
.ampreview { border: 1px solid var(--cms-line); border-radius: 8px; overflow: auto; max-height: 56vh; background: #fff; }
.ampreview__hd {
  position: sticky; top: 0; z-index: 2; padding: 6px 11px; font-size: 11.5px;
  color: var(--cms-deep); background: var(--cms-soft); border-bottom: 1px solid var(--cms-line);
}
.ampreview__body { padding: 16px 18px; font-size: 14.5px; }
.amstatus { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 11.5px; color: var(--ink-3); }
.amstatus__r { color: #a8b1bc; }

.amtags {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  min-height: 40px; padding: 7px 9px; border: 1px solid var(--line);
  border-radius: 6px; background: #fff;
}
.amtags:focus-within { border-color: var(--cms); box-shadow: 0 0 0 3px rgba(139, 92, 246, .12); }
.amtags__inp { flex: 1 1 120px; min-width: 100px; border: 0; outline: 0; font: inherit; font-size: 13px; padding: 2px; }

.amcover {
  aspect-ratio: 16 / 9; border: 1px dashed var(--line); border-radius: 6px;
  background: var(--bg-2); display: flex; align-items: center; justify-content: center;
  overflow: hidden; margin-bottom: 8px; font-size: 12px; color: var(--ink-3);
}
.amcover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.amcover--wide { aspect-ratio: 21 / 9; }

.amupload { border: 1px dashed var(--line); border-radius: 8px; padding: 12px; background: var(--bg-2); }
.amupload.drag { border-color: var(--cms); background: var(--cms-soft); }
.amupload__prev { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; margin-bottom: 10px; }
.amupload__prev:empty { display: none; }
.amthumb { position: relative; aspect-ratio: 1; border-radius: 5px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.amthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.amthumb button {
  position: absolute; top: 3px; right: 3px; width: 19px; height: 19px; border: 0;
  border-radius: 50%; background: rgba(16, 22, 28, .7); color: #fff;
  cursor: pointer; font-size: 12px; line-height: 1; padding: 0;
}
.amthumb__tag {
  position: absolute; left: 3px; bottom: 3px; background: rgba(16, 22, 28, .72);
  color: #fff; font-size: 10px; padding: 1px 5px; border-radius: 3px;
}

.amradio { display: flex; gap: 18px; font-size: 13px; color: var(--ink-2); }
.amradio label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.amradio input { width: 15px; height: 15px; accent-color: var(--cms); }
.amcheck { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.amcheck input { width: 15px; height: 15px; accent-color: var(--cms); }

/* ---------- 留言 ---------- */
.ainq { padding: 14px 16px; border-bottom: 1px solid var(--line-2); }
.ainq:last-child { border-bottom: 0; }
.ainq__hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ainq__hd b { font-size: 13.5px; color: var(--ink); }
.ainq__hd i { font-style: normal; color: var(--ink-3); font-size: 12px; margin-left: 6px; }
.ainq__hd span { font-size: 11.5px; color: var(--ink-3); }
.ainq__meta { display: flex; gap: 14px; margin-top: 4px; font-size: 12px; }
.ainq__meta a { color: var(--cms-deep); text-decoration: none; }
.ainq__msg { margin: 8px 0 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.72; white-space: pre-wrap; }

/* ---------- 登录页 ---------- */
body.login-body { background: #f5f3ff; }
.login { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; }
.login__brand {
  position: relative; overflow: hidden; padding: 44px 48px;
  background: linear-gradient(150deg, #7c3aed 0%, #a855f7 58%, #c084fc 100%);
  color: #fff; display: flex; flex-direction: column; justify-content: space-between;
}
.login__logo img { height: 40px; width: auto; filter: brightness(0) invert(1); }
.login__brandmid { max-width: 440px; }
.login__brandmid h1 { margin: 0 0 14px; font-size: 33px; line-height: 1.32; font-weight: 650; letter-spacing: -.5px; }
.login__brandmid p { margin: 0 0 24px; font-size: 13.5px; color: rgba(255, 255, 255, .86); line-height: 1.85; }
.login__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.login__list li { position: relative; padding-left: 22px; font-size: 13px; color: rgba(255, 255, 255, .92); }
.login__list li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 9px; height: 9px;
  border-radius: 50%; background: rgba(255, 255, 255, .92);
}
.login__copy { margin: 0; font-size: 11.5px; color: rgba(255, 255, 255, .68); }
.login__deco { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .12); }
.login__deco--a { width: 340px; height: 340px; right: -100px; top: -90px; }
.login__deco--b { width: 210px; height: 210px; right: 50px; bottom: -80px; background: rgba(255, 255, 255, .08); }

.login__panel { display: flex; align-items: center; justify-content: center; padding: 40px 24px; }
.login__box {
  width: 100%; max-width: 396px; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: 30px 30px 22px;
  box-shadow: 0 20px 60px rgba(76, 29, 149, .10);
}
.login__box h2 { margin: 0 0 6px; font-size: 19px; font-weight: 650; color: var(--ink); }
.login__sub { margin: 0 0 20px; font-size: 12.5px; color: var(--ink-3); }
.login__tabs { display: flex; gap: 4px; padding: 4px; background: var(--bg-2); border-radius: 8px; margin-bottom: 4px; }
.login__tabs button {
  flex: 1; padding: 8px; border: 0; border-radius: 6px; background: none;
  font-family: inherit; font-size: 13px; color: var(--ink-3); cursor: pointer;
}
.login__tabs button.on { background: #fff; color: var(--cms-deep); font-weight: 600; box-shadow: 0 1px 3px rgba(16, 22, 28, .08); }
.login__form { display: none; }
.login__form.on { display: block; }
.login__label { display: block; margin: 14px 0 6px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); }
.login__input {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 8px;
  font-family: inherit; font-size: 14px; color: var(--ink); background: #fff;
}
.login__input:focus { outline: 0; border-color: var(--cms); box-shadow: 0 0 0 3px rgba(139, 92, 246, .13); }
.login__row { display: flex; gap: 8px; }
.login__row .login__input { flex: 1 1 auto; min-width: 0; }
.login__code {
  flex: 0 0 112px; border: 1px solid var(--line); background: #fff; border-radius: 8px;
  font-family: inherit; font-size: 12.5px; color: var(--cms-deep); cursor: pointer;
}
.login__code:disabled { color: var(--ink-3); cursor: default; }
.login__submit {
  width: 100%; margin-top: 20px; padding: 12px; border: 0; border-radius: 8px;
  background: linear-gradient(135deg, #a855f7, #7c3aed); color: #fff;
  font-family: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer;
  box-shadow: 0 6px 18px rgba(124, 58, 237, .28);
}
.login__submit:hover { filter: brightness(1.06); }
.login__submit:disabled { opacity: .6; cursor: default; }
.login__switch { margin: 14px 0 0; font-size: 12.5px; color: var(--ink-3); text-align: center; }
.login__switch button {
  border: 0; background: none; padding: 0; color: var(--cms-deep);
  font-family: inherit; font-size: 12.5px; cursor: pointer;
}
.login__foot {
  margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--line-2);
  font-size: 11.5px; color: var(--ink-3); text-align: center;
}
.login__foot a { color: var(--cms-deep); }

/* ---------- 响应式 ---------- */
@media (max-width: 1100px) {
  .astats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .acols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 920px) {
  .alayout { grid-template-columns: minmax(0, 1fr); }
  .amenu {
    position: static; height: auto; display: flex; gap: 4px; overflow-x: auto;
    padding: 8px; border-right: 0; border-bottom: 1px solid var(--line);
    scrollbar-width: none;
  }
  .amenu::-webkit-scrollbar { display: none; }
  .amenu__group { display: flex; gap: 4px; }
  .amenu__group + .amenu__group { margin: 0; padding: 0; border: 0; }
  .amenu__label, .amenu__foot { display: none; }
  .amenu__item { white-space: nowrap; padding: 8px 12px; }
  .amain { padding: 16px 14px 48px; }
  .astats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .amodal__box { margin: 2vh auto; max-height: 96vh; width: calc(100% - 16px); }
}
@media (max-width: 760px) {
  .atable__hd { display: none; }
  .atable__tr { grid-template-columns: minmax(0, 1fr) auto; padding: 11px 14px; }
  .atable__tr > .atable__td { display: none; }
  .atable__tr > .atable__td--t,
  .atable__tr > .atable__td--ops { display: flex; }
  .atable__td--t { grid-column: 1; display: block !important; }
  .atable__td--ops { grid-column: 2; }
  .aslides { grid-template-columns: 1fr; padding: 12px; }
  .ahead { padding: 0 12px; gap: 8px; }
  .ahead__link { display: none; }
}
@media (max-width: 900px) {
  .login { grid-template-columns: 1fr; min-height: auto; }
  .login__brand { padding: 26px 22px 30px; }
  .login__brandmid h1 { font-size: 23px; margin-bottom: 10px; }
  .login__brandmid p { font-size: 12.5px; margin-bottom: 16px; }
  .login__list { display: none; }
  .login__panel { padding: 22px 16px 40px; }
  .login__box { padding: 24px 20px 18px; }
  /* 手机端品牌区变矮，space-between 没有多余空间，版权行会贴住正文 */
  .login__copy { margin-top: 18px; }
}

/* 工具栏里的下拉/搜索不要撑满整行 */
.acard__tools .cms-sel,
.acard__tools .cms-inp { width: auto; }
.acard__tools .cms-sel { flex: 0 0 auto; min-width: 120px; }
.acard__tools .cms-inp { flex: 0 1 220px; min-width: 120px; }
@media (max-width: 620px) {
  .acard__tools .cms-inp { flex: 1 1 auto; }
}

/* 弹窗内的分屏：两栏顶部对齐，预览不低于编辑器 */
.ameditwrap, .ameditwrap.split { align-items: start; }
.ameditwrap.split .ampreview { min-height: 300px; }

/* ==========================================================================
   前台版心加宽适配（--maxw 1180 → 1360）
   思路：整页容器放宽，但「正文阅读块」单独限宽，避免行过长；
        留白与间距随屏幕宽度分级放大，大屏不显松散、小屏不显局促。
   ========================================================================== */

/* --- 超宽屏：再给一点呼吸感，避免内容贴边或大块留白 --- */
@media (min-width: 1600px) {
  /* 超宽屏再放宽一点版心，避免两侧留白过大 */
  :root { --maxw: 1400px; }
}
@media (min-width: 1440px) {
  .section { padding: 108px 0; }
  .section--tight { padding: 82px 0; }
  .pagehead { padding: 82px 0 72px; }
  .hero__grid { padding-top: 116px; padding-bottom: 124px; }
  .foot { padding: 76px 0 34px; }
}

/* --- 宽屏：栏间距、字号、图片比例随版心同步放大 --- */
@media (min-width: 1200px) {
  .hero__grid { gap: 76px; grid-template-columns: 1.02fr .98fr; }
  .hero h1 { font-size: 54px; }
  .split { gap: 84px; }
  .cards { gap: 30px; }
  .vg-hcards { gap: 28px; }
  .foot__grid { gap: 52px; }
  .np__cover { flex-basis: 236px; }
  /* 版心变宽后，图片区块略微压低高度，避免首页首屏过高 */
  .hg__stage, .hero__art { aspect-ratio: 4 / 3; }
  .lead { max-width: 760px; }
  .cta p { max-width: 680px; }
}

/* --- 正文阅读块：任何屏幕都限制舒适行长（约 38~42 个汉字/行宽） --- */
.lead { max-width: 760px; }
.post { max-width: 820px; }
.post__lead { max-width: 720px; }
.np__t { max-width: 880px; }
.np__s { max-width: 820px; }
.cta p { max-width: 680px; }
.qrbar__grid { max-width: 900px; }

/* --- 卡片内文字：宽屏下保持紧凑，不让段落被拉成一条长线 --- */
.card p, .relcard p { max-width: 42em; }

/* --- 中等屏幕（平板横向）：版心收窄时同步缩小栏间距 --- */
@media (max-width: 1199px) and (min-width: 981px) {
  .hero__grid { gap: 56px; }
  .split { gap: 60px; }
  .foot__grid { gap: 36px; }
}

/* --- 服务页板块头：左标题 / 右简介，避免右侧整列留空 --- */
.cathead {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px; align-items: end;
}
.cathead__l .rule { margin-bottom: 22px; }
.cathead__r p {
  margin: 0 0 24px; color: var(--ink-2); font-size: 16.5px; line-height: 1.8;
  max-width: 34em;
}
@media (min-width: 1440px) { .cathead { gap: 72px; } }
@media (max-width: 980px) {
  .cathead { grid-template-columns: 1fr; gap: 18px; align-items: start; }
  .cathead__l .rule { margin-bottom: 18px; }
}

/* ---------- 客户留言：筛选工具条与操作（v5） ---------- */
.ainq-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ainq-tools .cms-inp { flex: 0 1 200px; min-width: 140px; }
@media (max-width: 620px) {
  .ainq-tools { width: 100%; }
  .ainq-tools .cms-inp { flex: 1 1 100%; }
}
.ainq--done { background: #fbfcfd; }
.ainq--done .ainq__msg { color: var(--ink-3); }
.ainq__hd-r { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.ainq__ops { display: flex; gap: 4px; justify-content: flex-end; margin-top: 10px; flex-wrap: wrap; }
.ainq__body { font-size: 13px; color: var(--ink-2); margin-top: 6px; }
.ainq__svc {
  display: inline-block; font-size: 11.5px; color: var(--cms-deep);
  background: var(--cms-soft); border-radius: 999px; padding: 1px 9px; margin-left: 6px;
}

/* ---------- 新闻页：内容类型筛选（与后台「文章/新闻」口径一致） ---------- */
.np-kinds {
  display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 16px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px;
}
.np__kindbtn {
  border: 0; background: none; font-family: inherit; font-size: 13.5px;
  color: var(--ink-3); padding: 6px 16px; border-radius: 999px;
  cursor: pointer; transition: color .18s, background .18s;
}
.np__kindbtn:hover { color: var(--ink); }
.np__kindbtn.on {
  background: #fff; color: var(--brand); font-weight: 600;
  box-shadow: 0 1px 3px rgba(16, 22, 28, .09);
}
/* 卡片上的类型标记：中性色，不与来源徽章（微信绿/官网灰）抢注意力 */
.np__kind {
  color: var(--ink-3); background: #fff; border: 1px solid var(--line);
  padding: 1px 8px; border-radius: 999px; font-size: 11.5px;
}
@media (max-width: 560px) {
  .np-kinds { width: 100%; justify-content: space-between; }
  .np__kindbtn { flex: 1 1 0; padding: 6px 8px; }
}

/* 留言工具条：下拉不要被基础样式的 width:100% 撑满 */
.ainq-tools .cms-sel { width: auto; flex: 0 0 auto; min-width: 128px; }
.ainq-tools .btn { flex: 0 0 auto; }

/* 留言工具条：桌面端保持单行（下拉 + 搜索 + 刷新），窄屏再换行 */
.ainq-tools { flex-wrap: nowrap; }
.ainq-tools .cms-inp { flex: 1 1 160px; min-width: 120px; }
@media (max-width: 720px) {
  .ainq-tools { flex-wrap: wrap; width: 100%; }
  .ainq-tools .cms-inp { flex: 1 1 100%; }
}

/* ---------- 站点设置页（v6） ---------- */
.set-card { margin-bottom: 16px; }
.set-card .acard__hd { align-items: flex-start; }
.set-card .acard__hd h3 { font-size: 15px; }
.set-card__ops { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.set-body {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px;
  padding: 16px 18px 2px;
}
.set-body .amfield { margin-bottom: 16px; }
.set-list-wrap { grid-column: 1 / -1; }
.set-list { display: flex; flex-direction: column; gap: 10px; }
.set-item {
  border: 1px solid var(--line); border-radius: 8px;
  padding: 12px 14px 0; background: #fcfcfd;
}
.set-item__hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.set-item__hd b { font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.set-item__body { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.set-item__body .amfield { margin-bottom: 12px; }
.set-add {
  border: 1px dashed var(--line); background: #fff; border-radius: 8px;
  padding: 9px; font-size: 13px; color: var(--cms-deep);
  cursor: pointer; font-family: inherit; transition: .16s;
}
.set-add:hover { border-color: var(--cms); background: var(--cms-soft); }
@media (max-width: 900px) {
  .set-body, .set-item__body { grid-template-columns: 1fr; }
}

/* 设置页：多行字段占满整行，条目头与内容之间加分隔 */
.set-item { padding: 12px 14px 2px; }
.set-item__hd {
  margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 1px dashed var(--line-2);
}
.set-item__body .amfield--wide { grid-column: 1 / -1; }
.set-item__body .amfield--wide .cms-area { min-height: 62px; }

/* 设置页：可折叠小节（「关于我们」的页头 / 简介 / 优势 / 历程 / FAQ / 行动区） */
.set-sec {
  grid-column: 1 / -1;
  border: 1px solid var(--line); border-radius: 10px;
  background: #fff; margin-bottom: 14px;
}
.set-sec > summary {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 600; color: var(--ink);
  user-select: none;
}
.set-sec > summary::-webkit-details-marker { display: none; }
.set-sec > summary::before {
  content: '▸'; font-size: 11px; color: var(--ink-3);
  line-height: 1; transition: transform .15s;
}
.set-sec[open] > summary::before { transform: rotate(90deg); }
.set-sec[open] > summary { border-bottom: 1px dashed var(--line-2); margin-bottom: 14px; }
.set-sec__body {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px;
  padding: 0 14px 2px;
}
.set-sec__body .set-list-wrap { grid-column: 1 / -1; }
@media (max-width: 900px) { .set-sec__body { grid-template-columns: 1fr; } }

/* 分类管理：一行一个分类 */
.acatlist { padding: 4px 0; }
.acatrow {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 18px; border-top: 1px solid var(--line-2);
  font-size: 13.5px; color: var(--ink-2);
}
.acatrow:first-child { border-top: 0; }
.acatrow__name { font-weight: 600; color: var(--ink); flex: 0 0 190px; }
.acatrow__slug {
  flex: 1 1 auto; min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acatrow__meta { flex: 0 0 170px; color: var(--ink-3); font-size: 12.5px; }
.acatrow__sort { flex: 0 0 66px; color: var(--ink-3); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.acatrow__ops { flex: 0 0 auto; display: flex; gap: 8px; }
@media (max-width: 900px) {
  .acatrow { flex-wrap: wrap; gap: 8px 12px; }
  .acatrow__name { flex: 1 1 100%; }
  .acatrow__slug, .acatrow__meta, .acatrow__sort { flex: 0 0 auto; }
}

/* 媒体库：素材网格 */
.amedia {
  display: grid; gap: 14px; padding: 16px 18px;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
}
.amedia__i {
  margin: 0; border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; background: #fcfcfd;
}
.amedia__ph {
  aspect-ratio: 4 / 3; background: #f2f3f5;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3); font-size: 12px; letter-spacing: .06em;
}
.amedia__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.amedia__b { padding: 9px 10px 10px; }
.amedia__n {
  margin: 0; font-size: 12.5px; color: var(--ink); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-all;
}
.amedia__m {
  margin: 4px 0 0; font-size: 11.5px; color: var(--ink-3);
  display: flex; gap: 10px; font-variant-numeric: tabular-nums;
}
.amedia__ops { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }

/* 媒体库选择器里的卡片可点 */
.amedia__i--pick { cursor: pointer; transition: border-color .16s, box-shadow .16s, transform .16s; }
.amedia__i--pick:hover {
  border-color: var(--cms); transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(16, 22, 28, .09);
}
.amedia__i--pick .amedia__b { padding-bottom: 6px; }
.amedia__full { display: flex; justify-content: center; background: #f6f7f9; border-radius: 8px; padding: 10px; }
.amedia__full img { max-width: 100%; height: auto; display: block; border-radius: 4px; }

/* 视频案例卡片：时长角标 */
.aslide__dur {
  position: absolute; right: 8px; bottom: 8px;
  font-size: 11px; color: #fff; font-variant-numeric: tabular-nums;
  background: rgba(16, 22, 28, .66); padding: 1px 7px; border-radius: 4px;
  backdrop-filter: blur(4px);
}

/* 视频案例：弹窗内封面预览收窄，列表无封面占位 */
.amcover--sm { max-width: 280px; }
.aslide__ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--ink-3); background: var(--bg-2);
}

/* ---------- 访问统计 ---------- */
.anbars {
  display: flex; gap: 8px; align-items: stretch;
  padding: 18px 18px 10px; height: 210px; box-sizing: border-box;
}
.anbar { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.anbar__stack { position: relative; flex: 1 1 auto; min-height: 0; }
.anbar__stack span {
  position: absolute; bottom: 0;
  border-radius: 3px 3px 0 0; transition: height .25s ease;
}
/* PV / UV 并排两根细柱 —— 叠在一起时浅色会被深色完全盖住，看不出访客数 */
.anbar__pv { left: 0; right: 54%; background: linear-gradient(180deg, #a78bfa, #7c3aed); }
.anbar__uv { left: 54%; right: 0; background: #e4d9fb; }
.anbar:hover .anbar__pv { background: linear-gradient(180deg, #8b5cf6, #6d28d9); }
.anbar em {
  display: block; margin-top: 6px; font-style: normal;
  font-size: 10.5px; color: var(--ink-3); text-align: center;
  white-space: nowrap; overflow: hidden;
}

.anlist { padding: 6px 18px 14px; }
.anrow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-top: 1px dashed var(--line-2); font-size: 13px; color: var(--ink-2);
}
.anrow:first-child { border-top: 0; }
.anrow b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.anrow b i { font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--ink-3); margin-left: 4px; }
.anrow--sub { font-size: 12.5px; color: var(--ink-3); padding: 7px 0; }
.anrow__p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anlist__cap {
  margin: 14px 0 2px; font-size: 11px; letter-spacing: .06em;
  color: var(--ink-3); text-transform: uppercase;
}

/* ==========================================================================
   后台视觉调优（2026-11-04）
   目标：层次分明、边界清晰、模块易于识别，且不改变任何交互行为。

   三条原则：
   1. 底 / 面分离 —— 内容区改浅冷灰底，卡片纯白上浮，边界不靠描边也能看清
   2. 页头分区 —— 页面标题下加分割线，把「这是哪个页面」和「页面里有什么」断开
   3. 紫色只给交互态 —— 当前菜单项、主按钮、链接用紫；分组标签、表头等中性元素回归灰阶，
      避免整页到处发紫反而失去重点
   间距统一到 8 的倍数（8 / 12 / 16 / 18 / 24）
   ========================================================================== */

body.admin-body {
  --adm-bg: #eef1f5;
  --adm-line: #e3e7ed;
  --adm-line-2: #eef1f5;
  --adm-ink-3: #7b8492;
  --adm-card-shadow: 0 1px 2px rgba(16, 22, 28, .04), 0 6px 18px rgba(16, 22, 28, .045);
  background: var(--adm-bg);
}

/* ---------- 顶栏：与侧栏共用白底，靠底线收边 ---------- */
.ahead {
  height: 60px;
  border-bottom: 1px solid var(--adm-line);
}
.alayout {
  grid-template-columns: 216px minmax(0, 1fr);
  min-height: calc(100vh - 60px);
}

/* ---------- 侧栏：分组更清楚，当前项加左侧色条 ---------- */
.amenu {
  top: 60px; height: calc(100vh - 60px);
  border-right: 1px solid var(--adm-line);
  padding: 16px 12px 28px;
}
.amenu__group + .amenu__group {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px dashed var(--adm-line);
}
.amenu__label {
  margin: 0 0 8px; padding: 0 12px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  color: #8d96a4;
}
.amenu__item {
  padding: 9px 12px; border-radius: 8px;
  font-size: 13.5px;
}
.amenu__item:hover { background: #f2f4f8; color: var(--ink); }
.amenu__item.on {
  background: #f1edfe; color: var(--cms-deep); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--cms);
}
.amenu__badge { background: #eef0f4; color: #6f7887; }
.amenu__item.on .amenu__badge { background: var(--cms-deep); color: #fff; }

/* ---------- 主区与页头 ---------- */
.amain { padding: 24px 28px 72px; }
.apage__hd {
  align-items: flex-start;
  margin-bottom: 20px; padding-bottom: 15px;
  /* 比卡片描边深一档：这条线是「页头 / 内容」的分界，太浅就等于没画 */
  border-bottom: 1px solid #d5dce6;
}
.apage__hd h2 { font-size: 21px; letter-spacing: -.01em; }
.apage__hd p { margin-top: 6px; color: var(--adm-ink-3); }

/* ---------- 卡片：去掉头部紫渐变，改用纯白 + 柔和投影 ---------- */
.acard {
  border: 1px solid var(--adm-line);
  border-radius: 12px;
  box-shadow: var(--adm-card-shadow);
}
.acard__hd {
  padding: 14px 18px;
  border-bottom: 1px solid var(--adm-line);
  background: #fff;
}
.acard__hd h3 { font-size: 14.5px; font-weight: 650; }
.acard__tools {
  padding: 12px 18px;
  border-bottom: 1px solid var(--adm-line-2);
}
/* 只有页面的「顶层卡片」之间才有堆叠间距，避免破坏 acols 两列并排 */
.apage > .acard + .acard { margin-top: 18px; }

/* ---------- 概览统计卡 ---------- */
.astats { gap: 14px; margin-bottom: 18px; }
/* 访问统计只有 4 张卡，单独一档；不用行内样式，否则窄屏的列数规则会被绕过 */
.astats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.astat {
  border: 1px solid var(--adm-line); border-radius: 12px;
  padding: 18px 18px 16px;
  box-shadow: var(--adm-card-shadow);
}
.astat b { font-size: 27px; letter-spacing: -.02em; }
.astat span { font-size: 12px; color: var(--adm-ink-3); }
.astat:hover {
  border-color: var(--cms);
  box-shadow: 0 8px 22px rgba(124, 58, 237, .14);
  transform: translateY(-2px);
}

/* ---------- 表格：表头带 + 行分隔更清晰 ---------- */
.atable__hd, .atable__tr { padding: 12px 18px; }
.atable__hd {
  background: #f2f5f9; color: #626b7a; font-weight: 600;
  border-bottom: 1px solid #dfe4ec;
}
.atable__tr { border-top: 1px solid var(--adm-line-2); }
.atable__tr:hover { background: #faf9ff; }

/* ---------- 概览列表 / 快捷入口 ---------- */
.arecent__row:hover { background: #faf9ff; }
.aquick__btn { border-style: solid; border-color: var(--adm-line); }
.aquick__btn:hover { border-color: var(--cms); box-shadow: 0 4px 12px rgba(124, 58, 237, .08); }

/* ---------- 设置页折叠小节 ---------- */
.set-sec { border-color: var(--adm-line); }

/* ---------- 响应式：侧栏收窄 → 横向导航 ---------- */
@media (max-width: 1100px) {
  .alayout { grid-template-columns: 196px minmax(0, 1fr); }
  .astats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 920px) {
  /* 两行：菜单按内容高度，内容区吃掉剩余空间。
     否则 .amenu 作为 grid 子项会被拉伸，横向菜单里的当前项会撑成一整块色方块。 */
  .alayout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .amenu {
    position: static; top: auto; height: auto; align-self: start;
    border-right: 0; border-bottom: 1px solid var(--adm-line);
    padding: 8px 10px;
  }
  /* 横排时 flex 子项默认被拉伸，这里压回内容高度 */
  .amenu__group { align-items: center; }
  /* 分组之间用竖线隔开，横排也能看出「内容 / 商品 / 首页 / 客户 / 站点」 */
  .amenu__group + .amenu__group {
    margin: 0 0 0 6px; padding: 0 0 0 10px;
    border-top: 0; border-left: 1px solid var(--adm-line);
  }
  .amenu__item { padding: 7px 10px; font-size: 13px; }
  /* 横排导航时左侧色条不合用，改成底部短横线 */
  .amenu__item.on { box-shadow: inset 0 -2px 0 var(--cms); }
  .amain { padding: 18px 14px 56px; }
  .apage__hd { padding-bottom: 12px; margin-bottom: 16px; }
  .apage__hd h2 { font-size: 19px; }
}
@media (max-width: 620px) {
  .astats { gap: 10px; }
  .astat { padding: 14px; }
  .astat b { font-size: 23px; }
  .atable__hd, .atable__tr { padding: 11px 14px; }
}

/* ==========================================================================
   站点设置：模块识别色
   五个模块各配一个色相，饱和度与明度落在同一区间（中饱和 / 中深），
   所以彼此能区分，又不会像五种品牌色拼在一起。

   可编辑 / 不可编辑的分界：
   - 输入框、下拉、多行文本 → 模块色浅底 + 同色描边
   - 标签、说明文字、卡片底 → 白底或灰字
   聚焦时输入框转白、描边加深，正在编辑的字段会「跳出来」。
   ========================================================================== */

.set-card { --mod: #7c3aed; --mod-tint: #f1eaff; --mod-line: #d8c9fa; }
.set-card[data-key="about"]   { --mod: #2563eb; --mod-tint: #e8f0ff; --mod-line: #c6dafc; }
.set-card[data-key="contact"] { --mod: #0d9488; --mod-tint: #e4f8f4; --mod-line: #b2e4db; }
.set-card[data-key="footer"]  { --mod: #b45309; --mod-tint: #fcf1df; --mod-line: #eed4ac; }
.set-card[data-key="fab"]     { --mod: #be185d; --mod-tint: #fcebf2; --mod-line: #f2c4d8; }

/* 卡片左侧 4px 色条 —— 用 inset 阴影实现，不占布局宽度 */
.set-card { margin-bottom: 18px; box-shadow: var(--adm-card-shadow), inset 4px 0 0 var(--mod); }

/* 模块标题：放大加粗 + 色点 + 浅色标题带 */
.set-card .acard__hd {
  background: var(--mod-tint);
  border-bottom: 1px solid var(--mod-line);
}
.set-card .acard__hd h3 {
  display: flex; align-items: center; gap: 9px;
  font-size: 17px; font-weight: 700; letter-spacing: -.01em;
}
.set-card .acard__hd h3::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: var(--mod); flex: 0 0 auto;
}
.set-card .acard__hd p { color: #636b7a; }

/* 可编辑区：模块色浅底，和白底的非编辑区一眼分开 */
.set-card .cms-inp,
.set-card .cms-area,
.set-card .cms-sel {
  background: var(--mod-tint);
  border-color: var(--mod-line);
}
.set-card .cms-inp:focus,
.set-card .cms-area:focus,
.set-card .cms-sel:focus {
  background: #fff;
  border-color: var(--mod);
  box-shadow: 0 0 0 3px rgba(16, 22, 28, .06);
}
.set-card .amfield > label { color: #5b636f; }

/* 列表条目：白底，衬托其中的彩色输入框 */
.set-card .set-item { background: #fff; border-color: var(--mod-line); }
.set-card .set-item__hd { border-bottom-color: var(--mod-line); }
.set-card .set-item__hd b { color: var(--mod); }

/* 添加按钮跟随模块色 */
.set-card .set-add { border-color: var(--mod-line); color: var(--mod); }
.set-card .set-add:hover { background: var(--mod-tint); border-color: var(--mod); }

/* 折叠小节（「关于我们」有 6 个） */
.set-card .set-sec { border-color: var(--mod-line); }
.set-card .set-sec > summary { background: var(--mod-tint); }
.set-card .set-sec[open] > summary { border-bottom-color: var(--mod-line); }

/* 卡片内的文字按钮也跟随模块色（删除按钮除外，红是危险色要保留） */
.set-card .cms-op:not(.cms-op--danger) { color: var(--mod); }
.set-card .cms-op:not(.cms-op--danger):hover { text-decoration: underline; }

/* 保存按钮改成模块色，避免蓝卡片里孤零零一个紫按钮 */
.set-card .cms-btn--primary { background: var(--mod); border-color: var(--mod); }
.set-card .cms-btn--primary:hover { filter: brightness(.93); }

/* ---------- 视频案例：上传区 ---------- */
.amvid {
  border: 1px dashed var(--line); border-radius: 8px;
  padding: 16px; text-align: center; background: #fcfcfd;
  cursor: pointer; transition: border-color .16s, background .16s;
}
.amvid:hover { border-color: var(--cms); background: #fdfcff; }
.amvid.is-drop { border-color: var(--cms); background: var(--cms-soft); }
.amvid__ph { font-size: 12.5px; color: var(--ink-3); line-height: 1.8; }
.amvid__ph b { color: var(--cms-deep); font-weight: 600; }
.amvid__ph span { display: block; font-size: 11.5px; color: #98a1ad; margin-top: 2px; }
.amvid__player {
  width: 100%; max-height: 280px; border-radius: 6px;
  background: #000; display: block;
}
/* 这两个元素设了 display，会盖掉 UA 的 [hidden]{display:none}，
   不补这条的话「未上传」时也会露出一块黑屏播放器和 0% 进度条 */
.amvid__player[hidden], .amvid__bar[hidden] { display: none !important; }

/* 上传进度条 */
.amvid__bar { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.amvid__bar i {
  flex: 1; height: 6px; border-radius: 3px;
  background: #eceff3; position: relative; overflow: hidden;
}
.amvid__bar i::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: var(--p, 0%); background: linear-gradient(90deg, #a78bfa, #7c3aed);
  transition: width .12s linear;
}
.amvid__bar em {
  font-style: normal; font-size: 11.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; min-width: 38px; text-align: right;
}

/* 列表卡片：视频首帧 + 播放按钮 */
.aslide__vid { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
.aslide__playbtn {
  position: absolute; inset: 0; width: 100%; border: 0;
  background: rgba(16, 22, 28, .22); color: #fff; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .16s; font-family: inherit;
}
.aslide__playbtn:hover { background: rgba(16, 22, 28, .42); }

/* 预览弹窗 */
.amvid__preview { background: #000; border-radius: 8px; overflow: hidden; }
.amvid__preview video { width: 100%; max-height: 60vh; display: block; background: #000; }

/* ---------- 素材选择器：类型标签页 + 视频库 ---------- */
.mpick__tabs {
  display: flex; gap: 6px; padding: 10px 20px 0;
  border-bottom: 1px solid var(--line-2);
}
.mpick__tabs button {
  border: 0; background: none; cursor: pointer; font-family: inherit;
  padding: 8px 14px 10px; font-size: 13px; color: var(--ink-3);
  border-bottom: 2px solid transparent; transition: color .16s, border-color .16s;
}
.mpick__tabs button:hover { color: var(--ink); }
.mpick__tabs button.on {
  color: var(--cms-deep); font-weight: 600; border-bottom-color: var(--cms);
}

.mpick__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 18px 0;
}

/* 视频库网格 */
.mvid {
  display: grid; gap: 14px; padding: 14px 18px 18px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.mvid__i {
  margin: 0; border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; background: #fcfcfd; cursor: pointer;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.mvid__i:hover {
  border-color: var(--cms); transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(124, 58, 237, .12);
}
.mvid__i video {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  display: block; background: #000;
}
.mvid__b { padding: 9px 11px 10px; }
.mvid__n {
  margin: 0; font-size: 12px; color: var(--ink); line-height: 1.45;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mvid__m {
  margin: 4px 0 0; font-size: 11.5px; color: var(--ink-3);
  display: flex; gap: 10px; font-variant-numeric: tabular-nums;
}

/* 轮播素材失效时的兜底：不显示破图/坏播放器，给一块深色底 + 提示 */
.hg-slide.is-broken { background: #10161c; }
.hg-slide.is-broken::before {
  content: '素材暂不可用';
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, .55); font-size: 13px; letter-spacing: .1em;
}

/* 轮播列表：素材链接失效的标记 */
.aslide--broken { border-color: #f0c9c9; }
.aslide__broken {
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  background: rgba(192, 57, 43, .92); color: #fff;
  font-size: 10.5px; padding: 2px 8px; border-radius: 999px;
}

/* ==========================================================================
   登录弹层：登录方式切换
   --------------------------------------------------------------------------
   以前 .tabs 只做了页签视觉，.tab-panel 完全没有显隐规则 ——
   app.js 虽然会给面板切换 .on 类，但缺 CSS 就变成手机号、邮箱两套表单
   同时铺在弹层里，长到超出屏幕。这里补上显隐，并把页签改成卡片式切换。
   ========================================================================== */

/* 面板显隐：只显示当前方式 */
.modal .tab-panel { display: none; }
.modal .tab-panel.on { display: block; }

/* 方式卡片：两列并排，选中态用品牌色描边 + 浅底 + 右上勾选 */
.modal .tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  border-bottom: 0; margin-bottom: 18px;
}
.modal .tabs button {
  position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr);
  grid-template-rows: auto auto; align-items: center; gap: 1px 9px;
  flex: none; margin: 0; padding: 12px 13px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  text-align: left; font-family: inherit; color: var(--ink-2);
  transition: border-color .16s, background .16s, box-shadow .16s;
}
.modal .tabs button:hover { border-color: #d9b8bc; background: #fdfbfb; }
.modal .tabs button svg {
  grid-row: 1 / span 2; width: 24px; height: 24px; color: var(--ink-3);
  transition: color .16s;
}
.modal .tabs button b {
  display: block; font-size: 14px; font-weight: 600; color: var(--ink);
  line-height: 1.35; transition: color .16s;
  /* 给右上角勾选留位，否则选中时勾会压住标题末字 */
  padding-right: 16px;
}
.modal .tabs button span {
  display: block; font-size: 11.5px; color: var(--ink-3); line-height: 1.5;
}
.modal .tabs button.on {
  border-color: var(--brand); background: var(--brand-soft);
  box-shadow: 0 0 0 1px var(--brand) inset;
}
.modal .tabs button.on b { color: var(--brand); }
.modal .tabs button.on svg { color: var(--brand); }
.modal .tabs button.on::after {
  content: '✓'; position: absolute; top: 7px; right: 9px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--brand); color: #fff;
  font-size: 10px; line-height: 15px; text-align: center; font-weight: 700;
}

/* 邮箱验证码模式的说明行 */
.modal .modal__hint {
  margin: 2px 0 12px; font-size: 12.5px; line-height: 1.7; color: var(--ink-3);
}

/* 邮箱面板内部：密码登录 / 验证码登录 的二级切换 */
.modal .subtabs {
  display: flex; gap: 4px; padding: 4px; margin-bottom: 4px;
  background: var(--bg-2); border-radius: 8px;
}
.modal .subtabs button {
  flex: 1; padding: 7px 6px; border: 0; border-radius: 6px; background: none;
  font-family: inherit; font-size: 12.5px; color: var(--ink-3); cursor: pointer;
  transition: background .16s, color .16s;
}
.modal .subtabs button:hover { color: var(--ink); }
.modal .subtabs button.on {
  background: #fff; color: var(--brand); font-weight: 600;
  box-shadow: 0 1px 3px rgba(16, 22, 28, .08);
}

/* 手机端：弹层收窄内边距，矮屏可滚动，避免底部按钮被切 */
@media (max-width: 480px) {
  .modal__box {
    margin: 4vh auto 0; padding: 30px 22px 26px;
    max-height: calc(100vh - 6vh); overflow-y: auto;
  }
  .modal__title { font-size: 21px; }
  .modal__sub { margin-bottom: 20px; }
}

/* 窄屏：两张方式卡片仍并排，但收紧内边距与图标 */
@media (max-width: 420px) {
  .modal .tabs { gap: 8px; }
  .modal .tabs button { grid-template-columns: 22px minmax(0, 1fr); padding: 10px 11px; }
  .modal .tabs button svg { width: 20px; height: 20px; }
  .modal .tabs button b { font-size: 13px; }
  .modal .tabs button span { font-size: 11px; }
  .modal .tabs button.on::after { top: 5px; right: 6px; }
}

/* ==========================================================================
   登录页 / 登录弹层：logo 融入
   --------------------------------------------------------------------------
   放置思路：
   1. 主位置是「表单顶部」—— logo 与标题、表单左对齐，构成一条从品牌到操作的
      垂直轴线，视线自然从上往下走；尺寸控制在标题的 3 倍宽以内，不抢主标题。
   2. 登录管理后台的右侧表单区再加一层水印：卡片本身不透明，水印只出现在卡片
      四周的留白里，因此不可能压在输入框、按钮或说明文字上。
   3. 左侧紫色品牌区保留原有的白色 logo（它承担「这是谁的平台」的第一印象），
      与右侧原色 logo 分工不同，不重复。
   ========================================================================== */

/* ---------- 前台登录弹层：标题上方的品牌行 ---------- */
.modal__brand {
  /* 水平居中：只作用于 logo 这一行，标题与表单仍保持左对齐 */
  margin: 0 0 12px; text-align: center;
}
.modal__brand img {
  display: block; width: 120px; height: auto;
  /* margin:auto 而非依赖 text-align —— 图片是块级元素时 text-align 不生效，
     两处都写可以保证任何父级样式下都居中 */
  margin: 0 auto;
  /* 原色 logo 白底上有透明通道，这里不需要任何滤镜 */
}

/* ---------- 管理后台登录页 ---------- */
.login__mark { margin: 0 0 14px; text-align: center; }
.login__mark img { display: block; width: 140px; height: auto; margin: 0 auto; }
/* logo 下方与标题之间留白靠 margin 控制，标题原有上边距一并归零，避免叠加 */
.login__box h2 { margin-top: 0; }

/* 表单区水印：只出现在卡片四周的留白上 */
.login__panel { position: relative; overflow: hidden; }
.login__panel::before {
  content: '';
  position: absolute; inset: 0;
  /* 贴右下角并故意越出边界 —— 居中会被卡片盖掉一半，等于白放 */
  background: url(../img/vengene-logo-sm.png) no-repeat;
  background-size: 520px auto;
  background-position: calc(100% - 34px) calc(100% + 58px);
  opacity: .085;
  pointer-events: none;      /* 纯装饰，不吃点击 */
}
.login__box { position: relative; z-index: 1; }

@media (max-width: 900px) {
  /* 手机端：上方品牌区已经有一枚 logo，卡片里不再重复；水印收掉，留白给表单 */
  .login__mark { display: none; }
  .login__panel::before { display: none; }
  .modal__brand img { width: 104px; }
}

/* ---------- 视频封面选帧浮层 ---------- */
.vcov .amodal__body { padding: 16px 18px 4px; }
.vcov__stage {
  position: relative; background: #000; border-radius: 8px; overflow: hidden;
  /* 视频没加载出来时容器会塌成 0 高，提示文字就看不见了 */
  min-height: 200px; display: flex; align-items: center; justify-content: center;
}
.vcov__video { flex: 1 1 auto; }
.vcov__video { display: block; width: 100%; max-height: 44vh; background: #000; }
.vcov__hint {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 0 24px; text-align: center; font-size: 13px; color: rgba(255, 255, 255, .74);
}
.vcov__hint--err { color: #ffb9b9; }
.vcov__bar { display: flex; align-items: center; gap: 12px; padding: 12px 2px 10px; flex-wrap: wrap; }
.vcov__time {
  min-width: 48px; font-size: 12.5px; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.vcov__strip {
  display: grid; gap: 8px; padding-bottom: 12px;
  grid-template-columns: repeat(8, minmax(0, 1fr));
}
.vcov__thumb {
  position: relative; padding: 0; line-height: 0; cursor: pointer;
  border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: #000;
}
.vcov__thumb img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.vcov__thumb em {
  position: absolute; right: 3px; bottom: 3px; padding: 0 4px; border-radius: 3px;
  font-style: normal; font-size: 10px; line-height: 1.6; color: #fff;
  background: rgba(0, 0, 0, .62);
}
.vcov__thumb:hover { border-color: #cfd6e0; }
.vcov__thumb.on { border-color: var(--cms); box-shadow: 0 0 0 2px rgba(124, 58, 237, .18); }
.vcov__thumb--bad { display: grid; place-items: center; min-height: 44px; color: #8b94a2; font-size: 14px; }

@media (max-width: 720px) {
  .vcov__strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .vcov__video { max-height: 32vh; }
}