:root{--bg-dark: #0b0f19;--panel-bg: #131929;--panel-border: #1e293b;--text-main: #f8fafc;--text-muted: #94a3b8;--accent-blue: #3b82f6;--accent-green: #10b981;--accent-yellow: #f59e0b;--accent-red: #ef4444;--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}*{margin:0;padding:0;box-sizing:border-box}body{background-color:var(--bg-dark);color:var(--text-main);font-family:var(--font-family);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;overflow-x:hidden}button{font-family:inherit;cursor:pointer;border:none;outline:none;transition:all .2s ease-in-out}h1,h2,h3,h4,h5,h6,p{margin:0}a{text-decoration:none;color:inherit}.app-container{max-width:1400px;margin:0 auto;padding:24px;display:flex;flex-direction:column;gap:24px;min-height:100vh}.separator{height:1px;background:linear-gradient(90deg,transparent,var(--panel-border),var(--panel-border),transparent);width:100%;margin:4px 0;opacity:.5}.top-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}.logo-section{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.logo-title{display:flex;align-items:center;gap:12px}.logo-icon{font-size:1.8rem;color:#fbbf24}.logo-title h1{font-size:2rem;font-weight:800;letter-spacing:2px;color:var(--text-main);margin:0}.logo-section p{font-size:.75rem;font-weight:600;color:var(--text-muted);letter-spacing:1px;margin:0}.date-display{font-size:.75rem;color:var(--accent-blue);font-weight:600;margin-top:4px;letter-spacing:.5px}.controls-section{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}.network-badge{display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:20px;font-size:.7rem;font-weight:700;letter-spacing:1px;border:1px solid var(--panel-border);background-color:var(--panel-bg);margin-right:8px}.network-badge .dot{width:8px;height:8px;border-radius:50%}.network-badge.live{border-color:#10b9814d;color:var(--accent-green)}.network-badge.live .dot{background-color:var(--accent-green);box-shadow:0 0 8px var(--accent-green)}.network-badge.demo{border-color:#a855f74d;color:#a855f7}.network-badge.demo .dot{background-color:#a855f7;box-shadow:0 0 8px #a855f7}.btn{padding:10px 20px;border-radius:6px;font-weight:600;font-size:.875rem;background-color:transparent;color:var(--text-main);border:1px solid var(--text-muted);cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1)}.btn:hover{background-color:#ffffff0d}.btn.start{border-color:var(--accent-green);color:var(--accent-green)}.btn.start:hover{box-shadow:0 0 10px #10b98133}.btn.start.active{background-color:var(--accent-green);color:#000;box-shadow:0 0 15px #10b98180;border-color:transparent}.btn.start.demo-btn{border-color:#a855f7;color:#a855f7}.btn.start.demo-btn.active{background-color:#a855f7;color:#fff;box-shadow:0 0 15px #a855f799;border-color:transparent}.btn.stop{border-color:var(--text-muted)}.btn.stop.active{background-color:#ef444426;border-color:var(--accent-red);color:var(--accent-red);box-shadow:0 0 15px #ef44444d}.btn.purge{border-color:var(--accent-red);color:var(--accent-red)}.btn.purge:hover{background-color:#ef444433;box-shadow:0 0 10px #ef444433}.status-indicator{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:20px;background-color:var(--panel-bg);border:1px solid var(--panel-border);font-size:.75rem;font-weight:700;letter-spacing:1px}.status-indicator .dot{width:8px;height:8px;border-radius:50%}.status-indicator.running .dot{background-color:var(--accent-green);box-shadow:0 0 8px var(--accent-green)}.status-indicator.stopped .dot{background-color:var(--accent-red)}.metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.metric-card{background-color:var(--panel-bg);border:1px solid var(--panel-border);border-radius:8px;padding:24px;border-left:4px solid}.metric-card.blue{border-left-color:var(--accent-blue)}.metric-card.green{border-left-color:var(--accent-green)}.metric-card.yellow{border-left-color:var(--accent-yellow)}.metric-card.red{border-left-color:var(--accent-red)}.metric-card h3{font-size:.75rem;color:var(--text-muted);font-weight:600;letter-spacing:1px;margin-bottom:12px}.metric-card .value{font-size:2.5rem;font-weight:800}.metric-card .value span{font-size:1rem;font-weight:500;color:var(--text-muted);margin-left:4px}.ttf-display .status-text{font-size:1.5rem;letter-spacing:1px}.ttf-display .status-text.offline{color:var(--text-muted)}.ttf-display .status-text.stable{color:var(--accent-green)}.main-content{display:grid;grid-template-columns:2fr 1fr;gap:24px;flex-grow:1}.chart-panel,.alerts-panel{background-color:var(--panel-bg);border:1px solid var(--panel-border);border-radius:8px;padding:24px}h2{font-size:1.25rem;font-weight:700;margin-bottom:24px}.alerts-panel h2{color:var(--accent-red)}.alerts-list{display:flex;flex-direction:column;gap:12px;max-height:400px;overflow-y:auto}.alerts-list::-webkit-scrollbar{width:6px}.alerts-list::-webkit-scrollbar-thumb{background-color:var(--panel-border);border-radius:3px}.alert-card{background-color:#ef44440d;border-left:3px solid var(--accent-red);padding:16px;border-radius:4px;display:flex;justify-content:space-between;align-items:center}.alert-info h4{color:var(--accent-red);font-size:.875rem;margin-bottom:4px}.alert-info p{color:var(--text-muted);font-size:.75rem}.alert-time{font-size:.75rem;color:var(--text-muted)}.no-alerts{display:flex;flex-direction:column;align-items:center;justify-content:center;height:200px;color:var(--text-muted)}.no-alerts .icon{font-size:2rem;margin-bottom:8px}.app-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0}.footer-logo{font-size:1.5rem;background-color:var(--panel-bg);padding:8px 12px;border-radius:8px;border:1px solid var(--panel-border);display:flex;align-items:center;justify-content:center}.footer-text{flex-grow:1;text-align:left}.footer-text p{font-size:.75rem;color:var(--text-muted);font-weight:500}.footer-text .footer-subtext{font-size:.7rem;margin-top:4px;color:var(--accent-green)}.footer-copyright{text-align:right;font-size:.7rem;color:var(--text-muted);opacity:.7}@media (max-width: 1200px){.app-footer{flex-direction:column;text-align:center}.footer-text,.footer-copyright{text-align:center}}@media (max-width: 1024px){.top-bar{flex-direction:column;align-items:flex-start}.controls-section{justify-content:flex-start}.metrics-grid{grid-template-columns:repeat(2,1fr)}.main-content{grid-template-columns:1fr}}@media (max-width: 600px){.metrics-grid{grid-template-columns:1fr}.network-badge{width:100%;justify-content:center;margin-right:0;margin-bottom:8px}}