.account-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:1.2rem;
  align-items:start;
}

.account-panel{
  background:rgba(243,234,220,.74);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:clamp(1.15rem,2vw,1.45rem);
}

.account-panel h2,
.account-panel h3{
  margin-bottom:.8rem;
}

.account-panel h2{
  color:var(--color-1);
}

.account-panel h3{
  color:var(--color-1);
  font-size:1.35rem;
}

.account-meta{
  display:grid;
  gap:.35rem;
  margin:.8rem 0 1rem;
}

.account-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.65rem;
  margin:.2rem 0 1rem;
}

.account-stat{
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(255,255,255,.42);
  padding:.75rem;
}

.account-stat strong{
  display:block;
  color:var(--color-1);
  font-family:"Cormorant Garamond",serif;
  font-size:1.8rem;
  line-height:1;
  font-weight:500;
}

.account-stat span{
  display:block;
  margin-top:.2rem;
  color:var(--text-soft);
  font-size:.86rem;
}

.account-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  margin:0 0 1.2rem;
}

.account-list{
  display:grid;
  gap:.75rem;
  margin-top:.8rem;
}

.booking-item{
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:.9rem;
  background:var(--color-2-light);
}

.booking-item.is-cancelled{
  opacity:.68;
}

.booking-item strong{
  color:var(--dark);
  font-weight:500;
}

.booking-item .booking-title{
  display:flex;
  justify-content:space-between;
  gap:.6rem;
  align-items:flex-start;
}

.booking-item .booking-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem;
  margin-top:.75rem;
}

.booking-item .booking-actions a{
  color:var(--clay);
  text-decoration:underline;
  text-underline-offset:3px;
}

.booking-status{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  border-radius:999px;
  padding:.16rem .55rem;
  margin-top:.45rem;
  font-size:.78rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  background:rgba(169,123,122,.12);
  color:var(--clay);
}

.booking-status.is-confirmed,
.booking-status.is-paid{
  background:rgba(81,111,88,.13);
  color:#516f58;
}

.booking-status.is-cancelled,
.booking-status.is-failed{
  background:rgba(137,82,61,.13);
  color:#89523d;
}

.account-danger{
  margin-top:1.4rem;
  padding-top:1.2rem;
  border-top:1px solid var(--line);
}

.account-danger h3{
  color:var(--color-1);
}

.btn-danger{
  background:transparent;
  border:1px solid var(--clay);
  color:var(--clay);
}

.btn-danger:hover{
  background:var(--clay);
  color:var(--button-text);
}

.auth-tabs{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  margin-bottom:1rem;
}

.auth-tab{
  border:1px solid var(--line);
  background:var(--white);
  color:var(--dark);
  border-radius:6px;
  padding:.65rem .9rem;
  cursor:pointer;
  font:inherit;
}

.auth-tab.active{
  background:var(--clay);
  color:var(--button-text);
  border-color:var(--clay);
}

.auth-pane{display:none}
.auth-pane.active{display:grid;gap:.9rem}

.auth-card{
  width:min(100%,520px);
  margin:0 auto;
  padding:clamp(1.35rem,4vw,2.2rem);
  background:transparent;
  border:0;
  box-shadow:none;
}

#authRoot{
  min-height:calc(100svh - 72px);
  display:flex;
  align-items:center;
  padding:clamp(6rem,12vh,8rem) 0 clamp(3rem,7vh,5rem);
}

.auth-title,
.auth-card h2{
  margin:0 0 1.5rem;
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(2rem,4vw,2.6rem);
  line-height:1.05;
  font-weight:500;
  text-align:center;
  color:var(--color-1);
}

.auth-title{
  display:none;
}

.auth-title.active{
  display:block;
}

.auth-card .field{
  gap:.45rem;
}

.auth-card label{
  font-size:.94rem;
  color:var(--dark);
}

.auth-card input{
  height:52px;
  border-color:var(--accent);
  border-radius:8px;
  background:rgba(243,234,220,.78);
  font-size:1rem;
}

.auth-card input::placeholder{
  color:#8a837e;
}

.auth-link{
  width:fit-content;
  border:0;
  background:transparent;
  color:var(--clay);
  font:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
  padding:0;
}

.auth-submit,
.auth-outline{
  width:100%;
  min-height:58px;
  border-radius:8px;
  font-size:1rem;
}

.auth-submit{
  margin-top:.6rem;
  background:var(--clay);
}

.auth-submit:hover{
  background:var(--clay-dark);
}

.auth-divider{
  display:none;
  align-items:center;
  gap:.7rem;
  margin:2.1rem 0 1.8rem;
  color:var(--text-soft);
  text-transform:uppercase;
  font-weight:500;
}

.auth-divider.active{
  display:flex;
}

.auth-divider::before,
.auth-divider::after{
  content:"";
  height:1px;
  flex:1;
  background:var(--line);
}

.auth-switch{
  display:none;
  text-align:center;
}

.auth-switch.active{
  display:block;
}

.auth-switch h2{
  margin-bottom:1.4rem;
}

.auth-outline{
  border:1px solid var(--clay);
  background:transparent;
  color:var(--clay);
}

.auth-outline:hover{
  background:var(--clay);
  color:var(--button-text);
}

.auth-pane h2{
  margin-bottom:.5rem;
}

.auth-pane .auth-link{
  justify-self:center;
  margin-top:.35rem;
}

@media (max-width:820px){
  .account-grid{grid-template-columns:1fr}
  .account-stats{grid-template-columns:1fr}
}

@media (max-width:560px){
  #authRoot{
    align-items:flex-start;
    min-height:auto;
    padding:5.5rem 0 2.3rem;
  }

  .auth-card{
    padding-inline:.2rem;
  }
}