/* VIDEO-Pi upload-widget. Scopet under .vp så den kan ligge inde i jonasvest.dk's tema.
   Farver arver fra temaets variabler (--ink, --ink-soft, --line) hvis de findes. */
.vp { --vp-fg: var(--ink, #f2f2f2); --vp-dim: var(--ink-soft, #9a9a9e); --vp-line: var(--line, #2c2c2e);
  --vp-card: rgba(255,255,255,.05); --vp-acc: #f5c400; --vp-go: #2fbf71; --vp-rec: #e4483c;
  color: var(--vp-fg); max-width: 36rem; }
.vp *, .vp *::before, .vp *::after { box-sizing: border-box; }
.vp [hidden] { display: none !important; }
.vp .vp-sub { color: var(--vp-dim); margin: 0 0 16px; }
.vp .vp-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.vp .vp-tab { flex: 1; padding: 11px; border: 1px solid var(--vp-line); border-radius: 10px;
  background: var(--vp-card); color: var(--vp-dim); font: inherit; font-size: 1rem; cursor: pointer; }
.vp .vp-tab.on { color: var(--vp-fg); border-color: var(--vp-acc); }
.vp .vp-panel { display: none; } .vp .vp-panel.on { display: block; }
.vp .vp-stage { position: relative; background: #000; border-radius: 12px; overflow: hidden; aspect-ratio: 16/9; }
.vp .vp-stage video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.vp .vp-count { position: absolute; top: 10px; right: 12px; font: 700 22px/1 ui-monospace, Menlo, monospace;
  color: #fff; background: rgba(228,72,60,.85); padding: 6px 10px; border-radius: 8px; }
.vp .vp-bar { height: 6px; background: var(--vp-line); border-radius: 3px; overflow: hidden; }
.vp .vp-stage .vp-bar { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 0; }
.vp .vp-bar > div { height: 100%; width: 0; background: var(--vp-acc); transition: width .1s linear; }
.vp .vp-row { display: flex; gap: 10px; margin: 14px 0; flex-wrap: wrap; justify-content: center; }
.vp button { cursor: pointer; font: inherit; }
.vp button:disabled { opacity: .45; cursor: default; }
.vp .vp-big { padding: 14px 24px; border-radius: 12px; border: 0; background: var(--vp-acc); color: #111;
  font-weight: 700; font-size: 1.05rem; min-width: 160px; }
.vp .vp-big.rec { background: var(--vp-rec); color: #fff; }
.vp .vp-big.stop { background: #444; color: #fff; }
.vp .vp-big.go { background: var(--vp-go); color: #fff; }
.vp .vp-ghost { padding: 12px 18px; border-radius: 12px; border: 1px solid var(--vp-line); background: transparent; color: var(--vp-fg); }
.vp .vp-msg { color: var(--vp-dim); min-height: 1.4em; margin: 6px 0; text-align: center; }
.vp .vp-drop { display: block; border: 2px dashed var(--vp-line); border-radius: 12px; padding: 34px 16px; text-align: center;
  color: var(--vp-dim); cursor: pointer; }
.vp .vp-drop.over { border-color: var(--vp-acc); color: var(--vp-fg); }
.vp .vp-drop input { display: none; }
.vp .vp-preview { width: 100%; margin-top: 12px; border-radius: 12px; background: #000; max-height: 50vh; }
.vp .vp-fields { display: grid; gap: 8px; margin-top: 18px; }
.vp .vp-fields input { padding: 12px; border-radius: 10px; border: 1px solid var(--vp-line); background: var(--vp-card);
  color: var(--vp-fg); font: inherit; font-size: 1rem; }
.vp .vp-progress { margin-top: 18px; text-align: center; }
.vp .vp-progress .vp-bar { margin-bottom: 8px; }