*{box-sizing:border-box}

:root{
    --bg:#070a10;
    --bg2:#0b1019;
    --glass:rgba(20,28,42,.72);
    --glass2:rgba(27,37,55,.82);
    --glass3:rgba(11,16,26,.82);
    --line:rgba(255,255,255,.09);
    --line2:rgba(255,255,255,.15);
    --text:#f6f8ff;
    --muted:#8792a7;
    --accent:#6f7cff;
    --cyan:#51d7ff;
    --green:#4ce2a0;
    --red:#ff667b;
    --orange:#ffb866;
    --shadow:0 24px 70px rgba(0,0,0,.36);
}

html,body{
    margin:0;
    width:100%;
    min-height:100%;
    background:
        radial-gradient(circle at 75% 10%,rgba(63,78,173,.17),transparent 31%),
        radial-gradient(circle at 15% 80%,rgba(30,143,166,.10),transparent 28%),
        linear-gradient(145deg,#070a10,#0a0f18 52%,#070a10);
    color:var(--text);
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

button,input,select{font:inherit}

button{color:inherit}

body{overflow-x:hidden}

.panel-shell{
    min-height:100vh;
    display:grid;
    grid-template-columns:74px minmax(0,1fr);
}

.rail{
    position:sticky;
    top:0;
    height:100vh;
    z-index:20;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    padding:16px 10px;
    background:rgba(7,10,16,.78);
    border-right:1px solid var(--line);
    backdrop-filter:blur(24px);
}

.logo{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    margin-bottom:16px;
    border-radius:15px;
    font-size:20px;
    font-weight:900;
    background:
        linear-gradient(145deg,#8b96ff,#5868f5);
    box-shadow:
        0 12px 32px rgba(87,103,245,.35),
        inset 0 1px rgba(255,255,255,.4);
}

.rail-button{
    width:46px;
    height:46px;
    border:1px solid transparent;
    border-radius:14px;
    background:transparent;
    color:var(--muted);
    font-size:20px;
    cursor:pointer;
    transition:.16s ease;
}

.rail-button:hover,
.rail-button.active{
    color:white;
    border-color:var(--line);
    background:rgba(255,255,255,.07);
    box-shadow:inset 0 1px rgba(255,255,255,.07);
}

.rail-button.active{
    color:#aeb7ff;
    background:rgba(111,124,255,.16);
}

.rail-spacer{flex:1}

.connection-dot{
    width:10px;
    height:10px;
    margin:12px;
    border-radius:50%;
    background:var(--red);
    box-shadow:0 0 15px rgba(255,102,123,.55);
}

.connection-dot.online{
    background:var(--green);
    box-shadow:0 0 15px rgba(76,226,160,.55);
}

.panel-main{
    min-width:0;
    padding:24px 30px 48px;
}

.topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px;
}

.eyebrow{
    color:#7886ff;
    font-size:10px;
    font-weight:800;
    letter-spacing:.17em;
}

.topbar h1{
    margin:4px 0 0;
    font-size:29px;
    letter-spacing:-.045em;
}

.topbar p{
    margin:5px 0 0;
    color:var(--muted);
    font-size:13px;
}

.top-actions{
    display:flex;
    align-items:center;
    gap:10px;
}

.search-box{
    height:42px;
    width:210px;
    display:flex;
    align-items:center;
    gap:8px;
    padding:0 12px;
    border:1px solid var(--line);
    border-radius:13px;
    background:rgba(255,255,255,.045);
    backdrop-filter:blur(14px);
}

.search-box span{color:var(--muted)}

.search-box input{
    width:100%;
    min-width:0;
    border:0;
    outline:0;
    color:white;
    background:transparent;
}

.search-box input::placeholder{color:#687386}

.glass-button{
    min-height:42px;
    padding:0 15px;
    border:1px solid var(--line);
    border-radius:13px;
    background:rgba(255,255,255,.055);
    cursor:pointer;
}

.glass-button:hover{background:rgba(255,255,255,.09)}

.danger-soft{color:#ff9aa9}

.clock-block{
    min-width:92px;
    text-align:right;
}

.clock-block strong{
    display:block;
    font-size:21px;
}

.clock-block span{
    display:block;
    margin-top:2px;
    color:var(--muted);
    font-size:10px;
}

.room-strip{
    display:flex;
    gap:9px;
    overflow-x:auto;
    scrollbar-width:none;
    margin-top:25px;
    padding-bottom:3px;
}

.room-strip::-webkit-scrollbar{display:none}

.room-chip{
    flex:0 0 auto;
    min-height:39px;
    padding:0 15px;
    border:1px solid var(--line);
    border-radius:999px;
    background:rgba(255,255,255,.035);
    color:var(--muted);
    cursor:pointer;
}

.room-chip:hover,
.room-chip.active{
    color:white;
    border-color:rgba(111,124,255,.34);
    background:rgba(111,124,255,.16);
}

.overview-strip{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    margin-top:18px;
}

.overview-card{
    min-height:100px;
    padding:16px 17px;
    border:1px solid var(--line);
    border-radius:18px;
    background:
        linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
    box-shadow:
        inset 0 1px rgba(255,255,255,.08),
        0 18px 50px rgba(0,0,0,.16);
    backdrop-filter:blur(18px);
}

.overview-card span{
    color:var(--muted);
    font-size:10px;
    font-weight:800;
    letter-spacing:.11em;
}

.overview-card strong{
    display:block;
    margin-top:8px;
    font-size:25px;
}

.overview-card small{
    display:block;
    margin-top:3px;
    color:var(--muted);
    font-size:10px;
}

.overview-room{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.accent-card{
    background:
        radial-gradient(circle at 80% 10%,rgba(81,215,255,.15),transparent 45%),
        linear-gradient(145deg,rgba(111,124,255,.13),rgba(255,255,255,.025));
}

.section-heading{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:20px;
    margin:28px 0 14px;
}

.section-heading h2{
    margin:0;
    font-size:20px;
}

.section-heading p{
    margin:4px 0 0;
    color:var(--muted);
    font-size:11px;
}

.heading-actions{
    display:flex;
    gap:8px;
}

.tile-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
    gap:13px;
}

.device-tile{
    position:relative;
    min-width:0;
    min-height:230px;
    overflow:hidden;
    padding:17px;
    border:1px solid var(--line);
    border-radius:20px;
    background:
        radial-gradient(circle at 95% 0%,rgba(111,124,255,.10),transparent 38%),
        linear-gradient(145deg,rgba(27,37,55,.78),rgba(12,17,27,.78));
    box-shadow:
        inset 0 1px rgba(255,255,255,.09),
        0 18px 50px rgba(0,0,0,.20);
    backdrop-filter:blur(22px);
}

.device-tile::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    border-radius:inherit;
    background:linear-gradient(120deg,rgba(255,255,255,.035),transparent 25%);
}

.device-tile.offline{opacity:.58}

.tile-head{
    position:relative;
    z-index:2;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}

.tile-name{
    min-width:0;
}

.tile-name h3{
    margin:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:16px;
}

.tile-name p{
    margin:5px 0 0;
    color:var(--muted);
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.1em;
}

.tile-actions{
    display:flex;
    align-items:center;
    gap:7px;
}

.edit-button{
    width:32px;
    height:32px;
    border:1px solid var(--line);
    border-radius:10px;
    background:rgba(255,255,255,.045);
    color:var(--muted);
    cursor:pointer;
}

.edit-button:hover{color:white}

.power-button{
    position:relative;
    width:46px;
    height:27px;
    padding:0;
    border:0;
    border-radius:999px;
    background:#343d4c;
    cursor:pointer;
    transition:.12s ease;
}

.power-button::after{
    content:"";
    position:absolute;
    top:4px;
    left:4px;
    width:19px;
    height:19px;
    border-radius:50%;
    background:white;
    box-shadow:0 2px 8px rgba(0,0,0,.25);
    transition:.12s ease;
}

.power-button.on{
    background:linear-gradient(90deg,#6171ff,#8290ff);
    box-shadow:0 0 22px rgba(111,124,255,.28);
}

.power-button.on::after{transform:translateX(19px)}

.tile-content{
    position:relative;
    z-index:2;
    display:grid;
    gap:12px;
    margin-top:17px;
}

.light-layout{
    display:grid;
    grid-template-columns:126px minmax(0,1fr);
    align-items:center;
    gap:14px;
}

.dimmer{
    --value:50;
    position:relative;
    width:118px;
    height:118px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:
        radial-gradient(circle at center,#111827 55%,transparent 57%),
        conic-gradient(
            var(--accent) calc(var(--value)*1%),
            rgba(255,255,255,.08) 0
        );
    box-shadow:
        inset 0 0 25px rgba(0,0,0,.35),
        0 14px 30px rgba(0,0,0,.22);
    touch-action:none;
    cursor:pointer;
}

.dimmer::before{
    content:"";
    position:absolute;
    inset:8px;
    border:1px solid var(--line);
    border-radius:50%;
}

.dimmer-value{
    position:relative;
    z-index:2;
    text-align:center;
}

.dimmer-value strong{
    display:block;
    font-size:25px;
}

.dimmer-value span{
    display:block;
    margin-top:1px;
    color:var(--muted);
    font-size:9px;
}

.light-controls{
    min-width:0;
    display:grid;
    gap:10px;
}

.control-label-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    color:var(--muted);
    font-size:10px;
}

.temp-slider,
.led-slider{
    width:100%;
    accent-color:var(--accent);
}

.color-presets{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:7px;
}

.color-dot{
    width:26px;
    height:26px;
    padding:0;
    border:2px solid rgba(255,255,255,.14);
    border-radius:50%;
    cursor:pointer;
    box-shadow:0 5px 14px rgba(0,0,0,.25);
}

.native-color{
    width:30px;
    height:30px;
    padding:2px;
    border:1px solid var(--line);
    border-radius:50%;
    background:transparent;
    cursor:pointer;
}

.relay-list{
    display:grid;
    gap:8px;
}

.relay-row{
    min-height:45px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:0 12px;
    border:1px solid var(--line);
    border-radius:13px;
    background:rgba(0,0,0,.14);
}

.relay-row span{
    color:#cbd2e0;
    font-size:12px;
}

.energy-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:7px;
}

.energy-cell{
    min-width:0;
    padding:10px 8px;
    border:1px solid var(--line);
    border-radius:12px;
    background:rgba(0,0,0,.15);
}

.energy-cell span{
    display:block;
    color:var(--muted);
    font-size:8px;
}

.energy-cell strong{
    display:block;
    margin-top:4px;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:12px;
}

.simple-state{
    min-height:110px;
    display:grid;
    place-items:center;
    text-align:center;
    color:var(--muted);
}

.simple-state strong{
    display:block;
    color:white;
    font-size:28px;
}

.led-controls{
    display:grid;
    gap:11px;
}

.led-row{
    display:grid;
    grid-template-columns:84px minmax(0,1fr) 38px;
    align-items:center;
    gap:8px;
}

.led-row label{
    color:var(--muted);
    font-size:10px;
}

.led-row output{
    text-align:right;
    color:#cbd2e0;
    font-size:10px;
}

.pattern-select,
.form-input,
.form-select{
    width:100%;
    min-height:41px;
    padding:0 11px;
    border:1px solid var(--line);
    border-radius:12px;
    outline:0;
    color:white;
    background:#121925;
}

.tile-footer{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:13px;
    color:var(--muted);
    font-size:9px;
}

.online-pill{
    display:flex;
    align-items:center;
    gap:5px;
}

.online-pill::before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--red);
}

.online-pill.online::before{background:var(--green)}

.empty-panel{
    min-height:260px;
    display:grid;
    place-items:center;
    align-content:center;
    gap:7px;
    padding:30px;
    text-align:center;
    border:1px dashed var(--line2);
    border-radius:20px;
    color:var(--muted);
}

.empty-panel strong{color:white}

.hidden{display:none!important}

.sheet-backdrop{
    position:fixed;
    inset:0;
    z-index:1000;
    display:flex;
    justify-content:flex-end;
    background:rgba(0,0,0,.62);
    backdrop-filter:blur(8px);
}

.sheet{
    width:min(420px,100%);
    height:100%;
    overflow:auto;
    border-left:1px solid var(--line);
    background:
        radial-gradient(circle at 100% 0%,rgba(111,124,255,.14),transparent 35%),
        rgba(10,15,24,.96);
    box-shadow:-30px 0 80px rgba(0,0,0,.35);
}

.sheet-header{
    position:sticky;
    top:0;
    z-index:2;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:15px;
    padding:22px;
    border-bottom:1px solid var(--line);
    background:rgba(10,15,24,.92);
    backdrop-filter:blur(18px);
}

.sheet-header h2{
    margin:5px 0 0;
    font-size:21px;
}

.close-button{
    width:39px;
    height:39px;
    border:1px solid var(--line);
    border-radius:12px;
    background:rgba(255,255,255,.05);
    font-size:24px;
    cursor:pointer;
}

.sheet-body{
    display:grid;
    gap:15px;
    padding:22px;
}

.form-group{
    display:grid;
    gap:7px;
}

.form-group label{
    color:var(--muted);
    font-size:11px;
}

.form-input{
    padding:0 12px;
}

.form-actions{
    display:flex;
    gap:9px;
    margin-top:8px;
}

.primary-button,
.secondary-button,
.delete-button{
    min-height:42px;
    padding:0 15px;
    border-radius:12px;
    cursor:pointer;
}

.primary-button{
    border:1px solid rgba(111,124,255,.45);
    background:rgba(111,124,255,.20);
}

.secondary-button{
    border:1px solid var(--line);
    background:rgba(255,255,255,.05);
}

.delete-button{
    border:1px solid rgba(255,102,123,.28);
    background:rgba(255,102,123,.09);
    color:#ff9aaa;
}

.sheet-note{
    padding:12px;
    border:1px solid var(--line);
    border-radius:12px;
    color:var(--muted);
    background:rgba(255,255,255,.035);
    font-size:10px;
    line-height:1.5;
}

.toast{
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:2000;
    max-width:360px;
    padding:12px 15px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#182130;
    box-shadow:var(--shadow);
    opacity:0;
    transform:translateY(10px);
    pointer-events:none;
    transition:.18s ease;
}

.toast.show{
    opacity:1;
    transform:translateY(0);
}

.toast.error{border-color:rgba(255,102,123,.5)}

@media(max-width:1050px){
    .overview-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
    .topbar{align-items:flex-start}
    .top-actions{flex-wrap:wrap;justify-content:flex-end}
}

@media(max-width:720px){
    .panel-shell{grid-template-columns:1fr}

    .rail{
        position:fixed;
        top:auto;
        bottom:0;
        width:100%;
        height:66px;
        flex-direction:row;
        justify-content:center;
        border-right:0;
        border-top:1px solid var(--line);
    }

    .logo,.rail-spacer,.connection-dot{display:none}

    .panel-main{padding:18px 15px 84px}

    .topbar{display:block}

    .top-actions{
        margin-top:14px;
        justify-content:flex-start;
    }

    .search-box{flex:1;min-width:150px}

    .clock-block{display:none}

    .overview-strip{grid-template-columns:repeat(2,minmax(0,1fr))}

    .tile-grid{grid-template-columns:1fr}

    .light-layout{grid-template-columns:118px minmax(0,1fr)}

    .energy-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:400px){
    .light-layout{grid-template-columns:1fr}
    .dimmer{margin:auto}
}


/* ==========================================================
   DROP 2A
   ========================================================== */

#tileGrid{
    display:block;
}

