/* Variant 1: atmospheric photographic device cards (v13) */
.device-group-grid {
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 22px;
    align-items: stretch;
}

.device-card.photo-v1-card {
    --photo-v1-base: #26382f;
    --photo-v1-soft: rgba(255,255,255,.10);
    --photo-v1-accent: #b8edc8;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    min-height: 610px;
    padding: 20px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.25) !important;
    border-radius: 34px;
    color: #fff;
    background: var(--photo-v1-base) !important;
    box-shadow: 0 22px 54px rgba(14,36,28,.20) !important;
}
.device-card.photo-v1-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255,255,255,.42) !important;
    box-shadow: 0 28px 64px rgba(14,36,28,.28) !important;
}
.device-card.photo-v1-card::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    height: 70% !important;
    border-radius: inherit !important;
    background-image: var(--photo-v1-image) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    pointer-events: none !important;
    z-index: -3 !important;
    opacity: 1 !important;
}
.device-card.photo-v1-card::after {
    content: "";
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(7,14,11,.16) 0%, rgba(7,14,11,.03) 28%, rgba(7,14,11,.16) 47%, var(--photo-v1-fade) 67%, var(--photo-v1-base) 82%),
        linear-gradient(90deg, rgba(0,0,0,.16), transparent 58%);
    pointer-events: none;
    z-index: -2;
    opacity: 1;
}
.device-card.photo-v1-sensor {
    --photo-v1-image: url('../assets/cards/sensor-scene.jpg');
    --photo-v1-base: #314534;
    --photo-v1-fade: rgba(43,63,48,.92);
    --photo-v1-accent: #bdf4b3;
}
.device-card.photo-v1-heater {
    --photo-v1-image: url('../assets/cards/heater-scene.jpg');
    --photo-v1-base: #603514;
    --photo-v1-fade: rgba(87,43,14,.94);
    --photo-v1-accent: #ffbf66;
}
.device-card.photo-v1-access {
    --photo-v1-image: url('../assets/cards/access-scene.jpg');
    --photo-v1-base: #213247;
    --photo-v1-fade: rgba(28,45,66,.95);
    --photo-v1-accent: #d1e2ff;
}

.device-card.photo-v1-light {
    --photo-v1-image: url('../assets/cards/typed_rooms/living-light.jpg');
    --photo-v1-base: #62401f;
    --photo-v1-fade: rgba(79,53,29,.95);
    --photo-v1-accent: #ffd59e;
}

.device-card.photo-v1-card[data-room-theme="living"] {
    --photo-v1-image: url('../assets/cards/sensor-scene.jpg');
    --photo-v1-base: #314534;
    --photo-v1-fade: rgba(43,63,48,.92);
    --photo-v1-accent: #bdf4b3;
}
.device-card.photo-v1-card[data-room-theme="bedroom"] {
    --photo-v1-image: url('../assets/cards/heater-scene.jpg');
    --photo-v1-base: #603514;
    --photo-v1-fade: rgba(87,43,14,.94);
    --photo-v1-accent: #ffbf66;
}
.device-card.photo-v1-card[data-room-theme="kids"] {
    --photo-v1-image: url('../assets/cards/rooms/room-kids.jpg');
    --photo-v1-base: #8c6655;
    --photo-v1-fade: rgba(120,88,69,.93);
    --photo-v1-accent: #ffe6c7;
}
.device-card.photo-v1-card[data-room-theme="kitchen"] {
    --photo-v1-image: url('../assets/cards/rooms/room-kitchen.jpg');
    --photo-v1-base: #6a4b2d;
    --photo-v1-fade: rgba(90,60,32,.93);
    --photo-v1-accent: #ffe3a8;
}
.device-card.photo-v1-card[data-room-theme="wardrobe"] {
    --photo-v1-image: url('../assets/cards/rooms/room-wardrobe.jpg');
    --photo-v1-base: #68452c;
    --photo-v1-fade: rgba(83,56,36,.94);
    --photo-v1-accent: #f9d7a6;
}
.device-card.photo-v1-card[data-room-theme="bathroom"] {
    --photo-v1-image: url('../assets/cards/rooms/room-bathroom.jpg');
    --photo-v1-base: #4b4138;
    --photo-v1-fade: rgba(65,55,48,.94);
    --photo-v1-accent: #f0dcc2;
}
.device-card.photo-v1-card[data-room-theme="utility"] {
    --photo-v1-image: url('../assets/cards/rooms/room-utility.jpg');
    --photo-v1-base: #4d5b5b;
    --photo-v1-fade: rgba(58,68,69,.95);
    --photo-v1-accent: #dbe9e9;
}
.device-card.photo-v1-card[data-room-theme="attic"] {
    --photo-v1-image: url('../assets/cards/rooms/room-attic.jpg');
    --photo-v1-base: #5b3920;
    --photo-v1-fade: rgba(72,46,27,.95);
    --photo-v1-accent: #ffd7a0;
}
.device-card.photo-v1-card[data-room-theme="veranda"] {
    --photo-v1-image: url('../assets/cards/rooms/room-veranda.jpg');
    --photo-v1-base: #344551;
    --photo-v1-fade: rgba(42,56,68,.94);
    --photo-v1-accent: #ffe8b8;
}
.device-card.photo-v1-card[data-room-theme="office"] {
    --photo-v1-image: url('../assets/cards/rooms/room-office.jpg');
    --photo-v1-base: #3b322d;
    --photo-v1-fade: rgba(52,43,38,.95);
    --photo-v1-accent: #f4d9b4;
}
.device-card.photo-v1-card.inactive {
    opacity: .60;
    filter: saturate(.45);
    background: var(--photo-v1-base) !important;
}
.device-card.photo-v1-card.inactive::before { display: block !important; }
.device-card.photo-v1-card.alert-level-warning,
.device-card.photo-v1-card.alert-level-alert,
.device-card.photo-v1-card.alert-level-critical {
    background: var(--photo-v1-base) !important;
}
.device-card.photo-v1-card.alert-level-warning::before,
.device-card.photo-v1-card.alert-level-alert::before,
.device-card.photo-v1-card.alert-level-critical::before {
    width: 100% !important;
    height: 70% !important;
    background-image: var(--photo-v1-image) !important;
    border-radius: inherit !important;
}
.device-card.photo-v1-card > * { position: relative; z-index: 1; }

