/* YT Thumbnail Tool - responsive, accessible */

.yttt-wrap{
  max-width:980px;
  margin:20px auto;
  padding:14px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  background:#fff;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

.yttt-tool{
  padding:12px;
  border-radius:12px;
  background:rgba(0,0,0,.02);
  border:1px solid rgba(0,0,0,.06);
}

.yttt-label{display:block;font-weight:800;margin-bottom:8px}
.yttt-controls{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}

.yttt-input{
  flex:1 1 420px;
  min-width:240px;
  padding:12px;
  border:1px solid rgba(0,0,0,.18);
  border-radius:10px;
  font-size:16px;
  outline:none;
}
.yttt-input:focus{border-color:rgba(0,0,0,.35)}

.yttt-btn{
  padding:12px 14px;
  border:1px solid rgba(0,0,0,.18);
  border-radius:10px;
  background:#111;
  color:#fff;
  cursor:pointer;
  font-weight:800;
}
.yttt-btn:disabled{opacity:.6;cursor:not-allowed}
.yttt-btn.yttt-btn-secondary{background:#fff;color:#111}

.yttt-topbar{
  display:flex;
  gap:12px;
  align-items:flex-end;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-top:12px;
}

.yttt-field{display:grid;gap:6px;min-width:220px}
.yttt-small-label{font-weight:700;font-size:.92rem;opacity:.9}
.yttt-select{
  padding:10px;
  border:1px solid rgba(0,0,0,.18);
  border-radius:10px;
  background:#fff;
  font-size:14px;
}
.yttt-check{
  display:flex;
  gap:8px;
  align-items:center;
  font-weight:700;
  font-size:.92rem;
  opacity:.9;
  user-select:none;
}
.yttt-check input{transform:translateY(1px)}

.yttt-actions{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-top:12px;
}

.yttt-note{margin:0;opacity:.85;font-size:.95rem}

.yttt-status{margin-top:10px;min-height:18px;font-size:.95rem}
.yttt-status.is-error{color:#b00020}
.yttt-status.is-success{color:#0b6b2f}

.yttt-output{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
@media (max-width:720px){
  .yttt-output{grid-template-columns:1fr}
  .yttt-topbar{align-items:stretch}
  .yttt-field{width:100%}
}

.yttt-card{
  border:1px solid rgba(0,0,0,.10);
  border-radius:12px;
  padding:12px;
  background:#fff;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.yttt-card-header{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.yttt-card-title{margin:0;font-size:1.05rem}
.yttt-badge{font-size:.85rem;opacity:.8;white-space:nowrap}

.yttt-img-wrap{
  width:100%;
  border-radius:10px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.08);
}
.yttt-img{width:100%;height:auto;display:block}

.yttt-url-group{display:grid;gap:8px;width:100%}
.yttt-url-line{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.yttt-url{
  flex:1 1 280px;
  min-width:220px;
  padding:10px;
  border:1px solid rgba(0,0,0,.18);
  border-radius:10px;
  font-size:14px;
}

.yttt-small-btn{
  padding:9px 12px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.18);
  background:#111;
  color:#fff;
  cursor:pointer;
  font-weight:800;
}
.yttt-small-btn-secondary{background:#fff;color:#111}

.yttt-small-link{
  display:inline-flex;
  align-items:center;
  padding:9px 12px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,.18);
  text-decoration:none;
  color:#111;
  background:#fff;
  font-weight:800;
}

.yttt-small-btn[aria-busy="true"]{opacity:.7}