.app{display:flex;height:100vh}
.sidebar{width:var(--sidebar-width);background:var(--bg-secondary);border-right:1px solid var(--border);display:flex;flex-direction:column;transition:transform .2s;z-index:100;flex-shrink:0}
.sidebar-header{padding:16px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
.logo{display:flex;align-items:center;gap:8px}.logo-icon{font-size:24px}.logo-text{font-size:16px;font-weight:700}.logo-badge{font-size:10px;background:var(--accent);color:#fff;padding:2px 6px;border-radius:10px;font-weight:600}
.sidebar-nav{flex:1;padding:12px 8px;display:flex;flex-direction:column;gap:2px}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--radius);color:var(--text-secondary);transition:var(--transition);font-weight:500;font-size:13px}
.nav-item:hover{background:var(--bg-card);color:var(--text-primary)}.nav-item.active{background:var(--accent);color:#fff}.nav-item svg{flex-shrink:0}
.sidebar-footer{padding:12px 16px;border-top:1px solid var(--border)}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.topbar{height:var(--topbar-height);background:var(--bg-secondary);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 20px;gap:12px;flex-shrink:0}
.menu-toggle{display:none;background:none;border:none;color:var(--text-primary);font-size:20px;cursor:pointer}
.topbar-title{flex:1}.topbar-title h1{font-size:16px;font-weight:600}.breadcrumb{font-size:11px;color:var(--text-muted)}
.topbar-actions{display:flex;align-items:center;gap:10px}.topbar-time{font-size:12px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.content{flex:1;overflow-y:auto;padding:20px}
.vm-badge{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}.dot.online{background:var(--green);box-shadow:0 0 6px var(--green)}.dot.offline{background:var(--red)}.dot.unknown{background:var(--yellow)}