* { margin: 0; padding: 0; box-sizing: border-box; }
body { overflow: hidden; background: #050508; font-family: 'Segoe UI', system-ui, sans-serif; }
canvas { display: block; cursor: crosshair; }

#info {
    position: absolute; top: 12px; left: 12px; z-index: 100;
    color: #aaccee; font-size: 13px; line-height: 1.65;
    pointer-events: none; text-shadow: 0 0 6px rgba(68,170,255,0.3);
}
.panel-title { color: #44aaff; font-weight: 700; font-size: 14px; margin-bottom: 4px; letter-spacing: 0.5px; }
.key { color: #fff; font-weight: 700; background: #223366; padding: 1px 6px; border-radius: 3px; font-size: 11px; }
.val { color: #ffcc44; font-weight: 700; }

#stats {
    position: absolute; top: 12px; right: 12px; z-index: 100;
    background: rgba(8,14,28,0.82); border: 1px solid rgba(68,170,255,0.2);
    border-radius: 8px; padding: 12px 16px; color: #aaccee;
    font-size: 12px; line-height: 1.8; min-width: 220px;
}
.stat-row { display: flex; justify-content: space-between; gap: 12px; }
.stat-label { color: #6688aa; }
.stat-val { color: #44ff88; font-weight: 700; text-align: right; }
.stat-val.off { color: #ff6644; }

#mirrorList {
    position: absolute; bottom: 12px; right: 12px; z-index: 100;
    background: rgba(8,14,28,0.82); border: 1px solid rgba(68,170,255,0.2);
    border-radius: 8px; padding: 10px 14px; color: #aaccee;
    font-size: 11px; line-height: 1.7; max-width: 280px;
}
.mirror-row { display: flex; align-items: center; gap: 8px; }
.mirror-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.mirror-dot.active { background: #ffcc44; box-shadow: 0 0 6px #ffcc44; }
.mirror-dot.idle { background: #446688; }
.mirror-dot.dark { background: #334455; }
.mirror-name { color: #8899aa; flex: 1; }
.mirror-state { color: #667788; font-size: 10px; text-align: right; }

#legend {
    position: absolute; bottom: 12px; left: 12px; z-index: 100;
    background: rgba(8,14,28,0.82); border: 1px solid rgba(68,170,255,0.2);
    border-radius: 8px; padding: 10px 14px; color: #8899bb;
    font-size: 11px; line-height: 1.8; max-width: 300px;
}
.legend-section { color: #44aaff; font-weight: 700; font-size: 11px; margin-bottom: 2px; }
.legend-row { display: flex; align-items: center; gap: 8px; margin: 2px 0; }
.legend-swatch { width: 14px; height: 3px; border-radius: 2px; flex-shrink: 0; }
.legend-swatch.glow { box-shadow: 0 0 4px currentColor; }