.device-group-section{
    margin-bottom:28px;
}

.device-group-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin:0 0 12px;
}

.device-group-heading h3{
    margin:0;
    font-size:18px;
}

.device-group-heading p{
    margin:4px 0 0;
    color:var(--muted);
    font-size:10px;
}

.device-type-block{
    margin-top:17px;
}

.device-type-heading{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:9px;
    color:#aab4c8;
    font-size:10px;
    font-weight:800;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.device-type-heading small{
    min-width:20px;
    padding:2px 6px;
    border-radius:999px;
    text-align:center;
    color:#8e9aaf;
    background:rgba(255,255,255,.055);
}

.light-select-button{
    width:29px;
    height:29px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid var(--line);
    border-radius:9px;
    color:white;
    background:rgba(255,255,255,.04);
    cursor:pointer;
}

.light-select-button.selected{
    border-color:rgba(111,124,255,.55);
    background:rgba(111,124,255,.30);
    box-shadow:0 0 18px rgba(111,124,255,.18);
}

.wheel-control-block{
    display:grid;
    gap:7px;
}

.hsv-wheel{
    position:relative;
    width:112px;
    height:112px;
    margin:auto;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.14);
    border-radius:50%;
    background:
        radial-gradient(
            circle at center,
            white 0%,
            rgba(255,255,255,.96) 5%,
            transparent 68%
        ),
        conic-gradient(
            #ff0000,
            #ffff00,
            #00ff00,
            #00ffff,
            #0000ff,
            #ff00ff,
            #ff0000
        );
    box-shadow:
        inset 0 0 18px rgba(0,0,0,.22),
        0 12px 28px rgba(0,0,0,.20);
    touch-action:none;
    cursor:crosshair;
}

