:root{
  --bg:#f4f7fb;--panel:#fff;--panel-2:#f8fafc;--text:#0f172a;--muted:#64748b;--border:#dbe4ef;
  --accent:#16a34a;--accent-2:#15803d;--orange:#f59e0b;--red:#dc2626;--purple:#7c3aed;--blue:#2563eb;
  --shadow:0 8px 30px rgba(15,23,42,.08);--grid:#e9eef5;--canvas:#fff;--header:70px;
}
[data-theme="dark"]{
  --bg:#0b1220;--panel:#111827;--panel-2:#172033;--text:#e5edf7;--muted:#93a4b8;--border:#26344a;
  --accent:#22c55e;--accent-2:#16a34a;--orange:#fbbf24;--red:#f87171;--purple:#a78bfa;--blue:#60a5fa;
  --shadow:0 8px 30px rgba(0,0,0,.25);--grid:#1e2b3d;--canvas:#0e1726;
}
*{box-sizing:border-box}html,body{height:100%;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--text);background:var(--bg)}
button,input,select{font:inherit}.app{height:100%;display:flex;flex-direction:column;min-width:320px}.topbar{height:var(--header);display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--border);gap:14px;z-index:20}.brand{display:flex;align-items:center;gap:11px;min-width:280px}.logo{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#dcfce7;color:#166534;font-weight:900;border:1px solid #bbf7d0}.brand h1{font-size:17px;line-height:1.1;margin:0}.brand p{font-size:11px;margin:4px 0 0;color:var(--muted)}.header-center{display:flex;align-items:center;gap:8px;min-width:0}.pill{border:1px solid var(--border);border-radius:10px;padding:8px 11px;background:var(--panel-2);font-size:12px;white-space:nowrap}.pill b{color:var(--red)}.header-actions{display:flex;gap:8px;align-items:center}.btn{appearance:none;-webkit-appearance:none;border:1px solid var(--border);background-color:var(--panel)!important;color:var(--text)!important;padding:8px 12px;border-radius:9px;font-weight:700;cursor:pointer;transition:.15s}.btn:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(15,23,42,.08)}.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}.btn-primary{background-color:var(--accent)!important;color:#fff!important;border-color:var(--accent)}.btn-primary:hover{background-color:var(--accent-2)!important}.btn-danger{color:var(--red)!important}.btn-soft{background-color:var(--panel-2)!important}.icon-btn{width:38px;height:38px;padding:0;display:grid;place-items:center}
.workspace{flex:1;display:grid;grid-template-columns:300px minmax(0,1fr) 330px;min-height:0}.sidebar,.inspector{background:var(--panel);overflow:auto;padding:10px;border-right:1px solid var(--border)}.inspector{border-right:0;border-left:1px solid var(--border)}.card{border:1px solid var(--border);border-radius:12px;background:var(--panel);padding:12px;margin-bottom:10px}.card h3{font-size:12px;color:#15803d;margin:0 0 10px;font-weight:900;letter-spacing:.01em}.field{margin-bottom:10px}.field:last-child{margin-bottom:0}.field label{display:block;font-size:11px;font-weight:800;color:var(--muted);margin-bottom:5px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.input,.select{width:100%;height:35px;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:8px;padding:6px 9px;outline:none}.input:focus,.select:focus{border-color:#86efac;box-shadow:0 0 0 3px rgba(34,197,94,.1)}.hint{font-size:10px;color:var(--muted);line-height:1.4}.notice{font-size:10px;line-height:1.4;padding:8px;border-radius:8px;background:#fff7ed;color:#9a3412;border:1px solid #fed7aa}.summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.metric{background:var(--panel-2);border:1px solid var(--border);border-radius:9px;padding:9px}.metric strong{display:block;font-size:16px}.metric span{font-size:9px;color:var(--muted)}.status-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:999px;font-size:10px;font-weight:900}.status-optimal{background:#dcfce7;color:#166534}.status-warning{background:#fef3c7;color:#92400e}.status-critical{background:#fee2e2;color:#991b1b}.status-overload{background:#ede9fe;color:#5b21b6}.status-disconnected{background:#e2e8f0;color:#334155}
.library{display:grid;grid-template-columns:1fr 1fr;gap:6px}.library .btn{font-size:11px;padding:8px 5px}.canvas-wrap{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--canvas)}.toolbar{height:51px;background:var(--panel);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px;padding:7px 10px;overflow-x:auto;z-index:4}.toolbar .btn{padding:7px 10px;font-size:12px;white-space:nowrap}.toolbar-divider{height:26px;border-left:1px solid var(--border);margin:0 2px}.search{height:34px;width:165px;border:1px solid var(--border);border-radius:8px;background:var(--panel);color:var(--text);padding:5px 9px}.mode-select{height:34px;border:1px solid var(--border);border-radius:8px;background:var(--panel);color:var(--text);padding:5px 8px;font-size:12px;font-weight:700}.canvas-stage{position:relative;flex:1;min-height:0;overflow:hidden}.canvas-stage svg{width:100%;height:100%;display:block;touch-action:none;user-select:none;background:var(--canvas)}.canvas-help{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);background:rgba(15,23,42,.88);color:#fff;border-radius:7px;padding:6px 10px;font-size:10px;pointer-events:none}.zoom-indicator{position:absolute;right:12px;top:10px;color:var(--muted);font-size:10px}.empty-cta{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);z-index:3}.empty-cta button{border:0;border-radius:9px;background:var(--accent);color:#fff;font-weight:900;padding:10px 16px;box-shadow:var(--shadow);cursor:pointer}
.node rect.node-body{fill:var(--panel);stroke:var(--border);stroke-width:1.5;filter:drop-shadow(0 4px 8px rgba(15,23,42,.09))}.node.selected rect.node-body{stroke:var(--blue);stroke-width:2.5}.node text{pointer-events:none;fill:var(--text)}.node .node-sub{fill:var(--muted);font-size:10px}.node .node-title{font-size:11px;font-weight:900}.node .node-value{font-size:14px;font-weight:900}.node .port{fill:var(--panel);stroke:var(--accent);stroke-width:2;cursor:pointer}.node .port.used{fill:var(--accent)}.node .port-plus{font-size:10px;font-weight:900;fill:var(--accent);pointer-events:none}.node .status-ring.optimal{stroke:#22c55e}.node .status-ring.warning{stroke:#f59e0b}.node .status-ring.critical,.node .status-ring.out_of_spec{stroke:#ef4444}.node .status-ring.overload{stroke:#8b5cf6}.edge{fill:none;stroke:#94a3b8;stroke-width:2.2}.edge.active{stroke:var(--accent)}.edge.warning{stroke:#f59e0b}.edge.critical{stroke:#ef4444}.edge.overload{stroke:#8b5cf6}.edge-label{font-size:9px;fill:var(--muted);paint-order:stroke;stroke:var(--canvas);stroke-width:4px;stroke-linejoin:round}.path-highlight{stroke-width:4!important;filter:drop-shadow(0 0 3px rgba(37,99,235,.35))}
.inspector h2{font-size:14px;margin:3px 0 12px}.tabs{display:flex;gap:5px;border-bottom:1px solid var(--border);padding-bottom:8px;margin-bottom:10px}.tab{border:0;background:transparent;color:var(--muted);font-weight:800;font-size:11px;padding:6px 8px;border-radius:7px;cursor:pointer}.tab.active{background:var(--panel-2);color:var(--text)}.kv{display:grid;grid-template-columns:1fr auto;gap:8px;padding:6px 0;border-bottom:1px dashed var(--border);font-size:11px}.kv:last-child{border-bottom:0}.kv span:first-child{color:var(--muted)}.path-list{font-size:10px}.path-step{padding:7px 8px;border-left:2px solid var(--border);margin-left:5px}.path-step b{display:block;font-size:10px}.path-step span{color:var(--muted)}.endpoint-table{width:100%;border-collapse:collapse;font-size:10px}.endpoint-table th,.endpoint-table td{padding:7px 6px;border-bottom:1px solid var(--border);text-align:left;white-space:nowrap}.endpoint-table th{color:var(--muted);font-size:9px;position:sticky;top:0;background:var(--panel)}.endpoint-row{cursor:pointer}.endpoint-row:hover{background:var(--panel-2)}
.modal-backdrop{position:fixed;inset:0;background:rgba(2,6,23,.48);z-index:100;display:none;align-items:center;justify-content:center;padding:18px}.modal-backdrop.open{display:flex}.modal{width:min(560px,100%);max-height:88vh;overflow:auto;background:var(--panel);border:1px solid var(--border);border-radius:14px;box-shadow:0 25px 80px rgba(0,0,0,.28)}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--border)}.modal-header h2{font-size:15px;margin:0}.modal-body{padding:16px}.modal-footer{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid var(--border)}.validation-list{display:grid;gap:7px}.validation-item{padding:9px;border-radius:8px;font-size:11px;background:var(--panel-2);border:1px solid var(--border)}.validation-item.error{border-color:#fecaca;background:#fef2f2;color:#991b1b}.validation-item.warn{border-color:#fde68a;background:#fffbeb;color:#92400e}.project-list{display:grid;gap:7px}.project-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border:1px solid var(--border);border-radius:9px}.project-item small{display:block;color:var(--muted)}
.toast{position:fixed;right:18px;bottom:18px;z-index:200;min-width:230px;max-width:380px;padding:11px 13px;border-radius:9px;background:#0f172a;color:#fff;box-shadow:var(--shadow);font-size:11px;transform:translateY(30px);opacity:0;pointer-events:none;transition:.2s}.toast.show{transform:translateY(0);opacity:1}.mobile-inspector-toggle{display:none}.print-report{display:none}
@media(max-width:1180px){.workspace{grid-template-columns:280px minmax(0,1fr)}.inspector{position:fixed;right:0;top:var(--header);bottom:0;width:330px;z-index:30;transform:translateX(101%);transition:.2s;box-shadow:var(--shadow)}.inspector.open{transform:translateX(0)}.mobile-inspector-toggle{display:inline-flex}.header-center{display:none}}
@media(max-width:760px){:root{--header:62px}.topbar{padding:8px 10px}.brand{min-width:0}.brand p{display:none}.brand h1{font-size:14px}.header-actions .btn:not(.icon-btn):not(.btn-primary){display:none}.workspace{display:block}.sidebar{position:fixed;left:0;top:var(--header);bottom:0;width:290px;z-index:35;transform:translateX(-101%);transition:.2s;box-shadow:var(--shadow)}.sidebar.open{transform:translateX(0)}.canvas-wrap{height:calc(100vh - var(--header))}.toolbar{height:auto;min-height:48px}.canvas-help{display:none}.mobile-sidebar-toggle{display:inline-grid!important}.search{width:120px}}
.mobile-sidebar-toggle{display:none}
@media print{body{background:#fff;color:#000}.app,.modal-backdrop,.toast{display:none!important}.print-report{display:block!important;font-family:Arial,sans-serif;color:#111}.print-report h1{font-size:20px}.print-report h2{font-size:14px;margin-top:18px}.print-report table{width:100%;border-collapse:collapse;font-size:9px}.print-report th,.print-report td{border:1px solid #bbb;padding:5px}.print-report .print-meta{display:grid;grid-template-columns:1fr 1fr;gap:5px;font-size:10px}.print-report svg{width:100%;height:420px;border:1px solid #ddd}}
[data-theme="dark"] .btn:not(.btn-primary){background-color:#111827!important;color:#e5edf7!important;border-color:#26344a!important}
[data-theme="dark"] .btn.btn-danger{color:#f87171!important}
[data-theme="light"] .btn:not(.btn-primary){background-color:#fff!important;color:#0f172a!important}

/* v1.1 mandatory optical-tree canvas language */
.node{cursor:grab}.node:active{cursor:grabbing}.node text{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;pointer-events:none}
.node-source .source-body{fill:var(--panel);stroke:#e59a21;stroke-width:1.5;filter:drop-shadow(0 3px 8px rgba(15,23,42,.06))}
.node-source.selected .source-body{stroke:var(--blue);stroke-width:2.5}
.source-title{font-size:11px;font-weight:900;fill:#15803d!important}.source-value{font-size:18px;font-weight:900;fill:var(--text)!important}
.node-splitter .splitter-body{fill:var(--panel);stroke:#e59a21;stroke-width:2;filter:drop-shadow(0 2px 5px rgba(15,23,42,.05))}
.node-splitter.selected .splitter-body{stroke:var(--blue);stroke-width:3}
.splitter-loss{font-size:10px;font-weight:900;fill:#15803d!important;paint-order:stroke;stroke:var(--canvas);stroke-width:3px;stroke-linejoin:round}
.splitter-ratio{font-size:17px;font-weight:900;fill:var(--text)!important}.splitter-output{font-size:10px;font-weight:900;fill:#2563eb!important;paint-order:stroke;stroke:var(--canvas);stroke-width:3px;stroke-linejoin:round}
.node-compact .compact-body{fill:var(--panel);stroke:var(--border);stroke-width:1.35;filter:drop-shadow(0 2px 5px rgba(15,23,42,.05))}.node-compact.selected .compact-body{stroke:var(--blue);stroke-width:2.4}
.compact-title{font-size:10px;font-weight:900;fill:var(--text)!important}.compact-value{font-size:10px;font-weight:800;fill:var(--muted)!important}.node-onu .compact-value{font-size:11px;font-weight:900}
.node-onu .compact-body.status-optimal{stroke:#16a34a}.node-onu .compact-body.status-warning{stroke:#f59e0b}.node-onu .compact-body.status-critical,.node-onu .compact-body.status-out_of_spec{stroke:#ef4444}.node-onu .compact-body.status-overload{stroke:#8b5cf6}
.edge.edge-optical{fill:none;stroke:#e28d00;stroke-width:1.45;vector-effect:non-scaling-stroke}.edge.edge-virtual{stroke:#e28d00;stroke-width:1.35}.edge.active{stroke:#16a34a}.edge.warning{stroke:#f59e0b}.edge.critical{stroke:#ef4444}.edge.overload{stroke:#8b5cf6}.path-highlight{stroke-width:3.2!important;filter:drop-shadow(0 0 3px rgba(37,99,235,.35))}
.edge-distance,.edge-power{font-size:9px;font-weight:800;paint-order:stroke;stroke:var(--canvas);stroke-width:4px;stroke-linejoin:round;pointer-events:none}.edge-distance{fill:#dc2626}.edge-power{fill:#15803d}
.empty-port-marker{cursor:pointer}.empty-port-marker circle{fill:var(--panel);stroke:#16a34a;stroke-width:1.4;filter:drop-shadow(0 1px 2px rgba(15,23,42,.05));transition:.14s}.empty-port-marker text{fill:#15803d;font-size:18px;font-weight:500;pointer-events:none}.empty-port-marker:hover circle{fill:#dcfce7;stroke-width:2;transform:scale(1.08);transform-box:fill-box;transform-origin:center}.empty-port-marker:hover text{font-weight:800}
.port-add-menu{position:fixed;z-index:260;width:220px;padding:8px;background:var(--panel);border:1px solid var(--border);border-radius:12px;box-shadow:0 16px 45px rgba(15,23,42,.18);display:none}.port-add-menu.open{display:block}.port-add-menu .port-add-title{font-size:11px;font-weight:900;color:var(--text);padding:4px 6px 8px}.port-add-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}.port-add-menu button{border:1px solid var(--border);border-radius:8px;background:var(--panel-2);color:var(--text);font-size:10px;font-weight:800;padding:7px 6px;cursor:pointer}.port-add-menu button:hover{border-color:#86efac;background:#f0fdf4;color:#166534}
[data-theme="dark"] .port-add-menu button:hover{background:#163522;color:#bbf7d0}
.node-source.selected .source-body{stroke:#e59a21;stroke-width:1.8;filter:drop-shadow(0 0 4px rgba(37,99,235,.42))}
.node-splitter.selected .splitter-body{stroke:#e59a21;stroke-width:2.2;filter:drop-shadow(0 0 4px rgba(37,99,235,.42))}
.node.node-source rect.source-body{fill:var(--panel);stroke:#e59a21;stroke-width:1.6;filter:drop-shadow(0 3px 8px rgba(15,23,42,.06))}
.node.node-source.selected rect.source-body{stroke:#e59a21;stroke-width:1.9;filter:drop-shadow(0 0 4px rgba(37,99,235,.42))}