*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
 html, body {
 	width: 100%;
 	height: 100%;
 	overflow: hidden;
 	background: #000;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 	color: #fff;
 	-webkit-tap-highlight-color: transparent;
 	user-select: none;
 }
 
 #app {
 	width: 100%;
 	height: 100%;
 	position: relative;
 	overflow: hidden;
 }
 
 /* Feed */
 .feed {
 	width: 100%;
 	height: 100%;
 	overflow-y: scroll;
 	scroll-snap-type: y mandatory;
 	scroll-behavior: smooth;
 	-webkit-overflow-scrolling: touch;
 }
 .feed::-webkit-scrollbar { display: none; }
 
 .video-item {
 	position: relative;
 	width: 100%;
 	height: 100%;
 	scroll-snap-align: start;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	overflow: hidden;
 	background: #000;
 }
 
 .video-item video {
 	width: 100%;
 	height: 100%;
 	object-fit: contain;
 }
 
 .video-item .video-info {
 	position: absolute;
 	bottom: 0;
 	left: 0;
 	right: 0;
 	padding: 60px 16px 20px;
 	background: linear-gradient(transparent, rgba(0,0,0,0.7));
 	pointer-events: none;
 }
 
 .video-item .video-info h3 {
 	font-size: 16px;
 	font-weight: 600;
 	margin-bottom: 4px;
 	text-shadow: 0 1px 2px rgba(0,0,0,0.5);
 }
 
 .video-item .video-info p {
 	font-size: 13px;
 	color: rgba(255,255,255,0.8);
 	text-shadow: 0 1px 2px rgba(0,0,0,0.5);
 	display: -webkit-box;
 	-webkit-line-clamp: 2;
 	-webkit-box-orient: vertical;
 	overflow: hidden;
 }
 
 .video-item .video-index {
 	position: absolute;
 	top: 12px;
 	right: 12px;
 	font-size: 12px;
 	color: rgba(255,255,255,0.6);
 	background: rgba(0,0,0,0.4);
 	padding: 2px 8px;
 	border-radius: 10px;
 	pointer-events: none;
 }
 
 .video-item .play-indicator {
 	position: absolute;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
 	pointer-events: none;
 	opacity: 0;
 	transition: opacity 0.2s;
 }
 .video-item.paused .play-indicator {
 	opacity: 1;
 }
 
 /* Mute Button */
 .mute-btn {
 	position: fixed;
 	top: 16px;
 	left: 16px;
 	z-index: 100;
 	width: 44px;
 	height: 44px;
 	border-radius: 50%;
 	background: rgba(0,0,0,0.5);
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	cursor: pointer;
 	transition: background 0.2s;
 	-webkit-backdrop-filter: blur(4px);
 	backdrop-filter: blur(4px);
 }
 .mute-btn:hover { background: rgba(0,0,0,0.7); }
 .mute-btn.muted svg { opacity: 0.6; }
 .mute-btn.muted::after {
 	content: '';
 	position: absolute;
 	width: 2px;
 	height: 24px;
 	background: rgba(255,255,255,0.6);
 	transform: rotate(45deg);
 	border-radius: 1px;
 }
 
 /* Upload Button */
 .upload-btn {
 	position: fixed;
 	top: 16px;
 	right: 16px;
 	z-index: 100;
 	width: 44px;
 	height: 44px;
 	border-radius: 50%;
 	background: rgba(0,0,0,0.5);
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	cursor: pointer;
 	transition: background 0.2s;
 	-webkit-backdrop-filter: blur(4px);
 	backdrop-filter: blur(4px);
 }
 .upload-btn:hover { background: rgba(0,0,0,0.7); }
 
 /* Upload Panel */
 .upload-panel {
 	position: fixed;
 	inset: 0;
 	z-index: 200;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 }
 .upload-panel.hidden { display: none; }
 
 .upload-overlay {
 	position: absolute;
 	inset: 0;
 	background: rgba(0,0,0,0.6);
 	-webkit-backdrop-filter: blur(8px);
 	backdrop-filter: blur(8px);
 }
 
 .upload-modal {
 	position: relative;
 	width: 90%;
 	max-width: 460px;
 	background: #1a1a1a;
 	border-radius: 16px;
 	padding: 24px;
 	z-index: 1;
 }
 
 .upload-modal-header {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 	margin-bottom: 20px;
 }
 .upload-modal-header h2 { font-size: 20px; font-weight: 600; }
 
 .close-btn {
 	background: none;
 	border: none;
 	color: #999;
 	font-size: 28px;
 	cursor: pointer;
 	padding: 4px 8px;
 	line-height: 1;
 }
 .close-btn:hover { color: #fff; }
 
 .upload-area {
 	border: 2px dashed #444;
 	border-radius: 12px;
 	padding: 32px 16px;
 	text-align: center;
 	cursor: pointer;
 	transition: border-color 0.2s, background 0.2s;
 	position: relative;
 }
 .upload-area:hover { border-color: #666; background: rgba(255,255,255,0.05); }
 .upload-area.dragover { border-color: #fe2c55; background: rgba(254,44,85,0.1); }
 .upload-area p { margin: 12px 0 4px; color: #ccc; font-size: 14px; }
 .upload-hint { font-size: 12px; color: #666; }
 .hidden-input { display: none; }
 
 .file-info {
 	display: flex;
 	align-items: center;
 	gap: 8px;
 	padding: 10px 14px;
 	background: #252525;
 	border-radius: 8px;
 	margin-top: 12px;
 	font-size: 13px;
 }
 .file-info.hidden { display: none; }
 .file-info span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .remove-file {
 	background: none;
 	border: none;
 	color: #999;
 	font-size: 20px;
 	cursor: pointer;
 	line-height: 1;
 	padding: 0 4px;
 }
 .remove-file:hover { color: #fff; }
 
 .upload-input {
 	width: 100%;
 	padding: 12px 14px;
 	margin-top: 12px;
 	border: 1px solid #333;
 	border-radius: 8px;
 	background: #252525;
 	color: #fff;
 	font-size: 14px;
 	outline: none;
 	transition: border-color 0.2s;
 }
 .upload-input:focus { border-color: #fe2c55; }
 .upload-input::placeholder { color: #666; }
 .upload-textarea { resize: vertical; min-height: 60px; font-family: inherit; }
 
 .upload-submit {
 	width: 100%;
 	padding: 12px;
 	margin-top: 16px;
 	border: none;
 	border-radius: 8px;
 	background: #fe2c55;
 	color: #fff;
 	font-size: 16px;
 	font-weight: 600;
 	cursor: pointer;
 	transition: background 0.2s;
 }
 .upload-submit:hover { background: #e02647; }
 .upload-submit:disabled { background: #555; cursor: not-allowed; }
 
 /* Loading */
 .loading {
 	position: fixed;
 	bottom: 40px;
 	left: 50%;
 	transform: translateX(-50%);
 	z-index: 50;
 }
 .loading.hidden { display: none; }
 .spinner {
 	width: 32px;
 	height: 32px;
 	border: 3px solid rgba(255,255,255,0.2);
 	border-top-color: #fe2c55;
 	border-radius: 50%;
 	animation: spin 0.8s linear infinite;
 }
 @keyframes spin { to { transform: rotate(360deg); } }
 
 /* Empty State */
 .empty-state {
 	position: absolute;
 	top: 50%;
 	left: 50%;
 	transform: translate(-50%, -50%);
 	text-align: center;
 	color: #666;
 }
 .empty-state svg { margin-bottom: 16px; }
 .empty-state p { font-size: 14px; margin-top: 8px; }
 
 /* Responsive */
 @media (max-width: 480px) {
 	.upload-modal { width: 95%; padding: 20px; }
 	.video-item .video-info h3 { font-size: 14px; }
 	.video-item .video-info p { font-size: 12px; }
 }