:root {
  color-scheme: dark;
  --bg: #040a11;
  --surface: #091522;
  --surface-raised: #0d1c2c;
  --surface-glass: rgba(7, 16, 27, .9);
  --line: #1b3147;
  --line-bright: #315676;
  --text: #edf7ff;
  --muted: #86a0b8;
  --blue: #3ca8ff;
  --blue-deep: #176ec0;
  --cyan: #4fe1ec;
  --green: #53d79c;
  --amber: #f3bc58;
  --red: #ff6978;
  --shadow: 0 18px 54px rgba(0, 0, 0, .36);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { min-width: 320px; background: var(--bg); color: var(--text); }
button, input, textarea, select { font: inherit; }
button { color: inherit; }
.app-shell { display: grid; grid-template-rows: 64px minmax(0, 1fr) 30px; width: 100%; height: 100dvh; }

.topbar {
  z-index: 30; display: flex; align-items: center; gap: 12px; padding: 0 14px;
  border-bottom: 1px solid var(--line); background: rgba(4, 10, 17, .94); backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; gap: 10px; margin-right: 8px; color: var(--text); text-decoration: none; font-size: 19px; font-weight: 780; letter-spacing: -.025em; }
.brand img { width: 36px; height: 36px; }
.icon-button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; font-size: 20px; }
.icon-button:hover { border-color: var(--line-bright); background: var(--surface-raised); }
.menu-button { font-size: 17px; }
.live-strip { display: flex; align-items: center; gap: 9px; min-width: 0; }
.live-item { display: flex; align-items: baseline; gap: 4px; min-height: 34px; padding: 7px 10px; border: 1px solid rgba(27, 49, 71, .7); border-radius: 10px; background: #07111d; }
.live-item strong { font-size: 15px; }
.live-item small { color: var(--muted); }
.wind-live-item { width: 210px; min-width: 210px; height: 42px; flex: 0 0 210px; align-items: center; gap: 7px; padding: 5px 9px; transition: border-color .18s ease, box-shadow .18s ease; }
.wind-live-item[data-health="warn"] { border-color: rgba(243, 188, 88, .62); box-shadow: inset 0 0 0 1px rgba(243, 188, 88, .05); }
.wind-live-item[data-health="error"] { border-color: rgba(255, 105, 120, .72); box-shadow: inset 0 0 0 1px rgba(255, 105, 120, .07); }
.wind-arrow { display: inline-block; width: 21px; flex: 0 0 21px; color: var(--cyan); font-size: 20px; line-height: 1; text-align: center; transform-origin: center; }
.wind-arrow.unavailable { opacity: .4; }
.wind-copy { display: grid; min-width: 0; line-height: 1.05; }
.wind-reading { display: flex; align-items: baseline; gap: 3px; white-space: nowrap; }
.wind-reading #windDirection { min-width: 35px; text-align: right; font-variant-numeric: tabular-nums; }
.wind-reading small { font-size: 10px; }
.wind-cardinal { min-width: 29px; font-size: 13px !important; }
.wind-detail { display: flex; align-items: baseline; justify-content: space-between; gap: 9px; margin-top: 3px; font-size: 9px; font-weight: 650; letter-spacing: .025em; text-transform: uppercase; white-space: nowrap; }
.wind-detail strong { color: #b8dbe7; font-size: inherit; }
.system-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.header-output { display: grid; grid-template-columns: auto 68px 34px; align-items: center; gap: 7px; min-width: 190px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: #07111d; font-size: 10px; white-space: nowrap; }
.header-output input { width: 68px; min-height: 18px; padding: 0; border: 0; accent-color: var(--cyan); }
.header-output output { color: var(--text); font-variant-numeric: tabular-nums; text-align: right; }
#hazerPowerButton { min-width: 150px; }
#outputStateButton { min-width: 108px; }
.button { min-height: 38px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised); cursor: pointer; font-weight: 680; }
.button:hover { border-color: var(--line-bright); }
.button.quiet { color: #bcd2e5; background: #07111d; }
.button-primary { border-color: #2789db; background: var(--blue-deep); }
.button-danger { border-color: #71323d; color: #ffc0c6; background: transparent; }
.button-danger.active { border-color: #d24150; color: #fff; background: #a32736; }
.button:disabled { opacity: .45; cursor: not-allowed; }
.state-button { color: #fff; transition: border-color .2s ease, background-color .2s ease, box-shadow .12s linear, filter .12s linear; }
.state-button.state-on { border-color: #2c916b; background: #174f3b; }
.state-button.state-off { border-color: #db4b5a; background: #982536; filter: brightness(calc(.92 + var(--attention-pulse, 0) * .16)); box-shadow: 0 0 0 calc(1px + var(--attention-pulse, 0) * 3px) rgba(255, 105, 120, calc(.08 + var(--attention-pulse, 0) * .22)), 0 0 calc(5px + var(--attention-pulse, 0) * 13px) rgba(255, 70, 88, calc(.06 + var(--attention-pulse, 0) * .18)); }
.state-button.state-transition { border-color: #419ee8; background: #176ec0; }
.state-button.state-transition:disabled { opacity: 1; }
.workspace { position: relative; min-height: 0; overflow: hidden; background: radial-gradient(circle at 70% 0%, rgba(20, 60, 94, .25), transparent 42%); }
#siteCanvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: default; outline: none; }
#siteCanvas.panning { cursor: grabbing; }
#siteCanvas.pan-ready { cursor: grab; }

.canvas-tools { position: absolute; z-index: 8; top: 18px; left: 18px; display: flex; flex-direction: column; gap: 5px; width: 70px; padding: 7px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-glass); box-shadow: var(--shadow); backdrop-filter: blur(14px); }
.tool { display: grid; place-items: center; gap: 2px; min-height: 53px; padding: 5px; border: 1px solid transparent; border-radius: 11px; color: var(--muted); background: transparent; cursor: pointer; }
.tool span { color: #bad1e4; font-size: 19px; line-height: 1; }.tool small { font-size: 10px; }
.tool:hover { color: var(--text); background: rgba(31, 63, 91, .35); }.tool.active { border-color: #2d648f; color: #dff3ff; background: #12304a; }.tool.active span { color: var(--cyan); }
.tool-divider { height: 1px; margin: 3px 6px; background: var(--line); }

.canvas-readout { position: absolute; z-index: 7; top: 18px; left: 104px; display: flex; border: 1px solid var(--line); border-radius: 13px; overflow: hidden; background: var(--surface-glass); box-shadow: 0 10px 30px rgba(0,0,0,.22); backdrop-filter: blur(12px); }
.canvas-readout > * { min-width: 118px; padding: 8px 12px; border: 0; border-right: 1px solid var(--line); color: inherit; background: transparent; text-align: left; }.canvas-readout > *:last-child { border-right: 0; }
.canvas-readout-button { cursor: pointer; }.canvas-readout-button:hover { background: rgba(31, 63, 91, .35); }
.canvas-readout span { display: block; color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }.canvas-readout strong { display: block; margin-top: 2px; color: #d9ebf8; font-size: 12px; font-weight: 680; }
.canvas-readout strong b { font-weight: inherit; }

.zoom-controls { position: absolute; z-index: 8; bottom: 18px; left: 18px; display: flex; overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-glass); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.zoom-controls button { min-width: 38px; height: 36px; padding: 0 9px; border: 0; border-right: 1px solid var(--line); background: transparent; cursor: pointer; }.zoom-controls button:last-child { border-right: 0; }.zoom-controls button:hover { background: var(--surface-raised); }

.canvas-context-menu { position: absolute; z-index: 24; min-width: 190px; max-width: 250px; padding: 6px; border: 1px solid var(--line-bright); border-radius: 11px; background: rgba(7, 17, 29, .98); box-shadow: var(--shadow); backdrop-filter: blur(14px); }
.canvas-context-menu[hidden] { display: none; }
.canvas-context-menu button { display: block; width: 100%; padding: 8px 10px; border: 0; border-radius: 7px; color: #dcecf8; background: transparent; text-align: left; cursor: pointer; font-size: 12px; }
.canvas-context-menu button:hover, .canvas-context-menu button:focus-visible { background: #12304a; }
.canvas-context-menu button.danger { color: #ffabb4; }
.canvas-context-menu hr { height: 1px; margin: 5px 4px; border: 0; background: var(--line); }

.inspector { position: absolute; z-index: 9; top: 18px; right: 18px; bottom: 18px; width: 340px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: var(--surface-glass); box-shadow: var(--shadow); backdrop-filter: blur(18px); transform: translateX(calc(100% + 28px)); transition: transform .22s ease; }
.inspector.open { transform: translateX(0); }
.inspector > header, .settings-drawer > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 16px 14px; border-bottom: 1px solid var(--line); }
.inspector h1, .settings-drawer h1 { margin: 2px 0 0; font-size: 18px; letter-spacing: -.02em; }.inspector header small, .settings-drawer header small { color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.inspector-body, .settings-body { min-height: 0; padding: 15px; overflow-y: auto; }
.inspector-section { padding: 0 0 16px; margin: 0 0 16px; border-bottom: 1px solid rgba(38, 65, 89, .75); }.inspector-section:last-child { border: 0; margin: 0; }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 11px; }.section-title h2 { margin: 0; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }.section-title span { color: var(--muted); font-size: 11px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }.field-span { grid-column: 1 / -1; }
label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 620; }
input, select, textarea { width: 100%; min-height: 38px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 9px; color: var(--text); background: #050d16; }
textarea { resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.field-control { position: relative; display: block; min-width: 0; }
.field-control > input, .field-control > select, .field-control > textarea { padding-right: 31px; }
.field-control.has-error > input, .field-control.has-error > select, .field-control.has-error > textarea { border-color: #a84b58; box-shadow: inset 0 0 0 1px rgba(255, 105, 120, .12); }
.field-error-marker { position: absolute; top: 50%; right: 9px; width: 17px; height: 17px; margin-top: -8.5px; border-radius: 50%; color: #fff; background: #a93645; font-size: 11px; font-weight: 850; line-height: 17px; text-align: center; visibility: hidden; pointer-events: none; }
.field-control.has-error > .field-error-marker { visibility: visible; }
.field-control.has-error > .field-error-marker::before { content: "!"; }
.toggle { display: flex; align-items: center; gap: 9px; min-height: 32px; }.toggle input { width: 17px; min-height: 17px; padding: 0; accent-color: var(--blue); }
.field-help { color: #678198; font-size: 10px; font-weight: 450; }
.inline-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }.small-button { min-height: 32px; padding: 6px 9px; font-size: 11px; }.danger-text { color: #ffabb4; }
.notice { padding: 10px; border: 1px solid #574b2e; border-radius: 9px; color: #e8cc91; background: #231e12; font-size: 11px; line-height: 1.45; }
.hazer-list { display: grid; gap: 7px; }.hazer-list-button { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 10px; text-align: left; background: #07111d; cursor: pointer; }.hazer-list-button:hover { border-color: var(--line-bright); }.hazer-list-button strong, .hazer-list-button small { display: block; }.hazer-list-button small { margin-top: 2px; color: var(--muted); }.hazer-list-button > span:last-child { color: var(--muted); font-size: 10px; text-transform: uppercase; }.dot { width: 8px; height: 8px; border-radius: 50%; background: #49657d; }.dot.active { background: var(--cyan); box-shadow: 0 0 9px rgba(79,225,236,.7); }
.vertex-list { display: grid; gap: 7px; }.vertex-row { display: grid; grid-template-columns: 22px 1fr 1fr 28px; gap: 6px; align-items: end; }.vertex-row > span { align-self: center; color: var(--muted); font-size: 11px; text-align: center; }.vertex-row button { width: 28px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 8px; color: #ffabb4; background: transparent; cursor: pointer; }
.empty-state { padding: 18px 8px; color: var(--muted); text-align: center; }

.fault-banner { position: absolute; z-index: 10; left: 50%; bottom: 18px; transform: translateX(-50%); max-width: min(520px, calc(100% - 180px)); padding: 10px 14px; border: 1px solid #823741; border-radius: 11px; color: #ffc4ca; background: rgba(53, 20, 28, .94); box-shadow: var(--shadow); }
.statusbar { z-index: 30; display: grid; grid-template-columns: max-content minmax(80px, 1fr) max-content; align-items: center; gap: 14px; padding: 0 12px; border-top: 1px solid var(--line); color: var(--muted); background: #050c14; font-size: 10px; }
#canvasHint { overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.save-state { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }.save-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }.save-state.dirty i { background: var(--amber); }.save-state.saving i { background: var(--blue); animation: pulse 1s infinite; }.save-state.saved i { background: var(--green); }.save-state.error { color: var(--red); }.save-state.error i { background: var(--red); }
.health-strip { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: 0; }
.health-item { display: inline-flex; align-items: center; gap: 5px; color: #7590a7; white-space: nowrap; }
.health-item i { width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: currentColor; }
.health-item.health-ok { color: #79bfa4; }.health-item.health-warn { color: var(--amber); }.health-item.health-error { color: var(--red); }
@keyframes pulse { 50% { opacity: .3; } }

.drawer-scrim { position: fixed; z-index: 39; inset: 0; background: rgba(0, 5, 10, .55); backdrop-filter: blur(2px); }
.settings-drawer { position: fixed; z-index: 40; top: 0; bottom: 0; left: 0; width: min(460px, calc(100% - 28px)); display: flex; flex-direction: column; border-right: 1px solid var(--line); background: #07111d; box-shadow: var(--shadow); transform: translateX(-102%); transition: transform .24s ease; }
.settings-drawer.open { transform: translateX(0); }.settings-body { padding: 10px 15px 28px; }
.settings-group { border-bottom: 1px solid var(--line); }.settings-group > button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 15px 3px; border: 0; color: #dcecf8; background: transparent; cursor: pointer; font-weight: 720; }.settings-group > button::after { content: "+"; color: var(--muted); font-size: 18px; }.settings-group.open > button::after { content: "−"; }.settings-content { display: none; padding: 0 3px 16px; }.settings-group.open .settings-content { display: block; }.settings-content .form-grid { margin-bottom: 12px; }
.details { display: grid; gap: 0; margin: 0; }.details div { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid rgba(38,65,89,.55); }.details div:last-child { border: 0; }.details dt { color: var(--muted); }.details dd { margin: 0; text-align: right; }
.network-apply { width: 100%; margin-top: 5px; }.network-dirty { color: var(--amber); font-size: 11px; }
.sim-grid { display: grid; gap: 11px; }.range-row output { float: right; color: var(--text); }.range-row input { min-height: auto; padding: 0; accent-color: var(--blue); }
.toast { position: fixed; z-index: 60; right: 18px; bottom: 46px; max-width: 340px; padding: 10px 13px; border: 1px solid #2e6086; border-radius: 10px; color: #def1ff; background: #15324a; box-shadow: var(--shadow); opacity: 0; transform: translateY(8px); pointer-events: none; transition: .18s ease; }.toast.show { opacity: 1; transform: translateY(0); }.toast.error { border-color: #89404b; color: #ffd1d5; background: #381820; }
.toast.actionable { cursor: pointer; pointer-events: auto; }
.validation-tooltip { position: fixed; z-index: 70; max-width: min(320px, calc(100vw - 20px)); padding: 8px 10px; border: 1px solid #8f414d; border-radius: 8px; color: #ffdce0; background: #32161d; box-shadow: 0 10px 30px rgba(0,0,0,.4); font-size: 11px; line-height: 1.4; pointer-events: none; }

@media (max-width: 950px) {
  .brand span, #canvasHint { display: none; }
  .statusbar { grid-template-columns: 1fr max-content; }
}
@media (max-width: 720px) {
  .app-shell { grid-template-rows: 58px minmax(0, 1fr) 28px; }
  .topbar { gap: 7px; padding: 0 8px; }.brand { margin: 0; }.brand img { width: 32px; height: 32px; }
  .header-output { display: none; }
  .wind-live-item { width: 174px; min-width: 174px; flex-basis: 174px; }
  .wind-detail > span:first-child { display: none; }
  .button { min-height: 36px; padding: 7px 9px; font-size: 12px; }
  .canvas-tools { top: 10px; left: 10px; width: 54px; }.tool { min-height: 43px; }.tool small { display: none; }
  .canvas-readout { top: 10px; left: 72px; }.canvas-readout > * { min-width: 104px; padding: 7px 9px; }
  .inspector { top: auto; right: 8px; bottom: 8px; left: 8px; width: auto; max-height: 52%; transform: translateY(calc(100% + 18px)); }.inspector.open { transform: translateY(0); }
  .zoom-controls { left: 10px; bottom: 10px; }.fault-banner { bottom: 10px; max-width: calc(100% - 20px); }
}
@media (max-width: 470px) {
  .live-item { padding: 6px 7px; }.wind-live-item { width: 132px; min-width: 132px; flex-basis: 132px; padding: 5px 6px; gap: 4px; }.wind-detail { display: none; }.system-actions { gap: 5px; }.menu-button { width: 32px; }.brand { display: none; }
  #hazerPowerButton { min-width: 104px; } #outputStateButton { min-width: 86px; }
  .canvas-readout > *:nth-child(2) { display: none; }
  .form-grid { grid-template-columns: 1fr; }.field-span { grid-column: auto; }
  .statusbar { display: flex; justify-content: space-between; gap: 8px; }.health-strip { gap: 8px; }.health-item:not(#connection) > span { display: none; }
}