/* V3 semantic tokens. Legacy aliases keep management views compatible. */
:root {
  --v3-page:#f5f7fa; --v3-card:#fff; --v3-sidebar:#fff;
  --v3-primary:#087ea4; --v3-secondary:#e8f3f7;
  --v3-text:#20323c; --v3-muted:#607580; --v3-border:#dce5ea;
  --v3-success:#24834c; --v3-warning:#ae700e; --v3-error:#bc3434;
  --v3-radius-sm:10px; --v3-radius-md:16px; --v3-radius-lg:24px;
  --v3-shadow:0 3px 14px rgb(23 45 57 / 5%);
  --v3-space-1:4px; --v3-space-2:8px; --v3-space-3:12px;
  --v3-space-4:16px; --v3-space-5:24px; --v3-space-6:32px;
  --v3-card-padding:20px; --v3-sidebar-width:224px; --v3-header-height:80px;
  --v3-transition:160ms ease; --v3-touch:44px;
  --v3-primary-contrast:#fff;--v3-photo-text:#fff;
  --panel:var(--v3-card); --text:var(--v3-text); --muted:var(--v3-muted); --line:var(--v3-border);
  color-scheme:light;
}
html[data-theme='dark'] {
  --v3-primary-contrast:#0d1725;
  --v3-page:#101a20; --v3-card:#1b2931; --v3-sidebar:#152129;
  --v3-primary:#6ccdec; --v3-secondary:#243d48; --v3-text:#e4eef3;
  --v3-muted:#a1b4bf; --v3-border:#34464f; --v3-success:#78d49d;
  --v3-warning:#f2c66e; --v3-error:#ff9999; color-scheme:dark;
  --panel:var(--v3-card); --text:var(--v3-text); --muted:var(--v3-muted); --line:var(--v3-border);
}
html body {background:var(--v3-page);color:var(--v3-text)}
#app-view.app-shell {grid-template-columns:var(--v3-sidebar-width) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
#app-view .sidebar {background:var(--v3-sidebar);color:var(--v3-text);border-right:1px solid var(--v3-border);padding:var(--v3-space-5) var(--v3-space-3);gap:var(--v3-space-4)}
#app-view .brand {padding:var(--v3-space-2);margin-bottom:var(--v3-space-3)}
#app-view .brand-copy small {color:var(--v3-muted)}
#app-view .nav button,#app-view .admin-nav button {min-height:var(--v3-touch);color:var(--v3-muted);border-radius:var(--v3-radius-sm);background:transparent;transition:background var(--v3-transition)}
#app-view .nav button:hover,#app-view .nav button.active,#app-view .admin-nav button.active {background:var(--v3-secondary);color:var(--v3-primary)}
#app-view .nav hr {width:100%;border:0;border-top:1px solid var(--v3-border);margin:var(--v3-space-3) 0}
.v3-fallback summary {cursor:pointer;padding:var(--v3-space-3);color:var(--v3-muted);font-size:.8rem}
#app-view .sidebar-user {border-color:var(--v3-border)}
#app-view .sidebar-user-text small,#app-view .logout {color:var(--v3-muted)}
#app-view .topbar {min-height:var(--v3-header-height);background:var(--v3-page);padding:var(--v3-space-4) var(--v3-space-6);gap:var(--v3-space-4)}
#app-view .content {min-width:0;padding:var(--v3-space-4) var(--v3-space-6) var(--v3-space-6)}
#app-view .search-box,#app-view .user-badge,#app-view .theme-switch {background:var(--v3-card);color:var(--v3-text);border-color:var(--v3-border);box-shadow:none}
#app-view .search-box input {color:var(--v3-text)}
#app-view .home-view {gap:var(--v3-space-5)}
.v3-welcome {display:flex;align-items:center;justify-content:space-between;gap:var(--v3-space-5);padding:var(--v3-space-4) 0}
.v3-welcome h1 {font-size:2rem;margin:var(--v3-space-2) 0;color:var(--v3-text)}
.v3-welcome p,.v3-settings p {color:var(--v3-muted);margin:0}
#app-view .v3-welcome .hero-status {font-size:.8rem;color:var(--v3-muted);background:var(--v3-card);border:1px solid var(--v3-border);border-radius:var(--v3-radius-sm);padding:var(--v3-space-3);max-width:100%;line-height:1.5}
#app-view .stats-grid {grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--v3-space-3)}
#app-view .stat-card,#app-view .room-card,#app-view .device-row,.v3-card {background:var(--v3-card);color:var(--v3-text);border:1px solid var(--v3-border);border-radius:var(--v3-radius-md);box-shadow:var(--v3-shadow)}
#app-view .stat-card {padding:var(--v3-space-4);min-width:0}
#app-view .stat-card small,#app-view .room-info p,#app-view .device-copy small {color:var(--v3-muted)}
#app-view .stat-card strong {color:var(--v3-text)}
#app-view .dashboard-columns {display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--v3-space-5)}
#app-view .rooms-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--v3-space-4)}
#app-view .room-card {padding:0;text-align:left;cursor:pointer;min-width:0;overflow:hidden;display:block}
#app-view .room-art {background:var(--v3-secondary);height:90px;width:100%;min-width:0;min-height:0}
#app-view .room-fallback-icon {display:block;color:var(--v3-primary);opacity:1;text-shadow:none}
#app-view .room-info {padding:var(--v3-card-padding);min-width:0}
#app-view .room-info h4 {font-size:1rem;color:var(--v3-text);overflow-wrap:anywhere}
#app-view .device-row {padding:var(--v3-space-4);min-height:72px}
#app-view .active-section {margin-top:0;min-width:0}
#app-view .device-list {gap:var(--v3-space-3)}
#app-view .device-toggle {min-width:var(--v3-touch);min-height:var(--v3-touch)}
.v3-card-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--v3-space-4)}
.v3-card {display:flex;flex-direction:column;align-items:flex-start;gap:var(--v3-space-2);padding:var(--v3-card-padding);min-height:96px;text-align:left;cursor:pointer;overflow-wrap:anywhere}
.v3-card small {color:var(--v3-muted)}
.v3-card-icon {font-size:1.5rem;color:var(--v3-primary)}
.v3-card:disabled {opacity:.6;cursor:default}
#app-view button:focus-visible,#app-view summary:focus-visible {outline:3px solid var(--v3-primary);outline-offset:2px}
#app-view .room-card:hover,.v3-card:hover {border-color:var(--v3-primary)}
#app-view .empty-card {background:var(--v3-card);color:var(--v3-muted);border-color:var(--v3-border);padding:var(--v3-card-padding)}
@media (min-width:701px) and (max-width:1180px) {
  :root {--v3-sidebar-width:80px}
  #app-view .brand-copy,#app-view .nav button span:not(.nav-icon),#app-view .admin-nav button span:not(.nav-icon),#app-view .sidebar-user-text {display:none}
  #app-view .nav button,#app-view .admin-nav button {justify-content:center}
  #app-view .v3-fallback {display:none}
  #app-view .search-box {min-width:140px}
  #app-view .user-badge {display:none}
  #app-view .stats-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
  #app-view .dashboard-columns {grid-template-columns:1fr}
}
@media (max-width:700px) {
  #app-view.app-shell {display:block}
  #app-view .sidebar {display:none}
  #app-view .topbar {padding:calc(var(--v3-space-3) + env(safe-area-inset-top,0px)) var(--v3-space-4) var(--v3-space-3);min-height:0}
  #app-view .content {padding:var(--v3-space-4);padding-bottom:calc(90px + env(safe-area-inset-bottom,0px))}
  #app-view .search-box,#app-view .user-badge {display:none}
  .v3-welcome {align-items:flex-start;flex-direction:column;gap:var(--v3-space-3)}
  #app-view .stats-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  #app-view .dashboard-columns {display:grid;grid-template-columns:1fr}
  #app-view .rooms-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  #app-view .room-info {padding:var(--v3-space-3)}
  #app-view .room-info h4 {font-size:.9rem}
  #app-view .mobile-drawer-toggle,#app-view .mobile-drawer-backdrop {display:none}
  #app-view .mobile-nav {position:fixed;transform:none;top:auto;left:0;right:0;bottom:0;width:100%;max-width:none;height:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-radius:0;border-top:1px solid var(--v3-border);background:var(--v3-card);box-shadow:var(--v3-shadow);padding:var(--v3-space-2);padding-bottom:calc(var(--v3-space-2) + env(safe-area-inset-bottom,0px));z-index:80}
  #app-view .mobile-nav button {display:grid;grid-template-columns:1fr;justify-items:center;min-height:var(--v3-touch);color:var(--v3-muted);padding:var(--v3-space-2)}
  #app-view .mobile-nav button.active {background:var(--v3-secondary);color:var(--v3-primary)}
  #app-view .mobile-nav button span {font-size:.72rem}
  .v3-card-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce) {#app-view * {transition:none;scroll-behavior:auto}}

#app-view .v3-settings {padding:var(--v3-space-3)}
#app-view .v3-settings .v3-card-grid {margin-top:var(--v3-space-5)}
#app-view .theme-switch button {min-width:var(--v3-touch);min-height:var(--v3-touch);color:var(--v3-muted)}
/* Remove the former hero overlay from the shared page header. */
#app-view .topbar {margin-bottom:0;pointer-events:auto}
#app-view .topbar h2,#app-view .date-clock {color:var(--v3-text);text-shadow:none}
#app-view .mobile-drawer-toggle {display:none}
#app-view .room-art::after {background:none}
#app-view .device-toggle span {top:calc(50% - 9px)}
#app-view .device-icon {background:var(--v3-secondary);color:var(--v3-primary)}
#app-view .text-button {color:var(--v3-primary);min-height:var(--v3-touch)}
:root[data-theme] body {background:var(--v3-page);color:var(--v3-text)}
#app-view .room-info {background:var(--v3-card)}
@media (max-width:700px) {
  #app-view .mobile-nav {visibility:visible;opacity:1;pointer-events:auto}
  #app-view .mobile-nav button > :first-child {width:auto;min-width:0}
}
:root {--v3-mobile-nav-height:80px}
@media (min-width:701px) and (max-width:1180px) {
  #app-view .sidebar-user {grid-template-columns:1fr;justify-items:center}
}
#ui-toast {pointer-events:none}
body:has(#app-view.automation-layout-active) #ui-toast {bottom:100px}
@media (max-width:700px) {
  body:has(#app-view.automation-layout-active) #ui-toast {bottom:calc(var(--v3-mobile-nav-height) + 90px + env(safe-area-inset-bottom,0px))}
}

/* Phase 2: proportions, image cards and type follow the approved mockup. */
:root {
  --v3-page:#f2f6fb;--v3-card:#fff;--v3-text:#0f2447;--v3-muted:#657c9f;
  --v3-border:#dde7f3;--v3-primary:#087bff;--v3-secondary:#edf4ff;
  --v3-sidebar:#111e2d;--v3-sidebar-text:#dce6f7;--v3-sidebar-muted:#a8bcd8;
  --v3-sidebar-active:#1c4478;--v3-header-height:60px;
  --v3-radius-sm:9px;--v3-radius-md:11px;--v3-radius-lg:16px;
  --v3-rail-width:224px;--v3-room-height:126px;--v3-room-icon:38px;
  --v3-hero-image-width:300px;--v3-hero-height:112px;
  --v3-photo-overlay:linear-gradient(180deg,rgb(8 15 28 / 4%) 15%,rgb(8 15 28 / 85%) 100%);
}
html[data-theme='dark'] {
  --v3-page:#101b2b;--v3-card:#18263b;--v3-text:#eef4ff;--v3-muted:#a6b9d5;
  --v3-border:#2c405c;--v3-primary:#63a8ff;--v3-secondary:#213955;
  --v3-sidebar:#0d1725;--v3-sidebar-active:#203f69;
}
#app-view .sidebar {color:var(--v3-sidebar-text);border-color:#24384e;padding:var(--v3-space-4) var(--v3-space-3)}
#app-view .brand-copy strong {font-size:1.4rem;letter-spacing:.01em}
#app-view .brand-copy small {font-size:.8rem;color:var(--v3-sidebar-muted);font-weight:400}
#app-view .brand-mark.small {width:50px;height:50px;border-radius:15px;font-size:1.5rem;box-shadow:none;background:linear-gradient(145deg,#087aff,#00b4dd)}
#app-view .nav button,#app-view .admin-nav button {color:var(--v3-sidebar-text);font-size:.92rem;font-weight:500;gap:var(--v3-space-4)}
#app-view .nav button.active,#app-view .admin-nav button.active,#app-view .nav button:hover {background:var(--v3-sidebar-active);color:#fff}
#app-view .nav hr,#app-view .sidebar-user {border-color:#31465f}
#app-view .sidebar-user-text small,#app-view .v3-fallback summary,#app-view .logout {color:var(--v3-sidebar-muted)}
#app-view .topbar {padding:var(--v3-space-2) var(--v3-space-5);min-height:var(--v3-header-height)}
#app-view .topbar-actions {align-self:center;flex:1;justify-content:flex-end;gap:var(--v3-space-3)}
#app-view:has(#home-view:not([hidden])) .topbar>div:first-child {display:none}
#app-view .search-box {margin-right:auto;margin-left:auto;width:min(570px,55%);height:38px;border-radius:var(--v3-radius-sm)}
#app-view .date-clock strong {font-size:1.35rem}
#app-view .content {padding:var(--v3-space-3) var(--v3-space-5) var(--v3-space-5)}
#app-view .home-view {gap:var(--v3-space-4)}
.v3-dashboard-layout {display:grid;grid-template-columns:minmax(0,1fr) var(--v3-rail-width);gap:var(--v3-space-4);align-items:start}
.v3-dashboard-main {min-width:0;display:grid;gap:var(--v3-space-4)}
.v3-hero {min-height:var(--v3-hero-height);display:grid;grid-template-columns:minmax(0,1fr) var(--v3-hero-image-width);gap:var(--v3-space-4);align-items:start}
.v3-hero h1 {font-size:2.2rem;line-height:1.15;margin:var(--v3-space-1) 0;color:var(--v3-text);letter-spacing:-.035em}
.v3-hero p {margin:0;color:var(--v3-muted);font-size:.95rem;line-height:1.5}
.v3-hero-image {height:var(--v3-hero-height);background:linear-gradient(90deg,rgb(9 23 44 / 72%),rgb(9 23 44 / 24%)),url('/assets/dashboard/hero.jpg') center 58% / cover;border-radius:var(--v3-radius-md);padding:var(--v3-space-4);display:flex;align-items:flex-end;overflow:hidden}
#app-view .v3-hero .hero-status {font-size:.8rem;line-height:1.4;color:#fff;text-shadow:0 1px 3px #13223b;background:transparent;border:0;padding:0;margin:0;border-radius:0;backdrop-filter:none}
#app-view .stats-grid {gap:var(--v3-space-2)}
#app-view .stat-card {padding:var(--v3-space-3);min-height:60px;border-radius:var(--v3-radius-md);box-shadow:none;gap:var(--v3-space-2)}
#app-view .stat-card small {font-size:.67rem;line-height:1.25}
#app-view .stat-card strong {font-size:.95rem}
#app-view .stat-icon {width:28px;height:28px;font-size:1.15rem}
#app-view .section-heading {margin-bottom:var(--v3-space-2);align-items:center;gap:var(--v3-space-2)}
#app-view .section-heading h3 {font-size:1.15rem;font-weight:650;letter-spacing:-.03em}
#app-view .section-heading .text-button,.v3-rail-panel>.text-button {min-height:34px;background:var(--v3-card);border:1px solid var(--v3-border);border-radius:var(--v3-radius-sm);padding:var(--v3-space-2) var(--v3-space-3);color:var(--v3-text);font-size:.68rem;font-weight:500}
#app-view .rooms-grid {grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--v3-space-2)}
#app-view .room-card {position:relative;min-height:var(--v3-room-height);border:0;border-radius:var(--v3-radius-md);box-shadow:none}
#app-view .room-art {height:var(--v3-room-height);min-height:0;background-size:cover;background-position:center}
#app-view .room-art::after {background:var(--v3-photo-overlay)}
#app-view :is(.room-art,.rooms-page-art,.room-detail-hero).room-living {background-image:url('/assets/dashboard/living.jpg')}
#app-view :is(.room-art,.rooms-page-art,.room-detail-hero).room-kitchen {background-image:url('/assets/dashboard/kitchen.jpg')}
#app-view :is(.room-art,.rooms-page-art,.room-detail-hero).room-bedroom {background-image:url('/assets/dashboard/bedroom.jpg')}
#app-view :is(.room-art,.rooms-page-art,.room-detail-hero).room-kids {background-image:url('/assets/dashboard/kids.jpg')}
#app-view :is(.room-art,.rooms-page-art,.room-detail-hero).room-bath {background-image:url('/assets/dashboard/bath.jpg')}
#app-view :is(.room-art,.rooms-page-art,.room-detail-hero).room-hall {background-image:url('/assets/dashboard/hall.jpg')}
#app-view :is(.room-art,.rooms-page-art,.room-detail-hero).room-guest {background-image:url('/assets/dashboard/guest.jpg')}
#app-view :is(.room-art,.rooms-page-art,.room-detail-hero).room-terrace {background-image:url('/assets/dashboard/terrace.jpg')}
#app-view :is(.room-art,.rooms-page-art,.room-detail-hero).room-garden {background-image:url('/assets/dashboard/garden.jpg')}
#app-view .room-art.room-generic {background:linear-gradient(145deg,#5d7189,#223b56)}
#app-view .room-fallback-icon {left:var(--v3-space-3);top:var(--v3-space-3);transform:none;display:grid;place-items:center;width:var(--v3-room-icon);height:var(--v3-room-icon);border-radius:var(--v3-radius-sm);font-size:1.4rem;background:rgb(10 24 40 / 65%);color:#fff}
#app-view .room-info {position:absolute;inset:auto 0 0;z-index:2;background:transparent;padding:var(--v3-space-3);display:flex;align-items:center;color:#fff}
#app-view .room-info h4 {color:#fff!important;font-size:.9rem;line-height:1.25;white-space:normal;overflow-wrap:anywhere}
#app-view .room-info p {color:#e0e9f6!important;font-size:.72rem;margin-top:var(--v3-space-1)}
#app-view .room-info .chevron {position:absolute;right:var(--v3-space-3);top:calc(-1 * var(--v3-room-icon));color:#fff}
#app-view .v3-quick-actions {grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--v3-space-2)}
#app-view .v3-action {position:relative;min-height:98px;padding:var(--v3-space-3);gap:var(--v3-space-1);box-shadow:none}
#app-view .v3-action strong {font-size:.75rem;line-height:1.25;margin-top:var(--v3-space-1)}
#app-view .v3-action small {font-size:.68rem;line-height:1.3}
.v3-card-icon {display:grid;place-items:center;width:38px;height:38px;border-radius:var(--v3-radius-sm);font-size:1.45rem;background:var(--v3-secondary);flex:0 0 auto}
.v3-action.night .v3-card-icon {color:#8b35ff;background:#f0e8ff}.v3-action.morning .v3-card-icon {color:#ffac00;background:#fff7e8}.v3-action.off .v3-card-icon {color:#ff553b;background:#fff0ed}.v3-action.movie .v3-card-icon {color:#8a42ff;background:#f1ebff}.v3-action.home .v3-card-icon {color:#0c9d68;background:#e8f7f2}
html[data-theme='dark'] .v3-action .v3-card-icon {background:var(--v3-secondary)}
.v3-action-play {position:absolute;right:var(--v3-space-3);top:var(--v3-space-4);font-size:.7rem;color:var(--v3-primary);background:var(--v3-secondary);border-radius:50%;width:26px;height:26px;display:grid;place-items:center}
#app-view .device-list {grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--v3-space-2)}
#app-view .device-row {position:relative;min-height:108px;padding:var(--v3-space-3);display:grid;grid-template-columns:30px minmax(0,1fr);gap:var(--v3-space-2);align-content:start;align-items:center;box-shadow:none}
#app-view .device-icon {width:30px;height:34px;font-size:1.2rem}
#app-view .device-copy strong {font-size:.7rem;white-space:normal;line-height:1.25}
#app-view .device-copy small {font-size:.65rem;white-space:normal}
.v3-device-state {font-size:.65rem;color:var(--v3-muted);grid-column:1}
#app-view .device-control {justify-content:flex-end;flex-wrap:wrap;gap:var(--v3-space-1)}
#app-view #home-view .device-toggle {width:38px;height:22px;min-height:22px;min-width:38px}
#app-view #home-view .device-toggle::after {content:'';position:absolute;inset:-11px -3px}
#app-view #home-view .device-toggle span {width:16px;height:16px;top:3px}
#app-view #home-view .device-toggle.is-on span {transform:translateX(16px)}
#app-view .device-level {width:100%;font-size:.62rem;text-align:right}
#v3-automations {grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--v3-space-2)}
#v3-automations .v3-card {min-height:58px;padding:var(--v3-space-3);box-shadow:none;gap:var(--v3-space-1)}
#v3-automations .v3-card strong {font-size:.8rem}#v3-automations .v3-card small {font-size:.7rem}
.v3-dashboard-rail {display:grid;gap:var(--v3-space-3);min-width:0}
.v3-rail-panel {padding:var(--v3-space-4);border:1px solid var(--v3-border);border-radius:var(--v3-radius-md);background:var(--v3-card)}
.v3-rail-panel h3 {font-size:1rem;margin:0 0 var(--v3-space-4);letter-spacing:-.025em}
.v3-system-row,.v3-event-row {display:flex;align-items:center;gap:var(--v3-space-3);min-width:0;padding:var(--v3-space-3) var(--v3-space-2)}
.v3-system-row {border:1px solid var(--v3-border);border-radius:var(--v3-radius-sm);margin-bottom:var(--v3-space-2)}
.v3-system-row:last-child {margin-bottom:0}.v3-system-row>div,.v3-event-row>div {min-width:0}
.v3-system-row strong,.v3-event-row strong {display:block;font-size:.76rem;line-height:1.3;overflow-wrap:anywhere}
.v3-system-row small,.v3-event-row small {display:block;font-size:.72rem;color:var(--v3-muted);margin-top:var(--v3-space-1)}
.v3-status-dot {display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--v3-muted);margin-right:var(--v3-space-2)}
.v3-status-dot.ok {background:var(--v3-success)}.v3-status-dot.warn {background:var(--v3-warning)}.v3-status-dot.bad {background:var(--v3-error)}
.v3-rail-panel>.text-button {margin-top:var(--v3-space-3);width:100%}.v3-rail-panel .muted {font-size:.78rem;line-height:1.5;color:var(--v3-muted)}
@media (min-width:701px) and (max-width:1180px) {
  .v3-dashboard-layout {grid-template-columns:minmax(0,1fr) 200px}
  :root {--v3-hero-image-width:230px}
  #app-view .rooms-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
  #app-view .v3-quick-actions,#app-view .device-list {grid-template-columns:repeat(3,minmax(0,1fr))}
  #app-view .brand-mark.small {width:44px;height:44px}
}
@media (max-width:700px) {
  :root {--v3-hero-height:104px;--v3-room-height:116px}
  #app-view .content {padding:var(--v3-space-3);padding-bottom:calc(var(--v3-mobile-nav-height) + var(--v3-space-5) + env(safe-area-inset-bottom,0px))}
  .v3-dashboard-layout {grid-template-columns:1fr;gap:var(--v3-space-4)}
  .v3-hero {grid-template-columns:1fr;gap:var(--v3-space-3)}
  .v3-hero h1 {font-size:1.85rem}.v3-hero p {font-size:.86rem}
  .v3-hero-image {width:100%}
  #app-view .rooms-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  #app-view .v3-quick-actions,#app-view .device-list {grid-template-columns:repeat(2,minmax(0,1fr))}
  #app-view .room-info h4 {font-size:.85rem}
  #app-view .search-box {display:none}
  #app-view .topbar-actions {gap:var(--v3-space-2);justify-content:flex-end}
  .v3-dashboard-rail {grid-template-columns:1fr}
  #app-view .stat-card {min-height:54px;padding:var(--v3-space-2)}
}
#app-view :is(.room-art,.rooms-page-art,.room-detail-hero).room-dining {background-image:url('/assets/dashboard/hero.jpg')}
#app-view .device-copy strong {overflow-wrap:anywhere;text-overflow:clip}
#app-view .v3-action.night {background:color-mix(in srgb,var(--v3-card) 94%,#8b35ff)}
#app-view .v3-action.home {background:color-mix(in srgb,var(--v3-card) 97%,#0c9d68)}
@media (max-width:700px) {
  #app-view #active-devices {grid-template-columns:repeat(2,minmax(0,1fr))}
}
#v3-automations .v3-card {display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:var(--v3-space-3);align-content:center}
#v3-automations .v3-card-icon {grid-row:1/3;color:#ffab00;background:color-mix(in srgb,var(--v3-card) 90%,#ffab00)}
#v3-automations .v3-card small {grid-column:2}
#app-view .theme-switch button {position:relative;min-width:32px;min-height:32px;width:32px;height:32px}
#app-view .theme-switch button::after {content:'';position:absolute;inset:-6px}
#app-view #home-view .device-icon {color:#ffbd00;background:color-mix(in srgb,var(--v3-card) 90%,#ffbd00)}
#app-view .v3-brightness {grid-column:1/-1;display:flex;align-items:center;gap:var(--v3-space-2);font-size:.62rem}
#app-view .v3-brightness meter {flex:1;min-width:0;width:100%;height:7px;border:0;border-radius:999px;background:var(--v3-border)}
#app-view .v3-brightness meter::-webkit-meter-bar {background:var(--v3-border);border:0;border-radius:999px}
#app-view .v3-brightness meter::-webkit-meter-optimum-value {background:var(--v3-primary);border-radius:999px}
#app-view .v3-brightness meter::-moz-meter-bar {background:var(--v3-primary);border-radius:999px}
#app-view .v3-brightness .device-level {width:auto;white-space:nowrap}

/* Phase 3: full-width welcome image and compact active-device rail. */
:root {--v3-rail-width:280px}
#app-view .v3-hero {min-height:246px;padding:22px;display:flex;flex-direction:column;justify-content:space-between;gap:20px;border-radius:var(--v3-radius-md);background:linear-gradient(90deg,rgb(6 17 29 / 82%),rgb(6 17 29 / 18%)),url('/assets/dashboard/living.jpg') center 55% / cover;color:#fff}
#app-view .v3-hero h1 {color:#fff;font-size:2.5rem;margin:6px 0 10px}
#app-view .v3-hero p {color:#fff;font-size:1.15rem;font-weight:650;line-height:1.4}
#app-view .v3-hero .v3-hero-summary {font-size:.95rem;font-weight:400;margin-top:3px}
.v3-hero-eyebrow {font-size:.72rem;letter-spacing:.2em;font-weight:650;color:#e2eaf5}
.v3-hero-actions {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;width:100%}
#app-view .v3-hero-actions .v3-action {min-height:48px;display:flex;align-items:center;gap:7px;padding:8px;color:#13233f;background:#fffffff2;border:1px solid #ffffffa6;box-shadow:none}
#app-view .v3-hero-actions .v3-card-icon {width:30px;height:30px;flex-shrink:0;font-size:1.3rem}
#app-view .v3-hero-actions strong {font-size:.72rem;line-height:1.25;overflow-wrap:anywhere}
#app-view .v3-hero-actions small,#app-view .v3-hero-actions .v3-action-play {display:none}
#app-view #rooms-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
#app-view .v3-dashboard-rail #active-devices {display:grid;grid-template-columns:1fr;gap:8px}
#app-view .v3-dashboard-rail .device-row {display:grid;grid-template-columns:32px minmax(0,1fr) 44px;gap:8px;align-items:center;min-height:64px;padding:8px 0;background:transparent;border:0;box-shadow:none}
#app-view .v3-dashboard-rail .device-icon {width:32px;height:36px;grid-row:1;background:#fff7e5;font-size:1.4rem}
#app-view .v3-dashboard-rail .device-copy {grid-column:2;grid-row:1;min-width:0}
#app-view .v3-dashboard-rail .device-copy strong {font-size:.78rem;line-height:1.3;white-space:normal;overflow-wrap:anywhere}
#app-view .v3-dashboard-rail .device-copy small {font-size:.72rem;margin-top:3px}
#app-view .v3-dashboard-rail .v3-device-state {display:block;color:var(--v3-muted);font-size:.7rem;margin-top:2px}
#app-view .v3-dashboard-rail .v3-device-state::before {content:'';display:inline-block;width:6px;height:6px;background:#218949;border-radius:50%;margin-right:5px}
#app-view .v3-dashboard-rail .device-control,#app-view .v3-dashboard-rail .v3-device-open {grid-column:3;grid-row:1}
#app-view .v3-dashboard-rail .device-toggle {min-height:44px;background:transparent;position:relative;width:44px}
#app-view .v3-dashboard-rail .device-toggle::before {content:'';position:absolute;inset:12px 3px;border-radius:20px;background:#087aff}
#app-view .v3-dashboard-rail .device-toggle span {position:relative;z-index:1}
#app-view .v3-dashboard-rail .v3-brightness {grid-column:2 / 4;margin:0;font-size:.65rem}
#app-view .v3-dashboard-rail .v3-device-open {font-size:.65rem;padding:0;min-width:44px;min-height:44px}
@media(max-width:1180px){:root {--v3-rail-width:240px} .v3-dashboard-layout {grid-template-columns:minmax(0,1fr) var(--v3-rail-width)} .v3-hero-actions {grid-template-columns:repeat(3,minmax(0,1fr))} #app-view #rooms-grid {grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.v3-dashboard-layout {grid-template-columns:1fr}}
@media(max-width:700px){#app-view .v3-hero {min-height:290px;padding:16px} #app-view .v3-hero h1 {font-size:2rem} #app-view .v3-hero p {font-size:1rem} .v3-hero-actions {grid-template-columns:repeat(2,minmax(0,1fr))} #app-view .v3-hero-actions strong {font-size:.75rem}}
#app-view .v3-hero-actions .v3-action {flex-direction:row;text-align:left}
#app-view #home-view .v3-dashboard-rail .device-toggle {width:44px;height:44px;min-height:44px;min-width:44px;border:0;background:transparent}
#app-view #home-view .v3-dashboard-rail .device-toggle span {position:absolute;top:14px;left:5px;width:16px;height:16px;background:#fff;transform:translateX(18px);box-shadow:0 1px 3px #004db74d}
#app-view .v3-dashboard-rail .v3-brightness {display:none}

#app-view .v3-dashboard-rail .device-copy small {white-space:normal;overflow-wrap:anywhere}
#app-view .v3-dashboard-rail .section-heading h3 {font-size:1rem;white-space:nowrap}