#panel-mixed.active { display:flex;flex-direction:column; }
.mix-controls { display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:10px 16px;border-bottom:1px solid var(--line);flex:none; }
.mix-controls label { display:grid;gap:4px;font-size:10px;color:var(--ink-faint); }
.mix-controls select { font-size:12px;padding:6px 8px;height:32px; }
.mix-controls label>span { display:flex;flex-direction:column;gap:4px; }
.mix-controls output { color:var(--magma);font:11px var(--font-mono); }
.mix-controls input[type=range] { width:125px;accent-color:var(--magma); }
.mix-controls button,.mix-camera button { background:var(--bg-raised);border:1px solid var(--line);border-radius:5px;color:var(--ink);font-size:11px;padding:6px 8px;cursor:pointer; }
.mix-camera button.active { border-color:var(--magma);color:var(--magma); }
#mixCount { margin-left:auto;font:11px var(--font-mono);color:var(--magma); }
.mix-workspace { flex:1;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); }
.mix-pane { min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden; }
.mix-pane+.mix-pane { border-left:1px solid var(--line-strong); }
.mix-pane>header { display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:7px 12px;background:var(--bg-raised);flex:none; }
.mix-pane h2 { font-size:13px;font-weight:500;margin:0;white-space:nowrap; }
.mix-pane>header>span { color:var(--ink-faint);font-size:10px; }
.mix-camera { display:flex;gap:4px; }
.mix-map-frame,.mix-depth-frame { position:relative;flex:1;min-height:0; }
.mix-depth-frame { background:radial-gradient(circle at 50% 35%,#2b3540,#1a2128);overflow:hidden; }
#mixedLeaflet,#mixedDepthCanvas { width:100%;height:100%; }
#mixedLeaflet { background:#102333; }
#mixedDepthCanvas { cursor:grab;position:relative; }
#mixedDepthCanvas .depth-latest-pulse { position:absolute;left:0;top:0;z-index:1; }
#mixedDepthCanvas canvas { display:block; }
.mix-depth-status,.mix-depth-scale { position:absolute;left:10px;right:10px;font:10px/1.5 var(--font-mono);color:#d9e7f0;pointer-events:none;margin:0;text-shadow:0 1px 3px #000; }
.mix-depth-status { top:12px; }.mix-depth-status:empty { display:none; }
.mix-depth-scale { bottom:10px; }
.mix-hint { margin:0;padding:5px 8px;flex:none;font-size:9px;color:var(--ink-faint);text-align:center;background:var(--bg-raised); }
.mix-footer { display:flex;align-items:center;flex-wrap:wrap;gap:6px 16px;padding:8px 16px;border-top:1px solid var(--line);flex:none;background:var(--bg); }
.mix-legend { display:flex;align-items:center;gap:12px;font:10px var(--font-mono); }
.mix-legend span { display:inline-flex;align-items:center;gap:4px; }
.mix-legend i { width:9px;height:9px;border-radius:50%;border:1px solid #fff; }
#mixSync { font-size:10px;color:var(--magma);margin-left:auto; }
.mix-event-picker { display:flex;align-items:center;gap:8px;font-size:10px;color:var(--ink-faint); }
.mix-event-picker select { font-size:11px;max-width:340px;padding:5px 8px; }
#mixSelection { flex-basis:100%;margin:0;font-size:12px;line-height:1.5; }
.mix-feed-note { flex-basis:100%;margin:0;font-size:9px;color:var(--ink-faint); }
.mix-feed-note.is-error { color:var(--sulphur); }
#mixedLeaflet .leaflet-interactive:focus { outline:2px solid #fff; }
@media(min-width:761px) and (max-width:1200px) { .view-tab { padding:0 7px;font-size:11px; }.masthead { gap:8px; }.masthead-right { gap:7px; } }
@media(max-width:1000px) { .mix-controls { gap:8px 10px;padding:8px 12px; }.mix-controls input[type=range] { width:110px; }.mix-pane>header { flex-wrap:wrap; }.mix-pane>header>span { display:none; } }
@media(max-width:760px) {
 .view-nav { grid-template-columns:repeat(6,minmax(0,1fr)); }
 .view-tab { font-size:9px;padding:0 1px; }
 #panel-mixed { overflow:auto; }
 .mix-controls { display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); }
 .mix-controls select { width:100%;max-width:none;min-width:0; }.mix-controls input[type=range] { width:100%; }
 #mixCount { margin:0;grid-column:1/-1; }
 .mix-workspace { flex:none;height:760px;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr)); }
 .mix-pane+.mix-pane { border-left:0;border-top:1px solid var(--line-strong); }
 .mix-pane>header { flex-wrap:nowrap; }.mix-camera button { font-size:10px;padding:5px 6px; }
 .mix-footer { padding:10px 12px; }.mix-legend { gap:9px;flex-wrap:wrap; }
 .mix-event-picker { width:100%; }.mix-event-picker select { min-width:0;flex:1;max-width:none; }
}