@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap";body{margin:0}:root{--bg-base: #020817;--bg-surface: #0f172a;--bg-card: #1e293b;--bg-hover: #263148;--border: #1e293b;--border-glow:#334155;--text-primary: #f1f5f9;--text-secondary: #94a3b8;--text-muted: #475569;--accent-green: #22c55e;--accent-red: #ef4444;--accent-yellow: #eab308;--accent-orange: #f97316;--accent-blue: #3b82f6;--accent-purple: #a855f7;--accent-cyan: #06b6d4;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--font-main: "Inter", system-ui, sans-serif;--font-mono: "JetBrains Mono", monospace;--panel-w: 270px;--header-h: 64px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden}body{font-family:var(--font-main);background:var(--bg-base);color:var(--text-primary);font-size:14px;line-height:1.5}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-glow);border-radius:4px}.app-root{display:flex;flex-direction:column;height:100vh;overflow:hidden;background:radial-gradient(ellipse at 15% 15%,rgba(59,130,246,.06) 0%,transparent 60%),radial-gradient(ellipse at 85% 85%,rgba(168,85,247,.05) 0%,transparent 60%),var(--bg-base)}.app-header{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;padding:0 20px;background:#0f172af2;border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);flex-shrink:0;z-index:10}.header-left{display:flex;align-items:center;gap:14px}.logo-badge{font-size:28px;filter:drop-shadow(0 0 12px rgba(239,68,68,.6));animation:pulse-logo 2s ease-in-out infinite}@keyframes pulse-logo{0%,to{transform:scale(1);filter:drop-shadow(0 0 12px rgba(239,68,68,.6))}50%{transform:scale(1.08);filter:drop-shadow(0 0 20px rgba(239,68,68,.9))}}.app-title{font-size:18px;font-weight:700;background:linear-gradient(135deg,#ef4444,#f97316,#eab308);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.3px}.app-subtitle{font-size:11px;color:var(--text-muted);font-family:var(--font-mono);letter-spacing:.5px}.legend{display:flex;gap:16px}.legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-secondary)}.legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;box-shadow:0 0 6px currentColor}.app-main{display:grid;grid-template-columns:var(--panel-w) 1fr var(--panel-w);flex:1;min-height:0;overflow:hidden}.controls-panel,.stats-panel{background:#0f172ad9;border-right:1px solid var(--border);overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}.stats-panel{border-right:none;border-left:1px solid var(--border)}.panel-header{display:flex;align-items:center;justify-content:space-between;padding:4px 0 8px;border-bottom:1px solid var(--border);margin-bottom:4px}.panel-title{font-weight:700;font-size:14px;color:var(--text-primary);letter-spacing:.3px;display:flex;align-items:center;gap:6px}.tick-badge{font-family:var(--font-mono);font-size:10px;color:var(--accent-cyan);background:#06b6d41a;padding:2px 8px;border-radius:20px;border:1px solid rgba(6,182,212,.2)}.divider{height:1px;background:var(--border);margin:2px 0}.control-section{display:flex;flex-direction:column;gap:6px}.section-heading{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;display:flex;align-items:center;gap:6px}.section-hint{font-size:10px;color:var(--text-muted);font-style:italic}.control-row{display:flex;flex-direction:column;gap:4px}.control-label-row{display:flex;justify-content:space-between;align-items:center}.ctrl-label{font-size:12px;color:var(--text-secondary)}.ctrl-value{font-size:11px;font-family:var(--font-mono);color:var(--accent-cyan)}.select-input{width:100%;background:var(--bg-card);border:1px solid var(--border-glow);border-radius:var(--radius-sm);color:var(--text-primary);padding:6px 28px 6px 10px;font-size:12px;font-family:var(--font-main);outline:none;cursor:pointer;transition:border-color .2s;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}.select-input:hover{border-color:var(--accent-blue)}.select-input:disabled{opacity:.5;cursor:not-allowed}.slider{-webkit-appearance:none;width:100%;height:4px;border-radius:4px;background:var(--bg-card);outline:none;cursor:pointer}.slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent-blue);cursor:pointer;box-shadow:0 0 8px #3b82f680;transition:transform .15s,box-shadow .15s}.slider::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 0 14px #3b82f6cc}.slider:disabled{opacity:.4;cursor:not-allowed}.btn-group{display:flex;gap:8px}.btn{flex:1;padding:9px 12px;border:none;border-radius:var(--radius-sm);font-size:13px;font-weight:600;font-family:var(--font-main);cursor:pointer;transition:all .2s;letter-spacing:.3px;display:flex;align-items:center;justify-content:center;gap:6px}.btn-start{background:linear-gradient(135deg,#16a34a,#22c55e);color:#fff;box-shadow:0 0 16px #22c55e4d}.btn-start:hover{box-shadow:0 0 24px #22c55e80;transform:translateY(-1px)}.btn-pause{background:linear-gradient(135deg,#b45309,#eab308);color:#fff;box-shadow:0 0 16px #eab3084d}.btn-pause:hover{box-shadow:0 0 24px #eab30880;transform:translateY(-1px)}.btn-reset{background:var(--bg-card);color:var(--text-secondary);border:1px solid var(--border-glow)}.btn-reset:hover{background:var(--bg-hover);color:var(--text-primary);transform:translateY(-1px)}.defense-actions{display:flex;flex-direction:column;gap:6px}.defense-btn{padding:8px 12px;background:var(--bg-card);border:1px solid var(--border-glow);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:12px;font-family:var(--font-main);cursor:pointer;transition:all .2s;text-align:left;display:flex;align-items:center;gap:8px}.defense-btn:hover{background:#ffffff0d;border-color:var(--accent, var(--accent-blue));color:var(--text-primary)}.defense-btn.active{background:#ffffff0f;border-color:var(--accent, var(--accent-blue));color:var(--accent, var(--accent-blue));box-shadow:0 0 12px rgba(from var(--accent) r g b / .2)}.action-hint{font-size:10px;color:var(--accent-cyan);font-family:var(--font-mono);padding:4px 6px;background:#06b6d414;border-radius:var(--radius-sm);border-left:2px solid var(--accent-cyan)}.graph-section{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 50%,rgba(30,41,59,.6) 0%,transparent 70%),var(--bg-base)}.graph-canvas{width:100%;height:100%}.node-detail-panel{position:absolute;top:12px;left:12px;width:200px;background:#0f172af2;border:1px solid var(--border-glow);border-radius:var(--radius-md);padding:12px;display:flex;flex-direction:column;gap:10px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 8px 32px #0006;animation:slide-in .2s ease-out}@keyframes slide-in{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.node-detail-header{display:flex;align-items:center;gap:8px}.node-icon{font-size:22px}.node-detail-id{font-size:11px;font-family:var(--font-mono);color:var(--accent-cyan);font-weight:600}.node-detail-type{font-size:10px;color:var(--text-muted);letter-spacing:1px}.node-state-badge{padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600;text-align:center}.node-state-badge[data-state=healthy]{background:#22c55e26;color:#22c55e;border:1px solid rgba(34,197,94,.3)}.node-state-badge[data-state=infected]{background:#ef444426;color:#ef4444;border:1px solid rgba(239,68,68,.3)}.node-state-badge[data-state=protected]{background:#eab30826;color:#eab308;border:1px solid rgba(234,179,8,.3)}.node-state-badge[data-state=quarantined]{background:#f9731626;color:#f97316;border:1px solid rgba(249,115,22,.3)}.node-state-badge[data-state=offline]{background:#37415166;color:#9ca3af;border:1px solid rgba(55,65,81,.6)}.node-stats{display:flex;flex-direction:column;gap:6px}.node-stat-row{display:flex;justify-content:space-between;font-size:11px}.stat-label{color:var(--text-secondary)}.stat-value{color:var(--text-primary);font-family:var(--font-mono)}.stat-bar-track{height:3px;background:var(--bg-card);border-radius:3px;overflow:hidden;margin-top:1px}.stat-bar-fill{height:100%;border-radius:3px;transition:width .4s ease}.node-actions{display:flex;flex-wrap:wrap;gap:4px}.action-btn{flex:1;min-width:70px;padding:5px 6px;border:1px solid var(--border-glow);border-radius:var(--radius-sm);background:var(--bg-card);color:var(--text-secondary);font-size:10px;cursor:pointer;transition:all .2s;font-family:var(--font-main)}.action-btn:hover:not(:disabled){border-color:var(--accent-blue);color:var(--text-primary);background:var(--bg-hover)}.action-btn:disabled{opacity:.4;cursor:not-allowed}.action-btn.firewall:hover:not(:disabled){border-color:var(--accent-yellow);color:var(--accent-yellow)}.action-btn.patch:hover:not(:disabled){border-color:var(--accent-green);color:var(--accent-green)}.action-btn.quarantine:hover:not(:disabled){border-color:var(--accent-orange);color:var(--accent-orange)}.action-btn.restore:hover:not(:disabled){border-color:var(--accent-green);color:var(--accent-green)}.mode-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;letter-spacing:.5px;display:inline-flex;align-items:center;gap:4px}.mode-chaos{background:#ef444426;color:#ef4444;border:1px solid rgba(239,68,68,.3)}.mode-defense{background:#22c55e26;color:#22c55e;border:1px solid rgba(34,197,94,.3)}.mode-cyberattack{background:#eab30826;color:#eab308;border:1px solid rgba(234,179,8,.3)}.end-banner{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-radius:var(--radius-sm);font-size:12px;font-weight:600;gap:8px}.end-lost{background:#ef444426;border:1px solid rgba(239,68,68,.4);color:#ef4444}.end-won{background:#22c55e26;border:1px solid rgba(34,197,94,.4);color:#22c55e}.end-banner button{background:transparent;border:none;color:inherit;cursor:pointer;font-size:14px;opacity:.7;flex-shrink:0}.end-banner button:hover{opacity:1}.metric-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}.metric-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 6px;text-align:center;transition:border-color .3s;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center}.metric-card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--card-color, var(--accent-blue))}.metric-icon{display:flex;align-items:center;justify-content:center;margin-bottom:3px;color:var(--card-color, var(--text-primary))}.metric-value{font-size:18px;font-weight:700;font-family:var(--font-mono);color:var(--card-color, var(--text-primary));line-height:1}.metric-label{font-size:9px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;margin-top:2px}.rate-meters{display:flex;flex-direction:column;gap:6px}.rate-row{display:flex;justify-content:space-between;align-items:center;font-size:11px}.rate-label{color:var(--text-secondary);display:flex;align-items:center;gap:5px}.rate-val{font-family:var(--font-mono);font-weight:700;font-size:12px}.rate-val.red{color:#ef4444}.rate-val.green{color:#22c55e}.rate-bar-track{height:4px;background:var(--bg-card);border-radius:4px;overflow:hidden}.rate-bar-fill{height:100%;border-radius:4px;transition:width .6s ease}.chart-section{display:flex;flex-direction:column;gap:6px}.chart-title{font-size:11px;font-weight:600;color:var(--text-secondary);letter-spacing:.3px;display:flex;align-items:center;gap:6px}