/* =========================
   CATEGORIES DESIGN SYSTEM
   (applied to forgot.html)
   ========================= */
:root{
  --bg: #0b0f17;
  --bg2:#0a0d14;

  --text:#e9eefc;
  --muted:#9aa7c2;

  --card: rgba(255,255,255,0.06);
  --card2: rgba(255,255,255,0.08);

  --border: rgba(255,255,255,0.10);
  --border2: rgba(255,255,255,0.16);

  --shadow: 0 10px 30px rgba(0,0,0,0.40);

  --blue:#2f7dff;
  --blue2:#5aa2ff;

  --glass: blur(14px);
  --radius: 18px;
  --radius2: 22px;

  --max: 1100px;
  --navH: 68px;

  /* keep these so your existing JS inline styles still resolve */
  --primary: var(--blue2);
  --primaryHover: rgba(47,125,255,0.35);

  /* Keep your original variables (so nothing breaks) */
  --blur: blur(20px);
  --panelBorder: rgba(255,255,255,0.10);
  --field: rgba(10,14,22,0.58);
  --fieldBorder: rgba(255,255,255,0.10);
  --placeholder: rgba(255,255,255,0.40);

  --cardLegacy: rgba(12,16,24,0.64);
}

*{box-sizing:border-box;margin:0;padding:0}
a{ color: inherit; text-decoration: none; }

body{
  font-family:'Inter',sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(47,125,255,0.18), transparent 60%),
    radial-gradient(900px 500px at 85% 0%, rgba(90,162,255,0.10), transparent 55%),
    radial-gradient(900px 700px at 50% 110%, rgba(47,125,255,0.10), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  min-height:100vh;
  opacity:0;
  transform:translateY(10px) scale(0.985);
  animation: pageLoad .55s cubic-bezier(.2,.8,.2,1) forwards;

  /* ✅ FIX: push footer to bottom on tall screens */
  display:flex;
  flex-direction:column;
}
@keyframes pageLoad{to{opacity:1;transform:translateY(0) scale(1)}}

.container{
  width: min(var(--max), calc(100% - 40px));
  margin: auto;
}

/* ✅ NAVBAR FULL-WIDTH WRAPPER (match categories.css) */
.nav-shell{
  width: calc(100% - 40px);
  margin: 0 auto;

  /* ✅ FIX: ensure inner aligns vertically centered within navbar */
  height: 100%;
  display: flex;
  align-items: center;
}

/* ✅ FIX: don't let .container's margin:auto push navbar content upward */
.navbar .container.nav-content{
  margin: 0 auto;
}

/* =========================
   NAVBAR (unified)
   ========================= */
.nav-holder{ height: var(--navH); }

.navbar{
  position: fixed;
  top:0; left:0; right:0;
  height: var(--navH);
  z-index: 50;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  background: rgba(10,13,20,0.55);
  backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass);
}

.nav-content{
  display:flex;
  align-items:center;
  gap: 14px;
  height:100%;

  /* ✅ match categories positioning: let .nav-shell control the width */
  width: 100%;
}

.logo{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  white-space: nowrap;
  user-select:none;
  margin-right:auto;
  font-size: 1.2rem;
  font-family:'Poppins',sans-serif;
  cursor:pointer;
}
.logo-badge{
  width: 34px; height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(47,125,255,0.9), rgba(90,162,255,0.65));
  box-shadow: 0 10px 22px rgba(47,125,255,0.18);
  display:grid;
  place-items:center;
  border: 1px solid rgba(255,255,255,0.15);
}
.logo-badge i{ font-size: 15px; color: #eaf2ff; }
.logo .accent{ color: var(--blue2); }

/* right-side cluster */
.nav-right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
}

/* desktop links */
nav{
  display:flex;
  gap: 8px;
  align-items:center;
}
nav a{
  padding: 9px 12px;
  border-radius: 12px;
  color: var(--muted);
  font-weight: 700;
  font-size: 13.5px;
  transition: 160ms ease;
}
nav a:hover{
  color: var(--text);
  background: rgba(255,255,255,0.06);
}

/* signed-out buttons (desktop only) */
.nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.btn-primary{
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  padding: 10px 13px;
  border-radius: 14px;
  font-weight: 800;
  font-size: 13px;
  cursor:pointer;
  transition: 160ms ease;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  margin-left: 0;
}
.btn-primary:hover{
  transform: translateY(-1px);
  border-color: rgba(47,125,255,0.35);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}
