/* =========================================================
   HasiBox Video — ডার্ক থিম
   সব রঙ ও মাপ CSS ভেরিয়েবল থেকে আসে (সেটিংস পেজে নিয়ন্ত্রিত)।
   ========================================================= */

:root{
	--hbv-accent:#FF2E63;
	--hbv-bg:#0F0F14;
	--hbv-head:#191921;
	--hbv-panel:#1B1B25;
	--hbv-text:#ECECF1;
	--hbv-muted:#8B8B9A;
	--hbv-line:#2A2A36;
	--hbv-good:#3FBF6C;
	--hbv-radius:12px;
	--hbv-wrap:1180px;
	--hbv-pb-h:4px;
	--hbv-pb-1:#FF2E63;
	--hbv-pb-2:#FFC93C;
	--hbv-nav:#22222C;
	--hbv-cols-m:2;
	--hbv-cols-t:3;
	--hbv-cols-d:4;
}

/* ---------- স্ক্রল প্রোগ্রেস বার ---------- */
.hbv-progress{
	position:fixed;
	top:0;
	inset-inline:0;
	height:var(--hbv-pb-h);
	z-index:99999;
	pointer-events:none;
}
.hbv-progress-fill{
	display:block;
	height:100%;
	width:0;
	background:linear-gradient(90deg,var(--hbv-pb-1),var(--hbv-pb-2));
	transition:width .08s linear;
	will-change:width;
}

/* ---------- বেস ---------- */
.hbv-body{
	margin:0;
	background:var(--hbv-bg);
	color:var(--hbv-text);
	font-family:"Hind Siliguri",system-ui,-apple-system,"Segoe UI",sans-serif;
	font-size:16px;
	line-height:1.6;
	-webkit-text-size-adjust:100%;
}
.hbv-body *,.hbv-body *::before,.hbv-body *::after{box-sizing:border-box}
.hbv-body img{max-width:100%;height:auto;display:block}
.hbv-body a{color:inherit;text-decoration:none}
.hbv-body button,.hbv-body input{font:inherit;color:inherit}
.hbv-body :focus-visible{outline:2px solid var(--hbv-accent);outline-offset:2px}

.hbv-wrap{max-width:var(--hbv-wrap);margin:0 auto;padding:0 12px}
.hbv-i{width:1em;height:1em;fill:currentColor;flex:0 0 auto}

/* ---------- হেডার ---------- */
.hbv-head{background:var(--hbv-head);border-bottom:1px solid var(--hbv-line)}
.hbv-head-in{display:flex;flex-direction:column;gap:12px;padding-top:14px;padding-bottom:14px}
.hbv-brand{display:inline-flex;align-items:center;gap:9px;align-self:flex-start}
.hbv-logo{max-height:42px;width:auto}
.hbv-mark{
	width:40px;height:32px;flex:0 0 40px;
	border-radius:16px/50%;
	background:var(--hbv-accent);
	display:grid;place-items:center;
}
.hbv-mark::before{
	content:"";
	width:0;height:0;margin-left:3px;
	border-left:11px solid #fff;
	border-top:7px solid transparent;
	border-bottom:7px solid transparent;
}
.hbv-brand-text{
	font-family:"Baloo Da 2","Hind Siliguri",sans-serif;
	font-weight:800;font-size:26px;line-height:1;letter-spacing:-.01em;
}
.hbv-brand-suffix{font-size:13px;font-weight:600;color:var(--hbv-muted);margin-left:2px}

