:root{--color-gold: #c9a84c;--color-gold-light: #e0c16f;--color-gold-dark: #a38833;--text-primary: #e0e0e0;--text-secondary: #bbb;--text-muted: rgba(255, 255, 255, .4);--bg-primary: #0a0a0a;--bg-card: rgba(10, 10, 10, .92);--bg-overlay: rgba(0, 0, 0, .85);--border-primary: rgba(255, 255, 255, .08);--border-gold: rgba(201, 168, 76, .25);--color-success: #4caf50;--color-warning: #ff9800;--color-error: #f44336;--color-info: #64b5f6;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 14px;--font-body: system-ui, -apple-system, sans-serif;--font-heading: "Cinzel", serif;--font-mono: "Consolas", "Monaco", monospace}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-body)}#app{width:100%;height:100vh;position:relative}.constellation-layout{width:100%;height:100vh}.viewer-area{position:relative;width:100%;height:100%}canvas{display:block;width:100%!important;height:100%!important}.header-bar{position:absolute;top:0;left:0;right:0;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;pointer-events:none;z-index:10}.header-bar>*{pointer-events:auto}.title-bar .title{font-family:var(--font-heading);font-size:1.4rem;color:var(--text-primary);letter-spacing:3px;margin:0}.title-bar .gold{color:var(--color-gold)}.title-bar .subtitle{font-size:.75rem;color:var(--text-muted);margin-top:4px}.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--color-success);margin-left:8px;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.header-actions{display:flex;align-items:center;gap:12px}.health-summary{display:flex;align-items:center;gap:6px;padding:6px 12px;background:var(--bg-card);border:1px solid var(--border-primary);border-radius:var(--radius-md);font-size:.8rem}.health-summary.ok{border-color:#4caf504d}.health-summary.warning{border-color:#ff98004d}.health-summary.critical{border-color:#f443364d}.user-badge{padding:6px 12px;background:var(--bg-card);border:1px solid var(--border-primary);border-radius:var(--radius-md);font-size:.8rem;color:var(--text-secondary)}.btn-logout{padding:6px 12px;background:transparent;border:1px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer;font-size:.75rem}.btn-logout:hover{border-color:var(--color-gold);color:var(--color-gold)}.view-controls{position:absolute;bottom:20px;right:16px;display:flex;flex-direction:column;gap:4px;z-index:10}.view-btn{background:var(--bg-card);border:1px solid var(--border-primary);border-radius:7px;padding:7px 13px;color:#ffffff61;font-size:.75rem;cursor:pointer;transition:all .15s}.view-btn:hover,.view-btn.active{border-color:#c9a84c59;color:var(--color-gold)}.legend{position:absolute;top:80px;right:16px;display:flex;flex-direction:column;gap:4px;z-index:10;pointer-events:none}.legend-item{display:flex;align-items:center;gap:8px;font-size:.7rem;color:var(--text-muted)}.legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.side-panel{position:absolute;top:0;right:0;width:420px;max-width:90vw;height:100vh;background:var(--bg-card);backdrop-filter:blur(20px);border-left:1px solid var(--border-gold);padding:24px;overflow-y:auto;transform:translate(100%);transition:transform .3s ease;z-index:20}.side-panel.open{transform:translate(0)}.panel-header{display:flex;align-items:center;justify-content:space-between;padding-bottom:16px;border-bottom:1px solid var(--border-primary);margin-bottom:16px}.panel-title{font-family:var(--font-heading);font-size:1.1rem;color:var(--color-gold);letter-spacing:1px}.panel-close{background:transparent;border:none;color:var(--text-muted);font-size:1.4rem;cursor:pointer;padding:4px 8px}.panel-close:hover{color:var(--color-gold)}.panel-section{margin-bottom:20px}.panel-section h4{font-size:.7rem;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);margin-bottom:8px}.panel-row{display:flex;justify-content:space-between;padding:6px 0;font-size:.85rem;border-bottom:1px solid rgba(255,255,255,.03)}.panel-row:last-child{border-bottom:none}.panel-row-label{color:var(--text-muted)}.panel-row-value{color:var(--text-primary);font-family:var(--font-mono);font-size:.8rem}.panel-btn{display:block;width:100%;padding:10px 14px;background:#c9a84c1a;border:1px solid var(--border-gold);border-radius:var(--radius-md);color:var(--color-gold);font-size:.85rem;cursor:pointer;margin-top:10px;transition:all .15s;text-align:center}.panel-btn:hover{background:#c9a84c33;border-color:var(--color-gold)}.panel-btn.danger{background:#f443361a;border-color:#f443364d;color:var(--color-error)}.panel-btn.danger:hover{background:#f4433633}.metric-bar{flex:1;height:4px;background:#ffffff0f;border-radius:2px;overflow:hidden}.metric-fill{height:100%;background:var(--color-gold);border-radius:2px;transition:width .5s ease}.metric-fill.warn{background:var(--color-warning)}.metric-fill.crit{background:var(--color-error)}.status-badge{font-size:.65rem;font-weight:600;letter-spacing:1px;padding:2px 8px;border-radius:4px;background:#ffffff14;color:var(--text-muted);text-transform:uppercase}.status-badge.up{background:#4caf5033;color:var(--color-success)}.status-badge.down{background:#f4433633;color:var(--color-error)}.status-badge.unhealthy{background:#ff980033;color:var(--color-warning)}.login-overlay{position:fixed;inset:0;background:var(--bg-primary);display:flex;align-items:center;justify-content:center;z-index:100}.login-box{background:var(--bg-card);border:1px solid var(--border-gold);border-radius:var(--radius-lg);padding:40px;width:100%;max-width:400px;text-align:center}.login-box h1{font-family:var(--font-heading);color:var(--color-gold);font-size:1.6rem;margin-bottom:8px;letter-spacing:3px}.login-box p{color:var(--text-muted);font-size:.85rem;margin-bottom:24px}.login-box input{width:100%;padding:10px 14px;background:#0000004d;border:1px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-primary);font-family:inherit;margin-bottom:12px}.login-box input:focus{outline:none;border-color:var(--color-gold)}.login-box button{width:100%;padding:12px;background:var(--color-gold);border:none;border-radius:var(--radius-md);color:var(--bg-primary);font-weight:600;cursor:pointer;margin-top:8px}.btn-security{padding:6px 12px;background:transparent;border:1px solid var(--border-primary);border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer;font-size:.75rem}.btn-security:hover{border-color:var(--color-gold);color:var(--color-gold)}.login-divider{display:flex;align-items:center;gap:12px;margin:20px 0 16px;color:var(--text-muted);font-size:.75rem}.login-divider:before,.login-divider:after{content:"";flex:1;height:1px;background:var(--border-primary)}.webauthn-btn{width:100%;padding:12px;background:transparent;border:1px solid var(--border-gold);border-radius:var(--radius-md);color:var(--color-gold);font-weight:600;cursor:pointer;margin-top:8px;transition:background .15s}.webauthn-btn:hover{background:#c9a84c1a}.webauthn-btn:disabled{opacity:.5;cursor:wait}.webauthn-status{font-size:.75rem;margin-top:8px;min-height:1.2em}.credential-card{padding:12px 0;border-bottom:1px solid var(--border-primary);margin-bottom:8px}.credential-card:last-child{border-bottom:none}.credential-actions{display:flex;gap:6px;margin-top:8px}.toast-container{position:fixed;bottom:24px;left:50%;transform:translate(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;pointer-events:none}.toast{background:var(--bg-card);border:1px solid var(--border-primary);border-radius:var(--radius-md);padding:12px 18px;color:var(--text-primary);font-size:.85rem;pointer-events:auto;animation:toastSlideIn .3s ease}.toast.success{border-color:#4caf5066}.toast.error{border-color:#f4433666}.toast.warning{border-color:#ff980066}@keyframes toastSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.side-panel{width:100vw;max-width:100vw;height:60vh;top:auto;bottom:0;right:0;border-left:none;border-top:1px solid var(--border-gold);border-radius:var(--radius-lg) var(--radius-lg) 0 0;transform:translateY(100%)}.side-panel.open{transform:translateY(0)}.header-bar{padding:12px 16px}.title-bar .title{font-size:1.1rem;letter-spacing:2px}.legend{top:60px;right:8px}.view-controls{bottom:10px;right:8px}}