:root{--topbar-h:64px;--canvas:#000;--surface-card:#0a0a0c;--surface-elevated:#101012;--surface-deep:#06060a;--hairline:#ffffff0f;--hairline-strong:#ffffff24;--divider-soft:#ffffff0a;--ink:#fcfdff;--body:#fcfdffdb;--charcoal:#fcfdffb3;--mute:#a1a4a5;--ash:#888e90;--stone:#464a4d;--accent-green:#1f9;--accent-green-glow:#22ff992e;--accent-blue:#3b9eff;--accent-blue-glow:#0075ff57;--accent-orange:#ff801f;--accent-orange-glow:#ff590038;--accent-yellow:#ffc53d;--accent-red:#ff2047;--accent-red-glow:#ff204757;--link:#3b9eff;--success:#1f9;--success-bg:#22ff9912;--success-border:#22ff992e;--warning:#ffc53d;--warning-bg:#ffc53d12;--warning-border:#ffc53d2e;--danger:#ff2047;--danger-bg:#ff204712;--danger-border:#ff204733;--healing:#a78bfa;--healing-bg:#a78bfa12;--healing-border:#a78bfa33;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono:"Geist Mono", "JetBrains Mono", "Fira Code", "SFMono-Regular", monospace;--radius-xs:4px;--radius-sm:6px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-full:9999px;--sp-xs:4px;--sp-sm:8px;--sp-md:12px;--sp-lg:16px;--sp-xl:24px;--sp-xxl:32px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--canvas);color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:14px;line-height:1.6}a{color:inherit;text-decoration:none}button{font-family:var(--font-sans)}img,svg{display:block}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--hairline-strong);border-radius:4px}.shell{flex-direction:column;min-height:100vh;display:flex}.topbar{height:var(--topbar-h);padding:0 var(--sp-xxl);background:var(--canvas);border-bottom:1px solid var(--hairline);z-index:100;justify-content:space-between;align-items:center;gap:var(--sp-xxl);display:flex;position:sticky;top:0}.topbar-brand{flex-shrink:0;align-items:center;text-decoration:none;display:flex}.topbar-brand-name{letter-spacing:-.03em;color:var(--ink);font-size:.95rem;font-weight:800}.topbar-tabs{flex:1;justify-content:center;align-items:center;gap:2px;max-width:480px;display:flex}.topbar-tab{border-radius:var(--radius-full);letter-spacing:.35px;color:var(--charcoal);white-space:nowrap;align-items:center;gap:6px;padding:6px 14px;font-size:14px;font-weight:500;text-decoration:none;transition:color .15s,background .15s;display:flex}.topbar-tab:hover{color:var(--ink);background:var(--surface-elevated)}.topbar-tab.active{background:var(--surface-elevated);color:var(--ink);border:1px solid var(--hairline-strong)}.topbar-tab .tab-icon{opacity:.7;flex-shrink:0;width:14px;height:14px}.topbar-tab.active .tab-icon{opacity:1}.topbar-right{align-items:center;gap:var(--sp-md);flex-shrink:0;display:flex}.topbar-time{font-family:var(--font-mono);color:var(--ash);letter-spacing:.04em;font-size:12px}.topbar-status-pill{letter-spacing:.08em;border-radius:var(--radius-full);border:1px solid;align-items:center;gap:6px;padding:4px 10px;font-size:12px;font-weight:500;display:flex}.topbar-status-dot{border-radius:50%;flex-shrink:0;width:6px;height:6px}.topbar-toast-stack{flex-direction:column;align-items:flex-end;gap:4px;max-width:min(300px,36vw);display:flex}.topbar-toast-item{border-radius:var(--radius-full);border:1px solid;padding:4px 10px;font-size:12px;font-weight:500;animation:.25s toastIn}@keyframes toastIn{0%{opacity:0;transform:translateY(-6px)scale(.97)}to{opacity:1;transform:none}}.page-content{padding:var(--sp-xxl) var(--sp-xxl);flex:1;width:100%;max-width:1200px;margin:0 auto}.card{background:var(--surface-card);border:1px solid var(--hairline-strong);border-radius:var(--radius-lg);padding:var(--sp-xxl);transition:border-color .2s}.card:hover{border-color:#ffffff38}.card-clickable{cursor:pointer}.card-clickable:hover{background:var(--surface-elevated)}.card-header{margin-bottom:var(--sp-lg);letter-spacing:.1em;text-transform:uppercase;color:var(--ash);justify-content:space-between;align-items:center;font-size:11px;font-weight:600;display:flex}.card-divider{background:var(--hairline);height:1px;margin:var(--sp-lg) 0}.card-danger{border-color:var(--danger-border)!important;background:var(--danger-bg)!important}.card-warning{border-color:var(--warning-border)!important;background:var(--warning-bg)!important}.card-success{border-color:var(--success-border)!important;background:var(--success-bg)!important}.card-healing{border-color:var(--healing-border)!important;background:var(--healing-bg)!important}.card-accent{background:#0075ff0f!important;border-color:#3b9eff40!important}.stat-card{position:relative;overflow:hidden}.stat-card:before{content:"";background:var(--hairline-strong);opacity:0;height:1px;transition:opacity .3s;position:absolute;top:0;left:0;right:0}.stat-card:hover:before{opacity:1}.stat-card-success:before{background:var(--success);opacity:1}.stat-card-danger:before{background:var(--danger);opacity:1}.stat-card-warning:before{background:var(--warning);opacity:1}.stat-card-accent:before{background:var(--accent-blue);opacity:1}.stat-label{letter-spacing:.1em;text-transform:uppercase;color:var(--ash);margin-bottom:var(--sp-sm);font-size:11px;font-weight:600}.stat-value{letter-spacing:-.04em;color:var(--ink);margin-bottom:6px;font-size:2.2rem;font-weight:700;line-height:1}.stat-delta{color:var(--ash);font-size:12px}.grid-4{gap:var(--sp-lg);margin-bottom:var(--sp-xl);grid-template-columns:repeat(4,1fr);display:grid}.grid-3{gap:var(--sp-lg);margin-bottom:var(--sp-xl);grid-template-columns:repeat(3,1fr);display:grid}.grid-2{gap:var(--sp-lg);margin-bottom:var(--sp-xl);grid-template-columns:repeat(2,1fr);display:grid}.grid-server-cards{gap:var(--sp-lg);margin-bottom:var(--sp-xl);grid-template-columns:repeat(auto-fill,minmax(280px,1fr));display:grid}@media (max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr)}}@media (max-width:680px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr}}.badge{border-radius:var(--radius-full);white-space:nowrap;background:var(--surface-elevated);color:var(--body);border:1px solid;border-color:var(--hairline-strong);align-items:center;gap:5px;padding:4px 10px;font-size:12px;font-weight:500;display:inline-flex}.badge:before{content:"";background:currentColor;border-radius:50%;flex-shrink:0;width:5px;height:5px}.badge-healthy{color:var(--success);background:var(--success-bg);border-color:var(--success-border)}.badge-critical{color:var(--danger);background:var(--danger-bg);border-color:var(--danger-border);animation:2s infinite badgePulse}.badge-warning{color:var(--warning);background:var(--warning-bg);border-color:var(--warning-border)}.badge-healing{color:var(--healing);background:var(--healing-bg);border-color:var(--healing-border)}.badge-info{color:var(--accent-blue);background:#0075ff14;border-color:#3b9eff40}.badge-recovering{color:var(--healing);background:var(--healing-bg);border-color:var(--healing-border)}.badge-offline{color:var(--ash);border-color:var(--hairline-strong);background:0 0}@keyframes badgePulse{0%,to{opacity:1}50%{opacity:.6}}.status-dot{border-radius:50%;flex-shrink:0;display:inline-block}.dot-success{background:var(--success);box-shadow:0 0 6px var(--accent-green-glow)}.dot-danger{background:var(--danger);box-shadow:0 0 6px var(--accent-red-glow);animation:1.5s infinite dotPulse}.dot-warn,.dot-warning{background:var(--warning);box-shadow:0 0 6px #ffc53d4d}.dot-healing{background:var(--healing);animation:1s infinite dotPulse}.dot-offline{background:var(--stone)}@keyframes dotPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}.live-indicator{letter-spacing:.08em;color:var(--success);background:var(--success-bg);border:1px solid var(--success-border);border-radius:var(--radius-full);align-items:center;gap:5px;padding:4px 10px;font-size:12px;font-weight:500;display:flex}.live-dot{background:var(--success);border-radius:50%;flex-shrink:0;width:6px;height:6px;animation:2s infinite livePulse}@keyframes livePulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.2;transform:scale(.7)}}.btn{border-radius:var(--radius-md);cursor:pointer;white-space:nowrap;height:36px;font-size:14px;font-weight:500;font-family:var(--font-sans);border:1px solid #0000;justify-content:center;align-items:center;gap:6px;padding:8px 16px;transition:all .15s;display:inline-flex}.btn:disabled{opacity:.35;cursor:not-allowed}.btn-sm{height:30px;padding:5px 12px;font-size:13px}.btn-lg{height:42px;padding:10px 20px;font-size:15px}.btn-primary{color:#000;background:#fcfdff;border-color:#fcfdff}.btn-primary:hover:not(:disabled){background:#f1f7fe;border-color:#f1f7fe}.btn-ghost{background:var(--surface-elevated);color:var(--ink);border-color:var(--hairline-strong)}.btn-ghost:hover:not(:disabled){background:#ffffff14;border-color:#fff3}.btn-outline{background:var(--canvas);color:var(--ink);border-color:var(--hairline-strong)}.btn-outline:hover:not(:disabled){background:var(--surface-card);border-color:#ffffff40}.btn-danger{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-border)}.btn-danger:hover:not(:disabled){background:#ff204724}.btn-success{background:var(--success-bg);color:var(--success);border-color:var(--success-border)}.btn-success:hover:not(:disabled){background:#22ff991f}.server-card{cursor:pointer;transition:all .2s;position:relative;overflow:hidden}.server-card:hover{border-color:var(--hairline-strong)!important;background:var(--surface-elevated)!important}.server-card.active{background:#0075ff0d!important;border-color:#3b9eff4d!important}.server-card-name{color:var(--ink);align-items:center;gap:6px;margin-bottom:3px;font-size:.9rem;font-weight:600;display:flex}.server-card-ip{font-family:var(--font-mono);color:var(--ash);margin-bottom:var(--sp-lg);font-size:12px}.card-critical{animation:2.5s infinite criticalPulse;border-color:var(--danger-border)!important;background:var(--danger-bg)!important}@keyframes criticalPulse{0%,to{box-shadow:0 0 0 0 var(--accent-red-glow)}50%{box-shadow:0 0 20px var(--accent-red-glow)}}.critical-glow-ring{border-radius:calc(var(--radius-lg) + 1px);pointer-events:none;border:1px solid #ff204759;animation:1.8s infinite ringPulse;position:absolute;inset:-1px}@keyframes ringPulse{0%,to{opacity:.4}50%{opacity:1}}.card-recovering{animation:1.5s infinite recoverPulse;border-color:var(--healing-border)!important;background:var(--healing-bg)!important}@keyframes recoverPulse{0%,to{border-color:var(--healing-border)}50%{border-color:#a78bfa73;box-shadow:0 0 16px #a78bfa1a}}.card-offline{filter:grayscale(.5)opacity(.6);border-color:var(--hairline)!important}.server-card-footer{color:var(--ash);justify-content:space-between;margin-top:10px;font-size:12px;display:flex}.metric-bar-wrap{margin-bottom:10px}.metric-bar-header{justify-content:space-between;margin-bottom:6px;font-size:12px;display:flex}.metric-bar-label{color:var(--ash);text-transform:uppercase;letter-spacing:.06em;font-size:11px;font-weight:500}.metric-bar-value{color:var(--ink);font-weight:600}.metric-bar-track{background:var(--surface-elevated);border-radius:var(--radius-full);height:4px;overflow:hidden}.metric-bar-fill{border-radius:var(--radius-full);background:var(--success);height:100%;transition:width 1.4s cubic-bezier(.16,1,.3,1)}.metric-bar-fill.warn{background:var(--warning)}.metric-bar-fill.danger{background:var(--danger)}.status-banner{align-items:center;gap:var(--sp-lg);padding:var(--sp-lg) var(--sp-xl);border-radius:var(--radius-lg);margin-bottom:var(--sp-xl);border:1px solid;display:flex}.status-banner .banner-icon{font-size:1.1rem}.status-banner .banner-title{font-size:.9rem;font-weight:600}.status-banner .banner-sub{opacity:.7;margin-top:1px;font-size:13px}.status-banner.healthy{background:var(--success-bg);border-color:var(--success-border);color:var(--success)}.status-banner.failing{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger);animation:2s infinite bannerPulse}.status-banner.recovering{background:var(--healing-bg);border-color:var(--healing-border);color:var(--healing)}@keyframes bannerPulse{0%,to{box-shadow:none}50%{box-shadow:0 0 24px var(--accent-red-glow)}}.log-console{background:var(--surface-deep);border:1px solid var(--hairline-strong);border-radius:var(--radius-lg);padding:var(--sp-xl);font-family:var(--font-mono);max-height:200px;color:var(--body);font-size:13px;line-height:1.6;overflow-y:auto}.log-line{opacity:0;animation:.3s forwards logAppear}.log-line.warn{color:var(--warning)}.log-line.error{color:var(--danger)}.log-line.crit{color:var(--accent-red);font-weight:600}@keyframes logAppear{0%{opacity:0;transform:translate(-6px)}to{opacity:1;transform:none}}.confidence-wrap{margin-top:var(--sp-lg)}.confidence-meta{justify-content:space-between;align-items:baseline;margin-bottom:6px;display:flex}.confidence-label{letter-spacing:.1em;text-transform:uppercase;color:var(--ash);font-size:11px;font-weight:600}.confidence-value{color:var(--success);font-size:1rem;font-weight:700}.confidence-track{background:var(--surface-elevated);border-radius:var(--radius-full);height:4px;overflow:hidden}.confidence-fill{border-radius:var(--radius-full);background:linear-gradient(90deg, var(--healing), var(--success));height:100%;transition:width 1.5s cubic-bezier(.16,1,.3,1)}.data-table-wrap{border-radius:var(--radius-lg);border:1px solid var(--hairline-strong);overflow-x:auto}.data-table{border-collapse:collapse;text-align:left;width:100%}.data-table thead tr{background:var(--surface-elevated);z-index:2;position:sticky;top:0}.data-table th{padding:10px var(--sp-lg);letter-spacing:.1em;text-transform:uppercase;color:var(--ash);border-bottom:1px solid var(--hairline-strong);white-space:nowrap;font-size:11px;font-weight:600}.data-table td{padding:var(--sp-lg);border-bottom:1px solid var(--hairline);vertical-align:middle;color:var(--body);font-size:13px}.data-table tbody tr{transition:background .12s}.data-table tbody tr:last-child td{border-bottom:none}.data-table tbody tr:hover td{background:var(--surface-elevated)}.data-table tbody tr.row-critical{border-left:2px solid var(--danger)}.data-table tbody tr.row-critical td{background:var(--danger-bg)}.section-label{letter-spacing:.12em;text-transform:uppercase;color:var(--ash);align-items:center;gap:8px;margin-bottom:12px;font-size:11px;font-weight:600;display:flex}.section-label:after{content:"";background:var(--hairline);flex:1;max-width:60px;height:1px}.stat-row{border-bottom:1px solid var(--hairline);justify-content:space-between;align-items:center;padding:8px 0;font-size:13px;display:flex}.stat-row:last-child{border-bottom:none}.stat-row-label{color:var(--charcoal)}.stat-row-value{color:var(--ink);font-weight:600;font-family:var(--font-mono);font-size:13px}.field-input{background:var(--surface-card);border:1px solid var(--hairline-strong);border-radius:var(--radius-md);width:100%;height:40px;color:var(--ink);font-size:14px;font-family:var(--font-sans);outline:none;padding:10px 14px;transition:border-color .15s}.field-input:focus{border-color:var(--ink)}.field-input::placeholder{color:var(--stone)}.fade-in{animation:.35s fadeIn}.slide-up{opacity:0;animation:.4s cubic-bezier(.16,1,.3,1) forwards slideUp}.delay-1{animation-delay:60ms}.delay-2{animation-delay:.12s}.delay-3{animation-delay:.18s}.delay-4{animation-delay:.24s}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.glow-green{background:radial-gradient(ellipse 60% 30% at 50% 0%, var(--accent-green-glow) 0%, transparent 100%)}.glow-blue{background:radial-gradient(ellipse 60% 30% at 50% 0%, var(--accent-blue-glow) 0%, transparent 100%)}.glow-red{background:radial-gradient(ellipse 60% 30% at 50% 0%, var(--accent-red-glow) 0%, transparent 100%)}.glow-orange{background:radial-gradient(ellipse 60% 30% at 50% 0%, var(--accent-orange-glow)0%, transparent 100%)}.text-mono{font-family:var(--font-mono)}.text-dim{color:var(--ash)}.text-muted{color:var(--charcoal)}.text-success{color:var(--success)}.text-danger{color:var(--danger)}.text-warning{color:var(--warning)}.text-accent{color:var(--accent-blue)}.text-heal{color:var(--healing)}.text-ink{color:var(--ink)}.loading-text{color:var(--ash);animation:1.4s infinite loadBlink}@keyframes loadBlink{0%,to{opacity:1}50%{opacity:.25}}.empty-state{padding:48px var(--sp-xxl);text-align:center;color:var(--ash)}.empty-icon{margin-bottom:var(--sp-lg);opacity:.3;font-size:2.25rem}.explanation-block{border-radius:var(--radius-lg);padding:var(--sp-lg) var(--sp-xl);margin-top:var(--sp-lg);color:var(--charcoal);background:#3b9eff0d;border:1px solid #3b9eff24;font-size:13px;line-height:1.7}.explanation-block strong{text-transform:uppercase;letter-spacing:.1em;color:var(--accent-blue);margin-bottom:4px;font-size:11px;font-weight:600;display:block}.recovery-panel{padding:var(--sp-xxl);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:10px;display:flex}.spin{animation:2s linear infinite spin}.action-grid{margin-top:var(--sp-lg);flex-wrap:wrap;gap:10px;display:flex}.action-btn{min-width:110px;padding:var(--sp-lg);background:var(--surface-elevated);border:1px solid var(--hairline-strong);border-radius:var(--radius-lg);cursor:pointer;font-family:var(--font-sans);text-align:center;flex-direction:column;flex:1;align-items:center;gap:5px;transition:all .2s;display:flex}.action-btn .action-icon{font-size:1.3rem}.action-btn .action-label{color:var(--ink);font-size:13px;font-weight:600}.action-btn .action-sub{color:var(--ash);font-size:12px}.action-btn:hover:not(:disabled){background:#ffffff0d;border-color:#ffffff38;transform:translateY(-1px)}.action-btn.restart:hover{border-color:var(--healing-border);background:var(--healing-bg)}.action-btn.scale:hover{background:#0075ff0f;border-color:#3b9eff4d}.action-btn.kill:hover{border-color:var(--danger-border);background:var(--danger-bg)}.action-btn:disabled{opacity:.35;cursor:not-allowed}.stat-chip{background:var(--surface-elevated);border:1px solid var(--hairline-strong);border-radius:var(--radius-full);color:var(--charcoal);align-items:center;gap:6px;padding:4px 10px;font-size:12px;display:inline-flex}.metric-chip{background:var(--surface-elevated);border:1px solid var(--hairline);border-radius:var(--radius-xs);font-size:12px;font-family:var(--font-mono);color:var(--ash);align-items:center;gap:4px;padding:2px 8px;display:inline-flex}.metric-chip strong{color:var(--ink);font-weight:600}.status-toast-danger{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger)}.status-toast-success{background:var(--success-bg);border-color:var(--success-border);color:var(--success)}.status-toast-info{color:var(--accent-blue);background:#0075ff14;border-color:#3b9eff40}.status-toast-warning{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning)}@keyframes statusFlash{0%{box-shadow:0 0 #0000}30%{box-shadow:0 0 0 5px var(--accent-green-glow)}to{box-shadow:0 0 #0000}}.status-flash{animation:.8s forwards statusFlash!important}.timeline-steps{flex-direction:column;gap:6px;display:flex}.timeline-step{gap:var(--sp-lg);align-items:flex-start;display:flex}.timeline-dot-wrap{flex-direction:column;flex-shrink:0;align-items:center;width:18px;display:flex;position:relative}.timeline-dot{background:var(--surface-elevated);border:2px solid var(--stone);border-radius:50%;flex-shrink:0;width:10px;height:10px}.timeline-dot.done{background:var(--success);border-color:var(--success);box-shadow:0 0 6px var(--accent-green-glow)}.timeline-line{background:var(--hairline);flex:1;width:2px;min-height:1rem;margin:2px 0}.timeline-label{color:var(--ink);font-size:13px;font-weight:600}.timeline-time{color:var(--ash);margin-top:2px;font-size:12px}.overview-hero{justify-content:space-between;align-items:center;gap:var(--sp-lg);padding:var(--sp-xl) var(--sp-xxl);margin-bottom:var(--sp-xl);background:var(--surface-card);border:1px solid var(--hairline-strong);border-radius:var(--radius-lg);display:flex;position:relative;overflow:hidden}.overview-hero:before{content:"";background:radial-gradient(ellipse, var(--accent-green-glow) 0%, transparent 70%);pointer-events:none;width:400px;height:200px;position:absolute;top:-60px;left:50%;transform:translate(-50%)}.overview-hero[data-status=critical]:before{background:radial-gradient(ellipse, var(--accent-red-glow) 0%, transparent 70%)}.overview-hero-left{align-items:center;gap:var(--sp-lg);display:flex;position:relative}.overview-status-orb{border-radius:50%;flex-shrink:0;width:40px;height:40px}.overview-status-orb[data-status=healthy]{box-shadow:0 0 20px var(--accent-green-glow);border:1px solid var(--success-border);background:radial-gradient(circle,#11ff994d 0%,#0000 70%);animation:3s infinite orbPulse}.overview-status-orb[data-status=critical]{box-shadow:0 0 20px var(--accent-red-glow);border:1px solid var(--danger-border);background:radial-gradient(circle,#ff20474d 0%,#0000 70%);animation:1.2s infinite orbPulse}@keyframes orbPulse{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}.overview-status-label{letter-spacing:-.02em;color:var(--ink);font-size:.95rem;font-weight:700}.overview-status-sub{color:var(--ash);margin-top:2px;font-size:13px}.activity-feed{flex-direction:column;display:flex}.activity-item{border-bottom:1px solid var(--hairline);align-items:center;gap:10px;padding:10px 0;transition:background .12s;display:flex}.activity-item:last-child{border-bottom:none}.activity-item-new{animation:.4s cubic-bezier(.16,1,.3,1) activitySlide}@keyframes activitySlide{0%{opacity:0;transform:translate(-6px)}to{opacity:1;transform:none}}.activity-dot{border-radius:50%;flex-shrink:0;display:inline-block}.activity-empty{color:var(--ash);flex-direction:column;align-items:center;gap:6px;padding:40px;font-size:13px;display:flex}.demo-steps{flex-direction:column;gap:0;padding:8px 0;display:flex}.demo-step{align-items:flex-start;gap:14px;padding:8px 0;display:flex;position:relative}.demo-step-icon{background:var(--surface-elevated);border:1px solid var(--hairline-strong);width:28px;height:28px;color:var(--ash);z-index:1;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:13px;transition:all .3s;display:flex}.demo-step.active .demo-step-icon{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger);animation:1s infinite stepIconPulse}.demo-step.done .demo-step-icon{background:var(--success-bg);border-color:var(--success-border);color:var(--success)}@keyframes stepIconPulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.demo-step-body{flex:1;padding-top:4px}.demo-step-label{color:var(--charcoal);font-size:13px;font-weight:500}.demo-step.active .demo-step-label{color:var(--ink)}.demo-step.done .demo-step-label{color:var(--success)}.demo-step-sub{color:var(--ash);margin-top:2px;font-size:12px}.demo-step-line{background:var(--hairline);z-index:0;width:1px;height:100%;position:absolute;top:34px;left:14px}.demo-step.done .demo-step-line{background:var(--success-border)}.demo-running{align-items:center;gap:var(--sp-lg);padding:var(--sp-lg);background:var(--danger-bg);border:1px solid var(--danger-border);border-radius:var(--radius-lg);margin-top:var(--sp-lg);display:flex}.failure-type-grid{margin-bottom:var(--sp-lg);grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.failure-type-btn{background:var(--surface-elevated);border:1px solid var(--hairline-strong);border-radius:var(--radius-lg);cursor:pointer;color:var(--charcoal);font-size:13px;font-weight:500;font-family:var(--font-sans);text-align:center;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;transition:all .2s;display:flex}.failure-type-btn .btn-icon{font-size:1.4rem;line-height:1}.failure-type-btn:hover:not(:disabled){color:var(--ink);background:#0075ff0f;border-color:#3b9eff4d;transform:translateY(-1px)}.failure-type-btn.selected{border-color:var(--danger-border);color:var(--danger);background:var(--danger-bg)}.failure-type-btn:disabled{opacity:.35;cursor:not-allowed}