html,body,#root{width:100%;height:100%;overflow:hidden}body{background:#0a0e1a}*{box-sizing:border-box;margin:0;padding:0}body{color:#c0c8e0;background:#0a0e1a;font-family:SF Mono,Fira Code,monospace;overflow:hidden}.app{width:100vw;height:100vh;display:flex}.canvas-container{flex:1;position:relative}.panel{background:#0a0e1af2;border-left:1px solid #1a2440;flex-direction:column;gap:16px;width:360px;height:100vh;padding:16px;display:flex;overflow-y:auto}.panel-header{text-align:center;border-bottom:1px solid #1a2440;padding-bottom:12px}.panel-header h1{color:#0f8;letter-spacing:4px;margin-bottom:4px;font-size:22px}.subtitle{color:#5a6a8a;font-size:11px;display:block}.timestamp{color:#3a4a6a;margin-top:4px;font-size:10px;display:block}.stats-row{gap:8px;display:flex}.stat-box{text-align:center;background:#111827;border:1px solid #1a2440;border-radius:6px;flex:1;padding:10px 8px}.stat-value{color:#0f8;font-size:18px;font-weight:700;display:block}.stat-label{color:#5a6a8a;text-transform:uppercase;letter-spacing:1px;font-size:9px}.selected-service{background:#111827;border:1px solid #0f84;border-radius:6px;padding:12px}.selected-service h3{color:#e0e8ff;margin-bottom:8px;font-size:14px}.detail-grid{grid-template-columns:80px 1fr;gap:4px 8px;font-size:12px;display:grid}.detail-grid span:nth-child(odd){color:#5a6a8a}.badge{border-radius:3px;padding:2px 6px;font-size:11px;font-weight:700}.badge.online{color:#0f8;background:#0f82}.badge.stopped{color:#fa0;background:#fa02}.badge.errored{color:#f34;background:#f342}.service-table h3{color:#8090b0;margin-bottom:8px;font-size:13px}.table-scroll{max-height:300px;overflow-y:auto}table{border-collapse:collapse;width:100%;font-size:11px}thead th{text-align:left;color:#5a6a8a;background:#0a0e1a;border-bottom:1px solid #1a2440;padding:4px 6px;font-weight:400;position:sticky;top:0}tbody td{border-bottom:1px solid #0f1525;padding:3px 6px}.row-warn{background:#1a120a}.dot{border-radius:50%;width:8px;height:8px;display:inline-block}.dot.online{background:#0f8;box-shadow:0 0 4px #0f8}.dot.stopped{background:#fa0}.dot.errored{background:#f34;box-shadow:0 0 4px #f34}.flags-section{background:#111827;border:1px solid #1a2440;border-radius:6px;padding:12px}.flags-section h3{color:#fa0;margin-bottom:8px;font-size:13px}.flags-section ul{font-size:11px;list-style:none}.flags-section li{color:#8090b0;padding:4px 0}.flags-section li:before{content:"□";color:#fa0}.flags-section code{background:#1a2440;border-radius:3px;padding:1px 4px;font-size:10px}.panel::-webkit-scrollbar{width:4px}.table-scroll::-webkit-scrollbar{width:4px}.panel::-webkit-scrollbar-track{background:0 0}.table-scroll::-webkit-scrollbar-track{background:0 0}.panel::-webkit-scrollbar-thumb{background:#1a2440;border-radius:2px}.table-scroll::-webkit-scrollbar-thumb{background:#1a2440;border-radius:2px}@media (width<=768px){.app{flex-direction:column}.canvas-container{height:40vh}.panel{width:100%;height:60vh}}