/* Devices page: living device grid (Skywork motion) */
.dv-rooms { display: flex; flex-wrap: wrap; gap: 6px; background: var(--white); padding: 5px; border-radius: 999px; box-shadow: 0 2px 10px rgba(10, 27, 61, .06); }
.dv-rooms button { font: inherit; font-size: 14px; font-weight: 600; color: var(--slate); background: transparent; border: 0; border-radius: 999px; padding: 8px 14px; min-height: 40px; cursor: pointer; }
.dv-rooms button[aria-pressed="true"] { background: var(--navy); color: #fff; }

.dv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; min-height: 340px; align-content: start; }
.dv-grid.dv-pre .dv-card { opacity: 0; }
.dv-card { --c: #2563EB; position: relative; font: inherit; text-align: start; cursor: pointer; border: 1px solid #E2E8F0; border-radius: 22px; padding: 16px; min-height: 150px; display: flex; flex-direction: column; gap: 4px; background: var(--white); color: var(--ink); box-shadow: 0 4px 12px rgba(10, 27, 61, .06); transition: transform var(--spring-snappy-ms) var(--spring-snappy), box-shadow .3s ease, background-color .35s ease, color .35s ease, border-color .35s ease; }
@media (hover: hover) { .dv-card:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 12px 32px rgba(10, 27, 61, .15); } }
.dv-card:active { transform: scale(.96); }
.dv-card:focus-visible { outline: 3px solid rgba(0, 123, 255, .45); outline-offset: 2px; }
.dv-ic { width: 44px; height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--c) 12%, #fff); color: var(--c); margin-bottom: 8px; transition: background-color .35s ease, color .35s ease, transform var(--spring-bouncy-ms) var(--spring-bouncy); }
.dv-room { font-size: 12px; color: var(--slate); }
.dv-name { font-size: 16px; }
.dv-state { font-size: 14px; font-weight: 600; color: var(--slate); }
.dv-bar { margin-top: auto; height: 6px; border-radius: 6px; background: rgba(10, 27, 61, .08); overflow: hidden; }
.dv-bar i { display: block; height: 100%; border-radius: 6px; background: var(--c); transition: width var(--spring-smooth-ms) var(--spring-smooth); }
.dv-card.on { background: var(--c); border-color: var(--c); color: #fff; box-shadow: 0 10px 28px color-mix(in srgb, var(--c) 40%, transparent); }
.dv-card.on .dv-room, .dv-card.on .dv-state { color: rgba(255, 255, 255, .85); }
.dv-card.on .dv-ic { background: rgba(255, 255, 255, .22); color: #fff; }
.dv-card.on .dv-bar { background: rgba(255, 255, 255, .25); }
.dv-card.on .dv-bar i { background: #fff; }
.dv-card.alert { background: #DC2626; border-color: #DC2626; }
.dv-card.alert .dv-ic { animation: dv-ring 1s ease-in-out 3; }
.dv-card.bump { animation: dv-bump var(--spring-bouncy-ms) var(--spring-bouncy); }
.dv-card.bump .dv-ic { transform: scale(1.12); }
@keyframes dv-bump { 0% { transform: scale(.94); } 100% { transform: none; } }
@keyframes dv-ring { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }
@media (prefers-reduced-motion: reduce) { .dv-card, .dv-card.bump, .dv-card.alert .dv-ic { animation: none; transition: none; } }