/* =====================================================
   产品详情页（systems/*）主题层
   目的：把旧的「深空渐变 + 大圆角 + 投影」体系拉到与主站
   一致的「星图 / 精密制图」语言，同时保留每个产品页自己的
   内容结构（这些页面承载的是产品截图长图，不适合重排）。

   加载顺序（务必保持）：
     fonts → icons → styles.css（旧基础层）→ tokens.css（覆盖旧变量）
     → system-demos.css（旧组件层）→ system-theme.css（本文件）

   tokens.css 放在 styles.css 之后，旧变量（--deep-*、--radius-*、
   --gradient-*）会被自动映射到新令牌，圆角也一起收平；本文件只处理
   system-demos.css 里写死的圆角、投影与具体组件外观。
   ===================================================== */

/* ---------------- 1. 页面级色板 ---------------- */
/* 深色产品页：与主站夜间主题同源 */
body.demo-body,
body.demo-body.system-community,
body.demo-body.system-ai,
body.demo-body.system-dashboard {
  --st-bg: #060A14;
  --st-bg-2: #0A1120;
  --st-surface: #0E1729;
  --st-surface-2: #131E33;
  --st-plate: rgba(255, 255, 255, .045);
  --st-text: #F2F6FF;
  --st-text-2: #A8B6CE;
  --st-text-3: #7386A3;
  --st-rule: rgba(148, 178, 220, .16);
  --st-rule-strong: rgba(148, 178, 220, .30);
  --st-accent: #4C8DFF;
  --st-accent-2: #22D3EE;
  --st-fill: #1A66F0;
  --st-fill-hover: #0B4FD8;
  --st-on-fill: #FFFFFF;
}

/* 浅色产品页：与主站日间主题同源 */
body.demo-body.system-direct,
body.demo-body.system-education,
body.demo-body.system-member {
  --st-bg: #FFFFFF;
  --st-bg-2: #F5F7FB;
  --st-surface: #FFFFFF;
  --st-surface-2: #F8FAFD;
  --st-plate: #F5F7FB;
  --st-text: #0B1220;
  --st-text-2: #41506B;
  --st-text-3: #5B6574;
  --st-rule: rgba(11, 18, 32, .10);
  --st-rule-strong: rgba(11, 18, 32, .20);
  --st-accent: #0B4FD8;
  --st-accent-2: #12A6F5;
  --st-fill: #0B4FD8;
  --st-fill-hover: #083FB2;
  --st-on-fill: #FFFFFF;
}

/* 把旧组件层引用的 --demo-* 全部改指到 --st-*。
   选择器里带上 .system-* 是为了压过 system-demos.css 中
   各页自带的 --demo-* 声明（同特异度、后加载者胜）。 */
body.demo-body.system-community,
body.demo-body.system-ai,
body.demo-body.system-dashboard,
body.demo-body.system-direct,
body.demo-body.system-education,
body.demo-body.system-member {
  --demo-bg: var(--st-bg);
  --demo-surface: var(--st-surface);
  --demo-surface-strong: var(--st-surface);
  --demo-card: var(--st-plate);
  --demo-card-strong: var(--st-surface-2);
  --demo-border: var(--st-rule);
  --demo-border-strong: var(--st-rule-strong);
  --demo-text: var(--st-text);
  --demo-muted: var(--st-text-2);
  --demo-soft: var(--st-text-3);
  --demo-accent: var(--st-accent);
  --demo-accent-2: var(--st-accent-2);
  --demo-accent-3: var(--st-accent-2);
  --demo-glow: none;
}

body.demo-body {
  font-family: var(--font-sans);
  background: var(--st-bg);
  color: var(--st-text);
}

/* ---------------- 2. 全局几何归一 ----------------
   旧组件层有 60+ 处写死的圆角（14/18/20/22/24/28/32/999px）与
   20+ 处投影。逐个覆盖不可维护，这里一次性压平：
   圆角归零、投影归零，层次改由 hairline 与留白承担。
   截图本身是位图，容器变直角后观感更接近「图册里的展板」。 */
