.ppog-account-shell {
	width: 100%;
}

.ppog-auth-card.ppog-bento-card {
	max-width: 920px;
	border: 0;
	background: transparent;
	box-shadow: none;
	padding: 0;
}

/* ---------- View switching ---------- */

.ppog-bento-card > .ppog-view-login,
.ppog-bento-card > .ppog-tile-wide.ppog-view-password,
.ppog-bento-card > .ppog-tile-wide.ppog-view-signup {
	display: none;
}

.ppog-bento-card[data-ppog-view="login"] > .ppog-bento-grid.ppog-view-login {
	display: grid;
}

.ppog-bento-card[data-ppog-view="password"] > .ppog-tile-wide.ppog-view-password {
	display: block;
}

.ppog-bento-card[data-ppog-view="signup"] > .ppog-tile-wide.ppog-view-signup {
	display: block;
}

/* ---------- Bento grid ---------- */

.ppog-bento-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-template-areas:
		"brand  brand  brand  brand  brand  brand"
		"google google otp    otp    otp    otp"
		"footer footer footer footer footer footer";
	gap: 10px;
}

.ppog-tile {
	border: 1px solid rgba(15, 23, 42, 0.08);
	border-radius: 20px;
	background: linear-gradient(150deg, rgba(248, 250, 252, 0.97), rgba(255, 255, 255, 0.99));
	box-shadow: 0 12px 30px rgba(15, 23, 42, 0.07);
	padding: 18px 20px;
}

.ppog-tile-brand {
	grid-area: brand;
	background: linear-gradient(135deg, #eef3ff, #ffffff);
}

.ppog-tile-brand .ppam-kicker {
	margin: 0 0 2px;
}

.ppog-tile-brand h2 {
	margin: 0;
	color: #07111f;
	font-size: clamp(22px, 4vw, 32px);
	line-height: 1.06;
}

.ppog-tile-brand .ppam-notice {
	margin-top: 12px;
}

.ppog-tile-google {
	grid-area: google;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 12px;
}

.ppog-tile-otp {
	grid-area: otp;
	background: #ffffff;
}

.ppog-tile-footer {
	grid-area: footer;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 20px;
}

.ppog-footer-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
}

.ppog-footer-links .ppog-ghost-btn {
	width: auto;
	padding: 0 18px;
	min-height: 38px;
}

.ppog-footer-signup {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
}

.ppog-footer-signup .ppog-tile-copy {
	margin: 0;
	color: #475569;
	font-size: 13px;
	font-weight: 700;
}

.ppog-footer-signup .ppog-cta-btn {
	width: auto;
	min-height: 38px;
	padding: 0 20px;
}

.ppog-tile-eyebrow {
	margin: 0 0 6px;
	color: #64748b;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
}

/* ---------- Modal dialog (used for the "not registered" notice) ---------- */

.ppog-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(7, 17, 31, 0.55);
}

.ppog-modal-box {
	width: 100%;
	max-width: 360px;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 24px 60px rgba(7, 17, 31, 0.35);
	padding: 24px;
	text-align: center;
}

.ppog-modal-message {
	margin: 0 0 20px;
	color: #9a3412;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
}

.ppog-modal-ok {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 120px;
	min-height: 44px;
	border: none;
	border-radius: 999px;
	background: #0f172a;
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 900;
	text-decoration: none;
	cursor: pointer;
}

.ppog-modal-ok:disabled {
	opacity: 0.6;
	cursor: default;
}

.ppog-modal-ok:hover,
.ppog-modal-ok:focus-visible {
	background: #1a2438;
	outline: none;
}

/* ---------- Wide (password / signup) tiles ---------- */

.ppog-tile-wide {
	max-width: 640px;
	margin: 0 auto;
}

.ppog-wide-head {
	margin-bottom: 14px;
}

.ppog-wide-head h2 {
	margin: 2px 0 0;
	color: #07111f;
	font-size: clamp(24px, 4vw, 32px);
}

/* ---------- Shared bits ---------- */

.ppog-google-wrap {
	margin: 0;
	text-align: center;
}

.ppog-google-wrap .google-login-btn {
	margin: 0 auto;
}

.ppog-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
	color: #64748b;
	font-size: 13px;
	font-weight: 800;
	text-align: center;
	text-transform: uppercase;
}

.ppog-divider::before,
.ppog-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: rgba(15, 23, 42, 0.12);
}

.ppog-form + .ppog-form {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px dashed rgba(15, 23, 42, 0.14);
}

.ppog-step[hidden] {
	display: none !important;
}

.ppog-password-toggle-row {
	margin-top: 16px;
	text-align: center;
}

.ppog-step-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
	justify-content: center;
	margin-top: 16px;
	text-align: center;
}

.ppog-email-summary {
	margin: 0 0 12px;
	color: #475569;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}

.ppog-email-summary strong {
	color: #07111f;
	overflow-wrap: anywhere;
}

.ppog-resend-form {
	text-align: center;
}

.ppog-link-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	border: 0;
	background: transparent;
	color: #1a73e8;
	font: inherit;
	font-size: 14px;
	font-weight: 900;
	padding: 0 8px;
	text-decoration: none;
	cursor: pointer;
}

.ppog-link-button:hover,
.ppog-link-button:focus-visible {
	text-decoration: underline;
	outline: none;
}

/* ---------- Buttons ---------- */

.ppog-ghost-btn,
.ppog-ghost-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	border: 1px solid rgba(15, 23, 42, 0.16);
	border-radius: 999px;
	background: #fff;
	color: #07111f;
	font: inherit;
	font-size: 14px;
	font-weight: 800;
	text-decoration: none;
	cursor: pointer;
}

.ppog-ghost-link {
	background: transparent;
	border-color: transparent;
	color: #1a73e8;
}

.ppog-ghost-btn:hover,
.ppog-ghost-btn:focus-visible {
	border-color: rgba(26, 115, 232, 0.4);
	outline: none;
}

.ppog-cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	width: 100%;
	border: 0;
	border-radius: 999px;
	background: #1a73e8;
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 900;
	cursor: pointer;
}

.ppog-cta-btn:hover,
.ppog-cta-btn:focus-visible {
	background: #1660c4;
	outline: none;
}

/* ---------- Responsive ---------- */

@media (max-width: 760px) {
	.ppog-verify-form {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 680px) {
	.ppog-bento-grid {
		grid-template-columns: 1fr;
		grid-template-areas:
			"brand"
			"google"
			"otp"
			"footer";
		gap: 8px;
	}

	.ppog-tile {
		border-radius: 16px;
		padding: 14px 16px;
	}

	.ppog-tile-footer {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.ppog-footer-links,
	.ppog-footer-signup {
		justify-content: center;
		text-align: center;
	}

	.ppog-footer-links .ppog-ghost-btn,
	.ppog-footer-signup .ppog-cta-btn {
		width: 100%;
	}
}