*{box-sizing:border-box;margin:0;padding:0}
:root{--bg0:#0b1220;--bg1:#0f172a;--bg2:#1e293b;--bg3:#334155;--line:#334155;
--text:#e2e8f0;--dim:#94a3b8;--mute:#64748b;--accent:#38bdf8;--purple:#a78bfa;
--ok:#4ade80;--warn:#f59e0b;--err:#f87171;--danger:#dc2626;--radius:8px;--r-sm:6px}
html,body{height:100%}
body{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg1);
color:var(--text);height:100vh;display:flex;flex-direction:column;overflow:hidden;font-size:13px}

header{display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:10px 20px;background:var(--bg2);border-bottom:1px solid var(--line);flex-wrap:wrap}
header h1{margin:0;font-size:18px;color:var(--accent)}
.object-select{display:flex;align-items:center;gap:16px;font-size:13px;color:var(--dim);flex-wrap:wrap}
.object-select label{display:flex;align-items:center;gap:6px}
.object-select select,.object-select input{background:var(--bg0);color:var(--text);
border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 10px;font-size:13px;outline:none}
.object-select input[type=number]{width:70px}
.object-select select:focus,.object-select input:focus{border-color:var(--accent)}

main{flex:1;display:grid;grid-template-columns:260px 1fr 340px;overflow:hidden;min-height:0}

