/* =========================================================
   KIARAHUB — Login & Sign Up
   Modal + header account menu. Reuses the theme's existing
   design tokens (--kh-*) so it matches light/dark mode with
   no extra config.
   ========================================================= */

/* ---------- Header account area ---------- */
.kh-account{
  position:relative;
}
.kh-account-trigger{
  display:flex;
  align-items:center;
  gap:.5em;
  background:none;
  border:0;
  cursor:pointer;
  padding:.25em .4em .25em .25em;
  border-radius:999px;
  font-family:var(--kh-font-body);
  font-weight:600;
  font-size:.88rem;
  color:var(--kh-ink);
  transition:background-color .15s ease;
}
.kh-account-trigger:hover{ background:var(--kh-teal-tint); }
.kh-account-avatar{
  width:32px; height:32px; border-radius:50%;
  object-fit:cover;
  border:1.5px solid var(--kh-line);
  display:block;
}
.kh-account-name{ max-width:11ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kh-account-caret{ width:14px; height:14px; opacity:.6; transition:transform .15s ease; flex:none; }
.kh-account.is-open .kh-account-caret{ transform:rotate(180deg); }

.kh-account-menu{
  position:absolute;
  right:0; top:calc(100% + 10px);
  min-width:200px;
  background:var(--kh-paper-raised);
  border:1px solid var(--kh-line);
  border-radius:var(--kh-radius-sm);
  box-shadow:var(--kh-shadow-lg);
  padding:.4em;
  z-index:60;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s ease;
}
.kh-account.is-open .kh-account-menu{
  opacity:1; visibility:visible; transform:translateY(0);
}
.kh-account-menu a,
.kh-account-menu button{
  display:block; width:100%; text-align:left;
  background:none; border:0; cursor:pointer;
  font-family:var(--kh-font-body); font-size:.88rem; color:var(--kh-ink);
  padding:.6em .7em; border-radius:6px;
}
.kh-account-menu a:hover,
.kh-account-menu button:hover{ background:var(--kh-teal-tint); color:var(--kh-ink); }
.kh-account-menu hr{ border:0; border-top:1px solid var(--kh-line); margin:.35em .2em; }
.kh-avatar-upload-status{
  font-size:.76rem;
  color:var(--kh-teal);
  padding:0 .7em;
  margin:-.2em 0 .3em;
}
.kh-avatar-upload-status.is-error{ color:var(--kh-coral); }
.kh-avatar-upload-status[hidden]{ display:none; }

/* ---------- Overlay + modal ---------- */
.kh-auth-overlay{
  position:fixed; inset:0;
  background:rgba(8,14,30,.55);
  backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  z-index:1000;
}
.kh-auth-overlay[hidden]{ display:none; }

.kh-auth-modal{
  position:relative;
  width:100%; max-width:400px;
  max-height:90vh; overflow-y:auto;
  background:var(--kh-paper-raised);
  border-radius:var(--kh-radius-lg);
  box-shadow:var(--kh-shadow-lg);
  padding:2rem 1.75rem 1.75rem;
  animation:kh-auth-pop .22s var(--kh-ease);
}
@keyframes kh-auth-pop{
  from{ opacity:0; transform:translateY(8px) scale(.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

.kh-auth-close{
  position:absolute; top:.9rem; right:.9rem;
  width:32px; height:32px; border-radius:50%;
  border:0; background:var(--kh-paper); color:var(--kh-ink-soft);
  font-size:1.3rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.kh-auth-close:hover{ background:var(--kh-line); color:var(--kh-ink); }

.kh-auth-tabs{
  display:flex; gap:.4em;
  background:var(--kh-paper);
  border-radius:999px;
  padding:4px;
  margin:0 0 1.1em;
}
.kh-auth-tab{
  flex:1;
  border:0; background:none; cursor:pointer;
  padding:.55em 0;
  border-radius:999px;
  font-family:var(--kh-font-body); font-weight:600; font-size:.85rem;
  color:var(--kh-ink-soft);
  transition:background-color .15s ease, color .15s ease;
}
.kh-auth-tab.is-active{
  background:var(--kh-paper-raised);
  color:var(--kh-ink);
  box-shadow:0 1px 4px rgba(22,35,63,.12);
}

.kh-auth-heading{
  font-size:1.4rem;
  margin:0 0 1.1em;
}
.kh-auth-tabs + .kh-auth-heading{ display:none; }

.kh-auth-alert{
  background:var(--kh-coral-tint);
  color:var(--kh-coral);
  border-radius:var(--kh-radius-sm);
  padding:.7em .9em;
  font-size:.85rem;
  margin:0 0 1em;
}
.kh-auth-alert[hidden]{ display:none; }
.kh-auth-alert.is-success{
  background:var(--kh-teal-tint);
  color:var(--kh-teal);
}

.kh-google-btn-wrap{
  display:flex; justify-content:center;
  min-height:40px;
  margin:0 0 1.1em;
}

.kh-auth-divider{
  display:flex; align-items:center; gap:.75em;
  color:var(--kh-ink-soft); font-size:.78rem;
  margin:0 0 1.1em;
}
.kh-auth-divider::before,
.kh-auth-divider::after{
  content:""; flex:1; height:1px; background:var(--kh-line);
}

.kh-auth-form[hidden]{ display:none; }
.kh-field{
  display:block;
  margin:0 0 .9em;
}
.kh-field span{
  display:block;
  font-size:.78rem; font-weight:600;
  color:var(--kh-ink-soft);
  margin:0 0 .35em;
}
.kh-field input{
  width:100%;
  font-family:var(--kh-font-body); font-size:.94rem;
  padding:.65em .8em;
  border:1.5px solid var(--kh-line);
  border-radius:var(--kh-radius-sm);
  background:var(--kh-paper);
  color:var(--kh-ink);
  transition:border-color .15s ease;
}
.kh-field input:focus{
  outline:none;
  border-color:var(--kh-teal);
}

.kh-field-row{
  display:flex; align-items:center; justify-content:space-between;
  font-size:.82rem;
  margin:0 0 1.2em;
}
.kh-checkbox{ display:flex; align-items:center; gap:.4em; color:var(--kh-ink-soft); cursor:pointer; }
.kh-forgot-link{ color:var(--kh-teal); }
html[data-theme="dark"] .kh-forgot-link{ color:var(--kh-teal-bright); }

.kh-auth-terms{
  font-size:.76rem;
  color:var(--kh-ink-soft);
  margin:0 0 1.1em;
}

.kh-auth-submit{
  width:100%;
  justify-content:center;
  border:0;
  font-size:.94rem;
}
.kh-auth-submit[disabled]{ opacity:.65; cursor:default; }

@media (max-width:480px){
  .kh-auth-modal{ padding:1.6rem 1.25rem 1.4rem; }
}