/* AQUA STUDIO V10 — unified video preview + compact creative table */

.aqua-video-backdrop{
  position:fixed;inset:0;z-index:120;
  display:flex;align-items:center;justify-content:center;
  padding:16px;
  background:var(--overlay, rgba(6,7,12,.62));
  backdrop-filter:blur(4px);
}
.aqua-video-backdrop.hidden{display:none!important}
.aqua-video-modal{
  width:min(1000px,95vw);
  max-height:90vh;
  overflow:auto;
  background:var(--surface, #171922);
  color:var(--text, #F3F4F8);
  border:1px solid var(--border, #2B2E3D);
  border-radius:14px;
  box-shadow:var(--shadow, 0 18px 48px rgba(0,0,0,.45));
  padding:14px 16px 16px;
  display:flex;flex-direction:column;gap:10px;
}
.aqua-video-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
}
.aqua-video-titles{min-width:0;flex:1}
.aqua-video-titles h2{
  margin:0;font-size:16px;font-weight:750;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.aqua-video-head-actions{display:flex;gap:8px;flex:0 0 auto;align-items:center}
.aqua-video-close{font-size:18px;line-height:1;min-width:36px;padding:6px 10px!important}
.aqua-video-stage{
  position:relative;
  background:#000;
  border-radius:10px;
  overflow:hidden;
  min-height:180px;
  display:flex;align-items:center;justify-content:center;
}
.aqua-video-stage video{
  width:100%;max-height:min(62vh,560px);
  background:#000;display:block;
}
.aqua-video-loading,.aqua-video-empty{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;
  background:rgba(0,0,0,.55);color:#fff;font-size:14px;z-index:2;
}
.aqua-video-loading.hidden,.aqua-video-empty.hidden{display:none!important}
.aqua-video-nav{
  display:flex;align-items:center;justify-content:center;gap:14px;
}
.aqua-video-nav[hidden]{display:none!important}
.aqua-video-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.aqua-video-foot .muted{margin:0;font-size:12.5px}
.aqua-video-actions{display:flex;gap:8px;flex-wrap:wrap}
body.aqua-video-open{overflow:hidden!important}

/* Compact creative video thumbnails */
.creative-thumb-sm,.cp-video-thumb{
  width:100px;height:60px;border-radius:8px;overflow:hidden;
  background:var(--thumb-bg, #1A1C28);
  border:1px solid var(--border, #2B2E3D);
  display:flex;align-items:center;justify-content:center;
  position:relative;cursor:pointer;flex-shrink:0;
}
.cp-video-thumb img,.creative-thumb-sm img{width:100%;height:100%;object-fit:cover;display:block}
.cp-video-thumb .play-overlay{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.35);color:#fff;font-size:18px;opacity:0;transition:opacity .15s;
  pointer-events:none;
}
.cp-video-thumb:hover .play-overlay,.cp-video-thumb:focus-visible .play-overlay{opacity:1}
.cp-video-thumb.is-empty{cursor:default;opacity:.7}
.cp-video-thumb.is-empty .play-overlay{display:none}
.cp-ls-id{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;font-weight:700;color:var(--accent-text, #D7C2FF);
  background:var(--accent-soft, rgba(137,86,245,.16));
  border-radius:6px;padding:3px 7px;display:inline-block;
}
.cp-creatives-table th:first-child,.cp-creatives-table td.thumb-cell{width:112px}
.cp-creatives-table .expand-btn{min-height:30px!important;padding:5px 10px!important}
#projects .thumb{cursor:pointer}
#projects .thumb .play-result{
  pointer-events:none; /* modal opens from thumb click */
}
#projects .project .name{cursor:pointer}
#projects .project .name:hover{color:var(--accent-text,#D7C2FF)}

[data-theme="light"] .aqua-video-modal{
  background:#fff;color:#182033;border-color:#E1E5EE;
}
[data-theme="light"] .aqua-video-stage{background:#0b0c12}
[data-theme="light"] .cp-video-thumb{background:#EEF0F7;border-color:#E1E5EE}

@media(max-width:560px){
  .aqua-video-modal{width:95vw;padding:12px;max-height:92vh}
  .aqua-video-stage video{max-height:42vh}
  .creative-thumb-sm,.cp-video-thumb{width:88px;height:52px}
}