:root {
	--jmw-sb-page-bg: #0b0d12;
}

.jmw-soundboard-builder-page {
	background: var(--jmw-sb-page-bg);
}

.jmw-soundboard-builder-page .site-main,
.jmw-soundboard-builder-page .jmw-sb-page-shell,
.jmw-sb-page-shell {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
}

.jmw-soundboard-builder-page .entry-header,
.jmw-soundboard-builder-page .page-header,
.jmw-soundboard-builder-page .entry-title {
	display: none;
}

.jmw-sb-app,
.jmw-sb-app * {
	box-sizing: border-box;
}

.jmw-sb-app [hidden] {
	display: none !important;
}

.jmw-sb-app {
	--jmw-sb-bg: #0b0d12;
	--jmw-sb-panel: rgba(23, 26, 34, 0.94);
	--jmw-sb-panel-strong: #1c202a;
	--jmw-sb-panel-soft: #12151c;
	--jmw-sb-border: rgba(255, 255, 255, 0.11);
	--jmw-sb-border-strong: rgba(138, 180, 255, 0.43);
	--jmw-sb-text: #f4f7fb;
	--jmw-sb-muted: #aab3c2;
	--jmw-sb-dim: #7f899a;
	--jmw-sb-accent: #8ab4ff;
	--jmw-sb-accent-strong: #a9c8ff;
	--jmw-sb-accent-dark: #172a4d;
	--jmw-sb-green: #53d597;
	--jmw-sb-yellow: #f4cb62;
	--jmw-sb-red: #ff727c;
	--jmw-sb-grid: rgba(255, 255, 255, 0.075);
	--jmw-sb-wave: rgba(138, 180, 255, 0.92);
	position: relative;
	isolation: isolate;
	min-height: 100vh;
	width: 100%;
	overflow: hidden;
	padding: clamp(24px, 4vw, 64px) max(18px, calc((100vw - 1420px) / 2));
	background:
		radial-gradient(circle at 12% -10%, rgba(67, 111, 203, 0.24), transparent 31rem),
		radial-gradient(circle at 90% 18%, rgba(71, 190, 147, 0.11), transparent 28rem),
		linear-gradient(180deg, #0d1016 0%, var(--jmw-sb-bg) 55%, #080a0e 100%);
	color: var(--jmw-sb-text);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.55;
}

.jmw-sb-app__backdrop {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.24;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
	background-size: 32px 32px;
	mask-image: linear-gradient(to bottom, #000, transparent 78%);
}

.jmw-sb-app a {
	color: var(--jmw-sb-accent);
}

.jmw-sb-app button,
.jmw-sb-app input,
.jmw-sb-app select,
.jmw-sb-app textarea {
	font: inherit;
}

.jmw-sb-app button,
.jmw-sb-app input[type="range"],
.jmw-sb-app label.jmw-sb-dropzone {
	touch-action: manipulation;
}

.jmw-sb-app button:focus-visible,
.jmw-sb-app input:focus-visible,
.jmw-sb-app .jmw-sb-timeline:focus-visible,
.jmw-sb-app summary:focus-visible,
.jmw-sb-app a:focus-visible {
	outline: 3px solid rgba(138, 180, 255, 0.62);
	outline-offset: 3px;
}

.jmw-sb-hero {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 28px;
	margin: 0 auto 28px;
	max-width: 1420px;
}

.jmw-sb-eyebrow,
.jmw-sb-kicker {
	margin: 0 0 7px;
	color: var(--jmw-sb-accent);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.jmw-sb-hero h1 {
	margin: 0;
	max-width: 900px;
	color: #fff;
	font-size: clamp(2.15rem, 5vw, 4.8rem);
	font-weight: 850;
	letter-spacing: -0.055em;
	line-height: 0.98;
}

.jmw-sb-lead {
	max-width: 850px;
	margin: 18px 0 0;
	color: #c6cfdd;
	font-size: clamp(1rem, 1.7vw, 1.2rem);
}

.jmw-sb-save-status {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	flex: 0 0 auto;
	min-width: 150px;
	padding: 10px 13px;
	border: 1px solid var(--jmw-sb-border);
	border-radius: 999px;
	background: rgba(7, 9, 13, 0.6);
	color: var(--jmw-sb-muted);
	font-size: 0.84rem;
	font-weight: 700;
	white-space: nowrap;
}

.jmw-sb-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--jmw-sb-dim);
	box-shadow: 0 0 0 4px rgba(127, 137, 154, 0.12);
}

.jmw-sb-save-status[data-state="saved"] .jmw-sb-dot { background: var(--jmw-sb-green); box-shadow: 0 0 0 4px rgba(83, 213, 151, 0.12); }
.jmw-sb-save-status[data-state="dirty"] .jmw-sb-dot { background: var(--jmw-sb-yellow); box-shadow: 0 0 0 4px rgba(244, 203, 98, 0.12); }
.jmw-sb-save-status[data-state="saving"] .jmw-sb-dot { background: var(--jmw-sb-accent); animation: jmw-sb-pulse 1.1s ease-in-out infinite; }
.jmw-sb-save-status[data-state="error"] .jmw-sb-dot { background: var(--jmw-sb-red); }

.jmw-sb-boot,
.jmw-sb-notice {
	max-width: 1420px;
	margin: 0 auto 22px;
	padding: 17px 19px;
	border: 1px solid var(--jmw-sb-border);
	border-radius: 14px;
	background: var(--jmw-sb-panel);
	color: var(--jmw-sb-muted);
}

.jmw-sb-boot--error,
.jmw-sb-notice--error {
	border-color: rgba(255, 114, 124, 0.42);
	color: #ffd8dc;
}

.jmw-sb-workspace {
	max-width: 1420px;
	margin: 0 auto;
}

.jmw-sb-panel,
.jmw-sb-instructions,
.jmw-sb-delete-bar,
.jmw-sb-credit {
	border: 1px solid var(--jmw-sb-border);
	border-radius: 20px;
	background: var(--jmw-sb-panel);
	box-shadow: 0 22px 55px rgba(0, 0, 0, 0.19);
	backdrop-filter: blur(15px);
}

.jmw-sb-panel {
	padding: clamp(18px, 2.5vw, 28px);
}

.jmw-sb-panel--toolbar {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 16px;
	padding: 18px 20px;
}

.jmw-sb-board-title-wrap {
	min-width: min(380px, 100%);
	flex: 1 1 380px;
}

.jmw-sb-board-title-wrap label,
.jmw-sb-youtube-add > label,
.jmw-sb-clip-maker > label,
.jmw-sb-dialog label {
	display: block;
	margin-bottom: 7px;
	color: var(--jmw-sb-muted);
	font-size: 0.8rem;
	font-weight: 800;
	letter-spacing: 0.045em;
	text-transform: uppercase;
}

.jmw-sb-app input[type="text"],
.jmw-sb-app input[type="url"] {
	width: 100%;
	min-height: 45px;
	margin: 0;
	padding: 10px 13px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 10px;
	background: #0d1016;
	box-shadow: none;
	color: #fff;
}

.jmw-sb-app input[type="text"]::placeholder,
.jmw-sb-app input[type="url"]::placeholder {
	color: #697386;
	opacity: 1;
}

.jmw-sb-toolbar-actions,
.jmw-sb-editor-controls,
.jmw-sb-dialog__actions,
.jmw-sb-library-item__actions,
.jmw-sb-delete-bar > div {
	display: flex;
	align-items: center;
	gap: 9px;
	flex-wrap: wrap;
}

.jmw-sb-button,
.jmw-sb-icon-button {
	appearance: none;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: #202530;
	color: #eef3fb;
	cursor: pointer;
	font-weight: 760;
	line-height: 1.15;
	text-align: center;
	text-decoration: none;
	transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, opacity 150ms ease;
}

.jmw-sb-button {
	min-height: 42px;
	padding: 10px 14px;
	border-radius: 10px;
	font-size: 0.88rem;
}

.jmw-sb-button:hover:not(:disabled),
.jmw-sb-icon-button:hover:not(:disabled) {
	transform: translateY(-1px);
	border-color: rgba(138, 180, 255, 0.5);
	background: #293140;
	color: #fff;
}

.jmw-sb-button:active:not(:disabled),
.jmw-sb-icon-button:active:not(:disabled) {
	transform: translateY(0);
}

.jmw-sb-button:disabled,
.jmw-sb-icon-button:disabled {
	cursor: not-allowed;
	opacity: 0.43;
}

.jmw-sb-button--primary {
	border-color: rgba(138, 180, 255, 0.58);
	background: var(--jmw-sb-accent);
	color: #0c1930;
}

.jmw-sb-button--primary:hover:not(:disabled) {
	background: var(--jmw-sb-accent-strong);
	color: #091529;
}

.jmw-sb-button--accent {
	border-color: rgba(83, 213, 151, 0.54);
	background: var(--jmw-sb-green);
	color: #082419;
}

.jmw-sb-button--accent:hover:not(:disabled) {
	background: #72e5ad;
	color: #061e15;
}

.jmw-sb-button--danger {
	border-color: rgba(255, 114, 124, 0.75);
	background: var(--jmw-sb-red);
	color: #2b080b;
}

.jmw-sb-button--danger-outline {
	border-color: rgba(255, 114, 124, 0.38);
	background: rgba(255, 114, 124, 0.07);
	color: #ffb5bb;
}

.jmw-sb-icon-button {
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border-radius: 50%;
	font-size: 1.35rem;
}

.jmw-sb-delete-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
	padding: 14px 18px;
	border-color: rgba(255, 114, 124, 0.36);
	background: rgba(84, 24, 31, 0.86);
}