.palette{background:var(--bg2);border-right:1px solid var(--line);padding:12px;overflow-y:auto}
.palette h2{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--dim);
margin:14px 0 8px;font-weight:700}
.palette h2:first-child{margin-top:0}
.pal-item{display:flex;align-items:center;gap:8px;padding:7px 10px;margin-bottom:6px;
background:var(--bg0);border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;
font-size:12px;transition:.15s;user-select:none}
.pal-item:hover{border-color:var(--accent);background:#0f2740}
.pal-item:active{transform:scale(.98)}
.pal-item .ico{font-size:16px;flex-shrink:0;width:20px;text-align:center}

.props{font-size:12px;color:var(--dim);padding:4px 2px 12px}
.props label{display:block;margin:10px 0 4px;color:#cbd5e1;font-size:12px}
.props input,.props select{width:100%;padding:6px 8px;border-radius:var(--r-sm);
background:var(--bg0);border:1px solid var(--line);color:var(--text);font-size:12px;outline:none}
.props input:focus,.props select:focus{border-color:var(--accent)}
.props button{margin-top:12px;background:#ef4444;color:#fff;border:none;padding:7px 12px;
border-radius:var(--r-sm);cursor:pointer;font-size:12px;font-weight:600;width:100%}

.canvas-wrap{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0}
.canvas{flex:1;position:relative;overflow:hidden;min-height:0;
background:radial-gradient(circle,#1e293b 1px,transparent 1px) 0 0/24px 24px,var(--bg0)}
.wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.nodes{position:absolute;inset:0;z-index:2;pointer-events:none}

.node{position:absolute;width:100px;min-height:56px;background:var(--bg2);
border:2px solid var(--line);border-radius:var(--radius);padding:6px 8px;font-size:11px;
cursor:move;user-select:none;text-align:center;pointer-events:auto;z-index:1;
transition:border-color .15s,box-shadow .2s}
.node:hover{border-color:var(--accent);z-index:3}
.node.selected{border-color:var(--warn);box-shadow:0 0 0 3px rgba(245,158,11,.2);z-index:4}
.node .ico{font-size:18px;display:block;line-height:1.2}
.node .name{display:block;margin-top:2px;color:#cbd5e1;font-size:11px;line-height:1.15;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.node .val{display:block;color:var(--accent);font-weight:600;font-size:11px;margin-top:2px}

.port{position:absolute;width:14px;height:14px;background:#0ea5e9;border:2px solid var(--bg0);
border-radius:50%;cursor:crosshair;z-index:5;transition:transform .15s,background .15s}
.port.in{left:-8px;top:50%;transform:translateY(-50%)}
.port.out{right:-8px;top:50%;transform:translateY(-50%)}
.port:hover{background:var(--warn);transform:translateY(-50%) scale(1.3)}
.port.pending{background:var(--warn);box-shadow:0 0 0 4px rgba(245,158,11,.35)}
body.connecting .node{cursor:crosshair}
body.connecting #btnConnect{background:var(--warn);color:var(--bg0)}

.wires path{stroke:var(--accent);stroke-width:2.5;fill:none;pointer-events:stroke;
cursor:pointer;transition:stroke .15s}
.wires path:hover{stroke:var(--warn);stroke-width:3.5}
.wires path.overload{stroke:var(--err);stroke-dasharray:6 4}
@keyframes dashflow{to{stroke-dashoffset:-20}}
.wires path.energized{stroke-dasharray:6 4;animation:dashflow .6s linear infinite}

.node.heat-warm{border-color:var(--warn);box-shadow:0 0 12px rgba(245,158,11,.4)}
.node.heat-hot{border-color:#ef4444;box-shadow:0 0 20px rgba(239,68,68,.6)}
.node.heat-crit{border-color:var(--danger);box-shadow:0 0 28px rgba(220,38,38,.85)}
.node.tripped{border-color:var(--danger);opacity:.75;filter:saturate(.6);
background:repeating-linear-gradient(45deg,#1e293b,#1e293b 6px,#3b1a1a 6px,#3b1a1a 12px)}
.node .temp{display:block;margin-top:4px;font-size:10px;font-weight:700;color:var(--dim)}
.node.heat-warm .temp{color:var(--warn)}
.node.heat-hot .temp{color:#ef4444}
.node.heat-crit .temp{color:var(--danger)}
.node .loadbar{height:3px;background:var(--bg2);border-radius:2px;margin-top:4px;overflow:hidden}
.node .loadbar>i{display:block;height:100%;width:0%;
background:linear-gradient(90deg,#22c55e,#f59e0b 60%,#ef4444);transition:width .2s linear}
.node .battery{display:block;font-size:10px;margin-top:2px;color:var(--purple);font-weight:600}

.sim-controls{display:flex;align-items:center;gap:10px;padding:8px 16px;background:var(--bg0);
border-top:1px solid var(--line);font-size:12px;flex-wrap:wrap}
.sim-btn{padding:6px 12px;border-radius:var(--r-sm);border:none;background:var(--bg3);
color:var(--text);cursor:pointer;font-weight:600;font-size:12px}
.sim-btn:hover:not(:disabled){background:#475569}
.sim-btn.play{background:#22c55e;color:#052e16}
.sim-btn:disabled{opacity:.4;cursor:not-allowed}
.speed{display:flex;align-items:center;gap:6px;color:var(--dim);font-size:12px}
.speed select{background:var(--bg0);color:var(--text);border:1px solid var(--line);
border-radius:var(--r-sm);padding:4px 6px;font-size:12px}
.sim-clock{font-family:Consolas,monospace;font-size:15px;color:var(--accent);font-weight:700;
padding:3px 12px;background:var(--bg0);border:1px solid var(--line);border-radius:var(--r-sm);
min-width:70px;text-align:center}
.sim-status{color:var(--dim);font-style:italic;margin-left:auto}
.sim-status.running{color:var(--ok);font-style:normal;font-weight:600}
.sim-status.warn{color:var(--warn)}
.sim-status.err{color:var(--err)}

.toolbar{display:flex;gap:8px;padding:10px 16px;background:var(--bg2);
border-top:1px solid var(--line);flex-wrap:wrap}
.toolbar button{padding:8px 14px;border-radius:var(--r-sm);border:none;background:var(--accent);
color:var(--bg0);font-weight:600;cursor:pointer;font-size:12px;transition:.15s}
.toolbar button:hover{background:#7dd3fc}
.toolbar button:active{transform:scale(.97)}
#btnClear,#btnUndo,#btnRedo{background:#475569;color:var(--text)}
#btnClear:hover,#btnUndo:hover,#btnRedo:hover{background:#64748b}
#btnExport{background:#22c55e;color:#052e16}
#btnExport:hover{background:#4ade80}
#btnImport{background:var(--purple);color:#1e1b4b}
#btnImport:hover{background:#c4b5fd}
#btnPDF{background:#f59e0b;color:#451a03}
#btnPDF:hover{background:#fbbf24}
#btnLayout{background:#06b6d4;color:#042f2e}
#btnLayout:hover{background:#22d3ee}

.results{background:var(--bg2);border-left:1px solid var(--line);padding:12px;
overflow-y:auto;font-size:12px}
.results h2{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--dim);
margin:14px 0 10px;font-weight:700}
.results h2:first-child{margin-top:0}
.hint{color:var(--mute);font-size:12px;font-style:italic;line-height:1.5}

.res-block,.sim-block{background:var(--bg0);border:1px solid var(--line);
border-radius:var(--radius);padding:10px;margin-bottom:10px}
.res-block h3,.sim-block h3{margin:0 0 8px;font-size:12px;text-transform:uppercase;
letter-spacing:.4px;font-weight:700}
.res-block h3{color:var(--accent)}
.sim-block h3{color:var(--purple)}
.res-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
padding:3px 0;border-bottom:1px dashed rgba(51,65,85,.5);font-size:12px}
.res-row:last-child{border-bottom:none}
.res-row .k{color:var(--dim);flex:1;min-width:0;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.res-row .v{color:var(--text);font-weight:600;text-align:right;flex-shrink:0}
.warn{color:var(--warn);font-weight:600}
.err{color:var(--err);font-weight:600}
.ok{color:var(--ok);font-weight:600}
.res-block .warn,.res-block .err{display:block;padding:6px 8px;margin:6px 0;
border-radius:var(--r-sm);font-size:11px;line-height:1.4}
.res-block .warn{background:rgba(245,158,11,.1);border-left:3px solid var(--warn)}
.res-block .err{background:rgba(248,113,113,.1);border-left:3px solid var(--err)}

.timeline{position:relative;height:10px;background:var(--bg2);border-radius:5px;
overflow:hidden;margin:4px 0 8px}
.timeline>i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--purple));
width:0%;transition:width .1s linear}
.badge{display:inline-block;padding:2px 6px;border-radius:4px;font-size:10px;
font-weight:700;margin-right:4px;text-transform:uppercase}
.badge.ok{background:#166534;color:#86efac}
.badge.warn{background:#713f12;color:#fde047}
.badge.err{background:#7f1d1d;color:#fca5a5}
.kz-warn{color:#fca5a5;background:rgba(127,29,29,.15);border-left:3px solid #ef4444;
padding:6px 10px;margin:6px 0;border-radius:var(--r-sm);font-size:11px;line-height:1.4}
.poe-standards{margin-top:8px;padding:6px 8px;background:rgba(56,189,248,.08);
border-radius:var(--r-sm);font-size:11px;color:var(--dim);line-height:1.5}
.poe-standards b{color:var(--accent)}

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--bg0)}
::-webkit-scrollbar-thumb{background:var(--bg3);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#475569}

@media(max-width:1200px){main{grid-template-columns:220px 1fr 280px}}
@media(max-width:980px){main{grid-template-columns:200px 1fr}}
@media print{header,.palette,.canvas-wrap,.sim-controls,.toolbar{display:none}
main{display:block}.results{border:none;background:#fff;color:#000}}