/* Flora cabinet v2 — светлый кабинет, без GitHub Primer */
:root {
  --fl-bg: #f3f6f4;
  --fl-surface: #ffffff;
  --fl-text: #1a211e;
  --fl-muted: #5c6b64;
  --fl-border: #e2e8e4;
  --fl-accent: #0b8f63;
  --fl-accent-dim: #e3f5ec;
  --fl-accent-hover: #097a55;
  --fl-accent-ink: #086548;
  --fl-on-accent: #ffffff;
  --fl-knob: #ffffff;
  --fl-knob-on: #ffffff;
  --fl-warn: #c45c12;
  --fl-danger: #c43c46;
  --fl-radius: 16px;
  --fl-radius-sm: 10px;
  --fl-sidebar: 240px;
}
html[data-fl-theme="dark"] {
  color-scheme: dark;
  --fl-bg: #1e211c;
  --fl-surface: #2a2e28;
  --fl-text: #f4f1e6;
  --fl-muted: #b4b09a;
  --fl-border: #3e433b;
  --fl-accent: #FFD428;
  --fl-accent-dim: rgba(255, 212, 40, 0.16);
  --fl-accent-hover: #e6be1f;
  --fl-accent-ink: #FFD428;
  --fl-on-accent: #1a1808;
  --fl-knob: #e8e4d4;
  --fl-knob-on: #1a1808;
  --fl-warn: #ffb347;
  --fl-danger: #ff7a7a;
}

* { box-sizing: border-box; }

/* display:flex на .fl-login/.fl-shell иначе перебивает HTML hidden */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  min-height: 100vh;
  width: 100%;
  background: var(--fl-bg);
  color: var(--fl-text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.45;
}
html { color-scheme: light; }
html[data-fl-theme="dark"] { color-scheme: dark; }

a { color: var(--fl-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea { font: inherit; }

.fl-shell {
  display: flex;
  min-height: 100vh;
  width: 100%;
}

.fl-nav {
  width: var(--fl-sidebar);
  flex-shrink: 0;
  padding: 1.25rem 1rem;
  border-right: 1px solid var(--fl-border);
  background: var(--fl-bg);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.fl-brand {
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0 0 0.25rem;
}

.fl-brand-sub {
  font-size: 0.78rem;
  color: var(--fl-muted);
  margin: 0 0 1rem;
}

.fl-nav-email {
  font-size: 0.72rem;
  color: var(--fl-muted);
  line-height: 1.25;
  margin: -0.05rem 0 0.7rem;
  word-break: break-all;
}
.fl-nav-email:empty { display: none; }

.fl-nav-foot { margin-top: auto; }

#floraNav {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
}

.fl-nav a.fl-nav-item,
.fl-nav span.fl-nav-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--fl-radius-sm);
  color: var(--fl-muted);
  text-decoration: none;
}

.fl-nav a.fl-nav-item:hover { background: var(--fl-accent-dim); color: var(--fl-text); text-decoration: none; }

.fl-nav .fl-nav-item.is-on {
  background: var(--fl-accent-dim);
  color: var(--fl-accent);
  font-weight: 600;
}

.fl-nav-ico {
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--fl-nav-mask) center / contain no-repeat;
  mask: var(--fl-nav-mask) center / contain no-repeat;
}
.fl-nav-ico--home { --fl-nav-mask: url("/images/nav/home.png?v=1.0.94"); }
.fl-nav-ico--charts { --fl-nav-mask: url("/images/nav/charts.png?v=1.0.94"); }
.fl-nav-ico--rules { --fl-nav-mask: url("/images/nav/rules.png?v=1.0.105"); }
.fl-nav-ico--settings { --fl-nav-mask: url("/images/nav/settings.png?v=1.0.99"); }
.fl-nav-ico--lab { --fl-nav-mask: url("/images/nav/lab.png?v=1.0.94"); }
.fl-nav-ico--pair { --fl-nav-mask: url("/images/roles/pair.png?v=1.0.96"); }
.fl-nav-label { min-width: 0; }

.cabinet-kind {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin: 0.55rem 0;
}
.cabinet-kind-cap {
  width: 100%;
  font-size: 0.72rem;
  color: var(--fl-muted);
}
.cabinet-kind-btn {
  font: inherit;
  font-size: 0.78rem;
  padding: 0.22rem 0.5rem;
  border: 1px solid var(--fl-border);
  background: var(--fl-surface);
  color: var(--fl-text);
  border-radius: 8px;
  cursor: pointer;
}
.cabinet-kind-btn.is-on {
  border-color: var(--fl-accent);
  background: var(--fl-accent-dim);
  color: var(--fl-accent);
  font-weight: 600;
}

.fl-nav-foot button,
.fl-nav-foot a.fl-btn {
  width: 100%;
  margin-top: 0.65rem;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}

.fl-dock {
  display: none;
  position: fixed;
  left: 0.7rem;
  right: 0.7rem;
  bottom: calc(0.55rem + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  background: var(--fl-surface);
  border: 1px solid var(--fl-border);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(26, 33, 30, 0.16);
  padding: 0.3rem;
  justify-content: space-around;
  align-items: stretch;
  gap: 0.12rem;
}

.fl-dock .fl-nav-item {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  text-align: center;
  font-size: 0.7rem;
  line-height: 1.15;
  padding: 0.42rem 0.08rem 0.38rem;
  border-radius: 12px;
  color: var(--fl-muted);
  text-decoration: none;
}

.fl-dock .fl-nav-ico {
  width: 1.35rem;
  height: 1.35rem;
}

.fl-dock .fl-nav-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fl-dock .fl-nav-item:hover { text-decoration: none; background: var(--fl-accent-dim); color: var(--fl-text); }

.fl-dock .fl-nav-item.is-on {
  background: var(--fl-accent-dim);
  color: var(--fl-accent);
  font-weight: 600;
}

@media (min-width: 721px) {
  .fl-dock { display: none !important; }
}

.fl-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.fl-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  background: var(--fl-surface);
  border-bottom: 1px solid var(--fl-border);
}

.fl-top h1 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  flex: 1;
  min-width: 0;
}

.fl-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--fl-radius-sm);
  color: var(--fl-text);
  border: 1px solid var(--fl-border);
  background: var(--fl-surface);
}

.fl-back:hover { background: var(--fl-bg); text-decoration: none; }

.fl-presence {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  color: var(--fl-muted);
}
.fl-presence .fl-ico {
  width: 1.05rem;
  height: 1.05rem;
  vertical-align: 0;
}
.fl-offline-note:not([hidden]) {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}
.fl-offline-note .fl-ico {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.fl-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fl-muted);
  flex-shrink: 0;
}

.fl-dot.on { background: var(--fl-accent); }
.fl-dot.warn { background: var(--fl-warn); }
.fl-dot.danger { background: var(--fl-danger); }
.fl-dot.skip { background: var(--fl-muted); opacity: 0.55; }
.fl-dot.pulse {
  animation: fl-pulse 1.2s ease-in-out infinite;
}

.fl-body { padding: 1.25rem 1.5rem 2rem; flex: 1; }

.fl-tabs {
  display: none;
}

.fl-tab {
  padding: 0.55rem 0.9rem;
  color: var(--fl-muted);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.fl-tab.is-on {
  color: var(--fl-accent);
  font-weight: 600;
  border-bottom-color: var(--fl-accent);
}

.fl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-align: center;
  text-decoration: none;
  border: none;
  border-radius: var(--fl-radius-sm);
  padding: 0.55rem 1rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--fl-accent);
  color: var(--fl-on-accent);
}
.fl-btn .fl-ico {
  width: 1.05rem;
  height: 1.05rem;
  color: inherit;
}

.fl-btn:hover { background: var(--fl-accent-hover); }
.fl-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.fl-btn-ghost {
  background: var(--fl-surface);
  color: var(--fl-text);
  border: 1px solid var(--fl-border);
  font-weight: 500;
}

.fl-btn-ghost:hover { background: var(--fl-bg); }

.fl-btn-sm {
  padding: 0.28rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 500;
}

.fl-fw-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.fl-fw-node-box {
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--fl-border);
}

.fl-fw-node {
  margin-bottom: 0.4rem;
}

.fl-btn-danger {
  background: none;
  color: var(--fl-danger);
  border: none;
  font-weight: 600;
  cursor: pointer;
  padding: 0.35rem 0.5rem;
}

.fl-msg {
  padding: 0.65rem 0.85rem;
  border-radius: var(--fl-radius-sm);
  margin-bottom: 0.85rem;
  font-size: 0.9rem;
}

.fl-msg.ok { background: var(--fl-accent-dim); color: var(--fl-accent-ink); }
.fl-msg.err {
  background: color-mix(in srgb, var(--fl-danger) 16%, var(--fl-surface));
  color: var(--fl-text);
  border: 1px solid color-mix(in srgb, var(--fl-danger) 42%, var(--fl-border));
}

.fl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

.fl-card {
  background: var(--fl-surface);
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius);
  padding: 1rem 1.1rem;
}

.fl-card.fl-click {
  cursor: pointer;
}

.fl-card.fl-click:hover { border-color: var(--fl-accent); }

.fl-card h2 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.fl-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.fl-card-head h2 { margin: 0; }
.fl-card-head-act {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}
.fl-card-head-act .fl-btn { white-space: nowrap; }

.fl-muted { color: var(--fl-muted); font-size: 0.88rem; }

.fl-field { margin-bottom: 0.75rem; }
.fl-field > label {
  display: block;
  font-size: 0.88rem;
  color: var(--fl-muted);
  margin-bottom: 0.3rem;
  font-weight: 650;
}
.fl-field input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.fl-field select {
  width: 100%;
  border: 1px solid var(--fl-border);
  border-radius: 10px;
  padding: 0.62rem 0.75rem;
  min-height: 2.7rem;
  background: var(--fl-surface);
  font-size: 1rem;
}

.fl-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.fl-sats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 320px));
  gap: 1rem;
  margin-top: 1.35rem;
}
.fl-sat {
  background: var(--fl-surface);
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius);
  padding: 0.85rem;
  display: flex;
  gap: 0.85rem;
  align-items: stretch;
  min-width: 0;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.fl-sat:hover {
  border-color: color-mix(in srgb, var(--fl-accent) 32%, var(--fl-border));
  text-decoration: none;
}
.fl-sat.is-live {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fl-accent) 14%, transparent);
}
.fl-sat.is-quiet { opacity: 0.78; }
.fl-sat-art {
  flex: 0 0 92px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fl-sat-bezel {
  width: 92px;
  height: 92px;
  border-radius: 18px;
  padding: 7px;
  background: #1a211e;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.fl-sat.is-live .fl-sat-bezel {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 6px 16px color-mix(in srgb, var(--fl-accent) 18%, transparent);
}
.fl-sat-lcd {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #c8c8cc;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fl-sat-lcd-type {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #5c5c62;
  line-height: 1.15;
  text-align: center;
  max-width: 100%;
  padding: 0 4px;
  overflow: hidden;
}
.fl-sat-brick {
  width: 92px;
  height: 64px;
  border-radius: 14px;
  background: linear-gradient(180deg, #2a332f 0%, #1a211e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 10px;
}
.fl-sat-led {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
.fl-sat-led.is-on {
  background: var(--fl-accent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--fl-accent) 55%, transparent);
}
.fl-sat-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  justify-content: center;
}
.fl-sat-body .fl-tank-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fl-sat-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--fl-muted);
}
.fl-sat-perks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.28rem;
}
.fl-sat-perk {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--fl-accent);
  background: var(--fl-accent-dim);
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
}

