/* =============================================================================
   溪数坊 · 墨流主题（覆盖层）
   -----------------------------------------------------------------------------
   载入顺序必须在 style.css / channel.css 之后：这一层只做"换皮"，
   不改任何页面的 HTML 结构、类名、信息架构。

   两条核心改动：
   1) 全站背景换成常驻的墨流画布（js/ink-bg.js），body 与各区块底色改透明；
   2) 原来的实心白卡片换成液态玻璃 —— 靠"提亮背景 + 1px 渐变亮边 + 斜向高光"
      成形，而不是靠不透明度遮挡。大模糊会变磨砂，所以刻意不用 blur。

   后台 admin.html 不引本文件（工作台需要长时间盯着看，动态背景是干扰）。
   ============================================================================= */

:root {
  /* 正文不用纯黑：从背景色板的「重青 #2b584f」推出墨绿系，与背景同色相家族 */
  --ink: #27443c;
  --ink-2: #46605a;
  /* 三级文字原本是 #7d938c —— 那是给白底设计的："变浅" 即等于 "变弱"。
     但墨流底色本身在奶白与深青之间大幅变化，靠提亮做弱化必然在某些位置糊掉。
     改为「压暗 + 去饱和」来表达层级：亮度降到与白底对比 4.8:1（原来只有 2.8:1），
     同时保持比 --ink-2 浅，层级关系不变。 */
  --ink-3: #5f7871;

  /* 液态玻璃三档 */
  --glass:      rgba(255, 255, 255, 0.17);
  --glass-hi:   rgba(255, 255, 255, 0.25);
  --glass-thin: rgba(255, 255, 255, 0.10);
  --glass-line: rgba(255, 255, 255, 0.34);
  /* 只提亮背景本身，不铺白膜 —— 这是能否读成"透明"的分水岭 */
  --lift: brightness(1.13) saturate(1.06);
  /* 8-19：正文在墨流深色段偏难读，白度上调并加一点点磨砂。
     只给 4px —— 再高就从「液态玻璃」滑向「毛玻璃」了。 */
  --frost: blur(4px);

  /* 压在墨流上的文字用的白光衬底 */
  --glow:      0 2px 26px rgba(255,255,255,0.82), 0 1px 3px rgba(255,255,255,0.90);
  --glow-soft: 0 1px 16px rgba(255,255,255,0.90);

  --radius: 16px;

  /* 品牌标记的墨青色，取自背景色板的「重青 #2b584f」再压深一档，
     确保压在浅色墨流上足够沉得住 */
  --logo-ink: #24564c;
  --logo-ink-light: #7fd8cb;   /* 深色页脚上用 */
}

/* ── 背景画布 ──────────────────────────────────────────────────────────────── */
body {
  background: transparent;
  color: var(--ink);
}
/* WebGL 不可用时的兜底，铺在 html 上，画布盖不住时也不会白屏 */
html {
  background:
    radial-gradient(110% 85% at 14% 18%, #f7f1d6 0%, rgba(247,241,214,0) 48%),
    radial-gradient(85% 75% at 80% 26%, #dfe7b4 0%, rgba(223,231,180,0) 58%),
    radial-gradient(120% 100% at 22% 78%, #8bbfa3 0%, rgba(139,191,163,0) 66%),
    linear-gradient(120deg, #2b584f 0%, #7fb59c 22%, #d9e5c0 55%, #f2ecd2 80%, #e4dfb4 100%);
  background-attachment: fixed;
}
#ink-bg {
  position: fixed; inset: 0; width: 100%; height: 100%;
  display: block; z-index: -2; pointer-events: none;
  opacity: 0; transition: opacity 1.4s ease;
}
#ink-bg.ready { opacity: 1; }
#ink-paper {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(130% 110% at 50% 40%, rgba(255,255,255,0) 52%, rgba(120,130,100,0.18) 100%);
  mix-blend-mode: multiply;
}

/* ── 玻璃基元：给需要"框"的元素统一套这三样 ─────────────────────────────── */
.card, .pcard, .ev, .metric, .search-bar, .agent-card, .note, .cap-img {
  position: relative;
  background: var(--glass);
  border: 0;
  backdrop-filter: var(--frost) var(--lift);
  -webkit-backdrop-filter: var(--frost) var(--lift);
  box-shadow: none;
}
/* 1px 渐变亮边：mask 挖空中心只留边框，border 做不出明暗渐变 */
.card::before, .pcard::before, .ev::before, .metric::before,
.search-bar::before, .agent-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: linear-gradient(150deg,
    rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.26) 30%,
    rgba(255,255,255,0.14) 55%, rgba(255,255,255,0.48) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}
/* 左上角一道很浅的反光。液态感来自它，不是来自模糊 */
.card::after, .pcard::after, .ev::after, .agent-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(148deg,
    rgba(255,255,255,0.11) 0%, rgba(255,255,255,0.03) 20%,
    rgba(255,255,255,0.00) 42%, rgba(255,255,255,0.00) 82%,
    rgba(255,255,255,0.05) 100%);
}
.card > *, .pcard > *, .ev > *, .agent-card > * { position: relative; z-index: 1; }

