* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, Segoe UI, Roboto, sans-serif; background: #0f0f0f; color: #f1f1f1; }
a { color: inherit; text-decoration: none; }

.topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; border-bottom: 1px solid #272727; }
.brand { font-size: 20px; font-weight: 700; }

.btn { padding: 8px 18px; border-radius: 18px; border: none; cursor: pointer; font-size: 14px; }
.btn-primary { background: #3ea6ff; color: #0f0f0f; font-weight: 600; }

.grid-wrap { padding: 24px; }
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.card { display: block; }
.thumb-wrap { position: relative; aspect-ratio: 16/9; background: #272727; border-radius: 12px; overflow: hidden; }
.thumb-wrap img { width: 100%; height: 100%; object-fit: cover; }
.duration { position: absolute; bottom: 6px; right: 6px; background: rgba(0,0,0,.8); padding: 1px 6px; border-radius: 4px; font-size: 12px; }
.card-body { padding: 8px 2px; }
.card-title { font-size: 14px; font-weight: 600; line-height: 1.3; }
.card-meta { font-size: 12px; color: #aaa; margin-top: 4px; }
.empty { color: #aaa; }

.upload-wrap { max-width: 640px; margin: 40px auto; padding: 0 20px; }
.upload-wrap form { display: flex; flex-direction: column; gap: 16px; }
.upload-wrap label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: #ccc; }
.upload-wrap input[type=text] { padding: 10px; border-radius: 8px; border: 1px solid #333; background: #1f1f1f; color: #fff; }
.dropzone { border: 2px dashed #444; border-radius: 12px; padding: 30px; text-align: center; cursor: pointer; position: relative; }
.dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.progress-wrap { margin-top: 20px; }
.progress-bar { background: #272727; border-radius: 8px; height: 10px; overflow: hidden; }
#progressBar { height: 100%; width: 0%; background: #3ea6ff; transition: width .2s; }

.thumb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.thumb-option { position: relative; border-radius: 10px; overflow: hidden; cursor: pointer; border: 3px solid transparent; }
.thumb-option img { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; }
.thumb-option input { position: absolute; top: 8px; left: 8px; }
.thumb-option:has(input:checked) { border-color: #3ea6ff; }

.watch-wrap { max-width: 960px; margin: 0 auto; padding: 20px; }
.watch-wrap video { width: 100%; border-radius: 12px; background: #000; }