.field-node-card {
  --field-accent: #44d9b4;
  --field-muted: #b3bfce;
  max-width: 590px;
  padding: 26px;
  border: 1px solid #405b63;
  border-radius: 18px;
  background: linear-gradient(135deg, #182b33, #151d28 68%);
  color: #f3f7fb;
  box-shadow: 0 12px 30px #0002;
}
.field-node-heading { display: flex; align-items: center; gap: 16px; }
.field-node-emblem { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: #44d9b418; color: var(--field-accent); font-size: 36px; flex: 0 0 auto; }
.field-node-origin { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .09em; color: var(--field-accent); }
.field-node-card h4 { font-size: clamp(19px, 2vw, 25px); line-height: 1.2; margin: 6px 0; }
.field-node-serial { color: var(--field-muted); font-size: 13px; letter-spacing: .06em; }
.field-node-connection { display: flex; align-items: center; gap: 10px; font-size: 27px; margin: 25px 0 8px; color: var(--field-accent); }
.field-node-dot { width: 12px; height: 12px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 6px #44d9b413; }
.field-node-meta { color: var(--field-muted); font-size: 13px; margin: 5px 0; }
.field-node-receivers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 22px 0 14px; }
.field-node-receivers > div { padding: 12px 8px; background: #ffffff08; border: 1px solid #ffffff14; border-radius: 9px; font-size: 13px; font-weight: 650; }
.field-node-receivers span { display: block; font-size: 10px; color: var(--field-muted); margin-top: 7px; letter-spacing: .02em; }
.field-node-note { color: var(--field-muted); font-size: 12px; line-height: 1.5; margin-bottom: 20px; }
.field-node-card .field-node-cta { display: flex; justify-content: space-between; width: 100%; padding: 14px 16px; border-radius: 9px; font-size: 15px; font-weight: 750; background: #44d9b4; color: #102d27; border: 0; cursor: pointer; }
.field-node-cta:disabled { opacity: .45; cursor: default; }
.field-node-message { font-size: 12px; line-height: 1.4; color: var(--field-muted); }
.field-node-message:empty { display: none; }
.field-node-controls { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid #ffffff20; }
.field-node-controls label { font-size: 11px; color: var(--field-muted); }
.field-node-controls [hidden] { display: none; }
.field-node-controls select { display: block; margin-top: 5px; padding: 6px; color: #f3f7fb; background: #1e2b39; border: 1px solid #ffffff30; border-radius: 6px; font: inherit; font-size: 12px; color-scheme: dark; }
.field-node-card[data-state="STALE"] .field-node-connection { color: #ffd27b; }
.field-node-card[data-state="OFFLINE"] .field-node-connection { color: #bdc5d0; }
.field-node-card[data-origin="DEMO"] .field-node-origin { color: #ffd27b; background: #ffd27b16; padding: 4px 6px; border-radius: 4px; }
.field-node-map-icon { display: grid; place-items: center; font-size: 29px; color: #14382f; background: #68edc9; border: 3px solid white; border-radius: 12px; box-shadow: 0 3px 15px #0005; }
.leaflet-tooltip.field-node-tooltip { background: #162833; color: white; border-color: #6ed6bb; font-size: 12px; font-weight: 650; white-space: normal; min-width: 180px; max-width: 260px; }
.field-node-popup { display: grid; gap: 12px; }
.field-node-popup button { padding: 7px; cursor: pointer; }
body.theme-light .field-node-card { --field-accent: #087d63; --field-muted: #506272; color: #18303b; background: linear-gradient(135deg, #edf9f4, #f6f9fc); border-color: #b4d7cc; box-shadow: 0 12px 30px #164d3510; }
body.theme-light .field-node-receivers > div { background: #fff9; border-color: #164d3520; }
body.theme-light .field-node-controls { border-color: #164d3520; }
body.theme-light .field-node-controls select { color: #18303b; background: white; border-color: #8ca79d; color-scheme: light; }
body.theme-light .field-node-card[data-state="STALE"] .field-node-connection,
body.theme-light .field-node-card[data-origin="DEMO"] .field-node-origin { color: #8b5700; }
body.theme-light .field-node-card[data-state="OFFLINE"] .field-node-connection { color: #526576; }
@media (max-width: 520px) {
  .field-node-card { padding: 18px; }
  .field-node-heading { gap: 10px; }
  .field-node-emblem { width: 42px; height: 46px; }
  .field-node-receivers { gap: 5px; }
  .field-node-receivers > div { padding: 10px 6px; font-size: 12px; }
}