.card, .pcard, .ev, .agent-card { border-radius: var(--radius); padding: 22px; }
.card.pad-lg { padding: 30px; }
.pcard { transition: transform .4s cubic-bezier(.22,1,.36,1), background .4s ease; }
.pcard:hover, .card:hover, .ev:hover, .agent-card:hover {
  transform: translateY(-3px); background: var(--glass-hi);
  border: 0; box-shadow: none;
}
.pcard .bio, .ev .what p, .agent-card .desc, .card p { text-shadow: var(--glow-soft); }

/* ── 次级文字的白光衬底 ────────────────────────────────────────────────────── */
/* 只调深颜色仍解决不了根本问题：墨流最深处（重青 #2b584f）本身就很暗，
   任何深色字压上去都会糊。给次级文字垫一层白光，相当于让它始终对着"近白"的
   局部底色，而不是对着不断变化的墨色 —— 这样对比度才是稳定的。*/
.meta, .hint, .qr-cap, .step-label, .qnum, p.sec, .empty, .empty b,
.pcard-id .meta, .pcard-id .role, .comp small, .ev .when small, .ev .when b,
.agent-card .by, .resume-head .rmeta, .rrow b, .facts,
.head p, .card p, .metric small, .hot span, .badge, .tag,
.past-item small, .prod-more, .sub, .brandline, small {
  text-shadow: var(--glow-soft);
}
/* 页脚是深色底，白光会把字糊掉，这里全部撤掉 */
footer, footer *, .ecard .cover, .ecard .cover *,
.avatar, .qavatar, .logo-mark, .btn, .qchoice.on, .badge.open {
  text-shadow: none;
}

/* ── 顶部导航 ──────────────────────────────────────────────────────────────── */
/* 导航是唯一保留模糊的地方：它固定在顶部，底下墨色一直在滚动，
   不模糊的话文字会被经过的深墨团吃掉 */
.nav {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(12px) brightness(1.08) saturate(1.06);
  -webkit-backdrop-filter: blur(12px) brightness(1.08) saturate(1.06);
  border-bottom: 0;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.30);
}
.nav .logo, .nav-links a { text-shadow: 0 1px 8px rgba(255,255,255,0.75); }

/* ── 品牌标记 ──────────────────────────────────────────────────────────────
   原设计是「渐变圆角方块 + 溪字」。换成真实 logo 图形（三方块 + 溪流曲线 + 三点）。
   源文件是白色图形 + 透明底，白对白没法用滤镜染色，
   所以用 CSS mask 取它的 alpha 当形状，颜色交给 background-color —— 想染什么色都行。
   下方的「溪数坊」字样没有取，站点用真文本渲染（更清晰，也利于 SEO）。
   原始比例 281×167 ≈ 1.68:1，所以不再是正方形。*/
.logo-mark {
  width: 44px; height: 26px; flex: none;
  background: var(--logo-ink);
  border-radius: 0;
  font-size: 0;                     /* 藏掉标签里原有的「溪」字 */
  -webkit-mask: url(../assets/logo-mark.png) no-repeat center / contain;
          mask: url(../assets/logo-mark.png) no-repeat center / contain;
}
.nav-links a:hover { background: var(--glass-hi); color: var(--ink); }
.nav-links a.on { color: var(--brand-dark); }
.nav-drawer {
  border-top: 0; background: rgba(255,255,255,0.10);
  backdrop-filter: blur(12px) var(--lift); -webkit-backdrop-filter: blur(12px) var(--lift);
}
.nav-drawer a { border-bottom-color: rgba(255,255,255,0.28); }

