*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg-deep:#111318;
  --surface:#1A1D24;
  --surface-elevated:#22262F;
  --border:#2A2D35;
  --text-primary:#C8CCD4;
  --text-secondary:#6B7280;
  --text-heading:#E4E7ED;
  --accent-blue:#3B82F6;
  --accent-cyan:#06B6D4;
  --accent-green:#10B981;
  --danger:#EF4444;
  --amber:#F59E0B;
}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg-deep);
  color:var(--text-primary);
  overflow:hidden;
  height:100vh;
  width:100vw;
}
.mono{font-family:'JetBrains Mono',monospace;font-size:0.85em}
.status-bar{
  position:fixed;top:0;left:0;right:0;height:64px;
  background:var(--surface);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;z-index:100;
  border-bottom:1px solid var(--border);
}
.logotype{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1rem;
  color:var(--text-heading);letter-spacing:0.02em;
}
.search-wrapper{flex:0 0 auto}
.search-input{
  width:200px;height:36px;border-radius:18px;border:1px solid var(--border);
  background:var(--surface-elevated);color:var(--text-primary);
  padding:0 16px;font-family:'Inter',sans-serif;font-size:13px;
  outline:none;transition:width 0.3s ease;
}
.search-input:focus{width:400px;border-color:var(--accent-blue)}
.status-bar-right{display:flex;gap:8px;align-items:center}
.status-dot{
  width:6px;height:6px;border-radius:50%;display:inline-block;
}
.status-dot.green{background:var(--accent-green)}
.status-dot.cyan{background:var(--accent-cyan)}
.status-dot.blue{background:var(--accent-blue)}
.status-dot.amber{background:var(--amber)}
.status-dot.red{background:var(--danger)}
.status-dot.inline{margin-left:8px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}

.app-container{
  display:flex;position:fixed;
  top:64px;left:0;right:0;bottom:0;
}
.sidebar{
  width:240px;min-width:240px;
  background:var(--surface);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  justify-content:space-between;
  transition:width 0.3s ease,min-width 0.3s ease;
  overflow:hidden;
}
.sidebar.collapsed{width:56px;min-width:56px}
.sidebar.collapsed .sidebar-label{opacity:0;width:0}
.sidebar-items{padding:16px 0}
.sidebar-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;cursor:pointer;
  color:var(--text-secondary);
  transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1),color 0.2s;
}
.sidebar-item:hover{
  color:var(--text-heading);
  transform:scale(1.02);
}
.sidebar-item:hover .sidebar-icon{transform:translateX(2px)}
.sidebar-item.active{
  color:var(--accent-blue);
  border-right:2px solid var(--accent-blue);
}
.sidebar-icon{
  width:20px;height:20px;flex-shrink:0;
  transition:transform 0.2s ease;
}
.sidebar-label{
  font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:500;
  white-space:nowrap;transition:opacity 0.2s ease;
}
.sidebar-toggle{
  padding:16px;cursor:pointer;color:var(--text-secondary);
  display:flex;align-items:center;justify-content:center;
  transition:transform 0.3s ease;
}
.sidebar.collapsed .sidebar-toggle{transform:rotate(180deg)}

.content-area{
  flex:1;overflow-y:auto;padding:12px;
  display:flex;flex-direction:column;gap:12px;
}
.topology-canvas-wrapper{
  position:relative;width:100%;height:40vh;
  background:var(--surface);border-radius:0;
  overflow:hidden;
}
.topology-canvas{width:100%;height:100%}
.ambient-glow{
  position:absolute;top:50%;left:50%;
  width:600px;height:600px;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(59,130,246,0.03) 0%,transparent 70%);
  pointer-events:none;
  transition:transform 2s ease;
}
.hashmarks{position:absolute;inset:0;pointer-events:none}
.hashmark{position:absolute;width:8px;height:8px}
.hashmark::before,.hashmark::after{
  content:'';position:absolute;background:var(--border);
}
.hashmark::before{width:8px;height:1px;top:0;left:0}
.hashmark::after{width:1px;height:8px;top:0;left:0}
.hashmark.top-left{top:12px;left:12px}
.hashmark.top-right{top:12px;right:12px;transform:rotate(90deg)}
.hashmark.bottom-left{bottom:12px;left:12px;transform:rotate(-90deg)}
.hashmark.bottom-right{bottom:12px;right:12px;transform:rotate(180deg)}

