/* ═══════════════════════════════════════════════════════════════
   Brandcer Video Hero Slider — CSS v1.0.2
   Developer: Zayn Soomro | brandcer.com
═══════════════════════════════════════════════════════════════ */

/* ── Reset / Isolation ── */
.bvhs-wrapper,
.bvhs-wrapper *,
.bvhs-wrapper *::before,
.bvhs-wrapper *::after { box-sizing: border-box; }

/* ── Wrapper ── */
.bvhs-wrapper {
	position: relative !important;
	overflow: hidden !important;
	display: block !important;
	width: 100%;
	height: 70vh;
	background: #000;
	isolation: isolate;
	-webkit-font-smoothing: antialiased;
}
.bvhs-wrapper.bvhs-is-fullscreen { width: 100vw !important; height: 100vh !important; }

/* ── Container ── */
.bvhs-videos-container {
	position: absolute !important;
	top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
	width: 100% !important; height: 100% !important;
}

/* ── Slides ── */
.bvhs-slide {
	position: absolute !important;
	top: 0 !important; left: 0 !important;
	width: 100% !important; height: 100% !important;
	opacity: 0;
	transition: opacity 0.7s ease-in-out;
	pointer-events: none;
	z-index: 0;
}
.bvhs-slide.bvhs-slide-active  { opacity: 1; pointer-events: auto; z-index: 1; }
.bvhs-slide.bvhs-slide-leaving { opacity: 0; z-index: 0; }

/* ── Video ── */
.bvhs-video {
	position: absolute !important;
	top: 0 !important; left: 0 !important;
	width: 100% !important; height: 100% !important;
	object-fit: cover; object-position: center;
	display: block !important;
	pointer-events: none;
	z-index: 1;
	transform-origin: center center;
}

/* ── External embed full-canvas ── */
.bvhs-embed-wrap {
	position: absolute !important;
	top: 0 !important; left: 0 !important;
	width: 100% !important; height: 100% !important;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}
.bvhs-iframe {
	position: absolute !important;
	top: 50% !important; left: 50% !important;
	width: 140% !important; height: 140% !important;
	transform: translate(-50%, -50%) !important;
	border: 0 !important;
	pointer-events: none;
}
.bvhs-iframe-preview {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	background: #111; padding: 20px; z-index: 1;
}
.bvhs-iframe-preview span { color: rgba(255,255,255,0.5); font-size: 13px; font-family: sans-serif; }

/* ── Fallback ── */
.bvhs-fallback {
	position: absolute !important;
	top: 0 !important; left: 0 !important;
	width: 100% !important; height: 100% !important;
	background-size: cover; background-position: center;
	z-index: 3;
	transition: opacity 0.6s ease;
	opacity: 1;
	display: flex !important;
	align-items: center; justify-content: center;
}
.bvhs-fallback.bvhs-fallback-hidden { opacity: 0; pointer-events: none; }
.bvhs-fallback-play {
	position: relative; z-index: 4;
	display: flex; align-items: center; justify-content: center;
	width: 64px; height: 64px;
	background: rgba(0,0,0,0.5); border: none; border-radius: 50%;
	color: #fff; cursor: pointer;
	transition: background 0.2s, transform 0.15s; outline: none;
}
.bvhs-fallback-play:hover { background: rgba(0,0,0,0.75); transform: scale(1.1); }
.bvhs-fallback-play svg { display: block; width: 32px; height: 32px; fill: currentColor; }

/* ── Gradient ── */
.bvhs-gradient {
	position: absolute !important;
	top: 0 !important; left: 0 !important;
	width: 100% !important; height: 100% !important;
	z-index: 5; pointer-events: none;
}

/* ── Loading Overlay ── */
.bvhs-loading-overlay {
	position: absolute !important;
	top: 0 !important; left: 0 !important;
	width: 100% !important; height: 100% !important;
	z-index: 50;
	display: flex;
	flex-direction: column;
	align-items: center; justify-content: center;
	gap: 12px;
	background: rgba(0,0,0,0.7);
	transition: opacity 0.4s ease;
}
.bvhs-loader-pct {
	color: #fff; font-size: 16px; font-family: -apple-system, sans-serif;
	font-weight: 600; letter-spacing: 0.05em;
}

