/* ============================================================
   TCL · AI Trading Agents
   设计系统 v2 —— 三层暖黑 + 红光辐射 + 信号脉冲动效
   ============================================================ */

:root {
    /* 三层暖黑 —— 让 section 之间有微妙明暗起伏 */
    --bg-low:       #0F0C0C;
    --bg:           #171313;
    --bg-high:      #1D1818;

    --surface-1:    #201A1A;
    --surface-2:    #292222;
    --border:       #3A2F2F;
    --border-soft:  #2A2222;

    --text:         #FFFFFF;
    --muted:        #BFBFBF;
    --muted-2:      #7A6E6E;

    --primary:      #F93728;
    --primary-soft: rgba(249, 55, 40, 0.5);
    --primary-glow: rgba(249, 55, 40, 0.12);
    --primary-haze: rgba(249, 55, 40, 0.04);
    --link:         #FF6B5C;

    --success:      #16A34A;
    --danger:       #EF4444;
    --warn:         #F59E0B;
    --star:         #FFC93C;
    --star-glow:    rgba(255, 201, 60, 0.32);

    --font-display: "Space Grotesk", system-ui, sans-serif;
    --font-sans:    Manrope, system-ui, sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, monospace;
    --font-cn:      "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

    /* 统一 easing */
    --ease-smooth:   cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-snap:     cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { background: var(--bg); min-height: 100%; overflow-x: hidden; }
body {
    background: transparent;
    color: var(--text);
    font-family: var(--font-sans), var(--font-cn);
    line-height: 1.55;
    min-height: 100vh;
    overflow-x: hidden;          /* 防 hero-ghost 等绝对定位元素引起的横滑 */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
/* 内容层永远在背景层之上 */
.site-nav, main, .site-foot { position: relative; z-index: 10; }

/* ============================================================
   Background layers —— 方案 B 的核心：极细栅格 + 扫光
   ============================================================ */
.bg-grid {
    position: fixed; inset: 0;
    pointer-events: none; z-index: 0;
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.022) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.022) 1px, transparent 1px);
    background-size: 80px 120px;
    background-position: 0 0;
    /* 顶部 / 底部 fade out，避免栅格出现在 nav / foot 上喧宾 */
    mask-image: linear-gradient(to bottom, transparent 0, #000 80px, #000 calc(100% - 200px), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 80px, #000 calc(100% - 200px), transparent 100%);
}
.bg-scan {
    position: fixed; inset: 0; overflow: hidden;
    pointer-events: none; z-index: 0;
}
.bg-scan::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: -360px; width: 360px;
    background: linear-gradient(to right,
        transparent,
        rgba(249, 55, 40, 0.05) 40%,
        rgba(249, 55, 40, 0.08) 50%,
        rgba(249, 55, 40, 0.05) 60%,
        transparent);
    animation: scan-sweep 14s linear infinite;
}
@keyframes scan-sweep {
    0%, 70% { left: -360px; }
    100% { left: 100vw; }
}

/* ============================================================
   4 角 crosshair —— editorial 坐标标记
   ============================================================ */
.corner-marks {
    position: fixed; inset: 0;
    pointer-events: none; z-index: 5;
}
.corner-marks > div {
    position: absolute;
    font-family: var(--font-mono); font-size: 10px;
    color: var(--muted-2); letter-spacing: 0.22em; text-transform: uppercase;
    padding: 14px 20px;
    display: flex; align-items: center; gap: 10px;
}
.corner-marks .tick {
    width: 12px; height: 12px; position: relative;
}
.corner-marks .tick::before, .corner-marks .tick::after {
    content: ""; position: absolute; background: var(--primary-soft);
}
.corner-tl .tick::before { left: 0; top: 0; width: 12px; height: 1px; }
.corner-tl .tick::after  { left: 0; top: 0; width: 1px; height: 12px; }
.corner-tr .tick::before { right: 0; top: 0; width: 12px; height: 1px; }
.corner-tr .tick::after  { right: 0; top: 0; width: 1px; height: 12px; }
.corner-bl .tick::before { left: 0; bottom: 0; width: 12px; height: 1px; }
.corner-bl .tick::after  { left: 0; bottom: 0; width: 1px; height: 12px; }
.corner-br .tick::before { right: 0; bottom: 0; width: 12px; height: 1px; }
.corner-br .tick::after  { right: 0; bottom: 0; width: 1px; height: 12px; }
.corner-tl { top: 64px; left: 0; }
.corner-tr { top: 64px; right: 0; flex-direction: row-reverse; }
.corner-bl { bottom: 0; left: 0; }
.corner-br { bottom: 0; right: 0; flex-direction: row-reverse; }

/* ============================================================
   两侧竖排 mono caps 标尺
   ============================================================ */
