/* src/styles/app.css */
/* Scoped-ish: all classes prefixed lf* */

:root{
  --lf-card: rgba(255,255,255,.06);
  --lf-line: rgba(255,255,255,.10);
  --lf-text: rgba(255,255,255,.92);
  --lf-muted: rgba(255,255,255,.70);

  --lf-gold:#d4af37;
  --lf-red:#b91c1c;

  --lf-radius: 18px;

  --lf-actions-w: 0px;
  --lf-gap: 10px;

  --lf-msg-w: 720px;
  
  --lf-search-w: 720px;
}

/* OUTSIDE :root */
.lfreels-user{
  max-width: calc(100% - var(--lf-actions-w) - (var(--lf-gap) * 2));
}

*{box-sizing:border-box}

/* FEED avatar: always perfectly round */
/* FEED avatar: outer cuts to circle */
.lffeed-ava{
  width:44px;
  height:44px;
  border-radius:9999px;
  overflow:hidden;
  display:inline-block;
  flex:0 0 44px;
}

/* inner just fills */
.lffeed-avaInner{
  width:100%;
  height:100%;
  display:block;
}

/* image fills without stretching */
.lffeed-avaImg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* fallback (ikoon) peab samuti olema ringis */
.lffeed-avaFallback {
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  display: grid;
  place-items: center;
}

.lfavatar-wrap {
  position: relative;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  overflow: hidden;
}

.lfavatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* fallback overlay base */
.lfavatar-fallback{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.85);
}

.lfavatar-fallback svg{ display:block; }

/* optional - makes post rows slightly distinct */
.lfsearch-row[data-post-id] .lfavatar-fallback{ opacity:.9; }

/*default: show fallback, hide img until loaded */
.lfavatar-wrap .lfavatar-img { opacity: 0; }
.lfavatar-wrap .lfavatar-fallback { opacity: 1; }

/*when loaded: show image, hide fallback */
.lfavatar-wrap.is-loaded .lfavatar-img { opacity: 1; }
.lfavatar-wrap.is-loaded .lfavatar-fallback { opacity: 0; pointer-events: none; }

/*optional: if error, keep fallback visible */
.lfavatar-wrap.is-error .lfavatar-img { opacity: 0; }
.lfavatar-wrap.is-error .lfavatar-fallback { opacity: 1; }

/* ---------- DARK SELECT FIX ---------- */

.lfpkg-input,
.lfpkg-input option{
  background-color: #0b0f14;
  color: #ffffff;
}

/* Dropdown list background (Chrome / Edge / Firefox) */
.lfpkg-input option{
  background-color: #0b0f14;
  color: #ffffff;
}

/* Hover / selected option */
.lfpkg-input option:checked,
.lfpkg-input option:hover{
  background-color: rgba(59,130,246,.25);
  color: #ffffff;
}

/* Remove ugly native focus glow */
.lfpkg-input:focus{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(59,130,246,.18);
}

/* Make arrow look cleaner */
.lfpkg-input{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.7) 50%),
    linear-gradient(135deg, rgba(255,255,255,.7) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}


html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--lf-text);
  background: #000000;
}

a{color:inherit;text-decoration:none}

.lfapp{min-height:100vh}
.lfhdr{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--lf-line);
}

.lfbrand{display:flex;align-items:center;gap:10px}
.lfbrand-mark{
  width:34px;height:34px;display:grid;place-items:center;
  border-radius: 12px;
  background: linear-gradient(163deg,#7a1f2b 0%,#b91c1c 44%,#d4af37 100%);
  color:#fff;
  font-weight:800;
}
.lfbrand-name{font-weight:800;letter-spacing:.2px}

.lfnav{display:flex;gap:10px}
.lfnav-item{
  padding:10px 12px;
  border:1px solid transparent;
  border-radius: 999px;
  color: var(--lf-muted);
}
.lfnav-item.is-active{
  border-color: var(--lf-line);
  background: rgba(255,255,255,.06);
  color: var(--lf-text);
}

.lfmain{padding:18px}
.lfpage{max-width:1100px;margin:0 auto}

.lfh1{margin:20 0 8px 0;font-size:28px}
.lfmuted{color:var(--lf-muted);line-height:1.5}

.lfcard {
  background: #0F141B;              /* sügav sinakashall */
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--lf-radius);
  padding: 14px;
}
.lfcard-title{font-weight:800;margin-bottom:10px}

.lfbtn {
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 800;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, #2563EB, #3B82F6);
}

.lfbtn:hover {
  background: linear-gradient(135deg, #1E40AF, #2563EB);
}

.lfw-modal { pointer-events: auto; }
.lfw-modal-backdrop { pointer-events: auto; }

.lfbtn:hover{filter:brightness(1.05)}
.lfbtn:active{transform: translateY(1px)}

.lfbtn-ghost{
  background: rgba(255,255,255,.08);
  color: var(--lf-text);
  border: 1px solid var(--lf-line);
}
.lfbtn-ghost:hover{background: rgba(255,255,255,.10)}

.lfbadge{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;
  border-radius: 999px;
  border:1px solid var(--lf-line);
  background: rgba(255,255,255,.06);
  color: var(--lf-text);
  font-size:12px;
  font-weight:800;
}

.lfhero{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 14px;
  align-items: start;
  margin-bottom: 14px;
}
.lfhero-left{
  padding: 18px;
  border-radius: var(--lf-radius);
  border: 1px solid var(--lf-line);
  background: rgba(255,255,255,.04);
}
.lfcta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

.lfhero-right{display:grid;gap:14px}
.lfstats{display:grid;grid-template-columns: repeat(3,1fr);gap:10px}
.lfstat{padding:10px;border-radius:14px;border:1px solid var(--lf-line);background:rgba(255,255,255,.05)}
.lfstat-k{color:var(--lf-muted);font-size:12px;font-weight:700}
.lfstat-v{font-size:20px;font-weight:900;margin-top:4px}

.lfchips{display:flex;gap:8px;flex-wrap:wrap}
.lfchip{
  display:inline-flex;align-items:center;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--lf-line);
  background:rgba(255,255,255,.05);
  color:var(--lf-text);
  font-weight:800;
  font-size:12px;
}

/* ===== Wallet Recharge Modal ===== */
.lfw-modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: grid;
  place-items: center;
  z-index: 9999;
  padding: 18px;
}

/* Withdraw modal backdrop (same styling, separate class to avoid other modal close handlers) */
.lfw-wd-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: grid;
  place-items: center;
  z-index: 9999;
  padding: 18px;
}

.lfw-modal{
  width: min(720px, 100%);
  background: rgba(15,18,26,.95);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  box-shadow: 0 20px 80px rgba(0,0,0,.55);
  overflow: hidden;
}

.lfw-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.lfw-modal-title{ font-weight: 700; font-size: 16px; }
.lfw-modal-x{
  width: 38px; height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  cursor: pointer;
}

.lfw-modal-body{ padding: 16px; }
.lfw-modal-sub{ opacity:.85; margin-bottom: 12px; }

.lfw-pkglist{ display:grid; gap: 12px; }

.lfw-pkg{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

.lfw-pkg-name{ font-weight: 700; }
.lfw-pkg-meta{ opacity:.8; font-size: 13px; margin-top: 4px; }
.lfw-pkg-right{ display:flex; align-items:center; gap: 12px; }
.lfw-pkg-price{ font-weight: 700; opacity:.95; }

.lfw-buybtn{ white-space: nowrap; }


.lfgrid2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media (max-width: 900px){
  .lfhero{grid-template-columns:1fr}
  .lfgrid2{grid-template-columns:1fr}
}

/* list */
.lflist{display:grid;gap:10px}
.lflist-row{display:flex;gap:10px;align-items:flex-start}
.lflist-dot{
  width:10px;height:10px;border-radius:999px;
  background: var(--lf-gold);
  margin-top:6px;
}
.lflist-top{font-weight:900}
.lflist-sub{color:var(--lf-muted);font-size:13px;margin-top:2px}

.lfmini-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.lfmini{padding:10px;border-radius:14px;border:1px solid var(--lf-line);background:rgba(255,255,255,.05)}
.lfmini-k{color:var(--lf-muted);font-size:12px;font-weight:800}
.lfmini-v{font-size:18px;font-weight:950;margin-top:4px}

/* Make inputs premium (applies to Title + Description) */
.lfinput{
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.26);
  color: var(--lf-text);
  outline: none;
  font-weight: 900;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.lfinput::placeholder{ color: rgba(255,255,255,.40) }

.lfinput:focus {
  border-color: rgba(59,130,246,.45);          /* blue */
  background: rgba(0,0,0,.30);
  box-shadow:
    0 0 0 3px rgba(59,130,246,.18),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 14px 44px rgba(0,0,0,.35);
}

/*Choose File Button*/
.lfupload{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:16px;
  border:1px dashed rgba(255,255,255,.22);
  background: rgba(255,255,255,.05);
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  user-select:none;
}
.lfupload:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 16px 40px rgba(0,0,0,.30);
  transform: translateY(-1px);
}
.lfupload:active{ transform: translateY(0px); }

.lfupload-ico{
  width:46px;height:46px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  display:grid;place-items:center;
  font-weight:950;
}
.lfupload-title{ font-weight:950; }
.lfupload-sub{ color: var(--lf-muted); font-weight:850; font-size:12px; margin-top:3px; }

/* textarea polish */
textarea.lfinput{
  min-height: 140px;
  resize: vertical;
  line-height: 1.4;
}

/* prevent tiny right-side inputs in row layouts */
.lfnp-value .lfinput{ max-width: 520px; }
@media (max-width: 900px){
  .lfnp-value .lfinput{ max-width: 100%; }
}


/* Creator */
.lfcreator{border-radius: var(--lf-radius); overflow:hidden; border:1px solid var(--lf-line)}
.lfcreator-cover {
  position: relative;
  min-height: 260px;
  background:
    radial-gradient(900px 260px at 20% 0%, rgba(59,130,246,.10), transparent 60%),
    radial-gradient(700px 240px at 80% 20%, rgba(99,102,241,.08), transparent 60%),
    #0B0F14;
}
.lfcreator-cover-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.55) 100%);
}
.lfcreator-top{
  position:relative;
  display:grid;
  grid-template-columns: 110px 1fr 260px;
  gap: 14px;
  padding: 18px;
  align-items: flex-start;
}
@media (max-width: 900px){
  .lfcreator-top{grid-template-columns: 90px 1fr; grid-template-rows:auto auto}
  .lfcreator-stats{grid-column: 1 / -1}
}