/* Ring loader */
.bvhs-loader-ring {
	width: 48px; height: 48px;
	border: 3px solid rgba(255,255,255,0.15);
	border-top-color: #fff;
	border-radius: 50%;
	animation: bvhsSpin 0.8s linear infinite;
}
@keyframes bvhsSpin { to { transform: rotate(360deg); } }

/* Spinner */
.bvhs-loader-spinner {
	width: 48px; height: 48px;
	border: 3px solid transparent;
	border-top-color: #fff;
	border-right-color: rgba(255,255,255,0.4);
	border-radius: 50%;
	animation: bvhsSpin 1s ease-in-out infinite;
}

/* Bar */
.bvhs-loader-bar {
	width: 140px; height: 4px;
	background: rgba(255,255,255,0.15);
	border-radius: 4px; overflow: hidden;
}
.bvhs-loader-bar-fill {
	height: 100%; width: 0%;
	background: #fff;
	border-radius: 4px;
	transition: width 0.3s ease;
}

/* Dots */
.bvhs-loader-dots { display: flex; gap: 8px; }
.bvhs-loader-dot {
	width: 10px; height: 10px;
	background: #fff; border-radius: 50%;
	animation: bvhsDot 1.2s ease-in-out infinite;
}
.bvhs-loader-dot:nth-child(1) { animation-delay: 0s; }
.bvhs-loader-dot:nth-child(2) { animation-delay: 0.2s; }
.bvhs-loader-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes bvhsDot { 0%,80%,100%{opacity:.2;transform:scale(0.7)} 40%{opacity:1;transform:scale(1)} }

/* ── Text layers ── */
.bvhs-text-layer {
	position: absolute !important;
	z-index: 20 !important;
	display: flex !important;
	flex-direction: column;
	max-width: 80%; padding: 20px 30px;
	box-sizing: border-box;
	opacity: 0;
}

/* 9-point grid */
.bvhs-pos-top-left, .bvhs-pos-left,   .bvhs-pos-bottom-left  { left: 0 !important; align-items: flex-start; text-align: left; }
.bvhs-pos-top,      .bvhs-pos-center, .bvhs-pos-bottom       { left: 50% !important; align-items: center; text-align: center; }
.bvhs-pos-top-right,.bvhs-pos-right,  .bvhs-pos-bottom-right { right: 0 !important; align-items: flex-end; text-align: right; }
.bvhs-pos-top-left, .bvhs-pos-top,    .bvhs-pos-top-right    { top: 0 !important; }
.bvhs-pos-left,     .bvhs-pos-right                          { top: 50% !important; transform: translateY(-50%); }
.bvhs-pos-center                                              { top: 50% !important; transform: translate(-50%, -50%); }
.bvhs-pos-bottom-left,.bvhs-pos-bottom,.bvhs-pos-bottom-right{ bottom: 0 !important; }
.bvhs-pos-top    { transform: translateX(-50%) !important; }
.bvhs-pos-bottom { transform: translateX(-50%) !important; }

