:root{
  --tt-bg:#0c0f14; --tt-bg-soft:#0f141b; --tt-card:#121821; --tt-elev:#161e2a;
  --tt-text:#f4f7ff; --tt-muted:#9aa7b6; --tt-border:#233041;
  --tt-accent: var(--accent, #5d5dff);
  --tt-ok-bg:#16271e; --tt-ok-fg:#d0e8da; --tt-ok-bd:#2a5440;
  --tt-err-bg:#281b1b; --tt-err-fg:#f0dada; --tt-err-bd:#563131;
}

.ttpv{color:var(--tt-text)}
.ttpv *{box-sizing:border-box}
.ttpv a{color:var(--tt-accent);text-decoration:none}
.ttpv a:hover{text-decoration:underline;text-underline-offset:2px}

.ttpv .tt-toast{
  position:fixed; top:1rem; left:50%; transform:translateX(-50%);
  z-index:10001; display:none; padding:.7rem 1rem; border-radius:12px;
  min-width:220px; text-align:center; font-weight:900; border:1px solid transparent;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.ttpv .tt-toast.ok{background:var(--tt-ok-bg);color:var(--tt-ok-fg);border-color:var(--tt-ok-bd)}
.ttpv .tt-toast.err{background:var(--tt-err-bg);color:var(--tt-err-fg);border-color:var(--tt-err-bd)}

.ttpv .tt-card{
  border:1px solid var(--tt-border);
  border-radius:12px;
  background:linear-gradient(180deg,var(--tt-bg-soft),var(--tt-card));
  box-shadow:0 10px 40px rgba(0,0,0,.35);
}

.ttpv form.tt-form{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto;
  gap:.8rem;
  padding:1rem;
  background:var(--tt-bg-soft);
  border:1px solid var(--tt-border);
  border-radius:12px;
  align-items:center;
  margin-bottom:1.25rem;
}
.ttpv .tt-input{
  height:56px;
  padding:0 1rem;
  border-radius:12px;
  border:1px solid var(--tt-border);
  background:linear-gradient(180deg,#0c121a,#0b0f14);
  color:#f7faff!important;
  outline:none;
  text-transform:lowercase;
}
.ttpv .tt-input::placeholder{color:#c8d2e6!important}
.ttpv .tt-input:focus{
  border-color:color-mix(in oklab,var(--tt-accent) 65%,#7d8bb3 35%);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--tt-accent) 25%,transparent);
}
.ttpv .tt-input:-webkit-autofill{
  -webkit-text-fill-color:#f7faff;
  -webkit-box-shadow:0 0 0px 1000px #0b0f14 inset;
  box-shadow:0 0 0px 1000px #0b0f14 inset;
}
.ttpv .tt-btn{
  height:56px;
  padding:0 1.2rem;
  border:none;
  border-radius:12px;
  background:linear-gradient(180deg,color-mix(in oklab,var(--tt-accent) 90%,#000 10%),var(--tt-accent));
  color:#fff;
  font-weight:900;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  box-shadow:0 14px 34px rgba(0,0,0,.35);
}
.ttpv .tt-btn[disabled]{opacity:.6;cursor:default;box-shadow:none}

.ttpv .tt-ts-fly{position:absolute; right:.75rem; top:.75rem; display:none; z-index:5}
.ttpv .tt-ts-fly.show{display:block}
.ttpv .tt-ts-fly > div{transform:scale(.9); transform-origin:top right}
@media (max-width:640px){
  .ttpv form.tt-form{grid-template-columns:1fr}
  .ttpv form.tt-form .tt-btn{width:100%}
  .ttpv .tt-ts-fly{right:.5rem; top:.5rem}
  .ttpv .tt-ts-fly > div{transform:scale(.9)}
}

.ttpv .tt-sep{
  height:1px;
  background:rgba(255,255,255,.06);
  border-top:1px solid var(--tt-border);
  margin:1rem 0;
}

.ttpv #tt-results{margin-top:1.25rem}

.ttpv .tt-profile{
  display:flex;
  gap:1rem;
  align-items:center;
  padding:1rem 1.2rem;
  background:var(--tt-card);
  border-radius:12px;
  flex-wrap:wrap;
}
.ttpv .tt-avatar-wrap{
  position:relative;
  flex:none;
  width:clamp(72px,18vw,108px);
  height:clamp(72px,18vw,108px);
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--tt-border);
  background:#0b0f14;
}
.ttpv .tt-avatar-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.ttpv .tt-avatar-dl{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;align-items:center;justify-content:center;
  height:22px;
  font-size:.72rem;
  font-weight:900;
  color:#fff;
  text-decoration:none;
  background:linear-gradient(180deg,color-mix(in oklab,var(--tt-accent) 90%,#000 10%),var(--tt-accent));
  border-top:1px solid rgba(255,255,255,.12);
}
.ttpv .tt-profile > div:last-child{flex:1 1 220px;min-width:0}
.ttpv .tt-profile h3{
  margin:0;
  font-size:clamp(1rem,2.5vw,1.25rem);
  line-height:1.25;
  color:#fff;
  word-break:break-word;
}
.ttpv .tt-profile p{
  margin:.35rem 0 0;
  color:var(--tt-muted);
  font-size:clamp(.85rem,2vw,.95rem);
  line-height:1.35;
  word-break:break-word;
  overflow-wrap:anywhere;
}
@media (max-width:480px){ .ttpv .tt-profile{gap:.8rem} }

.ttpv .tt-kpi-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.8rem;
  padding:1rem;
  background:var(--tt-bg-soft);
  border-radius:12px;
}
@media (max-width:900px){.ttpv .tt-kpi-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.ttpv .tt-kpi-grid{grid-template-columns:1fr}}

.ttpv .kpi{
  position:relative;
  display:flex;
  gap:.85rem;
  align-items:center;
  border:1px solid var(--tt-border);
  border-radius:12px;
  padding:.9rem;
  background:linear-gradient(180deg,var(--tt-elev),#0f151d);
}
.ttpv .kpi .ic{
  width:38px;height:38px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--tt-border);
  background:color-mix(in oklab,var(--tt-accent) 18%,#0b0f14);
}
.ttpv .kpi .ic svg{width:21px;height:21px;color:#fff;stroke:currentColor;stroke-width:1.8;fill:none}
.ttpv .kpi .v{font-size:.99rem;font-weight:900;color:#fff}
.ttpv .kpi .l{font-size:.85rem;color:var(--tt-muted);margin-top:.15rem}
.ttpv .kpi .badge{
  position:absolute;top:.45rem;right:.45rem;
  width:22px;height:22px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in oklab,var(--tt-accent) 35%,#0a0f16);
  border:1px solid var(--tt-border);
}
.ttpv .kpi .badge svg{width:14px;height:14px;color:#fff;stroke:currentColor;stroke-width:1.8;fill:none}

.ttpv .tt-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:.9rem;
  padding:1rem;
  background:var(--tt-bg-soft);
  border-radius:12px;
}
@media (max-width:980px){.ttpv .tt-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.ttpv .tt-grid{grid-template-columns:repeat(2,1fr)}}

.ttpv .tt-item{
  border:1px solid var(--tt-border);
  border-radius:12px;
  overflow:hidden;
  background:var(--tt-card);
  display:flex;
  flex-direction:column;
  min-height:250px;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.ttpv .tt-item:hover{
  transform:translateY(-2px);
  border-color:color-mix(in oklab,var(--tt-accent) 30%, var(--tt-border) 70%);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.ttpv .tt-thumb{position:relative;background:#000}
.ttpv .tt-thumb img{width:100%;height:250px;display:block;object-fit:cover;border-radius:0}
.ttpv .tt-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:40px;height:40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(0,0,0,.65);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.ttpv .tt-play svg{width:18px;height:18px;color:#fff;stroke:currentColor;stroke-width:2;fill:none}

.ttpv .tt-info{
  display:none;
  padding:.8rem .85rem;
  font-size:.95rem;
  color:#e9eef7;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-height:2.4rem;
}
.ttpv .tt-metrics{
  margin-top:auto;
  display:none!important;
  display:flex;
  justify-content:space-between;
  padding:.55rem .75rem;
  gap:.6rem;
  border-top:1px solid var(--tt-border);
  color:var(--tt-muted);
  font-size:.77rem;
  background:linear-gradient(180deg,#0f151d,#0c1117);
}
.ttpv .tt-mx{display:flex;align-items:center;gap:.45rem}
.ttpv .tt-mx svg{width:14px;height:14px;color:currentColor;stroke:currentColor;stroke-width:1.8;fill:none}

.ttpv .tt-load{
  display:inline-block;
  margin:0 auto 1rem;
  left:50%;
  transform:translateX(-50%);
  position:relative;
  text-align:center;
  padding:.7rem 1.2rem;
  border:none;
  border-radius:12px;
  background:linear-gradient(180deg,color-mix(in oklab,var(--tt-accent) 90%,#000 10%),var(--tt-accent));
  color:#fff;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 14px 34px rgba(0,0,0,.35);
}
.ttpv .tt-load[disabled]{opacity:.6;cursor:default;box-shadow:none}

/* ===================== LIGHTBOX — EXTRA SMALL + MOBILE ADAPTIVE ===================== */


.ttpv .tt-lightbox{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.86);
  z-index:10000;
  align-items:center;
  justify-content:center;
  padding:clamp(.35rem, 2vw, .75rem);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ttpv .tt-lightbox.active{display:flex}

/* compact card */
.ttpv .tt-lb-card{
  position:relative;
  width:min(92vw, 560px);
  max-height:min(84vh, 820px);
  display:flex;
  flex-direction:column;
  gap:.42rem;
  padding:clamp(.55rem, 1.8vw, .8rem);
  background:linear-gradient(180deg, rgba(14,18,26,.94), rgba(8,10,14,.94));
  border:1px solid var(--tt-border);
  border-radius:12px;
  box-shadow:0 22px 70px rgba(0,0,0,.65);
  overflow:hidden;
}

/* media: smaller and tighter */
.ttpv #tt-video,
.ttpv #tt-photo{
  position:relative;
  z-index:1;
  width:100%;
  max-width:100%;
  max-height:min(42vh, 320px);
  margin:0;
  background:#000;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 24px rgba(0,0,0,.45);
}
.ttpv #tt-video{display:block;object-fit:contain}
.ttpv #tt-photo{display:none;object-fit:contain}

/* dots tighter */
.ttpv .tt-dots{
  display:none;
  gap:.28rem;
  justify-content:center;
  margin:-.05rem 0 0;
}
.ttpv .tt-dots .dot{
  width:.99rem;height:.99rem;
  padding:0;
  border-radius:999px;
  background:rgba(160,175,200,.18);
  border:1px solid rgba(255,255,255,.22);
}
.ttpv .tt-dots .dot.active{
  background:color-mix(in oklab, var(--tt-accent) 55%, #dfe8ff 45%);
  border-color:rgba(255,255,255,.55);
}

/* title tighter */
.ttpv .tt-lb-title{
  color:#fff;
  margin:.02rem 0 0;
  font-size: .77rem;
  line-height:1.28;
  font-weight:900;
  word-break:break-word;
  overflow-wrap:anywhere;
}
.ttpv .tt-lb-title .more{
  color:var(--tt-accent);
  cursor:pointer;
  margin-left:.35rem;
  font-size:.95em;
  font-weight:900;
  white-space:nowrap;
}

/* compact metrics: 4 cols desktop, 2 cols mobile */
.ttpv .tt-lb-metrics{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:.35rem;
  color:#dbe4f0;
  font-size:.77rem;
  background:rgba(12,18,26,.85);
  border-radius:10px;
  padding:.4rem;
  border:1px solid var(--tt-border);
}
.ttpv .tt-lb-metrics .tt-mx{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  padding:.35rem .35rem;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
  font-weight:900;
}
.ttpv .tt-lb-metrics .tt-mx svg{width:16px;height:16px}

/* compact downloads */
.ttpv .tt-lb-dl{
  display:flex;
  gap:.45rem;
  flex-wrap: nowrap;
}
.ttpv .tt-lb-dl a{
  flex:1 1 160px;
  text-align:center;
  text-decoration:none;
  padding:.62rem;
  border-radius:10px;
  color:#fff;
  font-size: .77rem;
  font-weight:900;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,color-mix(in oklab,var(--tt-accent) 92%,#000 8%),color-mix(in oklab,var(--tt-accent) 70%,#000 30%));
}

/* arrows + close (KEEP EXACTLY AS YOU HAD — not impacted) */
.ttpv .tt-x,.ttpv .tt-nav{
  position:absolute;
  background:rgba(10,14,20,.6);
  border:1px solid var(--tt-border);
  color:#fff;
  width:2.6rem;height:2.6rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  z-index:3;
}
.ttpv .tt-x{top:.65rem;right:.65rem}
.ttpv .tt-nav.prev{top:50%;left:.65rem;transform:translateY(-50%)}
.ttpv .tt-nav.next{top:50%;right:.65rem;transform:translateY(-50%)}

/* mobile: even smaller */
@media (max-width:640px){
  .ttpv .tt-lightbox{padding:.35rem}
  .ttpv .tt-lb-card{
    width:min(95vw, 520px);
    max-height:88vh;
    padding:.55rem;
    gap:.4rem;
    border-radius:12px;
  }
  .ttpv #tt-video,
  .ttpv #tt-photo{
    max-height:min(40vh, 280px);
    border-radius:10px;
  }
  .ttpv .tt-lb-metrics{
    grid-template-columns:repeat(2,1fr);
    padding:.38rem;
  }
  .ttpv .tt-lb-metrics .tt-mx{
    justify-content:flex-start;
    padding:.38rem .5rem;
  }
  .ttpv .tt-lb-dl a{flex:1 1 100%}
}

/* ultra small phones */
@media (max-width:380px){
  .ttpv .tt-lb-card{padding:.5rem}
  .ttpv #tt-video,
  .ttpv #tt-photo{max-height:min(38vh, 260px)}
  .ttpv .tt-lb-title{font-size:.9rem}
  .ttpv .tt-lb-metrics .tt-mx{font-size:.88rem}
}

/* ===================== VIDEO RESULT (compact) ===================== */

.ttpv #tt-video-result{margin-bottom:1rem}
.ttpv .tt-vr-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:.7rem;
  background:linear-gradient(180deg,#0a0e14,#0a0c10);
  border-radius:12px;
}
.ttpv #tt-vr-video{
  max-height:min(50vh,520px);
  background:#000;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
}
.ttpv #tt-vr-photo{
  max-height:min(50vh,520px);
  background:#000;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  object-fit:contain;
}
.ttpv .tt-vr-title{
  color:#fff;
  margin:.6rem 1rem .55rem;
  font-size:.98rem;
  line-height:1.35;
  font-weight:900;
  word-break:break-word;
  overflow-wrap:anywhere;
}
.ttpv .tt-vr-metrics{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.35rem;
  color:#dbe4f0;
  font-size:.9rem;
  background:rgba(12,18,26,.85);
  border-radius:10px;
  padding:.4rem;
  border:1px solid var(--tt-border);
  margin:0 1rem;
}
.ttpv .tt-vr-metrics .tt-mx{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  padding:.35rem .35rem;
  border-radius:9px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
  font-weight:900;
}
.ttpv .tt-vr-metrics .tt-mx svg{width:16px;height:16px}
.ttpv .tt-vr-dl{
  display:flex;
  gap:.45rem;
  margin:.85rem 1rem 1rem;
  flex-wrap:wrap;
}
.ttpv .tt-vr-dl a{
  flex:1 1 160px;
  text-align:center;
  text-decoration:none;
  padding:.66rem .8rem;
  border-radius:10px;
  color:#fff;
  font-weight:900;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,color-mix(in oklab,var(--tt-accent) 92%,#000 8%),color-mix(in oklab,var(--tt-accent) 70%,#000 30%));
}
@media (max-width:640px){
  .ttpv .tt-vr-wrap{padding:.6rem}
  .ttpv #tt-vr-video,
  .ttpv #tt-vr-photo{max-height:min(48vh,460px)}
  .ttpv .tt-vr-metrics{grid-template-columns:repeat(2,1fr)}
  .ttpv .tt-vr-dl a{flex:1 1 100%}
}

/* ===================== STORY ===================== */

.ttpv .tt-avatar-wrap.has-story{
  border:4px solid transparent;
  background:
    linear-gradient(var(--tt-bg-soft), var(--tt-bg-soft)) padding-box,
    conic-gradient(from 180deg, #ff2d55, #ff7a00, var(--tt-accent), #ff2d55) border-box;
  cursor:pointer;
}
.ttpv .tt-avatar-wrap.has-story:hover{
  box-shadow:0 0 0 3px color-mix(in oklab, var(--tt-accent) 20%, transparent);
}

.ttpv .tt-storybox{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.9);
  z-index:10002;
  align-items:center;
  justify-content:center;
  padding:clamp(.5rem, 2.5vw, 1rem);
}
.ttpv .tt-storybox.active{display:flex}

.ttpv .tt-story-card{
  position:relative;
  width:min(95vw, 520px);
  max-height:88vh;
  background:linear-gradient(180deg,#0a0e14,#0a0c10);
  border:1px solid var(--tt-border);
  border-radius:12px;
  padding:.75rem;
  display:flex;
  flex-direction:column;
  gap:.6rem;
  overflow:hidden;
}
.ttpv .tt-story-top{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.05rem}
.ttpv .tt-story-title{color:#fff;font-weight:900;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.ttpv #tt-story-video,
.ttpv #tt-story-photo{
  width:100%;
  max-width:100%;
  max-height:min(42vh, 320px);
  display:block;
  margin:0 auto;
  border-radius:10px;
  background:#000;
  border:1px solid rgba(255,255,255,.08);
}
.ttpv #tt-story-photo{object-fit:contain}

.ttpv #tt-story-dots{display:none;gap:.28rem;justify-content:center;margin:.1rem 0 0}
.ttpv #tt-story-dots .dot{
  width:.72rem;height:.72rem;padding:0;border-radius:999px;
  background:rgba(160,175,200,.18);
  border:1px solid rgba(255,255,255,.22);
}
.ttpv #tt-story-dots .dot.active{
  background:color-mix(in oklab, var(--tt-accent) 55%, #dfe8ff 45%);
  border-color:rgba(255,255,255,.55);
}

.ttpv .tt-story-bottom{margin-top:.05rem;display:flex;gap:.45rem}
.ttpv .tt-story-bottom a{
  flex:1;
  text-align:center;
  text-decoration:none;
  padding:.62rem;
  border-radius:10px;
  color:#fff;
  background:linear-gradient(180deg,color-mix(in oklab,var(--tt-accent) 90%,#000 10%),var(--tt-accent));
  font-size: .77rem;
  font-weight:900;
  border:1px solid rgba(255,255,255,.12);
}

.ttpv .tt-story-x,.ttpv .tt-story-nav{
  position:absolute;
  background:rgba(10,14,20,.6);
  border:1px solid var(--tt-border);
  color:#fff;
  width:2.6rem;height:2.6rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  z-index:3;
}
.ttpv .tt-story-x{top:.65rem;right:.65rem}
.ttpv .tt-story-nav.prev{top:50%;left:.65rem;transform:translateY(-50%)}
.ttpv .tt-story-nav.next{top:50%;right:.65rem;transform:translateY(-50%)}

/* Pinned badge (top-left) */
.tt-thumb{
  position: relative; /* needed for absolute badge */
}

.tt-pin-badge{
  position:absolute;
  top:10px;
  left:10px;
  z-index:3;
  padding:6px 10px;
  border-radius:6px;
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.2px;
  line-height:1;
  background:var(--tt-accent);       
  color:#fff;
  box-shadow:0 8px 20px rgba(255,43,84,.25);
  border:1px solid rgba(255,255,255,.12);
  user-select:none;
  pointer-events:none;
}

/* TikTok-style views overlay (bottom-left) */
.ttpv .tt-views-badge{
  position:absolute;
  left:10px;
  bottom:10px;
  z-index:3;
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:.78rem;
  line-height:1;
  color:#fff;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:0 10px 25px rgba(0,0,0,.35);
  user-select:none;
  pointer-events:none;
}

.ttpv .tt-views-badge .tt-views-ic{
  display:flex;
  align-items:center;
  justify-content:center;
}

.ttpv .tt-views-badge svg{
  width:15px;
  height:15px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
  opacity:.95;
}

.ttpv .tt-views-badge .tt-views-tx{
  transform: translateY(.3px);
  letter-spacing:.2px;
}