*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body.wts-pv {
	--wts-bar: 60px;
	display: flex; flex-direction: column; background: #1e293b; color: #0f172a; overflow: hidden;
	font: 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.wts-pv__bar {
	flex: none; height: var(--wts-bar); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
	padding: 0 16px; background: #fff; border-bottom: 1px solid #e2e8f0; position: relative; z-index: 2;
}
.wts-pv__left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.wts-pv__back {
	display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: #0f172a;
	background: #f1f5f9; flex: none; text-decoration: none;
}
.wts-pv__back:hover { background: #e2e8f0; }
.wts-pv__title { display: flex; flex-direction: column; min-width: 0; }
.wts-pv__title strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wts-pv__title span { font-size: 12px; color: #64748b; }
.wts-pv__devices { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: #f1f5f9; }
.wts-pv__devices button {
	display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent;
	color: #64748b; font: inherit; font-weight: 600; cursor: pointer;
}
.wts-pv__devices button:hover { color: #0f172a; }
.wts-pv__devices button[aria-pressed=true] { background: #fff; color: var(--wts-primary); box-shadow: 0 1px 3px rgba(15, 23, 42, .15); }
.wts-pv__right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.wts-pv__btn {
	display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 8px; background: var(--wts-primary); color: #fff;
	font-weight: 600; text-decoration: none; white-space: nowrap; border: 1px solid var(--wts-primary);
}
.wts-pv__btn:hover { filter: brightness(1.08); }
.wts-pv__btn--ghost { background: transparent; color: var(--wts-primary); }
.wts-pv__close {
	display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: #f1f5f9;
	color: #0f172a; font-size: 24px; line-height: 1; text-decoration: none;
}
.wts-pv__close:hover { background: #e2e8f0; }

.wts-pv__stage { flex: 1; min-height: 0; display: flex; justify-content: center; align-items: stretch; padding: 0; transition: padding .3s; }
.wts-pv__frame { width: 100%; max-width: 100%; height: 100%; background: #fff; overflow: hidden; transition: max-width .35s ease, border-radius .35s, height .35s; }
.wts-pv__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
body[data-device=tablet] .wts-pv__stage, body[data-device=mobile] .wts-pv__stage { padding: 24px 16px; align-items: center; }
body[data-device=tablet] .wts-pv__frame { height: min(1024px, 100%); border-radius: 18px; box-shadow: 0 0 0 12px #0f172a, 0 30px 60px rgba(0, 0, 0, .45); }
body[data-device=mobile] .wts-pv__frame { height: min(844px, 100%); border-radius: 28px; box-shadow: 0 0 0 10px #0f172a, 0 30px 60px rgba(0, 0, 0, .45); }

@media (max-width: 900px) {
	.wts-pv__bar { grid-template-columns: 1fr auto; }
	.wts-pv__devices, .wts-pv__btn--ghost { display: none; }
}
@media (max-width: 520px) {
	.wts-pv__title span { display: none; }
	.wts-pv__btn { padding: 0 12px; font-size: 13px; }
}