.fl-sens-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: stretch;
  gap: 0.85rem;
  margin-top: 0.85rem;
}
.fl-sens {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.7rem;
  min-width: 0;
  padding: 0.9rem;
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius);
  background: var(--fl-surface);
}
.fl-sens-art {
  flex: none;
  display: flex;
  justify-content: center;
}
.fl-sens-mod {
  width: 92px;
  height: 92px;
  border-radius: 18px;
  background: linear-gradient(180deg, #2a332f 0%, #1a211e 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.fl-sens-window {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #5b6a64, #101412 62%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.08);
}
.fl-sens-mod.is-press .fl-sens-window {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: linear-gradient(180deg, #8a938e, #3d4440);
}
.fl-sens-mod.is-spec .fl-sens-window {
  width: 36px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(90deg, #7c5cff 0%, #22c55e 50%, #f97316 100%);
  opacity: 0.85;
}
.fl-sens-mod.is-clima .fl-sens-window {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: radial-gradient(circle at 30% 28%, #7ec8ff, #1a3a52 62%);
}
.fl-sens-mod.is-lux .fl-sens-window {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #ffe08a, #8a6a10 62%);
}
.fl-sens-mod.is-temp .fl-sens-window {
  width: 10px;
  height: 28px;
  border-radius: 6px;
  background: linear-gradient(180deg, #f97316, #7c2d12);
}
.fl-sens-mod.is-reed .fl-sens-window {
  width: 34px;
  height: 10px;
  border-radius: 4px;
  background: linear-gradient(90deg, #64748b, #334155);
}
.fl-sens-mod.is-out {
  flex-direction: row;
  gap: 0.35rem;
}
.fl-sens-mod.is-out .fl-ico {
  width: 28px;
  height: 28px;
  color: #d6ddd8;
}
.fl-sens-mod.is-out .fl-ico--master,
.fl-sens-mod.is-out .fl-ico--module {
  color: var(--fl-accent);
}
.fl-sens-mod.is-out .fl-ico.is-live { color: var(--fl-accent); }
.fl-sens-leds {
  display: flex;
  gap: 5px;
  align-items: center;
}
.fl-sens-led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
.fl-sens-led.is-on {
  background: var(--fl-accent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--fl-accent) 55%, transparent);
}
.fl-sens-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  text-align: center;
}
.fl-sens-copy .fl-tank-title {
  font-size: 1.05rem;
  justify-content: center;
}
.fl-sens-owner {
  font-size: 0.78rem;
  color: var(--fl-muted);
  overflow-wrap: anywhere;
  display: flex;
  justify-content: center;
}
.fl-sens-acts {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.45rem;
}
.fl-sens-acts .fl-seg {
  width: 100%;
}
.fl-sens-acts .fl-btn {
  width: 100%;
  padding: 0.55rem 0.7rem;
  font-size: 0.86rem;
  font-weight: 650;
  border-radius: 12px;
}
.fl-sens-air {
  background: var(--fl-danger);
  color: #fff;
  border: none;
}
.fl-sens-air:hover {
  background: #a8323b;
  color: #fff;
}
.fl-sens-air:disabled:hover {
  background: var(--fl-danger);
}
.fl-sens-rho {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  margin-top: 0.35rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--fl-border);
  border-radius: 12px;
  text-align: left;
}
.fl-sens-rho span {
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--fl-muted);
}
.fl-sens-rho select {
  width: 100%;
  min-width: 0;
  border: 0;
  padding: 0.15rem 1.2rem 0.15rem 0;
  background: transparent;
  color: var(--fl-text);
  font: inherit;
  font-weight: 650;
  font-size: 0.95rem;
  cursor: pointer;
}
.fl-sens-rho option:disabled {
  color: var(--fl-muted);
}
.fl-sens-rho-custom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin-top: 0.4rem;
}
.fl-sens-rho-custom[hidden] {
  display: none;
}
.fl-sens-rho-custom input {
  width: 5.2rem;
  min-width: 0;
  border: 1px solid var(--fl-border);
  border-radius: 8px;
  padding: 0.28rem 0.4rem;
  font: inherit;
  font-weight: 650;
}
.fl-sens-rho-custom .fl-btn {
  padding: 0.28rem 0.65rem;
}
.fl-sens-msg {
  min-height: 1.1em;
  font-size: 0.78rem;
}

.fl-tank-stack {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}

.fl-tank {
  background: var(--fl-surface);
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius);
  padding: 0.85rem;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.fl-tank.compact { min-height: 0; }

.fl-tank-title {
  font-weight: 600;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.fl-tank-title .fl-ico {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--fl-accent);
  vertical-align: 0;
}
.fl-muted .fl-ico,
.fl-rule-ch .fl-ico,
[data-ch-label] .fl-ico {
  width: 14px;
  height: 14px;
  color: var(--fl-accent);
  vertical-align: -2px;
}
.fl-rule-chs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.65rem;
  margin-top: 0.2rem;
}
.fl-rule-ch {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.82rem;
  color: var(--fl-text);
}
.fl-switch-copy strong {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.fl-tank-kind {
  font-size: 0.72rem;
  color: var(--fl-muted);
}

.fl-tank-metrics {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}

.fl-num {
  font-size: 1.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
button.fl-num {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.fl-tank.compact .fl-num { font-size: 1.35rem; }

.fl-unit { font-size: 0.82rem; color: var(--fl-muted); }

.fl-roombar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.4rem 0.65rem;
  padding: 0.42rem 0.75rem;
  background: rgba(118, 118, 128, 0.12);
  border: none;
  border-radius: 12px;
  margin-bottom: 0.75rem;
  transition: box-shadow 0.35s ease, background 0.35s ease;
}
.fl-roombar-lab {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6e6e73;
  margin-right: 0.1rem;
}

.fl-tank-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: stretch;
  flex: 1;
  min-height: 150px;
}
.fl-tank-body.solo { grid-template-columns: 1fr; }

.fl-sil {
  position: relative;
  min-height: 150px;
}

.fl-well {
  position: absolute;
  inset: 0;
  border: 1px solid var(--fl-border);
  border-radius: 12px;
  overflow: hidden;
  overflow: clip;
  background: var(--fl-bg);
}

.fl-fill-label {
  position: absolute;
  left: 0.65rem;
  bottom: 0.5rem;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.35rem;
  max-width: calc(100% - 7.5rem);
  pointer-events: auto;
}
.fl-fill-readout {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.22rem 0.4rem;
  max-width: 100%;
  padding: 0.3rem 0.58rem 0.34rem;
  background: color-mix(in srgb, var(--fl-surface) 90%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid color-mix(in srgb, var(--fl-border) 70%, #fff);
  border-radius: var(--fl-radius-sm);
  box-shadow: 0 2px 10px rgba(26, 33, 30, 0.1);
}

.fl-tank.compact .fl-sil { min-height: 72px; flex: none; }
.fl-tank.compact .fl-well { position: relative; min-height: 72px; }
.fl-tank.compact .fl-tank-body { display: block; min-height: 0; }

.fl-air {
  height: 36%;
  background: color-mix(in srgb, var(--fl-bg) 70%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--fl-border) 55%, transparent);
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.fl-well-stickers {
  position: absolute;
  top: 0.4rem;
  left: 0.45rem;
  right: 5.4rem;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  pointer-events: auto;
  max-width: calc(100% - 5.6rem);
}
.fl-well-stickers .fl-meter {
  background: color-mix(in srgb, var(--fl-surface) 78%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-color: color-mix(in srgb, var(--fl-border) 70%, #fff);
  box-shadow: 0 2px 10px rgba(26, 33, 30, 0.1);
}

.fl-water {
  --fl-water: #4eb3e0;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background: rgba(78, 179, 224, 0.42);
  background: color-mix(in srgb, var(--fl-water) 42%, transparent);
  border-radius: 0 0 11px 11px;
  transition: height 0.4s ease;
  pointer-events: none;
}
.fl-water::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -9px;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 144 16' preserveAspectRatio='none'%3E%3Cpath fill='rgba(255,255,255,0.4)' d='M0 10 Q18 2 36 10 T72 10 T108 10 T144 10 V16 H0Z'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 72px 12px;
  animation: fl-wave-x 4.8s linear infinite;
  pointer-events: none;
  z-index: 2;
}
.fl-bubbles {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 50%, transparent 100%);
  mask-image: linear-gradient(to top, transparent 0%, #000 50%, transparent 100%);
}
.fl-bubbles i {
  position: absolute;
  inset: 0;
  background-repeat: repeat;
  pointer-events: none;
}
.fl-bubbles i:nth-child(1) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Ccircle cx='12' cy='50' r='2.3' fill='rgba(255,255,255,0.8)'/%3E%3Ccircle cx='36' cy='38' r='1.5' fill='rgba(255,255,255,0.55)'/%3E%3Ccircle cx='22' cy='22' r='2' fill='rgba(255,255,255,0.7)'/%3E%3Ccircle cx='50' cy='14' r='1.2' fill='rgba(255,255,255,0.5)'/%3E%3C/svg%3E");
  background-size: 64px 64px;
  animation: fl-bub-a 12s linear infinite;
}
.fl-bubbles i:nth-child(2) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='80' viewBox='0 0 48 80'%3E%3Ccircle cx='10' cy='68' r='1.8' fill='rgba(255,255,255,0.65)'/%3E%3Ccircle cx='32' cy='52' r='2.4' fill='rgba(255,255,255,0.75)'/%3E%3Ccircle cx='18' cy='34' r='1.3' fill='rgba(255,255,255,0.5)'/%3E%3Ccircle cx='40' cy='16' r='1.9' fill='rgba(255,255,255,0.6)'/%3E%3C/svg%3E");
  background-size: 48px 80px;
  animation: fl-bub-b 17s linear infinite;
  animation-delay: -6s;
}
.fl-bubbles i:nth-child(3) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='56' viewBox='0 0 72 56'%3E%3Ccircle cx='16' cy='44' r='2.1' fill='rgba(255,255,255,0.7)'/%3E%3Ccircle cx='46' cy='36' r='1.4' fill='rgba(255,255,255,0.5)'/%3E%3Ccircle cx='28' cy='20' r='2.5' fill='rgba(255,255,255,0.78)'/%3E%3Ccircle cx='58' cy='10' r='1.6' fill='rgba(255,255,255,0.55)'/%3E%3C/svg%3E");
  background-size: 72px 56px;
  animation: fl-bub-c 21s linear infinite;
  animation-delay: -11s;
}
.fl-water.is-empty::before,
.fl-water.is-empty::after { content: none; animation: none; }
.fl-water.is-empty .fl-bubbles { display: none; }

.fl-water.is-grain {
  background:
    color-mix(in srgb, var(--fl-water) 16%, #161310 84%);
  box-shadow: inset 0 10px 18px rgba(0, 0, 0, 0.35);
}
.fl-water.is-grain::before {
  top: -7px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 16' preserveAspectRatio='none'%3E%3Cpath fill='rgba(0,0,0,0.28)' d='M0 12 L8 7 L16 11 L24 5 L32 9 L40 6 L48 12 L56 7 L64 10 L72 5 L80 9 L88 6 L96 12 V16 H0Z'/%3E%3C/svg%3E");
  background-size: 48px 14px;
  animation: fl-grain-settle 6.5s ease-in-out infinite;
}
.fl-water.is-grain::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Ccircle cx='9' cy='11' r='4.4' fill='rgba(255,255,255,0.4)'/%3E%3Ccircle cx='24' cy='7' r='3.6' fill='rgba(0,0,0,0.44)'/%3E%3Ccircle cx='40' cy='14' r='5' fill='rgba(255,255,255,0.32)'/%3E%3Ccircle cx='48' cy='8' r='3.2' fill='rgba(0,0,0,0.38)'/%3E%3Ccircle cx='12' cy='28' r='4' fill='rgba(0,0,0,0.4)'/%3E%3Ccircle cx='29' cy='25' r='4.8' fill='rgba(255,255,255,0.36)'/%3E%3Ccircle cx='45' cy='30' r='3.8' fill='rgba(0,0,0,0.4)'/%3E%3Ccircle cx='7' cy='43' r='4.2' fill='rgba(255,255,255,0.34)'/%3E%3Ccircle cx='22' cy='46' r='3.5' fill='rgba(0,0,0,0.42)'/%3E%3Ccircle cx='37' cy='41' r='4.6' fill='rgba(255,255,255,0.3)'/%3E%3Ccircle cx='50' cy='48' r='3.6' fill='rgba(0,0,0,0.36)'/%3E%3C/svg%3E");
  background-size: 56px 56px;
  background-position: 0 0;
  z-index: 1;
  pointer-events: none;
  animation: fl-grain-shift 14s linear infinite;
  -webkit-mask-image: none;
  mask-image: none;
  opacity: 0.95;
}
.fl-grain-dots {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Ccircle cx='10' cy='12' r='3.4' fill='rgba(255,255,255,0.48)'/%3E%3Ccircle cx='26' cy='8' r='2.8' fill='rgba(0,0,0,0.44)'/%3E%3Ccircle cx='40' cy='16' r='3.8' fill='rgba(255,255,255,0.4)'/%3E%3Ccircle cx='8' cy='30' r='3' fill='rgba(0,0,0,0.4)'/%3E%3Ccircle cx='23' cy='28' r='3.6' fill='rgba(255,255,255,0.42)'/%3E%3Ccircle cx='38' cy='34' r='2.9' fill='rgba(0,0,0,0.38)'/%3E%3Ccircle cx='14' cy='42' r='3.2' fill='rgba(255,255,255,0.36)'/%3E%3Ccircle cx='32' cy='44' r='2.7' fill='rgba(0,0,0,0.42)'/%3E%3C/svg%3E");
  background-size: 48px 48px;
  animation: fl-grain-shift 9s linear infinite reverse;
  opacity: 0.85;
}
.fl-water.is-grain.is-empty::before,
.fl-water.is-grain.is-empty::after { content: none; animation: none; }
.fl-water.is-empty .fl-grain-dots { display: none; }
@keyframes fl-grain-settle {
  0%, 100% { background-position: 0 0; }
  50% { background-position: -6px 1px; }
}
@keyframes fl-grain-shift {
  from { background-position: 0 0; }
  to { background-position: -28px -18px; }
}

.fl-water-band {
  --fl-band: #c43c46;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to top, var(--fl-band), transparent);
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--fl-band) 78%, transparent) 0%,
    transparent 100%
  );
}
@keyframes fl-wave-x {
  from { background-position: 0 0; }
  to { background-position: -72px 0; }
}
@keyframes fl-bub-a {
  from { background-position: 0 0; }
  to { background-position: 0 -64px; }
}
@keyframes fl-bub-b {
  from { background-position: 16px 0; }
  to { background-position: 16px -80px; }
}
@keyframes fl-bub-c {
  from { background-position: -20px 0; }
  to { background-position: -20px -56px; }
}
.fl-bubbles.is-flow-l i:nth-child(1) { animation: fl-bub-l1 5.5s linear infinite; }
.fl-bubbles.is-flow-l i:nth-child(2) { animation: fl-bub-l2 7s linear infinite; }
.fl-bubbles.is-flow-l i:nth-child(3) { animation: fl-bub-l3 8.5s linear infinite; }
.fl-bubbles.is-flow-r i:nth-child(1) { animation: fl-bub-r1 5.5s linear infinite; }
.fl-bubbles.is-flow-r i:nth-child(2) { animation: fl-bub-r2 7s linear infinite; }
.fl-bubbles.is-flow-r i:nth-child(3) { animation: fl-bub-r3 8.5s linear infinite; }
@keyframes fl-bub-l1 { from { background-position: 0 0; } to { background-position: -72px -64px; } }
@keyframes fl-bub-l2 { from { background-position: 16px 0; } to { background-position: -56px -80px; } }
@keyframes fl-bub-l3 { from { background-position: -20px 0; } to { background-position: -92px -56px; } }
@keyframes fl-bub-r1 { from { background-position: 0 0; } to { background-position: 72px -64px; } }
@keyframes fl-bub-r2 { from { background-position: 16px 0; } to { background-position: 88px -80px; } }
@keyframes fl-bub-r3 { from { background-position: -20px 0; } to { background-position: 52px -56px; } }

.fl-tank.fl-offline .fl-water { opacity: 0.4; }

.fl-tank.is-safety-trip {
  border-color: var(--fl-danger);
  animation: fl-tank-safety 1.1s ease-in-out infinite;
}
@keyframes fl-tank-safety {
  0%, 100% { box-shadow: 0 0 0 0 rgba(196, 60, 70, 0.1); }
  50% { box-shadow: 0 0 0 5px rgba(196, 60, 70, 0.4); }
}

.fl-tint {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.fl-tint-sw {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.fl-tint-sw.is-on { border-color: var(--fl-text); }
.fl-tint input[type="color"] {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
}

.fl-lid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: stretch;
}
.fl-lid .fl-ctrl,
.fl-valves .fl-ctrl {
  width: 228px;
  max-width: 100%;
}
.fl-lid .fl-ctrl[data-role="light"] { order: 1; }
.fl-lid .fl-ctrl[data-role="co2"] { order: 2; }
.fl-lid .fl-ctrl[data-role="cooler"] { order: 3; }
.fl-lid .fl-ctrl[data-role="fog"] { order: 4; }

.fl-inwell {
  position: absolute;
  right: 0.35rem;
  top: 0.4rem;
  bottom: 0.4rem;
  transform: none;
  z-index: 3;
  width: min(228px, max(9.25rem, 46%));
  max-width: 46%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 0.35rem;
  pointer-events: none;
}
.fl-inwell.has-floor { justify-content: flex-end; }
.fl-inwell-mid,
.fl-inwell-floor {
  pointer-events: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.28rem;
  width: 100%;
  max-width: 100%;
}
.fl-inwell-mid { flex-direction: row; }
.fl-inwell-mid .fl-ctrl[data-role="pump"] { order: 1; }
.fl-inwell-mid .fl-ctrl[data-role="circulation"] { order: 2; }
.fl-inwell-floor {
  flex-direction: column;
  width: 100%;
  align-items: flex-end;
}
.fl-ctrl.is-inwell {
  width: 228px;
  max-width: 100%;
  padding: 0 0 0.22rem;
  background: color-mix(in srgb, var(--fl-surface) 90%, transparent);
  box-shadow: 0 1px 6px rgba(26, 33, 30, 0.12);
}
.fl-ctrl.is-inwell .fl-ch-host { padding: 0.06rem 0.3rem; }
.fl-ctrl.is-inwell .fl-pipe-label,
.fl-ctrl.is-inwell .fl-ctrl-rules { padding-left: 0.3rem; padding-right: 0.3rem; }
.fl-ctrl.is-inwell .fl-seg {
  margin-left: 0.3rem;
  margin-right: 0.3rem;
  width: calc(100% - 0.6rem);
  padding-left: 0;
  padding-right: 0;
}
.fl-ctrl.is-inwell .fl-pipe-label {
  font-size: 0.72rem;
}
.fl-ctrl.is-inwell .fl-seg button {
  padding: 0.12rem 0.32rem;
  font-size: 0.68rem;
}
.fl-ctrl.is-inwell .fl-ctrl-rules { display: none; }

.fl-under {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.5rem;
  align-items: stretch;
}
.fl-under .fl-ctrl {
  width: auto;
  max-width: none;
  flex: 1 1 228px;
}
.fl-under .fl-ctrl[data-role="heater"] { order: 0; }

.fl-spec {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  padding: 0.45rem 0.55rem 0.4rem;
  background: var(--fl-surface);
  border: 1px solid var(--fl-border);
  border-radius: 12px;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  overflow: visible;
}
a.fl-spec:hover { text-decoration: none; color: inherit; }
.fl-spec-head {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--fl-muted);
  letter-spacing: 0.02em;
}
.fl-spec-nag {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.28rem 0.35rem;
  font-size: 0.72rem;
  line-height: 1.25;
  color: var(--fl-warn);
  background: color-mix(in srgb, var(--fl-warn) 12%, var(--fl-surface));
  border-radius: 8px;
}
.fl-spec-nag .fl-ico { flex: 0 0 auto; width: 0.95rem; height: 0.95rem; }
.fl-spec-nag span { flex: 1 1 auto; min-width: 0; }
.fl-spec-nag [data-spec-dark-nag-hide] { flex: 0 0 auto; margin: 0; padding: 0.1rem 0.4rem; }
.fl-spec-body {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  min-width: 0;
}
.fl-spec .fl-sat-art {
  flex: 0 0 44px;
  width: 44px;
  align-self: center;
}
.fl-spec .fl-sat-brick {
  width: 44px;
  height: 32px;
  border-radius: 9px;
  gap: 4px;
  padding: 0 6px;
}
.fl-spec .fl-sat-led {
  width: 6px;
  height: 6px;
}
.fl-spec-plot {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: auto;
  overflow: visible;
}
.fl-spec-plot .spec-plot {
  width: 100%;
  height: auto;
}
.fl-spec-plot .spec-frame {
  height: 96px;
  flex: 0 0 96px;
}
.fl-spec-plot .spec-svg {
  height: 96px;
}
.fl-spec-plot .spectrum-empty {
  font-size: 0.78rem;
  color: var(--fl-muted);
}

