:root{--bg-0: #060913;--bg-1: #0b1020;--bg-2: #101830;--glass: rgba(15, 22, 40, .62);--glass-strong: rgba(18, 26, 48, .78);--glass-border: rgba(255, 255, 255, .08);--glass-border-hi: rgba(255, 255, 255, .16);--text: #e8ecf4;--muted: #8b94a8;--accent: #38bdf8;--accent-2: #34d399;--accent-grad: linear-gradient(135deg, #34d399 0%, #38bdf8 100%);--danger: #ef4444;--amber: #f59e0b;--orange: #f97316;--green: #22c55e;--radius: 14px;--radius-sm: 10px;--shadow: 0 8px 28px rgba(0, 0, 0, .45);--transition: .16s ease}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:system-ui,Segoe UI,-apple-system,sans-serif;color:var(--text);background:radial-gradient(1100px 700px at 85% -10%,rgba(56,189,248,.1),transparent 60%),radial-gradient(900px 600px at -15% 110%,rgba(52,211,153,.08),transparent 60%),linear-gradient(160deg,var(--bg-1) 0%,var(--bg-0) 55%,#04060d 100%);background-attachment:fixed;-webkit-font-smoothing:antialiased}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:8px;border:2px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background:#ffffff2e;background-clip:content-box}*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent}.app{display:flex;height:100vh;overflow:hidden}.sidebar{width:340px;min-width:340px;background:var(--glass);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border-right:1px solid var(--glass-border);padding:14px 16px 20px;overflow-y:auto;box-shadow:var(--shadow);z-index:500}.topbar{display:flex;align-items:center;gap:12px;padding:10px 12px;margin:0 0 14px;background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:var(--radius)}.logo-mark{font-size:24px;line-height:1;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:var(--accent-grad);box-shadow:0 4px 14px #38bdf859;flex-shrink:0}.topbar-text{flex:1;min-width:0}.topbar h1{font-size:17px;margin:0;letter-spacing:.2px;background:var(--accent-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:700}.sub{color:var(--muted);font-size:11.5px;margin-top:1px}.conn-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;transition:background var(--transition),box-shadow var(--transition)}.conn-dot.ok{background:var(--green);box-shadow:0 0 8px #22c55ee6,0 0 18px #22c55e73;animation:pulse-ok 2.4s ease-in-out infinite}.conn-dot.down{background:var(--danger);box-shadow:0 0 8px #ef4444e6,0 0 18px #ef444473}@keyframes pulse-ok{0%,to{box-shadow:0 0 6px #22c55ecc,0 0 14px #22c55e59}50%{box-shadow:0 0 10px #22c55e,0 0 22px #22c55e8c}}.panel{background:#ffffff09;border:1px solid var(--glass-border);border-radius:var(--radius);padding:12px;margin-bottom:16px}.panel-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);margin-bottom:10px}.section-title{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text);margin:4px 0 10px}.count-pill{font-size:11px;font-weight:700;padding:1px 8px;border-radius:999px;background:#38bdf829;color:var(--accent);border:1px solid rgba(56,189,248,.3)}.btn{width:100%;padding:10px 12px;border:1px solid var(--glass-border);border-radius:var(--radius-sm);background:#ffffff0d;color:var(--text);cursor:pointer;margin-bottom:8px;font-size:13px;font-family:inherit;transition:background var(--transition),border-color var(--transition),transform var(--transition),box-shadow var(--transition)}.btn:hover{background:#ffffff17;border-color:var(--glass-border-hi)}.btn:active{transform:translateY(1px)}.btn.primary{background:var(--accent-grad);color:#04121b;border:none;font-weight:700;box-shadow:0 4px 16px #38bdf84d}.btn.primary:hover{box-shadow:0 6px 22px #38bdf873;filter:brightness(1.06)}.device{padding:12px;background:#ffffff09;border:1px solid var(--glass-border);border-radius:var(--radius);margin-bottom:10px;cursor:pointer;transition:background var(--transition),border-color var(--transition),transform var(--transition),box-shadow var(--transition)}.device:hover{background:#fff1;border-color:var(--glass-border-hi);transform:translateY(-1px)}.device.active{border-color:#38bdf88c;background:#38bdf814;box-shadow:0 0 0 1px #38bdf840,0 4px 16px #38bdf81f}.device-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.device .name{font-weight:600;font-size:14px;display:flex;align-items:baseline;gap:7px;min-width:0}.dev-id{font-size:11px;color:var(--muted);font-weight:400}.device .meta{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}.device-stats{display:flex;align-items:center;gap:12px;margin-bottom:6px;font-size:12px}.stat{display:inline-flex;align-items:center;gap:6px;color:var(--text)}.stat.muted{color:var(--muted);margin-left:auto;font-size:11px}.battery{width:30px;height:11px;border:1px solid rgba(255,255,255,.35);border-radius:3px;padding:1.5px;position:relative;display:inline-block}.battery:after{content:"";position:absolute;right:-4px;top:2.5px;width:2.5px;height:4px;background:#ffffff59;border-radius:0 1px 1px 0}.battery-fill{display:block;height:100%;border-radius:1.5px;background:var(--green);transition:width .4s ease}.battery-fill.mid{background:var(--amber)}.battery-fill.low{background:var(--danger)}.badge{font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap;letter-spacing:.3px;flex-shrink:0}.badge.lvl0{background:#22c55e26;color:#6ee7a0;border:1px solid rgba(34,197,94,.35);box-shadow:0 0 10px #22c55e33}.badge.lvl1{background:#f59e0b26;color:#fbd087;border:1px solid rgba(245,158,11,.4);box-shadow:0 0 10px #f59e0b38}.badge.lvl2{background:#f9731629;color:#fdb37c;border:1px solid rgba(249,115,22,.45);box-shadow:0 0 12px #f9731647}.badge.lvl3{background:#ef44442e;color:#fca5a5;border:1px solid rgba(239,68,68,.5);box-shadow:0 0 14px #ef444466;animation:badge-alarm 1.6s ease-in-out infinite}@keyframes badge-alarm{0%,to{box-shadow:0 0 10px #ef44444d}50%{box-shadow:0 0 18px #ef444499}}.field{margin-bottom:10px}.field label{display:block;font-size:11px;color:var(--muted);margin-bottom:4px;letter-spacing:.4px}.field input,.field select{width:100%;padding:9px 10px;border-radius:var(--radius-sm);border:1px solid var(--glass-border);background:#00000040;color:var(--text);font-size:13px;font-family:inherit;transition:border-color var(--transition),box-shadow var(--transition)}.field input:focus,.field select:focus{outline:none;border-color:#38bdf899;box-shadow:0 0 0 3px #38bdf826}.hint{font-size:12px;color:var(--muted);margin:8px 0;line-height:1.45}.fence-hint{margin-top:10px;padding:8px 10px;border-radius:var(--radius-sm);background:#34d39914;border:1px dashed rgba(52,211,153,.4);color:#a7e9cd}.toolbar{display:flex;gap:8px;margin-bottom:8px}.tool{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px;border:1px solid var(--glass-border);border-radius:var(--radius-sm);background:#ffffff0d;color:var(--text);cursor:pointer;font-size:13px;font-family:inherit;transition:background var(--transition),border-color var(--transition),box-shadow var(--transition),transform var(--transition)}.tool:hover{background:#ffffff17;border-color:var(--glass-border-hi)}.tool:active{transform:translateY(1px)}.tool.active{background:var(--accent-grad);color:#04121b;border-color:transparent;font-weight:700;box-shadow:0 4px 14px #38bdf859}.tool-ico{font-size:16px;line-height:1}.vertex-handle{width:16px;height:16px;background:#fff;border:2px solid var(--accent);border-radius:50%;box-shadow:0 0 0 3px #38bdf859,0 2px 6px #00000080;cursor:grab}.vertex-handle:active{cursor:grabbing}.map{flex:1;position:relative}.map .leaflet-tile{filter:brightness(.65) invert(1) contrast(3.2) hue-rotate(195deg) saturate(.35) brightness(.62)}.map .leaflet-container{background:#0a0f1c}.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--glass-strong);color:var(--text);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);box-shadow:var(--shadow);border-radius:12px}.leaflet-popup-content{font-family:inherit;font-size:13px;line-height:1.5}.leaflet-container a.leaflet-popup-close-button{color:var(--muted)}.leaflet-bar a{background:var(--glass-strong);color:var(--text);border-bottom:1px solid var(--glass-border)}.leaflet-bar a:hover{background:#38bdf833}.leaflet-control-attribution{background:#06091399!important;color:var(--muted)!important}.leaflet-control-attribution a{color:var(--accent)!important}.legend{position:absolute;right:14px;bottom:26px;z-index:800;background:var(--glass-strong);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--glass-border);border-radius:var(--radius);padding:10px 14px;box-shadow:var(--shadow);font-size:12px;min-width:170px}.legend-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.1px;color:var(--muted);margin-bottom:7px}.legend-row{display:flex;align-items:center;gap:9px;padding:2.5px 0;color:var(--text)}.legend-swatch{width:26px;height:0;border-top-width:3px;border-top-style:solid;border-radius:2px;flex-shrink:0}.legend-swatch.dashed-emerald{border-top-style:dashed;border-top-color:#34d399}.legend-swatch.solid-sky{border-top-color:#38bdf8}.legend-swatch.solid-amber{border-top-color:#f59e0b}.toasts{position:fixed;top:16px;right:16px;z-index:2000;display:flex;flex-direction:column;gap:10px;max-width:360px}.toast{display:flex;align-items:flex-start;gap:10px;padding:12px 16px;border-radius:var(--radius);background:var(--glass-strong);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border-hi);box-shadow:var(--shadow);font-size:13px;line-height:1.45;animation:toast-in .22s cubic-bezier(.2,.9,.3,1.2)}.toast.success{border-left:3px solid var(--accent-2)}.toast.error{border-left:3px solid var(--danger)}.toast-ico{font-size:12px;font-weight:700;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}.toast.success .toast-ico{background:#34d39933;color:#6ee7b7}.toast.error .toast-ico{background:#ef444433;color:#fca5a5}@keyframes toast-in{0%{opacity:0;transform:translate(24px) scale(.96)}to{opacity:1;transform:translate(0) scale(1)}}