/* PMV Generator on the web: a slim top bar instead of the Stash navigation, plus the local clip picker */
.kb-solo .kb-main { max-width: 1500px; margin: 0 auto; }
.kb-solo-bar { display: flex; align-items: center; gap: 12px; padding: 14px var(--pad) 0; }
.kb-solo-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font: 700 18px/1 var(--f-display); letter-spacing: .02em; }
.kb-solo-brand svg { width: 22px; height: 22px; }
.kb-solo-note { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--bg-3); border-radius: 999px; color: var(--text-2); font: 500 12.5px/1 var(--f-label); }
.kb-solo-note .kb-ic { width: 14px; height: 14px; color: var(--ok); }
.kb-solo-src { color: var(--faint); font: 500 13px/1 var(--f-label); }
.kb-solo-src:hover { color: var(--pink); }

/* Clips: drop zone while empty, afterwards a compact bar – the whole card takes drops */
.kb-pmvg-clips.is-over { outline: 2px dashed var(--pink); outline-offset: -2px; }
.kb-pmvg-libdrop { min-height: 130px; }
.kb-pmvg-libdrop:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.kb-pmvg-link { padding: 0; border: 0; color: var(--pink); font: inherit; text-decoration: underline; text-underline-offset: 2px; background: none; cursor: pointer; }
.kb-pmvg-link:hover { color: var(--pink-2); }
.kb-pmvg-libbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; border: 1px solid var(--bg-3); border-radius: 6px; background: var(--base); }
.kb-pmvg-libbar[hidden] { display: none; }
.kb-pmvg-libbar > .kb-ic { width: 20px; height: 20px; color: var(--pink); }
html.kb-glass .kb-pmvg-libbar { border-color: var(--glass-edge); border-radius: 14px; background: var(--glass-shine), var(--glass); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); }
.kb-pmvg-libbar [data-libsum] { color: var(--text); font: 600 14px/1.3 var(--f-label); font-variant-numeric: tabular-nums; }

/* Templates from your clips: no thumbnails, a film icon instead */
.kb-pmvg-tplic { display: grid; place-items: center; aspect-ratio: 16 / 9; color: var(--pink); background: var(--tone) 0 0 / 7px 7px, var(--bg-2); }
.kb-pmvg-tplic .kb-ic { width: 28px; height: 28px; }

@media (max-width: 600px) {
  .kb-solo-note { display: none; }
}

/* Entry screen with the terms of use */
.kb-gate { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px; overflow-y: auto; background: rgba(20, 8, 18, .92); backdrop-filter: blur(6px); }
.kb-gate-card { width: min(640px, 100%); padding: 26px 28px 22px; border: 1px solid var(--bg-3); border-top: 4px solid var(--pink); border-radius: 8px; color: var(--text-2); font: 400 14.5px/1.55 var(--f-text); background: var(--bg-2); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.kb-gate-card h2 { margin: 0 0 8px; color: var(--text); font: 700 30px/1.05 var(--f-display); font-stretch: 85%; }
.kb-gate-card b { color: var(--text); font-weight: 600; }
.kb-gate-lead { margin: 0 0 10px; }
.kb-gate-list { display: grid; gap: 8px; margin: 0 0 14px; padding-left: 22px; }
.kb-gate-list li::marker { color: var(--pink); font-weight: 700; }
.kb-gate-note { margin: 0; padding: 12px 14px; border-radius: 6px; color: var(--text-2); font-size: 13px; background: var(--base); }
.kb-gate-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.kb-gate-acts .kb-btn.is-primary { padding-inline: 22px; }
@media (max-width: 480px) {
  .kb-gate { place-items: start center; }
  .kb-gate-card { padding: 20px 18px 18px; }
  .kb-gate-card h2 { font-size: 26px; }
}