:root {
	--bg: #0B0E14;
	--panel: #131826;
	--line: #232B3D;
	--text: #D7DEEC;
	--dim: #7E8AA6;
	--accent: #FFB347;
	--accent2: #6CC0FF;
	--danger: #FF6B6B;
}
html {
	color-scheme: dark;
}
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: system-ui, sans-serif;
	line-height: 1.5;
}
header.site {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 24px;
	border-bottom: 1px solid var(--line);
}
header.site a {
	color: var(--text);
	text-decoration: none;
}
header.site .logo {
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--accent);
}
header.site nav a {
	margin-left: 18px;
	color: var(--dim);
}
header.site nav a:hover {
	color: var(--text);
}
main {
	max-width: 1200px;
	margin: 0 auto;
	padding: 28px 24px 80px;
}
h1 {
	margin: 0 0 6px;
}
p.intro {
	color: var(--dim);
	max-width: 62ch;
	margin-top: 0;
}
button {
	background: var(--accent);
	color: #1A1205;
	border: 0;
	border-radius: 8px;
	padding: 9px 18px;
	font-weight: 600;
	cursor: pointer;
}
button:hover {
	filter: brightness(1.1);
}
button.ghost {
	background: transparent;
	color: var(--dim);
	border: 1px solid var(--line);
}
button.ghost:hover {
	color: var(--text);
}
button.danger {
	background: transparent;
	color: var(--danger);
	border: 1px solid var(--line);
}
input,
select {
	background: var(--panel);
	color: var(--text);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 8px 12px;
	font: inherit;
}
small {
	color: var(--dim);
}
section.notfound {
	padding: 32px 0 64px;
}
section.notfound h1 {
	font-size: 4rem;
	color: var(--accent);
	margin: 0 0 8px;
}
section.notfound a.back {
	display: inline-block;
	margin-top: 10px;
	background: var(--accent);
	color: #1A1205;
	border-radius: 8px;
	padding: 9px 18px;
	font-weight: 600;
	text-decoration: none;
}
section.notfound a.back:hover {
	filter: brightness(1.1);
}
body.editor main {
	max-width: none;
	padding: 0;
	height: 100dvh;
}
body.editor header.site {
	display: none;
}
div#editor {
	display: flex;
	flex-direction: column;
	height: 100%;
}
header.ed-top {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 14px;
	border-bottom: 1px solid var(--line);
	background: var(--panel);
}
header.ed-top a.ed-back {
	color: var(--dim);
	text-decoration: none;
	font-size: 1.3em;
}
header.ed-top a.ed-back:hover {
	color: var(--text);
}
header.ed-top #ed-title {
	flex: 1;
	max-width: 380px;
	font-weight: 600;
}
header.ed-top #ed-status {
	color: var(--dim);
	font-size: .85em;
	min-width: 70px;
}
header.ed-top .ed-actions {
	margin-left: auto;
	display: flex;
	gap: 8px;
	align-items: center;
}
header.ed-top .ed-actions a.btn {
	background: var(--accent);
	color: #1A1205;
	border-radius: 8px;
	padding: 7px 14px;
	font-weight: 600;
	text-decoration: none;
	font-size: .9em;
}
div.ed-main {
	flex: 1;
	display: grid;
	grid-template-columns: 230px 1fr 260px;
	grid-template-rows: minmax(0, 1fr);
	min-height: 0;
	overflow: hidden;
}
aside.ed-library,
aside.ed-props {
	background: var(--panel);
	border-right: 1px solid var(--line);
	overflow-y: auto;
	min-height: 0;
	padding: 12px;
}
aside.ed-library h3,
aside.ed-props h3 {
	margin: 0 0 10px;
	font-size: .95em;
	color: var(--dim);
}
aside.ed-props {
	border-right: 0;
	border-left: 1px solid var(--line);
}
.ed-file {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px;
	border: 1px solid var(--line);
	border-radius: 8px;
	margin-bottom: 8px;
	background: var(--bg);
	cursor: pointer;
}
.ed-file:hover {
	border-color: var(--accent2);
}
.ed-file img.thumb {
	width: 52px;
	height: 34px;
	object-fit: cover;
	border-radius: 4px;
	background: #000;
}
.ed-file img.thumb.wave {
	object-fit: fill;
}
.ed-file .icon-type {
	width: 52px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
	border-radius: 4px;
	color: var(--accent2);
	font-size: .7em;
	font-weight: 700;
}
.ed-file .meta {
	flex: 1;
	min-width: 0;
	font-size: .78em;
}
.ed-file .meta div.name {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ed-file .meta small {
	color: var(--dim);
}
.ed-file button {
	font-size: .75em;
	padding: 4px 8px;
}
label.ed-upload {
	display: block;
	text-align: center;
	padding: 10px;
	border: 1px dashed var(--line);
	border-radius: 8px;
	color: var(--dim);
	cursor: pointer;
}
label.ed-upload:hover {
	color: var(--text);
	border-color: var(--accent);
}
div.ed-rec {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
}
div.ed-rec select {
	flex: 1;
	background: var(--bg);
	color: var(--text);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 4px 6px;
	font-size: .78em;
}
div.ed-rec label.ed-recmic {
	display: flex;
	align-items: center;
	gap: 3px;
	color: var(--dim);
	font-size: .75em;
	cursor: pointer;
}
div.ed-rec label.ed-recmic input {
	accent-color: var(--accent);
}
button#ed-record {
	width: 100%;
	margin-top: 8px;
}
button#ed-record .recording {
	color: var(--danger);
	border-color: var(--danger);
}
#ed-reclive {
	text-align: center;
	color: var(--danger);
	font-size: .8em;
	font-variant-numeric: tabular-nums;
	min-height: 1em;
	margin-top: 4px;
}
div.ed-stagewrap {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #05070C;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	padding: 14px;
}
aside.ed-props img.m-preview,
aside.ed-props video.m-preview {
	width: 100%;
	border-radius: 8px;
	background: #000;
	margin-bottom: 6px;
}
aside.ed-props img.m-wave {
	height: 60px;
}
aside.ed-props audio.m-audio {
	width: 100%;
	margin-bottom: 6px;
}
aside.ed-props label.p {
	display: block;
	font-size: .78em;
	color: var(--dim);
	margin: 8px 0 2px;
}
aside.ed-props label.ed-check {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: .78em;
	color: var(--dim);
	margin: 10px 0 4px;
	cursor: pointer;
}
aside.ed-props label.ed-check input {
	width: auto;
	accent-color: var(--accent);
}
aside.ed-props input,
aside.ed-props select,
aside.ed-props textarea {
	width: 100%;
	padding: 6px 8px;
	font-size: .85em;
	box-sizing: border-box;
}
aside.ed-props .p-text {
	resize: vertical;
	min-height: 2.6em;
	font-family: inherit;
}
aside.ed-props .p-color {
	height: 32px;
	padding: 2px;
	cursor: pointer;
}
aside.ed-props .row2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
aside.ed-props button.danger {
	margin-top: 14px;
	width: 100%;
}
aside.ed-props .hint {
	font-size: .75em;
	color: var(--dim);
	margin-top: 10px;
}
aside.ed-props button.p-transcribe {
	width: 100%;
	margin-top: 10px;
}
aside.ed-props button.p-dub {
	width: 100%;
	margin-top: 8px;
}
aside.ed-props .dub-row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 4px;
	margin: 4px 0;
}
aside.ed-props .dub-row input,
aside.ed-props .dub-row select {
	font-size: .78em;
	padding: 4px 6px;
}
aside.ed-props .alt-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 4px 0 6px;
}
aside.ed-props .alt-row {
	display: grid;
	grid-template-columns: 52px 1fr 26px;
	gap: 4px;
	align-items: center;
}
aside.ed-props .alt-row input,
aside.ed-props .alt-row select {
	font-size: .78em;
	padding: 4px 6px;
}
aside.ed-props .alt-row button.alt-del {
	padding: 3px;
	font-size: .8em;
	background: transparent;
	color: var(--dim);
	border: 1px solid var(--line);
}
aside.ed-props button.alt-add {
	background: transparent;
	color: var(--accent2);
	border: 1px dashed var(--line);
	font-size: .78em;
	padding: 5px 8px;
	font-weight: 600;
}
div.ed-bottom {
	border-top: 1px solid var(--line);
	background: var(--panel);
	padding: 8px 14px 12px;
}
div.ed-bottom .ed-transport {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 6px;
}
div.ed-bottom .ed-transport #ed-play {
	width: 34px;
	height: 30px;
	padding: 0;
}
div.ed-bottom .ed-transport #ed-time {
	font-variant-numeric: tabular-nums;
	color: var(--dim);
	font-size: .85em;
}
#ed-timeline {
	position: relative;
	overflow-x: hidden;
	user-select: none;
}
#ed-ruler {
	position: relative;
	height: 20px;
	margin-left: 130px;
	border-bottom: 1px solid var(--line);
	cursor: pointer;
}
#ed-ruler .tick {
	position: absolute;
	top: 0;
	height: 100%;
	border-left: 1px solid var(--line);
	padding-left: 3px;
	font-size: .65em;
	color: var(--dim);
	pointer-events: none;
}
#ed-tracks {
	max-height: 170px;
	overflow-y: auto;
	overflow-x: hidden;
	position: relative;
}
.tl-row {
	display: flex;
	height: 26px;
	align-items: center;
	border-bottom: 1px solid rgba(35,43,61,.5);
}
.tl-row .tl-label {
	width: 130px;
	flex: none;
	font-size: .72em;
	color: var(--dim);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-right: 8px;
	box-sizing: border-box;
}
.tl-row .tl-lane {
	position: relative;
	flex: 1;
	height: 100%;
}
.tl-block {
	position: absolute;
	top: 3px;
	bottom: 3px;
	background: linear-gradient(180deg, #2A3A5C, #1E2B45);
	border: 1px solid #3B5484;
	border-radius: 5px;
	cursor: grab;
	font-size: .68em;
	color: var(--text);
	padding: 1px 6px;
	white-space: nowrap;
	overflow: hidden;
	box-sizing: border-box;
}
.tl-block .audio {
	background: linear-gradient(180deg, #2C4A3A, #1D3328);
	background-size: 100% 100%;
	border-color: #3E6B52;
	cursor: pointer;
}
.tl-block .video {
	background: linear-gradient(180deg, #4A3A2C, #33281D);
	border-color: #6B563E;
	cursor: pointer;
}
.tl-block .text {
	background: linear-gradient(180deg, #46345C, #2F2340);
	border-color: #5E477E;
}
.tl-block .sel {
	border-color: var(--accent);
	box-shadow: 0 0 0 1px var(--accent);
}
.tl-block .tl-resize {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 8px;
	cursor: ew-resize;
}
#ed-playhead {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 130px;
	width: 1px;
	background: var(--accent);
	pointer-events: none;
	z-index: 5;
}
#ed-playhead::before {
	content: '';
	position: absolute;
	top: 0;
	left: -4px;
	border: 5px solid transparent;
	border-top-color: var(--accent);
}
#ed-genpanel {
	display: none;
	position: fixed;
	right: 12px;
	top: 60px;
	width: 380px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 12px;
	z-index: 51;
	box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
#ed-genpanel.open {
	display: block;
}
#ed-genpanel .ed-subhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	border-bottom: 1px solid var(--line);
}
#ed-genpanel .ed-subhead h3 {
	margin: 0;
}
#ed-genpanel .gen-body {
	padding: 12px 14px;
}
#ed-genpanel .gen-body label.p {
	display: block;
	font-size: .78em;
	color: var(--dim);
	margin: 10px 0 2px;
}
#ed-genpanel .gen-body textarea,
#ed-genpanel .gen-body select,
#ed-genpanel .gen-body input {
	width: 100%;
	padding: 6px 8px;
	font: inherit;
	font-size: .85em;
	box-sizing: border-box;
	background: var(--bg);
	color: var(--text);
	border: 1px solid var(--line);
	border-radius: 6px;
}
#ed-genpanel .gen-body textarea {
	resize: vertical;
}
#ed-genpanel .gen-body .gen-row {
	display: grid;
	grid-template-columns: 1fr 90px;
	gap: 8px;
}
#ed-genpanel .gen-body button {
	width: 100%;
	margin-top: 12px;
}
#ed-genpanel .gen-body .hint {
	font-size: .75em;
	color: var(--dim);
	margin-top: 8px;
}
#ed-subpanel {
	display: none;
	position: fixed;
	right: 12px;
	top: 60px;
	bottom: 230px;
	width: 380px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 12px;
	z-index: 50;
	flex-direction: column;
	box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
