/* Account page styles: reuse variables from styles.css */
.account-hero { background: var(--surface); border-bottom: 1px solid var(--divider); }
.account-hero h1 { font-size: 44px; letter-spacing: -0.02em; margin: 0 0 8px; }
.muted { color: var(--text-secondary); }

.account-card { max-width: 560px; margin: 0 auto; }
.account-center { max-width: 560px; margin: 0 auto; }
.account-card h3 { margin: 0 0 12px; font-size: 22px; }
.center { text-align: center; }
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 12px; padding: 8px 0; border-top: 1px solid var(--divider); }
.kv:first-of-type { border-top: 0; }
.k { color: var(--text-secondary); }
.v { font-weight: 600; }
.btn-row { margin-top: 16px; display: flex; justify-content: center; }
.btn-col { margin-top: 16px; display: grid; gap: 12px; max-width: 560px; margin-left: auto; margin-right: auto; }
.btn.danger { --_bg: #b94e4b; }

/* Clerk component wrapper tweaks */
#clerk-signin { display: block; max-width: 720px; margin: 0 auto; padding: 0 var(--space-6); }
/* Make inner form left-aligned within the wider wrapper */
#clerk-signin .cl-rootBox, 
#clerk-signin .cl-cardBox, 
#clerk-signin .cl-card { width: 100%; max-width: 560px; margin: 0; }

/* Sign-in look to match reference (large pill buttons) */
:root { --signin-green: #214d2f; --signin-green-600: #1a3f27; --signin-green-200: #cfe7d8; }

.signin-hero { text-align: center; margin-bottom: 24px; }
.signin-hero h1 { font-size: 56px; letter-spacing: -0.02em; margin: 0 0 8px; color: #214d2f; }
.signin-hero p { margin: 0; color: var(--text-secondary); }

/* Global Clerk class overrides per docs: cl-* classes before the lock icon are stable */
/* Remove any extra rounded card/box from Clerk */
.cl-cardBox { box-shadow: none !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; }
.cl-card { box-shadow: none !important; border: 0 !important; background: transparent !important; border-radius: 0 !important; }
.cl-headerTitle { font-size: 28px; font-weight: 700; color: #214d2f; }
.cl-headerSubtitle { color: var(--text-secondary); }
.cl-socialButtons { gap: 12px; }
.cl-socialButtonsBlockButton { height: 56px; border-radius: 9999px; font-weight: 600; }
.cl-socialButtonsBlockButton[data-provider="apple"] { background: #000; color: #fff; }
.cl-socialButtonsBlockButton[data-provider="google"] { background: #fff; color: #0e1116; border: 1px solid var(--border); }
.cl-socialButtonsBlockButton[data-provider="email"] { background: var(--signin-green); color: #fff; }
.cl-formFieldInput { height: 56px; border-radius: 9999px; background: var(--signin-green-200); border: 1px solid transparent; }
.cl-formFieldInput:focus { outline: none; border-color: var(--signin-green); box-shadow: 0 0 0 3px rgba(33,77,47,0.2); }
.cl-formButtonPrimary { height: 56px; border-radius: 9999px; background: var(--signin-green); font-weight: 600; }
.cl-formButtonPrimary:hover { background: var(--signin-green-600); }
.cl-footerAction, .cl-footerActionLink { color: var(--signin-green); }
.cl-dividerLine { background: var(--divider); }
.cl-dividerText { color: var(--text-secondary); }