.works-shell { min-height: 100dvh; }
.works-platform { color: var(--muted); font-size: 13px; }
.works-main { padding: 34px 0 46px; }
.works-mode-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.works-mode-heading>p { color: var(--muted); font-size: 12px; line-height: 1.6; }
.works-actor-inline { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.works-actor-inline strong { color: var(--ink); font-size: 14px; }
.works-heading { margin-bottom: 18px; }
.works-heading .mode-button { border: 1px solid var(--line); }
.works-input-row { display: grid; grid-template-columns: minmax(0,1fr) 120px; gap: 9px; }
.works-input-row input { min-width: 0; min-height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); color: var(--ink); }
.works-sticky-header { position: sticky; z-index: 12; top: 0; margin-top: 16px; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.96); box-shadow: 0 8px 22px rgba(23,46,36,.08); backdrop-filter: blur(12px); }
.works-sticky-header:has(.works-creator[hidden]):has(.works-selection-bar[hidden]) { display: none; }
.works-creator { display: grid; grid-template-columns: auto minmax(120px,1fr) minmax(300px,auto); align-items: center; gap: 14px; padding: 12px 14px; background: transparent; }
.works-creator[hidden] { display: none; }
.works-creator-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: #e8eeeb; }
.works-creator-identity { min-width: 0; display: grid; gap: 3px; }
.works-creator-identity strong,.works-creator-identity span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.works-creator-identity strong { font-size: 15px; }
.works-creator-identity span { color: var(--muted); font-size: 11px; }
.works-creator-stats { display: grid; grid-template-columns: repeat(4,minmax(58px,1fr)); margin: 0; }
.works-creator-stats div { display: grid; gap: 2px; padding: 0 10px; border-left: 1px solid var(--line); text-align: center; }
.works-creator-stats dt { color: var(--muted); font-size: 10px; }
.works-creator-stats dd { margin: 0; color: var(--ink); font-size: 13px; font-weight: 700; }
.works-selection-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-top: 1px solid var(--line); background: rgba(247,250,248,.97); }
.works-selection-bar[hidden] { display: none; }
.works-selection-bar>span { color: var(--muted); font-size: 12px; }
.works-selection-actions { display: flex; align-items: center; gap: 4px; }
.works-selection-actions .primary-button { width: auto; min-height: 34px; padding: 0 14px; }
.works-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-top: 20px; }
.works-grid:empty { display: none; margin-top: 0; }
.work-item { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); }
.work-cover { position: relative; display: block; width: 100%; aspect-ratio: 9/13; padding: 0; overflow: hidden; border: 0; background: #17201c; cursor: pointer; }
.work-cover img { width: 100%; height: 100%; display: block; object-fit: cover; }
.work-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 44px; height: 44px; padding-left: 3px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; background: rgba(17,24,20,.4); color: #fff; font-size: 20px; pointer-events: none; }
.work-cover:hover .work-play { background: rgba(17,24,20,.7); }
.work-cover-fallback { width: 100%; height: 100%; display: grid; place-items: center; color: #aeb8b3; font-size: 22px; }
.work-duration { position: absolute; right: 5px; bottom: 5px; padding: 2px 5px; border-radius: 4px; background: rgba(20,29,24,.82); color: #fff; font-size: 10px; }
.work-checkbox { position: absolute; z-index: 2; top: 8px; left: 8px; width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.92); border-radius: 50%; background: rgba(18,29,24,.42); color: transparent; box-shadow: 0 2px 8px rgba(0,0,0,.14); cursor: pointer; }
.work-checkbox.is-selected { border-color: var(--brand); background: var(--brand); color: #fff; }
.work-checkbox:focus-visible { outline: 3px solid rgba(23,124,91,.26); outline-offset: 2px; }
.work-meta { padding: 8px; }
.work-title { min-height: 36px; display: -webkit-box; overflow: hidden; color: var(--ink); font-size: 12px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.works-paging { display: none; justify-content: center; min-height: 56px; padding-top: 16px; }
.works-paging:has(.secondary-action:not([hidden])) { display: flex; }
.works-paging .secondary-action { width: min(220px,100%); margin: 0; color: var(--brand); }
.works-dialog video { width: 100%; max-height: 62dvh; display: block; background: #111714; }
.works-dialog .download-button { margin: 11px 0 0; }
.manual-download-copy { color: var(--muted); font-size: 13px; line-height: 1.7; }
.manual-download-list { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.manual-download-list .download-button { margin: 0; }
.batch-download-choice { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 20px; }
.batch-download-choice>* { min-width: 0; }
.batch-download-choice .secondary-action { color: var(--brand); }
@media (max-width:1050px) { .works-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width:650px) {
  .works-main { padding-top: 26px; }
  .works-mode-heading { align-items: flex-start; flex-direction: column; }
  .works-input-row { grid-template-columns: 1fr; }
  .works-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
  .works-creator { grid-template-columns: auto minmax(0,1fr); padding: 10px; }
  .works-creator-avatar { width: 42px; height: 42px; }
  .works-creator-stats { grid-column: 1/-1; }
  .works-creator-stats div { padding: 0 4px; }
  .works-selection-bar { align-items: flex-start; flex-direction: column; }
  .works-selection-actions { width: 100%; justify-content: space-between; }
  .media-grid-actions .download-button,.media-grid-actions .share-button { padding-inline: 3px; font-size: 11px; }
  .batch-download-choice { grid-template-columns: 1fr; }
}
@media (max-width:380px) { .works-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
.avatar-fallback { display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-size: 22px; font-weight: 700; }