/* 工具 03 · 鼠标抖动器
   独立视觉：示波器式深色控制台 + 荧光绿轨迹舞台 + 左侧参数舱 / 右侧事件时间轴。 */
.mj {
    --a1: #1d8b68; --a1b: #7aa33a; --a1s: #e4f2ea; --a1i: #146c51;
    --a2: #6ef0ad; --a2b: #c9e86a; --a2s: rgba(110, 240, 173, .14); --a2i: #95f7c4;
    --h15-h1: clamp(29px, 3.5vw, 40px);
}
.mj .mj-h1 { font-weight: 800; letter-spacing: -.02em; }
.mj-hero {
    border-color: #1b3a2c;
    background:
        repeating-linear-gradient(0deg, transparent 0 3px, rgba(110, 240, 173, .025) 3px 4px),
        radial-gradient(640px 240px at 86% -10%, rgba(110, 240, 173, .16), transparent 72%),
        linear-gradient(115deg, #0d1a16 0%, #13261f 100%);
    color: #dff5e8;
}
.mj-hero::before { background: repeating-linear-gradient(180deg, #6ef0ad 0 10px, transparent 10px 18px); }
.mj-hero .h15-h1, .mj-hero .h15-sub, .mj-hero .h15-eyebrow, .mj-hero .h15-hero-meta { color: #dff5e8; }
.mj-hero .h15-sub strong { color: #a6f5c8; }
.mj-hero .h15-eyebrow { background: rgba(110, 240, 173, .09); border-color: rgba(110, 240, 173, .3); }
.mj-hero .h15-hero-meta { border-top-color: rgba(110, 240, 173, .2); }
.mj-hero .h15-btn { background: #6ef0ad; color: #0a1a13; }
.mj-hero .h15-btn--ghost { background: transparent; color: #dff5e8; border-color: rgba(223, 245, 232, .35); }
.mj-hero .h15-btn--ghost:hover { background: rgba(110, 240, 173, .12); }
:root[data-theme="dark"] .mj .mj-hero { background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(110, 240, 173, .02) 3px 4px), linear-gradient(115deg, #08110e 0%, #0d1b16 100%); }
:root[data-theme="dark"] .mj .mj-hero .h15-btn { color: #0a1a13; }

.mj-quick { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.mj-go { min-width: 148px; font-family: var(--h15-font-num); }
.mj-lamp { display: inline-flex; align-items: center; gap: 7px; font-family: var(--h15-font-num); font-size: var(--h15-fs-12); color: #b9d8c7; }
.mj-lamp i { width: 10px; height: 10px; border-radius: 50%; background: #6b7d73; box-shadow: 0 0 0 3px rgba(107, 125, 115, .2); }
.mj-lamp.is-on i { background: #6ef0ad; box-shadow: 0 0 12px #6ef0ad; }
.mj-lamp.is-pause i { background: #e9c46a; box-shadow: 0 0 10px rgba(233, 196, 106, .7); }
.mj-wake {
    position: absolute; right: 30px; top: 32px; padding: 4px 11px;
    border: 1px solid rgba(110, 240, 173, .3); border-radius: 999px;
    font-family: var(--h15-font-num); font-size: var(--h15-fs-11); color: #a6f5c8;
    background: rgba(110, 240, 173, .07);
}
@media (max-width: 620px) { .mj-wake { display: none; } }

.mj-desk { display: grid; grid-template-columns: 262px minmax(0, 1fr) 244px; gap: 16px; align-items: start; }
@media (max-width: 1080px) { .mj-desk { grid-template-columns: 1fr 1fr; } .mj-stage-wrap { grid-column: 1 / -1; grid-row: 1; } }
@media (max-width: 700px) { .mj-desk { grid-template-columns: 1fr; } .mj-stage-wrap { grid-column: auto; grid-row: auto; } }
.mj-console .h15-note { margin-top: 16px; }
.mj-esc-label { display: flex; align-items: center; gap: 7px; margin: 12px 0 6px; }
.mj-esc-label .h15-select { width: 110px; padding: 5px 8px; }

.mj-stage-wrap { padding: 14px; border: 1px solid #224035; border-radius: 16px; background: #0e1a16; box-shadow: var(--h15-shadow); }
.mj-stage-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; color: #9ac5ae; font-size: var(--h15-fs-12); font-weight: 700; }
.mj-stage-clock { color: #6ef0ad; font-size: var(--h15-fs-16); letter-spacing: .04em; }
.mj-stage { position: relative; height: 330px; border: 1px solid #244538; border-radius: 10px; overflow: hidden; background: #09130f; }
.mj-stage canvas { display: block; width: 100%; height: 100%; }
.mj-stage-hint { position: absolute; inset: 0; display: grid; place-items: center; color: #87b79c; font-size: var(--h15-fs-13); pointer-events: none; }
.mj-stage-hint[hidden] { display: none; }
.mj-stage-hint span { padding: 8px 16px; border: 1px dashed #37604a; border-radius: 999px; background: rgba(9, 19, 15, .72); }
.mj-crosshair { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 1px solid rgba(110, 240, 173, .22); border-radius: 50%; pointer-events: none; }
.mj-kpis { margin-top: 12px; gap: 8px; }
.mj-kpis .h15-kpi { background: #14231d; border-color: #244034; }
.mj-kpis .h15-kpi-v { color: #6ef0ad; font-size: var(--h15-fs-18); }
.mj-kpis .h15-kpi-l { color: #8fb6a0; }
:root[data-theme="dark"] .mj .mj-kpis .h15-kpi { background: #14231d; border-color: #244034; }
:root[data-theme="dark"] .mj .mj-kpis .h15-kpi-l { color: #8fb6a0; }

.mj-log { list-style: none; margin: 0; padding: 0 0 0 12px; max-height: 330px; overflow: auto; border-left: 1px solid var(--h15-line); }
.mj-log li { position: relative; padding: 5px 0 5px 10px; font-size: var(--h15-fs-12); color: var(--h15-ink-2); line-height: 1.6; border-bottom: 1px dashed var(--h15-line-2); }
.mj-log li::before { content: ""; position: absolute; left: -16px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--h15-accent); }
.mj-log li time { display: block; font-family: var(--h15-font-num); font-size: var(--h15-fs-11); color: var(--h15-ink-3); }
.mj-log-empty { color: var(--h15-ink-3) !important; }
.mj-logpanel .h15-btn-row { margin-top: 14px; }

.mj-limits { margin-top: 20px; }
.mj-limit { padding: 15px 16px; border-radius: 12px; border: 1px solid var(--h15-line); background: var(--h15-card-2); }
.mj-limit .h15-h3 { color: var(--h15-accent-ink); }
.mj-limit .h15-lead { margin: 0; line-height: 1.85; }
.mj-faq .h15-faq-item { border-left: 3px solid var(--h15-accent-soft); }
.mj-report-pre { margin: 0; white-space: pre-wrap; font-family: var(--h15-font-num); font-size: var(--h15-fs-13); line-height: 1.8; }