.lfcreator-avatar{
  overflow: hidden;
  align-self: flex-start;
  width:96px;
  height:96px;
  border-radius:9999px;
  border:1px solid rgba(255,255,255,.12);
  background:#0B0F14;
  display:grid;
  place-items:center;
  box-shadow: 0 18px 45px rgba(0,0,0,.55);
}
.lfcreator-avatar-ico{
  font-size:28px;
  line-height:1;
}
.lfava-img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.lfcreator-meta{padding-bottom:6px}
.lfcreator-name{font-size:22px;font-weight:950;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.lfcreator-handle{color:var(--lf-muted);font-weight:800;margin-top:2px}
.lfcreator-bio{margin-top:8px;color:var(--lf-text);max-width: 640px}

.lfcreator-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

.lfcreator-stats{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:10px;
  padding-bottom:6px;
}
.lfstatbox{
  border:1px solid var(--lf-line);
  background: rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 10px;
  text-align:center;
}
.lfstatbox-v{font-size:18px;font-weight:950}
.lfstatbox-k{font-size:12px;color:var(--lf-muted);font-weight:800;margin-top:2px}

.lfcreator-body{background: rgba(0,0,0,.12); padding: 14px}
.lftabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.lftab{
  border:1px solid var(--lf-line);
  background: rgba(255,255,255,.06);
  color: var(--lf-text);
  font-weight:950;
  padding:10px 12px;
  border-radius: 999px;
  cursor:pointer;
}
.lftab.is-active {
  background: #141A22;
  color: #E5E7EB;
  border-color: rgba(255,255,255,.18);
}
.lftabpane{display:none}
.lftabpane.is-active{display:block}

/* Posts */
.lfpost{padding:0;overflow:hidden}
.lfpost-media{border-bottom:1px solid var(--lf-line)}
.lfpost-ph{
  width:100%;
  height:160px;
  display:grid;
  place-items:center;
  border-radius:14px;

  background:
    radial-gradient(600px 220px at 10% 20%, rgba(212,175,55,.14), transparent 60%),
    rgba(255,255,255,.03);
}
.lfpost-ph .lfico-svg{
  width:26px;
  height:26px;
}
/* Base media element (img + video) */
.lfpost-media-el{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:14px;
}

/* Locked / blurred media */
.lfpost-media-blur{
  filter: blur(10px);
  transform: scale(1.04);
}
.lfpost-body{padding:14px}
.lfpost-title{font-weight:950;font-size:16px}
.lfpost-meta{display:flex;gap:10px;align-items:center;margin-top:8px}
.lfpost-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

/* About grid */
.lfabout-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (max-width: 700px){ .lfabout-grid{grid-template-columns:1fr} }

.lfabout-item{
  border:1px solid var(--lf-line);
  background: rgba(255,255,255,.05);
  border-radius: 16px;
  padding: 12px;
}
.lfabout-k{color:var(--lf-muted);font-size:12px;font-weight:900}
.lfabout-v{margin-top:4px;font-weight:950}

/* Offers */
.lfoffers{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media (max-width: 900px){ .lfoffers{grid-template-columns:1fr} }

.lfoffer{
  border:1px solid var(--lf-line);
  background: rgba(255,255,255,.05);
  border-radius: 16px;
  padding: 12px;
}
.lfoffer-k{color:var(--lf-muted);font-size:12px;font-weight:900}
.lfoffer-v{margin:6px 0 12px 0;font-size:18px;font-weight:950}

/* ===== FEED ===== */

.lfcomment-avaImg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:9999px;
}

.lffeed-time {
  font-size: 12px;
  color: var(--lf-muted);
  margin-right: 6px;
  white-space: nowrap;
}

.lffeed-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:14px;
  margin-bottom:14px;
}
.lffeed-filters{display:flex;gap:10px;flex-wrap:wrap}

.lffeed{display:grid;gap:14px}

.lffeed-post{
  background: rgba(255,255,255,.05);
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius);
  overflow:hidden;
}

.lffeed-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding: 12px 12px 10px 12px;
}

.lffeed-user{display:flex;gap:10px;align-items:center}
.lffeed-uname{font-weight:950;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lffeed-uhandle{color:var(--lf-muted);font-weight:800;font-size:12px;margin-top:2px}

.lffeed-more{position:relative}
.lffeed-morebtn{
  width:40px;height:40px;border-radius:14px;
  border:1px solid var(--lf-line);
  background: rgba(255,255,255,.06);
  color: var(--lf-text);
  font-weight:950;
  cursor:pointer;
}
.lffeed-menu{
  position:absolute; right:0; top:44px;
  min-width:180px;
  border-radius: 16px;
  border: 1px solid var(--lf-line);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  padding: 6px;
  display:none;
  z-index: 5;
}
.lffeed-menu.is-open{display:block}
.lffeed-menuitem{
  width:100%;
  text-align:left;
  padding:10px 10px;
  border-radius: 12px;
  border:0;
  background: transparent;
  color: var(--lf-text);
  cursor:pointer;
  font-weight:900;
}
.lffeed-menuitem:hover{background: rgba(255,255,255,.08)}

.lffeed-media{
  position:relative;
  border-top:1px solid var(--lf-line);
  border-bottom:1px solid var(--lf-line);
  cursor:pointer;
}
.lffeed-media-ph{
  height: 360px;
  display:grid;
  place-items:center;
  gap:8px;
  background:
    radial-gradient(800px 260px at 30% 10%, rgba(212,175,55,.12), transparent 60%),
    radial-gradient(700px 240px at 70% 20%, rgba(185,28,28,.10), transparent 60%),
    rgba(255,255,255,.03);
}
@media (max-width: 900px){
  .lffeed-media-ph{height:260px}
}
.lffeed-media-ico{font-size:32px}
.lffeed-media-txt{color:var(--lf-muted);font-weight:900}

.lffeed-media.is-locked .lffeed-media-ph{
  filter: blur(12px);
  transform: scale(1.02);
}

.lffeed-lock{
  position:absolute; inset:0;
  display:grid; place-items:center;
  background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.55) 100%);
}
.lffeed-lock-card{
  width: min(320px, 90%);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  padding: 14px;
  text-align: center;
}
.lffeed-lock-title{font-weight:950;font-size:18px}
.lffeed-lock-sub{color:var(--lf-muted);font-weight:800;margin:6px 0 12px 0}

.lffeed-badge{
  position:absolute;
  left:12px;
  bottom:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--lf-line);
  background: rgba(0,0,0,.45);
  color: var(--lf-text);
  font-weight:900;
  font-size:12px;
}

.lffeed-body{padding:12px}
.lffeed-caption{font-weight:850;line-height:1.45}

.lffeed-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}
.lffeed-act{
  padding:10px 12px;
  border-radius: 999px;
  border: 1px solid var(--lf-line);
  background: rgba(255,255,255,.06);
  color: var(--lf-text);
  font-weight:950;
  cursor:pointer;
}
.lffeed-act:hover{background: rgba(255,255,255,.08)}
.lffeed-act.is-liked{
  border-color: rgba(212,175,55,.55);
  background: rgba(212,175,55,.12);
}
.lffeed-act-ghost{
  color: var(--lf-muted);
}

.lffeed-comments{
  margin-top:12px;
  border-top:1px solid var(--lf-line);
  padding-top:12px;
}
.lffeed-cmtlist{display:grid;gap:8px;margin-bottom:10px}
.lffeed-cmt{color: var(--lf-text)}
.lffeed-cmtname{font-weight:950}
.lffeed-cmttxt{color: var(--lf-muted);font-weight:800}

.lffeed-cmtbox{display:flex;gap:10px}
.lffeed-cmtinp{
  flex:1;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--lf-line);
  background: rgba(0,0,0,.25);
  color: var(--lf-text);
  outline:none;
  font-weight:850;
}
.lffeed-cmtinp::placeholder{color: rgba(255,255,255,.45)}

/* ===== SEARCH ===== */

.lfsearch-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:14px;
  margin-bottom:14px;
  flex-wrap:wrap;
}

.lfsearch-bar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--lf-line);
  background:#0F141B;
}

/* Search page only: keep the "search width" rule scoped to Search top bar */
.lfsearch-top .lfsearch-bar{
  width: min(var(--lf-search-w), 100%);
  margin: 0 auto;
}

@media (max-width: 520px){
  :root{
    --lf-search-w: 100%;
  }
}

.lfsearch-ico{opacity:.8}
.lfsearch-input{
  flex:1;
  border:0;
  outline:none;
  background: transparent;
  color: var(--lf-text);
  font-weight:850;
}
.lfsearch-input::placeholder{color: rgba(255,255,255,.45)}

.lfsearch-results{display:grid;gap:14px}
.lfsearch-meta{color: var(--lf-muted);font-weight:850}
.lfsearch-q{color: var(--lf-text);font-weight:950}

.lfsearch-list{display:grid;gap:10px}
.lfsearch-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius: 16px;
  border: 1px solid var(--lf-line);
  background: rgba(0,0,0,.18);
}
.lfsearch-row:hover{background: rgba(255,255,255,.06)}
.lfsearch-ava{
  width:44px;
  height:44px;
  border-radius:9999px;
  overflow:hidden;
  border:1px solid var(--lf-line);
  background: rgba(255,255,255,.06);
  display:grid;
  place-items:center;
  flex:0 0 44px;
  position: relative;
}
.lfsearch-avaInner{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
}
.lfsearch-avaImg{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.lfsearch-main{flex:1;min-width:0}
.lfsearch-title{font-weight:950;display:flex;gap:8px;align-items:center;flex-wrap:wrap; color: #fff;}
.lfsearch-sub{color: var(--lf-muted);font-weight:850;font-size:13px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lfsearch-go{color: var(--lf-muted);font-weight:950}

.lfsearch-open{padding:10px 12px}

.lfsearch-empty{
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius);
  background: #0F141B;
  padding: 22px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.lfsearch-empty-ico{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:9999px;
  font-size:28px;
}
.lfsearch-empty-title{font-weight:950;font-size:18px;margin-top:8px}
.lfsearch-empty-sub{color: var(--lf-muted);font-weight:850;margin-top:6px}

/* ===== REELS ===== */

.lfreels-head {
  max-width: 520px;     /* sama mis reel */
  margin: 0 auto 14px; /* center + bottom space */
}

.lfreels-wrap{
  display:grid;
  gap:18px;
}

/* Stage fits vertical reel feel */
.lfreels-stage{
  position:relative;
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius);
  overflow:hidden;
  background: rgba(255,255,255,.04);
  max-width: 520px;
  margin: 0 auto;
}

/* 9:16 aspect stage */
.lfreels-video{
  position:relative;
  aspect-ratio: 9 / 16;
  width: 100%;
  cursor:pointer;
}

.lfreels-video-ph{
  height:100%;
  display:grid;
  place-items:center;
  gap:10px;
  background:
    radial-gradient(900px 320px at 30% 10%, rgba(212,175,55,.12), transparent 60%),
    radial-gradient(800px 300px at 70% 20%, rgba(185,28,28,.10), transparent 60%),
    rgba(0,0,0,.25);
}
.lfreels-ph-ico{font-size:38px}
.lfreels-ph-txt{color: var(--lf-muted);font-weight:950}

/* locked blur */
.lfreels-video.is-locked .lfreels-video-ph{
  filter: blur(12px);
  transform: scale(1.02);
}

.lfreels-lock{
  position:absolute; inset:0;
  display:grid; place-items:center;
  background: linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.60) 100%);
}
.lfreels-lockcard{
  width: min(340px, 92%);
  border-radius: 18px;
  border: 1px solid var(--lf-line);
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(10px);
  padding: 14px;
  text-align:center;
}
.lfreels-lockico{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--lf-line);
  background: rgba(0,0,0,.35);
  display: grid;
  place-items: center;
  margin: 0 auto 10px;
}
.lfreels-locktitle{font-weight:950;font-size:18px;margin-top:6px}
.lfreels-locksub{color:var(--lf-muted);font-weight:850;margin:6px 0 12px 0}

