:root{--bg:#0b1220;--panel:#111a2e;--panel-2:#162238;--border:#22304d;--muted:#7a8aa8;--text:#e6edf8;--text-dim:#b4c0d6;--accent:#f59e0b;--accent-2:#fbbf24;--ok:#34d399;--warn:#f59e0b;--danger:#f87171;--info:#60a5fa;--crude:#3a2516;--naphtha:#eab308;--diesel:#65a30d;--flush:#22d3ee;--pipe:#3b4a6b;--pipe-hi:#5c7299;--active:#f59e0b;--mono:ui-monospace,"JetBrains Mono","SF Mono",Menlo,Consolas,monospace;--sans:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,sans-serif}*{box-sizing:border-box}body,html{margin:0;padding:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--sans)}body{display:flex;flex-direction:column;min-height:100vh}header.app{justify-content:space-between;padding:14px 22px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,#0e1728,#0b1220)}.brand,header.app{display:flex;align-items:center}.brand{gap:12px}.brand-mark{width:32px;height:32px;border-radius:6px;background:radial-gradient(circle at 30% 30%,#fbbf24,#b45309 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 2px 6px rgba(245,158,11,.25)}.brand-text h1{margin:0;font-size:15px;letter-spacing:.3px;font-weight:600}.brand-text p{margin:0;font-size:11.5px;color:var(--muted)}.brand-text p,.tag{font-family:var(--mono)}.tag{font-size:10.5px;letter-spacing:.6px;padding:3px 8px;border:1px solid var(--border);border-radius:4px;color:var(--text-dim);background:var(--panel-2);text-transform:uppercase}.tag.sim{border-color:#664626;color:#fbbf24;background:#1f1406}main{display:grid;grid-template-columns:320px 1fr 380px;grid-gap:1px;gap:1px;background:var(--border);flex:1 1;min-height:0}aside,section.diagram{background:var(--bg);overflow-y:auto}aside{padding:18px}section.diagram{padding:14px;display:flex;flex-direction:column;min-height:0}h2.section{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin:0 0 10px;font-weight:600}h2.section+.hint{margin-top:-6px;margin-bottom:10px;font-size:12px;color:var(--text-dim)}.field{margin-bottom:14px}.field label{display:block;font-size:11.5px;color:var(--muted);margin-bottom:6px;letter-spacing:.3px}.field label,.select{font-family:var(--mono)}.select{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:10px 12px;font-size:13px;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}.select:focus{outline:none;border-color:var(--accent)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:11px 14px;border-radius:6px;cursor:pointer;font-family:var(--mono);font-size:12.5px;letter-spacing:.6px;text-transform:uppercase;font-weight:600;border:1px solid transparent;transition:transform .05s ease,background .15s ease}.btn:active{transform:translateY(1px)}.btn.primary{background:var(--accent);color:#1a0f00;border-color:#b45309}.btn.primary:hover{background:var(--accent-2)}.btn.primary:disabled{background:#3a2a10;color:#7a6235;cursor:not-allowed;border-color:#3a2a10}.btn.ghost{background:var(--panel);color:var(--text-dim);border-color:var(--border)}.btn.ghost:hover{background:var(--panel-2);color:var(--text)}.scenarios{display:grid;grid-gap:8px;gap:8px}.scenario{text-align:left;padding:10px 12px;border:1px solid var(--border);border-radius:6px;background:var(--panel);cursor:pointer;color:var(--text-dim);font-family:var(--sans);font-size:12.5px;line-height:1.4}.scenario:hover{border-color:var(--accent);color:var(--text)}.scenario .sc-title{color:var(--text);font-weight:600;font-size:13px;margin-bottom:2px;display:block}.scenario .sc-sub{font-family:var(--mono);font-size:11px;color:var(--muted)}.legend{display:grid;grid-gap:8px;gap:8px}.legend .item{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--text-dim)}.chip{display:inline-block;width:14px;height:14px;border-radius:3px;border:1px solid rgba(255,255,255,.08)}.chip.round{border-radius:50%}.divider{height:1px;background:var(--border);margin:18px 0}.diagram-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.diagram-head .meta{display:flex;gap:16px;font-family:var(--mono);font-size:11px;color:var(--muted)}.diagram-head .meta b{color:var(--text);font-weight:600}.svg-wrap{flex:1 1;min-height:0;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:8px;background-image:radial-gradient(circle at 25% 20%,rgba(245,158,11,.04),transparent 45%),radial-gradient(circle at 80% 80%,rgba(96,165,250,.04),transparent 50%);position:relative}svg.plant{width:100%;height:100%;display:block}.node-label{font-family:var(--mono);font-size:10.5px;fill:var(--text-dim)}.node-sub{font-family:var(--sans);font-size:9.5px;fill:var(--muted)}.pipe{stroke:var(--pipe);stroke-width:3;fill:none;stroke-linecap:round}.pipe.hi{stroke:var(--pipe-hi);stroke-width:4}.pipe.active{stroke:var(--active);stroke-width:4.5;stroke-dasharray:8 6;animation:flow .6s linear infinite;filter:drop-shadow(0 0 6px rgba(245,158,11,.4))}@keyframes flow{0%{stroke-dashoffset:14}to{stroke-dashoffset:0}}.valve{cursor:default}.valve .body{fill:#2a3856;stroke:#4a5a7a;stroke-width:1.5}.valve.open .body{fill:#1a3e2a;stroke:var(--ok)}.valve.closed .body{fill:#3a1a1a;stroke:#8a4a4a}.valve.active .body{fill:#3e2a0f;stroke:var(--accent);stroke-width:2.5;filter:drop-shadow(0 0 6px rgba(245,158,11,.5))}.valve text{font-family:var(--mono);font-size:9px;fill:var(--text);text-anchor:middle;pointer-events:none}.tank rect{stroke-width:1.5}.tank.active rect{filter:drop-shadow(0 0 8px rgba(245,158,11,.4))}.manifold.active rect{filter:drop-shadow(0 0 6px rgba(245,158,11,.35))}.unit rect{fill:var(--panel-2);stroke:var(--pipe-hi);stroke-width:1.5}.unit.endpoint rect{fill:#1a2a1a;stroke:var(--ok)}.unit.active rect{stroke:var(--accent);filter:drop-shadow(0 0 8px rgba(245,158,11,.4))}.output-scroll{display:flex;flex-direction:column;gap:14px}.route-summary{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:14px}.route-summary .stats{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:12px;gap:12px;margin-top:10px}.stat .label{font-size:10.5px;color:var(--muted);letter-spacing:.6px;text-transform:uppercase;font-family:var(--mono)}.stat .value{font-family:var(--mono);font-size:16px;font-weight:600;color:var(--text);margin-top:2px}.stat .value small{font-size:11px;color:var(--muted);font-weight:400;margin-left:3px}.banner{display:flex;gap:10px;padding:11px 13px;border-radius:6px;border:1px solid transparent;font-size:12.5px;line-height:1.5}.banner .b-label{font-family:var(--mono);font-size:10px;letter-spacing:.8px;padding:2px 6px;border-radius:3px;flex-shrink:0;height:-moz-fit-content;height:fit-content;font-weight:700}.banner .b-body b{display:block;margin-bottom:2px;color:var(--text)}.banner.ok{background:rgba(52,211,153,.08);border-color:rgba(52,211,153,.3);color:var(--text-dim)}.banner.ok .b-label{background:var(--ok);color:#0a1f14}.banner.warn{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.3);color:var(--text-dim)}.banner.warn .b-label{background:var(--warn);color:#1a1000}.banner.danger{background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.35);color:var(--text-dim)}.banner.danger .b-label{background:var(--danger);color:#1a0505}.banner.info{background:rgba(96,165,250,.08);border-color:rgba(96,165,250,.3);color:var(--text-dim)}.banner.info .b-label{background:var(--info);color:#0a1120}ol.steps{list-style:none;padding:0;margin:0;counter-reset:step;display:flex;flex-direction:column;gap:6px}ol.steps li{counter-increment:step;position:relative;padding:10px 12px 10px 40px;background:var(--panel);border:1px solid var(--border);border-radius:6px;font-size:12.5px;color:var(--text-dim);line-height:1.5}ol.steps li:before{content:counter(step,decimal-leading-zero);position:absolute;left:10px;top:10px;font-family:var(--mono);font-size:11px;color:var(--accent);background:#1f1406;padding:2px 6px;border-radius:3px;border:1px solid #664626}ol.steps li .tag-id{font-family:var(--mono);font-size:11.5px;color:var(--text);background:var(--panel-2);padding:1px 5px;border-radius:3px;border:1px solid var(--border)}ol.steps li .op{font-weight:600;color:var(--text)}ol.steps li .op.close{color:var(--danger)}ol.steps li .op.open{color:var(--ok)}ol.steps li .op.verify{color:var(--info)}ol.steps li .op.monitor{color:var(--warn)}.empty-state{text-align:center;padding:40px 20px;color:var(--muted);font-size:13px;line-height:1.6}.empty-state .icon{width:40px;height:40px;border-radius:50%;border:1.5px dashed var(--border);margin:0 auto 12px;align-items:center;justify-content:center;font-size:18px}.empty-state .icon,footer.disclaimer{display:flex;color:var(--muted);font-family:var(--mono)}footer.disclaimer{padding:8px 22px;border-top:1px solid var(--border);font-size:11px;justify-content:space-between;gap:12px}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:5px}::-webkit-scrollbar-thumb:hover{background:var(--pipe-hi)}@media (max-width:1100px){main{grid-template-columns:280px 1fr 340px}}@media (max-width:900px){main{grid-template-columns:1fr;grid-template-rows:auto auto auto}aside,section.diagram{max-height:none}.svg-wrap{min-height:420px}}