:root {
  --brand: #6366f1;
  --brand-dark: #4338ca;
  --bg: #0f1117;
  --bg-card: #171a23;
  --border: #262a36;
}

body {
  background: radial-gradient(circle at top, #1a1d29 0%, #0f1117 60%);
  color: #e5e7eb;
  min-height: 100vh;
}

.app-navbar {
  background: rgba(23, 26, 35, 0.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  padding-top: .9rem;
  padding-bottom: .9rem;
}

/* --- Login --- */
.login-page {
  padding: 1rem;
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--bg-card);
  border-radius: 1rem;
  border: 1px solid var(--border) !important;
}

.brand-icon {
  font-size: 2.75rem;
  color: var(--brand);
}

/* --- Cards --- */
.card {
  background: var(--bg-card);
  border-radius: .9rem;
}

.upload-card {
  border: 1px solid var(--border) !important;
}

.video-card {
  border: 1px solid var(--border) !important;
  transition: border-color .15s ease, transform .15s ease;
}

.video-card:hover {
  border-color: #3a3f52 !important;
}

.video-preview {
  border-radius: .6rem;
  background: #000;
  max-height: 160px;
  width: 100%;
  object-fit: cover;
}

/* --- Dropzone --- */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 2px dashed var(--border);
  border-radius: .9rem;
  padding: 2.5rem 1rem;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
  color: #9ca3af;
}

.dropzone:hover,
.dropzone.dragover {
  border-color: var(--brand);
  background: rgba(99, 102, 241, 0.08);
  color: #e5e7eb;
}

/* --- Buttons --- */
.btn-primary {
  background: var(--brand);
  border-color: var(--brand);
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}

.btn-outline-primary {
  color: var(--brand);
  border-color: var(--brand);
}

.btn-outline-primary:hover {
  background: var(--brand);
  border-color: var(--brand);
}

/* --- Misc --- */
.url-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8rem;
}

.upload-result {
  border: 1px solid #16653480;
}

.empty-state {
  border: 1px dashed var(--border);
  border-radius: .9rem;
}

.copy-btn.copied {
  background-color: #16a34a !important;
  border-color: #16a34a !important;
  color: #fff !important;
}