/* Top user bar */
.lfreels-top {
  
  position: absolute;
  top: 12px;
  left: 10px;
  right: 10px;

  display: flex;
  align-items: center;
  gap: 10px;

  pointer-events: auto;
}
.lfreels-user {
  width: 100%; 
  max-width: calc(100% - 68px);
  display: flex;
  gap: 10px;
  align-items: center;

  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid var(--lf-line);
  background: rgba(0, 0, 0, .38);
  backdrop-filter: blur(10px);

  /* 🔥 oluline osa */
  max-width: calc(100% - 68px); /* sama telg mis bottom */
}
.lfreels-ava{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  overflow: hidden;
}
.lfreels-avaImg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px;
  display: block;
}

.lfreels-uname{font-weight:950;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lfreels-udata{color: var(--lf-muted);font-weight:850;font-size:12px;margin-top:2px}

/* Bottom text */
.lfreels-bottom {
  position: absolute;
  left: 10px;
  right: 10px; /* action rail (44px) + gap (12px) + buffer (12px) */
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  padding: 10px 12px;
  border-radius: 18px;
  border: 1px solid var(--lf-line);
  background: rgba(0, 0, 0, .38);
  backdrop-filter: blur(10px);
  pointer-events: none;
  max-width: 520px;
}

.lfreels-title{
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 4px;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lfreels-desc{
  opacity: .9;
  font-size: 13px;
  line-height: 1.25;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Right actions */
.lfreels-actions{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 6;
}
.lfreels-act{
  width: 56px;
  min-height: 56px;
  padding: 10px 8px;
  border-radius: 16px;
  border: 1px solid var(--lf-line);
  background: rgba(0,0,0,.38);
  backdrop-filter: blur(10px);

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;

  color: #fff;
  cursor: pointer;
}
.lfreels-act:hover{
  background: rgba(0,0,0,.48);
  transform: translateY(-1px);
}
.lfreels-act.is-liked {
  border-color: rgba(59,130,246,.55);
  background: rgba(59,130,246,.14);
}

/* ===== MESSAGES ===== */

.lfmsg-tools{display:flex;gap:10px}

.lfmsg-empty{
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius);
  background: #0F141B;
  padding: 22px;
  text-align:center;
}
.lfmsg-empty-ico{font-size:30px}
.lfmsg-empty-title{font-weight:950;font-size:18px;margin-top:8px}
.lfmsg-empty-sub{color: var(--lf-muted);font-weight:850;margin-top:6px;line-height:1.5}
.lfmsg-empty-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}

.lfmsg-list{
  display:grid;
  gap:10px
}
.lfmsg-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius: 16px;
  border: 1px solid var(--lf-line);
  background: rgba(0,0,0,.18);
  text-decoration:none;
  color:inherit;
  width:100%;
  box-sizing:border-box;
}
.lfmsg-row:hover{background: rgba(255,255,255,.06)}
.lfmsg-ava{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid var(--lf-line);
  background: rgba(255,255,255,.06);  
  position:relative;
}
.lfmsg-avaImg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lfsearch-avaImg,
.lfmsg-avaImg{
  position: relative;
  z-index: 1;
}

.lfavatar-fallback{
  z-index: 0;
}

.lfmsg-main{flex:1;min-width:0}
.lfmsg-title{font-weight:950;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lfmsg-sub{
  color: var(--lf-muted);
  font-weight:850;
  font-size:13px;
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.lfmsg-meta{color: var(--lf-muted);font-weight:900;font-size:12px}

.lfmsg-avaInner{
  position:relative;
  width:100%;
  height:100%;
  display:block;
}

/* ===== NOTIFICATIONS ===== */

/* =========================
   Notifications — media preview
   ========================= */

.lfnoti-img {
  margin-top: 10px;
  max-width: 360px;
  aspect-ratio: 4 / 5;

  border-radius: 14px;
  overflow: hidden;

  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.lfnoti-img img {
  width: 100%;
  height: 100%;
  display: block;

  object-fit: cover;
  object-position: center top;

  transition: transform 0.25s ease;
}

.lfnoti-row:hover .lfnoti-img img {
  transform: scale(1.02);
}

@media (max-width: 640px) {
  .lfnoti-img {
    max-width: 100%;
    aspect-ratio: 3 / 4;
  }
}

/* =========================
   Notifications — row layout
   ========================= */

.lfnoti-row {
  display: grid;
  grid-template-columns: 12px 36px 1fr;
  gap: 12px;
  align-items: flex-start;
}

/* =========================
   Notifications — actor avatar / fallback
   ========================= */

.lfnoti-actor {
  width: 36px;
  height: 36px;
  position: relative;
  flex-shrink: 0;
}

.lfnoti-actorInner,
.lfnoti-actor .lfavatar-fallback {
  width: 36px;
  height: 36px;
  border-radius: 999px;
}

/* avatar image */
.lfnoti-actorimg {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
}

/* fallback (icon/initials) */
.lfnoti-actor .lfavatar-fallback {
  display: grid;
  place-items: center;

  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.85);

  font-weight: 700;
  font-size: 12px;

  user-select: none;
  overflow: hidden;
}

.lfnoti-actor .lfavatar-fallback svg {
  display: block;
  width: 18px;
  height: 18px;
}

.lfnoti-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:14px;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.lfnoti-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

.lfnoti-list{display:grid;gap:10px}

.lfnoti-row{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:12px;
  border-radius: 16px;
  border: 1px solid var(--lf-line);
  background: rgba(0,0,0,.18);
}
.lfnoti-row:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}
.lfnoti-row.is-unread {
  border-color: rgba(59,130,246,0.35);
  background: rgba(59,130,246,0.08);
}

.lfnoti-row.is-unread:hover{
  background: rgba(59,130,246,0.08);
  border-color: rgba(59,130,246,0.35);
}

.lfnoti-row:not(.is-unread):hover .lfnoti-dot{
  background: rgba(255,255,255,.25);
  opacity: 1;
}

.lfnoti-dot{
  width:10px;height:10px;border-radius:999px;
  background: rgba(255,255,255,.25);
  margin-top:6px;
}
.lfnoti-row.is-unread .lfnoti-dot {
  background: #3B82F6;
  opacity: 1;
}

.lfnoti-main{flex:1;min-width:0}
.lfnoti-title{font-weight:950;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lfnoti-body{color: var(--lf-muted);font-weight:850;margin-top:4px;line-height:1.45}

.lfnoti-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  position:relative;
}
.lfnoti-time{color: var(--lf-muted);font-weight:900;font-size:12px}

.lfnoti-more{
  width:40px;height:40px;border-radius:14px;
  border:1px solid var(--lf-line);
  background: rgba(255,255,255,.06);
  color: var(--lf-text);
  font-weight:950;
  cursor:pointer;
}
.lfnoti-menu{
  position:absolute;
  right:0;
  top: 44px;
  min-width: 190px;
  border-radius: 16px;
  border: 1px solid var(--lf-line);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  padding: 6px;
  display:none;
  z-index: 6;
}
.lfnoti-menu.is-open{display:block}

.lfnoti-menuitem{
  width:100%;
  text-align:left;
  padding:10px 10px;
  border-radius: 12px;
  border:0;
  background: transparent;
  color: var(--lf-text);
  cursor:pointer;
  font-weight:900;
}
.lfnoti-menuitem:hover{background: rgba(255,255,255,.08)}

/* ===== CREATE PACKAGE ===== */

.lfpkg-top{margin-bottom:14px}

.lfpkg-card{padding:16px}

.lfpkg-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 900px){
  .lfpkg-grid{grid-template-columns:1fr}
}

.lfpkg-field{display:flex;flex-direction:column;gap:8px}
.lfpkg-label{font-weight:950}
.lfpkg-help{color: var(--lf-muted);font-weight:850;font-size:12px;line-height:1.4}

.lfpkg-input{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--lf-line);
  background: rgba(0,0,0,.25);
  color: var(--lf-text);
  outline:none;
  font-weight:900;
}
.lfpkg-input::placeholder{color: rgba(255,255,255,.45)}

.lfpkg-money{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--lf-line);
  background: rgba(0,0,0,.25);
}
.lfpkg-curr{color: var(--lf-muted);font-weight:950}
.lfpkg-price{
  border:0;
  padding:0;
  border-radius:0;
  background: transparent;
  width:100%;
}

.lfpkg-preview{
  margin-top:14px;
  border-top: 1px solid var(--lf-line);
  padding-top:14px;
}
.lfpkg-preview-title{font-weight:950;margin-bottom:10px}

.lfpkg-preview-box{
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius);
  background: rgba(255,255,255,.04);
  padding: 14px;
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.lfpkg-prev-name{font-weight:950}
.lfpkg-prev-price{font-weight:950}
.lfpkg-prev-period{color: var(--lf-muted);font-weight:900}

.lfpkg-error{
  margin-top:10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(185,28,28,.45);
  background: rgba(185,28,28,.12);
  color: var(--lf-text);
  font-weight:900;
}

.lfpkg-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}
/* ===== WALLET ===== */

/* Wallet: tx thumbnail */
.lfw-txthumb{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background-color: rgba(255,255,255,.06);
  background-size: cover;
  background-position: center;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  cursor: pointer;
}

.lfw-imgmodal{
  width: min(92vw, 980px);
  max-height: 88vh;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(10,12,16,.92);
  border: 1px solid rgba(255,255,255,.10);
  position: relative;
  padding: 14px;
}

.lfw-imgmodal-img{
  width: 100%;
  height: auto;
  max-height: calc(88vh - 40px);
  object-fit: contain;
  display: block;
  border-radius: 12px;
}

.lfw-top{margin-bottom:14px}

.lfw-bal{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:14px;
  margin-bottom:14px;
}
@media (max-width: 900px){ .lfw-bal{grid-template-columns:1fr} }

.lfw-balcard{padding:16px}
.lfw-balhead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.lfw-baltitle{font-weight:950}
.lfw-balvalue{font-size:28px;font-weight:950;margin-top:10px}

.lfw-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.lfw-tab{
  border:1px solid var(--lf-line);
  background: rgba(255,255,255,.06);
  color: var(--lf-text);
  font-weight:950;
  padding:10px 12px;
  border-radius: 999px;
  cursor:pointer;
}
/* Tabs: active should be gold/neutral, not red */
.lfw-tab.is-active {
  border-color: rgba(59,130,246,0.45);
  background: rgba(59,130,246,0.14);
  color: #E5E7EB;
}

.lfw-panel{display:none}
.lfw-panel.is-active{display:block}

.lfw-empty{
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius);
  background: #0F141B;
  padding: 22px;
  text-align:center;
}
.lfw-empty-ico{font-size:30px}
.lfw-empty-title{font-weight:950;font-size:18px;margin-top:8px}
.lfw-empty-sub{color: var(--lf-muted);font-weight:850;margin-top:6px}
.lfw-empty-note{color: rgba(255,255,255,.55);font-weight:850;margin-top:10px}

.lfw-list{display:grid;gap:10px}
.lfw-row{
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 12px;
}
.lfw-row-top{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 4px;
}
/* Wallet meta line under balance */
.lfw-balmeta{
  margin-top: 8px;
  color: var(--lf-muted);
  font-weight: 850;
  font-size: 12px;
}

.lfw-badge{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  font-weight: 950;
  font-size: 12px;
}