.btn-primary.primary{
  background: rgba(47,125,255,0.18);
  border-color: rgba(47,125,255,0.35);
}

/* hamburger (mobile) */
.hamburger{
  width:42px;height:42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);
  color:var(--text);
  display:none;
  place-items:center;
  cursor:pointer;
  transition:160ms ease;
}
.hamburger:hover{
  transform:translateY(-1px);
  border-color:rgba(47,125,255,0.35);
  box-shadow:0 10px 28px rgba(0,0,0,0.35);
}

/* profile icon + dropdown (authed only) */
.profile-wrap{
  position:relative;
  display:none;
}
.profile-btn{
  width:42px;height:42px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);
  color:var(--text);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:160ms ease;
}
.profile-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(47,125,255,0.35);
  box-shadow:0 10px 28px rgba(0,0,0,0.35);
}
.profile-menu{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  min-width:220px;
  background:rgba(10,13,20,0.92);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:16px;
  box-shadow:0 18px 55px rgba(0,0,0,0.45);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding:8px;
  display:none;
  z-index:60;
}
.profile-menu a, .profile-menu button{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  color:rgba(233,238,252,0.92);
  font-weight:800;
  font-size:13px;
  background:transparent;
  border:0;
  cursor:pointer;
  text-align:left;
}
.profile-menu a:hover, .profile-menu button:hover{
  background:rgba(255,255,255,0.06);
  color:var(--text);
}

/* mobile panel */
.mobile-panel{
  position:fixed;
  top:var(--navH);
  left:0; right:0;
  background:rgba(10,13,20,0.92);
  border-bottom:1px solid rgba(255,255,255,0.10);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  z-index:55;
  display:none;
}
.mobile-inner{
  width:min(var(--max), calc(100% - 40px));
  margin:0 auto;
  padding:14px 0 18px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* ✅ hamburger link style (match privacy.html exactly) */
.mlink{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.06);
  color:rgba(233,238,252,0.92);
  font-weight:900;
}
.mlink i{
  width:18px;
  text-align:center;
  flex:0 0 18px;
  margin-right:2px;
}
.mlink:hover{
  border-color:rgba(47,125,255,0.35);
  background:rgba(255,255,255,0.08);
}
.mlink.small{
  background:rgba(255,255,255,0.05);
  border-color:rgba(255,255,255,0.10);
  opacity:0.92;
}

/* ✅ auth buttons aligned + evenly spaced (match privacy.html) */
.mobile-auth{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:0px;
  padding-top:0px;
}

.mobile-backdrop{
  position:fixed;
  inset:0;
  top:var(--navH);
  background:rgba(0,0,0,0.35);
  z-index:54;
  display:none;
}

/* =========================
   PAGE / CARD
   ========================= */
.page{
  padding: 54px 0 40px;

  /* ✅ FIX: stretch page content so footer stays at bottom */
  flex: 1;
}

.auth-wrap{
  max-width:560px;
  margin: 0 auto;
  background: rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.10);
  border-radius: 22px;
  padding: 26px;
  box-shadow: 0 18px 55px rgba(0,0,0,0.35);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden;
}
.auth-wrap::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width: 0px;
  background: linear-gradient(180deg, rgba(47,125,255,0.95), rgba(90,162,255,0.65));
  transition: 160ms ease;
}
.auth-wrap:hover::before{ width: 4px; }

.auth-title{
  font-family:'Poppins',sans-serif;
  font-size: 28px;
  letter-spacing:-.3px;
  margin-bottom: 8px;
  font-weight: 800;
}
.auth-sub{
  color: rgba(154,167,194,0.92);
  line-height: 1.6;
  margin-bottom: 18px;
}

.field{
  width:100%;
  padding: 14px 14px;
  border-radius: 14px;
  outline:none;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color:#fff;
  margin-top: 10px;
  transition: 160ms ease;
}
.field::placeholder{ color: rgba(154,167,194,0.70); }
.field:focus{
  border-color: rgba(47,125,255,0.40);
  box-shadow: 0 0 0 4px rgba(47,125,255,0.12);
}

