/* Плівка роликів, плеєр-картка, штамп рішення, панель дій, «про ролик». */

/* Фільтри */
.filters { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 8px 12px 12px; }
.filter {
  display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px; border-radius: var(--r-md);
  border: 1px solid var(--line-soft); background: transparent; color: var(--text-2); text-decoration: none;
  font-size: var(--fs-sm); font-weight: 500; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.filter:hover { background: var(--raise); color: var(--text); }
.filter .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex: none; }
.filter .count { margin-left: auto; color: var(--text-3); font-weight: 600; }
.filter[aria-current=true] { background: var(--raise); border-color: var(--line); color: var(--text); }
.filter[aria-current=true] .count { color: var(--text); }
.filter[data-f=new] .dot { background: var(--accent); }
.filter[data-f=ok] .dot { background: var(--ok); }
.filter[data-f=rejected] .dot { background: var(--reject); }
.filter[data-f=recut] .dot { background: var(--recut); }
.filter[data-f=all] { grid-column: 1 / -1; min-height: 34px; }
.filter[data-f=all] .dot { background: transparent; border: 1px solid var(--text-3); }

/* Плівка: перфорація ліворуч і кадри */
.reel { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  scrollbar-color: var(--line) transparent; }
.strip { position: relative; list-style: none; margin: 0; padding: 4px 10px 8px 26px; }
.strip::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 6px; width: 14px; border-radius: 3px;
  background: radial-gradient(ellipse 3px 4px at 50% 50%, var(--raise-2) 92%, transparent 100%) 0 0 / 14px 14px repeat-y,
    var(--bg-deep);
}
.frame {
  position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: start; width: 100%;
  padding: 8px; margin: 0 0 4px; border: 1px solid transparent; border-radius: var(--r-md); background: none;
  text-align: left; color: var(--text); transition: background var(--t-fast), border-color var(--t-fast);
}
.frame:hover { background: var(--raise); }
.frame[aria-current=true] { background: var(--raise); border-color: var(--line); }
.frame[aria-current=true] .thumb { outline: 2px solid var(--accent); outline-offset: 1px; }
.frame.fresh { animation: fresh 2.4s var(--ease) 2; }
@keyframes fresh { 0%, 100% { background: transparent; } 30% { background: var(--accent-soft); } }
.thumb { position: relative; width: 56px; aspect-ratio: 9 / 16; border-radius: 5px; overflow: hidden; background: var(--bg-deep); }
.thumb img, .thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.thumb video { opacity: 0; transition: opacity var(--t-mid); }
.thumb video.playing { opacity: 1; }
.thumb .tdur { position: absolute; right: 3px; bottom: 3px; padding: 0 4px; border-radius: 3px; background: rgba(0, 0, 0, .7);
  font-size: 10px; line-height: 15px; color: #fff; }
.frame-body { min-width: 0; display: grid; gap: 5px; padding-top: 1px; }
.frame-title { font-size: var(--fs-sm); font-weight: 500; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.frame-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--fs-xs); color: var(--text-3); }
.lang { text-transform: uppercase; font-weight: 600; letter-spacing: .04em; color: var(--text-2); }
.st { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; }
.st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.st-new { color: var(--accent); }
.st-ok { color: var(--ok); }
.st-rejected { color: var(--reject); }
.st-recut { color: var(--recut); }
.frame-skel { display: grid; grid-template-columns: 56px 1fr; gap: 12px; padding: 8px; }
.frame-skel .s-thumb { aspect-ratio: 9 / 16; }
.frame-skel .s-line { height: 10px; margin: 4px 0 8px; }
.frame-skel .s-line.short { width: 50%; }
.strip-end { padding: 8px 12px 16px 26px; color: var(--text-3); font-size: var(--fs-xs); text-align: center; min-height: 1px; }
.strip-empty { padding: 16px 12px 16px 26px; color: var(--text-3); font-size: var(--fs-sm); }

