@import "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap";
:root{--bg-primary:#06060f;--bg-secondary:#0d0d1a;--bg-card:#0f0f1eb3;--bg-card-hover:#141428d9;--border-subtle:#ffffff0f;--border-glow:#648cff26;--text-primary:#e8eaf0;--text-secondary:#8890a4;--text-muted:#545a6e;--accent-blue:#4e7cff;--accent-cyan:#00d4ff;--accent-purple:#8b5cf6;--green-bg:#0a3d1c;--green-glow:#22c55e;--green-border:#22c55e66;--yellow-bg:#3d350a;--yellow-glow:#eab308;--yellow-border:#eab30866;--red-bg:#3d0a0a;--red-glow:#ef4444;--red-border:#ef444466;--gray-bg:#1e1e3266;--gray-border:#ffffff0d;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;--font-mono:"JetBrains Mono", "Fira Code", monospace;--radius-sm:4px;--radius-md:8px;--radius-lg:16px;--radius-xl:24px;--shadow-glow:0 0 30px #4e7cff14}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);min-height:100vh;line-height:1.6;overflow-x:hidden}body:before{content:"";pointer-events:none;z-index:0;background:radial-gradient(80% 50% at 20% 20%,#4e7cff0f 0%,#0000 60%),radial-gradient(60% 40% at 80% 80%,#8b5cf60d 0%,#0000 60%),radial-gradient(50% 30%,#00d4ff08 0%,#0000 60%);position:fixed;inset:0}body:after{content:"";pointer-events:none;z-index:0;background-image:linear-gradient(#ffffff05 1px,#0000 1px),linear-gradient(90deg,#ffffff05 1px,#0000 1px);background-size:60px 60px;position:fixed;inset:0}.main-container{z-index:1;max-width:1440px;min-height:100vh;margin:0 auto;padding:24px 32px 48px;position:relative}.header{border-bottom:1px solid var(--border-subtle);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:32px;padding:24px 0 32px;display:flex}.header-left{align-items:center;gap:16px;display:flex}.logo-icon{border-radius:var(--radius-md);background:linear-gradient(135deg, var(--accent-blue), var(--accent-purple));justify-content:center;align-items:center;width:44px;height:44px;font-size:20px;display:flex;box-shadow:0 0 20px #4e7cff4d}.header-title{background:linear-gradient(135deg, var(--text-primary), var(--accent-cyan));-webkit-text-fill-color:transparent;letter-spacing:-.5px;-webkit-background-clip:text;background-clip:text;font-size:22px;font-weight:700}.header-subtitle{color:var(--text-muted);margin-top:2px;font-size:13px;font-weight:400}.header-right{flex-wrap:wrap;align-items:center;gap:20px;display:flex}.status-badge{background:var(--bg-card);border:1px solid var(--border-subtle);color:var(--text-secondary);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:100px;align-items:center;gap:8px;padding:8px 16px;font-size:13px;display:flex}.status-dot{background:var(--green-glow);width:8px;height:8px;box-shadow:0 0 8px var(--green-glow);border-radius:50%;animation:2s ease-in-out infinite pulse}.status-dot.offline{background:var(--red-glow);box-shadow:0 0 8px var(--red-glow)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.4}}.refresh-btn{color:var(--accent-blue);font-size:13px;font-family:var(--font-sans);cursor:pointer;background:#4e7cff1a;border:1px solid #4e7cff40;border-radius:100px;align-items:center;gap:6px;padding:8px 16px;font-weight:500;transition:all .2s;display:flex}.refresh-btn:hover{background:#4e7cff33;border-color:#4e7cff66;box-shadow:0 0 20px #4e7cff26}.refresh-btn:disabled{opacity:.5;cursor:not-allowed}.refresh-icon{transition:transform .5s;display:inline-block}.refresh-btn:hover .refresh-icon{transform:rotate(180deg)}.stats-bar{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:32px;display:grid}.stat-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:20px 24px;transition:all .3s}.stat-card:hover{border-color:var(--border-glow);box-shadow:var(--shadow-glow)}.stat-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px;font-size:12px;font-weight:500}.stat-value{font-size:28px;font-weight:700;font-family:var(--font-mono);background:linear-gradient(135deg, var(--text-primary), var(--accent-cyan));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.stat-value.green{background:linear-gradient(135deg, #4ade80, var(--green-glow));-webkit-background-clip:text;background-clip:text}.stat-value.yellow{background:linear-gradient(135deg, #fde047, var(--yellow-glow));-webkit-background-clip:text;background-clip:text}.stat-value.red{background:linear-gradient(135deg, #f87171, var(--red-glow));-webkit-background-clip:text;background-clip:text}.legend{flex-wrap:wrap;align-items:center;gap:24px;margin-bottom:24px;display:flex}.legend-item{color:var(--text-secondary);align-items:center;gap:8px;font-size:13px;display:flex}.legend-block{border-radius:var(--radius-sm);width:16px;height:16px}.legend-block.green{background:var(--green-glow);box-shadow:0 0 6px #22c55e66}.legend-block.yellow{background:var(--yellow-glow);box-shadow:0 0 6px #eab30866}.legend-block.red{background:var(--red-glow);box-shadow:0 0 6px #ef444466}.legend-block.gray{border:1px solid var(--gray-border);background:#3c3c5099}.timeline-header{align-items:center;margin-bottom:8px;padding:0 0 8px;display:flex}.timeline-name-col{width:330px;min-width:330px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;padding-right:16px;font-size:12px;font-weight:500}.timeline-times{font-size:11px;font-family:var(--font-mono);color:var(--text-muted);flex:1;justify-content:space-between;display:flex;overflow:hidden}.timeline-time{white-space:nowrap}.model-grid{flex-direction:column;gap:4px;display:flex}.model-row{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);align-items:center;padding:10px 16px;transition:all .2s;display:flex}.model-row:hover{background:var(--bg-card-hover);border-color:var(--border-glow);box-shadow:var(--shadow-glow)}.model-name{width:330px;min-width:330px;color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:500;font-family:var(--font-mono);padding-right:16px;overflow:hidden}.status-blocks{flex:1;align-items:center;gap:2px;display:flex}.status-block{cursor:pointer;border-radius:3px;flex:1;min-width:2px;height:22px;transition:all .2s;position:relative}.status-block:hover{z-index:10;transform:scaleY(1.3)}.status-block.green{background:var(--green-glow);border:1px solid var(--green-border);box-shadow:0 0 4px #22c55e33}.status-block.green:hover{box-shadow:0 0 12px #22c55e80}.status-block.yellow{background:var(--yellow-glow);border:1px solid var(--yellow-border);box-shadow:0 0 4px #eab30833}.status-block.yellow:hover{box-shadow:0 0 12px #eab30880}.status-block.red{background:var(--red-glow);border:1px solid var(--red-border);box-shadow:0 0 4px #ef444433}.status-block.red:hover{box-shadow:0 0 12px #ef444480}.status-block.empty{background:var(--gray-bg);border:1px solid var(--gray-border)}.tooltip{border:1px solid var(--border-glow);border-radius:var(--radius-md);color:var(--text-primary);pointer-events:none;z-index:1000;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);opacity:0;background:#0a0a19f2;max-width:280px;padding:10px 14px;font-size:12px;transition:opacity .15s;position:fixed;box-shadow:0 8px 32px #0006}.tooltip.visible{opacity:1}.tooltip-time{font-family:var(--font-mono);color:var(--accent-cyan);margin-bottom:4px;font-weight:500}.tooltip-value{font-family:var(--font-mono);font-weight:600}.tooltip-value.green{color:var(--green-glow)}.tooltip-value.yellow{color:var(--yellow-glow)}.tooltip-value.red{color:var(--red-glow)}.loading-container{flex-direction:column;justify-content:center;align-items:center;gap:24px;min-height:400px;display:flex}.loading-spinner{border:3px solid var(--border-subtle);border-top:3px solid var(--accent-blue);border-radius:50%;width:48px;height:48px;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{color:var(--text-muted);letter-spacing:1px;font-size:14px}.error-container{flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:400px;display:flex}.error-icon{font-size:48px}.error-text{color:var(--text-secondary);font-size:16px}.error-detail{color:var(--text-muted);font-size:13px;font-family:var(--font-mono)}.empty-container{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:16px;min-height:400px;display:flex}.empty-icon{opacity:.6;font-size:56px}.empty-title{color:var(--text-secondary);font-size:18px;font-weight:600}.empty-subtitle{color:var(--text-muted);max-width:400px;font-size:14px}.footer{border-top:1px solid var(--border-subtle);text-align:center;color:var(--text-muted);margin-top:48px;padding-top:24px;font-size:12px}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.model-row{opacity:0;animation:.3s forwards fadeIn}.model-row:first-child{animation-delay:20ms}.model-row:nth-child(2){animation-delay:40ms}.model-row:nth-child(3){animation-delay:60ms}.model-row:nth-child(4){animation-delay:80ms}.model-row:nth-child(5){animation-delay:.1s}.model-row:nth-child(6){animation-delay:.12s}.model-row:nth-child(7){animation-delay:.14s}.model-row:nth-child(8){animation-delay:.16s}.model-row:nth-child(9){animation-delay:.18s}.model-row:nth-child(10){animation-delay:.2s}.model-row:nth-child(n+11){animation-delay:.22s}@media (max-width:900px){.main-container{padding:16px}.header{flex-direction:column;align-items:flex-start}.timeline-name-col,.model-name{width:200px;min-width:200px;font-size:11px}.status-block{height:18px}.stat-value{font-size:22px}}@media (max-width:600px){.timeline-name-col,.model-name{width:140px;min-width:140px;font-size:10px}.stats-bar{grid-template-columns:repeat(2,1fr)}.status-block{height:14px}.status-blocks{gap:1px}}