:root{
	color-scheme:dark;
	--bg-0:#101722;
	--bg-1:#151e2b;
	--panel:#1a2534;
	--panel-2:#182230;
	--cyan:#8dc8f0;
	--cyan-2:#69b3e8;
	--blue:#648bdf;
	--violet:#a49adf;
	--txt:#e7edf5;
	--muted:#a1b1c5;
	--ok:#79d5ac;
	--warn:#ebc779;
	--bad:#f08e9d;
	--brd:rgba(164,188,218,.25);
	--brd-2:rgba(164,188,218,.14);
	--glow:0 4px 16px rgba(0,0,0,.12);
	--glow-strong:0 0 0 1px rgba(141,200,240,.15);
	--radius:16px;
	--sidebar-w:236px;
	--content-pad:1.75rem;
}

body{
	min-height:100vh;
	color:var(--txt);
	background:var(--bg-0);
	font-size:.9375rem;
	line-height:1.55;
}

.topbar{
	border-bottom:1px solid var(--brd-2);
	background:var(--bg-1);
}
.topbar-inner{
	padding-left: var(--content-pad);
	padding-right: var(--content-pad);
}
.brand{
	font-weight:700;
	font-size:1.2rem;
	color:var(--txt);
	text-decoration:none;
	display:flex;
	align-items:center;
	gap:.65rem;
	flex-shrink:0;
}

.kicker{
	color:var(--muted);
	font-size:.8rem;
	font-weight:500;
	margin-bottom:.4rem;
}
.chip{
	display:inline-flex;
	align-items:center;
	gap:.45rem;
	padding:.35rem .6rem;
	border-radius: 999px;
	border:1px solid var(--brd-2);
	background: rgba(6,10,18,.25);
	color: var(--muted);
	font-size:.85rem;
}
.chip i{ color: var(--cyan); }
.status-pill{
	border:1px solid var(--brd-2);
	background: rgba(6,10,18,.35);
	border-radius: 999px;
	padding: .35rem .7rem;
	color: var(--muted);
	font-size:.85rem;
	display:flex;
	align-items:center;
	gap:.45rem;
}
.status-dot{
	width:8px;
	height:8px;
	border-radius:50%;
	flex-shrink:0;
}
.status-dot.online {
	background: var(--ok);
}
.status-dot.offline{
	background: var(--bad);
}

/* Shell: sidebar + content */
.shell{
	display:flex;
	min-height:calc(100vh - 96px);
}

/* Sidebar (Desktop) */
.sidebar{
	width:var(--sidebar-w);
	flex-shrink:0;
	border-right:1px solid var(--brd-2);
	background:var(--bg-1);
	padding:1.25rem .85rem;
	position:sticky;
	top:0;
	align-self:flex-start;
	max-height:100vh;
	max-height:100dvh;
	overflow-y:auto;
	scrollbar-width:thin;
}

.nav-hud{
	display:flex;
	flex-direction:column;
	gap:.2rem;
}
.nav-hud a, .menu-heading{
	text-decoration:none;
	color:var(--muted);
	border:1px solid transparent;
	border-radius:10px;
	padding:.5rem .7rem;
	min-height:44px;
	display:flex;
	align-items:center;
	gap:.7rem;
	transition:color .15s ease, background .15s ease;
}
.nav-hud a:hover, .menu-heading:hover{
	color:var(--txt);
	background:rgba(164,188,218,.07);
}
.nav-hud a.active{
	color:var(--txt);
	border-color:rgba(141,200,240,.2);
	background:rgba(141,200,240,.1);
}
.menu-heading{
	justify-content:space-between;
	font-size:.9rem;
	font-weight:500;
	line-height:1.35;
	list-style:none;
	cursor:pointer;
}
.menu-heading::-webkit-details-marker{ display:none; }
.menu-heading::after{
	content:"";
	width:7px;
	height:7px;
	border-right:2px solid currentColor;
	border-bottom:2px solid currentColor;
	transform:rotate(-45deg);
	flex-shrink:0;
}
.menu-group[open] > .menu-heading::after{ transform:rotate(45deg); }
.menu-group.active > .menu-heading{ color:var(--cyan); }
.nav-submenu{
	display:flex;
	flex-direction:column;
	gap:.2rem;
	margin:.2rem 0 .5rem .7rem;
	padding-left:.45rem;
	border-left:1px solid var(--brd-2);
}
.nav-hud .nav-submenu .txt .label{ white-space:normal; line-height:1.35; }
.nav-hud .nav-submenu .app-icon{ width:28px; height:28px; }
.app-icon{
	object-fit:cover;
	border:1px solid var(--brd-2);
	border-radius:14%;
	flex-shrink:0;
}
.nav-hud .app-icon{ width:36px; height:36px; }
.app-launcher{ padding:.5rem 0 1.5rem; }
.app-menu{ display:flex; flex-direction:column; gap:.75rem; }
.app-group > .menu-heading{
	border-color:var(--brd-2);
	background:var(--panel-2);
	color:var(--txt);
	font-size:1rem;
}
.app-group > .app-grid{ padding:.75rem 0; }
.app-grid{
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:1.5rem .5rem;
}
.app-tile{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:.65rem;
	padding:.5rem .2rem;
	border-radius:16px;
	color:var(--txt);
	text-align:center;
	text-decoration:none;
	font-size:.85rem;
	line-height:1.35;
	transition:background .15s ease;
}
.app-tile .app-icon{ width:80px; height:80px; max-width:100%; }
.app-tile:hover, .app-tile:active{
	color:var(--txt);
	background:rgba(164,188,218,.08);
}
.preferred-apps{ margin-bottom:1.5rem; }
.preferred-apps h2{ font-size:1.1rem; margin:0; }
.preferred-apps .app-grid{ grid-template-columns:repeat(auto-fill, minmax(100px, 1fr)); }
.modal.hud .modal-content{
	background:var(--panel);
	border:1px solid var(--brd);
	border-radius:var(--radius);
}
.modal.hud .modal-header, .modal.hud .modal-footer{ border-color:var(--brd-2); }
.person-toggle .btn-hud{ justify-content:center; }
.person-toggle [aria-pressed="true"]{
	border-color:var(--cyan);
	background:rgba(141,200,240,.15);
}
.settings-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap:.5rem 1rem;
}
@media (min-width: 576px){
	.app-grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}