#ed-subpanel.open {
	display: flex;
}
#ed-subpanel .ed-subhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	border-bottom: 1px solid var(--line);
}
#ed-subpanel .ed-subhead h3 {
	margin: 0;
}
#ed-subpanel .ed-subhead .ed-subhead-actions {
	display: flex;
	gap: 6px;
}
#ed-subpanel .sub-tools {
	display: grid;
	grid-template-columns: 1fr 1fr auto auto;
	gap: 6px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--line);
}
#ed-subpanel .sub-tools select,
#ed-subpanel .sub-tools input {
	font-size: .8em;
	padding: 5px 8px;
}
#ed-subpanel .sub-tools button,
#ed-subpanel .sub-tools a {
	font-size: .8em;
	padding: 5px 10px;
}
#ed-subpanel .sub-tools a#ed-srt {
	color: var(--accent2);
	border: 1px solid var(--line);
	border-radius: 8px;
	text-decoration: none;
	display: flex;
	align-items: center;
}
#ed-subpanel #ed-sublist {
	overflow-y: auto;
	padding: 10px 14px;
	flex: 1;
}
#ed-subpanel .sub-row {
	display: grid;
	grid-template-columns: 58px 58px 1fr;
	gap: 6px;
	margin-bottom: 6px;
}
#ed-subpanel .sub-row input {
	font-size: .78em;
	padding: 4px 6px;
}
#ed-subpanel .sub-empty {
	color: var(--dim);
	font-size: .85em;
}
form.create {
	display: flex;
	gap: 10px;
	margin: 18px 0 26px;
	max-width: 480px;
}
form.create input {
	flex: 1;
}
div.cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
}
div.card {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 16px 18px;
}
div.card h2 {
	margin: 0 0 4px;
	font-size: 1.1em;
}
div.card .actions {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}
div.card a.btn {
	background: var(--accent);
	color: #1A1205;
	border-radius: 8px;
	padding: 7px 14px;
	font-weight: 600;
	text-decoration: none;
	font-size: .92em;
}
div.card button.confirm {
	background: var(--danger);
	color: #fff;
	border-color: var(--danger);
}