:root{font-family:Segoe UI,system-ui,-apple-system,sans-serif;line-height:1.5;font-weight:400;color:#e8edf5;background:#0b1220;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}html,body,#root{margin:0;min-width:320px;min-height:100vh}body{overflow:auto;background:radial-gradient(circle at 20% 10%,rgba(79,195,247,.12),transparent 30%),radial-gradient(circle at 80% 0%,rgba(255,213,79,.1),transparent 25%),linear-gradient(180deg,#0b1220,#111827)}.diagram-shell{min-height:100vh;padding:24px 24px 32px}.diagram-header{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:20px}.eyebrow{margin:0 0 4px;color:#7dd3fc;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase}.diagram-header h1{margin:0;font-size:clamp(1.5rem,2vw,2rem);font-weight:700}.hint{margin:0;max-width:320px;color:#94a3b8;font-size:.95rem;text-align:right}.diagram-header__actions{display:flex;flex-direction:column;align-items:flex-end;gap:12px}.language-switcher{display:inline-flex;padding:4px;border-radius:999px;border:1px solid rgba(148,163,184,.22);background:#0f172ab8;gap:4px}.language-switcher__btn{min-width:42px;padding:6px 10px;border:none;border-radius:999px;background:transparent;color:#94a3b8;font-size:.82rem;font-weight:700;letter-spacing:.04em;cursor:pointer;transition:background .2s ease,color .2s ease}.language-switcher__btn:hover{color:#e2e8f0}.language-switcher__btn.active{background:#7dd3fc2e;color:#7dd3fc;box-shadow:inset 0 0 0 1px #7dd3fc40}.save-status{margin:0;font-size:.82rem;font-weight:600}.save-status--saving{color:#94a3b8}.save-status--saved{color:#86efac}.save-status--error{color:#fca5a5}.diagram-viewport{max-height:calc(100vh - 200px);overflow:auto;border-radius:24px;border:1px solid rgba(148,163,184,.15);background:#0f172a66;-webkit-overflow-scrolling:touch}.diagram-canvas{position:relative;margin:0;border-radius:0;border:none;background:linear-gradient(rgba(148,163,184,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.05) 1px,transparent 1px),#0f172ab8;background-size:32px 32px,32px 32px,auto;box-shadow:inset 0 1px #ffffff0a}.connections-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.connection-track{fill:none;stroke-width:3;opacity:.18}.connection-glow{fill:none;stroke-width:10;opacity:.12;filter:blur(2px)}.connection-flow{fill:none;stroke-width:4;stroke-linecap:round;stroke-dasharray:14 18}.connection-particles{fill:none;stroke-width:6;stroke-linecap:round;stroke-dasharray:2 28;opacity:.85}.energy-flow{animation:flow-forward 1.1s linear infinite}.energy-flow-reverse{animation:flow-reverse 1.4s linear infinite}.connection-label-bg{fill:#0f172ae0;stroke:#94a3b840}.connection-label{fill:#e2e8f0;font-size:11px;font-weight:600}.device{position:absolute;top:0;left:0;padding:16px;border-radius:18px;border:1px solid rgba(148,163,184,.22);background:#111827eb;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 10px 30px #00000047,inset 0 1px #ffffff0d;cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none;z-index:1;transition:box-shadow .2s ease,border-color .2s ease}.device.dragging{cursor:grabbing;z-index:10;border-color:#7dd3fc8c;box-shadow:0 18px 40px #0000006b,0 0 0 1px #7dd3fc40}.device-glow{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;opacity:.35;pointer-events:none}.device.solar .device-glow{background:radial-gradient(circle at top,rgba(255,213,79,.18),transparent 60%)}.device.inverter .device-glow{background:radial-gradient(circle at top,rgba(255,152,0,.18),transparent 60%)}.device.battery .device-glow{background:radial-gradient(circle at top,rgba(102,187,106,.18),transparent 60%)}.device.gasBoiler .device-glow{background:radial-gradient(circle at top,rgba(255,112,67,.2),transparent 60%)}.device.waterHeater .device-glow{background:radial-gradient(circle at top,rgba(41,182,246,.2),transparent 60%)}.device.generator .device-glow{background:radial-gradient(circle at top,rgba(141,110,99,.18),transparent 60%)}.device.grid .device-glow{background:radial-gradient(circle at top,rgba(206,147,216,.22),transparent 60%)}.device.gasSupplier .device-glow{background:radial-gradient(circle at top,rgba(255,138,101,.22),transparent 60%)}.device.wifiHub .device-glow{background:radial-gradient(circle at top,rgba(77,208,225,.24),transparent 60%)}.device.airConditioner .device-glow{background:radial-gradient(circle at top,rgba(128,203,196,.2),transparent 60%)}.device-wifi-badge{position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#00acc12e;border:1px solid rgba(77,208,225,.45);color:#80deea;pointer-events:none}.device-wifi-badge svg{width:14px;height:14px;fill:currentColor}.energy-connection--wifi .connection-track{stroke-dasharray:6 10;opacity:.45}.energy-connection--wifi .connection-glow{opacity:.2}.energy-connection--wifi .connection-flow,.energy-connection--wifi .connection-particles{stroke-dasharray:4 14;stroke-width:3;opacity:.9}.connection-label-bg--wifi{fill:#102027eb;stroke:#4dd0e159}.connection-label--wifi{fill:#80deea;font-size:10px;font-weight:700;letter-spacing:.08em}.wifi-flow{animation:wifi-flow .9s linear infinite}@keyframes wifi-flow{0%{stroke-dashoffset:0}to{stroke-dashoffset:-36}}.device--inactive{opacity:.72;border-style:dashed;border-color:#94a3b859}.device--inactive .device-glow{opacity:.15}.device--inactive .device-title,.device--inactive .stat-value{color:#94a3b8}.stat-value.status--inactive{color:#78909c}.energy-connection--inactive .connection-track{stroke-dasharray:8 8;opacity:.35}.energy-connection--inactive .connection-label{fill:#78909c}.device-header{display:flex;align-items:center;gap:12px;margin-bottom:14px}.device-icon{width:52px;height:52px;flex-shrink:0}.device-titles{display:flex;flex-direction:column;gap:2px}.device-title{font-size:1rem;font-weight:700}.device-subtitle{color:#94a3b8;font-size:.82rem}.device-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stat{padding:10px 12px;border-radius:12px;background:#0f172abf;border:1px solid rgba(148,163,184,.12)}.stat-label{display:block;margin-bottom:4px;color:#94a3b8;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}.stat-value{font-size:.95rem;font-weight:700}.stat-value.status{color:#86efac}.device-anchor{position:absolute;width:10px;height:10px;border-radius:50%;background:#cbd5e1;box-shadow:0 0 10px #ffffff59;opacity:.65}.device-anchor--right{top:50%;right:-5px;transform:translateY(-50%)}.device-anchor--left{top:50%;left:-5px;transform:translateY(-50%)}.device-anchor--bottom{left:50%;bottom:-5px;transform:translate(-50%)}@keyframes flow-forward{0%{stroke-dashoffset:0}to{stroke-dashoffset:-64}}@keyframes flow-reverse{0%{stroke-dashoffset:-64}to{stroke-dashoffset:0}}@media(max-width:900px){.diagram-header{flex-direction:column;align-items:flex-start}.diagram-header__actions{align-items:flex-start;width:100%}.hint{text-align:left}}