*{margin:0;padding:0;box-sizing:border-box;font-family:segoe ui,sans-serif}*{user-select:none}body{background:#f3f4f6;color:#1f2937;display:flex;flex-direction:column;align-items:center;min-height:100vh;overflow:hidden}header{width:100%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,5%);z-index:50;display:flex;flex-direction:column}.header-row{padding:1rem;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;background-color:#f9fafb}.top-bar{justify-content:space-between}.bottom-bar{gap:1rem;flex-direction:column}.header-title{display:flex;align-items:center;gap:.5rem;text-transform:uppercase;font-weight:700;color:#374151;min-width:max-content}.text-purple{color:#6b21a8}.view-toggles{display:flex;gap:.5rem}.toggle-btn{background:#fff;border:1px solid #e5e7eb;padding:3.5px 7px;border-radius:3.5px;font-size:10.5px;line-height:14px;color:#9ca3af;cursor:pointer;transition:color,background-color,border-color,box-shadow,transform,filter .15s cubic-bezier(.4,0,.2,1);font-family:poppins,sans-serif;font-weight:400;appearance:button;-webkit-tap-highlight-color:transparent}.toggle-btn.active{background:#f3f4f6;color:#6b21a8;font-weight:600;border-color:#d1d5db;box-shadow:rgba(0,0,0,5%)0 2px 4px inset}.attack-controls-wrapper{width:100%}.attack-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;width:100%}.attack-btn{padding:3.5px 7px;border-radius:3.5px;font-size:10.5px;line-height:14px;border:1px solid #e5e7eb;background:#fff;color:#6b7280;cursor:pointer;transition:color,background-color,border-color,box-shadow,transform,filter .15s cubic-bezier(.4,0,.2,1);font-family:poppins,sans-serif;font-weight:400;appearance:button;-webkit-tap-highlight-color:transparent}.attack-btn:hover{background:#f3f4f6}.attack-btn.active{font-weight:600;border-color:#fecaca;background:#fef2f2;color:#b91c1c;box-shadow:0 1px 2px rgba(0,0,0,5%)}@media(min-width:768px){.bottom-bar{flex-direction:row}.attack-controls-wrapper{padding-left:2rem;flex:1}}.main-area{position:relative;width:100%;flex:1;display:flex;justify-content:center;align-items:center;padding:20px}.network-container{position:relative;width:100%;max-width:1200px;height:750px;background:#e5e7eb;border-radius:24px;border:4px solid #d1d5db;box-shadow:inset 0 0 60px rgba(0,0,0,5%);overflow:hidden;cursor:grab}.network-container:active{cursor:grabbing}.zone-label{position:absolute;font-size:3rem;font-weight:900;color:rgba(0,0,0,3%);text-transform:uppercase;pointer-events:none;z-index:0}.zone-internet{top:20px;left:20px}.zone-dmz{top:200px;left:20px}.zone-internal{bottom:20px;left:20px}.perimeter-line{position:absolute;top:250px;left:0;width:100%;height:2px;border-top:2px dashed #9ca3af;opacity:.3;z-index:0;pointer-events:none}.network-viewport{position:absolute;width:100%;height:100%;transform-origin:0 0;transition:transform .5s cubic-bezier(.25,.46,.45,.94)}#connections-layer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none}#nodes-layer{position:absolute;top:0;left:0;width:100%;height:100%;z-index:20;pointer-events:none}.info-overlay{position:absolute;bottom:30px;right:30px;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);padding:15px 20px;border-radius:12px;border-left:4px solid #3b82f6;box-shadow:0 10px 25px rgba(0,0,0,.1);max-width:400px;pointer-events:none;transition:opacity .3s;z-index:60}.info-status{font-weight:700;color:#111827;margin-bottom:4px;font-size:1rem}.info-desc{font-size:.85rem;color:#4b5563;line-height:1.4}.node{position:absolute;width:70px;height:70px;background:linear-gradient(135deg,#475569 0%,#334155 100%);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;border:3px solid #64748b;box-shadow:0 5px 15px rgba(0,0,0,.15);z-index:20;pointer-events:auto;transition:all .6s cubic-bezier(.34,1.56,.64,1);opacity:0;transform:scale(0)}.node.visible{opacity:1;transform:scale(1)}.node-icon{font-size:1.5rem;margin-bottom:2px}.node-label{font-size:.65rem;font-weight:700;color:#fff;text-align:center;text-shadow:0 2px 4px rgba(0,0,0,.5);width:140px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.node.user{background:linear-gradient(135deg,#059669 0%,#10b981 100%);border-color:#34d399}.node.server{background:linear-gradient(135deg,#4b5563 0%,#374151 100%);border-color:#9ca3af}.node.dmz{background:linear-gradient(135deg,#6366f1 0%,#818cf8 100%);border-color:#a5b4fc}.node.gateway{width:90px;height:90px;background:linear-gradient(135deg,#2563eb 0%,#3b82f6 100%);border-color:#60a5fa;box-shadow:0 0 20px rgba(59,130,246,.4)}.node.vpn{background:linear-gradient(135deg,#ea580c 0%,#f97316 100%);border-color:#fdba74}.node.switch{width:80px;height:80px;background:linear-gradient(135deg,#0891b2 0%,#06b6d4 100%);border-color:#22d3ee;border-radius:15px}.node.attacker{background:linear-gradient(135deg,#7c3aed 0%,#8b5cf6 100%);border-color:#a78bfa}.node.compromised{background:linear-gradient(135deg,#dc2626 0%,#ef4444 100%)!important;border-color:#fca5a5!important;animation:shake .5s ease-in-out;box-shadow:0 0 30px rgba(239,68,68,.6)}.node.blocked{animation:shake .5s ease-in-out;filter:grayscale(.8)}.node.blocked::after{content:"⛔";position:absolute;top:-15px;right:-15px;font-size:2rem;animation:popIn .3s}@keyframes popIn{0%{transform:scale(0)}80%{transform:scale(1.2)}100%{transform:scale(1)}}@keyframes shake{0%,100%{transform:translateX(0)scale(1)}25%{transform:translateX(-5px)scale(1.05)}75%{transform:translateX(5px)scale(1.05)}}.connection{position:absolute;height:2px;background:#cbd5e1;transform-origin:left center;z-index:1;border-radius:2px;transition:opacity .3s;opacity:.5}.connection.dynamic-red{background:#ef4444;height:6px;z-index:10;opacity:1;box-shadow:0 0 12px rgba(239,68,68,.9)}.connection.dynamic-orange-dashed{background:0 0;border-bottom:3px dashed #f97316;height:0;z-index:10;opacity:1;box-shadow:none}.connection.dynamic-green{background:#10b981;height:6px;z-index:10;opacity:1;box-shadow:0 0 12px rgba(16,185,129,.9)}.orb{position:absolute;width:24px;height:24px;border-radius:50%;z-index:9999;transform:translate(-50%,-50%);box-shadow:0 0 20px currentColor;border:4px solid #fff;pointer-events:none}.orb.attack{background:#ef4444;color:#ef4444}.orb.legit{background:#10b981;color:#10b981}.orb.orange{background:#f97316;color:#f97316}.push-notification{position:absolute;top:40px;right:40px;width:340px;background:#fff;border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.3);overflow:hidden;transform:translateX(450px);transition:transform .5s cubic-bezier(.16,1,.3,1);z-index:100;border:1px solid #e5e7eb}.push-notification.active{transform:translateX(0)}.push-header{background:#111827;color:#fff;padding:12px 15px;display:flex;align-items:center;gap:10px;font-size:.9rem}.push-body{padding:20px}.push-title{font-weight:700;font-size:1rem;margin-bottom:5px;color:#1f2937}.push-text{font-size:.85rem;color:#4b5563;margin-bottom:15px;line-height:1.4}.push-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.btn{padding:8px;border:none;border-radius:6px;font-weight:600;font-size:.8rem;cursor:pointer;transition:transform .1s}.btn:active{transform:scale(.95)}.btn-allow{background:#10b981;color:#fff}.btn-deny{background:#ef4444;color:#fff;transition:background .3s}.btn-deny.auto-selecting{background:#7f1d1d}@media(max-width:768px){header{padding:10px}.control-bar{flex-direction:column;gap:10px;align-items:flex-start}.view-controls,.scenario-controls{width:100%;justify-content:center}#scenarioControls{position:static;transform:none;left:auto}.info-overlay{width:90%;bottom:10px;left:5%;right:auto}}