:root {
  --ink: #071827;
  --ink-2: #102b3c;
  --paper: #f3f7f8;
  --panel: #ffffff;
  --line: #d7e1e5;
  --muted: #607581;
  --cyan: #27c4c9;
  --cyan-dark: #087b83;
  --yellow: #f8c94c;
  --orange: #f28c44;
  --red: #da4e4e;
  --green: #37a871;
  --shadow: 0 14px 34px rgba(7, 24, 39, .09);
  --radius: 16px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--paper); }
button, input, select { font: inherit; }
button, label.file-label { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }

.app-shell { min-height: 100vh; }
.topbar { height: 72px; display: grid; grid-template-columns: 250px 1fr auto; align-items: center; gap: 18px; padding: 0 20px; color: #fff; background: var(--ink); border-bottom: 3px solid var(--yellow); position: sticky; top: 0; z-index: 50; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--yellow); color: var(--ink); font-size: 26px; font-weight: 900; transform: skew(-4deg); }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 1.05rem; letter-spacing: .01em; }
.brand small { color: #9db2bd; font-size: .72rem; letter-spacing: .12em; margin-top: 2px; }
.tabs { display: flex; align-self: stretch; justify-content: center; gap: 4px; }
.tab { border: 0; background: transparent; color: #aebdc6; padding: 0 17px; position: relative; font-weight: 700; font-size: .9rem; }
.tab::after { content: ""; position: absolute; height: 3px; left: 16px; right: 16px; bottom: 0; background: var(--yellow); transform: scaleX(0); transition: .2s; }
.tab:hover, .tab.active { color: #fff; }
.tab.active::after { transform: scaleX(1); }
.top-actions { display: flex; gap: 8px; }
.btn { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 10px; padding: 10px 14px; font-weight: 750; min-height: 40px; transition: transform .15s, border-color .15s, background .15s; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.btn:hover { transform: translateY(-1px); border-color: #a9bdc5; }
.btn.primary { background: var(--yellow); border-color: var(--yellow); color: #16202a; }
.topbar .btn.ghost { color: #d4e1e6; background: #10293a; border-color: #274253; }
.btn.ghost { background: #f8fafb; }
.btn.small { min-height: 34px; padding: 7px 10px; font-size: .82rem; }
.file-label input { display: none; }

.view { display: none; }
.view.active { display: grid; }
#designView { height: calc(100vh - 72px); grid-template-columns: 250px minmax(460px, 1fr) 310px; overflow: hidden; }
.palette-panel, .inspector-panel { background: var(--panel); overflow-y: auto; position: relative; z-index: 5; }
.palette-panel { border-right: 1px solid var(--line); padding: 22px 16px; }
.inspector-panel { border-left: 1px solid var(--line); padding: 22px 18px; }
.panel-heading h2, .inspector-header h2 { font-size: 1rem; margin: 4px 0 16px; }
.eyebrow { color: var(--cyan-dark); font-weight: 850; text-transform: uppercase; letter-spacing: .12em; font-size: .68rem; }
.component-list { display: grid; gap: 9px; }
.component-card { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 10px; display: flex; align-items: center; text-align: left; gap: 10px; color: var(--ink); box-shadow: 0 4px 10px rgba(7,24,39,.03); }
.component-card:hover { border-color: var(--cyan); background: #f7ffff; transform: translateX(2px); }
.component-card strong, .component-card small { display: block; }
.component-card strong { font-size: .85rem; }
.component-card small { color: var(--muted); font-size: .72rem; margin-top: 2px; }
.component-icon { width: 41px; height: 41px; flex: 0 0 auto; border-radius: 9px; display: grid; place-items: center; color: #fff; font-weight: 900; font-size: .67rem; letter-spacing: .02em; }
.component-icon.supply { background: var(--ink); }
.component-icon.main { background: #465f70; }
.component-icon.rcd { background: var(--cyan-dark); }
.component-icon.spd { background: #8c69b7; }
.component-icon.mcb { background: var(--orange); }
.component-icon.load { background: var(--green); }
.component-icon.contactor { background: #2577a8; }
.component-icon.overload { background: #c55b45; }
.component-icon.pump { background: #168d9a; }
.palette-tip { margin-top: 18px; border-radius: 12px; padding: 13px; background: #edf8f8; color: #31505a; border: 1px solid #cfeaea; font-size: .78rem; line-height: 1.45; }
.palette-tip strong, .palette-tip span { display: block; }
.palette-tip strong { color: var(--cyan-dark); margin-bottom: 3px; }

.workspace-panel { min-width: 0; display: grid; grid-template-rows: 62px minmax(0, 1fr) 78px; }
.workspace-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; background: #fff; border-bottom: 1px solid var(--line); gap: 12px; }
.project-title-wrap { min-width: 180px; }
.project-title { width: 100%; max-width: 320px; border: 0; border-bottom: 1px solid transparent; font-size: .96rem; font-weight: 800; color: var(--ink); background: transparent; padding: 2px 0; }
.project-title:focus { outline: none; border-color: var(--cyan); }
.save-state { color: var(--muted); font-size: .67rem; display: block; margin-top: 3px; }
.toolbar-group { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.tool-btn { border: 1px solid transparent; background: transparent; padding: 7px 9px; border-radius: 8px; color: #49616e; font-size: .75rem; font-weight: 750; }
.tool-btn:hover, .tool-btn[aria-pressed="true"] { background: #eafafa; border-color: #bfe6e8; color: var(--cyan-dark); }
.danger-text { color: var(--red); }
.board-wrap { position: relative; overflow: auto; background: #dfe8eb; padding: 18px; }
.board { position: relative; min-width: 1340px; min-height: 680px; height: 100%; border: 1px solid #cad6da; border-radius: 15px; background: #f8fbfb; overflow: hidden; box-shadow: inset 0 2px 12px rgba(7,24,39,.05); }
.board:focus { outline: 2px solid rgba(39,196,201,.25); outline-offset: -2px; }
.board-grid { position: absolute; inset: 0; background-image: linear-gradient(#dfe9eb 1px, transparent 1px), linear-gradient(90deg, #dfe9eb 1px, transparent 1px), linear-gradient(#edf2f3 1px, transparent 1px), linear-gradient(90deg, #edf2f3 1px, transparent 1px); background-size: 80px 80px, 80px 80px, 16px 16px, 16px 16px; opacity: .72; }
.wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.wire { fill: none; stroke: #718792; stroke-width: 3; marker-end: url(#arrow); pointer-events: stroke; }
.wire.energized { stroke: var(--cyan); stroke-dasharray: 10 8; animation: flow .6s linear infinite; filter: drop-shadow(0 0 3px rgba(39,196,201,.65)); }
.wire.fault { stroke: var(--red); stroke-width: 4; animation: pulse .45s ease-in-out infinite alternate; }
.wire.selectable { pointer-events: stroke; cursor: pointer; }
.wire.selected { stroke: var(--red); stroke-width: 5; }
@keyframes flow { to { stroke-dashoffset: -18; } }
@keyframes pulse { to { opacity: .35; } }
.drop-hint { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; pointer-events: none; color: #8aa0aa; }
.drop-hint span { width: 54px; height: 54px; display: grid; place-items: center; border: 2px dashed #a9bcc4; border-radius: 15px; font-size: 1.7rem; margin-bottom: 10px; }
.drop-hint strong { color: #657b86; }
.drop-hint small { margin-top: 4px; }
.drop-hint.hidden { display: none; }
#nodeLayer { position: absolute; inset: 0; z-index: 2; }
.node { position: absolute; width: 150px; min-height: 90px; border: 2px solid #bdd0d6; background: #fff; border-radius: 12px; box-shadow: 0 9px 20px rgba(7,24,39,.12); user-select: none; touch-action: none; cursor: grab; overflow: hidden; }
.node:active { cursor: grabbing; }
.node.selected { border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(39,196,201,.16), 0 10px 25px rgba(7,24,39,.14); }
.node.connect-source { border-color: var(--yellow); box-shadow: 0 0 0 4px rgba(248,201,76,.22); }
.node.tripped { border-color: var(--red); background: #fff7f7; }
.node-head { height: 28px; background: var(--node-color, var(--ink)); color: #fff; display: flex; justify-content: space-between; align-items: center; padding: 0 9px; font-weight: 900; font-size: .67rem; letter-spacing: .06em; }
.node-state { width: 8px; height: 8px; border-radius: 50%; background: #7f929c; border: 1px solid rgba(255,255,255,.6); }
.node.energized .node-state { background: #52e2b0; box-shadow: 0 0 7px #52e2b0; }
.node.tripped .node-state { background: #ff6868; box-shadow: 0 0 7px #ff6868; }
.node-body { padding: 10px; }
.node-title { font-weight: 850; font-size: .83rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.node-meta { color: var(--muted); font-size: .68rem; margin-top: 4px; line-height: 1.35; }
.node-port { position: absolute; width: 11px; height: 11px; top: 45%; border-radius: 50%; background: #fff; border: 3px solid var(--node-color, var(--ink)); }
.node-port.in { left: -7px; }
.node-port.out { right: -7px; }
.simulation-bar { background: #fff; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 12px 18px; }
.simulation-status { display: flex; gap: 10px; align-items: center; min-width: 220px; }
.simulation-status strong, .simulation-status small { display: block; }
.simulation-status strong { font-size: .84rem; }
.simulation-status small { color: var(--muted); font-size: .7rem; margin-top: 2px; }
.status-lamp { width: 13px; height: 13px; border-radius: 50%; background: #90a1aa; box-shadow: 0 0 0 5px #ecf0f2; }
.status-lamp.on { background: var(--green); box-shadow: 0 0 0 5px #e6f5ed, 0 0 10px rgba(55,168,113,.5); }
.status-lamp.fault { background: var(--red); box-shadow: 0 0 0 5px #faeaea, 0 0 10px rgba(218,78,78,.5); }
.sim-controls { display: flex; gap: 8px; align-items: center; }
.select-inline { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .72rem; }
.select-inline select { border: 1px solid var(--line); border-radius: 9px; padding: 8px; color: var(--ink); background: #fff; }
.btn.energize { background: var(--ink); color: #fff; border-color: var(--ink); }

.inspector-empty { text-align: center; padding: 70px 15px 35px; color: var(--muted); }
.inspector-empty > span { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 16px; background: #edf4f5; margin: 0 auto 14px; font-size: 1.6rem; color: var(--cyan-dark); }
.inspector-empty h2 { color: var(--ink); font-size: 1rem; }
.inspector-empty p { font-size: .78rem; line-height: 1.5; }
.hidden { display: none !important; }
.inspector-header { display: flex; align-items: flex-start; justify-content: space-between; }
.icon-btn { width: 34px; height: 34px; border: 1px solid var(--line); background: #fff; border-radius: 9px; color: var(--ink); font-size: 1.1rem; }
.icon-btn.danger { color: var(--red); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.form-grid label, .budget-summary label, .dialog-grid label { display: grid; gap: 5px; color: #556b76; font-size: .7rem; font-weight: 750; }
.form-grid label.full { grid-column: 1 / -1; }
input, select { border: 1px solid #cedadd; border-radius: 8px; min-height: 38px; padding: 8px 9px; background: #fff; color: var(--ink); min-width: 0; }
input:focus, select:focus { outline: 2px solid rgba(39,196,201,.25); border-color: var(--cyan); }
.field-help { color: #82949c; font-size: .63rem; line-height: 1.25; font-weight: 500; }
.quick-check { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.check-heading { display: flex; justify-content: space-between; font-size: .78rem; font-weight: 800; }
.check-heading strong { color: var(--cyan-dark); }
.quick-issues { margin-top: 10px; }
.quick-issues p { margin: 6px 0; padding: 8px 9px; border-radius: 8px; background: #f4f7f8; color: #637781; font-size: .68rem; line-height: 1.35; }
.quick-issues p.warn { background: #fff5df; color: #765817; }
.quick-issues p.error { background: #fff0f0; color: #8f3434; }
.quick-issues p.ok { background: #eaf7f0; color: #267550; }

.results-view, .budget-view, .rules-view, .water-view { padding: 32px; max-width: 1500px; margin: 0 auto; width: 100%; gap: 22px; }
.section-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.section-header h1 { font-size: clamp(1.55rem, 2.5vw, 2.2rem); margin: 5px 0 7px; letter-spacing: -.035em; }
.section-header p { color: var(--muted); max-width: 760px; margin: 0; line-height: 1.5; font-size: .88rem; }
.header-actions { display: flex; gap: 8px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 6px 18px rgba(7,24,39,.045); }
.metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.metric { padding: 17px; min-height: 116px; position: relative; overflow: hidden; }
.metric::after { content: ""; position: absolute; width: 70px; height: 70px; border-radius: 50%; background: var(--metric-color, #d9eff0); right: -20px; top: -24px; opacity: .7; }
.metric span { color: var(--muted); font-size: .72rem; font-weight: 750; }
.metric strong { display: block; font-size: 1.65rem; margin-top: 8px; letter-spacing: -.04em; }
.metric small { display: block; color: #80919a; margin-top: 4px; font-size: .68rem; }
.results-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(290px, .8fr); gap: 16px; align-items: start; }
.table-card, .validation-card, .selectivity-card, .budget-table-card, .catalog-card, .sources-card { padding: 18px; }
.card-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 15px; }
.card-title h2 { font-size: .98rem; margin: 0; }
.card-title p { margin: 4px 0 0; color: var(--muted); font-size: .72rem; }
.card-title > span { color: var(--muted); font-size: .72rem; }
.score-pill { padding: 5px 9px; border-radius: 999px; background: #edf7f7; color: var(--cyan-dark) !important; font-weight: 850; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .76rem; }
th { color: #6e818a; font-size: .65rem; text-transform: uppercase; letter-spacing: .05em; text-align: left; border-bottom: 1px solid var(--line); padding: 9px 8px; white-space: nowrap; }
td { padding: 11px 8px; border-bottom: 1px solid #ebf0f1; vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
.status-tag { display: inline-flex; padding: 4px 7px; border-radius: 999px; font-size: .64rem; font-weight: 850; white-space: nowrap; }
.status-tag.ok { color: #247550; background: #e8f6ee; }
.status-tag.warn { color: #865f11; background: #fff2d6; }
.status-tag.error { color: #993c3c; background: #fde9e9; }
.validation-list { display: grid; gap: 8px; }
.validation-item { border: 1px solid var(--line); border-left: 4px solid var(--status-color, var(--green)); padding: 10px; border-radius: 9px; }
.validation-item strong { font-size: .74rem; }
.validation-item p { margin: 4px 0 0; color: var(--muted); font-size: .67rem; line-height: 1.4; }
.empty-row { color: var(--muted); text-align: center; padding: 30px !important; }

.budget-layout { display: grid; grid-template-columns: minmax(0, 1fr) 315px; gap: 16px; align-items: start; }
.budget-summary { padding: 20px; position: sticky; top: 94px; }
.budget-summary h2 { margin: 0 0 16px; font-size: 1rem; }
.budget-summary label { margin-bottom: 11px; }
.suffix-input { position: relative; }
.suffix-input input { width: 100%; padding-right: 32px; }
.suffix-input span { position: absolute; right: 10px; top: 10px; color: var(--muted); }
.summary-lines { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 0; margin-top: 15px; display: grid; gap: 8px; }
.summary-lines div { display: flex; justify-content: space-between; color: var(--muted); font-size: .75rem; }
.summary-lines strong { color: var(--ink); }
.grand-total { margin-top: 17px; padding: 16px; border-radius: 12px; background: var(--ink); color: #fff; }
.grand-total span, .grand-total strong, .grand-total small { display: block; }
.grand-total span { color: #b9cbd3; font-size: .72rem; }
.grand-total strong { font-size: 1.65rem; color: var(--yellow); margin: 4px 0 2px; }
.grand-total small { color: #91a8b4; font-size: .65rem; }
.catalog-card input, .catalog-card select, .budget-table-card input { min-height: 32px; padding: 5px 7px; font-size: .72rem; }
.row-actions { display: flex; gap: 4px; justify-content: flex-end; }
.row-btn { width: 29px; height: 29px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: #526a75; }
.row-btn.delete { color: var(--red); }

.rules-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.rule-card { padding: 19px; border-top: 4px solid var(--cyan); }
.rule-number { color: var(--cyan-dark); font-size: .68rem; font-weight: 900; letter-spacing: .1em; }
.rule-card h2 { font-size: .94rem; margin: 10px 0 8px; }
.rule-card p { color: var(--muted); font-size: .76rem; line-height: 1.55; margin: 0; }
.source-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.source-list a { display: grid; gap: 3px; text-decoration: none; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.source-list a:hover { border-color: var(--cyan); }
.source-list strong { font-size: .78rem; }
.source-list span { color: var(--muted); font-size: .68rem; }
.legal-note { margin-top: 16px; padding: 14px; background: #fff7e5; border: 1px solid #f3d68d; border-radius: 11px; }
.legal-note strong { color: #815c11; font-size: .76rem; }
.legal-note p { margin: 4px 0 0; color: #765f30; font-size: .72rem; line-height: 1.5; }

.water-header { align-items: center; }
.water-layout { display: grid; grid-template-columns: minmax(560px, 1.55fr) minmax(280px, .65fr); gap: 16px; align-items: stretch; }
.water-system-card, .control-panel-card, .logic-card, .faults-card, .pump-config-card, .water-materials-card { padding: 20px; }
.water-system-top { display: flex; justify-content: space-between; align-items: flex-start; }
.water-system-top h2 { margin: 5px 0 0; font-size: 1rem; }
.water-mode-badge { padding: 6px 10px; border-radius: 999px; background: #e7f6f6; color: var(--cyan-dark); font-size: .68rem; font-weight: 900; letter-spacing: .08em; }
.water-scene { height: 330px; position: relative; margin: 8px 0 2px; border-radius: 13px; overflow: hidden; background: linear-gradient(#f7fbfc 0 62%, #e8eef0 62% 64%, #d8e3e6 64%); border: 1px solid #dce7e9; }
.tank-block { position: absolute; z-index: 3; }
.tank-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: .72rem; }
.tank-label span { color: var(--cyan-dark); font-weight: 900; }
.tank-shell { position: relative; overflow: hidden; border: 4px solid #44606f; background: rgba(255,255,255,.8); box-shadow: 0 7px 14px rgba(7,24,39,.1); }
.elevated-block { left: 58%; top: 18px; width: 185px; }
.elevated-tank { width: 185px; height: 125px; border-radius: 16px 16px 8px 8px; }
.elevated-tank::before, .elevated-tank::after { content: ""; position: absolute; bottom: -42px; width: 5px; height: 42px; background: #44606f; z-index: 5; }
.elevated-tank::before { left: 24px; }.elevated-tank::after { right: 24px; }
.cistern-block { left: 42px; bottom: 25px; width: 245px; }
.cistern-tank { width: 245px; height: 105px; border-radius: 7px 7px 20px 20px; }
.water-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background: linear-gradient(180deg, #45d4db, #159aac); transition: height .35s ease; }
.water-fill::after { content: ""; position: absolute; left: 0; right: 0; top: -5px; height: 8px; background: radial-gradient(ellipse at center, rgba(255,255,255,.8) 0 25%, transparent 26%) 0 0/22px 8px; animation: waterWave 1.2s linear infinite; }
@keyframes waterWave { to { background-position-x: 22px; } }
.level-line { position: absolute; left: 4px; right: 4px; z-index: 4; display: flex; align-items: center; gap: 4px; color: #5a707b; font-size: .58rem; font-weight: 850; text-transform: uppercase; }
.level-line i { flex: 1; border-top: 1px dashed currentColor; }
.level-line.max { top: 10%; }.level-line.min { bottom: 30%; }.level-line.reserve { bottom: 15%; }
.water-pipe { position: absolute; z-index: 2; border: 8px solid #5d7581; }
.vertical-pipe { width: 185px; height: 152px; right: calc(42% - 20px); top: 118px; border-left: 0; border-bottom: 0; border-radius: 0 20px 0 0; }
.suction-pipe { width: 140px; height: 75px; left: 275px; bottom: 62px; border-right: 0; border-top: 0; border-radius: 0 0 0 16px; }
.flow-dots { position: absolute; inset: -8px; display: none; border: 3px dashed #77f2f1; border-left: 0; border-bottom: 0; border-radius: inherit; animation: pipeFlow .65s linear infinite; }
.water-pipe.flowing .flow-dots { display: block; }
@keyframes pipeFlow { to { border-color: #18aeb4; } }
.pump-unit { position: absolute; left: 405px; bottom: 36px; z-index: 4; display: flex; align-items: center; gap: 9px; min-width: 130px; padding: 9px 11px; border-radius: 12px; color: #fff; background: #496572; box-shadow: 0 8px 16px rgba(7,24,39,.2); }
.pump-unit.running { background: var(--cyan-dark); box-shadow: 0 0 0 5px rgba(39,196,201,.16), 0 8px 16px rgba(7,24,39,.2); }
.pump-unit.alarm { background: var(--red); }
.pump-wheel { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.14); font-size: 1.35rem; }
.pump-unit.running .pump-wheel { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pump-unit strong, .pump-unit small { display: block; }.pump-unit strong { font-size: .78rem; }.pump-unit small { color: #d3e3e8; margin-top: 2px; font-size: .62rem; }
.level-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.level-controls label { display: grid; gap: 5px; color: var(--muted); font-size: .7rem; font-weight: 750; }
.level-controls label span { display: flex; justify-content: space-between; }.level-controls strong { color: var(--cyan-dark); }
input[type="range"] { padding: 0; min-height: 24px; border: 0; accent-color: var(--cyan-dark); }
.control-panel-card { background: #132b3a; color: #fff; border: 5px solid #274252; box-shadow: inset 0 0 0 1px #06131c, 0 8px 20px rgba(7,24,39,.16); }
.panel-plate-title { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #3f5968; padding-bottom: 12px; }
.panel-plate-title span { color: #d8e5ea; font-size: .72rem; font-weight: 900; letter-spacing: .1em; }.panel-plate-title small { color: #8ea5b0; }
.mode-selector { display: grid; grid-template-columns: 1fr 54px 1fr; gap: 7px; margin: 25px 0; }
.mode-btn { height: 44px; border-radius: 7px; border: 1px solid #526b79; background: #203c4c; color: #b8cad2; font-size: .7rem; font-weight: 900; }
.mode-btn.active { color: #14232c; background: var(--yellow); border-color: var(--yellow); box-shadow: 0 0 0 4px rgba(248,201,76,.12); }
.push-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 26px 8px; }
.push-btn { border: 0; color: #fff; background: transparent; font-size: .68rem; font-weight: 850; display: grid; place-items: center; gap: 7px; }
.push-btn span { width: 54px; height: 54px; display: block; border-radius: 50%; border: 7px solid #526875; box-shadow: 0 6px 0 #06131c, 0 8px 13px rgba(0,0,0,.45); transition: transform .1s; }
.push-btn:active span { transform: translateY(4px); box-shadow: 0 2px 0 #06131c; }
.push-btn.start span { background: #35ad72; }.push-btn.stop span { background: #d94e4e; }
.pilot-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 18px 0; border-top: 1px solid #3f5968; border-bottom: 1px solid #3f5968; }
.pilot-grid div { display: grid; justify-items: center; gap: 6px; }.pilot-grid small { color: #a9bcc5; font-size: .58rem; }
.pilot { width: 18px; height: 18px; border-radius: 50%; display: block; border: 3px solid #607582; background: #293f4c; }
.pilot.on.green { background: #51dc95; box-shadow: 0 0 11px #51dc95; }.pilot.on.blue { background: #4ecfe1; box-shadow: 0 0 11px #4ecfe1; }.pilot.on.amber { background: #ffc853; box-shadow: 0 0 11px #ffc853; }.pilot.on.red { background: #ff6060; box-shadow: 0 0 11px #ff6060; }
.runtime { display: flex; justify-content: space-between; align-items: center; padding-top: 16px; color: #9eb2bc; font-size: .65rem; }.runtime strong { color: #fff; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.water-bottom-grid { display: grid; grid-template-columns: .85fr .85fr 1.5fr; gap: 16px; align-items: start; }
.logic-fields, .pump-config-grid { display: grid; gap: 10px; }
.logic-fields { grid-template-columns: repeat(3, 1fr); }.pump-config-grid { grid-template-columns: repeat(2, 1fr); }
.logic-fields label, .pump-config-grid label { display: grid; gap: 5px; color: #556b76; font-size: .68rem; font-weight: 750; }
.logic-status { display: grid; gap: 7px; margin-top: 14px; }
.logic-status div { display: flex; gap: 8px; align-items: center; padding: 8px; border-radius: 8px; background: #f3f7f8; color: #617680; font-size: .66rem; }
.logic-status i { width: 8px; height: 8px; border-radius: 50%; background: #9aabb3; }.logic-status div.ok i { background: var(--green); }.logic-status div.warn i { background: var(--orange); }.logic-status div.error i { background: var(--red); }
.fault-switches { display: grid; gap: 8px; }
.fault-switches label { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 9px; padding: 9px; cursor: pointer; }
.fault-switches input { min-height: auto; width: 17px; height: 17px; accent-color: var(--red); }
.fault-switches strong, .fault-switches small { display: block; }.fault-switches strong { font-size: .7rem; }.fault-switches small { color: var(--muted); font-size: .61rem; margin-top: 2px; }
.full-btn { width: 100%; margin-top: 12px; }
.pump-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 7px; margin-top: 14px; }
.pump-metrics div { padding: 9px; background: #f3f7f8; border-radius: 8px; }.pump-metrics span, .pump-metrics strong { display: block; }.pump-metrics span { color: var(--muted); font-size: .57rem; }.pump-metrics strong { margin-top: 4px; font-size: .74rem; }
.water-material-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.material-chip { padding: 7px 10px; border-radius: 999px; background: #edf6f7; color: #3f5f69; font-size: .68rem; font-weight: 750; border: 1px solid #d4e7e9; }

dialog { width: min(620px, calc(100% - 28px)); border: 0; border-radius: 16px; padding: 0; box-shadow: 0 30px 90px rgba(7,24,39,.3); }
dialog::backdrop { background: rgba(7,24,39,.58); backdrop-filter: blur(3px); }
dialog form { padding: 22px; }
.dialog-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.dialog-header h2 { margin: 4px 0 0; font-size: 1.15rem; }
.dialog-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dialog-grid .span-2 { grid-column: 1 / -1; }
.dialog-actions { margin-top: 20px; display: flex; justify-content: flex-end; gap: 8px; }
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 100; background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 10px; box-shadow: var(--shadow); opacity: 0; transform: translateY(12px); pointer-events: none; transition: .2s; font-size: .8rem; }
.toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 1120px) {
  .topbar { grid-template-columns: 190px 1fr auto; }
  .top-actions .btn:not(.primary), .top-actions .file-label { display: none; }
  #designView { grid-template-columns: 205px minmax(430px, 1fr) 270px; }
  .component-card { padding: 8px; }
  .component-icon { width: 36px; height: 36px; }
  .rules-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .topbar { height: auto; min-height: 66px; grid-template-columns: 1fr auto; padding: 10px 14px; }
  .tabs { grid-row: 2; grid-column: 1 / -1; height: 40px; overflow-x: auto; justify-content: flex-start; }
  .tab { flex: 1 0 auto; }
  #designView { height: auto; min-height: calc(100vh - 116px); grid-template-columns: 1fr; overflow: visible; }
  .palette-panel { border: 0; border-bottom: 1px solid var(--line); padding: 12px; overflow-x: auto; }
  .panel-heading { display: none; }
  .component-list { display: flex; min-width: max-content; }
  .component-card { width: 158px; }
  .palette-tip { display: none; }
  .workspace-panel { min-height: 680px; grid-template-rows: auto 530px auto; }
  .workspace-toolbar { align-items: flex-start; }
  .toolbar-group { max-width: 320px; }
  .inspector-panel { border-left: 0; border-top: 1px solid var(--line); min-height: 260px; }
  .inspector-empty { padding: 30px 15px; }
  .simulation-bar { align-items: flex-start; }
  .sim-controls { flex-wrap: wrap; justify-content: flex-end; }
  .select-inline { width: 100%; justify-content: flex-end; }
  .results-view, .budget-view, .rules-view, .water-view { padding: 22px 15px; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .results-layout, .budget-layout { grid-template-columns: 1fr; }
  .budget-summary { position: static; }
  .water-layout { grid-template-columns: 1fr; }
  .water-bottom-grid { grid-template-columns: 1fr 1fr; }
  .pump-config-card { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .brand small { display: none; }
  .brand-mark { width: 33px; height: 33px; }
  .top-actions { display: none; }
  .workspace-toolbar { display: grid; }
  .toolbar-group { justify-content: flex-start; }
  .board-wrap { padding: 9px; }
  .simulation-bar { display: grid; }
  .sim-controls, .select-inline { justify-content: flex-start; }
  .section-header { align-items: flex-start; display: grid; }
  .metrics-grid { grid-template-columns: 1fr 1fr; }
  .metric { min-height: 105px; padding: 14px; }
  .source-list, .rules-grid { grid-template-columns: 1fr; }
  .water-bottom-grid { grid-template-columns: 1fr; }
  .pump-config-card { grid-column: auto; }
  .water-scene { overflow-x: auto; min-width: 620px; }
  .water-system-card { overflow-x: auto; }
  .logic-fields { grid-template-columns: 1fr; }
  .level-controls { grid-template-columns: 1fr; }
  .dialog-grid { grid-template-columns: 1fr; }
  .dialog-grid .span-2 { grid-column: auto; }
}

@media print {
  body { background: #fff; }
  .topbar, #designView, .view:not(.active), .section-header .btn, .header-actions, .catalog-card { display: none !important; }
  .view.active { display: grid !important; padding: 0; }
  .card { box-shadow: none; break-inside: avoid; }
  .budget-summary { position: static; }
}