:root{--bg-dark: #070b16;--bg-card: rgba(13, 20, 38, .75);--card-border: rgba(255, 255, 255, .05);--accent-cyan: #00e5ff;--accent-green: #00e676;--accent-red: #ff1744;--accent-amber: #ffc400;--text-main: #f8fafc;--text-sub: #94a3b8;--text-muted: #475569}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-dark);background-image:radial-gradient(at 0% 0%,rgba(0,229,255,.03) 0px,transparent 50%),radial-gradient(at 100% 0%,rgba(0,230,118,.02) 0px,transparent 50%),radial-gradient(at 50% 100%,rgba(255,23,68,.01) 0px,transparent 50%);color:var(--text-main);font-family:Inter,system-ui,-apple-system,sans-serif;padding:16px;min-height:100vh;overflow-x:hidden}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:rgba(255,255,255,.01)}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--accent-cyan)}.card-glass{background:var(--bg-card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--card-border);border-radius:12px;box-shadow:0 10px 30px #00000080;padding:20px;transition:border-color .3s,box-shadow .3s}.card-glass:hover{border-color:#00e5ff1f;box-shadow:0 10px 30px #00e5ff08}.app-header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;background:rgba(13,20,38,.5);border:1px solid var(--card-border);border-radius:12px;margin-bottom:16px}.logo-section{display:flex;align-items:center;gap:12px}.logo-icon{background:linear-gradient(135deg,var(--accent-cyan),#0288d1);color:#000;font-weight:800;font-size:15px;width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 12px #00e5ff4d}.header-title{font-size:18px;font-weight:700;letter-spacing:.5px}.header-subtitle{font-size:11px;color:var(--text-sub)}.dashboard-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;margin-bottom:20px}@media (max-width: 1024px){.dashboard-grid{grid-template-columns:1fr}}.canvas-wrapper{position:relative;width:100%;height:440px;border-radius:8px;overflow:hidden;background:rgba(5,8,16,.6);border:1px solid rgba(255,255,255,.03)}.canvas-overlay-mode{position:absolute;top:12px;left:12px;background:rgba(7,11,22,.8);border:1px solid rgba(255,255,255,.08);border-radius:6px;padding:4px 8px;font-size:10px;font-weight:700;letter-spacing:.5px;color:var(--accent-cyan);pointer-events:none;z-index:10}.canvas-controls-tip{position:absolute;bottom:12px;left:12px;font-size:10px;color:var(--text-sub);background:rgba(7,11,22,.6);padding:3px 6px;border-radius:4px;pointer-events:none;z-index:10}.sidebar-grid{display:flex;flex-direction:column;gap:16px}.status-pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:4px;text-transform:uppercase}.status-pill.active{background:rgba(0,230,118,.1);color:var(--accent-green);border:1px solid rgba(0,230,118,.2)}.status-pill.warning{background:rgba(255,196,0,.1);color:var(--accent-amber);border:1px solid rgba(255,196,0,.2)}.status-pill.down{background:rgba(255,23,68,.1);color:var(--accent-red);border:1px solid rgba(255,23,68,.2)}.dot-indicator{width:6px;height:6px;border-radius:50%;display:inline-block}.dot-indicator.online{background-color:var(--accent-green);box-shadow:0 0 8px var(--accent-green)}.dot-indicator.offline{background-color:var(--accent-red);box-shadow:0 0 8px var(--accent-red)}.dot-indicator.connecting{background-color:var(--accent-amber);box-shadow:0 0 8px var(--accent-amber)}.event-table-wrapper{overflow-y:auto;border:1px solid rgba(255,255,255,.03);border-radius:8px;background:rgba(5,8,16,.3)}.event-table{width:100%;border-collapse:collapse;font-size:11.5px;text-align:left}.event-table th{background:rgba(255,255,255,.02);padding:8px 12px;font-weight:600;color:var(--text-sub);border-bottom:1px solid rgba(255,255,255,.06)}.event-table td{padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.02)}.filter-btn{background:transparent;border:1px solid transparent;color:var(--text-sub);padding:4px 10px;font-size:11px;font-weight:600;border-radius:4px;cursor:pointer;transition:all .2s}.filter-btn.active{background:rgba(255,255,255,.04);border-color:#ffffff14;color:var(--accent-cyan)}.sim-controls-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}.btn-action{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);color:var(--text-main);padding:6px 10px;border-radius:4px;font-size:10.5px;cursor:pointer;transition:all .2s}.btn-action:hover{background:rgba(0,229,255,.08);border-color:#00e5ff33;color:var(--accent-cyan)}.btn-action.danger{color:var(--accent-red);background:rgba(255,23,68,.04);border-color:#ff174426}.btn-action.danger:hover{background:rgba(255,23,68,.1);border-color:#ff17444d}@keyframes glow-pulse{0%{box-shadow:0 0 #ff174466}70%{box-shadow:0 0 0 8px #ff174400}to{box-shadow:0 0 #ff174400}}.glow-alert{animation:glow-pulse 1.2s infinite}