.lunar-app-layout { display: flex; flex-direction: column; height: 100%; width: 100%; overflow: hidden; background: #0d1117; color: #c9d1d9; border-radius: 6px; } .top-bar { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 10px 20px; background: #161b22; border-bottom: 1px solid #30363d; flex-shrink: 0; gap: 20px; } .controls-section { display: flex; gap: 10px; align-items: center; } .stats-section { display: flex; gap: 15px; align-items: center; } .stat-card { display: flex; flex-direction: column; align-items: center; background: #21262d; padding: 5px 15px; border-radius: 6px; border: 1px solid #30363d; min-width: 80px; } .stat-label { font-size: 0.75em; color: #8b949e; text-transform: uppercase; letter-spacing: 0.5px; } .stat-value { font-size: 1.1em; font-weight: bold; color: #c9d1d9; font-family: monospace; } .stat-value.highlight { color: #58a6ff; } .vis-column { display: flex; flex-direction: column; flex: 1; overflow: hidden; min-width: 0; } .graph-panel { height: 180px; /* Slightly shorter */ background: #161b22; border-top: 1px solid #30363d; padding: 10px 15px; display: flex; flex-direction: column; flex-shrink: 0; box-sizing: border-box; } .graph-panel h3 { margin-top: 0; margin-bottom: 5px; font-size: 0.9em; color: #58a6ff; } .main-view { flex: 1; position: relative; overflow: hidden; display: flex; justify-content: center; align-items: center; background: #000; } /* Controls */ .btn-toggle { padding: 8px 16px; border: 1px solid #30363d; border-radius: 6px; background: #238636; color: white; font-weight: bold; cursor: pointer; transition: background 0.2s; font-size: 0.9em; display: flex; align-items: center; gap: 6px; } .btn-toggle.active { background: #da3633; } .btn-toggle:hover { filter: brightness(1.1); } .btn-reset { background: #30363d; border-color: #30363d; }