/* Habitoxy — Edit Profile dialog ki poori shakl, dono page ke liye.
   ==========================================================================
   profile.js sirf node banati hai; dikhne ka saara faisla yahan hai — wahi
   bantwara jo celebrate.js/celebrate.css ka hai.

   Ye stylesheet JAAN-BOOJH KAR apne paanv par khadi hai. Dialog do alag page
   par khulta hai: app (app.css) aur social (social.css). Un dono ke class
   naamon par tikna iska matlab hota ki ek page par wo class ho aur doosre par
   na ho, aur dialog aadha kapdon mein dikhe — wahi galti pichhle hafte pakdi
   gayi thi jab social par "Change" bina style ke aa gaya tha. Yahan sirf CSS
   VARIABLES bahar se aate hain (--accent, --text, --card-brd …), jo dono page
   par ek jaise hain, aur wahi theme ke saath badalte hain.

   Teen niyam jo is repo mein pehle tootne par pakde gaye the:
     - har control par font-family likhi hai (warna UA Arial de deta hai);
     - koi text 10px se chhota nahi, aur sab --fs-* token se;
     - accent par baithne wala akshar var(--on-accent) hai.
   ========================================================================== */

.lpp-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;                 /* JS ise flex karta hai */
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.lpp-card {
  width: 100%;
  /* Overlay ke padding par bharosa nahi kiya ja sakta: app.css ka apna
     .modal-overlay usse kahin-kahin 0 kar deta hai, aur tab card screen ke
     kinaron se chipak jaata hai. Isliye jagah card khud chhodta hai. */
  max-width: min(520px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  box-sizing: border-box;
  padding: 26px 24px 22px;
  border-radius: 18px;
  background: var(--bg, #0E1420);
  border: 1px solid rgba(var(--accent-rgb), 0.45);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  animation: lppIn .28s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes lppIn { from { transform: translateY(14px) scale(.98); opacity: 0; } }

.lpp-title {
  margin: 0 0 4px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--accent);
}
/* Sar ki line: baayen taraf byora, dayen taraf doosre section ka naam. */
.lpp-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
}
.lpp-sub {
  margin: 0;
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-sm);
  color: var(--text-dim);
}
.lpp-status {
  min-height: 0;
  margin-bottom: 0;
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-align: center;
  color: var(--text-dim);
}

.lpp-body { display: flex; flex-direction: column; gap: 14px; }

/* ── Apni photo ──────────────────────────────────────────────────────────── */
.lpp-photo { display: flex; align-items: center; gap: 14px; }
.lpp-photo-pic {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  background: var(--inner-box-bg, rgba(255, 255, 255, .05));
  border: 2px solid rgba(var(--accent-rgb), 0.45);
}
/* Photo ka gol crop andar wale div par hai, bahar wale par nahi — warna
   level ka border bhi usi gole mein kat jaata. */
.lpp-photo-pic.has-ring { overflow: visible; border-color: transparent; background: none; }
.lpp-photo-in {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lpp-photo-in img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lpp-photo-txt { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.lpp-photo-txt .lpp-btn-ghost { padding: 9px 14px; font-size: var(--fs-sm); min-height: 40px; }
.lpp-hint {
  margin-top: 4px;
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-micro);
  color: var(--text-faint);
  line-height: 1.5;
}

/* ── Khane ───────────────────────────────────────────────────────────────── */
.lpp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lpp-label {
  display: block;
  margin-bottom: 5px;
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.lpp-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 11px 13px;
  border-radius: 10px;
  background: var(--inner-box-bg, rgba(255, 255, 255, .04));
  border: 1px solid var(--card-brd, rgba(255, 255, 255, .12));
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-md);
  font-weight: 500;
}
.lpp-input::placeholder { color: var(--text-faint); }
.lpp-input:focus {
  outline: none;
  border-color: rgba(var(--accent-rgb), .6);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .15);
}
select.lpp-input { cursor: pointer; }

