@media (max-width: 980px) {
  .ecoflow-summary,
  .ecoflow-metrics,
  .ecoflow-statusbar {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .energy-overlay {
    padding: 22px 12px;
  }

  .energy-overlay-topbar {
    grid-template-columns: 1fr;
  }

  .ecoflow-summary,
  .ecoflow-metrics,
  .ecoflow-statusbar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1100px) {
  .app-layout,
  .insights-grid {
    grid-template-columns: 1fr 1fr;
  }

  .insights-grid .panel:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .page {
    width: min(100% - 22px, 1280px);
    padding-top: 18px;
  }

  .topbar,
  .search-row,
  .app-layout,
  .insights-grid,
  .energy-layout {
    grid-template-columns: 1fr;
  }

  .weather {
    justify-content: flex-start;
    white-space: normal;
  }

  .clock {
    min-width: 0;
    text-align: left;
  }

  .search-button {
    width: 100%;
  }
  .app-grid,
  .metric-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .media-grid {
    grid-template-columns: 1fr;
  }

  .slideshow-tile {
    grid-template-columns: 1fr;
  }

  .media-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .youtube-tools {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .youtube-search {
    grid-template-columns: minmax(0, 1fr) 34px;
  }

  .youtube-result {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .youtube-result img {
    width: 72px;
  }

  .youtube-logo {
    width: 68px;
    height: 68px;
  }
}

@media (max-width: 920px) {
  .weather-hourly,
  .weather-daily {
    overflow-x: auto;
  }
}

@media (max-width: 620px) {
  .weather-panel {
    padding: 16px;
  }

  .weather-panel-main {
  display: grid;
  place-items: center;
  min-height: 188px;
  margin: 8px 0 16px;
  text-align: center;
}

  .weather-panel-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .weather-panel-primary {
    flex-wrap: wrap;
  }

  .weather-panel-side {
    max-width: none;
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 760px) {
  .gallery-panel {
    width: 96vw;
    height: 94vh;
  }

  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }

  .gallery-preview {
    padding: 54px 44px;
  }
}

@media (max-width: 760px) {
  .side-menu-toggle {
    top: 18px;
    left: 12px;
    width: 42px;
    height: 42px;
  }

  .side-menu {
    top: 10px;
    bottom: 10px;
    left: 10px;
    width: min(360px, calc(100vw - 20px));
  }
}

@media (max-width: 420px) {
  .settings-fields.two-columns,
  .settings-field-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .config-center-dialog {
    width: 96vw;
    height: 94vh;
  }

  .config-center-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .config-center-nav {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }
}

@media (max-width: 980px) {
  .theme-builder-editor-grid,
  .theme-color-editor {
    grid-template-columns: 1fr;
  }

  .theme-preview {
    position: static;
  }
}

@media (max-width: 1100px) {
  .theme-creator-body { grid-template-columns: 180px 1fr; }
  .theme-creator-body aside { display: none; }
}

@media (max-width: 900px) {
  .theme-creator-form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .lights-config-title,
  .lights-config-header,
  .lights-config-room,
  .lights-assignment-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .lights-config-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 1100px) {
  .lights-room-layout,
  .lights-room-layout.has-detail {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .lights-detail {
    grid-column: 1;
    position: static;
    width: 100%;
    max-width: 100%;
  }

  .lights-row {
    grid-template-columns: minmax(190px, 1fr) auto;
  }

  .lights-brightness {
    grid-column: 1 / -1;
  }
}

@media (max-width: 680px) {
  .lights-row {
    grid-template-columns: 1fr;
  }

  .lights-row-arrow {
    display: none;
  }
}

@media (max-width: 1180px) {
  body.has-custom-layout .theme-layout-page.is-lights-room-active {
    height: auto;
    min-height: 100svh;
    overflow-y: auto;
  }

  body.has-custom-layout .lights-module.is-room-view.panel,
  body.has-custom-layout .lights-module.is-room-view.panel.panel-lights {
    width: min(920px, calc(100vw - 48px));
    height: auto;
    max-height: none;
    margin: 28px auto 120px;
  }

  body.has-custom-layout .lights-room-layout.has-detail {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
  }

  body.has-custom-layout .lights-detail {
    grid-column: 1;
    width: min(360px, 100%);
    max-width: 100%;
    max-height: none;
    justify-self: center;
  }

  body.has-custom-layout .lights-row-list {
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 760px) {
  body.has-custom-layout .lights-module.is-room-view.panel,
  body.has-custom-layout .lights-module.is-room-view.panel.panel-lights {
    width: calc(100vw - 28px);
    margin-top: 18px;
  }

  body.has-custom-layout .lights-room-view-heading {
    margin-bottom: 24px;
  }

  body.has-custom-layout .lights-scenes-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body.has-custom-layout .lights-row,
  body.has-custom-layout .lights-room-layout.has-detail .lights-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
  }

  body.has-custom-layout .lights-brightness.is-compact {
    grid-template-columns: 22px minmax(0, 1fr) 22px 54px;
  }
}

@media (max-width: 1280px) {
  body.has-custom-layout .lights-module.is-room-view:has(.lights-room-view.has-details) {
    width: min(1180px, calc(100vw - 96px));
    max-width: min(1180px, calc(100vw - 96px));
  }

  body.has-custom-layout .lights-room-view.has-details .lights-room-layout.has-detail {
    grid-template-columns: minmax(700px, 1fr) 276px;
    column-gap: 5px;
  }

  body.has-custom-layout .lights-room-view.has-details .lights-row {
    grid-template-columns: minmax(260px, 1fr) 60px minmax(300px, 1fr);
    gap: 12px;
  }

  body.has-custom-layout .lights-room-view.has-details .lights-brightness.is-compact {
    grid-template-columns: 18px minmax(180px, 1fr) 18px 48px;
  }

  body.has-custom-layout .lights-room-view.has-details .lights-detail {
    width: 276px;
    max-width: 276px;
  }
}

@media (max-width: 700px) {
.lights-scene-gallery { padding: 18px 0 32px; }
.lights-scene-gallery-heading { align-items: flex-start; }
.lights-scene-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .ecoflow-chart {
    gap: 5px;
    padding-inline: 5px;
  }

  .ecoflow-chart-day {
    grid-template-rows: 18px 72px 18px;
  }

  .ecoflow-chart-bar-track {
    height: 72px;
  }
}

@media (max-height: 860px) and (min-width: 621px) {
  .ecoflow-chart {
    min-height: 72px;
    padding: 8px 7px 6px;
  }

  .ecoflow-chart-day {
    grid-template-rows: 16px minmax(40px, 64px) 16px;
  }

  .ecoflow-chart-bar-track {
    height: 64px;
  }
}

@media (max-width: 700px) { .lights-dashboard-row { grid-template-columns: 24px minmax(70px, 1fr) minmax(70px, 1fr) 38px; gap: 7px; } .lights-page-header { grid-template-columns: 42px 1fr 42px; } .lights-page-nav { width: 38px; height: 38px; font-size: 22px; } }



@media (max-width: 760px) {
  .config-center-overlay {
    padding: 6px;
  }

  .config-center-nav {
    gap: 0;
    padding: 5px;
  }

  .config-nav-section {
    display: contents;
  }

  .config-nav-section h3 {
    display: none;
  }

  .config-center-content {
    padding: 10px;
  }
}

@media (max-width: 1100px) {
  #dashboard-app .config-center-content .settings-item {
    grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.35fr);
  }

  #dashboard-app .config-center-content .settings-item > label:last-child {
    grid-column: 2 / -1;
  }

  #dashboard-app .config-center-content .lights-config-room,
  #dashboard-app .config-center-content .lights-assignment-row {
    grid-template-columns: minmax(0, 1fr) minmax(140px, 0.7fr) auto;
  }
}

