.timeline-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.timeline-options{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:10px;
  margin-top:12px;
}

.timeline-option-check{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.timeline-option-check input[type="checkbox"]{
  width:auto;
  align-self:flex-start;
}

.film-box{
  margin-top:14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(0,0,0,.14);
  padding:10px;
}

.film-head{
  font-size:12px;
  color:var(--muted);
  margin-bottom:8px;
}

.film-preview{
  width:100%;
  max-width:520px;
  max-height:220px;
  border-radius:10px;
  background:#0a0f1f;
  border:1px solid rgba(255,255,255,.14);
}

.film-stage{
  position:relative;
  width:fit-content;
  max-width:100%;
}

.film-stage .film-preview{
  display:block;
}

.film-overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:8px;
}

.film-overlay-tc{
  align-self:flex-start;
  font-size:12px;
  font-weight:700;
  letter-spacing:.4px;
  color:#fff;
  background:rgba(5,8,16,.68);
  border:1px solid rgba(255,255,255,.2);
  border-radius:8px;
  padding:3px 7px;
  text-shadow:0 1px 1px rgba(0,0,0,.7);
}

.film-overlay-line{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.film-overlay-badge{
  font-size:11px;
  color:#fff;
  background:rgba(5,8,16,.75);
  border:1px solid rgba(255,255,255,.2);
  border-radius:7px;
  padding:2px 7px;
  text-shadow:0 1px 1px rgba(0,0,0,.7);
}

.film-overlay-text{
  margin-top:6px;
  max-width:min(92%, 720px);
  max-height:38%;
  overflow:auto;
  font-size:12px;
  line-height:1.35;
  color:#fff;
  background:rgba(5,8,16,.78);
  border:1px solid rgba(255,255,255,.2);
  border-radius:9px;
  padding:6px 8px;
  text-shadow:0 1px 1px rgba(0,0,0,.7);
}

.timeline-header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.timeline-filter-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:10px;
}

.timeline-filter-row label{
  display:flex;
  align-items:center;
  gap:8px;
}

.timeline-filter-row select{
  min-width:190px;
  border-radius:8px;
}

.timeline-table-wrap{
  overflow:auto;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:rgba(0,0,0,.14);
  padding:8px;
  min-height:120px;
}

.timeline-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
}

.timeline-table th,
.timeline-table td{
  border-bottom:1px solid rgba(255,255,255,.1);
  padding:6px 6px;
  text-align:left;
  vertical-align:top;
}

.timeline-table th{
  color:var(--muted);
  font-weight:700;
}

.timeline-table .col-select{
  width:40px;
  text-align:center;
}

.timeline-table .col-tc{ width:140px; }
.timeline-table .col-take{ width:140px; }
.timeline-table .col-character{ width:190px; }
.timeline-table .col-original{ min-width:280px; }
.timeline-table .col-sync{ min-width:280px; }

.timeline-table tr.row-selected{
  background:rgba(255,255,255,.08);
}

.timeline-table input,
.timeline-table textarea{
  width:100%;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.08);
  color:#fff;
  padding:6px 7px;
  font-size:12px;
  line-height:1.25;
}

.timeline-table textarea{
  min-height:36px;
  resize:vertical;
}

.timeline-table input.timeline-row-select,
.timeline-table input.timeline-select-all{
  width:16px;
  height:16px;
  padding:0;
  margin:0;
  border-radius:4px;
}

@media (max-width:900px){
  .film-preview{max-height:180px;}
}