/* HNAI target-design refinement layer */
.brand-copy{display:grid;line-height:1.05}.brand-copy strong{font-size:1.06rem}.brand-copy small{font-size:.58rem;color:#8fa0b8;font-weight:600;margin-top:3px}
.action-all-off .action-icon{color:#e11d48;background:#fff1f2}.action-night .action-icon{color:#2563eb;background:#eff6ff}.action-morning .action-icon{color:#d97706;background:#fffbeb}.action-movie .action-icon{color:#2563eb;background:#eff6ff}.action-home .action-icon{color:#16a34a;background:#f0fdf4}
.active-dot{color:#22c55e!important;background:#f0fdf4!important}
.theme-switch{display:flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:rgba(15,23,42,.34);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(14px)}
.theme-switch button{width:28px;height:28px;border:0;border-radius:50%;display:grid;place-items:center;background:transparent;color:#dce6f3;cursor:pointer;padding:0;font-size:.82rem}.theme-switch button.active{background:#fff;color:#172033;box-shadow:0 2px 8px rgba(15,23,42,.2)}
.date-clock{min-width:78px;display:grid;justify-items:end;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.3)}.date-clock small{font-size:.52rem;opacity:.8;text-transform:capitalize;line-height:1.1}.date-clock strong{font-size:1.15rem;line-height:1.05}
.device-control{display:flex;align-items:center;gap:8px}.device-level{font-size:.62rem;font-weight:800;color:#64748b;white-space:nowrap}

@media (min-width:901px){
  .app-shell{grid-template-columns:210px 1fr}
  .sidebar{padding:18px 14px 12px}
  .brand{font-size:1rem;padding-bottom:10px}
  .nav button,.admin-nav button{padding:8px 10px;border-radius:9px}

  .topbar{position:relative;z-index:10;padding:24px 28px 0;margin-bottom:-76px;pointer-events:none}
  .topbar>div:first-child,.topbar-actions{pointer-events:auto}
  .topbar .eyebrow{display:none}
  .topbar h2{color:#fff;font-size:1.62rem;text-shadow:0 2px 12px rgba(0,0,0,.35);margin-top:0}
  .topbar-actions{align-self:flex-start;gap:8px}
  .search-box{background:rgba(255,255,255,.82);backdrop-filter:blur(18px);min-width:245px;height:36px}
  .clock{background:none;border:0;color:inherit;padding:0;font-size:inherit;font-weight:inherit}
  .user-badge{display:none}

  /* Non-home pages have no dark hero behind the shared topbar. */
  body:not(:has(#home-view:not([hidden]))) .topbar h2{color:#172033;text-shadow:none}
  body:not(:has(#home-view:not([hidden]))) .date-clock{color:#172033;text-shadow:none}
  body:not(:has(#home-view:not([hidden]))) .date-clock small{opacity:.66}
  body:not(:has(#home-view:not([hidden]))) .theme-switch{background:rgba(15,23,42,.08);border-color:rgba(15,23,42,.09);backdrop-filter:none}
  body:not(:has(#home-view:not([hidden]))) .theme-switch button{color:#475569}

  .content{padding:0 28px 26px}
  .home-view{gap:14px}
  .hero{min-height:330px;padding:106px 34px 104px;border-radius:18px;background-position:center 56%;box-shadow:0 14px 38px rgba(15,23,42,.16)}
  .hero-copy{max-width:590px}
  .hero .eyebrow{display:none}
  .hero h3{font-size:.92rem;font-weight:500;letter-spacing:0;margin:0;color:rgba(255,255,255,.95);text-shadow:0 1px 7px rgba(0,0,0,.3)}
  .hero-status{margin-top:14px;padding:6px 9px;font-size:.68rem}

  .quick-actions{margin-top:-78px;padding:0 14px}
  .card-grid{gap:8px}
  .action-card{min-height:58px;padding:10px 12px;border-radius:11px;box-shadow:0 8px 20px rgba(15,23,42,.1)}
  .action-icon{width:30px;height:30px;border-radius:9px}
  .action-card strong{font-size:.76rem}.action-card small{font-size:.6rem}

  .stats-grid{gap:8px}
  .stat-card{padding:9px 12px;border-radius:12px;min-height:58px;align-items:center}
  .stat-icon{width:28px;height:28px;border-radius:8px}
  .stat-card div{display:grid;gap:1px}
  .stat-card small{font-size:.58rem;margin:0;color:#7d899a;order:0}
  .stat-card strong{font-size:1.08rem;line-height:1.05;order:1}

  .dashboard-columns{grid-template-columns:minmax(0,1.72fr) minmax(310px,.72fr);gap:16px}
  .section-heading{margin-bottom:7px}
  .section-heading h3{font-size:1rem}
  .rooms-grid{gap:8px}
  .room-card{border-radius:10px}
  .room-art{height:84px}
  .room-info{padding:8px 10px}
  .room-info h4{font-size:.76rem}.room-info p{font-size:.6rem}

  .device-list{gap:7px}
  .device-row{padding:8px 10px;border-radius:10px;min-height:49px}
  .device-icon{width:30px;height:30px;border-radius:9px}
  .device-copy strong{font-size:.72rem}.device-copy small{font-size:.6rem}
  .device-toggle{width:40px;height:22px}.device-toggle span{width:16px;height:16px}.device-toggle.is-on span{transform:translateX(18px)}
}

@media (min-width:901px) and (max-width:1180px){
  .app-shell{grid-template-columns:82px 1fr}
  .brand-copy{display:none}
  .hero{padding-top:102px}
}

@media (max-width:700px){
  .hero{background-position:center center}
  .hero h3{font-size:.86rem;font-weight:500;letter-spacing:0}
  .action-card{min-width:165px}
  .room-card{border-radius:12px}
  .theme-switch{background:rgba(15,23,42,.08);border-color:rgba(15,23,42,.08)}
  .theme-switch button{color:#475569}.date-clock{color:#10213d;text-shadow:none}.date-clock small{display:none}.date-clock strong{font-size:.9rem}
}

:root[data-theme="dark"] body{background:linear-gradient(180deg,#101827 0,#0d1522 100%);color:#e8eef6}
:root[data-theme="dark"] .content{color:#e8eef6}
:root[data-theme="dark"] .stat-card,:root[data-theme="dark"] .room-card,:root[data-theme="dark"] .device-row,:root[data-theme="dark"] .action-card,:root[data-theme="dark"] .panel,:root[data-theme="dark"] .skeleton-card,:root[data-theme="dark"] .empty-card{background:rgba(24,34,49,.94);border-color:rgba(148,163,184,.14);color:#e8eef6}
:root[data-theme="dark"] .stat-card small,:root[data-theme="dark"] .room-info p,:root[data-theme="dark"] .device-copy small,:root[data-theme="dark"] .action-card small,:root[data-theme="dark"] .device-level{color:#9cabbd}
:root[data-theme="dark"] .text-button{color:#60a5fa}
:root[data-theme="dark"] .room-info h4,:root[data-theme="dark"] .section-heading h3{color:#f5f8fc}
:root[data-theme="dark"] .action-card{box-shadow:0 8px 20px rgba(0,0,0,.18)}
:root[data-theme="dark"] .theme-switch button.active{background:#0f172a;color:#fff}
:root[data-theme="dark"] body:not(:has(#home-view:not([hidden]))) .topbar h2,:root[data-theme="dark"] body:not(:has(#home-view:not([hidden]))) .date-clock{color:#e8eef6}
:root[data-theme="dark"] body:not(:has(#home-view:not([hidden]))) .theme-switch{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.1)}
:root[data-theme="dark"] body:not(:has(#home-view:not([hidden]))) .theme-switch button{color:#cbd5e1}