:root {
  --vit-ink: #16202b;      /* slate escuro do painel */
  --vit-amber: #ffb020;    /* âmbar de letreiro */
  --vit-bg: #f2f4f7;
}

body { background: var(--vit-bg); }

.vitrine-nav {
  background: var(--vit-ink);
  color: #fff;
}
.vitrine-nav .navbar-brand { color: #fff; letter-spacing: .02em; }
.vitrine-nav .nav-link { color: #cfd8e3; }
.vitrine-nav .nav-link:hover { color: #fff; }
.marca-dot {
  width: 12px; height: 12px; border-radius: 3px;
  background: var(--vit-amber);
  box-shadow: 0 0 10px var(--vit-amber);
  display: inline-block;
}

.btn-vitrine {
  background: var(--vit-amber);
  border: none; color: #1b1b1b; font-weight: 600;
}
.btn-vitrine:hover { background: #e69c0e; color: #111; }

/* filmstrip: a playlist como tira de filme */
.filmstrip { list-style: none; padding: 0; margin: 0; }
.filmstrip li {
  background: #fff; border: 1px solid #e3e8ef; border-radius: .5rem;
  display: flex; align-items: center; gap: 1rem;
  padding: .6rem .9rem; margin-bottom: .5rem;
}
.filmstrip li.inativo { opacity: .45; }
.filmstrip .thumb {
  width: 110px; height: 62px; object-fit: cover; border-radius: .35rem;
  background: #000; flex-shrink: 0;
}
.filmstrip .handle { cursor: grab; color: #9aa7b5; font-size: 1.2rem; }
.filmstrip li.sortable-ghost { border: 2px dashed var(--vit-amber); opacity: .6; }
.duracao-input { width: 84px; }

.dropzone {
  border: 2px dashed #b9c4d0; border-radius: .75rem;
  padding: 1.6rem; text-align: center; color: #6b7a89;
  background: #fff; cursor: pointer; transition: border-color .15s;
}
.dropzone.arrastando { border-color: var(--vit-amber); color: #333; }

.link-tv {
  background: var(--vit-ink); color: #ffd57e; border-radius: .5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: .55rem .8rem; word-break: break-all;
}