/* ANMA Universal Energy Dashboard Builder Styles */
#db-preview { position:relative; isolation:isolate; }
#db-preview > .db-station-background { position:absolute;inset:0;z-index:-1;pointer-events:none;background-size:cover;background-position:center;border-radius:inherit; }
#dashboard-app, #dashboard-app * { box-sizing: border-box; }
#dashboard-app { min-width: 0; }
#dashboard-app .db-palette-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#dashboard-app .db-palette-btn { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
#dashboard-app :is(input, select, textarea) { min-width: 0; max-width: 100%; }
#dashboard-app :is(.db-heading > *, .db-sourcebar > *, .db-workspace > *, .db-control-pair > *, .db-bindings-grid > *, .db-modal-mppt-row > *) { min-width: 0; }
#dashboard-app :is(.db-heading, .db-yaml-actions, .db-modal-footer, .db-modal-photo-row, .db-modal-mppt-head) { flex-wrap: wrap; }
#dashboard-app :is(.db-sourcebar label, .db-yaml-actions label) { max-width: 100%; flex-wrap: wrap; }
#dashboard-app :is(.db-code-preview, .db-hint, .db-status, .db-template-card) { min-width: 0; overflow-wrap: anywhere; }
#dashboard-app .db-code-preview textarea { width: 100%; }
#dashboard-app .db-device-picker-wrap { max-width: 100%; }
#dashboard-app .db-device-select { flex: 1; min-width: 0; }
#dashboard-app .db-viewport-rotate-btn { flex-shrink: 0; }
#dashboard-app .db-modal-mppt-row { grid-template-columns: minmax(0, 80px) minmax(0, 1fr) minmax(0, 100px) minmax(0, 90px) minmax(0, 1fr) 30px; }
#dashboard-app .db-modal-mppt-row input { width: 100%; }
#dashboard-app .db-modal-photo-controls { min-width: 0; }
#dashboard-app .db-card-controls:focus-within { display: flex; }
@media (hover: none) {
  #dashboard-app .db-card-controls { display: flex; position: static; flex-wrap: wrap; margin-top: 8px; }
}
@media (max-width: 820px) {
  #dashboard-app .db-heading { align-items: flex-start; }
  #dashboard-app .db-actions { width: 100%; }
}
@media (max-width: 600px) {
  #dashboard-app .db-modal-mppt-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #dashboard-app .db-control-pair { grid-template-columns: minmax(0, 1fr); }
  #dashboard-app .db-sourcebar label { width: 100%; }
  #dashboard-app .db-sourcebar label select { flex: 1; }
}
:root {
  --db-accent: #f1873d;
  --db-solar: #f59e0b;
  --db-battery: #37c98b;
  --db-grid: #a855f7;
  --db-load: #38bdf8;
  --db-ev: #10b981;
  --db-gen: #f97316;
}

.db-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}
.db-eyebrow {
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .17em;
  color: var(--text-faint);
}
.db-heading h1 {
  font-size: 32px;
  letter-spacing: -.03em;
  margin: 6px 0;
}
.db-heading p {
  color: var(--text-dim);
  margin: 0;
  max-width: 680px;
  line-height: 1.55;
  font-size: 13px;
}
.db-beta {
  font-size: 9px;
  letter-spacing: .08em;
  vertical-align: middle;
  margin-left: 10px;
  color: var(--brand);
  border: 1px solid var(--brand-border);
  padding: 3px 6px;
  border-radius: 5px;
}

/* Actions and Sourcebar */
.db-actions, .db-sourcebar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.db-sourcebar {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  font-size: 12px;
  align-items: center;
  margin-bottom: 14px;
}
.db-sourcebar label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.db-sourcebar select {
  max-width: 200px;
}
.db-divider {
  height: 22px;
  border-left: 1px solid var(--border);
  margin: 0 4px;
}
.btn-sm {
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  cursor: pointer;
  transition: all .15s ease;
}
.btn-sm:hover {
  background: var(--surface-3);
  border-color: var(--brand);
}
.db-mode-pill {
  font-size: 9px;
  font-weight: 750;
  padding: 4px 8px;
  border-radius: 6px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.db-mode-pill.builder {
  background: rgba(241,135,61,0.15);
  color: #f1873d;
  border: 1px solid rgba(241,135,61,0.35);
}
.db-mode-pill.standalone {
  background: rgba(56,189,248,0.12);
  color: #38bdf8;
  border: 1px solid rgba(56,189,248,0.3);
}

/* Viewport Switcher Controls */
.db-viewport-bar {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2px;
  gap: 2px;
}
.db-viewport-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 650;
  cursor: pointer;
  transition: all .15s ease;
}
.db-viewport-btn:hover {
  color: var(--text);
  background: var(--surface-3);
}
.db-viewport-btn.active {
  background: var(--brand);
  color: #111;
  font-weight: 750;
}

/* DevTools-Style Device Simulator Controls */
.db-device-picker-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px 6px;
}
.db-device-select {
  background: transparent;
  color: var(--text);
  border: none;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 4px;
  border-radius: 6px;
  cursor: pointer;
  outline: none;
  max-width: 220px;
}
.db-device-select:focus {
  background: var(--surface-3);
}
.db-device-select option, .db-device-select optgroup {
  background: #141c26;
  color: #e2e8f0;
}
.db-viewport-rotate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 7px;
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: 12px;
  cursor: pointer;
  transition: transform .25s ease, background .15s ease, border-color .15s ease;
}
.db-viewport-rotate-btn:hover {
  background: var(--surface);
  border-color: var(--brand);
}
.db-viewport-rotate-btn.rotated {
  transform: rotate(90deg);
  background: rgba(241,135,61,0.2);
  border-color: var(--brand);
}
.db-viewport-dims {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-dim);
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  padding: 2px 6px;
  white-space: nowrap;
}
.db-sim-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid rgba(55,201,139,.35);
  border-radius: 9px;
  background: rgba(55,201,139,.12);
  color: #37c98b;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
  transition: all .15s ease;
}
.db-sim-btn.active {
  background: #37c98b;
  color: #0d1a14;
  border-color: #37c98b;
  box-shadow: 0 0 14px rgba(55,201,139,.35);
}

.db-status {
  min-height: 20px;
  font-size: 12px;
  color: var(--brand);
  margin: 8px 0;
}

/* Workspace Layout */
.db-workspace {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.db-editor {
  padding: 18px;
}
.db-editor label, .db-bindings label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
  color: var(--text-dim);
  margin: 10px 0;
}
.db-editor input, .db-editor select {
  width: 100%;
  min-width: 0;
}
.db-editor input[type=color] {
  height: 36px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 8px;
  padding: 4px;
}
.db-control-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.db-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 12px;
}
.db-section-title:first-child { margin-top: 0; }
.db-section-title h2 {
  font-size: 13px;
  font-weight: 750;
  margin: 0;
}
.db-section-title > span {
  font-size: 10px;
  color: var(--brand);
  font-weight: 800;
}
.db-check {
  display: flex!important;
  flex-direction: row!important;
  align-items: center;
  gap: 8px!important;
  font-size: 11px;
}
.db-check input {
  width: auto!important;
  accent-color: var(--brand);
}
.db-hint {
  font-size: 11px;
  line-height: 1.6;
  color: var(--text-faint);
}
.db-text-button {
  padding: 4px 0;
  border: 0;
  background: none;
  font-size: 11px;
  color: var(--text-faint);
  cursor: pointer;
}
.db-text-button:hover { color: var(--brand); }

/* Flow Colors Grid */
.db-sub-label {
  font-size: 10px;
  color: var(--text-dim);
  margin-bottom: 5px;
  display: block;
}
.db-flow-invert-group {
  margin: 10px 0 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 8px 10px;
}
.db-invert-checkboxes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-top: 5px;
}
.db-flow-colors-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.db-flow-colors-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  color: var(--text-dim);
  margin: 0;
}
.db-flow-colors-grid input[type=color] {
  height: 30px;
  padding: 2px;
}

/* Quick Add Palette */
.db-palette-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-top: 8px;
}
.db-palette-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 11px;
  cursor: pointer;
  text-align: left;
  transition: all .15s ease;
}
.db-palette-btn:hover {
  background: var(--surface-3);
  border-color: var(--brand);
  transform: translateY(-1px);
}
.db-palette-btn span {
  font-size: 14px;
}
.db-palette-btn b {
  font-size: 10px;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Widgets list in editor */
.db-widget-row {
  display: flex;
  align-items: center;
  gap: 5px;
}
.db-widget-row label {
  flex: 1;
  margin: 6px 0;
}
.db-widget-row button {
  padding: 3px 7px;
  font-size: 11px;
}

/* Code previews (YAML / JSON) */
.db-code-preview {
  margin-bottom: 18px;
}
.db-code-preview textarea {
  width: 100%;
  background: #090e14;
  color: #7dd3fc;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.5;
  padding: 12px;
  margin-top: 10px;
}
.db-yaml-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}