/* Har control par font — chhupe hue par bhi.

   App ke paas ek global `button, input, select, textarea` rule hai jo ye
   sambhal leta hai; social ke paas nahi. To is dialog ka ek hi HTML dono
   jagah alag font mein aa jaata — aur type check ne theek yahi pakda:
   social par do input Arial mein the (ek hidden file picker, ek hidden
   value holder). Dikhte nahi the, par wo farq asli tha. */
.lpp-overlay input,
.lpp-overlay select,
.lpp-overlay button,
.lpp-overlay textarea { font-family: 'Inter', sans-serif; }

/* Padha ja sakta hai, badla nahi — jab tak pencil na dabao. */
.lpp-locked { position: relative; }
.lpp-locked .lpp-input { padding-right: 40px; color: var(--text-dim); }
.lpp-pencil {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: none;
  color: var(--accent);
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-md);
}
.lpp-pencil:hover { background: rgba(var(--accent-rgb), .12); }

/* ── Avatar ──────────────────────────────────────────────────────────────── */
.lpp-avatars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
}
.prof-avatar-choice {
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  background: none;
  border: 2px solid var(--card-brd, rgba(255, 255, 255, .12));
  font-family: 'Inter', sans-serif;
  transition: transform .15s ease;
}
.prof-avatar-choice:hover { transform: translateY(-2px); }
.prof-avatar-choice img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Khali slot: admin ne wo jagah abhi bhari nahi hai. Tile rehti hai, taaki
   grid tooti hui na lage, aur khud bata deti hai ki wahan kya aayega. */
.lp-av-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px dashed var(--card-brd, rgba(255, 255, 255, .14));
  background: var(--inner-box-bg, rgba(255, 255, 255, .02));
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-faint);
}

/* Aage ka stage. Dikhta hai — kya milne wala hai, yahi to khinchav hai — par
   chuna nahi ja sakta. Tasveer dhundhli aur beech mein wo level jahan wo
   khulega. Button nahi, div: isme dabane ko kuchh hai hi nahi. */
.lpp-av-lock {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--card-brd, rgba(255, 255, 255, .14));
  background: var(--inner-box-bg, rgba(255, 255, 255, .02));
  cursor: not-allowed;
}
.lpp-av-lock img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) blur(1.5px);
  opacity: .45;
}
.lpp-av-tag {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--text-dim);
  white-space: nowrap;
}
.lpp-av-tag .lp-ic, .lpp-av-tag svg { width: 13px; height: 13px; font-size: 13px; }
body.light-theme .lpp-av-lock { background: #f1f5f9; border-color: #cbd5e1; }

/* ── Button ──────────────────────────────────────────────────────────────── */
.lpp-actions { display: flex; justify-content: center; gap: 12px; margin-top: 4px; }
.lpp-btn, .lpp-btn-ghost {
  min-height: 44px;
  padding: 11px 18px;
  border-radius: 10px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-md);
  font-weight: 800;
  transition: background .18s ease, color .18s ease, opacity .18s ease;
}
.lpp-btn {
  border: none;
  color: var(--on-accent, #000);
  background: var(--accent);
}
.lpp-btn:hover { filter: brightness(1.06); }
.lpp-btn.is-off, .lpp-btn:disabled {
  background: var(--inner-box-bg, rgba(255, 255, 255, .06));
  color: var(--text-faint);
  cursor: not-allowed;
  filter: none;
}
.lpp-btn-ghost {
  background: none;
  color: var(--text);
  border: 1px solid var(--card-brd, rgba(255, 255, 255, .14));
}
.lpp-btn-ghost:hover { background: rgba(255, 255, 255, .06); }
.lpp-btn-wide { flex: 1; max-width: 170px; }

/* ── Andar ke panel ──────────────────────────────────────────────────────── */
.lpp-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border-radius: 12px;
  background: rgba(var(--accent-rgb), 0.05);
  border: 1px solid rgba(var(--accent-rgb), 0.18);
}
.lpp-panel-plain {
  background: var(--inner-box-bg, rgba(255, 255, 255, .03));
  border-color: var(--card-brd, rgba(255, 255, 255, .1));
}
.lpp-panel-t {
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-base);
  font-weight: 800;
  color: var(--text);
}

