:root{--bg: #0f0f0f;--bg-secondary: #1a1a1a;--bg-tertiary: #252525;--text: #e0e0e0;--text-secondary: #888;--accent: #7c8aff;--accent-hover: #9ca6ff;--border: #333;--success: #4CAF50;--warning: #FFC107;--error: #F44336;--radius: 8px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;overflow:hidden}.topbar{display:flex;justify-content:space-between;align-items:center;padding:0 20px;background:var(--bg-secondary);border-bottom:1px solid var(--border);height:56px}.topbar-left{display:flex;align-items:center;gap:16px}.topbar-center{display:flex;align-items:center}.topbar-right{display:flex;align-items:center;gap:10px}.logo{font-size:18px;font-weight:700;color:var(--accent);letter-spacing:2px}.view-tabs{display:flex;gap:4px;background:var(--bg-tertiary);padding:4px;border-radius:var(--radius)}.view-tab{padding:8px 16px;border:none;background:transparent;color:var(--text-secondary);font-size:13px;font-weight:500;cursor:pointer;border-radius:6px;transition:all .2s}.view-tab:hover{color:var(--text);background:#ffffff0d}.view-tab.active{background:var(--accent);color:#fff}.header{display:flex;justify-content:space-between;align-items:center;padding:12px 24px;background:var(--bg-secondary);border-bottom:1px solid var(--border);height:60px}.header-left{display:flex;align-items:center;gap:16px}.header-right{display:flex;gap:12px}.btn{padding:8px 16px;border-radius:var(--radius);border:none;background:var(--accent);color:#fff;font-size:14px;cursor:pointer;transition:background .2s;text-decoration:none}.btn:hover{background:var(--accent-hover)}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-outline{background:transparent;border:1px solid var(--accent);color:var(--accent)}.btn-outline:hover{background:var(--accent);color:#fff}.btn-sm{padding:6px 12px;font-size:12px}.main{height:calc(100vh - 60px);position:relative;overflow:hidden}.loading{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-secondary);font-size:16px}.empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-secondary)}.graph-sidebar{position:absolute;top:16px;left:16px;width:240px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:16px;z-index:100;max-height:calc(100% - 32px);overflow-y:auto}.sidebar-header h3{font-size:16px;margin-bottom:16px;color:var(--accent)}.graph-section{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border)}.graph-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}.graph-section-title{font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;margin-bottom:12px}.graph-stat{display:flex;justify-content:space-between;margin-bottom:8px;font-size:14px}.graph-stat-value{font-weight:600;color:var(--accent)}.graph-checkbox{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:14px;cursor:pointer}.graph-checkbox input{accent-color:var(--accent)}.graph-select{margin-top:12px}.graph-select label{display:block;font-size:12px;color:var(--text-secondary);margin-bottom:4px}.graph-select select{width:100%;padding:8px;border-radius:var(--radius);border:1px solid var(--border);background:var(--bg-tertiary);color:var(--text);font-size:14px}.graph-slider{margin-top:12px}.graph-slider-label{display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px}.graph-slider-value{color:var(--accent)}.graph-slider input[type=range]{width:100%;accent-color:var(--accent)}.graph-controls{position:absolute;top:16px;right:16px;display:flex;gap:8px;z-index:100}.graph-legend{position:absolute;bottom:16px;left:16px;display:flex;gap:24px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;z-index:100}.legend-section{display:flex;align-items:center;gap:12px}.legend-title{font-size:11px;font-weight:600;color:var(--text-secondary);text-transform:uppercase}.legend-item{display:flex;align-items:center;gap:6px;font-size:12px}.color-dot{width:12px;height:12px;border-radius:50%}.color-ring{width:12px;height:12px;border-radius:50%;border:3px solid;background:transparent}.color-line{width:20px;height:3px;border-radius:2px}.color-line.dashed{background:repeating-linear-gradient(90deg,currentColor,currentColor 4px,transparent 4px,transparent 8px)!important}.node-detail{position:absolute;top:16px;right:16px;width:300px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:16px;z-index:200;display:none;margin-top:48px}.node-detail.open{display:block}.detail-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border)}.detail-header h4{font-size:18px;color:var(--accent)}.status-badge{padding:4px 10px;border-radius:12px;font-size:11px;font-weight:600;text-transform:uppercase}.status-badge.healthy{background:#4caf5033;color:var(--success)}.status-badge.running{background:#8bc34a33;color:#8bc34a}.status-badge.warning{background:#ffc10733;color:var(--warning)}.status-badge.error{background:#f4433633;color:var(--error)}.status-badge.suspended{background:#9e9e9e33;color:#9e9e9e}.detail-row{margin-bottom:8px;font-size:14px}.detail-row strong{color:var(--text-secondary)}.detail-row a{color:var(--accent)}.detail-section{margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}.detail-section-title{font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;margin-bottom:8px}.detail-services{margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}.detail-service{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:13px}.status-dot{width:8px;height:8px;border-radius:50%}.status-dot.healthy{background:var(--success)}.status-dot.running{background:#8bc34a}.status-dot.warning{background:var(--warning)}.status-dot.error{background:var(--error)}.uptime{margin-left:auto;color:var(--text-secondary);font-size:11px}svg{display:block;background:var(--bg)}.node-label,.node-icon{pointer-events:none;-webkit-user-select:none;user-select:none}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-secondary)}.columns-table{max-height:300px;overflow-y:auto;margin-top:8px}.column-row{display:flex;align-items:center;gap:8px;padding:6px 8px;font-size:12px;border-radius:4px;margin-bottom:2px}.column-row:hover{background:var(--bg-tertiary)}.column-row.primary{background:#7c8aff1a}.column-name{font-family:monospace;font-weight:500;flex:1}.column-type{color:var(--text-secondary);font-family:monospace;font-size:11px}.column-not-null{color:var(--warning);font-size:10px;font-weight:600}.loading-small{color:var(--text-secondary);font-size:12px;padding:8px 0}.node-detail{max-height:calc(100vh - 150px);overflow-y:auto}.btn-sync{width:100%;padding:10px 12px;background:var(--primary);color:#fff;border:none;border-radius:6px;cursor:pointer;font-size:13px;font-weight:500;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .2s,opacity .2s}.btn-sync:hover:not(:disabled){background:var(--primary-dark, #5a6be8)}.btn-sync:disabled{opacity:.7;cursor:not-allowed}.sync-icon{font-size:16px;display:inline-block}.sync-icon.spinning{animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.sync-status{margin-top:10px;font-size:12px}.sync-result{padding:6px 8px;border-radius:4px;margin-bottom:4px}.sync-result.success{background:#4caf5026;color:#4caf50}.sync-result.pending{background:#ff980026;color:#ff9800}.sync-result.error{background:#f4433626;color:#f44336}.lock-screen{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999}.lock-screen.hidden{display:none}.lock-logo{font-size:2rem;font-weight:700;color:var(--accent);margin-bottom:2rem;letter-spacing:.1em}.lock-dots{display:flex;gap:12px;margin-bottom:2rem}.lock-dot{width:14px;height:14px;border-radius:50%;background:var(--border);transition:all .15s ease}.lock-dot.filled{background:var(--accent)}.lock-dot.error{background:var(--error);animation:shake .3s ease}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-4px)}75%{transform:translate(4px)}}.lock-keypad{display:grid;grid-template-columns:repeat(3,70px);gap:12px}.lock-key{width:70px;height:70px;border-radius:50%;border:2px solid var(--border);background:transparent;color:var(--text);font-size:1.5rem;font-weight:500;cursor:pointer;transition:all .15s ease;display:flex;align-items:center;justify-content:center}.lock-key:hover{border-color:var(--accent);background:var(--bg-secondary)}.lock-key:active{transform:scale(.95)}.lock-key.empty{visibility:hidden}.lock-key.backspace{font-size:1.2rem}