.account-shell { min-height: 100vh; padding: 64px 0 80px; }
.account-shell-simple { padding-top: 48px; }
.account-nav { align-items: center; display: flex; justify-content: space-between; margin-bottom: 72px; }
/* The language picker is styled once, in header.css. It used to be redefined
   here with a border and its own size, which quietly won on every page. */
.header-actions { align-items: center; display: flex; gap: 14px; }
.sr-only { height: 1px; margin: -1px; overflow: hidden; position: absolute; width: 1px; clip: rect(0, 0, 0, 0); }
.account-card { background: var(--color-white); border: 1px solid rgba(18, 18, 18, .12); border-radius: 24px; box-shadow: 0 20px 60px rgba(18,18,18,.08); margin: 0 auto; max-width: 720px; padding: clamp(28px, 5vw, 56px); }
.account-card h1 { font-size: clamp(44px, 7vw, 76px); margin-bottom: 18px; }
.account-card p { color: var(--color-muted); }
.account-form { display: grid; gap: 16px; margin-top: 28px; }
.account-form label { color: var(--color-ink); font-weight: 800; }
.account-form input { background: var(--color-paper); border: 1px solid rgba(18,18,18,.25); border-radius: 10px; display: block; margin-top: 7px; padding: 14px; width: 100%; }
.account-form button { cursor: pointer; width: 100%; }
/*
 * Social sign-in, styled as it will look once the exchange is implemented.
 * Provider marks are inline data URIs: their brand guidelines require the real
 * logo, and loading it from their CDN would announce every visit to this page
 * to them before anyone has chosen to sign in.
 */
.social-auth { display: grid; gap: 12px; margin: 26px 0 8px; }

.social-auth p {
	align-items: center;
	color: var(--color-muted);
	display: flex;
	font-size: 13px;
	font-weight: 600;
	gap: 14px;
	margin: 0;
	text-transform: uppercase;
}

.social-auth p::before,
.social-auth p::after {
	background: var(--color-line);
	content: "";
	flex: 1;
	height: 1px;
}

.social-auth .button-row { display: grid; gap: 10px; margin: 0; }

.button-social {
	background: var(--color-white);
	background-position: 20px center;
	background-repeat: no-repeat;
	background-size: 20px 20px;
	border: 1px solid var(--color-line);
	color: var(--color-ink);
	font-size: 14px;
	gap: 10px;
	justify-content: center;
	padding: 16px 24px 16px 52px;
	text-transform: none;
	width: 100%;
}

.button-social:hover,
.button-social:focus-visible {
	background-color: var(--color-white);
	border-color: var(--color-ink);
	color: var(--color-ink);
}

/*
 * Each rule below carries its brand icon and its background gradient as two
 * layers of the same `background-image` list, deliberately never through the
 * `background` shorthand. The shorthand resets every background-* longhand it
 * does not mention, so a later `background: linear-gradient(...)` rule here
 * silently erased the icon set above it — same specificity, later in the
 * cascade, wins. That is why these buttons rendered as plain text for a long
 * time despite the icon being right there in the file.
 */
