/* Account gate visibility follows the authentication state on the body. */
body.auth-checking .app-shell,
body.auth-required .app-shell {
  display: none;
}

body.account-syncing .app-shell,
body.account-syncing .mobile-nav {
  visibility: hidden;
}

body.auth-checking #accountGate,
body.auth-required #accountGate {
  display: flex;
}

#accountGate[hidden] {
  display: none !important;
}

/* Full-page backdrop and centered account panel. */
#accountGate {
  min-height: 100vh;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(ellipse at top left, #e8eee5 0, transparent 52%), var(--paper);
}

.account-card {
  width: min(100%, 430px);
  background: #fff;
  border: 1px solid #e9eae4;
  border-radius: 18px;
  padding: 35px;
  box-shadow: var(--shadow);
}

/* Brand and introductory copy. */
.account-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 34px;
  font: 800 20px Manrope, sans-serif;
  letter-spacing: -0.8px;
}

.account-brand .brand-mark {
  flex: none;
}

.account-card h1 {
  margin: 8px 0;
  font: 700 26px Manrope, sans-serif;
  letter-spacing: -0.8px;
}

.account-intro {
  margin: 0 0 23px;
  color: #808980;
  line-height: 1.6;
  font-size: 13px;
}

/* Form layout, field labels, and input focus state. */
.account-form {
  display: grid;
  gap: 15px;
}

.account-field {
  display: grid;
  gap: 7px;
}

.account-field[hidden] {
  display: none;
}

.account-field label {
  font-size: 12px;
  font-weight: 700;
  color: #536257;
}

.account-field input {
  width: 100%;
  min-height: 43px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: 400 13px 'DM Sans', sans-serif;
  color: var(--ink);
  background: #fff;
}

.account-field input:focus {
  outline: 3px solid #e6eee5;
  border-color: #789273;
}

/* Submit and mode-switch controls. */
.account-submit {
  width: 100%;
  margin-top: 3px;
  min-height: 43px;
  font-size: 13px;
}

.account-submit:disabled {
  opacity: 0.7;
  cursor: wait;
}

.account-switch {
  width: 100%;
  padding: 15px 4px 2px;
  border: 0;
  background: transparent;
  color: var(--green);
  font: 600 12px 'DM Sans', sans-serif;
  cursor: pointer;
}

/* Inline feedback and the privacy note below the form. */
.account-status {
  min-height: 18px;
  margin: 0;
  color: #9e4e3b;
  font-size: 12px;
  line-height: 1.5;
}

.account-privacy {
  border-top: 1px solid var(--line);
  padding-top: 16px;
  margin: 17px 0 0;
  color: #89928a;
  font-size: 10px;
  line-height: 1.55;
}

/* Sign-out control shown alongside the signed-in profile. */
.account-logout {
  margin-left: auto;
  border: 0;
  background: transparent;
  padding: 5px 7px;
  color: #768078;
  font: 500 10px 'DM Sans', sans-serif;
  cursor: pointer;
}

.account-logout:hover {
  color: var(--green-dark);
}

.privacy-status-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:16px; }
.privacy-status-grid > div { display:grid; gap:4px; padding:12px; border:1px solid var(--line); border-radius:10px; }
.privacy-status-grid strong { font-size:11px; }
.privacy-status-grid span,.account-delete-form p { color:#808980; font-size:11px; line-height:1.5; }
.privacy-actions { display:flex; flex-wrap:wrap; gap:9px; margin-top:15px; }
.button.danger { color:#8d4537; border-color:#dfc4bc; }
.account-delete-form { margin-top:17px; padding:15px; border:1px solid #dfc4bc; border-radius:11px; }
.account-delete-form label { display:block; margin:10px 0 6px; font-size:11px; font-weight:700; }
.account-delete-form input { width:100%; min-height:42px; padding:0 11px; border:1px solid var(--line); border-radius:8px; }
@media (max-width:520px) { .privacy-status-grid { grid-template-columns:1fr; } }

/* Keep the card compact on narrow screens. */
@media (max-width: 500px) {
  .account-card {
    padding: 27px 22px;
  }
}