/*
 * Self-hosted variable fonts (SIL Open Font License 1.1), subsets from Google Fonts:
 * Cyrillic + Latin, plus Onest "math" for ℃. No requests to Google, work offline.
 */
@font-face {
	font-family: "Onest";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("/assets/fonts/onest-cyrillic.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "Onest";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("/assets/fonts/onest-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Onest";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("/assets/fonts/onest-math.woff2") format("woff2");
	unicode-range: U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F;
}

@font-face {
	font-family: "Unbounded";
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url("/assets/fonts/unbounded-cyrillic.woff2") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "Unbounded";
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url("/assets/fonts/unbounded-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--bg-0: #14241f;
	--bg-1: #1c332c;
	--bg-2: #243f36;
	--surface: rgba(247, 243, 233, 0.08);
	--surface-strong: rgba(247, 243, 233, 0.12);
	--stroke: rgba(247, 243, 233, 0.14);
	--text: #f4f0e6;
	--text-muted: rgba(244, 240, 230, 0.68);
	--accent: #d4a35c;
	--accent-strong: #e8b86a;
	--accent-soft: rgba(212, 163, 92, 0.18);
	--danger: #ff8f7a;
	--ok: #7dcb9a;
	--shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
	--radius: 20px;
	--radius-sm: 14px;
	--font-display: "Unbounded", sans-serif;
	--font-body: "Onest", sans-serif;
	--space: clamp(1rem, 3vw, 1.5rem);
	--content: 34rem;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	height: 100%;
	margin: 0;
}

body {
	font-family: var(--font-body);
	color: var(--text);
	background:
		radial-gradient(1200px 700px at 10% -10%, rgba(212, 163, 92, 0.18), transparent 55%),
		radial-gradient(900px 600px at 100% 0%, rgba(125, 203, 154, 0.12), transparent 50%),
		linear-gradient(165deg, var(--bg-0), var(--bg-1) 45%, var(--bg-2));
	background-attachment: fixed;
	-webkit-font-smoothing: antialiased;
}

button,
input {
	font: inherit;
	touch-action: manipulation;
}

button {
	-webkit-tap-highlight-color: transparent;
}

.app-shell {
	min-height: 100%;
	min-height: 100dvh;
}

.app-main {
	min-height: 100%;
	min-height: 100dvh;
}

.outlet {
	min-height: 100%;
	min-height: 100dvh;
	width: 100%;
}

.d-none,
[hidden] {
	display: none !important;
}

.page {
	width: min(100%, var(--content));
	margin: 0 auto;
	padding: calc(var(--space) + env(safe-area-inset-top)) var(--space) calc(var(--space) + env(safe-area-inset-bottom));
	animation: rise 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes rise {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* —— Login —— */

.login-page {
	min-height: 100%;
	min-height: 100dvh;
	display: grid;
	place-items: center;
	padding:
		calc(var(--space) + env(safe-area-inset-top))
		calc(var(--space) + env(safe-area-inset-right))
		calc(var(--space) + env(safe-area-inset-bottom))
		calc(var(--space) + env(safe-area-inset-left));
}

.login-panel {
	width: min(100%, 24rem);
	padding: clamp(1.4rem, 4vw, 2rem);
	border: 1px solid var(--stroke);
	border-radius: calc(var(--radius) + 4px);
	background:
		linear-gradient(160deg, rgba(247, 243, 233, 0.12), rgba(247, 243, 233, 0.04));
	box-shadow: var(--shadow);
	backdrop-filter: blur(18px);
}

.login-brand {
	margin: 0 0 0.35rem;
	font-family: var(--font-display);
	font-size: clamp(1.85rem, 6.5vw, 2.35rem);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1.08;
}

.login-lead {
	margin: 0 0 1.5rem;
	color: var(--text-muted);
	font-size: 0.98rem;
	line-height: 1.45;
}

.field {
	display: grid;
	gap: 0.45rem;
	margin-bottom: 1rem;
}

.field__label {
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--text-muted);
}

.field__input {
	width: 100%;
	min-height: 3.25rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--stroke);
	border-radius: var(--radius-sm);
	background: rgba(10, 18, 15, 0.35);
	color: var(--text);
	font-size: 16px; /* iOS не зумит поле при фокусе */
	line-height: 1.3;
	outline: none;
	transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.field__input::placeholder {
	color: rgba(244, 240, 230, 0.35);
}

.field__input:hover {
	border-color: rgba(247, 243, 233, 0.28);
}

.field__input:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
	background: rgba(10, 18, 15, 0.5);
}

.login-error {
	margin: 0 0 1rem;
	padding: 0.7rem 0.85rem;
	border-radius: 12px;
	background: rgba(255, 143, 122, 0.12);
	color: var(--danger);
	font-size: 0.9rem;
}

.btn {
	appearance: none;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-width: 3rem;
	min-height: 3rem; /* ≥ 48px — удобно пальцем */
	padding: 0.75rem 1.35rem;
	font-size: 1rem;
	font-weight: 600;
	transition: transform 160ms ease, background 160ms ease, opacity 160ms ease;
}

.btn:active {
	transform: scale(0.98);
}

.btn--primary {
	width: 100%;
	background: linear-gradient(135deg, var(--accent-strong), var(--accent));
	color: #1a160f;
	box-shadow: 0 10px 28px rgba(212, 163, 92, 0.28);
}

.btn--primary:hover {
	filter: brightness(1.05);
}

.btn--ghost {
	background: transparent;
	color: var(--text-muted);
	border: 1px solid var(--stroke);
}

.btn--ghost:hover {
	color: var(--text);
	background: var(--surface);
}

.btn--icon {
	flex-shrink: 0;
	width: 2.85rem;
	min-width: 2.85rem;
	height: 2.85rem;
	min-height: 2.85rem;
	padding: 0;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--stroke);
	color: var(--text-muted);
	opacity: 0.85;
}

.btn--icon:hover {
	opacity: 1;
	color: var(--text);
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(247, 243, 233, 0.28);
}

.btn--icon .icon {
	width: 1.35rem;
	height: 1.35rem;
	--icon-color: currentColor;
}

.btn:disabled {
	opacity: 0.6;
	cursor: wait;
}

/* —— House —— */

.house-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.house-title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.55rem, 4.5vw, 1.95rem);
	font-weight: 700;
	letter-spacing: -0.04em;
}