.spec-plot {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-width: 0;
}
.spec-frame {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 72px;
  overflow: visible;
}
.spec-svg {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--fl-bg);
  border-radius: 10px;
}
.spec-grid {
  stroke: var(--fl-border);
  stroke-width: 1;
}
.spec-tick { stroke: var(--fl-muted); stroke-width: 1.2; }
.spec-lead {
  stroke: var(--fl-muted);
  stroke-width: 1;
  stroke-dasharray: 2.5 3;
  stroke-opacity: 0.45;
}
.spec-ylabel {
  fill: var(--fl-muted);
  font-size: 8px;
  font-family: inherit;
  paint-order: stroke fill;
  stroke: var(--fl-surface);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.spec-glow, .spec-area { pointer-events: none; }
.spec-grid, .spec-tick, .spec-lead { vector-effect: non-scaling-stroke; }
.spec-hits { position: absolute; inset: 0; pointer-events: none; }
.spec-hit {
  position: absolute;
  width: 13px;
  height: 13px;
  margin: -6.5px 0 0 -6.5px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(26, 33, 30, 0.12);
  pointer-events: auto;
  cursor: crosshair;
  padding: 0;
}
.spec-hit.is-on { transform: scale(1.28); box-shadow: 0 0 0 2px color-mix(in srgb, var(--fl-accent) 28%, transparent); }
.spec-nm {
  display: flex;
  justify-content: space-between;
  padding: 0.12rem 0 0;
  font-size: 0.62rem;
  color: var(--fl-muted);
  font-variant-numeric: tabular-nums;
}
.spec-tip {
  position: absolute;
  z-index: 12;
  pointer-events: none;
  background: var(--fl-surface);
  color: var(--fl-text);
  border: 1px solid var(--fl-border);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(26, 33, 30, 0.14);
  padding: 0.4rem 0.65rem;
  font-size: 0.8rem;
  white-space: nowrap;
}
.spec-tip .ts-tip-val { display: flex; align-items: baseline; gap: 0.25rem; }
.spec-tip .ts-tip-unit { font-size: 0.75rem; color: var(--fl-muted); }
.spec-tip .ts-tip-time { font-size: 0.72rem; color: var(--fl-muted); margin-top: 0.12rem; }
.spectrum-empty { font-size: 0.82rem; color: var(--fl-muted); }

.fl-reeds {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: flex-end;
}

.fl-reed {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.12rem;
  min-width: 2.2rem;
  color: var(--fl-muted);
  font-size: 0.65rem;
  line-height: 1.1;
}
.fl-reed .fl-ico { width: 12px; height: 12px; }
.fl-reed.ok { color: var(--fl-muted); }
.fl-reed.alarm {
  color: var(--fl-danger);
  animation: fl-pulse 1.2s ease-in-out infinite;
}
.fl-reed.err { color: var(--fl-warn); }
.fl-reed.off { color: #b7c0bc; opacity: 0.7; }

.fl-ico {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: -3px;
}
.fl-ico[class*="fl-ico--"] {
  background-color: currentColor;
  -webkit-mask: var(--fl-ico-mask) center / contain no-repeat;
  mask: var(--fl-ico-mask) center / contain no-repeat;
}
.fl-ico--compressor { --fl-ico-mask: url("/images/roles/compressor.png?v=1.0.96"); }
.fl-ico--fan { --fl-ico-mask: url("/images/roles/fan.png?v=1.0.96"); }
.fl-ico--pressure { --fl-ico-mask: url("/images/roles/pressure.png?v=1.0.96"); }
.fl-ico--pump { --fl-ico-mask: url("/images/roles/pump.png?v=1.0.96"); }
.fl-ico--heater { --fl-ico-mask: url("/images/roles/heater.png?v=1.0.96"); }
.fl-ico--pair { --fl-ico-mask: url("/images/roles/pair.png?v=1.0.96"); }
.fl-ico--light { --fl-ico-mask: url("/images/roles/light.png?v=1.0.96"); }
.fl-ico--temperature { --fl-ico-mask: url("/images/roles/temperature.png?v=1.0.96"); }
.fl-ico--uv { --fl-ico-mask: url("/images/roles/uv.png?v=1.0.96"); }
.fl-ico--water { --fl-ico-mask: url("/images/roles/water.png?v=1.0.96"); }
.fl-ico--fill { --fl-ico-mask: url("/images/roles/fill.png?v=1.0.96"); }
.fl-ico--drain { --fl-ico-mask: url("/images/roles/drain.png?v=1.0.96"); }
.fl-ico--co2 { --fl-ico-mask: url("/images/roles/co2.png?v=1.0.96"); }
.fl-ico--refresh { --fl-ico-mask: url("/images/roles/refresh.png?v=1.0.96"); }
.fl-ico--rule { --fl-ico-mask: url("/images/roles/rule.png?v=1.0.96"); }
.fl-ico--safety { --fl-ico-mask: url("/images/roles/safety.png?v=1.0.96"); }
.fl-ico--timer { --fl-ico-mask: url("/images/roles/timer.png?v=1.0.96"); }
.fl-ico--schedule { --fl-ico-mask: url("/images/roles/schedule.png?v=1.0.96"); }
.fl-ico--command { --fl-ico-mask: url("/images/roles/command.png?v=1.0.96"); }
.fl-ico--sensor { --fl-ico-mask: url("/images/roles/sensor.png?v=1.0.96"); }
.fl-ico--notify { --fl-ico-mask: url("/images/roles/notify.png?v=1.0.96"); }
.fl-ico--link { --fl-ico-mask: url("/images/roles/link.png?v=1.0.96"); }
.fl-ico--chain { --fl-ico-mask: url("/images/roles/chain.png?v=1.0.96"); }
.fl-ico--download { --fl-ico-mask: url("/images/roles/download.png?v=1.0.98"); }
.fl-ico--upload { --fl-ico-mask: url("/images/roles/upload.png?v=1.0.98"); }
.fl-ico--wifi-none { --fl-ico-mask: url("/images/status/wifi_none.png?v=1.0.97"); }
.fl-ico--wifi-low { --fl-ico-mask: url("/images/status/wifi_low.png?v=1.0.97"); }
.fl-ico--wifi-medium { --fl-ico-mask: url("/images/status/wifi_medium.png?v=1.0.97"); }
.fl-ico--wifi-high { --fl-ico-mask: url("/images/status/wifi_high.png?v=1.0.97"); }
.fl-ico--wifi-off { --fl-ico-mask: url("/images/status/wifi_off.png?v=1.0.97"); }
.fl-ico--wifi-problem { --fl-ico-mask: url("/images/status/wifi_problem.png?v=1.0.97"); }
.fl-ico--battery-low { --fl-ico-mask: url("/images/status/battery_low.png?v=1.0.97"); }
.fl-ico--battery-half { --fl-ico-mask: url("/images/status/battery_half.png?v=1.0.97"); }
.fl-ico--battery-full { --fl-ico-mask: url("/images/status/battery_full.png?v=1.0.97"); }
.fl-ico--battery-charge { --fl-ico-mask: url("/images/status/battery_charge.png?v=1.0.97"); }
.fl-ico--warning { --fl-ico-mask: url("/images/status/warning.png?v=1.0.99"); color: var(--fl-warn); }
.fl-ico--online { --fl-ico-mask: url("/images/status/online.png?v=1.0.99"); color: var(--fl-accent); }
.fl-ico--offline { --fl-ico-mask: url("/images/status/offline.png?v=1.0.99"); color: var(--fl-warn); }
.fl-ico--settings { --fl-ico-mask: url("/images/nav/settings.png?v=1.0.99"); }
.fl-ico--theme { --fl-ico-mask: url("/images/nav/theme.png?v=1.0.103"); }
.fl-ico--master { --fl-ico-mask: url("/images/roles/master.png?v=1.0.107"); }
.fl-ico--module { --fl-ico-mask: url("/images/roles/module.png?v=1.0.107"); }
.fl-ico--channel { --fl-ico-mask: url("/images/roles/channel.png?v=1.0.107"); }
.fl-ico--unbind { --fl-ico-mask: url("/images/roles/unbind.png?v=1.0.117"); }
.fl-ico--span { --fl-ico-mask: url("/images/roles/span.png?v=1.0.117"); }
.fl-ico--power { --fl-ico-mask: url("/images/roles/power.png?v=1.0.119"); }
.fl-ico--copy { --fl-ico-mask: url("/images/roles/copy.png?v=1.0.121"); }
.fl-ico--terminal { --fl-ico-mask: url("/images/roles/terminal.png?v=1.0.121"); }
.fl-ico--filter { --fl-ico-mask: url("/images/roles/filter.png?v=1.0.131"); }
.fl-ico--events { --fl-ico-mask: url("/images/roles/events.png?v=1.0.131"); }
.fl-ico.is-muted { opacity: 0.55; }
.fl-h2 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.fl-h2 .fl-ico,
.fl-ctor-title .fl-ico {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--fl-accent);
  vertical-align: 0;
}
.fl-num {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
}
.fl-num .fl-ico {
  width: 0.85em;
  height: 0.85em;
  vertical-align: 0;
}
.fl-ico.is-live {
  color: var(--fl-accent);
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--fl-accent) 55%, transparent));
}
.fl-ico-reed { width: 10px; height: 10px; }
.fl-pipe-label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.fl-pipe-label span { line-height: 1.25; }
.fl-host-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  min-width: 0;
}
.fl-host-mark .fl-ico--master,
.fl-host-mark .fl-ico--module {
  color: var(--fl-accent);
}
.fl-host-name { min-width: 0; }
.fl-host-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72em;
  letter-spacing: 0.04em;
  color: var(--fl-muted);
  white-space: nowrap;
}
.fl-host-split {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.85rem 0 0.45rem;
  padding: 0.35rem 0;
  color: var(--fl-muted);
  font-size: 0.82rem;
  font-weight: 650;
}
.fl-host-split::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--fl-border);
}
.fl-host-split .fl-host-mark { flex-shrink: 0; }
.fl-ch-rule {
  display: inline-flex;
  margin-left: 0.15rem;
}
.fl-ch-rule .fl-ico {
  color: var(--fl-accent);
}
.fl-ch-rule.is-glow .fl-ico {
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--fl-accent) 70%, transparent));
}
.fl-ch-rule.is-glow.is-safety .fl-ico {
  color: var(--fl-accent);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--fl-accent) 70%, transparent));
}
.fl-sat-host {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fl-accent);
}
.fl-sat-host .fl-ico {
  width: 40px;
  height: 40px;
}
.fl-chart-head h3 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: nowrap;
}
.fl-meter {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--fl-text);
  background: var(--fl-surface);
  border: 1px solid var(--fl-border);
  border-radius: 999px;
  padding: 0.15rem 0.45rem 0.15rem 0.3rem;
  max-width: none;
  overflow: visible;
}
.fl-meter-host {
  display: inline-flex;
  align-items: center;
  margin-left: 0.12rem;
  line-height: 0;
}
.fl-meter-host .fl-ico {
  width: 0.78rem;
  height: 0.78rem;
  color: var(--fl-accent);
}
.fl-meter.is-glow {
  --fl-meter-glow: #c43c46;
  border-color: color-mix(in srgb, var(--fl-meter-glow) 45%, var(--fl-border));
}
.fl-meter.is-glow .fl-ico {
  color: var(--fl-meter-glow);
  filter:
    drop-shadow(0 0 3px var(--fl-meter-glow))
    drop-shadow(0 0 8px color-mix(in srgb, var(--fl-meter-glow) 75%, transparent));
  animation: fl-meter-glow 1.6s ease-in-out infinite;
}
@keyframes fl-meter-glow {
  0%, 100% {
    filter:
      drop-shadow(0 0 2px var(--fl-meter-glow))
      drop-shadow(0 0 7px color-mix(in srgb, var(--fl-meter-glow) 55%, transparent));
  }
  50% {
    filter:
      drop-shadow(0 0 5px var(--fl-meter-glow))
      drop-shadow(0 0 14px color-mix(in srgb, var(--fl-meter-glow) 90%, transparent));
  }
}
.fl-room {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.25rem 0 0.4rem;
}

.fl-valves {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0.5rem;
  min-width: 228px;
  max-width: 240px;
}
.fl-valves .fl-ctrl[data-role="fill"] { order: 1; }
.fl-valves .fl-ctrl[data-role="drain"] { order: 3; margin-top: auto; }
.fl-valves .fl-ctrl[data-role="uv"] { order: 4; }

