.audit-lab {
    --lab-line: rgba(228, 228, 231, 0.42);
    --lab-line-faint: rgba(228, 228, 231, 0.16);
    --lab-glass: rgba(255, 255, 255, 0.025);
    --lab-tube: rgba(228, 228, 231, 0.07);
    --lab-sample: color-mix(in srgb, var(--lab-audio), var(--lab-video));
    --lab-audio: var(--primary);
    --lab-vocals: #ff6b9a;
    --lab-video: var(--purple);
    --lab-meta: var(--info);
    --lab-active: var(--warning);
    --lab-done: var(--success);
    display: none;
    position: fixed;
    inset: var(--navbar-height) 0 0;
    z-index: 0;
    pointer-events: none;
}

.audit-lab svg {
    display: block;
    width: 100%;
    height: 100%;
}

.lab-stop-audio { stop-color: var(--lab-audio); }
.lab-stop-video { stop-color: var(--lab-video); }
.lab-stop-meta { stop-color: var(--lab-meta); }
.lab-stop-lamp { stop-color: var(--lab-active); }

.lab-line {
    fill: var(--lab-glass);
    stroke: var(--lab-line);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lab-line--open { fill: none; }

.lab-faint {
    fill: none;
    stroke: var(--lab-line-faint);
    stroke-width: 1;
    stroke-linecap: round;
}

.lab-bench {
    stroke: var(--lab-line-faint);
    stroke-width: 2;
    stroke-linecap: round;
}

.lab-screen {
    fill: rgba(0, 0, 0, 0.3);
    stroke: var(--lab-line-faint);
    stroke-width: 1;
}

.lab-apparatus {
    opacity: 0.42;
    transition: opacity 0.8s ease;
}

.lab-station[data-state="active"] > .lab-apparatus { opacity: 1; }
.lab-station[data-state="done"] > .lab-apparatus { opacity: 0.72; }

.lab-lamp {
    opacity: 0;
    transition: opacity 1s ease;
}

.lab-station[data-state="active"] > .lab-lamp { opacity: 1; }

.lab-label {
    font: 500 14px var(--font-sans);
    letter-spacing: 0.01em;
    fill: var(--text-muted);
    transition: fill 0.6s ease;
}

.lab-node {
    fill: var(--text-disabled);
    transition: fill 0.6s ease;
}

.lab-node-ring {
    fill: none;
    stroke: var(--lab-active);
    stroke-width: 1.5;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}

.lab-station[data-state="active"] .lab-label { fill: var(--text-primary); }
.lab-station[data-state="done"] .lab-label { fill: var(--text-secondary); }
.lab-station[data-state="active"] .lab-node { fill: var(--lab-active); }
.lab-station[data-state="done"] .lab-node { fill: var(--lab-done); }
.lab-station[data-state="active"] .lab-node-ring { animation: lab-node-pulse 1.6s ease-out infinite; }

.lab-flow,
.lab-chart,
.lab-ring {
    fill: none;
    stroke-dasharray: 100 100;
    stroke-dashoffset: 100;
    opacity: 0;
    transition: opacity 0.8s ease, stroke-dashoffset 0s linear 0.8s;
}

.lab-reveal {
    opacity: 0;
    transition: opacity 0.8s ease;
}

[data-state="active"] > .lab-reveal {
    animation: fadeIn var(--len, 0.4s) ease forwards;
    animation-delay: calc(var(--dur) * var(--at));
}

[data-state="done"] > .lab-reveal { opacity: 1; }

.lab-tube {
    fill: none;
    stroke: var(--lab-tube);
    stroke-width: 7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lab-flow {
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.lab-flow[data-state="active"] {
    opacity: 0.9;
    animation: lab-pour var(--dur) ease-in-out forwards;
}

.lab-flow[data-state="done"] {
    opacity: 0.55;
    stroke-dashoffset: 0;
    transition: opacity 0.8s ease;
}

.lab-flow--sample { stroke: var(--lab-sample); }
.lab-flow--audio { stroke: var(--lab-audio); }
.lab-flow--vocals { stroke: var(--lab-vocals); }
.lab-flow--video { stroke: var(--lab-video); }
.lab-flow--meta { stroke: var(--lab-meta); }

.lab-stopper { fill: rgba(63, 63, 70, 0.6); }

.lab-vial-liquid {
    opacity: 0.8;
    transform: translateY(88px);
    transition: transform 1s ease;
}

[data-lab="pre.vial"][data-state="active"] .lab-vial-liquid { animation: lab-settle var(--dur) ease-in-out forwards; }
[data-lab="pre.vial"][data-state="done"] .lab-vial-liquid { transform: none; }

.lab-bubble {
    fill: rgba(250, 250, 250, 0.6);
    opacity: 0;
}

[data-lab="pre.vial"][data-state="active"] .lab-bubble,
[data-lab="compliance.flask"][data-state="active"] .lab-bubble {
    animation: lab-bubble 1.4s ease-in infinite;
    animation-delay: calc(var(--i) * 0.45s);
}

.lab-tag {
    opacity: 0;
    transform: rotate(-30deg);
    transform-origin: 132px 146px;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.lab-tag[data-state="active"] { animation: lab-tag-swing var(--dur) cubic-bezier(0.3, 1.4, 0.5, 1) forwards; }
.lab-tag[data-state="done"] { opacity: 1; transform: rotate(4deg); }

.lab-tag-line {
    stroke: var(--lab-meta);
    stroke-width: 2;
    stroke-linecap: round;
    transform: scaleX(0);
    transform-box: fill-box;
    transform-origin: left center;
}

.lab-tag[data-state="active"] .lab-tag-line {
    animation: lab-settle calc(var(--dur) * 0.25) ease-out forwards;
    animation-delay: calc(var(--dur) * (0.35 + 0.18 * var(--i)));
}

.lab-tag[data-state="done"] .lab-tag-line { transform: none; }

.lab-funnel-mix { opacity: 0; }
.lab-funnel-audio { fill: var(--lab-audio); opacity: 0; }

.lab-funnel-video {
    fill: var(--lab-video);
    opacity: 0;
    transition: opacity 0.8s ease;
}

[data-lab="pre.funnel"][data-state="active"] .lab-funnel-mix { animation: lab-funnel-mix var(--dur) ease-in-out forwards; }
[data-lab="pre.funnel"][data-state="active"] .lab-funnel-video { animation: lab-funnel-layer var(--dur) ease-in-out forwards; }
[data-lab="pre.funnel"][data-state="active"] .lab-funnel-audio { animation: lab-funnel-drain var(--dur) ease-in-out forwards; }
[data-lab="pre.funnel"][data-state="done"] .lab-funnel-video { opacity: 0.7; }

.lab-drip { fill: var(--lab-audio); opacity: 0; }

[data-lab="pre.funnel"][data-state="active"] .lab-drip {
    animation: lab-drip 0.5s ease-in infinite;
    animation-delay: calc(var(--dur) * 0.62);
}

.lab-window { fill: rgba(0, 0, 0, 0.25); }

.lab-rotor {
    transform-box: fill-box;
    transform-origin: center;
}

[data-lab="pre.centrifuge"][data-state="active"] .lab-rotor { animation: spin 0.4s linear infinite; }

.lab-rotor-tube { fill: var(--lab-audio); opacity: 0.65; }
.lab-rotor-tube--vocals { fill: var(--lab-vocals); }

.lab-display { transition: fill 0.6s ease; }
[data-state="active"] > .lab-display { fill: color-mix(in srgb, var(--lab-active) 32%, transparent); }

.lab-threshold {
    stroke: var(--lab-line-faint);
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

.lab-bar {
    transform: scaleY(0);
    transform-box: fill-box;
    transform-origin: 50% 100%;
    transition: transform 0.8s ease;
}

.lab-bar--fg { fill: var(--lab-audio); opacity: 0.9; }
.lab-bar--bg { fill: var(--lab-audio); opacity: 0.38; }

[data-lab="music.meter"][data-state="active"] .lab-bar {
    animation: lab-settle calc(var(--dur) * 0.14) ease-out forwards;
    animation-delay: calc(var(--dur) * (0.03 + 0.08 * var(--i)));
}

[data-lab="music.meter"][data-state="done"] .lab-bar { transform: none; }

.lab-cursor {
    stroke: var(--lab-active);
    stroke-width: 1.5;
    opacity: 0;
}

[data-lab="music.meter"][data-state="active"] .lab-cursor { animation: lab-sweep var(--dur) linear forwards; }

.lab-gel {
    fill: color-mix(in srgb, var(--lab-meta) 5%, transparent);
    stroke: var(--lab-line-faint);
    stroke-width: 1;
}

.lab-lane { fill: rgba(255, 255, 255, 0.035); }

.lab-band {
    opacity: 0;
    transform: translateY(var(--d));
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.lab-band--sample { fill: var(--lab-audio); }
.lab-band--ref { fill: var(--text-secondary); }

[data-lab="music.gel"][data-state="active"] .lab-band {
    animation: lab-band calc(var(--dur) * 0.5) cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
    animation-delay: calc(var(--dur) * 0.05 * var(--i));
}

[data-lab="music.gel"][data-state="done"] .lab-band { opacity: 0.9; transform: none; }

.lab-match {
    fill: none;
    stroke: var(--lab-done);
    stroke-width: 1.4;
    stroke-dasharray: 4 3;
}

.lab-readout {
    font: 600 15px var(--font-sans);
    font-variant-numeric: tabular-nums;
}

.lab-readout--match { fill: var(--lab-done); }

.lab-paper-sheet {
    fill: rgba(250, 250, 250, 0.05);
    stroke: var(--lab-line-faint);
    stroke-width: 1;
}

.lab-paper {
    transform: translateY(94px);
    transition: transform 1s ease;
}

[data-lab="audio.tape"][data-state="active"] .lab-paper { animation: lab-settle var(--dur) linear forwards; }
[data-lab="audio.tape"][data-state="done"] .lab-paper { transform: none; }

.lab-speaker--a { fill: var(--lab-vocals); }
.lab-speaker--b { fill: var(--text-secondary); }
.lab-text-line { fill: rgba(228, 228, 231, 0.32); }
.lab-text-line--flagged { fill: var(--lab-active); }
.lab-flagged { fill: color-mix(in srgb, var(--lab-active) 16%, transparent); }

.lab-wave {
    fill: none;
    stroke: var(--lab-vocals);
    stroke-width: 1.4;
    stroke-linejoin: round;
    opacity: 0.3;
    transition: opacity 0.8s ease;
}

[data-lab="audio.scope"][data-state="active"] .lab-wave {
    opacity: 0.95;
    animation: lab-scroll 1.3s linear infinite;
}

[data-lab="audio.scope"][data-state="done"] .lab-wave { opacity: 0.7; }

.lab-wheel {
    transform-box: fill-box;
    transform-origin: center;
}

[data-lab="visual.microtome"][data-state="active"] .lab-wheel { animation: spin 1.4s linear infinite; }
[data-lab="visual.microtome"][data-state="active"] .lab-carriage { animation: lab-stroke 0.7s ease-in-out infinite; }

.lab-block {
    fill: var(--lab-video);
    fill-opacity: 0.45;
    stroke: var(--lab-line);
    stroke-width: 1.2;
}

.lab-perf {
    stroke: var(--bg-body);
    stroke-width: 1.6;
    stroke-linecap: round;
}

.lab-blade { fill: rgba(228, 228, 231, 0.55); }

.lab-frame {
    fill: color-mix(in srgb, var(--lab-video) 14%, transparent);
    stroke: var(--lab-video);
    stroke-width: 1.1;
}

.lab-slice {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity 0.8s ease, transform 0s linear 0.8s;
}

[data-lab="visual.microtome"][data-state="active"] .lab-slice {
    animation: lab-slice calc(var(--dur) * 0.22) cubic-bezier(0.5, 0, 0.8, 0.6) forwards;
    animation-delay: calc(var(--dur) * (0.12 + 0.26 * var(--i)));
}

[data-lab="visual.microtome"][data-state="done"] .lab-slice {
    opacity: 1;
    transform: translate(var(--dx), var(--dy)) rotate(-10deg);
}

.lab-beam { fill: var(--lab-active); opacity: 0; }
[data-lab="visual.microscope"][data-state="active"] .lab-beam { animation: lab-beam 1.2s ease-in-out infinite alternate; }

.lab-frame-mini { fill: var(--lab-video); opacity: 0.75; }

.lab-slide {
    opacity: 0.5;
    transition: opacity 0.8s ease;
}

[data-lab="visual.microscope"][data-state="active"] .lab-slide { animation: lab-slide-swap calc(var(--dur) / 3) ease-in-out infinite; }
[data-lab="visual.microscope"][data-state="done"] .lab-slide { opacity: 1; }

.lab-lightpanel {
    fill: rgba(250, 250, 250, 0.035);
    transition: fill 0.8s ease;
}

[data-state="active"] > .lab-lightpanel { fill: rgba(250, 250, 250, 0.075); }

.lab-glyph {
    fill: none;
    stroke: var(--lab-video);
    stroke-width: 1.1;
    stroke-linejoin: round;
    opacity: 0.7;
}

.lab-chip { fill: var(--text-secondary); }

.lab-flag {
    fill: none;
    stroke: var(--lab-active);
    stroke-width: 1.4;
}

.lab-lens {
    opacity: 0;
    transition: opacity 0.8s ease;
}

.lab-lens-glass { fill: rgba(250, 250, 250, 0.06); }

[data-lab="visual.lightbox"][data-state="active"] .lab-lens {
    opacity: 1;
    animation: lab-lens calc(var(--dur) / 2) ease-in-out infinite;
}

.lab-agar {
    fill: color-mix(in srgb, var(--lab-meta) 7%, transparent);
    stroke: var(--lab-line-faint);
    stroke-width: 1;
}

.lab-colony {
    fill: var(--lab-meta);
    opacity: 0;
    transform: scale(0);
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity 0.8s ease, transform 0s linear 0.8s;
}

.lab-colony--bot { fill: var(--lab-active); }

[data-lab="engagement"][data-state="active"] .lab-colony {
    animation: lab-colony calc(var(--dur) * 0.14) ease-out forwards;
    animation-delay: calc(var(--dur) * var(--t));
}

[data-lab="engagement"][data-state="done"] .lab-colony { opacity: 0.85; transform: none; }

.lab-chart {
    stroke: var(--lab-meta);
    stroke-width: 1.5;
    stroke-linejoin: round;
}

[data-lab="engagement"][data-state="active"] .lab-chart {
    opacity: 1;
    animation: lab-pour calc(var(--dur) * 0.85) linear forwards;
}

[data-lab="engagement"][data-state="done"] .lab-chart { opacity: 1; stroke-dashoffset: 0; }

.lab-spike {
    fill: var(--lab-active);
    opacity: 0;
    transition: opacity 0.8s ease;
}

[data-lab="engagement"][data-state="active"] .lab-spike {
    animation: fadeIn 0.4s ease forwards;
    animation-delay: calc(var(--dur) * 0.6);
}

[data-lab="engagement"][data-state="done"] .lab-spike { opacity: 1; }

.lab-flask-liquid {
    opacity: 0.8;
    transform: translateY(66px);
    transition: transform 1s ease;
}

[data-lab="compliance.flask"][data-state="active"] .lab-flask-liquid { animation: lab-settle var(--dur) ease-in-out forwards; }
[data-lab="compliance.flask"][data-state="done"] .lab-flask-liquid { transform: none; }

.lab-ring-track {
    fill: none;
    stroke: rgba(228, 228, 231, 0.1);
    stroke-width: 6;
}

.lab-ring {
    stroke: var(--lab-done);
    stroke-width: 6;
    stroke-linecap: round;
}

[data-lab="compliance.ring"][data-state="active"] .lab-ring {
    opacity: 1;
    animation: lab-score var(--dur) cubic-bezier(0.3, 0.7, 0.3, 1) forwards;
}

[data-lab="compliance.ring"][data-state="done"] .lab-ring { opacity: 1; stroke-dashoffset: 77; }

.lab-readout--score {
    fill: var(--text-primary);
    font-size: 24px;
    text-anchor: middle;
}

.lab-sheet {
    transform: translateY(82px);
    transition: transform 1s ease;
}

[data-lab="compliance.report"][data-state="active"] .lab-sheet { animation: lab-settle var(--dur) cubic-bezier(0.4, 0, 0.2, 1) forwards; }
[data-lab="compliance.report"][data-state="done"] .lab-sheet { transform: none; }

.lab-sheet-title {
    stroke: var(--text-secondary);
    stroke-width: 2;
    stroke-linecap: round;
    opacity: 0.6;
}

.lab-score-bar { fill: var(--lab-done); opacity: 0.85; }
.lab-score-bar--warn { fill: var(--lab-active); }

@keyframes lab-pour { to { stroke-dashoffset: 0; } }
@keyframes lab-settle { to { transform: none; } }
@keyframes lab-node-pulse { from { opacity: 0.9; transform: scale(0.6); } to { opacity: 0; transform: scale(1.7); } }
@keyframes lab-bubble { 20% { opacity: 0.8; } 100% { opacity: 0; transform: translateY(-46px); } }
@keyframes lab-tag-swing { 40% { opacity: 1; } 100% { opacity: 1; transform: rotate(4deg); } }
@keyframes lab-funnel-mix { 15%, 40% { opacity: 0.8; } 55% { opacity: 0; } }
@keyframes lab-funnel-layer { 40% { opacity: 0; } 55%, 100% { opacity: 0.7; } }
@keyframes lab-funnel-drain { 40% { opacity: 0; transform: none; } 55%, 62% { opacity: 0.85; transform: none; } 100% { opacity: 0.85; transform: translateY(34px); } }
@keyframes lab-drip { from { opacity: 0.9; transform: none; } to { opacity: 0; transform: translateY(10px); } }
@keyframes lab-sweep { 0% { opacity: 0.8; transform: none; } 92% { opacity: 0.8; } 100% { opacity: 0; transform: translateX(124px); } }
@keyframes lab-band { 30% { opacity: 0.9; } to { opacity: 0.9; transform: none; } }
@keyframes lab-scroll { to { transform: translateX(-104px); } }
@keyframes lab-stroke { 50% { transform: translateY(14px); } }
@keyframes lab-slice { 12% { opacity: 1; } 100% { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(-10deg); } }
@keyframes lab-beam { from { opacity: 0.08; } to { opacity: 0.3; } }
@keyframes lab-slide-swap { 0% { opacity: 0; transform: translateX(30px); } 18%, 78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(-30px); } }
@keyframes lab-lens { 16% { transform: translate(36px, 0); } 33% { transform: translate(72px, 0); } 50% { transform: translate(72px, 30px); } 66% { transform: translate(36px, 30px); } 83% { transform: translate(0, 30px); } }
@keyframes lab-colony { to { opacity: 0.85; transform: none; } }
@keyframes lab-score { to { stroke-dashoffset: 77; } }

@media (min-width: 1100px) and (min-height: 620px) {
    .audit-lab { display: block; }

    .login-wrapper::before,
    .login-wrapper::after {
        content: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .audit-lab * {
        animation: none !important;
        transition: none !important;
    }
}
