/* 登录/确认弹窗样式 (v3.0.1 共享) */
/* ===== 登录弹窗 ===== */
        .auth-modal-mask {
            position: fixed; inset: 0; background: rgba(0,0,0,0.65);
            backdrop-filter: blur(4px); z-index: 9999;
            display: flex; align-items: center; justify-content: center;
            padding: 1rem; animation: fadeIn 0.2s ease;
        }
        .auth-modal {
            background: linear-gradient(180deg, #16161f 0%, #0e0e15 100%);
            border: 1px solid rgba(0,255,255,0.18); border-radius: 20px;
            width: 100%; max-width: 380px; padding: 28px 26px;
            box-shadow: 0 25px 60px -10px rgba(0,0,0,0.7),
                        0 0 40px rgba(0,255,255,0.18),
                        0 0 60px rgba(255,0,255,0.08);
            color: #fff; position: relative;
            animation: modalIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .auth-modal-title {
            font-size: 1.25rem; font-weight: 700; margin-bottom: 6px;
            background: linear-gradient(135deg, #00FFFF, #007AFF);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
        }
        .auth-modal-sub { font-size: 0.8rem; color: rgba(255,255,255,0.45); margin-bottom: 22px; }
        .auth-field { margin-bottom: 14px; }
        .auth-field label { display: block; font-size: 0.75rem; color: rgba(255,255,255,0.45); margin-bottom: 6px; }
        .auth-input-row { display: flex; gap: 8px; }
        .auth-input {
            flex: 1; background: rgba(0,255,255,0.02); border: 1px solid rgba(0,255,255,0.15); border-radius: 10px;
            padding: 11px 14px; color: #fff; font-size: 0.9rem; outline: none;
            transition: border-color 0.2s, box-shadow 0.2s; font-family: inherit;
        }
        .auth-input::placeholder { color: rgba(255,255,255,0.3); }
        .auth-input:focus { border-color: rgba(0,255,255,0.6); box-shadow: 0 0 0 3px rgba(0,255,255,0.12); }
        .auth-input:disabled { opacity: 0.6; cursor: not-allowed; }
        .auth-sms-btn {
            background: linear-gradient(135deg, #00FFFF, #007AFF); border: none; color: #001018;
            padding: 0 14px; border-radius: 10px; font-size: 0.8rem; cursor: pointer;
            white-space: nowrap; min-width: 110px; transition: opacity 0.2s, transform 0.15s;
            font-weight: 600;
        }
        .auth-sms-btn:disabled { opacity: 0.6; cursor: not-allowed; }
        .auth-submit {
            width: 100%; margin-top: 8px; padding: 12px;
            background: linear-gradient(135deg, #00FFFF, #007AFF); border: none;
            color: #001018; font-size: 0.95rem; font-weight: 700; border-radius: 12px;
            cursor: pointer; transition: transform 0.15s, opacity 0.2s, box-shadow 0.2s;
            letter-spacing: 0.05em;
        }
        .auth-submit:disabled { opacity: 0.6; cursor: not-allowed; }
        .auth-submit:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 0 20px rgba(0,255,255,0.4); }
        .auth-tip { font-size: 0.75rem; color: #FF453A; min-height: 18px; margin-top: 4px; }
        .auth-tip.ok { color: var(--brand-green); }
        .auth-tip.info { color: rgba(255,255,255,0.4); }
        .auth-close {
            position: absolute; top: 12px; right: 12px; width: 28px; height: 28px;
            border-radius: 8px; background: transparent; border: 1px solid #2a2a3a;
            color: #8b8b9a; cursor: pointer; display: flex; align-items: center; justify-content: center;
            font-size: 1rem; line-height: 1;
        }
        .auth-close:hover { color: #fff; border-color: rgba(0,255,255,0.6); transform: rotate(90deg); }
        .auth-close { transition: color 0.2s, border-color 0.2s, transform 0.25s; }
        .auth-hint-row { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; font-size: 0.75rem; color: rgba(255,255,255,0.45); }

        /* ===== 确认弹框 (复用 auth-modal 样式 + 危险操作红钮) ===== */
        .confirm-modal { max-width: 360px; }
        .confirm-modal-body { font-size: 0.88rem; color: rgba(255,255,255,0.78); line-height: 1.55; margin: 4px 0 22px; }
        .confirm-modal-icon {
            width: 44px; height: 44px; border-radius: 12px; margin-bottom: 14px;
            background: rgba(255,69,58,0.12); border: 1px solid rgba(255,69,58,0.35);
            display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
        }
        .confirm-modal-actions { display: flex; gap: 10px; }
        .confirm-modal-actions .auth-btn {
            flex: 1; padding: 11px; border-radius: 12px; font-size: 0.9rem; font-weight: 600;
            cursor: pointer; transition: transform 0.15s, opacity 0.2s, box-shadow 0.2s;
            font-family: inherit; letter-spacing: 0.04em;
        }
        .confirm-modal-actions .auth-btn:disabled { opacity: 0.6; cursor: not-allowed; }
        .confirm-btn-cancel {
            background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.15); color: #fff;
        }
        .confirm-btn-cancel:not(:disabled):hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.3); }
        .confirm-btn-danger {
            background: linear-gradient(135deg, #FF453A, #FF6B6B); border: none; color: #fff;
            box-shadow: 0 0 0 1px rgba(255,69,58,0.4) inset, 0 8px 20px -6px rgba(255,69,58,0.45);
        }
        .confirm-btn-danger:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 0 0 1px rgba(255,69,58,0.6) inset, 0 12px 28px -6px rgba(255,69,58,0.6); }
        .auth-user-badge {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 4px 12px; border-radius: 999px; background: rgba(99,102,241,0.12);
            border: 1px solid rgba(99,102,241,0.3); color: #c7d2fe; font-size: 0.75rem;
        }
        .auth-logout-btn {
            background: transparent; border: none; color: #8b8b9a; cursor: pointer;
            font-size: 0.7rem; padding: 4px 8px; border-radius: 6px;
        }
        .auth-logout-btn:hover { color: #FF453A; background: rgba(255,69,58,0.08); }
        .auth-login-btn {
            background: transparent; color: rgba(0,255,255,0.8); border: 1px solid rgba(0,255,255,0.3);
            padding: 6px 14px; border-radius: 999px; font-size: 0.78rem; cursor: pointer;
            transition: all 0.2s; font-family: inherit;
        }
        .auth-login-btn:hover {
            background: rgba(0,255,255,0.15); border-color: rgba(0,255,255,0.6); color: #fff;
        }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes modalIn {
            from { opacity: 0; transform: scale(0.96) translateY(8px); }
            to   { opacity: 1; transform: scale(1) translateY(0); }
        }
        @keyframes pulse {
            0%, 100% { opacity: 0.6; }
            50% { opacity: 0.85; }
        }
        .auth-sms-btn[data-cooldown="1"] {
            animation: pulse 1.6s ease-in-out infinite;
        }

        :root {
            --bg-deep: #0A0A0B;
            --brand-cyan: #00FFFF;
            --brand-magenta: #FF00FF;
            --brand-blue: #007AFF;
            --brand-purple: #AF52DE;
            --brand-green: #34C759;
            --brand-orange: #FF9500;
        }
        body {
            background-color: var(--bg-deep);
            color: #FFFFFF;
            font-family: 'Inter', 'Noto Sans SC', sans-serif;
            overflow-x: hidden;
        }
        /* 赛博朋克网格背景 */
        .cyber-grid {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background-image:
                linear-gradient(rgba(0,255,255,0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0,255,255,0.02) 1px, transparent 1px);
            background-size: 60px 60px;
            pointer-events: none;
            z-index: 0;
        }
        .cyber-grid::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: radial-gradient(ellipse at center, transparent 0%, var(--bg-deep) 70%);
        }
        /* 导航栏 */
        .nav-link-active {
            color: #fff !important;
            font-weight: 500;
            position: relative;
        }
        .nav-link-active::after {
            content: '';
            position: absolute;
            bottom: -4px; left: 50%; transform: translateX(-50%);
            width: 70%; height: 2px;
            background: var(--brand-cyan);
            border-radius: 1px;
            box-shadow: 0 0 10px var(--brand-cyan);
        }
        .main-content { position: relative; z-index: 1; }

        /* ===== 标题样式 ===== */
        .section-title {
            font-size: 2rem;
            font-weight: 800;
            background: linear-gradient(135deg, #00FFFF, #FF00FF);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .neon-text {
            text-shadow: 0 0 10px var(--brand-cyan), 0 0 20px var(--brand-cyan);
        }

        /* ===== 四大车间卡片 ===== */
        .workshop-card {
            background: linear-gradient(135deg, rgba(20,25,35,0.95), rgba(15,20,30,0.9));
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 1.5rem;
            padding: 1.75rem;
            position: relative;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            overflow: hidden;
        }
        .workshop-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 4px;
            opacity: 0.5;
            transition: opacity 0.3s;
        }
        .icon-box {
            width: 64px; height: 64px;
            border-radius: 1.25rem;
            display: flex; align-items: center; justify-content: center;
            margin-bottom: 1rem;
            transition: all 0.3s;
        }
        .icon-box .iconify { font-size: 1.75rem !important; }
        .status-dot {
            width: 8px; height: 8px;
            border-radius: 50%;
        }
        @keyframes blink {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.4; }
        }
        .status-dot.active { animation: blink 1.5s ease-in-out infinite; }
        .agent-tag {
            display: inline-flex;
            padding: 0.25rem 0.6rem;
            border-radius: 9999px;
            font-size: 0.65rem;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.08);
            color: #9CA3AF;
        }
        .platform-tag {
            padding: 0.25rem 0.6rem;
            border-radius: 0.5rem;
            font-size: 0.65rem;
            font-weight: 500;
        }
        .stat-value {
            font-size: 2rem;
            font-weight: 800;
            line-height: 1;
        }
        /* 默认卡片缩放 */
        .workshop-card {
            transform: scale(0.95);
        }
        .workshop-card::before { opacity: 0.2; }
        .workshop-card .icon-box { transform: scale(0.85); }
        /* 高亮卡片 */
        .workshop-card.highlight,
        .workshop-card:hover {
            opacity: 1 !important;
            transform: scale(1) !important;
            z-index: 10;
        }
        .workshop-card.highlight::before,
        .workshop-card:hover::before { opacity: 1; }
        .workshop-card.highlight .icon-box,
        .workshop-card:hover .icon-box { transform: scale(1); }

        /* 各车间主题色 */
        .workshop-card.tiangong::before { background: linear-gradient(90deg, #00FFFF, #007AFF); }
        .workshop-card.tiangong.highlight,
        .workshop-card.tiangong:hover {
            border-color: rgba(0,255,255,0.3);
            box-shadow: 0 25px 50px -12px rgba(0,255,255,0.25);
        }
        .workshop-card.tiangong .icon-box { background: rgba(0,255,255,0.1); border: 1px solid rgba(0,255,255,0.2); }
        .workshop-card.tiangong .status-dot { background: #00FFFF; }

        .workshop-card.disaha::before { background: linear-gradient(90deg, #34C759, #10B981); }
        .workshop-card.disaha.highlight,
        .workshop-card.disaha:hover {
            border-color: rgba(52,199,89,0.3);
            box-shadow: 0 25px 50px -12px rgba(52,199,89,0.25);
        }
        .workshop-card.disaha .icon-box { background: rgba(52,199,89,0.1); border: 1px solid rgba(52,199,89,0.2); }
        .workshop-card.disaha .status-dot { background: #34C759; }

        .workshop-card.yingyin::before { background: linear-gradient(90deg, #FF9500, #FF6B00); }
        .workshop-card.yingyin.highlight,
        .workshop-card.yingyin:hover {
            border-color: rgba(255,149,0,0.3);
            box-shadow: 0 25px 50px -12px rgba(255,149,0,0.25);
        }
        .workshop-card.yingyin .icon-box { background: rgba(255,149,0,0.1); border: 1px solid rgba(255,149,0,0.2); }
        .workshop-card.yingyin .status-dot { background: #FF9500; }

        .workshop-card.xingyun::before { background: linear-gradient(90deg, #AF52DE, #8B5CF6); }
        .workshop-card.xingyun.highlight,
        .workshop-card.xingyun:hover {
            border-color: rgba(175,82,222,0.3);
            box-shadow: 0 25px 50px -12px rgba(175,82,222,0.25);
        }
        .workshop-card.xingyun .icon-box { background: rgba(175,82,222,0.1); border: 1px solid rgba(175,82,222,0.2); }
        .workshop-card.xingyun .status-dot { background: #AF52DE; }

        /* ===== Agent 卡片增强样式 ===== */
        .agent-card {
            position: relative;
            background: linear-gradient(145deg, rgba(25,30,55,0.95) 0%, rgba(18,22,42,0.9) 100%);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 0.875rem;
            padding: 0.625rem;
            transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            overflow: hidden;
        }
        .agent-card::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 0.875rem;
            background: radial-gradient(circle at 30% 30%, var(--card-accent) 0%, transparent 60%);
            opacity: 0;
            transition: opacity 0.4s ease;
            z-index: 0;
        }
        .agent-card:hover::before {
            opacity: 0.08;
        }
        .agent-card::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 0.875rem;
            padding: 1px;
            background: linear-gradient(145deg, var(--card-accent), transparent 50%);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            opacity: 0;
            transition: opacity 0.4s ease;
        }
        .agent-card:hover::after {
            opacity: 0.8;
        }
        .agent-card:hover {
            transform: translateY(-3px) scale(1.015);
            box-shadow: 0 15px 35px -12px var(--card-glow),
                        0 0 25px -8px var(--card-accent);
            border-color: var(--card-accent);
            background: linear-gradient(145deg, rgba(30,35,60,0.98) 0%, rgba(22,27,48,0.95) 100%);
        }
        .agent-card .agent-icon-wrap {
            position: relative;
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 0.625rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 0.5rem;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            background: linear-gradient(135deg, var(--card-accent-bg) 0%, rgba(0,0,0,0.2) 100%);
            border: 1px solid var(--card-accent);
            box-shadow: 0 0 12px var(--card-glow), inset 0 1px 0 rgba(255,255,255,0.1);
        }
        .agent-card:hover .agent-icon-wrap {
            transform: scale(1.08) rotate(-3deg);
            box-shadow: 0 0 20px var(--card-accent), inset 0 1px 0 rgba(255,255,255,0.15);
        }
        .agent-card .agent-icon-wrap .iconify {
            filter: drop-shadow(0 0 6px var(--card-accent));
            transition: filter 0.3s ease;
        }
        .agent-card:hover .agent-icon-wrap .iconify {
            filter: drop-shadow(0 0 10px var(--card-accent));
        }
        .agent-card .agent-title {
            font-size: 0.8125rem;
            font-weight: 700;
            color: #fff;
            margin-bottom: 0.25rem;
            transition: all 0.3s ease;
            position: relative;
            z-index: 1;
        }
        .agent-card:hover .agent-title {
            color: var(--card-accent);
            text-shadow: 0 0 15px var(--card-glow);
        }
        .agent-card .agent-desc {
            font-size: 0.6875rem;
            color: rgba(255,255,255,0.45);
            line-height: 1.4;
            transition: all 0.3s ease;
            position: relative;
            z-index: 1;
        }
        .agent-card:hover .agent-desc {
            color: rgba(255,255,255,0.7);
        }
            margin-bottom: 0.25rem;
            transition: color 0.3s ease;
        }
        .agent-card:hover .agent-title {
            color: var(--card-accent);
            text-shadow: 0 0 20px var(--card-glow);
        }
        .agent-card .agent-desc {
            font-size: 0.7rem;
            color: rgba(255,255,255,0.4);
            line-height: 1.4;
            transition: color 0.3s ease;
        }
        .agent-card:hover .agent-desc {
            color: rgba(255,255,255,0.6);
        }
        .agent-card .agent-tag {
            display: inline-block;
            padding: 0.125rem 0.5rem;
            border-radius: 9999px;
            font-size: 0.6rem;
            font-weight: 500;
            background: var(--card-accent-bg);
            color: var(--card-accent);
            border: 1px solid var(--card-accent);
            opacity: 0.8;
        }

        /* 各 Agent 主题色 */
        .agent-card.blue { --card-accent: #00B4D8; --card-accent-bg: rgba(0,180,216,0.15); --card-glow: rgba(0,180,216,0.4); }
        .agent-card.pink { --card-accent: #FF6B9D; --card-accent-bg: rgba(255,107,157,0.15); --card-glow: rgba(255,107,157,0.4); }
        .agent-card.orange { --card-accent: #FF9F43; --card-accent-bg: rgba(255,159,67,0.15); --card-glow: rgba(255,159,67,0.4); }
        .agent-card.cyan { --card-accent: #00D9FF; --card-accent-bg: rgba(0,217,255,0.15); --card-glow: rgba(0,217,255,0.4); }
        .agent-card.green { --card-accent: #10B981; --card-accent-bg: rgba(16,185,129,0.15); --card-glow: rgba(16,185,129,0.4); }
        .agent-card.red { --card-accent: #EF4444; --card-accent-bg: rgba(239,68,68,0.15); --card-glow: rgba(239,68,68,0.4); }
        .agent-card.violet { --card-accent: #8B5CF6; --card-accent-bg: rgba(139,92,246,0.15); --card-glow: rgba(139,92,246,0.4); }
        .agent-card.fuchsia { --card-accent: #D946EF; --card-accent-bg: rgba(217,70,239,0.15); --card-glow: rgba(217,70,239,0.4); }
        .agent-card.teal { --card-accent: #14B8A6; --card-accent-bg: rgba(20,184,166,0.15); --card-glow: rgba(20,184,166,0.4); }
        .agent-card.purple { --card-accent: #A855F7; --card-accent-bg: rgba(168,85,247,0.15); --card-glow: rgba(168,85,247,0.4); }
        .agent-card.sky { --card-accent: #0EA5E9; --card-accent-bg: rgba(14,165,233,0.15); --card-glow: rgba(14,165,233,0.4); }
        .agent-card.indigo { --card-accent: #6366F1; --card-accent-bg: rgba(99,102,241,0.15); --card-glow: rgba(99,102,241,0.4); }
        .agent-card.rose { --card-accent: #F43F5E; --card-accent-bg: rgba(244,63,94,0.15); --card-glow: rgba(244,63,94,0.4); }
        .agent-card.amber { --card-accent: #F59E0B; --card-accent-bg: rgba(245,158,11,0.15); --card-glow: rgba(245,158,11,0.4); }

        /* ===== 人机结对 ===== */
        .collab-diagram {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1.5rem;
            margin: 2rem 0;
            flex-wrap: wrap;
        }
        .collab-role {
            text-align: center;
            padding: 1rem;
            min-width: 120px;
        }
        .collab-role-icon {
            width: 64px; height: 64px;
            border-radius: 1.25rem;
            margin: 0 auto 0.5rem;
            display: flex; align-items: center; justify-content: center;
        }
        .collab-role.human .collab-role-icon {
            background: rgba(0, 122, 255, 0.2);
            border: 1px solid rgba(0, 122, 255, 0.4);
            color: #60a5fa;
        }
        .collab-role.ai .collab-role-icon {
            background: rgba(175, 82, 222, 0.2);
            border: 1px solid rgba(175, 82, 222, 0.4);
            color: #c084fc;
        }
        .collab-role-icon .iconify { font-size: 1.75rem !important; }
        .collab-role-name {
            font-size: 0.9rem;
            font-weight: 600;
            color: #fff;
            margin-bottom: 0.15rem;
        }
        .collab-role-type {
            font-size: 0.7rem;
            color: #6B7280;
        }
        .collab-connector {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.3rem;
        }
        .collab-connector-line {
            width: 50px; height: 2px;
            background: linear-gradient(90deg, var(--brand-blue), var(--brand-purple));
        }
        .collab-connector-text {
            font-size: 0.7rem;
            color: var(--brand-cyan);
            font-weight: 600;
        }

        /* ===== 人机交付协作流（统一设计） ===== */
        .collab-flow {
            margin: 2.5rem 0;
            padding: 0 2rem;
        }
        .flow-stage {
            position: relative;
            display: flex;
            gap: 1.5rem;
            margin-bottom: 1.25rem;
            align-items: stretch;
        }
        .flow-stage-indicator {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 0.6rem;
            flex-shrink: 0;
        }
        .stage-dot {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: var(--brand-cyan);
            box-shadow: 0 0 15px var(--brand-cyan);
            z-index: 5;
            flex-shrink: 0;
        }
        .stage-line {
            width: 2px;
            flex: 1;
            background: linear-gradient(to bottom, var(--brand-cyan), var(--brand-purple));
            margin-top: 0.4rem;
            min-height: 30px;
        }
        .flow-stage:last-child .stage-line {
            display: none;
        }
        .stage-content {
            flex: 1;
            background: rgba(10, 20, 30, 0.9);
            border: 1px solid rgba(0, 255, 255, 0.2);
            border-radius: 1rem;
            padding: 1rem;
            transition: all 0.3s ease;
        }
        .stage-content:hover {
            border-color: rgba(0, 255, 255, 0.5);
            transform: translateY(-2px);
            box-shadow: 0 10px 30px -10px rgba(0, 255, 255, 0.2);
        }
        .stage-header {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            margin-bottom: 0.75rem;
        }
        .stage-step {
            font-size: 0.55rem;
            padding: 0.15rem 0.4rem;
            background: rgba(0, 255, 255, 0.12);
            border: 1px solid rgba(0, 255, 255, 0.25);
            border-radius: 4px;
            color: var(--brand-cyan);
            font-weight: 600;
        }
        .stage-title {
            font-size: 0.9rem;
            font-weight: 700;
            color: #fff;
        }
        .stage-desc {
            font-size: 0.7rem;
            color: #9CA3AF;
            line-height: 1.5;
            margin-bottom: 0.75rem;
        }
        .stage-roles {
            display: flex;
            gap: 0.6rem;
            flex-wrap: wrap;
        }
        .role-chip {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.4rem 0.7rem;
            border-radius: 0.75rem;
            font-size: 0.65rem;
            font-weight: 500;
        }
        .role-chip.human {
            background: rgba(0, 122, 255, 0.12);
            border: 1px solid rgba(0, 122, 255, 0.25);
            color: #60a5fa;
        }
        .role-chip.ai {
            background: rgba(175, 82, 222, 0.12);
            border: 1px solid rgba(175, 82, 222, 0.25);
            color: #c084fc;
        }
        .role-chip .iconify {
            font-size: 0.85rem;
        }
        .stage-highlight {
            color: var(--brand-cyan);
            font-weight: 600;
        }

        /* ===== 融合卡片 ===== */
        .fusion-card {
            background: linear-gradient(135deg, rgba(0, 122, 255, 0.08), rgba(175, 82, 222, 0.08));
            border: 1px solid rgba(0, 255, 255, 0.3);
            border-radius: 1.5rem;
            padding: 1.75rem;
            position: relative;
            overflow: hidden;
            /* max-width: 900px; */
            margin: 2.5rem auto;
        }
        .fusion-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--brand-blue), var(--brand-purple), var(--brand-cyan));
            box-shadow: 0 0 20px var(--brand-cyan);
        }
        .fusion-header {
            text-align: center;
            margin-bottom: 1.5rem;
        }
        .fusion-title {
            font-size: 1.25rem;
            font-weight: 800;
            background: linear-gradient(135deg, #60a5fa, #c084fc);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 0.3rem;
        }
        .fusion-subtitle {
            font-size: 0.8rem;
            color: #9CA3AF;
        }
        .fusion-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
        }
        .fusion-item {
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 1rem;
            padding: 1rem;
            transition: all 0.3s ease;
        }
        .fusion-item:hover {
            border-color: var(--brand-cyan);
            background: rgba(0, 255, 255, 0.05);
        }
        .fusion-item-header {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            margin-bottom: 0.5rem;
        }
        .fusion-item-icon {
            width: 32px; height: 32px;
            border-radius: 0.75rem;
            display: flex; align-items: center; justify-content: center;
        }
        .fusion-item-icon.human-icon {
            background: rgba(0, 122, 255, 0.2);
            color: #60a5fa;
        }
        .fusion-item-icon.ai-icon {
            background: rgba(175, 82, 222, 0.2);
            color: #c084fc;
        }
        .fusion-item-title {
            font-size: 0.85rem;
            font-weight: 700;
            color: #fff;
        }
        .fusion-item-desc {
            font-size: 0.75rem;
            color: #9CA3AF;
            line-height: 1.4;
        }

        /* 指示器 */
        #indicators {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            margin-top: 1.5rem;
        }
        #indicators span {
            width: 8px; height: 8px;
            border-radius: 50%;
            background: rgba(255,255,255,0.3);
            cursor: pointer;
            transition: all 0.3s;
        }
        #indicators span.active {
            background: var(--brand-cyan);
            box-shadow: 0 0 10px var(--brand-cyan);
        }

        /* 响应式 */
        @media (max-width: 768px) {
            .flow-stage {
                flex-direction: column;
            }
            .flow-stage-indicator {
                flex-direction: row;
                padding-top: 0;
                padding-left: 0.25rem;
            }
            .stage-line {
                width: 20px;
                height: 2px;
                min-height: auto;
                margin-top: 0;
                margin-left: 0.4rem;
                background: linear-gradient(to right, var(--brand-cyan), var(--brand-purple));
            }
            .stage-roles {
                flex-direction: column;
            }
            .fusion-grid { grid-template-columns: 1fr; }
            .collab-diagram { flex-direction: column; }
            .collab-connector { transform: rotate(90deg); }
            .workshop-card { transform: scale(1) !important; }
            .workshop-card::before { opacity: 1 !important; }
        }

        /* ===== OpenClaw Chat Widget ===== */
        .oc-chat-widget {
            max-width: 600px;
            margin: 0 auto 2.5rem;
            background: rgba(15, 20, 30, 0.9);
            border: 1px solid rgba(0, 255, 255, 0.12);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 255, 255, 0.06);
        }
        .oc-chat-header {
            padding: 14px 18px;
            display: flex;
            align-items: center;
            gap: 12px;
            background: linear-gradient(135deg, rgba(0, 255, 255, 0.06), rgba(0, 122, 255, 0.03));
            border-bottom: 1px solid rgba(0, 255, 255, 0.08);
        }
        .oc-chat-avatar {
            width: 38px; height: 38px;
            border-radius: 12px;
            background: linear-gradient(135deg, #00FFFF, #007AFF);
            display: flex; align-items: center; justify-content: center;
            font-size: 1.2rem;
            box-shadow: 0 4px 12px rgba(0, 255, 255, 0.3);
        }
        .oc-chat-info { flex: 1; }
        .oc-chat-info h3 {
            font-size: 0.95rem; font-weight: 600; color: #fff;
            margin-bottom: 2px;
        }
        .oc-chat-info span {
            font-size: 0.7rem; color: #10b981;
            display: flex; align-items: center; gap: 5px;
        }
        .oc-chat-badge {
            padding: 4px 10px;
            background: rgba(16, 185, 129, 0.15);
            border: 1px solid rgba(16, 185, 129, 0.3);
            border-radius: 20px;
            font-size: 0.65rem;
            color: #10b981;
            font-weight: 500;
        }
        .oc-chat-messages {
            height: 240px;
            overflow-y: auto;
            padding: 16px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }
        .oc-chat-messages::-webkit-scrollbar { width: 4px; }
        .oc-chat-messages::-webkit-scrollbar-track { background: transparent; }
        .oc-chat-messages::-webkit-scrollbar-thumb { background: rgba(0, 255, 255, 0.2); border-radius: 2px; }
        .oc-message {
            display: flex; gap: 10px; max-width: 82%;
            animation: ocMessageIn 0.35s ease;
        }
        @keyframes ocMessageIn {
            from { opacity: 0; transform: translateY(8px); }
            to { opacity: 1; transform: translateY(0); }
        }
        /* 聊天"正在输入"三点动画 */
        .chat-typing { display: inline-flex; align-items: center; gap: 4px; height: 1em; }
        .chat-typing span {
            width: 6px; height: 6px; border-radius: 50%;
            background: #818cf8;
            display: inline-block;
            animation: chatTypingDot 1.2s infinite ease-in-out;
        }
        .chat-typing span:nth-child(2) { animation-delay: 0.15s; }
        .chat-typing span:nth-child(3) { animation-delay: 0.3s; }
        @keyframes chatTypingDot {
            0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
            30% { opacity: 1; transform: translateY(-3px); }
        }

        /* ====== AI 回复 markdown 样式 ====== */
        .md-content > :first-child { margin-top: 0; }
        .md-content > :last-child  { margin-bottom: 0; }
        .md-content p { margin: 0.4em 0; }
        .md-content h1, .md-content h2, .md-content h3, .md-content h4,
        .md-content h5, .md-content h6 {
            margin: 0.6em 0 0.3em; font-weight: 700; line-height: 1.3;
            color: #e0e7ff;
        }
        .md-content h1 { font-size: 1.15rem; }
        .md-content h2 { font-size: 1.05rem; }
        .md-content h3 { font-size: 0.98rem; }
        .md-content h4, .md-content h5, .md-content h6 { font-size: 0.92rem; }
        .md-content ul, .md-content ol { margin: 0.4em 0; padding-left: 1.4em; }
        .md-content li { margin: 0.15em 0; }
        .md-content strong { color: #fff; font-weight: 600; }
        .md-content em { color: #c7d2fe; font-style: italic; }
        .md-content a { color: #00FFFF; text-decoration: underline; }
        .md-content code {
            background: rgba(0,255,255,0.1); padding: 1px 6px; border-radius: 4px;
            font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 0.85em;
            color: #c7d2fe;
        }
        .md-content pre {
            background: #0a0a14; border: 1px solid rgba(0,255,255,0.15);
            border-radius: 8px; padding: 10px 12px; overflow-x: auto;
            margin: 0.5em 0;
        }
        .md-content pre code {
            background: transparent; padding: 0; color: #e0e7ff;
            font-size: 0.82em; line-height: 1.5;
        }
        .md-content blockquote {
            border-left: 3px solid rgba(0,255,255,0.4);
            padding-left: 10px; margin: 0.4em 0;
            color: rgba(255,255,255,0.7);
        }
        .md-content hr {
            border: none; border-top: 1px solid rgba(255,255,255,0.15);
            margin: 0.6em 0;
        }
        .md-content table {
            border-collapse: collapse; margin: 0.4em 0; font-size: 0.85em;
        }
        .md-content th, .md-content td {
            border: 1px solid rgba(255,255,255,0.15); padding: 4px 8px;
        }
        .md-content th { background: rgba(0,255,255,0.08); }
        .oc-message.user { align-self: flex-end; flex-direction: row-reverse; }
        .oc-message-avatar {
            width: 30px; height: 30px;
            border-radius: 8px; flex-shrink: 0;
            display: flex; align-items: center; justify-content: center;
            font-size: 0.9rem;
        }
        .oc-message.user .oc-message-avatar { background: linear-gradient(135deg, #FF6B9D, #FF9500); }
        .oc-message.bot .oc-message-avatar { background: linear-gradient(135deg, #00FFFF, #007AFF); }
        .oc-message-content {
            padding: 10px 14px;
            border-radius: 14px;
            font-size: 0.85rem; line-height: 1.5; color: #fff;
            border: 1px solid transparent;
        }
        .oc-message.bot .oc-message-content {
            background: rgba(0, 0, 0, 0.35);
            border-color: rgba(0, 255, 255, 0.12);
            border-radius: 14px 14px 14px 4px;
        }
        .oc-message.user .oc-message-content {
            background: linear-gradient(135deg, rgba(0, 255, 255, 0.15), rgba(0, 122, 255, 0.12));
            border-color: rgba(0, 255, 255, 0.25);
            border-radius: 14px 14px 4px 14px;
        }
        .oc-chat-input-area {
            padding: 12px 14px;
            border-top: 1px solid rgba(0, 255, 255, 0.08);
            display: flex; gap: 10px;
            background: rgba(0, 0, 0, 0.2);
        }
        .oc-chat-input {
            flex: 1;
            background: rgba(0, 0, 0, 0.4);
            border: 1px solid rgba(0, 255, 255, 0.15);
            border-radius: 12px;
            padding: 10px 14px;
            color: #fff; font-size: 0.85rem;
            resize: none; outline: none;
            transition: all 0.25s;
        }
        .oc-chat-input:focus {
            border-color: rgba(0, 255, 255, 0.4);
            box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.08);
        }
        .oc-chat-input::placeholder { color: rgba(255,255,255,0.35); }
        .oc-chat-send {
            width: 40px; height: 40px;
            border-radius: 12px;
            background: linear-gradient(135deg, #00FFFF, #007AFF);
            border: none; color: #000;
            font-size: 1rem; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            transition: all 0.25s;
        }
        .oc-chat-send:hover { transform: scale(1.05); box-shadow: 0 4px 15px rgba(0, 255, 255, 0.3); }
        .oc-chat-send:active { transform: scale(0.95); }