.fl-ctrl {
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  width: 228px;
  max-width: 100%;
  padding: 0 0 0.35rem;
  border: 1px solid var(--fl-border);
  border-radius: 12px;
  background: var(--fl-surface);
}
.fl-ch-host {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.06rem 0.35rem;
  margin: 0;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.1;
  color: var(--fl-muted);
  background: color-mix(in srgb, var(--fl-accent) 12%, var(--fl-bg));
  border-bottom: 1px solid var(--fl-border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.fl-ch-host .fl-ico {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  color: var(--fl-accent);
}
.fl-ch-host span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.fl-ch-host .fl-host-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.04em;
}
.fl-ctrl > .fl-pipe-label,
.fl-ctrl > .fl-ctrl-rules {
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}
.fl-ctrl > .fl-seg {
  margin-left: 0.4rem;
  margin-right: 0.4rem;
  width: calc(100% - 0.8rem);
  box-sizing: border-box;
}
.fl-ctrl > .fl-pipe-label { padding-top: 0.12rem; }
.fl-ctrl.is-flow {
  border-color: var(--fl-accent);
  box-shadow: 0 0 0 3px var(--fl-accent-dim);
}
.fl-ctrl.is-flow .fl-pipe-label { color: var(--fl-accent); font-weight: 600; }
.fl-ctrl.is-flow[data-role="circulation"] {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px color-mix(in srgb, #3b82f6 26%, transparent);
}
.fl-ctrl.is-flow[data-role="circulation"] .fl-pipe-label { color: #2563eb; }
.fl-ctrl.is-flow[data-role="circulation"] .fl-dot.on { background: #3b82f6; }
.fl-ctrl.is-flow[data-role="heater"] {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px color-mix(in srgb, #dc2626 26%, transparent);
}
.fl-ctrl.is-flow[data-role="heater"] .fl-pipe-label { color: #dc2626; }
.fl-ctrl.is-flow[data-role="heater"] .fl-dot.on { background: #dc2626; }
.fl-ctrl.is-flow[data-role="uv"] {
  border-color: #7c5cff;
  box-shadow: 0 0 0 3px color-mix(in srgb, #7c5cff 28%, transparent);
}
.fl-ctrl.is-flow[data-role="uv"] .fl-pipe-label { color: #6d4dff; }
.fl-ctrl.is-flow[data-role="uv"] .fl-dot.on { background: #7c5cff; }
.fl-ctrl.is-flow[data-role="co2"] {
  background: #161310;
  border-color: #f59e0b;
  box-shadow:
    0 0 0 3px color-mix(in srgb, #f59e0b 30%, transparent),
    0 0 16px color-mix(in srgb, #f59e0b 42%, transparent);
  animation: fl-co2-glow 1.4s ease-in-out infinite;
}
.fl-ctrl.is-flow[data-role="co2"] .fl-pipe-label { color: #fdba74; }
.fl-ctrl.is-flow[data-role="co2"] .fl-dot.on {
  background: #f59e0b;
  box-shadow: 0 0 8px #f59e0b;
}
.fl-ctrl.is-flow[data-role="co2"] .fl-ico.is-live {
  color: #f59e0b;
  filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.85));
}
.fl-ctrl.is-flow[data-role="co2"] .fl-seg {
  background: #1f1812;
  border-color: color-mix(in srgb, #f59e0b 42%, #1f1812);
}
.fl-ctrl.is-flow[data-role="co2"] .fl-seg button { color: #d6b896; }
.fl-ctrl.is-flow[data-role="co2"] .fl-seg-thumb {
  background: color-mix(in srgb, #f59e0b 28%, #1f1812);
}
.fl-ctrl.is-flow[data-role="co2"] .fl-seg button.is-on {
  background: none;
  color: #fbbf24;
}
@keyframes fl-co2-glow {
  0%, 100% {
    box-shadow:
      0 0 0 3px color-mix(in srgb, #f59e0b 22%, transparent),
      0 0 10px color-mix(in srgb, #f59e0b 32%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 4px color-mix(in srgb, #f59e0b 40%, transparent),
      0 0 22px color-mix(in srgb, #f59e0b 55%, transparent);
  }
}
.fl-ctrl.is-locked { background: #f4f6f5; }
.fl-ctrl.is-locked .fl-seg button:disabled { opacity: 0.4; }
.fl-ctrl.is-safety {
  border-color: var(--fl-danger);
  background: #fdf4f4;
  animation: fl-tank-safety 1.1s ease-in-out infinite;
}
.fl-ctrl.is-safety.is-flow .fl-pipe-label { color: var(--fl-danger); }
.fl-ctrl.is-safety .fl-dot.on { background: var(--fl-danger); }
.fl-ctrl.is-safety.is-flow[data-role] {
  border-color: var(--fl-danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fl-danger) 28%, transparent);
}
.fl-ctrl.is-safety.is-flow[data-role] .fl-pipe-label { color: var(--fl-danger); }
.fl-ctrl.is-safety.is-flow[data-role] .fl-dot.on { background: var(--fl-danger); }
.fl-ctrl-safety {
  margin: 0 0 0.25rem;
  padding: 0.2rem 0.4rem 0.18rem;
  background: var(--fl-danger);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1;
  animation: fl-safety-bar 1.6s ease-in-out infinite;
}
@keyframes fl-safety-bar {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.22); }
}

.fl-ch-rules { margin-top: 0.25rem; display: flex; flex-direction: column; gap: 0.2rem; }
.fl-chip-rule {
  font-size: 0.7rem;
  background: var(--fl-accent-dim);
  color: var(--fl-accent);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: normal;
  text-align: left;
  line-height: 1.25;
  max-width: 100%;
}
.fl-rule-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  max-width: 100%;
}
.fl-rule-scheme {
  font-size: 0.68rem;
  color: var(--fl-muted);
  padding-left: 0.15rem;
  margin-top: 0.2rem;
  line-height: 1.2;
}
.fl-chip-rule.is-run {
  background: var(--fl-accent);
  color: #fff;
}
.fl-chip-rule.is-run .fl-dot { background: #fff; }
.fl-chip-rule.is-off {
  background: var(--fl-border);
  color: var(--fl-muted);
}
.fl-chip-rule.is-skip {
  background: #ece8e4;
  color: #6e6258;
  box-shadow: inset 0 0 0 1px #d4cbc3;
}
.fl-chip-rule.is-safety {
  background: var(--fl-danger);
  color: #fff;
}
.fl-chip-rule.is-safety .fl-dot { background: #fff; }

.fl-ctrl-rules {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  margin: 0.28rem 0 0.2rem;
}
.fl-ctrl-rules .fl-chip-rule {
  width: 100%;
  max-width: 100%;
  font-size: 0.65rem;
  border-radius: 8px;
  white-space: normal;
}
.fl-fill-label .fl-num {
  font-size: 1.45rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--fl-text);
}
.fl-fill-label .fl-unit { color: var(--fl-muted); }

.fl-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  position: relative;
  border: 1px solid var(--fl-border);
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--fl-muted) 8%, var(--fl-surface));
}
.fl-seg-thumb {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: var(--fl-accent-dim);
  pointer-events: none;
  transition: left 0.28s ease, background 0.2s ease;
}
.fl-seg[data-mode="on"] .fl-seg-thumb,
.fl-seg[data-mode="off"] .fl-seg-thumb {
  left: calc(50% + 1px);
}

.fl-seg button {
  position: relative;
  z-index: 1;
  border: none;
  background: none;
  padding: 0.28rem 0.28rem;
  font-size: 0.75rem;
  cursor: pointer;
  color: var(--fl-muted);
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  transition: color 0.22s ease, opacity 0.22s ease;
}

.fl-seg button.is-on {
  background: none;
  color: var(--fl-accent);
  font-weight: 600;
}

.fl-seg button .fl-ico--rule,
.fl-seg button .fl-ico--power {
  width: 0.95rem;
  height: 0.95rem;
  flex-shrink: 0;
}

.fl-seg button.is-pwr-off .fl-ico--power {
  opacity: 1;
  color: var(--fl-muted);
}
.fl-seg button .fl-ico--power.is-live {
  animation: fl-pwr-pulse 1.35s ease-in-out infinite;
}
@keyframes fl-pwr-pulse {
  0%, 100% {
    opacity: 0.55;
    filter: drop-shadow(0 0 1px color-mix(in srgb, var(--fl-accent) 35%, transparent));
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--fl-accent) 85%, transparent));
  }
}

.fl-seg button:disabled { opacity: 0.45; cursor: not-allowed; }

.fl-seg.is-wait { opacity: 0.7; }

.fl-pipe-label {
  font-size: 0.72rem;
  color: var(--fl-muted);
  margin-bottom: 0.15rem;
}

.fl-scene {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
}

.fl-gear {
  position: relative;
  border: 1px solid var(--fl-border);
  background: var(--fl-surface);
  color: var(--fl-text);
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fl-gear:hover { background: var(--fl-accent-dim); }

.fl-theme {
  position: relative;
  border: 1px solid var(--fl-border);
  background: var(--fl-surface);
  color: var(--fl-text);
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--fl-radius-sm);
  cursor: pointer;
}
.fl-theme:hover { background: var(--fl-accent-dim); }
.fl-theme[aria-pressed="true"] {
  color: var(--fl-accent);
  background: var(--fl-accent-dim);
}

html[data-fl-theme="dark"] .fl-ctrl.is-locked { background: #32362f; }
html[data-fl-theme="dark"] .fl-ctrl.is-safety { background: #3a2a28; }
html[data-fl-theme="dark"] .fl-ch-host {
  background: color-mix(in srgb, var(--fl-accent) 16%, var(--fl-surface));
  color: var(--fl-text);
}
html[data-fl-theme="dark"] input,
html[data-fl-theme="dark"] select,
html[data-fl-theme="dark"] textarea {
  background: var(--fl-surface);
  color: var(--fl-text);
  border-color: var(--fl-border);
}

.fl-inv {
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius);
  padding: 0.85rem;
  margin-bottom: 1rem;
  background: var(--fl-bg);
}
.fl-inv h3 { margin: 0 0 0.35rem; font-size: 1rem; }
.fl-inv-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--fl-border);
  font-size: 0.9rem;
  flex-wrap: wrap;
}
.fl-inv-row:last-child { border-bottom: none; }
.fl-inv-row > span:first-child { flex: 1; }
.fl-inv-row .fl-btn { padding: 0.28rem 0.55rem; font-size: 0.82rem; font-weight: 500; }
.fl-inv-acts {
  display: flex;
  gap: 0.3rem;
  flex: 0 0 auto;
}
.fl-room-edit-title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}
.fl-layout-add {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.15rem;
}

.fl-spaces {
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}
.fl-scheme {
  --fl-cell-w: 7.4rem;
  --fl-cell-h: 4.7rem;
  --fl-cell-gap: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}
.fl-scheme-start {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.fl-scheme-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  border: 1.5px dashed color-mix(in srgb, var(--fl-accent) 45%, var(--fl-border));
  background: color-mix(in srgb, var(--fl-accent) 8%, var(--fl-surface));
  color: var(--fl-accent);
  border-radius: 14px;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.fl-scheme-plus.is-wide { min-height: 3.4rem; width: 100%; }
.fl-scheme-plus:hover {
  background: color-mix(in srgb, var(--fl-accent) 16%, var(--fl-surface));
}
.fl-scheme-split {
  border: 0;
  border-top: 1px solid var(--fl-border);
  margin: 0.25rem 0 0;
}
.fl-space {
  border: 1px solid var(--fl-border);
  border-radius: 16px;
  padding: 0.7rem 0.75rem 0.85rem;
  background: color-mix(in srgb, var(--fl-surface) 88%, var(--fl-bg));
}
.fl-space-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}
.fl-space-name {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fl-muted);
  flex: 1;
  min-width: 0;
}
.fl-space-name input {
  font: inherit;
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fl-text);
  border: 1px solid var(--fl-border);
  border-radius: 10px;
  padding: 0.35rem 0.55rem;
  background: var(--fl-surface);
  width: 100%;
}
.fl-space-sensors { margin-bottom: 0.55rem; }
.fl-drop {
  position: relative;
  min-height: 2.1rem;
  border: 1px dashed transparent;
  border-radius: 10px;
  padding: 0.2rem;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.fl-drop-lab {
  display: none;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fl-muted);
  padding: 0.1rem 0.25rem;
}
.fl-scheme .fl-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--fl-cell-w));
  gap: var(--fl-cell-gap);
  align-items: start;
  justify-content: start;
}
.fl-scheme .fl-lid.fl-slots,
.fl-scheme .fl-under.fl-slots,
.fl-scheme .fl-space-sensors.fl-slots,
.fl-scheme .fl-reeds.fl-slots {
  margin: 0;
}
.fl-scheme .fl-inwell.fl-slots {
  position: absolute;
  inset: auto;
  top: var(--fl-cell-gap);
  right: var(--fl-cell-gap);
  bottom: auto;
  left: auto;
  width: calc(var(--fl-cell-w) * 2 + var(--fl-cell-gap));
  max-width: none;
  min-width: 0;
  transform: none;
  pointer-events: auto;
  display: grid;
  grid-template-columns: repeat(2, var(--fl-cell-w));
  justify-content: start;
  align-content: start;
  z-index: 4;
}
.fl-scheme .fl-valves.fl-slots {
  min-width: 0;
  max-width: none;
  grid-template-columns: repeat(auto-fill, var(--fl-cell-w));
}
.fl-scheme .fl-well-meters {
  position: absolute;
  top: var(--fl-cell-gap);
  left: var(--fl-cell-gap);
  right: auto;
  width: calc(var(--fl-cell-w) * 2 + var(--fl-cell-gap));
  display: grid;
  grid-template-columns: repeat(2, var(--fl-cell-w));
  grid-auto-rows: var(--fl-cell-h);
  gap: var(--fl-cell-gap);
  align-content: start;
  justify-content: start;
  z-index: 3;
  pointer-events: auto;
}
.fl-scheme .fl-space-sensors.fl-slots {
  margin-bottom: var(--fl-cell-gap);
}
.fl-scheme .fl-tank {
  gap: var(--fl-cell-gap);
}
.fl-scheme .fl-tank.is-editing .fl-sil {
  min-height: calc(var(--fl-cell-h) * 3 + var(--fl-cell-gap) * 4);
}
.fl-scheme .fl-tank.is-editing .fl-fill-label { display: none; }
.fl-scheme .fl-under-spec { margin-top: var(--fl-cell-gap); }
.fl-scheme .fl-drop {
  box-sizing: border-box;
  width: var(--fl-cell-w);
  height: auto;
  min-height: var(--fl-cell-h);
  max-height: none;
  padding: 0.32rem 0.36rem 0.3rem;
  border: 1px dashed color-mix(in srgb, var(--fl-accent) 32%, var(--fl-border));
  background: color-mix(in srgb, var(--fl-surface) 82%, transparent);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.16rem;
  overflow: visible;
}
.fl-scheme .fl-drop-lab {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  min-height: 1.05rem;
  padding: 0;
  line-height: 1.15;
}
.fl-scheme .fl-drop-lab .fl-ico {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--fl-accent);
  vertical-align: 0;
  flex-shrink: 0;
}
.fl-scheme .fl-drop-lab > span:last-child {
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fl-scheme .fl-drop-body {
  flex: 1;
  min-height: 1.1rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  overflow: visible;
}
.fl-scheme .fl-drop-fill,
.fl-scheme .fl-drop-water,
.fl-scheme .fl-drop-inside {
  position: relative;
  inset: auto;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
}
.fl-scheme .fl-drop-fill.is-full { pointer-events: auto; }
.fl-drop-room {
  min-height: 2.4rem;
  border-color: color-mix(in srgb, var(--fl-accent) 28%, var(--fl-border));
  margin-bottom: 0.15rem;
}
.fl-space.is-start {
  background: transparent;
}
.fl-drop-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.7rem;
  min-height: 1.7rem;
  margin: 0.15rem;
  border: 1px dashed color-mix(in srgb, var(--fl-accent) 40%, var(--fl-border));
  background: transparent;
  color: var(--fl-accent);
  border-radius: 8px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.fl-drop-plus.is-off,
.fl-drop-plus:disabled {
  color: var(--fl-muted);
  border-color: var(--fl-border);
  opacity: 0.38;
  cursor: default;
  pointer-events: none;
}
.fl-drop-x,
.fl-drop-ico,
.fl-tank-gear,
.fl-tank-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--fl-muted);
  cursor: pointer;
  flex-shrink: 0;
}
.fl-drop-x .fl-ico,
.fl-drop-ico .fl-ico,
.fl-tank-gear .fl-ico,
.fl-tank-save .fl-ico {
  width: 0.95rem;
  height: 0.95rem;
}
.fl-drop-x:hover,
.fl-tank-gear:hover,
.fl-tank-save:hover { color: var(--fl-text); }
.fl-range-pop,
.fl-tank-pop {
  position: absolute;
  z-index: 12;
  top: calc(100% + 4px);
  left: 0;
  min-width: 16.5rem;
  padding: 0.7rem;
  background: var(--fl-surface);
  border: 1px solid var(--fl-border);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
}
.fl-tank-pop { right: 0; left: auto; }
.fl-tank-chrome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.65rem;
  position: relative;
  order: -1;
  margin: 0 0 0.15rem;
}
.fl-tank-chrome.is-pop { z-index: 11; }
.fl-primary-tog {
  margin: 0;
  font-size: 0.82rem;
}
.fl-size-pick {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
}
.fl-tank-save { color: var(--fl-accent); }
.fl-size-btn {
  min-width: 0;
  height: auto;
  padding: 0.22rem 0.55rem;
  border: 1px solid var(--fl-border);
  background: var(--fl-surface);
  border-radius: 8px;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--fl-muted);
  white-space: nowrap;
}
.fl-size-btn.is-on {
  color: var(--fl-accent);
  border-color: var(--fl-accent);
  background: var(--fl-accent-dim);
}
.fl-tank.is-editing .fl-tank-title[data-f="name"] {
  width: 100%;
  font: inherit;
  font-weight: 600;
  color: inherit;
  border: 0;
  background: transparent;
  padding: 0;
}
.fl-drop-fill {
  position: absolute;
  inset: 18% 12% 12%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 3;
}
.fl-drop-fill.is-full { pointer-events: none; }
.fl-drop-fill.is-full .fl-drop-plus { display: none; }
.fl-drop-fill .fl-drop-plus {
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 999px;
  font-size: 1.8rem;
  background: color-mix(in srgb, var(--fl-surface) 70%, transparent);
}
.fl-drop-inside {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  right: 0.35rem;
  z-index: 3;
}
.fl-drop-water {
  position: absolute;
  left: 0.35rem;
  right: 0.35rem;
  bottom: 2.4rem;
  z-index: 3;
}
.fl-drop.is-hot {
  border-color: var(--fl-accent);
  background: color-mix(in srgb, var(--fl-accent) 14%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--fl-accent) 25%, transparent);
}
.fl-drop.is-blocked {
  border-color: color-mix(in srgb, var(--fl-danger, #c43c46) 50%, var(--fl-border));
  background: color-mix(in srgb, var(--fl-danger, #c43c46) 8%, transparent);
}
.fl-drop.is-full .fl-drop-plus { opacity: 0.35; }
.fl-scheme .fl-drop-plus,
.fl-scheme .fl-drop-fill .fl-drop-plus {
  width: 1.7rem;
  height: 1.7rem;
  min-width: 1.7rem;
  min-height: 1.7rem;
  margin: 0;
  padding: 0;
  font-size: 1rem;
  line-height: 1;
  border-radius: 8px;
  background: transparent;
}
.fl-scheme .fl-drop.is-full .fl-drop-plus { display: none; }
.fl-scheme .fl-drop.is-pop {
  overflow: visible;
  z-index: 10;
}
.fl-scheme .fl-drop-plus.is-off,
.fl-scheme .fl-drop-plus:disabled {
  color: var(--fl-muted);
  border-color: var(--fl-border);
}
.fl-scheme .fl-drop .fl-ctrl {
  max-width: 100%;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  overflow: hidden;
}
.fl-scheme .fl-drop .fl-host-name,
.fl-scheme .fl-drop .fl-host-id,
.fl-scheme .fl-drop .fl-ch-host { display: none; }
.fl-scheme .fl-drop .fl-ctrl-rules,
.fl-scheme .fl-drop .fl-ctrl-safety,
.fl-scheme .fl-drop .fl-seg { display: none; }
.fl-scheme .fl-drop .fl-pipe-label {
  font-size: 0.68rem;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fl-scheme .fl-drop .fl-meter,
.fl-scheme .fl-drop .fl-bind,
.fl-scheme .fl-drop .fl-reed {
  margin: 0;
  max-width: 100%;
  font-size: 0.68rem;
  padding: 0.08rem 0.28rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fl-zone-pick {
  position: absolute;
  z-index: 8;
  top: 100%;
  left: 0;
  min-width: 10rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.4rem;
  background: var(--fl-surface);
  border: 1px solid var(--fl-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.fl-tank.is-editing .fl-seg { pointer-events: none; }
.fl-tank-tune {
  margin-top: 0.5rem;
  font-size: 0.88rem;
}
.fl-tank-tune summary {
  cursor: pointer;
  color: var(--fl-muted);
  font-weight: 650;
}
.fl-inv-row[draggable="true"] { cursor: grab; }
.fl-gear.is-save {
  width: auto;
  padding: 0 0.85rem;
  font-weight: 650;
  color: var(--fl-accent);
}

.fl-bind {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.35rem 0;
  font-size: 0.88rem;
}
.fl-bind span { flex: 1; }
.fl-bind select { width: auto; min-width: 6.5rem; }
.fl-bind input[data-f="ch-name"] {
  flex: 1;
  min-width: 5rem;
  max-width: 11rem;
  padding: 0.22rem 0.4rem;
  border: 1px solid var(--fl-border);
  border-radius: 8px;
  background: var(--fl-surface);
}

.fl-bind-temp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0.1rem 0 0.45rem;
  font-size: 0.82rem;
  color: var(--fl-muted);
}
.fl-bind-temp span { flex: none; }
.fl-bind-temp input[type="number"] {
  width: 4.5rem;
  min-width: 4.5rem;
  padding: 0.28rem 0.4rem;
}
.fl-bind-temp input[type="color"] {
  width: 2rem;
  min-width: 2rem;
  height: 1.7rem;
  padding: 0.12rem;
  cursor: pointer;
}

.fl-drawer-back {
  position: fixed;
  inset: 0;
  background: rgba(26, 33, 30, 0.28);
  z-index: 80;
}

.fl-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: min(420px, 100%);
  height: 100%;
  background: var(--fl-surface);
  border-left: 1px solid var(--fl-border);
  z-index: 81;
  padding: 1.15rem;
  overflow: auto;
}

.fl-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.fl-login-box {
  width: 100%;
  max-width: 400px;
  background: var(--fl-surface);
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius);
  padding: 1.5rem;
}

.fl-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.75rem; }

.fl-chip {
  border: 1px solid var(--fl-border);
  background: var(--fl-surface);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: 0.82rem;
  cursor: pointer;
}

.fl-chip.is-on {
  background: var(--fl-accent-dim);
  border-color: var(--fl-accent);
  color: var(--fl-accent);
}

button.fl-chip { font: inherit; }

.fl-offline .fl-water { opacity: 0.4; }
.fl-offline .fl-seg { pointer-events: none; opacity: 0.55; }

@keyframes fl-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.fl-edit {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  font-size: 1.25rem;
  text-align: left;
  cursor: text;
  color: inherit;
}

.fl-num {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 1.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  cursor: pointer;
  color: inherit;
}

.fl-toggle-row {
  display: flex;
  gap: 0.65rem;
  align-items: center;
}
.fl-toggle-row .fl-grow { flex: 1; min-width: 0; }
.fl-card-item { margin-bottom: 0.5rem; }
.fl-sect { margin-top: 1rem; }
.fl-ctor-sub {
  margin: 1rem 0 0.4rem;
  font-size: 1rem;
}

.fl-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.fl-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}
.fl-toggle-ui {
  width: 48px;
  height: 28px;
  border-radius: 999px;
  background: var(--fl-border);
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  transition: background 0.2s ease;
}
.fl-toggle-ui::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--fl-knob);
  box-shadow: 0 1px 3px rgba(26, 33, 30, 0.18);
  transition: transform 0.2s ease;
}
.fl-toggle input:checked + .fl-toggle-ui,
.fl-switch input:checked + .fl-toggle-ui { background: var(--fl-accent); }
.fl-toggle input:checked + .fl-toggle-ui::after,
.fl-switch input:checked + .fl-toggle-ui::after {
  transform: translateX(20px);
  background: var(--fl-knob-on);
}
.fl-toggle input:focus-visible + .fl-toggle-ui,
.fl-switch input:focus-visible + .fl-toggle-ui {
  outline: 2px solid var(--fl-accent);
  outline-offset: 3px;
}
.fl-toggle input:disabled + .fl-toggle-ui,
.fl-switch input:disabled + .fl-toggle-ui { opacity: 0.45; }

.fl-tpl { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.fl-rule-if {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.85rem 0 0.4rem;
  font-size: 0.82rem;
  color: var(--fl-muted);
  font-weight: 650;
}
.fl-rule-if .fl-ico {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--fl-accent);
}
.fl-src-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.75rem;
}
.fl-src-pick {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.15rem;
  padding: 0.28rem 0.7rem 0.28rem 0.5rem;
  border: 1px solid var(--fl-border);
  border-radius: 999px;
  background: var(--fl-surface);
  color: var(--fl-text);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 650;
  cursor: pointer;
}
.fl-src-pick .fl-ico {
  width: 1rem;
  height: 1rem;
  color: var(--fl-accent);
  flex-shrink: 0;
}
.fl-src-pick.is-on {
  background: var(--fl-accent-dim);
  border-color: var(--fl-accent);
  color: var(--fl-accent-ink);
}
.fl-dur {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  width: 100%;
}
.fl-ctor-grid > [data-look-intv],
.fl-ctor-grid > [data-int-wrap],
.fl-ctor-grid > [data-chain-dur-cell] {
  display: contents;
}
.fl-ctor-grid > [data-look-intv][hidden],
.fl-ctor-grid > [data-int-wrap][hidden],
.fl-ctor-grid > [data-chain-dur-cell][hidden] {
  display: none;
}
.fl-rule-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto minmax(4.5rem, 0.7fr);
  gap: 0.45rem;
  align-items: stretch;
}
.fl-rule-row select, .fl-rule-row input {
  border: 1px solid var(--fl-border);
  border-radius: 8px;
  padding: 0.5rem 0.55rem;
  background: var(--fl-surface);
  min-width: 0;
}
.fl-when { display: flex; gap: 0.25rem; }
.fl-when-btn {
  width: 2.2rem;
  border: 1px solid var(--fl-border);
  border-radius: 8px;
  background: var(--fl-surface);
  color: var(--fl-muted);
  cursor: pointer;
  font-size: 1rem;
}
.fl-when-btn.is-on {
  background: var(--fl-accent-dim);
  color: var(--fl-accent);
  border-color: var(--fl-accent);
}
.fl-rule-form {
  margin-top: 0.25rem;
  padding: 0.85rem;
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius-sm);
  background: var(--fl-bg);
}
.fl-expr-host {
  margin-top: 0;
}
.fl-expr-group {
  margin: 0;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--fl-border);
  border-radius: 12px;
  background: var(--fl-surface);
}
.fl-expr-head {
  display: flex;
  gap: 0.45rem;
  align-items: stretch;
}
.fl-expr-head .fl-ctor-cell { flex: 1; min-height: 4.2rem; }
.fl-expr-items {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0.5rem 0;
}
.fl-expr-leaf {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.fl-expr-add {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.fl-expr-del {
  flex-shrink: 0;
  align-self: center;
}
.fl-expr-leaf .fl-expr-del { align-self: flex-end; }
.fl-ctor-switch {
  min-height: 0;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 0.55rem 0.75rem;
}
.fl-check {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.92rem;
}

.fl-switch {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 550;
  user-select: none;
}
.fl-switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}
.fl-switch .fl-toggle-ui { flex-shrink: 0; }
.fl-switch-card {
  width: 100%;
  box-sizing: border-box;
  min-height: 3.25rem;
  margin: 0.45rem 0 0.7rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--fl-border);
  border-radius: 14px;
  background: var(--fl-surface);
}
.fl-switch-card .fl-toggle-ui {
  width: 56px;
  height: 32px;
}
.fl-switch-card .fl-toggle-ui::after {
  width: 26px;
  height: 26px;
  top: 3px;
  left: 3px;
}
.fl-switch-card input:checked + .fl-toggle-ui::after { transform: translateX(24px); }
.fl-switch-copy {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}
.fl-switch-copy strong {
  font-size: 1rem;
  font-weight: 700;
}
.fl-switch-copy em {
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--fl-muted);
}