.house-subtitle {
	margin: 0.2rem 0 0;
	color: var(--text-muted);
	font-size: 0.92rem;
}

.house-subtitle.is-warning {
	color: var(--danger);
}

.metric.is-stale {
	opacity: 0.55;
}

.metrics {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.85rem;
	margin-bottom: 1rem;
}

.metric {
	padding: 1rem 1.05rem 0.85rem;
	border-radius: var(--radius);
	border: 1px solid var(--stroke);
	background: var(--surface);
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	min-height: 8.4rem;
	transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.metric__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
}

.metric__main {
	min-width: 0;
}

.metric__value {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.65rem, 5.5vw, 2.05rem);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
}

.metric__label {
	margin: 0.45rem 0 0.55rem;
	color: var(--text-muted);
	font-size: 0.82rem;
	font-weight: 500;
}

.comfort-badge {
	display: inline-flex;
	align-items: center;
	min-height: 1.55rem;
	padding: 0.2rem 0.65rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	border: 1px solid transparent;
}

.comfort-badge--idle {
	color: var(--text-muted);
	background: rgba(247, 243, 233, 0.06);
	border-color: var(--stroke);
}

.comfort-badge--ok {
	color: #123526;
	background: #7dcb9a;
}

.comfort-badge--cold {
	color: #0b2740;
	background: #7eb8ff;
}

.comfort-badge--hot {
	color: #3a1408;
	background: #ff9b6a;
}

.comfort-badge--dry {
	color: #3a2a08;
	background: #e8c56a;
}

.comfort-badge--humid {
	color: #0b2a40;
	background: #6ec8e0;
}

.comfort-scale {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	height: 0.55rem;
	border-radius: 999px;
	overflow: visible;
	background: rgba(0, 0, 0, 0.25);
}

.comfort-scale__seg {
	display: block;
	height: 100%;
}

