/* Video compressor — layout specific to this tool */

.vid-stage{
  display:grid;
  grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:0;
  border-top:1px solid var(--rule);
}
@media (max-width:760px){
  .vid-stage{grid-template-columns:1fr;}
}

.vid-preview{
  background:#0c0e0d;
  display:grid;place-items:center;
  padding:16px;min-height:170px;
  border-right:1px solid var(--rule);
}
@media (max-width:760px){.vid-preview{border-right:none;border-bottom:1px solid var(--rule);}}
.vid-preview video{
  max-width:100%;max-height:210px;border-radius:var(--radius-sm);display:block;background:#000;
}

.vid-facts{padding:18px 20px;}
.vid-name{
  font-weight:600;font-size:.97rem;margin-bottom:12px;
  word-break:break-word;
}
.fact-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));
  gap:14px 18px;
}
.fact .k{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:3px;
}
.fact .v{
  font-size:1.02rem;font-weight:600;font-variant-numeric:tabular-nums;
}
.fact .v.good{color:var(--accent);}
.fact .v.over{color:var(--warn);}

/* target picker */
.targets{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:9px;
}
.target{
  border:1px solid var(--rule-2);border-radius:var(--radius-sm);
  background:var(--surface);padding:11px 13px;cursor:pointer;text-align:left;
  font-family:var(--f-ui);transition:border-color .13s,background .13s;
}
.target:hover{border-color:var(--accent);}
.target[aria-pressed="true"]{
  border-color:var(--accent);background:var(--accent-soft);
}
.target .t-name{font-weight:600;font-size:.93rem;color:var(--ink);display:block;}
.target .t-size{
  font-family:var(--f-mono);font-size:.75rem;color:var(--ink-3);margin-top:2px;display:block;
}
.target[aria-pressed="true"] .t-size{color:var(--accent);}

.custom-size{display:flex;gap:8px;align-items:center;margin-top:11px;}
.custom-size label{font-size:.85rem;color:var(--ink-2);white-space:nowrap;}
.custom-size input{max-width:110px;}

/* result */
.result-row{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:16px 20px;border-top:1px solid var(--rule);
  background:var(--accent-soft);
}
.result-figs{display:flex;gap:22px;flex-wrap:wrap;}
.result-figs .fact .v{font-size:1.1rem;}
.result-row .spacer{margin-left:auto;}

.log-toggle{
  font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;
  color:var(--ink-3);background:none;border:none;cursor:pointer;padding:6px 0;
  text-transform:uppercase;
}
.log-toggle:hover{color:var(--ink-2);}
.log-box{
  font-family:var(--f-mono);font-size:.71rem;line-height:1.5;
  background:var(--surface-2);color:var(--ink-3);
  border-radius:var(--radius-sm);padding:11px 13px;
  max-height:150px;overflow:auto;white-space:pre-wrap;word-break:break-all;
  margin:0 20px 16px;
}