/* Viewport Preview Container & On-Page Device Simulator */
.db-viewport-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
  width: 100%;
  overflow-x: auto;
  padding: 10px 0 24px;
  transition: all .25s ease;
}
.db-device-frame {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  container-type: inline-size;
  container-name: dbframe;
  transition: max-width .25s cubic-bezier(.16,1,.3,1), border .25s ease, border-radius .25s ease, box-shadow .25s ease;
  margin: 0 auto;
  position: relative;
}
.db-device-bezel-top {
  display: none;
}

/* Phone Device Simulation */
.db-device-frame.device-phone,
.db-viewport-container[data-viewport="mobile"] .db-device-frame {
  max-width: 412px;
  background: #121822;
  border: 13px solid #1a2330;
  border-radius: 44px;
  box-shadow: 0 28px 75px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,0.08);
  padding: 10px;
}
.db-device-frame.device-phone .db-device-bezel-top,
.db-viewport-container[data-viewport="mobile"] .db-device-bezel-top {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 24px;
  gap: 12px;
  position: relative;
}
.db-device-frame.device-phone .db-preview,
.db-viewport-container[data-viewport="mobile"] .db-preview {
  padding: 12px;
  border-radius: 26px;
}
.db-device-island {
  display: none;
  width: 96px;
  height: 22px;
  background: #000;
  border-radius: 16px;
  box-shadow: 0 0 1px rgba(255,255,255,0.2), inset 0 0 2px rgba(255,255,255,0.08);
  margin: 0 auto;
}
.db-device-frame.has-island .db-device-island {
  display: block;
}
.db-device-frame.has-island .db-device-speaker,
.db-device-frame.has-island .db-device-camera {
  display: none;
}
.db-device-speaker {
  width: 45px;
  height: 4px;
  background: #2a3746;
  border-radius: 4px;
}
.db-device-camera {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #0b1016;
  border: 1px solid #334355;
}
.db-device-frame.has-punch-hole .db-device-speaker,
.db-device-frame.has-punch-hole .db-device-island {
  display: none;
}
.db-device-frame.has-punch-hole .db-device-camera {
  display: block;
  width: 10px;
  height: 10px;
  background: #000;
  border: 1px solid #2a3746;
}

/* Tablet Device Simulation */
.db-device-frame.device-tablet,
.db-viewport-container[data-viewport="tablet"] .db-device-frame {
  max-width: 820px;
  background: #141c26;
  border: 14px solid #1c2734;
  border-radius: 30px;
  box-shadow: 0 24px 60px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,0.06);
  padding: 10px;
}
.db-device-frame.device-tablet .db-device-bezel-top,
.db-viewport-container[data-viewport="tablet"] .db-device-bezel-top {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 18px;
  gap: 8px;
}
.db-device-frame.device-tablet .db-device-camera,
.db-viewport-container[data-viewport="tablet"] .db-device-camera {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0c1218;
  border: 1px solid #2a3746;
}
.db-device-frame.device-tablet .db-device-speaker,
.db-device-frame.device-tablet .db-device-island {
  display: none;
}
.db-device-frame.device-tablet .db-preview,
.db-viewport-container[data-viewport="tablet"] .db-preview {
  padding: 14px;
  border-radius: 20px;
}

/* Display / Monitor Device Simulation (HD 720p, Full HD 1080p, Laptops) */
.db-device-frame.device-display {
  background: #090f17;
  border: 12px solid #1e293b;
  border-radius: 14px;
  box-shadow: 0 24px 65px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,0.06);
  padding: 8px;
}
.db-device-frame.device-display .db-device-bezel-top {
  display: none;
}

/* Landscape Orientation Adjustments */
.db-device-frame.is-landscape.device-phone {
  border-radius: 36px;
  padding: 8px 12px;
}
.db-device-frame.is-landscape.device-phone .db-device-bezel-top {
  height: 14px;
}
.db-device-frame.is-landscape.device-phone .db-device-island {
  width: 76px;
  height: 16px;
}

/* Container Query: Mobile Form-Factor Simulation (< 520px) */
@container dbframe (max-width: 520px) {
  #db-canvas {
    grid-template-columns: 1fr !important;
  }
  .db-widget-box {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  .db-preview {
    padding: 12px;
  }
  .db-preview-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .db-preview-status-pills {
    margin-left: 0;
    width: 100%;
    justify-content: space-between;
  }
  .db-flow-container-wrap {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .db-flow {
    height: 310px;
    width: 100%;
  }
  .db-flow-node {
    width: auto;
    min-width: 62px;
    max-width: 82px;
    padding: 5px 3px;
    border-radius: 10px;
  }
  .db-flow-node i {
    font-size: 14px;
    margin-bottom: 1px;
  }
  .db-flow-node span {
    font-size: 7.5px;
    letter-spacing: -0.02em;
  }
  .db-flow-node b {
    font-size: 11px;
    margin-top: 1px;
  }
  .db-flow-node small {
    font-size: 7px;
  }
  .db-flow-node[data-role=inverter] {
    width: 74px;
    height: 74px;
    padding: 4px;
  }
  .db-flow-node[data-role=inverter] b {
    font-size: 12px;
  }
  .db-flow-node[data-role=inverter] span {
    font-size: 8px;
  }
  .db-flow-side-card {
    padding: 10px 12px;
  }
  .db-flow-side-card .db-big-soc {
    font-size: 22px;
    margin-bottom: 4px;
  }
  .db-flow-summary-bar {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    padding-top: 8px;
    margin-top: 8px;
  }
  .db-summary-item {
    padding: 6px 8px;
  }
  .db-summary-item b {
    font-size: 13px;
  }
  .db-battery-stack-grid,
  .db-inverter-stack-grid {
    grid-template-columns: 1fr !important;
  }
  .db-chart-metrics {
    flex-wrap: wrap;
  }
}

/* Container Query: Medium / Tablet Form-Factor (521px - 900px) */
@container dbframe (min-width: 521px) and (max-width: 900px) {
  .db-flow-container-wrap {
    grid-template-columns: 1fr 220px;
    gap: 12px;
  }
  .db-flow {
    height: 330px;
  }
  .db-flow-node {
    max-width: 108px;
    padding: 8px 4px;
  }
  .db-flow-node[data-role=inverter] {
    width: 90px;
    height: 90px;
  }
  .db-battery-stack-grid,
  .db-inverter-stack-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }
}

.db-viewport-container[data-viewport="mobile"] #db-canvas {
  grid-template-columns: 1fr!important;
}
.db-viewport-container[data-viewport="mobile"] .db-preview {
  padding: 12px;
  border-radius: 24px;
}
.db-viewport-container[data-viewport="mobile"] .db-flow-container-wrap {
  grid-template-columns: 1fr!important;
  gap: 12px;
}
.db-viewport-container[data-viewport="mobile"] .db-flow {
  height: 310px;
  width: 100%;
}
.db-viewport-container[data-viewport="mobile"] .db-flow-node {
  width: auto;
  min-width: 62px;
  max-width: 82px;
  padding: 5px 3px;
  border-radius: 10px;
}
.db-viewport-container[data-viewport="mobile"] .db-flow-node i {
  font-size: 14px;
  margin-bottom: 1px;
}
.db-viewport-container[data-viewport="mobile"] .db-flow-node span {
  font-size: 7.5px;
  letter-spacing: -0.02em;
}
.db-viewport-container[data-viewport="mobile"] .db-flow-node b {
  font-size: 11px;
  margin-top: 1px;
}
.db-viewport-container[data-viewport="mobile"] .db-flow-node small {
  font-size: 7px;
}
.db-viewport-container[data-viewport="mobile"] .db-flow-node[data-role=inverter] {
  width: 74px;
  height: 74px;
  padding: 4px;
}
.db-viewport-container[data-viewport="mobile"] .db-flow-node[data-role=inverter] b {
  font-size: 12px;
}
.db-viewport-container[data-viewport="mobile"] .db-flow-node[data-role=inverter] span {
  font-size: 8px;
}
.db-viewport-container[data-viewport="mobile"] .db-flow-side-card {
  padding: 10px 12px;
}
.db-viewport-container[data-viewport="mobile"] .db-flow-side-card .db-big-soc {
  font-size: 22px;
  margin-bottom: 4px;
}
.db-viewport-container[data-viewport="mobile"] .db-flow-summary-bar {
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  padding-top: 8px;
  margin-top: 8px;
}
.db-viewport-container[data-viewport="mobile"] .db-summary-item {
  padding: 6px 8px;
}
.db-viewport-container[data-viewport="mobile"] .db-summary-item b {
  font-size: 13px;
}