/* ── Hero / 频道头：由深色渐变改为透出墨流 ─────────────────────────────────── */
.hero, .ch-hero {
  background: transparent;
  color: var(--ink);
}
.hero::after, .ch-hero::after { display: none; }   /* 原来的青色光晕，浅底上不需要 */
.hero h1, .ch-hero h1 { color: var(--ink); text-shadow: var(--glow); }
.hero h1 em {
  color: var(--brand-dark);
  background: linear-gradient(180deg, transparent 62%, rgba(10,166,160,0.22) 62%);
}
.hero p.sub, .ch-hero p {
  color: var(--ink-2); text-shadow: var(--glow-soft);
  font-weight: 500;                    /* 400→500：墨流底上细体发虚，加半档就够 */
}
/* 频道头「当前没有开放报名的场次…」空态。
   原来写死 14px + opacity .65，比上面正文小一号又发灰，在墨流深色段几乎看不清。
   统一到与正文同号同重。 */
.ch-hero .cta-empty {
  font-size: 16px; font-weight: 500; max-width: 620px;
  color: var(--ink-2); text-shadow: var(--glow-soft);
}
.ch-hero .cta-empty a { color: var(--brand-dark); font-weight: 600; }
.ch-hero .kicker { color: var(--brand-dark); opacity: 1; text-shadow: var(--glow-soft); }
.hot span, .metric small { color: var(--ink-2); text-shadow: var(--glow-soft); }
.metric b { color: var(--brand-dark); text-shadow: var(--glow); }

.search-bar { border-radius: 999px; padding: 7px 7px 7px 10px; }
.search-bar input { background: transparent; }
.hot a {
  background: var(--glass-thin); color: var(--ink-2);
  border-color: var(--glass-line);
  backdrop-filter: var(--lift); -webkit-backdrop-filter: var(--lift);
}
.hot a:hover { background: var(--glass-hi); color: var(--brand-dark); }

/* 频道 hero 里的扫码块原本假定深色底 */
.qr-entry.on-dark b { color: var(--ink); text-shadow: var(--glow-soft); }
.qr-entry.on-dark span { color: var(--ink-2); text-shadow: var(--glow-soft); }
.qr-entry-btn { background: var(--brand); color: #fff; }

/* ── 首页品牌首屏：标语独占一屏 ────────────────────────────────────────────── */
/* 墨流最好看的地方是大面积留白。首屏只放标语，把搜索条和数字块下移到 .pitch，
   滚下去才开始上信息密度。*/
/* 首屏按 6:4 分区：上六成给标语（垂直居中），下四成给说明与入口。
   这样"标语占六成"是布局约束，不依赖字号硬凑 —— 换了屏幕比例也成立。*/
.brand-hero {
  min-height: 92vh; display: flex; flex-direction: column;
  padding: 76px 0 78px; position: relative;
}
.brand-hero .hero-inner { flex: 1; display: flex; flex-direction: column; }
.brand-hero .hero-main {
  flex: 6; display: flex; flex-direction: column; justify-content: center;
  min-height: 0;
}
.brand-hero .hero-aside {
  flex: 4; display: flex; flex-direction: column; justify-content: center;
  min-height: 0;
}

.brand-hero .kicker {
  font-size: 12px; letter-spacing: 6px; color: var(--brand-dark);
  margin-bottom: 26px; text-shadow: var(--glow-soft);
}
/* ── 标语字号：PC 与手机两套独立配置 ──────────────────────────────────────
   本段是 PC 端（>860px）。
   上限 140px 由容器宽度倒推：最长一行「智力资源平台。」共 7 字，
   7 × (字号 + 字距) 必须小于内容区宽度 1100px —— 再大会撑破容器或被迫折行。
   下限 56px：窄到 861px 时仍要有"首屏主视觉"的分量。
   行高 1.08、字距用 em —— 大字号下固定 px 字距会显得过松。*/
.brand-hero h1 {
  font-size: clamp(56px, 9.2vw, 140px);
  letter-spacing: 0.02em; line-height: 1.08;
  max-width: none; margin-bottom: 0;
}
.brand-hero .lead {
  margin: 0; max-width: 30em;
  font-size: clamp(16px, 1.7vw, 21px); font-weight: 600; color: var(--ink); line-height: 1.9;
  text-shadow: var(--glow);
}
.brand-hero .desc {
  margin: 18px 0 0; max-width: 34em; font-size: 15px; color: var(--ink-2); line-height: 2;
  text-shadow: var(--glow-soft);
}
.brand-hero .desc b { color: var(--brand-dark); }
.hero-actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 12px; }
.scrollcue {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 30px;
  font-size: 11px; letter-spacing: 3px; color: var(--ink-2);
  text-shadow: var(--glow-soft); text-align: center;
}
.scrollcue::after {
  content: ''; display: block; width: 1px; height: 30px; margin: 10px auto 0;
  background: linear-gradient(rgba(70,100,85,0.55), rgba(70,100,85,0));
}

