/* Connected account views use the existing charcoal / green visual system. */
.live-login .login-form-wrap { max-width: 620px; }
.live-login .login-form-wrap > p { margin-bottom: 30px; }
.live-login .login-art-copy .legal-small { margin-top: 26px; font-size: 10px; }
.account-feedback { min-height: 24px; color: #f6b7a6; font-size: 13px; line-height: 1.5; margin: -4px 0 14px; }
.account-feedback:empty { min-height: 8px; margin-bottom: 8px; }
.account-panel-error { border: 1px solid #875442; border-radius: 10px; padding: 14px 18px; margin: 0 0 24px; }
.account-message { display: flex; gap: 14px; background: var(--soft); border: 1px solid var(--line); padding: 22px; border-radius: 12px; margin: 28px 0 20px; }
.account-message > svg { color: var(--brand); margin-top: 2px; }
.account-message h2 { font-family: var(--font); font-size: 18px; letter-spacing: -.02em; line-height: 1.4; }
.account-message p { font-size: 13px; margin-top: 10px; color: var(--muted); }
.account-code-sent { font-size: 14px; color: var(--muted); margin: 0 0 28px; overflow-wrap: anywhere; }
.account-code-sent strong { color: var(--ink); font-weight: 500; }
#login-code { letter-spacing: .2em; font-size: 23px; }
.account-code-actions { display: flex; gap: 20px; justify-content: space-between; align-items: center; margin-top: 24px; font-size: 12px; }
.account-code-actions button:disabled { color: var(--muted); cursor: default; opacity: .65; }
.account-passwordless { text-align: center; margin-top: 17px; }
.account-service-note { font-size: 11px; color: var(--muted); margin: 25px 0 0 !important; line-height: 1.65; }
.live-login button:disabled { opacity: .55; cursor: wait; }
.account-loading, .account-check { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--muted); }
.account-loading { min-height: 70vh; }
.account-check { min-height: 150px; font-size: 13px; }
.account-spinner { width: 22px; height: 22px; flex: 0 0 22px; border: 2px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: account-spin .85s linear infinite; }
@keyframes account-spin { to { transform: rotate(360deg); } }
.account-email { overflow-wrap: anywhere; }
.portal-user .account-email { max-width: 280px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-signout { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); padding: 20px 0 0; }
.account-signout:hover { color: var(--brand); }
.account-signout:disabled { opacity: .55; cursor: wait; }
.account-credit-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
.account-credit-stats .stat-number { overflow-wrap: anywhere; }
.account-coming-soon { padding: 60px 36px; border: 1px solid var(--line); background: var(--white); border-radius: 14px; margin-bottom: 30px; }
.account-coming-soon > svg { color: var(--brand); margin-bottom: 28px; }
.account-coming-soon h2 { font-size: clamp(23px, 3vw, 34px); line-height: 1.25; max-width: 650px; }
.account-coming-soon p { color: var(--muted); font-size: 14px; max-width: 590px; margin: 20px 0 28px; }
.account-readonly-field { margin-top: 26px; }
.account-readonly-field input[readonly] { background: var(--soft); color: var(--ink); cursor: text; }
@media (max-width: 700px) {
  .live-login .login-form-wrap { padding: 36px 24px 50px; }
  .account-code-actions { align-items: flex-start; gap: 18px; flex-direction: column; }
  .account-coming-soon { padding: 36px 24px; }
  .account-credit-stats .stat-label { font-size: 11px; }
  .account-credit-stats .stat-sub { font-size: 10px; }
  .account-credit-stats .stat-card { padding: 23px 17px; }
  .live-account .portal-user { margin-left: auto; }
  .live-account .portal-header .breadcrumb { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .account-spinner { animation: none; } }