: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) 280px; height:calc(100vh - 72px); }
.sidebar,.inspector { background:#fff; overflow:auto; padding:22px 18px; border-right:1px solid var(--border); }.inspector { border-right:0; border-left:1px solid var(--border); }
.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; }
.segmented { display:flex; padding:3px; background:#edf1f4; border-radius:8px; }.segmented button { flex:1; border:0; border-radius:6px; padding:8px 2px; font-size:10px; background:transparent; color:#64748b; }.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)}
.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; }
.workspace-wrap { min-width:0; display:flex; flex-direction:column; }.workspace-toolbar { 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 span { min-width:43px; text-align:center; font-size:11px!important; margin:0!important; }
.workspace { flex:1; overflow:auto; position:relative; background-color:#edf1f4; background-image:radial-gradient(#cbd4dc 1px,transparent 1px); background-size:20px 20px; }.canvas { position:relative; width:1400px; height:900px; 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.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; }
.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; }.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; }
.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}
.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="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; }.port-dot { width:8px; height:8px; border-radius:2px; background:#cbd5df; }.port-dot.used { background:var(--blue); }.port-dot.fiber-used { background:#f59e0b; }
.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; }
.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 { margin-top:8px; }.port-row { display:flex; align-items:center; gap:7px; border-bottom:1px solid #edf1f4; padding:7px 0; font-size:10px; }.port-badge { width:24px; height:20px; border-radius:4px; display:grid; place-items:center; background:#edf2f5; font-weight:800; }.port-row span:nth-child(2) { flex:1; color:#718096; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.port-row button { border:0; background:#fff1f2; color:#e11d48; border-radius:4px; font-size:11px; }
.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}
.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}
@media(max-width:1000px){.app-shell{grid-template-columns:190px 1fr}.inspector{position:fixed;right:0;top:72px;bottom:0;width:280px;z-index:4;box-shadow:-4px 0 16px #0002;transform:translateX(100%)}.inspector.open{transform:none}.brand{min-width:auto}.brand span{display:none}.user-row{grid-template-columns:1fr 110px}.password-reset{grid-column:1/-1}}