.svt-viewer {
	--svt-accent: #2f6fed;
	position: relative;
	width: 100%;
	height: 100%;
	background: #000;
	overflow: hidden;
	border-radius: 10px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	isolation: isolate;
}

.svt-stage { position: absolute; inset: 0; }
.svt-stage canvas { display: block; width: 100% !important; height: 100% !important; cursor: grab; }
.svt-stage canvas:active { cursor: grabbing; }

/* ---------------------------- logo ---------------------------- */
.svt-logo {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 20;
	display: block;
	max-width: 140px;
	filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
.svt-logo img { display: block; max-width: 100%; max-height: 48px; }

/* ---------------------------- loading / error ---------------------------- */
.svt-loading {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	color: #fff;
	background: #000;
	z-index: 30;
	font-size: 14px;
}
.svt-loading[hidden] { display: none; }
.svt-spinner {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 3px solid rgba(255,255,255,.2);
	border-top-color: var(--svt-accent);
	animation: svt-spin 0.8s linear infinite;
}
@keyframes svt-spin { to { transform: rotate(360deg); } }

.svt-error {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(20,10,10,.92);
	border: 1px solid #ff6b6b;
	color: #ffb3b3;
	padding: 16px 20px;
	border-radius: 8px;
	max-width: 320px;
	text-align: center;
	font-size: 13px;
	z-index: 30;
}

/* ---------------------------- fade transition ---------------------------- */
.svt-fade-overlay {
	position: absolute;
	inset: 0;
	background: #000;
	opacity: 0;
	pointer-events: none;
	transition: opacity .28s ease;
	z-index: 25;
}
.svt-fade-overlay.is-visible { opacity: 1; }

/* ---------------------------- toolbars ---------------------------- */
.svt-bottom-left, .svt-bottom-right {
	position: absolute;
	bottom: 14px;
	display: flex;
	align-items: center;
	gap: 8px;
	z-index: 40;
}
.svt-bottom-left { left: 14px; right: 14px; }
.svt-bottom-right { right: 14px; }

.svt-btn {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: rgba(20,20,24,.55);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #fff;
	cursor: pointer;
	transition: background .15s ease, transform .15s ease;
}
.svt-btn svg { width: 20px; height: 20px; }
.svt-btn:hover { background: rgba(40,40,46,.75); transform: translateY(-1px); }
.svt-btn.is-active { background: var(--svt-accent); color: #fff; }

.svt-bottom-right { background: rgba(20,20,24,.35); padding: 4px; border-radius: 24px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.svt-bottom-right .svt-btn { background: transparent; }
.svt-bottom-right .svt-btn:hover { background: rgba(255,255,255,.12); }
.svt-bottom-right .svt-btn.is-active { background: var(--svt-accent); }

/* ---------------------------- thumbnail strip ---------------------------- */
.svt-thumbbar {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: thin;
	padding: 4px;
	background: rgba(20,20,24,.35);
	border-radius: 12px;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	flex: 1;
	min-width: 0;
}
.svt-thumbbar::-webkit-scrollbar { height: 5px; }
.svt-thumbbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 3px; }

.svt-thumb {
	position: relative;
	flex-shrink: 0;
	width: 76px;
	height: 44px;
	border-radius: 8px;
	overflow: hidden;
	border: 2px solid transparent;
	cursor: pointer;
	padding: 0;
	background: #111;
}
.svt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .85; }
.svt-thumb span {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	font-size: 9px;
	line-height: 1.6;
	color: #fff;
	background: linear-gradient(transparent, rgba(0,0,0,.75));
	padding: 6px 4px 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: left;
}
.svt-thumb:hover img { opacity: 1; }
.svt-thumb.is-active { border-color: var(--svt-accent); }
.svt-thumb.is-active img { opacity: 1; }

.svt-thumb-mobile {
	display: flex;
	align-items: center;
	gap: 10px;
	background: rgba(20,20,24,.55);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	padding: 4px 12px;
	border-radius: 22px;
	color: #fff;
	font-size: 12px;
	flex: 1;
	justify-content: center;
}
.svt-thumb-mobile .svt-btn { width: 32px; height: 32px; background: transparent; }
.svt-thumb-mobile .svt-btn:hover { background: rgba(255,255,255,.15); }

/* ---------------------------- floor plan panel ---------------------------- */
.svt-floorplan-panel {
	position: absolute;
	top: 16px;
	right: 16px;
	bottom: 78px;
	width: min(360px, calc(100% - 32px));
	background: rgba(15,15,18,.9);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 12px;
	z-index: 45;
	padding: 12px;
	overflow: auto;
	box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.svt-fp-close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 30px;
	height: 30px;
	z-index: 2;
}
.svt-fp-inner { position: relative; margin-top: 10px; }
.svt-fp-inner img { width: 100%; display: block; border-radius: 8px; }
.svt-fp-pin {
	position: absolute;
	width: 18px;
	height: 18px;
	margin-left: -9px;
	margin-top: -9px;
	border-radius: 50%;
	background: #ffb400;
	border: 2px solid #fff;
	box-shadow: 0 2px 6px rgba(0,0,0,.5);
	cursor: pointer;
	padding: 0;
}
.svt-fp-pin.is-active { background: var(--svt-accent); transform: scale(1.25); }

/* ---------------------------- toast ---------------------------- */
.svt-toast {
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translateX(-50%) translateY(-8px);
	background: rgba(20,20,24,.9);
	color: #fff;
	padding: 8px 16px;
	border-radius: 20px;
	font-size: 13px;
	z-index: 60;
	opacity: 0;
	transition: opacity .25s ease, transform .25s ease;
	pointer-events: none;
}
.svt-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------------------------- responsive ---------------------------- */
@media (max-width: 640px) {
	.svt-bottom-right { gap: 2px; }
	.svt-btn { width: 34px; height: 34px; }
	.svt-btn svg { width: 17px; height: 17px; }
	.svt-floorplan-panel { left: 16px; right: 16px; width: auto; bottom: 90px; }
	.svt-logo { max-width: 96px; top: 10px; left: 10px; }
	.svt-logo img { max-height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
	.svt-fade-overlay, .svt-toast, .svt-spinner { transition: none; animation: none; }
}