.yt-top { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.4fr) 110px 110px; gap: 0 12px; padding: 16px 16px 4px; align-items: start; }
.yt-f { margin-bottom: 10px; min-width: 0; }
.yt-f label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.yt-f input { width: 100%; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; }
.yt-f input:focus { outline: none; border-color: var(--blue); box-shadow: var(--focus); }
.yt-f input.bad { border-color: var(--danger); }
.yt-acts { grid-column: 1 / -1; display: flex; gap: 6px; margin-bottom: 8px; }
.yt-grid { border-top: 1px solid var(--border); grid-template-columns: minmax(0, 340px) minmax(0, 1fr) !important; }
.yt-opts label.yt-c { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 5px 0; cursor: pointer; }
.yt-opts input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--blue); margin: 0; flex: none; }
.yt-opts label.yt-c.dis { opacity: .5; cursor: not-allowed; }
.yt-o { margin: 6px 0 10px; }
.yt-l { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.yt-opts .segmented label { font-size: 14px; display: inline-flex; align-items: center; cursor: pointer; }
.yt-hint { margin: 0 0 8px 26px; }
.yt-more > summary { font-weight: 600; cursor: pointer; padding: 6px 0; font-size: 14px; }
.yt-adv { margin: 8px 0; }
.yt-adv summary { cursor: pointer; color: var(--blue); }
.yt-mw input { width: 100px; height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; }
.yt-stage { background: var(--canvas); border: 1px solid var(--border); border-radius: var(--r-ctl); padding: 12px; margin-bottom: 8px; overflow: hidden; }
.yt-frame { margin: 0 auto; max-width: 100%; transition: max-width .2s; }
.yt-ph { aspect-ratio: 16 / 9; background: #d9dee8; border-radius: 8px; display: grid; place-items: center; color: #4b5568; font-size: 14px; text-align: center; padding: 12px; }
.yt-ph.r916 { aspect-ratio: 9 / 16; max-height: 420px; margin: 0 auto; }
.yt-outp .code-view { max-height: 300px; }
.yt-sum { margin-top: 6px; overflow-wrap: anywhere; }
@media (max-width: 900px) { .yt-grid { grid-template-columns: minmax(0, 1fr) !important; } }
@media (max-width: 768px) {
  .yt-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 12px 12px 4px; }
  .yt-url, .yt-top .yt-f:nth-child(2) { grid-column: 1 / -1; }
  .yt-widths { display: none; }
  .yt-frame { max-width: 100% !important; }
  .yt-outp .pane-head:nth-of-type(2) { position: sticky; bottom: 0; background: var(--surface); z-index: 5; padding: 6px 0; }
}
@media (max-width: 900px) {
  #tool > .yt-top { order: 1; } #tool > .notice { order: 2; }
  #tool > .yt-grid > .yt-outp { order: 3; border-top: 1px solid var(--border); } #tool > .yt-grid > .yt-opts { order: 4; border-top: 1px solid var(--border); }
}