*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;background:radial-gradient(circle at 85% 0%,#173d61 0,transparent 32%),#07111d;color:#fff;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;min-height:100vh}.app-shell{width:min(1180px,calc(100% - 28px));margin:auto;padding:30px 0 70px}.topbar{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}.top-actions{display:flex;align-items:center;gap:10px}.eyebrow{font-size:11px;letter-spacing:3px;color:#66b8ff;font-weight:800}h1{margin:7px 0 4px;font-size:34px}.status{font-size:12px;color:#7b8da0}.online{color:#56d69a}.offline{color:#ff7777}.plain-link,.channel-switcher{color:#b4c5d4;background:#0d1b29;border:1px solid #24384b;border-radius:10px;padding:9px 11px;text-decoration:none;font-size:12px}.room{margin-top:28px}.room h2{font-size:15px;color:#dfe9f3}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.card{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);border-radius:20px;min-height:112px;padding:18px;color:#fff;display:flex;flex-direction:column;justify-content:space-between}.action{cursor:pointer}.card.on{background:linear-gradient(145deg,rgba(32,137,229,.25),rgba(32,137,229,.08));border-color:rgba(71,171,255,.45)}.span-2{grid-column:span 2}.span-3{grid-column:span 3}.span-4{grid-column:span 4}.label{font-size:13px;color:#bdcbd8}.state{font-size:24px;font-weight:700;margin-top:18px}.smallstate{font-size:15px;margin:0}.entity{font-size:10px;color:#53677a;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.scene-card{text-align:center;align-items:center;justify-content:center}.number-control,.dual{display:flex;gap:10px;align-items:center;margin-top:14px}.number-control button,.dual button{border:1px solid #294057;background:#13283b;color:#fff;border-radius:10px;padding:8px 11px}.number-control strong{min-width:70px;text-align:center}.auth-shell{min-height:100vh;display:grid;place-items:center;padding:20px}.auth-card{width:min(390px,100%);background:#0f1c29;border:1px solid #203142;border-radius:20px;padding:24px}.auth-card form{display:grid;gap:10px}.auth-card label{font-size:13px;color:#bdcbd8}.auth-card input{width:100%;padding:12px;border:1px solid #2a3d50;border-radius:10px;background:#091521;color:#fff;margin-top:6px}.auth-card button,.btn{padding:12px;border:0;border-radius:10px;background:#2187df;color:#fff;text-decoration:none}.error{color:#ff8080;margin:10px 0}.success{color:#6edca4;margin:10px 0}.loading{padding:30px 0;color:#8091a3}@media(max-width:850px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.span-3,.span-4{grid-column:span 2}.topbar{flex-direction:column}.top-actions{width:100%;flex-wrap:wrap}}@media(max-width:520px){h1{font-size:27px}.grid{gap:10px}.card{padding:15px;min-height:105px}.span-2,.span-3,.span-4{grid-column:span 2}.entity{display:none}.channel-switcher{max-width:210px}}

.entity{display:none!important}

.centered-card{
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:10px;
}
.centered-card .label,
.centered-card .state{
  width:100%;
  text-align:center;
  margin-top:0;
}
.card-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:14px;
  background:rgba(255,255,255,.055);
  color:#75bfff;
  margin:0 auto 2px;
}
.card.on .card-icon,
.active-scene .card-icon{
  background:rgba(102,184,255,.14);
  color:#8bcaff;
}
.scene-card{min-height:124px}
.scene-status{
  font-size:10px;
  letter-spacing:1.2px;
  color:#61788e;
  margin-top:2px;
}
.active-scene{
  background:linear-gradient(145deg,rgba(32,137,229,.30),rgba(32,137,229,.10))!important;
  border-color:rgba(102,184,255,.72)!important;
}
.active-scene .scene-status{
  color:#60d7a0;
  font-weight:700;
}
.number-control,.dual{
  justify-content:center;
  width:100%;
  margin-top:2px;
}

/* ==================================================
   DARK / LIGHT THEME
================================================== */

:root,
html[data-theme="dark"] {

    color-scheme: dark;

    --page-bg: #07111d;
    --page-accent: #173d61;

    --text-main: #ffffff;
    --text-secondary: #bdcbd8;
    --text-muted: #7b8da0;

    --card-bg: rgba(255,255,255,.055);
    --card-border: rgba(255,255,255,.08);

    --control-bg: #13283b;
    --control-border: #294057;

    --header-bg: #0d1b29;
    --header-border: #24384b;
    --header-text: #b4c5d4;

    --room-title: #dfe9f3;

    --icon-bg: rgba(255,255,255,.055);
    --icon-color: #75bfff;

}


/* ==================================================
   LIGHT
================================================== */

html[data-theme="light"] {

    color-scheme: light;

    --page-bg: #f4f7fb;
    --page-accent: #d4eaff;

    --text-main: #17232e;
    --text-secondary: #5b6c7b;
    --text-muted: #748493;

    --card-bg: #ffffff;
    --card-border: #dbe4ec;

    --control-bg: #eef3f7;
    --control-border: #cedae4;

    --header-bg: #ffffff;
    --header-border: #d6e0e8;
    --header-text: #34495a;

    --room-title: #34495a;

    --icon-bg: #edf6ff;
    --icon-color: #1678c8;

}


/* ==================================================
   PAGE
================================================== */

body {

    background:
        radial-gradient(
            circle at 85% 0%,
            var(--page-accent) 0,
            transparent 32%
        ),
        var(--page-bg) !important;

    color:
        var(--text-main) !important;

    transition:
        background .25s ease,
        color .25s ease;

}


