[hidden] { display: none !important; }

.pwa-install-banner {
	position: fixed;
	left: 12px;
	right: 12px;
	bottom: calc(12px + env(safe-area-inset-bottom));
	z-index: 120;
	max-width: 620px;
	min-height: 82px;
	display: grid;
	grid-template-columns: 54px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	margin: 0 auto;
	padding: 13px 43px 13px 13px;
	border: 1px solid rgba(255,255,255,.2);
	border-radius: 19px;
	background: rgba(15, 61, 68, .97);
	color: white;
	box-shadow: 0 18px 48px rgba(9, 25, 31, .34);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	animation: pwa-install-rise .28s ease-out both;
}

body.app-body .pwa-install-banner {
	bottom: calc(var(--bottom-nav-height, 66px) + env(safe-area-inset-bottom) + 12px);
}

.pwa-install-banner img {
	width: 54px;
	height: 54px;
	border-radius: 13px;
	box-shadow: 0 4px 13px rgba(0,0,0,.22);
}

.pwa-install-banner-copy { min-width: 0; display: grid; gap: 3px; }
.pwa-install-banner-copy strong { font-size: 14px; line-height: 1.25; }
.pwa-install-banner-copy span { color: rgba(255,255,255,.76); font-size: 11px; line-height: 1.35; }

.pwa-install-primary,
.pwa-install-done {
	min-height: 42px;
	padding: 0 15px;
	border: 0;
	border-radius: 12px;
	background: #fff;
	color: #176d76;
	font: inherit;
	font-size: 13px;
	font-weight: 850;
	cursor: pointer;
}

.pwa-install-dismiss {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 32px;
	height: 32px;
	border: 0;
	background: transparent;
	color: rgba(255,255,255,.7);
	font: inherit;
	font-size: 22px;
	cursor: pointer;
}

.pwa-install-overlay {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	align-items: end;
	padding-top: max(20px, env(safe-area-inset-top));
	background: rgba(7, 24, 30, .68);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

.pwa-install-sheet {
	width: min(100%, 520px);
	max-height: calc(100dvh - 20px - env(safe-area-inset-top));
	margin: 0 auto;
	padding: 22px 20px max(20px, calc(16px + env(safe-area-inset-bottom)));
	overflow-y: auto;
	border-radius: 24px 24px 0 0;
	background: #fff;
	color: #13252d;
	box-shadow: 0 -18px 55px rgba(9,25,31,.3);
	animation: pwa-sheet-rise .24s ease-out both;
}

.pwa-install-sheet-heading { display: grid; grid-template-columns: 58px minmax(0, 1fr) 38px; align-items: start; gap: 13px; }
.pwa-install-sheet-heading img { width: 58px; height: 58px; border-radius: 14px; box-shadow: 0 5px 14px rgba(19,37,45,.16); }
.pwa-install-sheet-heading p { margin: 2px 0 3px; color: #176d76; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.pwa-install-sheet-heading h2 { margin: 0; font-size: 21px; letter-spacing: -.03em; line-height: 1.12; }
.pwa-install-sheet-heading > button { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #f4f7f8; color: #65767e; font: inherit; font-size: 23px; cursor: pointer; }
.pwa-install-intro { margin: 18px 0 14px; color: #65767e; font-size: 14px; line-height: 1.5; }
.pwa-install-steps { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; counter-reset: pwa-step; }
.pwa-install-steps li { counter-increment: pwa-step; min-height: 59px; display: grid; grid-template-columns: 35px minmax(0, 1fr); align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid #dce5e8; border-radius: 13px; background: #f8fafb; color: #344950; font-size: 13px; line-height: 1.4; }
.pwa-install-steps li::before { content: counter(pwa-step); width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; background: #dff3f4; color: #176d76; font-weight: 900; }
.pwa-install-steps strong { color: #13252d; }
.pwa-install-done { width: 100%; margin-top: 16px; background: #238e99; color: #fff; }

.pwa-settings-status { display: inline-flex; align-items: center; gap: 6px; color: #176d76; }
.pwa-settings-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #f36f61; }
.pwa-settings-status.installed::before { background: #35a875; }

body.pwa-modal-open { overflow: hidden; }
html.pwa-standalone body { overscroll-behavior-y: none; }

@keyframes pwa-install-rise {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes pwa-sheet-rise {
	from { transform: translateY(35px); opacity: .6; }
	to { transform: translateY(0); opacity: 1; }
}

@media (max-width: 430px) {
	.pwa-install-banner { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; padding-left: 10px; }
	.pwa-install-banner img { width: 48px; height: 48px; border-radius: 12px; }
	.pwa-install-banner-copy span { display: none; }
	.pwa-install-primary { padding: 0 13px; }
}

@media (min-width: 768px) {
	body.app-body .pwa-install-banner { bottom: 20px; }
	.pwa-install-overlay { align-items: center; padding: 22px; }
	.pwa-install-sheet { border-radius: 24px; padding-bottom: 22px; }
}

@media (prefers-reduced-motion: reduce) {
	.pwa-install-banner, .pwa-install-sheet { animation: none; }
}