.button-google {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%234285F4' d='M45 24.5c0-1.6-.1-2.7-.4-4H24v7.3h12c-.2 2-1.5 5-4.4 7l6.7 5.2c4-3.7 6.7-9.1 6.7-15.5z'/%3E%3Cpath fill='%2334A853' d='M24 46c5.9 0 10.8-1.9 14.4-5.3l-6.7-5.2c-1.8 1.3-4.3 2.2-7.7 2.2-5.9 0-10.9-3.9-12.7-9.3l-7 5.4C7.9 41 15.4 46 24 46z'/%3E%3Cpath fill='%23FBBC05' d='M11.3 28.4c-.5-1.4-.8-2.9-.8-4.4s.3-3 .7-4.4l-7-5.4C3.1 17.1 2 20.4 2 24s1.1 6.9 3.2 9.8l6.1-5.4z'/%3E%3Cpath fill='%23EA4335' d='M24 10.3c4.2 0 7 1.8 8.6 3.3l6-5.8C34.8 4.4 29.9 2 24 2 15.4 2 7.9 7 5.2 14.2l7 5.4C14 14.2 19 10.3 24 10.3z'/%3E%3C/svg%3E"),
		linear-gradient(135deg, #ffffff 0%, #f4f7ff 100%);
	background-position: 20px center, 0 0;
	background-repeat: no-repeat, no-repeat;
	background-size: 20px 20px, auto;
	color: #111827;
}

.button-facebook {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230866FF' d='M24 12a12 12 0 1 0-13.9 11.9v-8.4H7.1V12h3V9.4c0-3 1.8-4.6 4.5-4.6 1.3 0 2.7.2 2.7.2v2.9h-1.5c-1.5 0-1.9.9-1.9 1.8V12h3.3l-.5 3.5h-2.8v8.4A12 12 0 0 0 24 12z'/%3E%3C/svg%3E"),
		linear-gradient(135deg, #0f172a 0%, #334155 100%);
	background-position: 20px center, 0 0;
	background-repeat: no-repeat, no-repeat;
	background-size: 20px 20px, auto;
	color: #ffffff;
}

.button-apple {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M16.37 1.43c0 1.14-.46 2.22-1.23 3.02-.84.89-2.16 1.57-3.24 1.48-.14-1.09.44-2.28 1.19-3.06.86-.9 2.29-1.55 3.28-1.44ZM20.6 17.57c-.64 1.42-1.02 2.05-1.86 3.31-1.17 1.76-2.82 3.95-4.86 3.97-1.82.02-2.29-1.19-4.76-1.18-2.47.01-2.99 1.2-4.81 1.18-2.04-.02-3.6-2-4.77-3.76C-3.03 17.06-1.86 9.9 1.86 7.94c1.63-.85 3.19-.86 4.68-.19 1.11.5 2.08.5 3.16 0 1.62-.74 3.29-.75 4.78.03.9.47 1.62 1.09 2.15 1.86-2.02 1.24-3.03 3.34-2.55 5.5.4 1.8 1.6 3.06 2.51 3.4Z'/%3E%3C/svg%3E"),
		linear-gradient(135deg, #000000 0%, #1c1c1e 100%);
	background-position: 20px center, 0 0;
	background-repeat: no-repeat, no-repeat;
	background-size: 20px 20px, auto;
	color: #ffffff;
}

.button-microsoft {
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1' y='1' width='10' height='10' fill='%23F25022'/%3E%3Crect x='13' y='1' width='10' height='10' fill='%237FBA00'/%3E%3Crect x='1' y='13' width='10' height='10' fill='%2300A4EF'/%3E%3Crect x='13' y='13' width='10' height='10' fill='%23FFB900'/%3E%3C/svg%3E"),
		linear-gradient(135deg, #ffffff 0%, #f4f7ff 100%);
	background-position: 20px center, 0 0;
	background-repeat: no-repeat, no-repeat;
	background-size: 20px 20px, auto;
	color: #111827;
}

/* A provider without credentials is not offered: a button that leads to a dead
   redirect is worse than no button. */
.button-social[hidden] { display: none; }
.button-social { min-width: 220px; }
.account-split { display: grid; gap: 24px; margin-top: 28px; }
.account-message { border-radius: 12px; display: none; margin-top: 18px; padding: 14px; }
.account-message.error { background: #ffe5de; color: #7c210e; display: block; }
.account-message.success { background: #e0f2df; color: #174c1d; display: block; }
.account-links { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin-top: 24px; }
.account-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.account-section { background: var(--color-white); border: 1px solid rgba(18,18,18,.12); border-radius: 18px; padding: 24px; }
.site-token { background: var(--color-ink); border-radius: 12px; color: var(--color-accent); font-family: monospace; overflow-wrap: anywhere; padding: 16px; }
.site-list { display: grid; gap: 14px; list-style: none; margin: 18px 0 0; padding: 0; }
.site-list li { border-top: 1px solid rgba(18,18,18,.14); padding-top: 14px; }
.plan-badge { border-radius: 999px; font-size: 12px; font-weight: 800; padding: 3px 10px; text-transform: uppercase; }
.plan-badge.plan-free { background: #e0f2df; color: #174c1d; }
.plan-badge.plan-full { background: var(--color-ink); color: var(--color-accent); }
.unlock-paid-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.unlock-paid-form input { background: var(--color-paper); border: 1px solid rgba(18,18,18,.25); border-radius: 10px; flex: 1 1 160px; padding: 10px 12px; }
.unlock-paid-form button { cursor: pointer; flex: 0 0 auto; }
.muted { color: var(--color-muted); }
@media (max-width: 640px) {
  .button-social { width: 100%; }
}