.lfw-row + .lfw-row{ margin-top: 10px; }
.lfw-row:hover{background: rgba(255,255,255,.06)}
.lfw-row-title{ font-weight: 950; }
.lfw-row-sub{ color: var(--lf-muted); font-weight: 850; font-size: 12px; margin-top: 2px; }

.lfw-row-right{text-align:right}
.lfw-row-amt{font-weight:950; letter-spacing: .2px;}
.lfw-row-date{
  color: var(--lf-muted);
  font-weight: 850;
  font-size: 12px;
  margin-top: 4px;
}

.lfw-row-amt.is-plus{ color: #22c55e; }
.lfw-row-amt.is-minus{ color: #ef4444; }

/* ===== Pay method modal (Lusfera) ===== */
.lfpay-backdrop{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}

.lfpay-modal{
  width: min(520px, 100%);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(15,18,26,.96);
  box-shadow: 0 24px 90px rgba(0,0,0,.6);
  overflow: hidden;
}

.lfpay-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.lfpay-title{
  font-weight: 800;
  letter-spacing: .2px;
}

.lfpay-x{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  cursor: pointer;
}

.lfpay-body{ padding: 16px; }

.lfpay-sub{
  opacity: .8;
  font-size: 13px;
  line-height: 1.35;
  margin-bottom: 12px;
}

.lfpay-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.lfpay-card{
  text-align:left;
  padding: 14px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.lfpay-card:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
}

.lfpay-card:focus{
  outline: 2px solid rgba(80,140,255,.55);
  outline-offset: 2px;
}

.lfpay-card-k{ font-weight: 850; margin-bottom: 4px; }
.lfpay-card-v{ opacity: .75; font-size: 12px; }

.lfpay-cancel{
  width: 100%;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.86);
  cursor: pointer;
}
.lfpay-cancel:hover{ background: rgba(255,255,255,.05); }

/* =========================
   LUSFERA Pay UI (toast + modal)
========================= */
#lfPayUiHost{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99999;
}

/* Toast */
.lfpay-toast{
  pointer-events: none;
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%) translateY(10px);
  opacity: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(15,18,26,.92);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
  transition: all .18s ease;
  min-width: min(520px, calc(100vw - 24px));
}

.lfpay-toast.is-in{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.lfpay-toast-ico{ opacity:.95; display:grid; place-items:center; }
.lfpay-toast-txt{ color: rgba(255,255,255,.92); font-weight: 650; letter-spacing: .2px; }

.lfpay-toast--warn{ border-color: rgba(255, 200, 80, .22); }
.lfpay-toast--error{ border-color: rgba(255, 120, 120, .26); }
.lfpay-toast--ok{ border-color: rgba(120, 255, 160, .20); }

/* Modal */
.lfpay-modalback{
  pointer-events: auto;
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0,0,0,.58);
  opacity: 0;
  transition: opacity .16s ease;
}

.lfpay-modalback.is-in{ opacity: 1; }

.lfpay-modal{
  width: min(560px, 100%);
  background: rgba(15,18,26,.96);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  box-shadow: 0 26px 90px rgba(0,0,0,.60);
  backdrop-filter: blur(16px);
  padding: 16px;
  position: relative;
}

.lfpay-x{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  cursor: pointer;
}

.lfpay-title{
  font-weight: 850;
  font-size: 18px;
  color: rgba(255,255,255,.95);
  margin-bottom: 6px;
}

.lfpay-sub{
  color: rgba(255,255,255,.72);
  font-size: 13px;
  margin-bottom: 14px;
}

.lfpay-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.lfpay-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  cursor: pointer;
  font-weight: 750;
}

.lfpay-btn--lust{
  background: rgba(70, 120, 255, .14);
  border-color: rgba(70,120,255,.28);
}

.lfpay-btn--card{
  background: rgba(255,255,255,.06);
}

.lfpay-btn:hover{ filter: brightness(1.05); }
.lfpay-bico{ display:grid; place-items:center; opacity:.95; }


/* ===== PROFILE ===== */


.lfp-card{
  border: 1px solid var(--lf-line);
  border-radius: var(--lf-radius);
  background: #0B0F14;
  padding: 16px;
}

.lfp-head{
  display:grid;
  grid-template-columns: 96px 1fr auto;
  gap: 18px;
  align-items: start;
}
@media (max-width: 900px){
  .lfp-head{grid-template-columns: 90px 1fr; grid-template-rows:auto auto}
  .lfp-stats{grid-column: 1 / -1}
}

.lfp-ava{
  width:96px;
  height:96px;
  border-radius:9999px;
  overflow:hidden;
  border: 1px solid var(--lf-line);
  background: #0B0F14;
  display:grid;place-items:center;
}
.lfp-ava-ico{font-size:28px}

.lfp-name{font-size:22px;font-weight:950;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.lfp-username{color: var(--lf-muted);font-weight:900;margin-top:2px}

.lfp-title {
    margin-top: 10px;
    color: var(--lf-text);
    font-weight: 850;
    margin-bottom: 10px;
}

.lfp-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}

.lfp-stats{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}
.lfp-stat{
  border:1px solid var(--lf-line);
  background: rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 12px;
  text-align:center;
}
.lfp-stat-v{font-size:18px;font-weight:950}
.lfp-stat-k{font-size:12px;color:var(--lf-muted);font-weight:900;margin-top:2px}

.lfp-section{margin-top:16px}
.lfp-section-title{font-weight:950;margin-bottom:10px}

.lfp-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 900px){ .lfp-grid{grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 520px){ .lfp-grid{grid-template-columns: 1fr;} }

.lfp-post{
  border:1px solid var(--lf-line);
  background: rgba(0,0,0,.18);
  border-radius: 16px;
  overflow:hidden;
  cursor:pointer;
}
.lfp-post:hover{background: rgba(255,255,255,.06)}

.lfp-post-media{position:relative;border-bottom:1px solid var(--lf-line)}
.lfp-post-ph{
  height: 160px;
  display:grid;place-items:center;
  gap:8px;
  background:
    radial-gradient(600px 220px at 30% 10%, rgba(212,175,55,.10), transparent 60%),
    rgba(255,255,255,.03);
}
.lfp-post-ico{font-size:28px}
.lfp-post-txt{color: var(--lf-muted);font-weight:950}

.lfp-post-time{
  position:absolute;
  left:10px;
  bottom:10px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--lf-line);
  background: rgba(0,0,0,.45);
  color: var(--lf-text);
  font-weight:900;
  font-size:12px;
}

.lfp-post-meta{padding:12px}
.lfp-post-title{font-weight:950}
.lfp-post-sub{
  color: var(--lf-muted);
  font-weight:850;
  font-size:13px;
  margin-top:4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ===== SETTINGS HUB + EDIT PROFILE ===== */

.lfsetx-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:14px;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.lfsetx-card{padding:16px}

.lfsetx-list{display:grid;gap:10px}
.lfsetx-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px;
  border-radius: 16px;
  border: 1px solid var(--lf-line);
  background: rgba(0,0,0,.18);
  font-weight:950;
  color: var(--lf-text);
  cursor:pointer;
}
.lfsetx-item:hover{background: rgba(255,255,255,.06)}
.lfsetx-sep{height:1px;background: var(--lf-line);margin:6px 0}
.lfred{border-color: rgba(185,28,28,.45); background: rgba(185,28,28,.10)}

/* Edit profile form */


/* ---------- Visibility badge colors ---------- */

/* By class (recommended) */
.lfbadge.lfvis-paid{
  background: rgba(59,130,246,.18);
  border: 1px solid rgba(59,130,246,.35);
  color: rgba(191,219,254,.95);
}
.lfbadge.lfvis-free{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.90);
}

/* Optional fallback: by data-vis (works even if class missing) */
.lfbadge[data-vis="subscribers"]{
  background: rgba(59,130,246,.18);
  border: 1px solid rgba(59,130,246,.35);
  color: rgba(191,219,254,.95);
}
.lfbadge[data-vis="followers"]{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.90);
}

/* ---------- Buttons: Paid/Subscribers blue, Free/Followers neutral ---------- */
.lfpost .lfbtn[data-set-vis="subscribers"]{
  border-color: rgba(59,130,246,.35);
  background: rgba(59,130,246,.14);
  color: rgba(191,219,254,.95);
}
.lfpost .lfbtn[data-set-vis="followers"]{
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
}


.lfbtn { display:inline-flex; align-items:center; gap:10px; margin-top: 15px;}
.lfbtn-ico { display:inline-grid; place-items:center; width:18px; height:18px; }
.lfbtn-txt { line-height:1; }

.lfp-socrow{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.lfp-soclbl{
  color: var(--lf-muted);
  font-weight: 800;
  font-size: 12px;
}

.lfp-ava-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .85;
}

.lfp-soc{
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--lf-line);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
  text-decoration: none;
}

.lfp-socico{
  color: rgba(255,255,255,.92);
}

.lfp-soc:hover{
  background: rgba(255,255,255,.06);
}


.lfep-head{
  display:flex;
  gap:14px;
  align-items:center;
  margin-bottom:14px;
}
.lfep-ava{
  width:84px;
  height:84px;
  border-radius: 999px;
  overflow: hidden;
  border:1px solid var(--lf-line);
  background: rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
}
.lfep-ava-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 !important; /* wrapper teeb ringi */
  display: block;
}
@media (max-width: 520px){
  .lfep-ava{ width:56px; height:56px; flex-basis:56px; }
}
.lfep-ava-title{font-weight:950;margin-bottom:6px}
.lfep-file{color: var(--lf-muted); font-weight:850}

.lfep-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 900px){ .lfep-grid{grid-template-columns:1fr} }

.lfep-span2{grid-column: 1 / -1}
.lfep-field{display:flex;flex-direction:column;gap:8px}
.lfep-label{font-weight:950}

.lfep-input{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--lf-line);
  background: rgba(0,0,0,.25);
  color: var(--lf-text);
  outline:none;
  font-weight:900;
}
.lfep-input::placeholder{color: rgba(255,255,255,.45)}
.lfep-textarea{min-height: 110px; resize: vertical}

.lfep-radio{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--lf-line);
  background: rgba(0,0,0,.25);
  font-weight:900;
  color: var(--lf-text);
}
.lfep-radio input {
  accent-color: #3B82F6;
}

.lfep-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
  align-items:center;
  justify-content:flex-end;
}
.lfep-msg{
  margin-right:auto;
  padding:10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(212,175,55,.35);
  background: rgba(212,175,55,.10);
  font-weight:950;
}

/* Blocked search */
.lfblk-top{margin-bottom:12px}
.lfblk-search{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: 999px;
  border: 1px solid var(--lf-line);
  background: rgba(255,255,255,.06);
}
.lfblk-input{
  flex:1;
  border:0;
  outline:none;
  background: transparent;
  color: var(--lf-text);
  font-weight:850;
}
.lfblk-input::placeholder{color: rgba(255,255,255,.45)}
/* ===== NEW POST+ ===== */

/* ========== NEW POST (Premium) ========== */

.lfnp-card{
  padding: 18px;
  border-radius: calc(var(--lf-radius) + 6px);
  border: 1px solid rgba(255,255,255,.10);
  background: #0F141B;
  box-shadow:
    0 18px 60px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter: blur(14px);
}

.lfnp-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 14px;
  margin-bottom: 16px;
  flex-wrap:wrap;
}

.lfnp-head{
  display:flex;
  gap: 12px;
  align-items:center;
  margin-bottom: 16px;
}