.nav-hud .ico{
	width:24px;
	display:flex;
	align-items:center;
	justify-content:center;
	flex:0 0 auto;
}
.nav-hud .ico i{
	color:inherit;
}
.nav-hud .txt{
	min-width:0;
	display:flex;
	flex-direction:column;
	line-height:1.1;
}
.nav-hud .txt .label{
	font-weight:500;
	font-size:.9rem;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.nav-hud .txt .desc{
	margin-top:.15rem;
	font-size:.82rem;
	color: var(--muted);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

/* Content area */
.content{
	flex:1;
	min-width:0;
	padding:var(--content-pad) var(--content-pad) 2rem;
}

/* Panels */
.panel{
	border:1px solid var(--brd-2);
	background:var(--panel);
	border-radius:var(--radius);
	box-shadow:var(--glow);
	position:relative;
	overflow:hidden;
}
.panel-header{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:1rem;
	padding:1rem 1.1rem;
	border-bottom:1px solid var(--brd-2);
}
.panel-title{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:.55rem;
	width:100%;
	min-width:0;
	font-weight:600;
	font-size:.95rem;
	color:var(--txt);
}
.panel-title-text{
	white-space:nowrap;
}
.panel-title-meta{
	display:inline-flex;
	align-items:center;
	gap:.45rem;
	margin-left:auto;
	color:var(--muted);
	font-size:.8rem;
	font-weight:500;
	font-variant-numeric:tabular-nums;
}
.motion-indicator{
	width:10px;
	height:10px;
	border-radius:50%;
	display:inline-block;
	flex: 0 0 auto;
	font-size:0;
	line-height:0;
	overflow:hidden;
	background: rgba(141,200,240,.35);
	border:1px solid rgba(141,200,240,.45);
	box-shadow: 0 0 10px rgba(141,200,240,.20);
	opacity:0;
	transform: scale(.7);
	transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.motion-indicator.low{
	opacity:.45;
	transform: scale(.85);
	box-shadow: 0 0 8px rgba(141,200,240,.18);
}
.motion-indicator.medium{
	opacity:.9;
	transform: scale(1);
	background: rgba(141,200,240,.95);
	box-shadow: 0 0 14px rgba(141,200,240,.45), 0 0 28px rgba(105,179,232,.18);
}
.motion-indicator.high{
	opacity:1;
	transform: scale(1);
	background: rgba(121,213,172,.95);
	border-color: rgba(121,213,172,.55);
	box-shadow: 0 0 14px rgba(121,213,172,.55), 0 0 28px rgba(121,213,172,.22);
	animation: motion-pulse 1.4s ease-out infinite;
}
.motion-indicator.none{
	opacity:0;
	transform: scale(.6);
	box-shadow:none;
	animation: none;
}
.motion-indicator.high,
.motion-indicator.medium,
.motion-indicator.low{
	pointer-events:auto;
}

.brightness-indicator{
	width:18px;
	height:18px;
	border-radius:50%;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	background:
			radial-gradient(circle at 30% 30%, rgba(255,255,255,.65), rgba(255,255,255,0) 45%),
			radial-gradient(circle at 50% 50%, rgba(255,209,102,.35), rgba(255,209,102,.05) 70%, transparent 75%);
	border:1px solid rgba(255,209,102,.25);
	color: rgba(255,209,102,.55);
	box-shadow: 0 0 10px rgba(255,209,102,.15);
	opacity:.4;
	transform: scale(.85);
	transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease, color .18s ease, background .18s ease, border-color .18s ease;
}
.brightness-indicator i{
	font-size:.7rem;
	line-height:1;
}
.brightness-indicator.none{
	opacity:.2;
	transform: scale(.8);
	background: rgba(255,255,255,.04);
	border-color: rgba(255,255,255,.12);
	color: rgba(231,237,245,.35);
	box-shadow: none;
}
.brightness-indicator.low{
	opacity:.55;
	transform: scale(.92);
	background:
			radial-gradient(circle at 30% 30%, rgba(255,255,255,.7), rgba(255,255,255,0) 45%),
			radial-gradient(circle at 50% 50%, rgba(255,209,102,.45), rgba(255,209,102,.12) 70%, transparent 75%);
	border-color: rgba(255,209,102,.35);
	color: rgba(255,209,102,.75);
	box-shadow: 0 0 10px rgba(255,209,102,.18);
}
.brightness-indicator.medium{
	opacity:.85;
	transform: scale(1);
	background:
			radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), rgba(255,255,255,0) 45%),
			radial-gradient(circle at 50% 50%, rgba(255,209,102,.65), rgba(255,209,102,.18) 70%, transparent 78%);
	border-color: rgba(255,209,102,.5);
	color: rgba(255,209,102,.95);
	box-shadow: 0 0 14px rgba(255,209,102,.35), 0 0 26px rgba(255,209,102,.18);
}
.brightness-indicator.high{
	opacity:1;
	transform: scale(1.05);
	background:
			radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(255,255,255,0) 45%),
			radial-gradient(circle at 50% 50%, rgba(255,209,102,.9), rgba(255,209,102,.25) 70%, transparent 78%);
	border-color: rgba(255,209,102,.75);
	color: rgba(255,209,102,1);
	box-shadow: 0 0 16px rgba(255,209,102,.55), 0 0 34px rgba(255,209,102,.28);
}

