:root{--bg-color:#0d1117;--panel-bg:#161b22;--panel-border:#30363d;--text-main:#c9d1d9;--text-muted:#8b949e;--accent-color:#58a6ff;--accent-hover:#3182ce;--status-running:#2ea043;--status-stopped:#8b949e;--status-error:#f85149;--status-warning:#d29922;--water-cold:#3fb950;--water-hot:#f85149;--water-flow:#58a6ff;--font-family:"Inter", system-ui, -apple-system, sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background-color:var(--bg-color);color:var(--text-main);width:100vw;height:100vh;overflow:hidden}.app-container{--header-height:60px;--sidebar-width:250px;--rightpanel-width:300px;--bottom-height:200px;grid-template-areas:"header header header""sidebar canvas rightpanel""sidebar bottom bottom";grid-template-rows:var(--header-height) 1fr var(--bottom-height);grid-template-columns:var(--sidebar-width) 1fr var(--rightpanel-width);width:100vw;height:100vh;display:grid}.app-container.right-hidden{--rightpanel-width:0px}.app-container.bottom-hidden{--bottom-height:0px}.app-container.sidebar-collapsed{--sidebar-width:98px}.header-area{background-color:var(--panel-bg);border-bottom:1px solid var(--panel-border);grid-area:header}.sidebar-area{background-color:var(--panel-bg);border-right:1px solid var(--panel-border);grid-area:sidebar}.canvas-area{background-color:#090c10;grid-area:canvas;position:relative;overflow:hidden}.rightpanel-area{background-color:var(--panel-bg);border-left:1px solid var(--panel-border);grid-area:rightpanel}.bottom-area{background-color:var(--panel-bg);border-top:1px solid var(--panel-border);grid-area:bottom}.rightpanel-area.is-hidden,.bottom-area.is-hidden{display:none}.sidebar-shell{align-items:stretch;min-width:0;height:100%;display:flex}.app-header{justify-content:space-between;align-items:center;gap:20px;padding:0 18px;display:flex}.header-brand{align-items:center;gap:12px;min-width:0;display:flex}.header-actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px;display:flex}.panel-toggle-btn,.sim-toggle-btn{cursor:pointer;border:1px solid var(--panel-border);color:var(--text-main);background-color:#0000;border-radius:6px;align-items:center;gap:8px;padding:6px 12px;font-size:12px;font-weight:600;display:inline-flex}.panel-toggle-btn.active{background-color:#58a6ff1a;border-color:#58a6ff66}.sim-toggle-btn.start{color:var(--status-running);background-color:#2ea0431f;border-color:#23863673}.sim-toggle-btn.stop{color:var(--status-error);background-color:#f851491f;border-color:#f8514973}.sim-status-text{color:var(--text-muted);white-space:nowrap;font-size:13px}.panel-title{border-bottom:1px solid var(--panel-border);color:var(--text-main);align-items:center;gap:8px;padding:12px 16px;font-size:14px;font-weight:600;display:flex}.panel-content{flex:1;min-height:0;padding:16px;overflow-y:auto}@keyframes flow-dash{to{stroke-dashoffset:-20px}}.pipe-flow-forward{animation:1s linear infinite flow-dash}@keyframes spin{to{transform:rotate(360deg)}}.pump-spin{transform-origin:50%;animation:2s linear infinite spin}@keyframes tutorialOverlayIn{0%{opacity:0}to{opacity:1}}@keyframes tutorialCardIn{0%{opacity:0;transform:translateY(14px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes tutorialStepIn{0%{opacity:.2;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes guidePanelIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.canvas-legend{z-index:8;border:1px solid var(--panel-border);background-color:#0d1117d1;border-radius:8px;align-items:center;gap:12px;padding:8px 10px;font-size:12px;display:flex;position:absolute;top:12px;left:12px}.canvas-toolbar{z-index:8;align-items:center;gap:8px;display:flex;position:absolute;top:12px;right:12px}.canvas-toolbar-hint{color:var(--text-muted);border:1px solid var(--panel-border);background-color:#0d1117d1;border-radius:6px;padding:6px 8px;font-size:12px}.canvas-toolbar-btn{color:var(--text-main);border:1px solid var(--panel-border);cursor:pointer;background-color:#0d1117d1;border-radius:6px;padding:6px 10px;font-size:12px}.sidebar-collapse-btn,.designer-icon-btn{border:1px solid var(--panel-border);width:32px;height:32px;color:var(--text-main);cursor:pointer;background-color:#ffffff08;border-radius:8px;justify-content:center;align-items:center;display:inline-flex}.sidebar-collapse-btn:hover,.designer-icon-btn:hover{border-color:#58a6ff59}.designer-icon-btn.active{color:#d8ebff;background-color:#58a6ff1f;border-color:#58a6ff7a}.designer-link-btn.is-supply{color:#d8ebff;background-color:#3b82f62e;border-color:#3b82f68c}.designer-link-btn.is-return{color:#ffe0bf;background-color:#f973162e;border-color:#f973168c}.designer-icon-btn:disabled{opacity:.4;cursor:not-allowed}.designer-toolstrip{border-left:1px solid var(--panel-border);background:linear-gradient(#121820f5 0%,#0d1117f5 100%);flex-direction:column;align-items:center;gap:10px;width:56px;padding:12px 8px;display:flex}.designer-toolstrip.is-collapsed{width:48px;padding-inline:6px}.designer-current-tool{max-width:100%;color:var(--text-muted);text-align:center;background-color:#ffffff0a;border-radius:8px;padding:4px 6px;font-size:10px;line-height:1.2}.designer-status{justify-content:center;align-items:center;gap:6px;min-height:32px;display:flex}.designer-palette,.designer-actions{flex-direction:column;align-items:center;gap:8px;display:flex}.designer-actions{margin-top:auto}.scenario-chip{color:#d8ebff;border:1px solid #58a6ff4d;border-radius:999px;padding:2px 6px;font-size:10px}@media (width<=1280px){.app-container{--sidebar-width:220px;--rightpanel-width:270px}.sim-status-text{display:none}}@media (width<=980px){.app-container{--header-height:74px;--sidebar-width:200px}.app-header{align-items:flex-start;padding:6px 12px}.header-brand h1{font-size:16px}.header-actions{gap:6px}.canvas-legend,.canvas-toolbar{transform-origin:top;transform:scale(.95)}}@media (width<=860px){.app-container{grid-template-columns:1fr;grid-template-areas:"header""canvas""sidebar""rightpanel""bottom";grid-template-rows:var(--header-height) 1fr 240px var(--rightpanel-width) var(--bottom-height);--rightpanel-width:280px}.sidebar-area{border-right:none;border-top:1px solid var(--panel-border)}.rightpanel-area{border-left:none;border-top:1px solid var(--panel-border)}}