.lfnp-ava{
  width: 54px;
  height: 54px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.10), rgba(0,0,0,.25));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 30px rgba(0,0,0,.35);
  display:grid;
  place-items:center;
}

.lfpkg-meta{
  margin-top: 10px;       
  padding-left: 14px;     
  padding-bottom: 2px;
}

.lfnp-name{
  font-weight: 950;
  letter-spacing: .2px;
  line-height: 1.05;
}
.lfnp-handle{
  color: var(--lf-muted);
  font-weight: 850;
  margin-top: 4px;
  font-size: 12px;
}

/* Two-column layout: form + preview */
.lfnp-grid{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 14px;
}
@media (max-width: 900px){
  .lfnp-grid{grid-template-columns:1fr}
}

/* Field wrapper */
.lfnp-field{
  display:flex;
  flex-direction:column;
  gap: 8px;
  margin-bottom: 12px;
}

.lfnp-label{
  font-weight: 950;
  letter-spacing: .15px;
}

.lfnp-sub{
  color: var(--lf-muted);
  font-weight: 850;
  font-size: 12px;
  margin-top: 2px;
  line-height: 1.35;
}

/* Inputs */
.lfnp-input{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.26);
  color: var(--lf-text);
  outline: none;
  font-weight: 900;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 10px 28px rgba(0,0,0,.22);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}

.lfnp-input::placeholder{color: rgba(255,255,255,.40)}

.lfnp-input:focus{
  border-color: rgba(212,175,55,.45);
  background: rgba(0,0,0,.30);
  box-shadow:
    0 0 0 3px rgba(212,175,55,.14),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 14px 40px rgba(0,0,0,.35);
}

.lfnp-textarea{min-height: 130px; resize: vertical}

/* Upload card */
.lfnp-upload{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,.22);
  background: rgba(255,255,255,.05);
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.lfnp-upload:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(212,175,55,.30);
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
  transform: translateY(-1px);
}

.lfnp-upload:active{transform: translateY(0px)}

.lfnp-upload input{display:none}

.lfnp-upload-ico{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.10), rgba(0,0,0,.20));
  display:grid;
  place-items:center;
  font-weight: 950;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 12px 30px rgba(0,0,0,.28);
}

.lfnp-upload-title{font-weight: 950; letter-spacing: .15px}
.lfnp-upload-sub{color: var(--lf-muted); font-weight: 850; font-size: 12px; margin-top: 3px}

/* Row blocks */
.lfnp-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  margin-bottom: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

/* Toggle */
.lfnp-toggle{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.26);
  color: var(--lf-text);
  cursor: pointer;
  font-weight: 950;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.lfnp-toggle:hover{
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 14px 34px rgba(0,0,0,.26);
  transform: translateY(-1px);
}
.lfnp-toggle:active{transform: translateY(0px)}

.lfnp-toggle-dot{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}

.lfnp-toggle.is-on {
  border-color: rgba(59,130,246,0.42);
  background: rgba(59,130,246,0.10);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.10);
}
.lfnp-toggle.is-on .lfnp-toggle-dot {
  background: #3B82F6;
}

/* =========================
   Chat bubbles (FINAL)
========================= */

.lfmsg-gift-player {
  position: relative;
  width: 220px;
  height: 220px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  display: grid;
  place-items: center;
}

.lfsvga-fallback{
  position:absolute;
  inset:0;
  display:none;
  place-items:center;
  color: rgba(255,255,255,.6);
  font-size: 12px;
}


.lfchat-gift { display:flex; flex-direction:column; gap:10px; }
.lfchat-gift-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.lfchat-gift-name { font-weight:800; }
.lfchat-gift-coins { opacity:.85; font-weight:700; }
.lfchat-gift-canvas { width:220px; height:220px; border-radius:14px; background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); }
.lfmodal { position:fixed; inset:0; z-index:9999; display:grid; place-items:center; }
.lfmodal-backdrop { position:absolute; inset:0; background: rgba(0,0,0,.55); }
.lfmodal-card { position:relative; width:min(520px, 92vw); max-height: 80vh; overflow:auto; padding:16px; border-radius:16px; background: rgba(20,20,24,.92); border:1px solid rgba(255,255,255,.10); }


/* Row alignment */
.lfchat-row {
  display: flex;
  margin: 8px 0;
}

.lfchat-row-me {
  justify-content: flex-end;
}

/* Base bubble */
.lfchat-bubble {
  max-width: min(72%, 640px);
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06); /* other user */
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.4;
}

/* MY messages – BLUE bubble */
.lfchat-bubble-me {
  background: linear-gradient(135deg, #1f6fe0, #3fa9f5);
  border: none;
  color: #ffffff;
}

/* Text inside bubble */
.lfchat-text {
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 14px;
}

/* Image inside bubble */
.lfchat-imgwrap {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 8px;
}

.lfchat-img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 420px;
  object-fit: cover;
}
/* =========================
   Chat meta (time + status)
========================= */
.lfchat-meta{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:10px;
  opacity: 0;
  padding: 0 6px;
  color: rgba(255,255,255,.55);
  font-size: 12px;
  user-select: none;
}

.lfchat-meta-me{
  justify-content: flex-end;
}

.lfchat-time{
  letter-spacing: .2px;
}

.lfchat-status{
  display:flex;
  align-items:center;
  gap:6px;
  opacity: .95;
}

.lfchat-status .lfico svg{
  width: 14px;
  height: 14px;
}

/* make status text subtle */
.lfchat-status-txt{
  font-size: 12px;
  color: rgba(255,255,255,.55);
}

/* Optional: if you want "seen" slightly brighter */
.lfchat-status-seen .lfchat-status-txt{
  color: rgba(255,255,255,.72);
}

/* ===== Chat: typing indicator ===== */
.lfchat-typing{
  display:flex;
  gap:8px;
  align-items:center;
  padding:8px 14px;
  font-size:12px;
  opacity:.70;
  color: rgba(255,255,255,.80);
}

.lfchat-typing-dot{
  font-size:18px;
  line-height:0;
  transform: translateY(-1px);
}

/* ===== Chat: mobile spacing polish ===== */
@media (max-width: 520px){
  #lfChatList{ height:60vh !important; padding:12px !important; }
  .lfmsg-top{ gap:8px; }
  #lfChatForm{ gap:8px !important; }
  #lfChatInput{ min-height:44px; }
}


/* =========================
   Mobile spacing polish
========================= */
@media (max-width: 520px){
  /* bubbles wider on mobile */
  .lfchat-bubble{
    max-width: 88%;
    padding: 10px 12px;
    border-radius: 16px;
  }

  .lfchat-bubble-me{
    border-radius: 16px;
  }

  /* list padding smaller */
  #lfChatList{
    padding: 12px !important;
    height: 62vh !important;
  }

  /* form tighter */
  #lfChatForm{
    gap: 8px !important;
  }

  #lfChatAttach{
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 14px;
    display: grid;
    place-items: center;
  }

  #lfChatInput{
    height: 44px;
    border-radius: 14px;
  }

  #lfChatSend{
    height: 44px;
    border-radius: 14px;
    padding: 0 14px;
  }

  /* meta a bit smaller on mobile */
  .lfchat-meta{
    font-size: 11px;
    margin-top: 5px;
  }
}

/* Actions + status message */


.lfnp-actions{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap:wrap;
}

.lfmsg-empty-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .85;
}

.lfnp-msg{
  margin-right:auto;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(212,175,55,.35);
  background: rgba(212,175,55,.10);
  font-weight: 950;
  line-height: 1.25;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.lfnp-msg.is-err{
  border-color: rgba(185,28,28,.45);
  background: rgba(185,28,28,.12);
}

/* Preview box */
.lfnp-preview{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: calc(var(--lf-radius) + 4px);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.16));
  padding: 12px;
  min-height: 150px;
  display:flex;
  gap: 12px;
  align-items:center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 18px 50px rgba(0,0,0,.35);
}

.lfnp-prev-ico{
  width: 48px;
  height: 48px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  display:grid;
  place-items:center;
  font-weight: 950;
}

.lfnp-prev-name{font-weight: 950}
.lfnp-prev-sub{color: var(--lf-muted); font-weight: 850; font-size: 12px; margin-top: 4px}

.lfnp-prev-empty{
  width:100%;
  text-align:center;
  padding: 6px 0;
}
.lfnp-prev-empty-ico{font-size: 26px}
.lfnp-prev-empty-title{font-weight: 950; margin-top: 6px}
.lfnp-prev-empty-sub{color: var(--lf-muted); font-weight: 850; margin-top: 4px}

/* Footer note */
.lfnp-note{
  margin-top: 12px;
  color: var(--lf-muted);
  font-weight: 850;
  font-size: 12px;
  line-height: 1.45;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .lfnp-input,
  .lfnp-upload,
  .lfnp-toggle{transition:none}
}


/* ===== RIGHT HAMBURGER DRAWER ===== */

.lfhdr{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 14px 16px;
}

.lfhamb{
  width:44px;height:44px;
  border-radius: 14px;
  border:1px solid var(--lf-line);
  background: rgba(255,255,255,.06);
  color: var(--lf-text);
  font-size: 22px;
  font-weight: 950;
  cursor:pointer;
}
.lfhamb:hover{ background: rgba(255,255,255,.10); }

.lfdrawer-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
  z-index: 80;
}
.lfdrawer-overlay.is-open{
  opacity:1;
  pointer-events:auto;
}

.lfdrawer{
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 260px;           /* closed target size from screenshot */
  max-width: 86vw;
  background: rgba(0,0,0,.92);
  border-left: 1px solid var(--lf-line);
  transform: translateX(102%);
  transition: transform .18s ease;
  z-index: 90;
  display:flex;
  flex-direction:column;
  padding: 18px 14px;
}
.lfdrawer.is-open{ transform: translateX(0); }

