/* =====================================================================
   Library v2: stats, filters, date groups, scrub cards, bulk select, Ctrl+K
   ===================================================================== */
.crumb .ico { width: 14px; height: 14px; color: var(--text-3); }
#crumbTitle .ico { margin-right: 2px; }

.lib-head { margin-top: 40px; animation: rise .5s var(--ease-out) both; }
.lib-head .page-title { margin-top: 0; }

.lib-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 22px 0 6px;
  border-radius: 12px; overflow: hidden; background: var(--border); box-shadow: 0 0 0 1px var(--border);
  animation: rise .5s var(--ease-out) .06s both;
}
.lib-stats:empty { display: none; }
.stat { background: var(--card); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stat-k { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-3); font-weight: 500; }
.stat-k .ico { width: 13px; height: 13px; }
.stat b { font-size: 20px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat-sub { font-size: 11.5px; color: var(--text-3); }
@media (max-width: 760px) { .lib-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.lib-toolbar { gap: 6px; flex-wrap: wrap; }
.lib-filters { display: flex; gap: 2px; }
.lib-filters .count { font-size: 11px; color: var(--text-3); font-variant-numeric: tabular-nums; margin-left: 2px; }
.lib-filters .count:empty { display: none; }
.lib-search { position: relative; }
.lib-search .ico { position: absolute; left: 9px; top: 8px; width: 14px; height: 14px; color: var(--text-3); pointer-events: none; }
.lib-search .input { width: 220px; height: 30px; padding-left: 30px; font-size: 13px; transition: width .35s var(--ease-out), box-shadow .15s, background .15s; }
.lib-search .input:focus { width: 280px; }
.lib-toolbar .dd.compact { width: 140px; }
.lib-toolbar .dd-btn { height: 30px; }
.lib-viewseg { width: 70px; }
.lib-viewseg button { height: 26px; }
.lib-viewseg .ico { width: 14px; height: 14px; }

.bulkbar {
  position: sticky; top: 52px; z-index: 6; display: flex; align-items: center; gap: 6px; margin: 4px 0 12px; padding: 6px 8px 6px 14px;
  border-radius: 10px; background: color-mix(in srgb, var(--blue) 16%, var(--card));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--blue) 55%, transparent), 0 8px 24px rgba(0, 0, 0, .3);
  animation: pop-in .35s var(--spring) both; backdrop-filter: blur(10px);
}
.bulk-count { font-size: 13px; }
.bulk-count b { font-variant-numeric: tabular-nums; }