.side-ruler {
    position: fixed; top: 50%; transform: translateY(-50%);
    writing-mode: vertical-rl; text-orientation: mixed;
    font-family: var(--font-mono); font-size: 10px;
    color: var(--muted-2); letter-spacing: 0.36em; text-transform: uppercase;
    padding: 24px 10px;
    pointer-events: none; z-index: 3;
    white-space: nowrap;
}
.side-ruler .sep { color: var(--primary-soft); margin: 0 0.6em; }
.side-ruler-left { left: 0; }
.side-ruler-right { right: 0; transform: translateY(-50%) rotate(180deg); }

@media (max-width: 980px) {
    .side-ruler { display: none; }
    .corner-marks { display: none; }
    .bg-grid { background-size: 60px 80px; opacity: 0.7; }
}

/* ============================================================
   Hero 巨型幽灵字（背后浮水印）
   ============================================================ */
.hero-ghost {
    position: absolute;
    font-family: var(--font-display);
    font-weight: 500;
    color: var(--text);
    opacity: 0.028;
    line-height: 0.82;
    letter-spacing: -0.06em;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
.hero-ghost-left {
    top: 50%; left: -2%;
    transform: translateY(-50%);
    font-size: clamp(180px, 24vw, 340px);
}
.hero-ghost-right {
    bottom: -8%; right: -4%;
    font-size: clamp(140px, 18vw, 240px);
    opacity: 0.018;
}
/* hero-grid 单独提到 ghost 之上，避免上面 .hero-glow > * 把 ghost 也变成 relative */
.hero-glow > .hero-grid { position: relative; z-index: 1; }

/* ============================================================
   Ticker tape —— section 之间装饰带
   ============================================================ */
.ticker-tape {
    position: relative;
    border-top: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
    background: var(--bg-low);
    padding: 14px 0;
    overflow: hidden;
    font-family: var(--font-mono); font-size: 11px;
    letter-spacing: 0.28em; text-transform: uppercase;
    color: var(--muted-2);
}
.ticker-tape::before, .ticker-tape::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 80px; pointer-events: none; z-index: 2;
}
.ticker-tape::before { left: 0; background: linear-gradient(to right, var(--bg-low), transparent); }
.ticker-tape::after  { right: 0; background: linear-gradient(to left, var(--bg-low), transparent); }
.ticker-tape-track {
    display: inline-block; white-space: nowrap;
    animation: ticker-marquee 80s linear infinite;
    will-change: transform;
}
.ticker-tape-track > span { margin: 0 2.2em; }
.ticker-tape-track > .accent { color: var(--primary); }
.ticker-tape-track > .sep { color: var(--primary-soft); margin: 0 1em; }
@keyframes ticker-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .bg-scan::before, .ticker-tape-track { animation: none !important; }
}
a { color: var(--text); text-decoration: none; transition: color 0.18s var(--ease-smooth); }
a:hover { color: var(--link); }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; }
::selection { background: var(--primary); color: var(--text); }

/* ============================================================
   导航
   ============================================================ */
.site-nav {
    position: sticky; top: 0; z-index: 100;
    backdrop-filter: blur(12px) saturate(140%); -webkit-backdrop-filter: blur(12px) saturate(140%);
    background: rgba(15, 12, 12, 0.72);
    border-bottom: 1px solid var(--border-soft);
    transition: background 0.3s var(--ease-smooth), backdrop-filter 0.3s var(--ease-smooth);
}
.site-nav.is-scrolled {
    background: rgba(15, 12, 12, 0.92);
    box-shadow: 0 1px 0 var(--border-soft), 0 12px 32px -16px rgba(0, 0, 0, 0.6);
}
.site-nav-inner { max-width: 1320px; margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.site-brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: -0.015em; }
.site-brand .brand-logo { height: 30px; width: auto; display: block; object-fit: contain; animation: brand-breathe 6s ease-in-out infinite; }
@keyframes brand-breathe { 0%, 100% { opacity: 0.95; } 50% { opacity: 1; filter: drop-shadow(0 0 6px rgba(249, 55, 40, 0.18)); } }
.site-nav-links { display: flex; gap: 28px; font-size: 13px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.site-nav-links a { font-size: 12px; }
.site-nav-links a:hover { color: var(--text); }
.site-nav-cta {
    padding: 8px 18px; background: var(--primary); color: var(--text);
    font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em;
    transition: all 0.2s var(--ease-smooth);
    position: relative;
}
.site-nav-cta::after { content: ""; position: absolute; inset: 0; background: var(--primary); opacity: 0; transition: opacity 0.2s; }
.site-nav-cta:hover { box-shadow: 0 8px 24px -8px rgba(249, 55, 40, 0.6); color: var(--text); }

/* ============================================================
   通用 page wrapper
   ============================================================ */
.page { max-width: 1320px; margin: 0 auto; padding: 80px 32px 128px; }
.page-narrow { max-width: 920px; margin: 0 auto; padding: 80px 32px 128px; }
.section { max-width: 1320px; margin: 0 auto; padding: 80px 32px; }

/* Section 分隔线（顶部 1px 红→透明渐变） */
.section-divider {
    height: 1px; border: 0; background: linear-gradient(to right, var(--primary), transparent 40%);
    max-width: 1320px; margin: 0 auto;
}

/* ============================================================
   Kicker / 标题 / 正文
   ============================================================ */
.kicker {
    display: inline-flex; align-items: center; gap: 12px;
    margin-bottom: 28px;
    font-family: var(--font-mono); font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.24em;
    color: var(--primary-soft);
}
.kicker::before { content: ""; width: 28px; height: 1px; background: var(--primary); }
.kicker.kicker-muted { color: var(--muted); }
.kicker.kicker-muted::before { background: var(--muted-2); }

.h1 {
    font-family: var(--font-display);
    font-size: clamp(40px, 5.6vw, 76px);
    line-height: 1.02;
    letter-spacing: -0.035em;
    font-weight: 500;
    text-wrap: balance;
}
.h1-mega {
    /* 用于 hero —— 比 h1 稍小避免单字超大但仍有冲击力 */
    font-size: clamp(44px, 6vw, 84px);
    letter-spacing: -0.04em;
}
.h2 {
    font-family: var(--font-display);
    font-size: clamp(28px, 3.2vw, 44px);
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-weight: 500;
    margin-bottom: 16px;
    text-wrap: balance;
}
.h3 {
    font-family: var(--font-display);
    font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; font-weight: 500;
}
.eyebrow {
    margin-top: 16px;
    font-family: var(--font-mono); font-size: 13px;
    letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--muted-2);
}
.eyebrow .sep { color: var(--primary); margin: 0 4px; }
.lede {
    max-width: 540px; margin-top: 32px;
    font-size: 17px; color: var(--muted); line-height: 1.7;
    text-wrap: pretty;
}

