body {
      background:
        radial-gradient(circle at top left, rgba(42, 94, 169, 0.08), transparent 26%),
        radial-gradient(circle at top right, rgba(106, 75, 23, 0.06), transparent 24%),
        linear-gradient(180deg, #fbfdff 0%, #f6f9fe 48%, #edf4fc 100%);
    }
    .sidebar-gradient {
      background: linear-gradient(180deg, #ffffff 0%, #f9fbff 66%, #edf4fc 86%, #2a5ea9 100%);
    }
    .card-shadow {
      box-shadow: 0 8px 24px -12px rgba(42, 94, 169, 0.22), 0 2px 4px -1px rgba(15, 23, 42, 0.05);
    }
    .toggle-checkbox:checked + .toggle-label {
      background-color: #2a5ea9;
    }
    .toggle-checkbox:checked + .toggle-label::after {
      transform: translateX(100%);
    }

    .rgb-color-trigger {
      min-width: 6.5rem;
      min-height: 2.35rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.45rem;
      border: 1px solid #dbe6f5;
      border-radius: 0.75rem;
      background: #f6f9fe;
      color: #2a5ea9;
      font-size: 0.78rem;
      font-weight: 800;
      cursor: pointer;
      transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
      touch-action: manipulation;
    }

    .rgb-color-trigger:hover,
    .rgb-color-trigger:focus-visible {
      transform: translateY(-1px);
      border-color: #c7d8ef;
      background: #edf4fc;
      outline: none;
    }

    .rgb-color-trigger__swatch {
      width: 1.05rem;
      height: 1.05rem;
      border-radius: 9999px;
      background: #005bff;
      border: 2px solid #ffffff;
      box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.16);
      flex: 0 0 auto;
    }

    .rgb-color-popover {
      position: fixed;
      inset: 0;
      z-index: 88;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 1rem;
      background: rgba(15, 23, 42, 0.34);
    }

    .rgb-color-popover.is-visible {
      display: flex;
    }

    .rgb-color-popover__panel {
      width: min(94vw, 24rem);
      border: 1px solid #dbe6f5;
      border-radius: 1rem;
      background: #ffffff;
      box-shadow: 0 24px 56px rgba(15, 23, 42, 0.18);
      overflow: hidden;
    }

    .rgb-color-popover__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 0.85rem 0.9rem 0.65rem;
      border-bottom: 1px solid #edf4fc;
    }

    .rgb-color-popover__header h2 {
      margin: 0;
      color: #2a5ea9;
      font-size: 0.95rem;
      font-weight: 800;
    }

    .rgb-color-popover__close {
      width: 2.25rem;
      height: 2.25rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 0;
      border-radius: 9999px;
      background: #f6f9fe;
      color: #5d6775;
      cursor: pointer;
    }

    .rgb-color-popover__close:hover,
    .rgb-color-popover__close:focus-visible {
      background: #edf4fc;
      color: #2a5ea9;
      outline: none;
    }

    .honeycomb-picker {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.7rem;
      width: 100%;
      margin: 0;
      padding: 1rem;
    }

    .honeycomb-row {
      display: flex;
      justify-content: center;
      gap: 0.55rem;
      width: 100%;
    }

    .honeycomb-cell {
      width: 2.9rem;
      height: 2.9rem;
      min-width: 2.9rem;
      min-height: 2.9rem;
      background: var(--swatch);
      border: 2px solid #ffffff;
      border-radius: 9999px;
      cursor: pointer;
      filter: saturate(1.3) brightness(1.02);
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18), inset 0 0 0 1px rgba(15, 23, 42, 0.08);
      transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
      touch-action: manipulation;
    }

    .honeycomb-cell:hover,
    .honeycomb-cell:focus-visible {
      filter: saturate(1.15) brightness(1.04);
      transform: translateY(-1px) scale(1.04);
      outline: none;
    }

    .honeycomb-cell.is-selected {
      box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px var(--swatch), 0 0 0 8px rgba(42, 94, 169, 0.28), 0 4px 10px rgba(15, 23, 42, 0.2);
      transform: scale(1.06);
    }

    .honeycomb-cell[data-color="#ffffff"] {
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18), inset 0 0 0 1px rgba(15, 23, 42, 0.16);
    }

    .honeycomb-cell[data-color="#ffffff"].is-selected {
      box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px #cbd5e1, 0 0 0 8px rgba(42, 94, 169, 0.28), 0 4px 10px rgba(15, 23, 42, 0.2);
    }

    .door-action-button {
      width: 2.65rem;
      height: 2.65rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 0.8rem;
      border: 1px solid rgba(42, 94, 169, 0.12);
      background: #eef4fc;
      color: #8b9bb5;
      box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
      transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, color 160ms ease, border-color 160ms ease;
      cursor: pointer;
    }

    .door-action-button:hover,
    .door-action-button:focus-visible {
      transform: translateY(-1px) scale(1.03);
      box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
      border-color: rgba(42, 94, 169, 0.28);
      outline: none;
    }

    .door-action-button.is-open {
      background: #2a5ea9;
      color: #ffffff;
      border-color: #2a5ea9;
    }

    .fan-speed-control {
      width: 100%;
      max-width: 5.25rem;
      display: flex;
      flex-direction: column;
      gap: 0.15rem;
      margin: 0.125rem 0;
    }

    .fan-speed-slider {
      width: 100%;
      height: 1rem;
      accent-color: #2a5ea9;
      cursor: pointer;
    }

    .help-trigger {
      width: 2rem;
      height: 2rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 9999px;
      border: 0;
      background: #f6f9fe;
      color: #2a5ea9;
      box-shadow: none;
      transition: background-color 120ms ease, transform 120ms ease;
      cursor: pointer;
      z-index: 5;
    }

    .help-trigger:hover,
    .help-trigger:focus-visible {
      transform: translateY(-1px);
      background: #edf4fc;
      outline: none;
    }

    .help-trigger i {
      font-size: 0.95rem;
      line-height: 1;
    }

    .light-settings-trigger {
      width: 1.75rem;
      height: 1.75rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 9999px;
      border: 1px solid #dbe6f5;
      background: #f6f9fe;
      color: #2a5ea9;
      cursor: pointer;
      z-index: 5;
      transition: background-color 120ms ease, transform 120ms ease, color 120ms ease;
    }

    .light-settings-trigger:hover,
    .light-settings-trigger:focus-visible {
      transform: translateY(-1px);
      background: #edf4fc;
      color: #1f4f91;
      outline: none;
    }

    .light-settings-trigger i {
      font-size: 0.78rem;
      line-height: 1;
    }

    .light-schedule-notice {
      min-height: 1.9rem;
      margin: -0.2rem 0 0;
      color: #6a4b17;
      font-size: 0.68rem;
      font-weight: 600;
      line-height: 1.25;
      text-align: center;
    }

    .light-settings-modal {
      position: fixed;
      inset: 0;
      z-index: 90;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 1rem;
      background: rgba(15, 23, 42, 0.34);
    }

    .light-settings-modal.is-visible {
      display: flex;
    }

    .light-settings-modal__panel {
      width: min(94vw, 34rem);
      border-radius: 1rem;
      border: 1px solid #dbe6f5;
      background: #ffffff;
      box-shadow: 0 24px 56px rgba(15, 23, 42, 0.18);
      overflow: hidden;
    }

    .light-settings-modal__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1rem 1rem 0.75rem;
      border-bottom: 1px solid #edf4fc;
    }

    .light-settings-modal__header h2 {
      margin: 0;
      color: #2a5ea9;
      font-size: 1rem;
      font-weight: 800;
    }

    .light-settings-modal__close {
      width: 2rem;
      height: 2rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 0;
      border-radius: 9999px;
      background: #f6f9fe;
      color: #5d6775;
      cursor: pointer;
    }

    .light-settings-modal__close:hover,
    .light-settings-modal__close:focus-visible {
      background: #edf4fc;
      color: #2a5ea9;
      outline: none;
    }

    .light-settings-modal__body {
      display: flex;
      flex-direction: column;
      gap: 0.85rem;
      padding: 1rem;
    }

    .light-settings-group {
      margin: 0;
      padding: 0.85rem;
      border: 1px solid #dbe6f5;
      border-radius: 0.8rem;
    }

    .light-settings-group legend {
      padding: 0 0.3rem;
      color: #2a5ea9;
      font-size: 0.76rem;
      font-weight: 800;
    }

    .light-settings-legend {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.6rem;
      width: calc(100% - 0.6rem);
    }

    .light-fixed-add {
      width: 1.65rem;
      height: 1.65rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #dbe6f5;
      border-radius: 9999px;
      background: #f6f9fe;
      color: #2a5ea9;
      cursor: pointer;
    }

    .light-fixed-add:hover,
    .light-fixed-add:focus-visible {
      background: #edf4fc;
      outline: none;
    }

    .light-settings-option {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      color: #24324a;
      font-size: 0.82rem;
      font-weight: 700;
    }

    .light-settings-option input {
      accent-color: #2a5ea9;
    }

    .light-settings-inline {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 9rem;
      gap: 0.55rem;
      margin-top: 0.7rem;
    }

    .light-fixed-list {
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
    }

    .light-fixed-row {
      grid-template-columns: minmax(0, 1fr) 9rem 2.1rem;
      align-items: center;
    }

    .light-fixed-row:first-child {
      grid-template-columns: minmax(0, 1fr) 9rem;
    }

    .light-fixed-remove {
      width: 2.1rem;
      height: 2.1rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid #dbe6f5;
      border-radius: 0.65rem;
      background: #ffffff;
      color: #5d6775;
      cursor: pointer;
    }

    .light-fixed-remove:hover,
    .light-fixed-remove:focus-visible {
      background: #f6f9fe;
      color: #2a5ea9;
      outline: none;
    }

    .light-settings-inline select,
    .light-settings-inline input {
      min-width: 0;
      width: 100%;
      border: 1px solid #dbe6f5;
      border-radius: 0.65rem;
      color: #24324a;
      font-size: 0.83rem;
      font-weight: 700;
    }

    .light-settings-modal__actions {
      display: flex;
      justify-content: flex-end;
      gap: 0.55rem;
      padding: 0.85rem 1rem 1rem;
      border-top: 1px solid #edf4fc;
    }

    .light-settings-button {
      min-width: 4.75rem;
      min-height: 2.35rem;
      border-radius: 0.7rem;
      font-size: 0.84rem;
      font-weight: 800;
      cursor: pointer;
      transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
    }

    .light-settings-button--ghost {
      border: 1px solid #dbe6f5;
      background: #ffffff;
      color: #5d6775;
    }

    .light-settings-button--ghost:hover,
    .light-settings-button--ghost:focus-visible {
      border-color: #c7d8ef;
      background: #f6f9fe;
      outline: none;
    }

    .light-settings-button--primary {
      border: 1px solid #2a5ea9;
      background: #2a5ea9;
      color: #ffffff;
    }

    .light-settings-button--primary:hover,
    .light-settings-button--primary:focus-visible {
      background: #1f4f91;
      outline: none;
    }

    .help-popover {
      position: fixed;
      z-index: 80;
      width: min(320px, calc(100vw - 20px));
      padding: 0.8rem 0.9rem 0.85rem;
      border-radius: 0.75rem;
      border: 1px solid #c7d8ef;
      background: #ffffff;
      box-shadow: none;
      color: #24324a;
      display: none;
    }

    .help-popover.is-visible {
      display: block;
    }

    .help-popover[data-placement="top"]::after,
    .help-popover[data-placement="bottom"]::after {
      content: "";
      position: absolute;
      width: 14px;
      height: 14px;
      background: inherit;
      border-left: 1px solid #c7d8ef;
      border-top: 1px solid #c7d8ef;
      transform: rotate(45deg);
    }

    .help-popover[data-placement="top"]::after {
      bottom: -7px;
      left: 50%;
      margin-left: -7px;
    }

    .help-popover[data-placement="bottom"]::after {
      top: -7px;
      left: 50%;
      margin-left: -7px;
    }

    .help-popover__title {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      color: #2a5ea9;
      font-weight: 700;
      margin-bottom: 0.35rem;
    }

    .help-popover__title i {
      color: #6a4b17;
    }

    .help-popover__body {
      font-size: 0.8rem;
      line-height: 1.4;
    }

    .help-popover__body ul {
      margin: 0.45rem 0 0;
      padding-left: 1rem;
    }

    .help-popover__body li + li {
      margin-top: 0.15rem;
    }

    .help-popover__body code {
      padding: 0.05rem 0.25rem;
      border-radius: 0.25rem;
      background: #eef4fc;
      color: #2a5ea9;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: 0.78em;
    }

    .header-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 0.75rem;
      flex-wrap: wrap;
    }

    .header-user {
      min-width: 12rem;
      display: flex;
      align-items: center;
      gap: 0.7rem;
      padding: 0.55rem 0.75rem;
      border: 1px solid #dbe6f5;
      border-radius: 0.9rem;
      background: #ffffff;
    }

    .header-user__avatar {
      width: 2.35rem;
      height: 2.35rem;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 9999px;
      background: #2a5ea9;
      color: #ffffff;
      flex: 0 0 auto;
    }

    .header-user__name {
      margin: 0;
      font-size: 0.9rem;
      font-weight: 800;
      line-height: 1.1;
    }

    .header-user__email {
      max-width: 9.5rem;
      margin: 0.12rem 0 0;
      color: #5d6775;
      font-size: 0.76rem;
      line-height: 1.1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .header-connection {
      min-height: 3.05rem;
      display: flex;
      align-items: center;
      gap: 0.6rem;
      padding: 0.55rem 0.8rem;
      border: 1px solid #dbe6f5;
      border-radius: 0.9rem;
      background: #f6f9fe;
      color: #2a5ea9;
    }

    .header-connection p {
      margin: 0;
      font-size: 0.78rem;
      font-weight: 700;
      white-space: nowrap;
    }

    @media (max-width: 1180px) {
      [data-purpose="main-header"] {
        align-items: flex-start;
      }
    }

    @media (max-width: 720px) {
      [data-purpose="main-header"] {
        padding-left: 1rem;
        padding-right: 1rem;
      }

      [data-purpose="main-header"] h1 {
        font-size: 1.35rem;
        line-height: 1.15;
      }

      .header-actions {
        width: 100%;
        justify-content: flex-start;
      }

      .header-user,
      .header-connection {
        flex: 1 1 13rem;
      }
    }

    @media (max-width: 420px) {
      .honeycomb-picker {
        gap: 0.55rem;
        padding: 0.55rem;
      }

      .honeycomb-row {
        gap: 0.35rem;
      }

      .honeycomb-cell {
        width: 2.35rem;
        height: 2.35rem;
        min-width: 2.35rem;
        min-height: 2.35rem;
      }
    }