/* ==========================================================================
   爬虫 · 逆向 / 震撼② / AI / 财务 的专属样式（颜色一律取主题变量，见 style.css 顶部）
   ========================================================================== */

/* ===== 逆向：代码面板 ===== */
.re-panel {
    position: absolute; left: 6vw; top: 17vh; width: min(54vw, 860px); z-index: 3;
    border: 1.5px solid var(--ink-dim); background: color-mix(in srgb, var(--card) 92%, transparent);
    font-family: var(--font-mono); opacity: 0; transition: background-color 0.5s, border-color 0.5s;
    box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.6);
}
.re-panel.dissolve { background: transparent; border-color: transparent; box-shadow: none; }
.re-head { display: flex; justify-content: space-between; padding: 8px 14px; border-bottom: 1px solid var(--ink-faint); font-size: 12px; letter-spacing: 0.12em; color: var(--ink-dim); }
.re-tag { color: var(--amber); }
.re-code { padding: 16px 14px 18px; font-size: clamp(11px, 0.95vw, 15px); line-height: 1.9; overflow: hidden; }
.re-row { white-space: nowrap; }
.re-row i { display: inline-block; width: 2.6em; color: var(--ink-faint); font-style: normal; }
.re-row span { display: inline-block; white-space: pre; min-width: 0.6em; }
.re-row span.obf { color: var(--ink-dim); }
.re-row span.hot { color: var(--amber); text-shadow: 0 0 8px var(--amber); }
.re-row span.ok { color: var(--text); }
.re-row span.kw { color: var(--accent); }
.re-row span.str { color: var(--amber); }
.re-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px; border-top: 1px solid var(--ink-faint); }
.re-slide { display: flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: 0.14em; color: var(--ink-dim); flex: 1; }
.re-slide input { flex: 1; accent-color: var(--run); cursor: ew-resize; }
.re-exec {
    padding: 7px 14px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em;
    color: var(--bg); background: var(--run); box-shadow: 0 0 18px var(--glow); animation: re-pulse 1.4s ease-in-out infinite;
}
@keyframes re-pulse { 50% { box-shadow: 0 0 4px var(--glow); } }

/* 震撼②坍缩成的白点 */
.singularity {
    position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; z-index: 6;
    background: #fff; box-shadow: 0 0 18px #fff, 0 0 46px var(--glow), 0 0 90px var(--glow); pointer-events: none;
}

/* ===== AI：回答行 ===== */
.ai-answer {
    position: absolute; left: 50%; bottom: 16vh; transform: translateX(-50%); z-index: 3;
    display: flex; gap: 14px; align-items: baseline; font-family: var(--font-mono); font-size: 16px; color: var(--ink);
    pointer-events: none; white-space: nowrap;
}
.ai-q { color: var(--ink-dim); }
.ai-a { display: inline-flex; gap: 2px; font-family: var(--font-fs); font-size: 22px; color: var(--accent); }
.ai-token { display: inline-block; text-shadow: 0 0 12px var(--glow); }

/* ===== 财务：铅笔虚线草图 ===== */
.pencil .ln-dim, .pencil .ln-faint, .pencil .ln { stroke-dasharray: 6 4; }
.fi-ok { fill: var(--run); }
.fi-btn:hover rect { fill: var(--ink-faint); }
.fi-candle.hit:hover path, .fi-candle.hit:hover rect { stroke: var(--run); }
.fi-cursor {
    position: absolute; left: 50%; top: 77vh; transform: translateX(14px); z-index: 3;
    font-family: var(--font-fs); font-size: 18px; letter-spacing: 0.3em; color: var(--ink); opacity: 0;
}

/* 窄屏：代码面板占满宽度 */
@media (max-width: 900px) {
    .re-panel { left: 4vw; width: 92vw; top: 14vh; }
    .ai-answer { bottom: 22vh; font-size: 13px; }
}