.meta-row {
    display: flex; gap: 28px; margin-top: 28px;
    font-family: var(--font-mono); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted-2);
}
.meta-row .meta-dot { color: var(--primary); }

/* 红光辐射在 hero 背后 */
.hero-glow {
    position: relative;
    isolation: isolate;
}
.hero-glow::before {
    content: ""; position: absolute; z-index: -1;
    top: -10%; left: -10%; width: 720px; height: 720px;
    background: radial-gradient(circle at center, var(--primary-haze) 0%, transparent 60%);
    pointer-events: none;
}

/* ============================================================
   Hero 不对称布局
   ============================================================ */
.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 64px;
    align-items: center;
    min-height: 580px;
}
@media (max-width: 960px) {
    .hero-grid { grid-template-columns: 1fr; gap: 48px; min-height: auto; }
    .hero-side { order: -1; }
}

/* CTA 行 */
.cta-row { display: flex; gap: 14px; margin-top: 40px; flex-wrap: wrap; }

/* ============================================================
   按钮
   ============================================================ */
.btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 24px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    font-family: var(--font-mono); font-size: 12px;
    text-transform: uppercase; letter-spacing: 0.14em;
    transition: all 0.2s var(--ease-smooth);
    position: relative;
}
.btn .arrow { display: inline-block; transition: transform 0.2s var(--ease-smooth); }
.btn:hover { border-color: var(--text); color: var(--text); }
.btn:hover .arrow { transform: translateX(4px); }
.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
}
.btn-primary:hover {
    box-shadow: 0 12px 32px -8px rgba(249, 55, 40, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.btn-danger { border-color: var(--danger); color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: var(--text); border-color: var(--danger); }

/* ============================================================
   卡片 + 卡片网格
   ============================================================ */
.card-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    margin-top: 48px;
}
.card {
    position: relative;
    padding: 28px;
    background: var(--surface-1);
    border: 1px solid var(--border-soft);
    transition: transform 0.22s var(--ease-smooth), background 0.22s var(--ease-smooth), box-shadow 0.22s var(--ease-smooth), border-color 0.22s var(--ease-smooth);
    cursor: pointer;
    display: flex; flex-direction: column; gap: 14px;
    overflow: hidden;
}
/* 顶部红线动画 */
.card::before {
    content: ""; position: absolute; top: 0; left: 0;
    height: 2px; width: 0;
    background: linear-gradient(to right, var(--primary), transparent);
    transition: width 0.4s var(--ease-smooth);
    z-index: 1;
}
/* 右下角红光辐射 */
.card::after {
    content: ""; position: absolute; right: -80px; bottom: -80px;
    width: 200px; height: 200px;
    background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%);
    opacity: 0; transition: opacity 0.32s var(--ease-smooth);
    pointer-events: none;
}
.card:hover {
    transform: translateY(-2px);
    background: var(--surface-2);
    border-color: rgba(249, 55, 40, 0.32);
    box-shadow: 0 24px 48px -16px rgba(0, 0, 0, 0.4);
}
.card:hover::before { width: 100%; }
.card:hover::after { opacity: 1; }

.card-tag {
    font-family: var(--font-mono); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--primary);
}
.card-title {
    font-family: var(--font-display); font-size: 22px;
    letter-spacing: -0.015em; font-weight: 500;
}
.card-desc {
    color: var(--muted); font-size: 14px; line-height: 1.65;
    text-wrap: pretty;
}
.card-meta {
    margin-top: auto;
    display: flex; gap: 16px;
    font-family: var(--font-mono); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-2);
    padding-top: 16px;
    border-top: 1px solid var(--border-soft);
}