.fl-pick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem;
}
.fl-pick-opt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.85rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--fl-border);
  border-radius: 12px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 650;
  background: var(--fl-surface);
  user-select: none;
}
.fl-pick-opt input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}
.fl-pick-opt:has(input:checked) {
  border-color: var(--fl-accent);
  background: color-mix(in srgb, var(--fl-accent) 14%, var(--fl-surface));
  color: var(--fl-accent);
  box-shadow: 0 0 0 1px var(--fl-accent);
}
.fl-pick-opt:focus-within {
  outline: 2px solid var(--fl-accent);
  outline-offset: 2px;
}

.fl-ctor {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.fl-ctor-title {
  margin: 0;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.fl-ctor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}
.fl-ctor-cell {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.32rem;
  min-width: 0;
  min-height: 4.6rem;
  margin: 0;
  padding: 0.6rem 0.7rem;
  background: var(--fl-surface);
  border: 1px solid var(--fl-border);
  border-radius: 12px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.fl-ctor-cell:hover,
.fl-ctor-cell:focus-within {
  border-color: color-mix(in srgb, var(--fl-accent) 32%, var(--fl-border));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--fl-accent) 8%, transparent);
}
.fl-ctor-cell > span:first-child {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  color: var(--fl-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.fl-ctor-cell input:not([type="checkbox"]),
.fl-ctor-cell select {
  width: 100%;
  min-width: 0;
  border: 0;
  padding: 0.15rem 0;
  background: transparent;
  color: var(--fl-text);
  font-weight: 600;
}
.fl-ctor-cell .fl-dur input:not([type="checkbox"]) {
  width: 4.8rem;
  flex: 0 0 4.8rem;
  min-width: 4.8rem;
  min-height: 1.6rem;
}
.fl-ctor-cell .fl-dur select {
  width: auto;
  flex: 1 1 auto;
  min-width: 5.2rem;
  min-height: 1.6rem;
}
.fl-ctor-cell input[type="time"] { min-height: 1.6rem; }
.fl-ctor-cell .fl-when {
  display: flex;
  gap: 0.3rem;
  margin-top: auto;
}
.fl-ctor-cell .fl-when-btn {
  flex: 1 1 0;
  width: auto;
  min-width: 2rem;
  min-height: 2rem;
  border-radius: 10px;
}

.fl-ctor-grid-3 {
  grid-template-columns: minmax(0, 1.35fr) minmax(7.2rem, 0.85fr) minmax(0, 0.9fr);
}
.fl-ctor-grid-fit {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr));
}
.fl-ctor-cell.fl-ctor-switch {
  min-height: 0;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 0.55rem 0.75rem;
}
.fl-ctor-grid > .fl-ctor-cell:only-child {
  grid-column: 1 / -1;
}
.fl-ctor-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.85rem;
}
.fl-ctor-actions .fl-btn {
  flex: 1 1 8rem;
  min-height: 3.1rem;
  border-radius: 12px;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.022em;
}
.fl-ctor-actions .fl-btn:active { transform: scale(0.985); }
.fl-ctor-actions .fl-btn-ghost {
  background: var(--fl-bg);
  border: none;
  color: var(--fl-text);
  font-weight: 600;
}
.fl-ctor-actions .fl-btn-ghost:hover { background: var(--fl-border); }
.fl-ctor-actions .fl-btn-ghost:active { background: var(--fl-border); }
.fl-ctor-actions .fl-btn-danger {
  flex: 1 1 100%;
  min-height: 2.75rem;
  border-radius: 12px;
  padding: 0 1rem;
  font-size: 1.05rem;
  font-weight: 400;
  color: #ff3b30;
}
.fl-ctor-embed { margin-top: 0.85rem; }
.fl-ctor > .fl-muted {
  margin: 0;
}
.fl-week + .fl-ctor-grid {
  margin-top: 0.55rem;
}

.fl-kind-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr));
  gap: 0.35rem;
  padding: 0.3rem;
  background: var(--fl-bg);
  border-radius: 16px;
}
.fl-kind {
  min-height: 3.35rem;
  padding: 0.4rem 0.3rem 0.35rem;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--fl-text);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  line-height: 1.15;
  transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.fl-kind .fl-ico {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--fl-accent);
  vertical-align: 0;
}
.fl-kind:hover { background: color-mix(in srgb, var(--fl-surface) 82%, var(--fl-text) 8%); }
.fl-kind:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}
.fl-kind:disabled:hover { background: transparent; }
.fl-kind.is-on {
  background: var(--fl-surface);
  color: var(--fl-text);
  box-shadow: 0 0.5px 0.5px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.08);
}
html[data-fl-theme="dark"] .fl-kind.is-on {
  box-shadow: 0 0.5px 0.5px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.35);
}

.fl-ios-add-wrap { margin-top: 0.85rem; }
.fl-ios-add-wrap .fl-ctor-sub {
  margin: 0 0 0.5rem;
  padding: 0 0.15rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fl-muted);
}
.fl-ios-add {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--fl-border);
  border: 1px solid var(--fl-border);
  border-radius: 12px;
  overflow: hidden;
}
.fl-ios-add-btn {
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  border: none;
  background: var(--fl-surface);
  color: var(--fl-text);
  border-radius: 0;
  min-height: 2.75rem;
  padding: 0.45rem 0.75rem;
  font-size: 0.94rem;
  font-weight: 400;
  letter-spacing: -0.022em;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.65rem;
  text-align: left;
  transition: background 0.12s ease;
}
.fl-ios-add-btn:hover { background: var(--fl-bg); }
.fl-ios-add-btn:active { background: var(--fl-border); }
.fl-ios-add-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}
.fl-ios-add-btn:disabled:hover,
.fl-ios-add-btn:disabled:active { background: var(--fl-surface); }
.fl-ios-add-plus {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--fl-accent);
  color: var(--fl-on-accent);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.4rem;
  text-align: center;
  flex-shrink: 0;
}
.fl-ios-add-ico {
  width: 1.4rem;
  height: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--fl-accent);
}
.fl-ios-add-ico .fl-ico {
  width: 1.25rem;
  height: 1.25rem;
  vertical-align: 0;
}
.fl-ios-add-label {
  min-width: 0;
  line-height: 1.2;
}
.fl-ios-add-btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 380px) {
  .fl-ios-add { grid-template-columns: 1fr; }
  .fl-ios-add-btn:last-child:nth-child(odd) { grid-column: auto; }
}