/* Сцена і картка-плеєр */
.stage { position: relative; min-height: 0; display: grid; place-items: center; }
.card {
  position: relative; height: 100%; max-width: 100%; aspect-ratio: 9 / 16; border-radius: var(--r-lg); overflow: hidden;
  background: #000; touch-action: none; user-select: none; -webkit-user-select: none;
  grid-area: 1 / 1; will-change: transform;
}
.card.dragging { cursor: grabbing; }
.card.anim { transition: transform var(--t-slow) var(--ease), opacity var(--t-slow) var(--ease); }
.card.spring { transition: transform 360ms var(--spring); }
.card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.card-skel { grid-area: 1 / 1; background: var(--panel); }
.card-skel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--raise), transparent);
  background-size: 200% 100%; animation: skel 1.2s linear infinite; }

.tint { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: var(--tint, transparent); }
.stamp {
  position: absolute; top: 18%; left: 50%; pointer-events: none; opacity: 0; padding: 6px 14px; border: 4px solid currentColor;
  border-radius: 8px; font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: .04em; white-space: nowrap;
  transform: translateX(-50%) rotate(var(--rot, -10deg)) scale(var(--sc, 1.1)); background: rgba(0, 0, 0, .35);
}
.stamp[data-k=ok] { color: var(--ok); --rot: -12deg; }
.stamp[data-k=reject] { color: var(--reject); --rot: 12deg; }
.stamp[data-k=recut] { color: var(--recut); --rot: -4deg; }

.card-top { display: none; }
.caption { display: none; }

.player-state { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.player-state .ps-circle { width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0, 0, 0, .55); color: #fff; }
.player-state .ps-circle svg.ic { width: 30px; height: 30px; }
.player-state .ps-msg { padding: 10px 14px; border-radius: var(--r-md); background: rgba(0, 0, 0, .7); color: var(--text);
  font-size: var(--fs-sm); max-width: 80%; text-align: center; }
.unmute { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 8px; min-height: 40px;
  padding: 0 14px; border-radius: 20px; border: 0; background: rgba(0, 0, 0, .7); color: #fff; font-size: var(--fs-sm);
  font-weight: 500; z-index: 3; }
.unmute:hover { background: rgba(0, 0, 0, .85); }

.player-bar {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 26px 10px 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, .75), transparent); z-index: 2;
}
.pbtn { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: transparent; color: #fff; transition: background var(--t-fast); }
.pbtn:hover { background: rgba(255, 255, 255, .14); }
.time { font-size: var(--fs-xs); color: #e6e6e6; min-width: 32px; }
.time-dur { color: #a8a8a8; text-align: right; }
input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; height: 28px; margin: 0; cursor: pointer;
  touch-action: none; }
.seek { flex: 1; min-width: 40px; }
.volume { width: 72px; flex: none; }
input[type=range]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--accent) var(--fill, 0%), rgba(255, 255, 255, .28) var(--fill, 0%)); }
input[type=range]::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .28); }
input[type=range]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%;
  background: #fff; border: 0; }
input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 0; }

.step { position: absolute; right: 8px; z-index: 2; border: 1px solid var(--line); }
.step-prev { top: calc(50% - 46px); }
.no-clip .step { display: none; }
.step-next { top: calc(50% + 6px); }

/* Порожньо */
.empty { grid-area: 1 / 1; max-width: 340px; display: grid; justify-items: center; gap: 12px; text-align: center; padding: 24px; }
.empty-ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--raise); color: var(--text-2); }
.empty-ic svg.ic { width: 26px; height: 26px; }
.empty h2 { font-size: var(--fs-lg); font-weight: 600; }
.empty p { color: var(--text-2); font-size: var(--fs-sm); }

/* Дії */
.actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(100%, 560px); justify-self: center; }
.act {
  display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 14px;
  border-radius: var(--r-md); border: 1px solid; font-size: var(--fs-md); font-weight: 600;
  transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.act kbd { margin-left: 2px; }
.act:active { transform: scale(.97); }
.act:disabled { opacity: .45; cursor: default; transform: none; }
.act-ok { color: var(--ok); border-color: rgba(76, 195, 138, .45); background: var(--ok-soft); }
.act-ok:hover { background: rgba(76, 195, 138, .26); }
.act-reject { color: var(--reject); border-color: rgba(240, 87, 93, .45); background: var(--reject-soft); }
.act-reject:hover { background: rgba(240, 87, 93, .26); }
.act-recut { color: var(--recut); border-color: rgba(236, 208, 90, .4); background: var(--recut-soft); }
.act-recut:hover { background: rgba(236, 208, 90, .24); }
.act.flash { box-shadow: 0 0 0 3px currentColor; }

/* Про ролик */
.info { min-height: 0; display: flex; flex-direction: column; }
.info-body { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 16px 16px; display: grid; align-content: start; gap: 14px; }
.info-title { font-size: var(--fs-xl); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; overflow-wrap: anywhere; }
.info-desc { color: var(--text-2); font-size: var(--fs-sm); white-space: pre-line; overflow-wrap: anywhere; }
.info-desc .tag { color: var(--accent); }
.meta { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: var(--fs-sm); }
.meta dt { color: var(--text-3); }
.meta dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.meta a { color: var(--text); text-decoration-color: var(--text-3); text-underline-offset: 3px; }
.meta a:hover { color: var(--accent); }
.decision { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--r-md); border-left: 3px solid var(--text-3);
  background: var(--raise); font-size: var(--fs-sm); }
