.ttw-app {
	--ttw-primary: #e11d48;
	--ttw-primary-dark: #be123c;
	--ttw-bg: #ffffff;
	--ttw-bg-soft: #f6f6f8;
	--ttw-border: #e4e4ea;
	--ttw-text: #18181b;
	--ttw-muted: #6b6b76;
	--ttw-error: #dc2626;
	--ttw-radius: 14px;
	max-width: 760px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--ttw-text);
	line-height: 1.5;
}
.ttw-app * { box-sizing: border-box; }

.ttw-card {
	background: var(--ttw-bg);
	border: 1px solid var(--ttw-border);
	border-radius: var(--ttw-radius);
	padding: 22px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.ttw-input-row { display: flex; gap: 8px; }
.ttw-input {
	flex: 1;
	min-width: 0;
	font-size: 1rem;
	padding: 14px 16px;
	border: 1.5px solid var(--ttw-border);
	border-radius: 10px;
	background: var(--ttw-bg-soft);
	color: var(--ttw-text);
	outline: none;
}
.ttw-input:focus { border-color: var(--ttw-primary); background: var(--ttw-bg); }
.ttw-paste {
	padding: 0 16px;
	border: 1.5px solid var(--ttw-border);
	border-radius: 10px;
	background: var(--ttw-bg);
	color: var(--ttw-text);
	font-weight: 600;
	cursor: pointer;
}
.ttw-paste:hover { border-color: var(--ttw-primary); }

.ttw-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0; }
.ttw-opt { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; color: var(--ttw-muted); font-weight: 600; }
.ttw-select {
	padding: 9px 10px;
	border: 1px solid var(--ttw-border);
	border-radius: 8px;
	background: var(--ttw-bg-soft);
	color: var(--ttw-text);
	font-size: 0.9rem;
}

.ttw-go, .ttw-download {
	display: block;
	width: 100%;
	padding: 14px 20px;
	border: 0;
	border-radius: 10px;
	background: var(--ttw-primary);
	color: #fff !important;
	font-size: 1rem;
	font-weight: 700;
	text-align: center;
	text-decoration: none !important;
	cursor: pointer;
	transition: background 0.15s;
}
.ttw-go:hover, .ttw-download:hover { background: var(--ttw-primary-dark); }
.ttw-go:disabled { opacity: 0.6; cursor: progress; }

.ttw-status { font-size: 0.9rem; margin-top: 12px; min-height: 1px; }
.ttw-status:empty { margin: 0; }
.ttw-status-error { color: var(--ttw-error); font-weight: 600; }

.ttw-preview { display: flex; gap: 14px; align-items: center; margin-top: 18px; padding: 12px; background: var(--ttw-bg-soft); border-radius: 10px; }
.ttw-preview[hidden], .ttw-progress[hidden], .ttw-result[hidden] { display: none; }
.ttw-thumb { width: 120px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.ttw-meta { min-width: 0; }
.ttw-title { font-weight: 700; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ttw-sub { color: var(--ttw-muted); font-size: 0.82rem; margin-top: 2px; }

.ttw-progress { margin-top: 16px; }
.ttw-progress-bar { height: 8px; background: var(--ttw-border); border-radius: 999px; overflow: hidden; }
.ttw-progress-fill { height: 100%; width: 0; background: var(--ttw-primary); border-radius: 999px; transition: width 0.25s ease; }
.ttw-progress-label { font-size: 0.8rem; color: var(--ttw-muted); margin-top: 6px; font-variant-numeric: tabular-nums; }

.ttw-result { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.ttw-audio { width: 100%; }
.ttw-spec { font-size: 0.82rem; color: var(--ttw-muted); text-align: center; }

@media (max-width: 560px) {
	.ttw-card { padding: 16px; }
	.ttw-options { grid-template-columns: 1fr 1fr; }
	.ttw-options .ttw-opt:last-child { grid-column: span 2; }
	.ttw-thumb { width: 96px; }
}

@media (prefers-color-scheme: dark) {
	.ttw-app:not([data-theme="light"]) {
		--ttw-bg: #17171c;
		--ttw-bg-soft: #0f0f13;
		--ttw-border: #2c2c35;
		--ttw-text: #f4f4f6;
		--ttw-muted: #a1a1ad;
		--ttw-error: #f87171;
	}
}
.ttw-app[data-theme="dark"] {
	--ttw-bg: #17171c;
	--ttw-bg-soft: #0f0f13;
	--ttw-border: #2c2c35;
	--ttw-text: #f4f4f6;
	--ttw-muted: #a1a1ad;
	--ttw-error: #f87171;
}