.account-button { min-height: 40px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid #e5c3c2; border-radius: 999px; color: #9c202b; background: rgba(255,250,250,.9); font-size: 12px; font-weight: 700; cursor: pointer; }
.account-sheet [hidden] { display: none !important; }
.account-button i { width: 8px; height: 8px; border-radius: 50%; background: #d69b35; box-shadow: 0 0 0 4px rgba(214,155,53,.12); }
.account-button.signed-in i { background: #36a38e; box-shadow: 0 0 0 4px rgba(54,163,142,.12); }
.account-button.syncing i { animation: syncPulse 1s ease infinite; }
@keyframes syncPulse { 50% { opacity: .35; transform: scale(.75); } }

.account-backdrop { position: fixed; inset: 0; z-index: 2000; display: none; place-items: center; padding: 20px; background: rgba(56,7,13,.48); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.account-backdrop.open { display: grid; }
.account-sheet { position: relative; width: min(430px,100%); max-height: min(760px,92vh); overflow: auto; padding: 32px; border: 1px solid #efcfcd; border-radius: 24px; background: #fffafa; box-shadow: 0 30px 90px rgba(65,8,15,.3); }
.account-close { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; border: 1px solid #ead0ce; border-radius: 50%; color: #8f555a; background: #fff; font-size: 24px; cursor: pointer; }
.account-logo { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 15px; color: #fff; background: linear-gradient(135deg,#cf2936,#78111d); font-weight: 900; box-shadow: 0 10px 24px rgba(152,21,33,.2); }
.account-sheet h2 { margin: 7px 0 8px; font-size: 28px; }
.account-intro { margin: 0 0 23px; color: var(--muted); font-size: 14px; line-height: 1.65; }
.phone-auth-form { display: grid; gap: 16px; }
.phone-auth-form label { color: #785a5d; font-size: 13px; font-weight: 700; }
.phone-field, .password-field { min-height: 50px; display: flex; align-items: center; margin-top: 7px; overflow: hidden; border: 1px solid #e3ccca; border-radius: 11px; background: #fff; }
.phone-field:focus-within, .password-field:focus-within { border-color: #c62c38; box-shadow: 0 0 0 3px rgba(198,44,56,.1); }
.phone-field span { align-self: stretch; display: grid; place-items: center; padding: 0 13px; border-right: 1px solid #ead8d6; color: #9b242e; background: #fff1ef; font-weight: 800; }
.phone-field input, .password-field input { min-width: 0; flex: 1; padding: 13px; border: 0; outline: 0; background: transparent; font-size: 16px; }
.password-field button { align-self: stretch; padding: 0 13px; border: 0; color: #a0242e; background: transparent; cursor: pointer; font-size: 12px; font-weight: 700; }
.auth-actions { display: grid; gap: 10px; margin-top: 3px; }
.auth-actions button, .account-signed-in button { width: 100%; min-height: 48px; }
.cloud-unconfigured { margin: 0 0 18px; padding: 14px; border: 1px solid #ecc98e; border-radius: 12px; color: #8a4a0e; background: #fff9eb; }
.cloud-unconfigured strong { font-size: 14px; }
.cloud-unconfigured p { margin: 5px 0 0; font-size: 12px; line-height: 1.55; }
.account-signed-in { display: grid; gap: 11px; }
.account-signed-in > span { color: var(--muted); font-size: 12px; }
.account-signed-in > strong { margin-top: -6px; font-size: 22px; }
.sync-state { display: flex; align-items: center; gap: 9px; margin: 6px 0; padding: 13px; border-radius: 11px; color: #397067; background: #e9f5f1; font-size: 12px; }
.sync-state i { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #37a48f; }
.sync-state.error { color: #9b4a23; background: #fff1e6; }
.sync-state.error i { background: #d68d35; }
.account-note { margin: 20px 0 0; color: #9b7d80; font-size: 11px; line-height: 1.6; }

@media (max-width: 760px) {
  .account-button { margin-left: auto; padding: 8px 10px; }
  .account-button span { max-width: 74px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .capture-btn { display: none; }
  .account-backdrop { align-items: end; padding: 0; }
  .account-sheet { width: 100%; max-height: calc(94vh - env(safe-area-inset-top)); padding: 27px 20px calc(25px + env(safe-area-inset-bottom)); border-radius: 25px 25px 0 0; animation: accountUp .24s ease both; }
  @keyframes accountUp { from { transform: translateY(30px); opacity: .6; } }
  .account-sheet h2 { font-size: 25px; }
}