body.creation-video-picker-open { overflow:hidden; }
.creation-video-picker-backdrop[hidden] { display:none; }
.creation-video-picker-backdrop { position:fixed; inset:0; z-index:3220; display:grid; place-items:center; padding:28px; background:rgba(22,24,35,.44); backdrop-filter:blur(2px); }
.creation-video-picker-modal { width:min(1180px,calc(100vw - 56px)); max-height:min(840px,calc(100vh - 56px)); display:flex; flex-direction:column; overflow:hidden; background:#fff; border:1px solid #e7e6ef; border-radius:18px; box-shadow:0 24px 72px rgba(26,22,58,.2); color:#202033; }
.creation-video-picker-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:22px 26px 16px; border-bottom:1px solid #eeedf4; }
.creation-video-picker-head h2 { margin:0 0 6px; font-size:20px; }
.creation-video-picker-head p { margin:0; color:#8a8998; font-size:13px; }
.creation-video-picker-close { width:34px; height:34px; border:1px solid #e5e3ed; border-radius:9px; background:#fff; color:#747283; font-size:20px; cursor:pointer; }
.creation-video-source-tabs { display:flex; gap:24px; padding:0 26px; border-bottom:1px solid #eceaf2; }
.creation-video-source-tabs button { position:relative; height:48px; padding:0 2px; border:0; background:transparent; color:#777584; cursor:pointer; font-weight:600; }
.creation-video-source-tabs button.active { color:#5e49dc; }
.creation-video-source-tabs button.active::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:#6954e7; }
.creation-video-source-tabs b { min-width:19px; height:19px; display:inline-grid; place-items:center; margin-left:5px; border-radius:10px; background:#f0eef9; color:#7f7898; font-size:10px; }
.creation-video-picker-toolbar { display:grid; grid-template-columns:minmax(300px,1fr) 150px 150px; gap:12px; padding:16px 26px 10px; }
.creation-video-search { height:42px; display:flex; align-items:center; gap:8px; padding:0 12px; border:1px solid #dddbea; border-radius:10px; color:#8c899d; background:#fff; }
.creation-video-search:focus-within { border-color:#7464ee; box-shadow:0 0 0 3px rgba(116,100,238,.1); }
.creation-video-search input { width:100%; border:0; outline:0; font:inherit; color:#26243a; }
.creation-video-picker-toolbar select { height:42px; border:1px solid #dddbea; border-radius:10px; padding:0 32px 0 11px; background:#fff; color:#4a4859; }
.creation-video-picker-summary { display:flex; justify-content:space-between; align-items:center; padding:0 27px 10px; color:#8a8998; font-size:12px; }
.creation-video-picker-summary button { border:0; background:transparent; color:#6554e8; cursor:pointer; }
.creation-video-picker-grid { min-height:300px; overflow:auto; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; padding:0 26px 22px; }
.creation-video-card { min-height:228px; display:grid; grid-template-columns:118px minmax(0,1fr); gap:15px; padding:13px; overflow:hidden; text-align:left; border:1px solid #e4e2ec; border-radius:14px; background:#fff; color:#29273b; cursor:pointer; transition:.16s ease; }
.creation-video-card:hover { border-color:#b7aff7; box-shadow:0 8px 24px rgba(77,62,171,.08); transform:translateY(-1px); }
.creation-video-card.selected { border:2px solid #6755eb; padding:12px; background:#fbfaff; box-shadow:0 0 0 3px rgba(103,85,235,.08); }
.creation-video-cover { position:relative; min-height:200px; display:grid; place-items:center; overflow:hidden; border-radius:10px; background:linear-gradient(145deg,#3c325d,#7058a1); color:#fff; }
.creation-video-cover.tone-1 { background:linear-gradient(145deg,#32565c,#55939a); }
.creation-video-cover.tone-2 { background:linear-gradient(145deg,#70414e,#a76777); }
.creation-video-cover.tone-3 { background:linear-gradient(145deg,#3b416d,#666fac); }
.creation-video-cover > i { width:38px; height:38px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.18); font-style:normal; }
.creation-video-cover > b { position:absolute; right:7px; bottom:7px; padding:3px 6px; border-radius:5px; background:rgba(20,20,30,.7); font-size:10px; }
.creation-video-cover > em { position:absolute; left:7px; top:7px; padding:3px 6px; border-radius:5px; background:rgba(255,255,255,.18); font-size:10px; font-style:normal; }
.creation-video-card-info { position:relative; min-width:0; display:flex; flex-direction:column; gap:8px; padding:3px 4px 2px 0; }
.creation-video-card-info > strong { padding-right:27px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:15px; }
.creation-video-card-info > small { color:#a09eac; font-size:10px; }
.creation-video-card-check { position:absolute; top:0; right:0; width:22px; height:22px; display:grid; place-items:center; border:1px solid #ddd9ef; border-radius:50%; background:#fff; color:#fff; font-size:12px; }
.creation-video-card.selected .creation-video-card-check { border-color:#6755eb; background:#6755eb; }
.creation-video-card-tags { display:flex; flex-wrap:wrap; gap:6px; }
.creation-video-card-tags i,.creation-video-card-bottom i { padding:3px 7px; border-radius:6px; background:#f1efff; color:#6654da; font-size:10px; font-style:normal; }
.creation-video-card-tags i.status { background:#f3f3f6; color:#777583; }
.creation-video-card-tags i.status.ready { background:#e9f8f2; color:#18865f; }
.creation-video-card-insight { display:flex; flex-direction:column; gap:5px; padding:9px 10px; border-radius:9px; background:#f8f8fb; color:#555365; font-size:12px; line-height:1.45; }
.creation-video-card-insight em { color:#9895a6; font-size:10px; font-style:normal; }
.creation-video-card-bottom { margin-top:auto; padding-top:8px; display:flex; align-items:center; justify-content:space-between; gap:8px; border-top:1px solid #efedf4; color:#898697; }
.creation-video-card-bottom > span { display:flex; flex-wrap:wrap; gap:5px; }
.creation-video-card-bottom small { flex:0 0 auto; font-size:10px; }
.creation-video-picker-empty { grid-column:1/-1; min-height:270px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border:1px dashed #ddd9e8; border-radius:14px; color:#9996a6; }
.creation-video-picker-empty b { color:#4b495a; }
.creation-video-picker-foot { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:15px 26px; border-top:1px solid #eceaf2; background:#fcfbfe; font-size:13px; }
.creation-video-picker-foot > div { display:flex; gap:10px; }
.creation-video-picker-foot button { height:38px; padding:0 20px; border-radius:9px; cursor:pointer; }
.video-picker-secondary { border:1px solid #dddbea; background:#fff; color:#4d4a5a; }
.video-picker-primary { border:0; background:#6655e8; color:#fff; }
.video-picker-primary:disabled { background:#c9c5df; cursor:not-allowed; }
@media (max-width:960px) {
  .creation-video-picker-toolbar { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .creation-video-search { grid-column:1/-1; }
  .creation-video-picker-grid { grid-template-columns:1fr; }
}
@media (max-width:620px) {
  .creation-video-picker-backdrop { padding:12px; }
  .creation-video-picker-modal { width:100%; max-height:calc(100vh - 24px); }
  .creation-video-picker-toolbar { grid-template-columns:1fr; }
  .creation-video-search { grid-column:auto; }
  .creation-video-card { grid-template-columns:92px minmax(0,1fr); }
}