:root{--bg-dark: #0f172a;--panel-bg: #1e293b;--accent-primary: #38bdf8;--accent-success: #10b981;--accent-danger: #ef4444;--text-main: #f1f5f9;--text-dim: #94a3b8;--border-color: #334155;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05)}body{margin:0;height:100vh;font-family:Inter,sans-serif;background-color:var(--bg-dark);color:var(--text-main);overflow:hidden;padding-top:60px}#root{display:flex;height:calc(100vh - 60px);position:relative}.app-header{position:fixed;top:0;left:0;right:0;height:60px;background-color:#1e293bcc;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;padding:0 24px;z-index:5000;box-shadow:0 4px 6px -1px #0000001a}.header-logo{display:flex;align-items:center;gap:12px}.header-title{font-family:JetBrains Mono,monospace;font-weight:800;font-size:1.25rem;letter-spacing:.1em;color:var(--text-main);background:linear-gradient(90deg,var(--text-main) 0%,var(--accent-primary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.wasp-icon{color:var(--text-main);filter:drop-shadow(0 0 5px var(--accent-primary))}.header-status{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.2);padding:4px 12px;border-radius:4px;border:1px solid var(--border-color)}.status-dot{width:8px;height:8px;background-color:var(--accent-success);border-radius:50%;box-shadow:0 0 8px var(--accent-success);animation:pulse 2s infinite}@keyframes pulse{0%{opacity:1}50%{opacity:.5}to{opacity:1}}.status-text{font-size:.7rem;font-weight:700;letter-spacing:.05em;color:var(--accent-success)}@media (max-width: 768px){.header-title{font-size:1rem}.header-status{display:none}}#map{flex:2;height:100%;filter:grayscale(100%) brightness(.8) contrast(1.2);background-color:#1e293b}#sidebar{height:100%;padding:24px;background-color:var(--panel-bg);overflow-y:auto;box-sizing:border-box;display:flex;flex-direction:column}.sidebar-overlay{pointer-events:none}.sidebar-overlay.open{pointer-events:auto}@media (max-width: 768px){.view-toggle{flex-wrap:wrap;gap:5px!important}.view-toggle button{font-size:.8rem;padding:8px!important}.role-indicator{order:-1;width:100%;margin-bottom:5px;margin-left:0!important}.sidebar-overlay{width:90%!important}}h2,h3{margin-top:0;color:var(--text-main);font-weight:600;font-size:1.25rem;margin-bottom:1.5rem}h3{font-size:1rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em;margin-top:2rem;border-bottom:1px solid var(--border-color);padding-bottom:.5rem}.node-info{background:rgba(255,255,255,.03);padding:12px;border-radius:6px;border:1px solid var(--border-color);margin-bottom:12px;font-size:.875rem;font-family:JetBrains Mono,monospace}.status-indicator{display:inline-block;width:8px;height:8px;background-color:var(--accent-success);border-radius:50%;margin-right:8px}.status-indicator-fail{display:inline-block;width:8px;height:8px;background-color:var(--accent-danger);border-radius:50%;margin-right:8px}.form-group{margin-bottom:1.25rem}label{display:block;font-weight:500;margin-bottom:.5rem;font-size:.75rem;color:var(--text-dim);text-transform:uppercase}input[type=text],select{width:100%;padding:10px 12px;background:var(--bg-dark);border:1px solid var(--border-color);border-radius:6px;color:var(--text-main);box-sizing:border-box;font-family:inherit;transition:border-color .2s;font-size:.9rem}input[type=text]:focus,select:focus{outline:none;border-color:var(--accent-primary)}input[readonly]{background-color:#0003;color:var(--text-dim);cursor:not-allowed}.icon-selector{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.icon-option{border:1px solid var(--border-color);padding:8px;text-align:center;cursor:pointer;font-size:1.25rem;border-radius:6px;transition:all .2s;background:var(--bg-dark)}.icon-option:hover{border-color:var(--accent-primary)}.icon-option.selected{border-color:var(--accent-primary);background:rgba(56,189,248,.1)}button{width:100%;padding:12px;background-color:var(--accent-primary);color:var(--bg-dark);border:none;border-radius:6px;font-weight:600;cursor:pointer;transition:opacity .2s;font-size:.9rem}button:hover{opacity:.9}.card-actions{display:flex;gap:8px;margin-top:12px}.btn-small{width:auto;padding:6px 12px;font-size:.75rem}.btn-outline{background:transparent;border:1px solid var(--border-color);color:var(--text-main)}.btn-outline:hover{border-color:var(--text-dim);background:rgba(255,255,255,.05)}.btn-danger{background:transparent;border:1px solid var(--accent-danger);color:var(--accent-danger)}.btn-danger:hover{background:var(--accent-danger);color:#fff}.btn-primary{background-color:var(--accent-primary);color:var(--bg-dark)}.status-card{background:rgba(255,255,255,.02);padding:16px;margin-bottom:12px;border:1px solid var(--border-color);border-radius:8px;display:flex;gap:16px}.status-card .unit-icon{font-size:1.5rem}.status-card strong{color:var(--accent-primary);font-size:.9rem}.status-card .msg{font-size:.875rem;margin-top:4px;line-height:1.5}.status-card .time{font-size:.75rem;color:var(--text-dim);margin-top:8px;display:block;font-family:JetBrains Mono,monospace}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.75);display:flex;justify-content:center;align-items:center;z-index:2000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-content{background:var(--panel-bg);padding:24px;border-radius:12px;border:1px solid var(--border-color);max-width:400px;width:90%;box-shadow:0 20px 25px -5px #0000001a}.modal-content h3{margin-top:0;border:none;padding:0;color:var(--text-main);text-transform:none;letter-spacing:normal}.modal-content p{color:var(--text-dim);font-size:.9rem;line-height:1.5}.modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-dark)}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}.unit-marker-container{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:rgba(30,41,59,.8);border:2px solid var(--accent-primary);border-radius:50%;box-shadow:0 0 15px var(--accent-primary);transition:all .3s ease}.unit-marker-icon{font-size:24px;filter:drop-shadow(0 0 2px black)}.connection-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.8);z-index:9999;display:flex;align-items:center;justify-content:center}.connection-modal{background:#1a1a1a;padding:2rem;border:1px solid #ff4444;border-radius:8px;text-align:center;color:#fff}.reconnect-timer span{font-weight:700;color:#f44;font-size:1.2rem}