/* ================= 设计系统变量 ================= */
:root {
  --bg-page: #000000;
  --bg-grid: rgba(255, 255, 255, 0.03);
  --text-main: #f5f5f7;
  --text-muted: #86868b;
  --brand-green: #07c160;
  --brand-green-glow: rgba(7, 193, 96, 0.4);
  --brand-green-dim: rgba(7, 193, 96, 0.15);
  --brand-amber: #f59e0b;
  --brand-blue: #0a84ff;

  /* 毛玻璃材质 */
  --glass-bg: rgba(28, 28, 30, 0.5);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --glass-shadow: 0 30px 60px rgba(0,0,0,0.5);

  /* 手机材质 */
  --phone-frame: linear-gradient(145deg, #3a3a3c, #1c1c1e);
  --phone-bezel: #000000;
  --phone-bg: #111111;
  --phone-nav: rgba(28, 28, 30, 0.9);
  --bubble-left: #2c2c2c;
  --bubble-right: #07c160;
  --bubble-text-left: #e5e5e5;
  --bubble-text-right: #ffffff;
  --bubble-tail: #2c2c2c;

  /* 微信高保真材质 */
  --phone-nav-bg: #111111;
  --nickname-color: #7c7c7c;
  --time-color: #7c7c7c;
  --input-bg: #191919;
  --input-field-bg: #282828;
  --back-pill-bg: #282828;
  --home-bar-color: #ffffff;
  --status-text: #fff;
}

[data-theme="light"] {
  --bg-page: #f5f5f7;
  --bg-grid: rgba(0, 0, 0, 0.03);
  --text-main: #1d1d1f;
  --text-muted: #86868b;
  --brand-green: #059669;
  --brand-green-glow: rgba(5, 150, 105, 0.3);
  --brand-green-dim: rgba(5, 150, 105, 0.1);

  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(0, 0, 0, 0.08);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 1);
  --glass-shadow: 0 30px 60px rgba(0,0,0,0.08);

  --phone-frame: linear-gradient(145deg, #d1d1d6, #e5e5ea);
  --phone-bezel: #ffffff;
  --phone-bg: #f2f2f7;
  --phone-nav: rgba(255,255,255,0.9);
  --bubble-left: #ffffff;
  --bubble-right: #95ec69;
  --bubble-text-left: #111111;
  --bubble-text-right: #111111;
  --bubble-tail: #ffffff;

  --phone-nav-bg: #ededed;
  --nickname-color: #999;
  --time-color: #999;
  --input-bg: #f7f7f7;
  --input-field-bg: #ffffff;
  --back-pill-bg: #e8e8e8;
  --home-bar-color: #333;
  --status-text: #111;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; }
body {
  font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  background-color: var(--bg-page);
  color: var(--text-main);
  transition: background 0.5s ease, color 0.5s ease;
  overflow-x: hidden;
  background-image: linear-gradient(var(--bg-grid) 1px, transparent 1px), linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ================= 滚动动画 ================= */
.reveal { opacity: 0; transform: translateY(50px) scale(0.98); transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1); }
.reveal.active { opacity: 1; transform: translateY(0) scale(1); }
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }

/* ================= 氛围光晕 ================= */
.ambient-glow { position: absolute; width: 600px; height: 600px; background: radial-gradient(circle, var(--brand-green-glow) 0%, transparent 60%); filter: blur(80px); opacity: 0.4; z-index: -1; pointer-events: none; }

/* ================= 导航栏 ================= */
.nav { position: fixed; top: 0; width: 100%; height: 60px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--glass-border); z-index: 100; display: flex; align-items: center; gap: 32px; padding: 0 32px; background: var(--glass-bg); }
.brand { font-size: 20px; font-weight: 800; letter-spacing: 2px; flex-shrink: 0; }
.brand span { color: var(--brand-green); }
.nav-links { display: flex; gap: 2px; overflow-x: visible; overflow-y: visible; scrollbar-width: none; align-items: center; }
.nav-links::-webkit-scrollbar { display: none; }
.nav-link { padding: 6px 14px; border-radius: 6px; font-size: 11.5px; font-weight: 500; letter-spacing: .04em; color: rgba(255,255,255,.4); text-decoration: none; white-space: nowrap; transition: color .25s, background .25s; position: relative; }
.nav-link:hover { color: rgba(255,255,255,.7); background: rgba(255,255,255,.04); }
.nav-link.active { color: var(--brand-green); background: transparent; }
.nav-link.active::after { content: ''; position: absolute; bottom: 0; left: 14px; right: 14px; height: 1.5px; background: var(--brand-green); border-radius: 1px; }

.nav-new-badge {
  position: absolute;
  top: -4px;
  right: 2px;
  font-size: 8px;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  background: #07c160;
  color: #000;
  letter-spacing: 0.2px;
  line-height: 1.4;
  animation: navBadgePulse 2s ease-in-out infinite;
  pointer-events: none;
  z-index: 5;
}

@keyframes navBadgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(7,193,96,0.4); }
  50% { box-shadow: 0 0 0 4px rgba(7,193,96,0); }
}

@keyframes dotPulse {
  0%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-5px); }
}
.nav-github { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; color: rgba(255,255,255,0.4); text-decoration: none; transition: all 0.25s; margin-left: auto; flex-shrink: 0; }
.nav-github:hover { color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.06); }
[data-theme="light"] .nav-link { color: rgba(0,0,0,.35); }
[data-theme="light"] .nav-link:hover { color: rgba(0,0,0,.65); background: rgba(0,0,0,.04); }
[data-theme="light"] .nav-link.active { color: var(--brand-green); }
[data-theme="light"] .nav-github { color: rgba(0,0,0,0.35); }
[data-theme="light"] .nav-github:hover { color: rgba(0,0,0,0.7); background: rgba(0,0,0,0.06); }