.lfdrawer-head{display:flex;justify-content:center;margin-bottom:10px;}
.lfdrawer-logo{
  width: 92px; height: 92px;
  border-radius: 26px;
  display:grid;
  place-items:center;
  background: radial-gradient(circle at 40% 30%, rgba(255,64,129,.55), rgba(255,64,129,.20));
  border: 1px solid rgba(255,255,255,.10);
}
.lfdrawer-logoMark{font-size:38px;font-weight:950;color:#fff;opacity:.95;}

.lfdrawer-nav{
  display:flex;
  flex-direction:column;
  gap: 6px;
  margin-top: 8px;
  padding-right: 6px;
  overflow:auto;
}
.lfdrawer-sep{
  height:1px;
  background: var(--lf-line);
  margin: 10px 0;
}

.lfdrawer-nav .lfnav-item{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 16px;
  color: rgba(255,255,255,.70);
  font-weight: 900;
  border: 1px solid transparent;
  background: transparent;
}
.lfdrawer-nav .lfnav-item:hover{
  background: rgba(255,255,255,.06);
}
.lfdrawer-nav .lfnav-item.is-active{
  color: #ff4d79;
  background: rgba(255,77,121,.10);
  border-color: rgba(255,77,121,.20);
}

.lfico{width:22px;display:inline-grid;place-items:center;opacity:.95;}

.lfdrawer-cta{
  margin-top:auto;
  padding-top: 14px;
}
.lfbtn-wide{
  width:100%;
  display:flex;
  justify-content:center;
  gap:10px;
  border-radius: 999px;
  padding: 14px 14px;
  font-weight: 950;
}
.lfplus{font-size:18px;line-height:1;}

.lf-noScroll{ overflow: hidden; }
/* ===== LEFT ICON RAIL (STATIC) ===== */

.lfapp{
  display:flex;
  min-height:100vh;
}

.lfrail{
  position: fixed;           /* static always visible */
  top:0;
  left:0;
  height:100vh;
  width: 240px;              /* expanded width */
  background: rgba(0,0,0,.92);
  border-right: 1px solid var(--lf-line);
  padding: 14px 12px;
  display:flex;
  flex-direction:column;
  z-index: 90;
  transition: width .18s ease;
}

/* collapsed = icons only */
.lfrail.is-collapsed{
  width: 82px;               /* icons-only width */
}

/* push main content right */
.lfmain{
  margin-left: 240px;
  width: 100%;
  min-height:100vh;
}
.lfrail.is-collapsed ~ .lfmain{
  margin-left: 82px;
}

.lfrail-top{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom: 10px;
}

.lfhamb-left{
  width:44px;height:44px;
  border-radius: 14px;
  border:1px solid var(--lf-line);
  background: rgba(255,255,255,.06);
  color: var(--lf-text);
  font-size: 22px;
  font-weight: 950;
  cursor:pointer;
}
.lfhamb-left:hover{background: rgba(255,255,255,.10);}

.lfrail-logo{
  width: 56px; height: 56px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  background: radial-gradient(circle at 40% 30%, rgba(255,64,129,.55), rgba(255,64,129,.20));
  border: 1px solid rgba(255,255,255,.10);
}
.lfrail-logoMark{font-size:26px;font-weight:950;color:#fff;opacity:.95;}

.lfrail-nav{
  display:flex;
  flex-direction:column;
  gap: 6px;
  padding-right: 4px;
  overflow:auto;
}

.lfrail-sep{
  height:1px;
  background: var(--lf-line);
  margin: 10px 0;
}

/* items */
.lfrail .lfnav-item{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 16px;
  color: rgba(255,255,255,.70);
  font-weight: 900;
  border: 1px solid transparent;
}
.lfrail .lfnav-item:hover{background: rgba(255,255,255,.06);}
.lfrail .lfnav-item.is-active{
  color: #E5E7EB;
  background: #141A22;
  border-left: 3px solid rgba(59,130,246,0.6);
}
.lfico{width:22px;display:inline-grid;place-items:center;opacity:.95}

/* labels hide in collapsed mode */
.lflabel{display:inline}
.lfrail.is-collapsed .lflabel{display:none}

/* center icons when collapsed */
.lfrail.is-collapsed .lfnav-item{
  justify-content:center;
}
.lfrail.is-collapsed .lfnav-item .lfico{width:auto}

/* CTA */
.lfrail-cta{margin-top:auto;padding-top:14px}
.lfbtn-wide{width:100%;display:flex;justify-content:center;gap:10px;border-radius:999px;padding:14px 14px;font-weight:950}
.lfrail.is-collapsed .lfbtn-wide{padding:14px 0}
.lfrail.is-collapsed .lfplus{font-size:20px}

/* overlay only when expanded (optional “focus” effect) */
.lfrail-overlay{
  display:none;
}

/* overlay ON only for mobile drawer */
@media (max-width: 900px){
  .lfrail-overlay{
    display:block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    opacity:0;
    pointer-events:none;
    transition: opacity .18s ease;
    z-index: 80;
  }
  .lfrail-overlay.is-open{
    opacity:1;
    pointer-events:auto;
  }
}

/* MOBILE DRAWER behavior */
@media (max-width: 900px){
  .lfrail{
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 90;
    transform: translateX(0);
    transition: transform .18s ease;
  }

  /* when expanded => slide in */
  .lfrail:not(.is-collapsed){
    transform: translateX(0);
  }

  /* collapsed => keep it hidden (drawer closed) */
  .lfrail.is-collapsed{
    transform: translateX(0);
  }
}

@media (min-width: 901px){
  .lfrail{
    position: sticky;
    top: 0;
    height: 100vh;
  }
}
/* ===== LOGO AS MENU TOGGLE ===== */

.lfrail-logoBtn{
  width:64px;
  height:64px;
  border-radius:50%;
  border:none;
  background: transparent;
  display:grid;
  place-items:center;
  cursor:pointer;
  margin: 8px auto 14px;
}

.lfrail-logoImg {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: contain;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.lfrail-logoBtn:hover .lfrail-logoImg{
  transform: scale(1.05);
}

/* collapsed state – logo stays centered */
.lfrail.is-collapsed .lfrail-logoBtn{
  margin-bottom: 18px;
}

/* Remove white focus ring from logo button (mouse click) */
.lfrail-logoBtn:focus {
  outline: none;
}

/* Keep clean focus behavior */
.lfrail-logoBtn:focus-visible {
  outline: none;
}

/* Prevent iOS tap highlight */
.lfrail-logoBtn {
  -webkit-tap-highlight-color: transparent;
}

/* Remove potential inline image halo */
.lfrail-logoImg {
  display: block;
}

/* ===== HOME FEED ===== */
/* match Reels width */
.lffeed-wrap{
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px; /* sama tunne nagu reels / mobile */
}

/* safety: card never stretches wider than wrap */
.lffeed-card{
  width: 100%;
}

.lffeed-head{margin-bottom:14px}
.lffeed-list{display:grid; gap:14px}

.lffeed-card.is-unlocked { outline: 2px solid rgba(255,255,255,.35); }

/* FEED CARD: prevent overflow glitches */
.lffeed-card{
  overflow:hidden;
}

.lffeed-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding: 12px;
  border-bottom: 1px solid var(--lf-line);
}
.lffeed-creator{
  display:flex;
  align-items:center;
  gap:10px;
  border:0;
  background: transparent;
  color: var(--lf-text);
  cursor:pointer;
  padding:0;
}
.lffeed-cname{font-weight:950; display:block; float: left;}
.lffeed-chandle {
  color: var(--lf-muted);
  font-weight: 600;
  font-size: 12px;
  display: block;
  margin-top: 2px;
  letter-spacing: 0.2px;
  text-align: left;
} 

.lffeed-actions{position:relative}
.lffeed-more{
  width:40px;height:40px;
  border-radius: 14px;
  border:1px solid var(--lf-line);
  background: rgba(255,255,255,.06);
  color: var(--lf-text);
  font-weight:950;
  cursor:pointer;

  display:grid;
  place-items:center;
}
.lffeed-menu{
  position:absolute;
  right:0;
  top:44px;
  min-width: 170px;
  border-radius: 16px;
  border: 1px solid var(--lf-line);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  padding: 6px;
  display:none;
  z-index: 6;
}
.lffeed-menu.is-open{display:block}
.lffeed-menuitem{
  width:100%;
  text-align:left;
  padding:10px 10px;
  border-radius: 12px;
  border:0;
  background: transparent;
  color: var(--lf-text);
  cursor:pointer;
  font-weight:900;
}
.lffeed-menuitem:hover{background: rgba(255,255,255,.08)}

.lffeed-media{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.08);
  aspect-ratio: 4 / 5;
}
.lffeed-mediaEl{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.lffeed-mediaEl[controls]{
  background: #000;
}

.lffeed-mediaPh{
  width: 100%;
  height: 100%;
  display:grid;
  place-items:center;
}
/* If post is video => 9:16 */
.lffeed-media.is-video{ aspect-ratio: 9 / 16; }

.lffeed-type{
  padding:8px 12px;
  border-radius: 999px;
  border:1px solid var(--lf-line);
  background: rgba(0,0,0,.45);
  font-weight:950;
  color: var(--lf-text);
  letter-spacing:.8px;
  font-size:12px;
}

.lffeed-media.is-locked{
  background:
    radial-gradient(1200px 700px at 25% 15%, rgba(80,160,255,.18), transparent 55%),
    radial-gradient(900px 600px at 75% 30%, rgba(255,200,120,.14), transparent 52%),
    radial-gradient(900px 700px at 50% 85%, rgba(140,80,255,.12), transparent 55%),
    rgba(0,0,0,.45);
}
.lffeed-lockedPh{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
}
/* subtle icon inside media (optional but clean) */
.lffeed-lockedPhIco{
  width:56px;
  height:56px;
  border-radius:16px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(255,255,255,.90);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.lffeed-blur{
  position:absolute;
  inset:0;
  background:
    radial-gradient(900px 520px at 18% 18%, rgba(80,160,255,.22), transparent 60%),
    radial-gradient(820px 520px at 82% 30%, rgba(255,200,120,.18), transparent 58%),
    radial-gradient(900px 620px at 50% 88%, rgba(140,80,255,.16), transparent 62%),
    rgba(0,0,0,.35);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  opacity: .95;
  pointer-events:none;
}
.lffeed-lock{
  position:absolute; inset:0;
  display:grid;
  place-items:center;
  text-align:center;
  padding: 16px;
  z-index: 3;
}
.lffeed-lockIco{font-size:28px; place-items: center;}
.lffeed-lockTitle{font-weight:950; font-size:18px; margin-top:6px}
.lffeed-lockSub{color: var(--lf-muted); font-weight:850; margin-top:4px}
.lffeed-subBtn{margin-top:12px}

.lffeed-body{padding: 12px}
.lffeed-title{font-weight:950}
.lffeed-desc{color: var(--lf-muted); font-weight:850; margin-top:6px; line-height:1.45}
.lffeed-bottom{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top: 12px;
  flex-wrap:wrap;
}
.lffeed-btn{
  border: 1px solid var(--lf-line);
  background: rgba(255,255,255,.06);
  color: var(--lf-text);
  font-weight:950;
  padding:10px 12px;
  border-radius: 999px;
  cursor:pointer;
  display:inline-flex;
  gap:8px;
  align-items:center;
}
.lffeed-btn.is-liked{
  background: rgba(255,77,121,.14);
  border-color: rgba(255,77,121,.25);
  color:#ff4d79;
}
.lffeed-spacer{flex:1}

/* ===== COMMENT MODAL (SHEET) ===== */

.lfmodal{
  position: fixed;
  inset: 0;
  display:none;
  z-index: 200;
}
.lfmodal.is-open{display:block}

.lfmodal-overlay{
  position:absolute; inset:0;
  background: rgba(0,0,0,.55);
}

.lfmodal-sheet{
  position:absolute;
  left:50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(720px, 92vw);
  border-radius: 22px;
  border: 1px solid var(--lf-line);
  background: rgba(0,0,0,.88);
  backdrop-filter: blur(10px);
  overflow:hidden;
}

.lfmodal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--lf-line);
}
.lfmodal-title{font-weight:950}
.lfmodal-close{
  width:40px;height:40px;
  border-radius: 14px;
  border:1px solid var(--lf-line);
  background: rgba(255,255,255,.06);
  color: var(--lf-text);
  cursor:pointer;
  font-weight:950;
}

.lfmodal-body{
  padding: 12px 14px;
  max-height: 48vh;
  overflow:auto;
}
.lfmodal-empty{color: var(--lf-muted); font-weight:850}

.lfmodal-foot{
  display:flex;
  gap:10px;
  padding: 12px 14px;
  border-top: 1px solid var(--lf-line);
}
.lfmodal-input{
  flex:1;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--lf-line);
  background: rgba(255,255,255,.06);
  color: var(--lf-text);
  outline:none;
  font-weight:900;
}
.lfmodal-input::placeholder{color: rgba(255,255,255,.45)}