/* 信息卡（不可点击的展示卡） */
.card-static { cursor: default; }
.card-static:hover { transform: none; }
.card-static:hover::before { width: 100%; }

/* ============================================================
   Section 风格变体
   ============================================================ */
.section-low { background: var(--bg-low); }
.section-high { background: var(--bg-high); }
.section-bordered { position: relative; }
.section-bordered::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(to right, transparent 20%, var(--primary) 50%, transparent 80%);
    opacity: 0.45;
}

/* ============================================================
   表单
   ============================================================ */
.form-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; margin-top: 40px; }
.field { display: flex; flex-direction: column; gap: 8px; grid-column: span 12; }
.field-col-6 { grid-column: span 6; }
.field-col-4 { grid-column: span 4; }
.field-col-3 { grid-column: span 3; }
.field label {
    font-family: var(--font-mono); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted);
}
.field input, .field select, .field textarea {
    padding: 13px 16px;
    background: var(--surface-1);
    border: 1px solid var(--border-soft);
    color: var(--text);
    font-family: var(--font-mono); font-size: 14px;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(249, 55, 40, 0.16);
}
.field-hint { font-size: 12px; color: var(--muted-2); }

/* ============================================================
   数据展示卡（仪表盘）
   ============================================================ */
.metric-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1px;
    background: var(--border-soft);
    border: 1px solid var(--border-soft);
    margin-top: 32px;
}
.metric { padding: 24px; background: var(--bg); position: relative; }
.metric-label {
    font-family: var(--font-mono); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted);
}
.metric-value {
    margin-top: 12px;
    font-family: var(--font-display); font-size: 32px;
    letter-spacing: -0.02em;
}
.metric-sub { margin-top: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--muted-2); letter-spacing: 0.06em; }
.metric-positive { color: var(--success); }
.metric-negative { color: var(--danger); }

/* ============================================================
   状态徽章
   ============================================================ */
.badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 12px;
    font-family: var(--font-mono); font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.12em;
}
.badge-running { background: rgba(22, 163, 74, 0.14); color: var(--success); border: 1px solid rgba(22, 163, 74, 0.36); }
.badge-stopped { background: var(--surface-1); color: var(--muted); border: 1px solid var(--border); }
.badge-ended { background: rgba(245, 158, 11, 0.12); color: var(--warn); border: 1px solid rgba(245, 158, 11, 0.32); }
.badge-error { background: rgba(239, 68, 68, 0.14); color: var(--danger); border: 1px solid rgba(239, 68, 68, 0.36); }
.badge-dot { width: 6px; height: 6px; border-radius: 50%; }
.badge-running .badge-dot {
    background: var(--success);
    box-shadow: 0 0 10px var(--success);
    animation: pulse-dot 2s infinite var(--ease-smooth);
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ============================================================
   表格
   ============================================================ */
.data-table {
    width: 100%; border-collapse: collapse;
    margin-top: 24px;
    font-family: var(--font-mono); font-size: 13px;
}
.data-table th {
    padding: 12px 16px; text-align: left;
    background: var(--surface-1);
    font-weight: 500; font-size: 11px;
    text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted);
    border-bottom: 1px solid var(--border);
}
.data-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text);
}
.data-table tr { transition: background 0.15s; }
.data-table tr:hover td { background: var(--surface-1); }

/* ============================================================
   Prose（Markdown）
   ============================================================ */
.prose { max-width: 720px; margin-top: 32px; font-size: 16px; line-height: 1.75; color: var(--text); }
.prose h1, .prose h2, .prose h3 { font-family: var(--font-display); letter-spacing: -0.015em; margin: 40px 0 16px; font-weight: 500; }
.prose h2 { font-size: 26px; padding-bottom: 12px; border-bottom: 1px solid var(--border-soft); }
.prose h3 { font-size: 19px; }
.prose p { margin: 16px 0; color: var(--text); }
.prose ul, .prose ol { margin: 16px 0; padding-left: 24px; }
.prose li { margin: 8px 0; color: var(--text); }
.prose strong { color: var(--primary); font-weight: 600; }
.prose code { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface-1); padding: 2px 6px; }
.prose a { color: var(--link); border-bottom: 1px solid currentColor; }
.prose blockquote { border-left: 2px solid var(--primary); padding: 4px 0 4px 20px; margin: 24px 0; color: var(--muted); }

/* ============================================================
   提示框
   ============================================================ */
.alert {
    padding: 20px 24px;
    border: 1px solid;
    font-family: var(--font-mono); font-size: 13px;
    line-height: 1.65;
    margin: 24px 0;
}
.alert-info { background: rgba(255, 107, 92, 0.08); border-color: rgba(255, 107, 92, 0.32); color: var(--link); }
.alert-warn { background: rgba(245, 158, 11, 0.08); border-color: rgba(245, 158, 11, 0.32); color: var(--warn); }
.alert-danger { background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.36); color: var(--danger); }
.alert-success { background: rgba(22, 163, 74, 0.08); border-color: rgba(22, 163, 74, 0.32); color: var(--success); }

