/* Community account pages (Google sign-in, signup, my page), laid out with the VK components. */
.account-wrap { min-height: 60vh; background: var(--vk-gray-5); padding: clamp(32px, 6vw, 80px) 16px; }
.account-card { max-width: 520px; margin: 0 auto; border: 1px solid var(--vk-gray-20); border-radius: var(--vk-radius-xl); background: #fff; padding: clamp(24px, 4vw, 40px); box-shadow: var(--vk-shadow-md); }
.account-kicker { margin: 0; color: var(--vk-primary-60); font-size: 13px; font-weight: 700; letter-spacing: .06em; overflow-wrap: anywhere; }
.account-card h1 { margin: 8px 0 12px; font-size: clamp(26px, 4vw, 32px); line-height: 1.3; }
.account-card h2 { margin: 0 0 8px; font-size: 19px; }
.account-card p { margin: 0 0 12px; color: var(--vk-gray-70); font-size: 16px; line-height: 1.65; }
.account-card form { margin: 20px 0 0; }
.account-card label { display: block; margin: 16px 0 8px; color: var(--vk-gray-90); font-size: 15px; font-weight: 700; }
.account-card label:first-child { margin-top: 0; }
.account-card input { display: block; width: 100%; min-height: 52px; border: 1px solid var(--vk-gray-50); border-radius: var(--vk-radius-md); background: #fff; padding: 0 14px; color: var(--vk-gray-90); font: inherit; outline: none; }
.account-card input:focus { border-color: var(--vk-primary-50); box-shadow: 0 0 0 3px var(--vk-primary-10); }
.account-card input[readonly] { background: var(--vk-gray-5); color: var(--vk-gray-70); }
.account-card form > .vk-btn { width: 100%; margin-top: 16px; }
.account-primary, .account-secondary { display: flex; width: 100%; min-height: 52px; align-items: center; justify-content: center; margin-top: 16px; border: 1px solid var(--vk-primary-50); border-radius: var(--vk-radius-md); font: inherit; font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer; }
.account-primary { background: var(--vk-primary-50); color: #fff; }
.account-primary:hover { border-color: var(--vk-primary-70); background: var(--vk-primary-70); }
.account-secondary { background: #fff; color: var(--vk-primary-60); }
.account-secondary:hover { background: var(--vk-primary-5); }
.account-text-button { border: 0; background: none; padding: 0; color: var(--vk-gray-70); font-size: 15px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.account-consent, .account-help { color: var(--vk-gray-70); font-size: 14px; }
.account-card .account-consent, .account-card .account-help { font-size: 14px; }
.account-card .account-consent { margin-top: 16px; }
.account-consent a { color: var(--vk-primary-60); text-decoration: underline; }
.account-error { border: 1px solid var(--vk-danger-20); border-left: 4px solid var(--vk-danger-60); border-radius: var(--vk-radius-md); background: var(--vk-danger-5); padding: 12px 14px; }
.account-card .account-error { color: var(--vk-gray-90); font-size: 15px; }
.account-required { color: var(--vk-danger-60); font-size: 13px; }
.account-optional { color: var(--vk-gray-50); font-size: 13px; font-weight: 400; }
.account-details { margin: 20px 0; }
.account-details div { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--vk-gray-10); padding: 12px 0; font-size: 15px; }
.account-details dt { color: var(--vk-gray-70); }
.account-details dd { margin: 0; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.account-divider { height: 1px; margin: 32px 0; background: var(--vk-gray-20); }
.account-card .vk-alert { margin-bottom: 16px; }
.account-card .vk-field-error { margin: 10px 0 0; }

/* Sign-in page */
.account-signin .vk-btn--google { margin-top: 24px; }
.account-points { display: grid; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.account-points li { display: flex; gap: 10px; color: var(--vk-gray-70); font-size: 15px; line-height: 1.55; }
.account-points li::before { flex: none; color: var(--vk-primary-50); font-weight: 700; content: "✓"; }
.account-note { margin-top: 24px; border-radius: var(--vk-radius-md); background: var(--vk-gray-5); padding: 14px 16px; }
.account-card .account-note p { margin: 0; font-size: 14px; }
.account-card .account-note p + p { margin-top: 8px; }
.account-note a { color: var(--vk-primary-60); font-weight: 700; }

/* My page: a linked account row */
.account-linked { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--vk-gray-20); border-radius: var(--vk-radius-md); padding: 14px 16px; }
.account-linked b { display: block; font-size: 16px; }
.account-linked span { color: var(--vk-gray-70); font-size: 14px; }
.account-linked .vk-btn { flex: none; }
.account-card form + .account-error, .account-card form + .account-help, .account-card form + .account-consent { margin-top: 12px; }