body.demo-body *,
body.demo-body *::before,
body.demo-body *::after {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ---------------- 3. 顶栏 ---------------- */
.demo-topbar {
  padding: 0;
  background: color-mix(in srgb, var(--st-bg) 92%, transparent);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--st-rule-strong);
}
.demo-topbar-inner { min-height: 66px; gap: 14px; }
/* 顶栏底部的刻度尺，和主站页头同一个记号 */
.demo-topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 4px;
  background-image: repeating-linear-gradient(90deg, var(--st-rule-strong) 0 1px, transparent 1px 13px);
  pointer-events: none;
}
.demo-brand { gap: 12px; }
/* 顶栏品牌标改用与主站同一枚五角星 mark，替换原本各异的产品图标 */
.demo-brand-mark {
  width: 34px;
  height: 34px;
  display: block;
  background: url("../img/brand/logo-mark.svg") center / 34px 34px no-repeat;
  border: 0;
  color: transparent;
  font-size: 0;
}
.demo-brand-mark i { display: none; }
.demo-brand-kicker {
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .18em;
}
.demo-brand-title { font-size: 1rem; letter-spacing: -.01em; }

/* ---------------- 4. 链接 / 按钮 ----------------
   主站按钮：实心面用「对角双切」（左上 + 右下），描边面保持直角 +
   底部 2px 指示条。这里复刻同一套，保持跨页一致。 */
.demo-link {
  --cut: 12px;
  position: relative;
  padding: 11px 18px;
  border: 1px solid var(--st-rule-strong);
  background: none;
  color: var(--st-text);
  font-size: .875rem;
  font-weight: 600;
  transition: border-color .22s, color .22s, background-color .22s;
}
.demo-link .fa-solid,
.demo-link .fa-brands { font-size: 11px; }
.demo-link:hover {
  transform: none;
  border-color: var(--st-accent);
  color: var(--st-accent);
  background: var(--st-plate);
}
.demo-link.is-primary {
  background: var(--st-fill);
  border-color: var(--st-fill);
  color: var(--st-on-fill);
  clip-path: polygon(
    var(--cut) 0,
    100% 0,
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    0 100%,
    0 var(--cut)
  );
}
.demo-link.is-primary:hover { background: var(--st-fill-hover); border-color: var(--st-fill-hover); color: var(--st-on-fill); }

/* ---------------- 5. 卡片容器 ---------------- */
.hero-copy-card,
.hero-media-card,
.demo-section-block,
.demo-footer-card {
  background: var(--st-surface);
  border: 1px solid var(--st-rule);
  padding: clamp(24px, 3vw, 36px);
}
/* 旧版用 ::before 画顶部渐变高光，换成左侧 accent 起笔刻度 */
.hero-copy-card::before,
.hero-media-card::before,
.demo-section-block::before {
  content: "";
  background: var(--st-accent);
  inset: auto auto auto 0;
  top: 0;
  left: 0;
  width: 44px;
  height: 2px;
  opacity: 1;
}
/* 主文案卡不需要外框，让首屏「文字直接落在星图上」 */
.hero-copy-card {
  background: none;
  border: 0;
  padding: clamp(20px, 2.6vw, 30px) 0;
}
.hero-copy-card::before { display: none; }

/* ---------------- 6. 眉标 / 标签 / 统计 ---------------- */
/* 首屏眉标沿用主站 .pill 的「左侧 2px 竖线」写法 */
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0 0 0 12px;
  border: 0;
  border-left: 2px solid var(--st-accent);
  background: none;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--st-text-2);
}
.hero-kicker i { font-size: 11px; color: var(--st-accent); }

/* 分区眉标（CASE VALUE 之类）沿用主站 .sec-index 的「26px 细线 + 等宽字」
   原组件用 ::before 画了渐变短线，这里改成实心 accent 细线，
   并去掉渐变（渐变在直角语言里是噪音） */