/* 第二层：原首屏的主张 + 检索入口。视觉重量保留，但不再是第一顺位 */
.pitch h2 {
  font-size: clamp(26px, 3.6vw, 40px); letter-spacing: 1px;
  color: var(--ink); text-shadow: var(--glow);
}
.pitch h2 em {
  font-style: normal; color: var(--brand-dark);
  background: linear-gradient(180deg, transparent 62%, rgba(10,166,160,0.22) 62%);
}
.pitch .sub {
  margin: 20px 0 0; max-width: 41em; font-size: 16px; color: var(--ink-2);
  text-shadow: var(--glow-soft);
}
.pitch .search-bar { margin-top: 32px; }
.pitch .metrics { margin-top: 40px; gap: 12px; }
.pitch .metric {
  flex: 1; min-width: 140px; padding: 20px 22px; border-radius: 18px;
}

/* ── 手机端（≤860px）：另一套配置 ─────────────────────────────────────────
   两点和 PC 端不同：
   1) 放弃 6:4 硬分区。竖屏下按比例分配会把标语挤成一团，
      手机首屏本来也不该占满一屏 —— 改回自然流，靠间距拉层次。
   2) 字号独立设。手机上 100px 级的字一行放不下三个字，
      读起来是"看局部"而不是"看一句话"。上限压到 54px。
      375px 宽时取 32px，7 字约 226px，留足左右余白。*/
@media (max-width: 860px) {
  .brand-hero { min-height: auto; padding: 54px 0 60px; }
  .brand-hero .hero-main, .brand-hero .hero-aside { flex: none; display: block; }
  .brand-hero .hero-main { margin-bottom: 36px; }
  .brand-hero h1 {
    font-size: clamp(30px, 8.6vw, 54px);
    letter-spacing: 0.01em; line-height: 1.2; max-width: none;
  }
  .brand-hero .kicker { margin-bottom: 16px; letter-spacing: 4px; font-size: 11px; }
  .brand-hero .lead { font-size: 16px; line-height: 1.85; }
  .brand-hero .desc { font-size: 14px; margin-top: 14px; }
  .hero-actions { margin-top: 26px; }
  .hero-actions .btn { flex: 1; min-width: 140px; }
  .scrollcue { display: none; }
}

/* ── 区块 ──────────────────────────────────────────────────────────────────── */
/* 原来靠 --bg-2 灰底做区块交替，现在全透明，节奏交给卡片和留白 */
section.block.alt { background: transparent; }
section.block { padding: 68px 0; }
.head h2 { color: var(--ink); text-shadow: var(--glow); }
.head p { color: var(--ink-2); text-shadow: var(--glow-soft); }
.head a.more { color: var(--brand-dark); }