.hsv-wheel::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    border-radius:inherit;
    background:
        radial-gradient(
            circle at center,
            rgba(255,255,255,.96),
            rgba(255,255,255,.68) 18%,
            rgba(255,255,255,0) 70%
        );
}

.hsv-cursor{
    position:absolute;
    z-index:3;
    width:13px;
    height:13px;
    border:2px solid white;
    border-radius:50%;
    transform:translate(-50%,-50%);
    box-shadow:
        0 2px 7px rgba(0,0,0,.55),
        inset 0 0 0 1px rgba(0,0,0,.20);
    pointer-events:none;
}

.lights-master-panel{
    margin-bottom:25px;
    padding:18px;
    border:1px solid var(--line);
    border-radius:21px;
    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(111,124,255,.14),
            transparent 38%
        ),
        linear-gradient(
            145deg,
            rgba(27,37,55,.82),
            rgba(12,17,27,.78)
        );
    box-shadow:
        inset 0 1px rgba(255,255,255,.08),
        0 20px 55px rgba(0,0,0,.22);
}

.lights-master-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
}

.lights-master-head h3{
    margin:4px 0 0;
    font-size:20px;
}

.lights-master-head p{
    margin:5px 0 0;
    color:var(--muted);
    font-size:10px;
}

.light-filter-tabs{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:7px;
}

