.app-header{container-type:inline-size;display:flex;flex-direction:column;align-items:stretch;gap:.85rem;padding:1.15rem 1.5rem 1rem;border-bottom:1px solid rgba(120,140,255,.18);background:linear-gradient(180deg,#080c28f7,#020014fc);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);position:relative;z-index:2;flex-shrink:0;overflow:visible;isolation:isolate}.app-header:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-2;pointer-events:none;background:radial-gradient(ellipse 55% 120% at 8% 50%,rgba(60,80,160,.12) 0%,transparent 65%),radial-gradient(ellipse 40% 90% at 22% 80%,rgba(100,60,140,.08) 0%,transparent 60%),radial-gradient(ellipse 30% 70% at 45% 20%,rgba(40,100,160,.05) 0%,transparent 55%);animation:app-header-nebula 14s ease-in-out infinite alternate}.app-header:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;z-index:-1;pointer-events:none;background:linear-gradient(90deg,transparent 0%,rgba(80,110,180,.28) 20%,rgba(120,80,160,.32) 50%,rgba(80,110,180,.28) 80%,transparent 100%);box-shadow:0 0 12px #3c508c2e}@keyframes app-header-nebula{0%{opacity:.7;transform:scale(1)}to{opacity:.85;transform:scale(1.02)}}@keyframes app-header-cosmos-glow{0%{background-position:0% 50%}to{background-position:200% 50%}}@keyframes app-header-mark-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.app-header__brand{flex-shrink:0;min-width:0;display:flex;flex-direction:column;gap:.45rem}.app-header__identity{display:flex;align-items:center;gap:.75rem}.app-header__mark{width:2.75rem;height:2.75rem;flex-shrink:0;color:#8a9cc4;filter:drop-shadow(0 0 6px rgba(80,110,180,.25))}.app-header__mark-ring--outer,.app-header__mark-orbit-dot{transform-origin:22px 22px;animation:app-header-mark-spin 24s linear infinite}.app-header__mark-node{filter:drop-shadow(0 0 4px rgba(120,150,200,.4))}.app-header__title{margin:0;font-size:2rem;line-height:1.1;letter-spacing:.02em;display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem}.app-header__title-github{font-family:Inter,system-ui,-apple-system,sans-serif;font-weight:500;color:#c9d4e8;text-shadow:0 0 12px rgba(120,140,180,.12)}.app-header__title-cosmos{font-family:Orbitron,Inter,system-ui,sans-serif;font-weight:700;letter-spacing:.06em;background:linear-gradient(90deg,#6a9fd4,#9a80c8 35%,#b898d8,#6a9fd4 75%,#8aa8d4);background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;animation:app-header-cosmos-glow 6s linear infinite;filter:drop-shadow(0 0 8px rgba(100,120,180,.22))}.app-header__tagline{display:flex;align-items:center;flex-wrap:wrap;gap:.55rem;padding-left:3.5rem}.app-header__tagline p{margin:0;color:#8a9cc4;font-size:.72rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase}.filters{--filter-glow-bleed: 18px;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;width:100%;justify-content:flex-start;overflow:visible;padding-inline:var(--filter-glow-bleed);margin-inline:calc(-1 * var(--filter-glow-bleed));padding-bottom:.1rem}.filters::-webkit-scrollbar{height:4px}.filters::-webkit-scrollbar-thumb{background:#788cff59;border-radius:999px}.filter-chip{border:1px solid rgba(120,140,255,.2);background:#0c1030b3;color:#b8c8e8;border-radius:999px;padding:.35rem .75rem;cursor:pointer;font-size:.8rem;flex-shrink:0;white-space:nowrap;transition:border-color .2s,box-shadow .2s,background .2s}.filter-chip:hover{background:#141c48d9}.filter-chip.active{border-color:var(--chip-color);box-shadow:0 0 16px color-mix(in srgb,var(--chip-color) 45%,transparent);background:color-mix(in srgb,var(--chip-color) 12%,rgba(12,16,48,.8))}@container (min-width: 900px){.app-header{flex-direction:row;align-items:center;justify-content:space-between;gap:1.25rem}.filters{width:auto;flex:1 1 auto;justify-content:flex-end;min-width:0}}@container (min-width: 700px) and (max-width: 899px){.filters{justify-content:flex-end}}@media(max-width:480px){.filters{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(120,140,255,.35) transparent}.app-header{padding:.85rem 1rem .75rem;gap:.65rem}.app-header__mark{width:2.25rem;height:2.25rem}.app-header__title{font-size:1.5rem}.app-header__tagline{padding-left:2.9rem;gap:.4rem}.app-header__tagline p{font-size:.62rem;letter-spacing:.08em}.filter-chip{font-size:.75rem;padding:.3rem .6rem}}@media(prefers-reduced-motion:reduce){.app-header:before,.app-header__title-cosmos,.app-header__mark-ring--outer,.app-header__mark-orbit-dot{animation:none}}.space-auto-rotate-btn{position:absolute;right:1rem;bottom:1rem;z-index:2;border:1px solid rgba(120,180,255,.35);background:#0c1030d9;color:#a8c7ff;border-radius:999px;padding:.45rem .85rem;font-size:.8rem;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:border-color .2s,box-shadow .2s,background .2s}.space-auto-rotate-btn:hover{border-color:#78b4ff99;background:#141c48eb;box-shadow:0 0 16px #78b4ff33}.space-labels-btn{position:absolute;left:1rem;bottom:1rem;z-index:2;border:1px solid rgba(120,180,255,.35);background:#0c1030d9;color:#a8c7ff;border-radius:999px;padding:.45rem .85rem;font-size:.8rem;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:border-color .2s,box-shadow .2s,background .2s,opacity .2s}.space-labels-btn[aria-pressed=false]{color:#6a7a9a;border-color:#6478a040}.space-labels-btn:hover{border-color:#78b4ff99;background:#141c48eb;box-shadow:0 0 16px #78b4ff33}@media(max-width:480px){.space-auto-rotate-btn{right:.75rem;bottom:.75rem;font-size:.75rem;padding:.35rem .7rem}.space-labels-btn{left:.75rem;bottom:.75rem;font-size:.75rem;padding:.35rem .7rem}}.cosmos-nav{position:absolute;top:1rem;left:50%;transform:translate(-50%);z-index:10;pointer-events:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;max-width:calc(100% - 2rem);padding:.35rem;border-radius:999px;border:1px solid rgba(120,180,255,.25);background:#0c1030d9;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.cosmos-nav__btn{border:1px solid transparent;background:transparent;color:#8a9cc4;border-radius:999px;padding:.35rem .75rem;font-size:.75rem;cursor:pointer;white-space:nowrap;transition:color .2s,background .2s,border-color .2s}.cosmos-nav__btn:hover{color:#c8d8ff;background:#1e285a99}.cosmos-nav__btn--active{color:#d4e4ff;border-color:#78b4ff73;background:#283878bf;box-shadow:0 0 12px #78b4ff26}@media(max-width:480px){.cosmos-nav{top:.75rem;gap:.3rem;padding:.3rem}.cosmos-nav__btn{font-size:.7rem;padding:.3rem .6rem}}.cluster-loading-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;text-align:center;color:#a8c7ff;pointer-events:none;z-index:2;background:#0200148c;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.cluster-loading-overlay__ring{width:56px;height:56px;margin:0 auto 1rem;border:2px solid rgba(120,180,255,.2);border-top-color:#79c0ff;border-radius:50%;animation:cluster-loading-spin .9s linear infinite}.cluster-loading-overlay__label{margin:0;font-size:.85rem;letter-spacing:.04em;opacity:.9}@keyframes cluster-loading-spin{to{transform:rotate(360deg)}}.galaxy-back-btn{position:absolute;left:1rem;top:1rem;z-index:2;border:1px solid rgba(120,180,255,.35);background:#0c1030d9;color:#a8c7ff;border-radius:999px;padding:.45rem .85rem;font-size:.8rem;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:border-color .2s,box-shadow .2s,background .2s}.galaxy-back-btn:hover{border-color:#78b4ff99;background:#141c48eb;box-shadow:0 0 16px #78b4ff33}@media(max-width:480px){.galaxy-back-btn{left:.75rem;top:.75rem;font-size:.75rem;padding:.35rem .7rem}}.space-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;text-align:center;color:#7a8cb8;pointer-events:none;z-index:1}.space-placeholder__ring{width:80px;height:80px;margin:0 auto 1.5rem;border:2px solid rgba(120,180,255,.2);border-top-color:#79c0ff;border-radius:50%;animation:spin 2s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.space-placeholder .hint{max-width:28rem;font-size:.9rem;margin:.5rem auto 0;opacity:.8}@media(max-width:480px){.space-placeholder{padding:1rem}.space-placeholder .hint{font-size:.8rem}}.space-visualization-shell{position:relative;flex:1 1 auto;width:100%;height:100%;min-height:0;min-width:0;overflow:hidden}.space-visualization{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;background:radial-gradient(ellipse at 50% 0%,rgba(60,30,120,.25) 0%,transparent 55%),radial-gradient(ellipse at 80% 90%,rgba(20,80,120,.15) 0%,transparent 40%),#020014}.space-visualization canvas{display:block;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:0}:root{--app-height: 100dvh;color:#d4e4ff;background:#020014;font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.5}*{box-sizing:border-box}html,body,#root{height:100%;overflow:hidden}body{margin:0}.app{height:var(--app-height);width:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden}.app-main{min-height:0;min-width:0;display:flex;position:relative;overflow:hidden}.status-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem 1rem;padding:.75rem 1.25rem;border-top:1px solid rgba(120,140,255,.12);background:#040618eb;font-size:.85rem;position:relative;z-index:2;flex-shrink:0}.status-bar__left{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem}.status-dot{width:.65rem;height:.65rem;border-radius:50%;background:#7a8cb8}.status-dot.connected{background:#56d364;box-shadow:0 0 10px #56d364}.status-dot.connecting,.status-dot.reconnecting{background:#e3b341;box-shadow:0 0 8px #e3b341}.status-dot.disconnected{background:#ff7b72}.status-bar__total{display:inline-flex;align-items:center;gap:.35rem;font-weight:500;color:#c9d1d9;min-width:6.5rem}.status-bar__total-value{min-width:4ch;text-align:right;font-variant-numeric:tabular-nums}.status-bar__total-label{color:#7a8cb8}.status-bar__type-counts{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.5rem 1.25rem;margin-left:auto}.status-bar__type-count{display:inline-flex;align-items:center;gap:.28rem;min-width:4.75rem;font-variant-numeric:tabular-nums}.status-bar__type-label{color:#7a8cb8;font-size:.8em;flex-shrink:0}.status-bar__type-value{color:var(--type-color, #c9d1d9);font-weight:500;min-width:3ch;text-align:right;flex-shrink:0}@media(max-width:480px){.status-bar{padding:.5rem 1rem;font-size:.75rem;gap:.35rem .75rem}.status-bar__total{min-width:5.75rem}.status-bar__type-counts{gap:.35rem .85rem}.status-bar__type-count{min-width:3.85rem}}