/* ── Do shaklein jo dialog ke sar mein baithti hain ──────────────────────── */
/* Section badalne wala switch: ek raasta, isliye text + chevron. */
.ep-switch {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent);
}
.ep-switch:hover { text-decoration: underline; }
.ep-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.ep-switch .lp-ic { font-size: var(--fs-md); }
.ep-switch svg { width: 14px; height: 14px; }

/* Avatar set badalne wala chip: ek toggle, isliye uske chaaron taraf ghera. */
.ep-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-micro);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.10);
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  transition: background .18s ease, border-color .18s ease;
}
.ep-chip:hover { background: rgba(var(--accent-rgb), 0.18); border-color: rgba(var(--accent-rgb), 0.55); }
.ep-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 640px) {
  /* Phone par ye card nahi, sheet hai — neeche se aata hua, poori chaudai
     ka, upar se gol. Yahi shakl app ke baaki dialogs ki hai; farq sirf itna
     hai ki ab wo yahan likhi hai, app.css mein nahi, taaki social par bhi
     bilkul yahi dikhe. Ek hi dialog ki do shaklein nahi honi chahiye. */
  .lpp-overlay { align-items: flex-end; padding: 0; }
  .lpp-card {
    max-width: 100%;
    max-height: 88dvh;
    padding: 22px 16px calc(18px + var(--safe-bottom, 0px));
    border-radius: 20px 20px 0 0;
    border-bottom: none;
  }
  .lpp-title { font-size: var(--fs-2xl); }
  .lpp-avatars { gap: 8px; }
  .lpp-btn-wide { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lpp-card { animation: none; }
  .prof-avatar-choice:hover { transform: none; }
}

/* ── Ujala theme ─────────────────────────────────────────────────────────
   Parda app.css ke universal .modal-overlay rule se aata hai (dialog par
   wahi class hai). Baaki sab yahan, taaki dialog apne saath apna light
   roop bhi le kar chale — social page app.css load karta hi nahi. */
body.light-theme .lpp-card {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.10);
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
}
body.light-theme .lpp-input {
  background: #f8fafc;
  color: #0f172a;
  border-color: #cbd5e1;
}
body.light-theme .lpp-input:focus { background: #ffffff; }
body.light-theme .lpp-locked .lpp-input { background: #f1f5f9; color: #64748b; }
body.light-theme .lpp-btn-ghost { background: #f1f5f9; color: #334155; border-color: #cbd5e1; }
body.light-theme .lpp-btn-ghost:hover { background: #e2e8f0; }
body.light-theme .lpp-btn.is-off, body.light-theme .lpp-btn:disabled {
  background: #f1f5f9; color: #94a3b8; border: 1px solid #e2e8f0;
}
body.light-theme .lpp-panel-plain { background: #f8fafc; border-color: #e2e8f0; }
body.light-theme .lpp-photo-pic { background: #f1f5f9; }
body.light-theme .lp-av-slot { background: #f8fafc; border-color: #cbd5e1; }

/* ── Level ka border ─────────────────────────────────────────────────────
   Avatar ke upar ek transparent PNG, thoda bada — ghera tasveer ke kinare
   ke bahar baithta hai, chehre par nahi. Ye rule yahan hai kyunki
   profile.css dono page par load hota hai, aur border dono par dikhta hai:
   header, settings, feed, comments, club, people list, profile.

   pointer-events:none — border ke upar tap uske neeche wale avatar ko
   jaana chahiye (feed par wahi profile kholta hai). */
.lp-av-ring {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
}
.lp-av-ring > .lp-av-border {
  position: absolute;
  left: -14%;
  top: -14%;
  width: 128%;
  height: 128%;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}