.jmw-sb-instructions {
	margin-bottom: 16px;
	overflow: hidden;
}

.jmw-sb-instructions summary {
	padding: 16px 20px;
	cursor: pointer;
	color: #fff;
	font-weight: 800;
	list-style-position: inside;
}

.jmw-sb-instructions[open] summary {
	border-bottom: 1px solid var(--jmw-sb-border);
}

.jmw-sb-instructions__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
}

.jmw-sb-instructions__grid p {
	margin: 0;
	padding: 17px 20px;
	color: var(--jmw-sb-muted);
	font-size: 0.9rem;
}

.jmw-sb-instructions__grid p + p {
	border-left: 1px solid var(--jmw-sb-border);
}

.jmw-sb-instructions__grid strong {
	color: #fff;
}

.jmw-sb-layout {
	display: grid;
	grid-template-columns: minmax(310px, 0.78fr) minmax(500px, 1.22fr);
	gap: 16px;
	align-items: start;
}

.jmw-sb-panel-heading,
.jmw-sb-subheading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.jmw-sb-panel-heading {
	margin-bottom: 19px;
}

.jmw-sb-panel-heading h2,
.jmw-sb-subheading h3,
.jmw-sb-dialog h2,
.jmw-sb-library-item h3 {
	margin: 0;
	color: #fff;
	line-height: 1.13;
}

.jmw-sb-panel-heading h2,
.jmw-sb-dialog h2 {
	font-size: clamp(1.35rem, 2.2vw, 1.85rem);
	letter-spacing: -0.025em;
}

.jmw-sb-limit,
.jmw-sb-current-source,
.jmw-sb-source-count {
	max-width: 45%;
	color: var(--jmw-sb-dim);
	font-size: 0.8rem;
	font-weight: 700;
	text-align: right;
}

.jmw-sb-dropzone {
	display: flex;
	min-height: 190px;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 6px;
	padding: 25px;
	border: 2px dashed rgba(138, 180, 255, 0.35);
	border-radius: 16px;
	background: rgba(138, 180, 255, 0.045);
	color: var(--jmw-sb-muted);
	cursor: pointer;
	text-align: center;
	transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.jmw-sb-dropzone:hover,
.jmw-sb-dropzone.is-dragging {
	border-color: var(--jmw-sb-accent);
	background: rgba(138, 180, 255, 0.1);
	transform: translateY(-1px);
}

.jmw-sb-dropzone input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.jmw-sb-dropzone__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	margin-bottom: 5px;
	border-radius: 14px;
	background: var(--jmw-sb-accent-dark);
	color: var(--jmw-sb-accent);
	font-size: 1.85rem;
	font-weight: 400;
}

.jmw-sb-dropzone strong {
	color: #fff;
	font-size: 1rem;
}

.jmw-sb-dropzone span:last-child {
	max-width: 410px;
	font-size: 0.83rem;
}

.jmw-sb-youtube-add {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--jmw-sb-border);
}

.jmw-sb-youtube-add p,
.jmw-sb-clip-maker p,
.jmw-sb-youtube-policy {
	margin: 8px 0 0;
	color: var(--jmw-sb-dim);
	font-size: 0.79rem;
}

.jmw-sb-inline-input {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.jmw-sb-inline-input input {
	min-width: 0;
	flex: 1 1 auto;
}

.jmw-sb-source-list-wrap {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--jmw-sb-border);
}

.jmw-sb-subheading {
	align-items: center;
	margin-bottom: 10px;
}

.jmw-sb-subheading h3 {
	font-size: 1rem;
}

.jmw-sb-subheading span {
	color: var(--jmw-sb-dim);
	font-size: 0.78rem;
}

.jmw-sb-source-list {
	display: grid;
	gap: 8px;
}

.jmw-sb-source {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px;
	align-items: center;
	border: 1px solid var(--jmw-sb-border);
	border-radius: 12px;
	background: var(--jmw-sb-panel-soft);
}

.jmw-sb-source.is-current {
	border-color: var(--jmw-sb-border-strong);
	box-shadow: inset 3px 0 0 var(--jmw-sb-accent);
}