@media (max-width: 760px) {
  #dashboard-app .config-center-content .settings-fields > label,
  #dashboard-app .config-center-content .settings-wide-field,
  #dashboard-app .config-center-content .settings-color-field {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  #dashboard-app .config-center-content .settings-item,
  #dashboard-app .config-center-content .lights-config-room,
  #dashboard-app .config-center-content .lights-assignment-row {
    grid-template-columns: 1fr;
    gap: 5px;
    padding-left: 0;
  }

  #dashboard-app .config-center-content .settings-item > label:last-child {
    grid-column: auto;
  }

  #dashboard-app .config-center-content .settings-item-title {
    margin-top: 4px;
  }
}

@media (max-width: 900px) {
  .energy-settings-row {
    grid-template-columns: minmax(150px, 1fr) repeat(2, minmax(82px, .6fr));
  }
  .energy-settings-row .energy-settings-label,
  .energy-settings-row label:nth-last-child(2),
  .energy-settings-row label:last-child {
    grid-column: span 1;
  }
}

@media (max-width: 620px) {
  .energy-settings-row {
    grid-template-columns: 1fr 1fr;
  }
  .energy-settings-parameter {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) { .lights-group-main-row { grid-template-columns: minmax(0, 1fr) 48px; } .lights-group-main-row .lights-brightness { grid-column: 1 / -1; } .lights-group-members-grid { padding-left: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 1100px) {
  body.has-custom-layout,
  html body.has-custom-layout #dashboard,
  html body.has-custom-layout #dashboard-app,
  html body.has-custom-layout #dashboard-app .dashboard-stack,
  html body.has-custom-layout #dashboard-app .theme-layout-page,
  html body.has-custom-layout #dashboard-app .theme-layout-page > .theme-layout-item,
  html body.has-custom-layout #dashboard-app .wr-home,
  html body.has-custom-layout #dashboard-app .wr-apps-page,
  html body.has-custom-layout #dashboard-app .wr-module-page {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  html body.has-custom-layout #dashboard-app .theme-layout-page {
    align-content: start !important;
  }

  html body.has-custom-layout #dashboard-app .theme-layout-page > .theme-layout-item {
    min-height: 0 !important;
  }
}

