.account-hero{
  padding:5rem 1.5rem 3rem;
  background:var(--bg-soft);
  text-align:center;
}
.account-hero-inner{max-width:560px;margin:0 auto;}
.account-hero-sub{color:var(--ink-500);font-size:1.02rem;margin:0 auto;max-width:440px;}

.account-section{
  max-width:560px;
  margin:0 auto;
  padding:3rem 1.5rem 6rem;
}

.account-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:2rem;
}

.account-tabs{
  display:flex;
  gap:0.4rem;
  margin-bottom:1.6rem;
  border-bottom:1px solid var(--line);
}
.account-tab{
  padding:0.7rem 1rem;
  border:none;
  background:none;
  font-family:var(--font-body);
  font-size:0.95rem;
  font-weight:600;
  color:var(--ink-400);
  cursor:pointer;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
}
.account-tab.is-active{color:var(--blue-600);border-bottom-color:var(--blue-500);}
.account-tab-link{text-decoration:none;display:inline-block;}

.account-photo-picker{
  display:flex;
  align-items:center;
  gap:1.1rem;
  flex-direction:row;
}
.account-photo-preview{
  width:64px;height:64px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid #fff;
  box-shadow:0 0 0 1px var(--line), var(--shadow-sm);
  background:var(--bg-panel);
  flex-shrink:0;
}
.account-photo-picker input[type="file"]{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.account-photo-btn{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.6rem 1rem;
  border-radius:9px;
  border:1px solid var(--line-strong);
  background:var(--blue-50);
  color:var(--blue-700);
  font-family:var(--font-body);
  font-size:0.85rem;
  font-weight:600;
  cursor:pointer;
  transition:border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
}
.account-photo-btn:hover{
  border-color:var(--blue-500);
  background:var(--blue-100);
  color:var(--blue-600);
  transform:translateY(-1px);
}
.account-photo-btn svg{flex-shrink:0;}
.account-photo-filename{
  font-size:0.8rem;
  color:var(--ink-400);
  max-width:160px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.account-form{display:flex;flex-direction:column;gap:1.1rem;}
.account-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;}
@media (max-width:520px){.account-form-grid{grid-template-columns:1fr;}}

.account-label{
  display:flex;
  flex-direction:column;
  gap:0.4rem;
  font-family:var(--font-body);
  font-size:0.85rem;
  font-weight:600;
  color:var(--ink-700);
}
.account-label input,
.account-label textarea{
  font-family:var(--font-body);
  font-size:0.95rem;
  font-weight:400;
  padding:0.7rem 0.9rem;
  border-radius:8px;
  border:1px solid var(--line-strong);
  color:var(--ink-900);
  background:#fff;
}
.account-label input:focus,
.account-label textarea:focus{
  outline:none;
  border-color:var(--blue-500);
  box-shadow:0 0 0 3px var(--blue-100);
}

.account-checkbox{
  display:flex;
  align-items:center;
  gap:0.6rem;
  font-size:0.88rem;
  color:var(--ink-700);
}

.account-hint{font-size:0.8rem;color:var(--ink-400);margin:0;}
.account-error{font-size:0.85rem;color:#c0392b;margin:0;min-height:1.1em;}

.account-submit{align-self:flex-start;}

.account-profile-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1.6rem;
  flex-wrap:wrap;
}
.account-welcome{font-size:0.9rem;color:var(--ink-500);margin:0;}

/* OAuth sign-in buttons */
.oauth-buttons{
  display:flex;
  flex-direction:column;
  gap:0.7rem;
  margin-bottom:1.4rem;
}
.oauth-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.65rem;
  width:100%;
  padding:0.7rem 1rem;
  border-radius:9px;
  border:1px solid var(--line-strong);
  background:#fff;
  color:var(--ink-700);
  font-family:var(--font-body);
  font-size:0.9rem;
  font-weight:600;
  cursor:pointer;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.oauth-btn:hover{
  border-color:var(--blue-400);
  box-shadow:var(--shadow-sm);
  transform:translateY(-1px);
}
.oauth-btn:disabled{opacity:0.6;cursor:default;transform:none;}

.oauth-divider{
  display:flex;
  align-items:center;
  gap:0.8rem;
  margin:0 0 1.3rem;
  color:var(--ink-400);
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.oauth-divider::before,
.oauth-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--line);
}
.oauth-note{margin:-0.6rem 0 1.3rem;}