/* Header floats directly on the photograph. */
.photo-v1-topbar {
    display: grid;
    grid-template-columns: 58px minmax(0,1fr) auto;
    align-items: start;
    gap: 11px;
    min-height: 92px;
}
.photo-v1-device-icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 50%;
    color: #fff;
    background: rgba(255,255,255,.11);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 8px 20px rgba(0,0,0,.12);
    backdrop-filter: blur(12px);
    font-size: 1.35rem;
}
.photo-v1-heading { min-width: 0; padding-top: 1px; }
.photo-v1-heading small {
    display: block;
    margin-bottom: 2px;
    color: rgba(255,255,255,.78);
    font-size: .69rem;
    font-weight: 580;
}
.photo-v1-heading strong {
    display: block;
    overflow: hidden;
    color: #fff;
    font-size: 1.52rem;
    font-weight: 750;
    line-height: 1.08;
    letter-spacing: -.035em;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 2px 12px rgba(0,0,0,.22);
}
.photo-v1-heading > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    margin-top: 9px;
    padding: 5px 10px;
    border: 1px solid rgba(255,255,255,.23);
    border-radius: 999px;
    color: rgba(255,255,255,.92);
    background: rgba(255,255,255,.09);
    backdrop-filter: blur(10px);
    font-size: .65rem;
    white-space: nowrap;
}
.photo-v1-tools {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    max-width: 126px;
}
.photo-v1-tools .icon-btn {
    width: 37px !important;
    height: 37px !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    border-radius: 50% !important;
    color: white !important;
    background: rgba(255,255,255,.10) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.13) !important;
    backdrop-filter: blur(10px);
}
.photo-v1-tools .icon-btn:hover { background: rgba(255,255,255,.22) !important; }
.photo-v1-battery {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 34px;
    padding: 6px 8px;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 999px;
    color: #fff;
    background: rgba(255,255,255,.10);
    backdrop-filter: blur(10px);
    font-size: .66rem;
}
.photo-v1-battery i { color: #b9f2b4; }
.photo-v1-battery b { font-weight: 740; }
.photo-v1-card > .alert-badge {
    align-self: flex-start;
    margin: 2px 0 5px;
    border: 1px solid rgba(255,255,255,.24);
    backdrop-filter: blur(12px);
}

/* Sensor: one dominant temperature reading; humidity and pressure are a single lower row. */
.photo-v1-sensor-reading {
    display: flex;
    flex: 1 1 auto;
    align-items: flex-end;
    min-height: 235px;
    padding: 16px 0 12px;
}
.photo-v1-main-value {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    align-items: start;
    justify-content: start;
    padding: 0;
    border: 0;
    color: #fff;
    background: transparent;
    text-align: left;
    cursor: pointer;
    text-shadow: 0 3px 22px rgba(0,0,0,.28);
}
.photo-v1-main-value strong {
    font-size: clamp(4.1rem, 8vw, 6rem);
    font-weight: 690;
    line-height: .88;
    letter-spacing: -.07em;
}
.photo-v1-main-value em {
    margin: 4px 0 0 8px;
    font-size: 2rem;
    font-style: normal;
    font-weight: 540;
}
.photo-v1-main-value small {
    grid-column: 1 / -1;
    margin-top: 12px;
    color: rgba(255,255,255,.92);
    font-size: .92rem;
    font-weight: 520;
    text-shadow: 0 2px 10px rgba(0,0,0,.28);
}
.photo-v1-sensor-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    margin-top: 8px;
    padding: 12px 0;
    border-top: 1px solid rgba(255,255,255,.18);
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.photo-v1-metric {
    display: grid;
    grid-template-columns: 38px minmax(0,1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 78px;
    padding: 5px 15px;
    border: 0;
    border-right: 1px solid rgba(255,255,255,.18);
    color: #fff;
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.photo-v1-metric:last-child { border-right: 0; }
.photo-v1-metric > i { color: rgba(255,255,255,.95); font-size: 1.55rem; }
.photo-v1-metric span { min-width: 0; }
.photo-v1-metric small { display: block; color: rgba(255,255,255,.76); font-size: .66rem; }
.photo-v1-metric strong { display: block; margin-top: 1px; color: #fff; font-size: 1.6rem; font-weight: 710; white-space: nowrap; }
.photo-v1-metric strong em { font-size: .78rem; font-style: normal; font-weight: 550; }
.photo-v1-metric b { display: block; margin-top: 2px; color: var(--photo-v1-accent); font-size: .58rem; font-weight: 560; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.photo-v1-bottom-line,
.photo-v1-system-line,
.photo-v1-access-hint {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    margin-top: 12px;
    padding: 10px 13px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 18px;
    color: rgba(255,255,255,.90);
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(12px);
    font-size: .65rem;
}
.photo-v1-bottom-line > span:first-child i { color: #b9f59e; margin-right: 6px; }
.photo-v1-bottom-line > span:last-child,
.photo-v1-system-line > span:last-child,
.photo-v1-access-hint > span:last-child { color: rgba(255,255,255,.56); font-size: .56rem; white-space: nowrap; }
.photo-v1-bottom-line .stale,
.photo-v1-system-line .stale,
.photo-v1-access-hint .stale { color: #ffe0a0 !important; }

/* Heater: photo dominates upper half, then a single switch and exactly three values. */
.photo-v1-heater-photo-space { flex: 1 1 190px; min-height: 180px; }
.photo-v1-heater-switch { margin: 0 0 13px; }
.photo-v1-heater-switch .heater-photo-toggle {
    display: grid;
    grid-template-columns: 46px minmax(0,1fr) 58px;
    align-items: center;
    width: 100%;
    min-height: 78px;
    padding: 10px 14px;
    border: 1px solid rgba(255,255,255,.30);
    border-radius: 24px;
    color: #9b3d0d;
    background: rgba(255,248,237,.96);
    box-shadow: 0 14px 30px rgba(49,21,6,.18);
    backdrop-filter: blur(16px);
    text-align: left;
}
.photo-v1-heater-switch .heater-photo-toggle-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    color: #d65e19;
    background: #ffe4bc;
    font-size: 1.15rem;
}
.photo-v1-heater-switch .heater-photo-toggle-label { font-size: .95rem; font-weight: 790; }
.photo-v1-heater-switch .heater-photo-toggle-switch { justify-self: end; }
.photo-v1-heater-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    padding: 13px 0 12px;
    border-top: 1px solid rgba(255,255,255,.18);
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.photo-v1-heater-metrics > button {
    display: grid;
    grid-template-rows: 26px auto auto;
    align-content: start;
    min-width: 0;
    min-height: 102px;
    padding: 5px 13px;
    border: 0;
    border-right: 1px solid rgba(255,255,255,.18);
    color: #fff;
    background: transparent;
    text-align: left;
    cursor: pointer;
}
.photo-v1-heater-metrics > button:last-child { border-right: 0; }
.photo-v1-heater-metrics i { color: #ffc36d; font-size: 1.28rem; }
.photo-v1-heater-metrics small { color: rgba(255,255,255,.73); font-size: .60rem; line-height: 1.28; }
.photo-v1-heater-metrics strong { color: #fff; font-size: 1.48rem; font-weight: 720; white-space: nowrap; }
.photo-v1-heater-metrics strong em { font-size: .72rem; font-style: normal; font-weight: 540; }
.photo-v1-system-line > i { color: #ffc36d; }
.photo-v1-system-line { grid-template-columns: auto minmax(0,1fr) auto; }

/* Access/buttons: the photo remains untouched until the large glass action tiles. */
.photo-v1-access-photo-space { flex: 1 1 230px; min-height: 220px; }
.photo-v1-access-actions .atmo-access-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 12px;
}
.photo-v1-access-actions .atmo-access-tile {
    position: relative;
    display: grid;
    grid-template-rows: 52px auto auto;
    align-items: center;
    justify-items: start;
    min-height: 150px;
    padding: 17px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 24px;
    color: #fff;
    background: rgba(255,255,255,.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.13), 0 14px 28px rgba(4,15,29,.18);
    backdrop-filter: blur(15px);
    text-align: left;
}
.photo-v1-access-actions .atmo-access-tile:nth-child(even) { background: rgba(118,153,205,.18); }
.photo-v1-access-actions .atmo-access-tile:hover:not(.disabled) { transform: translateY(-2px); background: rgba(255,255,255,.18); }
.photo-v1-access-actions .atmo-access-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    color: #fff;
    background: rgba(255,255,255,.10);
    font-size: 1.38rem;
}
.photo-v1-access-actions .atmo-access-tile strong { color: #fff; font-size: 1.05rem; font-weight: 740; }
.photo-v1-access-actions .atmo-access-tile small,
.photo-v1-access-actions .atmo-access-tile .switch-state { color: rgba(255,255,255,.70); font-size: .62rem; }
.photo-v1-access-actions .atmo-access-switch { grid-template-columns: 1fr auto; grid-template-rows: 52px auto auto; }
.photo-v1-access-actions .atmo-access-switch > input { position: absolute; opacity: 0; pointer-events: none; }
.photo-v1-access-actions .atmo-mini-switch { grid-column: 2; grid-row: 1 / 4; }
.photo-v1-access-hint { grid-template-columns: auto minmax(0,1fr) auto; border: 0; background: transparent; }
.photo-v1-access-hint > i { color: rgba(255,255,255,.84); }

@media (max-width: 900px) {
    .device-card.photo-v1-card { min-height: 570px; }
    .photo-v1-sensor-reading { min-height: 205px; }
    .photo-v1-access-photo-space { min-height: 190px; }
    .photo-v1-heater-photo-space { min-height: 155px; }
}
@media (max-width: 768px) {
    .device-group-grid { grid-template-columns: 1fr; gap: 16px; }
    .device-card.photo-v1-card { min-height: 545px; padding: 18px; border-radius: 28px; }
    .photo-v1-topbar { grid-template-columns: 50px minmax(0,1fr) auto; gap: 9px; min-height: 82px; }
    .photo-v1-device-icon { width: 48px; height: 48px; font-size: 1.1rem; }
    .photo-v1-heading strong { font-size: 1.25rem; }
    .photo-v1-heading small { font-size: .62rem; }
    .photo-v1-heading > span { margin-top: 6px; padding: 4px 8px; font-size: .58rem; }
    .photo-v1-tools { max-width: 82px; gap: 4px; }
    .photo-v1-tools .icon-btn { width: 34px !important; height: 34px !important; }
    .photo-v1-battery { padding: 5px 7px; font-size: .60rem; }
    .photo-v1-sensor-reading { min-height: 185px; padding-bottom: 8px; }
    .photo-v1-main-value strong { font-size: 4.4rem; }
    .photo-v1-main-value em { font-size: 1.55rem; }
    .photo-v1-main-value small { font-size: .80rem; }
    .photo-v1-metric { min-height: 70px; padding: 4px 10px; grid-template-columns: 30px minmax(0,1fr); }
    .photo-v1-metric > i { font-size: 1.2rem; }
    .photo-v1-metric strong { font-size: 1.3rem; }
    .photo-v1-heater-photo-space { min-height: 125px; }
    .photo-v1-heater-metrics > button { min-height: 92px; padding: 4px 8px; }
    .photo-v1-heater-metrics strong { font-size: 1.22rem; }
    .photo-v1-access-photo-space { min-height: 150px; }
    .photo-v1-access-actions .atmo-access-tile { min-height: 128px; padding: 14px; border-radius: 21px; }
    .photo-v1-access-actions .atmo-access-icon { width: 44px; height: 44px; }
}
@media (max-width: 430px) {
    .device-card.photo-v1-card { min-height: 520px; }
    .photo-v1-tools { max-width: 74px; }
    .photo-v1-battery { grid-column: auto; }
    .photo-v1-main-value strong { font-size: 4rem; }
    .photo-v1-sensor-metrics { grid-template-columns: 1fr 1fr; }
    .photo-v1-metric { padding-inline: 7px; }
    .photo-v1-metric b { display: none; }
    .photo-v1-heater-metrics small { font-size: .53rem; }
    .photo-v1-heater-metrics strong { font-size: 1.08rem; }
    .photo-v1-access-actions .atmo-access-grid { gap: 9px; }
    .photo-v1-access-actions .atmo-access-tile { min-height: 118px; padding: 12px; }
    .photo-v1-access-actions .atmo-access-tile strong { font-size: .9rem; }
    .photo-v1-bottom-line,
    .photo-v1-system-line,
    .photo-v1-access-hint { font-size: .58rem; }
}


/* v17: real IMG background layer — avoids custom-property URL resolution issues. */
.device-card.photo-v1-card::before {
    display: none !important;
    background-image: none !important;
}
.device-card.photo-v1-card.alert-level-warning::before,
.device-card.photo-v1-card.alert-level-alert::before,
.device-card.photo-v1-card.alert-level-critical::before,
.device-card.photo-v1-card.inactive::before {
    display: none !important;
    background-image: none !important;
}
.photo-v1-bg-image {
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    z-index: -3 !important;
    display: block !important;
    width: 100% !important;
    height: 70% !important;
    border-radius: inherit !important;
    object-fit: cover !important;
    object-position: center !important;
    opacity: 1 !important;
    pointer-events: none !important;
    user-select: none !important;
}
.device-card.photo-v1-card.inactive > .photo-v1-bg-image {
    filter: saturate(.45);
}


/* Heater card header tweaks: visible icon and full title */
.device-card.photo-v1-heater .photo-v1-topbar {
    grid-template-columns: 52px minmax(0,1fr) auto;
    gap: 10px;
    min-height: 108px;
}
.device-card.photo-v1-heater .photo-v1-device-icon {
    width: 52px;
    height: 52px;
    font-size: 1.22rem;
    align-self: start;
}
.device-card.photo-v1-heater .photo-v1-heading strong {
    font-size: 1.34rem;
    line-height: 1.04;
    white-space: normal;
    overflow: hidden;
    text-overflow: initial;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: 100%;
}
.device-card.photo-v1-heater .photo-v1-heading > span {
    margin-top: 7px;
}
.device-card.photo-v1-heater .photo-v1-tools {
    max-width: 118px;
    gap: 5px;
}
.device-card.photo-v1-heater .photo-v1-tools .icon-btn {
    width: 35px !important;
    height: 35px !important;
}
@media (max-width: 768px) {
    .device-card.photo-v1-heater .photo-v1-topbar {
        grid-template-columns: 46px minmax(0,1fr) auto;
        min-height: 96px;
        gap: 8px;
    }
    .device-card.photo-v1-heater .photo-v1-device-icon {
        width: 46px;
        height: 46px;
        font-size: 1.02rem;
    }
    .device-card.photo-v1-heater .photo-v1-heading strong {
        font-size: 1.18rem;
        line-height: 1.06;
    }
    .device-card.photo-v1-heater .photo-v1-heading small {
        margin-bottom: 3px;
    }
    .device-card.photo-v1-heater .photo-v1-tools {
        max-width: 74px;
        gap: 4px;
    }
    .device-card.photo-v1-heater .photo-v1-tools .icon-btn {
        width: 32px !important;
        height: 32px !important;
    }
}


/* Sensor card header tweaks: full title visibility */
.device-card.photo-v1-sensor .photo-v1-topbar {
    grid-template-columns: 52px minmax(0,1fr) auto;
    gap: 10px;
    min-height: 112px;
}
.device-card.photo-v1-sensor .photo-v1-device-icon {
    width: 52px;
    height: 52px;
    font-size: 1.18rem;
    align-self: start;
}
.device-card.photo-v1-sensor .photo-v1-heading strong {
    font-size: 1.30rem;
    line-height: 1.04;
    white-space: normal;
    overflow: hidden;
    text-overflow: initial;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: 100%;
}
.device-card.photo-v1-sensor .photo-v1-heading > span {
    margin-top: 7px;
}
.device-card.photo-v1-sensor .photo-v1-tools {
    max-width: 118px;
    gap: 5px;
}
.device-card.photo-v1-sensor .photo-v1-tools .icon-btn {
    width: 35px !important;
    height: 35px !important;
}
@media (max-width: 768px) {
    .device-card.photo-v1-sensor .photo-v1-topbar {
        grid-template-columns: 46px minmax(0,1fr) auto;
        min-height: 100px;
        gap: 8px;
    }
    .device-card.photo-v1-sensor .photo-v1-device-icon {
        width: 46px;
        height: 46px;
        font-size: 1rem;
    }
    .device-card.photo-v1-sensor .photo-v1-heading strong {
        font-size: 1.14rem;
        line-height: 1.06;
    }
    .device-card.photo-v1-sensor .photo-v1-heading small {
        margin-bottom: 3px;
    }
    .device-card.photo-v1-sensor .photo-v1-tools {
        max-width: 74px;
        gap: 4px;
    }
    .device-card.photo-v1-sensor .photo-v1-tools .icon-btn {
        width: 32px !important;
        height: 32px !important;
    }
}

/* ==========================================================
   v26 — COMPACT DEVICE CARDS
   Same visual language, less vertical whitespace.
   ========================================================== */
.device-group-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}

.device-card.photo-v1-card {
    min-height: 500px;
    padding: 15px;
    border-radius: 28px;
}
.device-card.photo-v1-card:hover { transform: translateY(-2px); }
.photo-v1-bg-image { height: 66% !important; }
.device-card.photo-v1-card::after {
    background:
        linear-gradient(180deg, rgba(7,14,11,.16) 0%, rgba(7,14,11,.03) 24%, rgba(7,14,11,.18) 43%, var(--photo-v1-fade) 63%, var(--photo-v1-base) 80%),
        linear-gradient(90deg, rgba(0,0,0,.15), transparent 58%);
}

.photo-v1-topbar,
.device-card.photo-v1-sensor .photo-v1-topbar,
.device-card.photo-v1-heater .photo-v1-topbar {
    grid-template-columns: 46px minmax(0,1fr) auto;
    gap: 8px;
    min-height: 74px;
}
.photo-v1-device-icon,
.device-card.photo-v1-sensor .photo-v1-device-icon,
.device-card.photo-v1-heater .photo-v1-device-icon {
    width: 44px;
    height: 44px;
    font-size: 1rem;
}
.photo-v1-heading small,
.device-card.photo-v1-sensor .photo-v1-heading small,
.device-card.photo-v1-heater .photo-v1-heading small {
    margin-bottom: 1px;
    font-size: .60rem;
}
.photo-v1-heading strong,
.device-card.photo-v1-sensor .photo-v1-heading strong,
.device-card.photo-v1-heater .photo-v1-heading strong {
    font-size: 1.12rem;
    line-height: 1.05;
}
.photo-v1-heading > span,
.device-card.photo-v1-sensor .photo-v1-heading > span,
.device-card.photo-v1-heater .photo-v1-heading > span {
    margin-top: 5px;
    padding: 4px 8px;
    font-size: .56rem;
}
.photo-v1-tools,
.device-card.photo-v1-sensor .photo-v1-tools,
.device-card.photo-v1-heater .photo-v1-tools {
    max-width: 104px;
    gap: 4px;
}
.photo-v1-tools .icon-btn,
.device-card.photo-v1-sensor .photo-v1-tools .icon-btn,
.device-card.photo-v1-heater .photo-v1-tools .icon-btn {
    width: 31px !important;
    height: 31px !important;
    font-size: .75rem !important;
}
.photo-v1-battery {
    min-height: 29px;
    padding: 4px 7px;
    font-size: .56rem;
}
.photo-v1-card > .alert-badge {
    margin: 0 0 3px;
    padding: 4px 8px;
    font-size: .58rem;
}

/* Sensor */
.photo-v1-sensor-reading {
    min-height: 158px;
    padding: 8px 0 6px;
}
.photo-v1-main-value strong { font-size: clamp(3.25rem, 6.4vw, 4.65rem); }
.photo-v1-main-value em { margin: 2px 0 0 6px; font-size: 1.5rem; }
.photo-v1-main-value small { margin-top: 7px; font-size: .72rem; }
.photo-v1-sensor-metrics {
    margin-top: 5px;
    padding: 7px 0;
}
.photo-v1-metric {
    grid-template-columns: 29px minmax(0,1fr);
    gap: 6px;
    min-height: 60px;
    padding: 3px 10px;
}
.photo-v1-metric > i { font-size: 1.12rem; }
.photo-v1-metric small { font-size: .56rem; }
.photo-v1-metric strong { font-size: 1.22rem; }
.photo-v1-metric strong em { font-size: .66rem; }
.photo-v1-metric b { margin-top: 1px; font-size: .52rem; }

.photo-v1-bottom-line,
.photo-v1-system-line,
.photo-v1-access-hint {
    min-height: 38px;
    margin-top: 8px;
    padding: 7px 10px;
    border-radius: 14px;
    gap: 8px;
    font-size: .58rem;
}
.photo-v1-bottom-line > span:last-child,
.photo-v1-system-line > span:last-child,
.photo-v1-access-hint > span:last-child { font-size: .50rem; }

/* Heater */
.photo-v1-heater-photo-space {
    flex: 1 1 128px;
    min-height: 108px;
}
.photo-v1-heater-switch { margin-bottom: 8px; }
.photo-v1-heater-switch .heater-photo-toggle {
    grid-template-columns: 38px minmax(0,1fr) 48px;
    min-height: 60px;
    padding: 8px 11px;
    border-radius: 19px;
}
.photo-v1-heater-switch .heater-photo-toggle-icon {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    font-size: .92rem;
}
.photo-v1-heater-switch .heater-photo-toggle-label { font-size: .80rem; }
.photo-v1-heater-metrics { padding: 8px 0 7px; }
.photo-v1-heater-metrics > button {
    grid-template-rows: 20px auto auto;
    min-height: 76px;
    padding: 3px 9px;
}
.photo-v1-heater-metrics i { font-size: 1.05rem; }
.photo-v1-heater-metrics small { font-size: .53rem; }
.photo-v1-heater-metrics strong { font-size: 1.18rem; }
.photo-v1-heater-metrics strong em { font-size: .62rem; }

/* Access / light */
.photo-v1-access-photo-space {
    flex: 1 1 150px;
    min-height: 138px;
}
.photo-v1-access-actions .atmo-access-grid { gap: 9px; }
.photo-v1-access-actions .atmo-access-tile {
    min-height: 94px;
    padding: 10px;
    border-radius: 18px;
}
.photo-v1-access-actions .atmo-access-icon {
    width: 39px;
    height: 39px;
    border-radius: 13px;
    font-size: 1rem;
}
.photo-v1-access-actions .atmo-access-tile strong { font-size: .88rem; }
.photo-v1-access-actions .atmo-access-tile small,
.photo-v1-access-actions .atmo-access-tile .switch-state { font-size: .55rem; }
.photo-v1-access-actions .atmo-access-switch { grid-template-rows: 42px auto auto; }

@media (max-width: 900px) {
    .device-card.photo-v1-card { min-height: 480px; }
    .photo-v1-sensor-reading { min-height: 148px; }
    .photo-v1-heater-photo-space { min-height: 100px; }
    .photo-v1-access-photo-space { min-height: 125px; }
}

@media (max-width: 768px) {
    .device-group-grid { gap: 13px; }
    .device-card.photo-v1-card { min-height: 458px; padding: 13px; border-radius: 25px; }
    .photo-v1-topbar,
    .device-card.photo-v1-sensor .photo-v1-topbar,
    .device-card.photo-v1-heater .photo-v1-topbar {
        grid-template-columns: 42px minmax(0,1fr) auto;
        min-height: 68px;
        gap: 7px;
    }
    .photo-v1-device-icon,
    .device-card.photo-v1-sensor .photo-v1-device-icon,
    .device-card.photo-v1-heater .photo-v1-device-icon {
        width: 40px;
        height: 40px;
        font-size: .92rem;
    }
    .photo-v1-heading strong,
    .device-card.photo-v1-sensor .photo-v1-heading strong,
    .device-card.photo-v1-heater .photo-v1-heading strong { font-size: 1.03rem; }
    .photo-v1-tools,
    .device-card.photo-v1-sensor .photo-v1-tools,
    .device-card.photo-v1-heater .photo-v1-tools { max-width: 70px; }
    .photo-v1-tools .icon-btn,
    .device-card.photo-v1-sensor .photo-v1-tools .icon-btn,
    .device-card.photo-v1-heater .photo-v1-tools .icon-btn {
        width: 29px !important;
        height: 29px !important;
    }
    .photo-v1-sensor-reading { min-height: 136px; }
    .photo-v1-main-value strong { font-size: 3.35rem; }
    .photo-v1-main-value em { font-size: 1.3rem; }
    .photo-v1-main-value small { font-size: .68rem; }
    .photo-v1-metric { min-height: 56px; padding-inline: 7px; }
    .photo-v1-metric strong { font-size: 1.08rem; }
    .photo-v1-heater-photo-space { min-height: 88px; }
    .photo-v1-heater-metrics > button { min-height: 70px; padding-inline: 6px; }
    .photo-v1-heater-metrics strong { font-size: 1.03rem; }
    .photo-v1-access-photo-space { min-height: 112px; }
    .photo-v1-access-actions .atmo-access-tile { min-height: 86px; padding: 9px; }
}

@media (max-width: 430px) {
    .device-card.photo-v1-card { min-height: 445px; }
    .photo-v1-main-value strong { font-size: 3.15rem; }
    .photo-v1-metric b { display: none; }
    .photo-v1-heater-metrics small { font-size: .49rem; }
    .photo-v1-heater-metrics strong { font-size: .96rem; }
    .photo-v1-access-actions .atmo-access-tile { min-height: 82px; }
}

/* ============================================
   v27 — выделение конкретного показателя, вызвавшего тревогу
   ============================================ */
.photo-v1-main-value.attention-value,
.photo-v1-metric.attention-value,
.photo-v1-heater-metrics > button.attention-value,
.photo-v1-battery.attention-value {
    position: relative;
    isolation: isolate;
    transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.photo-v1-main-value.attention-value,
.photo-v1-metric.attention-value,
.photo-v1-heater-metrics > button.attention-value {
    border-radius: 16px;
}

.attention-value.attention-warning {
    background: linear-gradient(145deg, rgba(255, 196, 69, .16), rgba(255, 170, 25, .08)) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 199, 76, .45), 0 0 18px rgba(255, 181, 39, .10);
}
.attention-value.attention-alert {
    background: linear-gradient(145deg, rgba(255, 125, 41, .22), rgba(233, 77, 21, .10)) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 136, 57, .66), 0 0 22px rgba(255, 94, 35, .18);
}
.attention-value.attention-critical {
    background: linear-gradient(145deg, rgba(225, 45, 64, .28), rgba(154, 22, 41, .14)) !important;
    box-shadow: inset 0 0 0 1px rgba(255, 92, 108, .78), 0 0 24px rgba(223, 42, 62, .24);
    animation: attentionMetricPulse 1.9s ease-in-out infinite;
}

.photo-v1-battery.attention-warning { color: #fff5d6; }
.photo-v1-battery.attention-alert,
.photo-v1-battery.attention-critical { color: #fff; }

.photo-v1-heater-metrics > button.attention-warning i,
.photo-v1-main-value.attention-warning small,
.photo-v1-metric.attention-warning b { color: #ffd274 !important; }
.photo-v1-heater-metrics > button.attention-alert i,
.photo-v1-main-value.attention-alert small,
.photo-v1-metric.attention-alert b { color: #ffad72 !important; }
.photo-v1-heater-metrics > button.attention-critical i,
.photo-v1-main-value.attention-critical small,
.photo-v1-metric.attention-critical b { color: #ff9aa8 !important; }

.device-card.attention-focus {
    animation: attentionCardFocus 1.05s ease-in-out 2;
}

@keyframes attentionMetricPulse {
    0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 92, 108, .68), 0 0 16px rgba(223, 42, 62, .16); }
    50% { box-shadow: inset 0 0 0 1px rgba(255, 126, 139, .95), 0 0 28px rgba(223, 42, 62, .34); }
}
@keyframes attentionCardFocus {
    0%, 100% { transform: translateY(0); box-shadow: 0 18px 42px rgba(20, 59, 46, .12); }
    50% { transform: translateY(-3px); box-shadow: 0 0 0 3px rgba(255, 180, 57, .50), 0 24px 54px rgba(20, 59, 46, .22); }
}

@media (prefers-reduced-motion: reduce) {
    .attention-value.attention-critical,
    .device-card.attention-focus { animation: none !important; }
}

/* =========================================================
   v33 — safe slide-to-confirm control for gates / access
   ========================================================= */
.gate-slide-control {
    position: relative;
    min-height: 78px;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.18);
    background: linear-gradient(135deg, rgba(8,18,31,.58), rgba(18,35,52,.42));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 12px 28px rgba(0,0,0,.16);
    overflow: hidden;
    display: grid;
    grid-template-columns: 64px minmax(0,1fr);
    grid-template-rows: 1fr auto;
    align-items: center;
    gap: 0 10px;
    padding: 7px 13px 7px 7px;
    isolation: isolate;
    touch-action: none;
    overscroll-behavior: contain;
    -webkit-tap-highlight-color: transparent;
}

.gate-slide-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    background: linear-gradient(90deg, rgba(73,208,144,.24), rgba(97,220,169,.42));
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    transition: width .18s ease;
}
.gate-slide-thumb {
    position: relative;
    z-index: 2;
    grid-column: 1;
    grid-row: 1 / 3;
    width: 58px;
    height: 58px;
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 19px;
    background: linear-gradient(145deg, rgba(255,255,255,.28), rgba(255,255,255,.13));
    color: #fff;
    box-shadow: 0 8px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    transition: transform .22s cubic-bezier(.2,.8,.2,1), background .2s, box-shadow .2s;
}
.gate-slide-thumb:active { cursor: grabbing; }
.gate-slide-thumb .gate-slide-arrow { font-size: .72rem; opacity: .72; }
.gate-slide-label {
    position: relative;
    z-index: 1;
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    color: rgba(255,255,255,.80);
    font-size: .68rem;
    font-weight: 650;
    letter-spacing: .01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}
.gate-slide-action {
    position: relative;
    z-index: 1;
    grid-column: 2;
    grid-row: 2;
    color: #fff;
    font-size: .88rem;
    font-weight: 760;
    line-height: 1.15;
    pointer-events: none;
}
.gate-slide-control.is-dragging .gate-slide-thumb,
.gate-slide-control.no-transition .gate-slide-thumb,
.gate-slide-control.no-transition .gate-slide-fill { transition: none !important; }
.gate-slide-control.is-ready {
    border-color: rgba(110,231,183,.70);
    box-shadow: inset 0 0 0 1px rgba(110,231,183,.20), 0 12px 30px rgba(16,185,129,.16);
}
.gate-slide-control.is-ready .gate-slide-thumb {
    background: linear-gradient(145deg, rgba(74,222,128,.86), rgba(16,185,129,.70));
    box-shadow: 0 8px 24px rgba(16,185,129,.32);
}
.gate-slide-control.is-ready .gate-slide-label { color: #d9ffed; }
.gate-slide-control.is-sending { opacity: .78; pointer-events: none; }
.gate-slide-control.disabled { opacity: .46; filter: saturate(.45); }
.gate-slide-control.disabled .gate-slide-thumb { cursor: not-allowed; }

/* Compact variant inside the table view. */
.gate-slide-control--table {
    width: min(250px, 100%);
    min-width: 210px;
    min-height: 54px;
    grid-template-columns: 46px minmax(0,1fr);
    border-radius: 17px;
    padding: 5px 10px 5px 5px;
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.15);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.gate-slide-control--table .gate-slide-thumb {
    width: 42px;
    height: 42px;
    border-radius: 13px;
}
.gate-slide-control--table .gate-slide-label { font-size: .60rem; }
.gate-slide-control--table .gate-slide-action { font-size: .72rem; }

@media (max-width: 620px) {
    .gate-slide-control { min-height: 68px; border-radius: 20px; grid-template-columns: 54px minmax(0,1fr); }
    .gate-slide-thumb { width: 50px; height: 50px; border-radius: 16px; }
    .gate-slide-label { font-size: .62rem; }
    .gate-slide-action { font-size: .80rem; }
    .gate-slide-control--table { min-width: 190px; }
}


/* v34: slide-to-confirm inside the home quick-actions panel. */
.quick-device-controls .gate-slide-control--quick {
    width: min(100%, 320px);
    min-width: 230px;
    min-height: 64px;
    grid-template-columns: 52px minmax(0,1fr);
    border-radius: 19px;
    padding: 6px 11px 6px 6px;
    background: linear-gradient(135deg, rgba(24,67,53,.92), rgba(31,122,90,.82));
    border-color: rgba(255,255,255,.22);
}
.quick-device-controls .gate-slide-control--quick .gate-slide-thumb {
    width: 48px;
    height: 48px;
    border-radius: 15px;
}
.quick-device-controls .gate-slide-control--quick .gate-slide-label { font-size: .62rem; }
.quick-device-controls .gate-slide-control--quick .gate-slide-action { font-size: .82rem; }
@media (max-width: 430px) {
    .quick-device-controls .gate-slide-control--quick {
        min-width: 0;
        width: 100%;
    }
}

/* =========================================================
   v35 — mobile-safe gate slider layout
   The access actions grid is two-column for ordinary tiles.
   A slide-to-confirm control must span the full row on phones.
   ========================================================= */
@media (max-width: 768px) {
    .photo-v1-access-actions .atmo-access-grid > .gate-slide-control {
        display: grid !important;
        grid-column: 1 / -1;
        width: 100%;
        min-width: 0;
        max-width: none;
        box-sizing: border-box;
        visibility: visible !important;
        opacity: 1;
    }

    .photo-v1-access-actions .atmo-access-grid > .gate-slide-control.disabled {
        opacity: .46;
    }

    .quick-device-controls {
        flex-wrap: wrap;
        width: 100%;
        min-width: 0;
    }

    .quick-device-controls > .gate-slide-control--quick {
        display: grid !important;
        flex: 1 1 100%;
        width: min(78vw, 320px);
        min-width: min(250px, 78vw);
        max-width: 320px;
        box-sizing: border-box;
        visibility: visible !important;
    }

    .quick-device-group:has(.gate-slide-control--quick) {
        min-width: min(86vw, 344px);
        width: min(86vw, 344px);
        box-sizing: border-box;
    }
}

@media (max-width: 430px) {
    .photo-v1-access-actions .atmo-access-grid {
        grid-template-columns: 1fr;
    }

    .photo-v1-access-actions .atmo-access-grid > .gate-slide-control {
        grid-column: 1;
        min-height: 70px;
        grid-template-columns: 54px minmax(0, 1fr);
        padding-right: 10px;
    }

    .quick-device-controls > .gate-slide-control--quick {
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .quick-device-group:has(.gate-slide-control--quick) {
        min-width: min(88vw, 330px);
        width: min(88vw, 330px);
    }
}


/* ==========================================================
   v37 — table-view gate sliders
   The table is a light surface, so its slider needs its own
   contrast and touch-safe sizing instead of the dark-card skin.
   ========================================================== */
.devices-table-view .gate-slide-control--table {
    width: 250px;
    min-width: 250px;
    min-height: 54px;
    grid-template-columns: 46px minmax(0, 1fr);
    padding: 5px 10px 5px 5px;
    border: 1px solid rgba(76, 88, 181, .22);
    border-radius: 17px;
    background: linear-gradient(135deg, rgba(247,248,255,.98), rgba(232,235,255,.94));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 3px 10px rgba(70,78,150,.08);
    color: #30396e;
    overflow: hidden;
    touch-action: none;
    overscroll-behavior-x: contain;
}
.devices-table-view .gate-slide-control--table .gate-slide-fill {
    background: linear-gradient(90deg, rgba(61, 190, 128, .18), rgba(71, 202, 143, .38));
}
.devices-table-view .gate-slide-control--table .gate-slide-thumb {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid rgba(77, 87, 175, .24);
    border-radius: 13px;
    background: linear-gradient(145deg, #ffffff, #e1e5ff);
    color: #4d56a9;
    box-shadow: 0 5px 12px rgba(66,73,145,.18), inset 0 1px 0 #fff;
    touch-action: none;
}
.devices-table-view .gate-slide-control--table .gate-slide-label {
    color: #69719b;
    font-size: .60rem;
    font-weight: 700;
}
.devices-table-view .gate-slide-control--table .gate-slide-action {
    color: #28315f;
    font-size: .72rem;
    font-weight: 800;
}
.devices-table-view .gate-slide-control--table.is-ready {
    border-color: rgba(34, 166, 105, .58);
    background: linear-gradient(135deg, rgba(239,252,246,.99), rgba(217,247,232,.96));
    box-shadow: inset 0 0 0 1px rgba(34,166,105,.10), 0 5px 14px rgba(34,166,105,.13);
}
.devices-table-view .gate-slide-control--table.is-ready .gate-slide-thumb {
    color: #fff;
    border-color: rgba(27,145,89,.42);
    background: linear-gradient(145deg, #55cf91, #28a86a);
    box-shadow: 0 6px 15px rgba(31,157,96,.25);
}
.devices-table-view .gate-slide-control--table.is-ready .gate-slide-label { color: #287b55; }
.devices-table-view .gate-slide-control--table.disabled {
    opacity: .48;
    filter: saturate(.45);
}

/* A table cell can contain several controls. Keep each access slider on
   its own stable flex item so wrapping/reflow cannot collapse its track. */
.devices-table-view .table-device-controls > .gate-slide-control--table {
    flex: 0 0 250px;
    max-width: 250px;
}

@media (max-width: 760px) {
    .devices-table-view .gate-slide-control--table,
    .devices-table-view .table-device-controls > .gate-slide-control--table {
        width: 230px;
        min-width: 230px;
        max-width: 230px;
        flex-basis: 230px;
    }
}

@media (max-width: 430px) {
    .devices-table-view .gate-slide-control--table,
    .devices-table-view .table-device-controls > .gate-slide-control--table {
        width: 220px;
        min-width: 220px;
        max-width: 220px;
        flex-basis: 220px;
    }
    .devices-table-view .gate-slide-control--table .gate-slide-label { font-size: .58rem; }
    .devices-table-view .gate-slide-control--table .gate-slide-action { font-size: .70rem; }
}

/* v44 — virtual MQTT cards use the same photo-card language as physical devices */
.virtual-photo-controls {
    width: 100%;
}
.photo-v1-access-actions .virtual-photo-button,
.photo-v1-access-actions .virtual-photo-switch {
    color: #fff;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.11);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.photo-v1-access-actions .virtual-photo-button:hover:not(.disabled),
.photo-v1-access-actions .virtual-photo-switch:hover:not(.disabled) {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.28);
}
.photo-v1-access-actions .virtual-photo-switch.is-on {
    background: rgba(44,170,93,.22);
    border-color: rgba(155,255,190,.34);
}
.photo-v1-access-actions .virtual-photo-switch.is-off {
    background: rgba(255,255,255,.10);
}
.photo-v1-access-actions .virtual-photo-switch.is-unknown {
    background: rgba(120,136,158,.18);
}
.photo-v1-access-actions .virtual-photo-switch .atmo-mini-switch {
    position: relative;
    width: 44px;
    height: 25px;
    border-radius: 999px;
    background: rgba(255,255,255,.24);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.photo-v1-access-actions .virtual-photo-switch .atmo-mini-switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 7px rgba(0,0,0,.22);
    transition: transform .16s ease;
}
.photo-v1-access-actions .virtual-photo-switch.is-on .atmo-mini-switch {
    background: rgba(66,220,122,.76);
}
.photo-v1-access-actions .virtual-photo-switch.is-on .atmo-mini-switch::after {
    transform: translateX(19px);
}
.photo-v1-access-actions .virtual-photo-switch .virtual-control-state {
    color: rgba(255,255,255,.78);
}
.photo-v1-access-actions .virtual-photo-switch.is-on .virtual-control-state {
    color: #c8ffd8;
}
.device-card.virtual-disabled .photo-v1-access-actions {
    pointer-events: none;
}

/* v45.2 — expressive virtual MQTT switch */
.photo-v1-access-actions .virtual-photo-switch {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: 1fr;
    gap: 14px;
    align-items: center;
    min-height: 116px;
    padding: 16px 18px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,.08));
    border: 1px solid rgba(255,255,255,.24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 15px 32px rgba(5,16,30,.20);
    transition: transform .18s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.photo-v1-access-actions .virtual-photo-switch:hover:not(.disabled) {
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(255,255,255,.21), rgba(255,255,255,.11));
    border-color: rgba(255,255,255,.36);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 18px 38px rgba(5,16,30,.25);
}
.photo-v1-access-actions .virtual-photo-switch .virtual-switch-icon {
    grid-column: 1;
    grid-row: 1;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255,255,255,.24), rgba(255,255,255,.10));
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 8px 18px rgba(0,0,0,.12);
    transition: background .22s ease, box-shadow .22s ease, color .22s ease;
}
.photo-v1-access-actions .virtual-photo-switch .virtual-switch-copy {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 5px;
    min-width: 0;
}
.photo-v1-access-actions .virtual-photo-switch .virtual-switch-copy strong {
    font-size: 1.02rem;
    line-height: 1.16;
    letter-spacing: -.01em;
    text-shadow: 0 1px 8px rgba(0,0,0,.18);
}
.photo-v1-access-actions .virtual-photo-switch .virtual-switch-copy small {
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .015em;
    color: rgba(255,255,255,.66);
}
.photo-v1-access-actions .virtual-photo-switch .virtual-switch-indicator {
    position: absolute;
    top: 13px;
    right: 15px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,.34);
    box-shadow: 0 0 0 4px rgba(255,255,255,.04);
    transition: background .22s ease, box-shadow .22s ease;
}
.photo-v1-access-actions .virtual-photo-switch .atmo-mini-switch {
    grid-column: 3;
    grid-row: 1;
    width: 58px;
    height: 32px;
    align-self: center;
    background: rgba(255,255,255,.22);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: inset 0 2px 5px rgba(0,0,0,.16), 0 7px 18px rgba(0,0,0,.12);
    transition: background .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.photo-v1-access-actions .virtual-photo-switch .atmo-mini-switch::after {
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    box-shadow: 0 3px 9px rgba(0,0,0,.28);
    transition: transform .20s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease;
}
.photo-v1-access-actions .virtual-photo-switch.is-on {
    background: linear-gradient(135deg, rgba(42,190,105,.32), rgba(23,122,77,.18));
    border-color: rgba(153,255,192,.48);
    box-shadow: inset 0 1px 0 rgba(220,255,233,.18), 0 16px 34px rgba(4,44,26,.26), 0 0 24px rgba(55,211,119,.09);
}
.photo-v1-access-actions .virtual-photo-switch.is-on .virtual-switch-icon {
    color: #e7fff0;
    background: linear-gradient(145deg, rgba(90,234,145,.40), rgba(40,164,95,.20));
    border-color: rgba(177,255,206,.34);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.20), 0 0 20px rgba(68,225,132,.20);
}
.photo-v1-access-actions .virtual-photo-switch.is-on .virtual-switch-indicator {
    background: #8ff3b4;
    box-shadow: 0 0 0 4px rgba(100,239,155,.10), 0 0 14px rgba(100,239,155,.72);
}
.photo-v1-access-actions .virtual-photo-switch.is-on .atmo-mini-switch {
    background: linear-gradient(90deg, rgba(55,211,119,.78), rgba(86,235,145,.88));
    border-color: rgba(173,255,205,.45);
    box-shadow: inset 0 2px 5px rgba(4,78,37,.18), 0 0 18px rgba(58,218,122,.30);
}
.photo-v1-access-actions .virtual-photo-switch.is-on .atmo-mini-switch::after {
    transform: translateX(26px);
    box-shadow: 0 3px 10px rgba(8,65,35,.34), 0 0 11px rgba(255,255,255,.34);
}
.photo-v1-access-actions .virtual-photo-switch.is-off {
    background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.075));
}
.photo-v1-access-actions .virtual-photo-switch.is-unknown .virtual-switch-indicator {
    background: rgba(197,210,225,.72);
}

@media (max-width: 768px) {
    .photo-v1-access-actions .virtual-photo-switch {
        min-height: 96px;
        padding: 13px 14px;
        gap: 11px;
        border-radius: 20px;
    }
    .photo-v1-access-actions .virtual-photo-switch .virtual-switch-icon {
        width: 46px;
        height: 46px;
        border-radius: 15px;
    }
    .photo-v1-access-actions .virtual-photo-switch .virtual-switch-copy strong { font-size: .92rem; }
    .photo-v1-access-actions .virtual-photo-switch .virtual-switch-copy small { font-size: .58rem; }
    .photo-v1-access-actions .virtual-photo-switch .atmo-mini-switch { width: 52px; height: 29px; }
    .photo-v1-access-actions .virtual-photo-switch .atmo-mini-switch::after { width: 21px; height: 21px; }
    .photo-v1-access-actions .virtual-photo-switch.is-on .atmo-mini-switch::after { transform: translateX(23px); }
}

/* v45.3 — expressive physical light switch, aligned with virtual MQTT controls */
.photo-v1-access-actions .physical-photo-switch {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: 1fr;
    gap: 14px;
    align-items: center;
    min-height: 116px;
    padding: 16px 18px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.08));
    border: 1px solid rgba(255,255,255,.25);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 15px 32px rgba(45,25,8,.20);
    transition: transform .18s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.photo-v1-access-actions .physical-photo-switch:hover:not(.disabled) {
    transform: translateY(-2px);
    background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.11));
    border-color: rgba(255,255,255,.38);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.23), 0 18px 38px rgba(45,25,8,.24);
}
.photo-v1-access-actions .physical-photo-switch .physical-switch-icon {
    grid-column: 1;
    grid-row: 1;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(145deg, rgba(255,255,255,.25), rgba(255,255,255,.10));
    border: 1px solid rgba(255,255,255,.17);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 18px rgba(0,0,0,.12);
    transition: background .22s ease, box-shadow .22s ease, color .22s ease;
}
.photo-v1-access-actions .physical-photo-switch .physical-switch-copy {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 5px;
    min-width: 0;
}
.photo-v1-access-actions .physical-photo-switch .physical-switch-copy strong {
    color: #fff;
    font-size: 1.02rem;
    line-height: 1.16;
    font-weight: 760;
    letter-spacing: -.01em;
    text-shadow: 0 1px 8px rgba(0,0,0,.18);
}
.photo-v1-access-actions .physical-photo-switch .physical-switch-copy small {
    color: rgba(255,255,255,.67);
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .015em;
}
.photo-v1-access-actions .physical-photo-switch .physical-switch-indicator {
    position: absolute;
    top: 13px;
    right: 15px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,.34);
    box-shadow: 0 0 0 4px rgba(255,255,255,.04);
    transition: background .22s ease, box-shadow .22s ease;
}
.photo-v1-access-actions .physical-photo-switch .atmo-mini-switch {
    grid-column: 3;
    grid-row: 1;
    width: 58px;
    height: 32px;
    align-self: center;
    background: rgba(255,255,255,.22);
    border: 1px solid rgba(255,255,255,.15);
    box-shadow: inset 0 2px 5px rgba(0,0,0,.16), 0 7px 18px rgba(0,0,0,.12);
    transition: background .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.photo-v1-access-actions .physical-photo-switch .atmo-mini-switch::after {
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    box-shadow: 0 3px 9px rgba(0,0,0,.28);
    transition: transform .20s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease;
}
.photo-v1-access-actions .physical-photo-switch.is-on {
    background: linear-gradient(135deg, rgba(255,191,79,.34), rgba(190,106,25,.20));
    border-color: rgba(255,223,166,.54);
    box-shadow: inset 0 1px 0 rgba(255,246,222,.20), 0 16px 34px rgba(86,45,5,.26), 0 0 26px rgba(255,190,80,.10);
}
.photo-v1-access-actions .physical-photo-switch.is-on .physical-switch-icon {
    color: #fff9e9;
    background: linear-gradient(145deg, rgba(255,211,116,.44), rgba(226,139,45,.24));
    border-color: rgba(255,230,178,.40);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 0 20px rgba(255,188,75,.24);
}
.photo-v1-access-actions .physical-photo-switch.is-on .physical-switch-indicator {
    background: #ffd58a;
    box-shadow: 0 0 0 4px rgba(255,207,119,.11), 0 0 14px rgba(255,205,112,.78);
}
.photo-v1-access-actions .physical-photo-switch.is-on .atmo-mini-switch {
    background: linear-gradient(90deg, rgba(232,148,48,.82), rgba(255,194,82,.94));
    border-color: rgba(255,226,170,.48);
    box-shadow: inset 0 2px 5px rgba(105,53,3,.18), 0 0 18px rgba(255,180,68,.32);
}
.photo-v1-access-actions .physical-photo-switch.is-on .atmo-mini-switch::after {
    transform: translateX(26px);
    box-shadow: 0 3px 10px rgba(95,47,3,.32), 0 0 11px rgba(255,255,255,.36);
}
.photo-v1-access-actions .physical-photo-switch.disabled {
    opacity: .55;
}

@media (max-width: 768px) {
    .photo-v1-access-actions .physical-photo-switch {
        min-height: 96px;
        padding: 13px 14px;
        gap: 11px;
        border-radius: 20px;
    }
    .photo-v1-access-actions .physical-photo-switch .physical-switch-icon {
        width: 46px;
        height: 46px;
        border-radius: 15px;
    }
    .photo-v1-access-actions .physical-photo-switch .physical-switch-copy strong { font-size: .92rem; }
    .photo-v1-access-actions .physical-photo-switch .physical-switch-copy small { font-size: .58rem; }
    .photo-v1-access-actions .physical-photo-switch .atmo-mini-switch { width: 52px; height: 29px; }
    .photo-v1-access-actions .physical-photo-switch .atmo-mini-switch::after { width: 21px; height: 21px; }
    .photo-v1-access-actions .physical-photo-switch.is-on .atmo-mini-switch::after { transform: translateX(23px); }
}

/* Smart plug: main relay control + current/voltage lower metrics */
.smart-plug-card .smart-plug-main-reading {
    align-items: center;
    justify-content: flex-start;
}

.smart-plug-main-toggle {
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    min-width: 92px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 50%;
    color: rgba(255,255,255,.9);
    background: rgba(15,23,42,.46);
    box-shadow:
        0 14px 34px rgba(2,6,23,.26),
        inset 0 1px 0 rgba(255,255,255,.10);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    cursor: pointer;
    transition:
        transform .14s ease,
        color .18s ease,
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease;
}

.smart-plug-main-toggle:not(.read-only):hover {
    transform: translateY(-2px) scale(1.03);
    background: rgba(30,41,59,.66);
    border-color: rgba(255,255,255,.40);
}

.smart-plug-main-toggle:not(.read-only):active {
    transform: translateY(0) scale(.96);
}

.smart-plug-main-toggle.read-only {
    cursor: default;
}

.smart-plug-main-toggle-icon {
    display: grid;
    place-items: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    color: rgba(255,255,255,.92);
    background: rgba(255,255,255,.10);
    font-size: 2rem;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.07),
        0 0 0 rgba(34,197,94,0);
    transition:
        color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.smart-plug-main-toggle.is-on {
    border-color: rgba(134,239,172,.72);
    background: rgba(20,83,45,.38);
    box-shadow:
        0 0 20px rgba(34,197,94,.32),
        0 0 42px rgba(34,197,94,.22),
        inset 0 1px 0 rgba(255,255,255,.12);
}

.smart-plug-main-toggle.is-on .smart-plug-main-toggle-icon {
    color: #dcfce7;
    background: rgba(22,163,74,.62);
    box-shadow:
        0 0 18px rgba(34,197,94,.78),
        0 0 38px rgba(34,197,94,.52),
        inset 0 0 0 1px rgba(220,252,231,.34);
}

.smart-plug-card .smart-plug-metrics .photo-v1-metric {
    cursor: default;
}

@media (max-width: 700px) {
    .smart-plug-main-toggle {
        width: 78px;
        height: 78px;
        min-width: 78px;
    }

    .smart-plug-main-toggle-icon {
        width: 60px;
        height: 60px;
        font-size: 1.7rem;
    }
}

/* Virtual device controls: same round power button as smart plugs */
.photo-v1-access-actions .virtual-power-controls,
.photo-v1-light .photo-v1-access-actions .virtual-power-controls {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    align-items: start;
    justify-items: center;
    gap: 18px;
    padding: 2px 0;
}

.virtual-power-control {
    min-width: 0;
    width: 100%;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 9px;
}

.virtual-power-button {
    margin: 0 auto;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.virtual-power-label {
    display: block;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: rgba(255,255,255,.92);
    font-size: .76rem;
    font-weight: 700;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0,0,0,.36);
}

/* Momentary virtual button: glow only while physically pressed. */
.virtual-power-button.virtual-momentary.is-pressed,
.virtual-power-button.virtual-momentary:active:not(.read-only) {
    border-color: rgba(134,239,172,.72);
    background: rgba(20,83,45,.38);
    box-shadow:
        0 0 20px rgba(34,197,94,.32),
        0 0 42px rgba(34,197,94,.22),
        inset 0 1px 0 rgba(255,255,255,.12);
}

.virtual-power-button.virtual-momentary.is-pressed .smart-plug-main-toggle-icon,
.virtual-power-button.virtual-momentary:active:not(.read-only) .smart-plug-main-toggle-icon {
    color: #dcfce7;
    background: rgba(22,163,74,.62);
    box-shadow:
        0 0 18px rgba(34,197,94,.78),
        0 0 38px rgba(34,197,94,.52),
        inset 0 0 0 1px rgba(220,252,231,.34);
}

/* Latching virtual switch: .is-on comes from saved/MQTT state. */
.virtual-power-button.virtual-latching.is-off,
.virtual-power-button.virtual-latching.is-unknown {
    border-color: rgba(255,255,255,.24);
    background: rgba(15,23,42,.46);
}

.virtual-power-button.is-sending {
    opacity: .78;
}

.virtual-power-button.is-cooldown {
    opacity: .66;
}

.virtual-power-button.disabled,
.virtual-power-button:disabled {
    cursor: default;
    opacity: .48;
}

@media (max-width: 700px) {
    .photo-v1-access-actions .virtual-power-controls,
    .photo-v1-light .photo-v1-access-actions .virtual-power-controls {
        grid-template-columns: repeat(auto-fit, minmax(94px, 1fr));
        gap: 14px 10px;
    }

    .virtual-power-label {
        max-width: 120px;
        font-size: .68rem;
    }
}

/* HOMMYN / Ballu heater card */
.hommyn-heater-card .hommyn-heater-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 14px 8px;
}
.hommyn-heater-card .hommyn-heater-metrics > div {
  min-width: 0;
  padding: 9px 8px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.52);
  backdrop-filter: blur(8px);
  text-align: center;
}
.hommyn-heater-card .hommyn-heater-metrics small,
.hommyn-heater-card .hommyn-control-block > small {
  display: block;
  font-size: .68rem;
  opacity: .78;
  margin-bottom: 4px;
}
.hommyn-heater-card .hommyn-heater-metrics strong {
  font-size: 1.12rem;
  font-weight: 750;
}
.hommyn-target-control {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.hommyn-target-control button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  color: inherit;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.hommyn-target-control button:hover { background: rgba(255,255,255,.28); }
.hommyn-control-block {
  margin: 7px 14px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(8px);
}
.hommyn-chip-row {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.hommyn-chip {
  flex: 1 1 auto;
  min-width: 44px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  color: inherit;
  padding: 5px 8px;
  font-size: .69rem;
  cursor: pointer;
}
.hommyn-chip.active {
  background: rgba(34,197,94,.75);
  border-color: rgba(134,239,172,.95);
  box-shadow: 0 0 12px rgba(34,197,94,.30);
}
.hommyn-chip:disabled { cursor: default; opacity: .72; }
@media (max-width: 640px) {
  .hommyn-heater-card .hommyn-heater-metrics { gap: 5px; margin-left: 10px; margin-right: 10px; }
  .hommyn-heater-card .hommyn-heater-metrics > div { padding: 7px 5px; }
  .hommyn-control-block { margin-left: 10px; margin-right: 10px; }
  .hommyn-chip { padding: 5px 6px; font-size: .64rem; }
}


/* v46 — camera card snapshot/live background preview */
.device-card.photo-v1-card.camera-card::after {
    z-index: -1;
}
.device-card.photo-v1-card > .camera-card-preview-layer {
    position: absolute !important;
    inset: 0 0 auto 0;
    width: 100%;
    height: 66%;
    z-index: -2 !important;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
    background: transparent;
}
.camera-card-preview-image,
.camera-card-preview-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    background: #000;
    transform: rotate(0deg);
    transform-origin: center center;
}
.camera-card-preview-image[hidden],
.camera-card-preview-video[hidden] {
    display: none !important;
}
.camera-card-preview-image.camera-card-preview-rotated,
.camera-card-preview-video.camera-card-preview-rotated {
    transform: rotate(180deg);
}
.camera-card-preview-live-badge {
    position: absolute;
    left: 14px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(0,0,0,.58);
    color: #fff;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .06em;
    backdrop-filter: blur(7px);
}
.camera-card-preview-live-badge[hidden] {
    display: none !important;
}
.camera-card-preview-live-badge i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 7px #34d399;
}
.device-card.camera-card.camera-card-preview-ready > .photo-v1-bg-image {
    opacity: 0 !important;
}
.device-card.camera-card.inactive .camera-card-preview-layer {
    filter: saturate(.45);
}