.light-filter{
    min-height:34px;
    padding:0 12px;
    border:1px solid var(--line);
    border-radius:999px;
    color:var(--muted);
    background:rgba(255,255,255,.035);
    cursor:pointer;
}

.light-filter.active,
.light-filter:hover{
    color:white;
    border-color:rgba(111,124,255,.40);
    background:rgba(111,124,255,.17);
}

.lights-master-body{
    display:grid;
    grid-template-columns:minmax(220px,320px) minmax(0,1fr);
    gap:20px;
    margin-top:17px;
}

.bulk-wheel-panel{
    display:flex;
    align-items:center;
    gap:15px;
}

.bulk-wheel-panel strong{
    display:block;
    font-size:14px;
}

.bulk-wheel-panel span{
    display:block;
    margin-top:5px;
    color:var(--muted);
    font-size:10px;
    line-height:1.45;
}

.bulk-wheel{
    flex:0 0 auto;
    width:126px;
    height:126px;
}

.bulk-control-stack{
    display:grid;
    align-content:center;
    gap:14px;
}

.bulk-button-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.bulk-slider-row{
    display:grid;
    gap:6px;
}

@media(max-width:900px){
    .lights-master-head{
        display:block;
    }

    .light-filter-tabs{
        justify-content:flex-start;
        margin-top:13px;
    }

    .lights-master-body{
        grid-template-columns:1fr;
    }
}