/* ==================================================
   TITLE / TEXT
================================================== */

h1 {

    color:
        var(--text-main);

}

.room h2 {

    color:
        var(--room-title) !important;

}

.label {

    color:
        var(--text-secondary) !important;

}

.status {

    color:
        var(--text-muted);

}


/* ==================================================
   CARD
================================================== */

.card {

    background:
        var(--card-bg) !important;

    border-color:
        var(--card-border) !important;

    color:
        var(--text-main) !important;

}


/* LIGHT CARD SHADOW */

html[data-theme="light"] .card {

    box-shadow:
        0 5px 18px
        rgba(20,45,70,.07);

}


/* ==================================================
   ACTIVE DEVICE
================================================== */

.card.on {

    background:
        linear-gradient(
            145deg,
            rgba(32,137,229,.25),
            rgba(32,137,229,.08)
        ) !important;

    border-color:
        rgba(71,171,255,.45) !important;

}


html[data-theme="light"] .card.on {

    background:
        linear-gradient(
            145deg,
            rgba(32,137,229,.16),
            rgba(32,137,229,.05)
        ) !important;

    border-color:
        rgba(32,137,229,.40) !important;

}


/* ==================================================
   ACTIVE SCENE
================================================== */

.active-scene {

    background:
        linear-gradient(
            145deg,
            rgba(32,137,229,.30),
            rgba(32,137,229,.10)
        ) !important;

    border-color:
        rgba(102,184,255,.72) !important;

}


html[data-theme="light"] .active-scene {

    background:
        linear-gradient(
            145deg,
            rgba(32,137,229,.18),
            rgba(32,137,229,.05)
        ) !important;

    border-color:
        rgba(32,137,229,.48) !important;

}


/* ==================================================
   ICON
================================================== */

.card-icon {

    background:
        var(--icon-bg) !important;

    color:
        var(--icon-color) !important;

}


/* ==================================================
   +/- AND CONTROL BUTTONS
================================================== */

.number-control button,
.dual button {

    background:
        var(--control-bg) !important;

    border-color:
        var(--control-border) !important;

    color:
        var(--text-main) !important;

}


/* ==================================================
   CHANNEL / LOGOUT / THEME
================================================== */

.plain-link,
.channel-switcher,
.theme-toggle {

    background:
        var(--header-bg) !important;

    border:
        1px solid
        var(--header-border) !important;

    color:
        var(--header-text) !important;

}


/* ==================================================
   THEME TOGGLE
================================================== */

.theme-toggle {

    height: 36px;

    padding:
        0 12px;

    border-radius:
        10px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    font-family:
        inherit;

    font-size:
        12px;

    cursor:
        pointer;

    white-space:
        nowrap;

}


#themeIcon {

    width:
        16px;

    text-align:
        center;

    font-size:
        16px;

    line-height:
        1;

}


.theme-toggle:hover {

    opacity:
        .88;

}


/* ==================================================
   LOADING
================================================== */

.loading {

    color:
        var(--text-muted);

}


/* ==================================================
   MOBILE
================================================== */

@media(max-width:520px) {

    .theme-toggle {

        width:
            38px;

        height:
            38px;

        padding:
            0;

    }


    .theme-text {

        display:
            none;

    }

}

/* =========================================
   SECURE OTP - SUBTLE HEADER ACTION
========================================= */

.otp-shortcut {
    height: 38px;
    min-height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    padding: 0 11px;

    border-radius: 10px;
    border: 1px solid var(--border);

    background: var(--card);
    color: var(--text);

    text-decoration: none;

    font-size: 12px;
    font-weight: 500;
    line-height: 1;

    white-space: nowrap;
    box-sizing: border-box;

    transition:
        background .15s ease,
        border-color .15s ease,
        opacity .15s ease;
}

.otp-shortcut svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    opacity: .8;
}

.otp-shortcut:hover {
    background: var(--card-hover);
    border-color: var(--border);
}

.otp-shortcut:active {
    opacity: .75;
}

.otp-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.otp-link svg {
    width: 14px;
    height: 14px;
    opacity: .75;
}


/* Light theme */

html[data-theme="light"] .otp-shortcut {
    background: rgba(255,255,255,.78);
    border-color: rgba(20,50,80,.12);
    color: #10243a;
}

html[data-theme="light"] .otp-shortcut:hover {
    background: #fff;
}


/* Mobile */

@media (max-width: 700px) {
    .otp-shortcut {
        height: 36px;
        min-height: 36px;
        padding: 0 9px;
        font-size: 12px;
    }

    .otp-shortcut svg {
        width: 14px;
        height: 14px;
    }
}

/* ========================================
   CONNECTION STATUS
======================================== */

.connection-status {
    display: flex;
    align-items: center;
    gap: 6px;

    margin-top: 5px;

    font-size: 12px;
    line-height: 1.4;

    color: var(--muted);
}

.connection-dot {
    width: 7px;
    height: 7px;
    
    opacity: .85;
    
    border-radius: 50%;

    display: inline-block;
    flex: 0 0 7px;
}

.connection-dot.local {
    background: #42c983;
}

.connection-dot.remote {
    background: #5aa5ff;
}

.connection-dot.offline {
    background: #ef5350;
}

.connection-dot.checking {
    background: #f5a623;
}

.connection-separator {
    opacity: .45;
}

#connectionMode {
    font-weight: 500;
}