.stm {
	--st-accent: #d6246e;
	position: relative;
	user-select: none;
	-webkit-user-select: none;
}
.stm-vp {
	position: relative;
	overflow: hidden;
	width: 100%;
	touch-action: none;
	border: 1px solid rgba(128, 128, 128, .35);
	border-radius: 6px;
	background: #f6f7f8;
}
.stm-vp.stm-can-pan { cursor: grab; }
.stm-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.stm-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.stm-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.stm-seat { cursor: default; outline: none; }
.stm-shape { fill: var(--c, #999); stroke: rgba(0, 0, 0, .28); stroke-width: .6; transition: fill .12s; }
.stm-n { fill: #fff; opacity: 0; pointer-events: none; font-family: system-ui, sans-serif; font-weight: 600; }
.stm-zoomed .stm-n { opacity: 1; }

.stm-seat.is-free { cursor: pointer; }
.stm-seat.is-free:hover .stm-shape,
.stm-seat:focus-visible .stm-shape { stroke: #111; stroke-width: 1.6; }
.stm-seat.is-mine { cursor: pointer; }
.stm-seat.is-mine .stm-shape { fill: var(--st-accent); stroke: #fff; stroke-width: 1.4; }
.stm-seat.is-sold .stm-shape { fill: #c3c9cf; stroke: none; }
.stm-seat.is-sold .stm-n { fill: #7b8794; }
.stm-seat.is-held .stm-shape { stroke: #b88a2a; stroke-width: .8; }
.stm-seat.is-held .stm-n { fill: #5c4515; }
.stm-seat.is-blocked .stm-shape { fill: #3e4650; opacity: .55; stroke: none; }
.stm-seat.is-off .stm-shape { fill: #9aa0a6; opacity: .3; stroke: none; }
.stm-seat.is-off .stm-n, .stm-seat.is-blocked .stm-n { opacity: 0; }

.stm-ctl {
	position: absolute; right: 10px; top: 10px;
	display: flex; flex-direction: column; gap: 4px;
}
.stm-ctl button {
	width: 34px; height: 34px; padding: 0;
	border: 1px solid rgba(0, 0, 0, .25); border-radius: 6px;
	background: #fff; color: #111; font-size: 18px; line-height: 1; cursor: pointer;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
}
.stm-ctl button:hover { background: #f0f2f4; }
.stm-ctl button:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 2px; }

.stm-tip {
	position: absolute; z-index: 5; pointer-events: none;
	transform: translate(-50%, calc(-100% - 10px));
	background: #1f2933; color: #fff; padding: 6px 10px; border-radius: 6px;
	font-size: 12.5px; line-height: 1.35; white-space: nowrap; max-width: 90%;
	display: flex; flex-direction: column;
}
.stm-tip span { color: #c9d1d9; }

@media (prefers-reduced-motion: reduce) { .stm-shape { transition: none; } }