/**
 * StreamSera — player preview page.
 *
 * Plain CSS, loaded as is (no build step).
 */

:root {
	--ssp-bg: #f3f4f6;
	--ssp-fg: #1f2937;
	--ssp-muted: #6b7280;
	--ssp-bar: #ffffff;
	--ssp-line: #e5e7eb;
	--ssp-accent: #2563eb;
}
html[data-theme="dark"] {
	--ssp-bg: #0f1117;
	--ssp-fg: #e5e7eb;
	--ssp-muted: #9ca3af;
	--ssp-bar: #161a23;
	--ssp-line: #262b36;
	--ssp-accent: #60a5fa;
}
html,
body {
	margin: 0;
	min-height: 100%;
	background: var(--ssp-bg);
	color: var(--ssp-fg);
	font:
		14px/1.5 -apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		sans-serif;
}
.ssp-bar {
	position: sticky;
	top: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 16px;
	background: var(--ssp-bar);
	border-bottom: 1px solid var(--ssp-line);
}
.ssp-bar__title {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	font-weight: 600;
}
.ssp-bar__title span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ssp-pill {
	font-size: 11px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--ssp-line);
	color: var(--ssp-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.ssp-pill--live {
	background: #dcfce7;
	color: #166534;
}
html[data-theme="dark"] .ssp-pill--live {
	background: #14532d;
	color: #bbf7d0;
}
.ssp-bar__tools {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 8px;
}
.ssp-seg {
	display: inline-flex;
	border: 1px solid var(--ssp-line);
	border-radius: 8px;
	overflow: hidden;
}
.ssp-seg a {
	padding: 4px 10px;
	color: var(--ssp-muted);
	text-decoration: none;
	font-size: 12px;
}
.ssp-seg a.is-active {
	background: var(--ssp-line);
	color: var(--ssp-fg);
}
.ssp-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 8px;
	border: 1px solid var(--ssp-line);
	background: transparent;
	color: var(--ssp-fg);
	text-decoration: none;
	font-size: 12px;
	cursor: pointer;
}
.ssp-btn--primary {
	background: var(--ssp-accent);
	border-color: var(--ssp-accent);
	color: #fff;
}
.ssp-stage {
	padding: 32px 16px;
	box-sizing: border-box;
	min-height: calc(100vh - 49px);
	display: flex;
	align-items: flex-start;
	justify-content: center;
}
.ssp-stage.is-wide {
	padding: 0;
	align-items: stretch;
}
.ssp-stage.is-wide .streamsera-player-root {
	width: 100%;
}
.ssp-stage.is-narrow .streamsera-player-root {
	width: 100%;
	max-width: 480px;
}
.ssp-stage[data-device="tablet"],
.ssp-stage[data-device="phone"] {
	padding: 32px 16px;
	align-items: flex-start;
}
.ssp-stage[data-device] .ssp-device {
	width: 100%;
	margin: 0 auto;
	border: 1px solid var(--ssp-line);
	border-radius: 18px;
	background: var(--ssp-bar);
	padding: 16px;
	box-sizing: border-box;
	box-shadow: 0 20px 50px -30px rgba(0, 0, 0, 0.4);
}
.ssp-stage[data-device="tablet"] .ssp-device {
	max-width: 768px;
}
.ssp-stage[data-device="phone"] .ssp-device {
	max-width: 390px;
	border-radius: 28px;
}
.ssp-stage[data-device] .streamsera-player-root {
	width: 100%;
	max-width: none;
}
.ssp-note {
	position: fixed;
	bottom: 12px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 12px;
	color: var(--ssp-muted);
	background: var(--ssp-bar);
	border: 1px solid var(--ssp-line);
	padding: 4px 12px;
	border-radius: 999px;
}