/* ============================================================
   徐承宇个人站 · Apple 设计系统
   主色 Action Blue #0071E3 / 背景 #FFFFFF + #F5F5F7 / 墨色 #1D1D1F
   ============================================================ */
:root {
  --bg: #FFFFFF;
  --parchment: #F5F5F7;
  --ink: #1D1D1F;
  --muted: #6E6E73;
  --faint: #86868B;
  --hairline: #D2D2D7;
  --card-line: #E8E8ED;
  --blue: #0071E3;
  --blue-deep: #0066CC;
  --blue-soft: #E8F1FC;
  --blue-dark-tile: #2997FF;
  --black: #000000;
  --red: #FF5F57;
  --yellow: #FEBC2E;
  --green: #28C840;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro SC", "SF Pro Text",
    "PingFang SC", "Helvetica Neue", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ---------------- 页面间滑动转场（iOS 风） ---------------- */
/* 导航栏固定不动，仅导航以下的内容区平移；
   进场：从 --enter-x 方向滑入；离场：向 --leave-x 方向滑出 */
body.page-transition > *:not(.nav) {
  transition: opacity 0.34s cubic-bezier(0.28, 0.11, 0.32, 1),
              transform 0.34s cubic-bezier(0.28, 0.11, 0.32, 1);
  will-change: opacity, transform;
}
/* 首屏预隐藏：由 <head> 内联脚本在首次绘制前加在 <html> 上，杜绝"先全显再滑入"的闪屏 */
html.pt-pre body > *:not(.nav) { opacity: 0; transform: translateX(var(--enter-x, 56px)); }
body.page-leave > *:not(.nav) { opacity: 0; transform: translateX(var(--leave-x, -56px)); }
@media (prefers-reduced-motion: reduce) {
  html.pt-pre body > *:not(.nav), body.page-leave > *:not(.nav) { opacity: 1; transform: none; }
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ---------------- 导航 ---------------- */
.nav {
  position: sticky; top: 0; z-index: 100;
  height: 52px;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 0.5px solid var(--hairline);
}
.nav-inner {
  position: relative;
  max-width: 1080px; height: 52px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-logo { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; }
/* 三个主标签绝对居中，不受左右两侧宽度影响 */
.nav-links {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; gap: 40px;
}
.nav-right { display: flex; align-items: center; gap: 20px; }
.nav-agent { font-size: 11.5px; color: var(--blue); transition: color .2s; }
.nav-agent:hover { color: var(--blue-deep); }
.nav-links a { font-size: 12.5px; color: var(--muted); transition: color .2s; }
.nav-links a:hover { color: var(--ink); }
.nav-links a.active { color: var(--ink); font-weight: 600; }
.nav-cta {
  font-size: 11.5px; font-weight: 600; color: #fff;
  background: var(--blue); border-radius: 14px;
  padding: 7px 14px; transition: background .2s;
}
.nav-cta:hover { background: var(--blue-deep); }

/* ---------- 汉堡菜单按钮 ---------- */
.nav-burger {
  display: none;
  width: 36px; height: 36px;
  background: none; border: none; cursor: pointer;
  position: relative; -webkit-tap-highlight-color: transparent;
}
.nav-burger span {
  display: block; width: 20px; height: 1.5px; background: var(--ink);
  position: absolute; left: 8px; border-radius: 1px;
  transition: opacity .28s, transform .28s;
}
.nav-burger span:nth-child(1) { top: 11px; }
.nav-burger span:nth-child(2) { top: 17px; }
.nav-burger span:nth-child(3) { top: 23px; }
/* 打开态 → X */
.nav-burger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 全屏菜单 overlay ---------- */
.mobile-menu {
  display: none;
  position: fixed; inset: 0; z-index: 99;
  background: rgba(255,255,255,0.97);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  flex-direction: column; align-items: center; justify-content: center; gap: 0;
  opacity: 0; transition: opacity .3s;
  pointer-events: none;
}
.mobile-menu.open {
  opacity: 1; pointer-events: auto;
}
.mobile-menu a {
  display: block; font-size: 22px; font-weight: 600;
  color: var(--ink); padding: 18px 0; text-align: center;
  transition: color .2s;
}
.mobile-menu a:hover { color: var(--blue); }
.mobile-menu .mobile-cta {
  margin-top: 28px;
  font-size: 15px; font-weight: 600; color: #fff;
  background: var(--blue); border-radius: 22px;
  padding: 14px 36px;
}
.mobile-menu .mobile-cta:hover { background: var(--blue-deep); color: #fff; }

/* ---------------- 通用区块 ---------------- */
.section { padding: 88px 0; }
.section-parchment { background: var(--parchment); }
.section-black { background: var(--black); color: #fff; }
.center { text-align: center; }

.eyebrow { font-size: 13px; font-weight: 600; color: var(--blue); letter-spacing: 0.04em; }
.eyebrow-light { color: var(--blue-dark-tile); }
.h-display { font-size: 56px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.h-section { font-size: 36px; font-weight: 700; letter-spacing: -0.015em; }
.h-sub { font-size: 16px; color: var(--muted); line-height: 1.7; }
.section-black .h-sub { color: #A1A1A6; }

.btn-row { display: flex; gap: 20px; align-items: center; justify-content: center; margin-top: 28px; }
.btn-pill {
  display: inline-block; font-size: 15px; font-weight: 600; color: #fff;
  background: var(--blue); border-radius: 22px; padding: 12px 26px;
  transition: background .2s, transform .15s;
}
.btn-pill:hover { background: var(--blue-deep); transform: translateY(-1px); }
.btn-link { font-size: 15px; font-weight: 500; color: var(--blue); padding: 12px 8px; }
.btn-link:hover { text-decoration: underline; }

/* ---------------- 首页 Hero ---------------- */
.hero { background: var(--parchment); padding: 110px 0 96px; text-align: center; }
.hero .eyebrow { font-size: 14px; }
.hero h1 { font-size: 56px; font-weight: 700; letter-spacing: -0.02em; margin: 14px 0 18px; }
.hero .h-sub { font-size: 17px; max-width: 640px; margin: 0 auto; }

/* ---------------- 关键数字 ---------------- */
.stats { background: #fff; padding: 64px 0; }
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.stat { text-align: center; }
.stat-num { font-size: 48px; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; }
.stat-label { font-size: 13px; color: var(--muted); margin-top: 10px; line-height: 1.5; white-space: nowrap; }

/* ---------------- 作品大卡（首页黑白交替） ---------------- */
.tile { padding: 72px 0; text-align: center; }
.tile-white { background: #fff; }
.tile-parchment { background: var(--parchment); }
.tile-black { background: var(--black); color: #fff; }
.tile h2 { font-size: 36px; font-weight: 700; letter-spacing: -0.015em; margin: 12px 0 10px; }
.tile .tile-sub { font-size: 15px; color: var(--muted); max-width: 620px; margin: 0 auto; line-height: 1.7; }
.tile-black .tile-sub { color: #A1A1A6; }
.tile .btn-link { display: inline-block; margin-top: 14px; }
.tile-black .btn-link { color: var(--blue-dark-tile); }

/* ---------------- 浏览器骨架（项目截图占位） ---------------- */
.browser {
  width: 620px; max-width: 100%; margin: 34px auto 0;
  background: #fff; border: 1px solid var(--card-line); border-radius: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); overflow: hidden; text-align: left;
}
.browser-bar {
  height: 40px; background: var(--parchment);
  display: flex; align-items: center; gap: 8px; padding: 0 16px;
}
.dot { width: 11px; height: 11px; border-radius: 6px; }
.dot-r { background: var(--red); } .dot-y { background: var(--yellow); } .dot-g { background: var(--green); }
.browser-url {
  width: 50%; height: 22px; border-radius: 11px; background: #fff;
  color: var(--faint); font-size: 10px;
  display: flex; align-items: center; justify-content: center; margin-left: 8px;
}
.browser-body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 14px; }

/* ---------------- AI 分身聊天窗 ---------------- */
.agent-section { background: var(--black); color: #fff; padding: 88px 0; text-align: center; }
.chat {
  width: 680px; max-width: 100%; margin: 36px auto 0; text-align: left;
  background: #fff; border-radius: 20px; overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); color: var(--ink);
}
.chat-bar {
  height: 56px; background: var(--parchment);
  display: flex; align-items: center; gap: 12px; padding: 0 20px;
}
.chat-avatar {
  width: 32px; height: 32px; border-radius: 16px; background: var(--blue);
  color: #fff; font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.chat-name { font-size: 13px; font-weight: 600; }
.chat-status { font-size: 10.5px; color: var(--muted); }
.chat-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.bubble-q {
  align-self: flex-end; background: var(--blue); color: #fff;
  font-size: 12.5px; padding: 10px 16px; border-radius: 16px; max-width: 75%;
}
.bubble-a {
  align-self: flex-start; background: var(--parchment);
  font-size: 12.5px; line-height: 1.7; padding: 12px 16px; border-radius: 16px; max-width: 80%;
}
/* 等待回复态：文字 + 动态小点 */
.bubble-a.dw-thinking { color: var(--faint); }
.dw-dots { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.dw-dots i {
  width: 4px; height: 4px; border-radius: 50%; background: var(--blue);
  animation: dw-dot 1.2s infinite ease-in-out;
}
.dw-dots i:nth-child(2) { animation-delay: 0.2s; }
.dw-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes dw-dot {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .dw-dots i { animation: none; opacity: 0.6; }
}
.chat-input {
  height: 56px; border-top: 1px solid var(--card-line);
  display: flex; align-items: center; gap: 12px; padding: 0 20px;
  color: var(--faint); font-size: 12.5px; justify-content: space-between;
}
.chat-send {
  width: 32px; height: 32px; border-radius: 16px; background: var(--blue);
  color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
/* Dify WebApp iframe 内嵌 */
.chat-iframe {
  display: block; width: 100%; height: 100%; min-height: 700px; border: 0; background: #fff;
}
@media (max-width: 768px) {
  .chat-iframe { min-height: 560px; height: 70vh; }
}

/* ---------------- 自定义聊天 UI（chat-widget.js） ---------------- */
.chat-widget {
  display: flex; flex-direction: column;
  height: 460px; background: #fff;
}
.dw-msgs {
  flex: 1; overflow-y: auto; padding: 22px 22px 12px;
  display: flex; flex-direction: column; gap: 16px;
  scrollbar-width: thin; scrollbar-color: var(--hairline) transparent;
}
/* 对话贴底，像真实聊天；溢出时 auto 边距归零，不挡滚动 */
.dw-msgs > :first-child { margin-top: auto; }
.dw-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 0 22px 12px;
}
.dw-chip {
  font-size: 12.5px; font-weight: 500; color: var(--blue-deep);
  background: var(--blue-soft); border: none; cursor: pointer;
  border-radius: 15px; padding: 7px 14px;
  transition: background .2s, transform .2s;
  font-family: inherit;
}
.dw-chip:hover { background: #D6E7FA; transform: translateY(-1px); }
.dw-inputrow {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px 16px; border-top: 1px solid var(--card-line);
}
.dw-input {
  flex: 1; border: none; outline: none;
  font-size: 14px; font-family: inherit; color: var(--ink);
  background: transparent; padding: 10px 4px;
}
.dw-input::placeholder { color: var(--faint); }
.dw-send {
  width: 38px; height: 38px; border-radius: 19px; border: none;
  background: var(--blue); color: #fff; font-size: 17px; font-weight: 700;
  cursor: pointer; flex: none;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, transform .15s;
}
.dw-send:hover { background: var(--blue-deep); }
.dw-send:active { transform: scale(0.94); }
.dw-send:disabled { background: var(--hairline); cursor: default; }
@media (max-width: 768px) {
  .chat-widget { height: 70vh; min-height: 520px; }
  .dw-msgs { padding: 16px 14px 8px; }
  .dw-chips { padding: 0 14px 8px; }
}

/* ---------------- AI 分身右下角气泡 ---------------- */
.agent-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 9998;
  display: flex; flex-direction: column; align-items: flex-end; gap: 12px;
}
.agent-fab-btn {
  width: 56px; height: 56px; border-radius: 50%; padding: 6px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .65); background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .18); transition: transform .18s ease;
}
.agent-fab-btn:hover { transform: translateY(-2px) scale(1.05); }
.agent-fab-btn img { width: 100%; height: 100%; object-fit: contain; display: block; }
.agent-pop {
  width: 380px; max-width: calc(100vw - 32px); margin: 0;
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .65); box-shadow: 0 20px 60px rgba(0, 0, 0, .24);
}
.agent-pop .chat-bar { background: rgba(245, 245, 247, .72); }
.agent-pop .chat-widget { height: 420px; background: transparent; }
.agent-pop-x {
  margin-left: auto; width: 28px; height: 28px; border-radius: 50%; border: none;
  background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; flex: none;
}
.agent-pop-x:hover { background: rgba(0, 0, 0, .06); color: var(--ink); }
@media (max-width: 768px) {
  .agent-fab { right: 14px; bottom: 14px; }
  .agent-pop .chat-widget { height: 56vh; min-height: 340px; }
}

/* ---------------- 简历弹窗：毛玻璃 + 纯纸张 ---------------- */
.resume-modal {
  position: fixed; inset: 0; z-index: 9999; padding: 26px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(17, 20, 28, .46);
  -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5);
  animation: resume-fade .22s ease-out;
}
@keyframes resume-fade { from { opacity: 0; } }
.resume-modal[hidden] { display: none; }
.resume-box {
  width: min(880px, 100%); height: min(88vh, 1060px); display: flex; flex-direction: column;
  overflow: hidden; border-radius: 22px;
  background: rgba(255, 255, 255, .58);
  border: 1px solid rgba(255, 255, 255, .72);
  box-shadow: 0 30px 80px rgba(12, 18, 34, .38), inset 0 1px 0 rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(26px) saturate(1.7); backdrop-filter: blur(26px) saturate(1.7);
  animation: resume-pop .26s cubic-bezier(.2, .8, .3, 1);
}
@keyframes resume-pop { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.resume-head {
  flex: none; display: flex; align-items: center; gap: 12px; padding: 13px 16px 13px 20px;
  border-bottom: 1px solid rgba(15, 23, 42, .08);
  background: linear-gradient(180deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .48));
}
.resume-head b { font-size: 13.5px; font-weight: 600; color: var(--ink); letter-spacing: .2px; }
.resume-dl {
  margin-left: auto; font-size: 12px; color: #fff; background: var(--blue);
  border-radius: 14px; padding: 6px 14px; box-shadow: 0 2px 8px rgba(0, 113, 227, .28);
  transition: background .2s, transform .2s;
}
.resume-dl:hover { background: var(--blue-deep); transform: translateY(-1px); }
.resume-x {
  width: 28px; height: 28px; border: none; border-radius: 50%; background: rgba(15, 23, 42, .05);
  color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; flex: none;
  transition: background .2s, color .2s;
}
.resume-x:hover { background: rgba(15, 23, 42, .1); color: var(--ink); }
.resume-paper {
  flex: 1; min-height: 0; overflow-y: auto; padding: 22px 26px 30px;
  display: flex; flex-direction: column; gap: 18px;
  background: linear-gradient(180deg, rgba(241, 243, 247, .5), rgba(231, 235, 242, .46));
  scrollbar-width: thin; scrollbar-color: rgba(15, 23, 42, .22) transparent;
}
.resume-paper::-webkit-scrollbar { width: 10px; }
.resume-paper::-webkit-scrollbar-thumb {
  border: 3px solid transparent; background-clip: content-box; border-radius: 8px;
  background-color: rgba(15, 23, 42, .2);
}
.resume-paper img {
  display: block; width: 100%; height: auto; background: #fff; border-radius: 4px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .1), 0 10px 26px rgba(15, 23, 42, .13);
}
@media (max-width: 768px) {
  .resume-modal { padding: 10px; }
  .resume-box { width: 100%; height: 92vh; border-radius: 16px; }
  .resume-paper { padding: 12px 12px 18px; gap: 12px; }
}
/* ---------------- 作品列表页 ---------------- */
.page-head { background: var(--parchment); padding: 88px 0; text-align: center; }
.page-head h1 { font-size: 48px; font-weight: 700; letter-spacing: -0.02em; }
.page-head .h-sub { margin-top: 14px; }
.case-row { padding: 64px 0; }
.case-row:nth-child(even) { background: var(--parchment); }
.case-grid { display: grid; grid-template-columns: 520px 1fr; gap: 80px; align-items: center; }
/* 没有演示界面的行：文字独占整行居中，不留空右栏 */
.case-solo { grid-template-columns: 1fr; }
.case-solo > div { text-align: center; }
.case-solo .case-meta, .case-solo .tags, .case-solo .case-result { justify-content: center; }
.case-meta { display: flex; gap: 14px; align-items: baseline; }
.case-idx { font-size: 13px; font-weight: 700; color: var(--blue); }
.case-cat { font-size: 12px; font-weight: 500; color: var(--faint); }
.case-title { font-size: 30px; font-weight: 700; letter-spacing: -0.01em; margin: 12px 0 14px; }
.case-desc { font-size: 14px; color: var(--muted); line-height: 1.8; }
.tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.tag {
  font-size: 11.5px; font-weight: 500; color: var(--blue-deep);
  background: var(--blue-soft); border-radius: 13px; padding: 5px 12px;
}
.case-result { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; font-weight: 600; }
.case-result::before { content: ""; width: 7px; height: 7px; border-radius: 4px; background: var(--blue); }
.case-row .btn-link { display: inline-block; margin-top: 12px; padding-left: 0; }
.case-row .browser { width: 500px; margin: 0; }

/* ---------------- 案例详情页 ---------------- */
.crumb { font-size: 12.5px; color: var(--faint); }
.meta-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 48px 0; }
.meta-card { background: var(--parchment); border-radius: 16px; padding: 22px 28px; }
.meta-card .k { font-size: 12px; color: var(--faint); }
.meta-card .v { font-size: 15px; font-weight: 600; margin-top: 8px; }
.detail-sec { display: grid; grid-template-columns: 280px 1fr; gap: 60px; padding: 36px 0; max-width: 1080px; margin: 0 auto; }
.detail-sec .num { font-size: 13px; font-weight: 700; color: var(--blue); }
.detail-sec h3 { font-size: 22px; font-weight: 700; margin-top: 8px; }
.detail-sec p { font-size: 14.5px; color: var(--muted); line-height: 1.8; }
.detail-sec p + p { margin-top: 14px; }
.detail-sec code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; }
.flow { background: var(--parchment); padding: 72px 0; text-align: center; }
.flow h2 { font-size: 24px; font-weight: 700; }
.flow-row { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 28px; flex-wrap: wrap; overflow: hidden; }
.flow-step {
  width: 168px; height: 88px; background: #fff; border: 1px solid var(--card-line);
  border-radius: 14px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.flow-step .n { font-size: 11px; font-weight: 700; color: var(--blue); }
.flow-step .t { font-size: 13.5px; font-weight: 600; }
.flow-conn { width: 28px; height: 2px; background: var(--hairline); }
.metrics-band { background: var(--black); color: #fff; padding: 72px 0; }
.metrics-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; text-align: center; }
.metric-num { font-size: 40px; font-weight: 700; }
.metric-label { font-size: 12.5px; color: #A1A1A6; margin-top: 10px; line-height: 1.6; }
.next-case { padding: 56px 0; text-align: center; }
.next-case .k { font-size: 12.5px; color: var(--faint); }
.next-case h3 { font-size: 24px; font-weight: 700; margin-top: 10px; }

/* ---------------- 关于页 ---------------- */
.about-hero { background: var(--parchment); padding: 96px 0; text-align: center; }
.about-hero h1 { font-size: 40px; font-weight: 700; letter-spacing: -0.015em; }
.about-hero .h-sub { margin-top: 16px; max-width: 640px; margin-left: auto; margin-right: auto; }
.about-hero .note { font-size: 13.5px; color: var(--faint); margin-top: 18px; }
.timeline { max-width: 960px; margin: 0 auto; }
.tl-row { display: grid; grid-template-columns: 180px 1fr; gap: 40px; padding: 28px 0; }
.tl-row + .tl-row { border-top: 1px solid var(--hairline); }
.tl-date { font-size: 13px; font-weight: 600; color: var(--blue); }
.tl-org { font-size: 17px; font-weight: 700; }
.tl-role { font-size: 13px; font-weight: 500; color: var(--muted); margin-top: 6px; }
.tl-desc { font-size: 13px; color: var(--muted); line-height: 1.7; margin-top: 8px; }
.skills { background: var(--parchment); border-bottom: 1px solid var(--hairline); }
.skills-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
.skill-card { background: #fff; border: 1px solid var(--card-line); border-radius: 18px; padding: 30px 32px; }
.skill-card h3 { font-size: 17px; font-weight: 700; }
.skill-card ul { list-style: none; margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.skill-card li { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.skill-card li::before { content: ""; width: 6px; height: 6px; border-radius: 3px; background: var(--blue); flex: none; }

/* ---------------- 页脚 ---------------- */
.footer { background: var(--parchment); padding: 36px 0; }
.footer-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
.footer h4 { font-size: 14px; font-weight: 700; }
.footer .fh { font-size: 12px; font-weight: 600; }
.footer p, .footer a { font-size: 12px; color: var(--muted); line-height: 2; display: block; }
.footer a:hover { color: var(--ink); }
.footer-copy {
  border-top: 1px solid var(--hairline); margin-top: 18px; padding-top: 18px;
  font-size: 11px; color: var(--faint);
}

/* ---------------- Apple 风动效 ---------------- */
/* 首屏 Hero 入场：标题依次浮现 */
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero .eyebrow, .hero h1, .hero .h-sub, .hero .btn-row {
  animation: hero-rise 0.9s cubic-bezier(0.28, 0.11, 0.32, 1) both;
}
.hero h1 { animation-delay: 0.08s; }
.hero .h-sub { animation-delay: 0.16s; }
.hero .btn-row { animation-delay: 0.24s; }

/* 滚动渐入（main.js 驱动） */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.68s cubic-bezier(0.28, 0.11, 0.32, 1),
    transform 0.68s cubic-bezier(0.28, 0.11, 0.32, 1);
  will-change: opacity, transform;
}
.reveal-in { opacity: 1; transform: translateY(0); }

/* 卡片 / 浏览器骨架悬停微浮起 */
.browser, .meta-card, .skill-card, .flow-step, .chat {
  transition:
    transform 0.45s cubic-bezier(0.28, 0.11, 0.32, 1),
    box-shadow 0.45s cubic-bezier(0.28, 0.11, 0.32, 1),
    opacity 0.68s cubic-bezier(0.28, 0.11, 0.32, 1);
}
.browser:hover, .meta-card:hover, .skill-card:hover, .flow-step:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.14);
}
.chat:hover { transform: translateY(-4px); }

/* 按钮与链接微交互 */
.btn-pill { transition: background .25s, transform .25s, box-shadow .25s; }
.btn-pill:hover { box-shadow: 0 8px 20px rgba(0, 113, 227, 0.35); }
.btn-pill:active { transform: scale(0.97); }
.tag { transition: background .2s, transform .2s; }
.tag:hover { background: #D6E7FA; transform: translateY(-1px); }
.nav-links a { position: relative; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 1.5px; background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(0.28, 0.11, 0.32, 1);
}
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }

/* ---------------- 在线交互原型（摹客 embed） ---------------- */
.proto-section { padding: 20px 0 80px; }
.proto-head { text-align: center; margin-bottom: 36px; }
.proto-head p { color: #6e6e73; margin-top: 10px; font-size: 15px; }
.proto-frame {
  max-width: 980px;
  margin: 0 auto;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid #d2d2d7;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12);
  background: #fff;
}
.proto-frame iframe {
  display: block;
  width: 100%;
  height: 800px;
  border: 0;
}
.proto-actions { text-align: center; margin-top: 24px; }
.proto-actions a {
  display: inline-block;
  font-size: 15px;
  color: #0071e3;
  text-decoration: none;
  border: 1px solid #0071e3;
  border-radius: 980px;
  padding: 10px 24px;
  transition: background .25s, color .25s;
}
.proto-actions a:hover { background: #0071e3; color: #fff; }
@media (max-width: 480px) {
  .proto-frame { border-radius: 20px; }
  .proto-frame iframe { height: 70vh; min-height: 560px; }
}

/* 尊重系统减弱动态设置 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------------- 响应式 ---------------- */
@media (max-width: 960px) {
  html, body { overflow-x: hidden; }
  .h-display, .hero h1 { font-size: 36px; }
  .h-section, .tile h2 { font-size: 26px; }
  .page-head { padding: 80px 0 56px; }
  .page-head h1 { font-size: 30px; }
  .hero { padding: 80px 0 64px; }
  .hero h1 { font-size: 36px; }
  .tile { padding: 52px 0; }
  .section { padding: 64px 0; }
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: 36px 16px; }
  .stat-num { font-size: 36px; }
  .stat-label { white-space: normal; }
  .case-grid { grid-template-columns: 1fr; gap: 36px; }
  .case-row .browser { width: 100%; }
  .meta-cards { grid-template-columns: 1fr; gap: 16px; }
  .detail-sec { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }
  .metrics-row { grid-template-columns: 1fr; gap: 36px; }
  .metric-num { font-size: 32px; }
  .skills-row { grid-template-columns: 1fr; }
  .tl-row { grid-template-columns: 1fr; gap: 8px; }
  .footer-cols { grid-template-columns: 1fr; gap: 24px; }
  .flow-row { gap: 10px; }
  .flow-step { width: 130px; height: 76px; }
  .flow-conn { width: 16px; }
  .nav-links { display: none; }
  .nav-burger { display: flex; align-items: center; justify-content: center; }
  .nav-agent, .nav-right { display: none; }
  .mobile-menu { display: flex; }
  .proto-frame { max-width: 100%; border-radius: 18px; }
  .proto-frame iframe { height: 600px; }
  .about-hero { padding: 72px 0 56px; }
  .about-hero h1 { font-size: 30px; }
  .skills { padding: 64px 0; }
  .agent-section { padding: 64px 0; }
  .metrics-band { padding: 56px 0; }
  .flow { padding: 52px 0; }
  .wrap { padding: 0 20px; }
}

@media (max-width: 480px) {
  .h-display { font-size: 28px; }
  .hero h1 { font-size: 28px; }
  .h-section, .tile h2 { font-size: 22px; }
  .page-head h1 { font-size: 26px; }
  .page-head { padding: 72px 0 44px; }
  .hero { padding: 68px 0 52px; }
  .stat-num { font-size: 28px; }
  .stat-label { font-size: 12px; }
  .tile { padding: 40px 0; }
  .section { padding: 52px 0; }
  .meta-cards { padding: 32px 0; }
  .meta-card { padding: 18px 20px; }
  .detail-sec { padding: 20px 0; }
  .detail-sec p { font-size: 14px; }
  .flow-step { width: 110px; height: 68px; border-radius: 10px; }
  .flow-conn { width: 12px; }
  .metric-num { font-size: 28px; }
  .metric-label { font-size: 12px; }
  .skill-card { padding: 22px 20px; }
  .about-hero h1 { font-size: 26px; }
  .tl-date { font-size: 12px; }
  .tl-org { font-size: 15px; }
  .tl-desc { font-size: 12px; }
  .footer { padding: 28px 0; }
  .nav { height: 48px; }
  .nav-inner { height: 48px; padding: 0 16px; }
  .nav-logo { font-size: 13px; }
  .btn-row { flex-direction: column; gap: 14px; }
  .btn-pill { font-size: 14px; padding: 11px 22px; }
  .next-case { padding: 40px 0; }
  .next-case h3 { font-size: 20px; }
  .wrap { padding: 0 16px; }
}

/* ---------------- 首次载入开场（Liquid Glass · hello 手写） ---------------- */
html.intro-lock { overflow: hidden; }
#intro-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(250, 250, 252, 0.42);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  backdrop-filter: blur(30px) saturate(1.8);
  opacity: 1;
  transition: opacity 0.68s cubic-bezier(0.28, 0.11, 0.32, 1), transform 0.68s cubic-bezier(0.28, 0.11, 0.32, 1);
}
#intro-overlay.intro-out { opacity: 0; transform: scale(1.035); pointer-events: none; }
/* 液态玻璃背后的彩色光斑 */
#intro-overlay::before, #intro-overlay::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none;
}
#intro-overlay::before {
  width: 46vw; height: 46vw; left: -8vw; top: -12vw;
  background: radial-gradient(circle, rgba(77,163,255,0.34), rgba(77,163,255,0) 70%);
}
#intro-overlay::after {
  width: 40vw; height: 40vw; right: -6vw; bottom: -10vw;
  background: radial-gradient(circle, rgba(191,90,242,0.22), rgba(255,149,0,0.12) 55%, rgba(255,149,0,0) 72%);
}
.intro-card {
  position: relative; width: min(880px, 90vw); aspect-ratio: 720 / 400;
  border-radius: 30px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 22px 30px;
  background: linear-gradient(135deg, rgba(255,255,255,0.66), rgba(255,255,255,0.30));
  border: 1px solid rgba(255,255,255,0.75);
  box-shadow: 0 30px 90px rgba(0,0,0,0.13), inset 0 1px 0 rgba(255,255,255,0.95);
  -webkit-backdrop-filter: blur(22px) saturate(1.7);
  backdrop-filter: blur(22px) saturate(1.7);
}
/* 玻璃高光 */
.intro-card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 34%);
}
.intro-bar {
  position: relative; display: flex; justify-content: space-between; align-items: center;
  font: 500 10.5px/1 ui-monospace, Menlo, monospace; letter-spacing: 0.14em;
  color: #6e6e73; padding-bottom: 14px; border-bottom: 1px solid rgba(0,0,0,0.08);
  opacity: 0; animation: introFade 0.56s ease 0.28s forwards;
}
.intro-foot { border-bottom: 0; border-top: 1px solid rgba(0,0,0,0.08); padding: 14px 0 0; animation-delay: 0.88s; }
.intro-foot .intro-lines { display: flex; flex-direction: column; gap: 5px; }
.intro-foot span { opacity: 0; animation: introFade 0.48s ease forwards; }
.intro-foot span:nth-child(1) { animation-delay: 0.92s; }
.intro-foot span:nth-child(2) { animation-delay: 1.2s; }
.intro-foot span:nth-child(3) { animation-delay: 1.84s; }
.intro-foot .ok-tag {
  display: inline-block; background: #1d1d1f; color: #fff; border-radius: 4px;
  padding: 1px 6px; margin-right: 6px; font-size: 9.5px;
}
@keyframes introFade { to { opacity: 1; } }
.intro-stage { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.intro-stage svg { width: min(560px, 78%); height: auto; overflow: visible; }
#intro-pen { opacity: 0; }
#intro-pen.on { opacity: 1; }
.intro-progress {
  position: relative; margin-top: 12px; height: 3px; border-radius: 2px;
  background: rgba(0,0,0,0.08); overflow: hidden;
}
.intro-progress i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, #4da3ff, #0071e3); border-radius: 2px;
}
/* 「全屏打开真实项目」：桌面端不显示（display:none 不占位，渲染零变化），只在手机上出现 */
.demo-open { display: none; }
@media (max-width: 640px) {
  .intro-card { padding: 16px 18px; border-radius: 22px; }
  .intro-bar { font-size: 9px; letter-spacing: 0.1em; }
}
@media (prefers-reduced-motion: reduce) {
  #intro-overlay { display: none; }
}

/* ============================================================
   「放松一会」掌机入口（game-widget.js）
   ============================================================ */
.nav-game {
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: var(--font); font-size: 11.5px; color: var(--blue);
  transition: color .2s;
}
.nav-game:hover { color: var(--blue-deep); }
.nav-game__emoji { font-size: 14px; line-height: 1; }

.nav-game-mobile { display: block; padding: 14px 0; color: var(--ink); }

html.game-modal-open, html.game-modal-open body { overflow: hidden; }

.game-modal { position: fixed; inset: 0; z-index: 10000; }
.game-modal[hidden] { display: none; }

.game-modal__dim {
  position: absolute; inset: 0;
  background: rgba(6, 8, 12, .86);
  animation: game-dim .25s ease-out;
}
@keyframes game-dim { from { opacity: 0; } to { opacity: 1; } }

/* 只放掌机本体：iframe 透明，底下就是调暗的页面 */
.game-modal__frame {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 560px);
  height: min(94vh, 800px);
  border: 0; background: transparent;
  animation: game-pop .3s cubic-bezier(.34, 1.4, .5, 1);
}
@keyframes game-pop { from { opacity: 0; transform: translate(-50%, -48%) scale(.96); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

.game-modal__close {
  position: absolute; top: 16px; right: 20px; z-index: 1;
  width: 34px; height: 34px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .75);
  font-size: 15px; line-height: 34px; text-align: center;
  transition: background .2s, color .2s;
}
.game-modal__close:hover { background: rgba(255, 255, 255, .22); color: #fff; }

/* 案例卡假浏览器内的插画 */
.browser-body img { display: block; width: 100%; height: auto; border-radius: 10px; }

/* ============================================================
   案例卡交互模拟（case-mocks.js）：获客工作台 / 剧本工坊 / 爆款解码器
   ============================================================ */
.mock { border-radius: 10px; overflow: hidden; font-family: var(--font); }
/* 类上的 display 会盖掉 hidden 属性的 UA 样式，统一兜底 */
.mock [hidden] { display: none !important; }
.mock button { font-family: inherit; cursor: pointer; border: 0; }
.mock-hint { font-size: 11px; color: var(--faint); text-align: center; margin-top: -4px; }
.mock-btn-primary {
  background: var(--blue); color: #fff; font-size: 12px; font-weight: 600;
  padding: 7px 14px; border-radius: 15px; white-space: nowrap; transition: opacity .2s;
}
.mock-btn-primary:disabled { opacity: .55; cursor: default; }

/* ① 获客工作台：浅色仪表盘 */
.mock-hunt { background: #fff; border: 1px solid var(--card-line); padding: 14px 16px 12px; }
.mock-hunt-top { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.mock-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.mock-chip {
  font-size: 11px; padding: 5px 11px; border-radius: 13px;
  background: var(--parchment); color: var(--muted); transition: all .15s;
}
.mock-chip.active { background: var(--blue); color: #fff; }
.mock-hunt-stats { display: flex; gap: 8px; margin: 12px 0; }
.mock-hunt-stats > div {
  flex: 1; background: var(--parchment); border-radius: 8px; padding: 8px 12px;
  display: flex; flex-direction: column; gap: 1px;
}
.mock-hunt-stats b { font-size: 17px; color: var(--ink); }
.mock-hunt-stats span { font-size: 10.5px; color: var(--faint); }
.mock-hunt-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.mock-hunt-table th {
  text-align: left; font-weight: 500; color: var(--faint); font-size: 10.5px;
  padding: 4px 8px; border-bottom: 1px solid var(--card-line);
}
.mock-hunt-table td { padding: 6px 8px; border-bottom: 1px solid #F0F0F3; color: var(--ink); }
.mock-hunt-table tbody tr { cursor: pointer; transition: background .15s; }
.mock-hunt-table tbody tr:hover { background: var(--parchment); }
.mock-hunt-table .mock-ind { color: var(--muted); }
.mock-score {
  display: inline-block; min-width: 30px; text-align: center;
  font-weight: 700; color: var(--muted); background: var(--parchment); border-radius: 9px;
  padding: 1px 6px; font-size: 11px;
}
.mock-score.hot { color: #fff; background: #E0483E; }
.mock-status { color: var(--faint); }
tr.followed .mock-status { color: #1D9E57; font-weight: 600; }
.mock-row-new { animation: mock-in .4s ease-out; }
.mock-row-hide { display: none; }
@keyframes mock-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ② / ③ 剧本工坊 & 爆款解码器：深色工作台（还原项目配色） */
.mock-script, .mock-decode {
  background: #181715; color: #edecec; display: flex; text-align: left;
  border: 1px solid #3d3b38; min-height: 268px;
}
.mock-snav, .mock-script-logo { display: block; width: 100%; text-align: left; }
.mock-script .mock-script-side { width: 128px; background: #1f1e1c; border-right: 1px solid #3d3b38; padding: 14px 10px; flex-shrink: 0; }
.mock-script-logo { font-size: 12.5px; font-weight: 700; color: #cc785c; padding: 0 8px 12px; }
.mock-snav {
  font-size: 11.5px; color: #a7a7a6; padding: 8px 10px; border-radius: 8px; margin-bottom: 2px;
  transition: all .15s;
}
.mock-snav.active { background: #2f2e2c; color: #edecec; }
.mock-snav:hover { color: #edecec; }
.mock-script-main { flex: 1; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.mock-step { display: flex; flex-direction: column; gap: 9px; flex: 1; }
.mock-bubble { font-size: 11.5px; line-height: 1.55; padding: 8px 12px; border-radius: 10px; max-width: 86%; }
.mock-bubble.ai { background: #242320; color: #edecec; align-self: flex-start; }
.mock-bubble.me { background: #cc785c; color: #fff; align-self: flex-end; }
.mock-script-text {
  flex: 1; margin: 0; background: #242320; border: 1px solid #3d3b38; border-radius: 10px;
  padding: 12px 14px; font-size: 11.5px; line-height: 1.75; color: #edecec;
  font-family: inherit; white-space: pre-wrap; min-height: 118px;
}
.mock-script-text.typing::after { content: '▌'; color: #cc785c; animation: mock-blink .8s steps(1) infinite; }
@keyframes mock-blink { 50% { opacity: 0; } }
.mock-btn-terra { background: #cc785c; color: #fff; font-size: 12px; font-weight: 600; padding: 7px 14px; border-radius: 15px; }
.mock-btn-terra:disabled { opacity: .45; cursor: default; }
.mock-btn-terra.done { background: #5db872; }
.mock-asset-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.mock-asset-chips i {
  font-style: normal; font-size: 11px; padding: 5px 11px; border-radius: 13px;
  background: #2f2e2c; border: 1px solid #4b4a48; color: #edecec;
}
.mock-asset-chips i b { color: #cc785c; font-weight: 600; margin-right: 3px; }

/* ③ 爆款解码器 */
.mock-decode { flex-direction: column; padding: 14px 16px; gap: 12px; }
.mock-decode-input {
  display: flex; align-items: center; gap: 10px; background: #242320;
  border: 1px solid #3d3b38; border-radius: 10px; padding: 9px 12px;
}
.mock-decode-input .pill {
  font-size: 10.5px; background: #2f2e2c; border-radius: 11px; padding: 3px 10px; color: #a7a7a6;
}
.mock-decode-input .meta { flex: 1; font-size: 11.5px; color: #a7a7a6; }
.mock-btn-cyan { background: #5db8a6; color: #10201c; font-size: 12px; font-weight: 700; padding: 7px 14px; border-radius: 15px; }
.mock-decode-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mock-decode-steps li {
  font-size: 11.5px; color: #797877; display: flex; align-items: center; gap: 8px;
  transition: color .3s;
}
.mock-decode-steps li::before {
  content: ''; width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid #4b4a48; flex-shrink: 0; transition: all .3s;
  font-size: 9px; line-height: 14px; text-align: center; color: #10201c;
}
.mock-decode-steps li.done { color: #edecec; }
.mock-decode-steps li.done::before { content: '✓'; background: #5db8a6; border-color: #5db8a6; }
.mock-decode-report {
  background: #242320; border: 1px solid #3d3b38; border-radius: 10px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 10px;
  animation: mock-in .4s ease-out;
}
.mock-decode-report .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.mock-decode-report .tags i {
  font-style: normal; font-size: 10.5px; padding: 3px 10px; border-radius: 11px;
  background: rgba(93,184,166,.14); color: #5db8a6;
}
.mock-decode-report .tags i.red { background: rgba(198,69,69,.16); color: #e08a8a; }
.mock-scripts { display: flex; gap: 8px; }
.mock-scripts .sc {
  flex: 1; background: #1f1e1c; border: 1px solid #4b4a48; border-radius: 8px;
  padding: 9px 10px; display: flex; flex-direction: column; gap: 7px;
}
.mock-scripts .sc b { font-size: 11px; line-height: 1.5; color: #edecec; }
.mock-copy {
  font-size: 10px; color: #cc785c; background: none; text-align: left; padding: 0;
}
.mock-step[hidden], .mock-decode-report[hidden], .mock-scripts[hidden] { display: none; }
.mock-snav { background: transparent; }

/* ---------- 首页原有三案例的交互模拟（浅色系） ---------- */
.mock-psy, .mock-sub, .mock-dify {
  background: #fff; border: 1px solid var(--card-line); border-radius: 10px;
  padding: 14px 16px; text-align: left;
}
/* 状态圆点：流程类模拟共用 */
.dot2 {
  width: 15px; height: 15px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--hairline); display: inline-block;
  font-size: 9px; line-height: 15px; text-align: center; color: #fff;
  transition: all .3s;
}
.run .dot2 { border-color: var(--blue); background: var(--blue-soft); animation: mock-pulse 1s ease-in-out infinite; }
.done .dot2 { border-color: #1D9E57; background: #1D9E57; }
.done .dot2::before { content: '✓'; }
@keyframes mock-pulse { 50% { transform: scale(1.25); } }

/* ① 心理助手：对话 + 情绪面板 */
.mock-psy { display: flex; gap: 14px; }
.mock-psy-chat { flex: 1.5; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mock-psy-msgs { display: flex; flex-direction: column; gap: 8px; min-height: 118px; }
.mock-bubble.light.ai { background: var(--parchment); color: var(--ink); }
.mock-bubble.light.me { background: var(--blue); }
.mock-bubble.light.typing { color: var(--faint); font-size: 11px; }
.mock-psy-replies { display: flex; gap: 6px; flex-wrap: wrap; }
.mock-qr {
  font-size: 11px; padding: 5px 12px; border-radius: 14px;
  background: var(--blue-soft); color: var(--blue); transition: all .15s;
}
.mock-qr:hover:not(:disabled) { background: var(--blue); color: #fff; }
.mock-qr:disabled { opacity: .38; cursor: default; }
.mock-psy-side {
  flex: 1; background: var(--parchment); border-radius: 10px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 7px;
}
.mock-psy-side .k { font-size: 11px; color: var(--faint); }
.mock-psy-side .v { font-size: 12px; color: var(--muted); }
.mock-psy-side .v b { font-size: 24px; color: var(--ink); margin-right: 2px; }
.mock-psy-bar { height: 6px; border-radius: 3px; background: var(--hairline); overflow: hidden; }
.mock-psy-bar i { display: block; height: 100%; background: var(--blue); border-radius: 3px; transition: width .6s ease; }
.mock-psy-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 2px; }
.mock-psy-tags span {
  font-size: 10px; padding: 3px 9px; border-radius: 10px;
  background: var(--blue-soft); color: var(--blue);
}
.mock-psy-tags span.red { background: #FDECEC; color: #D9483B; }

/* ①′ 心理助手·年级管理端：年级切换 + 班级栏 + 学生情绪墙 + 风险预警栏 + AI 研判条（首页/作品页共用，固定高度+内部滚动） */
.psycho-duo .browser-body { padding: 12px 14px; }
.mock-padmin {
  height: 229px; overflow: hidden; display: flex; flex-direction: column; gap: 6px;
  background: #fff; border: 1px solid var(--card-line); border-radius: 10px;
  padding: 8px 9px; text-align: left; font-size: 10px; color: var(--muted);
}
.pa-top { display: flex; align-items: center; gap: 8px; flex: none; }
.pa-brand { font-weight: 700; color: var(--ink); font-size: 11px; }
.pa-tabs { display: flex; gap: 2px; background: var(--parchment); border-radius: 8px; padding: 2px; }
.pa-tabs b {
  font-size: 10px; font-weight: 600; color: var(--muted);
  padding: 2px 9px; border-radius: 6px; cursor: pointer; transition: all .15s;
}
.pa-tabs b.on { background: #fff; color: var(--blue); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.pa-cov { margin-left: auto; color: var(--faint); }
.pa-cov i { font-style: normal; color: var(--ink); font-weight: 600; }
.pa-main { flex: 1; min-height: 0; display: flex; gap: 7px; }
.pa-classes {
  width: 84px; flex: none; overflow-y: auto; scrollbar-width: thin;
  display: flex; flex-direction: column; gap: 3px; padding-right: 2px;
}
.pa-cls {
  display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--muted);
  background: transparent; padding: 4px 6px; border-radius: 6px; text-align: left;
  white-space: nowrap; transition: all .15s;
}
.pa-cls:hover { background: var(--parchment); }
.pa-cls.on { background: var(--blue-soft); color: var(--blue); font-weight: 600; }
.pa-cls i {
  font-style: normal; margin-left: auto; min-width: 14px; text-align: center;
  font-size: 9px; border-radius: 7px; padding: 0 3px; background: #FDECEC; color: #D9483B;
}
.pa-wall { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pa-wall-hd { font-size: 9.5px; color: var(--faint); flex: none; }
.pa-grid {
  flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; align-content: start;
  padding-right: 2px;
}
.pa-stu {
  display: flex; align-items: center; gap: 3px; font-size: 9.5px; color: var(--ink);
  padding: 3px 6px; border-radius: 6px; background: var(--parchment); transition: all .15s;
}
.pa-stu .d { width: 5px; height: 5px; border-radius: 50%; background: #1D9E57; flex: none; }
.pa-stu b { margin-left: auto; font-weight: 600; color: var(--faint); }
.pa-stu.warn { background: #FFF4E5; } .pa-stu.warn .d { background: #E8930C; } .pa-stu.warn b { color: #B96A00; }
.pa-stu.risk { background: #FDECEC; } .pa-stu.risk .d { background: #D9483B; } .pa-stu.risk b { color: #D9483B; }
.pa-stu:hover { transform: translateY(-1px); }
.pa-stu.sel { outline: 1.5px solid var(--blue); outline-offset: 0; }
.pa-stu.pulse { animation: pa-pulse 0.5s ease-in-out 3; }
@keyframes pa-pulse { 50% { background: var(--blue-soft); } }
.pa-risk {
  width: 172px; flex: none; display: flex; flex-direction: column; gap: 4px;
  background: #FFF9F5; border: 1px solid #F6D9CB; border-radius: 8px; padding: 6px 7px;
}
.pa-risk-hd { font-size: 10px; font-weight: 700; color: #D9483B; flex: none; }
.pa-risk-list { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; gap: 4px; }
.pa-rk { display: flex; flex-direction: column; gap: 2px; text-align: left; background: #fff; border: 1px solid var(--card-line); border-radius: 6px; padding: 4px 6px; transition: all .15s; }
.pa-rk:hover { border-color: #D9483B; }
.pa-rk .h { display: flex; align-items: center; gap: 3px; }
.pa-rk .lv { width: 6px; height: 6px; border-radius: 50%; background: #D9483B; flex: none; }
.pa-rk.mid .lv { background: #E8930C; }
.pa-rk b { font-size: 10px; color: var(--ink); }
.pa-rk em { font-style: normal; font-size: 9px; color: var(--faint); }
.pa-rk u {
  text-decoration: none; margin-left: auto; font-size: 8.5px; padding: 1px 4px;
  border-radius: 6px; background: #FDECEC; color: #D9483B;
}
.pa-rk u.ok { background: #E8F6EE; color: #1D9E57; }
.pa-rk .w { font-size: 9px; line-height: 1.45; color: var(--muted); }
.pa-foot {
  flex: none; font-size: 9.5px; color: var(--muted); background: var(--parchment);
  border-radius: 6px; padding: 4px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ② 算力补贴：流程步进 */
.mock-sub-steps { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.mock-sub .st {
  display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted);
  background: var(--parchment); border-radius: 8px; padding: 8px 12px; transition: all .3s;
}
.mock-sub .st.run { color: var(--ink); background: var(--blue-soft); }
.mock-sub .st.done { color: var(--ink); }
.mock-sub .st.done:last-child { background: #E9F7EF; }
.mock-sub .st .who { margin-left: auto; font-style: normal; font-size: 10px; color: var(--faint); white-space: nowrap; }
.mock-sub .st.run .who, .mock-sub .st.done .who { color: var(--muted); }
.mock-sub-foot { display: flex; align-items: center; justify-content: space-between; }
.mock-sub-amt { font-size: 12px; color: var(--muted); }
.mock-sub-amt b { font-size: 20px; color: var(--ink); margin-left: 4px; }

/* ③ Dify 工作流：节点 + 日志 */
.mock-dify-nodes { display: flex; gap: 8px; margin-bottom: 12px; }
.mock-dify .nd {
  flex: 1; display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted);
  background: var(--parchment); border-radius: 8px; padding: 8px 10px; transition: all .3s;
  min-width: 0; white-space: nowrap;
}
.mock-dify .nd.run { color: var(--ink); background: var(--blue-soft); }
.mock-dify .nd.done { color: var(--ink); }
.mock-dify-log {
  font-size: 11.5px; color: var(--faint); background: var(--parchment);
  border-radius: 8px; padding: 8px 12px; margin-bottom: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.mock-dify-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mock-dify-out { font-size: 12px; color: #1D9E57; font-weight: 600; animation: mock-in .4s ease-out; }
.mock-dify-out b { font-size: 16px; }

/* 心理助手：消息区固定高度，超出滚动 */
.mock-psy-msgs {
  height: 132px;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* ⑤′ OpenMAIC 多智能体课堂（对应 9001 项目，紫色调） */
.mock-maic {
  background: linear-gradient(160deg, #f7f5ff 0%, #f2efff 60%, #faf8ff 100%);
  border: 1px solid #e4defc; border-radius: 10px; padding: 14px 16px;
}
.mock-maic-top { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.mock-maic-topic {
  flex: 1; min-width: 0; font-size: 11.5px; color: var(--faint);
  background: #fff; border: 1px solid var(--hairline); border-radius: 8px;
  padding: 8px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: all .2s;
}
.mock-maic-topic.filled { color: var(--ink); border-color: #b9a8f5; }
.mock-maic-chip {
  font-size: 11px; padding: 6px 11px; border-radius: 14px; white-space: nowrap;
  background: #fff; border: 1px solid #d8cefa; color: #7c5cf0; transition: all .15s;
}
.mock-maic-chip:hover { background: #7c5cf0; color: #fff; }
.mock-btn-maic {
  font-size: 12px; font-weight: 600; padding: 7px 13px; border-radius: 15px;
  background: #7c5cf0; color: #fff; white-space: nowrap; transition: opacity .2s;
}
.mock-btn-maic:disabled { opacity: .4; cursor: default; }
.mock-maic-roles { display: flex; gap: 8px; margin-bottom: 12px; }
.mock-maic .rl {
  flex: 1; text-align: center; background: #fff; border-radius: 10px;
  padding: 10px 4px 8px; border: 1.5px solid var(--hairline);
  opacity: 0; transform: translateY(8px) rotate(-3deg); transition: all .4s cubic-bezier(.3,1.4,.5,1);
}
.mock-maic .rl.in { opacity: 1; transform: none; }
.mock-maic .rl i { font-style: normal; font-size: 20px; display: block; }
.mock-maic .rl b { display: block; font-size: 11.5px; margin-top: 3px; color: var(--ink); }
.mock-maic .rl span { font-size: 9.5px; color: var(--faint); }
.mock-maic .rl.b { border-color: #9db8f5; } .mock-maic .rl.b b { color: #4a6fd4; }
.mock-maic .rl.g { border-color: #93d9a8; } .mock-maic .rl.g b { color: #2f9e57; }
.mock-maic .rl.o { border-color: #f2c078; } .mock-maic .rl.o b { color: #d68f1f; }
.mock-maic .rl.p { border-color: #b9a8f5; } .mock-maic .rl.p b { color: #7c5cf0; }
.mock-maic .rl.pk { border-color: #f2a0c0; } .mock-maic .rl.pk b { color: #d4548c; }
.mock-maic-chat {
  height: 118px; overflow-y: auto; scrollbar-width: thin;
  display: flex; flex-direction: column; gap: 6px;
  background: #fff; border: 1px solid var(--hairline); border-radius: 8px; padding: 10px 12px;
}
.mock-maic-msg {
  font-size: 11.5px; line-height: 1.55; color: var(--ink);
  animation: mock-in .35s ease-out;
}
.mock-maic-msg b {
  display: inline-block; margin-right: 6px; padding: 1px 8px; border-radius: 9px;
  font-size: 10px; color: #fff; background: var(--muted);
}
.mock-maic-msg.b b { background: #4a6fd4; }
.mock-maic-msg.g b { background: #2f9e57; }
.mock-maic-msg.o b { background: #d68f1f; }
.mock-maic-msg.p b { background: #7c5cf0; }
.mock-maic-msg.pk b { background: #d4548c; }

/* ⑦ 柬埔寨外派工资计算工具：桌面工具风 */
.mock-payroll { background: #fff; border: 1px solid var(--card-line); border-radius: 10px; padding: 14px 16px; text-align: left; }
.mock-payroll-src {
  font-size: 10.5px; color: #8A5A00; background: #FFF7E8;
  border-radius: 6px; padding: 5px 9px; margin-bottom: 9px;
}
.mock-payroll-ph { border: 1px solid var(--card-line); border-radius: 8px; padding: 9px 11px; margin-bottom: 10px; }
.mock-payroll-ph .ph-k { font-size: 10.5px; color: var(--muted); display: flex; align-items: baseline; gap: 7px; }
.mock-payroll-ph .ph-k + .ph-k { margin-top: 5px; }
.mock-payroll-ph .ph-k b {
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 10px;
  font-weight: 600; color: var(--ink);
}
.mock-payroll-ph .ph-x { margin-top: 8px; font-size: 10.5px; color: #8A5A00; }
.mock-payroll-up { display: flex; gap: 8px; margin-bottom: 12px; }
.mock-payroll .up {
  flex: 1; min-width: 0; text-align: left; background: var(--parchment);
  border: 1.5px dashed var(--hairline); border-radius: 8px; padding: 9px 12px;
  display: flex; flex-direction: column; gap: 2px; transition: all .2s;
}
.mock-payroll .sys { font-size: 9.5px; font-weight: 700; letter-spacing: .02em; }
.mock-payroll .sys.sa { color: var(--blue-deep); }
.mock-payroll .sys.sb { color: #7A3FA0; }
.mock-payroll .up b { font-size: 11.5px; color: var(--ink); }
.mock-payroll .up em { font-style: normal; font-size: 10px; color: var(--faint); }
.mock-payroll .up.ok { border-style: solid; border-color: #1D9E57; background: #E9F7EF; }
.mock-payroll .up.ok b::after { content: ' ✓'; color: #1D9E57; }
.mock-payroll-go:disabled { opacity: .45; cursor: default; }
.mock-payroll-steps { display: flex; gap: 6px; margin-bottom: 10px; }
.mock-payroll-steps span {
  flex: 1; text-align: center; font-size: 10.5px; color: var(--faint);
  background: var(--parchment); border-radius: 12px; padding: 4px 0; transition: all .3s;
}
.mock-payroll-steps span.done { color: #1D9E57; background: #E9F7EF; }
.mock-payroll-steps span.done::before { content: '✓ '; }
.mock-payroll-tbl { width: 100%; border-collapse: collapse; font-size: 11px; margin-bottom: 10px; }
.mock-payroll-tbl th {
  text-align: left; font-weight: 500; color: var(--faint); font-size: 10px;
  padding: 4px 8px; border-bottom: 1px solid var(--card-line);
}
.mock-payroll-tbl td { padding: 5px 8px; border-bottom: 1px solid #F0F0F3; color: var(--ink); }
.mock-payroll-tbl td:not(:first-child) { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.mock-payroll-tbl tbody tr { animation: mock-in .4s ease-out both; }
.mock-payroll-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mock-payroll-stat { font-size: 11.5px; color: var(--muted); animation: mock-in .4s ease-out; }
.mock-payroll-stat b { color: #1D9E57; }
.mock-payroll-go { white-space: nowrap; align-self: flex-start; }
.mock-payroll .up { flex: 1 1 0; }

/* ⑩ 企业 AI 工作台（DeepSeek Harness 二开）：深色五页 —— 知识库 / Skill / Plugin / 开发日历 / 合同合规审查 */
.mock-wb {
  display: flex; height: 330px; overflow: hidden; text-align: left;
  background: #0a0b0d; color: #f0f1f3;
  border: 1px solid #26272b; border-radius: 10px; font-size: 10.5px;
}
.wb-side {
  flex: none; width: 124px; display: flex; flex-direction: column; gap: 2px;
  background: #0c0d0f; border-right: 1px solid #26272b; padding: 10px 8px;
}
.wb-brand { font-size: 11px; font-weight: 600; line-height: 1.25; padding: 2px 4px 8px; }
.wb-brand small { display: block; margin-top: 3px; font-size: 8.5px; font-weight: 400; color: #7a7c82; }
.wb-grp { padding: 6px 4px 3px; font-size: 9px; color: #7a7c82; }
.wb-nav {
  display: flex; align-items: center; gap: 5px; width: 100%;
  padding: 6px 7px; border: 0; border-radius: 7px; text-align: left;
  background: transparent; color: #c8c9cd; font-size: 10.5px;
  transition: background .2s, color .2s;
}
.wb-nav i { font-style: normal; font-size: 11px; }
.wb-nav:hover { background: #17181c; color: #fff; }
.wb-nav.on { background: #1f2027; color: #fff; font-weight: 600; }
.wb-side-foot {
  margin-top: auto; padding: 8px 4px 0; border-top: 1px solid #26272b;
  font-size: 8.5px; line-height: 1.6; color: #7a7c82;
}
.wb-side-foot small { display: block; color: #6a6c72; }
.wb-sess {
  display: grid; grid-template-columns: auto 1fr; gap: 1px 5px;
  margin: 5px 0 4px; padding: 5px 6px; text-align: left;
  background: #131418; border: 1px solid #26272b; border-radius: 7px; cursor: pointer;
}
.wb-sess:hover { border-color: #3d3e44; }
.wb-sess.on { background: rgba(76, 141, 255, .14); border-color: #4c8dff; }
.wb-sess i { grid-row: 1 / span 2; align-self: center; font-style: normal; font-size: 9px; }
.wb-sess span { min-width: 0; font-size: 9px; line-height: 1.3; color: #e6e7ea; }
.wb-sess small { grid-column: 2; color: #6a6c72; line-height: 1.3; }

.wb-main { flex: 1; min-width: 0; padding: 11px 12px; overflow-y: auto; scrollbar-width: thin; display: flex; flex-direction: column; }
.wb-pane { display: none; flex-direction: column; gap: 8px; }
.wb-pane.on { display: flex; flex: 1 0 auto; }
.wb-h { font-size: 13px; font-weight: 600; }
.wb-h small { display: block; margin-top: 2px; font-size: 9.5px; font-weight: 400; color: #8a8c92; }

.wb-up {
  align-self: flex-start; padding: 5px 10px; border: 1px solid #33343a; border-radius: 7px;
  background: #1f2027; color: #f0f1f3; font-size: 10px; transition: background .2s;
}
.wb-up:hover { background: #2a2b33; }

.wb-docs, .wb-rows, .wb-hits { display: flex; flex-direction: column; gap: 5px; }
.wb-doc, .wb-row {
  display: flex; align-items: center; gap: 8px;
  background: #131418; border: 1px solid #26272b; border-radius: 8px; padding: 6px 9px;
  transition: opacity .22s;
}
.wb-doc.off, .wb-row.off { opacity: .48; }
.wb-doc b, .wb-row b { flex: 1; min-width: 0; font-size: 10.5px; font-weight: 600; }
.wb-row b { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 500; }
.wb-doc em, .wb-row em { font-style: normal; font-size: 9px; color: #8a8c92; }
.wb-doc.ing { animation: mock-in .4s ease-out both; }

.wb-sw {
  position: relative; flex: none; width: 26px; height: 15px; border-radius: 999px;
  background: #3a3b41; cursor: pointer; transition: background .22s;
}
.wb-sw::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px;
  border-radius: 50%; background: #c8c9cd; transition: transform .22s, background .22s;
}
.wb-sw.on { background: #f0f1f3; }
.wb-sw.on::after { transform: translateX(11px); background: #0a0b0d; }

.wb-q {
  display: flex; align-items: center; gap: 8px;
  background: #131418; border: 1px solid #26272b; border-radius: 8px; padding: 6px 8px;
}
.wb-q-t { flex: 1; min-width: 0; font-size: 10px; color: #e6e7ea; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-go {
  flex: none; padding: 4px 11px; border: 0; border-radius: 6px;
  background: #f0f1f3; color: #0a0b0d; font-size: 10px; font-weight: 600;
}
.wb-idle {
  padding: 14px 8px; border: 1px dashed #26272b; border-radius: 8px;
  text-align: center; font-size: 9.5px; color: #6a6c72;
}

.wb-fill { display: block; height: 3px; border-radius: 999px; background: #26272b; overflow: hidden; }
.wb-fill i { display: block; height: 100%; width: 0; background: #4c8dff; transition: width 1.15s linear; }
.wb-doc .wb-fill { width: 62px; }

.wb-hit {
  padding: 7px 9px; background: #131418; border: 1px solid #26272b;
  border-left: 2px solid #4c8dff; border-radius: 8px;
  animation: mock-in .45s ease-out both;
}
.wb-hit b { display: flex; align-items: center; gap: 6px; font-size: 10px; color: #e6e7ea; }
.wb-hit b i {
  font-style: normal; padding: 1px 4px; border-radius: 4px;
  background: #17301f; color: #8fd18a; font-size: 8.5px;
}
.wb-hit p { margin-top: 3px; font-size: 9.5px; line-height: 1.55; color: #9a9ca2; }

.wb-cnt { font-size: 10px; color: #9a9ca2; }
.wb-cnt b { font-size: 11.5px; color: #f0f1f3; }
.wb-note { font-size: 9px; line-height: 1.5; color: #7a7c82; }
.wb-inst {
  flex: none; padding: 4px 10px; border: 0; border-radius: 6px;
  background: #f0f1f3; color: #0a0b0d; font-size: 9.5px; font-weight: 600;
}
span.wb-inst.done {
  padding: 3px 9px; border: 1px solid #2c4b34; border-radius: 6px;
  background: transparent; color: #7fd18a; font-weight: 500; white-space: nowrap;
}

/* 开发日历：月历（带节点的日期可点）+ 当天安排 */
.wb-cal-top { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.wb-cal-top b { font-size: 11.5px; color: #f0f1f3; }
.wb-cal-top em { font-style: normal; font-size: 8.5px; color: #7a7c82; white-space: nowrap; }
.wb-cal { display: flex; flex-direction: column; gap: 3px; }
.wb-cal-wd, .wb-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.wb-cal-wd span { text-align: center; font-size: 8px; color: #6a6c72; }
.wb-cal .dd {
  position: relative; height: 16px; display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: 5px; font-size: 9px; color: #b6b7bc;
}
.wb-cal .dd.out { visibility: hidden; }
.wb-cal .dd.has {
  background: #131418; border-color: #26272b; color: #f0f1f3; cursor: pointer;
  padding-bottom: 3px;
}
.wb-cal .dd.has::after {
  content: ''; position: absolute; bottom: 2px; left: 50%;
  width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: #4c8dff;
}
.wb-cal .dd.has:hover { border-color: #3d3e44; }
.wb-cal .dd.on { background: rgba(76, 141, 255, .18); border-color: #4c8dff; color: #fff; }
.wb-evs { display: flex; flex-direction: column; gap: 4px; }
.wb-ev {
  display: flex; flex-direction: column; gap: 1px; padding: 4px 8px;
  background: #131418; border: 1px solid #26272b; border-left: 2px solid #4c8dff; border-radius: 8px;
  animation: mock-in .4s ease-out both;
}
.wb-ev b { font-size: 10px; font-weight: 600; color: #f0f1f3; }
.wb-ev em { font-style: normal; font-size: 8.5px; color: #7a7c82; }

/* 合同合规审查：待审文件 → 逐条风险（点卡片展开修改建议） */
.wb-file {
  display: flex; align-items: center; gap: 7px;
  background: #131418; border: 1px solid #26272b; border-radius: 8px; padding: 6px 8px;
}
.wb-file > i { flex: none; font-style: normal; font-size: 13px; }
.wb-file div { flex: 1; min-width: 0; }
.wb-file b {
  display: block; font-size: 10px; font-weight: 600; color: #e6e7ea;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wb-file em { display: block; margin-top: 1px; font-style: normal; font-size: 8.5px; color: #8a8c92; }
.wb-risks { display: flex; flex-direction: column; gap: 5px; }
.wb-risk {
  display: flex; align-items: flex-start; gap: 6px; padding: 6px 8px;
  background: #131418; border: 1px solid #26272b; border-left: 2px solid #4c8dff;
  border-radius: 8px; cursor: pointer; animation: mock-in .45s ease-out both;
}
.wb-risk:hover { border-color: #3d3e44; border-left-color: #4c8dff; }
.wb-risk .lv {
  flex: none; width: 16px; padding: 1px 0; border-radius: 4px;
  text-align: center; font-size: 8px; font-weight: 600;
}
.wb-risk .lv.high { background: #3a1d1d; color: #f0a2a2; }
.wb-risk .lv.mid { background: #3a2f17; color: #e3c07a; }
.wb-risk .lv.low { background: #17301f; color: #8fd18a; }
.wb-risk div { flex: 1; min-width: 0; }
.wb-risk b { display: block; font-size: 10px; font-weight: 600; color: #e6e7ea; }
.wb-risk em { display: block; margin-top: 1px; font-style: normal; font-size: 8.5px; line-height: 1.45; color: #8a8c92; }
.wb-risk .fix { color: #7ea9ff; }

/* 会话视图（点侧边栏会话卡打开）：对齐真实 dsh 对话界面 */
.wb-pane[data-p="chat"] { gap: 5px; }
.wb-ctop { display: flex; align-items: center; gap: 5px; }
.wb-ctop b { font-size: 11.5px; }
.wb-mode {
  padding: 1px 5px; border: 1px solid #26272b; border-radius: 5px;
  font-size: 8px; font-weight: 500; color: #a8a9ae; white-space: nowrap;
}
.wb-ctop em { margin-left: auto; font-style: normal; font-size: 8.5px; color: #6a6c72; white-space: nowrap; }
.wb-ctabs { display: flex; gap: 12px; padding-bottom: 4px; border-bottom: 1px solid #26272b; }
.wb-ctabs button { padding: 0 0 3px; border: 0; background: none; color: #7a7c82; font-size: 9.5px; }
.wb-ctabs button.on {
  color: #4c8dff; font-weight: 600; border-bottom: 1.5px solid #4c8dff; margin-bottom: -4.5px;
}
.wb-ctalk, .wb-ctrace { display: flex; flex-direction: column; gap: 5px; }
.wb-cu {
  align-self: flex-end; max-width: 72%; padding: 4px 8px;
  background: #1f2024; border-radius: 9px 9px 3px 9px; font-size: 10px;
}
.wb-tool {
  align-self: flex-start; display: flex; align-items: center; gap: 4px;
  padding: 0; border: 0; background: none; color: #a8a9ae; font-size: 9px;
}
.wb-tool i { font-style: normal; transition: transform .2s; }
.wb-tool.open i { transform: rotate(90deg); }
.wb-toolout {
  padding: 5px 7px; background: #101114; border: 1px solid #26272b; border-radius: 7px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 8.5px; line-height: 1.4; color: #8fd18a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wb-ca { font-size: 10px; line-height: 1.45; color: #e6e7ea; }
.wb-cdoc {
  padding: 7px 9px; background: #131418; border: 1px solid #26272b; border-radius: 8px;
}
.wb-cdoc h4 { margin: 0; font-size: 10.5px; font-weight: 600; color: #f0f1f3; }
.wb-cdoc p { margin: 3px 0 0; font-size: 9px; line-height: 1.5; color: #b6b7bc; }
.wb-cdoc p b { color: #f0f1f3; }
.wb-cdoc i { font-style: normal; margin-right: 2px; }
.wb-ts { display: flex; align-items: center; gap: 6px; font-size: 9px; color: #c8c9cd; }
.wb-ts b {
  flex: none; width: 14px; height: 14px; display: flex; align-items: center; justify-content: center;
  border: 1px solid #26272b; border-radius: 4px; font-size: 8px; font-weight: 500; color: #7a7c82;
}
.wb-ts em {
  margin-left: auto; font-style: normal; font-size: 8.5px; color: #6a6c72;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.wb-composer {
  margin-top: auto; display: flex; flex-direction: column; gap: 3px;
  padding: 5px 8px; background: #131418; border: 1px solid #26272b; border-radius: 9px;
}
.wb-composer span { font-size: 9px; color: #6a6c72; }
.wb-composer b { align-self: flex-end; font-size: 8.5px; font-weight: 500; color: #a8a9ae; }
.wb-cstat { font-size: 7.5px; color: #55575d; text-align: center; }

/* ============================================================
   所有假页面框体高度固定：内容超出时框内滚动，不拉长外框
   （高度取各模拟内容最多时的自然高度，首页/作品页通用）
   ============================================================ */
.browser-body .mock { overflow-y: auto; scrollbar-width: thin; }
.mock-hunt    { height: 300px; }
.mock-psy     { height: 205px; }
.mock-sub     { height: 228px; }
.mock-dify    { height: 212px; }
.mock-script  { height: 330px; min-height: 0; }   /* 与 .mock-decode 等高：作品页合并行切 tab 不能跳高 */
.mock-maic    { height: 250px; }
.mock-decode  { height: 330px; }
.mock-payroll { height: 352px; }
/* 工作台：外框不滚，滚动交给右侧主区（.browser-body .mock 的 overflow-y 优先级更高，需覆盖） */
.browser-body .mock-wb { overflow: hidden; }

/* 获客工作台：只有客户列表滚动，工具栏/统计固定，表头吸顶 */
.mock-hunt { display: flex; flex-direction: column; overflow: hidden; }
.mock-hunt-tblwrap { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.mock-hunt-table thead th {
  position: sticky; top: 0; background: #fff; z-index: 1;
}

/* OpenMAIC 课堂：外框不滚（消除双滚动条），聊天区自适应占满剩余空间 */
.mock-maic { display: flex; flex-direction: column; overflow: hidden; height: 265px; }
.mock-maic-chat { flex: 1; min-height: 0; height: auto; }

/* Dify 工作流 v2：按真实 DSL 的画布结构（节点 / 双迭代容器 / 状态流转） */
.mock-dify { height: 340px; display: flex; flex-direction: column; gap: 10px; }
.mock-dify-row { display: flex; align-items: stretch; gap: 6px; }
.mock-dify .dn {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: #fff; border: 1.5px solid var(--hairline); border-radius: 10px;
  padding: 7px 4px; text-align: center; transition: all .3s;
}
.mock-dify .dn .di { font-style: normal; font-size: 14px; line-height: 1.1; }
.mock-dify .dn .dt { font-size: 11px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.mock-dify .dn b { font-size: 9px; font-weight: 500; color: var(--faint); white-space: nowrap; }
.mock-dify .dn.run { border-color: var(--blue); background: var(--blue-soft); animation: mock-pulse 1s ease-in-out infinite; }
.mock-dify .dn.done { border-color: #1D9E57; }
.mock-dify .dn.done .di::after { content: '✓'; color: #1D9E57; font-size: 10px; margin-left: 3px; }
.mock-dify .darrow { align-self: center; width: 14px; height: 2px; background: var(--hairline); position: relative; flex-shrink: 0; }
.mock-dify .darrow::after { content: ''; position: absolute; right: -1px; top: -3px; border: 4px solid transparent; border-left-color: var(--hairline); }

/* 双迭代容器（Dify iteration 画布样式：虚线容器 + 左上角标签） */
.mock-dify-lanes { display: flex; gap: 8px; }
.mock-dify .dlane {
  flex: 1; min-width: 0; position: relative;
  border: 1.5px dashed #c9c4f5; border-radius: 10px; padding: 14px 8px 8px;
  background: #faf9ff;
}
.mock-dify .dl-t {
  position: absolute; top: -8px; left: 10px;
  font-size: 9.5px; font-weight: 600; color: #7c5cf0;
  background: #fff; padding: 0 6px; border-radius: 4px;
}
.mock-dify .dl-chain { display: flex; gap: 4px; }
.mock-dify .dl-chain i {
  flex: 1; min-width: 0; font-style: normal; font-size: 9.5px; text-align: center;
  background: #fff; border: 1px solid var(--hairline); border-radius: 6px;
  padding: 5px 2px; color: var(--muted); transition: all .3s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mock-dify .dl-chain i.run { border-color: var(--blue); background: var(--blue-soft); color: var(--blue); }
.mock-dify .dl-chain i.done { border-color: #bfe3cd; background: #E9F7EF; color: #1D9E57; }

/* 获客工作台 v2：AI Hunter 自动化控制台风格 */
.mock-hunt { display: flex; flex-direction: column; gap: 10px; }
.mock-hunt-nav {
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--card-line); padding-bottom: 8px;
}
.mock-hunt-nav .lg { font-size: 12.5px; font-weight: 700; color: var(--ink); margin-right: 2px; }
.mock-hunt-nav .nv { font-size: 11px; color: var(--faint); }
.mock-hunt-nav .nv.on { color: var(--blue); font-weight: 600; }
.mock-hunt-nav .set { margin-left: auto; }
.mock-hunt-stats { display: flex; gap: 6px; }
.mock-hunt-stats > div {
  flex: 1; background: var(--parchment); border-radius: 8px; padding: 7px 9px;
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.mock-hunt-stats b { font-size: 13.5px; color: var(--ink); white-space: nowrap; }
.mock-hunt-stats span { font-size: 9.5px; color: var(--faint); white-space: nowrap; }
.mock-hunt-job { flex: 1; min-height: 0; }
.mock-hunt-job .empty {
  display: flex; align-items: center; justify-content: center; height: 100%; min-height: 110px;
  font-size: 11px; color: var(--faint);
  border: 1.5px dashed var(--hairline); border-radius: 8px;
}
.mock-hunt .jobcard {
  background: var(--parchment); border-radius: 8px; padding: 10px 12px;
  animation: mock-in .4s ease-out; font-size: 11px;
}
.mock-hunt .jh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.mock-hunt .jh b { font-family: ui-monospace, "SF Mono", Menlo, monospace; color: var(--ink); }
.mock-hunt .st { font-size: 10px; color: var(--blue); }
.mock-hunt .st.run { animation: mock-pulse 1s ease-in-out infinite; }
.mock-hunt .st.ok { color: #1D9E57; font-weight: 600; }
.mock-hunt .jmeta { display: flex; gap: 10px; margin-bottom: 7px; }
.mock-hunt .jmeta i { font-style: normal; font-size: 10px; color: var(--faint); }
.mock-hunt .jsteps { display: flex; gap: 4px; margin-bottom: 7px; }
.mock-hunt .jsteps span {
  flex: 1; text-align: center; font-size: 9.5px; padding: 4px 2px; border-radius: 6px;
  background: #fff; border: 1px solid var(--hairline); color: var(--faint); transition: all .3s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mock-hunt .jsteps span.done { background: #E9F7EF; border-color: #bfe3cd; color: #1D9E57; }
.mock-hunt .jsteps span.done::before { content: '✓ '; }
.mock-hunt .jsteps span.run { border-color: var(--blue); color: var(--blue); transition: border-color .3s, color .3s; }
.mock-hunt .jsteps span.run.fill {
  background-image: linear-gradient(var(--blue-soft), var(--blue-soft));
  background-repeat: no-repeat;
  animation: chip-fill 3.4s linear forwards;
}
@keyframes chip-fill {
  from { background-size: 0% 100%; }
  to { background-size: 100% 100%; }
}
.mock-hunt .jlinks { font-size: 10px; color: var(--blue); }
.mock-hunt-go { align-self: flex-start; }

/* Dify 产出预览：周报摘要 + 线索 CSV */
.mock-dify-outpanel {
  display: flex; gap: 8px; align-items: stretch;
  animation: mock-in .45s ease-out;
}
.mock-dify-outpanel .op-rep, .mock-dify-outpanel .op-csv {
  background: var(--parchment); border-radius: 8px; padding: 9px 11px;
  font-size: 10.5px; color: var(--muted); line-height: 1.6;
}
.mock-dify-outpanel .op-rep { flex: 1.15; }
.mock-dify-outpanel .op-csv { flex: 1; min-width: 0; }
.mock-dify-outpanel b { display: block; font-size: 11px; color: var(--ink); margin-bottom: 4px; }
.mock-dify-outpanel p { margin: 0 0 2px; }
.mock-dify-outpanel p.hl { color: var(--blue); }
.mock-dify-outpanel table { width: 100%; border-collapse: collapse; }
.mock-dify-outpanel th {
  text-align: left; font-weight: 500; font-size: 9.5px; color: var(--faint);
  padding: 2px 4px; border-bottom: 1px solid var(--hairline);
}
.mock-dify-outpanel td { padding: 3px 4px; border-bottom: 1px solid #ECECF1; color: var(--ink); white-space: nowrap; }

/* Dify 交互页精简：节点单行横排，整体压短 */
.mock-dify { height: 300px; gap: 8px; }
.mock-dify-row { gap: 5px; }
.mock-dify .dn {
  flex-direction: row; justify-content: center; align-items: center;
  gap: 6px; padding: 6px 8px;
}
.mock-dify .dn .di { font-size: 12px; }
.mock-dify .dn .dt { font-size: 11px; }
.mock-dify .dn b { font-size: 9px; margin-left: 2px; }
.mock-dify .dlane { padding: 12px 6px 6px; }
.mock-dify .dl-chain i { padding: 4px 2px; }
.mock-dify-log { padding: 7px 10px; }

/* 获客工作台：完成任务后附示例线索 */
.mock-hunt-job { overflow-y: auto; scrollbar-width: thin; }
.mock-hunt .jleads { border-top: 1px solid var(--hairline); margin-top: 7px; padding-top: 6px; }
.mock-hunt .jleads > b { display: block; font-size: 10px; color: var(--faint); font-weight: 500; margin-bottom: 3px; }
.mock-hunt .jleads > div {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 2.5px 0; font-size: 10.5px;
}
.mock-hunt .jleads .ln { color: var(--ink); font-weight: 600; }
.mock-hunt .jleads .ls { color: var(--faint); white-space: nowrap; }
.mock-dify-outpanel[hidden] { display: none; }

/* 修复：线索 CSV 表格在窄面板中字符溢出，允许换行 */
.mock-dify-outpanel td, .mock-dify-outpanel th { white-space: normal; padding: 3px 3px; }

/* 产出面板比例调整：周报窄一点，线索 CSV 加宽，表格单行不换行 */
.mock-dify-outpanel .op-rep { flex: 1; }
.mock-dify-outpanel .op-csv { flex: 1.45; }
.mock-dify-outpanel td { white-space: nowrap; }

/* 剧本工坊 / 爆款解码器 v2：侧栏结构 + AI 剩余额度 + 解码方案（对应 8787 新版） */
.mock-script-side, .mock-decode-side { display: flex; flex-direction: column; }
.mock-script-logo small { display: block; font-size: 8.5px; font-weight: 400; color: #797877; margin-top: 2px; letter-spacing: 0; }
.mock-quota {
  margin-top: auto; background: #242320; border: 1px solid #3d3b38; border-radius: 8px;
  padding: 7px 9px; font-size: 9px; color: #a7a7a6; line-height: 1.5;
}
.mock-quota b { display: block; font-size: 10px; color: #cc785c; margin-bottom: 1px; }
.mock-decode { flex-direction: row !important; }
.mock-decode-side {
  width: 122px; flex-shrink: 0; background: #1f1e1c; border-right: 1px solid #3d3b38;
  padding: 14px 10px;
}
.mock-decode-logo { font-size: 12.5px; font-weight: 700; color: #5db8a6; margin-bottom: 12px; }
.mock-decode-logo small { display: block; font-size: 8.5px; font-weight: 400; color: #797877; margin-top: 2px; }
.mock-dnav {
  display: block; width: 100%; text-align: left; font-size: 11.5px; color: #a7a7a6;
  padding: 8px 10px; border-radius: 8px; margin-bottom: 2px; background: transparent;
  transition: all .15s;
}
.mock-dnav.active { background: #2f2e2c; color: #edecec; }
.mock-dnav:hover { color: #edecec; }
.mock-decode-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.mock-decode-modes { display: flex; gap: 8px; }
.mock-decode-modes .mode {
  flex: 1; min-width: 0; text-align: left; background: #242320; border: 1.5px solid #3d3b38;
  border-radius: 10px; padding: 8px 10px; color: #a7a7a6; transition: all .2s;
  display: flex; flex-direction: column; gap: 2px;
}
.mock-decode-modes .mode b { font-size: 11px; color: #edecec; display: flex; align-items: center; gap: 5px; }
.mock-decode-modes .mode b i {
  font-style: normal; font-size: 9px; background: #cc785c; color: #fff;
  border-radius: 4px; padding: 1px 5px; font-weight: 400;
}
.mock-decode-modes .mode span { font-size: 9.5px; line-height: 1.4; }
.mock-decode-modes .mode.on { border-color: #5db8a6; background: rgba(93,184,166,.08); }
.mock-decode-modes .mode.on b { color: #5db8a6; }

/* 爆款解码器：外框与侧栏固定，仅右侧主区内部滚动 */
.mock-decode { overflow: hidden; }
.mock-decode-main { overflow-y: auto; scrollbar-width: thin; }
.browser-body .mock-decode { overflow: hidden; }
.mock-decode-main { min-height: 0; }

/* 剧本工坊素材包 v2：可点选芯片 + 详情卡 + 分镜卡 */
.mock-script-main { overflow-y: auto; scrollbar-width: thin; }
.mock-asset-chips .as { cursor: pointer; }
.mock-asset-chips .as:hover { border-color: #cc785c; color: #edecec; }
.mock-asset-chips .as.on { border-color: #cc785c; background: rgba(204,120,92,.14); color: #edecec; }
.mock-asset-chips .as.on b { color: #cc785c; }
.mock-asset-detail {
  background: #242320; border: 1px solid #3d3b38; border-radius: 8px;
  padding: 9px 12px; font-size: 10.5px; color: #a7a7a6; line-height: 1.6;
  animation: mock-in .3s ease-out;
}
.mock-asset-detail b { display: block; font-size: 11px; color: #edecec; margin-bottom: 2px; }
.mock-asset-detail p { margin: 0 0 3px; }
.mock-asset-detail em {
  font-style: normal; font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9.5px; color: #5db8a6; display: block; margin-bottom: 5px;
  word-break: break-all;
}
.mock-board { display: flex; gap: 6px; }
.mock-board .bd {
  flex: 1; min-width: 0; background: #242320; border: 1px solid #3d3b38;
  border-radius: 8px; padding: 8px 9px; font-size: 10px; color: #a7a7a6; line-height: 1.5;
}
.mock-board .bd .n { display: block; font-size: 10px; font-weight: 600; color: #cc785c; margin-bottom: 3px; }
.mock-board .bd p { margin: 0 0 3px; color: #edecec; }
.mock-board .bd em {
  font-style: normal; font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 8.5px; color: #5db8a6; word-break: break-all;
}
.mock-board[hidden] { display: none; }

/* ============================================================
   首页改版：心理卡左右结构 / B2B 获客合并卡 / AI 视频工作台合并卡
   ============================================================ */

/* ① 心理卡：左交互卡 + 右摹客手机原型（iframe 裁切只露机身，高度与左卡一致） */
.psycho-duo { display: flex; justify-content: center; align-items: stretch; gap: 30px; margin-top: 34px; }
.psycho-duo .browser { margin: 0; flex: none; }
.psycho-proto {
  position: relative; flex: none; width: 133px;
  /* hidden 只挡用户滚动，挡不住跨源 iframe 内部 scrollIntoView 把本框滚走（框内有 114×212px 余量）
     → 点原型热区时机身会滑出裁切窗。clip 才禁止程序滚动，hidden 留给不认 clip 的旧内核。 */
  overflow: hidden; overflow: clip;
  border-radius: 20px; background: transparent;
  touch-action: none;
}
.psycho-proto iframe {
  position: absolute; left: 50%; top: 50%;
  width: 1200px; height: 960px; border: 0;
  /* 2026-09-13 像素定标：机身（含 1px 抗锯齿边）在 1200×960 画布里占 x 593..825 / y 241..759，
     即 233×519、中心 (709,500)、圆角 35px。margin 把机身中心对到框中心，
     transform-origin 也定在同一点 → 之后只调 scale，四周留白对称变化、中心不动。
     scale 由 295/519 反推（高度先填满），机身圆角渲染后 35×0.568≈20px，与上面的 border-radius 一致。
     ⚠ 2026-09-17 差点改错：直接打开摹客链接量到的机身中心是 740（= 280 面板右侧可用区的中点），
     但**嵌入态不是这个值** —— 按 740 标之后机身反而左偏、裁切窗右侧露出 19px 画布白边，
     反推嵌入态机身中心 = 709.2，与原值一致。标定必须在首页那个 iframe 里量，不能拿独立打开的画布当基线。 */
  /* 2026-09-18：按用户观感把机身整体上移 10px（-490 → -500）。先确认过这不是"本地对、线上错"：
     同一份 CSS 下本地与线上首页在心理助手那一屏像素差为 0（唯一的差异是 dsh 地址栏文字），
     所以这是裁切框与机身相对高度的观感微调，两边一起生效。transform-origin 与机身中心同点，
     父坐标系里移 10px = 视觉移 10px。 */
  margin: -500px 0 0 -710px;
  transform-origin: 709px 500px;
  touch-action: none;
  transform: scale(0.568);
}
@media (max-width: 960px) {
  .psycho-duo { flex-direction: column; align-items: center; }
  .psycho-proto { height: 295px; }
}

/* ② B2B 合并卡：工作流引擎链（复用 mock-hunt 骨架，仅补充引擎区样式） */
.mock-b2b { height: 470px; gap: 8px; }
.bchain-hd { flex: none; font-size: 9.5px; color: var(--faint); }
.mock-b2b .mock-hunt-job { overflow-y: auto; scrollbar-width: thin; }
.mock-b2b .mock-hunt-job .empty { height: auto; min-height: 64px; }
.bchain { display: flex; align-items: stretch; gap: 4px; }
.bchain i {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: #fff; border: 1.5px solid var(--hairline); border-radius: 8px;
  padding: 6px 2px; text-align: center; transition: all .3s;
}
.bchain i b { font-size: 10.5px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.bchain i em { font-style: normal; font-size: 8.5px; color: var(--faint); white-space: nowrap; }
.bchain .ba { align-self: center; width: 10px; height: 2px; background: var(--hairline); position: relative; flex: none; }
.bchain .ba::after { content: ''; position: absolute; right: -1px; top: -3px; border: 4px solid transparent; border-left-color: var(--hairline); }
.bchain i.run { border-color: var(--blue); background: var(--blue-soft); animation: mock-pulse 1s ease-in-out infinite; }
.bchain i.done { border-color: #1D9E57; }
.bchain i.done b::after { content: ' ✓'; color: #1D9E57; }
.mock-b2b-log {
  font-size: 10.5px; color: var(--muted); background: var(--parchment);
  border-radius: 6px; padding: 5px 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ③ AI 视频工作台合并卡：地址栏双 tab + 两 mock 等高切换 */
.mock-vtabs { display: flex; gap: 4px; margin-left: 4px; flex: none; }
.mock-vtabs .vt {
  font-family: inherit; cursor: pointer; border: 0;
  font-size: 11px; padding: 4px 12px; border-radius: 12px;
  color: var(--muted); background: transparent; transition: all .15s; white-space: nowrap;
}
.mock-vtabs .vt:hover { color: var(--ink); }
.mock-vtabs .vt.on { background: #1d1d1f; color: #fff; }
.v-bar .browser-url { flex: 1; width: auto; min-width: 0; margin-left: 4px; overflow: hidden; }
.v-body { height: 366px; }
.v-body [data-mock] { flex: 1 1 0; min-height: 0; }
.v-body [data-mock] .mock { height: 100%; }
/* 02 详情页四个真实页面标签：窄屏下假地址栏让位，否则第四个标签会被 .browser 的 overflow 裁掉点不到 */
@media (max-width: 640px) {
  .ecs-demo-bar .browser-url { display: none; }
  .ecs-demo-bar .mock-vtabs { margin-left: 0; gap: 2px; }
  .ecs-demo-bar .mock-vtabs .vt { font-size: 10px; padding: 3px 7px; }
}
/* WeKnora 的登录页是双栏营销页：在 1078 宽的窗口里高 1191px，表单底部掉到折叠线外。
   按 1280×720 的桌面视口渲染（该宽度下整页 873px、表单底部 569px 装得下）再等比缩进窗口；
   1280:720 与窗口同为 16:9，所以按宽缩放后高度正好贴合，不会出现半截内容或内滚动条。 */
.wk-stage {
  display: none; position: relative; width: 100%;
  aspect-ratio: 16/9; overflow: hidden; background: #fff;
}
.wk-stage iframe {
  position: absolute; top: 0; left: 0; width: 1280px; height: 720px;
  border: 0; background: #fff; transform-origin: top left;
}

/* ============================================================
   ⑪ 企业官网 AI 智能客服（ecom-ai-cs）三端演示：官网挂件 / 管理台 / 坐席工作台
   配色取自真实项目：官网 navy #182b57 + accent #2f6fe4，挂件 #2563eb，管理台 antd #1677ff
   ============================================================ */
.mock-ecs {
  height: 330px; display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border: 1px solid var(--card-line); color: #22304a;
}
.browser-body .mock-ecs { overflow: hidden; }
.es-tabs { display: flex; flex: none; border-bottom: 1px solid #e6eaf1; background: #f5f7fa; }
.es-tabs button {
  flex: 1; padding: 7px 2px 6px; font-size: 8.5px; background: none; color: #66707f;
  border-bottom: 2px solid transparent; transition: color .15s, background .15s;
}
.es-tabs button:hover { color: #2f6fe4; }
.es-tabs button.on { color: #2f6fe4; font-weight: 600; background: #fff; border-bottom-color: #2f6fe4; }
.es-view { display: none; position: relative; flex: 1; min-height: 0; overflow: hidden; }
.es-view.on { display: flex; }
@keyframes es-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* 官网（照真实站点 ac22dee2/site 的文案与配色：navy #182b57 / navy-deep #0e1d3f / accent #2f6fe4） */
.es-site { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: #fff; }
.es-snav {
  position: relative; z-index: 2; flex: none; display: flex; align-items: center; height: 26px; padding: 0 12px;
}
.es-snav b { font-size: 12px; font-weight: 700; color: #fff; letter-spacing: 1.2px; }
.es-snav span { display: flex; gap: 9px; margin-left: auto; }
.es-snav i {
  font-style: normal; font-size: 8px; color: rgba(255, 255, 255, .78);
  padding-bottom: 3px; border-bottom: 2px solid transparent;
}
.es-snav i.on { color: #fff; border-bottom-color: #2f6fe4; }
/* 滚到白色内容区后换成主题深蓝底，否则白字压在白底上看不清 */
.es-snav.solid {
  background: rgba(24, 43, 87, .92);
  -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .1);
}
.es-snav em {
  font-style: normal; font-size: 7.5px; color: rgba(255, 255, 255, .8); white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 9px; padding: 1px 5px; margin-left: 8px;
}
/* 导航是浮层：把内容区上提一个导航高，hero 从导航底下透出来 */
.es-scroll { flex: 1; min-height: 0; overflow-y: auto; margin-top: -26px; padding-bottom: 34px; }
.es-hero {
  position: relative; min-height: 134px; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 40px 14px 18px; color: #fff;
  background:
    linear-gradient(12deg, rgba(11, 22, 48, .78), rgba(14, 29, 63, .42) 46%, rgba(14, 29, 63, .12) 78%),
    url("../img/ecs/site-hero.jpg") center 30% / cover no-repeat, #16233f;
}
.es-eye { margin: 0; font-size: 6.5px; letter-spacing: 2.6px; color: rgba(255, 255, 255, .72); }
.es-hero h4 { margin: 4px 0 5px; font-size: 16px; font-weight: 700; letter-spacing: 1px; }
.es-lead { margin: 0; max-width: 300px; font-size: 7.5px; line-height: 1.7; color: #c9d6ee; }
.es-mouse {
  position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 6px; letter-spacing: 1.4px; color: rgba(255, 255, 255, .6);
}
.es-mouse i { position: relative; width: 9px; height: 14px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 5px; }
.es-mouse i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 2px; height: 3px; border-radius: 1px; background: rgba(255, 255, 255, .75); }
.es-sec { padding: 10px 14px 12px; border-bottom: 1px solid #eef1f6; }
.es-sec > b { display: block; font-size: 10px; font-weight: 700; color: #182b57; letter-spacing: .6px; }
.es-sec > em { display: block; margin-top: 3px; font-style: normal; font-size: 7.5px; color: #66707f; }
.es-sec p { margin: 5px 0 0; font-size: 7.5px; line-height: 1.65; color: #47536b; }
.es-sec p i { font-style: normal; margin-right: 4px; color: #2f6fe4; font-weight: 600; }
.es-sec .es-q { font-size: 8px; font-style: italic; color: #182b57; border-left: 2px solid #2f6fe4; padding-left: 6px; }
.es-stats { display: flex; gap: 5px; margin-top: 7px; }
.es-stats span { flex: 1; padding: 5px 3px; text-align: center; background: #f5f7fa; border: 1px solid #e6eaf1; border-radius: 6px; }
.es-stats b { display: block; font-size: 8.5px; font-weight: 700; color: #182b57; white-space: nowrap; }
.es-stats i { display: block; margin-top: 1px; font-style: normal; font-size: 6.5px; line-height: 1.35; color: #66707f; }
.es-goods { display: flex; gap: 5px; margin-top: 7px; }
.es-goods span {
  flex: 1; padding: 0 4px 4px; font-size: 6.5px; line-height: 1.45; color: #47536b;
  background: #fff; border: 1px solid #e6eaf1; border-radius: 6px; overflow: hidden;
}
.es-goods i { display: block; aspect-ratio: 16 / 9; margin: 0 -4px 3px; background: #eef1f6 center / cover no-repeat; }
.es-goods .g1 i { background-image: url("../img/ecs/goods-1.jpg"); }
.es-goods .g2 i { background-image: url("../img/ecs/goods-2.jpg"); }
.es-goods .g3 i { background-image: url("../img/ecs/goods-3.jpg"); }
.es-goods .g4 i { background-image: url("../img/ecs/goods-4.jpg"); }
.es-goods b { display: block; font-size: 7px; font-weight: 600; color: #182b57; }
.es-dark { background: #0e1d3f; border-bottom-color: #0e1d3f; }
.es-dark > b { color: #fff; }
.es-dark > em { color: #a8bde0; }
.es-brands { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.es-brands span { font-size: 7px; letter-spacing: .3px; color: #182b57; background: #f5f7fa; border: 1px solid #e6eaf1; border-radius: 3px; padding: 2px 5px; }
.es-dark .es-brands span { color: #dbe6f8; background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); }
.es-foot { padding: 12px 14px 16px; background: #0e1d3f; color: #a8bde0; }
.es-foot b { display: block; font-size: 8.5px; font-weight: 600; color: #fff; letter-spacing: .4px; }
.es-foot p { margin: 5px 0 0; font-size: 7px; }
.es-foot em { display: block; margin-top: 3px; font-size: 6.5px; font-style: normal; color: #6d84ab; }

/* 悬浮气泡 + 悬停提示 */
.es-bubble {
  position: absolute; right: 10px; bottom: 10px; width: 30px; height: 30px; z-index: 3;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
  border-radius: 50%; background: #2563eb; box-shadow: 0 3px 10px rgba(15, 23, 42, .28);
  transition: transform .2s ease, box-shadow .2s ease;
}
.es-bubble:hover { transform: scale(1.06); box-shadow: 0 5px 14px rgba(15, 23, 42, .34); }
.es-bubble.open { transform: scale(.94); }
.es-btip {
  position: absolute; right: 46px; bottom: 15px; z-index: 2; margin: 0; white-space: nowrap;
  font-size: 7px; color: #0f172a; background: #fff; border-radius: 5px; padding: 3px 6px;
  box-shadow: 0 0 3px rgba(0, 0, 0, .04), 0 6px 14px rgba(0, 0, 0, .1);
  opacity: 0; transform: translateY(2px); pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.es-bubble:hover ~ .es-btip { opacity: 1; transform: translateY(0); }
.es-bubble.open ~ .es-btip { opacity: 0; }

/* 挂件面板：AskZ 风格 —— 毛玻璃渐变底 + 欢迎主视觉卡 */
.es-panel {
  position: absolute; right: 8px; bottom: 44px; width: 178px; height: 254px; z-index: 4;
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(165deg, rgba(233, 231, 253, .82) 0%, rgba(232, 240, 255, .76) 50%, rgba(240, 246, 255, .7) 100%);
  backdrop-filter: blur(10px) saturate(1.4); -webkit-backdrop-filter: blur(10px) saturate(1.4);
  border-radius: 10px; box-shadow: 0 8px 32px rgba(0, 0, 0, .24);
  transform-origin: 100% 100%; animation: es-pop 200ms ease-out;
}
@keyframes es-pop { from { opacity: 0; transform: scale(.96); } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .es-panel { background: linear-gradient(165deg, #e9e7fd 0%, #e8f0ff 50%, #f0f6ff 100%); }
}
.es-phead { flex: none; padding: 8px 10px 2px; font-size: 9.5px; font-weight: 600; color: #0f172a; }
.es-pstat { flex: none; padding: 3px 8px; font-size: 7px; text-align: center; background: #fef9c3; color: #854d0e; }
.es-pstat.ok { background: #dcfce7; color: #166534; }
.es-pstat.done { background: #f1f5f9; color: #475569; }
.es-herop { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 2px 10px 0; overflow: hidden; }
.es-herop b { font-size: 9.5px; font-weight: 600; color: #0f172a; }
.es-herop > em { margin-top: 1px; font-style: normal; font-size: 7.5px; line-height: 1.5; color: #64748b; }
.es-hcards { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.es-hcards button {
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  padding: 5px 6px; font-size: 7.5px; line-height: 1.4; text-align: left;
  color: #0f172a; background: #fff; border-radius: 6px; box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
  transition: box-shadow .2s ease, transform .2s ease;
}
.es-hcards button:hover { box-shadow: 0 4px 12px rgba(15, 23, 42, .14); transform: translateY(-1px); }
.es-hcards button span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.es-hcards button i { flex: none; font-style: normal; font-size: 8px; color: #94a3b8; }
.es-more { align-self: flex-start; margin-top: 5px; padding: 0; font-size: 7px; color: #64748b; background: none; }
.es-more:hover { color: #0f172a; }
.es-msgs {
  flex: 1; min-height: 0; overflow-y: auto; padding: 7px 8px;
  display: flex; flex-direction: column; gap: 4px;
}
/* 首开无历史时不占位，否则会把欢迎主视觉挤掉半屏 */
.es-msgs:empty { display: none; }
.es-m { max-width: 88%; font-size: 7.5px; line-height: 1.55; word-break: break-word; }
.es-msgs .es-vis { align-self: flex-end; padding: 4px 7px; border-radius: 8px 8px 3px 8px; background: #2563eb; color: #fff; }
.es-msgs .es-bot { align-self: flex-start; padding: 4px 7px; border-radius: 8px 8px 8px 3px; background: #fff; color: #0f172a; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.es-msgs .es-agent { align-self: flex-start; padding: 4px 7px; border-radius: 8px 8px 8px 3px; background: #dbeafe; color: #0f172a; }
.es-msgs .es-sys { align-self: center; max-width: 100%; font-size: 7px; color: #94a3b8; text-align: center; }
.es-m.typing { color: #94a3b8; }
.es-ref { align-self: flex-start; max-width: 100%; font-size: 7px; color: #64748b; }
.es-act { align-self: flex-start; display: flex; gap: 7px; }
.es-act button { font-size: 7px; color: #94a3b8; background: none; padding: 0; }
.es-act button:hover { color: #475569; }
.es-noted { font-size: 7px; color: #94a3b8; }
.es-sugs { flex: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 0 8px 5px; }
.es-sugs button {
  font-size: 7px; color: #2563eb; background: #fff;
  border: 1px solid #cbd5e1; border-radius: 12px; padding: 2px 7px;
}
.es-sugs button:hover { border-color: #2563eb; background: #eff6ff; }
.es-input {
  flex: none; display: flex; align-items: center; gap: 4px;
  padding: 5px 7px; border-top: 1px solid #e2e8f0;
}
.es-input .es-hand { flex: none; font-size: 7px; color: #2563eb; background: none; padding: 0; }
.es-input span {
  flex: 1; min-width: 0; font-size: 7.5px; color: #94a3b8;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; padding: 3px 7px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.es-input b { flex: none; font-size: 7.5px; color: #fff; background: #2563eb; border-radius: 10px; padding: 3px 8px; }

/* 管理台（antd 默认主题） */
.es-side {
  flex: none; width: 74px; display: flex; flex-direction: column;
  background: #fff; border-right: 1px solid #f0f0f0; padding: 8px 0;
}
.es-side b { padding: 0 8px 8px; font-size: 8.5px; font-weight: 600; line-height: 1.4; color: #182b57; }
.es-side span { padding: 5px 8px; font-size: 8px; color: #66707f; border-left: 2px solid transparent; }
.es-side span.on { color: #1677ff; font-weight: 600; background: #e6f4ff; border-left-color: #1677ff; }
.es-side em { margin-top: auto; padding: 8px; font-style: normal; font-size: 7.5px; color: #94a3b8; }
.es-body {
  flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px;
  padding: 8px; overflow: hidden; background: #f5f5f5;
}
.es-c4 { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.es-c4 > div { padding: 6px 2px; text-align: center; background: #fff; border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.es-c4 b { display: block; font-size: 13px; font-weight: 600; color: #22304a; }
.es-c4 i { font-style: normal; font-size: 7.5px; color: #66707f; }
.es-card { display: flex; flex-direction: column; min-height: 0; padding: 7px 8px; background: #fff; border-radius: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.es-card:last-child { flex: 1; }
.es-ct { flex: none; display: flex; align-items: center; gap: 5px; margin-bottom: 5px; }
.es-ct b { font-size: 9px; font-weight: 600; color: #22304a; }
.es-ct small { font-size: 7.5px; color: #94a3b8; }
.es-run { margin-left: auto; font-size: 7.5px; color: #fff; background: #1677ff; border-radius: 4px; padding: 3px 7px; }
.es-fill { flex: none; height: 3px; margin-bottom: 5px; background: #f0f0f0; border-radius: 2px; overflow: hidden; }
.es-fill i { display: block; height: 100%; width: 0; background: #1677ff; transition: width 2.3s linear; }
.es-em { flex: none; display: flex; align-items: center; gap: 8px; font-size: 8px; color: #66707f; }
.es-em b { margin-left: 2px; font-size: 9.5px; color: #22304a; }
.es-pass {
  margin-left: auto; font-style: normal; font-size: 7px; white-space: nowrap;
  color: #52c41a; background: #f6ffed; border: 1px solid #b7eb8f; border-radius: 4px; padding: 1px 5px;
}
.es-brows { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; }
.es-brow { flex: none; display: flex; align-items: center; gap: 5px; padding-bottom: 4px; font-size: 8px; border-bottom: 1px solid #f5f5f5; }
.es-brow span { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #22304a; }
.es-brow i { flex: none; font-style: normal; font-size: 7px; border-radius: 3px; padding: 1px 4px; white-space: nowrap; }
.es-brow .r.miss { color: #d46b08; background: #fff7e6; border: 1px solid #ffd591; }
.es-brow .r.dislike { color: #cf1322; background: #fff1f0; border: 1px solid #ffa39e; }
.es-brow .r.hand { color: #d4380d; background: #fff2e8; border: 1px solid #ffbb96; }
.es-brow .s.wait { color: #8c8c8c; background: #fafafa; border: 1px solid #d9d9d9; }
.es-brow .s.fixed { color: #389e0d; background: #f6ffed; border: 1px solid #b7eb8f; }
.es-brow button { flex: none; font-size: 7px; color: #1677ff; background: none; border: 1px solid #91caff; border-radius: 4px; padding: 1px 4px; white-space: nowrap; }
.es-brow.fresh { animation: es-in .35s ease-out; background: #f0f7ff; }

/* 坐席工作台 */
.es-cols { flex: 1; min-width: 0; display: grid; grid-template-columns: 98px 1fr 84px; }
.es-cl { min-height: 0; display: flex; flex-direction: column; background: #fff; border-right: 1px solid #e6eaf1; }
.es-at { flex: none; display: flex; gap: 2px; padding: 6px 5px; border-bottom: 1px solid #eef1f6; }
.es-at b {
  position: relative; flex: 1; padding: 3px 0; text-align: center;
  font-size: 7.5px; font-weight: 500; color: #66707f; border-radius: 5px;
}
.es-at b.on { color: #1677ff; font-weight: 600; background: #e6f4ff; }
.es-at b i {
  font-style: normal; margin-left: 1px; font-size: 6.5px; color: #fff;
  background: #ff4d4f; border-radius: 6px; padding: 0 2px;
}
.es-qs { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4px; padding: 5px; overflow-y: auto; }
.es-qi { flex: none; padding: 4px 5px; border: 1px solid #eef1f6; border-radius: 6px; }
.es-qi.on { background: #f0f7ff; border-color: #91caff; }
.es-qi span { display: block; font-size: 7.5px; color: #66707f; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.es-qi em { display: block; margin: 2px 0; font-style: normal; font-size: 8px; color: #22304a; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.es-qi i { font-style: normal; font-size: 7px; color: #94a3b8; }
.es-off {
  flex: none; margin: 0; padding: 3px 4px; font-size: 7px; line-height: 1.5;
  color: #854d0e; background: #fffbe6; border: 1px solid #ffe58f; border-radius: 5px;
}
.es-cm { min-width: 0; display: flex; flex-direction: column; background: #fafbfc; }
.es-mh { flex: none; display: flex; align-items: center; gap: 5px; padding: 6px 8px; background: #fff; border-bottom: 1px solid #eef1f6; }
.es-mh b { font-size: 9px; font-weight: 600; color: #22304a; }
.es-st { font-size: 7px; border-radius: 3px; padding: 1px 4px; white-space: nowrap; }
.es-st.wait { color: #d46b08; background: #fff7e6; border: 1px solid #ffd591; }
.es-st.run { color: #389e0d; background: #f6ffed; border: 1px solid #b7eb8f; }
.es-take { margin-left: auto; font-size: 7.5px; color: #fff; background: #1677ff; border-radius: 4px; padding: 2px 8px; }
.es-sum { flex: none; margin: 6px 8px 0; padding: 4px 6px; background: #f0f7ff; border: 1px solid #d6e8ff; border-radius: 6px; }
.es-sum b { display: block; font-size: 7.5px; color: #2f6fe4; }
.es-sum em { display: block; margin-top: 1px; font-style: normal; font-size: 8px; line-height: 1.5; color: #22304a; }
.es-cbody { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 5px; padding: 6px 8px; overflow-y: auto; }
.es-cbody .es-m { max-width: 92%; padding: 4px 6px; border-radius: 8px; }
.es-cbody .es-vis { align-self: flex-start; color: #22304a; background: #fff; border: 1px solid #eef1f6; border-radius: 8px 8px 8px 3px; }
.es-cbody .es-bot { align-self: flex-start; color: #22304a; background: #eef2f7; border-radius: 8px 8px 8px 3px; }
.es-cbody .es-sys { align-self: center; max-width: 100%; padding: 0; font-size: 7.5px; color: #94a3b8; background: none; }
.es-cbody .es-agent { align-self: flex-end; color: #fff; background: #1677ff; border-radius: 8px 8px 3px 8px; }
.es-ac {
  flex: none; display: flex; align-items: center; gap: 5px; height: 20px;
  margin: 0 8px 8px; padding: 0 4px 0 8px; background: #fff; border: 1px solid #e2e8f0; border-radius: 11px;
}
.es-ac span { flex: 1; min-width: 0; font-size: 8px; color: #94a3b8; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.es-ac b { flex: none; font-size: 8px; color: #94a3b8; background: #e6eaf1; border-radius: 9px; padding: 3px 7px; }
.es-ac.ready b { color: #fff; background: #1677ff; }
.es-cr {
  min-height: 0; display: flex; flex-direction: column; gap: 5px;
  padding: 7px 6px; background: #fff; border-left: 1px solid #e6eaf1; overflow-y: auto;
}
.es-cr p { margin: 0; font-size: 7.5px; line-height: 1.5; color: #22304a; word-break: break-word; }
.es-cr p b { display: block; font-size: 7px; font-weight: 500; color: #94a3b8; }
.es-note { padding: 4px; background: #fffbe6; border: 1px solid #ffe58f; border-radius: 5px; }
.es-note b { display: block; font-size: 7px; color: #854d0e; }
.es-note em { display: block; margin: 1px 0 2px; font-style: normal; font-size: 7.5px; line-height: 1.5; color: #22304a; word-break: break-word; }
.es-note i { font-style: normal; font-size: 6.5px; color: #d46b08; background: #fff7e6; border: 1px solid #ffd591; border-radius: 3px; padding: 0 3px; }
.es-bn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 14px; height: 14px; font-size: 8px; color: #fff; background: #ff4d4f; border-radius: 7px;
}

/* ============================================================
   ⑫ req2proto 需求原型流水线三阶段演示（需求澄清 / 风格选定 / 交互 HTML）
   配色与语法取自真实产品 token：parchment #f5f5f7 · ink #1d1d1f
   · accent #0066cc · hairline #e0e0e0 · 药丸圆角 · cubic-bezier(.16,1,.3,1)
   ============================================================ */
.mock-rp {
  height: 500px; display: flex; flex-direction: column; overflow: hidden;
  container-type: inline-size;
  background: #f5f5f7; border: 1px solid var(--card-line); color: #1d1d1f;
}
.browser-body .mock-rp { overflow: hidden; }
.rp-nav {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  height: 15px; padding: 0 8px; background: rgba(22, 22, 23, .9);
}
.rp-nav b { font-size: 10.5px; font-weight: 600; letter-spacing: .1px; color: #f5f5f7; }
.rp-nav span { display: flex; gap: 9px; }
.rp-nav i { font-style: normal; font-size: 9.5px; color: #d2d2d7; }
.rp-nav i.on { color: #fff; }
.rp-step {
  flex: none; display: flex; align-items: center; gap: 8px; height: 17px; padding: 0 8px;
  overflow: hidden; background: rgba(245, 245, 247, .92); border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.rp-st {
  flex: none; font-size: 9.5px; font-style: normal; white-space: nowrap;
  color: #a1a1a6; font-variant-numeric: tabular-nums;
  transition: color .2s cubic-bezier(.16, 1, .3, 1);
}
.rp-st[data-v] { cursor: pointer; }
.rp-st[data-v]:hover, .rp-st.done { color: #1d1d1f; }
.rp-st.on { color: #0066cc; font-weight: 600; }
.rp-st.auto.done::after { content: ' ✓'; color: #248a3d; }
.rp-view { display: none; flex: 1; min-height: 0; flex-direction: column; overflow: hidden; }
.rp-view.on { display: flex; }
.rp-fill { flex: none; height: 2px; background: rgba(0, 0, 0, .07); }
.rp-fill i { display: block; height: 100%; width: 0; background: #0066cc; transition: width .55s cubic-bezier(.16, 1, .3, 1); }
.rp-foot {
  flex: none; display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; background: #fff; border-top: 1px solid #e0e0e0;
}
.rp-hint {
  flex: 1; min-width: 0; font-size: 9px; font-style: normal; color: #7a7a7a;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.rp-btn { flex: none; font-size: 9.5px; padding: 3px 9px; border-radius: 9999px; transition: background .2s, opacity .2s; }
.rp-btn.pri { color: #fff; background: #0066cc; }
.rp-btn.pri:hover { background: #0071e3; }
.rp-btn[disabled] { opacity: .5; }
.rp-card { padding: 6px 8px; background: #fff; border: 1px solid rgba(0, 0, 0, .05); border-radius: 12px; }
.rp-card > h4 { margin: 0 0 4px; font-size: 10.5px; font-weight: 600; }
.rp-card > h4 em { font-size: 9.5px; font-weight: 400; font-style: normal; color: #7a7a7a; }
.rp-card.done { border-color: rgba(36, 138, 61, .35); }
.rp-rows p {
  display: flex; gap: 5px; margin: 0; padding: 2px 0; border-top: 1px solid rgba(0, 0, 0, .05);
}
.rp-rows b { flex: none; width: 62px; font-size: 9px; line-height: 1.6; white-space: nowrap; }
.rp-rows span { flex: 1; min-width: 0; font-size: 9.5px; line-height: 1.55; color: #333336; }

/* ① 需求澄清 */
.rp-chat { flex: 1; min-height: 0; overflow-y: auto; padding: 7px 8px; }
.rp-slot { display: flex; flex-direction: column; gap: 5px; }
.rp-m { max-width: 88%; font-size: 9.5px; line-height: 1.6; word-break: break-word; }
.rp-m.user { align-self: flex-end; padding: 4px 7px; border-radius: 12px 12px 4px 12px; background: #0066cc; color: #fff; }
.rp-m.bot { align-self: flex-start; padding: 4px 7px; border-radius: 12px 12px 12px 4px; background: #fff; border: 1px solid rgba(0, 0, 0, .05); }
.rp-m.typing { color: #a1a1a6; }
.rp-tag { display: block; font-size: 9px; font-style: normal; color: #7a7a7a; }
.rp-prd { align-self: stretch; max-width: 100%; }
.rp-sub { margin: 0 0 2px; font-size: 9px; color: #7a7a7a; }

/* ② 风格选定 */
.rp-scroll { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 7px 8px; overflow-y: auto; }
.rp-dial { display: grid; grid-template-columns: 44px 1fr 12px; gap: 2px 6px; align-items: center; }
.rp-dial span { font-size: 9.5px; }
.rp-dial em { font-size: 9.5px; font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.rp-dial small { grid-column: 2 / 4; font-size: 8.5px; color: #a1a1a6; }
.rp-track { position: relative; height: 3px; border-radius: 2px; background: #e0e0e0; }
.rp-track b {
  position: absolute; top: 0; left: 0; display: block; height: 100%; width: 50%;
  border-radius: 2px; background: #0066cc; transition: width .5s cubic-bezier(.16, 1, .3, 1);
}
.rp-why {
  margin: 5px 0 0; padding-left: 5px; border-left: 2px solid #0066cc;
  font-size: 9.5px; line-height: 1.55; color: #333336; background: #fafafc;
}
.rp-cue { margin: 0; font-size: 9px; color: #7a7a7a; }
.rp-cands { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.rp-cand {
  padding: 4px 6px; text-align: left; background: #fff;
  border: 1px solid #e0e0e0; border-radius: 8px; transition: border-color .2s, background .2s;
}
.rp-cand b { display: block; font-size: 9.5px; }
.rp-cand span span { display: block; font-size: 8.5px; line-height: 1.45; color: #7a7a7a; }
.rp-cand:hover { border-color: #a1a1a6; }
.rp-cand.on { background: #f0f6ff; border-color: #0066cc; }

/* ⑥ 交互 HTML */
.rp-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: 200px 1fr; grid-template-rows: minmax(0, 1fr); }
.rp-left { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 5px 6px; overflow: hidden; border-right: 1px solid #e0e0e0; }
.rp-lead { margin: 0; font-size: 9px; line-height: 1.5; color: #7a7a7a; }
/* 设备外框尺寸与真实产物 apps/server/src/device-shell.ts 一致：屏 393×852、
   含 bezel 的外壳 423×882，按等比缩放进左栏，状态栏 59/882 换算后约 19px */
.rp-phone { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.rp-dv {
  position: relative; height: 100%; aspect-ratio: 423 / 882; display: flex; flex-direction: column;
  padding: 5px; background: #0b0b0c; border-radius: 26px; box-shadow: 0 10px 24px rgba(0, 0, 0, .3);
}
.rp-scr {
  position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
  background: #f5f5f7; border-radius: 21px;
}
.rp-sb { flex: none; display: flex; align-items: center; justify-content: space-between; height: 19px; padding: 0 9px; font-size: 8px; font-weight: 600; letter-spacing: -.1px; }
.rp-sb em { font-style: normal; }
.rp-sb i { display: flex; align-items: flex-end; gap: 2px; font-style: normal; }
.rp-sig { width: 2px; background: #1d1d1f; border-radius: 1px; }
.rp-sig:nth-child(1) { height: 3px; } .rp-sig:nth-child(2) { height: 4.5px; } .rp-sig:nth-child(3) { height: 6px; }
.rp-wifi { width: 7px; height: 5px; margin-left: 1px; border: 1.4px solid #1d1d1f; border-bottom: 0; border-radius: 6px 6px 0 0; }
.rp-bat { position: relative; width: 13px; height: 6.5px; margin-left: 2px; border: 1px solid rgba(0, 0, 0, .32); border-radius: 2px; }
.rp-bat b { position: absolute; inset: 1px; width: 70%; background: #1d1d1f; border-radius: 1px; }
.rp-isle { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: 34px; height: 9px; border-radius: 9999px; background: #0b0b0c; }
.rp-cap {
  position: absolute; top: 22px; right: 5px; display: flex; align-items: center; justify-content: space-around;
  width: 40px; height: 13px; font-size: 7px; line-height: 1; color: #1d1d1f;
  background: rgba(255, 255, 255, .72); border: .5px solid rgba(0, 0, 0, .1); border-radius: 9999px;
}
.rp-cap u { text-decoration: none; letter-spacing: .5px; }
.rp-cap s { text-decoration: none; width: 6px; height: 6px; border: 1.2px solid #1d1d1f; border-radius: 50%; }
.rp-bd { flex: 1; min-height: 0; overflow: hidden; padding: 14px 6px 6px; display: flex; flex-direction: column; gap: 3px; }
.rp-tb { flex: none; display: flex; padding: 3px 0 10px; background: #fafafc; border-top: .5px solid rgba(0, 0, 0, .08); }
.rp-tb span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 6.5px; color: #a1a1a6; }
.rp-tb span.on { color: #0066cc; }
.rp-tb i { position: relative; width: 9px; height: 9px; border: 0; }
.rp-tb span:nth-child(1) i { background: currentColor; clip-path: polygon(50% 0, 100% 42%, 87% 42%, 87% 100%, 13% 100%, 13% 42%, 0 42%); }
.rp-tb span:nth-child(2) i { border: 1.1px solid currentColor; border-radius: 1.5px; }
.rp-tb span:nth-child(2) i::after { content: ''; position: absolute; top: 2.4px; left: 1.4px; right: 1.4px; height: 1px; background: currentColor; box-shadow: 0 2.2px 0 currentColor; }
.rp-tb span:nth-child(3) i { border: 1.1px solid currentColor; border-radius: 50%; }
.rp-tb span:nth-child(3) i::after, .rp-tb span:nth-child(4) i::before, .rp-tb span:nth-child(4) i::after { content: ''; position: absolute; left: 50%; }
.rp-tb span:nth-child(3) i::after { top: 50%; width: 5px; height: 1.1px; transform: translate(-50%, -50%); background: currentColor; }
.rp-tb span:nth-child(3) i::before { content: ''; position: absolute; top: 50%; left: 50%; width: 1.1px; height: 5px; transform: translate(-50%, -50%); background: currentColor; }
.rp-tb span:nth-child(4) i::before { top: 0; width: 4px; height: 4px; transform: translateX(-50%); border: 1.1px solid currentColor; border-radius: 50%; }
.rp-tb span:nth-child(4) i::after { bottom: 0; width: 8px; height: 4px; transform: translateX(-50%); border: 1.1px solid currentColor; border-bottom: 0; border-radius: 4px 4px 0 0; }
.rp-hb { position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 40px; height: 2.5px; border-radius: 2px; background: rgba(0, 0, 0, .85); }
.rp-screens { flex: none; display: flex; gap: 2px; padding: 3px; background: #fafafc; border: 1px solid #e0e0e0; border-radius: 8px; }
.rp-screens i { flex: 1; padding: 1px 0; font-size: 8px; font-style: normal; text-align: center; color: #7a7a7a; border-radius: 9999px; cursor: pointer; }
.rp-screens i.on { background: #1d1d1f; color: #fff; }
.rp-prow { flex: none; display: flex; gap: 4px; }
.rp-prow button { flex: 1; padding: 2px 0; font-size: 8.5px; color: #0066cc; background: #fff; border: 1px solid #e0e0e0; border-radius: 9999px; }
.rp-prow button:hover { color: #0071e3; border-color: #0066cc; }
.rp-right { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 6px; overflow-y: auto; scrollbar-width: thin; }
.rp-dlc { display: flex; flex-direction: column; }
.rp-dl { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.rp-dlh, .rp-dlrow { display: grid; grid-template-columns: 62px 1fr 34px 34px; gap: 4px; align-items: center; }
.rp-dlh { padding-bottom: 2px; border-bottom: 1px solid #e0e0e0; font-size: 8.5px; color: #7a7a7a; }
.rp-dlh i { font-style: normal; }
.rp-dlrows { flex: 1; min-height: 0; overflow-y: auto; }
.rp-dlrow { padding: 2.5px 0; border-bottom: 1px solid rgba(0, 0, 0, .05); font-size: 9px; }
.rp-dlrow span { font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rp-dlrow em { font-size: 8.5px; font-style: normal; color: #7a7a7a; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rp-dlrow i { font-size: 8.5px; font-style: normal; text-align: right; color: #a1a1a6; font-variant-numeric: tabular-nums; }
.rp-dlrow button { font-size: 8.5px; color: #0066cc; background: none; padding: 0; }
.rp-dlrow button[disabled] { color: #a1a1a6; }

/* 顶栏两个入口改成真视图：项目列表 / LLM 设置 */
.rp-nav i { cursor: pointer; }
.rp-nav i:hover { color: #fff; }
.mock-rp.dim .rp-step { opacity: .4; pointer-events: none; }
.rp-list { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 5px; padding: 7px 8px; overflow-y: auto; }
.rp-new { display: flex; gap: 4px; }
.rp-new input { flex: 1; min-width: 0; }
.rp-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center;
  padding: 4px 7px; font-size: 9.5px; cursor: pointer;
}
.rp-row b { font-weight: 600; }
.rp-row em { font-style: normal; color: #7a7a7a; }
.rp-row .rp-meta { font-size: 8.5px; color: #a1a1a6; }
.rp-del { font-size: 8.5px; color: #d70015; background: none; padding: 0; }
.rp-del:hover { text-decoration: underline; }
.rp-confirm { display: flex; align-items: center; gap: 4px; font-size: 8.5px; color: #d70015; }
.rp-confirm button { font-size: 8.5px; padding: 1px 6px; border-radius: 9999px; background: #fff; border: 1px solid rgba(0, 0, 0, .06); }
.rp-confirm .rp-yes { color: #fff; background: #d70015; border: 0; }
.rp-set { flex: 1; min-height: 0; padding: 8px; overflow-y: auto; }
.rp-set .rp-card { max-width: 420px; }
.rp-f { display: flex; flex-direction: column; gap: 2px; margin-bottom: 5px; font-size: 9.5px; }
.rp-f input, .rp-f select, .rp-new input, .rp-ta {
  font-family: inherit; font-size: 9px; color: #1d1d1f; background: #fff;
  border: 1px solid rgba(0, 0, 0, .08); border-radius: 6px; padding: 3px 5px;
}
.rp-f input:focus, .rp-f select:focus, .rp-new input:focus, .rp-ta:focus { outline: 0; box-shadow: 0 0 0 3px rgba(0, 113, 227, .18); border-color: #0071e3; }
.rp-f small { font-size: 8px; color: #a1a1a6; }
.rp-saved { font-size: 8.5px; color: #248a3d; }

/* ① 需求澄清：结构化问答表单（每题 3 个候选 + 自填框） */
.rp-qa { align-self: stretch; max-width: 100%; padding: 6px 7px; background: #fff; border: 1px solid rgba(0, 0, 0, .05); border-radius: 12px; }
.rp-qa > h4 { margin: 0 0 4px; font-size: 10.5px; font-weight: 600; }
.rp-qa > h4 em { font-size: 8.5px; font-weight: 400; font-style: normal; color: #7a7a7a; }
.rp-qa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rp-q { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; border-top: 1px solid rgba(0, 0, 0, .06); }
.rp-q:first-child { border-top: 0; padding-top: 0; }
.rp-q > p { margin: 0 0 1px; font-size: 9px; line-height: 1.45; font-weight: 600; }
.rp-opt { text-align: left; font-size: 8.5px; line-height: 1.35; padding: 3px 5px; border-radius: 6px; background: #fafafc; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.rp-opt:hover { box-shadow: inset 0 0 0 1px #a1a1a6; }
.rp-opt.selected { background: #f0f6ff; box-shadow: inset 0 0 0 2px #0066cc; }
.rp-q input { width: 100%; font-family: inherit; font-size: 8.5px; padding: 3px 5px; border: 0; border-radius: 6px; background: #fafafc; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.rp-q input.selected { background: #f0f6ff; box-shadow: inset 0 0 0 2px #0066cc; outline: 0; }
.rp-ta { width: 100%; margin-top: 5px; resize: none; }
.rp-ta { font-size: 8.5px; }
.rp-round { align-self: stretch; padding: 4px 7px; background: #fff; border: 1px solid rgba(0, 0, 0, .05); border-radius: 12px; font-size: 8.5px; line-height: 1.6; color: #333336; }
.rp-round b { display: block; margin-bottom: 1px; font-size: 9px; color: #1d1d1f; }

/* ② 风格选定：AI 推荐变为可选，品牌可直接下拉指定 */
.rp-cw2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: start; }
.rp-cand { display: grid; grid-template-columns: 14px 1fr; gap: 5px; align-items: start; }
.rp-cand u { width: 14px; height: 14px; border-radius: 4px; background: var(--sw, #0066cc); }
.rp-pick { display: flex; flex-direction: column; gap: 2px; margin-top: 5px; font-size: 9px; }
.rp-pick select { font-family: inherit; font-size: 9px; padding: 3px 5px; border: 1px solid rgba(0, 0, 0, .08); border-radius: 6px; background: #fff; }
.rp-pick select:focus { outline: 0; box-shadow: 0 0 0 3px rgba(0, 113, 227, .18); }

/* ⑤ 架构图：三张图 tab，渲染失败时 tab 标红并给一行可读错误 */
.rp-dg { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 5px; padding: 7px 8px; overflow: hidden; }
.rp-tabs { flex: none; display: flex; gap: 3px; }
.rp-tabs button { font-size: 9px; padding: 2px 8px; border-radius: 9999px; background: rgba(0, 0, 0, .05); color: #7a7a7a; }
.rp-tabs button.on { color: #1d1d1f; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.rp-tabs button.err { color: #d70015; background: rgba(215, 0, 21, .08); }
.rp-canvas { flex: 1; min-height: 0; padding: 5px; background: #f5f5f7; border: 1px solid #e0e0e0; border-radius: 8px; overflow: hidden; }
.rp-canvas svg { display: block; width: 100%; height: 100%; }
.rp-err { display: flex; flex-direction: column; gap: 3px; padding: 6px; background: #fff; border: 1px solid rgba(215, 0, 21, .28); border-radius: 8px; }
.rp-err p { margin: 0; font-size: 9px; color: #d70015; }
.rp-err small { font-size: 8.5px; color: #7a7a7a; }
.rp-err button { align-self: flex-start; font-size: 8.5px; padding: 2px 8px; border-radius: 9999px; color: #0066cc; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.rp-src { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8px; line-height: 1.5; color: #7a7a7a; background: #fafafc; border-radius: 6px; padding: 4px 5px; white-space: pre; overflow: hidden; }

/* 移动端原型屏内容（缩在 .rp-dv 设备框里） */
.rp-bd i { font-style: normal; }
.rp-bd .m-h { display: flex; flex-direction: column; gap: 1px; padding: 6px 0 1px; }
.rp-bd .m-h b { font-size: 11px; font-weight: 600; letter-spacing: -.2px; }
.rp-bd .m-h span { font-size: 7px; color: #7a7a7a; }
.rp-bd .m-nav { display: flex; align-items: center; justify-content: space-between; height: 14px; font-size: 8.5px; font-weight: 600; }
.rp-bd .m-nav i { font-style: normal; color: #a1a1a6; }
.rp-bd .m-c { background: #fff; border: .5px solid rgba(0, 0, 0, .07); border-radius: 7px; padding: 4px 5px; }
.rp-bd .m-c > b { display: block; font-size: 8px; font-weight: 600; }
.rp-bd .m-c > span { display: block; font-size: 7px; line-height: 1.4; color: #7a7a7a; }
.rp-bd .m-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.rp-bd .m-r { display: flex; align-items: center; justify-content: space-between; gap: 4px; font-size: 7.5px; }
.rp-bd .m-r em { font-style: normal; color: #7a7a7a; }
.rp-bd .m-r strong { font-weight: 600; color: #0066cc; font-size: 9px; }
.rp-bd .m-chip { align-self: flex-start; padding: 1px 5px; font-size: 7px; color: #0066cc; background: #f0f6ff; border-radius: 9999px; }
.rp-bd .m-chip.g { color: #248a3d; background: rgba(36, 138, 61, .1); }
.rp-bd .m-chip.off { color: #7a7a7a; background: #fff; box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .08); }
.rp-bd .m-stats { display: flex; gap: 4px; }
.rp-bd .m-f { display: flex; flex-direction: column; gap: 1px; }
.rp-bd .m-f em { font-style: normal; font-size: 6.5px; color: #7a7a7a; }
.rp-bd .m-f u { display: block; height: 13px; font-size: 7.5px; line-height: 12px; color: #1d1d1f; text-decoration: none; padding: 0 4px; background: #fafafc; border: .5px solid rgba(0, 0, 0, .08); border-radius: 4px; overflow: hidden; white-space: nowrap; }
.rp-bd .m-f u.ph { color: #a1a1a6; }
.rp-bd .m-btn { height: 19px; font-size: 8px; font-weight: 600; color: #fff; background: #0066cc; border-radius: 9999px; display: flex; align-items: center; justify-content: center; }
.rp-bd .m-btn.gh { color: #0066cc; background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.rp-bd .m-ln { height: .5px; background: rgba(0, 0, 0, .07); }
.rp-bd .m-tl { display: flex; flex-direction: column; gap: 3px; padding-left: 1px; }
.rp-bd .m-tl div { position: relative; display: flex; gap: 4px; font-size: 7.5px; color: #7a7a7a; padding-left: 8px; }
.rp-bd .m-tl div::before { content: ''; position: absolute; left: 0; top: 2.5px; width: 4px; height: 4px; border-radius: 50%; background: #d2d2d7; }
.rp-bd .m-tl div.on { color: #1d1d1f; font-weight: 600; }
.rp-bd .m-tl div.on::before { background: #0066cc; }
.rp-bd .m-tl div:first-child::before { background: #248a3d; }
.rp-bd .m-s { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.rp-bd .m-s b { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rp-bd .m-s span { font-size: 6.5px; color: #7a7a7a; }
.rp-bd .m-sr { display: flex; align-items: center; gap: 4px; font-size: 7.5px; }
.rp-bd .m-sr u { width: 12px; height: 12px; border-radius: 50%; background: #f0f6ff; color: #0066cc; font-size: 6.5px; line-height: 12px; text-align: center; text-decoration: none; }
.rp-bd .m-tg { width: 16px; height: 9px; border-radius: 9999px; background: #0066cc; position: relative; }
.rp-bd .m-tg::after { content: ''; position: absolute; top: 1.2px; right: 1.4px; width: 6.4px; height: 6.4px; border-radius: 50%; background: #fff; }
/* 导航条占住胶囊所在的那一条 14px 带，其余首行天然落在带下方 */
.rp-bd > .m-nav { margin-top: -14px; padding-right: 44px; }
.rp-bd > *, .rp-bd .m-2 > *, .rp-bd .m-r > * { min-width: 0; }
.rp-bd .m-sp { margin-top: auto; }
.rp-bd .m-chip, .rp-bd .m-sr u, .rp-bd .m-s, .rp-bd .m-tg { flex: none; }
.rp-bd .m-h b, .rp-bd .m-h span, .rp-bd .m-c > b, .rp-bd .m-c > span, .rp-bd .m-r em, .rp-bd .m-chip {
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 手机宽度下 ⑥ 的 200px 分栏会把右栏压到零宽：改成上下堆叠、整块滚动 */
@container (max-width: 470px) {
  .rp-step { overflow-x: auto; scrollbar-width: none; }
  .rp-view.on { overflow-y: auto; scrollbar-width: thin; }
  .rp-cols { display: block; overflow-y: auto; scrollbar-width: thin; }
  .rp-left { height: 100%; border-right: 0; border-bottom: 1px solid #e0e0e0; }
  .rp-right { overflow: visible; }
}

/* ============================================================
   移动端适配 v2（2026-09-18）—— 只写媒体查询，桌面端渲染逐像素不变。
   依据：390px 同源 iframe 探针实测（16 个页面）
     · 全站无横向溢出，问题集中在"能看能不能点准"和"演示窗口太矮"
     · ① 02 页四个标签 .vt 只有 20px 高（44/64/66/90 × 20），远小于 40px 触摸目标
     · ② 演示 iframe 走 aspect-ratio:16/9 → 390 宽时只有 210px 高，真实后台被压成一条
     · ③ WeKnora 那格按 1280 视口缩放，390 宽 = 0.30 倍，字不可读
     · ④ payroll / padmin 两个假页面在窄屏内容长过固定框高（352→437、229→237），要靠内滚
     · ⑤ 案例页 h1 是内联 44px，把媒体查询里的 30px 压掉了 → 手机上要三行
   ============================================================ */
@media (max-width: 640px) {
  /* ① 标签改成能按准的高度；换行放得下四个 */
  .mock-vtabs { flex-wrap: wrap; gap: 4px 6px; }
  .mock-vtabs .vt { font-size: 12px; padding: 9px 11px; min-height: 40px; }
  .ecs-demo-bar .mock-vtabs .vt { font-size: 12px; padding: 9px 11px; min-height: 40px; }

  /* ② 演示窗口给回高度：真实站点/后台是桌面布局，210px 等于没演示。
        用直接子元素选择器，WeKnora 那个 iframe 在 .wk-stage 里、不吃这条 */
  .browser-body > iframe {
    aspect-ratio: auto !important;
    height: 620px !important;
  }

  /* ③ WeKnora 不再缩到 0.3 倍：按原尺寸放进可平移的窗口里 */
  .wk-stage { height: 420px; overflow: auto; -webkit-overflow-scrolling: touch; }
  .wk-stage iframe { transform: none !important; }

  /* ④ 窄屏内容变高，固定框会逼出内部滚动条 → 让框跟着长 */
  /* payroll 原来溢出 85px 必须放开；padmin 只溢出 8px，放开会撑到 1006px，反而更糟 —— 保持固定框内滚 */
  .browser-body .mock-payroll { height: auto; }

  /* ★ 摹客原型手机：390 下 133×295 太小，机身里的字读不清。
        同一套定标放大：scale = 440/519 = 0.848，框跟着取 233×0.848 ≈ 198 宽；
        margin 不用改 —— transform-origin 就是机身中心，机身中心相对盒子左上恒为 (709,500)。 */
  .psycho-proto { width: 198px; height: 440px; }
  .psycho-proto iframe { transform: scale(0.848) !important; }

  .demo-open { display: block; text-align: center; margin-top: 10px; font-size: 13px;
    padding: 12px 14px; border: 1px solid var(--card-line); border-radius: 12px;
    background: var(--parchment); min-height: 44px; box-sizing: border-box; }

  /* ⑤ 案例页大标题在手机上收一档（内联样式只能 !important 压，且只在这一档生效） */
  .page-head h1 { font-size: 30px !important; }
}

/* 首页最后一张卡 / 作品页最后一行与 footer 同为 parchment 底色、看不出边界；
   补一条与关于页 .skills 同源的 hairline（同一个变量、同样 1px 实线） */
.tile-last { border-bottom: 1px solid var(--hairline); }