:root {
	--bg: #0f0f0f;
	--panel: #181818;
	--panel2: #202020;
	--text: #f1f1f1;
	--muted: #aaa;
	--border: #303030;
	--accent: #ff0033;
	--danger: #ff4d4d;
}
* { box-sizing: border-box; }
body {
	margin: 0;
	font-family: Arial, sans-serif;
	background: var(--bg);
	color: var(--text);
}
a { color: inherit; text-decoration: none; }
button, .button {
	border: 0;
	background: var(--text);
	color: #111;
	padding: 10px 14px;
	border-radius: 999px;
	cursor: pointer;
	font-weight: 700;
	display: inline-block;
}
button.danger { background: var(--danger); color: white; }
input, textarea, select {
	width: 100%;
	background: #121212;
	border: 1px solid var(--border);
	color: var(--text);
	border-radius: 10px;
	padding: 11px 12px;
	outline: none;
}
textarea { resize: vertical; }
label { display: grid; gap: 7px; color: var(--muted); }
.topbar {
	position: sticky;
	top: 0;
	z-index: 5;
	display: grid;
	grid-template-columns: 180px minmax(220px, 1fr) auto;
	gap: 20px;
	align-items: center;
	padding: 12px 22px;
	background: rgba(15, 15, 15, 0.96);
	border-bottom: 1px solid var(--border);
}
.logo { font-size: 24px; font-weight: 900; letter-spacing: -1px; }
.logo::first-letter { color: var(--accent); }
.top-search { display: flex; gap: 8px; max-width: 680px; }
.top-search button { padding: 9px 16px; }
nav { display: flex; align-items: center; gap: 14px; }
.nav-form { margin: 0; }
.nav-form button { background: var(--panel2); color: var(--text); }
.page { padding: 24px; max-width: 1480px; margin: 0 auto; }
.hero { display: grid; gap: 14px; margin-bottom: 22px; }
.hero h1 { margin: 0; font-size: 32px; }
.search-form { display: flex; gap: 10px; max-width: 700px; }
.video-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 22px 16px;
}
.video-card { display: grid; gap: 8px; }
.video-card img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: var(--panel2);
	border-radius: 14px;
}
.video-card strong { font-size: 16px; line-height: 1.35; }
.video-card span, .video-card small { color: var(--muted); }
.panel, .auth-card {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 18px;
	padding: 24px;
	max-width: 980px;
	margin: 0 auto;
}
.auth-card { max-width: 460px; }
.auth-card form, .upload-panel form { display: grid; gap: 16px; }
.form-message { min-height: 22px; color: var(--muted); }
.progress-wrap { height: 12px; background: #111; border-radius: 99px; overflow: hidden; margin-top: 16px; }
#upload-progress { width: 0; height: 100%; background: var(--accent); transition: width 0.2s; }
.channel-head { display: grid; gap: 12px; margin-bottom: 24px; }
.channel-banner { height: 180px; border-radius: 18px; background: linear-gradient(135deg, #202020, #3a0d17); }
pre { white-space: pre-wrap; background: #111; border: 1px solid var(--border); padding: 14px; border-radius: 12px; overflow: auto; }
@media (max-width: 760px) {
	.topbar { grid-template-columns: 1fr; }
	nav { flex-wrap: wrap; }
	.page { padding: 14px; }
	.search-form, .top-search { flex-direction: column; }
}