@keyframes motion-pulse{
	0%   { box-shadow: 0 0 0 0 rgba(121,213,172,.55); }
	70%  { box-shadow: 0 0 0 12px rgba(121,213,172,0); }
	100% { box-shadow: 0 0 0 0 rgba(121,213,172,0); }
}
.panel-title i{
	color:var(--cyan);
}
.panel-body{ padding: 1rem 1.1rem 1.15rem 1.1rem; }

.page-head{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:1rem;
	margin-bottom:1.5rem;
}
.page-head h1{
	margin:0;
	font-size:1.6rem;
	font-weight:650;
	letter-spacing:-.025em;
}
.page-head .sub{
	color: var(--muted);
	margin-top:.25rem;
	font-size:.95rem;
}

/* Mobile: Offcanvas sidebar */
.offcanvas.hud{
	--bs-offcanvas-width:300px;
	border-right:1px solid var(--brd-2);
	background:var(--bg-1);
	color:var(--txt);
}
.offcanvas-header{
	border-bottom: 1px solid var(--brd-2);
}

/* Pages: show/hide (single HTML file, "multi-page" feel) */
.page{
	display:none;
}
.page.active{
	display:block;
}

/* Responsive */
@media (max-width: 991.98px){
	.sidebar{ display:none; }
	:root{ --content-pad: 1rem; }
	.content{ padding: var(--content-pad); }
	.shell{ min-height: calc(100vh - 86px); }
}

/* Controls */
.btn-hud{
	border:1px solid var(--brd);
	background:rgba(255,255,255,.025);
	color:var(--txt);
	border-radius:10px;
	padding:.65rem .8rem;
	min-height:44px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:.6rem;
	width:100%;
	text-align:left;
	font-size:.875rem;
	transition:background .15s ease, border-color .15s ease;
}
.btn-hud:hover{
	border-color:rgba(141,200,240,.5);
	background:rgba(141,200,240,.08);
	color:var(--txt);
}

/* Toggle states for hud buttons */
.btn-hud.on{
	border-color:rgba(121,213,172,.35);
	background:rgba(121,213,172,.06);
}
.btn-hud.on .left i{
	color:var(--ok);
}
.btn-hud.on .hud-state-text{ color: rgba(121,213,172,.90); }

.btn-hud.off{
	border-color:var(--brd);
}
.btn-hud.off .left i{
	color:var(--muted);
}
.btn-hud.off .hud-state-text{ color: rgba(240,142,157,.88); }


/* Big clock next to logo */
.hud-clock{
	padding: .35rem .8rem;
	min-width: 150px;
}

.hud-clock-time{
	font-weight:600;
	font-variant-numeric:tabular-nums;
	font-size:1.4rem;
	line-height:1.2;
	color:var(--txt);
}

.hud-clock-date{
	margin-top:.2rem;
	font-size:.75rem;
	color:var(--muted);
}

/* Mobile tweak */
@media (max-width: 576px){
	.hud-clock{
		min-width: 0;
		padding: .3rem .65rem;
	}
	.hud-clock-time{ font-size: 1.35rem; }
}

/* Outdoor metrics card (reuses hud-clock panel style) */
.hud-metrics{
	min-width:100px;
	border-left:1px solid var(--brd-2);
}

.hud-metrics-top{
	display:flex;
	align-items:center;
	gap:.5rem;
	color:var(--muted);
	font-size:.75rem;
}

.hud-metrics-top i{
	color: var(--cyan);
	text-shadow: 0 0 12px rgba(141,200,240,.22);
}