/* ============================================================
   Empty state
   ============================================================ */
.empty-state {
    padding: 64px 32px;
    border: 1px dashed var(--border);
    text-align: center;
    color: var(--muted);
    margin-top: 48px;
    background: rgba(0, 0, 0, 0.18);
}
.empty-state .em-title { font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted-2); }
.empty-state .em-detail { margin-top: 8px; font-size: 14px; }

/* ============================================================
   页脚
   ============================================================ */
.site-foot { margin-top: 96px; padding: 64px 32px 32px; background: var(--bg-low); border-top: 1px solid var(--border-soft); position: relative; }
.site-foot::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(to right, transparent 30%, var(--primary) 50%, transparent 70%);
    opacity: 0.4;
}
.site-foot-inner { max-width: 1320px; margin: 0 auto; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 64px; }
.foot-brand h4 { font-family: var(--font-display); font-size: 20px; margin-bottom: 12px; }
.foot-brand p { color: var(--muted); font-size: 14px; max-width: 320px; line-height: 1.65; }
.foot-col h5 { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); margin-bottom: 16px; }
.foot-col a { display: block; padding: 6px 0; color: var(--muted); font-size: 14px; }
.foot-col a:hover { color: var(--text); }
.foot-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border-soft); font-family: var(--font-mono); font-size: 11px; color: var(--muted-2); letter-spacing: 0.08em; display: flex; justify-content: space-between; }

/* === 汉堡按钮基础样式（必须放在 @media 前，否则源序后置会覆盖 mobile 的 display:inline-flex） === */
.site-nav-hamburger {
    display: none;
    background: transparent; border: 1px solid var(--border-soft);
    width: 38px; height: 38px;
    padding: 0;
    align-items: center; justify-content: center;
    flex-direction: column; gap: 4px;
    cursor: pointer;
    transition: border-color 0.18s var(--ease-smooth);
}
.site-nav-hamburger:hover { border-color: var(--primary-soft); }
.site-nav-hamburger span {
    display: block; width: 18px; height: 1.5px; background: var(--text);
    transition: transform 0.2s var(--ease-smooth), opacity 0.2s var(--ease-smooth);
}
.site-nav.is-open .site-nav-hamburger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.site-nav.is-open .site-nav-hamburger span:nth-child(2) { opacity: 0; }
.site-nav.is-open .site-nav-hamburger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 720px) {
    .foot-grid { grid-template-columns: 1fr; gap: 32px; }
    .field-col-6, .field-col-4, .field-col-3 { grid-column: span 12; }

    /* === 移动端导航：汉堡 + 抽屉 === */
    .site-nav-inner { padding: 12px 16px; gap: 10px; }
    .site-brand { font-size: 13px; gap: 8px; }
    .site-brand .brand-logo { height: 22px; }
    .site-brand span { display: none; }    /* 极窄屏只留 logo */
    .site-nav-hamburger { display: inline-flex !important; }

    /* 4 个 nav 链接收进抽屉；钱包 / 登录 CTA 始终外露 */
    .site-nav-links { display: none; }
    /* 钱包 chip + 断开按钮在移动端缩小但保持可见 */
    .site-nav-user-wrap { gap: 4px; }
    .site-nav-cta-user { padding: 6px 12px; font-size: 11px; }
    .site-nav-disconnect { padding: 6px 10px; font-size: 11px; }
    .site-nav-inner > .site-nav-cta { padding: 6px 12px; font-size: 11px; }

    /* 抽屉打开后 4 链接堆叠在 nav 下方 */
    .site-nav.is-open .site-nav-inner { flex-wrap: wrap; }
    .site-nav.is-open .site-nav-links {
        display: flex; flex-direction: column;
        gap: 0; width: 100%;
        padding: 12px 0 4px;
        border-top: 1px solid var(--border-soft);
        margin-top: 8px;
    }
    .site-nav.is-open .site-nav-links a {
        padding: 14px 4px;
        font-size: 13px;
        border-bottom: 1px solid var(--border-soft);
    }
    .site-nav.is-open .site-nav-links a:last-child { border-bottom: none; }

    /* === 主容器内边距收紧 === */
    .page, .page-narrow, .section {
        padding-left: 16px; padding-right: 16px;
        padding-top: 48px; padding-bottom: 80px;
    }

    /* === 数据表横向滚动（保留表格语义，不破 colspan） === */
    .data-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    /* === Metric 卡 2 列 === */
    .metric-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .metric-value { font-size: 22px; }
}

/* 汉堡按钮基础样式已移到 @media (max-width: 720px) 之前，见上面 */

/* ============================================================
   Hero 右侧 Manifesto Rotator（产品哲学展板）
   ============================================================ */