.demo-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--st-text-2);
}
.demo-eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--st-accent);
}

/* 卡片编号：原组件是 52×36 的圆角徽章并被拉满整宽（数字居中），
   改成左对齐的等宽编号，不再占据一整行 */
.showcase-index {
  display: inline-flex;
  justify-content: flex-start;
  justify-self: start;
  align-items: center;
  width: auto;
  min-width: 0;
  height: auto;
  padding: 0;
  margin-bottom: 10px;
  border: 0;
  background: none;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--st-accent);
}

.hero-tag,
.jump-chip,
.status-pill {
  padding: 5px 10px;
  border: 1px solid var(--st-rule-strong);
  background: none;
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .08em;
  color: var(--st-text-2);
}
.hero-tag-row { gap: 8px; }

/* 统计条：用竖线切分，不做成三个色块 */
.hero-stat-row { gap: 0; }
.hero-stat {
  padding: 0 var(--sp-4);
  border-left: 1px solid var(--st-rule);
  background: none;
}
.hero-stat:first-child { padding-left: 0; border-left: 0; }
.hero-stat-value {
  font-family: var(--font-mono);
  font-size: .9375rem;
  letter-spacing: .04em;
  color: var(--st-text);
}
.hero-stat-label { font-size: .8125rem; line-height: 1.7; color: var(--st-text-3); }

/* ---------------- 7. 标题排版 ---------------- */
.hero-title {
  letter-spacing: -.035em;
  line-height: 1.14;
  font-weight: 800;
}
.hero-title strong {
  background: linear-gradient(100deg, var(--st-accent) 0%, var(--st-accent-2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}
.hero-desc { color: var(--st-text-2); line-height: 1.85; }

.demo-section-title,
.demo-footer-card h2 {
  letter-spacing: -.03em;
  line-height: 1.24;
  font-weight: 800;
}
.demo-section-desc,
.demo-footer-card p { color: var(--st-text-2); line-height: 1.85; }

.demo-section-head {
  border-bottom: 1px solid var(--st-rule);
  padding-bottom: var(--sp-5);
}
/* 区块头右侧的补充说明：原先是无边框的浅色底块，浮在留白里像漏了样式。
   改成「左侧 2px 竖线 + 等宽字」的注记。
   旧组件层对每个产品页都写了 body.demo-body.system-X .section-split-note，
   特异度更高，这里必须 !important 才能覆盖。 */
.section-split-note {
  display: block;
  align-self: end;
  padding: 2px 0 2px 12px !important;
  border: 0 !important;
  border-left: 2px solid var(--st-rule-strong) !important;
  background: none !important;
  font-family: var(--font-mono);
  font-size: .75rem;
  line-height: 1.7;
  letter-spacing: .02em;
  color: var(--st-text-2) !important;
}

/* ---------------- 8. 内容网格 ----------------
   只有「纯文字小卡」的网格改共边格架（与主站 .bento 同一手法）。
   含截图的网格不能共边——展板自身已经有 hairline，再共边会叠成粗线，
   所以那些容器保留正常间距。 */
.showcase-proof-grid,
.showcase-value-grid,
.feature-matrix {
  gap: 1px !important;
  background: var(--st-rule-strong);
  border: 1px solid var(--st-rule-strong);
}
.showcase-caption-grid,
.showcase-story-grid,
.showcase-visual-pair,
.showcase-admin-layout,
.hero-kpi-strip,
.storefront-grid,
.cockpit-ribbon,
.loyalty-layout,
.ops-schedule,
.study-track {
  gap: var(--sp-4) !important;
  background: none;
  border: 0;
}
/* 旧组件层给每个产品页都写了 body.demo-body.system-X .showcase-*-card
   （含半透明底色），特异度压过单类选择器；同时半透明底色会透出格架线，
   看起来像「整片灰板」。所以这里必须 !important 且用不透明底色。 */
.showcase-proof-card,
.showcase-value-card,
.feature-card {
  background: var(--st-surface) !important;
  border: 0 !important;
  transition: background-color .3s;
}
.showcase-caption-grid > *,
.showcase-story-grid > *,
.showcase-visual-pair > *,
.hero-kpi-card,
.store-visual,
.cockpit-panel,
.loyalty-card-visual,
.loyalty-side-stack,
.schedule-card,
.track-step {
  background: var(--st-surface) !important;
  border: 1px solid var(--st-rule) !important;
}
.showcase-proof-card:hover,
.showcase-value-card:hover,
.feature-card:hover { background: var(--st-surface-2) !important; }

/* 卡片内部的小标题用实心小方块起头，替代图标圆底 */
.showcase-proof-card strong,
.showcase-value-card strong,
.feature-card strong { letter-spacing: -.01em; }
.showcase-proof-card p,
.showcase-value-card p,
.feature-card p { color: var(--st-text-2); line-height: 1.8; }

/* ---------------- 9. 截图展板 ----------------
   产品截图是浅色界面图，落在深色页面上会「跳出画面」。
   加 hairline 外框 + 顶部等宽字标注条，读作「图册展板」而不是漂浮图片。 */
.showcase-visual-card,
.hero-media-card,
.showcase-admin-layout > *,
.mini-surface {
  background: var(--st-surface);
  border: 1px solid var(--st-rule);
}
.showcase-visual-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--st-rule);
  background: var(--st-surface-2);
  font-family: var(--font-mono);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--st-text-3);
}
.showcase-visual-head strong { color: var(--st-text); letter-spacing: 0; text-transform: none; font-size: .875rem; }
.community-screen-image,
.showcase-visual-card img,
.hero-media-stack img { border: 1px solid var(--st-rule); }

