:root{--bg-primary: #0d1117;--bg-surface: #161b22;--bg-overlay: rgba(255, 255, 255, .04);--border-subtle: rgba(255, 255, 255, .08);--text-primary: #e6edf3;--text-secondary: #8b949e;--text-muted: #6e7681;--color-online: #34d058;--color-offline: #f85149;--color-warn: #f0883e;--color-info: #58a6ff;--color-stream-local: #bc8cff;--color-stream-direct: #34d058;--color-stream-transcode: #ffa657;--radius-sm: 6px;--radius-md: 8px;--font-mono: "JetBrains Mono", "Fira Code", "SF Mono", monospace}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,SF Pro Text,Segoe UI,Helvetica,Arial,sans-serif;background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.ops-shell{display:grid;grid-template-rows:auto 1fr;height:100vh;overflow:hidden}.ops-topbar{padding:12px 20px;display:flex;align-items:center;justify-content:space-between;background:#161b22b8;backdrop-filter:blur(20px) saturate(1.8);-webkit-backdrop-filter:blur(20px) saturate(1.8);border-bottom:1px solid rgba(255,255,255,.08);z-index:10}.ops-topbar .brand h1{font-size:17px;font-weight:600;color:var(--text-primary);letter-spacing:-.02em}.ops-content{display:grid;grid-template-columns:1fr 3fr;grid-template-rows:1fr;gap:14px;padding:14px;overflow-y:auto;align-items:start}.left-col{display:flex;flex-direction:column;gap:14px}.tile-label{position:absolute;top:10px;left:12px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:#e6edf3b3;z-index:2;pointer-events:none;text-shadow:0 1px 4px rgba(0,0,0,.5)}.mini-map-tile{position:relative;display:block;width:100%;aspect-ratio:4 / 3;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:#ffffff0a;backdrop-filter:blur(40px) saturate(1.8);-webkit-backdrop-filter:blur(40px) saturate(1.8);overflow:hidden;cursor:pointer;text-decoration:none;transition:transform .35s cubic-bezier(.25,.46,.45,.94),box-shadow .35s cubic-bezier(.25,.46,.45,.94),border-color .35s ease;will-change:transform;animation:fadeInScale .6s cubic-bezier(.25,.46,.45,.94) both}.mini-map-tile:hover{transform:translateY(-3px) scale(1.008);box-shadow:0 12px 40px #00000059,0 0 0 1px #58a6ff26;border-color:#58a6ff40}.mini-map-tile:active{transform:translateY(-1px) scale(.99);transition-duration:.1s}#mini-map{width:100%;height:100%}.map-overlay-hint{position:absolute;bottom:10px;left:50%;transform:translate(-50%) translateY(4px);background:#0d1117d9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--text-secondary);font-size:11px;font-weight:500;letter-spacing:.02em;padding:5px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.08);opacity:0;transition:opacity .25s ease,transform .25s cubic-bezier(.25,.46,.45,.94);pointer-events:none}.mini-map-tile:hover .map-overlay-hint{opacity:1;transform:translate(-50%) translateY(0)}ops-grid{display:flex;flex-direction:column;gap:14px;overflow-y:auto}@keyframes fadeInScale{0%{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}@media(max-width:900px){.ops-content{grid-template-columns:1fr}.mini-map-tile{max-width:400px}}