.hud-metrics-row{
	margin-top:.2rem;
	display:flex;
	align-items:baseline;
	justify-content:space-between;
	gap:.9rem;
}

.hud-metrics-value{
	font-weight:600;
	font-variant-numeric:tabular-nums;
	font-size:1.15rem;
	line-height:1.2;
	color:var(--txt);
	white-space:nowrap;
}

.hud-metrics-sub{
	color: var(--muted);
	font-size: .95rem;
	display:flex;
	align-items:center;
	gap:.45rem;
	white-space:nowrap;
}

.hud-metrics-sub i{
	color: var(--cyan);
}

.hud-metrics .unit{
	margin-left:.1rem;
	color: rgba(143,185,197,.85);
	font-weight:700;
}

/* Mobile tweak */
@media (max-width: 576px){
	.hud-metrics{ min-width: 0; }
	.hud-metrics-value{ font-size: 1.15rem; }
}


.btn-hud .left{
	display:flex;
	align-items:center;
	gap:.7rem;
	min-width:0;
}
.btn-hud .left i{
	width:22px;
	text-align:center;
	color: var(--cyan);
}
.btn-hud .label{
	font-weight:500;
	white-space:normal;
	overflow-wrap:anywhere;
}
.btn-hud .meta{
	font-size:.8rem;
	color: var(--muted);
	white-space:nowrap;
}

/* Toggle pill (visual only; no extra logic) */
.toggle{
	display:inline-flex;
	align-items:center;
	gap:.4rem;
	flex-shrink:0;
	font-size:.7rem;
	font-weight:600;
	border-radius:999px;
	padding:.2rem .45rem;
	border:1px solid var(--brd-2);
	color:var(--muted);
}
.toggle .knob{
	width:6px;
	height:6px;
	border-radius:50%;
	background:var(--muted);
}
.toggle.on{
	border-color:rgba(121,213,172,.25);
	color:var(--ok);
}
.toggle.on .knob{
	background:var(--ok);
}
.toggle.off{
	border-color:var(--brd-2);
	color:var(--muted);
}
.toggle.off .knob{
	background:var(--muted);
}
.toggle.on .text::before {
	content: "Ein";
}
.toggle.off .text::before {
	content: "Aus";
}

/* Progress (battery/voltage) */
.progress.hud{
	height:8px;
	background:rgba(164,188,218,.12);
	border-radius:999px;
	overflow:hidden;
}
.progress.hud .progress-bar{
	background:var(--cyan-2);
	border-radius:inherit;
}
.progress-meta{
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-top:.45rem;
	color: var(--muted);
	font-size:.85rem;
}

.diagnostics .panel-body{
	min-height:170px;
}
.diag-cpu{
	display:flex;
	align-items:center;
	gap:2rem;
	flex-wrap:wrap;
}
.diag-ring{
	width:130px;
	height:130px;
	border-radius:50%;
	background:conic-gradient(var(--cyan) var(--percent, 0%), rgba(255,255,255,.08) 0);
	padding:10px;
	box-shadow:var(--glow);
}
.diag-ring > div{
	width:100%;
	height:100%;
	border-radius:50%;
	background:var(--bg-1);
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:2rem;
	font-weight:800;
}
.diag-ring small, .diag-value small{
	font-size:.9rem;
	color:var(--muted);
	margin-left:.2rem;
}
.diag-details{
	flex:1;
	min-width:170px;
}
.diag-detail{
	display:flex;
	justify-content:space-between;
	gap:1rem;
	padding:.65rem 0;
	border-bottom:1px solid var(--brd-2);
	color:var(--muted);
}
.diag-detail:last-child{
	border-bottom:0;
}
.diag-detail strong{
	color:var(--txt);
	text-align:right;
}
.diag-value{
	font-size:2.4rem;
	font-weight:800;
	margin-bottom:.8rem;
}
.progress.hud.diag-bar{
	height:16px;
}
.diag-caption{
	color:var(--muted);
	margin-top:.8rem;
}

