/* Video editor (loaded only by server/views/editor.html, after style.css) */
.page-editor .vx-section { padding: calc(var(--header-h, 72px) + 12px) 12px 12px; }
.vx {
  --vx-bg: #0b0b0c; --vx-panel: #141416; --vx-panel-2: #1b1b1e; --vx-line: #26262a; --vx-line-2: #34343a;
  --vx-ink: #ececee; --vx-mute: #8e8e96; --vx-acc: #5b7cff; --vx-acc-2: #3f5fe6; --vx-text: #b45bff; --vx-audio: #2fb36d;
  position: relative; display: grid; grid-template-rows: 52px minmax(0, 1fr) auto; height: calc(100vh - var(--header-h, 72px) - 24px); min-height: 640px;
  background: var(--vx-bg); color: var(--vx-ink); border: 1px solid var(--vx-line); border-radius: 18px; overflow: hidden;
  font-family: var(--f-sans); font-size: 13px; color-scheme: dark; user-select: none;
}
.vx svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.vx .mono { font-family: var(--f-mono); }
.vx button { font: inherit; color: inherit; }
.vx.is-over::after { content: ""; position: absolute; inset: 0; border: 2px dashed var(--vx-acc); border-radius: 18px; background: rgba(91,124,255,.08); pointer-events: none; z-index: 30; }
.vx-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--vx-line); background: var(--vx-panel); }
.vx-top__l { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vx-badge { font-weight: 700; letter-spacing: -.02em; font-size: 15px; }
.vx-title { margin: 0; font-size: 13px; font-weight: 500; color: var(--vx-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-top__c { display: flex; gap: 10px; align-items: center; }
.vx-pill { padding: 4px 10px; border-radius: 999px; background: var(--vx-panel-2); border: 1px solid var(--vx-line-2); font-size: 12px; }
.vx-dim { color: var(--vx-mute); font-size: 12px; }
.vx-top__r { display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.vx-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; border: 0; background: transparent; color: var(--vx-ink); cursor: pointer; transition: background .15s, color .15s; }
.vx-icon:hover:not(:disabled) { background: var(--vx-panel-2); }
.vx-icon:disabled { opacity: .35; cursor: default; }
.vx-export { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 16px; border: 0; border-radius: 9px; background: var(--vx-acc); color: #fff; font-weight: 600; cursor: pointer; transition: background .15s; }
.vx-export:hover:not(:disabled) { background: var(--vx-acc-2); }
.vx-export:disabled { opacity: .45; cursor: default; }
.vx-body { display: grid; grid-template-columns: 64px 260px minmax(0, 1fr) 290px; min-height: 0; }
.vx-rail { display: flex; flex-direction: column; gap: 4px; padding: 10px 6px; border-right: 1px solid var(--vx-line); background: var(--vx-panel); }
.vx-rail button { display: grid; justify-items: center; gap: 4px; padding: 9px 2px; border: 0; border-radius: 10px; background: transparent; color: var(--vx-mute); font-size: 10.5px; cursor: pointer; }
.vx-rail button:hover { color: var(--vx-ink); background: var(--vx-panel-2); }
.vx-rail button.is-on { color: var(--vx-ink); background: var(--vx-panel-2); box-shadow: inset 2px 0 0 var(--vx-acc); }
.vx-lib { border-right: 1px solid var(--vx-line); background: var(--vx-panel); overflow-y: auto; padding: 12px; }
.vx-lib__pane { display: grid; gap: 12px; align-content: start; }
.vx-lib__pane[hidden] { display: none; }
.vx-import { display: grid; justify-items: center; gap: 4px; padding: 16px 10px; border: 1px dashed var(--vx-line-2); border-radius: 12px; background: var(--vx-panel-2); color: var(--vx-ink); font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s; }
.vx-import:hover { border-color: var(--vx-acc); background: #1e2030; }
.vx-import small { font-weight: 400; font-size: 11px; color: var(--vx-mute); text-align: center; }
.vx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vx-mcard { position: relative; aspect-ratio: 16 / 10; border: 1px solid var(--vx-line); border-radius: 9px; overflow: hidden; background: #000; padding: 0; cursor: grab; }
.vx-mcard img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.vx-mcard__ph { display: block; width: 100%; height: 100%; background: var(--vx-panel-2); }
.vx-mcard__d { position: absolute; left: 5px; bottom: 5px; font-size: 10px; padding: 1px 5px; border-radius: 4px; background: rgba(0,0,0,.7); }
.vx-mcard__add { position: absolute; right: 5px; top: 5px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--vx-acc); color: #fff; font-size: 15px; line-height: 1; opacity: 0; transform: scale(.8); transition: opacity .15s, transform .15s; }
.vx-mcard:hover .vx-mcard__add, .vx-aitem:hover .vx-mcard__add { opacity: 1; transform: none; }
.vx-mcard:hover { border-color: var(--vx-line-2); }
.vx-list { display: grid; gap: 6px; }
.vx-aitem { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; text-align: left; padding: 9px 36px 9px 10px; border: 1px solid var(--vx-line); border-radius: 9px; background: var(--vx-panel-2); cursor: grab; }
.vx-aitem__n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vx-aitem .vx-mcard__add { top: 50%; margin-top: -11px; }
.vx-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vx-preset { display: grid; place-items: center; min-height: 64px; padding: 8px; border: 1px solid var(--vx-line); border-radius: 10px; background: #050506; cursor: pointer; transition: border-color .15s; }
.vx-preset:hover { border-color: var(--vx-acc); }
.vx-preset__s { padding: 2px 6px; border-radius: 4px; font-size: 13px; line-height: 1.2; text-align: center; }
.vx-note { margin: 0; color: var(--vx-mute); font-size: 11.5px; line-height: 1.45; }
.vx-warn { color: #ff9b70; }
.vx-viewer { display: grid; grid-template-rows: minmax(0, 1fr) 48px; min-width: 0; min-height: 0; background: var(--vx-bg); }
.vx-stage { position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden; background: radial-gradient(60% 60% at 50% 45%, #15151a, var(--vx-bg)); }
.vx-stage canvas { display: block; border-radius: 4px; box-shadow: 0 10px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06); cursor: pointer; touch-action: none; }
.vx-empty { display: grid; justify-items: center; gap: 10px; max-width: 360px; padding: 32px; border: 1px dashed var(--vx-line-2); border-radius: 16px; background: rgba(255,255,255,.02); color: var(--vx-ink); text-align: center; cursor: pointer; transition: border-color .15s; }
.vx-empty:hover { border-color: var(--vx-acc); }
.vx-empty svg { width: 34px; height: 34px; color: var(--vx-acc); }
.vx-empty span { color: var(--vx-mute); font-size: 12px; }
.vx-transport { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 14px; border-top: 1px solid var(--vx-line); background: var(--vx-panel); }
.vx-transport__c { display: flex; align-items: center; gap: 6px; }
.vx-time { font-size: 12px; color: var(--vx-ink); }
.vx-time--r { text-align: right; color: var(--vx-mute); }
.vx-play { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--vx-ink); color: #0b0b0c; cursor: pointer; }
.vx-play svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.vx-play .i-pause, .vx.is-playing .vx-play .i-play { display: none; }
.vx.is-playing .vx-play .i-pause { display: block; }
.vx-inspector { display: grid; gap: 14px; align-content: start; padding: 14px; border-left: 1px solid var(--vx-line); background: var(--vx-panel); overflow-y: auto; }
.vx-insp__head { display: grid; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--vx-line); }
.vx-insp__head strong { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.vx-field { display: grid; gap: 6px; color: var(--vx-mute); font-size: 12px; }
.vx-field__row { display: flex; justify-content: space-between; gap: 8px; }
.vx-field output { color: var(--vx-ink); font-size: 11.5px; }
.vx-field--color input { width: 100%; height: 30px; padding: 2px; border: 1px solid var(--vx-line-2); border-radius: 8px; background: var(--vx-panel-2); cursor: pointer; }
.vx-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vx-input { width: 100%; padding: 8px 10px; border: 1px solid var(--vx-line-2); border-radius: 8px; background: var(--vx-panel-2); color: var(--vx-ink); font: inherit; resize: vertical; }
.vx-input:focus { outline: none; border-color: var(--vx-acc); }
.vx input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 4px; background: var(--vx-line-2); accent-color: var(--vx-acc); }
.vx input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 0 0 3px rgba(91,124,255,.35); cursor: pointer; }
.vx input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 0; cursor: pointer; }
.vx-seg { display: flex; gap: 3px; padding: 3px; border-radius: 9px; background: var(--vx-panel-2); border: 1px solid var(--vx-line); }
.vx-seg button { flex: 1; padding: 6px 4px; border: 0; border-radius: 6px; background: transparent; color: var(--vx-mute); font-size: 12px; cursor: pointer; white-space: nowrap; }
.vx-seg button.is-on { background: #2b2b31; color: var(--vx-ink); }
.vx-check { display: flex; align-items: center; gap: 8px; color: var(--vx-ink); font-size: 12.5px; cursor: pointer; }
.vx-check input { width: 15px; height: 15px; accent-color: var(--vx-acc); }
.vx-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding-top: 6px; border-top: 1px solid var(--vx-line); }
.vx-btn { padding: 8px 10px; border: 1px solid var(--vx-line-2); border-radius: 8px; background: var(--vx-panel-2); color: var(--vx-ink); font-size: 12px; cursor: pointer; transition: border-color .15s, background .15s; white-space: nowrap; }
.vx-btn:hover { border-color: #4a4a52; }
.vx-btn--danger:hover { border-color: #e5484d; color: #ff8d90; }
.vx-btn--primary { background: var(--vx-acc); border-color: var(--vx-acc); color: #fff; font-weight: 600; }
.vx-btn--primary:hover { background: var(--vx-acc-2); }
.vx-btn:disabled { opacity: .45; cursor: default; }
.vx-tl { border-top: 1px solid var(--vx-line); background: var(--vx-panel); }
.vx-tl__bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 4px 10px; border-bottom: 1px solid var(--vx-line); }
.vx-tl__tools, .vx-tl__zoom { display: flex; align-items: center; gap: 2px; }
.vx-tl__zoom input { width: 120px; margin: 0 6px; }
.vx-sep { width: 1px; height: 20px; background: var(--vx-line); margin: 0 8px; }
.vx-keys { white-space: nowrap; }
.vx-tl__main { display: grid; grid-template-columns: 40px minmax(0, 1fr); max-height: 300px; min-height: 176px; }
.vx-heads { display: grid; grid-auto-rows: min-content; border-right: 1px solid var(--vx-line); background: var(--vx-panel); }
.vx-head { display: grid; place-items: center; height: 34px; color: var(--vx-mute); border-bottom: 1px solid var(--vx-line); }
.vx-head--ruler { height: 24px; }
.vx-head--video { height: 62px; }
.vx-scroll { overflow: auto; position: relative; background: #101012; }
.vx-inner { position: relative; min-width: 100%; }
.vx-ruler { position: relative; height: 24px; border-bottom: 1px solid var(--vx-line); background: var(--vx-panel); cursor: pointer; }
.vx-tick { position: absolute; top: 0; height: 100%; padding-left: 5px; border-left: 1px solid var(--vx-line-2); color: var(--vx-mute); font-size: 10px; line-height: 22px; white-space: nowrap; pointer-events: none; }
.vx-track { position: relative; height: 34px; border-bottom: 1px solid var(--vx-line); }
.vx-track--video { height: 62px; background: repeating-linear-gradient(90deg, transparent 0 39px, rgba(255,255,255,.015) 39px 40px); }
.vx-track__hint { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--vx-mute); font-size: 12px; pointer-events: none; }
.vx-track__hint[hidden] { display: none; }
.vx-clip { position: absolute; top: 4px; height: calc(100% - 8px); border-radius: 7px; overflow: hidden; cursor: grab; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); transition: box-shadow .12s; }
.vx-clip--clip { background-color: #1d2240; background-repeat: repeat-x; background-size: auto 100%; }
.vx-clip--text { height: 22px; background: linear-gradient(180deg, #7b3fd0, #5f2fb0); }
.vx-clip--audio { height: 26px; background: repeating-linear-gradient(90deg, #1f7a4a 0 2px, #1a6a40 2px 5px); }
.vx-clip.is-sel { box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px rgba(0,0,0,.6); z-index: 2; }
.vx-clip__label { position: absolute; left: 10px; right: 10px; top: 50%; transform: translateY(-50%); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.8); pointer-events: none; }
.vx-clip--clip .vx-clip__label { top: auto; bottom: 4px; transform: none; padding: 1px 6px; border-radius: 4px; background: rgba(0,0,0,.55); right: auto; max-width: calc(100% - 20px); }
.vx-clip__h { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; background: rgba(255,255,255,.0); z-index: 1; }
.vx-clip__h--l { left: 0; }
.vx-clip__h--r { right: 0; }
.vx-clip.is-sel .vx-clip__h, .vx-clip:hover .vx-clip__h { background: rgba(255,255,255,.85); }
.vx-clip.is-sel .vx-clip__h::after, .vx-clip:hover .vx-clip__h::after { content: ""; position: absolute; left: 3px; top: 50%; width: 2px; height: 12px; margin-top: -6px; border-radius: 1px; background: #111; }
.vx-playhead { position: absolute; top: 0; bottom: 0; left: 0; width: 0; pointer-events: none; z-index: 5; }
.vx-playhead::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.5); }
.vx-playhead span { position: absolute; top: 0; left: -6px; width: 12px; height: 14px; background: #fff; clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%); }
.vx-dropmark { position: absolute; top: 24px; left: 0; width: 3px; height: 62px; margin-left: -1px; background: var(--vx-acc); box-shadow: 0 0 10px var(--vx-acc); z-index: 6; pointer-events: none; }
.vx-modal { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(5,5,6,.72); backdrop-filter: blur(6px); }
.vx-modal[hidden] { display: none; }
.vx-dialog { width: min(440px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow: auto; border: 1px solid var(--vx-line-2); border-radius: 16px; background: var(--vx-panel); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.vx-dialog__head { display: flex; justify-content: space-between; align-items: center; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--vx-line); font-size: 15px; }
.vx-dialog__body { display: grid; gap: 14px; padding: 18px; }
.vx-dialog__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px 18px; }
.vx-dialog__foot [hidden], .vx-progress[hidden], .vx-result[hidden] { display: none; }
.vx-progress { display: grid; gap: 8px; }
.vx-progress__bar { position: relative; height: 6px; border-radius: 6px; background: var(--vx-line-2); overflow: hidden; }
.vx-progress__bar i { position: absolute; inset: 0 auto 0 0; background: var(--vx-acc); transition: width .2s; }
.vx-result { display: grid; gap: 8px; }
.vx-result video { width: 100%; max-height: 300px; border-radius: 10px; background: #000; }
@media (max-width: 1240px) {
  .vx-body { grid-template-columns: 64px 220px minmax(0, 1fr) 260px; }
}
@media (max-width: 1020px) {
  .vx { height: auto; grid-template-rows: auto auto auto; }
  .vx-top { grid-template-columns: 1fr auto; }
  .vx-top__c { display: none; }
  .vx-body { grid-template-columns: 1fr; }
  .vx-rail { flex-direction: row; justify-content: center; border-right: 0; border-bottom: 1px solid var(--vx-line); padding: 6px; }
  .vx-rail button { grid-auto-flow: column; padding: 8px 14px; font-size: 12px; }
  .vx-rail button.is-on { box-shadow: inset 0 -2px 0 var(--vx-acc); }
  .vx-lib { border-right: 0; border-bottom: 1px solid var(--vx-line); max-height: 260px; }
  .vx-grid, .vx-presets { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .vx-viewer { grid-template-rows: auto 48px; }
  .vx-stage { height: 56vh; min-height: 320px; }
  .vx-inspector { border-left: 0; border-top: 1px solid var(--vx-line); order: 3; }
  .vx-keys { display: none; }
  .vx-tl__zoom input { width: 80px; }
}
@media (max-width: 560px) {
  .page-editor .vx-section { padding-left: 6px; padding-right: 6px; }
  .vx { border-radius: 12px; }
  .vx-title { display: none; }
  .vx-export span { display: none; }
  .vx-export { padding: 0 12px; }
}
.vx .vx-play { color: #0b0b0c; }
.vx .vx-export, .vx .vx-btn--primary { color: #fff; }
body.page-editor { overflow: hidden; background: #0b0b0c; }
.page-editor .vx-section { padding: 0; }
.page-editor .vx { height: 100vh; height: 100dvh; min-height: 560px; border: 0; border-radius: 0; }
.vx-back { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 4px; border-radius: 9px; color: var(--vx-ink); transition: background .15s; }
.vx-back:hover { background: var(--vx-panel-2); }
.vx-back img { height: 14px; width: auto; display: block; }
.vx-sec { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--vx-line); color: var(--vx-ink); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.vx-insp__head + .vx-sec { margin-top: 0; padding-top: 0; border-top: 0; }
.vx-actions--2 { grid-template-columns: 1fr 1fr; padding-top: 0; border-top: 0; }
.vx-btn.is-on { border-color: var(--vx-acc); color: #fff; }
.vx-filters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.vx-filter { padding: 8px 4px; border: 1px solid var(--vx-line-2); border-radius: 8px; background: var(--vx-panel-2); color: var(--vx-mute); font-size: 11.5px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vx-filter:hover { color: var(--vx-ink); }
.vx-filter.is-on { border-color: var(--vx-acc); color: var(--vx-ink); background: #1e2030; }
.vx-inspector .vx-seg { flex-wrap: wrap; }
@media (max-width: 1020px) {
  body.page-editor { overflow: auto; }
  .page-editor .vx { height: auto; min-height: 100dvh; }
}
.vx-inspector { min-width: 0; overflow-x: hidden; }
.vx-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vx-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vx-actions--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vx-btn { overflow: hidden; text-overflow: ellipsis; }
.vx-emojis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.vx-emoji { aspect-ratio: 1; border: 1px solid var(--vx-line); border-radius: 9px; background: var(--vx-panel-2); font-size: 22px; line-height: 1; cursor: pointer; transition: transform .12s, border-color .12s; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.vx-emoji:hover { transform: scale(1.08); border-color: var(--vx-line-2); }
.vx-clip--over { height: 22px; background: linear-gradient(180deg, #c76a1f, #a3540f); }
.vx-clip--over .vx-clip__label { left: 30px; }
.vx-clip__img { position: absolute; left: 8px; top: 3px; width: 16px; height: 16px; object-fit: contain; pointer-events: none; }
.vx-clip--audio .vx-clip__label { text-shadow: 0 1px 3px #000, 0 0 2px #000; }
.vx-trmark { position: absolute; left: 0; top: 50%; width: 14px; height: 14px; margin-top: -7px; transform: translateX(-50%) rotate(45deg); background: #fff; border: 2px solid var(--vx-acc); border-radius: 3px; z-index: 2; pointer-events: none; }
.vx-snapline { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: #ffd84d; box-shadow: 0 0 6px #ffd84d; z-index: 7; pointer-events: none; }
.vx-icon.is-on { color: #ffd84d; background: rgba(255,216,77,.1); }
.vx-keylist { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; margin: 0; align-items: center; font-size: 13px; }
.vx-keylist dt { display: flex; gap: 4px; align-items: center; white-space: nowrap; }
.vx-keylist dt i { font-style: normal; color: var(--vx-mute); font-size: 11px; }
.vx-keylist dd { margin: 0; color: var(--vx-mute); }
.vx-keylist kbd { min-width: 24px; padding: 3px 7px; border: 1px solid var(--vx-line-2); border-bottom-width: 2px; border-radius: 6px; background: var(--vx-panel-2); color: var(--vx-ink); font: 500 11.5px/1.2 "Geist Mono", monospace; text-align: center; }
.vx-row .vx-check { flex: 1; }
.vx-clip__film { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.vx-clip--clip { background-image: none; }
.vx-kfmark { position: absolute; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; transform: rotate(45deg); background: #ffd84d; box-shadow: 0 0 0 1px rgba(0,0,0,.6); pointer-events: none; z-index: 2; }
.vx-clip--fx { background: repeating-linear-gradient(45deg, #3a3f4c 0 6px, #2d313b 6px 12px); }
.vx-saved { margin-left: 10px; color: var(--vx-mute); font-size: 11px; white-space: nowrap; }
.vx-field[hidden] { display: none; }
.vx-row--lut { align-items: end; }
.vx-rec { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.vx-rec i { width: 10px; height: 10px; border-radius: 50%; background: #e5484d; flex: none; }
.vx-rec.is-rec { border-color: #e5484d; color: #fff; background: rgba(229,72,77,.14); }
.vx-rec.is-rec i { animation: vx-blink 1s steps(2) infinite; }
@keyframes vx-blink { 50% { opacity: .2; } }
.vx-restore { position: absolute; inset: 0; margin: auto; width: min(340px, calc(100% - 32px)); height: max-content; display: grid; gap: 10px; padding: 22px; border: 1px solid var(--vx-line-2); border-radius: 16px; background: var(--vx-panel); box-shadow: 0 24px 60px rgba(0,0,0,.5); text-align: center; z-index: 3; }
.vx-restore[hidden] { display: none; }
.vx-restore strong { font-size: 15px; color: var(--vx-ink); }
.vx-restore__btns { display: grid; gap: 8px; margin-top: 4px; }
#vx-outimg, #vx-outaud { width: 100%; border-radius: 10px; }
#vx-outimg[hidden], #vx-outaud[hidden], #vx-outvid[hidden] { display: none; }
.vx-capstyles, .vx-tpls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vx-capstyle { padding: 14px 6px; border: 1px solid var(--vx-line-2); border-radius: 10px; background: #050506; color: #fff; font: 700 13px/1.2 Geist, sans-serif; cursor: pointer; }
.vx-capstyle.is-on { border-color: var(--vx-acc); box-shadow: inset 0 0 0 1px var(--vx-acc); }
.vx-capstyle b { color: #ffd84d; font-weight: 700; }
.vx-capstyle span { padding: 2px 6px; border-radius: 5px; background: rgba(0,0,0,.85); }
.vx-tpl { display: grid; gap: 4px; padding: 12px; text-align: left; border: 1px solid var(--vx-line-2); border-radius: 10px; background: var(--vx-panel-2); color: var(--vx-ink); cursor: pointer; transition: border-color .15s; }
.vx-tpl:hover { border-color: var(--vx-acc); }
.vx-tpl strong { font-size: 13px; }
.vx-tpl small { color: var(--vx-mute); font-size: 11px; line-height: 1.35; }
.vx-tpl i { display: block; height: 46px; border-radius: 6px; margin-bottom: 4px; background: linear-gradient(135deg, #2b3a8f, #7b3fd0); }
.vx-tpl[data-k="shorts"] i { background: linear-gradient(135deg, #111, #e5484d); }
.vx-tpl[data-k="product"] i { background: linear-gradient(135deg, #ffd84d, #f08c00); }
.vx-tpl[data-k="vlog"] i { background: linear-gradient(135deg, #c76a1f, #f3c58c); }
.vx-tpl[data-k="quote"] i { background: linear-gradient(135deg, #0f2027, #2c5364); }
.vx-tpl[data-k="dynamic"] i { background: linear-gradient(135deg, #5b7cff, #00d4ff); }
.vx-rail button[hidden] { display: none; }
.vx-sheet-head { display: none; }
.vx-rail__props { display: none !important; }
@media (max-width: 1020px) {
  .vx-seg { flex-wrap: wrap; }
  .vx-inspector, .vx-lib { min-width: 0; overflow-x: hidden; }
}
@media (max-width: 760px) {
  body.page-editor { overflow: hidden; }
  .page-editor .vx { height: 100vh; height: 100dvh; min-height: 0; grid-template-rows: 48px minmax(0, 1fr) auto; padding-bottom: calc(58px + env(safe-area-inset-bottom)); border: 0; border-radius: 0; }
  .vx-top { grid-template-columns: 1fr auto; padding: 0 4px 0 6px; gap: 4px; }
  .vx-top__r { gap: 0; }
  .vx-top__r .vx-sep { display: none; }
  .vx-export { padding: 0 12px; margin-left: 4px; }
  .vx-export span { display: none; }
  .vx-title { display: none; }
  .vx-body { display: block; min-height: 0; }
  .vx-viewer { height: 100%; grid-template-rows: minmax(0, 1fr) 44px; }
  .vx-stage { height: auto; min-height: 0; }
  .vx-transport { padding: 0 10px; }
  .vx-rail { position: fixed; z-index: 35; left: 0; right: 0; bottom: 0; flex-direction: row; justify-content: flex-start; gap: 0; overflow-x: auto; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); border: 0; border-top: 1px solid var(--vx-line); background: var(--vx-panel); scrollbar-width: none; }
  .vx-rail button { flex: 1 1 0; min-width: 50px; grid-auto-flow: row; padding: 6px 1px; font-size: 9.5px; white-space: nowrap; }
  .vx-rail button.is-on { box-shadow: none; }
  .vx:not([data-sheet]) .vx-rail button.is-on { background: transparent; color: var(--vx-mute); }
  .vx-rail__props { display: grid !important; position: relative; }
  .vx.has-sel .vx-rail__props::after { content: ""; position: absolute; top: 6px; right: calc(50% - 16px); width: 7px; height: 7px; border-radius: 50%; background: var(--vx-acc); }
  .vx-lib, .vx-inspector { position: fixed; z-index: 34; left: 0; right: 0; bottom: calc(58px + env(safe-area-inset-bottom)); max-height: 62dvh; padding-top: 0; border: 1px solid var(--vx-line-2); border-bottom: 0; border-radius: 16px 16px 0 0; background: var(--vx-panel); box-shadow: 0 -20px 50px rgba(0,0,0,.55); transform: translateY(calc(100% + 90px)); visibility: hidden; transition: transform .26s cubic-bezier(.2,.8,.2,1), visibility 0s .26s; }
  .vx[data-sheet="lib"] .vx-lib, .vx[data-sheet="insp"] .vx-inspector { transform: none; visibility: visible; transition: transform .26s cubic-bezier(.2,.8,.2,1); }
  .vx-sheet-head { position: sticky; top: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; margin: 0 -14px; padding: 8px 8px 8px 16px; background: var(--vx-panel); border-bottom: 1px solid var(--vx-line); }
  .vx-lib .vx-sheet-head { margin: 0 -12px 12px; }
  .vx-sheet-head::before { content: ""; position: absolute; top: 5px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 4px; background: var(--vx-line-2); }
  .vx-sheet-x { font-size: 22px; line-height: 1; }
  .vx-tl__bar { padding: 2px 4px; }
  .vx-tl__tools { overflow-x: auto; scrollbar-width: none; }
  .vx-tl__zoom input, #vx-zfit, .vx-tl__tools .vx-sep { display: none; }
  .vx-tl__main { max-height: 32dvh; min-height: 150px; }
  .vx-ruler, .vx-clip, #vx-canvas { touch-action: none; }
  .vx-clip__h { width: 14px; }
  .vx-modal .vx-dialog { max-height: calc(100% - 24px); }
  .vx-restore { width: calc(100% - 32px); }
}
.vx-live { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); object-fit: contain; background: #000; border-radius: 10px; z-index: 2; }
.vx-live[hidden], .vx-recbar[hidden] { display: none; }
.vx-recbar { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-radius: 999px; background: rgba(20,20,22,.92); border: 1px solid var(--vx-line-2); box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.vx-recbar i { width: 10px; height: 10px; border-radius: 50%; background: #e5484d; animation: vx-blink 1s steps(2) infinite; }
.vx-recbar .vx-btn { padding: 6px 14px; border-radius: 999px; }
.vx-sfxs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.vx-sfx { padding: 8px 4px; font-size: 11.5px; }
.vx-marker { position: absolute; top: 0; width: 10px; height: 10px; margin-left: -5px; background: #ffd84d; clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%); pointer-events: none; }
.vx-toast { position: absolute; left: 50%; bottom: 16px; transform: translate(-50%, 12px); z-index: 5; padding: 8px 14px; border-radius: 10px; background: rgba(20,20,22,.94); border: 1px solid var(--vx-line-2); color: var(--vx-ink); font-size: 12.5px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; white-space: nowrap; }
.vx-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.vx-beat { position: absolute; top: 3px; bottom: 3px; width: 1px; background: rgba(255,255,255,.55); pointer-events: none; }
.vx-fontres { display: grid; gap: 4px; }
.vx-fontres:empty { display: none; }
.vx-fontopt { padding: 7px 10px; text-align: left; border: 1px solid var(--vx-line); border-radius: 8px; background: var(--vx-panel-2); color: var(--vx-ink); cursor: pointer; }
.vx-fontopt:hover { border-color: var(--vx-acc); }
.vx-install { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; margin-right: 4px; font-size: 12px; }
.vx-install[hidden], #vx-share[hidden] { display: none; }
@media (max-width: 760px) {
  .vx-install span { display: none; }
  .vx-install { padding: 0 8px; }
}
.vx-guide { flex: none; padding: 4px 10px; border: 1px solid var(--vx-line-2); border-radius: 999px; color: var(--vx-mute); font-size: 12px; text-decoration: none; transition: color .15s, border-color .15s; }
.vx-guide:hover { color: var(--vx-ink); border-color: var(--vx-acc); }
.vx-empty__feats { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 6px; }
.vx-empty__feats span { padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--vx-line); color: var(--vx-mute); font-size: 11.5px; }
.vx-keylist + .vx-btn { margin-top: 16px; text-align: center; text-decoration: none; }
@media (max-width: 760px) {
  .vx-guide { display: none; }
}
.vx-start { position: absolute; inset: 0; z-index: 45; display: grid; place-items: center; padding: 24px; background: radial-gradient(80% 70% at 70% 20%, rgba(91,124,255,.14), transparent 60%), rgba(8,8,9,.96); backdrop-filter: blur(8px); overflow: auto; }
.vx-start[hidden] { display: none; }
.vx-start__win { display: grid; grid-template-columns: 250px minmax(0, 1fr); width: min(980px, 100%); min-height: 540px; border: 1px solid var(--vx-line-2); border-radius: 18px; background: var(--vx-panel); box-shadow: 0 40px 100px rgba(0,0,0,.6); overflow: hidden; animation: vx-rise .35s cubic-bezier(.2,.8,.2,1); }
@keyframes vx-rise { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.vx-start__side { display: flex; flex-direction: column; gap: 16px; padding: 22px 16px; background: #101012; border-right: 1px solid var(--vx-line); }
.vx-start__logo { width: 96px; height: auto; display: block; margin: 4px 6px 0; }
.vx-start__app { margin: -8px 6px 6px; color: var(--vx-mute); font-size: 12px; }
.vx-start__nav { display: grid; gap: 4px; }
.vx-start__nav button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-radius: 10px; background: transparent; color: var(--vx-mute); text-align: left; cursor: pointer; }
.vx-start__nav button:hover { color: var(--vx-ink); background: var(--vx-panel-2); }
.vx-start__nav button.is-on { color: var(--vx-ink); background: var(--vx-panel-2); box-shadow: inset 2px 0 0 var(--vx-acc); }
.vx-start[data-mode="settings"] .vx-start__side { display: none; }
.vx-start[data-mode="settings"] .vx-start__win { grid-template-columns: 1fr; width: min(720px, 100%); min-height: 0; }
.vx-recent { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--vx-line); border-radius: 12px; background: var(--vx-panel); }
.vx-recent[hidden] { display: none; }
.vx-recent .vx-sec { margin: 0; padding: 0; border: 0; }
.vx-recent strong { color: var(--vx-ink); font-size: 13px; overflow-wrap: anywhere; }
.vx-start__guide { margin-top: auto; padding: 0 6px; color: var(--vx-mute); font-size: 12px; }
.vx-start__guide:hover { color: var(--vx-ink); }
.vx-start__main { display: grid; gap: 16px; align-content: start; padding: 22px 26px 24px; }
.vx-start__head { display: flex; justify-content: space-between; align-items: center; }
.vx-start__head h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--vx-ink); }
.vx-start__t-set, .vx-start[data-mode="settings"] .vx-start__t-new { display: none; }
.vx-start[data-mode="settings"] .vx-start__t-set { display: inline; }
.vx-start__x { visibility: hidden; }
.vx-start[data-mode="settings"] .vx-start__x { visibility: visible; }
.vx-pps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.vx-pp { display: grid; justify-items: start; gap: 4px; padding: 10px; border: 1px solid var(--vx-line-2); border-radius: 12px; background: var(--vx-panel-2); color: var(--vx-ink); text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.vx-pp:hover { border-color: #4a4a52; }
.vx-pp.is-on { border-color: var(--vx-acc); background: #1c1f30; }
.vx-pp__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 4px; }
.vx-pp__icon i { display: block; border: 1.5px solid currentColor; border-radius: 4px; opacity: .8; }
.vx-pp.is-on .vx-pp__icon i { border-color: var(--vx-acc); background: rgba(91,124,255,.18); }
.vx-pp strong { font-size: 12.5px; font-weight: 600; }
.vx-pp small { color: var(--vx-mute); font-size: 11px; }
.vx-start__row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: end; }
.vx-start__by { padding-bottom: 10px; color: var(--vx-mute); }
.vx-start__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--vx-line); }
.vx-start__foot .vx-btn--primary { padding: 10px 22px; }
.vx-start .vx-note[hidden] { display: none; }
button.vx-pill { cursor: pointer; color: inherit; }
button.vx-pill:hover { border-color: var(--vx-acc); }
.vx-projinfo { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--vx-line); border-radius: 10px; background: var(--vx-panel-2); font-size: 12px; color: var(--vx-mute); }
#vx-canvas.is-alpha, .vx-result.is-alpha video, .vx-result.is-alpha img { background: repeating-conic-gradient(#2c2c31 0 25%, #1d1d21 0 50%) 0 0 / 18px 18px; }
@media (max-width: 760px) {
  .vx-start { padding: 0; place-items: stretch; }
  .vx-start__win { grid-template-columns: 1fr; min-height: 100%; border-radius: 0; border: 0; }
  .vx-start__side { border-right: 0; border-bottom: 1px solid var(--vx-line); padding: 16px; }
  .vx-start__nav { grid-auto-flow: column; }
  .vx-start__guide { display: none; }
  .vx-start__main { padding: 18px 16px 28px; }
  .vx-pps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vx-start__foot { flex-direction: column; align-items: stretch; }
}
.vx .vx-pp { color: var(--vx-ink); }
.vx .vx-start__nav button { color: var(--vx-mute); }
.vx .vx-start__nav button.is-on, .vx .vx-start__nav button:hover { color: var(--vx-ink); }
.vx-menu { position: absolute; z-index: 60; min-width: 230px; padding: 5px; border: 1px solid var(--vx-line-2); border-radius: 10px; background: rgba(24,24,27,.98); box-shadow: 0 18px 48px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4); backdrop-filter: blur(12px); animation: vx-pop .12s ease-out; }
.vx-menu[hidden] { display: none; }
@keyframes vx-pop { from { opacity: 0; transform: scale(.97); } }
.vx .vx-menu__i { display: flex; align-items: center; justify-content: space-between; gap: 22px; width: 100%; padding: 7px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--vx-ink); font-size: 12.5px; text-align: left; cursor: pointer; }
.vx .vx-menu__i:hover:not(:disabled), .vx .vx-menu__i:focus-visible { background: var(--vx-acc); color: #fff; outline: none; }
.vx .vx-menu__i:disabled { color: #5c5c64; cursor: default; }
.vx .vx-menu__i.is-danger { color: #ff7b7f; }
.vx .vx-menu__i.is-danger:hover:not(:disabled) { background: #e5484d; color: #fff; }
.vx-menu__i kbd, .vx-tip kbd { font: 500 10.5px/1 var(--f-mono); color: inherit; opacity: .6; }
.vx-menu__sep { height: 1px; margin: 5px 6px; background: var(--vx-line-2); }
.vx-tip { position: absolute; z-index: 70; display: flex; align-items: center; gap: 8px; padding: 5px 9px; border-radius: 6px; background: #f3f3f5; color: #111; font-size: 11.5px; font-weight: 500; white-space: nowrap; pointer-events: none; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.vx-tip[hidden] { display: none; }
.vx-tip kbd { padding: 2px 5px; border-radius: 4px; background: rgba(0,0,0,.08); opacity: .8; }
.vx-tl__main { grid-template-columns: 88px minmax(0, 1fr); }
.vx-head { grid-auto-flow: column; justify-content: space-between; align-items: center; padding: 0 6px 0 10px; }
.vx-head--ruler { padding: 0; }
.vx-head__i { opacity: .75; }
.vx-head__btns { display: flex; gap: 2px; }
.vx .vx-hbtn { display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--vx-mute); cursor: pointer; }
.vx .vx-hbtn svg { width: 14px; height: 14px; }
.vx .vx-hbtn:hover { background: var(--vx-panel-2); color: var(--vx-ink); }
.vx .vx-hbtn.is-off { color: #ff7b7f; }
.vx .vx-hbtn.is-off svg { opacity: .9; }
.vx-hbtn.is-off::after { content: ""; position: absolute; width: 16px; height: 1.6px; background: currentColor; transform: rotate(-40deg); }
.vx-hbtn { position: relative; }
.vx-track.is-hidden > .vx-clip, .vx-track.is-muted > .vx-clip { opacity: .4; filter: saturate(.3); }
.vx-hover { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: rgba(255,255,255,.22); pointer-events: none; z-index: 4; }
.vx-hover[hidden] { display: none; }
.vx-hover b { position: absolute; top: 4px; left: 5px; padding: 1px 5px; border-radius: 4px; background: rgba(0,0,0,.7); color: var(--vx-ink); font-size: 10px; font-weight: 500; white-space: nowrap; }
.vx-group { border-top: 1px solid var(--vx-line); }
.vx .vx-group__h { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 0 10px; border: 0; background: transparent; color: var(--vx-ink); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.vx .vx-group__h:hover { color: #fff; }
.vx-group__chev { width: 8px; height: 8px; border-right: 1.5px solid var(--vx-mute); border-bottom: 1.5px solid var(--vx-mute); transform: rotate(45deg) translateY(-2px); transition: transform .15s; }
.vx-group.is-closed .vx-group__chev { transform: rotate(-45deg); }
.vx-group__b { display: grid; gap: 14px; padding-bottom: 14px; }
.vx-group.is-closed .vx-group__b { display: none; }
.vx-transport__r { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }
.vx-transport__r .vx-time { margin-left: 8px; }
.vx-icon--sm { width: 28px; height: 28px; }
.vx-icon--sm svg { width: 16px; height: 16px; }
.vx-time { font-size: 12.5px; letter-spacing: .02em; color: var(--vx-ink); font-variant-numeric: tabular-nums; }
.vx-time--r { color: var(--vx-mute); }
.vx-guides { position: absolute; pointer-events: none; z-index: 2; }
.vx-guides[hidden] { display: none; }
.vx-guides i, .vx-guides b { position: absolute; display: none; }
.vx-guides.is-grid i { display: block; background: rgba(255,255,255,.35); }
.vx-guides .g-v1, .vx-guides .g-v2 { top: 0; bottom: 0; width: 1px; }
.vx-guides .g-h1, .vx-guides .g-h2 { left: 0; right: 0; height: 1px; }
.vx-guides .g-v1 { left: 33.333%; }
.vx-guides .g-v2 { left: 66.666%; }
.vx-guides .g-h1 { top: 33.333%; }
.vx-guides .g-h2 { top: 66.666%; }
.vx-guides.is-safe .g-act, .vx-guides.is-safe .g-title { display: block; border: 1px dashed rgba(255,216,77,.6); }
.vx-guides .g-act { inset: 3.5%; }
.vx-guides .g-title { inset: 10%; border-color: rgba(255,255,255,.45) !important; }
.vx-guides.is-safe.is-vertical .g-ui-b, .vx-guides.is-safe.is-vertical .g-ui-r { display: block; background: repeating-linear-gradient(45deg, rgba(229,72,77,.18) 0 6px, rgba(229,72,77,.06) 6px 12px); }
.vx-guides .g-ui-b { left: 0; right: 0; bottom: 0; height: 20%; }
.vx-guides .g-ui-r { right: 0; top: 40%; bottom: 20%; width: 14%; }
.vx-clip { transition: box-shadow .12s, opacity .15s; }
.vx-clip:hover:not(.is-sel) { box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
@media (max-width: 760px) {
  .vx-tl__main { grid-template-columns: 52px minmax(0, 1fr); }
  .vx-head { padding: 0 4px; }
  .vx-head__i { display: none; }
  .vx-transport__r .vx-icon--sm { display: none; }
}
.vx-start__lead { margin: -4px 6px 4px; color: var(--vx-mute); font-size: 12px; line-height: 1.5; }
.vx-start__lead:empty { display: none; }
/* animated elements panel */
.vx-vecs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.vx .vx-vec { display: grid; justify-items: center; gap: 6px; padding: 10px 4px 8px; border: 1px solid var(--vx-line); border-radius: 10px; background: var(--vx-panel-2); color: var(--vx-ink); font-size: 11px; cursor: pointer; transition: border-color .15s, transform .15s; }
.vx .vx-vec:hover { border-color: var(--vx-acc); transform: translateY(-1px); }
.vx-vec__i { display: block; width: 34px; height: 22px; position: relative; }
.vx-vec__i--arrow { background: linear-gradient(#ffd84d, #ffd84d) 0 50% / 80% 3px no-repeat; }
.vx-vec__i--arrow::after { content: ""; position: absolute; right: 4px; top: 50%; width: 9px; height: 9px; border-top: 3px solid #ffd84d; border-right: 3px solid #ffd84d; transform: translateY(-50%) rotate(45deg); }
.vx-vec__i--circle { width: 22px; border: 3px solid #ff4d4d; border-radius: 50%; }
.vx-vec__i--underline { border-bottom: 3px solid #ffd84d; border-radius: 0 0 50% 50% / 0 0 30% 30%; height: 14px; }
.vx-vec__i--box { border: 2.5px solid #fff; border-radius: 4px; }
.vx-vec__i--highlight { background: rgba(255,216,77,.5); border-radius: 3px; height: 14px; margin-top: 4px; }
.vx-vec__i--progress { height: 6px; margin-top: 8px; border-radius: 3px; background: linear-gradient(90deg, #5b7cff 60%, rgba(255,255,255,.25) 60%); }
.vx-vec__i--countdown { width: 22px; border: 3px solid #fff; border-right-color: rgba(255,255,255,.25); border-radius: 50%; }
.vx-vec__i--subscribe { height: 14px; margin-top: 4px; border-radius: 7px; background: #e5484d; }
.vx-vec__i--lower { background: linear-gradient(#5b7cff, #5b7cff) 0 0 / 100% 55% no-repeat, linear-gradient(#fff, #fff) 0 100% / 75% 40% no-repeat; }
/* multi-select, lasso, shuttle rate, proxy badge, multi-ratio export */
.vx-clip.is-sel + .vx-clip.is-sel { box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px rgba(0,0,0,.6); }
.vx-lasso { position: absolute; z-index: 8; border: 1px solid var(--vx-acc); background: rgba(91,124,255,.14); pointer-events: none; }
.vx-rate { min-width: 34px; color: #ffd84d; font-size: 11.5px; text-align: right; }
.vx-mcard__px { position: absolute; top: 6px; right: 6px; padding: 1px 5px; border-radius: 4px; background: rgba(91,124,255,.9); color: #fff; font-size: 10px; }
.vx-multi { display: flex; flex-wrap: wrap; gap: 6px 14px; }
#vx-add-adj { width: 100%; }
.vx-toast { white-space: normal; max-width: calc(100% - 32px); text-align: center; line-height: 1.4; }