:root{
  --bg:#fff; --ink:#111; --soft:#767676; --line:#e9e9e9; --chip:#efefef;
  --red:#e60023; --red-d:#ad081b;
  --tab-h:64px; --r:16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:15px/1.5 system-ui,-apple-system,'Segoe UI','Noto Sans Bengali',sans-serif;-webkit-font-smoothing:antialiased}
body.no-scroll{overflow:hidden}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}
img,video{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* shell */
#view{padding:8px 8px calc(var(--tab-h) + 16px + env(safe-area-inset-bottom));min-height:100dvh}
body[data-tab=reels] #view{padding:0;height:100dvh;overflow:hidden}
#tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;height:calc(var(--tab-h) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);display:flex;justify-content:space-around;align-items:center;background:#fff;border-top:1px solid var(--line)}
#tabbar button{flex:1;height:var(--tab-h);display:flex;align-items:center;justify-content:center;color:#8a8a8a}
#tabbar svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
#tabbar .active{color:var(--ink)}
#tabbar .active svg{fill:currentColor}
#tabbar .active .cut{stroke:#fff;fill:#fff}
#tabbar .active svg path[d^="M12 11"]{fill:none}

/* loader / empty */
.loader{display:flex;gap:8px;justify-content:center;padding:40vh 0}
.loader i{width:10px;height:10px;border-radius:50%;background:var(--red);animation:b .9s ease-in-out infinite}
.loader i:nth-child(2){animation-delay:.15s}.loader i:nth-child(3){animation-delay:.3s}
@keyframes b{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-8px);opacity:1}}
.empty{text-align:center;color:var(--soft);padding:30vh 24px 0}
@media (prefers-reduced-motion:reduce){.loader i{animation:none}}

/* home — masonry */
.masonry{columns:2;column-gap:8px}
@media (min-width:700px){.masonry{columns:3}}
@media (min-width:1000px){.masonry{columns:5}}
.tile{display:block;width:100%;margin:0 0 8px;break-inside:avoid;border-radius:var(--r);overflow:hidden;background:var(--chip)}
.tile img,.tile video{width:100%;height:auto;min-height:120px;object-fit:cover}