@media(max-width:480px){
    .bulk-wheel-panel{
        display:grid;
        justify-items:center;
        text-align:center;
    }

    .bulk-button-row{
        display:grid;
        grid-template-columns:1fr 1fr;
    }
}



/* NEXGENHOME ROOM TOGGLE PATCH */

.dashboard-search-row{
    display:flex;
    justify-content:center;
    margin:18px 0 4px;
}

.dashboard-search-box{
    width:min(560px,100%);
    height:46px;
    color:#aeb8ca;
    background:rgba(255,255,255,.035);
    border-color:rgba(111,124,255,.18);
}

.dashboard-search-box input{
    color:#d9e0eb;
}

.dashboard-search-box input::placeholder{
    color:#6f7a8e;
}

.dashboard-search-box:focus-within{
    border-color:rgba(111,124,255,.48);
    background:rgba(111,124,255,.065);
    box-shadow:
        0 0 0 3px rgba(111,124,255,.06),
        0 14px 35px rgba(0,0,0,.16);
}


.room-chip{
    color:#9da8bb;
    font-weight:700;
}

.room-chip:hover{
    color:#d6dce8;
    border-color:rgba(111,124,255,.24);
}

.room-chip.active{
    color:#e1e5ff;
    border-color:rgba(111,124,255,.50);
    background:
        linear-gradient(
            135deg,
            rgba(111,124,255,.25),
            rgba(111,124,255,.10)
        );
    box-shadow:
        inset 0 1px rgba(255,255,255,.07),
        0 10px 26px rgba(65,75,190,.12);
}


