/* SyntVision Video Studio workspace */
html, body.svvs-body { margin: 0; height: 100%; background: #14171d; }
body.svvs-body {
	color-scheme: dark;
	--sv-bg: #14171d;
	--sv-panel: #20242c;
	--sv-surface: #20242c;
	--sv-surface-soft: #1b2028;
	--sv-elevated: #272c35;
	--sv-input: #171c23;
	--sv-border: #363d49;
	--sv-text: #e8edf4;
	--sv-text-muted: #9aa7b8;
	--sv-accent: #20a8d6;
	--sv-accent-soft: #123e52;
	--sv-preview: #10141a;
	--sv-hover: #2c3340;
	--sv-radius-sm: 6px;
	--sv-radius-md: 8px;
	--sv-radius-lg: 10px;
	--sv-lib: 560px;
	--sv-cat: 116px;
	--sv-insp: 310px;
	--sv-tl: 36vh;
	--blue: var(--sv-accent);
	--blue-soft: var(--sv-accent-soft);
	--ink: var(--sv-text);
	--muted: var(--sv-text-muted);
	--line: var(--sv-border);
	--red: #e23b3b;
	--lane: 58px;
	color: var(--ink);
	font-family: Rubik, "Segoe UI", sans-serif;
}
@property --sv-rail {
	syntax: "<length>";
	inherits: true;
	initial-value: 76px;
}
.svvs {
	--sv-rail: 76px;
	height: 100vh;
	height: 100dvh;
	display: grid;
	grid-template-columns: var(--sv-rail) minmax(0, 1fr);
	transition: --sv-rail 0.36s cubic-bezier(0.22, 1, 0.36, 1);
	grid-template-rows: 52px minmax(0, 1fr) 6px var(--sv-tl);
	overflow: hidden;
	background: var(--sv-bg);
}
button, input, select, textarea { font-family: inherit; }
.svvs button:focus-visible,
.svvs a:focus-visible,
.svvs input:focus-visible,
.svvs select:focus-visible,
.svvs textarea:focus-visible {
	outline: 2px solid var(--sv-accent);
	outline-offset: 2px;
}
.svvs-btn:disabled, .svvs-icon:disabled, .svvs-tlbtn:disabled { opacity: 0.4; cursor: default; }
@supports not selector(::-webkit-scrollbar) {
	.svvs-tools,
	.svvs-catside,
	.svvs-libbody,
	.svvs-panel,
	.svvs-inspector,
	.svvs-tl__scroll,
	.svvs-layoutbar,
	.svvs textarea {
		scrollbar-width: thin;
		scrollbar-color: #5c6778 transparent;
	}
}
.svvs-tools::-webkit-scrollbar,
.svvs-catside::-webkit-scrollbar,
.svvs-libbody::-webkit-scrollbar,
.svvs-panel::-webkit-scrollbar,
.svvs-inspector::-webkit-scrollbar,
.svvs-tl__scroll::-webkit-scrollbar,
.svvs-layoutbar::-webkit-scrollbar,
.svvs textarea::-webkit-scrollbar { width: 6px; height: 6px; }
.svvs-tools::-webkit-scrollbar-thumb,
.svvs-catside::-webkit-scrollbar-thumb,
.svvs-libbody::-webkit-scrollbar-thumb,
.svvs-panel::-webkit-scrollbar-thumb,
.svvs-inspector::-webkit-scrollbar-thumb,
.svvs-tl__scroll::-webkit-scrollbar-thumb,
.svvs-layoutbar::-webkit-scrollbar-thumb,
.svvs textarea::-webkit-scrollbar-thumb { background: #5c6778; border-radius: 6px; }
.svvs-tools::-webkit-scrollbar-thumb:hover,
.svvs-catside::-webkit-scrollbar-thumb:hover,
.svvs-libbody::-webkit-scrollbar-thumb:hover,
.svvs-panel::-webkit-scrollbar-thumb:hover,
.svvs-inspector::-webkit-scrollbar-thumb:hover,
.svvs-tl__scroll::-webkit-scrollbar-thumb:hover,
.svvs-layoutbar::-webkit-scrollbar-thumb:hover,
.svvs textarea::-webkit-scrollbar-thumb:hover { background: #7d8b9e; }
.svvs-tools::-webkit-scrollbar-track,
.svvs-catside::-webkit-scrollbar-track,
.svvs-libbody::-webkit-scrollbar-track,
.svvs-panel::-webkit-scrollbar-track,
.svvs-inspector::-webkit-scrollbar-track,
.svvs-tl__scroll::-webkit-scrollbar-track,
.svvs-layoutbar::-webkit-scrollbar-track,
.svvs textarea::-webkit-scrollbar-track,
.svvs-tools::-webkit-scrollbar-corner,
.svvs-catside::-webkit-scrollbar-corner,
.svvs-libbody::-webkit-scrollbar-corner,
.svvs-panel::-webkit-scrollbar-corner,
.svvs-inspector::-webkit-scrollbar-corner,
.svvs-tl__scroll::-webkit-scrollbar-corner,
.svvs-layoutbar::-webkit-scrollbar-corner,
.svvs textarea::-webkit-scrollbar-corner { background: transparent; }
.svvs svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
.svvs-top, .svvs-tl { box-sizing: border-box; }
.svvs-top {
	grid-column: 1 / -1;
	grid-row: 1;
	height: 52px;
	min-width: 0;
	flex: none;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 0 16px;
	background: var(--sv-surface);
	border-bottom: 1px solid var(--line);
	white-space: nowrap;
}
.svvs-top__left, .svvs-top__right { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: nowrap; }
.svvs-top__right { justify-content: flex-end; }
.svvs-top__center { display: flex; align-items: center; gap: 8px; }
.svvs-back { display: flex; align-items: center; text-decoration: none; flex: none; }
.svvs-mainmenu { position: relative; flex: none; }
.svvs-mainmenu__btn {
	height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px;
	background: var(--sv-elevated); color: var(--ink); font-weight: 600; font-size: 13px; cursor: pointer;
}
#svvs-mainmenu-list { z-index: 80; }
.svvs-menu button:disabled { opacity: 0.4; cursor: default; }
.svvs-menu button:disabled:hover { background: transparent; color: var(--ink); }
.svvs-wordmark { font-size: 15px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.svvs-wordmark b { color: var(--blue); font-weight: 700; }
.svvs-wordmark span { color: #d61f2b; font-weight: 700; }
.svvs-titlewrap { display: flex; align-items: center; gap: 2px; min-width: 0; }
.svvs-title {
	min-width: 0;
	width: min(220px, 22vw);
	border: 0;
	background: transparent;
	color: var(--ink);
	font-size: 14px;
	font-weight: 600;
	padding: 6px 4px;
	border-radius: var(--sv-radius-sm);
}
.svvs-title:hover, .svvs-title:focus { background: var(--sv-hover); }
.svvs-pencil {
	width: 28px; height: 28px; border: 0; background: transparent; color: var(--muted);
	border-radius: var(--sv-radius-sm); cursor: pointer; display: grid; place-items: center;
	opacity: 0;
}
.svvs-titlewrap:hover .svvs-pencil,
.svvs-titlewrap:focus-within .svvs-pencil { opacity: 1; }
.svvs-pencil:hover { background: var(--sv-hover); color: var(--ink); }
.svvs-save {
	display: inline-flex; align-items: center; gap: 6px; width: 148px; flex: none;
	font-size: 12px; color: var(--muted); white-space: nowrap;
}
.svvs-save em { overflow: hidden; text-overflow: ellipsis; font-style: normal; }
.svvs-save i { width: 8px; height: 8px; border-radius: 50%; background: #22a35a; display: block; }
.svvs-save.is-error { color: var(--red); font-weight: 600; }
.svvs-save.is-error i { background: var(--red); }
.svvs-save.is-saving { color: var(--blue); }
.svvs-save.is-saving i { background: var(--blue); }
.svvs-save.is-unsaved i { background: #e0a100; }
.svvs-aspect { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--muted); }
.svvs-aspect select, .svvs-monitor select, .svvs-modal select, .svvs-field input, .svvs-field select, .svvs-field textarea, .svvs-panel__tools input, .svvs-panel__tools select {
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--sv-input);
	color: var(--ink);
	padding: 7px 10px;
}
.svvs-btn, .svvs-icon {
	border: 1px solid transparent;
	border-radius: 9px;
	cursor: pointer;
	background: var(--sv-elevated);
	color: var(--ink);
}
.svvs-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; font-weight: 600; font-size: 13px; }
.svvs-btn--primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.svvs-btn--primary:hover { background: #178fb8; }
.svvs-btn--primary svg { stroke: #fff; }
.svvs-btn--ghost { border-color: var(--line); background: transparent; }
.svvs-btn--ghost:hover { background: var(--sv-hover); }
#svvs-export { flex: none; }
.svvs-btn--danger { color: var(--red); border-color: #f0c9cc; background: var(--sv-surface); }
.svvs-btn--tiny { padding: 5px 8px; font-size: 0.75rem; }
.svvs-icon {
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-color: var(--line);
	color: var(--muted);
}
.svvs-top .svvs-icon:hover:not(:disabled) { background: var(--sv-hover); }
.svvs-monitor__tools .svvs-icon:hover:not(:disabled),
.svvs-transport .svvs-icon:hover:not(:disabled) { background: rgba(255,255,255,0.08); }
.svvs-icon--play { width: 36px; height: 36px; border-radius: 50%; background: var(--sv-surface); color: #1a2332; border-color: transparent; }
.svvs-icon--play svg { width: 14px; height: 14px; }

.svvs-work {
	grid-column: 2;
	grid-row: 2;
	position: relative;
	min-height: 0;
	min-width: 0;
	display: grid;
	grid-template-columns: var(--sv-lib) minmax(320px, 1fr) var(--sv-insp);
	background: var(--sv-bg);
	overflow: hidden;
}
.svvs-split {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 10px;
	margin-left: -5px;
	z-index: 6;
	cursor: col-resize;
	background: transparent;
}
.svvs-split::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 4px;
	width: 1px;
	background: transparent;
}
.svvs-split:hover::after, .svvs-split.is-on::after { background: var(--sv-accent); }
#svvs-split-lib { left: var(--sv-lib); }
#svvs-split-insp { left: auto; right: calc(var(--sv-insp) - 5px); margin-left: 0; }
.svvs-split--y {
	grid-column: 2;
	grid-row: 3;
	position: relative;
	top: auto;
	bottom: auto;
	z-index: 4;
	width: auto;
	height: 6px;
	margin: 0;
	flex: none;
	cursor: row-resize;
}
.svvs-split--y::after { left: 0; right: 0; top: 3px; bottom: auto; width: auto; height: 1px; }
.svvs-library {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	background: var(--sv-panel);
	border-right: 1px solid var(--line);
}
.svvs-tools {
	grid-column: 1;
	grid-row: 2 / -1;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	align-self: stretch;
	gap: 4px;
	width: var(--sv-rail);
	transition: width 0.36s cubic-bezier(0.22, 1, 0.36, 1), padding 0.36s cubic-bezier(0.22, 1, 0.36, 1);
	min-height: 0;
	height: auto;
	padding: 8px 6px;
	background: #10151e;
	border-right: 1px solid #0a0d12;
	box-shadow: 1px 0 0 #3d485c;
	border-bottom: 0;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 3;
}
.svvs-tool {
	position: relative;
	flex: none;
	border: 0;
	background: transparent;
	color: var(--muted);
	border-radius: 9px;
	width: 100%;
	min-width: 0;
	height: 52px;
	min-height: 52px;
	max-height: 52px;
	overflow: hidden;
	padding: 6px 2px;
	font-size: 9px;
	font-weight: 600;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	line-height: 1.15;
	text-align: center;
}
.svvs-tool svg { width: 18px; height: 18px; }
.svvs-tool span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; letter-spacing: 0; }
.svvs-tool:hover { background: var(--sv-hover); color: var(--ink); }
.svvs-tool.is-on { background: var(--sv-accent-soft); color: var(--sv-accent); }
.svvs-tool.is-on::before {
	content: "";
	position: absolute;
	left: 0;
	right: auto;
	top: 8px;
	bottom: 8px;
	width: 2px;
	height: auto;
	border-radius: 2px;
	background: var(--sv-accent);
}
.svvs-panel, .svvs-inspector {
	background: var(--sv-panel);
	border-right: 1px solid var(--line);
	min-height: 0;
	overflow: auto;
	padding: 12px 14px 16px;
}
.svvs-inspector {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0;
}
.svvs-panel { flex: 1; min-width: 0; border-right: 0; background: transparent; }
@property --sv-cat-panel {
	syntax: "<length>";
	inherits: true;
	initial-value: 116px;
}
.svvs-librow {
	--sv-cat-panel: var(--sv-cat);
	position: relative;
	display: flex;
	flex: 1;
	min-height: 0;
	min-width: 0;
	transition: --sv-cat-panel 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.svvs-librow.is-ai-icons { --sv-cat-panel: 52px; }
.svvs-split--cat {
	left: var(--sv-cat-panel);
	width: 8px;
	margin-left: 0;
	z-index: 5;
	transition: left 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease 0.2s;
}
.svvs-split--cat::after { left: 0; }
.svvs-catside {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: var(--sv-cat-panel);
	min-width: var(--sv-cat-panel);
	max-width: var(--sv-cat-panel);
	flex: 0 0 var(--sv-cat-panel);
	overflow-x: hidden;
	overflow-y: auto;
	border-right: 1px solid var(--line);
	padding: 8px 6px;
	background: var(--sv-panel);
}
.svvs-catside > * { flex: 0 0 auto; }
.svvs-catside button,
.svvs-catside .svvs-cat {
	display: flex;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
	height: auto;
	margin: 0 0 2px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--muted);
	padding: 7px 8px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.25;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
	gap: 8px;
	transition: padding 0.5s cubic-bezier(0.22, 1, 0.36, 1), gap 0.5s cubic-bezier(0.22, 1, 0.36, 1), color 0.22s ease, background 0.2s ease, height 0.5s cubic-bezier(0.22, 1, 0.36, 1), min-height 0.5s cubic-bezier(0.22, 1, 0.36, 1), width 0.5s cubic-bezier(0.22, 1, 0.36, 1), justify-content 0s linear 0.2s;
}
.svvs-catside .svvs-catlabel {
	display: block;
	min-width: 0;
	max-width: 180px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	opacity: 1;
	transition: opacity 0.28s ease 0.08s, max-width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.svvs-catside button:hover,
.svvs-catside .svvs-cat:hover { background: var(--sv-hover); color: var(--ink); }
.svvs-catside button.is-on,
.svvs-catside .svvs-cat.is-on { background: var(--sv-accent-soft); color: var(--sv-accent); }
.svvs-catside button[data-ttab] { justify-content: space-between; gap: 6px; }
.svvs-catside .svvs-chev {
	flex: none;
	width: 0;
	height: 0;
	border-left: 3.5px solid transparent;
	border-right: 3.5px solid transparent;
	border-top: 4px solid currentColor;
	opacity: 0.75;
}
.svvs-catside button[aria-expanded="false"] .svvs-chev { transform: rotate(-90deg); }
.svvs-catgroup__subs {
	display: flex;
	flex-direction: column;
	margin: 2px 0 6px 10px;
	padding-left: 6px;
	border-left: 1px solid var(--line);
}
.svvs-catgroup__subs.is-closed { display: none; }
.svvs-catside .svvs-subcat {
	font-size: 11px;
	font-weight: 500;
	padding: 5px 6px;
	color: var(--sv-text-muted);
}
.svvs-catside .svvs-subcat.is-on {
	background: transparent;
	color: var(--sv-accent);
	box-shadow: inset 2px 0 0 var(--sv-accent);
}
.svvs-catside__rule { border: 0; border-top: 1px solid var(--line); margin: 8px 4px; }
.svvs-catside .svvs-filter { min-width: 0; width: 100%; margin-top: 4px; }
.svvs-catside .svvs-filter select { background: var(--sv-input); color: var(--ink); }
.svvs-libmain { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.svvs-panel:has(.svvs-librow) { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.svvs-inspector { border-right: 0; border-left: 1px solid var(--line); }
.svvs-panel__head h2, .svvs-inspector h2 { margin: 0 0 4px; font-size: 13px; font-weight: 600; }
.svvs-panel__head p, .svvs-muted { color: var(--muted); font-size: 12px; line-height: 1.4; margin: 0; }
.svvs-warn { color: var(--red); font-size: 0.82rem; }
.svvs-seg { display: flex; gap: 2px; margin: 0 0 10px; padding: 3px; background: var(--sv-elevated); border-radius: 10px; }
.svvs-seg button {
	flex: 1;
	border: 0;
	background: transparent;
	border-radius: 8px;
	padding: 7px 4px;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--muted);
	cursor: pointer;
}
.svvs-seg button.is-on { background: var(--blue-soft); color: var(--blue); }
.svvs-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.svvs-chips button {
	border: 0; background: var(--sv-elevated); color: var(--ink); border-radius: 999px;
	padding: 5px 10px; font-size: 0.75rem; font-weight: 600; cursor: pointer;
}
.svvs-chips button.is-on { background: var(--blue); color: #fff; }
.svvs-panel__tools { display: flex; gap: 8px; margin: 8px 0; align-items: center; }
.svvs-panel__tools input, .svvs-panel__tools select { flex: 1; min-width: 0; height: 36px; background: var(--sv-surface-soft); }
.svvs-upload { flex: none; white-space: nowrap; }
.svvs-assets { display: grid; grid-template-columns: repeat(auto-fill, minmax(105px, 126px)); justify-content: start; gap: 10px; }
.svvs-assets--list { display: flex; flex-direction: column; }
.svvs-asset, .svvs-choice, .svvs-arow {
	border: 1px solid var(--line);
	background: var(--sv-surface);
	border-radius: 10px;
	text-align: left;
	cursor: pointer;
	color: var(--ink);
}
.svvs-asset { position: relative; padding: 0; overflow: hidden; border: 0; aspect-ratio: 16 / 10; }
.svvs-asset img, .svvs-asset__ph {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: var(--sv-elevated);
}
.svvs-asset__ph { display: grid; place-items: center; color: var(--blue); font-weight: 700; }
.svvs-asset__dur, .svvs-asset__play, .svvs-asset__check, .svvs-asset__remove { position: absolute; z-index: 3; }
.svvs-asset__still, .svvs-asset__preview {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #111; pointer-events: none;
}
.svvs-asset__preview { display: none; z-index: 2; }
.svvs-asset.is-preview .svvs-asset__preview { display: block; }
.svvs-asset__dur {
	right: 6px; bottom: 6px; background: rgba(15, 18, 28, 0.72); color: #fff;
	border-radius: 4px; font-size: 11px; font-weight: 600; padding: 1px 5px;
}
.svvs-asset__play {
	left: 6px; bottom: 6px; width: 22px; height: 22px; border-radius: 6px; background: rgba(15, 18, 28, 0.72); cursor: pointer;
}
.svvs-asset__play::after {
	content: ""; position: absolute; left: 8px; top: 5px;
	border-style: solid; border-width: 6px 0 6px 8px; border-color: transparent transparent transparent #fff;
}
.svvs-asset.is-preview:not(.is-paused) .svvs-asset__play::after {
	left: 6px; top: 6px; width: 10px; height: 10px; border: 0;
	background: linear-gradient(#fff, #fff) left / 3px 100% no-repeat, linear-gradient(#fff, #fff) right / 3px 100% no-repeat;
}
.svvs-asset__check {
	left: 6px; top: 6px; width: 18px; height: 18px; border-radius: 5px;
	background: var(--blue); color: #fff; display: none; place-items: center; font-size: 12px; font-weight: 700;
}
.svvs-asset__remove {
	right: 6px; top: 6px; width: 22px; height: 22px; border-radius: 6px;
	display: grid; place-items: center; cursor: pointer;
	background: rgba(15, 18, 28, 0.78); color: #fff; opacity: 0; pointer-events: none;
	transition: opacity 0.12s ease, background 0.12s ease;
}
.svvs-asset__remove svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.svvs-asset:hover .svvs-asset__remove,
.svvs-asset:focus-within .svvs-asset__remove,
.svvs-asset__remove:focus { opacity: 1; pointer-events: auto; }
.svvs-asset__remove:hover,
.svvs-asset__remove:focus { background: rgba(180, 40, 48, 0.92); }
.svvs-asset.is-removing { opacity: 0.45; pointer-events: none; }
.svvs-asset--row .svvs-asset__remove { opacity: 1; pointer-events: auto; top: 8px; right: 8px; }
.svvs-asset.is-used { box-shadow: inset 0 0 0 2px var(--blue); }
.svvs-asset.is-used .svvs-asset__check { display: grid; }
.svvs-asset--row { display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto auto; aspect-ratio: auto; border: 0; padding: 0; }
.svvs-asset--row img, .svvs-asset--row .svvs-asset__ph { width: 42px; height: 42px; grid-row: 1 / span 2; border-radius: 8px; }
.svvs-asset--row strong, .svvs-asset--row small { display: block; padding: 2px 8px 0; font-size: 0.75rem; }
.svvs-asset--row small { color: var(--muted); font-weight: 500; }
.svvs-arow { display: grid; grid-template-columns: 1fr auto auto; gap: 6px; align-items: center; padding: 6px; }
.svvs-choices { display: flex; flex-direction: column; gap: 8px; }
.svvs-choice { padding: 10px 12px; font-weight: 600; cursor: grab; }
.svvs-choice.is-on { border-color: var(--blue); color: var(--blue); background: var(--blue-soft); }
.svvs-fxrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0; padding: 6px 8px; border-radius: 8px; background: var(--sv-hover); }
.svvs [hidden] { display: none !important; }

.svvs-props {
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
	background: var(--sv-panel);
	margin: 0;
	padding: 12px 14px 10px;
	border-bottom: 1px solid var(--sv-border);
}
.svvs-insp-scroll {
	flex: 1;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 12px 14px 16px;
	background: var(--sv-panel);
}
.svvs-props__kicker {
	margin: 0 0 8px;
	color: var(--sv-accent);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.svvs-props__nav { display: flex; flex-wrap: wrap; gap: 4px; }
.svvs-props__nav button {
	flex: none;
	border: 1px solid transparent;
	background: transparent;
	color: var(--sv-text-muted);
	border-radius: 8px;
	padding: 6px 10px;
	font-size: 12px;
	font-weight: 650;
	cursor: pointer;
	white-space: nowrap;
}
.svvs-props__nav button:hover { background: var(--sv-hover); color: var(--sv-text); }
.svvs-props__nav button.is-on {
	background: var(--sv-accent-soft);
	color: var(--sv-text);
	border-color: var(--sv-accent);
	box-shadow: inset 0 0 0 1px transparent;
}
.svvs-isect {
	position: sticky; top: 0; z-index: 1; background: var(--sv-panel);
	margin: 0 -2px 10px; padding: 2px 2px 8px; border-bottom: 1px solid var(--sv-border);
	box-shadow: 0 -8px 0 0 var(--sv-panel);
}
.svvs-itabs, .svvs-isubs { display: flex; flex-wrap: wrap; gap: 4px; }
.svvs-itabs { margin-bottom: 6px; }
.svvs-itabs button, .svvs-isubs button {
	border: 0; background: var(--sv-hover); color: var(--muted); border-radius: 8px;
	padding: 5px 8px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.svvs-itabs button:hover, .svvs-isubs button:hover { color: var(--ink); }
.svvs-itabs button.is-on { background: var(--sv-accent-soft); color: var(--sv-accent); }
.svvs-isubs button { background: transparent; border-radius: 0; border-bottom: 2px solid transparent; padding: 4px 6px; }
.svvs-isubs button.is-on { color: var(--sv-accent); border-bottom-color: var(--sv-accent); }
.svvs-ipane { min-width: 0; }
.svvs-inspector { overflow-x: hidden; }
.svvs-isearch { margin-top: 8px; }
.svvs-isearch input {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	height: 36px;
	margin: 0;
	padding: 0 10px;
	border: 1px solid var(--sv-border);
	border-radius: 8px;
	background: var(--sv-input);
	color: var(--sv-text);
	font-family: Rubik, "Segoe UI", sans-serif;
	font-size: 13px;
	font-weight: 500;
}
.svvs-acc { display: flex; flex-direction: column; gap: 8px; }
.svvs-acc__sec {
	margin: 0;
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-lg);
	background: var(--sv-surface-soft);
	overflow: hidden;
}
.svvs-acc__sec.is-open {
	border-color: #3a4a5c;
	background: var(--sv-elevated);
	box-shadow: inset 0 0 0 1px rgba(32, 168, 214, 0.12);
}
.svvs-acc__h {
	width: 100%;
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr) 14px;
	grid-template-rows: auto auto;
	column-gap: 10px;
	row-gap: 2px;
	align-items: center;
	min-width: 0;
	background: transparent;
	border: 0;
	color: var(--sv-text);
	text-align: left;
	padding: 11px 12px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.25;
	cursor: pointer;
}
.svvs-acc__h:hover, .svvs-acc__h:focus-visible { color: var(--sv-accent); }
.svvs-acc__sec.is-open > .svvs-acc__h {
	border-bottom: 1px solid var(--sv-border);
	background: rgba(18, 62, 82, 0.28);
}
.svvs-acc__h::after {
	content: '';
	grid-column: 3;
	grid-row: 1 / -1;
	justify-self: end;
	align-self: center;
	width: 6px;
	height: 6px;
	border-right: 1.5px solid var(--sv-text-muted);
	border-bottom: 1.5px solid var(--sv-text-muted);
	transform: rotate(45deg);
	transition: transform 160ms ease;
}
.svvs-acc__sec.is-open > .svvs-acc__h::after { transform: rotate(-135deg); margin-top: 2px; }
.svvs-acc__h--sub {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--sv-text-muted);
	font-size: 12px;
	font-weight: 650;
	padding: 8px 2px;
	border: 0;
	border-radius: 0;
	background: transparent;
}
.svvs-acc__h--sub::after { margin-left: auto; grid-column: auto; grid-row: auto; }
.svvs-acc__h--sub.is-open::after { transform: rotate(-135deg); margin-top: 4px; }
.svvs-acc__mark {
	grid-column: 1;
	grid-row: 1 / -1;
	align-self: center;
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--sv-accent-soft);
	color: var(--sv-accent);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.02em;
}
.svvs-acc__name {
	grid-column: 2;
	grid-row: 1;
	min-width: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.01em;
}
.svvs-acc__hint {
	grid-column: 2;
	grid-row: 2;
	min-width: 0;
	color: var(--sv-text-muted);
	font-weight: 500;
	font-size: 11px;
	line-height: 1.35;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.svvs-acc__body {
	padding: 10px 12px 12px;
	animation: svvs-acc-in 160ms ease;
}
.svvs-acc__sub {
	margin: 8px 0 6px;
	font-size: 11px;
	font-weight: 700;
	color: var(--sv-accent);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
/* Reactive accordion is mounted as a sibling of .svvs-acc; keep the same card title look. */
.svvs-insp-scroll > .svvs-acc__sec {
	margin-top: 8px;
}
.svvs-acc .svvs-field input[type="number"] { max-width: 9rem; }
.svvs-field.is-hit, .svvs-acc__sec.is-hit > .svvs-acc__h, button.is-hit, h4.is-hit {
	background: var(--sv-accent-soft); border-radius: 8px;
}
.svvs-ipane.is-jump { box-shadow: inset 2px 0 0 var(--sv-accent); }
.svvs-react-bind { display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--sv-border); }
.svvs-react-bind b, .svvs-react-bind span, .svvs-react-bind em { display: block; font-style: normal; }
.svvs-react-bind em { color: var(--sv-text-muted); font-size: 11px; }
.svvs-react-adv[hidden], .svvs-acc__body[hidden] { display: none; }
@keyframes svvs-acc-in { from { opacity: 0; } to { opacity: 1; } }
.svvs-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 12px; }
.svvs-tabs button {
	border: 0; background: var(--sv-hover); border-radius: 8px;
	padding: 4px 8px; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer;
}
.svvs-tabs button.is-on { background: var(--sv-accent-soft); color: var(--sv-accent); }
.svvs-color { display: flex; align-items: center; gap: 8px; }
.svvs-color input[type="color"] { width: 36px; height: 32px; padding: 2px; border-radius: 8px; border: 1px solid var(--sv-border); background: var(--sv-input); }
.svvs-inspector .svvs-field--color,
.svvs-inspector .svvs-field:has(> .svvs-colorctl) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 8px;
	row-gap: 4px;
}
.svvs-inspector .svvs-field--color > span:first-child,
.svvs-inspector .svvs-field:has(> .svvs-colorctl) > span:first-child {
	grid-column: 1 / -1;
}
.svvs-inspector .svvs-field .svvs-colorctl {
	grid-column: 1;
	width: 100%;
	height: 36px;
	padding: 0 6px 0 8px;
	border-color: var(--sv-border);
	background: var(--sv-input);
	border-radius: 8px;
}
.svvs-inspector .svvs-field .svvs-colorctl .svvs-swatch {
	width: 22px;
	height: 22px;
	border-radius: 6px;
	border-color: rgba(255, 255, 255, 0.18);
}
.svvs-inspector .svvs-field .svvs-colorctl input[data-hex] {
	font-size: 13px;
	font-weight: 600;
	color: var(--sv-text);
}
.svvs-inspector .svvs-field--color > .svvs-kf,
.svvs-inspector .svvs-field:has(> .svvs-colorctl) > .svvs-kf {
	grid-column: 2;
	margin: 0;
	align-self: center;
}
.svvs-inspector input[type="color"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	height: 36px;
	margin: 0;
	padding: 4px;
	border: 1px solid var(--sv-border);
	border-radius: 8px;
	background: var(--sv-input);
	cursor: pointer;
}
.svvs-inspector input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.svvs-inspector input[type="color"]::-webkit-color-swatch {
	border: 0;
	border-radius: 6px;
}
.svvs-inspector input[type="color"]::-moz-color-swatch {
	border: 0;
	border-radius: 6px;
}
.svvs-switch {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	margin: 0 0 10px; padding: 8px 0;
	font-size: 13px; font-weight: 500; color: var(--sv-text);
}
.svvs-switch input {
	appearance: none; flex: none; width: 36px; height: 20px; border-radius: 99px;
	background: #3a4454; position: relative; cursor: pointer; border: 0;
}
.svvs-switch input::after {
	content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
	background: var(--sv-text); transition: left 0.15s ease;
}
.svvs-switch input:checked { background: var(--sv-accent); }
.svvs-switch input:checked::after { left: 18px; }

/* Inspector fields match Campaign Studio controls. Scoped so the left tools stay as they are. */
.svvs-inspector h2 {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 650;
	line-height: 1.25;
	color: var(--sv-text);
}
.svvs-inspector .svvs-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0 0 10px;
	min-width: 0;
	color: var(--sv-text-muted);
	font-size: 12px;
	font-weight: 500;
}
.svvs-inspector .svvs-field > span:first-child {
	color: var(--sv-text-muted);
	font-size: 12px;
	font-weight: 500;
}
.svvs-inspector .svvs-field input:not([type="range"]):not([type="checkbox"]):not([type="color"]):not([type="radio"]),
.svvs-inspector .svvs-field select,
.svvs-inspector .svvs-field textarea {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	height: 36px;
	margin: 0;
	padding: 0 10px;
	border: 1px solid var(--sv-border);
	border-radius: 8px;
	background: var(--sv-input);
	color: var(--sv-text);
	font-family: Rubik, "Segoe UI", sans-serif;
	font-size: 13px;
	font-weight: 500;
}
.svvs-inspector .svvs-field textarea {
	height: auto;
	min-height: 72px;
	padding: 8px 10px;
	resize: vertical;
}
.svvs-inspector .svvs-field select[multiple] { height: auto; min-height: 96px; padding: 6px; }
.svvs-inspector .svvs-field input:disabled,
.svvs-inspector .svvs-field select:disabled { opacity: 0.55; }
.svvs-inspector .svvs-field input[type="range"] {
	width: 100%;
	height: auto;
	padding: 0;
	border: 0;
	background: transparent;
}
.svvs-inspector .svvs-field input[type="checkbox"],
.svvs-inspector .svvs-field input[type="radio"] {
	width: auto;
	height: auto;
	padding: 0;
	border: 0;
	background: transparent;
}
.svvs-inspector .svvs-row { gap: 8px; margin: 0 0 10px; }
.svvs-inspector .svvs-row .svvs-btn { height: 36px; border-radius: 8px; }

.svvs-stage { min-width: 0; min-height: 0; display: flex; background: var(--sv-preview); padding: 0; }
.svvs-monitor {
	flex: 1; min-width: 0; min-height: 0;
	display: flex; flex-direction: column;
	background: var(--sv-preview); border-radius: 0; padding: 8px 12px 8px;
}
.svvs-monitor__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.svvs-player__name { color: var(--sv-text); font-size: 13px; font-weight: 600; flex: none; }
.svvs-monitor select {
	background: var(--sv-input); color: #f2f5fa; border: 0; border-radius: 8px; padding: 6px 10px;
}
.svvs-monitor__tools { display: flex; gap: 4px; }
.svvs-monitor__tools .svvs-icon { background: transparent; border-color: transparent; color: #d5dce8; width: 30px; height: 30px; }
.svvs-stage__well { flex: 1; min-height: 0; display: grid; place-items: center; padding: 12px 16px; }
.svvs-frame {
	position: relative;
	background: #000;
	border-radius: 8px;
	overflow: hidden;
	max-width: 100%;
	max-height: 100%;
}
.svvs-frame canvas { width: 100%; height: 100%; display: block; }
.svvs-frame:fullscreen,
.svvs-frame:-webkit-full-screen {
	background: #000;
	border-radius: 0;
}
.svvs-frame:fullscreen .svvs-transport,
.svvs-frame:-webkit-full-screen .svvs-transport {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 30;
	margin: 0;
	padding: 36px 20px 14px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0));
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.16s ease;
}
.svvs-frame.is-hud:fullscreen .svvs-transport,
.svvs-frame.is-hud:-webkit-full-screen .svvs-transport {
	opacity: 1;
	pointer-events: auto;
}
.svvs-safe { position: absolute; inset: 0; pointer-events: none; }
.svvs-safe[hidden] { display: none; }
.svvs-safe i, .svvs-safe b { position: absolute; border: 1px dashed rgba(255,255,255,0.75); }
.svvs-safe i { inset: 5%; }
.svvs-safe b { inset: 10%; border-color: rgba(255,255,255,0.4); }
.svvs-empty {
	position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 8px; color: #d5dbe3; text-align: center; padding: 16px;
}
.svvs-empty[hidden] { display: none; }
.svvs-transport {
	position: relative;
	display: flex; align-items: center; gap: 8px; padding: 4px 4px 2px; color: #f4f7fb; flex: none;
}
.svvs-time { font-variant-numeric: tabular-nums; font-size: 12px; width: 118px; flex: none; color: #fff; }
.svvs-scrub { flex: 1; min-width: 40px; accent-color: #3d9ad8; }
.svvs-transport .svvs-icon { background: transparent; border-color: transparent; color: #fff; width: 32px; height: 32px; }
.svvs-vol { display: flex; align-items: center; gap: 6px; color: #fff; font-size: 12px; min-width: 0; }
.svvs-vol #svvs-vol-pct { width: 36px; flex: none; font-variant-numeric: tabular-nums; }
.svvs-vol svg { width: 16px; height: 16px; }
.svvs-vol input { width: 72px; accent-color: #8fb4d4; }
.svvs-fitbtn {
	border: 0; background: #2c384c; color: #fff; border-radius: 8px; padding: 6px 10px;
	font-weight: 600; font-size: 0.78rem; cursor: pointer;
}
.svvs-box { position: absolute; border: 1.5px solid #fff; box-shadow: 0 0 0 1px var(--blue); touch-action: none; }
.svvs-box i { position: absolute; inset: 0; cursor: move; }
.svvs-box b, .svvs-box span {
	position: absolute; width: 10px; height: 10px; background: var(--sv-surface); border: 1px solid var(--blue); border-radius: 2px;
}
.svvs-box b[data-h="nw"] { left: -6px; top: -6px; cursor: nwse-resize; }
.svvs-box b[data-h="ne"] { right: -6px; top: -6px; cursor: nesw-resize; }
.svvs-box b[data-h="sw"] { left: -6px; bottom: -6px; cursor: nesw-resize; }
.svvs-box b[data-h="se"] { right: -6px; bottom: -6px; cursor: nwse-resize; }
.svvs-box b[data-h="n"] { left: 50%; top: -6px; margin-left: -5px; cursor: ns-resize; }
.svvs-box b[data-h="s"] { left: 50%; bottom: -6px; margin-left: -5px; cursor: ns-resize; }
.svvs-box b[data-h="e"] { right: -6px; top: 50%; margin-top: -5px; cursor: ew-resize; }
.svvs-box b[data-h="w"] { left: -6px; top: 50%; margin-top: -5px; cursor: ew-resize; }
.svvs-box span { left: 50%; top: -22px; margin-left: -5px; border-radius: 99px; cursor: grab; }

.svvs-tl-slot {
	grid-column: 2;
	grid-row: 4;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
}
.svvs-tl {
	flex: 1;
	height: auto;
	min-height: 0;
	min-width: 0;
	position: relative;
	background: var(--sv-surface);
	border-top: 1px solid var(--line);
	display: flex;
	flex-direction: column;
	min-height: 180px;
	min-width: 0;
}
.svvs.is-tl-out { grid-template-rows: 52px minmax(0, 1fr) 0 48px; }
.svvs.is-tl-out .svvs-split--y { visibility: hidden; pointer-events: none; }
.svvs-tl-home {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 0;
	padding: 0 12px;
	background: var(--sv-surface);
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 12px;
}
.svvs-tl-home p { margin: 0; }
.svvs-tl-home button {
	flex: none;
	border: 0;
	border-radius: 8px;
	background: var(--sv-accent);
	color: #fff;
	font-weight: 700;
	font-size: 12px;
	padding: 6px 10px;
	cursor: pointer;
}
body.svvs-tl-pop { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
body.svvs-tl-pop .svvs-tl { width: 100%; height: 100%; min-height: 0; border-top: 0; }
.svvs-tl__bar {
	display: flex; align-items: center; gap: 4px; padding: 4px 8px; border-bottom: 1px solid var(--line); min-height: 40px; flex: none;
}
.svvs-tl__group { display: flex; align-items: center; gap: 2px; }
.svvs-tlbtn {
	display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: var(--ink);
	font-weight: 600; font-size: 0.78rem; padding: 6px 8px; border-radius: 8px; cursor: pointer;
}
.svvs-tlbtn svg { width: 15px; height: 15px; }
.svvs-tlbtn:hover { background: var(--sv-hover); }
.svvs-tlbtn.is-on { color: var(--blue); background: var(--blue-soft); }
.svvs-tl__bar-gap { width: 8px; }
.svvs-zoom { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; color: var(--muted); margin-left: 8px; }
.svvs-zoom input, .svvs-zoom2 input { width: 92px; accent-color: var(--blue); }
.svvs-tl__right { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.svvs-zoom2 { display: flex; align-items: center; gap: 4px; }
.svvs-zoom2 button {
	width: 26px; height: 26px; border: 0; background: transparent; border-radius: 6px; cursor: pointer; color: var(--muted); font-weight: 700;
}
.svvs-addmenu {
	position: absolute; z-index: 20; background: var(--sv-surface); border: 1px solid var(--line); border-radius: 10px;
	box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12); display: flex; flex-direction: column; min-width: 140px; padding: 4px;
}
.svvs-addmenu[hidden] { display: none; }
.svvs-addmenu button { border: 0; background: transparent; text-align: left; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-weight: 600; }
.svvs-addmenu button:hover { background: var(--sv-hover); }
.svvs-tl__grid {
	flex: 1; min-height: 0;
	display: grid;
	grid-template-columns: var(--sv-tlnames, 200px) minmax(0, 1fr);
	grid-template-rows: 28px minmax(0, 1fr);
	position: relative;
}
.svvs-tl__namesize {
	position: absolute; top: 49px; bottom: 0; left: var(--sv-tlnames, 200px); width: 8px; margin-left: -4px;
	cursor: col-resize; z-index: 8; touch-action: none;
}
.svvs-tl__namesize:hover, .svvs-tl__namesize.is-on { background: rgba(32, 168, 214, 0.55); }
.svvs-tl__corner { grid-column: 1; grid-row: 1; border-bottom: 1px solid rgba(255, 255, 255, 0.05); border-right: 1px solid var(--line); background: #2a3140; }
.svvs-tl__metas { grid-column: 1; grid-row: 2; overflow: hidden; border-right: 1px solid var(--line); background: #262d3a; user-select: none; }
.svvs-tl__meta {
	height: var(--lane);
	box-sizing: border-box;
	overflow: hidden;
	position: relative;
	padding: 0 8px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.045);
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: grab;
	user-select: none;
	background: #2a3140;
}
.svvs-tl__meta:has(.svvs-tl__fxbar) {
	align-items: flex-start;
	padding-top: 3px;
}
.svvs-tl__meta.is-on { background: var(--blue-soft); }
.svvs-tl__meta.is-dragging { opacity: 0.45; background: #1a4558; }
.svvs-tl__meta.is-reorder, .svvs-tl__lane.is-reorder { box-shadow: inset 0 3px 0 #20a8d6; }
.svvs-tl__meta.is-reorder-after, .svvs-tl__lane.is-reorder-after { box-shadow: inset 0 -3px 0 #20a8d6; }
.svvs-tl__lane.is-track { box-shadow: inset 3px 0 0 var(--blue); }
.svvs-tl__lane.is-dragging { opacity: 0.45; outline: 1px dashed rgba(32, 168, 214, 0.8); outline-offset: -1px; }
.svvs-tl__ghost {
	position: fixed; z-index: 80; pointer-events: none; padding: 7px 12px; border-radius: 8px;
	background: #243246; color: #f4f7fb; font-size: 12px; font-weight: 700;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4); border: 1px solid rgba(32, 168, 214, 0.7);
}
.svvs-tl__meta svg { width: 15px; height: 15px; color: var(--muted); flex: none; }
.svvs-tl__meta input { border: 0; background: transparent; font-weight: 600; font-size: 0.78rem; width: 100%; min-width: 0; color: var(--ink); user-select: text; cursor: text; }
.svvs-tl__side { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 2px; flex: none; }
.svvs-tl__acts { display: flex; gap: 2px; flex: none; }
.svvs-tl__acts button { border: 0; background: transparent; cursor: pointer; padding: 2px; color: var(--muted); display: grid; place-items: center; }
.svvs-tl__acts button:disabled { opacity: 0.35; cursor: default; }
.svvs-tl__fxbar {
	position: absolute; right: 6px; bottom: 3px; z-index: 2;
	display: flex; align-items: center; gap: 4px; height: 16px; box-sizing: border-box;
	margin: 0; padding: 0 4px 0 3px; border: 0; border-radius: 4px;
	background: rgba(224, 122, 47, 0.18); color: #f0b27a; cursor: pointer; font: inherit;
}
.svvs-tl__fxbar:hover { background: rgba(224, 122, 47, 0.32); }
.svvs-tl__fxbar svg { width: 10px; height: 10px; flex: none; color: #f0b27a; transition: transform 0.15s ease; }
.svvs-tl__fxbar.is-open svg { transform: rotate(90deg); }
.svvs-tl__fxbar span { font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.svvs-tl__fxbar b {
	min-width: 14px; height: 14px; padding: 0 4px; border-radius: 999px;
	background: rgba(224, 122, 47, 0.4); color: #ffe6cc; font-size: 9px; font-weight: 700; line-height: 14px; text-align: center;
}
.svvs-tl__fxtick {
	position: absolute; bottom: 3px; height: 5px; border-radius: 3px; background: #e07a2f; pointer-events: none;
}
.svvs-tl__meta.svvs-tl__sub {
	height: 22px; padding: 0 6px 0 28px; cursor: pointer; background: #1a212c; border-left: 3px solid rgba(224, 122, 47, 0.75);
	gap: 4px;
}
.svvs-tl__subname {
	flex: 1; min-width: 0;
	font-size: 11px; font-weight: 600; color: #d5deea;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.svvs-tl__meta.svvs-tl__sub .svvs-tl__acts button { width: 16px; height: 16px; padding: 0; }
.svvs-tl__meta.svvs-tl__sub .svvs-tl__acts svg { width: 12px; height: 12px; }
.svvs-tl__sublane { height: 22px; background: rgba(0, 0, 0, 0.18); overflow: hidden; }
.svvs-tl__lane.svvs-tl__sublane .svvs-clip.is-effect { top: 2px !important; height: 18px !important; border-radius: 4px; }
.svvs-tl__lane.svvs-tl__sublane .svvs-clip.is-effect .svvs-clip__name {
	padding: 0 26px 0 6px; font-size: 10px; line-height: 18px;
}
.svvs-tl__lane.svvs-tl__sublane .svvs-clip.is-effect.is-kfopen { height: auto; min-height: 18px; overflow: hidden; }
.svvs-tl__lane.svvs-tl__sublane .svvs-clip__dur { bottom: 1px; font-size: 9px; padding: 0 3px; }
.svvs-tl__acts button.is-mute,
.svvs-tl__acts button.is-mute svg { color: #e23b4a; }
.svvs-tl__acts svg { width: 14px; height: 14px; }
.svvs-addtrack {
	display: flex; align-items: center; gap: 6px; width: 100%; border: 0; background: transparent;
	color: var(--muted); font-weight: 600; font-size: 0.78rem; padding: 10px 8px; cursor: pointer; text-align: left;
}
.svvs-addtrack:hover { background: var(--sv-hover); }
.svvs-tl__scroll { grid-column: 2; grid-row: 1 / span 2; overflow: auto; position: relative; }
.svvs-tl__sheet { position: relative; min-height: 100%; }
.svvs-tl__ruler { height: 28px; box-sizing: border-box; position: sticky; top: 0; background: var(--sv-surface-soft); border-bottom: 1px solid var(--line); z-index: 6; }
.svvs-tl__ruler i { position: absolute; top: 6px; font-style: normal; font-size: 11px; font-weight: 600; color: var(--muted); }
.svvs-tl__lane {
	position: relative; height: var(--lane); box-sizing: border-box;
	border-bottom: 1px solid rgba(255, 255, 255, 0.045);
	background-color: #313a4c;
	background-image: repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(255, 255, 255, 0.045) 80px);
}
.svvs-tl__lane[data-type="audio"], .svvs-tl__meta[data-type="audio"] { height: 54px; }
.svvs-tl__lane[data-type="text"]:not(.svvs-tl__sublane), .svvs-tl__meta[data-type="text"],
.svvs-tl__lane[data-type="caption"]:not(.svvs-tl__sublane), .svvs-tl__meta[data-type="caption"],
.svvs-tl__lane[data-type="element"]:not(.svvs-tl__sublane), .svvs-tl__meta[data-type="element"],
.svvs-tl__lane[data-type="effect"]:not(.svvs-tl__sublane), .svvs-tl__meta[data-type="effect"] { height: 42px; }
.svvs-tl__lane:nth-child(even) { background-color: #384256; }
.svvs-tl__lane.svvs-tl__sublane {
	height: 22px; background-color: #2a3342; background-image: none; overflow: hidden;
}
.svvs-clip.is-kfopen { overflow: visible; height: auto; min-height: 34px; z-index: 4; align-items: flex-start; flex-wrap: wrap; }
.svvs-kfexp {
	position: absolute; right: 4px; top: 4px; z-index: 5;
	width: 14px; height: 14px; padding: 0; border: 0; background: transparent;
	color: #fff; font-size: 10px; line-height: 14px; cursor: pointer;
}
.svvs-kfexp.is-on { color: var(--sv-accent); }
.svvs-kf {
	position: absolute; top: 8px; z-index: 4; width: 8px; height: 8px; margin-left: -4px;
	background: var(--sv-accent); transform: rotate(45deg); cursor: ew-resize;
	box-shadow: 0 0 0 1px #10141a;
}
.svvs-kf.is-on { background: #fff; box-shadow: 0 0 0 1.5px var(--sv-accent); }
.svvs-kfrows { position: relative; width: 100%; margin-top: 6px; }
.svvs-kfrow { position: relative; height: 18px; }
.svvs-kfrow em { position: absolute; left: 4px; top: 1px; font-size: 10px; font-style: normal; color: var(--sv-text); }
.svvs-kfrow .svvs-kf { top: 5px; }
.svvs-motion-panel {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	min-width: 0;
}
.svvs-motion-block { min-width: 0; }
.svvs-motion-block > .svvs-acc__sub { margin: 0 0 8px; }
.svvs-motion-help { margin: 0; line-height: 1.4; }
.svvs-motion-ask {
	padding: 10px;
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-lg);
	background: var(--sv-accent-soft);
}
.svvs-motion-ask .svvs-muted { margin: 0 0 8px; }
.svvs-kfprops {
	display: flex;
	flex-direction: column;
	margin: 0;
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
	background: var(--sv-input);
	overflow: hidden;
}
.svvs-kfprop {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 34px;
	padding: 4px 10px;
	font-size: 12px;
	border-bottom: 1px solid var(--sv-border);
}
.svvs-kfprop:last-child { border-bottom: 0; }
.svvs-kfprop span { flex: 1; min-width: 0; color: var(--sv-text-muted); font-weight: 500; }
.svvs-kfprop b { flex: none; min-width: 40px; text-align: right; font-weight: 650; color: var(--sv-text); }
.svvs-kfprop.is-animated span { color: var(--sv-accent); }
.svvs-kfprop select {
	flex: 0 1 96px;
	width: auto;
	max-width: 104px;
	height: 28px;
	margin: 0;
	padding: 0 6px;
	border: 1px solid var(--sv-border);
	border-radius: 6px;
	background: var(--sv-elevated);
	color: var(--sv-text);
	font-family: Rubik, "Segoe UI", sans-serif;
	font-size: 11px;
	font-weight: 500;
}
.svvs-kfd, .svvs-kfclear {
	width: 16px; height: 16px; padding: 0; border: 0; background: transparent; cursor: pointer; color: var(--sv-text-muted);
}
.svvs-kfd { flex: none; transform: rotate(45deg); border: 1.5px solid var(--sv-text-muted); border-radius: 1px; }
.svvs-kfd.is-on { background: var(--sv-accent); border-color: var(--sv-accent); }
.svvs-kfclear { width: auto; font-size: 11px; font-weight: 600; }
.svvs-kfclear:hover { color: var(--sv-accent); }
.svvs-kfhead { margin: 0 0 8px; }
.svvs-autokey {
	width: 100%;
	height: 36px;
	box-sizing: border-box;
	border: 1px solid var(--sv-border);
	background: var(--sv-elevated);
	color: var(--sv-text);
	border-radius: 8px;
	padding: 0 12px;
	font-size: 13px;
	font-weight: 650;
	cursor: pointer;
}
.svvs-autokey:hover { border-color: var(--sv-accent); color: var(--sv-accent); }
.svvs-autokey.is-on { background: var(--sv-accent-soft); color: var(--sv-accent); border-color: var(--sv-accent); }
.svvs-kfgroups {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 8px;
	padding: 3px;
	border-radius: 10px;
	background: var(--sv-elevated);
}
.svvs-kfgroups button {
	border: 0;
	background: transparent;
	color: var(--sv-text-muted);
	border-radius: 8px;
	padding: 6px 10px;
	font-size: 12px;
	font-weight: 650;
	cursor: pointer;
}
.svvs-kfgroups button:hover { color: var(--sv-text); background: var(--sv-hover); }
.svvs-kfgroups button.is-on { background: var(--sv-accent-soft); color: var(--sv-accent); }
.svvs-kfpresets {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
}
.svvs-kfpresets button, .svvs-kfcustom > button {
	border: 1px solid var(--sv-border);
	background: var(--sv-panel);
	color: var(--sv-text);
	border-radius: 8px;
	padding: 6px 10px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}
.svvs-kfpresets button:hover, .svvs-kfcustom > button:hover {
	border-color: var(--sv-accent);
	color: var(--sv-accent);
}
.svvs-kfcustom { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.svvs-kfopts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin: 0;
}
.svvs-kfopts label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--sv-text-muted);
	font-size: 12px;
	font-weight: 500;
	min-width: 0;
	cursor: default;
}
.svvs-kfopts__wide { grid-column: 1 / -1; }
.svvs-kfopts__check {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 36px;
	padding: 0 2px;
	color: var(--sv-text);
	font-size: 13px;
	font-weight: 500;
}
.svvs-kfopts input:not([type="checkbox"]),
.svvs-kfopts select {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	height: 36px;
	margin: 0;
	padding: 0 10px;
	border: 1px solid var(--sv-border);
	border-radius: 8px;
	background: var(--sv-input);
	color: var(--sv-text);
	font-family: Rubik, "Segoe UI", sans-serif;
	font-size: 13px;
	font-weight: 500;
}
.svvs-kfopts input[type="checkbox"] {
	appearance: none;
	flex: none;
	width: 36px;
	height: 20px;
	margin: 0;
	border: 0;
	border-radius: 99px;
	background: #3a4454;
	position: relative;
	cursor: pointer;
}
.svvs-kfopts input[type="checkbox"]::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	transition: transform 140ms ease;
}
.svvs-kfopts input[type="checkbox"]:checked { background: var(--sv-accent); }
.svvs-kfopts input[type="checkbox"]:checked::after { transform: translateX(16px); }
.svvs-clip {
	position: absolute; top: 6px; height: 46px; border-radius: 6px; overflow: hidden;
	display: flex; align-items: center; color: #fff; font-size: 12px; cursor: grab; z-index: 1; border: 0;
}
.svvs-tl__lane[data-type="text"]:not(.svvs-tl__sublane) .svvs-clip,
.svvs-tl__lane[data-type="caption"]:not(.svvs-tl__sublane) .svvs-clip,
.svvs-tl__lane[data-type="element"]:not(.svvs-tl__sublane) .svvs-clip,
.svvs-tl__lane[data-type="effect"]:not(.svvs-tl__sublane) .svvs-clip { top: 4px; height: 34px; }
.svvs-tl__lane[data-type="element"]:not(.svvs-tl__sublane) .svvs-clip:not(.is-stacked) {
	top: 4px !important;
	height: 34px !important;
}
.svvs-tl__resize {
	position: absolute; left: 0; right: 0; bottom: 0; height: 6px; z-index: 6;
	cursor: ns-resize;
}
.svvs-tl__resize:hover { background: rgba(32, 168, 214, 0.55); }
.svvs-tl__lane.is-sized:not(.svvs-tl__sublane) .svvs-clip:not(.is-stacked) {
	top: 4px !important;
	height: calc(100% - 8px) !important;
}
.svvs-tl__lane[data-type="element"]:not(.svvs-tl__sublane) .svvs-clip.is-stacked {
	height: 22px !important;
}
.svvs-clip:hover { outline: 1px solid rgba(255,255,255,0.4); outline-offset: -1px; }
.svvs-clip.is-on { box-shadow: 0 0 0 2px var(--blue); z-index: 4; }
.svvs-clip.is-video { background: #243044; }
.svvs-clip.is-image, .svvs-clip.is-shape { background: #3d5a80; }
.svvs-clip.is-element { background: #e0a825; color: #3d2c00; }
.svvs-clip.is-audio, .svvs-clip.is-tone-a { background: linear-gradient(180deg, #248a52 0%, #166b3e 100%); }
.svvs-clip.is-tone-b { background: linear-gradient(180deg, #18786c 0%, #0e524a 100%); }
.svvs-clip.is-audio .svvs-clip__name,
.svvs-clip.is-tone-a .svvs-clip__name,
.svvs-clip.is-tone-b .svvs-clip__name {
	position: absolute; left: 8px; top: 4px; z-index: 1; max-width: calc(100% - 58px);
	padding: 1px 6px; border-radius: 4px; background: rgba(0, 0, 0, 0.42);
	font-size: 10px; font-weight: 600; line-height: 1.35; pointer-events: none;
}
.svvs-clip.is-text { background: #6a45b0; color: #fff; }
.svvs-clip.is-caption { background: #d15a8a; color: #fff; }
.svvs-clip.is-visualizer { background: #12343c; color: #d7fbff; }
.svvs-clip__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.svvs-clip__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,16,28,0.15), rgba(10,16,28,0.45)); }
.svvs-clip__name { position: relative; z-index: 1; padding: 0 8px; font-style: normal; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svvs-clip__filter {
	position: absolute; left: 4px; top: 4px; z-index: 2; max-width: calc(100% - 12px);
	padding: 1px 6px; border-radius: 999px; background: rgba(10, 134, 191, 0.92); color: #fff;
	font-size: 10px; font-style: normal; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	cursor: pointer;
}
.svvs-clip__filter.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--blue); }
.svvs-clip__dur {
	position: absolute; right: 6px; bottom: 4px; z-index: 1; background: rgba(0,0,0,0.55);
	color: #fff; border-radius: 4px; font-size: 10px; font-weight: 600; padding: 1px 4px;
}
.svvs-clip.is-element .svvs-clip__dur { background: rgba(61, 44, 0, 0.28); color: #3d2c00; }
.svvs-clip__t { position: relative; z-index: 1; margin-left: 8px; font-weight: 700; }
.svvs-kstrip { position: absolute; left: 4px; right: 4px; bottom: 3px; height: 3px; z-index: 2; pointer-events: none; }
.svvs-kstrip i { position: absolute; top: 0; height: 3px; border-radius: 2px; background: #8fd0ff; opacity: 0.9; }
.svvs-kinprev { width: 100%; height: 56px; border-radius: 8px; background: #12151c; display: block; margin: 0 0 8px; }
.svvs-kinwords { max-height: 168px; overflow: auto; display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.svvs-kinword { display: grid; grid-template-columns: 1fr 62px 62px; gap: 4px; align-items: center; font-size: 12px; }
.svvs-kinword input { width: 100%; height: 28px; }
.svvs-kinalign { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.svvs-kinalign textarea { min-height: 64px; resize: vertical; }
.svvs-kinreview { border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: var(--sv-surface-soft); }
.svvs-kinfile { cursor: pointer; }
.svvs-clip__wave, .svvs-clip__strip { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.svvs-clip__h { position: absolute; top: 0; width: 8px; height: 100%; cursor: ew-resize; z-index: 2; }
.svvs-clip__h[data-edge="l"] { left: 0; }
.svvs-clip__h[data-edge="r"] { right: 0; }
.svvs-fx {
	position: absolute;
	top: 6px;
	height: 18px;
	border-radius: 4px;
	background: #e23b3b;
	color: #fff;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	cursor: grab;
	box-shadow: 0 0 0 1px rgba(255,255,255,0.7);
}
.svvs-fx span { font-size: 10px; font-weight: 700; pointer-events: none; padding: 0 10px; white-space: nowrap; }
.svvs-fx b { position: absolute; top: 0; width: 8px; height: 100%; cursor: ew-resize; }
.svvs-fx b[data-fx-edge="l"] { left: 0; }
.svvs-fx.is-on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1f2430; }
.svvs-fxrow.is-on { box-shadow: inset 0 0 0 2px var(--blue); }
.svvs-tl__mark {
	position: absolute; top: 24px; width: 16px; height: 16px; border-radius: 4px;
	background: var(--blue); border: 0; z-index: 2; cursor: pointer; color: #fff; font-size: 11px; line-height: 16px; padding: 0;
}
.svvs-tl__mark.is-on { box-shadow: 0 0 0 2px #9fd4ee; }
.svvs-tl__play {
	position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--red); z-index: 7; pointer-events: none;
}
.svvs-tl__head {
	position: absolute; top: 4px; left: 0; transform: translateX(-50%);
	min-width: 44px; padding: 2px 6px; background: var(--red); color: #fff; border-radius: 6px;
	font-size: 11px; font-weight: 700; text-align: center; pointer-events: auto; cursor: ew-resize; line-height: 1.3;
}
.svvs-tl__insert { position: absolute; top: 28px; bottom: 0; width: 2px; background: var(--blue); z-index: 5; pointer-events: none; }
.svvs-tl__empty { position: absolute; left: 24px; top: 70px; color: var(--muted); font-size: 0.85rem; pointer-events: none; }
.svvs-field { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; font-size: 0.78rem; color: var(--muted); }
.svvs-field input, .svvs-field select, .svvs-field textarea { width: 100%; box-sizing: border-box; color: var(--ink); }
.svvs-row { display: flex; gap: 8px; margin-top: 8px; }
.svvs-row.svvs-motionacts,
.svvs-motionacts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	margin: 0;
}
.svvs-motionacts button {
	height: 36px;
	box-sizing: border-box;
	border: 1px solid var(--sv-border);
	background: var(--sv-elevated);
	color: var(--sv-text);
	border-radius: 8px;
	padding: 0 10px;
	font-size: 12px;
	font-weight: 650;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.svvs-motionacts button:hover,
.svvs-motionacts button:focus-visible {
	border-color: var(--sv-accent);
	color: var(--sv-accent);
	outline: none;
}
.svvs-graph {
	flex: none; height: 168px; display: flex; gap: 12px; align-items: stretch;
	padding: 8px 10px; border-bottom: 1px solid var(--line); background: var(--sv-surface);
	min-width: 0;
}
.svvs-graph[hidden] { display: none !important; }
.svvs-graph__side { width: 210px; flex: none; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.svvs-graph__presets, .svvs-graph__nums { display: flex; flex-wrap: wrap; gap: 4px; }
.svvs-graph__preset, .svvs-graph__nums label {
	border: 1px solid var(--line); background: var(--sv-elevated); color: var(--ink);
	border-radius: 6px; padding: 3px 6px; font-size: 11px; font-weight: 600; cursor: pointer;
}
.svvs-graph__preset.is-on { background: var(--sv-accent-soft); color: var(--sv-accent); border-color: transparent; }
.svvs-graph__nums label { display: flex; flex-direction: column; gap: 2px; font-weight: 500; color: var(--muted); cursor: default; }
.svvs-graph__nums input { width: 64px; height: 26px; background: var(--sv-input); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; }
.svvs-graph__note { margin: 0; color: var(--muted); font-size: 11px; }
.svvs-graph__svg { flex: 1; min-width: 0; height: 100%; overflow: visible; }
.svvs-graph__diag { stroke: rgba(154, 168, 184, 0.45); stroke-width: 1; }
.svvs-graph__curve { fill: none; stroke: var(--sv-accent); stroke-width: 2; }
.svvs-graph__arm { stroke: rgba(32, 168, 214, 0.7); stroke-width: 1; }
.svvs-graph__end { fill: var(--sv-accent); }
.svvs-graph__h { fill: #d7f3ff; stroke: var(--sv-accent); stroke-width: 1.5; cursor: grab; }
.svvs-mpath { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.svvs-mpath__line { fill: none; stroke: rgba(32, 168, 214, 0.85); stroke-width: 1.5; }
.svvs-mpath__arm { stroke: rgba(184, 230, 246, 0.9); stroke-width: 1; }
.svvs-mpath__dir { fill: rgba(32, 168, 214, 0.9); }
.svvs-mpath__node { fill: var(--sv-accent); stroke: #fff; stroke-width: 1.5; pointer-events: none; }
.svvs-mpath.is-edit .svvs-mpath__node, .svvs-mpath.is-edit .svvs-mpath__tan { pointer-events: auto; cursor: grab; }
.svvs-mpath__node.is-on { fill: #fff; stroke: var(--sv-accent); stroke-width: 2; }
.svvs-mpath__tan { fill: #d7f3ff; stroke: var(--sv-accent); stroke-width: 1.5; pointer-events: none; }
.svvs-mobile { display: none; padding: 32px 20px; }
.svvs-mobile__title { font-size: 1.3rem; font-weight: 700; color: var(--blue); }
.svvs-modal[hidden] { display: none !important; }
.svvs-modal {
	position: fixed; inset: 0; background: rgba(8, 10, 14, 0.72); display: grid; place-items: center; z-index: 100; padding: 16px;
	box-sizing: border-box;
}
.svvs-modal__card {
	width: min(440px, 100%);
	max-height: calc(100vh - 32px);
	overflow: auto;
	box-sizing: border-box;
	background: #20242c;
	color: #e8edf4;
	border: 1px solid #363d49;
	border-radius: 14px;
	padding: 16px 18px 18px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.svvs-modal__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.svvs-modal__bar h2 { margin: 0; font-size: 1.1rem; color: #e8edf4; }
.svvs-modal__note, .svvs-modal__line, .svvs-modal label { font-size: 0.88rem; color: #9aa7b8; }
.svvs-modal__note { margin: 10px 0; line-height: 1.45; }
.svvs-modal__preview { margin: 0 0 10px; background: #000; border-radius: 8px; overflow: hidden; line-height: 0; }
.svvs-modal__preview:empty { display: none; }
.svvs-modal__preview canvas { width: 100%; height: auto; display: block; background: #000; }
.svvs-modal__line { display: flex; justify-content: space-between; gap: 12px; margin: 8px 0; }
.svvs-modal__line strong { color: #e8edf4; }
.svvs-modal label { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 8px 0; }
.svvs-modal select { min-width: 120px; }
.svvs-modal__status { min-height: 1.2em; margin: 8px 0 0; color: #e8edf4; }
.svvs-modal__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

.svvs-libstick { flex: none; padding: 12px 14px 8px; background: var(--sv-surface); border-bottom: 1px solid var(--line); }
.svvs-libbody { flex: 1; min-height: 0; overflow: auto; padding: 12px 14px 16px; }
.svvs-panel:has(.svvs-libbody) { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.svvs-search { position: relative; display: flex; align-items: center; margin: 8px 0; }
.svvs-search svg { position: absolute; left: 10px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.svvs-search input { width: 100%; height: 36px; box-sizing: border-box; padding: 0 32px 0 34px; border: 1px solid var(--line); border-radius: var(--sv-radius-md); background: var(--sv-surface-soft); color: var(--ink); font-size: 13px; }
.svvs-search input[type="search"]::-webkit-search-cancel-button,
.svvs-search input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.svvs-transport .svvs-sr { pointer-events: none; }
.svvs-search__clear {
	position: absolute; right: 4px; width: 24px; height: 24px; border: 0; border-radius: 6px;
	background: transparent; color: var(--muted); cursor: pointer; font-size: 16px; line-height: 1;
}
.svvs-search__clear:hover { background: var(--sv-hover); color: var(--ink); }
.svvs-libfilters { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; }
.svvs-filter { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 120px; font-size: 11px; font-weight: 600; color: var(--muted); }
.svvs-filter select { height: 34px; width: 100%; border: 1px solid var(--line); border-radius: var(--sv-radius-md); background: var(--sv-surface); color: var(--ink); font-size: 12px; font-weight: 600; padding: 0 8px; }
.svvs-libfilters .svvs-cat { height: 34px; box-sizing: border-box; display: inline-flex; align-items: center; }
.svvs-libempty { padding: 20px 4px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.svvs-libempty p { margin: 0 0 6px; }
.svvs-cats { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.svvs-cat { border: 1px solid var(--line); background: var(--sv-surface); color: var(--ink); border-radius: 999px; padding: 4px 10px; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.svvs-cat.is-on { background: var(--blue-soft); color: var(--blue); border-color: var(--blue); }
.svvs-elgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(67px, 82px)); justify-content: start; gap: 6px; }
.svvs-elgrid.is-icons { grid-template-columns: repeat(auto-fill, minmax(55px, 65px)); gap: 4px; }
.svvs-elgrid.is-icons .svvs-elcard { min-width: 0; padding: 4px; }
.svvs-elgrid.is-icons .svvs-elcard:hover { background: var(--sv-hover); }
.svvs-elgrid.is-icons .svvs-elcard__cv { height: auto; }
.svvs-elgrid.is-icons .svvs-elcard b {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	font-size: 10px; line-height: 1.2; white-space: normal; overflow: hidden; text-overflow: ellipsis; padding-right: 0;
}
.svvs-elgrid.is-icons .svvs-elcard__fav { top: 2px; right: 2px; bottom: auto; opacity: 0; }
.svvs-elgrid.is-icons .svvs-elcard:hover .svvs-elcard__fav,
.svvs-elgrid.is-icons .svvs-elcard:focus-within .svvs-elcard__fav,
.svvs-elgrid.is-icons .svvs-elcard__fav.is-on,
.svvs-elgrid.is-icons .svvs-elcard__fav:focus,
.svvs-elgrid.is-library .svvs-elcard:hover .svvs-elcard__fav,
.svvs-elgrid.is-library .svvs-elcard:focus-within .svvs-elcard__fav,
.svvs-elgrid.is-library .svvs-elcard__fav.is-on,
.svvs-elgrid.is-library .svvs-elcard__fav:focus { opacity: 1; }
.svvs-elgrid.is-library .svvs-elcard__fav { opacity: 0; }
.svvs-elgrid.is-graphics { grid-template-columns: repeat(auto-fill, minmax(67px, 82px)); }
.svvs-ptr {
	position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px;
	border-radius: 50%; background: #f0c14a; border: 1px solid #172033; cursor: grab; z-index: 4;
}
.svvs-box.is-crop { border-style: dashed; cursor: move; }
.svvs-box.is-crop i { cursor: move; }
.svvs-iconsubs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; }
.svvs-kicker { margin: 0 0 2px; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted, #5c6b76); font-weight: 700; }
.svvs-elcard {
	position: relative; display: flex; flex-direction: column; gap: 4px; padding: 6px;
	border: 1px solid var(--line); border-radius: 10px; background: var(--sv-surface); text-align: left; cursor: pointer;
}
.svvs-elcard:hover { border-color: #9fd4ee; }
.svvs-elcard:focus { outline: 2px solid var(--blue); outline-offset: 2px; }
.svvs-elcard__cv {
	width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; object-position: center;
	border-radius: 6px; background: var(--sv-elevated); display: block;
}
.svvs-elcard b {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden; font-size: 12px; line-height: 1.25; font-weight: 600; padding-right: 16px;
}
.svvs-elcard__fav {
	position: absolute; right: 4px; bottom: 4px; border: 0; background: transparent;
	color: #9aa3b2; font-size: 13px; line-height: 1; padding: 2px; cursor: pointer;
}
.svvs-elcard__fav.is-on { color: #d89b14; }
.svvs-elpair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.svvs-elpair .svvs-field { margin-bottom: 8px; }
.svvs-elarr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.svvs-elarr button {
	border: 1px solid var(--line); background: var(--sv-surface); border-radius: 8px; padding: 6px 8px;
	font-size: 0.72rem; font-weight: 600; cursor: pointer; color: var(--ink);
}
.svvs-elarr button:hover, .svvs-elarr button:focus { border-color: var(--blue); color: var(--blue); outline: none; }
.svvs-elgroup { margin: 12px 2px 6px; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted, #5c6b76); }
.svvs-flip { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.svvs-flip button {
	border: 1px solid var(--line); background: var(--sv-surface); border-radius: 8px; padding: 6px 8px;
	font-size: 0.72rem; font-weight: 600; cursor: pointer; color: var(--ink);
}
.svvs-flip button.is-on, .svvs-flip button:hover, .svvs-flip button:focus { border-color: var(--blue); color: var(--blue); outline: none; }
#svvs-handles { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.svvs-box { pointer-events: auto; }
.svvs-path { position: absolute; inset: 0; pointer-events: none; }
.svvs-path i[data-h="move"] {
	position: absolute; height: 16px; margin: 0; pointer-events: auto; background: transparent;
	cursor: move; transform-origin: center center;
}
.svvs-path i.is-guide {
	position: absolute; height: 1px; margin: 0; pointer-events: none;
	background: rgba(17, 139, 193, 0.55); transform-origin: center center;
}
.svvs-pt {
	position: absolute; z-index: 3; width: 22px; height: 22px; margin: -11px 0 0 -11px;
	padding: 0; border: 0; border-radius: 50%; background: transparent; pointer-events: auto; cursor: grab;
}
.svvs-pt::after {
	content: ""; position: absolute; left: 7px; top: 7px; width: 8px; height: 8px; border-radius: 50%;
	background: #118BC1; border: 2px solid #fff; box-shadow: 0 0 0 1px #0a86bf;
}
.svvs-pt.is-curve::after { width: 8px; height: 8px; background: var(--sv-surface); }
.svvs-pt:focus { outline: 2px solid #118BC1; outline-offset: 1px; }
#svvs-guides { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
#svvs-guides i { position: absolute; background: #e23d8c; }
#svvs-guides i b {
	position: absolute; left: 4px; top: -12px; background: #e23d8c; color: #fff;
	font-size: 10px; line-height: 1.2; font-weight: 700; padding: 1px 3px; border-radius: 3px; white-space: nowrap;
}
.svvs-marquee {
	position: absolute; z-index: 6; border: 1px dashed #0a86bf; background: rgba(10, 134, 191, 0.12); pointer-events: none;
}
.svvs-tl__sheet .svvs-marquee { z-index: 5; }
.svvs-member { position: absolute; border: 1px dashed rgba(10, 134, 191, 0.9); pointer-events: none; }
.svvs-layoutbar { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; margin: 0 8px; overflow-x: auto; }
.svvs-layoutbar[hidden] { display: none !important; }
.svvs-layoutbar__set { display: flex; gap: 2px; padding-right: 6px; border-right: 1px solid rgba(255,255,255,.16); }
.svvs-layoutbar button {
	width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
	border: 0; background: transparent; border-radius: 6px; color: #d5dce8; padding: 0; cursor: pointer; flex: 0 0 auto;
}
.svvs-layoutacts button {
	width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
	border: 1px solid var(--line); background: var(--sv-surface); border-radius: 6px; color: var(--ink); padding: 0; cursor: pointer;
}
.svvs-layoutbar button[data-layout-act="exit"] { width: auto; padding: 0 8px; font-size: 0.72rem; font-weight: 700; }
.svvs-layoutbar button:hover, .svvs-layoutbar button:focus { background: rgba(255,255,255,.08); color: #fff; outline: none; }
.svvs-layoutacts button:hover, .svvs-layoutacts button:focus { border-color: var(--blue); color: var(--blue); outline: none; }
.svvs-layoutbar button[disabled] { opacity: 0.35; cursor: default; }
.svvs-layoutbar svg, .svvs-layoutacts svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.svvs-layoutacts { display: flex; flex-wrap: wrap; gap: 4px; }
.svvs-clip.is-grouped { box-shadow: inset 3px 0 0 #118BC1; }
.svvs-elpct { display: block; margin-top: 2px; font-style: normal; }
.svvs-flgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 156px)); justify-content: start; gap: 8px; }
.svvs-flcard {
	position: relative; display: flex; flex-direction: column; gap: 4px; padding: 6px;
	border: 1px solid var(--line); border-radius: 10px; background: var(--sv-surface); text-align: left; cursor: pointer;
}
.svvs-flcard:hover { border-color: #9fd4ee; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16, 24, 40, 0.06); }
.svvs-flcard:focus { outline: 2px solid var(--blue); outline-offset: 2px; }
.svvs-flcard.is-on { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.svvs-flcard__cv, .svvs-flcard__none {
	width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; object-position: center;
	border-radius: 6px; background: #1b2433; display: block;
}
.svvs-flcard__none { display: grid; place-items: center; color: #c5d0dc; }
.svvs-flcard__none svg { width: 42px; height: 42px; }
.svvs-flcard b { font-size: 0.75rem; line-height: 1.2; padding-right: 16px; }
.svvs-flcard__fav {
	position: absolute; right: 8px; bottom: 6px; border: 0; background: transparent;
	color: #c5ccd6; font-size: 14px; padding: 0; cursor: pointer;
}
.svvs-flcard__fav.is-on { color: var(--red); }
.svvs-flcard__check {
	position: absolute; top: 10px; right: 10px; width: 16px; height: 16px; border-radius: 50%;
	background: var(--blue); color: #fff; font-style: normal; font-size: 10px; font-weight: 700;
	display: grid; place-items: center;
}
.svvs-flnow { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.svvs-flnow canvas { width: 86px; height: auto; aspect-ratio: 16 / 9; object-fit: contain; border-radius: 8px; background: #1b2433; flex: none; }
.svvs-flnow strong { display: block; font-size: 0.86rem; }
.svvs-flnow em { color: var(--muted); font-size: 0.75rem; font-style: normal; }
.svvs-flnow .svvs-flcard__fav { position: static; margin-left: auto; }
.svvs-fold { margin: 8px 0 12px; }
.svvs-fold summary { cursor: pointer; font-weight: 700; font-size: 0.82rem; margin-bottom: 8px; }
.svvs-fxgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 156px)); justify-content: start; gap: 8px; }
.svvs-fxcard { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--sv-surface); text-align: left; cursor: grab; }
.svvs-fxcard:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.svvs-fxcard__cv {
	width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; object-position: center;
	border-radius: 6px; background: #1a2332; display: block;
}
.svvs-fxcard b { font-size: 0.75rem; line-height: 1.2; padding-right: 16px; }
.svvs-fxcard__fav { position: absolute; right: 8px; bottom: 6px; border: 0; background: transparent; color: #c5ccd6; font-size: 14px; padding: 0; }
.svvs-fxcard__fav.is-on { color: var(--red); }
.svvs-seg--wrap { flex-wrap: wrap; }
.svvs-seg--wrap button { flex: 1 1 42%; }
.svvs-txgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 140px)); justify-content: start; gap: 8px; }
.svvs-txcard {
	position: relative; display: flex; flex-direction: column; gap: 4px; padding: 6px;
	border: 1px solid var(--line); border-radius: 10px; background: var(--sv-surface); text-align: left; cursor: pointer;
}
.svvs-txcard:hover { border-color: #b9d7ea; transform: translateY(-1px); }
.svvs-txcard:focus { outline: 2px solid var(--blue); outline-offset: 2px; }
.svvs-txcard.is-on { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.svvs-txcard canvas, .svvs-txcard__none {
	width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; object-position: center;
	border-radius: 6px; background: #1b2433; display: block;
}
.svvs-txcard__none { display: grid; place-items: center; color: #c5d0dc; }
.svvs-txcard__none svg { width: 42px; height: 42px; }
.svvs-txcard b { font-size: 0.75rem; line-height: 1.2; padding-right: 16px; }
.svvs-txcard__fav {
	position: absolute; right: 8px; bottom: 6px; border: 0; background: transparent;
	color: #c5ccd6; font-size: 14px; padding: 0; cursor: pointer;
}
.svvs-txcard__fav.is-on { color: var(--red); }
.svvs-txcard__check {
	position: absolute; top: 10px; right: 10px; width: 16px; height: 16px; border-radius: 50%;
	background: var(--blue); color: #fff; font-style: normal; font-size: 10px; font-weight: 700;
	display: grid; place-items: center;
}
.svvs-txnow { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.svvs-txnow canvas { width: 86px; height: auto; aspect-ratio: 16 / 9; object-fit: contain; border-radius: 8px; background: #1b2433; flex: none; }
.svvs-txnow strong { display: block; font-size: 0.86rem; }
.svvs-txnow em { color: var(--muted); font-size: 0.75rem; font-style: normal; }
.svvs-txnow__x { margin-left: auto; border: 0; background: transparent; font-size: 1.2rem; cursor: pointer; color: var(--muted); }
.svvs-txline { display: flex; align-items: center; gap: 8px; }
.svvs-txline input[type="range"] { flex: 1; }
.svvs-txline em { min-width: 48px; text-align: right; font-style: normal; color: var(--ink); font-size: 0.75rem; }
.svvs-trgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 150px)); justify-content: start; gap: 8px; }
.svvs-trcard {
	position: relative; display: flex; flex-direction: column; gap: 4px; padding: 6px;
	border: 1px solid var(--line); border-radius: 10px; background: var(--sv-surface); text-align: left; cursor: grab;
}
.svvs-trcard:hover { border-color: #9fd4ee; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(16, 24, 40, 0.06); }
.svvs-trcard:focus { outline: 2px solid var(--blue); outline-offset: 2px; }
.svvs-trcard.is-on { border-color: var(--blue); background: var(--blue-soft); box-shadow: 0 0 0 1px var(--blue); }
.svvs-trcard canvas, .svvs-trcard__none {
	width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; object-position: center;
	border-radius: 6px; background: #101620; display: block;
}
.svvs-trcard__none { display: grid; place-items: center; color: #c5d0dc; }
.svvs-trcard__none svg { width: 42px; height: 42px; }
.svvs-trcard b { font-size: 0.75rem; line-height: 1.2; padding-right: 16px; }
.svvs-trcard__fav {
	position: absolute; right: 8px; bottom: 6px; border: 0; background: transparent;
	color: #c5ccd6; font-size: 14px; padding: 0; cursor: pointer;
}
.svvs-trcard__fav.is-on { color: var(--red); }
.svvs-trcard__check {
	position: absolute; top: 10px; right: 10px; width: 16px; height: 16px; border-radius: 50%;
	background: var(--blue); color: #fff; font-style: normal; font-size: 10px; font-weight: 700;
	display: grid; place-items: center;
}
.svvs-tr {
	position: absolute; top: 6px; height: 46px; z-index: 5; cursor: pointer; background: transparent;
	filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.95));
}
.svvs-tr::before, .svvs-tr::after {
	content: ""; position: absolute; top: 0; width: 50%; height: 100%;
	background: rgba(180, 74, 212, 0.92); pointer-events: none;
}
.svvs-tr::before { left: 0; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.svvs-tr::after { right: 0; clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.svvs-tr.is-on { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 3px #e2a8f5); }
.svvs-tr.is-on::before, .svvs-tr.is-on::after { background: #c86adf; }
.svvs-tr b { position: absolute; top: 0; width: 8px; height: 100%; cursor: ew-resize; z-index: 1; }
.svvs-tr b[data-tr-edge="l"] { left: 0; }
.svvs-tr b[data-tr-edge="r"] { right: 0; }
.svvs-trtip {
	position: fixed; z-index: 40; background: #1f2430; color: #fff; font-size: 11px; font-weight: 700;
	padding: 3px 6px; border-radius: 6px; pointer-events: none;
}
.svvs-tl__cut {
	position: absolute; top: 8px; bottom: 8px; width: 4px; margin-left: -2px; background: #b44ad4;
	border-radius: 4px; z-index: 6; pointer-events: none; box-shadow: 0 0 0 3px rgba(180, 74, 212, 0.28);
}
.svvs-menu {
	position: fixed; z-index: 40; background: var(--sv-surface); border: 1px solid var(--line); border-radius: 10px;
	box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12); padding: 4px; min-width: 168px;
}
.svvs-menu button {
	display: block; width: 100%; text-align: left; border: 0; background: transparent;
	padding: 8px 10px; border-radius: 8px; font-weight: 600; cursor: pointer; color: var(--ink);
}
.svvs-menu button:hover { background: var(--blue-soft); color: var(--blue); }
.svvs-menu button.is-danger { color: #e23b4a; }
.svvs-menu button.is-danger:hover { background: rgba(226, 59, 74, 0.12); color: #e23b4a; }
.svvs-menu__rule { height: 1px; margin: 4px 6px; background: var(--line); }
.svvs-clip.is-effect { background: #e07a2f; color: #fff; }
.svvs-clip.is-effect.is-lane-fx {
	top: auto;
	bottom: 6px;
	height: 18px;
	z-index: 5;
	border-radius: 5px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.svvs-clip.is-effect.is-lane-fx.is-on { box-shadow: 0 0 0 2px var(--blue); z-index: 5; }
.svvs-clip.is-effect.is-lane-fx .svvs-clip__dur { bottom: 1px; font-size: 9px; padding: 0 3px; }
.svvs-tl__lane.is-hot { box-shadow: inset 0 0 0 2px var(--blue); }
.svvs-clip.is-drop { outline: 2px solid var(--blue); outline-offset: -2px; z-index: 4; }
.svvs-monitor__tools select { max-width: 88px; font-size: 0.75rem; }

.svvs .svvs-colorctl {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 34px;
	padding: 0 4px 0 6px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--sv-surface);
	box-sizing: border-box;
}
.svvs .svvs-colorctl:focus-within {
	border-color: var(--blue);
	box-shadow: 0 0 0 3px rgba(10, 134, 191, 0.16);
}
.svvs .svvs-colorctl button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 28px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--ink);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.svvs .svvs-colorctl__open { flex: 1; min-width: 0; text-align: left; }
.svvs .svvs-colorctl__open span { color: var(--muted); font-weight: 600; }
.svvs .svvs-colorctl__caret {
	width: 22px;
	justify-content: center;
	color: var(--muted);
	font-size: 0.75rem;
}
.svvs .svvs-field .svvs-colorctl input[data-hex] {
	width: auto;
	flex: 1;
	min-width: 0;
	height: 28px;
	margin: 0;
	padding: 0 2px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--ink);
	font: 600 0.82rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	letter-spacing: 0.02em;
}
.svvs .svvs-field .svvs-colorctl input[data-hex].is-bad { color: var(--red); }
.svvs-swatch {
	width: 22px;
	height: 22px;
	border-radius: 6px;
	border: 1px solid rgba(15, 23, 42, 0.22);
	box-sizing: border-box;
	display: block;
	flex: none;
	background-clip: padding-box;
}
.svvs-swatch.is-clear {
	background-color: #fff;
	background-image:
		linear-gradient(45deg, #d5dbe3 25%, transparent 25%),
		linear-gradient(-45deg, #d5dbe3 25%, transparent 25%),
		linear-gradient(45deg, transparent 75%, #d5dbe3 75%),
		linear-gradient(-45deg, transparent 75%, #d5dbe3 75%);
	background-size: 8px 8px;
	background-position: 0 0, 0 4px, 4px -4px, -4px 0;
}
.svvs-swatch.is-none { position: relative; background: var(--sv-surface); }
.svvs-swatch.is-none::after {
	content: "";
	position: absolute;
	left: 3px;
	right: 3px;
	top: 50%;
	height: 2px;
	margin-top: -1px;
	background: #98a2b3;
	transform: rotate(-45deg);
	border-radius: 1px;
}
.svvs-colorpop {
	position: fixed;
	z-index: 80;
	width: 232px;
	padding: 12px;
	box-sizing: border-box;
	background: var(--sv-surface);
	border: 1px solid #e6ebf2;
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(16, 24, 40, 0.16);
	color: var(--ink);
	font-family: Rubik, "Segoe UI", sans-serif;
}
.svvs-colorpop__title,
.svvs-colorpop__label {
	margin: 0 0 8px;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #6b7285;
}
.svvs-colorpop__label { margin: 10px 0 6px; }
.svvs-sv {
	position: relative;
	height: 128px;
	border-radius: 8px;
	cursor: crosshair;
	touch-action: none;
	overflow: hidden;
}
.svvs-sv:focus { outline: 2px solid #0a86bf; outline-offset: 2px; }
.svvs-sv__dot {
	position: absolute;
	width: 12px;
	height: 12px;
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
	transform: translate(-50%, -50%);
	pointer-events: none;
}
.svvs-colorpop .svvs-hue {
	display: block;
	width: 100%;
	height: 14px;
	margin: 10px 0 0;
	padding: 0;
	border: 0;
	border-radius: 99px;
	background: linear-gradient(90deg, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
}
.svvs-colorpop .svvs-hue::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 14px;
	height: 14px;
	border: 2px solid #1f2430;
	border-radius: 50%;
	background: var(--sv-surface);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.svvs-colorpop .svvs-hue::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border: 2px solid #1f2430;
	border-radius: 50%;
	background: var(--sv-surface);
}
.svvs-colorpop__hex { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.svvs-colorpop .svvs-popswatch { position: relative; width: 28px; height: 28px; flex: none; margin: 0; }
.svvs-colorpop .svvs-popswatch .svvs-swatch { position: absolute; inset: 0; width: 28px; height: 28px; pointer-events: none; }
.svvs-colorpop .svvs-popswatch input {
	width: 28px;
	height: 28px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	cursor: pointer;
}
.svvs-colorpop input[data-pophex] {
	flex: 1;
	height: 32px;
	min-width: 0;
	margin: 0;
	padding: 0 8px;
	border: 1px solid #e6ebf2;
	border-radius: 8px;
	background: var(--sv-surface);
	color: var(--ink);
	font: 600 0.82rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.svvs-colorpop input[data-pophex].is-bad { border-color: #e23b3b; color: #e23b3b; }
.svvs-colorpop input[data-pophex]:focus { outline: 2px solid #0a86bf; outline-offset: 1px; border-color: #0a86bf; }
.svvs-dots { display: flex; flex-wrap: wrap; gap: 6px; }
.svvs-dot {
	width: 18px;
	height: 18px;
	padding: 0;
	border: 1px solid rgba(15, 23, 42, 0.22);
	border-radius: 50%;
	cursor: pointer;
}
.svvs-dot:focus-visible { outline: 2px solid #0a86bf; outline-offset: 2px; }
.svvs-colorpop__none,
.svvs-colorpop__eye {
	display: block;
	width: 100%;
	height: 32px;
	margin: 8px 0 0;
	border: 1px solid #e6ebf2;
	border-radius: 8px;
	background: var(--sv-surface);
	color: var(--ink);
	font: 600 0.8rem/1 Rubik, "Segoe UI", sans-serif;
	cursor: pointer;
}
.svvs-colorpop__none:hover,
.svvs-colorpop__eye:hover,
.svvs-colorpop__none:focus-visible,
.svvs-colorpop__eye:focus-visible { border-color: #0a86bf; color: #0a86bf; }
.svvs .svvs-colorctl button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.svvs-dims__lab, .svvs-slide__label, .svvs-val__label {
	font-size: 0.78rem;
	color: var(--muted);
}
.svvs-dims__lab { margin: 0 0 6px; }
.svvs-dims__row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 12px; }
.svvs-dims__row.is-single { grid-template-columns: 1fr; }
.svvs-val, .svvs-slide__top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.svvs-val--row { margin: 0 0 12px; }
.svvs-val__k { width: 14px; flex: none; font-size: 0.72rem; font-weight: 700; color: var(--muted); }
.svvs-val__label, .svvs-slide__label { flex: 1; min-width: 0; }
.svvs-slide { margin: 0 0 14px; }
.svvs-slide__top { margin: 0 0 6px; }
.svvs-slide__reset {
	width: 18px;
	height: 18px;
	flex: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--muted);
	font-size: 0.85rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
}
.svvs-slide:hover .svvs-slide__reset.is-on,
.svvs-slide:focus-within .svvs-slide__reset.is-on,
.svvs-val:hover .svvs-slide__reset.is-on,
.svvs-val:focus-within .svvs-slide__reset.is-on {
	opacity: 1;
	pointer-events: auto;
}
.svvs-slide__reset:hover, .svvs-slide__reset:focus-visible { color: var(--blue); }
.svvs-val__pill, .svvs-slide__pill {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: 2px;
	width: 64px;
	max-width: 42%;
	height: 24px;
	flex: none;
	margin: 0;
	padding: 0 6px;
	box-sizing: border-box;
	border: 1px solid #dde3ea;
	border-radius: 7px;
	background: var(--sv-surface);
	cursor: text;
}
.svvs-val__pill:hover, .svvs-slide__pill:hover { border-color: #c5d0dc; }
.svvs-val__pill:focus-within, .svvs-slide__pill:focus-within {
	border-color: var(--blue);
	box-shadow: 0 0 0 3px rgba(10, 134, 191, 0.16);
}
.svvs-val__pill:has(input.is-bad), .svvs-slide__pill:has(input.is-bad) { border-color: var(--red); }
.svvs .svvs-val__pill input,
.svvs .svvs-slide__pill input,
.svvs-val__pill input,
.svvs-slide__pill input {
	width: 100%;
	min-width: 0;
	height: 20px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	text-align: right;
	color: var(--ink);
	font: 600 0.75rem/1 Rubik, "Segoe UI", sans-serif;
}
.svvs-val__pill i, .svvs-slide__pill i {
	flex: none;
	color: var(--muted);
	font-style: normal;
	font-size: 0.68rem;
	font-weight: 600;
}
.svvs-slide input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 16px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}
.svvs-slide input[type="range"]:focus { outline: none; }
.svvs-slide input[type="range"]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 8px; }
.svvs-slide input[type="range"]::-webkit-slider-runnable-track {
	height: 4px;
	border: 0;
	border-radius: 99px;
	background: linear-gradient(90deg, var(--blue) var(--fill, 0%), #e6ebf2 var(--fill, 0%));
}
.svvs-slide input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 14px;
	height: 14px;
	margin-top: -5px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--blue);
	box-shadow: 0 0 0 1px var(--blue);
}
.svvs-slide input[type="range"]:hover::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(10, 134, 191, 0.18); }
.svvs-slide input[type="range"]::-moz-range-track {
	height: 4px;
	border: 0;
	border-radius: 99px;
	background: #e6ebf2;
}
.svvs-slide input[type="range"]::-moz-range-progress {
	height: 4px;
	border-radius: 99px;
	background: var(--blue);
}
.svvs-slide input[type="range"]::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--blue);
	box-shadow: 0 0 0 1px var(--blue);
}

@media (max-width: 1280px) {
	.svvs-top { padding: 0 10px; gap: 8px; }
	.svvs-aspect > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
	.svvs-tlbtn span { display: none; }
}
.svvs-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.svvs-tplbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.svvs-chip {
	border: 0; background: var(--sv-elevated); color: var(--ink); border-radius: 999px;
	padding: 5px 10px; font-size: 0.75rem; font-weight: 600; cursor: pointer;
}
.svvs-chip.is-on { background: var(--blue); color: #fff; }
.svvs-tplgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 180px)); justify-content: start; gap: 8px; }
.svvs-tplcard {
	position: relative; display: flex; flex-direction: column; gap: 4px;
	border: 1px solid var(--line); border-radius: 10px; background: var(--sv-surface);
	padding: 6px; text-align: left; cursor: pointer;
}
.svvs-tplcard:hover, .svvs-tplcard:focus { border-color: #9fd0ea; outline: none; }
.svvs-tplcard canvas {
	width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; object-position: center;
	border-radius: 6px; background: #101820; display: block;
}
.svvs-tplcard strong {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden; font-size: 12px; line-height: 1.3; color: var(--ink);
}
.svvs-tplcard em { font-style: normal; font-size: 0.68rem; color: var(--muted); display: flex; gap: 6px; }
.svvs-tplcard .svvs-elcard__fav { position: absolute; top: 8px; right: 8px; opacity: 0; }
.svvs-tplcard:hover .svvs-elcard__fav,
.svvs-tplcard:focus-within .svvs-elcard__fav,
.svvs-tplcard .svvs-elcard__fav.is-on { opacity: 1; }
.svvs-tplcard__acts { display: flex; flex-wrap: wrap; gap: 4px; }
.svvs-tplcard__acts button {
	border: 0; background: var(--sv-elevated); color: var(--ink); border-radius: 6px;
	font-size: 0.68rem; font-weight: 600; padding: 3px 6px; cursor: pointer;
}
.svvs-note { color: #8a4b12; background: #fff6ea; border-radius: 8px; padding: 8px 10px; font-size: 0.78rem; }
.svvs-tpldialog {
	position: fixed; inset: 0; background: rgba(16, 24, 32, 0.35);
	display: flex; align-items: center; justify-content: center; z-index: 40;
}
.svvs-tpldialog[hidden] { display: none; }
.svvs-tpldialog__card {
	width: min(420px, calc(100% - 32px)); background: var(--sv-surface); border-radius: 14px;
	padding: 16px; box-shadow: 0 16px 40px rgba(16, 24, 32, 0.18);
}
.svvs-tpldialog__err { color: #9a3412; font-size: 0.8rem; }
.svvs-clip.is-comp { box-shadow: inset 0 3px 0 #118BC1; }

.svvs-speech { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.svvs-speech h3 { margin: 0; font-size: 12px; letter-spacing: 0.06em; }
.svvs-speech label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.svvs-speech select, .svvs-speech input { width: 100%; }
.svvs-speech__note { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.svvs-speech__actions { display: flex; flex-wrap: wrap; gap: 6px; }
.svvs-speech__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.svvs-speech__bar { height: 4px; border-radius: 4px; background: var(--sv-elevated); overflow: hidden; }
.svvs-speech__bar i { display: block; height: 100%; width: 40%; background: var(--sv-accent); }
.svvs-speech__bar.is-busy i { animation: svvs-speech-slide 1.1s ease-in-out infinite; }
.svvs-speech__bar.is-known i { animation: none; }
.svvs-speech__group { border: 1px solid var(--line); border-radius: 8px; padding: 8px; background: var(--sv-surface-soft); display: flex; flex-direction: column; gap: 6px; }
.svvs-speech__word { display: grid; grid-template-columns: 1fr 64px 64px 28px; gap: 4px; align-items: center; }
@keyframes svvs-speech-slide { from { transform: translateX(-120%); } to { transform: translateX(280%); } }

@media (prefers-reduced-motion: reduce) {
	.svvs-app, .svvs-app * {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

.svvs-libmain .svvs-studio__card { cursor: pointer; }
.svvs-libmain .svvs-studio__card[draggable="true"] { cursor: grab; }
.svvs-libmain .svvs-studio__card.is-on { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.svvs-studio__card--motion { border-style: dashed; }
.svvs-fxcard__peek, .svvs-fxcard__replay {
	position: absolute; top: 8px; right: 8px; z-index: 2; height: 22px; padding: 0 6px;
	border: 0; border-radius: 6px; background: rgba(16, 20, 26, 0.78); color: #d5e4f2;
	font-size: 10px; font-weight: 700; cursor: pointer; opacity: 0;
}
.svvs-fxcard:hover .svvs-fxcard__peek,
.svvs-fxcard:focus-within .svvs-fxcard__peek,
.svvs-fxcard:hover .svvs-fxcard__replay,
.svvs-fxcard:focus-within .svvs-fxcard__replay { opacity: 1; }
#svvs-studio-empty button { margin-left: 6px; border: 0; background: transparent; color: var(--sv-accent); font-weight: 700; cursor: pointer; }

.svvs-fx-alert { margin: 0; padding: 6px 12px; background: #fff6ea; color: #8a4b12; font-size: 0.78rem; }
.svvs-kf { border: 0; background: transparent; color: #7c6a9a; cursor: pointer; font-size: 0.72rem; line-height: 1; padding: 0 2px; }
.svvs-field .svvs-kf, .svvs-switch .svvs-kf { margin-left: 4px; }
.svvs-el4 { overflow-x: auto; margin: 4px 0 8px; }
.svvs-el4-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.svvs-el4-table th, .svvs-el4-table td { padding: 2px; vertical-align: top; }
.svvs-el4-table input[type="text"], .svvs-el4-table input[type="number"] { width: 64px; }
.svvs-el4-table button { margin-right: 2px; }

@media (max-width: 860px) {
	.svvs { display: flex; flex-direction: column; }
	.svvs-rail, .svvs-work, .svvs-tl, .svvs-tl-slot, .svvs-split, .svvs-top__center, .svvs-top__right { display: none; }
	.svvs-mobile { display: block; }
	.svvs-top { grid-column: auto; grid-row: auto; grid-template-columns: 1fr; height: auto; padding: 12px 16px; }
}

/* AI Tools studio. Scoped so the inspector, timeline, and player stay as they are. */
.svvs-catside button.svvs-ai-navbtn { white-space: normal; text-align: left; line-height: 1.25; }
.svvs-catside button.svvs-ai-navbtn.is-on {
	background: var(--sv-accent-soft);
	color: var(--sv-text);
	box-shadow: inset 3px 0 0 var(--sv-accent);
}
.svvs-catside button > svg,
.svvs-catside button > .svvs-catmark {
	display: block;
	width: 0;
	height: 0;
	opacity: 0;
	overflow: visible;
	flex: none;
	fill: none;
	stroke: currentColor;
	transition: opacity 0.2s ease, width 0.2s ease, height 0.2s ease;
}
.svvs-catmark {
	font-style: normal;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}
.svvs-catside button.svvs-cat-toggle {
	position: sticky;
	bottom: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	min-height: 32px;
	margin: auto 0 0 auto;
	padding: 0;
	border: 0;
	border-radius: 8px;
	color: var(--sv-text-muted);
	background: var(--sv-panel);
}
.svvs-catside button.svvs-cat-toggle > svg {
	display: block;
	width: 18px;
	height: 18px;
	opacity: 1;
	transform: none;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.svvs-catside button.svvs-cat-toggle:hover { background: var(--sv-hover); color: var(--ink); }
.svvs-librow.is-ai-icons > .svvs-split--cat { opacity: 0; pointer-events: none; transition: left 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.12s ease; }
.svvs-librow.is-ai-icons > .svvs-catside { align-items: center; }
.svvs-librow.is-ai-icons .svvs-catside button,
.svvs-librow.is-ai-icons .svvs-catside button.is-on,
.svvs-librow.is-ai-icons .svvs-catside button.svvs-ai-navbtn.is-on {
	position: relative;
	justify-content: center;
	width: 40px;
	height: 40px;
	min-height: 40px;
	padding: 0;
	margin: 0 0 4px;
	border-top: 0;
	border-radius: 8px;
	gap: 0;
	color: var(--muted);
	transition: padding 0.5s cubic-bezier(0.22, 1, 0.36, 1), gap 0.5s cubic-bezier(0.22, 1, 0.36, 1), color 0.22s ease, background 0.2s ease, height 0.5s cubic-bezier(0.22, 1, 0.36, 1), min-height 0.5s cubic-bezier(0.22, 1, 0.36, 1), width 0.5s cubic-bezier(0.22, 1, 0.36, 1), justify-content 0s;
}
.svvs-librow.is-ai-icons .svvs-catside .svvs-catlabel {
	opacity: 0;
	max-width: 0;
	transition: opacity 0.18s ease, max-width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.svvs-librow.is-ai-icons .svvs-catside .svvs-catgroup__subs {
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	align-items: center;
}
.svvs-librow.is-ai-icons .svvs-catside .svvs-chev,
.svvs-librow.is-ai-icons .svvs-catside__rule { margin-left: auto; margin-right: auto; }
.svvs-librow.is-ai-icons .svvs-catside .svvs-chev {
	width: 0;
	height: 0;
	opacity: 0;
	overflow: hidden;
	border: 0;
}
.svvs-librow.is-ai-icons .svvs-catside button.svvs-cat-toggle { margin: auto 0 0; color: var(--sv-text-muted); }
.svvs-librow.is-ai-icons .svvs-catside button > svg,
.svvs-librow.is-ai-icons .svvs-catside button > .svvs-catmark {
	width: 18px;
	height: 18px;
	opacity: 1;
	overflow: visible;
	color: inherit;
	fill: none;
	stroke: currentColor;
	transition: opacity 0.28s ease 0.14s, width 0.28s ease 0.14s, height 0.28s ease 0.14s;
}
.svvs-librow.is-ai-icons .svvs-catside button > .svvs-catmark {
	display: grid;
	place-items: center;
	font-size: 13px;
	line-height: 1;
	stroke: none;
}
.svvs-librow.is-ai-icons .svvs-catside button.is-on {
	background: var(--sv-accent-soft);
	color: var(--sv-accent);
}
.svvs-librow.is-ai-icons .svvs-catside button.svvs-cat-toggle > svg { transform: rotate(180deg); color: var(--sv-text-muted); }
@media (prefers-reduced-motion: reduce) {
	.svvs, .svvs-librow, .svvs-tools, .svvs-tool, .svvs-tool span, .svvs-catside, .svvs-catside button, .svvs-catside button > svg, .svvs-catside button > .svvs-catmark, .svvs-catside .svvs-catlabel, .svvs-split--cat {
		transition: none;
	}
}
#svvs-ai-body.svvs-libbody {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-height: 0;
}
.svvs-ai-tools {
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}
.svvs-ai-scroll {
	flex: 1;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	padding-bottom: 8px;
}
.svvs-ai-head { flex: 0 0 auto; padding: 2px 2px 10px; }
.svvs-ai-kicker { margin: 0 0 4px; color: var(--sv-accent); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.svvs-ai-head h2 { margin: 0 0 4px; font-size: 18px; line-height: 1.2; }
.svvs-ai-head p { margin: 0 0 10px; color: var(--sv-text-muted); font-size: 12px; }
.svvs-ai-progress { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.svvs-ai-step {
	display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
	min-width: 0; padding: 6px; border: 1px solid var(--sv-border); border-radius: 8px;
	background: transparent; color: var(--sv-text-muted); font-size: 11px; font-weight: 650; cursor: pointer;
}
.svvs-ai-step span {
	width: 18px; height: 18px; border-radius: 99px; display: grid; place-items: center;
	background: var(--sv-elevated); color: var(--sv-text); font-size: 10px;
}
.svvs-ai-step.is-on, .svvs-ai-step[aria-current="step"] { color: var(--sv-text); border-color: var(--sv-accent); background: var(--sv-accent-soft); }
.svvs-ai-step:hover { background: var(--sv-hover); }
.svvs-ai-lead, .svvs-ai-note, .svvs-ai-label { margin: 0 0 10px; color: var(--sv-text-muted); font-size: 12px; line-height: 1.4; }
.svvs-ai-label { color: var(--sv-text); font-weight: 650; }
.svvs-ai-note.is-error { color: #ffb4b4; }
.svvs-ai-note.is-warn { color: #e7d48a; }
.svvs-ai-note.is-ok { color: #b7e3c4; }
.svvs-ai-note a { color: var(--sv-accent); }
.svvs-ai-field { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; color: var(--sv-text-muted); font-size: 12px; min-width: 0; }
.svvs-ai-field input, .svvs-ai-field select, .svvs-ai-field textarea {
	width: 100%; max-width: 100%; box-sizing: border-box; height: 36px; margin: 0; padding: 0 10px;
	border: 1px solid var(--sv-border); border-radius: 8px; background: var(--sv-input); color: var(--sv-text);
	font-family: Rubik, "Segoe UI", sans-serif; font-size: 13px; font-weight: 500;
}
.svvs-ai-field select[multiple] { height: auto; min-height: 96px; padding: 6px; }
.svvs-ai-field input:disabled { opacity: 0.55; }
.svvs-ai-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; margin: 0 0 10px; }
.svvs-ai-stack { display: flex; flex-direction: column; gap: 6px; margin: 0 0 10px; }
.svvs-ai-choice, .svvs-ai-check {
	display: flex; align-items: center; gap: 10px; min-width: 0; margin: 0 0 8px; padding: 8px 10px;
	border: 1px solid var(--sv-border); border-radius: 8px; background: var(--sv-input); color: var(--sv-text); cursor: pointer;
	font-family: Rubik, "Segoe UI", sans-serif; font-size: 13px; font-weight: 500;
}
.svvs-ai-check { background: transparent; border-color: transparent; padding: 4px 0; }
.svvs-ai-choice input, .svvs-ai-check input { flex: 0 0 auto; margin: 0; }
.svvs-ai-choice span, .svvs-ai-check span, .svvs-ai-choice strong {
	display: flex; flex-direction: column; min-width: 0; line-height: 1.25;
	font-family: inherit; font-size: 13px; font-weight: 500;
}
.svvs-ai-choice small { color: var(--sv-text-muted); }
.svvs-ai-choice:has(input:checked) { border-color: var(--sv-accent); background: var(--sv-accent-soft); }
.svvs-ai-choice:hover, .svvs-ai-card:hover { border-color: #4d6174; }
.svvs-ai-fold { margin: 0 0 8px; padding: 8px 10px; border: 1px solid var(--sv-border); border-radius: 10px; background: var(--sv-surface-soft); }
.svvs-ai-fold summary { cursor: pointer; color: var(--sv-text); font-weight: 650; }
.svvs-ai-matrix { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0 0 10px; }
.svvs-ai-card { min-width: 0; padding: 8px; border: 1px solid var(--sv-border); border-radius: 10px; background: var(--sv-elevated); }
.svvs-ai-card.is-on { border-color: var(--sv-accent); box-shadow: inset 0 0 0 1px var(--sv-accent); }
.svvs-ai-card.is-error { border-color: var(--red); }
.svvs-ai-card.is-warn { border-color: #c9a227; }
.svvs-ai-card__open {
	display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%;
	padding: 0; border: 0; background: transparent; color: var(--sv-text); text-align: left; cursor: pointer;
}
.svvs-ai-card__open span, .svvs-ai-status { color: var(--sv-text-muted); font-size: 12px; font-style: normal; font-weight: 650; }
.is-ready .svvs-ai-status { color: #8fd0a8; }
.is-warn .svvs-ai-status { color: #e7d48a; }
.is-error .svvs-ai-status { color: #ffb4b4; }
.svvs-ai-scene { margin: 0 0 10px; padding: 8px; border: 1px solid var(--sv-border); border-radius: 10px; }
.svvs-ai-scene header { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 8px; }
.svvs-ai-row, .svvs-ai-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.svvs-ai-row .svvs-btn, .svvs-ai-actions .svvs-btn { flex: 1 1 120px; white-space: nowrap; min-width: 0; }
.svvs-ai-actions {
	position: static; flex: 0 0 auto; z-index: 1; margin: 0; padding: 10px 0 0;
	background: var(--sv-panel); border-top: 1px solid var(--sv-border);
}
.svvs-ai-tools :focus-visible { outline: 2px solid var(--sv-accent); outline-offset: 2px; }
@container (max-width: 280px) {
	.svvs-ai-grid, .svvs-ai-progress { grid-template-columns: 1fr 1fr; }
}


/* CP-11 Smart Edit (AI Tools) — scrolls inside #svvs-ai-body (which stays overflow:hidden for Campaign). */
.svvs-smart {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	min-width: 0;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	padding-bottom: 12px;
	-webkit-overflow-scrolling: touch;
}
.svvs-smart__steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.svvs-smart__step {
	flex: 1 1 72px; min-width: 0; padding: 6px 8px; border: 1px solid var(--sv-border);
	border-radius: 8px; background: var(--sv-elevated); color: var(--sv-text-muted); cursor: pointer;
}
.svvs-smart__step.is-on { color: var(--sv-text); border-color: var(--sv-accent); box-shadow: inset 0 0 0 1px var(--sv-accent); }
.svvs-smart__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.svvs-smart__actions .svvs-btn {
	flex: 1 1 110px;
	min-width: 0;
	justify-content: center;
	height: auto;
	min-height: 34px;
	padding: 7px 10px;
	border-radius: 8px;
	border-color: var(--sv-border);
	background: var(--sv-elevated);
	color: var(--sv-text);
	box-sizing: border-box;
}
.svvs-smart__actions .svvs-btn--ghost {
	background: var(--sv-elevated);
	border-color: var(--sv-border);
	color: var(--sv-text-muted);
}
.svvs-smart__actions .svvs-btn--ghost:hover {
	background: var(--sv-hover);
	color: var(--sv-text);
	border-color: var(--sv-border);
}
.svvs-smart__actions .svvs-btn--primary {
	background: var(--blue);
	border-color: var(--blue);
	color: #fff;
}
.svvs-smart__row .svvs-btn--tiny {
	flex: none;
	height: 28px;
	min-height: 28px;
	padding: 0 8px;
	font-size: 11px;
	border-radius: 7px;
}
.svvs-smart__list { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow: auto; }
.svvs-smart__row {
	display: grid; grid-template-columns: auto 1fr auto auto; gap: 6px; align-items: center;
	padding: 6px 8px; border: 1px solid var(--sv-border); border-radius: 8px; background: var(--sv-surface-soft);
	min-width: 0;
}
.svvs-smart__row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.svvs-smart__row input[type="number"] { width: 4.5rem; max-width: 100%; }
.svvs-smart__note, .svvs-smart__prog { font-size: 12px; color: var(--sv-text-muted); margin: 0 0 8px; }
.svvs-smart__apply .svvs-field select[multiple] { min-height: 88px; }
.svvs-smart__preflight {
	margin: 0 0 10px; padding: 8px 10px; border: 1px solid var(--sv-border); border-radius: 8px;
	background: var(--sv-surface-soft); color: var(--sv-text-muted); font-size: 11px; line-height: 1.4;
	white-space: pre-wrap; max-height: 160px; overflow: auto;
}
.svvs-smart__confirm { margin: 8px 0 12px; padding: 8px; border: 1px solid var(--sv-accent); border-radius: 8px; }
.svvs-smart__check span { display: flex; align-items: center; gap: 8px; color: var(--sv-text-muted); }
.svvs-tl__smart-cut {
	position: absolute; top: 0; width: 0; font-style: normal; font-size: 9px; line-height: 1;
	transform: translateX(-50%); pointer-events: none; z-index: 2;
}
.svvs-tl__smart-sil {
	position: absolute; top: 10px; height: 4px; background: rgba(255, 180, 120, 0.45);
	border-radius: 2px; pointer-events: none; z-index: 1;
}
.svvs-tool__pro {
	position: absolute;
	top: 4px;
	right: 4px;
	font-style: normal;
	font-size: 9px;
	line-height: 1;
	padding: 2px 4px;
	border-radius: 4px;
	background: #2a2114;
	color: #f0c36a;
}
.svvs-gate {
	position: fixed;
	inset: 0;
	z-index: 80;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(6, 8, 12, 0.72);
}
.svvs-gate__dialog {
	width: min(420px, calc(100% - 32px));
	padding: 22px;
	border-radius: 12px;
	background: #151b26;
	color: #e8eef8;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.svvs-gate__dialog h3 { margin: 0 0 8px; font-size: 20px; }
.svvs-gate__dialog p { margin: 0 0 16px; color: #b7c3d6; }
.svvs-gate__brand { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: #f0c36a; }
.svvs-gate__close {
	float: right;
	border: 0;
	background: transparent;
	color: #e8eef8;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}