@media (max-width: 980px) { .lights-bevahg-gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (max-width: 700px) { .lights-bevahg-scenes-heading { align-items: stretch; flex-direction: column; } .lights-bevahg-category-filter { min-width: 0; } .lights-bevahg-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lights-bevahg-category-row { grid-template-columns: 1fr 1fr; } .lights-bevahg-category-row .inline-actions { grid-column: 1 / -1; } }

@media (max-width: 420px) { .lights-bevahg-gallery-grid { grid-template-columns: 1fr; } }

@media (max-width: 1050px) {
  body.has-custom-layout .lights-scenes-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body.has-custom-layout .lights-row {
    grid-template-columns: minmax(0, 1fr) 58px minmax(220px, .9fr);
  }
}

@media (max-width: 760px) {
  body.has-custom-layout .lights-scenes-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.has-custom-layout .lights-row {
    grid-template-columns: minmax(0, 1fr) 52px;
  }

  body.has-custom-layout .lights-row .lights-brightness {
    grid-column: 1 / -1;
  }

  body.has-custom-layout .lights-row-info {
    grid-template-columns: 28px 54px minmax(0, 1fr);
    gap: 8px;
  }

  body.has-custom-layout .lights-row-icon {
    width: 52px;
    height: 52px;
  }
}

@media (max-width: 460px) {
  body.has-custom-layout .lights-scenes-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.has-custom-layout .lights-favorites-panel {
    padding-inline: 8px;
  }
}

@media (max-width: 1050px) {
  body.has-custom-layout .lights-room-view:not(.has-details) .lights-row {
    grid-template-columns: minmax(0, 1fr) 52px minmax(210px, .9fr);
  }
}

@media (max-width: 760px) {
  body.has-custom-layout .lights-room-view:not(.has-details) .lights-scenes-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.has-custom-layout .lights-room-view:not(.has-details) .lights-scenes-strip .lights-bevahg-favorite-card,
  body.has-custom-layout .lights-room-view:not(.has-details) .lights-scenes-strip .lights-scene-add {
    width: auto;
    height: 100%;
  }

  body.has-custom-layout .lights-room-view:not(.has-details) .lights-scenes-strip .lights-scene-add {
    flex: initial;
  }

  body.has-custom-layout .lights-room-view:not(.has-details) .lights-row {
    grid-template-columns: minmax(0, 1fr) 50px;
  }

  body.has-custom-layout .lights-room-view:not(.has-details) .lights-row .lights-brightness {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  body.has-custom-layout .lights-room-view.has-details .lights-scenes-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body.has-custom-layout .lights-room-view.has-details .lights-scenes-strip .lights-bevahg-favorite-card,
  body.has-custom-layout .lights-room-view.has-details .lights-scenes-strip .lights-scene-add {
    width: auto;
    height: 100%;
  }

  body.has-custom-layout .lights-room-view.has-details .lights-scenes-strip .lights-scene-add {
    flex: initial;
  }
}

@media (max-width: 1100px) { body .lights-bevahg-gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

@media (max-width: 700px) { body .lights-bevahg-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } body .lights-bevahg-category-button { min-height: 42px; padding-inline: 12px; } }

@media (max-width: 420px) { body .lights-bevahg-gallery-grid { grid-template-columns: 1fr; } }

@media (max-width: 1100px) { body .lights-bevahg-scenes-page:not(.is-embedded) .lights-bevahg-gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }

@media (max-width: 700px) { body .lights-bevahg-scenes-page:not(.is-embedded) .lights-bevahg-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

@media (max-width: 420px) { body .lights-bevahg-scenes-page:not(.is-embedded) .lights-bevahg-gallery-grid { grid-template-columns: 1fr !important; } }

@media (max-width: 700px) { body .lights-bevahg-scenes-page:not(.is-embedded) .lights-bevahg-category-nav { justify-content: flex-start; } body .lights-bevahg-scenes-page:not(.is-embedded) .lights-bevahg-category-button { min-height: 44px; padding-inline: 14px; } }

@media (max-width: 700px) { body .lights-bevahg-scenes-page:not(.is-embedded) .lights-bevahg-category-strip .lights-bevahg-category-button { min-height: 36px; padding-inline: 10px; } body .lights-bevahg-category-next { width: 26px; height: 26px; font-size: 20px; } }

@media (max-width: 600px) { .lights-bevahg-temperatures-head { align-items: flex-start; flex-direction: column; } .lights-bevahg-temperature { grid-template-columns: 1fr; } }

@media (max-width: 600px) { .lights-bevahg-scenes-accordion .lights-bevahg-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 420px) { .lights-bevahg-scenes-accordion .lights-bevahg-list { grid-template-columns: 1fr; } }

/* Tablet lights detail: keep both panes side by side without horizontal overflow. */
@media (max-width: 599px) {
  body.has-custom-layout .lights-room-view.has-details .lights-room-layout.has-detail {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }

  body.has-custom-layout .lights-room-view.has-details .lights-detail {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-column: 1;
    box-sizing: border-box;
  }
}

@media (min-width: 600px) and (max-width: 1180px) {
  body.has-custom-layout .lights-room-view.has-details {
    --hue-room-open-shift-x: 0px;
  }

  body.has-custom-layout .lights-room-view.has-details .lights-room-layout.has-detail {
    display: grid;
    width: 100%;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr) minmax(180px, min(240px, 30vw));
    column-gap: 5px;
    transform: none;
    overflow-x: hidden;
  }

  body.has-custom-layout .lights-room-view.has-details .lights-detail {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-column: 2;
    box-sizing: border-box;
  }
}