/* ---------------- 10. 页脚块 ---------------- */
.demo-footer-card {
  background: var(--st-surface);
  border: 1px solid var(--st-rule-strong);
}
.demo-footer-actions { gap: 10px; }

/* ---------------- 11. 星图背景层 ---------------- */
.showcase-hero { position: relative; isolation: isolate; }
.demo-atlas {
  position: absolute;
  inset: -120px 0 -20px;
  z-index: -1;
  pointer-events: none;
  opacity: .85;
  -webkit-mask-image: radial-gradient(ellipse 72% 74% at 62% 38%, #000 18%, transparent 86%);
  mask-image: radial-gradient(ellipse 72% 74% at 62% 38%, #000 18%, transparent 86%);
}
.demo-atlas svg { width: 100%; height: 100%; display: block; }

/* ---------------- 12. 滚动条与选中态 ---------------- */
body.demo-body ::selection { background: var(--st-accent); color: var(--st-on-fill); }

/* ---------------- 13. 移动端 ---------------- */
@media (max-width: 767px) {
  .demo-topbar-inner { min-height: 60px; }
  .demo-topbar-actions { gap: 8px; }
  .demo-link { padding: 9px 13px; font-size: .8125rem; }
  .hero-copy-card { padding: var(--sp-4) 0; }
  /* 统计条在窄屏是纵向堆叠的，左侧竖线会变成「每条一个左边框」，
     改由上边框分隔 */
  .hero-stat {
    padding: var(--sp-3) 0;
    border-left: 0;
    border-top: 1px solid var(--st-rule);
  }
  .hero-stat:first-child { padding-top: 0; border-top: 0; }
}

/* 390px 上下：品牌名 + 三个按钮放不下，标题会被截成「兴趣部落社…」。
   只留星标，次要链接退化为图标（主 CTA 保留文字） */
@media (max-width: 640px) {
  .demo-brand-copy { display: none; }
  .demo-topbar-actions .demo-link:not(.is-primary) {
    padding: 9px 10px;
    font-size: 0;
    line-height: 1;
  }
  .demo-topbar-actions .demo-link:not(.is-primary) i { font-size: 13px; }
}