/* Tablet Viewport Simulation */
.db-viewport-container[data-viewport="tablet"] .db-flow-container-wrap {
  grid-template-columns: 1fr 230px;
  gap: 12px;
}
.db-viewport-container[data-viewport="tablet"] .db-flow {
  height: 330px;
}
.db-viewport-container[data-viewport="tablet"] .db-flow-node {
  max-width: 108px;
  padding: 8px 4px;
}
.db-viewport-container[data-viewport="tablet"] .db-flow-node[data-role=inverter] {
  width: 90px;
  height: 90px;
}

/* The Dashboard Preview Canvas */
.db-preview {
  --accent: #f1873d;
  --db-font: inherit;
  min-width: 0;
  background: #090f17;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 22px;
  font-family: var(--db-font);
  transition: all .2s ease;
}

/* Font Families (20 fonts) */
.db-preview[data-font="system"] { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.db-preview[data-font="inter"] { font-family: 'Inter', sans-serif; }
.db-preview[data-font="roboto"] { font-family: 'Roboto', sans-serif; }
.db-preview[data-font="open_sans"] { font-family: 'Open Sans', sans-serif; }
.db-preview[data-font="montserrat"] { font-family: 'Montserrat', sans-serif; }
.db-preview[data-font="poppins"] { font-family: 'Poppins', sans-serif; }
.db-preview[data-font="ubuntu"] { font-family: 'Ubuntu', sans-serif; }
.db-preview[data-font="nunito"] { font-family: 'Nunito', sans-serif; }
.db-preview[data-font="oswald"] { font-family: 'Oswald', sans-serif; }
.db-preview[data-font="raleway"] { font-family: 'Raleway', sans-serif; }
.db-preview[data-font="fira_sans"] { font-family: 'Fira Sans', sans-serif; }
.db-preview[data-font="plus_jakarta_sans"] { font-family: 'Plus Jakarta Sans', sans-serif; }
.db-preview[data-font="lexend"] { font-family: 'Lexend', sans-serif; }
.db-preview[data-font="exo_2"] { font-family: 'Exo 2', sans-serif; }
.db-preview[data-font="orbitron"] { font-family: 'Orbitron', monospace; }
.db-preview[data-font="rajdhani"] { font-family: 'Rajdhani', sans-serif; }
.db-preview[data-font="jetbrains_mono"] { font-family: 'JetBrains Mono', monospace; }
.db-preview[data-font="fira_code"] { font-family: 'Fira Code', monospace; }
.db-preview[data-font="space_grotesk"] { font-family: 'Space Grotesk', sans-serif; }
.db-preview[data-font="playfair"] { font-family: 'Playfair Display', serif; }

/* Themes */
.db-preview[data-theme-mode="oled"] {
  background: #000;
  border-color: #222;
}
.db-preview[data-theme-mode="cyberpunk"] {
  background: #090e17;
  border-color: rgba(0,240,255,.35);
  box-shadow: 0 0 25px rgba(0,240,255,.08);
}
.db-preview[data-theme-mode="nordic"] {
  background: #141c26;
  border-color: #253342;
}

/* Light Theme 1: Light Emerald */
.db-preview[data-theme-mode="light_emerald"] {
  background: #f8fafc;
  color: #0f172a;
  border-color: #cbd5e1;
}
.db-preview[data-theme-mode="light_emerald"] .db-widget-box,
.db-preview[data-theme-mode="light_emerald"] .db-metric,
.db-preview[data-theme-mode="light_emerald"] .db-flow-widget {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 16px rgba(15,23,42,0.04);
}
.db-preview[data-theme-mode="light_emerald"] .db-brand-main,
.db-preview[data-theme-mode="light_emerald"] .db-widget-head b,
.db-preview[data-theme-mode="light_emerald"] .db-metric-value,
.db-preview[data-theme-mode="light_emerald"] .db-flow-node b,
.db-preview[data-theme-mode="light_emerald"] .db-summary-item b,
.db-preview[data-theme-mode="light_emerald"] .db-flow-side-card .db-big-soc {
  color: #0f172a;
}
.db-preview[data-theme-mode="light_emerald"] .db-flow-node,
.db-preview[data-theme-mode="light_emerald"] .db-flow-side-card,
.db-preview[data-theme-mode="light_emerald"] .db-summary-item {
  background: #f8fafc;
  border-color: #e2e8f0;
}
.db-preview[data-theme-mode="light_emerald"] .db-flow-node[data-role=inverter] {
  background: radial-gradient(circle, #f1f5f9 0%, #e2e8f0 100%);
  border-color: #10b981;
  box-shadow: 0 0 20px rgba(16,185,129,0.2);
}
.db-preview[data-theme-mode="light_emerald"] .db-flow path.flow-base {
  stroke: rgba(15, 23, 42, 0.15);
}

/* Light Theme 2: Light Rose / Pastel */
.db-preview[data-theme-mode="light_rose"] {
  background: #fff1f2;
  color: #1e293b;
  border-color: #fecdd3;
}
.db-preview[data-theme-mode="light_rose"] .db-widget-box,
.db-preview[data-theme-mode="light_rose"] .db-metric,
.db-preview[data-theme-mode="light_rose"] .db-flow-widget {
  background: #ffffff;
  border-color: #ffe4e6;
  box-shadow: 0 4px 16px rgba(244,63,94,0.06);
}
.db-preview[data-theme-mode="light_rose"] .db-brand-main,
.db-preview[data-theme-mode="light_rose"] .db-widget-head b,
.db-preview[data-theme-mode="light_rose"] .db-metric-value,
.db-preview[data-theme-mode="light_rose"] .db-flow-node b,
.db-preview[data-theme-mode="light_rose"] .db-summary-item b,
.db-preview[data-theme-mode="light_rose"] .db-flow-side-card .db-big-soc {
  color: #1e293b;
}
.db-preview[data-theme-mode="light_rose"] .db-flow-node,
.db-preview[data-theme-mode="light_rose"] .db-flow-side-card,
.db-preview[data-theme-mode="light_rose"] .db-summary-item {
  background: #fff5f6;
  border-color: #fecdd3;
}
.db-preview[data-theme-mode="light_rose"] .db-flow-node[data-role=inverter] {
  background: radial-gradient(circle, #fff1f2 0%, #ffe4e6 100%);
  border-color: #f43f5e;
  box-shadow: 0 0 20px rgba(244,63,94,0.22);
}
.db-preview[data-theme-mode="light_rose"] .db-flow path.flow-base {
  stroke: rgba(225, 29, 72, 0.15);
}

/* Light Theme 3: Light Clean Slate */
.db-preview[data-theme-mode="light_clean"] {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #cbd5e1;
}
.db-preview[data-theme-mode="light_clean"] .db-widget-box,
.db-preview[data-theme-mode="light_clean"] .db-metric,
.db-preview[data-theme-mode="light_clean"] .db-flow-widget {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
.db-preview[data-theme-mode="light_clean"] .db-brand-main,
.db-preview[data-theme-mode="light_clean"] .db-widget-head b,
.db-preview[data-theme-mode="light_clean"] .db-metric-value,
.db-preview[data-theme-mode="light_clean"] .db-flow-node b,
.db-preview[data-theme-mode="light_clean"] .db-summary-item b,
.db-preview[data-theme-mode="light_clean"] .db-flow-side-card .db-big-soc {
  color: #0f172a;
}
.db-preview[data-theme-mode="light_clean"] .db-flow-node,
.db-preview[data-theme-mode="light_clean"] .db-flow-side-card,
.db-preview[data-theme-mode="light_clean"] .db-summary-item {
  background: #f8fafc;
  border-color: #cbd5e1;
}
.db-preview[data-theme-mode="light_clean"] .db-flow-node[data-role=inverter] {
  background: radial-gradient(circle, #f8fafc 0%, #e2e8f0 100%);
  border-color: #f1873d;
  box-shadow: 0 0 20px rgba(241,135,61,0.22);
}
.db-preview[data-theme-mode="light_clean"] .db-flow path.flow-base {
  stroke: rgba(15, 23, 42, 0.12);
}

/* Header with ANMA ELECTRIC Branding (Screenshot 4) */
.db-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding-bottom: 14px;
  margin-bottom: 14px;
}
.db-site-name {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.db-anma-brand-box {
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, #f1873d, #ea580c);
  border-radius: 12px;
  display: grid;
  place-items: center;
  box-shadow: 0 0 20px rgba(241,135,61,0.35);
  flex-shrink: 0;
}
.db-bolt-icon {
  font-size: 22px;
  color: #fff;
  line-height: 1;
}
.db-brand-titles {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.db-brand-main {
  font-size: 18px;
  font-weight: 850;
  letter-spacing: .03em;
  color: #fff;
  margin: 0;
  line-height: 1.1;
}
.db-object-subtitle {
  font-size: 11px;
  font-weight: 700;
  color: #6c8ea4;
  letter-spacing: .04em;
  margin-top: 3px;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db-preview-status-pills {
  display: flex;
  align-items: center;
  gap: 6px;
}
.db-target-pill {
  font-size: 9px;
  padding: 5px 9px;
  background: rgba(168,85,247,.12);
  border: 1px solid rgba(168,85,247,.35);
  color: #c084fc;
  border-radius: 20px;
  font-weight: 700;
  letter-spacing: .03em;
}
.db-demo {
  font-size: 9px;
  padding: 5px 9px;
  background: var(--brand-soft);
  border: 1px solid var(--brand-border);
  color: var(--brand);
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: .05em;
  font-weight: 700;
}

.db-preview-note {
  font-size: 11px;
  color: var(--text-faint);
  line-height: 1.6;
  display: flex;
  gap: 15px;
  justify-content: space-between;
  align-items: center;
  margin: 8px 0 16px;
}

/* Canvas Grid */
#db-canvas {
  display: grid;
  grid-template-columns: repeat(var(--db-cols, 2), minmax(0, 1fr));
  gap: 14px;
}

/* Widget General Box */
.db-widget-box, .db-metric {
  border: 1px solid #1a2533;
  background: #0e1622;
  padding: 16px;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.db-widget-box:hover, .db-metric:hover {
  border-color: #27374a;
}

/* Corner Shapes */
.db-preview[data-shape="rounded"] .db-widget-box,
.db-preview[data-shape="rounded"] .db-metric,
.db-preview[data-shape="rounded"] .db-flow-widget { border-radius: 16px; }

.db-preview[data-shape="pill"] .db-widget-box,
.db-preview[data-shape="pill"] .db-metric,
.db-preview[data-shape="pill"] .db-flow-widget { border-radius: 26px; }

.db-preview[data-shape="square"] .db-widget-box,
.db-preview[data-shape="square"] .db-metric,
.db-preview[data-shape="square"] .db-flow-widget { border-radius: 4px; }

.db-preview[data-shape="flat"] .db-widget-box,
.db-preview[data-shape="flat"] .db-metric,
.db-preview[data-shape="flat"] .db-flow-widget { border-radius: 0; }

/* Grid Spans */
.db-widget-box[data-size="full"], .db-metric[data-size="full"], .db-flow-widget {
  grid-column: 1 / -1;
}
.db-widget-box[data-size="2x1"], .db-metric[data-size="2x1"] {
  grid-column: span min(2, var(--db-cols, 2));
}

/* Widget Header */
.db-widget-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.db-widget-head b { font-weight: 700; color: #fff; }
.db-widget-head small {
  font-size: 9px;
  color: var(--text-faint);
  letter-spacing: .04em;
}

/* Power Flow Interactive Widget (Screenshot 3 Inspiration) */
.db-flow-widget {
  border: 1px solid #1a2533;
  background: radial-gradient(ellipse at center, rgba(241,135,61,0.08), transparent 75%), #0c121a;
  border-radius: 16px;
  padding: 16px;
}
.db-flow-container-wrap {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 16px;
  align-items: stretch;
}
.db-flow {
  position: relative;
  height: 360px;
  margin: 0 auto;
  width: 100%;
}
.db-flow svg {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  overflow: visible;
}
.db-flow path.flow-base {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 0.8;
  stroke-dasharray: 2 4;
  stroke-linecap: round;
}

/* Animation Styles: traffic, particles, arrows, solid (DEYE Cloud style ultra-thin) */
.db-flow path.flow-traffic {
  stroke-dasharray: 4 24;
  stroke-width: 1.2;
  stroke-linecap: round;
  animation: db-flow-traffic var(--flow-speed, 2.2s) linear infinite;
  filter: drop-shadow(0 0 2px currentColor);
}
@keyframes db-flow-traffic {
  to { stroke-dashoffset: -56; }
}

.db-flow path.flow-particles {
  stroke-dasharray: 3 32;
  stroke-linecap: round;
  stroke-width: 1.8;
  filter: drop-shadow(0 0 3px currentColor);
  animation: db-flow-particles var(--flow-speed, 1.8s) linear infinite;
}
@keyframes db-flow-particles {
  to { stroke-dashoffset: -70; }
}

.db-flow path.flow-arrows {
  stroke-dasharray: 6 22;
  stroke-width: 1.2;
  animation: db-flow-traffic var(--flow-speed, 2.5s) linear infinite;
}

.db-flow path.flow-solid {
  stroke-dasharray: none;
  stroke-width: 1;
}

.db-flow path.flow-inverted {
  animation-direction: reverse!important;
}

.db-preview[data-motion=false] .db-flow path {
  animation: none!important;
}

/* Draggable Power Flow Node */
.db-flow-node {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 26%;
  max-width: 135px;
  text-align: center;
  border: 1px solid #233144;
  background: #111a26;
  border-radius: 14px;
  padding: 10px 6px;
  cursor: grab;
  user-select: none;
  transition: box-shadow .15s ease, border-color .15s ease;
  z-index: 10;
  overflow: hidden;
}
.db-flow-node:active { cursor: grabbing; }
.db-flow-node:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 18px rgba(0,0,0,.5);
}
.db-flow-node[data-role=inverter] {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-color: #f1873d;
  box-shadow: 0 0 30px rgba(241,135,61,0.25);
  background: radial-gradient(circle, #1a2332 0%, #101622 100%);
  padding: 6px;
  overflow: hidden;
}

/* Device Watermark Background Layer */
.db-watermark-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
  opacity: 0.20;
  filter: saturate(1.15) contrast(1.1);
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.db-flow-node:hover .db-watermark-bg,
.db-widget-box:hover .db-watermark-bg,
.db-device:hover .db-watermark-bg {
  opacity: 0.30;
  filter: saturate(1.25) contrast(1.15);
}

/* Ensure all interactive indicators and content stay on top of the watermark */
.has-photo {
  position: relative;
  overflow: hidden;
}
.db-flow-node.has-photo > *:not(.db-watermark-bg),
.db-widget-box.has-photo > *:not(.db-watermark-bg),
.db-device.has-photo > *:not(.db-watermark-bg) {
  position: relative;
  z-index: 1;
}

/* Text outline & shadow for extreme legibility over photo */
.db-node-text-outline,
.has-photo b,
.has-photo span,
.has-photo small,
.has-photo i,
.has-photo .db-metric-value,
.has-photo .db-widget-head b,
.has-photo p {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 1px rgba(0, 0, 0, 0.95), 0 0 4px rgba(0, 0, 0, 0.85);
  -webkit-text-stroke: 0.18px rgba(0, 0, 0, 0.65);
}

/* On light themes, delicate dark text outline ensures 100% visibility over bright or dark photos */
.db-preview[data-theme-mode^="light_"] .db-node-text-outline,
.db-preview[data-theme-mode^="light_"] .has-photo b,
.db-preview[data-theme-mode^="light_"] .has-photo span,
.db-preview[data-theme-mode^="light_"] .has-photo small,
.db-preview[data-theme-mode^="light_"] .has-photo .db-metric-value,
.db-preview[data-theme-mode^="light_"] .has-photo .db-widget-head b {
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9), 0 0 2px rgba(0, 0, 0, 0.35);
  -webkit-text-stroke: 0.22px rgba(15, 23, 42, 0.7);
}

.db-flow-node-photo {
  width: 38px;
  height: 38px;
  object-fit: contain;
  margin-bottom: 2px;
}
.db-flow-node i {
  display: block;
  font-style: normal;
  font-size: 20px;
  color: var(--accent);
  margin-bottom: 3px;
}
.db-flow-node span {
  display: block;
  font-size: 10px;
  color: #94a3b8;
  font-weight: 600;
}
.db-flow-node b {
  display: block;
  font-size: 15px;
  margin-top: 3px;
  font-weight: 750;
  color: #fff;
}

/* Side Card inside Flow widget (Screenshot 3) */
.db-flow-side-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.db-flow-side-card {
  background: #111925;
  border: 1px solid #1e2a3a;
  border-radius: 12px;
  padding: 14px;
}
.db-flow-side-card h4 {
  font-size: 11px;
  text-transform: uppercase;
  color: #94a3b8;
  margin: 0 0 4px;
}
.db-flow-side-card .db-big-soc {
  font-size: 28px;
  font-weight: 750;
  color: #fff;
  margin-bottom: 8px;
}
.db-flow-side-spec-row {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #64748b;
  margin-top: 6px;
  border-top: 1px solid #192330;
  padding-top: 6px;
}
.db-flow-side-spec-row b { color: #cbd5e1; }

/* Bottom Flow Today Summary (Screenshot 3) */
.db-flow-summary-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  border-top: 1px solid #1a2533;
  padding-top: 12px;
  margin-top: 12px;
}
.db-summary-item {
  background: #111925;
  border: 1px solid #1e2a3a;
  border-radius: 10px;
  padding: 10px 12px;
}
.db-summary-item span {
  display: block;
  font-size: 10px;
  color: #64748b;
  margin-bottom: 4px;
}
.db-summary-item b {
  font-size: 16px;
  font-weight: 750;
  color: #fff;
}

/* Metric Cards */
.db-metric-value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.03em;
  margin: 10px 0 4px;
  color: #fff;
}
.db-metric-value small {
  font-size: 12px;
  margin-left: 5px;
  color: #64748b;
  font-weight: 400;
}
.db-meter {
  height: 5px;
  background: #1a2432;
  border-radius: 3px;
  margin-top: 12px;
}
.db-meter span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
}

/* Inline card widget controls */
.db-card-controls {
  position: absolute;
  top: 8px;
  right: 8px;
  display: none;
  gap: 4px;
  background: #1c2738;
  border: 1px solid #2b3b4f;
  border-radius: 6px;
  padding: 2px;
}
.db-widget-box:hover .db-card-controls, .db-metric:hover .db-card-controls {
  display: flex;
}
.db-card-controls button {
  padding: 2px 5px;
  font-size: 10px;
  border: 0;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
}
.db-card-controls button:hover {
  color: #fff;
}

/* Device section and bindings */
.db-device-section {
  border-top: 1px solid #1a2533;
  margin-top: 24px;
  padding-top: 18px;
}
.db-device {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #17212d;
}
.db-device-thumb {
  width: 34px;
  height: 34px;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
  padding: 2px;
}
.db-device-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  background: #151e2a;
  border: 1px solid #222f40;
  border-radius: 8px;
  color: var(--accent);
  font-size: 16px;
}
.db-device-copy {
  flex: 1;
  min-width: 0;
}
.db-device-copy b {
  display: block;
  font-size: 12px;
  color: #fff;
  overflow-wrap: anywhere;
}
.db-device-copy small {
  font-size: 10px;
  color: #64748b;
}
.db-device input {
  width: 60px;
  padding: 4px;
  font-size: 11px;
}
.db-device button {
  padding: 4px 7px;
  font-size: 11px;
}
.db-photo-btn {
  background: #17222f;
  border: 1px solid #27374a;
  color: #94a3b8;
  border-radius: 6px;
  cursor: pointer;
}
.db-photo-btn:hover { color: #fff; border-color: var(--brand); }

.db-bindings {
  margin-top: 20px;
  font-size: 12px;
}
.db-bindings-top-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.db-bindings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}

/* Responsive Rules */
@media (max-width: 1100px) {
  .db-workspace {
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 16px;
  }
  .db-flow-container-wrap {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 820px) {
  .db-workspace {
    grid-template-columns: 1fr;
  }
  .db-viewport-bar {
    display: none;
  }
  .db-bindings-grid {
    grid-template-columns: 1fr;
  }
  .db-flow-summary-bar {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Kiosk Fullscreen Mode for Tablets & Wall Panels */
#dashboard-app.db-kiosk-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #090f17;
  padding: 0;
  margin: 0;
  overflow-y: auto;
}
#dashboard-app.db-kiosk-fullscreen .db-heading,
#dashboard-app.db-kiosk-fullscreen .db-sourcebar,
#dashboard-app.db-kiosk-fullscreen .db-template-library,
#dashboard-app.db-kiosk-fullscreen .db-editor,
#dashboard-app.db-kiosk-fullscreen .db-status,
#dashboard-app.db-kiosk-fullscreen .db-code-preview,
#dashboard-app.db-kiosk-fullscreen .db-device-bezel-top {
  display: none!important;
}
#dashboard-app.db-kiosk-fullscreen .db-workspace {
  display: block;
}
#dashboard-app.db-kiosk-fullscreen .db-viewport-container {
  max-width: 100vw;
  width: 100vw;
  margin: 0;
  padding: 0;
}
#dashboard-app.db-kiosk-fullscreen .db-device-frame {
  max-width: 100vw!important;
  border: none!important;
  border-radius: 0!important;
  padding: 18px!important;
  background: transparent!important;
  box-shadow: none!important;
}
#dashboard-app.db-kiosk-fullscreen .db-preview {
  border-radius: 0!important;
  border: none!important;
  padding: 12px;
}
.db-kiosk-exit-btn {
  position: fixed;
  top: 14px;
  right: 18px;
  z-index: 100000;
  display: none;
  background: rgba(20,28,38,0.85);
  border: 1px solid #334355;
  color: #fff;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
#dashboard-app.db-kiosk-fullscreen .db-kiosk-exit-btn {
  display: flex;
  align-items: center;
  gap: 6px;
}
.db-device-name-input {
  background: #141c28;
  border: 1px solid #233142;
  border-radius: 6px;
  color: #fff;
  font-size: 11px;
  font-weight: 650;
  padding: 3px 6px;
  width: 100%;
  margin-top: 2px;
}
.db-device-name-input:focus {
  border-color: var(--brand);
  outline: none;
}

/* Sector / Block Selection & Inspector */
.db-widget-box {
  cursor: pointer;
}
.db-widget-box.db-sector-selected {
  outline: 2px solid var(--accent, #f1873d)!important;
  outline-offset: 3px;
  box-shadow: 0 0 25px rgba(241,135,61,0.35)!important;
  position: relative;
}
.db-sector-tag {
  position: absolute;
  top: -10px;
  left: 12px;
  background: var(--accent, #f1873d);
  color: #111;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 10px;
  letter-spacing: .03em;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  z-index: 20;
  pointer-events: none;
}
.db-sector-panel {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  margin: 8px 0 16px;
}
.db-sector-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.db-sector-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 750;
  color: var(--brand);
  background: var(--brand-soft);
  border: 1px solid var(--brand-border);
  padding: 4px 10px;
  border-radius: 8px;
  width: fit-content;
}
.db-sector-pill.active {
  color: #fff;
  background: var(--accent, #f1873d);
  border-color: var(--accent, #f1873d);
}
.db-sector-body {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.db-sector-footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  display: flex;
  justify-content: flex-end;
}
.db-sector-custom-fields {
  background: rgba(0,0,0,0.15);
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 8px;
}
.db-sector-custom-fields label {
  margin: 6px 0;
}

/* Card Drag-and-Drop Reordering with Mouse */
.db-widget-box {
  cursor: grab;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  container-type: inline-size;
  container-name: card;
}
.db-widget-box:active {
  cursor: grabbing;
}
.db-widget-box.db-card-dragging {
  opacity: 0.35!important;
  transform: scale(0.97)!important;
  border: 2px dashed var(--accent, #f1873d)!important;
  cursor: grabbing!important;
}
.db-widget-box.db-card-drag-over {
  outline: 2px solid var(--accent, #f1873d)!important;
  outline-offset: 4px!important;
  box-shadow: 0 0 25px rgba(241,135,61,0.45)!important;
}

/* Corner Resizer Handle (потягнути за краєчок) */
.db-card-resizer {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #64748b;
  user-select: none;
  z-index: 15;
  transition: color 0.15s ease, transform 0.15s ease;
  opacity: 0.45;
  pointer-events: auto;
}
.db-widget-box:hover .db-card-resizer {
  opacity: 1;
  color: var(--accent, #f1873d);
}
.db-card-resizer:hover {
  transform: scale(1.3);
  color: #fff;
}

/* Auto-scaling text & metrics based on card scale with minimum readability clamp */
.db-widget-box {
  --card-scale: 1;
  padding: clamp(10px, calc(14px * var(--card-scale, 1)), 20px);
  box-sizing: border-box;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}
.db-widget-box * {
  box-sizing: border-box;
}
.db-widget-box[style*="width"] {
  max-width: 100%;
}
.db-metric-value {
  font-size: clamp(18px, calc(26px * var(--card-scale, 1)), 34px);
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db-metric-value small {
  font-size: clamp(10.5px, calc(13px * var(--card-scale, 1)), 15px);
  font-weight: 600;
  margin-left: 4px;
}
.db-widget-head b {
  font-size: clamp(11px, calc(13px * var(--card-scale, 1)), 15px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.db-widget-head span {
  font-size: clamp(12px, calc(14px * var(--card-scale, 1)), 16px);
  flex-shrink: 0;
}
.db-meter {
  height: clamp(4px, calc(6px * var(--card-scale, 1)), 8px);
}
.db-metric p {
  font-size: clamp(10px, calc(11px * var(--card-scale, 1)), 12px);
  margin: calc(4px * var(--card-scale, 1)) 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Responsive scaling via Container Queries when shrunk */
@container card (max-width: 280px) {
  .db-metric-value { font-size: 20px; }
  .db-metric-value small { font-size: 10.5px; }
  .db-widget-head b { font-size: 11.5px; }
  .db-widget-head span { font-size: 12px; }
  .db-metric p { display: none; }
  .db-meter { height: 4px; }
  .db-widget-head { margin-bottom: 4px; }
  .db-subfields-container {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  .db-subfield-item {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 5px 8px !important;
  }
  .db-subfield-label {
    font-size: 10px !important;
  }
  .db-subfield-val {
    font-size: 13px !important;
    margin-top: 0 !important;
  }
  .db-subfield-progress {
    display: none !important;
  }
}
@container card (max-width: 190px) {
  .db-metric-value { font-size: 16px; }
  .db-metric-value small { font-size: 9.5px; }
  .db-widget-head b { font-size: 10.5px; }
  .db-meter { height: 3px; }
  .db-metric { padding: 8px 6px; }
}

/* Internal Sub-fields / Multi-field layout inside Card */
.db-subfields-container {
  display: grid;
  gap: calc(8px * var(--card-scale, 1));
  width: 100%;
  margin-top: calc(8px * var(--card-scale, 1));
}
.db-subfields-container[data-layout="col"] {
  grid-template-columns: repeat(var(--sub-cols, 2), minmax(0, 1fr));
}
.db-subfields-container[data-layout="row"] {
  grid-template-columns: 1fr;
}
.db-subfields-container[data-layout="grid"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.db-subfield-item {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
  min-width: 0;
}
.db-subfield-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
.db-subfield-label {
  font-size: calc(9.5px * var(--card-scale, 1));
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.db-subfield-val {
  font-size: calc(15px * var(--card-scale, 1));
  font-weight: 750;
  color: #fff;
  margin-top: 2px;
  display: flex;
  align-items: baseline;
  gap: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.db-subfield-val small {
  font-size: calc(9px * var(--card-scale, 1));
  color: #64748b;
}
.db-subfield-progress {
  height: calc(3px * var(--card-scale, 1));
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  margin-top: 4px;
  overflow: hidden;
}
.db-subfield-progress > span {
  display: block;
  height: 100%;
  border-radius: 2px;
}

/* Light theme overrides for subfields */
.db-preview[data-theme-mode^="light_"] .db-subfield-item {
  background: #f8fafc;
  border-color: #e2e8f0;
}
.db-preview[data-theme-mode^="light_"] .db-subfield-val {
  color: #0f172a;
}
.db-preview[data-theme-mode^="light_"] .db-subfield-label {
  color: #64748b;
}
.db-preview[data-theme-mode^="light_"] .db-subfield-progress {
  background: #e2e8f0;
}

/* -------------------------------------------------------------
   Quick Device Inspector Modal / Flyout (Double-Click & 🔍)
------------------------------------------------------------- */
.db-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: dbFadeIn 0.15s ease-out;
}
.db-modal-backdrop[hidden] {
  display: none !important;
}
@keyframes dbFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes dbModalPop {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
.db-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 660px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  background: #090f17;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(241, 135, 61, 0.25);
  overflow: hidden;
  animation: dbModalPop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.db-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}
.db-modal-head h3 {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
}
.db-modal-sub {
  font-size: 11px;
  color: #94a3b8;
}
.db-modal-close-btn {
  background: transparent;
  border: none;
  font-size: 18px;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s ease;
}
.db-modal-close-btn:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
.db-modal-body {
  padding: 16px 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.db-modal-top-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.db-modal-top-row label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11.5px;
  color: #cbd5e1;
  font-weight: 600;
}
.db-modal-top-row input {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 8px 12px;
  color: #fff;
  font-size: 13px;
  outline: none;
}
.db-modal-top-row input:focus {
  border-color: #f1873d;
}
.db-modal-photo-section {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.db-modal-section-title {
  font-size: 11px;
  font-weight: 750;
  color: #e2e8f0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.db-modal-photo-row {
  display: flex;
  gap: 12px;
  align-items: center;
}
.db-modal-photo-preview {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}
.db-modal-photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.db-modal-photo-preview span {
  font-size: 9.5px;
  color: #64748b;
  text-align: center;
  padding: 4px;
}
.db-modal-photo-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.db-modal-sensor-section label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11.5px;
  color: #cbd5e1;
  font-weight: 600;
}
.db-modal-sensor-section input {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 8px 12px;
  color: #38bdf8;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  outline: none;
}
.db-modal-sensor-section input:focus {
  border-color: #38bdf8;
}
.db-modal-mppt-section {
  background: rgba(245, 158, 11, 0.04);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.db-modal-mppt-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.db-modal-mppt-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.db-modal-mppt-row {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 80px 1fr 100px 90px 1fr 30px;
  gap: 8px;
  align-items: center;
  font-size: 11px;
}
.db-modal-mppt-row input {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 4px 6px;
  color: #fff;
  font-size: 11px;
}
.db-modal-mppt-row-result {
  font-weight: 700;
  white-space: nowrap;
}
.db-modal-footer {
  display: flex;
  align-items: center;
  padding: 12px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.25);
  gap: 10px;
}

@media (max-width: 600px) {
  .db-modal-mppt-row {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
}



#db-preview[data-station-photo=true] .db-widget-box {background:color-mix(in srgb,var(--surface,#111827) 68%,transparent);}

/* Card-local reflow: resizing one card must not depend on the entire canvas. */
.db-flow-details {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px;margin-top:16px}
.db-flow-detail {min-width:0;padding:12px;border:1px solid var(--border,#334155);border-radius:10px;background:var(--surface,#111827)}
.db-flow-detail strong,.db-flow-detail small {display:block;overflow-wrap:anywhere;margin-bottom:8px}
.db-flow-detail strong {font-size:13px;line-height:1.4}
.db-flow-detail small {font-size:11px;opacity:.7}
.db-flow-detail-value {display:flex;justify-content:space-between;gap:12px;font-size:13px}
.db-flow-configure {margin-top:12px;white-space:normal}
.db-branch-editor {min-width:0;border:1px solid var(--border,#334155);border-radius:8px;margin:12px 0;padding:10px}
.db-branch-editor input,.db-branch-editor select {width:100%}
.db-flow-container-wrap {grid-template-columns:minmax(0,1fr) minmax(180px,240px)}
.db-widget-box {height:auto;align-self:start}
.db-card-resizer {touch-action:none}
.db-subfields-container[data-layout] {grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr))}
.db-subfields-container[data-layout="row"] {grid-template-columns:1fr}
@container card (max-width:760px) {
  .db-flow-container-wrap {grid-template-columns:minmax(0,1fr)!important}
  .db-flow-side-column {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px}
  .db-flow-summary-bar {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container card (max-width:420px) {
  .db-flow {height:340px}
  .db-flow-node {width:78px;min-width:0;max-width:78px;padding:8px 4px}
  .db-flow-node[data-role=inverter] {width:88px;height:auto;min-height:88px}
  .db-flow-node i {font-size:18px}
  .db-flow-node span,.db-flow-node[data-role=inverter] span {font-size:10px;line-height:1.25;word-break:normal}
  .db-flow-node b,.db-flow-node[data-role=inverter] b {font-size:15px}
  .db-flow-node small {font-size:10px}
}

/* A single contextual inspector follows the selected card, with its own scroll. */
.db-editor {position:sticky;top:76px;max-height:calc(100dvh - 92px);overflow-y:auto;overscroll-behavior:contain}
.db-editor [hidden] {display:none!important}
.db-editor-tabs {display:flex;gap:6px;position:sticky;top:-18px;background:var(--surface,#111827);z-index:20;padding:10px 0}
.db-editor-tabs button {flex:1;font-size:12px;white-space:normal}
.db-editor-tabs button[aria-pressed=true] {border-color:#f1873d;color:#f1873d}
.db-selected-flow-settings {border-top:1px solid #334155;margin-top:12px}
.db-flow-container-wrap {grid-template-columns:minmax(0,1fr)!important}
.db-flow-side-column {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px}
@media(max-width:760px){.db-editor{position:relative;top:auto;max-height:50dvh}}

/* Library controls follow the editor viewport, not the simulated device. */
#dashboard-app #db-template-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
#dashboard-app #db-element-gallery{margin-top:20px}
#dashboard-app .db-element-gallery-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:12px 0}
#dashboard-app .db-element-gallery-grid button{min-width:0!important;width:100%}
@media(max-width:1000px){#dashboard-app #db-template-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){#dashboard-app .db-element-gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:380px){#dashboard-app #db-template-cards{grid-template-columns:1fr}}

/* Brand headings stay independent of telemetry series colours. */
#dashboard-app .db-widget-head > b,
#dashboard-app .db-widget-head > div > b,
#dashboard-app .db-forecast-title-box b { color: #ff8730; }
#dashboard-app .db-widget-bindings {min-width:0;margin-top:14px;border:1px solid #344352;border-radius:9px;padding:10px;}
#dashboard-app .db-widget-bindings legend {color:#ff8730;}
#dashboard-app .db-widget-bindings label {display:block;margin:10px 0;}
#dashboard-app .db-widget-bindings input {width:100%;min-width:0;box-sizing:border-box;}

/* Unified Compact Metrics Group & Tile Styling */
.db-compact-group {
  grid-column: 1 / -1;
  background: var(--surface, #0f1722);
  border: 1px solid var(--border, #1e2c3d);
  border-radius: var(--radius, 16px);
  padding: 16px 18px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.db-compact-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding-bottom: 10px;
}
.db-compact-group-grid {
  display: grid;
  grid-template-columns: repeat(var(--compact-cols, 4), minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}
.db-compact-card {
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.db-compact-add-tile {
  background: rgba(255, 255, 255, 0.02);
  border: 2px dashed rgba(255, 255, 255, 0.15);
  border-radius: var(--radius, 14px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  cursor: pointer;
  color: var(--text-muted, #94a3b8);
  transition: all 0.2s ease;
  padding: 12px;
  text-align: center;
}
.db-compact-add-tile:hover {
  background: rgba(241, 135, 61, 0.08);
  border-color: var(--accent, #f1873d);
  color: #fff;
  transform: translateY(-2px);
}
.db-compact-add-tile span {
  font-size: 26px;
  line-height: 1;
  margin-bottom: 6px;
  color: var(--accent, #f1873d);
}
.db-compact-add-tile small {
  font-size: 11px;
  font-weight: 700;
}
@media (max-width: 900px) {
  .db-compact-group-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  }
}

/* Subfields Inspector Customizer */
.db-subfield-edit-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.db-subfield-edit-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 11.5px;
}
.db-subfield-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 4px;
}
.db-subfield-edit-grid input {
  width: 100%;
  font-size: 11px;
  padding: 5px 8px;
}

/* Freeform desktop placement: resized weather and chart cards share available rows. */
#db-canvas.db-free-layout { display:flex; flex-wrap:wrap; align-items:flex-start; gap:14px; }
#db-canvas.db-free-layout > .db-widget-box { flex:0 0 auto; max-width:100%; min-width:0; }
#db-canvas.db-free-layout > .db-widget-box.db-free-widget { min-width:min(100%,300px); max-width:100%; }
#db-canvas.db-free-layout > .db-widget-box[data-size="full"]:not(.db-free-widget),
#db-canvas.db-free-layout > .db-flow-widget,
#db-canvas.db-free-layout > .db-compact-group { flex-basis:100%; width:100%; }
#db-canvas.db-free-layout .db-auto-fit-btn { font-size:10px; font-weight:700; }
@media(max-width:700px) {
 #db-canvas.db-free-layout { display:flex; flex-direction:column; flex-wrap:nowrap; }
 #db-canvas.db-free-layout > .db-widget-box { width:100%!important; flex:0 0 auto!important; }
}
.db-viewport-container[data-viewport="mobile"] #db-canvas.db-free-layout { display:flex!important; flex-direction:column; }
.db-viewport-container[data-viewport="mobile"] #db-canvas.db-free-layout > .db-widget-box { width:100%!important; flex:0 0 auto!important; }

/* Manual two-axis positioning, while AUTO only fills available horizontal space. */
#db-canvas.db-free-layout { position:relative; align-content:flex-start; }
#db-canvas.db-free-layout > .db-widget-box.db-manual-position { position:absolute; margin:0; }
@media(max-width:700px){#db-canvas.db-free-layout > .db-widget-box.db-manual-position{position:relative!important;left:auto!important;top:auto!important;width:100%!important;}}
.db-viewport-container[data-viewport="mobile"] #db-canvas.db-free-layout > .db-widget-box.db-manual-position{position:relative!important;left:auto!important;top:auto!important;width:100%!important;}

/* Live drag feedback: visible outline immediately on pointer press, no animation lag. */
#db-canvas.db-free-layout > .db-widget-box.db-card-grabbed,
#db-canvas.db-free-layout > .db-widget-box.db-card-resizing {
  outline: 2px solid #38bdf8 !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(56,189,248,.14), 0 12px 32px rgba(0,0,0,.35) !important;
  transition: none !important;
  will-change: left,top,width,height;
}
#db-canvas.db-free-layout > .db-widget-box.db-card-grabbed { cursor: grabbing !important; }
#db-canvas.db-free-layout > .db-widget-box.db-card-resizing { cursor: nwse-resize !important; }
/* Flow scene stays inside the visible preview at any monitor width. */
#dashboard-app .db-flow-widget,
#dashboard-app .db-flow-container-wrap,
#dashboard-app .anma-scene-scroll { min-width:0; max-width:100%; box-sizing:border-box; }
#dashboard-app .anma-scene-scroll { overflow:hidden; }
#dashboard-app .anma-scene { overflow:visible; }

/* Weather/chart horizontal resize: do not let flex-basis or max-width override live width. */
#db-canvas.db-free-layout > .db-free-widget.db-card-resizing {
  flex-grow:0 !important; flex-shrink:0 !important; max-width:none !important;
  transition:none !important;
}

/* Equipment and PV cards use the same live, horizontal-only AUTO layout as weather/chart. */
#db-canvas.db-free-layout > .db-free-widget[data-widget-role="equipment_status"],
#db-canvas.db-free-layout > .db-free-widget[data-widget-role="pv_fields"] { min-width:min(100%,300px); box-sizing:border-box; }
#db-canvas.db-free-layout > .db-free-widget[data-widget-role="equipment_status"] *,
#db-canvas.db-free-layout > .db-free-widget[data-widget-role="pv_fields"] * { min-width:0; }

/* Gallery-created elements share the dashboard's manual and AUTO geometry. */
#db-canvas.db-free-layout > .db-custom-gallery-card {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(110px,100%),1fr));
  align-content:start; gap:12px; padding:16px; box-sizing:border-box;
  min-width:min(100%,220px); container-type:inline-size;
}
#db-canvas.db-free-layout > .db-custom-gallery-card > style {display:none}
#db-canvas.db-free-layout > .db-custom-gallery-card .anma-element {min-width:0;max-width:100%;padding:clamp(7px,2cqw,18px)}
#db-canvas.db-free-layout > .db-custom-gallery-card .anma-element strong {font-size:clamp(13px,3cqw,24px)}
#db-canvas.db-free-layout > .db-custom-gallery-card .anma-element-children {grid-template-columns:repeat(auto-fit,minmax(min(100%,110px),1fr))!important}
@media(max-width:700px){#db-canvas.db-free-layout > .db-custom-gallery-card {width:100%!important;}}

/* ANMA Dashboards v0.1 — manual Home Assistant install dialog */
.db-ha-install-trigger{border:1px solid #f1873d!important;color:#ffac68!important}
.db-ha-install-backdrop[hidden]{display:none!important}
.db-ha-install-backdrop{position:fixed;inset:0;z-index:10000;background:rgba(0,0,0,.78);display:grid;place-items:center;padding:18px}
.db-ha-install-dialog{width:min(720px,100%);max-height:90vh;overflow:auto;background:#0c1723;color:#dbe7f1;border:1px solid #f1873d;border-radius:16px;padding:24px;box-shadow:0 18px 80px #000a;line-height:1.55}
.db-install-method{margin:16px 0;border-top:1px solid #304152;padding-top:16px;min-width:0}.db-install-method>summary{cursor:pointer;font-weight:700;color:#ff9b46}.db-install-method input[readonly]{box-sizing:border-box;width:100%;min-width:0;padding:10px;background:#0c1723;color:#a7d9ff;border:1px solid #526677;border-radius:8px;font:inherit}.db-install-method a{color:#a7d9ff}.db-install-method [role=status]:empty{display:none}
.db-ha-install-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.db-ha-install-head small{color:#f1873d}.db-ha-install-head h2{margin:4px 0 12px;color:#ff9b46}.db-ha-install-head button{background:#172434;border:1px solid #425268;color:#fff;border-radius:8px;padding:8px 12px;cursor:pointer}
.db-ha-install-step{border:1px solid #304152;background:#111f2d;border-radius:10px;padding:14px;margin:12px 0}.db-ha-install-step b{color:#ff9b46}.db-ha-install-step p{margin:7px 0 12px}.db-ha-install-step .btn{display:inline-block;margin:4px 8px 4px 0;padding:8px 12px;text-decoration:none}.db-ha-install-step code{overflow-wrap:anywhere;color:#a7d9ff}.db-ha-install-note{font-size:12px;color:#a9b6c7}

.db-version-trigger{cursor:pointer;font:inherit;vertical-align:middle}.db-version-trigger:hover,.db-version-trigger:focus-visible{box-shadow:0 0 0 2px #f1873d88;outline:none}

/* Single Power Flow dashboard uses its own compact header. */
#db-preview:has(#db-canvas > .apf:only-child) > .db-preview-head,
#db-preview:has(#db-canvas > .apf:only-child) > .db-preview-note{display:none}
#dashboard-app.db-kiosk-fullscreen:has(.apf:only-child) .db-device-frame,
#dashboard-app.db-kiosk-fullscreen:has(.apf:only-child) .db-preview{padding:0!important}
#dashboard-app.db-kiosk-fullscreen .apf[data-fit=true]{height:100dvh;max-height:none;min-height:0;--apf-height:100dvh}

/* Equipment editor: preserve desktop rows, stack controls in narrow previews. */
.db-device-actions{display:contents}
@container dbframe (max-width:600px){
  .db-device-section{margin-top:14px;padding-top:12px}
  .db-device-section>.db-section-title{flex-wrap:wrap;gap:6px}
  .db-device-section>.db-section-title .db-hint{flex-basis:100%;margin-left:0!important;font-size:10px}
  #db-devices{max-height:min(42svh,360px);overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding-right:4px}
  .db-device{display:grid;grid-template-columns:28px minmax(0,1fr);gap:6px 8px;padding:9px 0;position:relative}
  .db-device>.db-device-icon,.db-device>.db-device-thumb{width:28px;height:28px}
  .db-device-copy{grid-column:2;min-width:0}
  .db-device .db-device-name-input{width:100%;min-width:0;box-sizing:border-box;font-size:12px;min-height:30px}
  .db-device-copy small{display:block;font-size:9px;line-height:1.4;overflow-wrap:anywhere}
  .db-device-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
  .db-device-actions>input{width:50px;min-width:0;min-height:32px;margin-right:auto;box-sizing:border-box}
  .db-device-actions>button{min-width:32px;min-height:32px;padding:4px 6px;font-size:11px}
}

/* Shared, always-visible card actions match the Power Flow toolbar. */
#dashboard-app .db-card-controls {
  position:relative; inset:auto; display:flex; justify-content:flex-end;
  flex-wrap:wrap; align-self:stretch; flex-shrink:0; gap:6px;
  width:100%; margin:0 0 8px; padding:0; border:0; background:transparent;
  border-radius:0; opacity:1; z-index:2;
}
#dashboard-app .db-card-controls button {
  width:32px; min-width:32px; height:32px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #526579; border-radius:8px; background:#152532;
  color:#e9f2f8; font:14px system-ui; cursor:pointer;
}
#dashboard-app .db-card-controls button:hover,
#dashboard-app .db-card-controls button:focus-visible {border-color:#f1873d;background:#243443;outline-offset:2px}
#dashboard-app .db-card-controls .db-auto-fit-btn {width:auto;padding:0 8px;font-size:10px}
#dashboard-app .db-widget-box:fullscreen {background:#0c1822;overflow:auto;padding:12px;box-sizing:border-box}
#dashboard-app .db-flow-widget:fullscreen {display:flex;flex-direction:column;height:100dvh}
#dashboard-app .db-flow-widget:fullscreen .db-flow-container-wrap {flex:1;min-height:0}
#dashboard-app .db-flow-widget:fullscreen .anma-scene-scroll {height:100%;display:flex;flex-direction:column}
#dashboard-app .db-flow-widget:fullscreen .anma-scene {flex:1;min-height:0;aspect-ratio:auto!important}

/* Compact builder chrome on phones; dashboard content keeps its own breakpoints. */
@media(max-width:600px){
  #dashboard-app .db-heading{gap:10px;margin-bottom:12px}
  #dashboard-app .db-heading h1{font-size:24px;line-height:1.2;margin:0 0 6px}
  #dashboard-app .db-heading .db-beta{font-size:12px;padding:4px 6px;vertical-align:middle}
  #dashboard-app .db-heading .db-eyebrow{display:none}
  #dashboard-app .db-heading p{display:none}
  #dashboard-app .db-actions{display:flex;flex-wrap:wrap;gap:6px}
  #dashboard-app .db-actions [data-mobile-icon]{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;min-width:40px;padding:0;font-size:0;gap:0}
  #dashboard-app .db-actions [data-mobile-icon] span{font-size:0}
  #dashboard-app .db-actions [data-mobile-icon]::before{content:attr(data-mobile-icon);font:20px/1 system-ui}
  #dashboard-app #db-template-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  #dashboard-app .db-template-card{grid-template-columns:minmax(0,1fr);min-width:0;padding:4px;justify-content:center;gap:0;min-height:52px}
  #dashboard-app .db-template-card>span:not(.db-template-mini){display:none}
  #dashboard-app .db-template-mini{width:100%;min-width:0;height:38px;font-size:17px;gap:3px}
  #dashboard-app .db-template-heading{gap:8px;flex-wrap:wrap}
  #dashboard-app .db-template-heading h2{font-size:13px}
  #dashboard-app #db-template-demo{font-size:11px;margin:6px 0}
  #dashboard-app #db-element-gallery{padding:8px!important}
  #dashboard-app #db-element-gallery summary{font-size:13px}
  #dashboard-app #db-element-gallery>p{display:none}
  #dashboard-app .db-element-gallery-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;margin-top:8px}
  #dashboard-app .db-element-gallery-grid button{min-width:0!important;width:100%;height:44px;padding:4px!important;gap:0!important;font-size:0}
  #dashboard-app .db-element-gallery-grid button>span{width:30px!important;height:30px!important;font-size:17px!important}
  #dashboard-app #db-element-gallery>button{font-size:11px;padding:6px 8px;margin-top:8px}
}

@media(max-width:600px){#dashboard-app .db-template-mini{font-size:13px}#dashboard-app .db-template-mini i{width:10px;height:10px;flex-shrink:1}}

@media(max-width:600px){#dashboard-app .db-element-gallery-grid [data-gallery-type=gauge]>span{font-size:11px!important;letter-spacing:-2px}}

#dashboard-app .db-template-mini:has(svg){display:flex;align-items:center;justify-content:center}
#dashboard-app .db-template-mini svg{display:block;width:48px;height:40px;max-width:100%;flex-shrink:1}
@media(max-width:600px){#dashboard-app .db-template-mini svg{width:38px;height:32px}}