:root { color-scheme: dark; font-family: Inter, system-ui, sans-serif; background: #121719; color: #edf2ef; }
* { box-sizing: border-box; }
body { margin: 0; }
.route main { display: grid; min-height: 100vh; place-items: center; }.login-page { min-height: 100vh; display: grid; place-items: center; }.login-main { width: min(420px, calc(100% - 40px)); }.login-copy { color: #b9c7c0; line-height: 1.5; margin: 18px 0 24px; }.login-button { padding: 12px 16px; width: 100%; }.login-main .hint { text-align: center; margin-top: 14px; }
main { width: min(860px, calc(100% - 32px)); margin: 0 auto; padding: 52px 0 80px; }
header { display: flex; justify-content: space-between; align-items: start; gap: 24px; border-bottom: 1px solid #34403d; padding-bottom: 25px; }.header-actions { display: flex; align-items: center; gap: 12px; }
h1, h2, h3, p { margin: 0; } h1 { font-size: 32px; margin-top: 6px; } h2 { font-size: 17px; } h3 { font-size: 15px; }
.eyebrow { font-size: 12px; color: #91a79c; letter-spacing: 1.2px; }.status { color: #f3c96a; white-space: nowrap; padding-top: 8px; }.status.online { color: #72d49b; }
.server-bar { padding: 18px 0 0; }.server-bar label { width: min(420px, 100%); }.server-bar select { border: 1px solid #46524e; background: #111715; color: #eef4f0; border-radius: 4px; padding: 10px; font: inherit; }
.devices { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; padding: 28px 0; }.device { border: 1px solid #34403d; border-radius: 7px; padding: 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: #19211f; }.device p, .empty, #feedback { color: #9aa9a3; font-size: 14px; margin-top: 6px; }
.notifications, .pairing { border-top: 1px solid #34403d; padding: 22px 0; }.notifications { border-bottom: 1px solid #34403d; }.hint { color: #9aa9a3; font-size: 14px; margin: 7px 0 12px; }.event-list { display: grid; gap: 7px; }.event-list p { border-left: 3px solid #4e8f68; padding-left: 10px; color: #b9c7c0; font-size: 14px; }.pairing-actions, .dialog-actions { display: flex; gap: 8px; flex-wrap: wrap; }.danger { background: #643f42; }
button { border: 0; border-radius: 5px; background: #4e8f68; color: #fff; font-weight: 700; cursor: pointer; }.power { width: 65px; height: 40px; background: #58625e; }.power.active { background: #41a86b; }.power:disabled { opacity: .45; cursor: default; }
.setup { border-top: 1px solid #34403d; padding-top: 28px; } form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 18px; } label { display: grid; gap: 7px; font-size: 13px; color: #b9c7c0; } input { border: 1px solid #46524e; background: #111715; color: #eef4f0; border-radius: 4px; padding: 10px; font: inherit; }.checkbox { display: flex; align-items: center; gap: 8px; }.checkbox input { width: 16px; height: 16px; }
.save, #feedback { grid-column: 1 / -1; }.row-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }.secondary { padding: 7px 10px; background: #384541; font-size: 12px; }.alarm-status { color: #f3c96a; font-size: 12px; font-weight: 700; }.save { padding: 12px 18px; justify-self: start; } #feedback { min-height: 18px; } dialog { width: min(420px, calc(100% - 32px)); border: 1px solid #46524e; border-radius: 7px; background: #19211f; color: #edf2ef; padding: 24px; } dialog::backdrop { background: rgba(0, 0, 0, .65); } #pairing-form, #login-form { display: grid; gap: 16px; margin-top: 16px; } .dialog-actions { justify-content: end; }
@media (max-width: 600px) { main { padding-top: 28px; } header { align-items: start; } h1 { font-size: 26px; } form { grid-template-columns: 1fr; } }