.manifesto {
    position: relative;
    background: var(--surface-1);
    border: 1px solid var(--border-soft);
    padding: 36px 36px 28px;
    font-family: var(--font-mono);
    overflow: hidden;
    isolation: isolate;
    min-height: 460px;
    display: flex; flex-direction: column;
}
.manifesto::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(to right, transparent, var(--primary), transparent);
    background-size: 50% 100%; background-repeat: no-repeat;
    animation: ticker-scan 4s linear infinite;
    z-index: 2;
}
.manifesto::after {
    /* 红光辐射在角落，呼吸 */
    content: ""; position: absolute; z-index: -1;
    right: -120px; bottom: -120px; width: 280px; height: 280px;
    background: radial-gradient(circle, var(--primary-glow), transparent 65%);
    animation: glow-breathe 8s ease-in-out infinite;
}
@keyframes glow-breathe {
    0%, 100% { opacity: 0.45; transform: scale(1); }
    50% { opacity: 0.9; transform: scale(1.12); }
}

.manifesto-head {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 11px; color: var(--muted); letter-spacing: 0.22em; text-transform: uppercase;
}
.manifesto-head .index { color: var(--primary); font-weight: 500; letter-spacing: 0.08em; }

.manifesto-body {
    flex: 1; display: flex; flex-direction: column; justify-content: center;
    margin: 40px 0;
}

.manifesto-quote {
    position: relative;
    animation: quote-in 0.7s var(--ease-smooth);
}
.manifesto-quote.is-leaving { animation: quote-out 0.5s var(--ease-smooth) forwards; }
@keyframes quote-in {
    from { opacity: 0; transform: translateY(10px); filter: blur(4px); }
    to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes quote-out {
    to { opacity: 0; transform: translateY(-10px); filter: blur(4px); }
}

.manifesto-en {
    font-family: var(--font-display);
    font-size: clamp(32px, 3.4vw, 52px);
    line-height: 1.05;
    letter-spacing: -0.025em;
    font-weight: 500;
    color: var(--text);
    text-wrap: balance;
}
.manifesto-en .accent { color: var(--primary); }
.manifesto-cn {
    margin-top: 24px;
    font-family: var(--font-cn), var(--font-sans);
    font-size: 18px;
    color: var(--muted);
    letter-spacing: 0.02em;
}

.manifesto-foot {
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-2);
    display: flex; align-items: center; gap: 16px;
}
.manifesto-foot .label { white-space: nowrap; }
.manifesto-foot .progress {
    position: relative; flex: 1; height: 2px; background: var(--border-soft); overflow: hidden;
}
.manifesto-foot .progress .bar {
    position: absolute; left: 0; top: 0; height: 100%; width: 0%;
    background: var(--primary); transition: width 0.1s linear;
}

@media (max-width: 720px) {
    .manifesto { min-height: 360px; padding: 28px; }
}

/* ============================================================
   旧 Activity Log（保留兼容；不再使用）
   ============================================================ */
.activity-log {
    position: relative;
    background: var(--surface-1);
    border: 1px solid var(--border-soft);
    padding: 24px;
    font-family: var(--font-mono);
    overflow: hidden;
    isolation: isolate;
    min-height: 460px;
    display: flex; flex-direction: column;
}
.activity-log::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(to right, transparent, var(--primary), transparent);
    background-size: 50% 100%; background-repeat: no-repeat;
    animation: ticker-scan 4s linear infinite;
    z-index: 2;
}

.activity-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 4px;
    font-size: 11px; color: var(--muted); letter-spacing: 0.16em; text-transform: uppercase;
}
.activity-head .agent-status {
    display: inline-flex; align-items: center; gap: 6px; color: var(--success);
}
.activity-head .agent-status .dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--success);
    box-shadow: 0 0 8px var(--success);
    animation: pulse-dot 1.6s infinite;
}
.activity-sub {
    margin-bottom: 18px; padding-bottom: 16px;
    border-bottom: 1px solid var(--border-soft);
    font-size: 11px; color: var(--muted-2); letter-spacing: 0.08em;
}
.activity-sub .symbol { color: var(--text); margin-right: 8px; }