.decision b { font-weight: 600; }
.decision .who { color: var(--text-3); }
.decision.d-ok { border-color: var(--ok); }
.decision.d-ok b { color: var(--ok); }
.decision.d-rejected { border-color: var(--reject); }
.decision.d-rejected b { color: var(--reject); }
.decision.d-recut { border-color: var(--recut); }
.decision.d-recut b { color: var(--recut); }
.decision.d-new b { color: var(--accent); }
.info-skel .s-line { height: 12px; margin-bottom: 10px; }

/* Телефон */
@media (max-width: 899px) {
  .card { height: 100%; width: 100%; aspect-ratio: auto; border-radius: 0; }
  .card-skel { width: 100%; height: 100%; border-radius: 0; }
  .step { display: none; }
  .volume { display: none; }
  .card-top {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; position: absolute; left: 0; right: 0; top: 0;
    padding: calc(10px + var(--safe-t)) 12px 24px; background: linear-gradient(to bottom, rgba(0, 0, 0, .6), transparent); z-index: 2;
  }
  .chip-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 20px; border: 0;
    background: rgba(0, 0, 0, .55); color: #fff; font-size: var(--fs-sm); font-weight: 500; }
  .chip-btn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
  .chip-btn .count { color: #bdbdbd; }
  .pos { font-size: var(--fs-xs); color: #d0d0d0; padding: 4px 8px; border-radius: 10px; background: rgba(0, 0, 0, .45); }
  .unmute { top: calc(60px + var(--safe-t)); }
  .caption {
    display: grid; gap: 2px; position: absolute; left: 0; right: 0; bottom: 52px; padding: 30px 14px 6px; border: 0; text-align: left;
    background: linear-gradient(to top, rgba(0, 0, 0, .6), transparent); color: #fff; z-index: 2;
  }
  .caption-title { font-size: var(--fs-md); font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
  .caption-meta { font-size: var(--fs-xs); color: #cfcfcf; }
  .player-bar { padding: 4px 8px 6px; background: rgba(0, 0, 0, .6); }
  .stamp { top: 22%; font-size: 30px; }
  .empty { align-self: center; }

  .actions { width: 100%; height: var(--act-h); gap: 0; grid-template-columns: 1fr 1fr 1fr; background: var(--bg);
    border-top: 1px solid var(--line-soft); }
  .act { min-height: 0; height: 100%; border-radius: 0; border: 0; border-right: 1px solid var(--line-soft); gap: 8px; background: transparent; }
  .act:last-child { border-right: 0; }
  .act kbd { display: none; }
  .act svg.ic { width: 22px; height: 22px; }
  .act-ok:active { background: var(--ok-soft); }
  .act-reject:active { background: var(--reject-soft); }
  .act-recut:active { background: var(--recut-soft); }

  .filters { grid-template-columns: repeat(4, 1fr); padding: 4px 12px 10px; gap: 6px; }
  .filter { flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px; min-height: 52px; padding: 6px 10px; }
  .filter .count { margin-left: 0; font-size: var(--fs-md); order: -1; color: var(--text-2); }
  .filter .dot { position: absolute; }
  .filter { position: relative; }
  .filter .dot { top: 10px; right: 10px; }
  .filter[data-f=all] { min-height: 40px; flex-direction: row; align-items: center; gap: 8px; }
  .filter[data-f=all] .count { order: 0; margin-left: auto; font-size: var(--fs-sm); margin-right: 18px; }
}