/* Camera tiles */
.cam{
	border:1px solid var(--brd-2);
	border-radius: 16px;
	overflow:hidden;
	background: rgba(6,10,18,.28);
	box-shadow: 0 0 28px rgba(105,179,232,.06);
	position:relative;
}
.cam::before{
	content:"";
	position:absolute;
	inset:0;
	background:
			radial-gradient(500px 200px at 40% 20%, rgba(141,200,240,.18), transparent 60%),
			linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.25));
	pointer-events:none;
}
.cam .feed{
	height: 155px;
	background:
			linear-gradient(135deg, rgba(141,200,240,.12), rgba(42,108,255,.06)),
			repeating-linear-gradient( to right, rgba(255,255,255,.04), rgba(255,255,255,.04) 2px, transparent 2px, transparent 8px),
			linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.00));
	display:flex;
	align-items:center;
	justify-content:center;
	color: rgba(231,237,245,.65);
	font-weight:700;
	letter-spacing:.12em;
	text-transform:uppercase;
}
.cam .footer{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:.8rem;
	padding:.7rem .85rem;
	border-top: 1px solid var(--brd-2);
	background: rgba(6,10,18,.25);
}
.cam .name{
	font-weight:700;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.cam .badge-live{
	font-size:.72rem;
	letter-spacing:.18em;
	text-transform:uppercase;
	padding:.2rem .45rem;
	border-radius:999px;
	border:1px solid rgba(240,142,157,.35);
	color: rgba(240,142,157,.90);
	background: rgba(240,142,157,.12);
}

.hud-door{
	display:flex;
	align-items:center;
	flex-wrap:wrap;
	gap:.55rem;
	padding:.65rem .75rem;
	border-radius:10px;
	border:1px solid var(--brd-2);
	background:rgba(255,255,255,.02);
	color:var(--muted);
	font-size:.8rem;
}
.hud-door i{ color: var(--cyan); }
.hud-door .label{ font-weight:700; color: rgba(231,237,245,.90); }
.hud-door .state{
	margin-left:auto;
	font-size:.75rem;
	padding:.12rem .4rem;
	border-radius:6px;
	background:rgba(255,255,255,.04);
}
.hud-door.is-closed .state{
	border-color: rgba(121,213,172,.25);
	color: rgba(121,213,172,.85);
	background: rgba(121,213,172,.10);
}
.hud-door.is-open{
	border-color: rgba(240,142,157,.25);
}
.hud-door.is-open i{ color: rgba(240,142,157,.90); }
.hud-door.is-open .state{
	border-color: rgba(240,142,157,.25);
	color: rgba(240,142,157,.90);
	background: rgba(240,142,157,.10);
}
.hud-door[data-state="closed"]{
	border-color: rgba(121,213,172,.25);
}
.hud-door[data-state="closed"] .state{
	border-color: rgba(121,213,172,.25);
	color: rgba(121,213,172,.85);
	background: rgba(121,213,172,.10);
}
.hud-door[data-state="open"]{
	border-color: rgba(240,142,157,.25);
}
.hud-door[data-state="open"] i{ color: rgba(240,142,157,.90); }
.hud-door[data-state="open"] .state{
	border-color: rgba(240,142,157,.25);
	color: rgba(240,142,157,.90);
	background: rgba(240,142,157,.10);
}



.motion-last{
	border:1px solid var(--brd-2);
	background: rgba(6,10,18,.25);
	border-radius: 16px;
	padding: .75rem .85rem;
	box-shadow: 0 0 28px rgba(105,179,232,.06);
	color: var(--muted);
	display:inline-block;
	min-width: 260px;
}
.motion-last .top{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:.8rem;
	margin-bottom:.55rem;
}
.motion-last .label{
	font-weight:800;
	letter-spacing:.12em;
	text-transform:uppercase;
	font-size:.78rem;
	color: rgba(231,237,245,.92);
	margin-right:auto;
	margin-left:.45rem;
}
.motion-last i{
	color: var(--cyan);
	text-shadow: 0 0 12px rgba(141,200,240,.22);
}
.motion-last .when{
	font-size:.85rem;
	color: rgba(231,237,245,.78);
	white-space:nowrap;
}

/* Scale */
.motion-last .scale{
	display:grid;
	grid-template-columns: repeat(4, 1fr);
	gap:.35rem;
}
.motion-last .seg{
	height: 10px;
	border-radius: 999px;
	border: 1px solid rgba(255,255,255,.08);
	background: rgba(255,255,255,.06);
	box-shadow: inset 0 0 12px rgba(0,0,0,.35);
	opacity:.45;
}
.motion-last .seg.active{
	opacity:1;
	box-shadow: 0 0 18px rgba(141,200,240,.18);
}

/* Buckets (color scale) */
/* s0: now (green), s1: minutes (cyan), s2: hours (amber), s3: days (red) */
.motion-last.is-now  { border-color: rgba(121,213,172,.25); }
.motion-last.is-mins { border-color: rgba(141,200,240,.25); }
.motion-last.is-hours{ border-color: rgba(255,209,102,.22); }
.motion-last.is-days { border-color: rgba(240,142,157,.22); }

.motion-last.is-now  .seg.s0.active{ background: rgba(121,213,172,.85); border-color: rgba(121,213,172,.45); }
.motion-last.is-mins .seg.s1.active{ background: rgba(141,200,240,.85); border-color: rgba(141,200,240,.45); }
.motion-last.is-hours .seg.s2.active{ background: rgba(255,209,102,.85); border-color: rgba(255,209,102,.45); }
.motion-last.is-days .seg.s3.active{ background: rgba(240,142,157,.85); border-color: rgba(240,142,157,.45); }

.battery-table{ width: 100%; font-size: .85rem; }
.battery-table th, .battery-table td{
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--brd-2);
    vertical-align: top;
}
.battery-table thead th{ color: var(--muted); font-weight: 400; white-space: nowrap; }
.battery-table tbody th{ font-weight: 500; }
.battery-table tbody tr:last-child > *{ border-bottom: 0; }
.battery-table td{ white-space: nowrap; }
.battery-table details{ white-space: normal; min-width: 9rem; }
.battery-table summary{ color: var(--muted); cursor: pointer; }
.battery-detail{ margin-top: .4rem; }
.battery-detail dt{ color: var(--muted); font-weight: 400; }
.battery-detail dd{ margin: 0; overflow-wrap: anywhere; }
.battery-legend{ display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.battery-led{
    display: inline-block;
    width: .65rem;
    height: .65rem;
    margin-right: .45rem;
    border-radius: 50%;
    background: currentColor;
    color: #64717c;
    box-shadow: inset 0 1px 2px rgba(255,255,255,.3);
}
.battery-led[data-state="good"]{ color: var(--ok); box-shadow: 0 0 7px currentColor; }
.battery-led[data-state="middle"]{ color: var(--warn); box-shadow: 0 0 7px currentColor; }
.battery-led[data-state="low"]{ color: var(--bad); box-shadow: 0 0 7px currentColor; }
.battery-led[data-state="charging"]{ color: var(--cyan); box-shadow: 0 0 7px currentColor; }

.heater-floors{
	display:grid;
	gap:1rem;
	overflow-x:auto;
}
.heater-grid{
	display:flex;
	gap:1rem;
	width:max-content;
}
.thermostat{
	width:145px;
	flex-shrink:0;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:1rem;
	padding:1.1rem .75rem 1.4rem;
	border-radius:24px;
	background:linear-gradient(145deg, var(--panel), var(--panel-2));
}
.thermostat-name{
	font-weight:600;
	text-align:center;
}
.thermostat-display{
	width:100%;
	max-width:110px;
	padding:.5rem;
	text-align:center;
	border:1px solid var(--brd);
	border-radius:10px;
	background:var(--bg-0);
	box-shadow:inset 0 2px 6px rgba(0,0,0,.2);
}
.thermostat-display span{
	display:block;
	color:var(--muted);
	font-size:.75rem;
}
.thermostat-display output{
	font-size:2rem;
	font-weight:600;
	line-height:1.2;
	font-variant-numeric:tabular-nums;
	color:var(--warn);
}
.thermostat-slider{
	display:flex;
	gap:.6rem;
	height:220px;
}
.thermostat .heat{
	--heat:0%;
	appearance:none;
	-webkit-appearance:none;
	writing-mode:vertical-lr;
	direction:rtl;
	width:44px;
	height:100%;
	margin:0;
	background:transparent;
	cursor:pointer;
	touch-action:none;
}
.thermostat .heat::-webkit-slider-runnable-track{
	width:10px;
	border-radius:999px;
	background:linear-gradient(to top, var(--warn) var(--heat), var(--bg-0) var(--heat));
}
.thermostat .heat::-moz-range-track{
	width:10px;
	height:100%;
	border-radius:999px;
	background:linear-gradient(to top, var(--warn) var(--heat), var(--bg-0) var(--heat));
}
.thermostat .heat::-webkit-slider-thumb{
	appearance:none;
	-webkit-appearance:none;
	width:32px;
	height:20px;
	margin-left:-11px;
	border:2px solid var(--warn);
	border-radius:7px;
	background:var(--txt);
	box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.thermostat .heat::-moz-range-thumb{
	box-sizing:border-box;
	width:32px;
	height:20px;
	border:2px solid var(--warn);
	border-radius:7px;
	background:var(--txt);
	box-shadow:0 2px 6px rgba(0,0,0,.3);
}
.thermostat .heat:focus-visible{
	outline:2px solid var(--cyan);
	outline-offset:3px;
	border-radius:8px;
}
.thermostat .heat:disabled{ opacity:.4; cursor:default; }
.thermostat-scale{
	display:flex;
	flex-direction:column;
	justify-content:space-between;
	padding:4px 0;
	color:var(--muted);
	font-size:.75rem;
	line-height:12px;
	font-variant-numeric:tabular-nums;
}
.thermostat-scale span::before{
	content:'';
	display:inline-block;
	width:6px;
	margin-right:.4rem;
	border-top:1px solid var(--brd);
	vertical-align:middle;
}

.overview-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap:1rem;
	align-items:stretch;
}
.overview-grid > .panel{ min-width:0; }
.vitality-people{
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	gap:1rem;
}
.vitality{
	--pulse-interval:0ms;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:.75rem;
	text-align:center;
}
.vitality-body{
	width:110px;
	flex-shrink:0;
	color:var(--cyan);
}
.vitality-outline{
	fill:rgba(141,200,240,.035);
	stroke:currentColor;
	stroke-width:2;
	stroke-linecap:round;
	stroke-linejoin:round;
}
.vitality-heart{
	fill:var(--bad);
	opacity:.5;
	transform-box:fill-box;
	transform-origin:center;
}
.vitality.beating .vitality-heart{
	opacity:1;
	animation:heart-beat var(--pulse-interval) ease-in-out infinite;
}
.vitality-value{
	display:block;
	font-size:1.75rem;
	line-height:1.2;
	margin-bottom:.5rem;
}
@keyframes heart-beat{
	0%, 40%, 100%{ transform:scale(1); }
	20%{ transform:scale(1.3); }
}
.brand .kicker{ margin:0; font-size:.7rem; }
.brand:hover{ color:var(--txt); }
.nav-toggle{ width:auto; justify-content:center; flex-shrink:0; }
.status-dot.connecting{ background:var(--warn); }
.status-pill{ white-space:nowrap; }
.sub{ color:var(--muted); }
.temp{ white-space:nowrap; }
.content img{ max-width:100%; height:auto; }
.content iframe{ border:1px solid var(--brd-2); border-radius:var(--radius); }
.frame-page{
	display:flex;
	flex-direction:column;
	height:100vh;
	height:100dvh;
	min-height:0;
}
.frame-page .topbar{ flex-shrink:0; }
.frame-page .shell{ flex:1; min-height:0; }
.frame-page .sidebar{ max-height:100%; }
.frame-page .content{
	display:flex;
	flex-direction:column;
	min-height:0;
	padding:.75rem;
	overflow:auto;
}
.frame-page .content iframe{ flex:1; min-height:0; }
.content > table{
	display:block;
	max-width:100%;
	overflow-x:auto;
	border:1px solid var(--brd-2);
	border-radius:var(--radius);
	background:var(--panel);
}
.content > table th, .content > table td{
	padding:.75rem 1rem;
	border-bottom:1px solid var(--brd-2);
}
.content > table tr:last-child > *{ border-bottom:0; }
.content > table tr:hover{ background:rgba(164,188,218,.04); }
a{ color:var(--cyan); text-underline-offset:.2em; }
hr{ border-color:var(--brd); opacity:1; margin:.75rem 0; }
.form-control, .form-select{
	background-color:var(--bg-1);
	border-color:var(--brd);
	color:var(--txt);
	min-height:44px;
}
.form-control:focus, .form-select:focus{
	background-color:var(--bg-1);
	color:var(--txt);
	border-color:var(--cyan);
	box-shadow:0 0 0 3px rgba(141,200,240,.15);
}
:where(a, button, input, select, textarea, summary):focus-visible, .btn-hud:focus-visible{
	outline:2px solid var(--cyan);
	outline-offset:3px;
	box-shadow:none;
}
.btn-hud:disabled, fieldset:disabled .btn-hud{
	opacity:.45;
	box-shadow:none;
}
.skip-link{
	position:fixed;
	top:.75rem;
	left:1rem;
	z-index:1100;
	padding:.7rem 1rem;
	border-radius:10px;
	background:var(--txt);
	color:var(--bg-0);
	transform:translateY(-200%);
}
.skip-link:focus{ transform:translateY(0); }
@media (max-width: 575.98px){
	:root{ --content-pad:.85rem; }
	.topbar-main{ width:100%; }
	.hud-metrics{ margin-left:auto; }
	.network-chip{ display:none; }
	.page-head h1{ font-size:1.4rem; }
	.panel-header, .panel-body{ padding:.9rem; }
	.panel-title{ font-size:.9rem; }
}
@media (prefers-reduced-motion: reduce){
	*, *::before, *::after{
		animation:none !important;
		transition:none !important;
		scroll-behavior:auto !important;
	}
}


.duedate-table{ --due-columns:minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .9fr) minmax(215px, 1fr); }
.duedate-columns, [data-duedate-list] .duedate-task{
	display:grid;
	grid-template-columns:var(--due-columns);
	gap:1.25rem;
	padding:1rem;
	align-items:start;
}
.duedate-columns{ color:var(--muted); font-size:.8rem; padding-top:0; padding-bottom:.5rem; }
[data-duedate-list]{ display:grid; gap:.6rem; }
[data-duedate-list] .duedate-task > *{ min-width:0; }
.duedate-heading{ display:flex; align-items:center; gap:.75rem; }
.duedate-heading h2{ font-size:.95rem; margin:0 0 .25rem; }
.duedate-icon{
	display:grid;
	place-items:center;
	width:38px;
	height:38px;
	flex-shrink:0;
	border-radius:10px;
	background:rgba(164,188,218,.08);
	color:var(--due-color);
	font-size:1.25rem;
}
.duedate-task .sub, [data-duedate-completed]{ font-size:.8rem; }
.duedate-remaining{ color:var(--due-color); font-size:.85rem; font-weight:600; }
.duedate-gauge{
	position:relative;
	height:12px;
	margin:.7rem 0;
	border-radius:999px;
	background:linear-gradient(to right, hsl(120, 65%, 55%), hsl(60, 65%, 55%) 50%, hsl(30, 65%, 55%) 75%, hsl(0, 65%, 55%));
	box-shadow:inset 0 1px 3px #0005;
}
.duedate-gauge span{
	position:absolute;
	left:clamp(2px, var(--due-progress), calc(100% - 2px));
	top:-4px;
	width:4px;
	height:20px;
	transform:translateX(-50%);
	border:1px solid #101722;
	border-radius:2px;
	background:#fff;
	box-shadow:0 0 3px #0009;
}
.duedate-label{ display:none; color:var(--muted); font-size:.75rem; margin-bottom:.3rem; }
.duedate-actions .btn{ padding:.5rem .6rem; font-size:.8rem; }
.duedate-postpone{ display:flex; gap:.35rem; margin-top:.4rem; }
.duedate-postpone .btn{ justify-content:center; padding:.5rem .25rem; font-size:.75rem; white-space:nowrap; }
.duedate-history, .duedate-initial, .duedate-settings{ margin-top:.6rem; font-size:.8rem; }
.duedate-history summary, .duedate-initial summary, .duedate-settings summary{ color:var(--muted); cursor:pointer; }
.duedate-history ul{ padding-left:1.1rem; margin-bottom:0; }
.duedate-history li{ margin:.5rem 0; }
.duedate-initial form, .duedate-settings form{ margin:.6rem 0; }
.duedate-initial label, .duedate-settings label{ display:block; }
.duedate-initial input, .duedate-settings input{ min-width:0; width:100%; margin:.3rem 0; font-size:.8rem; }
.duedate-initial .btn, .duedate-settings .btn{ padding:.5rem; font-size:.8rem; }
.duedate-summary .panel-body{ padding:.8rem 1rem; }
.duedate-summary .duedate-heading{ margin-bottom:.5rem; }
.duedate-summary .duedate-heading h2{ margin:0; }
.duedate-summary .duedate-gauge{ margin-bottom:.2rem; }
.duedate-summary [data-duedate-status]{ margin:0; padding:0 1rem .8rem; font-size:.8rem; }
.duedate-summary [data-duedate-status]:empty{ display:none; }
.duedate-legend{ display:flex; flex-wrap:wrap; gap:1rem; font-size:.85rem; }
.duedate-legend i{ display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--due-color); margin-right:.3rem; }
@media (max-width:1199px){
	.duedate-table{ --due-columns:minmax(0, 1fr) minmax(0, 1fr); }
	.duedate-columns{ display:none; }
	.duedate-label{ display:block; }
}
@media (max-width:575px){
	.duedate-table{ --due-columns:minmax(0, 1fr); }
	[data-duedate-list] .duedate-task{ gap:.9rem; }
}