.activity-list {
    flex: 1; display: flex; flex-direction: column; gap: 10px;
    overflow: hidden; position: relative;
}
.activity-item {
    display: grid; grid-template-columns: 60px 70px 1fr;
    gap: 12px; align-items: center;
    font-size: 12px; line-height: 1.4;
    animation: row-enter 0.5s var(--ease-smooth);
}
@keyframes row-enter {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.activity-item.fading-out { animation: row-fade-out 0.4s var(--ease-smooth) forwards; }
@keyframes row-fade-out {
    to { opacity: 0; max-height: 0; padding: 0; margin: 0; }
}
.activity-time { color: var(--muted-2); font-size: 11px; letter-spacing: 0.04em; }
.activity-type {
    font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500;
}
.activity-detail { color: var(--text); font-size: 12px; }
.activity-detail .num { font-feature-settings: "tnum"; }

/* 事件类型配色 */
.t-signal   { color: var(--primary); }
.t-trigger  { color: var(--warn); }
.t-review   { color: var(--muted); }
.t-placed   { color: var(--link); }
.t-filled   { color: var(--success); }
.t-closed   { color: #67E8F9; }   /* cyan */
.t-profit   { color: var(--success); }
.t-loss     { color: var(--danger); }
.t-rebalance{ color: var(--star); }

/* 底部 latency bar */
.latency-bar {
    margin-top: 16px; padding-top: 16px;
    border-top: 1px solid var(--border-soft);
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center;
    font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-2);
}
.latency-bar .track {
    position: relative; height: 1px; background: var(--border-soft); overflow: visible;
}
.latency-bar .track::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
    background: linear-gradient(to right, transparent, var(--primary-soft), transparent);
}
.latency-bar .pulse {
    position: absolute; top: 50%; left: 0;
    width: 6px; height: 6px; margin: -3px 0 0 -3px;
    border-radius: 50%; background: var(--primary);
    box-shadow: 0 0 10px var(--primary);
    animation: pulse-travel 3s var(--ease-smooth) infinite;
}
.latency-bar .ms { color: var(--text); font-family: var(--font-mono); font-weight: 500; padding: 0 8px; }

/* ============================================================
   旧 live-ticker（保留兼容，万一别处引用）
   ============================================================ */
.live-ticker {
    position: relative;
    background: var(--surface-1);
    border: 1px solid var(--border-soft);
    padding: 24px;
    font-family: var(--font-mono);
    overflow: hidden;
    isolation: isolate;
}
.live-ticker::before {
    /* 顶部 1px 红→透明扫光 */
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(to right, transparent, var(--primary), transparent);
    background-size: 50% 100%; background-repeat: no-repeat;
    animation: ticker-scan 4s linear infinite;
}
@keyframes ticker-scan {
    0% { background-position: -50% 0; }
    100% { background-position: 150% 0; }
}
.live-ticker-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; font-size: 11px; color: var(--muted); letter-spacing: 0.16em; text-transform: uppercase; }
.live-ticker-head .ticker-status { display: inline-flex; align-items: center; gap: 6px; color: var(--success); }
.live-ticker-head .ticker-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px var(--success); animation: pulse-dot 1.6s infinite; }
.live-ticker-symbol {
    font-family: var(--font-display); font-size: 28px; font-weight: 500; letter-spacing: -0.01em;
    margin-bottom: 2px;
}
.live-ticker-price {
    font-family: var(--font-display); font-size: 36px; font-weight: 500;
    letter-spacing: -0.02em; color: var(--text);
    margin-bottom: 16px;
}
.ticker-book { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; font-size: 11px; line-height: 1.9; }
.ticker-book .book-col-head { color: var(--muted-2); letter-spacing: 0.14em; text-transform: uppercase; font-size: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border-soft); margin-bottom: 6px; }
.ticker-book .price-ask { color: var(--danger); }
.ticker-book .price-bid { color: var(--success); }
.ticker-book .qty { color: var(--muted-2); text-align: right; }
.ticker-book .spread-row { text-align: center; padding: 8px 0; border-top: 1px dashed var(--border-soft); border-bottom: 1px dashed var(--border-soft); color: var(--primary); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; margin: 6px 0; }

.signal-bar { position: relative; height: 32px; margin-top: 20px; overflow: hidden; }
.signal-bar::before {
    content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
    background: linear-gradient(to right, transparent, var(--primary-soft), transparent);
}
.signal-bar .pulse {
    position: absolute; top: 50%; left: 0;
    width: 8px; height: 8px; margin: -4px 0 0 -4px;
    border-radius: 50%; background: var(--primary);
    box-shadow: 0 0 12px var(--primary);
    animation: pulse-travel 3s var(--ease-smooth) infinite;
}
@keyframes pulse-travel {
    0% { left: 0%; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}
.signal-bar .label-left, .signal-bar .label-right {
    position: absolute; top: 50%; transform: translateY(-50%);
    font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-2);
}
.signal-bar .label-left { left: 0; }
.signal-bar .label-right { right: 0; }

/* ============================================================
   入场动画：Hero 阶梯 fade-up
   ============================================================ */
@keyframes fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-up { opacity: 0; animation: fade-up 0.7s var(--ease-smooth) forwards; }
.fade-up-1 { animation-delay: 0.05s; }
.fade-up-2 { animation-delay: 0.18s; }
.fade-up-3 { animation-delay: 0.30s; }
.fade-up-4 { animation-delay: 0.42s; }
.fade-up-5 { animation-delay: 0.54s; }

@media (prefers-reduced-motion: reduce) {
    .fade-up, .live-ticker::before, .signal-bar .pulse,
    .brand-logo, .badge-running .badge-dot { animation: none !important; }
    .fade-up { opacity: 1; transform: none; }
}

/* ============================================================
 * Phase 2 钱包登录 / 个人中心
 * ============================================================ */