.fl-spoiler {
  margin-top: 1rem;
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius);
  background: var(--fl-surface);
  padding: 0;
  overflow: hidden;
}
.fl-spoiler > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
  padding: 0.9rem 1.05rem;
  font-weight: 700;
  font-size: 1rem;
  user-select: none;
}
.fl-spoiler > summary::-webkit-details-marker { display: none; }
.fl-spoiler > summary::before {
  content: '';
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid var(--fl-muted);
  border-bottom: 2px solid var(--fl-muted);
  transform: rotate(-45deg);
  transition: transform 0.18s ease;
  flex-shrink: 0;
}
.fl-spoiler[open] > summary::before { transform: rotate(45deg); }
.fl-spoiler-chip {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 650;
  color: var(--fl-muted);
  background: var(--fl-bg);
  border-radius: 999px;
  padding: 0.18rem 0.55rem;
  max-width: 58%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fl-spoiler-chip.is-on {
  color: var(--fl-accent);
  background: var(--fl-accent-dim);
}
.fl-spoiler-body {
  padding: 0 1.05rem 1.05rem;
  border-top: 1px solid var(--fl-border);
  animation: fl-spoiler-in 0.22s ease;
}
.fl-spoiler-sm {
  margin-top: 0.15rem;
  border-radius: 12px;
}
.fl-spoiler-sm > summary {
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.55rem 0.75rem;
  color: var(--fl-muted);
}
.fl-spoiler-sm .fl-spoiler-body { padding: 0 0.75rem 0.75rem; }

.fl-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.3rem;
}
.fl-wc-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(7.6rem, 1fr));
  gap: 0.35rem;
  align-items: start;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.2rem;
  margin-top: 0.15rem;
}
.fl-wc-day-col {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-width: 0;
}
.fl-wc-day-col .fl-day { width: 100%; }
.fl-wc-days {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.55rem;
}
.fl-wc-day-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
}
.fl-wc-day-lab {
  flex: 0 0 1.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--fl-muted);
}
.fl-wc-starts {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.28rem;
  align-items: stretch;
  min-width: 0;
}
.fl-wc-start {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  background: var(--fl-bg);
  border: 1px solid var(--fl-border);
  border-radius: 10px;
  padding: 0.06rem 0.08rem 0.06rem 0.28rem;
  min-width: 0;
}
.fl-wc-start input[type="time"] {
  border: none;
  background: transparent;
  min-height: 1.55rem;
  min-width: 0;
  width: 100%;
  flex: 1;
  padding: 0;
  font-size: 0.82rem;
}
.fl-wc-start-del {
  border: none;
  background: transparent;
  color: var(--fl-muted);
  flex: 0 0 1.45rem;
  width: 1.45rem;
  height: 1.55rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1;
  padding: 0;
}
.fl-wc-start-del:hover {
  color: var(--fl-danger);
  background: color-mix(in srgb, var(--fl-danger) 16%, var(--fl-surface));
}
.fl-wc-starts [data-wc-start-add] {
  min-height: 1.7rem;
  width: 100%;
  padding: 0.15rem 0.3rem;
  font-size: 0.72rem;
}
.fl-day {
  min-height: 2.5rem;
  border: 1px solid var(--fl-border);
  background: var(--fl-bg);
  border-radius: 10px;
  padding: 0;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--fl-text);
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}
.fl-day:hover { transform: translateY(-1px); }
.fl-day.is-on {
  background: var(--fl-accent-dim);
  border-color: var(--fl-accent);
  color: var(--fl-accent);
}

@keyframes fl-spoiler-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.fl-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--fl-border);
  background: var(--fl-surface);
  border-radius: var(--fl-radius-sm);
  width: 2.25rem;
  height: 2.25rem;
  cursor: pointer;
  color: var(--fl-text);
}
.fl-bell .fl-ico,
.fl-gear .fl-ico,
.fl-theme .fl-ico {
  width: 1.15rem;
  height: 1.15rem;
  vertical-align: 0;
}
.fl-bell-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: var(--fl-danger);
  color: #fff;
  font-size: 0.65rem;
  line-height: 1rem;
  text-align: center;
  padding: 0 0.2rem;
}

.fl-inbox {
  position: absolute;
  right: 1.5rem;
  top: 3.6rem;
  width: min(360px, calc(100vw - 2rem));
  background: var(--fl-surface);
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius);
  z-index: 15;
  padding: 0.75rem;
  max-height: 70vh;
  overflow: auto;
}

.fl-spark { width: 100%; height: 120px; color: var(--fl-accent); }

#tab-charts {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}
.fl-charts { width: 100%; }
.fl-charts-head {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--fl-bg);
  padding: 0.4rem 1rem 0.35rem;
  border-bottom: 1px solid var(--fl-border);
}
.fl-charts-range {
  padding: 0;
}
.fl-charts-range .ts-range-wrap {
  position: relative;
}
.fl-charts-range .ts-toolbar {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 0.45rem;
  margin: 0;
  width: 100%;
}
.ts-range-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 12;
  width: min(22.5rem, 100%);
  padding: 0.9rem;
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius);
  background: var(--fl-surface);
  box-shadow: 0 12px 32px rgba(26, 33, 30, 0.16);
}
.ts-range-pop-title {
  margin: 0 0 0.65rem;
  font-size: 0.95rem;
  font-weight: 700;
}
.ts-range-pop-row {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) 6.2rem;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 0.45rem;
}
.ts-range-pop-row span {
  font-size: 0.78rem;
  font-weight: 650;
  color: var(--fl-muted);
}
.ts-range-pop-row input {
  min-width: 0;
  min-height: 2.45rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--fl-border);
  border-radius: 10px;
  background: var(--fl-bg);
  color: var(--fl-text);
  font-weight: 600;
  font-size: 0.92rem;
}
.ts-range-pop-hint {
  margin: 0.15rem 0 0;
  font-size: 0.75rem;
  color: var(--fl-muted);
}
.ts-range-pop-err {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  font-weight: 650;
  color: #c2410c;
}
.ts-range-apply {
  display: block;
  width: 100%;
  margin-top: 0.7rem;
  min-height: 2.55rem;
  border: 0;
  border-radius: 12px;
  background: var(--fl-accent);
  color: var(--fl-on-accent);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
}
.fl-charts-hosts {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
  margin-top: 0;
  padding: 0;
}
.fl-chart-dock {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}
.fl-chart-basic {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}
.fl-chart-devices {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.45rem;
}
.fl-chart-devices .fl-chart-host {
  flex: 1 1 8rem;
  width: auto;
}
.fl-charts-bar {
  display: flex;
  align-items: stretch;
  gap: 0.45rem;
}
.fl-charts-bar .fl-chart-host {
  flex: 0 1 auto;
  min-width: 8.5rem;
  padding-left: 0.9rem;
  padding-right: 0.9rem;
}
.fl-chart-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 0.4rem);
  z-index: 14;
  padding: 0.75rem;
  border: 1px solid var(--fl-border);
  border-radius: 10px;
  background: var(--fl-surface);
  box-shadow: 0 12px 32px rgba(26, 33, 30, 0.16);
}
.fl-chart-panel .fl-charts-range { margin-bottom: 0.55rem; }
.fl-chart-panel .fl-charts-range .ts-toolbar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.4rem;
  width: 100%;
}
.fl-charts .fl-chart-panel .ts-range-btn {
  width: 100%;
  min-height: 2.35rem;
  padding: 0.35rem 0.05rem;
  font-size: 0.68rem;
}
.fl-chart-preset-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 0.4rem;
  margin-bottom: 0.55rem;
}
.fl-chart-preset-row .fl-chart-host {
  flex: none;
  width: 100%;
  min-width: 0;
}
.fl-chart-saved-wrap {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-width: 0;
}
.fl-chart-saved-wrap .fl-chart-host {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.fl-chart-preset-x {
  width: 2rem;
  border: 1px solid var(--fl-border);
  border-left: 0;
  border-radius: 0 10px 10px 0;
  background: var(--fl-surface);
  color: var(--fl-muted);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
}
.fl-chart-saved-wrap:has(.is-on) .fl-chart-preset-x {
  border-color: var(--fl-accent);
  color: var(--fl-accent);
  background: var(--fl-accent-dim);
}
.fl-chart-name {
  margin-top: 0.65rem;
  padding: 0.7rem;
  border: 1px solid var(--fl-border);
  border-radius: 10px;
  background: var(--fl-bg);
}
.fl-chart-name input {
  display: block;
  width: 100%;
  min-height: 2.4rem;
  margin-bottom: 0.5rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--fl-border);
  border-radius: 10px;
  background: var(--fl-surface);
  color: var(--fl-text);
  font: inherit;
  font-weight: 650;
}
.fl-chart-name .fl-btn { width: 100%; }
.fl-chart-pick-title {
  margin: 0 0 0.45rem;
  font-size: 0.92rem;
  font-weight: 700;
}
.fl-chart-pick-list {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  max-height: 16rem;
  overflow: auto;
}
.fl-chart-pick-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  font-size: 0.84rem;
  font-weight: 650;
}
.fl-chart-pick-row > span:last-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fl-chart-pick-row .fl-toggle-ui {
  width: 36px;
  height: 20px;
}
.fl-chart-pick-row .fl-toggle-ui::after {
  width: 14px;
  height: 14px;
  top: 3px;
  left: 3px;
}
.fl-chart-pick-row .fl-toggle input:checked + .fl-toggle-ui::after {
  transform: translateX(16px);
}
.fl-chart-pick-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.7rem;
}
.fl-chart-pick-act .fl-btn {
  flex: 1 1 7.5rem;
  min-height: 2.4rem;
  padding: 0.45rem 0.55rem;
  font-size: 0.86rem;
  white-space: nowrap;
}
.fl-chart-host {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  flex: 1 1 0;
  min-width: 0;
  min-height: 2.35rem;
  padding: 0.5rem 0.4rem;
  border: 1px solid var(--fl-border);
  border-radius: 10px;
  background: var(--fl-surface);
  color: var(--fl-muted);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
}
.fl-charts-hosts:has(.fl-chart-host:only-child) .fl-chart-host {
  flex: 0 0 auto;
  min-width: 7.5rem;
}
.fl-chart-host > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fl-chart-host .fl-ico {
  width: 1.05rem;
  height: 1.05rem;
  flex-shrink: 0;
  color: inherit;
}
.fl-chart-host .fl-host-id { color: inherit; }
.fl-chart-host.is-on {
  background: var(--fl-accent-dim);
  border-color: var(--fl-accent);
  color: var(--fl-accent);
}
.fl-chart-host.is-on .fl-ico { color: var(--fl-accent); }
.fl-chart-export {
  margin: 1.15rem 1.5rem 1.5rem;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius);
  background: var(--fl-surface);
}
.fl-chart-export .fl-h2 { margin: 0 0 0.35rem; }
.fl-chart-export .fl-muted { margin: 0 0 0.75rem; }
.fl-export-keys {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: 0.45rem 0.65rem;
  margin-bottom: 0.85rem;
}
.fl-export-key.fl-switch {
  margin: 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--fl-border);
  border-radius: 12px;
  background: var(--fl-bg);
  gap: 0.55rem;
  font-size: 0.88rem;
  min-width: 0;
}
.fl-export-key .fl-toggle-ui {
  width: 44px;
  height: 26px;
}
.fl-export-key .fl-toggle-ui::after {
  width: 20px;
  height: 20px;
}
.fl-export-key.fl-switch input:checked + .fl-toggle-ui::after { transform: translateX(18px); }
.fl-export-key .fl-switch-copy { min-width: 0; }
.fl-export-key .fl-switch-copy strong {
  font-size: 0.86rem;
  font-weight: 650;
}
.fl-export-key--events {
  grid-column: 1 / -1;
}
.fl-export-act {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}
.fl-export-act .fl-btn {
  box-sizing: border-box;
  height: 2.7rem;
  min-height: 2.7rem;
  padding: 0.45rem 1rem;
}
.fl-export-act [data-export-msg] { margin: 0; }
.fl-chart-card {
  background: var(--fl-surface);
  border-top: 1px solid var(--fl-border);
  padding: 0.4rem 1rem;
  overflow: visible;
}
.fl-charts .ts-chart {
  margin-left: -1rem;
  margin-right: -1rem;
  width: calc(100% + 2rem);
}
.fl-chart-head {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.2rem;
  min-width: 0;
  min-height: 1.7rem;
}
.fl-chart-head h3 {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  min-width: 0;
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.2;
  flex-wrap: nowrap;
}
.fl-chart-head .fl-ico {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: var(--fl-accent);
}
.fl-chart-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fl-chart-now {
  display: inline-flex;
  align-items: baseline;
  gap: 0.12rem;
  flex-shrink: 0;
  background: var(--fl-accent-dim);
  color: var(--fl-accent);
  padding: 0.16rem 0.48rem;
  border-radius: 10px;
  font-size: 1.12rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fl-accent) 18%, transparent);
}
.fl-chart-unit {
  margin-left: 0.12rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--fl-accent);
  opacity: 0.75;
}
.fl-charts .ts-chart-body {
  position: relative;
  cursor: crosshair;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.fl-charts .ts-chart-body.is-selecting {
  cursor: col-resize;
  touch-action: none;
}
.fl-charts .ts-svg { position: relative; z-index: 1; height: 176px; display: block; width: 100%; }
.fl-charts .ts-zoom-overlay { pointer-events: none; }
.fl-charts .ts-zoom-fill { fill: rgba(92, 99, 106, 0.45); }
.fl-charts .ts-zoom-bar {
  stroke: #5c636a;
  stroke-width: 4px;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.fl-charts .ts-zoom-tip {
  z-index: 12;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.16s ease, transform 0.18s ease;
}
.fl-charts .ts-zoom-tip.is-show {
  opacity: 1;
  visibility: visible;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .fl-charts .ts-zoom-tip { transition: none; }
}
.fl-charts .ts-grain { pointer-events: none; }
.fl-charts .ts-grid { stroke: var(--fl-border); }
.fl-charts .ts-tick { stroke: var(--fl-muted); stroke-width: 1.2; }
.fl-charts .ts-grid,
.fl-charts .ts-tick,
.fl-charts .ts-crosshair-v { vector-effect: non-scaling-stroke; }
.fl-charts .ts-ylabel, .fl-charts .ts-xlabel {
  fill: var(--fl-muted);
  font-size: 8px;
  font-family: inherit;
  paint-order: stroke fill;
  stroke: var(--fl-surface);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.fl-charts .ts-evt-v {
  stroke: currentColor;
  color: var(--fl-text);
  stroke-width: 1.35;
  stroke-dasharray: 3 3.5;
  stroke-opacity: 0.78;
  vector-effect: non-scaling-stroke;
}
.fl-charts .ts-evt-v.is-hit {
  stroke-opacity: 1;
  stroke-width: 1.85;
}
.fl-charts .ts-evt-join {
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
}
.fl-charts .ts-evt-icos {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 176px;
  pointer-events: none;
  z-index: 3;
}
.fl-charts .ts-evt-ico {
  position: absolute;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: var(--fl-surface);
  box-sizing: border-box;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  cursor: pointer;
  transform: translate(-50%, 0);
}
.fl-charts .ts-evt-ico.is-hit {
  border-width: 2px;
}
.fl-charts .ts-evt-glyph {
  width: 11px;
  height: 11px;
  flex: 0 0 11px;
  background-color: currentColor;
  -webkit-mask: var(--ts-evt-mask) center / contain no-repeat;
  mask: var(--ts-evt-mask) center / contain no-repeat;
}
.fl-charts .ts-evt-dur {
  position: absolute;
  transform: translate(-50%, -130%);
  font-size: 0.62rem;
  line-height: 1;
  color: var(--fl-text-dim, var(--fl-muted, #8a8270));
  white-space: nowrap;
  pointer-events: none;
}
.fl-charts .ts-evt-tick { display: none; }
.fl-charts .ts-evt-dot { display: none; }
.fl-charts .ts-whisker { pointer-events: none; }
.fl-charts .ts-tip-evt {
  margin-top: 0.2rem;
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--fl-text);
  max-width: 14rem;
  white-space: normal;
}
.fl-charts .ts-range-btn {
  width: 100%;
  border-radius: 10px;
  padding: 0.5rem 0.2rem;
  font-size: 0.78rem;
  border: 1px solid var(--fl-border);
  background: var(--fl-surface);
  color: var(--fl-muted);
  cursor: pointer;
}
.fl-charts .ts-range-btn.active {
  background: var(--fl-accent-dim);
  color: var(--fl-accent);
  border-color: var(--fl-accent);
  font-weight: 650;
}
.fl-charts .chart-tooltip {
  position: absolute;
  z-index: 8;
  pointer-events: none;
  background: var(--fl-surface);
  color: var(--fl-text);
  border: 1px solid var(--fl-border);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(26, 33, 30, 0.14);
  padding: 0.45rem 0.7rem;
  font-size: 0.82rem;
  min-width: 6.5rem;
  white-space: nowrap;
}
.fl-charts .ts-zoom-tip { z-index: 12; }
.fl-charts .ts-tip-val { display: flex; align-items: baseline; gap: 0.25rem; }
.fl-charts .ts-tip-unit { font-size: 0.75rem; color: var(--fl-muted); }
.fl-charts .ts-tip-time { font-size: 0.72rem; color: var(--fl-muted); margin-top: 0.15rem; }
.fl-charts .ts-marker {
  position: absolute;
  right: 0;
  height: 0;
  pointer-events: none;
  z-index: 3;
}
.fl-charts .ts-marker-line {
  position: absolute;
  left: 0;
  right: 8.4rem;
  top: 0;
  border-top: 1.5px dashed var(--fl-accent);
}
.fl-charts .ts-marker-tag {
  position: absolute;
  right: 0;
  top: 0;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
  max-width: 8.2rem;
  padding: 0.14rem 0.45rem;
  border-radius: 999px;
  background: var(--fl-surface);
  border: 1px solid var(--fl-accent);
  color: var(--fl-text);
  font-size: 0.68rem;
  font-weight: 650;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fl-charts .ts-when {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.fl-meter[data-goto-tab],
.fl-air[data-goto-tab],
.fl-unit[data-goto-tab] { cursor: pointer; }

.fl-chart-spec .spec-plot { min-height: 176px; }
.fl-chart-spec .spec-frame { height: 160px; }
.fl-chart-lab {
  display: inline-block;
  margin-top: 0.65rem;
  font-size: 0.85rem;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .fl-toggle-ui, .fl-toggle-ui::after { transition: none; }
  .fl-water { transition: none; }
  .fl-sat { transition: none; }
  .fl-water::before, .fl-water::after, .fl-bubbles i { animation: none; }
  .fl-water.is-grain::before, .fl-water.is-grain::after,
  .fl-grain-dots { animation: none; }
  .fl-reed.alarm, .fl-chip-rule.is-run, .fl-ctrl.is-flow, .fl-dot.pulse, .fl-ctrl-safety,
  .fl-tank.is-safety-trip, .fl-ctrl.is-safety, .fl-show-tag.is-on::before,
  .fl-ctrl.is-flow[data-role="co2"], .fl-seg button .fl-ico--power.is-live { animation: none; }
  .fl-ctor-cell, .fl-kind, .fl-day, .fl-spoiler > summary::before, .fl-ios-add-btn,
  .fl-ctor-actions .fl-btn { transition: none; transform: none; }
  .fl-spoiler-body { animation: none; }
  .fl-day:hover { transform: none; }
}

@media (max-width: 720px) {
  .fl-shell {
    flex-direction: column;
    padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
  }
  .fl-nav {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--fl-border);
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.65rem;
    padding: 0.65rem 1rem;
  }
  .fl-nav #floraNav { display: none; }
  .fl-brand { margin: 0; }
  .fl-brand-sub { display: none; }
  .fl-nav-email {
    margin: 0;
    max-width: 48%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
  }
  .fl-nav-foot {
    margin-top: 0;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.45rem;
  }
  .fl-nav-foot button,
  .fl-nav-foot a.fl-btn {
    width: auto;
    margin-top: 0;
    padding: 0.35rem 0.7rem;
  }
  .fl-dock { display: flex; }
  .fl-shell--device .fl-dock .fl-nav-item { font-size: 0.62rem; }
  .fl-shell--device .fl-card {
    scroll-margin-bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
  }
  .fl-body, .fl-top { padding-left: 1rem; padding-right: 1rem; }
  #tab-charts { margin-left: -1rem; margin-right: -1rem; }
  .fl-charts-head { padding-left: 0.75rem; padding-right: 0.75rem; }
  .fl-chart-card { padding: 0.4rem 0.75rem; }
  .fl-chart-dock { display: none; }
  .fl-charts-hosts:has(.fl-chart-panel:not([hidden])) .fl-chart-dock {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 0.4rem);
    z-index: 14;
    padding: 0.75rem;
    border: 1px solid var(--fl-border);
    border-radius: 10px;
    background: var(--fl-surface);
    box-shadow: 0 12px 32px rgba(26, 33, 30, 0.16);
  }
  .fl-charts-hosts:has(.fl-chart-panel:not([hidden])) .fl-chart-panel {
    position: static;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .fl-chart-dock .fl-charts-range .ts-toolbar {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.4rem;
  }
  .fl-charts .fl-chart-dock .ts-range-btn {
    width: 100%;
    min-height: 2.35rem;
    padding: 0.35rem 0.05rem;
    font-size: 0.68rem;
  }
  .fl-chart-dock .fl-chart-devices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .fl-chart-dock .fl-chart-devices .fl-chart-host {
    width: 100%;
    flex: none;
    min-width: 0;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }
  .fl-charts-bar .fl-chart-host {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
  }
  .fl-chart-panel .fl-chart-preset-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fl-chart-export { padding-left: 0.85rem; padding-right: 0.85rem; margin-left: 0.75rem; margin-right: 0.75rem; }
  .fl-charts .ts-chart {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    width: calc(100% + 1.5rem);
  }
  .fl-charts-range .ts-toolbar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; }
  .fl-charts-hosts { flex-wrap: nowrap; }
  .fl-chart-host { flex: 1 1 0; }
  .fl-rule-row { grid-template-columns: 1fr; }
  .fl-ctor-grid,
  .fl-ctor-grid-3,
  .fl-ctor-grid-fit { grid-template-columns: 1fr; }
  .fl-week { gap: 0.22rem; }
  .fl-wc-week { grid-template-columns: repeat(7, minmax(7.6rem, 1fr)); }
  .fl-day { min-height: 2.2rem; font-size: 0.72rem; }
  .fl-wc-start input[type="time"] { font-size: 16px; }
  .fl-tank-body,
  .fl-show-tank.is-side .fl-tank-body.is-rail { grid-template-columns: 1fr; }
  .fl-valves { flex-direction: row; flex-wrap: wrap; max-width: none; min-width: 0; }
  .fl-ctrl,
  .fl-lid .fl-ctrl,
  .fl-valves .fl-ctrl,
  .fl-ctrl.is-inwell { width: min(228px, 100%); }
  .fl-valves .fl-ctrl[data-role="drain"] { margin-top: 0; }
  .fl-inwell { width: min(228px, max(9.25rem, 70%)); max-width: 70%; }
  .fl-side-rail .fl-inwell {
    position: static;
    width: 100%;
    max-width: none;
    right: auto;
    top: auto;
    bottom: auto;
    align-items: flex-start;
  }
  .fl-fill-label { max-width: calc(100% - 6.5rem); }
}

/* Совместимость с DeviceCloud на /lab: те же имена токенов, без Primer-тени */
:root {
  --bg: var(--fl-bg);
  --surface: var(--fl-surface);
  --text: var(--fl-text);
  --muted: var(--fl-muted);
  --border: var(--fl-border);
  --accent: var(--fl-accent);
  --accent-dim: var(--fl-accent-dim);
  --warn: var(--fl-warn);
  --danger: var(--fl-danger);
  --ok: var(--fl-accent);
  --radius: var(--fl-radius-sm);
  --shadow: none;
}

.card {
  background: var(--fl-surface);
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius);
  box-shadow: none;
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
}
.card h2 { margin: 0 0 0.5rem; font-size: 1rem; font-weight: 600; }

.lab-spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1.15rem;
}
.lab-spec-pane-title {
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.lab-spec-pane { min-width: 0; }
.lab-spec-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  position: relative;
  z-index: 2;
  margin-top: 0.15rem;
}
.lab-spec-card .spec-plot {
  height: auto;
  min-height: 0;
  overflow: visible;
}
.lab-spec-card .spec-frame {
  flex: 0 0 176px;
  height: 176px;
}
.lab-water-title {
  margin: 1.25rem 0 0.65rem;
  font-size: 1.05rem;
  font-weight: 600;
}
@media (max-width: 700px) {
  .lab-spec-grid { grid-template-columns: 1fr; }
}

.field { margin-bottom: 0.75rem; }
.field label, .lab-add-form .lab-field {
  display: block;
  font-size: 0.82rem;
  color: var(--fl-muted);
  margin-bottom: 0.25rem;
}
.field input, .field select,
.lab-add-form input, .lab-add-form select {
  width: 100%;
  border: 1px solid var(--fl-border);
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
  background: var(--fl-surface);
  color: var(--fl-text);
}

.small-muted { color: var(--fl-muted); font-size: 0.88rem; }
.row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.widget-head { justify-content: space-between; margin-bottom: 0.5rem; }
.widget-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.75rem; }
.btn-sm { padding: 0.35rem 0.65rem; font-size: 0.82rem; }
button { color: var(--fl-on-accent); }
.metric-tile {
  background: var(--fl-bg);
  color: var(--fl-text);
  border-radius: 10px;
  padding: 0.85rem;
  text-align: center;
}
.section-tab {
  background: var(--fl-bg);
  color: var(--fl-text);
}
.section-tab.active {
  background: var(--fl-accent-dim);
  color: var(--fl-accent-ink);
}
.btn-action, button.btn-action {
  background: var(--fl-accent);
  color: var(--fl-on-accent);
  border: none;
  border-radius: var(--fl-radius-sm);
  font-weight: 600;
  cursor: pointer;
  padding: 0.55rem 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.btn-action .fl-ico,
button.secondary .fl-ico {
  width: 1.05rem;
  height: 1.05rem;
  color: inherit;
  vertical-align: 0;
}
button.secondary {
  background: var(--fl-surface);
  color: var(--fl-text);
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.pill {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
}
.pill.off { background: var(--fl-bg); color: var(--fl-muted); }
.sensor-chip { text-transform: none; font-size: 0.75rem; color: var(--fl-muted); }

.msg {
  padding: 0.65rem 0.85rem;
  border-radius: var(--fl-radius-sm);
  margin-bottom: 0.85rem;
  font-size: 0.9rem;
}
.msg.ok { background: var(--fl-accent-dim); color: var(--fl-accent-ink); }
.msg.err {
  background: color-mix(in srgb, var(--fl-danger) 16%, var(--fl-surface));
  color: var(--fl-text);
  border: 1px solid color-mix(in srgb, var(--fl-danger) 42%, var(--fl-border));
}
.msg.warn { background: color-mix(in srgb, var(--fl-warn) 18%, var(--fl-surface)); color: var(--fl-warn); }

.tabs {
  display: flex;
  gap: 0.25rem;
  margin: 0.75rem 0 1rem;
  border-bottom: 1px solid var(--fl-border);
}
.tab {
  padding: 0.55rem 0.9rem;
  color: var(--fl-muted);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.tab.active {
  color: var(--fl-accent);
  font-weight: 600;
  border-bottom-color: var(--fl-accent);
}

.lab-add-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-end;
}
.lab-add-form .lab-field { flex: 1 1 120px; min-width: 100px; }
.lab-add-form .lab-field-note { flex: 2 1 160px; }
.lab-recent-list { list-style: none; margin: 0; padding: 0; }
.lab-recent-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--fl-border);
}
.lab-recent-val { font-weight: 600; font-variant-numeric: tabular-nums; }
.lab-del-btn {
  margin-left: auto;
  border: none;
  background: none;
  color: var(--fl-muted);
  cursor: pointer;
}
.lab-widgets-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.75rem;
}
.lab-group-title {
  margin: 0.85rem 0 0.5rem;
  font-size: 0.95rem;
  color: var(--fl-muted);
}