/* ── Typography ── */
.bvhs-heading, .bvhs-subheading, .bvhs-description { margin: 0; padding: 0; max-width: 100%; }
.bvhs-heading    { font-size: clamp(1.5rem,4vw,3.5rem); font-weight: 700; color: #fff; line-height: 1.2; letter-spacing: -0.02em; }
.bvhs-subheading { font-size: clamp(1rem,2.5vw,2rem);   font-weight: 500; color: #eee; line-height: 1.3; margin-top: 0.5em; }
.bvhs-description{ font-size: clamp(0.85rem,1.5vw,1.1rem); font-weight: 400; color: #ddd; line-height: 1.7; margin-top: 0.75em; }

/* ── Text Animations ── */
.bvhs-anim-in.bvhs-anim-fade  { animation: bvhsFIn  0.7s ease both; }
.bvhs-anim-out.bvhs-anim-fade { animation: bvhsFOut 0.5s ease both; }
@keyframes bvhsFIn  { from{opacity:0} to{opacity:1} }
@keyframes bvhsFOut { from{opacity:1} to{opacity:0} }

.bvhs-anim-in.bvhs-anim-slide-left   { animation: bvhsSLIn   0.7s ease both; }
.bvhs-anim-out.bvhs-anim-slide-left  { animation: bvhsSLOut  0.5s ease both; }
@keyframes bvhsSLIn  { from{opacity:0;transform:translateX(60px)}  to{opacity:1;transform:translateX(0)} }
@keyframes bvhsSLOut { from{opacity:1;transform:translateX(0)}     to{opacity:0;transform:translateX(-60px)} }

.bvhs-anim-in.bvhs-anim-slide-right  { animation: bvhsSRIn   0.7s ease both; }
.bvhs-anim-out.bvhs-anim-slide-right { animation: bvhsSROUt  0.5s ease both; }
@keyframes bvhsSRIn  { from{opacity:0;transform:translateX(-60px)} to{opacity:1;transform:translateX(0)} }
@keyframes bvhsSROUt { from{opacity:1;transform:translateX(0)}     to{opacity:0;transform:translateX(60px)} }

.bvhs-anim-in.bvhs-anim-slide-top    { animation: bvhsSTIn   0.7s ease both; }
.bvhs-anim-out.bvhs-anim-slide-top   { animation: bvhsSTOut  0.5s ease both; }
@keyframes bvhsSTIn  { from{opacity:0;transform:translateY(60px)}  to{opacity:1;transform:translateY(0)} }
@keyframes bvhsSTOut { from{opacity:1;transform:translateY(0)}     to{opacity:0;transform:translateY(-60px)} }

.bvhs-anim-in.bvhs-anim-slide-bottom  { animation: bvhsSBIn  0.7s ease both; }
.bvhs-anim-out.bvhs-anim-slide-bottom { animation: bvhsSBOut 0.5s ease both; }
@keyframes bvhsSBIn  { from{opacity:0;transform:translateY(-60px)} to{opacity:1;transform:translateY(0)} }
@keyframes bvhsSBOut { from{opacity:1;transform:translateY(0)}     to{opacity:0;transform:translateY(60px)} }

.bvhs-anim-in.bvhs-anim-zoom  { animation: bvhsZIn  0.7s ease both; }
.bvhs-anim-out.bvhs-anim-zoom { animation: bvhsZOut 0.5s ease both; }
@keyframes bvhsZIn  { from{opacity:0;transform:scale(0.7)} to{opacity:1;transform:scale(1)} }
@keyframes bvhsZOut { from{opacity:1;transform:scale(1)}   to{opacity:0;transform:scale(1.3)} }

.bvhs-anim-in.bvhs-anim-none  { opacity:1!important;animation:none; }
.bvhs-anim-out.bvhs-anim-none { opacity:0!important;animation:none; }

/* Centre-column preserve X */
.bvhs-pos-top.bvhs-anim-in.bvhs-anim-slide-top,
.bvhs-pos-bottom.bvhs-anim-in.bvhs-anim-slide-top   { animation: bvhsSTInCX 0.7s ease both; }
@keyframes bvhsSTInCX { from{opacity:0;transform:translateX(-50%) translateY(60px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
.bvhs-pos-top.bvhs-anim-in.bvhs-anim-slide-bottom,
.bvhs-pos-bottom.bvhs-anim-in.bvhs-anim-slide-bottom { animation: bvhsSBInCX 0.7s ease both; }
@keyframes bvhsSBInCX { from{opacity:0;transform:translateX(-50%) translateY(-60px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }

.bvhs-pos-center.bvhs-anim-in.bvhs-anim-fade         { animation: bvhsFInCXY 0.7s ease both; }
@keyframes bvhsFInCXY { from{opacity:0;transform:translate(-50%,-50%)} to{opacity:1;transform:translate(-50%,-50%)} }
.bvhs-pos-center.bvhs-anim-in.bvhs-anim-zoom         { animation: bvhsZInCXY 0.7s ease both; }
@keyframes bvhsZInCXY { from{opacity:0;transform:translate(-50%,-50%) scale(0.7)} to{opacity:1;transform:translate(-50%,-50%)} }
.bvhs-pos-center.bvhs-anim-in.bvhs-anim-slide-bottom { animation: bvhsSBInCXY 0.7s ease both; }
@keyframes bvhsSBInCXY { from{opacity:0;transform:translate(-50%,-50%) translateY(-30px)} to{opacity:1;transform:translate(-50%,-50%)} }

/* ── Play/Pause Button ── */
.bvhs-play-pause-btn {
	position: absolute !important;
	z-index: 40;
	display: flex; align-items: center; justify-content: center;
	background: rgba(0,0,0,0.5);
	color: #fff; border: none; cursor: pointer; outline: none;
	width: 56px; height: 56px; border-radius: 50%;
	transition: background 0.2s, opacity 0.3s, transform 0.15s;
	opacity: 0;
	-webkit-tap-highlight-color: transparent;
}
.bvhs-play-pause-btn.bvhs-pp-visible { opacity: 1; }
.bvhs-play-pause-btn:hover { background: rgba(0,0,0,0.75); transform: scale(1.08); }
.bvhs-pp-style-square { border-radius: 6px !important; }
.bvhs-pp-style-minimal { background: transparent !important; }
.bvhs-play-pause-btn svg { display: block; width: 24px; height: 24px; }
/* show on wrapper hover (YouTube behaviour) */
.bvhs-wrapper:hover .bvhs-play-pause-btn { opacity: 1; }

/* ── Mute button ── */
.bvhs-mute-btn {
	position: absolute !important;
	z-index: 35;
	display: flex; align-items: center; justify-content: center;
	background: rgba(0,0,0,0.45); color: #fff; border: none; cursor: pointer;
	padding: 8px 9px; border-radius: 50px; line-height: 1;
	transition: background 0.2s, transform 0.15s;
	backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); outline: none;
}
.bvhs-mute-btn:hover { background: rgba(0,0,0,0.7); transform: scale(1.1); }
.bvhs-mute-btn .bvhs-svg { display: block; width: 20px; height: 20px; stroke: currentColor; fill: none; }
.bvhs-mute-btn img { display: block; width: 20px; height: 20px; object-fit: contain; }

/* ── Fullscreen button ── */
.bvhs-fullscreen-btn {
	position: absolute !important;
	z-index: 38;
	display: flex; align-items: center; justify-content: center;
	background: rgba(0,0,0,0.4); color: #fff; border: none; cursor: pointer;
	padding: 6px 7px; border-radius: 6px; line-height: 1;
	transition: background 0.2s, transform 0.15s; outline: none;
	backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.bvhs-fullscreen-btn:hover { background: rgba(0,0,0,0.7); transform: scale(1.08); }
.bvhs-fullscreen-btn .bvhs-svg { display: block; width: 22px; height: 22px; stroke: currentColor; fill: none; }
.bvhs-fs-exit { display: none; }

/* Absolute position helpers (for fullscreen, play-pause) */
.bvhs-pos-abs-top-left     { top:14px!important; left:14px!important; }
.bvhs-pos-abs-top          { top:14px!important; left:50%!important; transform:translateX(-50%)!important; }
.bvhs-pos-abs-top-right    { top:14px!important; right:14px!important; }
.bvhs-pos-abs-left         { left:14px!important; top:50%!important; transform:translateY(-50%)!important; }
.bvhs-pos-abs-center       { top:50%!important; left:50%!important; transform:translate(-50%,-50%)!important; }
.bvhs-pos-abs-right        { right:14px!important; top:50%!important; transform:translateY(-50%)!important; }
.bvhs-pos-abs-bottom-left  { bottom:14px!important; left:14px!important; }
.bvhs-pos-abs-bottom       { bottom:14px!important; left:50%!important; transform:translateX(-50%)!important; }
.bvhs-pos-abs-bottom-right { bottom:14px!important; right:14px!important; }

/* ── YouTube-style Volume Bar ── */
.bvhs-vol-wrap {
	position: absolute !important;
	z-index: 35;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	background: rgba(0,0,0,0.45);
	border-radius: 50px;
	padding: 8px;
	backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
	transition: padding 0.2s ease;
}
/* Icon is always visible */
.bvhs-vol-icon {
	background: none; border: none; color: #fff; cursor: pointer;
	padding: 4px; display: flex; align-items: center; justify-content: center;
	border-radius: 50%; transition: background 0.15s; outline: none;
	-webkit-tap-highlight-color: transparent;
}
.bvhs-vol-icon:hover, .bvhs-vol-icon:focus { background: rgba(255,255,255,0.15); }
.bvhs-vol-icon .bvhs-svg { display: block; width: 20px; height: 20px; stroke: currentColor; fill: none; }
.bvhs-vol-icon-mid,
.bvhs-vol-icon-off { display: none; }

/* Expandable track — hidden until hover/touch */
.bvhs-vol-expand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height 0.25s ease, opacity 0.2s ease;
}
.bvhs-vol-expand.bvhs-vol-expanded {
	max-height: 200px;
	opacity: 1;
}

/* Horizontal mode */
.bvhs-vol-wrap.bvhs-vol-h { flex-direction: row; }
.bvhs-vol-wrap.bvhs-vol-h .bvhs-vol-expand { flex-direction: row; max-height: none; max-width: 0; }
.bvhs-vol-wrap.bvhs-vol-h .bvhs-vol-expand.bvhs-vol-expanded { max-width: 200px; }

/* Track */
.bvhs-vol-track-wrap {
	width: 4px; height: 72px;
	cursor: pointer; touch-action: none;
	display: flex; align-items: flex-end;
}
.bvhs-vol-wrap.bvhs-vol-h .bvhs-vol-track-wrap {
	width: 72px; height: 4px;
	align-items: center;
}
.bvhs-vol-track {
	width: 100%; height: 100%;
	background: rgba(255,255,255,0.25);
	border-radius: 4px; position: relative; overflow: hidden;
}
.bvhs-vol-fill {
	position: absolute; bottom: 0; left: 0;
	width: 100%; background: #fff; border-radius: 4px;
	transition: height 0.1s ease;
}
.bvhs-vol-wrap.bvhs-vol-h .bvhs-vol-fill {
	top: 0; left: 0; width: 100%; height: 100% !important;
	transition: width 0.1s ease;
}

/* Vol buttons */
.bvhs-vol-btn {
	background: none; border: none; color: #fff; cursor: pointer;
	padding: 3px; display: flex; align-items: center; justify-content: center;
	border-radius: 50%; transition: background 0.15s; outline: none;
}
.bvhs-vol-btn:hover { background: rgba(255,255,255,0.18); }
.bvhs-vol-btn .bvhs-svg { width: 14px; height: 14px; stroke: currentColor; fill: none; display: block; }

/* Flip modifiers */
.bvhs-vol-flip-h { transform: scaleX(-1); }
.bvhs-vol-flip-v { transform: scaleY(-1); }
.bvhs-vol-flip-h.bvhs-vol-flip-v { transform: scale(-1); }

/* ── Buttons ── */
.bvhs-btn-layer { z-index: 21 !important; }
.bvhs-btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.bvhs-pos-top    .bvhs-btns,
.bvhs-pos-center .bvhs-btns,
.bvhs-pos-bottom .bvhs-btns { justify-content: center; }
.bvhs-pos-top-right .bvhs-btns,
.bvhs-pos-right     .bvhs-btns,
.bvhs-pos-bottom-right .bvhs-btns { justify-content: flex-end; }

.bvhs-btn {
	display: inline-flex; align-items: center; justify-content: center;
	text-decoration: none; cursor: pointer;
	padding: 12px 28px;
	background: rgba(255,255,255,0.15); color: #fff;
	border: 1px solid rgba(255,255,255,0.5); border-radius: 4px;
	font-size: 0.95rem; font-weight: 600; letter-spacing: 0.04em;
	transition: background 0.22s, transform 0.15s, color 0.22s, border-color 0.22s;
	backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); white-space: nowrap;
}
.bvhs-btn:hover { background: rgba(255,255,255,0.3); transform: translateY(-2px); }
.bvhs-btn-style-solid  { background: #fff !important; color: #000 !important; border-color: #fff !important; }
.bvhs-btn-style-ghost  { background: transparent !important; border-color: transparent !important; }

/* ── Timeline ── */
.bvhs-timeline { position: absolute; z-index: 25; display: flex; gap: 8px; align-items: center; pointer-events: none; }
.bvhs-tl-wrap  { pointer-events: auto; transition: transform 0.15s; cursor: pointer; position: relative; overflow: hidden; border-radius: 3px; }
.bvhs-tl-fill  { position: absolute; top: 0; left: 0; border-radius: inherit; }
.bvhs-tl-hover { position: absolute; inset: 0; transition: background 0.2s; }

/* ── Placeholder / Empty ── */
.bvhs-video-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #0d0d0d; z-index: 1; }
.bvhs-video-placeholder span { color: rgba(255,255,255,0.3); font-size: 0.9rem; font-family: sans-serif; }
.bvhs-empty { padding: 24px; color: #888; font-family: sans-serif; font-size: 14px; }

/* ── Responsive ── */
@media (max-width: 1024px) { .bvhs-text-layer { max-width: 90%; } }
@media (max-width: 768px) {
	.bvhs-text-layer  { max-width: 95%; padding: 12px 16px; }
	.bvhs-heading     { font-size: clamp(1.2rem,5vw,2rem); }
	.bvhs-subheading  { font-size: clamp(0.9rem,3.5vw,1.4rem); }
	.bvhs-description { font-size: clamp(0.8rem,2.5vw,1rem); }
	.bvhs-iframe      { width: 200% !important; height: 200% !important; }
	.bvhs-btn         { padding: 10px 20px; font-size: 0.85rem; }
	.bvhs-vol-btn .bvhs-svg { width: 16px; height: 16px; }
	.bvhs-vol-track-wrap { height: 56px; }
}
@media (max-width: 480px) {
	.bvhs-wrapper  { min-height: 240px; }
	.bvhs-text-layer { max-width: 100%; padding: 10px 12px; }
	.bvhs-btn { padding: 8px 16px; font-size: 0.8rem; }
	.bvhs-play-pause-btn { width: 44px; height: 44px; }
}

/* ══════════════════════════════════════════════════
   ADMIN DASHBOARD — Modern Light UI v1.0.2
══════════════════════════════════════════════════ */
.bvhs-admin-wrap { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f4f4f5; min-height: 100vh; color: #18181b; margin: 0; padding: 0; }
.bvhs-admin-header { background: #fff; border-bottom: 1px solid #e4e4e7; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; height: 64px; position: sticky; top: 32px; z-index: 100; }
.bvhs-header-brand { display: flex; align-items: center; gap: 14px; }
.bvhs-header-logo  { width: 40px; height: 40px; background: #18181b; color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 16px; font-weight: 900; flex-shrink: 0; }
.bvhs-header-title { font-size: 15px; font-weight: 700; color: #18181b; }
.bvhs-header-sub   { font-size: 11px; color: #71717a; margin-top: 2px; }
.bvhs-header-nav   { display: flex; gap: 4px; }
.bvhs-nav-tab      { color: #71717a; font-size: 13px; font-weight: 500; text-decoration: none; padding: 7px 14px; border-radius: 7px; transition: all 0.15s; }
.bvhs-nav-tab:hover  { background: #f4f4f5; color: #18181b; }
.bvhs-nav-active     { background: #18181b !important; color: #fff !important; }
.bvhs-save-banner    { background: #f0fdf4; border-bottom: 1px solid #bbf7d0; color: #166534; padding: 12px 32px; font-size: 13px; font-weight: 500; }
.bvhs-admin-form     { display: flex; flex-direction: column; min-height: calc(100vh - 64px); }
.bvhs-admin-body     { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding: 28px 32px; flex: 1; }
.bvhs-admin-body-full{ display: block; padding: 28px 32px; flex: 1; }
.bvhs-sidebar        { display: flex; flex-direction: column; gap: 8px; }
.bvhs-sidebar-card   { background: #fff; border: 1px solid #e4e4e7; border-radius: 10px; padding: 14px 16px; }
.bvhs-sidebar-label  { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #71717a; margin-bottom: 4px; }
.bvhs-sidebar-value  { font-size: 13px; color: #18181b; font-weight: 500; }
.bvhs-sidebar-links  { display: flex; flex-direction: column; gap: 8px; }
.bvhs-sidebar-links a{ font-size: 13px; color: #3f3f46; text-decoration: none; }
.bvhs-sidebar-links a:hover { color: #18181b; }
.bvhs-dev-link       { color: #2563eb !important; text-decoration: none; font-weight: 500; }
.bvhs-dev-link:hover { text-decoration: underline; }
.bvhs-main-panels    { display: flex; flex-direction: column; gap: 16px; }
.bvhs-panel          { background: #fff; border: 1px solid #e4e4e7; border-radius: 12px; overflow: hidden; }
.bvhs-panel-header   { display: flex; align-items: flex-start; gap: 14px; padding: 20px 24px 0; }
.bvhs-panel-icon     { font-size: 20px; flex-shrink: 0; margin-top: 2px; }
.bvhs-panel-header h2{ font-size: 15px !important; font-weight: 700 !important; color: #18181b !important; margin: 0 0 4px !important; padding: 0 !important; border: none !important; }
.bvhs-panel-header p { font-size: 12.5px; color: #71717a; margin: 0; }
.bvhs-panel-body     { padding: 20px 24px; }
.bvhs-field-row      { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 14px 0; border-bottom: 1px solid #f4f4f5; }
.bvhs-field-row:last-child { border-bottom: none; padding-bottom: 0; }
.bvhs-field-label    { font-size: 13px; font-weight: 500; color: #27272a; min-width: 160px; }
.bvhs-field-hint     { display: block; font-size: 11.5px; color: #71717a; font-weight: 400; margin-top: 3px; }
.bvhs-input          { background: #fff; border: 1px solid #d4d4d8; border-radius: 7px; color: #18181b; padding: 8px 12px; font-size: 13px; width: 200px; transition: border-color 0.15s, box-shadow 0.15s; }
.bvhs-input:focus    { border-color: #18181b; outline: none; box-shadow: 0 0 0 3px rgba(24,24,27,0.08); }
.bvhs-toggle         { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.bvhs-toggle input   { display: none; }
.bvhs-toggle-track   { position: relative; width: 38px; height: 22px; background: #d4d4d8; border-radius: 22px; transition: background 0.2s; flex-shrink: 0; }
.bvhs-toggle-thumb   { position: absolute; width: 16px; height: 16px; background: #fff; border-radius: 50%; top: 3px; left: 3px; transition: transform 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.bvhs-toggle input:checked ~ .bvhs-toggle-track             { background: #18181b; }
.bvhs-toggle input:checked ~ .bvhs-toggle-track .bvhs-toggle-thumb { transform: translateX(16px); }
.bvhs-toggle-label   { font-size: 13px; color: #3f3f46; }
.bvhs-admin-footer   { background: #fff; border-top: 1px solid #e4e4e7; padding: 16px 32px; display: flex; align-items: center; gap: 20px; }
.bvhs-btn-primary    { background: #18181b; color: #fff; border: none; padding: 9px 22px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s; }
.bvhs-btn-primary:hover { background: #27272a; }
.bvhs-footer-note    { font-size: 12px; color: #71717a; }
.bvhs-compat-info    { background: #fafafa; border: 1px solid #e4e4e7; border-radius: 8px; padding: 16px; margin-top: 4px; }
.bvhs-compat-info h4 { font-size: 12.5px !important; font-weight: 700 !important; color: #27272a !important; margin: 0 0 10px !important; padding: 0 !important; border: none !important; }
.bvhs-code-block     { background: #18181b; color: #a3e635; font-size: 11px; padding: 14px 16px; border-radius: 8px; overflow-x: auto; line-height: 1.8; white-space: pre; font-family: 'SF Mono','Fira Code',monospace; }
.bvhs-compat-list    { color: #3f3f46; font-size: 12.5px; line-height: 1.9; padding-left: 20px; margin: 0; }
.bvhs-compat-list code { background: #f4f4f5; padding: 1px 6px; border-radius: 4px; font-size: 11.5px; }
.bvhs-code-grid      { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bvhs-code-area      { width: 100%; border: 1px solid #d4d4d8; border-radius: 8px; padding: 12px 14px; font-family: 'SF Mono','Fira Code',monospace; font-size: 12.5px; line-height: 1.7; color: #18181b; resize: vertical; background: #fafafa; box-sizing: border-box; transition: border-color 0.15s; }
.bvhs-code-area:focus{ border-color: #18181b; outline: none; background: #fff; }
.bvhs-code-tips      { background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 6px; padding: 10px 12px; margin-bottom: 10px; font-size: 12px; color: #0c4a6e; line-height: 1.8; }
.bvhs-code-tips code { background: #e0f2fe; padding: 1px 5px; border-radius: 3px; display: block; }
.bvhs-code-tips-warn { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
/* Guide */
.bvhs-guide-nav { display: flex; flex-wrap: wrap; gap: 4px; padding: 14px 32px; background: #fff; border-bottom: 1px solid #e4e4e7; }
.bvhs-guide-nav-item { color: #71717a; font-size: 12px; font-weight: 500; text-decoration: none; padding: 5px 12px; border-radius: 6px; border: 1px solid #e4e4e7; transition: all 0.15s; }
.bvhs-guide-nav-item:hover { background: #f4f4f5; color: #18181b; border-color: #d4d4d8; }
.bvhs-guide-body { padding: 0 0 60px; background: #f4f4f5; }
.bvhs-guide-step { display: flex; border-bottom: 1px solid #e4e4e7; }
.bvhs-guide-step-number { flex-shrink: 0; width: 72px; display: flex; align-items: flex-start; justify-content: center; padding-top: 32px; font-size: 28px; font-weight: 900; color: #d4d4d8; background: #fafafa; border-right: 1px solid #e4e4e7; }
.bvhs-guide-step-content { flex: 1; padding: 28px 32px; background: #fff; }
.bvhs-guide-step-content h2 { color: #18181b !important; font-size: 15px !important; font-weight: 700 !important; margin: 0 0 14px !important; padding: 0 !important; border: none !important; }
.bvhs-guide-step-content h3 { color: #27272a !important; font-size: 13px !important; font-weight: 600 !important; margin: 0 0 8px !important; padding: 0 !important; border: none !important; }
.bvhs-guide-step-content p  { color: #52525b; font-size: 13px; line-height: 1.7; margin: 0 0 12px; }
.bvhs-guide-ol { color: #3f3f46; font-size: 13px; line-height: 1.9; padding-left: 20px; margin: 0 0 12px; }
.bvhs-guide-ul { color: #3f3f46; font-size: 12.5px; line-height: 1.8; padding-left: 16px; margin: 0; }
.bvhs-guide-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.bvhs-guide-table tr { border-bottom: 1px solid #f4f4f5; }
.bvhs-guide-table td { padding: 8px 10px 8px 0; vertical-align: top; color: #3f3f46; }
.bvhs-guide-table td:first-child { font-weight: 600; color: #18181b; white-space: nowrap; width: 35%; padding-right: 16px; }
.bvhs-guide-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 4px; }
.bvhs-guide-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-top: 4px; }
.bvhs-guide-card-sm { background: #f8f8f8; border: 1px solid #e4e4e7; border-radius: 8px; padding: 14px; }
.bvhs-guide-card-sm h4 { font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; color: #52525b !important; margin: 0 0 10px !important; padding: 0 !important; border: none !important; }
.bvhs-guide-tip { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 7px; padding: 11px 14px; font-size: 12.5px; color: #166534; line-height: 1.6; margin-top: 12px; }
.bvhs-guide-faq { display: flex; flex-direction: column; gap: 8px; }
.bvhs-guide-faq-item { background: #fafafa; border: 1px solid #e4e4e7; border-radius: 8px; padding: 14px; }
.bvhs-guide-faq-item strong { font-size: 13px; color: #18181b; display: block; margin-bottom: 6px; }
.bvhs-guide-faq-item p { color: #52525b; font-size: 12.5px; margin: 0; }
.bvhs-guide-footer { margin-top: 24px; padding-top: 14px; border-top: 1px solid #e4e4e7; color: #71717a; font-size: 12px; line-height: 1.8; }
@media (max-width: 1100px) { .bvhs-admin-body{grid-template-columns:1fr;} .bvhs-code-grid{grid-template-columns:1fr;} .bvhs-guide-grid-3{grid-template-columns:1fr 1fr;} }
@media (max-width: 780px)  { .bvhs-admin-header{flex-direction:column;height:auto;padding:16px;gap:12px;} .bvhs-admin-body{padding:16px;} .bvhs-guide-grid-2,.bvhs-guide-grid-3{grid-template-columns:1fr;} .bvhs-guide-step-number{width:44px;font-size:18px;} .bvhs-guide-step-content{padding:18px;} }