.login-page {
    min-height: calc(100vh - 200px);
    display: grid;
    place-items: center;
    padding: 80px 24px;
}
.login-card {
    max-width: 600px;
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 56px 48px;
    position: relative;
    overflow: hidden;
}
.login-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, color-mix(in srgb, var(--primary) 18%, transparent), transparent 60%);
    pointer-events: none;
}
.login-card .h1 {
    font-size: clamp(36px, 5vw, 52px);
    line-height: 1.05;
    margin-top: 16px;
}
.login-card .accent {
    color: var(--primary);
}
.login-blurb {
    color: var(--muted);
    font-size: 16px;
    line-height: 1.7;
    margin: 24px 0 32px;
}
.btn-large {
    appearance: none;
    border: 1px solid var(--primary);
    background: var(--primary);
    color: var(--text);
    font: 600 18px / 1.2 "Space Grotesk", system-ui;
    padding: 22px 36px;
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    letter-spacing: 0.5px;
    transition: filter 0.18s, transform 0.18s;
}
.btn-large:hover:not(:disabled) {
    filter: brightness(1.1);
    transform: translateY(-1px);
}
.btn-large:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.btn-large .dot {
    width: 8px; height: 8px; background: var(--text); border-radius: 50%;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--text) 40%, transparent);
}
.btn-large .arrow {
    margin-left: auto;
}
.login-status {
    font: 500 13px/1.4 "JetBrains Mono", monospace;
    padding: 14px 18px;
    margin: 24px 0;
    min-height: 48px;
    display: flex;
    align-items: center;
    border: 1px solid transparent;
}
.login-status:empty {
    display: none;
}
.login-status.info {
    border-color: color-mix(in srgb, var(--primary) 40%, transparent);
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    color: var(--text);
}
.login-status.ok {
    border-color: color-mix(in srgb, #4ade80 50%, transparent);
    background: color-mix(in srgb, #4ade80 8%, transparent);
    color: #4ade80;
}
.login-status.err {
    border-color: color-mix(in srgb, #ef4444 50%, transparent);
    background: color-mix(in srgb, #ef4444 8%, transparent);
    color: #ef4444;
}
.login-note {
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid var(--border);
    display: grid;
    gap: 12px;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
}
.login-note strong {
    color: var(--text);
    font-weight: 500;
}
.login-already {
    margin-top: 24px;
    padding: 14px 18px;
    border-left: 2px solid var(--primary);
    background: color-mix(in srgb, var(--primary) 6%, transparent);
    font-size: 14px;
}
.login-already code {
    background: var(--surface-2, rgba(255,255,255,0.05));
    padding: 2px 8px;
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
}

/* nav 钱包状态指示 */
.site-nav-cta-user {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "JetBrains Mono", monospace;
    font-size: 13px;
    letter-spacing: 0.5px;
}
.user-dot {
    width: 8px; height: 8px;
    background: #4ade80;
    border-radius: 50%;
    box-shadow: 0 0 0 3px color-mix(in srgb, #4ade80 25%, transparent);
    animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse {
    0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, #4ade80 25%, transparent); }
    50% { box-shadow: 0 0 0 6px color-mix(in srgb, #4ade80 10%, transparent); }
}

/* 个人中心 */
.me-page {
    max-width: 960px;
    margin: 64px auto;
    padding: 0 24px;
}
.me-balance-card {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 40px;
    margin: 32px 0;
    position: relative;
}
.me-balance-card .label {
    font: 400 11px / 1.4 "JetBrains Mono", monospace;
    letter-spacing: 2px;
    color: var(--muted);
    text-transform: uppercase;
}
.me-balance-card .value {
    font: 500 56px / 1 "Space Grotesk", system-ui;
    margin-top: 8px;
    letter-spacing: -1px;
}
.me-balance-card .unit {
    font-size: 24px;
    color: var(--muted);
    margin-left: 8px;
}
.me-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 32px 0;
}
@media (max-width: 720px) {
    .me-grid { grid-template-columns: 1fr; }
}
.me-card {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 28px;
}
.me-card h3 {
    font-size: 13px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 16px;
}
.me-logs-table {
    width: 100%;
    border-collapse: collapse;
    font-family: "JetBrains Mono", monospace;
    font-size: 13px;
}
.me-logs-table th {
    text-align: left;
    color: var(--muted);
    font-weight: 400;
    padding: 12px 8px;
    border-bottom: 1px solid var(--border);
}
.me-logs-table td {
    padding: 10px 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}

/* 钱包芯片 + 断开按钮组合 */
.site-nav-user-wrap {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    border: 1px solid var(--border);
    overflow: hidden;
}
.site-nav-user-wrap .site-nav-cta-user {
    border: 0 !important;
    background: transparent;
    border-right: 1px solid var(--border) !important;
}
.site-nav-disconnect {
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    background: transparent;
    color: var(--muted);
    font: 500 12px / 1 "JetBrains Mono", monospace;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: background 0.18s, color 0.18s;
    border-left: 0;
}
.site-nav-disconnect:hover {
    background: color-mix(in srgb, #ef4444 12%, transparent);
    color: #ef4444;
}