/* ============================================================
   pearl-workbench.css —— P2 批次：工作台/概览页
   2026-11-02 UI 改造第 5 批/共 5 批
   改动原因：珍珠球/星图做成「工作台/概览」页（用户拍板动效分区）。
            参考 scaffold-master instruments.css 的珍珠球/刻度环/星图语汇
            摘取改写到 .wb-* 命名空间（未整段照搬 Vue 组件类名）。
   影响范围：仅 #tab-workbench 内部；动画只动 transform/opacity，
            .wb-paused 统一暂停（IntersectionObserver + visibilitychange），
            prefers-reduced-motion 由 pearl.css 全局降级。
   ============================================================ */

.wb-root { display: flex; flex-direction: column; gap: 14px; }

/* ── 大数字读数行（56px 显示级等宽数字） ─────────────────────────── */
.wb-readings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.wb-reading {
    background: var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 18px 22px 16px;
    position: relative;
    overflow: hidden;
}
.wb-reading::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--primary);
    opacity: .75;
}
.wb-reading.is-entry::before { background: var(--lime); }
.wb-reading.is-amount::before { background: var(--primary-dark); }
.wb-reading .eyebrow {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-light);
}
.wb-read {
    margin-top: 8px;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 56px;
    font-weight: 650;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--text);
}
.wb-read .wb-unit { font-size: 16px; font-weight: 500; color: var(--text-light); margin-left: 6px; letter-spacing: 0; }
.wb-read-sub { margin-top: 6px; font-size: 12px; color: var(--text-light); }

/* ── 星图舞台：珍珠球 + 轨道环 + 状态节点 ────────────────────────── */
.wb-stage {
    position: relative;
    background:
        radial-gradient(55% 45% at 92% 0%, rgba(222, 122, 51, .07), transparent 70%),
        radial-gradient(45% 40% at 20% 100%, rgba(15, 92, 140, .055), transparent 70%),
        var(--card-bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 10px;
    overflow: hidden;
}
.wb-stage-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 12px 2px;
}
.wb-stage-title { font-size: 13px; font-weight: 700; color: var(--text); }
.wb-stage-note { font-size: 11.5px; color: var(--text-light); }
.wb-star-svg { display: block; width: 100%; height: auto; max-height: 420px; }

/* 珍珠球：珠光渐变 + 淡青柠/蓝虹彩（静态渐变层，旋转只动 tick 环） */
.wb-ball-core {
    fill: url(#wbBallGrad);
    stroke: rgba(255, 255, 255, .85);
    stroke-width: 1;
}
.wb-ball-sheen { fill: url(#wbSheenGrad); opacity: .55; }
.wb-ball-ring { transform-origin: 260px 190px; animation: wbSpin 40s linear infinite; }
.wb-paused .wb-ball-ring { animation-play-state: paused; }
@keyframes wbSpin { to { transform: rotate(360deg); } }
.wb-ring-tick { stroke: rgba(10, 35, 64, .28); stroke-width: 1; stroke-linecap: round; }
.wb-ring-tick.is-major { stroke: rgba(15, 92, 140, .55); stroke-width: 1.4; }

/* 轨道环 */
.wb-orbit { fill: none; stroke: rgba(10, 35, 64, .14); stroke-dasharray: 2 5; }
.wb-orbit.is-strong { stroke: rgba(15, 92, 140, .22); stroke-dasharray: 3 6; }

/* 状态节点（玻璃小球） */
.wb-node { cursor: default; transition: transform .15s ease; transform-origin: center; transform-box: fill-box; }
.wb-node:hover { transform: scale(1.12); }
.wb-node-dot { stroke: rgba(255, 255, 255, .9); stroke-width: 1.5; }
.wb-node-halo { opacity: .18; }
.wb-node-label { font-family: var(--font-mono); font-size: 11px; fill: var(--text-sub); }
.wb-node-count { font-family: var(--font-mono); font-size: 12px; font-weight: 650; fill: var(--text); }
.wb-link { stroke: rgba(46, 58, 62, .16); stroke-width: 1; }
.wb-pulse { animation: wbPulse 3.2s ease-in-out infinite; }
.wb-paused .wb-pulse { animation-play-state: paused; }
@keyframes wbPulse { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }

/* ── 模块启动器（星图下方的胶囊入口，点击跳对应 Tab） ─────────────── */
.wb-launchers { display: flex; flex-wrap: wrap; gap: 8px; }
.wb-launch {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 15px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--card-bg);
    color: var(--text-sub);
    font-size: 12.5px;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.wb-launch:hover { border-color: var(--primary-light); color: var(--primary); background: var(--blue-soft); }
.wb-launch i {
    width: 8px; height: 8px; border-radius: 50%; background: var(--primary-light); flex: none;
}

/* ── 加载/错误态 ─────────────────────────────────────────────────── */
.wb-note {
    padding: 26px 16px;
    text-align: center;
    color: var(--text-light);
    font-size: 12.5px;
}

@media (max-width: 900px) {
    .wb-readings { grid-template-columns: 1fr; }
    .wb-read { font-size: 44px; }
}