:root{
  --bg:#0e0f13;--panel:#151821;--card:#1b1f2b;--text:#e9edf1;--muted:#a6b0c2;
  --accent:#4da3ff;--ok:#38d39f;--warn:#ffb347;--bad:#ff6b6b;
  --shadow:0 10px 30px rgba(0,0,0,.25);--radius:16px;
}
*{box-sizing:border-box}html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);
  font:500 15px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial}
a{color:var(--accent)}
.app-header,.app-footer{display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;background:linear-gradient(180deg,#121420,#0f121b);box-shadow:var(--shadow);position:sticky;top:0;z-index:100}
.app-footer{position:sticky;bottom:0;top:auto;opacity:.9}
.brand{font-weight:800}.connections{display:flex;gap:10px;align-items:center}
.btn{background:var(--accent);color:#09121b;border:0;border-radius:10px;padding:10px 14px;font-weight:700;cursor:pointer;box-shadow:var(--shadow)}
.btn:hover{filter:brightness(1.1)}.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-mini{padding:6px 10px;font-size:12px}
.scene-input{background:var(--panel);border:1px solid #2a2f3d;color:var(--text);border-radius:8px;padding:8px 10px;min-width:200px}
.small{font-size:12px;color:var(--muted)}
.layout{display:grid;grid-template-columns:360px 1fr;gap:16px;padding:16px}
.sidebar{background:var(--panel);border-radius:16px;padding:14px;box-shadow:var(--shadow);max-height:calc(100vh - 140px);overflow:auto}
.sidebar h3{margin:8px 0 6px 0}
.sources-toolbar{display:flex;gap:8px;align-items:center}
.sources{display:grid;gap:6px;grid-template-columns:repeat(2,minmax(100px,1fr));margin-top:8px}
.source{background:var(--card);padding:8px;border-radius:10px;border:1px solid #2a2f3d;cursor:grab;user-select:none}
.source:hover{border-color:#3a4256}.source .tag{font-size:11px;color:var(--muted)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px}
.dot-cam{background:#3cd87a}.dot-media{background:#5ab0ff}.dot-graphic{background:#ff9f5a}.dot-other{background:#a77dff}
.legend{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px;color:var(--muted)}
.scenes-bar{display:flex;flex-wrap:wrap;gap:8px}
.scene-btn{background:#2a2f3d;color:var(--text);padding:8px 10px;border-radius:10px;border:1px solid #414a62;cursor:pointer}
.scene-btn:hover{border-color:var(--accent)}
.stage{background:var(--panel);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.monitor-grid{
  display:grid;
  grid-template-areas:
    "m3 m4 m5 m6 m7"
    "m2 c10 c11 m8 m8"
    "m1 prevL pgm prevR m9";
  grid-template-columns:repeat(5,1fr);
  grid-template-rows:120px 220px 160px;
  gap:14px;
}
#mon-3{grid-area:m3}#mon-4{grid-area:m4}#mon-5{grid-area:m5}#mon-6{grid-area:m6}#mon-7{grid-area:m7}
#mon-2{grid-area:m2}#mon-10{grid-area:c10}#mon-11{grid-area:c11}#mon-8{grid-area:m8}
#mon-1{grid-area:m1}#mon-prev-left{grid-area:prevL}#mon-pgm{grid-area:pgm}#mon-prev-right{grid-area:prevR}#mon-9{grid-area:m9}
.mon{position:relative;background:linear-gradient(180deg,#111523,#0d1020);border-radius:12px;border:1px solid #2a2f3d;box-shadow:var(--shadow);padding:10px;display:flex;flex-direction:column;gap:8px}
.mon::before{content:attr(data-label);position:absolute;top:6px;left:10px;font-size:12px;color:var(--muted)}
.mon .current{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;border:1px dashed #394258;border-radius:8px;padding:6px;color:#cbd5e6}
.mon .controls{display:flex;gap:8px;align-items:center;justify-content:space-between}
.mon select{background:#0f1324;border:1px solid #2a2f3d;color:var(--text);border-radius:8px;padding:6px}
.mon .route{min-width:160px}
.hint{color:var(--muted);font-size:12px}
.drop-highlight{outline:2px dashed var(--accent);outline-offset:-6px}
.status-ok{color:var(--ok)}.status-bad{color:var(--bad)}.status-warn{color:var(--warn)}
.instance{background:var(--card);padding:10px;border-radius:10px;border:1px solid #2a2f3d;margin-bottom:10px}
.instance .row{display:flex;gap:8px;margin:6px 0}