body:has(> .fl-sitebar) {
  display: flex;
  flex-direction: column;
}
.fl-sitebar {
  background: var(--fl-surface);
  border-bottom: 1px solid var(--fl-border);
}
.fl-sitebar-inner,
.fl-sitefoot-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0.7rem 1.25rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.1rem;
}
.fl-sitebar-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
}
.fl-sitebar-brand {
  font-weight: 700;
  color: var(--fl-text);
  text-decoration: none;
}
.fl-sitebar-brand:hover { text-decoration: none; color: var(--fl-text); }
.fl-sitebar-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem 1.1rem;
  flex: 1;
}
.fl-sitebar-nav a {
  color: var(--fl-muted);
  text-decoration: none;
  font-size: 0.92rem;
}
.fl-sitebar-nav a[aria-current="page"],
.fl-sitebar-nav a:hover {
  color: var(--fl-accent);
  text-decoration: none;
}
.fl-sitebar .fl-btn {
  flex-shrink: 0;
}
.fl-sitebar .fl-btn:hover {
  text-decoration: none;
  color: var(--fl-on-accent);
}
.fl-sitefoot {
  border-top: 1px solid var(--fl-border);
  margin-top: auto;
}
.fl-sitefoot-inner {
  padding-top: 1rem;
  padding-bottom: 1.35rem;
  font-size: 0.82rem;
  color: var(--fl-muted);
}
.fl-land {
  max-width: 1120px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 3rem;
  flex: 1 0 auto;
  width: 100%;
}
.fl-land-block { margin: 0 0 2rem; }
.fl-land-block > h2 {
  font-size: 1.15rem;
  margin: 0 0 0.35rem;
}
.fl-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.85rem;
  margin-top: 1rem;
}
.fl-product {
  background: var(--fl-surface);
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius);
  padding: 0.85rem 0.95rem;
}
.fl-product-kind {
  font-size: 0.72rem;
  color: var(--fl-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
}
.fl-product h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}
.fl-product p {
  margin: 0 0 0.7rem;
  color: var(--fl-muted);
  font-size: 0.88rem;
}
.fl-product-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.fl-product-img {
  max-width: 100%;
  height: auto;
  border-radius: var(--fl-radius-sm);
  margin: 0 0 0.75rem;
}
.fl-land.fl-store {
  max-width: 1120px;
}
.fl-store h1 {
  font-size: 2rem;
  letter-spacing: -0.03em;
  margin: 0 0 1.25rem;
}
.fl-store-secs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0 0 1.5rem;
}
.fl-store-sec {
  display: inline-block;
  border: 1px solid var(--fl-border);
  background: var(--fl-surface);
  color: var(--fl-muted);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.fl-store-sec:hover {
  text-decoration: none;
  color: var(--fl-text);
}
.fl-store-sec.is-on {
  background: var(--fl-accent);
  color: var(--fl-on-accent);
  border-color: var(--fl-accent);
}
.fl-store-sec.is-on:hover { color: var(--fl-on-accent); }
.fl-store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem 1.1rem;
}
.fl-store-grid:not(:has(.fl-store-card)) {
  display: block;
}
.fl-store-card {
  display: block;
  color: inherit;
  text-decoration: none;
}
.fl-store-card:hover { text-decoration: none; color: inherit; }
.fl-store-card-media,
.fl-store-hero {
  aspect-ratio: 1;
  background: color-mix(in srgb, var(--fl-muted) 12%, var(--fl-bg));
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 0.75rem;
}
.fl-store-card-media img,
.fl-store-hero img {
  width: 88%;
  height: 88%;
  object-fit: contain;
}
.fl-store-card h3 {
  margin: 0 0 0.25rem;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.fl-store-card p {
  margin: 0;
  color: var(--fl-muted);
  font-size: 0.88rem;
}
.fl-store-hero {
  max-width: 420px;
  margin-bottom: 1.25rem;
}
.fl-land h1 {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}
.fl-land .fl-tag {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 0.75rem;
}
.fl-land .fl-lead {
  color: var(--fl-muted);
  margin: 0 0 1.75rem;
  max-width: 42rem;
}
.fl-land-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-bottom: 2rem;
}
.fl-land-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.fl-land .fl-card h2 { font-size: 1rem; }
.fl-land .fl-card p { margin: 0; color: var(--fl-muted); font-size: 0.88rem; }
.fl-land ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--fl-muted);
}
.fl-auth-alt {
  margin: 1rem 0 0;
  font-size: 0.9rem;
}
.fl-pair-steps {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.fl-pair-steps li {
  border: 1px solid var(--fl-border);
  border-radius: 12px;
  padding: 0.7rem 0.8rem;
  background: var(--fl-surface);
}
.fl-pair-steps b {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.88rem;
}
.event-toast-host {
  position: fixed;
  top: 4.5rem;
  right: 0.75rem;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: min(22rem, calc(100vw - 1.5rem));
  pointer-events: none;
}
.event-toast {
  pointer-events: auto;
  background: var(--fl-surface);
  border: 1px solid var(--fl-border);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  padding: 0.7rem 0.8rem;
}
.event-toast-warn, .event-toast-error, .event-toast-critical {
  border-color: color-mix(in srgb, var(--fl-danger) 50%, var(--fl-border));
  background: color-mix(in srgb, var(--fl-danger) 16%, var(--fl-surface));
  color: var(--fl-text);
}
.event-toast-warn .event-toast-text,
.event-toast-error .event-toast-text,
.event-toast-critical .event-toast-text {
  color: var(--fl-text);
  font-weight: 600;
}
html[data-fl-theme="dark"] .event-toast-warn,
html[data-fl-theme="dark"] .event-toast-error,
html[data-fl-theme="dark"] .event-toast-critical,
html[data-fl-theme="dark"] .fl-msg.err,
html[data-fl-theme="dark"] .msg.err {
  background: color-mix(in srgb, var(--fl-danger) 28%, var(--fl-surface));
  border-color: color-mix(in srgb, var(--fl-danger) 62%, var(--fl-border));
  color: var(--fl-text);
}
.event-toast-time {
  font-size: 0.72rem;
  color: var(--fl-muted);
  margin-bottom: 0.2rem;
}
.event-toast-text {
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--fl-text);
}
.event-toast.is-sticky .event-toast-text { margin-bottom: 0.5rem; }
.event-toast-ack {
  width: 100%;
  border: 1px solid var(--fl-border);
  background: var(--fl-bg);
  color: var(--fl-text);
  border-radius: 8px;
  padding: 0.4rem 0.55rem;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}

