/* Home Mini App. Colors follow the Telegram theme; fallbacks cover a plain browser. */
:root {
	--bg: var(--tg-theme-secondary-bg-color, #f1f2f6);
	--card: var(--tg-theme-section-bg-color, var(--tg-theme-bg-color, #ffffff));
	--text: var(--tg-theme-text-color, #16181d);
	--hint: var(--tg-theme-hint-color, #8a8f9c);
	--accent: var(--tg-theme-button-color, #3b82f6);
	--accent-text: var(--tg-theme-button-text-color, #ffffff);
	--danger: var(--tg-theme-destructive-text-color, #e5484d);
	--warn-bg: #fff4e0;
	--warn-text: #8a5300;
	--line: color-mix(in srgb, var(--hint) 22%, transparent);
	--radius: 16px;
	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: var(--tg-theme-secondary-bg-color, #101217);
		--card: var(--tg-theme-section-bg-color, var(--tg-theme-bg-color, #1b1e25));
		--text: var(--tg-theme-text-color, #eef0f4);
		--warn-bg: #3a2a0f;
		--warn-text: #ffcf86;
	}
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	-webkit-tap-highlight-color: transparent;
}

button,
input {
	font: inherit;
	color: inherit;
}

.app {
	max-width: 560px;
	margin: 0 auto;
	padding: 12px 14px calc(24px + env(safe-area-inset-bottom));
}

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

.avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	flex: none;
}

.splash {
	display: grid;
	justify-items: center;
	gap: 12px;
	padding: 48px 0;
	text-align: center;
}

.splash img {
	width: 160px;
	height: 160px;
	border-radius: 50%;
}

.top h1 {
	margin: 4px 0 0;
	font-size: 26px;
	letter-spacing: -0.02em;
}

.muted {
	color: var(--hint);
	margin: 2px 0 0;
}

.center {
	text-align: center;
}

/* Device tabs */
.tabs {
	display: flex;
	gap: 8px;
	margin: 14px 0 12px;
	overflow-x: auto;
}

.tab {
	border: 0;
	border-radius: 999px;
	padding: 7px 16px;
	background: var(--card);
	color: var(--text);
	font-weight: 600;
	cursor: pointer;
}

.tab[aria-selected="true"] {
	background: var(--accent);
	color: var(--accent-text);
}

/* Cards */
.view {
	display: grid;
	gap: 12px;
}

.card {
	background: var(--card);
	border-radius: var(--radius);
	padding: 14px;
}

.card h2 {
	margin: 0 0 10px;
	font-size: 17px;
}

.card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.card-head h2 {
	margin: 0;
}

.card-head + * {
	margin-top: 10px;
}

.alert {
	border-radius: var(--radius);
	padding: 11px 14px;
	background: var(--warn-bg);
	color: var(--warn-text);
	font-weight: 500;
}

.alert.offline {
	background: color-mix(in srgb, var(--danger) 14%, var(--card));
	color: var(--danger);
}

/* Camera */
.camera {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius);
	overflow: hidden;
	background: #000;
}

.camera video,
.camera video-stream {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.camera-placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: #b7bcc7;
	text-align: center;
	padding: 16px;
}

.camera-bar {
	position: absolute;
	left: 10px;
	top: 10px;
	display: flex;
	gap: 6px;
	align-items: center;
	padding: 3px 9px;
	border-radius: 999px;
	background: rgb(0 0 0 / 0.55);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	pointer-events: none;
}

.dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #9aa0aa;
}

.dot.live {
	background: #3ccf6e;
}

.dot.bad {
	background: var(--danger);
}

/* Controls */
.stepper {
	display: flex;
	align-items: center;
	gap: 14px;
}

.stepper button {
	width: 40px;
	height: 40px;
	border-radius: 12px;
	border: 0;
	background: color-mix(in srgb, var(--accent) 14%, transparent);
	color: var(--accent);
	font-size: 22px;
	font-weight: 600;
	cursor: pointer;
}

.stepper button:disabled {
	opacity: 0.35;
}

.stepper .value {
	min-width: 96px;
	text-align: center;
	font-weight: 600;
}

.feed-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.btn {
	border: 0;
	border-radius: 12px;
	padding: 11px 22px;
	background: var(--accent);
	color: var(--accent-text);
	font-weight: 600;
	cursor: pointer;
}

.btn:disabled {
	opacity: 0.45;
	cursor: default;
}

.btn.ghost {
	background: transparent;
	color: var(--accent);
	padding: 6px 4px;
}

.btn.danger {
	background: transparent;
	color: var(--danger);
}

.btn.wide {
	width: 100%;
}

/* Lists */
.list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.list li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-top: 1px solid var(--line);
}

.list li:first-child {
	border-top: 0;
}

.meal {
	cursor: pointer;
}

.meal .time {
	font-size: 20px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	min-width: 64px;
}

.meal.off .time,
.meal.off .grow {
	opacity: 0.45;
}

.grow {
	flex: 1;
	min-width: 0;
}

.event .icon {
	width: 32px;
	height: 32px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	background: color-mix(in srgb, var(--accent) 12%, transparent);
	flex: none;
}

.event.failed .icon {
	background: color-mix(in srgb, var(--danger) 14%, transparent);
}

.event .when {
	color: var(--hint);
	font-size: 13px;
	white-space: nowrap;
}

.sub {
	color: var(--hint);
	font-size: 13px;
}

.empty {
	color: var(--hint);
	margin: 4px 0;
}

/* Switch */
.switch {
	position: relative;
	width: 46px;
	height: 28px;
	flex: none;
}

.switch input {
	position: absolute;
	inset: 0;
	opacity: 0;
	margin: 0;
	cursor: pointer;
}

.switch span {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	background: color-mix(in srgb, var(--hint) 40%, transparent);
	transition: background 0.15s;
	pointer-events: none;
}

.switch span::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	transition: transform 0.15s;
}

.switch input:checked + span {
	background: #34c759;
}

.switch input:checked + span::after {
	transform: translateX(18px);
}

/* Bottom sheet */
.backdrop {
	position: fixed;
	inset: 0;
	background: rgb(0 0 0 / 0.4);
	display: flex;
	align-items: flex-end;
	justify-content: center;
	z-index: 10;
}

.sheet {
	width: 100%;
	max-width: 560px;
	background: var(--card);
	border-radius: 20px 20px 0 0;
	padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
	display: grid;
	gap: 16px;
}

.sheet h3 {
	margin: 0;
	font-size: 18px;
}

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

.field input[type="time"] {
	border: 1px solid var(--line);
	border-radius: 10px;
	padding: 8px 10px;
	background: transparent;
	font-size: 18px;
	font-variant-numeric: tabular-nums;
}

.sheet-actions {
	display: flex;
	gap: 8px;
	justify-content: space-between;
	align-items: center;
}

/* Toast */
.toast {
	position: fixed;
	left: 50%;
	bottom: calc(20px + env(safe-area-inset-bottom));
	transform: translate(-50%, 20px);
	background: rgb(20 22 28 / 0.92);
	color: #fff;
	padding: 10px 16px;
	border-radius: 12px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s, transform 0.2s;
	max-width: calc(100% - 32px);
	z-index: 20;
}

.toast.show {
	opacity: 1;
	transform: translate(-50%, 0);
}