.jmw-sb-source__select {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 2px 9px;
	align-items: center;
	width: 100%;
	min-width: 0;
	padding: 12px 5px 12px 13px;
	border: 0;
	background: transparent;
	color: var(--jmw-sb-text);
	cursor: pointer;
	text-align: left;
}

.jmw-sb-source__select strong,
.jmw-sb-source__meta {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.jmw-sb-source__kind {
	grid-row: span 2;
	padding: 4px 7px;
	border-radius: 999px;
	background: rgba(138, 180, 255, 0.12);
	color: var(--jmw-sb-accent);
	font-size: 0.65rem;
	font-weight: 850;
	letter-spacing: 0.045em;
	text-transform: uppercase;
}

.jmw-sb-source__meta {
	color: var(--jmw-sb-dim);
	font-size: 0.73rem;
}

.jmw-sb-source__remove {
	width: 32px;
	height: 32px;
	margin-right: 8px;
	font-size: 1.1rem;
}

.jmw-sb-editor-empty {
	display: grid;
	min-height: 420px;
	place-items: center;
	padding: 30px;
	border: 1px dashed rgba(255, 255, 255, 0.15);
	border-radius: 15px;
	color: var(--jmw-sb-dim);
	text-align: center;
}

.jmw-sb-editor audio {
	display: none;
}

.jmw-sb-youtube-player-wrap {
	margin-bottom: 18px;
	padding: 10px;
	border: 1px solid var(--jmw-sb-border);
	border-radius: 14px;
	background: #000;
}

.jmw-sb-youtube-player,
.jmw-sb-youtube-player iframe {
	display: block;
	width: 100% !important;
	min-width: 200px;
	min-height: 200px;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 8px;
}

.jmw-sb-youtube-policy {
	padding: 0 3px 2px;
	color: #a9a9a9;
}

.jmw-sb-time-readout {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: 12px;
}

.jmw-sb-time-readout span {
	padding: 9px 10px;
	border: 1px solid var(--jmw-sb-border);
	border-radius: 10px;
	background: #10131a;
	color: var(--jmw-sb-muted);
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.jmw-sb-time-readout b {
	display: block;
	margin-bottom: 2px;
	color: var(--jmw-sb-dim);
	font-size: 0.65rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.jmw-sb-time-readout output {
	font-size: 0.85rem;
}

.jmw-sb-timeline {
	position: relative;
	height: 132px;
	margin: 0 16px;
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: 12px;
	background: #090b0f;
	cursor: crosshair;
	user-select: none;
}

.jmw-sb-timeline canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: inherit;
}

.jmw-sb-selection {
	position: absolute;
	top: 0;
	bottom: 0;
	border-left: 1px solid rgba(83, 213, 151, 0.8);
	border-right: 1px solid rgba(255, 114, 124, 0.8);
	background: rgba(138, 180, 255, 0.13);
	pointer-events: none;
}

.jmw-sb-playhead {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 2px;
	margin-left: -1px;
	background: #fff;
	box-shadow: 0 0 8px rgba(255, 255, 255, 0.62);
	pointer-events: none;
}

.jmw-sb-marker {
	position: absolute;
	top: -10px;
	bottom: -10px;
	width: 28px;
	margin-left: -14px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #06100b;
	cursor: ew-resize;
	z-index: 4;
}

.jmw-sb-marker::after {
	content: "";
	position: absolute;
	top: 25px;
	bottom: 4px;
	left: 13px;
	width: 2px;
	background: currentColor;
	opacity: 0.78;
}

.jmw-sb-marker span {
	display: grid;
	place-items: center;
	width: 28px;
	height: 25px;
	border-radius: 7px 7px 4px 4px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
	font-size: 0.75rem;
	font-weight: 900;
}

.jmw-sb-marker--a { color: var(--jmw-sb-green); }
.jmw-sb-marker--a span { background: var(--jmw-sb-green); color: #062016; }
.jmw-sb-marker--b { color: var(--jmw-sb-red); }
.jmw-sb-marker--b span { background: var(--jmw-sb-red); color: #2b080b; }

.jmw-sb-ticks {
	position: relative;
	height: 26px;
	margin: 0 16px 10px;
	color: var(--jmw-sb-dim);
	font-size: 0.68rem;
	font-variant-numeric: tabular-nums;
}

.jmw-sb-ticks span {
	position: absolute;
	top: 4px;
	transform: translateX(-50%);
	white-space: nowrap;
}

.jmw-sb-ticks span:first-child { transform: translateX(0); }
.jmw-sb-ticks span:last-child { transform: translateX(-100%); }

.jmw-sb-editor-controls {
	justify-content: center;
	margin: 4px 0 19px;
}

.jmw-sb-clip-maker {
	padding: 17px;
	border: 1px solid rgba(83, 213, 151, 0.25);
	border-radius: 14px;
	background: rgba(83, 213, 151, 0.055);
}

.jmw-sb-board-panel {
	margin-top: 16px;
}

.jmw-sb-volume {
	display: grid;
	grid-template-columns: auto minmax(90px, 180px) 44px;
	gap: 9px;
	align-items: center;
	color: var(--jmw-sb-muted);
	font-size: 0.78rem;
	font-weight: 750;
}

.jmw-sb-volume input[type="range"] {
	accent-color: var(--jmw-sb-accent);
}

.jmw-sb-volume output {
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.jmw-sb-board-empty {
	padding: 32px;
	border: 1px dashed rgba(255, 255, 255, 0.15);
	border-radius: 14px;
	color: var(--jmw-sb-dim);
	text-align: center;
}

.jmw-sb-clips {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
	gap: 14px;
}

.jmw-sb-clip {
	position: relative;
	min-width: 0;
	padding: 11px;
	border: 1px solid var(--jmw-sb-border);
	border-radius: 16px;
	background: #10131a;
	transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.jmw-sb-clip.is-playing {
	border-color: rgba(83, 213, 151, 0.65);
	box-shadow: 0 0 0 3px rgba(83, 213, 151, 0.09), 0 12px 32px rgba(0, 0, 0, 0.3);
	transform: translateY(-2px);
}

.jmw-sb-clip.is-selected {
	border-color: var(--jmw-sb-red);
	box-shadow: 0 0 0 3px rgba(255, 114, 124, 0.12);
}

.jmw-sb-pad {
	position: relative;
	display: grid;
	min-height: 128px;
	width: 100%;
	place-items: center;
	padding: 18px;
	border: 1px solid rgba(138, 180, 255, 0.24);
	border-radius: 13px;
	background:
		radial-gradient(circle at 50% 20%, rgba(138, 180, 255, 0.17), transparent 55%),
		linear-gradient(160deg, #232a38, #171b24);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 18px rgba(0, 0, 0, 0.2);
	color: #fff;
	cursor: pointer;
	text-align: center;
	transition: transform 100ms ease, border-color 150ms ease, background 150ms ease;
}

.jmw-sb-pad:hover {
	border-color: rgba(138, 180, 255, 0.65);
	transform: translateY(-1px);
}

.jmw-sb-pad:active,
.jmw-sb-clip.is-playing .jmw-sb-pad {
	transform: translateY(1px) scale(0.99);
	border-color: rgba(83, 213, 151, 0.75);
	background:
		radial-gradient(circle at 50% 30%, rgba(83, 213, 151, 0.27), transparent 60%),
		linear-gradient(160deg, #233b34, #15241f);
}

.jmw-sb-clip.is-selected .jmw-sb-pad {
	border-color: var(--jmw-sb-red);
	background: linear-gradient(160deg, #4a2227, #2b161a);
}

.jmw-sb-pad__number {
	position: absolute;
	top: 9px;
	left: 10px;
	color: var(--jmw-sb-dim);
	font-size: 0.68rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.jmw-sb-pad__icon {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(138, 180, 255, 0.13);
	color: var(--jmw-sb-accent);
	font-size: 1.25rem;
	box-shadow: 0 0 0 7px rgba(138, 180, 255, 0.04);
}

.jmw-sb-clip.is-playing .jmw-sb-pad__icon {
	background: rgba(83, 213, 151, 0.17);
	color: var(--jmw-sb-green);
	animation: jmw-sb-pulse 1s ease-in-out infinite;
}

.jmw-sb-clip.is-selected .jmw-sb-pad__icon {
	background: rgba(255, 114, 124, 0.17);
	color: var(--jmw-sb-red);
}

.jmw-sb-pad__status {
	color: var(--jmw-sb-muted);
	font-size: 0.73rem;
	font-weight: 800;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.jmw-sb-clip__title-label {
	display: block;
	margin-top: 9px;
	color: var(--jmw-sb-dim);
	font-size: 0.66rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.jmw-sb-clip__title-label input {
	min-height: 40px !important;
	margin-top: 5px !important;
	font-size: 0.92rem !important;
	font-weight: 750 !important;
	text-align: center;
}

.jmw-sb-clip__options {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 9px;
	color: var(--jmw-sb-muted);
	font-size: 0.76rem;
}

.jmw-sb-clip__options label {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	cursor: pointer;
}

.jmw-sb-clip__options input {
	accent-color: var(--jmw-sb-green);
}

.jmw-sb-clip__duration {
	font-variant-numeric: tabular-nums;
}

.jmw-sb-clip__asset {
	display: inline-flex;
	align-items: center;
	margin-top: 9px;
	padding: 3px 7px;
	border: 1px solid rgba(138, 180, 255, 0.2);
	border-radius: 999px;
	background: rgba(138, 180, 255, 0.08);
	color: var(--jmw-sb-accent-strong);
	font-size: 0.62rem;
	font-weight: 850;
	letter-spacing: 0.045em;
	line-height: 1.3;
	text-transform: uppercase;
}

.jmw-sb-clip__asset.is-standalone {
	border-color: rgba(83, 213, 151, 0.28);
	background: rgba(83, 213, 151, 0.08);
	color: #88ebbd;
}

.jmw-sb-clip__asset.is-youtube {
	border-color: rgba(255, 114, 124, 0.28);
	background: rgba(255, 114, 124, 0.08);
	color: #ffadb4;
}

.jmw-sb-clip__source {
	overflow: hidden;
	margin: 7px 1px 0;
	color: var(--jmw-sb-dim);
	font-size: 0.68rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.jmw-sb-credit {
	margin-top: 16px;
	padding: 14px 18px;
}

.jmw-sb-credit > a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	color: #fff;
	font-size: 0.9rem;
	font-weight: 750;
	text-align: center;
	text-decoration: none;
}

.jmw-sb-credit > a:hover {
	color: var(--jmw-sb-accent);
}

.jmw-sb-credit__logo {
	display: grid;
	width: 62px;
	height: 54px;
	place-items: center;
	flex: 0 0 auto;
	padding: 5px;
	border-radius: 9px;
	background: #000;
}

.jmw-sb-credit__logo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.jmw-sb-toast-region {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 100000;
	display: grid;
	width: min(390px, calc(100vw - 36px));
	gap: 9px;
	pointer-events: none;
}

.jmw-sb-toast {
	padding: 13px 15px;
	border: 1px solid var(--jmw-sb-border);
	border-radius: 12px;
	background: #1c222d;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38);
	color: #f5f8fc;
	font-size: 0.88rem;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 180ms ease, transform 180ms ease;
}

.jmw-sb-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.jmw-sb-toast--success { border-color: rgba(83, 213, 151, 0.55); }
.jmw-sb-toast--error { border-color: rgba(255, 114, 124, 0.64); }
.jmw-sb-toast--info { border-color: rgba(138, 180, 255, 0.55); }

.jmw-sb-dialog {
	width: min(720px, calc(100vw - 28px));
	max-height: min(82vh, 760px);
	margin: auto;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 18px;
	background: #151922;
	box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65);
	color: var(--jmw-sb-text);
}

.jmw-sb-dialog::backdrop {
	background: rgba(2, 4, 7, 0.78);
	backdrop-filter: blur(5px);
}

.jmw-sb-dialog__card {
	max-height: inherit;
	overflow: auto;
	margin: 0;
	padding: 24px;
	background: transparent;
}

.jmw-sb-dialog__heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 19px;
}

.jmw-sb-dialog__actions {
	justify-content: flex-end;
	margin-top: 20px;
}

.jmw-sb-dialog p {
	color: var(--jmw-sb-muted);
}

.jmw-sb-library-list {
	display: grid;
	gap: 10px;
}

.jmw-sb-library-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 15px;
	border: 1px solid var(--jmw-sb-border);
	border-radius: 13px;
	background: #0e1117;
}

.jmw-sb-library-item h3 {
	font-size: 1rem;
}

.jmw-sb-library-item p,
.jmw-sb-library-empty {
	margin: 5px 0 0;
	color: var(--jmw-sb-dim);
	font-size: 0.78rem;
}

.jmw-sb-recovery-code {
	display: block;
	margin: 17px 0;
	padding: 17px;
	border: 1px solid rgba(138, 180, 255, 0.38);
	border-radius: 12px;
	background: #090b10;
	color: var(--jmw-sb-accent-strong);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: clamp(1.05rem, 4vw, 1.65rem);
	font-weight: 850;
	letter-spacing: 0.08em;
	text-align: center;
	word-break: break-word;
}

.jmw-sb-app.is-busy {
	cursor: progress;
}

@keyframes jmw-sb-pulse {
	0%, 100% { opacity: 0.62; transform: scale(0.96); }
	50% { opacity: 1; transform: scale(1.04); }
}

@media (max-width: 1080px) {
	.jmw-sb-layout {
		grid-template-columns: 1fr;
	}

	.jmw-sb-instructions__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.jmw-sb-instructions__grid p:nth-child(3) {
		border-left: 0;
		border-top: 1px solid var(--jmw-sb-border);
	}

	.jmw-sb-instructions__grid p:nth-child(4) {
		border-top: 1px solid var(--jmw-sb-border);
	}
}

@media (max-width: 800px) {
	.jmw-sb-app {
		padding-inline: 14px;
	}

	.jmw-sb-hero,
	.jmw-sb-panel--toolbar,
	.jmw-sb-delete-bar {
		align-items: stretch;
		flex-direction: column;
	}

	.jmw-sb-save-status {
		align-self: flex-start;
	}

	.jmw-sb-toolbar-actions .jmw-sb-button {
		flex: 1 1 calc(33.333% - 9px);
	}

	.jmw-sb-time-readout {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.jmw-sb-panel-heading {
		align-items: flex-start;
		flex-direction: column;
	}

	.jmw-sb-limit,
	.jmw-sb-current-source {
		max-width: 100%;
		text-align: left;
	}

	.jmw-sb-volume {
		width: 100%;
		grid-template-columns: auto minmax(80px, 1fr) 42px;
	}
}

@media (max-width: 580px) {
	.jmw-sb-app {
		padding-top: 26px;
	}

	.jmw-sb-hero h1 {
		font-size: clamp(2rem, 13vw, 3.1rem);
	}

	.jmw-sb-panel,
	.jmw-sb-dialog__card {
		padding: 16px;
	}

	.jmw-sb-panel,
	.jmw-sb-instructions,
	.jmw-sb-delete-bar,
	.jmw-sb-credit {
		border-radius: 15px;
	}

	.jmw-sb-toolbar-actions .jmw-sb-button,
	.jmw-sb-delete-bar .jmw-sb-button {
		flex: 1 1 calc(50% - 9px);
	}

	.jmw-sb-instructions__grid {
		grid-template-columns: 1fr;
	}

	.jmw-sb-instructions__grid p + p {
		border-top: 1px solid var(--jmw-sb-border);
		border-left: 0;
	}

	.jmw-sb-inline-input {
		flex-direction: column;
	}

	.jmw-sb-timeline {
		height: 118px;
		margin-inline: 10px;
	}

	.jmw-sb-ticks {
		margin-inline: 10px;
	}

	.jmw-sb-editor-controls .jmw-sb-button {
		flex: 1 1 100%;
	}

	.jmw-sb-clips {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 9px;
	}

	.jmw-sb-clip {
		padding: 8px;
	}

	.jmw-sb-pad {
		min-height: 105px;
		padding: 12px;
	}

	.jmw-sb-pad__icon {
		width: 44px;
		height: 44px;
	}

	.jmw-sb-clip__options {
		align-items: flex-start;
		flex-direction: column;
	}

	.jmw-sb-credit > a,
	.jmw-sb-library-item {
		align-items: stretch;
		flex-direction: column;
	}

	.jmw-sb-credit__logo {
		align-self: center;
	}

	.jmw-sb-library-item__actions .jmw-sb-button {
		flex: 1 1 auto;
	}
}

@media (max-width: 390px) {
	.jmw-sb-clips {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jmw-sb-app *,
	.jmw-sb-app *::before,
	.jmw-sb-app *::after {
		scroll-behavior: auto !important;
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/* v1.2 precision markers, editable clip metadata, and board organization. */
.jmw-sb-marker-controls {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 2px 0 30px;
}

.jmw-sb-marker-control {
	min-width: 0;
	margin: 0;
	padding: 12px;
	border: 1px solid var(--jmw-sb-border);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.025);
}

.jmw-sb-marker-control legend {
	padding: 0 6px;
	color: var(--jmw-sb-muted);
	font-size: 0.72rem;
	font-weight: 850;
	letter-spacing: 0.055em;
	text-transform: uppercase;
}

.jmw-sb-marker-control__time {
	display: grid;
	grid-template-columns: auto minmax(112px, 1fr);
	gap: 9px;
	align-items: center;
	color: var(--jmw-sb-dim);
	font-size: 0.72rem;
	font-weight: 750;
}

.jmw-sb-marker-control__time input {
	min-height: 38px !important;
	padding: 7px 10px !important;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

.jmw-sb-nudge-row {
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	gap: 4px;
	margin-top: 9px;
}

.jmw-sb-nudge-row button {
	min-width: 0;
	min-height: 32px;
	padding: 5px 2px;
	border: 1px solid var(--jmw-sb-border);
	border-radius: 7px;
	background: #121722;
	color: var(--jmw-sb-muted);
	font-size: 0.68rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
}

.jmw-sb-nudge-row button:hover,
.jmw-sb-nudge-row button:focus-visible {
	border-color: rgba(138, 180, 255, 0.55);
	color: #fff;
}

.jmw-sb-selection {
	border: 0;
	background: transparent;
}

.jmw-sb-marker {
	top: 0;
	bottom: 0;
	width: 20px;
	margin-left: -10px;
}

.jmw-sb-marker::after {
	top: 0;
	bottom: 0;
	left: 9px;
	width: 2px;
	opacity: 1;
	box-shadow: 0 0 7px currentColor;
}

.jmw-sb-marker span {
	position: absolute;
	top: -23px;
	left: 50%;
	display: block;
	width: auto;
	height: auto;
	padding: 0;
	transform: translateX(-50%);
	border: 0;
	border-radius: 0;
	background: transparent !important;
	box-shadow: none;
	color: currentColor !important;
	font-size: 0.73rem;
	font-weight: 950;
	line-height: 1;
}

.jmw-sb-clip-maker__heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 7px;
}

.jmw-sb-clip-maker__heading > label {
	margin: 0;
}

.jmw-sb-clip-maker__heading > span {
	padding: 3px 7px;
	border: 1px solid rgba(138, 180, 255, 0.28);
	border-radius: 999px;
	color: var(--jmw-sb-accent-strong);
	font-size: 0.66rem;
	font-weight: 850;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.jmw-sb-panel-heading--board {
	align-items: flex-start;
}

.jmw-sb-board-controls {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 9px;
}

.jmw-sb-exclusive {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--jmw-sb-muted);
	font-size: 0.78rem;
	font-weight: 750;
	cursor: pointer;
}

.jmw-sb-exclusive input {
	accent-color: var(--jmw-sb-green);
}

.jmw-sb-legacy-migration {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 15px;
	padding: 14px;
	border: 1px solid rgba(138, 180, 255, 0.28);
	border-radius: 13px;
	background: rgba(138, 180, 255, 0.065);
}

.jmw-sb-legacy-migration[hidden] {
	display: none;
}

.jmw-sb-legacy-migration strong {
	color: #fff;
}

.jmw-sb-legacy-migration p {
	margin: 4px 0 0;
	color: var(--jmw-sb-dim);
	font-size: 0.75rem;
}

.jmw-sb-clip.is-editing {
	border-color: rgba(138, 180, 255, 0.72);
	box-shadow: 0 0 0 3px rgba(138, 180, 255, 0.1);
}

.jmw-sb-clip.is-dragging {
	opacity: 0.52;
}

.jmw-sb-clip.is-drop-before {
	box-shadow: -5px 0 0 var(--jmw-sb-accent);
}

.jmw-sb-clip.is-drop-after {
	box-shadow: 5px 0 0 var(--jmw-sb-accent);
}

.jmw-sb-clip__organizer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	margin-bottom: 8px;
}

.jmw-sb-clip__drag,
.jmw-sb-clip__edit,
.jmw-sb-clip__move-buttons button {
	min-height: 29px;
	padding: 4px 7px;
	border: 1px solid var(--jmw-sb-border);
	border-radius: 7px;
	background: rgba(255, 255, 255, 0.035);
	color: var(--jmw-sb-dim);
	font-size: 0.66rem;
	font-weight: 800;
	cursor: pointer;
}

.jmw-sb-clip__drag {
	cursor: grab;
	touch-action: none;
}

.jmw-sb-clip__drag:active {
	cursor: grabbing;
}

.jmw-sb-clip__edit {
	color: var(--jmw-sb-accent-strong);
}

.jmw-sb-clip__move-buttons {
	display: inline-flex;
	gap: 3px;
}

.jmw-sb-clip__move-buttons button {
	min-width: 29px;
	padding-inline: 5px;
	font-size: 0.82rem;
}

.jmw-sb-clip__organizer button:hover:not(:disabled),
.jmw-sb-clip__organizer button:focus-visible:not(:disabled) {
	border-color: rgba(138, 180, 255, 0.55);
	color: #fff;
}

.jmw-sb-clip__organizer button:disabled {
	opacity: 0.38;
	cursor: not-allowed;
}

.jmw-sb-clip__volume {
	display: grid;
	grid-template-columns: auto minmax(70px, 1fr) 38px;
	gap: 7px;
	align-items: center;
	margin-top: 10px;
	color: var(--jmw-sb-dim);
	font-size: 0.68rem;
	font-weight: 750;
}

.jmw-sb-clip__volume input {
	min-width: 0;
	accent-color: var(--jmw-sb-accent);
}

.jmw-sb-clip__volume output {
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.jmw-sb-clip__metadata {
	margin-top: 8px;
	padding-top: 7px;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	color: var(--jmw-sb-dim);
	font-size: 0.68rem;
}

.jmw-sb-clip__metadata summary {
	color: var(--jmw-sb-muted);
	font-weight: 800;
	cursor: pointer;
}

.jmw-sb-clip__metadata dl {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 4px 8px;
	margin: 8px 0 0;
}

.jmw-sb-clip__metadata dt {
	font-weight: 850;
}

.jmw-sb-clip__metadata dd {
	min-width: 0;
	margin: 0;
	font-variant-numeric: tabular-nums;
	word-break: break-word;
}

.jmw-sb-clip__metadata a {
	color: var(--jmw-sb-accent-strong);
}

.jmw-sb-toast--warning {
	border-color: rgba(244, 197, 106, 0.62);
}

@media (max-width: 880px) {
	.jmw-sb-marker-controls {
		grid-template-columns: 1fr;
	}

	.jmw-sb-board-controls {
		width: 100%;
		align-items: stretch;
		justify-content: flex-start;
		flex-direction: column;
	}

	.jmw-sb-exclusive {
		justify-content: flex-start;
	}

	.jmw-sb-legacy-migration {
		align-items: stretch;
		flex-direction: column;
	}
}

@media (max-width: 580px) {
	.jmw-sb-marker-control {
		padding: 10px 8px;
	}

	.jmw-sb-marker-control__time {
		grid-template-columns: 1fr;
	}

	.jmw-sb-nudge-row {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.jmw-sb-clip__organizer {
		flex-wrap: wrap;
	}

	.jmw-sb-clip__drag {
		flex: 1 1 auto;
	}

	.jmw-sb-clip__volume {
		grid-template-columns: 1fr 38px;
	}

	.jmw-sb-clip__volume > span {
		grid-column: 1 / -1;
	}
}

/* v1.3 linked-provider editor, T cue, sharing, and sticky player. */
.jmw-sb-capability-note,
.jmw-sb-storage-note,
.jmw-sb-legacy-notice {
	margin: 14px 0 0;
	padding: 13px 15px;
	border: 1px solid rgba(138, 180, 255, 0.22);
	border-radius: 12px;
	background: rgba(138, 180, 255, 0.055);
	color: var(--jmw-sb-muted);
	font-size: 0.82rem;
}

.jmw-sb-storage-note {
	margin-top: 16px;
	border-color: rgba(83, 213, 151, 0.25);
	background: rgba(83, 213, 151, 0.055);
}

.jmw-sb-legacy-notice {
	margin: 0 0 16px;
	border-color: rgba(244, 203, 98, 0.32);
	background: rgba(244, 203, 98, 0.065);
}

.jmw-sb-legacy-notice p {
	margin: 4px 0 0;
}

.jmw-sb-button--small {
	min-height: 32px;
	padding: 6px 9px;
	font-size: 0.72rem;
}

.jmw-sb-button--rescue {
	border-color: rgba(244, 203, 98, 0.42);
	background: rgba(244, 203, 98, 0.09);
	color: #fff1bc;
}

.jmw-sb-app.is-busy [data-busy-disabled] {
	opacity: 0.58;
	cursor: wait;
}

.jmw-sb-source-panel,
.jmw-sb-editor-panel {
	min-width: 0;
}

.jmw-sb-provider-add {
	padding: 15px;
	border: 1px solid var(--jmw-sb-border);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.025);
}

.jmw-sb-provider-add > label {
	display: block;
	margin-bottom: 8px;
	color: #fff;
	font-size: 0.8rem;
	font-weight: 800;
}

.jmw-sb-provider-add > p {
	margin: 10px 0 0;
	color: var(--jmw-sb-dim);
	font-size: 0.76rem;
}

.jmw-sb-source-list-wrap {
	margin-top: 18px;
}

.jmw-sb-source-list {
	display: grid;
	gap: 9px;
}

.jmw-sb-source-card {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	min-width: 0;
	padding: 9px;
	border: 1px solid var(--jmw-sb-border);
	border-radius: 13px;
	background: rgba(9, 11, 15, 0.66);
	transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.jmw-sb-source-card.is-current {
	border-color: rgba(138, 180, 255, 0.58);
	background: rgba(138, 180, 255, 0.075);
	box-shadow: inset 3px 0 0 var(--jmw-sb-accent);
}

.jmw-sb-source-card__thumb {
	display: grid;
	place-items: center;
	width: 92px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 9px;
	background: linear-gradient(135deg, #222a39, #0f131b);
	color: var(--jmw-sb-accent-strong);
	font-size: 0.8rem;
	font-weight: 900;
	letter-spacing: 0.08em;
}

.jmw-sb-source-card__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.jmw-sb-source-card__body {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.jmw-sb-source-card__body strong,
.jmw-sb-source-card__body span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.jmw-sb-source-card__body strong {
	color: #fff;
	font-size: 0.82rem;
}

.jmw-sb-source-card__body > span:not(.jmw-sb-provider-badge) {
	color: var(--jmw-sb-dim);
	font-size: 0.69rem;
}

.jmw-sb-source-card__actions {
	display: flex;
	align-items: center;
	gap: 5px;
}

.jmw-sb-provider-badge {
	justify-self: start;
	padding: 2px 6px;
	border: 1px solid var(--jmw-sb-border);
	border-radius: 999px;
	color: var(--jmw-sb-muted);
	font-size: 0.59rem;
	font-weight: 900;
	letter-spacing: 0.055em;
	line-height: 1.4;
	text-transform: uppercase;
}

.jmw-sb-provider-badge--youtube { border-color: rgba(255, 83, 83, 0.4); color: #ffaaaa; }
.jmw-sb-provider-badge--tiktok { border-color: rgba(65, 231, 223, 0.4); color: #8ff8f2; }
.jmw-sb-provider-badge--instagram { border-color: rgba(222, 102, 204, 0.4); color: #f1b0e7; }
.jmw-sb-provider-badge--upload { border-color: rgba(244, 203, 98, 0.4); color: #ffe6a0; }

.jmw-sb-player-shell {
	position: relative;
	width: 100%;
	margin: 0 0 18px;
	overflow: hidden;
	border: 1px solid var(--jmw-sb-border);
	border-radius: 15px;
	background: #080a0e;
	box-shadow: 0 16px 34px rgba(0, 0, 0, 0.22);
}

.jmw-sb-player-shell__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 39px;
	padding: 7px 9px 7px 12px;
	border-bottom: 1px solid var(--jmw-sb-border);
	background: #121722;
	color: var(--jmw-sb-muted);
	font-size: 0.72rem;
	font-weight: 850;
	letter-spacing: 0.03em;
	user-select: none;
}

.jmw-sb-player-shell__grip {
	margin-right: 6px;
	color: var(--jmw-sb-accent);
	font-size: 1rem;
}

.jmw-sb-player-stage {
	position: relative;
	min-height: 225px;
	background: #000;
}

.jmw-sb-provider-player {
	width: 100%;
	min-width: 0;
	background: #000;
}

.jmw-sb-provider-player iframe,
.jmw-sb-provider-player > div,
.jmw-sb-provider-player > div iframe {
	display: block;
	width: 100% !important;
	max-width: none !important;
	border: 0;
}

.jmw-sb-youtube-player-wrap,
.jmw-sb-youtube-player-wrap .jmw-sb-youtube-player,
.jmw-sb-youtube-player-wrap iframe {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	aspect-ratio: 16 / 9;
	min-height: 225px;
}

.jmw-sb-provider-player[data-role="tiktok-player-wrap"] iframe {
	height: min(690px, 72vh);
	min-height: 520px;
}

.jmw-sb-provider-player[data-role="instagram-player-wrap"] iframe {
	height: min(760px, 75vh);
	min-height: 560px;
	background: #fff;
}

.jmw-sb-legacy-player {
	display: grid;
	min-height: 225px;
	place-content: center;
	gap: 12px;
	padding: 25px;
	text-align: center;
}

.jmw-sb-legacy-player p {
	margin: 0;
	color: var(--jmw-sb-muted);
}

.jmw-sb-provider-policy {
	min-height: 0;
	margin: 0;
	padding: 9px 12px;
	border-top: 1px solid var(--jmw-sb-border);
	background: #0d1016;
	color: var(--jmw-sb-dim);
	font-size: 0.68rem;
}

.jmw-sb-player-shell.is-sticky {
	position: fixed;
	z-index: 2147483000;
	width: min(500px, calc(100vw - 16px));
	max-height: calc(100vh - 16px);
	margin: 0;
	overflow: auto;
	border-color: rgba(138, 180, 255, 0.55);
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.68), 0 0 0 3px rgba(138, 180, 255, 0.12);
}

.jmw-sb-player-shell.is-sticky .jmw-sb-player-shell__bar {
	position: sticky;
	top: 0;
	z-index: 4;
	cursor: grab;
	touch-action: none;
}

.jmw-sb-player-shell.is-sticky.is-dragging .jmw-sb-player-shell__bar {
	cursor: grabbing;
}

.jmw-sb-player-shell.is-sticky .jmw-sb-provider-player[data-role="tiktok-player-wrap"] iframe,
.jmw-sb-player-shell.is-sticky .jmw-sb-provider-player[data-role="instagram-player-wrap"] iframe {
	height: min(610px, calc(100vh - 110px));
	min-height: 420px;
}

.jmw-sb-time-readout {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.jmw-sb-marker-controls {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 4px;
}

.jmw-sb-marker-control.is-active {
	border-color: rgba(138, 180, 255, 0.62);
	background: rgba(138, 180, 255, 0.075);
	box-shadow: 0 0 0 2px rgba(138, 180, 255, 0.08);
}

.jmw-sb-keyboard-hint {
	margin: -18px 0 27px;
	color: var(--jmw-sb-dim);
	font-size: 0.72rem;
	text-align: center;
}

.jmw-sb-keyboard-hint kbd {
	padding: 1px 5px;
	border: 1px solid var(--jmw-sb-border);
	border-bottom-width: 2px;
	border-radius: 5px;
	background: #10141d;
	color: #fff;
	font-family: inherit;
	font-size: 0.69rem;
}

.jmw-sb-marker--t { color: var(--jmw-sb-yellow); }

.jmw-sb-marker.is-active::after {
	width: 3px;
	left: 8.5px;
	box-shadow: 0 0 12px currentColor;
}

.jmw-sb-marker.is-active span {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.jmw-sb-option {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 36px;
	padding: 7px 9px;
	border: 1px solid var(--jmw-sb-border);
	border-radius: 9px;
	background: rgba(255, 255, 255, 0.025);
	color: var(--jmw-sb-muted);
	font-size: 0.74rem;
	font-weight: 750;
	cursor: pointer;
}

.jmw-sb-option input {
	margin: 0;
	accent-color: var(--jmw-sb-green);
}

.jmw-sb-clips {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 14px;
}

.jmw-sb-clip-card {
	position: relative;
	display: flex;
	min-width: 0;
	flex-direction: column;
	padding: 10px;
	border: 1px solid var(--jmw-sb-border);
	border-radius: 14px;
	background: linear-gradient(180deg, rgba(30, 35, 47, 0.96), rgba(16, 19, 26, 0.96));
	box-shadow: 0 12px 25px rgba(0, 0, 0, 0.18);
	transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
}

.jmw-sb-clip-card:hover {
	transform: translateY(-2px);
	border-color: rgba(138, 180, 255, 0.32);
}

.jmw-sb-clip-card.is-playing {
	border-color: rgba(83, 213, 151, 0.75);
	box-shadow: 0 0 0 3px rgba(83, 213, 151, 0.11), 0 16px 32px rgba(0, 0, 0, 0.28);
}

.jmw-sb-clip-card.is-selected {
	border-color: var(--jmw-sb-red);
	box-shadow: 0 0 0 3px rgba(255, 114, 124, 0.12);
}

.jmw-sb-clip-card.is-dragging {
	opacity: 0.5;
}

.jmw-sb-clip-card.is-drop-before {
	box-shadow: -5px 0 0 var(--jmw-sb-accent);
}

.jmw-sb-clip-card.is-drop-after {
	box-shadow: 5px 0 0 var(--jmw-sb-accent);
}

.jmw-sb-drag-handle {
	align-self: flex-end;
	width: 36px;
	height: 29px;
	margin: 0 0 6px;
	padding: 0;
	border: 1px solid var(--jmw-sb-border);
	border-radius: 7px;
	background: rgba(255, 255, 255, 0.04);
	color: var(--jmw-sb-dim);
	cursor: grab;
	touch-action: none;
}

.jmw-sb-drag-handle:active {
	cursor: grabbing;
}

.jmw-sb-clip-play {
	display: block;
	width: 100%;
	min-width: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 11px;
	background: #0a0d12;
	color: #fff;
	cursor: pointer;
	text-align: left;
}

.jmw-sb-clip-play:hover,
.jmw-sb-clip-play:focus-visible {
	border-color: rgba(138, 180, 255, 0.6);
}

.jmw-sb-clip-play__visual {
	position: relative;
	display: grid;
	width: 100%;
	aspect-ratio: 16 / 9;
	place-items: center;
	overflow: hidden;
	background: #111722;
}

.jmw-sb-clip-play__visual img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.jmw-sb-thumbnail-placeholder {
	display: grid;
	width: 100%;
	height: 100%;
	place-items: center;
	background: radial-gradient(circle at 50% 25%, rgba(138, 180, 255, 0.22), transparent 55%), #111722;
	color: var(--jmw-sb-muted);
	font-size: 0.83rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.jmw-sb-thumbnail-time {
	position: absolute;
	right: 7px;
	bottom: 7px;
	padding: 3px 6px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.78);
	color: #fff;
	font-size: 0.62rem;
	font-weight: 850;
	font-variant-numeric: tabular-nums;
}

.jmw-sb-clip-play__title,
.jmw-sb-clip-play__time {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.jmw-sb-clip-play__title {
	padding: 9px 10px 1px;
	font-size: 0.88rem;
	font-weight: 850;
}

.jmw-sb-clip-play__time {
	padding: 0 10px 9px;
	color: var(--jmw-sb-dim);
	font-size: 0.67rem;
	font-variant-numeric: tabular-nums;
}

.jmw-sb-clip-title-label {
	display: grid;
	gap: 5px;
	margin: 10px 0 0;
	color: var(--jmw-sb-dim);
	font-size: 0.67rem;
	font-weight: 800;
}

.jmw-sb-clip-title-label input {
	min-width: 0;
	min-height: 36px;
	padding: 6px 8px;
}

.jmw-sb-clip-options {
	display: grid;
	gap: 8px;
	margin-top: 9px;
	color: var(--jmw-sb-muted);
	font-size: 0.7rem;
	font-weight: 750;
}

.jmw-sb-clip-options > label:first-child {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.jmw-sb-clip-options input[type="checkbox"] {
	accent-color: var(--jmw-sb-green);
}

.jmw-sb-clip-volume {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) 40px;
	gap: 7px;
	align-items: center;
}

.jmw-sb-clip-volume input {
	min-width: 0;
	accent-color: var(--jmw-sb-accent);
}

.jmw-sb-clip-volume output {
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.jmw-sb-clip-capability {
	margin: 8px 0 0;
	padding: 7px 8px;
	border-radius: 7px;
	background: rgba(244, 203, 98, 0.065);
	color: #c8b988;
	font-size: 0.64rem;
}

.jmw-sb-clip-actions {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 5px;
	margin-top: auto;
	padding-top: 9px;
}

.jmw-sb-clip-info {
	margin-top: 8px;
	padding-top: 7px;
	border-top: 1px solid rgba(255, 255, 255, 0.07);
	color: var(--jmw-sb-dim);
	font-size: 0.67rem;
}

.jmw-sb-clip-info summary {
	color: var(--jmw-sb-muted);
	font-weight: 800;
	cursor: pointer;
}

.jmw-sb-clip-info dl {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 4px 8px;
	margin: 8px 0 0;
}

.jmw-sb-clip-info dt {
	font-weight: 850;
}

.jmw-sb-clip-info dd {
	min-width: 0;
	margin: 0;
	word-break: break-word;
}

.jmw-sb-share-grid {
	display: grid;
	grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
	gap: 18px;
	align-items: center;
}

.jmw-sb-qr {
	display: grid;
	min-height: 180px;
	place-items: center;
	padding: 10px;
	border-radius: 12px;
	background: #fff;
	color: #111;
}

.jmw-sb-qr svg {
	display: block;
	width: 100%;
	height: auto;
	max-height: 220px;
}

.jmw-sb-share-count {
	margin: 8px 0 0;
	color: var(--jmw-sb-dim);
	font-size: 0.75rem;
}

@media (max-width: 1080px) {
	.jmw-sb-marker-controls {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 780px) {
	.jmw-sb-time-readout {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.jmw-sb-time-readout span:last-child {
		grid-column: 1 / -1;
	}

	.jmw-sb-source-card {
		grid-template-columns: 78px minmax(0, 1fr);
	}

	.jmw-sb-source-card__thumb {
		width: 78px;
	}

	.jmw-sb-source-card__actions {
		grid-column: 1 / -1;
		justify-content: flex-end;
	}

	.jmw-sb-share-grid {
		grid-template-columns: 1fr;
	}

	.jmw-sb-qr {
		width: min(230px, 100%);
		justify-self: center;
	}
}

@media (max-width: 580px) {
	.jmw-sb-player-shell.is-sticky {
		width: calc(100vw - 12px);
		max-height: calc(100vh - 12px);
	}

	.jmw-sb-player-stage,
	.jmw-sb-youtube-player-wrap,
	.jmw-sb-youtube-player-wrap .jmw-sb-youtube-player,
	.jmw-sb-youtube-player-wrap iframe {
		min-height: 180px;
	}

	.jmw-sb-provider-player[data-role="tiktok-player-wrap"] iframe,
	.jmw-sb-provider-player[data-role="instagram-player-wrap"] iframe {
		min-height: 480px;
	}

	.jmw-sb-clips {
		grid-template-columns: 1fr;
	}

	.jmw-sb-clip-actions {
		grid-template-columns: 1fr;
	}

	.jmw-sb-clip-volume {
		grid-template-columns: 1fr 40px;
	}

	.jmw-sb-clip-volume {
		font-size: 0;
	}

	.jmw-sb-clip-volume input {
		font-size: initial;
	}

	.jmw-sb-option,
	.jmw-sb-volume {
		width: 100%;
	}
}