:root { --navy:#111d2e; --panel:#17263a; --bg:#eef2f5; --ink:#162334; --muted:#718096; --accent:#14b8a6; --blue:#3b82f6; --border:#dce3e9; }

* { box-sizing:border-box; }

body { margin:0; font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--ink); background:var(--bg); overflow:hidden; }

body.authenticated #system { display:block; }

[hidden]{display:none!important}

.login-screen { position:fixed; inset:0; z-index:100; display:grid; place-items:center; background:radial-gradient(circle at 20% 20%,#1c4a5a,#111d2e 55%); }

.login-card { width:min(390px,calc(100vw - 32px)); padding:34px; border-radius:16px; background:#fff; box-shadow:0 25px 70px #0005; }.login-card .large{width:48px;height:48px;color:#fff}.login-card h1{font-size:22px;margin:20px 0 6px}.login-card p{font-size:12px;color:#718096;margin:0 0 22px}.login-card label{display:block;font-size:11px;font-weight:700;color:#536276;margin:12px 0}.login-card input{display:block;width:100%;margin-top:6px;border:1px solid var(--border);border-radius:7px;padding:11px;outline:none}.login-card input:focus{border-color:var(--accent)}.login-card .primary{width:100%;border:0;border-radius:7px;padding:12px;background:var(--accent);color:#073b35;font-weight:800;margin-top:9px}.login-error{height:18px;margin-top:10px;text-align:center;color:#e11d48;font-size:11px}

button,input,textarea { font:inherit; }

button { cursor:pointer; }

.topbar { height:72px; background:var(--navy); color:#fff; display:flex; align-items:center; padding:0 22px; gap:32px; box-shadow:0 2px 10px #0003; position:relative; z-index:5; }

.brand { display:flex; align-items:center; gap:11px; min-width:260px; }

.brand-mark { width:38px; height:38px; display:grid; place-items:center; border-radius:10px; background:linear-gradient(145deg,#2dd4bf,#0e7490); font-weight:900; }

.brand strong,.brand span { display:block; }.brand strong { font-size:18px; }.brand span { color:#9fb0c5; font-size:11px; letter-spacing:.06em; text-transform:uppercase; margin-top:2px; }

.project-title { flex:1; display:flex; align-items:center; gap:10px; max-width:620px; }.project-title label { font-size:12px; color:#91a2b7; text-transform:uppercase; letter-spacing:.08em; }

.project-title select,.project-title input { border:1px solid #35465c; background:#1a2a40; color:#fff; border-radius:7px; padding:9px 11px; outline:none; }.project-title select { width:175px; }.project-title input { flex:1; min-width:115px; }.project-title select:focus,.project-title input:focus { border-color:var(--accent); }

.top-actions { display:flex; gap:8px; }.top-actions button { border-radius:7px; padding:9px 13px; border:1px solid #3c4c61; color:#e9f0f7; background:transparent; }.top-actions .primary { background:var(--accent); border-color:var(--accent); color:#062e2a; font-weight:700; }

.top-actions .danger:hover { border-color:#fb7185; color:#fecdd3; }

.top-actions .save-project{border:0;background:#f59e0b;color:#332000;font-weight:800}.top-actions .save-project:not(.dirty){background:#334155;color:#94a3b8}.user-badge{align-self:center;font-size:10px;color:#a7b6c8;max-width:90px;overflow:hidden;text-overflow:ellipsis}

.app-shell { display:grid; grid-template-columns:230px minmax(500px,1fr) 360px; height:calc(100vh - 72px);min-height:0;overflow:hidden }.app-shell>*{min-height:0}

.sidebar,.inspector { min-height:0;height:100%;background:#fff; overflow-y:scroll;overflow-x:hidden; padding:22px 18px 96px; border-right:1px solid var(--border);scrollbar-width:auto;scrollbar-color:#475569 #dbe4ec;scrollbar-gutter:stable;overscroll-behavior:contain }.inspector { border-right:0; border-left:1px solid var(--border);padding-right:16px}.workspace{scrollbar-width:auto;scrollbar-color:#475569 #dbe4ec;scrollbar-gutter:stable;min-height:0}.sidebar::-webkit-scrollbar,.inspector::-webkit-scrollbar,.workspace::-webkit-scrollbar{width:16px;height:16px}.sidebar::-webkit-scrollbar-track,.inspector::-webkit-scrollbar-track,.workspace::-webkit-scrollbar-track{background:#dbe4ec;border:1px solid #cbd5e1}.sidebar::-webkit-scrollbar-thumb,.inspector::-webkit-scrollbar-thumb,.workspace::-webkit-scrollbar-thumb{min-height:48px;background:#64748b;border:3px solid #dbe4ec;border-radius:9px}.sidebar::-webkit-scrollbar-thumb:hover,.inspector::-webkit-scrollbar-thumb:hover,.workspace::-webkit-scrollbar-thumb:hover{background:#334155}.sidebar::-webkit-scrollbar-corner,.inspector::-webkit-scrollbar-corner,.workspace::-webkit-scrollbar-corner{background:#dbe4ec}

.sidebar section + section { border-top:1px solid #e7ecf0; margin-top:22px; padding-top:22px; }

.section-kicker { color:#64748b; text-transform:uppercase; font-size:11px; font-weight:800; letter-spacing:.11em; margin-bottom:12px; }

.device-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.device-grid button { display:flex; flex-direction:column; align-items:center; gap:7px; min-height:64px; padding:10px 4px; border:1px solid var(--border); background:#f8fafb; border-radius:8px; color:#354256; font-size:10px; }.device-grid button:hover { border-color:var(--accent); background:#f0fdfa; transform:translateY(-1px); }.device-grid i { min-width:32px; height:26px; padding:0 5px; border-radius:5px; display:grid; place-items:center; background:#e4eaf0; font-style:normal; font-weight:900; font-size:9px; color:#435368; }

.device-grid .cloud-icon{background:#dbeafe;color:#2563eb;font-size:17px}.device-node[data-type="internet"]{border-color:#60a5fa;background:#eff6ff}.device-node[data-type="internet"] .node-head{background:linear-gradient(135deg,#2563eb,#0284c7)}.internet-node-icon{display:grid;place-items:center;width:24px;height:24px;border-radius:5px;background:#fff;color:#2563eb;font-size:16px}

.segmented { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px; padding:3px; background:#edf1f4; border-radius:8px; }.segmented button { min-width:0;border:0; border-radius:6px; padding:9px 4px; font-size:10px; background:transparent; color:#64748b;white-space:nowrap }.segmented button.active { background:#fff; color:#17263a; box-shadow:0 1px 4px #0001; font-weight:700; }.line { display:inline-block; width:16px; height:3px; margin-right:4px; vertical-align:middle; border-radius:3px; }.utp { background:#111827; }.fiber { background:#2563eb; }.wifi{background:repeating-linear-gradient(90deg,#eab308 0 3px,transparent 3px 6px)}.usb{background:#dc2626}

.connect-button { width:100%; margin-top:10px; padding:10px; background:#17263a; color:#fff; border:0; border-radius:7px; font-weight:700; font-size:12px; }.connect-button.active { background:var(--accent); color:#073b35; box-shadow:0 0 0 3px #14b8a633; }.hint { color:#94a3b8; font-size:10px; line-height:1.4; margin:7px 2px 0; }

.legend div:not(.section-kicker) { font-size:12px; color:#64748b; margin:10px 0; }.legend-line { display:inline-block; width:28px; height:3px; margin-right:9px; vertical-align:middle; }

.add-label-button{width:100%;margin-bottom:16px;border:1px solid #cbd5e1;border-radius:7px;padding:9px;background:#f8fafc;color:#334155;font-size:10px;font-weight:800}.add-label-button:hover{border-color:var(--accent);background:#f0fdfa}

.workspace-wrap { min-width:0;min-height:0;height:100%;overflow:hidden; display:flex; flex-direction:column; }.workspace-toolbar { flex:0 0 54px;height:54px; background:#fff; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:0 16px; }.workspace-toolbar strong,.workspace-toolbar span { display:block; }.workspace-toolbar strong { font-size:13px; }.workspace-toolbar>div>span { font-size:10px; color:#7c8c9d; margin-top:2px; }

.zoom-controls { display:flex; align-items:center; gap:4px; }.zoom-controls button { height:29px; min-width:29px; padding:0 8px; border:1px solid var(--border); background:#fff; border-radius:5px; color:#4c5c6e; }.zoom-controls button.active,#moveAll.active{border-color:#0f766e;background:#ccfbf1;color:#0f766e;font-weight:800}.zoom-controls span { min-width:43px; text-align:center; font-size:11px!important; margin:0!important; }

.workspace { flex:1 1 auto;height:0;min-height:0; overflow:scroll; position:relative; background-color:#edf1f4; background-image:radial-gradient(#cbd4dc 1px,transparent 1px); background-size:20px 20px; }.canvas { position:relative; width:1400px; height:900px; margin:0;transform-origin:0 0; }.connections { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible; }.connections path { fill:none; stroke-width:3; }.connections path.utp-cable { stroke:#111827; }.connections path.fiber-cable { stroke:#2563eb; }.connections path.usb-cable { stroke:#dc2626; }.connections path.wifi-cable { stroke:#eab308; stroke-width:4; stroke-linecap:round; stroke-dasharray:1 10; }.connections text { font-size:10px; font-weight:700; fill:#64748b; paint-order:stroke; stroke:#edf1f4; stroke-width:4px; stroke-linejoin:round; }

.canvas.move-all-active{cursor:move;touch-action:none}.canvas.move-all-active .device-node,.canvas.move-all-active .diagram-label{outline:2px dashed #14b8a6;outline-offset:2px}.canvas.move-all-active .node-head,.canvas.move-all-active .diagram-label{cursor:move}

.canvas.pan-map-active{cursor:grab;touch-action:none}.canvas.pan-map-active.tool-dragging{cursor:grabbing}.canvas.zoom-drag-active{cursor:ns-resize;touch-action:none}.canvas.pan-map-active .device-node,.canvas.pan-map-active .diagram-label,.canvas.zoom-drag-active .device-node,.canvas.zoom-drag-active .diagram-label{pointer-events:none}

.diagram-label{position:absolute;z-index:3;padding:4px 7px;border:1px solid transparent;border-radius:6px;font-weight:900;color:#0f172a;line-height:1.1;cursor:grab;user-select:none;white-space:nowrap;touch-action:none;text-shadow:0 1px 0 #fff}.diagram-label:hover{background:#ffffff99;border-color:#cbd5e1}.diagram-label.selected{background:#fff;border-color:var(--accent);box-shadow:0 0 0 3px #14b8a633}.diagram-label:active{cursor:grabbing}.label-heading{display:flex;align-items:center}.sector-count{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:7px;padding:0 5px;border-radius:999px;background:#0f766e;color:#fff;font-size:10px;vertical-align:middle;text-shadow:none}.sector-equipment-names{display:none;max-width:340px;margin-top:5px;padding:5px 7px;border-left:3px solid #0f766e;border-radius:0 5px 5px 0;background:#ffffffd9;color:#475569;font-size:10px;font-weight:700;line-height:1.35;white-space:normal;text-shadow:none}.diagram-label.selected .sector-equipment-names{display:block}

.device-node { position:absolute; width:170px; min-height:88px; background:#fff; border:1px solid #d7dfe6; border-radius:9px; box-shadow:0 5px 14px #26384b16; user-select:none; transition:box-shadow .15s,border-color .15s,opacity .15s,filter .15s; }.device-node:hover { box-shadow:0 8px 20px #26384b25; }.device-node.selected { border-color:var(--accent); box-shadow:0 0 0 3px #14b8a62b,0 8px 20px #26384b1c; }.device-node.connect-source { border-color:#f59e0b; box-shadow:0 0 0 4px #f59e0b33; }.device-node.sector-member{z-index:2;border-color:#0f766e;box-shadow:0 0 0 4px #14b8a640,0 10px 24px #0f766e24}.device-node.sector-dim{opacity:.28;filter:grayscale(.7)}

.node-head { height:34px; border-radius:8px 8px 0 0; display:flex; align-items:center; justify-content:space-between; padding:0 10px; background:#1f334c; color:#fff; font-size:9px; text-transform:uppercase; letter-spacing:.08em; cursor:grab; touch-action:none; }.node-head:active{cursor:grabbing}.drag-grip{font-size:15px;color:#9fb0c5;letter-spacing:-2px}.device-node[data-type="computer"] .node-head { background:#475569; }.device-node[data-type="cto"] .node-head,.device-node[data-type="olt"] .node-head,.device-node[data-type="onu"] .node-head { background:#9a5b0a; }

.node-type{display:flex;align-items:center;gap:6px;min-width:0}.node-logo{width:24px;height:24px;object-fit:contain;border-radius:4px;background:#fff;padding:2px}.logo-upload{display:flex;align-items:center;gap:10px;margin-top:6px;padding:8px;border:1px solid var(--border);border-radius:7px;background:#fafcfd}.logo-upload img{width:52px;height:52px;object-fit:contain;border-radius:6px;background:#fff;border:1px solid var(--border);padding:3px}.logo-upload>div{min-width:0;flex:1}.logo-upload input{font-size:9px!important;padding:4px!important}.logo-upload button{margin-top:5px;border:0;border-radius:5px;padding:5px 7px;background:#fff1f2;color:#e11d48;font-size:9px}.logo-upload small{display:block;margin-top:5px;color:#94a3b8;font-size:8px}

.equipment-photo-editor{display:grid;grid-template-columns:58px 1fr;gap:9px;align-items:center;margin:8px 0 10px;padding:9px;border:1px solid var(--border);border-radius:8px;background:#f8fafc}.photo-preview{display:grid;place-items:center;width:58px;height:58px;border:1px dashed #cbd5e1;border-radius:8px;background:#fff;color:#94a3b8;font-size:8px;text-align:center;overflow:hidden}.photo-preview img{width:100%;height:100%;object-fit:contain;padding:3px}.equipment-photo-editor strong,.equipment-photo-editor small{display:block}.equipment-photo-editor strong{font-size:10px;color:#334155}.equipment-photo-editor small{margin-top:2px;color:#64748b;font-size:8px;line-height:1.35}.photo-actions{display:flex;gap:6px;margin-top:7px}.photo-upload,.photo-actions button{border:0;border-radius:6px;padding:6px 8px;font-size:9px;font-weight:800;cursor:pointer}.photo-upload{background:#dbeafe;color:#1d4ed8}.photo-actions button{background:#fff1f2;color:#e11d48}

.device-node[data-type="camera"] .node-head,.device-node[data-type="nvr"] .node-head,.device-node[data-type="dvr"] .node-head{background:#7c3aed}.device-node[data-type="tv"] .node-head,.device-node[data-type="printer"] .node-head{background:#475569}.device-node[data-type="accesspoint"] .node-head{background:#0891b2}.device-node[data-type="server"] .node-head,.device-node[data-type="patchpanel"] .node-head{background:#0f766e}.device-node[data-type="mobile"] .node-head{background:#db2777}.device-node[data-type="generic"] .node-head{background:#64748b}

.node-body { padding:10px 11px 8px; }.node-name { font-size:13px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.node-meta { color:#8391a1; font-size:9px; margin-top:3px; min-height:12px; }.node-ports { display:flex; gap:3px; flex-wrap:wrap; margin-top:8px; }.node-port-group{display:flex;align-items:center;gap:2px;flex-wrap:wrap;width:100%}.node-port-group b{width:12px;color:#64748b;font-size:7px}.port-dot { display:inline-block;width:8px; height:8px; border-radius:2px; background:#cbd5df; }.port-dot.used { background:var(--blue); }.port-dot.fiber-used { background:#f59e0b; }.port-dot.usb-used{background:#dc2626}

.node-monitor{display:inline-flex;align-items:center;gap:4px;margin-top:5px;padding:3px 6px;border-radius:999px;font-size:8px;font-weight:900;text-transform:uppercase;letter-spacing:.03em}.node-monitor i{width:6px;height:6px;border-radius:50%;background:currentColor}.node-monitor-checking{background:#dbeafe;color:#2563eb}.node-monitor-checking i{animation:monitor-pulse 1s infinite}.node-monitor-online{background:#dcfce7;color:#15803d}.node-monitor-offline{background:#ffe4e6;color:#be123c}@keyframes monitor-pulse{50%{opacity:.25;transform:scale(.75)}}

.node-os{display:inline-block;margin:4px 3px 0 0;padding:2px 5px;border-radius:4px;background:#e0f2fe;color:#075985;font-size:8px;font-weight:800}.node-os.hypervisor{background:#f3e8ff;color:#6b21a8}.node-vms{margin-top:7px;padding:5px 6px;border-left:3px solid #7c3aed;border-radius:0 4px 4px 0;background:#f5f3ff;font-size:8px}.node-vms>strong,.node-vms span{display:block}.node-vms>strong{color:#6d28d9}.node-vms span{margin-top:3px;color:#64748b;white-space:normal;line-height:1.3}.node-vms span b{display:block;color:#4c1d95}.node-vms span em{display:block;margin-top:1px;color:#0369a1;font-style:normal}

.empty-inspector { text-align:center; padding:70px 10px; color:#718096; }.empty-icon { width:52px; height:52px; border-radius:50%; background:#edf2f5; display:grid; place-items:center; font-size:22px; margin:0 auto 14px; }.empty-inspector strong { font-size:13px; color:#435166; }.empty-inspector p { font-size:11px; line-height:1.5; }

.inspector-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid var(--border); }.inspector-title span,.inspector-title strong { display:block; }.inspector-title span { font-size:10px; color:#94a3b8; text-transform:uppercase; }.inspector-title strong { font-size:15px; margin-top:2px; }.inspector-title button { border:0; background:#fff1f2; color:#e11d48; border-radius:6px; font-size:20px; width:30px; height:30px; }

#editor label { display:block; color:#64748b; font-size:10px; font-weight:700; margin:11px 0; }#editor input,#editor textarea,#editor select { display:block; width:100%; margin-top:5px; border:1px solid var(--border); border-radius:6px; padding:8px 9px; color:#26364a; background:#fafcfd; outline:none; resize:vertical; }#editor input:focus,#editor textarea:focus,#editor select:focus { border-color:var(--accent); background:#fff; }

.port-count-title{margin-top:13px;color:#64748b;font-size:10px;font-weight:800}.port-count-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.port-count-grid label{margin:5px 0!important;text-align:center}.port-count-grid input{text-align:center;padding:8px 3px!important}

.monitor-card{margin:12px 0;padding:11px;border:1px solid #dbe3ea;border-radius:9px;background:#f8fafc;transition:border-color .2s,background .2s}.monitor-head,.monitor-head>div,.monitor-foot{display:flex;align-items:center}.monitor-head,.monitor-foot{justify-content:space-between;gap:8px}.monitor-head>div{min-width:0;gap:7px}.monitor-dot{flex:0 0 9px;width:9px;height:9px;border-radius:50%;background:#94a3b8;box-shadow:0 0 0 3px #94a3b822}.monitor-head strong{font-size:10px;color:#475569}.monitor-head button,.monitor-foot button{border:0;border-radius:6px;padding:7px 9px;background:#e2e8f0;color:#334155;font-size:9px;font-weight:800}.monitor-card.enabled{border-color:#bfdbfe;background:#f0f9ff}.monitor-card.enabled .monitor-dot{background:#3b82f6;box-shadow:0 0 0 3px #3b82f633}.monitor-card.online{border-color:#86efac;background:#f0fdf4}.monitor-card.online .monitor-dot{background:#22c55e;box-shadow:0 0 0 3px #22c55e33}.monitor-card.offline{border-color:#fca5a5;background:#fff1f2}.monitor-card.offline .monitor-dot{background:#ef4444;box-shadow:0 0 0 3px #ef444433}.monitor-card.enabled .monitor-head button{background:#fee2e2;color:#b91c1c}.ping-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}.ping-stats div{padding:7px;border:1px solid #e2e8f0;border-radius:6px;background:#fff;text-align:center}.ping-stats span,.ping-stats strong{display:block}.ping-stats span{color:#94a3b8;font-size:8px;text-transform:uppercase}.ping-stats strong{margin-top:3px;color:#334155;font-size:10px}.monitor-foot{margin-top:8px;color:#64748b;font-size:8px}.monitor-foot button{background:#dbeafe;color:#1d4ed8}

.monitor-settings{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}.monitor-settings label{margin:0!important;color:#64748b;font-size:9px}.monitor-settings input[type=number]{margin-top:3px!important;padding:6px!important;text-align:center}.monitor-settings .check-line{display:flex!important;align-items:center;gap:6px;padding:7px 8px;border:1px solid #e2e8f0;border-radius:7px;background:#fff;color:#334155;font-weight:800}.monitor-settings .check-line input{width:auto!important;margin:0!important}

#labelEditor label{display:block;color:#64748b;font-size:10px;font-weight:700;margin:11px 0}#labelEditor input,#labelEditor select{display:block;width:100%;margin-top:5px;border:1px solid var(--border);border-radius:6px;padding:8px 9px;background:#fafcfd}

.sector-equipment-title{margin-top:18px;padding-top:14px;border-top:1px solid var(--border);text-transform:uppercase;color:#64748b;font-size:10px;font-weight:800;letter-spacing:.07em}.sector-equipment-list{max-height:310px;overflow:auto;margin-top:7px;border:1px solid var(--border);border-radius:7px;background:#fafcfd}.sector-equipment-list .sector-equipment{display:flex;align-items:center;gap:9px;margin:0;padding:9px;border-bottom:1px solid #e8edf1;cursor:pointer}.sector-equipment-list .sector-equipment:last-child{border-bottom:0}.sector-equipment-list .sector-equipment:hover{background:#f0fdfa}.sector-equipment-list .sector-equipment input{width:15px;height:15px;margin:0;accent-color:#0f766e;flex:0 0 auto}.sector-equipment span{min-width:0}.sector-equipment strong,.sector-equipment small{display:block}.sector-equipment strong{color:#334155;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sector-equipment small{margin-top:2px;color:#94a3b8;font-size:8px;text-transform:uppercase}.sector-empty{margin:0;padding:13px;color:#94a3b8;font-size:10px;line-height:1.4}

.virtualization-editor{margin-top:16px}.vm-add-grid{display:grid;gap:6px;margin-top:9px;padding:9px;border:1px dashed #c4b5fd;border-radius:7px;background:#faf8ff}.vm-add-grid input,.vm-add-grid select{width:100%;border:1px solid var(--border);border-radius:6px;padding:8px;background:#fff;font-size:10px}.vm-add-grid button{border:0;border-radius:6px;padding:8px;background:#7c3aed;color:#fff;font-size:10px;font-weight:800}.virtual-machines-list{display:grid;gap:8px;margin-top:9px}.virtual-machine-row{display:grid;gap:6px;padding:9px;border:1px solid #ddd6fe;border-radius:7px;background:#faf8ff}.virtual-machine-row input,.virtual-machine-row select{width:100%;border:1px solid var(--border);border-radius:5px;padding:7px;background:#fff;font-size:9px}.vm-row-head{display:flex;align-items:center;justify-content:space-between;color:#6d28d9;font-size:9px;text-transform:uppercase}.vm-row-head button{border:0;border-radius:4px;background:#fff1f2;color:#e11d48}.vm-empty{margin:8px 0 0;color:#94a3b8;font-size:9px}.docker-editor{margin-top:3px;padding:8px;border:1px solid #bae6fd;border-radius:7px;background:#f0f9ff}.docker-title span,.docker-title strong{display:block}.docker-title span{color:#0284c7;font-size:8px;font-weight:900;text-transform:uppercase}.docker-title strong{margin-top:2px;color:#0c4a6e;font-size:10px}.docker-add-grid{display:grid;gap:5px;margin-top:7px}.docker-add-grid button{border:0;border-radius:5px;padding:7px;background:#0284c7;color:#fff;font-size:9px;font-weight:800}.docker-app-list{display:grid;gap:5px;margin-top:7px}.docker-app-row{display:grid;grid-template-columns:20px 1fr 1fr 22px;align-items:center;gap:4px}.docker-app-row .docker-mark{display:grid;place-items:center;width:20px;height:20px;border-radius:4px;background:#0284c7;color:#fff;font-size:8px;font-weight:900}.docker-app-row button{border:0;border-radius:4px;background:#fff1f2;color:#e11d48;height:22px}

.ports-title { margin-top:18px; padding-top:14px; border-top:1px solid var(--border); text-transform:uppercase; color:#64748b; font-size:10px; font-weight:800; letter-spacing:.07em; }.ports-list { display:grid;gap:7px;margin-top:10px }.port-row.connection-card{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr) 27px;align-items:start;gap:9px;padding:10px;border:1px solid #e2e8f0;border-left:3px solid #334155;border-radius:8px;background:#f8fafc;font-size:10px}.port-row.connection-card.connection-fiber{border-left-color:#2563eb}.port-row.connection-card.connection-usb{border-left-color:#dc2626}.port-row.connection-card.connection-wifi{border-left-color:#eab308}.port-badge { width:32px; min-height:25px;padding:3px;border-radius:5px; display:grid; place-items:center; background:#e2e8f0;color:#334155;font-size:9px;font-weight:900; }.connection-copy{min-width:0}.connection-sentence{color:#475569;line-height:1.5;overflow-wrap:anywhere}.connection-sentence strong{color:#17263a}.connection-sentence em{color:#0f766e;font-style:normal;font-weight:900}.connection-copy small{display:block;margin-top:4px;color:#94a3b8;font-size:8px;font-weight:800;text-transform:uppercase}.connection-actions{display:grid;gap:5px}.connection-actions button { border:0;border-radius:5px;width:27px;height:27px;font-size:13px}.connection-actions .edit-link{background:#dbeafe;color:#1d4ed8}.connection-actions .remove-link{background:#ffe4e6;color:#e11d48}.connections-empty{display:flex;flex-direction:column;gap:3px;padding:13px;border:1px dashed #cbd5e1;border-radius:8px;background:#f8fafc}.connections-empty strong{font-size:10px;color:#475569}.connections-empty span{font-size:9px;color:#94a3b8;line-height:1.4}

.toast { position:fixed; left:50%; bottom:22px; transform:translate(-50%,20px); background:#17263a; color:#fff; padding:10px 16px; border-radius:7px; font-size:12px; opacity:0; pointer-events:none; transition:.2s; z-index:20; }.toast.show { opacity:1; transform:translate(-50%,0); }

.connection-dialog{width:min(540px,calc(100vw - 30px));border:0;border-radius:12px;padding:0;box-shadow:0 24px 80px #0005}.connection-dialog::backdrop{background:#0f172a99}.connection-dialog form{padding:22px}.modal-title{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding-bottom:14px}.modal-title span,.modal-title strong{display:block}.modal-title span{font-size:10px;text-transform:uppercase;color:#94a3b8}.modal-title strong{font-size:15px;margin-top:3px}.modal-title button{border:0;background:#edf2f5;border-radius:6px;width:30px;height:30px;font-size:18px}.connection-endpoints{display:grid;grid-template-columns:1fr 35px 1fr;align-items:end;gap:8px;margin:20px 0}.connection-endpoints label span{display:block;font-size:11px;font-weight:800;margin-bottom:7px}.connection-endpoints select{width:100%;border:1px solid var(--border);border-radius:7px;padding:10px}.cable-arrow{text-align:center;padding-bottom:9px;color:var(--accent);font-weight:900}.connection-dialog p{font-size:11px;color:#718096}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.modal-actions button{border-radius:7px;padding:9px 14px}.ghost-modal{background:#fff;border:1px solid var(--border)}.modal-actions .primary{border:0;background:var(--accent);font-weight:800}

.dashboard{height:100vh;overflow:auto;background:#f1f5f9}.dashboard-head{height:72px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 28px}.dashboard-head>div{display:flex;align-items:center;gap:10px}.role-chip{padding:5px 9px;border-radius:20px;background:#14b8a622;color:#5eead4;font-size:10px;text-transform:uppercase}.dash-logout{border:1px solid #475569;background:transparent;color:#fff;border-radius:6px;padding:7px 10px}.dashboard-content{max-width:1100px;margin:auto;padding:34px 24px}.dashboard-title{display:flex;align-items:center;justify-content:space-between}.dashboard-title h1,.dashboard-title h2{margin:0}.dashboard-title p{color:#64748b;font-size:12px}.dashboard-title .primary,.user-form .primary{border:0;border-radius:7px;padding:10px 14px;background:var(--accent);font-weight:800}.dashboard-title.small{margin-top:35px}.dashboard-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:22px 0}.dashboard-stats div{background:#fff;border:1px solid var(--border);border-radius:10px;padding:18px}.dashboard-stats strong,.dashboard-stats span{display:block}.dashboard-stats strong{font-size:25px}.dashboard-stats span{font-size:11px;color:#718096}.project-search{width:100%;border:1px solid var(--border);border-radius:8px;padding:12px;margin-bottom:16px}.project-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}.project-card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:17px;cursor:pointer}.project-card:hover{border-color:var(--accent);box-shadow:0 5px 15px #0001}.project-card h3{margin:0 0 5px}.project-card .project-id{font-size:10px;color:#0f766e;font-weight:800}.project-card p{font-size:11px;color:#718096;min-height:16px}.card-counts{display:flex;gap:12px;padding-top:11px;border-top:1px solid #edf2f5;font-size:10px}.user-form{display:grid;grid-template-columns:1fr 1fr 140px auto;gap:8px}.user-form input,.user-form select{border:1px solid var(--border);border-radius:7px;padding:9px}.users-list{margin-top:10px;background:#fff;border-radius:8px}.user-row{display:grid;grid-template-columns:1fr 130px auto;align-items:center;gap:8px;padding:10px;border-bottom:1px solid #edf2f5;font-size:12px}.user-row select{padding:6px}.user-row button{border:0;background:#fff1f2;color:#e11d48;border-radius:5px;padding:6px}.readonly-banner{background:#fef3c7;color:#92400e;text-align:center;padding:6px;font-size:11px}

.dashboard-menu{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:28px;padding:8px;border:1px solid var(--border);border-radius:14px;background:#fff;box-shadow:0 8px 24px #0f172a0d}.dashboard-menu button{--menu-color:#0f766e;position:relative;display:flex;align-items:center;gap:11px;min-width:0;overflow:hidden;border:1px solid transparent;border-radius:10px;padding:11px 13px;background:#f8fafc;color:#475569;text-align:left;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease,color .2s ease}.dashboard-menu button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--menu-color);transform:scaleX(0);transform-origin:center;transition:transform .2s ease}.dashboard-menu button:hover{z-index:1;transform:translateY(-3px);border-color:color-mix(in srgb,var(--menu-color) 35%,white);background:color-mix(in srgb,var(--menu-color) 8%,white);color:#0f172a;box-shadow:0 10px 18px #0f172a1a}.dashboard-menu button:hover::after,.dashboard-menu button.active::after{transform:scaleX(1)}.dashboard-menu button:active{transform:translateY(-1px) scale(.98)}.dashboard-menu button.active{border-color:var(--menu-color);background:var(--menu-color);color:#fff;box-shadow:0 8px 17px color-mix(in srgb,var(--menu-color) 28%,transparent)}.dashboard-menu button>span:last-child{display:block;min-width:0}.dashboard-menu strong,.dashboard-menu small{display:block}.dashboard-menu strong{font-size:12px}.dashboard-menu small{margin-top:2px;color:#94a3b8;font-size:9px;font-weight:600}.dashboard-menu button.active small{color:#ffffffb8}.menu-icon{display:grid!important;place-items:center;flex:0 0 35px;width:35px;height:35px;border-radius:9px;background:color-mix(in srgb,var(--menu-color) 13%,white);color:var(--menu-color);font-size:18px;font-weight:900;transition:transform .22s ease,background .2s ease,color .2s ease}.dashboard-menu button:hover .menu-icon{transform:rotate(-5deg) scale(1.1)}.dashboard-menu button.active .menu-icon{background:#ffffff24;color:#fff}.dashboard-menu .menu-users{--menu-color:#2563eb}.dashboard-menu .menu-manufacturers{--menu-color:#7c3aed}.dashboard-menu .menu-backups{--menu-color:#d97706}.dashboard-menu .menu-sites{--menu-color:#0891b2}.users-panel .user-form,.manufacturers-panel .manufacturer-form{margin-top:20px}

.user-row{grid-template-columns:minmax(100px,1fr) 120px minmax(170px,1.2fr) auto auto}.user-row select,.user-row input{min-width:0;padding:7px;border:1px solid var(--border);border-radius:5px}.password-reset{display:flex}.password-reset input{width:100%;border-radius:5px 0 0 5px}.password-reset button{background:#e2e8f0;color:#334155;border-radius:0 5px 5px 0}.user-row .reset-password{background:#ecfeff;color:#0f766e;white-space:nowrap}.dashboard-actions,.dashboard-actions>div{display:flex;gap:8px}.dashboard-actions button{border:0;border-radius:7px;padding:10px 13px;font-weight:700}.backup-btn{background:#e0f2fe;color:#075985}.restore-btn{background:#fef3c7;color:#92400e}

.user-card{border-bottom:1px solid #e2e8f0}.user-card:last-child{border-bottom:0}.user-card .user-row{grid-template-columns:minmax(125px,1fr) 115px minmax(170px,1.1fr) auto auto auto}.user-identity strong,.user-identity small{display:block}.user-identity small{margin-top:3px;color:#94a3b8;font-size:9px}.user-row .permissions-button{background:#ede9fe;color:#6d28d9;white-space:nowrap}.user-row .permissions-button.active{background:#6d28d9;color:#fff}.user-permissions{padding:15px 18px 18px;background:#f8fafc;border-top:1px solid #e2e8f0}.user-permissions>div:first-child strong,.user-permissions>div:first-child span{display:block}.user-permissions>div:first-child span{margin-top:3px;color:#64748b;font-size:10px}.permission-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:13px}.permission-grid label{display:flex;align-items:center;gap:8px;padding:9px;border:1px solid #e2e8f0;border-radius:7px;background:#fff;color:#475569;font-size:10px;cursor:pointer}.permission-grid input{width:15px;height:15px;accent-color:#7c3aed}.save-permissions{margin-top:13px;border:0;border-radius:7px;padding:9px 13px;background:#7c3aed;color:#fff;font-size:10px;font-weight:800}.save-permissions:disabled{opacity:.45}

.manufacturer-form{display:grid;grid-template-columns:1fr 1fr auto;gap:8px}.manufacturer-form input{min-width:0;border:1px solid var(--border);border-radius:7px;padding:9px}.manufacturer-form .primary{border:0;border-radius:7px;background:var(--accent);font-weight:800;padding:9px 13px}.manufacturers-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px;margin-top:12px}.manufacturer-row{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:9px;background:#fff;border:1px solid var(--border);border-radius:8px;padding:9px}.manufacturer-row img{width:42px;height:42px;object-fit:contain;border-radius:5px}.manufacturer-actions{display:flex;gap:5px;align-items:center}.manufacturer-actions label,.manufacturer-actions button{border:0;border-radius:5px;padding:6px 8px;font-size:9px;cursor:pointer}.manufacturer-actions label{background:#dbeafe;color:#1d4ed8}.manufacturer-actions button{background:#fff1f2;color:#e11d48}

.backups-list{display:grid;gap:10px;margin-top:22px}.backup-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:13px;padding:14px;background:#fff;border:1px solid var(--border);border-radius:10px}.backup-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:9px;background:#e0f2fe;color:#0369a1;font-size:11px;font-weight:900}.backup-info{min-width:0}.backup-info strong,.backup-info span{display:block}.backup-info strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#1e293b;font-size:12px}.backup-info span{margin-top:5px;color:#64748b;font-size:10px}.backup-row-actions{display:flex;gap:6px}.backup-row-actions button{border:0;border-radius:6px;padding:7px 9px;font-size:10px;font-weight:800;cursor:pointer}.backup-download{background:#dbeafe;color:#1d4ed8}.backup-restore{background:#fef3c7;color:#92400e}.backup-delete{background:#ffe4e6;color:#be123c}.backup-empty{display:flex;flex-direction:column;gap:5px;padding:34px;border:1px dashed #cbd5e1;border-radius:10px;background:#ffffff99;color:#64748b;text-align:center;font-size:12px}.backup-empty strong{color:#334155}.backup-error{color:#be123c}

.site-form{display:grid;grid-template-columns:1fr 1.25fr .8fr 130px 90px auto;gap:8px;margin-top:20px}.site-form input,.site-form select{width:100%;min-width:0;border:1px solid var(--border);border-radius:7px;padding:10px;background:#fff}.site-form label{position:relative}.site-form label span{position:absolute;top:-7px;left:8px;padding:0 4px;background:#f1f5f9;color:#64748b;font-size:8px}.site-form .primary{border:0;border-radius:7px;padding:10px 13px;background:var(--accent);font-weight:800}.site-import-btn{background:#e0f2fe!important;color:#075985!important}.site-import-hint{margin:8px 0 0;color:#64748b;font-size:9px}.site-category{display:inline-block!important;margin-bottom:4px;padding:3px 6px;border-radius:999px;background:#ede9fe;color:#6d28d9;font-size:8px;font-weight:900;text-transform:uppercase}.sites-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}.sites-summary div{padding:14px;border:1px solid var(--border);border-radius:9px;background:#fff}.sites-summary strong,.sites-summary span{display:block}.sites-summary strong{font-size:21px}.sites-summary span{color:#64748b;font-size:9px}.sites-list{display:grid;gap:10px}.site-card{padding:15px;border:1px solid var(--border);border-left:4px solid #94a3b8;border-radius:10px;background:#fff}.site-card.site-online{border-left-color:#22c55e}.site-card.site-offline{border-left-color:#ef4444}.site-card.site-waiting{border-left-color:#3b82f6}.site-main{display:grid;grid-template-columns:12px minmax(0,1fr) auto;align-items:center;gap:10px}.site-status-dot{width:10px;height:10px;border-radius:50%;background:#94a3b8;box-shadow:0 0 0 4px #94a3b822}.site-online .site-status-dot{background:#22c55e;box-shadow:0 0 0 4px #22c55e22}.site-offline .site-status-dot{background:#ef4444;box-shadow:0 0 0 4px #ef444422}.site-waiting .site-status-dot{background:#3b82f6;box-shadow:0 0 0 4px #3b82f622}.site-main strong,.site-main a,.site-main small{display:block}.site-main strong{font-size:13px}.site-main a{margin-top:3px;color:#0284c7;font-size:10px;text-decoration:none;overflow:hidden;text-overflow:ellipsis}.site-main small{margin-top:4px;color:#94a3b8;font-size:9px}.site-status-label{padding:5px 8px;border-radius:999px;background:#e2e8f0;color:#475569;font-size:9px;font-weight:900}.site-online .site-status-label{background:#dcfce7;color:#15803d}.site-offline .site-status-label{background:#ffe4e6;color:#be123c}.site-waiting .site-status-label{background:#dbeafe;color:#1d4ed8}.site-metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:13px}.site-metrics div{padding:8px;border-radius:7px;background:#f8fafc}.site-metrics span,.site-metrics strong{display:block}.site-metrics span{color:#94a3b8;font-size:8px}.site-metrics strong{margin-top:3px;color:#334155;font-size:11px}.site-actions{display:flex;justify-content:flex-end;gap:6px;margin-top:11px}.site-actions button{border:0;border-radius:6px;padding:7px 9px;background:#e0f2fe;color:#075985;font-size:9px;font-weight:800}.site-actions .site-toggle{background:#fef3c7;color:#92400e}.site-actions .site-delete{background:#ffe4e6;color:#be123c}.site-actions button:disabled{opacity:.45}.site-history{margin-top:22px;padding:18px;border:1px solid #bae6fd;border-radius:12px;background:#fff;box-shadow:0 12px 30px #0f172a10}.site-history-head,.site-history-head>div:last-child{display:flex;align-items:center;justify-content:space-between;gap:8px}.site-history-head span,.site-history-head strong{display:block}.site-history-head span{color:#0284c7;font-size:9px;font-weight:900;text-transform:uppercase}.site-history-head strong{margin-top:3px;font-size:17px}.site-history-head select,.site-history-head button{border:1px solid var(--border);border-radius:6px;padding:8px;background:#fff}.history-stats{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin:15px 0}.history-stats div{padding:9px;border-radius:7px;background:#f8fafc}.history-stats span,.history-stats strong{display:block}.history-stats span{color:#94a3b8;font-size:8px}.history-stats strong{margin-top:3px;font-size:12px}.site-chart-wrap{height:280px;border:1px solid #e2e8f0;border-radius:9px;background:#f8fafc;overflow:hidden}.site-chart-wrap svg{width:100%;height:100%}.chart-grid{stroke:#e2e8f0;stroke-width:1}.chart-tick{stroke:#cbd5e1;stroke-width:1}.chart-line{fill:none;stroke:#0f766e;stroke-width:3;stroke-linejoin:round}.chart-online{fill:#14b8a6}.chart-offline{stroke:#ef4444;stroke-width:2;stroke-dasharray:4 4;opacity:.65}.chart-offline-point{fill:#ef4444}.chart-label{fill:#64748b;font-size:11px;font-weight:700}.chart-legend{display:flex;gap:15px;margin-top:9px;color:#64748b;font-size:9px}.chart-legend span{display:flex;align-items:center;gap:5px}.chart-legend i{width:8px;height:8px;border-radius:50%}.chart-legend i.online{background:#14b8a6}.chart-legend i.offline{background:#ef4444}

.site-top-actions{flex-wrap:wrap;justify-content:flex-end}.site-top-actions button{padding:8px 10px;font-size:9px}.site-top-actions select{max-width:145px;border:1px solid var(--border);border-radius:7px;padding:7px;background:#fff;color:#475569;font-size:9px}.site-export-btn{background:#dcfce7!important;color:#15803d!important}.site-export-category{background:#ede9fe!important;color:#6d28d9!important}.site-enable-all{background:#ccfbf1!important;color:#0f766e!important}.site-pause-all{background:#fef3c7!important;color:#92400e!important}.site-delete-all{background:#ffe4e6!important;color:#be123c!important}.site-search{width:100%;margin:12px 0 14px;border:1px solid var(--border);border-radius:8px;padding:11px;background:#fff}.site-category-group{margin-bottom:18px}.site-category-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;padding:0 3px}.site-category-heading strong{color:#334155;font-size:13px}.site-category-heading span{padding:3px 7px;border-radius:999px;background:#e2e8f0;color:#64748b;font-size:8px;font-weight:800}.site-category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.site-card.compact{min-width:0;padding:9px 10px}.site-card.compact .site-main{grid-template-columns:9px minmax(0,1fr) auto;gap:7px}.site-card.compact .site-status-dot{width:8px;height:8px}.site-card.compact .site-main strong{font-size:11px}.site-card.compact .site-main a{font-size:8px;white-space:nowrap}.site-card.compact .site-main small{font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.site-card.compact .site-status-label{padding:4px 6px;font-size:7px}.site-card.compact .site-metrics{gap:3px;margin-top:7px}.site-card.compact .site-metrics div{padding:5px}.site-card.compact .site-metrics span{font-size:6px}.site-card.compact .site-metrics strong{font-size:8px}.site-card.compact .site-actions{gap:4px;margin-top:7px}.site-card.compact .site-actions button{padding:5px 6px;font-size:7px}

.site-form{grid-template-columns:.9fr 1.15fr .8fr .75fr 120px 88px auto}.site-target{display:block;margin-top:3px;color:#7c3aed;font-size:8px;font-weight:800}.site-card.compact .site-metrics span{font-size:8px;font-weight:700}.site-card.compact .site-metrics strong{font-size:11px}.category-overview{margin:0 0 20px;padding:15px;border:1px solid #cbd5e1;border-radius:11px;background:#fff}.category-overview-head,.category-overview-head>div:last-child{display:flex;align-items:center;justify-content:space-between;gap:8px}.category-overview-head span,.category-overview-head strong{display:block}.category-overview-head span{color:#0891b2;font-size:9px;font-weight:900;text-transform:uppercase}.category-overview-head strong{margin-top:3px;font-size:15px}.category-overview-head select{border:1px solid var(--border);border-radius:7px;padding:8px;background:#fff;color:#334155}.category-overview-empty{padding:35px 10px;color:#94a3b8;text-align:center;font-size:11px}.overview-chart-wrap{height:360px;margin-top:13px;border:1px solid #e2e8f0;border-radius:9px;background:#f8fafc;overflow:hidden}.overview-chart-wrap svg{width:100%;height:100%}.overview-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:11px}.overview-legend>div{display:flex;align-items:center;gap:7px;min-width:0;padding:7px;border-radius:7px;background:#f8fafc}.overview-legend i{flex:0 0 9px;width:9px;height:9px;border-radius:50%}.overview-legend span,.overview-legend strong,.overview-legend small{display:block;min-width:0}.overview-legend strong{font-size:9px}.overview-legend small{margin-top:2px;color:#64748b;font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.site-actions .site-interval{background:#ede9fe;color:#6d28d9}.site-interval-dialog{width:min(430px,calc(100vw - 30px));border:0;border-radius:12px;padding:0;box-shadow:0 24px 80px #0005}.site-interval-dialog::backdrop{background:#0f172a99}.site-interval-dialog form{padding:20px}.site-interval-dialog p{color:#64748b;font-size:11px}.site-interval-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}.site-interval-fields input,.site-interval-fields select{width:100%;border:1px solid var(--border);border-radius:7px;padding:10px;background:#fff}

@media(max-width:1400px) and (min-width:1001px){.app-shell{grid-template-columns:210px minmax(460px,1fr) 330px}}

@media(max-width:1000px){.app-shell{grid-template-columns:190px 1fr}.inspector{position:fixed;right:0;top:72px;bottom:0;width:min(360px,92vw);z-index:4;box-shadow:-4px 0 16px #0002;transform:translateX(100%)}.inspector.open{transform:none}.brand{min-width:auto}.brand span{display:none}.dashboard-menu{grid-template-columns:repeat(2,1fr)}.dashboard-title{align-items:flex-start;gap:12px}.dashboard-actions{flex-wrap:wrap}.user-form,.manufacturer-form{grid-template-columns:1fr}.user-row,.user-card .user-row{grid-template-columns:1fr 110px}.password-reset{grid-column:1/-1}.permission-grid{grid-template-columns:repeat(2,1fr)}.backup-row{grid-template-columns:40px minmax(0,1fr)}.backup-row-actions{grid-column:1/-1;justify-content:flex-end}}

@media(max-width:540px){.dashboard-content{padding:22px 14px}.dashboard-menu{grid-template-columns:1fr}.dashboard-menu button{padding:9px 11px}.permission-grid{grid-template-columns:1fr}}

@media(max-width:900px){.site-form{grid-template-columns:1fr 1fr}.site-form .primary{grid-column:1/-1}.site-category-grid{grid-template-columns:1fr}.site-metrics{grid-template-columns:repeat(3,1fr)}.history-stats{grid-template-columns:repeat(3,1fr)}}

@media(max-width:540px){.site-form,.sites-summary{grid-template-columns:1fr}.site-metrics{grid-template-columns:repeat(2,1fr)}.site-actions{flex-wrap:wrap}.site-history-head{align-items:flex-start;flex-direction:column}.site-chart-wrap{height:220px}}

.monitored-equipment{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px;padding-top:10px;border-top:1px solid #edf2f5}.monitored-equipment strong{flex-basis:100%;font-size:9px;color:#0f766e;text-transform:uppercase;letter-spacing:.04em}.monitored-equipment span{max-width:100%;padding:4px 7px;border-radius:999px;background:#dcfce7;color:#166534;font-size:9px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.monitored-equipment.empty{display:block;color:#94a3b8;font-size:10px}

.monitor-buttons{display:flex;gap:6px;align-items:center}.equipment-ping-history{margin:10px 0 14px;padding:11px;border:1px solid #bae6fd;border-radius:10px;background:#fff}.ping-history-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.ping-history-head span,.ping-history-head strong{display:block}.ping-history-head span{color:#0284c7;font-size:8px;font-weight:900;text-transform:uppercase}.ping-history-head strong{font-size:13px;color:#0f172a}.ping-history-head button{border:1px solid var(--border);border-radius:6px;background:#fff;padding:6px 8px;font-size:9px}.history-stats.compact{grid-template-columns:repeat(3,1fr);gap:5px;margin:9px 0}.history-stats.compact div{padding:6px}.history-stats.compact span{font-size:7px}.history-stats.compact strong{font-size:10px}.equipment-chart-wrap{height:230px;border:1px solid #e2e8f0;border-radius:8px;background:#f8fafc;overflow:hidden}.equipment-chart-wrap svg{width:100%;height:100%}

.whatsapp-float{position:fixed;right:22px;bottom:22px;z-index:30;display:flex;align-items:center;gap:8px;padding:12px 15px;border-radius:999px;background:#22c55e;color:#fff;text-decoration:none;font-weight:900;font-size:13px;box-shadow:0 12px 28px #16a34a55;transition:transform .18s ease,box-shadow .18s ease}.whatsapp-float:hover{transform:translateY(-3px);box-shadow:0 18px 35px #16a34a66}.whatsapp-float span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#ffffff26}

.dashboard-copyright{margin:36px 0 10px;padding-top:16px;border-top:1px solid #dbe3ea;color:#64748b;text-align:center;font-size:11px;font-weight:700}

@media(max-width:540px){.whatsapp-float{right:12px;bottom:12px;padding:10px 12px;font-size:12px}.history-stats.compact{grid-template-columns:repeat(2,1fr)}}

@media(max-width:760px){.dashboard-copyright{font-size:10px}}



/* Catálogo e equipamentos representados por fotos. */

.dashboard-menu{grid-template-columns:repeat(auto-fit,minmax(145px,1fr))}.dashboard-menu .menu-products{--menu-color:#0f766e}

.product-form{display:flex;flex-wrap:wrap;gap:14px;align-items:end;margin:24px 0}.product-form label{display:grid;gap:7px;flex:1;min-width:180px;font-size:12px;color:#475569}.product-form input,.product-form select{padding:11px;border:1px solid #d7dfe6;border-radius:8px;background:white;width:100%}.product-form button,.product-card button{padding:10px 14px;border:1px solid #d7dfe6;border-radius:8px;cursor:pointer}.products-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}.product-card{display:flex;flex-direction:column;gap:12px;background:white;padding:20px;border:1px solid #d7dfe6;border-radius:14px}.product-card>img{width:100%;height:150px;object-fit:contain}.product-card small{color:#64748b}.product-card>div{display:flex;gap:8px}.product-card [data-delete-product]{color:#dc2626}

.device-node.photo-node{background:transparent;border-color:transparent;box-shadow:none}.photo-node>.node-head:not(.node-photo){display:none}.device-node.photo-node .node-photo{display:flex;justify-content:center;width:100%;height:112px;padding:4px;background:transparent;border-radius:10px}.node-photo img{width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 4px 3px #0f172a22)}.photo-node .node-body{text-align:center;padding:5px 8px;background:#ffffffd9;border-radius:8px}.photo-node .node-name{white-space:normal}.photo-node .node-ports{display:none}.photo-node.selected .node-ports,.photo-node.connect-source .node-ports{display:block}.device-node.photo-node.selected{border-color:var(--accent);box-shadow:0 0 0 3px #14b8a62b}.device-node.photo-node.connect-source{border-color:#f59e0b;box-shadow:0 0 0 4px #f59e0b33}