.lfcomment{
  display:flex;
  gap:10px;
  padding:10px;
  border:1px solid var(--lf-line);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  margin-bottom:10px;
}
.lfcomment-ava{
  width:38px;
  height:38px;
  border-radius:9999px;
  overflow:hidden; 
  border:1px solid var(--lf-line);
  background: rgba(255,255,255,.06);
  display:grid;
  place-items:center;
}
.lfcomment-name{font-weight:950}
.lfcomment-text{color: var(--lf-muted); font-weight:850; margin-top:4px; line-height:1.4}

/* ===== CREATOR GRID ===== */

.lfcr-top{margin-bottom:12px}
.lfcr-card{padding:16px}

.lfcr-head{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-bottom: 14px;
}
.lfcr-ava{
  width:64px;height:64px;border-radius: 20px;
  border:1px solid var(--lf-line);
  background: rgba(255,255,255,.06);
  display:grid;place-items:center;
}
.lfcr-info{min-width: 220px}
.lfcr-name{font-size:20px;font-weight:950;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.lfcr-handle{color: var(--lf-muted); font-weight:850; margin-top:2px}
.lfcr-title{margin-top:8px; font-weight:850}

.lfcr-sectionTitle{font-weight:950;margin-bottom:10px}
.lfcr-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 900px){ .lfcr-grid{grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 520px){ .lfcr-grid{grid-template-columns: 1fr;} }

.lfcr-post{
  border:1px solid var(--lf-line);
  background: rgba(0,0,0,.18);
  border-radius: 16px;
  overflow:hidden;
  cursor:pointer;
  position:relative;
}
.lfcr-post:hover{background: rgba(255,255,255,.06)}
.lfcr-ph{
  height: 150px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(600px 200px at 30% 20%, rgba(255,64,129,.16), transparent 65%),
    rgba(255,255,255,.03);
}
.lfcr-phType{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--lf-line);
  background: rgba(0,0,0,.45);
  font-weight:950;
  font-size:12px;
}
.lfcr-phTime{
  position:absolute;
  left:10px; top:10px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--lf-line);
  background: rgba(0,0,0,.45);
  font-weight:900;
  font-size:12px;
  color: var(--lf-text);
}
.lfcr-lock{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  backdrop-filter: blur(14px);
  background: rgba(0,0,0,.25);
  font-weight:950;
}
.lfcr-cap{
  padding: 10px 12px;
  border-top: 1px solid var(--lf-line);
  font-weight:900;
  color: rgba(255,255,255,.85);
}

.lfnav-item.is-disabled {
  opacity: 0.45;
  pointer-events: none;
  cursor: not-allowed;
}

/* =========================
   Creator Verify / Apply UI
   (scoped: .lfvfy)
========================= */

.lfvfy {
  max-width: 980px;
  margin: 0 auto;
  padding: 34px 28px 50px;
}

.lfvfy-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.lfvfy-title {
  margin: 0;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: .2px;
}

.lfvfy-sub {
  margin: 8px 0 0;
  opacity: .72;
  font-size: 15px;
}

.lfvfy-card {
  background: #0F141B;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 18px;
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 48px rgba(0,0,0,.45);
}

.lfvfy-hero {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 14px;
  align-items: start;
}

.lfvfy-icon {
  width: 54px;
  height: 54px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 20px;
}

.lfvfy-actions {
  margin-top: 16px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.lfvfy-note {
  margin-top: 10px;
  opacity: .65;
  font-size: 13px;
}

.lfvfy-divider {
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: 16px 0;
}

.lfvfy-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 860px){
  .lfvfy-grid2 { grid-template-columns: 1fr; }
  .lfvfy-title { font-size: 36px; }
}

.lfvfy-mini {
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  padding: 14px;
}
.lfvfy-mini b { display:block; margin-bottom: 6px; }
.lfvfy-mini p { margin:0; opacity:.72; font-size:14px; }

.lfvfy-btn {
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: #fff;
  border-radius: 999px;
  padding: 12px 16px;
  cursor: pointer;
  font-weight: 700;
}
.lfvfy-btn--xl { padding: 14px 18px; min-width: 220px; }
.lfvfy-btn--primary {
  border: none;
  color: #ffffff;
  background: linear-gradient(
    135deg,
    #2563EB 0%,
    #3B82F6 55%,
    #60A5FA 100%
  );
}

.lfvfy-btn--primary:hover {
  box-shadow: 0 14px 40px rgba(37,99,235,.40);
  transform: translateY(-1px);
}

/* Apply form */
.lfvfy-form {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lfvfy-field span {
  display: block;
  font-size: 13px;
  opacity: .75;
  margin-bottom: 6px;
}

.lfvfy-input {
  width: 100%;
  padding: 14px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: #fff;
  outline: none;
}

.lfvfy-uploadGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 860px){
  .lfvfy-uploadGrid { grid-template-columns: 1fr; }
}

.lfvfy-upload {
  padding: 16px;
  border-radius: 14px;
  border: 1px dashed rgba(185,28,28,.65);
  background: rgba(0,0,0,.18);
}
.lfvfy-upload b { display:block; margin-bottom: 10px; }

.lfvfy-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  opacity: .85;
}
.lfvfy-check a { color: #60a5fa; text-decoration: none; }

/* =========================
   Login Page (scoped)
========================= */

.lflogin{
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
}

@media (max-width: 980px){
  .lflogin{ grid-template-columns: 1fr; }
  .lflogin-left{ display:none; }
}

.lflogin-left{
  position: relative;
  background-size: cover;
  background-position: center;
}

.lflogin-overlay{
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,.85));
}

.lflogin-brand{
  position:absolute;
  left: 42px;
  bottom: 42px;
  z-index: 2;
  color:#fff;
}

.lflogin-mark{
  font-size: 44px;
  font-weight: 900;
  letter-spacing: .3px;
}

.lflogin-tag{
  margin-top: 8px;
  opacity: .75;
}

.lflogin-right{
  display:grid;
  place-items:center;
  padding: 40px 22px;
  background: rgba(0,0,0,.55);
}

.lflogin-card{
  width: min(460px, 100%);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  padding: 26px;
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 70px rgba(0,0,0,.45);
  color:#fff;
}

.lflogin-logo{
  width: 64px; height: 64px;
  border-radius: 999px;
  margin-bottom: 14px;
  background: none;
}

.lflogin-logo img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  border-radius: 18px;
}

.lflogin-logo-fallback {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  background: linear-gradient(135deg,#b91c1c,#f59e0b);
  color: #fff;
}

.lflogin-title{
  margin: 0;
  font-size: 34px;
  font-weight: 900;
}

.lflogin-sub{
  margin: 8px 0 18px;
  opacity: .75;
}

.lflogin-field{
  display:block;
  margin-bottom: 12px;
}

.lflogin-field span{
  display:block;
  font-size: 13px;
  opacity: .75;
  margin-bottom: 6px;
}

.lflogin-input{
  width:100%;
  padding: 14px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color:#fff;
  outline: none;
}

.lflogin-btn {
  width: 100%;
  margin-top: 8px;
  padding: 14px 16px;
  border: none;
  border-radius: 999px;
  font-weight: 900;
  cursor: pointer;
  color: #ffffff;
  background: linear-gradient(
    135deg,
    #2563EB 0%,   /* deep blue */
    #3B82F6 55%,  /* primary Lusfera blue */
    #60A5FA 100%  /* soft highlight */
  );
}

.lflogin-btn:hover {
  box-shadow: 0 12px 32px rgba(37,99,235,.35);
  transform: translateY(-1px);
}

.lflogin-btn:disabled{
  opacity: .7;
  cursor: not-allowed;
}

.lflogin-error{
  background: rgba(185,28,28,.18);
  border: 1px solid rgba(185,28,28,.35);
  padding: 10px 12px;
  border-radius: 12px;
  margin-bottom: 12px;
  color:#fff;
}

.lflogin-foot{
  margin-top: 14px;
  text-align:center;
  opacity: .8;
}

.lflogin-link{
  color:#60a5fa;
  text-decoration:none;
}

/* your-packages.css */

.lfpkglist-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.lfpkglist-top-actions {
  display: flex;
  gap: 10px;
}

.lfpkglist-card {
  padding: 18px;
}

.lfpkglist-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.lfpkglist-title {
  font-weight: 700;
  font-size: 16px;
}

.lfpkglist-meta {
  font-size: 12px;
  opacity: 0.8;
  margin-top: 4px;
}

.lfpkglist-error {
  margin: 10px 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 60, 60, 0.25);
  background: rgba(255, 60, 60, 0.08);
  color: rgba(255, 200, 200, 0.95);
}

.lfpkglist-loading {
  padding: 10px 0;
  font-size: 13px;
  opacity: 0.8;
}

.lfpkglist-table {
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.lfpkglist-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr 1fr 1.2fr;
  gap: 10px;
  padding: 12px 12px;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.lfpkglist-row.header {
  border-top: 0;
  background: rgba(0, 0, 0, 0.25);
  font-size: 12px;
  opacity: 0.9;
}

.lfpkglist-cell {
  font-size: 13px;
}

.lfpkglist-name {
  font-weight: 650;
}

.lfpkglist-price,
.lfpkglist-period {
  opacity: 0.9;
}

.lfpkglist-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.lfpkglist-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.10);
}

.lfpkglist-pill.on {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.35);
  color: #fff;
}

.lfpkglist-pill.off {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
  opacity: 0.85;
  color: #fff;
}