/* reels */
.reels{height:calc(100dvh - var(--tab-h) - env(safe-area-inset-bottom));overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;background:#000;position:relative}
.reel{height:100%;scroll-snap-align:start;scroll-snap-stop:always;position:relative}
.reel video{width:100%;height:100%;object-fit:contain;background:#000}
.reel-cap{position:absolute;left:12px;right:72px;bottom:16px;text-align:left;color:#fff;font-weight:600;text-shadow:0 1px 6px rgba(0,0,0,.6);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mute{position:fixed;right:12px;bottom:calc(var(--tab-h) + env(safe-area-inset-bottom) + 16px);width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;z-index:5}
.mute svg{width:22px;height:22px}

/* info */
.info{display:flex;flex-direction:column;align-items:center;gap:14px;padding:56px 16px 0;text-align:center}
.avatar{width:120px;height:120px;border-radius:50%;background:var(--chip);overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.info h1{margin:0;font-size:28px;line-height:1.2;overflow-wrap:anywhere}
.btn-red{background:var(--red);color:#fff;text-decoration:none;font-weight:700;padding:12px 24px;border-radius:999px}
.btn-red:active{background:var(--red-d)}

/* modal */
.modal{position:fixed;inset:0;z-index:50;background:#fff;overflow-y:auto;overscroll-behavior:contain;animation:slide-in .26s cubic-bezier(.2,.8,.2,1)}
.modal.out{animation:slide-out .22s ease-in forwards}
@keyframes slide-in{from{transform:translateX(100%)}to{transform:none}}
@keyframes slide-out{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.modal,.modal.out{animation:none}}
.modal-close{position:fixed;top:calc(16px + env(safe-area-inset-top));left:16px;z-index:2;width:46px;height:46px;border-radius:15px;background:rgba(236,236,236,.94);display:flex;align-items:center;justify-content:center;transition:background .15s}
.modal-close:active{background:#dcdcdc}
.modal-close svg{width:26px;height:26px}
.modal-body{max-width:640px;margin:0 auto;padding:calc(8px + env(safe-area-inset-top)) 0 calc(32px + env(safe-area-inset-bottom))}
.media-wrap{padding:0 8px}
.modal-media{border-radius:28px;overflow:hidden;isolation:isolate;background:#f1f1f1}
.track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;display:flex;align-items:center}
.slide img,.slide video{width:100%;height:auto;max-height:78dvh;object-fit:contain}
.dots{display:flex;justify-content:center;gap:6px;padding:12px 0 0}
.dots button{width:7px;height:7px;border-radius:50%;background:#d0d0d0;transition:background .15s,transform .15s}
.dots .on{background:var(--ink);transform:scale(1.25)}

/* action bar — heart · share ··· Save */
.pin-bar{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 4px}
.pin-acts{display:flex;align-items:center;gap:6px;margin-left:-8px}
.act{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#333;transition:transform .12s}
.act:active{transform:scale(.88)}
.act svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.act.like.on{color:var(--red)}
.act.like.on svg{fill:currentColor}
.save{min-width:88px;height:48px;padding:0 22px;border-radius:24px;background:var(--red);color:#fff;font-weight:700;font-size:16px;transition:background .15s}
.save:active{background:var(--red-d)}
.save.on{background:var(--ink)}

/* title / description / creator */
.modal h2{margin:12px 16px 6px;font-size:22px;line-height:1.3;font-weight:700;overflow-wrap:anywhere}
.modal p{margin:0 16px;white-space:pre-wrap;overflow-wrap:anywhere}
.creator{display:flex;align-items:center;gap:12px;margin:16px 16px 0;font-weight:600}
.creator img,.creator .ph{width:36px;height:36px;border-radius:50%;flex:none}
.creator img{object-fit:cover}
.creator .ph{display:flex;align-items:center;justify-content:center;background:#fcd9dc;color:#333;font-style:normal;font-weight:600;text-transform:uppercase}
.creator span{overflow-wrap:anywhere}

.toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));z-index:80;transform:translate(-50%,12px);background:var(--ink);color:#fff;padding:12px 20px;border-radius:999px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* video player */
.slide.vid{background:#000}
.vp{position:relative;width:100%;background:#000;color:#fff;line-height:0;outline:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;font-family:inherit}
.vp video{display:block;width:100%;height:auto;min-height:180px;max-height:78dvh;object-fit:cover}   /* লম্বা ভিডিওতে পাশে black নয় — zoom করে ভরে */
.vp.fs{display:flex;align-items:center;justify-content:center;height:100%}
.vp.fs video{height:100%;max-height:none;object-fit:contain}
.vp:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.vp.hide.playing{cursor:none}
.vp button{color:#fff}
.vp-big{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;transition:opacity .18s,transform .18s}
.vp-big svg{width:34px;height:34px;margin-left:3px}
.vp-big:active{transform:scale(.94)}
.vp.ended .vp-big svg,.vp-big svg[fill=none]{margin-left:0}
.vp.playing .vp-big,.vp.wait .vp-big{opacity:0;transform:scale(.8);pointer-events:none}
.vp-spin{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:3px solid rgba(255,255,255,.28);border-top-color:#fff;opacity:0;pointer-events:none;transition:opacity .15s}
.vp.wait .vp-spin{opacity:1;animation:vp-rot .8s linear infinite}
@keyframes vp-rot{to{transform:rotate(360deg)}}
.vp-skip{position:absolute;top:0;bottom:0;width:32%;display:flex;align-items:center;justify-content:center;font:700 15px/1 system-ui,sans-serif;background:rgba(255,255,255,.16);opacity:0;pointer-events:none}
.vp-skip.l{left:0;border-radius:0 50% 50% 0/0 100% 100% 0}
.vp-skip.r{right:0;border-radius:50% 0 0 50%/100% 0 0 100%}
.vp-skip.on{animation:vp-pop .6s ease-out}
@keyframes vp-pop{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
.vp-err{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:#111;font:600 14px/1.4 system-ui,'Noto Sans Bengali',sans-serif;color:#bbb;text-align:center;padding:0 24px}
.vp.err .vp-err{display:flex}
.vp.err .vp-big,.vp.err .vp-bar{display:none}

.vp-bar{position:absolute;left:0;right:0;bottom:0;padding:36px 10px 6px;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.35) 55%,transparent);line-height:1;transition:opacity .22s,transform .22s}
.vp.hide.playing .vp-bar{opacity:0;transform:translateY(8px);pointer-events:none}
.vp-seek{position:relative;height:26px;margin:0 6px;display:flex;align-items:center;cursor:pointer;touch-action:none;outline:none}
.vp-rail{position:relative;width:100%;height:4px;border-radius:3px;background:rgba(255,255,255,.3);transition:height .12s}
.vp-rail i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:inherit}
.vp-rail .buf{background:rgba(255,255,255,.38)}
.vp-rail .fill{background:var(--red)}
.vp-seek:hover .vp-rail,.vp-seek.drag .vp-rail,.vp-seek:focus-visible .vp-rail{height:6px}
.vp-thumb{position:absolute;top:50%;left:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;box-shadow:0 1px 5px rgba(0,0,0,.45);transform:scale(0);transition:transform .12s}
.vp-seek:hover .vp-thumb,.vp-seek.drag .vp-thumb,.vp-seek:focus-visible .vp-thumb{transform:scale(1)}
.vp-seek.drag .vp-thumb{transform:scale(1.25)}
@media (pointer:coarse){.vp-thumb{transform:scale(1)}}
.vp-tip{position:absolute;bottom:26px;left:0;transform:translateX(-50%);padding:5px 8px;border-radius:7px;background:rgba(0,0,0,.82);font:600 12px/1 system-ui,sans-serif;font-variant-numeric:tabular-nums;opacity:0;pointer-events:none;transition:opacity .12s}
.vp-seek.drag .vp-tip{opacity:1}
.vp-row{display:flex;align-items:center;gap:2px}
.vp-row button{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .12s}
.vp-row button:hover{background:rgba(255,255,255,.14)}
.vp-row button:active{background:rgba(255,255,255,.24)}
.vp-row svg{width:24px;height:24px}
.vp-time{margin-left:4px;font:600 13px/1 system-ui,sans-serif;font-variant-numeric:tabular-nums;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.vp-sp{flex:1}
.vp-row .vp-rate{width:auto;min-width:46px;padding:0 10px;border-radius:999px;font:700 13px/1 system-ui,sans-serif}
@media (prefers-reduced-motion:reduce){.vp *{transition:none!important}.vp-spin,.vp-skip.on{animation:none}}

/* more to explore */
.modal.still{animation:none}
.more-title{margin:28px 16px 12px;font-size:20px;line-height:1.3;font-weight:700}
.more{columns:2;padding:0 8px}

/* reels ট্যাবে নিচের bar কালো */
#tabbar{transition:background .2s,border-color .2s}
body[data-tab=reels] #tabbar{background:#252525;border-top-color:#252525}
body[data-tab=reels] #tabbar button{color:#a0a0a0}
body[data-tab=reels] #tabbar .active{color:#fff}
body[data-tab=reels] #tabbar .active .cut{stroke:#252525;fill:#252525}

/* modal খোলা থাকলে নিচের tab bar লুকানো */
body.no-scroll #tabbar{display:none}

/* reels progress — tab bar-এর ঠিক উপরে */
.progress{position:fixed;left:0;right:0;bottom:calc(var(--tab-h) + env(safe-area-inset-bottom));height:3px;background:rgba(255,255,255,.3);z-index:6;pointer-events:none}
.progress i{display:block;height:100%;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .25s linear}

/* pause করলে মাঝে play আইকন */
.play-ico{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.8);transition:opacity .15s,transform .15s;pointer-events:none}
.play-ico svg{width:38px;height:38px;margin-left:4px}
.reel.paused .play-ico{opacity:1;transform:none}

/* skeleton / লোড হওয়ার আগের shimmer */
.sk,.slide.ld,.vp.ld{background:linear-gradient(100deg,#ececec 30%,#f7f7f7 50%,#ececec 70%) 150% 0/200% 100%;animation:sk-shine 1.3s linear infinite}
@keyframes sk-shine{to{background-position:-50% 0}}
.slide img{transition:opacity .25s}
.slide.ld{aspect-ratio:4/5;max-height:78dvh}
.slide.ld img{opacity:0}
.vp.ld{aspect-ratio:4/5;max-height:78dvh}
.vp.ld video{opacity:0}
.vp.ld .vp-bar,.vp.ld .vp-big{visibility:hidden}
.skel{pointer-events:none}
.sk-media{aspect-ratio:4/5;max-height:78dvh}
.sk-dot{display:block;width:34px;height:34px;border-radius:50%;margin:5px 5px}
.sk-btn{display:block;width:88px;height:48px;border-radius:24px}
.sk-text{display:flex;flex-direction:column;gap:10px;margin:16px 16px 0}
.sk-line{display:block;height:14px;border-radius:7px}
.sk-av{display:block;width:36px;height:36px;border-radius:50%;flex:none}
.sk-more{width:150px;height:20px;margin:32px 16px 14px}
.skel .tile{background-color:#ececec}
@media (prefers-reduced-motion:reduce){.sk,.slide.ld,.vp.ld{animation:none;background:#ececec}}