.metric--temp .comfort-scale__seg--a { background: #5b9fd8; }
.metric--temp .comfort-scale__seg--b { background: #7dcb9a; }
.metric--temp .comfort-scale__seg--c { background: #e8895a; }

.metric--humidity .comfort-scale__seg--a { background: #e8c56a; }
.metric--humidity .comfort-scale__seg--b { background: #7dcb9a; }
.metric--humidity .comfort-scale__seg--c { background: #6ec8e0; }

.comfort-scale__marker {
	position: absolute;
	top: 50%;
	width: 0.85rem;
	height: 0.85rem;
	margin-left: -0.425rem;
	border-radius: 50%;
	background: #fff8ec;
	border: 2px solid #1a160f;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
	transform: translateY(-50%);
	transition: left 220ms cubic-bezier(0.22, 1, 0.36, 1);
	z-index: 1;
}

.comfort-scale__caption {
	display: flex;
	justify-content: space-between;
	margin: -0.35rem 0 0;
	color: rgba(244, 240, 230, 0.45);
	font-size: 0.68rem;
	font-weight: 600;
	text-transform: lowercase;
}

.metric.is-cold {
	border-color: rgba(126, 184, 255, 0.45);
	background:
		linear-gradient(145deg, rgba(126, 184, 255, 0.2), transparent 55%),
		var(--surface);
}

.metric.is-hot {
	border-color: rgba(255, 155, 106, 0.5);
	background:
		linear-gradient(145deg, rgba(255, 155, 106, 0.22), transparent 55%),
		var(--surface);
}

.metric.is-ok {
	border-color: rgba(125, 203, 154, 0.45);
	background:
		linear-gradient(145deg, rgba(125, 203, 154, 0.18), transparent 55%),
		var(--surface);
}

.metric.is-dry {
	border-color: rgba(232, 197, 106, 0.5);
	background:
		linear-gradient(145deg, rgba(232, 197, 106, 0.2), transparent 55%),
		var(--surface);
}

.metric.is-humid {
	border-color: rgba(110, 200, 224, 0.5);
	background:
		linear-gradient(145deg, rgba(110, 200, 224, 0.2), transparent 55%),
		var(--surface);
}

/* Icons via mask — saturated color instead of washed invert filters */
.icon {
	display: block;
	width: 1.45rem;
	height: 1.45rem;
	background-color: var(--icon-color, #f4efe3);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.icon--lg {
	width: 2.15rem;
	height: 2.15rem;
}

.icon--temperature {
	-webkit-mask-image: url("/assets/icons/temperature.svg");
	mask-image: url("/assets/icons/temperature.svg");
}

.icon--humidity {
	-webkit-mask-image: url("/assets/icons/humidity.svg");
	mask-image: url("/assets/icons/humidity.svg");
}

.icon--sofa {
	-webkit-mask-image: url("/assets/icons/sofa.svg");
	mask-image: url("/assets/icons/sofa.svg");
}

.icon--dining {
	-webkit-mask-image: url("/assets/icons/dining_table.svg");
	mask-image: url("/assets/icons/dining_table.svg");
}

.icon--fridge {
	-webkit-mask-image: url("/assets/icons/fridge.svg");
	mask-image: url("/assets/icons/fridge.svg");
}

.icon--wardrobe {
	-webkit-mask-image: url("/assets/icons/wardrobe.svg");
	mask-image: url("/assets/icons/wardrobe.svg");
}

.icon--logout {
	-webkit-mask-image: url("/assets/icons/logout.svg");
	mask-image: url("/assets/icons/logout.svg");
}

.metric--temp .icon { --icon-color: #e8b86a; }
.metric--temp.is-cold .icon { --icon-color: #7eb8ff; }
.metric--temp.is-ok .icon { --icon-color: #7dcb9a; }
.metric--temp.is-hot .icon { --icon-color: #ff9b6a; }

.metric--humidity .icon { --icon-color: #7dcb9a; }
.metric--humidity.is-dry .icon { --icon-color: #e8c56a; }
.metric--humidity.is-ok .icon { --icon-color: #7dcb9a; }
.metric--humidity.is-humid .icon { --icon-color: #6ec8e0; }

.room__icon-wrap {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 14px;
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	background: linear-gradient(145deg, rgba(232, 184, 106, 0.28), rgba(0, 0, 0, 0.22));
	border: 1px solid rgba(232, 184, 106, 0.28);
}

.room__icon-wrap .icon {
	--icon-color: #f3d7a1;
}

.room.is-on .room__icon-wrap {
	background: linear-gradient(145deg, rgba(232, 184, 106, 0.55), rgba(212, 163, 92, 0.2));
	border-color: rgba(232, 184, 106, 0.55);
	box-shadow: 0 0 18px rgba(212, 163, 92, 0.25);
}

.room.is-on .room__icon-wrap .icon {
	--icon-color: #ffe6b0;
}

.rooms {
	display: grid;
	gap: 0.85rem;
}

.rooms-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0.15rem 0 0.65rem;
}

.rooms-toolbar--devices {
	margin-top: 1.25rem;
}

.pc-status {
	font-size: 0.88rem;
	font-weight: 500;
	color: var(--text-muted);
}

.pc-status.is-on {
	color: #7dcb9a;
}

.pc-actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.65rem;
}

.rooms-toolbar__label {
	margin: 0;
	font-family: var(--font-display);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--text-muted);
}

.btn--text {
	flex-shrink: 0;
	width: auto;
	min-width: 0;
	min-height: 2.5rem;
	padding: 0.35rem 0.65rem;
	border-radius: 10px;
	background: transparent;
	border: 0;
	color: var(--text-muted);
	font-size: 0.88rem;
	font-weight: 500;
	opacity: 0.9;
}

.btn--text:hover {
	color: var(--text);
	background: rgba(255, 255, 255, 0.05);
}

.room {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 4.75rem;
	padding: 1.05rem 1.1rem;
	border-radius: var(--radius);
	border: 1px solid var(--stroke);
	background: var(--surface);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	user-select: none;
	transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 120ms ease;
}

.room:active {
	transform: scale(0.985);
}

.room.is-on {
	border-color: rgba(212, 163, 92, 0.45);
	background:
		linear-gradient(120deg, rgba(212, 163, 92, 0.16), transparent 55%),
		var(--surface-strong);
	box-shadow: inset 0 0 0 1px rgba(212, 163, 92, 0.08);
}

.room__meta {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	min-width: 0;
	pointer-events: none;
}

.room__text {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.room__name {
	font-size: 1.08rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.room__state {
	color: var(--text-muted);
	font-size: 0.84rem;
	font-weight: 500;
}

.room.is-on .room__state {
	color: var(--accent-strong);
}

/* —— Toggle —— */

.toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 3.75rem;
	height: 3rem;
	pointer-events: none; /* клик ловит вся карточка .room */
}

.toggle input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

.toggle__track {
	width: 3.4rem;
	height: 2rem;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.35);
	border: 1px solid var(--stroke);
	display: block;
	position: relative;
	transition: background 180ms ease, border-color 180ms ease;
}

.toggle__track::after {
	content: "";
	position: absolute;
	top: 0.18rem;
	left: 0.18rem;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: #f7f3e9;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
	transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.toggle input:checked + .toggle__track {
	background: linear-gradient(135deg, var(--accent-strong), var(--accent));
	border-color: transparent;
}

.toggle input:checked + .toggle__track::after {
	transform: translateX(1.35rem);
}

.room:focus-within {
	box-shadow: 0 0 0 3px var(--accent-soft);
}

.room:focus-within .toggle__track {
	box-shadow: 0 0 0 3px var(--accent-soft);
}

.toast {
	position: fixed;
	left: 50%;
	bottom: calc(1rem + env(safe-area-inset-bottom));
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 0.75rem;
	max-width: calc(100vw - 2rem);
	padding: 0.75rem 1rem;
	border-radius: 999px;
	background: rgba(20, 28, 24, 0.94);
	border: 1px solid var(--stroke);
	color: var(--text);
	box-shadow: var(--shadow);
	z-index: 20;
}

.toast__text {
	font-size: 0.92rem;
	font-weight: 500;
}

.toast__action {
	appearance: none;
	border: 0;
	border-radius: 999px;
	padding: 0.4rem 0.85rem;
	min-height: 2.25rem;
	background: var(--accent);
	color: #1a160f;
	font-weight: 700;
	cursor: pointer;
	touch-action: manipulation;
}

@media (max-width: 420px) {
	.house-header {
		align-items: flex-start;
	}

	.metrics {
		gap: 0.7rem;
	}

	.metric {
		min-height: 8rem;
		padding: 0.9rem 0.9rem 0.75rem;
	}

	.rooms {
		gap: 0.75rem;
	}

	.room {
		min-height: 5.1rem;
		padding: 1.15rem 1.15rem;
	}
}

@media (min-width: 720px) {
	:root {
		--content: 40rem;
	}

	/* На планшете/десктопе одна колонка удобнее для крупных тапов по ряду */
	.rooms {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 900px) {
	.rooms {
		grid-template-columns: 1fr 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.page,
	.btn,
	.room,
	.toggle__track,
	.toggle__track::after,
	.field__input {
		animation: none !important;
		transition: none !important;
	}
}