/* ================= Hero ================= */
.hero { min-height: 92vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 72px 20px 48px; position: relative; }
.hero h1 { font-size: 56px; font-weight: 800; margin-bottom: 22px; line-height: 1.2; letter-spacing: -0.5px; }
.hero-sub { font-size: 20px; color: var(--text-muted); max-width: 620px; line-height: 1.7; }
.hero-slogan { font-size: 21px; font-weight: 600; letter-spacing: .08em; margin-top: 40px; }
.hero-btns { display: flex; align-items: center; gap: 16px; margin-top: 24px; flex-wrap: wrap; justify-content: center; }
.hero-demo, .hero-github { display: inline-flex; align-items: center; justify-content: center; padding: 10px 28px; border-radius: 100px; font-size: 14px; font-weight: 600; letter-spacing: .04em; text-decoration: none; transition: transform .2s, box-shadow .2s, background .2s, border-color .2s; }
.hero-demo { color: #fff; background: var(--brand-green); box-shadow: 0 4px 20px rgba(7,193,96,.25); }
.hero-demo:hover { transform: translateY(-2px); box-shadow: 0 6px 28px rgba(7,193,96,.35); }
.hero-demo:active, .hero-github:active { transform: translateY(0); }
.hero-github { color: var(--text-main); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); gap: 8px; }
.hero-github:hover { transform: translateY(-2px); background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); }
.hero-github svg { flex-shrink: 0; }
[data-theme="light"] .hero-github { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.1); }
[data-theme="light"] .hero-github:hover { background: rgba(0,0,0,.08); border-color: rgba(0,0,0,.18); }
.hero-trust { position: absolute; left: 50%; bottom: 52px; transform: translateX(-50%); width: min(760px, calc(100vw - 80px)); display: flex; justify-content: space-between; gap: 28px; font-size: 15px; color: rgba(255,255,255,.32); letter-spacing: .03em; }
.hero-trust span { white-space: nowrap; }
[data-theme="light"] .hero-trust { color: rgba(0,0,0,.3); }