/* ── 标签 / 徽标 ───────────────────────────────────────────────────────────── */
.tag {
  background: rgba(255,255,255,0.06); border-color: var(--glass-line);
  color: var(--ink-2); border-radius: 999px; padding: 4px 11px;
  backdrop-filter: var(--lift); -webkit-backdrop-filter: var(--lift);
}
.tag.brand {
  background: rgba(255,255,255,0.10); color: var(--brand-dark);
  border-color: rgba(10,166,160,0.34);
}
.badge { backdrop-filter: var(--lift); -webkit-backdrop-filter: var(--lift); }
.badge.done { background: rgba(255,255,255,0.14); color: var(--ink-2); }
.comp-bar { background: rgba(255,255,255,0.32); }
.comp-bar i { background: linear-gradient(90deg, var(--brand), #7fb59c); }
.ev .when { background: rgba(255,255,255,0.14); border-radius: 12px; }
.agent-card .ico { background: rgba(255,255,255,0.20); color: var(--brand-dark); }

/* 系列里特殊场次的来历说明（如「暨第一届 Hacking House」）：
   比标题弱、比正文强，用一条竖线把它和标题分开 */
.ev-note {
  display: inline-block; font-size: 12.5px; font-weight: 400;
  color: var(--brand-dark); letter-spacing: .5px;
  padding-left: 9px; margin-left: 9px;
  border-left: 1px solid rgba(10,166,160,0.42);
  text-shadow: var(--glow-soft);
}
/* 首页卡片里它单独占一行，不需要竖线 */
.ecard .ev-note { padding-left: 0; margin-left: 0; border-left: 0; display: block; }

/* ── 按钮 ──────────────────────────────────────────────────────────────────── */
.btn { border-radius: 999px; box-shadow: 0 4px 18px rgba(10,166,160,0.24); }
.btn.lg { border-radius: 999px; }
.btn.ghost {
  background: var(--glass); color: var(--ink); border-color: var(--glass-line);
  backdrop-filter: var(--lift); -webkit-backdrop-filter: var(--lift); box-shadow: none;
}
.btn.ghost:hover { background: var(--glass-hi); color: var(--ink); }

/* ── 表单：刻意不做成高透明 ────────────────────────────────────────────────── */
/* 报名/简历页要长时间输入，输入框必须和背景明确分离，
   透明输入框在流动的墨色上会让人看不清自己打了什么。这里保持接近实心的白。 */
.input, .select, .textarea {
  background: rgba(255,255,255,0.78);
  border-color: rgba(255,255,255,0.9);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.input:focus, .select:focus, .textarea:focus {
  background: rgba(255,255,255,0.94);
  border-color: var(--brand); box-shadow: 0 0 0 3px rgba(10,166,160,0.18);
}
.field label { color: var(--ink); text-shadow: var(--glow-soft); }
.field .hint { color: var(--ink-3); text-shadow: var(--glow-soft); }
.cap-img { background: rgba(255,255,255,0.82); }
.note { background: rgba(255,255,255,0.20); color: var(--ink); border: 0; }
.note.warn { background: rgba(245,166,35,0.16); color: #7a5200; }
.note.err  { background: rgba(229,72,77,0.14); color: #8f2226; }

/* ── 空状态 / 骨架 ─────────────────────────────────────────────────────────── */
.empty { color: var(--ink-2); text-shadow: var(--glow-soft); }
.empty b { color: var(--ink); }
.skel { background: rgba(255,255,255,0.22); }

/* ── 页脚：保持深色 ────────────────────────────────────────────────────────── */
/* 深色页脚是整页唯一的实心块，给流动的画面一个收尾的锚点 */
footer { background: #16241f; margin-top: 0; position: relative; z-index: 1; }
/* 页脚是深底，墨青会糊进去，换成浅青 */
footer .logo-mark { background: var(--logo-ink-light); }

/* =============================================================================
   页内私有组件的接管
   -----------------------------------------------------------------------------
   有 8 个页面在自己的 <style> 块里写死了 background:#fff + border:1px solid var(--line)。
   那段内联样式排在本文件的 <link> 之后，同优先级下会赢，所以这里统一加 body 前缀
   把优先级提到 (0,1,1) —— 这样不必改动任何页面的 HTML，也不用 !important。
   ============================================================================= */
body .pillar,        /* physicalai 三根支柱 */
body .app,           /* physicalai 应用场景 */
body .prod,          /* physicalai 产品卡 */
body .steps-row .s,  /* demoday 步骤 */
body .track,         /* event 赛题 */
body .feat li,       /* pai 特性 */
body .mp,            /* pai 图文块 */
body .panel,         /* signup 主面板 */
body .past-item,     /* signup 历史报名 */
body .map .col,      /* sitemap 分栏 */
body .org .unit,     /* team 组织单元 */
body .member {       /* team 成员卡 */
  position: relative;
  background: var(--glass);
  border: 0;
  box-shadow: none;
  backdrop-filter: var(--lift);
  -webkit-backdrop-filter: var(--lift);
  border-radius: var(--radius);
}
body .pillar::before, body .app::before, body .prod::before,
body .steps-row .s::before, body .track::before, body .mp::before,
body .panel::before, body .past-item::before, body .map .col::before,
body .org .unit::before, body .member::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none; z-index: 0;
  background: linear-gradient(150deg,
    rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.26) 30%,
    rgba(255,255,255,0.14) 55%, rgba(255,255,255,0.48) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}
body .pillar > *, body .app > *, body .prod > *, body .steps-row .s > *,
body .track > *, body .panel > *, body .map .col > *,
body .org .unit > *, body .member > * { position: relative; z-index: 1; }

/* 胶囊型控件：标签筛选、问答选项 */
body .chip, body .qchoice {
  background: var(--glass-thin); border-color: var(--glass-line); color: var(--ink-2);
  backdrop-filter: var(--lift); -webkit-backdrop-filter: var(--lift);
}
body .chip:hover, body .qchoice:hover { background: var(--glass-hi); color: var(--ink); }
body .chip.on, body .qchoice.on { background: var(--brand); color: #fff; border-color: transparent; }

/* signup 把 body 底色设成了灰，会把整张墨流盖掉。
   它那条规则也是 body{}，同优先级、且内联在后会赢，所以这里用 html body 提一级 */
html body { background: transparent; }
body .resume-card { background: var(--glass); border: 0; }

/* 页内组件的 hover 大多会重新加上 var(--shadow)，把玻璃压成实心块 */
body .prod:hover, body .pillar:hover, body .app:hover, body .member:hover,
body .track:hover, body .org .unit:hover, body .past-item:hover {
  background: var(--glass-hi);
  border-color: transparent;
  box-shadow: none;
}

/* ── 报名页（H5 单独排版）────────────────────────────────────────────────── */
/* 原设计里 .h5-hero 是一条通栏深青色带，靠 margin-bottom:-18px 让 .panel 压上去，
   形成「深色头 + 白卡片探出来」的层叠。换成墨流后深色带成了唯一的硬块，
   而那个负边距会让标题和面板挤在一起，所以两样一起去掉。*/
body .h5-hero {
  background: transparent;
  color: var(--ink);
  border-radius: 0;
  margin-bottom: 0;
  padding: 44px 20px 20px;
}
body .h5-hero .kicker {
  color: var(--brand-dark); opacity: 1;
  letter-spacing: 2px; text-shadow: var(--glow-soft);
}
body .h5-hero h1 {
  color: var(--ink); font-size: 26px; margin: 10px 0 8px;
  text-shadow: var(--glow);
}
body .h5-hero .facts { color: var(--ink-2); opacity: 1; text-shadow: var(--glow-soft); }
body .h5-hero > .h5 > div[style] { color: var(--ink-2); }

/* 进度条与分隔线原本用 --line（浅灰实色），在墨流上会显脏 */
body .steps i, body .qprog { background: rgba(255,255,255,0.34); }
body .steps i.on, body .qprog i { background: var(--brand); }
body .rrow { border-top-color: rgba(255,255,255,0.42); }
body .ok-mark { background: rgba(255,255,255,0.28); color: var(--brand-dark); }
body .step-label, body .qnum, body p.sec { color: var(--ink-3); }

/* demoday 的日程表：表格不做玻璃（行多、需要清晰的行分隔），只做半透明 */
body .agenda { background: rgba(255,255,255,0.16); border-radius: 12px; overflow: hidden; }
body .agenda th { background: rgba(255,255,255,0.22); color: var(--ink-2); }
body .agenda td, body .agenda th { border-color: rgba(255,255,255,0.30); }

/* ── 「安静」页面：表单与长列表 ───────────────────────────────────────────── */
/* 这些页面要么在长时间输入、要么在长距离滚动，
   背景持续流动会分散注意力。玻璃提亮一档，让内容更实。*/
body[data-ink="calm"] { --glass: rgba(255,255,255,0.24); --glass-hi: rgba(255,255,255,0.32); --frost: blur(6px); }

@media (max-width: 560px) {
  .card, .pcard, .ev, .agent-card { padding: 18px; }
  .card.pad-lg { padding: 20px; }
}