/* ============================================================
   SOULFULSYNC AUTH — RESET PASSWORD (ECOSYSTEM PERFECT BUILD)
   - Usa SOLO variables globales del tema
   - Light/Dark 100% coherente con base.css
=========================================================== */

/* ------------------------------
   WRAPPER
------------------------------ */
.sse-reset-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 40px 16px;

  background: var(--ss-bg);
  background-image: var(--ss-grad-hero);
  background-size: cover;
  background-repeat: no-repeat;

  transition: background var(--ss-transition), color var(--ss-transition);
}

/* LIGHT MODE → fondo limpio */
html[data-theme="light"] .sse-reset-wrapper {
  background: var(--ss-bg);
  background-image: none;
}

/* DARK MODE → cinematic gradient coherente */
html[data-theme="dark"] .sse-reset-wrapper {
  background: var(--ss-bg);
  background-image: var(--ss-grad-hero);
}

/* ------------------------------
   CARD
------------------------------ */
.sse-reset-card {
  background: var(--ss-card);
  border: 1px solid var(--ss-border);
  border-radius: var(--ss-radius-lg);
  padding: 45px 50px;
  max-width: 430px;
  width: 100%;
  text-align: center;
  box-shadow: var(--ss-shadow);
  transition: background var(--ss-transition), border var(--ss-transition);
}

/* Dark mode — ligero blur premium */
html[data-theme="dark"] .sse-reset-card {
  backdrop-filter: blur(10px);
}

/* ------------------------------
   HEADER
------------------------------ */
.sse-avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  margin-bottom: 14px;
  filter: var(--ss-glow);
}

.sse-reset-header h1 {
  font-size: 24px;
  font-weight: 700;
  color: var(--ss-ink);
  margin: 0 0 6px;
}

.sse-reset-header p {
  color: var(--ss-muted);
  font-size: 14.5px;
  margin-bottom: 24px;
}

/* ------------------------------
   FORM
------------------------------ */
.sse-form label {
  display: block;
  text-align: left;
  font-weight: 600;
  color: var(--ss-ink);
  margin-bottom: 6px;
  font-size: 14px;
}

.sse-form input {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--ss-radius);
  border: 1px solid var(--ss-border);
  background: var(--ss-bg-soft);
  color: var(--ss-ink);
  font-size: 15px;
  margin-bottom: 18px;
  transition: background var(--ss-transition), border var(--ss-transition);
}

.sse-form input:focus {
  border-color: var(--ss-brand);
  background: var(--ss-card-soft);
}

/* ------------------------------
   SUBMIT BUTTON
------------------------------ */
#sse-reset-submit {
  width: 100%;
  background: linear-gradient(90deg, var(--ss-brand), #2f80ed);
  color: #ffffff;
  padding: 14px;
  border: none;
  border-radius: var(--ss-radius);
  font-weight: 600;
  cursor: pointer;
  transition: opacity .25s ease, transform .2s ease;
}

#sse-reset-submit:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* ------------------------------
   BACK LINK
------------------------------ */
.sse-back-login {
  margin-top: 18px;
  font-size: 14px;
  color: var(--ss-muted);
}

.sse-back-login a {
  color: var(--ss-brand);
  font-weight: 600;
  text-decoration: none;
}

/* ------------------------------
   STATUS MESSAGE
------------------------------ */
.sse-message {
  margin-top: 18px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ss-ink);
}

/* ------------------------------
   PASSWORD CHECKLIST
------------------------------ */
.sse-pass-check {
  list-style: none;
  padding: 0;
  margin: 8px 0 12px;
}

.sse-pass-check li {
  font-size: 13px;
  line-height: 1.4;
  color: var(--ss-muted);
  transition: color .25s ease;
}

/* ------------------------------
   PASSWORD STRENGTH BAR
------------------------------ */
.sse-pass-bar {
  width: 100%;
  background: var(--ss-border);
  height: 6px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 12px;
}

.sse-pass-bar div {
  height: 100%;
  width: 0;
  background: var(--ss-brand);
  border-radius: 4px;
  transition: width .3s ease, background .3s ease;
}

html[data-theme="dark"] .sse-pass-bar {
  background: var(--ss-border-strong);
}

/* ============================================================
   LOGO SWITCH (igual que Login/Register)
============================================================ */

.auth-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

.auth-avatar {
  width: 95px !important;
  height: auto !important;
  border-radius: 0 !important;
  display: none;
}

/* Light */
html[data-theme="light"] .mentorsync-light { display: block !important; }
html[data-theme="light"] .mentorsync-dark  { display: none !important; }

/* Dark */
html[data-theme="dark"] .mentorsync-light { display: none !important; }
html[data-theme="dark"] .mentorsync-dark  { display: block !important; }