:root{--font-family: "Inter", system-ui, Avenir, Helvetica, Arial, sans-serif;--bg-color: #0f1115;--card-bg: #1a1d24;--text-primary: #ffffff;--text-secondary: #a0a0a0;--border-color: #2a2d35;--grid-line: #2a2d35;--color-load: #ff9f1c;--color-ddos: #ff4040;--color-filter: #ff6b6b;--color-maint-emergency: #2ec4b6;--color-db-error: #9d4edd;--color-web-error: #e71d36;--color-bug: #ffd166;--color-default: #b0bfc6;--timeline-height: 50px}body{margin:0;min-width:320px;min-height:100vh;background-color:var(--bg-color);color:var(--text-primary);font-family:var(--font-family);-webkit-font-smoothing:antialiased}#root{max-width:1280px;margin:0 auto;padding:2rem;width:100%}.timeline-container{display:flex;flex-direction:column;gap:1rem}.header{text-align:center;margin-bottom:2rem}.header h1{font-size:2.5rem;font-weight:700;background:linear-gradient(90deg,#ff9f1c,#9d4edd);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin:0}.chart-wrapper{background:var(--card-bg);border-radius:12px;padding:20px;box-shadow:0 10px 30px #00000080;border:1px solid var(--border-color)}.timeline-header{display:flex;margin-bottom:0;position:sticky;top:40px;z-index:5;background-color:var(--card-bg);height:30px;border-bottom:1px solid var(--border-color);box-shadow:0 4px 6px -1px #0000001a}.time-axis-label{position:absolute;transform:translate(-50%);font-size:.8rem;color:var(--text-secondary)}.timeline-row{display:flex;border-bottom:1px solid var(--border-color);position:relative}.date-label{width:120px;flex-shrink:0;font-weight:700;font-size:.9rem;color:var(--text-secondary);position:sticky;left:0;background:var(--card-bg);display:flex;align-items:center;border-right:1px solid var(--border-color);height:100%;padding-right:10px}.timeline-track{flex-grow:1;position:relative;height:100%;min-width:800px}.grid-line{position:absolute;top:0;bottom:0;width:1px;background-color:var(--grid-line);opacity:.5}.incident-bar-group{position:absolute;top:50%;transform:translateY(-50%);height:24px;min-width:8px}.incident-bar{height:100%;border-radius:4px;cursor:pointer;transition:all .2s;box-shadow:0 2px 4px #0000004d;position:relative;min-width:8px}.incident-bar:hover{transform:scaleY(1.2);z-index:5;filter:brightness(1.2)}.incident-label{position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:8px;font-weight:700;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.8);pointer-events:auto}.tooltip{position:absolute;background:#000000e6;color:#fff;padding:8px 12px;border-radius:6px;font-size:.8rem;pointer-events:none;z-index:100;white-space:nowrap;border:1px solid var(--border-color);bottom:100%;left:50%;transform:translate(-50%) translateY(-5px);display:none}.incident-bar:hover .tooltip{display:block}.legend-container{display:flex;flex-wrap:wrap;gap:15px;margin-bottom:20px;justify-content:center;position:sticky;top:0;z-index:1000;background-color:var(--bg-color);padding:10px 0;border-bottom:1px solid var(--border-color)}.legend-item{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--text-secondary)}.legend-color{width:12px;height:12px;border-radius:50%}.current-time-line{position:absolute;top:0;bottom:0;width:1px;background-color:red;opacity:.5;pointer-events:none}