body{margin:0;background-color:#020617;color:#e5e7eb;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}.app-container{min-height:100vh;display:flex;flex-direction:column}.app-header{padding:1rem;border-bottom:1px solid #1f2937;background-color:#020617}.app-header h1{font-size:1.25rem;font-weight:600}.app-main{flex:1;display:flex;flex-direction:column;padding:1rem;gap:1rem}@media (min-width: 768px){.app-main{flex-direction:row}}.controls{width:100%;max-width:340px;display:flex;flex-direction:column;gap:.75rem;background-color:#020617}.form-row{display:flex;flex-direction:column;gap:.25rem}label{font-size:.875rem;font-weight:500}select,input[type=datetime-local],button{padding:.5rem .75rem;border-radius:.375rem;border:1px solid #4b5563;font-size:.875rem;background-color:#020617;color:#e5e7eb}select:focus,input[type=datetime-local]:focus,button:focus{outline:2px solid #3b82f6;outline-offset:1px}button{background-color:#2563eb;border-color:transparent}button:hover:not(:disabled){background-color:#1d4ed8}button:disabled{opacity:.6;cursor:default}.error{color:#f87171;font-size:.875rem}.chart-section{flex:1;min-height:300px}.metrics-list{margin-top:.75rem;padding-top:.75rem;border-top:1px solid #e5e7eb;max-height:260px;overflow-y:auto}.metrics-list-title{font-size:.875rem;font-weight:600;margin-bottom:.5rem}.metric-item{display:flex;align-items:center;gap:.5rem;font-size:.875rem;margin-bottom:.25rem}.metric-label{white-space:nowrap}.metric-unit{color:#6b7280}