/* Shared research cards, controls, and dialogs. */
.top-bar {
  display:flex; flex-wrap:wrap; gap:1.25rem; align-items:center;
  margin-bottom:2rem; padding:1.25rem 1.75rem;
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
}
.top-bar .stat { display:flex; flex-direction:column; gap:.2rem; }
.top-bar .stat-label { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }
.top-bar .stat-value { font-size:1.2rem; font-weight:800; }
.top-bar .divider { width:1px; height:36px; background:var(--border); }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr)); gap:1.5rem; }
.score-low      { background:#242424; color:#999; }
.score-rising   { background:#0c1e3d; color:#60a5fa; }
.score-high     { background:#281600; color:#fb923c; }
.score-viral    { background:#092409; color:#4ade80; }
.score-breakout { background:linear-gradient(135deg,#3a2800,#251b00); color:#fbbf24; }
.bg-low      { background:linear-gradient(160deg,#1a1a1a 0%,#111 100%); }
.bg-rising   { background:linear-gradient(160deg,#0c1e3d 0%,#06111f 100%); }
.bg-high     { background:linear-gradient(160deg,#281600 0%,#160b00 100%); }
.bg-viral    { background:linear-gradient(160deg,#092409 0%,#041204 100%); }
.bg-breakout { background:linear-gradient(160deg,#3a2800 0%,#1a1200 100%); }
.video-card {
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.video-card:hover { transform:translateY(-3px); box-shadow:0 10px 30px rgba(0,0,0,.45); border-color:#383838; }
.card-banner {
  position:relative; height:190px; cursor:pointer; overflow:hidden; flex-shrink:0;
}
.banner-img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:1;
  transition:transform .35s;
}
.video-card:hover .banner-img { transform:scale(1.05); }
.banner-dim { position:absolute; inset:0; background:rgba(0,0,0,.35); z-index:2; }
.banner-hover-overlay {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.55); z-index:4; opacity:0; transition:opacity .2s;
}
.card-banner:hover .banner-hover-overlay { opacity:1; }
.banner-score {
  position:absolute; top:.9rem; right:.9rem; z-index:3;
  padding:.35rem .75rem; border-radius:10px;
  font-size:1.5rem; font-weight:900; line-height:1; text-align:center;
  backdrop-filter:blur(6px);
}
.banner-score span {
  display:block; font-size:.55rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.12em; opacity:.85; margin-top:3px;
}
.score-breakout.banner-score { animation:glow 2s ease-in-out infinite alternate; }
.card-creator {
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:1.1rem 1.25rem .75rem; gap:.75rem;
}
.creator-left { flex:1; min-width:0; }
.c-name {
  font-size:1rem; font-weight:700; display:flex; align-items:center; gap:.4rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:.1rem;
}
.c-verified {
  flex-shrink:0; width:15px; height:15px; background:#20b2d6; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.55rem; color:#fff; font-weight:900;
}
.c-handle { font-size:.8rem; color:var(--muted); margin-bottom:.35rem; }
.c-followers { font-size:1.1rem; font-weight:800; color:var(--accent2); }
.c-followers small { font-size:.65rem; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-left:.25rem; }
.save-btn {
  flex-shrink:0; background:none; border:1px solid var(--border); border-radius:10px;
  width:38px; height:38px; cursor:pointer; color:var(--muted); font-size:1.15rem;
  transition:all .15s; display:flex; align-items:center; justify-content:center; font-family:inherit;
}
.save-btn:hover,.save-btn.saved { border-color:#fbbf24; color:#fbbf24; background:rgba(251,191,36,.1); }
.stats-grid {
  display:grid; grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.sg-cell {
  padding:.75rem .25rem; text-align:center;
  border-right:1px solid var(--border);
}
.sg-cell:last-child { border-right:none; }
.sg-icon { font-size:.8rem; line-height:1; }
.sg-num { display:block; font-size:.92rem; font-weight:800; color:var(--text); margin:.15rem 0 .1rem; }
.sg-lbl { font-size:.6rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.card-music {
  display:flex; align-items:center; gap:.5rem;
  padding:.6rem 1.25rem; font-size:.8rem; color:var(--muted); overflow:hidden;
}
.card-music .music-text { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.orig-badge {
  flex-shrink:0; background:#1a2a1a; color:#4ade80;
  border:1px solid #2a3a2a; border-radius:4px;
  padding:.08rem .4rem; font-size:.62rem; font-weight:700; letter-spacing:.03em;
}
.signal-tags {
  display:flex; flex-wrap:wrap; gap:.4rem; padding:.5rem 1.25rem .9rem;
}
.stag {
  background:var(--surface2); border:1px solid var(--border); border-radius:6px;
  padding:.22rem .55rem; font-size:.74rem; color:var(--muted); white-space:nowrap;
}
.stag-save  { border-color:#3a3000!important; color:#fbbf24!important; background:rgba(251,191,36,.05)!important; }
.stag-share { border-color:#003040!important; color:var(--accent2)!important; background:rgba(105,201,208,.05)!important; }
.card-blueprint:hover { background:rgba(105,201,208,.08); color:#fff; }
.perf-row { display:flex; justify-content:space-between; align-items:baseline;
  padding:.28rem 0; border-bottom:1px solid rgba(255,255,255,.04); font-size:.78rem; }
.perf-row:last-child { border-bottom:none; }
.perf-row-label { color:var(--muted); font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.perf-row-value { font-weight:800; font-size:.9rem; }
.vfs-badge { padding:.3rem .7rem; border-radius:8px; font-size:1.1rem; font-weight:900; text-align:center; min-width:58px; }
.vfs-badge .vfs-label { display:block; font-size:.55rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; opacity:.8; margin-top:1px; }
dialog::backdrop { background:rgba(0,0,0,.75); }
.modal-wrap { display:flex; flex-direction:column; max-height:calc(90vh - 2px); max-height:calc(90dvh - 2px); }
.modal-topbar { display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.25rem; border-bottom:1px solid var(--border); flex-shrink:0; }
.modal-topbar h2 { font-size:1.1rem; font-weight:800; }
.modal-close { background:none; border:1px solid var(--border); border-radius:8px;
  padding:.3rem .65rem; cursor:pointer; color:var(--muted); font-size:1rem; font-family:inherit; }
.modal-close:hover { color:var(--text); }
.modal-left { border-right:1px solid var(--border); padding:1.25rem; display:flex; flex-direction:column; gap:.85rem; }
.modal-thumb { width:100%; aspect-ratio:9/16; max-height:220px; object-fit:cover; border-radius:10px; background:#111; display:block; }
.modal-vid-info strong { color:var(--text); display:block; font-size:.9rem; }
.modal-right { min-width:0; padding:1.25rem; display:flex; flex-direction:column; gap:1.25rem; }
.modal-footer { padding:.85rem 1.25rem; border-top:1px solid var(--border); flex-shrink:0;
  display:flex; gap:.75rem; align-items:center; }
#m-save-btn.btn-saved { background:#1a2a1a; border-color:#4ade80; color:#4ade80; }
.timeline-state {
  text-align:center; padding:1.5rem; color:var(--muted); font-size:.82rem;
  background:var(--surface2); border-radius:8px; border:1px solid var(--border);
}
.age-badge {
  position:absolute; bottom:.7rem; left:.75rem; z-index:3;
  padding:.22rem .55rem; border-radius:7px; font-size:.7rem; font-weight:800;
  letter-spacing:.04em; backdrop-filter:blur(6px); line-height:1.3;
}
.age-fresh   { background:rgba(74,222,128,.18);  color:#4ade80;  border:1px solid rgba(74,222,128,.35); }
.age-recent  { background:rgba(96,165,250,.18);  color:#60a5fa;  border:1px solid rgba(96,165,250,.35); }
.age-aging   { background:rgba(251,191,36,.18);  color:#fbbf24;  border:1px solid rgba(251,191,36,.35); }
.age-old     { background:rgba(251,146,60,.18);  color:#fb923c;  border:1px solid rgba(251,146,60,.35); }
.age-stale   { background:rgba(160,160,160,.12); color:#888;     border:1px solid rgba(160,160,160,.25); }
.controls-bar {
  display:flex; flex-wrap:wrap; gap:.6rem; align-items:center;
  margin-bottom:1.1rem; padding:.65rem 1rem;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
}
.ctrl-group  { display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
.ctrl-label  { font-size:.62rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:var(--muted); white-space:nowrap; }
.ctrl-select {
  background:var(--surface2); border:1px solid var(--border); border-radius:8px;
  color:var(--text); font-size:.78rem; font-weight:600; padding:.25rem .55rem;
  cursor:pointer; font-family:inherit;
}
.ctrl-select:hover { border-color:#555; }
.ctrl-dir {
  background:var(--surface2); border:1px solid var(--border); border-radius:8px;
  color:var(--text); font-size:.95rem; font-weight:900; padding:.2rem .5rem;
  cursor:pointer; font-family:inherit; line-height:1; transition:all .15s;
}
.ctrl-dir:hover { border-color:var(--accent2); color:var(--accent2); }
.ctrl-chip {
  padding:.22rem .65rem; border-radius:20px; border:1px solid var(--border);
  background:none; color:var(--muted); font-size:.75rem; font-weight:600;
  cursor:pointer; font-family:inherit; transition:all .15s; white-space:nowrap;
}
.ctrl-chip:hover  { border-color:#555; color:var(--text); }
.ctrl-chip.active { border-color:var(--accent2); color:var(--accent2);
  background:rgba(105,201,208,.1); }
.tier-chip.active[data-tier="BREAKOUT"] { border-color:#fbbf24; color:#fbbf24; background:rgba(251,191,36,.08); }
.tier-chip.active[data-tier="VIRAL"]    { border-color:#4ade80; color:#4ade80; background:rgba(74,222,128,.08); }
.tier-chip.active[data-tier="HIGH"]     { border-color:#fb923c; color:#fb923c; background:rgba(251,146,60,.08); }
.tier-chip.active[data-tier="RISING"]   { border-color:#60a5fa; color:#60a5fa; background:rgba(96,165,250,.08); }
.tier-chip.active[data-tier="LOW"]      { border-color:#666;    color:#aaa;    background:rgba(200,200,200,.05); }
.ctrl-divider { width:1px; height:20px; background:var(--border); flex-shrink:0; }
.ctrl-count   { font-size:.7rem; color:var(--muted); margin-left:auto; white-space:nowrap; }
.filter-details { display:contents; }
.filter-details > summary, .card-details > summary, .mobile-extra-stats { display:none; }
.filter-options { display:contents; }

/* The body owns scrolling so both columns remain reachable above the footer. */
.modal-body { min-height:0; align-items:start; scrollbar-gutter:stable; color-scheme:dark; }
.modal-left { min-width:0; }
.modal-body :is(.modal-left, .modal-right) { overflow-wrap:anywhere; }
.modal-body canvas { max-width:100%; }
.modal-footer { flex-wrap:wrap; }
@media (max-width:600px) {
  .modal-left { border-right:0; border-bottom:1px solid var(--border); }
  .save-btn { width:44px; height:44px; }
  .modal-close, .ctrl-dir { min-width:44px; min-height:44px; }
  .ctrl-chip, .ctrl-select, .ctrl-toggle { min-height:44px; }
  .ctrl-toggle { display:flex; align-items:center; gap:.5rem; }
  .ctrl-toggle input { width:24px; height:24px; }
  .ctrl-label { font-size:.8rem; }
  .controls-bar { padding:.75rem; gap:.75rem; }
  .controls-bar > .ctrl-group { width:100%; }
  .controls-bar > .dashboard-sort { flex-wrap:nowrap; }
  .controls-bar > .dashboard-sort .ctrl-select { flex:1; min-width:0; }
  .filter-details { display:block; width:100%; }
  .filter-details:not([open]) > .filter-options, .card-details:not([open]) > :not(summary) { display:none; }
  .filter-details > summary, .card-details > summary {
    display:flex; align-items:center; gap:.5rem; min-height:44px;
    padding:.6rem .75rem; cursor:pointer; font-weight:600; font-size:.9rem;
    color:var(--accent2); list-style:none;
  }
  .filter-details > summary::after, .card-details > summary::after { content:'+'; margin-left:auto; }
  .filter-details[open] > summary::after, .card-details[open] > summary::after { content:'−'; }
  .filter-options { display:flex; flex-direction:column; gap:1rem; padding:.75rem 0; }
  .filter-options .ctrl-group { gap:.5rem; }
  .filter-options .ctrl-label { width:100%; }
  .filter-options .ctrl-divider { display:none; }
  .ctrl-count { margin-left:0; font-size:.85rem; }
  .video-card .stats-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .video-card .stats-grid .sg-cell:nth-child(2), .video-card .stats-grid .sg-cell:nth-child(5) { display:none; }
  .sg-lbl, .banner-score span, .c-followers small { font-size:.75rem; }
  .mobile-extra-stats { display:flex; flex-wrap:wrap; gap:.75rem; padding:.5rem 1.25rem; font-size:.85rem; }
  .card-details > summary { margin:0 .5rem; }
  .video-card:hover { transform:none; }
  .modal-footer .btn { flex:1; text-align:center; }
}

.modal-thumb[hidden] { display:none; }

.current-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; margin:.75rem 0 0; }
.current-stats[hidden], #timeline-chart-block[hidden] { display:none; }
.current-stats > div { padding:.65rem .8rem; border:1px solid var(--border); border-radius:8px; }
.current-stats dt { color:var(--muted); font-size:.8rem; }
.current-stats dd { margin:.2rem 0 0; font-size:1.15rem; font-weight:700; overflow-wrap:anywhere; }

/* Save destinations belong with the video controls and the dialog action. */
.save-workspace-picker { display:flex; align-items:center; flex-wrap:wrap; gap:.65rem; margin:.8rem 0 1.2rem; font-size:.85rem; }
.save-workspace-picker label { color:var(--muted); }
.save-workspace-picker select { min-height:44px; min-width:0; max-width:100%; padding:.55rem .7rem; background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:8px; font:inherit; }
.card-creator { flex-wrap:wrap; }
.card-creator .creator-left { flex:1 1 150px; min-width:0; }
.card-creator .save-btn { width:100%; height:auto; min-height:44px; padding:.5rem .65rem; font-size:.8rem; line-height:1.4; overflow-wrap:anywhere; white-space:normal; }
.modal-footer { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:end; gap:.65rem 1rem; }
.modal-footer .save-workspace-picker { display:grid; grid-template-columns:minmax(0,1fr); gap:.35rem; min-width:0; margin:0; }
.modal-footer .save-workspace-picker label { font-size:.75rem; }
.modal-footer .save-workspace-picker select { width:100%; }
.modal-footer .save-workspace-picker a { font-size:.75rem; }
.modal-footer #m-save-btn { width:100%; min-height:44px; max-width:100%; padding:.6rem .8rem; white-space:normal; overflow-wrap:anywhere; }
.modal-footer #m-save-status { grid-column:1 / -1; overflow-wrap:anywhere; }
.modal-footer #m-save-status:empty { display:none; }
@media(max-width:600px) { .save-workspace-picker select { flex:1; } }
@media(max-width:380px) { .modal-footer { grid-template-columns:minmax(0,1fr); } }
.save-workspace-label { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.4rem 1rem; }