:root{--bg: #0a0a0f;--panel: rgba(14, 14, 24, .85);--border: rgba(255, 255, 255, .06);--text: #f0f0f5;--text-dim: #8b8b9e;--text-muted: #55556a;--gold: #f5a623;--gold-light: #ffc947;--gold-dim: rgba(245, 166, 35, .12);--green: #10b981;--amber: #f59e0b;--red: #ef4444;--indigo: #818cf8;--radius: 14px}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;height:100vh;width:100vw;overflow:hidden;position:relative;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff14;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#ffffff26}header{position:absolute;top:20px;left:20px;right:360px;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border:1px solid var(--border);border-radius:var(--radius);background:var(--panel);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 8px 32px #0000004d;z-index:50}header h1{font-size:1.1rem;font-weight:700;letter-spacing:.1em;color:var(--gold)}.header-meta{font-size:.8rem;font-weight:500;color:var(--text-dim);letter-spacing:.05em;display:flex;align-items:center;gap:15px}.header-ts{font-size:.75rem;color:var(--text);opacity:.8}.search-box{background:#0000004d;border:1px solid var(--border);color:var(--text);padding:8px 14px;font-family:Inter,sans-serif;font-size:.8rem;outline:none;border-radius:10px;width:220px;transition:border-color .2s}.search-box:focus{border-color:#f5a6234d}.body{width:100%;height:100%;position:relative}.floor-wrap{position:absolute;left:155px;right:355px;top:116px;bottom:24px;display:flex;flex-direction:column;padding:0;gap:16px;z-index:10}#floorplan{flex:1;width:100%;background:transparent;overflow:hidden}.room-rect{cursor:pointer;transition:fill .2s,filter .2s}.room-rect:hover{filter:brightness(.92)}.timeline-wrap{position:absolute;top:110px;left:24px;bottom:24px;width:120px;z-index:100;display:flex;flex-direction:column;align-items:stretch;gap:16px;pointer-events:none}.mode-toggle{background:var(--panel);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:12px;height:40px;display:flex;padding:4px;pointer-events:auto;box-shadow:0 4px 12px #0000004d}.mode-btn{flex:1;border:none;background:transparent;color:var(--text-dim);font-size:.75rem;font-weight:700;border-radius:8px;cursor:pointer;transition:all .2s}.mode-btn.active{background:#ffffff1a;color:#fff}.mode-btn.active.live{color:var(--gold);text-shadow:0 0 8px var(--gold)}.mode-btn.active.history{color:var(--text)}.timeline-island{background:var(--panel);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:20px;padding:16px 12px;flex:1;display:flex;flex-direction:column;position:relative;pointer-events:auto;opacity:.5;transition:opacity .3s;overflow:hidden}.timeline-island.active{opacity:1}.slider-area{flex:1;display:flex;flex-direction:row;gap:6px;min-height:0;position:relative}.time-markers{display:flex;flex-direction:column;justify-content:space-between;width:38px;flex-shrink:0;pointer-events:none;padding:6px 0}.marker{font-size:9px;color:var(--text-dim);font-family:Courier New,monospace;text-align:right;line-height:1}.marker.hour{color:#ffffff8c}.vslider-wrap{flex:1;display:flex;justify-content:center;align-items:stretch;position:relative;padding:6px 0;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}.vtrack{position:absolute;left:50%;transform:translate(-50%);top:6px;bottom:6px;width:6px;background:#ffffff14;border-radius:3px;pointer-events:none;overflow:visible}.vtrack-fill{position:absolute;bottom:0;left:0;right:0;background:#f5a62359;border-radius:3px;transition:height .05s;pointer-events:none}.vtrack-future{position:absolute;top:0;left:0;right:0;background:repeating-linear-gradient(-45deg,rgba(239,68,68,.22) 0px,rgba(239,68,68,.22) 2px,transparent 2px,transparent 6px);border-radius:3px 3px 0 0;transition:height .3s;pointer-events:none;display:none}.vthumb{position:absolute;left:50%;transform:translate(-50%) translateY(50%);width:20px;height:20px;background:var(--gold);border:2px solid #fff;border-radius:50%;box-shadow:0 0 14px #f5a623d9,0 0 4px #fff6;pointer-events:none;z-index:10}.ruler-tick{position:absolute;right:100%;margin-right:4px;background:#ffffff26;height:1px;transform:translateY(50%)}.ruler-tick.hour{width:10px;background:#fff6}.ruler-tick.half{width:5px}.ruler-label{position:absolute;right:100%;margin-right:18px;transform:translateY(50%);font-size:9px;color:var(--text-dim);font-family:Courier New,monospace;line-height:1}.session-highlight{position:absolute;left:0;right:0;background:var(--gold);opacity:.45;border-radius:2px;pointer-events:none;box-shadow:0 0 4px var(--gold)}.date-picker-wrap{background:var(--panel);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--border);border-radius:12px;padding:8px;display:flex;align-items:center;justify-content:center;pointer-events:auto}.date-picker-wrap input[type=date]{background:transparent;border:none;color:#fff;font-family:inherit;font-size:.75rem;outline:none;cursor:pointer;width:100%;text-align:center}.date-picker-wrap input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1)}.replay-badge{position:absolute;top:110px;left:160px;background:var(--gold);color:#0a0a0f;padding:6px 14px;border-radius:8px;font-size:.75rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;z-index:90;box-shadow:0 4px 12px #00000080}.current-playback-time{position:absolute;top:142px;left:160px;font-size:1.8rem;font-weight:800;color:#fff;z-index:90;font-family:Courier New,monospace;letter-spacing:-.05em}.right{position:absolute;top:24px;right:24px;bottom:24px;width:320px;display:flex;flex-direction:column;gap:24px;z-index:50;pointer-events:none}.panel-section,.log-wrap{background:var(--panel);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 32px #0000004d;display:flex;flex-direction:column;flex-shrink:0;pointer-events:auto}.panel-section{padding:20px}.section-title{font-size:.75rem;font-weight:600;letter-spacing:.1em;color:var(--text-dim);margin-bottom:16px}.host-list{display:flex;flex-direction:column;gap:12px}.host-row{display:flex;align-items:center;gap:12px;font-size:.8rem}.host-indicator{width:10px;height:10px;border-radius:50%;flex-shrink:0;transition:background .4s,box-shadow .4s}.host-indicator.online{background:var(--gold);box-shadow:0 0 8px var(--gold);animation:hpulse 2s ease-in-out infinite}.host-indicator.offline{background:var(--red);box-shadow:0 0 6px var(--red)}@keyframes hpulse{0%,to{opacity:1}50%{opacity:.4}}.device-list-panel{display:flex;flex-direction:column;gap:8px;max-height:280px;overflow-y:auto;padding-right:4px}.device-list-panel::-webkit-scrollbar{width:4px}.device-list-panel::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.device-row{border:1px solid var(--border);padding:5px 14px 5px 2px;background:#ffffff08;position:relative;overflow:hidden;transition:opacity .4s,background .2s;border-radius:10px;display:flex;flex-direction:column;justify-content:center;min-height:40px}.device-row:hover{background:#ffffff0f}.device-row.lost{opacity:.4}.device-row .accent{position:absolute;left:2px;top:4px;bottom:4px;width:4px;border-radius:4px}.device-title-row{display:flex;align-items:center;gap:8px;margin-left:14px;margin-right:46px;white-space:nowrap;overflow:hidden}.device-row-name{font-size:.85rem;font-weight:600;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.device-row-rssi{font-size:.65rem;color:var(--text);opacity:.6}.device-row-room{font-size:.7rem;color:var(--text-dim);margin-top:2px;margin-left:14px}.device-conf{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:.85rem;font-weight:700}.log-wrap{flex:1;overflow:hidden;display:flex;flex-direction:column}.log-title{font-size:.75rem;font-weight:600;letter-spacing:.1em;color:var(--text-dim);padding:20px 20px 12px;border-bottom:1px solid var(--border);flex-shrink:0}.log-entries{flex:1;overflow-y:auto;padding:8px 20px 20px}.log-entries::-webkit-scrollbar{width:4px}.log-entries::-webkit-scrollbar-thumb{background:#fff3;border-radius:2px}.log-entry{font-size:.75rem;line-height:1.6;border-bottom:1px solid var(--border);padding:8px 0}.log-entry.move{color:var(--text)}.log-entry.appear{color:var(--green)}.log-entry.info{color:var(--text-dim)}.log-ts{color:var(--text-dim);margin-right:8px}@keyframes logflash{0%{background:#f5a6231a}to{background:transparent}}.log-entry.new{animation:logflash 1s ease-out}.device-node{cursor:pointer}.device-node .device-label-el{opacity:0;transition:opacity .2s ease-in-out;pointer-events:none}.device-node:hover .device-label-el{opacity:1}@keyframes slideDown{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}@keyframes pulseRed{0%,to{box-shadow:0 12px 48px #ef444433,0 0 24px #ef44441a}50%{box-shadow:0 12px 48px #ef444466,0 0 40px #ef444440}}@keyframes pulseAmber{0%,to{box-shadow:0 8px 32px #f59e0b1f,0 0 16px #f59e0b14}50%{box-shadow:0 8px 32px #f59e0b40,0 0 28px #f59e0b26}}@keyframes blink{0%,to{opacity:1}50%{opacity:.3}}@keyframes pulseGold{0%,to{box-shadow:0 0 8px #f5a62333}50%{box-shadow:0 0 20px #f5a62366}}