/* Tuya smart bulb */
.smart-bulb-card { min-height: 560px; }
.smart-bulb-main-reading { display:flex; align-items:center; gap:18px; min-height:116px !important; }
.smart-bulb-main-state { display:flex; flex-direction:column; gap:3px; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.35); }
.smart-bulb-main-state strong { font-size:1.55rem; line-height:1; }
.smart-bulb-main-state small { font-size:.72rem; opacity:.86; }
.smart-bulb-mode-row { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 12px 8px; }
.smart-bulb-mode-btn { border:1px solid rgba(255,255,255,.22); border-radius:14px; padding:8px 10px; color:#fff; background:rgba(15,23,42,.42); backdrop-filter:blur(12px); cursor:pointer; font-weight:700; }
.smart-bulb-mode-btn.active { background:rgba(2,132,199,.72); border-color:rgba(186,230,253,.72); box-shadow:0 0 18px rgba(56,189,248,.25); }
.smart-bulb-mode-btn:disabled { cursor:default; opacity:.7; }
.smart-bulb-control { margin:0 12px 8px; padding:9px 11px; border:1px solid rgba(255,255,255,.18); border-radius:16px; background:rgba(15,23,42,.38); backdrop-filter:blur(12px); color:#fff; }
.smart-bulb-control.is-hidden { display:none; }
.smart-bulb-control-head { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:7px; font-size:.72rem; }
.smart-bulb-control-head span { display:flex; align-items:center; gap:6px; }
.smart-bulb-control-head strong { font-size:.72rem; }
.smart-bulb-slider { width:100%; accent-color:#38bdf8; cursor:pointer; }
.smart-bulb-slider:disabled { cursor:default; opacity:.6; }
.smart-bulb-temp-slider { accent-color:#f59e0b; }
.smart-bulb-temperature-track { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:7px; font-size:.58rem; opacity:.95; }
.smart-bulb-color-picker-wrap { display:flex; align-items:center; gap:10px; cursor:pointer; }
.smart-bulb-color-picker { position:absolute; opacity:0; pointer-events:none; }
.smart-bulb-color-picker-wrap > span { width:34px; height:34px; border-radius:50%; border:2px solid rgba(255,255,255,.78); box-shadow:0 0 14px rgba(255,255,255,.18); }
.smart-bulb-color-picker-wrap > b { font-size:.72rem; font-weight:700; }
.smart-bulb-color-code { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.64rem !important; }
@media (max-width:700px) { .smart-bulb-card { min-height:535px; } .smart-bulb-control { margin-left:8px; margin-right:8px; } .smart-bulb-mode-row { margin-left:8px; margin-right:8px; } }

/* Smart switch channel cards */
.smart-switch-card .photo-v1-sensor-metrics {
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 8px;
    padding: 10px 0;
}
.smart-switch-card .smart-switch-channel-control {
    min-height: 92px;
    padding: 10px 12px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 16px;
    background: rgba(15,23,42,.30);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform .14s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.smart-switch-card button.smart-switch-channel-control:hover {
    transform: translateY(-2px);
    background: rgba(30,41,59,.46);
    border-color: rgba(255,255,255,.30);
}
.smart-switch-card .smart-switch-channel-control.is-on {
    border-color: rgba(134,239,172,.64);
    background: rgba(20,83,45,.36);
    box-shadow: 0 0 20px rgba(34,197,94,.18);
}
.smart-switch-card .smart-switch-channel-control > i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(255,255,255,.10);
}
.smart-switch-card .smart-switch-channel-control.is-on > i {
    color: #dcfce7;
    background: rgba(22,163,74,.55);
    box-shadow: 0 0 14px rgba(34,197,94,.42);
}
.smart-switch-card .smart-switch-channel-name {
    color: rgba(255,255,255,.94);
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: normal;
    overflow-wrap: anywhere;
}
.smart-switch-card .smart-switch-channel-control strong { font-size: 1.35rem; }
@media (max-width:430px) {
    .smart-switch-card .photo-v1-sensor-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
    .smart-switch-card .smart-switch-channel-control { min-height: 82px; padding: 8px 9px; }
    .smart-switch-card .smart-switch-channel-name { font-size: .66rem; }
}
.smart-switch-card .smart-switch-channel-name {
    display: flex;
    align-items: center;
    gap: 6px;
}