.room-heading-power{
    min-height:48px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:6px 8px 6px 13px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:15px;
    background:rgba(255,255,255,.035);
}

.room-heading-power-copy{
    min-width:76px;
}

.room-heading-power-copy strong{
    display:block;
    color:#dce3ed;
    font-size:11px;
}

.room-heading-power-copy span{
    display:block;
    margin-top:3px;
    color:#778398;
    font-size:9px;
}

.room-power-toggle.on{
    background:
        linear-gradient(
            90deg,
            #6171ff,
            #8390ff
        );
    box-shadow:
        0 0 22px rgba(111,124,255,.34);
}


.device-tile{
    transition:
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.device-tile:has(.power-button.on){
    border-color:rgba(111,124,255,.25);
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(111,124,255,.09),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.024)
        );
    box-shadow:
        inset 0 1px rgba(255,255,255,.07),
        0 18px 46px rgba(0,0,0,.17);
}

@media(max-width:700px){
    .room-heading-power{
        flex:1;
        justify-content:space-between;
    }
}



/* NEXGENHOME ROOM MASTER CONTROLS */

.room-master-panel{
    margin:0 0 22px;
    padding:18px 20px;
    border:1px solid rgba(111,124,255,.18);
    border-radius:20px;
    background:
        radial-gradient(
            circle at 0 0,
            rgba(111,124,255,.11),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.018)
        );
    box-shadow:
        inset 0 1px rgba(255,255,255,.065),
        0 20px 48px rgba(0,0,0,.16);
}


.room-master-panel-heading h3{
    margin:5px 0 0;
    color:#e6ebf5;
    font-size:17px;
}


.room-master-panel-heading p{
    margin:5px 0 0;
    color:#7e899c;
    font-size:10px;
}


.room-master-grid{
    display:grid;
    grid-template-columns:260px minmax(0,1fr);
    gap:28px;
    align-items:center;
    margin-top:18px;
    padding-top:18px;
    border-top:1px solid rgba(255,255,255,.06);
}


.room-master-color{
    display:grid;
    justify-items:center;
    gap:10px;
}


.room-master-color .control-label-row{
    width:100%;
}


.room-master-color small,
.room-master-slider-card small{
    color:#737f93;
    font-size:9px;
}


.room-master-sliders{
    display:grid;
    gap:22px;
}


.room-master-slider-card{
    display:grid;
    gap:9px;
    padding:14px 15px;
    border:1px solid rgba(255,255,255,.06);
    border-radius:15px;
    background:rgba(255,255,255,.025);
}


.room-master-slider-card .control-label-row span:first-child{
    color:#9da8ba;
    font-weight:700;
}


@media(max-width:800px){

    .room-master-grid{
        grid-template-columns:1fr;
    }

    .room-master-color{
        max-width:320px;
        justify-self:center;
        width:100%;
    }
}



/* NEXGENHOME MASTER HEADER ACTIONS */

.room-master-panel-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}


.room-master-heading-copy{
    min-width:0;
}


.room-master-actions{
    display:flex;
    align-items:center;
    gap:12px;
    flex-shrink:0;
}


.room-master-power{
    min-height:48px;
    display:flex;
    align-items:center;
    gap:13px;
    padding:6px 8px 6px 13px;

    border:1px solid rgba(255,255,255,.08);
    border-radius:15px;

    background:rgba(255,255,255,.035);
}


.room-master-power-copy{
    min-width:78px;
}


.room-master-power-copy strong{
    display:block;

    color:#dce3ed;
    font-size:11px;
}


.room-master-power-copy span{
    display:block;

    margin-top:3px;

    color:#778398;
    font-size:9px;
}


.room-master-actions .glass-button{
    min-height:48px;
}


@media(max-width:760px){

    .room-master-panel-heading{
        align-items:flex-start;
        flex-direction:column;
    }


    .room-master-actions{
        width:100%;
    }


    .room-master-power{
        flex:1;
        justify-content:space-between;
    }
}