/* VJ loops grid + editor drawer */
.vj-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
@media (min-width: 640px) { .vj-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 1100px) { .vj-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.vj-soon { grid-column: 1 / -1; text-align: center; margin: 24px 0; letter-spacing: .25em; font: 14px var(--mono, monospace); color: var(--muted, rgba(184,255,208,.6)); }
.vj-tile { cursor: pointer; outline: none; min-width: 0; }
.vj-box { position: relative; aspect-ratio: 16 / 9; background: #000; border: 1px solid var(--line, rgba(0,255,110,.28)); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.vj-tile:hover .vj-box, .vj-tile:focus-visible .vj-box, .vj-tile.is-playing .vj-box { border-color: var(--green, #00ff6e); box-shadow: 0 0 14px rgba(0,255,110,.35); }
.vj-box img, .vj-box video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; display: block; }
.vj-box video { z-index: 1; }
.vj-c { position: absolute; width: 10px; height: 10px; z-index: 2; pointer-events: none; border: 0 solid var(--green, #00ff6e); }
.vj-c-tl { left: 3px; top: 3px; border-width: 2px 0 0 2px; }
.vj-c-tr { right: 3px; top: 3px; border-width: 2px 2px 0 0; }
.vj-c-bl { left: 3px; bottom: 3px; border-width: 0 0 2px 2px; }
.vj-c-br { right: 3px; bottom: 3px; border-width: 0 2px 2px 0; }
.vj-tag { position: absolute; z-index: 3; right: 6px; top: 6px; padding: 1px 5px; font: 10px/1.4 var(--mono, monospace); letter-spacing: .15em; color: #000; background: var(--green, #00ff6e); }
.vj-title { margin-top: 6px; font: 12px/1.3 var(--mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: var(--mint, #b8ffd0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vj-tile:hover .vj-title, .vj-tile.is-playing .vj-title { color: var(--green, #00ff6e); }

/* editor drawer */
.vjed-note { min-height: 18px; margin: 0 0 8px; font: 12px var(--mono, monospace); color: var(--lime, #c6ff00); }
.vjed-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; margin: 16px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--line, rgba(0,255,110,.28)); }
.vjed-pt { font: 700 12px var(--head, sans-serif); letter-spacing: .14em; color: var(--green, #00ff6e); }
.vjed-links { display: flex; gap: 10px; }
.vjed-link { background: none; border: 0; padding: 0; cursor: pointer; font: 11px var(--mono, monospace); letter-spacing: .1em; color: var(--teal, #1de9b6); text-decoration: underline; }
.vjed-row { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line-soft, rgba(0,255,110,.12)); }
.vjed-th { flex: 0 0 80px; width: 80px; aspect-ratio: 16 / 9; object-fit: cover; background: #000; border: 1px solid var(--line, rgba(0,255,110,.28)); }
.vjed-th--none { display: flex; align-items: center; justify-content: center; color: var(--muted, #8a8); font-size: 12px; }
.vjed-mid { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; }
.vjed-name { flex: 1 1 100%; font: 13px var(--mono, monospace); color: var(--mint, #b8ffd0); }
.vjed-lab { font: 11px var(--mono, monospace); letter-spacing: .08em; cursor: pointer; white-space: nowrap; }
.vjed-lab input { accent-color: #00ff6e; }
.vjed-kb { font: 10px var(--mono, monospace); color: var(--muted, #8a8); }