/* Account pages share Eunoia's type, palette and Flow controls. */
.account-page:not([data-account-screen="dashboard"]) { display: flex; flex-direction: column; }
.account-page:not([data-account-screen="dashboard"]) .account-main { flex: 1; display: grid; align-items: center; }
.account-page { min-height: 100svh; position: relative; isolation: isolate; }
.account-atmosphere { position: fixed; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse at 5% 35%, #33308026, transparent 50%), radial-gradient(ellipse at 90% 10%, #a13d6617, transparent 45%); }
/* Blue falls from above; rose and peach rise from below. Feathered edges hide SVG clipping. */
.account-atmosphere .product-ribbons { position: absolute; inset: 0; opacity: .68; filter: saturate(1.22); mask-image: linear-gradient(transparent, #000 15%, #000 85%, transparent); }
.account-atmosphere .product-ribbons img { position: absolute; inset: -22%; width: 144%; height: 144%; max-width: none; object-fit: fill; scale: 1 1; rotate: -8deg; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent), linear-gradient(transparent, #000 12%, #000 78%, transparent); mask-composite: intersect; animation: account-ribbon-orbit 24s linear infinite paused; animation-delay: -7s; }
.account-atmosphere .product-ribbons img:nth-child(2) { scale: 1 1; rotate: -12deg; opacity: .8; animation-duration: 29s; animation-delay: -19s; animation-direction: reverse; }
.account-atmosphere .product-ribbons img:nth-child(3) { rotate: -4deg; translate: 0 -6%; opacity: .9; animation-duration: 34s; animation-delay: -13s; }
.account-page[data-ribbon-motion="running"] .product-ribbons img { animation-play-state: running; }
@keyframes account-ribbon-orbit {
  0%, 100% { transform: translate(-3%, 1%) rotate(-2deg) scale(1.02); }
  25% { transform: translate(1%, -4%) rotate(0deg) scale(1.04); }
  50% { transform: translate(4%, 0) rotate(2deg) scale(1.02); }
  75% { transform: translate(0, 4%) rotate(0deg) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .account-atmosphere .product-ribbons img { animation: none; }
}
.account-header, .account-main, .account-footer { width: min(1180px, calc(100% - 64px)); margin-inline: auto; }
.account-header { min-height: 104px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.account-header .brand { width: 160px; }
.account-header-actions { display: flex; align-items: center; gap: 30px; }
.account-back { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; color: #cbcbe0; }
.account-back .icon { transform: rotate(180deg); width: 16px; }
.account-back:hover { color: white; }
.account-header .language-switch { position: static; }
.account-main { padding-block: clamp(36px, 5vw, 76px); }
.account-auth-layout { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 480px; margin-inline: auto; }
.account-card { border: 1px solid #b0a4d92e; border-radius: 24px; background: #131222e8; padding: clamp(28px, 3.4vw, 44px); box-shadow: 0 24px 80px #03021133; min-width: 0; }
.account-form-heading { margin-bottom: 28px; }
.account-form-heading h1 { font-size: clamp(27px, 2.7vw, 32px); line-height: 1.2; margin: 0; letter-spacing: -.04em; }
.account-form-heading > p { margin-top: 14px; font-size: 14px; line-height: 1.75; }
@font-face { font-family: "Google Sans Login"; src: url("/assets/fonts/google-sans-login.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
.account-google-button { width: 100%; min-height: 44px; padding: 11px 12px; display: flex; align-items: center; justify-content: center; gap: 10px; background: #fff; color: #1f1f1f; border: 1px solid #747775; border-radius: 12px; font: 500 14px/20px "Google Sans Login", Arial, sans-serif; }
.account-google-button img { flex: 0 0 20px; width: 20px; height: 20px; object-fit: contain; }
.account-google-button:hover { background: #f2f2f2; box-shadow: 0 1px 4px #0003; }
.account-google-button:disabled { opacity: .65; cursor: wait; }
.account-auth-divider { display: flex; align-items: center; gap: 12px; margin-block: 22px; font-size: 12px; color: #aaa8c2; }
.account-auth-divider::before, .account-auth-divider::after { content: ""; flex: 1; height: 1px; background: #d0c3ee26; }
.account-oauth-status { margin-top: 16px; font-size: 13px; line-height: 1.7; color: #ddd6ed; }
.account-oauth-status[data-state="error"] { padding-inline-start: 12px; border-inline-start: 2px solid #ff86a6; }
.account-fields { display: grid; gap: 20px; }
.account-field { display: grid; gap: 8px; font-size: 13px; font-weight: 600; color: #e1dfed; }
.account-field input { min-width: 0; width: 100%; height: 48px; padding: 11px 14px; background: #0b0b19; border: 1px solid #716f8a77; border-radius: 10px; color: #f1effa; font: 400 15px var(--font-body); }
.account-field input::placeholder { color: #85839e; }
.account-field input:hover { border-color: #aca4cd99; }
.account-field input:focus-visible { outline-offset: 2px; }
.account-field small { font-weight: 400; color: #aaa8c2; font-size: 12px; }
.account-field small.account-field-error { color: #ff9db6; }
.account-field input[aria-invalid="true"] { border-color: #ff86a6; }
.account-password { display: flex; align-items: center; position: relative; }
.account-password input { padding-right: 84px; }
.account-password button { position: absolute; inset-inline-end: 5px; border: 0; background: none; color: #c9c4f4; padding: 8px 10px; border-radius: 6px; font-size: 12px; min-height: 36px; }
.account-password button:hover { color: white; background: #b3a6e014; }
.account-forgot { text-align: end; margin-top: -6px; font-size: 12px; }
.account-text-link { color: #c5bff9; background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; text-decoration-color: #c5bff94d; text-underline-offset: 4px; }
.account-text-link:hover { color: #fff; text-decoration-color: currentColor; }
.account-submit.button.button-flow { width: 100%; margin-top: 28px; min-height: 50px; padding: 13px 18px; font-size: 14px; justify-content: space-between; }
.account-form-foot { margin-top: 26px; border-top: 1px solid #d0c3ee1a; padding-top: 22px; font-size: 12px; line-height: 1.8; }
.account-form-foot a { margin-inline-start: 4px; white-space: nowrap; }
.account-feedback { margin-top: 20px; border-left: 2px solid #ad9bd5; padding: 10px 0 10px 14px; font-size: 13px; line-height: 1.7; }
.account-feedback p { color: #ddd6ed; }
.account-feedback a { display: inline-block; margin-top: 8px; }
.account-feedback[data-state="error"] { border-left-color: #ff86a6; }
.account-confirm { margin-top: 22px; }
.account-resend-help { font-size: 13px; line-height: 1.7; margin-bottom: 18px; }
.account-form button:disabled, .account-confirm:disabled { cursor: default; opacity: .6; }
.account-scene-icon { border: 1px solid #aba0dd45; border-radius: 14px; width: 52px; height: 52px; display: grid; place-items: center; color: #b5adf7; background: #aea1f00d; margin-bottom: 28px; }
.account-scene-icon .icon { width: 25px; height: 25px; }
.account-inset-note { border-left: 2px solid #a99bbd; padding-left: 14px; margin-bottom: 26px; font-size: 13px; }
.account-card > .button { font-size: 13px; min-height: 48px; padding: 12px 20px; }
.account-email-help { margin-top: 30px; font-size: 12px; }
.account-email-help > button { margin-top: 8px; }
.account-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; padding-block: 24px; font-size: 11px; color: #8f8ca9; }
@media (max-width: 800px) {
  .account-header, .account-main, .account-footer { width: calc(100% - 40px); }
  .account-header { min-height: 86px; gap: 16px; }
  .account-header .brand { width: 136px; }
  .account-header-actions { gap: 16px; }
  .account-main { padding-block: 32px; }
  .account-card { padding: 30px; }
}
@media (max-width: 480px) {
  .account-header, .account-main, .account-footer { width: calc(100% - 32px); }
  .account-header { min-height: 76px; }
  .account-header .brand { width: 112px; }
  .account-header-actions { gap: 12px; }
  .account-back { font-size: 11px; gap: 5px; }
  .account-back .icon { display: none; }
  .account-header .language-switch { padding: 3px; }
  .account-header .language-switch a { width: 30px; height: 30px; font-size: 11px; }
  .account-main { padding-block: 24px; }
  .account-card { padding: 24px 20px; border-radius: 20px; }
  .account-form-heading h1 { font-size: 28px; }
  .account-field input { font-size: 16px; }
  .account-card > .button { width: 100%; }
  .account-footer { font-size: 10px; }
}