:root {
    --bm-bg: #050b14;
    --bm-panel: rgba(11, 23, 42, .9);
    --bm-panel-soft: rgba(17, 34, 62, .78);
    --bm-line: rgba(148, 163, 184, .2);
    --bm-text: #e6f0ff;
    --bm-muted: #94a8c4;
    --bm-blue: #38bdf8;
    --bm-orange: #fb923c;
    --bm-green: #34d399;
    --bm-red: #fb7185;
    --bm-yellow: #facc15;
}
* { box-sizing: border-box; }
body.lab-sandbox-page--map3d {
    min-height: 100vh;
    margin: 0;
    color: var(--bm-text);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: radial-gradient(circle at 20% 4%, rgba(56, 189, 248, .18), transparent 30%),
        radial-gradient(circle at 78% 2%, rgba(251, 146, 60, .15), transparent 28%), var(--bm-bg);
}
.bm-shell {
    width: min(1240px, calc(100% - 32px));
    margin: 0 auto;
    padding: 28px 0 48px;
}
.bm-hero,
.bm-safe-note,
.bm-stage-card,
.bm-panel {
    border: 1px solid var(--bm-line);
    background: var(--bm-panel);
    box-shadow: 0 28px 90px rgba(0, 0, 0, .28);
    backdrop-filter: blur(16px);
}
.bm-hero {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    padding: 28px;
    border-radius: 30px;
}
.bm-back,
.bm-eyebrow,
.bm-lead,
.bm-safe-note,
.bm-stage-head span,
.bm-panel p,
.bm-event span,
.bm-zone span {
    color: var(--bm-muted);
}
.bm-back {
    display: inline-flex;
    margin-bottom: 18px;
    text-decoration: none;
}
.bm-eyebrow {
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 11px;
    font-weight: 800;
}
.bm-hero h1,
.bm-stage-head h2,
.bm-panel h2 { margin: 0; }
.bm-hero h1 {
    font-size: clamp(36px, 6vw, 70px);
    letter-spacing: -.06em;
}
.bm-lead {
    max-width: 800px;
    margin: 14px 0 0;
    font-size: 17px;
    line-height: 1.7;
}
.bm-actions,
.bm-scenarios {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.bm-actions {
    align-content: flex-start;
    justify-content: flex-end;
    min-width: 240px;
}
.bm-btn,
.bm-scenario,
.bm-zone {
    cursor: pointer;
    color: var(--bm-text);
    font: inherit;
}
.bm-btn,
.bm-scenario {
    border: 1px solid var(--bm-line);
    border-radius: 999px;
    padding: 11px 15px;
    background: rgba(255, 255, 255, .07);
    font-weight: 800;
}
.bm-btn.is-active,
.bm-scenario.is-active {
    border-color: rgba(56, 189, 248, .62);
    background: linear-gradient(135deg, rgba(56, 189, 248, .22), rgba(251, 146, 60, .13));
}
.bm-safe-note {
    margin-top: 18px;
    padding: 14px 18px;
    border-radius: 18px;
}
.bm-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 18px;
    margin-top: 18px;
}
.bm-stage-card,
.bm-panel { border-radius: 28px; }
.bm-stage-card {
    padding: 20px;
    overflow: hidden;
}
.bm-stage-head {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}
.bm-scenarios { margin-bottom: 12px; }
.bm-status-legend {
    display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 18px;
    color: var(--bm-muted); font-size: 12px; font-weight: 800;
}
.bm-status-legend span {
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px;
    border: 1px solid var(--bm-line); border-radius: 999px; background: rgba(255, 255, 255, .05);
}
.bm-status-legend i, .bm-zone em {
    display: inline-flex; border-radius: 999px; font-style: normal;
}
.bm-status-legend i { width: 9px; height: 9px; box-shadow: 0 0 14px currentColor; }
.bm-status-legend .is-ok { color: var(--bm-green); background: var(--bm-green); }
.bm-status-legend .is-warn { color: var(--bm-yellow); background: var(--bm-yellow); }
.bm-status-legend .is-danger { color: var(--bm-red); background: var(--bm-red); }
.bm-status-legend .is-idle { color: var(--bm-muted); background: var(--bm-muted); }
.bm-auto { border-color: rgba(251, 146, 60, .5); background: linear-gradient(135deg, rgba(251, 146, 60, .18), rgba(56, 189, 248, .1)); }
.bm-mobile-fallback { display: none; margin: 0 0 14px; padding: 12px; border: 1px solid rgba(56, 189, 248, .22); border-radius: 16px; color: var(--bm-muted); background: rgba(56, 189, 248, .07); font-weight: 700; line-height: 1.5; }
.bm-value { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.bm-value-card { padding: 18px; border: 1px solid var(--bm-line); border-radius: 24px; background: var(--bm-panel); box-shadow: 0 20px 70px rgba(0, 0, 0, .22); }
.bm-value-card span { color: var(--bm-orange); font-weight: 900; letter-spacing: .12em; }
.bm-value-card strong { display: block; margin: 8px 0; color: #fff; font-size: 18px; }
.bm-value-card p { margin: 0; color: var(--bm-muted); line-height: 1.6; }
.bm-scene {
    position: relative;
    min-height: 590px;
    perspective: 1200px;
    transform-style: preserve-3d;
}
.bm-floor {
    position: absolute;
    inset: 80px 6% 44px;
    border: 1px solid rgba(56, 189, 248, .24);
    border-radius: 34px;
    background: linear-gradient(135deg, rgba(56, 189, 248, .12), rgba(251, 146, 60, .08)),
        repeating-linear-gradient(90deg, rgba(148, 163, 184, .12) 0 1px, transparent 1px 62px),
        repeating-linear-gradient(0deg, rgba(148, 163, 184, .08) 0 1px, transparent 1px 62px);
    box-shadow: inset 0 0 70px rgba(56, 189, 248, .06), 0 50px 90px rgba(0, 0, 0, .35);
    transform: rotateX(62deg) rotateZ(-34deg);
    transform-style: preserve-3d;
}
.bm-grid-glow {
    position: absolute;
    inset: 20% 12%;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(56, 189, 248, .2), transparent 64%);
    filter: blur(12px);
}
.bm-zone {
    position: absolute;
    z-index: 4;
    width: 166px;
    min-height: 112px;
    border: 1px solid rgba(148, 163, 184, .25);
    border-radius: 24px;
    background: linear-gradient(160deg, rgba(17, 34, 62, .98), rgba(9, 19, 36, .94));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 26px 48px rgba(0, 0, 0, .34);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    text-align: center;
    line-height: 1.25;
    transform: translateZ(0);
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, opacity .18s ease;
}
.bm-zone em {
    position: absolute; right: 10px; top: 10px; z-index: 2; padding: 4px 7px;
    border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .08);
    color: #fff; font-size: 10px; font-weight: 900; letter-spacing: .04em;
}
.bm-zone::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(56, 189, 248, .36), transparent 38%, rgba(251, 146, 60, .18));
    opacity: 0;
    transition: opacity .18s ease;
    pointer-events: none;
}
.bm-zone i {
    width: 22px;
    height: 22px;
    margin-bottom: 9px;
    border: 2px solid rgba(56, 189, 248, .85);
    border-radius: 8px;
    box-shadow: 0 0 18px rgba(56, 189, 248, .25);
}
.bm-zone strong,
.bm-zone span {
    position: relative;
    z-index: 1;
    display: block;
}
.bm-zone strong {
    margin-bottom: 6px;
    color: #fff;
    font-size: 19px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
}
.bm-zone span {
    color: #d5e2f4;
    font-size: 13px;
    font-weight: 800;
}
.bm-zone.is-path { border-color: rgba(56, 189, 248, .42); }
.bm-zone.is-path::before { opacity: .42; }
.bm-zone.is-active,
.bm-zone:hover {
    z-index: 6;
    border-color: rgba(56, 189, 248, .9);
    box-shadow: 0 0 0 1px rgba(56, 189, 248, .22), 0 0 38px rgba(56, 189, 248, .22), 0 30px 58px rgba(0, 0, 0, .28);
}
.bm-zone[data-status="ok"] { border-color: rgba(52, 211, 153, .44); }
.bm-zone[data-status="ok"] i { border-color: var(--bm-green); box-shadow: 0 0 22px rgba(52, 211, 153, .32); }
.bm-zone[data-status="warn"] { border-color: rgba(250, 204, 21, .82); box-shadow: 0 0 34px rgba(250, 204, 21, .18); }
.bm-zone[data-status="danger"] { border-color: rgba(251, 113, 133, .9); box-shadow: 0 0 42px rgba(251, 113, 133, .26); }
.bm-zone[data-status="danger"] i { border-color: var(--bm-red); box-shadow: 0 0 24px rgba(251, 113, 133, .48); }
.bm-zone[data-status="warn"] i { border-color: var(--bm-yellow); box-shadow: 0 0 22px rgba(250, 204, 21, .36); }
.bm-zone[data-status="idle"] { opacity: .72; border-color: rgba(148, 163, 184, .2); }
.bm-zone[data-status="ok"] em { background: rgba(52, 211, 153, .15); color: #bbf7d0; }
.bm-zone[data-status="warn"] em { background: rgba(250, 204, 21, .14); color: #fef3c7; }
.bm-zone[data-status="danger"] em { background: rgba(251, 113, 133, .16); color: #ffe4e6; }
.bm-zone[data-status="idle"] em { color: var(--bm-muted); }
.bm-zone--sales { left: 9%; top: 114px; }
.bm-zone--finance { left: 38%; top: 78px; }
.bm-zone--warehouse { right: 9%; top: 140px; }
.bm-zone--field { left: 15%; bottom: 88px; }
.bm-zone--integration { left: 43%; bottom: 74px; }
.bm-zone--manager { right: 8%; bottom: 126px; }
.bm-flow {
    position: absolute;
    z-index: 3;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(56, 189, 248, .36), transparent);
    opacity: .28;
    overflow: hidden;
    transform: rotateX(58deg) rotateZ(-34deg) translateZ(18px);
}
.bm-flow span {
    position: absolute;
    width: 54px;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgba(56, 189, 248, .95), #fff, transparent);
    animation: bmPulse 1.55s linear infinite;
    opacity: 0;
}
.bm-flow.is-active { opacity: .95; box-shadow: 0 0 18px rgba(56, 189, 248, .25); }
.bm-flow.is-active span { opacity: 1; }
.bm-flow[data-status="warn"] span { background: linear-gradient(90deg, transparent, var(--bm-yellow), #fff, transparent); }
.bm-flow[data-status="danger"] span { background: linear-gradient(90deg, transparent, var(--bm-red), #fff, transparent); }
.bm-flow--sales-finance { left: 22%; top: 176px; width: 22%; }
.bm-flow--finance-integration { left: 47%; top: 250px; width: 29%; transform: rotateX(58deg) rotateZ(45deg) translateZ(18px); }
.bm-flow--integration-warehouse { left: 55%; top: 218px; width: 24%; transform: rotateX(58deg) rotateZ(-20deg) translateZ(18px); }
.bm-flow--warehouse-field { left: 38%; top: 330px; width: 39%; transform: rotateX(58deg) rotateZ(154deg) translateZ(18px); }
.bm-flow--field-manager { left: 39%; top: 395px; width: 40%; transform: rotateX(58deg) rotateZ(15deg) translateZ(18px); }
.bm-flow--integration-manager { left: 58%; top: 385px; width: 25%; transform: rotateX(58deg) rotateZ(-12deg) translateZ(18px); }
.bm-scene[data-view="top"] .bm-floor,
.bm-scene[data-view="top"] .bm-flow { transform: none; }
.bm-scene[data-view="side"] .bm-floor { transform: rotateX(66deg) rotateZ(-10deg); }
.bm-scene[data-view="side"] .bm-flow { transform: rotateX(58deg) rotateZ(-10deg) translateZ(18px); }
.bm-side {
    display: grid;
    gap: 18px;
    align-content: start;
}
.bm-panel { padding: 20px; }
.bm-incident {
    border-color: rgba(56, 189, 248, .24);
    background: linear-gradient(160deg, rgba(11, 23, 42, .94), rgba(16, 36, 64, .84));
}
.bm-incident[data-status="warn"] { border-color: rgba(250, 204, 21, .32); }
.bm-incident[data-status="danger"] { border-color: rgba(251, 113, 133, .38); }
.bm-incident strong {
    display: block;
    margin: 14px 0 8px;
    color: #fff;
    font-size: 17px;
}
.bm-incident span { color: var(--bm-muted); line-height: 1.55; }
.bm-kpi-grid {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}
.bm-kpi {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--bm-line);
    border-radius: 16px;
    background: var(--bm-panel-soft);
}
.bm-kpi strong { color: #fff; }
.bm-events {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}
.bm-event {
    position: relative;
    padding: 12px 12px 12px 36px;
    border: 1px solid var(--bm-line);
    border-radius: 16px;
    background: rgba(255, 255, 255, .05);
}
.bm-event::before {
    content: ""; position: absolute; left: 13px; top: 17px; width: 10px; height: 10px;
    border-radius: 50%; background: var(--bm-blue); box-shadow: 0 0 16px rgba(56, 189, 248, .55);
}
.bm-event[data-status="ok"]::before { background: var(--bm-green); box-shadow: 0 0 16px rgba(52, 211, 153, .5); }
.bm-event[data-status="warn"]::before { background: var(--bm-yellow); box-shadow: 0 0 16px rgba(250, 204, 21, .5); }
.bm-event[data-status="danger"]::before { background: var(--bm-red); box-shadow: 0 0 16px rgba(251, 113, 133, .5); }
.bm-event[data-status="idle"]::before { background: var(--bm-muted); box-shadow: none; }
.bm-event strong { display: block; color: #fff; }
@keyframes bmPulse {
    from { left: -60px; }
    to { left: 100%; }
}
@media (max-width: 1100px) {
    .bm-layout { grid-template-columns: 1fr; }
    .bm-side { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
    .bm-hero { flex-direction: column; }
    .bm-value { grid-template-columns: 1fr; }
    .bm-mobile-fallback { display: block; }
    .bm-actions { justify-content: flex-start; min-width: 0; }
    .bm-side { grid-template-columns: 1fr; }
    .bm-scene { min-height: 650px; }
    .bm-zone { width: 150px; min-height: 98px; }
    .bm-zone--sales { left: 6%; top: 88px; }
    .bm-zone--finance { left: 52%; top: 92px; }
    .bm-zone--warehouse { left: 6%; right: auto; top: 250px; }
    .bm-zone--field { left: 52%; bottom: auto; top: 258px; }
    .bm-zone--integration { left: 6%; bottom: 118px; }
    .bm-zone--manager { left: 52%; right: auto; bottom: 110px; }
    .bm-flow { display: none; }
}
@media (max-width: 640px) {
    .bm-shell { width: min(100% - 20px, 1240px); padding-top: 16px; }
    .bm-hero,
    .bm-stage-card,
    .bm-panel { border-radius: 22px; }
    .bm-hero { padding: 20px; }
    .bm-stage-card { padding: 14px; }
    .bm-stage-head { flex-direction: column; }
    .bm-scene { min-height: 660px; overflow-x: clip; }
    .bm-floor { inset: 64px 14px 60px; transform: none; }
    .bm-zone { width: 132px; min-height: 92px; padding: 12px; }
    .bm-zone strong { font-size: 16px; }
    .bm-scenario { width: 100%; }
}