.hbv-search{display:flex;background:#0C0C11;border:1px solid var(--hbv-line);border-radius:8px;overflow:hidden}
.hbv-search input[type=search]{
	flex:1;min-width:0;background:transparent;border:0;
	padding:12px 14px;font-size:15px;
}
.hbv-search input[type=search]::placeholder{color:#6E6E7E}
.hbv-search button{
	border:0;background:var(--hbv-accent);color:#fff;
	padding:0 20px;cursor:pointer;display:grid;place-items:center;
}
.hbv-search button .hbv-i{width:20px;height:20px}

/* ---------- নেভবার ---------- */
.hbv-nav{background:var(--hbv-nav);position:sticky;top:var(--hbv-pb-h);z-index:50}
.hbv-nav-list{
	display:flex;list-style:none;margin:0;padding:0;
	overflow-x:auto;scrollbar-width:none;
}
.hbv-nav-list::-webkit-scrollbar{display:none}
.hbv-nav-list a{
	display:block;padding:14px 18px;color:#C6C6D2;
	font-weight:600;white-space:nowrap;
	border-bottom:3px solid transparent;
}
.hbv-nav-list .current-menu-item>a,
.hbv-nav-list a:hover{color:#fff;border-bottom-color:var(--hbv-accent)}

/* ---------- সেকশন হেডিং ---------- */
.hbv-block{padding:22px 0}
.hbv-home{padding:8px 0 30px}
.hbv-home .hbv-block:first-child{padding-top:16px}
.hbv-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.hbv-sec-head h1,.hbv-sec-head h2{
	font-family:"Baloo Da 2","Hind Siliguri",sans-serif;
	font-weight:700;font-size:22px;margin:0;line-height:1.25;
}

/* ---------- সিঙ্গেল ভিডিও ---------- */
.hbv-single{padding-top:16px;padding-bottom:34px}

.hbv-player{background:#000;border-radius:var(--hbv-radius);overflow:hidden;margin-bottom:14px}
.hbv-video{width:100%;height:auto;display:block;aspect-ratio:16/9;background:#000}
.hbv-player-img{width:100%;height:auto;display:block}
.hbv-player-empty{
	aspect-ratio:16/9;display:grid;place-items:center;
	color:var(--hbv-muted);text-align:center;padding:20px;
}

.hbv-title{
	font-size:21px;font-weight:700;line-height:1.4;
	margin:0 0 10px;
}
.hbv-views{display:flex;align-items:center;gap:6px;color:var(--hbv-muted);font-size:14.5px;margin-bottom:14px}
.hbv-views .hbv-i{width:17px;height:17px}

/* ভোট + শেয়ার প্যানেল */
.hbv-actions{
	background:var(--hbv-panel);
	border:1px solid var(--hbv-line);
	border-radius:var(--hbv-radius);
	padding:14px;margin-bottom:14px;
}
.hbv-vote-row{display:flex;align-items:center;gap:14px}
.hbv-vote{
	width:44px;height:38px;flex:0 0 44px;
	background:#26262F;border:1px solid var(--hbv-line);
	border-radius:8px;cursor:pointer;
	display:grid;place-items:center;
	transition:background .15s ease,color .15s ease;
}
.hbv-vote .hbv-i{width:19px;height:19px}
.hbv-vote:hover{background:#31313D}
.hbv-vote.is-active{background:var(--hbv-accent);border-color:var(--hbv-accent);color:#fff}
.hbv-vote-down.is-active{background:#4A4A58;border-color:#4A4A58}

.hbv-ratio{flex:1;min-width:0;text-align:center}
.hbv-ratio-num{font-size:13.5px;color:var(--hbv-muted);margin-bottom:5px}
.hbv-ratio-bar{height:4px;background:#3A3A46;border-radius:4px;overflow:hidden}
.hbv-ratio-fill{display:block;height:100%;width:0;background:var(--hbv-accent);transition:width .25s ease}

.hbv-share-row{display:flex;justify-content:center;margin-top:14px;padding-top:12px;border-top:1px solid var(--hbv-line)}
.hbv-share{
	display:inline-flex;align-items:center;gap:7px;
	background:transparent;border:0;cursor:pointer;
	color:var(--hbv-muted);font-weight:600;padding:4px 10px;
}
.hbv-share:hover{color:var(--hbv-text)}
.hbv-share .hbv-i{width:16px;height:16px}

/* ডাউনলোড */
.hbv-dl-row{margin-bottom:20px}
.hbv-dl{
	display:inline-flex;align-items:center;gap:8px;
	background:var(--hbv-accent);color:#fff;
	padding:10px 16px;border-radius:8px;font-weight:700;
}
.hbv-dl .hbv-i{width:19px;height:19px}
.hbv-dl:hover{filter:brightness(1.08)}

/* MORE FROM THIS ALBUM */
.hbv-album-box{
	border:2px solid var(--hbv-accent);
	border-radius:calc(var(--hbv-radius) + 4px);
	background:var(--hbv-panel);
	padding:16px 14px 20px;
	margin-bottom:20px;
}
.hbv-album-head{
	color:var(--hbv-accent);
	font-size:17px;font-weight:700;
	margin:0 0 14px;letter-spacing:.02em;
}

/* ---------- গ্রিড ও কার্ড ---------- */
.hbv-grid{
	display:grid;
	grid-template-columns:repeat(var(--hbv-cols-m,2),minmax(0,1fr));
	gap:16px 12px;
}
.hbv-rail{
	display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;
	scroll-snap-type:x mandatory;scrollbar-width:none;
}
.hbv-rail::-webkit-scrollbar{display:none}
.hbv-rail>.hbv-card{flex:0 0 165px;scroll-snap-align:start}

.hbv-thumb{
	position:relative;aspect-ratio:16/10;overflow:hidden;
	border-radius:8px;background:
		radial-gradient(circle at 1px 1px,rgba(0,0,0,.22) 1px,transparent 1.2px) 0 0/9px 9px,
		linear-gradient(150deg,hsl(var(--hbv-hue,220) 45% 34%),hsl(calc(var(--hbv-hue,220) + 40) 50% 22%));
}
.hbv-thumb-tall{aspect-ratio:3/4}
.hbv-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hbv-play{
	position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
	width:44px;height:44px;border-radius:50%;
	background:rgba(0,0,0,.55);
	box-shadow:0 0 0 2px rgba(255,255,255,.35);
	z-index:2;
}
.hbv-play::before{
	content:"";position:absolute;left:52%;top:50%;
	transform:translate(-50%,-50%);
	width:0;height:0;
	border-left:13px solid #fff;
	border-top:8px solid transparent;
	border-bottom:8px solid transparent;
}
.hbv-badge{
	position:absolute;z-index:3;
	font-size:11.5px;font-weight:700;line-height:1.5;
	padding:2px 7px;border-radius:4px;
}
.hbv-badge-time{left:6px;bottom:6px;background:rgba(0,0,0,.82);color:#fff}
.hbv-badge-count{left:6px;bottom:6px;background:var(--hbv-accent);color:#fff}
.hbv-badge-date{right:6px;top:6px;background:rgba(0,0,0,.82);color:#fff;font-weight:600}

.hbv-card-title{
	font-size:14.5px;font-weight:600;line-height:1.4;
	margin:8px 0 4px;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hbv-card-meta{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--hbv-muted)}
.hbv-meta-item{display:inline-flex;align-items:center;gap:4px}
.hbv-meta-item .hbv-i{width:14px;height:14px}
.hbv-meta-like{color:var(--hbv-good)}

/* Show more */
.hbv-more-row{display:flex;justify-content:center;margin-top:20px}
.hbv-more-videos,
.hbv-more-albums{
	background:var(--hbv-accent);color:#fff;border:0;cursor:pointer;
	font-weight:700;font-size:15px;
	padding:11px 26px;border-radius:30px;
}
.hbv-more-videos:hover,
.hbv-more-albums:hover{filter:brightness(1.08)}
.hbv-more-videos[disabled],
.hbv-more-albums[disabled]{opacity:.55;cursor:default}

/* ---------- ডিসক্রিপশন বক্স ---------- */
.hbv-desc-box{
	background:var(--hbv-panel);
	border:1px solid var(--hbv-line);
	border-radius:var(--hbv-radius);
	padding:16px 14px;
}
.hbv-dupe{
	background:rgba(255,201,60,.10);
	border:1px solid rgba(255,201,60,.35);
	color:#FFC93C;
	border-radius:8px;padding:8px 10px;margin:0 0 14px;
	font-size:13.5px;font-weight:600;
}
.hbv-dupe a{text-decoration:underline;margin-left:6px}
.hbv-desc{font-size:15.5px;line-height:1.75}
.hbv-desc a{color:var(--hbv-accent)}
.hbv-desc p{margin:0 0 12px}
.hbv-postviews{
	display:flex;align-items:center;gap:7px;
	color:var(--hbv-muted);font-size:14px;
	margin:14px 0 0;padding-top:12px;border-top:1px solid var(--hbv-line);
}
.hbv-postviews .hbv-i{width:15px;height:15px}

.hbv-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.hbv-chip{
	display:inline-flex;align-items:center;gap:6px;
	background:#26262F;border:1px solid var(--hbv-line);
	border-radius:6px;padding:5px 11px;
	font-size:13.5px;color:#C9C9D6;
}
.hbv-chip .hbv-i{width:13px;height:13px;color:var(--hbv-muted)}
.hbv-chip:hover{background:var(--hbv-accent);color:#fff;border-color:var(--hbv-accent)}
.hbv-chip:hover .hbv-i{color:#fff}

/* ---------- পেজ (শর্টকোড পেজ) ---------- */
.hbv-page{padding:16px 0 34px}
.hbv-page-content{font-size:16px;line-height:1.75}
.hbv-page-content>p{margin:0 0 14px}
.hbv-page-content a{color:var(--hbv-accent)}
.hbv-page-content h2,
.hbv-page-content h3{
	font-family:"Baloo Da 2","Hind Siliguri",sans-serif;
	font-weight:700;margin:22px 0 10px;
}
.hbv-page-content ul,
.hbv-page-content ol{padding-left:22px;margin:0 0 14px}
.hbv-page-content img{border-radius:var(--hbv-radius)}
.hbv-page .hbv-block:first-child{padding-top:0}

/* ---------- আর্কাইভ / পেজার ---------- */
.hbv-archive{padding:20px 12px 40px}
.hbv-pager{display:flex;justify-content:center;gap:8px;margin-top:26px}
.hbv-pager .page-numbers{
	background:var(--hbv-panel);border:1px solid var(--hbv-line);
	border-radius:6px;padding:7px 13px;font-weight:600;
}
.hbv-pager .page-numbers.current{background:var(--hbv-accent);border-color:var(--hbv-accent);color:#fff}
.hbv-empty{color:var(--hbv-muted)}

/* ---------- ব্যাক টু টপ ---------- */
.hbv-top{
	position:fixed;right:14px;bottom:16px;z-index:60;
	width:44px;height:44px;
	background:var(--hbv-accent);color:#fff;
	border:0;border-radius:8px;cursor:pointer;
	display:grid;place-items:center;
	opacity:0;visibility:hidden;
	transform:translateY(8px);
	transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
}
.hbv-top .hbv-i{width:24px;height:24px}
.hbv-top.is-on{opacity:1;visibility:visible;transform:none}

/* ---------- ফুটার ---------- */
.hbv-foot{background:var(--hbv-head);border-top:1px solid var(--hbv-line);margin-top:20px;padding:24px 0}
.hbv-foot-links{display:flex;flex-wrap:wrap;gap:8px 18px;list-style:none;margin:0 0 12px;padding:0}
.hbv-foot-links a{font-weight:600;font-size:14.5px}
.hbv-copy{margin:0;color:var(--hbv-muted);font-size:13.5px}

/* ---------- টোস্ট ---------- */
.hbv-toast{
	position:fixed;left:50%;bottom:24px;transform:translate(-50%,10px);
	background:#2C2C38;color:#fff;
	padding:10px 18px;border-radius:24px;
	font-size:14px;font-weight:600;
	z-index:99998;opacity:0;
	transition:opacity .2s ease,transform .2s ease;
}
.hbv-toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------- রেসপনসিভ ---------- */
@media (min-width:600px){
	.hbv-title{font-size:24px}
	.hbv-grid{grid-template-columns:repeat(var(--hbv-cols-t,3),minmax(0,1fr))}
	.hbv-rail>.hbv-card{flex:0 0 190px}
	.hbv-head-in{flex-direction:row;align-items:center;gap:20px}
	.hbv-search{flex:1;max-width:520px;margin-left:auto}
	.hbv-share-row{margin-top:0;padding-top:0;border-top:0;justify-content:flex-end}
	.hbv-actions{display:flex;align-items:center;gap:20px}
	.hbv-vote-row{flex:1}
}
@media (min-width:1000px){
	.hbv-grid{grid-template-columns:repeat(var(--hbv-cols-d,4),minmax(0,1fr))}
	.hbv-title{font-size:27px}
	.hbv-sec-head h1,.hbv-sec-head h2{font-size:25px}
	.hbv-album-box{padding:20px 20px 24px}
	.hbv-single{padding-top:22px}
}

@media (prefers-reduced-motion:reduce){
	.hbv-progress-fill,.hbv-ratio-fill,.hbv-top,.hbv-toast,.hbv-vote{transition:none}
}