.actions{
  display:flex;
  gap:12px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.btn{
  padding: 14px 18px;
  background: rgba(47,125,255,0.18);
  border: 1px solid rgba(47,125,255,0.35);
  color:#fff;
  border-radius: 14px;
  font-weight: 800;
  text-decoration:none;
  transition: 160ms ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  min-width:170px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.30);
}
.btn:hover{
  transform: translateY(-2px);
  border-color: rgba(47,125,255,0.45);
  box-shadow: 0 18px 55px rgba(0,0,0,0.45);
}
.btn.secondary{
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: none;
}
.btn.secondary:hover{
  background: rgba(255,255,255,0.16);
  transform: translateY(-1px);
}

.small-links{
  margin-top: 14px;
  display:flex;
  justify-content:space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.small-links a{
  color: rgba(154,167,194,0.92);
  text-decoration:none;
  font-size: 13px;
  font-weight: 700;
}
.small-links a:hover{ color: var(--blue2); }

.notice{
  margin-top: 12px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(47,125,255,0.22);
  background: rgba(47,125,255,0.08);
  color: rgba(233,238,252,0.92);
  font-size: 13px;
  line-height: 1.55;
  display:none;
}
.notice.show{ display:block; }

/* =========================
   LOADING ANIMATION (notice)
   ========================= */
@keyframes loadingPulse {
  0% { opacity: .55; }
  50% { opacity: 1; }
  100% { opacity: .55; }
}
@keyframes dotBlink {
  0%, 20% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}
.loading-text{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-weight:900;
  color: rgba(120, 255, 196, 0.95);
  animation: loadingPulse 1.05s ease-in-out infinite;
}
.loading-dots{
  display:inline-flex;
  gap:3px;
}
.loading-dots span{
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:999px;
  background: rgba(120, 255, 196, 0.95);
  opacity:0;
  animation: dotBlink 1.1s infinite;
}
.loading-dots span:nth-child(2){ animation-delay: .18s; }
.loading-dots span:nth-child(3){ animation-delay: .36s; }

/* =========================
   FOOTER (categories style)
   ========================= */
.footer{
  margin-top: 60px;
  padding: 20px 0 20px;
  font-size: 12.5px;
  border-top: 1px solid rgba(255,255,255,0.10);
  position: relative;
}
.footer::before{ display:none; }

.footer-content{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap: 12px;
  color: rgba(154,167,194,0.85);
}
.footer-content a{
  color: rgba(154,167,194,0.85);
  margin-left: 12px;
  text-decoration:none;
  font-weight: 800;
}
.footer-content a:hover{ color: var(--text); }

/* RESPONSIVE */
@media (max-width: 860px){
  nav{ display:none; }

  /* ✅ hide Sign In/Up outside hamburger on mobile (must beat JS inline styles) */
  .nav-actions{ display:none !important; }

  .hamburger{ display:grid; }    /* ✅ hamburger visible on mobile */

  /* ✅ allow profile icon on mobile when signed in (JS controls display) */
  /* (intentionally NOT hiding .profile-wrap here) */

  .page{ padding-top: 36px; }
}

/* SCROLLBAR */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(30,35,55,0.9) #0b0f17;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0b0f17; }
::-webkit-scrollbar-thumb {
  background: rgba(30,35,55,0.9);
  border: 2px solid #0b0f17;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(40,48,72,0.95); }
::-webkit-scrollbar-corner { background: #0b0f17; }

/* Rewards-style fixed glass navbar parity */
:root{--navH:74px;--glass:blur(14px)}
.navbar{position:fixed !important;inset:0 0 auto 0 !important;height:var(--navH) !important;z-index:9999 !important;background:rgba(10,13,20,.55) !important;backdrop-filter:var(--glass) !important;-webkit-backdrop-filter:var(--glass) !important;border-bottom:1px solid rgba(255,255,255,.08) !important}
.nav-holder{height:var(--navH) !important}
.mobile-backdrop,.mobile-panel{top:var(--navH) !important}

/* Mobile header/avatar consistency */
.profile-btn{padding:0;overflow:hidden}
.profile-btn .navProfileAvatar,.profile-btn img.navProfileAvatar{width:100%;height:100%;object-fit:cover;object-position:center;border-radius:999px;display:block}
.mobile-inner a i{width:18px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 18px}
@media(max-width:860px){.nav-right{gap:10px}.hamburger,.notifBtn,.profile-btn{width:42px;height:42px;border-radius:14px}.nav-actions{display:none!important}}