/* ================= 板块通用布局 ================= */
.section { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 100px 40px; position: relative; border-bottom: 1px solid var(--glass-border); }
.container { max-width: 1200px; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.container.reverse { direction: rtl; }
.container.reverse > * { direction: ltr; }

/* ================= 文案区域 ================= */
.text-content { display: flex; flex-direction: column; gap: 24px; z-index: 10; }
.slogan-badge { display: inline-flex; width: fit-content; padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; background: var(--glass-bg); border: 1px solid var(--glass-border); color: var(--brand-green); box-shadow: var(--glass-shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.title { font-size: 42px; font-weight: 800; line-height: 1.2; letter-spacing: -0.5px; }
.desc { font-size: 18px; color: var(--text-muted); line-height: 1.6; }

.float-new-msgs {
    position: absolute;
    right: 12px;
    top: 118px;
    background: #282828;
    border: 0.5px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 7px 14px 7px 10px;
    display: flex;
    align-items: center;
    gap: 4px;
    color: #07c160;
    font-size: 13px;
    font-weight: 500;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
    z-index: 30;
  }
[data-theme="light"] .float-new-msgs {
    background: #e8e8e8;
    border-color: rgba(0,0,0,0.08);
    color: #059669;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  }
/* ================= 系统控制台 (毛玻璃) ================= */
.mac-panel { background: var(--glass-bg); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border: 1px solid var(--glass-border); border-radius: 20px; padding: 24px; box-shadow: var(--glass-shadow), var(--glass-highlight); position: relative; overflow: hidden; }
.mac-header { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; }
.mac-dots { display: flex; gap: 8px; }
.mac-dot { width: 12px; height: 12px; border-radius: 50%; }
.mac-title { font-size: 12px; font-weight: 600; color: var(--text-muted); letter-spacing: 1px; margin-left: 10px; }

.config-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.config-row:last-child { margin-bottom: 0; }
.config-label { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.config-value { background: rgba(0,0,0,0.2); border: 1px solid var(--glass-border); padding: 12px 16px; border-radius: 12px; font-size: 14px; color: var(--text-main); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
[data-theme="light"] .config-value { background: rgba(255,255,255,0.5); }
.tag { padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.tag-green { background: var(--brand-green); color: #fff; font-size: 11px; padding: 3px 9px; border-radius: 6px; font-weight: 600; letter-spacing: 0.3px; box-shadow: 0 2px 8px rgba(7,193,96,0.25); }
.tag-amber { background: rgba(245,158,11,0.2); color: #f59e0b; }
.tag-blue { background: rgba(10,132,255,0.15); color: #0a84ff; }
.tag-purple { background: rgba(139,92,246,0.15); color: #8b5cf6; }
.tag-red { background: rgba(244,63,94,0.15); color: #f43f5e; }
.tag-muted { background: rgba(255,255,255,0.08); color: var(--text-main); }

/* ================= 双手机展示区 ================= */
.showcase { display: flex; align-items: center; justify-content: center; gap: 30px; position: relative; }
.vs-arrow { font-size: 24px; color: var(--brand-green); opacity: 0.5; font-weight: bold; animation: pulseArrow 2s infinite; }

.phone-container { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.phone-badge { padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 700; border: 1px solid var(--glass-border); background: var(--glass-bg); backdrop-filter: blur(10px); }
.badge-pain { color: #f43f5e; border-color: rgba(244,63,94,0.3); background: rgba(244,63,94,0.05); }
.badge-cure { color: var(--brand-green); border-color: var(--brand-green-dim); background: var(--brand-green-dim); }

/* ================= 手机壳系统 ================= */
.phone-mockup { width: 300px; height: 620px; background: var(--phone-frame); border-radius: 55px; padding: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,0.1), var(--glass-shadow); position: relative; z-index: 20; }

/* AI Agent 区域手机加大 */
#agent .phone-mockup { width: 360px; height: 700px; }
/* MCP 区域手机加大 */
#mcp .phone-mockup { width: 360px; height: 700px; }
.phone-screen { width: 100%; height: 100%; background: var(--phone-bezel); border-radius: 46px; overflow: hidden; position: relative; }
.phone-inner { width: 100%; height: 100%; background: var(--phone-bg); border-radius: 46px; overflow: hidden; display: flex; flex-direction: column; position: relative; }

.dynamic-island { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 90px; height: 26px; background: #000; border-radius: 15px; z-index: 50; }

/* ================= 高保真微信 UI ================= */

/* --- 状态栏 --- */
.wx-status { height: 50px; padding: 14px 20px 0; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; z-index: 50; }
.wx-status-left { font-size: 14px; font-weight: 600; color: var(--status-text); }
.wx-status-right { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--status-text); }
.wx-battery { border: 1px solid rgba(255,255,255,0.3); border-radius: 3px; width: 22px; height: 10px; padding: 1px 2px; position: relative; }
.wx-battery::after { content: ''; position: absolute; right: -3px; top: 2px; width: 2px; height: 4px; background: rgba(255,255,255,0.3); border-radius: 0 1px 1px 0; }
.wx-battery-level { width: 85%; height: 100%; background: var(--brand-green); border-radius: 1px; }
.wx-battery-low .wx-battery-level { background: #ff3b30; width: 15%; }

/* --- 导航栏 --- */
.wx-nav { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-bottom: 0.5px solid rgba(255,255,255,0.06); flex-shrink: 0; z-index: 40; background: var(--phone-nav-bg); }
.wx-back-pill { background: var(--back-pill-bg); border-radius: 100px; padding: 4px 10px 4px 6px; display: flex; align-items: center; gap: 3px; color: var(--bubble-text-left); font-size: 13px; }
.wx-back-arrow { font-size: 18px; line-height: 1; margin-top: -1px; }
.wx-back-count { font-size: 12px; font-weight: 600; }
.wx-nav-title { font-size: 15px; font-weight: 600; color: var(--bubble-text-left); display: flex; align-items: center; gap: 4px; }
.wx-nav-dots { display: flex; gap: 2.5px; align-items: center; padding: 8px 4px; }
.wx-nav-dots i { width: 4.5px; height: 4.5px; background: var(--bubble-text-left); border-radius: 50%; display: block; opacity: 0.7; }

/* --- 聊天区域 --- */
.wx-chat { flex: 1; overflow-y: auto; padding: 12px 14px 16px; display: flex; flex-direction: column; gap: 14px; scrollbar-width: none; }
.wx-chat::-webkit-scrollbar { display: none; }
.wx-time { text-align: center; font-size: 11px; color: var(--time-color); margin: 4px 0; }
.wx-time-danger { color: #ff3b30; font-weight: 500; }

/* --- 消息 --- */
.wx-msg { display: flex; gap: 8px; align-items: flex-start; max-width: 82%; }
.wx-msg-right { flex-direction: row-reverse; align-self: flex-end; }
.wx-avatar { width: 38px; height: 38px; border-radius: 6px; flex-shrink: 0; object-fit: cover; background: #333; }
.wx-avatar-text { width: 38px; height: 38px; border-radius: 6px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; color: #fff; }
.wx-avatar-ai { background: linear-gradient(135deg, var(--brand-green), #047857); }

/* ClawBot 红眼双点头像（用于宣传页 AI 助手场景） */
.clawbot-avatar {
  width: 38px; height: 38px;
  border-radius: 6px;
  background-color: #ef4544;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  box-shadow: 0 2px 6px rgba(239, 69, 68, 0.25);
}
.clawbot-avatar span {
  width: 8px; height: 8px;
  background-color: #ffffff;
  border-radius: 50%;
  display: block;
}
[data-theme="light"] .clawbot-avatar {
  background-color: #d24747;
  box-shadow: 0 2px 6px rgba(210, 71, 71, 0.22);
}
.wx-avatar-robot { background: #f43f5e; }
.wx-body { display: flex; flex-direction: column; gap: 3px; max-width: calc(100% - 50px); }
.wx-nick { font-size: 11px; color: var(--nickname-color); margin-left: 1px; }
.wx-nick-danger { color: #d15c5c; font-weight: bold; }

/* --- 气泡 + 尾巴 --- */
.wx-bubble { background: var(--bubble-left); color: var(--bubble-text-left); font-size: 15px; padding: 9px 12px; border-radius: 6px; line-height: 1.45; position: relative; word-break: break-all; }
.wx-bubble.has-tail::before { content: ''; position: absolute; left: -5px; top: 12px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 6px solid var(--bubble-tail); }
.wx-msg-right .wx-bubble { background: var(--bubble-right); color: var(--bubble-text-right); }
.wx-msg-right .wx-bubble.has-tail::before { left: auto; right: -5px; border-right: none; border-left: 6px solid var(--bubble-right); }

/* 交互命令按钮 */
.wx-cmds { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }

.wx-cmd {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: rgba(255,255,255,0.04);
  border: 0.5px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  color: rgba(245,245,247,0.65);
  cursor: pointer;
  text-align: left;
  line-height: 1.45;
  transition: all 0.2s;
}

.wx-cmd:hover { background: rgba(7,193,96,0.08); border-color: rgba(7,193,96,0.25); color: #fff; }
.wx-cmd:active { transform: scale(0.98); }
.wx-cmd.disabled { opacity: 0.3; pointer-events: none; }
.wx-cmd span:first-child { font-size: 16px; flex-shrink: 0; }

[data-theme="light"] .wx-cmd { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); color: rgba(0,0,0,0.5); }
[data-theme="light"] .wx-cmd:hover { background: rgba(5,150,105,0.06); border-color: rgba(5,150,105,0.2); color: #1d1d1f; }
.wx-mention { color: var(--brand-green); font-weight: bold; }
.urgent-bubble { background: #351f1f !important; border: 1px solid rgba(255,59,48,0.5) !important; color: #ffe6e6 !important; animation: panicPulse 2s infinite; }
.urgent-bubble.has-tail::before { border-right-color: #351f1f !important; }

/* --- 语音气泡 --- */
.wx-voice { display: flex; align-items: center; gap: 6px; min-width: 80px; }
.wx-voice-icon { opacity: 0.7; }
.wx-voice-dur { color: var(--nickname-color); font-size: 13px; margin-left: auto; }

/* --- 引用栏 --- */
.wx-quote-bar { padding: 6px 12px; background: var(--input-bg); border-bottom: 0.5px solid rgba(255,255,255,0.04); display: flex; justify-content: space-between; align-items: center; }
.wx-quote-text { font-size: 12px; color: var(--nickname-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 90%; }
.wx-quote-close { color: #555; font-size: 16px; font-weight: 300; padding: 0 4px; }

/* --- 输入栏 --- */
.wx-bottom { background: var(--input-bg); border-top: 0.5px solid rgba(255,255,255,0.06); flex-shrink: 0; }
.wx-input-row { height: 50px; display: flex; align-items: center; padding: 0 10px; gap: 8px; }
.wx-input-field { flex: 1; height: 36px; background: var(--input-field-bg); border-radius: 6px; display: flex; align-items: center; padding: 0 10px; font-size: 14px; color: var(--bubble-text-left); min-width: 0; }
.wx-cursor { display: inline-block; width: 2px; height: 16px; background: var(--brand-green); margin-left: 1px; animation: blink 1s step-end infinite; }
.wx-icon-btn { display: flex; align-items: center; justify-content: center; }
.wx-plus-btn { width: 28px; height: 28px; border-radius: 50%; border: 1.8px solid var(--bubble-text-left); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--bubble-text-left); font-weight: bold; opacity: 0.7; }

/* --- Home bar --- */
.wx-home { height: 18px; background: var(--input-bg); display: flex; justify-content: center; align-items: flex-end; padding-bottom: 4px; flex-shrink: 0; }
.wx-home-bar { width: 120px; height: 4px; background: var(--home-bar-color); border-radius: 100px; opacity: 0.3; }

/* ================= 告警卡片 ================= */
.alert-card { background: var(--bubble-left); border: 1px solid var(--glass-border); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; }
.alert-header { display: flex; align-items: center; gap: 4px; font-weight: bold; color: #f43f5e; border-bottom: 0.5px solid var(--glass-border); padding-bottom: 6px; margin-bottom: 2px; }
.alert-line { color: var(--bubble-text-left); line-height: 1.5; }
.alert-line span { color: var(--text-muted); }

/* ================= 摘要卡片 ================= */
.digest-card { padding: 14px; background: var(--bubble-left); border-radius: 10px; border: 1px solid var(--glass-border); }
.digest-title { font-size: 14px; font-weight: 700; color: var(--brand-green); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.digest-title::before { content: ''; width: 3px; height: 14px; background: var(--brand-green); border-radius: 2px; }
.digest-meta { font-size: 10px; color: var(--text-muted); margin-bottom: 10px; border-bottom: 0.5px solid var(--glass-border); padding-bottom: 8px; }
.digest-section-title { font-weight: 600; font-size: 12px; margin-top: 10px; margin-bottom: 4px; }
.digest-point { font-size: 12px; color: var(--bubble-text-left); margin-bottom: 4px; padding-left: 10px; position: relative; line-height: 1.5; }
.digest-point::before { content: '\2022'; position: absolute; left: 0; color: var(--brand-green); }
.digest-point.warn::before { color: #f59e0b; }

/* ================= 公众号列表 ================= */
.oa-list-item { display: flex; align-items: center; gap: 10px; padding: 12px; background: var(--bubble-left); border-radius: 10px; margin-bottom: 8px; border: 0.5px solid var(--glass-border); }
.oa-avatar { width: 40px; height: 40px; border-radius: 50%; background: #333; position: relative; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: bold; color: #fff; }
.oa-badge { position: absolute; top: -4px; right: -4px; background: #f43f5e; color: #fff; font-size: 9px; padding: 1px 4px; border-radius: 10px; font-weight: bold; border: 2px solid var(--phone-bg); }
.oa-info { flex: 1; min-width: 0; }
.oa-name { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.oa-desc { font-size: 11px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px; }

/* ================= 悬浮组件 ================= */
.float-widget { position: absolute; background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: 16px; padding: 16px; box-shadow: var(--glass-shadow); z-index: 30; }

/* ================= MCP 工具调用样式 ================= */
.mcp-tool-call {
  display: inline-block;
  align-items: center;
  gap: 6px;
  background: rgba(10,132,255,0.12);
  border: 0.5px solid rgba(10,132,255,0.2);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 10px;
  font-family: 'SF Mono', monospace;
  color: #0a84ff;
  margin-bottom: 6px;
  word-break: break-all;
  overflow-wrap: break-word;
  max-width: 100%;
  line-height: 1.5;
}
.mcp-tool-call::before {
  content: '▶';
  font-size: 8px;
  color: #0a84ff;
}
.mcp-result-block {
  background: rgba(0,0,0,0.3);
  border: 0.5px solid var(--glass-border);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.5;
  margin-top: 4px;
}
.mcp-result-block .file-path {
  color: var(--brand-green);
  font-family: monospace;
  font-size: 11px;
}
[data-theme="light"] .mcp-result-block { background: rgba(255,255,255,0.5); }

/* ================= 导出卡片 ================= */
.export-canvas { background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: 16px; width: 380px; padding: 20px; box-shadow: var(--glass-shadow); position: relative; z-index: 20; }
.export-top { display: flex; justify-content: space-between; border-bottom: 1px solid var(--glass-border); padding-bottom: 12px; margin-bottom: 16px; }
.export-file-tag { font-size: 10px; background: rgba(255,255,255,0.1); padding: 4px 8px; border-radius: 4px; color: var(--text-muted); font-family: monospace; }
.audio-player { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,0.2); padding: 8px 12px; border-radius: 30px; border: 1px solid var(--glass-border); width: 180px; }
[data-theme="light"] .audio-player { background: rgba(0,0,0,0.05); }
.audio-btn { width: 24px; height: 24px; border-radius: 50%; background: var(--brand-green); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; }
.audio-wave { flex: 1; height: 4px; background: linear-gradient(90deg, var(--brand-green) 40%, rgba(150,150,150,0.3) 40%); border-radius: 2px; }
.photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 8px; }
.photo-item { height: 80px; background: #333; border-radius: 6px; background-size: cover; background-position: center; }

/* ================= 朋友圈卡片 ================= */
.moment-card { background: var(--bubble-left); border-radius: 12px; padding: 16px; margin-bottom: 16px; border: 0.5px solid var(--glass-border); }
.moment-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.moment-user { display: flex; gap: 10px; align-items: center; }
.moment-name { font-size: 15px; font-weight: 600; color: #576b95; }
.moment-shield { font-size: 10px; background: rgba(7, 193, 96, 0.1); color: var(--brand-green); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--brand-green-glow); display: flex; align-items: center; gap: 4px; font-weight: bold; }
.moment-text { font-size: 14px; line-height: 1.5; margin-bottom: 10px; }

/* ================= 主题切换按钮 ================= */
.theme-switch { position: fixed; bottom: 40px; left: 40px; width: 50px; height: 50px; border-radius: 25px; background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow); display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; z-index: 999; transition: transform 0.2s; }
.theme-switch:active { transform: scale(0.9); }

/* ================= 关键帧动画 ================= */
@keyframes pulseArrow { 0%,100%{transform:translateX(0);opacity:0.3} 50%{transform:translateX(10px);opacity:1} }
@keyframes pulseArrowDown { 0%,100%{transform:rotate(90deg) translateX(0);opacity:0.3} 50%{transform:rotate(90deg) translateX(8px);opacity:1} }
@keyframes panicPulse { 0%{box-shadow:0 0 0 0 rgba(244,63,94,0.4)} 70%{box-shadow:0 0 0 10px rgba(244,63,94,0)} 100%{box-shadow:0 0 0 0 rgba(244,63,94,0)} }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes dotPulse { 0%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px); } }

/* ================= 响应式 ================= */

/* --- 平板 (≤1100px) --- */
@media (max-width: 1100px) {
  .container { grid-template-columns: 1fr; gap: 40px; }
  .container.reverse { direction: ltr; }
  .showcase { flex-wrap: wrap; }
  .hero h1 { font-size: 36px; }
  .title { font-size: 32px; }
  .nav { padding: 0 12px; gap: 10px; }
  .nav-links { overflow-x: auto; flex: 1; min-width: 0; scrollbar-width: none; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-link { padding: 5px 8px; font-size: 10.5px; letter-spacing: .03em; flex-shrink: 0; }
  .nav-github { margin-left: 0; }
  .hero { min-height: 92vh; padding-bottom: 72px; }
  .hero-demo, .hero-github { padding: 8px 20px; font-size: 13px; }
  .hero-trust { bottom: 28px; width: calc(100vw - 32px); gap: 14px; flex-wrap: wrap; justify-content: center; }
  .nav-link.active::after { left: 8px; right: 8px; }
}

/* --- 大手机 / 小平板 (≤768px) --- */
@media (max-width: 768px) {
  .section { padding: 60px 20px; min-height: auto; }
  .container { gap: 32px; }
  .hero { min-height: 85vh; padding: 80px 16px 60px; }
  .hero h1 { font-size: 32px; margin-bottom: 16px; }
  .hero-sub { font-size: 16px; }
  .hero-slogan { font-size: 18px; margin-top: 28px; }
  .hero-trust { position: relative; left: auto; bottom: auto; transform: none; width: 100%; margin-top: 32px; justify-content: center; gap: 16px; font-size: 12px; }
  .title { font-size: 28px; }
  .desc { font-size: 15px; }
  .mac-panel { padding: 16px; }
  .mac-title { font-size: 11px; }
  .config-label { font-size: 11px; }
  .config-value { padding: 8px 12px; font-size: 13px; }
  .phone-mockup { width: 260px; height: 540px; border-radius: 48px; padding: 8px; }
  #agent .phone-mockup { width: 280px; height: 560px; }
  #mcp .phone-mockup { width: 280px; height: 560px; }
  .phone-screen { border-radius: 42px; }
  .phone-inner { border-radius: 42px; }
  .dynamic-island { width: 76px; height: 22px; border-radius: 12px; top: 8px; }
  .export-canvas { width: 100%; max-width: 360px; }
  .float-widget { display: none; }
  .float-new-msgs { top: 100px; right: 8px; font-size: 11px; padding: 5px 10px 5px 8px; }
  .theme-switch { bottom: 20px; left: 16px; width: 44px; height: 44px; font-size: 18px; }
}

/* --- 手机 (≤480px) --- */
@media (max-width: 480px) {
  .nav { height: 52px; gap: 8px; padding: 0 10px; }
  .brand { font-size: 17px; letter-spacing: 1.5px; }
  .nav-links { gap: 0; }
  .nav-link { padding: 4px 7px; font-size: 10px; letter-spacing: .02em; }
  .nav-link.active::after { left: 7px; right: 7px; height: 1.5px; }
  .hero { min-height: 80vh; padding: 68px 14px 48px; }
  .hero h1 { font-size: 26px; letter-spacing: -0.3px; }
  .hero-sub { font-size: 14px; }
  .hero-slogan { font-size: 16px; margin-top: 20px; }
  .hero-btns { margin-top: 16px; gap: 10px; }
  .hero-demo, .hero-github { padding: 8px 18px; font-size: 12px; }
  .hero-trust { gap: 10px; font-size: 11px; margin-top: 24px; }
  .section { padding: 48px 14px; }
  .container { gap: 24px; }
  .title { font-size: 24px; }
  .desc { font-size: 14px; }
  .slogan-badge { font-size: 11px; padding: 5px 10px; }
  .phone-mockup { width: 220px; height: 460px; border-radius: 40px; padding: 6px; }
  #agent .phone-mockup { width: 240px; height: 480px; }
  #mcp .phone-mockup { width: 240px; height: 480px; }
  .phone-screen { border-radius: 36px; }
  .phone-inner { border-radius: 36px; }
  .dynamic-island { width: 64px; height: 18px; border-radius: 10px; top: 6px; }
  .wx-status { height: 38px; padding: 10px 14px 0; }
  .wx-status-left { font-size: 12px; }
  .wx-status-right { font-size: 10px; }
  .wx-battery { width: 18px; height: 8px; }
  .wx-nav { height: 36px; padding: 0 8px; }
  .wx-nav-title { font-size: 12px; }
  .wx-back-pill { padding: 3px 7px 3px 5px; font-size: 11px; }
  .wx-back-arrow { font-size: 14px; }
  .wx-back-count { font-size: 10px; }
  .wx-chat { padding: 8px 10px 10px; gap: 10px; }
  .wx-time { font-size: 9px; }
  .wx-msg { gap: 6px; max-width: 88%; }
  .wx-avatar { width: 30px; height: 30px; border-radius: 5px; }
  .clawbot-avatar { width: 30px; height: 30px; border-radius: 5px; gap: 4px; }
  .clawbot-avatar span { width: 6px; height: 6px; }
  .wx-body { max-width: calc(100% - 42px); gap: 2px; }
  .wx-nick { font-size: 9px; }
  .wx-bubble { font-size: 12px; padding: 6px 9px; border-radius: 5px; line-height: 1.4; }
  .wx-bubble.has-tail::before { border-top-width: 4px; border-bottom-width: 4px; border-right-width: 5px; left: -4px; top: 10px; }
  .wx-msg-right .wx-bubble.has-tail::before { border-left-width: 5px; right: -4px; }
  .wx-input-row { height: 40px; gap: 6px; padding: 0 8px; }
  .wx-input-field { height: 28px; font-size: 12px; }
  .wx-cursor { width: 1.5px; height: 12px; }
  .wx-plus-btn { width: 22px; height: 22px; font-size: 11px; border-width: 1.5px; }
  .wx-home { height: 14px; }
  .wx-home-bar { width: 90px; height: 3px; }
  .showcase { gap: 12px; }
  .vs-arrow { font-size: 18px; }
  .phone-badge { font-size: 10px; padding: 3px 8px; }
  .alert-card { font-size: 10px; padding: 8px; gap: 4px; }
  .alert-header { font-size: 11px; padding-bottom: 4px; margin-bottom: 1px; }
  .alert-line { font-size: 10px; line-height: 1.4; }
  .digest-card { padding: 10px; }
  .digest-title { font-size: 12px; margin-bottom: 6px; }
  .digest-title::before { width: 2px; height: 11px; }
  .digest-meta { font-size: 9px; margin-bottom: 6px; padding-bottom: 5px; }
  .digest-section-title { font-size: 10px; margin-top: 6px; }
  .digest-point { font-size: 10px; margin-bottom: 2px; padding-left: 8px; line-height: 1.4; }
  .oa-list-item { padding: 8px; gap: 8px; margin-bottom: 6px; }
  .oa-avatar { width: 32px; height: 32px; font-size: 11px; }
  .oa-badge { font-size: 8px; padding: 1px 3px; top: -3px; right: -3px; }
  .oa-name { font-size: 12px; }
  .oa-desc { font-size: 10px; max-width: 100px; }
  .mac-panel { padding: 12px; }
  .mac-header { margin-bottom: 14px; }
  .mac-dot { width: 10px; height: 10px; }
  .mac-title { font-size: 10px; margin-left: 6px; }
  .config-row { gap: 6px; margin-bottom: 12px; }
  .config-label { font-size: 10px; }
  .config-value { padding: 6px 10px; font-size: 12px; border-radius: 8px; }
  .tag { font-size: 10px; padding: 3px 7px; border-radius: 5px; }
  .export-canvas { padding: 14px; border-radius: 12px; }
  .moment-card { padding: 12px; }
  .moment-name { font-size: 13px; }
  .moment-text { font-size: 12px; }
  .ambient-glow { width: 300px; height: 300px; }
  /* 双手机对比箭头改向下 */
  .vs-arrow {
    transform: rotate(90deg);
    animation: pulseArrowDown 2s infinite;
  }
  /* 定时任务轨道紧凑 */
  .auto-track { max-width: 240px; }
  .auto-node-dot { width: 24px; height: 24px; font-size: 11px; }
  .auto-node-label { font-size: 9px; }
  .auto-node-label::after { display: none; }
  .auto-node-time { font-size: 8px; }
  .auto-track::before { top: 22px; }
  /* 能力扩展状态卡紧凑 */
  .ext-status-top { padding: 7px 12px; font-size: 12px; margin-bottom: 12px; }
  .ext-status-top .hint { font-size: 11px; }
}

/* --- 小手机 (≤360px) --- */
@media (max-width: 360px) {
  .nav-link { padding: 3px 5px; font-size: 9px; }
  .hero h1 { font-size: 22px; }
  .hero-sub { font-size: 13px; }
  .phone-mockup { width: 200px; height: 420px; border-radius: 36px; padding: 5px; }
  #agent .phone-mockup { width: 220px; height: 440px; }
  #mcp .phone-mockup { width: 220px; height: 440px; }
  .phone-screen { border-radius: 32px; }
  .phone-inner { border-radius: 32px; }
  .dynamic-island { width: 56px; height: 16px; border-radius: 9px; top: 5px; }
  .wx-status { height: 34px; padding: 8px 10px 0; }
  .wx-nav { height: 32px; }
  .wx-nav-title { font-size: 11px; }
  .wx-chat { padding: 6px 8px 8px; gap: 8px; }
  .wx-avatar { width: 26px; height: 26px; }
  .clawbot-avatar { width: 26px; height: 26px; gap: 3px; }
  .clawbot-avatar span { width: 5px; height: 5px; }
  .wx-bubble { font-size: 11px; padding: 5px 7px; }
  .wx-input-row { height: 36px; }
  .wx-input-field { height: 24px; font-size: 11px; }
  .title { font-size: 22px; }
  .desc { font-size: 13px; }
}

/* ================= Footer + 免责声明 ================= */
.site-footer {
  padding: 80px 40px 40px;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}
.footer-hairline {
  border: none;
  height: 0.5px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), rgba(255,255,255,0.15), rgba(255,255,255,0.1), transparent);
  margin-bottom: 60px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 60px;
  margin-bottom: 50px;
}
.footer-brand { display: flex; flex-direction: column; gap: 16px; }
.footer-logo { font-size: 22px; font-weight: 800; letter-spacing: 2px; }
.footer-logo span { color: var(--brand-green); }
.footer-tagline { font-size: 13px; color: var(--text-muted); line-height: 1.6; max-width: 320px; }
.footer-links-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.footer-link-icon {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 8px;
  font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,0.5); text-decoration: none;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  transition: all 0.25s;
}
.footer-link-icon:hover { color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.08); }
.footer-col { display: flex; flex-direction: column; gap: 14px; }
.footer-col-title {
  font-size: 11px; font-weight: 600; letter-spacing: 1.2px;
  text-transform: uppercase; color: rgba(255,255,255,0.3);
}
.footer-col a {
  font-size: 13px; color: rgba(255,255,255,0.45);
  text-decoration: none; transition: color 0.25s;
  width: fit-content;
}
.footer-col a:hover { color: rgba(255,255,255,0.8); }

.disclaimer-section { border-top: 0.5px solid rgba(255,255,255,0.06); padding-top: 32px; margin-bottom: 32px; }
.disclaimer-trigger {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none;
  width: fit-content; margin-bottom: 16px;
}
.disclaimer-trigger:hover .disclaimer-trigger-label { color: rgba(255,255,255,0.6); }
.disclaimer-trigger-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--brand-green); }
.disclaimer-trigger-label {
  font-size: 10px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: rgba(255,255,255,0.3);
  transition: color 0.25s;
}
.disclaimer-arrow { font-size: 10px; color: rgba(255,255,255,0.2); margin-left: 4px; transition: transform 0.3s ease; }
.disclaimer-arrow.open { transform: rotate(180deg); }
.disclaimer-body {
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.4s ease;
  max-height: 80px; opacity: 0.5;
}
.disclaimer-body.open { max-height: 600px; opacity: 0.65; }
.disclaimer-preview { font-size: 11px; line-height: 1.7; color: rgba(255,255,255,0.45); }
.disclaimer-preview.open { display: none; }
.disclaimer-full { display: none; font-size: 12px; line-height: 1.75; color: rgba(255,255,255,0.55); }
.disclaimer-full.open { display: block; }
.disclaimer-full h4 { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.6); margin-bottom: 14px; }
.disclaimer-full ol { list-style: none; counter-reset: disc; display: flex; flex-direction: column; gap: 10px; }
.disclaimer-full ol li {
  counter-increment: disc;
  padding-left: 20px;
  position: relative;
}
.disclaimer-full ol li::before {
  content: counter(disc);
  position: absolute; left: 0; top: 0;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(7,193,96,0.1);
  border: 0.5px solid rgba(7,193,96,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 700; color: var(--brand-green);
}
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px; border-top: 0.5px solid rgba(255,255,255,0.04);
}
.footer-copyright { font-size: 11px; color: rgba(255,255,255,0.2); }
.footer-bottom-links { display: flex; gap: 20px; }
.footer-bottom-links a {
  font-size: 11px; color: rgba(255,255,255,0.2);
  text-decoration: none; transition: color 0.25s;
}
.footer-bottom-links a:hover { color: rgba(255,255,255,0.4); }

/* Footer light theme */
[data-theme="light"] .footer-hairline {
  background: linear-gradient(90deg, transparent, rgba(0,0,0,0.08), rgba(0,0,0,0.12), rgba(0,0,0,0.08), transparent);
}
[data-theme="light"] .footer-link-icon { color: rgba(0,0,0,0.4); background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .footer-link-icon:hover { color: rgba(0,0,0,0.7); background: rgba(0,0,0,0.06); }
[data-theme="light"] .footer-col-title { color: rgba(0,0,0,0.3); }
[data-theme="light"] .footer-col a { color: rgba(0,0,0,0.4); }
[data-theme="light"] .footer-col a:hover { color: rgba(0,0,0,0.7); }
[data-theme="light"] .disclaimer-section { border-top-color: rgba(0,0,0,0.06); }
[data-theme="light"] .disclaimer-trigger-label { color: rgba(0,0,0,0.3); }
[data-theme="light"] .disclaimer-trigger:hover .disclaimer-trigger-label { color: rgba(0,0,0,0.5); }
[data-theme="light"] .disclaimer-preview { color: rgba(0,0,0,0.35); }
[data-theme="light"] .disclaimer-full { color: rgba(0,0,0,0.5); }
[data-theme="light"] .disclaimer-full h4 { color: rgba(0,0,0,0.55); }
[data-theme="light"] .disclaimer-full ol li::before {
  background: rgba(5,150,105,0.1);
  border-color: rgba(5,150,105,0.2);
  color: #059669;
}
[data-theme="light"] .footer-bottom { border-top-color: rgba(0,0,0,0.04); }
[data-theme="light"] .footer-copyright { color: rgba(0,0,0,0.2); }
[data-theme="light"] .footer-bottom-links a { color: rgba(0,0,0,0.2); }
[data-theme="light"] .footer-bottom-links a:hover { color: rgba(0,0,0,0.4); }

/* Footer responsive */
@media (max-width: 768px) {
  .site-footer { padding: 40px 20px 24px; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-hairline { margin-bottom: 36px; }
  .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }
}

    /* 手机上方状态卡（float-widget 统一风格，正常流不覆盖手机） */
    .ext-status-top {
      margin-bottom: 16px;
      background: var(--glass-bg);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid var(--glass-border);
      border-radius: 16px;
      padding: 9px 16px;
      box-shadow: var(--glass-shadow), var(--glass-highlight);
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
    }
    .ext-status-top .dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--brand-green);
      box-shadow: 0 0 8px var(--brand-green);
      animation: blink 1s step-end infinite;
      flex-shrink: 0;
    }
    .ext-status-top .status { font-weight: bold; }
    .ext-status-top .hint { color: var(--text-muted); font-size: 12px; }

    /* ===== 扩展板块：命令按钮蓝色主题（与 Agent 绿色区分） ===== */
    #mcp .wx-cmd {
      border: 1px solid rgba(10,132,255,0.35);
      background: rgba(10,132,255,0.06);
    }
    #mcp .wx-cmd:hover {
      background: rgba(10,132,255,0.12);
      border-color: rgba(10,132,255,0.55);
      color: #fff;
    }
    /* 呼吸光晕引导点击 */
    #mcp .wx-cmd:not(.disabled) {
      animation: extCmdGlow 2.5s ease-in-out infinite;
    }
    @keyframes extCmdGlow {
      0%, 100% { box-shadow: 0 0 0 0 rgba(10,132,255,0); }

      50% { box-shadow: 0 0 12px 0 rgba(10,132,255,0.25); }
    }

    /* ===== 时间轨道 · 自动化中心样式 ===== */

    /* 轨道容器（手机正下方） */
    .auto-track {
      width: 100%;
      max-width: 360px;
      margin: 18px auto 0;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      position: relative;
      padding-top: 6px;
    }
    /* 连接线 */
    .auto-track::before {
      content: '';
      position: absolute;
      left: 12%;
      right: 12%;
      top: 26px;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(7,193,96,0.3) 15%, rgba(7,193,96,0.3) 85%, transparent);
      z-index: 0;
    }
    /* 轨道节点 */
    .auto-node {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      border: none;
      background: none;
      padding: 0;
      font-family: inherit;
      z-index: 1;
      position: relative;
      transition: transform 0.2s;
    }
    .auto-node:hover { transform: translateY(-2px); }
    .auto-node:hover .auto-node-dot { border-color: rgba(7,193,96,0.5); }
    .auto-node:hover .auto-node-label { color: var(--brand-green); }
    /* 未激活节点的"查看"引导角标 */
    .auto-node:not(.active) .auto-node-label::after {
      content: '查看';
      font-size: 9px;
      font-weight: 400;
      color: rgba(255,255,255,0.25);
      margin-left: 4px;
      letter-spacing: 0.5px;
    }
    .auto-node-dot {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: var(--glass-bg);
      backdrop-filter: blur(10px);
      border: 1.5px solid var(--glass-border);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: var(--text-muted);
      transition: all 0.3s;
      position: relative;
    }
    .auto-node.active .auto-node-dot {
      border-color: var(--brand-green);
      color: var(--brand-green);
      box-shadow: 0 0 0 0 rgba(7,193,96,0.4);
      animation: autoNodePulse 2s ease-in-out infinite;
    }
    @keyframes autoNodePulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(7,193,96,0.4); }
      50% { box-shadow: 0 0 0 8px rgba(7,193,96,0); }
    }
    .auto-node-label {
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
      transition: color 0.3s;
      white-space: nowrap;
    }
    .auto-node-time {
      font-size: 10px;
      color: rgba(255,255,255,0.25);
      font-variant-numeric: tabular-nums;
      transition: color 0.3s;
    }
    .auto-node.active .auto-node-label { color: var(--brand-green); }
    .auto-node.active .auto-node-time { color: rgba(7,193,96,0.6); }

    /* 手机内任务结果卡片 */
    .auto-result { display: none; }
    .auto-result.show { display: block; }

    .auto-card {
      background: var(--bubble-left);
      border: 1px solid var(--glass-border);
      border-radius: 10px;
      padding: 12px 14px;
      font-size: 12px;
    }
    .auto-card-head {
      display: flex;
      align-items: center;
      gap: 6px;
      font-weight: 700;
      color: var(--brand-green);
      font-size: 13px;
      margin-bottom: 8px;
      padding-bottom: 6px;
      border-bottom: 0.5px solid var(--glass-border);
    }
    .auto-card-line {
      color: var(--bubble-text-left);
      line-height: 1.55;
      margin-bottom: 3px;
      padding-left: 10px;
      position: relative;
    }
    .auto-card-line::before {
      content: '·';
      position: absolute;
      left: 2px;
      color: var(--brand-green);
    }
    .auto-card-line.warn { color: #f59e0b; }
    .auto-card-line.done { color: var(--text-muted); }
    .auto-card-line.time { display: flex; align-items: center; gap: 5px; }
    .auto-card-line.time .clock { font-size: 10px; color: var(--text-muted); }
    .auto-card-done-tag {
      display: inline-block;
      background: var(--brand-green-dim);
      color: var(--brand-green);
      font-size: 10px;
      font-weight: 700;
      padding: 1px 6px;
      border-radius: 4px;
      margin-top: 6px;
    }
    .auto-card-time {
      text-align: right;
      font-size: 10px;
      color: var(--time-color);
      margin-top: 6px;
    }

    /* 手机下方状态条 */
    .auto-footnote {
      margin-top: 14px;
      text-align: center;
      font-size: 12px;
      color: var(--text-muted);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .auto-footnote .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--brand-green);
      box-shadow: 0 0 8px var(--brand-green-glow);
      animation: autoNodePulse 2s ease-in-out infinite;
    }

    /* 技能标签 */
    .skill-tag-pair {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      color: var(--text-muted);
    }
    .skill-tag-pair .arrow { color: var(--brand-green); }


    /* 响应式 */
    @media (max-width: 768px) {
      .auto-track { max-width: 260px; }
      .auto-node-dot { width: 26px; height: 26px; font-size: 12px; }
      .auto-node-label { font-size: 10px; }
      .auto-node-time { font-size: 9px; }
      .auto-track::before { top: 24px; }
    }

/* ================= Agent 命令按钮呼吸光晕 ================= */
#agent .wx-cmd:not(.disabled) { animation: agentCmdGlow 2.5s ease-in-out infinite; }
@keyframes agentCmdGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(7,193,96,0); }
  50% { box-shadow: 0 0 12px 0 rgba(7,193,96,0.22); }
}