.moon-disc{
	flex-shrink:0;
	filter:drop-shadow(0 0 8px rgba(232, 228, 216, .12));
}

.login-page{
	display:grid;
	place-items:center;
	min-height:100vh;
	min-height:100dvh;
	padding:1rem;
}
.login-panel{ width:100%; max-width:480px; }
.login-message{ color:var(--bad); }

.dashboard-grid, .module-grid{
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	gap:1rem;
	align-items:start;
}
.dashboard-grid > *, .module-grid > *{ min-width:0; }
.dashboard-grid [data-widget="night"]{ grid-row:span 2; }
.context-shortcuts, .dashboard-doors{ display:flex; gap:.5rem; flex-wrap:wrap; }
.menu-search{ padding:.6rem .3rem; }
.widget-option{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:.4rem; align-items:center; }
.widget-option label{ grid-column:1 / -1; font-size:.85rem; }
.app-launcher > summary{ cursor:pointer; border:1px solid var(--brd); }
.app-launcher[open] > summary{ margin-bottom:1rem; }
.module-card > summary{ cursor:pointer; font-weight:600; }
.module-card > summary::marker{ color:var(--cyan); }
.module-operation + .module-operation{ border-top:1px solid var(--brd-2); margin-top:1.25rem; padding-top:1.25rem; }
.module-form fieldset{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.75rem; }
.module-form button{ grid-column:1 / -1; justify-self:start; }
.module-field{ display:grid; gap:.3rem; font-size:.85rem; }
.module-values{ display:grid; grid-template-columns:minmax(90px, 1fr) minmax(0, 2fr); gap:.4rem .75rem; margin:0; font-size:.85rem; }
.module-values dt{ color:var(--muted); font-weight:400; }
.module-values dd{ min-width:0; margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.module-values .module-values{ grid-template-columns:minmax(0, 1fr); }
.module-records{ display:grid; gap:.75rem; max-height:480px; overflow:auto; }
.module-record + .module-record{ padding-top:.75rem; border-top:1px solid var(--brd-2); }
.chat-messages{ display:grid; gap:1rem; max-height:55vh; overflow:auto; margin-bottom:1rem; }
.chat-message{ padding:.75rem; border-radius:10px; background:rgba(164,188,218,.05); }
.chat-message p{ white-space:pre-wrap; overflow-wrap:anywhere; margin:.35rem 0 0; }
.chat-details{ margin-top:1rem; }
.chat-details summary{ cursor:pointer; color:var(--muted); margin-bottom:.75rem; }
@media (max-width:1199px){
	.dashboard-grid, .module-grid{ grid-template-columns:minmax(0, 1fr); }
	.dashboard-grid [data-widget="night"]{ grid-row:auto; }
}
@media (max-width:575px){
	.module-form fieldset, .module-values{ grid-template-columns:minmax(0, 1fr); }
	.module-form button{ width:100%!important; }
}