.lib-groups { display: flex; flex-direction: column; gap: 26px; }
.lib-group-head { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 12.5px; font-weight: 600; color: var(--text-2); animation: fade .4s ease both; }
.lib-group-head::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.lib-group-n { font-weight: 500; color: var(--text-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.lib-none { display: grid; justify-items: center; gap: 4px; padding: 56px 0; color: var(--text-3); font-size: 13px; animation: rise .35s var(--ease-out) both; }
.lib-none .ico { width: 22px; height: 22px; margin-bottom: 4px; }
.lib-none b { color: var(--text); font-weight: 600; }

/* hover-scrub through the video on a card */
.vthumb { isolation: isolate; }
.vscrub { position: absolute; inset: 0; background-repeat: no-repeat; opacity: 0; transition: opacity .15s; pointer-events: none; }
.vscrub-line { position: absolute; bottom: 0; left: 0; width: 2px; height: 3px; margin-left: -1px; background: #fff; opacity: 0; pointer-events: none; }
.vscrub-line::before { content: ""; position: absolute; right: 2px; bottom: 0; width: 100vw; height: 3px; background: var(--blue); }
.vthumb.scrubbing .vscrub, .vthumb.scrubbing .vscrub-line { opacity: 1; }
.vthumb.scrubbing .play-hint { opacity: 0 !important; }
.vthumb.scrubbing img { filter: none !important; }

/* status chips */
.vchips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.vchips:empty { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 7px; border-radius: 99px; font-size: 11px; font-weight: 500;
  color: var(--text-2); background: rgba(127, 127, 127, .1); box-shadow: inset 0 0 0 1px var(--border);
}
.chip .ico { width: 11px; height: 11px; }
.chip.ok { color: #4cb782; background: rgba(76, 183, 130, .1); box-shadow: inset 0 0 0 1px rgba(76, 183, 130, .25); }
.chip.busy { color: #f2a65a; background: rgba(242, 166, 90, .1); box-shadow: inset 0 0 0 1px rgba(242, 166, 90, .25); }
.trow .chip { margin-left: 6px; }

/* selection */
.vselect, .tselect {
  display: grid; place-items: center; border: 0; padding: 0; cursor: pointer; color: transparent;
  background: rgba(10, 10, 12, .55); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .75); backdrop-filter: blur(6px);
  transition: opacity .15s, transform .25s var(--spring), background .15s, color .15s;
}
.vselect { position: absolute; top: 8px; left: 8px; z-index: 3; width: 22px; height: 22px; border-radius: 6px; opacity: 0; transform: scale(.8); }
.vselect .ico, .tselect .ico { width: 13px; height: 13px; stroke-width: 3; }
.vcard:hover .vselect, .selecting .vselect { opacity: 1; transform: none; }
.vcard.selected { box-shadow: 0 0 0 2px var(--blue), 0 0 0 5px color-mix(in srgb, var(--blue) 25%, transparent); }
.vcard.selected .vselect, .trow.selected .tselect { background: var(--blue); color: #fff; box-shadow: none; }
.tselect { width: 18px; height: 18px; border-radius: 5px; flex: none; opacity: 0; background: transparent; box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.trow:hover .tselect, .selecting .tselect { opacity: 1; }
.trow.selected { background: color-mix(in srgb, var(--blue) 10%, transparent) !important; }
.trow.tgroup { min-height: 32px; font-size: 12px; font-weight: 600; color: var(--text-3); background: rgba(127, 127, 127, .04); animation: none; }
.trow.tgroup span { grid-column: 1 / -1; }
.tname-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tnoimg .ico { width: 14px; height: 14px; color: var(--text-3); }
.noimg .ico { width: 28px; height: 28px; }

/* empty states and pages with the logo */
.empty-mark { width: 64px; height: 64px; margin: 0 auto; border-radius: 18px; display: grid; place-items: center; background: #0a0a0b; box-shadow: 0 0 0 1px var(--border-strong), 0 12px 30px rgba(0, 0, 0, .35); animation: pop-in .6s var(--spring) both; }
.empty-mark img { width: 62%; animation: spin-slow 14s linear infinite; }
@keyframes spin-slow { to { transform: rotate(360deg); } }
.login-logo { width: 56px; height: 56px; border-radius: 14px; display: block; margin: 0 auto; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); animation: pop-in .6s var(--spring) both; }
.finish-logo { width: 34px; height: 34px; margin-bottom: 8px; display: block; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .3)); animation: spin-slow 2.4s linear infinite; }
.ed-empty-ico .ico, .t-empty-ico .ico { width: 28px; height: 28px; color: var(--text-3); }
.mode .ico { width: 20px; height: 20px; }
.hint.warn .ico { width: 14px; height: 14px; vertical-align: -2px; }
.side-tabs .vtab .ico, #shareTabs .ico { width: 14px; height: 14px; }
#shareTabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

/* sidebar: little thumbnails for recent videos */
.sb-thumb { width: 22px; height: 14px; border-radius: 3px; flex: none; background: #111 center / cover no-repeat; box-shadow: 0 0 0 1px var(--border-strong); display: grid; place-items: center; }
.sb-thumb .ico { width: 10px; height: 10px; color: var(--text-3); }
.sb-thumb.rec { background: var(--rec); box-shadow: none; animation: pulse 1.2s infinite; }

/* ---------- command palette (Ctrl+K) ---------- */
.cmdk-trigger {
  display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 6px 0 10px; margin-right: 6px; border: 0; border-radius: 8px; cursor: pointer;
  background: rgba(127, 127, 127, .07); box-shadow: inset 0 0 0 1px var(--border); color: var(--text-3); font: inherit; font-size: 12.5px;
  transition: background .15s, color .15s;
}
.cmdk-trigger:hover { background: rgba(127, 127, 127, .12); color: var(--text-2); }
.cmdk-trigger .ico { width: 14px; height: 14px; }
.cmdk-trigger span:not(.kbd) { min-width: 150px; text-align: left; }
@media (max-width: 860px) { .cmdk-trigger span:not(.kbd) { display: none; } }
.cmdk { position: fixed; inset: 0; z-index: 200; }
.cmdk-backdrop { position: absolute; inset: 0; background: rgba(5, 5, 8, .55); backdrop-filter: blur(3px); animation: fade .18s ease both; }
.cmdk-panel {
  position: absolute; left: 50%; top: 16vh; width: min(640px, calc(100vw - 32px)); transform: translateX(-50%);
  background: var(--dd-bg, var(--bg)); border-radius: 14px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 24px 70px rgba(0, 0, 0, .55);
  animation: cmdk-in .32s var(--spring) both;
}
@keyframes cmdk-in { from { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(.97); } }
.cmdk.out .cmdk-panel { animation: cmdk-out .15s ease-in forwards; }
.cmdk.out .cmdk-backdrop { animation: fade .15s ease reverse forwards; }
@keyframes cmdk-out { to { opacity: 0; transform: translateX(-50%) scale(.98); } }
.cmdk-input { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 54px; box-shadow: inset 0 -1px 0 var(--border); }
.cmdk-input .ico { width: 17px; height: 17px; color: var(--text-3); }
.cmdk-input input { flex: 1; border: 0; outline: none; background: transparent; font: inherit; font-size: 15.5px; color: var(--text); }
.cmdk-input input::placeholder { color: var(--text-3); }
.cmdk-list { max-height: min(420px, 55vh); overflow-y: auto; padding: 6px; }
.cmdk-sec { padding: 10px 10px 6px; font-size: 11.5px; font-weight: 600; color: var(--text-3); }
.cmdk-item { display: flex; align-items: center; gap: 11px; height: 42px; padding: 0 10px; border-radius: 8px; cursor: pointer; color: var(--text-2); }
.cmdk-item .ico { width: 16px; height: 16px; color: var(--text-3); }
.cmdk-item.on { background: rgba(127, 127, 127, .12); color: var(--text); }
.cmdk-item.on .ico { color: var(--text); }
.cmdk-label { font-size: 14px; font-weight: 500; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-hint { margin-left: auto; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.cmdk-thumb { width: 34px; height: 20px; border-radius: 4px; flex: none; background: #111 center / cover no-repeat; box-shadow: 0 0 0 1px var(--border-strong); }
.cmdk-empty { padding: 34px; text-align: center; color: var(--text-3); font-size: 13px; }
.cmdk-foot { display: flex; gap: 16px; padding: 9px 14px; font-size: 11.5px; color: var(--text-3); box-shadow: inset 0 1px 0 var(--border); }
.cmdk-foot span { display: inline-flex; align-items: center; gap: 4px; }