/* buttons */
.lfpkglist-btn {
  height: 36px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.lfpkglist-btn:hover {
  border-color: rgba(255, 255, 255, 0.22);
}

.lfpkglist-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.lfpkglist-btn.primary {
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, #2563EB, #3B82F6);
}
.lfpkglist-btn.primary:hover {
  background: linear-gradient(135deg, #1E40AF, #2563EB);
}

.lfpkglist-btn.ghost {
  background: transparent;
}

.lfpkglist-btn.danger {
  border-color: rgba(255, 80, 80, 0.25);
  background: rgba(255, 80, 80, 0.10);
}

/* empty state */
.lfpkglist-empty {
  padding: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.lfpkglist-empty-title {
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 6px;
}

.lfpkglist-empty-sub {
  font-size: 12px;
  opacity: 0.85;
  margin-bottom: 12px;
}

/* responsive */
@media (max-width: 820px) {
  .lfpkglist-row {
    grid-template-columns: 1.6fr 1fr 1fr;
    grid-auto-rows: auto;
  }
  .lfpkglist-period,
  .lfpkglist-status {
    display: none;
  }
}

.pkg-wrap {
  max-width: 720px;
  margin: 80px auto;
  padding: 0 16px;
}

.pkg-wrap h1 {
  margin-bottom: 24px;
  font-size: 28px;
}

.pkg-card {
  background: rgba(255,255,255,0.03);
  border-radius: 16px;
  padding: 24px;
  display: grid;
  gap: 18px;
  border: 1px solid rgba(255,255,255,a0.08);
}

.pkg-card label {
  display: flex;
  flex-direction: column;
  font-size: 13px;
  gap: 6px;
  color: #aaa;
}

.pkg-card input,
.pkg-card select {
  height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.4);
  color: #fff;
}

.pkg-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
}

.btn-primary {
  padding: 12px 20px;
  border-radius: 12px;
  background: linear-gradient(135deg, #2563EB, #3B82F6);
  border: none;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

.btn-secondary {
  padding: 12px 20px;
  border-radius: 12px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  cursor: pointer;
}

.lfpkglist-pill-btn {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.lfpkglist-pill-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.lfblk-list { display:flex; flex-direction:column; gap:12px; padding: 8px 2px; }
.lfblk-row  { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border:1px solid var(--lf-line); border-radius: 14px; background: rgba(255,255,255,.04); }
.lfblk-left { display:flex; align-items:center; gap:12px; min-width:0; }
.lfblk-meta { min-width:0; }
.lfblk-name { font-weight:700; }
.lfblk-user { font-size: 13px; opacity:.75; }
.lfava-sm { width:38px; height:38px; border-radius: 999px; overflow:hidden; border:1px solid var(--lf-line); display:grid; place-items:center; }
.lfava-sm img { width:100%; height:100%; object-fit:cover; display:block; }
.lfava-ph { opacity:.8; }

.lfico { 
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  color: rgba(255,255,255,.92);
}
.lfico-svg {
  width: 22px;
  height: 22px;
  display:block;
  color: #fff;
}
.lfico-svg * { stroke: currentColor; }

.lfspin svg{
  animation: lfspin 1s linear infinite;
}

@keyframes lfspin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.lfw-empty-ico{
  display:flex;
  align-items:center;
  justify-content:center;
}
.lfw-empty-ico svg{
  display:block;
}
.lfw-empty-ico,
.lfblk-ico,
.lfava-ph{
  display:flex;
  align-items:center;
  justify-content:center;
}
.lfw-empty-ico svg,
.lfblk-ico svg,
.lfava-ph svg{
  display:block;
}

.lfreels-actico{
  display: grid;
  place-items: center;
  line-height: 0;
}
.lfreels-actico svg{ display:block; }

.lfreels-actcount,
.lfreels-actlabel{
  font-size: 12px;
  font-weight: 850;
  color: rgba(255,255,255,.92);
  line-height: 1;
}

.lfreels-actcount{
  color: var(--lf-muted);
  font-weight: 900;
}

.lfp-soc svg{ display:block; }
.lfp-ava svg{ display:block; }

.lffeed-btn svg,
.lffeed-more svg,
.lfmodal-close svg,
.lfcomment-ava svg,
.lffeed-lockIco svg {
  display: block;
}

.lfbtn svg, .lfmuted svg { display:block; }

/*Delete reels, 3 dot*/

.lfreels-menu{ position:relative; }

.lfreels-act--more{
  width: 56px;
  min-height: 56px;
}

.lfreels-menubtn{
  width:40px;height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
  display:grid;place-items:center;
  cursor:pointer;
}

.lfreels-menudd {
  position: absolute;
  right: 0;
  top: auto;

  min-width: 140px;
  padding: 6px;

  background: rgba(12, 12, 14, 0.96);
  border: 1px solid var(--lf-line);
  border-radius: 12px;

  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  z-index: 30;
}


.lfreels-menuitem{
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  background: transparent;
  border: none;

  display: flex;
  align-items: center;
  gap: 8px;

  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.lfreels-menuitem:hover {
  background: rgba(255,255,255,.06);
}

.lfreels-menuitem.is-danger {
  color: #ff5b5b;
}

.lfreels-menuitem.is-danger:hover {
  background: rgba(255,91,91,.12);
}

.lfhash{
  font-weight: 800;
  text-decoration: none;
  color: rgba(90,160,255,.95);
}
.lfhash:hover{
  text-decoration: underline;
}

/* Hashtag links (used in reels comments + titles + desc) */
a.lfhashtag{
  color: rgba(70, 140, 255, .95);
  text-decoration: none;
  font-weight: 800;
}

a.lfhashtag:hover{
  text-decoration: underline;
  filter: brightness(1.1);
}

a.lfhashtag:active{
  filter: brightness(1.2);
}

/* -------------------------------------------
   Mobile nav drawer (minimal + no duplicates)
-------------------------------------------- */
.lfhambBtn { display: none; }

@media (max-width: 900px) {
  /* Toggle button (always visible on mobile) */
  .lfhambBtn {
    display: inline-flex;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1301; /* above overlay */
    border: 0;
    background: transparent;
    padding: 6px;
    margin: 0;
    cursor: pointer;
  }
  /* Rail drawer */
  .lfrail {
    position: fixed;
    top: 0;
    left: 0;
    height: 100dvh;
    z-index: 1300;
    transform: translateX(-110%);
    transition: transform 180ms ease;
    will-change: transform;
  }
  .lfrail:not(.is-collapsed) { transform: translateX(0); }

  /* Overlay: shown only when rail is open */
  .lfrail-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
  }
  .lfrail-overlay.is-open { display: block; }

  /* Keep layout stable */
  .lfmain { min-height: 100dvh; }
}

.lffeedback-btn{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(20,24,30,.92);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(8px);
}

.lffeedback-btn:hover{
  transform: translateY(-1px);
}

.lffeedback-label{
  font-weight: 600;
  font-size: 13px;
  line-height: 1;
}

/* ========== Media viewer: make footer always visible ========== */

.lfmedia-sheet{
  width: min(1280px, 96vw);
  height: min(860px, 92vh);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* IMPORTANT: keep footer inside */
}

/* header stays natural height */
.lfmedia-sheet .lfmodal-head{
  flex: 0 0 auto;
}

/* body takes remaining space */
.lfmedia-wrap{
  flex: 1 1 auto;
  min-height: 0;        /* IMPORTANT for inner scroll areas */
  overflow: hidden;     /* prevent pushing footer away */
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 14px;
  padding: 14px;
  box-sizing: border-box;
}

/* LEFT: media area */
.lfmedia-left{
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 10px;
  display: grid;
  place-items: center;
  overflow: hidden;
  min-width: 0;
}

.lfmedia-media{
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px;
  max-height: 100%; /* don't use vh here */
}

/* RIGHT: split into top / scroll / composer */
.lfmedia-right{
  border-left: 1px solid rgba(255,255,255,.08);
  padding-left: 14px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  min-width: 0;
  overflow: hidden;  /* IMPORTANT: only comments should scroll */
}

/* only comments scroll */
.lfmedia-comments{
  overflow: auto;
  min-height: 0;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 10px;
  background: rgba(255,255,255,.02);
}

.lfmedia-compose{
  display: flex;
  gap: 10px;
  align-items: center;
}

/* footer always visible */
.lfmedia-sheet .lfmodal-foot{
  flex: 0 0 auto;
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 12px 14px;
  background: rgba(15,18,26,.98);
}

/* ========== Mobile: stack + make footer usable ========== */
@media (max-width: 980px){
  .lfmedia-wrap{
    grid-template-columns: 1fr;
  }
  .lfmedia-right{
    border-left: 0;
    padding-left: 0;
  }

  /* footer buttons wrap nicely */
  .lfmedia-sheet .lfmodal-foot{
    gap: 10px;
    flex-wrap: wrap;
  }
  .lfmedia-sheet .lfmodal-foot > div{
    width: 100%;
    justify-content: flex-start;
  }
  .lfmedia-sheet .lfmodal-foot button,
  .lfmedia-sheet .lfmodal-foot a{
    width: 100%;
  }

  /* comment composer on mobile: input grows */
  .lfmedia-compose{
    flex-wrap: wrap;
  }
  .lfmedia-compose .lfmodal-input{
    width: 100%;
  }
  .lfmedia-compose .lfbtn{
    width: 100%;
  }
}

/* Notifications badge (left rail) */
.lfnotif-badge{
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  font-weight: 700;
  background: #ff3b30;
  color: #fff;
  box-shadow: 0 0 0 2px rgba(0,0,0,.35);
}

/* Make icon container a positioning context */
#lfNavNotifications .lfico{ position: relative; display: inline-flex; }

/* Icon "changes" when unread exists */

.lfnoti-actor{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  display: grid;
  place-items: center;
  margin-left: 8px; /* dot järel väike vahe */
}

.lfnoti-actorimg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.lfnoti-actor--fallback{
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .5px;
}

/* ===============================
   GLOBAL empty-state alignment
   Home + Reels = SAME HEIGHT
   =============================== */

/* Content wrappers – sama alguspunkt */
.lffeed-wrap,
.lfreels-wrap {
  padding-top: 22px;   /* ÜHINE kõrgus */
}

/* Empty-state card – ÜKS reegel */
.lfcard.lf-empty {
  width: min(560px, 100%);
  margin: 0 auto;      /* center */
  padding: 16px;
}

/* Reels page EI päri lfpage (1100px) */
.lfreels-page {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* Reels content container */
.lfreels-wrap {
  width: min(1100px, 100%);
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

/* Mobile */
@media (max-width: 640px) {
  .lfcard.lf-empty {
    width: 100%;
  }
}

/* =========================
   SEARCH — single source of truth
   ========================= */

/* 2) Peamine Search layout */
.lfsearch-top{
  display: flex;
  justify-content: center;
  padding-top: 22px;
}

/* 3) Output ala: sama keskjoon + sama container width */
#lfSearchOut{
  width: min(var(--lf-search-w), 100%);
  margin: 22px auto 0;     /* top spacing, center */
}

/* 4) Empty-state: ära kasuta vana lfsearch-empty kasti */
.lfsearch-empty{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  max-width: none;
}

/* Kui sa kasutad empty-state jaoks .lfempty-card / .lf-empty siis tee see normaliseeritud */
#lfSearchOut .lfempty-card,
#lfSearchOut .lfcard.lf-empty{
  width: 100%;
  margin: 0 auto;
  padding: 16px;
}

/* 5) Kui sa tõesti tahad intro ära kaotada */
.lfsearch-intro{
  display: none;
}

.lfsearch-input::placeholder{
  color: rgba(255,255,255,0.35);
}

/* Messages empty-state card width matches the bar */
.lfmsg-empty{
  width: min(720px, 100%);
  margin: 14px auto 0;
}

/* Tools on the right */
.lfmsg-tools{
  display:flex;
  gap:10px;
}

/* Messages: keep header + tools inside same centered content column */
.lfmsg-top{
  width: min(720px, 100%);
  margin: 0 auto 18px;
  padding: 22px 16px 0;          /* sama “container” tunne nagu teistel lehtedel */
  display: flex;
  align-items: center;
  justify-content: space-between; /* title vasakul, nupud paremal (AGA samas 900px alas) */
  gap: 16px;
  flex-wrap: nowrap;
}

/* Header left block */
.lfmsg-top > div:first-child{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* keep buttons compact + aligned */
.lfmsg-tools{
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
}

/* keep buttons compact */
.lfmsg-tools{
  flex: 0 0 auto;
  display: flex;
  gap: 10px;
}

.lfmsg-new{
  width: 100%;
}

/* Messages: content column = same width as header */
.lfmsg-wrap{
  width: min(720px, 100%);
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  gap: 14px;
}

/* Messages: new-chat search bar fills the column */
.lfmsg-wrap .lfmsg-new{
  width: 100%;
}
.lfmsg-wrap .lfmsg-new .lfsearch-bar{
  width: 100%;
  margin: 0;
}