.fl-inbox {
  box-shadow: 0 12px 32px rgba(26, 33, 30, 0.12);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.fl-inbox-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 0.85rem 0.55rem;
  border-bottom: 1px solid var(--fl-border);
}
.fl-inbox-head h2 {
  margin: 0;
  font-size: 1rem;
}
.fl-inbox-head .fl-h2 { margin: 0; }
.fl-inbox-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.5rem 0.85rem;
  border-bottom: 1px solid var(--fl-border);
}
.fl-inbox-list {
  padding: 0.35rem 0;
  max-height: 58vh;
  overflow: auto;
}
.fl-inbox-item {
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--fl-border);
  cursor: pointer;
}
.fl-inbox-item:last-child { border-bottom: 0; }
.fl-inbox-item.is-unread {
  background: var(--fl-accent-dim);
}
.fl-inbox-item.is-alert {
  background: color-mix(in srgb, var(--fl-danger) 16%, var(--fl-surface));
  color: var(--fl-text);
}
html[data-fl-theme="dark"] .fl-inbox-item.is-alert {
  background: color-mix(in srgb, var(--fl-danger) 28%, var(--fl-surface));
  color: var(--fl-text);
}
.fl-inbox-item-top {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: baseline;
}
.fl-inbox-del {
  border: 0;
  background: transparent;
  color: var(--fl-muted);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 0.15rem;
}
.fl-inbox-empty { margin: 0.85rem; }

.fl-sf-ch .fl-when { width: 100%; }
.fl-sf-ch .fl-when-btn { font-size: 0.78rem; }

.fl-diag {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1rem;
  margin: 0;
}
.fl-diag dt {
  margin: 0;
  font-size: 0.78rem;
  color: var(--fl-muted);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.fl-diag dt .fl-ico {
  width: 14px;
  height: 14px;
  vertical-align: 0;
}
.fl-diag dd {
  margin: 0.1rem 0 0;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.fl-mem-ok { color: var(--fl-accent); }
.fl-mem-bad { color: var(--fl-warn); }

.fl-chart-card {
  display: block;
}
.fl-chart-grip {
  margin: 0;
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
  border: 0;
  background: transparent;
  color: var(--fl-muted);
  cursor: grab;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.fl-chart-grip:active { cursor: grabbing; }
.fl-chart-card.is-dragging { opacity: 0.45; }
.fl-chart-now {
  display: inline-flex;
  align-items: baseline;
  gap: 0.12rem;
}
.fl-chart-ico {
  display: inline-flex;
  width: 0.95rem;
  height: 0.95rem;
  color: var(--fl-accent);
  opacity: 0.85;
  flex-shrink: 0;
}
.fl-chart-ico svg { width: 100%; height: 100%; display: block; }

.fl-show {
  margin: 0 0 0.45rem;
  user-select: none;
}
.fl-show-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.fl-show-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}
.fl-show-kinds label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--fl-border);
  border-radius: 999px;
  background: var(--fl-surface);
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
}
.fl-show-kinds label:hover { border-color: var(--fl-accent); }
.fl-show-soon-pill {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--fl-muted);
  background: var(--fl-bg);
  border-radius: 999px;
  padding: 0.12rem 0.4rem;
}
.fl-show-panel { display: none; }
.fl-show-panels { pointer-events: none; }
#ex-aq:checked ~ .fl-show-kinds label[for="ex-aq"],
#ex-rack:checked ~ .fl-show-kinds label[for="ex-rack"],
#ex-pal:checked ~ .fl-show-kinds label[for="ex-pal"],
#ex-ter:checked ~ .fl-show-kinds label[for="ex-ter"],
#ex-flo:checked ~ .fl-show-kinds label[for="ex-flo"] {
  color: var(--fl-accent);
  border-color: var(--fl-accent);
  background: var(--fl-accent-dim);
}
#ex-aq:checked ~ .fl-show-panels [data-ex="aq"],
#ex-rack:checked ~ .fl-show-panels [data-ex="rack"],
#ex-pal:checked ~ .fl-show-panels [data-ex="pal"],
#ex-ter:checked ~ .fl-show-panels [data-ex="ter"],
#ex-flo:checked ~ .fl-show-panels [data-ex="flo"] { display: block; }

.fl-show-pitch { margin-top: 0.9rem; }
.fl-show-pitch h3 {
  margin: 0 0 0.55rem;
  font-size: 0.95rem;
}
.fl-pitch-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 0.75rem;
}
.fl-pitch-card {
  border: 1px solid var(--fl-border);
  border-radius: 12px;
  background: var(--fl-surface);
  padding: 0.7rem 0.8rem 0.55rem;
  min-width: 0;
}
.fl-pitch-k {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fl-muted);
  margin-bottom: 0.45rem;
}
.fl-pitch-chart + .fl-pitch-chart { margin-top: 0.45rem; }
.fl-pitch-chart-h {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.78rem;
}
.fl-pitch-chart-h b { font-weight: 650; }
.fl-pitch-chart svg {
  display: block;
  width: 100%;
  height: 64px;
  margin-top: 0.15rem;
}
.fl-pitch-rule {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  padding: 0.4rem 0;
  border-top: 1px solid var(--fl-border);
  font-size: 0.8rem;
}
.fl-pitch-rule b { display: block; font-size: 0.82rem; }
.fl-pitch-rule span { color: var(--fl-muted); }
.fl-pitch-kind {
  flex: 0 0 auto;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--fl-accent);
  background: var(--fl-accent-dim);
  border-radius: 999px;
  padding: 0.16rem 0.42rem;
  margin-top: 0.12rem;
}
@media (max-width: 720px) {
  .fl-pitch-grid { grid-template-columns: 1fr; }
}

.fl-show .fl-sat,
.fl-show .fl-spec { cursor: default; }
.fl-show .fl-sat:hover {
  border-color: var(--fl-border);
  box-shadow: none;
}
.fl-show .fl-seg,
.fl-show .fl-ctrl,
.fl-show .fl-ctrl-rules { display: none; }
.fl-show .fl-sat-id { display: none; }
.fl-show .fl-tank-title.fl-edit { pointer-events: none; }
.fl-show .fl-lid {
  align-items: center;
  gap: 0.35rem;
}
.fl-show-panels .fl-sats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 0.85rem;
}
.fl-show-board {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  align-items: start;
}
.fl-show-tank.is-hero .fl-sil { min-height: 220px; }
.fl-show-tank.is-hero .fl-tank-body { min-height: 220px; }
.fl-show-tank.is-mid .fl-sil { min-height: 220px; }
.fl-show-tank.is-mid .fl-tank-body { min-height: 220px; }
.fl-show-tank.is-side {
  min-height: 0;
  padding: 0.7rem;
  gap: 0.4rem;
}
.fl-show-tank.is-side .fl-tank-title {
  font-size: 0.86rem;
  line-height: 1.25;
}
.fl-show-tank.is-side .fl-sil { min-height: 220px; }
.fl-show-tank.is-side .fl-tank-body {
  grid-template-columns: 1fr;
  min-height: 220px;
}
.fl-show-tank.is-side .fl-tank-body.is-rail {
  grid-template-columns: minmax(5.2rem, 1fr) minmax(7.2rem, 1.15fr);
  gap: 0.5rem;
}
.fl-show-tank.is-side .fl-side-rail {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  min-width: 0;
}
.fl-show-tank.is-side .fl-fill-label,
.fl-show-tank.is-side .fl-well-stickers {
  position: static;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  max-width: none;
}
.fl-show-tank.is-side .fl-num { font-size: 1.25rem; }
@media (max-width: 720px) {
  .fl-show-tank.is-side .fl-tank-body.is-rail { grid-template-columns: 1fr; }
  .fl-show-tank.is-side .fl-side-rail { align-items: stretch; width: 100%; }
  .fl-show-tank.is-side .fl-valves { width: 100%; min-width: 0; }
  .fl-show-tank.is-side .fl-side-rail .fl-ctrl,
  .fl-show-tank.is-side .fl-valves .fl-ctrl,
  .fl-show-tank.is-side .fl-ctrl.is-inwell { width: min(228px, 100%); }
}
.fl-show .fl-fill-label { max-width: calc(100% - 1.1rem); }
.fl-show-ports {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.fl-show-ports .fl-show-tag {
  white-space: normal;
  line-height: 1.2;
}
@media (min-width: 880px) {
  .fl-show-board {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .fl-show-tank.is-hero { grid-column: 1 / -1; }
  .fl-show-tank.is-mid { grid-column: span 6; }
  .fl-show-tank.is-side { grid-column: span 3; }
  .fl-show-board:not(:has(> .is-side ~ .is-side ~ .is-side)) > .is-side {
    grid-column: span 6;
  }
  .fl-show-board:has(> .is-side ~ .is-side ~ .is-side):not(:has(> .is-side ~ .is-side ~ .is-side ~ .is-side)) > .is-side {
    grid-column: span 4;
  }
  .fl-sens-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.fl-show-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--fl-muted);
  border: 1px solid var(--fl-border);
  background: var(--fl-surface);
  border-radius: 999px;
  padding: 0.22rem 0.55rem 0.22rem 0.4rem;
  white-space: nowrap;
}
.fl-show-tag::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fl-muted);
  flex-shrink: 0;
}
.fl-show-tag.is-on {
  color: var(--fl-accent);
  border-color: var(--fl-accent);
  background: var(--fl-accent-dim);
  font-weight: 600;
}
.fl-show-tag.is-on::before {
  background: var(--fl-accent);
  animation: fl-pulse 1.2s ease-in-out infinite;
}
.fl-show-tag.is-uv.is-on {
  color: #7c5cff;
  border-color: #7c5cff;
  background: #efeaff;
}
.fl-show-tag.is-uv.is-on::before { background: #7c5cff; }
.fl-show-tag.is-circ.is-on {
  color: #2563eb;
  border-color: #3b82f6;
  background: #e8f0fe;
}
.fl-show-tag.is-circ.is-on::before { background: #3b82f6; }
.fl-show-tag.is-heat.is-on {
  color: #dc2626;
  border-color: #dc2626;
  background: #fde8e8;
}
.fl-show-tag.is-heat.is-on::before { background: #dc2626; }
.fl-show-tag.is-co2.is-on {
  color: #fdba74;
  border-color: #f59e0b;
  background: #161310;
}
.fl-show-tag.is-co2.is-on::before { background: #f59e0b; }
.fl-show-tag.is-air.is-on {
  color: #0369a1;
  border-color: #0ea5e9;
  background: #e0f2fe;
}
.fl-show-tag.is-air.is-on::before { background: #0ea5e9; }
.fl-show-tank.is-hero .fl-valves { min-width: 7.5rem; }
.fl-show .fl-valves {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.45rem;
  min-width: 0;
}
.fl-show .fl-valves .fl-show-tag {
  white-space: nowrap;
}
.fl-show-soon {
  position: relative;
  min-height: 200px;
}
.fl-show-soon .fl-tank { opacity: 0.38; min-height: 200px; }
.fl-show-soon-stamp {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: var(--fl-radius);
  background: color-mix(in srgb, var(--fl-bg) 55%, transparent);
}
.fl-show-cap {
  margin: 0 0 1.5rem;
  font-size: 0.82rem;
  color: var(--fl-muted);
}
@media (max-width: 720px) {
  .fl-show-panels .fl-sats { grid-template-columns: 1fr; }
}

.fl-meter-wrap {
  position: relative;
  width: auto;
  display: flex;
  justify-content: flex-start;
}
.fl-meter-wrap.is-pop { z-index: 12; }
.fl-scheme .fl-drop .fl-meter,
.fl-scheme .fl-drop .fl-meter-wrap .fl-meter {
  max-width: 100%;
  justify-content: flex-start;
  gap: 0.28rem;
}
.fl-scheme .fl-drop .fl-meter > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fl-ctor-cell .fl-src-picks { margin: 0; }
.fl-ctor-grid[data-off-wrap] { grid-template-columns: 1fr; }
.fl-bell .fl-ico--terminal { width: 1.05rem; height: 1.05rem; }
.fl-diag-sticker {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.85rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid var(--fl-border);
  border-radius: 999px;
  background: var(--fl-surface);
  color: var(--fl-text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 650;
  cursor: pointer;
}
.fl-diag-sticker .fl-ico { color: var(--fl-warn); }
.fl-diag-n {
  min-width: 1.15rem;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  background: var(--fl-warn);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  text-align: center;
}
.fl-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: color-mix(in srgb, #000 45%, transparent);
}
.fl-modal[hidden] { display: none; }
.fl-modal-card {
  width: min(36rem, 100%);
  max-height: min(80vh, 40rem);
  overflow: auto;
  padding: 1.1rem 1.15rem 1rem;
  background: var(--fl-surface);
  border: 1px solid var(--fl-border);
  border-radius: var(--fl-radius);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
}
.fl-modal-card h2 {
  margin: 0 0 0.65rem;
  font-size: 1.05rem;
}
.fl-modal-card textarea {
  width: 100%;
  min-height: 5.5rem;
  margin: 0.55rem 0 0.85rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--fl-border);
  border-radius: 10px;
  background: var(--fl-bg);
  color: var(--fl-text);
  font: inherit;
  resize: vertical;
}
.fl-modal-log {
  max-height: 18rem;
  overflow: auto;
  margin: 0 0 0.85rem;
  padding: 0.65rem;
  border: 1px solid var(--fl-border);
  border-radius: 10px;
  background: var(--fl-bg);
  font-size: 0.78rem;
  white-space: pre-wrap;
  word-break: break-word;
}
.fl-btn-warn {
  background: var(--fl-danger);
  color: #fff;
  border: 0;
  border-radius: 12px;
  min-height: 2.8rem;
  padding: 0.45rem 1.1rem;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.fl-term-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.fl-term-pane {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.fl-term-pane-h {
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--fl-muted);
}
.fl-term-log {
  height: 18rem;
  overflow: auto;
  margin: 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--fl-border);
  border-radius: 10px;
  background: var(--fl-bg);
  color: var(--fl-text);
  font-size: 0.72rem;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
}
.fl-term-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.65rem;
}
.fl-term-lim {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--fl-muted);
}
.fl-term-lim select {
  font: inherit;
  border: 1px solid var(--fl-border);
  border-radius: 8px;
  background: var(--fl-surface);
  color: var(--fl-text);
  padding: 0.2rem 0.35rem;
}
@media (max-width: 720px) {
  .fl-term-grid { grid-template-columns: 1fr; }
}