.widgets-grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:12px;
}
.widget{
  background:var(--surface);padding:0;
  transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.widget:hover{transform:scale(1.015)}
.widget-quarter{grid-column:span 3}
.widget-half{grid-column:span 6}
.widget-full{grid-column:span 12}
.widget-header{
  height:32px;display:flex;align-items:center;padding:0 16px;
  border-bottom:1px solid var(--border);
}
.widget-title{
  font-family:'Space Grotesk',sans-serif;font-size:11px;font-weight:500;
  letter-spacing:0.06em;color:var(--text-secondary);text-transform:uppercase;
}
.widget-body{padding:16px}
.data-readout{display:flex;align-items:center;justify-content:space-between}
.data-number{
  font-family:'Space Grotesk',sans-serif;font-size:1.8rem;font-weight:700;
  color:var(--text-heading);
}
.data-unit{font-size:0.5em;color:var(--text-secondary);margin-left:2px}
.sparkline{width:80px;height:24px;flex-shrink:0}
.data-label{
  font-size:12px;color:var(--text-secondary);margin-top:8px;display:block;
}

.activity-list{display:flex;flex-direction:column;gap:12px}
.activity-item{
  display:flex;align-items:center;gap:10px;font-size:13px;
}
.activity-text{flex:1;color:var(--text-primary)}
.activity-time{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  color:var(--text-secondary);
}

.dist-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.dist-label{
  font-size:12px;color:var(--text-secondary);width:80px;
  font-family:'Space Grotesk',sans-serif;
}
.dist-bar{flex:1;height:6px;background:var(--border);border-radius:0;overflow:hidden}
.dist-fill{height:100%}
.dist-fill.blue{background:var(--accent-blue)}
.dist-fill.cyan{background:var(--accent-cyan)}
.dist-fill.green{background:var(--accent-green)}
.dist-fill.amber{background:var(--amber)}
.dist-value{font-size:12px;color:var(--text-secondary);width:36px;text-align:right}

.metrics-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:12px;
}
.metric-card{
  display:flex;flex-direction:column;gap:4px;
  padding:12px;background:var(--bg-deep);
}
.metric-label{
  font-family:'Space Grotesk',sans-serif;font-size:10px;
  letter-spacing:0.06em;color:var(--text-secondary);
}
.metric-value{font-size:14px;color:var(--text-heading)}

.node-detail-panel{
  position:fixed;top:64px;right:0;bottom:0;width:280px;
  background:var(--surface-elevated);
  border-left:1px solid var(--border);
  transform:translateX(100%);
  transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
  z-index:90;padding:0;
}
.node-detail-panel.open{transform:translateX(0)}
.detail-header{
  height:48px;display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;border-bottom:1px solid var(--border);
}
.detail-title{
  font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:500;
  color:var(--text-heading);
}
.detail-close{
  background:none;border:none;color:var(--text-secondary);
  font-size:20px;cursor:pointer;
}
.detail-body{padding:16px;display:flex;flex-direction:column;gap:16px}
.detail-field{display:flex;flex-direction:column;gap:4px}
.detail-label{
  font-family:'Space Grotesk',sans-serif;font-size:10px;
  letter-spacing:0.06em;color:var(--text-secondary);
}
.detail-value{font-size:14px;color:var(--text-heading)}

@media(max-width:1024px){
  .sidebar{width:56px;min-width:56px}
  .sidebar-label{opacity:0;width:0}
  .widget-quarter{grid-column:span 6}
  .metrics-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
  .sidebar{display:none}
  .widget-quarter,.widget-half,.widget-full{grid-column:span 12}
  .metrics-grid{grid-template-columns:repeat(2,1fr)}
  .search-input,.search-input:focus{width:140px}
}