:root{
  --rail:60px; --pad:14px; --gap:12px;
  --text:#fff; --muted:#d7d9de; --line:rgba(255,255,255,.18);
  --blur:6px;
}

/* reset / viewport */
*,
*::before,
*::after { box-sizing:border-box; }
html, body {
  margin:0; padding:0;
  width:100%;
  height:100dvh;
  background:#000;
  color:var(--text);
  font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  overflow-x:hidden;
  overscroll-behavior:contain;
}

/* header overlay */
.top{
  position:fixed; inset:0 0 auto 0; height:56px; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--pad);
  background:linear-gradient(180deg,rgba(0,0,0,.65),transparent);
}
.brand{font-weight:900;letter-spacing:.2px}
.tabs{display:flex;gap:16px;align-items:center}
.tab{font-weight:800;opacity:.55} .tab.active{opacity:1}
.btn-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;
          background:rgba(255,255,255,.1);border:1px solid var(--line);backdrop-filter:blur(var(--blur));
          font-weight:700}
#file{display:none}

/* feed fills viewport */
.feed{
  position:fixed; inset:0;
  width:100%; height:100dvh;
  background:#000;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  scroll-snap-type:y mandatory;
}
.feed::-webkit-scrollbar{ display:none; }
.feed{ scrollbar-width:none; -ms-overflow-style:none; }

/* each reel fills screen */
.reel{
  position:relative;
  width:100%; height:100dvh;
  background:#000;
  scroll-snap-align:start;
  overflow:hidden;

  display:flex; align-items:center; justify-content:center;
}

/* video letterboxed instead of cropped */
.video{
  width:100%; height:100%;
  object-fit:contain !important;
  background:#000; display:block;
}

/* gradients */
.g-top{position:absolute; inset:0 0 auto 0; height:30%; pointer-events:none;
       background:linear-gradient(180deg,rgba(0,0,0,.75),transparent)}
.g-bot{position:absolute; inset:auto 0 0 0; height:34%; pointer-events:none;
       background:linear-gradient(0deg,rgba(0,0,0,.85),transparent)}

/* badge / watermark – base (position is overridden below) */
.badge{
  position:absolute;
  left:50%;
  transform:translate(-50%, -50%);
  z-index:2;
  padding:6px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.12);
  border:1px solid var(--line);
  backdrop-filter:blur(var(--blur));
  font-weight:900;
  font-size:12px;
  opacity:.5;
  animation: fadeBadge 3s ease-in-out infinite alternate;
}
@keyframes fadeBadge { from{opacity:.5} to{opacity:.2} }

/* caption */
.caption{
  position:absolute; left:var(--pad);
  right:calc(56px + var(--pad) + 10px);
  bottom:calc(12% + env(safe-area-inset-bottom)); z-index:2;
}
.title{ margin:0 0 6px; font-weight:900; line-height:1.12; font-size:clamp(18px,4.8vw,26px); }
.tags{ margin:0; color:var(--muted); font-weight:600; }

/* rail pinned bottom-right */
.rail{
  position:absolute; right:12px;
  bottom:calc(12% + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; align-items:center; gap:14px; z-index:5;
}

/* buttons */
.rbtn{
  width:46px; height:46px;
  border-radius:50%;
  display:grid; place-items:center;
  background:rgba(20,20,20,.45);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(var(--blur));
  cursor:pointer; user-select:none;
  transition: transform .15s ease;
}
.rbtn:active{ transform:scale(.9); }
.rbtn svg{ width:24px; height:24px; fill:#fff; }

/* counts */
.rcount{
  font-size:12px; color:#eee; line-height:1; margin-bottom:4px;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
}

/* progress */
.progress{ position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.18); }
.bar{ height:100%; width:0; background:#2aa9ff; }

/* selection */
.reel, .feed{ user-select:none; -webkit-user-select:none; }

/* like button */
.rbtn.like svg{
  fill:none; stroke:#fff; stroke-width:2px;
  transition:transform .25s ease, fill .25s ease, stroke .25s ease;
}
.rbtn.like.on svg{ fill:#32cd32; stroke:#32cd32; transform:scale(1.18); }
.rbtn.like.on:active svg{ transform:scale(1.32); }

/* force all captions/text to white */
.title, .tags, .caption, .badge, .brand, .tab { color:#fff !important; }

/* share icon (paper-plane) */
.rbtn.share svg{ display:none; }
.rbtn.share::before{
  content:""; display:block; width:24px; height:24px;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.8 3.3a1 1 0 0 0-1.1-.2L3.4 10.5a1 1 0 0 0 .1 1.9l6.8 2.6 2.6 6.8a1 1 0 0 0 1.9.1l7.4-17.3a1 1 0 0 0-.4-1.3ZM12 15.6l-4.2-1.6L18 6.4 12 15.6Z"/></svg>') center/contain no-repeat;
          mask:         url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21.8 3.3a1 1 0 0 0-1.1-.2L3.4 10.5a1 1 0 0 0 .1 1.9l6.8 2.6 2.6 6.8a1 1 0 0 0 1.9.1l7.4-17.3a1 1 0 0 0-.4-1.3ZM12 15.6l-4.2-1.6L18 6.4 12 15.6Z"/></svg>') center/contain no-repeat;
  background:#fff;
  transition: transform .15s ease, opacity .15s ease;
}
.rbtn.share:active::before{ transform:scale(.9); opacity:.8; }

/* ===== WATERMARK OVERRIDE (moved a little up) ===== */
.reel > .badge{
  top:auto !important;
  bottom:32% !important;     /* was 28% — slightly higher now */
  left:50% !important;
  transform:translateX(-50%) !important;
}