:root{--bg-primary: #1e1e1e;--bg-secondary: #2a2a2a;--bg-card: #242424;--bg-hover: #303030;--border-color: #404040;--text-primary: #e0e0e0;--text-secondary: #b0b0b0;--text-muted: #808080;--accent-blue: #00b5d8;--accent-purple: #b794f6;--status-healthy: #48bb78;--status-progressing: #fbbf24;--status-degraded: #f56565;--status-unhealthy: #f56565;--status-unknown: #9f7aea;--status-synced: #48bb78;--status-outof-sync: #fbbf24}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bg-primary);color:var(--text-primary);min-height:100vh}code{font-family:Fira Code,Courier New,monospace}a{color:var(--accent-blue);text-decoration:none}a:hover{text-decoration:underline}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--bg-secondary)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:5px}::-webkit-scrollbar-thumb:hover{background:#505050}.app{display:flex;flex-direction:column;min-height:100vh}.top-nav{background:var(--bg-secondary);border-bottom:1px solid var(--border-color);padding:0 30px;height:60px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;gap:30px;position:relative}.nav-brand{flex:0 0 auto}.nav-brand h2{font-size:20px;font-weight:600;color:var(--accent-blue);margin:0}.nav-title{position:absolute;left:50%;transform:translate(-50%)}.nav-title h1{font-size:24px;font-weight:700;color:var(--text-primary);margin:0}.nav-links{display:flex;gap:8px;align-items:center;margin-left:auto}.nav-link{padding:8px 16px;color:var(--text-secondary);text-decoration:none;font-size:14px;font-weight:500;border-radius:6px;transition:all .2s ease}.nav-link:hover{color:var(--text-primary);background:var(--bg-hover)}.nav-link.active{color:var(--accent-blue);background:#00b5d81a}.main-content{flex:1;overflow-y:auto}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;color:var(--text-secondary)}.spinner{width:40px;height:40px;border:3px solid var(--border-color);border-top-color:var(--accent-blue);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:15px}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:768px){.top-nav{flex-direction:column;height:auto;padding:15px;gap:15px}.nav-links{width:100%;justify-content:center}}