* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #0d1117; color: #e0e0e0; min-height: 100vh; }

/* Login */
.login-page { display: flex; align-items: center; justify-content: center; background: #0d1117; }
.login-card { background: #161b22; border: 1px solid #30363d; border-radius: 12px; padding: 40px; width: 400px; max-width: calc(100vw - 32px); }
.text-center { text-align: center; }
.login-title { font-size: 1.5rem; font-weight: 700; color: #818cf8; margin-bottom: 6px; }
.login-subtitle { color: #8b949e; font-size: 0.875rem; margin-bottom: 28px; }
.login-form { display: flex; flex-direction: column; gap: 0; }
.btn-login { width: 100%; padding: 10px; background: #6c63ff; color: #fff; border: none; border-radius: 6px; font-size: 0.9rem; font-weight: 600; cursor: pointer; margin-top: 8px; transition: background 0.15s; }
.btn-login:hover { background: #5a52e0; }
.error-msg { background: #2d1a1a; border: 1px solid #5a2a2a; color: #ff6b6b; padding: 10px 14px; border-radius: 6px; font-size: 14px; margin-bottom: 16px; }

/* Forms */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; color: #8b949e; margin-bottom: 6px; font-weight: 500; }
.form-group input[type="email"],
.form-group input[type="password"] { width: 100%; background: #0d1117; border: 1px solid #30363d; border-radius: 6px; padding: 10px 12px; color: #e6edf3; font-size: 14px; }
.form-group input::placeholder { color: #484f58; }
.form-group input:focus { outline: none; border-color: #6c63ff; }
.radio-group { display: flex; flex-direction: column; gap: 8px; }
.radio-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio-label input { accent-color: #6c63ff; }
.checkbox-label { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.checkbox-label input { accent-color: #6c63ff; }
.hint { font-size: 12px; color: #555; margin-top: 4px; }

/* Buttons */
.btn-primary { background: #6c63ff; color: #fff; border: none; border-radius: 6px; padding: 10px 20px; font-size: 14px; cursor: pointer; width: 100%; }
.btn-primary:hover { background: #5a52e0; }
.btn-secondary { background: #2a2a2a; color: #ccc; border: 1px solid #3a3a3a; border-radius: 6px; padding: 10px 20px; font-size: 14px; cursor: pointer; }
.btn-secondary:hover { background: #333; }
.btn-logout { color: #888; text-decoration: none; font-size: 13px; }
.btn-logout:hover { color: #ccc; }
.btn-icon { background: #6c63ff; color: #fff; border: none; border-radius: 6px; padding: 6px 12px; font-size: 12px; cursor: pointer; }
.btn-icon:hover { background: #5a52e0; }
.btn-download { background: #2a6a2a; color: #6fce6f; border: none; border-radius: 6px; padding: 6px 12px; font-size: 12px; cursor: pointer; }
.btn-download:hover { background: #1d4d1d; }

/* Topbar */
.topbar { background: #161b22; border-bottom: 1px solid #30363d; padding: 0 24px; height: 52px; display: flex; align-items: center; justify-content: space-between; }
.topbar-left { display: flex; align-items: center; }
.topbar-right { display: flex; align-items: center; }
.app-title { font-size: 15px; font-weight: 700; color: #818cf8; }
.app-version { font-size: 11px; color: #484f58; margin-left: 8px; }

/* Container */
.container { max-width: 1100px; margin: 0 auto; padding: 28px 24px; }
.page-header { margin-bottom: 24px; }
.page-header h2 { font-size: 20px; color: #e6edf3; font-weight: 700; }
.page-desc { color: #8b949e; font-size: 14px; margin-top: 4px; }

/* Tabs */
.tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid #30363d; }
.tab-btn { background: none; border: none; color: #8b949e; padding: 10px 16px; cursor: pointer; font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500; }
.tab-btn.active { color: #818cf8; border-bottom-color: #818cf8; }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* Channel bar */
.channel-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.channel-bar label { font-size: 13px; color: #8b949e; }
.channel-bar select { background: #161b22; border: 1px solid #30363d; color: #e6edf3; border-radius: 6px; padding: 6px 10px; font-size: 13px; }

/* Video grid */
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.video-card { background: #161b22; border: 1px solid #30363d; border-radius: 10px; overflow: hidden; cursor: pointer; transition: border-color 0.15s; }
.video-card:hover { border-color: #818cf8; }
.video-thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #0d1117; }
.video-thumb-placeholder { width: 100%; aspect-ratio: 16/9; background: #0d1117; display: flex; align-items: center; justify-content: center; color: #30363d; font-size: 28px; }
.video-info { padding: 10px 12px; }
.video-title { font-size: 13px; font-weight: 500; color: #e6edf3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.video-meta { font-size: 11px; color: #8b949e; margin-top: 4px; }

/* Job list */
.job-list { display: flex; flex-direction: column; gap: 12px; }
.job-card { background: #161b22; border: 1px solid #30363d; border-radius: 10px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.job-info { flex: 1; min-width: 0; }
.job-title { font-size: 14px; font-weight: 500; color: #e6edf3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-meta { font-size: 12px; color: #8b949e; margin-top: 2px; }
.job-actions { display: flex; align-items: center; gap: 8px; }

/* Status badges */
.badge { padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.badge-pending   { background: #272115; color: #d29922; }
.badge-processing { background: #112030; color: #58a6ff; }
.badge-done      { background: #122116; color: #3fb950; }
.badge-failed    { background: #2d1b1b; color: #f85149; }

/* Modal */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.75); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal.hidden { display: none; }
.modal-box { background: #161b22; border: 1px solid #30363d; border-radius: 12px; padding: 28px; width: 420px; max-width: 95vw; }
.modal-box h3 { font-size: 17px; color: #e6edf3; margin-bottom: 4px; }
.modal-subtitle { font-size: 13px; color: #8b949e; margin-bottom: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; }
.modal-actions .btn-primary { width: auto; }

/* Misc */
.loading { color: #8b949e; font-size: 14px; padding: 20px 0; }
.empty { color: #8b949e; font-size: 14px; text-align: center; padding: 40px 0; }
.pagination { display: flex; gap: 8px; margin-top: 20px; justify-content: center; }
.pagination button { background: #161b22; border: 1px solid #30363d; color: #8b949e; border-radius: 6px; padding: 6px 12px; cursor: pointer; font-size: 13px; }
.pagination button.active, .pagination button:hover { border-color: #818cf8; color: #818cf8; }